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

@media (max-width: 640px){
  /* ここにスマホ用の全ルール（今入れている内容） */
  /* 例）*/
  html,body{ overflow-x:hidden; }
  .lp-container{ padding:20px; }
  .lp-hero--ratio{ aspect-ratio:auto; min-height:56vh; }
  .lp-intro .lp-container{ width:100%; max-width:none; }
  .cb-grid{ grid-template-columns:1fr; gap:16px; }
  .cashback-card{ width:100%; max-width:none; padding:16px; }
  .lp-btn,.flow-ctas .btn{ width:100%; max-width:450px; height:56px; font-size:16px; }
  .cb-table{ min-width:720px; } /* などなど */
}


html, body{ overflow-x: hidden; }
.lp-container{ padding: 20px; }           /* 既存40pxを圧縮 */
.lp-intro, .lp-cashback, .lp-flow, .lp-faq2{ padding-left:4%; padding-right:4%; }
.kv-applystart .label{ font-size: 16px; }
.kv-applystart .date b{ font-size: 34px; }
.kv-applystart .date small{ transform: translateY(-.1em); }
.kv-cbnote{ font-size: 13px; }



/* 640px以下 */
.cb-table thead{ display:none; }
.cb-table, .cb-table tbody, .cb-table tr, .cb-table td{ display:block; width:100%; }
.cb-table tr{
  border:1px solid #222; border-radius:10px; overflow:hidden;
  margin: 0 0 12px;
}
.cb-table td{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:12px 14px; border:none; border-top:1px solid #eee;
}
.cb-table td:first-child{
  background:#EAF4FF; font-weight:800; border-top:none;
}
.cb-table td::before{
  content: attr(data-label);
  font-weight:700; color:#333; flex: 0 0 auto;
}






/* 640px以下 */
.flow-grid{
  grid-template-columns: 1fr;
  gap:10px;
}
.flow-arrow{
  border-left: 10px solid transparent;
  border-right:10px solid transparent;
  border-top: 16px solid var(--y);   /* 下向きに変更 */
  margin: 2px auto;
}
.flow-step img{ width:96px; }
.flow-ctas .btn{ width:100%; text-align:center; }
.flow-step img{
  width: 96px;
  height: 96px;
}

/* 640px以下 */
.sch-table{ min-width:720px; }
.sch-note{ padding-inline: 6px; }

.qa-q{ padding:12px; }
.qa-toggle{ width:26px; height:26px; }
.qa-toggle::before, .qa-toggle::after{ width:12px; }



/* =========================
   LP smartphone overrides
   (max-width: 640px)
   ========================= */

/* 画面幅に追従させる */
body{ min-width: 0; }

/* 余白を圧縮 */
.lp-container{ padding: 20px; }

/* ── MV（背景はPC側の指定を流用） */

/* ── イントロ（タイトル枠） */
.lp-intro{
        padding: 24px 4%;
        padding-inline: 0;
}
.lp-intro .lp-container{
  width: 100%;
  padding: 20px;
}

/* タイトル系は clamp で自動縮小するので追加なし */

/* キャッチ（お一人様〜）調整 */
.kv-offer{ gap:10px; margin: 6px 0 10px; }
.kv-offer .kv-stack{ transform: translateY(-4px); }
.kv-offer .kv-price b{ font-size: 52px; }
.kv-offer .kv-price small{ font-size: 2em; margin-left: 6px; }

/* バッジ幅を小さく */
.kv-badge{
  width: 240px;
  height: 36px;
  font-size: 16px;
}

/* 対象期間の数字・曜日 */
.kv-period{ gap:14px; }
.kv-date b{ font-size: 44px; }
.kv-date small{
  font-size:1em;
  transform: translateY(-.2em);
}
.kv-arrow{
  border-top: .45em solid transparent;
  border-bottom: .45em solid transparent;
  border-left: .75em solid #000;
  margin: 0 .35em .1em;
}

/* 申請開始日 */
.kv-applystart .label{ font-size: 18px; }
.kv-applystart .date b{ font-size: 34px; }
.kv-applystart .date small{
  font-size: 1em;
  transform: translateY(-.12em);
}
.kv-cbnote{ font-size: 13px; }

/* リスト幅と行間 */
.kv-list{ max-width: 100%; padding-left: 1em; }
.kv-list li{ line-height: 1.8; }
.kv-notes li{ font-size: 13px; }

/* 先着◯名 */
.kv-people{ font-size: 26px; }

/* ── キャッシュバック（青背景セクション） */
.lp-cashback{ padding: 24px 4%; }
.cashback-card{
  width: 100%;
  border-radius: 12px;
  padding: 16px;
}
.cb-title{ font-size: 22px; padding: 12px; }
.cb-title::before, .cb-title::after{ width: clamp(40px, 22vw, 90px); height: 2px; }

/* 画像2カラム→1カラム */
.cb-grid{
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 100%;
}
.cb-darrow{ margin: 10px auto 6px; }
.cb-darrow img{ width: 56px; }

/* 期間表は横スクロールで見せる */
.cb-table-wrap{ max-width: 100%; }
.cb-table{ min-width: 720px; }

/* ── 申請の流れ（クリーム背景） */
.lp-flow{ padding: 28px 4%; }
.flow-card{ padding: 18px; }

.flow-title{ font-size: 22px; }
.flow-title::before, .flow-title::after{ width: clamp(40px, 22vw, 90px); height: 2px; }

