/* 10年分の、ありがとう。— 温かなフィルムアルバム */

:root {
  --paper: #F4EFE6;
  --paper-deep: #EAE2D4;
  --ink: #2D2926;
  --ink-soft: #5A524C;
  --accent: #7E3C48;
  --accent-deep: #66303A;
  --olive: #5F6752; /* 要件の初期値 #6B735D は小さい文字で4.33:1のため、4.5:1以上になるよう少し濃くした */
  --letter-bg: #252C2A;
  --letter-paper: #FBF8F1;
  --cloth: #5E3039;
  --cloth-light: #73404A;
  --foil: #D8C08E;
  --white: #FFFDF8;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  --header-h: 56px;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .3s;
  --t-cover: 1s;
  --rise: 16px;

  color-scheme: light;
}

html[data-motion="reduced"] {
  --t-fast: .18s;
  --t-cover: .35s;
  --rise: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
html:not([data-motion="reduced"]) { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  /* 薄い紙の粒子 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: .04em;
  overflow-x: clip;
  /* 文節（<wbr>）で改行し、ことばの途中では折り返さない */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.5; letter-spacing: .06em; margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: .25em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 2px dashed var(--olive); outline-offset: 6px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 6px;
}
.skip-link:focus { top: 12px; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  min-height: var(--header-h);
  padding: 4px var(--gutter);
  background: rgba(244, 239, 230, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(107, 115, 93, .25);
}
.chapter-nav { display: flex; gap: 0 2px; flex-wrap: wrap; margin-left: -8px; }
@media (max-width: 359px) { .chapter-nav a { font-size: .875rem; padding: 0 6px; } .motion-toggle { padding: 0 10px; font-size: .8125rem; } }
.chapter-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--ink); text-decoration: none; font-size: .9375rem; border-radius: 6px;
}
.chapter-nav a:hover { color: var(--accent); background: rgba(126, 60, 72, .07); }

.motion-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap;
  background: transparent; border: 1px solid rgba(45, 41, 38, .3); border-radius: 999px; cursor: pointer;
  font-size: .875rem;
}
.motion-toggle__value { color: var(--accent); font-weight: 500; }
.motion-toggle__value::before { content: "：" ; color: var(--ink-soft); font-weight: 400; }
.motion-toggle:hover { border-color: var(--accent); }

/* 200%以上の拡大や横向きの低い画面では、固定ヘッダーが本文を覆わないよう固定を外す */
@media (max-width: 300px), (max-height: 460px) { .site-header { position: relative; } }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress__bar { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; min-width: 44px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: .08em;
  text-decoration: none; line-height: 1.4;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--white); box-shadow: 0 6px 18px -10px rgba(102, 48, 58, .8); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: rgba(255, 253, 248, .85); color: var(--ink); border-color: rgba(45, 41, 38, .35); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--text { background: none; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(45,41,38,.4); padding: 0 12px; font-weight: 400; }
.btn--text:hover { color: var(--accent); }
.btn--icon { background: transparent; border-color: rgba(45, 41, 38, .3); padding: 0 16px; gap: 6px; }
.btn--icon:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn--icon span[aria-hidden] { font-size: 1.4rem; line-height: 1; transform: translateY(-1px); }
.btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.btn__sub { font-size: .875rem; }
.btn--on-dark.btn--primary { background: var(--letter-paper); color: var(--letter-bg); }
.btn--on-dark.btn--primary:hover { background: #fff; }
.btn--on-dark.btn--ghost { background: transparent; color: var(--letter-paper); border-color: rgba(251, 248, 241, .5); }
.btn--on-dark.btn--ghost:hover { border-color: var(--letter-paper); }
.btn--on-dark:focus-visible { outline-color: var(--foil); }

.no-js-only { display: none; }
html:not(.js) .no-js-only { display: inline-flex; }

/* ---------- 写真共通 ---------- */
.print {
  margin: 0;
  background: var(--white);
  padding: clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px) clamp(20px, 3vw, 34px);
  box-shadow: 0 1px 2px rgba(45, 41, 38, .12), 0 18px 40px -24px rgba(45, 41, 38, .45);
}
.print img, .print .photo-missing { width: 100%; }
.photo-missing {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(107,115,93,.08) 0 10px, transparent 10px 20px),
    var(--paper-deep);
  color: var(--ink-soft); font-size: .875rem; text-align: center; padding: 1em;
}
.photo-failed {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--paper-deep); color: var(--ink-soft); font-size: .875rem; padding: 1em;
}

