/* ══════════════════════════════════════════════
   CIMAX × 東京バギー村 ／ 全ページ共通スタイル
   ここを直すと全ページに反映されます
   ══════════════════════════════════════════════ */

:root{
  --ink:    #10201A;
  --forest: #17301F;
  --moss:   #6F8C6A;
  --sand:   #E9E4D6;
  --mud:    #E8641E;
  --mud-lt: #F5904A;
  --signal: #F2C230;

  --hdr-bg: #12211A;
  --hdr-div: rgba(233,228,214,.12);
  --hdr-total: 112px;          /* JSで実測値に更新 */
  --line: rgba(233,228,214,.18);
  --panel-bg: rgba(16,32,26,.74);
  --maxw: none;                /* 本文は画面幅いっぱい */
  --gut: clamp(14px, 3.4vw, 40px);
  --mv-pad: clamp(18px, 3vw, 56px);   /* メインビジュアルの左右余白 */
  /* 写真の明るさ・コントラストは画像ファイル側に焼き込み済み。
     CSSフィルタは大画面でスクロールが重くなるため使わない。 */
  --mv-shade: .40;                    /* 覆いの濃さ（画面幅ごとに下で上書き） */
}

/* 画面が広いほど文字と写真が離れるので、覆いを薄くして写真を明るく見せる */
@media(min-width:780px){ :root{--mv-shade:.34} }
@media(min-width:1200px){:root{--mv-shade:.26} }
@media(min-width:1600px){:root{--mv-shade:.20} }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;
  /* ヘッダーが画面上部に居座るので、その分だけ着地点を下げる */
  scroll-padding-top:var(--hdr-total)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  font-weight:400;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  /* 横のはみ出しを切る。hidden にするとヘッダーの貼り付きが効かなくなる端末があるため clip */
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ── 日本語の改行ルール ────────────────────────
   auto-phrase：文節の切れ目で折り返す（「森の数だ／けある」のような
   途中切れを防ぐ）。対応していないブラウザでは従来どおり折り返す。
   line-break:strict：小さい「っ」「ゃ」や長音符が行頭に来ないようにする。 */
h1,h2,h3,h4,p,li,figcaption,.lede,.act .txt,.acc-list .v{
  word-break:auto-phrase;
  line-break:strict;
  overflow-wrap:break-word;
}
/* 見出しは行の長さを揃え、本文は最終行が1文字だけ残るのを避ける */
h1,h2,h3{text-wrap:balance}
p,.lede,li{text-wrap:pretty}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ── 地色：等高線 ───────────────────────────── */
.contour{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Cg fill='none' stroke='%236F8C6A' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M0 90 C200 20 340 170 520 110 C700 50 860 190 1040 120 C1120 90 1160 100 1200 90'/%3E%3Cpath d='M0 210 C190 150 330 290 520 230 C710 170 870 300 1050 240 C1130 215 1165 220 1200 210'/%3E%3Cpath d='M0 330 C180 280 340 400 520 350 C700 300 880 410 1060 360 C1135 340 1168 336 1200 330'/%3E%3Cpath d='M0 470 C210 400 360 540 540 480 C720 420 880 550 1060 490 C1135 466 1170 478 1200 470'/%3E%3Cpath d='M0 610 C200 545 350 680 530 620 C710 560 880 690 1060 630 C1135 606 1170 618 1200 610'/%3E%3Cpath d='M0 750 C190 690 340 820 520 765 C700 710 880 830 1060 775 C1135 753 1170 758 1200 750'/%3E%3Cpath d='M0 890 C210 820 360 960 540 900 C720 840 880 970 1060 910 C1135 886 1170 898 1200 890'/%3E%3Cpath d='M0 1030 C190 975 340 1100 520 1045 C700 990 880 1110 1060 1055 C1135 1033 1170 1038 1200 1030'/%3E%3Cpath d='M0 1160 C200 1100 350 1225 530 1170 C710 1115 880 1235 1060 1180 C1135 1158 1170 1166 1200 1160'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:center;
}
header,main,footer{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(10px,1.2vw,20px)}

/* ══════════════════════════════════════════════
   ヘッダー（2段）
   ══════════════════════════════════════════════ */
