html,body{
width:100%;
height:100%;
}
body {
margin:0 auto;
padding:0;
font-size:16px;
line-height:200%;
background-color:#eef4d9;
font-family: 'Kosugi Maru', sans-serif;
font-weight:500;
color:#333333;
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;

}

@keyframes fadeInAnime
{
from {opacity: 0;}
to {opacity: 1;}
}

.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.5s, transform 1s;
}
.fade.active {
	opacity: 1;
	transform: translateY(0px);
}



#header{
margin:0;
padding:0;
width:100%;
height:100%;
background-image:url(/pic/bg.jpg);
background-size:cover;
}


#logo{
margin:0 auto;
width:350px;
position:absolute;
top:45%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform:translateY(-50%) translateX(-50%);
z-index:110;
text-align:center;
}
#logo img{
margin:0 auto;
width:100%;
}
.logotxt{
margin-top:30px;
line-height:150%;
}


#scroll{
display:none;
}


#contact{
margin:0;
padding:0;
position:fixed;
bottom:10px;
left:20px;
z-index:330;
}
#contact img{
width:150px;
}

#topmenu{
width:100%;
position:fixed;
bottom:0;
margin:0 auto;
padding:10px 0;
z-index:10;
background-color:#23b785;
color:#ffffff;
}
#topmenu ul{
width:800px;
margin:0 auto;
display:flex;
justify-content:space-around;
list-style-type: none;
padding-left:0;
}
#topmenu li{
text-align:center;
}


.header{
margin:0 auto;
width:400px;
}
.header img{
width:100%;
}

#infobox{
margin:o auto;
}

.info {
  position: relative;
  width: 100%;
  height:150px;
  border:1px solid #333333;
  border-radius:10px;

}
.info iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}

#spinfobox{
display:none;
}

.spinfoscroll{
display:none;
}
.infoscroll{
margin:30px auto 0 auto;
text-align:left;
}

.container00{
margin:0 auto;
padding:50px 0 0 0;
width:100%;
background-image:url();
background-size:contain;
background-repeat:no-repeat;

}


.container0{
margin:0 auto 50px auto;
padding:100px 0 ;
width:100%;
background-image:url();
background-size:contain;
background-repeat:no-repeat;

}

.container{
margin:50px auto;
padding:100px 0 ;
width:100%;
background-image:url();
background-size:contain;
background-repeat:no-repeat;

}
.containerbox{
margin:0 auto;
width:700px;
}



/*  
#profile{
margin:0 auto 50px auto;
padding:0 ;
width:100%;
height:100%;
display:flex;
}
.profileleft{
margin:0;
width:50%;
height:100%;
border:1px solid #cccccc;
margin:0 auto;  
display: flex;
justify-content: center;
align-items: center;
text-align:center;
}
.profileright{
margin:0;
width:50%;
height:100%;
border:1px solid #cccccc;
margin:0 auto; display: flex;
justify-content: center;
align-items: center;
text-align:center;
}
.profilebox{
margin:0 auto;
width:70%;
}
.profilebox img{
width:100%;
}
*/




/* footer */

#footer{
margin:0 auto;
padding:50px 0;
width:100%;
text-align:center;
font-size:12px;
line-height:170%;
}
.copy{
font-size:18px;
}

#city{
margin:0 auto;
height:230px;
width:100%;
background-image:url(../pic/foot01.png);
background-position:top center;
background-repeat:no-repeat;
}





/* txt */

.title01{
margin:0 auto 50px auto;
text-align:center;
}
.title01 img{
width:250px;
}
.title02{
margin:30px auto;
text-align:center;
font-size:20px;
font-weight:bolder;
}


.marker {
background:linear-gradient(transparent 80%, #ffff00 80%);
}

/* modaal */

#policy, #profile01, #profile02{
margin:0;
padding:0;
z-index:10;
position:fixed;
}


.profiletxt{
margin:0 auto 50px auto;

}

.profiletop{
margin:0 auto 40px auto;
display:flex;
}
.profileimg{
width:30%;
}
.profileimg img{
width:100%;
}
.profiletxt{
width:60%;
}




.profile{
display:flex;
}
.profileleft{
margin:0;
width:50%;
text-align:center;
}
.profileright{
margin:0;
width:50%;
text-align:center;
}

.profilebox{
margin:0 auto;
padding:0;
width:70%;
}
.profilebox img{
width:100%;
}





.content{
margin:0 auto;
padding:30px 0;
width:100%;
background-color:#eef4d9;
}


.contentbox03{
margin:0 auto;
padding:50px;
width:900px;
background-color:#ffffff;
color:#333333;
border-radius:10px;
border:1px solid;
}

.contentbox{
margin:0 auto;
padding:50px;
width:900px;
background-color:#2557af;
color:#ffffff;
border-radius:10px;
}

.contentbox02{
margin:0 auto;
padding:50px;
width:900px;
background-color:#f2791d;
color:#ffffff;
border-radius:10px;
}


.contentimg{
margin:0 auto 30px auto;
width:300px;
}
.contentimg img{
width:100%;
}


.line{
margin:30px auto 0 auto ;
width:80%;
}
.line img{
width:100%;
}





