@charset "utf-8";

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


/*お知らせ*/
.ti_news::after{content: "TOPICS";}
.news li {display: flex; align-items: center;padding:5px 0;}
.news li a{color:#0d250c;}
.news time{background-color:#59b55b; color:#FFF; border-radius: 20px;padding:3px 10px;margin-right:15px;}
.news li:not(:last-child){margin-bottom:1rem;}
.news li:last-child{display:block;text-align: right;}
/*診療時間*/
.ti_hour::after{content: "SCHEDULE";}

/*診療のご案内*/
.minfo span{padding:0.5rem 8.5rem;}
.minfo span::before{content:"Medical Information";}/*見出し*/
/*診療科目*/
.kamoku{display:flex;border-bottom:2px dotted #1eaa39; padding-bottom: 20px;margin-bottom: 30px;}
.kamoku:last-child{border-bottom:none;}
.kamoku h4{display:flex;flex-direction: column;font-size:1.25rem;color:#000;text-align: center;margin-right:20px;}
.kamoku h4::before{content: "";background-repeat: no-repeat;width:5em;height:80px;margin-left:10px;}
.kamoku ul li{ display: inline-block;}
.kamoku ul li:not(:last-child){ margin-right:1rem;}
.kamoku ul li::before{content: "・"}
.geka::before{background-image:url("../images/home/icon_geka.webp");}
.ichou::before{background-image:url("../images/home/icon_ichou.webp");}
.naika::before{background-image:url("../images/home/icon_naika.webp");}
/*目的から探す*/
.mokuteki li{border:1px solid #ccc;border-radius: 5px;padding:20px;margin-bottom: 20px;}
.mokuteki li a{display: flex;align-items: center;color: inherit;}
.mokuteki li a::before{display: block;margin-right:20px;}
.mokuteki li a.scope::before{content: url("../images/home/icon_scope.webp");}
.mokuteki li a.kensin::before{content: url("../images/home/icon_kensin.webp");}
.mokuteki li a.ct::before{content: url("../images/home/icon_ct.webp");}
.mokuteki li a.vaccine::before{content: url("../images/home/icon_vaccine.webp");}
.mokuteki h4{font-size:1.125rem;color:#000;}

/*当院の特徴*/
.tifeature span{padding:0.5rem 2rem;}
.tifeature span::before{content:"Features";}/*見出し*/
.feature li h3{
	min-height: 3em;
	color:#0075c1;
	margin-left:120px;
}
.feature h3::before{
	content:"";
	position:absolute;
	top:-30px;
	left:10px;
	width:90px;
	height:99px;
	background-repeat: no-repeat;
	background-size: contain;
}
.feature li{position:relative;}
.feature li:nth-child(1) h3::before{background-image:url("../images/home/feature1.webp");}
.feature li:nth-child(2) h3::before{background-image:url("../images/home/feature2.webp");}
.feature li:nth-child(3) h3::before{background-image:url("../images/home/feature3.webp");}
.feature li:nth-child(4) h3::before{background-image:url("../images/home/feature4.webp");}

/*左画像＋見出しコンテンツ(メッセージ)*/
.imgboxL{align-items: center;}
.imgboxL img{max-width:400px; width:100%; height: auto;border-radius: 15px;}
.imgboxL div{width:calc(100% - 420px);padding:15px;}


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

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

	/*トピックス*/
	.news li {flex-wrap: wrap;padding:5px 0;}
	.news time{padding:2px 10px;margin:0 0 10px 0;font-size: 14px;}
	.news li:not(:last-child){margin-bottom:0.5rem;border-bottom: 1px dotted #ddd;}
	.hour p{max-width: 610px;width:100%; margin:auto;}
	
	/*診療のご案内*/
	.minfo span{padding:0 1rem;}
	img.hour{display: block;margin:auto;}

	/*診療科目*/
	.kamoku{padding-bottom: 15px;margin-bottom: 15px;}
	.kamoku h4{font-size:1.125rem;margin-right:10px;}
	.kamoku h4::before{max-width:80px;max-height:80px;width:20vw;height:20vw;background-size:contain;}

	/*目的から探す*/
	.mokuteki li{padding:10px;margin-bottom: 15px;}
	.mokuteki h4{font-size:1rem;color:#000;}
	.mokuteki p{font-size:14px;color:#000;}

	/*当院の特徴*/
	.tifeature{margin-bottom:60px!important;}
	.tifeature span{padding:0.5rem 1rem;text-align: center;}
	.feature li:not(:last-child){margin-bottom:60px !important;}
	.feature li h3{
		min-height: 3em;
		color:#0075c1;
		margin-left:100px;
	}
	.feature h3::before{
		position:absolute;
		top:-25px;
		left:10px;
		width: 80px;
		height: 80px;
	}
	.feature li img{display: block; margin:auto;}

	/*左画像＋見出しコンテンツ(メッセージ)*/
	.imgboxL{align-items:flex-start;}
	.imgboxL img{max-width:250px; width:100%; height: auto;border-radius: 10px;}
	.imgboxL div{width:calc(100% - 280px);padding:10px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area img{padding-bottom:0px;}
	#main_area p.copy{
		writing-mode:inherit;
		top:43%;
		left:50%;
		transform: translate(-50%);
		text-align: center;
		font-size:4.2vw;
	}

	/*診療のご案内*/
	/*診療科目*/
	.kamoku{flex-wrap: wrap;}
	.kamoku h4{flex-direction:row;align-items: center;margin-bottom: 15px;}
	.kamoku h4::before{margin-right:1rem;}
	/*当院の特徴*/
	.tifeature{margin-bottom:40px!important;}
	.feature li h3{
		margin-left:70px;
	}
	.feature h3::before{
		position:absolute;
		top:-10px;
		left:0px;
		width: 60px;
		height: 60px;
	}
	.feature li:not(:last-child){margin-bottom:30px !important;}
	/*左画像＋見出しコンテンツ(メッセージ)*/
	.imgboxL{flex-wrap: wrap;}
	.imgboxL img{max-width:400px; width:100%; margin:auto;border-radius: 10px;order:2;}
	.imgboxL div{width:100%;}

}