@charset "utf-8";
/* =====================================================================
   『わすれもの、あります。』公式サイト
   配色は既存のバナー・アイコン（夕方の遺失物室）から取っている。
   暗い面（遺失物室）と紙の面（遺失物台帳）を交互に置く。
   ===================================================================== */

:root {
  --ink: #16120f;
  --ink-2: #1f1a15;
  --ink-3: #2c251e;
  --navy: #182242;
  --amber: #eaa755;
  --amber-d: #b06f26;
  --cream: #ffecc4;
  --cream-2: #f5c882;
  --paper: #f6efde;
  --paper-2: #ede3cb;
  --paper-3: #e2d5b6;
  --sheet: #fbf6e8;
  --rule: #cfc1a0;
  --text: #2c251e;
  --sub: #75685a;
  --enji: #9a2d3b;
  --blue: #3f5368;

  --f-min: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --f-go: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --f-en: "Cormorant Garamond", "Times New Roman", serif;
  --f-hand: "Klee One", "UD Digi Kyokasho N-R", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  --w: 1180px;
  --hh: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .27  0 0 0 0 .15  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hh); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-go);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
small { font-size: .8em; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--amber); color: var(--ink); }
.sp { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 10px 16px; background: var(--amber); color: var(--ink); font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* 文節で折り返す（対応ブラウザのみ。見出しと短い文だけに使う） */
.intro__body p, .intro__note, .chara__quote, .ep__catch, .movie__title, .about__lead, .about__text, .footer__lead, .news__text, .scene__text p, .hero__status { word-break: auto-phrase; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 26px; border-radius: 999px;
  font-family: var(--f-go); font-weight: 700; font-size: .9rem; letter-spacing: .1em; line-height: 1.3;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--amber { background: var(--amber); color: var(--ink); box-shadow: 0 8px 28px rgba(234, 167, 85, .28); }
.btn--amber:hover { background: var(--cream); transform: translateY(-2px); }
.btn--line { border: 1px solid rgba(255, 236, 196, .55); color: var(--cream); background: rgba(22, 18, 15, .25); backdrop-filter: blur(4px); }
.btn--line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-2px); }
.btn--dark { background: var(--ink-3); color: var(--cream); }
.btn--dark:hover { background: var(--enji); transform: translateY(-2px); }
.btn--lg { min-height: 60px; padding: 14px 40px; font-size: 1rem; }
.ep__wait { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 26px; border: 1px dashed #bfae86; border-radius: 999px; font-weight: 700; font-size: .88rem; letter-spacing: .1em; color: var(--sub); }

/* ---------- 判子・荷札 ---------- */
.stamp {
  display: inline-grid; place-items: center; padding: .3em .85em .26em;
  border: 1.5px solid currentColor; border-radius: 4px; outline: 1px solid currentColor; outline-offset: 2px;
  font-family: var(--f-min); font-weight: 700; font-size: .8rem; letter-spacing: .22em; text-indent: .22em; line-height: 1.4;
  white-space: nowrap; transform: rotate(-4deg); opacity: .92;
}
.stamp--public { color: var(--enji); }
.stamp--soon { color: var(--amber-d); }
.stamp--making { color: var(--blue); }
.stamp--stored { color: #a2977f; outline: 0; border-style: dashed; border-width: 1px; font-weight: 600; opacity: .8; }
.stamp--s { font-size: .68rem; }

.tag {
  --hole: var(--paper);
  position: relative; display: inline-block; padding: 5px 14px 4px 26px;
  background: var(--paper-3); color: var(--ink-3);
  font-family: var(--f-en); font-weight: 600; font-size: .82rem; letter-spacing: .2em; line-height: 1.4;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 72%, 0 28%);
}
.tag::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--hole); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }

