/* VibeVMD LP — VIBE MAKER の視覚言語を継承
   紙色の地／直角（角丸0）／罫線で仕切る／TANRENレッド／落とし込み影 */
:root{
  --bg:#f4f3ef; --surface:#fff; --surface-2:#ebeae6; --surface-3:#e2e0d9;
  --line:#d8d6d0; --line-strong:#8f8b83;
  --text:#090a0d; --text-2:#4f5057; --text-muted:#666870;
  --ink:#090a0d; --text-inv:#fff; --text-inv-2:#c1c1c4;
  --brand:#c5171e; --brand-deep:#96070d; --brand-weak:rgba(197,23,30,.08);
  --positive:#1d4ed8; --marker:#fde047;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --font:"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --max:1240px; --lh:1.9;
  --shadow-pop:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:var(--lh);
  font-size:15px;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ヘッダー */
.hdr{position:sticky;top:0;z-index:50;background:rgba(244,243,239,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;font-size:17px}
.logo .mk{width:26px;height:26px;display:block}
.nav{display:flex;gap:22px;margin-left:auto;font-size:13px;color:var(--text-2)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--brand)}
.cta-sm{background:var(--ink);color:#fff;padding:9px 16px;text-decoration:none;font-size:13px;font-weight:700}
.cta-sm:hover{background:var(--brand)}
@media(max-width:840px){.nav{display:none}}

/* 共通 */
.sec{padding:88px 0;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brand);
  text-transform:uppercase;margin-bottom:14px}
h2{font-size:clamp(24px,3.2vw,34px);line-height:1.45;letter-spacing:.01em;font-weight:700}
h3{font-size:18px;line-height:1.6;font-weight:700}
.lead{color:var(--text-2);font-size:16px;margin-top:18px;max-width:62ch}
.note{color:var(--text-muted);font-size:13px}

/* ヒーロー */
.hero{padding:76px 0 64px}
.hero .grid{display:grid;grid-template-columns:minmax(320px,1.08fr) minmax(0,.92fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(28px,4.3vw,48px);line-height:1.38;letter-spacing:.005em;font-weight:700}
.hero h1 .nb{display:inline-block}
.hero h1 em{white-space:nowrap;font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 2px}
.hero .sub{margin-top:22px;color:var(--text-2);font-size:17px;max-width:44ch}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.badge{border:1px solid var(--line-strong);padding:6px 11px;font-size:12px;color:var(--text-2);background:var(--surface)}
.badge.on{border-color:var(--brand);color:var(--brand);font-weight:700}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:15px 30px;text-decoration:none;font-weight:700;font-size:15px;border:2px solid var(--ink)}
.btn-1{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-pop)}
.btn-1:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.btn-2{background:var(--surface);color:var(--text)}
.btn-2:hover{background:var(--ink);color:#fff}
.shot{border:1px solid var(--line-strong);background:var(--surface);padding:8px}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:34px}}

/* 数字 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-strong);background:var(--surface)}
.stats div{padding:24px 20px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:30px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:12px;color:var(--text-muted);margin-top:6px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div{border-bottom:1px solid var(--line)}}

/* 3ステップ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border:1px solid var(--line-strong);background:var(--surface)}
.step{padding:32px 26px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .n{font-family:var(--mono);font-size:12px;color:var(--brand);letter-spacing:.14em}
.step img{width:56px;height:56px;margin:14px 0 16px}
.step p{color:var(--text-2);font-size:14px;margin-top:10px}
@media(max-width:820px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}}

/* 利用シーン */
.scenes{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.scene{background:var(--surface);border:1px solid var(--line-strong)}
.scene img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.scene .body{padding:22px 24px 26px}
.scene .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--brand)}
.scene h3{margin-top:8px}
.scene p{color:var(--text-2);font-size:14px;margin-top:10px}
@media(max-width:820px){.scenes{grid-template-columns:1fr}}

