:root{
  --ink:#16243c;        /* 本文 */
  --ink2:#0d1a30;       /* 見出し */
  --mut:#61728c;        /* 補足テキスト */
  --blue:#1a5fd0;       /* アクセント（ブルー） */
  --blue2:#0f47a8;
  --blue-l:#eaf1ff;     /* 淡いブルー背景 */
  --line:#06c755;       /* LINEグリーン */
  --paper:#f5f7fb;      /* ページ背景 */
  --card:#ffffff;
  --brd:#e1e7f0;
  --shadow:0 2px 10px rgba(16,36,72,.06);
  --shadow-l:0 8px 24px rgba(16,36,72,.10);
  --max:520px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.75; font-size:15px; overflow-x:hidden;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-2;background:var(--paper);
  background-image:linear-gradient(180deg,#e9f0fb 0%,#f5f7fb 46%,#f5f7fb 100%)}
.bg-glow{position:absolute;left:50%;top:14%;width:min(760px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(26,95,208,.10),transparent 66%)}

main{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---------- hero ---------- */
.hero{padding:26px 0 12px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.14em;color:var(--blue2);
  border:1px solid #cfdcf5;background:#fff;border-radius:99px;padding:6px 14px;margin-bottom:18px;box-shadow:var(--shadow)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.25}}

h1{font-weight:800;letter-spacing:.01em;line-height:1.16;margin-bottom:10px;color:var(--ink2)}
h1 span{display:block}
.l1{font-size:clamp(36px,11.4vw,50px)}
.l2{font-size:clamp(29px,9vw,40px);color:var(--blue2)}
.l3{font-size:clamp(17px,5vw,22px);color:var(--mut);letter-spacing:.18em;margin-top:8px;font-weight:700}

.avatar{position:relative;width:172px;margin:16px auto 20px}
.avatar img{position:relative;z-index:1;filter:drop-shadow(0 12px 22px rgba(16,36,72,.18));animation:float 4.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}
.ring{position:absolute;left:50%;top:52%;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(26,95,208,.10),rgba(26,95,208,.04) 58%,transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(26,95,208,.12)}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow)}
.lead p{font-size:14.5px;color:var(--ink)}
.lead b{color:var(--ink2);font-weight:700}
.lead .num{color:var(--blue);font-size:17px;font-weight:800;letter-spacing:.02em}
.acc{margin-top:12px;padding-top:12px;border-top:1px solid var(--brd);display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.acc .num{font-size:22px;color:var(--blue2)}
.acc span{font-size:12.5px;color:var(--mut)}
sup{font-size:9px;color:#8794a8}

/* ---------- form ---------- */
.form{margin:16px 0 12px}
.field{position:relative}
#sym{width:100%;height:56px;border-radius:12px;border:1px solid #c9d4e6;background:#fff;color:var(--ink2);
  font-size:15px;padding:0 16px;outline:none;box-shadow:var(--shadow)}
#sym::placeholder{color:#98a6bb}
#sym:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,208,.16)}
.ac{position:absolute;z-index:5;top:60px;left:0;right:0;background:#fff;border:1px solid var(--brd);border-radius:12px;
  overflow:hidden;list-style:none;box-shadow:var(--shadow-l)}
.ac li{padding:11px 14px;font-size:13.5px;cursor:pointer;border-bottom:1px solid #eef2f8;color:var(--ink2)}
.ac li:last-child{border:0}
.ac li:hover,.ac li.on{background:var(--blue-l)}
.ac small{color:var(--mut);margin-left:8px}

.btn{width:100%;height:58px;margin-top:12px;border:0;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#2a6fea,#1550c0);
  box-shadow:0 6px 16px rgba(26,95,208,.26);transition:transform .12s,filter .2s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px)}
.line{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto}
.line svg{width:20px;height:20px;fill:#fff}
.micro{margin-top:9px;font-size:11.5px;color:var(--mut)}

.chips{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chips li{font-size:11.5px;color:var(--ink);border:1px solid var(--brd);background:#fff;border-radius:99px;padding:5px 12px;box-shadow:var(--shadow)}
.chips li::before{content:"\2713 ";color:var(--line)}
.scroll{margin-top:20px;color:#9aabc4;animation:down 1.8s infinite}
@keyframes down{50%{transform:translateY(6px);opacity:.4}}

/* ---------- sections ---------- */
.sec{padding:34px 0}
.sec h2{text-align:center;font-size:21px;font-weight:800;margin-bottom:20px;letter-spacing:.02em;color:var(--ink2)}
.sec h2 em{font-style:normal;color:var(--blue)}
.sec h3{font-size:15px;font-weight:800;margin-bottom:4px;color:var(--ink2)}
.sec p{font-size:13px;color:var(--mut)}

.steps{list-style:none;display:grid;gap:12px}
.steps li{position:relative;background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:16px 16px 16px 62px;box-shadow:var(--shadow)}
.steps .n{position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;background:linear-gradient(160deg,#3d7ff0,#1550c0)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:15px 14px;box-shadow:var(--shadow)}
.tile p{font-size:12px;line-height:1.6}

.voices{display:grid;gap:10px}
.voices figure{background:var(--card);border:1px solid var(--brd);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.voices blockquote{font-size:13.5px;color:var(--ink)}
.voices blockquote::before{content:"\201C";color:#9dbaf0;font-size:22px;margin-right:2px}
.voices figcaption{margin-top:8px;font-size:11.5px;color:var(--mut)}
.note-s{text-align:center;font-size:11px;color:#8794a8;margin-top:10px}

.faq details{background:var(--card);border:1px solid var(--brd);border-radius:12px;margin-bottom:9px;overflow:hidden;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:14px 42px 14px 16px;font-size:14px;font-weight:700;position:relative;color:var(--ink2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:12px;font-size:19px;color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 16px 14px;font-size:12.5px;line-height:1.8}

.disc{padding-top:6px}
.disc p{font-size:11px;color:#7d8ba1;line-height:1.7;margin-bottom:6px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--brd);background:#fff;padding:18px;text-align:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-bottom:10px}
footer a{font-size:12px;color:var(--ink);text-decoration:none}
footer a:hover{text-decoration:underline;color:var(--blue)}
footer p{font-size:11px;color:#8794a8}

/* ---------- sticky ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(245,247,251,0),rgba(245,247,251,.96) 34%);
  transform:translateY(120%);transition:transform .3s ease}
.sticky.show{transform:none}
.sticky button{width:100%;max-width:var(--max);margin:0 auto;height:54px;border:0;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15.5px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#08d75f,#04a648);box-shadow:0 6px 18px rgba(6,199,85,.30)}
.sticky .line{background:rgba(255,255,255,.22)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(13,26,48,.45);backdrop-filter:blur(3px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.modal[hidden]{display:none}
.box{position:relative;width:100%;max-width:400px;background:#fff;
  border:1px solid var(--brd);border-radius:18px;padding:26px 20px 22px;text-align:center;box-shadow:0 20px 50px rgba(13,26,48,.22)}
.box h3{font-size:17px;font-weight:800;margin-bottom:14px;color:var(--ink2)}
.x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;background:none;color:#8794a8;font-size:22px;cursor:pointer;line-height:1}
.scan{height:78px;border-radius:12px;background:#f2f6fd;border:1px solid var(--brd);overflow:hidden;position:relative;margin-bottom:16px;
  background-image:linear-gradient(rgba(26,95,208,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(26,95,208,.08) 1px,transparent 1px);
  background-size:22px 22px}
.scan span{position:absolute;left:0;right:0;height:22px;top:-22px;
  background:linear-gradient(180deg,transparent,rgba(26,95,208,.22));animation:scan 1.5s linear infinite}
@keyframes scan{to{top:100%}}
.tasks{list-style:none;text-align:left;margin-bottom:16px}
.tasks li{font-size:12.5px;color:#98a6bb;padding:5px 0 5px 26px;position:relative;transition:color .3s}
.tasks li::before{content:"\25CB";position:absolute;left:6px;color:#c3ccdb}
.tasks li.on{color:var(--ink2)}
.tasks li.on::before{content:"\25C9";color:var(--blue)}
.tasks li.ok{color:#3f7a56}
.tasks li.ok::before{content:"\2713";color:var(--line)}
.bar{height:7px;border-radius:99px;background:#e6ecf5;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3d7ff0,#1550c0);transition:width .3s ease}
.pct{margin-top:8px;font-size:12px;color:var(--mut)}
.ok-mark{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:#fff;
  background:linear-gradient(160deg,#3ddc84,#06c755);box-shadow:0 6px 18px rgba(6,199,85,.30);animation:pop .35s ease}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.dtxt{font-size:13px;color:var(--ink);margin-bottom:16px}
.box .btn{background:linear-gradient(180deg,#08d75f,#04a648);color:#fff;box-shadow:0 6px 18px rgba(6,199,85,.30)}

/* ---------- desktop ---------- */
@media (min-width:600px){
  body{font-size:16px;padding-bottom:0}
  main{max-width:600px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .sticky{display:none}
  .hero{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- legal pages ---------- */
.legal{padding:28px 0 40px}
.legal h1{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--ink2)}
.legal .upd{font-size:11px;color:#8794a8;margin-bottom:20px}
.legal h2{font-size:15px;font-weight:800;margin:22px 0 6px;color:var(--blue2);text-align:left}
.legal p,.legal li{font-size:13px;color:var(--ink);line-height:1.9}
.legal ul,.legal ol{padding-left:20px}
.legal table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px;background:#fff}
.legal th,.legal td{border:1px solid var(--brd);padding:9px 10px;text-align:left;vertical-align:top;color:var(--ink)}
.legal th{width:34%;background:var(--blue-l);white-space:nowrap}
.back{display:inline-block;margin-top:26px;font-size:13px;color:var(--blue);text-decoration:none}