/* ---------- ヘッダー ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hh);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 2.6vw, 40px); color: var(--cream);
  transition: background-color .45s, box-shadow .45s, transform .45s var(--ease);
}
.header.is-solid { background: rgba(22, 18, 15, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 236, 196, .1); }
.header__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-min); font-weight: 700; font-size: 1.06rem; letter-spacing: .14em; white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity .45s, transform .45s var(--ease); pointer-events: none; }
.header.is-solid .header__logo, .menu-open .header__logo { opacity: 1; transform: none; pointer-events: auto; }
.header__key { width: 11px; height: 22px; color: var(--amber); transform: rotate(38deg); }

.gnav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.gnav__list { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.gnav__list a { position: relative; display: grid; justify-items: center; padding: 8px 0; line-height: 1.2; }
.gnav__en { font-family: var(--f-en); font-style: italic; font-weight: 600; font-size: 1.12rem; letter-spacing: .04em; }
.gnav__ja { font-size: .7rem; letter-spacing: .16em; opacity: .78; margin-top: 3px; }
.gnav__list a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); transform: translateX(-50%) scale(0); transition: transform .3s var(--ease); }
.gnav__list a:hover::after, .gnav__list a.is-current::after { transform: translateX(-50%) scale(1); }
.gnav__list a.is-current .gnav__en { color: var(--amber); }

.sns { display: flex; align-items: center; gap: 6px; }
.sns a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .3s, color .3s; }
.sns svg { width: 20px; height: 20px; }
.sns--nav a:hover { background: var(--amber); color: var(--ink); }

.menu-btn { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 4px; color: var(--cream); }
.menu-btn__bars { position: relative; width: 28px; height: 12px; }
.menu-btn__bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn__bars i:nth-child(1) { top: 0; }
.menu-btn__bars i:nth-child(2) { top: 10.5px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1) { top: 5px; transform: rotate(24deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2) { top: 5px; transform: rotate(-24deg); }
.menu-btn__label { font-family: var(--f-en); font-style: italic; font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; }

/* ---------- ファーストビュー ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--ink); color: var(--cream); isolation: isolate; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 2.4s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.001); }
.hero__slide.is-zoom img { animation: heroZoom 11s linear forwards; }
@keyframes heroZoom { from { transform: scale(1.001); } to { transform: scale(1.075); } }

.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to left, rgba(18, 12, 8, .86) 0%, rgba(18, 12, 8, .58) 13%, rgba(18, 12, 8, 0) 33%),
    linear-gradient(to right, rgba(18, 12, 8, .78) 0%, rgba(18, 12, 8, .35) 14%, rgba(18, 12, 8, 0) 30%),
    linear-gradient(to top, rgba(18, 12, 8, .92) 0%, rgba(18, 12, 8, .45) 20%, rgba(18, 12, 8, 0) 42%),
    linear-gradient(to bottom, rgba(18, 12, 8, .6) 0%, rgba(18, 12, 8, 0) 18%);
}
.hero__glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(60% 50% at 52% 38%, rgba(255, 190, 110, .22), rgba(255, 190, 110, 0) 70%); animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .45; } to { opacity: 1; } }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.hero__copy {
  position: absolute; left: clamp(28px, 6.2vw, 116px); top: clamp(104px, 19vh, 190px);
  writing-mode: vertical-rl; font-family: var(--f-min); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem); letter-spacing: .44em; line-height: 2.4;
  text-shadow: 0 0 18px rgba(18, 12, 8, .8);
}
.hero__copy span { display: block; }
.hero__copy span:nth-child(2) { margin-top: 3.2em; }

.hero__title { position: absolute; right: clamp(24px, 4.2vw, 84px); top: clamp(92px, 12.5vh, 136px); display: grid; grid-template-columns: auto auto; column-gap: clamp(10px, 1.3vw, 20px); align-items: start; }
.logo {
  grid-column: 1; grid-row: 1; writing-mode: vertical-rl;
  font-family: var(--f-min); font-weight: 800; color: var(--cream);
  font-size: clamp(3rem, min(6vw, 8.6vh), 6.2rem); line-height: 1.32; letter-spacing: .1em;
  text-shadow: 0 2px 0 rgba(60, 30, 8, .35), 0 0 34px rgba(18, 12, 8, .75), 0 0 2px rgba(18, 12, 8, .6);
}
.logo__l { display: block; }
.logo__l--2 { margin-top: 1.55em; }
.logo i { display: inline-block; font-style: normal; }
.hero__en { grid-column: 2; grid-row: 1; writing-mode: vertical-rl; font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: clamp(.85rem, 1.1vw, 1.05rem); letter-spacing: .22em; color: var(--cream-2); margin-top: .4em; padding-top: 3.2em; position: relative; }
.hero__en::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 2.4em; background: currentColor; opacity: .7; }
.seal {
  grid-column: 1; grid-row: 2; justify-self: end; margin: clamp(10px, 1.6vh, 18px) .5em 0 0;
  display: grid; grid-auto-flow: column; writing-mode: vertical-rl; gap: 0; padding: 6px 5px;
  background: var(--enji); color: #fff3e0; border-radius: 5px; transform: rotate(-5deg);
  font-family: var(--f-min); font-weight: 700; font-size: clamp(.72rem, .95vw, .92rem); line-height: 1.18; letter-spacing: .06em;
  box-shadow: 0 0 0 1px rgba(255, 243, 224, .25) inset, 0 6px 18px rgba(0, 0, 0, .35);
}
.seal b { display: block; font-weight: 700; }

.hero__foot { position: absolute; left: clamp(28px, 6.2vw, 116px); bottom: clamp(40px, 7.5vh, 76px); display: grid; gap: 14px; }
.hero__meta { display: flex; flex-wrap: wrap; font-size: .86rem; font-weight: 500; letter-spacing: .22em; color: var(--cream-2); }
.hero__meta span + span::before { content: "／"; margin: 0 .5em; opacity: .55; }
.hero__status { font-family: var(--f-min); font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.22rem); letter-spacing: .12em; }
.hero__status em { display: inline-block; margin-left: .8em; padding: .12em .8em .1em; border: 1px solid var(--amber); border-radius: 3px; color: var(--amber); font-style: normal; font-size: .82em; letter-spacing: .24em; text-indent: .24em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero__ctrl { position: absolute; right: clamp(20px, 4.2vw, 84px); bottom: clamp(32px, 7vh, 68px); display: flex; align-items: center; gap: 4px; }
.hero__dot { position: relative; width: 36px; height: 32px; }
.hero__dot::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 236, 196, .34); transition: background-color .3s; }
.hero__dot:hover::before { background: rgba(255, 236, 196, .7); }
.hero__dot.is-active::before { background: rgba(255, 236, 196, .34) linear-gradient(var(--amber), var(--amber)) no-repeat 0 0 / 0 100%; animation: dot 8s linear forwards; }
.hero__ctrl.is-paused .hero__dot.is-active::before { animation: none; background-size: 100% 100%; }
@keyframes dot { to { background-size: 100% 100%; } }
.hero__pause, .scene__auto { position: relative; width: 32px; height: 32px; border-radius: 50%; color: var(--cream); transition: background-color .3s; }
.hero__pause { margin-left: 6px; border: 1px solid rgba(255, 236, 196, .4); }
.hero__pause:hover, .scene__auto:hover { background: rgba(255, 236, 196, .16); }
.hero__pause i, .scene__auto i { position: absolute; left: 50%; top: 50%; width: 8px; height: 10px; margin: -5px 0 0 -4px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero__pause[aria-pressed="true"] i, .scene__auto[aria-pressed="false"] i { width: 0; height: 0; margin: -6px 0 0 -3px; border: 6px solid transparent; border-right: 0; border-left: 9px solid currentColor; }

.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-family: var(--f-en); font-style: italic; font-size: .92rem; letter-spacing: .2em; color: var(--cream); opacity: .85; }
.hero__scroll svg { width: 12px; height: 24px; color: var(--amber); transform: rotate(180deg); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-7px); } }

/* 入場の動き（読み込み時に一度だけ） */
.js .logo i { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
.js .is-loaded .logo i { opacity: 1; transform: none; filter: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .085s); }
.js .hero__copy, .js .hero__en, .js .seal, .js .hero__foot, .js .hero__scroll, .js .hero__ctrl { opacity: 0; transition: opacity 1.4s ease 1.5s, transform 1.4s var(--ease) 1.5s; }
.js .seal { transform: rotate(-5deg) scale(1.5); transition: opacity .5s ease 1.55s, transform .5s cubic-bezier(.3, 1.4, .5, 1) 1.55s; }
.js .is-loaded .hero__copy, .js .is-loaded .hero__en, .js .is-loaded .hero__foot, .js .is-loaded .hero__ctrl { opacity: 1; }
.js .is-loaded .hero__scroll { opacity: .85; }
.js .is-loaded .seal { opacity: 1; transform: rotate(-5deg) scale(1); }

/* ---------- 近道（スマホだけ） ---------- */
.quick { display: none; }