/* ---------- 章共通 ---------- */
.chapter {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 12vw, 140px) var(--gutter);
}
.chapter__eyebrow { color: var(--olive); font-size: .875rem; letter-spacing: .14em; margin-bottom: .8em; }
.chapter__title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); margin-bottom: .9em; }
.chapter__desc { color: var(--ink-soft); }

.js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
html[data-motion="reduced"].js .reveal { transition-duration: .3s; }

/* ---------- S01 表紙 ---------- */
.cover {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) var(--gutter) clamp(48px, 8vw, 96px);
  display: grid; gap: 20px;
  grid-template-areas: "text" "album" "meta";
}
.cover__text { grid-area: text; }
.cover__album { grid-area: album; }
.cover__meta { grid-area: meta; }

.sample-badge {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px;
  border: 1px solid var(--olive); border-radius: 999px; color: var(--olive);
  font-size: .875rem; letter-spacing: .1em; line-height: 1.6;
}
.cover__purpose { font-family: var(--serif); color: var(--accent); font-size: 1.0625rem; letter-spacing: .14em; margin-bottom: .3em; }
.cover__title { font-size: clamp(2rem, 1.2rem + 4.4vw, 3.6rem); line-height: 1.35; letter-spacing: .08em; }
.cover__lead { margin-top: .4em; }
.cover__names { font-family: var(--serif); font-size: 1.125rem; margin-bottom: .2em; }
.cover__dates { color: var(--ink-soft); font-size: .9375rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; }

