@charset "UTF-8";
/* ===== アクセスページ（access/）共通変数 ===== */
.access {
	--c-text: #333;
	--c-red: #6a171b;
	--c-chuo: #f46f36;
	--c-chuo-tag: #cb6d3a;
	--c-sobu: #d0b503;
	--c-sobu-tag: #baa214;
	--c-tozai: #81bfeb;
	--c-tozai-tag: #578fbb;
	--c-keio: #f25091;
	--c-keio-tag: #b85584;
	--c-navy: #6e87bd;
	--c-station: #717171; /* 吉祥寺駅バー（デザインはグレー） */
	--c-busbg: #f4f4f4;
	--f-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--f-sans: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--f-en: "Jost", "Josefin Sans", "Noto Sans JP", sans-serif;
	color: var(--c-text);
	font-family: var(--f-serif);
	line-height: 2;
}
.access img { max-width: 100%; height: auto; display: block; }
.access :where(ul) { list-style: none; margin: 0; padding: 0; }
.access .pc { display: inline; }
.access .sp { display: none; }
.acc-inner { width: 65.4%; margin: 0 auto; } /* 1256/1920 */

/* ===== 共通パーツ ===== */
.acc-cap {
	position: absolute; right: 1em; bottom: .6em;
	color: #fff;
	font-size: clamp(.6rem, .55vw, .8rem);
	line-height: 1;
}
.acc-cap--b { color: #333; }
.acc__title {
	font-family: var(--f-en);
	font-weight: 300;
	letter-spacing: 0;
	font-size: clamp(1.500rem, 2.083vw, 2.500rem);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 3.375rem; /* ACCESS 下の余白：現状（1.688rem）の倍 */
}
.acc__icon { width: 14.8%; max-width: 284px; /* 挿し絵を2倍に */ margin: 0 auto 2.438rem; } /* 142/1920 */
.acc__lead {
	font-size: clamp(0.875rem, 1.250vw, 1.500rem);
	letter-spacing: .1em;
	text-align: center;
	line-height: 1.875;
	margin: 0 0 1.125rem;
}
.acc__body {
	font-size: clamp(0.625rem, 0.833vw, 1.000rem);
	letter-spacing: .03em;
	text-align: center;
	line-height: 2.4;
	margin: 0 0 2.812rem;
}

/* ===== メインビジュアル ===== */
.acc-hero__list { display: flex; justify-content: space-between; }
.acc-hero__list li { width: 33.1%; position: relative; }

/* ===== 電車アクセス ===== */
.acc-train { padding: 4.922rem 0 2.812rem; }
.acc-lines { display: flex; justify-content: center; gap: .4%; margin: 0 0 5.156rem; }
.acc-lines li {
	width: 17%;
	color: #fff;
	text-align: center;
	font-family: var(--f-serif); /* 路線名は明朝体 */
	font-size: clamp(0.625rem, 0.885vw, 1.062rem);
	line-height: 1;
	padding: .6em 0;
}
.acc-lines--chuo { background: var(--c-chuo-tag); }
.acc-lines--sobu { background: var(--c-sobu-tag); }
.acc-lines--tozai { background: var(--c-tozai-tag); }
.acc-lines--keio { background: var(--c-keio-tag); }
.acc-train__map { position: relative; width: 103.2%; margin: 0 -1.6% 4.5rem; } /* 路線図：デザインの字面幅 738/1440 に合わせる */
.acc-st { display: block; padding-top: 0; border-bottom: 1px solid #333; padding-bottom: 1.5rem; } /* 下の線（上の線と同じ幅）。.pc/.sp の inline 指定より優先させるため display:block */
.access .acc-st.pc, .access .acc-st.sp { display: block; }
@media (max-width: 1023px) { .access .acc-st.pc { display: none; } }
@media (min-width: 1024px) { .access .acc-st.sp { display: none; } }
.acc-st__title {
	font-size: clamp(0.625rem, 0.833vw, 1.000rem);
	font-weight: 400;
	line-height: 1.6;
	display: flex; align-items: center;
	margin: 0 0 1.312rem;
}
.acc-st__title::after { content: ""; flex: 1; height: 1px; background: #333; margin-left: .8em; } /* タイトルの横に線 */
.acc-st__cols { display: flex; justify-content: space-between; }
.acc-st__col { width: 31%; }
.acc-st__col li { margin-bottom: 0.788rem; }
.acc-st__time {
	font-size: clamp(0.812rem, 1.094vw, 1.312rem);
	line-height: 1.5;
	white-space: nowrap;
	margin: 0;
}
.acc-st__line {
	font-family: var(--f-sans);
	font-weight: 500; /* 各駅下の注意書き：400より少し太く（Noto Sans JP 500 を読み込み済み） */
	font-size: clamp(0.625rem, 0.729vw, 0.875rem);
	line-height: 1.6;
	margin: 0;
}

/* ===== 4路線の使い分け ===== */
.acc-routes { padding: 2rem 0 5rem; } /* 上の100%幅の線は削除 */
.acc-routes__title {
	font-size: clamp(0.875rem, 1.250vw, 1.500rem);
	font-weight: 400;
	letter-spacing: .08em;
	text-align: center;
	line-height: 1.6;
	margin: 3rem 0 2.5rem;
}
.acc-routes__box { display: flex; width: 56.6%; margin: 0 auto; }
.acc-routes__from {
	writing-mode: vertical-rl;
	background: var(--c-red);
	color: #fff;
	font-size: clamp(1rem, .8vw + .5rem, 1.4rem);
	letter-spacing: .3em;
	text-align: center;
	margin: 0;
	padding: .3em .6em;
	line-height: 1;
}
.acc-routes__lines { flex: 1; margin-left: 4%; }
.acc-route { position: relative; padding: 1.2rem 0 .8rem; }
.acc-route__label {
	position: absolute; right: 0; top: .2rem;
	font-family: var(--f-sans);
	font-size: clamp(.6rem, .3vw + .4rem, .75rem);
	line-height: 1;
	margin: 0;
}
.acc-route__st {
	display: flex; justify-content: space-between; align-items: center;
	position: relative;
	padding: 0;
	margin-top: .6rem;
}
.acc-route__st::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 50%;
	height: 3px;
	z-index: 0;
}
.acc-route__st li {
	writing-mode: vertical-rl;
	background: #fff;
	padding: .3em .15em;
	font-size: clamp(0.688rem, 0.938vw, 1.125rem);
	line-height: 1;
	letter-spacing: .1em;
	position: relative; z-index: 1;
}
.acc-route--chuo .acc-route__st::before { background: var(--c-chuo); }
.acc-route--sobu .acc-route__st::before { background: var(--c-sobu); }
.acc-route--tozai .acc-route__st::before { background: var(--c-tozai); }
.acc-route--keio .acc-route__st::before { background: var(--c-keio); }

/* ===== バスアクセス ===== */
.acc-bus { background: var(--c-busbg); padding: 5rem 0 4rem; }
.acc-flow {
	display: flex; align-items: stretch; justify-content: space-between;
	margin: 7% 0 0;
}
.acc-flow__home {
	writing-mode: vertical-rl;
	border: 1px solid var(--c-red);
	color: var(--c-red);
	font-size: clamp(.75rem, .35vw + .5rem, .9rem);
	line-height: 1.4;
	letter-spacing: .1em;
	margin: 0;
	padding: 1em .4em;
	text-align: center;
}
.acc-flow__station {
	writing-mode: vertical-rl;
	background: var(--c-station);
	color: #fff;
	font-size: clamp(1rem, .7vw + .5rem, 1.3rem);
	letter-spacing: .4em;
	line-height: 1;
	margin: 0;
	padding: 1em .6em;
	text-align: center;
}
.acc-flow__dir { width: 36%; position: relative; }
.acc-flow__dirlabel {
	font-size: clamp(.8rem, .4vw + .5rem, 1rem);
	line-height: 1;
	margin: 0 0 1rem;
	text-align: center;
}
.acc-flow__row { display: flex; align-items: center; justify-content: space-between; position: relative; }
.acc-flow__row::before {
	content: "";
	position: absolute; left: -12%; right: -12%; top: 50%;
	border-top: 1px solid #333;
	z-index: 0;
}
.acc-flow__row--bike { justify-content: center; margin-top: 1.2rem; }
.acc-flow__row--bike::before { top: 62%; }
.acc-flow__walk, .acc-flow__ride, .acc-flow__bike {
	display: flex; flex-direction: column; align-items: center;
	margin: 0;
	width: 22%;
	position: relative; z-index: 1;
	background: var(--c-busbg);
}
.acc-flow__walk img, .acc-flow__ride img { width: auto; height: 2.5rem; margin-bottom: .4rem; }
.acc-flow__bike { flex-direction: row; justify-content: center; width: auto; padding: 0 .8rem; }
.acc-flow__bike img { width: auto; height: 1.9rem; margin: 1.2rem .6rem 0 0; }
.acc-flow__stop { position: relative; z-index: 1; width: 52%; background: var(--c-busbg); padding: 0 .5rem; }
.acc-flow__circle {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: clamp(4rem, 5vw, 5.6rem); height: clamp(4rem, 5vw, 5.6rem);
	border: 1px solid var(--c-red);
	background: var(--c-busbg);
	border-radius: 50%;
	font-size: clamp(.65rem, .3vw + .45rem, .8rem);
	line-height: 1.3;
	text-align: center;
}
.acc-flow__circle strong {
	font-size: clamp(1.4rem, 1.2vw + .4rem, 2rem);
	line-height: 1;
	font-weight: 400;
	color: var(--c-red);
	display: inline;
	margin: 0 .05em;
}
.acc-flow__stopname {
	background: var(--c-navy);
	color: #fff;
	text-align: center;
	font-size: clamp(.85rem, .45vw + .5rem, 1.1rem);
	line-height: 1;
	padding: .6em 0;
	margin: 0 0 .6rem;
}
.acc-flow__cnt {
	font-size: clamp(.75rem, .35vw + .5rem, .95rem);
	line-height: 1.8;
	margin: 0;
	text-align: center;
}
.acc-flow__cnt strong {
	color: var(--c-red);
	font-size: 1.8em;
	font-weight: 400;
	margin: 0 .1em;
}
.acc-flow__cnt small { font-size: .8em; }
.acc-flow__note {
	font-size: clamp(.65rem, .3vw + .45rem, .8rem);
	line-height: 1.6;
	text-align: right;
	margin: 1rem 0 2.5rem;
}
.acc-busstop { display: flex; justify-content: center; align-items: center; margin: 7% 0 9%;  }
.acc-busstop__img { width: 55%; max-width: 930px; margin: 0; }
.acc-busstop__img img { width: 100%; }
.acc-flow img { width: 100%; }
.acc-busstop__map { width: 25%; margin: 0; }
.acc-busstop__list li {
	font-size: clamp(.8rem, .4vw + .5rem, 1rem);
	line-height: 2;
}
.acc-busstop__no { margin-right: .6em; }
.acc-busstop__no b {
	display: inline-block;
	background: var(--c-red);
	color: #fff;
	font-weight: 400;
	line-height: 1.3;
	padding: 0 .4em;
	margin-left: .2em;
}

/* ===== 注釈 ===== */
.acc-note { padding: 3rem 0 1rem; }
.acc-note p {
	width: 68.75%;
	margin: 0 auto;
	font-size: clamp(0.625rem, 0.729vw, 0.875rem);
	line-height: 1.8;
	text-align: center;
}

/* ===== SP ===== */
@media (max-width: 1023px) {
	.access .pc { display: none; }
	.access .sp { display: inline; }
	.acc-inner { width: 90%; }
	.acc-hero__list { flex-wrap: nowrap; }
	.acc-hero__list li { width: 33.1%; }
	.acc-cap { font-size: .55rem; right: .5em; bottom: .4em; }
	.acc-train { padding: 3rem 0 2rem; }
	.acc__title { margin-bottom: 1.5rem; } /* SP：タイトル下の余白を締める（PCは3.375rem） */
	.acc__icon { width: 23.7%; max-width: none; } /* SP：挿し絵を1.6倍 */
	.acc-lines { margin-bottom: 2rem; } /* 交通図の上余白＝下余白（2rem） */
	.acc__body { text-align: left; }
	.acc-lines { flex-wrap: wrap; gap: 2%; row-gap: .4rem; }
	.acc-lines li { width: 48%; }
	.acc-train__map { width: 100%; margin: 0 0 2rem; } /* SP：交通図は100%表示 */
	.acc-train__map .acc-cap { position: static; display: block; text-align: right; margin-top: .5rem; }
	.acc-st__cols { display: block; column-count: 2; column-gap: 4%; } /* SP：3つの列を2列に流し込む */
	.acc-st__col { width: 100%; }
	.acc-st__col li { break-inside: avoid; border-bottom: 1px solid #999; padding-bottom: .6rem; margin-bottom: .7rem; } /* SP：各駅ごとに下線 */
	.acc-st__col li { margin-bottom: .8rem; }
	.acc-st__time { font-size: .875rem; line-height: 1.5; white-space: normal; text-align: left; word-break: keep-all; } /* 文字拡大時は折り返し（両端揃えによる字間の開きを防ぐ） */
	.acc-st__line { font-size: .6875rem; line-height: 1.5; }
	.acc-routes { padding: 0 0 3rem; } /* SP：上の余白はタイトルの margin だけにして下と同じにする */
	.acc-routes__title { margin: 1.75rem 0; } /* 上下の余白を同じに */
	.acc-routes__box { width: 100%; }
	.acc-routes__from { font-size: 1rem; padding: .3em .45em; }
	.acc-routes__lines { margin-left: 3%; }
	.acc-route { padding: .4rem 0 .6rem; }
	.acc-route__st li { font-size: .8rem; letter-spacing: .05em; padding: .3em .1em; min-height: 5.5em; }
	.acc-bus { padding: 3rem 0; }
	.acc-flow { flex-wrap: wrap; margin-top: 2rem; }
	.acc-busstop__img { width: 100%; }
	.acc-flow__home, .acc-flow__station { writing-mode: horizontal-tb; width: 100%; padding: .6em 0; margin: .5rem 0; }
	.acc-flow__row::before { left: 0; right: 0; }
	.acc-flow__dir { width: 100%; margin: 1rem 0; }
	.acc-flow__dirlabel { text-align: left; }
	.acc-flow__walk, .acc-flow__ride, .acc-flow__bike { width: 24%; }
	.acc-flow__stop { width: 48%; }
	.acc-flow__circle { width: 4.2rem; height: 4.2rem; font-size: .65rem; }
	.acc-flow__circle strong { font-size: 1.5rem; }
	.acc-flow__stopname { font-size: .85rem; }
	.acc-flow__cnt { font-size: .75rem; }
	.acc-flow__note { text-align: left; }
	.acc-busstop { flex-wrap: wrap; }
	.acc-busstop__map { width: 70%; margin-bottom: 1rem; }
	.acc-note p { width: 90%; text-align: left; }
}
/* ===== タブレット（768〜1023px）個別調整 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
	.acc-hero__list li { width: 33.1%; }
	.acc-lines li { width: 23%; }
	.acc-st__cols { column-count: 3; }
}

/* ===== 固定ヘッダー分の上余白（★2026-10 再確認で修正：ヒーロー上部がヘッダーに隠れていた） ===== */
.access { padding-top: 100px; }
@media (max-width: 768px) {
	.access { padding-top: 76px; }
}