@charset "UTF-8";
/* ============================================================================
   九州ふっこう応援割 福岡県 / メインスタイル
   ----------------------------------------------------------------------------
   ■ 構成
     1. 設計トークン（:root のカスタムプロパティ）
     2. リセット / ベース
     3. レイアウト（l-）
     4. 共通コンポーネント（c-）
     5. ページ固有ブロック（p-）
     6. レスポンシブ（タブレット / SP）

   ■ 命名規則
     l- : レイアウト（ヘッダー・フッター・コンテナ）
     c- : 再利用するコンポーネント（ボタン・カード等）
     p- : そのページ専用のブロック

   ■ 優先度について
     このファイル全体を @layer app で囲っている。
     add.css はレイヤー外（＝カスケードレイヤーより強い）なので、
     詳細度に関係なく add.css の記述が常に勝つ。微調整は add.css へ。
   ========================================================================= */

@layer app {

/* ============================================================================
   1. 設計トークン
   ---------------------------------------------------------------------------
   色・サイズはすべてここに集約。add.css で :root を上書きすれば全体に反映される。
   ========================================================================= */
:root {
  --header-h: 75px;   /* 画面上端に貼り付くヘッダーの高さ（767px 以下は 60px） */
  /* --- カラー ------------------------------------------------------------ */
  /* 大分のブランドカラーは緑。ヘッダーとフッターで帯の色が違うので、
     グラデーションは帯ごとに分けている（--gradient-green-header / -footer）。 */
  --c-green-h-start: #8BBD31;  /* ヘッダー帯のグラデーション開始色（左） */
  --c-green-h-end:   #46B35E;  /* ヘッダー帯のグラデーション終了色（右） */
  --c-green-f-start: #85C50D;  /* フッター帯のグラデーション開始色（左） */
  --c-green-f-end:   #638C16;  /* フッター帯のグラデーション終了色（右） */
  /* 大分のブランドカラーは緑が2色。ヘッダー帯の左端が黄緑、右端が緑にあたる */
  --c-green:       #80C244;  /* 黄緑（ラベル・タグ・ボタンなど） */
  --c-green-deep:  #45B35D;  /* 緑（お知らせの見出し・日付・区切り線・ドット） */
  --c-green-pale:  #F7FFEA;  /* セクション背景（淡い緑） */
  --c-green-soft:  #E0E4D6;  /* 選択カード（円）・番号タグの背景 */
  --c-green-bg:    #FAFBF6;  /* 割引内容ボックスの背景 */
  --c-gray-circle: #F4F3EE;  /* 3ステップのイラストを囲む円 */
  --c-green-tint:  #E8F0D9;  /* 「例えば」ボックスの本文背景 */
  --c-brown:       #5D4038;  /* 見出し・ナビ文字の濃茶 */
  --c-text:        #333333;  /* 本文 */
  --c-cream:       #FEFEF6;  /* CASE カードの背景 */
  --c-gray-btn:    #C9C9C9;  /* 非アクティブ状態のボタン背景 */
  --c-gray-text:   #9A9A9A;  /* 準備中のテキストリンク（白地で読める濃さ） */
  /* --- 事業者様向けページ（business/）で使う色 --------------------------- */
  --c-green-head:  #526D10;  /* 事業者ページのヘッダー帯 */
  --c-green-biz:   #82B02C;  /* 事業者ページのお知らせ・締切タグ・ロゴDLボタンの緑 */
  --c-cream-btn:   #FFF7DA;  /* 事業者ページのヘッダーボタン */
  --c-cream-band:  #FDFCF0;  /* ページタイトルの帯 */
  --c-gray-block:  #F9F7F8;  /* 対象事業者・募集についてのブロック */
  --c-border:      #D9D9D9;  /* 罫線・プレースホルダー */
  --c-red:         #D63216;  /* 金額の赤 */
  --c-red-tel:     #D32F2E;  /* 電話番号の赤 */
  --c-yellow:      #FFC533;  /* 楕円・マーカーの黄 */
  --c-green-movie: #4B7A1E;  /* 説明会動画の「再生する」ボタン（動画設置サンプル movie.html と同じ色） */
  --c-white:       #FFFFFF;

  /* --- グラデーション ---------------------------------------------------- */
  /* 大分はヘッダーとフッターで色が違うので、帯ごとに分けている */
  --gradient-green-header: linear-gradient(90deg, var(--c-green-h-start) 0%, var(--c-green-h-end) 100%);
  --gradient-green-footer: linear-gradient(90deg, var(--c-green-f-start) 0%, var(--c-green-f-end) 100%);

  /* --- レイアウト幅 ------------------------------------------------------ */
  --container:       1000px;  /* 基本のコンテンツ幅（デザイン実測 x:200〜1200） */
  --container-narrow: 940px;  /* ご利用期間テーブルなど、やや狭い幅 */
  --side-gutter:      16px;   /* SP 時の左右余白（ヘッダーの左右 16px とそろえている） */

  /* --- タイポグラフィ ---------------------------------------------------- */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --fz-heading: 32px;  /* セクション見出し */
  --fz-lead:    18px;  /* リード文 */
  --fz-body:    16px;  /* 本文 */
  --fz-small:   13px;  /* 注釈 */
  --lh-body:   1.63;   /* 本文行間（実測 16px / 26px） */

  /* --- 角丸 -------------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ============================================================================
   2. リセット / ベース
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ほかのページから「/#about」などで来たとき（ブラウザ自身のアンカー移動）に、
     画面上端に貼り付くヘッダーで見出しが隠れないよう、ヘッダーの高さ＋20px 手前で止める。
     ページ内リンクは main.js が同じ位置で止めている */
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  /* 日本語の禁則処理を厳しめに。既定（auto）だと小書き仮名や長音が
     行頭に来てしまうため（「キャンペ｜ーン」「整｜った」など） */
  line-break: strict;
  font-family: var(--font-base);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* アクセシビリティ：動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .p-recruit__arrow { transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================================
   3. レイアウト
   ========================================================================= */

/* --- コンテンツ幅 --------------------------------------------------------- */
.l-container {
  width: var(--container);
  margin-inline: auto;
}

/* --- ヘッダー ------------------------------------------------------------- */
/* メインビジュアルの下にあり、スクロールで画面上端に貼り付く（sticky）。
   sticky は元の場所を占有したままなので、高さを埋めるスペーサーは要らない */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 75px;
  background: var(--gradient-green-header);
}

/* コンテンツ幅の箱。ナビ＋ボタンを1つのまとまりとして中央寄せする
   （大分のヘッダーにロゴは無く、代わりにナビの先頭が「トップ」になっている） */
.l-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: var(--container);
  max-width: calc(100% - 48px);
  height: 100%;
  margin-inline: auto;
}

.l-header__menu {
  display: flex;
  align-items: center;
  gap: 34px;   /* ナビの右端〜ボタンの左端（デザイン実測） */
}
/* ハンバーガーと暗幕は SP でだけ使う */
.c-hamburger,
.l-header__overlay { display: none; }
.l-header__list {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 16px;
  font-weight: 400;   /* デザインは Regular */
  color: var(--c-white);
}
/* ナビ項目の区切り。デザインは細い縦棒＋左右に約 10px の余白（実測）なので、
   全角の「｜」ではなく半角の「|」に margin を付けて表現している */
.l-header__list li + li::before {
  content: "|";
  margin: 0 7.5px;
  opacity: .8;
}
.l-header__list a {
  padding: 4px 0;
  transition: opacity .2s;
}
.l-header__list a:hover { opacity: .7; }

/* ヘッダー右の事業者向けボタン（実測 w:145 / h:30） */
.c-btn-header {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 30px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--c-brown);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .2s;
}
.c-btn-header:hover { opacity: .85; }

/* --- フッター ------------------------------------------------------------- */
.l-footer {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-green-footer);
}
.l-footer__copy {
  font-size: 12px;
  color: var(--c-white);
}

/* ============================================================================
   4. 共通コンポーネント
   ========================================================================= */

/* --- セクション見出し（32px / 濃茶 / 中央） ------------------------------- */
.c-heading {
  font-size: var(--fz-heading);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-brown);
  text-align: center;
}
/* 見出しの先頭に桶のイラストを添えるバリエーション。
   .c-heading でも .p-faq__title でも、このクラスを足すだけで付く。
   サイズは em 指定なので、見出しの文字サイズに合わせて自動で縮む
   （32px の見出しで 52.5 × 42px ＝ icon-tub.png の半分＝2倍解像度の原寸） */
.c-heading--tub::before {
  content: "";
  display: inline-block;
  width: 2.03em;              /* 32px の見出しで 65px（素材は 130 × 140） */
  height: 2.19em;
  margin-right: .44em;
  vertical-align: -.36em;
  background: url(../img/common/icon-tub.png) no-repeat center / contain;
}

/* --- 区切り線（実測 w:900px） --------------------------------------------- */
.c-divider {
  width: 900px;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--c-border);
}

/* --- ピンクの丸ボタン（実測 w:325 / h:71） -------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 325px;
  min-height: 71px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  background: var(--c-green);
  color: var(--c-white);
  font-size: 24px;
  font-weight: 700;
  transition: opacity .2s, transform .2s;
}
.c-btn:hover { opacity: .85; transform: translateY(-2px); }

/* 非アクティブ状態（受付前・受付終了など）
   使い方 … <a class="c-btn is-disabled" aria-disabled="true" tabindex="-1">〜</a>
   ・背景がグレーになり、クリックもキーボード操作も効かなくなる（ホバーの動きも止まる）
   ・文字色は白のまま
   ・href は残したままでよい（pointer-events で無効化しているため） */
.c-btn.is-disabled {
  background: var(--c-gray-btn);
  pointer-events: none;   /* クリック・ホバーを無効化 */
  cursor: default;
}
.c-btn.is-disabled:hover { opacity: 1; transform: none; }

/* FAQ ボタンのサイズ違い（実測 360×60）。色は .c-btn のテーマカラー（--c-green）
   ＊2026-09-17 までは茶色（.c-btn--brown）だった */
.c-btn--faq {
  width: 360px;
  min-width: 0;
  min-height: 60px;
  padding: 0;
  font-size: 18px;
}
.c-btn__icon { flex: none; }

/* --- ページトップ（実測 φ87 / right:43px） -------------------------------- */
/* --pagetop-gap は通常時の下端からの距離。
   フッターの上で止まるときの間隔にも使うので、JS からも参照している */
.c-pagetop {
  --pagetop-gap: 40px;
  position: fixed;
  right: 43px;
  bottom: var(--pagetop-gap);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 87px;
  height: 87px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
  /* 初期は非表示。JS が .is-visible を付けたら現れる */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.c-pagetop:hover { opacity: .85; }
.c-pagetop__text { font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* --- ユーティリティ ------------------------------------------------------- */
/* リサイズ中はアニメーションを止める。
   767px をまたぐ瞬間、ドロワーの transform が none → translateX(100%) に変わるため
   「一瞬ドロワーが出てきて右へ消える」動きが見えてしまうのを防ぐ。
   （クラスは assets/js/main.js がリサイズ中だけ <html> に付ける） */
.is-resizing .l-header__menu,
.is-resizing .l-header__overlay,
.is-resizing .c-hamburger__line { transition: none; }

/* 狭い幅（〜640px）でだけ効かせる改行。それより広いときは無効になる */
.u-br-sp { display: none; }
/* 540px 以下だけで入る改行（お迎えバンドの見出し） */
.u-br-540 { display: none; }
/* 640px 以下だけで入る改行（選択カードの見出し） */
.u-br-640 { display: none; }

/* ============================================================================
   5. ページ固有ブロック
   ---------------------------------------------------------------------------
   余白・サイズはすべてデザイン（x1 = 1400px 幅）からの実測値。
   コメントの「実測 y:〇〇」はデザイン上の座標。
   ========================================================================= */

/* --- 5-1. ヒーロー -------------------------------------------------------- */
.p-hero {
  position: relative;
  height: 740px;              /* 実測 y:75〜815 */
  background: var(--c-white);
  overflow: hidden;
}
/* 背景写真の入れ物。z-index を持たせて重なり順をこの中だけで完結させる
   （中の写真に z-index を振っても、波形やロゴより前には出てこない） */
.p-hero__photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* 背景写真。ヒーロー全体を埋める（縦横比が違うぶんは上下を均等に切る）。
   複数枚あるときは重ねて置き、is-current の1枚だけを表示してクロスフェードする。
   --hero-fade（フェードの時間）は JS が設定する */
.p-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2026-09-14 修正版のカンプは写真を左上に合わせて置いている（上も左も切らない）ので、
     縦横比が合わないぶんは右と下を切る */
  object-position: left top;
  opacity: 0;
  /* ease-in-out にすると、切り替わりの前後がゆっくりになって余韻が出る */
  transition: opacity var(--hero-fade, 2000ms) ease-in-out;
}
.p-hero__photo.is-current { opacity: 1; }

/* WebP 対応で写真を <picture> で囲むと、img 自身はいつも picture の1番目の子になり
   :nth-child(odd/even) で数えられない。そのため「.p-hero__photos 直下の何枚目か」を
   img 直置き（1つ目のセレクタ）と picture 囲み（2つ目のセレクタ）の両方で数えている */
/* 表示している間、ゆっくり寄る／引くを1枚おきに繰り返す（いわゆるケンバーンズ）。
   transition ではなく animation にしているのは、is-current が付くたびに
   確実に先頭から動かすため（読み込み直後の1枚目も動く）。
   --hero-zoom（倍率）と --hero-move（動かす時間）は JS が設定する。
   写真が1枚のときは JS が is-slider を付けないので動かない */
@keyframes p-hero-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(var(--hero-zoom, 1.06)); }
}
@keyframes p-hero-zoom-out {
  from { transform: scale(var(--hero-zoom, 1.06)); }
  to   { transform: scale(1); }
}
.p-hero__photos.is-slider > .p-hero__photo.is-current:nth-child(odd),
.p-hero__photos.is-slider > :nth-child(odd) > .p-hero__photo.is-current {
  animation: p-hero-zoom-in var(--hero-move, 7000ms) linear forwards;
}
.p-hero__photos.is-slider > .p-hero__photo.is-current:nth-child(even),
.p-hero__photos.is-slider > :nth-child(even) > .p-hero__photo.is-current {
  animation: p-hero-zoom-out var(--hero-move, 7000ms) linear forwards;
}
/* 左側に散らす食べ物などの写真。1枚の透過 PNG（1972×1433 ＝ 2x）を
   ヒーローに対する％で置いているので、幅が変わっても位置関係が崩れない。
   1400px で 左 29px / 下 7px / 幅 986px（＝原寸の 1/2）になる値 */