/* ---------- お知らせ ---------- */
.news { background: var(--ink-2); color: var(--cream); border-top: 1px solid rgba(255, 236, 196, .1); }
.news__inner { width: min(var(--w), 100% - 48px); margin-inline: auto; padding: clamp(36px, 5vw, 56px) 0; display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.news__en { font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--amber); }
.news__ja { margin-top: 8px; font-family: var(--f-min); font-weight: 600; font-size: .8rem; letter-spacing: .5em; opacity: .8; }
.news__list li { border-bottom: 1px solid rgba(255, 236, 196, .13); }
.news__list li:first-child { border-top: 1px solid rgba(255, 236, 196, .13); }
.news__item { display: grid; grid-template-columns: 6.4em 5.2em 1fr auto; gap: 14px; align-items: center; padding: 15px 6px; font-size: .94rem; line-height: 1.7; transition: background-color .3s, padding .3s var(--ease); }
a.news__item:hover { background: rgba(255, 236, 196, .05); padding-left: 14px; }
.news__date { font-family: var(--f-en); font-weight: 600; font-size: 1.02rem; letter-spacing: .06em; color: var(--cream-2); }
.news__tag { justify-self: start; min-width: 4.6em; padding: 1px 8px; border: 1px solid rgba(255, 236, 196, .4); border-radius: 2px; font-family: var(--f-en); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-align: center; }
.news__tag--MOVIE { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.news__arrow { width: 20px; height: 20px; color: var(--amber); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); }
a.news__item:hover .news__arrow { opacity: 1; transform: none; }

/* ---------- セクション共通 ---------- */
.sec { position: relative; padding: clamp(84px, 11vw, 156px) 0; }
.sec__inner { position: relative; width: min(var(--w), 100% - 48px); margin-inline: auto; }
.sec__inner--narrow { width: min(920px, 100% - 48px); }
.sec--paper { background: var(--paper) var(--noise); }
.sec--paper2 { background: var(--paper-2) var(--noise); }
.sec--paper2 .tag { --hole: var(--paper-2); background: var(--paper); }
.sec--dark { background: var(--ink); color: var(--cream); }
.sec--dark .tag { --hole: var(--ink); background: var(--cream-2); color: var(--ink); }

