/* 07 施術設計と運用 —— このページ専用の差分 */

/* ===== ページ見出し帯 =====
   共通の .page-head .page-head--split を使う。アートボード07に合わせた差分だけ残す。 */
.page-head__eyebrow { letter-spacing: .18em; }
.page-head__title {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: .02em;
}
.page-head__lead { max-width: 600px; }

/* ===== 4つの施術設計 ===== */
.card--tall { min-height: 176px; }
/* SPアートボードでのみ出す、カード下のまとめ書き */
.design-note { display: none; }

/* ===== 希釈の考え方 ===== */
.dilution {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.dilution__card {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
  padding: 36px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.dilution__value {
  flex: none;
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.4vw, 44px);
  color: var(--gold);
}
.dilution__label {
  min-width: 0;
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-strong);
}

/* ===== 1回あたりのオペレーション（連番つきの手順） ===== */
.step-list {
  display: flex;
  align-items: stretch;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
}
/* 箱と箱のあいだの矢印。余白の中央に置く */
.step-list__item + .step-list__item::before {
  content: "→";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--gold);
}
.step-list__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
}
.step-list__name { font-size: 21px; line-height: 1.6; }
.step-list__text { font-size: 13.5px; line-height: 2; color: var(--text-muted); }

/* ===== 運用プログラムの更新（注記つきの囲み） ===== */
.note-card { gap: 16px; padding: 32px 36px; }
.note-card__text { font-size: 14.5px; line-height: 2.1; color: var(--text-body); }
.note-card__foot {
  font-size: 13px;
  line-height: 2;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

/* ===================== タブレット ===================== */
@media (max-width: 1024px) {
  /* このページの見出し帯だけ左右の振り分けを広めに畳む */
  .page-head--split { gap: 32px; }

  .step-list { gap: 32px; }
  .step-list__item { padding: 26px 22px; }
  .step-list__item + .step-list__item::before { left: -32px; width: 32px; }

  /* 導入前にご確認いただくこと（濃色面の明細） */
  .spec-list--on-ink .spec-list__row {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 24px;
  }
}

/* ===================== スマートフォン ===================== */
@media (max-width: 767px) {
  /* SPアートボードの余白は 32px 20px */
  .section { padding: 32px 20px; }
  .section-head { gap: 14px; margin-bottom: 14px; }
  .section-head__rule { width: 48px; }

  /* 上のタブレット指定はSPにも掛かるので、共通値に戻す */
  .page-head--split { gap: 16px; }
  .page-head__eyebrow { letter-spacing: .16em; }
  .page-head__title { line-height: 1.6; }

  /* 4つの施術設計：SPは2列・番号と名称だけにし、説明は下にまとめる */
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card--tall { gap: 8px; padding: 18px; min-height: 0; }
  .card__num { font-size: 10px; letter-spacing: .1em; }
  .card__text { display: none; }
  .design-note {
    display: block;
    margin-top: 14px;
    font-size: 11.5px;
    line-height: 1.95;
    color: var(--text-muted);
  }

  /* 希釈の考え方 */
  .dilution { gap: 14px; }
  .dilution__card { gap: 14px; padding: 24px; }
  .dilution__value { font-size: 32px; }
  .dilution__label { font-size: 13px; line-height: 1.95; }

  /* 手順は縦積みにし、矢印を下向きに差し替える */
  .step-list { flex-direction: column; gap: 36px; }
  .step-list__item { gap: 8px; padding: 20px; }
  .step-list__item + .step-list__item::before {
    content: "↓";
    top: -36px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 36px;
    font-size: 13px;
  }
  .step-list__num { font-size: 10px; letter-spacing: .14em; }
  .step-list__name { font-size: 17px; }
  .step-list__text { font-size: 12.5px; line-height: 1.95; }

  /* 導入前にご確認いただくこと */
  .section--ink .section-head__title br { display: none; }
  .spec-list--on-ink .spec-list__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
  }
  .spec-list--on-ink .spec-list__term { font-size: 12.5px; }
  .spec-list--on-ink .spec-list__desc { font-size: 12.5px; line-height: 1.95; }

  /* 運用プログラムの更新 */
  .note-card { gap: 12px; padding: 20px; }
  .note-card__text { font-size: 12.5px; line-height: 2; }
  .note-card__foot { font-size: 11.5px; line-height: 1.95; padding-top: 12px; }

  /* CTA帯はSPアートボードでは縦積みのボタン */
  .cta-band { padding: 40px 20px; }
}