/* =============================================================================
   responsive-fix.css
   320px 最低保証のレスポンシブ共通オーバーライド
   ---------------------------------------------------------------------------
   目的：
   - 既存の @media (max-width: 768px / 640px) だけでは 320〜480px で崩れる
     パターンが多いため、ここで全ページ共通の最後の砦を敷く。
   - 各HTMLの <style> ブロックより後に読み込むことで、同じ詳細度の
     ルールでも後勝ちで上書きできる。（!important は最小限）
   ---------------------------------------------------------------------------
   ブレークポイント設計：
     〜768px  タブレット以下：既存の @media と整合
      〜480px  スマホ一般：フォント・余白を強めに縮小
      〜360px  小型スマホ（iPhone SE 1st など 320px 含む）：最小保証
   ============================================================================= */

/* =========================================================================
   0. グローバル保険（全幅共通）
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  /* 横スクロール発生を許容しない（想定外の overflow を視覚的に吸収） */
  overflow-x: clip;
  max-width: 100%;
}

/* メディア要素は親幅を超えない */
img,
video,
picture,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* テーブル・フォーム要素も初期値で親幅を超えない */
table {
  max-width: 100%;
}
input,
textarea,
select,
button {
  max-width: 100%;
}

/* =========================================================================
   0-b. メニュー行の全幅共通保険（media query 外）
   ---------------------------------------------------------------------------
   .menu-right の sticky aside（360px）が入る 769〜1050px の中間幅でも
   .menu-left が 300〜400px しか無く、.menu-item の flex row が収まらず
   .menu-info が 1字ずつ改行される問題を解消する。
   flex-wrap: wrap は「収まる時は1行、収まらない時だけ2行目に送る」挙動なので
   広いデスクトップレイアウトは壊れない。
   ========================================================================= */
.menu-item {
  flex-wrap: wrap;
}
.menu-info {
  /* min-width: 0 がないと flex child が親幅を超えて縮まない
     flex-basis 200px は「200pxは確保したい、それより小さくなるなら折返し」 */
  min-width: 0;
  flex: 1 1 200px;
}

/* =========================================================================
   1. 768px 以下：既存レイアウトの追加調整
   ========================================================================= */
