/* ============================================================
   構図パターン A〜J（実証済み）

   ⚠️ このファイルは編集しない。案件固有の見た目は index.html 側で足す。
   ここを直すと「最低限の品質」の土台が崩れる。

   使い方：
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="layouts.css">
     <section class="section lay-D" data-layout="D"> …

   ・余白・文字サイズは全て tokens.css の変数から取っている。
     数値を直書きしていないので、tokens.css を変えれば全構図に効く。
   ・data-layout は判定スクリプトが読む。必ず書く。
     bash _scripts/lp_layout_check.sh src/index.html

   構図の意味と勘所：_templates/profiles/01_LP構図別の勘所.md
   ============================================================ */

/* ---------- 土台（全構図で共有） ---------- */
.section {
  position: relative;
  padding-block: var(--space-section);
  background: var(--color-bg);
  overflow: hidden;
}
.section--alt  { background: var(--color-bg-alt); }
.section--dark { background: var(--color-main); color: var(--color-on-main); }

.inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-side);
}
.inner--narrow { max-width: calc(var(--max-w-narrow) + var(--space-side) * 2); }
.inner--mid    { max-width: calc(var(--max-w-mid)    + var(--space-side) * 2); }
.inner--cta    { max-width: calc(var(--max-w-cta)    + var(--space-side) * 2); }

/* 固定ヘッダーの分だけ手前で止める */
[id] { scroll-margin-top: var(--header-h); }

/* 見出しブロック（構図をまたいで共通） */
.label {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--label-size);
  font-weight: var(--weight-num);
  letter-spacing: var(--label-track);
  color: var(--label-color);
  margin-bottom: var(--space-tight);
}
.section--dark .label { color: var(--color-accent); }

.h2 {
  font-family: var(--font-display);   /* 案件の見出し書体（既定は本文と同じ） */
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-main);
}
.h2--sm { font-size: var(--text-h2-sm); }
.section--dark .h2 { color: var(--color-on-main); }

.lead { margin-top: var(--space-heading); color: var(--color-text-mute); }
.body { margin-top: var(--space-h2-body); position: relative; }

/* 背景の装飾図形。濃度は tokens.css で固定（本文の可読性を守る） */
.decor {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--font-num); font-weight: var(--weight-num);
  color: var(--decor-light); line-height: 1;
}
.section--dark .decor { color: var(--decor-dark); }

/* ============================================================
   A｜フルブリード
   画面の端まで写真か濃色を敷き、上に文字を乗せる
   ============================================================ */
.lay-A {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  color: var(--color-on-main);
  overflow: hidden;
}
/* 写真を敷く場合 */
.lay-A__bg {
  position: absolute; inset: 0; z-index: var(--z-bg);
  width: 100%; height: 100%; object-fit: cover;
}
/* 斜めに片側だけ濃くする。全面を均一に暗くしない */
.lay-A--photo::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-overlay);
  background: linear-gradient(100deg,
    var(--color-main) 0%,
    color-mix(in srgb, var(--color-main) 92%, transparent) 42%,
    color-mix(in srgb, var(--color-main) 55%, transparent) 68%,
    color-mix(in srgb, var(--color-main) 30%, transparent) 100%);
}
/* 写真なし（濃色ベタ）の場合 */
.lay-A--solid { background: var(--color-main); }
/* 文字ブロックは端まで伸ばさない */
.lay-A__body { max-width: 660px; }
.lay-A--center { text-align: center; }
.lay-A--center .lay-A__body { max-width: none; margin-inline: auto; }

/* ============================================================
   B｜2カラム（テキスト58〜62 : 画像38〜42）
   2回目以降は .lay-B--rev で左右を入れ替える
   ============================================================ */
.lay-B__grid {
  display: grid; grid-template-columns: 60fr 40fr;
  gap: var(--space-group); align-items: center;
}
.lay-B--rev .lay-B__grid { grid-template-columns: 40fr 60fr; }
.lay-B--rev .lay-B__grid > *:first-child { order: 0; }
.lay-B__img { width: 100%; object-fit: cover; border-radius: var(--radius-card); }

