/* components/approach-steps.css */
@layer components {
/* サポートの流れ：選んだ工程の説明（ステップと見出し → 説明と絵 → 判断できることの帯 → 開いて読む説明 → 下のリンク）
   6つの工程の札と下のリンクは choice.css、帯は decision-band.css、開いて読む項目の形は disclosure.css。JS が動かないときは、6つの工程を間をあけて順に並べる */
.approach-steps {
  gap: var(--sec);
  display: grid;
}
.approach-step__head {
  margin-bottom: var(--s-40);
}
.approach-step__label {
  color: var(--c-blue);
  letter-spacing: var(--ls-label);
  margin-bottom: var(--s-12);
  font: var(--fw-bold) var(--t4) / var(--lh-ui) var(--font-label);
}
.approach-step__head h2 {
  text-wrap: balance;
}
/* 左に説明、右に絵（説明 44：絵 50） */
.approach-step__main {
  grid-template-columns: minmax(0, 44fr) minmax(0, 50fr);
  align-items: start;
  gap: var(--s-32) var(--gap-l);
  display: grid;
}
.approach-step__text {
  color: var(--c-body);
  gap: var(--s-20);
  font-size: var(--t5);
  line-height: var(--lh-body);
  display: grid;
}
/* 絵は白い面にそのまま置く（枠や影を重ねない）。比率を保って全体を見せる */
.approach-step__visual img {
  width: 100%;
  height: auto;
  display: block;
}
.approach-step__visual figcaption {
  text-align: center;
  color: var(--c-muted);
  margin-top: var(--s-8);
  font-size: var(--t6);
  line-height: var(--lh-title);
}
/* 絵の下のひと言（「活かすもの」「補うもの」。説明用の印で、押せる見た目にしない） */
.approach-step__labels {
  color: var(--c-ink);
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-12) var(--s-48);
  margin-top: var(--s-16);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  display: flex;
}
.approach-step__labels li {
  align-items: center;
  gap: var(--s-12);
  display: flex;
}
.approach-step__labels li::before {
  content: "";
  background: var(--c-blue);
  border-radius: var(--r-xs);
  width: var(--approach-label-bar);
  height: 1em;
}
/* お客様が判断できること（帯の形は decision-band.css） */
.approach-step .decision-band {
  margin-top: var(--s-48);
}
.approach-step__more {
  gap: var(--s-8);
  margin-top: var(--s-24);
  display: grid;
}
/* ステップ6の補足「使い始めた後の使いにくさも、一緒に直します。」 */
.step-follow-up {
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  scroll-margin-top: var(--s-24);
  margin-top: var(--s-24);
  padding: var(--s-32) var(--s-40) var(--s-40);
}
.step-follow-up h3 {
  margin-bottom: var(--s-14);
  font-size: var(--t4);
  line-height: var(--lh-title);
}
.step-follow-up p {
  color: var(--c-body);
  max-width: var(--reading);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.step-follow-up p + p {
  margin-top: var(--s-12);
}
.step-follow-up .support-visual {
  margin-top: var(--s-24);
}
@media (max-width: 1050px) {
  .approach-step__main {
    column-gap: var(--s-32);
  }
}
/* スマホ：見出し、説明、絵、判断できること、開いて読む説明の順に縦に並べる */
@media (max-width: 767px) {
  .approach-step__head {
    margin-bottom: var(--s-24);
  }
  .approach-step__main {
    grid-template-columns: minmax(0, 1fr);
  }
  .approach-step__text {
    gap: var(--s-14);
  }
  .approach-step__visual {
    width: min(100%, var(--visual-w-sp));
    margin-inline: auto;
  }
  .approach-step__labels {
    gap: var(--s-8) var(--s-28);
  }
  .approach-step .decision-band {
    margin-top: var(--s-28);
  }
  .step-follow-up {
    border-radius: var(--r-xl);
    padding: var(--s-20) var(--s-16) var(--s-24);
  }
}
}
/* components/approach-values.css */
@layer components {
/* サポートの流れ：大切にすること（PC は左に絵、細い縦線をはさんで右に文。スマホは文、絵の順に縦に並べる） */
.approach-values {
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  display: grid;
}
.approach-values__image {
  order: -1;
  padding-right: var(--gap-l);
}
.approach-values__image img {
  width: 100%;
  height: auto;
  display: block;
}
.approach-values__text {
  border-left: 1px solid var(--c-line);
  padding: var(--s-24) 0 var(--s-24) var(--gap-l);
}
.approach-values__text .eyebrow {
  margin-bottom: var(--s-16);
}
.approach-values__text p:last-child {
  color: var(--c-body);
  margin-top: var(--s-24);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
/* タブレット：絵を少し小さくして、見出しが2行に収まる幅を文に渡す */
@media (max-width: 1050px) {
  .approach-values {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  }
  .approach-values__image {
    padding-right: var(--s-28);
  }
  .approach-values__text {
    padding-left: var(--s-32);
  }
}
@media (max-width: 767px) {
  .approach-values {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-28);
  }
  .approach-values__image {
    order: 0;
    width: min(100%, var(--visual-w-sp));
    margin-inline: auto;
    padding-right: 0;
  }
  .approach-values__text {
    border-left: 0;
    padding: 0;
  }
  .approach-values__text p:last-child {
    margin-top: var(--s-20);
  }
}
}
/* components/commitment-band.css */
@layer components {
/* サポートの流れの最後：「必要なサポートを、必要な範囲で。」（淡い青の面に、題・説明と相談のボタン） */
.commitment-band {
  padding-bottom: var(--sec);
}
.commitment-band__panel {
  background: var(--c-blue-wash);
  border-radius: var(--r-panel);
  justify-content: space-between;
  align-items: center;
  gap: var(--s-32) var(--gap-l);
  padding: var(--s-48) var(--s-56);
  display: flex;
}
.commitment-band h2 {
  text-wrap: balance;
  font-size: var(--t3);
}
.commitment-band p {
  color: var(--c-body);
  max-width: var(--lead-w);
  margin-top: var(--s-16);
  font-size: var(--t5);
  line-height: var(--lh-body);
}
.commitment-band .button {
  flex-shrink: 0;
}
@media (max-width: 1050px) {
  .commitment-band__panel {
    padding: var(--s-36);
  }
}
@media (max-width: 767px) {
  .commitment-band__panel {
    border-radius: var(--r-card);
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-28) var(--s-24);
  }
}
}