/* =========================================================
   ご依頼の流れ（flow.html）

   トップページは 1px 単位で配置が決まっているので、
   そこへ長い説明を差し込むと崩れる。別のページに置く。
   見た目はトップと同じ道具（色・書体）を使い、
   中身は「読ませる」ことだけを考えて、素直に縦に積む。
   ========================================================= */
:root{
  --ink:#141414;
  --paper:#FBFAF7;
  --lime:#e9f22a;
  --gray:#8b8b84;
  --line:#d9d7cf;
  --display:'Archivo','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --jp:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --ease:cubic-bezier(.16,.84,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--jp);-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.95;
}
a{color:inherit}

/* ---------- 上の帯 ---------- */
.fhd{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px clamp(20px,5vw,80px);
  background:rgba(251,250,247,.96);border-bottom:1px solid var(--line);
}
.fhd__logo{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 900;
  font-weight:900;font-size:22px;letter-spacing:.01em;text-decoration:none;
}
.fhd__back{
  padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  transition:opacity .3s var(--ease);
}
.fhd__back:hover{opacity:.82}

/* ---------- 全体の幅 ---------- */
.fw{max-width:860px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,40px) 0}

.flabel{
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--gray);
}
.fttl{
  margin-top:14px;font-size:clamp(30px,5.4vw,46px);font-weight:900;
  line-height:1.45;letter-spacing:.01em;
}
.fmk{
  background-image:linear-gradient(transparent 74%,var(--lime) 74%,var(--lime) 96%,transparent 96%);
}
.flead{margin-top:24px;font-size:16.5px;line-height:2.1;color:#3d3d3a}

/* ---------- 区分 ---------- */
.fsec{margin-top:clamp(52px,8vw,84px)}
.fh{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);
  font-size:clamp(20px,3vw,25px);font-weight:900;letter-spacing:.02em;
}
.fh b{
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 900;
  font-size:.92em;color:var(--gray);
}

/* ---------- 流れ ---------- */
.steps{list-style:none;margin-top:8px}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.step__n{
  display:grid;place-content:center;width:44px;height:44px;
  background:var(--ink);color:var(--paper);border-radius:50%;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 900;
  font-size:17px;
}
.step__b h3{font-size:20px;font-weight:900;letter-spacing:.02em}
.step__b p{margin-top:9px;font-size:15.5px;line-height:2.05;color:#3d3d3a}
.step__t{
  display:inline-block;margin-top:12px;padding:5px 12px;
  background:#EFEEE8;color:#5c5c56;font-size:13px;font-weight:700;letter-spacing:.04em;
}

/* ---------- 決めごと ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.rule{background:#fff;border:1px solid var(--line);padding:24px 24px 26px}
.rule h3{
  font-size:17px;font-weight:900;letter-spacing:.02em;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.rule p{margin-top:13px;font-size:15px;line-height:2.05;color:#3d3d3a}
.rule__s{display:block;margin-top:10px;font-size:13.5px;color:var(--gray);line-height:1.8}

/* ---------- お金 ---------- */
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.pay__b{background:var(--ink);color:#f2f1ec;padding:24px 22px 26px}
.pay__b h3{font-size:16px;font-weight:900;letter-spacing:.03em;color:var(--lime)}
.pay__b p{margin-top:12px;font-size:14.5px;line-height:2;color:#dcdbd5}
.pay__b b{color:#fff}

/* ---------- 最後 ---------- */
.fend{
  margin:clamp(60px,9vw,100px) 0 0;padding:clamp(40px,6vw,60px) clamp(24px,5vw,50px);
  background:#fff;border:1px solid var(--line);text-align:center;
}
.fend__t{font-size:clamp(19px,2.6vw,23px);font-weight:900;letter-spacing:.02em}
.fend__p{margin-top:10px;font-size:15.5px;color:#3d3d3a}
.fbtn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:26px;padding:18px 40px;min-height:56px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:.06em;
  transition:opacity .3s var(--ease);
}
.fbtn:hover{opacity:.82}
.fend__m{margin-top:22px;font-size:14.5px;line-height:1.9;color:var(--gray)}
.fend__m a{display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;color:var(--ink);text-underline-offset:4px}

/* ---------- 下の帯 ---------- */
.fft{
  max-width:860px;margin:clamp(50px,7vw,80px) auto 0;
  padding:26px clamp(20px,5vw,40px) 44px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:13.5px;color:var(--gray);
}
.fft i{font-style:normal;margin-left:12px}
.fft nav{display:flex;gap:22px}
.fft nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:700;letter-spacing:.1em;text-decoration:none;color:var(--ink);
}
.fft nav a:hover{opacity:.6}

/* ---------- スマホ ---------- */
@media (max-width:767px){
  body{font-size:16px}
  .rules,.pay{grid-template-columns:1fr}
  .step{grid-template-columns:40px 1fr;gap:14px;padding:22px 0}
  .step__n{width:36px;height:36px;font-size:15px}
  .step__b h3{font-size:18px}
  .step__b p{font-size:15.5px}
  .fhd{padding:12px 18px}
  .fhd__logo{font-size:19px}
  .fft{flex-direction:column;align-items:flex-start}
}