/* ============================================================
   C｜中央宣言
   短い文だけを中央に。左右に大きく余白
   ============================================================ */
.lay-C { text-align: center; }
.lay-C__text { margin-top: var(--space-heading); font-size: var(--text-lead); }

/* ============================================================
   D｜カードグリッド（全体の40%以下に抑える）
   ============================================================ */
.grid   { display: grid; gap: var(--space-card-gap); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: var(--card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}
/* セクションと背景を反転させる */
.section--alt .card              { background: var(--color-bg); }
.section:not(.section--alt) .card { background: var(--color-bg-alt); }

.card__badge {
  display: inline-block; padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--badge-bg); color: var(--badge-color);
  font-family: var(--font-num); font-size: var(--text-note);
  font-weight: var(--weight-num); line-height: 1.6;
  margin-bottom: var(--space-tight);
}
.card__title {
  font-size: var(--text-card); font-weight: var(--weight-bold);
  line-height: var(--leading-heading); color: var(--color-main);
}
.card__text { margin-top: var(--space-tight); font-size: var(--text-sm); }

/* ============================================================
   E｜比較表
   ============================================================ */
.lay-E__wrap { margin-top: var(--space-h2-body); overflow-x: auto; border-radius: var(--radius-card); }
.lay-E__table {
  width: 100%; min-width: var(--table-min-w);
  border-collapse: collapse; font-size: var(--text-sm);
  background: var(--color-bg);
}
.lay-E__table th,
.lay-E__table td { padding: var(--space-inner); border: 1px solid var(--color-border); text-align: start; }
.lay-E__table thead th {
  background: var(--color-main); color: var(--color-on-main);
  font-weight: var(--weight-bold); height: var(--table-head-h);
}
.lay-E__table tbody th { width: 28%; font-weight: var(--weight-bold); color: var(--color-main); }
/* 自社列に薄く色を敷く */
.lay-E__own { background: color-mix(in srgb, var(--color-accent) 8%, transparent); font-weight: var(--weight-medium); }

/* ============================================================
   F｜ロゴウォール（FV直下に置く）
   帯として見せる。セクションとして厚くしない
   ============================================================ */
.lay-F {
  padding-block: var(--space-group);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.lay-F__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-group); flex-wrap: wrap;
}
.lay-F__label { font-size: var(--text-note); font-weight: var(--weight-bold); color: var(--color-text-mute); }
.lay-F__list { display: flex; align-items: center; gap: var(--space-group); flex-wrap: wrap; }
.lay-F__item { display: flex; align-items: center; gap: var(--space-hair); color: var(--color-main); }
.lay-F__item svg { width: var(--icon-head); height: var(--icon-head); }
.lay-F__item span { font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* ============================================================
   G｜数字バンド
   ⚠️ 裏付けのない数字を出さない。根拠がなければ構図Fに替える
   ============================================================ */
.lay-G__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-card-gap); }
.lay-G__item { text-align: center; }
/* 数字とラベルのサイズ差を3倍以上つける */
.lay-G__num {
  font-family: var(--font-num); font-weight: var(--weight-num);
  font-size: var(--text-num-xl); line-height: 1.1; color: var(--color-accent);
}
.lay-G__label { margin-top: var(--space-hair); font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* ============================================================
   H｜ステップ
   4つを貫く線を入れる。並べるだけでは「流れ」に見えない
   ============================================================ */
.lay-H__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-inner); position: relative; }
.lay-H__flow::before {
  content: ""; position: absolute;
  inset-block-start: calc(var(--icon-badge) / 2); inset-inline: 12%;
  height: 2px; background: var(--color-border);
}
.lay-H__step { position: relative; text-align: center; }
.lay-H__num {
  width: var(--icon-badge); height: var(--icon-badge); margin: 0 auto;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--color-main); color: var(--color-on-main);
  font-family: var(--font-num); font-weight: var(--weight-num); font-size: var(--text-sm);
}
.lay-H__ico { width: var(--icon-head); height: var(--icon-head); color: var(--color-sub); margin: var(--space-inner) auto 0; }
.lay-H__name { margin-top: var(--space-hair); font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-main); line-height: 1.5; }

