/*
node-sass scssstyle.scss style.css
*/

/*  IMPORT
---------------------------------------------- */
@import url("reset20.css");
@import url("custom.css");
@import url("main.css");
@import url("common.css");
@import url("move.css");
@import url("font_deco.css");
@import url("style_common.css");
@import url("page_style.css");
@import url("common-scpt.css");


header {
  width: 100%;
  height: 70px;
  color: #1d1d1d;
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: 0;
}
  header .inner {
	height: 100%;
	margin: 0px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
  header .inner img {
	width: auto;
	height: 45px; 
	max-height:60px;
	}
  header .inner nav ul {
	list-style: none;
	display: flex;
	}
  header .inner nav ul li a{
	margin: 0 2px;
	padding:0 10px;
	font-size: 17px;
color:#000;
text-decoration:underline;
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(70, 130, 180,1) 50%);
	background-position: 0 0;
	background-size: auto 200%;
	transition: .3s;
	}
  header .inner nav ul li a:hover{
	background-position: 0 100%;
	color: #fff;

}


@media screen and (max-width: 768px) {
header {
  top: 0;
  height: 70px;
}
  header .inner {
	margin: 0 15px;
	justify-content: center; }
	header .inner img {
	width:auto;
	height: 45px; 
	min-height:30px;
	position: fixed;
	top:5px;
	left:5px;
	}
  header .inner nav {
	position: fixed;
	top: 10vh;
	bottom: 0;
	right: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	background-color: rgba(0, 0, 0, 0.7); /*----ƒnƒ“ƒo[ƒK[ƒƒjƒ…[‚Ě”wŒiFE”Z‚ł----*/
	}
  header .inner nav ul {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-start;
	}
  header .inner nav ul li {
	margin: 20px ;
	}
  header .inner nav ul li a {
	font-size: 20px;
	color: white; 
	background-image: none;
	}
  header .inner nav ul li a:hover{
	background-position: 0 100%;
	color: #fff;

}


}/*--/@media--*/


/*----”Ä—pƒy[ƒWƒƒCƒ“‰ć‘œ---*/

#mainImg_box{
  width:100%;
  height:100px;
  background-image: url("../img/mainSp.jpg");
  background-size:cover;
  background-position:50% 50%;
}

@media only screen and (min-width: 835px) and (max-width: 1023px)  {
#mainImg_box{
  width:100%;
  height:150px;
  background-image: url("../img/main.jpg");
  background-size:cover;
  background-position:50% 50%;
}
}/*--/@media--*/

@media screen and (min-width: 1024px) {
#mainImg_box{
  width:100%;
  height:200px;
  background-image: url("../img/main.jpg");
  background-size:cover;
  background-position:70% 50%;
}
}/*--/@media--*/


/*----Drƒy[ƒWƒƒCƒ“‰ć‘œ---*/

#mainImg_box_dr{
  width:100%;
  height:200px;
  background-image: url("../img/dr_ope.jpg");
  background-size:cover;
  background-position:50% 50%;
}

@media only screen and (min-width: 835px) and (max-width: 1023px)  {
#mainImg_box_dr{
  width:100%;
  height:300px;
  background-image: url("../img/dr_ope.jpg");
  background-size:cover;
  background-position:50% 50%;
}
}/*--/@media--*/

@media screen and (min-width: 1024px) {
#mainImg_box_dr{
  width:100%;
  height:300px;
  background-image: url("../img/dr_ope.jpg");
  background-size:cover;
  background-position:70% 50%;
}
}/*--/@media--*/




/*----ƒNƒŠƒjƒbƒNˆÄ“ŕƒy[ƒWƒƒCƒ“‰ć‘œ---*/

#mainImg_box_clinic{
  width:100%;
  height:200px;
  background-image: url("../img/clinic.jpg");
  background-size:cover;
  background-position:50% 50%;
}

@media only screen and (min-width: 835px) and (max-width: 1023px)  {
#mainImg_box_clinic{
  width:100%;
  height:300px;
  background-image: url("../img/clinic.jpg");
  background-size:cover;
  background-position:50% 50%;
}
}/*--/@media--*/

@media screen and (min-width: 1024px) {
#mainImg_box_clinic{
  width:100%;
  height:300px;
  background-image: url("../img/clinic.jpg");
  background-size:cover;
  background-position:70% 50%;
}
}/*--/@media--*/



/*---‰ş‘wƒy[ƒWƒƒCƒ“ƒ^ƒCƒgƒ‹ƒeƒLƒXƒg‰ć‘œ‹¤’Ę---*/

.headerSub-img01 img{
  width: 200px;
  height: auto;
  margin-top:0px;
  margin-left:-100px;
  object-fit: scale-down;
  position: absolute;
  left:50%;
  top:0;
}


@media screen and (min-width: 835px) {
.headerSub-img01 img{
  width: 260px;
  height:auto;
  margin-top:30px;
  margin-left:-130px;
  object-fit: scale-down;
  position: absolute;
 left:50%;
  top:0;
}
}/*--/@media--*/