.sec:focus, .news:focus { outline: none; }
.sec-head { display: grid; justify-items: start; margin-bottom: clamp(40px, 6vw, 84px); }
.sec-head__en { margin-top: 14px; font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: clamp(3.2rem, 7.4vw, 6rem); line-height: .95; letter-spacing: -.005em; color: var(--ink-3); }
.sec-head__ja { display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 14px; font-family: var(--f-min); font-weight: 600; font-size: .95rem; letter-spacing: .5em; color: var(--enji); }
.sec-head__ja::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.sec-head--sub .sec-head__en { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.sec--dark .sec-head__en { color: var(--cream); }
.sec--dark .sec-head__ja { color: var(--amber); }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 作品紹介 ---------- */
.intro__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, 300px); gap: clamp(28px, 5.5vw, 88px); align-items: start; }
.intro__catch { writing-mode: vertical-rl; font-family: var(--f-min); font-weight: 700; font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.95; letter-spacing: .26em; color: var(--ink-3); padding-top: 1.2em; position: relative; }
.intro__catch::before { content: ""; position: absolute; top: 0; right: .62em; width: .34em; height: .34em; border-radius: 50%; background: var(--enji); }
.intro__catch span { display: block; }
.intro__catch span:nth-child(2) { margin-top: 2.4em; }
.intro__body { font-family: var(--f-min); font-weight: 500; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 2.5; letter-spacing: .08em; padding-top: .6em; }
.intro__body p + p { margin-top: 1.5em; }
.facts { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--rule); font-family: var(--f-go); font-size: .88rem; line-height: 1.8; letter-spacing: .06em; }
.facts > div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--rule); }
.facts small { color: var(--sub); margin-left: .2em; }
.facts a { margin-left: .4em; color: var(--enji); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.facts a:hover { color: var(--amber-d); }
.facts dt { font-family: var(--f-min); font-weight: 700; color: var(--enji); letter-spacing: .2em; }
.facts dd[lang="en"] { font-family: var(--f-en); font-style: italic; font-size: 1.08rem; }
.intro__prop { justify-self: center; align-self: center; text-align: center; }
.intro__prop img { width: min(100%, 300px); transform: rotate(-9deg); filter: drop-shadow(10px 18px 14px rgba(60, 40, 15, .28)); }
.intro__prop figcaption { margin-top: 14px; font-family: var(--f-hand); font-weight: 600; font-size: .95rem; letter-spacing: .24em; color: var(--sub); transform: rotate(-2deg); }

/* ---------- 舞台 ---------- */
.world { background: radial-gradient(90% 60% at 80% 0%, rgba(234, 167, 85, .1), rgba(234, 167, 85, 0) 60%), var(--ink); }
.scene { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 72px); align-items: center; }
.scene + .scene { margin-top: clamp(64px, 9vw, 128px); }
.scene--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.scene--rev .scene__view { order: 2; }
.scene__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--ink-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 236, 196, .1); }
.scene__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.scene__view img.is-active { opacity: 1; }
.scene__tabs { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(22, 18, 15, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scene__tabs button { width: 40px; height: 40px; border-radius: 50%; font-family: var(--f-min); font-weight: 700; font-size: 1rem; color: var(--cream); transition: background-color .3s, color .3s; }
.scene__tabs button:hover { background: rgba(255, 236, 196, .16); }
.scene__tabs button.is-active { background: var(--amber); color: var(--ink); }
.scene__tabs .scene__auto { width: 40px; height: 40px; margin-left: 2px; border-left: 1px solid rgba(255, 236, 196, .2); border-radius: 0 999px 999px 0; }
.scene__label { font-size: .8rem; letter-spacing: .28em; color: var(--amber); }
.scene__title { margin: 6px 0 22px; font-family: var(--f-min); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: .2em; line-height: 1.4; }
.scene__text > p:not(.scene__label) { font-size: .95rem; line-height: 2.2; letter-spacing: .06em; color: rgba(255, 236, 196, .82); }
.scene__text > p + p { margin-top: 1em; }
.notice { position: relative; display: inline-block; margin-top: 34px; padding: 22px 28px 16px; background: #efe3c2 var(--noise); color: var(--ink-3); font-family: var(--f-hand); font-weight: 600; font-size: .98rem; line-height: 1.9; letter-spacing: .14em; transform: rotate(-1.6deg); box-shadow: 4px 8px 22px rgba(0, 0, 0, .4); }
.notice::before, .notice::after { content: ""; position: absolute; top: -9px; width: 44px; height: 18px; background: rgba(228, 205, 150, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.notice::before { left: -14px; transform: rotate(-38deg); }
.notice::after { right: -14px; transform: rotate(38deg); }
.notice span { display: block; margin-top: 6px; text-align: right; font-size: .84rem; }

/* ---------- 登場人物 ---------- */
/* ふたりの対比 */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; margin-bottom: clamp(56px, 8vw, 104px); padding: clamp(24px, 3vw, 44px) clamp(16px, 3vw, 48px) 0; background: linear-gradient(to bottom, rgba(255, 250, 240, .6), rgba(255, 250, 240, 0)); border-top: 1px solid var(--rule); }
.duo__fig { position: relative; width: clamp(200px, 24vw, 300px); text-align: center; }
.duo__fig img { width: 100%; filter: drop-shadow(0 14px 16px rgba(50, 35, 15, .2)); }
.duo__fig figcaption { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(-2deg); padding: 4px 18px 3px; background: var(--enji); color: #fff3e0; font-family: var(--f-min); font-weight: 700; font-size: .86rem; letter-spacing: .24em; white-space: nowrap; box-shadow: 0 6px 16px rgba(60, 20, 20, .25); }
.duo__side > div { padding: 12px 2px; border-bottom: 1px solid var(--rule); }
.duo__side dt { font-family: var(--f-min); font-weight: 700; font-size: .74rem; letter-spacing: .24em; color: var(--c); }
.duo__side dd { margin-top: 2px; font-family: var(--f-min); font-weight: 600; font-size: clamp(.98rem, 1.35vw, 1.14rem); letter-spacing: .08em; line-height: 1.7; color: var(--ink-3); }
.duo__side .duo__name { border-bottom: 2px solid var(--c); }
.duo__side .duo__name dd { font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: .14em; }
.duo__side--l { text-align: right; }

.chara-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.6vw, 22px); margin-bottom: clamp(36px, 5vw, 64px); }
.chara-nav button { display: grid; justify-items: center; gap: 8px; width: clamp(72px, 9vw, 104px); font-family: var(--f-min); font-weight: 600; font-size: .8rem; letter-spacing: .08em; line-height: 1.4; color: var(--sub); transition: color .3s, transform .3s var(--ease); }
.chara-nav img { width: clamp(60px, 7vw, 84px); height: clamp(60px, 7vw, 84px); border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: color-mix(in srgb, var(--c) 18%, var(--paper)); box-shadow: 0 0 0 1px var(--rule); filter: saturate(.55); opacity: .8; transition: filter .35s, opacity .35s, box-shadow .35s, transform .35s var(--ease); }
.chara-nav button:hover img { filter: none; opacity: 1; transform: translateY(-3px); }
.chara-nav button[aria-selected="true"] { color: var(--text); }
.chara-nav button[aria-selected="true"] img { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--c); background: color-mix(in srgb, var(--c) 34%, var(--paper)); }

.chara-stage { display: grid; }
.chara { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 5.5vw, 88px); align-items: center; }
.chara[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.chara__visual { position: relative; height: clamp(520px, 80vh, 800px); display: flex; justify-content: center; align-items: flex-end; }
.chara__visual::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(86%, 400px); height: 84%; transform: translateX(-50%); border-radius: 999px 999px 6px 6px; background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 32%, var(--paper)), color-mix(in srgb, var(--c) 10%, var(--paper)) 78%, var(--paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.chara__bgname { position: absolute; left: 0; top: 4%; writing-mode: vertical-rl; font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: clamp(4rem, 8vw, 7rem); line-height: 1; letter-spacing: .02em; color: var(--c); opacity: .2; white-space: nowrap; }
.chara__stand { position: relative; height: 98%; width: auto; max-width: none; filter: drop-shadow(0 16px 18px rgba(50, 35, 15, .22)); }
.chara__stand--s { height: 86%; }
.chara__snap { position: absolute; right: 0; bottom: 7%; width: clamp(130px, 15vw, 210px); padding: 6px 6px 8px; background: #fffaf0; box-shadow: 0 10px 26px rgba(50, 35, 15, .26), 0 0 0 1px rgba(60, 40, 15, .08); transform: rotate(4deg); }
.chara__snap::before { content: ""; position: absolute; left: 50%; top: -9px; width: 56px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(228, 205, 150, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.chara.is-active .chara__snap { animation: snapIn .7s var(--ease) .35s both; }
@keyframes snapIn { from { opacity: 0; transform: rotate(9deg) translateY(14px); } to { opacity: 1; transform: rotate(4deg); } }
.chara__role { display: inline-block; padding: 3px 16px 2px; background: var(--c); color: #fff8ea; font-family: var(--f-min); font-weight: 600; font-size: .84rem; letter-spacing: .2em; border-radius: 2px; }
.chara__name { margin-top: 16px; font-family: var(--f-min); font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 3.5rem); letter-spacing: .14em; line-height: 1.3; color: var(--ink-3); }
.chara__name small { display: block; margin-top: 6px; font-family: var(--f-go); font-weight: 500; font-size: .78rem; letter-spacing: .5em; color: var(--sub); }
.chara__quote { position: relative; margin: clamp(22px, 3vw, 34px) 0; padding: 4px 0 4px 1.3em; border-left: 3px solid var(--c); font-family: var(--f-min); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.8; letter-spacing: .1em; color: var(--ink-3); }
.chara__quote::before { content: "「"; color: var(--c); margin-left: -.4em; }
.chara__quote::after { content: "」"; color: var(--c); }
.chara__text { font-size: .96rem; line-height: 2.2; letter-spacing: .05em; }
.chara__prof { margin-top: 24px; border-top: 1px solid var(--rule); font-size: .88rem; line-height: 1.8; }
.chara__prof > div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--rule); }
.chara__prof dt { font-family: var(--f-min); font-weight: 700; letter-spacing: .2em; color: var(--c); }
.chara__prof small { color: var(--sub); margin-left: .3em; }
.chara__faces { display: flex; gap: clamp(12px, 2vw, 24px); margin-top: 26px; }
.chara__faces li { display: grid; justify-items: center; gap: 8px; font-family: var(--f-hand); font-weight: 600; font-size: .8rem; letter-spacing: .08em; color: var(--sub); }
.chara__faces img { width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: color-mix(in srgb, var(--c) 22%, var(--paper)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.chara-note { margin-top: clamp(32px, 4vw, 52px); text-align: center; font-size: .78rem; letter-spacing: .08em; color: var(--sub); }

.chara.is-active .chara__stand { animation: standIn .9s var(--ease) both; }
.chara.is-active .chara__visual::before { animation: archIn .9s var(--ease) both; }
.chara.is-active .chara__bgname { animation: fadeRight 1.2s var(--ease) both; }
.chara.is-active .chara__body > * { animation: fadeUp .8s var(--ease) both; }
.chara.is-active .chara__body > :nth-child(2) { animation-delay: .06s; }
.chara.is-active .chara__body > :nth-child(3) { animation-delay: .12s; }
.chara.is-active .chara__body > :nth-child(4) { animation-delay: .18s; }
.chara.is-active .chara__body > :nth-child(5) { animation-delay: .24s; }
.chara.is-active .chara__body > :nth-child(6) { animation-delay: .3s; }
@keyframes standIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes archIn { from { opacity: 0; transform: translateX(-50%) scaleY(.9); transform-origin: bottom; } to { opacity: 1; transform: translateX(-50%); transform-origin: bottom; } }
@keyframes fadeRight { from { opacity: 0; transform: translateY(-24px); } to { opacity: .2; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 各話紹介 ---------- */
.ep { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: start; }
.ep__photo { position: relative; padding: 10px 10px 12px; background: #fffaf0; box-shadow: 0 18px 44px rgba(60, 40, 15, .22), 0 0 0 1px rgba(60, 40, 15, .08); }
.ep__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-3); }
.ep__photo::before { content: ""; position: absolute; left: 50%; top: -11px; width: 92px; height: 24px; transform: translateX(-50%) rotate(-1.5deg); background: rgba(228, 205, 150, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); z-index: 1; }
.ep__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.ep__thumbs button { position: relative; overflow: hidden; border-radius: 2px; opacity: .62; transition: opacity .3s, box-shadow .3s; }
.ep__thumbs button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ep__thumbs button:hover { opacity: 1; }
.ep__thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--enji); }
.ep__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ep__no { font-family: var(--f-min); font-weight: 700; font-size: 1.05rem; letter-spacing: .3em; color: var(--enji); }
.ep__no b { font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: 3.4rem; line-height: 1; letter-spacing: 0; margin: 0 .08em; vertical-align: -.12em; }
.ep__title { margin-top: 10px; font-family: var(--f-min); font-weight: 800; font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1.5; letter-spacing: .1em; color: var(--ink-3); }
.ep__title span, .ledger__row .ti span, .upnext__t span { display: inline-block; }
.ep__catch { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); font-family: var(--f-min); font-weight: 600; font-size: 1.08rem; letter-spacing: .12em; color: var(--enji); }
.ep__story { margin-top: 20px; font-size: .96rem; line-height: 2.2; letter-spacing: .05em; }
.ep__story p + p { margin-top: .5em; }
.ep__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: .84rem; letter-spacing: .08em; color: var(--sub); }
.ep__meta dt { display: inline; font-family: var(--f-min); font-weight: 700; color: var(--ink-3); margin-right: .7em; }
.ep__meta dd { display: inline; font-family: var(--f-hand); font-weight: 600; }
.ep__action { margin-top: 26px; }
.ep.is-swap > * { animation: fadeUp .6s var(--ease) both; }
.ep__title:focus { outline: none; }
.ep { scroll-margin-top: calc(var(--hh) + 24px); }

.ledger { margin-top: clamp(56px, 8vw, 104px); }
.ledger__title { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; font-family: var(--f-min); font-weight: 700; font-size: 1.3rem; letter-spacing: .4em; color: var(--ink-3); }
.ledger__title small { font-family: var(--f-hand); font-weight: 600; font-size: .86rem; letter-spacing: .14em; color: var(--sub); }
.ledger__book { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--sheet); border: 1px solid #c9b88f; border-radius: 3px; box-shadow: 0 2px 0 #d9caa2, 0 4px 0 #cbbb92, 0 22px 50px rgba(60, 40, 15, .2); }
.ledger__book::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 56px; transform: translateX(-50%); background: linear-gradient(to right, rgba(90, 65, 25, 0), rgba(90, 65, 25, .16) 48%, rgba(90, 65, 25, .24) 50%, rgba(90, 65, 25, .16) 52%, rgba(90, 65, 25, 0)); pointer-events: none; }
.ledger__page { padding: 22px clamp(16px, 2.6vw, 34px) 28px; }
.ledger__cap { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; font-family: var(--f-hand); font-weight: 600; font-size: .86rem; letter-spacing: .16em; color: var(--sub); border-bottom: 2px solid rgba(63, 83, 104, .55); }
.ledger__th, .ledger__row { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) 6.6rem; align-items: center; }
.ledger__th { font-family: var(--f-min); font-weight: 700; font-size: .72rem; letter-spacing: .3em; color: var(--blue); border-bottom: 1px solid rgba(63, 83, 104, .55); }
.ledger__th span, .ledger__row > span { padding: 0 10px; }
.ledger__th span { padding-top: 7px; padding-bottom: 6px; }
.ledger__th span + span, .ledger__row > span + span { border-left: 1px solid rgba(154, 45, 59, .3); }
.ledger__row { width: 100%; min-height: 50px; text-align: left; border-bottom: 1px solid rgba(63, 83, 104, .24); font-family: var(--f-hand); font-weight: 600; font-size: 1.02rem; letter-spacing: .08em; color: var(--ink-3); transition: background-color .3s; }
.ledger__row > span { display: flex; align-items: center; min-height: 50px; }
.ledger__row .no { position: relative; font-size: .9rem; color: var(--sub); white-space: nowrap; padding-left: 16px; }
.ledger__th span:first-child { padding-left: 16px; }
.ledger__row .ti { flex-wrap: wrap; align-content: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.5; }
.ledger__row .ti span { white-space: nowrap; }
.ledger__row .st { justify-content: center; padding: 0 4px; }
.ledger__row .stamp { font-size: .68rem; }
.ledger__row.is-stored { min-height: 36px; color: #b7ab92; }
.ledger__row.is-stored > span { min-height: 36px; }
.ledger__row.is-stored .no { font-size: .82rem; }
.ledger__row.is-stored .stamp { border: 0; outline: 0; padding: 0; transform: none; font-family: var(--f-hand); font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-indent: .2em; opacity: .75; }
.ledger__row.is-stored .ti::before { content: ""; width: min(60%, 9em); border-top: 1px dashed currentColor; }
button.ledger__row:hover { background: rgba(234, 167, 85, .16); }
button.ledger__row[aria-current="true"] { background: rgba(234, 167, 85, .24); }
button.ledger__row[aria-current="true"] .no::before { content: ""; position: absolute; left: 4px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 6px solid var(--enji); }
.ledger__more { display: none; }
.ledger__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; }
.ledger__legend .stamp { font-size: .68rem; }
.ledger__legend small { font-size: .8rem; letter-spacing: .06em; color: var(--sub); }