.p-hero__thumbs {
  position: absolute;
  /* 左位置：デザイン実測 29px。幅と同じ比率で縮む */
  left: min(29px, 2.07%);
  /* 縦位置はヒーローの下端を基準にする（上からの％だと、ヒーローの高さが
     min-height で止まる幅から下端との隙間が広がってしまうため）。
     デザイン実測はヒーロー下端から 7px 上 */
  top: auto;
  bottom: min(7px, 0.5vw);
  /* 幅：1400px 以上は原寸（986px ＝ PNG の 1/2）で固定。
     ％のままだと画面が広いほど縦に伸びて、ヒーロー下端で切れてしまう */
  width: min(986px, 70.43%);
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* 装飾の波形シェイプ。右上・左下を別々に角へ固定するので、
   ウィンドウ幅が変わってもどちらも欠けない。
   幅はヒーローに対する％指定（デザイン実測：右上 654/1400、左下 958/1400）で、
   高さは SVG の縦横比に従って自動で決まる。 */
.p-hero__shape {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* min() の第1項＝デザイン原寸、第2項＝ヒーロー幅に対する比率。
   1400px 以上では原寸で固定され、狭くなるときだけ比率側が効いて縮む。
   パスは 2026-09-14 修正版のカンプ（x1）から実測してトレースし直した（右上 650×218 / 左下 953×165）。
   右上の右端（x 490px〜）はカンプでは屋根に隠れて測れないので、福岡の右上の波形
   （同じ形を 13px 下げたものと一致）のカーブをつないでいる。
   屋根の輪郭をなぞると、幅を縮めて屋根がずれたときに波形が平らに切れて見えるため */
.p-hero__shape--top {
  top: 0;
  right: 0;
  width: min(650px, 46.43%);
}
.p-hero__shape--bottom {
  left: 0;
  bottom: 0;
  width: min(953px, 68.07%);
}

/* 露天風呂（大分だけのレイヤー）。右上のシェイプと左下のシェイプの間に重なる。
   カンプ実測（2026-09-14 修正版）：1400px のとき 幅 874px（＝PNG 1748px の 1/2）／
   右端ぴったり／下へ 34px はみ出す。右下の角に固定し、はみ出す量はヒーローの高さに対する％
   （34 ÷ 740 ＝ 4.6%）にして、幅が狭くなっても一緒に縮める */
.p-hero__onsen {
  position: absolute;
  right: 0;
  bottom: -4.6%;
  /* 1080px 以下は縮小を止め、1080px のときの幅（1080 × 62.43% ＝ 674px）のまま */
  width: min(874px, max(674px, 62.43%));
  /* 共通の img { max-width: 100% } が効くと 674px 未満の画面で縮んでしまうので外す
     （はみ出したぶんは .p-hero の overflow: hidden で切れる） */
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* ロゴ（2026-09-14 修正版）。左寄せで、カンプ実測は 1400px のとき
   左 82px／幅 439px（＝PNG 878px の 1/2）。
   左は画面幅に対する％。
   縦はカンプ（1400px）の上の余白 271px：下の余白 208px の比率をどの幅でも保つ。
   上の余白 ＝（ヒーローの高さ − ロゴの高さ）× 271/479 ＝ 56.58% なので、
   top に 56.58%（ヒーロー基準）、translateY に -56.58%（ロゴ自身の高さ基準）を指定する */
.p-hero__logo {
  position: absolute;
  top: 56.58%;
  /* 横位置（2026-09-15〜）
       ・〜1400px … これまでどおり 左 82px（狭いときは 5.86%）
       ・1400 → 1700px … 82px から直線で右へ動く（149.5vw − 2011px。1400px で 82px、1700px で 530.5px）
       ・1700px 以上 … ヒーローの中央より 100px 左で止まる（50% − ロゴ幅 439px の半分 − 100px）
         ぴったり中央だと露天風呂の屋根にかかって窮屈に見えるので、少し左に寄せている。
         寄せる量を変えるときは、下の 319.5px（219.5 ＋ 寄せる量）と、1700px で同じ位置になるよう 149.5vw − 2011px も直す
     max() で「〜1400px の位置」と「動く位置」の大きいほう、min() で「止まる位置」を上限にしている */
  left: min(calc(50% - 319.5px), max(min(82px, 5.86%), calc(149.5vw - 2011px)));
  transform: translateY(-56.58%);
  /* 幅は 1400px で 439px から直線（26.24vw + 71.6px）で縮み、
     1080px 以下は 1080px のときの 355px のまま維持する */
  width: min(439px, max(355px, calc(26.24vw + 71.6px)));
}
/* img の max-width: 100% は拡大しないので、枠に合わせて広げる */
.p-hero__logo img { width: 100%; }

/* 写真のキャプション(右下に固定)。文言は写真ごとに data-caption で持たせ、JS が差し替える。
   写真が切り替わるときは、いったん薄くしてから次の文言を出す */
.p-hero__caption {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 5;
  margin: 0;
  color: var(--c-white);
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 0 0 4px rgba(0, 0, 0, .55);
  transition: opacity .4s;
  pointer-events: none;
}
.p-hero__caption.is-hidden { opacity: 0; }
.p-hero__caption:empty { display: none; }

/* 〜860px：露天風呂とロゴを少しずつ縮め、ロゴを上下左右の中央へ寄せていく。
   860px の見た目（露天風呂 674px／ロゴ 355px・左 50px・上下の余白 271:208）から、
   375px の見た目（露天風呂 340px／ロゴ 258px・上下左右の中央）へ直線でつなぐ */
@media (max-width: 860px) {
  /* 674px（860px）→ 340px（375px）。縦横比はそのままなので高さも一緒に縮む */
  .p-hero__onsen { width: calc(68.87vw + 81.75px); }
  .p-hero__logo {
    /* 355px（860px）→ 258px（375px） */
    width: calc(20vw + 183px);
    /* 基準をヒーローの中央にして、中央からのずれを translate で足す。
       ・横：860px で 202px 左（＝左 50px の位置）→ 375px で 0
       ・縦：860px で 18px 下（ヒーロー 482px での上下の余白 271:208）→ 375px で 0
       横の基準は 50% ではなく 50vw。ずれの量を vw で計算しているので、
       PC のスクロールバー（15px）でヒーローが画面より狭いときに 861px ↔ 860px で段差が出ないようにそろえる */
    top: 50%;
    left: 50vw;
    transform: translate(calc(-50% + 156.26px - 41.67vw), calc(-50% + 3.676vw - 13.79px));
  }
}

/* --- 5-2. お知らせ（実測 news.png / コンテンツ幅 922px） ---------------- */
.p-news {
  padding: 73px 0 90px;
  background: var(--c-white);
}
/* 左カラム 580 ＋ 余白 72 ＋ バナー 270 = 922 を中央に置く */
.p-news__inner {
  display: flex;
  justify-content: center;
  gap: 72px;
}

/* 左：お知らせ一覧 */
.p-news__main { width: 580px; flex: none; }
.p-news__title {
  color: var(--c-green-deep);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* 記事が増えたらスクロールに切り替わる（2件までは高さが足りるのでスクロールしない）。
   高さを変えたいときは --news-list-height を上書きする */
.p-news__list {
  /* 上下のパディングは記事側に持たせ、この要素の上端＝1件目のテキスト開始位置に揃える。
     こうしないとスクロールバーの頭だけがテキストより上から始まってしまう */
  margin-top: 27px;
  --news-list-height: 190px;
  /* 記事が少ないときは中身ぶんの高さにする（福岡・長崎と同じ。2026-09-18 に min-height を外した）。
     記事が増えたら 190px で止めてスクロールに切り替わる */
  max-height: var(--news-list-height);
  overflow-y: auto;
  /* overscroll-behavior は既定の auto のままにする。
     contain にすると、記事が少なくて中身がスクロールしないときでも
     この上にポインタがある間はページのスクロールが止まってしまう
     （overflow: auto の箱はスクロールできる中身が無くてもスクロールコンテナ扱いになるため）。
     記事が増えてスクロールが出る場合も、下端まで行ったらページ側に続いたほうが自然 */
  /* Firefox 用のスクロールバー装飾 */
  scrollbar-width: thin;
  scrollbar-color: var(--c-green-deep) var(--c-green-pale);
}
/* scrollbar-color 非対応（古い Safari など）向けのフォールバック。
   新しいブラウザは上の scrollbar-width / scrollbar-color が優先される */
.p-news__list::-webkit-scrollbar { width: 8px; }
.p-news__list::-webkit-scrollbar-track {
  background: var(--c-green-pale);
  border-radius: 4px;
}
.p-news__list::-webkit-scrollbar-thumb {
  background: var(--c-green-deep);
  border-radius: 4px;
}
.p-news__list::-webkit-scrollbar-thumb:hover { background: var(--c-green); }
/* スクロールが出るときだけ、バーと本文（点線）の間に余白を作る。
   常に余白を入れると、記事2件のときに点線がデザインより短くなってしまうため、
   JS が実際にスクロールする状態を判定して is-scrollable を付けている */
.p-news__list.is-scrollable { padding-right: 20px; }

.p-news__item {
  display: grid;
  grid-template-columns: 117px 1fr;   /* 日付／本文（実測 日付 x:127〜 本文 x:244〜） */
  padding: 0 0 41px 11px;             /* 実測 本文の下端 → 区切り線まで */
}
/* 記事の区切りは 1px の点線。上の余白は2件目以降だけに付ける */
.p-news__item + .p-news__item {
  padding-top: 22px;
  border-top: 1px dashed var(--c-green-deep);
}
.p-news__date {
  color: var(--c-green-deep);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}
.p-news__text {
  font-size: 14px;
  line-height: 22px;
}

.p-news__text a { color: inherit; text-decoration: underline; transition: opacity .2s; }
.p-news__text a:hover { opacity: .6; text-decoration: underline; }
/* 本文があるお知らせは、タイトル（.p-news__head）の下に本文（.p-news__body）を置く。
   タイトルはほかのお知らせと同じ見た目のまま、本文は少し小さくして区別する（2026-09-15〜）。
   TOP・お知らせ一覧・事業者ページで共通 */
.p-news__head { display: block; }
.p-news__body {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
}
.p-news__more {
  margin-top: 29px;         /* 参考サイト実測：リスト下端 → リンク上端 */
  text-align: right;
  color: var(--c-green-deep);
  font-size: 14px;
  line-height: 1.4;
}
.p-news__more a:hover { text-decoration: underline; }

/* 右：バナー（実測 270 × 270 / ドットは φ10・間隔 20） */
.p-news__banner {
  width: 270px;
  flex: none;
  padding-top: 7px;
}
.p-news__slides {
  position: relative;
  height: 270px;
  touch-action: pan-y;        /* 横スワイプはこちらで処理するのでブラウザには渡さない */
}
.p-news__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.p-news__slide.is-current { opacity: 1; visibility: visible; }
/* 素材が入るまでのプレースホルダー。<a> の中に <img> を入れたらこの装飾は不要 */
.p-news__slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--c-border);
  color: var(--c-brown);
  font-size: 28px;
  font-weight: 700;
}
.p-news__dots {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}
.p-news__dot {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--c-border);
  transition: background-color .2s;
}
.p-news__dot.is-current { background: var(--c-green-deep); }

/* バナーが無い場合。#news に p-news--no-banner を付けると、
   バナーエリアを消してお知らせを横幅いっぱい（コンテンツ幅 1000px）にする */
.p-news--no-banner .p-news__banner { display: none; }
.p-news--no-banner .p-news__inner { gap: 0; }
.p-news--no-banner .p-news__main { width: 100%; }

/* --- 5-3. お迎えバンド（実測 y:815〜1105 / h:290） ------------------------ */
.p-welcome {
  padding: 57px 0 30px;
  background: var(--c-green-pale);
}
.p-welcome__title {
  padding-left: 0;            /* 実測 見出し左端 x:178（福岡より左） */
  /* デザインは約物（「」。）が詰まった組み。これが無いと 1行に収まらない。
     palt はかな・漢字も詰めてしまうので、letter-spacing で
     デザイン実測の幅（978px）まで戻している */
  font-feature-settings: "palt" 1;
  letter-spacing: 0.065em;
  font-size: var(--fz-heading);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-brown);
}
.p-welcome__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;                  /* 幅が狭くなっても本文とイラストがくっつかないように */
  margin-top: 44px;
  padding-right: 66px;        /* 実測 イラスト右端 x:1134 */
}
.p-welcome__text {
  padding-left: 49px;         /* 実測 本文左端 x:249 */
  line-height: 26px;
}
/* イラストは本文より上から始まるので、その差分だけ引き上げる（実測 y:922） */
.p-welcome__illust {
  flex: none;
  width: 214px;
  margin-top: -35px;
}

/* --- 5-4. 九州ふっこう応援割とは（実測 y:1105〜2224） --------------------- */
.p-about {
  padding: 47px 0 52px;
  background: var(--c-white);
}
/* 2026-09-17：「九州ふっこう応援割とは」は薄いグリーン地にする（HTML 側で p-pale を併記）。
   .p-about の白指定より後ろに置いて上書きする */
.p-about.p-pale { background: var(--c-green-pale); }
.p-about__lead {
  margin-top: 39px;
  font-size: var(--fz-lead);
  line-height: 29px;
  text-align: center;
}

/* 3ステップ（実測 y:1424〜1670） */
.p-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 59.5px;                /* 円の中心間隔がデザイン実測（310px）になる値 */
  margin-top: 61px;
}
.p-steps__item {
  width: 172px;
  text-align: center;
}
/* ステップ間の矢印（自作の SVG。デザイン実測 19 × 30）。
   margin-top はデザイン実測（円の中心と同じ高さ）に合わせた値 */
.p-steps__arrow {
  width: 19px;
  margin-top: 110px;          /* 矢印の天地中央＝円の中心（61 + 64 − 15） */
  flex: none;
}
/* 見出しは 1行のものと 2行のものが混ざるので、下端をそろえる */
.p-steps__label {
  display: flex;
  align-items: center;        /* 1行のものも 2行ぶんの高さの中で天地中央に */
  justify-content: center;
  min-height: 61px;
  margin-bottom: 5px;
  color: var(--c-brown);
}
.p-steps__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
/* 円は CSS で描く（大分の素材はイラストだけ）。実測 φ128 */
.p-steps__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--c-white);   /* 2026-09-17：セクションが薄いグリーン地になったので白に（元は --c-gray-circle） */
}
.p-steps__icon { display: block; }
.p-steps__text { margin-top: 2px; line-height: 26px; }

/* --- 5-5. 割引内容（実測 y:1733〜2163 / 1000×430） ------------------------ */
.p-discount {
  margin-top: 72px;
  padding: 39px 30px 31px;    /* 左右そろえて 30px */
  border-radius: var(--radius-lg);
  background: var(--c-white);   /* 2026-09-17：同上（元は --c-green-bg） */
}
.p-discount__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-brown);
  text-align: center;
}
.p-discount__title span { margin-right: 8px; }
/* 見出し両サイドの短い横棒 */
.p-discount__title::before,
.p-discount__title::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin: 0 18px;
  vertical-align: middle;
  background: var(--c-brown);
}
/* CASE 4枚を1行に並べ、「例えば」ボックスはその下へ段落ちさせる（2026-09-16 の改修） */
.p-discount__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 12px;
  margin-top: 19px;
}

/* CASE カード（4枚で内幅いっぱい／間隔 11px。1000px 時は 226.75px） */
.c-case {
  position: relative;
  width: calc((100% - 33px) / 4);
  flex: none;
  container-type: inline-size;   /* 中身をカードの内幅基準（cqw）で縮めるため */
  padding: 29px 8px 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-cream);
  text-align: center;
}
.c-case + .c-case { margin-left: 11px; }
/* 「CASE」ラベルはカードの上辺から下へぶら下がる（実測 70×27）。
   上端はカードの枠線とそろえる（top: -1px ＝ 枠線 1px ぶん）。
   上の角は直角、下の角だけ 8px の角丸 */
.c-case__tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  /* 原寸 70 × 27px / 15px。カード内幅 209px（1000px 時）までは原寸のままで、
     それより狭くなったら内幅に対する比率で縮む */
  width: min(70px, 33.5cqw);
  height: min(27px, 12.9cqw);
  line-height: min(27px, 12.9cqw);
  border-radius: 0 0 min(8px, 3.8cqw) min(8px, 3.8cqw);
  background: var(--c-green);
  color: var(--c-white);
  font-size: min(15px, 7.2cqw);
  font-weight: 700;
  letter-spacing: .04em;
}
/* 見出しは「商品名（.c-case__title-main）」＋「条件（.c-case__title-sub）」の2行。
   高さを固定して、4枚のイラスト・楕円・金額の位置をそろえる。
   933px あたりから商品名（最長 9文字「交通付宿泊旅行商品」）が収まらなくなるので、
   画面幅に対して直線的に縮める（933px:20px → 768px:14.6px） */
.c-case__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 45px;            /* 商品名 1.25em ＋ 条件 0.94em ＝ 43.75px */
  font-size: min(20px, calc(2.7vw - 6.1px));
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-brown);
  white-space: nowrap;
}
.c-case__title-sub { font-size: .75em; }   /* 20px に対して 15px */
.c-case__small { font-size: .75em; }
/* イラストは楕円の上に置く（実測 高さ 54px）。
   下端が楕円と 20px ほど重なるので、楕円より手前に出す */
/* イラストの並び（画像2枚＋「＋」＋隙間2つ）は原寸で横 176px（画像の高さ 54px のとき）。
   入る幅のうちは原寸のままで、狭くなったら**イラスト自身の幅（cqw）**に対する比率で
   まとめて縮める（画像の高さ 30.3%／「＋」9.09%／隙間 5.11%）。
   ※ cqw は「自分の外側のコンテナ」基準なので、隙間は gap ではなく
     子の「＋」の左右マージンで取る（gap に cqw を書くとカード幅基準になってしまう） */
.c-case__illust {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  margin-top: 7px;
}
.c-case__illust img { flex: none; height: min(54px, 29.5cqw); width: auto; max-width: none; }   /* 54 ÷ 176 = 30.3% から少し余裕を見た値 */
/* ベッドと新幹線の間の「＋」（実測 16px） */
.c-case__plus {
  margin-inline: min(9px, 5.11cqw);   /*  9 ÷ 176 */
  font-size: min(16px, 9.09cqw);      /* 16 ÷ 176 */
  font-weight: 900;
  line-height: 1;
  color: var(--c-brown);
}
/* 黄色い楕円（実測 150 × 70）。**大分だけのデザインなので形・比率は変えない**。
   カードに入らない幅になったら、aspect-ratio で形を保ったまま幅に合わせて縮める。
   中の「50%OFF」「※1」は楕円の幅（cqw）基準で一緒に縮む */
.c-case__visual {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(150px, 100%);
  height: auto;
  aspect-ratio: 150 / 70;     /* デザイン実測 150 × 70 */
  margin: 0 auto;             /* イラストには重ねない（デザインどおり） */
  border-radius: 50%;
  background: var(--c-yellow);
}
/* 楕円の中の「※1」（カード3だけ）。「50」の右上・「%OFF」の上の空きに重ねる。
   注記そのものは割引内容ボックスの下にある */
.c-case__ref {
  position: absolute;
  top: min(16px, 10.67cqw);    /* 16 ÷ 150 */
  left: 50%;
  font-size: min(12px, 8cqw);  /* 12 ÷ 150 */
  line-height: 1;
  color: var(--c-text);
}
.c-case__off {
  display: flex;
  align-items: baseline;
  color: var(--c-white);
  line-height: 1;
  white-space: nowrap;
}
.c-case__off-num  { font-size: min(38px, 25.33cqw); font-weight: 900; }   /* 38 ÷ 150 */
.c-case__off-unit { font-size: min(19px, 12.67cqw); font-weight: 900; }   /* 19 ÷ 150 */
/* 楕円と金額の間の「1旅行1名につき」（カンプどおり 13px）。
   8文字なので、いちばん狭い 768px の4カラム（カード内幅 139px）でも 13px のまま収まる */
