/* =========================================================
   カーペット清掃：ご利用の流れ（section.flow）
========================================================= */

/* セクション背景（全体は白でOKならこのまま） */
.flow {
  background: #ffffff;
}

/* 白いカード風の囲み */
.flow .container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
  padding: 24px 32px 32px;
}

/* 見出しは .svc-section-head 既存を利用 */

/* ------- 手順リスト本体 ------- */
.flow .steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

/* 1つのステップ */
.flow .steps li {
  position: relative;
  padding: 0 0 28px 72px;  /* 左に丸＋線のスペース */
  font-weight: 600;
}

/* 1つめの説明文の前に少し公平に余白 */
.flow .steps li:first-child .step-desc {
  margin-top: 6px;
}

.flow .steps li:last-child {
  padding-bottom: 24px;
}

/* 縦線（①〜③の間／③〜ボタンの手前まで） */
.flow .steps li::before {
  content: "";
  position: absolute;
  left: 36px;              /* 丸数字のど真ん中 */
  top: 20px;               /* 丸の下あたりから線を伸ばす */
  bottom: -20px;           /* 次の丸の少し上で止まる */
  border-left: 2px solid #a9d9c0;  /* 少し淡いグリーン */
}

/* 一番最後のステップだけ、線をボタン方向まで少し伸ばす */
.flow .steps li:last-child::before {
  bottom: 48px;            /* ボタンの少し手前で終わるイメージ */
}

/* ①〜③ の丸数字 */
.flow .steps li > span {
  position: absolute;
  left: 20px;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);   /* 3Sのグリーン */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
}

/* 各ステップの説明文 */
.flow .step-desc {
  margin: 6px 0 0;
  font-size: .92rem;
  line-height: 1.75;
  font-weight: 400;
}

/* Step2だけ行間を少し広めに */
.flow .steps li:nth-child(2) .step-desc {
  line-height: 1.9;
}


/* ボタン行 */
.flow .center {
  margin-top: 8px;
  text-align: left;        /* デザインどおり左寄せ。中央にしたければ center に */
}

/* ボタン */
.flow .btn {
  padding-inline: 2.8em;
}


/* --------- SP（～600px）調整 --------- */
@media (max-width: 600px) {

  .flow .container {
    padding: 20px 16px 24px;
  }

  .flow .steps li {
    padding-left: 64px;
    padding-bottom: 24px;
  }

  .flow .steps li::before {
    left: 32px;
  }

  .flow .steps li > span {
    left: 16px;
  }

  .flow .center {
    text-align: center;
  }

  .flow .btn {
    display: inline-block;
    width: 100%;
    max-width: 260px;
  }

    .flow .step-desc {
    font-size: 0.85rem;   /* 現状より少し小さく */
    line-height: 1.8;      /* 行間は保ちつつ読みやすく */
  }
  .flow .step-desc .step-address {
    font-size: 0.82rem;
    line-height: 1.6;
  }

}




/* --注意事項見出し-- */
.notice-title { font-weight:700; font-size:1.05rem; }



/* =========================================================
   絨毯カーペット清掃：ご利用の流れ内の注意事項
   （flow-notice）
========================================================= */

.flow-notice {
  margin-top: 36px;
  /* ボタンとの距離を広げて呼吸感UP */
  padding: 18px 22px;
  /* 内側余白をFigmaに近づける */
  border-radius: 12px;
  border: 1px solid #d9ede3;
  background: #E6F4EA;
  font-size: .9rem;
  line-height: 1.9;
}

.flow-notice__title {
  margin: 0 0 .4em;
  font-size: .95rem;
  font-weight: 600;
  color: #0b2e13;
}

.flow-notice__text {
  margin: 0;
}

/* スマホ幅では左右の余白だけ少し詰める */
@media (max-width: 600px) {
  .flow-notice {
    margin-top: 28px;
    padding: 14px 16px;
    font-size: .85rem;
  }
}

/* =========================================================
   絨毯カーペット清掃：FAQ（Q / A アコーディオン）
========================================================= */

.faq-list {
  margin: 0;
  padding: 0;
}

.faq-item {
  border-top: 1px solid #e3e3e3;
}

.faq-item:last-child {
  border-bottom: 1px solid #e3e3e3;
}

.faq-list dt,
.faq-list dd {
  margin: 0;
}

/* ▼ 質問ボタン部分（Q. 〜） */
.faq-question {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: #E6F4EA;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.faq-q-label {
  color: var(--accent);
  font-weight: 700;
  margin-right: 2px;
}

.faq-q-text {
  flex: 1;
}

/* ＋／− アイコン */
.faq-toggle-icon::before {
  content: "＋";
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
}

.faq-item.is-open .faq-toggle-icon::before {
  content: "－";
}

/* ▼ 回答部分（A. 〜） */
.faq-answer {
  display: none;              /* 初期は非表示 */
  padding: 0 16px 14px 40px;  /* Q.と揃えつつ少し字下げ */
  font-size: .9rem;
  line-height: 1.9;
  background: #fafafa;
}

.faq-a-label {
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}

/* スマホで少しだけ余白・サイズ調整 */
@media (max-width: 600px) {
  .faq-question {
    padding: 12px 10px;
    font-size: .9rem;
  }

  .faq-answer {
    padding: 0 10px 12px 34px;
    font-size: .87rem;
  }
}

/* =============================
   絨毯カーペット：FAQ下の余白調整
============================= */

/* FAQセクションの下だけ余白を増やす */
section.faq {
  padding-bottom: 64px;  /* お好みで 48〜64px の範囲で調整OK */
}