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

/* ── メインビジュアルの写真 ──────────────────────
   common.css の .s1〜.s6 はトップページ用。ここで上書きする。
   写真を替えるときは、下の5行のファイル名だけ差し替える。
   置き場所： /assets/img/service/

     hero-1  撮影・ロケの様子
     hero-2  KYMCOのバギー（森のコース）
     hero-3  KYMCOのバギー（試乗の様子）
     hero-4  山小屋かカフェスペース
     hero-5  団体・法人でのご利用

   webp を先に、jpg を控えに置いている（image-set）。
   写真を差し替えたら webp も作り直すこと。               */
.service-page .mv .slide.s1{background-image:url("../img/service/hero-1.jpg");background-image:image-set(url("../img/service/hero-1.webp") type("image/webp"),url("../img/service/hero-1.jpg") type("image/jpeg"))}
.service-page .mv .slide.s2{background-image:url("../img/service/hero-2.jpg");background-image:image-set(url("../img/service/hero-2.webp") type("image/webp"),url("../img/service/hero-2.jpg") type("image/jpeg"))}
.service-page .mv .slide.s3{background-image:url("../img/service/hero-3.jpg");background-image:image-set(url("../img/service/hero-3.webp") type("image/webp"),url("../img/service/hero-3.jpg") type("image/jpeg"))}
.service-page .mv .slide.s4{background-image:url("../img/service/hero-4.jpg");background-image:image-set(url("../img/service/hero-4.webp") type("image/webp"),url("../img/service/hero-4.jpg") type("image/jpeg"))}
.service-page .mv .slide.s5{background-image:url("../img/service/hero-5.jpg");background-image:image-set(url("../img/service/hero-5.webp") type("image/webp"),url("../img/service/hero-5.jpg") type("image/jpeg"))}

/* 写真の見せ位置。左下に見出しが乗るので、
   主役がそこに来ないよう1枚ずつずらしている。 */
.service-page .mv .slide.s1{background-position:44% 45%}
.service-page .mv .slide.s2{background-position:55% 50%}
.service-page .mv .slide.s3{background-position:58% 42%}
.service-page .mv .slide.s4{background-position:58% 42%}
.service-page .mv .slide.s5{background-position:50% 55%}

@media (min-aspect-ratio: 17/10){
  .service-page .mv .slide.s1{background-position:44% 40%}
  .service-page .mv .slide.s2{background-position:55% 56%}
  .service-page .mv .slide.s3{background-position:58% 46%}
  .service-page .mv .slide.s4{background-position:58% 46%}
  .service-page .mv .slide.s5{background-position:50% 60%}
}

/* ── 見出しの中で色を変える文字 ──────────────────
   <em>この森で撮っています。</em> のように使う */
.service-page .mv-copy h1 em,
.service-page .sec-title em,
.service-page .book h2 em{font-style:normal;color:var(--mud)}

/* ══════════════════════════════════════════════
   冒頭「このページについて」
   広い画面： 左に大きな見出し／右に説明とボタン
   狭い画面： 上下に積む（自動）
   キャンプページと同じ組み方
   ══════════════════════════════════════════════ */
.service-page #about .panel__body{
  padding-top:clamp(40px,6.5vw,104px);
  padding-bottom:clamp(40px,6.5vw,104px);
}
.service-page #about .sec-title{
  font-size:clamp(2.6rem,8vw,6rem);
  line-height:1.06;
  letter-spacing:-.03em;
  max-width:none;
  margin:0 0 1.6rem;
}
.service-page #about .sec-title em{display:block}
.service-page #about .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36em}

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

/* ── 各サービスの中の段落 ───────────────────── */
.service-page .lede + .lede{margin-top:1rem}
.service-page .lede b,
.service-page .qa .a p b,
.service-page .pts dd b{font-weight:700;color:var(--sand)}

/* ── 写真＋要点（duo の右側に置く一覧） ────────────
   <dl class="pts"> の中に <div><dt>見出し</dt><dd>説明</dd></div> を並べる */
.service-page .duo{margin-top:1.8rem;align-items:start}
.service-page .duo img{aspect-ratio:4/3;height:auto}
.service-page .pts{margin:0;border-top:1px solid var(--line)}
.service-page .pts > div{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){
  .service-page .pts > div{grid-template-columns:8.5rem 1fr;gap:1.2rem}
}
.service-page .pts dt{
  font-weight:900;font-size:.98rem;line-height:1.7;color:var(--sand)}