/* ヘッダーは画面の上に貼り付いたまま。スクロールしても一緒に流れない */
.site-header{
  position:-webkit-sticky;position:sticky;top:0;z-index:60;
  background:var(--hdr-bg);
}
.hdr-top{border-bottom:1px solid var(--hdr-div)}
.hdr-top-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:.5rem clamp(14px,3vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.hdr-left{display:flex;align-items:center;gap:clamp(8px,1.1vw,14px);min-width:0}

/* ロゴは「CIMAX × 東京バギー村」が1枚に入った画像。文字は付けない */
.logo{
  display:inline-flex;align-items:center;
  text-decoration:none;min-width:0;
}
.logo img{
  height:clamp(30px,4.4vw,42px);width:auto;flex:none;
  max-width:min(58vw,340px);object-fit:contain;object-position:left center;
}
/* フッターは少し大きく、中央に置く */
.site-footer .logo img{height:clamp(34px,5.6vw,52px);max-width:min(78vw,420px)}

/* 上段のリンクも下段と同じく枠で囲う */
.hdr-link{
  flex:none;color:var(--mud-lt);text-decoration:none;
  font-weight:600;font-size:clamp(.78rem,1.3vw,.92rem);
  letter-spacing:.02em;white-space:nowrap;line-height:1;
  display:inline-flex;align-items:center;
  padding:.7em 1.15em;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--hdr-div);
  transition:color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hdr-link:hover{
  color:#FFB37A;background:rgba(232,100,30,.12);
  box-shadow:inset 0 0 0 1px var(--mud);
}
/* SNSリンク（アイコン＋文字）。文字はスマホでは隠してアイコンだけにする */
.hdr-link.is-sns{display:inline-flex;align-items:center;gap:.42em}
.hdr-link.is-sns svg{width:1.15em;height:1.15em;flex:none;display:block}
@media (max-width:560px){
  .hdr-link.is-sns .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hdr-link.is-sns{gap:0;padding:.6em .7em}
}

.hdr-book{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--mud);color:var(--hdr-bg);border-radius:3px;
  font-weight:700;font-size:clamp(.92rem,1.8vw,1.08rem);letter-spacing:.04em;
  text-decoration:none;padding:.82em 1.7em;white-space:nowrap;
  transition:background .18s ease;
}
.hdr-book:hover{background:#FF8B45}
/* 予約まわりのボタン2つ（予約する＝塗り／予約表＝枠線のみ） */
.hdr-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.hdr-book.is-ghost{
  background:transparent;color:var(--mud-lt);
  box-shadow:inset 0 0 0 1px var(--mud);
  font-weight:600;
}
.hdr-book.is-ghost:hover{background:rgba(232,100,30,.14);color:#FFB37A}
@media (max-width:420px){
  .hdr-cta{gap:.4rem}
  .hdr-book{padding:.78em 1.1em;font-size:.9rem}
}

.nav-row{border-bottom:1px solid var(--hdr-div)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,3vw,40px)}
.nav{
  display:flex;align-items:center;min-width:0;
  height:52px;justify-content:flex-start;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to right,#000 90%,transparent 100%);
  mask-image:linear-gradient(to right,#000 90%,transparent 100%);
}
.nav::-webkit-scrollbar{display:none}
/* 1項目ずつ枠で囲って、押せる場所をはっきりさせる */
.nav a{
  color:var(--mud-lt);text-decoration:none;
  font-weight:600;font-size:.84rem;letter-spacing:.02em;
  white-space:nowrap;line-height:1;
  scroll-snap-align:start;
  display:inline-flex;align-items:center;
  padding:.6em .95em;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--hdr-div);
  transition:color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* 今いるページの項目は、マウスを乗せたときと同じ見た目にして現在地を示す。
   各ページのHTMLで、その項目に aria-current="page" を付けること。 */
.nav a[aria-current="page"]{
  color:#FFB37A;background:rgba(232,100,30,.12);
  box-shadow:inset 0 0 0 1px var(--mud);
}
.nav a:hover{
  color:#FFB37A;background:rgba(232,100,30,.12);
  box-shadow:inset 0 0 0 1px var(--mud);
}

@media(min-width:780px){
  .nav{
    overflow:visible;justify-content:center;
    gap:clamp(8px,1.1vw,14px);height:56px;
    -webkit-mask-image:none;mask-image:none;
  }
  .nav a{font-size:.92rem;padding:.65em 1.15em}
}
@media(min-width:1080px){
  .nav{gap:clamp(12px,1.4vw,18px);height:60px}
  .nav a{font-size:.98rem;padding:.7em 1.35em}
}
@media(min-width:1400px){
  .nav{gap:clamp(14px,1.6vw,22px)}
  .nav a{font-size:1.02rem;padding:.72em 1.5em}
}

/* ══════════════════════════════════════════════
   メインビジュアル ── 全画面（フルブリード）
   ヘッダーを除いた高さいっぱいに写真を敷く
   ══════════════════════════════════════════════ */
.mv{
  position:relative;width:100%;
  height:calc(100svh - var(--hdr-total));  /* ヘッダーを除いた画面いっぱい */
  min-height:520px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:#0E1A14;
}

/* ══ メインビジュアルのスライド（紙芝居） ══
   ・1枚あたり5秒で自動送り、切り替えはクロスフェード
   ・写真の差し替えは HTML 側の style="--img:url('～')" の1行
   ・.ph が付いているスライドは差し替え待ちの枠 */
.mv-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide{
  position:absolute;inset:0;
  background-repeat:no-repeat;        /* 敷き詰めない */
  background-size:cover;              /* 枠いっぱいに拡大 */
  background-position:center 45%;     /* 既定の見せ位置（各スライドで上書き） */
  opacity:0;visibility:hidden;
  transition:opacity 1.1s ease, visibility 0s linear 1.1s;
}
.slide.is-on{opacity:1;visibility:visible;transition:opacity 1.1s ease, visibility 0s}
/* 動きを控える設定のときは、フェードをやめて瞬時に切り替える（切り替え自体は行う） */
@media (prefers-reduced-motion: reduce){
  .slide,
  .act .shot img,.act .shot img.is-on,
  .gallery img,.gallery img.is-on{transition:none}
  .act:hover .shot img.is-on,.gallery figure:hover img.is-on{transform:none}
}
/* 各スライドの写真（画面幅で軽量版と高画質版を出し分け／WebP対応）
   ・1行目の url() は WebP 非対応ブラウザ向けの保険。消さないこと
   ・image-set の行が対応ブラウザで優先される
   ・スマホ（640px以下）には -sm 版を出す（下の @media を参照） */
.s1{background-image:url("../img/top/hero-1.jpg");background-image:image-set(url("../img/top/hero-1.webp") type("image/webp"),url("../img/top/hero-1.jpg") type("image/jpeg"))}
.s2{background-image:url("../img/top/hero-2.jpg");background-image:image-set(url("../img/top/hero-2.webp") type("image/webp"),url("../img/top/hero-2.jpg") type("image/jpeg"))}
.s3{background-image:url("../img/top/hero-3.jpg");background-image:image-set(url("../img/top/hero-3.webp") type("image/webp"),url("../img/top/hero-3.jpg") type("image/jpeg"))}
.s4{background-image:url("../img/top/hero-4.jpg");background-image:image-set(url("../img/top/hero-4.webp") type("image/webp"),url("../img/top/hero-4.jpg") type("image/jpeg"))}
.s5{background-image:url("../img/top/hero-5.jpg");background-image:image-set(url("../img/top/hero-5.webp") type("image/webp"),url("../img/top/hero-5.jpg") type("image/jpeg"))}
.s6{background-image:url("../img/top/hero-6.jpg");background-image:image-set(url("../img/top/hero-6.webp") type("image/webp"),url("../img/top/hero-6.jpg") type("image/jpeg"))}

/* @preview-strip-start  ※プレビュー版を作るときはこのブロックを外す */
@media (max-width:640px){
  .s1{background-image:url("../img/top/hero-1-sm.jpg");background-image:image-set(url("../img/top/hero-1-sm.webp") type("image/webp"),url("../img/top/hero-1-sm.jpg") type("image/jpeg"))}
  .s2{background-image:url("../img/top/hero-2-sm.jpg");background-image:image-set(url("../img/top/hero-2-sm.webp") type("image/webp"),url("../img/top/hero-2-sm.jpg") type("image/jpeg"))}
  .s3{background-image:url("../img/top/hero-3-sm.jpg");background-image:image-set(url("../img/top/hero-3-sm.webp") type("image/webp"),url("../img/top/hero-3-sm.jpg") type("image/jpeg"))}
  .s4{background-image:url("../img/top/hero-4-sm.jpg");background-image:image-set(url("../img/top/hero-4-sm.webp") type("image/webp"),url("../img/top/hero-4-sm.jpg") type("image/jpeg"))}
  .s5{background-image:url("../img/top/hero-5-sm.jpg");background-image:image-set(url("../img/top/hero-5-sm.webp") type("image/webp"),url("../img/top/hero-5-sm.jpg") type("image/jpeg"))}
  .s6{background-image:url("../img/top/hero-6-sm.jpg");background-image:image-set(url("../img/top/hero-6-sm.webp") type("image/webp"),url("../img/top/hero-6-sm.jpg") type("image/jpeg"))}
}
/* @preview-strip-end */
/* スライドごとの見せ位置（横=スマホの左右の切り出し／縦=PCの上下の切り出し）
   ・被写体が中央〜右上に来て、左下の見出し帯にかからないよう1枚ずつ調整 */
.s1{background-position:44% 45%}   /* 取材の1枚（YouTube） */
.s2{background-position:42% 40%}   /* スタッフが押す子ども */
.s3{background-position:48% 42%}   /* 夕方のグループ */
.s4{background-position:62% 45%}   /* 泥を落とす（青空） */
.s5{background-position:52% 40%}   /* シャワーで流す */
.s6{background-position:58% 42%}   /* シニアの2人乗り */


/* 横に長く高さが低い画面（最大化したPCなど）は上下が大きく切れるため、
   被写体の頭が切れないよう1枚ずつ上寄りに切り出す */
@media (min-aspect-ratio: 17/10){
  .s1{background-position:44% 42%}
  .s2{background-position:42% 24%}
  .s3{background-position:48% 34%}
  .s4{background-position:62% 34%}
  .s5{background-position:52% 28%}
  .s6{background-position:58% 30%}
}
@media (min-aspect-ratio: 21/10){
  .s1{background-position:44% 40%}
  .s2{background-position:42% 16%}
  .s3{background-position:48% 30%}
  .s4{background-position:62% 30%}
  .s5{background-position:52% 24%}
  .s6{background-position:58% 26%}
}

/* 文字を読ませるための覆い */
.mv-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,   rgba(16,32,26,.95) 0%, rgba(16,32,26,.18) 46%, rgba(16,32,26,.42) 100%),
    linear-gradient(to right, rgba(16,32,26,.72) 0%, rgba(16,32,26,.12) 46%, transparent 72%);
}
/* スライドの丸ボタン */
.mv-dots{
  position:absolute;z-index:4;left:var(--mv-pad);
  bottom:clamp(18px,2.6vw,32px);
  display:flex;gap:.55rem;
}
.mv-dots button{
  width:34px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(233,228,214,.32);transition:background .2s ease;
}
.mv-dots button[aria-current="true"]{background:var(--mud)}
.mv-dots button:hover{background:rgba(233,228,214,.6)}

