/* =========================================================
   余白 ― style.css
   色・文字の大きさは :root の変数でまとめて変えられます。
   ========================================================= */

:root {
  /* 色 */
  --paper: #f3efe8;        /* 生成り（白） */
  --paper-2: #e9e4db;
  --ink: #141414;          /* 墨（黒） */
  --night: #0e0e0f;        /* 夜 */
  --night-2: #161617;      /* 濃いグレー */
  --night-3: #1e1e20;
  --ink-gray: #77726b;     /* 墨のグレー */
  --mist: #b9b4ab;         /* 夜の上の文字（弱） */
  --white: #efece6;        /* 夜の上の文字（強） */
  --line: rgba(239, 236, 230, .14);
  --line-paper: rgba(20, 20, 20, .14);
  --lantern: #d4a160;      /* 暇の提灯のあかり（ごく控えめに） */
  --akari: #9a4a42;        /* 燈の赤い糸（STORYだけ） */

  /* 文字 */
  --f-min: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-en: "Cormorant Garamond", "Times New Roman", serif;

  /* 余白 */
  --gutter: clamp(24px, 6vw, 72px);
  --sec-gap: clamp(140px, 26vw, 300px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--white);
  font-family: var(--f-min);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .08em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--lantern); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; font-size: 13px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- 共通の見出し ---------- */
.sec-head { text-align: center; margin-bottom: clamp(64px, 12vw, 120px); }
.sec-en {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: .42em;
  color: var(--ink-gray);
  margin-bottom: 10px;
  padding-left: .42em;
}
.sec-ja { font-size: clamp(20px, 5.4vw, 26px); letter-spacing: .32em; padding-left: .32em; }
.mini-h {
  font-size: 12px; letter-spacing: .3em; color: var(--mist); font-weight: 400;
  display: flex; align-items: center; gap: 14px;
}
.mini-h::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }

/* ---------- 静かに現れる ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), filter 1.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 目次 ---------- */
.menu-btn {
  position: fixed; z-index: 60; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 48px; height: 48px; display: grid; place-items: center;
  mix-blend-mode: difference; color: #fff;
}
.menu-btn__lines, .menu-btn__lines::before { display: block; width: 24px; height: 1px; background: currentColor; transition: transform .6s var(--ease), width .6s var(--ease); }
.menu-btn__lines { position: relative; transform: translateY(-4px); }
.menu-btn__lines::before { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; }
.menu-btn[aria-expanded="true"] { mix-blend-mode: normal; color: var(--white); }
.menu-btn[aria-expanded="true"] .menu-btn__lines { transform: rotate(25deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines::before { transform: rotate(-50deg); top: 0; left: 0; width: 24px; }

.menu {
  position: fixed; inset: 0; z-index: 55; background: rgba(14, 14, 15, .97);
  display: grid; place-items: center; opacity: 0; transition: opacity .6s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu ol { display: grid; gap: 22px; text-align: center; }
.menu a { text-decoration: none; display: grid; gap: 2px; }
.menu a span { font-size: 17px; letter-spacing: .3em; padding-left: .3em; }
.menu a i { font-style: normal; font-family: var(--f-en); font-size: 11px; letter-spacing: .4em; color: var(--ink-gray); padding-left: .4em; }
.menu a:hover span { color: var(--lantern); }

/* =========================================================
   TOP
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center; align-content: center;
  padding: 80px var(--gutter) 120px; overflow: hidden;
  text-align: center;
}
.hero__wash {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(20,20,20,.05), transparent 70%),
    radial-gradient(30% 26% at 84% 76%, rgba(20,20,20,.06), transparent 70%),
    radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.5), transparent 70%);
  animation: drift 38s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } }

.hero__logo { position: relative; width: min(68vw, 440px); }
.hero__logo img { width: 100%; }
.js .hero__logo img { animation: bleed 3.6s var(--ease) .2s both; }
@keyframes bleed {
  0%   { opacity: 0; filter: blur(18px) contrast(.6); transform: scale(1.05); }
  55%  { opacity: .85; filter: blur(3px) contrast(.9); }
  100% { opacity: 1; filter: none; transform: none; }
}
.hero__kana { margin-top: 6px; font-size: 12px; letter-spacing: .9em; padding-left: .9em; color: var(--ink-gray); }
.hero__copy { margin-top: clamp(36px, 9vw, 56px); font-size: 15px; letter-spacing: .26em; line-height: 2.4; color: #3a3835; }
.js .hero__kana { animation: fade 2s var(--ease) 2.4s both; }
.js .hero__copy { animation: fade 2.4s var(--ease) 3s both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hero__cue {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: max(28px, env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 12px; text-decoration: none;
  font-size: 11px; letter-spacing: .4em; color: var(--ink-gray);
}
.hero__cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--ink-gray), transparent); animation: drip 3.2s ease-in-out infinite; transform-origin: top; }
.js .hero__cue { animation: fade 2s var(--ease) 4s both; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* =========================================================
   ABOUT
   ========================================================= */
.about { background: var(--paper); color: var(--ink); padding: var(--sec-gap) 0 0; }
.about .sec-en { color: var(--ink-gray); }
.about__lead { padding: 0 var(--gutter); display: grid; gap: 2.2em; text-align: center; font-size: 15px; line-height: 2.4; color: #2b2a28; }
.about__scene { margin: clamp(110px, 20vw, 200px) 0; }
.about__scene img {
  width: 100%; max-height: 92vh; object-fit: cover;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 50%, #000 52%, transparent 78%);
          mask-image: radial-gradient(120% 92% at 50% 50%, #000 52%, transparent 78%);
}
.about__lines { padding: 0 var(--gutter) clamp(100px, 18vw, 180px); display: grid; gap: 90px; max-width: 980px; margin: 0 auto; }
.line-card { text-align: center; }
.line-card__tag { font-size: 11px; letter-spacing: .4em; color: var(--ink-gray); padding-left: .4em; }
.line-card__pair { font-size: 24px; letter-spacing: .3em; margin: 10px 0 26px; padding-left: .3em; }
.line-card__pair span { font-family: var(--f-en); font-size: 16px; color: var(--ink-gray); margin: 0 .2em; }
.line-card p:last-child { font-size: 14px; line-height: 2.3; color: #3a3835; }

/* ---------- 夕暮れ ---------- */
.dusk {
  height: 120vh; display: grid; place-items: center;
  background: linear-gradient(var(--paper) 0%, #cfc9bf 18%, #6b6761 46%, #222224 74%, var(--night) 100%);
  padding: 0 var(--gutter);
}
.dusk__text { font-size: 14px; letter-spacing: .3em; line-height: 2.6; text-align: center; color: var(--paper); text-shadow: 0 0 30px rgba(0,0,0,.25); }

/* =========================================================
   CHARACTER
   ========================================================= */
.chars { padding: clamp(80px, 14vw, 160px) var(--gutter) var(--sec-gap); background: var(--night); }
.pair + .pair { margin-top: clamp(110px, 20vw, 170px); }
.pair__head { text-align: center; margin-bottom: 34px; }
.pair__tag { font-size: 13px; letter-spacing: .36em; padding-left: .36em; }
.pair__desc { font-size: 11px; letter-spacing: .2em; color: var(--ink-gray); margin-top: 4px; }
.pair__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pair__cards > :nth-child(2) { margin-top: 48px; }

.c-card { position: relative; display: block; width: 100%; text-align: left; overflow: hidden; }
.c-card__img { aspect-ratio: 3 / 4.4; overflow: hidden; background: var(--night-3); }
.c-card__img img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82);
  transition: transform 2.4s var(--ease), filter 1.4s var(--ease);
  animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.055) translateY(-0.6%); } }
.c-card:hover .c-card__img img, .c-card:focus-visible .c-card__img img { filter: saturate(.95) brightness(.95); }
.c-card__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 14px 14px;
  background: linear-gradient(transparent, rgba(10,10,11,.85));
  display: flex; align-items: baseline; gap: 10px;
}
.c-card__name b { font-weight: 500; font-size: 20px; letter-spacing: .14em; }
.c-card__name small { font-size: 11px; color: var(--mist); letter-spacing: .2em; }
.c-card__more { position: absolute; top: 12px; right: 12px; font-family: var(--f-en); font-size: 18px; color: var(--mist); line-height: 1; }

/* ---------- キャラクター詳細 ---------- */
.char-dialog {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: var(--night); color: var(--white);
}
.char-dialog::backdrop { background: rgba(8, 8, 9, .8); }
.char-dialog[open] { animation: fade .8s var(--ease); }
.char-dialog__inner { min-height: 100%; padding: 72px var(--gutter) 64px; display: grid; gap: 40px; align-content: start; max-width: 980px; margin: 0 auto; }
.char-dialog__close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; font-size: 26px; font-weight: 300; color: var(--mist); }
.char-dialog__fig { width: min(62vw, 300px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.char-dialog__fig img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.char-dialog__line { font-size: 11px; letter-spacing: .36em; color: var(--ink-gray); }
.char-dialog__name { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 26px; }
.char-dialog__name > span:first-child { font-size: 34px; letter-spacing: .12em; }
.char-dialog__kana { font-size: 13px; color: var(--mist); letter-spacing: .3em; }
.char-dialog__quote { font-size: 17px; line-height: 2.2; letter-spacing: .16em; margin-bottom: 30px; padding-left: 18px; border-left: 1px solid var(--line); }
.char-dialog__intro { font-size: 14px; line-height: 2.3; color: #d7d3cc; }
.char-dialog__traits { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.char-dialog__traits li { font-size: 12px; letter-spacing: .12em; padding: 3px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--mist); line-height: 1.9; }
.char-dialog__role { font-size: 13px; line-height: 2.2; color: var(--mist); }
.char-dialog__hint { font-size: 13px; line-height: 2.2; color: var(--ink-gray); margin-top: 26px; }
.char-dialog__hint::before { content: "― "; }
.char-dialog[data-line="story"] .char-dialog__quote { border-left-color: var(--akari); }

/* =========================================================
   WORDS
   ========================================================= */
.words { background: linear-gradient(var(--night), var(--night-2) 30%); padding: 0 var(--gutter) var(--sec-gap); }
.words__grid { display: grid; gap: 110px; max-width: 980px; margin: 0 auto; }

.today { display: grid; justify-items: center; gap: 18px; }
.today__date { font-family: var(--f-en); font-size: 13px; letter-spacing: .3em; color: var(--ink-gray); }
.today__text {
  writing-mode: vertical-rl; white-space: pre-line;
  font-size: 16px; line-height: 2.4; letter-spacing: .3em; min-height: 13em;
  margin-top: 10px;
}

.fragment { display: grid; justify-items: center; gap: 18px; }
.fragment__btn {
  width: 100%; min-height: 220px; display: grid; place-content: center; gap: 20px; text-align: center;
  padding: 40px 20px; position: relative;
}
.fragment__btn::before {
  content: ""; position: absolute; inset: 10% 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239,236,230,.06), transparent);
  filter: blur(6px); pointer-events: none;
  animation: inkpulse 10s ease-in-out infinite alternate;
}
@keyframes inkpulse { from { transform: scale(.94); opacity: .6; } to { transform: scale(1.06); opacity: 1; } }
.fragment__text { white-space: pre-line; font-size: 18px; line-height: 2.2; letter-spacing: .18em; transition: opacity .9s var(--ease), filter .9s var(--ease); }
.fragment__from { font-size: 12px; color: var(--ink-gray); letter-spacing: .3em; transition: opacity .9s var(--ease); }
.fragment__from::before { content: "― "; }
.fragment.is-changing .fragment__text, .fragment.is-changing .fragment__from { opacity: 0; filter: blur(4px); }
.fragment__hint { font-size: 11px; color: var(--ink-gray); letter-spacing: .24em; }

.notes { max-width: 720px; margin: 140px auto 0; }
.notes__list { margin-top: 30px; border-top: 1px solid var(--line); }
.notes__list li { border-bottom: 1px solid var(--line); }
.note-item { display: grid; gap: 8px; padding: 28px 4px; text-decoration: none; }
.note-item__meta { font-size: 11px; color: var(--ink-gray); letter-spacing: .2em; display: flex; gap: 14px; }
.note-item__title { font-size: 16px; letter-spacing: .1em; line-height: 1.9; }
.note-item__excerpt { font-size: 13px; color: var(--mist); line-height: 2.1; }
.note-item__go { font-size: 12px; color: var(--mist); letter-spacing: .2em; margin-top: 4px; }
a.note-item:hover .note-item__title { color: var(--lantern); }
.notes__empty { padding: 44px 4px; font-size: 13px; color: var(--ink-gray); letter-spacing: .2em; text-align: center; }
.notes__more { margin-top: 30px; text-align: center; font-size: 13px; letter-spacing: .2em; }
.notes__more a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* =========================================================
   STORY 入口
   ========================================================= */
.story-gate { position: relative; min-height: 120vh; min-height: 120svh; display: grid; place-items: center; overflow: hidden; background: #070707; isolation: isolate; }
.story-gate__bg { position: absolute; inset: 0; z-index: -1; }
.story-gate__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(.7); animation: drift 40s ease-in-out infinite alternate; }
.story-gate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 50% 50%, transparent, rgba(7,7,7,.7) 70%), linear-gradient(var(--night-2), transparent 22%, transparent 78%, var(--night-2)); }
.story-gate__inner { text-align: center; padding: 0 var(--gutter); display: grid; justify-items: center; }
.story-gate__inner .sec-en { color: var(--mist); }
.story-gate__title { display: flex; flex-direction: column; align-items: center; font-size: clamp(40px, 12vw, 64px); letter-spacing: .3em; margin: 30px 0 34px; line-height: 1.2; text-shadow: 0 0 40px rgba(0,0,0,.6); }
.story-gate__title .dot { font-size: .4em; color: var(--mist); margin: .5em 0; }
.story-gate__title, .st-hero__title { letter-spacing: 0 !important; }
.story-gate__lead { font-size: 14px; letter-spacing: .26em; line-height: 2.5; color: #ddd8d0; margin-bottom: 54px; }
.gate-btn {
  display: inline-block; text-decoration: none; font-size: 14px; letter-spacing: .4em; padding: 16px 30px 16px calc(30px + .4em);
  border: 1px solid rgba(239,236,230,.35); position: relative; overflow: hidden;
  transition: border-color .8s var(--ease), color .8s var(--ease);
}
.gate-btn::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--akari); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.gate-btn:hover { border-color: rgba(239,236,230,.7); }
.gate-btn:hover::before { transform: scaleX(1); }