.c-case__per {
  margin-top: 10px;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
/* 「最大」は金額の天地中央、「円」は金額のベースラインに揃える（デザイン実測どおり）。
   原寸 36px。845px あたりから「最大 35,000円」がカードに収まらなくなるので、
   画面幅に対して直線的に縮める（845px:36px → 768px:31.5px）。
   ラベルと単位は em にして一緒に縮む */
.c-case__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 2px;            /* 上に「1旅行1名につき」が入るぶん詰める */
  color: var(--c-red);
  font-size: min(36px, calc(5.88vw - 13.7px));
  font-weight: 700;
  line-height: 1;
}
.c-case__price-label {
  align-self: center;
  margin-right: 5px;
  color: var(--c-text);
  font-size: .444em;          /* 16 ÷ 36 */
}
.c-case__price-num   { font-size: 1em; }
.c-case__price-unit  { font-size: .5em; }

/* 「例えば」ボックス。CASE が4枚になったので、初期状態から次の行へ段落ちさせて横幅いっぱいにする
   （2026-09-16 の改修。これまでは 1080px 以下だけこの形だった）。
   見出しと本文の関係（上下）は変えず、見出しの改行だけ解除して1行にする */
.c-example {
  width: 100%;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--c-green-tint);
  overflow: hidden;
  text-align: center;
}
.c-example__head {            /* 実測 h:65 */
  padding: 9px 0;
  background: var(--c-green);
  color: var(--c-white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.c-example__head br { display: none; }
/* 金額の流れは横並び（入りきらないときは折り返す） */
.c-example__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding: 14px 16px;
}
.c-example__row {
  color: var(--c-brown);
  font-size: 15px;
  line-height: 1.4;
}
.c-example__row b { font-size: 21px; font-weight: 700; }
.c-example__key { margin-right: 4px; }
.c-example__unit { font-size: 14px; }
.c-example__arrow {
  margin: 0;
  color: var(--c-brown);
  font-size: 15px;
  line-height: 1;
  transform: rotate(-90deg);   /* ↓ を右向きにする */
}
/* マーカーと金額はひとまとまりで折り返させる */
.c-example__result {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-example__marker {          /* 黄色マーカー（実測 140×25） */
  display: inline-block;
  margin-top: 0;
  padding: 2px 6px;
  background: var(--c-yellow);
  color: var(--c-brown);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.c-example__total {
  margin-top: 0;
  color: var(--c-red);
  font-weight: 700;
  line-height: 1;
}
.c-example__total b { font-size: 26px; font-weight: 700; }

/* カードの下の注記（※1）。実測 カード下端 → 注記の上端 26px */
.p-discount__note {
  margin-top: 14px;
  font-size: var(--fz-body);
  line-height: 1.6;
}

/* --- 5-6. セクション背景 -------------------------------------------------- */
.p-pale  { background: var(--c-green-pale); }
.p-white { background: var(--c-white); }

/* --- 5-7. ご利用期間（実測 y:2224〜2757） -------------------------------- */
.p-period { padding: 72px 0 92px; }

.p-period__table {
  width: var(--container-narrow);
  margin: 53px auto 0;
}
.p-period__row {
  display: flex;
  align-items: stretch;
  min-height: 100px;
  border: 3px solid var(--c-green);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-white);
}
.p-period__row + .p-period__row { margin-top: 16px; }
.p-period__key {              /* 左のピンク見出しセル（実測 w:256） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  flex: none;
  margin: -3px 0 -3px -3px;   /* 枠線とツラを合わせる */
  background: var(--c-green);
  color: var(--c-white);
  font-size: 26px;
  font-weight: 700;
}
/* 中身を inline にしてベースラインを揃える（大小の文字が同じ行に並ぶため）。
   天地中央は align-self で取る */
.p-period__val {
  align-self: center;
  padding: 12px 20px 12px 38px;
  color: var(--c-brown);
  font-size: 24px;            /* 実測：「○月○日」の大きさ */
  font-weight: 700;
  line-height: 1.4;
}
/* 「2026年」と曜日「(○)」は小さめ。em 指定にしてあるので、
   SP で親の font-size を変えれば一緒に縮む */
.p-period__year { font-size: .84em; }   /* 実測 20px */
.p-period__dow  { font-size: .75em; }   /* 曜日はさらに小さく（18px） */
.p-period__note {
  font-size: .63em;           /* 実測 15px。デザインでは曜日の直後に詰めて置く */
}
/* テーブル＋注釈のまとまり。終了告知を重ねるための基準になる */
.p-period__body { position: relative; }
/* キャンペーン終了時の告知。
   .p-period に is-ended を付けると表示される（付けるまでは display: none） */
.p-period__end {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .8);
}
.p-period.is-ended .p-period__end { display: flex; }
.p-period__end-text {
  padding: 20px 36px;
  border-radius: var(--radius-md);
  background: var(--c-red);
  color: var(--c-white);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.p-period__notes {
  width: var(--container-narrow);
  margin: 10px auto 0;
  font-size: var(--fz-small);
  line-height: 16px;
}
.p-period__notes li { display: flex; }
.p-period__mark { flex: none; width: 34px; }

/* --- 5-8. お申込み方法（実測 y:2757〜4974） ------------------------------ */
.p-apply { padding: 81px 0 80px; }

/* 選択カード（実測 φ275 の正円 / 間隔 68.5px）
   カードは aspect-ratio で正円にしているので、幅が縮めば円も一緒に小さくなる。
   イラストの箱の高さと見出しの最低高さを固定して、3枚の縦位置をそろえている。 */
/* 見出しの下のリード文（お申込み方法は、以下の3つからお選びいただけます。） */
.p-apply__lead {
  margin-top: 24px;
  font-size: var(--fz-lead);
  line-height: 29px;
  text-align: center;
}
.p-apply__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 275px));
  justify-content: center;
  column-gap: 68.5px;
  margin-top: 62px;
}
/* カードは 375px までずっと 3列（横並び）のまま。円の直径は
   （コンテンツ幅 − 間隔）÷ 3 で、1400px:275px → 767px:238px → 375px:111px と変わる。
   デザイン原寸（φ275）では中身の高さの合計がちょうど直径と同じなので、
   .c-choice__link を container にして**円の直径（cqw）を基準に中身を丸ごと縮める**。
   cqw は padding を除いた**中身の幅**なので、直径 275px のとき 243px、111px のとき 86.6px。
   各 calc は「cqw 243px で原寸、86.6px で最小値」になる1次式。
   見出しだけは比率どおりだと読めなくなるので下限（11px / 行送り 13px）を持たせ、
   そのぶんは番号・イラスト・チェブロンを比率より強めに詰めて吸収している。 */
.c-choice__link {
  container-type: inline-size;   /* 子の cqw ＝ 円の直径 */
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1;            /* 幅と同じ高さにして正円にする */
  /* 22 / 16 ÷ 275。% は自分の幅基準なので円と一緒に縮む
     （cqw は「自分の外側のコンテナ」基準になるのでここでは使えない）。
     左右だけは狭いときに少し厚くする。円は下へ行くほど幅が狭くなるので、
     比率どおりだと見出しの最終行が円からはみ出して見えるため */
  padding: 8% min(16px, 11%) 5.818%;
  border-radius: 50%;
  background: var(--c-green-soft);
  transition: transform .2s, filter .2s;
}
.c-choice__link:hover { transform: translateY(-4px); filter: brightness(.97); }
.c-choice__num {
  color: var(--c-brown);
  font-size: min(40px, calc(17.903cqw - 3.51px));   /* 直径 275px:40 → 111px:12 */
  font-weight: 700;
  line-height: 1;
}
/* 3枚でイラストの高さが違う（83 / 95 / 91px）ので、箱の高さをそろえて上寄せにする */
.c-choice__icon {
  height: min(95px, calc(45.396cqw - 15.31px));      /* 直径 275px:95 → 111px:24 */
  width: auto;
  margin-top: min(19px, calc(10.23cqw - 5.86px));    /* 直径 275px:19 → 111px:3 */
  object-fit: contain;
  object-position: top;
}
/* 見出しは 1行と 2行が混ざるので、2行ぶんの高さを確保して天地中央に置く
   （狭い幅では 3行になるカード（OTA）に合わせて最低 39px ＝ 13px × 3行） */
.c-choice__title {
  display: flex;
  align-items: center;
  min-height: max(39px, 19.753cqw);                  /* 48 ÷ 243 */
  margin-top: min(8px, calc(3.197cqw + 0.23px));     /* 直径 275px:8 → 111px:3 */
  color: var(--c-brown);
  font-size: max(11px, 7.407cqw);                    /* 18 ÷ 243 */
  font-weight: 700;
  line-height: max(13px, 9.877cqw);                  /* 24 ÷ 243 */
  text-align: center;
}
.c-choice__chevron {          /* 下向きの丸チェブロン（実測 φ25） */
  position: relative;
  flex: none;
  margin-top: auto;           /* カードの最下段へ押し下げる */
  width: min(25px, calc(10.23cqw + 0.14px));         /* 直径 275px:25 → 111px:9 */
  height: min(25px, calc(10.23cqw + 0.14px));
  border-radius: 50%;
  background: var(--c-brown);
}
.c-choice__chevron::before {
  content: "";
  position: absolute;
  top: 43%;
  left: 50%;
  /* 中の「く」も丸と同じ比率で縮める（丸の 32%／線は 9.6%） */
  width: min(8px, calc(3.274cqw + 0.045px));
  height: min(8px, calc(3.274cqw + 0.045px));
  border-right: min(2.4px, calc(0.982cqw + 0.013px)) solid var(--c-green-soft);
  border-bottom: min(2.4px, calc(0.982cqw + 0.013px)) solid var(--c-green-soft);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 説明パネル 01〜03（実測 幅 1000 / パネル間 46px） */
.c-panel {
  position: relative;
  margin-top: 54px;
  padding: 0 56px 40px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  scroll-margin-top: 24px;    /* アンカー移動時に上を少し空ける */
}
.c-panel + .c-panel { margin-top: 46px; }
/* 番号タグ（実測 130×118）。パネルの上端から 16px 上にはみ出すので、
   .c-panel に overflow: hidden は付けない */
.c-panel__tag {
  position: absolute;
  top: -16px;
  left: 214px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 118px;
  border-radius: 8px 8px 65px 65px;   /* 下だけ大きく丸い */
  background: var(--c-green-soft);
  color: var(--c-brown);
  font-size: 40px;
  font-weight: 700;
}
/* 見出しは番号タグの右に置く（実測 タグ右端 543 → 見出し左端 582） */
.c-panel__title {
  padding-top: 27px;
  padding-left: 326px;
  color: var(--c-brown);
  font-size: var(--fz-heading);
  font-weight: 700;
  line-height: 1.4;
}
/* イラストは絶対配置。本文の高さに影響させず、本文ブロックの中央に置く。
   01・03 はイラストが左、02 だけ右（デザインどおりの交互配置） */
.c-panel__body {
  position: relative;
  margin-top: 58px;
  min-height: 150px;
}
.c-panel__text {
  margin-left: 240px;         /* イラスト（左）のぶん空ける */
  line-height: 26px;
}
.c-panel__illust {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* 02 はイラストが右・本文が左 */
#apply02 .c-panel__text  { margin-left: 0; margin-right: 240px; }
#apply02 .c-panel__illust { left: auto; right: 0; }
/* 03 のイラストだけ、カンプではパネルの左端から 48px（本文ブロックより 8px 外）に置かれている。
   3枚のうち 03 がいちばん横幅が広い（197px）ので、ここが揃っていないと本文との隙間が詰まって見える */
#apply03 .c-panel__illust { left: -8px; }
.c-panel__action { margin-top: 29px; text-align: center; }
/* パネルのボタンはアイコンを持たないので、文字どうしの隙間（.c-btn の gap: 10px）は無しにする。
   2行になったぶん上下が詰まって見えるので、上下のパディングを 9px 足している（2026-09-17） */
.c-panel__action .c-btn { gap: 0; flex-wrap: wrap; padding: 9px 32px; line-height: 1.25; }
/* 公開予定日は「宿泊施設を探す／※◯月◯日(◯)公開予定」と必ず2行にして、下の行は小さく
   （.c-btn は flex なので、折り返しを許可したうえで flex-basis: 100% で次の行に送る。2026-09-17） */
.c-btn__note {
  flex-basis: 100%;
  font-size: .75em;
  line-height: 1.25;          /* 上の行との隙間を詰めるため、行間は狭めにしている */
}

/* OTA バナー一覧（実測 178×70 / 間隔 9px / 5列） */
.p-ota {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px 10px;             /* 行間はデザイン実測（発売日の下 → 次のバナー上端） */
  /* パネルの左右パディング（56px）より広いので、負のマージンではみ出させる（実測 x:230〜1170） */
  margin: 42px -26.5px 0;
}
/* バナーの下の発売日（日付が決まったら HTML を書き換える） */
.p-ota__date {
  display: block;
  margin-top: 6px;
  /* 「2026/9/25(金)12:00発売」は文字サイズの約 10.85 倍の幅。
     768〜1080px などバナーが狭くなる幅でも1行に収まるよう、バナー（li）の幅の 9% を上限にして縮める。
     入る幅では 15px のまま（2026-09-15〜） */
  font-size: min(15px, 9cqi);
  line-height: 1.2;
}
/* 発売日の cqi（上の 9cqi）の基準にするため、バナー1枚ずつをコンテナにする */
.p-ota li { container-type: inline-size; }
.p-ota a {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-white);
  overflow: hidden;
  transition: opacity .2s;
}
.p-ota a:hover { opacity: .75; }
/* リンク先が決まるまでは押せなくしておく（見た目はそのまま。2026-09-17）
   使い方 … <a class="is-disabled" aria-disabled="true" tabindex="-1"> */
.p-ota a.is-disabled {
  pointer-events: none;   /* クリック・ホバーを無効化 */
  cursor: default;
}
.p-ota img { width: 100%; }

/* --- 5-9. 関連サイトバナー（実測 410 × 160 / 間隔 51px） ------------------ */
/* 下の余白は FAQ 側の padding-top(123px) と合わせて、
   バナー下端から FAQ 見出しまで約235px（添付デザインの実測）になるようにしている */
.p-banner { padding: 127px 0 108px; }
/* 幅を「410×2 ＋ 間隔51」に固定して中央へ置き、中身は左から並べる。
   justify-content: center にすると、折り返した3枚目が中央に来てしまうため */
.p-banner__list {
  display: flex;
  flex-wrap: wrap;            /* 3枚目以降は折り返す */
  width: 871px;
  max-width: 100%;
  margin: 58px auto 0;
  gap: 40px 51px;             /* 縦（折り返したとき）／横 */
}
.p-banner__item { width: 410px; max-width: 100%; }
/* 1枚だけのときは中央に置く（左右の margin: auto で余白を均等に割る）。
   2枚は左右に1枚ずつ、3枚目以降は左から折り返す（上の指定のまま）。
   縦並びになる 560px 以下も、この指定で中央のまま。
   幅も 410px のまま縮めない（2列用の「(100% − 間隔) ÷ 2」で縮めると、
   1列になる 560px で急に大きくなって見えるため）。入らない幅だけ max-width: 100% で画面幅なり。
   セレクタの詳細度が各ブレイクポイントの .p-banner__item より高いので、後ろの指定に負けない */
.p-banner__item:only-child { width: 410px; max-width: 100%; margin-inline: auto; }
/* バナー画像が入るまではグレーのプレースホルダー。
   <a> の中に <img> を置けばそのまま置き換わる */
.p-banner__item a {
  display: block;
  height: 160px;
  background: var(--c-border);
  transition: opacity .2s;
}
.p-banner__item a:hover { opacity: .8; }
.p-banner__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 5-10. 〇〇県を旅しよう（HTML はコメントアウト中。後で使うため CSS は残す） --- */
.p-travel { padding-top: 91px; }
.p-travel__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 65px;
}
.c-spot__link { display: block; }
/* 画像エリア（実測 240 × 190）。写真が入るまではグレーのプレースホルダー。
   バッジがはみ出すので overflow は切らず、写真側を角丸で切る想定 */
.c-spot__thumb {
  position: relative;
  display: block;
  max-width: 240px;
  height: 190px;
  border-radius: var(--radius-sm);
  background: var(--c-border);
}
.c-spot__thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
/* カテゴリーラベル。サムネイルの下端をまたぐ位置に置く（実測 白地 76×31 ＋ 2px のボーダー）。
   height はボーダー込み（border-box）なので 31 + 2×2 = 35px */
.c-spot__badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 21px;
  border: 2px solid var(--c-border);
  border-radius: 6px;       /* ボーダーの内側が 4px の角丸になる */
  background: var(--c-white);
  color: var(--c-brown);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.c-spot__text {
  display: block;
  margin-top: 30px;         /* バッジのはみ出しぶんを含めた実測値 */
  padding-left: 14px;
  line-height: 26px;
}
.c-spot__link:hover .c-spot__thumb { opacity: .8; }

/* --- 5-11. FAQ（実測 〜y:5836） ------------------------------------------- */
/* 2026-09-25：お申込み方法の下・ロゴDLの上に置いたときの隙間が広かったので詰めた（旧 123px / 117px） */
.p-faq { padding: 64px 0 64px; }
/* トップページ（お申込み方法の直後）だけ、上を詰めて下を少し広げる。
   上は .p-apply の下余白 108px と足し算になるため（2026-09-25） */
