@charset "UTF-8";
/* =========================================================
   WWE — /flow/ 固有

   ⚠️ 複数ページから呼ぶ部品のCSSはここに書かない（components.css へ）。
   ========================================================= */

/* =========================================================
   [2] リード
   ========================================================= */
.wwe-fllead { padding-block: 40px; }
.wwe-fllead__body {
  font-size: var(--wwe-fs-lead);
  line-height: var(--wwe-lh-body);
  color: var(--wwe-text-body);
}
.wwe-fllead__body p + p { margin-top: 1em; }
.wwe-fllead__stance {
  margin-top: 1.4em;
  padding-left: 16px;
  border-left: 3px solid var(--wwe-gold);
  color: var(--wwe-text);
}
.wwe-fllead__stance strong { color: var(--wwe-navy); }

/* =========================================================
   [3] 12工程（4つのまとまり）
   ========================================================= */
.wwe-flow-groups { display: grid; gap: 28px; }

.wwe-flgroup {
  padding: 24px 20px;
  background: var(--wwe-bg-soft);
  border-radius: var(--wwe-radius-card);
}
/* ご相談／お見積もり は簡易表示。/price/ が担当する範囲なので情報量を落とす */
.wwe-flgroup--brief { background: var(--wwe-white); border: 1px solid var(--wwe-line); }

.wwe-flgroup__head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--wwe-gold);
}
.wwe-flgroup__badge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wwe-navy);
  color: var(--wwe-on-navy);
  font-family: var(--wwe-font-num);
  font-size: 16px;
  font-weight: var(--wwe-fw-bold);
}
.wwe-flgroup__title {
  font-size: var(--wwe-fs-h3);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-flgroup__note {
  grid-column: 2;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
}
.wwe-flgroup__close {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--wwe-gold-pale);
  border-radius: var(--wwe-radius-card);
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  line-height: 1.9;
}
.wwe-flgroup .wwe-more { margin-top: 14px; text-align: left; }

/* ---- 各工程 ---- */
.wwe-flsteps { display: grid; gap: 14px; }

.wwe-flstep {
  padding: 18px 18px;
  background: var(--wwe-white);
  border-radius: var(--wwe-radius-card);
}
.wwe-flgroup--brief .wwe-flstep {
  padding: 14px 0;
  border-top: 1px solid var(--wwe-line);
  border-radius: 0;
}
.wwe-flgroup--brief .wwe-flstep:first-child { border-top: 0; padding-top: 0; }

.wwe-flstep__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.wwe-flstep__no {
  flex: 0 0 auto;
  font-family: var(--wwe-font-num);
  font-size: 19px;
  font-weight: var(--wwe-fw-bold);
  /* 19px でも小さいので --wwe-gold（白地 3.29:1）ではなく gold-dark を使う */
  color: var(--wwe-gold-dark);
  line-height: 1.3;
}
.wwe-flstep__title {
  font-size: var(--wwe-fs-body);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}

/* ---- 3軸 ---- */
.wwe-flstep__axes { display: grid; gap: 12px; }
.wwe-flstep__label {
  font-size: var(--wwe-fs-small);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-text-mute);
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.wwe-flstep__text {
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.8;
}
/* 「ここで決まること」だけ強調する。このページで最も読ませたい軸 */
.wwe-flstep__axis--decide {
  padding-left: 14px;
  border-left: 3px solid var(--wwe-gold);
}
.wwe-flstep__axis--decide .wwe-flstep__label { color: var(--wwe-gold-dark); }
.wwe-flstep__axis--decide .wwe-flstep__text {
  color: var(--wwe-text);
  font-weight: var(--wwe-fw-bold);
}

/* =========================================================
   [4] 期間の目安
   ========================================================= */
.wwe-flterm { text-align: center; }
.wwe-flterm__main {
  font-size: var(--wwe-fs-lead);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  line-height: 1.9;
  font-feature-settings: var(--wwe-palt);
}
.wwe-flterm__note {
  margin-top: 12px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.9;
}

/* =========================================================
   TAB / PC
   ========================================================= */
@media (min-width: 768px) {
  .wwe-flgroup { padding: 28px 26px; }

  /* 3軸を横に並べる。工程間で軸の位置がそろい、横に見比べられる */
  .wwe-flstep__axes {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  /* 簡易表示のまとまりも同じ3列にする（軸の位置をページ全体でそろえるため） */
  .wwe-flgroup--brief .wwe-flstep__axes { gap: 16px; }
}

@media (min-width: 1024px) {
  .wwe-flow-groups { gap: 32px; }
  .wwe-flstep { padding: 22px 24px; }
}