/* ========================================
ACCESS
======================================== */

.access-page{
	overflow:hidden;
	color:#222;
}

.access-page img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.access-page .sub-intro,
.access-intro{
	padding-bottom:30px;
}


/* ========================================
COMMON
======================================== */

.access-heading{
	margin:12px 0 0;
	color:#222;
	font-size:34px;
	font-weight:400;
	line-height:1.6;
}

.access-lead{
	margin:28px 0 0;
	color:#222;
	font-size:22px;
	line-height:2;
}

.access-text{
	margin:25px 0 0;
	color:#222;
	font-size:15px;
	line-height:2.3;
}

.access-section-head{
	max-width:720px;
	margin:0 auto 40px;
	text-align:center;
}


/* ========================================
LOCATION
======================================== */

.access-location{
	padding:50px 40px;
}

.access-location-inner{
	max-width:1280px;
	margin:0 auto;
}

.access-map{
	width:100%;
	height:560px;
	overflow:hidden;
}

.access-map iframe{
	display:block;
	width:100%;
	height:100%;
}

.access-location-info{
	display:grid;
	grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
	align-items:start;
	max-width:1000px;
	margin:40px auto 0;
	padding-top:35px;
	border-top:1px solid #c9c5ba;
}

.access-location-name{
	padding-right:40px;
}

.access-location-name p{
	margin:0;
	color:#222;
	font-size:22px;
	line-height:1.8;
}

.access-location-detail{
	padding-left:40px;
	border-left:1px solid #c9c5ba;
}

.access-location-detail p{
	margin:0;
	color:#444;
	font-size:14px;
	line-height:2;
}

.access-location-detail p+p{
	margin-top:10px;
}

.access-location-detail span{
	display:inline-block;
	margin-right:15px;
	color:#777;
	font-size:12px;
}

.access-location-detail a{
	color:inherit;
	text-decoration:none;
}


/* ========================================
ACCESS GUIDE
======================================== */

.access-guide{
	padding:50px 40px;
}

.access-guide-inner{
	max-width:1280px;
	margin:0 auto;
}

.access-guide-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:30px;
}

.access-guide-item{
	position:relative;
	padding:45px 35px;
	border:1px solid #c9c5ba;
	background:rgba(255,255,255,.28);
}

.access-guide-title{
	padding-bottom:25px;
	border-bottom:1px solid #c9c5ba;
	text-align:center;
}

.access-guide-title span{
	display:block;
	color:#777;
	font-size:11px;
	line-height:1.5;
}

.access-guide-title h3{
	margin:8px 0 0;
	color:#222;
	font-size:22px;
	font-weight:400;
	line-height:1.7;
}


/* ========================================
ROUTE
======================================== */

.access-route{
	margin-top:30px;
}

.access-route-point{
	text-align:center;
}

.access-route-point strong{
	display:block;
	color:#222;
	font-size:16px;
	font-weight:400;
	line-height:1.8;
}

.access-route-point span{
	display:block;
	margin-top:5px;
	color:#777;
	font-size:12px;
	line-height:1.8;
}

.access-route-line{
	position:relative;
	height:55px;
	text-align:center;
}

.access-route-line::before{
	content:"";
	position:absolute;
	top:8px;
	left:50%;
	width:1px;
	height:38px;
	background:#aaa;
}

.access-route-line span{
	position:absolute;
	left:-9999px;
}


/* ========================================
FROM YANAGAWA STATION
======================================== */

.access-station{
	padding:50px 0;
}

.access-station-inner{
	display:grid;
	grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
	align-items:start;
	max-width:1400px;
	margin:0 auto;
}

.access-station-image{
	aspect-ratio:3 / 2;
	height:auto;
	overflow:hidden;
}

.access-station-content{
	max-width:520px;
	padding:0 40px 40px 80px;
}

.access-station-times{
	margin-top:35px;
	border-top:1px solid #c9c5ba;
}

.access-station-time{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	padding:18px 0;
	border-bottom:1px solid #c9c5ba;
}

