@property --cx { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
@property --cy { syntax: "<length-percentage>"; inherits: true; initial-value: 0%; }
/* ===== 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}
button{font:inherit;color:inherit}
::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%}
.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}
.lede{font:400 16px/2 var(--f-mincho);letter-spacing:.04em;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 */
.progress{position:fixed;top:0;left:0;width:100%;height:1px;background:#ffffff;transform-origin:left;transform:scaleX(0);z-index:70;box-shadow:var(--glow-soft)}
.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}
.nav-link.is-active{color:#ffffff}
.nav-link.is-active::after{transform:scaleX(1)}
.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}

@supports (animation-timeline: view()) {
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  .draw-x{animation:drawy linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
  .step{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
@keyframes prog{to{transform:scaleX(1)}}
@keyframes rv{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* head */
.phead{padding:140px 0 72px;position:relative;overflow:hidden}
.phead-in{display:flex;flex-direction:column;gap:24px}
.phead .ttl{display:flex;flex-direction:column;gap:8px}
.phead .script-title{font-size:88px;line-height:.95;animation:ignite 2.2s .4s steps(1,end) both}
@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)}}
.phead .lede,.phead .jump{animation:up 1s .9s var(--ease) both}
.phead-img{display:none}
.phead-img img{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-s);font:500 11px/16px var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mist);transition:color var(--fast),border-color var(--fast),box-shadow var(--fast)}
.jump a:hover{color:#ffffff;border-color:#ffffff;box-shadow:var(--glow-soft)}

.psec{padding-block:88px;border-top:1px solid var(--line);position:relative}
.psec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}
.psec-head .ttl{display:flex;flex-direction:column;gap:8px}

