@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 {
  /* --- カラー ------------------------------------------------------------ */
  --c-pink:        #F7668D;  /* メインピンク（見出し・ボタン・帯） */
  --c-pink-start:  #FF757A;  /* グラデーション開始色（左） */
  --c-pink-end:    #F7668D;  /* グラデーション終了色（右） */
  --c-pink-soft:   #FDE2E7;  /* 選択カード・番号タグの背景 */
  --c-pink-pale:   #FFF9FB;  /* セクション背景（淡いピンク） */
  --c-pink-tint:   #FFF1F4;  /* 「例えば」ボックスの本文背景 */
  --c-brown:       #5D4038;  /* 見出し・ナビ文字の濃茶 */
  --c-text:        #333333;  /* 本文 */
  --c-cream:       #FEFEF6;  /* CASE カードの背景 */
  --c-gray-bg:     #F8F8F8;  /* 割引内容ボックスの背景 */
  --c-gray-btn:    #C9C9C9;  /* 非アクティブ状態のボタン背景 */
  /* --- 事業者様向けページ（business/）で使う色 --------------------------- */
  --c-crimson:     #CD3C63;  /* 事業者ページのヘッダー帯 */
  --c-cream-btn:   #FFF7DA;  /* 事業者ページのヘッダーボタン */
  --c-cream-band:  #FDFCF0;  /* ページタイトルの帯 */
  --c-cream-box:   #FDF9EE;  /* 募集についてのボックス */
  --c-gray-block:  #F7F5F6;  /* 対象事業者のブロック */
  --c-gray-tab:    #E3E1E2;  /* 対象事業者のタブ */
  --c-border:      #D9D9D9;  /* 罫線・プレースホルダー */
  --c-red:         #D63216;  /* 金額の赤 */
  --c-red-tel:     #D32F2E;  /* 電話番号の赤 */
  --c-yellow:      #FDCC43;  /* マーカー・アイコンの黄 */
  --c-white:       #FFFFFF;

  /* --- グラデーション ---------------------------------------------------- */
  --gradient-pink: linear-gradient(90deg, var(--c-pink-start) 0%, var(--c-pink-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; }

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; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

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

/* --- ヘッダー ------------------------------------------------------------- */
.l-header {
  position: relative;
  z-index: 100;
  height: 75px;
  background: var(--gradient-pink);
}
/* 高さ合わせ用の余白は、スクロール追従のときだけ使う */
.l-header__spacer { display: none; }

/* コンテンツ幅の箱。ロゴ＋ナビ＋ボタンを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__logo { display: block; flex: none; }
.l-header__logo img { display: block; width: 75px; height: auto; }

/* --- スクロール追従（全幅で有効） ---------------------------------------- */
.l-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 出るとき：少しだけ（10px）上から下りながらフェードイン。
     参考サイト（鹿児島）の fadeInDown と同じ値・イージング
     （@keyframes fadeInDown … translateY(-10px)/opacity 0 → 0/1、0.3s ease-in-out） */
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
.l-header.is-fixed.is-shown {
  transform: none;
  opacity: 1;
}
/* 追従に切り替わる最初の1回だけ、隠れた状態をアニメーションなしで作るために使う
   （これが無いと「フェードアウト → すぐフェードイン」になって、出てくる動きが見えない） */
.l-header.is-instant { transition: none; }
/* fixed になって流れから抜けたぶんの高さを埋める（本文が 75px 跳ねるのを防ぐ） */
.l-header.is-fixed + .l-header__spacer { display: block; height: 75px; }
.l-header__menu {
  display: flex;
  align-items: center;
  gap: 48px;
}
/* ハンバーガーと暗幕は SP でだけ使う */
.c-hamburger,
.l-header__overlay { display: none; }
.l-header__list {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-white);
}
/* ナビ項目の区切り「｜」。要素間だけに入るよう ::before で表現 */
.l-header__list li + li::before {
  content: "｜";
  opacity: .9;
}
.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: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-pink);
}
.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;
}
/* 見出しの2行目に入れる補足（「(一般の利用者向け)」など）。見出しより少し小さく（32px → 24px / SP 24px → 18px） */
.c-heading__sub { font-size: .75em; }
/* 見出しの先頭に桶のイラストを添えるバリエーション。
   .c-heading でも .p-faq__title でも、このクラスを足すだけで付く。
   サイズは em 指定なので、見出しの文字サイズに合わせて自動で縮む
   （32px の見出しで 52.5 × 42px ＝ icon-tub.png の半分＝2倍解像度の原寸） */
/* 2026-09-14 の指示で桶のイラストを非表示（削除せずコメントアウト。戻すときはこのコメントを外す）
.c-heading--tub::before {
  content: "";
  display: inline-block;
  width: 1.64em;
  height: 1.3125em;
  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-pink);
  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-pink）
   ＊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-pink);
  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; }

/* ============================================================================
   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;
  object-position: center;
  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（1426×1127）を
   ヒーローに対する％で置いているので、幅が変わっても位置関係が崩れない。
   1400px で 左 102px / 上 198px / 幅 713px（＝原寸の 1/2）になる値 */
