@charset "UTF-8";
:root{
	--color-white: #fff;
	--color-black: #000;
	--color-green: #007b89;
	--en-font: "optima-nova-lt-pro", sans-serif;
	--jp-font: "游明朝", "Yu Mincho", YuMincho, "游明朝体", 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝', serif;
}

/* MV */
.mv-text{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	img{
		width: auto;
		height: 100%;
	}
}
@media screen and (max-width: 767px) {
	.mv-text{
		img{
			height: 46%;
		}
	}
}

/* イントロ */
.secondary-heading{
    font-size: clamp(2rem, 3vw, 3rem);
}

/* 共通セクション見出し */
.access-heading{
	font-family: var(--en-font);
	font-size: clamp(3.2rem, 4vw, 4.8rem);
	letter-spacing: 0.04em;
	color: var(--color-green);
	align-items: baseline;
	gap: .2em;
	margin-bottom: 3rem;
	flex-wrap: wrap;
	flex-direction: column;
	.jp-font{
		color: var(--color-green);
		font-family: var(--jp-font);
		font-size: clamp(1.4rem, 1.6vw, 1.6rem);
		letter-spacing: 0.08em;
	}
}

/* ---- TRAIN ACCESS ---- */
.access-train{
	position: relative;
	z-index: 1;
}

.train-bg{
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 1680px;
	width: 90%;
	z-index: -1;
}
/* 徒歩時間ボックス */
.walk-boxes{
	gap: 2rem;
	margin-bottom: 5rem;
	flex-wrap: wrap;
}
.walk-box{
	flex: 1;
	min-width: 200px;
	border: 1px solid #CCB379;
	padding: 2rem 0;
	text-align: center;
	background: var(--color-white);
}
.walk-box-inner{
	display: flex;
	align-items: baseline;
	justify-content: center;
}
.walk-line{
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	position: absolute;
    top: .4em;
	left: 0;
}
.walk-station{
	font-size: 2.2rem;
	font-weight: 500;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
.walk-box-wrap{
	position: relative;
	display: inline-block;
}
.walk-time{
	font-size: 1.4rem;
}
.walk-num{
	font-size: 250%;
	line-height: 1;
	color: var(--color-green);
	vertical-align: baseline;
	margin: 0 .05em;
	position: relative;
	bottom: -.07em;
}
.walk-dist{
	font-size: 50%;
	letter-spacing: 0;
}

/* 電車写真 + 時刻表 */
.train-grid{
	grid-template-columns: 1fr 50%;
	gap: 6rem;
	align-items: start;
	margin-bottom: 5rem;
}
.train-from{
	font-size: 2.2rem;
	font-weight: 500;
	margin-bottom: 2rem;
	/* border-bottom: 1px dotted #ccc; */
}
.train-list{
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.train-item{
	padding-bottom: 1.5rem;
	border-bottom: 1px dotted #e8e8e8;
}
.train-dest{
	font-size: 2.2rem;
	font-weight: 500;
	display: block;
	margin-bottom: 0.3em;
	font-feature-settings: "palt";
}
.train-duration{
	font-size: 2rem;
	display: inline-block;
	.num{
		color: var(--color-green);
		font-size: 200%;
		vertical-align: baseline;
		position: relative;
		bottom: -.07em;
		margin: 0 .05em;
	}
}

/* 路線図 */
.train-diagram{
	margin-top: 2rem;
	max-width: 800px;
	width: 100%;
	margin-left: auto;
	margin-right: 0;
}

/* ---- CAR ACCESS ---- */
.access-car{
background: url(../images/access/access-bg.webp) no-repeat center center;
	background-size: cover;
}
.car-grid{
	grid-template-columns: 50% 1fr;
	gap: 6rem;
	align-items: start;
}
.car-lead{
	font-size: clamp(2.6rem, 3vw, 3rem);
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	font-feature-settings: "palt";
}
.car-lead-time{
	white-space: nowrap;
}
.car-lead-dist{
	font-size: 50%;
}
.car-lead-num{
	font-size: 175%;
	color: var(--color-green);
	line-height: 1;
	vertical-align: baseline;
	margin: 0 .05em;
}
.car-from{
	font-size: 2.2rem;
	font-weight: 500;
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #ccc;
}
.car-list{
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.car-item{
	padding-bottom: 1.2rem;
	border-bottom: 1px dotted #e8e8e8;
}
.car-road{
	font-size: 1.4rem;
	display: block;
	margin-bottom: -0.6em;
}
.car-dest{
	font-size: 2.2rem;
	font-weight: 500;
	display: block;
	margin-bottom: 0.3em;
	font-feature-settings: "palt";
}
.car-duration{
	font-size: 2.2rem;
	.num{
		color: var(--color-green);
		font-size: 200%;
		vertical-align: baseline;
		position: relative;
		bottom: -.07em;
		margin: 0 .05em;
	}
}
.car-dist{
	font-size: 1.2rem;
}
.car-photo{
    margin-right: calc((100vw - 1000px) / -2);
		max-width: 780px;
}
.car-road-item{
	position: relative;
	display: inline-block;
}
.car-road-label{
	position: absolute;
	top: -1.4em;
	left: 0;
	font-size: 1.6rem;

}
/* レスポンシブ */
@media screen and (max-width: 767px) {
	.train-dest{
		line-height: 1.2;
		font-size: 2rem;
	}
	.walk-boxes{
		flex-direction: column;
	}
	.walk-box{
		min-width: unset;
	}
	.train-grid{
		grid-template-columns: 1fr;
		gap: 2.6rem;
		margin-bottom: 2rem;
	}
	.car-grid{
		grid-template-columns: 1fr;
		gap: 2.6rem;
	}
	.car-photo{
		order: -1;
	}
	.car-photo{
    margin-right: 0;
	}
	/* .car-road{
		margin-bottom:0em;
	} */
	 .car-duration {
    .num {
        font-size: 150%;
    }
	}
	.train-duration {
    .num {
        font-size: 150%;
    }
	}
	.car-road-label{
		font-size: 1.4rem;
	}
	.mv-text {
        img {
            height: 46%;
        }
    }
		.walk-box{
			    padding: 1.2rem 0;
		}
		.walk-station {
    font-size: 2rem;
  	  font-weight: 500;
	}
	.walk-boxes{
		gap: 1rem;
	}
	.walk-num{
		
	}
	.car-road {
    margin-bottom: -0.4em;
	}
	.access-train{
		padding-bottom: 46vw;
		overflow: hidden;
	}
	.train-bg {
    width: 140%;
	}
	.train-diagram{
		margin: 0 -16px;
		width: calc(100% + 32px);
	}
	.car-lead-num{
		font-size: 150%;
	}
	.car-dest{
		font-size: 2rem;
	}
}