.p-apply + .p-faq { padding-top: 32px; padding-bottom: 100px; }
.p-faq__title {
  color: var(--c-brown);
  font-size: var(--fz-heading);   /* 32px。他の見出し（.c-heading）と同じにして桶のイラストもそろえる（2026-09-25） */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
}
.p-faq__action { margin-top: 54px; text-align: center; }

/* --- 5-12. お問い合わせ（実測 y:5836〜6323） ----------------------------- */
.p-contact {
  padding: 88px 0 70px;
  background: var(--c-green-pale);
}
/* ロゴは絶対配置。定義リストの位置（実測）をずらさないようにするため */
.p-contact__body {
  position: relative;
  margin-top: 33px;
}
/* ロゴの位置（実測）… 左はコンテンツ左端から 52px。
   縦は「見出し＋定義リスト」の中央に置きたいので、body の中央から
   見出しの高さ（45px）＋ body の上マージン（33px）の半分ぶん上へずらす */
.p-contact__logo {
  position: absolute;
  left: -5px;                 /* 実測 ロゴ左端 x:195（コンテンツ幅の左端より 5px 外） */
  top: 50%;
  width: 290px;               /* フッター専用の横長ロゴ（原寸 579 × 376） */
  transform: translateY(calc(-50% - 27px));
}
/* img の max-width: 100% は拡大しないので、枠に合わせて広げる */
.p-contact__logo img { width: 100%; }
/* ラベル列の右端がページ中央の少し左に来るデザイン（実測 ラベル右端 x:668 / 値左端 x:708） */
.p-contact__row {
  display: grid;
  grid-template-columns: 468px 1fr;
  column-gap: 40px;
  margin-top: 8px;
}
.p-contact__row:first-child { margin-top: 0; }
.p-contact__row dt {
  text-align: right;
  color: var(--c-brown);
  font-weight: 500;
}
/* ラベルの「：」は区切りの飾りなので疑似要素で出す（段落ちさせるときに消せるように） */
.p-contact__row dt::after { content: "："; }
.p-contact__row dd {
  color: var(--c-brown);
  font-size: var(--fz-lead);
  font-weight: 700;
  line-height: 27px;
}
.p-contact__tel {
  display: inline-block;
  color: var(--c-red-tel);
  font-size: 33px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: .01em;
}
.p-contact__sub { margin-left: 8px; font-size: 13px; font-weight: 500; }
/* 長いメールアドレスがはみ出さないよう、ここだけどこでも折り返してよいことにする。
   値の欄すべてに掛けると日本語の禁則処理まで無効になり、
   行頭に小書き文字（「ャ」など）が来てしまうため */
.p-contact__mail { overflow-wrap: anywhere; }
.p-contact__env {
  margin-top: 43px;
  text-align: center;
  font-size: var(--fz-body);
  line-height: 26px;
  color: var(--c-brown);
}
.p-contact__env a { text-decoration: none; }
.p-contact__env a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   6. レスポンシブ
   ---------------------------------------------------------------------------
   SP デザインは未支給のため、PC デザインの構造を保ったまま
   一般的なセオリー（段組み解除・縮小）で最適化している。
   ブレークポイントの変更は add.css で上書き可能。
   ========================================================================= */

/* --- お知らせ（〜1399px）：375px まで 2段組みのまま連続的に縮める --------- */
@media (max-width: 1399px) {
  /* お知らせは 375px まで 2段組みのまま。
     左カラムは可変、間隔とバナーは幅に応じて連続的に縮める（リキッド） */
  /* 間隔は 1400px の 72px から連続的に詰まる（960px で 28px、880px 以下は下限の 20px）。
     単純な vw だと中間の幅で間延びするので、1次式（傾き 10vw）で寄せている */
  .p-news__inner { gap: clamp(20px, 10vw - 68px, 72px); }
  /* 左カラムは原寸 580px のまま。コンテンツ幅が 922px を切ってから縮み始める */
  .p-news__main { flex: 0 1 auto; min-width: 0; }
  /* バナーは原寸 270px のまま。左のお知らせ欄だけが縮んでいく。
     お知らせ欄が 200px を切るところ（＝ 100% - 220px が 270px を下回る幅）から
     バナーも一緒に縮み始め、120px で止まる */
  .p-news__banner { width: clamp(120px, 100% - 220px, 270px); }
  .p-news__slides { height: auto; aspect-ratio: 1; }
  /* 素材が入るまでのプレースホルダー文字は、バナー自身の幅に合わせる（cqi） */
  .p-news__banner { container-type: inline-size; }
  .p-news__slide a { font-size: clamp(13px, 10cqi, 28px); }
}

/* --- タブレット（〜1399px）：全体を縮小して原寸レイアウトを維持 ----------- */
@media (max-width: 1399px) and (min-width: 768px) {
  /* コンテンツ幅は 1000px（--container）のまま。
     画面が 1048px を切ってから、左右 24px を空けて縮み始める。
     100vw はスクロールバーぶんを含んでしまうので 100% を使う */
  .l-container {
    max-width: calc(100% - 48px);
    margin-inline: auto;
  }
  /* 区切り線はセクション直下（コンテナの外）にあるので、自分で左右の余白を確保する */
  .c-divider { max-width: calc(100% - 48px); }
  /* こちらはコンテナやパネルの内側なので、はみ出さないようにするだけでよい */
  .p-period__table,
  .p-period__notes { max-width: 100%; }
  .l-header__menu { gap: 24px; }
  .l-header__list { font-size: 14px; }

  /* 割引内容のカードはベースで可変（4枚＋段落ち）にしてあるので、ここでの幅指定は不要 */
  /* 関連サイトバナーは幅に合わせて縮める（2列は維持）。
     リストの幅（871px）と横の隙間（51px）はベースのままなので、1400px 境界で段差が出ない */
  .p-banner__item { width: calc((100% - 51px) / 2); max-width: 410px; }
  .p-banner__item a { height: auto; aspect-ratio: 410 / 160; }
  /* 本文の左（02 は右）の空きは 1400px と同じ 240px のままにする。
     ここを 200px に詰めると、いちばん幅の広い 03 のイラスト（197px）との隙間が
     3px しか残らず、本文とイラストがくっついて見える。
     コンテンツ幅は 1048px までは 1000px のままなので、この範囲は 1400px と同じ見た目。
     1048px から下はコンテナが縮むぶん、本文だけが自然に狭くなる
     （768px で本文幅 368px。イラストとの隙間は 01:73 / 02:80 / 03:51px を保つ） */
  /* ロゴは 245px のまま縮めない（左のずらし 52px も固定）。
     ラベル列は 1400px と同じ 468px を保ち、狭くなっても 437px までしか詰めない。
     ＝ロゴ右端とラベル文字の間隔が 43px → 12px と「詰まる」方向にしか動かないので、
     幅を狭めてもロゴと情報エリアが離れていかない。縮むのは値の列だけ */
  .p-contact__row {
    grid-template-columns: clamp(437px, 46.8%, 468px) minmax(0, 1fr);
    column-gap: min(40px, 4%);
  }
  /* 1321px から 56vw が 740px を下回るので、そこから縮み始める */
  .p-hero { height: min(740px, 56vw); min-height: 460px; }
}

/* --- 〜1080px：お迎えバンド・選択カードの詰め ------------------------------ */
@media (max-width: 1080px) {
  /* 狭い幅だけの改行を有効にする（現状はお迎えバンドの見出しで使用） */
  .u-br-sp { display: inline; }

  /* お迎えバンドは見出しを中央寄せにして、本文とイラストも中央に寄せる
     （1400px では左右いっぱいに置いているが、幅が狭くなると間が空きすぎるため） */
  .p-welcome__title { text-align: center; }
  .p-welcome__body {
    justify-content: center;
    gap: 20px;
    padding-right: 0;
  }
  .p-welcome__text { padding-left: 0; }

  /* 選択カードは中央ぞろえにして、カード間の隙間を詰める
     （見出しの改行は 640px 以下の .u-br-640 だけ。ここで br に display を
     当てると .u-br-640 の display: none を上書きしてしまうので触らない） */
  .c-choice__title { text-align: center; }
  .p-apply__cards { gap: 0 20px; }

  /* 割引内容（CASE 4枚＋「例えば」の段落ち）はベースで可変にしてあるので、ここでの指定は無し
     （2026-09-16 の改修より前は、この幅から3枚並び＋段落ちに切り替えていた） */
}

/* --- 〜1080px：お問い合わせのロゴを上ぞろえに ------------------------------
   ここから値の折り返しで定義リストが縦に伸びるので、上下中央のままだとロゴが下がっていく。
   「お問い合わせ先」の行に頭をそろえて、そこから下に伸びる形にする。
   767px 以下（ロゴが上に回る縦積み）より前に置くこと */
@media (max-width: 1080px) {
  .p-contact__logo { top: -20px; transform: none; }
}

/* --- 〜990px：ご利用期間のテーブルを詰める --------------------------------
   日付が1行に収まらなくなってくるので、注記を次の行に落として見出しも少し小さくする */
@media (max-width: 990px) {
  .p-period__key { width: 220px; font-size: 22px; }
  .p-period__note { display: block; margin-left: 0; }
}

/* --- 〜980px：関連サイトバナーの間隔を 30px に ----------------------------
   リストの幅も 410×2 ＋ 30 の 850px に詰めて、右側に余りが出ないようにする。
   767px のブロック（縦並び）より前に置くこと */
@media (max-width: 980px) {
  .p-banner__list { width: 850px; gap: 30px; }
  .p-banner__item { width: calc((100% - 30px) / 2); }
}

/* --- 〜830px：「例えば」のラベルを段落ちさせる -----------------------------
   「例えば」は「通常料金／応援割」「適用後お支払い金額」を金額の上に落として
   横方向の詰まりを解消する */
@media (max-width: 830px) {
  /* 4カラムのまま狭くなるので、入りきらない商品名は折り返す（入る幅では1行のまま） */
  .c-case__title { white-space: normal; }

  /* 「通常料金」「応援割」は金額の上に落とす */
  .c-example__key {
    display: block;
    margin-right: 0;
  }
  /* 「適用後お支払い金額」も金額の上に落とす */
  .c-example__result {
    flex-direction: column;
    gap: 4px;
  }
}

/* --- 〜767px：割引内容を2カラムにする --------------------------------------
   CASE 4枚を 2 × 2 に並べ、「例えば」はその下に横幅いっぱいで置く（3行目）。
   1枚が広がるので、見出しと金額は原寸（20px / 36px）に戻す */
@media (max-width: 767px) {
  /* 間隔は margin ではなく gap で取る
     （margin のままだと2行目の先頭にも左マージンが残って幅が合わない） */
  .p-discount__grid { gap: 12px 10px; }
  .c-case + .c-case { margin-left: 0; }
  .c-case { width: calc((100% - 10px) / 2); }

  .c-case__title { font-size: 20px; }
  .c-case__price { font-size: 36px; }
}

/* --- 〜540px：割引内容を1カラムにし、CASE カードの中を横組みにする ---------
   福岡・長崎と同じ組み方にそろえる（2026-09-16）。
     1行目 … 左上の「CASE」ラベルの右に見出し（商品名と条件を1行で）
     2行目 … 左：1旅行1名につき ／ 右：イラスト
     3行目 … 左：最大◯◯円     ／ 右：黄色い楕円
   「CASE」ラベルは、この幅だけ上辺中央のぶら下がりから**左上**へ移す
   （右下だけ角丸。福岡・長崎と同じ見え方）*/
@media (max-width: 540px) {
  .c-case,
  .c-example { width: 100%; }

  .c-case {
    display: grid;
    /* 左右のパディングを詰めて中身の幅を稼ぐ（左は文字が縁に寄りすぎないよう 20px）。
       上は 0 にして、見出しの行が「CASE」ラベル（高さ 27px）と並ぶようにする */
    padding: 0 10px 12px 20px;
    /* 右の列はイラストと楕円が並ぶ幅（540px:150px → 375px:120px） */
    grid-template-columns: minmax(0, 1fr) min(150px, 32vw);
    /* 行：1=見出し（2列ぶち抜き） / 2=1旅行1名につき・イラスト / 3=金額・楕円 */
    grid-template-rows: auto auto auto;
    column-gap: 10px;
  }
  /* 「CASE」ラベルは左上へ。右下だけ角丸にする */
  .c-case__tag {
    top: 0;
    left: 0;
    transform: none;
    width: min(46px, 32.5cqw);
    height: min(27px, 12.7cqw);
    line-height: min(27px, 12.7cqw);
    border-radius: 0 0 var(--radius-md) 0;
    font-size: min(12px, 7.08cqw);
  }
  /* 見出しは「CASE」ラベル（46 × 27px）の右に、商品名と条件を1行で置く */
  .c-case__title {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;            /* 商品名と条件をインラインで続けて並べるため */
    /* ラベルの右へ。46px はラベルの幅、20px はカードの左パディング、8px はラベルとの間隔 */
    margin-left: calc(46px - 20px + 8px);
    margin-top: 4px;           /* ラベルの天とそろえきると窮屈なので少しだけ下げる */
    min-height: 27px;          /* ラベルと同じ高さにして上下中央にそろえる */
    line-height: 27px;
    text-align: left;
    white-space: nowrap;
    /* 540px:22px → 375px:17.5px（「周遊型旅行商品(宿泊地が2県以上)」が1行で収まる上限）。
       事業者ページの割引内容は .p-overview の中で 8px ほど狭いので、そちらに合わせている */
    font-size: min(22px, calc(7vw - 8.8px));
  }
  /* 商品名と条件は改行せず続けて並べる。
     半角の「(」が商品名の最後の文字に詰まって見えるので、少しだけ隙間を入れる */
  .c-case__title-main,
  .c-case__title-sub { display: inline; }
  .c-case__title-sub { margin-left: .25em; }

  /* 「1旅行1名につき」と金額は左の列に縦に並べる。
     右のイラスト＋楕円が2〜3行目の高さを決めるので、余った高さがこの2行に配られて間が開く。
     注記は行の下、金額は行の上に寄せて、2つをくっつける */
  .c-case__per {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-top: 10px;
    text-align: left;
  }
  /* 金額は左の列に収める（540px:36px → 375px:27.6px） */
  .c-case__price {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
    margin-top: 2px;
    font-size: min(36px, calc(9.23vw - 7px));
  }
  /* イラストは右の列の上段（楕円の上）。楕円には重ねない＝大分のデザインのまま */
  .c-case__illust {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 10px 0 0;
  }
  /* 楕円は右の列の下段。形（150 × 70）はベースのまま */
  .c-case__visual {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 4px auto 0;
  }

  /* --- 「例えば」ボックス（横幅いっぱいのカードになる） ------------------ */
  /* 見出しは1行に */
  .c-example__head {
    padding: 9px 8px;
    font-size: 17px;
  }
  .c-example__head br { display: none; }

  .c-example__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px 18px;   /* 下の余白が無いと最後の金額が縁に付いてしまう */
  }
  /* 「通常料金 40,000円 → 応援割 −20,000円」を横並びにする */
  .c-example__key { display: inline; margin-right: 4px; }
  .c-example__row { font-size: min(15px, calc(2.55vw + 1.23px)); }
  .c-example__row b { font-size: min(21px, calc(3.57vw + 1.72px)); }
  .c-example__unit { font-size: min(14px, calc(2.38vw + 1.15px)); }
  .c-example__arrow {
    margin: 0;
    transform: rotate(-90deg);   /* ↓ を右向きにする */
  }
  /* 「応援割」のあとの矢印は使わない */
  .c-example__arrow:last-of-type { display: none; }

  /* 「適応後お支払い金額」と金額は必ず次の行に、少し大きめに */
  .c-example__result {
    display: block;
    flex-basis: 100%;
  }
  .c-example__marker { margin-top: 0; font-size: 17px; }
  .c-example__total { margin-top: 6px; }
  .c-example__total b { font-size: 30px; }
  .c-example__total .c-example__unit { font-size: 16px; }
}

/* --- 〜480px：「例えば」の中身を縦組みに戻す ------------------------------ */
@media (max-width: 480px) {
  /* 「例えば」の中身は横並びをやめて縦に戻す（矢印も2つとも表示する） */
  .c-example__body {
    display: block;
    padding: 16px 12px 18px;
  }
  /* 横幅いっぱいのカードになるので、全体的に大きめにする */
  .c-example__row { font-size: 17px; }
  .c-example__row b { font-size: 24px; }
  .c-example__unit { font-size: 16px; }
  .c-example__arrow { font-size: 17px; }
  /* 540px 以下で消していた2つ目の矢印も戻す（同じ詳細度で上書きする） */
  .c-example__arrow,
  .c-example__arrow:last-of-type {
    display: block;
    margin: 2px 0;
    transform: none;         /* ↓ のまま使う */
  }
  .c-example__marker { margin-top: 10px; font-size: 19px; }
  .c-example__total { margin-top: 8px; }
  .c-example__total b { font-size: 34px; }
  .c-example__total .c-example__unit { font-size: 18px; }
}

/* --- タブレットの狭い側（〜960px）：ヘッダーが詰まってくるので少し縮める --- */
@media (max-width: 960px) and (min-width: 768px) {
  .l-header__menu { gap: 16px; }
  .l-header__list { font-size: 13px; }
  .c-btn-header { padding: 0 14px; font-size: 11px; }
}

/* --- 768〜819px：まとまりがコンテンツ幅に入らなくなるので、もう一段詰める ---
   ※ 数値は福岡（ロゴあり・ナビ5項目）のときの調整。
      大分はロゴが無くナビが6項目なので、レスポンシブの工程で測り直す */
