/* CUTTO LP — 白基調・洗練。ブランド色は本体と同じ (#FF5A1F / #FAFAF7 / #111113)
   方針: 細い線と余白で見せる。影は柔らかく薄く。動きは短く (0.2〜0.6s)、跳ねない */
:root {
  --paper: #FAFAF7;
  --white: #ffffff;
  --ink: #111113;
  --ink2: #45454c;
  --mute: #86868e;
  --line: #E6E4DE;
  --line2: #EFEDE8;
  --soft: #F4F3EF;
  --ac: #FF5A1F;
  --ac-d: #E64A12;
  --tint: #FFF3EC;
  --ac2: #FFB547;
  --jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --jpH: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --en: "Inter", "Helvetica Neue", sans-serif;
  --r: 20px;
  --gut: 20px;
  --e: cubic-bezier(.16, 1, .3, 1);
  --sh: 0 1px 2px rgba(17,17,19,.04), 0 8px 24px rgba(17,17,19,.05);
  --sh-lg: 0 1px 2px rgba(17,17,19,.05), 0 24px 60px -12px rgba(17,17,19,.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--en), var(--jp); font-weight: 400; line-height: 1.8; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b { font-weight: 700; }
.ac { color: var(--ac); }
.en { font-family: var(--en); letter-spacing: -.02em; }
.center { text-align: center; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 780px; }
.pc { display: none; }
@media (min-width: 900px) { .pc { display: inline; } :root { --gut: 40px; } }

.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--ac); transform-origin: 0 50%; transform: scaleX(0); z-index: 80; }

/* 見出し */
.tag { display: flex; align-items: center; gap: 10px; color: var(--ac); font-weight: 700; font-size: 13px; letter-spacing: .08em; margin-bottom: 16px; }
.tag::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.h-hero, .h2, .h3, .final-logo, .pain-turn { font-family: var(--jpH); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; font-feature-settings: "palt"; }
.h-hero { font-size: clamp(40px, 11vw, 76px); line-height: 1.16; letter-spacing: -.035em; font-weight: 900; }
.h-hero .ln { display: block; white-space: nowrap; }
.logo-word { font-style: normal; font-family: var(--en); font-weight: 800; letter-spacing: -.05em; color: var(--ac); }
.h2 { font-size: clamp(28px, 7vw, 44px); margin-bottom: 22px; }
.h3 { font-size: clamp(21px, 5vw, 26px); margin-bottom: 12px; }
.lead { color: var(--ink2); font-size: 15px; }
@media (min-width: 900px) { .lead { font-size: 16px; } .h-hero { font-size: min(5.4vw, 72px); } }
.mark { white-space: nowrap; background: linear-gradient(transparent 64%, rgba(255,90,31,.22) 64%); background-size: 0 100%; background-repeat: no-repeat; transition: background-size .8s .5s var(--e); }
.ready .mark { background-size: 100% 100%; }

/* ボタン */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ac); color: #fff; font-weight: 700; border-radius: 999px; padding: 12px 22px; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(17,17,19,.1), inset 0 1px 0 rgba(255,255,255,.18); transition: background .2s, transform .2s var(--e), box-shadow .2s; white-space: nowrap; }
.btn:hover { background: var(--ac-d); box-shadow: 0 8px 20px -6px rgba(255,90,31,.55); }
.btn:active { transform: scale(.98); }
.btn.sm { padding: 8px 16px; font-size: 13px; }
.btn.lg { padding: 15px 28px; font-size: 16px; }
.btn.xl { padding: 18px 40px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px #cfccc4; }
.btn .arw { transition: transform .25s var(--e); }
.btn:hover .arw { transform: translateX(3px); }
.ck { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); display: inline-grid; place-items: center; flex: none; }
.ck::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }

/* ヘッダー */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 16px;
  padding: 14px var(--gut); padding-top: max(14px, env(safe-area-inset-top)); transition: background .3s, box-shadow .3s; }
.hd.on { background: rgba(250,250,247,.82); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--en); font-weight: 800; font-size: 19px; letter-spacing: -.04em; }
.logo img { width: 26px; height: 26px; }
.hd-nav { display: none; gap: 30px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink2); }
.hd-nav a { transition: color .2s; }
.hd-nav a:hover { color: var(--ink); }
.hd .btn { margin-left: auto; }
@media (min-width: 900px) { .hd-nav { display: flex; } .hd .btn { margin-left: 12px; } }

/* HERO */
.hero { position: relative; padding-top: 104px; overflow: hidden; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(50% 60% at 85% 20%, rgba(255,90,31,.10), transparent 70%),
  radial-gradient(40% 50% at 10% 90%, rgba(255,181,71,.08), transparent 70%); }
.hero-in { display: grid; gap: 40px; align-items: center; }
.hero-sub { font-weight: 700; font-size: clamp(16px, 4.2vw, 18px); margin: 22px 0 10px; line-height: 1.7; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 20px; }
.cta-row .btn { flex: 1 1 auto; }
.assure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ink2); }
.assure li { display: inline-flex; align-items: center; gap: 7px; }
.assure .ck { width: 16px; height: 16px; background: var(--ac); }
.hero-video { position: relative; }
.vframe { position: relative; border-radius: 18px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px rgba(17,17,19,.06), 0 40px 80px -20px rgba(17,17,19,.35), 0 20px 30px -20px rgba(17,17,19,.2); }
.vframe.vert { aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; }
.vframe video { width: 100%; height: 100%; object-fit: cover; }
.sound { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--ink); font-size: 12px; font-weight: 700; transition: background .2s; }
.sound:hover { background: #fff; }
.sound .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.sound.on .dot { background: var(--ink); }
.hchips { position: absolute; inset: 0; pointer-events: none; }
.hc { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 12px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(17,17,19,.05), 0 12px 30px -8px rgba(17,17,19,.22); font-size: 12px; color: var(--ink2); white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--e), transform .6s var(--e); }
.hc i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--ac); color: #fff; }
.hc i svg { width: 13px; height: 13px; }
.hc b { color: var(--ink); font-weight: 700; }
.ready .hc { opacity: 1; transform: none; }
.hc.c1 { left: -16px; top: 12%; transition-delay: .9s; }
.hc.c2 { right: -16px; top: 38%; transition-delay: 1.1s; }
.hc.c3 { right: 8%; bottom: 56px; transition-delay: 1.3s; }
.vcap { margin-top: 18px; text-align: center; font-size: 12px; color: var(--mute); }
@media (min-width: 900px) {
  .hero { padding-top: 150px; }
  .hero-in { grid-template-columns: 1fr 1.12fr; gap: 72px; }
  .cta-row .btn { flex: 0 0 auto; }
}
.marquee { margin-top: 88px; overflow: hidden; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 50s linear infinite; }
.mq-track span { font-size: 14px; font-weight: 500; padding: 0 28px; color: var(--ink2); white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; }
.mq-track span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ac); }
@keyframes mq { to { transform: translateX(-50%); } }

/* セクション */
.sec { position: relative; padding: 96px 0; }
@media (min-width: 900px) { .sec { padding: 136px 0; } }
.sec.cutl::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e); }
.sec.cutl.cutin::before { transform: scaleX(1); }

