@charset "utf-8";

/*メイン画像エリア*/
#main_area{position:relative;width:100%;}
#main_area img{
	display: block;
	width:100%;
	object-fit: contain !important;
}
#main_area p{
	white-space: nowrap;
	position: absolute;
	top:50%;
	left:10%;
	transform: translateY(-50%);
	font-size:min(1.3vw,38px);
	font-size:max(1.3vw,14px);
	letter-spacing: 0.2vw;
	font-weight: 500;
	color:#000;
}
#main_area p span{
	font-size:min(1.9vw,25px);
	font-size:max(1.9vw,18px);
	letter-spacing: 0.3vw;
	font-weight: 500;
	
}
/*お知らせ*/
.newswrap{align-items: center;}
.newstitle{width:250px;}
.newstitle a{display:block;background:#0075c1;color:#FFF;padding:5px;border-radius: 8px;}
.newstitle a span{display:block;border:1px solid #FFF;color:#FFF;padding:10px;border-radius: 5px;text-align: center;}
.news{width:calc(100% - 350px);}
.news li:not(:last-child){margin-bottom:1rem;}
.news li a{display: flex; background:#f0f7fb; border-radius:15px;align-items: center;padding:15px;color:#000;}
.news li a time{margin-right:20px;}
.news li a:hover {color:#0075c1;}

/*当院の特長*/
.feature li{flex-wrap:nowrap;background:#f4f2ef;padding:30px;border-radius: 15px;}
.feature h3{
	writing-mode: vertical-rl;
	padding-right:30px;
	color:#0075c1;
	margin:0 auto;
	
}
.feature p{width:430px;}
.feature p::before{
	display:block;
	content:'';
	height:166px;
	margin-bottom: 20px;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
}
.feature li:nth-child(1) p::before{background-image:url("../images/home/feature1.webp");}
.feature li:nth-child(2) p::before{background-image:url("../images/home/feature2.webp");}
.feature li:nth-child(3) p::before{background-image:url("../images/home/feature3.webp");}
.feature li:nth-child(4) p::before{background-image:url("../images/home/feature4.webp");}

/*診療案内*/
.guide li{padding:15px;border-radius:15px;align-items: stretch;}
.guide li:nth-child(odd){background-color:#f0f7fb;}
.guide li:nth-child(even){background-color:#f4f2ef;}
.guide li:last-child{background-color:#0075c1;}
.guide h3 a{display:flex;align-items: center; margin-bottom: 20px;color:#000;}
.guide h3 a::before{display:block; content:""; width:68px; height: 69px; margin-right:20px;background-size:contain;}
.guide h3 a::after{display:block; content:"≫"; margin-left:2rem;}
.guide li:nth-child(1) a::before{background-image:url("../images/home/guide1.webp");}
.guide li:nth-child(2) a::before{background-image:url("../images/home/guide2.webp");}
.guide li:nth-child(3) a::before{background-image:url("../images/home/guide3.webp");}
.guide li:nth-child(4) a::before{background-image:url("../images/home/guide4.webp");}
.guide li:nth-child(5) a::before{background-image:url("../images/home/guide5.webp");}
.guide li:nth-child(6) a::before{background-image:url("../images/home/guide6.webp");}
.guide li:nth-child(7) a::before{background-image:url("../images/home/guide7.webp");}
.guide li:nth-child(8) a::before{background-image:url("../images/home/guide8.webp");}
.guide li:nth-child(9) h3::before{background-image:url("../images/home/guide9.webp");display:block; content:""; width:68px; height: 69px; margin-right:20px;}
.guide li:last-child h3{color:#FFFFFF;line-height: 1.2;display:flex;align-items: center; margin-bottom: 20px;}
.guide li:last-child p{background-color:#FFFFFF;border-radius: 10px;padding:10px;}
/*左画像＋見出しコンテンツ*/
.imgboxL{align-items: center;}
.imgboxL img{max-width:400px; width:100%; height: auto;border-radius: 15px;}
.imgboxL div{width:calc(100% - 420px);padding:15px;}


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

/* 1280px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1280px){
	body {min-width: 1230px!important;}
}


/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	/*トピックス*/
	.newstitle,.news{width:100%;}
	.newstitle a{width:70%;margin:0 auto 30px;}
	.news a{width:100%;}
	
	/*当院の特長*/
	.feature li{display:block;}
	.feature h3{
		writing-mode: inherit;
		padding-right:0px;
		text-align: center;
		margin:inherit;
		margin-bottom: 15px;
	}
	.feature p{width:100%;}
	
	/*診療案内*/
	.c3 > li:not(:last-child) {margin-bottom: 30px;}	

	/*左画像＋見出しコンテンツ*/
	.imgboxL img{order:2;margin:auto;}
	.imgboxL div{width:100%;padding:15px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area img{padding-bottom:60px;}
	#main_area p{
		top:inherit;
		bottom:5%;
		left:50%;
		transform: translateX(-50%);
		text-align: center;
		line-height: 1.2;
		background:#FFFFFF;
		padding:15px 25px;
		border-radius: 10px;
		box-shadow: 0px 0px 15px -5px #777777;
	}
/*	#main_area p span{
		font-size: 4.5vw;
	}*/
	/*トピックス*/
	.news li a{flex-wrap: wrap;}
	.news li a time{width:100%;margin:0px;color:#0075c1;}
	
	/*当院の特長*/
	.feature li{padding:20px 10px;}

	/*診療案内*/
	.guide h3 a::before{width:50px; height: 50px; margin-right:15px;}
	
	/*左画像＋見出しコンテンツ*/
	.imgboxL div{width:100%;padding:0px;}
}