@media (max-width: 819px) and (min-width: 768px) {
  .l-header__inner { gap: 12px; }
  .l-header__menu { gap: 12px; }
  .l-header__list { font-size: 12px; }
  .c-btn-header { padding: 0 12px; font-size: 10px; }
}

/* --- 〜850px：お迎えバンドの見出しが 2行に折り返し始めるので少し縮める --- */
@media (max-width: 850px) and (min-width: 768px) {
  .p-welcome__title { font-size: 28px; }   /* 通常は --fz-heading（32px） */
}

/* --- 〜980px：説明パネルの番号タグと見出しを左端へ寄せる --------------------
   パネルの幅が狭くなると、中央寄りにあるタグと見出しが窮屈になるので左へ寄せる。
   タグと見出しの大きさは変えない（それは 767px 以下で段階的に小さくする）。
   見出しの左端 ＝ タグの右端（20 + 130 = 150px）＋ 38px
   ＝ 1400px と同じ隙間。padding-left は .c-panel の左パディング 56px を差し引いた値 */
@media (max-width: 980px) {
  .c-panel__tag { left: 20px; }
  .c-panel__title { padding-left: 132px; }
}

/* --- 〜860px：見出しが番号タグに重なるので左寄せ＋タグぶんの余白
       ／ 関連サイトバナーと FAQ の間隔を詰める --- */
@media (max-width: 860px) {
  /* 1400px では 112 + 123 = 235px。同じ比率のまま 160px まで詰める */
  .p-banner { padding-bottom: 76px; }
  /* FAQ の上余白（旧 84px）は、2026-09-25 に基準を 64px へ詰めたので指定しない
     （FAQ の位置がお申込み方法の下へ移り、関連サイトバナーとは隣り合わなくなったため） */
  /* 旅しようは4列だとカードが狭くなるので3列に */
  .p-travel__list { grid-template-columns: repeat(3, 1fr); }
}

/* --- SP（〜767px） -------------------------------------------------------- */
@media (max-width: 767px) {
  /* 写真のキャプションは SP では少し小さく・端に寄せる */
  .p-hero__caption { right: 10px; bottom: 8px; font-size: 10px; }
  :root {
    --fz-heading: 24px;
    --fz-lead: 16px;
    --fz-body: 15px;
  }

  .l-container,
  .c-divider { width: auto; max-width: none; margin-inline: var(--side-gutter); }
  /* ご利用期間は .l-container の中なので、左右のマージンは持たせない */
  .p-period__table,
  .p-period__notes { width: auto; max-width: none; margin-inline: 0; }

  /* ヘッダー：ハンバーガー＋右からのドロワー。帯も 75 → 60px に低くする */
  .l-header { height: 60px; }
  :root { --header-h: 60px; }   /* アンカー移動の止まる位置も合わせる */
  .l-header__inner {
    justify-content: flex-end;   /* ロゴが無いのでハンバーガーだけを右へ */
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding: 0 16px;
  }

  /* ドロワー本体 */
  .l-header__menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   /* 中身は上寄せ */
    gap: 0;                        /* 間隔は下の nav / ボタン側で指定する */
    width: 280px;
    max-width: 80%;
    height: 100vh;
    height: 100dvh;
    padding: 88px 24px 40px;
    background: var(--c-white);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .l-header__menu.is-open { transform: none; }

  /* ドロワーの中はナビを縦積みにする。下に区切り線を引いてボタンと分ける */
  .l-header__nav {
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border);
  }
  .l-header__list {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    font-size: 16px;
    color: var(--c-brown);
  }
  .l-header__list li + li::before { content: none; }   /* 区切りの「｜」は縦積みでは不要 */

  /* 事業者向けボタン：区切り線の下に、幅いっぱいの大きめサイズで置く */
  .l-header__menu > .c-btn-header {
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 16px;
    padding: 0 16px;
    font-size: 15px;
  }

  /* 暗幕 */
  .l-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: block;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .l-header__overlay.is-open { opacity: 1; visibility: visible; }

  /* ドロワーを開いている間は背面をスクロールさせない */
  body.is-nav-open { overflow: hidden; }

  /* ハンバーガーボタン（参考サイト実測：40×40 / 線 24×2px / 間隔 6px） */
  .c-hamburger {
    position: relative;
    z-index: 210;                 /* ドロワーより前面に出して閉じるボタンにもする */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .c-hamburger__line {
    width: 24px;
    height: 2px;
    background: var(--c-white);
    transition: transform .3s, opacity .3s, background-color .3s;
  }
  /* ドロワーを開いている間は画面に固定する。
     大分はヘッダーがメインビジュアルの下にあるので、ページ最上部（未スクロール）で開くと
     ヘッダー＝ボタンがメインビジュアルのぶん下にあり、画面上端に出るドロワーに対して
     × が真ん中あたりに出てしまうため。ドロワーと同じ「画面基準」にそろえる */
  .c-hamburger.is-open {
    position: fixed;
    /* ヘッダー（SP は高さ 60px）の中で天地中央にあるときと同じ位置なので、
       ヘッダーが画面上端に貼り付いている状態なら切り替えても動かない。
       10px ＝ (60 − 40) ÷ 2、16px ＝ .l-header__inner の左右パディング */
    top: 10px;
    right: 16px;
  }
  /* 開いているときは白いドロワーの上に重なるので、線を濃茶にして × に変える */
  .c-hamburger.is-open .c-hamburger__line { background: var(--c-brown); }
  .c-hamburger.is-open .c-hamburger__line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .c-hamburger.is-open .c-hamburger__line:nth-child(2) { opacity: 0; }
  .c-hamburger.is-open .c-hamburger__line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ヒーロー */
  /* 768px の高さ（460px）から続くように上限を付ける。
     78vw のままだと 768px→767px で 460 → 598px と一気に伸びて、
     中のロゴやコラージュが「どかっと下がる」ように見えるため */
  .p-hero { height: min(460px, 78vw); min-height: 320px; }

  /* お知らせ */
  .p-news { padding: 48px 0 40px; }
  .p-news__list { margin-top: 18px; }   /* 高さは全幅域とも 190px のまま */
  /* 左カラムが狭くなるので、日付と本文は縦に積む */
  .p-news__item { grid-template-columns: 1fr; gap: 2px; padding: 0 0 16px; }
  .p-news__item + .p-news__item { padding-top: 16px; }

  /* お迎えバンド */
  .p-welcome { padding: 40px 0 32px; }
  /* 850px で縮めた指定はここで解除し、SP の見出しサイズ（--fz-heading = 24px）に戻す */
  .p-welcome__title { font-size: var(--fz-heading); text-align: center; }
  /* 本文は左揃え。幅いっぱいにするとイラストが右端まで離れるので、
     中身の幅ぶんだけにして 1080px と同じく中央寄せのままにする */
  .p-welcome__text { width: auto; text-align: left; }
  .p-welcome__title,
  .p-welcome__text { padding-left: 0; }
  /* 横並びのままだと右の余白ぶんが無駄になるので、イラストは右端まで使う */
  .p-welcome__body { margin-top: 16px; padding-right: 0; }
  /* 見出しが2行＋中央揃えになるので、イラストを上へ出す指定（-37px）は解除する
     （そのままだと見出しの2行目にイラストが重なる） */
  .p-welcome__illust { width: 190px; margin-top: 0; }

  /* 応援割とは */
  .p-about { padding: 48px 0 40px; }
  .p-about__lead { margin-top: 28px; text-align: left; }
  .p-about__lead br { display: none; }

  /* 3ステップ：横並びのまま、幅と隙間を詰めて中央に収める
     （縦積みに切り替わるのは 649px 以下。下の専用ブロックを参照） */
  .p-steps { gap: 8px; margin-top: 40px; }
  .p-steps__item { width: 165px; }

  /* 割引内容 */
  .p-discount { margin-top: 40px; padding: 28px 16px 24px; }
  .p-discount__title::before,
  .p-discount__title::after { margin: 0 10px; }
  .p-discount__grid { margin-top: 20px; }
  .c-case__icon { margin-top: 0; }

  /* ご利用期間：テーブルを縦積みに */
  .p-period { padding: 48px 0 48px; }
  .p-period__table { margin-top: 28px; }
  .p-period__row { flex-direction: column; min-height: 0; }
  .p-period__key { width: auto; margin: -3px -3px 0; padding: 8px 0; font-size: 17px; }
  .p-period__val { padding: 14px 16px; font-size: 25px; }
  .p-period__note { display: block; margin: 8px 0 0; text-align: center; }
  .p-period__end-text { padding: 16px 20px; font-size: 18px; }

  /* お申込み方法 */
  .p-apply { padding: 48px 0 56px; }
  .p-apply__cards { gap: 0 10px; margin-top: 28px; }

  /* イラストの幅。625px 以下は画面幅に合わせて縮む（375px で 90px）。
     右端の逃がし（17/6/39px）は SP では効かせず、3枚とも隙間をそろえる */
  .c-panel { --illust-w: min(150px, 24vw); margin-top: 32px; padding: 0 20px 28px; }
  /* 02（OTA）のスマホイラストは原寸が 113px と細いので、150px まで拡大せず原寸を上限にする
     （縮み始める幅が 01 / 03 とそろうよう、vw の係数も同じ比率にしている） */
  #apply02 { --illust-w: min(113px, 18vw); }
  .c-panel + .c-panel { margin-top: 24px; }
  .c-panel__tag { top: -10px; left: 20px; width: 84px; height: 76px; border-radius: 6px 6px 42px 42px; font-size: 30px; }
  .c-panel__title { padding: 20px 0 0 112px; font-size: 20px; }   /* 見出しはここが下限。これ以下の幅でも 20px のまま */
  .c-panel__body { margin-top: 35px; min-height: 0; }
  /* イラストぶんを空けて折り返す。+26px がイラストと本文の隙間。
     768px 側は本文の margin（200px）とイラストの原寸差で隙間が 3〜40px とバラつくが、
     01 / 02 が 33 / 40px なので、767px で急に詰まって見えないよう 16 → 26px にしている */
  .c-panel__text {
    width: auto;
    max-width: none;
    margin-left: calc(var(--illust-w) + 26px);
    text-align: left;
  }
  #apply02 .c-panel__text { margin-left: 0; margin-right: calc(var(--illust-w) + 26px); }
  .c-panel__illust { width: var(--illust-w); }
  .c-btn { min-width: 0; width: 100%; min-height: 60px; font-size: 17px; }
  /* パネルのボタンは横幅いっぱいにせず、PC と同じ基準サイズ（325×71 / 24px）。
     入らない幅では 100% を上限に縮む */
  /* 大分は「準備中：2026年〇月〇日(〇)公開予定」と長いので、幅を広げて文字を小さくする */
  .c-panel__action .c-btn { width: min(480px, 100%); min-height: 71px; padding: 9px 20px; font-size: 18px; }
  /* 本体が 18px になるので、公開予定日はベースの .75em（13.5px）だと小さすぎる。ここから .85em（15.3px） */
  .c-btn__note { font-size: .85em; }

  /* パネルの左右パディングにそろえる（左右のマージンなし）。上は本文・イラストから離す */
  .p-ota { width: auto; max-width: none; grid-template-columns: repeat(4, 1fr); margin: 20px 0 0; }
  /* 本文が短いとイラスト（上下中央配置）が本文より下にはみ出し、下のブロック
     （01・03 はご利用期間の表、02 は OTA バナー）に重なってしまう。
     イラストの高さぶんを本文ブロックの最低高さにしておく（比率は画像の原寸） */
  #apply01 .c-panel__body { min-height: calc(var(--illust-w) * 193 / 167); }
  #apply02 .c-panel__body { min-height: calc(var(--illust-w) * 201 / 113); }
  #apply03 .c-panel__body { min-height: calc(var(--illust-w) * 193 / 197); }

  /* 関連サイトバナー */
  .p-banner { padding: 48px 0 40px; }
  /* 2列のまま。幅はコンテンツ幅いっぱい、間隔は 20px に詰める */
  .p-banner__list { width: 100%; gap: 20px; margin-top: 28px; }
  .p-banner__item { width: calc((100% - 20px) / 2); }
  .p-banner__item a { height: auto; aspect-ratio: 410 / 160; }

  /* 旅しよう */
  .p-travel { padding-top: 48px; }
  .p-travel__list { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
  .c-spot__thumb { height: auto; max-width: none; aspect-ratio: 240 / 190; }
  .c-spot__badge { height: 30px; padding: 0 14px; bottom: -14px; font-size: 14px; }
  .c-spot__text { margin-top: 26px; padding-left: 8px; }

  /* FAQ */
  .p-faq { padding: 56px 0 56px; }
  .p-faq__action { margin-top: 28px; }
  /* 横幅いっぱいにはせず、PC と同じ 360px を上限に（入らない幅ではコンテンツ幅まで縮む） */
  .c-btn--faq { width: min(360px, 100%); font-size: 16px; }

  /* お問い合わせ */
  .p-contact { padding: 48px 0 48px; }
  /* ロゴは絶対配置から通常フローに戻し、受付時間の下・推奨環境の上へ回す
     （HTML では定義リストより前にあるので order で送る） */
  .p-contact__body { display: flex; flex-direction: column; margin: 28px 0 0; }
  .p-contact__logo {
    order: 1;
    position: static;
    width: 150px;
    margin: 32px auto 0;
    transform: none;
  }
  /* ラベル／値の2列のまま、まとまりごと中央に置く。
     行ごとにグリッドを組むとラベル列の幅が行ごとに変わってしまうので、
     リスト自体を1つのグリッドにして行は display: contents で透過させる */
  .p-contact__list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* ラベル（13px）と値（16px 以上）で文字サイズが違うので、上ぞろえだとラベルが上に浮く。
       1行の行は上下中央でそろえる */
    align-items: center;
    column-gap: 10px;
    row-gap: 16px;
    width: fit-content;
    max-width: 100%;   /* .l-container 側で左右 24px の余白は確保済み */
    margin: 0 auto;
  }
  .p-contact__row { display: contents; }
  .p-contact__row dt { text-align: right; font-size: 13px; }
  /* 値が2行になる行（お問い合わせ先）は、中央ぞろえだとラベルが下がりすぎるので
     上ぞろえにして、行の高さを値の1行目（line-height 27px）と同じにする。
     こうするとラベルが値の「1行目の中央」に来る */
  .p-contact__row:first-child dt { align-self: start; line-height: 27px; }
  .p-contact__row dd { font-size: 16px; }
  .p-contact__tel { font-size: 26px; }
  .p-contact__env { margin-top: 32px; }

  /* フッター / ページトップ */
  .l-footer { height: auto; padding: 18px var(--side-gutter); text-align: center; }
  .l-footer__copy { font-size: 12px; }
  .c-pagetop { --pagetop-gap: 16px; right: 16px; width: 64px; height: 64px; }
  .c-pagetop__text { font-size: 10px; }
}

/* --- 〜599px：3ステップを「左 → 右 → 左」のジグザグに並べる ---------------
   1つ目の右下に2つ目、2つ目の左下に3つ目。矢印はその対角線の途中に置く。
   3つ横並び（165px × 3 ＋ 矢印 ＋ 隙間 ＝ 565px）はコンテナ（画面幅 − 32px）が
   600px を切ると収まらなくなるので、ここから2列に折り返す。
   HTML の並びは item / arrow / item / arrow / item なので :nth-child で配置する */
@media (max-width: 599px) {
  .p-steps {
    /* 円の直径。2列になって1要素あたりの幅に余裕ができるぶん、PC（128px）より大きく見せる。
       狭くなるほど列が細くなるので PC と同じ 128px まで戻す（599px:180px → 471px:166px）。
       矢印の位置計算でも使うので .p-steps 側に置いて子へ継承させている */
    --circle: clamp(128px, calc(48vw - 60px), 180px);
    display: grid;
    /* minmax(0, 1fr) にして、中身の最小幅で列が広がらないようにする */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 中央に矢印を通すための隙間。矢印の幅（19px）は必ず確保する */
    column-gap: clamp(24px, calc(17.5vw - 58px), 56px);
    /* 767px の gap: 8px が row-gap にも効くので、行の間隔は明示的に 0 に戻す
       （矢印の位置は下の grid-template-rows を基準に計算しているため） */
    row-gap: 0;
    /* 1段ぶんの下げ幅。小さくするほどジグザグの傾きがゆるくなる（＝縦に詰まる）。
       これ以上小さくすると、同じ左列にある 1つ目と 3つ目が縦に重なる
       （1つ目の高さは 599px で 291px なので、下限は約 146px） */
    grid-template-rows: 160px 160px auto;
    align-items: start;
    justify-items: center;
    margin-top: 36px;
  }
  .p-steps__item { width: 100%; max-width: 260px; }
  /* 段が分かれて高さをそろえる必要がなくなるので、見出しの最低高さは解除する */
  .p-steps__label { min-height: 0; }
  .p-steps__title { font-size: 20px; }
  .p-steps__circle { width: var(--circle); height: var(--circle); }
  /* 円を大きくしたぶん、中のイラストも同じ比率で拡大する（--icon-w は φ128 のときの原寸幅） */
  .p-steps__icon { width: calc(var(--icon-w) / 128 * var(--circle)); }
  .p-steps__item:nth-child(1) .p-steps__icon { --icon-w: 82; }
  .p-steps__item:nth-child(3) .p-steps__icon { --icon-w: 68; }
  .p-steps__item:nth-child(5) .p-steps__icon { --icon-w: 79; }

  .p-steps__item:nth-child(1) { grid-column: 1; grid-row: 1; }   /* 左上 */
  .p-steps__item:nth-child(3) { grid-column: 2; grid-row: 2; }   /* 右・2段目 */
  .p-steps__item:nth-child(5) { grid-column: 1; grid-row: 3; }   /* 左・3段目 */

  /* 矢印は 2列の間（中央の隙間）に、上下とも同じ横位置で並べる。
     素材は右向き（→）で、1本目はそのまま、2本目は 180deg で左向きにする。
     対角線に合わせて斜めに倒すことも考えたが、大分の矢印は線が太く
     斜めにすると形がつぶれて読みにくいので、水平のまま使っている */
  .p-steps__arrow {
    width: 19px;              /* デザイン実測のまま。PC と同じ大きさ */
    margin: 0;
    /* 2本の中央を2つ目の要素（「大分へ旅行」）の天地中央に合わせるためのずらし量。
       2つ目の高さは「見出し26 ＋ 余白5 ＋ 円 ＋ 余白2 ＋ 説明文52」なので、
       円の大きさが決まれば求まる（599px で -67.5px / 471px で -60.5px） */
    --arrow-shift: calc(22.5px - var(--circle) / 2);
    /* 2本の間隔を広げるぶん。上を上へ、下を下へ同じだけ動かすので中央は変わらない
       （間隔 = 段の下げ幅 160px ＋ この値 × 2 ＝ 220px） */
    --arrow-spread: 30px;
  }
  .p-steps__arrow:nth-child(2) {
    grid-column: 1 / -1;         /* 2列にまたがらせて全体の中央に置く */
    grid-row: 1;
    align-self: end;
    justify-self: center;
    margin-bottom: calc(var(--arrow-shift) + var(--arrow-spread));
  }
  .p-steps__arrow:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    margin-bottom: calc(var(--arrow-shift) - var(--arrow-spread));
    transform: rotate(180deg);   /* 左向きにする */
  }
}