/* plans */
.plans,.plans-2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:22px;padding:32px 24px;background:#141416;border:1px solid var(--line);overflow:hidden;transition:background-color 500ms var(--ease),border-color 300ms var(--ease),box-shadow 500ms var(--ease),transform 600ms var(--ease)}
.plan::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 260px at var(--cx) var(--cy),rgba(255,255,255,.08),rgba(255,255,255,0) 70%);opacity:0;transition:opacity 400ms var(--ease)}
.plan:hover{background-color:#1e1e21;box-shadow:var(--glow-soft)}
.plan:hover::before{opacity:1}
.plan > *{position:relative}
.plan.is-rec{border-color:#ffffff;box-shadow:0 0 0 1px rgba(255,255,255,.15),var(--glow-soft)}
.badge{position:absolute;top:20px;right:20px;font:500 10px/14px var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#050506;background:#ffffff;border-radius:999px;padding:6px 12px}
.plan-name{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font:italic 500 48px/1 var(--f-serif);color:var(--bone);letter-spacing:.01em}
.price .from{font:italic 400 24px/1 var(--f-serif);color:var(--mist)}
.feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.feat li{display:flex;gap:12px;align-items:flex-start;font:400 14px/1.7 var(--f-sans);letter-spacing:.02em;color:var(--mist)}
.feat li svg{flex:none;margin-top:4px;color:var(--ash);transition:color var(--fast)}
.plan:hover .feat li svg{color:#ffffff}
.plan .btn{width:100%}
.side{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}

.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-bottom:0;border-right:0;margin-top:16px}
.incl > div{display:flex;flex-direction:column;gap:10px;padding:22px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color 400ms var(--ease)}
.incl > div:last-child{grid-column:1 / span 2}
.incl > div:hover{background:#141416}
.incl svg{color:var(--mist)}
.incl p{margin:0;font:400 14px/1.6 var(--f-sans);color:var(--bone)}

.opts{width:100%;border-collapse:collapse;table-layout:fixed}
.opts th,.opts td{text-align:left;padding:16px 4px;border-bottom:1px solid var(--line);font:400 14px/1.6 var(--f-sans);letter-spacing:.02em;vertical-align:top}
.opts th{font:500 11px/16px var(--f-sans);letter-spacing:.24em;color:var(--ash);text-transform:uppercase;border-bottom-color:var(--line-s)}
.opts td:last-child,.opts th:last-child{text-align:right;white-space:nowrap;width:92px}
.opts td:first-child{overflow-wrap:anywhere}
.opts td:last-child{font:italic 500 18px/1.2 var(--f-serif);color:var(--bone)}
.opts .sub{display:block;margin-top:4px}
.opts tbody tr{transition:background-color 300ms var(--ease)}
.opts tbody tr:hover{background:#141416}
.tbox{overflow-x:auto}

.flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-left:40px}
.flow-line{position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--line-s);transform-origin:top;box-shadow:var(--glow-soft)}
.step{position:relative;display:flex;flex-direction:column;gap:10px}
.step::before{content:"";position:absolute;top:14px;left:-40px;width:9px;height:9px;border-radius:999px;background:#0b0b0d;border:1px solid #ffffff;box-shadow:var(--glow-soft)}
.step-no{font:italic 500 36px/1 var(--f-serif);color:var(--bone)}
.step h3{margin:0;font:500 18px/1.5 var(--f-mincho);letter-spacing:.06em;color:var(--bone)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:24px 0;cursor:pointer;font:500 16px/1.6 var(--f-mincho);letter-spacing:.06em;color:var(--bone);transition:color var(--fast),padding-left 500ms var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#ffffff}
.faq .pm{position:relative;flex:none;width:20px;height:20px}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;top:50%;width:20px;height:1px;background:currentColor;transition:transform 500ms var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details[open] summary{color:#ffffff}
.faq .ans{padding:0 0 28px;max-width:46em;animation:up 600ms var(--ease) both}

.cta{position:relative;overflow:hidden;padding:112px var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;border-top:1px solid var(--line);background:#050506}
.cta-in{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.9}
.cta-bg picture,.cta-bg img{display:block;width:100%;height:100%}
.cta-bg img{object-fit:cover;object-position:center;-webkit-user-select:none;user-select:none}
.cta-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(5,5,6,.55),rgba(5,5,6,0) 100%),linear-gradient(to bottom,rgba(5,5,6,.6),rgba(5,5,6,0) 22%,rgba(5,5,6,0) 78%,rgba(5,5,6,.6))}
.cta .btn{width:100%;max-width:340px}
.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}
  .lede{font-size:18px}
  .hlja{font-size:28px}
  .script-title{font-size:72px}
  .phead{padding:180px 0 112px}
  .phead-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
  .phead .script-title{font-size:120px}
  .jump{flex-wrap:wrap;overflow:visible;margin:32px 0 0;padding:0}
  .psec{padding-block:120px}
  .psec-head{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px;margin-bottom:64px}
  .psec-head .body{max-width:34em}
  .plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans-2 .side{grid-column:1 / span 2}
  .plans-2 .plan-wide{grid-column:span 2}
  .plan{padding:40px 36px}
  .price b{font-size:56px}
  .incl{grid-template-columns:repeat(5,minmax(0,1fr))}
  .incl > div:last-child{grid-column:auto}
  .opts th,.opts td{padding:22px 16px;font-size:15px}
  .opts td:last-child,.opts th:last-child{width:160px}
  .opts td:last-child{font-size:22px}
  .cta{padding:160px var(--pad)}
  .cta .btn{width:auto}
  .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}
  .phead{padding:200px 0 120px}
  .cta-bg img{object-position:right center}
  .phead-img{display:flex;position:absolute;right:var(--pad);top:96px;width:200px;aspect-ratio:2 / 3;opacity:.85;overflow:hidden;background:#050506;box-shadow:0 0 0 1px rgba(255,255,255,.12);pointer-events:none;animation:up 1.4s .6s var(--ease) both}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans-2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans-2 .side{grid-column:auto;padding:8px 32px 0 0;margin-bottom:0}
  .plan:hover{transform:translateY(-6px)}
  .flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-left:0;padding-top:40px}
  .flow-line{left:0;right:0;top:12px;bottom:auto;width:auto;height:1px;transform-origin:left}
  .step::before{top:-34px;left:0}
  .step-no{font-size:40px}
  .faq summary{font-size:17px;padding:28px 8px}
  .faq summary:hover{padding-left:20px}
  .faq .ans{padding:0 8px 32px}
  @supports (animation-timeline: view()) { .draw-x{animation-name:drawx} }
}
@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}
/* ===== SP: plan menus open/close ===== */
.acc-h{display:none;margin:0}
@media (max-width:767px){
  .acc{padding-block:0}
  .acc-h{display:block}
  .acc:not(.is-open) .wrap > :not(.acc-h){display:none}
  .acc.is-open .wrap{padding-bottom:56px}
  .acc .psec-head .ttl,.acc .side > .idx,.acc .side > div{display:none}
  .acc-btn{width:100%;min-height:44px;display:flex;align-items:center;gap:14px;padding:24px 0;background:none;border:0;color:var(--bone);text-align:left;cursor:pointer;font:inherit}
  .acc-no{flex:none;font:400 12px/1 var(--f-sans);letter-spacing:.24em;color:var(--gold)}
  .acc-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font:400 40px/1 var(--f-script);color:var(--bone)}
  .acc-from{flex:none;font:italic 500 18px/1 var(--f-serif);color:var(--mist)}
  .acc-pm{position:relative;flex:none;width:18px;height:18px;margin-left:4px}
  .acc-pm::before,.acc-pm::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:currentColor;transition:transform 500ms var(--ease)}
  .acc-pm::after{transform:rotate(90deg)}
  .acc.is-open .acc-pm::after{transform:rotate(0)}
}

/* ===== 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)}