/* PAIN */
.pain-grid { display: grid; gap: 12px; margin-top: 12px; }
.pcard { position: relative; padding: 26px 24px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line2); font-weight: 500; font-size: 15px; line-height: 1.8; }
.pnum { display: block; font-family: var(--en); font-weight: 600; font-size: 12px; color: var(--mute); margin-bottom: 12px; letter-spacing: .04em; }
.pain-turn { margin-top: 56px; font-size: clamp(21px, 5.2vw, 30px); text-align: center; }
@media (min-width: 900px) { .pain-grid { grid-template-columns: repeat(3, 1fr); } }

/* STEPS */
.steps { display: grid; gap: 16px; }
.step { position: relative; padding: 14px 14px 24px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line2); }
.bignum { display: block; padding: 0 10px; font-family: var(--en); font-weight: 600; font-size: 12px; color: var(--ac); letter-spacing: .06em; }
.bignum::before { content: "STEP "; }
.step .h3 { margin: 6px 10px 8px; }
.step p { color: var(--ink2); font-size: 14px; padding: 0 10px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* FEATURES */
.feat-list { display: grid; gap: 16px; }
.feat { display: grid; gap: 28px; align-items: center; padding: 28px 20px; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px var(--line2); }
.fno { display: block; font-family: var(--en); font-weight: 600; font-size: 12px; color: var(--ac); letter-spacing: .06em; margin-bottom: 12px; }
.feat-tx p { color: var(--ink2); font-size: 15px; }
@media (min-width: 900px) {
  .feat { grid-template-columns: 1fr 1.2fr; gap: 64px; padding: 44px 48px; }
  .feat.rev .feat-tx { order: 2; }
}
.mid-cta { margin-top: 64px; text-align: center; }
.mid-cta p { font-weight: 700; font-size: 17px; margin-bottom: 18px; }

/* ===== 機能のアニメーション (サイズは cqw、配置は固定 → 動いても周りがずれない) ===== */
.fv { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 16 / 11; border-radius: 16px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; font-size: 3cqw; line-height: 1.4; }
.fv-bar { position: absolute; left: 0; right: 0; top: 0; height: 9cqw; padding: 0 4cqw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line2); background: var(--white); }
.fv-ttl { font-weight: 600; font-size: 2.5cqw; color: var(--ink2); display: inline-flex; align-items: center; gap: 1.4cqw; }
.fv-ttl::before { content: ""; display: block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--ac); }
.spin { display: inline-block; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .45cqw solid var(--line); border-top-color: var(--ac); animation: spin .7s linear infinite; flex: none; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.finger { position: absolute; left: 0; top: 0; width: 5.2cqw; height: 5.2cqw; z-index: 6; pointer-events: none; transition: transform .55s var(--e); filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.25)); }
.finger svg { width: 100%; height: 100%; transition: transform .12s; }
.finger.tap svg { transform: scale(.85); }
.finger::after { content: ""; position: absolute; left: -2cqw; top: -2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: rgba(255,90,31,.35); opacity: 0; }
.finger.tap::after { animation: ripple .45s ease-out; }
@keyframes ripple { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2); } }