#formWrap {
	width:100%;
	margin:0 auto;
	line-height:200%;
}
table.formTable01{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable01 td,table.formTable01 th
{
	border:1px solid #2d0304;
	padding:10px;
}
table.formTable01 th
{
	width:40%;
	font-weight:normal;
	background:#f4ed88;
	text-align:left;
}


table.formTable02{
	width:100%;
	margin:30px auto 0 auto;
	border-collapse:collapse;
}
table.formTable02 td,table.formTable02 th
{
	border:1px solid #2d0304;
	padding:10px;
}
table.formTable02 th
{
	width:40%;
	font-weight:normal;
	background:#c8dfca;
	text-align:left;
}




input[type="text"], textarea, select {
	width:100%;
	padding:10px 0;
	display:block;
	font-size:18px;
	border-radius:10px;
	border:1px solid #2d0304;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:30%;
	height:40px;
	border-radius:10px;
	border:1px solid #2d0304;
}




a:hover img{filter:Alpha(Opacity=70);  -moz-opacity:0.7; opacity:0.7; -khtml-opacity:0.7;}
a img{border:none;}
a{text-decoration:none; font-weight:500; }

a:link{color:#12a2c4; border:none;}
a:visited{color:#12a2c4; border:none;}
a:hover{filter:Alpha(Opacity=80);  -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
a:active{color:#12a2c4; border:none;}

#topmenu a{text-decoration:none; font-weight:500; }
#topmenu a:link{color:#ffffff;}
#topmenu a:visited{color:#ffffff;}
#topmenu a:hover{filter:Alpha(Opacity=80);  -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
#topmenu a:active{color:#ffffff;}

.link a{text-decoration:none; font-weight:500; padding:10px; border-radius:10px;}
.link a:link{color:#ffffff; background-color:#12a2c4;}
.link a:visited{color:#ffffff; background-color:#12a2c4;}
.link a:hover{filter:Alpha(Opacity=80);  -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
.link a:active{color:#ffffff; background-color:#12a2c4;}




blockquote{
margin:30px 0 0 0;
padding:30px;
border:1px solid;
}




@media screen and (max-width:1250px){

body{
font-size:14px;
}

#topmenu li{
font-size:13px;
}

#logo{
width:320px;
}


.container{
margin:45px auto;
width:100%;
}
.containerbox{
margin:0 auto;
width:650px;
}
.container0{
margin:0 auto 50px auto;
width:100%;
}
.containerbox2{
margin:0 auto;
width:650px;
}





#footer{
margin:0 auto;
width:100%;


}



}


@media screen and (max-width:900px){

#header{
background-image:none;
}

#scroll{
display:block;
position:absolute;
bottom:20px;
left:50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
z-index:1000;
}
#scroll img{
width:40px;
}

#contact {
left:10px;
bottom:5px;
}

#contact img{
width:90px;
z-index:330;
}


#logo{
width:100%;
}
#logo img{
width:50%;
}

.logotxt{

}

#topmenu{
visibility:hidden;
}


.header{
margin:0 auto;
width:70%;
}
.header img{
width:100%;
}





#spinfobox{
display:block;
}

.spinfo {
  position: relative;
  width: 100%;
  height:150px;
  border:1px solid #333333;
  border-radius:10px;
}
.spinfo iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}

#infobox{
display:none;
}
.spinfoscroll{
display:block;
margin:20px auto 0 auto;
text-align:left;
line-height:160%;
}
.infoscroll{
display:none;
}




.container{
margin:0 auto 80px auto;
padding:50px 0 0 0;
width:100%;
font-size:13px;
background-image:url();
}
.containerbox{
margin:0 auto;
width:80%;
}

.container0{
margin:0px auto 80px auto;
padding:50px 0 0 0;
width:100%;
font-size:13px;
background-image:url();
}
.containerbox2{
margin:0 auto;
width:80%;
}




#footer{
margin:0 auto;
padding:50px 0;
width:100%;
text-align:center;
font-size:10px;
line-height:170%;
}
#city{
margin:0 auto;
height:90px;
width:100%;
background-image:url(../pic/foot02.png);
background-position: center top;
background-size: contain;
background-repeat: no-repeat;

}
.copy{
font-size:14px;
}


.title01{
margin:0 auto 40px auto;
}
.title01 img{
width:60%;
}





/* メディクリ modaal */

.profiletxt{
margin:0 auto 30px auto;

}
.profiletop{
margin:0 auto 50px auto;
padding:0 ;
width:100%;
display:block;
}
.profile{
margin:0 auto 50px auto;
padding:0 ;
width:100%;
display:flex;
}
.profileimg{
margin:0 auto 30px auto;
width:60%;
}
.profileimg img{
width:100%;
}
.profiletxt{
width:100%;
}



.profilebox{
margin:0 auto;
padding:0;
width:90%;
}
.profilebox img{
width:100%;
}
.content{
width:100%;
margin:0 auto;
padding:20px;
text-align:left;
font-size:13px;
}
.content02{
width:100%;
margin:0 auto;
padding:20px;
text-align:left;
font-size:13px;
}
.contentbox{
width:100%;
margin:0 auto;
text-align:left;
font-size:13px;
}
.contentbox02{
width:100%;
margin:0 auto;
text-align:left;
font-size:13px;
}
.contentbox03{
width:100%;
margin:0 auto;
text-align:left;
font-size:13px;
}
.contentimg{
width:50%;
}
.contentimg img{
width:100%;
}

.line{
margin:30px auto 0 auto ;
width:100%;
}
.line img{
width:100%;
}

#formWrap {
	width:100%;
	margin:0 auto;
}
table.formTable01 th, table.formTable01 td, 
table.formTable02 th, table.formTable02 td
{
	width:auto;
	display:block;
}
table.formTable01 th,
table.formTable02 th
{
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea, select {
	width:100%;
	padding:5px 0;
	font-size:13px;
	display:block;
	border-radius:5px;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:50%;
	height:40px;
	border-radius:5px
}







}




@media screen and (max-width:768px){



#logo img{
width:60%;
}


}