/* REVERSE 紹介LP 共通スタイル（配色と書体は既存LP reverse-lp に合わせる） */
:root{
  --ink:#1c2532; --sub:#566274; --faint:#626d7c; --silver:#8a93a1;
  --line:#e6e8ec; --bg:#ffffff; --bg-alt:#f5f7fa; --soft:#eef0f3;
  --navy:#16181d; --navy-d:#0e1013;
  --word:"Jost",sans-serif;
  --shadow:0 30px 70px -36px rgba(10,12,16,.42);
  --shadow-s:0 16px 40px -28px rgba(10,12,16,.4);
}
html{color-scheme:light;scroll-behavior:smooth}

/* 改行：既存LP（reverse-lp）とココカラ指示書 §9 の規則 */
html[lang="ja"] body{line-break:strict;word-break:normal;overflow-wrap:normal}
h1,h2,h3,.lead{text-wrap:balance}
p,li,dd,dt,figcaption,summary{text-wrap:pretty}
@supports (word-break:auto-phrase){
  html[lang="ja"] :is(h1,h2,h3,p,li,dt,dd,figcaption,summary,b,q,.lead){word-break:auto-phrase}
}
.l{display:block}
.nb{white-space:nowrap}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Segoe UI",sans-serif;font-size:16px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-feature-settings:"palt";letter-spacing:.05em;font-weight:700}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* ヘッダー */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo img{width:30px;height:30px;border-radius:7px}
.logo span{font-family:var(--word);font-weight:400;letter-spacing:.4em;font-size:15px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:10px 22px;font-size:14px;letter-spacing:.06em;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--navy-d);transform:translateY(-1px)}
.btn.big{font-size:17px;padding:19px 44px;box-shadow:var(--shadow-s)}
.btn .arw{font-family:var(--word);font-size:19px;line-height:1;transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* ヒーロー */
.hero{text-align:center;padding:88px 0 0}
.pill{display:inline-block;font-size:13px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:6px 18px;letter-spacing:.08em}
.hero h1{font-size:clamp(32px,5.4vw,60px);line-height:1.38;margin:26px 0 26px}
.hero .lead{max-width:34em;margin:0 auto;color:var(--sub);font-size:clamp(15px,1.55vw,18px);line-height:2}
.cta{margin-top:40px}
.cta-note{font-size:13px;color:var(--faint);margin:16px 0 0}
.cta-note a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--sub)}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg,.done svg{width:16px;height:16px;flex:none;color:var(--ink)}

.stage{margin:72px 0 0;padding:0 32px 104px;background:linear-gradient(180deg,var(--bg) 0,var(--bg) 22%,var(--bg-alt) 22%)}
.frame{max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.frame img{width:100%;object-fit:cover;object-position:top}
.stage figcaption{max-width:1040px;margin:20px auto 0;text-align:center;font-size:14px;color:var(--sub)}
.stage figcaption b{color:var(--ink)}

/* セクション */
section{padding:120px 0}
section.alt{background:var(--bg-alt)}
.eyebrow{font-family:var(--word);font-size:12px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase}
h2{font-size:clamp(26px,3.5vw,40px);line-height:1.5;margin:14px 0 18px}
.sec-lead{color:var(--sub);max-width:36em;margin:0}
.head{margin-bottom:56px}

/* できること */
.caps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.caps > div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 30px 30px}
.caps q{display:block;font-size:18px;font-weight:700;quotes:"「" "」";margin-bottom:8px;font-feature-settings:"palt";letter-spacing:.04em}
.caps p{margin:0;font-size:14.5px;color:var(--sub);line-height:1.85}

/* 実例：頼んだ言葉と、片づいた結果 */
.cases{display:grid;gap:96px}
.case{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.when{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.14em}
.when::after{content:"";height:1px;width:40px;background:var(--line)}
.case h3{font-size:clamp(20px,2.2vw,24px);line-height:1.6;margin:14px 0 22px}
.ask{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:16px 20px;margin:0 0 22px;font-size:15px;line-height:1.85;box-shadow:var(--shadow-s)}
.ask small{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--faint);letter-spacing:.1em;margin-bottom:6px}
.ask small::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23626d7c' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.3 0-8 1.7-8 5v1h16v-1c0-3.3-4.7-5-8-5z'/%3E%3C/svg%3E") center/12px no-repeat}
.done{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.done li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--sub);line-height:1.75}
.done svg{margin-top:5px}
.shot{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.shot-bar{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--faint)}
.shot-bar img{width:18px;height:18px;border-radius:4px}
.shot-bar b{font-family:var(--word);font-weight:400;letter-spacing:.32em;color:var(--ink)}
.shot-bar span{margin-left:auto;letter-spacing:.06em}
.shot.fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.shot img.crop{width:100%;object-fit:cover;object-position:left top}
.src{font-size:13px;color:var(--faint);margin-top:56px}