/* 布張りアルバム：窓あきの表紙から写真がのぞき、ひらくと見開きになる */
.book { position: relative; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.cover__album { perspective: 2200px; }
.book__page {
  position: relative; background: var(--white); padding: clamp(10px, 2vw, 18px);
  box-shadow: 0 2px 3px rgba(45,41,38,.12), 0 28px 50px -30px rgba(45,41,38,.55);
  border-radius: 2px 6px 6px 2px;
}
.book__caption { display: none; }
.album-book__photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.album-book__photo img, .album-book__photo .photo-missing { width: 100%; height: 100%; }
.album-book__photo .photo-missing { aspect-ratio: auto !important; }

.book__cover {
  position: absolute; inset: 0; z-index: 2;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform var(--t-cover) var(--ease);
  pointer-events: none;
}
.book__front, .book__inside {
  position: absolute; inset: 0; border-radius: 2px 6px 6px 2px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.book__front {
  /* 布目 */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--cloth-light), var(--cloth));
  box-shadow: inset 10px 0 18px -8px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.6);
  /* 窓の部分をくり抜き、写真をのぞかせる */
  -webkit-mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) 50% 42% / 66% 66% no-repeat;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 42% / 66% 66% no-repeat;
  mask-composite: exclude;
}
/* 表紙の裏（見返し）：ひらくと左のページになる */
.book__inside {
  transform: rotateY(180deg);
  filter: drop-shadow(0 18px 24px rgba(45,41,38,.18));
  border-radius: 6px 2px 2px 6px;
  background: #F8F3E9;
  background-image: radial-gradient(circle at 30% 20%, rgba(126,60,72,.05), transparent 60%);
  box-shadow: inset -14px 0 22px -14px rgba(45,41,38,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 8%; gap: .4em; color: var(--ink);
}
.book__inside p { margin: 0; }
.book__inside-purpose { font-family: var(--serif); color: var(--accent); font-size: clamp(.625rem, 1.3vw, 1rem); letter-spacing: .14em; }
.book__inside-title { font-family: var(--serif); font-size: clamp(1rem, 2.6vw, 2rem); line-height: 1.4; letter-spacing: .08em; }
.book__inside-names { font-family: var(--serif); font-size: clamp(.625rem, 1.2vw, .9375rem); color: var(--ink-soft); margin-top: .6em !important; }

.album-book__window {
  position: absolute; left: 17%; top: 14.28%; width: 66%; height: 66%;
  box-shadow: inset 0 0 0 1px rgba(216,192,142,.65), 0 0 0 6px rgba(216,192,142,.18);
}
.album-book__foil {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  font-family: var(--serif); font-size: clamp(.875rem, 2vw, 1.25rem); letter-spacing: .4em; color: var(--foil);
  padding-left: .4em;
}
.album-book__foil::before, .album-book__foil::after {
  content: ""; position: absolute; top: 50%; width: 36px; height: 1px; background: var(--foil); opacity: .7;
}
.album-book__foil::before { right: calc(100% + 10px); }
.album-book__foil::after { left: calc(100% + 6px); }
.album-book__stitch {
  position: absolute; top: 10px; bottom: 10px; left: 14px; width: 0;
  border-left: 2px dashed rgba(216, 192, 142, .7);
}

/* ボタンでひらく（控えめ・スクロール演出なしのとき） */
.cover[data-state="open"]:not(.is-scrolly) .book__cover { transform: rotateY(-118deg); opacity: 0; transition: transform var(--t-cover) var(--ease), opacity var(--t-cover) var(--ease); }
.cover[data-state="instant"]:not(.is-scrolly) .book__cover { transition: none; transform: rotateY(-118deg); opacity: 0; }
html[data-motion="reduced"] .cover[data-state="open"] .book__cover { transform: rotateY(-24deg); }

/* スクロールでひらく（通常の動き） */
.cover.is-scrolly { max-width: none; padding: 0; display: block; align-content: normal; min-height: 0; height: 300vh; height: 300svh; }
.cover.is-scrolly .cover__stage {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  max-width: var(--max); margin: 0 auto; padding: clamp(12px, 3vh, 40px) var(--gutter);
  display: grid; gap: 14px; grid-template-areas: "text" "album" "meta"; align-content: center;
  overflow: visible;
}
.cover.is-scrolly .book__cover { transition: none; }
.cover.is-scrolly .cover__text, .cover.is-scrolly .cover__meta { will-change: opacity, transform; }
.cover__hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  margin: 0; font-size: .8125rem; letter-spacing: .14em; color: var(--ink-soft); white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cover__hint::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--ink-soft), transparent); animation: hint 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.cover.is-scrolly .cover__hint[hidden] { display: none; }
/* スマホ・タブレットでは操作ボタンと重ならないよう、案内は文の流れの下に置く */
@media (max-width: 959px) {
  .cover__hint { position: static; transform: none; justify-self: center; flex-direction: row; gap: 8px; }
  .cover__hint::after { height: 14px; }
}
@media (min-width: 960px) {
  .cover.is-scrolly .cover__stage { grid-template-columns: 6fr 4fr; column-gap: 56px; row-gap: 0; grid-template-areas: "album text" "album meta"; align-items: end; }
  .cover.is-scrolly .cover__meta { align-self: start; }
}

/* ---------- S02 はじまり ---------- */
.intro { display: grid; gap: 32px; }
.intro__photo { transform: rotate(-1.2deg); max-width: 560px; }
.intro__photo img { aspect-ratio: 4 / 3; }
.intro__body p:not(.chapter__eyebrow) { font-size: 1.0625rem; }
.intro__bridge {
  font-family: var(--serif); color: var(--accent); font-size: 1.125rem; text-align: center;
  margin: 24px 0 0; padding-top: 40px; position: relative;
}
.intro__bridge::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 28px; background: var(--olive); opacity: .6; }

