/* ══════════════════════════════════════════════
   射的・サバゲーページ専用スタイル
   ・common.css を読み込んだ「後」に読むこと
   ・すべての指定が .survival-page の中だけに効くので、
     トップページや他のページには影響しない
   ・色は common.css の配色を参照している
   ══════════════════════════════════════════════ */

/* ── メインビジュアルの写真 ──────────────────────
   写真を替えるときは、同じファイル名で上書きすれば
   このファイルもHTMLも触らなくて済みます。
   置き場所： /assets/img/survival/ */
.survival-page .mv .slide.s1{background-image:url("../img/survival/hero-1.jpg");background-image:image-set(url("../img/survival/hero-1.webp") type("image/webp"),url("../img/survival/hero-1.jpg") type("image/jpeg"))}
.survival-page .mv .slide.s2{background-image:url("../img/survival/hero-2.jpg");background-image:image-set(url("../img/survival/hero-2.webp") type("image/webp"),url("../img/survival/hero-2.jpg") type("image/jpeg"))}
.survival-page .mv .slide.s3{background-image:url("../img/survival/hero-3.jpg");background-image:image-set(url("../img/survival/hero-3.webp") type("image/webp"),url("../img/survival/hero-3.jpg") type("image/jpeg"))}
.survival-page .mv .slide.s4{background-image:url("../img/survival/hero-4.jpg");background-image:image-set(url("../img/survival/hero-4.webp") type("image/webp"),url("../img/survival/hero-4.jpg") type("image/jpeg"))}
.survival-page .mv .slide.s5{background-image:url("../img/survival/hero-5.jpg");background-image:image-set(url("../img/survival/hero-5.webp") type("image/webp"),url("../img/survival/hero-5.jpg") type("image/jpeg"))}

/* 写真の見せ位置（左下の見出しに人物がかからないよう1枚ずつ調整） */
.survival-page .mv .slide.s1{background-position:52% 40%}
.survival-page .mv .slide.s2{background-position:50% 38%}
.survival-page .mv .slide.s3{background-position:56% 40%}
.survival-page .mv .slide.s4{background-position:48% 36%}
.survival-page .mv .slide.s5{background-position:54% 34%}
@media (min-aspect-ratio: 17/10){
  .survival-page .mv .slide.s1{background-position:52% 32%}
  .survival-page .mv .slide.s2{background-position:50% 30%}
  .survival-page .mv .slide.s3{background-position:56% 32%}
  .survival-page .mv .slide.s4{background-position:48% 30%}
  .survival-page .mv .slide.s5{background-position:54% 28%}
}

/* ── 見出しの中で色を変える文字 ──────────────────
   <em>戦場。</em> のように使う */
.survival-page .mv-copy h1 em,
.survival-page .sec-title em,
.survival-page .book h2 em{font-style:normal;color:var(--mud)}

/* ══════════════════════════════════════════════
   冒頭「射的とサバゲー」＝このページの見せ場
   広い画面： 左に特大の見出し／右に説明とボタン
   狭い画面： 上下に積む（自動）
   ══════════════════════════════════════════════ */
.survival-page #about .panel__body{
  padding-top:clamp(40px,6.5vw,104px);
  padding-bottom:clamp(40px,6.5vw,104px);
}
.survival-page #about .sec-title{
  font-size:clamp(2.5rem,7.4vw,5.2rem);
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:none;
  margin:0 0 1.6rem;
}
.survival-page #about .sec-title em{display:block}
.survival-page #about .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36em}

@media(min-width:1000px){
  .survival-page #about .panel__body{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    column-gap:clamp(32px,4.5vw,86px);
    align-items:start;
  }
  .survival-page #about .sec-title{
    grid-column:1;grid-row:1 / span 4;
    align-self:center;margin:0;
  }
  .survival-page #about .lede,
  .survival-page #about .btnrow{grid-column:2}
  .survival-page #about .lede{margin-bottom:1.2rem}
  .survival-page #about .btnrow{margin-top:.6rem}
}

/* ── フィールド一覧 ──────────────────────────────
   広さ・地形・向いている人を並べて比べられるようにする */
.survival-page .fld{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:900px){.survival-page .fld{grid-template-columns:repeat(3,1fr)}}
/* サバゲーのフィールドは2面なので、2列で幅いっぱいに埋める */
@media(min-width:900px){.survival-page #sabage .fld{grid-template-columns:repeat(2,1fr)}}
.survival-page .fld .f{background:var(--ink);padding:clamp(18px,2.4vw,30px)}
.survival-page .fld .lv{
  font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mud-lt);display:block;margin-bottom:.5rem}
