/* はじめの画面（第3版）— 暗い地に、光る差し色と白い画面。部品カードの「ミッドナイト」と同じ作法で、作成画面そのものを主役に見せる */
body[data-route="start"]{padding-bottom:0;background:#060a18;color:#e9eeff;color-scheme:dark;
--s-bg:#060a18;--s-bg2:#0a1026;--s-card:rgba(255,255,255,.04);--s-card2:rgba(255,255,255,.07);--s-line:rgba(255,255,255,.1);--s-line2:rgba(255,255,255,.18);
--s-ink:#f3f6ff;--s-sub:#a9b4d4;--s-dim:#7f8bad;--s-blue:#6c9bff;--s-cyan:#58d6ff;--s-violet:#9d8bff;--s-fire:#ff6a4d;
--s-grad:linear-gradient(92deg,#86b4ff 0%,#ac9dff 48%,#ff9f80 100%)}
body[data-route="start"] .top{display:none}
body[data-route="start"] .steps{display:none}
body[data-route="start"] .layout{display:block;max-width:none;padding:0}
body[data-route="start"] .main{min-width:0}
body[data-route="start"] .bar{transform:translateY(110%);transition:transform .35s var(--ease);display:block;background:rgba(8,12,28,.9);border-top:1px solid var(--s-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body[data-route="start"] .bar.show{transform:none}
@media(min-width:761px){body[data-route="start"] .bar{display:none}}
.sp-stick .grow{color:var(--s-sub)}.sp-stick .grow b{font-family:var(--head);color:#fff}
@media(max-width:560px){.sp-stick .sp-btn{width:100%}}
.sp-wrap{width:min(100% - 48px,1200px);margin:0 auto}
.sp-hero,.sp-nums,.sp-sec,.sp-final{word-break:auto-phrase}
.wb{word-break:keep-all;overflow-wrap:anywhere}
/* ---------- 上の帯 ---------- */
.sp-nav{position:fixed;left:0;right:0;top:0;z-index:40;transition:background .3s,border-color .3s,backdrop-filter .3s,transform .4s var(--ease);border-bottom:1px solid transparent}
.sp-nav.away{transform:translateY(-100%)}
.sp-nav.solid{background:rgba(6,10,24,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom-color:var(--s-line)}
.sp-nav-in{width:min(100% - 48px,1200px);margin:0 auto;height:68px;display:flex;align-items:center;gap:28px}
.sp-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;white-space:nowrap}
.sp-brand img{width:30px;height:30px}
.sp-brand b{font-family:var(--serif);font-size:19px;letter-spacing:.06em}
.sp-brand span{margin-left:4px;padding-left:13px;border-left:1px solid var(--s-line2);font-size:12px;letter-spacing:.12em;color:var(--s-sub)}
.sp-nav nav{margin-left:auto;display:flex;gap:4px}
.sp-nav nav a{padding:8px 13px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--s-sub);text-decoration:none;transition:color .2s,background .2s}
.sp-nav nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.sp-nav .sp-btn{opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),box-shadow .3s}
.sp-nav.cta .sp-btn{opacity:1;transform:none;pointer-events:auto}
/* ---------- 光と方眼の空 ---------- */
.sp-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sp-sky i{position:absolute;display:block;border-radius:50%;filter:blur(70px)}
.sp-sky .g1{left:50%;top:-22%;width:min(1100px,96vw);height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(64,118,255,.55),transparent)}
.sp-sky .g2{left:-12%;top:18%;width:620px;height:620px;background:radial-gradient(closest-side,rgba(134,104,255,.34),transparent)}
.sp-sky .g3{right:-14%;top:34%;width:660px;height:660px;background:radial-gradient(closest-side,rgba(255,106,77,.2),transparent)}
.sp-sky .grid{inset:0;width:auto;height:auto;border-radius:0;filter:none;background:linear-gradient(rgba(150,180,255,.07) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(150,180,255,.07) 1px,transparent 1px) 0 0/56px 56px;-webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(90% 70% at 50% 0%,#000 30%,transparent 78%)}
.sp-hero::after,.sp-final::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
/* ---------- 最初の画面 ---------- */
.sp-hero{position:relative;overflow:hidden;padding:clamp(76px,8.4vh,104px) 0 clamp(64px,8vw,110px);text-align:center}
.sp-hero-in{position:relative;z-index:1;width:min(100% - 48px,1200px);margin:0 auto}
.sp-chip{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px 0 13px;border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:#d6e0ff;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--s-line2);animation:spRise .7s var(--ease) both}
.sp-chip i{width:7px;height:7px;border-radius:50%;background:var(--s-fire);box-shadow:0 0 0 4px rgba(255,106,77,.22),0 0 14px 2px rgba(255,106,77,.7)}
.sp-h1{margin-top:clamp(14px,1.8vw,20px);font-family:var(--head);font-weight:700;font-size:clamp(2.4rem,5.05vw,4.7rem);line-height:1.18;letter-spacing:-.02em;color:#fff}
.sp-h1 .ln{display:inline-block;white-space:nowrap;animation:spRise .85s var(--ease) both}
.sp-h1 .ln:nth-child(2){animation-delay:.1s}
.sp-h1 em,.sp-h2 em{font-style:normal;background:var(--s-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes spRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.sp-sub.left{margin-inline:0}
.sp-sub{margin:clamp(10px,1.2vw,14px) auto 0;max-width:30em;font:700 clamp(1.05rem,1.55vw,1.32rem)/1.7 var(--head);letter-spacing:.02em;color:#e6ecff}
.sp-lead{margin:clamp(10px,1.2vw,14px) auto 0;max-width:36em;color:#c5cfeb;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.95;letter-spacing:.03em;animation:spRise .85s .2s var(--ease) both}
.sp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(16px,1.8vw,22px);animation:spRise .85s .28s var(--ease) both}
.sp-cta.center{justify-content:center}
.sp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:58px;padding:.85rem 1.9rem;border:0;border-radius:14px;font-family:var(--head);font-size:1.02rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .3s,background .3s,color .3s}
.sp-btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.sp-btn:hover svg{transform:translateX(4px)}
.sp-btn.fire{color:#fff;background:linear-gradient(135deg,#ff8466,#e8492c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,120,90,.5),0 18px 44px -12px rgba(255,90,60,.75)}
.sp-btn.fire:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(255,140,110,.7),0 26px 56px -12px rgba(255,90,60,.95)}
.sp-btn.glass{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--s-line2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sp-btn.glass:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sp-btn.sm{min-height:48px;padding:.6rem 1.4rem;font-size:.95rem;border-radius:12px}
.sp-btn.xs{min-height:40px;padding:.4rem 1.05rem;font-size:.86rem;border-radius:10px}.sp-btn.xs svg{width:15px;height:15px}
.sp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sp-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:14px;font-size:.86rem;color:var(--s-sub);letter-spacing:.04em;animation:spRise .85s .36s var(--ease) both}
.sp-facts li{display:inline-flex;align-items:center;gap:7px}
.sp-facts svg{width:13px;height:13px;color:#5fe0a3}
/* 作成画面の実演 */
.sp-stagewrap{margin-top:clamp(20px,2.4vw,30px);animation:spRise 1s .42s var(--ease) both}
.sp-tabs{display:inline-flex;align-items:center;gap:10px;padding:6px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--s-line)}
.sp-tabs span{width:18px;height:1px;background:var(--s-line2)}
.sp-tabs button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 7px;border:0;border-radius:999px;background:transparent;color:var(--s-sub);font:700 13.5px/1 var(--head);letter-spacing:.05em;cursor:pointer;transition:background .3s,color .3s}
.sp-tabs button i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 12px/1 "Inter",sans-serif;font-style:normal;background:rgba(255,255,255,.1);color:#d5dfff;transition:background .3s,color .3s}
.sp-tabs button:hover{color:#fff}
.sp-tabs button.on{background:#fff;color:#0b1430}.sp-tabs button.on i{background:var(--s-fire);color:#fff}
.sp-bwwrap{position:relative;margin:20px auto 0;max-width:1120px;perspective:2200px;--tilt:7deg}
.sp-bwwrap::before{content:"";position:absolute;left:6%;right:6%;top:-4%;bottom:-10%;z-index:0;background:radial-gradient(60% 60% at 50% 40%,rgba(84,132,255,.55),transparent 70%),radial-gradient(40% 50% at 84% 70%,rgba(255,106,77,.28),transparent 70%),radial-gradient(40% 50% at 14% 70%,rgba(140,110,255,.35),transparent 70%);filter:blur(50px);pointer-events:none}
.sp-bw{position:relative;z-index:1;text-align:left;border-radius:16px;overflow:hidden;background:#f4f6fa;color:#0b1730;color-scheme:light;transform:rotateX(var(--tilt));transform-origin:50% 0;box-shadow:0 0 0 1px rgba(255,255,255,.3),inset 0 1px 0 #fff,0 40px 90px -30px rgba(0,0,0,.9),0 0 120px -20px rgba(84,132,255,.55);will-change:transform}
.sp-bw-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:linear-gradient(180deg,#fdfdfe,#eef1f6);border-bottom:1px solid #e0e5ee}
.sp-bw-bar i{width:10px;height:10px;border-radius:50%;background:#f2b8b0}.sp-bw-bar i:nth-child(2){background:#f1d79a}.sp-bw-bar i:nth-child(3){background:#b3dcb4}
.sp-bw-bar span{margin-left:10px;font:700 12.5px/1 var(--head);letter-spacing:.06em;color:#3a465f}
.sp-bw-bar em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:500 11.5px/1 "Noto Sans JP",sans-serif;font-style:normal;color:#1f8f5f}.sp-bw-bar em svg{width:12px;height:12px}
.sp-bw-body{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:clamp(400px,54vh,520px)}
.sp-bw-left{position:relative;padding:20px 20px 18px;border-right:1px solid #e0e5ee;background:#fff;overflow:hidden}
.sp-scene{display:none}.sp-scene.on{display:block;animation:spScene .45s var(--ease)}
@keyframes spScene{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.sp-scene-h{display:grid;gap:3px;margin-bottom:14px}.sp-scene-h b{font:700 15.5px/1.4 var(--head);letter-spacing:.03em}.sp-scene-h small{font-size:12px;color:#66718a}
.sp-tgl{list-style:none;display:grid;gap:7px}
.sp-tgl li{display:flex;align-items:center;gap:12px;height:44px;padding:0 13px;border-radius:11px;border:1.5px solid #e3e8f0;background:#fff;font-size:13.5px;color:#66718a;transition:border-color .25s,background .25s,color .25s,box-shadow .25s}
.sp-tgl li b{font-weight:500}
.sp-tgl .tg{flex:none;position:relative;width:34px;height:20px;border-radius:999px;background:#d7dde8;transition:background .25s}
.sp-tgl .tg i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,23,48,.3);transition:transform .28s var(--ease)}
.sp-tgl li.on{border-color:#2a56a6;background:#f1f5fd;color:#0b1730;box-shadow:0 6px 16px -10px rgba(42,86,166,.6)}.sp-tgl li.on b{font-weight:700}
.sp-tgl li.on .tg{background:#2a56a6}.sp-tgl li.on .tg i{transform:translateX(14px)}
.sp-vars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-var{border-radius:10px;overflow:hidden;border:2px solid #e3e8f0;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.sp-var img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sp-var span{display:block;padding:6px 9px 8px;font-size:11.5px;font-weight:500;line-height:1.4;color:#3a465f}
.sp-var.on{border-color:#2a56a6;box-shadow:0 0 0 4px #e3ebfa,0 10px 22px -12px rgba(42,86,166,.7);transform:translateY(-1px)}
.sp-q{margin-top:14px}.sp-q:first-of-type{margin-top:0}
.sp-q label{display:block;margin-bottom:7px;font:700 13px/1.5 var(--head)}
.sp-in{display:flex;align-items:center;min-height:44px;padding:9px 13px;border-radius:11px;border:1.5px solid #dfe4ec;background:#fff;font-size:14px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
.sp-in i{flex:none;width:1.5px;height:18px;margin-left:1px;background:#2a56a6;opacity:0}
.sp-in.focus{border-color:#2a56a6;box-shadow:0 0 0 4px #e3ebfa}.sp-in.focus i{animation:spCaret .9s steps(1) infinite}
@keyframes spCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.sp-q-note{margin-top:7px;font-size:11.5px;color:#66718a}
.sp-go{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;font:700 14px/1 var(--head);letter-spacing:.05em;color:#9aa4b8;background:#eef1f6;transition:background .4s,color .4s,box-shadow .4s}
.sp-go svg{width:16px;height:16px}
.sp-go.on{color:#fff;background:linear-gradient(135deg,#ff8466,#e8492c);box-shadow:0 12px 26px -10px rgba(232,73,44,.8)}
.sp-bw-right{display:flex;flex-direction:column;min-width:0;min-height:0;background:#e4e9f1}
.sp-pv-h{flex:none;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;background:#fff;border-bottom:1px solid #e0e5ee}
.sp-pv-h>b{font:700 13.5px/1 var(--head);letter-spacing:.05em}
.sp-pv-h span{font-size:11.5px;padding:4px 9px;border-radius:999px;background:#eef2f8;color:#566178;transition:background .3s,color .3s}
.sp-pv-h span.done{background:#e5f5ec;color:#1f8f5f;font-weight:700}
.sp-pv-h em{margin-left:auto;font:700 12px/1 "Inter",sans-serif;font-style:normal;color:#2a56a6;font-variant-numeric:tabular-nums}.sp-pv-h em b{font-size:15px;color:#0b1730}
.sp-pv{position:relative;flex:1;min-height:0;overflow:hidden;padding:14px 16px 0}
.sp-pv-empty{position:absolute;inset:14px 16px;display:grid;place-items:center;border:1.5px dashed #b9c4d8;border-radius:10px;font-size:13px;color:#66718a;text-align:center;padding:0 20px}
.sp-pv-empty[hidden]{display:none}
.sp-page{position:relative;display:grid;background:#fff;box-shadow:0 1px 2px rgba(11,23,48,.08),0 18px 36px -20px rgba(11,23,48,.4)}
.sp-pv .sp-page{margin-bottom:14px}
.sp-row{position:relative;overflow:hidden}
.sp-row .illhost{zoom:var(--z,1);opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),opacity .25s}
.sp-row.is-in .illhost{opacity:1;clip-path:inset(0 0 0 0)}
.sp-row::before{content:attr(data-name);position:absolute;inset:3px;z-index:2;display:grid;place-items:center;border:1.5px dashed rgba(42,86,166,.55);border-radius:6px;background:rgba(42,86,166,.05);color:#2a56a6;font:700 12px/1 var(--head);letter-spacing:.1em;opacity:0;transition:opacity .3s;pointer-events:none}
.sp-row.is-wire::before{opacity:1}.sp-row.is-in::before{opacity:0}
.sp-row.is-sw-r .illhost{animation:spSwapR .4s var(--ease)}.sp-row.is-sw-l .illhost{animation:spSwapL .4s var(--ease)}
@keyframes spSwapR{from{opacity:.1;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes spSwapL{from{opacity:.1;transform:translateX(-30px)}to{opacity:1;transform:none}}
.sp-cursor,.sp-click{position:absolute;left:0;top:0;z-index:9;pointer-events:none}
.sp-cursor{width:26px;height:26px;margin:-3px 0 0 -5px;opacity:0;filter:drop-shadow(0 4px 6px rgba(11,23,48,.35))}.sp-cursor svg{display:block;width:100%;height:100%}
.sp-click{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #2a56a6;background:rgba(42,86,166,.16);opacity:0}
/* ---------- 数字 ---------- */
.sp-nums{position:relative;border-top:1px solid var(--s-line2);border-bottom:1px solid var(--s-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.sp-nums ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-nums li{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;padding:clamp(24px,3vw,38px) clamp(14px,2vw,30px);border-left:1px solid var(--s-line)}
.sp-nums li:first-child{border-left:0;padding-left:0}
.sp-nums b{white-space:nowrap;font:700 clamp(1.95rem,3.5vw,3.05rem)/1.06 "Inter",sans-serif;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.sp-nums b i{font-style:normal;font-size:.55em;margin-left:.1em;letter-spacing:0;color:var(--s-sub)}
.sp-nums li>b{display:block}
.sp-nums li>span{display:block;font:700 clamp(.92rem,1.1vw,1.06rem)/1.4 var(--head);color:#dfe7ff;letter-spacing:.04em}
.sp-nums .sp-time b{font-size:clamp(1.65rem,2.85vw,2.5rem)}
.sp-nums small{display:block;margin-top:2px;font-size:.82rem;line-height:1.65;color:var(--s-sub);letter-spacing:.03em}
/* ---------- 節の共通 ---------- */
.sp-sec{position:relative;padding:clamp(64px,7.2vw,110px) 0}
.sp-sec>.sp-wrap{position:relative}
#sp-flow::before,#sp-feat::before,#sp-faq::before,#sp-intro::before{content:"";position:absolute;inset:0;pointer-events:none}
#sp-intro::before{background:radial-gradient(58% 46% at 50% 42%,rgba(108,155,255,.16),transparent 72%),radial-gradient(40% 32% at 88% 88%,rgba(255,106,77,.1),transparent 70%)}
.sp-intro{padding-top:clamp(40px,4.6vw,72px);padding-bottom:clamp(40px,4.6vw,72px)}
.sp-intro::before{content:"";position:absolute;left:50%;top:44%;width:min(1500px,116%);height:120%;
transform:translate(-50%,-50%);pointer-events:none;z-index:0;
background:radial-gradient(52% 46% at 50% 50%,rgba(74,110,210,.20),rgba(74,110,210,.07) 46%,transparent 72%)}
.sp-intro .sp-wrap{position:relative;z-index:1}
.sp-intro .sp-video{margin-top:0}
#sp-flow::before{background:radial-gradient(46% 40% at 0% 38%,rgba(134,104,255,.16),transparent 70%),radial-gradient(40% 36% at 100% 78%,rgba(64,118,255,.14),transparent 70%)}
#sp-feat::before{background:radial-gradient(44% 34% at 100% 16%,rgba(255,106,77,.1),transparent 70%),radial-gradient(46% 40% at 0% 70%,rgba(64,118,255,.16),transparent 70%)}
#sp-faq::before{background:radial-gradient(50% 50% at 50% 110%,rgba(134,104,255,.14),transparent 70%)}
.sp-head{max-width:780px}.sp-head.center{margin-inline:auto;text-align:center}
.sp-label{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.2em;color:var(--s-blue)}
.sp-label::before{content:"";width:22px;height:1px;background:currentColor}
.sp-h2{margin-top:16px;font-family:var(--head);font-size:clamp(1.9rem,3.9vw,3.3rem);font-weight:700;line-height:1.25;letter-spacing:-.015em;color:#fff}
.sp-h2.sm{font-size:clamp(1.5rem,2.5vw,2.1rem)}
.sp-p{margin-top:16px;color:#bcc7e4;font-size:clamp(.97rem,1.12vw,1.06rem);line-height:2;letter-spacing:.03em}
.sp-head.center .sp-p{max-width:38em;margin-inline:auto}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.rv.is-v{opacity:1;transform:none}
/* カード（縁が光り、カーソルに光が付いてくる） */
.sp-tile{position:relative;overflow:hidden;border-radius:20px;padding:26px 26px 28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px var(--s-line),inset 0 1px 0 rgba(255,255,255,.12)}
.sp-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-40%),rgba(120,160,255,.2),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.sp-tile:hover::before{opacity:1}
.sp-tile>*{position:relative}
.sp-tile h3{font:700 clamp(1.12rem,1.5vw,1.32rem)/1.45 var(--head);letter-spacing:.02em;color:#fff}
.sp-tile p{margin-top:10px;font-size:.93rem;line-height:1.95;color:#b7c2df;letter-spacing:.02em}
.sp-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:16px;border-radius:12px;color:#cfe0ff;background:linear-gradient(135deg,rgba(108,155,255,.3),rgba(157,139,255,.18));box-shadow:inset 0 0 0 1px rgba(160,190,255,.3)}
.sp-ic svg{width:22px;height:22px}
.sp-vis{position:relative;border-radius:14px;background:rgba(3,7,20,.5);box-shadow:inset 0 0 0 1px var(--s-line)}
/* 進め方：5つの画面 → そのあとのお届け */
.sp-flow{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(14px,1.8vw,24px);margin-top:clamp(40px,4.8vw,64px)}
.sp-flow::before{content:"";position:absolute;left:8px;right:8px;top:19px;height:1px;background:linear-gradient(90deg,transparent,var(--s-line2) 7%,var(--s-line2) 93%,transparent)}
.sp-flow li{position:relative;padding-top:52px}
.sp-flow li::before{content:"";position:absolute;left:0;top:11px;width:17px;height:17px;border-radius:50%;background:var(--s-bg);box-shadow:inset 0 0 0 2px var(--s-blue),0 0 0 5px rgba(108,155,255,.13)}
.sp-flow li:last-child::before{box-shadow:inset 0 0 0 2px var(--s-fire),0 0 0 5px rgba(255,106,77,.16)}
.sp-flow .n{margin:0;font:700 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--s-blue)}
.sp-flow li:last-child .n{color:var(--s-fire)}
.sp-flow h3{margin-top:10px;font:700 clamp(1.05rem,1.45vw,1.28rem)/1.5 var(--head);letter-spacing:.02em;color:#fff}
.sp-flow p{margin-top:10px;font-size:.88rem;line-height:1.95;color:#aab6d6;letter-spacing:.02em}
.sp-handover{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(34px,4vw,56px);padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,40px);border-radius:20px;background:linear-gradient(110deg,rgba(255,255,255,.065),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--s-line)}
.sp-handover p{margin:0;display:grid;gap:8px}
.sp-handover em{font-style:normal;font:600 11px/1 var(--mono);letter-spacing:.17em;color:var(--s-dim)}
.sp-handover .hr em{color:var(--s-fire)}
.sp-handover b{font:700 clamp(1.9rem,3.2vw,2.8rem)/1 "Inter",sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.sp-handover b i{font-style:normal;margin-left:.14em;font-family:var(--head);font-size:.45em;letter-spacing:.03em;color:#dfe7ff}
.sp-handover span{font-size:.9rem;line-height:1.9;color:#aab6d6;letter-spacing:.02em}
.sp-handover .ar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--s-line2);color:#cfe0ff}
.sp-handover .ar svg{width:20px;height:20px}
.sp-handover .hr{padding-left:clamp(16px,2.4vw,34px);border-left:1px solid var(--s-line)}
/* 体験②：完成予想図を大きく見ながら整える */
.sp-shape{border-top:1px solid var(--s-line)}
.sp-shapewrap{margin-top:clamp(30px,3.6vw,48px);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--s-line),0 40px 80px -30px rgba(0,0,0,.75)}
.sp-shape-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;background:rgba(255,255,255,.05)}
.sp-shape-top b{font:700 13.5px/1 var(--head);color:#fff}
.sp-shape-top span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--s-sub)}
.sp-shape-top .k{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:6px;border-radius:6px;background:rgba(108,155,255,.22);color:#cfe0ff;font:700 11px/1 var(--head);font-style:normal}
.sp-shape-top .k:first-child{margin-left:0}
.sp-shape-stage{position:relative;padding:22px 22px 26px;background:radial-gradient(120% 90% at 50% 0%,#18233d,#0b1120 70%);color-scheme:light}
.sp-shape-scr{position:relative;height:min(66vh,620px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:10px;scrollbar-width:thin}
.sp-shape-page{width:min(100%,880px);margin:0 auto;background:#fff;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.35),0 40px 90px -40px rgba(0,0,0,.95)}
/* 完成予想図の行は、入ってきた瞬間から見えている（.sp-row は既定で opacity:0・下から出る作りなので、ここで打ち消す） */
.sp-shape-page .sp-row .illhost{transition:none;opacity:1;clip-path:none}
.sp-shape-page .sp-row::before{opacity:0}
.sp-srow{cursor:pointer}
.sp-srow::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(108,155,255,0);background:rgba(108,155,255,0);transition:box-shadow .14s ease,background .14s ease}
.sp-srow.is-hot::after{box-shadow:inset 0 0 0 2px rgba(108,155,255,.95),inset 0 0 44px rgba(108,155,255,.22);background:rgba(108,155,255,.07)}
.sp-srow.is-act::after{box-shadow:inset 0 0 0 3px #4f8cff,inset 0 0 56px rgba(79,140,255,.3);background:rgba(79,140,255,.08)}
.sp-stag{position:absolute;left:0;top:0;z-index:5;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:0 0 10px 0;background:#14264d;color:#fff;font:700 11.5px/1 var(--head);letter-spacing:.04em;opacity:0;transform:translateY(-6px);transition:.22s}
.sp-srow.is-hot .sp-stag,.sp-srow.is-act .sp-stag{opacity:1;transform:none}
.sp-srow.is-act .sp-stag{background:#2a56a6}
.sp-sw{position:absolute;top:50%;z-index:5;width:30px;height:30px;margin-top:-15px;border-radius:50%;display:grid;place-items:center;background:rgba(20,38,77,.9);color:#fff;opacity:0;transition:.22s}
.sp-sw svg{width:15px;height:15px}
.sp-sw.l{left:8px;transform:translateX(6px)}.sp-sw.r{right:8px;transform:translateX(-6px)}
.sp-srow.is-hot .sp-sw,.sp-srow.is-act .sp-sw{opacity:1;transform:none}
.sp-srow.is-act .sp-sw.l{animation:spNudgeL 1.5s ease-in-out infinite}
.sp-srow.is-act .sp-sw.r{animation:spNudgeR 1.5s ease-in-out infinite}
@keyframes spNudgeL{0%,100%{transform:none}50%{transform:translateX(-4px)}}
@keyframes spNudgeR{0%,100%{transform:none}50%{transform:translateX(4px)}}
.sp-shape-arr{position:absolute;top:50%;z-index:8;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;background:rgba(11,23,48,.9);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s}
.sp-shape-arr.l{left:24px}.sp-shape-arr.r{right:24px}
.sp-shape-arr svg{width:22px;height:22px}
.sp-shape-arr:hover:not(:disabled){background:#2a56a6;transform:scale(1.06)}
.sp-shape-arr:disabled{opacity:.35;cursor:not-allowed}
.sp-shape-bar{position:absolute;left:50%;bottom:26px;z-index:9;transform:translateX(-50%);display:grid;gap:8px;justify-items:center;max-width:calc(100% - 40px)}
.sp-shape-info{display:inline-flex;align-items:center;gap:11px;height:40px;padding:0 16px;border-radius:999px;background:rgba(11,23,48,.94);color:#fff;font:700 13px/1 var(--head);white-space:nowrap}
.sp-shape-info .vn{color:#c8d6f0;font-weight:500;font-size:12.5px}
.sp-shape-info .dots{display:inline-flex;gap:5px}
.sp-shape-info .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.sp-shape-info .dots i.on{background:#fff}
.sp-shape-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sp-shape-tools .g{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 13px;border-radius:999px;background:rgba(11,23,48,.94);color:#fff;font:700 12.5px/1 var(--head)}
.sp-shape-tools .lb{color:rgba(255,255,255,.7);font-weight:500}
.sp-shape-tools .g b{min-width:1.3em;text-align:center;font:700 14px/1 "Inter",sans-serif}
.sp-shape-tools .b{width:25px;height:25px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font:700 15px/1 "Inter",sans-serif;display:grid;place-items:center;cursor:pointer;transition:.18s}
.sp-shape-tools .b:hover:not(:disabled){background:#2a56a6;transform:scale(1.08)}
.sp-shape-tools .b:disabled{opacity:.3;cursor:not-allowed}
.sp-shape-coach{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,10,24,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .4s}
.sp-shape-coach.on{opacity:1;pointer-events:auto}
.sp-shape-coach .cc{width:min(92%,430px);padding:22px;border-radius:16px;background:linear-gradient(180deg,#16233f,#0d1730);box-shadow:inset 0 0 0 1px rgba(146,178,255,.3),0 30px 60px -20px rgba(0,0,0,.8);text-align:left;color:#fff}
.sp-shape-coach .cc>b{font:800 16px/1.5 var(--head)}
.sp-shape-coach .cc>small{display:block;margin-top:4px;margin-bottom:12px;font-size:12.5px;line-height:1.7;color:#a9b8da}
.sp-shape-coach .cc p{display:grid;grid-template-columns:38px 1fr;gap:4px 12px;align-items:center;margin:0;padding:11px 0;border-top:1px solid rgba(255,255,255,.09)}
.sp-shape-coach .ic{grid-row:span 2;width:38px;height:38px;border-radius:10px;background:rgba(108,155,255,.16);display:grid;place-items:center;color:#a8c6ff}
.sp-shape-coach .ic svg{width:20px;height:20px}
.sp-shape-coach .cc i{font-style:normal;align-self:end;font:700 13.5px/1.4 var(--head)}
.sp-shape-coach .cc em{font-style:normal;align-self:start;font-size:12px;line-height:1.6;color:#aebbd9}
.sp-shape-coach .cb{margin-top:15px;width:100%;height:42px;border:0;border-radius:10px;background:#4f8cff;color:#fff;font:800 14px/1 var(--head);cursor:pointer;transition:.2s}
.sp-shape-coach .cb:hover{background:#3a78f0}
/* 触って試す */
.sp-try{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border-top:1px solid var(--s-line)}
.sp-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);margin-top:clamp(30px,3.6vw,48px);align-items:start}
.sp-pickhd{margin-bottom:16px}
.sp-pickhd b{display:block;font:700 1.05rem/1.5 var(--head);color:#fff}
.sp-pickhd span{display:block;margin-top:4px;font-size:.84rem;line-height:1.7;color:var(--s-sub)}
.sp-pick{display:grid;gap:22px}
.sp-grp>b{display:block;margin-bottom:10px;font:700 .82rem/1 var(--head);letter-spacing:.08em;color:var(--s-blue)}
.sp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sp-card{position:relative;display:grid;text-align:left;border:0;border-radius:11px;overflow:hidden;padding:0;background:rgba(255,255,255,.06);color:#dfe7ff;box-shadow:inset 0 0 0 1px var(--s-line);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.sp-card img{width:100%;height:auto;display:block;background:#fff}
.sp-card span{display:block;padding:8px 10px 9px;font:700 11.5px/1.35 var(--head);letter-spacing:.02em}
.sp-card .ck{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(9,14,30,.66);color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:.2s}
.sp-card .ck svg{width:12px;height:12px}
.sp-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(150,180,255,.5)}
.sp-card[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #2fae76,0 0 0 4px rgba(47,174,118,.16)}
.sp-card[aria-pressed="true"] .ck{background:#1f9d63;color:#fff;box-shadow:none}
.sp-pick+.sp-note{margin-top:16px}
.sp-pickwrap .sp-btn{margin-top:16px}
/* 入った部品：緑に光り、名札が出る */
.sp-flag{position:absolute;left:0;top:0;z-index:4;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px 0 9px;border-radius:0 0 10px 0;background:#14264d;color:#fff;font:700 11px/1 var(--head);letter-spacing:.04em;opacity:0;transform:translateY(-6px);transition:.25s}
.sp-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:#7be8b2}
.sp-demo-page:hover .sp-flag,.sp-row.is-new .sp-flag{opacity:1;transform:none}
.sp-row.is-new{animation:spRowIn .45s var(--ease)}
.sp-row.is-out{transition:height .3s var(--ease),opacity .3s}
@keyframes spRowIn{0%{opacity:0;transform:translateY(-16px) scale(.985)}60%{opacity:1}100%{opacity:1;transform:none}}
.sp-browser{position:sticky;top:92px;border-radius:14px;overflow:hidden;background:#fff;color-scheme:light;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 40px 80px -30px rgba(0,0,0,.9),0 0 90px -20px rgba(84,132,255,.5)}
.sp-browser-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:linear-gradient(180deg,#fdfdfe,#eef1f6);border-bottom:1px solid #e3e7ee}
.sp-browser-bar i{width:9px;height:9px;border-radius:50%;background:#f2b8b0}.sp-browser-bar i:nth-child(2){background:#f1d79a}.sp-browser-bar i:nth-child(3){background:#b3dcb4}
.sp-browser-bar span{margin-left:8px;flex:1;min-width:0;height:20px;line-height:20px;padding:0 10px;border-radius:5px;background:#fff;border:1px solid #e3e7ee;font-size:11px;color:#8a93a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-browser-scr{height:min(66vh,620px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff}
.sp-demo-page .sp-row .illhost{transition:none}
.sp-demo-page .sp-row.is-hit::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:3px solid #1f9d63;animation:spHit 1.5s ease forwards}
@keyframes spHit{0%{background:rgba(42,86,166,.16)}60%{background:transparent;opacity:1}100%{opacity:0}}
/* つまずかない工夫 */
.sp-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,4.4vw,60px)}
.sp-bento .b-wide{grid-column:span 3;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3vw,40px)}
.b-wide h3{font-size:clamp(1.35rem,2.1vw,1.85rem)}
.sp-bento .sp-tile:not(.b-wide){display:flex;flex-direction:column}
.sp-bento .sp-tile:not(.b-wide) .sp-vis{margin-top:auto;transform:translateY(8px)}
.sp-bento .sp-tile:not(.b-wide) p{margin-bottom:20px}
.v-big{padding:14px 14px 12px}
.v-big .tabs{display:flex;gap:6px;margin-bottom:10px}
.v-big .tabs span{height:26px;padding:0 12px;border-radius:999px;font:500 11.5px/26px "Noto Sans JP",sans-serif;color:var(--s-sub);background:rgba(255,255,255,.06)}
.v-big .tabs span.on{background:#fff;color:#0b1430;font-weight:700}
.v-big .pg{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px}
.v-big .pg .sp-page{max-height:300px;overflow:hidden;border-radius:6px}
.v-big .ar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 20px/1 "Inter",sans-serif;font-style:normal;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--s-line2);transition:background .3s,transform .3s}
.v-big.tick .ar.r{background:var(--s-blue);transform:scale(1.12)}
.v-big .cap{margin-top:10px;text-align:center;font-size:11.5px;color:var(--s-sub)}.v-big .cap b{color:#fff}
.v-chips{display:flex;gap:9px;padding:16px}
.v-chips span{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:999px;font:700 12.5px/1 var(--head);letter-spacing:.04em;color:#dfe7ff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--s-line2)}
.v-chips .ai{color:#fff;background:linear-gradient(135deg,#5b84f5,#8d6bf3);box-shadow:0 10px 22px -10px rgba(120,110,255,.9)}.v-chips svg{width:15px;height:15px}
.v-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.v-ph i{aspect-ratio:4/3;border-radius:7px;border:1.5px dashed rgba(190,205,255,.4)}
.v-ph i.f{border:0;background:radial-gradient(60% 60% at 25% 20%,#f6efe0,transparent 70%),radial-gradient(70% 70% at 80% 100%,#8a6f55,transparent 70%),#c9b399}
.v-ph span{grid-column:1/-1;justify-self:start;height:26px;padding:0 11px;border-radius:7px;font:500 11.5px/26px var(--mono);color:#dfe7ff;background:rgba(255,255,255,.08)}
.v-save{display:grid;gap:9px;padding:16px}
.v-save span{display:inline-flex;align-items:center;gap:7px;justify-self:start;height:34px;padding:0 13px;border-radius:9px;font:700 12.5px/1 var(--head)}
.v-save .ok{color:#7be8b2;background:rgba(40,190,120,.14)}.v-save .ok svg{width:13px;height:13px}
.v-save .re{color:#0b1430;background:#fff}.v-save .re svg{width:14px;height:14px}
.v-tree{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:14px}
.v-tree b,.v-tree span{height:30px;padding:0 11px;border-radius:8px;font:500 11.5px/30px "Noto Sans JP",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-tree b{grid-column:1/-1;font-weight:700;color:#0b1430;background:#fff}
.v-tree span{color:#dfe7ff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--s-line)}
.v-rule{display:flex;flex-wrap:wrap;gap:8px;padding:16px}
.v-rule span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;font:700 12.5px/1 var(--head);color:#7be8b2;background:rgba(40,190,120,.14)}.v-rule svg{width:13px;height:13px}
.v-rule .ng{color:#ffb4a4;background:rgba(255,106,77,.13);text-decoration:line-through;text-decoration-thickness:1.5px}
/* 作ったあと（動画） */
.sp-after{background:radial-gradient(70% 50% at 50% 30%,rgba(64,118,255,.16),transparent 70%);border-top:1px solid var(--s-line)}
.sp-video{margin-top:clamp(30px,3.6vw,48px)}
.sp-feats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(28px,3.4vw,44px);border-radius:16px;overflow:hidden;background:var(--s-line);box-shadow:0 0 0 1px var(--s-line)}
.sp-feats li{display:grid;gap:6px;align-content:start;padding:20px 20px 22px;background:#0a0f23}
.sp-feats b{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:.98rem;color:#fff}
.sp-feats b em{font:700 10px/1 "Noto Sans JP",sans-serif;font-style:normal;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:var(--s-fire);color:#fff}
.sp-feats span{font-size:.84rem;line-height:1.7;color:var(--s-sub)}
/* はじめる前に */
.sp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.sp-preps{list-style:none;display:grid;grid-template-columns:1fr 1fr;margin-top:26px;border-top:1px solid var(--s-line2)}
.sp-preps li{display:grid;gap:3px;padding:16px 14px 16px 0;border-bottom:1px solid var(--s-line)}
.sp-preps b{font:700 .95rem/1.5 var(--head);color:#fff}
.sp-preps span{font-size:.82rem;color:var(--s-sub)}
.sp-qa{margin-top:26px;border-top:1px solid var(--s-line2)}
.sp-qa details{border-bottom:1px solid var(--s-line)}
.sp-qa summary{position:relative;list-style:none;padding:18px 36px 18px 0;font:700 1rem/1.6 var(--head);color:#fff;cursor:pointer}
.sp-qa summary::-webkit-details-marker{display:none}
.sp-qa summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--s-blue);border-bottom:2px solid var(--s-blue);transform:rotate(45deg);transition:transform .3s var(--ease)}
.sp-qa details[open] summary::after{transform:translateY(4px) rotate(-135deg)}
.sp-qa details p{padding:0 0 20px;font-size:.93rem;line-height:2;color:#b7c2df;word-break:auto-phrase}
.sp-qa a{margin-left:6px;color:var(--s-blue);font-weight:700;text-underline-offset:3px}
/* 最後 */
.sp-final{position:relative;overflow:hidden;text-align:center;padding:clamp(96px,11vw,170px) 0;border-top:1px solid var(--s-line)}
.sp-final .sp-wrap{position:relative;z-index:1}
.sp-final .sp-h2{font-size:clamp(2rem,4.6vw,3.9rem)}
.sp-foot{border-top:1px solid var(--s-line);color:var(--s-dim);padding:24px 0;font-size:.85rem}
.sp-foot .sp-wrap{display:flex;align-items:center;gap:10px}
.sp-foot span{font-family:var(--serif);letter-spacing:.06em;color:#fff}
.sp-foot small{margin-left:6px;padding-left:12px;border-left:1px solid var(--s-line2);letter-spacing:.1em}
@media(max-width:1000px){
.sp-nav nav{display:none}.sp-nav .sp-btn{margin-left:auto}
.sp-flow{grid-template-columns:minmax(0,1fr);gap:0}
.sp-flow::before{left:8px;right:auto;top:10px;bottom:12px;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--s-line2) 5%,var(--s-line2) 95%,transparent)}
.sp-flow li{padding:0 0 26px 36px}.sp-flow li:last-child{padding-bottom:0}
.sp-flow li::before{top:2px}
.sp-flow h3{margin-top:8px}.sp-flow p{margin-top:7px}
.sp-handover{grid-template-columns:minmax(0,1fr);justify-items:start}
.sp-handover .ar{transform:rotate(90deg)}
.sp-handover .hr{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid var(--s-line);width:100%}
.sp-bento{grid-template-columns:1fr 1fr}.sp-bento .b-wide{grid-column:span 2;grid-template-columns:minmax(0,1fr)}
.sp-demo{display:flex;flex-direction:column;align-items:stretch;gap:22px}.sp-browser{position:sticky;top:8px;z-index:6;order:-1}.sp-browser-scr{height:min(36svh,340px)}
.sp-feats{grid-template-columns:1fr 1fr}
.sp-shape-stage{padding:10px}.sp-shape-scr{height:min(56svh,460px)}
.sp-shape-arr{width:38px;height:38px;margin-top:-19px}.sp-shape-arr.l{left:10px}.sp-shape-arr.r{right:10px}
.sp-shape-arr svg{width:18px;height:18px}
.sp-shape-bar{bottom:14px}.sp-shape-info{height:34px;padding:0 13px;font-size:12px}
.sp-two{grid-template-columns:minmax(0,1fr)}
.sp-nums ul{grid-template-columns:1fr 1fr}.sp-nums li:nth-child(3){border-left:0;padding-left:0}.sp-nums li:nth-child(n+3){border-top:1px solid var(--s-line)}
}
@media(max-width:760px){
.sp-nav .sp-btn{display:none}
.sp-bwwrap{--tilt:0deg!important;perspective:none}.sp-bw{transform:none}
.sp-bw-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto}
.sp-bw-left{height:212px;padding:14px 14px 12px;border-right:0;border-bottom:1px solid #e0e5ee}
.sp-scene-h{margin-bottom:10px;grid-template-columns:auto 1fr;align-items:baseline;gap:10px}.sp-scene-h b{font-size:14px}.sp-scene-h small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-tgl{grid-template-columns:1fr 1fr;gap:6px}.sp-tgl li{height:40px;padding:0 9px;gap:8px;font-size:12px}.sp-tgl li b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-vars{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sp-var span{padding:5px 5px 6px;font-size:9.5px;line-height:1.35}
.sp-q{margin-top:9px}.sp-q label{margin-bottom:4px;font-size:12px}.sp-in{min-height:36px;padding:6px 10px;font-size:12.5px}.sp-q-note{display:none}.sp-go{display:none}
.sp-bw-right{height:320px}
.sp-tabs{gap:4px;padding:5px}.sp-tabs span{display:none}.sp-tabs button{height:34px;padding:0 11px 0 5px;font-size:12px;gap:6px}.sp-tabs button i{width:22px;height:22px}
}
@media(max-width:560px){
.sp-wrap,.sp-hero-in,.sp-nav-in{width:calc(100% - 40px)}
.sp-brand span{display:none}
.sp-h1{font-size:clamp(1.5rem,7.75vw,3rem)}.sp-h1 .ln{display:block}
.sp-chip{height:auto;min-height:32px;padding:6px 14px 6px 12px;font-size:11.5px;text-align:left;line-height:1.5}
.sp-cta .sp-btn.fire,.sp-cta .sp-btn.glass{width:100%}
.sp-facts{gap:6px 16px}
.sp-bento{grid-template-columns:1fr}.sp-bento .b-wide{grid-column:auto}
.sp-cards{grid-template-columns:1fr 1fr}
.sp-preps{grid-template-columns:1fr}
.sp-feats{grid-template-columns:1fr}
.sp-pickwrap .sp-btn{width:100%;white-space:normal;text-align:center}
.v-big .pg{grid-template-columns:26px minmax(0,1fr) 26px;gap:6px}.v-big .ar{width:26px;height:26px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.sp-chip,.sp-h1 .ln,.sp-lead,.sp-cta,.sp-facts,.sp-stagewrap,.sp-scene.on{animation:none!important}.sp-row .illhost{transition:none}.rv{opacity:1;transform:none;transition:none}.sp-bw{transform:none}}
/* ===================== 紹介動画（ird） ===================== */
.ird .vp-screen{position:relative;aspect-ratio:16/9;background:#0a0e1a;overflow:hidden}
.ird-wrap{position:absolute;inset:0}
.ird-wrap>div{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.ird-wrap>div.on{opacity:1}
/* 1 カタログのロール */
.ird-roll{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:0 14px}
.ird-col{overflow:hidden}
.ird-tr{display:grid;gap:14px;will-change:transform}
.ird-tr img{width:100%;display:block;border-radius:5px;background:#131a2c;box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
/* 2 一枚を選ぶ */
.ird-pick{display:grid;place-items:center}
.ird-one{position:relative;display:grid;justify-items:center;gap:14px}
.ird-one img{height:64%;max-height:62cqh;width:auto;border-radius:6px;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.14)}
.ird-pick .ird-one img{height:auto;max-height:none;width:min(31%,240px)}
.ird-tag{display:inline-grid;place-items:center;height:32px;padding:0 20px;border-radius:999px;background:var(--s-fire);color:#fff;font:700 13px/1 var(--head);letter-spacing:.06em;box-shadow:0 14px 30px -14px rgba(255,106,77,.9)}
/* 3・4 組み立て */
.ird-build{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:18px;padding:16px}
.ird-lh{margin-bottom:9px;font:700 12.5px/1 var(--head);letter-spacing:.05em;color:#dfe7ff}
.ird-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.ird-c{position:relative;display:grid;border:0;padding:0;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--s-line);cursor:default;transition:.25s}
.ird-c img{width:100%;height:auto;display:block;background:#fff}
.ird-c span{padding:6px 8px 7px;font:700 10.5px/1.3 var(--head);color:#dfe7ff;text-align:left}
.ird-c.on{box-shadow:inset 0 0 0 2px #2fae76,0 0 0 3px rgba(47,174,118,.2)}
.ird-right{display:grid;grid-template-rows:auto 1fr;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.ird-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:linear-gradient(180deg,#fdfdfe,#eef1f6);border-bottom:1px solid #e3e7ee}
.ird-bar i{width:7px;height:7px;border-radius:50%;background:#f2b8b0}
.ird-bar i:nth-child(2){background:#f1d79a}.ird-bar i:nth-child(3){background:#b7dfb0}
.ird-bar span{margin-left:8px;font:500 10px/1 var(--head);color:#8a93a6}
.ird-bar em{margin-left:auto;font:700 10px/1 var(--head);color:#2a56a6;font-style:normal}
.ird-bar em::before{content:"選んだ部品 "}
.ird-scr{position:relative;overflow:hidden;background:#fff}
.ird-page{position:absolute;left:0;right:0;top:0;display:grid}
.ird-row{position:relative;overflow:hidden}
.ird-row .illhost{zoom:var(--z,1)}
.ird-row.is-new{animation:irdIn .5s var(--ease)}
@keyframes irdIn{0%{opacity:0;transform:translateY(-18px)}100%{opacity:1;transform:none}}
.ird-row.is-hit::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:3px solid #1f9d63;animation:irdHit 1.5s ease forwards}
@keyframes irdHit{0%{background:rgba(31,157,99,.22)}55%{background:rgba(31,157,99,.06);opacity:1}100%{opacity:0}}
.ird-row.is-hot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(108,155,255,.95),inset 0 0 48px rgba(108,155,255,.22);background:rgba(108,155,255,.07)}
.ird-row.is-sw .illhost{animation:irdSw .42s var(--ease)}
@keyframes irdSw{0%{opacity:0;transform:translateX(26px)}100%{opacity:1;transform:none}}
.ird-arr{position:absolute;z-index:8;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(11,23,48,.9);color:#fff;display:grid;place-items:center;font:700 19px/1 var(--head);opacity:0}
.ird-arr.l{left:10px}.ird-arr.r{right:10px}
.ird-info{position:absolute;z-index:9;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 15px;border-radius:999px;background:rgba(11,23,48,.94);color:#fff;font:700 11.5px/1 var(--head);white-space:nowrap;opacity:0;transition:.3s}
.ird-info.on{opacity:1;transform:translateX(-50%)}
.ird-info span{font-weight:500;color:#c8d6f0}
/* 5 写真と質問 */
.ird-ans{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:34px 40px;align-content:center}
.ird-col2{display:grid;align-content:start}
.ird-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ird-ph i{--f:0;position:relative;aspect-ratio:4/3;border-radius:6px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--s-line);overflow:hidden}
.ird-ph i::after{content:"";position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:var(--f);transition:opacity .3s}
.ird-q{margin-top:14px}
.ird-q label{display:block;margin-bottom:6px;font:500 11.5px/1 var(--head);color:#aab6d6}
.ird-in{display:flex;align-items:center;min-height:36px;padding:8px 11px;border-radius:7px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--s-line);font:700 13px/1.4 var(--head);color:#fff}
.ird-in.focus{box-shadow:inset 0 0 0 1.6px var(--s-blue),0 0 0 3px rgba(108,155,255,.16)}
.ird-in i{display:inline-block;width:1.6px;height:15px;margin-left:2px;background:#fff;animation:irdCaret .9s steps(1) infinite}
@keyframes irdCaret{50%{opacity:0}}
.ird-note{margin-top:7px;font-size:10.5px;color:var(--s-dim)}
/* 6 依頼とお届け */
.ird-end{display:grid;place-content:center;justify-items:center;gap:26px;text-align:center}
.ird-steps{display:flex;align-items:center;gap:22px}
.ird-steps span{display:grid;gap:7px;padding:20px 28px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--s-line)}
.ird-steps span.hot{background:rgba(255,106,77,.12);box-shadow:inset 0 0 0 1px rgba(255,106,77,.4)}
.ird-steps b{font:700 30px/1 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
.ird-steps span.hot b{color:#ffd9ce}
.ird-steps small{font-size:11.5px;color:#aab6d6}
.ird-steps i{width:46px;height:1.5px;background:linear-gradient(90deg,var(--s-line2),var(--s-fire));transform-origin:left}
.ird-endt{font:800 clamp(1.05rem,1.9vw,1.5rem)/1.6 var(--head);letter-spacing:.03em;color:#fff}
@media(max-width:760px){
.ird-roll{grid-template-columns:repeat(7,1fr);gap:8px;padding:0 8px}.ird-tr{gap:8px}
.ird-build{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}
.ird-left{display:none}
.ird-ans{grid-template-columns:1fr;gap:14px;padding:16px 18px}
.ird-steps{flex-direction:column;gap:12px}.ird-steps i{width:1.5px;height:22px}
.ird-steps span{padding:12px 18px}.ird-steps b{font-size:22px}
}
/* 場面ごとに全面を覆う（前の場面が透けないように） */
.ird-pick,.ird-build,.ird-ans,.ird-end{background:#0a0e1a}
.ird-build{align-content:stretch}
.ird-ans{align-content:center}
/* ===== ヒーロー背景のカタログロール ===== */
.sp-roll{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:18px;padding:0 18px;opacity:.5;pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 66%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 66%,transparent)}
.sr-c{overflow:hidden}
.sr-t{display:grid;gap:18px;will-change:transform}
.sr-t img{width:100%;display:block;border-radius:8px;box-shadow:0 14px 30px -18px rgba(0,0,0,.85)}
.sp-hero .sp-sky{z-index:1;background:radial-gradient(54% 42% at 50% 30%,rgba(6,10,24,.93),rgba(6,10,24,.8) 56%,rgba(6,10,24,.42) 80%,rgba(6,10,24,.12) 100%),linear-gradient(180deg,var(--s-bg) 0%,rgba(6,10,24,.18) 18%,rgba(6,10,24,.3) 70%,var(--s-bg) 100%)}
.sp-hero-in{z-index:2}
/* ===== 進め方：5段 ===== */
.sp-steps2{list-style:none;display:grid;gap:clamp(26px,3vw,44px);margin-top:clamp(36px,4.4vw,60px);counter-reset:s2}
.sp-steps2>li{position:relative;padding-left:clamp(0px,0vw,0px)}
.st-h{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:start}
.st-n{font:700 clamp(1.6rem,2.6vw,2.3rem)/1 "Inter",sans-serif;letter-spacing:-.02em;color:var(--s-blue);padding-top:2px}
.sp-steps2>li:last-child .st-n{color:var(--s-fire)}
.st-h h3{font:700 clamp(1.15rem,1.8vw,1.55rem)/1.5 var(--head);letter-spacing:.02em;color:#fff}
.st-h p{margin-top:8px;font-size:.93rem;line-height:1.95;color:#aab6d6;letter-spacing:.02em;max-width:46em}
.st-body{margin-top:clamp(16px,2vw,26px)}
.st-q{margin-top:clamp(14px,1.6vw,20px);padding:13px 16px;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--s-line);font-size:.86rem;line-height:1.9;color:#aab6d6;letter-spacing:.02em}
.st-q b{display:inline-block;margin-right:9px;color:#fff;font-weight:700}
.st-strip{position:relative;height:clamp(120px,13vw,168px);overflow:hidden;border-radius:12px;box-shadow:inset 0 0 0 1px var(--s-line);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ss-t{display:flex;gap:12px;height:100%;padding:12px 0;will-change:transform}
.ss-t img{flex:none;height:100%;width:auto;border-radius:4px;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
/* 02 の実演：左に選ぶ、右に完成予想図 */
.sp-demo2{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(16px,2.2vw,30px);align-items:start}
.sp-demo2 .sp-pick{gap:16px}
.sp-demo2 .sp-cards{gap:8px}
.sp-demo2 .sp-shapewrap{margin-top:0}
.sp-shape-top em{margin-left:auto;font-style:normal;font:700 11.5px/1 var(--head);color:var(--s-blue)}
/* カーソルを当てた所は緑に光る（足したときと同じ色でそろえる） */
.sp-srow.is-hot::after{box-shadow:inset 0 0 0 2px rgba(47,174,118,.95),inset 0 0 30px rgba(47,174,118,.14)!important;background:rgba(47,174,118,.045)!important}
.sp-srow.is-hot .sp-stag{background:#1f7a4d}
.sp-srow.is-act::after{box-shadow:inset 0 0 0 3px #2fae76,inset 0 0 34px rgba(47,174,118,.16)!important;background:rgba(47,174,118,.05)!important}
.sp-srow.is-act .sp-stag{background:#1f7a4d}
.sp-srow.is-new{animation:spRowIn .45s var(--ease)}
.sp-srow.is-hit::after{border:0}
.sp-srow.is-out{transition:height .3s var(--ease),opacity .3s}
@media(max-width:1000px){
.sp-demo2{grid-template-columns:minmax(0,1fr)}
.sp-demo2 .sp-shapewrap{order:-1;position:sticky;top:8px;z-index:6}
.sp-roll{gap:11px;padding:0 11px;opacity:.26}
}
/* ===== さわって試す（見出しを置かず、道具そのものを主役にする） ===== */
.sp-try{padding-top:clamp(18px,2.4vw,34px)}
.sp-tryin{position:relative;padding:clamp(18px,2.4vw,30px);border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px var(--s-line),
0 60px 120px -55px rgba(0,0,0,.9)}
.sp-try .sp-note{margin-top:14px;text-align:center}
@media(max-width:700px){.sp-tryin{padding:12px;border-radius:14px}}
/* さわって試す：部品は全部さわれる。左は右の高さに合わせて、中だけスクロールさせる */
.sp-try .sp-demo2{align-items:stretch}
.sp-try .sp-pickwrap{position:relative;display:flex;flex-direction:column;min-height:0}
.sp-try .sp-pickhd{flex:none}
.sp-try .sp-pick{flex:1;min-height:0;max-height:min(68vh,652px);overflow-y:auto;overscroll-behavior:contain;
padding:2px 10px 26px 2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sp-try .sp-pick::-webkit-scrollbar{width:8px}
.sp-try .sp-pick::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.sp-try .sp-pickwrap::after{content:"";position:absolute;left:0;right:8px;bottom:0;height:54px;pointer-events:none;
background:linear-gradient(transparent,rgba(9,12,22,.92))}
.sp-try .sp-grp>b{position:sticky;top:0;z-index:2;margin:0 0 10px;padding:7px 0 8px;
background:linear-gradient(180deg,rgba(11,15,26,.97),rgba(11,15,26,.84));backdrop-filter:blur(6px)}
@media(max-width:1000px){
.sp-try .sp-demo2{align-items:start}
.sp-try .sp-pick{max-height:min(58svh,520px)}
}
/* 料金（はじめの画面）。0円の条件は同じ行・同じ大きさで並べる（打消し表示にしない） */
/* ヒーロー v5：フックは「0円」。条件は同じ塊・見出しの半分以上の大きさで（打消し表示にしない） */
.sp-h1.v5{font-size:clamp(2.3rem,5.2vw,5rem);line-height:1.14}
.sp-h1.v5 em{font-size:1.28em;letter-spacing:-.03em;background:linear-gradient(92deg,#ffb38a 0%,#ff7a5c 55%,#ff5a3c 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 8px 30px rgba(255,106,77,.35))}
.sp-cond{margin:clamp(14px,1.6vw,20px) auto 0;max-width:36em;font:700 clamp(1.08rem,2vw,1.62rem)/1.6 var(--head);letter-spacing:.01em;color:#fff;animation:spRise .85s .14s var(--ease) both}
.sp-cond small{font-size:.72em;font-weight:600;color:#c9d3f2}
.sp-cond s{color:#9aa6c9;text-decoration-color:var(--s-fire);text-decoration-thickness:2px}
.sp-cond b{color:#fff;font-size:1.22em;padding:0 .12em;background:linear-gradient(92deg,#ffb38a,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sp-cond .mb{display:none}
.sp-btn.lg{min-height:64px;padding:1rem 2.3rem;font-size:1.12rem;border-radius:16px}
.sp-price-note{margin:14px auto 0;max-width:44em;font-size:.82rem;line-height:1.8;color:var(--s-dim);letter-spacing:.02em;animation:spRise .85s .4s var(--ease) both}
@media (max-width:640px){.sp-h1.v5{font-size:clamp(1.5rem,6.1vw,2.6rem)}.sp-h1.v5 em{font-size:1.4em}.sp-cond .mb{display:block}.sp-cond{font-size:1.02rem}.sp-btn.lg{width:100%;min-height:60px;font-size:1.05rem}}
/* 品質の根拠（数字4つ＋根拠3つ）。旧 .sp-nums ul/li の規則より強い指定（.sp-proof を付ける）で上書きする */
.sp-proof .sp-big4{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-proof .sp-big4 li{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;min-width:0;padding:clamp(26px,3vw,40px) clamp(14px,2vw,30px) clamp(22px,2.6vw,34px);border-left:1px solid var(--s-line);border-top:0}
.sp-proof .sp-big4 li:first-child{border-left:0;padding-left:0}
.sp-proof .sp-big4 b{white-space:nowrap;font:700 clamp(2.1rem,3.7vw,3.3rem)/1.04 "Inter",sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.sp-proof .sp-big4 b i{font-style:normal;font-size:.5em;margin-left:.12em;letter-spacing:0;color:var(--s-sub);font-family:var(--head)}
.sp-proof .sp-big4 li>span{display:block;font:700 clamp(.95rem,1.15vw,1.1rem)/1.4 var(--head);color:#e6ecff;letter-spacing:.03em}
.sp-proof .sp-big4 small{display:block;margin-top:2px;font-size:.82rem;line-height:1.7;color:var(--s-sub);letter-spacing:.02em}
.sp-proof .sp-why3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);padding:0 0 clamp(26px,3vw,40px)}
.sp-proof .sp-why3 li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:start;min-width:0;padding:16px 18px;border:0;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--s-line)}
.sp-proof .sp-why3 li i{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(108,155,255,.14);color:#9dbcff}
.sp-proof .sp-why3 li i svg{width:20px;height:20px}
.sp-proof .sp-why3 li b{font:700 .98rem/1.4 var(--head);color:#fff;letter-spacing:.02em;white-space:normal}
.sp-proof .sp-why3 li span{font-size:.84rem;line-height:1.75;color:var(--s-sub)}
@media (max-width:860px){.sp-proof .sp-big4{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-proof .sp-big4 li:nth-child(3){border-left:0;padding-left:0}.sp-proof .sp-big4 li:nth-child(n+3){border-top:1px solid var(--s-line)}.sp-proof .sp-why3{grid-template-columns:minmax(0,1fr)}}
/* ===== 「5つのでも」の節（数字の帯＋3カードの置き換え・2026-09-27）。心配 → 答え → 根拠 の順で1段ずつ ===== */
.sp-story{position:relative;padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,90px);border-top:1px solid var(--s-line)}
.sp-story .sp-vh{text-align:center;max-width:1000px;margin:0 auto}
.sp-eyebrow{font:600 .8rem/1 var(--head);letter-spacing:.2em;color:var(--s-blue)}
.sp-story .sp-h2{margin-top:14px;font-size:clamp(1.55rem,2.9vw,2.5rem);line-height:1.35;letter-spacing:-.005em}
.sp-story .mb{display:none}
.sp-rows{display:grid;gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,4vw,56px)}
.sp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3vw,44px) clamp(22px,3.4vw,52px);border-radius:26px;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)) padding-box,linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.05) 40%,rgba(108,155,255,.2)) border-box;border:1px solid transparent;box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.sp-row:nth-child(even) .vis{order:-1}
.sp-row .worry{display:inline-block;padding:6px 12px;border-radius:999px;font:600 .82rem/1 var(--head);letter-spacing:.04em;color:#ffb38a;background:rgba(255,106,77,.12);box-shadow:inset 0 0 0 1px rgba(255,140,110,.3)}
.sp-row h3{margin-top:14px;font:700 clamp(1.35rem,2.2vw,2rem)/1.4 var(--head);letter-spacing:.005em;color:#fff}
.sp-row .tx>p:not(.worry){margin-top:10px;font-size:clamp(.94rem,1.05vw,1rem);line-height:1.95;color:var(--s-sub);letter-spacing:.01em;max-width:34em}
.sp-row .pf{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:20px 0 0;padding:0}
.sp-row .pf li{display:grid;gap:4px}
.sp-row .pf b{white-space:nowrap;font:700 clamp(1.6rem,2.2vw,2.1rem)/1 "Inter",sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.sp-row .pf b i{font-style:normal;font-size:.5em;margin-left:.1em;color:#bcd2ff;font-family:var(--head);letter-spacing:0}
.sp-row .pf li>span{font:600 .78rem/1.3 var(--head);color:#a9b4d4;letter-spacing:.04em}
.sp-row .vis{min-width:0}
/* 明細 */
.v-bill{border-radius:18px;padding:5px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 40px 80px -40px rgba(0,0,0,1)}
.v-bill .r{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 20px;background:rgba(8,12,28,.94);font:500 .95rem/1.45 var(--head);color:#dfe6ff}
.v-bill .r:first-child{border-radius:14px 14px 0 0}.v-bill .r+.r{border-top:1px solid var(--s-line)}
.v-bill .r small{display:block;font-size:.76rem;color:#93a0c4;margin-top:2px}
.v-bill em{font:700 1.05rem/1 "Inter",var(--head);font-style:normal;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.v-bill em s{color:#98a4c8;font-weight:600;font-size:.85em;margin-right:.5em;text-decoration-color:#ff6a4d;text-decoration-thickness:2px}
.v-bill em b{font-size:1.45em;font-weight:800;background:linear-gradient(92deg,#ffb38a,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.v-bill .tot{padding-top:16px;padding-bottom:16px}.v-bill .tot span{font-weight:700;color:#fff}.v-bill .tot em b{font-size:1.9em;background:none;color:#fff;-webkit-text-fill-color:#fff}.v-bill .tot em i{font-style:normal;font-size:.72em;font-weight:600;color:#a9b4d4;margin-left:.3em;font-family:var(--head)}
.v-bill>p{margin:0;padding:12px 20px 14px;border-radius:0 0 14px 14px;background:rgba(8,12,28,.94);border-top:1px solid var(--s-line);font:700 .92rem/1.5 var(--head);color:#fff}
/* カタログ＋部品カード */
.sp-row .vis:has(.v-mosaic){position:relative;padding-bottom:22%}
.v-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:perspective(1000px) rotateX(8deg) rotateY(-12deg) rotateZ(2deg);transform-origin:50% 100%}
.v-mosaic img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1)}
.v-cards{position:absolute;left:8%;right:8%;bottom:0;height:40%}
.v-cards img{position:absolute;left:50%;bottom:0;width:56%;aspect-ratio:1200/750;object-fit:cover;border-radius:9px;box-shadow:0 24px 50px -24px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.14);transform:translateX(-50%)}
.v-cards img:nth-child(1){transform:translateX(-70%) translateY(-8%) rotate(-7deg);opacity:.75}.v-cards img:nth-child(2){transform:translateX(-30%) translateY(-4%) rotate(6deg);opacity:.85}
/* 工程 */
.v-days{display:grid;grid-template-columns:repeat(3,1fr);position:relative;padding:14px 0 6px}
.v-days::before{content:"";position:absolute;left:16%;right:16%;top:21px;height:2px;background:linear-gradient(90deg,#6c9bff,#ff6a4d)}
.v-days span{position:relative;text-align:center;display:grid;gap:4px}
.v-days span::before{content:"";display:block;width:16px;height:16px;margin:0 auto 12px;border-radius:50%;background:#6c9bff;box-shadow:0 0 0 6px rgba(108,155,255,.22)}
.v-days span:last-child::before{background:#ff6a4d;box-shadow:0 0 0 6px rgba(255,106,77,.22)}
.v-days b{font:700 1.02rem/1.3 var(--head);color:#fff}.v-days small{font:500 .8rem/1.4 var(--head);color:#a9b4d4}
/* 仕上げの確認 */
.v-ck{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.v-ck li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--s-line);font:600 .95rem/1.4 var(--head);color:#e6ecff}
.v-ck li i{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#2fae76;color:#fff}.v-ck li i svg{width:13px;height:13px}
.v-ck li.pub{background:rgba(108,155,255,.12);box-shadow:inset 0 0 0 1px rgba(108,155,255,.35);color:#fff}.v-ck li.pub i{background:#6c9bff}
/* アプリ */
.v-app{border-radius:14px;overflow:hidden;background:#eef1f7;color:#0b1730;box-shadow:0 30px 60px -30px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.2)}
.v-app .h{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#fff;font:700 12px/1 var(--head);border-bottom:1px solid rgba(11,23,48,.08)}
.v-app .h img{width:16px;height:16px}.v-app .h span{margin-left:auto;font-weight:600;color:#6f7a94}
.v-app .g{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.v-app .c{padding:11px 13px;border-radius:10px;background:#fff;display:grid;gap:5px;align-content:start}.v-app .c.w{grid-column:span 2}
.v-app .c span{font:700 10.5px/1.3 var(--head);color:#6f7a94;letter-spacing:.04em}
.v-app .c b{font:800 23px/1.1 "Inter",var(--head);letter-spacing:-.02em}.v-app .c b i{font:700 11px/1 "Inter",var(--head);font-style:normal;color:#6f7a94}
.v-app .c.w b{font:700 13px/1.5 var(--head)}
.v-app .pb{display:block;height:6px;border-radius:99px;background:#e6eaf2;overflow:hidden}.v-app .pb i{display:block;height:100%;background:linear-gradient(90deg,#2a56a6,#7c5cff)}
.v-app .c small{font:500 10.5px/1.4 var(--head);color:#6f7a94}
.v-app .c u{justify-self:start;text-decoration:none;padding:5px 9px;border-radius:7px;background:linear-gradient(135deg,#2a56a6,#7c5cff);color:#fff;font:700 10.5px/1 var(--head)}
@media (max-width:860px){
.sp-story .mb{display:block}
.sp-row{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 18px 24px;border-radius:20px}
.sp-row:nth-child(even) .vis{order:0}
.sp-row .vis:has(.v-mosaic){padding-bottom:26%}
.v-bill .r{padding:11px 14px;font-size:.9rem}.v-bill em{font-size:.98rem}
}
/* ===== ヒーロー v6（2026-09-27 K 決定：A1 デザインの壁／B3 の文言を B2 のカードで／リリース特別キャンペーン／安さの理由） ===== */
.sp-hero.v6{padding:clamp(84px,9.5vh,112px) 0 0}
.sp-hero.v6 .sp-sky{background:none}
.sp-hero.v6 .sp-sky .g1{background:radial-gradient(closest-side,rgba(64,118,255,.6),transparent)}
.sp-hero.v6 .sp-h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.1;letter-spacing:-.02em}
.sp-hero.v6 .sp-h1 em{font-size:1.3em}
.sp-chip.camp{background:rgba(255,106,77,.14);box-shadow:inset 0 0 0 1px rgba(255,140,110,.45);color:#ffd8cc;font-weight:700}
.sp-offer{width:min(100%,660px);margin:clamp(20px,2.4vw,30px) auto 0;border-radius:24px;padding:6px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:0 50px 100px -40px rgba(0,0,0,1);animation:spRise .85s .14s var(--ease) both}
.sp-offer .in{border-radius:19px;background:rgba(8,12,28,.94);padding:20px 28px 18px}
.sp-offer .tri{display:grid;gap:0;margin:0;font:700 clamp(1.4rem,2.3vw,2rem)/1.32 var(--head);letter-spacing:.01em;color:#fff}
.sp-offer .tri em{font-style:normal;background:linear-gradient(92deg,#ffb38a,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sp-offer .r{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;padding:11px 0;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);font:500 1rem/1.45 var(--head);color:#dfe6ff}
.sp-offer .r small{display:block;font-size:.78rem;color:#93a0c4;margin-top:2px}
.sp-offer .v{font:700 1.1rem/1 "Inter",var(--head);font-style:normal;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.sp-offer .v s{color:#98a4c8;font-weight:600;font-size:.95em;margin-right:.55em;text-decoration-color:#ff6a4d;text-decoration-thickness:2px}
.sp-offer .v b{font-size:1.9em;font-weight:800;background:linear-gradient(92deg,#ffb38a,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sp-offer .sp-cond{margin:11px 0 0;max-width:none;text-align:left;font:600 .95rem/1.7 var(--head);color:#dfe6ff;animation:none}
.sp-offer .sp-cond small{font-size:.9em;font-weight:600;color:#c9d3f2}
.sp-offer .sp-cond b{color:#fff;font-size:1.1em;padding:0 .05em;background:linear-gradient(92deg,#ffb38a,#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sp-offer .camp{display:inline-block;margin-left:6px;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#ff8466,#e8492c);color:#fff;font:700 .72rem/1 var(--head);letter-spacing:.06em;vertical-align:middle;white-space:nowrap}
.sp-why{margin:22px auto 0;max-width:660px;padding:14px 18px;border-radius:14px;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--s-line);font:500 .86rem/1.8 var(--head);color:#a9b4d4;letter-spacing:.01em;animation:spRise .85s .4s var(--ease) both}
.sp-why b{display:block;color:#fff;font-size:.95rem;margin-bottom:2px}
.sp-facts.v6{gap:8px 24px;margin-top:18px;color:#93a0c4;font-size:.88rem}
.sp-facts.v6 li::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fe0a3;box-shadow:0 0 10px rgba(95,224,163,.8)}
.sp-facts.v6 li:last-child::before{background:#7f8bad;box-shadow:none}
/* デザインの壁 */
.sp-wall{position:relative;z-index:1;margin-top:clamp(36px,4.6vw,66px);height:clamp(300px,38vw,560px);perspective:1400px;perspective-origin:50% 0;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent)}
.sp-wall::before{content:"";position:absolute;left:50%;top:-16%;width:70%;height:60%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(64,118,255,.38),transparent);filter:blur(40px)}
.sp-wall-in{position:absolute;left:50%;top:0;width:170%;transform:translateX(-50%) rotateX(38deg) rotateZ(-7deg) translateY(-2%);transform-origin:50% 0;display:grid;gap:clamp(12px,1.3vw,20px)}
.sw-r{display:flex;gap:clamp(12px,1.3vw,20px);width:max-content;will-change:transform;animation:swDrift var(--d,80s) linear infinite}
.sw-r.rev{animation-direction:reverse}
.sw-r img{width:clamp(180px,17vw,270px);aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.1)}
@keyframes swDrift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sw-r{animation:none}}
@media (max-width:640px){
.sp-hero.v6 .sp-h1{font-size:clamp(1.6rem,7vw,2.6rem)}.sp-hero.v6 .sp-h1 em{font-size:1.4em}
.sp-chip.camp{height:auto;padding:7px 12px;font-size:11.5px;text-align:left;line-height:1.4}
.sp-offer{border-radius:18px;padding:4px}.sp-offer .in{border-radius:14px;padding:16px 16px 14px}
.sp-offer .tri{font-size:1.3rem}.sp-offer .r{font-size:.92rem;padding:12px 0}.sp-offer .v{font-size:1rem}.sp-offer .sp-cond{font-size:.9rem}
.sp-offer .camp{display:block;margin:6px 0 0;width:max-content}
.sp-facts.v6{gap:6px 16px;font-size:.8rem}.sp-why{font-size:.82rem;padding:12px 14px}
.sp-wall{height:clamp(200px,62vw,300px);margin-top:26px}.sp-wall-in{width:240%;gap:8px}.sw-r{gap:8px}.sw-r img{width:118px;border-radius:8px}
}
/* ===== ヒーロー v7（2026-09-28 K 指示：宇宙の背景／タイトルは「30分」／値札をやめて余白で見せる） ===== */
.sp-hero.v7{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(96px,12vh,140px) 0 clamp(72px,9vh,110px);overflow:hidden;isolation:isolate}
.sp-hero.v7::after{display:none}
.sp-hero.v7 .sp-hero-in{position:relative;z-index:2;text-align:center}
/* 宇宙：映像（K が用意）が無いときは canvas の星を描く */
.sp-space{position:absolute;inset:0;z-index:0;overflow:hidden;--zoom:1;--warp:0;
background:#04060f radial-gradient(54% 42% at 22% 24%,rgba(86,114,220,.44),transparent 70%),radial-gradient(48% 40% at 80% 70%,rgba(142,92,212,.34),transparent 72%),radial-gradient(74% 54% at 50% 46%,rgba(36,62,152,.32),transparent 78%)}
.sp-space>video,.sp-space>canvas{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;transform:scale(var(--zoom));transform-origin:50% 46%;will-change:transform;filter:blur(calc(var(--warp) * 2.2px)) saturate(.94)}
.sp-space>video{opacity:0;transition:opacity .9s ease}
.sp-space.has-v>video{opacity:1}
.sp-space.has-v>canvas{display:none}
.sp-space .streak{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:var(--warp);
background:radial-gradient(ellipse 60% 44% at 50% 46%,transparent 26%,rgba(150,190,255,.16) 62%,rgba(120,160,255,.05) 82%,transparent 100%);
transform:scale(calc(1 + var(--warp) * .34))}
.sp-space .veil{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 48% at 50% 44%,rgba(4,6,15,.66),rgba(4,6,15,.4) 58%,rgba(4,6,15,.1) 80%,transparent 100%),
linear-gradient(180deg,rgba(4,6,15,.72) 0%,rgba(4,6,15,.1) 24%,rgba(4,6,15,.2) 64%,var(--s-bg) 100%)}
/* 上の小さな帯 */
.sp-kicker{display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:spRise .8s var(--ease) both}
.sp-kicker .en{font:600 .7rem/1 "Inter",sans-serif;letter-spacing:.3em;color:#9fb4e8}
.sp-kicker .ja{padding:6px 14px;border-radius:999px;background:rgba(255,106,77,.16);box-shadow:inset 0 0 0 1px rgba(255,140,110,.4);font:600 .8rem/1 var(--head);letter-spacing:.04em;color:#ffd9cd}
.sp-kicker .ja s{color:#c2a79f;text-decoration-thickness:1.5px}
.sp-kicker .ja b{margin-left:.35em;color:#fff;font-size:1.12em;font-weight:800}
/* 見出し：1行目は小さく、「30分。」を主役に。色は白だけ（オレンジの文字はやめる） */
.sp-h1.v7{margin-top:clamp(22px,3vw,34px);font-family:var(--head);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1;text-shadow:0 10px 60px rgba(10,20,60,.7)}
.sp-h1.v7 .ln{display:block;animation:spRise .9s var(--ease) both}
.sp-h1.v7 .ln:first-child{font-size:clamp(1.1rem,2.3vw,2rem);font-weight:500;letter-spacing:.14em;color:#c3d1f2;margin-bottom:clamp(8px,1.2vw,16px)}
.sp-h1.v7 .ln:last-child{font-size:clamp(3.6rem,9.4vw,9.2rem);animation-delay:.1s}
.sp-h1.v7 em{font-style:normal;background:none;color:#fff;-webkit-text-fill-color:#fff;filter:none}
.sp-lead.v7{margin:clamp(20px,2.4vw,30px) auto 0;max-width:40em;font-size:clamp(.98rem,1.2vw,1.14rem);line-height:2.1;color:#c5d0ec;letter-spacing:.03em;animation:spRise .9s .2s var(--ease) both}
.sp-hero.v7 .sp-cta{margin-top:clamp(26px,3vw,38px)}
.sp-hero.v7 .sp-btn.fire{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,140,110,.35),0 22px 60px -20px rgba(232,73,44,.75)}
/* 0円の条件：同じ塊・同じ大きさで（景表法の打消し表示にしない） */
.sp-cond.v7{margin:clamp(20px,2.4vw,28px) auto 0;max-width:44em;font:600 1.02rem/1.7 var(--head);color:#fff;letter-spacing:.02em;animation:spRise .9s .3s var(--ease) both}
.sp-cond.v7 s{color:#9aa6c9;font-family:"Inter",var(--head);text-decoration-color:var(--s-fire);text-decoration-thickness:2px}
.sp-cond.v7 b{font-size:1.24em;color:#ffb8a2}
.sp-cond.v7 .c{display:block;margin-top:5px;font-size:.78rem;font-weight:500;line-height:1.75;color:#93a0c4;letter-spacing:.02em}
.sp-facts.v7{gap:8px 26px;margin-top:20px;color:#9aa8cc;font-size:.86rem;letter-spacing:.04em;animation:spRise .9s .38s var(--ease) both}
.sp-facts.v7 li::before{content:"";width:5px;height:5px;border-radius:50%;background:#6c9bff;box-shadow:0 0 10px rgba(108,155,255,.9)}
.sp-scrollhint{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.sp-scrollhint i{position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#9fb4e8;transform:translateX(-50%);animation:spWheel 1.9s var(--ease) infinite}
@keyframes spWheel{0%{opacity:0;transform:translate(-50%,-3px)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}
/* デザインの壁（ヒーローの下の帯に移した） */
.sp-wallband{position:relative;padding-bottom:clamp(20px,3vw,34px)}
.sp-wallband .sp-wall{margin-top:0;height:clamp(250px,31vw,440px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 46%,transparent 92%);mask-image:linear-gradient(180deg,transparent,#000 13%,#000 46%,transparent 92%)}
.sp-wallcap{position:relative;z-index:2;margin:clamp(-26px,-2vw,-12px) auto 0;text-align:center;font:500 clamp(.9rem,1.1vw,1.02rem)/1.8 var(--head);color:#b6c1df;letter-spacing:.03em;text-shadow:0 2px 18px rgba(4,6,15,.95),0 0 40px rgba(4,6,15,.9)}
.sp-wallcap b{color:#fff;font-weight:700}
/* 安さの理由 */
.sp-why2{position:relative;padding:clamp(56px,6.5vw,96px) 0 clamp(44px,5vw,72px);text-align:center}
.sp-why2 .sp-h2{margin-top:14px;font-size:clamp(1.55rem,3vw,2.6rem);color:#fff}
.sp-why2-lead{margin:clamp(16px,2vw,24px) auto 0;max-width:46em;font-size:clamp(.96rem,1.15vw,1.08rem);line-height:2.1;color:#a9b4d4;letter-spacing:.02em}
.sp-why2-lead b{color:#fff;font-weight:700}
.sp-why2-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin:clamp(26px,3vw,40px) auto 0;max-width:1000px;text-align:left}
.sp-why2-list li{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--s-line)}
.sp-why2-list b{display:block;font:700 1rem/1.5 var(--head);color:#fff}
.sp-why2-list span{display:block;margin-top:4px;font-size:.84rem;line-height:1.8;color:var(--s-sub)}
/* アプリの段：できることを全部見せる */
.sp-row.wide{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);align-items:center}
.sp-row.wide .v-app .c{min-height:76px}
.sp-appfeat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:20px 0 0;padding:0}
.sp-appfeat li{padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--s-line)}
.sp-appfeat b{display:block;font:700 .9rem/1.5 var(--head);color:#fff;letter-spacing:.01em}
.sp-appfeat span{display:block;margin-top:3px;font-size:.78rem;line-height:1.7;color:var(--s-sub)}
.sp-appfeat li.new{grid-column:span 2;background:linear-gradient(135deg,rgba(108,155,255,.16),rgba(157,139,255,.1));box-shadow:inset 0 0 0 1px rgba(124,167,255,.4)}
.sp-appfeat li.new em{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#6c9bff,#9d8bff);color:#fff;font:700 .64rem/1 var(--head);font-style:normal;letter-spacing:.08em;vertical-align:middle}
.sp-applink{margin:16px 0 0}
.sp-applink a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--s-line2);color:#fff;text-decoration:none;font:700 .88rem/1 var(--head);letter-spacing:.02em;transition:background .25s,box-shadow .25s}
.sp-applink a:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sp-applink svg{width:16px;height:16px}
.v-app .hm{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:38px;align-items:end}
.v-app .hm i{display:block;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#ff9f80,#e0553c)}
.v-app .hm i:nth-child(1){height:100%}.v-app .hm i:nth-child(2){height:76%}.v-app .hm i:nth-child(3){height:50%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}.v-app .hm i:nth-child(4){height:38%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}.v-app .hm i:nth-child(5){height:26%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}
@media (max-width:860px){
.sp-why2-list{grid-template-columns:minmax(0,1fr)}
.sp-row.wide{grid-template-columns:minmax(0,1fr)}
.sp-appfeat{grid-template-columns:minmax(0,1fr)}.sp-appfeat li.new{grid-column:span 1}
}
@media (max-width:640px){
.sp-hero.v7{min-height:100svh;padding:clamp(84px,14vh,110px) 0 64px}
.sp-kicker{flex-direction:column;gap:8px;padding:10px 12px;border-radius:18px}
.sp-kicker .en{font-size:.62rem;letter-spacing:.24em}
.sp-h1.v7 .ln:first-child{font-size:clamp(.95rem,4.2vw,1.3rem);letter-spacing:.1em}
.sp-h1.v7 .ln:last-child{font-size:clamp(3rem,17vw,4.6rem)}
.sp-lead.v7{font-size:.94rem;line-height:1.95}.sp-lead.v7 .pc{display:none}
.sp-cond.v7{font-size:.94rem}.sp-cond.v7 .c{font-size:.74rem}
.sp-facts.v7{gap:6px 16px;font-size:.78rem}
.sp-scrollhint{display:none}
.sp-wallband{padding-bottom:6px}
.sp-wallband .sp-wall{height:clamp(185px,52vw,260px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent 96%);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent 96%)}
.sp-wallcap{margin-top:4px;font-size:.86rem;padding:0 24px;text-shadow:none}
}
/* ===== 大見出し v9（2026-09-28 K 指示）=========================================
「理想のオリジナルホームページを、30分で注文する。」
設計：①2段で意味を切る（何を／どれだけ速く） ②視線の終点を「30分」1点に集める
③大きさの比は 1 : 2.6（30分が2行目の中で突出する） ④色は足さず、光と下線で目立たせる
⑤行間は大きい字ほど詰める（1.06）小さい字はゆるめる（1.38）
============================================================================ */
.sp-h1.v9{margin-top:clamp(20px,2.6vw,32px);font-family:var(--head);font-weight:700;color:#fff;
display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.55vw,10px)}
/* 1行目：小さく、字間を開けて“前置き”に徹させる */
.sp-h1.v9 .l1{display:block;font-size:clamp(1.15rem,2.32vw,2.15rem);font-weight:700;line-height:1.38;
letter-spacing:.015em;color:rgba(255,255,255,.92);white-space:nowrap;
animation:spRise .85s var(--ease) both}
.sp-h1.v9 .l1 b{font-weight:700;color:#fff;position:relative;white-space:nowrap}
.sp-h1.v9 .l1 b::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:2px;border-radius:2px;
background:linear-gradient(90deg,rgba(255,138,106,.9),rgba(255,90,60,.45));opacity:0;animation:spFadeIn .7s .75s var(--ease) both}
@keyframes spFadeIn{to{opacity:1}}
/* 2行目：30分を主役に。「で注文する。」は38%に落としてベースラインで揃える */
.sp-h1.v9 .l2{display:flex;align-items:baseline;justify-content:center;gap:.06em;line-height:1.06;
animation:spRise .9s .1s var(--ease) both}
.sp-h1.v9 em{position:relative;font-style:normal;font-size:clamp(3.9rem,9.6vw,8.6rem);font-weight:700;
letter-spacing:-.055em;line-height:1;color:#fff;-webkit-text-fill-color:#fff;background:none;
text-shadow:0 0 90px rgba(150,190,255,.5),0 0 34px rgba(120,160,255,.28),0 22px 60px rgba(0,0,0,.55);
font-feature-settings:"palt" 0}
/* 30分の真下だけに朱の線を引く（色を足さずに視線を止める） */
.sp-h1.v9 em::after{content:"";position:absolute;left:1%;right:1%;bottom:-.17em;height:clamp(5px,.56vw,8px);border-radius:99px;
background:linear-gradient(90deg,#ff8a6a,#ff5a3c 62%,rgba(255,90,60,0));
box-shadow:0 6px 26px rgba(255,90,60,.5);transform-origin:left center;animation:spUline 1s .5s var(--ease) both}
@keyframes spUline{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.sp-h1.v9 .t{font-size:clamp(1.45rem,3.6vw,3.25rem);font-weight:700;letter-spacing:-.005em;color:rgba(255,255,255,.88)}
/* 見出しまわりの余白：前は詰め、後ろは開けて、次の文へ視線を送る */
.sp-hero.v7 .sp-chip.camp{margin-bottom:0}
.sp-h1.v9+.sp-lead,.sp-h1.v9+p{margin-top:clamp(24px,2.9vw,38px)}
@media (max-width:860px){
.sp-h1.v9 .l1{font-size:clamp(1.02rem,3.1vw,1.5rem);letter-spacing:.01em}
.sp-h1.v9 em{font-size:clamp(3.2rem,12.5vw,5.6rem)}
.sp-h1.v9 .t{font-size:clamp(1.25rem,4.6vw,2.1rem)}
}
@media (max-width:640px){
.sp-h1.v9{gap:4px;margin-top:20px}
.sp-h1.v9 .l1{white-space:normal;font-size:clamp(.95rem,4.5vw,1.3rem);line-height:1.5;max-width:15em}
.sp-h1.v9 em{font-size:clamp(2.9rem,15.5vw,4.3rem);letter-spacing:-.05em}
.sp-h1.v9 em::after{height:5px;bottom:-.06em}
.sp-h1.v9 .t{font-size:clamp(1.12rem,5.4vw,1.6rem)}
}
@media (max-width:360px){
.sp-h1.v9 em{font-size:2.6rem}.sp-h1.v9 .t{font-size:1.02rem}.sp-h1.v9 .l1{font-size:.88rem}
}
.sp-h1.v9 .l2{padding-bottom:clamp(8px,1vw,16px)}
@media (max-width:640px){.sp-h1.v9 em::after{bottom:-.14em;height:4px}.sp-h1.v9 .l2{padding-bottom:8px}}
/* ==========================================================================
質感の引き上げ（2026-09-28）。大企業のサイトが「上質に見える」理由を数値で入れる：
①彩度の高い面を小さくする ②光の塊をやめ、うっすら広く回す ③粒子を乗せて平面をなくす
④周辺を落として中央を持ち上げる ⑤太さを1段落とし、字間で品を作る ⑥線は髪の毛の太さ
========================================================================== */
/* ① 紙の粒子。平らな黒が「刷り物」になる */
body[data-route="start"]::after{content:"";position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.032;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
/* ② 光は「塊」ではなく、広く薄く。オーロラを1枚敷く */
.sp-hero .sp-sky .g1{width:min(1500px,120vw);height:900px;top:-32%;background:radial-gradient(closest-side,rgba(62,96,200,.34),transparent 72%);filter:blur(110px)}
.sp-hero .sp-sky .g2{left:-20%;top:6%;width:820px;height:820px;background:radial-gradient(closest-side,rgba(110,86,210,.22),transparent 72%);filter:blur(110px)}
.sp-hero .sp-sky .g3{right:-22%;top:44%;width:860px;height:860px;background:radial-gradient(closest-side,rgba(255,106,77,.10),transparent 72%);filter:blur(120px)}
.sp-hero .sp-sky .grid{background:linear-gradient(rgba(150,178,255,.045) 1px,transparent 1px) 0 0/84px 84px,linear-gradient(90deg,rgba(150,178,255,.045) 1px,transparent 1px) 0 0/84px 84px;
-webkit-mask-image:radial-gradient(76% 56% at 50% 8%,#000 18%,transparent 76%);mask-image:radial-gradient(76% 56% at 50% 8%,#000 18%,transparent 76%)}
/* ④ 周辺減光。中央だけが明るく見える */
.sp-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(120% 78% at 50% 34%,transparent 38%,rgba(4,6,14,.44) 76%,rgba(4,6,14,.78) 100%)}
/* ⑤ 見出しの太さを1段落として、字間で品を作る */
.sp-h1.v9 .l1{font-weight:600;letter-spacing:.055em;color:rgba(255,255,255,.9)}
.sp-h1.v9 .l1 b{font-weight:700}
.sp-h1.v9 .l1 b::after{height:1.5px;bottom:-.22em;background:linear-gradient(90deg,rgba(255,150,120,.78),rgba(255,106,77,.24))}
.sp-h1.v9 em{font-weight:700;text-shadow:0 0 110px rgba(150,190,255,.42),0 0 40px rgba(120,160,255,.2),0 26px 70px rgba(0,0,0,.5)}
.sp-h1.v9 em::after{height:clamp(4px,.4vw,6px);bottom:-.15em;left:2%;right:6%;
background:linear-gradient(90deg,rgba(255,138,106,.95),rgba(255,90,60,.62) 55%,rgba(255,90,60,0));box-shadow:none}
.sp-h1.v9 .t{font-weight:600;letter-spacing:.012em;color:rgba(255,255,255,.84)}
/* ⑥ 帯・線・面：彩度を落とし、髪の毛の太さに */
.sp-chip.camp{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.78);
font-weight:600;letter-spacing:.14em;font-size:11.5px;padding:0 18px;height:36px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sp-chip.camp i{background:#FF6A4D;box-shadow:0 0 0 3px rgba(255,106,77,.16)}
/* 一次ボタン：光る塊をやめ、面を締める */
body[data-route="start"] .sp-btn.fire{background:linear-gradient(180deg,#FF7355,#E8482B);
box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(210,60,35,.62);
letter-spacing:.04em;border-radius:12px}
body[data-route="start"] .sp-btn.fire:hover{background:linear-gradient(180deg,#FF8266,#EE5335);transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.4),0 20px 40px -18px rgba(210,60,35,.7)}
body[data-route="start"] .sp-btn.glass{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);letter-spacing:.04em}
body[data-route="start"] .sp-btn.glass:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transform:translateY(-1px)}
/* 値段：0円は白に。朱は「制作費」の取り消し線だけに残す */
.sp-cond{font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.92)}
.sp-cond s{color:rgba(255,255,255,.34);text-decoration-color:rgba(255,106,77,.85);text-decoration-thickness:2px}
.sp-cond b{background:none;color:#fff;-webkit-text-fill-color:#fff;font-size:1.28em;letter-spacing:-.02em}
.sp-facts{color:rgba(255,255,255,.44);letter-spacing:.05em}
.sp-facts svg{color:rgba(120,220,175,.8)}
/* 上の帯 */
.sp-nav nav a{letter-spacing:.06em;color:rgba(255,255,255,.55)}
.sp-nav nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.sp-nav.solid{background:rgba(7,10,20,.66);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:rgba(255,255,255,.07)}
.sp-brand span{color:rgba(255,255,255,.42);letter-spacing:.16em;border-left-color:rgba(255,255,255,.14)}
/* 上のキャンペーン帯：朱の面をやめ、白の面＋髪の毛の線に。0円は白 */
.sp-kicker{padding:7px 7px 7px 20px;border-radius:999px;background:rgba(255,255,255,.04);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sp-kicker .en{font-size:.68rem;letter-spacing:.34em;color:rgba(255,255,255,.5);font-weight:600}
.sp-kicker .ja{padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.07);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.03em}
.sp-kicker .ja s{color:rgba(255,255,255,.3);text-decoration-color:rgba(255,106,77,.9);text-decoration-thickness:1.5px}
.sp-kicker .ja b{margin-left:.45em;color:#fff;font-size:1.14em;font-weight:800;letter-spacing:-.01em}
/* 中央を少し持ち上げ、周辺をなだらかに落とす */
.sp-hero::before{background:radial-gradient(118% 76% at 50% 30%,transparent 44%,rgba(4,6,14,.34) 74%,rgba(4,6,14,.72) 100%)}
.sp-hero .sp-sky .g1{background:radial-gradient(closest-side,rgba(72,108,216,.4),transparent 72%)}
/* 縦のリズムを締める（間延びをなくす） */
.sp-hero.v7{padding-bottom:clamp(40px,5vh,68px)}
.sp-lead{margin-top:clamp(22px,2.4vw,30px);color:rgba(255,255,255,.72)}
.sp-cta{margin-top:clamp(26px,2.9vw,36px)}
.sp-cond{margin-top:clamp(22px,2.4vw,30px)}
.sp-facts{margin-top:16px}
.sp-scrollhint{bottom:20px;opacity:.5}
/* 折り返すと下線の位置が崩れるので、スマホでは「オリジナル」の下線を出さない */
@media (max-width:640px){.sp-h1.v9 .l1 b::after{display:none}}
/* ==========================================================================
キャンペーンの表示（2026-09-28 刷新）
考え方：値札（タグ）ではなく「名目」と「金額」を分けた1枚の札にする。
・左＝何のキャンペーンか（読ませる） ／ 右＝いくらになるか（見せる）。間は髪の毛1本で仕切る
・金額は 0円 を最大（34px）に。旧価格は 16px＝約47%。取り消し線は描かれる（0.55秒）
・朱は「線」と「点」だけ。面は白の半透明。彩度の高い面を作らない＝安く見せない
・読み込み後に一度だけ光が左から右へ走る（1.9秒）。動くのはこの1回だけ
========================================================================== */
.sp-camp{position:relative;display:inline-grid;grid-template-columns:auto auto;align-items:stretch;gap:0;margin:0;
border-radius:14px;overflow:hidden;background:rgba(255,255,255,.042);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 56px -32px rgba(0,0,0,.95);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
animation:spRise .8s var(--ease) both}
.sp-camp::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);
transform:translateX(-120%);animation:spSheen 1.5s 1.9s cubic-bezier(.3,0,.2,1) both}
@keyframes spSheen{to{transform:translateX(120%)}}
.sp-camp .a{display:grid;align-content:center;gap:5px;padding:12px 20px;text-align:left;border-right:1px solid rgba(255,255,255,.1)}
.sp-camp .a .en{font:600 9.5px/1 "Inter",sans-serif;letter-spacing:.26em;color:#FF9678}
.sp-camp .a b{font:700 13px/1.35 var(--head);letter-spacing:.05em;color:rgba(255,255,255,.9)}
.sp-camp .b{display:flex;align-items:baseline;gap:10px;padding:11px 22px 11px 20px}
.sp-camp .b .k{font:600 12px/1 var(--head);letter-spacing:.06em;color:rgba(255,255,255,.5)}
.sp-camp .b .old{position:relative;font:600 16px/1 "Inter",sans-serif;letter-spacing:-.01em;color:rgba(255,255,255,.34)}
.sp-camp .b .old::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;border-radius:2px;
background:#FF5A3C;transform-origin:left center;animation:spStrike .55s 1.05s cubic-bezier(.16,1,.3,1) both}
@keyframes spStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sp-camp .b i{font-style:normal;font:600 13px/1 "Inter",sans-serif;color:rgba(255,255,255,.38);animation:spJustFade .5s 1.5s both}
@keyframes spJustFade{from{opacity:0}to{opacity:1}}
.sp-camp .b em{font-style:normal;font:800 34px/1 "Inter",var(--head),sans-serif;letter-spacing:-.045em;color:#fff;
text-shadow:0 0 46px rgba(150,190,255,.45);animation:spZeroIn .6s 1.55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes spZeroIn{from{opacity:0;transform:translateY(7px) scale(.86)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.sp-camp,.sp-camp::after,.sp-camp .b .old::after,.sp-camp .b i,.sp-camp .b em{animation:none;transform:none;opacity:1}
.sp-camp .b .old::after{transform:scaleX(1)}
}
@media (max-width:640px){
.sp-camp{border-radius:12px}
.sp-camp .a{padding:10px 14px;gap:4px}
.sp-camp .a .en{font-size:8.5px;letter-spacing:.2em}
.sp-camp .a b{font-size:11px;letter-spacing:.03em}
.sp-camp .b{padding:9px 15px 9px 14px;gap:7px}
.sp-camp .b .k{font-size:10.5px}
.sp-camp .b .old{font-size:13.5px}
.sp-camp .b i{font-size:11px}
.sp-camp .b em{font-size:26px}
}
@media (max-width:360px){
.sp-camp .a b{font-size:10px}.sp-camp .b .old{font-size:12px}.sp-camp .b em{font-size:22px}
.sp-camp .a{padding:9px 11px}.sp-camp .b{padding:8px 12px}
}
/* ---- 実測に合わせた直し（2026-09-28）。調査した実在3例の共通点に寄せる：
①旧価格を朱にしている例は0件＝全例グレー ②新旧のサイズ比は 1:1.29〜1.45（2倍以上は無い）
③新価格を太字にしない（星のや 32px/400） ④和文の「円」まで打ち消すと判読が落ちる＝数字だけ打ち消す ---- */
.sp-camp .b{gap:9px}
.sp-camp .b .old{font:500 24px/1 "Inter",var(--head),sans-serif;letter-spacing:-.02em;color:rgba(255,255,255,.4)}
.sp-camp .b .old::after{display:none}
.sp-camp .b .old s{text-decoration:none;
background:linear-gradient(currentColor,currentColor) no-repeat 0 56%/0 1px;
animation:spStrike2 .5s 1.05s cubic-bezier(.16,1,.3,1) both}
@keyframes spStrike2{from{background-size:0 1px}to{background-size:100% 1px}}
.sp-camp .b i{font-size:.8em;margin:0 -1px;color:rgba(255,255,255,.34)}
.sp-camp .b em{font-weight:600;font-size:34px;letter-spacing:-.035em;text-shadow:0 0 40px rgba(150,190,255,.34)}
@media (max-width:640px){
.sp-camp .b{gap:7px}
.sp-camp .b .old{font-size:18px}
.sp-camp .b em{font-size:26px}
}
@media (max-width:360px){.sp-camp .b .old{font-size:15px}.sp-camp .b em{font-size:22px}}
@media (prefers-reduced-motion:reduce){.sp-camp .b .old s{animation:none;background-size:100% 1px}}
/* ボタン下の価格も、旧価格はグレー・数字だけ打ち消す（実在3例に合わせる） */
body[data-route="start"] .sp-cond s{color:rgba(255,255,255,.38);text-decoration-color:currentColor;text-decoration-thickness:1px}
/* ==========================================================================
実測27社（2026-09-28）から導いた組み直し
・FVの可視文字数は中央値281字。上位群は88〜265字 → 長い注記をFVから外す
・見出しは20〜25字／60px前後。装飾は1語だけ → 「30分」だけを飾る
・キャンペーンは独立バッジにせず、キッカー（32px）→大見出し（62px）の2段にする（ペライチ型）
・CTAは高さ56〜72px・角丸50px以上のピル形（ペライチ293×72 r=50／カミナシ188×72 r=60）
・CTAの真上に吹き出しで「なぜ押すか」を1行（マネーフォワード／SmartHR／kintone）
・実績ゼロは「作れるものの点数」で埋める（ペライチ600種類／Notion3万以上／SHIFT AI 1,100本以上）
========================================================================== */
.sp-kick{display:inline-flex;align-items:center;gap:14px;margin:0;flex-wrap:wrap;justify-content:center;
animation:spRise .8s var(--ease) both}
.sp-kick .tag{padding:6px 13px;border-radius:7px;background:rgba(255,90,60,.16);box-shadow:inset 0 0 0 1px rgba(255,140,110,.42);
font:700 11.5px/1 var(--head);letter-spacing:.14em;color:#FFC0AC}
.sp-kick .tx{display:inline-flex;align-items:baseline;gap:9px;font:700 clamp(1.05rem,1.9vw,1.6rem)/1.3 var(--head);
letter-spacing:.01em;color:rgba(255,255,255,.86)}
.sp-kick .old{font-family:"Inter",var(--head),sans-serif;font-weight:600;color:rgba(255,255,255,.4)}
.sp-kick .old s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 56%/0 1px;
animation:spStrike2 .5s 1.0s cubic-bezier(.16,1,.3,1) both}
.sp-kick i{font-style:normal;font-size:.72em;color:rgba(255,255,255,.34);animation:spJustFade .5s 1.42s both}
.sp-kick em{font-style:normal;font:800 clamp(1.7rem,3.1vw,2.7rem)/1 "Inter",var(--head),sans-serif;letter-spacing:-.04em;color:#fff;
text-shadow:0 0 44px rgba(150,190,255,.42);animation:spZeroIn .55s 1.5s cubic-bezier(.2,1.4,.4,1) both}
/* 見出し：実測中央値62pxに寄せる（138px→最大86px）。装飾は「30分」1語だけ */
.sp-h1.v9{margin-top:clamp(16px,2vw,26px)}
.sp-h1.v9 .l1{font-size:clamp(1.05rem,2.05vw,1.85rem);letter-spacing:.04em}
.sp-h1.v9 .l1 b::after{display:none}
.sp-h1.v9 em{font-size:clamp(3.2rem,6.4vw,5.4rem)}
.sp-h1.v9 .t{font-size:clamp(1.3rem,2.6vw,2.3rem)}
/* 作れるものの点数（実績ゼロの代替。y<900 に置く） */
.sp-proofn{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:clamp(20px,2.3vw,30px) 0 0;padding:0;
animation:spRise .9s .3s var(--ease) both}
.sp-proofn li{padding:0 clamp(16px,1.9vw,26px);border-left:1px solid rgba(255,255,255,.1)}
.sp-proofn li:first-child{border-left:0}
.sp-proofn b{display:block;white-space:nowrap;font:700 clamp(1.5rem,2.1vw,1.95rem)/1 "Inter",sans-serif;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.sp-proofn b i{font-style:normal;font-size:.44em;margin-left:.12em;letter-spacing:0;color:rgba(255,255,255,.5);font-family:var(--head);font-weight:600}
.sp-proofn li>span{display:block;margin-top:6px;font:500 .74rem/1.3 var(--head);letter-spacing:.06em;color:rgba(255,255,255,.44)}
.sp-proofn b span{font:inherit;color:inherit;letter-spacing:inherit;display:inline;margin:0}
/* CTAの真上の吹き出し */
.sp-bub{position:relative;display:inline-block;margin:clamp(24px,2.7vw,34px) auto 0;padding:8px 16px;border-radius:9px;
background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
font:600 12.5px/1 var(--head);letter-spacing:.04em;color:rgba(255,255,255,.8);animation:spRise .9s .36s var(--ease) both}
.sp-bub b{color:#fff}
.sp-bub::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
background:rgba(255,255,255,.07);box-shadow:1px 1px 0 rgba(255,255,255,.14)}
/* CTA：ピル形・高さ64px（実測 56〜72px／角丸50px以上） */
.sp-hero .sp-cta{margin-top:14px}
body[data-route="start"] .sp-hero .sp-btn{min-height:64px;padding:0 32px;border-radius:999px;font-size:1.02rem}
/* 注記：FVの文字数を減らすため1行に畳む */
.sp-cond.v7{margin-top:clamp(18px,2vw,24px)}
.sp-cond.v7 .c{display:block;max-width:46em;margin:0 auto;font:400 .76rem/1.8 var(--head);color:rgba(255,255,255,.4);letter-spacing:.015em}
@media (max-width:640px){
.sp-kick{gap:9px}
.sp-kick .tag{font-size:10px;padding:5px 10px;letter-spacing:.1em}
.sp-kick .tx{font-size:.98rem;gap:7px}
.sp-kick em{font-size:1.72rem}
.sp-h1.v9 em{font-size:clamp(2.6rem,13vw,3.8rem)}
.sp-h1.v9 .t{font-size:clamp(1.08rem,5vw,1.5rem)}
.sp-h1.v9 .l1{font-size:clamp(.92rem,4.2vw,1.2rem)}
.sp-proofn li{padding:0 12px}
.sp-proofn b{font-size:1.3rem}.sp-proofn span{font-size:.66rem}
.sp-bub{font-size:11.5px;padding:7px 13px}
body[data-route="start"] .sp-hero .sp-btn{min-height:58px}
.sp-cond.v7 .c{font-size:.72rem}
}
/* ==========================================================================
「入っているもの／入っていないもの」の対置（2026-09-28）
型の出どころ：小さなお葬式（搬送距離・安置日数・枚数を同じ表に並べる）／よりそう（別途費用を
2つに絞って先出し）／リノコ（コミコミ価格の内訳）／相続登記（実費は事前案内）。
総額を出すことより、**含まれるものと含まれないものを同じ画面で対にする**ほうが効いている。
========================================================================== */
.sp-incl{padding:clamp(80px,9vw,140px) 0 clamp(64px,7vw,110px);border-top:1px solid rgba(255,255,255,.08)}
.sp-incl .sp-vh{max-width:none;margin:0;text-align:left}
.sp-incl .sp-h2{margin-top:16px;font-size:clamp(1.8rem,3.1vw,2.8rem);letter-spacing:-.022em;color:#fff}
.sp-incl-lead{margin:16px 0 0;max-width:40em;font-size:clamp(.94rem,1.02vw,1.04rem);line-height:2.05;color:rgba(255,255,255,.62)}
.sp-incl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,4.2vw,60px);align-items:start}
.sp-incl .col{padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,32px) clamp(24px,2.6vw,34px);border-radius:20px;
background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08)}
.sp-incl .col.in{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
.sp-incl .hd{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:700 .96rem/1 var(--head);letter-spacing:.06em;color:#fff}
.sp-incl .hd i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:12px;font-weight:800}
.sp-incl .in .hd i{background:#2fae76;color:#fff}
.sp-incl .in .hd i svg{width:13px;height:13px}
.sp-incl .out .hd i{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sp-incl ul{list-style:none;display:grid;gap:13px;margin:0;padding:0}
.sp-incl li{display:grid;gap:3px}
.sp-incl li b{font:700 .95rem/1.5 var(--head);letter-spacing:.01em;color:#fff}
.sp-incl li span{font-size:.82rem;line-height:1.75;color:rgba(255,255,255,.46)}
.sp-incl .out li b{color:rgba(255,255,255,.82)}
.sp-incl .note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font:400 .8rem/1.85 var(--head);color:rgba(255,255,255,.46)}
.sp-incl .note b{color:#fff;font-weight:700}
.sp-incl .note+.note{margin-top:10px;padding-top:10px}
@media (max-width:860px){
.sp-incl-grid{grid-template-columns:minmax(0,1fr)}
.sp-incl .col{border-radius:16px;padding:20px 18px 22px}
}
/* ==========================================================================
ヘッダー v10 ／ サブタイトル ／ ボタン（2026-09-28 K 指示）
========================================================================== */
.sp-nav.v10{border-bottom:1px solid transparent}
.sp-nav.v10 .sp-nav-in{height:72px;gap:0;width:min(100% - 40px,1320px)}
.sp-nav.v10 .sp-brand{gap:12px}
.sp-nav.v10 .sp-brand b{font-size:20px;letter-spacing:.07em}
.sp-nav.v10 .sp-brand span{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.44);padding-left:14px;margin-left:5px;border-left:1px solid rgba(255,255,255,.14)}
.sp-nav-menu{margin:0 auto;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sp-nav.v10 .sp-nav-menu a{padding:9px 16px;border-radius:999px;font:600 13px/1 var(--head);letter-spacing:.05em;
color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s var(--ease),background .2s var(--ease)}
.sp-nav.v10 .sp-nav-menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.sp-nav-act{display:flex;align-items:center;gap:10px}
.sp-navbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;
background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:rgba(255,255,255,.82);
font:600 12.5px/1 var(--head);letter-spacing:.04em;cursor:pointer;transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.sp-navbtn:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transform:translateY(-1px);color:#fff}
.sp-navbtn i{display:grid;place-items:center;color:rgba(255,255,255,.55)}
.sp-navbtn i svg{width:15px;height:15px}
.sp-nav.v10.solid{border-bottom-color:rgba(255,255,255,.08)}
@media (max-width:1100px){.sp-nav.v10 .sp-nav-menu a{padding:9px 11px;font-size:12px}}
@media (max-width:940px){.sp-nav-menu{display:none}.sp-nav.v10 .sp-nav-in{justify-content:space-between}}
@media (max-width:560px){.sp-navbtn{height:36px;padding:0 12px;font-size:11.5px}.sp-navbtn i{display:none}}
/* サブタイトル */
.sp-lead.v7{margin-top:clamp(20px,2.3vw,28px);font-size:clamp(1rem,1.18vw,1.16rem);line-height:1.95;color:rgba(255,255,255,.78);font-weight:500}
/* ハイテクの一行：光が左から右へ走り、末尾のカーソルが点滅する */
.sp-tech{display:inline-flex;align-items:center;gap:9px;margin:clamp(12px,1.4vw,18px) auto 0;
font:700 clamp(1.02rem,1.55vw,1.4rem)/1.5 var(--head);letter-spacing:.06em;
animation:spRise .9s .24s var(--ease) both}
.sp-tech .sh{
background:linear-gradient(100deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.55) 34%,#fff 44%,#bcd4ff 50%,#fff 56%,rgba(255,255,255,.55) 66%,rgba(255,255,255,.55) 100%);
background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
animation:spScan 4.4s 1.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes spScan{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
.sp-tech .cur{width:10px;height:1.05em;border-radius:2px;background:linear-gradient(180deg,#8fb4ff,#5b7cfa);
box-shadow:0 0 14px rgba(110,141,255,.85);animation:spBlink 1.05s steps(1) infinite}
@keyframes spBlink{0%,49%{opacity:1}50%,100%{opacity:.08}}
@media (prefers-reduced-motion:reduce){
.sp-tech .sh{animation:none;-webkit-text-fill-color:#fff;color:#fff;background:none}
.sp-tech .cur{animation:none;opacity:.7}
}
/* ボタン：面を締め、内側に光の縁、押すと沈む。ホバーで光が一度走る */
body[data-route="start"] .sp-hero .sp-btn{position:relative;overflow:hidden;min-height:66px;padding:0 34px;border-radius:999px;
font:700 1.04rem/1 var(--head);letter-spacing:.05em;transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn .lb{position:relative;z-index:2}
body[data-route="start"] .sp-hero .sp-btn svg{position:relative;z-index:2}
body[data-route="start"] .sp-hero .sp-btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.34) 48%,transparent 62%);
transform:translateX(-130%);transition:transform .8s cubic-bezier(.3,0,.2,1)}
body[data-route="start"] .sp-hero .sp-btn:hover::after{transform:translateX(130%)}
body[data-route="start"] .sp-hero .sp-btn.fire{
background:linear-gradient(180deg,#FF7A5B 0%,#F2522F 52%,#DE401F 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.2),
0 2px 4px rgba(0,0,0,.35),0 18px 38px -16px rgba(214,62,32,.72),0 0 0 6px rgba(255,90,60,.09)}
body[data-route="start"] .sp-hero .sp-btn.fire:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.2),0 2px 4px rgba(0,0,0,.35),
0 26px 52px -18px rgba(214,62,32,.8),0 0 0 8px rgba(255,90,60,.12)}
body[data-route="start"] .sp-hero .sp-btn.fire:active{transform:translateY(0);
box-shadow:inset 0 2px 5px rgba(0,0,0,.3),0 6px 16px -8px rgba(214,62,32,.6)}
body[data-route="start"] .sp-hero .sp-btn.ghost{color:#fff;background:rgba(255,255,255,.045);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.18),0 14px 34px -20px rgba(0,0,0,.9)}
body[data-route="start"] .sp-hero .sp-btn.ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.34),0 20px 44px -20px rgba(0,0,0,.95)}
body[data-route="start"] .sp-hero .sp-btn.ghost small{position:relative;z-index:2;margin-left:11px;padding:5px 10px;border-radius:7px;
background:rgba(110,141,255,.22);box-shadow:inset 0 0 0 1px rgba(140,170,255,.42);
font:800 11.5px/1 var(--head);letter-spacing:.08em;color:#cfdcff}
.sp-hero .sp-cta{gap:14px;margin-top:clamp(28px,3.2vw,40px)}
@media (max-width:860px){
body[data-route="start"] .sp-hero .sp-btn{min-height:60px;padding:0 24px;font-size:.98rem}
.sp-hero .sp-cta{flex-direction:column;align-items:stretch;gap:11px}
body[data-route="start"] .sp-hero .sp-btn{width:100%}
}
@media (max-width:640px){
.sp-lead.v7{font-size:.95rem;line-height:1.9}
.sp-tech{font-size:1rem;gap:7px;letter-spacing:.04em}
.sp-tech .cur{width:8px}
body[data-route="start"] .sp-hero .sp-btn.ghost small{margin-left:8px;padding:4px 8px;font-size:10.5px}
}
/* ==========================================================================
作り直し v11（2026-09-28 K「見た目も失敗」）
・サブタイトルと一行の間を1行ぶん空ける（一段改行）
・ハイテク感：走査線が実際に横切る＋文字が薄い青白で発光＋角括弧＋カーソル点滅
・ボタン：外周に回る光の輪（conic）、内側にベベル、矢印を丸いチップに入れて押すと進む
========================================================================== */
/* 一段あける */
.sp-tech{margin-top:clamp(26px,3vw,38px);position:relative;padding:10px 20px;border-radius:12px;overflow:hidden;
background:rgba(120,160,255,.055);box-shadow:inset 0 0 0 1px rgba(130,170,255,.2)}
.sp-tech::before,.sp-tech::after{content:"";position:absolute;top:50%;width:9px;height:60%;transform:translateY(-50%);
border:1px solid rgba(140,180,255,.55);pointer-events:none}
.sp-tech::before{left:7px;border-right:0}
.sp-tech::after{right:7px;border-left:0}
/* 走査線：帯が左から右へ実際に横切る */
.sp-tech .scan{position:absolute;top:0;bottom:0;left:0;width:22%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(150,195,255,.34),transparent);
animation:spScanBar 3.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes spScanBar{0%{transform:translateX(-140%)}62%,100%{transform:translateX(560%)}}
.sp-tech .sh{position:relative;z-index:2;background:none;-webkit-text-fill-color:currentColor;color:#dce9ff;
text-shadow:0 0 22px rgba(120,170,255,.75),0 0 46px rgba(90,140,255,.4);animation:none;
font-variant-numeric:tabular-nums}
.sp-tech .cur{position:relative;z-index:2;width:9px;height:1.1em;border-radius:1px;background:#8fb4ff;
box-shadow:0 0 16px rgba(143,180,255,.95)}
@media (prefers-reduced-motion:reduce){.sp-tech .scan{animation:none;opacity:0}}
/* ボタン：外周に回る光の輪 */
body[data-route="start"] .sp-hero .sp-btn{isolation:isolate}
body[data-route="start"] .sp-hero .sp-btn::before{content:"";position:absolute;inset:-2px;z-index:0;border-radius:inherit;padding:2px;
background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.55) 40deg,rgba(255,255,255,0) 110deg,rgba(255,255,255,0) 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;transition:opacity .3s var(--ease);animation:spRing 3.4s linear infinite}
@keyframes spRing{to{--a:360deg;transform:rotate(360deg)}}
body[data-route="start"] .sp-hero .sp-btn:hover::before{opacity:1}
body[data-route="start"] .sp-hero .sp-btn.fire{
background:linear-gradient(180deg,#FF8163 0%,#F4553220 0%,#F45532 46%,#E04320 78%,#CE3A1A 100%);
background-color:#F45532}
body[data-route="start"] .sp-hero .sp-btn .chip{position:relative;z-index:2;display:grid;place-items:center;width:32px;height:32px;margin-left:14px;margin-right:-10px;
border-radius:50%;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
transition:transform .3s var(--ease),background .3s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn .chip svg{width:16px;height:16px}
body[data-route="start"] .sp-hero .sp-btn:hover .chip{transform:translateX(4px);background:rgba(255,255,255,.3)}
body[data-route="start"] .sp-hero .sp-btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
body[data-route="start"] .sp-hero .sp-btn.ghost svg{margin-left:12px;opacity:.6}
/* 前回の続きから：保存が無いときは薄く、押せない */
.sp-navbtn.off{opacity:.38;cursor:not-allowed;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sp-navbtn.off:hover{background:rgba(255,255,255,.05);transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
@media (max-width:640px){
.sp-tech{padding:9px 16px;margin-top:22px}
.sp-tech::before,.sp-tech::after{width:6px}
.sp-tech .cur{width:7px}
body[data-route="start"] .sp-hero .sp-btn .chip{width:28px;height:28px;margin-left:10px;margin-right:-6px}
}
/* v12（2026-09-28）：入力欄に見える枠と、丸いチップをやめる。装飾を引いて質だけ残す */
.sp-tech{background:none;box-shadow:none;padding:0;border-radius:0;overflow:visible}
.sp-tech::before,.sp-tech::after{display:none}
.sp-tech .scan{display:none}
.sp-tech .sh{color:#e4edff;text-shadow:0 0 26px rgba(120,170,255,.7),0 0 60px rgba(90,140,255,.34);letter-spacing:.07em}
.sp-tech .cur{width:8px;height:1.05em;background:#8fb4ff;box-shadow:0 0 18px rgba(143,180,255,.9);animation:spBlink 1.05s steps(1) infinite}
/* 文字の下を、細い光が一定の間隔で通る */
.sp-tech{position:relative;padding-bottom:9px}
.sp-tech::after{content:"";display:block;position:absolute;left:0;right:22px;bottom:0;height:1px;
background:linear-gradient(90deg,rgba(140,180,255,0),rgba(140,180,255,.5),rgba(140,180,255,0));
background-size:36% 100%;background-repeat:no-repeat;animation:spUnderScan 3.8s cubic-bezier(.45,0,.3,1) infinite}
@keyframes spUnderScan{0%{background-position:-40% 0}64%,100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.sp-tech::after{animation:none;background-position:50% 0}}
/* ボタン：回る輪とチップをやめ、面と影と一度だけの光沢で作る */
body[data-route="start"] .sp-hero .sp-btn::before{display:none}
body[data-route="start"] .sp-hero .sp-btn .chip{display:none}
body[data-route="start"] .sp-hero .sp-btn{min-height:64px;padding:0 32px;font-size:1.02rem;letter-spacing:.06em}
body[data-route="start"] .sp-hero .sp-btn svg{width:17px;height:17px;margin-left:12px;transition:transform .28s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn:hover svg{transform:translateX(4px)}
body[data-route="start"] .sp-hero .sp-btn.fire{
background:linear-gradient(180deg,#FF7E60,#F1522E 55%,#D9401E);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.22),
0 1px 2px rgba(0,0,0,.4),0 20px 44px -20px rgba(214,62,32,.78)}
body[data-route="start"] .sp-hero .sp-btn.fire:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 1px 2px rgba(0,0,0,.4),0 28px 56px -22px rgba(214,62,32,.85)}
body[data-route="start"] .sp-hero .sp-btn.ghost{background:rgba(255,255,255,.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.17)}
body[data-route="start"] .sp-hero .sp-btn.ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.32)}
body[data-route="start"] .sp-hero .sp-btn.ghost svg{opacity:.55;margin-left:12px}
/* ==========================================================================
v13（2026-09-28 K「地味・芸がない」）— 装飾ではなく“作り”で見せる
①ボタンを「本体＋矢印の間仕切り」の2枚構造にし、上辺に光の弧を入れる
②一行は入力欄ではなく「動いている状態表示」にする（回る輪郭・脈打つ点・走る下線）
③キャンペーンの札はチケットの切り欠きを持つ形にする
========================================================================== */
/* ① ボタン：2枚構造 */
body[data-route="start"] .sp-hero .sp-btn.split{padding:0;overflow:hidden;display:inline-flex;align-items:stretch;gap:0}
body[data-route="start"] .sp-hero .sp-btn.split .lb{display:flex;align-items:center;padding:0 30px;white-space:nowrap}
body[data-route="start"] .sp-hero .sp-btn.split .arw{display:grid;place-items:center;width:62px;align-self:stretch;
border-left:1px solid rgba(255,255,255,.26);transition:background .28s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn.split .arw svg{width:18px;height:18px;margin:0;transition:transform .28s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn.split:hover .arw svg{transform:translateX(4px)}
/* 上辺に光の弧（物としての厚みを出す） */
body[data-route="start"] .sp-hero .sp-btn.split::before{content:"";display:block;position:absolute;left:12%;right:12%;top:0;height:1px;z-index:3;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);opacity:1;animation:none;inset:auto;padding:0;-webkit-mask:none;mask:none}
body[data-route="start"] .sp-hero .sp-btn.fire.split{background:linear-gradient(180deg,#FF8465,#F0502C 54%,#D33D1B)}
body[data-route="start"] .sp-hero .sp-btn.fire.split .arw{background:rgba(0,0,0,.14)}
body[data-route="start"] .sp-hero .sp-btn.fire.split:hover .arw{background:rgba(0,0,0,.05)}
body[data-route="start"] .sp-hero .sp-btn.ghost.split .arw{background:rgba(255,255,255,.05);border-left-color:rgba(255,255,255,.16)}
body[data-route="start"] .sp-hero .sp-btn.ghost.split:hover .arw{background:rgba(255,255,255,.12)}
body[data-route="start"] .sp-hero .sp-btn.ghost.split .arw svg{opacity:.7}
/* ② 一行：動いている状態表示。輪郭の光が一周し、点が脈打ち、下線が走る */
.sp-tech.live{display:inline-flex;align-items:center;gap:12px;padding:11px 22px 11px 18px;border-radius:999px;
background:linear-gradient(180deg,rgba(120,160,255,.09),rgba(120,160,255,.035));position:relative;overflow:visible}
.sp-tech.live::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:conic-gradient(from var(--ang,0deg),rgba(140,180,255,.12) 0deg,rgba(190,215,255,.95) 40deg,rgba(140,180,255,.12) 120deg,rgba(140,180,255,.12) 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
animation:spAng 4.2s linear infinite}
@property --ang{syntax:'';initial-value:0deg;inherits:false}
@keyframes spAng{to{--ang:360deg}}
.sp-tech.live::after{content:"";position:absolute;left:14%;right:14%;bottom:6px;height:1px;border-radius:2px;
background:linear-gradient(90deg,rgba(150,190,255,0),rgba(170,205,255,.85),rgba(150,190,255,0));
background-size:34% 100%;background-repeat:no-repeat;animation:spUnderScan 3.8s cubic-bezier(.45,0,.3,1) infinite}
.sp-tech.live .dot{position:relative;width:8px;height:8px;border-radius:50%;background:#7fa8ff;box-shadow:0 0 12px rgba(127,168,255,.9)}
.sp-tech.live .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(127,168,255,.6);animation:spPulse 2s ease-out infinite}
@keyframes spPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.sp-tech.live .sh{letter-spacing:.09em}
@media (prefers-reduced-motion:reduce){.sp-tech.live::before,.sp-tech.live::after,.sp-tech.live .dot::after{animation:none}}
/* ③ キャンペーンの札：チケットの切り欠き */
.sp-kick .tag{position:relative;padding:7px 14px 7px 18px;border-radius:5px 999px 999px 5px;
background:linear-gradient(100deg,rgba(255,106,77,.28),rgba(255,106,77,.13));
box-shadow:inset 0 0 0 1px rgba(255,150,120,.5);color:#FFD2C4;overflow:visible}
.sp-kick .tag .n{position:absolute;left:-1px;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
background:var(--s-bg);box-shadow:inset 0 0 0 1px rgba(255,150,120,.5)}
@media (max-width:860px){
body[data-route="start"] .sp-hero .sp-btn.split{width:100%;justify-content:space-between}
body[data-route="start"] .sp-hero .sp-btn.split .lb{padding:0 20px;flex:1;justify-content:center}
body[data-route="start"] .sp-hero .sp-btn.split .arw{width:54px;flex:none}
}
@media (max-width:640px){
.sp-tech.live{padding:9px 16px 9px 13px;gap:9px}
.sp-tech.live .dot{width:7px;height:7px}
}
/* ==========================================================================
④ ヒーロー：静止画の宇宙＋スター・ウォーズ式のロール＋丸い札（2026-09-28）
・地＝K が Nano Banana Pro で作った静止画。本家も星は一切動かない（実測で確認）
・「シュンシュン」＝ canvas の星。スクロールしているあいだだけ現れる（--sparks）
・ロールは等速。速さは1行あたり 1.0 秒（本家の実測は1.5〜2.2秒＝読み切れないため速めた）
========================================================================== */
.sp-space>img.plate{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
transform:scale(var(--zoom));transform-origin:50% 46%;will-change:transform;
filter:blur(calc(var(--warp) * 2.2px)) saturate(.94)}
.sp-space>canvas{opacity:var(--sparks,0)}
.sp-space.still>canvas{opacity:0}
/* ロール */
.sp-crawl{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
perspective:300px;perspective-origin:50% 0%;
/* 上（消失点）へ向けて消す × 本文の載る中央の帯だけ弱める。
ロールは止めない。両端は原寸のまま流し、真ん中だけ透けさせて文字を守る */
-webkit-mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 100%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.4) 27%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.4) 73%,#000 87%,#000 100%);
mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 100%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.4) 27%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.4) 73%,#000 87%,#000 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.sc-plane{position:absolute;left:50%;bottom:0;width:min(1060px,86vw);height:100%;
transform:translateX(-50%) rotateX(62deg);transform-origin:50% 100%}
.sc-text{position:absolute;left:0;right:0;top:100%;
font-family:var(--head);font-weight:900;font-size:clamp(1.5rem,5.5vw,4.6rem);line-height:1.52;
text-align:center;color:#F8D308;opacity:.5;
transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;
animation:scCrawl var(--sc-dur,26s) linear infinite}
.sc-text .ln{display:block;white-space:nowrap}
.sc-text .gap{display:block;height:.9em}
@keyframes scCrawl{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(var(--sc-dist,1600px) * -1),0)}}
/* 丸い札：ロールは中央に集まるので、空いている右上に置く */
.sp-seal{position:absolute;z-index:3;margin:0;pointer-events:none;
right:clamp(14px,4.4vw,78px);top:clamp(86px,13vh,168px);
width:clamp(132px,14.5vw,196px);aspect-ratio:1;
display:grid;place-items:center;transform:rotate(-7deg);
animation:spSealIn .85s cubic-bezier(.2,1.45,.42,1) .4s both}
@keyframes spSealIn{from{opacity:0;transform:rotate(-16deg) scale(.7)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
.sp-seal .rays{position:absolute;inset:-15%;border-radius:50%;opacity:.3;
background:repeating-conic-gradient(from 0deg,rgba(239,199,90,.85) 0deg 3.4deg,transparent 3.4deg 12deg);
-webkit-mask-image:radial-gradient(closest-side,#000 50%,rgba(0,0,0,.35) 72%,transparent 92%);
mask-image:radial-gradient(closest-side,#000 50%,rgba(0,0,0,.35) 72%,transparent 92%);
animation:spSealSpin 52s linear infinite}
@keyframes spSealSpin{to{transform:rotate(360deg)}}
.sp-seal .in{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
background:radial-gradient(118% 118% at 30% 20%,#C92B1E 0%,#9A1018 46%,#5E070F 100%);
box-shadow:0 0 0 1.5px rgba(239,199,90,.92),0 0 0 4px rgba(8,6,12,.8),0 0 0 5px rgba(239,199,90,.42),
0 28px 64px -24px rgba(0,0,0,.95),inset 0 2px 12px rgba(255,214,160,.2);
text-align:center;line-height:1}
.sp-seal .in::before{content:"";position:absolute;inset:9%;border-radius:50%;
border:1px dashed rgba(239,199,90,.34);pointer-events:none}
.sp-seal .t{font:800 clamp(9px,.98vw,12px)/1 var(--head);letter-spacing:.16em;color:#EFC75A;
text-indent:.16em;margin-bottom:.5em}
.sp-seal .o{font:600 clamp(8px,.83vw,10px)/1 var(--head);letter-spacing:.03em;color:rgba(255,236,224,.74)}
.sp-seal .p{margin-top:.25em;font:600 clamp(10px,1.02vw,13px)/1 "Inter",var(--head),sans-serif;color:rgba(255,226,214,.56)}
.sp-seal .p s{text-decoration-color:rgba(239,199,90,.95);text-decoration-thickness:1.5px}
.sp-seal .z{display:block;margin-top:.04em;font:900 clamp(34px,3.8vw,54px)/1 "Inter",var(--head),sans-serif;
letter-spacing:-.045em;color:#F4D072;text-shadow:0 2px 0 rgba(94,7,15,.6)}
.sp-seal .z em{font-style:normal;font-size:.44em;font-weight:800;letter-spacing:0;margin-left:.06em}
@media (max-width:1000px){
.sp-seal{right:clamp(12px,3.6vw,36px);top:clamp(78px,11vh,120px);width:clamp(122px,17vw,150px)}
.sp-seal .z{font-size:clamp(30px,4.6vw,42px)}
.sp-seal .t{font-size:clamp(9px,1.3vw,11px)}
.sp-seal .o{font-size:clamp(8px,1.08vw,9.5px)}
.sp-seal .p{font-size:clamp(9.5px,1.3vw,11.5px)}
}
@media (max-width:640px){
/* 幅が無いので、札は見出しの上・中央へ戻す（ロールの消失点より上なので重ならない） */
.sp-seal{position:static;margin:0 auto clamp(14px,3vh,24px);width:clamp(118px,33vw,140px);
transform:rotate(-6deg)}
@keyframes spSealIn{from{opacity:0;transform:rotate(-14deg) scale(.72)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.sp-seal .z{font-size:clamp(30px,8.4vw,38px)}
.sp-seal .t{font-size:10px;letter-spacing:.13em}
.sp-seal .o{font-size:8.5px}
.sp-seal .p{font-size:10.5px}
.sc-plane{width:92vw}
.sc-text{opacity:.52}
}
@media (prefers-reduced-motion:reduce){
.sc-text{animation:none;top:30%}
.sp-seal,.sp-seal .rays{animation:none}
}
/* ロールの上に文字を置くための覆い。演出は止めず、当たる帯だけ暗くする */
.sp-hero.v7 .sp-space .veil{
background:radial-gradient(50% 56% at 50% 52%,rgba(4,6,15,.74),rgba(4,6,15,.56) 44%,rgba(4,6,15,.26) 72%,transparent 92%),
radial-gradient(70% 52% at 50% 44%,rgba(4,6,15,.46),rgba(4,6,15,.24) 60%,transparent 86%),
linear-gradient(180deg,rgba(4,6,15,.74) 0%,rgba(4,6,15,.12) 24%,rgba(4,6,15,.22) 64%,var(--s-bg) 100%)}
/* 札の中身の間合い */
.sp-seal .o{margin-top:.15em}
.sp-seal .p{margin-top:.42em}
.sp-seal .z{margin-top:.1em}
@media (max-width:640px){
/* スマホには左右の余白が無いので、中央を弱める横マスクは効かない（全面が中央）。
縦のぼかしだけにして、そのぶん濃さを落とす */
.sp-crawl{-webkit-mask-image:linear-gradient(180deg,transparent 2%,rgba(0,0,0,.3) 14%,#000 36%,#000 100%);
mask-image:linear-gradient(180deg,transparent 2%,rgba(0,0,0,.3) 14%,#000 36%,#000 100%);
-webkit-mask-composite:source-over;mask-composite:add;perspective:240px}
.sc-plane{width:94vw}
.sc-text{font-size:clamp(1.55rem,7vw,2.4rem);opacity:.3}
/* 札のぶんだけ本文が下がり、数字の帯が画面の外へ出る。札を一段小さくして戻す */
.sp-seal{width:clamp(104px,29vw,126px);margin-bottom:clamp(10px,2vh,18px)}
.sp-seal .z{font-size:clamp(27px,7.4vw,33px)}
.sp-seal .t{font-size:9px;letter-spacing:.11em}
.sp-seal .o{font-size:7.5px}
.sp-seal .p{font-size:9.5px;margin-top:.34em}
}
/* ==========================================================================
⑤ ヒーローの仕上げ（K 2026-09-28・4点）
1 見出しと副題に「置き去り」感がある → 30分だけに付いていた陰影を、周りの文字にも渡す
2 囲みが弱い／形を変える → 999px の丸は**ヒーローだけ**の上書きだった。
ページ本来の16px角丸へ戻し、縁を立てる（他の節のボタンと形が揃う）
3 札が読めない・チープ → 一回り大きくし、破線の輪と回る光条をやめ、金の輪と艶へ
4 ロールが読みづらい → 文字側に陰影が付いたぶん、覆いを薄くしてロールを上げる
========================================================================== */
/* 1. 見出し・副題 */
.sp-h1.v9 .l1{font-weight:800;color:#fff;
text-shadow:0 1px 2px rgba(2,4,10,.9),0 4px 22px rgba(2,4,10,.8),0 0 60px rgba(120,160,255,.16)}
.sp-h1.v9 .t{font-weight:700;color:rgba(255,255,255,.96);
text-shadow:0 1px 2px rgba(2,4,10,.9),0 6px 30px rgba(2,4,10,.85),0 0 70px rgba(120,160,255,.14)}
.sp-h1.v9 em{font-weight:800;
text-shadow:0 0 110px rgba(150,190,255,.46),0 0 40px rgba(120,160,255,.24),
0 2px 3px rgba(2,4,10,.9),0 26px 70px rgba(0,0,0,.6)}
.sp-lead.v7{color:rgba(255,255,255,.88);font-weight:600;
text-shadow:0 1px 2px rgba(2,4,10,.92),0 4px 20px rgba(2,4,10,.8)}
.sp-cond.v7 .c{text-shadow:0 1px 2px rgba(2,4,10,.95),0 2px 12px rgba(2,4,10,.9)}
.sp-proofn b,.sp-proofn li>span{text-shadow:0 1px 2px rgba(2,4,10,.92),0 4px 18px rgba(2,4,10,.8)}
/* 2. ボタン：ページ本来の角丸へ戻し、縁で立てる。光のにじみはやめ、影を締める */
body[data-route="start"] .sp-hero .sp-btn{border-radius:16px}
body[data-route="start"] .sp-hero .sp-btn.fire{
background:linear-gradient(180deg,#FF8163 0%,#F4553220 0%,#F45532 46%,#E04320 78%,#CB3717 100%);
background-color:#F45532;
box-shadow:inset 0 1px 0 rgba(255,255,255,.44),inset 0 0 0 1px rgba(255,158,132,.5),
inset 0 -2px 0 rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.5),0 16px 30px -14px rgba(0,0,0,.8)}
body[data-route="start"] .sp-hero .sp-btn.fire:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,180,158,.7),
inset 0 -2px 0 rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.5),0 24px 44px -16px rgba(0,0,0,.85)}
body[data-route="start"] .sp-hero .sp-btn.ghost{background:rgba(255,255,255,.07);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.32),
0 1px 2px rgba(0,0,0,.5),0 16px 34px -18px rgba(0,0,0,.95)}
body[data-route="start"] .sp-hero .sp-btn.ghost:hover{background:rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.5),
0 1px 2px rgba(0,0,0,.5),0 22px 44px -18px rgba(0,0,0,1)}
/* 矢印の間仕切りを、両側から1本の線として見せる */
body[data-route="start"] .sp-hero .sp-btn.split .arw{border-left:1px solid rgba(0,0,0,.24);
box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
body[data-route="start"] .sp-hero .sp-btn.ghost.split .arw{border-left-color:rgba(255,255,255,.26);
box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
/* 2b. 状態表示の囲み：ボタンと同じ角、はっきりした縁 */
.sp-tech.live{border-radius:14px;background:rgba(10,16,38,.5);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(146,178,255,.34),
0 14px 34px -20px rgba(0,0,0,.95)}
.sp-tech.live .sh{color:#e6efff}
/* 3. 札：一回り大きく、破線と回る光条をやめ、金の輪と艶で高級感を出す */
.sp-seal{width:clamp(148px,15.4vw,216px)}
.sp-seal .rays{inset:-9%;opacity:.13;
background:repeating-conic-gradient(from 0deg,rgba(227,194,113,.9) 0deg 2.2deg,transparent 2.2deg 11deg);
-webkit-mask-image:radial-gradient(closest-side,transparent 47%,#000 58%,transparent 88%);
mask-image:radial-gradient(closest-side,transparent 47%,#000 58%,transparent 88%);
animation:none}
.sp-seal .in{gap:0;
background:radial-gradient(112% 112% at 32% 18%,#C0242A 0%,#8E1018 44%,#520810 100%);
box-shadow:0 0 0 1px rgba(255,236,196,.5),0 0 0 6px rgba(6,5,10,.9),
0 30px 66px -26px rgba(0,0,0,1),inset 0 3px 16px rgba(255,214,160,.16),
inset 0 -10px 26px rgba(0,0,0,.4)}
/* 金の輪（回らない。金属に見せるための濃淡だけ） */
.sp-seal .in::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:0;padding:3px;
background:conic-gradient(from 210deg,#7A5A21 0deg,#E8CE92 62deg,#FFF3D2 96deg,#C9A24D 150deg,
#6E4F1C 208deg,#D9BC74 268deg,#F6E7BC 300deg,#8C6A2A 344deg,#7A5A21 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;pointer-events:none}
/* 艶：金箔が一度光る */
/* 艶：要素は動かさず、模様だけを流す。動かすと円の外へはみ出す（2026-09-28 に踏んだ） */
.sp-seal .in::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:linear-gradient(112deg,transparent 36%,rgba(255,240,214,.14) 45%,rgba(255,255,255,.3) 50%,
rgba(255,240,214,.14) 55%,transparent 64%);
background-size:300% 100%;background-repeat:no-repeat;background-position:120% 0;
animation:spSealSheen 7s cubic-bezier(.4,0,.25,1) 1.4s infinite}
@keyframes spSealSheen{0%{background-position:120% 0}34%,100%{background-position:-20% 0}}
.sp-seal .t{font-size:clamp(11px,1.02vw,14px);letter-spacing:.13em;color:#F0DAA4;margin-bottom:.62em;
text-indent:.13em;text-shadow:0 1px 1px rgba(60,4,10,.8)}
.sp-seal .o{font-size:clamp(9.5px,.86vw,12px);font-weight:700;letter-spacing:.02em;
color:rgba(255,234,214,.9);margin-top:0;text-shadow:0 1px 1px rgba(60,4,10,.8)}
.sp-seal .p{margin-top:.28em;font-size:clamp(11px,1.05vw,15px);font-weight:700;color:rgba(255,226,206,.72)}
.sp-seal .p s{text-decoration-color:#F0DAA4;text-decoration-thickness:2px}
.sp-seal .z{margin-top:.1em;font-size:clamp(40px,4.6vw,66px);color:#F7E3AE;
text-shadow:0 2px 0 rgba(82,8,16,.85),0 6px 18px rgba(30,2,6,.6)}
.sp-seal .z em{font-size:.42em}
/* 4. ロール：文字側に陰影が付いたので、覆いを薄くして、ロールを上げる */
.sp-hero.v7 .sp-space .veil{
background:radial-gradient(50% 56% at 50% 52%,rgba(4,6,15,.56),rgba(4,6,15,.4) 44%,rgba(4,6,15,.18) 72%,transparent 92%),
radial-gradient(70% 52% at 50% 44%,rgba(4,6,15,.34),rgba(4,6,15,.18) 60%,transparent 86%),
linear-gradient(180deg,rgba(4,6,15,.74) 0%,rgba(4,6,15,.12) 24%,rgba(4,6,15,.22) 64%,var(--s-bg) 100%)}
.sp-crawl{
-webkit-mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 100%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.54) 27%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.54) 73%,#000 87%,#000 100%);
mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 100%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.54) 27%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.54) 73%,#000 87%,#000 100%)}
.sc-text{opacity:.62;text-shadow:0 2px 6px rgba(2,3,8,.55)}
@media (max-width:1000px){
.sp-seal{right:clamp(12px,3.6vw,36px);top:clamp(78px,11vh,120px);width:clamp(136px,18.4vw,166px)}
.sp-seal .t{font-size:clamp(10px,1.32vw,12px)}
.sp-seal .o{font-size:clamp(8.5px,1.1vw,10px)}
.sp-seal .p{font-size:clamp(10px,1.32vw,12.5px)}
.sp-seal .z{font-size:clamp(34px,5.2vw,48px)}
}
@media (max-width:860px){
body[data-route="start"] .sp-hero .sp-btn{border-radius:15px}
}
@media (max-width:640px){
.sp-seal{width:clamp(126px,34vw,152px)}
.sp-seal .t{font-size:10.5px;letter-spacing:.11em;margin-bottom:.5em}
.sp-seal .o{font-size:9px}
.sp-seal .p{font-size:11px;margin-top:.24em}
.sp-seal .z{font-size:clamp(33px,9.2vw,40px)}
.sc-text{opacity:.46}
.sp-tech.live{border-radius:13px}
}
@media (prefers-reduced-motion:reduce){
.sp-seal .in::after{animation:none;opacity:0}
}
/* ==========================================================================
⑥ ヒーロー → カタログロール（K 2026-09-28）
・「入っているもの」はロールの後ろへ移した（消していない。理由は報告済み）
・ロールの上端を斜めに切り、欠けた側は宇宙を続ける。地はヒーローと同じ星の画
・3段すべてが見えるよう、壁の高さを上げた
========================================================================== */
/* ヒーローの下端：真っ黒で閉じず、星を残したまま次へ渡す */
.sp-hero.v7 .sp-space .veil{
background:radial-gradient(50% 56% at 50% 52%,rgba(4,6,15,.56),rgba(4,6,15,.4) 44%,rgba(4,6,15,.18) 72%,transparent 92%),
radial-gradient(70% 52% at 50% 44%,rgba(4,6,15,.34),rgba(4,6,15,.18) 60%,transparent 86%),
linear-gradient(180deg,rgba(4,6,15,.74) 0%,rgba(4,6,15,.12) 24%,rgba(4,6,15,.2) 64%,rgba(6,10,24,.56) 100%)}
/* 受け側の宇宙：ヒーローの続きとして星を流し、下へ向けて溶かす */
/* 帯の地：ヒーロー最下部の暗さ（実測 輝度7.7）から始めて、下で --s-bg へ戻す */
.sp-wallband{position:relative;overflow:hidden;
background:linear-gradient(180deg,#04060f 0,#04060f 14%,var(--s-bg) 52%)}
.sp-wallband>.sky{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
height:clamp(300px,40vw,620px);opacity:.3;
background:url(/capp/demo/space-plate.webp) 50% 72%/cover no-repeat;
/* 縦：下へ溶かす × 横：ヒーローと同じ周辺減光（左右の端が明るいと継ぎ目が線に見える） */
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 26%,rgba(0,0,0,.5) 62%,transparent 100%),
radial-gradient(118% 150% at 50% 0%,#000 42%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.3) 100%);
mask-image:linear-gradient(180deg,#000 0,#000 26%,rgba(0,0,0,.5) 62%,transparent 100%),
radial-gradient(118% 150% at 50% 0%,#000 42%,rgba(0,0,0,.62) 76%,rgba(0,0,0,.3) 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.sp-wallband>.sp-wall,.sp-wallband>.sp-wallcap{position:relative;z-index:1}
/* ロール本体：3段ぜんぶ見せる。上端は斜めに切る（角度＝マスクの傾き） */
/* 斜めは clip-path で取る。角度付きグラデーションの % は箱の対角が基準になり、
狙った位置に境目が来ない（2026-09-28 に踏んだ）。切り口の硬さは縦のぼかしで抜く */
.sp-wallband .sp-wall{height:clamp(340px,44vw,660px);--cut:clamp(56px,7.6vw,132px);
clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);
-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.34) 7%,rgba(0,0,0,.8) 15%,#000 24%,#000 86%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.34) 7%,rgba(0,0,0,.8) 15%,#000 24%,#000 86%,transparent 100%)}
.sp-wallband .sp-wall::before{top:-10%;height:52%;background:radial-gradient(closest-side,rgba(64,118,255,.3),transparent)}
.sp-wallcap{margin-top:clamp(10px,1.4vw,22px);font-size:clamp(.96rem,1.18vw,1.1rem);color:#c8d3ef}
@media (max-width:1000px){
.sp-wallband .sp-wall{height:clamp(300px,46vw,520px);--cut:clamp(44px,7vw,84px)}
}
@media (max-width:640px){
.sp-wallband>.sky{height:clamp(240px,62vw,360px);opacity:.28}
.sp-wallband .sp-wall{height:clamp(250px,72vw,380px);--cut:clamp(30px,8vw,52px)}
.sp-wallcap{margin-top:clamp(6px,1.6vw,14px);font-size:.9rem}
}
/* ロールはヒーローの下端まで届かせない。届くと、次の節のすぐ上に黄色が居残って見える
（覆いを薄くして星を次へ渡した副作用。2026-09-28） */
.sp-crawl{
-webkit-mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 84%,transparent 99%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.54) 27%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.54) 73%,#000 87%,#000 100%);
mask-image:linear-gradient(180deg,transparent 3%,rgba(0,0,0,.34) 16%,#000 40%,#000 84%,transparent 99%),
linear-gradient(90deg,#000 0%,#000 13%,rgba(0,0,0,.54) 27%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.54) 73%,#000 87%,#000 100%)}
@media (max-width:640px){
/* スマホは左右の余白が無いので中央を弱める横マスクは使わない。
代わりに、下端（ボタン・注記・数字の帯）へ届く前にロールを消す。
ここで消さないと、打消し表示の注記が黄色の上に乗る（実測：黄色み90%点 53）*/
.sp-crawl{-webkit-mask-image:linear-gradient(180deg,transparent 2%,rgba(0,0,0,.3) 14%,#000 34%,#000 56%,rgba(0,0,0,.3) 74%,transparent 86%);
mask-image:linear-gradient(180deg,transparent 2%,rgba(0,0,0,.3) 14%,#000 34%,#000 56%,rgba(0,0,0,.3) 74%,transparent 86%);
-webkit-mask-composite:source-over;mask-composite:add}
}
/* ==========================================================================
⑧ ご提供するもの（sp-val）— K 2026-09-29 最終指示
案1の構図：左＝制作（小・罫線の表）／中＝納品／右＝運用アプリ（大）。全体を1枠で囲む。
2枚のカードが 1440×900 の1画面に収まる寸法（枠の高さ ≲ 680px）。
管理画面は noren-ai.jp の部品を dz- 接頭辞で移植（build/make_dash.py）。
========================================================================== */
.sp-val{position:relative;padding:clamp(72px,8vw,116px) 0 clamp(64px,7vw,100px);background:var(--s-bg)}
.sp-val::before{content:"";position:absolute;left:50%;top:0;width:min(1200px,100% - 48px);height:1px;transform:translateX(-50%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.14) 70%,transparent)}
.vx-head{max-width:860px;margin:0 auto;text-align:center}
.sp-val .sp-h2{margin-top:12px;font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.3;letter-spacing:-.02em}
.vx-br{display:none}
.vx-lead{margin:14px auto 0;font:600 clamp(.98rem,1.12vw,1.08rem)/1.85 var(--head);letter-spacing:.02em;color:#c9d2ea}
/* 全体の枠 */
.vx-frame{margin-top:clamp(28px,3.2vw,44px);display:grid;grid-template-columns:262px 92px minmax(0,1fr);align-items:center;
padding:clamp(12px,1.2vw,16px);border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.09),0 60px 120px -70px rgba(0,0,0,1)}
.vx-tag{display:flex;align-items:center;gap:9px;margin:0;font:700 11.5px/1 var(--head);letter-spacing:.14em;color:#8d98bb}
.vx-tag span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.09);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:800 10.5px/1 "Inter",var(--head),sans-serif;letter-spacing:0;color:#fff}
.vx-make h3,.vx-app h3{margin:11px 0 0;font:800 1.38rem/1.3 var(--head);letter-spacing:-.02em;color:#fff}
.vx-ah{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px}
.vx-ah .ttl{grid-column:1/-1;display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.vx-ah h3{margin:0}
.vx-ah .vx-d{margin:0}
.vx-d,.vx-steps .t,.vx-join p,.vx-list dt{word-break:auto-phrase}
.vx-d{margin:6px 0 0;font:500 .84rem/1.75 var(--head);color:#aab4d2}
/* 左：制作（罫線の表。アイコンなし） */
.vx-make{padding:22px 22px 20px;border-radius:18px;background:rgba(6,10,24,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.vx-list{margin:16px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.vx-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.1)}
.vx-list dt{font:600 .86rem/1.4 var(--head);color:#c9d2ea}
.vx-list dd{margin:0;font:800 1.28rem/1 "Inter",var(--head),sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.vx-list dd small{font-size:.56em;font-weight:700;letter-spacing:0;color:#aab4d2;margin-left:.14em}
.vx-list dd small.pre{margin:0 .14em 0 0}
.vx-fee{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:5px 10px}
.vx-fee .k{font:700 .78rem/1 var(--head);letter-spacing:.08em;color:#8d98bb}
.vx-fee s{justify-self:end;font:600 .92rem/1 "Inter",var(--head),sans-serif;color:#7f8bad;text-decoration-color:#ff6a4d;text-decoration-thickness:2px}
.vx-fee b{font:800 2rem/1 "Inter",var(--head),sans-serif;letter-spacing:-.04em;color:#fff}
.vx-fee b small{font-size:.5em;margin-left:.08em;letter-spacing:0}
.vx-fee .n{grid-column:1/-1;justify-self:end;font:600 .72rem/1.4 var(--head);color:#8d98bb}
/* 中：納品（左カードの中央の高さで、右カードへ矢印） */
.vx-join{position:relative;display:grid;justify-items:center;align-content:center;gap:10px;padding:0 8px}
.vx-join::before{content:"";position:absolute;left:0;right:9px;top:16px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.2),#ff6a4d)}
.vx-join::after{content:"";position:absolute;right:0;top:10px;border-left:10px solid #ff6a4d;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vx-pill{position:relative;z-index:1;display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;background:#0c1329;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 10px 24px -12px rgba(0,0,0,.9);font:800 12.5px/1 var(--head);letter-spacing:.2em;text-indent:.2em;color:#fff}
.vx-join p{margin:0;font:500 10.5px/1.65 var(--head);color:#8d98bb;text-align:center}
/* 右：運用アプリ */
.vx-app{padding:18px 22px 16px;border-radius:20px;
background:radial-gradient(60% 40% at 92% 0%,rgba(108,155,255,.12),transparent 70%),rgba(255,255,255,.035);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.vx-body{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.vx-screen{display:flex;align-items:center;min-width:0}
.vx-screen .dz-stage{width:100%;perspective:none}
.vx-screen .dz-frame{border-radius:12px;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 50px -24px rgba(0,0,0,.95)}
.vx-screen .dz-frame .dz-bar{padding:6px 10px;gap:5px}
.vx-screen .dz-frame .dz-bar i{width:7px;height:7px}
.vx-screen .dz-frame .dz-bar span{margin-left:6px;padding:2px 8px;font-size:9.5px;border-radius:5px}
.dz-dash-wrap{position:relative;width:100%;height:calc(900px * var(--dzs,.28));overflow:hidden;background:#e9ecf1}
/* 改善の流れ（縦の時系列。番号と細い線だけ） */
.vx-flow{display:flex;flex-direction:column;padding:15px 16px 14px;border-radius:14px;
background:linear-gradient(180deg,rgba(76,141,255,.14),rgba(76,141,255,.05));box-shadow:inset 0 0 0 1px rgba(120,170,255,.26)}
.vx-fh{margin:0 0 12px;font:800 .9rem/1 var(--head);letter-spacing:.04em;color:#fff}
.vx-steps{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.vx-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:start}
.vx-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:28px;bottom:-8px;width:1px;
background:linear-gradient(180deg,rgba(143,176,255,.55),rgba(143,176,255,.12))}
.vx-steps .n{font:800 22px/1.05 "Inter",sans-serif;letter-spacing:-.05em;color:#cfe0ff;text-align:center;font-variant-numeric:tabular-nums}
.vx-steps b{display:block;font:800 .9rem/1.35 var(--head);letter-spacing:-.01em;color:#fff}
.vx-steps .t{display:block;margin-top:2px;font:500 .73rem/1.55 var(--head);color:#aab4d2}
.vx-steps li.hit .n{color:#ff8a6a}
.vx-steps li.hit b{color:#ffd9cd}
.vx-steps .rule{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:4px 10px 4px 8px;border-radius:999px;
background:rgba(255,106,77,.14);box-shadow:inset 0 0 0 1px rgba(255,140,110,.45);font:800 .68rem/1 var(--head);letter-spacing:.08em;color:#ffcfc2}
.vx-steps .rule::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff6a4d}
/* 機能（4ジャンル・色分け） */
.vx-gen{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vx-g{--c:#6c9bff;position:relative;display:flex;flex-direction:column;padding:12px 12px 11px;border-radius:13px;overflow:hidden;
background:rgba(6,10,24,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.vx-g::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c)}
.vx-g .h{display:flex;align-items:center;gap:9px;margin:0 0 9px;font:800 .9rem/1.2 var(--head);color:#fff}
.vx-g .h i{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;color:var(--c);
background:rgba(108,155,255,.18);background:color-mix(in srgb,var(--c) 20%,transparent)}
.vx-g .h i svg{width:15px;height:15px}
.vx-g ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vx-g li{position:relative;padding-left:10px;font:500 .72rem/1.5 var(--head);letter-spacing:0;color:#c9d2ea;word-break:auto-phrase}
.vx-g li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--c)}
.vx-g .marks{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:4px}
.vx-g .mark{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid #e3e8f0}
.vx-g .mark img{display:block;width:13px;height:13px;object-fit:contain}
.vx-g.s{--c:#6c9bff}.vx-g.w{--c:#a78bfa}.vx-g.e{--c:#34d399}.vx-g.a{--c:#f6b24a}
/* 右の下端：料金と監視 */
.vx-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vx-pay{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vx-pay b{font:800 1.28rem/1 "Inter",var(--head),sans-serif;letter-spacing:-.02em;color:#fff}
.vx-pay span{font:600 .75rem/1 var(--head);color:#8d98bb}
.vx-pay i{font-style:normal;margin-left:4px;padding:5px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:700 .7rem/1 var(--head);color:#dfe5f5}
.vx-watch{margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;background:rgba(6,10,24,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.vx-watch .dot{width:7px;height:7px;border-radius:50%;background:#3fd48a;box-shadow:0 0 0 3px rgba(63,212,138,.18);animation:vxWatch 2.4s ease-in-out infinite}
@keyframes vxWatch{0%,100%{box-shadow:0 0 0 3px rgba(63,212,138,.18)}50%{box-shadow:0 0 0 6px rgba(63,212,138,.05)}}
.vx-watch b{font:800 .76rem/1 var(--head);color:#fff;white-space:nowrap}
.vx-watch span:last-child{font:500 .7rem/1.4 var(--head);color:#9aa5c6}
/* 枠の下のCTA */
.sp-val .vx-cta{margin-top:clamp(26px,3vw,38px);gap:14px}
.sp-val .sp-btn{min-height:60px;padding:0 28px;border-radius:16px;font-size:1rem}
.sp-val .sp-btn svg{width:18px;height:18px}
.sp-val .sp-btn.fire{box-shadow:inset 0 1px 0 rgba(255,255,255,.44),inset 0 0 0 1px rgba(255,158,132,.5),inset 0 -2px 0 rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.5),0 16px 30px -14px rgba(0,0,0,.8)}
.sp-val .sp-btn.ghost{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.32)}
/* 作ったあと：AIチャットの画面 */
.sp-chatshot{margin-top:clamp(40px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,3.2vw,52px);align-items:center;text-align:left}
.sp-chatshot .k{margin:0;font:800 12px/1 var(--head);letter-spacing:.14em;color:#ff9f80}
.sp-chatshot h3{margin:12px 0 0;font:800 clamp(1.3rem,2.1vw,1.7rem)/1.45 var(--head);letter-spacing:-.02em;color:#fff}
.sp-chatshot .t{margin:12px 0 0;font:500 .95rem/1.9 var(--head);color:#b3bdda}
.sp-chatshot figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,1)}
.sp-chatshot img{display:block;width:100%;height:auto}
@media (max-width:1180px){
.vx-frame{grid-template-columns:238px 84px minmax(0,1fr)}
.vx-make{padding:20px 18px 18px}
.vx-app{padding:16px 18px 14px}
.vx-body{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.vx-gen{grid-template-columns:repeat(2,minmax(0,1fr))}
.vx-g{padding:10px 12px 9px}
.vx-g .h{margin-bottom:7px}
.vx-g li{line-height:1.42}
}
@media (max-width:980px){
.vx-frame{grid-template-columns:1fr;padding:14px;border-radius:22px}
.vx-join{padding:16px 0 14px}
.vx-join::before{left:50%;right:auto;top:0;bottom:22px;width:2px;height:auto;margin-left:-1px;background:linear-gradient(180deg,rgba(255,255,255,.2),#ff6a4d)}
.vx-join::after{right:auto;left:50%;top:auto;bottom:10px;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #ff6a4d;border-bottom:0}
.vx-join p{position:relative;z-index:1;padding:4px 10px;border-radius:8px;background:var(--s-bg);max-width:24em}
.vx-body{grid-template-columns:1fr}
.sp-chatshot{grid-template-columns:1fr}
}
@media (max-width:640px){
.vx-br{display:inline}
.vx-make,.vx-app{padding:18px 16px}
.vx-ah{grid-template-columns:1fr}
.vx-watch{justify-self:start;flex-wrap:wrap;row-gap:3px}
.vx-gen{grid-template-columns:1fr}
.vx-foot{flex-direction:column;align-items:flex-start}
.sp-val .vx-cta{flex-direction:column;align-items:stretch}
.sp-val .sp-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.vx-watch .dot{animation:none}}
/* ── noren-ai.jp の管理画面部品（build/make_dash.py で生成。手で直さない）── */
.dz-stage{--dz-ai-100:#e6edf9;--dz-ai-700:#15305f;--dz-ai-950:#050b1c;--dz-content:1200px;--dz-ease:cubic-bezier(.2,.7,.2,1);
--dz-neo:linear-gradient(145deg,#f0f3f8,#e2e6ed);--dz-neo-in:inset 4px 4px 10px rgba(160,172,192,.5),inset -4px -4px 10px rgba(255,255,255,.95);
--dz-neo-sh:5px 5px 12px rgba(160,172,192,.5),-5px -5px 12px rgba(255,255,255,.95);--dz-pad:0px;
--dz-sans:"Inter","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;--dz-white:#fff;
--dz-shadow-xl:0 40px 80px -40px rgba(0,0,0,.85),0 16px 40px -24px rgba(0,0,0,.6)}
.dz-stage{position:relative;perspective:2200px;width:min(100% - var(--dz-pad)*2,var(--dz-content));margin-inline:auto}
.dz-stage .dz-glow{position:absolute;left:10%;right:10%;bottom:-6%;height:40%;background:radial-gradient(50% 60% at 50% 100%,rgba(111,156,255,.5),transparent 70%);filter:blur(40px);pointer-events:none}
.dz-frame{position:relative;border-radius:22px;overflow:hidden;background:#e9ecf1;border:1px solid rgba(255,255,255,.16);box-shadow:var(--dz-shadow-xl);transform-origin:50% 100%;will-change:transform}
.dz-frame .dz-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f3f5f8;border-bottom:1px solid #dfe4ec}
.dz-frame .dz-bar i{width:10px;height:10px;border-radius:50%;background:#d0d7e2}
.dz-frame .dz-bar span{margin-left:10px;padding:3px 12px;border-radius:6px;background:#fff;border:1px solid #dfe4ec;color:#6f7a94;font-size:.72rem;letter-spacing:.04em;font-family:"Inter",var(--dz-sans)}
.dz-dash{position:absolute;left:0;top:0;width:1440px;height:900px;transform:scale(var(--dzs,.833));transform-origin:0 0;font-family:"Inter","Noto Sans JP","Hiragino Sans",sans-serif;color:#1c2a4a;background:linear-gradient(160deg,#eceff4,#e3e7ee);display:grid;grid-template-columns:300px minmax(0,1fr);font-feature-settings:"palt" 1,"tnum" 1;-webkit-font-smoothing:antialiased;line-height:1.5;text-align:left}
.dz-dash *{box-sizing:border-box}
.dz-dash .dz-side{padding:24px 18px 18px;display:flex;flex-direction:column;gap:10px}
.dz-dash .dz-brand2{display:flex;align-items:center;gap:12px;padding:6px 6px 16px}
.dz-dash .dz-badge{width:52px;height:52px;border-radius:50%;background:var(--dz-neo);box-shadow:var(--dz-neo-sh);display:grid;place-items:center}
.dz-dash .dz-badge img{width:34px;height:34px}
.dz-dash .dz-brand2 b{font-size:14px}
.dz-dash .dz-brand2 small{display:block;font-size:11px;font-weight:600;color:#4a5670;margin-top:2px}
.dz-dash nav a{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:12px;background:var(--dz-neo);box-shadow:var(--dz-neo-sh);color:#4a5670;font-size:12.5px;font-weight:600;text-decoration:none;margin-bottom:9px}
.dz-dash nav a small{display:block;font-size:10.5px;font-weight:700;color:#1c2a4a;margin-top:3px}
.dz-dash nav a i{width:16px;height:16px;border:1.6px solid currentColor;border-radius:4px;margin-top:2px;opacity:.7}
.dz-dash nav a.dz-on{color:#1d3f7f;box-shadow:var(--dz-neo-in);background:linear-gradient(145deg,#e4e8ef,#eef1f6)}
.dz-dash nav a.dz-on::after{content:"";position:absolute;right:12px;top:14px;width:4px;height:16px;border-radius:2px;background:#1d3f7f}
.dz-dash .dz-site{margin-top:auto;padding:12px 14px;border-radius:12px;background:var(--dz-neo);box-shadow:var(--dz-neo-sh);font-size:12px;font-weight:700}
.dz-dash .dz-main{padding:28px 36px 0 24px;overflow:hidden}
.dz-dash .dz-sec{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.dz-dash .dz-sec .dz-n{width:24px;height:24px;border-radius:50%;background:#0f2148;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;transform:translateY(3px)}
.dz-dash .dz-sec h3{font-size:17px;font-weight:700;margin:0}
.dz-dash .dz-sec span{font-size:12px;color:#4a5670}
.dz-dash .dz-panel{border-radius:18px;background:var(--dz-neo);box-shadow:9px 9px 20px rgba(160,172,192,.55),-9px -9px 20px rgba(255,255,255,.95);padding:18px 20px}
.dz-dash .dz-tile{border-radius:14px;background:var(--dz-neo);box-shadow:var(--dz-neo-sh);padding:16px 18px}
.dz-dash .dz-tile.dz-hi{box-shadow:var(--dz-neo-sh),inset 0 0 0 1.5px #1d3f7f}
.dz-dash .dz-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dz-dash .dz-kpi b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#1c2a4a;font-variant-numeric:tabular-nums}
.dz-dash .dz-kpi b small{font-size:13px;font-weight:700;margin-left:4px;color:#4a5670;letter-spacing:0}
.dz-dash .dz-kpi .dz-l{margin-top:8px;font-size:11.5px;color:#4a5670}
.dz-dash .dz-kpi .dz-s{margin-top:4px;font-size:11.5px;font-weight:700;color:#1c2a4a}
.dz-dash .dz-kpi .dz-s.dz-up{color:#1f8f5f}
.dz-dash .dz-eval{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center}
.dz-dash .dz-ring{position:relative;width:170px;height:170px;border-radius:50%;background:var(--dz-neo);box-shadow:9px 9px 20px rgba(160,172,192,.55),-9px -9px 20px rgba(255,255,255,.95);display:grid;place-items:center}
.dz-dash .dz-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dz-dash .dz-ring .dz-in{width:132px;height:132px;border-radius:50%;box-shadow:var(--dz-neo-in);display:grid;place-content:center;text-align:center}
.dz-dash .dz-ring .dz-in b{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#1c2a4a;font-variant-numeric:tabular-nums}
.dz-dash .dz-ring .dz-in small{font-size:10px;font-weight:700;color:#4a5670;letter-spacing:.06em}
.dz-dash .dz-verdict{text-align:center;margin-top:12px;font-size:20px;font-weight:800;color:#1c2a4a}
.dz-dash .dz-axes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.dz-dash .dz-axis{border-radius:14px;background:var(--dz-neo);box-shadow:var(--dz-neo-sh);padding:14px 14px 12px}
.dz-dash .dz-axis .dz-v{display:flex;align-items:baseline;gap:8px}
.dz-dash .dz-axis .dz-v b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.dz-dash .dz-axis .dz-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#e9edf3;box-shadow:var(--dz-neo-in);color:#4a5670}
.dz-dash .dz-axis .dz-bar{height:5px;border-radius:3px;background:#d7dde7;box-shadow:var(--dz-neo-in);margin:10px 0 8px;overflow:hidden}
.dz-dash .dz-axis .dz-bar i{display:block;height:100%;border-radius:3px;width:0;background:linear-gradient(90deg,#1d3f7f,#4b78cc)}
.dz-dash .dz-axis .dz-bar i.dz-warn{background:linear-gradient(90deg,#c4573f,#e8846c)}
.dz-dash .dz-axis .dz-l{font-size:11px;font-weight:700;color:#1c2a4a}
.dz-dash .dz-axis .dz-st{font-size:10.5px;font-weight:700;margin-top:4px;color:#1f8f5f}
.dz-dash .dz-axis .dz-st.dz-warn{color:#c4573f}
.dz-dash .dz-bars{display:grid;gap:12px;margin-top:12px}
.dz-dash .dz-bars div{display:grid;grid-template-columns:200px minmax(0,1fr) 80px;align-items:center;gap:12px;font-size:12px;color:#4a5670}
.dz-dash .dz-bars .dz-b{height:12px;border-radius:6px;background:#d7dde7;box-shadow:var(--dz-neo-in);overflow:hidden}
.dz-dash .dz-bars .dz-b i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#0f2148,#1d3f7f);width:0}
.dz-dash .dz-bars strong{text-align:right;color:#1c2a4a;font-size:12.5px}
.dz-dash .dz-bars strong em{display:block;font-style:normal;font-weight:500;color:#7c8699;font-size:10.5px}
/* ==========================================================================
⑨ ヒーロー A案・白いヘッダー・キャンペーンの札（K 2026-09-29 採用）
・並び：左の1列に「見出し→説明→一行の告知→ボタン→注記→数字」、右に宇宙のロールと札
・ヘッダー：白地・紺のロゴ・文字だけのメニュー（カプセル形は使わない）・右端に「はじめる」を常に出す
・札：切り取り線と切り欠きのある券。文字は水平。白地は磁器のような透明感、光が一度横切る
・ヘッダーとヒーローは同じ幅（--va-w）に揃え、ロゴの左端＝見出しの左端、「はじめる」の右端＝札の右端
========================================================================== */
:root{--va-w:min(100% - 128px,1280px);--va-navy:#071E49;--va-fire:#E8492C;--va-red:#C8261B}
/* ---------- ヘッダー ---------- */
.sp-nav.v10,.sp-nav.v10.solid{background:#fff;border-bottom:1px solid #e4e7ed;
box-shadow:0 14px 34px -28px rgba(7,30,73,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
.sp-nav.v10 .sp-nav-in{width:var(--va-w);height:76px}
.sp-nav.v10 .sp-brand b{color:var(--va-navy)}
.sp-nav.v10 .sp-brand span{color:#5a6376;border-left-color:#dde1e8}
.sp-nav.v10 .sp-nav-menu{margin:0 0 0 auto;padding:0;gap:0;border-radius:0;background:none;border:0;box-shadow:none;
-webkit-backdrop-filter:none;backdrop-filter:none}
.sp-nav.v10 .sp-nav-menu::before,.sp-nav.v10 .sp-nav-menu::after{display:none}
.sp-nav.v10 .sp-nav-menu a{position:relative;display:flex;align-items:center;height:76px;padding:0 17px;border-radius:0;
background:none;color:#1b2434;font:600 14px/1 var(--head);letter-spacing:.06em;transition:color .2s}
.sp-nav.v10 .sp-nav-menu a::after{content:"";position:absolute;left:17px;right:17px;bottom:-1px;height:2px;background:var(--va-navy);
transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease)}
.sp-nav.v10 .sp-nav-menu a:hover{color:var(--va-navy);background:none}
.sp-nav.v10 .sp-nav-menu a:hover::after,.sp-nav.v10 .sp-nav-menu a:focus-visible::after{transform:scaleX(1)}
.sp-nav.v10 .sp-nav-menu a:focus-visible{outline:none;color:var(--va-navy)}
.sp-nav.v10 .sp-nav-act{margin-left:20px;padding-left:24px;border-left:1px solid #e4e7ed;gap:12px}
/* 「はじめる」：最初の画面から常に出す（大企業のヘッダーの作法。ボタンの角は4px） */
.sp-nav.v10 .sp-btn,.sp-nav.v10.cta .sp-btn{opacity:1;transform:none;pointer-events:auto}
.sp-nav.v10 .sp-btn.xs{min-height:46px;padding:0 24px;border-radius:4px;background:var(--va-fire);box-shadow:none;
font:700 14px/1 var(--head);letter-spacing:.08em;color:#fff}
.sp-nav.v10 .sp-btn.xs::before,.sp-nav.v10 .sp-btn.xs::after{display:none}
.sp-nav.v10 .sp-btn.xs:hover{background:#CC3A1E;transform:none;box-shadow:none}
.sp-nav.v10 .sp-btn.xs:focus-visible{outline:2px solid var(--va-navy);outline-offset:2px}
.sp-nav.v10 .sp-navbtn{height:46px;border-radius:4px;background:#fff;color:var(--va-navy);box-shadow:inset 0 0 0 1px #cdd3dd}
.sp-nav.v10 .sp-navbtn:hover{background:#f4f6f9;color:var(--va-navy);box-shadow:inset 0 0 0 1px #aeb7c6;transform:none}
.sp-nav.v10 .sp-navbtn i{color:#7a8396}
@media (max-width:1180px){.sp-nav.v10 .sp-nav-menu a{padding:0 12px;font-size:13.5px}
.sp-nav.v10 .sp-nav-menu a::after{left:12px;right:12px}}
@media (max-width:1040px){.sp-nav.v10 .sp-brand span{display:none}}
@media (max-width:940px){.sp-nav.v10 .sp-nav-act{margin-left:auto;padding-left:0;border-left:0}}
@media (max-width:760px){
:root{--va-w:calc(100% - 40px)}
.sp-nav.v10 .sp-nav-in{width:calc(100% - 32px);height:60px}
.sp-nav.v10 .sp-brand b{font-size:18px}
.sp-nav .sp-btn,.sp-nav.v10 .sp-btn{display:inline-flex}
.sp-nav.v10 .sp-nav-act{margin-left:auto;padding-left:0;border-left:0;gap:8px}
.sp-nav.v10 .sp-btn.xs{min-height:40px;padding:0 16px;font-size:13px;letter-spacing:.06em}
.sp-nav.v10 .sp-navbtn{height:40px}
}
/* ---------- ヒーロー（A案） ---------- */
.sp-hero.v7.va{justify-content:center;align-items:stretch;
padding:calc(76px + clamp(28px,4.4vh,52px)) 0 clamp(72px,9vh,104px)}
.sp-hero.v7.va .sp-hero-in{width:var(--va-w);margin:0 auto;text-align:left;
display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);column-gap:48px;align-items:start}
.sp-hero.v7.va .sp-hero-in>*{grid-column:1;margin-left:0;margin-right:0}
/* 見出し */
.sp-hero.v7.va .sp-h1.v9{margin-top:0;align-items:flex-start;text-align:left}
.sp-hero.v7.va .sp-h1.v9 .l2{justify-content:flex-start}
/* 間隔：見出し→説明 32／説明→告知 30／告知→ボタン 36／ボタン→注記 18／注記→数字 34 */
.sp-hero.v7.va .sp-lead.v7{margin-top:clamp(24px,2.3vw,32px);max-width:36em;text-align:left}
.sp-hero.v7.va .sp-tech.live{margin-top:clamp(22px,2.1vw,30px);border-radius:6px;justify-self:start}
.sp-hero.v7.va .sp-tech.live::before{border-radius:6px}
.sp-hero.v7.va .sp-cta{margin-top:clamp(26px,2.5vw,36px);justify-content:flex-start}
.sp-hero.v7.va .sp-cond.v7{margin-top:18px;max-width:600px;text-align:left}
.sp-hero.v7.va .sp-cond.v7 .c{margin:0;max-width:none}
.sp-hero.v7.va .sp-proofn{margin-top:clamp(26px,2.4vw,34px);justify-content:flex-start}
.sp-hero.v7.va .sp-proofn li:first-child{padding-left:0}
/* 右の列：札は数字の帯の下端に揃える */
.sp-hero.v7.va .sp-tk{grid-column:2;grid-row:1 / span 6;align-self:end;justify-self:end}
/* ロールは右の列だけに流す。下（札の手前）で消す */
.sp-hero.va .sp-crawl{left:calc((100% - var(--va-w)) / 2 + 660px + 12px);right:max(0px,calc((100% - var(--va-w)) / 2 - 90px));
-webkit-mask-image:linear-gradient(180deg,transparent 6%,rgba(0,0,0,.5) 18%,#000 32%,#000 48%,rgba(0,0,0,.22) 57%,transparent 62%);
mask-image:linear-gradient(180deg,transparent 6%,rgba(0,0,0,.5) 18%,#000 32%,#000 48%,rgba(0,0,0,.22) 57%,transparent 62%);
-webkit-mask-composite:source-over;mask-composite:add}
.sp-hero.va .sc-plane{width:min(700px,100%)}
.sp-hero.va .sc-text{opacity:.86;font-size:clamp(1.3rem,2.7vw,2.7rem)}
.sp-hero.v7.va .sp-space .veil{background:
linear-gradient(90deg,rgba(4,6,15,.88) 0%,rgba(4,6,15,.74) 36%,rgba(4,6,15,.22) 60%,rgba(4,6,15,.04) 100%),
linear-gradient(180deg,rgba(4,6,15,.18) 0%,transparent 24%,transparent 74%,var(--s-bg) 100%)}
/* ---------- キャンペーンの札 ---------- */
.sp-tk{position:relative;z-index:1;margin:0;display:block}
/* 札の影と光はボタンの下に敷く（上に重なるとボタンが暗く見える・2026-09-29 実測） */
.sp-hero.v7.va .sp-cta{position:relative;z-index:2}
.sp-tk .tk-glow{position:absolute;inset:-38px -44px -44px;z-index:0;pointer-events:none;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,112,92,.34),rgba(255,112,92,.12) 56%,transparent 100%)}
.sp-tk .tk-body{position:relative;z-index:1;display:block;
filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 20px rgba(255,236,230,.2))
drop-shadow(0 28px 48px rgba(0,0,0,.55)) drop-shadow(0 3px 9px rgba(0,0,0,.32))}
.sp-tk .tk{--stub:64px;--nr:10px;position:relative;display:flex;align-items:stretch;min-height:156px;border-radius:12px;overflow:hidden;
background:linear-gradient(160deg,#ffffff 0%,#fafbfe 38%,#f1f4fa 72%,#e8edf5 100%);
-webkit-mask:radial-gradient(circle at var(--stub) 0,#0000 var(--nr),#000 calc(var(--nr) + .5px)) top/100% 51% no-repeat,
radial-gradient(circle at var(--stub) 100%,#0000 var(--nr),#000 calc(var(--nr) + .5px)) bottom/100% 51% no-repeat;
mask:radial-gradient(circle at var(--stub) 0,#0000 var(--nr),#000 calc(var(--nr) + .5px)) top/100% 51% no-repeat,
radial-gradient(circle at var(--stub) 100%,#0000 var(--nr),#000 calc(var(--nr) + .5px)) bottom/100% 51% no-repeat}
/* 縁の光（上は白く、下はわずかに締める）で、紙ではなく磁器のような澄んだ面にする */
.sp-tk .tk::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -1px 0 rgba(7,30,73,.08)}
/* 光が一度横切る（読み込みの1.4秒後、以後は6.5秒に一度。動きを減らす設定では出さない） */
.sp-tk .tk::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-48%;width:40%;z-index:3;pointer-events:none;
background:linear-gradient(90deg,rgba(196,214,255,0) 0%,rgba(196,214,255,.3) 30%,rgba(236,243,255,.52) 45%,rgba(255,255,255,.74) 50%,rgba(236,243,255,.52) 55%,rgba(196,214,255,.3) 70%,rgba(196,214,255,0) 100%);
transform:translateX(0) skewX(-18deg);animation:tkShine 6.5s cubic-bezier(.45,.05,.25,1) 1.4s infinite}
@keyframes tkShine{0%{transform:translateX(0) skewX(-18deg)}22%,100%{transform:translateX(400%) skewX(-18deg)}}
.sp-tk .tk-stub{position:relative;flex:0 0 var(--stub);display:grid;place-items:center;
background:radial-gradient(120% 64% at 24% 0%,rgba(255,255,255,.46),rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 64%),
linear-gradient(180deg,#E83A2C 0%,#C4241A 56%,#9A150E 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 16px rgba(80,6,2,.22)}
.sp-tk .tk-stub::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.3);border-radius:6px}
.sp-tk .tk-v{writing-mode:vertical-rl;font:700 15px/1 var(--head);letter-spacing:.34em;color:#fff;padding-top:.3em;
text-shadow:0 1px 1px rgba(90,8,4,.35)}
.sp-tk .tk-main{display:flex;flex-direction:column;justify-content:center;padding:18px 30px 17px 26px;border-left:2px dashed #e6d2cf}
.sp-tk .tk-o{font:700 15px/1.2 var(--head);letter-spacing:.08em;color:#1b2434}
.sp-tk .tk-pr{display:flex;align-items:center;gap:14px;margin-top:4px}
.sp-tk .tk-old{font:600 19px/1 "Inter",var(--head),sans-serif;color:#8a92a2;white-space:nowrap}
.sp-tk .tk-old s{text-decoration-thickness:2px;text-decoration-color:#8a92a2}
.sp-tk .tk-old small{font-size:.72em;margin-left:.08em}
.sp-tk .tk-ar{position:relative;display:block;width:26px;height:2px;background:#b9bfca}
.sp-tk .tk-ar::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:2px solid #b9bfca;border-right:2px solid #b9bfca;
transform:translate(0,-50%) rotate(45deg)}
.sp-tk .tk-z{font:600 76px/.92 "Inter",var(--head),sans-serif;letter-spacing:-.03em;color:var(--va-red);white-space:nowrap;
background:linear-gradient(180deg,#EE4332 0%,#CF281C 55%,#A8190F 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 8px 18px rgba(200,38,27,.18))}
.sp-tk .tk-z em{font-style:normal;font:800 25px/1 var(--head);letter-spacing:0;margin-left:.1em}
.sp-tk .tk-c{margin-top:9px;padding-top:9px;border-top:1px solid #e8ebf0;font:600 13px/1.45 var(--head);letter-spacing:.03em;color:#3f4859}
.sp-tk .tk-c b{color:var(--va-red);font-weight:700}
@media (prefers-reduced-motion:reduce){.sp-tk .tk::after{animation:none;display:none}}
/* ---------- 1列にするとき（タブレット・スマホ） ---------- */
@media (max-width:1179px){
.sp-hero.v7.va .sp-hero-in{grid-template-columns:minmax(0,1fr)}
.sp-hero.v7.va .sp-hero-in>*{max-width:680px}
.sp-hero.v7.va .sp-tk{grid-column:1;grid-row:auto;align-self:start;justify-self:start;margin-top:clamp(26px,3vw,32px);width:min(100%,460px)}
.sp-hero.v7.va .sp-tk+.sp-cta{margin-top:clamp(22px,2.6vw,28px)}
.sp-hero.va .sp-crawl{left:0;right:0;opacity:.32}
.sp-hero.v7.va .sp-space .veil{background:linear-gradient(180deg,rgba(4,6,15,.55) 0%,rgba(4,6,15,.7) 40%,rgba(4,6,15,.82) 80%,var(--s-bg) 100%)}
}
@media (max-width:760px){
.sp-hero.v7.va{padding:calc(60px + 30px) 0 48px}
.sp-hero.v7.va .sp-hero-in{width:calc(100% - 40px)}
.sp-hero.v7.va .sp-tk{width:100%}
.sp-tk .tk-glow{inset:-18px -12px -22px}
.sp-tk .tk-body{filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,236,230,.16))
drop-shadow(0 14px 24px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.sp-tk .tk{--stub:52px;--nr:8px;min-height:128px;border-radius:10px}
.sp-tk .tk-v{font-size:13px;letter-spacing:.28em}
.sp-tk .tk-main{padding:14px 18px 13px 18px}
.sp-tk .tk-o{font-size:13.5px}
.sp-tk .tk-old{font-size:16px}
.sp-tk .tk-z{font-size:60px}
.sp-tk .tk-z em{font-size:20px}
.sp-tk .tk-c{font-size:12px;margin-top:7px;padding-top:7px}
}
/* ==========================================================================
⑩ 星空を2つの節の後ろに通す・右端の欠け・左の切れ目・札の見切れ・ロールの大きさ（K 2026-09-29）
・以前の静止画は、共通の img{max-width:100%} に幅を削られ、右の約8%に届いていなかった（実測 右端1325px）
・星空はヒーローとカタログの帯の後ろに1枚で敷く（#sp-sky2）。2枚目の画像は上下を反転して継ぎ目を鏡合わせにする
・左を暗くする覆いと周辺減光は、ヒーローの下端で消す（下端で急に途切れると、左側に切れ目が出る）
・高さの低い画面でも、札と数字まで1画面に収める（見出しと間隔を画面の高さでも縮める）
========================================================================== */
body[data-route="start"] .main{position:relative}
.sp-sky2{position:absolute;left:0;right:0;top:0;height:100vh;z-index:0;overflow:hidden;pointer-events:none;background:#04060f;
--zoom:1;--warp:0;--sparks:0;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 380px),transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 380px),transparent 100%)}
/* ★クラス名は .in にしない（app.css の入力欄 .in{width:100%;background:#fff;padding…} が当たり、右端に白い筋が出た） */
.sp-sky2 .sk-in{position:absolute;left:-4%;right:-4%;top:0;height:calc(var(--hh,100vh) * 3);
transform:scale(var(--zoom));transform-origin:50% calc(var(--hh,100vh) * .46);will-change:transform;
filter:blur(calc(var(--warp) * 2.2px)) saturate(.94)}
.sp-sky2 .plate{display:block;width:100%;max-width:none;height:var(--hh,100vh);object-fit:cover}
.sp-sky2 .plate.flip{transform:scaleY(-1)}
.sp-sky2>canvas{position:absolute;left:0;top:0;width:100%;height:100%;opacity:var(--sparks)}
.sp-sky2.still>canvas{opacity:0}
.sp-hero.v7 .sp-space{background:transparent}
/* カタログの帯：上は星空を透かし、下で地の色へ戻す（帯の中の別の星空は使わない） */
.sp-wallband{background:linear-gradient(180deg,transparent 0,transparent 46%,var(--s-bg) 94%)}
.sp-wallband>.sky{display:none}
/* ヒーローの下端では、覆いと周辺減光を消して、そのまま帯の星空へつなぐ */
.sp-hero.v7.va::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%)}
.sp-hero.v7.va .sp-space .veil{
background:linear-gradient(90deg,rgba(4,6,15,.72) 0%,rgba(4,6,15,.58) 34%,rgba(4,6,15,.16) 60%,rgba(4,6,15,.02) 100%),
linear-gradient(180deg,rgba(4,6,15,.22) 0%,transparent 22%);
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%)}
/* 見出しの文字は、星の上でも読めるよう影を足す（覆いを薄くした分） */
.sp-hero.v7.va .sp-h1.v9,.sp-hero.v7.va .sp-lead.v7,.sp-hero.v7.va .sp-proofn{text-shadow:0 2px 14px rgba(2,4,12,.72),0 1px 2px rgba(2,4,12,.9)}
/* ロール：字を大きく（ロールの幅に対して決める）。はっきり見える帯を少し下まで広げる */
.sp-hero.va .sp-crawl{container-type:inline-size;
-webkit-mask-image:linear-gradient(180deg,transparent 5%,rgba(0,0,0,.55) 14%,#000 24%,#000 58%,rgba(0,0,0,.25) 64%,transparent 68%);
mask-image:linear-gradient(180deg,transparent 5%,rgba(0,0,0,.55) 14%,#000 24%,#000 58%,rgba(0,0,0,.25) 64%,transparent 68%)}
.sp-hero.va .sc-plane{width:100%}
/* 見える帯（高さの24〜58%）では、奥行きで字が 0.4〜0.65 倍に縮む。帯の中で読める大きさになるよう、元の字を大きく取る
（いちばん長い13字の行が、帯の下端で幅いっぱいに収まる大きさ＝ロールの幅の11%） */
.sp-hero.va .sc-text{font-size:clamp(1.7rem,10cqi,4.6rem);opacity:.92}
/* 1列（タブレット・スマホ）ではロールが本文の後ろを通るので、薄く・小さくして文字の邪魔をしない */
@media (max-width:1179px){.sp-hero.va .sp-crawl{opacity:.14}.sp-hero.va .sc-text{font-size:clamp(1.3rem,7.5cqi,3rem)}}
/* 高さの低い画面（ノートPC）でも、札と数字まで最初の画面に収める */
@media (min-width:761px){
.sp-hero.v7.va{padding:calc(76px + clamp(14px,4.2vh,52px)) 0 clamp(36px,8vh,104px)}
.sp-hero.v7.va .sp-h1.v9 .l1{font-size:clamp(1.02rem,min(2.32vw,4.1vh),2.15rem)}
.sp-hero.v7.va .sp-h1.v9 em{font-size:clamp(3.2rem,min(9.6vw,16.2vh),8.6rem)}
.sp-hero.v7.va .sp-h1.v9 .t{font-size:clamp(1.25rem,min(3.6vw,6.1vh),3.25rem)}
.sp-hero.v7.va .sp-lead.v7{margin-top:clamp(16px,min(2.3vw,3.6vh),32px)}
.sp-hero.v7.va .sp-tech.live{margin-top:clamp(14px,min(2.1vw,3.4vh),30px)}
.sp-hero.v7.va .sp-cta{margin-top:clamp(18px,min(2.5vw,4vh),36px)}
.sp-hero.v7.va .sp-cond.v7{margin-top:clamp(10px,2vh,18px)}
.sp-hero.v7.va .sp-proofn{margin-top:clamp(16px,min(2.4vw,3.8vh),34px)}
}
@media (min-width:761px) and (max-height:720px){
body[data-route="start"] .sp-hero.v7.va .sp-btn.lg{min-height:56px}
.sp-hero.v7.va .sp-lead.v7{line-height:1.8}
.sp-hero.v7.va .sp-tech.live{padding-top:8px;padding-bottom:8px}
}
@media (max-width:1179px){
.sp-hero.v7.va .sp-space .veil{background:linear-gradient(180deg,rgba(4,6,15,.5) 0%,rgba(4,6,15,.62) 40%,rgba(4,6,15,.62) 100%)}
}
/* ==========================================================================
⑪ ご提供するもの：運用アプリの見出し・改善サイクル・ライティング（K 2026-09-29）
・説明文は「ー暖簾AIー」（K の文字のまま）
・「改善の流れ」→「集客力がずっと進化しつづけていく改善サイクル」。3段にして、03 から 01 へ戻る線で循環を見せる
・ライティングは例を1つの箱にまとめ、回数は箱の右下。4枚のうちライティングだけ少し幅を取る
・月額以降の金額・契約の文言は外した
========================================================================== */
.vx-ah .ttl{align-items:center}
.vx-brand{margin:0;font:700 clamp(.9rem,1.05vw,1.02rem)/1 var(--head);letter-spacing:.12em;color:#c7d4f4}
.vx-flow{position:relative}
.vx-fh{font-size:.88rem;letter-spacing:.02em;line-height:1.4;padding-right:30px}
.vx-loop{position:absolute;top:13px;right:14px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
color:#9fc0ff;box-shadow:inset 0 0 0 1px rgba(159,192,255,.35);background:rgba(90,130,255,.1)}
.vx-loop svg{width:13px;height:13px}
/* 3段：番号の左に「03 から 01 へ戻る」細い線（上の端に矢印）。段どうしの縦線はそのまま */
.vx-steps.cyc{position:relative;padding-left:16px;justify-content:space-around}
.vx-steps.cyc::before{content:"";position:absolute;left:2px;top:12px;bottom:14px;width:10px;
border:1.5px dashed rgba(159,192,255,.45);border-right:0;border-radius:10px 0 0 10px}
.vx-steps.cyc::after{content:"";position:absolute;left:8px;top:8px;width:7px;height:7px;
border-top:1.5px solid rgba(159,192,255,.8);border-right:1.5px solid rgba(159,192,255,.8);transform:rotate(45deg)}
.vx-steps.cyc b{font-size:.92rem}
.vx-steps.cyc .t{font-size:.74rem;line-height:1.6}
/* ライティング */
.vx-gen{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ライティングの長い文は、句のまとまり（.nw）の間でだけ改行させる */
.vx-g .nw,.vx-fh .nw{display:inline-block}
.vx-g .lead{margin:0 0 8px;font:600 .74rem/1.55 var(--head);color:#e4e9f8;word-break:auto-phrase}
.vx-g .ex{padding:8px 10px 7px;border-radius:9px;background:rgba(167,139,250,.08);box-shadow:inset 0 0 0 1px rgba(167,139,250,.24)}
.vx-g .ex-h{margin:0 0 5px;font:700 .66rem/1 var(--head);letter-spacing:.04em;color:#bca9ff}
.vx-g .ex ul{gap:3px}
.vx-g .ex li{font-size:.71rem}
.vx-g .qt{margin:5px 0 0;text-align:right;font:800 .74rem/1 var(--head);letter-spacing:.04em;color:#d3c5ff}
@media (max-width:1100px){.vx-gen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vx-gen{grid-template-columns:1fr}}
/* ==========================================================================
⑫ K 2026-09-29 夜：ロールの中央揃え・札のラベルの欠け・4つの枠の余白と文字・動画の見出し
========================================================================== */
/* ロール：流れる範囲を右の列の中心に合わせる（左右対称）。行末の句読点は半字ぶん詰めて中心を合わせる */
@media (min-width:1180px){
/* 左端＝左の列の右端、右端はそこから右の列の中心を軸に折り返した位置（左右対称） */
.sp-hero.va .sp-crawl{left:calc((100% - var(--va-w)) / 2 + 660px);right:max(0px,calc((100% - var(--va-w)) / 2 - 48px))}
}
.sc-text .pn{margin-right:-.5em}
/* ロールの行は長さが不ぞろい（K 2026-09-29 夜）。ロールの幅より長い行も左右均等にはみ出させて中央に置く
（block の text-align:center は、幅を超えた行を左端から並べてしまう） */
.sc-text{display:flex;flex-direction:column;align-items:center}
.sc-text .gap{flex:none}
/* 札：赤いラベルの右側の半円の切り欠きは「欠け」に見えるのでやめる（切り取り線だけ残す） */
.sp-tk .tk{-webkit-mask:none;mask:none}
/* 4つの枠：形（横4列・枠の大きさ・アイコン・色）はそのまま。文字を大きくし、枠の中の配置だけを直す（K 2026-09-29 夜）。
項目はひとまとまりにして枠の中で上下の余白をそろえ、上に詰めて下が空く形にしない。句の切れ目（.nw）でだけ改行する */
.vx-g{padding:14px 12px 13px}
.vx-g .h{margin:0 0 10px;font-size:.95rem}
.vx-g>ul{flex:1;display:flex;flex-direction:column;justify-content:center;gap:11px}
.vx-g li{padding-left:12px;font-size:.82rem;line-height:1.55}
.vx-g li::before{top:.62em}
.vx-g .nw{display:inline-block}
/* 検索対策の Google・AI の印は、枠の横幅いっぱいに5等分で並べる */
.vx-g .marks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:auto;padding-top:10px}
.vx-g .mark{width:auto;height:30px;border-radius:8px}
.vx-g .mark img{width:16px;height:16px}
/* ライティング */
.vx-g .lead{font-size:.82rem}
.vx-g .ex{flex:1;display:flex;flex-direction:column;padding:8px 6px 7px 9px}
.vx-g .ex-h{margin:0 0 4px;font-size:.72rem}
.vx-g .ex ul{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px}
/* 例の3つは本文より一段小さく（枠の見出し → 説明 → 例 の順）。1例が2行までに収まる大きさ。1440×790 のノートPCでも節が1画面に収まる */
.vx-g .ex li{padding-left:11px;font-size:.76rem;line-height:1.5}
.vx-g .qt{margin-top:4px;font-size:.8rem}
@media (max-width:640px){.vx-g{padding:16px}}
/* 動画「ホームページ制作の流れ」：見出しは「作ったあとは、SNS感覚で育てる。」と同じ組み方 */
.sp-intro .sp-head{margin-bottom:clamp(22px,2.8vw,36px)}
/* ==========================================================================
⑬ K 2026-09-30：札の右端の見切れ（Safari）・札を右の空間の中央へ・ヒーローとカタログの帯の境目をなくす
========================================================================== */
/* 札の右端が切れる（Safari）：赤い帯は flex:0 0 64px だけだと、Safari は札の幅を縦書きの字の幅（15px）で見積もり、
札が49px狭くなって「0円」「同時申込で」が枠の外に出ていた（Chrome は64pxで見積もるので再現しない）。幅でも指定する */
.sp-tk .tk-stub{width:var(--stub)}
@media (min-width:1180px){
/* 札は右の列の中央＝黄色いロールと同じ中央線（1440 で x=1074。「完成予想図を見る」の右端〜画面の右端の中央 1079.5 とほぼ同じ） */
.sp-hero.v7.va .sp-tk{justify-self:center}
/* 境目をなくす：カタログの帯を上へ引き上げ、最初の画面の下にカタログの先端をのぞかせる。
引き上げ幅は画面の高さに合わせる（1440×790 で208px＝1段目の上端が数字の帯の右端に触れる高さ）。
札・数字はカタログより上に重ねる（ヒーロー全体を帯より上の層に。ヒーローの暗い覆いは下端で消してあるので絵は暗くならない） */
.sp-hero.v7.va{z-index:2}
.sp-wallband{margin-top:calc(-1 * clamp(160px,26.3vh,320px))}
}
/* 1段目を上まで全部見せる：斜めの切り取りをやめ、上の溶かしは1段目より上の空いた所（高さの4%）だけで行う。
段を下へ送った分だけ帯を高くする。最下段は下で少し溶かす（K「最下段だけやや削ってよい」） */
.sp-wallband .sp-wall{clip-path:none;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 86%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 86%,transparent 100%)}
.sp-wallband .sp-wall-in{transform:translateX(-50%) rotateX(38deg) rotateZ(-7deg) translateY(24%)}
@media (min-width:1001px){.sp-wallband .sp-wall{height:clamp(430px,55.5vw,860px)}}
@media (max-width:1000px){.sp-wallband .sp-wall{height:clamp(380px,58vw,660px)}}
@media (max-width:640px){.sp-wallband .sp-wall{height:clamp(290px,84vw,445px)}}
/* ==========================================================================
⑭ K 2026-09-30：ヒーローをミニマル（見た目D）に。告知とボタンは宇宙グラス（見た目F）
・説明文「頭の中の…」と一行「最新のネット集客を…」は左から外し、黄色いロールの続きとして流す（start.js の CRAWL）
・「30」と「分」の大きさと字形をそろえ、「30分」の下の朱の線をやめる。見出しの書体はそのまま
・告知は見出しの上。宇宙グラスで、大きく・読みやすく。条件の注記はボタンの下にあるので入れない
・制作依頼は白、完成予想図は青のガラス。見た目F より少し強く光らせる
・数字の帯はカタログに重なる所まで下げる
========================================================================== */
/* 見出し：同じ書体・同じ太さでも、数字は漢字より墨の高さが0.8倍・縦画が0.73倍（200pxで実測：30＝高さ145px・縦画24px／分＝181px・口の縦画33px）。
数字だけ1.25倍にすると高さ181px・縦画30pxで漢字とそろう。上下の位置も漢字の墨に合わせて少し下げる（行の高さは変えない） */
.sp-h1.v9 em .n{font-size:1.25em;line-height:0;position:relative;top:.051em;letter-spacing:-.045em}
.sp-h1.v9 em::after{display:none}
/* 告知（見出しの上）：透明なガラスの板。左にラベル、右へ「制作費 11,000円 → 0円」と読ませ、0円を最後に大きく置く */
.sp-rel{position:relative;z-index:2;display:inline-flex;align-items:center;justify-self:start;margin:0 0 clamp(22px,3.8vh,32px);min-height:78px;padding:9px 32px 9px 9px;
border-radius:18px;isolation:isolate;overflow:hidden;white-space:nowrap;
background:linear-gradient(155deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.07) 46%,rgba(150,196,255,.08) 100%);
-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(143,200,255,.16),
0 0 46px -8px rgba(120,180,255,.38),0 30px 60px -30px rgba(0,0,0,.9);
animation:spRise .85s var(--ease) both}
/* ガラスの上を光が一度横切る（1.4秒後、以後6.5秒に一度。今までの札と同じ間合い） */
.sp-rel::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:22%;z-index:3;pointer-events:none;
background:linear-gradient(90deg,rgba(200,225,255,0),rgba(220,236,255,.18) 40%,rgba(255,255,255,.32) 50%,rgba(220,236,255,.18) 60%,rgba(200,225,255,0));
transform:translateX(0) skewX(-18deg);animation:rlShine 6.5s cubic-bezier(.45,.05,.25,1) 1.4s infinite}
@keyframes rlShine{0%{transform:translateX(0) skewX(-18deg)}24%,100%{transform:translateX(720%) skewX(-18deg)}}
.sp-rel .rl-tag{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;align-self:stretch;padding:0 18px 0 16px;border-radius:11px;
background:linear-gradient(180deg,rgba(143,216,255,.22),rgba(143,216,255,.08));
box-shadow:inset 0 0 0 1px rgba(159,216,255,.42),inset 0 1px 0 rgba(255,255,255,.32);
font:700 14px/1 var(--head);letter-spacing:.2em;color:#dff3ff;text-shadow:0 0 16px rgba(143,216,255,.6)}
.sp-rel .rl-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#aee4ff;box-shadow:0 0 10px 1px #8fd8ff,0 0 2px #fff}
/* 「ホームページ制作費」を「11,000円」の上に重ね、矢印の先に 0円。どれも板の上下中央にそろえる */
.sp-rel .rl-was{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-left:24px}
.sp-rel .rl-o{font:500 15px/1 var(--head);letter-spacing:.1em;color:#e8efff}
.sp-rel .rl-old{font:300 22px/1 "Jost",sans-serif;letter-spacing:.01em;color:#8f9dc2}
.sp-rel .rl-old s{text-decoration-thickness:1px;text-decoration-color:#8f9dc2}
.sp-rel .rl-old small{font:500 12.5px/1 var(--head);margin-left:.15em}
.sp-rel .rl-ar{position:relative;z-index:2;display:inline-flex;margin:0 14px 0 18px;color:#9fd8ff}
.sp-rel .rl-ar svg{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(143,216,255,.7))}
.sp-rel .rl-z{position:relative;z-index:2;font:300 68px/.8 "Jost",sans-serif;letter-spacing:-.02em;color:#fff;
text-shadow:0 0 22px rgba(143,216,255,.8),0 0 46px rgba(120,190,255,.45),0 0 2px rgba(255,255,255,.6)}
.sp-rel .rl-z small{font:500 21px/1 var(--head);letter-spacing:0;margin-left:.12em;text-shadow:0 0 18px rgba(143,216,255,.45)}
@media (prefers-reduced-motion:reduce){.sp-rel::after{animation:none;display:none}}
/* ボタン：宇宙グラス。上からやわらかい照り（境目のある光沢は「光る立体ボタン」になり安っぽい）、外側に光。制作依頼は白、完成予想図は青 */
.sp-hero.v7.va .sp-cta{gap:14px}
body[data-route="start"] .sp-hero .sp-btn.gl{min-height:62px;padding:0 30px;border-radius:14px;gap:0;overflow:hidden;isolation:isolate;
font:700 1.02rem/1 var(--head);letter-spacing:.06em;
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:transform .24s var(--ease),box-shadow .3s var(--ease)}
body[data-route="start"] .sp-hero .sp-btn.gl::before{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
padding:0;-webkit-mask:none;mask:none;animation:none;opacity:1;
background:radial-gradient(120% 100% at 50% -30%,rgba(255,255,255,.26),rgba(255,255,255,.07) 55%,rgba(255,255,255,0) 72%)}
body[data-route="start"] .sp-hero .sp-btn.gl svg{margin-left:14px}
body[data-route="start"] .sp-hero .sp-btn.gl.white{color:#0b1733;
background:linear-gradient(180deg,#ffffff 0%,#f2f6ff 52%,#dfe8ff 100%);
box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(96,128,200,.24),0 0 0 1px rgba(255,255,255,.72),
0 0 24px rgba(190,218,255,.55),0 0 60px -4px rgba(150,196,255,.5),0 18px 34px -16px rgba(0,0,0,.75)}
body[data-route="start"] .sp-hero .sp-btn.gl.white:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(96,128,200,.24),0 0 0 1px #fff,
0 0 30px rgba(200,225,255,.7),0 0 76px -4px rgba(160,205,255,.62),0 24px 40px -16px rgba(0,0,0,.8)}
body[data-route="start"] .sp-hero .sp-btn.gl.blue{color:#fff;text-shadow:0 1px 1px rgba(10,30,90,.35);
background:linear-gradient(180deg,rgba(84,132,255,.9) 0%,rgba(44,92,232,.9) 55%,rgba(30,64,196,.93) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(170,205,255,.45),0 0 0 1px rgba(96,148,255,.55),
0 0 26px rgba(70,135,255,.6),0 0 64px -4px rgba(60,125,255,.55),0 18px 34px -16px rgba(0,0,0,.75)}
body[data-route="start"] .sp-hero .sp-btn.gl.blue:hover{transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 0 0 1px rgba(185,215,255,.55),0 0 0 1px rgba(120,165,255,.7),
0 0 32px rgba(80,145,255,.75),0 0 80px -4px rgba(70,135,255,.65),0 24px 40px -16px rgba(0,0,0,.8)}
body[data-route="start"] .sp-hero .sp-btn.gl:active{transform:translateY(0)}
body[data-route="start"] .sp-hero .sp-btn.gl:focus-visible{outline:2px solid #bfe0ff;outline-offset:3px}
.sp-hero.v7.va .sp-cond.v7{max-width:660px}
/* 数字の帯：本文から外し、ヒーローの下端からの位置で置く（カタログに重ねる） */
.sp-proofwrap{position:relative;z-index:3;width:var(--va-w);margin:0 auto}
.sp-hero.v7.va .sp-proofwrap .sp-proofn{margin:0;justify-content:flex-start}
.sp-hero.v7.va .sp-proofwrap .sp-proofn b,.sp-hero.v7.va .sp-proofwrap .sp-proofn li>span{
text-shadow:0 1px 2px rgba(2,4,10,.95),0 2px 10px rgba(2,4,10,.9),0 6px 26px rgba(2,4,10,.75)}
/* 行の割り付け（横幅の広い画面）：ヘッダーの下から数字の帯の上までを、上1：下1.618 に分けて本文を置く。
列の幅は画面いっぱいに明示する（--va-w は「親の幅−128px」なので、列の幅が決まっていないと字の最小幅まで縮む） */
@media (min-width:1180px){
.sp-hero.v7.va{--pf-b:clamp(16px,2.8vh,34px);--pf-h:54px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1.618fr);justify-items:stretch;
padding:76px 0 calc(var(--pf-b) + var(--pf-h))}
.sp-hero.v7.va .sp-hero-in{grid-row:2}
.sp-proofwrap{position:absolute;left:50%;bottom:var(--pf-b);transform:translateX(-50%);margin:0}
}
@media (max-width:1179px){
.sp-proofwrap{margin-top:clamp(20px,2.6vw,30px)}
.sp-hero.v7.va .sp-proofwrap .sp-proofn{max-width:680px}
}
/* ロールの行頭の「 は、字の右半分にしか墨がないので半字ぶん詰めて中央に見せる */
.sc-text .pl{margin-left:-.5em}
/* スマホ：横に入りきらないので、左に「リリース記念／ホームページ制作費／11,000円」を3段に重ね、右に矢印と 0円。幅はボタンにそろえる */
@media (max-width:760px){
.sp-proofwrap{width:calc(100% - 40px)}
.sp-rel{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-areas:"tag ar z" "o ar z" "old ar z";
width:100%;column-gap:0;row-gap:6px;align-items:center;min-height:0;padding:13px 22px 13px 16px;border-radius:14px;margin-bottom:22px}
.sp-rel .rl-was{display:contents}
.sp-rel .rl-tag{grid-area:tag;align-self:start;padding:0;background:none;box-shadow:none;gap:7px;font-size:11.5px;letter-spacing:.16em}
.sp-rel .rl-o{grid-area:o;font-size:13px;letter-spacing:.06em}
.sp-rel .rl-old{grid-area:old;font-size:18px}
.sp-rel .rl-ar{grid-area:ar;justify-self:center;margin:0 12px}.sp-rel .rl-ar svg{width:20px;height:20px}
.sp-rel .rl-z{grid-area:z;font-size:56px}
.sp-rel .rl-z small{font-size:18px}
}
/* 見出しの1行目は「理想の」の後ろでだけ改行する（Safari は文節で改行しないので、「を、」だけが次の行に落ちていた） */
.sp-h1.v9 .l1 .nw{display:inline-block}