/* =========================================================
   LUNKER GUILD 公式サイト  css/site.css
   基調: 墨 / 黒鉄 / 和紙 / 古びた金  差し色: 青紫の亀裂
   和文本文は明朝、UIラベルはゴシック、欧文見出しは古典セリフ
   外部フォント・外部CDN・解析タグ: 一切なし
   ========================================================= */

:root{
  --sumi:      #07090c;
  --sumi-2:    #0c0f14;
  --iron:      #171b21;
  --iron-2:    #242a32;
  --iron-line: #2b323b;
  --ash:       #7a8088;
  --washi:     #e9e3d6;
  --washi-dim: #aaa79e;
  --bone:      #e6dcc4;
  --gold:      #c8a25a;
  --gold-deep: #7a6231;
  --gold-hi:   #ebd39a;
  --crack:     #8672ff;
  --glow:      #63cdff;

  --font-latin: Baskerville,"Baskerville Old Face","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-min:   "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,"Noto Serif CJK JP","Noto Serif JP","MS PMincho","MS Mincho",serif;
  --font-got:   "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,"Noto Sans CJK JP","Noto Sans JP",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --nav-h: 58px;
  --pad-x: clamp(20px, 5vw, 56px);
  --inner: 1160px;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
  background:var(--sumi);
}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  background:var(--sumi);
  color:var(--washi);
  font-family:var(--font-min);
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1,"kern" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-width:320px;
}
/* 和紙の粒子（自作テクスチャ・極薄） */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/img/washi-grain.png") repeat;
  background-size:256px 256px;
  opacity:.07;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
figure{ margin:0; }
video{ display:block; }
b{ font-weight:600; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.skip-link{
  position:fixed; left:12px; top:12px; z-index:100;
  transform:translateY(-160%);
  min-height:44px; display:flex; align-items:center;
  padding:10px 14px;
  background:var(--washi); color:var(--sumi);
  font:600 14px/1 var(--font-got);
}
.skip-link:focus{ transform:none; }

main{ position:relative; z-index:1; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:  max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  box-sizing:content-box;
  background:linear-gradient(180deg, rgba(7,9,12,.92), rgba(7,9,12,.72));
  border-bottom:1px solid rgba(200,162,90,.14);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  min-height:44px;
  font-family:var(--font-latin);
  font-size:15px; letter-spacing:.2em;
  color:var(--bone);
  white-space:nowrap;
}
.nav__emblem{ width:34px; height:34px; border-radius:6px; }
.nav__menu{ display:flex; gap:clamp(2px,1.2vw,8px); }
.nav__menu a{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 10px;
  font-family:var(--font-got);
  font-size:13px; letter-spacing:.2em; text-indent:.2em;
  color:var(--washi-dim);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.nav__menu a:hover{ color:var(--gold-hi); border-color:var(--gold-deep); }
.nav__index{ display:none; position:relative; }
.nav__index summary{
  min-width:64px; min-height:44px;
  display:flex; align-items:center; justify-content:flex-end;
  cursor:pointer; list-style:none;
  color:var(--bone); font:500 11px/1 var(--font-latin);
  letter-spacing:.28em;
}
.nav__index summary::-webkit-details-marker{ display:none; }
.nav__index summary::after{
  content:""; width:16px; height:10px; margin-left:9px;
  border-top:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transition:transform .25s ease;
}
.nav__index[open] summary::after{ transform:rotate(90deg); }
.nav__drawer{
  position:fixed;
  top:calc(var(--nav-h) + env(safe-area-inset-top));
  left:0; right:0;
  padding:10px max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left));
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;
  background:rgba(7,9,12,.97);
  border-bottom:1px solid rgba(200,162,90,.2);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.nav__drawer a{
  min-height:48px; display:flex; align-items:center;
  padding:0 16px; color:var(--washi);
  border:1px solid var(--iron-line);
  font-family:var(--font-got); font-size:14px; letter-spacing:.12em;
}
@media (max-width:900px){
  .nav__menu--desktop{ display:none; }
  .nav__index{ display:block; }
}

/* ---------- 共通セクション ---------- */
.section{ position:relative; padding-block:clamp(84px, 12vh, 150px); }
.section__inner{
  position:relative; z-index:2;
  max-width:var(--inner); margin-inline:auto;
  padding-left:  max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
}
.section__tag{
  font-family:var(--font-min);
  font-size:13px; letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:16px;
  display:flex; align-items:center; gap:14px;
}
.section__tag::before{ content:""; width:28px; height:1px; background:var(--gold-deep); }
.section__title{
  font-family:var(--font-latin);
  font-weight:500;
  font-size:clamp(34px, 5.6vw, 62px);
  letter-spacing:.1em;
  line-height:1.15;
  color:var(--bone);
  margin-bottom:22px;
}
.section__lead{
  max-width:34em;
  font-size:clamp(15px, 1.7vw, 17px);
  line-height:2.1;
  color:var(--washi);
  margin-bottom:48px;
}
@media (min-width:1100px){
  .section__inner{ padding-left:calc(var(--pad-x) + 56px); }
  .section__tag{
    position:absolute; left:var(--pad-x); top:.6em;
    writing-mode:vertical-rl; text-orientation:upright;
    margin:0; gap:12px;
    letter-spacing:.22em;
  }
  .section__tag::before{ width:1px; height:34px; }
}

/* reveal（JS有効時のみ隠す → JS無効環境では常に表示） */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 実機記録の窓 ---------- */
.rec{ position:relative; }
.rec__frame{
  position:relative;
  background:#000;
  overflow:hidden;
  border:1px solid rgba(200,162,90,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.8) inset;
}
.rec__frame::before, .rec__frame::after{
  content:""; position:absolute; z-index:3; width:12px; height:12px;
  border:1px solid var(--gold); pointer-events:none;
}
.rec__frame::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.rec__frame::after { right:-1px; bottom:-1px; border-left:0; border-top:0; }
.rec__still{ width:100%; height:auto; display:block; }
.rec__video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.rec__video.is-playing{ opacity:1; }
.rec__cap{
  display:block;
  font-family:var(--font-got);
  font-size:12px; letter-spacing:.08em; line-height:1.8;
  color:var(--washi-dim);
  margin-top:12px;
}
/* 灰背景の装備画面は展示台として少し沈める */
.rec--stage .rec__still, .rec--stage .rec__video{ filter:brightness(.92) contrast(1.04); }
.rec--stage .rec__frame::after, .rec--stage .rec__frame::before{ border-color:var(--gold-deep); }
.rec--stage .rec__frame .rec__still{ position:relative; }
.rec--stage .rec__frame > .rec__vignette,
.gear__fig--stage .gear__img::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(7,9,12,0) 52%, rgba(7,9,12,.42) 100%),
    linear-gradient(180deg, rgba(7,9,12,.28) 0%, rgba(7,9,12,0) 22%, rgba(7,9,12,0) 78%, rgba(7,9,12,.3) 100%);
}

