:root{
  color-scheme:only light;
  /* レスポンシブ対応：基準単位。PCは従来どおり 1cqw（=スライド幅の1%）。SP/タブレットは下部のメディアクエリで上書き */
  --u:1cqw;
  --fmin:0px;
  --bg:#07070C;
  --ink:#F8F8FA;
  --muted:#9C9CAA;
  --faint:#55555F;
  --line:rgba(255,255,255,.09);
  --a1:#6E8BFF;
  --a2:#B67DFF;
  --grad:linear-gradient(100deg,#6E8BFF,#B67DFF);
  --jp:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans CJK JP','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
  --disp:'Space Grotesk','Noto Sans JP','Hiragino Kaku Gothic ProN','Noto Sans CJK JP','Yu Gothic',Meiryo,sans-serif;
}
html{color-scheme:only light;}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  color-scheme:only light;
  background:radial-gradient(55% 34% at 50% 0%, rgba(96,62,170,.22), transparent 70%),radial-gradient(40% 30% at 88% 100%, rgba(70,96,220,.10), transparent 65%),#030306;
  background-attachment:fixed;
  font-family:var(--jp);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:28px 16px 70px;
}
.deck{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}
#readbar{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#6E8BFF,#B67DFF,#E4CFFF);z-index:999;border-radius:0 3px 3px 0;box-shadow:0 0 12px rgba(182,125,255,.8);}

