@charset "utf-8";
body{position:relative;}

/*画像左＋テキスト*/
.imgL > img{width:34.7%; max-width:500px;height: auto;margin-right:2.3%;align-self: flex-start;}
.imgL > div{width:63%;}
.imgL > div p:not(:last-child){margin-bottom: 1rem;}

/*画像右＋テキスト*/
.imgR > img{width:34.7%; max-width:500px;height: auto;margin-left:2.3%;align-self: flex-start;}
.imgR > div{width:63%;}
.imgR > div p:not(:last-child){margin-bottom: 1rem;}


/*メイン画像エリア*/
.slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.slider picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.slider picture.active {
  opacity: 1;
  z-index: 1;
}
.slider img{
  width: 100%;
  height: auto;
  display: block;
}
/*お知らせ*/
.tab{display: flex;column-gap: 10px;}
.tab li{padding:8px 0px 5px; width:150px;text-align: center;background:#f6f2ee;border-radius: 5px 5px 0 0 ;cursor: pointer;}
.news, .column {display: none;border-top:2px solid #8dc21f;}
.active {display: block;}
.tab1.active-tab, .tab2.active-tab {background:#8dc21f;color:#FFF;}
.news li:not(:last-child), .column li:not(:last-child){display:flex;column-gap: 1rem;padding:15px 0;border-bottom: 1px dotted #CCC;} 
.btn_nxt{display:inline-block;padding:15px 30px 15px 0;background:url("../images/arrow_green.webp") no-repeat right center;}

/*診療案内*/
#guide{position: relative;}
#guide::before{content:url("../images/home/secbg_medicalinfo.webp"); position:absolute;top:0;left:0;}
.guide > div{position:relative;margin-bottom: 20px;text-align: center;}
.btn_leaf{position:absolute; bottom:-20px; left:50%;transform: translateX(-50%);display:block;width:90%;padding:18px 0;text-align: center;background:#8dc21f url("../images/arrow_white.webp") 92% center no-repeat; border-radius: 0 28px 0 28px;color:#FFF!important;border:1px solid #8dc21f;}
.btn_leaf:hover{background-color:#e6f2ce;color:#1e2410 !important;opacity: 1;}

/*診療内容*/
#menu h2{color:#FFF;background:#8dc21f;width:200px;height:200px;border-radius: 50%;line-height: 180px;position: relative;}
#menu h2::after{content:"Menu";display: block;position:absolute; top:30px;left:50%;transform: translateX(-50%);}
#menu .flexbox{column-gap:2.3%;flex-wrap:nowrap;}
.tab-item{width:22%;}
.tab-item li{cursor: pointer;background:url("../images/arrow_line.webp") no-repeat left center;padding:5px 0 5px 25px;margin-bottom:5px;}
.tab-item li.active{cursor: pointer;background:url("../images/arrow_green.webp") no-repeat left center;padding-left:25px;}
.tab-panel {display: none;}
.tab-panel.active {display: block;padding: 3%;}
.tab-content{width:67%;background:#FFF;padding:10px;border-radius: 15px;}
.tab-content ul{display:flex;flex-wrap: wrap;justify-content: space-between;row-gap:15px; }
.tab-content ul li{width:49%;}
.tab-content ul a{display:block;border:1px solid #8dc21f;text-align: center;background:#f6f2ee;border-radius: 10px;padding:10px 0;color:#1e2410;font-size:16px;}
#menu::after{display: block;width:100%;height:min(15vh,190px);content:"";background:url(../images/wave.webp) no-repeat top left /100%;transform: rotate(180deg);}
/*当院の特徴*/
#feature{position: relative;}
#feature::before{content:url("../images/home/secbg_feature.webp"); position:absolute;top:0;left:0;}
.feature img{border-radius:10px 10px 0 0 ;width:100%;}
.feature p{display:block;border-radius:0 0 10px 10px ;background:#8dc21f;text-align: center;color:#FFF;padding:10px 0;}

/*ご挨拶*/
#bg_line::before{display: block;width:100%;height:min(15vh,190px);content:"";background:url(../images/wave_flower.webp) no-repeat top left /100%;}
.w680{width:680px;margin:60px auto;}


/* レスポンシブ
------------------------------------------------------------*/
@media screen and (max-width: 1380px) {
	/*診療案内*/
	#guide::before{display: none;}
	/*当院の特徴*/
	#feature::before{display: none;}
}
@media screen and (max-width: 1280px) {
	/*診療内容*/
	#menu .flexbox{column-gap: 20px;}
	#menu h2{width:140px; height: 140px;line-height: 120px;}
	.tab-item{width:20%;}
	.tab-content{width:70%;background:#FFF;padding:10px;border-radius: 15px;}
	/*ご挨拶*/
	#bg_line::before{height:max(10vh,100px);background-size:cover;}
}
/* 1180px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1180px) {
	/*診療内容*/
	#menu::after{background-size:contain;height: 100px;}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	/*診療内容*/
	#menu .flexbox{flex-wrap:wrap;column-gap: 20px;row-gap:30px;}
	#menu h2{width:160px; height: 160px;line-height: 140px;}
	.tab-item{width:calc(100% - 35%);}
	.tab-content{width:100%;}
	.tab-item li{background-image:url("../images/arrow_line_under.webp");}
	.tab-item li.active{background-image:url("../images/arrow_green_under.webp") ;}
	
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	.w680{width:90%;margin:30px auto;}
	/*画像左＋テキスト*/
	.imgL{flex-flow: wrap;}
	.imgL > img{width:100%;margin:0 auto 20px;}
	.imgL > div{width:100%;}

	/*画像右＋テキスト*/
	.imgR{flex-flow: wrap;}
	.imgR > img{width:100%;margin:0 auto 20px;order:1;}
	.imgR > div{width:100%;order:2;}
	/*お知らせ*/
	.news li,.column li{flex-wrap: wrap;} 
	.news time, .column time{width:100%;} 
	/*診療案内*/
	.btn_leaf{padding:8px 0;border-radius: 0 18px 0 18px;}
	/*診療内容*/
	#menu h2{width:25vw; height: 25vw;line-height: 20vw;}
	.tab-item{width:calc(100% - 35%);}
	.tab-content{width:100%;}
	.tab-content ul li{width:100%;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    body {min-width: inherit!important;width: 100%;}
	/*ご挨拶*/
	#bg_line::before{display: block;width:100%;height:63px;content:"";background:url(../images/wave_flowerSP.webp) no-repeat top left;}
	/*診療内容*/
	#menu h2{color:#FFF;background:#8dc21f;width:100%;height:auto;border-radius: 25px;line-height:inherit;position:inherit;padding:8px;margin-bottom: 0px;}
	#menu h2::after{display:none;}
	.tab-item{width:100%;}
	#menu::after{display: block;width:100%;height:54px;content:"";background:url("../images/waveSP.webp") no-repeat top left/100%;}
}