@media (max-width: 768px) {

  /* セクション余白：clamp(32px, 6vw, 96px) は 320px で 32px 残り広すぎる場面あり */
  .section {
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
  }

  /* ヒーロー：下部余白が大きすぎると高さ不足で文字が押し出される */
  .hero-content {
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
    padding-bottom: 56px;
  }

  /* メニュー右側の固定360px width → モバイルで確定オーバーフロー源 */
  .menu-right {
    width: 100% !important;
    max-width: 100%;
    position: static;
    top: auto;
  }
  .menu-flex {
    gap: 32px;
  }

  /* ボタン：横並びで画面外にはみ出すケースを抑止 */
  .hero-actions,
  .cta-actions {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .hero-actions .btn-line {
    width: 100%;
    text-align: center;
  }

  /* auto-fit グリッドの minmax(300px) はモバイルで単列にできないため強制単列 */
  [class*="-grid"] {
    /* 既存のレイアウトを壊しすぎないよう、auto-fit で 300px 以上のものだけ */
  }

  /* agency.html の 300px auto-fit グリッド */
  .partners-grid,
  .benefit-grid {
    grid-template-columns: 1fr !important;
  }

  /* group.html の仕様テーブル見出し列固定 160px → 縮める */
  .spec-table th {
    width: 100px;
    font-size: 11px;
  }

  /* フォーム：ラベルと入力は縦積み */
  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  /* ---- メニュー1行の保険（768px以下でも安定させる） ----
     元の flex 構造は「サムネ|名前|価格|詳細ピル」の1行固定。
     .menu-info に min-width: 0 が無く、.menu-right aside と並ぶ中間幅で
     .menu-left が細くなり 情報カラムが潰れる。 */
  .menu-item {
    flex-wrap: wrap;
  }
  .menu-info {
    min-width: 0;
    /* サムネ幅80 + gap24 を引いた残りを取り、親より小さければ次行へ */
    flex: 1 1 calc(100% - 80px - 24px);
  }
}

/* =========================================================================
   2. 480px 以下：スマホ最適化（iPhone 標準〜）
   ========================================================================= */
@media (max-width: 480px) {

  /* --- タイポグラフィ --- */
  /* ヒーロータイトル：clamp(42px, 7vw, 72px) → 7vw は 480px で 33.6px だが
     min 42px で固定化してしまう。より小さくする */
  .hero-title {
    font-size: clamp(30px, 8vw, 42px) !important;
    letter-spacing: 1px;
    line-height: 1.25;
  }
  .hero-desc {
    font-size: 15px;
    line-height: 1.8;
  }
  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
  }

  /* 汎用セクション見出し：clamp(36px, 4.5vw, 52px) → min 36px を下げる */
  .section-heading {
    font-size: clamp(24px, 7vw, 32px) !important;
    letter-spacing: 0.5px;
    line-height: 1.35;
  }
  .section-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
  }
  .section-lead {
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 40px;
  }

  /* agency.html / group.html の hero h1 は clamp(2.5rem, 8vw, 4.5rem) */
  .hero h1 {
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: 1.25;
    letter-spacing: 0.5px;
  }

  /* --- レイアウト --- */
  .section {
    padding-top: 72px;
    padding-bottom: 72px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    min-height: 480px;
  }

  /* ヒーロー下部ボタン：縦積み＋等幅 */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-actions > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* agency hero 専用の padding */
  .hero[style*="padding"],
  .agency-hero,
  .hero.agency,
  .hero {
    /* agency.html の .hero padding: 200px 2rem 140px は大きすぎる */
  }

  /* --- ボタン --- */
  .btn-primary {
    padding: 16px 24px;
    font-size: 13px;
    letter-spacing: 2px;
  }
  .btn-ghost {
    padding: 14px 20px;
    font-size: 13px;
    letter-spacing: 2px;
  }
  .btn-dark,
  .btn-outline {
    padding: 12px 22px;
    font-size: 12px;
    letter-spacing: 2px;
  }
  .btn-line {
    padding: 14px 22px;
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  /* --- 統計リボン --- */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat-value,
  .stat-cell-value {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .stat-label,
  .stat-cell-label {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* --- ギャラリー --- */
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px 140px;
    gap: 8px;
  }

  /* --- フィーチャーカード --- */
  .feature-img-area {
    height: 200px;
  }
  .feature-card-body {
    padding: 28px 20px;
  }

  /* --- メニュー1行（サムネ + 本文 + 価格 + ピル） ---
     狭幅では flex-wrap を許可して「[サムネ] [名前]」を1行目、
     「[価格] [詳細を見るピル]」を2行目に自動折返しさせる。
     元のCSSは wrap 不可のため .menu-info が潰れて文字が1字ずつ改行していた */
  .menu-item {
    flex-wrap: wrap !important;
    row-gap: 12px;
    column-gap: 16px;
    padding: 20px 0;
    align-items: center;
  }
  .menu-thumb {
    width: 64px;
    height: 64px;
  }
  /* min-width: 0 がないと flex child が親を超えて縮まない
     flex-basis を調整して「サムネ幅 + gap + 名前」で1行目を占有 */
  .menu-info {
    min-width: 0;
    flex: 1 1 calc(100% - 64px - 16px);
  }
  .menu-name,
  .menu-item-name {
    font-size: 17px;
    line-height: 1.35;
    word-break: auto-phrase;
  }
  .menu-desc-text {
    font-size: 13px;
    line-height: 1.6;
  }
  .menu-price,
  .menu-item-price {
    font-size: 22px;
    flex: 0 0 auto;
    /* 2行目の左端に寄せる（サムネ幅+gap分インデントして視覚的に揃える） */
    margin-left: calc(64px + 16px);
  }
  .menu-item::after {
    /* ピル：2行目の右端に配置、margin-left: auto でスペース食い尽くす */
    margin-left: auto !important;
    font-size: 10px;
    padding: 8px 14px;
    letter-spacing: 1.5px;
  }

  /* --- グループCTAカード --- */
  .group-card {
    padding: 28px 20px 24px !important;
  }

  /* --- アクセス --- */
  .access-grid {
    gap: 32px;
  }
  .access-map iframe,
  .access-map {
    height: 260px;
  }

  /* --- フォーム --- */
  .form-field input,
  .form-field textarea,
  .form-field select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px; /* iOS 拡大ズーム防止 */
    padding: 12px 14px;
  }
  .form-label {
    font-size: 13px;
  }

  /* --- テーブル（仕様表） --- */
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100% !important;
  }
  .spec-table th {
    padding: 12px 0 4px;
    border-bottom: none;
  }
  .spec-table td {
    padding: 0 0 16px;
  }

  /* --- 代理店ページ特有：コミッション等の 2〜5 列グリッド --- */
  .booking-steps,
  .commission-terms-list,
  .itinerary-grid,
  .partners-grid,
  .benefit-grid,
  .lunch-sub-list,
  .plans-grid,
  .lunch-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* --- 長い URL や日本語の折返し保険 --- */
  p, li, td, th, dd, dt, a, span {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* --- サイト共通ナビ ハンバーガードロワー --- */
  .site-nav-drawer {
    padding: 80px 24px 40px;
  }
}