/* =========================================================
   GOODS
   ========================================================= */
.goods { background: var(--night-2); padding: var(--sec-gap) var(--gutter); text-align: center; }
.goods__lead { font-size: 14px; letter-spacing: .2em; line-height: 2.4; color: var(--mist); }
.goods__list { margin: 60px auto 0; max-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.goods__list li { background: var(--night-2); padding: 26px 10px; display: grid; gap: 4px; }
.goods__list b { font-weight: 400; font-size: 14px; letter-spacing: .14em; }
.goods__list small { font-family: var(--f-en); font-size: 11px; letter-spacing: .3em; color: var(--ink-gray); }
.goods__list a { text-decoration: none; }

/* =========================================================
   LINKS
   ========================================================= */
.links { position: relative; padding: var(--sec-gap) var(--gutter) 160px; background: var(--night); isolation: isolate; overflow: hidden; }
.links__bg { position: absolute; inset: 0; z-index: -1; }
.links__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(.4); }
.links::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--night-2), transparent 40%, var(--night) 96%); }
.links__inner { max-width: 560px; margin: 0 auto; }
.links__list { border-top: 1px solid var(--line); }
.links__list li { border-bottom: 1px solid var(--line); }
.link-row { display: flex; align-items: baseline; gap: 14px; padding: 20px 4px; text-decoration: none; }
.link-row__label { font-family: var(--f-en); font-size: 19px; letter-spacing: .08em; }
.link-row__label.ja { font-family: var(--f-min); font-size: 15px; letter-spacing: .16em; }
.link-row__note { font-size: 11px; color: var(--ink-gray); letter-spacing: .2em; }
.link-row__go { margin-left: auto; font-size: 12px; color: var(--mist); letter-spacing: .2em; white-space: nowrap; }
a.link-row:hover .link-row__label { color: var(--lantern); }
.link-row.is-soon { opacity: .5; }
.links__themes { margin-top: 28px; font-size: 12px; color: var(--ink-gray); letter-spacing: .14em; text-align: center; line-height: 2.4; }
.links__themes a { color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--line); margin: 0 .5em; }
.links__contact { margin-top: 60px; text-align: center; font-size: 13px; letter-spacing: .2em; color: var(--mist); }
.links__contact a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }

/* ---------- FOOTER ---------- */
.footer { background: var(--night); text-align: center; padding: 40px var(--gutter) max(60px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 16px; }
.footer__moon { width: 92px; height: 92px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 60px rgba(243,239,232,.12); transition: box-shadow 1.2s var(--ease); }
.footer__moon:hover { box-shadow: 0 0 80px rgba(243,239,232,.24); }
.footer__moon img { width: 78%; mix-blend-mode: multiply; }
.footer__name { font-size: 13px; letter-spacing: .6em; padding-left: .6em; color: var(--mist); }
.footer__copy { font-family: var(--f-en); font-size: 11px; color: var(--ink-gray); letter-spacing: .2em; }

/* =========================================================
   STORY ページ（story.html）
   ========================================================= */
.page-story { background: #0a0a0a; }
.st-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.st-hero__bg { position: absolute; inset: 0; z-index: -1; }
.st-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.75); }
.js .st-hero__bg img { animation: dawn 5s var(--ease) both, drift 40s ease-in-out 5s infinite alternate; }
@keyframes dawn { from { opacity: 0; transform: scale(1.06); filter: blur(10px) saturate(.4); } to { opacity: .55; transform: none; filter: saturate(.75); } }
.st-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 45%, transparent, rgba(10,10,10,.75)), linear-gradient(transparent 70%, #0a0a0a); }
.st-hero__inner { text-align: center; display: grid; justify-items: center; padding: 0 var(--gutter); }
.st-hero__title { display: flex; flex-direction: column; align-items: center; font-size: clamp(46px, 14vw, 76px); letter-spacing: .34em; line-height: 1.2; text-shadow: 0 0 50px rgba(0,0,0,.7); }
.st-hero__title .dot { font-size: .36em; color: var(--mist); margin: .5em 0; }
.st-hero__sub { margin-top: 30px; font-size: 12px; letter-spacing: .4em; color: var(--mist); padding-left: .4em; }
.js .st-hero__title { animation: fade 3s var(--ease) 1.2s both; }
.js .st-hero__sub { animation: fade 2.4s var(--ease) 2.6s both; }

.st-sec { padding: var(--sec-gap) var(--gutter) 0; max-width: 1080px; margin: 0 auto; }
.st-prolog { display: grid; justify-items: center; text-align: center; gap: 2.4em; font-size: 15px; line-height: 2.5; letter-spacing: .2em; color: #ddd8d0; }
.st-prolog .thread { width: 1px; height: 120px; background: linear-gradient(transparent, var(--akari), transparent); }

.st-two { display: grid; gap: 120px; }
.st-figure { display: grid; gap: 34px; }
.st-figure__img { aspect-ratio: 3 / 4; overflow: hidden; }
.st-figure__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.85); }
.st-figure__name { font-size: 26px; letter-spacing: .3em; }
.st-figure__name small { font-size: 12px; color: var(--mist); margin-left: 12px; letter-spacing: .3em; }
.st-figure__quote { font-size: 15px; line-height: 2.3; letter-spacing: .16em; border-left: 1px solid var(--akari); padding-left: 18px; margin-top: 18px; white-space: pre-line; }
.st-figure__note { margin-top: 18px; font-size: 13px; color: var(--mist); line-height: 2.2; white-space: pre-line; }

