/* レスポンシブ対応
   style.css（PC＝画面幅1280px以上の見た目）を土台に、狭い画面向けの上書きだけをまとめています。

   ブレイクポイント
     PC          … 1280px 以上   … style.css のまま（このファイルの指定は効かない）
     タブレット  … 767〜1279px   … 「1279px以下」の指定
                    └ 767〜999px はヘッダーがハンバーガーメニュー（「999px以下」の指定）
                    └ 767〜1023px は「1023px以下」の指定も重ねて効く（列数を減らす）
     スマホ      … 766px 以下    … 上の2つに「766px以下」の指定を重ねる
                    └ Hero は 481〜766px が横並び、480px以下が縦並び
*/

/* 表の横スクロール案内（スマホだけ表示） */
.lp .table-scroll-hint { display: none; }

/* 表の横スクロール案内：右端のフェード＋丸い矢印ボタン
   表が枠より横に長いときだけ表示し、右端までスクロールすると消える（js/table-scroll.js が切り替え） */
.lp .table-scroll { position: relative; }
.lp .table-scroll-fade,
.lp .table-scroll-button { display: none; }
.lp .table-scroll.is-scrollable:not(.is-end) .table-scroll-fade { display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 56px; border-radius: 0 26px 26px 0; background: linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF 85%); pointer-events: none; }
.lp .table-scroll.is-scrollable:not(.is-end) .table-scroll-button { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 8px; z-index: 3; width: 40px; height: 40px; padding: 0 0 2px 2px; border: 0; border-radius: 50%; background: var(--primary); color: #FFFFFF; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(22,33,58,0.25); transform: translateY(-50%); animation: table-scroll-nudge 1.4s ease-in-out infinite; }
@keyframes table-scroll-nudge {
  0%, 100% { transform: translate(0, -50%); }
  50% { transform: translate(5px, -50%); }
}
/* 動きを減らす設定の端末では、矢印を動かさない */
@media (prefers-reduced-motion: reduce) {
  .lp .table-scroll-button { animation: none !important; }
}

/* ボタンの hover：背景色と文字色がなめらかに入れ替わる（反転）
   画面幅767px以上・マウスなどで hover できる端末だけ（スマホのタップでは色が残らないように）
   枠線は box-shadow（内側の線）で描くので、hover してもボタンの大きさは変わらない */
@media (width >= 767px) and (hover: hover) {
  .lp .header-cta,
  .lp .hero-cta,
  .lp .btn-outline,
  .lp .link-first-cta,
  .lp .hero-store-button,
  .lp .app-band-store { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }

  /* メインカラーのボタン → 白地にメインカラーの文字・枠 */
  .lp .header-cta:hover,
  .lp .hero-cta:hover { background: #FFFFFF; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
  /* 枠線ボタン → メインカラー地に白文字 */
  .lp .btn-outline:hover { background: var(--primary); color: #FFFFFF; }
  /* お問い合わせのフォームボタン：枠線の色で塗りつぶす */
  .lp .contact-card-link { transition: background-color .25s ease, color .25s ease; }
  .lp .contact-card-link:hover { background: var(--contact-color); color: #FFFFFF; }
  /* 黄色のボタン → こげ茶地に黄色の文字 */
  .lp .link-first-cta:hover { background: #3B2E00; color: #F2B33D; }
  /* ストアボタン（黒・紺） → 白地に黒・紺の文字・枠 */
  .lp .hero-store-button:hover { background: #FFFFFF; color: #111111; box-shadow: inset 0 0 0 2px #111111; }
  .lp .app-band-store:hover { background: #FFFFFF; color: #16213A; box-shadow: inset 0 0 0 2px #16213A; }
}

/* ヘッダーメニューのリンクの hover：文字がメインカラー（オレンジ）に変わる
   画面幅1000px以上（メニューが横並びのとき）は、下線が中央から左右に伸びる */
@media (width >= 767px) and (hover: hover) {
  .lp .header-nav-link { transition: color .25s ease; }
  .lp .header-nav-link:hover,
  .lp .header-nav-link:focus-visible { color: var(--primary); }
}
@media (width >= 1000px) and (hover: hover) {
  .lp .header-nav-link { position: relative; }
  .lp .header-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 1px; background: var(--primary); transform: scaleX(0); transition: transform .25s ease; }
  .lp .header-nav-link:hover::after,
  .lp .header-nav-link:focus-visible::after { transform: scaleX(1); }
}

/* スマホだけで効く改行（<br class="u-sp-br">） */
.lp .u-sp-br { display: none; }

/* ページ内リンクで移動したとき、固定ヘッダーに見出しが隠れないようにする */
html { scroll-padding-top: 96px; }


/* ==================================================
   タブレット以下（1279px以下）
   ================================================== */
@media (width < 1280px) {
  .lp { --gutter: max(40px, calc((100% - 1136px) / 2)); }
  html { scroll-padding-top: 80px; }

  /* ---------- Header：全メニューを1行で（文字15px・間隔16pxに縮める） ---------- */
  .lp .header { padding: 14px var(--gutter); }
  .lp .header-brand-logo { height: 40px; }   /* メニューが横に並ぶ幅（1000px〜）でも、ロゴとメニューの間を空ける */
  .lp .header-actions { gap: 16px; font-size: 15px; }
  .lp .header-nav { gap: 16px; }
  .lp .header-cta { min-height: 44px; padding: 0 18px; }

  /* ---------- Hero：横並びのまま、スマホ画面イメージを縮小 ---------- */
  .lp .hero { gap: 32px; padding: 64px var(--gutter) 120px; }
  .lp .hero-body { gap: 22px; min-width: 0; }
  .lp .hero-eyebrow { flex-wrap: wrap; }
  .lp .hero-title { font-size: 64px; }
  .lp .hero-lead { font-size: 18px; }
  .lp .hero-phones { zoom: 0.95; }

  /* ---------- Intro ---------- */
  .lp .intro { padding: 40px var(--gutter) 72px; }

  /* ---------- Link first：縦並び ---------- */
  .lp .link-first { flex-direction: column; gap: 40px; padding: 56px 48px; }
  .lp .link-first-card { width: auto; }

  /* ---------- 表：指で横にスクロール ---------- */
  .lp .table-grid { min-width: 840px; }

  /* ---------- 列数 ---------- */
  .lp .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp .acc-steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp .acc-steps-6 > .stack-10:nth-child(3n)::after { display: none; }   /* 行の右端には矢印を付けない */

  /* ---------- アコーディオン内の画面キャプチャ：列幅に合わせて縮める ---------- */
  .lp .acc-capture { height: auto; padding: 10px; }
  .lp .acc-capture-img { width: auto; height: auto; max-width: 100%; max-height: 320px; }
}


/* ==================================================
   ハンバーガーメニュー（999px以下）
   全メニューを1行に並べると収まらない幅
   ================================================== */
@media (width < 1000px) {
  .lp .header-menu-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #DCE3EE; border-radius: 12px; background: #FFFFFF; cursor: pointer; flex-shrink: 0; }
  .lp .header-menu-icon,
  .lp .header-menu-icon::before,
  .lp .header-menu-icon::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: #16213A; transition: transform .2s, background-color .2s; }
  .lp .header-menu-icon { position: relative; }
  .lp .header-menu-icon::before,
  .lp .header-menu-icon::after { content: ""; position: absolute; left: 0; }
  .lp .header-menu-icon::before { top: -6px; }
  .lp .header-menu-icon::after { top: 6px; }
  /* 開いているときは × にする */
  .lp .header.is-menu-open .header-menu-icon { background: transparent; }
  .lp .header.is-menu-open .header-menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .lp .header.is-menu-open .header-menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
  /* メニュー本体：ヘッダーの下に開く */
  /* 閉じている間は透明・少し上にずらして隠し、開くとふわっと下りてくる */
  .lp .header-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: #FFFFFF; border-bottom: 1px solid #DCE3EE; box-shadow: 0 12px 24px rgba(22,33,58,0.12);
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .lp .header.is-menu-open .header-nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .lp .header-nav-link { padding: 16px 4px; border-bottom: 1px solid #E5E7EB; }
}


/* ==================================================
   タブレット（狭め：1023px以下）…列数を2列に
   ================================================== */
@media (width < 1024px) {
  /* Hero：さらに縮小して横並びを保つ */
  .lp .hero { gap: 24px; padding: 48px var(--gutter) 106px; }
  .lp .hero-body { gap: 18px; }
  .lp .hero-badge { padding: 4px 12px; font-size: 13px; }
  .lp .hero-eyebrow-text { font-size: 14px; }
  .lp .hero-lead { font-size: 15px; line-height: 1.8; }
  .lp .hero-phones { zoom: 0.7; }
  .lp .hero-app .note-bold { font-size: 12px; }
  .lp .hero-app-head { gap: 10px; }
  .lp .hero-app-icon { width: 40px; height: 40px; border-radius: 10px; }
  .lp .hero-store-buttons { gap: 8px; }
  .lp .hero-store-button { flex: 1 1 0; width: auto; min-height: 44px; font-size: 13px; }
  .lp .hero-cta { min-height: 52px; padding: 0 22px; font-size: 16px; }

  .lp .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .use-grid > *,
  .lp .use-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: auto; }   /* 2列のときは中央寄せをやめる */
  .lp .acc-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp .acc-steps-4 > .stack-10:nth-child(2n)::after { display: none; }
  .lp .acc-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 表：1列目を細くして、iPad（縦向き）では横スクロールなしで収める */
  .lp .table-grid { grid-template-columns: 150px repeat(5, minmax(100px, 1fr)); min-width: 650px; font-size: 16px; }
  .lp .benefit-table-rank { flex-direction: column; gap: 6px; }   /* バッジの下にランク名 */

  .lp .earn-main { flex-direction: column; }
  .lp .earn-rate { width: auto; }

  .lp .app-band { flex-direction: column; align-items: flex-start; }
}


/* ==================================================
   Heroのタイトル（長く歩むほど、〜）の文字サイズ
     1280px以上 … 70px（style.css）
     1000〜1279px … 64px（「1279px以下」の指定）
      900〜999px  … 48px
      800〜899px  … 40px
      767〜799px  … 36px
     481〜766px … 文章の枠の幅に合わせて24〜44px（横並び）
     401〜480px … 44px／350〜400px … 40px／349px以下 … 36px（縦並び）
   ================================================== */
@media (width < 1000px) {
  .lp .hero-title { font-size: 48px; }
}
@media (width < 900px) {
  .lp .hero-title { font-size: 36px; }
}
@media (800px <= width < 900px) {
  .lp .hero-title { font-size: 40px; }
}


/* 1024〜1099px：タイトル64pxが1行7文字で収まるよう、文章の枠を460px確保してスマホ画面イメージを少し小さく */
@media (1024px <= width < 1100px) {
  .lp .hero-body { flex-basis: 460px; flex-shrink: 0; }
  .lp .hero-phones { zoom: 0.8; }
}


/* ==================================================
   タブレット（850〜1023px）…Heroのスマホ画面イメージを少し大きく
   ================================================== */
@media (850px <= width < 1024px) {
  .lp .hero-body { flex-basis: 460px; }   /* 文章の枠が広がりすぎないように（余った幅は左右に均等） */
  .lp .hero-phones { zoom: 0.73; }        /* 767〜849px の 0.7 より約4%大きく */
}


/* ==================================================
   スマホ（766px以下）
   ================================================== */
@media (width < 767px) {
  .lp { --gutter: 5%; font-size: 16px; }
  html { scroll-padding-top: 72px; }
  /* 背景の円（Hero 以外）：画面が狭いので、大きさを65%にする */
  .lp .bg-deco { --bg-deco-scale: .65; }
  .lp .bg-deco .bg-deco-lg { --bg-deco-scale: .5; }   /* 大きい円は50%（約210px。Hero の大きい円 360px の6割ほど） */

  /* ---------- 共通：見出し・文字 ---------- */
  .lp .section-title { font-size: 26px; }
  .lp .section-lead { font-size: 16px; }
  .lp .section-head { gap: 10px; }
  .lp .title-maru-26 { font-size: 21px; }
  .lp .title-maru-24 { font-size: 19px; }
  .lp .title-maru-22 { font-size: 18px; }
  .lp .text-19 { font-size: 17px; }
  .lp .desc-16 { font-size: 15px; }

  /* ---------- 共通：セクションの枠 ---------- */
  .lp .section,
  .lp .section-rank,
  .lp .section-faq { padding: 56px var(--gutter) 24px; gap: 24px; }
  .lp .section-start,
  .lp .section-earn { padding: 56px var(--gutter) 0; gap: 24px; }

  /* ---------- 共通：列数 ---------- */
  .lp .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }        /* 特典カード・ランク条件 → 1列 */
  .lp .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }  /* マイルの貯め方カード → 2列 */
  .lp .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }  /* グループ各社 → 2列 */
  .lp .flow-list { --flow-card-min: 200px; gap: 12px; }  /* 会員ランクの1年 → 横1列のまま、はみ出した分を横スクロール */
  .lp .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* マイルの使い方 → 2列 */

  /* ---------- 共通：表 ---------- */
  .lp .table-scroll-hint { display: block; margin: 0 0 -12px; font-size: 13px; color: #4A5568; }
  .lp .table-scroll-hint::before { content: "↔ "; }
  .lp .table-wrap { padding: 8px 0 16px; border-radius: 18px; }
  .lp .table-scroll.is-scrollable:not(.is-end) .table-scroll-fade { border-radius: 0 18px 18px 0; }
  /* 1列目を細くして、横にスクロールしても行見出しが左に残るようにする */
  .lp .table-grid { grid-template-columns: 112px repeat(5, minmax(100px, 1fr)); min-width: 612px; font-size: 15px; }
  .lp .table-corner,
  .lp .table-rowhead,
  .lp .table-rowhead-last,
  .lp .rank-table-rowhead,
  .lp .rank-table-rowhead-last { position: sticky; left: 0; z-index: 1; background: #FFFFFF; padding-left: 16px; box-shadow: 6px 0 8px -6px rgba(22,33,58,0.15); }
  .lp .table-note { font-size: 12px; }
  .lp .benefit-table-miles { font-size: 19px; }

  /* ---------- Header ---------- */
  .lp .header { padding: 10px var(--gutter); }
  .lp .header-brand { min-width: 0; }
  /* ロゴは横幅で大きさを決める（最大216px＝マークの円が直径36px）。狭い画面では縦横比を保ったまま縮む */
  .lp .header-brand { flex: 1 1 auto; margin-right: 10px; }
  .lp .header-brand-logo { width: 100%; max-width: 216px; height: auto; }
  .lp .header-actions { gap: 8px; flex-shrink: 0; }
  /* 「マイル連携を／はじめる」の2行・小さめのボタン */
  .lp .header-cta { min-height: 40px; padding: 4px 12px; border-radius: 20px; font-size: 11px; line-height: 1.3; text-align: center; }
  .lp .u-sp-br { display: inline; }

  /* ---------- Hero（縦並び・横並びの切り替えは下の「480px以下」「481〜766px」） ---------- */
  .lp .hero { gap: 20px; padding: 40px var(--gutter) 64px; }
  .lp .hero-app .note-bold { font-size: 15px; }
  .lp .hero-store-buttons { gap: 12px; }
  .lp .hero-deco-circle-lg { width: 360px; height: 360px; right: -140px; top: -140px; }
  .lp .hero-deco-circle-md { width: 72px; height: 72px; right: 6%; bottom: 72px; }
  .lp .hero-deco-circle-sm { width: 20px; height: 20px; left: auto; right: 42%; top: 20px; }
  /* 追加の飾り（スマホ）：画面の端や空いている場所に小さめに */
  .lp .hero-deco-md-2 { top: 34%; right: auto; bottom: auto; left: -18px; width: 52px; height: 52px; }
  .lp .hero-deco-md-3 { top: auto; right: -12px; bottom: 30%; left: auto; width: 44px; height: 44px; }
  .lp .hero-deco-sm-2 { top: 26px; right: auto; bottom: auto; left: 62%; width: 12px; height: 12px; }
  .lp .hero-deco-sm-3 { top: auto; right: 14%; bottom: 46%; left: auto; width: 16px; height: 16px; }
  .lp .hero-deco-sm-4 { top: auto; right: auto; bottom: 48px; left: 6%; width: 16px; height: 16px; }
  .lp .hero-wave { height: 40px; }
  .lp .hero-eyebrow { gap: 8px; }
  .lp .hero-badge { padding: 4px 12px; font-size: 13px; }
  .lp .hero-eyebrow-text { font-size: 14px; }
  .lp .hero-title { font-size: 40px; }
  .lp .hero-lead { font-size: 16px; line-height: 1.8; }
  .lp .hero-phones { zoom: 0.85; }
  .lp .hero-store-button { flex: 1 1 0; width: auto; min-height: 48px; font-size: 15px; }
  .lp .hero-cta { align-self: stretch; justify-content: center; min-height: 56px; padding: 0 20px; font-size: 17px; }

  /* ---------- Intro ---------- */
  .lp .intro { padding: 32px var(--gutter) 56px; }
  .lp .intro-text { font-size: 16px; line-height: 1.9; }
  .lp .intro-buttons { flex-wrap: wrap; gap: 12px; }
  .lp .btn-outline { flex: 1 1 auto; justify-content: center; min-height: 48px; padding: 0 20px; }

  /* ---------- Link first ---------- */
  .lp .link-first { gap: 32px; padding: 40px 20px; border-radius: 24px; }
  .lp .link-first-title { font-size: 26px; }
  .lp .link-first-text { font-size: 16px; }
  .lp .link-first-deadline { padding: 20px; }
  .lp .link-first-deadline-title { font-size: 18px; }
  .lp .text-16 { font-size: 15px; }
  .lp .link-first-card { padding: 28px 20px; border-radius: 20px; }
  .lp .link-first-card-title { font-size: 20px; }

  /* ---------- Benefit ---------- */
  .lp .benefit-card-photo { height: 160px; }
  .lp .benefit-card-body { padding: 20px; }

  /* ---------- Rank ---------- */
  .lp .rank-cond { padding: 22px; }
  .lp .rank-example { align-items: flex-start; gap: 14px; padding: 20px; }
  .lp .rank-example-text { font-size: 15px; }

  /* ---------- Year flow ---------- */
  .lp .flow-card { padding: 20px 16px; border-radius: 18px; }
  .lp .flow-card-date { font-size: 22px; }

  /* ---------- App band ---------- */
  .lp .app-band { margin: 48px 0 0; padding: 28px var(--gutter); gap: 20px; align-items: stretch; }
  .lp .app-band-info { gap: 14px; }
  .lp .app-band-icon { width: 56px; height: 56px; }
  .lp .app-band-stores { width: 100%; }
  .lp .app-band-store { flex: 1 1 0; width: auto; min-height: 48px; }

  /* ---------- Start：アコーディオン ---------- */
  .lp .acc-toggle { gap: 12px; padding: 20px 16px; }
  .lp .acc-num { width: 36px; height: 36px; font-size: 17px; }
  .lp .acc-title { font-size: 18px; }
  .lp .acc-title-group .title-maru-24 { font-size: 18px; }
  .lp .acc-title-group .note-bold { font-size: 13px; }
  .lp .acc-toggle .js-accordion-label { display: none; }   /* ＋／− だけで開閉を示す */
  .lp .acc-icon { width: 32px; height: 32px; font-size: 20px; }
  .lp .acc-panel,
  .lp .acc-panel-lg { padding: 8px 16px 20px; gap: 16px; }
  .lp .acc-steps-4,
  .lp .acc-steps-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-top: 16px; }
  /* 会員登録・口座登録（マイル連携）の流れ：1列にして、左右に8%ずつ余白 */
  .lp .acc-steps-4,
  .lp .acc-steps-6 { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px 8% 0; }
  /* 1列なので、矢印は下向きにして手順と手順の間（下）に置く */
  .lp .acc-steps-4 > .stack-10::after,
  .lp .acc-steps-6 > .stack-10::after { display: block; top: auto; right: auto; bottom: -27px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .lp .acc-steps-4 > .stack-10:nth-child(2n)::after,
  .lp .acc-steps-6 > .stack-10:nth-child(3n)::after { display: block; }   /* タブレット用の「行の右端は非表示」を解除 */
  .lp .acc-steps-4 > .stack-10:last-child::after,
  .lp .acc-steps-6 > .stack-10:last-child::after { display: none; }
  .lp .acc-tips { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp .acc-tip { padding: 18px; }
  .lp .acc-also { flex-wrap: wrap; gap: 4px 12px; padding: 16px; }

  /* ---------- Earn ---------- */
  .lp .earn-box { padding: 28px 20px; border-radius: 20px; gap: 20px; }
  .lp .earn-main { gap: 16px; }
  .lp .earn-rate { padding: 22px; }
  .lp .earn-rate-value { font-size: 34px; }
  .lp .earn-notice { padding: 20px; }
  .lp .earn-sub-title { font-size: 17px; }
  .lp .earn-card { padding: 16px; gap: 6px; border-radius: 16px; }
  .lp .earn-card-title { font-size: 16px; }
  .lp .earn-card-value { font-size: 22px; }

  /* ---------- Use ---------- */
  .lp .use-card-body { padding: 14px; }
  .lp .use-card-body .title-maru-20 { font-size: 16px; }

  /* ---------- FAQ ---------- */
  .lp .faq-question { gap: 12px; padding: 18px 20px; }
  .lp .faq-icon { width: 28px; height: 28px; font-size: 18px; }
  .lp .faq-panel { margin: 0 20px; padding: 14px 0 20px; }
  .lp .faq-answer { font-size: 15px; }

  /* ---------- Contact：カードを縦に並べる ---------- */
  .lp .section-contact { padding: 56px var(--gutter) 0; gap: 24px; }
  .lp .contact-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp .contact-card { padding: 24px 20px; }
  .lp .contact-card-name { font-size: 20px; }
  .lp .contact-card-tel-number { font-size: 26px; }
  .lp .contact-card-link { align-self: stretch; justify-content: center; }

  /* ---------- Footer ---------- */
  /* フッター：項目名の下に内容（参照元 https://www.sawakami.co.jp/lp/ns/ と同じ） */
  .lp .u-pc-only { display: none; }
  .lp .footer { margin-top: 56px; }
  .lp .footer-notice { padding-top: 48px; }
  .lp .footer-wrap { width: auto; padding: 0 5vw; }
  .lp .footer-line { display: block; padding: 10px 0; }
  .lp .footer-line-first { margin-top: 20px; }
  .lp .footer-line > div { padding: 5px 0; }
  .lp .footer-line .footer-line-head { width: 100%; padding-left: 0; }
}


/* ==================================================
   スマホ（481〜766px）…Hero を iPad・PC と同じ横並びに
   ================================================== */
@media (481px <= width < 767px) {
  .lp .hero { flex-direction: row; align-items: center; justify-content: center; gap: 16px; padding: 40px var(--gutter) 64px; }
  /* 文章の枠：残りの幅いっぱい。タイトルの文字サイズを枠の幅に合わせるための基準（container）にする */
  .lp .hero-body { display: flex; flex: 1 1 0; min-width: 0; gap: 14px; container-type: inline-size; }
  /* タイトル：1行7文字が枠に収まる大きさ（枠の幅の13.5%）。最小24px〜最大44px */
  .lp .hero-title { font-size: clamp(24px, 13.5cqi, 44px); }
  .lp .hero-eyebrow { gap: 6px; }
  .lp .hero-badge { padding: 3px 10px; font-size: 12px; }
  .lp .hero-eyebrow-text { font-size: 12px; }
  .lp .hero-lead { font-size: 14px; line-height: 1.75; }
  .lp .hero-app .note-bold { font-size: 11px; line-height: 1.6; }
  .lp .hero-app-head { gap: 8px; }
  .lp .hero-app-icon { width: 34px; height: 34px; border-radius: 8px; }
  .lp .hero-store-buttons { gap: 6px; }
  .lp .hero-store-button { min-height: 40px; font-size: 12px; }
  .lp .hero-cta { align-self: stretch; justify-content: center; gap: 6px; min-height: 48px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .lp .hero-cta-arrow { width: 14px; height: 14px; }
  .lp .hero-phones { zoom: 0.42; }
}
@media (600px <= width < 767px) {
  .lp .hero-cta { font-size: 14px; }
  .lp .hero-cta-arrow { width: 16px; height: 16px; }
  .lp .hero-phones { zoom: 0.52; }
}
@media (700px <= width < 767px) {
  .lp .hero-phones { zoom: 0.56; }   /* 600〜699px の 0.52 より約8%大きく */
}


/* ==================================================
   スマホ（480px以下）…Hero は縦並び
   並び順：バッジ → タイトル → スマホ画面イメージ → リード文 →（少し間をあけて）アプリの案内・ボタン
   ================================================== */
@media (width < 481px) {
  .lp .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .lp .hero-body { display: contents; }
  .lp .hero-body > * { position: relative; }
  .lp .hero-eyebrow { order: 1; }
  .lp .hero-title { order: 2; font-size: 44px; }   /* 401〜480px：44px */
  .lp .hero-phones { order: 3; align-self: center; zoom: 0.62; }
  .lp .hero-lead { order: 4; }
  .lp .hero-app { order: 5; margin-top: 16px; }
  .lp .hero-app-icon { width: 46px; height: 46px; border-radius: 11px; }
  .lp .hero-app .note-bold { line-height: 1.55; }    /* リード文との間を少し広めに */
  .lp .hero-cta { order: 6; }
}
/* 350〜400px：タイトル40px */
@media (width < 401px) {
  .lp .hero-title { font-size: 40px; }
}
/* 349px以下：タイトル36px */
@media (width < 350px) {
  .lp .hero-title { font-size: 36px; }
}
/* 359px以下（小さいスマホ）：スマホ画面イメージをさらに縮小 */
@media (width < 360px) {
  .lp .hero-phones { zoom: 0.53; }
}