/* =========================================================================
   3. 360px 以下：超小型スマホ最後の砦（320px 含む）
   ========================================================================= */
@media (max-width: 360px) {

  /* セクション余白：これ以上縮めると読みにくいが、16px まで攻める */
  .section {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ヒーロー／見出しのフォントをさらに絞る */
  .hero-title {
    font-size: 28px !important;
    letter-spacing: 0.5px;
  }
  .hero h1 {
    font-size: 24px !important;
    letter-spacing: 0.3px;
  }
  .hero-desc {
    font-size: 14px;
    line-height: 1.75;
  }
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }
  .section-heading {
    font-size: 22px !important;
  }
  .section-lead {
    font-size: 14px;
    margin-bottom: 32px;
  }

  /* ヘッダーロゴ：28px letter-spacing: 8px は 320px で確実にはみ出る */
  .site-header {
    padding: 12px 16px !important;
  }
  .site-header.is-scrolled {
    padding: 10px 16px !important;
  }
  .site-header-logo-main {
    font-size: 20px;
    letter-spacing: 4px;
  }
  .site-header-logo-sub {
    font-size: 9px;
    letter-spacing: 3px;
  }

  /* ボタン：テキスト＋letter-spacing でも 320px 幅に収めきる */
  .btn-primary {
    padding: 14px 18px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }
  .btn-ghost,
  .btn-dark,
  .btn-outline {
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
  .btn-line {
    padding: 12px 16px;
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* 統計：320px で 2列は窮屈 → 1列に落とす */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stat-cell::after,
  .stats-grid > *::after {
    display: none !important;
  }

  /* ギャラリー：320px で 2列は写真が潰れるので 1列に落とす */
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 180px);
  }
  .gal-item:first-child {
    grid-column: auto !important;
  }

  /* メニュー行：サムネと文字の比率を詰める（320px 対応）
     2行目の price には margin-left で擬似インデントをかけているので
     thumb サイズ変更に合わせて値も同期させる */
  .menu-thumb {
    width: 56px;
    height: 56px;
  }
  .menu-item {
    column-gap: 12px !important;
    padding: 16px 0;
  }
  .menu-info {
    flex: 1 1 calc(100% - 56px - 12px) !important;
  }
  .menu-name,
  .menu-item-name {
    font-size: 15px !important;
    line-height: 1.4;
  }
  .menu-desc-text {
    font-size: 12px !important;
  }
  .menu-price,
  .menu-item-price {
    font-size: 18px !important;
    margin-left: calc(56px + 12px) !important;
  }
  .menu-item::after {
    font-size: 9px !important;
    padding: 7px 10px !important;
    letter-spacing: 1px !important;
  }

  /* アクセスマップ高さ */
  .access-map iframe,
  .access-map {
    height: 220px;
  }

  /* フィーチャー画像 */
  .feature-img-area {
    height: 180px;
  }
  .feature-card-body {
    padding: 24px 16px;
  }

  /* フォーム余白を圧縮 */
  .form-field {
    margin-bottom: 16px;
  }

  /* ナビドロワー */
  .site-nav-drawer {
    padding: 72px 20px 32px;
  }
  .site-nav-drawer a {
    font-size: 16px;
  }

  /* group.html の席数表示など 大きめ数字 */
  .kpi-number,
  .big-number,
  [class*="-number"] {
    font-size: clamp(32px, 14vw, 56px) !important;
  }

  /* agency.html のステップ番号 clamp(4rem, 10vw, 6rem) は 320px で 64px
     → 過大。縮める */
  .step-number,
  [class*="step-number"] {
    font-size: 44px !important;
  }
}

