@charset "UTF-8";

/* ==========================================================================
   STORIES — Reunion Scrapbook
   既存の記事一覧を本文の正として残し、JS 有効時だけスクラップブック表示へ切替。
   ========================================================================== */

/* 色はサイト共通の記念誌テーマ（深緑・金・生成り）に揃える。
   朱は「番号」と引用にだけ差し、帯・ボタン・CTA のような面には使わない。
   面で朱を使うと STORIES に入った瞬間だけ調子が跳ね上がり、
   前後のページとつながって見えなくなるため。 */
/* 本棚は main の外に置くので、色はどちらからも引けるところで宣言する。
   stories-shelf-cover.js が canvas に描く色も同じ値。片方を変えたら両方直す。 */
.stories-main,
.stories-shelf {
	--scrap-paper: #f6f4ec;
	--scrap-paper-strong: #fffdf7;
	--scrap-ink: #23271f;
	--scrap-green: #1e5b41;
	--scrap-green-deep: #143f2d;
	--scrap-gold: #a98a45;
	--scrap-gold-soft: #c8b06a;
	--scrap-gold-light: #dcc98f;
	--scrap-vermilion: var(--okn-vermilion, #b43a2b);
}

.stories-main {
	background: var(--scrap-paper);
	color: var(--scrap-ink);
}

.scrapbook[hidden] {
	display: none;
}

html.stories-enhanced .stories-intro,
html.stories-enhanced .stories-archive,
html.stories-enhanced .stories-join {
	display: none;
}

/* 入口の目隠し（stories-entry.js が付け、stories-shelf.js が外す）。
   モジュールが差し替えを終えるまでの数百ミリ秒、素の記事一覧が出てしまうのを
   防ぐ。display:none ではなく visibility にするのは、高さを保って足元の
   フッターがせり上がってこないようにするため。 */
html.stories-entering .stories-main {
	visibility: hidden;
}

/* 目隠しの下地。本棚の地と同じ生成りにして、本棚が出た瞬間に色が変わらない
   ようにする。値は .stories-shelf の background と対。片方を変えたら両方直す
   （--scrap-paper は .stories-main / .stories-shelf にしか無いのでここでは使えない）。 */
html.stories-entering body {
	background: radial-gradient(120% 90% at 50% 32%, #fffdf7 0%, #f6f4ec 42%, #ded9c8 100%);
}

/* ==========================================================================
   3D の本棚（stories-shelf.js）
   1人1冊の本を並べ、選んだ本が開いたらスクラップブックへ渡す。
   JS が hidden を外すまでは存在しないのと同じ。動きを抑える設定・再訪問・
   WebGL 不可のときも出さないので、ここが読解の前に立つことはない。
   ========================================================================== */
.stories-shelf[hidden] {
	display: none;
}

.stories-shelf {
	position: fixed;
	inset: 0;
	/* ヘッダーのロゴとナビは position:fixed / z-index:1000 で置かれている。
	   本棚はその上に出す。下に潜らせると、押せないナビが本の手前に浮いて残る。 */
	z-index: 1200;
	display: grid;
	place-items: center;
	/* 記念誌の見返しと同じ生成り。奥を沈ませて本の縁を立てる。 */
	background:
		radial-gradient(120% 90% at 50% 32%, #fffdf7 0%, var(--scrap-paper, #f6f4ec) 42%, #ded9c8 100%);
	/* 地と題字は hidden が外れた時点で出す。ここを opacity:0 から 1 へ送っていた
	   ときは、three.js が立ち上がるまでの1秒あまり、まだ選んでもいない
	   スクラップブックが下から透けていた。遅らせるのは本（canvas）だけでよい。 */
	transition: opacity 0.42s ease;
}

.stories-shelf.is-leaving {
	opacity: 0;
	/* 開いた紙面がそのまま近づいて画面になる、という見え方にする。 */
	transition: opacity 0.42s ease;
}

html.stories-shelf-open,
html.stories-shelf-open body {
	overflow: hidden;
}

/* ヘッダーの部品は position:fixed で z-index 1000〜1000000 に散っていて、
   本棚（1200）より下に来るものと上に来るものが混ざる。以前は伏せていたが、
   それだと入口でメニューへ行けなくなるので、下に沈むものだけを持ち上げて
   全部が本棚の手前に来るように揃える。
   （ハンバーガー 1000000 と書架メニュー 100000 は元から上にある） */
html.stories-shelf-open .l-header__logo,
html.stories-shelf-open .l-header__nav,
html.stories-shelf-open .l-header__spotlight {
	z-index: 1300;
}

/* 本が並ぶ面。組み上がってから出す。遅れて出るのはここだけで、地と題字は
   本棚が出た時点で見えている。 */
.stories-shelf__stage {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.stories-shelf.is-ready .stories-shelf__stage {
	opacity: 1;
}

.stories-shelf__stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.stories-shelf__ui {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 0.8rem;
	/* 上端はヘッダーのぶん空ける。ヘッダーは本棚の手前に出しているので、
	   詰めるとロゴと肩の文字が重なる。 */
	padding: clamp(8.4rem, 11vh, 11rem) 2rem 0;
	text-align: center;
	/* 文字は本の手前に置くが、クリックは本に通す。 */
	pointer-events: none;
	align-self: start;
	transition: opacity 0.45s ease;
}

/* 本を選んだら誘い文句は引く。開いた紙面と重なって読みづらくなるため。 */
.stories-shelf.is-opening .stories-shelf__ui {
	opacity: 0;
}

.stories-shelf__kicker {
	font-family: "Albert Sans", sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--scrap-gold, #a98a45);
}

.stories-shelf__title {
	font-family: "Noto Serif JP", "YakuHanMP", serif;
	font-size: clamp(2.2rem, 3.4vw, 3.4rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--scrap-green-deep, #143f2d);
}

/* 「一冊ずつ」は見出しから降ろした副題。題字はトップと同じ言葉に譲る。 */
.stories-shelf__lead {
	font-family: "Noto Serif JP", "YakuHanMP", serif;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	color: var(--scrap-green, #1e5b41);
}

.stories-shelf__status {
	font-size: 1.3rem;
	line-height: 1.8;
	color: rgba(35, 39, 31, 0.66);
}

.stories-shelf__skip {
	pointer-events: auto;
	margin-top: 0.6rem;
	padding: 0.9rem 2.4rem;
	border: 1px solid var(--scrap-gold, #a98a45);
	border-radius: 999px;
	background: transparent;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	color: var(--scrap-green-deep, #143f2d);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.stories-shelf__skip:hover,
.stories-shelf__skip:focus-visible {
	background: var(--scrap-green-deep, #143f2d);
	color: var(--scrap-paper, #f6f4ec);
}

@media screen and (max-width: 767px) {
	/* 上端はヘッダーのぶんを確保する。ここを詰めるとロゴと肩の文字が重なる。 */
	.stories-shelf__ui {
		padding: 7.6rem 1.6rem 0;
	}

	.stories-shelf__title {
		font-size: 2.2rem;
	}
}

html.stories-enhanced .l-header__spotlight {
	display: none !important;
}

html.stories-enhanced .l-header__nav {
	right: 8rem !important;
}

html.stories-enhanced .l-header__nav__list {
	gap: 2rem;
}

html.stories-enhanced .l-header__nav__list li:last-child {
	display: none;
}

@media screen and (max-width: 1180px) {
	html.stories-enhanced .l-header__nav {
		display: none !important;
	}
}

.scrapbook {
	position: relative;
	overflow: hidden;
	padding-top: 7.2rem;
	background: var(--scrap-paper);
}

.scrapbook__photo-ribbon {
	position: relative;
	height: clamp(15rem, 11vw, 17rem);
	overflow: hidden;
	/* 金の細線 → 深緑の太罫。記念誌の扉と同じ「線の重ね」で本文に入る。 */
	border-bottom: 0.5rem solid var(--scrap-green-deep);
	box-shadow: inset 0 -0.2rem 0 var(--scrap-gold-soft);
}

.scrapbook__photo-ribbon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.scrapbook__inner {
	width: min(138rem, 92vw);
	margin-inline: auto;
	padding: 3.4rem 0 4.6rem;
	display: grid;
	grid-template-columns: minmax(32rem, 0.36fr) minmax(0, 0.64fr);
	gap: 2.8rem 4.2rem;
	align-items: start;
}

.scrapbook__intro {
	display: flex;
	flex-direction: column;
	gap: 2.6rem;
	margin: 0;
}

.scrapbook__intro-copy {
	max-width: 80rem;
}

.scrapbook__kicker,
.scrapbook__feature-label,
.scrapbook__join-kicker {
	margin: 0 0 1.2rem;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size10);
	font-weight: 800;
	letter-spacing: 0.24em;
	color: var(--scrap-green);
}

.scrapbook .stories-intro__eyebrow {
	margin: 0 0 1.2rem;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size12);
	font-weight: 800;
	letter-spacing: 0.3em;
	/* ページ名だけ朱。ここが読者が最初に見る朱で、以降は番号と引用に限る。 */
	color: var(--scrap-vermilion);
}

.scrapbook__title {
	margin: 0;
	font-family: var(--okn-serif);
	font-size: clamp(3.8rem, 3vw, 4.2rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

.scrapbook__title::after {
	content: "";
	display: block;
	width: min(46rem, 74%);
	height: 0.7rem;
	margin-top: 2rem;
	background: var(--scrap-gold);
}

.scrapbook__lead {
	max-width: 46em;
	margin: 2.4rem 0 0;
	font-size: var(--font-size14);
	font-weight: 600;
	line-height: 2;
}

.scrapbook__notice {
	padding: 2rem 2.2rem;
	background: #efece1;
	border: 1px solid var(--scrap-gold-soft);
	border-left: 0.4rem solid var(--scrap-gold);
	box-shadow: 0.8rem 0.9rem 0 rgba(23, 25, 20, 0.12);
	transform: rotate(-1.2deg);
}

.scrapbook__notice strong {
	display: block;
	margin-bottom: 0.8rem;
	font-size: var(--font-size12);
	letter-spacing: 0.08em;
}

.scrapbook__notice p {
	margin: 0;
	font-size: var(--font-size10);
	line-height: 1.85;
}

/* ==========================================================================
   条件でさがす（stories-filter.js）
   /business/ の絞り込みと同じ操作。意匠だけ記念誌の紙面に合わせてある。
   選んだ条件は前後送りに乗る物語を減らすので、掲示する件数は「残った数」。
   ========================================================================== */

.scrapbook__filters {
	display: grid;
	gap: 1.6rem;
	padding: 2.2rem 2.2rem 2rem;
	background: var(--scrap-paper-strong);
	border: 1px solid rgba(23, 25, 20, 0.22);
	/* 天だけ深緑の太罫。notice の金と重ならないよう、色で役割を分ける。 */
	border-top: 0.3rem solid var(--scrap-green-deep);
	box-shadow: 0.8rem 0.9rem 0 rgba(23, 25, 20, 0.12);
}

.scrapbook__filters-title {
	margin: 0;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size10);
	font-weight: 800;
	letter-spacing: 0.24em;
	color: var(--scrap-green);
}

.scrapbook__filters-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem 1.6rem;
}

.scrapbook__filters-field {
	display: grid;
	gap: 0.5rem;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size9);
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--scrap-green-deep);
}

/* 値を持つ物語が1件も無い軸は、stories-filter.js が欄ごと伏せる。 */
.scrapbook__filters-field[hidden] {
	display: none;
}

.scrapbook__filters select {
	min-height: 4.4rem;
	padding: 0 0.6rem;
	border: 0;
	border-bottom: 1px solid var(--scrap-green);
	border-radius: 0;
	background: transparent;
	color: var(--scrap-ink);
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 600;
}

/* iOS Safari は、文字が 16px 未満の欄に焦点が当たるとページ全体を勝手に拡大
   する。<select> でも同じ。root が幅に追従するため rem では閾値に届かないので
   px で置く（page-business.css の .business-filters select と同じ対処）。 */
@media (pointer: coarse) {
	.scrapbook__filters select {
		font-size: 16px;
	}
}

.scrapbook__filters-count {
	margin: 0;
	font-family: var(--okn-serif);
	font-size: var(--font-size12);
	font-variant-numeric: tabular-nums;
}

.scrapbook__filters-count [data-directory-count] {
	color: var(--scrap-vermilion);
	font-weight: 700;
}

.scrapbook__filters-total {
	font-family: var(--font-sans-serif);
	font-size: var(--font-size9);
	color: rgba(35, 39, 31, 0.7);
}

.scrapbook__filters-reset {
	justify-self: start;
	min-height: 4.4rem;
	padding: 0 2rem;
	border: 1px solid var(--scrap-green);
	border-radius: 0;
	background: transparent;
	color: var(--scrap-green);
	font-family: inherit;
	font-size: var(--font-size9);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.scrapbook__filters-reset:hover {
	background: var(--scrap-green);
	color: #fff;
}

.scrapbook__filters select:focus-visible,
.scrapbook__filters-reset:focus-visible {
	outline: 3px solid var(--scrap-vermilion);
	outline-offset: 3px;
}

.scrapbook__filters-empty {
	margin: 0;
	padding: 1.2rem 1.4rem;
	background: #efece1;
	border-left: 0.4rem solid var(--scrap-vermilion);
	font-size: var(--font-size10);
	line-height: 1.8;
}

.scrapbook__filters-empty[hidden] {
	display: none;
}

/* 条件に合う物語が無いときは、紙面と前後送りごと畳む。前に読んでいた人が
   残っていると、条件に当てはまらない人が結果として出ているように見える。 */
.scrapbook.is-empty .scrapbook__stories,
.scrapbook.is-empty .scrapbook__controls {
	display: none;
}

/* 1件だけ残ったとき。物語は輪にして送っているので、伏せないと左右の本と
   送りが今読んでいる本人を指す。件数（1 / 1）だけは残す。 */
.scrapbook.is-single .scrapbook__side-story,
.scrapbook.is-single .scrapbook__controls button {
	display: none;
}

.scrapbook.is-single .scrapbook__stories {
	grid-template-columns: minmax(0, 1fr);
}

.scrapbook__stories {
	display: grid;
	grid-template-columns: minmax(9rem, 10rem) minmax(0, 1fr) minmax(9rem, 10rem);
	gap: 1.8rem;
	align-items: center;
	margin-top: -3.5rem;
}

.scrapbook__feature {
	border: 1px solid rgba(23, 25, 20, 0.22);
	background: var(--scrap-paper-strong);
	box-shadow: 0.9rem 1rem 0 rgba(23, 25, 20, 0.14);
	display: grid;
	grid-template-columns: minmax(20rem, 0.78fr) minmax(25rem, 1.22fr);
	min-height: 42rem;
	transform: rotate(0.35deg);
}

.scrapbook__feature-photo {
	position: relative;
	min-height: 42rem;
	overflow: hidden;
	background: #e7e1d5;
}

.scrapbook__feature-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.scrapbook__feature-no {
	position: absolute;
	top: 2rem;
	left: 2rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 6.4rem;
	height: 6.4rem;
	border-radius: 50%;
	background: var(--scrap-vermilion);
	color: #fff;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size18);
	font-weight: 800;
}

.scrapbook__feature-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.8rem 3.4rem 3.2rem;
}

.scrapbook__feature-name {
	margin: 0;
	font-family: var(--okn-serif);
	font-size: clamp(3.4rem, 4vw, 5.8rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.scrapbook__feature-role {
	margin: 0.8rem 0 0;
	font-size: var(--font-size15);
	font-weight: 700;
}

.scrapbook__feature-meta {
	width: 100%;
	margin: 1.6rem 0 0;
	padding: 1.2rem 0;
	border-top: 1px solid rgba(23, 25, 20, 0.3);
	border-bottom: 1px solid rgba(23, 25, 20, 0.3);
	font-size: var(--font-size11);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.scrapbook__quote {
	margin: 2rem 0 0;
	padding: 0;
	font-family: var(--okn-serif);
	font-size: clamp(1.8rem, 2vw, 2.6rem);
	font-weight: 600;
	line-height: 1.75;
	color: var(--scrap-vermilion);
}

.scrapbook__feature-body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 1.2rem 0 0;
	font-size: var(--font-size12);
	line-height: 1.95;
}

/* 物語を読む → 1人ぶんの詳細ページ（/stories/NN/）へ遷移するリンク。 */
.scrapbook__read {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21rem;
	min-height: 5.4rem;
	margin-top: auto;
	padding: 1.3rem 2.8rem;
	border: 2px solid var(--scrap-green);
	background: var(--scrap-green);
	color: #fff;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size12);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.scrapbook__read:hover {
	background: transparent;
	color: var(--scrap-green);
	transform: translateY(-2px);
}

.scrapbook__read:focus-visible,
.scrapbook__controls button:focus-visible,
.scrapbook__side-story:focus-visible {
	outline: 3px solid var(--scrap-vermilion);
	outline-offset: 4px;
}

/* 深緑の帯の上では朱の輪郭が沈むので、金でフォーカスを示す。 */
.scrapbook__join a:focus-visible {
	outline: 3px solid var(--scrap-gold-light);
	outline-offset: 4px;
}

/* JS 無効時に記事一覧から詳細ページへ入る導線。 */
.stories-item__more {
	margin: 1.2rem 0 0;
}

.stories-item__more a {
	display: inline-flex;
	align-items: center;
	min-height: 4.4rem;
	padding: 0.8rem 2.2rem;
	border: 2px solid var(--scrap-green);
	color: var(--scrap-green);
	font-size: var(--font-size11);
	font-weight: 800;
}

.stories-item__more a:hover {
	background: var(--scrap-green);
	color: #fff;
}

.stories-item__more a:focus-visible {
	outline: 3px solid var(--scrap-vermilion);
	outline-offset: 4px;
}

/* ---------- 閉じている本（前後の物語への導線） ---------- */
/*
 * 入口の本棚に並んでいるのと同じ装丁を、そのまま小さくしたもの。読んでいる回が
 * 開いた本なら前後の回はまだ閉じている本、という関係を見たままで伝える。
 *
 * 表紙の絵は data-cover から引く。背には表紙の左端を引き伸ばして回している。
 * 3D 側（stories-shelf-scene.js）が左 54px を背に使っているのと同じ扱いで、
 * どちらから見ても同じ布の本に見えるようにしてある。
 *
 * 3D の表紙は canvas で顔写真まで焼き込むが、ここは名刺ほどの大きさしかない。
 * 同じ絵柄の地に金の罫と巻数だけを置き、記念誌の装丁として読ませる。
 */
.story-book {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	/*
	 * 地の絵は明るいものから暗いものまである。四隅を落として下を沈めてから
	 * 金を置く。こうしないと、明るい地の巻数だけが読めなくなる。
	 */
	background:
		radial-gradient(122% 86% at 50% 32%, rgba(12, 14, 11, 0) 42%, rgba(12, 14, 11, 0.46) 100%),
		linear-gradient(to top, rgba(12, 14, 11, 0.86) 0, rgba(12, 14, 11, 0.4) 4.4rem, rgba(12, 14, 11, 0) 7.6rem),
		var(--story-cover) center / cover no-repeat,
		#3b352c;
	box-shadow:
		inset 0 0 0 1px rgba(200, 176, 106, 0.45),
		0.6rem 0.8rem 1.4rem rgba(23, 25, 20, 0.32);
}

/* 巻数。金の細罫の下に置く、記念誌の扉と同じ入り方。 */
.story-book__no {
	position: absolute;
	right: 0.8rem;
	bottom: 0.9rem;
	left: 0.8rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--scrap-gold-soft);
	color: var(--scrap-gold-light);
	font-family: var(--font-sans-serif);
	font-size: var(--font-size9);
	font-weight: 800;
	letter-spacing: 0.22em;
	text-align: center;
}

/* 背。奥へ回り込む面なので、表紙より一段沈めて厚みを出す。 */
.story-book::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1.05rem;
	background: var(--story-cover) left center / 950% 100% no-repeat, #3b352c;
	box-shadow: inset 0 0 1.1rem rgba(0, 0, 0, 0.55);
}

/* 小口。表紙より一回り小さい紙束が覗く。 */
.story-book::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 0.42rem;
	background: repeating-linear-gradient(to right, #efe7d6 0 0.06rem, #cfc4ab 0.06rem 0.13rem);
	box-shadow: 0 0 0.4rem rgba(23, 25, 20, 0.32);
}

/* 背は外側（中央の開いた本と反対側）へ向ける。 */
.story-book--left {
	margin-left: 1.05rem;
	margin-right: 0.42rem;
}

.story-book--left::before {
	right: 100%;
}

.story-book--left::after {
	left: 100%;
}

.story-book--right {
	margin-left: 0.42rem;
	margin-right: 1.05rem;
}

.story-book--right::before {
	left: 100%;
}

.story-book--right::after {
	right: 100%;
}

.story-book[data-cover="01"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-01.webp");
}

.story-book[data-cover="02"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-02.webp");
}

.story-book[data-cover="03"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-03.webp");
}

.story-book[data-cover="04"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-04.webp");
}

.story-book[data-cover="05"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-05.webp");
}

.story-book[data-cover="06"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-06.webp");
}

/* 07 から先は無地の布装。01〜06 はサンプルの人物ごとに描き起こした絵で、
   実在の方に他人の絵を回すわけにはいかない。応募のたびに絵を起こすのも続かない
   ので、実在の回は記念誌そのものの装丁（織り目のある深緑の布）で揃える。
   地紋は scripts/gen-story-cloth-cover.cjs が作る。 */
.story-book[data-cover="07"] {
	--story-cover: url("/assets/img/stories-scrapbook/binding/cover-07.webp");
}

.scrapbook__side-story {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 100%;
	padding: 0;
	color: var(--scrap-ink);
	text-align: left;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.scrapbook__side-story .story-book {
	margin-bottom: 1rem;
}

.scrapbook__side-story--left {
	transform: rotate(-3deg) translateX(-1.6rem);
}

.scrapbook__side-story--right {
	transform: rotate(3deg) translateX(1.6rem);
}

/* 棚から一冊だけ手前へ引き出す。 */
.scrapbook__side-story:hover {
	transform: rotate(0) translateY(-0.8rem);
}

.scrapbook__side-name {
	font-size: var(--font-size14);
	font-weight: 800;
}

.scrapbook__side-action {
	margin-top: 0.6rem;
	font-size: var(--font-size9);
	font-weight: 700;
	color: var(--scrap-green);
}

.scrapbook__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	margin: 0;
	grid-column: 2;
}

.scrapbook__controls p {
	min-width: 7rem;
	margin: 0;
	text-align: center;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size12);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.scrapbook__controls button {
	min-height: 4.8rem;
	padding: 1rem 2.2rem;
	border: 1px solid var(--scrap-green);
	background: transparent;
	color: var(--scrap-green);
	font-size: var(--font-size10);
	font-weight: 800;
	cursor: pointer;
}

.scrapbook__controls button:hover {
	background: var(--scrap-green);
	color: #fff;
}

.scrapbook__join {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(34rem, 0.95fr);
	min-height: 28rem;
	/* フッター（さらに濃い深緑）と地続きに見えないよう、帯は一段明るい緑にする。 */
	background: var(--scrap-green);
	color: #fff;
}

.scrapbook__join-photo {
	min-height: 28rem;
	overflow: hidden;
}

.scrapbook__join-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scrapbook__join-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(4rem, 5vw, 6rem);
}

.scrapbook__join-kicker {
	color: var(--scrap-gold-light);
}

.scrapbook__join h2 {
	margin: 0;
	font-family: var(--okn-serif);
	font-size: clamp(3.4rem, 3.8vw, 5.2rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.scrapbook__join p:not(.scrapbook__join-kicker) {
	max-width: 34em;
	margin: 2.4rem 0 0;
	font-size: var(--font-size12);
	line-height: 1.95;
}

.scrapbook__join a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 5.6rem;
	margin-top: 3.4rem;
	padding: 1.3rem 3.4rem;
	background: #fff;
	color: var(--scrap-green-deep);
	font-size: var(--font-size12);
	font-weight: 800;
	transition: background 0.2s ease, color 0.2s ease;
}

.scrapbook__join a:hover {
	background: var(--scrap-gold-soft);
	color: var(--scrap-ink);
}

@media screen and (max-width: 1023px) {
	.scrapbook {
		padding-top: 5.8rem;
	}

	.scrapbook__inner {
		display: block;
		padding: 5rem 0 6rem;
	}

	.scrapbook__intro {
		gap: 3rem;
		margin-bottom: 3rem;
	}

	/* 左の柱をやめて横いっぱいになるので、欄も幅なりに並べ直す。
	   auto-fit にしておくと、タブレットでは5つ横並び、スマホでは2列になる。 */
	.scrapbook__filters-fields {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}

	/*
	 * 横に置く幅が無くなったら、前後の本は中央の一冊の下へ並べる。
	 * 以前はここで伏せていたが、そうすると狭い画面だけ「前後にも本がある」
	 * という並びが消えて、入口の本棚との関係が切れてしまう。
	 */
	.scrapbook__stories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"feature feature"
			"prev next";
		gap: 3.4rem 4.6rem;
		margin-top: 0;
	}

	/* 前後の本を伏せた行ごと畳む。areas を上書きしないと、消えた prev / next の
	   ぶんの行が空のまま残って、紙面の下に隙間が空く。 */
	.scrapbook.is-single .scrapbook__stories {
		grid-template-areas: "feature feature";
	}

	.scrapbook__side-story {
		width: min(100%, 15rem);
	}

	.scrapbook__side-story--left {
		grid-area: prev;
		justify-self: end;
		transform: rotate(-3deg);
	}

	.scrapbook__side-story--right {
		grid-area: next;
		justify-self: start;
		transform: rotate(3deg);
	}

	.scrapbook__feature {
		grid-area: feature;
		grid-template-columns: minmax(22rem, 0.8fr) minmax(28rem, 1.2fr);
	}

	.scrapbook__feature-copy {
		padding: 4rem 3.4rem;
	}

	.scrapbook__join {
		grid-template-columns: 1fr;
	}

	.scrapbook__join-photo {
		min-height: 32rem;
	}
}

@media screen and (max-width: 767px) {
	.scrapbook__photo-ribbon {
		height: 15rem;
		border-bottom-width: 0.5rem;
	}

	.scrapbook__inner {
		width: min(92vw, 58rem);
		padding-top: 4rem;
	}

	.scrapbook__intro {
		margin-bottom: 3.4rem;
	}

	.scrapbook__title {
		font-size: clamp(3.6rem, 12vw, 5.4rem);
	}

	.scrapbook__lead {
		font-size: var(--font-size11);
	}

	.scrapbook__notice {
		box-shadow: 0.5rem 0.6rem 0 rgba(23, 25, 20, 0.12);
	}

	.scrapbook__feature {
		grid-template-columns: 1fr;
		min-height: 0;
		box-shadow: 0.6rem 0.7rem 0 rgba(23, 25, 20, 0.14);
		transform: none;
	}

	.scrapbook__feature-photo {
		min-height: 0;
		aspect-ratio: 4 / 4.6;
	}

	.scrapbook__feature-copy {
		padding: 3.2rem 2.4rem 2.6rem;
	}

	.scrapbook__feature-name {
		font-size: 3.8rem;
	}

	.scrapbook__quote {
		font-size: 2rem;
	}

	.scrapbook__read {
		width: 100%;
		margin-top: 3rem;
	}

	.scrapbook__stories {
		gap: 2.8rem 3.6rem;
	}

	.scrapbook__side-story {
		width: min(100%, 12.4rem);
	}

	.scrapbook__controls {
		gap: 1rem;
		margin-top: 3rem;
	}

	.scrapbook__controls button {
		flex: 1;
		padding-inline: 1rem;
	}

	.scrapbook__join {
		min-height: 0;
	}

	.scrapbook__join-photo {
		min-height: 24rem;
	}

	.scrapbook__join-copy {
		padding: 4.2rem 6vw 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scrapbook__feature-photo img,
	.scrapbook__read,
	.scrapbook__side-story,
	.scrapbook__filters-reset,
	.scrapbook__join a {
		transition: none;
	}
}