/* ============================================================
   flow（制作の流れ）ページ固有CSS
   共通分（reset / btn / eyebrow / wave / chat / cta / footer 等）は
   common/css/common.css にあるため含めない
   ============================================================ */

/* ============================================================
   ざっくり3コマ（トップの会話UIを踏襲）
   ============================================================ */
.digest{
  background:var(--sky-pale);
  padding:clamp(60px, 9vw, 100px) 0 clamp(70px, 9vw, 110px);
}
.digest-foot{
  max-width:720px;
  margin:40px auto 0;
  text-align:center;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ============================================================
   8ステップ・タイムライン
   ============================================================ */
.steps-sec{
  background:var(--cream);
  padding:clamp(64px, 9vw, 110px) 0 clamp(70px, 9vw, 110px);
}
.steps{
  list-style:none;
  max-width:860px;
  margin:clamp(40px, 6vw, 64px) auto 0;
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:clamp(16px, 3vw, 30px);
  padding-bottom:clamp(34px, 5vw, 52px);
}
.step:last-child{ padding-bottom:0; }
.step::before{
  content:"";
  position:absolute;
  left:45px;
  top:92px;
  bottom:-2px;
  border-left:3px dashed var(--dash);
}
.step:last-child::before{ display:none; }
.step-no{
  position:relative;
  z-index:1;
  width:92px;
  height:92px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.step-no .cap{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--tan-deep);
  line-height:1;
}
.step-no .n{
  font-size:1.5rem;
  font-weight:900;
  line-height:1.1;
  font-feature-settings:"tnum" 1;
}
.step-card{
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  padding:24px clamp(20px, 3vw, 30px) 26px;
}
.step-card::before{
  content:"";
  position:absolute;
  left:-11px;
  top:36px;
  width:19px;
  height:19px;
  background:var(--paper);
  border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}
.step-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.step-icon{
  flex:none;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tan-pale);
  border:2px solid var(--ink);
  color:var(--ink);
}
.step:nth-child(even) .step-icon{ background:var(--sky-pale); }
.step-head h3{ font-size:1.2rem; }
.step-text{
  margin-top:12px;
  color:var(--ink-soft);
  font-size:.95rem;
}
.step-text strong{
  font-weight:900;
  color:var(--ink);
}
.step-point{
  position:relative;
  margin-top:14px;
  background:var(--tan-pale);
  border-radius:14px;
  padding:10px 16px 10px 34px;
  font-size:.9rem;
}
.step-point::before{
  content:"";
  position:absolute;
  left:14px;
  top:1.05em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--tangerine);
}
.step-point strong{ font-weight:900; }
.step-hand{
  display:inline-block;
  margin-top:12px;
  font-family:'Yomogi', cursive;
  font-size:1.02rem;
  color:var(--tan-deep);
  transform:rotate(-1.5deg);
}

/* FAQ 導線 */
.faq-note{
  max-width:860px;
  margin:clamp(44px, 6vw, 64px) auto 0;
  padding-top:28px;
  border-top:2px dashed var(--dash);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.faq-note p{
  font-size:.92rem;
  color:var(--ink-soft);
  max-width:30em;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:768px){
  .step{ grid-template-columns:64px 1fr; }
  .step::before{ left:31px; top:64px; }
  .step-no{ width:64px; height:64px; }
  .step-no .cap{ display:none; }
  .step-no .n{ font-size:1.15rem; }
  .step-card::before{ top:22px; }
  .step-head{ flex-wrap:wrap; gap:10px; }

  .faq-note{ justify-content:flex-start; }
}

@media (max-width:480px){
  .step{ grid-template-columns:52px 1fr; gap:12px; }
  .step::before{ left:25px; top:52px; }
  .step-no{ width:52px; height:52px; box-shadow:0 2px 0 var(--ink); }
  .step-no .n{ font-size:1rem; }
}