/* ══════════════════════════════════════════════
   その他のアクティビティページ専用スタイル
   ・common.css を読み込んだ「後」に読むこと
   ・すべての指定が .activity-page の中だけに効くので、
     トップページや他のページには影響しない
   ・色は common.css の配色を参照している
   ・当日の流れ／料金／持ち物は camp.css、組み合わせは bbq.css と
     同じ見た目にそろえてある
   ══════════════════════════════════════════════ */

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

     hero-1  ユンボを操作する参加者
     hero-2  倒木を切る・運ぶ
     hero-3  斧で薪を割る

   ★いまは 640×480 の写真を引き伸ばした仮の画像です。
   webp を先に、jpg を控えに置いている（image-set）。
   写真を差し替えたら webp も作り直すこと。               */
.activity-page .mv .slide.s1{background-image:url("../img/activity/hero-1.jpg");background-image:image-set(url("../img/activity/hero-1.webp") type("image/webp"),url("../img/activity/hero-1.jpg") type("image/jpeg"))}
.activity-page .mv .slide.s2{background-image:url("../img/activity/hero-2.jpg");background-image:image-set(url("../img/activity/hero-2.webp") type("image/webp"),url("../img/activity/hero-2.jpg") type("image/jpeg"))}
.activity-page .mv .slide.s3{background-image:url("../img/activity/hero-3.jpg");background-image:image-set(url("../img/activity/hero-3.webp") type("image/webp"),url("../img/activity/hero-3.jpg") type("image/jpeg"))}

/* 写真の見せ位置。左下に見出しが乗るので、
   縦長の画面でも人物が切れないよう、1枚ずつ位置を決めている。 */
.activity-page .mv .slide.s1{background-position:72% 40%}
.activity-page .mv .slide.s2{background-position:50% 50%}
.activity-page .mv .slide.s3{background-position:36% 55%}

@media (min-aspect-ratio: 17/10){
  .activity-page .mv .slide.s1{background-position:40% 44%}
  .activity-page .mv .slide.s2{background-position:60% 52%}
  .activity-page .mv .slide.s3{background-position:46% 58%}
}

/* ── メインビジュアルの見出し ──────────────────
   「普段さわれない」の7文字を1行に収めるため、
   狭い画面でだけ少し小さくしている（広い画面は共通のまま） */
@media(max-width:600px){
  .activity-page .mv-copy h1{font-size:clamp(2.6rem,11vw,3.6rem)}
}

/* ── 見出しの中で色を変える文字 ────────────────── */
.activity-page .mv-copy h1 em,
.activity-page .sec-title em,
.activity-page .book h2 em{font-style:normal;color:var(--mud)}

/* ══════════════════════════════════════════════
   冒頭「このページについて」
   広い画面： 左に大きな見出し／右に説明とボタン
   狭い画面： 上下に積む（自動）
   ══════════════════════════════════════════════ */
.activity-page #about .panel__body{
  padding-top:clamp(40px,6.5vw,104px);
  padding-bottom:clamp(40px,6.5vw,104px);
}
.activity-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;
}
.activity-page #about .sec-title em{display:block}
.activity-page #about .lede{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:36em}
.activity-page #about .lede + .lede{margin-top:1rem}

@media(min-width:1000px){
  .activity-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;
  }
  .activity-page #about .sec-title{
    grid-column:1;grid-row:1 / span 8;
    align-self:center;margin:0;
  }
  .activity-page #about .lede,
  .activity-page #about .btnrow{grid-column:2}
  .activity-page #about .btnrow{margin-top:1.4rem}
}

/* ── 当日の流れ（camp.css と同じ） ────────────── */
.activity-page .flow{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:640px){.activity-page .flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.activity-page .flow{grid-template-columns:repeat(5,1fr)}}
.activity-page .flow .st{background:var(--ink);padding:clamp(18px,2.2vw,26px)}
.activity-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}
.activity-page .flow .t{font-weight:900;font-size:1.05rem;margin:0 0 .5rem;line-height:1.6}
.activity-page .flow .d{margin:0;font-size:.92rem;color:#B2B0A5;line-height:1.85}
.activity-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}

