/* ===================================================================
 * support.css — 居宅介護支援等(block/page/support.php)
 *
 * とは？: 定義の白い箱と主な業務(support-list を 2×2)。
 * ケアプラン作成の流れ: cld .step の丸を大きくし、つなぐ線を薄いピンクにする。
 * 流れの直後に負担の1文をピンクの枠で強調する。流れと枠は 720px の1列。
 * =================================================================== */

/* --- 居宅介護支援等とは？ ----------------------------------------- */

.support-duties {
  margin-top: var(--space-4xl);
}

@media (min-width: 768px) {
  .support-duties__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- ケアプラン作成の流れ ----------------------------------------- */

.support-flow .step {
  --StepMarker-size: 56px;
  margin-bottom: 2.5rem;
}

/* 項目の間は margin ではなく padding で空ける(margin だとつなぐ線が次の丸まで届かない)。
   行間は .step の既定(1.5)から本文の行間に合わせる */
.support-flow .step__item {
  padding-bottom: 2.5rem;
  line-height: inherit;
}

.support-flow .step__item:last-child {
  padding-bottom: 0;
}

/* 番号は見た目の装飾。ol の番号と二重に読み上げないよう、生成内容の代替テキストを空にする */
.support-flow .step__item::before {
  content: counter(step) / "";
  font-size: 1.5rem;
  line-height: 1;
}

.support-flow .step__item:not(:last-child)::after {
  background-color: color-mix(in srgb, var(--project-color-primary) 60%, transparent);
}

.support-flow .step__title {
  /* 本文を見出しの直下へ置くため、丸の高さで中央に揃える指定をやめ、1行目だけ丸の中央に合わせる */
  min-height: 0;
  padding-top: 13px;
  font-size: 1.25rem;
}

.support-flow-note {
  padding-inline: 2.5rem;
}

.support-flow-note__text {
  font-size: 1.375rem;
  line-height: 1.6;
}

@media (max-width: 767.98px) {

  .support-duties {
    margin-top: 2.5rem;
  }

  .support-flow .step {
    --StepMarker-size: 44px;
  }

  .support-flow .step__item {
    padding-bottom: var(--space-lg);
  }

  .support-flow .step__item::before {
    font-size: 1.25rem;
  }

  .support-flow .step__title {
    padding-top: 8px;
    font-size: 1.125rem;
  }

  .support-flow-note {
    padding-inline: var(--space-lg);
  }

  .support-flow-note__text {
    font-size: 1.125rem;
  }
}