.survival-page .fld h3{font-weight:900;font-size:1.22rem;margin:0 0 .3rem;line-height:1.5}
.survival-page .fld .sz{
  font-family:"Anton",sans-serif;font-size:clamp(1.7rem,4vw,2.3rem);
  letter-spacing:.02em;color:var(--mud);line-height:1.1;margin:.4rem 0 .8rem}
.survival-page .fld .sz small{
  font-family:"Roboto Mono",monospace;font-size:.6rem;letter-spacing:.16em;
  color:var(--moss);display:block;margin-top:.25rem}
.survival-page .fld p{margin:0;font-size:.94rem;color:#B2B0A5;line-height:1.85}
.survival-page .fld ul{list-style:none;margin:.9rem 0 0;padding:0}
.survival-page .fld li{position:relative;padding:.3rem 0 .3rem 1.4em;font-size:.9rem;line-height:1.8;color:#C4C1B6}
.survival-page .fld li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--mud)}

/* ── 当日の流れ ────────────────────────────────── */
.survival-page .flow{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:640px){.survival-page .flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.survival-page .flow{grid-template-columns:repeat(4,1fr)}}
.survival-page .flow .st{background:var(--ink);padding:clamp(18px,2.2vw,26px)}
.survival-page .flow .no{
  font-family:"Anton",sans-serif;font-size:2.1rem;line-height:1;
  color:var(--mud);letter-spacing:.02em;display:block;margin-bottom:.5rem}
.survival-page .flow .t{font-weight:900;font-size:1.05rem;margin:0 0 .5rem;line-height:1.6}
.survival-page .flow .d{margin:0;font-size:.92rem;color:#B2B0A5;line-height:1.85}
.survival-page .flow .time{
  display:inline-block;margin-top:.7rem;
  font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  color:var(--moss);text-transform:uppercase}

/* ── 料金 ── */
.survival-page .fee{border-top:1px solid var(--line);margin:0 0 1.4rem;padding:0;list-style:none}
.survival-page .fee li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
.survival-page .fee .n{font-weight:700;font-size:1rem;line-height:1.6}
.survival-page .fee .n small{display:block;font-weight:400;font-size:.86rem;color:#B2B0A5;line-height:1.75;margin-top:.2rem}
.survival-page .fee .y{
  font-family:"Anton",sans-serif;font-size:clamp(1.35rem,3vw,1.8rem);
  letter-spacing:.03em;color:var(--mud);white-space:nowrap}
.survival-page .fee .y span{font-family:"Roboto Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  color:var(--moss);display:block;text-align:right;margin-top:.2rem}
.survival-page .fee-note{margin:0;font-size:.88rem;color:#B2B0A5;line-height:1.85}

/* ── 装備・持ち物 ── */
.survival-page .kit{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.survival-page .kit{grid-template-columns:repeat(3,1fr)}}
.survival-page .kit .col{background:var(--ink);padding:clamp(18px,2.4vw,28px)}
.survival-page .kit h3{
  font-family:"Roboto Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mud-lt);margin:0 0 1rem}
.survival-page .kit ul{list-style:none;margin:0;padding:0}
.survival-page .kit li{position:relative;padding:.45rem 0 .45rem 1.4em;font-size:.96rem;line-height:1.8}
.survival-page .kit li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--mud)}
.survival-page .kit li small{display:block;font-size:.85rem;color:#B2B0A5;line-height:1.75}

/* ── レギュレーション（表） ── */
.survival-page .reg{width:100%;border-collapse:collapse;font-size:.95rem;margin-bottom:1.3rem}
.survival-page .reg th,.survival-page .reg td{
  padding:.85rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.survival-page .reg th{
  color:var(--moss);font-family:"Roboto Mono",monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  white-space:nowrap;width:1%}
.survival-page .reg td .sub{display:block;margin-top:.3rem;font-size:.86rem;color:#B2B0A5;line-height:1.75}

/* ── 節の中の小見出し（貸切ゲーム／レンタル装備） ── */
.survival-page .sub-title{
  font-family:"Roboto Mono",monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mud-lt);
  margin:2.2rem 0 .2rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.survival-page .panel__body > .sub-title:first-child{margin-top:0}
.survival-page .sub-title + .fee{border-top:0}

/* ── レンジのスペック（数字を主役に） ── */
.survival-page #range .fld .sz{margin-top:.6rem}

/* ── お得な案内の枠 ──────────────────────────────
   注意書き（.alert＝黄色）と区別するため、
   セット割などの「お得な話」はブランド色（オレンジ）にする */
.survival-page .alert.is-good{
  border-color:var(--mud);
  background:rgba(232,100,30,.09);
}
.survival-page .alert.is-good .h{color:var(--mud-lt)}
.survival-page .alert.is-good strong{color:var(--sand)}