.slide{
  container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;
  background:var(--bg);color:var(--ink);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:calc(4.6*var(--u)) calc(5.4*var(--u));
  isolation:isolate;
  box-shadow:0 calc(2*var(--u)) calc(5*var(--u)) rgba(0,0,0,.55), 0 calc(.3*var(--u)) calc(.9*var(--u)) rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.045);
}
.slide::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 90% at 78% 16%, rgba(182,125,255,.19), transparent 62%),
    radial-gradient(55% 80% at 10% 90%, rgba(110,139,255,.15), transparent 60%);
}
.slide::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.40;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:8.333% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.slide.light{background:#F2F2F6;color:#08080C;}
.slide.light::before{background:
  radial-gradient(60% 90% at 80% 12%, rgba(182,125,255,.22), transparent 60%),
  radial-gradient(50% 70% at 6% 92%, rgba(110,139,255,.16), transparent 60%);}
.slide.light::after{opacity:.28;mix-blend-mode:multiply;}
.slide.light .grid{background-image:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);}
.slide.light p{color:#54545F;}
.slide.light .hl{color:#08080C;}
.slide.light .src,.slide.light .note{color:#8C8C98;}
.slide.light li{color:#54545F;}
.slide.light li .hl{color:#08080C;}

.num{position:absolute;top:calc(2.9*var(--u));right:calc(3.4*var(--u));font-family:var(--disp);font-size:max(var(--fmin),calc(1*var(--u)));letter-spacing:.24em;color:var(--faint);}
.slide.light .num{color:#AFAFBB;}

h1{font-size:max(var(--fmin),calc(6.3*var(--u)));font-weight:900;line-height:1.16;letter-spacing:-.035em;}
h2{font-size:max(var(--fmin),calc(4.7*var(--u)));font-weight:900;line-height:1.3;letter-spacing:-.03em;}
p{font-size:max(var(--fmin),calc(1.74*var(--u)));line-height:1.82;color:var(--muted);}
p.lead{font-size:max(var(--fmin),calc(2.16*var(--u)));line-height:1.8;color:var(--ink);}
.slide.light p.lead{color:#08080C;}
.hl{color:var(--ink);font-weight:700;}
.em{background:linear-gradient(100deg,#6E8BFF 0%,#B67DFF 30%,#E7D6FF 50%,#B67DFF 70%,#6E8BFF 100%);background-size:250% auto;background-position:0% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:emshine 8s linear infinite;}
@keyframes emshine{to{background-position:250% center}}
@media(prefers-reduced-motion:reduce){.em{animation:none}}
.src{font-size:max(var(--fmin),calc(1.14*var(--u)));color:var(--faint);line-height:1.75;}
.note{font-size:max(var(--fmin),calc(1.26*var(--u)));color:var(--faint);line-height:1.75;}
.mt1{margin-top:calc(1.2*var(--u));}.mt2{margin-top:calc(2.2*var(--u));}.mt3{margin-top:calc(2.9*var(--u));}

.rv{opacity:0;transform:translateY(18px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);}
.slide.in .rv{opacity:1;transform:none;}
.slide.in .rv:nth-child(2){transition-delay:.07s}
.slide.in .rv:nth-child(3){transition-delay:.14s}
.slide.in .rv:nth-child(4){transition-delay:.21s}
.slide.in .rv:nth-child(5){transition-delay:.28s}
.slide.in .rv:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* layout helpers */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:calc(2.4*var(--u));}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.8*var(--u));}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(1.5*var(--u));}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(1.5*var(--u));}
.g6{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.5*var(--u));}

.card{background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.028) 55%);border:1px solid var(--line);border-radius:13px;padding:calc(2.6*var(--u));box-shadow:0 calc(.8*var(--u)) calc(2.2*var(--u)) rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);}
.slide.light .card{background:linear-gradient(168deg,rgba(255,255,255,.95),rgba(255,255,255,.68));border-color:rgba(0,0,0,.07);box-shadow:0 calc(.8*var(--u)) calc(2*var(--u)) rgba(24,10,64,.10), inset 0 1px 0 #fff;}
.card .k{font-size:max(var(--fmin),calc(1.14*var(--u)));letter-spacing:.14em;color:var(--a2);font-weight:700;}
.card h4{font-size:max(var(--fmin),calc(2.08*var(--u)));font-weight:900;margin:calc(.8*var(--u)) 0 calc(.6*var(--u));line-height:1.4;}
.card p{font-size:max(var(--fmin),calc(1.48*var(--u)));line-height:1.8;}
.card.key{
  background-image:linear-gradient(#12121B,#12121B),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent;
  box-shadow:0 0 calc(6*var(--u)) rgba(150,120,255,.22);
}
.slide.light .card.key{background-image:linear-gradient(#fff,#fff),var(--grad);box-shadow:0 0 calc(6*var(--u)) rgba(150,120,255,.18);}

ul{list-style:none;}
li{font-size:max(var(--fmin),calc(1.66*var(--u)));line-height:1.9;color:var(--muted);padding-left:calc(1.9*var(--u));position:relative;margin-bottom:calc(.5*var(--u));}
li::before{content:"";position:absolute;left:0;top:calc(.72*var(--u));width:calc(.62*var(--u));height:calc(.62*var(--u));border-radius:50%;background:var(--a1);}
li .hl{color:var(--ink);font-weight:700;}

svg{display:block;width:100%;height:auto;overflow:visible;}
.fig{margin-top:calc(3.2*var(--u));margin-bottom:calc(1*var(--u));}
.pill{display:inline-block;font-family:var(--disp);font-size:max(var(--fmin),calc(1*var(--u)));letter-spacing:.16em;padding:calc(.6*var(--u)) calc(1.3*var(--u));border:1px solid rgba(255,255,255,.22);border-radius:100px;color:var(--muted);margin-right:calc(.7*var(--u));margin-bottom:calc(.7*var(--u));}

table{width:100%;border-collapse:collapse;}
th,td{padding:calc(1.2*var(--u)) calc(.6*var(--u));text-align:left;border-bottom:1px solid var(--line);font-size:max(var(--fmin),calc(1.4*var(--u)));}
th{font-family:var(--disp);font-size:max(var(--fmin),calc(.95*var(--u)));font-weight:600;color:var(--muted);letter-spacing:.1em;}
td{color:var(--ink);}
td.n{font-family:var(--disp);font-weight:700;text-align:right;font-size:max(var(--fmin),calc(1.62*var(--u)));}
.slide.light th,.slide.light td{border-bottom-color:rgba(0,0,0,.1);}
.slide.light td{color:#08080C;}

.hero2{display:grid;grid-template-columns:1.62fr .38fr;gap:calc(2.4*var(--u));align-items:center;}
.hero2 h2{font-size:max(var(--fmin),calc(3.9*var(--u)));}
.phone.tall{width:calc(15*var(--u));margin-left:auto;}
.shotbar{height:calc(6.4*var(--u));border-radius:9px;overflow:hidden;}
.shotbar img{width:100%;height:100%;object-fit:cover;display:block;}
.shotbar.grad{background:linear-gradient(100deg,#D8D8E4,#C3C7DC 55%,#CFC6DE);}
.slide.tight .card{padding:calc(1.7*var(--u));}
.slide.tight .fig{margin-top:calc(2*var(--u));margin-bottom:calc(.4*var(--u));}
.slide.tight .pat{padding:calc(2*var(--u)) calc(2.2*var(--u));}
.slide.tight .card.sm{padding:calc(1.4*var(--u));}
.slide.tight .card.sm h4{font-size:max(var(--fmin),calc(1.54*var(--u)));}
.slide.tight .card.sm p{font-size:max(var(--fmin),calc(1.2*var(--u)));}
.demo2 .phone{width:calc(10.8*var(--u));}
.demo2 .phone.mid{width:calc(12.8*var(--u));}
.demo2 .twin{gap:calc(1.1*var(--u));}
.slide.tight .incl{padding:calc(1.3*var(--u)) calc(1.6*var(--u));}
.slide.tight .shotbar{height:calc(4.6*var(--u));}
.slide.tight th,.slide.tight td{padding:calc(.85*var(--u)) calc(.6*var(--u));font-size:max(var(--fmin),calc(1.4*var(--u)));}
.slide.tight .g4 .card{padding:calc(1.5*var(--u));}
.slide.tight .g4 .card h4{font-size:max(var(--fmin),calc(1.74*var(--u)));}
.slide.tight .g4 .card p{font-size:max(var(--fmin),calc(1.26*var(--u)));}
.slide.tight .pat .desc{font-size:max(var(--fmin),calc(1.4*var(--u)));}
.slide.tight .pat .ttl{font-size:max(var(--fmin),calc(2*var(--u)));}
.slide.tight .note{font-size:max(var(--fmin),calc(1.14*var(--u)));}
.slide.tight p{font-size:max(var(--fmin),calc(1.62*var(--u)));}
.slide.tight h2{font-size:max(var(--fmin),calc(4.2*var(--u)));}
.slide.tight .mt2{margin-top:calc(1.7*var(--u));}
.slide.tight .fig{margin-top:calc(1.8*var(--u));margin-bottom:calc(.3*var(--u));}
.slide.tight .g6 .card{padding:calc(1.5*var(--u));}
.slide.tight .card.ic{padding:calc(1.3*var(--u)) calc(1*var(--u)) calc(1.5*var(--u));}
.slide.tight .card.ic .scene{margin-bottom:calc(.7*var(--u));width:84%;}
.slide.tight .shotbar{height:calc(3.9*var(--u));}
.slide.tight .incl{padding:calc(1.15*var(--u)) calc(1.5*var(--u));}
.slide.tight .incl-g{gap:calc(1.3*var(--u));}
.slide.tight .pat{padding:calc(1.5*var(--u)) calc(2*var(--u));}
.slide.tight .card.sm{padding:calc(1.2*var(--u));}
.slide.tight .incl-h{margin-bottom:calc(.7*var(--u));}
.slide.tight .g2 .card{padding:calc(1.4*var(--u));}
.slide.tight .g2 .card p{font-size:max(var(--fmin),calc(1.3*var(--u)));}
.slide.tight .g2 .card h4{font-size:max(var(--fmin),calc(1.8*var(--u)));margin:calc(.5*var(--u)) 0 calc(.4*var(--u));}
.slide.tight .g2 th,.slide.tight .g2 td{padding:calc(.72*var(--u)) calc(.6*var(--u));}
.slide.tight .pat{padding:calc(1.1*var(--u)) calc(1.7*var(--u));}
.slide.tight .pat .desc{font-size:max(var(--fmin),calc(1.26*var(--u)));line-height:1.75;}
.slide.tight .pat .cond span{font-size:max(var(--fmin),calc(.98*var(--u)));padding:calc(.28*var(--u)) calc(.8*var(--u));}
.slide.tight .pat .cond{gap:calc(.8*var(--u));margin-top:calc(.8*var(--u));}
.slide.tight .pat .ttl{font-size:max(var(--fmin),calc(2.05*var(--u)));}
.slide.tight .pat .rate{font-size:max(var(--fmin),calc(3.05*var(--u)));}
.slide.tight .note{font-size:max(var(--fmin),calc(1.04*var(--u)));line-height:1.65;}
.slide.tight .fig svg{max-height:calc(26*var(--u));}
.slide.tight .lead{font-size:max(var(--fmin),calc(1.95*var(--u)));}
.demo2 .phone{width:calc(10*var(--u));}
.demo2 .phone.mid{width:calc(11.8*var(--u));}
.slide.tight .incl-h{font-size:max(var(--fmin),calc(1.54*var(--u)));margin-bottom:calc(.8*var(--u));}
.slide.tight .card{padding:calc(1.5*var(--u));}
.slide.tight .pat{padding:calc(1.7*var(--u)) calc(2*var(--u));}
.slide.tight .incl-g b{font-size:max(var(--fmin),calc(1.26*var(--u)));}
.slide.tight .incl-g span:last-child{font-size:max(var(--fmin),calc(1.05*var(--u)));}
.slide.tight .incl-f{font-size:max(var(--fmin),calc(1.05*var(--u)));margin-top:calc(.7*var(--u));padding-top:calc(.7*var(--u));}
.slide.tight .shotbar{height:calc(4.6*var(--u));}
.slide.tight h2{margin-bottom:calc(-.4*var(--u));}
.slide.tight h2{font-size:max(var(--fmin),calc(4.1*var(--u)));}
.slide.tight .card h4{font-size:max(var(--fmin),calc(1.9*var(--u)));margin:calc(.6*var(--u)) 0 calc(.5*var(--u));}
.slide.tight .card p{font-size:max(var(--fmin),calc(1.38*var(--u)));line-height:1.75;}
.slide.tight th,.slide.tight td{padding:calc(1*var(--u)) calc(.6*var(--u));font-size:max(var(--fmin),calc(1.34*var(--u)));}
.slide.tight .shotbar{height:calc(5.2*var(--u));}
.slide.tight .phone.tall{width:calc(13.2*var(--u));}
.slide.tight p.lead{font-size:max(var(--fmin),calc(1.8*var(--u)));}

/* アイコン（Lucide） */
.ico{display:inline-block;line-height:0;color:transparent;}
.ico svg{width:100%;height:auto;stroke-width:1.6;fill:none;}
.card.ic{text-align:center;padding:calc(1.6*var(--u)) calc(1*var(--u)) calc(1.8*var(--u));}
.card.ic .scene{width:88%;margin:0 auto calc(.9*var(--u));}
.card.ic .scene svg{width:100%;height:auto;}
.card.ic .ico{width:44%;margin:0 auto calc(.9*var(--u));display:block;}
.card.ic h4{font-size:max(var(--fmin),calc(1.86*var(--u)));margin:0 0 calc(.5*var(--u));white-space:nowrap;}
.card.ic p{font-size:max(var(--fmin),calc(1.24*var(--u)));line-height:1.6;}
.card.sm{padding:calc(1.7*var(--u));}
.card.sm h4{font-size:max(var(--fmin),calc(1.55*var(--u)));margin:0 0 calc(.5*var(--u));}
.card.sm p{font-size:max(var(--fmin),calc(1.2*var(--u)));line-height:1.7;}

/* 世代パネル */
.gen .verb{margin-top:auto;padding-top:calc(.9*var(--u));border-top:1px solid rgba(0,0,0,.10);font-size:max(var(--fmin),calc(1.46*var(--u)));font-weight:900;color:#5A5A68;}
.gen.now .verb{border-top-color:rgba(255,255,255,.16);color:#fff;font-size:max(var(--fmin),calc(1.62*var(--u)));}
.gen .role{margin-top:calc(.8*var(--u));padding-top:0;font-size:max(var(--fmin),calc(1.2*var(--u)));line-height:1.65;color:#7A7A88;}
.gen .name{min-height:calc(2.6*var(--u));}
.gen .as{min-height:calc(1.9*var(--u));}
.gen.now .role{color:#B9B2D8;font-weight:400;font-size:max(var(--fmin),calc(1.22*var(--u)));}
.gen .as{font-size:max(var(--fmin),calc(1.22*var(--u)));}
.gens{align-items:stretch;}
.gen.past{height:auto;min-height:calc(29.7*var(--u));}
.gen.now{height:auto;min-height:calc(29.7*var(--u));}
.gen .thumb{height:calc(7.4*var(--u));}
.gen.now .thumb{height:calc(7.4*var(--u));}

/* 08 実物 */
.demo2{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(2.6*var(--u));align-items:stretch;}
.dcol{display:flex;flex-direction:column;justify-content:center;}
.demo2 .dcol.key{order:2;}
.metaline span{white-space:nowrap;}
.cond span{white-space:nowrap;}
.cmpv{font-family:var(--disp);font-size:max(var(--fmin),calc(3.4*var(--u)));font-weight:700;color:#B67DFF;line-height:1;margin:calc(.8*var(--u)) 0 calc(.7*var(--u));}
.dcol{border-radius:14px;padding:calc(1.6*var(--u));background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center;}
.dcol.key{background-image:linear-gradient(#12121B,#12121B),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent;box-shadow:0 0 calc(6*var(--u)) rgba(150,120,255,.22);}
.dlab{font-size:max(var(--fmin),calc(1.26*var(--u)));font-weight:900;color:var(--muted);margin-bottom:calc(.9*var(--u));}
.dcol.key .dlab{color:#C79BFF;}
.dcol.key{animation:keybreath 5s ease-in-out infinite;}
@keyframes keybreath{0%,100%{box-shadow:0 0 calc(4*var(--u)) rgba(150,120,255,.18)}50%{box-shadow:0 0 calc(7*var(--u)) rgba(150,120,255,.4)}}
@media(prefers-reduced-motion:reduce){.dcol.key{animation:none}}
.dcol .phone{margin:0 auto;}
.twin{display:flex;gap:calc(1.4*var(--u));justify-content:center;}
.dname{font-size:max(var(--fmin),calc(1.24*var(--u)));font-weight:700;color:var(--ink);margin-top:calc(.9*var(--u));}
.dcol .url{border:0;padding:0;margin-top:calc(.5*var(--u));font-size:max(var(--fmin),calc(1.06*var(--u)));text-align:center;}

/* 13 付帯サービス */
.incl{border-radius:14px;padding:calc(1.5*var(--u)) calc(1.8*var(--u));background:#0E0E16;color:#F8F8FA;}
.incl-h{font-size:max(var(--fmin),calc(1.5*var(--u)));font-weight:900;margin-bottom:calc(1*var(--u));}
.incl-g{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.6*var(--u));}
.incl-g>div{display:grid;grid-template-columns:calc(2.2*var(--u)) 1fr;gap:calc(.8*var(--u));align-items:start;}
.incl-g .ico svg{stroke:url(#icg);}
.incl-g .ico{width:calc(2.4*var(--u));margin-top:calc(.15*var(--u));}
.incl-g b{font-size:max(var(--fmin),calc(1.22*var(--u)));display:block;}
.incl-g span:last-child{font-size:max(var(--fmin),calc(1*var(--u)));color:#9C9CAA;line-height:1.6;display:block;margin-top:calc(.2*var(--u));}
.incl-f{margin-top:calc(.9*var(--u));padding-top:calc(.8*var(--u));border-top:1px solid rgba(255,255,255,.12);font-size:max(var(--fmin),calc(1.02*var(--u)));color:#9C9CAA;}
.slide.light .incl-g b{color:#F8F8FA;}
.bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(1.5*var(--u));}
.bn{border-radius:12px;padding:calc(1.6*var(--u)) calc(1.5*var(--u));background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.68));border:1px solid rgba(0,0,0,.07);box-shadow:0 calc(.8*var(--u)) calc(2*var(--u)) rgba(24,10,64,.10), inset 0 1px 0 #fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.bn:hover{transform:translateY(calc(-.35*var(--u)));box-shadow:0 calc(1.4*var(--u)) calc(3*var(--u)) rgba(24,10,64,.16), inset 0 1px 0 #fff;}
.bn .v{font-family:var(--disp);font-weight:700;font-size:max(var(--fmin),calc(4.6*var(--u)));line-height:1;letter-spacing:-.04em;color:#08080C;}
.bn .v em{font-style:normal;font-family:var(--jp);font-weight:900;font-size:max(var(--fmin),calc(1.6*var(--u)));margin-left:calc(.3*var(--u));}
.bn .t{font-size:max(var(--fmin),calc(1.22*var(--u)));line-height:1.65;color:#5A5A68;margin-top:calc(1*var(--u));}
.bn.key{background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent;box-shadow:0 0 calc(6*var(--u)) rgba(150,120,255,.2);}
.bn.key .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bn.key .v em{-webkit-text-fill-color:#8A5FE0;}
.bn.zerocard{background-image:linear-gradient(#EAF3FF,#EAF3FF),linear-gradient(135deg,#5E8DEF,#7FC4FF);box-shadow:0 0 calc(6*var(--u)) rgba(94,141,239,.25);position:relative;perspective:1100px;cursor:pointer;}
.bn.zerocard .v{background:linear-gradient(135deg,#3D71E0,#59B2F2);-webkit-background-clip:text;background-clip:text;}
.bn.zerocard .v em{-webkit-text-fill-color:#3D71E0;}
.bn.zerocard .zc-front{position:absolute;inset:-1px;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:inherit;background:linear-gradient(150deg,#DCEBFF,#F2F8FF);border:1px solid rgba(94,141,239,.45);animation:zcPulse 2.2s ease-in-out infinite;}
.bn.zerocard .zc-back{visibility:hidden;}
@keyframes zcPulse{0%,100%{box-shadow:0 0 0 rgba(94,141,239,0)}50%{box-shadow:0 0 calc(2.6*var(--u)) rgba(94,141,239,.5)}}
@media(prefers-reduced-motion:reduce){.bn.zerocard .zc-front{animation:none}}
.pat .cond{display:flex;gap:calc(1.2*var(--u));margin-top:calc(1*var(--u));flex-wrap:wrap;}
.pat .cond span{font-size:max(var(--fmin),calc(1.12*var(--u)));color:#C9BEFF;border:1px solid rgba(182,125,255,.45);border-radius:100px;padding:calc(.4*var(--u)) calc(1*var(--u));line-height:1.5;background:rgba(182,125,255,.07);}
.card.big{display:flex;flex-direction:column;justify-content:center;}
.bigv{font-family:var(--disp);font-weight:700;font-size:max(var(--fmin),calc(4.4*var(--u)));line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:calc(.9*var(--u));}
.bigv em{font-style:normal;font-family:var(--jp);font-weight:900;font-size:max(var(--fmin),calc(1.5*var(--u)));-webkit-text-fill-color:#C79BFF;margin-left:calc(.3*var(--u));}
.cmp{display:flex;flex-direction:column;gap:calc(1.1*var(--u));}
.cmp-row{display:grid;grid-template-columns:calc(20*var(--u)) 1fr;gap:calc(1.6*var(--u));align-items:center;}
.cmp-l{font-size:max(var(--fmin),calc(1.35*var(--u)));font-weight:700;color:var(--muted);line-height:1.5;}
.cmp-b{position:relative;height:calc(4.4*var(--u));display:flex;flex-direction:column;justify-content:center;gap:calc(.35*var(--u));}
.cmp-b .base{display:block;width:44%;background:rgba(255,255,255,.10);border-radius:6px;padding:calc(.42*var(--u)) calc(.9*var(--u));font-size:max(var(--fmin),calc(1.12*var(--u)));color:#8A8A98;}
.cmp-b .hi{display:block;background:var(--grad);border-radius:6px;padding:calc(.42*var(--u)) calc(.9*var(--u));font-size:max(var(--fmin),calc(1.12*var(--u)));color:#0A0A10;font-weight:700;white-space:nowrap;}
.cmp-b .hi b{font-size:max(var(--fmin),calc(1.35*var(--u)));}
/* 01 cover */
.cover{justify-content:flex-end;}
.cover .brandmark{position:absolute;top:calc(5*var(--u));left:calc(6*var(--u));font-family:var(--disp);font-size:max(var(--fmin),calc(1.25*var(--u)));font-weight:700;letter-spacing:.4em;}
.cover .brandmark::after{content:"";display:block;margin-top:calc(.7*var(--u));height:2px;width:0;background:var(--grad);animation:brline 1.6s .6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes brline{to{width:100%}}
.orb{position:absolute;right:calc(-6*var(--u));top:50%;transform:translateY(-50%);width:calc(46*var(--u));height:calc(46*var(--u));border-radius:50%;
  background:conic-gradient(from 210deg,#6E8BFF,#B67DFF,#6E8BFF);filter:blur(2px);opacity:.9;
  -webkit-mask-image:radial-gradient(circle,transparent 61%,#000 62%,#000 66%,transparent 67%);
          mask-image:radial-gradient(circle,transparent 61%,#000 62%,#000 66%,transparent 67%);
  animation:spin 26s linear infinite;}
.orb3{position:absolute;right:calc(-12*var(--u));top:50%;transform:translateY(-50%);width:calc(58*var(--u));height:calc(58*var(--u));border-radius:50%;border:1px solid rgba(182,125,255,.16);animation:spin 60s linear infinite reverse;}
.orb3::before{content:"";position:absolute;top:8%;left:50%;width:8px;height:8px;border-radius:50%;background:#D9C2FF;box-shadow:0 0 14px 4px rgba(182,125,255,.65);}
.orb2{position:absolute;right:calc(2*var(--u));top:50%;transform:translateY(-50%);width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(182,125,255,.55),rgba(110,139,255,.12) 55%,transparent 72%);
  filter:blur(6px);animation:float 9s ease-in-out infinite;}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-52%)}50%{transform:translateY(-48%)}}
@keyframes phfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-.7*var(--u)))}}
@media(prefers-reduced-motion:reduce){.phone{animation:none}}
.cover h1{max-width:80%;font-size:max(var(--fmin),calc(5.3*var(--u)));}
.cover p.lead{max-width:60%;}
.metaline{display:flex;gap:calc(2.4*var(--u));align-items:baseline;margin-top:calc(3.2*var(--u));border-top:1px solid var(--line);padding-top:calc(1.7*var(--u));}
.metaline span{font-family:var(--disp);font-size:max(var(--fmin),calc(1*var(--u)));letter-spacing:.2em;color:var(--muted);}

/* 06 generations */
.gens{display:grid;grid-template-columns:1fr auto 1fr auto 1.55fr;gap:calc(1.1*var(--u));align-items:stretch;margin-top:calc(2.2*var(--u));}
.gstep{align-self:stretch;display:flex;align-items:center;}
.gen .mode{display:flex;align-items:center;gap:calc(.7*var(--u));margin-bottom:calc(.9*var(--u));}
.gen .mpill{display:inline-flex;align-items:center;gap:calc(.45*var(--u));padding:calc(.3*var(--u)) calc(.85*var(--u));border-radius:99px;background:rgba(0,0,0,.08);font-size:max(var(--fmin),calc(1.06*var(--u)));font-weight:900;color:#3A3A48;white-space:nowrap;}
.gen .mpill svg{width:calc(1.2*var(--u));height:calc(1.2*var(--u));}
.gen .mtxt{font-size:max(var(--fmin),calc(1.02*var(--u)));color:#8C8C98;line-height:1.4;}
.gen.now .mpill{background:rgba(182,125,255,.18);color:#E9DFFF;}
.gen.now .mtxt{color:#B9B2D8;}
.gen .ana{margin-top:calc(.9*var(--u));font-size:max(var(--fmin),calc(1.16*var(--u)));color:#6E6E7A;}
.gen .ana b{color:#08080C;font-weight:900;}
.gen.now .ana{color:#B9B2D8;font-size:max(var(--fmin),calc(1.22*var(--u)));}
.gen.now .ana b{color:#fff;}
.gen{border-radius:14px;padding:calc(1.8*var(--u));position:relative;overflow:hidden;display:flex;flex-direction:column;}
.gen.past{background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.08);height:auto;min-height:calc(24.8*var(--u));}
.gen.now{height:auto;min-height:calc(29.2*var(--u));background-image:linear-gradient(#0A0A10,#0A0A10),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent;
  box-shadow:0 0 calc(7*var(--u)) rgba(150,120,255,.28);}
.gen .idx{font-size:max(var(--fmin),calc(1.14*var(--u)));letter-spacing:.14em;color:#9C9CAA;font-weight:700;}
.gen.now .idx{color:#C79BFF;}
.gen .name{font-size:max(var(--fmin),calc(1.88*var(--u)));font-weight:900;margin-top:calc(.8*var(--u));line-height:1.3;}
.gen.now .name{font-size:max(var(--fmin),calc(2.4*var(--u)));color:#fff;}
.gen .as{font-size:max(var(--fmin),calc(1.15*var(--u)));color:#6E6E7A;margin-top:calc(.55*var(--u));}
.gen.now .as{color:#C9BEFF;font-weight:700;font-size:max(var(--fmin),calc(1.25*var(--u)));}
.gen .role{margin-top:auto;padding-top:calc(1*var(--u));font-size:max(var(--fmin),calc(1.1*var(--u)));color:#8C8C98;}
.gen.now .role{color:#fff;font-weight:700;font-size:max(var(--fmin),calc(1.3*var(--u)));}
.thumb{height:calc(5*var(--u));border-radius:7px;margin-bottom:calc(1.1*var(--u));background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;}
.gen.now .thumb{background:#0A0A10;height:calc(7.6*var(--u));}
.thumb.shot{overflow:hidden;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 calc(.5*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.35);}
.thumb.shot{background:#07070C;}
.thumb.shot img{width:100%;height:100%;object-fit:contain;display:block;}

/* 08 phones */
.demo{display:grid;grid-template-columns:1fr 1.02fr;gap:calc(2.6*var(--u));align-items:center;}
.demo h2{font-size:max(var(--fmin),calc(3.7*var(--u)));}
.demo .url{font-size:max(var(--fmin),calc(1.05*var(--u)));}
.phones{display:flex;gap:calc(1.8*var(--u));align-items:flex-end;justify-content:center;}
.phone{animation:phfloat 6s ease-in-out infinite;width:calc(12.6*var(--u));aspect-ratio:9/19;border-radius:calc(2*var(--u));border:calc(.32*var(--u)) solid #24242E;background:#0D0D14;position:relative;overflow:hidden;box-shadow:0 calc(2.6*var(--u)) calc(5*var(--u)) rgba(0,0,0,.55);}
.phone.mid{width:calc(15*var(--u));box-shadow:0 calc(2.6*var(--u)) calc(7*var(--u)) rgba(140,110,255,.32);border-color:#3A3350;}
.phone .scr{position:absolute;inset:calc(.32*var(--u));border-radius:calc(1.75*var(--u));overflow:hidden;background:#0D0D14;display:flex;align-items:center;justify-content:center;}
.phone .scr img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.phone .ph{font-family:var(--disp);font-size:max(var(--fmin),calc(.85*var(--u)));letter-spacing:.14em;color:rgba(255,255,255,.55);line-height:2;padding:calc(.8*var(--u));}
.phone .notch{position:absolute;top:calc(.5*var(--u));left:50%;transform:translateX(-50%);width:calc(3.6*var(--u));height:calc(.62*var(--u));border-radius:calc(1*var(--u));background:#1A1A22;z-index:2;}
.urls{margin-top:calc(2*var(--u));display:flex;flex-direction:column;gap:calc(.8*var(--u));}
.url{font-family:var(--disp);font-size:max(var(--fmin),calc(.98*var(--u)));color:var(--a1);border-left:2px solid rgba(182,125,255,.5);padding-left:calc(1.1*var(--u));line-height:1.6;word-break:break-all;}
.slide.light .url{color:#5A6FE0;}

/* 10 bars */
.bignum{font-family:var(--disp);font-weight:700;font-size:max(var(--fmin),calc(15*var(--u)));line-height:.86;letter-spacing:-.05em;}
.split49{display:grid;grid-template-columns:1.3fr .7fr;gap:calc(4*var(--u));align-items:center;}
.ghost{font-family:var(--disp);font-weight:700;font-size:max(var(--fmin),calc(7*var(--u)));line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(0,0,0,.26);}
.bar{height:calc(1*var(--u));border-radius:calc(1*var(--u));background:rgba(0,0,0,.12);overflow:hidden;}
.slide:not(.light) .bar{background:rgba(255,255,255,.10);}
.bar i{display:block;height:100%;border-radius:calc(1*var(--u));background:var(--grad);width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1) .25s;}
.bar.dim i{background:#A6A6B6;}
.slide.in .bar i{width:var(--w);}

/* 11 metrics */
.metric{text-align:left;}
.card .v{font-family:var(--disp);font-weight:700;font-size:max(var(--fmin),calc(5.4*var(--u)));line-height:1;letter-spacing:-.04em;}

/* 16 patterns */
.pat{border-radius:14px;padding:calc(2.7*var(--u)) calc(2.6*var(--u));display:grid;grid-template-columns:auto 1fr auto;gap:calc(2*var(--u));align-items:center;}
.pat.a{background:rgba(255,255,255,.04);border:1px solid var(--line);}
.pat.b{background-image:linear-gradient(#12121B,#12121B),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent;box-shadow:0 0 calc(6*var(--u)) rgba(150,120,255,.22);}
.pat .tag{font-size:max(var(--fmin),calc(1.02*var(--u)));letter-spacing:.12em;color:var(--faint);font-weight:700;}
.pat.b .tag{color:#C79BFF;}
.pat .ttl{font-size:max(var(--fmin),calc(2.32*var(--u)));font-weight:900;line-height:1.3;margin-top:calc(.4*var(--u));}
.pat .desc{font-size:max(var(--fmin),calc(1.42*var(--u)));color:var(--muted);line-height:1.8;}
.pat .rate{font-family:var(--disp);font-size:max(var(--fmin),calc(3.7*var(--u)));font-weight:700;letter-spacing:-.02em;white-space:nowrap;}
.pat.a .rate{color:#B9B9C6;}
.pat.b .rate{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pat .lbl{width:calc(14*var(--u));}

@media print{
  body{background:#fff;padding:0}.hint{display:none}
  .deck{gap:0;max-width:none}
  .slide{border-radius:0;page-break-after:always}
  .rv{opacity:1;transform:none}
  .bar i{width:var(--w)}
}
@media (max-width:640px){body{padding:12px 8px 34px}.deck{gap:12px}}

/* v6 motion */
.fcard{perspective:1400px;position:relative;cursor:pointer;min-height:calc(14.6*var(--u));}
.fcard .fc-front{position:absolute;inset:-1px;z-index:2;}
.fcard .fc-back{visibility:hidden;}
.fcard .fc-front,.fcard .fc-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.fcard .fc-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.1*var(--u));text-align:center;padding:calc(1.5*var(--u));border-radius:inherit;animation:frontPulse 2.2s ease-in-out infinite;}
.fcard .fc-back{display:flex;flex-direction:column;min-height:100%;}
.fcard.flipped{cursor:default;}
.fcard .fc-front{background:linear-gradient(160deg,#241243,#0E0A1C 70%);border:1px solid rgba(182,125,255,.4);border-radius:inherit;overflow:hidden;}
.fcard .fc-front::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:rotate(12deg);animation:sheen 3.6s ease-in-out infinite;}
@keyframes sheen{0%,55%{left:-40%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.fcard .fc-front::after{animation:none}}
.fcard .fc-front h4,.fcard .fc-front .bigv{color:#fff;}
.fcard.key .fc-front{background:linear-gradient(160deg,#2E1655,#120A24 70%);}
.fcard .fc-hint{font-size:max(var(--fmin),calc(1.06*var(--u)));font-weight:700;color:#B67DFF;letter-spacing:.08em;}
@media(prefers-reduced-motion:reduce){.fcard{transition:none}}
@keyframes pgfold{0%,18%{transform:rotate(0deg) scale(1)}42%,58%{transform:rotate(-14deg) scale(1.22)}82%,100%{transform:rotate(0deg) scale(1)}}
@keyframes cubespin{0%,12%{transform:rotateY(0deg)}50%,62%{transform:rotate3d(0,1,.08,58deg)}100%{transform:rotateY(0deg)}}
@keyframes g2drift{0%,100%{object-position:50% 0%}50%{object-position:50% 100%}}
.g2motion img{animation:g2drift 7s ease-in-out infinite;object-fit:cover;object-position:50% 0%;height:100%;}
#gen3flip{perspective:1400px;position:relative;cursor:pointer;}
#gen3flip .g3front{position:absolute;inset:-1px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:linear-gradient(160deg,#241243,#0E0A1C 70%);border:1px solid rgba(182,125,255,.4);animation:frontPulse 2s ease-in-out infinite;}
#gen3flip .g3back{visibility:hidden;display:flex;flex-direction:column;min-height:100%;}
#gen3flip .g3back .verb{margin-top:auto;}
#gen3flip.flipped{cursor:default;}
@keyframes frontPulse{0%,100%{box-shadow:0 0 0 rgba(182,125,255,0)}50%{box-shadow:0 0 calc(3*var(--u)) rgba(182,125,255,.45)}}
@media(prefers-reduced-motion:reduce){.g2motion img{animation:none}#gen3flip{transition:none}}
@keyframes neonG{0%,100%{filter:url(#glowW) drop-shadow(0 0 6px rgba(182,125,255,.35))}50%{filter:url(#glowW) drop-shadow(0 0 18px rgba(182,125,255,.85)) drop-shadow(0 0 34px rgba(110,139,255,.4))}}
@keyframes gpulse{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(calc(.35*var(--u)));opacity:1}}
.gstep svg{animation:gpulse 1.6s ease-in-out infinite;}
.card,.gen{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;will-change:transform;}
@media(prefers-reduced-motion:reduce){.gstep svg{animation:none}.card,.gen{transition:none}}

/* =====================================================================
   レスポンシブ対応（追加分）
   - PC（1024px〜）は従来デザインを一切変更しない
   - タブレット（768〜1023px）：16:9固定を解除し、基準単位をわずかに拡大
   - SP（〜767px）：16:9固定を解除、全グリッドを縦積み、文字サイズに下限を設定
   ===================================================================== */

/* --- タブレット：768〜1023px --- */
@media (min-width:768px) and (max-width:1023px){
  :root{--u:calc(1cqw + 1px);--fmin:12px;}
  .slide{aspect-ratio:auto;}                 /* 高さを内容に合わせる（はみ出し防止） */
}

/* --- SP：〜767px --- */
@media (max-width:767px){
  :root{--u:calc(6px + .6cqw);--fmin:12px;} /* 375pxで約8.2px、767pxで約10.5px */

  /* 土台 */
  body{padding:10px 8px 40px;background-attachment:scroll;} /* iOSは fixed 非対応のため scroll に */
  .deck{gap:14px;}
  .slide{aspect-ratio:auto;padding:28px 16px 30px;border-radius:14px;}
  .num{top:12px;right:14px;font-size:11px;}

  /* 見出し・本文（下限を確保しつつ、1行の文字数を確保） */
  h1{font-size:clamp(24px,6.4vw,28px)!important;line-height:1.3;}
  h2{font-size:clamp(22px,6.2vw,26px)!important;line-height:1.38;}
  .slide p{line-height:1.8;overflow-wrap:anywhere;}
  .slide.tight p{font-size:14px;}
  .slide.tight p.lead,.slide.tight .lead{font-size:16px;}
  .slide li{font-size:14px;overflow-wrap:anywhere;}
  .slide .src,.slide .note,.slide.tight .note{font-size:12px;line-height:1.6;}
  .slide .card h4,.slide.tight .card h4,.slide.tight .g2 .card h4,.slide.tight .g4 .card h4,.slide.tight .card.sm h4{font-size:16px;}
  .slide .card.ic h4{font-size:15px;}
  .slide .card p,.slide.tight .card p,.slide.tight .g2 .card p,.slide.tight .g4 .card p,.slide.tight .card.sm p,.slide .card.ic p{font-size:13px;line-height:1.7;}
  .slide th,.slide td,.slide.tight th,.slide.tight td,.slide.tight .g2 th,.slide.tight .g2 td{font-size:13px;padding:9px 6px;}
  .slide td.n{font-size:15px;}
  .metaline{flex-wrap:wrap;gap:8px 16px;margin-top:22px;padding-top:14px;}
  .metaline span{font-size:12px!important;white-space:normal;overflow-wrap:anywhere;}
  .g2>p br{display:none;}                    /* 03：PC幅用の文中改行を解除 */

  /* グリッドの縦積み */
  .g2,.g3,.g4,.g6,.incl-g,.hero2,.demo2,.demo,.split49,.cmp-row,.gens,.pat{grid-template-columns:1fr;}
  .g5{grid-template-columns:1fr 1fr;gap:10px;}
  .g5>.card:nth-child(5){grid-column:1/-1;}
  .g5>.card:nth-child(5) .scene,.slide.tight .g5>.card:nth-child(5) .scene{width:44%;}
  .bignums{grid-template-columns:1fr 1fr;gap:10px;}

  /* 02：ヒーロー */
  .hero2{gap:18px;}
  .phone.tall,.slide.tight .phone.tall{width:150px;margin:0 auto;}
  .fcard .fc-hint{font-size:12px;}

  /* 06：3世代パネル（矢印を下向きに） */
  .gens{gap:8px;}
  .gstep{justify-content:center;padding:2px 0;}
  .gstep svg{animation:none;rotate:90deg;width:16px!important;}
  .gen.past,.gen.now{min-height:0;}
  .gen .thumb,.gen.now .thumb{height:100px;}
  .gen .name{font-size:17px;}
  .gen.now .name{font-size:19px;}
  .gen .as,.gen.now .as,.gen .mtxt,.gen .mpill{font-size:12.5px;}
  .gen .role,.gen.now .role,.gen .ana,.gen.now .ana{font-size:13px;line-height:1.7;}
  .gen .verb,.gen.now .verb{font-size:14px;}

  /* 08：実物デモ（スマホ枠の実寸） */
  .demo2 .phone{width:118px;}
  .demo2 .phone.mid{width:150px;}
  .twin{gap:14px;}
  .dlab,.dname{font-size:13px;}
  .dcol .url{font-size:12px;}

  /* 13：付帯サービス */
  .slide .shotbar,.slide.tight .shotbar{height:72px;}
  .incl-h,.slide.tight .incl-h{font-size:15px;}
  .incl-g b,.slide.tight .incl-g b{font-size:14px;}
  .incl-g span:last-child,.slide.tight .incl-g span:last-child{font-size:12.5px;}
  .incl-f,.slide.tight .incl-f{font-size:12px;}

  /* 15：実績数字 */
  .bn .t{font-size:12.5px;}
  .bn.zerocard .zc-front>div:last-child{white-space:nowrap;font-size:11px!important;}

  /* 16：計測ボックス（インラインのグリッド指定を上書き） */
  .slide [style*="grid-template-columns:1fr 1.9fr"]{grid-template-columns:1fr!important;}
  .slide [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}
  .slide [style*="rgba(182,125,255,.35)"]>div:first-child>span:last-child{font-size:16px!important;white-space:normal!important;}

  /* 17：成果報酬パターン */
  .pat,.slide.tight .pat{gap:10px;padding:18px 16px;}
  .pat .lbl{width:auto;}
  .pat .ttl,.slide.tight .pat .ttl{font-size:18px;}
  .pat .desc,.slide.tight .pat .desc{font-size:13.5px;}
  .pat .rate,.slide.tight .pat .rate{font-size:26px;}
  .pat .cond span,.slide.tight .pat .cond span{white-space:normal;font-size:12px;}

  /* 図解SVG（03/04/05/09/10/12/18/19）：横スクロール表示 */
  .fig{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .slide .fig svg,.slide.tight .fig svg{min-width:760px;max-height:none;}
  .fig::after{content:"→ 横にスクロールできます";display:block;position:sticky;left:0;margin-top:8px;font-size:11px;letter-spacing:.06em;color:var(--faint);}
  .slide.light .fig::after{color:#8C8C98;}
  .fig:has(#tapZone)::after{margin-top:36px;}            /* 04：SVG枠外に描かれるタップ案内と重ならないよう余白を追加 */
  .slide .fig:has(svg[aria-label*="7ステップ"]) svg{min-width:900px;} /* 19：7段階の工程図は幅を広めに確保 */

  /* 表紙（01・最終） */
  .cover{min-height:560px;min-height:min(600px,92dvh);padding-top:250px;} /* 上部250pxはオーブ（装飾）の領域。本文はその下から */
  .cover .brandmark{top:28px;left:16px;font-size:12px;}
  .cover h1{max-width:100%;}
  .cover p.lead{max-width:100%;}
  /* 表紙の装飾オーブは本文と重ならないよう右上に縮小配置 */
  .cover .orb{width:200px;height:200px;top:128px;right:-24px;}
  .cover .orb2{width:150px;height:150px;top:128px;right:6px;}
  .cover .orb3{width:260px;height:260px;top:128px;right:-54px;}
}

/* SP・タブレット共通：価格表の単位（万円）が小さくなりすぎないように */
@media (max-width:1023px){
  td.n span{font-size:.8em!important;}
}

/* タッチ端末：ホバー演出を無効化 */
@media (hover:none){
  .bn:hover{transform:none;}
}
/* =====================================================================
   スクロール連動ヒーロー（2026-09 デザイン変更）
   - 固定配置のcanvasに映像のコマを描き、ページ全体がその上をスクロールする
   - ダークのスライドは半透明ガラスにして背景映像が透ける。ライトのスライドは不透明のまま
   ===================================================================== */
#heroCv{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:#030306;}
body{background:#030306;position:relative;}
.deck{position:relative;z-index:1;}
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(5.4*var(--u)) calc(6*var(--u));color:var(--ink);margin:-28px -16px 0;padding-left:max(calc(5.4*var(--u)),24px);padding-right:max(calc(5.4*var(--u)),24px);}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,3,6,.35) 0%,rgba(3,3,6,0) 30%,rgba(3,3,6,0) 55%,rgba(3,3,6,.72) 100%);pointer-events:none;}
.hero .brandmark{position:absolute;top:calc(4*var(--u));left:max(calc(5.4*var(--u)),24px);font-family:var(--disp);font-size:max(var(--fmin),calc(1.25*var(--u)));font-weight:700;letter-spacing:.4em;}
.hero .brandmark::after{content:"";display:block;margin-top:calc(.7*var(--u));height:2px;width:0;background:var(--grad);animation:brline 1.6s .6s cubic-bezier(.2,.7,.2,1) forwards;}
.hero h1{max-width:min(1040px,88%);font-size:clamp(28px,4.2vw,58px);text-shadow:0 2px 24px rgba(0,0,0,.6);animation:heroIn 1.2s .2s cubic-bezier(.2,.7,.2,1) both;}
.hero .metaline{margin-top:calc(3.4*var(--u));animation:heroIn 1.2s .6s cubic-bezier(.2,.7,.2,1) both;}
.hero .metaline span{font-size:max(var(--fmin),calc(2.1*var(--u)));font-weight:700;color:#F8F8FA;white-space:nowrap;font-family:var(--jp);letter-spacing:.06em;}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-scroll{position:absolute;right:max(calc(5.4*var(--u)),24px);bottom:calc(6*var(--u));font-family:var(--disp);font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;animation:heroIn 1.2s 1s both;}
.hero-scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--a2),transparent);animation:scrollHint 1.8s ease-in-out infinite;}
@keyframes scrollHint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero .metaline,.hero-scroll{animation:none}.hero-scroll i{animation:none}}
.slide:not(.light){background:rgba(7,7,12,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.slide.cover{background:rgba(7,7,12,.74);}
@media (max-width:767px){
  .hero{margin:-10px -8px 0;padding:0 20px 44px;}
  .hero .brandmark{top:28px;left:20px;font-size:12px;}
  .hero h1{max-width:100%;font-size:clamp(24px,6.4vw,28px)!important;line-height:1.3;}
  .hero .metaline{flex-wrap:wrap;gap:8px 16px;margin-top:22px;padding-top:14px;}
  .hero .metaline span{font-size:13px!important;}
  .hero-scroll{right:20px;bottom:44px;}
  .slide:not(.light){background:rgba(7,7,12,.78);}
}

/* =====================================================================
   映像の主役（指先・ホログラム）を隠さないレイアウト（2026-09-09）
   - PC：資料を左側（幅60vw・最大920px）に寄せ、右側を映像の領域として空ける
   - SP：映像を画面上部40%の固定バンドに置き、資料はその下をスクロールする
   ===================================================================== */
@media (min-width:1024px){
  :root{--u:calc(1cqw + 1.5px);--fmin:12px;}    /* 資料が細くなるぶん基準単位を底上げ */
  .deck{max-width:min(920px,60vw);margin:0 0 0 max(24px,4vw);}
  .slide{aspect-ratio:auto;}                    /* 高さは内容に合わせる */
  .slide h2{font-size:min(calc(4.7*var(--u)),5.4cqw);}      /* 見出しが1文字だけ折り返さないよう上限を設定 */
  .slide.tight h2{font-size:min(calc(4.1*var(--u)),5.2cqw);}
  html,body{overflow-x:clip;}
  .hero{width:100vw;margin-left:calc(-16px - max(24px,4vw));margin-right:0;}
}
@media (max-width:767px){
  #heroCv{height:40vh;height:40dvh;z-index:5;}   /* 上部バンド：資料の上に重ねて常に見える */
  #heroCv::after{content:"";}
  .hero-band-edge{position:fixed;left:0;right:0;top:calc(40vh - 28px);top:calc(40dvh - 28px);height:28px;z-index:6;pointer-events:none;background:linear-gradient(180deg,rgba(3,3,6,0),#030306);}
  .hero{min-height:100vh;min-height:100dvh;padding-top:42vh;padding-top:42dvh;}
  .hero .brandmark{display:none;}               /* バンドと重なるため非表示 */
}

/* =====================================================================
   映像の上に資料を直接置くレイアウト（2026-09-09 第2版）
   - スライドの箱（背景・枠・影）を外し、映像の上に文字を直接置く
   - 画面左側だけを暗くする「覆い（veil）」で可読性を確保し、右側の主役は素通し
   - 各スライドの内容は右側の主役ゾーンに入らないよう、右に余白を取る
   - ライト（白背景）スライドはダーク配色に統一
   ===================================================================== */
#heroVeil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,3,6,.80) 0%,rgba(3,3,6,.74) 42%,rgba(3,3,6,.30) 64%,rgba(3,3,6,0) 76%);}
.deck{z-index:2;}
@media (min-width:1024px){
  .deck{max-width:1280px;margin:0 auto;}
  .hero{margin-left:-16px;margin-right:-16px;width:auto;}
  /* 箱を外す */
  .slide,.slide:not(.light),.slide.cover,.slide.light{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;overflow:visible;}
  .slide::before,.slide::after,.slide .grid{display:none;}
  /* 右側＝主役ゾーンを空ける（画面幅の72%より右に内容を置かない） */
  .slide{padding-right:max(calc(640px - 20vw),calc(5.4*var(--u)));padding-top:calc(3.6*var(--u));padding-bottom:calc(3.6*var(--u));}
  .slide.cover{padding-right:max(calc(640px - 20vw),calc(5.4*var(--u)));}
  .slide.cover .orb,.slide.cover .orb2,.slide.cover .orb3{display:none;}
  .num{right:auto;left:calc(5.4*var(--u));top:calc(1.4*var(--u));}
  .deck{gap:calc(2*var(--u));}
  /* ライトスライドをダーク配色に統一 */
  .slide.light{color:var(--ink);}
  .slide.light p,.slide.light li,.slide.light .hl,.slide.light li .hl,.slide.light p.lead,.slide.light td{color:var(--ink);}
  .slide.light p{color:var(--muted);}
  .slide.light p.lead,.slide.light .hl,.slide.light li .hl{color:var(--ink);}
  .slide.light .src,.slide.light .note{color:var(--faint);}
  .slide.light .num{color:var(--faint);}
  .slide.light th,.slide.light td{border-bottom-color:var(--line);}
  .slide.light .card{background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.028) 55%);border-color:var(--line);box-shadow:none;}
  .slide.light .card.key{background-image:linear-gradient(#12121B,#12121B),var(--grad);}
  .slide.light .card h4{color:var(--ink);}
  .slide.light .card p{color:var(--muted);}
  .slide.light .fig::after{color:var(--faint);}
  /* 06 世代パネル */
  .gen.past{background:rgba(255,255,255,.05);border-color:var(--line);}
  .gen .name,.gen .verb,.gen .ana b{color:var(--ink);}
  .gen .as,.gen .role,.gen .ana,.gen .mtxt,.gen .idx{color:var(--muted);}
  .gen .verb{border-top-color:var(--line);}
  .gen .mpill{background:rgba(255,255,255,.10);color:var(--ink);}
  .gen .idx[style],.gen .as[style],.gen .role[style],.gen .verb[style]{color:var(--muted)!important;}
  .gen .verb[style]{color:var(--ink)!important;}
  .thumb{background:rgba(255,255,255,.06);}
  /* 10 クイズ図（黒文字を白に） */
  #quizSvg text[fill="#08080C"],#quizSvg text[fill="#5A5A68"]{fill:#F8F8FA;}
  #quizSvg text[fill="#8A5FE0"]{fill:#C79BFF;}
  #quizSvg rect[fill="#DEDEE8"]{fill:rgba(255,255,255,.12);}
  #quizSvg rect[fill="#A8A8B8"]{fill:#6E6E82;}
  #quizSvg path[stroke="#B67DFF"]{stroke:#B67DFF;}
  /* 03 図（見出しラベル） */
  .slide.light .fig svg text[fill="#6C6C7C"]{fill:#9C9CAA;}
  /* 15 実績（白カードは維持。周囲の文字はダーク配色） */
  .slide.light .bignums+p{color:var(--muted);}
  /* 表紙（17）の連絡先 */
  .slide.cover .metaline span{color:var(--muted);}
}
@media (max-width:767px){
  #heroVeil{display:none;}
}

/* =====================================================================
   カード枠をなくし、映像の上に資料を直接置くレイアウト（2026-09-09 v3）
   - スライドの背景・枠・ノイズ・罫線をすべて除去。全スライドをダーク基調に統一
   - PC：本文は左側（幅64vw・最大1000px）に配置し、右側の主役（指先・ホログラム）と重ねない
   - ライト系スライド（03/06/10/13/15）の文字色・図解色をダーク用に置換
   ===================================================================== */
.slide,.slide.light,.slide.cover,.slide:not(.light){background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;color:var(--ink);}
.slide::before,.slide::after,.slide .grid{display:none;}
.slide.light p{color:var(--muted);}
.slide.light p.lead,.slide.light .hl,.slide.light li .hl{color:var(--ink);}
.slide.light li{color:var(--muted);}
.slide.light .num{color:var(--faint);}
.slide.light .src,.slide.light .note{color:var(--faint);}
.slide.light .card{background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.028) 55%);border-color:var(--line);box-shadow:none;}
.slide.light .card.key{background-image:linear-gradient(#12121B,#12121B),var(--grad);}
.slide.light th,.slide.light td{border-bottom-color:var(--line);}
.slide.light td{color:var(--ink);}
.slide.light .incl{background:rgba(255,255,255,.05);}
.slide.light .card .k{color:var(--a2);}
/* 06 世代パネル */
.gen.past{background:rgba(255,255,255,.05);border-color:var(--line);}
.gen .verb{border-top-color:rgba(255,255,255,.14);color:#E9E9F0;}
.gen .role,.gen .as,.gen .mtxt{color:#B9B9C6;}
.gen .ana{color:#B9B9C6;}
.gen .ana b{color:#fff;}
.gen .mpill{background:rgba(255,255,255,.12);color:#E9DFFF;}
.gen .idx{color:#B9B9C6;}
.thumb{background:rgba(255,255,255,.06);}
.slide.light .gen.past .idx,.slide.light .gen.past .as,.slide.light .gen.past .role,.slide.light .gen.past .verb{color:#E9E9F0!important;}
.slide.light .gen.past .thumb svg rect,.slide.light .gen.past .thumb svg path{fill:rgba(255,255,255,.18);}
/* 03・10 の図解（ライト用の色をダーク用に） */
.slide.light .fig svg text[fill="#08080C"]{fill:#F8F8FA;}
.slide.light .fig svg text[fill="#3A3A48"]{fill:#F8F8FA;}
.slide.light .fig svg text[fill="#5A5A68"],.slide.light .fig svg text[fill="#6C6C7C"]{fill:#B9B9C6;}
.slide.light .fig svg text[fill="#8A5FE0"]{fill:#C79BFF;}
.slide.light .fig svg rect[fill="#E6E6EE"],.slide.light .fig svg rect[fill="#DEDEE8"]{fill:rgba(255,255,255,.10);}
.slide.light .fig svg g[stroke="#6C6C7C"]{stroke:#B9B9C6;}
.slide.light .fig svg path[stroke="#B67DFF"]{stroke:#B67DFF;}
/* 15 実績数字は白いタイルのまま（強調要素として残す） */

@media (min-width:1024px){
  .deck{max-width:none;margin:0;gap:0;}
  .slide{width:min(64vw,1000px);padding:calc(7*var(--u)) 0 calc(7*var(--u)) max(calc(5.4*var(--u)),24px);margin-left:-16px;}
  .slide.cover{padding-bottom:calc(9*var(--u));}
  .num{right:auto;left:max(calc(5.4*var(--u)),24px);top:calc(2.2*var(--u));}
  .hero{margin-left:-16px;}
  .cover .orb,.cover .orb2,.cover .orb3{display:none;}
}
@media (max-width:767px){
  .slide{padding:34px 16px 34px;}
  .deck{gap:0;}
  .num{top:10px;right:16px;}
}

/* 05：同業他社4サイト（画像モックアップ）＋御社（モックアップ枠に動画をはめ込み） */
.sites{display:flex;align-items:flex-end;gap:calc(1.2*var(--u));margin-top:calc(2.6*var(--u));margin-bottom:calc(1*var(--u));}
.site{flex:1 1 0;min-width:0;margin:0;opacity:.78;}
.site img{width:100%;height:auto;display:block;border-radius:6px;}
.site.ours{flex:1.7 1 0;opacity:1;text-align:center;}
.site.ours .mock{position:relative;filter:drop-shadow(0 0 calc(2.2*var(--u)) rgba(182,125,255,.45));}
.site.ours video{position:absolute;left:12.8%;top:5.6%;width:74.6%;height:72.1%;object-fit:cover;background:#000;}
.site.ours figcaption{font-size:max(var(--fmin),calc(1.3*var(--u)));color:#C79BFF;font-weight:700;margin-top:calc(.7*var(--u));letter-spacing:.06em;}
@media (max-width:767px){
  .sites{flex-wrap:wrap;justify-content:center;gap:10px;}
  .site{flex:0 0 calc(50% - 5px);}
  .site.ours{flex:0 0 80%;order:1;margin-top:6px;}  /* SPは他社4サイトを上、御社を下に */
}

/* アイコンをマテリアルアイコン（塗り）に統一したため、線画前提の指定を解除 */
.ico svg{fill:url(#ic);stroke:none;}
.incl-g .ico svg{fill:url(#icg);stroke:none;}

/* =====================================================================
   ヒーロー内で完結するスクロール連動映像（2026-09-10 v4）
   - .hero-pin：画面5枚分の高さの透明な箱。中の .hero-stage を sticky で画面に貼り付ける
   - 箱の中を進んだ割合（0〜100%）で映像のコマを進める（hero.js）
   - 表紙文字は箱の先頭20%を過ぎると徐々に消え、以降は映像だけを見せる
   - 箱を抜けると02枚目以降が通常スクロールで現れる（映像なし・ダーク背景・PCは中央寄せ）
   ===================================================================== */
.hero-pin{position:relative;z-index:2;height:500vh;margin:-28px -16px 0;}
.hero-stage{position:-webkit-sticky;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#030306;}
#heroCv{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:0;}
#heroVeil{position:absolute;inset:0;z-index:1;display:block;}
.hero-stage .hero{position:absolute;inset:0;z-index:2;margin:0!important;width:auto!important;min-height:0;height:100%;}
.hero-stage .hero::after{z-index:-1;}
/* 表紙文字のフェード（hero.js が --hero-fade を 1→0 に更新） */
.hero-stage .hero .brandmark,.hero-stage .hero h1,.hero-stage .hero .metaline,.hero-stage .hero-scroll{opacity:var(--hero-fade,1);transition:none;}
.hero-stage.faded .hero h1,.hero-stage.faded .hero .metaline,.hero-stage.faded .hero .brandmark,.hero-stage.faded .hero-scroll{animation:none;}
.deck{position:relative;z-index:3;background:#030306;padding-top:calc(2*var(--u));}
@media (min-width:1024px){
  .hero-pin{margin-left:-16px;margin-right:-16px;}
  .hero-stage .hero{margin-left:0!important;}
  /* 02〜17枚目：映像がなくなるため中央寄せ（最大幅1000px） */
  .deck{max-width:1000px;margin:0 auto;}
  .slide{width:auto;margin-left:0;padding-left:max(calc(2.7*var(--u)),16px);padding-right:max(calc(2.7*var(--u)),16px);} /* 左右合計は左寄せ時と同じ＝折り返し位置を変えない */
  .num{left:max(calc(2.7*var(--u)),16px);}
}
@media (max-width:767px){
  .hero-pin{height:400vh;margin:-10px -8px 0;}
  #heroCv{height:100%!important;z-index:0!important;}
  .hero-band-edge{display:none;}
  .hero-stage .hero{padding-top:0!important;justify-content:flex-end;}
  .hero-stage .hero .brandmark{display:block;}
  #heroVeil{display:block;background:linear-gradient(180deg,rgba(3,3,6,.30) 0%,rgba(3,3,6,0) 30%,rgba(3,3,6,0) 50%,rgba(3,3,6,.82) 100%);}
}

/* =====================================================================
   図解SVGのスマホ縦組み（2026-09-10 v5）
   - 横スクロールを廃止。SPでは各SVGの viewBox を縦長に切り替え（deck.js）、
     中のパーツをCSSの transform で縦に並べ替える（同じDOM・同じIDのまま）
   ===================================================================== */
.spOnly{display:none;}
@media (max-width:767px){
  .fig{overflow:visible;padding-bottom:0;}
  .fig::after{content:none;}
  .slide .fig svg,.slide.tight .fig svg{min-width:0;width:100%;max-height:none;display:block;}
  .pcOnly{display:none;} .spOnly{display:initial;}
  .rsvg *{transform-box:view-box;transform-origin:0 0;}

  /* 03：止まっているもの → ↓ → 動いているもの */
  #mediaSvg .hL{transform:translate(-20px,0);}
  #mediaSvg .hA{transform:translate(220px,272px) rotate(90deg) scale(.5) translate(-478px,-132px);}
  #mediaSvg .hR{transform:translate(-525px,340px);}

  /* 04：2列の縦チェーン（左＝動かない／右＝触れる） */
  #tapSvg .b1{transform:translate(4px,0);}
  #tapSvg .a1{transform:translate(110px,112px) rotate(90deg) scale(.7,1) translate(-226px,-46px);}
  #tapSvg .br{transform:translate(-300px,179px);}
  #tapSvg .a2{transform:translate(110px,292px) rotate(90deg) scale(.7,1) translate(-466px,-46px);}
  #tapSvg .rs rect{x:4px;y:368px;width:212px;}
  #tapSvg .rs text{transform:translate(-670px,360px);font-size:18px;}
  #tapSvg #tapZone{transform:translate(224px,-118px);}
  #tapSvg #tapHint{transform:translate(0,-135px);}
  #tapSvg #tr1{transform:translate(330px,112px) rotate(90deg) scale(.7,1) translate(-226px,-164px);}
  #tapSvg #tr2{transform:translate(-80px,61px);}
  #tapSvg #tr3{transform:translate(330px,292px) rotate(90deg) scale(.7,1) translate(-466px,-164px);}
  #tapSvg #memCard rect{x:224px;y:368px;width:212px;}
  #tapSvg #memCard text{transform:translate(-450px,242px);font-size:18px;}
  #tapSvg #memCard{transform-origin:330px 406px!important;}

  /* 09：見出し → 静的サイト → 体験型サイト */
  #bowlSvg .hH{transform:translate(-270px,0);}
  #bowlSvg .dv{display:none;}
  #bowlSvg .hL{transform:translate(-10px,-40px);}
  #bowlSvg .hR{transform:translate(-530px,165px);}

  /* 10：棒グラフを画面幅いっぱいに */
  #quizSvg .r1l{transform:translate(0,12px);}
  #quizSvg .bg1{x:0;y:80px;width:440px;height:42px;}
  #quizSvg .fl1{x:0;y:80px;width:216px;height:42px;}
  #quizSvg .t49{transform:translate(-321px,41px);font-size:18px;}
  #quizSvg .r2l{transform:translate(0,14px);}
  #quizSvg .bg2{x:0;y:160px;width:440px;height:42px;}
  #quizSvg #qzBar{x:0;y:160px;height:42px;}
  #quizSvg #qzPct{transform:translate(-277px,43px);font-size:18px;}
  #quizSvg #qzAsk{transform:translate(-240px,43px);font-size:15px;}
  #quizSvg #qzAsk tspan{font-size:13px;}

  /* 12：比較される側／指名される側を縦に */
  #cmpSvg .l1,#cmpSvg .b1a{transform:translate(76px,0);}
  #cmpSvg .a1a{transform:translate(220px,82px) rotate(90deg) scale(.55,1) translate(-300px,-51px);}
  #cmpSvg .b1b{transform:translate(-316px,104px);}
  #cmpSvg .a1b{transform:translate(220px,186px) rotate(90deg) scale(.55,1) translate(-692px,-51px);}
  #cmpSvg .b1c{transform:translate(-662px,208px);}
  #cmpSvg .l2,#cmpSvg .b2a{transform:translate(76px,194px);}
  #cmpSvg .a2a{transform:translate(220px,382px) rotate(90deg) scale(.55,1) translate(-300px,-157px);}
  #cmpSvg .b2b{transform:translate(-316px,298px);}
  #cmpSvg .a2b{transform:translate(220px,486px) rotate(90deg) scale(.55,1) translate(-692px,-157px);}
  #cmpSvg .b2c{transform:translate(-662px,402px);}
  #cmpSvg .a2a line,#cmpSvg .a2b line{stroke:#B67DFF;} /* 縦にするとグラデーション線が消えるため単色に */
}

/* =====================================================================
   スマホ共通レスポンシブルール（2026-09-11 v6）— 全セクション共通
   - 左右の余白は親コンテナ（.deck）だけで管理：--gutter = clamp(15px, 4.5vw, 20px)
   - 各セクション（.slide）は width:100%・左右padding 0。内部要素は親幅に追従（固定幅禁止）
   - 画像・動画・SVG・表・カードはすべて max-width:100%。nowrap は解除して折り返す
   - どの画面幅でも横スクロールを出さない（html/body で横方向をクリップ）
   ===================================================================== */
@media (max-width:767px){
  :root{--gutter:clamp(15px,4.5vw,20px);}
  html,body{overflow-x:clip;max-width:100%;}
  body{padding:0;}
  .hero-pin{margin:0;width:100%;}
  .hero-stage .hero{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;}
  .hero-stage .hero .brandmark{left:var(--gutter);}
  .hero-stage .hero-scroll{right:var(--gutter);}
  /* 親コンテナ：ここだけが左右余白を持つ */
  .deck{width:100%;max-width:none;margin:0;padding:0 var(--gutter) 40px;box-sizing:border-box;gap:0;}
  /* セクション：親幅いっぱい・左右余白なし */
  .slide{width:100%;max-width:100%;margin:0;padding-left:0;padding-right:0;border-radius:0;box-sizing:border-box;}
  .slide.cover{overflow:hidden;}
  .num{right:0;}
  /* 内部要素：親幅に追従（固定幅の禁止） */
  .slide *{min-width:0;max-width:100%;box-sizing:border-box;}
  .slide img,.slide video,.slide iframe,.slide canvas{width:100%;height:auto;display:block;}
  .slide .fig svg{width:100%;height:auto;}
  .slide table{width:100%;table-layout:fixed;}
  .slide th,.slide td{overflow-wrap:anywhere;}
  .slide h1,.slide h2,.slide h3,.slide h4,.slide p,.slide li,.slide span,.slide b,.slide div{overflow-wrap:anywhere;}
  .slide [style*="white-space:nowrap"],.slide [style*="white-space: nowrap"],.slide .nowrap{white-space:normal!important;}
  .bn.zerocard .zc-front>div:last-child{white-space:normal;}
  .slide [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  .slide [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}
  .slide [style*="display:flex"]{flex-wrap:wrap;}
  /* 幅を%基準に（端末幅が狭いほど縮む） */
  .phone.tall,.slide.tight .phone.tall{width:min(150px,60%);}
  .demo2 .phone{width:min(118px,42%);}
  .demo2 .phone.mid{width:min(150px,50%);}
  .site{flex:1 1 calc(50% - 5px);}
  .site.ours{flex:1 1 80%;}
  .cover .orb,.cover .orb2,.cover .orb3{max-width:none;}
  .cover .orb3{right:-20%;}
}

/* =====================================================================
   視認性・アクセシビリティ（2026-09-11 v7）— Material Design / WCAG AA 準拠
   - 補助文字の色を 4.5:1 以上に引き上げ（背景に溶ける薄グレーを廃止）
   - 文字サイズの下限：14px（ラベル含む）。本文16px、見出しは段階スケール
   - CTA（塗りボタン）・連絡先リンク・フォーカスリング・動きを減らす設定への対応
   ===================================================================== */
:root{--faint:#A2A2B2;--muted:#B4B4C2;}            /* faint 8.8:1 / muted 10.9:1（背景 #030306 上） */
.slide .src,.slide .note,.num{color:var(--faint);}
/* SVG内の薄い文字（旧 #7A7A88 / #8A8A98 / #6C6C7C）を明るく */
.fig svg text[fill="#7A7A88"],.fig svg text[fill="#8A8A98"],.fig svg text[fill="#6C6C7C"],.fig svg text[fill="#5A5A68"]{fill:#B4B4C2;}
.fig svg text[fill="#57576A"]{fill:#9C9CAA;}
/* SVG内の小さなラベルは14単位以上に（viewBox 440 基準で実寸約12.4〜14px） */
.fig svg text[font-size="11.5"],.fig svg text[font-size="13"],.fig svg text[font-size="13.5"]{font-size:14px;}
#quizSvg #qzAsk tspan{font-size:14px;}
/* フォーカスリング（キーボード操作時のみ） */
[role="button"]:focus-visible,a:focus-visible{outline:3px solid #D9C2FF;outline-offset:3px;border-radius:6px;}
svg[role="button"]:focus-visible{outline-offset:6px;}
/* CTA（17枚目） */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(2.4*var(--u));}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--grad);color:#0A0A10;font-weight:900;font-size:max(16px,calc(1.7*var(--u)));text-decoration:none;letter-spacing:.02em;box-shadow:0 8px 24px rgba(150,120,255,.28);transition:transform .15s,box-shadow .15s;}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(150,120,255,.38);}
.cta.ghost{background:transparent;color:var(--ink);border:2px solid rgba(255,255,255,.55);box-shadow:none;}
.cta.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.metaline a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:44px;line-height:44px;}
/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
/* PC：文字の下限を14pxに（従来12px） */
@media (min-width:1024px){ :root{--fmin:14px;} }
/* スマホ：6段階タイプスケール（14 / 16 / 18 / 20 / 24 / 28） */
@media (max-width:767px){
  :root{--fmin:14px;}
  h1{font-size:clamp(26px,7vw,30px)!important;line-height:1.3;}
  h2{font-size:clamp(24px,6.6vw,28px)!important;line-height:1.36;}
  .slide p,.slide li,.slide.tight p,.slide td,.slide th,.slide.tight th,.slide.tight td,.slide.tight .g2 th,.slide.tight .g2 td,.slide .card p,.slide.tight .card p,.slide.tight .g2 .card p,.slide.tight .g4 .card p,.slide.tight .card.sm p,.slide .card.ic p{font-size:16px;line-height:1.75;}
  .slide p.lead,.slide.tight p.lead,.slide.tight .lead{font-size:18px;line-height:1.7;}
  .slide .card h4,.slide.tight .card h4,.slide.tight .g2 .card h4,.slide.tight .g4 .card h4,.slide.tight .card.sm h4,.slide .card.ic h4{font-size:18px;}
  .slide .src,.slide .note,.slide.tight .note,.num,.fcard .fc-hint,.metaline span,.dlab,.dname,.dcol .url,.bn .t,.gen .as,.gen.now .as,.gen .mtxt,.gen .mpill,.incl-f,.slide.tight .incl-f,.incl-g span:last-child,.slide.tight .incl-g span:last-child,.pat .cond span,.slide.tight .pat .cond span,.bn.zerocard .zc-front>div:last-child{font-size:14px!important;line-height:1.6;}
  .gen .role,.gen.now .role,.gen .ana,.gen.now .ana,.gen .verb,.gen.now .verb,.pat .desc,.slide.tight .pat .desc,.incl-g b,.slide.tight .incl-g b,.incl-h,.slide.tight .incl-h{font-size:16px;line-height:1.7;}
  .gen .name{font-size:18px;} .gen.now .name{font-size:20px;}
  .pat .ttl,.slide.tight .pat .ttl{font-size:20px;}
  .slide td.n{font-size:17px;}
  .hero-scroll{font-size:14px;color:var(--muted);}
  .cta{width:100%;min-height:56px;font-size:17px;}
  .metaline a{min-height:48px;line-height:48px;}
}
@media (max-width:767px){ .cover .orb,.cover .orb2,.cover .orb3{opacity:.35;} } /* 17：装飾リングが見出しに被って読みにくくならないよう薄く */

/* 07：体験カードの動画（2026-09-11）— SVGアイコンを実写動画に差し替え。親幅に追従し角丸で収める */
.card.ic .scene video{display:block;width:100%;height:auto;border-radius:12px;background:#0A0A10;object-fit:cover;aspect-ratio:16/9;}
@media (max-width:767px){ .card.ic .scene{width:100%;} }
/* 07：スマホは1列にして動画を大きく（2026-09-11） */
@media (max-width:767px){
  .g5{grid-template-columns:1fr;gap:14px;}
  .g5>.card:nth-child(5){grid-column:auto;}
  .card.ic .scene,.slide.tight .g5>.card:nth-child(5) .scene,.g5>.card:nth-child(5) .scene{width:100%;}
}

/* 08：デモのURL文字列を遷移ボタンに（2026-09-11）— タップで別タブに開く。高さ48px以上 */
.dbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:calc(1*var(--u));}
.dbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid rgba(182,125,255,.6);background:rgba(182,125,255,.10);color:var(--ink);font-weight:700;font-size:max(14px,calc(1.3*var(--u)));text-decoration:none;line-height:1.3;text-align:center;transition:background .15s,border-color .15s;}
.dbtn:hover{background:rgba(182,125,255,.22);border-color:#C79BFF;}
.dcol.key .dbtn{background:var(--grad);color:#0A0A10;border-color:transparent;}
.dcol.key .dbtn:hover{filter:brightness(1.08);}
@media (max-width:767px){ .dbtns{flex-direction:column;} .dbtn{width:100%;min-height:50px;font-size:15px;} }

/* 06：第1世代のサムネを、05枚目で使った従来型サイトの実画像に差し替え（2026-09-11） */
.gen1shot,.gen .thumb.gen1shot{overflow:hidden;padding:0;height:auto;aspect-ratio:536/361;position:relative;}
/* c1.webp（720×480・モニター枠付き）から画面部分（x92〜628, y14〜375）だけを切り出して表示 */
.gen .thumb.gen1shot img,.gen1shot img{position:absolute;height:auto!important;object-fit:unset;width:134.3%;height:auto;left:-17.2%;top:-2.6%;max-width:none;display:block;filter:saturate(.8);}

/* =====================================================================
   改行位置の整え（2026-09-11）— PC・SP共通
   - 見出しは text-wrap:balance（行の長さを均等に。1文字だけ次行に落ちるのを防ぐ）
   - 本文は text-wrap:pretty（最終行が短くなりすぎないよう調整）
   - 文節の途中で折らない：word-break:keep-all（切れ目は assets/jp-wrap.js が文節判定で入れる）
   - 幅はすべて親幅に追従（固定pxなし）
   ===================================================================== */
h1,h2,h3,h4,.card h4,.pat .ttl,.gen .name{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;}
.slide p,.slide li,.slide td,.slide th,.hero h1,.gen .role,.gen .ana,.gen .verb,.pat .desc,.bn .t,.incl-g b,.incl-g span,.incl-f,.note,.src{text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;}
.metaline span,.dbtn,.cta{text-wrap:balance;}
.jw{display:inline-block;word-break:keep-all;overflow-wrap:anywhere;max-width:100%;}
.slide.cover h1{text-wrap:pretty;}

/* 17：見出しを親幅いっぱいに（「」で括った語を途中で折らないため） */
@media (min-width:1024px){ .slide.cover h1{max-width:100%;} }

/* 14枚目：0円のカードをタップするまで、下の段落は隠す（2026-09-12） */
.zc-after{display:none;}
.zc-after.show{display:block;animation:heroIn .6s ease both;}

/* =====================================================================
   ページ番号の自動採番と、料金ページの表示切替
   - .num の数字はCSSが出す。display:none のページは番号を消費しないため、
     料金ページを隠すと 02〜15、戻すと 02〜16 に自動で揃う
   - 復活させるときは index.html の <body class="hide-pricing"> から
     class="hide-pricing" を削除するだけでよい
   ===================================================================== */
body.hide-pricing .pricing-slide{display:none;}
.n-hidden{display:none;}
body.hide-pricing .n-shown{display:none;}
body.hide-pricing .n-hidden{display:inline;}

/* ページ番号はHTMLに直書き運用（カウンター廃止）。スライド区切り線： */
.deck .slide{border-top:1px solid rgba(255,255,255,.18);}