@charset "UTF-8";

.footer-contact-container{
	overflow: hidden;
}

.mt0{
	margin-top: 0 !important;
}

/*
	余白・画像幅はデザイン幅1180pxを基準に --u（1px相当）で指定。
	SPは画面幅に合わせて縮小、PCはカラム幅960pxを上限に拡大。
	フォントサイズはロケーションページ（style.css共通クラス）に合わせる。
*/
.access{
	--u: calc(100vw / 1180);
	--col: 100vw;
	--navy: #213244;
	--navy-dark: #172433;
	--gold: #ae8952;
}
@media screen and (min-width: 768px){
	.access{
		--u: calc(min(100vw, 960px) / 1180);
		--col: min(100vw, 960px);
	}
}
.font-times{
	font-family: 'Times New Roman', serif;
	font-weight: 400;
}

/* タイトル */
.access-ttl-section{
	position: relative;
	z-index: 2;
	/* background: linear-gradient(to bottom, #213243 0%, #0f1925 100%); */
	background: #213244;
	color: #fff;
}
.access-inner{
	margin: 0 auto;
	width: var(--col);
	padding: calc(70 * var(--u)) calc(118 * var(--u)) calc(96 * var(--u));
}
.access-inner-w{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	
}
.access-inner-w.is-navy{
	background: var(--navy);
}
.access-inner-w.is-white{
	background: #fff;
}
.access-page-ttl{
	padding-bottom: clamp(8px, 1.2vw, 18px);
	font-size: clamp(25px, 4.17vw, 42px); /* .primary-heading */
	line-height: 1.4;
	letter-spacing: .2em;
	color: var(--gold);
	border-bottom: 1px solid var(--gold);
}
.access-page-lead{
	margin-top: clamp(10px, 1.4vw, 20px);
	font-size: clamp(12px, 1.53vw, 22px); /* .note */
	line-height: 1.6;
}

/* セクション共通 */
.access-section.is-navy{
	background: var(--navy-dark);
	color: #fff;
}
.access-section.is-white{
	background: #f1efe9;
	color: var(--navy);
}
.access-frame{
	position: relative;
	margin: 0 auto;
	width: calc(1120 * var(--u));
	background: #fff;
}
/* SPは全幅 */
@media screen and (max-width: 767px){
	.access-frame{
		width: 100%;
	}
}
/* 左右の金線はサイト共通の .container:before ではなく .main-content:before に敷く（写真・タイトル帯の下） */
.access .container:before{
	content: none;
}
.access .main-content{
	position: relative;
}
.access .main-content:before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 88%;
	height: 100%;
	padding: 4%;
	transform: translateX(-50%);
	pointer-events: none;
}
@media screen and (min-width: 768px){
	.access .main-content:before{
		width: calc(1040 * var(--u));
		padding: 0;
	}
}
@media screen and (max-width: 767px){
	.access .main-content:before{
		/* border-right: 1px solid #938059; */
		/* border-left: 1px solid #938059; */
	}
}
.is-navy .access-frame,
.access-photo-block .access-frame{
	background: var(--navy);
}

/* 2路線2駅 */
.access-frame{
	padding: 80px 0;
}
@media screen and (max-width: 767px){
	.access-frame{
		padding: 50px 0;
	}
}
.access-lead-block,
.access-copy,
.access-station{
	margin: 0 calc(88 * var(--u));
}
.access-heading{
	padding-bottom: clamp(8px, 1.2vw, 18px);
	margin-bottom: clamp(12px, 1.25vw, 18px);
	font-size: clamp(21px, 3.47vw, 38px); /* .page-heading */
	line-height: 1.3;
	color: #f2f2f2;
	border-bottom: 1px solid var(--gold);
}
.access-heading-sub{
	padding-top: clamp(10px, 1.4vw, 20px);
	font-size: clamp(18px, 2.43vw, 30px); /* .secondary-heading */
	line-height: 1.3;
	color: #f2f2f2;
}
.access-copy{
	margin-top: calc(140 * var(--u));
	padding-bottom: clamp(8px, 1.2vw, 18px);
	font-size: clamp(18px, 2.43vw, 30px); /* .secondary-heading */
	line-height: 1.4;
	border-bottom: 1px solid var(--gold);
}
.is-gold{
	color: var(--gold);
}
.access-station{
	padding-top: clamp(10px, 1.4vw, 20px);
	white-space: nowrap;
}
.access-station-main{
	font-size: clamp(18px, 2.8vw, 32px);
	line-height: 1.6;
}
.access-station-main .num{
	/* margin: 0 .1em; */
	font-size: 2.2em;
	/* font-style: italic; */
	line-height: 1;
	color: var(--gold);
}
.access-station-sub{
	margin-top: .8em;
	font-size: clamp(12px, 1.8vw, 26px);
	line-height: 1.6;
}
.access-station-sub .num{
	margin: 0 .1em;
	font-size: 1.6em;
	line-height: 1;
	color: var(--gold);
}
.access-station .distance{
	margin-left: .2em;
	font-size: 1.4rem;
}
@media screen and (max-width: 767px){
	.access-station-main{
		font-size: 4.4vw;
	}
	.access-station-sub{
		font-size: 1.4rem;
	}
}
.access-map{
	margin: calc(90 * var(--u)) auto 0;
	width: calc(1018 * var(--u));
}

