/* =================================================================
   七色幕府 ─ 共通デザインシステム
   墨黒の地に金・七色。書体は毛筆(Yuji Syuku)＋明朝(Shippori Mincho)。
   ================================================================= */

:root{
  /* 墨 */
  --sumi:        #0b0905;
  --sumi-1:      #100b06;   /* 僅かに持ち上げたパネル */
  --sumi-2:      #171009;   /* カード地 */
  --sumi-line:   #2a2014;   /* 罫・境界 */

  /* 金 */
  --gold:        #e7c869;
  --gold-bright: #f4d03f;
  --gold-deep:   #c9a227;
  --gold-faint:  #6f5a23;

  /* 朱 */
  --shu:         #b5261d;

  /* 紙(文字) */
  --paper:       #efe6d2;
  --paper-dim:   #b9ad94;
  --paper-faint: #8a8069;

  /* 七色(陣) */
  --c-red:    #d8453b;
  --c-orange: #df8b34;
  --c-yellow: #e7c34a;
  --c-green:  #5aa75c;
  --c-blue:   #4a86cf;
  --c-violet: #9166c9;

  --brush: "Yuji Syuku", serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;

  --maxw: 980px;
  --readw: 720px;

  --gold-grad: linear-gradient(170deg,#f8e598 0%,#f4d03f 38%,#d8b13a 64%,#b98a22 100%);
  --rainbow: linear-gradient(90deg,#d8453b,#df8b34,#e7c34a,#5aa75c,#4a86cf,#9166c9);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--sumi);
  color:var(--paper);
  font-family:var(--mincho);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  /* 墨地に極淡い縦のヴィネット＋中央の僅かな光 */
  background-image:
    radial-gradient(120% 60% at 50% -8%, rgba(231,200,105,.07), transparent 60%),
    radial-gradient(140% 90% at 50% 120%, rgba(181,38,29,.05), transparent 55%);
  background-attachment:fixed;
}

img{ max-width:100%; display:block; }

::selection{ background:rgba(231,200,105,.28); color:#fff; }

/* ---------- 字種ヘルパ ---------- */
.brush{ font-family:var(--brush); font-weight:400; letter-spacing:.04em; line-height:1.3; }
.mincho{ font-family:var(--mincho); }

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rainbow-text{
  background:linear-gradient(96deg,#e2473c 4%,#e08a2e 24%,#e7c34a 42%,#5aa75c 60%,#4a86cf 78%,#9166c9 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- レイアウト ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.read{ max-width:var(--readw); margin-left:auto; margin-right:auto; }

section{ position:relative; }
.band{ padding:96px 0; }
.band--panel{ background:var(--sumi-1); border-top:1px solid var(--sumi-line); border-bottom:1px solid var(--sumi-line); }

/* 二重罫の区切り */
.rule{
  height:0; border:0; margin:0 auto;
  width:120px; max-width:60%;
  border-top:1px solid var(--gold-deep);
  position:relative;
}
.rule::after{
  content:""; position:absolute; left:0; right:0; top:3px;
  border-top:1px solid rgba(231,200,105,.32);
}
.rule--wide{ width:240px; }

/* 節の封号ラベル＋毛筆見出し */
.eyebrow{
  font-family:var(--mincho);
  font-size:12px; letter-spacing:.42em; text-indent:.42em;
  color:var(--gold); text-transform:none;
  display:inline-block;
}
.sec-head{ text-align:center; margin-bottom:54px; }
.sec-head .kanmon{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--gold); font-size:12px; letter-spacing:.4em; text-indent:.4em;
  margin-bottom:20px;
}
.sec-head .kanmon::before,
.sec-head .kanmon::after{ content:""; width:34px; height:1px; background:var(--gold-deep); opacity:.7; }
.sec-title{
  font-family:var(--brush);
  font-size:clamp(30px, 7vw, 52px);
  line-height:1.2; margin:0;
  color:var(--paper);
}
.sec-sub{ color:var(--paper-dim); margin:18px auto 0; font-size:15px; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mincho); font-weight:600;
  font-size:16px; letter-spacing:.16em; text-indent:.16em;
  padding:16px 30px; min-height:52px;
  border-radius:2px; cursor:pointer; text-decoration:none;
  border:1px solid transparent; position:relative;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-gold{
  background:var(--gold-grad);
  color:#241a06; border-color:#f6dd86;
  box-shadow:0 6px 22px -8px rgba(231,200,105,.6), inset 0 1px 0 rgba(255,255,255,.5);
  animation:goldPulse 3.4s ease-in-out infinite;
}
.btn-gold:hover{ box-shadow:0 10px 30px -8px rgba(231,200,105,.8), inset 0 1px 0 rgba(255,255,255,.6); transform:translateY(-2px); }

.btn-ghost{
  background:rgba(231,200,105,.04);
  color:var(--gold); border-color:var(--gold-deep);
}
.btn-ghost:hover{ background:rgba(231,200,105,.12); color:var(--gold-bright); transform:translateY(-2px); }

.btn-sm{ font-size:14px; padding:12px 22px; min-height:46px; }
.btn-block{ width:100%; }

@keyframes goldPulse{
  0%,100%{ box-shadow:0 6px 22px -8px rgba(231,200,105,.5), inset 0 1px 0 rgba(255,255,255,.5); }
  50%{ box-shadow:0 8px 30px -6px rgba(244,208,63,.85), inset 0 1px 0 rgba(255,255,255,.6); }
}

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ====================================================================
   ヒーロー
   ==================================================================== */
.hero{ position:relative; padding-top:54px; text-align:center; overflow:hidden; }

.crest{ width:96px; height:96px; margin:0 auto 26px; }

.hero-plan{
  color:var(--gold); font-size:12.5px; letter-spacing:.34em; text-indent:.34em;
  margin-bottom:30px;
}
.hero-plan .sep{ color:var(--gold-faint); margin:0 .35em; }

.hero-iikuni{ font-family:var(--brush); font-size:clamp(20px,5vw,30px); color:var(--paper-dim); margin:0 0 2px; letter-spacing:.1em; }
.hero-title{
  font-family:var(--brush);
  font-size:clamp(64px, 19vw, 168px);
  line-height:.98; margin:0; letter-spacing:.02em;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.6));
}
.hero-geki{
  font-family:var(--brush);
  font-size:clamp(18px,4.4vw,26px); line-height:1.9;
  color:var(--paper); margin:30px auto 0; max-width:620px;
}
.hero-geki .em{ color:var(--gold); }

.hero-cta{ margin-top:38px; }

/* 城＋虹のステージ（端から端） */
.stage{
  position:relative; width:100vw; left:50%; transform:translateX(-50%);
  margin-top:40px;
  height:clamp(380px, 50vh, 500px);
}

/* 虹と城を同じ高さに：skyline 帯の中で両者を下揃え・同寸にする。
   skyline の高さ＝城の見た目の高さ（中身で決まる）。虹はその帯にぴったり収め、
   ボタンより上へはみ出さない。 */
.skyline{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:center; align-items:flex-end;
}

/* 虹：高さは城と同寸のまま、幅は中央寄せで約7割に絞る */
.rainbow-arc{
  position:absolute; left:50%; bottom:0; top:0;
  transform:translateX(-50%);
  width:70vw; max-width:1180px;
  z-index:1;
  pointer-events:none;
}
.rainbow-arc svg{ width:100%; height:100%; overflow:visible; }
.rainbow-arc path{ fill:none; stroke-linecap:round; opacity:.5; vector-effect:non-scaling-stroke; }

/* ====================================================================
   城（CSS幾何シルエット）
   ==================================================================== */
.castle{
  position:relative; z-index:2;
  width:min(70vw,560px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  pointer-events:none;
}
.castle-glow{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:min(78vw,720px); height:120%;
  background:
    radial-gradient(58% 64% at 50% 78%, rgba(231,200,105,.22), rgba(181,38,29,.10) 42%, transparent 72%);
  filter:blur(10px); pointer-events:none;
}

/* 天守 */
.tenshu{ position:relative; z-index:2; width:min(58vw,520px); display:flex; flex-direction:column; align-items:center; }

.tier{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }

/* 屋根：下に広い台形＋金の棟線＋反り */
.roof{
  position:relative;
  background:linear-gradient(180deg,#2a2012,#0d0a06);
  clip-path:polygon(34% 0, 66% 0, 100% 100%, 0% 100%);
  border-bottom:2px solid rgba(231,200,105,.7);
  box-shadow:0 1px 0 rgba(231,200,105,.25);
}
.roof::before{ /* 棟（最上の水平ライン） */
  content:""; position:absolute; top:0; left:34%; right:34%;
  border-top:3px solid var(--gold-deep);
}
.roof::after{ /* 反り：両端の軒を僅かに持ち上げる金線 */
  content:""; position:absolute; bottom:-2px; left:-2%; right:-2%; height:10px;
  border-bottom:2px solid rgba(231,200,105,.5);
  border-radius:0 0 50% 50%/0 0 100% 100%;
  transform:scaleY(-1); opacity:.6;
}

/* 胴：屋根より細い台形、連子窓 */
.body{
  position:relative;
  background:linear-gradient(180deg,#231a0f,#0f0a06);
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
  display:flex; align-items:center; justify-content:center; gap:10%;
  border-bottom:1px solid rgba(231,200,105,.3);
}
.win{ width:11%; height:46%; background:linear-gradient(180deg,#f0c84a,#9c7a22);
  box-shadow:0 0 12px rgba(244,208,63,.75); border:1px solid #4a3a16; border-radius:1px; opacity:.96; }
.win--door{ width:15%; height:64%; background:linear-gradient(180deg,#3a2c14,#140d06); box-shadow:inset 0 0 10px rgba(231,200,105,.4); }

/* 鯱（金）一対 */
.shachi-pair{ position:absolute; top:-18px; left:0; right:0; display:flex; justify-content:space-between; padding:0 14%; z-index:3; }
.shachi{ width:15px; height:26px; background:var(--gold-grad);
  border-radius:60% 60% 60% 0; box-shadow:0 0 10px rgba(244,208,63,.85);
  transform:rotate(28deg); }
.shachi.r{ transform:rotate(-28deg) scaleX(-1); }

/* 石垣：端から端まで */
.ishigaki{
  width:100vw; max-width:none;
  height:clamp(60px,12vh,120px);
  background:linear-gradient(180deg,#140e08,#0a0704);
  clip-path:polygon(14% 0, 86% 0, 100% 100%, 0% 100%);
  position:relative; margin-top:-1px;
  border-top:1px solid rgba(231,200,105,.18);
}
.ishigaki::before{ /* 石の継ぎ目（極淡い） */
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(231,200,105,.05) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(231,200,105,.04) 18px 19px);
  opacity:.7;
}

/* メンバー：城の下半分に重ね、下揃え */
.members{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(118vw,1340px);
  filter:drop-shadow(0 -6px 26px rgba(0,0,0,.5));
  z-index:3;
}
.members img{ width:100%; height:auto; aspect-ratio:1228 / 330; }
/* 黒背景へ自然に馴染ませる：下端をフェード */
.members::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(180deg,transparent,var(--sumi));
}

/* ====================================================================
   決戦・参陣記
   ==================================================================== */
.warstat{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:40px; }
.stat{
  flex:1 1 240px; max-width:320px; text-align:center;
  background:var(--sumi-2); border:1px solid var(--sumi-line);
  border-radius:3px; padding:30px 22px; position:relative;
}
.stat::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(231,200,105,.16); border-radius:2px; pointer-events:none; }
.stat .label{ font-size:12.5px; letter-spacing:.3em; text-indent:.3em; color:var(--gold); }
.stat .value{ font-family:var(--brush); margin:8px 0 2px; line-height:1; }
.stat .value .num{ font-size:clamp(54px,12vw,76px); color:var(--paper); }
.stat .value .unit{ font-size:24px; color:var(--gold); margin-left:.15em; }
.stat .note{ font-size:12.5px; color:var(--paper-faint); margin-top:6px; }

.geki-line{ font-family:var(--brush); text-align:center; font-size:clamp(17px,3.6vw,22px);
  color:var(--paper-dim); line-height:1.95; margin:0 auto 46px; max-width:680px; }
.geki-line .em{ color:var(--gold); }

/* 参陣記リスト */
.roster-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.roster-head h3{ font-family:var(--brush); font-size:20px; margin:0; color:var(--paper); }
.roster-head .count{ font-size:13px; color:var(--paper-faint); }
.roster{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sumi-line); }
.roster li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 6px; border-bottom:1px solid var(--sumi-line);
  animation:rosterIn .5s ease both;
}
.roster .name{ font-size:16px; color:var(--paper); }
.roster .name .hono{ color:var(--paper-faint); margin-right:.5em; font-size:13px; }
.jin-tag{
  font-size:12px; letter-spacing:.12em; padding:4px 12px; border-radius:999px;
  border:1px solid currentColor; white-space:nowrap;
  background:color-mix(in oklab, currentColor 12%, transparent);
}
@keyframes rosterIn{ from{ transform:translateY(-8px); } to{ transform:none; } }

/* 援軍トースト */
.toast-host{ position:fixed; top:18px; left:0; right:0; z-index:90; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; padding:0 14px; }
.toast{
  pointer-events:none; max-width:520px; width:100%;
  background:linear-gradient(180deg,#1b140a,#120c06);
  border:1px solid var(--gold-deep); border-radius:3px;
  padding:13px 18px; display:flex; align-items:center; gap:12px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(231,200,105,.1) inset;
  font-family:var(--brush); color:var(--paper);
  animation:toastIn .45s cubic-bezier(.2,.9,.3,1.2) both;
}
.toast .seal{ width:30px; height:30px; flex:0 0 auto; }
.toast .x{ color:var(--gold); }
@keyframes toastIn{ from{ transform:translateY(-22px) scale(.96); } to{ transform:none; } }
.toast.out{ animation:toastOut .4s ease forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-12px); } }

/* ====================================================================
   物語・世界観
   ==================================================================== */
.prose p{ margin:0 0 1.3em; color:var(--paper-dim); }
.prose p .em{ color:var(--paper); }
.lead{ font-family:var(--brush); font-size:clamp(20px,4.6vw,28px); line-height:1.7; color:var(--paper); text-align:center; }

/* 役の対応表（3枚×2行） */
.role-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px; }
.role-cell{ background:var(--sumi-2); border:1px solid var(--sumi-line); border-left:3px solid var(--jc,var(--gold-deep)); border-radius:2px; padding:16px 16px; }
.role-cell .jin{ font-family:var(--brush); font-size:18px; color:var(--paper); }
.role-cell .duty{ font-size:13px; color:var(--paper-faint); margin-top:4px; }

/* ====================================================================
   陣立て（プランカード）
   ==================================================================== */
.jin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.jin-card{
  position:relative; background:var(--sumi-2);
  border:1px solid var(--sumi-line); border-radius:4px;
  padding:26px 22px 24px; display:flex; flex-direction:column;
  overflow:hidden; transition:transform .2s ease, border-color .2s ease;
}
.jin-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--jc); opacity:.9; }
.jin-card:hover{ transform:translateY(-4px); border-color:var(--jc); }
.jin-card.feat{ border-color:var(--gold-deep); box-shadow:0 0 0 1px rgba(231,200,105,.25), 0 18px 40px -22px rgba(231,200,105,.4); }
.jin-card .flag{
  position:absolute; top:14px; right:-30px; transform:rotate(45deg);
  background:var(--gold-grad); color:#241a06; font-size:11px; font-weight:700;
  letter-spacing:.15em; padding:4px 36px; box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.jin-card .rank{ font-size:12px; letter-spacing:.28em; text-indent:.28em; color:var(--jc); }
.jin-card .jin-name{ font-family:var(--brush); font-size:34px; line-height:1.1; margin:6px 0 2px; color:var(--paper); }
.jin-card .price{ font-family:var(--mincho); font-size:22px; color:var(--gold); font-weight:600; margin-bottom:2px; }
.jin-card .price .yen{ font-size:15px; }
.jin-card .force{ font-size:12.5px; color:var(--paper-faint); border-top:1px dashed var(--sumi-line); border-bottom:1px dashed var(--sumi-line); padding:10px 0; margin:14px 0; }
.jin-card .onsho{ list-style:none; margin:0 0 20px; padding:0; flex:1; }
.jin-card .onsho li{ position:relative; padding-left:20px; font-size:14px; color:var(--paper-dim); margin-bottom:9px; line-height:1.6; }
.jin-card .onsho li::before{ content:"◆"; position:absolute; left:0; top:.05em; color:var(--jc); font-size:9px; }

/* ====================================================================
   RAINBOW MUSIC / 狼煙 / 問答
   ==================================================================== */
.placeholder{
  background:
    repeating-linear-gradient(135deg, #14100a 0 14px, #100c07 14px 28px);
  border:1px solid var(--sumi-line); border-radius:3px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--paper-faint); font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:12px; letter-spacing:.12em; padding:18px; min-height:200px;
}

.mv-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:center; }
@media(max-width:760px){ .mv-wrap{ grid-template-columns:1fr; } }

/* 狼煙 */
.noroshi-icons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.noroshi-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--sumi-2); border:1px solid var(--sumi-line); color:var(--paper-dim);
  border-radius:999px; padding:12px 22px; min-height:48px;
  font-family:var(--mincho); font-size:14px; letter-spacing:.08em;
  transition:border-color .2s, color .2s, background .2s;
}
.noroshi-btn:hover{ border-color:var(--gold-deep); color:var(--gold); background:rgba(231,200,105,.06); }
.noroshi-btn svg{ width:18px; height:18px; }

