@charset "utf-8";
/*メイン画像エリア*/
#main_area{position:relative;height: 451px;margin-bottom:20px;}
#main_area > div{
	position: absolute;
    left: 50%;
    width: calc(100vw - 70px);
    height: 451px;
    transform: translateX(-50%);
    border-radius: 30px;
}
#main_area div figure{
	border-radius: 30px;
	width: 100%;
	height: 100%;
	background-image: url("../images/clinic/main.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#main_area p{
	white-space: nowrap;
	position: absolute;
	bottom:15%;
	left:5%;
	font-size: 2.5rem;
	letter-spacing: 0.3vw;
	font-weight: 500;
	color:#FFF;
}
/*パンくず*/
#pankuzu > ul{
	font-size:16px;
	width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
#pankuzu li{
	color: #666666;
	letter-spacing: 1px;
	line-height: 120%;
}
#pankuzu li:not(:last-child)::after{
	content: '>';
	width: 25px;
	height: 25px;
	padding: 0 20px;
}
/*ご挨拶*/
.imgboxR{display:flex; justify-content: space-between;align-items: flex-start;}
.imgboxR img{order:2; max-width:420px; width:100%; height: auto; border-radius: 15px;}
.imgboxR div{order:1; padding:15px;}
/*プロフィール*/
.boxborder{
	border:1px solid #ccc;
	padding:30px 60px;
	max-width: 700px;
	width:100%;
	margin: auto;
	border-radius: 15px;
}
.boxborder dl div{display:flex;}
.boxborder dl dt{width:6em;}
.boxborder dl dd{width:calc(100% - 6em);}

/*施設紹介*/
.thumwrap{width: 30%;}
#thumbnail{
    overflow: hidden;   
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#thumbnail li{width:48%;margin: 0 1%;}
#thumbnail li:not(:nth-last-child(-n+2)) {margin-bottom: 15px;}


#thumbnail li img{
    width: 100%;
}
.main_photo{
	width:calc(100% - 33%);
}
.main_photo img{margin-bottom:30px;width:100%;height: auto;border-radius: 15px;}
.main_photo h3{font-size:20px;}
#big_img,#caption,#des {
    opacity: 0;
    transition: opacity 0.7s ease-in-out; /* 0.5秒かけて透明度が変化する */
}
/* フェードイン後の状態（表示） */
.fade-in {
    opacity: 1 !important;
}

/* レスポンシブ
------------------------------------------------------------*/

/* 1250px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1250px){
	#main_area > div{
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding:0 2vw;
	}
	#main_area div figure{
		background-position:top 0px left 80%;
	}
	#main_area p{
		font-size: 2.0rem;
	}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	body {min-width: 980px!important;}

}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	#main_area,#main_area > div{height: 300px;}
	#main_area div figure{
		border-radius: 20px;
		background-image: url("../images/clinic/main_tab.webp");
	}
	#main_area p{
		bottom:25%;
		left:5%;
		letter-spacing: 0.3vw;
		text-shadow: 2px 2px 5px #333;
	}

	/*ご挨拶*/
	.imgboxR{flex-wrap:wrap;}
	.imgboxR img{order:1; max-width:420px; width:100%; height: auto;margin:auto;border-radius: 10px;}
	.imgboxR div{order:2; padding:15px;}
	/*施設紹介*/
	.thumwrap{
	    width: 98%;
		overflow-x: scroll;
		margin-bottom: 30px;
	}
	#thumbnail{
    	width: 100%;
		min-width:700px;
		flex-wrap: nowrap;
	}
	.main_photo{
		width:80%;
		margin:auto;
	}
	.main_photo h3{font-size:16px;}	
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area,#main_area > div{height: 300px;}
	#main_area p{
		bottom:15%;
		left:50%;
		transform: translateX(-50%);
		font-size: 1.25rem;
		font-weight: bold;
		letter-spacing:2px;
	}
	#main_area div figure{
		border-radius: 20px;
		background-image: url("../images/clinic/main_sp.webp");
	}
	/*ご挨拶*/
	.imgboxR img{order:1; max-width:360px; width:100%;margin:0 auto 15px;}
	.imgboxR div{order:2; padding:0px;}
	/*プロフィール*/
	.boxborder{padding:15px;border-radius: 10px;}
	.boxborder dl div{display:block;padding:10px 0;}
	.boxborder dl div:not(:last-child){border-bottom:1px dotted #ccc;}
	.boxborder dl dt{color: #04ade5;}


	#gallary ul{order:2;}
	#gallary div{order:1;}
	.main_photo img{margin-bottom:15px;border-radius: 10px;}
	.main_photo{
		width:100%;
		margin:0 auto 15px;;
	}
	#pankuzu > ul{font-size:.875em;}
}