/* ---------- 映像 ---------- */
.movie { overflow: hidden; }
.movie::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ink), rgba(22, 18, 15, .78) 30%, rgba(22, 18, 15, .86) 70%, var(--ink)), url(../img/room-evening.webp) center / cover; opacity: .9; }
.movie__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "player ." "player intro" "player rest" "player .."; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(28px, 6vw, 96px); row-gap: 0; align-items: start; justify-content: center; }
.movie__intro { grid-area: intro; }
.movie__grid .player { grid-area: player; }
.movie__rest { grid-area: rest; }
.player { position: relative; width: min(340px, 78vw); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 236, 196, .22), 0 30px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(234, 167, 85, .16); }
.player__btn { position: absolute; inset: 0; width: 100%; height: 100%; }
.player__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .4s; }
.player__btn:hover img { transform: scale(1.04); filter: brightness(1.08); }
.player__play { position: absolute; left: 50%; top: 72%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: rgba(234, 167, 85, .94); color: var(--ink); box-shadow: 0 0 0 10px rgba(234, 167, 85, .22); transition: transform .4s var(--ease), box-shadow .4s; }
.player__play svg { width: 34px; height: 34px; margin-left: 4px; }
.player__btn:hover .player__play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(234, 167, 85, .16); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.movie__kind { font-family: var(--f-en); font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: .08em; color: var(--amber); }
.movie__kind span { font-style: normal; font-size: .9rem; opacity: .7; margin-left: .4em; }
.movie__title { margin: 10px 0 24px; font-family: var(--f-min); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.6; letter-spacing: .12em; }
.movie__intro > p:not(.movie__kind), .movie__rest > p { max-width: 34em; font-size: .95rem; line-height: 2.2; letter-spacing: .06em; color: rgba(255, 236, 196, .85); }
.movie__small { margin-top: 10px; font-size: .78rem !important; opacity: .6; }
.movie__links { margin-top: 28px; }
.upnext { margin-top: 40px; max-width: 34em; border-top: 1px solid rgba(255, 236, 196, .18); }
.upnext li { display: grid; grid-template-columns: 4em 1fr auto; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid rgba(255, 236, 196, .18); }
.upnext__no { font-family: var(--f-min); font-weight: 600; font-size: .84rem; letter-spacing: .16em; color: var(--cream-2); }
.upnext__t { font-family: var(--f-min); font-weight: 600; font-size: 1.02rem; letter-spacing: .1em; }
.sec--dark .stamp--soon { color: var(--amber); }
.sec--dark .stamp--making { color: #9db4cc; }
.sec--dark .stamp--public { color: #e88a96; }
a.upnext__t:hover { color: var(--amber); }

/* ---------- AI制作について ---------- */
.about__lead { font-family: var(--f-min); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.7; letter-spacing: .12em; color: var(--ink-3); }
.about__text { margin-top: 18px; font-size: 1rem; line-height: 2.2; letter-spacing: .06em; }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(32px, 4vw, 52px); }
.card { padding: 26px 28px 28px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--enji); border-radius: 2px; }
.card:nth-child(2) { border-top-color: var(--amber-d); }
.card--wide { grid-column: 1 / -1; border-top-color: var(--blue); }
.card h3 { font-family: var(--f-min); font-weight: 700; font-size: 1.08rem; letter-spacing: .2em; color: var(--ink-3); }
.card ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.card li { padding: 5px 18px 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-family: var(--f-min); font-weight: 600; font-size: .95rem; letter-spacing: .16em; }
.card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 12px; font-size: .92rem; }
.card dl > div { display: grid; grid-template-columns: 5em 1fr; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
.card dt { font-family: var(--f-min); font-weight: 700; letter-spacing: .2em; color: var(--blue); }
.about__say { margin-top: clamp(36px, 5vw, 56px); padding: 26px clamp(20px, 3.4vw, 40px) 24px; border-left: 3px solid var(--enji); background: rgba(255, 250, 240, .7); }
.about__say h3 { font-family: var(--f-min); font-weight: 700; font-size: .9rem; letter-spacing: .3em; color: var(--enji); }
.about__say p { margin-top: 10px; font-family: var(--f-min); font-weight: 500; font-size: 1.04rem; line-height: 2.2; letter-spacing: .08em; color: var(--ink-3); }
.about__say .about__sign { margin-top: 6px; text-align: right; font-weight: 700; letter-spacing: .2em; }

/* ---------- スタッフ・キャスト ---------- */
.staff { background: radial-gradient(80% 50% at 15% 100%, rgba(63, 83, 104, .22), rgba(63, 83, 104, 0) 60%), var(--ink); }
.staff__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
.credit__h { font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--amber); margin-bottom: 18px; }
.credit--wide { grid-column: 1 / -1; }
.credit--wide dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 88px); }
.credit dl > div { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 236, 196, .13); }
.credit dt { flex: none; font-size: .8rem; letter-spacing: .12em; color: rgba(255, 236, 196, .62); }
.credit dt::after { content: none; }
.credit dd { flex: 1; text-align: right; font-family: var(--f-min); font-weight: 600; font-size: 1.04rem; letter-spacing: .1em; line-height: 1.6; }
.credit dd small { display: block; font-family: var(--f-go); font-weight: 400; font-size: .72rem; letter-spacing: .1em; opacity: .62; }