/* 問答 */
.qa{ border-top:1px solid var(--sumi-line); }
.qa details{ border-bottom:1px solid var(--sumi-line); }
.qa summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 4px; position:relative;
  font-family:var(--mincho); font-size:16px; color:var(--paper); display:flex; gap:12px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .q{ color:var(--gold); font-family:var(--brush); flex:0 0 auto; }
.qa summary::after{ content:"＋"; position:absolute; right:6px; top:20px; color:var(--gold); transition:transform .2s; }
.qa details[open] summary::after{ content:"−"; }
.qa .a{ padding:0 4px 22px 34px; color:var(--paper-dim); font-size:14.5px; line-height:1.9; }
.qa .a.warn{ color:var(--paper); }
.qa .a .em{ color:var(--gold); }

.disclaimer{
  margin-top:30px; text-align:center; font-size:12.5px; color:var(--paper-faint);
  border:1px solid var(--sumi-line); border-radius:3px; padding:16px 18px; line-height:1.85;
  background:rgba(181,38,29,.05);
}

/* ====================================================================
   最後の檄 / フッター / 出陣バー
   ==================================================================== */
.final{ text-align:center; }
.final .geki{ font-family:var(--brush); font-size:clamp(26px,6.4vw,46px); line-height:1.55; color:var(--paper); margin:0 auto 34px; max-width:760px; }
.final .geki .gold-text{ display:inline; }