/* 費用 */
.bars{display:grid;gap:30px;max-width:880px}
.bar .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.bar .name{font-weight:700;font-size:15px}
.bar .name small{font-weight:400;color:var(--faint);font-size:13px;margin-left:10px}
.bar .yen{font-weight:700;font-size:17px;white-space:nowrap;font-feature-settings:"tnum"}
.track{height:12px;border-radius:99px;background:var(--soft);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:var(--silver)}
.bar.us .track i{background:var(--navy)}
.bar.us .yen{font-size:22px}
.bars.grouped{gap:0;max-width:none}
.group{display:grid;grid-template-columns:5em 1fr;gap:24px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.group:last-of-type{border-bottom:1px solid var(--line)}
.group .who{font-weight:700;font-size:20px}
.group .bar + .bar{margin-top:14px}
.legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;font-size:13px;color:var(--sub)}
.legend > span{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:8px;border-radius:9px;flex:none}
.note{font-size:13px;color:var(--faint);margin-top:28px;max-width:52em}

/* 3つの柱 */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.pillars svg{width:28px;height:28px;color:var(--ink)}
.pillars h3{font-size:19px;margin:18px 0 8px}
.pillars p{margin:0;font-size:15px;color:var(--sub)}

/* 窓口（B） */
.channels{display:grid;grid-template-columns:1fr 1.25fr;gap:72px;align-items:center}
.phone{justify-self:center;max-width:300px;margin:0}
.phone img{filter:drop-shadow(0 24px 40px rgba(10,12,16,.18))}
.phone figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:14px}
.apps h3{font-size:13px;color:var(--faint);letter-spacing:.14em;margin:0 0 6px}
.apps h3:not(:first-child){margin-top:36px}
.app{display:flex;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:none}
.ic svg{width:26px;height:26px;fill:#fff}
.ic.g{background:#fff;border:1px solid var(--line)}
.app b{display:block;font-size:16px}
.app p{margin:0;font-size:14px;color:var(--sub);line-height:1.75}
.tm{font-size:12px;color:var(--faint);margin-top:18px}

/* 料金 */
.pricing{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
.pro{background:#fff;border:1.5px solid var(--navy);border-radius:20px;padding:40px}
.pro .name{display:flex;align-items:center;gap:12px;font-family:var(--word);letter-spacing:.3em;font-size:15px}
.pro .name em{font-style:normal;font-family:inherit;letter-spacing:.08em;font-size:12px;background:var(--navy);color:#fff;border-radius:99px;padding:2px 12px;font-weight:700}
.pro .price{font-size:52px;font-weight:700;letter-spacing:.01em;line-height:1.2;margin-top:14px;font-feature-settings:"tnum"}
.pro .price small{font-size:15px;font-weight:400;color:var(--sub);margin-left:6px;letter-spacing:.04em}
.pro .total{font-size:15px;font-weight:700;margin-top:4px}
.pro ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:10px}
.pro li{display:flex;gap:10px;font-size:15px;color:var(--sub)}
.pro li svg{width:16px;height:16px;flex:none;margin-top:6px;color:var(--ink)}
.others{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 34px}
.others dl{margin:0}
.others dl > div{display:grid;grid-template-columns:6.5em 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.others dl > div:last-child{border-bottom:0}
.others dt{font-family:var(--word);letter-spacing:.14em;font-size:15px}
.others dd{margin:0;font-size:14px;color:var(--sub);line-height:1.8}
.others dd b{color:var(--ink);display:block;font-size:15px}
.trial{margin-top:28px;padding:22px 28px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:15px}
.trial b{display:block;margin-bottom:2px}
.fine{font-size:13px;color:var(--faint);margin-top:16px}

/* 始め方・質問 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{border-top:1px solid var(--ink);padding-top:22px}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--word);font-size:14px;letter-spacing:.2em;color:var(--faint)}
.steps h3{font-size:18px;margin:8px 0 6px}
.steps p{margin:0;font-size:15px;color:var(--sub)}
.faq{margin-top:96px;max-width:880px}
.faq h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 24px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;font-size:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--word);font-size:22px;line-height:1;color:var(--faint);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:-6px 0 22px;color:var(--sub);font-size:15px;max-width:44em}

/* 最後の呼びかけ */
.final{background:var(--navy);color:#fff;text-align:center;padding:120px 0}
.final h2{color:#fff;margin:0 0 36px}
.final .btn{background:#fff;color:var(--navy)}
.final .btn:hover{background:#eef0f3}
.final .cta-note{color:#aab2bd}
.final .cta-note a{color:#fff}
footer{padding:32px 0;font-size:13px;color:var(--faint)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:900px){
  section{padding:88px 0}
  .caps{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr;gap:28px}
  .cases{gap:72px}
  .pillars,.steps{grid-template-columns:1fr;gap:32px}
  .channels,.pricing{grid-template-columns:1fr;gap:40px}
  .group{grid-template-columns:1fr;gap:12px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .stage{padding:0 16px 72px;margin-top:56px}
  .hero{padding-top:56px}
  .caps{grid-template-columns:1fr}
  .caps > div{padding:24px 22px}
  .top .btn{display:none}
  .btn.big{padding:18px 32px;font-size:16px}
  .pro{padding:30px 24px}
  .pro .price{font-size:42px}
  .others{padding:22px 22px}
  .others dl > div{grid-template-columns:1fr;gap:2px}
  .bar .name small{display:block;margin-left:0}
}

/* ===== 案B（3回目）：冒頭2列・数字の帯・アイコン・LINEの使用例 ===== */
:root{ --accent:#2451d6; --accent-soft:#eaf0fd; --tint:#f3f6fb; }
.b3 .eyebrow{color:var(--accent)}
.b3 .done svg,.b3 .pro li svg{color:var(--accent)}

.hero2{position:relative;background:radial-gradient(900px 520px at 88% 8%,#e6edfb 0,rgba(230,237,251,0) 62%),linear-gradient(180deg,#fff 0,var(--tint) 100%);border-bottom:1px solid var(--line)}
.hero2 .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;min-height:calc(100svh - 64px);padding-top:40px;padding-bottom:40px}
.brandline{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.brandline::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hero2 h1{font-size:clamp(32px,4.2vw,52px);line-height:1.35;margin:22px 0 22px}
.hero2 .lead{color:var(--sub);font-size:clamp(15px,1.4vw,17px);line-height:2;margin:0;max-width:30em}
.hero2 .cta{margin-top:32px}
.hero2 .cta-note{margin-top:14px}
.via{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
.via .ics{display:flex;gap:8px}
.mini{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.mini svg{width:17px;height:17px;fill:#fff}
.mini.g{background:#fff;border:1px solid var(--line)}
.hero-shot{margin:0;justify-self:center;text-align:center}
.hero-shot .frame{display:inline-block;max-width:100%;border-radius:16px}
.hero-shot .frame img{display:block;width:auto;max-width:100%;max-height:calc(100svh - 64px - 130px);height:auto}
.hero-shot figcaption{font-size:13px;color:var(--sub);margin-top:14px}
.hero-shot figcaption b{color:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-s);margin-top:-1px}
.stats > div{padding:26px 26px 24px;border-left:1px solid var(--line)}
.stats > div:first-child{border-left:0}
.stats b{display:block;font-size:26px;letter-spacing:.02em;line-height:1.3;font-feature-settings:"palt"}
.stats b small{font-size:14px;margin-left:4px;color:var(--sub);font-weight:700}
.stats > div > span{display:block;font-size:13px;color:var(--sub);margin-top:6px;line-height:1.75}
.stats-wrap{padding-top:56px}

.caps2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.caps2 > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;transition:transform .2s,box-shadow .2s}
.caps2 > div:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.cap-ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.cap-ic svg{width:22px;height:22px}
.caps2 q{display:block;font-size:17px;font-weight:700;quotes:"「" "」";margin-bottom:6px;font-feature-settings:"palt";letter-spacing:.04em}
.caps2 p{margin:0;font-size:14.5px;color:var(--sub);line-height:1.85}

.b3 .wrap{max-width:1240px}
.b3 .shot > img{width:auto;max-width:100%;max-height:min(66vh,620px);margin:0 auto}
.b3 .shot > img.crop{width:100%;max-height:min(66vh,620px)}
.b3 .case{align-items:center}

/* LINEの使用例（HTMLで再現。写真は元の高解像度画像） */
.ph{width:300px;background:#fff;border-radius:36px;padding:10px;border:1px solid var(--line);box-shadow:var(--shadow)}
.ph-scr{background:#8ca6cf;border-radius:28px;overflow:hidden}
.ph-top{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 16px;font-size:13px;font-weight:700;border-bottom:1px solid #e6e8ec}
.ph-top img{width:26px;height:26px;border-radius:50%}
.ph-body{display:flex;flex-direction:column;gap:9px;padding:14px 12px 18px;font-size:12.5px;line-height:1.7;letter-spacing:.02em}
.m{max-width:82%;padding:8px 12px;border-radius:16px;position:relative}
.m i{display:block;font-style:normal;font-size:10px;opacity:.7;text-align:right;margin-top:2px}
.m.me{align-self:flex-end;background:#06C755;color:#fff;border-top-right-radius:4px}
.m.bot{align-self:flex-start;background:#fff;color:#1c2532;border-top-left-radius:4px}
.m.pic{padding:4px;background:#fff}
.m.pic img{width:138px;border-radius:12px}
.phone2{margin:0;justify-self:center}
.phone2 figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:14px}

.pillars2 > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.pillars2 .cap-ic{margin-bottom:14px}

.final2{background:radial-gradient(800px 400px at 50% 0,#243150 0,rgba(36,49,80,0) 70%),var(--navy)}

@media (max-width:1000px){
  .hero2 .wrap{grid-template-columns:1fr;min-height:0;gap:40px;padding-top:56px;padding-bottom:56px}
  .hero-shot .frame img{max-height:none}
  .stats{grid-template-columns:1fr 1fr}
  .stats > div:nth-child(3){border-left:0}
  .stats > div:nth-child(n+3){border-top:1px solid var(--line)}
  .caps2{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stats > div{border-left:0;border-top:1px solid var(--line)}
  .stats > div:first-child{border-top:0}
  .caps2{grid-template-columns:1fr}
  .ph{width:280px}
}

/* ===== 案B（4回目）：ロゴ画像・実機動画・動き・費用の図解・透かし ===== */
.logo .lm{height:40px;width:auto;border-radius:0;mix-blend-mode:multiply}
.logo .lw{height:34px;width:auto;border-radius:0;mix-blend-mode:multiply}
.b4 .logo{gap:10px}

/* 実機の動画 */
.demo{position:relative;display:inline-block;max-width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;line-height:0}
.demo video{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100svh - 64px - 200px);aspect-ratio:1000/1200}
.demo .live{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(22,24,29,.78);color:#fff;font-size:11.5px;line-height:1;padding:7px 10px;border-radius:99px;letter-spacing:.06em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.demo .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a52;box-shadow:0 0 0 0 rgba(255,90,82,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,82,.55)}70%{box-shadow:0 0 0 7px rgba(255,90,82,0)}100%{box-shadow:0 0 0 0 rgba(255,90,82,0)}}
.flow-row{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.flow-row .flow{margin-top:0}
.pp{width:30px;height:30px;border-radius:50%;border:0;background:var(--navy);flex:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.pp svg{width:14px;height:14px;fill:#fff}
.flow{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding:0;list-style:none}
.flow li{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1;padding:7px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--faint);transition:background .3s,color .3s,border-color .3s}
.flow li i{font-style:normal;font-family:var(--word);font-size:11px;opacity:.8}
.flow li.on{background:var(--navy);border-color:var(--navy);color:#fff}
.flow li.done{color:var(--ink);border-color:#cfd6e4}

/* スクロールで現れる（1回だけ・短く） */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}

/* アプリのアイコン（公式の配色） */
.mini.w,.ic.w{background:#fff;border:1px solid var(--line)}
.mini.w svg,.ic.w svg{fill:initial}

/* LINEの使用例（本物に合わせ、送る側は黄緑に黒文字） */
.m.me{background:#8de055;color:#111;border-top-right-radius:4px}
.m.me i{color:#3b4a2c}
.ph-top small{margin-left:auto;font-weight:400;font-size:11px;color:var(--faint);opacity:0;transition:opacity .3s}
.ph-top small.on{opacity:1}
html.js .ph-body .m{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
html.js .ph-body .m.show{opacity:1;transform:none}
.replay{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:inherit;font-size:12.5px;color:var(--sub);background:none;border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer;opacity:0;transition:opacity .3s}
.replay.on{opacity:1}

/* 費用の図解（人数を動かして比べる） */
.calc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 36px;box-shadow:var(--shadow-s)}
.calc-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.calc-top label{font-weight:700;font-size:15px;white-space:nowrap}
.calc-top output{display:inline-block;min-width:1.6em;text-align:right;font-size:28px;font-feature-settings:"tnum";color:var(--accent)}
.calc-top input[type=range]{flex:1;min-width:200px;accent-color:var(--accent);height:28px;cursor:pointer}
.calc-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:36px;align-items:center}
.cn{padding:16px 0;border-bottom:1px solid var(--line)}
.cn:last-child{border-bottom:0}
.cn span{display:block;font-size:13px;color:var(--sub)}
.cn b{font-size:28px;letter-spacing:.01em;font-feature-settings:"tnum";line-height:1.4}
.cn small{font-size:13px;color:var(--sub);margin-left:4px}
.cn.tools b{color:#6b7482}
.cn.diff b{color:var(--accent)}
.chart{width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:#e9edf2}
.chart text{font-size:12px;fill:#7a8494;font-family:inherit}
.chart .tools{fill:none;stroke:#9aa3ad;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .area{fill:url(#gapfill);opacity:.9}
.chart .us{fill:none;stroke:var(--navy);stroke-width:3.5;stroke-linecap:round}
.chart .mk-line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4}
.chart .mk-dot{fill:#fff;stroke:#9aa3ad;stroke-width:3}
.chart .mk-us{fill:#fff;stroke:var(--navy);stroke-width:3}
.chart .mk-line,.chart .mk-dot,.chart .mk-us{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
html.js .chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1)}
html.js .chart.in .draw{stroke-dashoffset:0}
html.js .chart .area{opacity:0;transition:opacity .8s .9s}
html.js .chart.in .area{opacity:.9}
.calc .legend{margin-top:18px}
.oneline{font-size:13px;color:var(--faint);margin-top:18px}

/* 最後の呼びかけ：ロゴの透かし（既存LP /ai-agent/ の「電子の身体」と同じ作り） */
.final3{position:relative;overflow:hidden;color:#fff;text-align:center;padding:128px 0;background:linear-gradient(145deg,var(--navy) 0%,#08090b 78%)}
.final3::before{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-330px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.018)}
.final3 .final-logo{position:absolute;z-index:0;right:clamp(-110px,-2vw,-20px);top:50%;width:min(43vw,520px);height:auto;transform:translateY(-50%);opacity:.14;mix-blend-mode:screen;filter:grayscale(1) contrast(1.12);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%)}
.final3 .wrap{position:relative;z-index:1}
.final3 h2{color:#fff;margin:0 0 36px}
.final3 .btn{background:#fff;color:var(--navy)}
.final3 .btn:hover{background:#eef0f3}
.final3 .cta-note{color:#aab2bd}
.final3 .cta-note a{color:#fff}

@media (max-width:1000px){
  .demo video{max-height:none}
  .calc-grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .calc{padding:24px 20px}
  .cn b{font-size:24px}
  .final3 .final-logo{width:90vw;right:-35vw;opacity:.1}
  .logo .lw{height:21px}
  .logo .lm{height:30px}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .ph-body .m{opacity:1;transform:none;transition:none}
  html.js .chart .draw{stroke-dashoffset:0;transition:none}
  html.js .chart .area{opacity:.9;transition:none}
  .demo .live::before{animation:none}
}
.b4 .top{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.m.me.pic{background:none;padding:0}
.m.pic img{border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.ph{width:320px}
.m{max-width:86%}
@supports (word-break:auto-phrase){ html[lang="ja"] .m{word-break:auto-phrase} }
@media (max-width:560px){ .ph{width:290px} }

/* ===== 案B（5回目）：費用は「誰に任せるか」の比較（社名は出さず、一般的な手段と比べる） ===== */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.vs-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 28px 20px}
.vs-card.us{background:linear-gradient(160deg,#1d2638 0%,#0e1013 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.vs-head{display:flex;align-items:center;gap:12px}
.vs-head h3{font-size:17px;margin:0}
.vs-ic{width:42px;height:42px;border-radius:12px;background:var(--soft);display:grid;place-items:center;flex:none;overflow:hidden}
.vs-ic svg{width:22px;height:22px;fill:none;stroke:#566274;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vs-ic img{width:100%;height:100%;object-fit:cover}
.us .vs-ic{background:#000}
.vs-tag{position:absolute;top:-13px;right:22px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:99px}
.vs-yen{font-size:36px;font-weight:700;margin:22px 0 12px;font-feature-settings:"tnum";letter-spacing:.01em;line-height:1.3;white-space:nowrap}
.vs-yen small{font-size:14px;color:var(--sub);margin-left:6px}
.us .vs-yen small{color:#aab2bd}
.vs-bar{position:relative;height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.us .vs-bar{background:rgba(255,255,255,.12)}
.vs-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transform-origin:left center}
.vs-bar .max{background:#d7dde5}
.vs-bar .min{background:#8a93a1}
.us .vs-bar .min{background:#7ea0ff}
html.js .vs-bar i{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .2s)}
html.js .vs.go .vs-bar i{transform:scaleX(1)}
.vs dl{margin:22px 0 0}
.vs dl > div{display:grid;grid-template-columns:6.8em 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.us dl > div{border-color:rgba(255,255,255,.14)}
.vs dt{color:var(--faint)}
.us dt{color:#9aa3ad}
.vs dd{margin:0;font-weight:700}
@media (max-width:900px){ .vs{grid-template-columns:1fr;gap:26px} }
@media (prefers-reduced-motion:reduce){ html.js .vs-bar i{transform:none;transition:none} }

/* ===== 案B（6回目）：実際の画面のタブと、途中の呼びかけ ===== */
.gal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.gal-tabs button{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:700;color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gal-tabs button i{font-style:normal;font-family:var(--word);font-size:12px;color:var(--faint)}
.gal-tabs button:hover{border-color:#c6cdd8;color:var(--ink)}
.gal-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gal-tabs button[aria-selected="true"] i{color:#aab2bd}
.gal-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-panel{animation:galIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes galIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.gal-panel .shot video{display:block;width:100%;height:auto;max-height:min(66vh,620px);object-fit:contain;background:#fff}
.midcta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:72px;padding:26px 30px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.midcta p{margin:0;display:flex;flex-direction:column;gap:2px}
.midcta b{font-size:18px}
.midcta span{font-size:14px;color:var(--sub)}
@media (prefers-reduced-motion:reduce){ .gal-panel{animation:none} }
.gal-panel[hidden]{display:none!important}
@media (max-width:560px){
  .gal-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gal-tabs::-webkit-scrollbar{display:none}
  .gal-tabs button{flex:none}
}

/* ===== 案B（7回目）：4分割で、雑務が片づいていく録画を一目で ===== */
.quad-sec{padding:96px 0 104px}
.quad-sec .head{margin-bottom:36px}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.q{margin:0}
.q-btn{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;padding:14px 14px 12px;background:#fff;border:1px solid var(--line);border-radius:18px;font:inherit;color:inherit;text-align:left;cursor:zoom-in;transition:box-shadow .2s,transform .2s,border-color .2s}
.q-btn:hover{box-shadow:var(--shadow-s);transform:translateY(-2px);border-color:#cfd6e2}
.q-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.q-top{display:flex;align-items:center;gap:8px}
.q-top i{font-style:normal;font-family:var(--word);font-size:12px;color:var(--accent)}
.q-top b{font-size:15px}
.q-zoom{margin-left:auto;width:26px;height:26px;border-radius:8px;background:var(--soft);display:grid;place-items:center}
.q-zoom svg{width:12px;height:12px;fill:none;stroke:var(--sub);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q-ask{font-size:12.5px;line-height:1.6;color:var(--sub);min-height:3.2em}
.q-vid{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;line-height:0}
.q-vid video{display:block;width:100%;height:auto;aspect-ratio:1000/1200;object-fit:cover;object-position:top}
.q-end{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink)}
.q-end svg{width:14px;height:14px;color:var(--accent)}
/* 大きく見る */
.lb{position:fixed;inset:0;z-index:50;background:rgba(12,14,18,.78);display:grid;place-items:center;padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lb[hidden]{display:none}
.lb-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,760px)}
.lb-in video{display:block;max-width:100%;max-height:calc(100svh - 140px);width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.lb-cap{margin:0;color:#e8ebf0;font-size:14px;text-align:center}
.lb-x{align-self:flex-end;font:inherit;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:6px 16px;cursor:pointer}
@media (max-width:1000px){ .quad{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .quad{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 8px;scrollbar-width:none}
  .quad::-webkit-scrollbar{display:none}
  .q{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){ .q-btn{transition:none} .q-btn:hover{transform:none} }

.q-ask small{display:block;font-size:11px;font-weight:700;color:var(--faint);letter-spacing:.08em;margin-bottom:2px}

/* ===== 案B（8回目）：十字で4つに割る ===== */
.quad-sec{padding:72px 0 88px}
.quad-sec .head{margin-bottom:28px}
.quad{grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-s)}
.q{background:#fff}
.q-btn{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto;column-gap:22px;row-gap:8px;border:0;border-radius:0;padding:24px 26px;height:100%}
.q-btn:hover{box-shadow:none;transform:none;background:#fafbfd}
.q-top{grid-column:1;grid-row:1}
.q-ask{grid-column:1;grid-row:2;min-height:0;font-size:13.5px}
.q-end{grid-column:1;grid-row:4;align-self:end}
.q-vid{grid-column:2;grid-row:1 / span 4;height:min(31vh,300px);width:auto;aspect-ratio:1000/1200;box-shadow:0 12px 30px -18px rgba(10,12,16,.35)}
.q-vid video{height:100%;width:100%}
.q-zoom{display:none}
.q-top b{font-size:17px}
@media (max-width:1000px){
  .q-btn{grid-template-columns:1fr;grid-template-rows:auto;padding:18px}
  .q-top,.q-ask,.q-end,.q-vid{grid-column:1;grid-row:auto}
  .q-vid{height:auto;width:100%}
}
@media (max-width:560px){
  .quad{grid-template-columns:none;gap:12px;background:none;border:0;border-radius:0;box-shadow:none;overflow-x:auto}
  .q{border:1px solid var(--line);border-radius:18px;overflow:hidden}
}
.quad-sec{padding:36px 0 56px}
.quad-sec .head{margin-bottom:20px}
.quad-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:10px 40px}
.quad-head h2{font-size:clamp(22px,2.2vw,28px);margin:6px 0 0;line-height:1.5}
.quad-head .sec-lead{font-size:13.5px;line-height:1.75;max-width:30em;justify-self:end}
.q-btn{padding:18px 22px;row-gap:6px}
.q-vid{height:min(calc((100svh - 64px - 36px - 56px - 110px) / 2 - 38px),300px)}
@media (max-width:1100px){ .quad-head{grid-template-columns:1fr} .quad-head .sec-lead{justify-self:start} }
@media (max-width:1000px){ .q-vid{height:auto} }
.q-btn{grid-template-rows:auto auto 1fr;align-content:stretch}
.q-top{grid-row:1}.q-ask{grid-row:2}.q-end{grid-row:3;align-self:end}
.q-vid{grid-row:1 / span 3}
@media (max-width:1000px){ .q-top,.q-ask,.q-end,.q-vid{grid-row:auto} }
.q-btn{display:flex;flex-direction:row;align-items:stretch;gap:22px}
.q-text{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.q-text .q-end{margin-top:auto}
.q-vid{flex:none}
@media (max-width:1000px){ .q-btn{flex-direction:column} .q-text .q-end{margin-top:0} }
.q-text .q-end{align-self:flex-start}
.q-vid{height:min(calc((100svh - 64px - 36px - 110px) / 2 - 44px),330px)}
@media (max-width:1000px){ .q-vid{height:auto} }

/* ===== 案B（9回目）：4分割は見るだけ／フッターは現行LPの表記 ===== */
.q-btn{cursor:default}
.q-btn:hover{background:#fff}
footer{padding:44px 0 36px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
footer .wrap{display:block}
.foot-main{display:grid;grid-template-columns:auto 1fr;gap:18px 48px;align-items:start}
.foot-table{border-collapse:collapse;font-size:13px;line-height:1.8}
.foot-table th{text-align:left;font-weight:700;color:var(--ink);padding:4px 18px 4px 0;white-space:nowrap;vertical-align:top}
.foot-table td{padding:4px 0;color:var(--sub)}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:24px 0 0}
.legal-links a{color:var(--ink);text-underline-offset:3px}
.dis{margin:14px 0 0;font-size:12px;line-height:1.8;color:var(--faint);max-width:none}
@media (max-width:760px){ .foot-main{grid-template-columns:1fr} }
@supports (word-break:auto-phrase){ html[lang="ja"] :is(.q-ask,.foot-table td,.dis){word-break:auto-phrase} }