.p-hero__thumbs {
  position: absolute;
  /* 左位置：1400px 以上は 102px（デザイン位置）。1400 → 1260px で 0 まで少しずつ寄せ、
     1260px 以下はヒーローの左端に張り付く */
  left: clamp(0px, calc(72.86vw - 918px), 102px);
  /* 縦位置はヒーローの下端を基準にする。上からの％だと、ヒーローの高さが
     min-height で止まる幅（821px 以下）から下端との隙間が広がっていき、
     767px で下ぞろえに切り替わるときに大きく落ちて見えるため。
     1400px で 21px はみ出す位置（デザインどおり）→ 767px で下ぞろえ（0）まで少しずつ上げる */
  top: auto;
  bottom: clamp(-21px, calc(25.45px - 3.318vw), 0px);
  /* 幅：1400px 以上は原寸（713px ＝ PNG の 1/2）で固定。
     ％のままだと画面が広いほど縦に伸びて、ヒーロー下端で切れてしまう */
  width: min(713px, 50.9%);
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* 装飾の波形シェイプ。右上・左下を別々に角へ固定するので、
   ウィンドウ幅が変わってもどちらも欠けない。
   幅はヒーローに対する％指定（デザイン実測：右上 605/1400、左下 981/1400）で、
   高さは SVG の縦横比に従って自動で決まる。 */
.p-hero__shape {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* min() の第1項＝デザイン原寸、第2項＝ヒーロー幅に対する比率。
   1400px 以上では原寸で固定され、狭くなるときだけ比率側が効いて縮む。 */
.p-hero__shape--top {
  top: 0;
  right: 0;
  width: min(605px, 43.22%);
}
.p-hero__shape--bottom {
  left: 0;
  bottom: 0;
  width: min(981px, 70.07%);
}
.p-hero__logo {
  position: absolute;
  /* ヒーローの上下左右の中央。％の決め打ちだと縦横比が変わったときにずれるため */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 段差なしで少しずつ縮める。2本の直線を max() でつないでいる
       ・1400px 以上 … 300px（min の 300px で頭打ち）
       ・1400 → 1260px … 300 → 270px（21.43vw ＝ 300/1400）
       ・1260 → 375px  … 270 → 185px（9.6vw + 149px）
     2本はちょうど 1260px で交わるので、切り替わりでも段差が出ない */
  width: min(300px, max(21.43vw, calc(9.6vw + 149px)));
}
/* 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; }

/* --- 5-2. お知らせ（実測 news.png / コンテンツ幅 922px） ---------------- */
.p-news {
  padding: 73px 0 65px;
  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-pink);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* 記事が増えたらスクロールに切り替わる（2件までは高さが足りるのでスクロールしない）。
   高さを変えたいときは --news-list-height を上書きする */
.p-news__list {
  /* 上下のパディングは記事側に持たせ、この要素の上端＝1件目のテキスト開始位置に揃える。
     こうしないとスクロールバーの頭だけがテキストより上から始まってしまう */
  margin-top: 23px;
  --news-list-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-pink) var(--c-pink-tint);
}
/* scrollbar-color 非対応（古い Safari など）向けのフォールバック。
   新しいブラウザは上の scrollbar-width / scrollbar-color が優先される */
.p-news__list::-webkit-scrollbar { width: 8px; }
.p-news__list::-webkit-scrollbar-track {
  background: var(--c-pink-tint);
  border-radius: 4px;
}
.p-news__list::-webkit-scrollbar-thumb {
  background: var(--c-pink);
  border-radius: 4px;
}
.p-news__list::-webkit-scrollbar-thumb:hover { background: var(--c-pink-start); }
/* スクロールが出るときだけ、バーと本文（点線）の間に余白を作る。
   常に余白を入れると、記事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 22px 11px;
}
/* 記事の区切りは 1px の点線。上の余白は2件目以降だけに付ける */
.p-news__item + .p-news__item {
  padding-top: 22px;
  border-top: 1px dotted var(--c-pink);
}
.p-news__date {
  color: var(--c-pink);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}
.p-news__text {
  font-size: 14px;
  line-height: 22px;
}
/* お知らせ本文中のリンク（サイトカラー＋下線。ホバーで下線を消す。CSV 版と同じ見た目） */
.p-news__text a {
  color: var(--c-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.p-news__text a:hover { opacity: 1; text-decoration: none; }
.p-news__more {
  margin-top: 29px;         /* 参考サイト実測：リスト下端 → リンク上端 */
  text-align: right;
  color: var(--c-pink);
  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-pink); }

/* バナーが無い場合。#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: 55px 0 30px;
  background: var(--c-pink-pale);
}
.p-welcome__title {
  padding-left: 34px;         /* 実測 見出し左端 x:234 */
  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: 205px;
  margin-top: -37px;
}

/* --- 5-4. 九州ふっこう応援割とは（実測 y:1105〜2224） --------------------- */
.p-about {
  padding: 58px 0 61px;
  background: var(--c-white);
}
.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: 42px;                  /* 円の中心間隔がデザイン実測（約297px）になる値 */
  margin-top: 61px;
}
.p-steps__item {
  width: 172px;
  text-align: center;
}
/* ステップ間の矢印。margin-top はデザイン実測（円の中心と同じ高さ）に合わせた値 */
.p-steps__arrow {
  width: 35px;
  margin-top: 103px;
  flex: none;
}
.p-steps__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 61px;           /* 実測 ラベル領域 y:1424〜1485 */
  color: var(--c-brown);
}
/* 「まずは」「そして」とハートのまとまり。
   前置きの文字を絶対配置にすることで、まとまりの高さ＝ハートの高さになり、
   ハートがステップ3と同じ位置（見出しに対して天地中央）に揃う。
   （ステップ3 は前置きの文字が無いので、ハートだけが直接 label の子になる） */
.p-steps__mark {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}
.p-steps__lead-word {         /* 「まずは」「そして」の小さい文字。ハートの真上に置く */
  position: absolute;
  bottom: 100%;
  left: 45%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-6deg);   /* 少しだけ左に傾ける */
}
.p-steps__heart { flex: none; width: 34px; }   /* 黄色いハート（透過 PNG） */
.p-steps__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
/* 円は素材（step-icon-0*.png）に含まれている。実測 φ128 */
.p-steps__icon { width: 128px; }
.p-steps__text { margin-top: 5px; line-height: 26px; }

/* --- 5-5. 割引内容（実測 y:1733〜2163 / 1000×430） ------------------------ */
.p-discount {
  margin-top: 63px;
  padding: 39px 30px 49px;    /* 左右そろえて 30px */
  border-radius: var(--radius-lg);
  background: var(--c-gray-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: 29px;
}

/* CASE カード（4枚で内幅いっぱい／間隔 10px。1000px 時は 227.5px） */
.c-case {
  position: relative;
  width: calc((100% - 30px) / 4);
  flex: none;
  container-type: inline-size;   /* 中身をカード幅基準（cqw）で縮めるため */
  padding: 30px 8px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-cream);
  text-align: center;
  overflow: hidden;
}
.c-case + .c-case { margin-left: 10px; }
/* 左上の「CASE」ラベル（原寸 69×27 / 15px）。カードが狭くなったら一緒に縮める */
.c-case__tag {
  position: absolute;
  top: 0;
  left: 0;
  width: min(69px, 32.5cqw);
  height: min(27px, 12.7cqw);
  line-height: min(27px, 12.7cqw);
  border-bottom-right-radius: var(--radius-md);
  background: var(--c-pink);
  color: var(--c-white);
  font-size: min(15px, 7.08cqw);
  font-weight: 700;
  letter-spacing: .04em;
}
/* 見出しは「商品名（.c-case__title-main）」＋「条件（.c-case__title-sub）」の2行。
   930px あたりから商品名（最長 9文字「交通付宿泊旅行商品」）がカードに収まらなくなるので、
   画面幅に対して直線的に縮める（930px:20px → 768px:14.7px）。
   条件の行は em 指定にして、商品名と一緒に縮む */