.foot{ background:#080603; border-top:1px solid var(--sumi-line); padding:60px 0 130px; }
.foot .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; margin-bottom:44px; }
.foot h4{ font-family:var(--mincho); font-size:13px; letter-spacing:.2em; color:var(--gold); margin:0 0 12px; font-weight:600; }
.foot p, .foot a{ color:var(--paper-faint); font-size:13px; line-height:1.9; text-decoration:none; margin:0 0 4px; }
.foot a:hover{ color:var(--gold); }
.foot .signoff{ text-align:center; font-family:var(--brush); font-size:clamp(28px,8vw,56px); letter-spacing:.18em; color:var(--paper); opacity:.9; margin-top:30px; }

/* 出陣バー（常時表示） */
.sallybar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:linear-gradient(180deg, rgba(8,6,3,.4), #080603 40%);
  border-top:1px solid var(--sumi-line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px;
  backdrop-filter:blur(8px);
  transform:translateY(120%); transition:transform .4s ease;
}
.sallybar.show{ transform:none; }
.sallybar .lead{ flex:1; min-width:0; }
.sallybar .lead .t{ font-family:var(--brush); font-size:15px; color:var(--paper); line-height:1.3; }
.sallybar .lead .s{ font-size:11px; color:var(--paper-faint); }
.sallybar .btn{ flex:0 0 auto; }
@media(max-width:520px){
  .sallybar .lead .s{ display:none; }
  .sallybar .btn{ padding:14px 20px; }
}

/* ====================================================================
   スクロール演出
   ==================================================================== */
.reveal{ transform:translateY(22px); transition:transform .9s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.reveal.in{ transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

/* ヒーロー登場（読み込み時）：transform のみのキーフレームで駆動。
   opacity は常に1なので、タイムライン停止環境でも必ず可視（位置が僅かにずれるだけ）。 */
@keyframes riseUp{ from{ transform:translateY(30px); } to{ transform:translateY(0); } }
[data-rise]{ animation:riseUp .9s cubic-bezier(.2,.8,.2,1) both; }

/* 城せり上がり */
.stage .castle{ animation:riseCastle 1.3s cubic-bezier(.2,.8,.2,1) .5s both; }
@keyframes riseCastle{ from{ transform:translateY(46px); } to{ transform:translateY(0); } }
.stage .members{ animation:riseMembers 1.1s cubic-bezier(.2,.8,.2,1) 1s both; }
@keyframes riseMembers{ from{ transform:translate(-50%,66px); } to{ transform:translate(-50%,0); } }

/* 虹：端から端まで常時表示。各弧を僅かに遅らせて立ち上げる（transformのみ）。 */
.rainbow-arc path{ stroke-dasharray:none; stroke-dashoffset:0;
  transform-box:fill-box; transform-origin:center bottom;
  animation:arcRise 1s ease both; }
@keyframes arcRise{ from{ transform:translateY(22px); } to{ transform:translateY(0); } }

/* 狼煙のゆらぎ */
.noroshi-flame{ animation:flame 3.2s ease-in-out infinite; transform-origin:bottom center; }
@keyframes flame{ 0%,100%{ transform:skewX(-3deg) scaleY(1); opacity:.8; } 50%{ transform:skewX(3deg) scaleY(1.06); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,[data-rise]{ opacity:1 !important; transform:none !important; }
  .stage .castle{ transform:none !important; }
  .stage .members{ transform:translateX(-50%) !important; }
  .rainbow-arc path{ stroke-dashoffset:0 !important; }
}

/* ====================================================================
   レスポンシブ
   ==================================================================== */
@media(max-width:680px){
  .band{ padding:72px 0; }
  .sec-head{ margin-bottom:40px; }
  .stage{ height:clamp(330px,46vh,420px); margin-top:30px; }
  .roof::before, .roof::after{ display:none; }
  .castle{ width:min(76vw,420px); }
  /* 虹：スマホでは幅を広げて横長の弧に（縦長を防ぐ） */
  .rainbow-arc{ width:114vw; max-width:none; }
  /* メンバー：画面幅に収め、はみ出させない */
  .members{ width:100vw; max-width:none; }
  .members::after{ height:16%; }
  .role-grid{ gap:9px; }
  .role-cell{ padding:12px 10px; }
  .role-cell .jin{ font-size:16px; }
  .role-cell .duty{ font-size:11.5px; }
}

/* 申込ページ用フォーム */
.form-field{ margin-bottom:24px; }
.form-field label{ display:block; font-size:13px; letter-spacing:.1em; color:var(--gold); margin-bottom:8px; }
.form-field .hint{ font-size:12px; color:var(--paper-faint); margin-top:6px; }
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field textarea{
  width:100%; background:var(--sumi-2); border:1px solid var(--sumi-line);
  border-radius:2px; color:var(--paper); font-family:var(--mincho); font-size:16px;
  padding:14px 16px; transition:border-color .2s;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold-deep); }
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--paper-faint); }

.jin-choose{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.jin-opt{ position:relative; cursor:pointer; }
.jin-opt input{ position:absolute; opacity:0; pointer-events:none; }
.jin-opt .face{
  display:flex; flex-direction:column; gap:2px;
  background:var(--sumi-2); border:1px solid var(--sumi-line); border-radius:3px;
  padding:14px 14px; transition:border-color .2s, background .2s;
  border-left:3px solid var(--jc,var(--gold-deep));
}
.jin-opt .face .n{ font-family:var(--brush); font-size:20px; color:var(--paper); }
.jin-opt .face .p{ font-size:13px; color:var(--gold); }
.jin-opt input:checked + .face{ border-color:var(--jc); background:color-mix(in oklab,var(--jc) 12%, var(--sumi-2)); box-shadow:0 0 0 1px var(--jc) inset; }

.kojo-preview{
  margin:26px 0; text-align:center; font-family:var(--brush);
  font-size:clamp(20px,5vw,28px); color:var(--paper); line-height:1.6;
  border:1px solid var(--sumi-line); border-radius:3px; padding:24px 20px;
  background:rgba(231,200,105,.04); min-height:96px;
  display:flex; align-items:center; justify-content:center;
}
.kojo-preview .em{ color:var(--gold); }

.steps{ display:flex; gap:8px; justify-content:center; margin-bottom:40px; font-size:12px; color:var(--paper-faint); letter-spacing:.15em; flex-wrap:wrap; }
.steps span{ white-space:nowrap; }
.steps .on{ color:var(--gold); }

.backlink{ display:inline-flex; align-items:center; gap:8px; color:var(--paper-dim); text-decoration:none; font-size:13px; letter-spacing:.1em; white-space:nowrap; }
.backlink:hover{ color:var(--gold); }

/* ====================================================================
   参陣記 ── 役ごとのカード ＋ 直近の参陣 ＋ 一覧ボタン
   ==================================================================== */
.roster-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin:6px 0 36px;
}
.rc{
  position:relative; background:var(--sumi-2);
  border:1px solid var(--sumi-line); border-left:3px solid var(--jc,var(--gold-deep));
  border-radius:3px; padding:16px 16px 15px;
  display:flex; flex-direction:column; gap:2px;
}
.rc .rc-jin{ font-family:var(--brush); font-size:19px; color:var(--paper); line-height:1.2; }
.rc .rc-tally{ display:flex; align-items:baseline; gap:.25em; }
.rc .rc-tally b{ font-family:var(--brush); font-weight:400; font-size:30px; color:var(--jc); line-height:1; }
.rc .rc-tally .u{ font-size:13px; color:var(--paper-dim); }
.rc .rc-force{ font-size:11.5px; color:var(--paper-faint); margin-top:4px; letter-spacing:.04em; }

.recent-block{ margin-top:8px; }
.recent-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.recent-head .t{ font-family:var(--brush); font-size:19px; color:var(--paper); }
.recent-head .muted{ font-size:12px; color:var(--paper-faint); letter-spacing:.06em; }
.recent-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sumi-line); }
.recent-list li{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  padding:14px 6px; border-bottom:1px solid var(--sumi-line);
  animation:rosterIn .5s ease both;
}
.recent-list .nm{ font-size:16px; color:var(--paper); min-width:0; }
.recent-list .nm .hono{ color:var(--paper-faint); margin-right:.45em; font-size:13px; }
.recent-list .dt{ font-size:12.5px; color:var(--paper-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }

.roster-cta{ text-align:center; margin-top:30px; }

@media(max-width:560px){
  .roster-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .rc{ padding:13px 12px; }
  .rc .rc-jin{ font-size:17px; }
  .rc .rc-tally b{ font-size:26px; }
  .recent-list li{ grid-template-columns:1fr auto; gap:6px 12px; }
  .recent-list .jin-tag{ grid-row:2; justify-self:start; }
  .recent-list .dt{ grid-row:1; grid-column:2; }
}

/* 参陣記一覧ページ */
.list-wrap{ max-width:760px; margin:0 auto; padding:0 22px; }
.roster-filter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:28px 0 24px; }
.chip{
  cursor:pointer; font-family:var(--mincho); font-size:13px; letter-spacing:.06em;
  background:var(--sumi-2); border:1px solid var(--sumi-line); color:var(--paper-dim);
  border-radius:999px; padding:8px 16px; min-height:40px; display:inline-flex; align-items:center; gap:6px;
  border-left:3px solid var(--jc,var(--sumi-line));
  transition:border-color .2s, color .2s, background .2s;
}
.chip:hover{ color:var(--paper); }
.chip[aria-pressed="true"]{ color:var(--paper); border-color:var(--jc,var(--gold-deep)); background:color-mix(in oklab,var(--jc,var(--gold)) 12%, var(--sumi-2)); }
.chip .c{ font-size:12px; color:var(--paper-faint); }

.full-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sumi-line); }
.full-list li{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px;
  padding:15px 6px; border-bottom:1px solid var(--sumi-line);
}
.full-list .idx{ font-size:12px; color:var(--paper-faint); font-variant-numeric:tabular-nums; min-width:2.6em; }
.full-list .nm{ font-size:16px; color:var(--paper); min-width:0; }
.full-list .dt{ font-size:12.5px; color:var(--paper-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.list-empty{ text-align:center; color:var(--paper-faint); padding:40px 0; }
@media(max-width:560px){
  .full-list li{ grid-template-columns:auto 1fr auto; gap:6px 12px; }
  .full-list .jin-tag{ grid-row:2; grid-column:2; justify-self:start; }
  .full-list .dt{ grid-row:1; grid-column:3; }
}