/* ---------- 流れる帯 ---------- */
.marquee { position: relative; z-index: 1; overflow: hidden; padding: 18px 0; border-top: 1px solid rgba(255, 236, 196, .12); border-bottom: 1px solid rgba(255, 236, 196, .12); background: var(--ink); }
.marquee__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); width: max-content; animation: marquee 56s linear infinite; font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.2; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(234, 167, 85, .55); }
.marquee__track .ja { font-family: var(--f-min); font-style: normal; font-weight: 700; font-size: .78em; letter-spacing: .14em; }
.marquee__track svg { flex: none; width: .24em; height: .48em; color: rgba(234, 167, 85, .7); transform: rotate(40deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- フッター ---------- */
.footer { position: relative; background: var(--ink); color: var(--cream); text-align: center; overflow: hidden; }
.footer__visual { position: absolute; inset: 0; top: 0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(22, 18, 15, .55) 30%, rgba(22, 18, 15, .78) 62%, var(--ink) 92%), url(../img/hero-2.webp) 50% 30% / cover; }
.footer__inner { position: relative; width: min(820px, 100% - 48px); margin-inline: auto; padding: clamp(96px, 14vw, 190px) 0 40px; }
.footer__lead { font-family: var(--f-min); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: .2em; line-height: 1.8; margin-bottom: 30px; text-shadow: 0 0 24px rgba(18, 12, 8, .8); }
.footer__snsh { margin-top: 48px; font-family: var(--f-min); font-weight: 600; font-size: .78rem; letter-spacing: .5em; text-indent: .5em; color: var(--cream-2); }
.sns--footer { justify-content: center; gap: clamp(10px, 3vw, 30px); margin-top: 10px; }
.sns--footer a { width: auto; height: 44px; padding: 0 14px; display: inline-flex; gap: 8px; border-radius: 999px; font-family: var(--f-en); font-weight: 600; font-size: 1.02rem; letter-spacing: .08em; }
.sns--footer a:hover { background: rgba(255, 236, 196, .14); }
.footer__logo { margin-top: clamp(64px, 9vw, 110px); font-family: var(--f-min); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: .22em; }
.footer__hash { margin-top: 6px; font-size: .82rem; letter-spacing: .2em; color: var(--cream-2); }
.footer__notes { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 236, 196, .14); font-size: .8rem; line-height: 2; letter-spacing: .04em; color: rgba(255, 236, 196, .72); text-align: left; }
.footer__notes li { padding-left: 1em; text-indent: -1em; }
.footer__notes li::before { content: "・"; }
.footer__copy { margin-top: 26px; font-family: var(--f-en); font-size: .9rem; letter-spacing: .12em; color: rgba(255, 236, 196, .7); }