/* 01 自動カット */
.fv-tc { display: inline-flex; align-items: center; gap: 1.2cqw; font-family: var(--en); font-weight: 600; font-size: 3cqw; font-variant-numeric: tabular-nums; }
.rec-dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--ac); }
.cut-track { position: absolute; left: 4cqw; right: 4cqw; top: 21cqw; height: 17cqw; display: flex; }
.sg { position: relative; height: 100%; border-radius: 1.2cqw; margin: 0 .3cqw; transition: flex-basis .45s var(--e), margin .45s var(--e), opacity .25s, background .2s, box-shadow .2s; overflow: hidden; }
.sg.v { background: var(--ink); display: flex; align-items: center; justify-content: center; gap: .45cqw; padding: 0 1cqw; }
.sg.v i { width: .55cqw; border-radius: 1cqw; background: rgba(255,255,255,.8); flex: none; }
.sg.s { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.sg.s span { font-size: 2.1cqw; font-weight: 700; color: var(--ac); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.sg.s.mark { background: var(--tint); box-shadow: inset 0 0 0 .3cqw var(--ac); }
.sg.s.mark span { opacity: 1; }
.sg.s.gone { flex-basis: 0 !important; margin: 0; opacity: 0; }
.cut-head { position: absolute; top: 17cqw; height: 25cqw; width: .35cqw; left: 4cqw; background: var(--ac); opacity: 0; }
.cut-head.run { opacity: 1; transition: left 1.1s linear; }
.cut-head::before { content: ""; position: absolute; top: -1cqw; left: 50%; width: 2cqw; height: 2cqw; margin-left: -1cqw; border-radius: 50%; background: var(--ac); }
.cut-legend { position: absolute; left: 4cqw; top: 46cqw; display: flex; gap: 3cqw; font-size: 2.2cqw; color: var(--mute); }
.lg::before { content: ""; display: inline-block; width: 2cqw; height: 2cqw; border-radius: .5cqw; margin-right: 1cqw; vertical-align: -.2cqw; }
.lg.v::before { background: var(--ink); } .lg.s::before { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.cut-badge { position: absolute; right: 4cqw; bottom: 4.4cqw; padding: 1.2cqw 2.6cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: 2.4cqw;
  opacity: 0; transform: translateY(1.5cqw); transition: opacity .3s, transform .4s var(--e); }
.cut-badge b { font-family: var(--en); font-weight: 600; color: var(--ac2); margin-right: .5cqw; }
.cut-badge.on { opacity: 1; transform: none; }
.fv-status { position: absolute; left: 4cqw; bottom: 5cqw; display: flex; align-items: center; gap: 1.6cqw; font-size: 2.4cqw; color: var(--mute); }

/* 02 テロップ */
.tl-screen { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; aspect-ratio: 16 / 9; border-radius: 1.6cqw; overflow: hidden; background: #222; }
.tl-screen img { width: 100%; height: 100%; object-fit: cover; }
.tl-cap { position: absolute; inset: 0; opacity: 0; transition: opacity .15s; }
.tl-cap.on { opacity: 1; }
.tl-cap.on > * { animation: capin .4s var(--e) both; }
.tl-cap.on > *:nth-child(2) { animation-delay: .08s; }
@keyframes capin { from { opacity: 0; transform: translateY(1.5cqw); } }
.t-ent { position: absolute; left: 0; right: 0; bottom: 4.5cqw; text-align: center; font-weight: 900; font-size: 5cqw; line-height: 1.25; color: #fff; letter-spacing: -.02em;
  -webkit-text-stroke: 1.1cqw var(--ink); paint-order: stroke fill; }
.t-ent em { font-style: normal; color: var(--ac2); }
.t-point { position: absolute; left: 4cqw; top: 4cqw; padding: .9cqw 2.2cqw; border-radius: .8cqw; background: var(--ac); color: #fff; font-weight: 900; font-size: 3.2cqw; }
.t-sub, .t-simple { position: absolute; left: 50%; bottom: 4cqw; transform: translateX(-50%); white-space: nowrap; color: #fff; font-size: 2.7cqw; font-weight: 700; }
.t-sub { -webkit-text-stroke: .6cqw rgba(17,17,19,.85); paint-order: stroke fill; }
.t-simple { background: rgba(17,17,19,.66); padding: .5cqw 1.8cqw; border-radius: .5cqw; font-weight: 500; }
.tl-cap.on .t-sub, .tl-cap.on .t-simple { animation-name: capin2; }
@keyframes capin2 { from { opacity: 0; transform: translate(-50%, 1.5cqw); } to { transform: translateX(-50%); } }
.tl-opts { position: absolute; left: 4cqw; right: 4cqw; top: 59cqw; height: 6.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); padding: .6cqw; border-radius: 99px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line2); }
.tl-opts span { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 99px; font-weight: 600; font-size: 2.4cqw; color: var(--mute); transition: color .25s; }
.tl-opts span.on { color: var(--ink); }
.tl-opts::before { content: ""; position: absolute; top: .6cqw; bottom: .6cqw; left: .6cqw; width: calc((100% - 1.2cqw) / 3); border-radius: 99px; background: var(--white); box-shadow: 0 .3cqw 1cqw rgba(17,17,19,.1); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .4s var(--e); }

/* 03 図解 */
.ch-dots { display: flex; gap: .8cqw; }
.ch-dots i { width: 1.4cqw; height: 1.4cqw; border-radius: 1cqw; background: var(--line); transition: background .3s, width .4s var(--e); }
.ch-dots i.on { background: var(--ink); width: 3.6cqw; }
.ch-gen { position: absolute; left: 0; right: 0; top: 9cqw; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; color: var(--mute); font-size: 2.5cqw;
  opacity: 0; transition: opacity .2s; z-index: 2; pointer-events: none; background: var(--paper); }
.ch-gen.on { opacity: 1; }
.ch-scene { position: absolute; left: 5cqw; right: 5cqw; top: 14cqw; bottom: 5cqw; opacity: 0; transform: translateY(1.5cqw); transition: opacity .3s, transform .5s var(--e); }
.ch-scene.on { opacity: 1; transform: none; }
.ch-title { font-weight: 700; font-size: 3.6cqw; letter-spacing: -.01em; }
.ch-bars { position: absolute; left: 0; right: 30cqw; bottom: 0; top: 10cqw; display: flex; gap: 2cqw; align-items: flex-end; }
.ch-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1cqw; }
.ch-bars i { width: 100%; height: 0; border-radius: .8cqw .8cqw .2cqw .2cqw; background: #DDDAD2; transition: height .6s var(--e); }
.ch-bars .hi i { background: var(--ac); }
.ch-bars span { font-family: var(--en); font-weight: 500; font-size: 2cqw; color: var(--mute); }
.ch-num { position: absolute; right: 0; top: 13cqw; text-align: right; font-family: var(--en); font-weight: 700; font-size: 13cqw; line-height: 1; color: var(--ink); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ch-num small { font-family: var(--jp); font-size: 3.6cqw; letter-spacing: 0; color: var(--ac); font-weight: 700; margin-left: .5cqw; }
.vs-row { position: absolute; left: 0; right: 0; top: 10cqw; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; }
.vs-card { flex: 1; height: 82%; border-radius: 1.8cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; opacity: 0; transition: transform .55s var(--e), opacity .35s; }
.vs-card small { font-family: var(--en); font-weight: 600; font-size: 2.4cqw; letter-spacing: .04em; }
.vs-card b { font-family: var(--en); font-weight: 700; font-size: 10cqw; line-height: 1; letter-spacing: -.04em; }
.vs-card b em { font-style: normal; font-family: var(--jp); font-size: 3.4cqw; margin-left: .5cqw; letter-spacing: 0; }
.vs-card.before { background: var(--white); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); transform: translateX(-4cqw); }
.vs-card.after { background: var(--ink); color: #fff; transform: translateX(4cqw); }
.vs-card.after small { color: var(--ac2); }
.vs-x { font-family: var(--en); font-weight: 500; font-size: 2.6cqw; color: var(--mute); opacity: 0; transition: opacity .3s .25s; }
.s-vs.on .vs-card { transform: none; opacity: 1; }
.s-vs.on .vs-card.after { transition-delay: .12s; }
.s-vs.on .vs-x { opacity: 1; }
.s-list ol { list-style: none; margin-top: 3.4cqw; display: grid; gap: 1.8cqw; }
.s-list li { display: flex; align-items: center; gap: 2.4cqw; font-weight: 600; font-size: 3.2cqw; padding: 2cqw 2.6cqw; border-radius: 1.6cqw; background: var(--white); box-shadow: inset 0 0 0 1px var(--line2);
  opacity: 0; transform: translateY(1.4cqw); transition: opacity .3s, transform .45s var(--e); }
.s-list li i { font-style: normal; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: #fff; font-family: var(--en); font-weight: 600; font-size: 2.4cqw; flex: none; }
.s-list.on li { opacity: 1; transform: none; }
.s-list.on li:nth-child(2) { transition-delay: .12s; }
.s-list.on li:nth-child(3) { transition-delay: .24s; }

/* 04 素材挿入 */
.ins-screen { position: absolute; left: 4cqw; top: 4cqw; width: 58cqw; aspect-ratio: 16 / 9; border-radius: 1.6cqw; overflow: hidden; background: #222; }
.ins-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ins-screen .broll { clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--e); }
.ins-screen .broll.on { clip-path: inset(0 0 0 0); animation: kb 5s linear forwards; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.term { position: absolute; left: 65cqw; right: 4cqw; top: 4cqw; padding: 2cqw 2.2cqw; border-radius: 1.4cqw; background: var(--white); box-shadow: inset 0 0 0 1px var(--line2), 0 1cqw 3cqw rgba(17,17,19,.06); gap: .6cqw;
  display: flex; flex-direction: column; opacity: 0; transform: translateY(-1.5cqw); transition: opacity .3s, transform .45s var(--e); }
.term small { font-size: 1.8cqw; color: var(--ac); font-weight: 700; letter-spacing: .04em; }
.term b { font-size: 3.2cqw; }
.term span { font-size: 2cqw; color: var(--ink2); line-height: 1.5; }
.term.on { opacity: 1; transform: none; }
.ins-script { position: absolute; left: 4cqw; right: 4cqw; top: 39cqw; font-weight: 500; font-size: 2.8cqw; white-space: nowrap; overflow: hidden; color: var(--ink2); }
.ins-script .kw { color: var(--ink); font-weight: 700; box-shadow: inset 0 -1cqw 0 rgba(255,90,31,.25); }
.caret { display: inline-block; width: .3cqw; height: 3cqw; background: var(--ac); vertical-align: -.5cqw; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ins-search { position: absolute; left: 65cqw; right: 4cqw; top: 4cqw; font-size: 2cqw; color: var(--mute); opacity: 0; transition: opacity .25s; line-height: 1.5; }
.ins-search.on { opacity: 1; }
.ins-search > span { margin-left: 1cqw; vertical-align: middle; }
.ins-cands { margin-top: 1.4cqw; display: grid; gap: 1.2cqw; }
.ins-cands img { width: 100%; height: 8.4cqw; object-fit: cover; border-radius: 1cqw; opacity: 0; transform: translateY(1.5cqw); transition: opacity .3s, transform .45s var(--e), box-shadow .2s, filter .3s; }
.ins-search.on .ins-cands img { opacity: 1; transform: none; }
.ins-search.on .ins-cands img:nth-child(2) { transition-delay: .08s; }
.ins-search.on .ins-cands img:nth-child(3) { transition-delay: .16s; }
.ins-cands img.pick { box-shadow: 0 0 0 .45cqw var(--ac); }
.ins-cands.picked img:not(.pick) { filter: grayscale(1) opacity(.35); }
.ins-tracks { position: absolute; left: 4cqw; right: 4cqw; top: 47cqw; display: grid; gap: 1.4cqw; }
.trk { display: flex; align-items: center; gap: 2cqw; height: 7cqw; }
.trk > span { width: 9cqw; font-size: 2.1cqw; font-weight: 500; color: var(--mute); flex: none; }
.lane { position: relative; flex: 1; height: 100%; border-radius: 1cqw; background: var(--white); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; }
.clip { position: absolute; top: 14%; bottom: 14%; border-radius: .8cqw; }
.clip.v { left: .6cqw; right: .6cqw; background: #CFCBC2; }
.clip.b { left: 32%; width: 0; background: var(--ac); transition: width .5s var(--e); }
.clip.b.on { width: 38%; }

/* 05 複数カメラ */
.fv-cam { aspect-ratio: 16 / 12.8; background: var(--white); }
.cam-pgm { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; aspect-ratio: 16 / 9; border-radius: 1.6cqw; overflow: hidden; background: #000; }
.cam-pgm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); }
.cam-pgm img.on { opacity: 1; transform: scale(1); transition: transform 2s var(--e); }
.cam-tags { position: absolute; right: 2cqw; bottom: 2cqw; display: flex; gap: 1cqw; }
.cam-live { padding: .5cqw 1.4cqw; border-radius: .6cqw; background: rgba(17,17,19,.6); backdrop-filter: blur(4px); color: #fff; font-family: var(--en); font-weight: 600; font-size: 1.9cqw; letter-spacing: .06em; display: inline-flex; align-items: center; gap: .8cqw; }
.cam-live i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--ac); }
.cam-name { padding: .5cqw 1.4cqw; border-radius: .6cqw; background: rgba(17,17,19,.6); color: #fff; font-family: var(--en); font-weight: 600; font-size: 1.9cqw; letter-spacing: .04em; }
.cam-who { position: absolute; left: 2cqw; bottom: 2cqw; padding: .7cqw 1.8cqw; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 2.1cqw; }
.cam-who b { color: var(--ac); }
.cam-row { position: absolute; left: 4cqw; right: 4cqw; top: 58.5cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.cam-th { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s; }
.cam-th img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .2s; }
.cam-th span { position: absolute; left: .9cqw; bottom: .5cqw; color: #fff; font-size: 1.7cqw; font-weight: 700; text-shadow: 0 0 .6cqw rgba(0,0,0,.7); }
.cam-th.on { box-shadow: 0 0 0 .45cqw var(--ac); }
.cam-th.on img { opacity: 1; }
.cam-meters { position: absolute; left: 4cqw; right: 4cqw; top: 72cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.mt { display: flex; align-items: center; gap: 1.6cqw; color: var(--mute); font-size: 1.9cqw; }
.mbar { flex: 1; height: 1cqw; border-radius: 1cqw; background: var(--soft); overflow: hidden; position: relative; }
.mbar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--lv, 5%); background: var(--ac); transition: width .1s; border-radius: 1cqw; }

/* 06 BGM・効果音 */
.snd-song { font-size: 2.3cqw; color: var(--mute); }
.snd-song b { color: var(--ink); font-weight: 600; }
.snd-tracks { position: absolute; left: 4cqw; right: 4cqw; top: 15cqw; display: grid; gap: 2.2cqw; }
.snd-tracks .trk { height: 10cqw; }
.lane.voice { display: flex; align-items: center; gap: .4cqw; padding: 0 1.4cqw; }
.lane.voice i { flex: 1; border-radius: 1cqw; background: var(--ink); opacity: .85; }
.bgm-clip { position: absolute; top: 12%; bottom: 12%; left: .6cqw; right: .6cqw; border-radius: .9cqw; background: var(--tint); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--e); }
.bgm-clip.on { clip-path: inset(0 0 0 0); }
.bgm-clip svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bgm-clip .vol { fill: none; stroke: var(--ac); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.bgm-clip.draw .vol { transition: stroke-dashoffset 1s var(--e); stroke-dashoffset: 0; }
.bgm-clip em { position: absolute; left: 1.4cqw; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; font-size: 2cqw; color: var(--ac-d); }
.lane.sfxl { overflow: visible; }
.mk { position: absolute; left: var(--x); top: 50%; margin-left: -5.5cqw; margin-top: -2.2cqw; width: 11cqw; text-align: center; font-style: normal; padding: .5cqw 0; border-radius: 99px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), 0 .3cqw .8cqw rgba(17,17,19,.06); color: var(--ink); font-weight: 600; font-size: 2cqw; white-space: nowrap;
  opacity: 0; transform: translateY(-2.5cqw); transition: transform .4s var(--e), opacity .25s, background .15s, color .15s, box-shadow .15s; }
.mk.on { opacity: 1; transform: none; }
.mk.hit { background: var(--ac); color: #fff; box-shadow: 0 0 0 .8cqw rgba(255,90,31,.18); }
.snd-head { position: absolute; top: -1.5cqw; bottom: -1.5cqw; left: 11cqw; width: .35cqw; background: var(--ac); opacity: 0; }
.snd-head.run { opacity: 1; transition: left 2.2s linear; }
.snd-pop { position: absolute; left: 0; right: 0; bottom: 3.6cqw; text-align: center; font-weight: 900; font-size: 5cqw; color: var(--ink); letter-spacing: -.02em; line-height: 1; opacity: 0; }
.snd-pop.on { animation: pop .6s var(--e) both; }
@keyframes pop { 0% { opacity: 0; transform: translateY(1cqw); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1cqw); } }

/* 07 モード切り替え */
.fv-mode { aspect-ratio: 16 / 12; background: radial-gradient(70% 60% at 50% 40%, var(--tint), var(--paper)); }
.fv-mode .phone { position: absolute; left: 50%; top: 4cqw; margin-left: -17cqw; width: 34cqw; height: 69cqw; border-radius: 5.4cqw; background: var(--ink); padding: 1cqw;
  box-shadow: 0 0 0 .3cqw #2a2e38, 0 5cqw 10cqw -3cqw rgba(17,17,19,.4); }
.fv-mode .phone .notch { top: 2.2cqw; width: 9cqw; height: 2.4cqw; }
.fv-mode .screen { position: relative; width: 100%; height: 100%; border-radius: 4.4cqw; overflow: hidden; background: #131315; container-type: inline-size; }
.md-bar { position: absolute; left: 0; right: 0; top: 0; height: 40cqw; padding: 15.6cqw 5cqw 0; display: flex; align-items: center; gap: 3.6cqw; background: #131315; z-index: 2; color: #fff; }
.md-back { display: none; }
.md-toggle { position: relative; flex: 1; height: 15cqw; border-radius: 4.4cqw; background: #26262b; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; font-size: 5.4cqw; font-weight: 700; white-space: nowrap; }
.md-toggle span { position: relative; z-index: 1; color: #8a8a90; transition: color .3s; }
.md-pill { position: absolute; top: 1.4cqw; bottom: 1.4cqw; left: 1.4cqw; width: calc(50% - 1.4cqw); border-radius: 3.2cqw; background: #45454c; transition: transform .4s var(--e); }
.fv-mode[data-m="0"] .md-toggle span:first-of-type, .fv-mode[data-m="1"] .md-toggle span:last-of-type { color: #fff; }
.fv-mode[data-m="1"] .md-pill { transform: translateX(100%); }
.md-out { white-space: nowrap; padding: 3cqw 4cqw; border-radius: 99px; background: var(--ac); font-size: 5cqw; font-weight: 700; }
.md-views { position: absolute; left: 0; right: 0; top: 40cqw; bottom: 0; overflow: hidden; }
.md-views > .ui { position: absolute; inset: 0; transition: transform .5s var(--e), opacity .4s; }
.md-views .v1 { transform: translateX(30%); opacity: 0; }
.fv-mode[data-m="1"] .md-views .v0 { transform: translateX(-30%); opacity: 0; }
.fv-mode[data-m="1"] .md-views .v1 { transform: none; opacity: 1; }
.mode-list { list-style: none; margin-top: 20px; display: grid; gap: 8px; }
.mode-list li { padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--mute); transition: box-shadow .3s, background .3s, color .3s; }
.mode-list li b { display: block; color: var(--ink2); font-size: 14px; }
.mode-list li.on { box-shadow: inset 0 0 0 1px var(--ink); background: var(--white); color: var(--ink2); }
.mode-list li.on b { color: var(--ink); }

/* MOBILE */
.mobile-in { display: grid; gap: 48px; align-items: center; }
.ticks { list-style: none; margin-top: 24px; display: grid; gap: 12px; font-size: 15px; }
.ticks li { display: flex; align-items: center; gap: 10px; }
.phones { position: relative; height: 470px; }
.phone { position: relative; width: 210px; height: 430px; border-radius: 34px; background: var(--ink); padding: 7px; box-shadow: 0 0 0 1px #2a2e38, 0 40px 60px -20px rgba(17,17,19,.35); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: #131315; container-type: inline-size; }
.phone .screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone .notch { position: absolute; top: 15px; left: 50%; width: 62px; height: 18px; transform: translateX(-50%); border-radius: 99px; background: #000; z-index: 3; }
.phones .phone { position: absolute; top: 0; transition: transform 1s var(--e); }
.phones .p1 { left: 50%; transform: translateX(-90%) translateY(20px); }
.phones .p2 { left: 50%; top: 30px; transform: translateX(-10%) translateY(40px); }
.mobile .in .p1, .phones.in .p1 { transform: translateX(-92%); }
.phones.in .p2 { transform: translateX(-8%); }
@media (min-width: 900px) { .mobile-in { grid-template-columns: 1fr 1fr; } .phones { height: 520px; } }

/* SERVICES */
.svc-grid { display: grid; gap: 16px; }
.svc { position: relative; padding: 30px 26px; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--line2); transition: box-shadow .3s var(--e), transform .3s var(--e), opacity .7s; }
.svc:hover { box-shadow: 0 0 0 1px var(--line), var(--sh-lg); }
.svc-k { font-family: var(--en); font-weight: 600; font-size: 12px; color: var(--mute); letter-spacing: .02em; }
.svc-n { font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -.04em; }
.svc-j { font-weight: 700; color: var(--ac); font-size: 14px; margin-top: 4px; }
.svc-d { color: var(--mute); font-size: 13px; margin: 2px 0 18px; }
.svc ul { list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--ink2); }
.svc li { display: flex; gap: 10px; }
.svc li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ac); margin-top: 10px; }
.svc-p { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); font-size: 13px; color: var(--mute); }
.svc-p b { font-family: var(--en); font-size: 22px; color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

/* COMPARE */
.cmp-lead { margin: -8px 0 32px; }
.cmp { display: grid; gap: 12px; align-items: stretch; }
.cmp-col { padding: 30px 26px; border-radius: var(--r); }
.cmp-col.old { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); }
.cmp-col.new { background: var(--ink); color: #fff; }
.cmp-h { font-weight: 700; font-size: 14px; }
.cmp-v { font-weight: 700; font-size: 20px; margin: 8px 0 4px; letter-spacing: -.01em; }
.cmp-v b { font-weight: 700; font-size: 36px; }
.cmp-v b.en { font-family: var(--en); letter-spacing: -.04em; }
.cmp-v small { font-size: 14px; margin-left: 4px; font-weight: 500; }
.cmp-calc { font-size: 13px; margin-bottom: 18px; opacity: .75; }
.cmp-calc b { font-size: 15px; }
.cmp ul { list-style: none; display: grid; gap: 7px; font-size: 14px; }
.cmp li { display: flex; gap: 10px; align-items: baseline; }
.cmp .old li::before { content: "—"; color: var(--mute); }
.cmp .new li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ac); flex: none; transform: translateY(-3px); }
.cmp-vs { text-align: center; font-family: var(--en); font-weight: 500; color: var(--mute); font-size: 13px; }
@media (min-width: 900px) { .cmp { grid-template-columns: 1fr auto 1fr; align-items: center; } }

/* PRICING */
.pricing { background: var(--white); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); margin: 32px 0 28px; position: relative; }
.tabs button { position: relative; z-index: 1; flex: 1 0 auto; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--mute); white-space: nowrap; transition: color .25s, background .25s, box-shadow .25s; }
.tabs button em { font-style: normal; font-size: 10px; color: var(--ac); font-weight: 700; margin-left: 6px; }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(17,17,19,.1); }
@media (min-width: 900px) { .tabs { display: inline-flex; } }
.plans { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line2); animation: pin .5s var(--e) both; }
.plan:nth-child(2) { animation-delay: .05s; } .plan:nth-child(3) { animation-delay: .1s; }
@keyframes pin { from { opacity: 0; transform: translateY(10px); } }
.plan.hot { background: var(--ink); color: #fff; box-shadow: 0 30px 60px -24px rgba(17,17,19,.5); }
.plan .badge { position: absolute; top: 26px; right: 24px; color: var(--ac2); font-weight: 700; font-size: 12px; }
.plan-n { font-weight: 700; font-size: 17px; }
.plan-s { color: var(--mute); font-size: 13px; min-height: 1.8em; }
.plan.hot .plan-s { color: #9d9da5; }
.plan-p { margin: 18px 0 4px; font-family: var(--en); font-weight: 700; font-size: 42px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-p small { font-family: var(--jp); font-size: 13px; color: var(--mute); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.plan-was { font-size: 12px; color: var(--mute); min-height: 1.8em; }
.plan-was s { margin-right: 8px; }
.plan-was b { color: var(--ac); font-weight: 700; }
.plan.hot .plan-was b { color: var(--ac2); }
.plan ul { list-style: none; display: grid; gap: 10px; margin: 22px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; flex: 1; }
.plan.hot ul { border-top-color: #2c2c31; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .ck { margin-top: 4px; width: 16px; height: 16px; background: var(--ac); }
.plan li.off { color: #b4b2ab; }
.plan li.off .ck { background: #dcd9d1; }
.plan .btn { width: 100%; }
.plan:not(.hot) .btn { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.plan:not(.hot) .btn:hover { background: var(--ink); color: #fff; box-shadow: none; }
.free-band { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
.free-band b { display: block; font-size: 15px; }
.free-band span { color: var(--ink2); font-size: 13px; }
.free-band .btn { flex: 0 0 auto; }
.plan-note { margin-top: 18px; font-size: 12px; color: var(--mute); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-weight: 700; font-size: 15px; position: relative; transition: color .2s; }
.faq summary:hover { color: var(--ac); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transition: transform .3s var(--e); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { padding: 0 44px 24px 0; color: var(--ink2); font-size: 14px; }
.faq details[open] p { animation: fd .4s var(--e); }
@keyframes fd { from { opacity: 0; transform: translateY(-4px); } }

/* FINAL */
.final { background: var(--ink); color: #fff; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 50% 110%, rgba(255,90,31,.35), transparent 70%); }
.final .wrap { position: relative; }
.final-pre { font-weight: 500; font-size: 15px; color: #a9a9b0; }
.final-logo { display: inline-flex; align-items: center; gap: 14px; font-family: var(--en); font-weight: 800; font-size: clamp(56px, 15vw, 112px); letter-spacing: -.05em; line-height: 1; margin: 14px 0 28px; }
.final-logo img { width: .78em; height: .78em; border-radius: 22%; }
.final .h2 { font-size: clamp(20px, 5vw, 28px); font-weight: 500; color: #d9d9de; }
.final .btn { padding: 18px 44px; }
.final-note { margin-top: 22px; font-size: 13px; color: #a9a9b0; }
.svcs { margin-top: 6px; font-size: 12px; color: #6f6f78; font-family: var(--en); }

/* FOOTER */
.ft { background: var(--ink); color: #8a8a92; padding: 28px 0 120px; font-size: 12px; border-top: 1px solid #222226; }
.ft .logo { color: #fff; font-size: 16px; }
.ft .logo img { width: 22px; height: 22px; }
.ft-in { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.ft nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ft nav a:hover { color: #fff; }
.ft-co { width: 100%; margin: 0; }
.ft-co a:hover { color: #fff; }
@media (min-width: 900px) { .ft { padding-bottom: 40px; } }

/* スマホ下部の追従 CTA */
.stick { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 0 0 1px rgba(17,17,19,.06), 0 16px 40px -10px rgba(17,17,19,.3); transform: translateY(150%); transition: transform .45s var(--e); }
.stick.show { transform: none; }
.stick div { flex: 1; line-height: 1.35; font-size: 13px; min-width: 0; }
.stick b { display: block; }
.stick span { color: var(--mute); font-size: 11px; }
@media (min-width: 900px) { .stick { display: none; } }

/* 出現アニメ (短く・跳ねない) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e), transform .8s var(--e); }
.rv.in { opacity: 1; transform: none; }
.pain-grid .rv:nth-child(2), .steps .rv:nth-child(2), .svc-grid .rv:nth-child(2) { transition-delay: .06s; }
.pain-grid .rv:nth-child(3), .steps .rv:nth-child(3), .svc-grid .rv:nth-child(3) { transition-delay: .12s; }
.h2 { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--e), transform .8s var(--e); }
.h2.in { opacity: 1; transform: none; }
.h-hero .ln { transform: translateY(24px); opacity: 0; transition: transform .9s var(--e), opacity .6s var(--e); }
.h-hero .ln:nth-child(2) { transition-delay: .08s; }
.ready .h-hero .ln { transform: none; opacity: 1; }
.hero-copy > *:not(.h-hero) { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--e) .25s, transform .8s var(--e) .25s; }
.ready .hero-copy > * { opacity: 1; transform: none; }
.hero-video { opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .9s var(--e) .2s, transform 1.1s var(--e) .2s; }
.ready .hero-video { opacity: 1; transform: none; }

/* スマホ調整 */
@media (max-width: 640px) {
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 14px; }
  .tabs button { padding: 9px 2px; font-size: 13px; border-radius: 10px; line-height: 1.3; }
  .tabs button em { display: block; margin: 1px 0 0; }
  .plan.hot { order: -1; }
  .cta-row .btn.ghost { display: none; }
  .hc { font-size: 11px; }
  .hc.c1 { left: -4px; } .hc.c2 { right: -4px; }
  .free-band .btn { width: 100%; }
  .feat { padding: 22px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv, .h2, .h-hero .ln, .hero-video, .hero-copy > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ===== ステップのイラスト (スクショではなく描画。サイズは cqw) ===== */
.sv { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; margin-bottom: 20px; font-size: 3.4cqw; line-height: 1.4; }
.sv svg { display: block; }
/* 1 アップ */
.up-drop { position: absolute; left: 6cqw; right: 6cqw; top: 6cqw; height: 34cqw; border-radius: 3cqw; border: .5cqw dashed #D3CFC6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; color: var(--mute); text-align: center; transition: border-color .3s, background .3s; }
.up-drop svg { width: 9cqw; height: 9cqw; color: var(--ac); }
.up-drop p { font-weight: 700; font-size: 3.6cqw; color: var(--ink2); }
.up-drop small { display: block; font-weight: 400; font-size: 2.8cqw; color: var(--mute); margin-top: .6cqw; }
.sv-up.drag .up-drop { border-color: var(--ac); background: var(--tint); }
.up-file { position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; height: 15cqw; border-radius: 2.6cqw; background: var(--white); box-shadow: 0 0 0 1px var(--line2), 0 2cqw 5cqw -1cqw rgba(17,17,19,.12);
  display: flex; align-items: center; gap: 3cqw; padding: 0 3cqw; opacity: 0; transform: translateY(6cqw); transition: opacity .35s, transform .5s var(--e); }
.sv-up.f .up-file { opacity: 1; transform: none; }
.up-file img { width: 15cqw; height: 9.4cqw; object-fit: cover; object-position: 80% 30%; border-radius: 1.2cqw; flex: none; }
.up-meta { flex: 1; min-width: 0; }
.up-meta b { display: block; font-family: var(--en); font-weight: 600; font-size: 3.2cqw; }
.up-st { display: block; font-size: 2.6cqw; color: var(--mute); margin: .3cqw 0 1cqw; font-variant-numeric: tabular-nums; }
.up-bar { height: 1.2cqw; border-radius: 1cqw; background: var(--soft); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--ac); border-radius: 1cqw; }
.up-ok { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; flex: none; transform: scale(0); transition: transform .35s var(--e); }
.up-ok svg { width: 3.6cqw; height: 3.6cqw; }
.sv-up.done .up-ok { transform: scale(1); }
/* 2 AI編集 */
.ai-head { position: absolute; left: 7cqw; right: 7cqw; top: 6cqw; display: flex; justify-content: space-between; align-items: baseline; }
.ai-head b { font-size: 3.6cqw; }
.ai-pc { font-family: var(--en); font-weight: 700; font-size: 5cqw; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ai-bar { position: absolute; left: 7cqw; right: 7cqw; top: 15cqw; height: 1.2cqw; border-radius: 1cqw; background: var(--line2); overflow: hidden; }
.ai-bar i { display: block; height: 100%; width: 0; background: var(--ac); transition: width .4s var(--e); }
.ai-list { position: absolute; left: 7cqw; right: 7cqw; top: 21cqw; list-style: none; display: grid; gap: 1.6cqw; }
.ai-list li { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.2cqw; color: #b3b1aa; transition: color .25s; }
.ai-list li i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .4cqw var(--line); color: transparent; transition: background .25s, box-shadow .25s, color .25s; flex: none; }
.ai-list li i svg { width: 2.8cqw; height: 2.8cqw; }
.ai-list li.run { color: var(--ink); }
.ai-list li.run i { box-shadow: inset 0 0 0 .4cqw var(--line); border-top: .4cqw solid var(--ac); animation: spin .6s linear infinite; }
.ai-list li.done { color: var(--ink2); }
.ai-list li.done i { background: var(--ac); box-shadow: none; color: #fff; }
/* 3 書き出し */
.out-vid { position: absolute; left: 6cqw; top: 6cqw; width: 52cqw; aspect-ratio: 16 / 9; border-radius: 2cqw; overflow: hidden; background: #222; }
.out-vid img { width: 100%; height: 100%; object-fit: cover; }
.out-sub { position: absolute; left: 50%; bottom: 2.6cqw; transform: translateX(-50%); white-space: nowrap; color: #fff; font-weight: 700; font-size: 2.2cqw; -webkit-text-stroke: .5cqw rgba(17,17,19,.85); paint-order: stroke fill; }
.out-dur { position: absolute; left: 2cqw; top: 2cqw; padding: .3cqw 1.2cqw; border-radius: .6cqw; background: rgba(17,17,19,.6); color: #fff; font-family: var(--en); font-weight: 600; font-size: 2cqw; }
.out-side { position: absolute; left: 62cqw; right: 6cqw; top: 6cqw; bottom: 6cqw; display: flex; flex-direction: column; justify-content: space-between; }
.out-files { list-style: none; display: grid; gap: 2cqw; }
.out-files li { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.8cqw; color: #b3b1aa; transition: color .25s; }
.out-files li i { width: 4cqw; height: 4cqw; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .35cqw var(--line); color: transparent; flex: none; transition: background .25s, color .25s, box-shadow .25s; }
.out-files li i svg { width: 2.4cqw; height: 2.4cqw; }
.out-files li.on { color: var(--ink); }
.out-files li.on i { background: var(--ink); box-shadow: none; color: #fff; }
.out-btn { position: relative; overflow: hidden; display: grid; place-items: center; height: 9cqw; border-radius: 99px; background: var(--ac); color: #fff; font-weight: 700; font-size: 3cqw; transition: transform .15s; }
.out-btn i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.28); }
.out-btn em { position: relative; font-style: normal; }
.sv-out.press .out-btn { transform: scale(.96); }
.out-toast { position: absolute; left: 6cqw; bottom: 6cqw; transform: translateY(3cqw); display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 3.4cqw; border-radius: 99px; background: var(--ink); color: #fff; font-size: 2.8cqw; font-weight: 700; opacity: 0; transition: opacity .3s, transform .45s var(--e); white-space: nowrap; }
.out-toast i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--ac); display: grid; place-items: center; }
.out-toast i svg { width: 2.2cqw; height: 2.2cqw; }
.sv-out.saved .out-toast { opacity: 1; transform: none; }
.out-vid { transition: opacity .3s; }

/* ===== スマホ画面の描画 (.screen が基準。cqw = 画面の幅) ===== */
.ui { position: absolute; inset: 0; color: #fff; font-size: 4cqw; line-height: 1.4; }
.ui-vid { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ui-vid img { width: 100%; height: 100%; object-fit: cover; }
.ui-sub { position: absolute; left: 50%; bottom: 3cqw; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 3.6cqw; -webkit-text-stroke: .8cqw rgba(0,0,0,.8); paint-order: stroke fill; }
.ui-h { font-size: 3.6cqw; font-weight: 700; color: #cfcfd4; margin: 5cqw 5cqw 2.4cqw; }
.ui-tabs { display: flex; gap: 1.6cqw; padding: 3cqw 4cqw 0; }
.ui-tabs span { flex: 1; text-align: center; padding: 1.8cqw 0; border-radius: 2.4cqw; font-size: 3.4cqw; color: #8a8a90; font-weight: 700; }
.ui-tabs span.on { background: #26262b; color: #fff; }
.ui-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 0 4cqw; }
.ui-grid i { font-style: normal; aspect-ratio: 1.15; border-radius: 2.4cqw; background: linear-gradient(160deg, #2c2c32, #1d1d21); display: grid; place-items: end start; padding: 1.8cqw; font-size: 3cqw; font-weight: 700; color: #cfcfd4; box-shadow: inset 0 0 0 1px #2e2e34; }
.ui-grid i.on { box-shadow: inset 0 0 0 .7cqw #fff; color: #fff; }
.ui-slider { position: relative; height: 1.4cqw; margin: 2cqw 5cqw; border-radius: 1cqw; background: #333338; }
.ui-slider b { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; border-radius: 1cqw; background: var(--ac); }
.ui-slider b::after { content: ""; position: absolute; right: -2.4cqw; top: 50%; width: 4.8cqw; height: 4.8cqw; margin-top: -2.4cqw; border-radius: 50%; background: var(--ac); }
.ui-tools { display: flex; gap: 2cqw; padding: 3cqw 4cqw; }
.ui-tools span { padding: 1.4cqw 3cqw; border-radius: 2cqw; background: #222226; box-shadow: inset 0 0 0 1px #2e2e34; font-size: 3cqw; color: #cfcfd4; }
.ui-tl { position: relative; display: grid; gap: 1.6cqw; padding: 1cqw 4cqw; }
.ui-tl .r { display: flex; align-items: center; gap: 2cqw; height: 6.6cqw; }
.ui-tl .r > span { width: 12cqw; font-size: 2.8cqw; color: #9a9aa0; flex: none; }
.ui-tl .r > div { position: relative; flex: 1; height: 100%; }
.ui-tl i { position: absolute; top: 0; bottom: 0; border-radius: 1.2cqw; }
.ui-tl .c1 { background: #7b6cf0; } .ui-tl .c2 { background: #1fae86; } .ui-tl .c3 { background: var(--ac); } .ui-tl .c4 { background: #3a3a40; } .ui-tl .c5 { background: #3b82c4; }
.ui-tl .ph { position: absolute; top: 0; bottom: 0; left: 50%; width: .5cqw; background: #fff; animation: ph 4s linear infinite; }
@keyframes ph { from { left: 20%; } to { left: 95%; } }
.ui-home { padding: 15cqw 5cqw 0; }
.ui-hello { font-size: 3.4cqw; color: #9a9aa0; }
.ui-big { font-size: 6.6cqw; font-weight: 900; line-height: 1.3; letter-spacing: -.02em; margin-top: 1cqw; }
.ui-new { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 5cqw; }
.ui-new span { display: flex; flex-direction: column; gap: 2cqw; padding: 4cqw; border-radius: 4cqw; background: #222226; box-shadow: inset 0 0 0 1px #2e2e34; font-weight: 700; font-size: 3.6cqw; }
.ui-new span:first-child { background: var(--ac); box-shadow: none; }
.ui-new b { font-size: 6cqw; line-height: 1; font-weight: 400; }
.ui-home .ui-h { margin: 6cqw 0 2.4cqw; }
.ui-item { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 0; border-bottom: 1px solid #222226; }
.ui-item img { width: 20cqw; height: 12cqw; object-fit: cover; border-radius: 2cqw; flex: none; }
.ui-item b { display: block; font-size: 3.6cqw; }
.ui-item small { font-size: 2.8cqw; color: #9a9aa0; }
.ui-item small.ok::before { content: "● "; color: #3ddc84; }
.ui-item small.run::before { content: "● "; color: var(--ac); }
.ui-short { display: flex; flex-direction: column; background: #000; }
.ui-title { padding: 15cqw 5cqw 3cqw; font-size: 5.4cqw; font-weight: 900; text-align: center; letter-spacing: -.02em; }
.ui-title em { font-style: normal; color: var(--ac); }
.ui-sv { position: relative; flex: 1; overflow: hidden; }
.ui-sv img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ui-tel { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-weight: 900; font-size: 7cqw; line-height: 1.25; -webkit-text-stroke: 1.4cqw #111; paint-order: stroke fill; }
.ui-tel em { font-style: normal; color: var(--ac2); }
.ui-seek { height: 1cqw; background: #333; margin: 0 0 6cqw; }
.ui-seek i { display: block; height: 100%; width: 40%; background: var(--ac); animation: seek 6s linear infinite; }
@keyframes seek { from { width: 0; } to { width: 100%; } }

/* ===== 作例・AIナレーション ===== */
.works { background: var(--white); }
.works-lead { max-width: 640px; margin-bottom: 36px; }
.works-grid { display: grid; gap: 16px; align-items: end; }
.work { margin: 0; }
.work-v { border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px rgba(17,17,19,.06), 0 30px 60px -24px rgba(17,17,19,.35); }
.work-v.wide { aspect-ratio: 16 / 9; }
.work-v.tall { aspect-ratio: 9 / 16; max-width: 300px; margin: 0 auto; }
.work-v video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.work figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font-size: 13px; color: var(--mute); }
.work figcaption b { color: var(--ink); font-size: 14px; }
.work:nth-child(2) figcaption { justify-content: center; }
@media (min-width: 900px) { .works-grid { grid-template-columns: 2.4fr 1fr; gap: 32px; } .work-v.tall { max-width: none; } }
.voices { margin-top: 56px; padding: 28px 24px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line2); display: grid; gap: 24px; }
.voices-tx p { color: var(--ink2); font-size: 14px; }
.voice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line2); text-align: left; transition: box-shadow .2s, transform .2s var(--e); }
.vc:hover { box-shadow: inset 0 0 0 1px var(--line), var(--sh); }
.vc-p { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; transition: background .2s; }
.vc-p svg { width: 14px; height: 14px; margin-left: 2px; }
.vc-p i { position: absolute; inset: 11px 12px; display: none; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.vc.on .vc-p { background: var(--ac); }
.vc.on .vc-p svg { display: none; }
.vc.on .vc-p i { display: block; }
.vc-t { flex: 1; min-width: 0; line-height: 1.4; }
.vc-t b { display: block; font-size: 14px; }
.vc-t small { font-size: 11px; color: var(--mute); }
.vc-w { display: flex; gap: 2px; align-items: center; height: 18px; }
.vc-w i { width: 3px; height: 4px; border-radius: 2px; background: var(--line); }
.vc.on .vc-w i { background: var(--ac); animation: eq .7s ease-in-out infinite alternate; }
.vc.on .vc-w i:nth-child(2) { animation-delay: -.2s; } .vc.on .vc-w i:nth-child(3) { animation-delay: -.45s; } .vc.on .vc-w i:nth-child(4) { animation-delay: -.1s; } .vc.on .vc-w i:nth-child(5) { animation-delay: -.35s; }
@keyframes eq { from { height: 4px; } to { height: 18px; } }
@media (max-width: 640px) { .voice-list { grid-template-columns: 1fr; } .vc-w { display: none; } .vc.on .vc-w { display: flex; } }
@media (min-width: 900px) { .voices { grid-template-columns: 1fr 1.4fr; align-items: center; padding: 36px 40px; gap: 40px; } }

/* ===== 導入のご相談 ===== */
.contact { background: var(--white); }
.contact-in { display: grid; gap: 40px; }
.contact-flow { list-style: none; margin-top: 28px; display: grid; gap: 10px; }
.contact-flow li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.contact-flow b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--en); font-size: 12px; }
.cform { position: relative; display: grid; gap: 16px; padding: 28px 24px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line2); }
.cform .row2 { display: grid; gap: 16px; }
.cform label { display: grid; gap: 6px; }
.cform label > span { font-size: 13px; font-weight: 700; color: var(--ink2); }
.cform em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--ac); margin-left: 8px; }
.cform input:not([type=checkbox]), .cform select, .cform textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 0; border-radius: 10px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; appearance: none; -webkit-appearance: none; }
.cform select { background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cform textarea { resize: vertical; line-height: 1.7; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.cform .agree { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); }
.cform .agree input { width: 18px; height: 18px; accent-color: var(--ac); }
.cform .agree a { text-decoration: underline; text-underline-offset: 3px; }
.cform .btn { justify-self: start; }
.cform-msg { min-height: 1em; font-size: 13px; color: #c4361a; }
.cform-done { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--e); }
.cform-done i { width: 48px; height: 48px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.cform-done i svg { width: 22px; height: 22px; }
.cform-done b { font-size: 18px; }
.cform-done p { color: var(--ink2); font-size: 14px; max-width: 320px; }
.cform.sent .cform-done { opacity: 1; pointer-events: auto; }
.hd-login { display: none; font-size: 13px; font-weight: 500; color: var(--ink2); margin-left: 12px; }
@media (min-width: 900px) {
  .contact-in { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
  .cform { padding: 36px; }
  .cform .row2 { grid-template-columns: 1fr 1fr; }
  .hd-login { display: inline; }
}
@media (max-width: 640px) { .cform .btn { justify-self: stretch; } }