@charset "utf-8";

/* =============================================================
   20年のあゆみ
   左に年の柱（貼り付く）、右に時代のかたまり。
   年号は縁取りの大きな欧字、時代の名は縦書き。トップと同じ組み方。
   ============================================================= */

.hist {
	width: var(--haba);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: clamp(32px, 5vw, 76px);
	align-items: start;
	padding-block: clamp(56px, 9vh, 104px);
}

/* -------------------------------------------------------------
   年の柱
   ------------------------------------------------------------- */

.rail { position: sticky; top: calc(var(--topH) + clamp(32px, 8vh, 72px)); }
.rail__list { position: relative; padding-left: 1px; }
.rail__list::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--keisen);
}
.rail__item + .rail__item { margin-top: clamp(18px, 3vh, 30px); }
.rail__item a { display: flex; align-items: center; gap: 14px; position: relative; }
.rail__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--kami);
	border: 1px solid var(--ji-3);
	flex: none;
	transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
.rail__year {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .14em;
	color: var(--ji-3);
	transition: color .4s ease;
}
/* いま読んでいる年の印。年の系の赤（--toshi-kurenai）を使う。
   面の赤（--sango-koi）だと、同じ頁に少しちがう赤が二つ並ぶ。 */
.rail__item.is-here .rail__dot {
	background: var(--toshi-kurenai);
	border-color: var(--toshi-kurenai);
	transform: scale(1.25);
}
.rail__item.is-here .rail__year { color: var(--ji); }
.rail__item a:hover .rail__year { color: var(--ai); }

/* -------------------------------------------------------------
   時代のかたまり
   ------------------------------------------------------------- */

.era {
	padding-block: clamp(48px, 9vh, 108px);
	scroll-margin-top: calc(var(--topH) + 24px);
}
.era + .era { border-top: 1px solid var(--keisen-usu); }

.era__hd {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: end;
	margin-bottom: clamp(32px, 5vh, 56px);
}

/* 年号は縁取りだけの欧字 */
.era__toshi {
	grid-column: 1;
	margin: 0;
	font-family: var(--ei);
	font-size: clamp(40px, 6.4vw, 82px);
	line-height: .9;
	letter-spacing: .01em;
	font-weight: 400;
	/* 年の色は各 .era が --nen として持っている（page-history.php が
	   config の 'iro' から書き出す）。トップの道と必ず同じ色になる。 */
	color: var(--nen, var(--toshi-kurenai));
	white-space: nowrap;
}
.era__wareki {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--ji-3);
}
/* 時代の名は縦書きで、年号のすぐ脇に立てる。
   縦書きは箱の右端から流れるので、justify-self を指定しないと
   段の右の果てまで飛んでいく。 */
.era__title {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: start;
	writing-mode: vertical-rl;
	margin: 0;
	font-size: clamp(17px, 2.1vw, 23px);
	font-weight: 500;
	letter-spacing: .28em;
	line-height: 1;
	white-space: nowrap;
	align-self: start;
}
.era__lead {
	grid-column: 1;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 2.2;
	color: var(--ji-2);
	max-width: 32em;
	text-wrap: pretty;
}

.era__body {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

/* 出来事 */
.era__events { border-top: 1px solid var(--keisen-usu); }
.ev {
	display: grid;
	/* 年の列は、いちばん長い表記（2006.9.16）が入る幅にしてある。
	   ここだけ日まで入るため（2026年9月12日、本人の指定）。
	   行ごとに幅が変わると文の頭が揃わないので、auto ではなく固定で持つ。 */
	grid-template-columns: 100px 1fr;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--keisen-usu);
	align-items: baseline;
}
.ev__year {
	font-family: var(--wa);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--nen, var(--toshi-kurenai));
}
.ev__text { font-size: 14px; line-height: 2.1; }

/* 添え物（写真とメモ） */
.era__side { display: flex; flex-direction: column; gap: 26px; }

