/* ===== 観覧ページ（応援団募集） =====
   土台は ../style.css（出演者ページと共通）。ここには観覧ページだけの部品を書く */

/* ---------- ヒーロー：「応援団募集！」を大きく ---------- */
.hero--watch .hero-ph img{object-position:50% 100%}
.hero--watch .hero-lead{max-width:54ch}
.hero-title--xl{font-size:clamp(50px,11.6vw,128px);line-height:1.06;letter-spacing:0;margin-bottom:22px;max-width:none}
.hero-title--xl .gold{color:var(--gold)}
.hero-kick{
  display:block;margin:0 0 14px;font-size:clamp(17px,2.7vw,30px);line-height:1.55;
  font-weight:900;letter-spacing:.01em;color:var(--gold-lt);
}

.sec-title--big{font-size:clamp(32px,5.8vw,64px);line-height:1.22}

/* ---------- 見どころ ---------- */
.vfeat .vfeat-sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);line-height:1.75}

/* ---------- 入団方法 ---------- */
.sec--join{background:var(--ink-2)}
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:34px 0 0}
.steps li{padding:30px 26px;background:var(--ink)}
.step-n{display:block;font-size:clamp(46px,6vw,66px);line-height:1;color:var(--gold);margin-bottom:14px}
.steps h3{margin:0 0 10px;font-size:clamp(17px,2.2vw,20px);font-weight:900;line-height:1.55}
.steps p{margin:0;font-size:14.5px;line-height:1.85;color:var(--dim)}
.steps p b{color:var(--paper)}

.duty{margin-top:22px;padding:clamp(24px,3.4vw,38px);border:1px solid rgba(208,167,60,.42);background:rgba(208,167,60,.08)}
.duty-title{margin:0 0 16px;display:flex;align-items:center;gap:11px;font-size:clamp(18px,2.6vw,23px);font-weight:900;line-height:1.5}
.duty-title .i{color:var(--gold);width:26px;height:26px}

/* ○ の箇条書き（Lillaの書き方） */
.marks{display:grid;gap:11px}
.marks li{position:relative;padding-left:30px;font-size:15px;line-height:1.85;color:var(--dim)}
.marks li::before{content:"○";position:absolute;left:0;top:0;color:var(--gold);font-weight:900}
.marks b{color:var(--paper)}

/* ---------- 観覧チケット（半券） ---------- */
.stub{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  margin:0 0 18px;padding:22px 28px;background:var(--gold);color:#1C1C1C;
}
.stub::before,.stub::after{
  content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;
  background:var(--ink);transform:translateY(-50%);
}
.stub::before{left:-13px}
.stub::after{right:-13px}
.stub-l{padding-right:20px;border-right:2px dashed rgba(28,28,28,.42)}
.stub-k{margin:0;font-size:12px;letter-spacing:.3em}
.stub-n{margin:2px 0 0;font-size:clamp(20px,3vw,26px);font-weight:900;line-height:1.35}
.stub-s{margin:2px 0 0;font-size:12.5px;font-weight:700}
.stub-r{display:flex;align-items:baseline;gap:4px}
.stub-r b{font-size:clamp(48px,7vw,66px);line-height:1}
.stub-r span{font-size:18px;font-weight:900;font-family:"Noto Sans JP",sans-serif}

/* ---------- 締め・共有 ---------- */
.closer-note{margin:28px 0 0;font-size:14px;line-height:1.9;color:var(--dim)}
.closer-note a{color:var(--gold-lt);text-underline-offset:4px}
.closer-note a:hover{color:var(--paper)}

.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;
  transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:14px 22px;
  background:var(--gold);color:#1C1C1C;font-size:14px;font-weight:900;line-height:1.6;text-align:center;
  border-radius:4px;box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- レスポンシブ ---------- */
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:639px){
  .stub{padding:20px 22px;gap:14px}
  .stub-l{padding-right:14px}
  .hero-title--xl{margin-bottom:16px}
}

/* ---------- 日本語の折り返し ---------- */
.nw{white-space:nowrap}
h1,h2,h3,.sec-lead,.body,.hero-lead,.closer-title,.closer-sub,.steps p,.vfeat p,.marks li{word-break:auto-phrase}
h2,h3,.closer-title{text-wrap:balance}

/* ---------- 締めの集合写真：顔が見えるように、暗さを少し浅く ---------- */
.closer-ph img{filter:saturate(.85) contrast(1.02) brightness(1.18)}
.closer::after{background:linear-gradient(to bottom,var(--ink) 0%,rgba(18,18,18,.58) 20%,rgba(18,18,18,.64) 78%,var(--ink) 100%)}
.closer-title,.closer-sub{text-shadow:0 2px 22px rgba(0,0,0,.75)}