/* =========================================================
   1. HERO（静止画・GPT生成HERO完成画像を正本とする）
   ・PC: 横長構図を維持。左の暗い湖面に文字、右のロッド・リール・UIは隠さない
   ・スマホ: 専用クロップを帯として全表示し、文字は帯の下
   ・局所マスク・矩形モヤ・動画は使わない
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh; min-height:100dvh;
  overflow:hidden;
  background:var(--sumi);
}
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--sumi); }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__still{
  width:100%; height:100%;
  object-fit:cover; object-position:100% 50%;
}
/* 縦長寄りのPC・タブレットでは構図全体を収め、上下は墨 */
@media (min-width:721px) and (max-aspect-ratio: 3/2){
  .hero__still{ object-fit:contain; object-position:50% 40%; }
}
.hero__inner{
  position:absolute; z-index:2;
  left:max(var(--pad-x), env(safe-area-inset-left));
  right:auto;
  bottom:clamp(76px, 15vh, 150px);
  max-width:min(46vw, 700px);
}
.js .hero__inner{ animation:hero-in 1.3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hero__title{
  font-family:var(--font-latin);
  font-weight:500;
  font-size:clamp(46px, 7.4vw, 108px);
  letter-spacing:.06em;
  line-height:1;
  color:var(--gold-hi);
  background:linear-gradient(180deg, #f2e2b8 0%, #d9b978 42%, #9a7a3d 72%, #d8bb7a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(200,162,90,.18));
  margin-bottom:22px;
  position:relative;
}
/* 青紫の亀裂: 見出し下の一本線と、途切れの光 */
.hero__title::after{
  content:""; display:block;
  width:min(100%, 520px); height:1px; margin-top:20px;
  background:linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 38%, transparent 40%, transparent 44%, var(--crack) 46%, var(--glow) 52%, var(--crack) 58%, transparent 60%, transparent 64%, var(--gold) 66%, transparent 100%);
  filter:drop-shadow(0 0 6px rgba(99,205,255,.55));
}
.hero__tagline{
  font-family:var(--font-min);
  font-weight:500;
  font-size:clamp(20px, 3vw, 32px);
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--washi);
  text-shadow:0 2px 18px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  margin-bottom:26px;
}
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  font-family:var(--font-got);
  font-size:11px; letter-spacing:.34em;
  color:var(--washi-dim);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.hero__status{ color:var(--gold); display:inline-flex; align-items:center; }
