@charset "UTF-8";

/* =========================================================
   若狭みはま まち旅博覧会 LP
   Figma: 川嶋鉄工所プロジェクト / PC=1440 (1:155) TB=834 (1:11775) SP=400 (1:8404)
   FVは【決定】レイアウト固定で見切れさせる（1024〜834でブレイクポイント）
   ========================================================= */

:root{
  --c-text:#333333;
  --c-accent:#1F5085;
  --f-mincho:"Shippori Mincho", serif;
  --f-gothic:"Zen Kaku Gothic New", sans-serif;
  --f-en:"Jost", sans-serif;          /* Figma指定 Futura PT の代替 */
  --pc-w:1440px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  /* iPhone を横向きにしたとき、Safari が本文だけ勝手に大きくするのを止める */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;     /* ナビを押したときになめらかに送る */
}
/* 🔴 2026-09-30：SafariとChromeで見た目を揃えるための2つ（蓮太朗さん）。
   ・font-synthesis:none … 読み込んでいないウェイトをブラウザが太らせて作る（疑似ボールド）のを禁じる。
     SafariとChromeで太らせ方が違うので、字面の太さがずれる原因になる。
     Zen Kaku Gothic New は 400/500/700、Jost は 300/400 を読み込んでいるので、
     それ以外を指定していれば必ずどこかで合成が起きる。
   ・-webkit-tap-highlight-color … iPhone の Safari だけ、リンクをタップした瞬間に
     灰色の矩形が出る。Chrome（Android）では出ないので消しておく。 */
body{
  font-synthesis:none;
  -webkit-tap-highlight-color:transparent;
}
/* 🔴🔴 2026-09-30：text-wrap:pretty を全部やめた（蓮太朗さん「SafariでもChromeと
   同じ見た目に」）。もとは 9/25 に「本文の最終行に1文字だけ落ちるのを避ける」目的で、
   .feature__txt / .about__txt / .navi__place / .navi__names / .pg__lead / .pg-idx__ttl /
   .pg__spots li / .pg__steps .pg__step-txt / .pg__rows dd / .pg__basic dd / .faq__txt /
   .notes__txt / .info__txt の13個に入れていた。

   pretty は「行の分け方をブラウザに任せる」指定なので、実装差がそのまま見た目の差になる。
   実際、iPhone の Safari ではナビゲーターのプログラム名（.navi__place）の1行目だけが
   極端に短くなり、カードの幅いっぱいに広がらなかった（Chromeでは起きない）。
   素の折り返しに揃えれば、どのブラウザでも同じ位置で改行される。
   ⚠️ 戻すときは必ず iPhone の Safari 実機で見え方を確認すること。 */

/* 固定ヘッダー（60px）に隠れないよう、着地位置をずらす */
section[id]{ scroll-margin-top:60px; }
/* セクションの中の飛び先（Q&A →「キャンセルについて」）も固定ヘッダーの下に来るようにする */
.notes__block[id]{ scroll-margin-top:60px; }
/* 動きを減らす設定の人には即時スクロール */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  font-family:var(--f-gothic);
  color:var(--c-text);
  background:#fff;
  line-height:1.8;
}
img{ display:block; max-width:100%; height:auto; }

/* 目で見る人には隠し、スクリーンリーダーには読ませる
   （経路図などの図版の内容を文章で補うために使う） */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* クリック時にフォーカス枠が残らないように（キーボード操作時だけ出す） */
button:focus{ outline:none; }
button:focus-visible{ outline:2px solid var(--c-accent); outline-offset:-2px; }
ul{ margin:0; padding:0; list-style:none; }
p,h1{ margin:0; }
a{ color:inherit; text-decoration:none; }

/* =========================================================
   固定ヘッダー（Figma: nav 1440×60。FVを過ぎたら上から降りてくる）
   ========================================================= */
.site-header{
  position:fixed;
  left:0; top:0;
  z-index:50;
  width:100%;
  height:60px;
  background:#fff;                /* Figma: #FFFFFF 不透明 */
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.site-header.is-visible{ transform:translateY(0); }
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(var(--pc-w), 100%);
  height:100%;
  margin:0 auto;
  padding:0 80px;                 /* Figma: ロゴ x80 ／ ナビ右端 x1360 */
}
.site-header__logo{
  margin:0;
  width:220px;                    /* Figma: 220×32 */
}
.site-header__logo img{ width:100%; height:auto; }
.site-header__nav ul{
  display:flex;
  gap:24px;                       /* Figma: 各項目の間隔24px */
  margin:0;
  padding:0;
  list-style:none;
}
.site-header__nav a{
  font-size:14px;                 /* Figma: 14px（「まち旅博覧会とは」のみ13px＝要確認） */
  line-height:1;  /* 🔴 元は 16px（1.143倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。14px×1=14px */
  letter-spacing:.08em;           /* Figma: 1.12px / 14px */
  color:var(--c-text);
  transition:opacity .3s;
}
.site-header__nav a:hover{ opacity:.6; }
/* ヘッダー内のハンバーガー（TB以下でナビの代わりに出す） */
.menu-btn--header{ position:static; }

/* =========================================================
   FV
   ========================================================= */
.fv{
  overflow:hidden;            /* ← 見切れさせる */
  position:relative;
}
.fv__inner{
  position:relative;
  width:var(--pc-w);
  height:936px;
  left:50%;
  transform:translateX(-50%); /* 縮小せず、左右を均等に見切らせる */
}

/* ---------- 写真（角丸8pxの矩形マスク） ---------- */
/* マスク枠。中の画像は枠とは別サイズ・別位置で置かれ、この枠で切り抜かれる
   （Figmaの Mask group をそのまま再現。scaleMode:FILL = object-fit:cover）   */
.fv__photo{
  position:absolute;
  z-index:1;                  /* 写真は最背面 */
  overflow:hidden;
  border-radius:8px;          /* Figma: cornerRadius 8 */
}
.fv__photo img{
  position:absolute;
  max-width:none;
  object-fit:cover;
}
/* テキスト類は写真より前面に */
.fv__logo,
.fv__title,
.fv__lead,
.fv__date,
.fv__nav{ z-index:2; }

/* -------- 読み込み時のアニメーション --------
   写真を「大きいものから順に」出す（蓮太朗さんの指示・9/25）。速さは :root の --fv-dur / --fv-step で決まる。
   ⚠️ 大きさの順はレイアウトごとに違うので、TB・SP でも delay を振り直している。
   写真は transform を使っていないので、ここで自由に使える（位置は left/top）。 */
/* ぼけた状態から、ふわっと浮かび上がって合う */
@keyframes fvPhotoIn{
  from{ opacity:0; transform:scale(1.06); filter:blur(10px); }
  to  { opacity:1; transform:scale(1);    filter:blur(0);    }
}
/* 🔴 出る速さの調整は、この2つの数字だけで済む（2026-09-25 川嶋さんと調整）
      --fv-dur  … 写真1枚が出きるまでの時間
      --fv-step … 次の1枚が出るまでの間隔
   順番（--fv-i）はレイアウトごとに大きさの順が違うので、PC・TB・SPで振り直している。 */
:root{
  --fv-dur:1s;              /* 1枚ずつのフェードは1秒かける（川嶋さん・9/25）。
                                出る間隔(.25s)より長いので、前の写真が薄く出ているうちに次が重なって出る */
  --fv-step:.25s;
  --fv-lag:.1s;              /* 1枚目が出るまでの間 */

  /* FV以外のセクションが、スクロールで現れるとき（川嶋さん・9/25）
     --rv-dur  … 1つのフェードにかける時間
     --rv-step … 横に並ぶカードが1枚ずつずれて出る間隔（何番目かは script.js が --rv-i で渡す） */
  --rv-dur:.9s;
  --rv-step:.18s;

  /* 動きのカーブ。「もう少し余韻／イージングがかかってると良い」（柘植さん・川嶋さん 9/25）
     easeOutQuint 相当。序盤で一気に進み、終わりぎわがゆっくり伸びるので「余韻」が出る。
     🔴 余韻の調整はこの2行だけでよい（元は両方 cubic-bezier(.22,.61,.36,1) ＝ easeOutCubic 相当） */
  --fv-ease:cubic-bezier(.22,1,.36,1);
  --rv-ease:cubic-bezier(.22,1,.36,1);
}
.fv__photo{
  opacity:0;
  animation:fvPhotoIn var(--fv-dur) var(--fv-ease) both;
  animation-delay:calc(var(--fv-lag) + var(--fv-i, 0) * var(--fv-step));
}
/* PC：b351 → e320 → c267 → d230 → f212 → a206 → h201 → g187 */
.fv__photo--b{ --fv-i:0; }   /* 351px */
.fv__photo--e{ --fv-i:1; }   /* 320px */
.fv__photo--c{ --fv-i:2; }   /* 267px */
.fv__photo--d{ --fv-i:3; }   /* 230px */
.fv__photo--f{ --fv-i:4; }   /* 212px */
.fv__photo--a{ --fv-i:5; }   /* 206px */
.fv__photo--h{ --fv-i:6; }   /* 201px */
.fv__photo--g{ --fv-i:7; }   /* 187px */

/* 動きを減らす設定の端末では出しっぱなしにする */
@media (prefers-reduced-motion: reduce){
  .fv__photo{ opacity:1; animation:none; }
}

/* -------- スクロールで現れる（FV以外のセクション） --------
   ⚠️ transform は使わない。.sec-head や各 inner が translateX(-50%) で
      中央に置かれているため、上書きすると位置が飛ぶ。
      opacity とぼかしだけなので、どの要素にも安全に当てられる。
   data-reveal は script.js が付ける（JSが動かない環境では何も起きず、そのまま見える）。 */
[data-reveal]{
  opacity:0;
  filter:blur(6px);
  transition:opacity var(--rv-dur) var(--rv-ease),
             filter  var(--rv-dur) var(--rv-ease);
  transition-delay:calc(var(--rv-i, 0) * var(--rv-step));
  will-change:opacity, filter;
}
[data-reveal].is-in{
  opacity:1;
  filter:blur(0);
  will-change:auto;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; filter:none; transition:none; }
  .navi__img, .navi__side, .navi__img img{ transition:none; }
  .navi:hover .navi__img,
  .navi:hover .navi__side,
  .navi:hover .navi__img img{ transform:none; box-shadow:none; }
}
/* 枠の位置・大きさ */
.fv__photo--a{ left:314px; top:-131px; width:206px; height:206px; }
.fv__photo--b{ left:894px; top:-66px;  width:351px; height:351px; }
.fv__photo--c{ left:-45px; top:95px;   width:267px; height:267px; }
.fv__photo--d{ left:1245px;top:285px;  width:230px; height:230px; }
.fv__photo--e{ left:220px; top:364px;  width:320px; height:320px; }
.fv__photo--f{ left:894px; top:487px;  width:212px; height:212px; }
.fv__photo--g{ left:33px;  top:684px;  width:187px; height:187px; }
.fv__photo--h{ left:1106px;top:702px;  width:201px; height:201px; }

/* 枠の中での画像の位置・大きさ（Figmaの画像ノードの実測値） */
.fv__photo--a img{ left:-6px;   top:99px;   width:230px; height:154px; }
.fv__photo--b img{ left:-226px; top:0;      width:671px; height:448px; }
.fv__photo--c img{ left:0;      top:-66px;  width:639px; height:426px; }
.fv__photo--d img{ left:-74px;  top:-3px;   width:352px; height:236px; }
.fv__photo--e img{ left:-90px;  top:-31px;  width:529px; height:353px; }
.fv__photo--f img{ left:-139px; top:-41px;  width:460px; height:312px; }
.fv__photo--g img{ left:-52px;  top:0;      width:281px; height:187px; }
.fv__photo--h img{ left:-386px; top:-140px; width:881px; height:588px; }

/* ---------- ロゴ / タイトル（SVG受領までの仮組み） ---------- */
.js-placeholder{
  outline:1px dashed #c8c8c8;
  outline-offset:4px;
}
.js-placeholder::after{
  content:attr(data-note);
  position:absolute;
  top:-20px; left:0;
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:10px;
  letter-spacing:.04em;
  color:#b0b0b0;
  white-space:nowrap;
}

/* ロゴ・縦書きタイトルはFigmaから書き出したSVG（アウトライン化されているため） */
.fv__logo{
  position:absolute;
  left:637px; top:40px;
  width:160px;
}
.fv__title{
  position:absolute;
  left:650px; top:217px;
  width:134px;
  margin:0;
}
.fv__logo img,
.fv__title img{ width:100%; height:auto; }

/* ---------- リード文 ---------- */
.fv__lead{
  position:absolute;
  left:282px; top:157px;
  width:233px;
  font-family:var(--f-mincho);
  font-size:14px;
  line-height:2;          /* Figma: lineHeightPx 28 */
  letter-spacing:.04em;      /* Figma: 0.56px / 14px */
}

/* ---------- 開催日 ----------
   文字幅に左右されないよう相対レイアウトで組む
   （絶対配置だとフォント差で SAT がはみ出すため）        */
.fv__date{
  position:absolute;
  left:894px; top:326px;     /* Figma: 2026 の位置 */
  font-family:var(--f-mincho);
}
.fv__date > *{ margin:0; }

.fv__year{
  font-weight:500;
  font-size:24px;
  line-height:1.6;         /* 🔴 元は 34px（1.417倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。24px×1.6=38.4px */
  letter-spacing:.02em;      /* Figma: 0.48px / 24px */
}
.fv__period{
  display:flex;
  align-items:flex-end;
  margin-top:-7px;           /* y353 − (326+34.75) */
}
.fv__md{
  position:relative;
  padding-right:23px;        /* Figma: 数字の枠の右端1008 → SUN 1015（7px）＋SUNの16px */
  font-weight:400;
  font-size:48px;
  line-height:1;        /* 48px × 1 = 48px */
  letter-spacing:.021em;     /* 実測: Figmaの114px に合う値 */
  white-space:nowrap;
}
/* SUN / SAT は Figma上で 90°回転（rotation=π/2）している。
   親の右端に逃がすので、数字の幅が変わっても重ならない。  */
.fv__dow{
  position:absolute;
  right:0; bottom:2px;
  writing-mode:vertical-rl;  /* 横倒しの縦組み。transformと違い領域が正しく取れる */
  text-orientation:sideways;
  font-weight:500;
  font-size:16px;
  line-height:1;
  letter-spacing:0;
}
/* 🔴 2026-09-30：会期の起点が SUN → MON に変わって、左右の長さが合わなくなった。
   横倒しの縦組みなので「縦の長さ＝3文字の幅の合計」になり、
   M・O・N はどれも字幅が広く、S・A・T はどれも狭い（約38.6px 対 約30.1px）。
   文字サイズは両方16pxで同じなので、MONだけ字間を詰めて差を縮める。
   ⚠️ 完全に揃えるには -0.18em ほど要るが、詰まりすぎるので半分に留めた（蓮太朗さん）。
   曜日が変わったらこの値も見直すこと。 */
