:root{
  --paper:#f3f1ec; --paper-2:#ebe8e1; --ink:#121212; --muted:#55524d; --line:#dcd8d0; --rule:#cdc8be;  --card:#fff;
  --signal:#ff5a1f; --buoy:#ffce33; --night:#0c0c0e;
  --line-green:#06c755; --line-bubble:#85e249; --line-bg:#8cabd9; --line-ink:#0a6b33;
  --ease-out:cubic-bezier(.19,1,.22,1); --ease-in:cubic-bezier(.32,0,.67,0);
  --gutter:clamp(16px,4vw,40px); --max:1200px;
  --en:"Inter Tight","Noto Sans JP",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:72px;}
@media (min-width:1024px){ html{font-size:112.5%;} }
@media (min-width:1440px){ html{font-size:118.75%;} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-size:1rem; line-height:1.9; letter-spacing:.03em; font-feature-settings:"palt" 1; overflow-x:clip;} 
img{max-width:100%; display:block;}
[hidden]{display:none !important;} 
h1,h2,h3,h4,h5,h6,summary,th,dt,legend,button,label,caption,blockquote,td,figcaption,.btn,.q,.price,.voices-label,.eyebrow,.nowrap-phrase{word-break:keep-all; overflow-wrap:anywhere; line-break:strict;}
.nb{display:inline-block; white-space:nowrap;} 
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.mono{font-family:var(--mono);}
.free{font-weight:900; color:var(--ink); background:var(--buoy); border-radius:4px; padding:0 6px; white-space:nowrap;}
s.was{color:var(--muted); text-decoration-thickness:2px;}
.btn{position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:700; font-size:1rem; letter-spacing:.04em; text-decoration:none;
  padding:15px 30px; border-radius:999px; border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);}
.btn.primary{background:var(--signal); border-color:var(--signal); color:var(--ink);}
.btn::before{content:''; position:absolute; z-index:-1; left:-20%; width:140%; top:-80%; height:260%; border-radius:50%;
  background:var(--btn-fill, var(--ink)); transform:translateY(70%); transition:transform .6s var(--ease-out);}
