/* ==========================================================================
   店舗・オフィスの工事のページだけの CSS（キャンバス案E v51 の ConstructionE。/construction/）
   --------------------------------------------------------------------------
   このページでだけ読む（inc/assets.php の planart_page_styles() の 'construction'。style.css のあと）。
   色・余白・角丸・影はトークンだけを使う（verify_site.py が見張る）。

   ■ このページの段のうち、共通の部品で組めた物（見た目は style.css）
     ヒーロー（型2・写真が枠いっぱい）＝22章／英字の帯＝12章／できること＝23章／デザインと一緒に頼むと の頭＝27章／
     施工事例＝26章／工事の進め方＝24章／よくある質問＝21章／相談の帯＝10章。
   ■ ここに書いた物（このページにしか無い組み方）
     1. （このページだけのトークンは、style.css の 0章へ移した。2026-11-03 まとめ。名前はそのまま）
     2. デザインと一緒に頼むと の中身：3つの良さと、工程表（例）（parts/construction-with-design.php）
     3. 工事の進め方：最後の丸（お引き渡し）だけ緑の塗り（キャンバスの 05。ほかの板の流れには無い）
     4. 工事会社・工務店のみなさまへ（薄い緑の面に、文と黒いボタン。2026-11-04 に「元請・工務店」から言いかえた）
     5. 動き：工程表の棒が左から伸びる（style.css 28章の決まりと同じ。.is-motion と prefers-reduced-motion の中だけ）
   ========================================================================== */

/* ---- 2. デザインと一緒に頼むと の中身（黒い面の中。parts/construction-with-design.php） ---- */
.p-construction-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-split-gap);
}

.p-construction-with__points {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.p-construction-with__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-dark-line);
}

.p-construction-with__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-20);
  padding-block: var(--s-22);
  border-bottom: 1px solid var(--c-dark-line);
}

/* 番号は読み上げない飾り（aria-hidden）。ミントは黒い面の上で 12.97:1 */
.p-construction-with__num {
  flex: 0 0 auto;
  color: var(--c-mint);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.p-construction-with__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-on-dark-strong);
  font-size: clamp(17px, 1.4cqi, 20px);
  line-height: 1.6;
  font-weight: 600;
}

.p-construction-with__link {
  align-self: flex-start;
}

/* 工程表（例）：白いカード */
.p-construction-gantt {
  box-sizing: border-box;
  flex: 1 1 460px;
  min-width: 0;
  padding: var(--sp-gantt);
  border-radius: var(--r-card);
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: var(--sh-on-dark);
}

.p-construction-gantt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-12);
  padding-bottom: var(--s-14);
  border-bottom: 1px solid var(--c-line-soft);
}

.p-construction-gantt__title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.p-construction-gantt__sub {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
}

/* 「ご相談」と「開店」の目盛り（読み上げない飾り）。幅 760px 以下は、左の行の名前の分の空きを出さない（.u-hide-sm） */
.p-construction-gantt__scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-16);
  padding-block: var(--s-12) var(--s-2);
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}

.p-construction-gantt__spacer {
  flex: 0 0 11em;
}

.p-construction-gantt__axis {
  position: relative;
  display: block;
  flex: 1 1 220px;
  height: 1.4em;
}

/* 目盛りの字は折り返さない（幅 375px だと「開店」の置き場が 2字より狭くなり、縦に割れる。キャンバスは 390px の板なので見えていない） */
.p-construction-gantt__start {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.p-construction-gantt__open {
  position: absolute;
  left: 92%;
  top: 0;
  translate: -50% 0;
  color: var(--c-green);
  font-weight: 700;
  white-space: nowrap;
}

.p-construction-gantt__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-16);
  padding-block: var(--s-14);
  border-bottom: 1px solid var(--c-line-menu);
}

.p-construction-gantt__row--last {
  border-bottom: 0;
}

.p-construction-gantt__label {
  flex: 0 0 11em;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.p-construction-gantt__track {
  position: relative;
  display: block;
  flex: 1 1 220px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--c-gantt-track);
}

/* 棒の始まり・長さ・色（行は inc/pages/construction.php の 'bar'。キャンバスの値） */
.p-construction-gantt__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-pill);
  transform-origin: 0 50%;
}

.p-construction-gantt__bar--1 {
  left: 8%;
  width: 76%;
  background: var(--c-ink);
}

.p-construction-gantt__bar--2 {
  left: 4%;
  width: 56%;
  background: var(--c-green);
}

.p-construction-gantt__bar--3 {
  left: 30%;
  width: 62%;
  background: var(--c-green-bright);
}

/* 開店の日の縦の線 */
.p-construction-gantt__mark {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 92%;
  width: 2px;
  background: var(--c-green);
}

.p-construction-gantt__caption {
  padding-top: var(--s-14);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
}

/* ---- 3. 工事の進め方：最後の丸（お引き渡し）だけ緑の塗り。番号は読み上げない飾り（白い字は緑の上で 5.30:1） ---- */
.p-construction-flow .c-flow__step:last-child .c-flow__num {
  border-color: var(--c-green);
  background: var(--c-green);
  color: var(--c-on-dark);
}

/* ---- 4. 工事会社・工務店のみなさまへ ---- */
.p-construction-partner__inner {
  padding-block: var(--sp-section-partner);
}

.p-construction-partner__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24) var(--s-40);
  padding: var(--sp-partner-panel);
  border: 1px solid var(--c-green-pale-line);
  border-radius: var(--r-32);
  background: var(--c-green-pale);
}

.p-construction-partner__body {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.p-construction-partner__title {
  color: var(--c-ink);
  font-size: var(--fs-h2-split);
  line-height: 1.3;
  font-weight: 700;
  font-feature-settings: 'palt';
}

/* 見出しの文節（「工事会社・」「工務店のみなさまへ」）。2026-11-04 素人の目の見直し P-31 で「元請」を「工事会社」にして長くなり、
   幅 390px で「みなさ／まへ」と語の途中で折れたため、文節の途中では折らない（style.css の .c-diag__title-part と同じ） */
.p-construction-partner__title-part {
  display: inline-block;
}

.p-construction-partner__lead {
  max-width: 32em;
  color: var(--c-text);
  font-size: clamp(16px, 1.3cqi, 18px);
  line-height: 1.8;
}

/* 黒い大ボタン（c-btn--lg）を、キャンバスの元請の段の大きさに（字 16px・左の余白 24px） */
.p-construction-partner__button {
  flex: 0 0 auto;
  padding-inline: var(--s-24) var(--s-8);
  font-size: 16px;
}

/* ---- 5. 動き（style.css 28章と同じ決まり：動きを減らす設定でない人だけ・.is-motion のときだけ・スクロールに合わせて動くブラウザだけ） ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* 工程表の棒が左から伸びる（キャンバスの .pe-grow。遅れは --i。キーフレームは style.css の pa-grow） */
    .is-motion .p-construction-gantt__bar {
      animation: pa-grow linear both;
      animation-timeline: view();
      animation-range: entry calc(20% + var(--i, 0) * 12%) cover calc(48% + var(--i, 0) * 8%);
    }
  }
}