/* 四隅ブラケット */
.mv-hud{position:absolute;inset:12px;z-index:3;pointer-events:none}
.mv-hud i{position:absolute;width:24px;height:24px;border:1px solid rgba(233,228,214,.45)}
.mv-hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.mv-hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.mv-hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.mv-hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* 取材バッジ */
.mv-media{
  position:absolute;z-index:4;
  top:clamp(16px,2.4vw,28px);left:var(--mv-pad);
  right:var(--mv-pad);max-width:max-content;
  display:inline-flex;align-items:center;gap:.85em;
  padding:.6em .9em;text-decoration:none;
  background:rgba(16,32,26,.86);
  border:1px solid var(--line);border-left:3px solid var(--mud);
  /* 1枚目のスライドのときだけ表示する */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:background .18s ease, transform .18s ease,
             opacity 1.6s cubic-bezier(.16,.8,.24,1), visibility 0s linear 1.6s;
}
.mv-media.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:background .18s ease, transform .18s ease,
             opacity 1.6s cubic-bezier(.16,.8,.24,1), visibility 0s;
}
.mv-media:hover{background:rgba(16,32,26,.94);transform:translateY(-1px)}
.mv-media .lbl{
  font-family:"Roboto Mono",monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mud-lt);flex:none;
}
.mv-media .txt{font-weight:700;font-size:clamp(.78rem,1.6vw,.94rem);line-height:1.5;color:var(--sand)}
.mv-media .arw{color:var(--mud-lt);font-size:.85em;flex:none}
@media(max-width:520px){
  .mv-media{gap:.55em;padding:.5em .75em}
  .mv-media .lbl{display:none}
}

/* 見出し */
.mv-copy{
  position:relative;z-index:2;width:100%;
  padding:0 var(--mv-pad) clamp(58px,7vw,96px);
}
.mv-copy h1{
  font-weight:900;font-size:clamp(3.6rem,13vw,9.5rem);line-height:.94;
  letter-spacing:-.015em;margin:0 0 1rem;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.75), 0 6px 34px rgba(0,0,0,.6);
}
.mv-copy h1 em{font-style:normal;color:var(--mud)}
.mv-copy .sub{
  max-width:23em;font-size:clamp(1.02rem,2.2vw,1.2rem);line-height:1.75;color:#E4E0D4;
  margin:0 0 1.8rem;text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.7);
}
.mv-copy .btnrow{display:flex;flex-wrap:wrap;gap:.75rem}

/* スクロール誘導 */
.scrollcue{
  position:absolute;z-index:4;right:var(--mv-pad);
  bottom:clamp(26px,3.8vw,48px);
  font-family:"Roboto Mono",monospace;font-size:.62rem;letter-spacing:.24em;
  color:#C8CFC4;text-transform:uppercase;display:none;
}
@media(min-width:820px){.scrollcue{display:block}}
.scrollcue i{display:block;margin:.5rem auto 0;width:1px;height:26px;
  background:linear-gradient(to bottom,var(--mud),transparent);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.scrollcue i{animation:none}}

/* ══════════════════════════════════════════════
   パネル（本文）
   ══════════════════════════════════════════════ */
.panel{border:1px solid var(--line);background:var(--panel-bg);position:relative}
.panel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem clamp(14px,2vw,22px);border-bottom:1px solid var(--line);
  font-family:"Roboto Mono",monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--moss);line-height:1.6;
}
.panel__bar .l{display:inline-flex;align-items:center;gap:.7em;min-width:0}
.panel__bar .l::before{content:"";width:7px;height:7px;background:var(--mud);flex:none}
.panel__bar .r{white-space:nowrap;opacity:.75}
.panel__body{padding:clamp(24px,4.4vw,60px) clamp(18px,3.4vw,52px)}
.acts + .panel__body,.panel__body:has(+ .acts){padding-bottom:clamp(18px,2.6vw,34px)}