.totop { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(22, 18, 15, .85); color: var(--amber); box-shadow: 0 0 0 1px rgba(234, 167, 85, .4), 0 8px 24px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .4s var(--ease), visibility .4s, background-color .3s, color .3s; }
.totop.is-show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--amber); color: var(--ink); }
.totop svg { width: 11px; height: 22px; }

/* =====================================================================
   画面幅ごとの調整
   ===================================================================== */
@media (max-width: 1220px) {
  :root { --hh: 64px; }
  .menu-btn { display: inline-flex; position: relative; z-index: 2; }
  .header__logo { position: relative; z-index: 2; }
  .gnav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: stretch; gap: 28px; padding: 88px clamp(28px, 8vw, 96px) 40px; background: linear-gradient(rgba(22, 18, 15, .93), rgba(22, 18, 15, .97)), url(../img/room-evening.webp) center / cover; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; overflow-y: auto; }
  .menu-open .gnav { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; max-width: 560px; width: 100%; margin-inline: auto; }
  .gnav__list li { border-bottom: 1px solid rgba(255, 236, 196, .14); opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s var(--ease); }
  .menu-open .gnav__list li { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .045s); }
  .gnav__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: clamp(10px, 1.9vh, 18px) 4px; }
  .gnav__list a::after { content: none; }
  .gnav__en { font-size: clamp(1.5rem, 3.6vh, 2rem); }
  .gnav__ja { font-size: .74rem; margin: 0; }
  .sns--nav { justify-content: center; gap: 14px; }
  .sns--nav a { width: 48px; height: 48px; border: 1px solid rgba(255, 236, 196, .3); }
  .menu-open { overflow: hidden; }
}