/* 帯（暗い反転ブロック） */
.ink{background:var(--ink);color:var(--text-inv)}
.ink .eyebrow{color:#ff7277}
.ink .lead{color:var(--text-inv-2)}
.ink h2{color:#fff}
.ink .card{background:#111216;border:1px solid rgba(255,255,255,.22);padding:26px 24px}
.ink .card h3{color:#fff}
.ink .card p{color:var(--text-inv-2);font-size:14px;margin-top:10px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:820px){.cards3{grid-template-columns:1fr}}

/* 2カラム */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:32px}}

/* 表 */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-strong);margin-top:32px;font-size:14px}
th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--surface-2);font-weight:700;font-size:13px}
tr:last-child td{border-bottom:0}
td .ok{color:var(--positive);font-weight:700}
td .ng{color:var(--brand);font-weight:700}

/* FAQ */
details{background:var(--surface);border:1px solid var(--line-strong);margin-top:-1px}
details summary{padding:20px 24px;cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;gap:14px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"＋";color:var(--brand);font-weight:700}
details[open] summary::before{content:"−"}
details .a{padding:0 24px 22px 56px;color:var(--text-2);font-size:14px}

/* 申込 */
.apply{background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop);padding:44px 40px;margin-top:40px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.form label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px}
.form input,.form select{width:100%;padding:13px 14px;border:1px solid var(--line-strong);background:var(--bg);font:inherit;font-size:14px}
.form .full{grid-column:1/-1}
@media(max-width:700px){.form{grid-template-columns:1fr}}