/* 写真はチェキの見立てにしない（2026年9月10日、本人の指示）。
   白いふちは、アルバムのように「その場にいた人の写真」を並べる頁のもの。
   ここは店の記録なので、写真をそのまま置く。
   トップの道に並ぶ写真（.toshi__shashin）と同じ扱いにしてある。
   説明の一行（.pic__cap）は枠の外にあるので、ふちを外しても残る。 */
.era__pic .pic__body {
	padding: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 26px 52px -36px rgba(var(--sumi-rgb), .45);
}
.memo {
	padding: 24px 26px;
	border-radius: 16px;
	background: rgba(var(--sumi-rgb), .05);
}
.memo__title {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--ai-fuka);
}
.memo__text { margin: 0; font-size: 13px; line-height: 2.1; color: var(--ji-2); }

/* -------------------------------------------------------------
   流れ（--p は JS が入れる。0 のままでも読める姿になっている）
   年号は横へ、時代の名は縦へ、添え物はその中間の速さで動かす。
   ------------------------------------------------------------- */

.ugoku .era__toshi { transform: translate3d(calc((.5 - var(--p)) * 5vw), 0, 0); }
.ugoku .era__title { transform: translate3d(0, calc((var(--p) - .5) * 5vh), 0); }
.ugoku .era__side  { transform: translate3d(0, calc((.5 - var(--p)) * 4vh), 0); }

/* -------------------------------------------------------------
   締め
   ------------------------------------------------------------- */

.hist__end { text-align: center; }
.hist__end-txt {
	margin: clamp(36px, 5vh, 56px) 0;
	font-size: 15px;
	line-height: 2.4;
	color: var(--ji-2);
}

/* -------------------------------------------------------------
   狭い画面
   年の柱は上辺の帯の下に横並びで貼り付く。
   ------------------------------------------------------------- */

@media (max-width: 860px) {
	.hist { grid-template-columns: 1fr; gap: 0; padding-top: 0; }

	.rail {
		position: sticky;
		top: var(--topH);
		z-index: 30;
		margin-inline: -5vw;
		padding: 10px 5vw;
		background: rgba(var(--kami-rgb), .95);
		backdrop-filter: blur(6px);
		border-bottom: 1px solid var(--keisen-usu);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.rail::-webkit-scrollbar { display: none; }
	.rail__list { display: flex; gap: 22px; padding-left: 0; }
	.rail__list::before { display: none; }
	.rail__item + .rail__item { margin-top: 0; }
	.rail__item a { gap: 8px; white-space: nowrap; }
	.rail__year { font-size: 13px; }

	.era__hd { grid-template-columns: 1fr; gap: 14px; }
	/* 年号は飾り書体で、行の高さ（.9）より字のほうが下へはみ出す。
	   横に並んでいるうちは害がないが、狭い画面で縦に積むと、
	   はみ出した字が次の行（時代の名）に重なる（2026年9月10日、本人の指摘）。
	   積むときは行の高さを字の丈まで戻す。 */
	.era__toshi { line-height: 1.12; }
	.era__title {
		grid-column: 1;
		grid-row: auto;
		writing-mode: horizontal-tb;
		letter-spacing: .16em;
		/* 段の隙間（14px）だけでは、字と字のあいだが 6px しか空かない。
		   飾り書体の数字は行の下のほうに座るので、箱の隙間と
		   見た目の隙間がずれる（2026年9月10日、描画した画素で実測）。
		   ここで足して、見た目で 18px ほど空くようにする。 */
		margin-top: clamp(10px, 2.6vw, 16px);
	}
	.era__lead { grid-column: 1; }
	.era__body { grid-template-columns: 1fr; }
	.era__side { order: -1; }
	/* 狭い画面でも 2006.9.16 が折れないように、字をすこし詰めて列を広げる。 */
	.ev { grid-template-columns: 86px 1fr; gap: 12px; }
	.ev__year { font-size: 13.5px; letter-spacing: .04em; }
}