/* グリッドを縦積み＋矢印は下向きに */
.flow-grid{
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 12px;
}
.flow-arrow{
  border-left: 10px solid transparent;
  border-right:10px solid transparent;
  border-top: 16px solid var(--y);
  margin: 2px auto;
}
.flow-step img{ width: 96px; height: 96px; }

/* フォームボタンは全幅 */
.lp-btn,
.flow-ctas .btn{
  width: 100%;
  max-width: 450px;
  height: 56px;
  font-size: 13px;
}
/* 運航ダイヤ：結合型テーブル */
.sch-table--merge{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;                 /* 幅のブレ防止 */
  font-size: clamp(13px,1.9vw,15px);
  background:#fff;
}

.sch-table--merge th,
.sch-table--merge td{
  border:1px solid #2b2b2b;
  text-align:center;
  padding:10px 8px;
  vertical-align:middle;               /* 高さ合わせの要 */
}

/* ヘッダー：黄色帯 */
.sch-table--merge thead th{
  background:#FFE200;                  /* 画像に近い黄色 */
  font-weight:800;
}

/* 左列（行き先）：薄グレー帯 */
.sch-table--merge .sch-dest{
  background:#EFEFEF;
  font-weight:700;
  white-space:nowrap;
}

/* 中央2列の縦結合セルの中身を縦中央に */
.sch-mainblock{ padding:0; }           /* 余白は内側divで管理 */
.sch-maincell{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-direction:column;     /* 「便名」「時間」を上下に */
  padding:12px 8px;
}
.sch-flight{ font-weight:800; }
.sch-time{   font-weight:700; }

/* 右側2列のゼブラ（行の見やすさUP）—左列と結合セルは除外 */
.sch-row:nth-child(odd) td:not(.sch-dest):not(.sch-mainblock){ background:#F7F7F7; }

/* 小さな注記 ※1 */
.sch-note{ font-size:.85em; }

/* テーブルの最小幅を確保してSPは横スクロールで崩れ防止 */
.sch-table-wrap{ overflow-x:auto; }
.sch-table--merge{ min-width:820px; }


/* ── Q&A（ピンク背景） */
.lp-faq2{ padding: 28px 4%; }
.faq-card{ padding: 16px; }
.qa-q{ padding: 12px; }
.qa-toggle{ width: 26px; height: 26px; }
.qa-toggle::before, .qa-toggle::after{ width: 12px; }

/* 画像のはみ出し防止（保険） */
img{ max-width: 100%; height: auto; }
/* 640px以下 */
.lp-hero{ width:100%; overflow:hidden; }
.lp-hero--ratio{ aspect-ratio:auto; min-height:56vh; } /* 比率固定を解除して画面高基準に */
.lp-hero__media{
  background-image: var(--hero-img-m, var(--hero-img)); /* SP画像 → 無ければPC画像 */
  background-size: cover;
  background-position: center;
}
html, body{ overflow-x:hidden; } /* 保険：サブピクセルの横スクロール抑止 */



@media (max-width: 640px){
  /* 横スクロールをやめてカード化 */
  .cb-table-wrap{ max-width:100%; overflow:visible; }

  .cb-table{ 
    width:100%;
    min-width:auto !important;         /* ← 700px固定を解除 */
    border-collapse:separate; 
    border-spacing:0; 
    font-size:14px;
  }
  .cb-table thead{ display:none !important; }

  .cb-table,
  .cb-table tbody,
  .cb-table tr,
  .cb-table td{ display:block; width:100%; }

  .cb-table tr{
    margin:0 0 12px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
  }
  .cb-table td{
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border:0;
    border-top:1px solid #eee;
    word-break: break-word;            /* 和文の折返し */
  }
  /* 1セル目（第◯期）をヘッダ風に */
  .cb-table td:first-child{
    background:#EAF4FF;
    font-weight:800;
    border-top:0;
  }
  /* 左側の項目名は data-label を使って表示 */
  .cb-table td::before{
    content: attr(data-label);
    color:#555;
    font-weight:700;
    flex:0 0 auto;
    margin-right:12px;
  }
  .cb-table td small{ font-size:.9em; }
}

  .cta-btn{
    width: 100%;
    max-width: 450px;
    height: 80px;
    padding: 6px 44px 6px 12px;
  }
  .cta-btn .cta-main{ font-size: 18px; }
  .cta-btn .cta-sub { font-size: 8px; }
  .flow-ctas .btn::after{
    border-left: 12px solid #fff;
    border-top:   8px solid transparent;
    border-bottom:8px solid transparent;
  }


  /* ===== スマホ（2列） ===== */

  .bn--wide{ width:100%; height:88px; }
  .bn-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; width:100%; }
  .bn{ width:100%; height:72px; }
  .bn__label{ font-size:12px; padding:0 8px; }

   .ft-copy{ font-size: 11px; }


    .lp-hero--ratio{
    aspect-ratio:540/540;   /* 画像比率に合わせる */
    min-height: auto;        /* 任意：固定高が不要なら解除 */
  }
  .lp-hero__media{
    background-image: var(--hero-img-m);  /* ご指定のSP画像 */
    background-size: contain;             /* 幅いっぱい・縦は自動で余白OK */
    background-repeat: no-repeat;
    background-position: center center;   /* 余白は上下左右の中央に */
    background-color: #0000;              /* 余白色を変えたい場合はここを色に */
  }