.c-case__title {
  font-size: min(20px, calc(2.7vw - 6px));
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-brown);
  white-space: nowrap;
}
.c-case__title-sub { font-size: .75em; }   /* 20px に対して 15px */
.c-case__small { font-size: .75em; }
/* 見出しは2行ぶんの高さを確保して、文字はその中で上下中央に置く。
   狭い幅で商品名が折り返しても、4枚の円と金額の高さがそろうようにするため。
   ※ flex の子は「行」単位になるので、商品名は必ず .c-case__title-main で1つに囲む */
.c-case__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.45em;          /* 商品名 1.4em ＋ 条件 1.05em（.75em × 1.4） */
}
.c-case__title-sub,
.c-case__title-main { display: block; }
/* 黄色い円（デザイン原寸 φ140）。イラストと「50%OFF」はこの円を基準に絶対配置する。
   カードが狭くなると円（140px）とイラスト（最大 184px）がはみ出すので、円の幅を基準に
   中身をまとめて縮める。イラストは円の 131.4%（184/140）なので、円はカード内幅の 76% までに抑える */
.c-case__visual {
  position: relative;
  container-type: inline-size;   /* 中の cqw が円の幅基準になる */
  width: min(140px, 76%);
  height: auto;
  aspect-ratio: 1;
  margin: 8px auto 0;
  border-radius: 50%;
  background: var(--c-yellow);
}
/* イラストは円の上寄りに重ねる（実測 中心 = 円の上端 +48px）。
   円からはみ出す幅だが、カードの内側には収まる */
.c-case__illust {
  position: absolute;
  top: 34.3cqw;              /* 48 / 140 */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1cqw;               /* 3 / 140 */
  width: max-content;        /* 円幅に縮められないようにする */
}
/* 画像は円の幅に対する比率（デザイン原寸 ÷ 140）で指定する。
   max-content 任せだと、1枚しか無いマップ画像が縮まず「50%OFF」に重なってしまう */
.c-case__illust img { flex: none; height: auto; max-width: none; }
.c-case__illust img[src$="illust-bed.png"]   { width: 50cqw; }    /*  70 / 140 */
.c-case__illust img[src$="illust-train.png"] { width: 57.1cqw; }  /*  80 / 140 */
.c-case__illust img[src$="illust-map.png"]   { width: 72.9cqw; }  /* 102 / 140 */
.c-case__plus {
  font-size: 20cqw;          /* 28 / 140 */
  font-weight: 900;
  line-height: 1;
  color: var(--c-brown);
}
/* 円の中の白抜き文字（実測 ベースライン = 円の下端 −30px） */
.c-case__off {
  position: absolute;
  left: 50%;
  bottom: 17.9cqw;           /* 25 / 140 */
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  color: var(--c-white);
  line-height: 1;
  white-space: nowrap;
}
.c-case__off-num  { font-size: 27.1cqw; font-weight: 900; }  /* 38 / 140 */
.c-case__off-unit { font-size: 13.6cqw; font-weight: 900; }  /* 19 / 140 */
/* 「50%OFF」の下の小さな「※1」（周遊のカードだけ）。
   円が小さくなると「50%OFF」との間が詰まるので、下寄りに置く */
