/* ============================================================
   layout.css — 骨組み（l-）
   ============================================================ */

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

/* 画面幅いっぱいに広がるが左右に余白だけ持つ帯 */
.l-bleed {
  padding-inline: var(--gutter);
}

/* 左だけ余白を取り、右は画面端まで使う（カンプのSERVICE・STRENGTHがこの形）。
   狭い画面では中身が画面外へ出るので、1240px以上でだけこの形にする */
@media (min-width: 1240px) {
  .l-container--bleed-end {
    width: auto;
    max-width: calc(var(--container) + var(--gutter));
    margin-inline: var(--gutter) 0;
  }
}

/* --- セクションの上下余白 -------------------------------- */
.l-section {
  padding-block: var(--space-16);
}

.l-section--light {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

@media (min-width: 768px) {
  .l-section { padding-block: var(--space-22); }
}

/* --- ヘッダー -------------------------------------------- */
.l-header {
  /* 全ページ・全幅で固定追従（2026-09-11 園田さん指示）。最上部では透明、スクロールしたら黒の帯（.is-scrolled は JS が付ける） */
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
  row-gap: var(--space-3);
  flex-wrap: wrap;
}

/* 下層ページ：黒帯で固定表示 */
.l-header--solid {
  position: sticky;
  background: var(--color-header-bg);
  border-block-end: 1px solid var(--color-line);
}

/* スクロール後は黒の帯を敷く（透明のままだと下の文字と重なる） */
.l-header.is-scrolled {
  background: var(--color-header-bg);
  border-block-end: 1px solid var(--color-line);
}

/* メニューを開いている間は黒。メニュー本体（.c-nav）はヘッダーの下に画面いっぱいに広がる（component.css） */
.l-header.is-nav-open {
  background: var(--color-bg);
  border-block-end: 0;
}
body:has(.l-header.is-nav-open) { overflow: hidden; }

/* WordPressにログイン中は画面上端に管理バー（32px／782px以下は46px）が重なりロゴが隠れるので、その下へずらす（2026-09-14）。
   600px以下の管理バーはスクロールで流れて消えるため、main.js が --admin-offset を追いかけて書き換える。静的HTMLには .admin-bar が無いので効かない */
.admin-bar .l-header {
  --admin-offset: var(--wp-admin--admin-bar--height, 0px);
  inset-block-start: var(--admin-offset);
}

@media (min-width: 768px) {
  .l-header {
    gap: var(--space-8);
    padding: var(--space-6) var(--gutter);
  }
}

/* ナビを横1列に戻すのはハンバーガーが消える1240pxから */
/* ナビを横1列に戻すのはハンバーガーが消える1240pxから */
@media (min-width: 1240px) {
  .l-header { flex-wrap: nowrap; }
}

/* --- ヒーロー -------------------------------------------- */
.l-hero {
  position: relative;
  overflow: hidden;
  min-height: 34rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .l-hero {
    /* XDのヒーローは1920pxのとき878px＝画面幅の45.73% */
    min-height: max(26rem, 45.73vw);
  }
}

/* --- 左右並び（画像 → テキストの順に書く） --------------- */
.l-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .l-media {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }

  .l-media--reverse { flex-direction: row-reverse; }

  .l-media__img  { flex: 1 1 0; min-width: 0; }
  .l-media__body { flex: 1 1 0; min-width: 0; }
}

/* --- 見出し列 ＋ 内容列 ---------------------------------- */
.l-split {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .l-split {
    grid-template-columns: minmax(17.5rem, 0.9fr) 1.1fr;
    gap: var(--space-14);
    align-items: start;
  }

  /* 見出し列＋多列グリッドの型は1240pxまで1カラムのまま */
  .l-split--wide { grid-template-columns: 1fr; }


}

/* --- 自動で折り返す等幅グリッド -------------------------- */
.l-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

/* カンプ実測（01_top.png）：施工実績カードの隙間は14px */
.l-grid--tight { gap: 14px; --grid-gap: 14px; }

@media (min-width: 768px) {
  .l-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .l-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .l-grid--4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .l-grid--5 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

@media (min-width: 1240px) {
  .l-split--wide {
    grid-template-columns: minmax(18.75rem, 1fr) 2.477fr;
    gap: var(--space-6);
    align-items: center;
  }

  .l-grid--4 { grid-template-columns: repeat(4, 1fr); }

  .l-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .l-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* 折り返したとき、最後の段を画面の左右中央に置く。
   グリッドは端の列に寄ってしまうので、この用途だけ flex で組む */
.l-grid--wrap-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.l-grid--wrap-center > * { flex: 1 1 100%; }

@media (min-width: 768px) {
  .l-grid--wrap-center > * { flex: 0 1 calc((100% - 2 * var(--grid-gap, 2px)) / 3); }
}

@media (min-width: 1240px) {
  .l-grid--wrap-center > * { flex: 0 1 calc((100% - 4 * var(--grid-gap, 2px)) / 5); }
}

/* --- フッター -------------------------------------------- */
.l-footer {
  background: var(--color-bg-footer);
  padding-block-start: var(--space-12);
}

.l-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1240px) {
  .l-footer__cols {
    grid-template-columns: 1fr 1.06fr 1.06fr;
    gap: 0;
  }

  .l-footer__col + .l-footer__col {
    padding-inline: var(--space-14);
    border-inline-start: 1px solid var(--color-line);
  }

  .l-footer__col:first-child { padding-inline-end: var(--space-14); }
  .l-footer__col:last-child  { padding-inline-end: 0; }
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

@media (min-width: 1240px) {
  /* カンプ実測：マークの左端78px・著作権の右端1871px・下の余白71px */
  .l-footer {
    padding-block: 90px 59px;
    padding-inline: 78px 49px;
  }

  .l-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
}