@charset "utf-8";

/*メイン画像エリア*/
#main_area{position:relative;}
#main_area img{
	width:100%;
	height: 400px;
	object-fit:cover;
}
#main_area p.copy{
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; /*"A1明朝",*/
	white-space: nowrap;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%);
	font-size:2.0vw;
	letter-spacing: 0.2vw;
	text-align: center;
	color:#000;
}

/*院長からのご挨拶*/
.intro span{padding:0.5rem 2rem;}
.intro span::before{content:"Greeting";}/*見出し*/
.imgboxL{flex-wrap: nowrap;align-items: flex-start;}
.imgboxL img{max-width:560px; width:50%; height: auto;}
.imgboxL div{width:calc(100% - 52%);padding:15px;}
/*資格、公職欄　リスト*/
.arrow li{display:table-row;margin-bottom: 1rem;}
.arrow li::before{display:table-cell;content: ">";padding-right:1rem;}
/*略歴*/
.borderbox{border:1px solid #8cc63f;}
.record li{display:flex;}
.record li:not(:last-child){margin-bottom: 1rem;}
.record li span:first-child{width:130px;color:#000;}
.record li span:last-child{width:calc(100% - 130px);}
/*施設紹介*/
.tifaci span{padding:0.5rem 4rem;}
.tifaci span::before{content:"Facilities";}/*見出し*/
.slider-wrapper {overflow:hidden; width: 100%;}
.slider {
	display: flex;
	gap:1.3%;
	transition: scroll-left 0.3s ease;
	scroll-behavior: smooth;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.slider img {
	width: 32%;
	height: auto;
	scroll-snap-align: center;
	flex-shrink: 0;

}
.thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.thumbnails img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}
.thumbnails img:hover {
  border-color: #0078D4;
}

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

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	/*メイン画像エリア*/
	#main_area img{
		width:100%;
		height: auto;
		object-fit:fill;
	}
	/*院長のご紹介*/
	.imgboxL{flex-wrap: wrap;}
	.imgboxL img{width:100%;margin:auto;margin-bottom: 20px;}
	.imgboxL div{width:100%;padding:0 15px;}
}
/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area p.copy{
		font-size:4.2vw;
	}
	/*院長のご紹介*/
	.intro ul li span{width:100% !important;}
	.intro ul li span:first-child{font-weight: bold;}
	.intro ul li {border-bottom:1px solid #ddd;}

	/*略歴*/
	.record li{flex-wrap:wrap;}
	.record li span{width:100% !important;}
	.record li span:first-child{font-weight:bold;}
	/*施設紹介*/
	.slider img {
		width: 100%;
		height: auto;
		scroll-snap-align: center;
		flex-shrink: 0;

	}

}