footer{background:var(--ink);color:var(--text-inv-2);padding:54px 0 40px;font-size:13px}
footer a{color:#fff;text-decoration:none}
footer .cols{display:flex;gap:44px;flex-wrap:wrap;justify-content:space-between}
.disc{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;color:#a3a5ad;max-width:80ch}

/* 図解 */
.fig{margin-top:36px;background:var(--surface);border:1px solid var(--line-strong);padding:22px 26px}
.fig svg{width:100%;height:auto;display:block}
.fig-ink{background:#111216;border-color:rgba(255,255,255,.28)}
th:last-child,td:last-child{white-space:normal}

.figcap{font-size:12px;color:var(--text-muted);margin-bottom:14px;letter-spacing:.06em}
.fig-ink .figcap{color:#a3a5ad}

/* 料金 */
.price h2 em{font-style:normal;color:var(--brand)}
.pricehero{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:2px solid var(--ink);background:var(--surface);box-shadow:var(--shadow-pop)}
.pbig{padding:32px 28px;border-right:1px solid var(--line)}
.pbig:last-child{border-right:0}
.pbig .pl{font-size:12px;color:var(--text-muted);letter-spacing:.08em}
.pbig .pn{font-size:clamp(40px,6vw,64px);line-height:1.05;font-weight:700;margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pbig .pn .cur{font-size:.5em;margin-right:2px;vertical-align:.18em}
.pbig .pn .per{font-size:.32em;color:var(--text-muted);margin-left:6px;font-weight:700}
.pbig:first-child .pn{color:var(--brand)}
.pbig .ps{font-size:13px;color:var(--text-2);margin-top:12px}
@media(max-width:820px){.pricehero{grid-template-columns:1fr}.pbig{border-right:0;border-bottom:1px solid var(--line)}}
.cmp{margin-top:44px;background:var(--surface);border:1px solid var(--line-strong);padding:24px 26px}
.cmp svg{width:100%;height:auto;display:block}
.why{margin-top:40px}
.why .card{background:var(--surface);border:1px solid var(--line-strong);padding:24px 22px}
.why .card h3{color:var(--text)}
.why .card p{color:var(--text-2);font-size:14px;margin-top:10px}
.ptable{margin-top:40px}
.ptable td:first-child b{font-size:16px}
.pnote{margin-top:28px;border-left:4px solid var(--brand);padding:4px 0 4px 20px}
.pnote p{font-size:14px;color:var(--text-2);margin-bottom:8px}
.pnote b{color:var(--text)}

/* スワーム */
.swarm h2 em{font-style:normal;color:#ec4042}
.swarm .lead b{color:#fff}
.swarm-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.sh{background:#111216;border:1px solid rgba(255,255,255,.22);padding:30px 26px}
.sh.accent{border-color:#ec4042}
.shl{font-size:12px;color:#a3a5ad;letter-spacing:.08em}
.shn{font-size:clamp(38px,6vw,60px);line-height:1.05;font-weight:700;color:#fff;margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sh.accent .shn{color:#ec4042}
.shn .shu{font-size:.34em;margin-left:6px;color:#c1c1c4}
.shn .cur{font-size:.5em;margin-right:2px;vertical-align:.18em}
.shs{font-size:13px;color:#c1c1c4;margin-top:12px}
.sh.accent .shs{color:#ec4042;font-weight:700}
@media(max-width:820px){.swarm-hero{grid-template-columns:1fr}}
.swarm .card b{color:#fff}
.blink{color:#ec4042;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(236,64,66,.5)}
.blink:hover{border-bottom-color:#ec4042}
.stable{margin-top:40px;background:#111216;border-color:rgba(255,255,255,.28)}
.stable th{background:#191a1f;color:#fff;border-bottom-color:rgba(255,255,255,.2)}
.stable td{color:#c1c1c4;border-bottom-color:rgba(255,255,255,.14)}
.stable td b{color:#fff}

/* つくり手 */
.maker h2 em{font-style:normal;color:var(--brand)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mcard{background:var(--surface);border:1px solid var(--line-strong);padding:30px 26px}
.mcard .mn{font-size:clamp(40px,5.4vw,58px);line-height:1;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mcard .mn .mu{font-size:.36em;margin-left:6px;color:var(--text-2)}
.mcard h3{margin-top:18px}
.mcard p{color:var(--text-2);font-size:14px;margin-top:10px}
.mcard b{color:var(--text)}
@media(max-width:820px){.mgrid{grid-template-columns:1fr}}
.mnote{margin-top:36px;border-left:4px solid var(--ink);padding:4px 0 4px 20px}
.mnote p{font-size:15px;color:var(--text-2);margin-bottom:10px}
.mnote b{color:var(--text)}

/* ───────── 複数ページ構成 ───────── */
.nav a.on{color:var(--brand);font-weight:700}
.burger{display:none;margin-left:12px;background:none;border:1px solid var(--line-strong);
  font-size:20px;line-height:1;padding:6px 12px;cursor:pointer;color:var(--text)}
.drawer{display:none;border-top:1px solid var(--line);background:var(--surface)}
.drawer.open{display:block}
.drawer a{display:block;padding:15px 24px;text-decoration:none;border-bottom:1px solid var(--line);font-size:15px}
.drawer a.d-cta{background:var(--ink);color:#fff;font-weight:700;border-bottom:0}
@media(max-width:1000px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
  .cta-sm{display:none}
}

/* もっと見る */
.more{display:inline-block;font-weight:700;font-size:15px;text-decoration:none;color:var(--brand);
  border-bottom:2px solid var(--brand);padding-bottom:3px}
.more:hover{background:var(--brand-weak)}
.more.light{color:#ec4042;border-bottom-color:#ec4042}

/* TOP ヒーローを大きく */
.hero-top{padding:92px 0 68px}
.hero-top h1{font-size:clamp(30px,4.8vw,56px)}

/* 業種タイル */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.tile{position:relative;display:block;text-decoration:none;border:1px solid var(--line-strong);background:var(--surface);overflow:hidden}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile span{display:block;padding:14px 16px;font-weight:700;font-size:14px;border-top:1px solid var(--line);background:var(--surface)}
.tile:hover span{color:var(--brand)}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* 数字の帯を強く */
.impact h2 em{font-style:normal;color:#ec4042}
.impact .swarm-hero{margin-top:38px}

/* 下層ページ末尾のCTA */
.tailcta{background:var(--surface-2);text-align:center}
.tailcta .lead{margin-left:auto;margin-right:auto}

/* フッターのナビ */
.fnav{display:flex;flex-direction:column;gap:8px}
.fnav .fh{color:#fff;font-weight:700;margin-bottom:6px;font-size:12px;letter-spacing:.08em}
.fnav a{color:#c1c1c4;text-decoration:none;font-size:13px}
.fnav a:hover{color:#fff}
.fcta{display:inline-block;background:var(--brand);color:#fff;padding:12px 22px;text-decoration:none;font-weight:700;font-size:14px}
.fcta:hover{background:#e0242c}
footer .cols{gap:56px}

/* 下層ページの最初のセクションは上罫線を消す */
main > .sec:first-child{border-top:0;padding-top:64px}

/* 声で足す */
.narr h2 em{font-style:normal;color:#ec4042}
.narr .lead b{color:#fff}
.narrcmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.nc{background:#111216;border:1px solid rgba(255,255,255,.22);padding:28px 26px}
.nc.on{border-color:#ec4042}
.ncl{font-size:12px;color:#a3a5ad;letter-spacing:.08em}
.ncq{font-size:14px;color:#c1c1c4;margin-top:10px;min-height:44px;line-height:1.7}
.ncv{font-size:clamp(44px,7vw,72px);line-height:1;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ncv.bad{color:#a3a5ad}
.ncv.good{color:#ec4042}
.ncs{font-size:14px;color:#c1c1c4;margin-top:14px;line-height:1.8}
.ncs b{color:#fff}
@media(max-width:820px){.narrcmp{grid-template-columns:1fr}}

/* 競合店調査への導線 */
.railcta{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:44px;background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop);padding:28px 30px}
.railcta h3{font-size:19px}
.railcta p{color:var(--text-2);font-size:14px;margin-top:8px;max-width:56ch}

/* 個別相談フォーム。招待制のため、ここが唯一の入口になる */
.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line-strong);
  background:var(--bg);font:inherit;font-size:14px;resize:vertical}
.form .req{color:var(--brand);font-size:11px;margin-left:4px}
.form .consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;
  color:var(--text-2);line-height:1.7;margin-top:4px;cursor:pointer}
.form .consent input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--brand)}
.form .consent a{color:var(--brand)}
.vmdForm__note[data-state="error"]{color:var(--brand);font-weight:700}
.vmdForm__note[data-state="done"]{color:var(--text-1);font-weight:700}
.vmdForm__submit[disabled]{opacity:.55;cursor:progress}

/* 写真の取り扱いの公開前レビュー */
.draft-banner{padding:12px 24px;background:var(--marker);color:var(--ink);font-size:14px;font-weight:700;text-align:center}
.privacy-status{margin-top:24px;padding:16px 24px;border-left:4px solid var(--marker);background:var(--surface)}
.privacy-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.privacy-choice{background:var(--surface);border:1px solid var(--line);padding:32px}
.privacy-choice h3{font-size:28px;margin:8px 0 16px}.privacy-choice p+p{margin-top:16px}
.privacy-label{font-weight:700;color:var(--positive);font-size:14px}.privacy-text-note{padding:24px 32px;background:var(--surface-2);margin:24px 0 48px}
.privacy-text-note h3{margin-bottom:8px}.privacy-route{padding:24px;border:1px solid var(--text-inv-2);text-align:center}
.privacy-step{border:1px solid var(--text-inv-2);padding:16px;margin:8px 0;font-weight:700}.privacy-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.privacy-options p{padding:16px 8px;border:1px solid var(--text-inv-2);font-size:14px}.privacy-foot{font-size:13px;color:var(--text-inv-2);margin-top:16px}
@media(max-width:700px){.privacy-choice-grid{grid-template-columns:1fr}.privacy-choice{padding:24px}.privacy-choice h3{font-size:24px}.privacy-text-note{padding:24px}.privacy-options{grid-template-columns:1fr}.draft-banner{padding:12px 16px;text-align:left}}

/* 仕組みの全体図（/security/） */
.arch{margin:48px 0 56px}
.arch-fig{margin-top:28px;background:var(--surface);border:1px solid var(--line);padding:16px;overflow-x:auto}
.arch-fig svg{display:block;width:100%;min-width:760px;height:auto}
.arch-note{display:none;font-size:13px;color:var(--text-muted);margin-top:8px}
@media(max-width:820px){.arch-note{display:block}}
.arch-h{margin-top:40px}
.arch-table{width:100%;border-collapse:collapse;margin-top:16px;background:var(--surface)}
.arch-table th,.arch-table td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;font-size:15px;line-height:1.7}
.arch-table thead th{background:var(--surface-2);font-size:14px}
.arch-table tbody th{width:9em;white-space:nowrap}
@media(max-width:640px){.arch-table tbody th{white-space:normal;width:6.5em}}