.fv__period > .fv__md:first-child .fv__dow{ letter-spacing:-.08em; }
.fv__dash{
  flex:none;
  width:20px; height:0;
  margin:0 5px 22px 19px;    /* Figma: SUN右端1031→dash 1050／dash右端1070→11.28 1075 */
  border-top:1px solid var(--c-text);   /* Figma: strokeWeight 1 */
}
.fv__place{
  margin-top:13px;
  font-family:var(--f-gothic);
  font-size:14px;
  line-height:1;          /* Figma: 14px/14px */
  letter-spacing:.04em;      /* Figma: 0.56px / 14px */
}

/* ---------- 縦書きナビ ---------- */
.fv__nav{
  position:absolute;
  left:1170px; top:600px;
}
.fv__nav ul{
  display:flex;
  gap:16px;                  /* 31px間隔 − 文字幅15px */
}
.fv__nav li{
  writing-mode:vertical-rl;
  width:15px;
}
.fv__nav a{
  font-size:14px;
  line-height:1;          /* 🔴 元は 16px（1.143倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。14px×1=14px */
  letter-spacing:.08em;      /* Figma: 1.12px / 14px */
  transition:opacity .3s;
}
.fv__nav a:hover{ opacity:.6; }

/* =========================================================
   セクション見出し（全セクション共通のコンポーネント）
   Figma: Component 17 / 265×118 を中央（x588〜853）に配置
   ========================================================= */
.sec-head{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  white-space:nowrap;        /* Figma: autoResize=WIDTH_AND_HEIGHT＝折り返さない */
}
/* 12px角丸2pxの正方形を2つ、斜めに重ねたマーク */
.sec-head__icon{
  position:relative;
  display:block;
  width:24px; height:24px;
  margin:0 auto;
}
.sec-head__icon::before,
.sec-head__icon::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border-radius:2px;
}
.sec-head__icon::before{ left:0;    top:12px; background:#5E7BA7; }
.sec-head__icon::after { left:12px; top:0;    background:var(--c-accent); }
/* セクションごとに色が違う（Figma実測） */
.access .sec-head__icon::before,
.access .sec-head__icon::after{ background:#fff; }      /* 背景写真の上なので白 */
.faq-sec .sec-head__icon::before{ background:#D0D0D0; } /* Q&Aだけ薄いグレー */

.sec-head__en{
  margin-top:20px;           /* y936+24 → y980 */
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:18px;
  line-height:1;        /* 18px × 1 = 18px */
  letter-spacing:.04em;
  color:var(--c-accent);
}
.sec-head__ja{
  margin:24px 0 0;           /* y980+18 → y1022 */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:32px;
  line-height:1;        /* 32px × 1 = 32px */
  letter-spacing:.04em;
}

/* =========================================================
   共通ボタン（280×70・上下に罫線）
   ========================================================= */
.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:280px; height:70px;
  font-family:var(--f-gothic);
  font-size:18px;
  line-height:1;
  letter-spacing:.04em;
  border-top:1px solid var(--c-text);
  border-bottom:1px solid var(--c-text);
  transition:background-color .3s;
}
/* ホバー：背景が水色になり、矢印が右へ抜けて左から入れ替わる
   （柘植さんのコメント＝hakonature.jp のボタン参照）        */
.btn:hover{ background:#E8F5FA; }

/* 矢印は同じSVGを2枚重ね、枠内でスライドさせて入れ替える */
.btn__arrow{
  flex:none;
  position:relative;
  width:16px; height:13px;
  overflow:hidden;
}
.btn__arrow svg{
  position:absolute;
  left:0; top:0;
  width:16px; height:13px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.btn__arrow svg:nth-child(2){ transform:translateX(-24px); }   /* 2枚目は左で待機 */
.btn__arrow path{
  stroke:var(--c-text);
  stroke-width:1;
  fill:none;
}
/* ホバーで1枚目が右へ抜け、2枚目が所定位置へ */
.btn:hover .btn__arrow svg:nth-child(1){ transform:translateX(24px); }
.btn:hover .btn__arrow svg:nth-child(2){ transform:translateX(0); }

/* =========================================================
   About
   Figma: y936〜2668（FV直後）
   ========================================================= */
.about{
  position:relative;
  overflow:hidden;
}
.about__inner{
  position:relative;
  width:min(var(--pc-w), 100%);
  height:1732px;             /* y936〜2668 */
  left:50%;
  transform:translateX(-50%);
}

/* 背景写真＋白の線形グラデーション（#FFF→透明）
   背景の帯なので画面幅いっぱいに広げる（中身は1440基準のまま） */
.about__bg{
  position:absolute;
  /* 親は .about__inner（最大1440px）なので、100% だと広い画面で全幅に届かない。
     画面いっぱいに出す。はみ出しは .about の overflow:hidden で隠れる */
  left:calc(50% - 50vw); top:82px;   /* y1018 */
  width:100vw; height:668px;
  z-index:0;
}
.about__bg picture{ display:block; width:100%; height:100%; }
.about__bg img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.7;                /* Figma PC: 画像fillの opacity 0.7（白地に透ける） */
}
.about__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,0) 100%);
}

.about .sec-head{ top:0; z-index:1; }

.about__body{
  position:absolute;
  left:0; right:0; top:182px;  /* y1118。1440px のとき x455＝中央なので、狭い画面でも中央に置く */
  width:min(530px, 100% - 80px);
  margin:0 auto;
  z-index:1;
  font-size:15px;
  line-height:2;        /* 15px × 2 = 30px */
  /* Figma実測は 0.60px だが、34文字で 530.4px となり1文字あふれる。
     0.58px に詰めてカンプと同じ位置で折り返させる。 */
  letter-spacing:.0387em;
}
.about__body p + p{ margin-top:16px; }   /* y1254 / y1330 の段落間 */

/* ---------- Feature 3枚 ---------- */
.features{
  position:absolute;
  left:0; right:0; top:850px;     /* y1786 */
  width:min(1120px, 100% - 80px); /* Figma:1120px。狭い画面では左右40pxを残す */
  margin:0 auto;
  display:flex;
  gap:80px;                  /* x160 / x560 / x960 → 320+80 */
  z-index:1;
}
.feature{ flex:1; min-width:0; }   /* 1120px のとき 320px×3 */
.feature__img{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;        /* Figma: 320×320 */
  overflow:hidden;
  border-radius:8px;         /* Figma: cornerRadius 8 */
}
/* Figma は枠320角に対し、画像ごとに異なる倍率・位置で配置している。
   object-fit:cover（中央寄せ）では再現できないため実寸で置く。
   枠が正方形なので % 指定でレスポンシブでも比率が保たれる。 */
.feature__img img{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  max-width:none;    /* リセットの img{max-width:100%} を解除する */
  object-fit:fill;   /* 指定した寸法どおりに描画する */
}
/* 01: 枠x160y1786 / 画像x73y1783 w488h326 */
.feature--01 .feature__img img{ width:152.5%;    height:101.875%; left:-27.1875%; top:-0.9375%; }
/* 02: 枠x560y1786 / 画像x455y1784 w581h387 */
.feature--02 .feature__img img{ width:181.5625%; height:120.9375%; left:-32.8125%; top:-0.625%; }
/* 03: 枠x960y1786 / 画像x749y1745 w588h392 */
.feature--03 .feature__img img{ width:183.75%;   height:122.5%;    left:-65.9375%; top:-12.8125%; }
.feature__no{
  margin-top:24px;           /* y1786+320=2106 → y2130 */
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:18px;
  line-height:1;        /* 18px × 1 = 18px */
  letter-spacing:.04em;
  color:var(--c-text);       /* Figma: #333333 */
}
.feature__ttl{
  margin:8px 0 0;            /* y2130+18 → y2156 */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:22px;
  line-height:1.6;            /* Figma は35.2pxだが、35pxのほうがセクション全体の高さが合う */
  letter-spacing:.04em;      /* Figma: 0.88px / 22px */
}
.feature__txt{
  margin-top:17px;           /* y2156+71 → y2243。行送りの丸めで1px上がるぶんを戻す */
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
}

/* ---------- ボタン2つ ---------- */
.about__btns{
  position:absolute;
  left:0; right:0; top:1502px;   /* y2438 */
  width:fit-content;
  max-width:calc(100% - 80px);
  margin:0 auto;             /* Figma x400〜x1040＝1440のほぼ中央 */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:80px;                  /* x400 / x760 */
  z-index:1;
}

/* =========================================================
   Navigators
   Figma: y2668〜6250（背景 #E8F5FA は Programs まで続く）
   ========================================================= */
.navigators{
  position:relative;
  overflow:hidden;
  background:#E8F5FA;        /* Figma: Rectangle 125 */
}
.navigators__inner{
  position:relative;
  width:min(var(--pc-w), 100%);
  /* ⚠️ 高さを固定しない。18名の実データが入るとカードの高さが変わるので、
     中身を通常フローで積んで、上下の余白だけ padding で持たせる */
  /* ⚠️ y2668〜6250（3582px）はカンプ＝ナビゲーター18人ぶんの高さ。
     人数が減ると下に空きが残るので固定しない。中身の高さ＋上下の padding で決める */
  padding:160px 0;           /* 背景2668 → 見出し2828 ／ 一覧下端6090 → 背景下端6250 */
  left:50%;
  transform:translateX(-50%);
}
.navigators .sec-head{ position:static; transform:none; margin-inline:auto; }   /* y2828＝inner の padding-top */

.navigators__sub{
  margin-top:64px;           /* 見出し下端2946 → y3010 */
  width:100%;
  text-align:center;
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:24px;
  line-height:1;        /* 24px × 1 = 24px */
  letter-spacing:.04em;
}

/* ---------- カード一覧（3列×6行） ---------- */
.navigators__list{
  /* 縦書きの帯をやめたので、カンプの左寄せ（x160）ではなく中央に置く（蓮太朗さん・2026-09-29）。
     もとは margin:64px 0 0 160px / width:min(1064px, 100% - 200px) */
  margin:64px auto 0;
  width:fit-content;
  max-width:calc(100% - 80px);
  display:grid;
  /* 写真はカンプどおり260px幅に戻す。1fr だと縦帯ぶんまで伸びて341pxになっていた */
  /* 写真を1.2倍に（260→312px。高さは aspect-ratio 260/360 で432px）蓮太朗さん・2026-09-29 */
  grid-template-columns:repeat(3, 312px);
  /* 縦書きの帯（18px＋gap16px）をやめたぶん、列のあいだを詰めた（蓮太朗さん・2026-09-29）。
     もとは 91px。カンプでは「写真260 ＋ 帯34 ＋ 間91」で写真どうしが125px離れていた */
  /* 行の間隔は 80px → 48px に詰めた（蓮太朗さん・2026-09-29） */
  gap:48px;
}

/* 1枚 294×432：左に本体260px、右に縦帯18px */
/* カードごと、担当するプログラムへのリンク（蓮太朗さんの指示・9/25）。
   grid の並びは <li>、見た目と中身は <a class="navi"> が持つ */
.navigators__list > li{ display:flex; }
.navi{
  display:flex;
  /* 縦書きの帯をやめたので、写真と帯のあいだの16pxも不要になった（2026-09-29） */
  gap:0;
  width:100%;
  /* もとは min-height:432px（Figma: Frame 125 294×432）。写真を312×432に広げたぶん
     カード全体は432pxを超えるので、固定の下限はやめて中身の高さに任せる（2026-09-29）。
     ⚠️ 高さを固定すると、タイトルが2行の人と1行の人で下が揃わなくなる */
  min-height:0;
}
/* ホバー：写真が持ち上がって影が落ち、中の画像がゆっくり寄る。
   縦書きの番号・プログラム名も少しだけ連れて浮く */
.navi__img,
.navi__side{
  transition:transform .45s cubic-bezier(.2,.8,.3,1),
             box-shadow .45s cubic-bezier(.2,.8,.3,1);
}
.navi:hover .navi__img{
  transform:translateY(-10px);
  box-shadow:0 18px 32px rgba(31,80,133,.22);
}
.navi:hover .navi__side{ transform:translateY(-5px); }
.navi__main{ flex:1; min-width:0; }   /* 294 − 縦書き18 − gap16 ＝ 260px */

.navi__img{
  width:100%;
  aspect-ratio:260 / 360;    /* Figma: 260×360 */
  overflow:hidden;
  border-radius:8px;
  background:#D9D9D9;        /* Figma: 画像未設定時のプレースホルダ色 */
}
.navi__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.navi:hover .navi__img img{ transform:scale(1.07); }
.navi__meta{
  margin-top:16px;           /* y3098+360=3458 → y3474 */
}
.navi__place{
  /* 🔴 Figmaは16pxだが、柘植さんの指摘（9/25「.navi__place 14pxのline-height:1.6が良いかも」）で14pxへ。
     SPが元から14pxだったので、PCも合わせた形になる。名前(.navi__names)は16pxのまま。
     🔴 2026-09-29：ここに開催場所ではなくプログラム名の全文を出すようにしたため 14px→13px。
        いちばん長い C-3（35文字ぶん）が 14px だと3行になり、他と揃わなかった。
        13px なら 260px幅に約19文字入るので、35文字でも2行に収まる。 */
  font-size:13px;
  line-height:1.6;        /* 14px × 1.6 = 22.4px */
  letter-spacing:.04em;
  color:#7D7D7D;             /* Figma実測 */
}
.navi__names{
  /* タイトル（.navi__place）が2行になったので、名前とのあいだを広げた（蓮太朗さん・2026-09-29）。
     もとは 4px（Figma: 場所y3474 → 名前y3504） */
  margin-top:10px;
  font-size:16px;
  line-height:1.6;        /* Figma実測 25.6px（＝16×1.6）。.navi__place と揃える */
  letter-spacing:.04em;
}

