:root {
  --chrome: #22262E; --chrome-soft: #2B303A; --chrome-line: #3A404C;
  --ink-dark: #E8EAEE; --muted-dark: #9AA1AD; --accent: #1668D6;
  --brand-1: #1E63D8; --brand-2: #1C8ECB; --brand-3: #15B9A3;
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 52%, var(--brand-3) 100%);
  --wf-line: #C9CED6; --wf-fill: #E4E7EC; --wf-dark: #AEB5C0; --label: #6B7280;
  --font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', sans-serif;
  --body-size: 16px; --lead-size: clamp(16px, 1.7vw, 18px); --heading-sm: clamp(18px, 2.4vw, 22px); --heading-md: clamp(22px, 3vw, 28px); --heading-lg: clamp(28px, 4.8vw, 40px);
  --density-scale: 1; --radius-scale: 1; --card-shadow: 0 2px 10px rgba(20,24,32,.05); --surface-border: #E7E9ED; --surface-bg: #fff;
}
:root[data-density="loose"] { --density-scale: 1.2; }
:root[data-density="compact"] { --density-scale: .82; }
:root[data-font-pairing="mincho"] { --font: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
:root[data-font-pairing="rounded"] { --font: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'UD Digi Kyokasho NP-R', sans-serif; }
:root[data-type-scale="compact"] { --body-size: 15px; --lead-size: clamp(15px, 1.5vw, 17px); --heading-sm: clamp(17px, 2vw, 20px); --heading-md: clamp(20px, 2.6vw, 25px); --heading-lg: clamp(25px, 4.2vw, 34px); }
:root[data-type-scale="large"] { --body-size: 17px; --lead-size: clamp(17px, 1.9vw, 20px); --heading-sm: clamp(20px, 2.8vw, 25px); --heading-md: clamp(25px, 3.4vw, 32px); --heading-lg: clamp(32px, 5.4vw, 48px); }
:root[data-corner="sharp"] { --radius-scale: 0; }
:root[data-corner="round"] { --radius-scale: 1.8; }
:root[data-elevation="none"] { --card-shadow: none; }
:root[data-elevation="soft"] { --card-shadow: 0 2px 10px rgba(20,24,32,.05); }
:root[data-elevation="strong"] { --card-shadow: 0 10px 28px rgba(20,24,32,.16); }
:root[data-surface="flat"] { --surface-border: transparent; --surface-bg: var(--wf-fill); }
:root[data-placeholder="solid"] .imgbox { background-image: none !important; background-color: #F3F4F7; }
:root[data-placeholder="gradient"] .imgbox { background-image: linear-gradient(135deg, #EDEFF3, #DDE1E8); }
:root[data-placeholder="brand"] .imgbox { background-image: none; background-color: #EEF1F6; }
:root[data-theme="green"] { --chrome:#1F332A; --chrome-soft:#2A4438; --chrome-line:#3A5B4C; --ink-dark:#ECF5F0; --muted-dark:#A8B9AF; --accent:#168A57; --wf-line:#BFD2C8; --wf-fill:#DDE8E2; --wf-dark:#8DA99A; --label:#637267; }
:root[data-theme="black"] { --chrome:#111318; --chrome-soft:#1B1F27; --chrome-line:#303642; --ink-dark:#F2F3F5; --muted-dark:#8C94A3; --accent:#111827; --wf-line:#B7BDC7; --wf-fill:#D7DAE0; --wf-dark:#7D8593; --label:#555D6A; }
:root[data-theme="pink"] { --chrome:#3A1D2A; --chrome-soft:#51283A; --chrome-line:#704157; --ink-dark:#FFF1F6; --muted-dark:#D6A7B8; --accent:#E95B8C; --wf-line:#E4C3D0; --wf-fill:#F2DCE5; --wf-dark:#D3789B; --label:#805A68; }
:root[data-theme="warm"] { --chrome:#33271F; --chrome-soft:#443327; --chrome-line:#5C4738; --ink-dark:#F7EFE8; --muted-dark:#B9A99D; --accent:#A45F2B; --wf-line:#D5C5B7; --wf-fill:#E8DED3; --wf-dark:#B89B84; --label:#74675C; }
:root[data-theme="aiiro"] { --chrome:#1B2A40; --chrome-soft:#243854; --chrome-line:#38506F; --ink-dark:#F1F0E9; --muted-dark:#A3AFC0; --accent:#2A4C7D; --wf-line:#CFC9B8; --wf-fill:#E9E4D6; --wf-dark:#8E9DB4; --label:#6A6F63; }
:root[data-theme="sumikin"] { --chrome:#191714; --chrome-soft:#242019; --chrome-line:#3D362B; --ink-dark:#F3EFE7; --muted-dark:#A79E8F; --accent:#B8963E; --wf-line:#CCC5B6; --wf-fill:#E3DED2; --wf-dark:#9C917C; --label:#6E685C; }
:root[data-theme="navy"] { --chrome:#101B2D; --chrome-soft:#172844; --chrome-line:#29415F; --ink-dark:#EFF4FA; --muted-dark:#9DADC0; --accent:#1E4E8C; --wf-line:#BCC8D6; --wf-fill:#DDE5EE; --wf-dark:#8295AC; --label:#5F6F82; }
:root[data-theme="cyan"] { --chrome:#0E2E36; --chrome-soft:#163F49; --chrome-line:#2A5E69; --ink-dark:#EAF8FA; --muted-dark:#9CC4CB; --accent:#139CB4; --wf-line:#B9D8DE; --wf-fill:#DDF0F3; --wf-dark:#78AEB8; --label:#5F7D83; }
:root[data-theme="teal"] { --chrome:#12342F; --chrome-soft:#1B4942; --chrome-line:#2F665E; --ink-dark:#EAF7F4; --muted-dark:#9FC6BF; --accent:#0F8F7A; --wf-line:#BBD8D1; --wf-fill:#DDF0EC; --wf-dark:#80AAA1; --label:#607B75; }
:root[data-theme="orange"] { --chrome:#3B2415; --chrome-soft:#51331F; --chrome-line:#704A30; --ink-dark:#FFF3E8; --muted-dark:#D4AE90; --accent:#E67622; --wf-line:#DEC8B6; --wf-fill:#F0E2D5; --wf-dark:#BD9272; --label:#7D6654; }
:root[data-theme="red"] { --chrome:#35171A; --chrome-soft:#4A2024; --chrome-line:#6B3439; --ink-dark:#FFF0F1; --muted-dark:#D3A0A4; --accent:#D63B3F; --wf-line:#DDBEC0; --wf-fill:#EFD8DA; --wf-dark:#B7797D; --label:#806063; }
:root[data-theme="purple"] { --chrome:#251B3A; --chrome-soft:#342751; --chrome-line:#514072; --ink-dark:#F4F0FF; --muted-dark:#B6A6D5; --accent:#7654C7; --wf-line:#CBC1E2; --wf-fill:#E3DDF0; --wf-dark:#9B89C5; --label:#6E6386; }
:root[data-theme="gray"] { --chrome:#22262B; --chrome-soft:#30363D; --chrome-line:#49515B; --ink-dark:#F2F4F6; --muted-dark:#A5ADB7; --accent:#59636F; --wf-line:#C9CDD2; --wf-fill:#E2E5E8; --wf-dark:#9BA3AC; --label:#6E747C; }
:root[data-theme="moss"] { --chrome:#26301F; --chrome-soft:#35432B; --chrome-line:#536842; --ink-dark:#F1F7EA; --muted-dark:#AEBE9F; --accent:#6F8F3A; --wf-line:#C9D3BD; --wf-fill:#E3EBDC; --wf-dark:#99AA83; --label:#6E7864; }
:root[data-theme="sand"] { --chrome:#332E25; --chrome-soft:#464034; --chrome-line:#665D4D; --ink-dark:#F7F2E8; --muted-dark:#BEB19E; --accent:#C08A45; --wf-line:#D6CCBB; --wf-fill:#EAE3D6; --wf-dark:#A99B87; --label:#766D60; }
:root[data-theme="mono"] { --chrome:#0F1012; --chrome-soft:#1A1B1F; --chrome-line:#34363B; --ink-dark:#F4F4F5; --muted-dark:#A2A4A9; --accent:#2D2F35; --wf-line:#C6C8CC; --wf-fill:#E1E2E5; --wf-dark:#92959A; --label:#666A70; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: #23262B; line-height: 1.7; background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover .ln-text { opacity: .65; }
a.is-current .ln-text { color: var(--accent); font-weight: 700; }

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.sec { display: flex; flex-direction: column; gap: calc(18px * var(--density-scale)); padding: calc(36px * var(--density-scale)) calc(32px * var(--density-scale)); }
.card { flex: 1; min-width: 0; border: 1px solid var(--surface-border); border-radius: calc(12px * var(--radius-scale)); padding: calc(20px * var(--density-scale)); display: flex; flex-direction: column; gap: calc(10px * var(--density-scale)); background: var(--surface-bg); box-shadow: var(--card-shadow); }

.ln-text { color: #23262B; width: auto !important; max-width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block !important; -webkit-line-clamp: unset !important; word-break: normal; overflow-wrap: break-word; line-height: 1.75; font-size: var(--body-size); }
.txt-body, .txt-area-item, .txt-job-field, .txt-dl-item { font-size: var(--body-size) !important; }
.txt-tiny, .txt-tag, .chip-text { font-size: 13px !important; line-height: 1.55; }
.txt-short-strong, .txt-heading-sm, .txt-menu-item { font-size: var(--heading-sm) !important; line-height: 1.45; font-weight: 700; }
.txt-heading-md, .txt-contact-title { font-size: var(--heading-md) !important; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; }
.txt-heading-lg, .txt-contact-en { font-size: var(--heading-lg) !important; line-height: 1.22; font-weight: 900; letter-spacing: -.025em; }
.txt-numberish, .txt-price, .txt-phone-number { font-size: clamp(24px, 4vw, 40px) !important; line-height: 1.2; font-weight: 900; }
.ln { border-radius: 3px; background: var(--wf-fill); flex-shrink: 0; }
.ln.d { background: var(--wf-dark); }
.ln.ac { background: var(--accent); opacity: .55; }

.imgbox { border-radius: calc(8px * var(--radius-scale)); background-color: #EEF0F3; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; border: none; }
.imgbox.full { border-radius: 0; }
.ava { border-radius: 50%; background-color: #EEF0F3; background-repeat: no-repeat; background-position: center; background-size: cover; border: none; flex-shrink: 0; }

.wf-btn { height: auto; min-height: 46px; border-radius: calc(999px * max(var(--radius-scale), .15)); background: var(--accent); display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; transition: opacity .15s; flex-shrink: 0; }
.wf-btn:hover { opacity: .88; }
.wf-btn.ghost { background: transparent; border: 1.5px solid var(--accent); }
.btn-text { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.wf-btn.ghost .btn-text { color: var(--accent); }

.chip { height: auto; border-radius: 999px; background: rgba(0,0,0,.05); border: none; padding: 4px 12px; flex-shrink: 0; }
.chip-text { color: var(--label); font-size: 11px; font-weight: 600; }

.wf-arrow { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #E7E9ED; box-shadow: 0 4px 14px rgba(20,24,32,.12); display: flex; align-items: center; justify-content: center; color: #23262B; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.dots { display: flex; gap: 7px; justify-content: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #D9DCE1; }
.dot.on { background: var(--accent); }
.play { border-radius: 50%; background: rgba(255,255,255,.92); border: none; box-shadow: 0 6px 20px rgba(20,24,32,.2); display: flex; align-items: center; justify-content: center; }
.play-tri { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #23262B; margin-left: 4px; }

.overlay-c, .overlay-center { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.18)); }
.overlay-center { flex-direction: row; }
.overlay-c .ln-text, .overlay-center .ln-text, .overlay-c .btn-text, .overlay-c .chip-text, .overlay-c span { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.overlay-c .wf-btn:not(.ghost) { background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.overlay-c .wf-btn:not(.ghost) .btn-text { color: var(--chrome) !important; text-shadow:none; }
.overlay-c .wf-btn.ghost { border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.08); }
.overlay-c .chip { background:rgba(255,255,255,.16); }
.map-label { font-size: 11px; color: #23262B; background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 4px; }

.wb-block { position: relative; }

/* ---- スライダー ---- */
.wb-slider { position: relative; overflow: hidden; }
.wb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.wb-slide.active { position: relative; opacity: 1; pointer-events: auto; }

/* ---- ハンバーガー / ドロワーメニュー ---- */
.wf-hamburger { cursor: pointer; transition: opacity .15s; }
.wf-hamburger:hover { opacity: .85; }
.wb-drawer { position: fixed; inset: 0; z-index: 1000; }
.wb-drawer-bg { position: absolute; inset: 0; background: rgba(15,18,24,.45); }
.wb-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 80vw); background: #fff; box-shadow: -8px 0 30px rgba(15,18,24,.18); padding: 64px 28px 28px; display: flex; flex-direction: column; gap: 4px; }
.wb-drawer-panel a { display: block; padding: 13px 6px; border-bottom: 1px solid #EDEFF2; font-size: 14px; font-weight: 600; color: #23262B; }
.wb-drawer-panel a:hover { color: var(--accent); }
.wb-drawer-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #E2E5EA; background: #fff; font-size: 15px; color: #23262B; }

/* ---- FAQアコーディオン ---- */
.wf-acc-toggle { cursor: pointer; }
.wf-acc-toggle:hover { opacity: .8; }

/* ---- タブ切替 ---- */
.wf-tab { cursor: pointer; transition: opacity .15s; }
.wf-tab:hover { opacity: .75; }

/* ---- 追従CTA（スクロールで下部に出現） ---- */
.wb-fixedcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; transform: translateY(110%); transition: transform .35s ease; pointer-events: none; }
.wb-fixedcta > * { pointer-events: auto; }
.wb-fixedcta.wb-visible { transform: none; }

/* ---- スクロールフェードイン（任意） ---- */
.wb-block { opacity: 1; transform: none; }
.wb-animate .wb-block:not(.wb-nav):not(.wb-fixedcta) { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.wb-animate .wb-block.wb-in { opacity: 1; transform: none; }

/* ---- ページトップへ戻る ---- */
.wb-totop { position: fixed; right: 22px; bottom: 22px; z-index: 950; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 17px; box-shadow: 0 6px 20px rgba(15,18,24,.22); opacity: 0; pointer-events: none; transition: opacity .3s; }
.wb-totop.wb-visible { opacity: 1; pointer-events: auto; }
body:has(.wb-fixedcta) .wb-totop { bottom: 108px; }

.vp-sp { display: none; }
@media (max-width: 768px) {
  .vp-pc { display: none; }
  .vp-sp { display: block; }
  .vp-sp .sec .row, .vp-sp .card .row { flex-wrap: wrap; }
  .vp-sp .wf-btn { min-width: 0; max-width: 100%; }
  .vp-sp .row .wf-btn { flex: 1 1 140px; }
  .vp-sp .overlay-c { padding-left: 24px; padding-right: 24px; text-align: center; }
  .vp-sp .ln-text { overflow-wrap: break-word; }
}

/* ==========================================================================
   読むサプリ出版 ブランドカスタマイズ
   ========================================================================== */

/* ---- ロゴ ---- */
.site-logo { height: 60px; width: auto; max-width: 100%; display: block; object-fit: contain; align-self: flex-start; flex-shrink: 0; }
.site-logo-sp { height: 48px; }
.footer-logo { height: 66px; }

/* ---- 見出し補助（アイビーブロー / リード） ---- */
.txt-eyebrow {
  font-size: 12px !important; font-weight: 800; letter-spacing: .18em;
  color: var(--accent); text-transform: uppercase; line-height: 1.4;
}
.txt-lead { font-size: var(--lead-size) !important; line-height: 1.85; }

/* ブランドグラデーション文字（見出し） */
.brand-gradient-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- ナビリンク ---- */
.txt-menu-nav {
  font-size: 15px !important; font-weight: 700; color: #2A2F37;
  position: relative; padding-bottom: 2px; transition: color .15s;
}
.txt-menu-nav::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--brand-grad); transition: width .22s ease;
}
.wb-nav a:hover .txt-menu-nav, .txt-menu-nav:hover { color: var(--accent); }
a:hover > .txt-menu-nav::after, .txt-menu-nav:hover::after { width: 100%; }

/* ---- ボタン（グラデーション） ---- */
.wf-btn:not(.ghost) { background: var(--brand-grad); box-shadow: 0 8px 20px rgba(22,104,214,.22); }
.wf-btn:not(.ghost):hover { opacity: 1; filter: brightness(1.05); box-shadow: 0 10px 26px rgba(22,104,214,.3); }
.wf-btn.ghost { border-width: 1.6px; }
.wf-btn.ghost:hover { background: rgba(22,104,214,.06); opacity: 1; }

/* ---- ヒーローのチェック ---- */
.hero-checks { margin: 0; }
.check-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand-grad);
  color: #fff; font-size: 11px; font-weight: 900; flex-shrink: 0;
}

/* ---- ブランドビジュアル（画像プレースホルダの代替） ---- */
.brand-visual {
  position: relative; overflow: hidden;
  background: var(--brand-grad) !important;
  display: flex; align-items: center; justify-content: center;
}
.brand-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
}
.brand-visual::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: linear-gradient(135deg, #000, transparent 75%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.brand-visual.soft { background: linear-gradient(135deg, #EAF1FB, #E4F4F1) !important; }
.brand-visual.soft::before { opacity: .5; }
.brand-visual.soft::after { opacity: .35; }
.brand-visual.portrait { background: linear-gradient(160deg, var(--brand-2), var(--brand-3)) !important; }
.brand-visual.v2 { background: linear-gradient(150deg, var(--brand-1), var(--brand-2)) !important; }
.brand-visual.v3 { background: linear-gradient(150deg, var(--brand-2), var(--brand-3)) !important; }

/* ヒーローの大ビジュアル：ロゴ透かし入り */
.hero-visual {
  background: var(--brand-grad) !important; position: relative; overflow: hidden;
  border-radius: calc(14px * max(var(--radius-scale), .3));
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.3), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(255,255,255,.14), transparent 42%);
}
.hero-visual::after {
  content: ""; position: absolute; inset: 0; opacity: .4;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}

/* サービスカードの番号（ビジュアル内） */
.service-icon {
  position: relative; z-index: 1; color: rgba(255,255,255,.95);
  font-size: 46px; font-weight: 900; letter-spacing: -.02em;
  text-shadow: 0 4px 18px rgba(0,0,0,.18);
}

/* ---- サービス / 実績カード ---- */
.service-card, .work-card {
  background: #fff; border: 1px solid var(--surface-border);
  border-radius: calc(14px * max(var(--radius-scale), .2)); padding: 14px;
  box-shadow: 0 2px 14px rgba(20,24,32,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover, .work-card:hover {
  transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,24,32,.12);
}
.service-card .imgbox, .work-card .imgbox { border-radius: 10px; }

/* ---- お知らせ ---- */
.news-item {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 4px; border-bottom: 1px solid var(--wf-line);
}
.news-item:first-child { border-top: 1px solid var(--wf-line); }
.news-item-sp { flex-direction: column; align-items: flex-start; gap: 8px; }
.news-date { color: var(--accent) !important; font-weight: 700; flex-shrink: 0; letter-spacing: .04em; }
.news-chip { background: rgba(22,104,214,.08); }
.news-chip .chip-text { color: var(--accent); }
.news-text { color: #3A414B; transition: color .15s; }

/* ---- 選ばれる理由 ---- */
.reason-card {
  background: #fff; border: 1px solid var(--surface-border);
  border-radius: calc(12px * max(var(--radius-scale), .2)); padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(20,24,32,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.reason-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,24,32,.1); }
.reason-num {
  font-size: 24px; font-weight: 900; line-height: 1; flex-shrink: 0;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- 数字（ダーク帯） ---- */
.stat-num { color: #fff !important; }
.stat-num small { font-size: .42em; font-weight: 800; margin-left: 2px; opacity: .85; }
.stat-label { color: var(--muted-dark) !important; font-weight: 600; letter-spacing: .04em; }
.stats-grid .stat-item { position: relative; }
.vp-pc .stats-grid .stat-item + .stat-item::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
  background: var(--chrome-line);
}

/* ---- お問い合わせ CTA ---- */
.cta-main { background: var(--brand-grad); box-shadow: 0 16px 40px rgba(22,104,214,.24); }
.cta-sub {
  background: #fff; border: 1px solid var(--surface-border);
  border-radius: 12px; padding: 26px 24px;
  box-shadow: 0 2px 12px rgba(20,24,32,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-sub:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,24,32,.12); }
.cta-sub .txt-phone-number, .cta-sub .txt-email-address { color: var(--accent) !important; }
.cta-arrow {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  border: 1.6px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; transition: background .2s, color .2s;
}
.cta-sub:hover .cta-arrow { background: var(--accent); color: #fff; }

/* ---- 会社概要テーブル ---- */
.info-table { display: flex; flex-direction: column; }
.info-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  padding: 16px 6px; border-bottom: 1px solid var(--wf-line);
}
.info-row:first-child { border-top: 1px solid var(--wf-line); }
.info-row dt { font-weight: 700; color: #3A414B; margin: 0; }
.info-row dd { margin: 0; color: #4A5260; }
.info-table-sp .info-row { grid-template-columns: 1fr; gap: 4px; }
.info-table-sp .info-row dt { color: var(--accent); font-weight: 700; }
.info-link { color: var(--accent); font-weight: 600; }
.info-link:hover { text-decoration: underline; }

/* ---- フッターリンク ---- */
.footer-link { color: #5B6472 !important; font-weight: 600; transition: color .15s; }
.footer-link:hover { color: var(--accent) !important; }

/* ---- 実写真スロット ---- */
.imgbox.photo { position: relative; background-color: #EEF1F6; }
.imgbox.photo > .visual-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgbox.photo.labeled::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(20,60,120,.06), rgba(10,20,45,.5));
}
.imgbox.photo.labeled .service-icon {
  position: absolute; left: 16px; bottom: 12px; z-index: 2; font-size: 40px;
}

/* ---- ハンバーガー ---- */
.wf-hamburger .ln.d { background: var(--chrome); border-radius: 2px; }

@media (max-width: 768px) {
  .site-logo { height: 48px; }
  .footer-logo { height: 58px; }
}

/* ==========================================================================
   ブラッシュアップ第2弾（動き・余白・立体感・a11y）
   ========================================================================== */

/* ---- 基本挙動 ---- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
::selection { background: rgba(22,104,214,.18); }
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid rgba(22,104,214,.5); outline-offset: 2px; border-radius: 4px;
}
section[id] { scroll-margin-top: 88px; }

/* ---- ヘッダー追従（sticky）＋ブランドの天面アクセント ---- */
.wb-nav { position: sticky; top: 0; z-index: 600; box-shadow: 0 6px 20px rgba(20,24,32,.06); }
.wb-nav::before { content: ""; display: block; height: 4px; background: var(--brand-grad); }

/* ---- ヒーローの装飾（やわらかな光と余白） ---- */
.wb-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F3F8FF 0%, #FAFCFF 45%, #fff 100%); }
.wb-hero .sec { background: transparent !important; position: relative; z-index: 1; }
.wb-hero::before {
  content: ""; position: absolute; top: -160px; right: -140px; width: 480px; height: 480px;
  border-radius: 50%; background: radial-gradient(circle, rgba(28,142,203,.20), transparent 68%); pointer-events: none;
}
.wb-hero::after {
  content: ""; position: absolute; bottom: -180px; left: -140px; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(21,185,163,.16), transparent 68%); pointer-events: none;
}
.wb-hero .hero-checks li { background: #fff; border: 1px solid var(--surface-border); border-radius: 999px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(20,24,32,.05); }
.hero-visual, .wb-hero .imgbox.photo { box-shadow: 0 24px 60px rgba(22,104,214,.18); }

/* ---- セクションの背景リズム ---- */
section#service, section#reason { background: linear-gradient(180deg, #FAFBFE, #F5F8FC); }

/* ---- 見出し（アイビーブロー）を洗練 ---- */
.txt-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; }
[style*="text-align:center"].txt-eyebrow::before,
[style*="text-align:center"].txt-eyebrow::after {
  content: ""; width: 18px; height: 2px; background: var(--brand-grad); border-radius: 2px;
}

/* ---- ボタンを洗練 ---- */
.wf-btn { transition: transform .18s ease, box-shadow .2s ease, opacity .15s, filter .15s; letter-spacing: .02em; }
.wf-btn:not(.ghost):hover { transform: translateY(-2px); }
.wf-btn:active { transform: translateY(0); }

/* ---- チップをブランド調に ---- */
.chip { background: rgba(22,104,214,.08); }
.chip-text { color: var(--accent); letter-spacing: .06em; }

/* ---- カード内画像のホバーズーム ---- */
.service-card .imgbox.photo, .work-card .imgbox.photo { overflow: hidden; }
.service-card .visual-img, .work-card .visual-img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .visual-img, .work-card:hover .visual-img { transform: scale(1.06); }

/* ---- お知らせ行のホバー ---- */
.news-item { transition: background .15s, padding .15s; border-radius: 8px; }
.news-item:hover { background: rgba(22,104,214,.04); }
.news-item:hover .news-text { color: var(--accent); }

/* ---- 数字（ダーク帯）に奥行き ---- */
.wb-caseplus .sec { position: relative; overflow: hidden; border-radius: 0; }
.wb-caseplus .sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(28,142,203,.35), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(21,185,163,.28), transparent 45%);
}
.wb-caseplus .stats-grid { position: relative; z-index: 1; }
.stat-num small { color: var(--brand-3); }

/* ---- CTA矢印のアニメーション ---- */
.cta-arrow { transition: background .2s, color .2s, transform .2s; }
.cta-sub:hover .cta-arrow { transform: translateX(4px); }

/* ---- 会社概要テーブルの行ホバー ---- */
.info-row { transition: background .15s; border-radius: 6px; }
.vp-pc .info-row:hover { background: rgba(22,104,214,.03); }

/* ---- フッターの仕上げ ---- */
.wb-footer { border-top: 4px solid transparent; border-image: var(--brand-grad) 1; }

/* ---- スクロールフェードイン（段階表示） ---- */
.wb-animate .wb-block:not(.wb-nav):not(.wb-fixedcta) { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
/* 表示ルールは:not()を含めて詳細度を上げ、非表示ルールに確実に勝たせる */
.wb-animate .wb-block.wb-in:not(.wb-nav):not(.wb-fixedcta) { opacity: 1; transform: none; }
/* JS未読込・IO非対応時のフォールバック（内容が消えないように） */
html:not(.wb-js) .wb-block { opacity: 1 !important; transform: none !important; }

/* ---- モーション低減設定への配慮 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wb-animate .wb-block { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-card:hover .visual-img, .work-card:hover .visual-img { transform: none; }
  .wf-btn:hover { transform: none; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 72px; }
  section[id] { scroll-margin-top: 64px; }
  .wb-hero::before { width: 300px; height: 300px; top: -120px; right: -100px; }
  .wb-hero::after { width: 300px; height: 300px; bottom: -140px; left: -100px; }
}