.hero__status::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:12px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px rgba(200,162,90,.8);
}
@media (prefers-reduced-motion: no-preference){ .hero__status::before{ animation:pulse 3s ease-in-out infinite; } }
@keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }

.hero__scroll{
  position:absolute; z-index:2;
  right:max(var(--pad-x), env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  font-family:var(--font-latin);
  font-size:10px; letter-spacing:.42em;
  color:var(--ash);
  writing-mode:vertical-rl;
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(180deg, var(--gold-deep), transparent);
}
@media (prefers-reduced-motion: no-preference){ .hero__scroll{ animation:drift 3.6s ease-in-out infinite; } }
@keyframes drift{ 0%,100%{opacity:.45} 50%{opacity:.95} }

/* スマートフォン: 専用クロップ(800x853)を切らずに帯として全表示し、文字は帯の下 */
@media (max-width:720px){
  .hero{ display:flex; flex-direction:column; justify-content:flex-start; }
  .hero__media{
    position:relative; inset:auto;
    height:auto;
    margin-top:calc(var(--nav-h) + env(safe-area-inset-top));
  }
  .hero__media picture{ height:auto; }
  .hero__still{ height:auto; aspect-ratio:800 / 853; object-fit:cover; object-position:50% 50%; }
  .hero__inner{
    position:relative; inset:auto;
    left:auto; right:auto; bottom:auto;
    max-width:none;
    padding:22px max(var(--pad-x), env(safe-area-inset-right)) 96px max(var(--pad-x), env(safe-area-inset-left));
  }
  .hero__title{ font-size:clamp(44px, 12.4vw, 64px); letter-spacing:.04em; margin-bottom:16px; }
  .hero__title::after{ margin-top:14px; }
  .hero__tagline{ font-size:clamp(19px, 5.4vw, 24px); letter-spacing:.1em; margin-bottom:20px; }
  .hero__meta{ gap:8px 18px; font-size:10px; letter-spacing:.28em; }
  .hero__scroll{ left:50%; right:auto; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); }
  @media (prefers-reduced-motion: no-preference){ .hero__scroll{ animation:drift-c 3.6s ease-in-out infinite; } }
  @keyframes drift-c{ 0%,100%{opacity:.45; transform:translateX(-50%);} 50%{opacity:.95; transform:translateX(-50%);} }
}
@media (max-width:360px){
  .hero__title{ font-size:40px; }
  .nav__brand{ font-size:13px; letter-spacing:.14em; }
}

/* =========================================================
   2. LOST RIVER
   ========================================================= */
.river{
  background:
    radial-gradient(70% 55% at 80% 20%, rgba(134,114,255,.08) 0%, rgba(134,114,255,0) 60%),
    radial-gradient(60% 50% at 10% 90%, rgba(99,205,255,.04) 0%, rgba(99,205,255,0) 60%),
    var(--sumi-2);
  border-top:1px solid rgba(43,50,59,.6);
}
.river__grid{ display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .river__grid{ grid-template-columns:5fr 7fr; gap:56px; } }
.river__text .section__lead{ margin-bottom:28px; }
.river__meta{
  display:flex; flex-wrap:wrap; gap:8px 32px;
  font-family:var(--font-min);
  font-size:13px; letter-spacing:.18em;
  color:var(--washi-dim);
  border-top:1px solid var(--iron-line);
  padding-top:16px; max-width:34em;
}
.river__meta div{ display:flex; gap:14px; }
.river__meta dt{ color:var(--gold-deep); }
.river__meta dt::after{ content:"\00a0/"; color:var(--iron-line); }
.river__meta dd{ color:var(--bone); }

/* =========================================================
   3. FIELD RECORDS
   ========================================================= */
.records{ background:var(--sumi); }
.rec--wide{ margin-bottom:clamp(56px, 8vh, 96px); }

