@charset "UTF-8";
/* ==========================================================================
   responsive.css — ブレークポイント上書き（モバイルファースト／min-widthのみ）
   合資会社 田野モータース 様 デザイン提案用デモサイト

   ⚠️ 色はここに書かない。配置・寸法・表示切替のみを担当する。
   ⚠️ ブレークポイントは 640px / 1024px / 1280px の3段階のみ（設計書 §4.5）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   c-totop（施主修正指示③）：モバイル下部固定バーとの重なり回避
   ⚠️ 既定（PC想定）の position/right/bottom/サイズ・色は components.css の担当。
      ここではモバイル（1024px未満＝l-bottombar が出現する範囲）でのみ、
      下部固定バーの高さぶん bottom を持ち上げる。
      responsive.css は他CSSより後読みのため、ここに書く無条件ルールが
      components.css の既定bottomに確実に勝つ（モバイルファーストの基点として
      扱う）。1024px〜は下部の @media (min-width: 1024px) 内で通常値へ戻す。
   ⚠️ 実測注記：--h-bottombar(64px) は概算トークンで、l-bottombar の実高さ
      （電話CTAの min-height 48px ＋ 上下 padding 24px ≈ 74px）より小さい。
      余白項に var(--gutter) だけを足すと実際の隙間が数px しか残らないため
      （実測で約6px）、差分を吸収できる var(--sp-6) を余白として使い、
      実測で約22px の隙間を確保する。 */
.c-totop {
  bottom: calc(var(--h-bottombar) + env(safe-area-inset-bottom, 0px) + var(--sp-6));
}

/* --------------------------------------------------------------------------
   640px〜（sm）
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .p-service__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .p-reasons__list はここでは2カラム化しない：3項目を2カラムに詰めると
     3つ目だけが2行目に単独配置され、navy-900の暗色セクションで
     意図せぬ非対称の空白が生まれるため。1024pxで3カラムへ一気に切り替える。 */

  /* S4 比較図：640px以上では <picture> が横並びの wide 版（1200x470）へ
     切り替わる（index.html の <source media="(min-width: 640px)">）。
     読み込み前後のレイアウトシフトを防ぐため、CSS の aspect-ratio も
     同じ閾値で wide の比に合わせる。
     ⚠️ この2つ（<source> の media と下の @media）は必ず同じ値にすること。
        ズレると、切り替わった直後に図の高さが飛んで CLS になる。 */
  .p-shaken__diagram {
    aspect-ratio: 1200 / 470;
  }
}

/* --------------------------------------------------------------------------
   1024px〜（md）
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* ヘッダー：PCナビ表示・バーガー非表示
     ⚠️ 2026-08-25 施主修正指示⑤検証：「お問い合わせ」追加で6項目になったため
        1024px幅でのオーバーフローを実測（components.css で gap を
        var(--sp-4)・font-sizeを.875remへ詰め済みの状態で計測）。
        1024/1100/1280pxのいずれも折返し・重なり・横スクロールなし
        （1024px幅でナビ右端とc-tel--header左端の間に約39px、
        navlist内の隣接リンク間も16px以上を確保できていることを
        getBoundingClientRect実測で確認）。よってブレークポイントの
        引き上げ（1024→1200px等）は不要と判断し、1024pxを維持する。 */
  .l-header__nav {
    display: block;
  }

  .l-header__burger {
    display: none;
  }

  /* 下部固定バーはPCで不要。body側の余白も0に戻す */
  .l-bottombar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }

  /* 下部固定バーが消えるため、c-totop の持ち上げも不要（施主修正指示③）。
     components.css の既定値と同じ var(--gutter) に戻す。 */
  .c-totop {
    bottom: var(--gutter);
  }

  /* サービス一覧は3カラム運用の可能性を排除しない設計書上の指定はないため、
     640pxの2カラムを1024pxでも維持する（設計書に1024px時点の変更指示なし）。 */

  .p-reasons__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-company__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .p-flow__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .p-flow__item {
    flex-direction: column;
  }

  .l-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* デモ告知帯のPC専用上書きは 2026-09-04 にすべて削除した。
     折り畳み（details/summary）をやめて常時1行表示になり、制作者クレジットも
     撤去したため、幅による出し分けが不要になった。
     全画面幅で「デモ」チップ＋一文の1行表示で統一されている。 */
}

/* --------------------------------------------------------------------------
   ヒーローの改行制御 .p-hero__br
   ⚠️ モバイルでのみ改行を効かせる。PC（1024px〜）では自然な折り返しに委ねる。
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-hero__br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1280px〜（lg）
   ⚠️ --container は 1120px 固定のため、本プロジェクトで lg 固有のグリッド変更は
      発生しない。設計書 §responsive.css 要件「コンテナ余白の微調整」のみ反映する。
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .l-container {
    padding-inline: var(--sp-8);
  }
}