@charset "UTF-8";

/* =========================================================
   稲垣建装  施工の流れページ専用スタイル
   ========================================================= */

.flow-line {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}
/* 縦のつなぎ線 */
.flow-line::before {
  content: "";
  position: absolute;
  left: 35px; top: 30px; bottom: 30px;
  width: 2px;
  background: linear-gradient(var(--teal), var(--teal-soft));
}

.flow-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 130px 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
}

/* 番号バッジ */
.flow-row__num {
  position: relative;
  z-index: 2;
  width: 72px; height: 72px;
}
.flow-row__num span {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.5rem;
  box-shadow: 0 0 0 6px var(--cream), var(--shadow-sm);
}

/* イラスト */
.flow-row__illust {
  width: 130px; height: 130px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--teal-soft);
  color: var(--teal);
}
.flow-row__illust svg { width: 76px; height: 76px; }

/* 本文 */
.flow-row__body {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
}
.flow-row__step {
  font-family: var(--serif);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--teal);
}
.flow-row__body h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 6px 0 12px; }
.flow-row__body p { font-size: 0.94rem; }
.flow-row__chip {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-deep);
  background: var(--teal-soft);
  border: 1px solid #d3e7e7;
  padding: 6px 16px;
  border-radius: 999px;
}

/* 補足カード */
.flow-note__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.note-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
}
.note-card h3 { font-size: 1.16rem; margin-bottom: 12px; color: var(--teal-deep); }
.note-card p { font-size: 0.9rem; }

@media (max-width: 760px) {
  .flow-line::before { left: 27px; }
  .flow-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "num body"
      "illust body";
    gap: 16px 18px;
    align-items: start;
  }
  .flow-row__num { grid-area: num; width: 56px; height: 56px; }
  .flow-row__num span { width: 56px; height: 56px; font-size: 1.2rem; box-shadow: 0 0 0 5px var(--cream), var(--shadow-sm); }
  .flow-row__illust { grid-area: illust; width: 56px; height: 56px; border-radius: var(--radius-sm); }
  .flow-row__illust svg { width: 34px; height: 34px; }
  .flow-row__body { grid-area: body; padding: 22px 22px; }
  .flow-note__inner { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}