/* 右の縦帯：番号＋縦書きのプログラム名 */
.navi__side{
  width:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.navi__no{
  font-family:var(--f-en);
  font-weight:400;           /* Figmaは FuturaPT-Medium（＝500）だが、Jost全体を1段下げたため400（9/28 蓮太朗さん判断） */
  font-size:16px;
  line-height:1.6;        /* Figma実測 25.6px（＝16×1.6）。.navi__place / .navi__names と揃える */
  letter-spacing:.04em;
}
.navi__program{
  /* 番号（.navi__no）を出さなくしたので、その下の余白も無くす（2026-09-29）。
     もとは margin-top:8px＝番号との間隔だった */
  margin-top:0;
  writing-mode:vertical-rl;
  /* 欧文（「約35kmサイクリング」の km、「グルメBBQ」の BBQ）を横倒しにせず正立させる。
     柘植さんの指摘（9/25）。初期値 mixed だと欧文だけ90°寝る。 */
  text-orientation:upright;
  /* Figmaは medium(500) だが、柘植さん本人から「実ページで見ると太く見えるので
     他と揃えたい」と申し出があったため 400 に落とした（9/25）。 */
  font-weight:400;
  font-size:16px;            /* Figma 9/24更新: 15px → 16px */
  line-height:1;             /* 縦書きでは line-height は列の幅 */
  letter-spacing:4px;        /* Figma: 字送り20px（16px＋4px。y3132→3152） */
  color:var(--c-text);       /* Figma: #333333 */
}

/* =========================================================
   Programs
   Figma: y6250〜13348。水色地の上に白い角丸ボックス（x37・1360px）
   ========================================================= */
.programs{
  position:relative;
  overflow:hidden;
}
/* 水色の帯は Figma の Rectangle 125（y2668〜13144）に合わせる。
   セクションは y13304 まであるので、下の160pxは白のまま残す。
   ⚠️ 高さは固定しない。カードを開くとセクションが伸びるので、帯が足りなくなる。 */
.programs::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:calc(100% - 160px); /* 白ボックス下端12984 → 水色の下端13144 */
  background:#E8F5FA;
}
.programs__box,
.programs__inner{ position:relative; z-index:1; }
.programs__inner{
  position:relative;
  width:min(var(--pc-w), 100%);   /* 1440px未満では画面幅に合わせる */
  /* ⚠️ 高さは固定しない。カンプは「1枚目が開いた状態」で作られているので、
     固定すると実際の初期表示（全部閉じている）で下に余白が余る。
     白ボックスの下端から Booking までの320pxだけ padding で確保する */
  padding-bottom:320px;      /* Figma: 白ボックス下端12984 → Booking 13304 */
  left:50%;
  transform:translateX(-50%);
}
.programs__box{
  position:relative;
  width:min(1360px, 100% - 80px);  /* Figma:1360px。狭い画面では左右の余白を残す */
  /* 🔴 2026-09-30：もとは `margin-left:37px`（Figma: x37）。
     右は 1440−37−1360＝43px になり、白ボックスが6px右に寄っていた。
     中の地図・絞り込み・カードも全部6pxずれるので、左右とも40pxに揃えた（蓮太朗さん）。
     1440pxでは width が1360pxなので、auto で自動的に40px／40pxになる。 */
  margin-inline:auto;
  padding:120px 0 120px;     /* 見出し y6370 ＝ +120 ／ カード下端12864 → 白ボックス下端12984 */
  background:#fff;
  border-radius:8px;
}
.programs .sec-head{ position:static; transform:none; margin-inline:auto; }

/* ---------- 地図ブロック ---------- */
.pg-map{
  position:relative;
  /* 🔴 2026-09-30：左右の余白を半分に（もとは 左83／右77 ＝ calc(100% - 160px)） */
  width:calc(100% - 81px);   /* ボックス1360 − 左42 − 右39 */
  height:481px;
  margin:64px 0 0 42px;
}
.pg-map__embed{
  position:absolute;
  left:0; top:1px;
  width:60%;                 /* 1200px のとき 720px */
  height:480px;
  border-radius:8px;         /* Figma: cornerRadius 8 */
  background:#D0D0D0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:0 60px;
  text-align:center;
  color:#fff;
}
.pg-map__ttl{
  font-size:27px;
  line-height:1.6;  /* 🔴 元は 36px（1.333倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。27px×1.6=43.2px */
  letter-spacing:.04em;
}
.pg-map__txt{
  font-size:15px;
  line-height:1.6;        /* 15px × 1.6 = 24px */
  letter-spacing:.04em;
}
/* マイマップを入れたとき：枠いっぱいに敷く（プレースホルダの余白・中央寄せは要らない） */
.pg-map__embed.is-embedded{
  display:block;
  padding:0;
  overflow:hidden;           /* 角丸8pxでiframeを切る */
  background:#D0D0D0;        /* 読み込み中の下敷き */
}
.pg-map__embed iframe{
  display:block;
  width:100%; height:100%;
  border:0;
}

/* 開催場所の一覧：1行62px×10件＝620px を 481px の枠で縦スクロール */
.pg-map__list{
  position:absolute;
  left:66.6667%; top:0;      /* x920 − x120 ＝ 1200の2/3 */
  width:33.3333%;            /* 1200px のとき 400px */
  height:481px;
  padding-right:38px;        /* スクロールバーを x1318 の位置に寄せる */
  overflow-y:auto;
  /* ⚠️ overscroll-behavior:contain を付けない。
     一覧の端まで送ったあと、そのままページのスクロールに続いてほしいため
     （contain だと一覧の上で指を動かしている限りページが動かず、先に進めなくなる） */
}
/* Figmaはトラック・つまみとも 2px（#D0D0D0 / #1F5085）。
   scrollbar-width を併記するとChromeがそちらを優先して太くなるため指定しない。 */