h2.sec-title{font-weight:900;font-size:clamp(1.8rem,4.8vw,3rem);line-height:1.38;
  margin:0 0 1.3rem;letter-spacing:.01em;max-width:16em}
.lede{color:#C4C1B6;font-size:1.04rem;line-height:1.85;
  max-width:30em;                     /* 全角30字前後で折り返す */
  margin:0 0 2.4rem}
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-weight:700;font-size:.92rem;letter-spacing:.04em;text-decoration:none;
  padding:.95em 1.6em;border:1px solid var(--mud);color:var(--sand);
  background:var(--mud);border-radius:3px;
  transition:transform .18s ease,background .18s ease;
}
.btn:hover{background:#ff7526;transform:translateY(-2px)}
.btn.ghost{background:rgba(16,32,26,.5);border-color:var(--line)}
.btn.ghost:hover{background:rgba(233,228,214,.12);border-color:var(--sand)}
.btnrow{display:flex;flex-wrap:wrap;gap:.75rem}
main{padding:0 0 clamp(40px,6vw,80px)}
section[id]{scroll-margin-top:calc(var(--hdr-total) + 12px)}
.after-mv{padding-top:var(--gut)}
.block{margin-top:clamp(14px,2.2vw,26px)}

/* ── アクティビティ ─────────────────────────── */
/* 横並びで折り返す方式。最後の行のカードが自動的に伸びて幅いっぱいを埋めるので、
   枚数や列数に関係なく空きマスが出ない */
.acts{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.act{flex:1 1 320px;min-width:0}
.act{background:var(--ink);display:flex;flex-direction:column;text-decoration:none;
  min-height:0;transition:background .2s ease}
/* 幅が広いカードは「写真左・文字右」に切り替える（写真が横長になるのを防ぐ）。
   切り替えの判定は、カードの実寸を見てJS側で is-row を付けている */
.acts .act.is-row{flex-direction:row}
.acts .act.is-row .shot{flex:0 0 54%;min-height:clamp(230px,19vw,380px)}
.acts .act.is-row .txt{flex:0 0 46%;align-self:center}
.acts .act.is-row h3{font-size:1.45rem}
.acts .act.is-row p{font-size:.95rem}
.act:hover{background:var(--forest)}
.act .shot{
  flex:1 1 auto;                       /* 余った高さは写真が吸収する */
  min-height:clamp(190px,17vw,340px);
  background:linear-gradient(160deg,#223A28,#152219);
  display:grid;place-items:center;overflow:hidden}
.act .txt{flex:0 0 auto}
.act .shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, transform .5s ease, visibility 0s linear .9s;
}
.act .shot img.is-on{opacity:1;visibility:visible;
  transition:opacity .9s ease, transform .5s ease, visibility 0s}
.act:hover .shot img.is-on{transform:scale(1.04)}
.act .shot{position:relative}
/* 何枚あるかを示す小さな点 */
.shot-dots{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;gap:4px}
.shot-dots i{width:5px;height:5px;background:rgba(233,228,214,.45);border-radius:50%}
.shot-dots i.on{background:var(--mud)}
.act .shot span{font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.18em;
  color:rgba(233,228,214,.3);text-align:center;padding:.5rem}
.act .txt{padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(18px,2.2vw,26px)}
.act .code{font-family:"Roboto Mono",monospace;font-size:.64rem;letter-spacing:.2em;color:var(--mud-lt)}
.act h3{font-weight:900;font-size:1.26rem;margin:.6rem 0 .5rem;line-height:1.5}
.act p{margin:0;font-size:.95rem;color:#B2B0A5;line-height:1.85;max-width:34em}
/* 動画を入れたカード（リンクではなく枠として扱う） */
.act--video{background:var(--ink)}
.act--video .shot{position:relative;min-height:clamp(190px,17vw,340px)}
.act--video video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.act--video .more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.9rem;
  font-weight:700;font-size:.9rem;color:var(--mud-lt);text-decoration:none;
}
.act--video .more::after{content:"→"}
.act--video .more:hover{color:#FFB37A}

/* 写真の切り抜き位置の既定値。個別の値は各 img の style で指定 */
.act .shot img,.gallery img{object-position:center 32%}

/* ══ はじめての方へ／料金サイネージ ══════════ */
.signage{margin-top:0}
.signage-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .9rem}
.signage-head h3{margin:0;font-weight:900;font-size:clamp(1.15rem,2.2vw,1.5rem)}
.signage-head a{font-weight:700;font-size:.9rem;color:var(--mud-lt);text-decoration:none;white-space:nowrap}
.signage-head a:hover{color:#FFB37A}
/* 枠の比率は「画面の縦横比」に合わせる。
   横長の画面では横長に、縦長の画面では縦長になり、中身が読みやすい高さを保つ */
.signage-frame{position:relative;width:100%;aspect-ratio:16/10;
  max-height:82svh;
  border:1px solid var(--line);background:rgba(23,48,31,.5);overflow:hidden}
@media (max-aspect-ratio: 16/10){.signage-frame{aspect-ratio:4/3}}
@media (max-aspect-ratio: 1/1)  {.signage-frame{aspect-ratio:3/4}}
@media (max-aspect-ratio: 3/4)  {.signage-frame{aspect-ratio:9/16}}
/* 画面が低いときは高さで頭打ちにして、枠が縦に伸びすぎないようにする */
@media (max-height: 620px){.signage-frame{aspect-ratio:auto;height:78svh}}
.signage-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.signage-note{margin:.8rem 0 0;font-size:.84rem;color:#B2B0A5}


/* ══ 注目の1コマ（3枠・各枠が紙芝居） ══════════ */
.gallery{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.gallery figure{flex:1 1 320px;min-width:0;
  min-height:clamp(210px,17vw,320px)}

.gallery figure{
  margin:0;background:var(--ink);position:relative;overflow:hidden;
}
.gallery img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;
  transition:opacity 1s ease, transform .6s ease, visibility 0s linear 1s;
}
.gallery img.is-on{opacity:1;visibility:visible;
  transition:opacity 1s ease, transform .6s ease, visibility 0s}
.gallery figure:hover img.is-on{transform:scale(1.04)}
.gallery .shot-dots{right:12px;bottom:auto;top:12px}

/* ── アクセス ─────────────────────────────── */
.access{display:grid;gap:clamp(28px,3.6vw,56px);align-items:start}
@media(min-width:900px){.access{grid-template-columns:1fr 1fr}}
.access .eyebrow{
  font-family:"Roboto Mono",monospace;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mud-lt);margin:0 0 .7rem;
}
.access h2{font-weight:900;font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 1.8rem;line-height:1.4}

/* 左：項目の一覧 */
.acc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.acc-list li{
  display:grid;gap:.4rem 1.6rem;padding:1.15rem 0;border-bottom:1px solid var(--line);
}
@media(min-width:560px){.acc-list li{grid-template-columns:7.5rem 1fr}}
.acc-list dt,.acc-list .k{
  font-family:"Roboto Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mud-lt);padding-top:.25rem;
}
.acc-list .v{font-size:1rem;color:var(--sand);line-height:1.7}
.acc-list .v a{color:var(--mud-lt);text-decoration:none;font-weight:700}
.acc-list .v a:hover{color:#FFB37A}
.acc-list .sub{display:block;margin-top:.35rem;font-size:.9rem;color:#B2B0A5;line-height:1.75}

/* 右：地図カード */
.acc-map{border:1px solid var(--line);background:rgba(23,48,31,.45);overflow:hidden}
.acc-map .canvas{position:relative;aspect-ratio:4/3;overflow:hidden}
.acc-map .canvas svg{position:absolute;inset:0;width:100%;height:100%}
.acc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acc-map .info{padding:clamp(16px,2.2vw,24px)}
.acc-map .info .name{
  font-family:"Roboto Mono",monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--mud-lt);margin:0 0 .5rem;
}
.acc-map .info .addr{margin:0;font-weight:700;font-size:1.05rem}
.acc-map .info .geo{
  margin:.45rem 0 0;font-family:"Roboto Mono",monospace;font-size:.78rem;
  letter-spacing:.1em;color:#B2B0A5;
}
.acc-btns{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.acc-btns a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.05em .8em;font-weight:700;font-size:.92rem;text-decoration:none;
  background:rgba(16,32,26,.6);color:var(--sand);transition:background .18s ease;
}
.acc-btns a:hover{background:rgba(233,228,214,.1)}
.acc-btns a.primary{background:var(--mud);color:var(--hdr-bg)}
.acc-btns a.primary:hover{background:#FF8B45}

.alert{border:1px solid var(--signal);padding:1.1rem 1.2rem;background:rgba(242,194,48,.06);
  margin-top:1.6rem}
.alert .h{font-family:"Roboto Mono",monospace;font-size:.66rem;letter-spacing:.2em;
  color:var(--signal);text-transform:uppercase}
.alert p{margin:.6rem 0 0;font-size:.9rem;color:#E4DFCF;line-height:1.8}

/* ── 予約 ─────────────────────────────────── */
.book .panel__body{text-align:center}
.book .inner{max-width:46ch;margin:0 auto}
.book h2{font-weight:900;font-size:clamp(1.9rem,5.4vw,3.2rem);line-height:1.3;margin:0 0 1rem}
.book .lede{margin:0 auto 2rem}
.book .btnrow{justify-content:center}
/* 枠は横いっぱいに取り、中身を中央ぞろえにする。
   width:fit-content で中身の幅に縮めると、親の中央からずれて
   見えることがあったため、この形にしている。
   横幅いっぱいなので、営業時間の1行が折り返されることもない。 */
.tel{font-family:"Anton",sans-serif;font-size:clamp(1.7rem,4.6vw,2.4rem);letter-spacing:.04em;
  text-decoration:none;display:block;width:auto;max-width:100%;
  text-align:center;margin:clamp(2.2rem,4.2vw,3rem) 0 0}
.tel:hover{color:var(--mud-lt)}
/* 受付時間。小さすぎて読めなかったので大きくし、字間も詰めた */
.tel small{display:block;font-family:"Roboto Mono",monospace;
  font-size:clamp(.8rem,1.5vw,.95rem);font-weight:500;
  letter-spacing:.1em;color:var(--mud-lt);margin-top:.7rem}
/* 狭い画面でも1行に収まるよう、字間と文字を少し詰める */
@media(max-width:430px){
  .tel small{font-size:.74rem;letter-spacing:.03em}
}

/* ── フッター ─────────────────────────────── */
/* ── フッター（ロゴとトップに戻るだけ） ───────────── */
.site-footer{
  border:1px solid var(--line);background:var(--panel-bg);
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  padding:clamp(30px,4.4vw,52px) clamp(18px,3.4vw,52px);
  text-align:center;
}
.site-footer .logo{justify-content:center}
.to-top{
  display:inline-flex;align-items:center;gap:.6em;
  color:var(--mud-lt);text-decoration:none;
  font-weight:600;font-size:.88rem;letter-spacing:.02em;line-height:1;
  padding:.75em 1.4em;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--mud);
  transition:color .18s ease, background .18s ease;
}
.to-top svg{width:1.05em;height:1.05em;flex:none;display:block}
.to-top:hover{color:#FFB37A;background:rgba(232,100,30,.12)}
.copy-line{margin:0;font-family:"Roboto Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;color:var(--moss)}

/* ── スクロール表示 ─────────────────────────── */
.rise{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rise{opacity:1;transform:none;transition:none}}

/* ── 画面右下の追随メニュー ──────────────────────
   全ページ共通。開くとよく見られる行き先が並ぶ。
   行き先は各ページの HTML 側で決める（このファイルは見た目だけ）。 */
.hub{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.hub-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-width:var(--hub-w,168px);        /* トピックボタンと同じ幅にそろえる */
  padding:16px 26px 16px 21px;border:0;border-radius:999px;cursor:pointer;
  background:var(--mud);color:#1A0E04;
  font-family:inherit;font-weight:700;font-size:1.06rem;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  transition:transform .18s ease,background .18s ease;
}
.hub-btn:hover{transform:translateY(-2px);background:#FF8B45}
.hub-btn svg{width:1.35em;height:1.35em;flex:none;display:block}

.hub-menu{
  width:min(84vw,310px);
  border:1px solid var(--line);border-radius:4px;
  background:var(--panel-bg);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  overflow:hidden;
}
.hub-menu[hidden]{display:none}
.hub-head{
  padding:.85rem 1rem;border-bottom:1px solid var(--line);
  font-family:"Roboto Mono",monospace;font-size:.62rem;
  letter-spacing:.2em;color:var(--moss);text-transform:uppercase;
}
.hub-menu a{
  display:flex;align-items:center;gap:.8em;
  padding:1.05rem 1.2rem;text-decoration:none;
  color:var(--sand);font-size:1.04rem;font-weight:500;
  border-bottom:1px solid var(--line);
  transition:background .16s ease,color .16s ease;
}
.hub-menu a:last-child{border-bottom:0}
.hub-menu a:hover{background:rgba(232,100,30,.14);color:#FFB37A}
.hub-menu a .ic svg{width:1.05em;height:1.05em;display:block}
.hub-menu a .ic{
  width:1.75em;height:1.75em;flex:none;
  display:grid;place-items:center;border-radius:3px;
  background:rgba(232,100,30,.16);color:var(--mud-lt);
  font-size:.8rem;font-weight:700;
}
@media (max-width:560px){
  .hub{right:14px;bottom:14px;--hub-w:150px}
  .hub-btn{padding:14px 20px 14px 16px;font-size:.98rem}
}
@media (prefers-reduced-motion: reduce){
  .hub-btn{transition:none}
}

/* ── 下層ページの見出し帯 ────────────────────────
   トップの大きなメインビジュアルの代わりに、下層ページで使う。
   写真は HTML 側で style="--hero:url(...)" のように指定する。 */
.page-hero{
  position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--forest);
  min-height:clamp(240px,34vw,400px);
  display:flex;align-items:flex-end;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero);background-size:cover;background-position:var(--hero-pos,center);
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,32,26,.30) 0%,rgba(16,32,26,.10) 38%,rgba(16,32,26,.86) 100%);
}
.page-hero__body{
  position:relative;z-index:1;width:100%;
  padding:clamp(20px,3.4vw,42px);
}
.page-hero h1{
  margin:.3rem 0 0;font-weight:900;
  font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1.3;letter-spacing:.01em;
}
.page-hero .lede{margin-top:.9rem;margin-bottom:0;max-width:30em}

/* 2段組み（写真＋説明など）。狭い画面では自動で縦に積む */
.duo{display:grid;gap:clamp(16px,2.4vw,30px);align-items:center}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr}}
.duo img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line)}

/* 表（料金など） */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th,.tbl td{padding:.8rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{color:var(--moss);font-family:"Roboto Mono",monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.tbl td .sub{display:block;margin-top:.3rem;font-size:.86rem;color:#B2B0A5}

/* フッターの著作権表示は会社情報ページへのリンク */
.copy-line a{color:inherit;text-decoration:none;transition:color .18s ease}
.copy-line a:hover{color:var(--mud-lt)}

/* 電話番号の下の注記。「（季節により変動）」は必ず次の行に置く */
.tel small{display:block}
.tel .tel-note{display:block;margin-top:.15em}

/* ── お知らせ（トピック） ────────────────────────
   右下の「ご案内」ボタンの上に並ぶ。中身は topic-data.js。 */
.topic{display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:100%}

.topic-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-width:var(--hub-w,168px);        /* ご案内ボタンと同じ幅にそろえる */
  padding:11px 18px 11px 15px;border:0;border-radius:999px;cursor:pointer;
  background:var(--forest);color:var(--sand);
  box-shadow:0 6px 18px rgba(0,0,0,.36),inset 0 0 0 1px var(--mud);
  font-family:inherit;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  transition:transform .18s ease,background .18s ease;
}
.topic-btn:hover{transform:translateY(-2px);background:#1B3A25}
.topic-btn .tx{white-space:nowrap;letter-spacing:.06em}
.topic-btn .dot{
  width:.55em;height:.55em;flex:none;border-radius:50%;
  background:var(--mud);
  box-shadow:0 0 0 0 rgba(232,100,30,.6);
  animation:topicPulse 2.4s ease-out infinite;
}
@keyframes topicPulse{
  0%  {box-shadow:0 0 0 0 rgba(232,100,30,.55)}
  70% {box-shadow:0 0 0 .5em rgba(232,100,30,0)}
  100%{box-shadow:0 0 0 0 rgba(232,100,30,0)}
}
@media (prefers-reduced-motion: reduce){
  .topic-btn{transition:none}
  .topic-btn .dot{animation:none}
}

.topic-panel{
  width:min(84vw,310px);
  border:1px solid var(--line);border-radius:4px;
  background:var(--panel-bg);backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  overflow:hidden;
}
.topic-panel[hidden]{display:none}
.topic-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .5rem .7rem 1rem;border-bottom:1px solid var(--line);
}
.topic-head .l{
  font-family:"Roboto Mono",monospace;font-size:.6rem;
  letter-spacing:.2em;color:var(--mud-lt);text-transform:uppercase;
}
.topic-x{
  border:0;background:transparent;cursor:pointer;color:#B2B0A5;
  font-size:1.35rem;line-height:1;padding:.1em .4em;font-family:inherit;
  transition:color .16s ease;
}
.topic-x:hover{color:var(--sand)}
.topic-body{padding:1rem 1.1rem 1.2rem}
.topic-body h3{
  margin:0 0 .6rem;font-weight:700;
  font-size:1.02rem;line-height:1.5;color:var(--sand);
}
.topic-body .tp-text{font-size:.92rem;line-height:1.8;color:#C4C1B6}
.topic-body .tp-text b{color:var(--mud-lt)}
.topic-body .tp-sub{font-size:.84rem;color:#9FB39A}
.topic-body .tp-link{
  display:inline-flex;align-items:center;
  margin-top:1rem;padding:.65em 1.2em;border-radius:3px;
  background:var(--mud);color:#1A0E04;
  text-decoration:none;font-weight:700;font-size:.9rem;
  transition:background .18s ease;
}
.topic-body .tp-link:hover{background:#FF8B45}

@media (max-width:560px){
  .topic-btn{padding:10px 16px 10px 14px;font-size:.88rem}
  .hub{--hub-w:150px}
  .topic-panel{width:min(90vw,320px)}
}

/* ── 文中で目立たせたい語 ──────────────────
   使い方： <b class="hl">無料送迎あり</b>
   背景をオレンジに敷いて、周りの文字より少し大きくする。 */
.hl{
  display:inline-block;
  padding:.12em .5em;border-radius:3px;
  background:var(--mud);color:#1A0E04;
  font-weight:700;font-size:1.06em;letter-spacing:.02em;
  line-height:1.5;
}

/* ══════════════════════════════════════════════
   ヘッダー上段が、スマホで重ならないようにする指定
   ══════════════════════════════════════════════
   ロゴ・ホーム・予約ボタンが1行に収まらず重なるのを防ぐ。
   ★サイトを統合・差し替えするときは、この部分を消さないこと。
   ══════════════════════════════════════════════ */

/* アイコン付きのヘッダーリンク（ホーム） */
.hdr-link.is-icon{display:inline-flex;align-items:center;gap:.45em}
.hdr-link.is-icon svg{width:1.15em;height:1.15em;flex:none;display:block}

/* タブレットくらいの幅でも、ぎりぎり収まらないことがあるので少し詰める */
@media (max-width:820px){
  .hdr-top-inner{padding:.5rem 20px;gap:.7rem}
  .hdr-left{gap:10px}
  .logo img{max-width:min(50vw,260px)}
  .hdr-book{font-size:.92rem;padding:.75em 1.25em}
}
@media (max-width:640px){
  .hdr-top-inner{padding:.45rem 12px;gap:.5rem}
  .hdr-left{gap:6px}
  .logo img{height:clamp(24px,6.4vw,32px);max-width:min(44vw,200px)}
  .hdr-link{padding:.6em .8em;font-size:.82rem}
  .hdr-book{font-size:.84rem;padding:.7em 1em;letter-spacing:.02em}
  .hdr-cta{gap:.35rem}
}

/* ここから下は「ホーム」を家のアイコンだけにする。
   文字は読み上げソフト向けに残してある。 */
@media (max-width:560px){
  .hdr-link.is-icon .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hdr-link.is-icon{gap:0;padding:.6em .68em}
  .logo img{max-width:min(38vw,170px)}
}

@media (max-width:400px){
  .hdr-top-inner{padding:.4rem 8px;gap:.3rem}
  .logo img{height:21px;max-width:30vw}
  .hdr-book{font-size:.74rem;padding:.62em .7em}
  .hdr-cta{gap:.25rem}
  .hdr-link.is-icon{padding:.55em .6em}
}


/* ── よくある質問パネル（追随メニューから開く） ────────
   ★この指定が無いと、パネルがページ下部に素のまま表示されます。
     共通CSSを差し替えるときは消さないこと。 */
.faq{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:min(90vw,380px);max-height:min(76vh,620px);
  display:none;flex-direction:column;
  border:1px solid var(--line);border-radius:4px;
  background:var(--panel-bg);backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  overflow:hidden;
}
.faq.is-open{display:flex}

.faq-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--line);flex:none;
}
.faq-top h2{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:.02em}
.faq-top p{margin:.25rem 0 0;font-size:.8rem;color:#B2B0A5}
.faq-x{
  flex:none;border:0;background:transparent;cursor:pointer;
  color:#B2B0A5;font-size:1.5rem;line-height:1;padding:.1em .25em;
  font-family:inherit;transition:color .16s ease;
}
.faq-x:hover{color:var(--sand)}

.faq-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.faq-bubble{max-width:88%;padding:.75rem .95rem;border-radius:4px;font-size:.94rem;line-height:1.75}
.faq-bubble.q{align-self:flex-end;background:var(--mud);color:#1A0E04;font-weight:600}
.faq-bubble.a{align-self:flex-start;background:var(--forest);border:1px solid var(--line)}
.faq-bubble.a b{color:var(--mud-lt)}
.faq-bubble.a a{color:var(--mud-lt);font-weight:700}

.faq-pick{
  flex:none;display:flex;flex-wrap:wrap;gap:.45rem;
  padding:.9rem 1.1rem;border-top:1px solid var(--line);
  max-height:44%;overflow-y:auto;
}
.faq-pick button{
  cursor:pointer;font-family:inherit;
  padding:.6em .95em;border-radius:3px;
  background:transparent;color:var(--sand);
  border:1px solid var(--moss);
  font-size:.88rem;line-height:1.4;text-align:left;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.faq-pick button:hover{background:var(--mud);color:#1A0E04;border-color:var(--mud)}
.faq-pick button.back{color:#B2B0A5;border-color:var(--line)}
.faq-pick button.back:hover{background:var(--line);color:var(--sand)}

.faq-bottom{
  flex:none;padding:.85rem 1.1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:#B2B0A5;line-height:1.7;
}
.faq-bottom a{color:var(--mud-lt);font-weight:700;text-decoration:none}

@media (max-width:560px){
  .faq{right:0;left:0;bottom:0;width:100%;max-height:86vh;
    border-radius:0;border-left:0;border-right:0;border-bottom:0}
}

/* ── ページ内のよくある質問（開閉式） ─────────────
   <div class="qa"><details><summary>質問</summary>
     <div class="a"><p>答え</p></div></details></div>
   右下の質問パネルとは別物。ページ本文に置く一覧。 */
.qa{margin-top:1.6rem}
.qa details{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.qa details:first-of-type{border-top:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:.8em;
  padding:1.05rem .4rem;
  font-weight:700;font-size:clamp(.96rem,1.7vw,1.06rem);line-height:1.6;
  color:var(--sand);
  transition:color .16s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:''}
.qa summary::before{
  content:'＋';flex:none;
  width:1.5em;height:1.5em;margin-top:.05em;
  display:grid;place-items:center;border-radius:3px;
  background:rgba(232,100,30,.16);color:var(--mud-lt);
  font-size:.78em;font-weight:700;line-height:1;
  transition:background .16s ease,color .16s ease;
}
.qa details[open] summary::before{content:'−'}
.qa summary:hover{color:var(--mud-lt)}
.qa summary:hover::before{background:var(--mud);color:#1A0E04}
.qa .a{padding:0 .4rem 1.1rem 2.7rem}
.qa .a p{margin:0 0 .6rem;font-size:.95rem;line-height:1.85;color:#C4C1B6;max-width:38em}
.qa .a p:last-child{margin-bottom:0}
.qa .a b{font-weight:700;color:var(--sand)}
.qa .a a{color:var(--mud-lt);font-weight:700}
@media (max-width:560px){
  .qa .a{padding-left:2.4rem}
}

/* フッターの下に余白を置く（ページ最下部に貼り付かないように） */
.site-footer{margin-bottom:clamp(14px,2.2vw,26px)}

/* ── アクセスの地図（Googleマップの埋め込み） ──────── */
.acc-map .canvas{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:var(--forest);
  aspect-ratio:4/3;
}
.acc-map .canvas iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block;
  /* 暗い画面に馴染ませる。地図を明るいまま出したいときはこの2行を消す */
  filter:invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95);
}
@media (max-width:560px){
  .acc-map .canvas{aspect-ratio:1/1}
}

/* ── 共通部品を守るための指定（自動生成・手で書き換えない） ──────
   ページ固有のCSSにある一括リセットに負けないよう、祖先まで書いて
   強さを上げた指定をここに置き直している。 */

.site-header .hdr-top-inner{max-width:var(--maxw); margin:0 auto; padding:.5rem clamp(14px,3vw,40px); gap:1rem}
.site-header .hdr-left{gap:clamp(8px,1.1vw,14px); min-width:0}
.site-header .logo, .site-footer .logo{min-width:0}
.site-header .logo img, .site-footer .logo img{height:clamp(30px,4.4vw,42px); width:auto; max-width:min(58vw,340px)}
.site-footer .logo img, .site-footer .site-footer .logo img{height:clamp(34px,5.6vw,52px); max-width:min(78vw,420px)}
.site-header .hdr-link{padding:.7em 1.15em}
.site-header .hdr-link.is-sns{gap:.42em}
.site-header .hdr-link.is-sns svg{width:1.15em; height:1.15em}
@media (max-width:560px){
  .site-header .hdr-link.is-sns .lbl{width:1px; height:1px}
  .site-header .hdr-link.is-sns{gap:0; padding:.6em .7em}
}
.site-header .hdr-book{padding:.82em 1.7em}
.site-header .hdr-cta{gap:.5rem}
@media (max-width:420px){
  .site-header .hdr-cta{gap:.4rem}
  .site-header .hdr-book{padding:.78em 1.1em}
}
.site-header .nav-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,3vw,40px)}
.site-header .nav{min-width:0; height:52px; gap:8px}
.site-header .nav a{padding:.6em .95em}
@media (min-width:780px){
  .site-header .nav{gap:clamp(8px,1.1vw,14px); height:56px}
  .site-header .nav a{padding:.65em 1.15em}
}
@media (min-width:1080px){
  .site-header .nav{gap:clamp(12px,1.4vw,18px); height:60px}
  .site-header .nav a{padding:.7em 1.35em}
}
@media (min-width:1400px){
  .site-header .nav{gap:clamp(14px,1.6vw,22px)}
  .site-header .nav a{padding:.72em 1.5em}
}
body .tel{width:auto; max-width:100%; margin:clamp(2.2rem,4.2vw,3rem) 0 0}
body .tel small{margin-top:.7rem}
body .site-footer{gap:1.4rem; padding:clamp(30px,4.4vw,52px) clamp(18px,3.4vw,52px)}
.site-footer .to-top{gap:.6em; padding:.75em 1.4em}
.site-footer .to-top svg{width:1.05em; height:1.05em}
.site-footer .copy-line{margin:0}
body .hub{gap:10px}
.hub-btn, .hub .hub-btn{gap:.6em; min-width:var(--hub-w,168px); padding:16px 26px 16px 21px}
.hub-btn svg, .hub .hub-btn svg{width:1.35em; height:1.35em}
.hub-menu, .hub .hub-menu{width:min(84vw,310px)}
.hub-head, .hub .hub-head{padding:.85rem 1rem}
.hub-menu a, .hub .hub-menu a{gap:.8em; padding:1.05rem 1.2rem}
.hub-menu a .ic svg, .hub .hub-menu a .ic svg{width:1.05em; height:1.05em}
.hub-menu a .ic, .hub .hub-menu a .ic{width:1.75em; height:1.75em}
@media (max-width:560px){
  .hub-btn, .hub .hub-btn{padding:14px 20px 14px 16px}
}
body .tel .tel-note{margin-top:.15em}
.hub .topic{gap:10px; width:100%}
.hub .topic-btn{gap:.55em; min-width:var(--hub-w,168px); padding:11px 18px 11px 15px}
.hub .topic-btn .dot{width:.55em; height:.55em}
.hub .topic-panel{width:min(84vw,310px)}
.hub .topic-head{padding:.7rem .5rem .7rem 1rem}
.hub .topic-x{padding:.1em .4em}
.hub .topic-body{padding:1rem 1.1rem 1.2rem}
.hub .topic-body h3{margin:0 0 .6rem}
.hub .topic-body .tp-link{margin-top:1rem; padding:.65em 1.2em}
@media (max-width:560px){
  .hub .topic-btn{padding:10px 16px 10px 14px}
  .hub .topic-panel{width:min(90vw,320px)}
}
.site-header .hdr-link.is-icon{gap:.45em}
.site-header .hdr-link.is-icon svg{width:1.15em; height:1.15em}
@media (max-width:820px){
  .site-header .hdr-top-inner{padding:.5rem 20px; gap:.7rem}
  .site-header .hdr-left{gap:10px}
  .site-header .logo img, .site-footer .logo img{max-width:min(50vw,260px)}
  .site-header .hdr-book{padding:.75em 1.25em}
}
@media (max-width:640px){
  .site-header .hdr-top-inner{padding:.45rem 12px; gap:.5rem}
  .site-header .hdr-left{gap:6px}
  .site-header .logo img, .site-footer .logo img{height:clamp(24px,6.4vw,32px); max-width:min(44vw,200px)}
  .site-header .hdr-link{padding:.6em .8em}
  .site-header .hdr-book{padding:.7em 1em}
  .site-header .hdr-cta{gap:.35rem}
}
@media (max-width:560px){
  .site-header .hdr-link.is-icon .lbl{width:1px; height:1px}
  .site-header .hdr-link.is-icon{gap:0; padding:.6em .68em}
  .site-header .logo img, .site-footer .logo img{max-width:min(38vw,170px)}
}
@media (max-width:400px){
  .site-header .hdr-top-inner{padding:.4rem 8px; gap:.3rem}
  .site-header .logo img, .site-footer .logo img{height:21px; max-width:30vw}
  .site-header .hdr-book{padding:.62em .7em}
  .site-header .hdr-cta{gap:.25rem}
  .site-header .hdr-link.is-icon{padding:.55em .6em}
}
body .faq{width:min(90vw,380px)}
body .faq-top{gap:1rem; padding:1rem 1.1rem}
body .faq-top h2{margin:0}
body .faq-top p{margin:.25rem 0 0}
body .faq-x{padding:.1em .25em}
body .faq-log{padding:1.1rem; gap:.7rem}
body .faq-bubble{max-width:88%; padding:.75rem .95rem}
body .faq-pick{gap:.45rem; padding:.9rem 1.1rem}
body .faq-pick button{padding:.6em .95em}
body .faq-bottom{padding:.85rem 1.1rem}
@media (max-width:560px){
  body .faq{width:100%}
}
body .qa{margin-top:1.6rem}
body .qa summary{gap:.8em; padding:1.05rem .4rem}
body .qa summary::before{width:1.5em; height:1.5em; margin-top:.05em}
body .qa .a{padding:0 .4rem 1.1rem 2.7rem}
body .qa .a p{margin:0 0 .6rem; max-width:38em}
body .qa .a p:last-child{margin-bottom:0}
@media (max-width:560px){
  body .qa .a{padding-left:2.4rem}
}
body .site-footer{margin-bottom:clamp(14px,2.2vw,26px)}