.fishwall{ display:grid; gap:36px 28px; grid-template-columns:1fr; }
.fish img{
  width:100%; height:auto;
  background:#0b0e13;
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.fish figcaption{
  margin-top:14px; padding-left:14px;
  border-left:1px solid var(--gold-deep);
  font-family:var(--font-min);
  font-size:14px; line-height:1.9; letter-spacing:.06em;
  color:var(--washi-dim);
}
.fish--itan img{ box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 80px rgba(134,114,255,.14); }
.fish--itan figcaption{ border-left-color:var(--crack); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.fish--itan figcaption b{
  font-family:var(--font-latin); font-weight:500;
  font-size:12px; letter-spacing:.42em;
  color:var(--glow);
}
@media (min-width:900px){
  .fishwall{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:44px 28px; }
  .fish{ grid-column:span 5; }
  .fish--l{ grid-column:span 7; }
  .fish:nth-child(3){ grid-column:span 5; }
  .fish:nth-child(4){ grid-column:span 7; }
  .fish--itan{ grid-column:span 6; }
}

/* =========================================================
   4. TACKLE
   ========================================================= */
.tackle{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(200,162,90,.06) 0%, rgba(200,162,90,0) 60%),
    var(--sumi-2);
  border-top:1px solid rgba(43,50,59,.6);
}
.gear{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:900px){ .gear{ grid-template-columns:7fr 5fr; gap:36px 44px; align-items:start; } }
.gear__col > * + *{ margin-top:34px; }
.gear__label{
  font-family:var(--font-min); font-weight:500;
  font-size:15px; letter-spacing:.34em;
  color:var(--gold);
  display:flex; align-items:center; gap:14px;
  margin-top:44px;
}
.gear__label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--gold-deep), transparent); }
.gear__col > .gear__label:first-child{ margin-top:0; }
.gear__img{ position:relative; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.5); background:#0b0e13; }
.gear__img img{ width:100%; height:auto; }
.gear__fig--stage .gear__img{ border:1px solid rgba(122,98,49,.45); }
.gear__fig--stage .gear__img img{ filter:brightness(.92) contrast(1.04); }
.gear__count{
  margin-top:12px;
  font-family:var(--font-latin);
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.5;
  letter-spacing:.12em;
  color:var(--bone);
}
.gear__fig figcaption{
  margin-top:12px; padding-left:14px;
  border-left:1px solid var(--gold-deep);
  font-family:var(--font-min);
  font-size:14px; line-height:1.9; letter-spacing:.06em;
  color:var(--washi-dim);
}

/* =========================================================
   5. EXPERIENCE
   ========================================================= */