@media (max-width: 960px) {
  .intro__grid { grid-template-columns: auto minmax(0, 1fr); }
  .intro__prop { grid-column: 1 / -1; }
  .intro__prop img { width: 200px; margin-inline: auto; }
  .scene, .scene--rev { grid-template-columns: 1fr; }
  .scene--rev .scene__view { order: 0; }
  .chara { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 28px; }
  .ep { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .pc { display: none; }
  .sp { display: inline; }
  .sec__inner, .sec__inner--narrow, .news__inner { width: calc(100% - 40px); }
  .sec { padding: 64px 0 68px; }
  .sec-head { margin-bottom: 32px; }

  /* ファーストビュー：上に絵、下に題字 */
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 46px; }
  .hero__slides { inset: 0 0 auto 0; height: min(66svh, 128vw); }
  .hero__slide img { object-position: 50% 30%; }
  .hero__shade { background: linear-gradient(to bottom, rgba(18, 12, 8, .55) 0%, rgba(18, 12, 8, 0) 14%), linear-gradient(to top, var(--ink) 0%, var(--ink) calc(100% - min(66svh, 128vw) + 2px), rgba(22, 18, 15, .82) calc(100% - min(66svh, 128vw) + 9svh), rgba(22, 18, 15, 0) calc(100% - min(66svh, 128vw) + 30svh)); }
  .hero__glow { background: radial-gradient(90% 40% at 50% 26%, rgba(255, 190, 110, .2), rgba(255, 190, 110, 0) 70%); }
  .hero__title { position: relative; right: auto; top: auto; order: 1; display: block; margin-top: min(40svh, 84vw); }
  .logo { writing-mode: horizontal-tb; font-size: clamp(2.6rem, 12.6vw, 4rem); line-height: 1.34; letter-spacing: .06em; }
  .logo__l--2 { margin-top: 0; padding-left: 1.5em; }
  .hero__en { writing-mode: horizontal-tb; margin: 10px 0 0 2px; padding: 0 0 0 46px; font-size: .92rem; }
  .hero__en::before { left: 0; top: 50%; width: 34px; height: 1px; }
  .seal { position: absolute; right: 2px; top: .3em; margin: 0; font-size: .8rem; }
  .hero__copy { position: relative; left: auto; top: auto; order: 2; writing-mode: horizontal-tb; margin-top: 20px; font-size: .98rem; letter-spacing: .18em; line-height: 1.95; }
  .hero__copy span:nth-child(2) { margin-top: 0; }
  .hero__foot { position: relative; left: auto; bottom: auto; order: 3; margin-top: 22px; gap: 10px; }
  .hero__meta { font-size: .7rem; letter-spacing: .14em; }
  .hero__status { font-size: .92rem; letter-spacing: .04em; }
  .hero__status em { display: inline-block; margin: 0 0 0 .3em; padding: .05em .5em; letter-spacing: .12em; text-indent: .12em; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1 1 0; gap: 6px; padding: 10px 8px; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
  .hero__cta .btn svg { width: 17px; height: 17px; }
  .hero__scroll { display: none; }
  .hero__ctrl { right: auto; left: 50%; bottom: 4px; transform: translateX(-50%); gap: 0; }
  .hero__dot { width: 30px; }
  .hero__pause { width: 28px; height: 28px; margin-left: 4px; }

  .news__inner { grid-template-columns: 1fr; gap: 18px; }
  .news__head { display: flex; align-items: baseline; gap: 16px; }
  .news__en { font-size: 2.2rem; }
  .news__item { grid-template-columns: auto auto 1fr; gap: 4px 12px; padding: 14px 2px; }
  .news__text { grid-column: 1 / -1; }
  a.news__item { grid-template-columns: auto auto 1fr auto; }
  a.news__item .news__text { grid-column: 1 / 4; }
  a.news__item .news__arrow { grid-column: 4; grid-row: 1 / 3; opacity: 1; transform: none; }

  .intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .intro__catch { writing-mode: horizontal-tb; padding: 0 0 0 1em; font-size: clamp(1.25rem, 5.6vw, 1.55rem); line-height: 1.8; letter-spacing: .12em; }
  .intro__catch::before { top: .72em; right: auto; left: 0; }
  .intro__catch span:nth-child(2) { margin-top: 0; }
  .intro__body { line-height: 2.3; letter-spacing: .05em; }
  .intro__prop img { width: 170px; }

  .scene__title { margin-bottom: 14px; }
  .scene__tabs button { width: 44px; height: 44px; }

  .duo { grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 20px 0 0; align-items: start; }
  .duo__fig { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(62vw, 250px); margin-bottom: 30px; }
  .duo__side--l { text-align: left; }
  .duo__pc { display: none; }
  .duo__side dd { font-size: .92rem; letter-spacing: .04em; }
  .duo__side .duo__name dd { font-size: 1.12rem; letter-spacing: .08em; }
  .chara-nav { position: sticky; top: var(--hh); z-index: 5; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; margin: 0 -20px 28px; padding: 10px 14px 8px; overflow-x: auto; background: rgba(237, 227, 203, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .chara-nav::-webkit-scrollbar { display: none; }
  .chara-nav { justify-content: space-between; }
  .chara-nav button { flex: 1 0 56px; width: auto; gap: 4px; font-size: .62rem; letter-spacing: 0; white-space: nowrap; }
  .chara-nav img { width: 44px; height: 44px; }
  .chara-stage { scroll-margin-top: calc(var(--hh) + 96px); }
  .chara[hidden] { display: none; }
  .chara { grid-template-columns: 1fr; gap: 26px; }
  .chara__visual { height: min(118vw, 520px); }
  .chara__bgname { font-size: 4.2rem; }
  .chara__name { text-align: left; }
  .chara__faces { gap: 18px; }

  .ep__thumbs { gap: 6px; }
  .ep__no b { font-size: 2.8rem; }
  .ledger__title { flex-direction: column; gap: 4px; }
  .ledger.is-collapsed .is-extra { display: none; }
  .ledger__more { display: block; width: 100%; min-height: 52px; margin-top: 14px; border: 1px solid #c9b88f; border-radius: 3px; background: var(--sheet); font-family: var(--f-min); font-weight: 700; font-size: .92rem; letter-spacing: .2em; color: var(--ink-3); }
  .ledger__more::after { content: "＋"; margin-left: .6em; color: var(--enji); }
  .ledger__more[aria-expanded="true"]::after { content: "－"; }
  .quick { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); border-top: 1px solid rgba(255, 236, 196, .12); }
  .quick a { display: grid; justify-items: center; gap: 2px; padding: 12px 2px 11px; color: var(--cream); font-size: .66rem; letter-spacing: .1em; line-height: 1.4; }
  .quick a + a { border-left: 1px solid rgba(255, 236, 196, .12); }
  .quick span { font-family: var(--f-en); font-style: italic; font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; color: var(--amber); }
  .ledger__book { grid-template-columns: 1fr; }
  .ledger__book::before { content: none; }
  .ledger__page + .ledger__page { border-top: 1px dashed #c9b88f; }
  .ledger__page { padding: 18px 14px 20px; }
  .ledger__th, .ledger__row { grid-template-columns: 5.9rem minmax(0, 1fr) 5.2rem; }
  .ledger__row .no { font-size: .8rem; letter-spacing: .02em; padding-left: 12px; padding-right: 4px; }
  .ledger__th span:first-child { padding-left: 12px; }
  .ledger__row { font-size: .94rem; }
  .ledger__th span, .ledger__row > span { padding: 0 8px; }

  .movie__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "player" "rest"; row-gap: 28px; justify-items: center; }
  .movie__intro, .movie__rest { width: 100%; padding-top: 0; }
  .player { width: min(300px, 72vw); }
  .about__cards { grid-template-columns: 1fr; }
  .card { padding: 22px 20px 24px; }
  .card dl { grid-template-columns: 1fr; }
  .staff__grid { grid-template-columns: 1fr; }
  .credit--wide dl { grid-template-columns: 1fr; }
  .credit dl > div { padding: 8px 0; }
  .credit__h { margin-bottom: 10px; }
  .staff__grid { gap: 36px; }
  .credit .credit__stack { flex-direction: column; gap: 2px; }
  .credit .credit__stack dd { text-align: left; }
  .totop { right: 12px; bottom: 12px; width: 46px; height: 46px; }
  .footer__inner { padding-bottom: 76px; }
  .chara__snap { width: 128px; bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .logo i { opacity: 1; transform: none; filter: none; }
  .hero__dust { display: none; }
}