.st-episodes { text-align: center; }
.st-episodes ul { margin: 40px auto 0; max-width: 560px; border-top: 1px solid var(--line); text-align: left; }
.st-episodes li { border-bottom: 1px solid var(--line); }
.ep-row { display: flex; gap: 18px; align-items: baseline; padding: 22px 4px; text-decoration: none; }
.ep-row__no { font-size: 12px; color: var(--akari); letter-spacing: .2em; white-space: nowrap; }
.ep-row__title { font-size: 15px; letter-spacing: .12em; }
.ep-row__date { margin-left: auto; font-family: var(--f-en); font-size: 12px; color: var(--ink-gray); }
.st-empty { padding: 40px 0; font-size: 13px; color: var(--ink-gray); letter-spacing: .24em; text-align: center; }
.st-notice { margin-top: 70px; font-size: 12px; line-height: 2.2; color: var(--ink-gray); letter-spacing: .14em; text-align: center; }
.st-back { display: inline-block; margin: 140px auto 0; font-size: 13px; letter-spacing: .3em; text-decoration: none; color: var(--mist); border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* =========================================================
   PC：大きな画面では、余白をさらに広く
   ========================================================= */
@media (min-width: 760px) {
  body { font-size: 16px; }
  .hero__copy {
    position: absolute; right: clamp(48px, 12vw, 200px); top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; margin: 0; font-size: 16px; letter-spacing: .4em; line-height: 2.6; text-align: left;
  }
  .js .hero__copy { animation-name: fadeV; }
  @keyframes fadeV { from { opacity: 0; transform: translateY(calc(-50% + 10px)); } to { opacity: 1; transform: translateY(-50%); } }
  .hero__kana { margin-top: 14px; }

  .about__lead { font-size: 16px; }
  .about__lines { grid-template-columns: 1fr 1fr; gap: 0; }
  .about__lines .line-card:first-child { border-right: 1px solid var(--line-paper); }
  .line-card { padding: 20px 40px; }

  .chars { padding-left: clamp(40px, 7vw, 120px); padding-right: clamp(40px, 7vw, 120px); }
  .chars .sec-head { margin-bottom: 120px; }
  .chars { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .chars .sec-head { grid-column: 1 / -1; }
  .pair + .pair { margin-top: 220px; }
  .pair__cards { gap: 20px; }
  .pair__cards > :nth-child(2) { margin-top: 90px; }

  .words__grid { grid-template-columns: 1fr 1.3fr; align-items: center; gap: 60px; }
  .today__text { font-size: 17px; }
  .fragment__text { font-size: 21px; }

  .goods__list { grid-template-columns: repeat(4, 1fr); max-width: 760px; }

  .char-dialog { width: min(1000px, 92vw); height: auto; max-height: 90vh; margin: auto; border: 1px solid var(--line); }
  .char-dialog__inner { grid-template-columns: 320px 1fr; gap: 60px; padding: 80px 70px 70px; align-items: center; }
  .char-dialog__close { position: absolute; }

  .st-two { grid-template-columns: 1fr 1fr; gap: 80px; }
  /* 背景の絵（宵とロゴ）に文字が重ならないよう、右側へ */
  .story-gate, .st-hero { place-items: center end; }
  .story-gate__inner, .st-hero__inner { margin-right: clamp(40px, 11vw, 200px); }
  .st-two > :nth-child(2) { margin-top: 160px; }
}

@media (min-width: 1200px) {
  .sec-head { margin-bottom: 140px; }
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* 白いキャンバスへの入口 */
.canvas-gate{background:#fff;color:#47423d;text-align:center;padding:100px 24px;line-height:2.3}
.canvas-gate__logo{display:block;width:145px;margin:24px auto 28px}
.canvas-gate__logo img{width:100%;height:auto}
.canvas-gate__link{display:inline-block;margin:32px 0 12px;padding:10px 20px;border-bottom:1px solid #aaa;text-decoration:none;color:inherit}
.canvas-gate__note{font-size:12px;color:#777;margin:16px auto;max-width:500px}
@media(max-width:600px){.canvas-gate{padding:72px 20px}.canvas-gate__logo{width:120px}}

.stamp-gate{max-width:780px;margin:42px auto;display:grid;grid-template-columns:160px 1fr;gap:32px;align-items:center;text-align:left;padding:32px;border:1px solid #ffffff25;background:#ffffff05;line-height:2}
.stamp-gate h3{font-size:20px;margin:6px 0 16px;font-weight:500}.stamp-gate p{font-size:14px}.stamp-gate a{display:inline-block;margin-top:16px;color:inherit;border-bottom:1px solid currentColor;text-decoration:none}.stamp-gate small{display:block;font-size:11px;opacity:.7;margin-top:14px}.stamp-gate__faces{display:flex;align-items:center;justify-content:center;gap:8px}.stamp-gate__faces img{width:72px;height:auto}
@media(max-width:600px){.stamp-gate{grid-template-columns:1fr;gap:16px;padding:24px}.stamp-gate__faces{justify-content:flex-start}.stamp-gate__faces img{width:55px}}

/* Four companions introduce the released LINE stickers. */
.stamp-gate__faces{display:grid;grid-template-columns:repeat(2,72px);gap:14px 8px}.stamp-gate__faces img{width:72px;height:94px;object-fit:contain}
@media(max-width:600px){.stamp-gate__faces{grid-template-columns:repeat(4,55px);justify-content:start;gap:8px}.stamp-gate__faces img{width:55px;height:72px}}

/* Four voices and their dated archive. */
.words-intro,.words-period,.words-footnote{text-align:center;line-height:2.2;padding:0 20px}
.words-intro{margin:0 auto 22px;font-size:14px}.words-period{font-size:11px;letter-spacing:.15em;color:var(--mist);margin-bottom:32px}
.four-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto;padding:0 24px}
.word-card{font:inherit;color:var(--white);background:rgba(255,255,255,.025);border:1px solid var(--line);padding:28px;text-align:left;cursor:pointer;min-width:0;transition:background .2s,border-color .2s}
.word-card:hover{background:rgba(255,255,255,.06);border-color:var(--mist)}.word-card:focus-visible,.words-dialog button:focus-visible{outline:2px solid var(--lantern);outline-offset:5px}
.word-card__head{display:flex;align-items:center;gap:18px}.word-card__head img{width:64px;height:80px;object-fit:contain}.word-card__name{font-size:19px;letter-spacing:.15em}.word-card__name small{display:block;font-size:10px;color:var(--mist);margin-top:6px}
.word-card__text{display:block;white-space:pre-line;font-size:clamp(15px,1.5vw,18px);line-height:2.3;min-height:110px;margin:22px 0}.word-card__archive{display:block;font-size:11px;letter-spacing:.12em;color:var(--mist)}
.words-footnote{font-size:11px;color:var(--mist);margin:26px auto 0;max-width:720px}
.words-dialog{background:var(--paper);color:var(--ink);border:0;width:min(600px,calc(100% - 32px));max-height:85vh;padding:32px;overflow:auto}.words-dialog::backdrop{background:rgba(0,0,0,.75)}
.words-dialog form{text-align:right}.words-dialog button{font:inherit;color:inherit;background:none;border:1px solid var(--line-paper);padding:9px 16px;cursor:pointer}.words-dialog h2{font-size:25px;letter-spacing:.15em;margin:20px 0}.words-dialog .sec-en{color:var(--ink-gray)}
#words-history-note{font-size:13px;line-height:2}#words-history-list{list-style:none;padding:0;margin:26px 0}#words-history-list li{padding:24px 0;border-top:1px solid var(--line-paper)}#words-history-list time{font-size:11px;color:var(--ink-gray)}#words-history-list p{white-space:pre-line;line-height:2.2;font-size:17px;margin:12px 0}
@media(max-width:600px){.four-words{grid-template-columns:1fr;gap:16px}.word-card{padding:24px}.word-card__text{min-height:0}.words-dialog{padding:24px}}

/* Reading entrances */
.entry-link{display:inline-block;margin-top:24px;text-underline-offset:6px;line-height:2}.story-entry-note{line-height:2;margin:28px auto;max-width:40em}.story-entry-links{display:flex;justify-content:center;gap:18px 32px;flex-wrap:wrap;margin-top:28px;line-height:2}.story-entry-links a{text-underline-offset:6px}