@charset "utf-8";

/* map
---------------------------------------------- */
.map{
	padding-block: 80px 100px;
}
.map__ttl{
	font-size: 18px;
	letter-spacing: 0.2em;
	line-height: 1;
	text-align: center;
}
.map__ttl .en{
	display: block;
	font-size: 333.334%;
	letter-spacing: 0.14em;
	margin-bottom: 20px;
}

@media screen and (max-width: 768px){
	.map{
		padding-block: 40px 50px;
	}
	.map__ttl{
		font-size: 12px;
	}
	.map__ttl .en{
		font-size: 40px;
		margin-bottom: 0;
	}
}

/* carAddress
---------------------------------------------- */
.carAddress{
	margin-top: 70px;
}
.carAddress__head{
	max-width: 980px;
	background-color: #404e44;
	color: #fff;
	padding: 20px 30px 20px 40px;
}
.carAddress__ttl{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	font-size: 24px;
	letter-spacing: 0.15em;
	color: #e0ebd6;
}
.carAddress__ttl::before{
	content: '';
	display: inline-block;
	width: 44px;
	height: 24px;
	background: url(../img/icon_car.svg) center/contain no-repeat;
	margin-right: 15px;
}
.carAddress__box{
	position: relative;
	margin-left: 2em;
	padding-left: 2em;
	z-index: 0;
}
.carAddress__box::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 100%;
	background-color: #959c97;
}
.carAddress__txt{
	font-size: clamp(14px,0.482rem + 0.82vw,20px);
	letter-spacing: 0.15em;
}
.carAddress__txt .em{
	font-size: 120%;
	letter-spacing: 0.15em;
	color: #e0ebd6;
}
.carAddress__notes{
	font-size: 12px;
	letter-spacing: 0.15em;
	margin-top: .5em;
}

.carAddress__map{
	max-width: 980px;
}

@media screen and (max-width: 768px){
	.carAddress{
		margin-top: 35px;
	}
	.carAddress__head{
		flex-direction: column;
		max-width: 560px;
		padding: 15px 20px 20px;
	}
	.carAddress__ttl{
		font-size: 18px;
	}
	.carAddress__ttl::before{
		width: 30px;
		height: 16px;
		margin-right: 10px;
	}
	.carAddress__box{
		margin-top: 1em;
		margin-left: 0;
		padding-top: 1em;
		padding-left: 0;
	}
	.carAddress__box::before{
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 1px;
	}
	.carAddress__txt{
		text-align: center;
	}
	.carAddress__txt .em{
		font-size: 16px;
	}
	.carAddress__notes{
		font-size: 10px;
		text-align: left;
	}

	.carAddress__map{
		max-width: 560px;
	}
}

/* infoMap
---------------------------------------------- */
.infoMap{
	margin-top: 80px;
}
.infoMap__ttl{
	max-width: 980px;
	background-color: #315376;
	color: #fff;
	font-size: 24px;
	letter-spacing: 0.15em;
	padding-block: .5em;
	text-align: center;
}
.infoMap__map{
	max-width: 980px;
}

@media screen and (max-width: 768px){
	.infoMap{
		margin-top: 50px;
	}
	.infoMap__ttl{
		max-width: 560px;
		font-size: 18px;
		letter-spacing: 0.1em;
		padding-block: .9em;
	}
	.infoMap__map{
		max-width: 560px;
	}
}

/* mapBtnBox
---------------------------------------------- */
.mapBtnBox{
	max-width: 850px;
	margin-top: 80px;
}
.map__btn{
	width: calc((100% - 50px) / 2);
	height: 80px;
	background-color: #404e44;
	font-size: 20px;
	padding-left: 4%;
}
.map__btn:hover{
	color: #fff;
}
.map__btn .txt{
	position: relative;
	z-index: 0;
}
.map__btn .txt::before{
	content: '';
	position: absolute;
	top: 50%;
	left: -24%;
	transform: translateY(-50%);
	height: 23px;
}
.map__btn._map .txt::before{
	width: 18px;
	background: url(../img/icon_map.svg) center/contain no-repeat;
}
.map__btn._print .txt::before{
	width: 22px;
	background: url(../img/icon_print.svg) center/contain no-repeat;
}

@media screen and (max-width: 768px){
	.mapBtnBox{
		max-width: 320px;
		margin-top: 50px;
	}
	.map__btn{
		width: 100%;
		height: 60px;
		font-size: 18px;
		padding-left: 4%;
	}
	.map__btn + .map__btn{
		margin-top: 20px;
	}
	.map__btn .txt::before{
		left: -30%;
		height: 20px;
	}
	.map__btn._map .txt::before{
		left: -45%;
		width: 20px;
	}
	.map__btn._print .txt::before{
		width: 19px;
	}
}

/* print
---------------------------------------------- */
@media print{
	.infoMap{
		page-break-before: always;
	}
}