.pg-map__list::-webkit-scrollbar{ width:2px; }
.pg-map__list::-webkit-scrollbar-track{ background:#D0D0D0; }
.pg-map__list::-webkit-scrollbar-thumb{ background:var(--c-accent); }

.pg-place{
  /* ⚠️ 高さを固定しない。実データだとプログラム名が2行になる行があり、
     62px のままだと中身が溢れて次の行と重なる（SP実機で発生） */
  min-height:62px;
  border-bottom:1px solid #D0D0D0;  /* Figma: 各行 bottom:1 */
}
.pg-place a{
  display:flex;
  gap:16px;                  /* Figma: 番号右端x945 → タイトルx961 */
  padding:8px;
  transition:background-color .3s;
}
.pg-place a:hover{ background:#F4FAFD; }
.pg-place__no{
  flex:none;
  width:17px;                /* Figma: 番号の幅17〜18px */
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:15px;
  line-height:1.6;        /* 15px × 1.6 = 24px */
  letter-spacing:.04em;
}
.pg-place__ttl{
  display:block;
  font-size:15px;
  line-height:1.6;        /* 15px × 1.6 = 24px */
  letter-spacing:.04em;
}
.pg-place__sub{
  display:block;
  font-size:13px;
  line-height:1.6;        /* 13px × 1.6 = 20.8px */
  letter-spacing:.04em;
  color:#7D7D7D;
}

/* ---------- フィルタ ---------- */
.pg-filter{
  display:flex;
  gap:40px;                  /* x511→619→793 */
  /* 🔴 2026-09-30：もとは width:417px（Figma: Frame 150 417×34）だったが、
     実際のボタンは合計517px あり、右へ103px はみ出して中央からずれていた。
     中身なりの幅にして中央に置く。 */
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;            /* 狭い画面では折り返す */
  justify-content:center;
  margin:120px auto 0;
}
.pg-filter__group{ display:flex; gap:16px; }
.pg-filter__btn{
  flex:none;
  min-width:34px;
  height:34px;
  padding:0 8px;            /* Figma実測: すべて68 ／ 朝昼夜34 ／ 食べる68 ／ 作る51 */
  white-space:nowrap;        /* Figma実測: すべて68 / 朝昼夜34 / 食べる68 / 作る51 */
  border:1px solid #D0D0D0;
  border-radius:4px;
  background:transparent;
  font-family:var(--f-gothic);
  font-size:16px;
  line-height:1;
  letter-spacing:.04em;
  color:var(--c-text);
  cursor:pointer;
  transition:background-color .3s,color .3s,border-color .3s;
}
.pg-filter__btn:hover{ border-color:var(--c-accent); }
.pg-filter__btn.is-active{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:#fff;
}

/* ---------- プログラム一覧（リンク集） ---------- */
/* 🔴 2026-09-30：一旦非表示。display:grid が [hidden] に勝つので明示的に消す */
.pg-index[hidden]{ display:none; }
.pg-index{
  /* 🔴 2026-09-30：左右の余白を半分に（もとは 左123／右117 ＝ calc(100% - 240px)） */
  width:calc(100% - 120px);  /* ボックス1360 − 左62 − 右58 */
  /* 🔴 高さを固定しない（2026-09-25）。Figmaの455pxは10本＝5行ぶんの寸法で、
     11本になると6行になり、中身が47px下へはみ出してカードとの間が9pxまで詰まっていた。
     上下のパディングだけ残せば、10本のときは 33+78×5+32＝455px でカンプどおりになる。 */
  padding:33px 0 32px;       /* 枠 y7227 → 項目 y7260 ／ 最終行の下端 → 枠 */
  margin:40px 0 0 62px;
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* 1120px のとき 520px×2 */
  /* 🔴 2026-09-30：タイトルを全文にして2〜3行になったので 78px 固定をやめた。
     下限は78px（1行のときはカンプどおり）、長いタイトルの行だけ伸びる。 */
  grid-auto-rows:minmax(78px, auto);
  align-content:start;
  gap:0 80px;
  border-top:1px solid #7D7D7D;  /* Figma: Frame 147 top:1 #7D7D7D */
}
.pg-idx a{
  display:flex;
  align-items:center;
  gap:0;                     /* 間隔は要素ごとに指定（Figma実測） */
  /* 2026-09-30、タイトルを全文にして2〜3行になったので固定→下限に変えた（Figmaは78px） */
  min-height:78px;
  padding:12px;
  border-bottom:1px solid #D0D0D0;  /* Figma: individualStrokeWeights bottom:1 のみ */
  transition:background-color .3s;
}
.pg-idx a:hover{ background:#F4FAFD; }
.pg-idx__thumb{
  flex:none;
  width:80px; height:53px;
  margin-right:24px;         /* Figma: サムネ右端x252 → 番号x276 */
  overflow:hidden;
  border-radius:4px;
}
.pg-idx__thumb img{ width:100%; height:100%; object-fit:cover; }
.pg-idx__no{
  flex:none;
  margin-right:16px;         /* Figma: 番号右端x294 → タイトルx310 */
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:16px;            /* Figma: 10件中7件が16px/25.6px（3件だけ15px） */
  line-height:1.6;        /* 16px × 1.6 = 25.6px */
  letter-spacing:.04em;
}
.pg-idx__ttl{
  flex:1;
  font-size:16px;            /* Figma: 10件中7件が16px/25.6px（3件だけ15px） */
  line-height:1.6;        /* 16px × 1.6 = 25.6px */
  letter-spacing:.04em;
}

/* ---------- プログラム詳細カード ---------- */
.pg-list{
  /* 🔴 2026-09-30：左右の余白を半分に（もとは 左123／右117 ＝ calc(100% - 240px)） */
  width:calc(100% - 120px);  /* ボックス1360 − 左62 − 右58 */
  margin:56px 0 0 62px;
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* 1120px のとき 520px×2 */
  gap:80px;
  align-items:start;         /* 高さが揃わなくてよい */
}
.pg{ width:100%; }              /* グリッドの1カラム分（1440pxで520px） */

.pg__media{ position:relative; }
.pg__main{
  width:100%;
  aspect-ratio:520 / 346;    /* Figma: 520×346 */
  overflow:hidden;
  border-radius:8px;
}
.pg__main img{ width:100%; height:100%; object-fit:cover; }
.pg__no{
  position:absolute;
  left:0; top:0;
  width:40px; height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  font-family:var(--f-en);
  /* Figmaは Futura PT Regular(400) だが、柘植さんから「もう一つウェイトを下げられると良い」
     と指摘があったため Light(300) に落とした（9/25）。細すぎるなら 400 に戻す。 */
  font-weight:300;
  font-size:20px;
  line-height:1;
  letter-spacing:0;          /* Figma: letterSpacing 0（他の英数字と違う） */
}
.pg__shots{
  display:flex;
  gap:20px;
  margin-top:20px;           /* y7738+346=8084 → y8104 */
}
/* サムネイル：クリックでメイン画像を切り替える */
.pg__shot{
  /* 常に「520pxを3分割」の幅にする。3枚なら横いっぱい、2枚なら左寄せで同じ大きさ。
     flex:1 だと枚数が少ないときにサムネが引き伸ばされる（2026-09-29） */
  flex:0 1 calc((100% - 40px) / 3);   /* 160px＝(520 − gap20×2) ÷ 3 */
  aspect-ratio:160 / 107;    /* Figma: 160×107 */
  border-radius:8px;
  background:#F7F7F7;
}
.pg__shot button{
  display:block;
  width:100%; height:100%;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  transition:opacity .3s;
}
.pg__shot button:hover{ opacity:.75; }   /* Figmaは通常表示。区別は青枠で */
.pg__shot.is-active button{
  opacity:1;
  border:1px solid var(--c-accent);  /* Figma: Rectangle 130 stroke #1F5085 */
}
.pg__shot img{ width:100%; height:100%; object-fit:cover; }
.pg__main img{ transition:opacity .2s; }

.pg__body{ margin-top:24px; }  /* y8211 → y8235 */

/* 2026-09-25 川嶋さんの指示（Chatwork 15:34 の赤字）：
   「場所の部分をタイトルに入れずに目立たせたい」「今回の趣旨からして、場所をぱっとわからせたい」
   → 商品名から【美浜・◯◯】を外し、◯◯を上段の先頭に置く。朝／昼／夜もタグの見た目に揃えた。 */
.pg__tags{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  /* 行の間隔を 8px → 14px に（開催場所の下にタグが回ったときの余白。蓮太朗さん・2026-09-30） */
  gap:14px 16px;
  min-height:25px;
}
.pg__area{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:16px;         /* タグとの間だけ広げる（16+16＝32px。2026-09-30 に24→32px） */
  font-size:15px;
  line-height:1;
  letter-spacing:.04em;
  font-weight:500;
  color:var(--c-accent);
}
/* 見出しの四角と同じ形（12px・角丸2px）を一回り小さくしたもの */
.pg__area-ico{
  flex:none;
  width:10px; height:10px;
  border-radius:2px;
  background:var(--c-accent);
}
.pg__time{
  padding:5px 9px;
  border:1px solid #7D7D7D;
  border-radius:4px;
  font-size:13px;
  line-height:1;
  letter-spacing:.04em;
  color:#7D7D7D;             /* Figma: rgb(125,125,125) */
}
.pg__cat{
  padding:5px 9px;
  border:1px solid #7D7D7D;  /* Figma: Frame 89 stroke #7D7D7D */
  border-radius:4px;
  font-size:13px;
  line-height:1;
  letter-spacing:.04em;
  color:#7D7D7D;             /* Figma: rgb(125,125,125) */
}
.pg__ttl{
  margin:16px 0 0;           /* サブタイトルを外したぶん、タグとの間を少し空ける（2026-09-25） */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:24px;
  line-height:1.6;        /* 24px × 1.6 = 38.4px */
  letter-spacing:.04em;
}
.pg__lead{
  margin-top:20px;           /* 見出しと本文を離す（川嶋さん・9/25）。カンプは8px */
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
  /* 🔴 2026-09-30：最初から全文を出す（蓮太朗さん）。
     もとは Figma のカンプに合わせて閉じたカードを3行で省略していた（末尾に「…」があった）。 */
}

/* 基本3項目 / 詳細項目：ラベル120px＋値 */
.pg__basic,
.pg__rows{ margin:0; }
.pg__basic{
  margin-top:16px;
  padding:12px 0;                /* Figma: Frame137 y8469 h96（罫線1＋上12＋3行71＋下12） */
  border-top:1px solid #D0D0D0;  /* Figma: Frame137 top:1 #D0D0D0 */
}
.pg__basic > div,
.pg__rows > div{
  display:flex;
  gap:0;
  font-size:13px;
  line-height:1.6;        /* 13px × 1.6 = 20.8px */
  letter-spacing:.04em;
}
.pg__basic > div + div{ margin-top:4px; }   /* Figma: 行間隔25px（21＋4） */
.pg__rows > div{
  padding:12px 0;                /* Figma: 各ブロック h46（罫線1＋上12＋21＋下12） */
  border-top:1px solid #D0D0D0;  /* Figma: 各ブロック top:1 #D0D0D0 */
}
.pg__basic dt,
.pg__rows dt{
  flex:none;
  width:120px;               /* x160 → x280 */
  min-width:0;
}
.pg__basic dd,
.pg__rows dd{ margin:0; flex:1; min-width:0; }

/* 見どころ（設定シート「体験の内容」の【見どころ】）。ほかの項目と同じ1行として置く */
.pg__spots{
  margin:0;
  padding:0;
  list-style:none;
}
.pg__spots li{
  position:relative;
  padding-left:14px;
}
.pg__spots li::before{
  content:"";
  position:absolute;
  left:2px; top:9px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--c-accent);
}
.pg__spots li + li{ margin-top:2px; }

/* 体験の流れ：STEP番号を横長の丸で囲む（9/25の打合せ） */
/* 行程だけは dt を上に置いて全幅で見せる（.pg__rows > div の flex より詳細度を上げる） */
.pg__rows > div.pg__row--steps{ display:block; }
.pg__rows > div.pg__row--steps dt{ width:auto; margin-bottom:8px; }
.pg__steps{
  margin:0;
  padding:0;
  list-style:none;
}
.pg__steps li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.pg__steps li + li{ margin-top:6px; }
.pg__step-no{
  flex:none;
  min-width:56px;
  padding:1px 10px 2px;
  border:1px solid var(--c-accent);
  border-radius:999px;
  color:var(--c-accent);
  font-family:var(--f-gothic);
  font-size:11px;
  line-height:1.6;        /* 11px × 1.6 = 17.6px */
  letter-spacing:.04em;
  text-align:center;
}
.pg__step-time{
  flex:none;
  font-family:var(--f-gothic);
  font-size:13px;
  line-height:1.6;        /* 13px × 1.6 = 20.8px */
  letter-spacing:.04em;
}
.pg__step-txt{ flex:1; min-width:0; }


/* 詳細部分（アコーディオン）
   display の切り替えではアニメーションしないので grid-template-rows を使う */
/* 高さは script.js が実寸（scrollHeight）を入れてアニメーションさせる */
.pg__detail{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
.pg.is-open .pg__detail{ max-height:none; }

.pg__book{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:53px;               /* Figma: Frame108 罫線y8932〜y8984（間隔52＋下罫線1） */
  margin-top:23px;           /* Figma の罫線は枠の境界線上（外側1px）に描かれる */
  background:#E8F5FA;
  border-top:1px solid var(--c-text);
  border-bottom:1px solid var(--c-text);
  font-size:18px;            /* Figma: 18px/18px（「詳しく見る」は16px） */
  line-height:1;        /* 18px × 1 = 18px */
  letter-spacing:.04em;
  transition:background-color .3s;
}
/* ここは通常から水色なので、ホバーでは一段濃くする（.btn / .assoc は透明→水色） */
.pg__book:hover{ background:#D5EAF4; }
/* Figma: アイコンは文字の直後ではなく枠の右端（x654〜671／カード右端680）
   矢印は同じものを2枚重ね、ホバーで1枚目が右上へ抜け、2枚目が左下から入る */
.pg__book-ico{
  position:absolute;
  right:9px;
  width:17px; height:16px;
  overflow:hidden;
}
.pg__book-ico svg{
  position:absolute;
  left:0; top:0;
  width:17px; height:16px;
  fill:none;
  stroke:var(--c-text);
  stroke-width:1;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.pg__book-ico svg:nth-child(2){ transform:translate(-22px, 22px); }
.pg__book:hover .pg__book-ico svg:nth-child(1){ transform:translate(22px, -22px); }
.pg__book:hover .pg__book-ico svg:nth-child(2){ transform:translate(0, 0); }

.pg__toggle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:49px;               /* Figma: Frame135 罫線y9008〜y9056（間隔48＋下罫線1） */
  margin-top:23px;           /* Figma の罫線は枠の境界線上（外側1px）に描かれる */
  padding:0;
  background:transparent;
  border:0;
  border-top:1px solid var(--c-text);
  border-bottom:1px solid var(--c-text);
  font-family:var(--f-gothic);
  font-size:16px;
  letter-spacing:.04em;
  color:var(--c-text);
  cursor:pointer;
  transition:opacity .3s;
}
.pg__toggle:hover{ opacity:.7; }   /* Figmaは白背景。ホバーは「予約サイトで見る」と同じ薄まる動き */
.pg__toggle-ico{
  position:absolute;
  right:13px;                /* Figma: x654〜667／カード右端680 */
  width:13px; height:6px;
  fill:none;
  stroke:var(--c-text);
  stroke-width:1;
  transition:transform .3s;
}
.pg.is-open .pg__toggle-ico{ transform:rotate(180deg); }

/* =========================================================
   Booking
   Figma: y13348〜14240
   ========================================================= */
.booking{
  position:relative;
  overflow:hidden;
}
.booking__inner{
  position:relative;
  width:var(--pc-w);
  min-height:936px;          /* Figma: y13304〜14240。実データで伸びても崩れないように */
  /* 🔴 注記の下の余白160px（Figma: 注記下端14080 → セクション下端14240）は、
     min-height の余りではなく padding で持つ（2026-09-25）。
     取消料の原文を入れて注記が伸びたとき、余りが食われてQ&Aと詰まったため。 */
  padding-bottom:160px;
  left:50%;
  transform:translateX(-50%);
}
.booking .sec-head{ position:static; transform:none; margin-inline:auto; }

/* ---------- STEP 3つ ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,276px);
  gap:86px;                  /* x220→582→944 */
  justify-content:center;
  margin:64px 0 0;           /* 和文下端 y13422 → y13486 */
  padding:0;
  list-style:none;
}
.step{ height:242px; }      /* Figma: Component 14 276×242（STEPの文言は確定済み） */
.step__no{
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:18px;
  line-height:1;        /* 18px × 1 = 18px */
  letter-spacing:.04em;
  color:var(--c-text);       /* Figma: #333333（青はセクション見出しだけ） */
}
.step__ttl{
  margin:12px 0 0;           /* STEP 01 下端 y13504 → 罫線 y13516 */
  padding-top:13px;          /* 罫線 y13516 → タイトル y13529 */
  min-height:80px;           /* Figma: Frame 166 276×80 */
  border-top:1px solid #D0D0D0;  /* Figma: individualStrokeWeights top:1 */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:22px;
  line-height:1.6;            /* Figma は35.2pxだが、35pxのほうがセクション全体の高さが合う */
  letter-spacing:.04em;
}
.step__txt{
  margin-top:24px;           /* Frame166 下端 y13596 → 本文 y13620 */
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
}

/* ---------- お支払い／キャンセル ---------- */
.notes{
  width:1000px;
  /* 🔴 高さを固定しない（2026-09-25）。Figmaの288pxは短い仮の文言のときの寸法で、
     取消料の原文（Bókun設定シート）に差し替えると収まらないため */
  margin:64px auto 0;        /* y13728 → y13792 */
  padding:32px 80px;         /* x220→x300 */
  background:#F9F9F9;
  border:1px solid #D0D0D0;
}
.notes__block + .notes__block{ margin-top:24px; }
/* ⚠️ Figma は「お支払いについて」だけ行送り35.2px、「キャンセルについて」は32px */
.notes__block:first-child .notes__ttl{ line-height:1.8; }        /* 20px × 1.8 = 36px */
.notes__ttl{
  margin:0;
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:20px;
  line-height:1.6;        /* 20px × 1.6 = 32px */
  letter-spacing:.04em;
}
.notes__txt{
  margin-top:8px;            /* Figma: 見出し下端13860 → 本文13868 */
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
}
/* ＜お客様のご都合による取消＞のような、ブロックの中の小見出し */
.notes__sub{
  margin-top:16px;
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
  font-weight:500;
}
.notes__sub + .notes__txt{ margin-top:2px; }
.notes__list{
  margin-top:8px;
  padding-left:20px;
  list-style:disc;
}
.notes__list li + li{ margin-top:4px; }   /* Figma: 各行の間隔31px（行27＋4） */
.notes__list li{
  font-size:15px;
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
}

/* 🔴 2026-10-02 追加。取消料のリストと、プログラム別の注記を横線で分ける（志賀さんの指示）。
   線の色は囲みの枠と同じ #D0D0D0 */
.notes__annot{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #D0D0D0;
}
/* ※のぶら下げ。2行目以降が「※」の下に潜らず、本文の頭で揃う */
.notes__note{
  font-size:14px;
  line-height:1.8;        /* 14px × 1.8 = 25.2px */
  letter-spacing:.04em;
  padding-left:1em;
  text-indent:-1em;
}
.notes__note + .notes__note{ margin-top:4px; }

/* お問い合わせの住所は、SPだけ「誘客課／〒／TEL」で改行する（川嶋さん・9/25）。
   PCとTBは1行に続ける */
.info__br-sp{ display:none; }

/* 左寄せの見出し（Q&A・Access）
   Figma: アイコン(x120)と英字ラベル(x164)が横並び、和文はその下(y+45) */
.sec-head--left{
  position:static;
  transform:none;
  text-align:left;
  align-self:start;          /* 親gridで縦に引き伸ばされないように */
  align-content:start;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:20px;           /* x120+24 → x164 */
}
.sec-head--left .sec-head__icon{
  grid-area:1 / 1;
  margin:0;
}
.sec-head--left .sec-head__en{
  grid-area:1 / 2;
  margin-top:3px;            /* y15106 → y15109 */
  align-self:start;
}
.sec-head--left .sec-head__ja{
  grid-area:2 / 1 / 3 / 3;
  margin-top:21px;           /* アイコン下端 y15130 → y15151 */
}

/* =========================================================
   Q&A
   Figma: y14240〜15106。見出しは左（x220）、本体は右（x528・692px）
   ========================================================= */
.faq-sec{
  position:relative;
  overflow:hidden;
}
.faq-sec__inner{
  position:relative;
  width:var(--pc-w);
  left:50%;
  transform:translateX(-50%);
  min-height:766px;          /* Figma: y14240〜15006（Access の背景の上端） */
  /* 一覧の下端14846 → セクション下端15006 の160pxは padding で持たせる。
     こうしておけば項目を開いて伸びても、下の余白が潰れない */
  padding:0 220px 160px;
  display:grid;
  grid-template-columns:308px 692px;   /* x220→x528 */
}
.faq{ margin:0; }
.faq__item{
  border-bottom:1px solid #D0D0D0;  /* Figma: Frame72 bottom:1 */
}
.faq__q{
  display:flex;
  align-items:flex-start;
  gap:24px;                  /* Figma: 記号右端x560 → テキストx584 */
  width:100%;
  padding:18px 32px 19px 16px;  /* Figma: 閉じた項目65px（上18＋行27＋下19＋罫線1） */
  background:transparent;
  border:0;
  font-family:var(--f-gothic);
  font-size:15px;
  line-height:1.8;          /* Figma: lineHeightPx 27 */
  letter-spacing:.04em;
  color:var(--c-text);
  text-align:left;
  cursor:pointer;
}
.faq__mark{
  flex:none;
  width:16px;                /* Figma: 記号の枠は16px */
  font-family:var(--f-en);
  font-weight:300;         /* Jost を1段下げた（柘植さん 9/25 → 9/28 全体適用。元は未指定＝400） */
  font-size:20px;
  line-height:1.6;  /* 🔴 元は 27px（1.350倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。20px×1.6=32px */
  color:var(--c-text);       /* Figma: Q・A とも #333333 */
}
.faq__txt{ flex:none; width:580px; }  /* Figma: 580px固定 */
/* 回答の中のリンク（「キャンセルについて」へ飛ぶ） */
.faq__link{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.faq__link:hover{ opacity:.65; }
.faq__ico{
  flex:none;
  width:13px; height:6px;
  margin-top:9px;
  fill:none;
  stroke:var(--c-text);
  stroke-width:1;
  transition:transform .3s;
}
.faq__item.is-open .faq__ico{ transform:rotate(180deg); }

/* 回答（アコーディオン）。0fr→1fr で高さをアニメーションさせる */
/* 高さは script.js が実寸（scrollHeight）を入れてアニメーションさせる */
.faq__a{
  margin:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
/* 初期表示はCSSで開く。JSはクリック時にだけ実寸を入れる */
.faq__item.is-open .faq__a{ max-height:none; }
/* 開いた項目は Figma で余白が違う（質問文 frame+24px／回答下 24px・全体147px） */
.faq__item.is-open .faq__q{ padding-top:24px; padding-bottom:17px; }
/* ⚠️ Figma は2問目だけ上下の余白が2pxずつ広い（枠69px・他は65px）。
   コンポーネントの揺れだが、カンプに重ねるためそのまま再現する */
.faq__item:nth-child(2) .faq__q{ padding-top:20px; padding-bottom:21px; }
.faq__a-in{
  display:flex;
  gap:24px;                  /* Figma: 記号右端x560 → テキストx584 */
  padding:0 32px 24px 16px;  /* Figma: 回答下端 y14362 → 枠下端 y14387 */
  font-size:15px;
  line-height:1.8;          /* Figma: lineHeightPx 27（2行で54px） */
  letter-spacing:.04em;
}

/* =========================================================
   Access
   Figma: y15106〜16048。見出し左（x120）、地図左・経路図右
   ========================================================= */
/* 背景（y15006）は見出し（y15106）より100px上から始まる。
   その100px分を padding で確保し、margin で前のセクションに食い込ませることで、
   背景の上下中央に地図と右パネルが収まる（背景中心・パネル中心とも y15425）。 */
.access{
  position:relative;
  overflow:hidden;
  /* 背景写真の上100px（Figma: 15006〜15106）。
     前のセクションに margin-top:-100px で食い込ませるのはやめ、
     Q&A 側の padding-bottom を100px減らして帳尻を合わせている */
  padding-top:100px;
  background:#fff;           /* 写真が届かない部分は他セクションと同じ白 */
  color:#fff;                /* 背景写真の上なので白文字 */
}
/* 背景写真（Figma: y15006 1440×838）
   オーバーレイは #333 を「乗算・不透明度40%」で重ねたもの。
   乗算なので結果は元の色 ×(0.6＋0.4×0.2)＝×0.68。半透明の重ねでは明るくなりすぎる */
/* Figma: 枠1440×838 に対し、画像ノード 1677×1119 を left:-183 top:-257 に配置し、
   そこへ元画像（3000×1686）を imageTransform で割り当てている。
     uv_x = 0.843×nx + 0.0785 ／ uv_y = 1.0×ny − 0.08203
   これを解くと「元画像全体を 1989.3×1119 で left:-339 top:-165 に置く」と同じ。
   枠に見えるのは元画像の (511,249)〜(2683,1512)。 */
/* 写真は <img> ではなく背景で置く。
   img だと 1989×1119 の箱がセクションの外へはみ出してしまうため（overflow で見えないだけ）。
   background なら箱はこの div のまま＝セクションの中で完結する。
   背景色は置かない（filter が白まで暗くしてしまう）。届かない左右は親の .access の白が出る。 */
.access__bg{
  position:absolute;
  left:0; top:0;
  width:100%; height:838px;
  overflow:hidden;
  background-image:url("../img/access/bg.jpg");
  background-repeat:no-repeat;
  /* img の left:calc(50% - 1059px) と同じ位置。
     background-position の % は「枠幅 − 画像幅」が基準なので、
     50% − 1059px ではなく 50% + (1989/2 − 1059)px = 50% − 64.5px と書く */
  background-size:1989px 1119px;
  background-position:calc(50% - 64.5px) -165px;
}
/* 画像の幅(1989px)より広い画面では全面を覆う。
   object-position は枠に見えている範囲の中心（x53% / y52%）に合わせる。 */
@media (min-width:1990px){
  .access__bg{
    background-size:cover;
    background-position:53% 52%;
  }
}
.access__bg{ filter:brightness(.68); }   /* Figma: #333 を乗算40%＝元の色×0.68 */

/* Figma座標どおりに絶対配置（セクション y15106〜16048＝942px） */
.access__inner{
  position:relative;
  z-index:1;
  width:var(--pc-w);
  /* Figma: y15106〜15844。背景写真の下端でセクションを終える。
     Information までの白160pxは .info 側の padding-top に持たせた */
  height:738px;
  left:50%;
  transform:translateX(-50%);
}
.access .sec-head--left{
  position:absolute;
  left:120px; top:0;
}
.access .sec-head__en,
.access .sec-head__ja{ color:#fff; }

.access__map{
  position:absolute;
  left:120px; top:141px;     /* y15247 */
  width:660px;
}
.access__map img{ width:100%; height:auto; }

.access__link{
  position:absolute;
  left:120px; top:601px;     /* y15707 */
  width:660px;
  text-align:right;
}
.access__link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  line-height:1;          /* Figma: 15px/15px */
  letter-spacing:.04em;
  color:#fff;
  transition:opacity .3s;
}
.access__link a:hover{ opacity:.7; }
.access__pin{
  flex:none;                 /* flexで潰れて文字に重なるのを防ぐ */
  width:12px; height:16px;
  fill:#fff;
}

/* 右の白パネル（Figma: 456×638 / #FFF 90% / 角丸8） */
.access__routes{
  position:absolute;
  left:864px; top:0;         /* Figma: x864 */
  width:456px;
  padding:48px;              /* x864→x912 */
  background:rgba(255,255,255,.9);
  border-radius:8px;
  color:var(--c-text);
}
.access__route + .access__route{
  margin-top:27px;           /* 電車の図 下端y15414 → 罫線y15441 */
  padding-top:24px;          /* 罫線y15441（border 1px込み）→ 見出しy15466 */
  border-top:1px solid #D0D0D0;  /* Figma: Frame 460 top:1 */
}
/* Figma: 電車は見出し→図27px、お車は24px */
.access__route:last-child .access__ttl{ margin-bottom:24px; }
.access__ttl{
  margin:0 0 27px;
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:22px;
  line-height:1;        /* 22px × 1 = 22px */
  letter-spacing:.04em;
}
.access__fig img{ width:100%; height:auto; }

/* =========================================================
   Information
   Figma: y16048〜17013
   ========================================================= */
.info{
  position:relative;
  overflow:hidden;
  padding-top:160px;         /* Access の背景写真の下端 → 見出しまでの白（Figma: 15844〜16004） */
}
.info__inner{
  position:relative;
  width:min(var(--pc-w), 100%);  /* 1440px未満では画面幅に合わせて縮める */
  min-height:1009px;         /* Figma: y16004〜17013。実データで伸びても崩れないように */
  left:50%;
  transform:translateX(-50%);
}
.info .sec-head{ position:static; transform:none; margin-inline:auto; }

.info__list{
  /* 🔴 2026-09-30：720px（Figma: Frame 471 x360〜1080）→ 560px →（345pxまで詰めたが
     会期とお問い合わせが折り返しすぎたため戻した・蓮太朗さん）→ いちばん長い行なりの幅。
     どの値も折り返さず、値の右の余白がラベルの左の余白（16px）と同じになる。
     いちばん長いのは「美浜町観光誘客課（まち旅博覧会運営事務局）」で約330px。
     ⚠️ SPだけは別（下の 450px以下ブロックで 315px）。行の左右パディングが0だから。 */
  width:fit-content;
  max-width:100%;
  margin:64px auto 0;        /* 和文下端 y16122 → y16186 */
  font-size:15px;            /* Figma: 15px/27px・字間0.6px */
  line-height:1.8;        /* 15px × 1.8 = 27px */
  letter-spacing:.04em;
}
.info__list > div{
  display:flex;
  gap:0;
  min-height:60px;           /* Figma: 各行60px */
  padding:16px 16px 0;
  border-bottom:1px solid #D0D0D0;  /* Figma: 各行に下罫線 */
}
/* Figma実測の行高さ（会期と問い合わせは2〜3行ぶん） */
.info__list > div:nth-child(1){ min-height:60px; }
.info__list > div:nth-child(2){ min-height:87px; }
.info__list > div:nth-child(3){ min-height:60px; }
.info__list > div:nth-child(4){ min-height:60px; }
.info__list > div:nth-child(5){ min-height:60px; }
.info__list > div:nth-child(6){ min-height:114px; }
.info__list dt{
  flex:none;
  /* 🔴 2026-09-30：140px（Figma: x376→x516）から詰めた（蓮太朗さん）。
     いちばん長いラベル「お問い合わせ」が 15px×6字＋字間 ≒ 94pxなので、10pxの余裕を残す */
  width:110px;
}
.info__list dd{ margin:0; flex:1; }
.info__note{
  font-size:15px;            /* Figma: 本文と同じ15px・#333333 */
}

/* 観光協会への導線（Figma: 320×97・上下罫線・右に斜め矢印20×20） */
.assoc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:320px;
  height:97px;               /* Figma: Frame 476 320×97 */
  margin:64px auto 0;
  padding:0 10px;
  border-top:1px solid var(--c-text);
  border-bottom:1px solid var(--c-text);
  transition:background-color .3s;
}
/* ホバー：「プログラムを見る」ボタンと同じ挙動（背景が水色＋矢印が入れ替わる） */
.assoc:hover{ background:#E8F5FA; }
.assoc__txt{
  flex:1;
  text-align:center;
}
.assoc__lead{
  display:block;
  font-family:var(--f-mincho);
  font-weight:500;           /* Figma: Shippori Mincho Medium */
  font-size:15px;
  line-height:1;          /* Figma: y16715 h15 */
  letter-spacing:.04em;
}
.assoc__name{
  display:block;
  margin-top:12px;           /* Figma: 上の行の下端16730 → y16742 */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:22px;
  line-height:1;          /* Figma: y16742 h22 */
  letter-spacing:.04em;
}
.assoc__arrow{
  flex:none;
  position:relative;
  width:20px; height:20px;
  overflow:hidden;               /* はみ出した矢印を隠す枠 */
}
.assoc__arrow svg{
  position:absolute;
  left:0; top:0;
  width:20px; height:20px;
  fill:none;
  stroke:var(--c-text);
  stroke-width:1;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
/* 斜めの矢印なので、右上へ抜けて左下から入ってくる */
.assoc__arrow svg:nth-child(2){ transform:translate(-26px, 26px); }
.assoc:hover .assoc__arrow svg:nth-child(1){ transform:translate(26px, -26px); }
.assoc:hover .assoc__arrow svg:nth-child(2){ transform:translate(0, 0); }

/* フッター（Figma: Group 514 x80 y16868 1280×121）
   ブランドロゴは右上（x1080 y16868 280×53）、
   その下にサイトロゴ（x80 y16945 300×44）と「主催 美浜町」（x903 y16956）  */
.footer{
  position:absolute;
  left:80px; right:80px;     /* Figma: x80〜x1360。狭い画面でも左右80pxは残す */
  /* Figma: y16868 − セクション開始 y16004。
     2026-09-30、「主催　美浜町」を削除して右カラムがコピーライト1行だけになり、
     下段の高さがサイトロゴ基準（44px）に戻ったので、この値もFigmaどおりに戻した */
  top:864px;
}
/* 観光協会サイト（wakasa-mihama.jp）と同じ文言。下段の右端に小さく置く */
.footer__copy{
  font-size:12px;
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--c-text);
}
.footer__copy a{ color:inherit; text-decoration:none; }
.footer__copy a:hover{ text-decoration:underline; }
.footer__brand{
  width:280px;
  margin:0 0 0 auto;         /* 右寄せ（x1080） */
}
.footer__bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:24px;           /* y16868+53 → y16945 */
}
/* 下段の右半分（コピーライト）。「主催　美浜町」も入っていた枠 */
.footer__right{
  flex:1;
  margin-bottom:11px;        /* テキスト下端 y16978 → 枠下端 y16989 */
  text-align:right;          /* Figma: textAlign=RIGHT・右端 x1360 */
}
.footer__logo{
  width:300px;
}
.footer__logo img{ width:100%; height:auto; }

/* =========================================================
   TB（834基準・独立レイアウト） / SP（400基準・独立レイアウト）
   ※ 柘植さんのデザインに沿って別途構築
   ========================================================= */
/* =========================================================
   SPメニュー（Figma 187:4190 / 400×840）
   ========================================================= */
.menu{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  transform:translateX(100%);      /* 画面の右外で待機 */
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.menu.is-open{ transform:translateX(0); }   /* 右からスライドイン。閉じると右へ戻る */
.menu[hidden]{ display:none; }

.menu__bg{
  position:absolute;
  inset:0;
  background:#D9D9D9;
}
.menu__bg img{
  width:100%; height:100%;
  object-fit:cover;
  /* Figma（nav 400×840）: 画像1502×844 を left:-723 に置いているので、
     枠に見えているのは横48〜75%・中心61%のあたり */
  object-position:61% 50%;
}

.menu__close{
  position:absolute;
  left:338px; top:32px;
  z-index:2;
  width:37px; height:16px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.menu__close span{
  position:absolute;
  left:0; top:8px;
  width:37px; height:1px;
  background:#fff;           /* Figma: Group 519 stroke #FFFFFF */
}
.menu__close span:nth-child(1){ transform:rotate(20deg); }
.menu__close span:nth-child(2){ transform:rotate(-20deg); }

/* 白い半透明パネル（Figma: Rectangle 145 320×425 / #FFF 90% / 角丸8） */
.menu__panel{
  position:absolute;
  left:40px; top:82px;
  width:320px; height:425px;
  background:rgba(255,255,255,.9);
  border-radius:8px;
}
.menu__logo{
  position:absolute;
  left:80px; top:56px;       /* x120 y138 − パネル起点 */
  width:160px;
}
.menu__logo img{ width:100%; height:auto; }
/* 縦書きメニュー（6項目・間隔39px） */
.menu__nav{
  position:absolute;
  left:55px; top:209px;      /* x95 y291 − パネル起点 */
  width:210px;
}
.menu__nav ul{
  display:flex;
  gap:24px;                  /* 39px − 文字幅15px */
}
.menu__nav li{
  writing-mode:vertical-rl;
  width:15px;
}
.menu__nav a{
  font-size:16px;
  line-height:1;
  /* Figma は16pxの文字を送り18pxで縦に並べている（8文字で144px）。
     縦書きでは letter-spacing が字送りになるので 2px ぶん空ける */
  letter-spacing:.125em;
  transition:opacity .3s;
}
.menu__nav a:hover{ opacity:.6; }

/* 観光協会への導線（上下罫線） */
/* Figma（nav 187:4190 / Frame 476）：背景なし・上下に白い罫線・白文字・中央揃え */
.menu__assoc{
  position:absolute;
  left:40px; top:547px;
  width:320px;
  padding:23px 10px;         /* 罫線1px＋23px で Figma の y571／y644 に合う */
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  color:#fff;
  text-align:center;
  transition:opacity .3s;
}
.menu__assoc:hover{ opacity:.7; }
.menu__assoc-txt{ display:block; }
/* 斜め矢印（Figma: Group 420 x330 y585 20×20・白） */
.menu__assoc-arrow{
  position:absolute;
  right:10px; top:38px;
  width:20px; height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:1;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.menu__assoc:hover .menu__assoc-arrow{ transform:translate(3px,-3px); }
.menu__assoc-lead{
  font-weight:500;           /* Figma: Shippori Mincho Medium */
  display:block;
  font-family:var(--f-mincho);
  font-size:15px;
  line-height:1;          /* Figma: y571 h15 */
  letter-spacing:.04em;
}
.menu__assoc-name{
  display:block;
  margin-top:12px;           /* Figma: 上の行の下端586 → y598 */
  font-family:var(--f-mincho);
  font-weight:500;
  font-size:22px;
  line-height:1;          /* Figma: y598 h22 */
  letter-spacing:.04em;
}

.menu__logo-w{
  position:absolute;
  left:90px; top:684px;      /* Figma: logo_w 1 x90 y684 220×42 */
  width:220px;
}

/* ハンバーガー（SPのみ表示） */
.menu-btn{
  display:none;
  position:absolute;
  left:336px; top:32px;
  z-index:3;
  width:40px; height:16px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.menu-btn span{
  display:block;
  width:40px; height:1px;
  background:var(--c-text);
  transition:transform .3s,opacity .3s;
}
.menu-btn span + span{ margin-top:7px; }
.menu-btn.is-open span:nth-child(1){ transform:translateY(8px) rotate(20deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-20deg); }

/* =========================================================
   1440px未満（PCレイアウトのまま横幅だけ足りなくなる範囲）
   地図660px＋経路パネル456px は 1440px でちょうど収まる寸法なので、
   それより狭い画面では横に並べず、Figma SP と同じ縦積みに切り替える。
   ========================================================= */
@media (max-width:1439px){

  /* ---------- Access ---------- */
  .access__inner{
    width:100%;
    height:auto;
    padding:0 40px 100px;      /* パネル下端から背景の下端まで100px（Figma: 15744→15844） */
  }
  /* 縦積みで伸びた分まで写真を敷く。背景＝セクションの高さそのもの */
  .access__bg{
    height:100%;
    background-size:cover;
    background-position:53% 52%;   /* カンプの表示中心 */
  }
  .access .sec-head--left{ position:static; }
  .access__map{
    position:static;
    width:100%;
    max-width:660px;               /* Figma: 660×460 */
    margin:64px auto 0;
  }
  .access__link{
    position:static;
    width:100%;
    max-width:660px;
    margin:8px auto 0;
    text-align:right;
  }
  .access__routes{
    position:static;
    width:100%;
    max-width:660px;
    margin:48px auto 0;
    padding:40px;
  }

  /* ---------- Navigators ---------- */
  /* 🔴 2026-09-29 に中央寄せへ変更したので、ここで左寄せに戻さない。
     もとは margin-left:max(40px, calc(50% - 560px)) / width:min(1064px, 100% - 80px)
     ＝カンプの左160px・右216px を保ったまま縮める指定だった。 */
  .navigators__list{
    margin-left:auto;
    margin-right:auto;
  }

}

/* =========================================================
   TB（Figma 1:11775 / 834×1112 基準）
   FVだけ専用デザインがあり、本文セクションは SP と同じ縦1列。
   ※ Figmaに TB の本文デザインは無い（FVのみ）。縦並びは蓮太朗さんの指示（9/24）
   ========================================================= */
/* =========================================================
   1024〜1250px：FVのレイアウトは1440px基準のまま見切れさせるが、
   右の縦書きナビは 1240px を下回ると画面の外に出てしまう
   （ナビの右端＝(画面幅−1440)/2＋1340 なので、1240px でちょうど画面端）。
   スクロールバーのぶんの余裕も見て、1250px 以下からハンバーガーに切り替える。
   ========================================================= */
@media (max-width:1250px) and (min-width:1024px){
  .fv__nav{ display:none; }
  .menu-btn{
    display:block;
    left:auto; right:42px; top:32px;   /* TB以下と同じ位置 */
  }
  .site-header__nav{ display:none; }
  .menu-btn--header{
    display:block;
    position:absolute;
    right:42px;
    /* 🔴 2026-09-30：`.menu-btn` の `top:32px`（FV内での位置）をそのまま受けていて、
       高さ60pxのヘッダーの中で下に寄っていた。上下中央に置き直す */
    top:50%;
    transform:translateY(-50%);
  }
  .site-header__inner{ justify-content:center; padding:0 40px; }

  /* 開いたメニューも画面中央に。1023px以下と同じ扱いにする。 */
  .menu__panel{ left:50%; margin-left:-160px; }
  .menu__close{ left:auto; right:43px; }         /* 開くボタン（ハンバーガー）と中心を揃える（Figma SP と同じ 1px 差） */
  .menu__assoc{ left:50%; margin-left:-160px; }
  .menu__logo-w{ left:50%; margin-left:-110px; } /* 220pxの半分 */
}

@media (max-width:1023px){

  /* ---------- FV（Figma 1:11775 / 834×1112） ---------- */
  .fv__inner{
    width:834px;
    height:1112px;
  }
  .menu-btn{ display:block; left:752px; top:32px; }   /* Figma: Frame 485 40×16 */
  .fv__nav{ display:none; }

  /* 写真8点（枠＝マスク矩形／中の画像はFigmaの実測値） */
  .fv__photo--a{ left:-387px; top:-328px; width:492px; height:492px; }
  .fv__photo--a img{ left:-14px;  top:236px;  width:551px; height:367px; }
  .fv__photo--b{ left:544px;  top:77px;   width:323px; height:323px; }
  .fv__photo--b img{ left:-208px; top:0;     width:618px; height:412px; }
  .fv__photo--c{ left:-7px;   top:496px;  width:266px; height:266px; }
  .fv__photo--c img{ left:0;      top:-66px;  width:636px; height:425px; }
  .fv__photo--d{ left:646px;  top:785px;  width:202px; height:202px; }
  .fv__photo--d img{ left:-74px;  top:-2px;   width:307px; height:206px; }
  .fv__photo--e{ left:105px;  top:164px;  width:186px; height:186px; }
  .fv__photo--e img{ left:-52px;  top:-18px;  width:307px; height:204px; }
  .fv__photo--f{ left:576px;  top:450px;  width:168px; height:168px; }
  .fv__photo--f img{ left:-111px; top:-33px;  width:365px; height:248px; }
  .fv__photo--g{ left:527px;  top:988px;  width:119px; height:119px; }
  .fv__photo--g img{ left:-33px;  top:0;      width:178px; height:119px; }
  .fv__photo--h{ left:-7px;   top:966px;  width:165px; height:165px; }

  /* 大きい順が PC と変わる：a492 → b323 → c266 → d202 → e186 → f168 → h165 → g119 */
  .fv__photo--a{ --fv-i:0; }   /* 492px */
  .fv__photo--b{ --fv-i:1; }   /* 323px */
  .fv__photo--c{ --fv-i:2; }   /* 266px */
  .fv__photo--d{ --fv-i:3; }   /* 202px */
  .fv__photo--e{ --fv-i:4; }   /* 186px */
  .fv__photo--f{ --fv-i:5; }   /* 168px */
  .fv__photo--h{ --fv-i:6; }   /* 165px */
  .fv__photo--g{ --fv-i:7; }   /* 119px */
  .fv__photo--h img{ left:-316px; top:-114px; width:721px; height:481px; }

  /* ロゴ・縦書きタイトル（サイズはPCと同じ） */
  .fv__logo{ left:337px; top:40px; width:160px; }
  .fv__title{ left:350px; top:217px; width:134px; }

  /* 日付（Figma: 2026 x461 y649 → 福井県 y746） */
  .fv__date{ left:461px; top:649px; }
  .fv__md{ letter-spacing:.02em; }    /* Figma: 0.96px / 48px */
  .fv__place{ margin-top:22px; }      /* 11.28の下端 y724 → y746 */

  /* リード文（Figma: x120 y808 w233 / 14px・行送り28px） */
  .fv__lead{
    left:120px; top:808px;
    width:233px;
    font-size:14px;
    line-height:2;        /* 14px × 2 = 28px */
  }

  /* ---------- 固定ヘッダー ----------
     ナビ6項目は 834px に収まらないので、TB以下ではハンバーガーに置き換える。
     ハンバーガーはFV内にもあるが、そちらはFVと一緒にスクロールで流れるので、
     スクロール後も右上に出しておくためにヘッダー側にも置いている。 */
  .site-header__inner{
    position:relative;
    justify-content:center;   /* Figma TB: ロゴは中央（x337〜497／834の中心417） */
    padding:0 40px;
  }
  .site-header__nav{ display:none; }
  /* ハンバーガーは FV枠の外（.fv 直下）にあるので、画面の右端が基準になる。
     固定ヘッダー内のものも、メニューの×も、同じ right:42px で揃う。 */
  .menu-btn{
    left:auto; right:42px; top:32px;
  }
  .menu-btn--header{
    display:block;
    position:absolute;
    right:42px;
    /* 🔴 2026-09-30：`.menu-btn` の `top:32px`（FV内での位置）をそのまま受けていて、
       高さ60pxのヘッダーの中で下に寄っていた。上下中央に置き直す */
    top:50%;
    transform:translateY(-50%);
  }

  /* ---------- メニュー ----------
     SP（400px）用の座標で組んであるので、画面が広いTBでは左上に寄ってしまう。
     パネル一式を画面中央に置き直す（SPでは 50%−160px＝40px で元の位置と同じになる）。 */
  .menu__panel{ left:50%; margin-left:-160px; }
  .menu__close{ left:auto; right:43px; }         /* 開くボタン（ハンバーガー）と中心を揃える（Figma SP と同じ 1px 差） */
  .menu__assoc{ left:50%; margin-left:-160px; }
  .menu__logo-w{ left:50%; margin-left:-110px; } /* 220pxの半分 */

  /* ---------- 共通：絶対配置をやめて1列に ---------- */
  /* 本文は読みやすい幅に収めて中央に置く。
     520px＝PCのプログラムカードと同じ幅（蓮太朗さんの指示・9/24）。
     SP（400px）では画面のほうが狭いので max-width は効かない。 */
  .about__inner,
  .navigators__inner,
  .programs__inner,
  .booking__inner,
  .faq-sec__inner,
  .access__inner,
  .info__inner{
    width:100%;
    max-width:560px;         /* 本文520px ＋ 左右20px */
    margin-inline:auto;
    height:auto;
    left:0;
    transform:none;
    padding-left:20px;
    padding-right:20px;
  }
  .sec-head{
    position:static;
    transform:none;
    margin-inline:auto;
    text-align:center;
  }
  /* 左寄せの見出し（Access・Q&A）は PC では grid の横並び。
     TB以下では他のセクションと同じ「アイコン→英字→和文」の縦積み中央寄せに戻す。 */
  .sec-head--left{
    display:block;
    text-align:center;
  }
  .sec-head--left .sec-head__icon{ margin:0 auto; }
  .sec-head--left .sec-head__en{ margin-top:20px; }
  .sec-head--left .sec-head__ja{ margin-top:24px; }
  .sec-head__ja{ font-size:26px; line-height:1.6; white-space:normal; }  /* 🔴 元は 38px（1.462倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。26px×1.6=41.6px */

  /* ---------- About ---------- */
  .about__inner{ padding-top:80px; padding-bottom:100px; }
  .about__bg{
    position:relative;
    left:auto; top:auto;
    width:100vw;                      /* 本文幅(560px)ではなく画面いっぱいに */
    /* 高さは PC(668px)〜SP(522px) を幅で補間する。1023px→609 / 834px→583 / 600px→550 */
    height:clamp(522px, calc(465.8px + 14.04vw), 668px);
    z-index:-1;          /* 見出し・本文より後ろへ（.about は z-index:auto なので前景には出ない） */
    /* PC と同じように本文の頭から重ねる。上端の白グラデで文字は読める。
       本文の下端が基準なので、文章が増えても写真が見出しに食い込まない */
    margin:-240px 0 0 calc(50% - 50vw); /* .about に overflow:hidden があるのではみ出しは隠れる */
  }
  .about__body{
    position:static;
    width:100%;
    max-width:100%;
    margin-top:40px;
  }
  .features{
    position:static;
    width:auto;
    max-width:400px;        /* ここだけ本文幅(520px)より狭く。1枚1枚の写真が大きくなりすぎるため */
    margin:64px auto 0;
    grid-template-columns:1fr;
    gap:56px;
    display:grid;
  }
  .feature{ width:auto; }
  .feature__img{ width:100%; height:auto; aspect-ratio:1 / 1; }
  .about__btns{
    position:static;
    margin-top:64px;
    flex-direction:column;
    align-items:center;
    gap:40px;
  }

  /* ---------- Navigators ---------- */
  /* 🔴 2026-09-30：カード2列は 312×2 ＋ gap16 ＝ 640px 必要で、他セクションと同じ
     本文幅（560px＝本文520＋左右20）に収まらず右へはみ出していた＝右にずれて見えていた。
     ここはカードの並びで本文ではないので、この枠だけ 640＋左右20 ＝ 680px に広げる。 */
  .navigators__inner{ max-width:680px; padding-top:80px; padding-bottom:100px; }
  .navigators__sub{ position:static; margin-top:40px; }
  .navigators__list{
    position:static;
    /* 🔴 2026-09-29：中央寄せに変更。もとは width:auto / margin:48px 0 0 で左寄せだった。
       カードはPCと同じ260px幅に揃える（1fr だと幅いっぱいに伸びて写真が大きくなりすぎる） */
    /* 🔴 2026-09-30：列幅を312px固定から 1fr に変えた。
       固定のままだと枠（680px）より狭い画面で右へはみ出していた。
       いちばん広いとき312px、そこから画面に合わせてSPの大きさまで滑らかに縮む。 */
    width:auto;
    max-width:none;
    margin:48px auto 0;
    grid-template-columns:repeat(2, 1fr);
    gap:40px 16px;
  }
  .navi{ width:auto; gap:8px; }
  .navi__main{ width:auto; flex:1; }
  .navi__img{ width:100%; height:auto; aspect-ratio:260 / 360; }
  .navi__place,
  .navi__names{ font-size:13px; line-height:1.6; }        /* 13px × 1.6 = 20.8px */

  /* ---------- Programs ---------- */
  /* Programsの白ボックスは、PC表示と同じ左右の水色余白（左37px・右43px）で置く。
     中のカードは他セクションの本文と同じ520pxで中央に寄せる。 */
  .programs__inner{
    max-width:none;
    padding-left:0;
    padding-right:0;
    padding-bottom:160px;    /* 白ボックスの下端 → 水色の下端80px ＋ 白80px（SPと同じ組み立て） */
  }
  .programs__box{
    width:auto;
    /* 🔴 2026-09-30：Figmaの 左37／右43 をそのまま入れていて6px右に寄っていた。
       左右とも40pxに揃えた（蓮太朗さん） */
    margin:0 40px;
    padding:80px 16px;
  }
  /* ボックスの中身は520pxで中央 */
  .pg-map,
  .pg-filter,
  .pg-index,
  .pg-list{
    max-width:520px;
    margin-inline:auto;
  }
  /* Figma SP: 白ボックスの下端18008 → 水色の下端18088（80px）。
     セクション下端は白ボックス＋160pxなので、その差80pxを引く */
  .programs::before{ height:calc(100% - 80px); }
  .pg-map{
    width:auto;
    height:auto;
    margin:48px auto 0;      /* PCの左83pxを解除 */
  }
  .pg-map__embed{
    position:static;
    width:100%; height:240px;
    padding:0 24px;
    gap:16px;
  }
  .pg-map__ttl{ font-size:20px; line-height:1.6; }  /* 🔴 元は 28px（1.400倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。20px×1.6=32px */
  .pg-map__txt{ font-size:13px; line-height:1.6; }        /* 13px × 1.6 = 20.8px */
  /* ⚠️ 縦並びではスクロールさせない（蓮太朗さんの判断・9/25）。
     iOS Safari は「要素の中でスクロールを始めると指を離すまでその要素にロックされる」ため、
     一覧の端まで送ってもページに移れず、先へ進めなくなる。10件そのまま並べる。 */
  .pg-map__list{
    position:static;
    width:100%;
    height:auto;
    margin-top:24px;
    padding-right:0;
    overflow:visible;
  }
  .pg-filter{ width:auto; margin:48px auto 0; gap:16px; flex-wrap:wrap; }
  .pg-index{
    width:auto;
    height:auto;
    grid-template-columns:1fr;
    margin:32px auto 0;
  }
  .pg-list{
    width:auto;
    grid-template-columns:1fr;
    gap:64px;
    margin:48px auto 0;
  }
  .pg{ width:auto; }
  .pg__main{ width:100%; height:auto; aspect-ratio:520 / 346; }
  .pg__shots{ gap:8px; margin-top:8px; }
  .pg__shot{ width:auto; flex:0 1 calc((100% - 16px) / 3); height:auto; aspect-ratio:160 / 107; }  /* gap8×2 */
  .pg__ttl{ font-size:22px; line-height:1.6; }        /* 22px × 1.6 = 35.2px */
  .pg__basic dt,
  .pg__rows dt{ width:100px; }

  /* ---------- Booking ---------- */
  .booking__inner{ padding:80px 20px 100px; }
  .steps{
    grid-template-columns:1fr;
    gap:48px;
    margin-top:48px;
  }
  .step{ height:auto; min-height:0; }      /* PCの242px固定を解除 */
  .notes{
    width:auto;
    height:auto; min-height:0;   /* PCの288px固定を解除 */
    margin-top:48px;
    padding:24px 20px;
  }

  /* ---------- Q&A ---------- */
  .faq-sec__inner{
    display:block;
    padding:0 20px 34px;   /* 最後の罫線 → Access の背景の上端。あとは .access の padding-top:100px */
  }
  .faq{ margin-top:40px; }
  /* 🔴 2026-09-30：質問文が Figma の 580px 固定のままで、
     枠（560px − 左右20px ＝ 520px）から大きくはみ出していた。
     記号16＋間24＋本文580＋間24＋アイコン13＋左右パディング48 ＝ 705px で185px超過。
     開閉アイコンが右へ押し出され「矢印の位置がおかしい」状態になっていた。
     SP（450px以下）と同じく、枠なりに伸び縮みさせる */
  .faq__txt{ flex:1; width:auto; min-width:0; }

  /* ---------- Access ---------- */
  .access__inner{
    height:auto;
    /* 上は 0。.access 自体が padding-top:100px / margin-top:-100px で
       前のセクションに食い込んでおり、そこが見出しまでの余白になる（PC・1439px以下と同じ）。
       ここに 80px を足すと 180px 空いてしまう */
    padding:0 20px 100px;      /* 下はパネル下端から背景の下端まで100px */
  }
  .access__bg{ height:100%; }
  .access .sec-head--left{
    position:static;
    text-align:center;
  }
  .access__map{
    position:static;
    width:100%;
    margin-top:40px;
  }
  .access__link{
    position:static;
    width:100%;
    margin-top:8px;
  }
  .access__routes{
    position:static;
    width:100%;
    margin-top:48px;
    padding:32px 20px;
  }

  /* ---------- Information ---------- */
  .info__inner{ height:auto; padding:80px 20px 60px; }
  /* Figma SP: 観光協会ブロック下端 y22735 → ブランドロゴ y22815（80px）
     → サイトロゴ y22893（40px）→ 主催 y22952（24px） */
  .footer{
    position:static;
    width:auto;
    margin-top:80px;
    padding:0 20px 60px;
  }
  .footer__brand{ width:200px; margin:0 auto; }   /* Figma SP: 200×38 */
  .footer__bottom{
    flex-direction:column;
    align-items:center;
    gap:24px;
    margin-top:40px;
  }
  .footer__logo{ width:240px; }                   /* Figma SP: 240×35 */
  .footer__right{ flex:none; margin-bottom:0; text-align:center; }
  /* Figma SP も PC と同じ横並び（dt x20 w140 ／ dd x160）。
     PCの個別height（60〜114px）だけ解除して、中身なりに伸ばす。 */
  .info__list{ margin-top:48px; }
  .info__list > div:nth-child(n){
    height:auto; min-height:0;
    padding:16px 0 16px;     /* Figma SP: 行60px＝上16＋本文27＋下16＋罫線1 */
  }


}


/* =========================================================
   TB（834px基準）のFVを、比率を保ったまま縮める帯
   834px → 等倍 ／ 401px → 0.48倍。400px以下でSPカンプに切り替える。
   （蓮太朗さんの指示・9/24「写真ができる限り大きいし、この比率で小さくしていく」）
   ========================================================= */
/* =========================================================
   〜450px：SPカンプ（400px基準）の見た目を、そのまま画面幅に合わせて伸縮させる。
   🔴 2026-09-25 川嶋さんとの調整で、上限を400px → 450px に広げた。
      400pxより広い 401〜450px では、SPデザインが 1.0〜1.125倍に「拡大」される。
   FVだけでなく本文も含めて比率をそのまま保つため、body に zoom をかける。
   （transform:scale と違い、レイアウトの高さも position:fixed も正しく働く）
   --sp-zoom は script.js が入れる（画面幅 ÷ 400）。
     350px → 0.875倍（縮小）／ 400px → 等倍／ 450px → 1.125倍（拡大）。451px以上はTB。
   実機では viewport(width=400) も効くので、そちらで clientWidth が400に固定され、
   ブラウザ側が端末幅まで縮めてくれる（zoomは1.0のまま）。
   ========================================================= */
@media (max-width:450px){
  body{ zoom:var(--sp-zoom, 1); }
}

/* 401〜1023px は TB の FV（834px基準）を等倍のまま中央に置き、左右を見切れさせる。
   縮小すると「案内するのは、「まち」の人」やリード文まで小さくなって読みにくいため
   （2026-09-26 蓮太朗さんの指示）。全体を縮めるのは 400px 以下のときだけ。

   ただし日付（会期）は 752px を下回ると右にはみ出して読めなくなるので、
   834px以下では画面の右端から40pxの位置に置きなおす。
     .fv__inner の左端は画面座標で 50vw − 417px
     日付の左端を「画面の右端 − 40px − 幅332px」に合わせると
       left ＝ 100vw − 372px −(50vw − 417px) ＝ 50vw ＋ 45px
   834pxのときは 462px ＝ Figma の 461px とほぼ同じなので、見た目は連続する。 */
@media (max-width:833px){
  /* 日付は画面の右端から40pxの位置に固定する。
       要素の右端 ＝ inner左端(50vw−417px) ＋ 834px − right ＝ 100vw − 40px
       を解いて right ＝ 457px − 50vw。幅が変わっても余白が一定になる */
  .fv__date{ left:auto; right:calc(457px - 50vw); }
  /* リード文は画面の左端から20pxより内側には入らないようにする。
       画面の左端＋20px に合わせると left ＝ 20px −(50vw − 417px) ＝ 437px − 50vw
     ただし広いうちは Figma の 120px が優先されるので max() で挟む（634pxで切り替わる）。
     ⚠️ リード文は本文なので文字は縮めない（蓮太朗さんの指示） */
  .fv__lead{ left:max(120px, calc(437px - 50vw)); }

  /* タイトルと日付だけ、834px→401px のあいだで SP のサイズまで少しずつ縮める。
     401px で SP と同じ値、834px で TB と同じ値になる一次式を clamp で挟んでいる
     （傾き＝(TB−SP)/433px、切片＝SP−傾き×401px）。 */
  /* タイトルは幅が縮んでも中央に置きつづける（left:350px 固定だと左に寄ってしまう） */
  .fv__title{
    left:50%;
    transform:translateX(-50%);
    width:clamp(100px, calc(30px + 12.471vw), 134px);                 /* 100 → 134（561pxで下限に達する） */
  }
  .fv__year{
    font-size:clamp(19px, calc(14.37px + 1.155vw), 24px);             /* 19 → 24 */
    line-height:clamp(21px, calc(8.96px + 3.002vw), 34px);            /* 21 → 34 */
  }
  .fv__md{
    font-size:clamp(30px, calc(13.33px + 4.157vw), 48px);             /* 30 → 48 */
    line-height:clamp(32px, calc(17.18px + 3.695vw), 48px);           /* 32 → 48 */
  }
  .fv__dow{ font-size:clamp(12px, calc(8.3px + 0.924vw), 16px); }     /* 12 → 16 */
  .fv__dash{ width:clamp(17px, calc(14.22px + 0.693vw), 20px); }      /* 17 → 20 */

  /* 写真は画面が狭いほど中央に寄せて、できるだけ見えるようにする。
     各写真の中心を「inner の中心(417px) からのオフセット × --fv-k」で置きなおす。
     --fv-k は script.js が 画面幅÷834 を入れる（834pxで1＝Figmaどおり）。
     ただし 0.78 を下回らない。これ以上寄せると右の写真が縦書きタイトルに重なる。
     JSが動かない場合は 1 のまま＝今までどおり左右が見切れるだけで破綻はしない。 */
  .fv__photo--a{ left:calc(417px + -558.0px * var(--fv-k, 1) - 246.0px); }
  .fv__photo--b{ left:calc(417px + 288.5px * var(--fv-k, 1) - 161.5px); }
  .fv__photo--c{ left:calc(417px + -291.0px * var(--fv-k, 1) - 133.0px); }
  .fv__photo--d{ left:calc(417px + 330.0px * var(--fv-k, 1) - 101.0px); }
  .fv__photo--e{ left:calc(417px + -219.0px * var(--fv-k, 1) - 93.0px); }
  .fv__photo--f{ left:calc(417px + 243.0px * var(--fv-k, 1) - 84.0px); }
  .fv__photo--g{ left:calc(417px + 169.5px * var(--fv-k, 1) - 59.5px); }
  .fv__photo--h{ left:calc(417px + -341.5px * var(--fv-k, 1) - 82.5px); }
}

/* =========================================================
   SP（Figma 1:8404 / 400×22999 基準）
   ========================================================= */
@media (max-width:450px){

  /* ---------- FV ---------- */
  .fv__inner{
    width:400px;
    height:920px;            /* Figma SP: About の見出しアイコン y920 が次セクションの開始 */
  }

  .menu-btn{ display:block; right:24px; }   /* Figma SP: x336〜376（右端から24px） */
  .menu__close{ left:auto; right:25px; }    /* Figma SP: Group 519 x338〜375 */
  .fv__nav{ display:none; }  /* 縦書きナビはハンバーガーへ */

  /* 写真8枚：SP用の枠と画像配置 */
  .fv__photo--a{ left:-270px; top:-170px; width:290px; height:290px; }
  .fv__photo--a img{ left:-8px;   top:139px; width:325px; height:217px; }
  .fv__photo--b{ left:298px;  top:103px;  width:144px; height:144px; }
  .fv__photo--b img{ left:-93px;  top:0;     width:275px; height:184px; }
  .fv__photo--c{ left:-54px;  top:318px;  width:146px; height:146px; }
  .fv__photo--c img{ left:0;      top:-36px; width:349px; height:233px; }
  .fv__photo--d{ left:288px;  top:561px;  width:132px; height:132px; }
  .fv__photo--d img{ left:-48px;  top:-1px;  width:201px; height:134px; }
  .fv__photo--e{ left:20px;   top:120px;  width:104px; height:104px; }
  .fv__photo--e img{ left:-29px;  top:-10px; width:172px; height:115px; }
  .fv__photo--f{ left:329px;  top:281px;  width:98px;  height:98px; }
  .fv__photo--f img{ left:-64px;  top:-19px; width:213px; height:144px; }
  .fv__photo--g{ left:198px;  top:693px;  width:90px;  height:90px; }
  .fv__photo--g img{ left:-25px;  top:0;     width:135px; height:90px; }
  .fv__photo--h{ left:-6px;   top:720px;  width:120px; height:120px; }

  /* 大きい順：a290 → c146 → b144 → d132 → h120 → e104 → f98 → g90 */
  .fv__photo--a{ --fv-i:0; }   /* 290px */
  .fv__photo--c{ --fv-i:1; }   /* 146px */
  .fv__photo--b{ --fv-i:2; }   /* 144px */
  .fv__photo--d{ --fv-i:3; }   /* 132px */
  .fv__photo--h{ --fv-i:4; }   /* 120px */
  .fv__photo--e{ --fv-i:5; }   /* 104px */
  .fv__photo--f{ --fv-i:6; }   /* 98px */
  .fv__photo--g{ --fv-i:7; }   /* 90px */
  .fv__photo--h img{ left:-230px; top:-83px; width:526px; height:351px; }

  /* ロゴ・タイトル */
  .fv__logo{ left:135px; top:24px; width:130px; }
  .fv__title{ left:160px; top:143px; width:80px; transform:none; }   /* 833px以下の中央寄せを解除 */

  /* 開催日（SPはFigmaでアウトライン化されているため実寸に合わせる） */
  .fv__date{ left:159px; right:auto; top:424px; }   /* Figma SP: Frame 523 x160 y428。833px以下の right 指定を解除 */
  .fv__year{ font-size:19px; line-height:1; }   /* 🔴 元は 21px（1.105倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。19px×1=19px */
  .fv__period{ margin-top:-1px; }
  .fv__md{ font-size:30px; line-height:1; padding-right:19px; }  /* 🔴 元は 32px（1.067倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。30px×1=30px */  /* カンプのグリフ h28 */
  .fv__dow{ font-size:12px; line-height:1; bottom:1px; }        /* 12px × 1 = 12px */
  .fv__dash{ width:17px; margin:0 8px 13px 8px; }
  .fv__place{ margin-top:17px; }

  /* リード文 */
  .fv__lead{ left:20px; top:541px; width:233px; line-height:1.8; }   /* Figma SP: lh24 */

  /* ---------- ここから下は SP 専用（Figma 1:8404 の座標に合わせる） ---------- */

  /* 見出し（Figma SP: 英字18px lh18／和文26px lh26） */
  /* Figma SP の行送りは About と Access が26px、他の5つが28px（Figma側の不統一）。
     見出しブロック自体は112pxなので、枠を固定したうえで行送りを使い分ける */
  .sec-head{ height:112px; }
  .sec-head__ja{ line-height:1; }  /* 🔴 元は 28px（1.077倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。26px×1=26px */
  .about .sec-head__ja{ line-height:1; }        /* 26px × 1 = 26px */
  .access .sec-head{ height:auto; }
  .access .sec-head__ja{ line-height:1; }        /* 26px × 1 = 26px */


  /* About：アイコンy920／本文y1096／背景写真y1195(400×522)／
     Feature01 y1797・02 y2425・03 y2996／ボタン y3651・y3761／終わり y3885 */
  /* 下の余白は、ボタンの上の90pxより広くする（川嶋さん・9/25。Figmaは54px） */
  .about__inner{ padding:0 40px 120px; }  /* Figma SP: 本文・Feature とも x40〜360 */
  /* Figma SP は「写真＋白グラデーション」をまとめて opacity 0.7（PCは写真だけ0.7）。
     合成の順番が違うので、img ではなく枠に効かせる */
  .about__bg{ opacity:.7; }
  .about__bg img{ opacity:1; }
  .about__bg{
    position:absolute;
    left:0; top:275px;       /* セクション開始920 → 背景1195 */
    width:100%; height:522px;
    margin:0;
    overflow:hidden;
  }
  /* Figma SP: 枠400×522 に対し、画像は 1014×676 を left:-417 top:0 で置く */
  .about__bg img{
    position:absolute;
    left:-417px; top:0;
    width:1014px; height:676px;
    max-width:none;
    object-fit:fill;
  }
  .about__body{ margin-top:64px; }          /* 見出し下端1032 → 本文1096 */
  .features{
    max-width:none;
    margin:339px 0 0;        /* 本文下端1458 → Feature01 1797 */
    /* Figma は「フレームの下端＋40px」で並べているが、フレームの高さは行送りを
       含みきらないので、CSSでの実際の下端からの距離は1枚ずつ違う */
    gap:0;
  }
  /* Figma SP は 36px / 33px（行送りの都合でばらついている）。
     文章と次の写真がくっついて見えるため 64px に揃えた（川嶋さん・9/25） */
  .feature--01{ margin-bottom:64px; }
  .feature--02{ margin-bottom:64px; }
  .about__btns{
    max-width:none;
    /* 🔴 auto を入れないと左に寄る（幅280pxに対し中身の枠は320px）。
       PCの `margin:0 auto` を `90px 0 0` で打ち消してしまっていた（川嶋さん・9/25） */
    margin:90px auto 0;      /* Feature03 の下端3561 → ボタン3651 */
  }

  /* Navigators：カードの作りがPC/TBと違う。縦書きをやめ、
     写真(170×242) → 開催場所 → ナビゲーター名 → 「01 プログラム名」の縦積み */
  .navigators__inner{ padding-top:80px; padding-bottom:80px; }   /* 背景3885 → アイコン3965 ／ 一覧下端8044 → 白ボックス8124 */
  .navigators__sub{ display:none; }         /* Figma SP には無い */
  .navigators__list{
    /* SPは画面幅いっぱいに2列。TBで入れた 260px固定と fit-content を戻す */
    width:auto;
    max-width:none;
    margin:64px 0 0;                        /* 見出し下端4077 → 一覧4141 */
    grid-template-columns:repeat(2, 1fr);
    gap:32px 20px;                          /* Figma: 行437-405 ／ 列190-170 */
  }
  .navi{ display:block; width:auto; height:auto; min-height:0; }
  .navi__main{ width:auto; }
  .navi__img{ aspect-ratio:170 / 242; }
  .navi__meta{ margin-top:16px; }           /* 写真下端4383 → 場所4399 */
  .navi__place{ font-size:12px; line-height:1.6; color:#7D7D7D; }        /* 12px × 1.6 = 19.2px（蓮太朗さん判断 9/28。PC14→TB13→SP12） */
  .navi__names{ margin-top:6px; font-size:16px; line-height:1.6; }        /* 16px × 1.6 = 25.6px */
  .navi__side{
    flex-direction:row;
    align-items:baseline;
    gap:8px;
    width:auto;
    /* 名前下端4505 → 罫線4513 → 番号4520 */
    margin-top:8px;
    padding-top:6px;
    border-top:1px solid #D0D0D0;
  }
  .navi__no{
    margin:0;
    font-family:var(--f-gothic);
    font-weight:400;
    font-size:16px;
    line-height:1.6;        /* 16px × 1.6 = 25.6px */
    letter-spacing:.04em;    /* Figma SP: 0.64px / 16px */
  }
  .navi__program{
    margin:0;
    writing-mode:horizontal-tb;             /* 縦書きを解除 */
    font-weight:400;
    font-size:15px;
    line-height:1.6;        /* 15px × 1.6 = 24px */
    letter-spacing:.04em;
  }

  /* Programs：白ボックス x20 y8124 360×9884／見出しy8184／地図y8352(320×213)
     ／開催場所リストy8581／フィルタy9297／プログラム一覧y9421／カードy10290 */
  .programs__inner{ padding-bottom:160px; } /* 白ボックス下端18008 → Booking 18168 */
  .programs__box{
    margin:0 20px;                          /* Figma: 白ボックス x20〜380 */
    padding:60px 20px;                      /* ボックス上端8124 → 見出し8184 */
  }
  .pg-map,
  .pg-filter,
  .pg-index,
  .pg-list{ max-width:none; margin-inline:0; }
  .pg-map{ margin:56px 0 0; }               /* 見出し下端8296 → 地図8352 */
  /* Figma は 320×213（3:2）だが、地図が小さく見えるので 320×400 に縦長にした（川嶋さん・9/25） */
  .pg-map__embed{ height:400px; gap:12px; }
  .pg-map__ttl{ font-size:18px; line-height:1.6; }  /* 🔴 元は 26px（1.444倍）。柘植さんの 1/1.6/1.8/2 に寄せた（9/28 蓮太朗さん判断）。18px×1.6=28.8px */
  .pg-map__txt{ font-size:12px; line-height:1.6; }        /* 12px × 1.6 = 19.2px */
  .pg-map__list{ margin-top:16px; }         /* 地図下端8565 → リスト8581 */
  .pg-place + .pg-place{ margin-top:1px; }  /* Figma SP: 行ピッチ63px（62＋1） */
  .pg-filter{ margin:87px 0 0; }            /* リスト下端9210 → フィルタ9297 */
  .pg-index{
    margin:40px 0 0;                        /* フィルタ下端9381 → 一覧9421 */
    padding:17px 0 16px;                    /* 枠9421 → 1行目9438 ／ 10行目の下端10218 → 枠10234 */
  }
  /* SPは行の左右パディングが0で、サムネと番号の間も12px（PCは12px/24px） */
  .pg-idx a{ padding:12px 0; }
  .pg-idx__thumb{ margin-right:12px; }
  .pg-list{
    gap:56px;                               /* Figma: カード間 56px */
    margin:56px 0 0;                        /* 一覧下端10234 → カード10290 */
  }
  .pg__main{ aspect-ratio:320 / 213; }
  /* 🔴 2026-09-30：SPも省略をやめて全文表示（蓮太朗さん）。
     もとは Figma SP に合わせて開いたカードも2行で省略していた。 */
  .pg__book{
    /* Figma SP は60px。空きすぎに見えるので詰めた（川嶋さん・9/25。PCは23px） */
    margin-top:32px;
    font-size:16px;               /* Figma SP: 16px/16px（PCは18px） */
    line-height:1;        /* 16px × 1 = 16px */
  }
  .pg__shots{ gap:10px; margin-top:10px; }
  .pg__shot{ flex:0 1 calc((100% - 20px) / 3); aspect-ratio:100 / 67; }  /* gap10×2 */
  /* お問い合わせの住所をSPだけ3か所で折り返す（川嶋さん・9/25） */
  .info__br-sp{ display:inline; }
  .info__gap{ display:none; }        /* TELとFAXの間の全角スペースは改行に置き換わる */

  /* 320px幅に「開催場所：◯◯」＋タグ2つは収まらない。開催場所を単独の行にする（2026-09-25） */
  .pg__area{ flex-basis:100%; margin-right:0; }
  .pg__ttl{ font-size:24px; line-height:1.6; }        /* 24px × 1.6 = 38.4px */
  .pg__basic dt,
  .pg__rows dt{ width:120px; }


  /* Booking：見出しy18168／STEP01 y18344・02 y18556・03 y18795／注記 y19058〜19535 */
  /* 下の余白は80px → 120px（注記とQ&Aが近い・川嶋さん 9/25。PCは160px） */
  .booking__inner{ padding:0 40px 120px; } /* Figma SP: STEP は x40〜360 */
  .steps{ gap:40px; margin-top:64px; }        /* 見出し下端18280 → STEP01 18344 */
  .step__ttl{
    min-height:61px;                          /* Figma SP: Frame 166 320×61 */
    /* STEP03「プログラムの詳細メールが届く」は 22px×14字＋字間で 320.3px になり、
       CSSは最後の字の後ろにも字間を置くため1文字分だけ折り返してしまう。
       Figmaは最後の字間を数えないので、その1つぶんを打ち消す */
    margin-right:-.04em;
  }
  .step__txt{ margin-top:0; }                 /* SPはタイトル枠の直下に本文が続く */
  /* 注記枠は x20〜380（360px）で、STEP より左右20pxずつ外に出る */
  .notes{
    width:auto;
    height:auto;
    margin:64px -20px 0;                      /* STEP03下端18994 → 注記19058 */
    padding:32px 20px;
  }

  /* Q&A：見出しy19615／一覧y19791〜20454。
     Access は margin-top:-100px で食い込むので、その分を足して
     Figmaどおりの「最後の罫線 → Access背景」80pxを確保する */
  .faq-sec__inner{ padding:0 20px 80px; }   /* 一覧下端20454 → Access背景20534 */
  .faq{ margin-top:64px; }                    /* 見出し下端19727 → 一覧19791 */
  /* SPは左右のパディングが0で、テキストが枠いっぱいに回り込む
     （Figma SP: アイコンx20・質問テキストx52 w291・回答テキストx52 w328） */
  .faq__q{ gap:16px; padding:18px 0 19px; }
  /* Figma SP は2問目と5問目だけ上下の余白が2pxずつ広い */
  .faq__item:nth-child(2) .faq__q,
  .faq__item:nth-child(5) .faq__q{ padding-top:20px; padding-bottom:21px; }
  .faq__item.is-open .faq__q{ padding-top:24px; padding-bottom:17px; }
  .faq__txt{ flex:1; width:auto; min-width:0; }
  .faq__ico{ margin-left:8px; }
  .faq__a-in{ gap:16px; padding:0 0 24px; }

  /* Access：背景y20534(400×1208)／見出しy20614（左寄せ）／地図y20755／パネルy21102 */
  .access__inner{ padding:80px 20px 80px; }   /* 背景20534 → 見出し20614 ／ パネル下端21662 → 背景下端21742 */
  .info{ padding-top:80px; }                  /* Figma SP: 背景下端21742 → 見出し21822 */
  /* SPでは背景がセクションの上端から始まるので、PC用の食い込みトリックを解除する */
  .access{ padding-top:0; margin-top:0; }
  /* Figma SP: 枠400×1208、画像ノード 2128×1419 を left:-1462 top:-211。
     imageTransform を解くと「元画像を 2524×1419 で left:-1462 top:-211」と同じ */
  .access__bg{
    height:1208px;
    overflow:hidden;
    background-size:2524px 1419px;
    background-position:-1462px -211px;
  }
  /* 見出しはPCと同じ左寄せの横並びに戻す（Q&Aは中央のまま） */
  .access .sec-head--left{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:20px;
    text-align:left;
  }
  .access .sec-head--left .sec-head__icon{ grid-area:1 / 1; margin:0; }
  .access .sec-head--left .sec-head__en{ grid-area:1 / 2; margin-top:3px; align-self:start; }
  .access .sec-head--left .sec-head__ja{ grid-area:2 / 1 / 3 / 3; margin-top:21px; }
  .access__map{ margin-top:70px; }            /* 見出し下端20685 → 地図20755 */
  .access__link{ margin-top:0; line-height:1; }   /* Figma SP: 15px／行送り16px */
  .access__routes{ margin-top:80px; padding:32px 20px; }   /* リンク下端21022 → パネル21102 */

  /* Information：見出しy21822／表y22014／観光協会y22638 */
  .info__inner{ padding:0 12px 0; }   /* 🔴 2026-09-30：20→12px（蓮太朗さん「もっと詰めたい」） */
  /* 🔴 2026-09-30：画面なり（width:auto）をやめて実寸に（蓮太朗さん「SPはこれでいい」）。
     SPは行の左右パディングが0なので、ラベル110px ＋ 値203px ＝ 313px。2px見て315px */
  .info__list{ width:315px; margin-top:64px; }   /* 見出し下端21934 → 表21998 */
  /* Figma SP はどの行も 15px／行送り27px（PCの6行目だけ24pxという指定は外す） */
  .info__list > div,
  .info__list > div:nth-child(6){ font-size:15px; line-height:1.8; }        /* 15px × 1.8 = 27px */
  .assoc{ margin-top:64px; }                  /* 表下端22574 → 観光協会22638 */
  /* 左右は info__inner の12pxだけにする（20pxを足すと32pxになってしまう） */
  .footer{ padding:0 0 0; margin-bottom:24px; }   /* ロゴ下端22975 → ページ末尾22999 */


}

/* ============================================================
   🔴 JSなしでも読める本文のための見た目（2026-10-04 追加）

   プログラム・ナビゲーター・Q&A の中身は script.js が innerHTML で描いている。
   ＝JSを実行しないクローラ（GPTBot・ClaudeBot・PerplexityBot など）には
     中身が存在しないページに見えていた（HTMLだけ2,396字／JS後13,923字）。
   そこで各コンテナに素のHTMLを置き、JSが動いたら丸ごと置き換わる形にした。

   ⚠️ だからこのスタイルが人の目に入るのは、
      ①JSを切っている ②script.js の読み込みに失敗した のどちらかだけ。
      通常は一瞬で置き換わる。それでも崩れて見えないよう最低限整えてある。
   ⚠️ display:none にはしない。隠しテキストと見なされるため。
   ============================================================ */
.pg-plain{
  list-style:none;
  padding:24px 0;
  border-bottom:1px solid #D0D0D0;
}
.pg-plain__ttl{
  margin:0 0 8px;
  font-family:var(--f-mincho);
  font-size:19px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.04em;
}
.pg-plain__ttl span{
  display:inline-block;
  min-width:2.2em;
  color:#1F5085;
  font-family:var(--f-en, inherit);
}
.pg-plain__lead{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.04em;
}
.pg-plain__meta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 16px;
  margin:0;
  font-size:14px;
  line-height:1.8;
}
.pg-plain__meta dt{ color:#666; white-space:nowrap; }
.pg-plain__meta dd{ margin:0; }

.navi-plain{
  list-style:none;
  padding:10px 0;
  border-bottom:1px solid #D0D0D0;
  font-size:15px;
  line-height:1.7;
}
.navi-plain span{
  display:block;
  font-size:13px;
  color:#666;
}

.faq-plain__item{ padding:16px 0; border-bottom:1px solid #D0D0D0; }
.faq-plain__item h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:.04em;
}
.faq-plain__item p{ margin:0; font-size:15px; line-height:1.9; letter-spacing:.04em; }