.exp{
  background:
    radial-gradient(60% 50% at 90% 100%, rgba(134,114,255,.08) 0%, rgba(134,114,255,0) 60%),
    var(--sumi);
  border-top:1px solid rgba(43,50,59,.6);
}
.steps{
  list-style:none; counter-reset:step;
  display:grid; gap:2px;
  grid-template-columns:1fr;
  border-top:1px solid var(--iron-line);
  border-bottom:1px solid var(--iron-line);
  margin-bottom:clamp(56px, 8vh, 96px);
}
@media (min-width:640px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  position:relative;
  counter-increment:step;
  padding:28px 20px 26px 22px;
  border-left:1px solid var(--iron-line);
}
.step:first-child{ border-left:0; }
@media (max-width:999px){ .step:nth-child(3){ border-left:0; } }
@media (max-width:639px){ .step{ border-left:0; border-top:1px solid var(--iron-line); } .step:first-child{ border-top:0; } }
.step::before{
  content:counter(step, cjk-ideographic);
  position:absolute; top:22px; right:20px;
  font-family:var(--font-min);
  font-size:16px; color:var(--gold); opacity:.75;
}
.step__word{
  display:block;
  font-family:var(--font-min); font-weight:500;
  font-size:clamp(30px, 4.6vw, 40px);
  letter-spacing:.1em; line-height:1.3;
  color:var(--bone);
  margin-bottom:4px;
}
.step__en{
  display:block;
  font-family:var(--font-latin);
  font-size:11px; letter-spacing:.36em;
  color:var(--ash);
  margin-bottom:16px;
}
.step__desc{
  font-size:14px; line-height:1.9;
  color:var(--washi-dim);
}
.exp__grid{ display:grid; gap:44px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .exp__grid{ grid-template-columns:7fr 5fr; gap:56px; } }
.side__title{
  font-family:var(--font-min); font-weight:500;
  font-size:clamp(24px, 3vw, 30px);
  letter-spacing:.16em; line-height:1.4;
  color:var(--bone);
  margin-bottom:14px;
  display:flex; align-items:center; gap:14px;
}
.side__title::before{ content:""; width:10px; height:10px; border:1px solid var(--crack); transform:rotate(45deg); box-shadow:0 0 10px rgba(134,114,255,.6); }
.side__lead{ font-size:15px; line-height:2; color:var(--washi); margin-bottom:24px; max-width:30em; }
.side__fig img{
  width:100%; height:auto;
  border:1px solid rgba(134,114,255,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 60px rgba(134,114,255,.08);
}
.side__fig figcaption{
  margin-top:12px;
  font-family:var(--font-got);
  font-size:12px; letter-spacing:.08em;
  color:var(--washi-dim);
}

.insights{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  margin-top:clamp(64px, 9vh, 108px);
  border:1px solid var(--iron-line);
  background:var(--iron-line);
}
@media (min-width:820px){ .insights{ grid-template-columns:4fr 6fr; } }
.insight{
  position:relative;
  min-height:250px;
  padding:clamp(30px, 5vw, 54px);
  background:rgba(12,15,20,.97);
  overflow:hidden;
}
.insight::after{
  content:""; position:absolute; pointer-events:none;
  width:180px; height:180px; right:-90px; bottom:-100px;
  border:1px solid rgba(200,162,90,.12);
  transform:rotate(45deg);
}
.insight--logic::after{ border-color:rgba(134,114,255,.17); box-shadow:0 0 70px rgba(134,114,255,.04); }
.insight__label{
  margin-bottom:22px;
  font-family:var(--font-latin);
  font-size:12px; line-height:1; letter-spacing:.34em;
  color:var(--gold);
}
.insight--logic .insight__label{ color:var(--glow); }
.insight__lead{
  max-width:32em;
  font-size:clamp(18px, 2.4vw, 25px);
  line-height:1.8; letter-spacing:.08em;
  color:var(--bone);
}
.insight__body{
  max-width:40em; margin-top:20px;
  font-size:15px; line-height:2;
  color:var(--washi-dim);
}

/* =========================================================
   6. CRASH AND BUILD
   ========================================================= */
.build{
  background:
    linear-gradient(115deg, rgba(200,162,90,.055), transparent 38%),
    var(--sumi-2);
  border-top:1px solid rgba(43,50,59,.6);
}
.build__grid{
  display:grid; grid-template-columns:1fr; gap:30px;
  max-width:980px;
  padding-block:clamp(10px, 2vh, 24px);
}
@media (min-width:900px){ .build__grid{ grid-template-columns:5fr 6fr; gap:clamp(48px, 7vw, 92px); align-items:start; } }
.build__statement{
  font-size:clamp(22px, 3.2vw, 34px);
  line-height:1.75; letter-spacing:.08em;
  color:var(--bone);
}
.build__body{
  padding-top:4px;
  font-size:15px; line-height:2.15;
  color:var(--washi-dim);
}

/* =========================================================
   7. NEWS
   ========================================================= */
.news{ background:var(--sumi-2); border-top:1px solid rgba(43,50,59,.6); }
.news .section__title{ margin-bottom:36px; }
.news__list{ list-style:none; border-top:1px solid var(--iron-line); max-width:760px; }
.news__item{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 24px;
  padding:20px 4px;
  border-bottom:1px solid var(--iron-line);
}
.news__date{
  font-family:var(--font-latin);
  font-size:12px; letter-spacing:.2em;
  color:var(--gold);
  flex:0 0 auto;
}
.news__text{ font-size:15px; color:var(--washi); }
.news__empty{
  padding:30px 4px;
  border-bottom:1px solid var(--iron-line);
  display:grid; gap:4px;
}
.news__empty span{ font-size:15px; letter-spacing:.08em; color:var(--washi); }
.news__empty span::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:14px;
  background:var(--gold-deep); transform:rotate(45deg); vertical-align:2px;
}
.news__empty small{ font-family:var(--font-got); font-size:12px; letter-spacing:.06em; color:var(--ash); padding-left:20px; }

/* =========================================================
   8. CONTACT
   ========================================================= */
