@charset "utf-8";
/*メイン画像エリア*/
#main_area{position:relative;height: calc(100vh - 50px);}
#main_area > div{
	position: absolute;
    left: 50%;
    width: calc(100vw - 70px);
    height: calc(100vh - 50px);
    transform: translateX(-50%);
    border-radius: 30px;
}
#main_area div figure{
	border-radius: 30px;
	width: 100%;
	height: 100%;
	background-image: url("../images/top/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.3vw;
	letter-spacing: 0.3vw;
	font-weight: 500;
	color:#FFF;
}
#main_area img.hour{
	position: absolute;
	right:3%;
	bottom: 3%;
	max-width:40vw;
}

/*お知らせ*/
.newstitle{width:370px;padding:0 30px;}
.news{width:calc(100% - 370px);}
.newstitle a{
	display: block;
	width:250px;
	background:#04ade5;
	padding:15px;
	color:#fff;
	text-align: center;
	border-radius: 12px;
	word-wrap: break-word;
}
.news li{padding:10px 0; border-bottom: 1px solid #d1cbc3;}
.news li a{display: flex; justify-content: flex-start; color:#4d4d4d;}
.news li a:hover{color:#04ade5;}
.news li a::after{content:url("../images/top/arrow.webp");display: inline-block;margin-left:10px;}
.news li time{width:7em;}
.news li p{width:calc(100% - 8em);}

/*診療方針*/
.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;}
/*診療内容*/
.symptoms li{
	background:#f0f8ee;
	border-radius: 10px;
	align-items: center;
	justify-content: flex-start;
}
.symptoms li img{
	max-width:110px;
	width:28%;
	height: auto;
}
.symptoms li p{
	width:70%;
	color:#000;
	font-size:1.125rem;
}
/*対象疾患*/
#disease h3{
	background:#04ade5;
	border-radius: 10px 10px 0 0 ;
	color:#FFF;
	padding: 15px;
	font-weight: normal;
	font-size:20px;
}
#disease p{
	background:#FFF;
	padding: 15px;
	border-radius: 0 0 10px 10px;
}
/* レスポンシブ
------------------------------------------------------------*/

/* 1250px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1250px){
	#main_area > div{
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding:0 2vw;
	}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	body {min-width: 980px!important;}
	#main_area,#main_area div{height: 432px;}
	#main_area div figure{
		background-image: url("../images/top/main_tab.webp");
	}
	#main_area img.hour{
		position: absolute;
		bottom: 15px;
	}
	/*お知らせ*/
	.newstitle{display: flex; justify-content: space-between; width:95%;padding:0px;margin:0 auto 30px;}
	.newstitle p{margin-bottom:0!important;}
	.news{width:100%;}
	.newstitle a{
		display: block;
		width:180px;
		background:#04ade5;
		padding:15px;
		color:#fff;
		text-align: center;
		border-radius: 12px;
		word-wrap: break-word;
	}
	.news li a{flex-wrap: wrap;}
	.news li a time{width:100%;}
	.news li a p{width:calc(100% - 30px);}
	
	/*診療内容*/
	.symptoms li p{
		width:70%;
		color:#000;
		font-size:1rem;
	}
}


/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	#main_area div figure{border-radius: 15px;}
	#main_area p{
		bottom:30%;
		left:5%;
		font-size: 2.5vw;
		letter-spacing: 0.3vw;
	}
	#main_area img.hour{
		max-width:60vw;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10%;
	}
	/*トピックス*/
	.topics li a{flex-wrap: wrap;}
	.topics li time{width:100%;}

	/*診療方針*/
	.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;}
	
	/*診療内容*/
	.symptoms li p{
		width:70%;
		color:#000;
	}
	/*対象疾患*/
	#disease h3{
		font-size:18px;
	}
	#disease p{
		background:#FFF;
		padding: 15px;
		border-radius: 0 0 10px 10px;
	}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area{margin-bottom:50px;}
	#main_area p{
		font-size: 4.5vw;
		font-weight: bold;
		letter-spacing: 0.3vw;
		text-shadow: 2px 2px 5px #333;
	}
	#main_area img.hour{
		max-width:95vw;
		height: auto;
		bottom: -10%;
	}
	/*トピックス*/
	.news{
		border:1px dotted #04ade5;
		border-radius: 10px;
		padding:10px;
	}
	.news li:last-child{border-bottom: none;}
	/*特徴*/
	.imgboxR img{order:1; max-width:360px; width:100%;margin:0 auto 15px;}
	.imgboxR div{order:2; padding:0px;}

	/*診療方針*/
	.policy img{width:100%;margin:auto;}
	.policy .imgboxL div{width:100%;padding:15px 0;}
	.policy .imgboxL p{line-height: 2.0;}
	
	/*診療内容*/
	.symptoms li img{
		max-width:80px;
		width:28%;
		height: auto;
	}
}