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

   .wwe-first / .wwe-plans は page-home.css にも同名がある。
   ⚠️ トップの [13] と同じ部品なので、いずれ components.css へ移す候補。
      いまは page-home.css / page-price.css の両方で同時に読まれることが無いため成立している。
      3ページ目で使うことになったら必ず components.css へ移すこと。
   ========================================================= */

/* =========================================================
   [2] リード
   ========================================================= */
.wwe-prlead { padding-block: 40px 24px; }
.wwe-prlead__body {
  font-size: var(--wwe-fs-lead);
  line-height: var(--wwe-lh-body);
  color: var(--wwe-text-body);
}
.wwe-prlead__body p + p { margin-top: 1em; }
.wwe-prlead__strong {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  line-height: 1.6;
  font-feature-settings: var(--wwe-palt);
}

/* =========================================================
   [3] 初回相談（唯一の確定金額）
   トップ [13] と同じ .wwe-first を使う
   ========================================================= */
.wwe-prfirst { padding-block: 24px 40px; }
.wwe-prfirst .wwe-first { margin-bottom: 0; }

/* =========================================================
   [4] 4プラン（トップ [13] と同じ .wwe-plans）
   ========================================================= */
.wwe-plans { display: grid; gap: 16px; }
.wwe-plans__item {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: var(--wwe-white);
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-card);
}
.wwe-plans__title {
  font-size: var(--wwe-fs-h3);
  color: var(--wwe-navy);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--wwe-gold);
  font-feature-settings: var(--wwe-palt);
}
.wwe-plans__spec { display: grid; gap: 12px; flex: 1 1 auto; }
.wwe-plans__spec dt {
  font-size: var(--wwe-fs-small);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-gold-dark);
  letter-spacing: .04em;
}
.wwe-plans__spec dd {
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.75;
}
/* 対象者だけ濃くする。.wwe-plans__spec dd（0,1,1）に勝つため dd を含める */
.wwe-plans__spec dd.wwe-plans__target { font-weight: var(--wwe-fw-bold); color: var(--wwe-text); }
.wwe-plans__includes { display: grid; gap: 4px; }
.wwe-plans__includes li { position: relative; padding-left: 1em; }
.wwe-plans__includes li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--wwe-gold);
}
.wwe-plans__price {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--wwe-line);
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-text-body);
  text-align: center;
}

.wwe-plans__close {
  margin-top: 26px;
  text-align: center;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
}
.wwe-plans__budget {
  margin-top: 8px;
  text-align: center;
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
}

/* =========================================================
   [5] 別途になるもの
   ========================================================= */
.wwe-prsep { display: grid; gap: 10px; }
.wwe-prsep__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--wwe-white);
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-card);
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text);
  line-height: 1.8;
}
.wwe-prsep__mark { flex: 0 0 auto; color: var(--wwe-text-mute); font-weight: var(--wwe-fw-bold); }
.wwe-prsep__ssl {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--wwe-bg-soft);
  border-radius: var(--wwe-radius-card);
  font-size: var(--wwe-fs-small);
  color: var(--wwe-text-body);
  line-height: 1.8;
}

/* =========================================================
   [6] 何によって金額が変わるか
   ========================================================= */
.wwe-prhow { display: grid; gap: 14px; }
.wwe-prhow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  padding: 18px 20px;
  background: var(--wwe-white);
  border-radius: var(--wwe-radius-card);
}
.wwe-prhow__no {
  font-family: var(--wwe-font-num);
  font-size: 17px;
  font-weight: var(--wwe-fw-bold);
  /* 17px と小さいので --wwe-gold（白地 3.29:1）では読みづらい */
  color: var(--wwe-gold-dark);
  line-height: 1.5;
}
.wwe-prhow__title {
  font-size: var(--wwe-fs-body);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
}
.wwe-prhow__note {
  grid-column: 2;
  margin-top: 4px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.8;
}
.wwe-prhow__close {
  margin-top: 24px;
  text-align: center;
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
}

/* =========================================================
   [7] お見積もりまでの流れ
   ========================================================= */
.wwe-prflow { display: grid; gap: 0; }
.wwe-prflow__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--wwe-line);
}
.wwe-prflow__item:first-child { border-top: 0; padding-top: 0; }
.wwe-prflow__no {
  font-family: var(--wwe-font-num);
  font-size: 20px;
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-gold-dark);
  line-height: 1.4;
}
.wwe-prflow__title {
  font-size: var(--wwe-fs-body);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-prflow__note {
  margin-top: 4px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.8;
}

/* 無料の範囲。金額の話なので、目立たせすぎず、見落とさせない */
.wwe-prflow__free {
  margin-top: 24px;
  padding: 16px 18px;
  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;
  text-align: center;
}
.wwe-prflow__notfree {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-card);
}
.wwe-prflow__notfree-label {
  font-size: var(--wwe-fs-small);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-text);
  margin-bottom: 8px;
}
.wwe-prflow__notfree-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.wwe-prflow__notfree-list li {
  position: relative;
  padding-left: 1em;
  font-size: var(--wwe-fs-small);
  color: var(--wwe-text-body);
}
.wwe-prflow__notfree-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--wwe-text-mute);
}

/* =========================================================
   TAB / PC
   ========================================================= */
@media (min-width: 768px) {
  .wwe-plans  { grid-template-columns: repeat(2, 1fr); }
  .wwe-prsep  { grid-template-columns: repeat(2, 1fr); }
  .wwe-prhow  { grid-template-columns: repeat(2, 1fr); }

  /* 4軸の位置をカード間でそろえる。
     「含まれる内容」の項目数がプランごとに違う（4〜7個）ため、
     普通に組むと「完成するもの」「対応範囲」の高さがカードごとにずれ、
     横に見比べられなくなる。比較できることがこのセクションの目的なので、
     subgrid で行を共有して必ずそろえる。

     行の内訳: 見出し1 ＋ dl（dt4 + dd4 = 8）＋ 金額1 = 10行
     ⚠️ カードの中に要素を足すと行数が変わってずれる。
        足すときは span の数も必ず直すこと。
        （/web-design/ へのリンクをカード内に置かずグリッドの外に出しているのはこのため）

     subgrid 非対応のブラウザでは、従来どおり各カードが自前の高さになるだけで崩れない。 */
  .wwe-plans__item {
    display: grid;
    grid-row: span 10;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .wwe-plans__spec {
    grid-row: span 8;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

@media (min-width: 1024px) {
  .wwe-plans { grid-template-columns: repeat(4, 1fr); }
}