@charset "utf-8";

/* クリニック情報
------------------------------------------------------------*/
.illust_map_box{align-items: center;}
.illust_map_box > img{margin-right: 80px;}
.illust_map_box > div > *:not(:last-child){
	border-bottom: 1px #2d2924 dashed;
	padding-bottom: 45px;
	margin-bottom: 45px;
}
.train{
	position: relative;
	padding-left: 25px;
}
.train::before{
	content: '';
	width: 16px;
	aspect-ratio: 8 / 11;
	background: url("../images/access/train_icon.webp") no-repeat center / contain;
	position: absolute;
	top: 3px;
	left: 0;
}
.illust_map_box dl dt{width: 90px;}
.illust_map_box dl dd{width: calc(100% - 90px);}
.map iframe{
	width: 100%!important;
	height: 100%!important;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	border-radius: 8px;
}
.map{height: 490px;}

/* 最寄駅~当クリニックまで
------------------------------------------------------------*/
.route_li > li:not(:nth-last-child(-n+2)){margin-bottom: 65px;}
.route_li span,.route_li img{display: block;}
.route_li img{
	width: 100%;
	margin: 0 auto 30px;
}

/* 当クリニック周辺のご案内
------------------------------------------------------------*/
.around_img{
	padding: 0 30px;
	display: grid;
	grid-template-columns: 1fr 0.8fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
.around_img > li{
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 8px; 
}
.around_img > li img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.around_img > li:first-child{grid-area: 1 / 1 / 3 / 2;}
.around_img > li:nth-child(2){grid-area: 1 / 2 / 2 / 3;}
.around_img > li:nth-child(3){grid-area: 2 / 2 / 3 / 3;}
.around_img > li:nth-child(4){grid-area: 1 / 3 / 3 / 4;}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* クリニック情報
	--------------------------------------*/
	.illust_map_box > img{
		width: 380px;
		margin-right: 40px;
	}
	.illust_map_box > div > *:not(:last-child){
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.train{padding-left: 20px;}
	.train::before{
		width: 13px;
		top: 2px;
	}
	.illust_map_box dl dt{width: 60px;}
	.illust_map_box dl dd{width: calc(100% - 60px);}
	.illust_map_box > div img{width: 270px;}
	.illust_map_box .mb20{margin-bottom: 15px!important;}
	.map iframe{border-radius: 5px;}
	.map{height: 330px;}
	
	/* 最寄駅~当クリニックまで
	--------------------------------------*/
	.route_li > li:not(:nth-last-child(-n+2)){margin-bottom: 40px;}
	.route_li img{margin-bottom: 20px;}
	
	/* 当クリニック周辺のご案内
	--------------------------------------*/
	.around_img{
		padding: 0 10px;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	.around_img > li{border-radius: 5px;}

}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* クリニック情報
	--------------------------------------*/
	.illust_map_box > img{margin: 0 auto 25px;}
	
	/* 最寄駅~当クリニックまで
	--------------------------------------*/
	.route_li{
		max-width: 450px;
		width: 100%; 
		margin: 0 auto;
	}
	.route_li > li:not(:last-child){margin-bottom: 40px;}
	.route_li p{line-height: 1.5;}
	.route_li span.mb10{margin-bottom: 5px!important;}
	
	/* 当クリニック周辺のご案内
	--------------------------------------*/
	.around_img{
		height: 580px;
		grid-template-columns: 0.8fr 1fr;
		grid-template-rows: repeat(3, 1fr);
	}
	.around_img > li:first-child{grid-area: 1 / 1 / 2 / 3;}
	.around_img > li:nth-child(2){grid-area: 2 / 1 / 3 / 2;}
	.around_img > li:nth-child(3){grid-area: 3 / 1 / 4 / 2;}
	.around_img > li:nth-child(4){grid-area: 2 / 2 / 4 / 3;}
	.around_img > li:last-child img{object-position: 80% center;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* クリニック情報
	--------------------------------------*/
	.illust_map_box dl dt,.illust_map_box dl dd{width: 100%;}
	.illust_map_box dl dt{margin-bottom: 8px;}
}