.c-case__off-note {
  position: absolute;
  left: 50%;
  bottom: 5.7cqw;            /* 8 / 140 */
  transform: translateX(-50%);
  color: var(--c-text);
  font-size: max(9px, 7.9cqw);  /* 11 / 140 */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
/* 円と金額の間の「1旅行1名につき」（カンプどおり 13px）。
   8文字なので、いちばん狭い 768px の4カラム（カード内幅 136px）でも 13px のまま収まる */
.c-case__per {
  margin-top: 12px;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
/* 「最大」は金額の天地中央、「円」は金額のベースラインに揃える（デザイン実測どおり） */
.c-case__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 4px;       /* 上に「1旅行1名につき」が入るぶん詰める */
  color: var(--c-red);
  /* 原寸 40px。910px あたりから「最大 35,000円」がカードに収まらなくなるので、
     画面幅に対して直線的に縮める（910px:40px → 768px:31.7px）。
     ラベルと単位は em にして一緒に縮む */
  font-size: min(40px, calc(5.88vw - 13.5px));
  font-weight: 700;
  line-height: 1;
}
.c-case__price-label {
  align-self: center;
  margin-right: 5px;
  color: var(--c-text);
  font-size: .45em;          /* 18 / 40 */
}
.c-case__price-num   { font-size: 1em; }
.c-case__price-unit  { font-size: .5em; }

/* カードの下の注記「※1 熊本県または鹿児島県の…」。折り返したときは ※1 のぶん字下げする */
.p-discount__note {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.6;
}
.p-discount__note-mark {
  flex: none;
  font-size: 12px;
  line-height: calc(14px * 1.6);
}

/* 「例えば」ボックス。CASE が4枚になったので、初期状態から次の行へ段落ちさせて横幅いっぱいにする
   （2026-09-16 の改修。これまでは 1080px 以下だけこの形だった）。
   見出しと本文の関係（上下）は変えず、見出しの改行だけ解除して1行にする */
.c-example {
  width: 100%;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--c-pink-tint);
  overflow: hidden;
  text-align: center;
}
.c-example__head br { display: none; }
.c-example__head {            /* 実測 h:65 */
  padding: 9px 0;
  background: var(--c-pink);
  color: var(--c-white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
/* 金額の流れは横並び（入りきらないときは折り返す） */
.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; }

/* --- 5-6. セクション背景 -------------------------------------------------- */
.p-pale  { background: var(--c-pink-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: 58px auto 0;
}
.p-period__row {
  display: flex;
  align-items: stretch;
  min-height: 95px;
  border: 3px solid var(--c-pink);
  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-pink);
  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 {
  margin-left: 14px;
  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: 12px 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 127px; }

/* 選択カード（実測 310×270 / 間隔 35px）
   3枚を subgrid で同じ行に乗せているので、見出しの行数が違っても
   番号・見出し・イラスト・丸チェブロンの縦位置が3枚でそろう。
   行は 番号 / 見出し / イラスト / 余白(1fr) / 丸チェブロン の5つ */
.p-apply__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0 35px;                /* 行の隙間は 0（各行の間隔は要素側の margin で取る） */
  min-height: 270px;          /* デザイン実測のカード高。余りは4行目（1fr）が吸う */
  margin-top: 67px;
}
.c-choice {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}
.c-choice__link {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  justify-items: center;
  align-items: start;
  padding: 26px 16px 23px;
  /* 右下だけ大きく落とした角丸（デザイン準拠） */
  border-radius: var(--radius-lg) var(--radius-lg) 60px var(--radius-lg);
  background: var(--c-pink-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: 40px;
  font-weight: 700;
  line-height: 1;
}
.c-choice__title {
  margin-top: 5px;
  /* 「〇〇で／申し込む」の改行は 1080px 以下でだけ効かせる */
  color: var(--c-brown);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.c-choice__title br { display: none; }
.c-choice__icon { margin-top: 21px; }
.c-choice__chevron {          /* 下向きの丸チェブロン（実測 φ25） */
  position: relative;
  grid-row: 5;                /* 余白の行（1fr）の下＝カードの最下段 */
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--c-brown);
}
.c-choice__chevron::before {
  content: "";
  position: absolute;
  top: 43%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2.4px solid var(--c-pink-soft);
  border-bottom: 2.4px solid var(--c-pink-soft);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 説明パネル 01〜03（実測 幅 1000 / パネル間 46px） */
.c-panel {
  position: relative;
  margin-top: 64px;
  padding: 0 56px 39px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  overflow: hidden;
  scroll-margin-top: 24px;    /* アンカー移動時に上を少し空ける */
}
.c-panel + .c-panel { margin-top: 46px; }
.c-panel__tag {               /* 左上の番号タグ（実測 121×110） */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 110px;
  border-bottom-right-radius: 55px;
  background: var(--c-pink-soft);
  color: var(--c-pink);
  font-size: 40px;
  font-weight: 700;
}
.c-panel__title {
  padding-top: 32px;
  color: var(--c-pink);
  font-size: var(--fz-heading);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* イラストは絶対配置。本文の高さに影響させず、本文ブロックの中央に置く */
.c-panel__body {
  position: relative;
  /* 番号タグ（高さ110px）の下端から本文まで約50px空ける */
  margin-top: 78px;
  min-height: 150px;
}
.c-panel__text {
  /* 実測の折り返し幅 624px ＋ イラストとの隙間 24px。
     padding で隙間を持たせているので、幅が縮んでもイラストにくっつかない */
  width: 648px;
  max-width: 100%;
  padding-right: 24px;
  line-height: 26px;
}
.c-panel__illust {
  position: absolute;
  top: 50%;
  right: var(--illust-right, 0px);
  transform: translateY(-50%);
}
/* イラストごとに右端の余白が違うため、パネル単位で実測値を指定する。
   本文の折り返し幅もこの値ぶん狭めるので、変数で持たせている */
#apply01 { --illust-right: 17px; }
#apply02 { --illust-right: 39px; }
#apply03 { --illust-right: 6px; }
.c-panel__action { margin-top: 34px; text-align: center; }

/* OTA バナー一覧（実測 178×70 / 間隔 9px / 5列） */
.p-ota {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  /* パネルの左右パディング（56px）より広いので、負のマージンではみ出させる（実測 x:234〜1163） */
  margin: 55px -22px 0;
}
.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; }
.p-ota img { width: 100%; }

/* --- 5-9. 関連サイトバナー（実測 410 × 160 / 間隔 51px） ------------------ */
/* 下の余白は FAQ 側の padding-top(123px) と合わせて、
   バナー下端から FAQ 見出しまで約235px（添付デザインの実測）になるようにしている */
.p-banner { padding: 91px 0 112px; }
/* 幅を「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枚目以降は左から折り返す（上の指定のまま）。
   幅も 410px のまま縮めない（2列用の「(100% − 間隔) ÷ 2」で縮めると、
   1列になる幅で急に大きくなって見えるため）。入らない幅だけ 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） ------------------------------------------- */
.p-faq { padding: 123px 0 110px; }
.p-faq__title {
  color: var(--c-brown);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
}
.p-faq__action { margin-top: 54px; text-align: center; }
/* FAQ の見出しは、狭い画面ではお問い合わせの見出しと同じ大きさにする
   （事業者ページの副題「(宿泊事業者、旅行事業者・OTA向け)」が2行にならないように。トップも合わせる） */
@media (max-width: 767px) {
  .p-faq__title { font-size: 24px; }
}

/* --- 5-12. お問い合わせ（実測 y:5836〜6323） ----------------------------- */
.p-contact {
  padding: 88px 0 80px;
  background: var(--c-pink-pale);
}
/* ロゴは絶対配置。定義リストの位置（実測）をずらさないようにするため */
.p-contact__body {
  position: relative;
  margin-top: 33px;
}
/* ロゴの位置（実測）… 左はコンテンツ左端から 52px。
   縦は「お問い合わせ先」の行に頭をそろえて、そこから下に伸びる形にする。
   （見出しが「利用者用コールセンター／(一般の利用者向け)」の2行になり、
     上下中央（body の中央から 53px 上）のままだと見出しと重なるため。長崎と同じ対応） */
.p-contact__logo {
  position: absolute;
  left: 52px;
  top: -20px;
  width: 245px;
}
/* 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; }
  /* イラストぶん（200px）だけ空けて折り返す。1400px と同じ 624px は保ったまま、
     入らなくなってから縮む（width: auto にすると 1400px 境界で急に広がってしまう） */
  .c-panel__text { max-width: calc(100% - 200px); }
  /* ロゴは 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：割引内容は CASE 3枚＋「例えば」を段落ちさせる ---------------
   CASE を3カラムで並べ、「例えば」ボックスはその下に横幅いっぱいで置く。
   横長になるぶん、中の金額の流れも縦積みから横並びに変える */
@media (max-width: 1080px) {
  /* 選択カードは「〇〇で／申し込む」で改行し、カード間の隙間を詰める */
  .c-choice__title { text-align: center; }
  .c-choice__title br { display: inline; }
  .p-apply__cards { gap: 0 20px; }

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

/* --- 〜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); }
}

/* --- 〜820px：選択カードの見出しを少し小さく ------------------------------ */
@media (max-width: 820px) {
  .c-choice__title { font-size: 16px; }
}

/* --- 〜690px：選択カードの見出しをさらに小さく ---------------------------- */
@media (max-width: 690px) {
  .c-choice__title { font-size: 12px; }
}

/* --- 〜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カラムにする -------------------------------------- */
@media (max-width: 767px) {
  /* CASE 4枚を 2 × 2 に並べ、「例えば」はその下に横幅いっぱいで置く（3行目）。
     間隔は margin ではなく gap で取る
     （margin のままだと2行目の先頭にも左マージンが残って幅が合わない） */
  .p-discount__grid { gap: 12px 10px; }
  .c-case + .c-case { margin-left: 0; }
  .c-case { width: calc((100% - 10px) / 2); }

  /* 1枚が 248px（571px 時）〜346px と広くなるので、見出しと金額は原寸に戻す */
  .c-case__title {
    font-size: 20px;
    white-space: normal;   /* 入りきらない幅では折り返す（入る幅では1行のまま） */
  }
  .c-case__price { font-size: 40px; }
}

/* --- 〜540px：割引内容を1カラムにし、CASE カードの中を横組みにする ---------
   カード内は
     1行目 … 左上の「CASE」ラベルの右に見出し（商品名と条件を1行で）
     2行目 … 左：1旅行1名につき ＋ 最大◯◯円 ／ 右：50%OFF の円
   の形。HTML の並びは 見出し → イラスト → 1旅行1名につき → 金額 なので、
   grid で行・列を指定して入れ替えている */
@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:109px。円はこの 76% ＝ 114px → 83px） */
    grid-template-columns: minmax(0, 1fr) min(150px, 29vw);
    /* 行：1=見出し（2列ぶち抜き） / 2=1旅行1名につき / 3=金額 */
    grid-template-rows: auto auto auto;
    column-gap: 10px;
  }
  /* 「CASE」ラベルは SP では小さくする（46 × 27px / 12px。PC はカンプどおり 69 × 27px / 15px） */
  .c-case__tag {
    width: min(46px, 32.5cqw);
    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.9px（「周遊型旅行商品(宿泊地が2県以上)」が1行で収まる上限） */
    font-size: min(22px, calc(7.4vw - 9.9px));
  }
  /* 商品名と条件は改行せず続けて並べる。
     半角の「(」が商品名の最後の文字に詰まって見えるので、少しだけ隙間を入れる */
  .c-case__title-main,
  .c-case__title-sub { display: inline; }
  .c-case__title-sub { margin-left: .25em; }

  /* 「1旅行1名につき」と金額は左の列に縦に並べる。
     右の円が2行ぶんの高さを決めるので、余った高さがこの2行に配られて間が開いてしまう。
     注記は行の下、金額は行の上に寄せて、2つをくっつけたまま円に対して天地中央にする */
  .c-case__per {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-top: 10px;
    text-align: left;
  }
  /* 金額は左の列に収める（基準サイズ 540px:40px → 375px:27.6px。
     数字はこの 1.2倍なので 48px → 33px） */
  .c-case__price {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
    margin-top: 2px;
    font-size: min(40px, calc(9.23vw - 7px));
  }
  /* 数字だけ「最大」「円」に対して大きく見せる（PC は 1em のまま） */
  .c-case__price-num { font-size: 1.2em; }
  /* 円は右の列。「1旅行1名につき」と金額の2行ぶんの高さに対して上下中央。
     見出しに近すぎるので、上に少し隙間を入れる */
  .c-case__visual {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    width: 76%;
    margin: 5px 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：まとまりがコンテンツ幅に入らなくなるので、もう一段詰める ---
   ロゴ 75 ＋ 間隔 24 ＋ ナビ 663 = 762px は 819px 以下では入らない。
   ロゴを消さずに済むよう、ロゴ・間隔・文字をまとめて小さくする */
@media (max-width: 819px) and (min-width: 768px) {
  .l-header__inner { gap: 12px; }
  .l-header__logo img { width: 60px; }
  .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） */
}

/* --- 〜860px：見出しが番号タグに重なるので左寄せ＋タグぶんの余白
       ／ 関連サイトバナーと FAQ の間隔を詰める --- */
@media (max-width: 860px) {
  .c-panel__title {
    padding-left: 100px;
    text-align: left;
  }
  /* 1400px では 112 + 123 = 235px。同じ比率のまま 160px まで詰める */
  .p-banner { padding-bottom: 76px; }
  .p-faq { padding-top: 84px; }
  /* 旅しようは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 に低くする
     （追従で fixed になったときの隙間埋めも同じ高さにそろえる） */
  .l-header { height: 60px; }
  .l-header.is-fixed + .l-header__spacer { height: 60px; }
  .l-header__inner {
    justify-content: space-between;   /* 左ロゴ／右ハンバーガー */
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding: 0 16px;   /* 左右とも同じ余白（右はハンバーガー、左はロゴ） */
  }
  /* 帯が 75 → 60px になったので、ロゴも収まる大きさに下げる
     （56px だと高さ 55px で帯との余白が上下 3px しか残らない。48px なら約 6px） */
  .l-header__logo img { width: 48px; }

  /* ドロワー本体 */
  .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 .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); }

  /* --- スクロール追従（メインビジュアルを過ぎてから開始） ---------------
     ヘッダーの色はピンクのまま、ハンバーガーも白のまま。
     追従に切り替わったときだけ左端にロゴを出す。
     is-fixed で position: fixed（＋上に隠す）、1フレーム後に is-shown で降りてくる */
  /* ヒーロー */
  /* 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; }
  /* 本文は左揃え。縦積み中央寄せだと行の短いぶん左に隙間ができるので幅いっぱいにする */
  .p-welcome__text { width: 100%; 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; }
  .c-choice__link { padding: 22px 16px; border-radius: var(--radius-lg) var(--radius-lg) 40px var(--radius-lg); }
  .c-choice__title { text-align: center; }

  /* イラストの幅。625px 以下は画面幅に合わせて縮む（375px で 90px）。
     右端の逃がし（17/6/39px）は SP では効かせず、3枚とも隙間をそろえる */
  .c-panel { --illust-w: min(150px, 24vw); margin-top: 32px; padding: 0 20px 28px; }
  #apply01, #apply02, #apply03 { --illust-right: 0px; }
  /* 02（OTA）のスマホイラストは原寸が 113px と細いので、150px まで拡大せず原寸を上限にする
     （縮み始める幅が 01 / 03 とそろうよう、vw の係数も同じ比率にしている） */
  #apply02 { --illust-w: min(113px, 18vw); }
  .c-panel + .c-panel { margin-top: 24px; }
  .c-panel__tag { width: 84px; height: 76px; border-bottom-right-radius: 32px; font-size: 30px; }
  .c-panel__title { padding-top: 22px; }
  .c-panel__body { margin-top: 35px; min-height: 0; }
  /* イラストぶんを空けて折り返す（padding-right の 24px がイラストとの隙間） */
  .c-panel__text { width: auto; max-width: calc(100% - var(--illust-w)); text-align: left; }
  .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% を上限に縮む */
  .c-panel__action .c-btn { width: min(325px, 100%); min-height: 71px; font-size: 24px; }

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

  /* 関連サイトバナー */
  .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; }
}

/* --- 〜649px：3ステップを「左 → 右 → 左」のジグザグに並べる ---------------
   1つ目の右下に2つ目、2つ目の左下に3つ目。矢印はその対角線の途中に置く。
   HTML の並びは item / arrow / item / arrow / item なので :nth-child で配置する */
@media (max-width: 649px) {
  .p-steps {
    display: grid;
    /* minmax(0, 1fr) にして、中身の最小幅で列が広がらないようにする */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 中央に矢印を通すための隙間。広いときは矢印の外接幅（約 46px）ぶんを確保し、
       狭いときは要素側の幅を優先して詰める（375px で 8px） */
    column-gap: clamp(8px, 17.5vw - 58px, 56px);
    /* 1段ぶんの下げ幅。小さくするほどジグザグの傾きがゆるくなる（＝縦に詰まる）。
       これ以上小さくすると、同じ左列にある 1つ目と 3つ目が縦に重なる */
    grid-template-rows: 160px 160px auto;
    align-items: start;
    justify-items: center;
    margin-top: 36px;
  }
  .p-steps__item { width: 100%; max-width: 260px; }
  /* 縦積みで余白ができるぶん、イラストを大きく見せる。
     500px 以下は矢印と近くなって窮屈になるので、そこから少しずつ小さくする
     （500px で 180px → 375px で 120px。100% は要素からはみ出さないための保険） */
  .p-steps__icon { width: min(180px, 100%, calc(48vw - 60px)); }
  /* 見出しも 470px 以下で少しずつ小さくする（470px:20px → 375px:17px） */
  .p-steps__title { font-size: min(20px, calc(3.16vw + 5.16px)); }
  .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列の間（中央の隙間）に、上下とも同じ横位置で並べる。
     素材は右向き（→）なので、30deg で右下、150deg で左下を向く */
  /* 矢印の縦位置：2本の中央が、2つ目の要素（「〇〇へ旅行」）の天地中央に来るようにする。
     行の下端を基準にしているので、そこから下へずらす量を負のマージンで指定する。
     ずらす量は 2つ目の要素の高さの半分で決まる（高さ 249px のとき 67px）。
     249px は 460px 以上での高さで、そこから狭くなるほど要素も低くなるので、
     max() で 460px 以上を -67px に固定しつつ、狭い側は 1次式で追従させている */
  .p-steps__arrow {
    width: 35px;
    margin: 0;
    /* 2本の中央を「〇〇へ旅行」の天地中央に合わせるための基準ずらし量。
       ずらす量は2つ目の要素の高さの半分で決まる（高さ 249px のとき 67px）。
       500px 以上は高さが一定なので -67px 固定、それより狭いときは
       イラストが小さくなって要素も低くなるので 1次式で追従させる */
    --arrow-shift: max(-67px, calc(53px - 24vw));
    /* 2本の間隔を広げるぶん。上を上へ、下を下へ同じだけ動かすので中央は変わらない
       （間隔 = 段の下げ幅 160px ＋ この値 × 2）。
       狭い幅ほど左右の要素が中央まで迫ってきて矢印が見出しに重なるため、
       狭いときほど大きく広げて（＝上下に逃がして）重なりを避ける。
       649px で 30px、375px で 60px */
    --arrow-spread: clamp(30px, calc(120px - 16vw), 60px);
  }
  .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));
    transform: rotate(30deg);
  }
  .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(150deg);   /* 180 - 30 で左下向き */
  }

  .p-steps__label { justify-content: center; min-height: 0; padding-top: 8px; }
}

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

