@charset "utf-8";
body{position:relative;}
/*メイン画像エリア*/
#main_area{position:relative;}
#main_area picture img{
	display: block;
	width:100%;
	object-fit: contain !important;
}
#main_area img.open{position: absolute;bottom:0; right:0;width:min(17.2vw,330px);height: auto;}
#main_area p.copy{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	font-size:clamp(20px,1.77vw,38px);
	letter-spacing: 0.2vw;
	text-align: center;
	color:#fff;
	text-shadow: 3px 3px 4px #000;
}
#main_area p.copy::before{display: block; content:"";width:857px;height:107px;background:url("../images/home/copy.webp");background-size:cover;}

/*共通*/
.bg_c2{position:relative;}
.bg_c2::before{display: block;content:"";width:100%;height:160px;background:url("../images/bg_c2.webp") top center/cover no-repeat;}
.bg_c1{position:relative;}
.bg_c1::after{display: block;content:"";width:100%;height:70px;background:url("../images/bg_c1.webp") bottom center/cover no-repeat;}

/*お知らせ・トピックス*/
.info div{width:300px;}
.info h2{margin-bottom:30px;}
.news{width:calc(100% - 350px);}
.news li{padding:5px 0;}
.news time{margin-right:2em;color:#1e0000;}
.news a{color:#332f2f;}
.news a:hover{color:#e3823c;}
/*特徴*/
.feature img{display: block; margin:auto;}
.feature li:nth-child(3n+2) {margin-top: 30px;}
.feature li:nth-child(3n+3) {margin-top: 60px;}
/*症状でお悩みではありませんか*/
.symtoms div{border:1px solid #e3823c;background: #FFF; padding:20px;position: relative;margin-top: 65px;display:flex; flex-direction: column;border-radius: 10px;}
.symtoms div::before{position:absolute;top:-66px;left:50%;transform: translateX(-50%);}
.symtoms div:nth-child(1)::before{content:url("../images/home/icon_person.webp");}
.symtoms div:nth-child(2)::before{content:url("../images/home/icon_spilit.webp");}
.symtoms div:nth-child(3)::before{content:url("../images/home/icon_body.webp");}
.symtoms ul{flex-grow: 1;}

/* レスポンシブ
------------------------------------------------------------*/
@media screen and (max-width: 1700px) {
	.bg_c2::before{display: block;content:"";width:100%;height:160px;background:url("../images/bg_c2.webp") top center/contain no-repeat;}
	.bg_c1::after{display: block;content:"";width:100%;height:70px;background:url("../images/bg_c1.webp") bottom center/contain no-repeat;}
	#main_area p.copy::before{width:580px;height:70px;}
}

@media screen and (max-width: 1180px) {
	.bg_c2::before{height:100px;}
	#main_area img.open{width:200px;height: auto;}
	#main_area p.copy::before{width:500px;height:50px;}
	/*お知らせ・トピックス*/
	.news time{display:block;}
	.news li{padding:10px 0;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	#main_area img.open{width:150px;height: auto;}
	#main_area p.copy::before{width:370px;height:35px;}
	.bg_c2::before{height:70px;}
	.bg_c1::after{height:50px;}
	/*お知らせ・トピックス*/
	.info div,.news{width:100%;}
	/*特徴*/
	.feature li:nth-child(3n+2) {margin-top: inherit;}
	.feature li:nth-child(3n+3) {margin-top: inherit;}
	.feature li:nth-child(2n) {margin-top: 30px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	.drawer-nav {
	  min-height:541px; /*レイアウトシフト対策 */
	  overflow: hidden;
	}
	#main_area p.copy{text-shadow: 2px 2px 2px #000;}
	#main_area img{border-radius: 0 0 20px 20px;}	
	.bg_c2::before{height:43px;background:url("../images/bg_c2SP.webp") top center/contain no-repeat;}
	.bg_c1::after{height:33px;background:url("../images/bg_c1SP.webp") bottom center/contain no-repeat;}

	/*特徴*/
	.feature li:nth-child(2n) {margin-top: inherit;}
}