/* to TAKATSUKI / KYOTO / OSAKA */
.is-white > .access-frame{
	padding: 80px 0;
}
@media screen and (max-width: 767px){
	.is-white > .access-frame{
		padding: 50px 0;
	}
}
.access-dest-ttl{
	margin: 0 calc(88 * var(--u));
	padding-bottom: clamp(8px, 1.2vw, 18px);
	font-size: clamp(15px, 2.55vw, 30px); /* .content-ttl */
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .4em;
	text-align: center;
	border-bottom: 1px solid #9098a1;
}
.access-dest-copy{
	margin-top: clamp(14px, 1.8vw, 26px);
	font-size: clamp(18px, 2.43vw, 30px); /* .secondary-heading */
	line-height: 1.4;
	text-align: center;
}
@media screen and (max-width: 767px){
	.access-dest-ttl{
		font-size: 5.8vw;
	}
	.access-dest-copy{
		font-size: 4.3vw;
	}
}
/* 各駅への所要時間 */
.access-time{
	margin: calc(60 * var(--u)) calc(100 * var(--u)) 0;
	font-feature-settings: 'palt';
}
.access-time-main,
.access-time-sub{
	white-space: nowrap;
}
.access-time-from{
	padding: .3em 0;
	font-size: clamp(12px, 1.53vw, 22px); /* .note */
	line-height: 1.4;
	letter-spacing: .1em;
	text-align: center;
	border: 1px solid #9098a1;
}
.access-time-main{
	margin-top: .6em;
	font-size: clamp(18px, 2.8vw, 32px);
	line-height: 1.6;
}
.access-time-from-sub{
	margin-top: 1.6em;
	font-size: 1.4rem; /* .caption */
	line-height: 1.4;
}
.access-time-sub{
	margin-top: .2em;
	font-size: clamp(12px, 1.8vw, 26px);
	line-height: 1.6;
}
.access-time-main .num,
.access-time-sub .num{
	margin: 0 .05em;
	font-size: 1.8em;
	line-height: 1;
	color: var(--gold);
}
.access-time-note{
	font-size: 1.4rem; /* .caption */
	line-height: 1.4;
}
.access-time-note.is-small{
	font-size: 1rem;
}
@media screen and (max-width: 767px){
	.access-time-from{
		font-size: 1.4rem;
	}
	.access-time-main{
		font-size: 5.3vw;
	}
}

/* 写真 */
.access-photo{
	position: relative;
	z-index: 2;
	margin: 0 auto;
	width: var(--col);
}
.access-photo+.access-photo{
	margin-top: 40px;
}
@media screen and (min-width: 768px){
	.access-photo{
		width: calc(1120 * var(--u));
	}
	.access-photo+.access-photo{
		margin-top: 20px;
	}
}
.access-photo-mb{
	margin-bottom: clamp(50px, 10vw, 120px);
}
.access-photo-block{
	background: var(--navy-dark);
}
.access-photo-block .access-frame{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: calc(140 * var(--u)) calc(110 * var(--u)) calc(160 * var(--u)) 0;
	color: #fff;
}
.access-photo-sub{
	margin-top: calc(80 * var(--u));
	width: calc(811 * var(--u));
	flex-shrink: 0;
}
.access-vertical-copy{
	writing-mode: vertical-rl;
	font-size: clamp(12px, 1.53vw, 22px); /* .note */
	line-height: 2;
	letter-spacing: .3em;
}
@media screen and (max-width: 767px){
	.access-page-lead,
	.access-vertical-copy{
		font-size: 1.4rem;
	}
}


.caption-section{
	position: relative;
	z-index: 2;
}