/* 工務店AI研究所 ブランドトップ・商品トップ 共通スタイル（2026-10-22） */
:root {
  --kinari: #F5F0E6;      /* 生成り：地 */
  --kinari-2: #EDE5D6;
  --paper: #FFFDF8;
  --sumi: #1E1E1E;        /* 墨：文字 */
  --sumi-2: #4A4740;
  --sumi-3: #6B655A;
  --ai: #1F3A5F;          /* 藍：ブランド */
  --ai-2: #2C4E7A;
  --ai-deep: #152a45;
  --kihada: #C8A27A;      /* 木肌 */
  --kihada-2: #E7D3B8;
  --shu: #D2452B;         /* 朱：申込みと判断 */
  --shu-2: #B5371F;
  --line: #E1D8C7;
  --c-shukyaku: #2F6690;
  --c-tsuikyaku: #2F7A66;
  --c-saiyo: #B07A22;
  --c-keiei: #5C4F8E;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(30, 30, 30, .08);
  --shadow-lg: 0 24px 60px rgba(21, 42, 69, .18);
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  --max: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kinari); color: var(--sumi); font-family: var(--sans); font-size: 16px; line-height: 1.85; letter-spacing: .02em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--serif); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 240, 230, .94); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 44px; height: 44px; border-radius: 10px; }
.logo b { font-family: var(--serif); font-size: 19px; letter-spacing: .06em; font-weight: 700; }
.logo small { display: block; font-size: 9.5px; letter-spacing: .2em; color: var(--sumi-3); font-weight: 500; line-height: 1; margin-top: 3px; }
.gnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.gnav a { text-decoration: none; font-size: 14px; padding: 8px 10px; border-radius: 8px; color: var(--sumi-2); white-space: nowrap; }
.gnav a:hover { background: var(--kinari-2); color: var(--sumi); }
.gnav a.is-current { color: var(--sumi); font-weight: 700; }
.gnav .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.head-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.head-cta .login { font-size: 13px; text-decoration: none; color: var(--sumi-2); padding: 8px 6px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: var(--sumi); margin: 0 auto; position: relative; content: ""; }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }

/* 商品トップの切替帯 */
.switch { background: var(--ai-deep); color: #fff; font-size: 13px; }
.switch .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.switch .wrap::-webkit-scrollbar { display: none; }
.switch a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; text-decoration: none; color: rgba(255,255,255,.62); white-space: nowrap; border-bottom: 3px solid transparent; }
.switch a:hover { color: #fff; }
.switch a.is-current { color: #fff; font-weight: 700; border-bottom-color: var(--kihada); }
.switch .home { color: #fff; opacity: .9; padding-left: 0; }
.switch em { font-style: normal; font-size: 10.5px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 0 5px; line-height: 1.6; }
.switch em.open { background: var(--shu); border-color: var(--shu); color: #fff; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 15px 28px; font-size: 16px; line-height: 1.3; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; border: 2px solid transparent; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--shu); color: #fff; box-shadow: 0 8px 20px rgba(210, 69, 43, .28); }
.btn-primary:hover { background: var(--shu-2); }
.btn-ghost { background: var(--paper); color: var(--ai); border-color: var(--ai); }
.btn-ghost:hover { background: #fff; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cta-main { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.balloon { font-size: 13px; font-weight: 700; color: var(--shu-2); letter-spacing: .04em; }
.cta-note { font-size: 14px; color: var(--sumi-2); margin-top: 12px; line-height: 1.75; }
.cta-note b { color: var(--sumi); }

/* ---------- 札・チップ ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 10px; letter-spacing: .04em; line-height: 1.6; }
.tag-open { background: var(--shu); color: #fff; }
.tag-soon { background: var(--kinari-2); color: var(--sumi-2); border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; padding: 0; list-style: none; }
.chips li { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; color: var(--ai); }
.chips li b { color: var(--shu-2); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .18em; color: var(--sumi-3); font-weight: 700; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* ---------- セクション共通 ---------- */
section { padding: 96px 0; }
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.sec-head h2 { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.4; margin: 12px 0 18px; letter-spacing: .03em; }
.sec-head p { color: var(--sumi-2); margin: 0; font-size: 17px; }
.bg-paper { background: var(--paper); }
.bg-ai { background: var(--ai); color: #fff; }
.bg-ai .kicker, .bg-ai .sec-head p { color: rgba(255,255,255,.75); }
.bg-deep { background: var(--ai-deep); color: #fff; }

/* ---------- ヒーロー（ブランドトップ） ---------- */
.hero { padding: 72px 0 88px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -180px; top: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(200,162,122,.28), rgba(200,162,122,0) 70%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { font-family: var(--serif); font-size: clamp(40px, 5.6vw, 72px); line-height: 1.22; margin: 18px 0 22px; letter-spacing: .02em; font-weight: 900; }
.hero h1 .hl { background: linear-gradient(transparent 68%, rgba(210,69,43,.22) 68%); }
.hero .lead { font-size: 18px; color: var(--sumi-2); max-width: 520px; margin: 0 0 30px; }

/* 組織図 */
.org { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 30px 26px 26px; box-shadow: var(--shadow-lg); position: relative; }
.org-cap { position: absolute; top: -13px; left: 26px; background: var(--ai); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; padding: 4px 12px; border-radius: 6px; }
.org-boss { display: flex; justify-content: center; }
.org-boss div { border: 2px solid var(--sumi); background: #fff; border-radius: 12px; padding: 10px 22px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.4; }
.org-boss small { display: block; font-weight: 500; font-size: 12px; color: var(--sumi-3); }
.org-lines { height: 46px; position: relative; }
.org-lines::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 22px; background: var(--sumi); }
.org-lines::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; background: var(--sumi); }
.org-deps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }
.org-dep { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px 14px; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .15s ease, box-shadow .15s ease; }
.org-dep::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; background: var(--sumi); }
.org-dep:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.org-dep .ico { width: 44px; height: 44px; }
.org-dep b { font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }
.org-dep span.s { font-size: 12px; line-height: 1.5; color: var(--sumi-2); min-height: 3em; }
.org-dep.is-open { border: 2px solid var(--shu); background: #fff8f5; transform: scale(1.04); box-shadow: 0 12px 26px rgba(210,69,43,.16); }
.org-dep.is-open:hover { transform: scale(1.04) translateY(-3px); }
.org-foot { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--sumi-2); }
.org-foot b { color: var(--sumi); }

/* ---------- なぜ ---------- */
.why { position: relative; }
.why-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.why h2 { font-family: var(--serif); font-size: clamp(30px, 4vw, 52px); line-height: 1.35; margin: 14px 0 26px; font-weight: 900; }
.why p { color: rgba(255,255,255,.86); font-size: 17px; margin: 0 0 18px; }
.why .sign { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255,255,255,.8); }
.why .sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 40% 22%; border: 2px solid rgba(255,255,255,.5); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs-col { border-radius: 18px; padding: 24px 20px; }
.vs-col h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: .1em; }
.vs-col .sub { font-size: 12.5px; opacity: .75; margin-bottom: 16px; }
.vs-big { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.vs-small { background: var(--paper); color: var(--sumi); }
.vs-small h3 { color: var(--shu-2); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.roles li { display: flex; align-items: center; gap: 8px; font-size: 14px; border-radius: 10px; padding: 9px 10px; }
.vs-big .roles li { background: rgba(255,255,255,.08); }
.vs-big .roles li .who { margin-left: auto; font-size: 12px; opacity: .85; white-space: nowrap; flex: none; }
.vs-small .roles li { background: #fff3ef; border: 1px solid #f3d3ca; }
.vs-small .roles li .who { margin-left: auto; font-size: 12px; color: var(--shu-2); font-weight: 700; white-space: nowrap; flex: none; }
.pressure { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pressure div { background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; }
.pressure b { display: block; font-size: 18px; color: #fff; font-family: var(--serif); }

/* ---------- 部署がつながって動く（仕組み） ---------- */
.relay { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.relay-step { background: var(--paper); border: 1px solid var(--line); padding: 26px 22px 24px; position: relative; }
.relay-step:first-child { border-radius: 18px 0 0 18px; }
.relay-step:last-child { border-radius: 0 18px 18px 0; }
.relay-step + .relay-step { border-left: none; }
.relay-step .no { font-family: var(--serif); font-size: 13px; letter-spacing: .14em; color: var(--sumi-3); }
.relay-step h3 { display: flex; align-items: center; gap: 10px; margin: 8px 0 8px; font-family: var(--serif); font-size: 21px; }
.relay-step h3 .ico { width: 34px; height: 34px; }
.relay-step p { margin: 0; font-size: 14.5px; color: var(--sumi-2); line-height: 1.75; }
.relay-step .out { margin-top: 14px; font-size: 13px; font-weight: 700; border-top: 1px dashed var(--line); padding-top: 10px; }
.relay-step:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 28px; height: 28px; margin-top: -14px; background: var(--kinari) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; border: 1px solid var(--line); border-radius: 50%; z-index: 2; }
.relay-goal { margin-top: 22px; background: var(--ai); color: #fff; border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; gap: 18px; }
.relay-goal .stamp { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 18px; transform: rotate(-10deg); }
.relay-goal p { margin: 0; font-size: 16.5px; }
.relay-goal b { font-family: var(--serif); font-size: 20px; }

/* ---------- プロダクト ---------- */
.feature-card { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; background: var(--paper); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); border: 2px solid var(--shu); margin-bottom: 26px; }
.feature-card .body { padding: 44px 44px 40px; }
.feature-card .visual { background: linear-gradient(160deg, #26476f, #152a45); padding: 36px; display: grid; place-items: center; position: relative; }
.prod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.prod-head .ico { width: 54px; height: 54px; }
.prod-head h3 { margin: 0; font-family: var(--serif); font-size: 32px; letter-spacing: .06em; line-height: 1.2; }
.prod-head h3 small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; color: var(--sumi-3); font-weight: 700; margin-bottom: 2px; }
.prod-scope { font-size: 19px; font-weight: 700; line-height: 1.6; margin: 6px 0 6px; }
.prod-outcome { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--shu); margin: 0 0 18px; }
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; }
.task-tags li { font-size: 12.5px; border-radius: 6px; padding: 4px 10px; font-weight: 700; }
.proof { background: var(--kinari); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.proof div { font-size: 12.5px; line-height: 1.5; color: var(--sumi-2); }
.proof b { display: block; font-family: var(--serif); font-size: 20px; color: var(--sumi); }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 22px; text-decoration: none; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.mini:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mini .prod-head h3 { font-size: 24px; }
.mini .prod-head .ico { width: 44px; height: 44px; }
.mini .prod-scope { font-size: 15px; }
.mini .prod-outcome { font-size: 17px; margin-bottom: 14px; color: var(--shu-2); }
.mini .more { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--ai); }
.mini .tag { position: absolute; top: 18px; right: 18px; }

/* スマホの見本（集客部の生成結果のイメージ） */
.phone { width: 260px; background: #111; border-radius: 38px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.35); position: relative; }
.phone-in { background: #fff; border-radius: 30px; overflow: hidden; }
.ig-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-size: 11.5px; font-weight: 700; }
.ig-top i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--shu), var(--kihada), var(--c-saiyo), var(--shu)); display: inline-block; padding: 2px; }
.ig-top i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ai) url("../img/komuten-app-icon.png") center/cover; border: 2px solid #fff; }
.ig-photo { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.ig-cap { padding: 10px 12px 14px; font-size: 11px; line-height: 1.6; color: #333; }
.ig-cap b { font-weight: 700; }
.ig-dots { display: flex; justify-content: center; gap: 4px; padding: 6px 0 0; }
.ig-dots span { width: 5px; height: 5px; border-radius: 50%; background: #ccc; }
.ig-dots span:first-child { background: var(--ai); }
.sample-note { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.85); }
.float-badge { position: absolute; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 9px 12px; font-size: 12px; font-weight: 700; line-height: 1.4; display: flex; align-items: center; gap: 8px; color: var(--sumi); }
.float-badge i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 11px; }

/* 現場写真の代わりの図（写真は差し替え予定） */
.scene { position: absolute; inset: 0; background: linear-gradient(180deg, #b9d2e3 0%, #e4eef4 55%, #c9b28f 55%, #b79b74 100%); }
.scene .frame { position: absolute; left: 14%; right: 14%; bottom: 30%; height: 44%; }
.scene .frame::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background:
  linear-gradient(90deg, #a77b4f 0 6%, transparent 6% 31%, #a77b4f 31% 37%, transparent 37% 63%, #a77b4f 63% 69%, transparent 69% 94%, #a77b4f 94% 100%),
  linear-gradient(180deg, #a77b4f 0 7%, transparent 7% 48%, #a77b4f 48% 54%, transparent 54% 100%); }
.scene .roof { position: absolute; left: 8%; right: 8%; bottom: 74%; height: 22%; background: linear-gradient(to top left, transparent 49%, #8a6038 50% 56%, transparent 57%) left/50% 100% no-repeat, linear-gradient(to top right, transparent 49%, #8a6038 50% 56%, transparent 57%) right/50% 100% no-repeat; }
.scene .label { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.92); font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 4px; color: var(--sumi); }
.scene .title { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--serif); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); line-height: 1.3; }
.scene .title small { display: block; font-size: 11px; font-family: var(--sans); font-weight: 700; letter-spacing: .1em; }

/* ---------- 料金の考え方 ---------- */
.price-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.price-big { font-family: var(--serif); font-weight: 900; font-size: clamp(54px, 7vw, 88px); line-height: 1; letter-spacing: .01em; }
.price-big small { font-size: 18px; font-family: var(--sans); font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.price-unit { font-size: 15px; font-weight: 700; color: var(--sumi-2); margin-bottom: 10px; }
.price-list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.price-list li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; }
.price-list li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--shu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; transform: translateY(3px); }
.seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.seat-step { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; }
.seat-step .t { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sumi-3); }
.seat-step h3 { margin: 4px 0 12px; font-size: 15px; }
.seat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seat { border-radius: 8px; height: 40px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; border: 1px dashed var(--line); color: var(--sumi-3); }
.seat.on { border: none; color: #fff; }
.seat-step .sum { margin-top: 10px; font-size: 13px; font-weight: 700; }

/* ---------- つくる人 ---------- */
.maker { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
.maker-photo { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.maker-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
.maker h2 { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.5; margin: 12px 0 20px; }
.maker p { color: var(--sumi-2); margin: 0 0 16px; }
.maker .name { margin-top: 24px; font-size: 14px; color: var(--sumi-2); }
.maker .name b { font-family: var(--serif); font-size: 22px; color: var(--sumi); margin-right: 10px; letter-spacing: .1em; }
.company { margin-top: 26px; border-top: 1px solid var(--line); }
.company div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.company dt { color: var(--sumi-3); }
.company dd { margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; font-size: 16.5px; position: relative; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--serif); color: var(--shu); font-weight: 900; margin-right: 12px; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--sumi-3); border-bottom: 2px solid var(--sumi-3); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .a { padding: 0 24px 22px 50px; color: var(--sumi-2); font-size: 15.5px; }
.faq .a p { margin: 0 0 8px; }

/* ---------- 締めのCTA ---------- */
.final { text-align: center; padding: 96px 0; background: radial-gradient(ellipse at top, #2c4e7a, var(--ai-deep)); color: #fff; }
.final h2 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 54px); line-height: 1.35; margin: 14px 0 18px; font-weight: 900; }
.final p { color: rgba(255,255,255,.82); margin: 0 auto 32px; max-width: 640px; }
.final .balloon { color: #ffd2c6; }
.final .cta-note { color: rgba(255,255,255,.85); }
.final .cta-note b { color: #fff; }

/* ---------- フッター ---------- */
.site-footer { background: #141414; color: rgba(255,255,255,.78); padding: 64px 0 36px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .logo b { color: #fff; }
.site-footer .logo small { color: rgba(255,255,255,.5); }
.site-footer .foot-h { color: #fff; font-size: 13px; letter-spacing: .14em; margin: 0 0 14px; font-family: var(--sans); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .soon { font-size: 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.copy { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* スマホの追従CTA */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,253,248,.97); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .25s ease; box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.sticky-cta.show { transform: none; }
.sticky-cta .t { font-size: 11.5px; line-height: 1.45; color: var(--sumi-2); flex: 1; }
.sticky-cta .t b { display: block; font-size: 13px; color: var(--sumi); }
.sticky-cta .btn { padding: 12px 18px; font-size: 14px; flex: none; }

/* ---------- 商品トップ ---------- */
.crumbs { display: block; font-size: 12.5px; color: var(--sumi-2); padding-top: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.p-hero { padding: 40px 0 88px; position: relative; overflow: hidden; }
.p-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.p-badge { display: inline-flex; align-items: center; gap: 10px; }
.p-badge .ico { width: 46px; height: 46px; }
.p-badge b { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; }
.p-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4.8vw, 60px); line-height: 1.3; margin: 18px 0 14px; font-weight: 900; letter-spacing: .02em; }
.p-hero .outcome { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--shu); font-weight: 700; margin: 0 0 6px; }
.p-hero .lead { color: var(--sumi-2); font-size: 17px; margin: 0; max-width: 560px; }
.p-visual { display: grid; place-items: center; position: relative; min-height: 520px; }
.p-visual .blob { position: absolute; inset: 6% 2% 6% 8%; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(150deg, var(--kihada-2), #f1e6d4); }

.pains { display: grid; gap: 12px; }
.pain-row { display: grid; grid-template-columns: 1fr 56px 1.15fr; align-items: stretch; }
.pain { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; font-size: 16px; display: flex; gap: 12px; align-items: center; }
.pain .q { flex: none; font-family: var(--serif); font-weight: 900; color: var(--sumi-3); font-size: 22px; }
.pain-arrow { display: grid; place-items: center; color: var(--ai); }
.solve { background: var(--ai); color: #fff; border-radius: 16px; padding: 18px 20px; font-size: 16px; display: flex; flex-direction: column; justify-content: center; }
.solve b { font-size: 17px; }
.solve span { font-size: 13.5px; opacity: .8; }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: stretch; }
.flow-6 { grid-template-columns: repeat(6, 1fr); gap: 22px; }
.flow-step { position: relative; padding: 24px 18px; border-radius: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-step .who { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; border-radius: 999px; padding: 2px 10px; }
.flow-step h3 { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.flow-step p { margin: 0; font-size: 13.5px; color: var(--sumi-2); line-height: 1.65; }
.flow-step.you { background: #fff6f3; border: 2px solid var(--shu); }
.flow-step.you .who { background: var(--shu); color: #fff; }
.flow-step.ai { background: var(--paper); border: 1px solid var(--line); }
.flow-step.ai .who { background: var(--ai); color: #fff; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; right: -26px; top: 50%; width: 28px; height: 28px; margin-top: -14px; background: var(--kinari) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat; border: 1px solid var(--line); border-radius: 50%; z-index: 2; }
.flow-step .sns { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.flow-step .sns span { font-size: 10.5px; font-weight: 700; background: var(--kinari); border-radius: 4px; padding: 1px 6px; }

.cando { display: grid; gap: 28px; }
.cando-item { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 40px; }
.cando-item:nth-child(even) .cando-text { order: 2; }
.cando-no { font-family: var(--serif); font-size: 56px; font-weight: 900; line-height: 1; color: var(--kihada); }
.cando-text h3 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.45; margin: 8px 0 12px; }
.cando-text .pain-line { font-size: 14px; color: var(--sumi-3); margin: 0 0 4px; }
.cando-text p { color: var(--sumi-2); margin: 0 0 16px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tiles li { background: var(--kinari); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.tiles li small { display: block; font-weight: 400; color: var(--sumi-3); font-size: 12px; }
.cando-visual { background: var(--kinari-2); border-radius: 20px; min-height: 300px; display: grid; place-items: center; padding: 26px; position: relative; }
.ui-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px; width: 100%; max-width: 360px; font-size: 13px; }
.ui-card .ui-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.ui-card .ui-h span { font-size: 12px; color: var(--sumi-2); font-weight: 400; white-space: nowrap; }
.ui-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #eee; }
.ui-row .th { width: 42px; height: 42px; border-radius: 8px; flex: none; background: linear-gradient(135deg, #c8a27a, #8a6038); }
.ui-row .tx { flex: 1; line-height: 1.45; }
.ui-row .tx em { display: block; font-style: normal; color: var(--sumi-3); font-size: 11.5px; }
.ui-row .pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pill-shu { background: #fff1ee; color: var(--shu-2); }
.pill-ai { background: #eaf0f7; color: var(--ai); }
.pill-ok { background: #e9f4ef; color: #2b6b55; }
.ui-note { position: absolute; bottom: 10px; right: 14px; font-size: 11px; color: var(--sumi-3); }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.compare th, .compare td { padding: 16px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--ai); color: #fff; font-size: 14px; letter-spacing: .06em; }
.compare thead th.us { background: var(--shu); }
.compare tbody th { width: 22%; font-weight: 700; }
.compare td.before { color: var(--sumi-3); }
.compare td.after { font-weight: 700; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }

.outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.output { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.output b { display: block; font-size: 17px; margin-bottom: 4px; }
.output span { color: var(--sumi-2); font-size: 14px; }
.output small { display: block; margin-top: 8px; font-size: 12px; color: var(--sumi-3); }

.terms-card { background: var(--paper); border-radius: 26px; padding: 44px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; border: 2px solid var(--shu); }
.terms-table { width: 100%; border-collapse: collapse; }
.terms-table th, .terms-table td { text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.terms-table th { width: 38%; color: var(--sumi-3); font-weight: 500; }
.terms-table td { font-weight: 700; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: st; list-style: none; padding: 0; margin: 0; }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px 20px 20px; position: relative; counter-increment: st; display: flex; flex-direction: column; }
.steps li p { flex: 1 0 auto; }
.steps .money { align-self: flex-start; }
.steps li::before { content: "STEP " counter(st); font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--ai); }
.steps h3 { margin: 6px 0 8px; font-size: 17px; line-height: 1.5; }
.steps p { margin: 0; font-size: 14px; color: var(--sumi-2); line-height: 1.7; }
.steps .money { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 9px; background: #e9f4ef; color: #2b6b55; }
.steps .money.pay { background: #fff1ee; color: var(--shu-2); }

.notin { background: var(--paper); border: 1px dashed var(--sumi-3); border-radius: 18px; padding: 22px 26px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.notin h3 { margin: 0; font-size: 16px; }
.notin ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.notin li { font-size: 14px; background: var(--kinari); border-radius: 6px; padding: 4px 10px; }

.others { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.other { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: transform .15s ease; }
.other:hover { transform: translateY(-3px); }
.other.is-current { border: 2px solid var(--pc, var(--sumi)); background: #fff; }
.other .here { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--pc, var(--sumi)); border-radius: 4px; padding: 1px 6px; }
.other .row { display: flex; align-items: center; gap: 8px; }
.other .ico { width: 32px; height: 32px; }
.other b { font-family: var(--serif); font-size: 18px; }
.other span.s { font-size: 13px; color: var(--sumi-2); line-height: 1.6; }
.other .tag { align-self: flex-start; }

/* 準備中の商品トップ */
.soon-banner { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--kihada); border-radius: 14px; padding: 16px 20px; display: flex; gap: 14px; align-items: center; font-size: 14.5px; margin-top: 26px; }
.soon-banner b { white-space: nowrap; }
.planned { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.planned .output b { display: flex; align-items: center; gap: 8px; }
.rule { background: var(--ai); color: #fff; border-radius: 22px; padding: 30px 34px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.rule .stamp { width: 74px; height: 74px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 20px; transform: rotate(-10deg); }
.rule h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; }
.rule p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; }

/* 経営部の画面イメージ */
.judge { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 18px; font-size: 13px; }
.judge-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.judge-h b { font-size: 15px; }
.judge-h span { font-size: 11.5px; color: var(--sumi-3); }
.judge-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #eee; }
.judge-item .pr { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 900; font-family: var(--serif); }
.judge-item .tx { line-height: 1.45; }
.judge-item .tx em { display: block; font-style: normal; font-size: 11.5px; color: var(--sumi-3); }
.judge-item .dl { font-size: 11px; font-weight: 700; color: var(--shu-2); white-space: nowrap; }
.judge-tip { margin-top: 10px; background: #eaf0f7; border-radius: 10px; padding: 9px 11px; font-size: 12px; color: var(--ai); line-height: 1.55; }

/* 動き（控えめ） */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .rise.in { opacity: 1; transform: none; }
}

/* ---------- タブレット ---------- */
@media (max-width: 1080px) {
  .gnav a { padding: 8px 7px; font-size: 13px; }
  .hero-grid, .p-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-card { grid-template-columns: 1fr; }
  .price-wrap { grid-template-columns: 1fr; }
  .maker { grid-template-columns: 300px 1fr; gap: 36px; }
  .cando-item { grid-template-columns: 1fr; }
  .cando-item:nth-child(even) .cando-text { order: 0; }
  .terms-card { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .gnav, .head-cta .login { display: none; }
  .menu-btn { display: block; }
  .head-cta { margin-left: 0; }
  .site-header.open .gnav { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; box-shadow: var(--shadow); }
  .site-header.open .gnav a { padding: 12px 10px; font-size: 15px; border-bottom: 1px solid var(--kinari-2); }
  .relay { grid-template-columns: 1fr 1fr; gap: 12px; }
  .relay-step, .relay-step:first-child, .relay-step:last-child { border-radius: 18px; border: 1px solid var(--line); }
  .relay-step::after { display: none; }
  .mini-cards { grid-template-columns: 1fr; }
  .seats { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-step::after { right: 50% !important; top: auto !important; bottom: -21px; margin: 0 -14px 0 0 !important; transform: rotate(90deg); }
  .steps { grid-template-columns: 1fr 1fr; }
  .outputs, .planned { grid-template-columns: 1fr 1fr; }
  .others { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- スマホ ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 0 18px; }
  section { padding: 68px 0; }
  .site-header .wrap { height: 60px; gap: 10px; }
  .site-header.open .gnav { top: 60px; }
  .logo img { width: 34px; height: 34px; }
  .logo b { font-size: 16px; }
  .logo small { display: none; }
  .head-cta .btn { padding: 9px 12px; font-size: 12.5px; }
  .hero { padding: 40px 0 64px; }
  .hero h1 { font-size: 38px; }
  .hero .lead { font-size: 16px; }
  .org { padding: 26px 12px 16px; }
  .org-deps { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .org-lines { height: 24px; }
  .org-lines::after { display: none; }
  .org-dep::before { display: none; }
  .org-dep span.s { min-height: 0; }
  .org-dep.is-open { transform: none; }
  .org-dep.is-open:hover { transform: none; }
  .org-foot { flex-direction: column; align-items: flex-start; }
  .vs { grid-template-columns: 1fr; }
  .pressure { grid-template-columns: 1fr; }
  .relay { grid-template-columns: 1fr; }
  .relay-goal { flex-direction: column; align-items: flex-start; }
  .feature-card .body { padding: 28px 22px; }
  .feature-card .visual { padding: 30px 16px; }
  .prod-head h3 { font-size: 27px; }
  .prod-scope { font-size: 17px; }
  .proof { grid-template-columns: 1fr; }
  .maker { grid-template-columns: 1fr; }
  .maker-photo { max-width: 320px; }
  .p-hero { padding: 24px 0 64px; }
  .p-hero h1 { font-size: 32px; }
  .p-visual { min-height: 440px; }
  .pain-row { grid-template-columns: 1fr; }
  .pain-arrow { transform: rotate(90deg); height: 34px; }
  .cando-item { padding: 24px 20px; gap: 24px; }
  .tiles { grid-template-columns: 1fr; }
  .compare th, .compare td { padding: 12px 10px; font-size: 13.5px; }
  .compare tbody th { width: 26%; }
  .outputs, .planned { grid-template-columns: 1fr; }
  .terms-card { padding: 26px 20px; }
  .steps { grid-template-columns: 1fr; }
  .notin { grid-template-columns: 1fr; }
  .others { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 1fr; padding: 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .sticky-cta { display: flex; }
  body.has-sticky { padding-bottom: 76px; }
  .float-badge { display: none; }
}

/* 補足 */
.ico-s { width: 26px; height: 26px; flex: none; }
.planned .output b { font-size: 16px; }

/* ===== 2026-10-22 レビュー反映 ===== */
/* 改行：語の途中で折らない */
h1, h2, h3, .outcome, .prod-outcome, .prod-scope { word-break: auto-phrase; text-wrap: balance; }
p, li, dd, td, th, summary, .s, .lead { word-break: auto-phrase; text-wrap: pretty; }
.nw { display: inline-block; }
.pc-only { display: inline; }

/* 状態の札・押せないボタン */
.tag-next { background: #fff3d9; color: #7f5714; border: 1px solid #ecd39b; }
.btn-disabled { background: var(--kinari-2); color: var(--sumi-2); border: 2px dashed var(--line); cursor: default; }
.btn-disabled:hover { transform: none; }

/* ヒーローの「いま始められるのは」 */
.now { font-size: 15.5px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--shu); border-radius: 10px; padding: 12px 16px; margin: 0 0 26px; max-width: 560px; line-height: 1.75; }
.now b { color: var(--shu-2); }

/* 準備中の部署のアイコンは控えめに */
.org-dep:not(.is-open) .ico, .mini .ico { filter: saturate(.45); opacity: .85; }

/* 組織図の入場（動きを減らす設定では出さない） */
@media (prefers-reduced-motion: no-preference) {
  .js .org-lines::after { transform-origin: center; animation: drawx .7s .2s ease-out both; }
  .js .org-dep { animation: popin .5s calc(.45s + var(--d, 0) * .08s) ease-out both; }
  .js .org-dep.is-open { animation-name: popin-open; }
  .js .org-dep.is-open .tag-open { animation: pulse 2.4s 1.4s ease-in-out infinite; }
}
@keyframes drawx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes popin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popin-open { from { opacity: 0; transform: scale(1.04) translateY(10px); } to { opacity: 1; transform: scale(1.04); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(210,69,43,.45); } 50% { box-shadow: 0 0 0 7px rgba(210,69,43,0); } }

/* 料金の考え方 */
.price-h { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.4; margin: 12px 0 18px; }
.price-sub { font-size: 15px; color: var(--sumi-2); margin: 10px 0 20px; }
.seats { grid-template-columns: repeat(2, 1fr); }
.seat.soon { border: 1.5px dashed #b9b2a6; color: #6B655A; background: transparent; }
.seat.soon.picked { border-color: #2F7A66; color: #28705D; background: #eef6f2; }
.seat-step .sum small { font-weight: 500; font-size: 11.5px; color: var(--sumi-2); }
.seat-note { grid-column: 1 / -1; margin: 0; }

/* 集客部：任せる前に */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; }
.trust-card .stamp { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--shu); color: var(--shu-2); font-family: var(--serif); font-weight: 900; font-size: 18px; transform: rotate(-8deg); margin-bottom: 10px; }
.trust-card h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.trust-card p { margin: 0; color: var(--sumi-2); font-size: 15px; }
.small-note { font-size: 13.5px; color: var(--sumi-2); background: var(--kinari); border-radius: 10px; padding: 10px 12px; }

/* 画面例の説明 */
.sample-cap { position: relative; z-index: 1; margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--sumi-2); }
.p-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 準備中ページ */
.flow-step.guest { background: #fff; border: 1px dashed var(--sumi-3); }
.flow-step.guest .who { background: var(--sumi-2); color: #fff; }
.flow-5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.price-band { margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; }
.price-band p { margin: 6px 0 0; font-size: 16px; color: var(--sumi-2); }
.price-band b { color: var(--sumi); }

/* 特商法表記 */
.legal-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.legal-table th { width: 26%; background: var(--kinari); font-weight: 700; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: none; }

/* フッター */
.copy a { color: rgba(255,255,255,.7); text-decoration: none; }
.copy a:hover { color: #fff; text-decoration: underline; }

/* フォーカス・スキップ・スクロール */
:focus-visible { outline: 3px solid var(--ai); outline-offset: 3px; }
.bg-ai :focus-visible, .final :focus-visible, .site-footer :focus-visible, .switch :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--sumi); padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 16px; }
html { scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* スマホのメニュー：開いたら×に */
.menu-btn span::before, .menu-btn span::after { transition: transform .2s ease, top .2s ease; }
.site-header.open .menu-btn span { background: transparent; }
.site-header.open .menu-btn span::before { top: 0; transform: rotate(45deg); }
.site-header.open .menu-btn span::after { top: 0; transform: rotate(-45deg); }

/* 幅901〜1080px：商品トップのヒーローは2列のまま */
@media (max-width: 1080px) and (min-width: 901px) {
  .p-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 28px; }
  .p-visual { min-height: 440px; }
  .phone { width: 230px; }
  .flow-6, .flow-5 { grid-template-columns: repeat(3, 1fr); }
  .flow-6 .flow-step:nth-child(3)::after, .flow-5 .flow-step:nth-child(3)::after { display: none; }
}
@media (max-width: 1080px) { .why p { max-width: 40em; } }
@media (max-width: 900px) {
  .p-hero-grid { grid-template-columns: 1fr; }
  .head-cta { margin-left: auto; }
  .menu-btn { margin-left: 0; }
  .trust { grid-template-columns: 1fr; }
  .flow-6, .flow-5 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .pc-only { display: none; }
  .logo img { width: 36px; height: 36px; }
  .now { font-size: 14.5px; }
  .cando-visual { padding: 12px; min-height: 0; }
  .ui-card { padding: 12px; }
  .ui-card .ui-h { flex-wrap: wrap; gap: 2px 8px; }
  .ui-row .pill { flex: none; }
  .seats { grid-template-columns: 1fr; }
  .seat-grid { grid-template-columns: repeat(4, 1fr); }
  .seat { height: 34px; font-size: 10.5px; }
  .seat-step { padding: 14px; }
  .soon-banner { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .legal-table th, .legal-table td { display: block; width: 100%; padding: 10px 14px; }
  .legal-table th { border-bottom: none; padding-bottom: 2px; }
  body.has-sticky { padding-bottom: 0; }
  body.has-sticky .site-footer { padding-bottom: calc(36px + 76px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: 90px; }
  .switch .home { display: none; }
  .switch .wrap { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 0 6px; }
  .switch a { justify-content: center; padding: 9px 2px; font-size: 12.5px; }
  .switch em { display: none; }
}
@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; padding: 0 12px; }
  .logo { gap: 8px; }
  .logo b { font-size: 15px; letter-spacing: .02em; }
  .head-cta .btn { padding: 8px 10px; font-size: 12px; letter-spacing: 0; }
  .menu-btn { flex: none; width: 40px; height: 40px; }
}
@media (max-width: 359px) { .head-cta { display: none; } }

/* 準備中ページの見出しは一回り小さく */
.page-tsuikyaku .p-hero h1, .page-saiyo .p-hero h1, .page-keiei .p-hero h1 { font-size: clamp(32px, 4.2vw, 52px); }

/* ===== 2026-10-22 2回目の点検の反映 ===== */
/* メニューボタンは常に右端へ（承認前の版や359px以下でボタンが無いとき） */
@media (max-width: 900px) {
  .menu-btn { margin-left: auto; }
  .head-cta + .menu-btn { margin-left: 0; }
}
@media (max-width: 359px) { .head-cta + .menu-btn { margin-left: auto; } }

/* 申込みボタンは本文の左端にそろえる（締めの帯だけ中央） */
.cta-main { align-items: flex-start; }
.final .cta-main { align-items: center; }

/* 押せない札（承認前の版） */
.btn-disabled { border-radius: 10px; border: 1px solid #ecd39b; background: #fff3d9; color: #7f5714; font-size: 14px; padding: 12px 16px; box-shadow: none; }
.final .btn-disabled { background: transparent; color: #fff; border: 1px dashed rgba(255,255,255,.55); }
.sns-note { display: block; margin-top: 6px; font-size: 12px; color: var(--sumi-2); }

/* 締めの帯 */
.final .cta-note { margin: 14px auto 0; max-width: 620px; }
.final > .wrap > p { text-wrap: balance; }

/* 組織図の線と札のそろえ */
.org-lines::after { left: calc((100% - 30px) / 8); right: calc((100% - 30px) / 8); }
.org-dep .tag { margin-top: auto; }
.other .tag { margin-top: auto; }
.tag { white-space: nowrap; }

/* 追従バー */
.sticky-cta .t { font-size: 11px; }

/* 料金 */
.price-big small { white-space: nowrap; }

/* よくある質問：2行目を本文の頭にそろえる */
.faq summary { padding-left: 52px; }
.faq summary::before { position: absolute; left: 24px; top: 20px; margin: 0; }

/* フッターの英語の名前を割らない */
.site-footer a { white-space: nowrap; }

/* つくる人の写真：読み込み中も箱が空に見えないように */
.maker-photo { background: var(--kinari-2); }

/* 語の途中で折らない（追加の対象） */
.proof div, .sticky-cta .t, .org-foot span { word-break: auto-phrase; }

/* 幅901〜1080：ブランドトップのヒーローも2列のまま、吹き出しは小さく */
@media (max-width: 1080px) and (min-width: 901px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .org { padding: 26px 16px 18px; }
  .org-dep span.s { font-size: 11px; }
  .org-dep b { font-size: 16px; }
  .p-visual .float-badge { font-size: 11px; padding: 7px 10px; }
}

@media (max-width: 640px) {
  .terms-table th, .terms-table td { display: block; width: 100%; padding: 10px 0; }
  .terms-table th { border-bottom: none; padding-bottom: 0; font-size: 13px; }
  .terms-table td { padding-top: 2px; }
}
@media (max-width: 400px) {
  .feature-card .prod-head { flex-wrap: wrap; }
  .feature-card .prod-head .tag { margin-left: 68px; }
}
@media (max-width: 360px) { .price-big { font-size: 48px; } }

/* ===== 2026-10-22 昼 4部署の商品トップを同じ型に ===== */
/* 商品トップのヒーローに置く画面のイメージ */
.ui-hero { position: relative; z-index: 1; max-width: 380px; }
.judge.ui-hero { max-width: 420px; }
.ui-card .ui-msg { background: var(--kinari); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--sumi); }
.ui-card .ui-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* 料金が決まっていない部署 */
.price-tbd { font-family: var(--serif); font-weight: 900; font-size: clamp(26px, 3vw, 34px); line-height: 1.4; color: var(--sumi); margin: 6px 0 10px; }

/* 商品トップの運営会社（顔と名前は出さない） */
.company-sec { padding-top: 56px; padding-bottom: 56px; }
.company-strip { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 30px 34px; }
.company-strip h2 { font-family: var(--serif); font-size: 24px; margin: 10px 0 8px; overflow-wrap: anywhere; }
.company-strip > * { min-width: 0; }
.company div > dd { min-width: 0; overflow-wrap: anywhere; }
.company-strip p { margin: 0; color: var(--sumi-2); font-size: 14px; }
.company-strip p a { margin-left: 6px; white-space: nowrap; }
.company-strip .company { margin-top: 0; }
@media (max-width: 900px) {
  .company-strip { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
}
/* 2026-10-26 スマホ幅で横にはみ出す件：グリッドの子が中身の幅まで広がらないように */
.company-strip > *, .company dd { min-width: 0; }
@media (max-width: 480px) {
  .company-strip p a { display: inline-block; margin-left: 0; }
  .company div { grid-template-columns: 96px 1fr; }
}

/* ===== 2026-10-22 権威づけ（工務店の教養の実績・安全の約束・実物の見本） ===== */
/* 工務店の教養の実績 */
.media-stats { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto auto; gap: 16px; }
.media-total { grid-row: 1 / span 2; background: var(--ai); color: #fff; border-radius: 22px; padding: 30px 28px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg); }
.media-total .n { font-family: var(--serif); font-weight: 900; font-size: 76px; line-height: 1; letter-spacing: .02em; }
.media-total .n small { font-size: 22px; margin-left: 4px; }
.media-total .l { font-size: 15px; color: rgba(255,255,255,.85); }
.media-total .more { margin-top: auto; font-weight: 700; font-size: 14px; }
.media-deps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.media-dep { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--pc); border-radius: 16px; padding: 16px 16px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: transform .15s ease, box-shadow .15s ease; }
.media-dep:hover, .media-total:hover, .media-tool:hover, .media-band:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.media-dep .row { display: flex; align-items: center; gap: 8px; }
.media-dep .row .ico { width: 28px; height: 28px; }
.media-dep .row b { font-family: var(--serif); font-size: 17px; }
.media-dep .n { font-family: var(--serif); font-weight: 900; font-size: 34px; line-height: 1.15; color: var(--sumi); }
.media-dep .n small { font-size: 14px; margin-left: 2px; }
.media-dep .to { font-size: 12px; color: var(--sumi-3); }
.media-tool { background: var(--paper); border: 1px dashed var(--sumi-3); border-radius: 16px; padding: 14px 18px; text-decoration: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.media-tool b { font-size: 16px; }
.media-tool span { font-size: 13px; color: var(--sumi-2); }
.media-note { margin: 18px 0 0; font-size: 13.5px; color: var(--sumi-2); max-width: 820px; }
.media-note a { margin-left: 6px; white-space: nowrap; }

/* 商品トップの記事への入口 */
.media-band-sec { padding: 56px 0 0; }
.media-band-sec + .company-sec { padding-top: 20px; }
.media-band { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 26px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.media-band .k { font-size: 12.5px; letter-spacing: .14em; font-weight: 700; color: var(--sumi-3); white-space: nowrap; }
.media-band .t { font-size: 14px; color: var(--sumi-2); }
.media-band .t b { display: block; font-family: var(--serif); font-size: 20px; color: var(--sumi); margin-bottom: 2px; }
.media-band .more { font-weight: 700; color: var(--ai); white-space: nowrap; font-size: 14px; }

/* 安全の約束 */
.safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.safety-card { background: var(--kinari); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px 14px; }
.safety-card .head { display: flex; align-items: center; gap: 10px; }
.safety-card .head .ico { width: 36px; height: 36px; flex: none; }
.safety-card .head b { font-family: var(--serif); font-size: 20px; }
.safety-card .head .tag { margin-left: auto; }
.safety-card .stamp { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--shu); color: var(--shu-2); font-family: var(--serif); font-weight: 900; font-size: 15px; transform: rotate(-8deg); flex: none; }
.safety-card ul { list-style: none; margin: 14px 0 0; padding: 0; }
.safety-card li { position: relative; padding-left: 26px; margin: 0 0 12px; font-size: 15px; line-height: 1.75; }
.safety-card li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 13px; height: 7px; border-left: 2.5px solid var(--shu); border-bottom: 2.5px solid var(--shu); transform: rotate(-45deg); }
.not-promised { margin-top: 18px; background: var(--paper); border: 1px dashed var(--sumi-3); border-radius: 18px; padding: 18px 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.not-promised h3 { margin: 0; font-size: 16px; white-space: nowrap; }
.not-promised p { margin: 0; font-size: 14.5px; color: var(--sumi-2); }
.safety-links { margin: 16px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.safety-links a { white-space: nowrap; }
.to-safety { margin: 18px 0 0; font-weight: 700; }
.to-safety a { color: var(--ai); }

/* 実物の見本（site.json の samples があるときだけ出る） */
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sample { margin: 0; }
.sample img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); display: block; }
.sample figcaption { margin-top: 10px; font-size: 13px; color: var(--sumi-2); }
.sample figcaption b { display: block; font-size: 14.5px; color: var(--sumi); }
.visual-real img { width: 100%; max-width: 360px; height: auto; border-radius: 16px; box-shadow: var(--shadow-lg); }

@media (max-width: 1080px) {
  .media-stats { grid-template-columns: 1fr; }
  .media-total { grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 24px; }
  .media-total .more { margin-top: 0; margin-left: auto; }
}
@media (max-width: 900px) {
  .safety-grid { grid-template-columns: 1fr; }
  .media-deps { grid-template-columns: repeat(2, 1fr); }
  .media-band { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .not-promised { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
}
@media (max-width: 640px) {
  .media-total .n { font-size: 60px; }
  .media-dep .n { font-size: 28px; }
  .safety-card { padding: 20px 18px 10px; }
  .safety-card li { font-size: 14.5px; }
}

/* フッターの一言（キャッチコピーとして句読点の点検の対象） */
.site-footer .tagline { margin: 16px 0 0; line-height: 1.8; }

/* 対応SNSのアイコン列（集客部） */
.sns-icons { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 4px; padding: 0; }
.sns-icons li { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.sns-icons svg { width: 18px; height: 18px; display: block; }
.sns-icons-sm { justify-content: center; gap: 5px; margin: 6px 0 0; }
.sns-icons-sm li { width: 24px; height: 24px; border-radius: 6px; }
.sns-icons-sm svg { width: 14px; height: 14px; }
.sns-icons-hero { margin: 14px 0 18px; }
.tiles .sns-icons { justify-content: flex-start; }
.tiles .sns-icons li { padding: 0; background: #fff; border-radius: 6px; }

/* 広告用ページ（/lp/shukyaku/）：宛先の帯と、不安を消す4枚 */
.lp-to { margin: 0; background: var(--ai-deep); color: #fff; font-size: 13.5px; line-height: 1.6; padding: 8px 0; text-align: center; }
.trust.trust-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .trust.trust-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .trust.trust-4 { grid-template-columns: 1fr; } }

/* 広告用ページ：ボタンの下の一文と、画面の動き（2026-10-27） */
.lp-first { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--sumi-2); }
.lp-first.center, .sample-cap.center { text-align: center; }
.demo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.demo-step { position: relative; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 6px; transition: opacity .5s ease, border-color .5s ease, transform .5s ease, box-shadow .5s ease; }
.demo-step .n { position: absolute; top: -14px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--sumi); color: #fff; font-weight: 700; font-size: 14px; line-height: 28px; text-align: center; }
.demo-step .who { font-size: 12px; font-weight: 700; color: var(--sumi-3); }
.demo-step.you .who { color: var(--shu-2); }
.demo-step.ai .who { color: var(--ai); }
.demo-step h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.demo-step .demo-ui { max-width: none; box-shadow: none; border: 1px solid var(--line); margin-top: 4px; flex: 1; }
.demo-step.you { border-color: #f1c9bf; }
.demo-ui .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.demo-ui .btns span { border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: #fff; }
.demo-ui .btns .go { background: var(--shu); border-color: var(--shu); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .demo.play .demo-step { opacity: .35; }
  .js .demo.play .demo-step.on { opacity: 1; }
  .js .demo.play .demo-step.now { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sumi-3); }
  .js .demo.play .demo-step.you.now { border-color: var(--shu); }
}
@media (max-width: 900px) { .demo { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } }
@media (max-width: 560px) { .demo { grid-template-columns: 1fr; gap: 22px; } .js .demo.play .demo-step { opacity: 1; } }
.final .lp-first { margin: 10px auto 0; color: rgba(255,255,255,.85); }
.lp-concept { display: flex; margin-top: 16px; color: var(--sumi); letter-spacing: .12em; }

/* 広告用ページの最初の画面に置く、実際の画面（スマホの枠） */
.real-shot { position: relative; width: min(340px, 78vw); margin: 0 auto; border: 10px solid #1f2a24; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px rgba(31, 42, 36, .22); }
.real-shot img { display: block; width: 100%; height: auto; }
.lp-maker { margin: 14px 0 0; font-size: 12.5px; color: var(--sumi-3); }
.hero-real-sp { display: none; }
.real-text { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgba(31, 42, 36, .12); }
.real-text img { display: block; width: 100%; height: auto; }
.real-text figcaption { font-size: 11.5px; color: var(--sumi-3); padding: 6px 12px; border-top: 1px solid var(--line); background: var(--paper); }
@media (max-width: 900px) {
  .hero-real-sp { display: block; margin: 14px 0 16px; }
  .hero-real-sp .ui-card { max-width: none; }
  .lp-visual-pc { display: none; }
}
@media (max-width: 900px) { .hero-real-sp .unreplied .ui-row:nth-child(n+4) { display: none; } }
.real-video { display: block; width: 100%; height: auto; background: #fff; }
.real-video-sp, .demo-video { margin: 0 auto 8px; text-align: center; }
.real-video-sp .real-video { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px rgba(31, 42, 36, .12); }
.real-video-lead { margin: 14px 0 8px; font-weight: 700; font-size: 15px; }
.demo-video { margin-bottom: 36px; }
.demo-video .real-shot { width: min(300px, 72vw); }
.real-video-sp figcaption, .demo-video figcaption { margin-top: 10px; font-size: 12px; color: var(--sumi-3); }
@media (max-width: 900px) { .demo-video { display: none; } }

/* ---------- 広告用ページの「読ませる」型（_lp_story.html。10/27 参考LPの構成と言葉遣いを踏襲） ---------- */
.story { --y: #ffd400; --k: #0e0e10; --r: #e0261b; }
.story section { padding: 72px 0; }
.st-narrow { max-width: 760px; }
.story h2 { font-family: var(--sans); font-weight: 900; }
.story .sec-head h2 { font-family: var(--sans); font-weight: 900; }
/* 最初の一画面 */
.st-fv { padding: 40px 0 48px !important; }
.st-fv-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.st-fv-copy { min-width: 0; }
.st-fv h1 { font-family: var(--sans); font-weight: 900; font-size: clamp(52px, 7.6vw, 96px); line-height: 1.12; letter-spacing: .01em; margin: 6px 0 18px; }
.st-fv-visual { padding-top: 12px; }
.st-to { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.st-pre { margin: 0; font-size: 20px; font-weight: 700; }
.st-pre span { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.st-slash { margin: 14px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 900; }
.st-ribbon { display: inline-block; margin: 0 0 18px; padding: 10px 22px; font-size: 18px; font-weight: 900; background: linear-gradient(180deg, #f3dfa4, #d9b55c); color: #3a2a06; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.st-ribbon b { font-size: 1.25em; }
.st-know { background: #fff; color: var(--sumi); border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; box-shadow: 0 8px 20px rgba(0,0,0,.10); }
.st-know-h { margin: 0 0 6px; font-weight: 900; font-size: 15px; }
.st-know ul { margin: 0; padding: 0; list-style: none; }
.st-know li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; border-top: 1px dashed #ddd; }
.st-know li:first-child { border-top: 0; }
.st-know li::before { content: "✓"; position: absolute; left: 4px; top: 5px; color: var(--r); font-weight: 900; font-size: 18px; }
.st-know li b { color: var(--r); }
.story .btn-primary { font-size: 19px; padding: 20px 36px; }
.st-notes { margin: 14px 0 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.7; color: var(--sumi-3); }
.st-lead { font-size: 19px; font-weight: 700; margin: 0 0 18px; }
.st-tasks { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.st-chips { margin: 0 0 22px; }
/* A：黄色 */
.st-a .st-fv { background: var(--y); color: var(--k); }
.st-a .st-fv .sample-cap, .st-a .st-fv .lp-maker, .st-a .st-fv .st-notes, .st-a .st-fv .lp-first { color: #3b3420; }
.st-a .st-fv .balloon { color: var(--k); }
.st-a .st-fv .real-video-sp figcaption { color: #3b3420; }
/* B：黒 */
.st-b .st-fv { background: var(--k); color: #fff; }
.st-b .st-fv h1 { color: #fff; }
.st-b .st-fv .st-tasks { color: rgba(255,255,255,.7); }
.st-b .st-fv .sample-cap, .st-b .st-fv .lp-maker, .st-b .st-fv .lp-first, .st-b .st-fv .cta-note, .st-b .st-fv .real-video-sp figcaption, .st-b .st-fv .real-video-lead { color: rgba(255,255,255,.8); }
.st-b .st-fv .lp-maker a { color: #fff; }
.st-b .st-fv .balloon { color: #ffb4a6; }
.st-b .st-fv .st-ribbon { background: var(--r); color: #fff; }
/* 約束 */
.st-promise { text-align: center; background: #fff; }
.st-badge { display: inline-block; margin: 0 0 18px; padding: 6px 16px; background: #444; color: #fff; font-weight: 700; font-size: 15px; }
.st-promise-1 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 900; }
.st-promise-2 { margin: 4px 0 18px; font-size: clamp(22px, 3vw, 32px); font-weight: 900; }
.st-promise-2 em { font-style: normal; color: var(--r); }
.st-promise-3 { display: inline-block; margin: 0; padding: 18px 28px; border: 2px solid #c9b27a; font-size: clamp(26px, 3.8vw, 40px); font-weight: 900; line-height: 1.4; background: #fffdf3; }
.st-down { width: 0; height: 0; margin: 22px auto 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-top: 34px solid #ef5d8e; }
/* 悩み（ビジョナリー） */
.st-pain { background: #f3f1ec; }
.st-pain h2 { text-align: center; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.35; margin: 0 0 28px; }
.st-pain-list { max-width: 720px; margin: 0 auto; padding: 0; list-style: none; }
.st-pain-list li { position: relative; margin: 0 0 10px; padding: 16px 18px 16px 50px; background: #fff; border-radius: 10px; font-weight: 700; font-size: 16.5px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.st-pain-list li::before { content: "×"; position: absolute; left: 16px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: #7d7a73; color: #fff; text-align: center; line-height: 24px; font-size: 14px; }
/* 「決まります」→「しかし」（おさる） */
.st-turn { background: #fff; text-align: center; }
.st-turn h2 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.4; margin: 0 0 22px; }
.st-mark { background: linear-gradient(transparent 62%, #ffe27a 62%); }
.st-turn p { font-size: 17px; text-align: left; }
.st-but { text-align: center !important; margin: 34px 0 20px; }
.st-but span { display: inline-block; padding: 10px 46px; background: #1d4fa3; color: #fff; font-weight: 900; font-size: 26px; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); padding-bottom: 18px; }
.st-turn-1 { text-align: center !important; font-size: clamp(20px, 2.6vw, 26px) !important; font-weight: 900; margin: 0 0 14px; }
.st-tags { text-align: center !important; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.st-tags span { display: inline-block; padding: 6px 18px; background: #c62020; color: #fff; font-weight: 900; font-size: 20px; }
.st-turn-2 { text-align: center !important; font-size: clamp(26px, 4vw, 42px) !important; line-height: 1.4; margin: 18px 0 26px; }
.st-turn-2 .st-box { display: inline-block; font-size: 18px; padding: 4px 14px; border: 1.5px solid #1d3a6e; color: #1d3a6e; font-weight: 700; margin-bottom: 8px; }
.st-turn-2 b { color: #1d3a6e; font-weight: 900; }
.st-q { margin: 42px 0 6px !important; }
.st-q-sub { text-align: center !important; color: #1d4fa3; font-weight: 900; font-size: 22px !important; margin: 0; }
.st-chev { width: 26px; height: 26px; margin: 16px auto 0; border-right: 4px solid #3aa0e0; border-bottom: 4px solid #3aa0e0; transform: rotate(45deg); }
/* 濃い地のチェックリスト（おさる） */
.st-secret { background: #39424e; color: #fff; padding-bottom: 0 !important; }
.st-secret-q { text-align: center; font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; line-height: 1.5; margin: 0 0 18px; }
.st-secret-q span { font-family: var(--serif); }
.st-secret-p { text-align: center; color: rgba(255,255,255,.88); margin: 0 0 28px; }
.st-secret-h { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 22px; }
.st-secret-h span { background: #fff; color: #111; font-weight: 900; font-size: clamp(18px, 2.6vw, 26px); padding: 2px 12px; }
.st-secret-h b { font-family: var(--serif); font-size: clamp(40px, 6vw, 60px); line-height: 1.3; }
.st-check { margin: 0; padding: 10px 22px; list-style: none; background: #fff; color: var(--sumi); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.st-check li { position: relative; padding: 14px 0 14px 42px; border-bottom: 1px dotted #bbb; font-size: 16.5px; line-height: 1.7; }
.st-check li:last-child { border-bottom: 0; }
.st-check li::before { content: "✓"; position: absolute; left: 4px; top: 10px; width: 26px; height: 26px; border: 2px solid #333; color: #d3132a; font-weight: 900; font-size: 22px; line-height: 20px; text-align: center; }
.st-secret-real { max-width: 420px; margin: 28px auto 0; }
.st-cta-band { margin-top: 0; padding: 56px 24px 64px; text-align: center; background: linear-gradient(180deg, #39424e 0, #0d1630 40px); }
.st-cta-band-h { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin: 0 0 22px; line-height: 1.5; }
.st-cta-band .balloon { color: #f3dfa4; }
.st-cta-band .lp-first { color: rgba(255,255,255,.85); }
.st-cta-band .cta-main { align-items: center; }
/* 任せたあと（ビジョナリー） */
.st-after-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.st-after-grid > div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.st-after-grid h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.5; }
.st-after-grid p { margin: 0; color: var(--sumi-2); font-size: 15px; }
.st-dream { margin: 34px auto 0; max-width: 760px; text-align: center; font-size: 19px; line-height: 2; }
.st-dream b { display: inline-block; margin: 0 6px; padding: 0 6px; background: linear-gradient(transparent 60%, #ffe27a 60%); }
/* 5つの工程（ビジョナリー） */
.st-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: five; }
.st-five li { counter-increment: five; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 16px 18px; }
.st-five li::before { content: counter(five); position: absolute; top: -12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-tsuikyaku); color: #fff; font-weight: 900; text-align: center; line-height: 26px; font-size: 14px; }
.st-five b { display: block; font-size: 22px; font-weight: 900; }
.st-five span { display: block; font-size: 13px; color: var(--c-tsuikyaku); font-weight: 700; margin-bottom: 8px; }
.st-five p { margin: 0; font-size: 14.5px; color: var(--sumi-2); line-height: 1.7; }
.st-ask { max-width: 760px; margin: 26px auto 0; padding: 16px 20px; background: #fff7d6; border-radius: 12px; font-size: 15.5px; }
.st-ask b { color: var(--shu-2); }
.st-demo-real { margin-top: 36px; }
/* 比較表（ビジョナリー） */
.st-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 15px; }
.st-table th, .st-table td { border: 1px solid var(--line); padding: 12px 10px; text-align: center; vertical-align: middle; }
.st-table thead th { background: #f3f1ec; font-size: 14px; }
.st-table tbody th { text-align: left; font-weight: 700; background: #faf8f3; width: 32%; }
.st-table td small { display: block; font-size: 12px; color: var(--sumi-3); }
.st-table .us { background: #fff6cc; font-weight: 900; }
.st-table thead .us { background: var(--y); color: var(--k); }
/* B：実物（AIヒーローズ「構想ではありません」） */
.st-real-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.st-real h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.35; margin: 0 0 18px; }
.st-real-more { font-weight: 700; margin: 26px 0 6px; }
.st-real-list { color: var(--sumi-2); margin: 0 0 20px; }
.st-real-big { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.6; margin: 0; }
.st-real-big b { background: linear-gradient(transparent 62%, #ffd2c8 62%); }
.st-real-video { margin: 0; }
/* B：夜の事務所 */
.st-night { background: linear-gradient(180deg, #121722, #1d2433); color: #fff; text-align: center; }
.st-night h2 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.4; margin: 0 0 28px; }
.st-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 30px; }
.st-tiles div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 16px 10px; }
.st-tiles span { display: block; font-size: 13px; color: rgba(255,255,255,.7); }
.st-tiles b { display: block; font-size: 17px; margin-top: 2px; }
.st-night-p { font-size: 17px; color: rgba(255,255,255,.88); margin: 0 0 18px; }
.st-quote { font-size: clamp(19px, 2.6vw, 24px); font-weight: 900; margin: 0 0 10px; }
.st-night .st-quote:last-of-type { margin-bottom: 24px; }
.st-night-big { font-size: clamp(26px, 4vw, 40px); font-weight: 900; line-height: 1.45; margin: 0 0 18px; color: #ffd400; }
.st-night-ask { margin: 34px 0 0; font-size: 17px; color: rgba(255,255,255,.88); }
.st-night-ask b { display: block; margin-top: 8px; font-size: clamp(20px, 2.8vw, 26px); color: #fff; }
/* B：入力→出力 */
.st-hand .sec-head h2 { font-size: clamp(30px, 4.4vw, 48px); }
.st-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; max-width: 860px; margin: 0 auto; }
.st-io ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-io li { position: relative; padding: 12px 14px 12px 40px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.st-io li::before { content: "✓"; position: absolute; left: 14px; color: var(--c-tsuikyaku); font-weight: 900; }
.st-io-out li { border-color: var(--c-tsuikyaku); background: #eef7f3; }
.st-io-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; background: var(--c-tsuikyaku); color: #fff; border-radius: 16px; text-align: center; }
.st-io-mid .ico { width: 44px; height: 44px; }
.st-io-mid b { font-size: 20px; }
.st-io-mid span { font-size: 12px; max-width: 9em; line-height: 1.5; }
/* B：5工程→2アクション */
.st-two-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: start; }
.st-before { background: #f1efe9; border-radius: 14px; padding: 20px 22px; color: var(--sumi-2); }
.st-two-h { margin: 0 0 8px; font-weight: 700; }
.st-before ol { margin: 0; padding-left: 1.4em; }
.st-before li { padding: 4px 0; text-decoration: line-through; text-decoration-color: rgba(210,69,43,.6); }
.st-act { display: flex; gap: 14px; background: #fff; border: 2px solid var(--c-tsuikyaku); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.st-act .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-tsuikyaku); color: #fff; font-weight: 900; text-align: center; line-height: 34px; }
.st-act b { font-size: 20px; }
.st-act p { margin: 2px 0 0; }
.st-act-ai { font-size: 13px; color: var(--sumi-3); }
.st-act-real { max-width: 360px; margin: 6px auto 0; }
/* B：帯 */
.st-band { background: var(--k); color: #fff; text-align: center; }
.st-band-s { margin: 0; font-size: 18px; color: rgba(255,255,255,.8); }
.st-band-h { margin: 8px 0 14px; font-size: clamp(32px, 5vw, 54px); font-weight: 900; line-height: 1.3; }
.st-band-l { margin: 0; font-size: 14px; color: rgba(255,255,255,.7); }
/* B：頼み方 */
.st-ex { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.st-ex li { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.st-ex li::after { content: none; }
.st-ex span { font-weight: 700; }
.st-ex span::after { content: "→"; margin-left: 10px; color: var(--c-tsuikyaku); }
.st-ex b { grid-column: 3; color: var(--c-tsuikyaku); }
.st-howto-p { text-align: center; font-size: 17px; margin: 26px 0 0; }
.st-howmany { text-align: center; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.4; margin: 48px 0 0; color: var(--r); }
/* B：試せる */
.st-try { background: var(--paper); text-align: center; }
.st-try h2 { font-size: clamp(26px, 3.8vw, 40px); line-height: 1.45; margin: 0 0 22px; }
.st-try p { font-size: 17px; }
.st-try-b { font-size: clamp(20px, 2.8vw, 26px) !important; font-weight: 900; margin-top: 24px; }
/* B：夢 */
.st-free .sec-head h2 { font-size: clamp(30px, 4.4vw, 48px); }
.st-was { max-width: 560px; margin: 0 auto; padding: 0; list-style: none; text-align: center; color: var(--sumi-3); }
.st-was li { padding: 6px 0; text-decoration: line-through; }
.st-free-then { text-align: center; font-size: 20px; font-weight: 700; margin: 22px 0 16px; }
.st-free-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 900px; margin: 0 auto; }
.st-free-grid div { background: #fff; border-radius: 14px; border: 1px solid var(--line); padding: 22px 10px; text-align: center; }
.st-free-grid span { display: block; font-size: 13px; color: var(--sumi-3); }
.st-free-grid b { display: block; font-size: 20px; }
.st-roles { max-width: 760px; margin: 34px auto 0; display: grid; gap: 10px; }
.st-roles p { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 12px; background: #eef7f3; }
.st-roles p + p { background: #fff3e6; }
.st-roles span { font-size: 14px; color: var(--sumi-2); }
.st-roles b { font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .06em; }
.st-free-last { text-align: center; font-size: clamp(22px, 3.2vw, 32px); font-weight: 900; line-height: 1.5; margin: 34px 0 12px; }
/* B：申込み */
.st-offer { background: #f3f1ec; text-align: center; }
.st-offer h2 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.4; margin: 0 0 8px; }
.st-offer-s { font-size: 19px; font-weight: 700; margin: 0 0 24px; }
.st-offer-box { background: #fff; border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); text-align: left; }
.st-offer-h { margin: 0 0 8px; font-weight: 900; text-align: center; }
.st-offer-box ol { margin: 0 0 22px; padding-left: 1.5em; }
.st-offer-box li { padding: 6px 0; border-bottom: 1px dashed #ddd; }
.st-offer-box .cta-main { align-items: center; }
/* 最後の申込み */
.st-final-k { display: inline-block; margin: 0; padding: 4px 14px; border: 1px solid rgba(255,255,255,.5); font-size: 15px; }
.st-final h2 { font-family: var(--sans); }
@media (max-width: 900px) {
  .st-fv-grid, .st-real-grid, .st-two-grid { grid-template-columns: 1fr; gap: 24px; }
  .st-after-grid { grid-template-columns: 1fr; }
  .st-five { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .st-tiles { grid-template-columns: 1fr 1fr; }
  .st-free-grid { grid-template-columns: 1fr 1fr; }
  .st-io { grid-template-columns: 1fr; }
  .st-io-mid { flex-direction: row; justify-content: center; }
  .st-io-mid span { max-width: none; }
  .st-demo-real { display: none; }
}
@media (max-width: 640px) {
  .story section { padding: 56px 0; }
  .st-fv { padding: 28px 0 36px !important; }
  .st-fv h1 { font-size: clamp(48px, 15vw, 64px); }
  .story .btn-primary { font-size: 18px; padding: 18px 22px; }
  .st-five { grid-template-columns: 1fr; }
  .st-ex li { grid-template-columns: 1fr; gap: 4px; }
  .st-ex b { grid-column: 1; }
  .st-roles p { grid-template-columns: 1fr; gap: 2px; }
  .st-down { border-left-width: 60px; border-right-width: 60px; }
  .st-but span { font-size: 22px; padding-left: 36px; padding-right: 36px; }
  .st-check { padding: 6px 14px; }
  .st-check li { font-size: 15.5px; }
}
.story .center { text-align: center; }
@media (max-width: 640px) {
  .st-table { min-width: 0; font-size: 12.5px; }
  .st-table th, .st-table td { padding: 9px 4px; }
  .st-table thead th { font-size: 12px; }
  .st-table tbody th { width: 30%; }
  .st-table td small { font-size: 11px; }
  .st-ribbon { font-size: 16px; padding: 8px 16px; }
  .st-know li { font-size: 14.5px; }
}
.st-if { font-weight: 700; font-size: 18px !important; line-height: 2; padding: 12px 18px; border-left: 4px solid #c62020; background: #fff5f3; }
.st-scene { max-width: 760px; margin: 32px auto 0; background: #fff; border: 2px solid var(--y, #ffd400); border-radius: 16px; padding: 20px 22px; }
.st-scene-h { margin: 0 0 8px; font-weight: 900; font-size: 18px; text-align: center; }
.st-scene ol { margin: 0; padding: 0; list-style: none; }
.st-scene li { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed #ddd; font-size: 15.5px; }
.st-scene li:first-child { border-top: 0; }
.st-scene li span { font-weight: 900; color: #1d3a6e; }
.st-pair { max-width: 420px; margin: 22px 0 0; }
.st-pair .ui-card { max-width: none; }
.st-pair-arrow { text-align: center; font-weight: 700; color: var(--c-tsuikyaku); margin: 10px 0; font-size: 14px; }
@media (max-width: 640px) { .st-scene li { grid-template-columns: 1fr; gap: 0; } }
.st-b .st-fv .ui-card { color: var(--sumi); max-width: 460px; font-size: 15px; padding: 18px 20px; margin: 0 auto; }
.st-b .st-fv .ui-card .ui-row .tx em { font-size: 12.5px; }
.st-b .st-fv-visual .sample-cap { color: rgba(255,255,255,.75); }
.st-free-scene { max-width: 640px; margin: 26px auto 0; padding: 16px 20px; background: #fff; border-left: 4px solid var(--c-tsuikyaku); border-radius: 8px; font-weight: 700; }
.st-secret .st-secret-p { margin-top: 0; }
.st-future { margin: 26px auto 0; text-align: center; font-size: clamp(22px, 3.2vw, 32px); font-weight: 900; line-height: 1.5; color: #1d3a6e; }
.st-fold { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.st-fold > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--ai); }
.st-fold[open] > summary { border-bottom: 1px solid var(--line); }
.st-fold > .terms-card, .st-fold > .steps { margin: 16px; }
.story #price, .story #start, .story #faq { padding: 44px 0; }
.story #price .sec-head, .story #start .sec-head, .story #faq .sec-head { margin-bottom: 20px; }
.st-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; max-width: 520px; }
.st-nums > div { background: #fff; color: var(--k, #111); border-radius: 10px; padding: 8px 6px 6px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.st-nums span { display: block; font-size: 12px; font-weight: 700; color: #555; }
.st-nums b { display: block; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; font-weight: 900; color: var(--r, #e0261b); font-variant-numeric: tabular-nums; }
.st-nums small { font-size: .45em; color: #222; margin-left: 1px; }
.st-nums em { display: block; font-style: normal; font-size: 11px; color: #555; }
.story .st-fv .cta-group, .story .st-offer .cta-group, .story .st-cta-band .cta-group, .story .st-final .cta-group { display: block; }
.story .st-fv .cta-main, .story .st-offer .cta-main, .story .st-cta-band .cta-main, .story .st-final .cta-main { display: flex; width: 100%; max-width: 520px; }
.story .st-offer .cta-main, .story .st-cta-band .cta-main, .story .st-final .cta-main { margin: 0 auto; }
.story .st-fv .btn-primary, .story .st-offer .btn-primary, .story .st-cta-band .btn-primary, .story .st-final .btn-primary { width: 100%; justify-content: center; font-size: 21px; padding: 22px 20px; border-radius: 12px; box-shadow: 0 6px 0 #9e2a17, 0 12px 24px rgba(0,0,0,.2); }
@media (max-width: 640px) { .story .st-fv .btn-primary, .story .st-offer .btn-primary, .story .st-cta-band .btn-primary, .story .st-final .btn-primary { font-size: 19px; padding: 19px 14px; } }
.st-fv .st-know { margin: 18px 0 0; }
@media (max-width: 640px) { .st-a .st-to { margin-bottom: 8px; } .st-a .st-pre { font-size: 17px; } .st-a .st-slash { font-size: 15px; margin-top: 8px; } .st-fv h1 { margin-bottom: 12px; } .st-ribbon { margin-bottom: 12px; } }

/* 無料の理由（広告用ページ・10/27 参考LPのストーリー分析） */
.st-why { padding: 64px 0; background: #fffdf3; text-align: center; }
.st-why-k { display: inline-block; margin: 0 0 10px; padding: 4px 14px; border: 2px solid var(--sumi); border-radius: 999px; font-weight: 900; font-size: 14px; }
.st-why h2 { margin: 0 0 18px; }
.st-why p { text-align: left; font-size: 16px; line-height: 1.9; }
.st-why p b { background: linear-gradient(transparent 60%, #ffe066 60%); }

/* 煽る部品（10/27 えいがさん「煽りに煽って」）：写真の帯・赤い警告・様子見の損 */
.st-photo { position: relative; min-height: 600px; display: flex; align-items: flex-end; background-size: cover; background-repeat: no-repeat; color: #fff; overflow: hidden; }
.st-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%); }
.st-photo-in { position: relative; padding-bottom: 56px; }
.st-photo-k { display: inline-block; margin: 0 0 12px; padding: 4px 12px; background: var(--shu); font-weight: 900; font-size: 15px; letter-spacing: .04em; }
.st-photo-h { margin: 0; font-weight: 900; font-size: clamp(38px, 10vw, 76px); line-height: 1.15; letter-spacing: -.01em; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.st-photo-h em { font-style: normal; color: #ffd400; }
.st-photo-p { margin: 18px 0 0; max-width: 640px; font-size: 16.5px; line-height: 1.9; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.st-photo-cap { position: absolute; right: 10px; top: 8px; font-size: 11px; color: rgba(255,255,255,.75); }
@media (min-width: 900px) { .st-photo { min-height: 680px; } .st-photo-in { padding-bottom: 80px; } }

.st-alert { background: repeating-linear-gradient(-45deg, #c8261b 0 22px, #b01f15 22px 44px); color: #fff; text-align: center; padding: 44px 0; }
.st-alert-top { margin: 0 0 10px; font-weight: 900; font-size: 18px; }
.st-alert-top span { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 50%; background: #ffd400; color: #b01f15; font-size: 20px; vertical-align: -4px; }
.st-alert-big { margin: 0; font-weight: 900; font-size: clamp(34px, 9vw, 64px); line-height: 1.2; }
.st-alert-big em { font-style: normal; color: #ffd400; }
.st-alert-sub { margin: 14px auto 0; max-width: 640px; font-size: 15.5px; font-weight: 700; line-height: 1.8; }

.st-fomo { background: #111; color: #fff; padding: 72px 0; text-align: center; }
.st-fomo-k { display: inline-block; margin: 0 0 12px; padding: 4px 14px; background: var(--shu); font-weight: 900; font-size: 15px; }
.st-fomo h2 { margin: 0 0 18px; color: #fff; font-size: clamp(34px, 8.5vw, 60px); line-height: 1.2; font-weight: 900; }
.st-fomo h2 em { font-style: normal; color: #ffd400; }
.st-fomo-lead { max-width: 640px; margin: 0 auto 28px; text-align: left; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.88); }
.st-calc { max-width: 640px; margin: 0 auto 32px; padding: 22px 20px; background: #ffd400; color: var(--sumi); border-radius: 14px; }
.st-calc-h { margin: 0 0 14px; font-weight: 900; font-size: 18px; }
.st-calc-in { display: grid; gap: 10px; text-align: left; }
.st-calc-in label { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 15px; }
.st-calc-in input, .st-calc-in select { font: inherit; font-weight: 900; font-size: 18px; width: 86px; padding: 6px 8px; border: 2px solid var(--sumi); border-radius: 8px; background: #fff; text-align: right; }
.st-calc-in select { width: 110px; text-align: left; }
.st-calc-out { margin: 18px 0 6px; font-weight: 900; font-size: 20px; line-height: 1.5; }
.st-calc-out b { display: inline-block; color: #c8261b; font-size: 64px; line-height: 1; vertical-align: -6px; margin: 0 4px; }
.st-calc-note { margin: 0; font-weight: 700; font-size: 15px; }
.st-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 900px; margin: 0 auto; text-align: left; }
.st-vs-col { border-radius: 14px; padding: 16px 14px; }
.st-vs-go { background: #fff; color: var(--sumi); }
.st-vs-wait { background: #2a2a2a; color: rgba(255,255,255,.75); border: 2px dashed #c8261b; }
.st-vs-h { margin: 0 0 10px; font-weight: 900; font-size: 17px; text-align: center; }
.st-vs-go .st-vs-h { color: var(--ai); }
.st-vs-wait .st-vs-h { color: #ff6b5e; }
.st-vs ol { list-style: none; margin: 0; padding: 0; }
.st-vs li { padding: 10px 0; border-top: 1px solid rgba(128,128,128,.3); font-size: 14.5px; line-height: 1.7; }
.st-vs li:first-child { border-top: 0; }
.st-vs li span { display: block; font-weight: 900; font-size: 13px; }
.st-vs-go li span { color: var(--shu); }
.st-vs-wait li span { color: #ff6b5e; }
.st-fomo-close { max-width: 640px; margin: 28px auto 0; text-align: left; font-size: 16px; line-height: 1.9; }
.st-fomo-last { margin: 26px 0 24px; font-weight: 900; font-size: clamp(30px, 8vw, 52px); line-height: 1.3; }
.st-fomo-last b { color: #ffd400; }
.st-fomo .cta-group { display: block; max-width: 560px; margin: 0 auto; }
.st-fomo .balloon { color: #ffd400; }
@media (max-width: 600px) { .st-vs li { font-size: 13.5px; } .st-vs-col { padding: 14px 10px; } }

/* ===== デザインの仕上げ（10/27 えいがさん「この構成でデザインしていって」）：参考LP並みの強さに ===== */
.story section { scroll-margin-top: 70px; }
.story .sec-head .kicker { display: inline-block; padding: 5px 16px; background: var(--shu); color: #fff; font-weight: 900; font-size: 14px; letter-spacing: .08em; }
.story .sec-head .kicker::before, .story .sec-head .kicker::after { display: none; }
.story .sec-head h2 { font-size: clamp(30px, 7.6vw, 52px); line-height: 1.3; letter-spacing: -.01em; }

/* 約束：黒地に黄色の特大 */
.story .st-promise { background: #111; color: #fff; padding: 64px 0 56px; }
.story .st-badge { background: var(--shu); color: #fff; font-weight: 900; }
.story .st-promise-1 { font-size: clamp(22px, 5.6vw, 32px); color: rgba(255,255,255,.9); }
.story .st-promise-2 { font-size: clamp(22px, 5.6vw, 32px); }
.story .st-promise-2 em { display: block; margin: 6px 0; color: #ffd400; font-size: clamp(30px, 8.4vw, 56px); line-height: 1.25; }
.story .st-promise-3 { border: 0; background: #ffd400; color: #111; font-size: clamp(30px, 8vw, 50px); padding: 18px 26px; box-shadow: 8px 8px 0 var(--shu); }
.story .st-down { border-top-color: #ffd400; margin-top: 30px; }

/* 悩み：あるある見出し＋赤い× */
.story .st-pain { background: #fff; padding: 64px 0; }
.story .st-pain h2 { font-size: clamp(34px, 9vw, 60px); line-height: 1.2; }
.story .st-pain h2::before { content: "こんなこと ありませんか？"; display: block; width: max-content; margin: 0 auto 14px; padding: 4px 16px; background: #111; color: #fff; font-size: 15px; letter-spacing: .06em; }
.story .st-pain-list li { padding: 18px 18px 18px 56px; background: #fff; border: 2px solid #111; border-radius: 0; box-shadow: 5px 5px 0 #ffd400; font-size: 17px; font-weight: 900; margin-bottom: 14px; }
.story .st-pain-list li::before { left: 14px; top: 16px; width: 28px; height: 28px; line-height: 28px; background: #c8261b; font-size: 18px; }

/* 転回：文字を大きく、「可能です！」を特大に */
.story .st-turn { padding: 72px 0; }
.story .st-turn h2 { font-size: clamp(30px, 8vw, 54px); line-height: 1.3; }
.story .st-mark { background: linear-gradient(transparent 55%, #ffd400 55%); }
.story .st-but span { font-size: 32px; padding: 12px 56px 22px; background: #c8261b; }
.story .st-turn-1 { font-size: clamp(22px, 5.8vw, 30px) !important; line-height: 1.6; }
.story .st-tags span { font-size: clamp(20px, 5.4vw, 26px); padding: 6px 22px; transform: skewX(-8deg); background: #111; }
.story .st-turn-2 .st-box { font-size: 18px; border: 0; background: #111; color: #fff; padding: 4px 16px; }
.story .st-turn-2 b { display: inline-block; color: #c8261b; font-size: clamp(36px, 10vw, 64px); line-height: 1.2; background: linear-gradient(transparent 70%, #ffd400 70%); }
.story .st-q { font-size: clamp(30px, 8vw, 50px) !important; line-height: 1.3; }
.story .st-q-sub { font-size: clamp(22px, 6vw, 30px) !important; color: #c8261b; }
.story .st-chev { border-color: #c8261b; width: 34px; height: 34px; border-width: 0 6px 6px 0; }

/* しくみ：濃い地とチェック */
.story .st-secret { background: #14181f; }
.story .st-secret-h b { font-size: clamp(44px, 12vw, 72px); color: #ffd400; }
.story .st-check { border-top: 6px solid #ffd400; }
.story .st-check li { font-size: 17px; font-weight: 700; padding-left: 46px; }
.story .st-check li b { color: #c8261b; }
.story .st-check li::before { width: 30px; height: 30px; border: 0; background: #c8261b; color: #fff; font-size: 20px; line-height: 30px; text-align: center; }

/* 任せたあと：「不要」のはんこ */
.story .st-after { padding: 72px 0; }
.story .st-after-grid > div { position: relative; background: #fff; border: 2px solid #111; border-radius: 0; box-shadow: 6px 6px 0 #ffd400; padding: 22px 76px 22px 22px; }
.story .st-after-grid > div::after { content: "不要"; position: absolute; right: 12px; top: 14px; width: 54px; height: 54px; border: 3px solid #c8261b; border-radius: 50%; color: #c8261b; font-weight: 900; font-size: 17px; line-height: 48px; text-align: center; transform: rotate(-14deg); }
.story .st-after-grid h3 { font-size: 19px; }
.story .st-scene { border: 3px solid #111; border-radius: 0; padding: 0 22px 14px; }
.story .st-scene-h { margin: 0 -22px 6px; padding: 10px; background: #111; color: #ffd400; font-size: 19px; }
.story .st-scene li span { color: #c8261b; }
.story .st-dream { font-size: clamp(19px, 5vw, 24px); font-weight: 700; }
.story .st-dream b { background: linear-gradient(transparent 55%, #ffd400 55%); }
.story .st-future { color: #111; font-size: clamp(30px, 8vw, 52px); line-height: 1.3; }

/* 5つの工程：大きな番号と動詞 */
.story .st-steps5 { padding: 72px 0; }
.story .st-five { gap: 16px; }
.story .st-five li { border: 2px solid #111; border-radius: 0; padding: 30px 16px 18px; box-shadow: 5px 5px 0 #ffd400; }
.story .st-five li::before { top: -20px; left: 12px; width: 42px; height: 42px; background: #c8261b; font-size: 22px; line-height: 42px; }
.story .st-five b { font-size: 30px; }
.story .st-five span { color: #c8261b; }
.story .st-ask { background: #fff; border: 3px solid #c8261b; border-radius: 0; font-size: 16.5px; font-weight: 700; }
.story .st-ask b { color: #c8261b; display: block; font-size: 19px; margin-bottom: 4px; }
@media (max-width: 899px) { .story .st-five { grid-template-columns: 1fr; gap: 26px; } .story .st-five li { padding: 22px 16px 16px 72px; } .story .st-five li::before { top: 18px; left: 14px; } }

/* 比較表：追客部・採用部の列を赤で */
.story .st-compare { padding: 72px 0; }
.story .st-table { border: 2px solid #111; }
.story .st-table thead .us { background: #c8261b; color: #fff; font-size: 16px; position: relative; }
.story .st-table thead .us::before { content: "おすすめ"; display: block; width: max-content; margin: 0 auto 4px; padding: 1px 8px; background: #ffd400; color: #111; font-size: 11px; }
.story .st-table td.us { background: #fff3c2; color: #c8261b; font-size: 17px; }
.story .st-table td.us small { color: #111; font-weight: 700; }

/* 無料の理由：黄色地 */
.story .st-why { background: #ffd400; }
.story .st-why-k { background: #111; color: #fff; border-color: #111; }
.story .st-why h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.3; }
.story .st-why p b { background: #fff; }

/* 最後の申込み：黒地に黄色の特大 */
.story .st-final { background: #111; }
.story .st-final h2 { color: #ffd400; font-size: clamp(40px, 11vw, 72px); line-height: 1.2; }
.story .st-final-k { background: var(--shu); border: 0; color: #fff; font-weight: 900; }

/* 料金：数字を特大に */
.story #price .sec-head h2 { font-size: clamp(32px, 8vw, 52px); }
.story #price .sec-head h2 .nw { display: inline-block; color: #c8261b; font-size: 1.3em; }

/* 仕上げ：B（黒）の段 */
.story .st-real h2 { font-size: clamp(32px, 8.4vw, 56px); line-height: 1.25; }
.story .st-real-big b { background: linear-gradient(transparent 55%, #ffd400 55%); }
.story .st-night { background: #0d1017; }
.story .st-night h2 { font-size: clamp(32px, 8.4vw, 56px); line-height: 1.25; }
.story .st-tiles div { background: #fff; color: var(--sumi); border: 0; border-radius: 0; box-shadow: 4px 4px 0 #c8261b; }
.story .st-tiles span { color: var(--sumi-3); }
.story .st-tiles b { font-size: 17px; font-weight: 900; }
.story .st-quote { font-size: clamp(20px, 5.4vw, 28px); color: #fff; }
.story .st-night-big { font-size: clamp(32px, 8.6vw, 56px); line-height: 1.25; }
.story .st-night-ask b { font-size: clamp(24px, 6.4vw, 34px); color: #ffd400; }
.story .st-hand .sec-head h2, .story .st-free .sec-head h2 { font-size: clamp(32px, 8.4vw, 56px); }
.story .st-io li { border: 2px solid #111; border-radius: 0; font-weight: 900; }
.story .st-io-out li { border-color: #c8261b; background: #fff3c2; box-shadow: 4px 4px 0 #c8261b; }
.story .st-io-mid { background: #c8261b; border-radius: 0; box-shadow: 6px 6px 0 #111; }
.story .st-io-mid b { font-size: 24px; }
.story .st-before { border-radius: 0; border: 2px dashed #999; }
.story .st-act { border: 3px solid #c8261b; border-radius: 0; box-shadow: 6px 6px 0 #ffd400; }
.story .st-act .n { background: #c8261b; width: 42px; height: 42px; line-height: 42px; font-size: 20px; }
.story .st-act b { font-size: 26px; }
.story .st-band { background: repeating-linear-gradient(-45deg, #c8261b 0 22px, #b01f15 22px 44px); padding: 56px 0; }
.story .st-band-h { font-size: clamp(38px, 10vw, 68px); }
.story .st-ex li { border: 2px solid #111; border-radius: 0; box-shadow: 4px 4px 0 #ffd400; }
.story .st-ex b { color: #c8261b; font-weight: 900; }
.story .st-howmany { font-size: clamp(32px, 8.4vw, 56px); line-height: 1.25; color: #c8261b; font-weight: 900; }
.story .st-try { background: #ffd400; }
.story .st-try h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.3; }
.story .st-free-grid div { border: 2px solid #111; border-radius: 0; box-shadow: 4px 4px 0 #ffd400; }
.story .st-free-grid b { font-size: 22px; font-weight: 900; }
.story .st-roles p { border-radius: 0; border: 2px solid #111; }
.story .st-free-last { font-size: clamp(28px, 7.4vw, 46px); line-height: 1.3; }
.story .st-offer { background: #111; color: #fff; }
.story .st-offer h2 { color: #ffd400; font-size: clamp(32px, 8.4vw, 56px); line-height: 1.25; }
.story .st-offer-s { color: #fff; }
.story .st-offer-box { color: var(--sumi); border-radius: 0; border-top: 8px solid #c8261b; }
.story .st-offer-h { font-size: 20px; }
@media (max-width: 600px) { .story .st-free-grid b { font-size: 17px; } }

/* 仕上げ2（レビュー反映）：日本語の改行を文節で／お試しの印をはんこに／料金を黒地に特大で／申込みの帯を黄色に */
.story h1, .story h2, .story h3, .story .st-pain-list li, .story .st-check li, .story .st-vs li, .story .st-photo-h, .story .st-photo-p, .story .st-alert-big, .story .st-tiles b, .story .st-free-grid b, .story .st-tasks, .story .st-five p, .story .st-after-grid p, .story .st-scene li, .story .st-turn-2, .story .st-promise-3, .story .st-cta-band-h, .story .st-howmany, .company-strip h2, .company-strip h3 { word-break: auto-phrase; text-wrap: balance; }
.story .st-ribbon { background: #E60012; color: #fff; border: 3px solid #111; border-radius: 0; box-shadow: 4px 4px 0 #111; transform: rotate(-3deg); }
.story #price { background: #111; color: #fff; }
.story #price .sec-head h2 { color: #fff; }
.story #price .sec-head h2 .nw { color: #FFD400; font-size: clamp(48px, 13vw, 96px); line-height: 1.1; }
.story #price .sec-head h2::after { content: "初期設定費 0円"; display: inline-block; margin: 14px 0 0 0; padding: 14px 10px; width: 92px; height: 92px; box-sizing: border-box; border-radius: 50%; background: #E60012; color: #fff; font-size: 17px; line-height: 1.3; text-align: center; transform: rotate(-10deg); vertical-align: middle; }
.story #price .cta-note { color: rgba(255,255,255,.8); }
.story #price .st-fold summary { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.story #price .terms-card { color: var(--sumi); }
.story .st-cta-band { background: #FFD400; border-block: 6px solid #111; }
.story .st-cta-band-h { font-family: var(--sans); font-weight: 900; color: #111; font-size: clamp(28px, 7.4vw, 44px); line-height: 1.3; }
.story .st-cta-band .balloon { color: #111; }
.story .st-cta-band .lp-first { color: #111; }
.story .st-photo::before { background: linear-gradient(180deg, rgba(0,0,0,.05) 15%, rgba(0,0,0,.65) 48%, rgba(0,0,0,.92) 100%); }
.story .st-photo-h { text-shadow: 0 2px 0 #000, 0 0 14px rgba(0,0,0,.85); }
.story .st-real, .story .st-hand { background: #fff; }
.story #price .st-fold summary { color: #111; background: #fff; }
.story #price .sec-head h2::after { content: "初期設定費\A 0円"; white-space: pre; padding: 22px 6px 0; font-size: 15px; }

/* ===== 広告用ページ 作り直し（10/27 えいがさん「参考を参考にして やり直し」「画像にするところは画像に」） =====
   参考LP（ビジョナリー・おさるマーケ）と同じく、スマホ幅の1列に画像の帯を積む。PCでも1列のまま中央に置く。
   画像の帯は lp_banners/ で組んで書き出す。ここでは帯のあいだの文字の段とボタンだけを整える */
main:has(> .vb) { background: #e6e8ec; }
.vb { --vb-navy: #0c1e3c; --vb-y: #ffd200; --vb-red: #e8141e; --vb-paper: #f6f4ef; --vb-green: #1c9a35;
  max-width: 480px; margin: 0 auto; background: #fff; color: #1b2433; box-shadow: 0 0 40px rgba(12,30,60,.12); overflow: hidden; }
.vb section { padding: 0; }
.vb .vb-sec { padding: 0; }
.vb-img { display: block; width: 100%; height: auto; }
.vb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vb .wrap { padding: 0 18px; }
/* 緑の大きなボタン（ビジョナリー「導入資料を受け取る」・おさる「無料で今すぐ」） */
.vb-cta { padding: 20px 16px 24px; background: var(--vb-paper); text-align: center; }
.vb .cta-main { display: block; width: 100%; }
.vb .balloon { display: block; margin: 0 0 8px; color: var(--vb-navy); font-size: 14px; font-weight: 900; letter-spacing: 0; }
.vb .btn-primary { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px 12px; border: 2px solid #0d6b22; border-radius: 12px;
  background: linear-gradient(180deg, #6ad874 0%, #26a83d 48%, #148a2c 100%); color: #fff; font-size: 23px; font-weight: 900; letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.25); box-shadow: 0 5px 0 #0b5e1d, inset 0 2px 0 rgba(255,255,255,.45); }
.vb .btn-primary:hover { background: linear-gradient(180deg, #7ae083 0%, #2bb443 48%, #179530 100%); }
.vb .btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #0b5e1d; }
.vb .vb-fomo .btn-primary { font-size: 19px; }
.vb .btn-primary .arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--vb-green); font-size: 20px; text-shadow: none; flex: none; }
.vb .lp-first { margin: 12px 0 0; font-size: 13px; color: #556; }
.vb .cta-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: #556; text-align: left; }
/* 受け取れるもの（ビジョナリー「資料で分かること」） */
.vb-know { padding: 30px 22px 12px; text-align: center; }
.vb-know-h { display: inline-block; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 2px solid var(--vb-navy); color: var(--vb-navy); font-size: 19px; font-weight: 700; line-height: 1.5; }
.vb-know dl { margin: 0; }
.vb-know dt { padding-top: 18px; font-size: 13px; color: #667; }
.vb-know dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid #dde1e8; color: var(--vb-navy); font-size: 19px; font-weight: 900; }
.vb-video { margin: 0; padding: 20px 40px 8px; background: #fff; text-align: center; }
.vb-video video { display: block; width: 100%; height: auto; border-radius: 18px; border: 6px solid #111; }
.vb-video figcaption { margin-top: 8px; font-size: 11.5px; color: #667; }
.vb-notes { list-style: none; margin: 0; padding: 12px 22px 26px; font-size: 11.5px; line-height: 1.7; color: #667; }
.vb-badge { margin: 0; padding: 12px 16px; background: var(--vb-navy); color: #e6c56a; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.6; border-top: 1px solid rgba(230,197,106,.3); }
/* 悩み（ビジョナリーの番号つき一覧） */
.vb-pain { padding: 40px 22px 34px !important; }
.vb-pain h2 { margin: 0 0 18px; color: var(--vb-navy); font-size: 30px; line-height: 1.35; font-weight: 900; }
.vb-pain ol { list-style: none; margin: 0; padding: 0; counter-reset: p; border-top: 1px solid #dde1e8; }
.vb-pain li { counter-increment: p; display: flex; gap: 18px; padding: 16px 2px; border-bottom: 1px solid #dde1e8; font-size: 15.5px; line-height: 1.7; }
.vb-pain li::before { content: counter(p, decimal-leading-zero); flex: none; color: var(--vb-red); font-size: 13px; font-weight: 700; padding-top: 2px; }
/* 帯のあいだの文（おさる） */
.vb-text { padding: 6px 22px 30px; font-size: 16px; line-height: 1.95; }
.vb-text.center { text-align: center; padding-top: 26px; }
.vb-text b { background: linear-gradient(transparent 62%, #ffe866 62%); }
.vb-q { margin: 26px 0 8px; color: #1b2433; font-size: 25px; font-weight: 900; line-height: 1.5; }
.vb-q-sub { margin: 0; color: #2a62c9; font-size: 19px; font-weight: 900; }
.vb-chev { display: block; width: 26px; height: 26px; margin: 10px auto 0; border-right: 3px solid #2a62c9; border-bottom: 3px solid #2a62c9; transform: rotate(45deg); box-shadow: 7px 7px 0 -1px #fff, 9px 9px 0 0 #2a62c9; }
/* 濃い地のチェックリスト（おさる） */
.vb-secret { background: #3b4352; }
.vb-secret-in { padding: 0 14px 30px; }
.vb-secret-p { margin: 0 6px 18px; color: #fff; font-size: 15px; line-height: 1.9; text-align: center; }
.vb-check { list-style: none; margin: 0; padding: 6px 16px; background: #fff; }
.vb-check li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px dashed #c3c8d0; font-size: 15px; line-height: 1.7; }
.vb-check li:last-child { border-bottom: 0; }
.vb-check li::before { content: ""; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; border: 2px solid var(--vb-red); background: #fff; }
.vb-check li::after { content: ""; position: absolute; left: 6px; top: 12px; width: 9px; height: 18px; border-right: 4px solid var(--vb-red); border-bottom: 4px solid var(--vb-red); transform: rotate(40deg); }
.vb-band { padding: 28px 16px 30px; background: radial-gradient(120% 90% at 50% 0, #1f4180 0, var(--vb-navy) 65%); text-align: center; }
.vb-band-h { margin: 0 0 16px; color: #fff; font-family: "Noto Serif JP", serif; font-size: 25px; font-weight: 900; line-height: 1.5; }
.vb-band .vb-cta { padding: 0; background: none; }
.vb-band .balloon { color: #e6c56a; }
/* 1週間の場面 */
.vb-scene { padding: 30px 22px 34px; background: var(--vb-paper); }
.vb-scene-h { margin: 0 0 12px; color: var(--vb-navy); font-size: 21px; font-weight: 900; text-align: center; }
.vb-scene ol { list-style: none; margin: 0; padding: 0; }
.vb-scene li { padding: 14px 0; border-bottom: 1px solid #dcd6c8; font-size: 15px; line-height: 1.75; }
.vb-scene li span { display: inline-block; margin: 0 0 4px; padding: 1px 10px; background: var(--vb-navy); color: #fff; font-size: 13px; font-weight: 700; }
.vb-future { margin: 22px 0 0; color: var(--vb-navy); font-size: 22px; font-weight: 900; line-height: 1.5; text-align: center; }
.vb-small { margin: 0; padding: 10px 18px 0; font-size: 11.5px; color: #667; text-align: center; background: #fff; }
/* 無料の理由 */
.vb-why { padding: 36px 22px 36px !important; background: var(--vb-paper); }
.vb-why-k { display: inline-block; margin: 0 0 10px; padding: 3px 12px; background: var(--vb-red); color: #fff; font-size: 14px; font-weight: 900; }
.vb-why h2 { margin: 0 0 14px; color: var(--vb-navy); font-size: 27px; font-weight: 900; line-height: 1.4; }
.vb-why p { font-size: 15.5px; line-height: 1.9; margin: 0 0 10px; }
.vb-why b { background: linear-gradient(transparent 62%, #ffe866 62%); }
/* 様子見の損（見出しは画像） */
.vb .vb-fomo { padding: 0 0 34px; }
.vb .vb-fomo .wrap { padding: 22px 16px 0; }
.vb .st-vs { grid-template-columns: 1fr 1fr; gap: 8px; }
.vb .st-vs li { font-size: 13.5px; }
.vb .vb-fomo .cta-group { display: block; }
.vb .vb-fomo .balloon { color: var(--vb-y); }
/* 最後の申込み */
.vb-final .vb-cta { padding-bottom: 28px; }
/* 料金・始め方・よくある質問（ビジョナリーの静かな一覧） */
.vb #price, .vb #start, .vb #faq, .vb .company-sec { padding: 40px 0 !important; }
.vb #start { background: var(--vb-paper); }
.vb .sec-head h2 { font-size: 26px; line-height: 1.4; color: var(--vb-navy); }
.vb .sec-head .kicker { color: var(--vb-red); }
.vb .terms-card { grid-template-columns: 1fr; }
.vb .faq details { border-bottom: 1px solid #dde1e8; }
.vb .faq summary { color: var(--vb-navy); font-size: 15px; }
.vb .company-strip { grid-template-columns: 1fr; }
body:has(.vb) .sticky-cta { background: rgba(12,30,60,.96); border-top: 0; }
body:has(.vb) .sticky-cta .t, body:has(.vb) .sticky-cta .t b { color: #fff; }
body:has(.vb) .sticky-cta .btn-primary { background: linear-gradient(180deg, #6ad874, #148a2c); border: 2px solid #0d6b22; border-radius: 10px; box-shadow: 0 3px 0 #0b5e1d; font-weight: 900; }
.vb h2, .vb h3 { font-family: "Noto Sans JP", sans-serif; }
body:has(.vb) .site-header .btn-primary { background: linear-gradient(180deg, #6ad874, #148a2c); border: 1px solid #0d6b22; box-shadow: 0 2px 0 #0b5e1d; font-weight: 900; }
/* B（黒の広告から）：AIヒーローズの見た目。からし色のボタン・白く抜いた地・黒の特大 */
.vb-b { --vb-paper: #f3f1ec; --vb-navy: #1c2d44; }
.vb-b .btn-primary { background: #d4a73a; border: 0; border-radius: 4px; color: #1a1a1a; text-shadow: none; font-size: 21px;
  box-shadow: 0 4px 0 #9c7a24; }
.vb-b .btn-primary:hover { background: #ddb24a; }
.vb-b .btn-primary:active { box-shadow: 0 1px 0 #9c7a24; }
.vb-b .btn-primary .arrow { width: auto; height: auto; padding-left: 14px; border-radius: 0; border-left: 1.5px solid #1a1a1a; background: none; color: #1a1a1a; font-size: 22px; }
.vb-b .balloon { color: var(--vb-navy); }
.vb-hb-lead { margin: 0; padding: 22px 16px 0; text-align: center; font-weight: 900; font-size: 17px; color: var(--vb-navy); }
.vb .vb-hb { padding: 36px 22px 34px; background: var(--vb-paper); }
.vb .vb-hb-tight { padding-top: 24px; }
.vb-hb.center { text-align: center; }
.vb-hb-s { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.vb-hb h2 { margin: 0 0 16px; color: #1a1a1a; font-size: 32px; font-weight: 900; line-height: 1.32; }
.vb-hb p { font-size: 15.5px; line-height: 1.9; margin: 0 0 12px; }
.vb-hb .real-text { margin: 18px auto 20px; max-width: 300px; }
.vb-hb .real-text img { display: block; width: 100%; height: auto; border: 1px solid #d8d4ca; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.vb-hb .real-text figcaption { font-size: 11.5px; color: #667; margin-top: 6px; }
.vb-hb-more { font-weight: 700; }
.vb-hb-list { color: #666; }
.vb-hb-big { margin-top: 18px !important; font-size: 17px !important; line-height: 1.75 !important; }
.vb-hb-big b { color: #2f5fa8; font-size: 20px; }
.vb-hb-q { margin: 24px 0 0 !important; text-align: center; }
.vb-b .vb-fomo .balloon { color: #d4a73a; }
body:has(.vb-b) .site-header .btn-primary, body:has(.vb-b) .sticky-cta .btn-primary { background: #d4a73a; border: 0; color: #1a1a1a; box-shadow: 0 2px 0 #9c7a24; }
body:has(.vb-b) .sticky-cta { background: rgba(28,45,68,.97); }
/* 採用部：ビジョナリーの紺とオレンジ（ボタンは緑のまま） */
.vb-s .vb-pain li::before { color: #C0422B; }
.vb-ui { padding: 18px 18px 0; }
.vb-ui .ui-card { box-shadow: 0 10px 26px rgba(12,30,60,.12); }
/* C：サイトのトンマナ（生成り・明朝・藍・木肌・朱）。無印良品のように、写真を大きく字は小さく、線は細く、色は抑える（10/27） */
main:has(> .vb-c) { background: #e9e2d4; }
.vb-c { --vb-navy: var(--ai); --vb-paper: var(--kinari); --vb-red: var(--shu); background: var(--kinari); color: var(--sumi); box-shadow: none; }
.vb-c h2, .vb-c h3 { font-family: var(--serif); font-weight: 700 !important; letter-spacing: .04em; }
.vb-c .vb-cta { background: var(--kinari); }
.vb-c .balloon { color: var(--mute, #6b6458); font-weight: 500; font-size: 13px; letter-spacing: .08em; }
.vb-c .btn-primary { background: var(--shu); border: 0; border-radius: 2px; box-shadow: none; text-shadow: none; font-size: 17px; font-weight: 700; letter-spacing: .12em; padding: 19px 12px; }
.vb-c .btn-primary:hover { background: #bd3a22; }
.vb-c .btn-primary:active { transform: none; box-shadow: none; }
.vb-c .btn-primary .arrow { width: auto; height: auto; border-radius: 0; background: none; color: #fff; font-size: 18px; }
.vb-c .lp-first, .vb-c .cta-note, .vb-c .vb-notes { color: #6b6458; }
.vb-c .vb-know { background: var(--paper); }
.vb-c .vb-know-h { font-family: var(--serif); border-bottom: 1px solid var(--sumi); color: var(--sumi); }
.vb-c .vb-know dt { color: #6b6458; }
.vb-c .vb-know dd { font-family: var(--serif); font-weight: 700; color: var(--ai); border-bottom-color: var(--line); }
.vb-c .vb-video { background: var(--paper); }
.vb-c .vb-video video { border: 5px solid #2a2a2a; border-radius: 16px; }
.vb-c .vb-notes { background: var(--paper); }
.vb-c .vb-badge { background: var(--kinari-2); color: #6b6458; border: 0; font-weight: 500; letter-spacing: .04em; }
.vb-c .vb-pain { background: var(--paper); }
.vb-c .vb-pain h2 { color: var(--sumi); font-size: 26px; line-height: 1.5; }
.vb-c .vb-pain ol, .vb-c .vb-pain li { border-color: var(--line); }
.vb-c .vb-pain li::before { color: var(--shu); font-family: var(--serif); font-weight: 700; }
.vb-c .vb-text b, .vb-c .vb-why b { background: linear-gradient(transparent 68%, rgba(200,162,122,.38) 68%); }
.vb-c .vb-q { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: .04em; }
.vb-c .vb-q-sub { color: #6b6458; font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.vb-c .vb-chev { width: 12px; height: 12px; border-width: 1.5px; border-color: var(--kihada); box-shadow: none; }
.vb-c .vb-secret { background: var(--kinari); }
.vb-c .vb-secret-p { color: var(--sumi); }
.vb-c .vb-check { background: var(--paper); border: 1px solid var(--line); }
.vb-c .vb-check li { border-bottom: 1px solid var(--line); }
.vb-c .vb-check li::before { width: 16px; height: 16px; top: 19px; border: 1px solid var(--kihada); }
.vb-c .vb-check li::after { left: 5px; top: 17px; width: 6px; height: 12px; border-right-width: 2px; border-bottom-width: 2px; border-color: var(--shu); }
.vb-c .vb-band { background: var(--ai); }
.vb-c .vb-band-h { font-weight: 700; letter-spacing: .06em; }
.vb-c .vb-band .balloon { color: #f0d9b5; }
.vb-c .vb-scene { background: var(--paper); }
.vb-c .vb-scene-h { font-family: var(--serif); font-weight: 700; color: var(--sumi); }
.vb-c .vb-scene li { border-color: var(--line); }
.vb-c .vb-scene li span { padding: 0; background: none; color: var(--shu); font-family: var(--serif); letter-spacing: .1em; }
.vb-c .vb-future { font-family: var(--serif); font-weight: 700; color: var(--ai); font-size: 20px; letter-spacing: .04em; }
.vb-c .vb-small { background: var(--kinari); color: #6b6458; }
.vb-c .vb-why { background: var(--paper); }
.vb-c .vb-why-k { padding: 0; background: none; color: #6b6458; font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.vb-c .vb-why-k::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; background: currentColor; vertical-align: middle; }
.vb-c .vb-why h2 { color: var(--sumi); }
/* 様子見の損：黒と黄色ではなく、藍と生成り */
.vb-c .st-fomo { background: var(--ai-deep); }
.vb-c .st-calc { background: var(--paper); border-radius: 2px; }
.vb-c .st-calc-h { font-family: var(--serif); font-weight: 700; }
.vb-c .st-calc-in label { border: 1px solid var(--line); border-radius: 2px; font-weight: 500; }
.vb-c .st-calc-in input, .vb-c .st-calc-in select { border: 1px solid var(--sumi); border-radius: 2px; font-weight: 700; }
.vb-c .st-calc-out { font-weight: 700; }
.vb-c .st-calc-out b { color: var(--shu); font-family: var(--serif); font-weight: 700; }
.vb-c .st-vs-col { border-radius: 2px; }
.vb-c .st-vs-go { background: var(--paper); }
.vb-c .st-vs-wait { background: transparent; border: 1px solid rgba(255,255,255,.3); }
.vb-c .st-vs-wait .st-vs-h { color: #f0d9b5; }
.vb-c .st-vs-h { font-family: var(--serif); font-weight: 700; }
.vb-c .st-vs li span { font-weight: 700; }
.vb-c .vb-fomo .balloon { color: #f0d9b5; }
.vb-c .sec-head .kicker { color: #6b6458; }
.vb-c .faq details { border-bottom-color: var(--line); }
body:has(.vb-c) .site-header .btn-primary, body:has(.vb-c) .sticky-cta .btn-primary { background: var(--shu); border: 0; border-radius: 2px; box-shadow: none; font-weight: 700; }
body:has(.vb-c) .sticky-cta { background: rgba(255,253,248,.97); border-top: 1px solid var(--line); }
body:has(.vb-c) .sticky-cta .t, body:has(.vb-c) .sticky-cta .t b { color: var(--sumi); }
.vb-c .st-fomo-last { font-family: var(--serif); font-weight: 700; font-size: 30px; letter-spacing: .04em; }
.vb-c .st-fomo-last b { color: #f0d9b5; }
.vb-c .vb-band .vb-cta { background: none; }
/* A：10/27 夜「安っぽい」→ 実例23件から型を書き出し「案1 広告の続き」に決定。黄・黒・白だけ、ボタンは黒1つ、紺・赤・緑・青を使わない */
.vb-a { --vb-navy: #141414; --vb-red: #141414; --vb-paper: #f6f4ee; --vb-y: #ffd400; --vb-green: #141414; }
.vb-a .btn-primary, body:has(.vb-a) .site-header .btn-primary, body:has(.vb-a) .sticky-cta .btn-primary { background: #141414; color: #fff; border: 0; border-radius: 999px; box-shadow: none; text-shadow: none; }
.vb-a .btn-primary:hover { background: #2a2a2a; }
.vb-a .btn-primary:active { transform: none; box-shadow: none; }
.vb-a .btn-primary .arrow { width: 26px; height: 26px; font-size: 15px; background: #ffd400; color: #141414; }
.vb-a .vb-cta { background: #fff; }
.vb-a .vb-band .vb-cta { background: none; }
.vb-a .vb-chev { box-shadow: none; width: 16px; height: 16px; border-width: 2px; border-color: #141414; }
.vb-a .vb-q-sub { color: #141414; }
.vb-a .vb-text b, .vb-a .vb-why b { background: linear-gradient(transparent 60%, #ffd400 60% 94%, transparent 94%); }
.vb-a .vb-badge { background: #f6f4ee; color: #5f5e5a; border-top: 0; }
.vb-a .vb-secret { background: #141414; }
.vb-a .vb-check li::before { border-color: #141414; }
.vb-a .vb-check li::after { border-color: #141414; }
.vb-a .vb-check b { background: linear-gradient(transparent 60%, #ffd400 60% 94%, transparent 94%); }
.vb-a .vb-band { background: #ffd400; }
.vb-a .vb-band-h { color: #141414; font-family: "Noto Sans JP", sans-serif; }
.vb-a .vb-band .balloon { color: #141414; }
.vb-a .vb-why-k { background: #141414; color: #ffd400; }
.vb-a .vb-know-h { border-bottom-color: #141414; }
.vb-a .vb-video video { border-color: #141414; }
.vb-a .sec-head .kicker { color: #5f5e5a; }
.vb-a .st-calc-out b { color: #141414; }
.vb-a .st-vs-wait { background: #232323; border: 1px solid #3a3a3a; }
.vb-a .st-vs-wait .st-vs-h, .vb-a .st-vs-wait li span { color: #b9b7b0; }
.vb-a .st-vs-go .st-vs-h { color: #141414; }
.vb-a .faq summary::before { color: #141414; }
.vb-a .st-vs-go li span { display: table; margin-bottom: 2px; color: #141414; background: linear-gradient(transparent 60%, #ffd400 60% 94%, transparent 94%); }
.vb-a .vb-fomo .btn-primary { background: #ffd400; color: #141414; }
.vb-a .vb-fomo .btn-primary .arrow { background: #141414; color: #ffd400; }
/* 10/27 えいがさん「Aの情報密度はもっとあげても良い」：文字の部分の余白を詰める */
.vb-a .vb-cta { padding: 14px 16px 16px; }
.vb-a .vb-know { padding: 18px 22px 6px; display: grid; grid-template-columns: 1fr; }
.vb-a .vb-know dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid #141414; }
.vb-a .vb-know dt { grid-row: 1; padding: 10px 6px 0; font-size: 11px; line-height: 1.45; }
.vb-a .vb-know dd { grid-row: 2; margin: 2px 0 0; padding: 0 6px 12px; font-size: 14px; line-height: 1.45; border-bottom: 1px solid #e4e1d9; }
.vb-a .vb-know dt + dd { border-left: 0; }
.vb-a .vb-video { padding: 10px 60px 4px; }
.vb-a .vb-notes { padding: 8px 22px 16px; }
.vb-a .vb-pain { padding: 24px 22px 18px !important; }
.vb-a .vb-pain li { padding: 11px 2px; font-size: 15px; }
.vb-a .vb-text { padding: 4px 22px 18px; }
.vb-a .vb-text.center { padding-top: 16px; }
.vb-a .vb-q { margin: 14px 0 4px; }
.vb-a .vb-secret-in { padding-bottom: 20px; }
.vb-a .vb-check li { padding: 11px 0 11px 34px; }
.vb-a .vb-band { padding: 20px 16px 22px; }
.vb-a .vb-scene { padding: 20px 22px 22px; }
.vb-a .vb-scene li { padding: 10px 0; }
.vb-a .vb-future { margin-top: 14px; }
.vb-a .vb-why { padding: 24px 22px 20px !important; }
/* B：10/27「全面的にいまいち」で作り直し。黒の広告と同じ見た目（黒の地・白の太字・朱赤・濃い灰色の角丸の札）。上の .vb-b の規則より後に置いて上書きする */
main:has(> .vb-b) { background: #050506; }
.vb-b { --vb-paper: #141417; --vb-navy: #1a1a1a; background: #0d0d0f; color: #e8e8ec; box-shadow: none; }
.vb-b .vb-cta { background: #0d0d0f; }
.vb-b .balloon { color: #ff8a6e; }
.vb-b .btn-primary { background: #ff4a2a; border: 0; border-radius: 12px; box-shadow: none; color: #fff; text-shadow: none; font-size: 19px; font-weight: 900; }
.vb-b .btn-primary:hover { background: #ff5d40; }
.vb-b .btn-primary:active { transform: none; box-shadow: none; }
.vb-b .btn-primary .arrow { padding-left: 0; border-left: 0; color: #fff; font-size: 20px; }
.vb-b .lp-first, .vb-b .cta-note, .vb-b .vb-notes { color: #9a9aa0; }
.vb-b .vb-hb-lead { color: #fff; }
.vb-b .vb-video { background: #0d0d0f; }
.vb-b .vb-video video { border-color: #3a3a3f; }
.vb-b .vb-video figcaption { color: #9a9aa0; }
.vb-b .vb-hb { background: #141417; }
.vb-b .vb-hb h2 { color: #fff; }
.vb-b .vb-hb p { color: #cfcfd4; }
.vb-b .vb-hb-s { color: #ff4a2a !important; letter-spacing: .08em; }
.vb-b .vb-hb b, .vb-b .vb-hb-more { color: #fff; }
.vb-b .vb-hb-list { color: #9a9aa0 !important; }
.vb-b .vb-hb-big b { color: #ff4a2a; }
.vb-b .vb-hb .real-text img { border: 0; border-radius: 12px; }
.vb-b .vb-hb .real-text figcaption { color: #9a9aa0; }
.vb-b .vb-future { color: #fff; }
.vb-b .st-fomo { background: #0d0d0f; }
.vb-b .st-calc { background: #232326; color: #fff; border-radius: 14px; }
.vb-b .st-calc-in label { background: #2c2c30; color: #fff; }
.vb-b .st-calc-in input, .vb-b .st-calc-in select { background: #0d0d0f; color: #fff; border-color: #55555b; }
.vb-b .st-calc-out b { color: #ff4a2a; }
.vb-b .st-vs-go { background: #fff; }
.vb-b .st-vs-wait { background: #232326; border: 1px solid #3a3a3f; }
.vb-b .st-vs-wait .st-vs-h { color: #ff8a6e; }
.vb-b .st-fomo-last b { color: #ff4a2a; }
.vb-b .vb-fomo .balloon { color: #ff8a6e; }
.vb-b #price, .vb-b #faq, .vb-b .company-sec { background: #f4f4f6; color: #1a1a1a; }
.vb-b #start { background: #ebebef; color: #1a1a1a; }
.vb-b .sec-head h2 { color: #1a1a1a; }
.vb-b .sec-head .kicker { color: #ff4a2a; }
body:has(.vb-b) .site-header .btn-primary, body:has(.vb-b) .sticky-cta .btn-primary { background: #ff4a2a; color: #fff; border: 0; border-radius: 10px; box-shadow: none; }
body:has(.vb-b) .sticky-cta { background: rgba(13,13,15,.97); border-top: 1px solid #2c2c30; }
.vb-b .vb-cta .cta-note, .vb-b .vb-cta .cta-note * { color: #9a9aa0 !important; }
.vb-b .vb-cta .cta-note b, .vb-b .vb-cta .cta-note strong { color: #fff !important; }
.vb-b .faq summary { color: #1a1a1a; }
.vb-b .vb-hb-q { color: #fff; }
/* 10/27 えいがさん「返信が追いついていない⇒改行しない」 */
.vb-a .vb-pain h2, .vb-c .vb-pain h2 { font-size: 24px; white-space: nowrap; }
/* C 2回目（10/27「とくにCはメリハリがない」）：地は生成り1色、数字を大きく、チェックは格子、決め台詞は大きく余白を広く */
.vb-c { background: #F7F3EA; }
.vb-c .vb-cta, .vb-c .vb-know, .vb-c .vb-video, .vb-c .vb-notes, .vb-c .vb-pain, .vb-c .vb-scene, .vb-c .vb-why, .vb-c .vb-small, .vb-c .vb-secret { background: #F7F3EA; }
.vb-c .vb-know { padding: 36px 26px 14px; text-align: left; counter-reset: k; }
.vb-c .vb-know-h { font-size: 26px; line-height: 1.5; border: 0; padding: 0; margin-bottom: 18px; }
.vb-c .vb-know dl { border-top: 1px solid var(--line); }
.vb-c .vb-know dt { position: relative; padding: 20px 0 0 64px; font-size: 12px; letter-spacing: .08em; }
.vb-c .vb-know dt::before { counter-increment: k; content: counter(k, cjk-ideographic); position: absolute; left: 0; top: 14px; font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1; color: #1F3A5F; }
.vb-c .vb-know dd { padding: 4px 0 20px 64px; font-size: 22px; color: var(--ai); }
.vb-c .vb-pain { padding: 72px 26px 56px !important; }
.vb-c .vb-pain h2 { font-size: 26px; margin-bottom: 26px; }
.vb-c .vb-pain li { gap: 20px; padding: 20px 2px; font-size: 16px; align-items: baseline; }
.vb-c .vb-pain li::before { font-size: 26px; color: #1F3A5F; min-width: 34px; }
.vb-c .vb-text { padding: 8px 26px 40px; font-size: 16px; }
.vb-c .vb-text.center { padding-top: 56px; padding-bottom: 72px; }
.vb-c .vb-q { font-size: 30px; line-height: 1.5; margin-top: 40px; }
.vb-c .vb-secret-in { padding: 0 26px 64px; }
.vb-c .vb-secret-p { text-align: left; font-size: 16px; margin: 0 0 26px; }
.vb-c .vb-check { display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: none; border: 0; border-top: 1px solid #DCD2BF; border-left: 1px solid #DCD2BF; }
.vb-c .vb-check li { padding: 18px 14px 20px; border: 0; border-right: 1px solid #DCD2BF; border-bottom: 1px solid #DCD2BF; font-size: 13.5px; line-height: 1.75; }
.vb-c .vb-check li::before { content: "—"; position: static; display: block; width: auto; height: auto; border: 0; color: var(--shu); font-size: 14px; margin-bottom: 6px; }
.vb-c .vb-check li::after { display: none; }
.vb-c .vb-check li b { display: block; font-family: var(--serif); font-size: 15px; color: var(--ai); margin-bottom: 4px; }
.vb-c .vb-band { padding: 64px 26px 64px; }
.vb-c .vb-band-h { font-size: 30px; margin-bottom: 26px; }
.vb-c .vb-scene { padding: 72px 26px 40px; }
.vb-c .vb-scene-h { font-size: 26px; text-align: left; margin-bottom: 20px; }
.vb-c .vb-scene li { padding: 18px 0; font-size: 15.5px; }
.vb-c .vb-scene li span { display: block; font-size: 13px; margin-bottom: 4px; }
.vb-c .vb-future { font-size: 28px; line-height: 1.6; margin: 96px 0 56px; }
.vb-c .vb-future::after { content: ""; display: block; width: 40px; height: 2px; margin: 26px auto 0; background: var(--shu); }
.vb-c .vb-why { padding: 72px 26px 64px !important; }
.vb-c .vb-why h2 { font-size: 30px; line-height: 1.5; }
.vb-c .st-fomo { background: #1A1D22; }
.vb-c .vb-final .btn-primary, .vb-c .vb-offer .btn-primary { padding: 24px 12px; font-size: 19px; }
.vb-c .vb-cta { padding: 28px 22px 36px; }
.vb-c .vb-check li::before { background: none; }
/* B 2回目（レビュー：録画を黒になじませる・下の共通部分とヘッダーも黒に・決め台詞を白の帯に） */
.vb-b .vb-video { margin: 16px 22px 0; padding: 18px 18px 14px; background: #1C1C1E; border-radius: 20px; }
.vb-b .vb-video video { border: 8px solid #2A2A2C; border-radius: 22px; filter: saturate(.85); }
.vb-b .vb-hb h2 { font-size: 34px; line-height: 1.28; font-weight: 900; }
.vb-b .vb-hb p { font-size: 15px; color: #d2d2d6; }
.vb-b .vb-hb-tight { padding-bottom: 0; }
.vb-b .vb-hb-q { margin: 28px -22px 0 !important; padding: 34px 22px; background: #fff; color: #0d0d0f !important; font-size: 30px !important; }
body:has(.vb-b) .site-header { background: rgba(14,14,16,.96); border-bottom-color: #222; }
body:has(.vb-b) .site-header .logo, body:has(.vb-b) .site-header .logo *, body:has(.vb-b) .site-header .menu-btn { color: #fff; }
body:has(.vb-b) .site-header .menu-btn span, body:has(.vb-b) .site-header .menu-btn span::before, body:has(.vb-b) .site-header .menu-btn span::after { background: #fff; }
.vb-b #price, .vb-b #faq, .vb-b .company-sec, .vb-b #start { background: #111113; color: #e8e8ec; }
.vb-b .sec-head h2, .vb-b .sec-head p, .vb-b #price .cta-note { color: #fff; }
.vb-b .st-fold { background: #1F1F22; border: 1px solid #333; color: #e8e8ec; }
.vb-b .st-fold summary { color: #fff; }
.vb-b .terms-card, .vb-b .terms-table, .vb-b .terms-table th, .vb-b .terms-table td { background: #1F1F22; color: #e8e8ec; border-color: #333; }
.vb-b .notin { background: #18181A; border-color: #333; color: #e8e8ec; }
.vb-b .notin li { background: #2A2A2C; color: #e8e8ec; }
.vb-b .faq details { background: #18181A; border-color: #333; }
.vb-b .faq summary { color: #fff; }
.vb-b .faq details p, .vb-b .faq details div { color: #c9c9cc; }
.vb-b .company-card, .vb-b .company-strip { background: #18181A; border-color: #333; color: #e8e8ec; }
.vb-b .company-card *, .vb-b .company-strip * { color: #e8e8ec; border-color: #333; }

/* 追客部B 第2回レビューの直し */
.vb-b .vb-hb-q { font-weight: 900 !important; font-size: 34px; }
.vb-b .vb-hb-q em { font-style: normal; color: #FF4A2A; }
.vb-b .vb-hb h2 { font-weight: 900 !important; }
.vb-b .vb-video { position: relative; }
.vb-b .vb-video video { filter: saturate(.8); }
/* 追客部C 第2回レビューの直し */
.vb-c .vb-know dt::before { content: counter(k, decimal-leading-zero); font-size: 40px; color: #1F3A5F; }
.vb-c .vb-pain h2 { white-space: normal; font-size: 23px; }
/* 採用部 第2回レビューの直し：緑の立体ボタン・灰紺の段をやめ、紺とオレンジの平らな見た目にそろえる */
.vb-s .btn-primary, body:has(.vb-s) .site-header .btn-primary, body:has(.vb-s) .sticky-cta .btn-primary { background: #C0422B; border: 0; border-radius: 8px; box-shadow: none; text-shadow: none; }
.vb-s .btn-primary:hover { background: #a83722; }
.vb-s .btn-primary:active { transform: none; }
.vb-s .btn-primary .arrow { color: #C0422B; }
.vb-s .vb-secret { background: #1F3B5C; }
.vb-s .vb-chev { box-shadow: none; border-color: #1F3B5C; }
.vb-s .sec-head .kicker { color: #C0422B; }

/* 採用部: 広告（紺・生成り・朱の印）の続き。黄色と黒を使わない */
.vb-s .vb-badge { color: #E3CDAE; border-top-color: rgba(227,205,174,.3); }
.vb-s .vb-text b, .vb-s .vb-why b { background: linear-gradient(transparent 64%, rgba(192,66,43,.2) 64%); }
.vb-s .vb-q-sub { color: #C0422B; }
.vb-s .vb-why-k { background: #C0422B; }
.vb-s .st-fomo { background: #152A43; }
.vb-s .st-fomo h2 em, .vb-s .st-fomo-last b, .vb-s .st-fomo .balloon { color: #E3CDAE; }
.vb-s .st-fomo-last { font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 30px; }

/* ===== 広告用ページ：広告の続きの1画面目・実画面の流れ・登録した夜にやること（11/3） ===== */
.lpx-adfv { max-width: 480px; margin: 0 auto; }
.lpx-adfv img { display: block; width: 100%; height: auto; }
.lpx-adfv img[hidden] { display: none; }
.lpx-demo, .lpx-tonight { max-width: 480px; margin: 0 auto; padding: 28px 16px 32px; background: #fff; color: #24211D; }
.lpx-k { font-size: 21px; font-weight: 900; line-height: 1.45; text-align: center; margin: 0 0 18px; }
.lpx-step { position: relative; padding-left: 40px; margin: 0 0 20px; }
.lpx-n { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #C0422B; color: #fff; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.lpx-h { font-size: 16px; font-weight: 900; line-height: 1.5; margin: 3px 0 10px; }
.lpx-p { font-size: 14.5px; line-height: 1.8; margin: 0; }
.lpx-card { background: #fff; border: 1px solid #e3ddd0; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.08); padding: 14px 16px; font-size: 15px; line-height: 1.75; }
.lpx-in { background: #f7f4ee; }
.lpx-meta { font-size: 12.5px; font-weight: 700; color: #6b655a; margin: 0 0 4px; }
.lpx-lab { font-size: 12.5px; font-weight: 700; color: #6b655a; margin: 0 0 8px; }
.lpx-ta { background: #f3f3f0; border: 1px solid #d9d6cf; border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.8; }
.lpx-demo mark { background: linear-gradient(transparent 55%, #ffe45c 55%); color: inherit; }
.lpx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lpx-chips span { border: 1px solid #cfc8b8; border-radius: 99px; padding: 6px 16px; font-size: 14px; font-weight: 700; background: #fff; }
.lpx-chips span.on { background: #2f4a3e; border-color: #2f4a3e; color: #fff; }
.lpx-ttl { font-size: 16px; font-weight: 900; margin: 0 0 8px; }
.lpx-box { border: 2px solid #e2b04a; border-radius: 12px; padding: 10px 12px; }
.lpx-bh { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 14px; margin: 0 0 6px; }
.lpx-bh b { font-size: 12px; background: #fbe8c4; color: #8a5a00; border-radius: 99px; padding: 2px 10px; }
.lpx-box dl { margin: 0; }
.lpx-box dt { font-size: 13px; font-weight: 900; margin-top: 8px; border-top: 1px solid #eee7da; padding-top: 8px; }
.lpx-box dd { margin: 2px 0 0; font-size: 14px; line-height: 1.7; }
.lpx-okb { margin: 12px 0 2px; background: #2f4a3e; color: #fff; text-align: center; font-weight: 900; border-radius: 8px; padding: 10px; font-size: 14px; }
.lpx-paper { width: 120px; height: 140px; background: #fff; border: 1px solid #ddd; box-shadow: 0 8px 16px rgba(0,0,0,.12); transform: rotate(-4deg); padding: 12px; }
.lpx-paper b { display: block; font-size: 15px; margin-bottom: 6px; }
.lpx-paper i { display: block; height: 8px; background: #e6e1d6; border-radius: 3px; margin: 8px 0; }
.lpx-cap { font-size: 11px; color: #8b8578; margin: 6px 0 0; }
.lpx-big { font-size: 17px; font-weight: 900; line-height: 1.55; margin: 0 0 6px; }
.lpx-row { margin: 0; font-size: 14.5px; }
.lpx-note { margin: 8px 0 0; background: #fbf1e2; color: #8a5a00; font-size: 12.5px; line-height: 1.6; border-radius: 8px; padding: 8px 10px; }
.lpx-btns { display: flex; gap: 8px; margin: 10px 0 0; }
.lpx-btns span { border: 1px solid #ccc; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.lpx-btns .b1 { background: #24211D; color: #fff; border-color: #24211D; }
.lpx-today { margin: 0; padding-left: 20px; }
.lpx-today li { margin: 6px 0; font-size: 14px; line-height: 1.6; }
.lpx-today em { display: block; font-style: normal; font-size: 12.5px; color: #8a5a00; }
.lpx-src { font-size: 11.5px; color: #8b8578; text-align: center; margin: 4px 0 0; }
.lpx-tonight { background: #f7f4ee; }
.lpx-tonight ol { list-style: none; counter-reset: t; margin: 0 0 12px; padding: 0; }
.lpx-tonight li { counter-increment: t; position: relative; padding: 12px 12px 12px 52px; margin: 0 0 8px; background: #fff; border-radius: 12px; border: 1px solid #e3ddd0; }
.lpx-tonight li::before { content: counter(t); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #24211D; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.lpx-tonight li b { display: block; font-size: 15.5px; line-height: 1.5; }
.lpx-tonight li span { display: block; font-size: 13.5px; line-height: 1.7; color: #4a453c; margin-top: 2px; }
/* .vb の section 既定（余白0）に負けないよう、部品の余白は詳しく指定する */
.vb .lpx-demo, .vb .lpx-tonight { padding: 28px 18px 30px; box-sizing: border-box; }
.vb .lpx-demo .lpx-step { padding-left: 40px; }
.vb .lpx-tonight .lpx-p { font-size: 13.5px; padding: 0 4px; }
.lpx-fixlab { float: right; color: #d7261b; font-weight: 700; }
.lpx-demo ins { text-decoration: none; color: #d7261b; font-weight: 900; background: #fff0ee; padding: 0 2px; border-radius: 3px; }
.lpx-warn { display: inline-block; margin-left: 8px; font-size: 11px; background: #fde2df; color: #b3261e; border-radius: 99px; padding: 0 8px; vertical-align: 1px; }
.vb .lpx-honest { font-size: 13px; color: #5d584f; background: #fff; border-left: 3px solid #c9bfa9; padding: 8px 10px; margin: 0 0 10px; }
.lpx-fin-k { text-align: center; font-size: 20px; font-weight: 900; margin: 0 0 12px; padding: 0 16px; }
.lpx-fin { max-width: 300px; margin: 0 auto; }
.lpx-fin img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.lpx-fin img[hidden] { display: none; }
.lpx-fin-p { text-align: center; font-size: 15px; font-weight: 900; margin: 14px 0 6px; }
.vb-b .vb-scene-h { color: #fff; }

/* 11/4 料金を1行で開いて見せる */
.lpx-price1 { font-size: 18px; font-weight: 900; line-height: 1.6; text-align: center; background: #fff; color: #24211D; border: 2px solid #24211D; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; }
.lpx-price1 b { display: block; font-size: 22px; }