/* 03 導入の流れ —— このページ専用の差分 */

/* ===== ページ見出し帯 =====
   共通の .page-head .page-head--split ＋ .page-head__aside を使う。 */

/* 所要期間の3枠（申込から契約／発注から着荷／研修から運用開始） */
.duration-strip {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
}
.duration-strip__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 24px;
  background: var(--surface-alt);
}
.duration-strip__label { font-size: 12px; color: var(--text-muted); }
.duration-strip__value { font-size: 14px; color: var(--text-strong); }

/* ===== 導入の手順（STEP 01〜08） =====
   番号・名称・説明を3カラムに振り分けた明細行のリスト。
   treatment.css の .step-list（矢印つきの横並び3枠）とは別物なので名前を分けている。 */
.step-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-rows__item {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 420px);
  gap: 40px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--border-light);
}
.step-rows__item:first-child { border-top-color: var(--border); }
.step-rows__item:last-child { border-bottom: 1px solid var(--border); }
.step-rows__num {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold);
}
.step-rows__name {
  min-width: 0;
  font-size: 23px;
  line-height: 1.6;
}
.step-rows__text {
  min-width: 0;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--text-body);
}

/* ===== 受発注フォーム ===== */
.order-form-section .section-head { margin-bottom: 28px; }
.form-shots { --photo-h: 340px; gap: 24px; }

/* ===== お取扱いのお申し込み =====
   アートボードのCTA帯は淡色地ではなく地色のまま。 */
.cta-band { background: var(--surface); }

/* ===================== タブレット ===================== */
@media (max-width: 1024px) {
  /* 説明列を固定420pxのままにすると窮屈なので比率で畳む */
  .step-rows__item {
    grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
    gap: 12px 32px;
    padding: 26px 0;
  }
  .step-rows__text { grid-column: 2; }

  .form-shots { --photo-h: 280px; gap: 20px; }
}

/* ===================== スマートフォン ===================== */
@media (max-width: 767px) {
  /* 見出し帯：SPアートボードは gap 16px の縦積み */
  .page-head__title { line-height: 1.6; }

  .duration-strip { flex-direction: column; }
  .duration-strip__item {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
  }
  .duration-strip__value { font-size: 13px; }

  /* 手順：SPアートボードの余白は 24px 20px、行は縦積み */
  .step-section { padding: 24px 20px; }
  .step-rows__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
  }
  .step-rows__num { font-size: 11px; }
  .step-rows__name { font-size: 18px; }
  .step-rows__text { font-size: 12.5px; line-height: 1.95; }

  /* 受発注フォーム：SPアートボードは 32px 20px、金罫なし、画面は縦積み */
  .order-form-section { padding: 32px 20px; }
  .order-form-section .section-head { gap: 0; margin-bottom: 14px; }
  .order-form-section .section-head__rule { display: none; }
  .order-form-section .section__lead:not(:last-child) { margin-bottom: 14px; }
  .form-shots {
    --photo-h: 220px;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .form-shots .photo { gap: 6px; }
}