/* ── 料金（camp.css と同じ） ─────────────────── */
.activity-page .fee{border-top:1px solid var(--line);margin:0 0 1.4rem;padding:0;list-style:none}
.activity-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)}
.activity-page .fee .n{font-weight:700;font-size:1rem;line-height:1.6}
.activity-page .fee .n small{display:block;font-weight:400;font-size:.86rem;color:#B2B0A5;line-height:1.75;margin-top:.2rem}
.activity-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}
.activity-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}
.activity-page .fee-note{margin:0;font-size:.88rem;color:#B2B0A5;line-height:1.85}

/* ── 組み合わせ（bbq.css と同じ） ──────────────
   A/B/C の3枚。遊びを足すときは HTML の .cb をコピーして増やす */
.activity-page .combo{
  display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.activity-page .combo{grid-template-columns:repeat(3,1fr)}}
.activity-page .combo .cb{
  background:var(--ink);padding:clamp(20px,2.6vw,32px);
  display:flex;flex-direction:column}
.activity-page .combo .no{
  font-family:"Anton",sans-serif;font-size:2.4rem;line-height:1;
  color:var(--mud);letter-spacing:.04em;display:block;margin-bottom:.6rem}
.activity-page .combo h3{
  font-size:1.18rem;font-weight:900;line-height:1.55;margin:0 0 .8rem;
  letter-spacing:-.01em}
.activity-page .combo .d{margin:0;font-size:.96rem;color:#C4C1B6;line-height:1.9;flex:1 0 auto}
.activity-page .combo .w{
  margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:"Roboto Mono",monospace;font-size:.72rem;letter-spacing:.06em;line-height:1.8}
.activity-page .combo .w a{color:var(--mud-lt);text-decoration:none}
.activity-page .combo .w a:hover{color:#FFB37A}

/* ── 服装と持ち物（camp.css と同じ） ─────────── */
.activity-page .kit{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.activity-page .kit{grid-template-columns:repeat(3,1fr)}}
.activity-page .kit .col{background:var(--ink);padding:clamp(18px,2.4vw,28px)}
.activity-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}
.activity-page .kit ul{list-style:none;margin:0;padding:0}
.activity-page .kit li{position:relative;padding:.45rem 0 .45rem 1.4em;font-size:.96rem;line-height:1.8}
.activity-page .kit li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--mud)}
.activity-page .kit li small{display:block;font-size:.85rem;color:#B2B0A5;line-height:1.75}

/* ── 本文中で目立たせる文字 ────────────────── */
.activity-page .lede b,
.activity-page .qa .a p b,
.activity-page .alert p b{font-weight:700;color:var(--sand)}

/* ── コスプレ撮影 ──────────────────────────────
   左に写真2枚（縦に積む）／右に説明。狭い画面では上下に積む */
.activity-page .cos-duo{margin:1.8rem 0 1.6rem}
.activity-page .cos-pics{display:grid;gap:1px;background:var(--line)}
.activity-page .cos-pics img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border:0}
.activity-page .cos-txt h3{font-weight:900;font-size:1.1rem;line-height:1.6;margin:0 0 .4rem}
.activity-page .cos-txt h3:not(:first-child){margin-top:1.4rem}
.activity-page .cos-txt p{margin:0;font-size:.95rem;color:#B2B0A5;line-height:1.9}

/* ── 公道走行可能レンタルバギー ────────────────
   左端にオレンジの線と目印（camp.css の宿泊パックと同じ見せ方） */
.activity-page #rental .panel__body{border-left:2px solid var(--mud)}
.activity-page .pick{
  display:inline-block;margin:0 0 1rem;
  font-family:"Roboto Mono",monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#12211A;background:var(--mud);padding:.3em .9em}
.activity-page #rental .fee{margin-top:1.6rem}
.activity-page #rental .fee .n small b{font-weight:700;color:var(--sand)}