/* --- 〜470px：3ステップはジグザグをやめて縦一列にする ---------------------
   横幅いっぱいを1要素で使えるので、見出し・説明文の改行（<br>）は解除して
   自然に流し、イラストは PC と同じ 128px に戻す */
@media (max-width: 470px) {
  .p-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
  }
  .p-steps__item { width: 100%; max-width: none; }
  .p-steps__icon { width: 128px; }
  .p-steps__title { font-size: 20px; }
  /* デザイン上の改行は横幅が狭いときだけ解除する（要素は縦積みで広く使えるため） */
  .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: 35px;
    align-self: center;
    margin: 0;
    transform: rotate(90deg);
  }
}

/* --- 〜560px：選択カードの隙間をさらに詰める ------------------------------
   767px のブロックにも同じセレクタがあるので、こちらを後ろに置いて上書きする */
@media (max-width: 560px) {
  .p-apply__cards { gap: 0 5px; }
  .c-choice__link { padding-inline: 10px; }   /* 上下は 767px の指定（22px）のまま */
}

/* --- 〜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%; }
}

/* --- 〜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) {
  /* 狭い幅だけの改行を有効にする（現状はお迎えバンドの見出しで使用） */
  .u-br-sp { display: inline; }

  .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); }
}

/* --- 〜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 { width: 60px; height: 60px; font-size: 25px; }
  .c-panel__title { padding-top: 15px; padding-left: 60px; font-size: 22px; }
  .c-panel__action .c-btn { font-size: 20px; }
}

/* --- 〜500px：番号タグを縦長に・見出しの位置を調整（上の 560px より後ろに置く） --- */
@media (max-width: 500px) {
  .c-panel__tag { height: 80px; font-size: 23px; }
  .c-panel__title { padding-top: 25px; padding-left: 55px; }
  /* 見出しの桶を少し小さく（背景は contain なので幅に合わせて縮む） */
  /* 桶のイラストは非表示中（上の本体と一緒に戻す）
  .c-heading--tub::before { width: 1.4em; }
  */
}