.service-page .pts dd{margin:0;font-size:.94rem;color:#B2B0A5;line-height:1.85}

/* ── 料金 ────────────────────────────────── */
.service-page .fee{border-top:1px solid var(--line);margin:1.6rem 0 1.4rem;padding:0;list-style:none}
.service-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)}
.service-page .fee .n{font-weight:700;font-size:1rem;line-height:1.6}
.service-page .fee .n small{display:block;font-weight:400;font-size:.86rem;color:#B2B0A5;line-height:1.75;margin-top:.2rem}
.service-page .fee .n small b{font-weight:700;color:var(--sand)}
.service-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}
/* 金額ではなく「ご相談」などの文字のときは、少し小さく */
.service-page .fee .y.is-word{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;
  font-size:clamp(1.05rem,2.2vw,1.3rem);letter-spacing:.04em}
.service-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;font-weight:400}
.service-page .fee-note{margin:0;font-size:.88rem;color:#B2B0A5;line-height:1.85}
.service-page .fee-note b{color:var(--sand);font-weight:700}

/* ── 3列の一覧（撮影で使えるもの など） ─────────── */
.service-page .kit{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.service-page .kit{grid-template-columns:repeat(3,1fr)}}
.service-page .kit .col{background:var(--ink);padding:clamp(18px,2.4vw,28px)}
.service-page .kit h3{
  font-family:"Roboto Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  color:var(--mud-lt);margin:0 0 1rem}
.service-page .kit ul{list-style:none;margin:0;padding:0}
.service-page .kit li{position:relative;padding:.45rem 0 .45rem 1.4em;font-size:.96rem;line-height:1.8}
.service-page .kit li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--mud)}
.service-page .kit li small{display:block;font-size:.85rem;color:#B2B0A5;line-height:1.75}

/* ══════════════════════════════════════════════
   撮影実績（クレジット）
   このページでいちばん目立たせる所。
   局名を小さく、番組名を大きく並べて、
   映画のエンドロールのように読ませる。
   行を足すときは <div class="cr"> をコピーする。
   ══════════════════════════════════════════════ */
.service-page .credits-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:clamp(26px,3.4vw,44px) clamp(18px,3.4vw,52px) 0}
.service-page .credits-head h3{margin:0;font-weight:900;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.5}
.service-page .credits-head p{margin:0;font-family:"Roboto Mono",monospace;font-size:.66rem;
  letter-spacing:.16em;color:var(--moss)}
.service-page .credits{
  display:grid;gap:0 clamp(28px,4vw,64px);
  padding:1rem clamp(18px,3.4vw,52px) clamp(28px,4vw,52px)}
@media(min-width:900px){.service-page .credits{grid-template-columns:1fr 1fr}}
.service-page .cr{
  display:grid;grid-template-columns:1fr;gap:.3rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){.service-page .cr{grid-template-columns:7.5rem 1fr;gap:1.2rem}}
.service-page .cr .ch{
  font-family:"Roboto Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  color:var(--mud-lt);line-height:1.6;padding-top:.5em}
.service-page .cr .ti{margin:0;padding:0;list-style:none}
.service-page .cr .ti li{
  font-weight:900;font-size:clamp(1.08rem,1.9vw,1.4rem);line-height:1.5;
  color:var(--sand);letter-spacing:.01em}
.service-page .cr .ti li + li{margin-top:.35rem}
/* 本数の多い行（YouTube・雑誌）は横幅いっぱいに流し込む */
.service-page .cr.is-long{grid-column:1 / -1}
.service-page .cr.is-long .ti{display:flex;flex-wrap:wrap;gap:.15rem 0}
.service-page .cr.is-long .ti li{
  font-weight:500;font-size:clamp(.94rem,1.4vw,1.05rem);color:#D6D2C4;margin:0}
.service-page .cr.is-long .ti li:not(:last-child)::after{content:"／";color:var(--moss);margin:0 .5em}

/* 実績の下のボタン。上の余白は実績側で取っているので詰める */
.service-page .credits + .panel__body{padding-top:0}

/* ── 目印（法人向け など） ─────────────────── */
.service-page .pick{
  display:inline-block;margin:0 0 1rem;
  font-family:"Roboto Mono",monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.18em;
  color:#12211A;background:var(--mud);padding:.3em .9em}
.service-page #group .panel__body{border-left:2px solid var(--mud)}

/* ── ボタンの上の余白 ───────────────────────── */
.service-page .panel__body > .btnrow{margin-top:1.8rem}
.service-page .book .panel__body > .btnrow,
.service-page .book .inner .btnrow{margin-top:0}

/* 「Wi-Fi」などを途中で折り返さない */
.service-page .nw{white-space:nowrap}