/* ==========================================================
   共通リセット
========================================================== */
*{box-sizing:border-box;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  background:#fff;padding:0px;line-height:1.5
}
section{margin-bottom:60px}

/* ==========================================================
   ① 横長矩形 6 ステップフロー  (旧 .flow → .flow-box)
========================================================== */
.flow-box{
  display:flex;gap:12px;flex-wrap:wrap;font-size:14px;
  position:relative;           /* ← これを追加 */
  padding-bottom:45px;         /* ← ブラケット分の下余白 */	  
}
.flow-box .step{
  position:relative;flex:1 1 0;min-width:140px;
  padding:18px 22px 38px;border-radius:6px;color:#fff
}
.flow-box .step:not(.certify)::after{
  content:"";position:absolute;top:50%;right:-16px;transform:translateY(-50%);
  border:8px solid transparent;border-left-color:#6c98d5;
}
/* 個別色 */
.flow-box .apply   {background:#cfd5da;color:#333}
.flow-box .design  {background:#c0c0c0}
.flow-box .manu    {background:#c0c0c0}
.flow-box .present {background:#6ab08d}
.flow-box .report  {background:#0066b3}
.flow-box .certify {background:#fff;color:#c40000;border:2px solid #c40000}
/* 見出し */
.flow-box h4{margin:0 0 6px;font-size:15px;font-weight:700}
.flow-box p{margin:0}
/* Bracket */
.bracket{
  position:absolute;left:0;right:0;bottom:12px;
  text-align:center;font-size:12px;color:#0066b3
}
.bracket::before,.bracket::after{
  content:"";position:absolute;top:-8px;width:33%;height:2px;background:#0066b3
}
.bracket::before{left:0}.bracket::after{right:0}

/* ↓ Responsive (6 ステップ) */
@media(max-width:600px){
  .flow-box{flex-direction:column;gap:24px}
  .flow-box .step{padding:18px 22px 28px}
  .flow-box .step::after{display:none}
  .flow-box .step:not(.certify)::before{
    content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
    border:8px solid transparent;border-top-color:#6c98d5;
  }
  .bracket{position:static;margin-top:-10px;padding-top:4px}
  .bracket::before,.bracket::after{display:none}
}

/* ==========================================================
   ② 丸番＋ピル 3 ステップフロー  (旧 .flow → .flow-pill)
========================================================== */
:root{
  --clr-step1:#005eb8;
  --clr-step2:#006bbd;
  --clr-step3:#6d8eb7;
}
.flow-pill{
  display:flex;flex-direction:column;gap:28px;max-width:800px;margin:auto;font-size:14px
}
.flow-pill .step{display:flex;align-items:center;position:relative}
.flow-pill .num{
  flex:0 0 120px;height:120px;line-height:100px;border-radius:50%;
  font-size:38px;font-weight:700;color:#fff;text-align:center;z-index:1
}
.flow-pill .pill{
  flex:1;margin-left:-50px;padding:20px 20px 50px 100px;border-radius:9999px;color:#fff
}
.flow-pill .pill h3{font-size:24px;margin-bottom:5px}
.flow-pill .pill p{font-size:14px}

/* 個別色 */
.step1 .num{background:var(--clr-step1)}
.step2 .num{background:var(--clr-step2)}
.step3 .num{background:var(--clr-step3)}
.step1 .pill{background:linear-gradient(90deg,var(--clr-step1) 0%,#004a9e 100%)}
.step2 .pill{background:linear-gradient(90deg,var(--clr-step2) 0%,#005fa1 100%)}
.step3 .pill{background:linear-gradient(90deg,var(--clr-step3) 0%,#54779d 100%)}

/* 下向き矢印 */
.flow-pill .arrow{
  width:0;height:0;margin:0 auto -2px;
  border:18px solid transparent;border-top-color:#9da1a5
}

/* ↓ Responsive (3 ステップ) */
@media(max-width:480px){
  .flow-pill .num{flex:0 0 64px;height:64px;line-height:64px;font-size:26px}
  .flow-pill .pill{margin-left:-32px;padding:16px 20px 18px 70px}
  .flow-pill .pill h3{font-size:16px}
  .flow-pill .pill p{font-size:13px}
  .flow-pill .arrow{border-width:14px}
}