@font-face{font-family:"Jost";src:url("fonts/Jost-subset.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url("fonts/NotoSansJP-subset.woff2") format("woff2");font-weight:400 900;font-display:swap}

:root{
  --ink:#111111;--paper:#FFFFFF;--mute:#5E5E5E;--line:#DDDDDD;--soft:#F4F4F4;--soft-ink:#CFCFCF;
  --accent:#E85A2A;--accent-dark:#C9481C;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --en:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1080px;
  --sec-pad:clamp(88px,12vw,160px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.9;letter-spacing:.02em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
.pc{display:none}
@media (min-width:768px){.pc{display:inline}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:760px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 40px;background:var(--accent);color:#fff;font-weight:700;font-size:19px;letter-spacing:.08em;text-decoration:none;transition:background-color .25s ease,transform .25s ease}
.btn:hover{background:var(--accent-dark)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.cta .btn:focus-visible{outline-color:#fff}

/* ---------- 01 FV ---------- */
.fv{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:72px 24px;text-align:center}
.fv-inner{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:720px}
.fv-logo{width:min(220px,52vw);height:auto;color:var(--ink);overflow:visible;margin-bottom:20px}
.fv-catch{font-size:clamp(34px,7vw,64px);font-weight:900;line-height:1.3;letter-spacing:.04em}
.fv-name{font-family:var(--en);font-size:clamp(18px,2.4vw,22px);font-weight:500;letter-spacing:.3em}
.fv-lead{font-size:clamp(15px,1.8vw,17px);color:var(--ink)}
.fv-note{font-size:13px;color:var(--mute)}

/* ---------- section basics ---------- */
.sec{padding:var(--sec-pad) 0}
.sec-line{border-top:1px solid var(--ink)}
.sec-dark{background:var(--ink);color:#fff}
.sec-head{margin-bottom:clamp(48px,6vw,72px)}
.eyebrow{font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.3em;margin-bottom:20px}
.h-sec{font-size:clamp(28px,4.4vw,44px);font-weight:900;line-height:1.35;letter-spacing:.03em}
.h-display{font-size:clamp(32px,5.6vw,56px);font-weight:900;line-height:1.35;letter-spacing:.03em}
.lead{margin-top:24px;max-width:720px;font-size:clamp(15px,1.7vw,17px)}
.sec-foot{margin-top:40px;font-size:14px;color:var(--mute)}
.strong{font-weight:700}

/* ---------- 02 empathy ---------- */
.rule-light{height:1px;background:#3A3A3A;margin:48px 0}
.pains{display:flex;flex-direction:column;gap:20px;color:var(--soft-ink);font-size:clamp(15px,1.8vw,18px)}
.pains li{padding-left:28px;position:relative}
.pains li::before{content:"";position:absolute;left:0;top:.95em;width:14px;height:1px;background:var(--soft-ink)}
.turn{margin-top:56px;font-size:clamp(19px,2.6vw,26px);font-weight:700;line-height:1.7}

/* ---------- 03 So-ciety ---------- */
.statement{display:flex;flex-direction:column;gap:1.4em;max-width:760px;font-size:clamp(16px,1.9vw,19px);line-height:2.1}
.facts{display:grid;grid-template-columns:1fr;margin-top:clamp(64px,8vw,96px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.fact{padding:32px 0;border-top:1px solid var(--line)}
.fact:first-child{border-top:0}
.fact-num{font-family:var(--en);font-size:clamp(40px,5vw,56px);font-weight:400;line-height:1}
.fact-num span{font-size:.45em;margin-left:4px;letter-spacing:.05em}
.fact-label{margin-top:12px;font-size:14px;font-weight:700}
.fact-text{margin-top:8px;font-size:14px;color:var(--mute)}
.fact-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute);line-height:1.7}
@media (min-width:860px){
  .facts{grid-template-columns:1fr 1fr 1.6fr}
  .fact{padding:36px 28px;border-top:0;border-left:1px solid var(--line)}
  .fact:first-child{padding-left:0;border-left:0}
}
.bridge{margin-top:clamp(64px,8vw,96px);display:flex;flex-direction:column;gap:.6em;font-size:clamp(17px,2.2vw,22px);line-height:1.9}
.bridge .strong{margin-top:.6em;font-size:clamp(22px,3vw,30px);font-weight:900}

/* ---------- 04 clan ---------- */
.clan{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media (min-width:860px){.clan{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}}
.hex{position:relative;width:min(320px,58vw);margin:0 auto}
.hex svg{width:100%;height:auto;color:var(--ink);overflow:visible}
.hex-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:clamp(18px,2.2vw,22px);font-weight:500;letter-spacing:.24em}
.rules{border-top:1px solid var(--ink)}
.rules li{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.rules li:last-child{border-bottom:1px solid var(--ink)}
.rule-no{font-family:var(--en);font-size:15px;font-weight:500;letter-spacing:.1em;padding-top:4px;min-width:28px}
.rules h3{font-size:clamp(18px,2vw,21px);font-weight:900;margin-bottom:6px}
.rules p{font-size:15px;color:var(--mute)}

/* ---------- 05 timetable ---------- */
.tt-label{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.28em;margin:0 0 16px}
.tt{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:56px}
.tt-col{position:relative;padding:28px 0;border-top:1px solid var(--line)}
.tt-col:first-child{border-top:0}
.tt-col::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:56px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s ease .4s}
.tt-col.is-in::after{transform:scaleX(1)}
.tt h3,.tt-band h3{font-size:20px;font-weight:900;margin-bottom:8px}
.tt p,.tt-band p{font-size:15px;color:var(--mute)}
@media (min-width:860px){
  .tt{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tt-col{padding:32px 24px;border-top:0;border-left:1px solid var(--line)}
  .tt-col:first-child{padding-left:0;border-left:0}
  .tt-col::after{left:24px}
  .tt-col:first-child::after{left:0}
}
.tt-band{padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
@media (min-width:860px){.tt-band{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;align-items:baseline}}

/* ---------- 06 requirements ---------- */
.req{display:grid;grid-template-columns:1fr;gap:56px}
@media (min-width:860px){.req{grid-template-columns:1fr 1fr;gap:72px}}
.req-col h3{font-size:20px;font-weight:900;padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:8px}
.req-lead{margin:16px 0 4px;font-size:15px;font-weight:700}
.checks li{position:relative;padding:16px 0 16px 32px;border-bottom:1px solid var(--line);font-size:16px}
.checks li::before{content:"";position:absolute;left:4px;top:1.55em;width:12px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.checks small{display:block;font-size:13px;color:var(--mute)}
.req-note{margin-top:20px;font-size:14px;color:var(--mute)}

/* ---------- 07 flow ---------- */
.flow{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.flow li{position:relative;padding:24px 0 24px 0;border-top:2px solid var(--ink)}
.flow-no{display:block;font-family:var(--en);font-size:30px;font-weight:400;line-height:1;margin-bottom:12px}
.flow h3{font-size:19px;font-weight:900;margin-bottom:6px}
.flow p{font-size:14px;color:var(--mute)}
@media (min-width:860px){
  .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flow li{border-top:0;padding:32px 24px 0 0}
  .flow::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform-origin:left}
}

/* ---------- 08 faq ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--ink)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--en);font-weight:500;margin-right:16px}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.faq details p{padding:0 0 24px 32px;font-size:15px;color:var(--mute)}

/* ---------- 09 CTA / footer ---------- */
.cta{background:var(--ink);color:#fff;padding:var(--sec-pad) 0 clamp(72px,9vw,120px);text-align:center}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:32px}
.cta-symbol{width:84px;height:auto;color:#fff}
.cta-copy{font-size:clamp(30px,5.2vw,52px);font-weight:900;letter-spacing:.04em}
.cta-note{font-size:13px;color:var(--soft-ink)}
.footer{background:var(--ink);color:var(--soft-ink);border-top:1px solid #2A2A2A;padding:48px 0 56px;font-size:13px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.footer img{margin-bottom:12px}
.footer a{color:#fff}
.copy{font-family:var(--en);letter-spacing:.12em;margin-top:6px}

/* ---------- floating apply button ---------- */
.float-cta{display:none}
html.js .float-cta{position:fixed;z-index:50;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;background:var(--accent);color:#fff;font-weight:700;font-size:17px;letter-spacing:.08em;text-decoration:none;box-shadow:0 8px 24px rgba(17,17,17,.18);visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s,background-color .25s ease}
html.js .float-cta.is-shown{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,background-color .25s ease}
html.js .float-cta:hover{background:var(--accent-dark)}
html.js .float-cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
html.js .footer{padding-bottom:104px}
@media (min-width:860px){
  html.js .float-cta{left:auto;right:32px;bottom:32px}
  html.js .footer{padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){html.js .float-cta{transform:none!important;transition:visibility 0s!important}}

/* ---------- motion (only when JS is on) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
html.js [data-reveal].is-in{opacity:1;transform:none}
.d1{transition-delay:.12s!important}.d2{transition-delay:.24s!important}.d3{transition-delay:.36s!important}
.d4{transition-delay:.48s!important}.d5{transition-delay:.6s!important}.d6{transition-delay:.72s!important}
.d7{transition-delay:.84s!important}.d8{transition-delay:.96s!important}.d9{transition-delay:1.08s!important}

/* FV: six bars gather into the hexagon */
.fv-logo .bar{transform-box:fill-box;transform-origin:center}
html.js .fv-logo .bar{opacity:0;transition:transform 1.2s cubic-bezier(.16,.84,.24,1),opacity .7s ease}
html.js .fv-logo .b1{transform:translate(60px,40px) rotate(28deg)}
html.js .fv-logo .b2{transform:translate(0,70px) rotate(-18deg)}
html.js .fv-logo .b3{transform:translate(-60px,40px) rotate(24deg)}
html.js .fv-logo .b4{transform:translate(-60px,-40px) rotate(-26deg)}
html.js .fv-logo .b5{transform:translate(0,-70px) rotate(20deg)}
html.js .fv-logo .b6{transform:translate(60px,-40px) rotate(-22deg)}
html.js .fv-logo .b2{transition-delay:.06s}html.js .fv-logo .b3{transition-delay:.12s}
html.js .fv-logo .b4{transition-delay:.18s}html.js .fv-logo .b5{transition-delay:.24s}html.js .fv-logo .b6{transition-delay:.3s}
html.js .fv-logo .wordmark{opacity:0;transition:opacity .8s ease 1.2s}
html.js .fv-step{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .fv-step.s1{transition-delay:1.5s}html.js .fv-step.s2{transition-delay:1.75s}
html.js .fv-step.s3{transition-delay:1.95s}html.js .fv-step.s4{transition-delay:2.15s}
html.js.is-loaded .fv-logo .bar,html.js.is-loaded .fv-logo .wordmark{opacity:1;transform:none}
html.js.is-loaded .fv-step{opacity:1;transform:none}

/* 04: hexagon sides appear one by one */
.hex .bar{transform-box:fill-box;transform-origin:center}
html.js .hex .bar{opacity:0;transform:scale(.4);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.js .hex.is-in .bar{opacity:1;transform:none}
html.js .hex .b1{transition-delay:.1s}html.js .hex .b2{transition-delay:.2s}html.js .hex .b3{transition-delay:.3s}
html.js .hex .b4{transition-delay:.4s}html.js .hex .b5{transition-delay:.5s}html.js .hex .b6{transition-delay:.6s}
html.js .hex-label{opacity:0;transition:opacity .6s ease .8s}
html.js .hex.is-in .hex-label{opacity:1}

/* 07: the top rule draws left to right, then steps appear */
html.js .flow::before{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
html.js .flow.is-in::before{transform:scaleX(1)}
html.js .flow li{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
html.js .flow.is-in li{opacity:1;transform:none}
html.js .flow li:nth-child(1){transition-delay:.2s}html.js .flow li:nth-child(2){transition-delay:.5s}
html.js .flow li:nth-child(3){transition-delay:.8s}html.js .flow li:nth-child(4){transition-delay:1.1s}
html.js .flow[data-reveal]{opacity:1;transform:none}

/* 09: symbol */
html.js .cta-symbol{opacity:0;transition:opacity 1s ease}
html.js .cta-symbol.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js .fv-logo .bar,html.js .fv-logo .wordmark,html.js .fv-step,
  html.js .hex .bar,html.js .hex-label,html.js .flow li,html.js .cta-symbol{opacity:1!important;transform:none!important;transition:none!important}
  html.js .flow::before{transform:none!important;transition:none!important}
  .tt-col::after{transform:scaleX(1);transition:none}
}

/* ---------- privacy page ---------- */
.doc-header{border-bottom:1px solid var(--ink);padding:24px 0}
.doc-header a{display:inline-block}
.doc{padding:72px 0 120px}
.doc h1{font-size:clamp(26px,4vw,36px);font-weight:900;margin-bottom:32px;line-height:1.4}
.doc h2{font-size:20px;font-weight:900;margin:56px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.doc p{margin-bottom:1em}
.doc ol{list-style:decimal;padding-left:1.5em;margin-bottom:1em}
.doc ul{list-style:disc;padding-left:1.5em;margin-bottom:1em}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:15px}
.doc th,.doc td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{border-bottom:1px solid var(--ink);font-weight:700}
.doc .back{margin-top:56px}