.access-station-time span{
	color:#555;
	font-size:14px;
	line-height:1.8;
}

.access-station-time strong{
	flex-shrink:0;
	color:#222;
	font-size:16px;
	font-weight:400;
	line-height:1.8;
}


/* ========================================
NOTE
======================================== */

.access-note{
	max-width:1280px;
	margin:0 auto;
	padding:0 40px 50px;
}

.access-note p{
	margin:0;
	color:#777;
	font-size:12px;
	line-height:2;
	text-align:center;
}


/* ========================================
HOVER
======================================== */

@media (hover:hover) and (pointer:fine){

	.access-station-image img{
		transition:transform 1.2s ease;
	}

	.access-station-image:hover img{
		transform:scale(1.025);
	}

}


/* ========================================
TABLET
======================================== */

@media(max-width:1100px){

	.access-page .sub-intro,
	.access-intro{
		padding-bottom:50px;
	}

	.access-location,
	.access-guide,
	.access-station{
		padding-top:50px;
		padding-bottom:50px;
	}

	.access-map{
		height:500px;
	}

	.access-guide-grid{
		gap:20px;
	}

	.access-guide-item{
		padding:40px 25px;
	}

	.access-station-inner{
		grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
	}

	.access-station-content{
		padding:0 35px 35px 50px;
	}

}


/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

	.access-page .sub-intro,
	.access-intro{
		padding-bottom:40px;
	}

	.access-location,
	.access-guide,
	.access-station{
		padding-top:40px;
		padding-bottom:40px;
	}

	.access-heading{
		font-size:28px;
	}

	.access-lead{
		font-size:19px;
	}

	.access-text{
		font-size:14px;
	}

	.access-section-head{
		margin-bottom:35px;
		text-align:left;
	}


	/* LOCATION */

	.access-location{
		padding-left:30px;
		padding-right:30px;
	}

	.access-map{
		height:75vw;
		min-height:360px;
		max-height:480px;
	}

	.access-location-info{
		display:block;
		margin-top:30px;
		padding-top:25px;
	}

	.access-location-name{
		padding-right:0;
	}

	.access-location-name p{
		font-size:20px;
	}

	.access-location-detail{
		margin-top:20px;
		padding:20px 0 0;
		border-top:1px solid #c9c5ba;
		border-left:0;
	}


	/* ACCESS GUIDE */

	.access-guide{
		padding-left:30px;
		padding-right:30px;
	}

	.access-guide-grid{
		grid-template-columns:1fr;
		gap:20px;
	}

	.access-guide-item{
		padding:35px 30px;
	}

	.access-guide-title{
		text-align:left;
	}

	.access-guide-title h3{
		font-size:21px;
	}

	.access-route{
		margin-top:25px;
	}

	.access-route-point{
		text-align:left;
	}

	.access-route-line{
		height:45px;
		text-align:left;
	}

	.access-route-line::before{
		top:6px;
		left:7px;
		height:32px;
	}


	/* STATION */

	.access-station-inner{
		display:block;
	}

	.access-station-image{
		width:calc(100% - 30px);
		height:68vw;
		aspect-ratio:auto;
	}

	.access-station-content{
		max-width:none;
		padding:35px 30px 0;
	}

	.access-station-times{
		margin-top:30px;
	}


	/* NOTE */

	.access-note{
		padding:0 30px 40px;
	}

	.access-note p{
		text-align:left;
	}

}


/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:480px){

	.access-heading{
		font-size:25px;
	}

	.access-lead{
		font-size:18px;
	}

	.access-location,
	.access-guide{
		padding-left:20px;
		padding-right:20px;
	}

	.access-map{
		min-height:320px;
	}

	.access-guide-item{
		padding:30px 22px;
	}

	.access-station-image{
		width:calc(100% - 20px);
	}

	.access-station-content{
		padding-left:20px;
		padding-right:20px;
	}

	.access-station-time{
		gap:20px;
	}

	.access-note{
		padding-left:20px;
		padding-right:20px;
	}

}