/* ---------- S03 10年の写真 ---------- */
.album { padding-top: clamp(48px, 8vw, 96px); }
.album__head { margin-bottom: 28px; }
.viewer__stage { position: relative; }
.memory { display: grid; gap: 18px 40px; }
.js .memory[data-inactive] { display: none; }
.memory__photo { margin: 0; position: relative; }
.memory__photo img, .memory__photo .photo-missing { aspect-ratio: 4 / 3; height: auto; background: var(--paper-deep); }
.memory__year { margin: 0 0 .2em; }
.memory__year span {
  display: inline-block; font-family: var(--serif); font-size: 2.25rem; letter-spacing: .1em; color: var(--accent); line-height: 1.2;
  border-bottom: 1px solid rgba(126,60,72,.35); padding-bottom: 4px;
}
.memory__title { font-size: 1.375rem; margin: .5em 0 .7em; }
html:not(.js) .memory + .memory { margin-top: 56px; }

.js .memory.is-entering .memory__photo { animation: photo-in var(--t-fast) var(--ease) both; }
.js .memory.is-entering .memory__text { animation: text-in calc(var(--t-fast) + .1s) var(--ease) both; }
@keyframes photo-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--rise))) rotate(calc(var(--dir, 1) * .6deg)); } to { opacity: 1; transform: none; } }
@keyframes text-in { from { opacity: 0; transform: translateY(calc(var(--rise) / 2)); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .memory.is-entering .memory__photo { animation-name: fade-in; }
html[data-motion="reduced"] .memory.is-entering .memory__text { animation-name: fade-in; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.viewer__zoom { position: absolute; z-index: 2; top: calc(clamp(8px, 1.4vw, 14px) + 10px); right: calc(clamp(8px, 1.4vw, 14px) + 10px); min-height: 44px; padding: 0 16px; font-size: .875rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.viewer__controls { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 28px; }
.viewer__controls[hidden] { display: none; }
.filmstrip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.filmstrip__frame {
  position: relative; min-height: 48px; cursor: pointer;
  background: transparent; border: 1px solid rgba(45,41,38,.28); border-radius: 6px;
  font-family: var(--serif); font-size: 1rem; letter-spacing: .1em; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.filmstrip__frame:hover { border-color: var(--accent); }
.filmstrip__frame[aria-pressed="true"] { background: var(--accent); color: var(--white); border-color: var(--accent); }
/* 色だけに頼らず、選択中は下線と印も付ける */
.filmstrip__frame[aria-pressed="true"] span { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.filmstrip__frame[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--accent); border-top: 0;
}
/* スマホでは前へ・次へを年ボタンの下に並べる */
@media (max-width: 599px) {
  .viewer__controls { grid-template-columns: 1fr 1fr; }
  .filmstrip { grid-column: 1 / -1; grid-row: 1; }
  #prev-year { justify-self: start; }
  #next-year { justify-self: end; }
}

/* ---------- S03 ページをめくるアルバム（通常の動き・スクロール連動） ---------- */
.flip-zoom { display: none; }
.viewer.is-flip { position: relative; }
.viewer.is-flip .viewer__sticky {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.viewer.is-flip .viewer__stage {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.viewer.is-flip .viewer__controls { margin-top: 0; }
.viewer.is-flip .flip-zoom { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: .875rem; white-space: nowrap; }
.viewer.is-flip .viewer__controls { grid-template-columns: auto 1fr auto auto; }
@media (max-width: 599px) {
  .viewer.is-flip .viewer__controls { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .viewer.is-flip .flip-zoom { grid-row: 2; grid-column: 2; }
  .viewer.is-flip .filmstrip__frame { min-height: 44px; }
}
/* タブレット幅では年ボタンを1段に並べ、操作ボタンはその下へ */
@media (min-width: 600px) and (max-width: 959px) {
  .viewer.is-flip .viewer__controls { grid-template-columns: 1fr auto 1fr; }
  .viewer.is-flip .filmstrip { grid-column: 1 / -1; grid-row: 1; }
  .viewer.is-flip #prev-year { justify-self: start; }
  .viewer.is-flip #next-year { justify-self: end; }
}

.flipbook {
  --page-w: min(92vw, 440px, calc((100svh - var(--header-h) - 200px) / 1.5));
  position: relative; width: var(--page-w); aspect-ratio: 1 / 1.5; margin: 0 auto;
  perspective: 2200px;
}
.flipbook__base, .leaf { position: absolute; top: 0; height: 100%; }
.leaf { left: 0; width: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.leaf__face, .flipbook__base {
  position: absolute; inset: 0;
  background: #FBF7EE;
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,.7), transparent 70%);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 1px 2px rgba(45,41,38,.12), 0 20px 40px -26px rgba(45,41,38,.55);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; padding: 7% 7% 6%;
  overflow: hidden;
}
.leaf__face--back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }
/* めくっている途中のページの陰影 */
.leaf__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(45,41,38,.22), transparent 40%); opacity: 0; border-radius: inherit; }
.leaf__face--back .leaf__shade { background: linear-gradient(270deg, rgba(45,41,38,.22), transparent 40%); }
.fb-photo { margin: 0; background: var(--white); padding: 8px 8px 22px; box-shadow: 0 1px 2px rgba(45,41,38,.15), 0 10px 20px -14px rgba(45,41,38,.5); transform: rotate(var(--r, -.8deg)); }
.fb-photo img { width: 100%; aspect-ratio: 4 / 3; display: block; background: var(--paper-deep); }
.fb-photo::before { /* 写真を留めるテープ */
  content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(107,115,93,.28);
}
.fb-photo { position: relative; }
.fb-text { margin-top: 6%; min-height: 0; }
.fb-year { font-family: var(--serif); color: var(--accent); font-size: 1.75rem; letter-spacing: .1em; line-height: 1.2; margin: 0 0 .1em; }
.fb-title { font-family: var(--serif); font-size: 1.1875rem; margin: 0 0 .5em; letter-spacing: .06em; line-height: 1.5; }
.fb-body { margin: 0; font-size: .9375rem; line-height: 1.85; }
.fb-folio { position: absolute; bottom: 3%; right: 7%; font-family: var(--serif); font-size: .75rem; color: var(--ink-soft); letter-spacing: .1em; }
.leaf__face--back .fb-folio, .flipbook__base .fb-folio { right: auto; left: 7%; }

/* PC：見開き（左＝写真、右＝言葉） */
@media (min-width: 960px) {
  .flipbook { --page-w: min(600px, 45vw, calc((100svh - var(--header-h) - 170px) * 1.1)); width: calc(var(--page-w) * 2); aspect-ratio: 2 / 0.9; }
  .flipbook__base { left: 0; width: 50%; border-radius: 6px 2px 2px 6px; justify-content: center; }
  .leaf { left: 50%; width: 50%; }
  .leaf__face--front { justify-content: center; }
  .flipbook::after { /* 綴じ目 */
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%); pointer-events: none; z-index: 50;
    background: linear-gradient(90deg, transparent, rgba(45,41,38,.12) 45%, rgba(45,41,38,.18) 50%, rgba(45,41,38,.12) 55%, transparent);
  }
  .fb-text { margin-top: 0; }
  .fb-year { font-size: 2.5rem; }
  .fb-title { font-size: 1.5rem; }
  .fb-body { font-size: 1.0625rem; line-height: 2; }
}
@media (max-width: 959px) {
  .flipbook__base { display: none; }
}

/* ---------- S04 日常のありがとう ---------- */
.thanks__head { margin-bottom: 36px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.note {
  position: relative; background: #FBF7EC;
  transform: rotate(var(--tilt));
  box-shadow: 0 1px 2px rgba(45,41,38,.1), 0 14px 26px -20px rgba(45,41,38,.5);
}
.note::before { /* マスキングテープ */
  content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(107,115,93,.28);
}
.note.reveal.is-in { transform: rotate(var(--tilt)); }
.note__heading { font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.note__toggle {
  width: 100%; min-height: 64px; padding: 18px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: 0; text-align: left; cursor: pointer; letter-spacing: .06em;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; line-height: 1.6;
}
.note__hint { flex: none; font-family: var(--sans); font-size: .8125rem; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; }
.note__toggle[aria-expanded="false"] .note__hint::before { content: "ひらく"; }
.note__toggle[aria-expanded="true"] .note__hint::before { content: "とじる"; }
html:not(.js) .note__hint { display: none; }
.note__body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows calc(var(--t-fast) + .1s) var(--ease);
}
.note__inner { overflow: hidden; transform-origin: 50% 0; transition: transform calc(var(--t-fast) + .1s) var(--ease), opacity var(--t-fast) var(--ease); }
.note__inner p { padding: 0 20px 20px; margin: 0; }
.note.is-closed .note__body { grid-template-rows: 0fr; }
.note.is-closed .note__inner { opacity: 0; transform: perspective(600px) rotateX(-12deg); }
html[data-motion="reduced"] .note.is-closed .note__inner { transform: none; }
.note.is-closed .note__inner p { visibility: hidden; }

/* ---------- S05 手紙 ---------- */
.letter {
  max-width: none;
  background: var(--letter-bg);
  color: var(--letter-paper);
  text-align: center;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.letter .chapter__title { color: var(--letter-paper); }
.letter__head { max-width: var(--max); margin: 0 auto; }

.envelope {
  position: relative; width: min(340px, 82vw); aspect-ratio: 16 / 10; margin: calc(min(340px, 82vw) * .4 + 20px) auto 32px;
  perspective: 900px;
}
.envelope__back, .envelope__front, .envelope__flap, .envelope__paper { position: absolute; left: 0; right: 0; }
.envelope__back { inset: 0; background: #D8CAB0; border-radius: 4px; }
.envelope__paper {
  left: 7%; right: 7%; top: 6%; height: 88%; background: var(--letter-paper); color: var(--ink);
  border-radius: 2px; display: flex; align-items: flex-start; justify-content: center; padding-top: 9%;
  background-image: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(126,60,72,.16) 13px 14px), linear-gradient(var(--letter-paper), var(--letter-paper));
  background-clip: content-box, border-box; padding: 16% 12% 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  transition: transform calc(var(--t-cover) * .7) var(--ease) calc(var(--t-cover) * .35);
}
.envelope__front {
  inset: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, #F1E8D6, #EADFC9);
  /* 左右と下から折り込んだポケット */
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10%;
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.06));
}
.envelope__to { font-family: var(--serif); color: var(--ink); font-size: 1.0625rem; letter-spacing: .2em; padding-left: .2em; }
.envelope__flap {
  top: 0; height: 60%;
  background: linear-gradient(to bottom, #E6DAC3, #DCCDB2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform calc(var(--t-cover) * .55) var(--ease), z-index 0s linear calc(var(--t-cover) * .3);
  z-index: 3;
}
.envelope__seal {
  position: absolute; left: 50%; top: 56%; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 4;
  background: radial-gradient(circle at 40% 35%, #9A4B58, var(--accent-deep)); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: opacity calc(var(--t-cover) * .25) var(--ease);
}
.envelope__front { z-index: 2; }
.envelope__paper { z-index: 1; }
.letter[data-state="open"] .envelope__seal { opacity: 0; }
.letter[data-state="open"] .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.letter[data-state="open"] .envelope__paper { transform: translateY(-34%); }
html[data-motion="reduced"] .letter[data-state="open"] .envelope__paper { transform: translateY(-12%); }

.letter__actions { margin-bottom: 8px; }
.letter__body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows calc(var(--t-cover) * .6) var(--ease) calc(var(--t-cover) * .4);
}
.letter__inner { overflow: hidden; }
.letter[data-state="closed"] .letter__body { grid-template-rows: 0fr; transition-delay: 0s; }
.letter[data-state="closed"] .letter__inner { visibility: hidden; transition: visibility 0s linear calc(var(--t-cover) * .6); }
.stationery {
  max-width: 640px; margin: 24px auto 28px; text-align: left; color: var(--ink);
  background: var(--letter-paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.2em - 1px), rgba(126,60,72,.13) calc(2.2em - 1px) 2.2em);
  background-position: 0 calc(clamp(28px, 6vw, 56px) - .1em);
  padding: clamp(28px, 6vw, 56px) clamp(22px, 6vw, 60px);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 2.2; letter-spacing: .05em;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
  border-radius: 2px;
}
.stationery p { margin: 0 0 2.2em; }
.stationery__to { font-size: 1.1875rem; }
.stationery__sign { text-align: right; margin-bottom: 0 !important; }
.letter__close { margin-bottom: 8px; }

/* ---------- S06 これから ---------- */
.closing { display: grid; gap: 40px; justify-items: center; text-align: center; padding-bottom: clamp(80px, 12vw, 140px); }
.closing__photo { width: min(420px, 78vw); transform: rotate(1.2deg); }
.closing__photo img { aspect-ratio: 3 / 2; }
.closing__body { max-width: 560px; }
.closing__line { display: block; width: min(280px, 70vw); height: auto; margin: 0 auto 26px; overflow: visible; }
.closing__line circle { fill: var(--accent); }
.closing__line path { fill: none; stroke: var(--olive); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .closing__body:not(.is-in) .closing__line path { stroke-dashoffset: 1; }
.js .closing__line path { transition: stroke-dashoffset 2.4s var(--ease) .3s; }
html[data-motion="reduced"].js .closing__line path { transition-duration: .01s; transition-delay: 0s; }
.closing .btn--primary { margin-top: 18px; }

/* ---------- フッター（制作見本案内） ---------- */
.sample-footer {
  border-top: 1px solid rgba(107,115,93,.3);
  padding: 36px var(--gutter) 48px;
  max-width: 760px; margin: 0 auto; text-align: center;
  font-size: .875rem; color: var(--ink-soft); line-height: 1.9;
}
.sample-footer__logo { font-family: var(--serif); letter-spacing: .3em; color: var(--ink); font-size: .9375rem; margin-bottom: .6em; }
.sample-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 写真拡大 ---------- */
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(24, 22, 20, .96); color: var(--letter-paper);
}
.lightbox::backdrop { background: rgba(24, 22, 20, .6); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: fade-in var(--t-fast) var(--ease); }
.lightbox__frame { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px 24px; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; min-height: 0; }
.lightbox__media { min-height: 0; display: flex; justify-content: center; }
.lightbox__media img { width: auto; height: auto; max-width: min(92vw, 1400px); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); object-fit: contain; }
.lightbox figcaption { font-size: .9375rem; text-align: center; }
.lightbox__close { position: absolute; top: 14px; right: 16px; }

/* ---------- レイアウト：タブレット以上 ---------- */
@media (min-width: 600px) {
  .notes { grid-template-columns: repeat(3, 1fr); align-items: start; gap: 28px; }
  .filmstrip { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 960px) {
  .cover {
    grid-template-columns: 6fr 4fr; column-gap: 56px; row-gap: 0;
    grid-template-areas: "album text" "album meta";
    align-items: end; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
    align-content: center;
  }
  .cover__meta { align-self: start; }
  .intro { grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: center; }
  .intro__bridge { grid-column: 1 / -1; }
  .memory { grid-template-columns: 7fr 5fr; align-items: center; }
  .viewer__controls { max-width: 860px; margin-left: auto; margin-right: auto; }
  /* PCでは年ボタンをフィルムの連なりに */
  .filmstrip {
    gap: 0; padding: 14px 10px; background: #2B2724; border-radius: 4px;
    background-image:
      radial-gradient(circle, var(--paper) 2.4px, transparent 2.6px),
      radial-gradient(circle, var(--paper) 2.4px, transparent 2.6px);
    background-size: 16px 8px, 16px 8px;
    background-position: 0 2px, 0 calc(100% - 2px);
    background-repeat: repeat-x;
  }
  .filmstrip__frame { border-radius: 2px; border: 0; margin: 0 4px; color: #E9E1D2; background: rgba(255,255,255,.06); }
  .filmstrip__frame:hover { background: rgba(255,255,255,.14); }
  .filmstrip__frame[aria-pressed="true"] { background: var(--paper); color: var(--accent); transform: scale(1.06); }
  .filmstrip__frame[aria-pressed="true"]::after { display: none; }
  .closing { grid-template-columns: 1fr 1fr; text-align: left; justify-items: start; align-items: center; column-gap: 72px; }
  .closing__photo { justify-self: end; }
  .closing__line { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) * { animation-duration: .01ms !important; }
}
@media print {
  .site-header, .viewer__controls, .cover__actions, .letter__actions, .letter__close, #restart { display: none !important; }
}