/* =========================================================================
   4. 横スクロール防止の追加保険
   ========================================================================= */
@media (max-width: 768px) {
  /* コンテナ系の max-width が 100vw を超えないように */
  .hero-content,
  .menu-flex,
  .stats-grid,
  .features-grid,
  .gallery-mosaic,
  .group-cta-cards,
  .activity-grid,
  .shop-grid,
  .access-grid,
  .partners-grid,
  .benefit-grid,
  .booking-steps,
  .commission-terms-list,
  .itinerary-grid {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 画像の固定サイズ指定があっても親幅を超えない */
  [style*="width:"][style*="px"] img,
  img[width],
  img[height] {
    max-width: 100%;
    height: auto;
  }
}

/* =============================================================================
   Z. モバイル時 .menu-item を縦積みカード型に強制（最終上書き）
   - 他の同ファイル内ルールより後ろに配置して後勝ちで適用
   - !important はここだけに集中させて上書き漏れを防ぐ
   ============================================================================= */
@media (max-width: 768px) {
  .menu-item {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    border: 1px solid rgba(160, 152, 136, 0.2) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* サムネイルをカード全幅の 16:9 に */
  .menu-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    flex: none !important;
  }
  .menu-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* 情報エリアと価格をカード内に左揃えで配置 */
  .menu-info {
    padding: 18px 20px 8px !important;
    flex: none !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .menu-name,
  .menu-item-name {
    font-size: 20px !important;
    margin-bottom: 6px !important;
    margin-left: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
  }
  .menu-desc-text {
    font-size: 13px !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: left !important;
  }
  .menu-price,
  .menu-item-price {
    font-size: 22px !important;
    padding: 0 20px 14px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    text-align: right !important;
    flex: none !important;
  }

  /* フッター行「タップでプラン詳細を見る」 */
  .menu-item::after {
    display: block !important;
    content: 'タップでプラン詳細を見る ›' !important;
    font-family: var(--ff-label);
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: var(--coral) !important;
    background: var(--sand-light) !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
    border-top: 1px solid var(--sand) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .menu-item:hover::after,
  .menu-item:active::after,
  .menu-item:focus-visible::after {
    background: var(--coral) !important;
    background-color: var(--coral) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 380px) {
  .menu-item { margin-bottom: 12px !important; }
  .menu-info { padding: 14px 16px 4px !important; }
  .menu-name { font-size: 18px !important; }
  .menu-desc-text { font-size: 12px !important; }
  .menu-price { font-size: 20px !important; padding: 0 16px 12px !important; }
}