/* --- 〜470px：3ステップはジグザグをやめて縦一列にする ---------------------
   横幅いっぱいを1要素で使えるので、見出し・説明文の改行（<br>）は解除して
   自然に流し、円は PC と同じ 128px に戻す */
@media (max-width: 470px) {
  .p-steps {
    /* 円をジグザグ用の拡大から PC と同じ 128px に戻す。
       円とイラストのサイズは 599px のブロックでこの変数から計算しているので、
       ここを書き換えるだけで中のイラストも原寸に戻る */
    --circle: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
  }
  .p-steps__item { width: 100%; max-width: none; }
  /* デザイン上の改行は横幅が狭いときだけ解除する（要素は縦積みで広く使えるため） */
  .p-steps__title br,
  .p-steps__text br { display: none; }

  /* 矢印は要素の間に置いて下向きに。
     ジグザグ用の配置（負のマージン）を打ち消すため、
     同じ詳細度の :nth-child セレクタで上書きする */
  .p-steps__arrow,
  .p-steps__arrow:nth-child(2),
  .p-steps__arrow:nth-child(4) {
    width: 19px;
    align-self: center;
    margin: 0;
    transform: rotate(90deg);
  }
}

/* --- 〜540px：お迎えバンドは本文とイラストを縦に積む ---------------------- */
@media (max-width: 540px) {
  .p-welcome__body { flex-direction: column; align-items: center; gap: 20px; }
}

/* --- 〜560px：選択カードの隙間をさらに詰める ------------------------------
   767px のブロックにも同じセレクタがあるので、こちらを後ろに置いて上書きする */
@media (max-width: 560px) {

  .p-apply__cards { gap: 0 5px; }
}

/* --- 〜640px：選択カードを「正円」から「縦のピル型」に切り替える -----------
   3列のまま円を保つと中身が入りきらなくなるので、ここから高さの制約（aspect-ratio）を外し、
   角丸だけピル（--radius-pill）にして縦長の背景にする。
   中身は 640px のときの大きさのまま 375px まで固定する。
   見出しは <br class="u-br-640"> で 2〜3行に固定（HTML 側）。 */
@media (max-width: 640px) {
  .u-br-640 { display: inline; }

  .c-choice__link {
    aspect-ratio: auto;            /* 高さは中身なりにする（＝縦長になる） */
    padding: 20px 0 18px;
    border-radius: var(--radius-pill);
  }
  /* ここから下は 640px のときの値で固定し、375px まで変えない */
  .c-choice__num { font-size: 26px; }
  .c-choice__icon { height: 59px; margin-top: 11px; }
  /* 最低高さ 51px ＝ 17px × 3行（02 の3行に合わせて3枚のチェブロンの高さをそろえる）。
     12px は 375px（幅 111px）で最長の「(宿泊予約サイト)」が1行に収まる上限 */
  .c-choice__title {
    min-height: 51px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 17px;
  }
  .c-choice__chevron {
    width: 17px;
    height: 17px;
    margin-top: 8px;
  }
  .c-choice__chevron::before {
    width: 5.4px;
    height: 5.4px;
    border-right-width: 1.6px;
    border-bottom-width: 1.6px;
  }
}


/* --- 〜580px：ご利用期間の日付を「年」で改行する --------------------------
   「2026年」を上、「○月○日(○)」を下にして中央でそろえる。
   日付ごとに .p-period__date でくくってあるので、そこを inline-block にするだけ */
@media (max-width: 580px) {
  /* 「〜」を2行ぶんの天地中央に置きたいので、値セルを flex にする
     （「〜」は素のテキストなので、匿名のフレックスアイテムとして中央に揃う） */
  .p-period__val {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 8px;              /* 「〜」の両サイドの隙間 */
  }
  .p-period__date {
    display: inline-block;
    text-align: center;
  }
  .p-period__year { display: block; }
  /* 注記は必ず次の行へ */
  .p-period__note { flex-basis: 100%; }
}

/* --- 〜540px：お迎えバンドの見出しをもう1段折る ---------------------------- */
@media (max-width: 540px) {
  .u-br-540 { display: inline; }
}

/* --- 〜500px：終了告知の文字を少しずつ小さくする -------------------------- */
@media (max-width: 500px) {
  /* 500px:18px → 375px:15px（375px でも1行に収まる） */
  .p-period__end-text { font-size: min(18px, calc(2.4vw + 6px)); }
}

/* --- 〜440px：ご利用期間の日付を横並びのまま保つ --------------------------
   2つの日付ブロックと「〜」がコンテンツ幅に収まるよう、値セルの文字を少しずつ小さくする
   （440px:25px → 375px:20.2px）。年・曜日・注記は em 指定なので一緒に縮む */
@media (max-width: 440px) {
  .p-period__val { font-size: min(25px, calc(7.38vw - 7.48px)); }
}

/* --- 〜640px：お知らせは 2段組みをやめて縦に積み、バナーを大きく見せる ----- */
@media (max-width: 640px) {
  .p-news__inner { flex-direction: column; align-items: center; gap: 32px; }
  .p-news__main { width: 100%; }
  /* 横並びのときの上余白（見出しとの位置合わせ）は不要になる */
  .p-news__banner { width: 340px; max-width: 100%; padding-top: 0; }
}

/* --- 〜480px：割引内容の見出しを小さくし、両サイドの横棒も短くする --------
   767px のブロックにも同じセレクタがあるので、こちらを後ろに置いて上書きする */
@media (max-width: 480px) {
  .p-discount__title {
    font-size: 20px;
    /* 375px では中身の合計（283px）が枠（280px）をわずかに超えて
       右の横棒だけが2行目に落ちるので、間隔を詰めたうえで折り返しも止める */
    white-space: nowrap;
  }
  .p-discount__title span { margin-right: 4px; }
  .p-discount__title::before,
  .p-discount__title::after { width: 10px; }
  .p-discount__title::before { margin: 0 5px 0 0; }
  .p-discount__title::after { margin: 0 0 0 5px; }
}

/* --- 〜680px：OTA バナーを3列に ------------------------------------------
   767px のブロックにも同じセレクタがあるので、こちらを後ろに置いて上書きする */
@media (max-width: 680px) {
  .p-ota { grid-template-columns: repeat(3, 1fr); }
}

/* --- 〜676px：OTA バナーの発売日を少し小さく ------------------------------
   3列になってバナーが細くなるので、下の発売日も 15 → 13px にする */
@media (max-width: 676px) {
  .p-ota__date { font-size: 13px; }
}

/* --- 〜767px：OTA バナーの発売日を 13px に ------------------------------------
   発売日を「2026/9/25(金)12:00発売」に長くしたので、15px のままだと 750〜677px あたりで
   バナーの幅に入らず2行に折れる。上の 676px の指定と同じ 13px を 767px から効かせる（2026-09-15） */
@media (max-width: 767px) {
  /* 13px を上限に、狭いときはバナーの幅に合わせて縮める（上の 9cqi と同じ考え方） */
  .p-ota__date { font-size: min(13px, 9cqi); }
}

/* --- 〜560px：OTA バナーを2列に（上の 680px より後ろに置く）／ 番号タグを 60px 角に
       ／ 関連サイトバナーを縦並びに（767px のブロックより後ろに置くこと） --- */
@media (max-width: 560px) {
  .p-ota { grid-template-columns: repeat(2, 1fr); }
  .p-banner__list { flex-direction: column; align-items: center; }
  .p-banner__item { width: 100%; max-width: 410px; }
  .c-panel__tag { left: 16px; width: 70px; height: 64px; border-radius: 6px 6px 35px 35px; font-size: 26px; }
  .c-panel__title { padding: 16px 0 0 96px; }
  .c-panel__action .c-btn { font-size: 16px; }
}

/* --- 〜500px：番号タグを縦長に・見出しの位置を調整（上の 560px より後ろに置く） --- */
@media (max-width: 500px) {
  .c-panel__tag { width: 62px; height: 58px; border-radius: 6px 6px 31px 31px; font-size: 23px; }
  .c-panel__title { padding: 14px 0 0 86px; }
  /* 見出しの桶を少し小さく（背景は contain なので幅に合わせて縮む） */
  .c-heading--tub::before { width: 1.4em; }
}

/* --- 〜430px：番号タグと見出しをさらに左へ寄せる（上の 500px より後ろに置く） --- */
@media (max-width: 430px) {
  .c-panel__tag { left: 10px; }
  .c-panel__title { padding-left: 65px; }
}

/* --- 〜460px：旅しようを1列に（767px のブロックより後ろに置くこと） --- */
@media (max-width: 460px) {
  .p-travel__list { grid-template-columns: 1fr; }
}

/* --- 〜500px：お問い合わせのラベルと値を段落ちに（767px のブロックより後ろに置くこと） --- */
@media (max-width: 500px) {
  /* 中央寄せの塊をやめてコンテンツ幅いっぱいに戻す */
  .p-contact__list { display: block; width: auto; margin: 0; }
  .p-contact__row { display: block; margin-top: 16px; }
  .p-contact__row:first-child { margin-top: 0; }
  /* 段落ち時は中央ぞろえ。区切りの「：」も消す */
  .p-contact__row dt,
  .p-contact__row dd { text-align: center; }
  .p-contact__row dt::after { content: none; }
  /* 受付時間の注記も時間の下に落とす */
  .p-contact__sub { display: block; margin-left: 0; }
}

/* --- 〜400px：ボタンの文字をさらに小さく（上の 560px より後ろに置く）
       ※見出し（.c-panel__title）は 767px の 20px が下限。これ以上は小さくしない --- */
@media (max-width: 400px) {
  .c-panel__action .c-btn { font-size: 13px; }
}

/* --- 〜500px：ボタンが2行になるので、文字を小さくする必要がない ------------
   （560px / 400px の縮小を打ち消す。ここより後ろに置くこと）
   公開予定日は 767px 以下の .85em（15.3px）がそのまま効く */
@media (max-width: 500px) {
  .c-panel__action .c-btn { font-size: 18px; }
}

/* --- 〜600px：説明パネルのイラストを本文の上に縦積み ----------------------
   767px のブロックの指定（絶対配置・本文の折り返し幅）を後ろから打ち消す */
@media (max-width: 600px) {
  .c-panel__body { display: flex; flex-direction: column; }
  /* HTML は本文 → イラストの順なので、order でイラストを先頭に出す */
  .c-panel__illust {
    order: -1;
    position: static;
    margin: 0 auto 20px;
    transform: none;
  }
  /* イラストが横に来なくなるので、本文は幅いっぱい・左右の余白も不要 */
  .c-panel__text,
  #apply02 .c-panel__text { max-width: none; margin-inline: 0; padding-right: 0; }
  /* 横並び用にイラストの高さを確保していた指定を解除 */
  #apply02 .c-panel__body { min-height: 0; }
}


/* ============================================================================
   7. 事業者様向けページ（business/index.html）
   ----------------------------------------------------------------------------
   ・このページでしか使わないものは、ここから下にまとめている。
   ・デザイン実測は _design/kyushu_hukko_fukuoka-BtoB_x1.jpg（1400 × 4331）。
     コンテンツ幅は TOP と同じ 1000px（x:200〜1200）。
   ・共通のクラス（.c-heading など）を事業者ページだけ変えたいときは、
     body の識別子クラス（.page-business-index）を先頭に付けること。
   ========================================================================= */
/* ============================================================================
   7-1. ヘッダー（事業者ページ）
   ---------------------------------------------------------------------------
   TOP と違い、単色の帯にボタンが1つだけ乗る。高さも 75px → 72px。
   ========================================================================= */
.l-header--business {
  /* 2026-09-15 から事業者ページも TOP と同じ sticky で画面上端に貼り付ける
     （メインビジュアルが無いので最初から上端。アンカー移動は main.js がヘッダーの高さぶん手前で止める） */
  position: sticky;
  top: 0;
  height: 72px;
  background: var(--c-green-head);
}
/* 中身はボタン1つなので右寄せ。コンテンツ幅の右端にそろえる */
.l-header--business .l-header__inner { justify-content: flex-end; }

/* クリーム地＋茶文字のボタン（実測 143 × 30） */
.c-btn-header--cream {
  min-width: 143px;
  height: 30px;
  background: var(--c-cream-btn);
  color: var(--c-brown);
}

/* ============================================================================
   7-2. ページタイトルの帯（実測 y:72〜352 / h:280）
   ========================================================================= */
