@charset "UTF-8";
/* ==========================================================================
   layout.css — コンテナ・グリッド・ヘッダー/フッター骨格
   合資会社 田野モータース 様 デザイン提案用デモサイト

   ⚠️ 色（color / background-color / border-color 等）はここに書かない。
      配置・寸法・構造のみを担当する（担当：layout.css / responsive.css）。
   ⚠️ variables.css 以外でカスタムプロパティを新規定義しない。

   ⚠️⚠️ このファイルの一部の宣言は「死んで」いる（2026-09-04 CxOレビュー指摘）。
      index.html の読み込み順は
          reset → variables → base → layout → components → sections → animations → responsive
      であり、components.css / sections.css は同じセレクタ・同じプロパティを
      同じ詳細度で再宣言している箇所がある。同点なら後読みが勝つため、
      実際に画面へ出るのは後続ファイルの値である。
      **ここを直しても表示は変わらない**という事故を防ぐため、値が食い違う
      29箇所には行末に「⚠️ 実効値は◯◯.css が上書き」と注記してある。

      注記対象を再生成するコマンド（プロパティ名と値を突き合わせて差分を出す）:
        docs/preflight.ps1 の「CSSの重複宣言」章を実行する。

      ⚠️ 注記の無い重複（値が同一のもの）も約100箇所ある。これは
         「layout=幾何 / components=見た目」という層分けの結果であり意図的。
         値が一致しているうちは無害だが、**片方だけ直すと静かに壊れる**。
   ========================================================================== */

/* --------------------------------------------------------------------------
   コンテナ
   -------------------------------------------------------------------------- */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   セクション縦リズム
   ⚠️ p-hero は sections.css が min-height で管理するため対象外。
   -------------------------------------------------------------------------- */
.p-reasons,
.p-service,
.p-onestop,
.p-shaken,
.p-faq,
.p-price,
.p-flow,
.p-company,
.p-contact {
  padding-block: var(--section-py);
}

/* --------------------------------------------------------------------------
   S0  デモ告知帯 l-demoband（非固定）
   -------------------------------------------------------------------------- */
.l-demoband {
  width: 100%;
}

/* .l-demoband__details / __summary とそのマーカー打ち消しは 2026-09-04 に削除。
   デモ帯の折り畳み（details/summary）をやめて常時1行表示にしたため、対応する
   要素自体が存在しなくなった。詳細は components.css の同名の注記を参照。 */

.l-demoband__flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--sp-1) var(--sp-3);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  border-radius: var(--r-pill);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  font-size: var(--fs-small);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  font-weight: 700;
  line-height: 1;
}

.l-demoband__body {
  padding-block: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-demoband__flag--inline {
  margin-inline-end: var(--sp-2);
}

/* .l-demoband__credit は 2026-09-04 に削除（制作者クレジットの撤去に伴い
   要素自体が無くなった）。詳細は components.css の同名の注記を参照。 */

/* --------------------------------------------------------------------------
   ヘッダー l-header（追従）
   -------------------------------------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--h-header);
}

.l-header__brand {
  display: inline-flex;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  align-items: center;
  flex-shrink: 0;
}

.l-header__logo {
  display: block;
  height: auto;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  max-width: 100%;
}

.l-header__chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  border-radius: var(--r-pill);
  font-size: var(--fs-small);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  font-weight: 700;
  line-height: 1;
}

/* PC専用ナビ。モバイルでは非表示（1024px〜で responsive.css が表示に切替） */
.l-header__nav {
  display: none;
}

.l-header__navlist {
  display: flex;
  align-items: center;
  /* ⚠️ 2026-08-25 是正：「お問い合わせ」追加で5→6項目になったため、
     components.css 側で1024px幅に収めるべく gap を var(--sp-4) に詰めている
     （実際の表示値はそちらが後読みで勝つ）。ここが古い値のままだと
     このファイルを見ただけでは実際の間隔がわからなくなるため追従させる。 */
  gap: var(--sp-4);
  list-style: none;
}

.c-tel--header {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.l-header__burger {
  display: inline-flex;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.l-header__burger-bars {
  display: block;
  width: 22px;
  height: 2px;
}

/* スクロール後の高さ切替（js/nav.js が .is-scrolled を付与）
   ⚠️ トランジションは animations.css の担当のためここでは付与しない。 */
.l-header.is-scrolled .l-header__inner {
  min-height: var(--h-header-scrolled);
}

/* --------------------------------------------------------------------------
   モバイルドロワー l-drawer
   ⚠️ [hidden] は UA スタイルに委ねず明示的に display:none を勝たせる。
   -------------------------------------------------------------------------- */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  height: 100svh;
  display: flex;
  justify-content: flex-end;
}

.l-drawer[hidden] {
  display: none;
}

.l-drawer__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}

.l-drawer__panel {
  position: relative;
  z-index: 1;
  width: min(320px, 86vw);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  height: 100svh;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  max-height: 100svh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.l-drawer__close {
  display: inline-flex;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.l-drawer__list {
  margin-top: var(--sp-6);
  list-style: none;
  display: flex;
  flex-direction: column;
}

.l-drawer__link {
  display: block;
  padding-block: var(--sp-3);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.l-drawer__foot {
  margin-top: auto;
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.l-drawer__hours {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   指定4グリッド（モバイル基準＝1カラム／縦積み）
   -------------------------------------------------------------------------- */
.p-service__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  list-style: none;
}

.p-reasons__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  list-style: none;
}

.p-company__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
}

.p-flow__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  list-style: none;
  counter-reset: none;
}

.p-flow__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.p-flow__num {
  flex-shrink: 0;
  width: 44px;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  height: 44px;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  border-radius: var(--r-pill);  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  display: inline-flex;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
}

.p-flow__body {
  flex: 1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   S6 料金テーブル：横スクロールの唯一の例外
   -------------------------------------------------------------------------- */
.p-price__scroll {
  overflow-x: auto;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  -webkit-overflow-scrolling: touch;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
}

.p-price__table {
  width: 100%;
  min-width: 480px;  /* ⚠️ 実効値は sections.css が上書き（同詳細度・後読み） */
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   フッター l-footer
   -------------------------------------------------------------------------- */
.l-footer {
  padding-block: var(--section-py);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.l-footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.l-footer__logo {
  display: block;
  height: auto;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  max-width: 100%;
}

.l-footer__address {
  font-style: normal;
  line-height: var(--lh-body);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-footer__hours {
  font-size: var(--fs-small);
  line-height: var(--lh-body);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-footer__navlist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}

.l-footer__bottom {
  margin-top: var(--sp-8);  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   下部固定バー l-bottombar（モバイルのみ／ヒーロー通過後に出現）
   ⚠️ [hidden] は明示的に display:none を勝たせる。
   -------------------------------------------------------------------------- */
.l-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottombar);
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}

.l-bottombar[hidden] {
  display: none;
}

.l-bottombar__btn {
  flex: 1;  /* ⚠️ 実効値は components.css が上書き（同詳細度・後読み） */
}