/* --- 〜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 より後ろに置く） --- */
@media (max-width: 400px) {
  .c-panel__title { font-size: 20px; }
  .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 { max-width: none; 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 {
  /* 事業者ページはメインビジュアルが無いので、JS の追従（.p-hero を過ぎてから出す）は使わず、
     最初から画面上端に貼り付ける（sticky）。sticky は元の場所を占有したままなので、隙間埋めは要らない */
  position: sticky;
  top: 0;
  height: 72px;
  background: var(--c-crimson);
}
/* 中身はボタン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 solid var(--c-brown);
  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-pink);
  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; }

/* ============================================================================
   7-5. 参画事業者の募集について（実測 見出し y:824 ／ ボックス y:915〜1107）
   ========================================================================= */
.p-recruit { padding: 157px 0 0; }
.p-recruit__box {
  margin-top: 53px;
  padding: 45px 67px 42px;
  border-radius: var(--radius-sm);
  background: var(--c-cream-box);
}
.p-recruit__box p { margin: 0; }
/* 締め切りの一文だけ赤の太字。前の段落から 23px 空ける（実測）。
   上の `.p-recruit__box p` と同じ詳細度だと margin が効かないので、
   セレクタを1つ深くしている */
.p-recruit__box .p-recruit__deadline {
  margin-top: 23px;
  color: var(--c-red);
  font-size: 18px;
  font-weight: 700;
}

/* ============================================================================
   7-6. 対象事業者（実測 見出し y:1208 ／ ブロック y:1295〜2895）
   ========================================================================= */
.p-target { padding: 89px 0 0; }
/* すぐ下がお問い合わせのとき（ロゴダウンロード・マニュアルを非表示にしているあいだ）は、
   ロゴダウンロードの下の余白（152px）と同じだけ空ける。セクションを戻せば自動で 0 に戻る（2026-09-17） */
.p-target:has(+ .p-contact) { padding-bottom: 152px; }
.p-target__list { margin-top: 43px; }

/* --- ブロック本体（薄グレーの角丸） --- */
.c-biz {
  border-radius: var(--radius-md);
  background: var(--c-gray-block);
  overflow: hidden;            /* タブの角を親の角丸に合わせて切る */
}
.c-biz + .c-biz { margin-top: 40px; }

/* --- 上段：左のタブ＋右の説明文 --- */
.c-biz__head { position: relative; }
/* 左上のタブ（実測 220 × 170 / 右下だけ大きめの角丸） */
.c-biz__tab {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 170px;
  margin: 0;
  padding: 0 10px;
  border-bottom-right-radius: 40px;
  background: var(--c-gray-tab);
  color: var(--c-brown);
  text-align: center;
}
.c-biz__icon {
  display: block;
  width: auto;
  height: 61px;               /* SVG の原寸（宿泊 78×61 / 旅行会社 75×67 / OTA 80×75） */
  margin-bottom: 4px;
}
.c-biz--agency .c-biz__icon { height: 67px; }
/* .c-biz--ota は 2026-09-17 に旅行会社と統合して使わなくなったが、
   戻す可能性があるので指定と icon-ota.svg は残してある */
.c-biz--ota .c-biz__icon { height: 75px; }
.c-biz__name {
  margin: 0;                  /* h3 の既定マージンを消す（見た目は span のときと同じ） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
/* 「（宿泊施設直接割引）」のような補足。名前の下に小さく置く */
.c-biz__note {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
/* 説明文はタブのぶんだけ左を空ける（2026-09-17 に 312px → 260px。長崎と同じ値） */
.c-biz__text {
  margin: 0;
  padding: 35px 77px 0 260px;
  min-height: 170px;
  font-size: var(--fz-body);
  line-height: 27px;
}
/* 条件の箇条書き（宿泊事業者）。行頭の「・」ぶんだけぶら下げて、折り返しを文字とそろえる */
.c-biz__rule {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
/* 旅行会社・OTA を1枚にまとめたブロックの説明文。
   「旅行会社」「OTA」の2かたまりに分けて、間を少し空ける（文字色は本文と同じ） */
.c-biz__group { display: block; }
.c-biz__group + .c-biz__group { margin-top: 16px; }
/* 種別の見出し（「旅行会社」「OTA」）。1行使って、文字だけ太字にする */
.c-biz__kind {
  display: block;
  font-weight: 700;
}

/* --- 下段：白いダウンロードボックス（実測 880px 幅 / ブロック上端から 210px） --- */
.c-dl {
  width: 880px;
  max-width: calc(100% - 120px);
  margin: 32px auto 30px;     /* 下は 2026-09-17 に 53px → 30px（下にオンライン申請ボタンが付いたため） */
  padding: 22px 42px 36px;
  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__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; }

/* --- OTA ブロックだけ下に付くオンライン申請の案内 --- */
.c-biz__online {
  margin: 0 0 40px;           /* 2026-09-17 に 22px → 40px（ボタンの下が詰まって見えたため） */
  text-align: center;
}
.c-biz__online p {
  margin: 0 0 21px;
  font-size: var(--fz-body);
  line-height: 1.6;
}
/* 茶色のボタン（実測 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); }

/* ============================================================================
   7-7. 参画事業者向けマニュアル（実測 見出し y:3000 ／ リンク y:3129〜）
   ========================================================================= */
.p-manual { padding: 66px 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: 130px 0 152px; }
.p-logodl__action {
  margin: 94px 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;
  font-size: var(--fz-body);
}

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

/* --- 〜1399px：TOP と同じくコンテンツ幅を保ったまま縮める ----------------- */
@media (max-width: 1399px) and (min-width: 768px) {
  /* 白いダウンロードボックスはブロック幅に対する比率で縮める（880/1000） */
  .c-dl { width: 88%; max-width: none; }
  /* 説明文の右余白は詰めてよい */
  .c-biz__text { padding-right: 40px; }
}

/* --- 〜860px ------------------------------------------------------------- */
@media (max-width: 860px) {
  .c-heading-line { font-size: 20px; }
  /* タブを細くして、説明文の左余白もそれに合わせて詰める（1400px では 220px / 260px）。
     「旅行会社・OTA」が 139px あり、160px 幅だと左右 11px しか空かず窮屈なので、
     左右のパディングを 16px にして幅も 180px に少し広げている（文字の左右は約 20px 空く。2026-09-17） */
  .c-biz__tab { width: 180px; padding: 0 16px; }
  .c-biz__text { padding-left: 220px; }
}

/* --- 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-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:has(+ .p-contact) { padding-bottom: 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; }
  .c-biz__text { padding-right: 20px; line-height: 1.8; }

  .c-dl {
    width: auto;
    max-width: none;
    margin: 24px 20px 24px;
    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-biz__online { margin-bottom: 32px; padding: 0 20px; }   /* 2026-09-17 に 24px → 32px */
  .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-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 { padding-block: 10px; }
}

/* --- 〜650px：タブを説明文の上に段落ちさせる -----------------------------
   767px のブロックより後ろに置くこと */
@media (max-width: 650px) {
  /* タブは絶対配置をやめて中央に置く */
  .c-biz__head { display: flex; flex-direction: column; align-items: center; }
  .c-biz__tab {
    position: static;
    height: 140px;
    /* 段落ちすると左上が親の角丸に掛からなくなるので、下は左右とも角丸にする */
    border-bottom-left-radius: 40px;
  }
  /* 横並び用に空けていた左余白とタブぶんの高さを解除 */
  .c-biz__text {
    min-height: 0;
    padding: 20px 16px 0;
  }
  .c-dl { margin: 16px; }
}


/* ============================================================================
   8. 推奨環境ページ（accessibility/index.html）
   ---------------------------------------------------------------------------
   ・カンプなし。参考：鹿児島サイト /accessibility/ の構成・寸法をそのまま流し込み
     （表の罫線 #999・見出しセル #E8E8E8・左列 200px、上下の余白 100px ほか）
   ・ページタイトルだけ県のメインカラー（参画宿泊施設一覧のタイトルと同じ 30px）
   ・共通のクラスをこのページだけ変えたいときは .page-accessibility-index を先頭に付ける
   ========================================================================= */
/* ヘッダー：メインビジュアルが無いので、TOP の JS 追従（.p-hero を過ぎてから出す）は働かない。
   最初から画面上端に貼り付ける（sticky）。sticky は元の場所を占有したままなので、隙間埋めは要らない */
/* 2026-09-15 から参画宿泊施設一覧（stay/）・参画旅行会社一覧（agt/）も同じく貼り付ける。
   絞り込みパネル（search.css の .ss-sidebar）は、このヘッダーの下 20px で止まる */
.page-accessibility-index .l-header,
.page-news-index .l-header,
.page-stay-index .l-header,
.page-agt-index .l-header {
  position: sticky;
  top: 0;
}

.p-env {
  padding: 100px 0 110px;
  background: var(--c-white);
}
.p-env__title {
  margin: 0 0 48px;
  color: var(--c-pink);
  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 をそのまま使う
   ========================================================================= */
/* ヘッダー：「8. 推奨環境ページ」の .page-news-index .l-header で sticky にしている */
.p-newslist {
  padding: 100px 0 110px;
  background: var(--c-white);
}
.p-newslist__title {
  margin: 0 0 48px;
  color: var(--c-pink);
  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; }

/* --- CSV 版お知らせ（assets/js/news.js・テスト中 2026-09-17）で使う -----------------
   直書き版のページでは使っていないクラスだけなので、公開中の表示には影響しない。
   本文（body）は更新システムから来る HTML をそのまま入れるので、
   リセット CSS で消えている段落の間隔・リストの記号・リンクの下線をここで戻す */
.p-news__body { margin-top: 8px; line-height: 1.8; }
.p-news__body p + p,
.p-news__body p + ul,
.p-news__body p + ol,
.p-news__body ul + p,
.p-news__body ol + p { margin-top: .6em; }
.p-news__body ul,
.p-news__body ol { padding-left: 1.5em; }
.p-news__body ul { list-style: disc; }
.p-news__body ol { list-style: decimal; }
/* 更新ツールの書き出しでは半角スペースが &nbsp;（改行しない空白）になるので、
   長い英文や URL でも枠からはみ出さないよう、どこででも折り返せるようにする（2026-09-17） */
[data-news-csv] .p-news__text { overflow-wrap: anywhere; }
/* CSV のお知らせ内のリンク（タイトル・本文とも）はサイトカラーで下線。
   data-news-csv を付けた <dl> の中だけに効くので、直書き版のお知らせには影響しない */
[data-news-csv] a {
  color: var(--c-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ホバーでは下線を消すだけにする。
   .p-news__text a:hover（薄くして下線を出す）と詳細度が同じなので、こちらを後ろに置いて上書きしている */
[data-news-csv] a:hover {
  opacity: 1;
  text-decoration: none;
}
/* 読み込めなかったとき／お知らせが0件のときの一文（<dl> の直後に JS が置く） */
.p-news__message {
  padding-left: 11px;
  font-size: 14px;
  line-height: 22px;
}
.p-newslist .p-news__message { padding-left: 0; text-align: center; }
/* トップからアンカーで飛んできたとき、上に固定したヘッダー（PC 75px／SP 60px）に隠れないよう余白を取る */
.p-newslist .p-news__item { scroll-margin-top: 100px; }
.p-newslist .p-news__item:focus { outline: none; }   /* JS がフォーカスを移すときの枠線は出さない */

/* --- 〜767px：文字と余白を SP サイズに（日付と本文の縦積みは TOP の .p-news__item の指定がそのまま効く） --- */
@media (max-width: 767px) {
  .p-news__message { padding-left: 0; }
  .p-newslist .p-news__item { scroll-margin-top: 80px; }
  .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-pink);
  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、間 36px） ---
   画像は1行目、リンクは2行目に置いて、高さの違う2枚でも文字の位置をそろえる */
.p-bnrdl__block--banner .p-bnrdl__heading { margin-bottom: 63px; }
/* 2026-09-17：横並び → 縦並びに変更（横並びだとバナー名が2行に折れてしまうため）。
   「正方形の画像 → そのリンク2本 → 長方形の画像 → そのリンク」の順に、中央ぞろえで積む */
.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;    /* 行頭をそろえる */
  gap: 14px;
}

/* バナー名・SNS用バナーのリンク（下線つきの色文字） */
.p-bnrdl__link {
  color: var(--c-pink);
  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行目の頭に固定。文字が折り返しても中央に寄らず、行頭がそろうようにする */
.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; }
  /* バナーは 560px までは横並びのまま比率を保って縮む。
     正方形の列が狭くなるとバナー名が2行に折れるので、文字を少し小さくして折り返さない */
  .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 */

/* --- 〜500px：お問い合わせ先の窓口名を2行に -----------------------------------
   「九州ふっこう応援割／ふくおかキャンペーン事務局」で折り返す。
   通常のフッター（利用者用コールセンター）・事業者向けフッターのどちらも同じ */
@media (max-width: 500px) {
  .p-contact__brand { display: block; }
}