:root { --navy:#0f172a; --blue:#1e3a8a; --acc:#f59e0b; --ok:#16a34a; --bg:#f8fafc; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif; color:var(--navy); background:var(--bg); line-height:1.7; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.hero { background: radial-gradient(circle at 80% 0%, #3b82f6 0, transparent 45%), linear-gradient(135deg, var(--navy), var(--blue)); color:#fff; padding: 36px 0 44px; }
.brand { font-weight:900; letter-spacing:.04em; }
.brand span { font-weight:400; opacity:.75; margin-left:6px; }
.hero h1 { font-size: clamp(30px, 6vw, 52px); line-height:1.25; margin: 24px 0 12px; }
.lead { font-size: clamp(14px, 2.4vw, 17px); opacity:.92; }
.cta { display:inline-block; margin-top:14px; background:var(--acc); color:var(--navy); font-weight:900; padding:14px 26px; border-radius:999px; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.flow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:28px; font-size:14px; }
.flow div { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:8px 12px; }
.flow b { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--acc); color:var(--navy); margin-right:6px; font-size:12px; }
.flow i { font-style:normal; opacity:.6; }
section { padding: 34px 0 6px; }
h2 { font-size: 24px; border-left: 6px solid var(--blue); padding-left: 10px; }
.team { display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; }
.mem { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:16px 12px; text-align:center; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.mem .ico { font-size:34px; }
.mem b { font-size:18px; }
.mem p { font-size:13px; color:#475569; margin:6px 0 0; text-align:left; }
.promise { list-style:none; padding:0; display:grid; gap:8px; margin-top:16px; }
.promise li { background:#fff; border-radius:12px; padding:10px 14px; border:1px solid #e2e8f0; }
.sample { display:flex; gap:12px; }
.sample img { width:50%; border-radius:10px; box-shadow:0 6px 20px rgba(15,23,42,.15); border:1px solid #e2e8f0; }
.note { font-size:13px; color:#64748b; }
form { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:24px; display:grid; gap:14px; box-shadow:0 6px 24px rgba(15,23,42,.06); margin-bottom: 30px; }
label { display:grid; gap:6px; font-weight:700; }
label small { font-weight:400; color:#64748b; }
input, textarea { font: inherit; padding:12px 14px; border:1.5px solid #cbd5e1; border-radius:12px; width:100%; background:#fff; }
input:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,58,138,.15); }
fieldset { border:1.5px solid #cbd5e1; border-radius:12px; display:flex; flex-wrap:wrap; gap:10px; padding:10px 14px; }
legend { font-weight:700; padding:0 4px; }
.radio { display:flex; align-items:center; gap:6px; font-weight:400; background:var(--bg); padding:6px 12px; border-radius:999px; cursor:pointer; }
.radio input { width:auto; }
button { font: inherit; font-weight:900; font-size:17px; background:linear-gradient(90deg,var(--blue),#2563eb); color:#fff; border:none; padding:16px; border-radius:14px; cursor:pointer; }
button.sub { font-size:14px; padding:8px 14px; background:#475569; }
.hint { font-size:13px; color:#475569; margin:0; background:#fffbeb; border:1px solid #fde68a; padding:8px 12px; border-radius:10px; }
.err { color:#dc2626; font-weight:700; }
.fallback summary { cursor:pointer; color:var(--blue); }
code { background:#f1f5f9; padding:2px 6px; border-radius:6px; }
footer { background:var(--navy); color:#fca5a5; text-align:center; padding:18px 0; font-size:13px; }
.sp { display:none; }
@media (max-width: 720px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .sample { flex-direction:column; } .sample img { width:100%; }
  .sp { display:inline; }
  .flow i { display:none; }
}