.p-pagetitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  background: var(--c-cream-band);
}
.p-pagetitle__text {
  margin: 0;
  color: var(--c-brown);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* ============================================================================
   7-3. 下線つきの見出し（実測 文字 30px ／ 下に 1px の濃茶ライン）
   ========================================================================= */
.c-heading-line {
  padding-bottom: 15px;
  border-bottom: 1px dashed #5D4037;
  color: var(--c-brown);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

/* ============================================================================
   7-4. お知らせ（実測 y:477〜618）
   ---------------------------------------------------------------------------
   日付と本文の組み方は TOP と同じ .p-news__item を使う。
   違うのは「見出しが左寄せ」「スクロールしない」「幅いっぱい」の3点だけ。
   ========================================================================= */
.p-bnews { padding: 117px 0 0; }
.p-bnews__title {
  color: var(--c-green-biz);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}
.p-bnews__list { margin-top: 20px; }
/* 日付の列は実測 122px（日付 x:200〜／本文 x:322〜）。左の余白は持たせない */
.p-bnews .p-news__item {
  grid-template-columns: 122px 1fr;
  padding: 0 0 24px;
}
.p-bnews .p-news__item + .p-news__item {
  padding-top: 24px;
  border-top-style: dashed;   /* TOP のお知らせは点線、事業者ページは破線 */
  border-top-color: var(--c-green-biz);
}
/* 日付も見出しと同じ緑（TOP のお知らせは別の緑なのでここだけ上書きする） */
.p-bnews .p-news__date { color: var(--c-green-biz); }

/* ============================================================================
   7-4.5 説明会のご案内（大分だけ。実測 ボックス y:724〜1495）
   ---------------------------------------------------------------------------
   締切タグ・見出し・本文・小見出し・定義リストで左端が少しずつ違うため、
   ボックスの padding を基準に要素ごとの margin-left で実測値に合わせている。
   ========================================================================= */
.p-briefing { padding: 76px 0 0; }
.p-briefing__box {
  padding: 19px 30px 47px;
  border-radius: var(--radius-md);
  background: var(--c-gray-block);
}
/* 申込締切のタグ（実測 181 × 43） */
.p-briefing__deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 181px;
  height: 43px;
  padding: 0 16px;
  background: var(--c-green-biz);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
}
.p-briefing__title {
  margin: 10px 20px 0;        /* 実測 タグ下端 → 見出し 19px ／ 左端 x:251 */
  padding-bottom: 15px;
  border-bottom: 1px dashed #5D4037;
  color: var(--c-brown);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}
.p-briefing__lead {
  margin: 26px 44px 0;        /* 実測 左端 x:274（ボックスの padding 30px ＋ 44px） */
  font-size: 17px;
  line-height: 26px;
}
.p-briefing__group { margin-top: 35px; font-size: 17px; }
.p-briefing__subtitle {
  margin-left: 41px;          /* 実測 左端 x:271 */
  color: var(--c-brown);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
/* 見出しの横に添える注記（「※説明会は後日動画配信いたします」「先着300名様」）。
   2026-09-14 の修正指示でタイトル内に入れた。幅が足りなければ見出しの下に折り返す */
.p-briefing__notes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-left: 20px;
  vertical-align: 2px;
}
.p-briefing__note {
  color: var(--c-text);
  font-size: 16px;
  font-weight: 500;
}
/* 注記の中の強調（「先着300名様」）。「9/25(金)締切」（.p-briefing__limit）と同じ赤（2026-09-15〜） */
.p-briefing__em { color: var(--c-red); }
/* 日時／場所／申込方法。ラベル列はデザイン実測 149px */
.p-briefing__list {
  display: grid;
  grid-template-columns: 149px minmax(0, 1fr);
  gap: 9px 0;
  margin: 11px 0 0 53px;      /* 実測 ラベル左端 x:283 */
  line-height: 1.4;
}
.p-briefing__list dt { color: var(--c-brown); }
.p-briefing__list dd { margin: 0; }
.p-briefing__action { margin-top: 22px; text-align: center; }
/* 申込フォームのボタンの下の赤字「9/25(金)締切」 */
.p-briefing__limit {
  margin: 12px 0 0;
  color: var(--c-red);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* 日付・場所が決まるまでの「●●●…」。区切りが無いと折り返せず横スクロールが出るので、
   このクラスの中だけ途中で折り返せるようにしている（実文言に差し替えたらクラスごと外す） */
.u-placeholder { font-size: 17px; overflow-wrap: anywhere; }
/* 申込フォームのボタン（実測 350 × 62） */
.c-btn-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 350px;           /* 文言が短いときでも小さくなりすぎないための下限 */
  max-width: 100%;            /* 幅は文言なり。入らない幅では中で折り返す */
  min-height: 62px;
  padding: 0 40px;            /* 文字とボタンの左右のふちの間隔（2026-09-17 に 24 → 40px） */
  border-radius: var(--radius-pill);
  background: var(--c-brown);
  color: var(--c-white);
  font-size: var(--fz-body);
  font-weight: 700;
  transition: opacity .2s;
}
.c-btn-form:hover { opacity: .85; }
/* 文言はこの span ひとつにまとめる。
   .c-btn-form は flex なので、直接テキストとカッコを並べると別々の「箱」として横に並んでしまい、
   狭い幅で「参加申込／フォーム」のように途中で割れる。1つの span に入れて中で折り返させる */
.c-btn-form__label { text-align: center; }
/* カッコは途中で割らず、カッコごと次の行へ送る
   （inline-block だけだとカッコの中で折り返してしまうので nowrap も付ける） */
.c-btn-form__unit { display: inline-block; white-space: nowrap; }

/* ============================================================================
   7-5. 参画事業者の募集について（実測 見出し y:824 ／ ボックス y:915〜1107）
   ========================================================================= */
.p-recruit { padding: 92px 0 0; }
.p-recruit__box {
  margin-top: 53px;
  padding: 32px 67px 42px;    /* 実測 本文の左端 x:267（ボックス左端 ＋ 67px） */
  border-radius: var(--radius-sm);
  background: var(--c-gray-block);
  font-size: 17px;
}
.p-recruit__box p { margin: 0; }
/* 「＞ キャンペーン概要」のリンク（デザインどおり下線つき） */
.p-recruit__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-recruit__link:hover { text-decoration: none; }
/* 「＞ キャンペーン概要」は下のキャンペーン概要を開閉するボタン。見た目はリンクのまま */
.p-recruit__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.p-recruit__toggle:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}
/* 左の「＞」。開いたら下向き（90度回転）にする */
.p-recruit__arrow {
  display: inline-block;
  transition: transform .2s;
}
.p-recruit__toggle[aria-expanded="true"] .p-recruit__arrow { transform: rotate(90deg); }

/* キャンペーン概要（開いたときに出る中身）。
   上の灰色のボックス（.p-recruit__box）と同じ背景で下に続け、1つの箱に見えるようにする。
   開いている間は、ボックスの下の角を直角にする（JS が .is-open を付ける） */
.p-recruit__box.is-open { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.p-overview {
  padding: 8px 30px 44px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--c-gray-block);
}
/* 割引内容は TOP では薄い緑の箱だが、ここでは灰色の背景にそのまま載せる。
   左右の余白も外して、CASE 3枚＋「例えば」（932px）が 1400px で折り返さない幅を確保する */
.p-overview .p-discount {
  margin-top: 40px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.p-overview .p-discount__grid { justify-content: center; }
/* 締め切りの一文だけ赤の太字。前の段落から 23px 空ける（実測）。
   上の `.p-recruit__box p` と同じ詳細度だと margin が効かないので、
   セレクタを1つ深くしている */
.p-recruit__box .p-recruit__deadline {
  margin-top: 23px;
  color: var(--c-red);
  font-size: 23px;
  font-weight: 700;
}

/* ============================================================================
   7-6. 対象事業者（実測 見出し y:1208 ／ ブロック y:1295〜2895）
   ========================================================================= */
.p-target { padding: 69px 0 0; }
.p-target__list { margin-top: 35px; }

/* --- ブロック本体（薄グレーの角丸） --- */
.c-biz {
  padding-bottom: 26px;       /* .c-dl の下の余白（margin だと親の外へ抜けてしまう） */
  border-radius: var(--radius-md);
  background: var(--c-gray-block);
}
.c-biz + .c-biz { margin-top: 40px; }

/* --- 上段：左の円タブ＋右の説明文 --- */
.c-biz__head { position: relative; }
/* 左の白い正円（実測 φ215 / ブロックの左上から 48px・26px） */
.c-biz__tab {
  position: absolute;
  top: 26px;
  left: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 215px;
  height: 215px;
  margin: 0;
  padding: 0 10px;
  border: 4px solid #ECEDEA;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-brown);
  text-align: center;
}
.c-biz__icon {
  display: block;
  width: auto;
  height: 66px;               /* 実測 66 × 66 */
  margin-bottom: 9px;
}
.c-biz__name {
  margin: 0;                  /* h3 の既定マージンを消す（見た目は span のときと同じ） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
/* 「（宿泊施設直接割引）」のような補足。名前の下に小さく置く */
.c-biz__note {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
/* 説明文は円のぶんだけ左を空ける（実測 x:512〜 ＝ ブロック左端から 312px） */
.c-biz__text {
  margin: 0;
  padding: 27px 75px 0 312px;
  font-size: var(--fz-body);
  line-height: 26px;
}

/* --- 下段：白いダウンロードボックス（実測 x:502〜1140 / 幅 639px） --- */
.c-dl {
  width: auto;
  margin: 46px 59px 0 302px;
  padding: 25px 20px 39px;
  border-radius: var(--radius-md);
  background: var(--c-white);
}
.c-dl__title {
  margin: 0;
  color: var(--c-brown);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.c-dl__title--movie {
  margin-top: 50px;
  margin-bottom: 20px;
}
.movie-note {
  display: inline-block;
  margin-left: 1.1em;
}

/* --- 説明会動画の「再生する」ボタンとモーダル（2026-10-02 追加） -----------
   ボタンを押すとモーダルが開いて動画を再生する。動きは assets/js/main.js の initMovieModal */
.c-movie-btn-wrap {
  display: block;
  margin: 10px 0 0 1.1em;   /* 上の注記（.movie-note）と左をそろえる */
}
/* 大きさ・色は動画設置サンプル（movie.html）のボタンにそろえている */
.c-movie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--c-green-movie);
  color: var(--c-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s;
}
.c-movie-btn:hover { opacity: .85; }
.c-movie-btn:focus-visible { outline: 3px solid var(--c-green-movie); outline-offset: 3px; }
.c-movie-btn__icon { flex: none; }

/* モーダル本体。画面いっぱいの暗幕の中に、できるだけ大きく動画を置く */
.c-movie-modal[hidden] { display: none; }
.c-movie-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .85);
}
/* 中身は動画の大きさに合わせて縮む（縦動画のときは幅が細くなる）。
   × ボタンを動画の右上に重ねるための基準にもしている */
.c-movie-modal__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1600px, 100%);
  max-height: calc(100vh - 48px);
}
/* 高さを画面に収めたうえで、幅は動画の縦横比なりに決める（縦動画でもはみ出さない） */
.c-movie-modal video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  border-radius: 6px;
  background: #000;
}
/* × は動画の右上に重ねる（枠の外に置くと、縦動画のときに画面の外へ出てしまうため） */
.c-movie-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: var(--c-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.c-movie-modal__close:hover { background: rgba(0, 0, 0, .8); }
.c-movie-modal__close:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
/* 開いている間は後ろのページをスクロールさせない（JS が body に付ける） */
body.is-movie-open { overflow: hidden; }

/* SP：暗幕の余白を詰めて、動画をできるだけ大きく見せる */
@media (max-width: 767px) {
  .c-movie-btn-wrap { margin-left: 0; }
  .c-movie-modal { padding: 12px; }
  .c-movie-modal__inner { max-height: calc(100vh - 24px); }
  .c-movie-modal video { max-height: calc(100vh - 24px); }
  .c-movie-modal__close { top: 6px; right: 6px; }
}
.c-dl__list {
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}
.c-dl__list li + li { margin-top: 16px; }
/* ファイルへのリンクは下線つき（デザインどおり） */
.c-dl__list a,
.p-manual__list a {
  color: var(--c-text);
  font-size: var(--fz-body);
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: opacity .2s;
}
.c-dl__list a:hover,
.p-manual__list a:hover { opacity: .65; }
/* ファイルが用意できるまでは押せなくしてグレーにする（文字の後ろに「(準備中)」を足す。2026-09-17）
   使い方 … <a class="is-disabled" aria-disabled="true" tabindex="-1">〜(準備中)</a>
   ファイルが入ったら class と aria-disabled / tabindex を外すだけでよい */
.c-dl__list a.is-disabled,
.p-manual__list a.is-disabled {
  color: var(--c-gray-text);
  pointer-events: none;   /* クリック・ホバーを無効化 */
  cursor: default;
}

/* --- 下に付くオンライン申請のボタン（宿泊事業者・旅行会社。OTA はコメントアウト中） ---
   2026-09-14 の修正で案内文をやめ、白いボックスのすぐ下にボタンと募集締め切りを置く */
.c-biz__online {
  margin: 32px 0 28px;
  text-align: center;
}
.c-biz__online p {
  margin: 0 59px 38px 302px;  /* 上の .c-dl と左右をそろえる */
  font-size: var(--fz-body);
  line-height: 1.6;
  text-align: left;
}
/* 茶色のボタン（実測 438 × 60） */
.c-btn-online {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 438px;
  min-height: 60px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--c-brown);
  color: var(--c-white);
  font-size: var(--fz-body);
  font-weight: 700;
  transition: opacity .2s, transform .2s;
}
.c-btn-online:hover { opacity: .85; transform: translateY(-2px); }
/* 書類がそろうまでは押せなくする（背景グレー・文字は白のまま。2026-09-17）
   使い方 … <a class="c-btn-online is-disabled" aria-disabled="true" tabindex="-1"> */
