/* ===== base = smartphone ===== */
:root{--n0:#050506;--n1:#0b0b0d;--n2:#141416;--n3:#1e1e21;--line:#2a2a2e;--line-s:#67676c;--ash:#8e8e93;--mist:#c4c4c7;--bone:#ededea;--neon:#ffffff;--on-neon:#050506;--halo:#ffffff14;--glow-soft:0 0 12px rgba(255,255,255,.22);--glow-neon:0 0 2px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.45),0 0 36px rgba(255,255,255,.2);--f-script:"Allura","Cormorant Garamond",cursive;--f-serif:"Cormorant Garamond","Shippori Mincho","Yu Mincho",serif;--f-mincho:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;--f-sans:"Jost","Zen Kaku Gothic New","Hiragino Sans",sans-serif;--fast:200ms;--ease:cubic-bezier(.22,.61,.36,1);--pad:32px}
*{box-sizing:border-box}
body{margin:0;background:#0b0b0d;color:#ededea;font-family:var(--f-sans);-webkit-font-smoothing:antialiased}
a{color:#ededea;text-decoration:none}
a:hover{color:#ffffff}
::selection{background:#ffffff;color:#050506}
:focus-visible{outline:2px solid #ffffff;outline-offset:2px;box-shadow:0 0 0 2px #0b0b0d}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
.label{font:500 11px/16px var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin:0}
.caption{font:400 12px/1.7 var(--f-sans);letter-spacing:.04em;color:var(--ash);margin:0}
.body{font:400 15px/1.9 var(--f-sans);letter-spacing:.02em;color:var(--mist);margin:0}
.hlja{font:500 22px/1.6 var(--f-mincho);letter-spacing:.08em;color:var(--bone);margin:0}
.script-title{font:400 56px/1 var(--f-script);color:var(--bone);margin:0}
.script-accent{font:400 44px/1.1 var(--f-script);color:var(--bone);margin:0}
.neon{color:#ffffff;text-shadow:var(--glow-neon)}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.idx{font:400 12px/1 var(--f-sans);letter-spacing:.24em;color:var(--ash);display:flex;align-items:center;gap:16px;margin:0 0 16px}
.idx::after{content:"";width:48px;height:1px;background:var(--line-s)}

/* nav + menu */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 var(--pad);background:rgba(20,20,22,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-logo{font:400 30px/1 var(--f-script);color:#ffffff;text-shadow:var(--glow-neon);white-space:nowrap}
.nav-links{display:none}
.nav-link{position:relative;font:500 11px/16px var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mist);padding:14px 0;transition:color var(--fast)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:#ffffff;transform:scaleX(0);transform-origin:right;transition:transform 450ms var(--ease)}
.nav-link:hover{color:#ffffff}
.nav-link:hover::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 12px;margin-right:-4px;background:none;border:0;cursor:pointer;color:#ededea}
.menu-btn .lines{position:relative;width:28px;height:10px}
.menu-btn .lines::before,.menu-btn .lines::after{content:"";position:absolute;right:0;height:1px;background:currentColor;transition:transform 500ms var(--ease),top 500ms var(--ease),width 500ms var(--ease)}
.menu-btn .lines::before{top:0;width:28px}
.menu-btn .lines::after{top:9px;width:18px}
.menu-btn.is-open .lines::before{top:4px;transform:rotate(45deg)}
.menu-btn.is-open .lines::after{top:4px;width:28px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:#050506;padding:96px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow-y:auto;animation:menuin 700ms var(--ease) both}
@keyframes menuin{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.menu-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.menu-list a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:44px;padding:18px 0;border-bottom:1px solid var(--line);font:italic 400 40px/1 var(--f-serif);color:var(--bone);opacity:0;animation:up 700ms var(--ease) both;transition:color var(--fast),text-shadow var(--fast),padding-left 500ms var(--ease)}
.menu-list a:hover,.menu-list a.is-active{color:#ffffff;text-shadow:var(--glow-neon)}
.menu-list a:hover{padding-left:12px}
.menu-list li:nth-child(1) a{animation-delay:.15s}
.menu-list li:nth-child(2) a{animation-delay:.22s}
.menu-list li:nth-child(3) a{animation-delay:.29s}
.menu-list li:nth-child(4) a{animation-delay:.36s}
.menu-list li:nth-child(5) a{animation-delay:.43s}
.menu-list li:nth-child(6) a{animation-delay:.5s}
.menu-foot{display:flex;flex-direction:column;gap:16px;animation:up 700ms .6s var(--ease) both}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 28px;border-radius:2px;border:1px solid var(--line-s);background:transparent;color:var(--bone);font:500 11px/16px var(--f-sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:color 300ms var(--ease),border-color var(--fast),box-shadow var(--fast)}
.btn::before{content:"";position:absolute;inset:0;background:#ffffff;transform:translateX(-101%);transition:transform 520ms var(--ease)}
.btn span,.btn svg{position:relative}
.btn:hover{color:#050506;border-color:#ffffff;box-shadow:var(--glow-soft)}
.btn:hover::before{transform:translateX(0)}
.btn .arr{transition:transform 300ms var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:#ffffff;color:#050506;border-color:#ffffff}
.btn-primary::before{background:#0b0b0d}
.btn-primary:hover{color:#ffffff}
.btn-sm{min-height:44px;padding:0 20px}
.dummy{position:relative;display:flex;align-items:center;justify-content:center;background-color:#141416;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,rgba(255,255,255,0) 1px 16px);overflow:hidden}
.dummy-l{font:500 10px/14px var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:#8e8e93;background:#0b0b0d;border:1px solid #2a2a2e;padding:6px 12px;white-space:nowrap}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ignite{0%{opacity:0;text-shadow:none}10%{opacity:.7}13%{opacity:.08}22%{opacity:.9}25%{opacity:.25}35%{opacity:1;text-shadow:var(--glow-neon)}100%{opacity:1;text-shadow:var(--glow-neon)}}
@keyframes focus{from{filter:blur(18px) brightness(.15);clip-path:inset(0 0 100% 0)}to{filter:blur(0) brightness(1);clip-path:inset(0 0 0 0)}}

.cwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-block:140px 112px}
.cinfo{display:flex;flex-direction:column;gap:28px}
.cinfo .ttl{display:flex;flex-direction:column;gap:8px}
.cinfo .script-title{font-size:88px;line-height:.95;animation:ignite 2.2s .4s steps(1,end) both}
.cinfo .ttl .label,.cinfo .idx{animation:up 1s .2s var(--ease) both}
.cinfo .a1{animation:up 1s .8s var(--ease) both}
.cinfo .a2{animation:up 1s 1s var(--ease) both}
.cinfo .a3{animation:up 1s 1.2s var(--ease) both}
.cphoto{display:none}
.cphoto img{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
.facts{display:grid;grid-template-columns:80px minmax(0,1fr);border-top:1px solid var(--line);margin:0}
.facts dt,.facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 11px/24px var(--f-sans);letter-spacing:.24em;color:var(--ash)}
.facts dd{font:400 14px/24px var(--f-sans);color:var(--bone)}

/* form */
.form{display:flex;flex-direction:column;gap:32px;background:#141416;border:1px solid var(--line);padding:32px 20px;margin-inline:calc(var(--pad) * -1 + 12px);animation:up 1.1s .5s var(--ease) both}
.form-head{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.field{display:flex;flex-direction:column;gap:10px;position:relative}
.flabel{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:500 13px/1.4 var(--f-sans);letter-spacing:.06em;color:var(--bone)}
.req{font:500 10px/14px var(--f-sans);letter-spacing:.16em;color:#050506;background:#ededea;border-radius:2px;padding:2px 6px}
.opt{font:500 10px/14px var(--f-sans);letter-spacing:.16em;color:var(--ash);border:1px solid var(--line-s);border-radius:2px;padding:1px 6px}
.ctl{position:relative}
.input{display:block;width:100%;min-height:52px;padding:14px 16px;background:#0b0b0d;border:1px solid var(--line-s);border-radius:2px;color:var(--bone);font:400 16px/1.6 var(--f-sans);letter-spacing:.02em;outline:none;transition:border-color var(--fast),box-shadow 400ms var(--ease),background-color var(--fast);color-scheme:dark;appearance:none;-webkit-appearance:none}
.input::placeholder{color:#8e8e93}
.input:hover{border-color:#c4c4c7}
.input:focus{border-color:#ffffff;box-shadow:var(--glow-soft);background:#050506}
.input[aria-invalid="true"]{border-color:#ededea;border-style:dashed}
textarea.input{min-height:180px;resize:vertical}
.bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff;transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease);pointer-events:none;box-shadow:var(--glow-soft)}
.input:focus ~ .bar{transform:scaleX(1)}
.chev{position:absolute;right:16px;top:50%;margin-top:-8px;color:var(--mist);pointer-events:none;transition:transform 400ms var(--ease)}
.ctl:focus-within .chev{transform:rotate(180deg);color:#ffffff}
select.input{padding-right:44px;cursor:pointer}
.hint{display:flex;justify-content:space-between;gap:12px}
.err{display:flex;align-items:center;gap:8px;font:500 12px/1.6 var(--f-sans);letter-spacing:.04em;color:#ededea;margin:0;animation:up 400ms var(--ease) both}
.err::before{content:"※"}
.kinds{display:flex;gap:8px;flex-wrap:wrap}
.kind{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-s);background:transparent;color:var(--mist);font:500 12px/16px var(--f-sans);letter-spacing:.12em;cursor:pointer;transition:color var(--fast),border-color var(--fast),box-shadow var(--fast),background-color var(--fast)}
.kind:hover{color:#ffffff;border-color:#c4c4c7}
.kind .dot{width:6px;height:6px;border-radius:999px;border:1px solid currentColor;transition:background-color var(--fast),box-shadow var(--fast)}
.kind.is-on{color:#ffffff;border-color:#ffffff;background:var(--halo);box-shadow:var(--glow-soft)}
.kind.is-on .dot{background:#ffffff;box-shadow:0 0 6px rgba(255,255,255,.8)}
.agree{display:flex;align-items:flex-start;gap:12px;font:400 14px/1.7 var(--f-sans);color:var(--mist);cursor:pointer;min-height:44px}
.agree input{width:22px;height:22px;margin:2px 0 0;accent-color:#ffffff;flex:none;cursor:pointer}
.submit{display:flex;flex-direction:column-reverse;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.submit .btn{width:100%}

.sent{display:flex;flex-direction:column;align-items:flex-start;gap:20px;background:#141416;border:1px solid var(--line);padding:48px 20px;margin-inline:calc(var(--pad) * -1 + 12px);animation:up 900ms var(--ease) both}
.sent-ring{width:72px;height:72px}
.sent-ring circle{stroke-dasharray:264;stroke-dashoffset:264;animation:ringdraw 1.4s .2s var(--ease) forwards}
.sent-ring path{stroke-dasharray:40;stroke-dashoffset:40;animation:ringdraw .6s 1.2s var(--ease) forwards}
@keyframes ringdraw{to{stroke-dashoffset:0}}
.sent .script-accent{animation:ignite 2s .8s steps(1,end) both}
.sent-btns{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px}
.sent-btns .btn{width:100%}

.foot{background:#050506;border-top:1px solid var(--line);padding:56px var(--pad) 40px}
.foot-row{display:flex;flex-direction:column;gap:24px}
.foot-logo{font:400 44px/1 var(--f-script);color:#ededea}
.foot-nav{display:flex;gap:8px 24px;flex-wrap:wrap}
.sns{display:flex;gap:8px}
.sns a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--mist);border-radius:999px;transition:color var(--fast),box-shadow var(--fast)}
.sns a:hover{color:#ffffff;box-shadow:var(--glow-soft)}
.nav-sns{width:44px;height:44px;margin:0 -8px;display:flex;align-items:center;justify-content:center;color:var(--mist);transition:color var(--fast)}
.nav-sns:hover{color:#ffffff}
.menu-foot .sns{margin-left:-12px}

/* ===== tablet ===== */
@media (min-width:768px){
  :root{--pad:48px}
  .hlja{font-size:28px}
  .cwrap{padding-block:180px 140px;gap:72px}
  .cinfo .script-title{font-size:120px}
  .facts{grid-template-columns:120px minmax(0,1fr)}
  .form,.sent{margin-inline:0;padding:48px}
  .form-head{flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
  .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .submit{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
  .submit .btn{width:auto;min-width:260px}
  .sent-btns{flex-direction:row;width:auto}
  .sent-btns .btn{width:auto}
  .sent-ring{width:88px;height:88px}
  .foot-row{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
}
@media (min-width:960px){
  .nav{height:auto;padding:18px var(--pad)}
  .nav-logo{font-size:34px}
  .nav-links{display:flex;align-items:center;gap:32px}
  .menu-btn,.menu{display:none}
}
/* ===== desktop ===== */
@media (min-width:1080px){
  :root{--pad:64px}
  .cwrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start;padding-block:200px 160px}
  .cphoto{display:flex;aspect-ratio:3 / 4;overflow:hidden;background:#050506;margin-top:16px;animation:focus 2.4s .6s var(--ease) both}
  .form{padding:56px}
  .sent{padding:72px 56px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.menu-list a{opacity:1}}
/* ===== point color: champagne gold ===== */
:root{--gold:#d4bc8b;--gold-glow:0 0 14px rgba(212,188,139,.35)}
::selection{background:var(--gold);color:#050506}
.progress{background:var(--gold);box-shadow:var(--gold-glow)}
.nav-link::after{background:var(--gold)}
.nav-link.is-active{color:var(--gold)}
.btn-primary{background:var(--gold);color:#050506;border-color:var(--gold)}
.btn-primary:hover{color:var(--gold);box-shadow:var(--gold-glow)}
.idx{color:var(--gold)}
.script-accent{color:var(--gold)}
.svc:hover .svc-no{color:var(--gold)}
.plan.is-rec{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,188,139,.2),var(--gold-glow)}
.badge{background:var(--gold);color:#050506}

/* ===== production additions ===== */
[hidden]{display:none !important}
.caption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.caption a:hover{color:#ededea}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-alert{margin:0;padding:14px 16px;border:1px solid #8a5a5a;color:#ededea;font:400 14px/1.7 var(--f-sans)}