.btn:hover::before{transform:translateY(0);}
.btn:hover{color:var(--btn-fill-text, var(--paper)); border-color:var(--btn-fill, var(--ink));}
.dark .btn, .pro .btn{--btn-fill:#f4f4f6; --btn-fill-text:var(--ink);} 
.roll{position:relative; display:inline-block; overflow:hidden; vertical-align:top; line-height:1.5;}
.roll > span{display:block; transition:transform .55s var(--ease-out);}
.roll::after{content:attr(data-text); position:absolute; left:0; top:100%; white-space:nowrap; transition:transform .55s var(--ease-out);}
.btn:hover .roll > span, .btn:hover .roll::after{transform:translateY(-100%);}
.btn .arw{display:inline-block;}
.site-header{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .3s;}
.site-header.is-scrolled{border-bottom-color:var(--line);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px;}
.logo{font-family:var(--en); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; text-decoration:none;}
.logo b{color:var(--signal);}
.gnav{display:flex; align-items:center; gap:28px; font-size:0.9375rem; font-weight:700;}
.gnav a{text-decoration:none;}
.gnav .btn{padding:10px 22px; font-size:0.9375rem;}
.menu-btn{display:none; position:relative; isolation:isolate; overflow:hidden; align-items:center; gap:10px; background:none; border:1.5px solid var(--ink); border-radius:999px;
  font:700 14px/1 "Noto Sans JP",sans-serif; padding:10px 18px 10px 16px; color:var(--ink); cursor:pointer; transition:color .45s var(--ease-out);}
.menu-btn::before{content:''; position:absolute; z-index:-1; left:-20%; width:140%; top:-80%; height:260%; border-radius:50%; background:var(--ink); transform:translateY(70%); transition:transform .6s var(--ease-out);}
.menu-btn:hover::before, .menu-btn[aria-expanded="true"]::before{transform:translateY(0);}
.menu-btn:hover, .menu-btn[aria-expanded="true"]{color:var(--paper);}
.mb-icon{position:relative; display:inline-block; width:18px; height:10px;}
.mb-icon i{position:absolute; left:0; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .5s var(--ease-out), top .5s var(--ease-out);}
.mb-icon i:first-child{top:0;} .mb-icon i:last-child{top:8px;}
@media (hover:hover){ .menu-btn:not([aria-expanded="true"]):hover .mb-icon i:first-child{transform:scaleX(.6); transform-origin:left;} }
.menu-btn[aria-expanded="true"] .mb-icon i, .mb-icon.is-x i{top:4px; transform-origin:center;}
.menu-btn[aria-expanded="true"] .mb-icon i:first-child, .mb-icon.is-x i:first-child{transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] .mb-icon i:last-child, .mb-icon.is-x i:last-child{transform:rotate(-45deg);}
.gnav-close{display:none;}
@media (max-width:960px){
  .menu-btn{display:inline-flex; z-index:2; min-width:112px; justify-content:center;}
  .gnav{position:fixed; left:0; right:0; top:68px; height:calc(100dvh - 68px); overflow-y:auto; flex-direction:column; align-items:stretch; gap:0;
    padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); font-size:clamp(1.5rem,7vw,2rem); font-weight:900; counter-reset:n;
    background-color:var(--paper);
    background-image:linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
    background-size:48px 48px; border-top:1px solid var(--line);
    clip-path:inset(0 0 100% 0); visibility:hidden;
    transition:clip-path .45s var(--ease-in), visibility 0s linear .45s;}
  .gnav.is-open{clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s cubic-bezier(.76,0,.24,1);}
  .gnav a:not(.btn){display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); counter-increment:n; letter-spacing:.02em;}
  .gnav a:not(.btn)::before{content:counter(n, decimal-leading-zero); font-family:var(--mono); font-size:0.8125rem; font-weight:400; color:var(--muted);}
  .gnav a:not(.btn)::after{content:'→'; margin-left:auto; font-family:var(--en); font-size:1.375rem; font-weight:600; transition:transform .5s var(--ease-out);}
  .gnav a.ul-sweep{background:linear-gradient(var(--card),var(--card)) 0 0 / 0 100% no-repeat;
    transition:background-size .55s var(--ease-out), padding-left .55s var(--ease-out);}
  .gnav a.ul-sweep:hover, .gnav a.ul-sweep:active{background-size:100% 100%; padding-left:12px;}
  .gnav a:not(.btn)::before{transition:color .3s;}
  .gnav a:not(.btn):hover::before, .gnav a:not(.btn):active::before{color:#d4400c;}
  .gnav a:not(.btn):hover::after, .gnav a:not(.btn):active::after{transform:translateX(-8px);}
  .gnav-close{display:inline-flex; align-self:center; align-items:center; gap:10px; margin-top:20px; background:none; border:none; font:700 15px/1 "Noto Sans JP",sans-serif; color:var(--muted); padding:12px 16px; cursor:pointer; border-radius:999px; transition:color .3s, background .3s;}
  .gnav-close:hover{color:var(--ink); background:rgba(0,0,0,.06);}
  .gnav-close .mb-icon{width:16px;}
  .gnav .btn{margin-top:32px; padding:18px; font-size:1.0625rem;}
  .gnav > *{opacity:0; transform:translateY(28px); transition:opacity .25s var(--ease-in), transform .25s var(--ease-in);}
  .gnav.is-open > *{opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay:calc(.3s + var(--i, 0) * 70ms);}
}
section{padding:clamp(80px,11vw,140px) 0;}
.sec-head{margin-bottom:clamp(40px,6vw,64px);}
.kicker{font-family:var(--mono); font-size:0.8125rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase;}
.sec-head h2{margin:10px 0 0; font-weight:900; font-size:clamp(1.875rem,4.4vw,3.125rem); line-height:1.3; letter-spacing:.01em;}
.sec-head p{margin:18px 0 0; max-width:40em; color:#3a3835; font-size:1.0625rem;}
.band{background:var(--card); border-block:1px solid var(--line);}
.dark{background:var(--night); color:#f4f4f6;}
.dark .kicker, .dark .sec-head p{color:#b0b0b8;}
.site-footer{padding:56px 0 40px; font-size:0.875rem; border-top:1px solid var(--line);}
.site-footer .cols{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px;}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,auto); gap:8px 32px;}
.site-footer a{text-decoration:none; color:#3a3835;}
.site-footer .foot-brand{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.site-footer .foot-x{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--muted);}
.site-footer .foot-x svg{width:16px; height:16px; fill:currentColor;}
.site-footer .foot-x:hover{color:#3a3835;}
.site-footer .copy{margin-top:40px; color:var(--muted); font-size:0.8125rem;}
.ul-sweep{text-decoration:none; background:linear-gradient(currentColor,currentColor) 100% 100% / 0 1.5px no-repeat; transition:background-size .5s var(--ease-out);}
.ul-sweep:hover{background-position:0 100%; background-size:100% 1.5px;}
.ul-redraw{background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1.5px no-repeat;}
a:hover .ul-redraw, .ul-redraw:hover{animation:ul-redraw .8s var(--ease-out);}
@keyframes ul-redraw{0%{background-position:100% 100%; background-size:100% 1.5px;} 40%{background-position:100% 100%; background-size:0 1.5px;} 41%{background-position:0 100%; background-size:0 1.5px;} 100%{background-position:0 100%; background-size:100% 1.5px;}}
.btn:hover .arw{animation:arw-swap .6s var(--ease-out);}
@keyframes arw-swap{0%{transform:none; opacity:1;} 40%{transform:translateX(12px); opacity:0;} 41%{transform:translateX(-12px); opacity:0;} 100%{transform:none; opacity:1;}}
.logo{transition:opacity .3s;} .logo:hover{opacity:.65;}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}