.c-btn-online.is-disabled {
  background: var(--c-gray-btn);
  pointer-events: none;   /* クリック・ホバーを無効化 */
  cursor: default;
}
.c-btn-online.is-disabled:hover { opacity: 1; transform: none; }
/* ボタンの下の赤字「募集締め切り9/30(水)」 */
.c-biz__online .c-biz__deadline {
  margin: 14px 0 0;
  color: var(--c-red);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* ============================================================================
   7-7. 参画事業者向けマニュアル（実測 見出し y:3000 ／ リンク y:3129〜）
   ========================================================================= */
.p-manual { padding: 98px 0 0; }
.p-manual__list {
  margin: 76px 0 0;
  padding: 0 0 0 54px;        /* 実測 リンク x:254〜 */
  list-style: none;
}
.p-manual__list li + li { margin-top: 38px; }

/* ============================================================================
   7-8. キャンペーンロゴダウンロード（実測 見出し y:3424 ／ ボタン 440 × 60）
   ========================================================================= */
.p-logodl { padding: 183px 0 170px; }
/* FAQ の直後に来るときは上の余白を詰める（2026-09-25。事業者ページに FAQ を追加したため） */
.p-faq + .p-logodl { padding-top: 64px; }
.p-logodl__action {
  margin: 88px 0 0;
  text-align: center;
}
/* 480px 以下でだけ入る改行（ボタンの文言用）。
   <br> の前後で改行すると空白が残るので、HTML では1行で書くこと */
.u-br-480 { display: none; }

/* TOP の .c-btn より小さいサイズ違い。色も事業者ページ用の緑にする */
.c-btn--sm {
  min-width: 440px;
  min-height: 60px;
  background: var(--c-green-biz);
  font-size: var(--fz-body);
}

/* ============================================================================
   7-9. レスポンシブ
   ========================================================================= */

/* --- 〜1399px：TOP と同じくコンテンツ幅を保ったまま縮める ----------------- */
@media (max-width: 1399px) and (min-width: 768px) {
  /* 説明文の右余白は詰めてよい */
  .c-biz__text { padding-right: 40px; }
  .c-dl { margin-right: 40px; }
  .c-biz__online p { margin-right: 40px; }
}

/* --- 〜860px ------------------------------------------------------------- */
@media (max-width: 860px) {
  .c-heading-line { font-size: 20px; }
  /* 円を小さくして、説明文と DL ボックスの左余白もそれに合わせて詰める
     （1400px では 円 215px / 左 48px、本文とボックスの左 312px・302px） */
  .c-biz__tab { left: 24px; width: 168px; height: 168px; }
  .c-biz__text { padding-left: 212px; }
  .c-dl { margin-left: 202px; margin-right: 24px; }
  /* 案内文の頭は常に上の .c-dl とそろえる */
  .c-biz__online p { margin-left: 202px; margin-right: 24px; }
  .c-biz__icon { height: 52px; margin-bottom: 7px; }

  /* 説明会：ボックスの余白と要素の左インデントを詰める */
  .p-briefing__box { padding: 19px 20px 36px; }
  .p-briefing__title { margin-left: 8px; font-size: 24px; }
  .p-briefing__lead { margin: 20px 16px 0; }
  .p-briefing__subtitle { margin-left: 14px; font-size: 18px; }
  /* 注記は見出しの下の行に回す */
  .p-briefing__notes { display: flex; margin: 4px 0 0; }
  .p-briefing__note { font-size: 14px; }
  .p-briefing__list { grid-template-columns: 120px minmax(0, 1fr); margin-left: 20px; }
  /* 幅は固定せず文言なり（350px 固定だと「参加申込／フォーム」で割れてしまう。2026-09-17） */
  .c-btn-form { min-width: 0; }
  .p-briefing__limit { margin-top: 10px; font-size: 16px; }
}

/* --- SP（〜767px） -------------------------------------------------------- */
@media (max-width: 767px) {
  .l-header--business { height: 64px; }
  .l-header--business .l-header__inner { padding: 0 16px; }
  .c-btn-header--cream { min-width: 0; padding: 0 16px; font-size: 12px; }

  .p-pagetitle { height: 160px; }
  .p-pagetitle__text { font-size: 24px; }

  .c-heading-line { padding-bottom: 14px; }   /* 文字サイズは 860px で変えている */

  .p-bnews { padding-top: 48px; }
  .p-bnews__title { font-size: 22px; }
  .p-bnews__list { margin-top: 20px; }
  /* 幅が足りないので日付を本文の上に積む */
  .p-bnews .p-news__item { grid-template-columns: 1fr; padding-bottom: 20px; }
  .p-bnews .p-news__item + .p-news__item { padding-top: 20px; }

  .p-recruit { padding-top: 56px; }
  .p-overview { padding: 4px 20px 28px; }
  .p-overview .p-discount { margin-top: 28px; }
  /* ボックスの左右の余白ぶん TOP より狭いので、375px で「は」だけ2行目に落ちないよう見出しを少し小さく */
  .p-overview .c-heading { font-size: 20px; }
  .p-recruit__box { margin-top: 24px; padding: 24px 20px 28px; }
  .p-recruit__deadline { margin-top: 24px; font-size: 16px; }

  .p-target { padding-top: 56px; }
  .p-target__list { margin-top: 24px; }
  .c-biz + .c-biz { margin-top: 20px; }
  /* タブと説明文の横並びは 860px の指定のまま（幅 160px ／ 左余白 200px） */
  .c-biz__icon { height: 47px; margin-bottom: 8px; }
  .c-biz--agency .c-biz__icon { height: 52px; }
  .c-biz--ota .c-biz__icon { height: 58px; }
  .c-biz__name { font-size: 17px; }
  .c-biz__note { font-size: 12px; }
  /* 本文が1行のブロックだと DL ボックスが円に重なるので、円（24 + 168px）ぶんを確保する */
  .c-biz__text { min-height: 192px; padding-right: 20px; line-height: 1.8; }

  .c-dl {
    width: auto;
    max-width: none;
    margin: 24px 16px 0;
    padding: 20px 16px 22px;
  }
  .c-dl__title { font-size: 17px; }
  .c-dl__list { margin-top: 16px; }
  .c-dl__list li + li { margin-top: 16px; }
  /* 左右の余白を .c-dl（16px）にそろえる。案内文の頭も自動で .c-dl と同じ位置になる */
  .c-biz__online { margin: 24px 0 24px; padding: 0 16px; }
  .c-biz__online .c-biz__deadline { margin-top: 10px; font-size: 16px; }
  .c-biz__online p { margin-left: 0; margin-right: 0; }
  .c-btn-online { min-width: 0; width: 100%; font-size: 15px; }

  .p-manual { padding-top: 56px; }
  .p-manual__list { margin-top: 28px; padding-left: 0; }
  .p-manual__list li + li { margin-top: 24px; }

  .p-logodl { padding: 56px 0 56px; }
  .p-faq + .p-logodl { padding-top: 56px; }   /* PC 用の 64px を SP では他と同じ 56px に戻す（2026-09-25） */
  .p-logodl__action { margin-top: 28px; }
  .c-btn--sm { min-width: 0; width: min(440px, 100%); font-size: 15px; }
}

/* --- 〜480px：ボタンの文言を2行にする ------------------------------------ */
@media (max-width: 480px) {
  .u-br-480 { display: inline; }
  /* 2行になると上下が詰まって見えるので、内側に余白を足す */
  .c-btn-online,
  .c-btn--sm,
  .c-btn-form { padding-block: 10px; }

  /* 説明会の申込ボタンは「参加申込フォーム」で改行して、カッコを2行目に置く */
  .c-btn-form__unit { display: block; }
}

/* --- 〜650px：タブを説明文の上に段落ちさせる -----------------------------
   767px のブロックより後ろに置くこと */
@media (max-width: 650px) {
  /* タブは絶対配置をやめて中央に置く */
  .c-biz__head { display: flex; flex-direction: column; align-items: center; }
  .c-biz__tab {
    position: static;
    width: 160px;
    height: 160px;
    margin-top: 24px;
  }
  /* 横並び用に空けていた左余白とタブぶんの高さを解除 */
  .c-biz__text {
    min-height: 0;
    padding: 20px 16px 0;
  }
  .c-dl { margin: 16px; }
  /* 説明会：申込フォームのボタンの幅は文言なり（入らない幅では中で折り返して幅いっぱいになる） */
}

/* --- 〜560px：説明会の 日時／場所／申込方法 を段落ちさせる -------------------
   上の 860px ブロックで 2列を指定しているので、必ずそれより後ろに置くこと --- */
@media (max-width: 560px) {
  .p-briefing__list {
    grid-template-columns: 1fr;
    gap: 2px 0;
    margin-left: 12px;
  }
  .p-briefing__list dt { font-weight: 700; }
  .p-briefing__list dd { margin-bottom: 12px; }
  .p-briefing__list dd:last-child { margin-bottom: 0; }
}


/* ============================================================================
   8. 推奨環境ページ（accessibility/index.html）
   ---------------------------------------------------------------------------
   ・カンプなし。参考：鹿児島サイト /accessibility/ の構成・寸法をそのまま流し込み
     （表の罫線 #999・見出しセル #E8E8E8・左列 200px、上下の余白 100px ほか）
   ・ページタイトルだけ県のメインカラー（参画宿泊施設一覧のタイトルと同じ 30px）
   ・共通のクラスをこのページだけ変えたいときは .page-accessibility-index を先頭に付ける
   ========================================================================= */
/* ヘッダー：大分の .l-header はもともと position: sticky（TOP ではメインビジュアルの下で貼り付く）。
   このページでは最上部に置いているので、追加の指定なしで画面上端に貼り付いて追従する */

.p-env {
  padding: 100px 0 110px;
  background: var(--c-white);
}
.p-env__title {
  margin: 0 0 48px;
  color: var(--c-green-deep);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* 狭い画面で表が入りきらないときは、ページ全体ではなく表だけ横スクロールさせる */
.p-env__table-wrap {
  margin-bottom: 48px;
  overflow-x: auto;
}
.p-env__table {
  width: 100%;
  border: 1px solid #999;
  border-collapse: collapse;
  color: var(--c-text);
  font-size: var(--fz-body);
  line-height: 1.6;
}
.p-env__table th,
.p-env__table td {
  padding: 16px;
  border: 1px solid #999;
  text-align: left;
  vertical-align: middle;
}
.p-env__table th {
  width: 200px;
  background: #E8E8E8;
  font-weight: 700;
}
.p-env__table td {
  background: var(--c-white);
  font-weight: 500;
}
.p-env__block + .p-env__block { margin-top: 40px; }
.p-env__heading {
  margin: 0 0 24px;
  color: var(--c-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.p-env__text {
  color: var(--c-text);
  font-size: var(--fz-body);
  font-weight: 500;
  line-height: 1.8;
}

/* --- 〜767px：文字と余白を SP サイズに（参考サイトの SP 値） ---------------- */
@media (max-width: 767px) {
  .p-env { padding: 48px 0 56px; }
  .p-env__title { margin-bottom: 32px; font-size: 24px; }
  .p-env__table-wrap { margin-bottom: 32px; }
  .p-env__table { font-size: 14px; }
  .p-env__table th,
  .p-env__table td { padding: 12px 16px; }
  /* 左列は固定幅をやめて中身なり（「iOS/iPadOS」が折り返さない幅）にする */
  .p-env__table th { width: auto; white-space: nowrap; }
  .p-env__block + .p-env__block { margin-top: 32px; }
  .p-env__heading { margin-bottom: 16px; font-size: 18px; }
  .p-env__text { font-size: 14px; }
}


/* ============================================================================
   9. お知らせ一覧ページ（news/index.html）
   ---------------------------------------------------------------------------
   ・カンプなし。参考：鹿児島サイト /news/ の構成（タイトル → お知らせの一覧）を流し込み
   ・余白・タイトルは「8. 推奨環境ページ」と同じ。タイトルは県のメインカラー
   ・1件ずつの組み方（日付／本文・区切りの点線・色）は TOP の .p-news__item をそのまま使う
   ========================================================================= */
/* ヘッダー：大分の .l-header はもともと position: sticky。最上部に置いているので、そのまま追従する */
.p-newslist {
  padding: 100px 0 110px;
  background: var(--c-white);
}
.p-newslist__title {
  margin: 0 0 48px;
  color: var(--c-green-deep);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* TOP は決まった高さの枠に収めるため記事ごとの余白を詰めているので、一覧ページでは上下 24px にそろえる */
.p-newslist .p-news__item { padding: 0 0 24px; }
.p-newslist .p-news__item + .p-news__item { padding-top: 24px; }

/* --- 〜767px：文字と余白を SP サイズに（日付と本文の縦積みは TOP の .p-news__item の指定がそのまま効く） --- */
@media (max-width: 767px) {
  .p-newslist { padding: 48px 0 56px; }
  .p-newslist__title { margin-bottom: 32px; font-size: 24px; }
  .p-newslist .p-news__item { padding-bottom: 16px; }
  .p-newslist .p-news__item + .p-news__item { padding-top: 16px; }
}


/* ============================================================================
   10. ロゴ・バナーダウンロードページ（business/banner/index.html）
   ---------------------------------------------------------------------------
   ・カンプ：_design/kyushu_hukko_fukuoka-logo-dl_x1.png（1400px）の実測。長崎・大分も同じ寸法で、色だけ県のもの
   ・ヘッダー（sticky）・ページタイトルの帯・お問い合わせ・フッターは事業者ページと同じ
   ・中身の幅は 910px（x:245〜1155）。ボタン・リンクの色は事業者ページのボタンと同じ色
   ========================================================================= */
/* ページタイトルの帯：タイトルは帯の中央のまま、その下にリード文を足す。
   リード文ぶん（行の高さ 25.6px ＋ 間 6px）だけ上に余白を足して、タイトルの位置を事業者ページと同じにしている */
.page-business-banner-index .p-pagetitle {
  flex-direction: column;
  padding-top: 32px;
}
.p-pagetitle__lead {
  margin: 6px 0 0;
  color: var(--c-text);
  font-size: var(--fz-body);
  line-height: 1.6;
  text-align: center;
}

.p-bnrdl {
  /* 上：実測 帯の下端 → 見出し。
     下：カンプは最後のリンク → お問い合わせが 76px と詰まっていたので、上とそろえて 120px（2026-09-15） */
  padding: 122px 0 120px;
  background: var(--c-white);
}
.p-bnrdl__inner {
  width: 910px;
  max-width: calc(100% - 48px);
  margin-inline: auto;
}
/* ブロックの区切り：2px の薄い灰色の線（実測 #F7F7F7） */
.p-bnrdl__block + .p-bnrdl__block {
  padding-top: 41px;
  border-top: 2px solid #F7F7F7;
}
.p-bnrdl__block--banner { margin-top: 84px; }    /* ボタンの下端 → 線 */
.p-bnrdl__block--sns { margin-top: 138px; }      /* バナーの文字の下端 → 線 */

/* 「■ ロゴ_カラー」などの見出し */
.p-bnrdl__heading {
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.p-bnrdl__heading::before {
  content: "■";
  margin-right: 4px;
}

/* --- ロゴ（2列。箱 400 × 380・間 110px） --- */
.p-bnrdl__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: space-between;
  column-gap: 24px;
}
.p-bnrdl__logo .p-bnrdl__heading { margin-bottom: 15px; }
.p-bnrdl__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 高さは固定せず、カンプの 400 × 380 の比率のまま幅に合わせて縮める（灰色の箱ごと小さくなる） */
  aspect-ratio: 400 / 380;
  margin: 0;
  background: #EFEFEF;
}
/* ロゴは箱の中央に幅 296px（箱 400px の 74%） */
.p-bnrdl__logo-box img { width: 74%; }
.p-bnrdl__action { margin: 30px 0 0; }
.p-bnrdl__btn {
  display: flex;
  gap: 10px;              /* ダウンロードアイコンと文字の隙間（2026-09-17） */
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--c-green-biz);
  color: var(--c-white);
  font-size: var(--fz-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.p-bnrdl__btn:hover { opacity: .85; }

/* --- バナー（正方形 270・長方形 605 × 315） ---
   2026-09-17 に横並び → **縦並び**へ変更（横並びだとバナー名が2行に折れてしまうため）。
   「正方形の画像 → そのリンク2本 → 長方形の画像 → そのリンク」の順に、中央ぞろえで積む */
.p-bnrdl__block--banner .p-bnrdl__heading { margin-bottom: 63px; }
.p-bnrdl__banners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;                  /* 正方形のまとまり → 長方形のまとまり */
}
.p-bnrdl__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;                  /* 画像 → リンク */
  width: 100%;
}
.p-bnrdl__banner img { width: 100%; }
.p-bnrdl__banner--square img { max-width: 270px; }
.p-bnrdl__banner--rect img { max-width: 605px; }
/* リンクのまとまり（正方形は 540 / 1080 の2本ある） */
.p-bnrdl__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* 行頭をそろえる（中央ぞろえにすると2本の頭がずれる） */
  gap: 14px;
}

/* バナー名・SNS用バナーのリンク（下線つきの色文字） */
.p-bnrdl__link {
  color: var(--c-green-biz);
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.p-bnrdl__link:hover { opacity: .7; }

/* --- SNS用バナー（中央にダウンロードのリンクを2つ） --- */
/* カンプは見出し → リンクが 190px 空いていたが、画像が無いと間延びするので
   「■ バナー」の見出し → 画像と同じ 63px にそろえた（2026-09-15） */
.p-bnrdl__block--sns .p-bnrdl__heading { margin-bottom: 63px; }
.p-bnrdl__sns { text-align: center; }
.p-bnrdl__sns li + li { margin-top: 30px; }   /* カンプは 66px。上の余白を詰めたのに合わせて 30px に */
/* アイコンは1行目の頭に固定。文字が折り返しても中央に寄らず、行頭がそろうようにする
   （inline-flex ＋ align-items: center だと、2行になったときアイコンが上下中央に来てしまう） */
.p-bnrdl__link--dl {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  font-size: 18px;
  text-align: left;
}
/* 1行目の文字と光学的にそろえる（アイコン 18px・行の高さ 1.6） */
.p-bnrdl__icon { margin-top: .32em; }
.p-bnrdl__icon { flex: none; }

/* --- 事業者ページトップに戻るボタン（いちばん下に中央で置く） --- */
.p-bnrdl__back {
  margin-top: 80px;
  text-align: center;
}

/* --- 〜767px：1列に積む ------------------------------------------------------ */
@media (max-width: 767px) {
  .page-business-banner-index .p-pagetitle { padding-top: 28px; }
  .p-pagetitle__lead { margin-top: 6px; font-size: 14px; }

  .p-bnrdl { padding: 48px 0 56px; }
  .p-bnrdl__inner { max-width: calc(100% - 32px); }
  .p-bnrdl__block + .p-bnrdl__block { padding-top: 32px; }
  .p-bnrdl__block--banner,
  .p-bnrdl__block--sns { margin-top: 48px; }
  .p-bnrdl__heading { font-size: 16px; }

  .p-bnrdl__action { margin-top: 20px; }

  .p-bnrdl__block--banner .p-bnrdl__heading { margin-bottom: 24px; }
  /* 縦並びなのでバナー名は折り返しにくいが、狭い幅では文字を少し小さくする */
  .p-bnrdl__banner .p-bnrdl__link { font-size: 15px; }
  .p-bnrdl__banners { gap: 32px; }
  .p-bnrdl__banner { gap: 12px; }
  .p-bnrdl__links { gap: 10px; }

  .p-bnrdl__back { margin-top: 48px; }
  .p-bnrdl__block--sns .p-bnrdl__heading { margin-bottom: 28px; }
  .p-bnrdl__sns li + li { margin-top: 20px; }
  .p-bnrdl__link--dl { gap: 8px; font-size: 15px; }
}

/* --- 〜560px：ロゴ・バナーを1列に ---------------------------------------------
   767px で1列にすると、箱が画面幅いっぱい（767px で 735 × 698）に一気に大きくなってしまうので、
   561〜767px は2列のまま比率を保って縮め、560px 以下で1列にする。
   1列のときの箱は PC と同じ 400px を上限に中央へ置く */
@media (max-width: 560px) {
  .p-bnrdl__logos {
    grid-template-columns: minmax(0, 400px);
    justify-content: center;
    row-gap: 40px;
  }
}

} /* @layer app */

/* ============================================================================
   11. お申込みパネル（01〜03）の中のご利用期間（.c-panel__period）
   ---------------------------------------------------------------------------
   ・組み方は「5-7. ご利用期間」の .p-period__body と同じクラスを使い、パネルの中だけ小さくする
   ・.c-panel__period を先頭に付けて詳細度を上げているので、ご利用期間の各ブレイクポイント
     （990px の見出し 22px、767px の日付 25px など）は効かず、ここの指定が優先される
   ・01・03 はボタン（.c-panel__action）の上、02 は OTA バナーの上に置いている（2026-09-17 に長崎から移植）
   ========================================================================= */
.c-panel__period { margin-top: 30px; }
.c-panel__period .p-period__table {
  width: 100%;
  max-width: none;
  margin: 0;
}
.c-panel__period .p-period__row {
  min-height: 64px;
  border-width: 2px;
}
.c-panel__period .p-period__row + .p-period__row { margin-top: 12px; }
.c-panel__period .p-period__key {
  width: 200px;
  margin: -2px 0 -2px -2px;   /* 枠線（2px）とツラを合わせる */
  font-size: 20px;
}
/* 日付は「2026年12月25日(金)」で1かたまり。曜日だけが次の行に落ちないようにする */
.c-panel__period .p-period__date { white-space: nowrap; }
.c-panel__period .p-period__val {
  padding: 10px 16px 10px 28px;
  /* 上の「ご利用期間」（24px）より少しだけ小さく。年は .84em、曜日は .75em、
     チェックアウトの注記は .63em で一緒に小さくなる（2026-09-17 に 18 → 22px） */
  font-size: 22px;
}
.c-panel__period .p-period__notes {
  width: auto;
  max-width: none;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 16px;
}
.c-panel__period .p-period__mark { width: 30px; }

/* --- 〜820px：日付の折り返しが増えてくるので少し落とす ---------------------
   （821px 以上は 22px / 20px） */
@media (max-width: 820px) {
  .c-panel__period .p-period__val { font-size: 19px; }
  .c-panel__period .p-period__key { font-size: 18px; }
}

/* --- 541〜580px：日付の縦組みはパネル内だけ後ろ倒しにする -------------------
   「5-7. ご利用期間」では 580px で日付を縦組み（年が上・日付と曜日が下）にしているが、
   パネル内は文字が小さいぶんまだ横に収まるので、540px まではそのまま1行で見せる */
@media (max-width: 580px) and (min-width: 541px) {
  .c-panel__period .p-period__val {
    display: block;
    text-align: left;
  }
  .c-panel__period .p-period__date {
    display: inline;
    text-align: left;
  }
  .c-panel__period .p-period__year { display: inline; }
  .c-panel__period .p-period__note { flex-basis: auto; }
}

/* --- 〜767px：縦積み（見出しセルを上、日付を下）で、さらに小さく ----------- */
@media (max-width: 767px) {
  .c-panel__period { margin-top: 24px; }
  .c-panel__period .p-period__row { min-height: 0; }
  .c-panel__period .p-period__key {
    width: auto;
    margin: -2px -2px 0;
    padding: 6px 0;
    font-size: 15px;
  }
  .c-panel__period .p-period__val {
    padding: 10px 12px;
    font-size: 22px;          /* 2026-09-17：17px では小さかったので上げる（500px 以下は下で戻す） */
  }
  .c-panel__period .p-period__notes { font-size: 11px; line-height: 15px; }
  .c-panel__period .p-period__mark { width: 26px; }
}


/* 宿泊施設へのご予約・お問い合わせ */
.p-stay-notice__title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.p-stay-notice__list li {
  position: relative;
  padding-left: 1em;
}

.p-stay-notice__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}