.contact{
  background:
    radial-gradient(48% 70% at 50% 100%, rgba(134,114,255,.065), transparent 70%),
    var(--sumi);
  border-top:1px solid rgba(200,162,90,.14);
}
.contact__inner{ text-align:center; }
.contact .section__tag{ justify-content:center; }
@media (min-width:1100px){ .contact .section__tag{ justify-content:flex-start; } }
.contact .section__title{ margin-bottom:28px; }
.contact__lead{
  max-width:44em; margin:0 auto 34px;
  font-size:clamp(16px, 2vw, 20px);
  line-height:2; letter-spacing:.08em;
  color:var(--washi);
}
.contact__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:210px; min-height:52px; padding:0 28px;
  border:1px solid var(--gold-deep);
  color:var(--gold-hi);
  font-family:var(--font-got); font-size:13px; letter-spacing:.2em;
  background:rgba(200,162,90,.035);
  transition:border-color .25s, background .25s, color .25s;
}
.contact__cta:hover{ border-color:var(--gold); background:rgba(200,162,90,.09); color:var(--bone); }

/* =========================================================
   9. EPILOGUE（公式PV → ITAN終章 → キービジュアル → 制作ブランド）
   ========================================================= */
.epi{ position:relative; background:var(--sumi); padding-top:clamp(84px, 12vh, 150px); overflow:hidden; }
.official-pv{
  max-width:var(--inner); margin-inline:auto;
  padding-left:  max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
}
.official-pv__label{
  margin-bottom:16px;
  font-family:var(--font-latin);
  font-size:12px; line-height:1; letter-spacing:.38em;
  color:var(--glow);
}
.official-pv__frame{
  position:relative; overflow:hidden;
  border:1px solid rgba(134,114,255,.3);
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 120px rgba(134,114,255,.08);
}
.official-pv__frame::before, .official-pv__frame::after{
  content:""; position:absolute; z-index:2; width:14px; height:14px; pointer-events:none;
  border:1px solid var(--crack);
}
.official-pv__frame::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.official-pv__frame::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }
.official-pv__video{
  display:block; width:100%; height:auto;
  aspect-ratio:1106 / 512;
  background:#000;
}
.epi__lore{
  text-align:center;
  padding:38px 0 0;
  display:grid; gap:10px; justify-items:center;
}
.epi__lore span{
  font-family:var(--font-min); font-weight:500;
  font-size:clamp(18px, 2.6vw, 26px);
  letter-spacing:.18em; line-height:1.7;
  color:var(--bone);
}

.kv{
  margin-top:clamp(84px, 12vh, 150px);
  position:relative;
}
.kv img{ width:100%; height:auto; }
.kv::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--sumi) 0%, rgba(7,9,12,0) 14%, rgba(7,9,12,0) 86%, var(--sumi) 100%);
}
.kv figcaption{
  position:absolute; z-index:2; left:max(var(--pad-x), env(safe-area-inset-left)); bottom:16px;
  font-family:var(--font-got); font-size:11px; letter-spacing:.3em; color:var(--ash);
}
@media (min-width:1600px){ .kv img{ max-width:1600px; margin-inline:auto; } }

.brand{ position:relative; margin-top:clamp(40px, 6vh, 80px); }
.brand__img{ width:100%; height:auto; }
.brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--sumi) 0%, rgba(7,9,12,0) 22%, rgba(7,9,12,0) 78%, var(--sumi) 100%);
}
@media (min-width:1800px){ .brand__img{ max-width:1800px; margin-inline:auto; } }

/* =========================================================
   10. FOOTER
   ========================================================= */
.footer{
  position:relative; z-index:1;
  text-align:center;
  padding:56px var(--pad-x) calc(48px + env(safe-area-inset-bottom));
  background:var(--sumi);
  border-top:1px solid rgba(200,162,90,.14);
}
.footer__emblem{ width:64px; height:64px; margin:0 auto 18px; border-radius:8px; }
.footer__work{
  font-family:var(--font-latin);
  font-size:18px; letter-spacing:.34em; text-indent:.34em;
  color:var(--bone);
  margin-bottom:8px;
}
.footer__brand{
  font-family:var(--font-got);
  font-size:11px; letter-spacing:.34em; text-indent:.34em;
  color:var(--washi-dim);
  margin-bottom:22px;
}
.footer__links{
  list-style:none;
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 8px;
  margin-bottom:22px;
}
.footer__links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border:1px solid var(--iron-line);
  font-family:var(--font-got); font-size:12px; letter-spacing:.16em;
  color:var(--washi);
}
.footer__links a:hover{ border-color:var(--gold-deep); color:var(--gold-hi); }
.footer__tag{ font-family:var(--font-got); font-size:13px; letter-spacing:.2em; color:var(--gold); margin-bottom:12px; }
.footer__copy{ font-family:var(--font-got); font-size:11px; letter-spacing:.2em; color:var(--ash); }