/* ============================================================
   I｜重なり（平面に奥行きを出す唯一の構図。最低1箇所は使う）
   ============================================================ */
.lay-I { position: relative; }
.lay-I__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-box); }
.lay-I__overlay {
  position: relative; z-index: var(--z-raise);
  margin-top: calc(var(--overlap) * -1);      /* 重なり量。tokens.css で定義 */
  margin-inline: var(--space-group);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-card-gap);
}
.lay-I__card {
  padding: var(--card-pad); border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: var(--shadow-cta);              /* 影がないと重なって見えない */
}

/* ============================================================
   J｜開閉リスト（details/summary。JSなしでキーボード操作に対応）
   ============================================================ */
.lay-J { display: flex; flex-direction: column; gap: var(--space-tight); }
.lay-J__item { border-radius: var(--radius-card); background: var(--color-bg-alt); overflow: hidden; }
.lay-J__q {
  display: flex; align-items: center; gap: var(--space-hair);
  padding: var(--space-heading);
  font-size: var(--text-lead); font-weight: var(--weight-bold); line-height: 1.6;
  color: var(--color-main); cursor: pointer; list-style: none;
}
.lay-J__q::-webkit-details-marker { display: none; }
.lay-J__mark { font-family: var(--font-num); color: var(--color-accent); flex: none; }
.lay-J__sign {
  margin-inline-start: auto; flex: none;
  width: var(--icon-list); height: var(--icon-list); color: var(--color-sub);
  transition: transform var(--motion-base) var(--ease-out);
}
.lay-J__item[open] .lay-J__sign { transform: rotate(180deg); }
.lay-J__a { padding: 0 var(--space-heading) var(--space-heading); }

/* ============================================================
   スマホ（767px以下）
   文字サイズ・余白の切り替えは tokens.css が行う。
   ここには「並びが変わるもの」だけを書く。
   ============================================================ */
@media (max-width: 767px) {
  /* A：横グラデーションは効かないので上下方向に変える */
  .lay-A--photo::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-main) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-main) 94%, transparent) 100%);
  }
  .lay-A { min-height: auto; }

  /* B：必ず1カラム。順序は案件ごとに index.html 側で決める */
  .lay-B__grid,
  .lay-B--rev .lay-B__grid { grid-template-columns: 1fr; gap: var(--space-block); }
  .lay-B--rev .lay-B__grid > *:first-child { order: 0; }

  /* C：中央寄せは左揃えに戻す（2行以上だと目線が迷う） */
  .lay-C { text-align: start; }

  /* D：1列 */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* F：詰める */
  .lay-F__inner { gap: var(--space-inner); }
  .lay-F__list  { gap: var(--space-block); }

  /* G：2列 */
  .lay-G__grid { grid-template-columns: repeat(2, 1fr); }

  /* H：縦積み。貫く線を消し、番号と名前を横並びにする */
  .lay-H__flow { grid-template-columns: 1fr; gap: var(--space-tight); }
  .lay-H__flow::before { display: none; }
  .lay-H__step { display: flex; align-items: center; gap: var(--space-inner); text-align: start; }
  .lay-H__num { margin: 0; }
  .lay-H__ico { display: none; }
  .lay-H__name { margin-top: 0; }

  /* I：重なりを解除する（狭い画面で重ねると両方読めない） */
  .lay-I__overlay {
    margin-top: var(--space-block); margin-inline: 0;
    grid-template-columns: 1fr;
  }
  .lay-I__img { aspect-ratio: 4 / 3; }
}