/*
Theme Name: AIBUILDERZ Renewal
Theme URI: https://ai-builderz.com/
Author: for,Freelance
Description: AIBUILDERZ サイトリニューアル用テーマ (2026-05)。renewal HTML 一式をテーマ化し、CSS/JS をテーマアセットとして配信。各固定ページは page-<slug>.php テンプレートで定義。
Version: 1.0.0
License: GPL-2.0+
Text Domain: aibuilderz-renewal
*/

/* === Shared base CSS (元 for-sales/for-sales-shared.css) === */
/* ============================================
   AIBUILDERZ for SALES — Shared CSS
   /for-sales/ 配下5ページで共通のスタイル
   (Goodpatch / Lany トンマナ準拠)
   ============================================ */

:root {
  --c-bg: #F6F6F6;
  --c-bg-warm: #FAFAFA;
  --c-text: #111111;
  --c-text-sub: #555555;
  --c-text-mute: #9A9A9A;
  --c-line: #E6E6E6;
  --c-line-soft: #EFEFEF;
  --c-brand: #096FC8;
  --c-brand-deep: #0556A0;
  --c-brand-2: #76B7ED;
  --c-accent: #FF7669;
  --c-surface: #FFFFFF;

  /* "Dark" tokens — repurposed to brand blue gradient (v7 line) */
  --c-dark-1: #0556A0;
  --c-dark-2: #096FC8;
  --c-dark-3: #3F9EE3;

  --f-en: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-ja: 'Zen Kaku Gothic New', sans-serif;
  --f-ja-bold: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --shadow-rest: 0 1px 2px rgba(10,15,30,.04), 0 4px 12px rgba(10,15,30,.04);
  --shadow-hover: 0 1px 2px rgba(10,15,30,.04), 0 12px 32px rgba(10,15,30,.10), 0 32px 64px -16px rgba(9,111,200,.14);

  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  --container: calc(80rem + 5rem * 2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  cursor: auto;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: auto; }
::selection { background: var(--c-text); color: var(--c-bg); }

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor { display: none; }
}

/* Custom cursor */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--c-text);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease-out), height .3s var(--ease-out);
  mix-blend-mode: difference;
}
.cursor.is-hover { width: 56px; height: 56px; background: rgba(255,255,255,.6); }

/* Background floating glow */
body::before {
  content: '';
  position: fixed;
  top: -10%; right: -10%;
  width: 50vw; height: 70vh;
  background: radial-gradient(circle, rgba(118,183,237,.20), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: bgFloat 26s var(--ease-soft) infinite;
}
@keyframes bgFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-4%, 5%); }
}

/* ============================================
   Header — Floating pill (for SALES sub-brand)
   ============================================ */
.header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  max-width: 88rem;
  padding: 0.625rem 0.75rem 0.625rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(10, 15, 30, 0.04),
    0 8px 24px rgba(10, 15, 30, 0.08),
    0 24px 48px -16px rgba(10, 15, 30, 0.10);
  transition: padding .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .5s var(--ease-out);
}
.header.scrolled {
  padding: 0.5rem 0.625rem 0.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 2px 4px rgba(10, 15, 30, 0.06),
    0 12px 32px rgba(10, 15, 30, 0.12),
    0 32px 64px -16px rgba(9, 111, 200, 0.12);
}

/* Logo with "for SALES" sub-brand */
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--f-en);
  letter-spacing: 0.02em;
  color: var(--c-text);
}
.header__logo > span:first-child {
  font-weight: 800;
  font-size: 1rem;
}
.header__logo-sub {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  margin-left: 0.0625rem;
  padding-left: 0.625rem;
  border-left: 1px solid var(--c-line);
}

/* Brand group (logo + 本体サイトリンク) */
.header__brand {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
}
.header__back-main {
  font-family: var(--f-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  padding-left: 0.875rem;
  border-left: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  transition: color .25s var(--ease-out);
  white-space: nowrap;
}
.header__back-main::before {
  content: '←';
  font-weight: 400;
  transition: transform .35s var(--ease-spring);
}
.header__back-main:hover { color: var(--c-text); }
.header__back-main:hover::before { transform: translateX(-3px); }
@media (max-width: 900px) {
  .header__back-main { display: none; }
}

.header__nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.header__nav-divider {
  display: inline-block;
  width: 1px;
  height: 1.5rem;
  background: var(--c-line);
  margin: 0 0.5rem;
}

.header__back {
  font-family: var(--f-en);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.header__back::before {
  content: '←';
  font-weight: 400;
  transition: transform .35s var(--ease-spring);
}
.header__back:hover::before { transform: translateX(-4px); }

.header__link {
  font-family: var(--f-ja-bold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-text);
  position: relative;
  padding: 0.5rem 0;
  display: inline-block;
  transition: color .3s var(--ease-out);
}
.header__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-brand);
  transition: width .35s var(--ease-out);
}
.header__link:hover { color: var(--c-brand); }
.header__link:hover::after { width: 100%; }

.header__cta-sub {
  padding: 0.75rem 1.125rem;
  min-width: 7.5rem;
  background: transparent;
  color: var(--c-brand);
  font-family: var(--f-ja-bold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  transition: color .3s var(--ease-out), transform .3s var(--ease-spring), border-color .3s;
}
.header__cta-sub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.header__cta-sub > span { position: relative; z-index: 1; }
.header__cta-sub:hover { color: #fff; transform: translateY(-2px); }
.header__cta-sub:hover::before { transform: scaleX(1); transform-origin: left; }
.header__cta-sub--accent {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  box-shadow: 0 4px 12px rgba(9,111,200,.30);
}
.header__cta-sub--accent::before { background: var(--c-brand-deep); }
.header__cta-sub--accent:hover { box-shadow: 0 8px 20px rgba(9,111,200,.40); }

.header__cta {
  padding: 0.75rem 1.25rem;
  min-width: 7.5rem;
  background: var(--c-text);
  color: var(--c-bg);
  font-family: var(--f-ja-bold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(10,15,30,.18);
  transition: transform .4s var(--ease-spring), box-shadow .3s;
}
.header__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-brand);
  transform: translateY(100%);
  transition: transform .5s var(--ease-out);
}
.header__cta > span { position: relative; z-index: 1; }
.header__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(9,111,200,.40); }
.header__cta:hover::before { transform: translateY(0); }

@media (max-width: 1100px) {
  .header__nav .header__link,
  .header__nav .header__nav-divider,
  .header__nav .header__cta-sub { display: none; }
}

/* ============================================
   Breadcrumb (sub-pages only)
   ============================================ */
.breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 7.5rem 2.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.breadcrumb a { transition: color .3s; }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb__current { color: var(--c-text); }

/* ============================================
   Buttons (shared)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.625rem;
  font-family: var(--f-ja-bold);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-spring), color .4s var(--ease-out);
}
.btn > span { position: relative; z-index: 2; }
.btn--primary {
  background: var(--c-text);
  color: var(--c-bg);
  box-shadow: 0 4px 16px rgba(10,15,30,.18);
}
.btn--primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: var(--c-brand);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .55s var(--ease-out), height .55s var(--ease-out);
  z-index: 1;
}
.btn--primary::after {
  content: '→';
  font-family: var(--f-en);
  font-weight: 400;
  transition: transform .4s var(--ease-spring);
  position: relative;
  z-index: 2;
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(9,111,200,.30);
}
.btn--primary:hover::before { width: 240%; height: 600%; }
.btn--primary:hover::after { transform: translateX(5px); }

.btn--secondary {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-text);
}
.btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease-out);
  z-index: 1;
}
.btn--secondary:hover {
  transform: translateY(-3px);
  color: var(--c-bg);
}
.btn--secondary:hover::before { transform: scaleX(1); transform-origin: left; }

/* ============================================
   Reveal animation
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-spring);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modern: scroll-driven reveal — each element animates based on its own viewport position */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: revealOnScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
    transition: none;
  }
  /* When using view timeline, ignore the JS-applied .is-visible state */
  .reveal.is-visible {
    animation: revealOnScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  .reveal.delay-1, .reveal.delay-2, .reveal.delay-3, .reveal.delay-4,
  .reveal.delay-5, .reveal.delay-6, .reveal.delay-7, .reveal.delay-8 {
    transition-delay: 0s;
  }
  @keyframes revealOnScroll {
    0%   { opacity: 0; transform: translateY(48px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}
/* Auto-stagger for grids of reveal items */
.agents__grid .reveal:nth-child(1) { transition-delay: .00s; }
.agents__grid .reveal:nth-child(2) { transition-delay: .08s; }
.agents__grid .reveal:nth-child(3) { transition-delay: .16s; }
.agents__grid .reveal:nth-child(4) { transition-delay: .24s; }
.agents__grid .reveal:nth-child(5) { transition-delay: .12s; }
.agents__grid .reveal:nth-child(6) { transition-delay: .20s; }
.agents__grid .reveal:nth-child(7) { transition-delay: .28s; }
.agents__grid .reveal:nth-child(8) { transition-delay: .36s; }

.overview-pillars .reveal:nth-child(1) { transition-delay: .00s; }
.overview-pillars .reveal:nth-child(2) { transition-delay: .14s; }
.overview-pillars .reveal:nth-child(3) { transition-delay: .28s; }

/* Comparison rows stagger */
.compare .reveal:nth-of-type(1) { transition-delay: .00s; }
.compare .compare__row:nth-of-type(1).reveal { transition-delay: .04s; }
.compare .compare__row:nth-of-type(2).reveal { transition-delay: .12s; }
.compare .compare__row:nth-of-type(3).reveal { transition-delay: .20s; }
.compare .compare__row:nth-of-type(4).reveal { transition-delay: .28s; }
.compare .compare__row:nth-of-type(5).reveal { transition-delay: .36s; }
.compare .compare__row:nth-of-type(6).reveal { transition-delay: .44s; }
.compare-insight .reveal:nth-child(1) { transition-delay: .00s; }
.compare-insight .reveal:nth-child(2) { transition-delay: .12s; }
.compare-insight .reveal:nth-child(3) { transition-delay: .24s; }

/* Persona cards alternate slide directions */
.persona-card.reveal:nth-child(1) { transition-delay: .00s; }
.persona-card.reveal:nth-child(2) { transition-delay: .14s; }
.persona-card.reveal:nth-child(3) { transition-delay: .28s; }

/* Asset numbers cascade */
.assets .asset.reveal:nth-child(1) { transition-delay: .00s; }
.assets .asset.reveal:nth-child(2) { transition-delay: .12s; }
.assets .asset.reveal:nth-child(3) { transition-delay: .24s; }
.assets .asset.reveal:nth-child(4) { transition-delay: .36s; }

/* Coverage columns cascade */
.coverage__matrix .coverage__col.reveal:nth-child(1) { transition-delay: .00s; }
.coverage__matrix .coverage__col.reveal:nth-child(2) { transition-delay: .12s; }
.coverage__matrix .coverage__col.reveal:nth-child(3) { transition-delay: .24s; }

.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }
.reveal.delay-6 { transition-delay: .48s; }
.reveal.delay-7 { transition-delay: .56s; }
.reveal.delay-8 { transition-delay: .64s; }

/* Directional variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-spring);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-spring);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.reveal-zoom {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-spring);
}
.reveal-zoom.is-visible { opacity: 1; transform: scale(1); }

/* ============================================
   Footer (for SALES sub-brand)
   ============================================ */
.footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 5rem 2.5rem 3rem;
  border-top: 1px solid var(--c-line);
  position: relative;
  z-index: 1;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 5rem;
  align-items: start;
  padding-bottom: 3rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--c-line);
}
.footer__brand {
  display: grid;
  gap: 1.25rem;
  max-width: 24rem;
}
.footer__logo {
  font-family: var(--f-en);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.footer__logo > span:first-child { font-weight: 800; }
.footer__logo-sub {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  padding-left: 0.625rem;
  border-left: 1px solid var(--c-line);
}
.footer__tagline {
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.95;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
}
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.footer__nav-col {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}
.footer__nav-title {
  font-family: var(--f-en);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}
.footer__nav-col a {
  font-family: var(--f-ja-bold);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--c-text);
  position: relative;
  width: fit-content;
  transition: color .25s;
}
.footer__nav-col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--c-brand);
  transition: width .35s var(--ease-out);
}
.footer__nav-col a:hover { color: var(--c-brand); }
.footer__nav-col a:hover::after { width: 100%; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__meta {
  font-family: var(--f-en);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: var(--c-text-mute);
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 480px) {
  .footer__nav { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* === Desktop FV (Top page) 強化 === */

/* ============================================
   Desktop FV (Top page) — 必要最小限の調整のみ
   ※ ユーザー指示があったボタン強化 + チャットボット移動 + reveal保険 だけ実施。
      タイトル/padding等のレイアウトは元のデザインを尊重して触らない。
   ※ PC (>= 901px) のみ。モバイルには影響しない。
   ============================================ */
@media (min-width: 901px) {
  /* FV セクション内 .reveal を保険で表示 (above-the-fold で IntersectionObserver が空振りする場合の保険) */
  body.home .hero .reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* for-sales LP の PC FV ボタンを大きく + 目立たせる */
  body.page-id-374 .hero__btn-primary,
  body.page-id-374 .hero__btn-secondary,
  body.page-template-default.page:not(.home):not(.page-id-16) .hero__cta-row .hero__btn-primary,
  body.page-template-default.page:not(.home):not(.page-id-16) .hero__cta-row .hero__btn-secondary {
    padding: 1.25rem 2.25rem !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em !important;
    border-radius: 999px !important;
    min-width: 200px !important;
    justify-content: center !important;
  }
  body.page-id-374 .hero__btn-primary,
  body.page-template-default.page:not(.home):not(.page-id-16) .hero__cta-row .hero__btn-primary {
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    box-shadow: 0 14px 32px -8px rgba(9,111,200,0.45), 0 6px 16px rgba(9,111,200,0.22) !important;
    color: #fff !important;
  }
  body.page-id-374 .hero__btn-secondary,
  body.page-template-default.page:not(.home):not(.page-id-16) .hero__cta-row .hero__btn-secondary {
    border: 2px solid #111 !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 6px 16px rgba(10,15,30,0.08) !important;
  }
  body.page-id-374 .hero__cta-row,
  body.page-template-default.page:not(.home):not(.page-id-16) .hero__cta-row {
    gap: 1rem !important;
  }
}

/* hero__screen-url の中の "for SALES" タグスタイル (PC + SP 共通) */
.hero__screen-url {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}
.hero__screen-url-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.125rem 0.5rem !important;
  background: linear-gradient(135deg, #0556A0, #096FC8) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.6875em !important;
  letter-spacing: 0.14em !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}

@media (min-width: 901px) {
  /* PC FV ボタン: プライマリを青グラデーションでポップさせる (霞んで見える問題対策) */
  body.home .hero__actions .btn--primary {
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px -8px rgba(9,111,200,0.45), 0 6px 16px rgba(9,111,200,0.25) !important;
  }
  body.home .hero__actions .btn--primary::before {
    background: rgba(255,255,255,0.18) !important;
  }
  body.home .hero__actions .btn--secondary {
    background: rgba(255,255,255,0.92) !important;
    color: #111 !important;
    border: 1.5px solid #111 !important;
    box-shadow: 0 4px 12px rgba(10,15,30,0.08) !important;
  }
  /* チャットボット位置は元のCSS (右下) に戻す — オーバーライドなし */
}


/* === Mobile UI additions (theme-level, 上書きCSS) === */

/* ============================================
   GLOBAL (all viewports): ユーザー要求で全環境で非表示にする要素
   ============================================ */
.flow-step__milestone,
.flow-step__milestone--final { display: none !important; }

/* ============================================
   for-sales LP Hero V2 — Sansan風 (左コピー+CTA / 右イラスト)
   ============================================ */
/* 1) Hero V2 全体は濃紺グラデアニメ (背景レイヤー、画面の縁に出る) */
.hero-v2 {
  position: relative !important;
  min-height: 100vh !important;
  height: auto !important;
  background:
    radial-gradient(circle 50vw at 0% 0%,   rgba(77, 175, 255, 0.55), transparent 50%),
    radial-gradient(circle 55vw at 100% 0%, rgba(127, 97, 255, 0.40), transparent 50%),
    radial-gradient(circle 60vw at 100% 100%, rgba(25, 118, 210, 0.65), transparent 50%),
    radial-gradient(circle 45vw at 0% 100%,  rgba(5, 86, 160, 0.55), transparent 50%),
    radial-gradient(circle 35vw at 50% 50%,  rgba(255, 107, 91, 0.18), transparent 60%),
    #0A2A6B !important;
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100% !important;
  animation: heroV2BgFlow 22s ease-in-out infinite alternate !important;
  color: #0A2A6B !important;
  overflow: hidden !important;
  padding: 6rem 4rem 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
@keyframes heroV2BgFlow {
  0%   { background-position: 0% 0%,   100% 0%, 100% 100%, 0% 100%, 50% 50%, 0 0; }
  50%  { background-position: 60% 40%, 40% 60%, 50% 70%,  50% 30%, 70% 30%, 0 0; }
  100% { background-position: 100% 100%, 0% 100%, 0% 0%,  100% 0%, 30% 70%, 0 0; }
}
/* ヒーロー全体のvignette: 中央が明るく周辺がぐるっと濃く (一体感ある立体感) */
/* vignette 削除 (ベタ色分けに変更したため不要) */

/* 微細な装飾背景 */
.hero-v2__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.hero-v2__bg-soft {
  position: absolute !important;
  top: 1.25rem !important;     /* ヘッダー top と一致 */
  right: 1rem !important;
  bottom: 1rem !important;
  left: 1rem !important;       /* ぎりぎり */
  background: #FFFFFF !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 60px -12px rgba(0,0,0,0.32),
    0 10px 24px -6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ヘッダーピルの幅を白パネルに合わせて広げる (for-sales のみ) */
body.page-id-374 .header,
body.page-template-page-for-sales .header {
  width: calc(100% - 2rem) !important;       /* 左右 1rem マージン (白パネルと一致) */
  max-width: none !important;                 /* max-width 制限を解除 */
}

/* === 2カラム split === */
.hero-v2__split {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  align-items: center !important;
  gap: 3rem !important;
  max-width: 86rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* === 左カラム === */
.hero-v2__left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  max-width: 42rem !important;
}

.hero-v2__eyebrow {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.30em !important;
  color: rgba(10,42,107,0.55) !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

/* メインタイトル: 大きく青い日本語コピー */
.hero-v2__title {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2.25rem, 4.6vw, 4.5rem) !important;
  line-height: 1.30 !important;
  letter-spacing: 0.01em !important;
  color: #0A2A6B !important;
  margin: 0 !important;
  text-align: left !important;
}
.hero-v2__title-line {
  display: block !important;
  white-space: nowrap !important;
}
/* PC では line--a (営業を) と line--b (動かすのは、) を inline 接続して
   元の 1 行表示「営業を動かすのは、」を維持 (SP のみ 3 行化) */
.hero-v2__title-line--a,
.hero-v2__title-line--b {
  display: inline !important;
}
.hero-v2__title-accent {
  color: #1976D2 !important;
  position: relative !important;
}
.hero-v2__title-period {
  display: inline-block !important;
  color: #FF6B5B !important;
}

/* 説明文 */
.hero-v2__lead {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.04em !important;
  color: #3B4754 !important;
  margin: 0 !important;
}
.hero-v2__lead strong { font-weight: 700 !important; color: #0A2A6B !important; }

/* === 資料DL青カード === */
.hero-v2__doc-cta {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: stretch !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 30rem !important;
  background: linear-gradient(135deg, #4DAFFF 0%, #1976D2 100%) !important;
  color: #fff !important;
  border-radius: 18px !important;
  padding: 1rem 1.25rem 1rem 1rem !important;
  text-decoration: none !important;
  box-shadow:
    0 22px 44px -10px rgba(25,118,210,0.55),
    0 8px 18px -4px rgba(25,118,210,0.30),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-v2__doc-cta:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 44px -8px rgba(25,118,210,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.hero-v2__doc-thumb {
  width: 96px !important;
  height: 100px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)) !important;
  align-self: center !important;
}
.hero-v2__doc-thumb svg {
  width: 100% !important;
  height: 100% !important;
  transform-origin: center !important;
  animation: hv2DocWobble 3.2s ease-in-out infinite !important;
}
@keyframes hv2DocWobble {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
.hero-v2__doc-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 0.625rem !important;
  min-width: 0 !important;
  padding: 0.25rem 0 !important;
}
.hero-v2__doc-text {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.125rem !important;
}
.hero-v2__doc-eyebrow {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: rgba(255,255,255,0.95) !important;
}
.hero-v2__doc-title {
  font-family: "Plus Jakarta Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
.hero-v2__doc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #1976D2 !important;
  background: #fff !important;
  padding: 0.625rem 1.125rem !important;
  border-radius: 999px !important;
  width: 100% !important;
  align-self: stretch !important;
  margin-top: 0 !important;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18) !important;
}
.hero-v2__doc-arrow {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: 0.875rem !important;
}

/* === 大きな白お問い合わせボタン === */
.hero-v2__contact-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 30rem !important;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.04em !important;
  padding: 1.125rem 1.75rem !important;
  background: #fff !important;
  color: #0A2A6B !important;
  border: 1.5px solid rgba(10,42,107,0.18) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow:
    0 12px 28px -8px rgba(10,42,107,0.18),
    0 4px 10px -2px rgba(10,42,107,0.08) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, border-color 0.3s !important;
}
.hero-v2__contact-label {
  font-family: inherit !important;
  display: inline-block !important;
}
.hero-v2__contact-cta:hover {
  transform: translateY(-2px) !important;
  border-color: #1976D2 !important;
  box-shadow: 0 12px 26px -4px rgba(25,118,210,0.20) !important;
}

/* (右カラムスタイルは maestra セクションで定義) */


/* === 球体イラスト: 青系トンマナ + 立体ポップ + 球体回転 + 波形 + オーブ呼吸 === */
.hero-v2__right {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
/* 球体エリアの背景ハローは削除 (白パネル上にそのまま乗せる) */
.hero-v2__illust {
  width: 100% !important;
  max-width: 620px !important;
  height: auto !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 40px 50px rgba(10,42,107,0.20))
    drop-shadow(0 16px 24px rgba(25,118,210,0.14)) !important;
  animation: hv2IllustFloat 7s ease-in-out infinite !important;
}
@keyframes hv2IllustFloat {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-10px) translateZ(0); }
}

/* (経度·緯度ワイヤーは削除済み — ドット粒子球体に変更) */




/* 装飾粒子: 点滅 */
.hv2-particles circle {
  animation: hv2ParticleTwinkle 3s ease-in-out infinite !important;
}
.hv2-particles circle:nth-child(2) { animation-delay: 0.4s !important; }
.hv2-particles circle:nth-child(3) { animation-delay: 0.8s !important; }
.hv2-particles circle:nth-child(4) { animation-delay: 1.2s !important; }
.hv2-particles circle:nth-child(5) { animation-delay: 1.6s !important; }
.hv2-particles circle:nth-child(6) { animation-delay: 2.0s !important; }
@keyframes hv2ParticleTwinkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.hv2-particles circle {
  transform-box: fill-box !important;
  transform-origin: center !important;
}



/* === AIが「喋ってる」連続変形する音声波 (Maestra風 smooth morphing) === */
.hv2-ai-talk {
  transform-origin: 290px 270px !important;
  transform-box: fill-box !important;
}
.hv2-talk-aura {
  transform-origin: center !important;
  transform-box: fill-box !important;
  animation: hv2AuraPulse 3.2s ease-in-out infinite !important;
}
@keyframes hv2AuraPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.hv2-wave-line {
  /* 控えめな発光 (BtoB SaaS風クリーン) */
  filter: drop-shadow(0 0 2px rgba(25,118,210,0.18)) !important;
}


/* === BtoB UI カード CSS (transform は SVG attribute で配置、フロートは SMIL でアニメ) === */
/* CSS transform animation を使うと SVG <g transform=""> が上書きされてカードが重なるため不使用 */

/* チェックマーク登場アニメ (translate ベースではない scale なので OK だが、SVG <g> 内なので SMIL も検討) */
.hv2-form-check {
  transform-box: fill-box !important;
  transform-origin: center !important;
}

/* === スマホ専用 mobile-bottom (PCではdisplay:none) === */
.hero-v2__mobile-bottom { display: none; }
/* === スマホ用 hero-text wrapper (PCでは透明化、 mobile では flex container) === */
.hero-v2__hero-text { display: contents; }
/* === スマホ専用 scroll-cue (PCでは非表示) === */
.hero-v2__scroll-cue { display: none; }

/* === タブレット & SP (PC ≥1101px は完全に影響なし) === */
@media (max-width: 1100px) {
  /* SP: 既存の hero-v2__bg-soft (PC 用の白い soft 影レイヤー、 y=20-796) は
     SP では .hero-v2__split (白カード) と二重に見える「白の重なり」原因のため非表示 */
  .hero-v2 .hero-v2__bg-soft {
    display: none !important;
  }
  /* SP: 本体トップ「Update business with AI」と同じトンマナ。
     外側=濃紺グラデ、 内側=白い角丸カード。
     ★カードは画面トップ近く (y=6) から下端まで配置し、 ヘッダー (y=12-58) と
     重なる位置まで上に延びる。 これにより「白がヘッダーの下まで覆って一体化」+
     カード上端の rounded 角は navy 6px 帯で見えるので 立体感も両立 */
  .hero-v2 {
    padding: 0.375rem 1rem 1rem !important;  /* top 6px の極薄 navy 帯のみ */
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }
  /* split = 白い角丸カード: 全 4 角 rounded で立体感は box-shadow のみで表現。
     カードはヘッダー上部とオーバーラップするので、 内側 padding-top は
     ヘッダー (y=58) よりも下に content を逃がす十分な値を設定 */
  .hero-v2__split {
    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow:
      0 38px 90px -22px rgba(5, 20, 60, 0.55),
      0 16px 32px -10px rgba(5, 20, 60, 0.22) !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* top 4.5rem = 72px → カード上端 y=6 + 72 = 78 で content 開始。
       ヘッダー (y=12-58) より十分下、 重なり回避 */
    padding: 4.5rem 2rem 1.75rem !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* SP: AIBUILDERZ ヘッダーは元の半透明白 + blur + shadow の立体感を維持。
     白カードとは分離 (上に navy gap) されて浮かぶ */
  /* hero-text = eyebrow + title + scroll-cue で About 上の領域 全面 を活用
     - eyebrow: 最上部
     - title: flex-grow:1 で 中間スペースを完全に埋める (内部で縦中央配置)
     - scroll-cue: 最下部 */
  .hero-v2__hero-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex: 1 !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  /* title は flex-grow:1 で 中間スペース全てを占有。 内部 line は space-evenly で
     等間隔に展開し、 About 線まで上下の余白を埋める */
  .hero-v2 .hero-v2__title {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
    padding: 0.5rem 0 0 !important;
  }
  /* SP: スクロールダウン指示 (カード右端寄せ、 ボタンより上に配置でボタン非干渉) */
  .hero-v2 .hero-v2__scroll-cue {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.375rem !important;
    position: absolute !important;
    right: 0.375rem !important;     /* カード右端ほぼピッタリに寄せる */
    bottom: 11rem !important;       /* ボタン上端 (628px) より上に配置 */
    margin-top: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
  .hero-v2__scroll-cue-label {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.30em !important;
    color: rgba(10, 26, 74, 0.55) !important;
    text-transform: uppercase !important;
    writing-mode: vertical-rl !important;       /* 縦書きで右下にコンパクト */
    transform: rotate(180deg) !important;        /* 上→下に読める向き */
  }
  .hero-v2__scroll-cue-line {
    display: block !important;
    width: 1px !important;
    height: 40px !important;
    background: linear-gradient(180deg,
      rgba(10, 26, 74, 0.0) 0%,
      rgba(10, 26, 74, 0.45) 30%,
      rgba(10, 26, 74, 0.45) 70%,
      rgba(10, 26, 74, 0.0) 100%) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .hero-v2__scroll-cue-line::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 14px !important;
    background: #0556A0 !important;
    animation: hv2ScrollCue 2s ease-in-out infinite !important;
  }
  @keyframes hv2ScrollCue {
    0%   { transform: translateY(-14px); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
  }
  /* 左カラム: 上端=タイトル / 下端=About+ボタン で space-between */
  .hero-v2__left {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 0 !important;
  }
  /* SVG内のUIカード (mailer/caller/analyzer/form/analytics/progress) は
     スマホで全部非表示。球体本体と中央波形だけにして「散らばり」を解消 */
  .hv2-card,
  .hv2-connections,
  .hv2-stars-deco,
  .hv2-particles { display: none !important; }
  /* 球体イラスト自体は小さくして FV を圧迫しない */
  .hero-v2__illust {
    max-width: 130px !important;
    width: 130px !important;
  }
  .hero-v2__right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    order: -1 !important;
  }
  /* スマホでは旧CTAカード (青背景の3分でわかる, 無料相談ボタン) を完全非表示 */
  .hero-v2__doc-cta { display: none !important; }
  .hero-v2__contact-cta { display: none !important; }

  /* スマホ: アニメ不要 → 球体イラストエリア完全非表示 */
  .hero-v2__right { display: none !important; }
  /* スマホ: lead 非表示 (About が訴求軸として代替) */
  .hero-v2 .hero-v2__lead { display: none !important; }
  .hero-v2 .hero-v2__doc-cta,
  .hero-v2 .hero-v2__contact-cta { display: none !important; }
  /* スマホ専用: 本体トップ風 mobile-bottom (About + 2ボタン)
     白カード下部に配置 (親指で押しやすいゾーン) */
  .hero-v2 .hero-v2__mobile-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;          /* flex parent で下に push */
    margin-bottom: 0 !important;
    text-align: left !important;
    padding-top: 1.75rem !important;
    /* 本体トップ風: 薄いグラデーション divider */
    border-top: 0 !important;
    position: relative !important;
  }
  .hero-v2 .hero-v2__mobile-bottom::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(10,42,107,0.14) 12%,
      rgba(10,42,107,0.14) 88%,
      transparent 100%) !important;
  }
  .hero-v2__mobile-about { text-align: left !important; }
  /* "— ABOUT" eyebrow: 視認性を上げる為に少し濃いめ */
  .hero-v2__mobile-about-label {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: rgba(10, 42, 107, 0.60) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
  }
  /* About body は確実に読めるよう不透明度上げる + 文字サイズ拡大 */
  .hero-v2__mobile-about-body {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
    color: #0A1A4A !important;                /* 不透明な濃紺 = 高コントラスト */
    text-align: left !important;
    padding-right: 0.25rem !important;
  }
  /* "— GET STARTED" 風の小さなラベル (本体トップとの統一感) は HTML 改修なしで
     mobile-cta の前に ::before pseudo で実現 */
  .hero-v2__mobile-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    width: 100% !important;
    position: relative !important;
  }
  .hero-v2__mobile-cta::before {
    content: '— GET STARTED' !important;
    display: block !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: rgba(10, 26, 74, 0.40) !important;
    text-transform: uppercase !important;
    margin-bottom: 0.125rem !important;
  }
  .hero-v2__mobile-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    padding: 1rem 1.5rem !important;
    border-radius: 999px !important;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    width: 100% !important;
  }
  .hero-v2__mobile-btn--primary {
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    color: #fff !important;
    box-shadow:
      0 14px 32px -8px rgba(9, 111, 200, 0.50),
      0 6px 16px rgba(9, 111, 200, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    border: none !important;
  }
  .hero-v2__mobile-btn--ghost {
    background: #fff !important;
    color: #0556A0 !important;
    border: 2px solid #0556A0 !important;
    box-shadow: 0 4px 14px -4px rgba(10, 42, 107, 0.12) !important;
  }
  .hero-v2__mobile-btn-arrow {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
  }

  /* スマホでハンバーガーメニューも表示 (ユーザー要望で復活) */
  /* 古い center 寄せ rule は撤廃 (上の flex+space-between+left 寄せ を維持) */
  .hero-v2__left {
    gap: 0.5rem !important;
  }
  .hero-v2__title {
    text-align: left !important;
    /* SP: Zen Kaku Gothic New 900 で太く厚く。本体トップ "Update business with AI"
       と同じ訴求力を Japanese で再現。 全行 共通フォント、 各行サイズは + ルール */
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
    font-weight: 900 !important;
    color: #0A1A4A !important;
    line-height: 1.10 !important;
    letter-spacing: -0.045em !important;
    margin: 0 !important;
    /* line a/b/c の個別サイズに優先させるためベース font-size は控えめ */
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }
  /* SP: 3 行 block 化 (line--a と line--b の PC inline ルールを上書き) */
  .hero-v2__title-line,
  .hero-v2__title-line--a,
  .hero-v2__title-line--b {
    display: block !important;
    white-space: nowrap !important;
    color: #0A1A4A !important;
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
    font-weight: 900 !important;
  }
  /* line a (営業を) 3 文字 → 太く大きく。 12vw@375 = 45px (line c より少し大)
     ユーザー指示で "営業を動かすのは" 部分をもう少し大きく */
  .hero-v2__title .hero-v2__title-line--a {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;     /* 12vw@375 = 45px */
    line-height: 1.04 !important;
  }
  /* line b (動かすのは、) 6 文字 → line a と同サイズで連続感 */
  .hero-v2__title .hero-v2__title-line--b {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
    line-height: 1.04 !important;
  }
  /* line c (AIエージェント) accent gradient: 視線誘導の山。 line a/b より大きく */
  .hero-v2__title .hero-v2__title-line + .hero-v2__title-line:not(.hero-v2__title-line--b) {
    font-size: clamp(2.5rem, 11.6vw, 3.875rem) !important;  /* 11.6vw@375 = 43.5px */
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }
  /* accent span: フォント明示 + gradient シフトアニメーションで生命感 */
  .hero-v2__title-accent {
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif !important;
    font-weight: 900 !important;
    background: linear-gradient(110deg,
      #0556A0 0%,
      #1976D2 25%,
      #3FA9F5 50%,
      #1976D2 75%,
      #0556A0 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 50% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    animation: hv2AccentShimmer 5.5s ease-in-out infinite !important;
  }
  @keyframes hv2AccentShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .hero-v2__title-accent {
    background: linear-gradient(180deg, #3FA9F5 0%, #0556A0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* eyebrow も白カード内なので 濃紺ベースのグレー */
  .hero-v2__eyebrow {
    color: rgba(10, 26, 74, 0.55) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
  }
  .hero-v2__lead { text-align: center !important; font-size: 0.75rem !important; line-height: 1.65 !important; }
  .hero-v2__lead br { display: none !important; }
  .hero-v2__eyebrow { font-size: 0.625rem !important; letter-spacing: 0.20em !important; }
  .hero-v2__doc-cta { max-width: 100% !important; padding: 0.625rem 0.875rem !important; gap: 0.625rem !important; border-radius: 14px !important; }
  .hero-v2__doc-thumb { width: 60px !important; height: 56px !important; }
  .hero-v2__doc-eyebrow { font-size: 0.625rem !important; }
  .hero-v2__doc-title { font-size: 0.875rem !important; }
  .hero-v2__doc-btn { font-size: 0.7rem !important; padding: 0.35rem 0.7rem !important; }
  .hero-v2__contact-cta { max-width: 100% !important; font-size: 0.875rem !important; padding: 0.8125rem 1rem !important; }

  /* 残像対策: 旧hero系の要素を全部完全非表示 (FVを汚染しない) */
  .hero--legacy,
  .hero__device,
  .hero__screen,
  .hero__scene,
  .hero__btn-primary,
  .hero__btn-secondary,
  .hero__form,
  .hero__tags,
  .hero__title-row,
  .hero__sub,
  .hero__grid,
  .hero__copy,
  .hero__device-stage,
  .hero__pop,
  .hero__chat,
  .hero__chat-bubble,
  .hero__screen-bar,
  .hero__screen-body,
  .hero__screen-cursor,
  .hero__scene-tab,
  .hero__btn,
  #top-legacy {
    display: none !important;
    visibility: hidden !important;
  }
  /* hero-v2 (新) の主要要素の visibility だけ確保 (display は触らない) */
  .hero-v2 .hero-v2__title,
  .hero-v2 .hero-v2__eyebrow { visibility: visible !important; }
}
@media (max-width: 640px) {
  /* SP: top 6px の極薄 navy 帯のみ。 カードが header と overlap してヘッダー
     の下まで白背景が伸びる (ユーザー要望) */
  .hero-v2 {
    padding: 0.375rem 1rem 1rem !important;
  }
  .hero-v2__split { gap: 0.5rem !important; }
  .hero-v2__left { gap: 0.5rem !important; }
  .hero-v2__title {
    /* 7.6vw@375 = 28.5px。 line2 は + ルールで上書きされる */
    font-size: clamp(1.75rem, 7.6vw, 2.75rem) !important;
    line-height: 1.20 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
    font-weight: 900 !important;
  }
  .hero-v2__lead { font-size: 0.75rem !important; line-height: 1.65 !important; }
  .hero-v2__eyebrow { font-size: 0.625rem !important; letter-spacing: 0.18em !important; }
  .hero-v2__illust { max-width: 180px !important; }
  .hero-v2__doc-cta { padding: 0.5rem 0.75rem !important; gap: 0.5rem !important; border-radius: 12px !important; }
  .hero-v2__doc-thumb { width: 48px !important; height: 44px !important; }
  .hero-v2__doc-eyebrow { font-size: 0.5625rem !important; }
  .hero-v2__doc-title { font-size: 0.8125rem !important; }
  .hero-v2__doc-btn { font-size: 0.65rem !important; padding: 0.3rem 0.6rem !important; }
  .hero-v2__contact-cta { font-size: 0.8125rem !important; padding: 0.6875rem 0.875rem !important; }
}



/* ============================================
   Mobile UI v3 (hamburger + drawer + page-aware footer CTA + fullscreen modal)
   ※ <=1100px のみ表示。PCには一切影響しない。
   ============================================ */

/* ---- 全ページ共通: ロゴ表記の統一 (front-page 以外でも同じ太字+ドット) ---- */
.header__logo {
  font-family: var(--f-en);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text);
  transition: opacity .3s;
}
.header__logo:hover { opacity: 0.6; }
.header__logo::after {
  content: '';
  width: 0.4em; height: 0.4em;
  background: var(--c-accent, #FF6B35);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* default: hide everywhere — only @media (max-width:1100px) で復活 */
.m-menu-toggle,
.m-drawer,
.m-bottom-cta { display: none; }
.m-modal { display: none; }

@media (max-width: 1100px) {
  /* ---- ヘッダーピル内のハンバーガー (header__nav 末尾に注入) ---- */
  .m-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    margin-left: 0;
    padding: 0;
    border: 1px solid rgba(17, 17, 17, 0.10);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
  }
  .m-menu-toggle:active { transform: scale(0.94); }
  .m-menu-toggle__bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: #111;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .m-menu-toggle.is-open .m-menu-toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .m-menu-toggle.is-open .m-menu-toggle__bar:nth-child(2) { opacity: 0; }
  .m-menu-toggle.is-open .m-menu-toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ヘッダーピル自体のモバイル調整 (大幅にコンパクト化) */
  .header {
    width: calc(100% - 1.5rem) !important;
    padding: 0.4375rem 0.4375rem 0.4375rem 1.25rem !important;
    top: 0.75rem !important;
  }
  .header.scrolled {
    padding: 0.4375rem 0.4375rem 0.4375rem 1.125rem !important;
  }
  .header__logo > span:first-child,
  .header__logo {
    font-size: 0.9375rem !important;
  }
  .header__nav { gap: 0 !important; }

  /* ---- 全画面ドロワー (v4: full-screen + 階層化 + リッチアニメ) ---- */
  .m-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    pointer-events: none;
  }
  .m-drawer.is-open { visibility: visible; pointer-events: auto; }
  .m-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17,17,17,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .35s ease;
  }
  .m-drawer__panel {
    /* "Floating card" 設計: フルスクリーンだが端を丸めて立体感を出す */
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    width: auto;
    height: auto;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
    border-radius: 28px;
    box-shadow:
      0 30px 80px -20px rgba(10, 15, 30, 0.35),
      0 12px 32px -8px rgba(9, 111, 200, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    /* 初期: 下からスライドアップ + 縮小 + 微回転 */
    transform: translateY(40px) scale(0.94) rotate(-1deg);
    opacity: 0;
    transform-origin: 100% 0%;
    transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .35s ease, border-radius .4s ease;
    display: flex;
    flex-direction: column;
    padding: 22px 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ヘッダー */
  .m-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 22px;
    margin-bottom: 8px;
  }
  .m-drawer__brand {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: #111;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .m-drawer__brand::after {
    content: '';
    width: 0.4em; height: 0.4em;
    background: var(--c-accent, #FF7669);
    border-radius: 50%;
    display: inline-block;
  }
  .m-drawer__close {
    width: 44px;
    height: 44px;
    border: 1px solid #E6E6E6;
    background: #fff;
    border-radius: 999px;
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .15s ease;
  }
  .m-drawer__close:active { transform: scale(0.94); }

  /* ナビ全体 */
  .m-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
  }

  /* グループ (サービス展開) */
  .m-drawer__group {
    border-bottom: 1px solid #EFEFEF;
  }
  .m-drawer__group-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 18px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    color: #111;
  }
  .m-drawer__group-caret {
    display: inline-flex;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
    color: #096FC8;
  }
  .m-drawer__group.is-expanded .m-drawer__group-caret { transform: rotate(180deg); }
  .m-drawer__group-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m-drawer__group.is-expanded .m-drawer__group-panel {
    max-height: 480px; /* 余裕を持たせて */
  }
  .m-drawer__sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 8px;
    border-top: 1px solid #F4F4F4;
    text-decoration: none;
    color: #111;
  }
  .m-drawer__sublink:first-child { border-top: 1px solid transparent; }
  .m-drawer__sublink-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0556A0, #096FC8);
    color: #fff;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .m-drawer__sublink--soon .m-drawer__sublink-num {
    background: #E6E6E6;
    color: #999;
  }
  .m-drawer__sublink-body {
    display: grid;
    gap: 3px;
  }
  .m-drawer__sublink-name {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: #111;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .m-drawer__sublink-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    color: #999;
    background: #F4F4F4;
    padding: 2px 8px;
    border-radius: 999px;
  }
  .m-drawer__sublink-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.55;
  }
  .m-drawer__sublink--soon { opacity: 0.6; pointer-events: none; }

  /* 直接遷移リンク */
  .m-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    text-decoration: none;
    color: #111;
    border-bottom: 1px solid #EFEFEF;
  }
  .m-drawer__link-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
  }
  .m-drawer__link-arrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #096FC8;
    font-size: 1.1rem;
    transition: transform .2s ease;
  }
  .m-drawer__link:active .m-drawer__link-arrow { transform: translateX(4px); }

  /* CTAボタン */
  .m-drawer__cta {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
  }
  .m-drawer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 999px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: #fff;
    color: #096FC8;
    border: 1.5px solid #096FC8;
    transition: opacity .2s ease;
  }
  .m-drawer__btn--accent {
    background: linear-gradient(135deg, #0556A0, #096FC8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(9,111,200,0.30);
  }
  .m-drawer__btn:active { opacity: 0.78; }

  /* スクロールロック */
  html.m-drawer-locked,
  html.m-drawer-locked body { overflow: hidden !important; }

  /* ---- 画面下固定 CTA (variant: full / single / hidden) ---- */
  .m-bottom-cta {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #EFEFEF;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.04);
    z-index: 1000;
  }
  .m-bottom-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 14px;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    background: #fff;
    color: #096FC8;
    border: 1.5px solid #096FC8;
    transition: opacity .2s ease;
  }
  .m-bottom-cta__btn--accent {
    background: linear-gradient(135deg, #0556A0, #096FC8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(9,111,200,0.28);
  }
  .m-bottom-cta__btn:active { opacity: 0.78; }

  /* CTAバー分のスペーサー (CTAが出るページだけ body 末尾に余白) */
  body.has-m-cta { padding-bottom: 76px !important; }
  body.has-m-cta .footer { padding-bottom: 0 !important; }

  /* ---- キラキラ装飾の for-sales 固定フッターボタン ---- */
  .m-bottom-cta__btn--sparkle {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    box-shadow: 0 6px 20px rgba(9,111,200,0.45), 0 0 0 1px rgba(255,255,255,0.10) inset !important;
    animation: sparkleGradient 5s ease-in-out infinite !important;
    background-size: 200% 200% !important;
  }
  @keyframes sparkleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  /* スイープライト */
  .m-bottom-cta__btn--sparkle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: sparkleSweep 3.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes sparkleSweep {
    0%, 30% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
  }
  /* キラキラ星 */
  .m-bottom-cta__sparkle {
    position: absolute;
    width: 4px; height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff, 0 0 12px rgba(255,255,255,0.8);
    pointer-events: none;
    opacity: 0;
  }
  .m-bottom-cta__sparkle:nth-child(1) { top: 18%; left: 12%; animation: sparkleTwinkle 2.4s ease-in-out infinite 0s; }
  .m-bottom-cta__sparkle:nth-child(2) { top: 64%; left: 78%; animation: sparkleTwinkle 2.4s ease-in-out infinite .6s; }
  .m-bottom-cta__sparkle:nth-child(3) { top: 32%; right: 18%; animation: sparkleTwinkle 2.4s ease-in-out infinite 1.2s; }
  .m-bottom-cta__sparkle:nth-child(4) { top: 78%; left: 28%; animation: sparkleTwinkle 2.4s ease-in-out infinite 1.8s; }
  @keyframes sparkleTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  .m-bottom-cta__btn--sparkle .m-bottom-cta__lbl {
    position: relative;
    z-index: 2;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
  }
  .m-bottom-cta--single { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .m-bottom-cta--single .m-bottom-cta__btn { height: 56px; }

  /* triple-cta: section の overflow を縦方向は visible にして「おすすめ」スタンプを切れないように */
  body section.triple-cta,
  body .triple-cta {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  body .triple-cta__inner {
    overflow: visible !important;
  }
  body .triple-cta__grid {
    overflow-y: visible !important;
    padding-top: 1rem !important; /* 上にはみ出すスタンプのスペースを確保 */
  }
  /* おすすめスタンプ: 安定した上部中央リボン (overflow に依存しない) */
  body .triple-cta__card--feature {
    padding-top: 3rem !important; /* リボン分の余白を確保 */
    position: relative !important;
  }
  body .triple-cta__card--feature::before {
    position: absolute !important;
    top: 0.75rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    white-space: nowrap !important;
    background: #FFC93C !important;
    color: #111 !important;
    padding: 0.3125rem 0.875rem !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
  }
  body .triple-cta__card {
    overflow: visible !important;
  }

  /* ---- トップページ専用: Hero "Update business with AI" を 3行構成で大胆に拡大 ----
     "Update" / "business" / "with AI." の3行に分けて、各単語を 1 行ずつ大きく見せる。
     line1 (Update business) の中で 7番目の char (space) を display:block で消すと
     "business" 以降が次の行に流れて 3 行構成になる。 */
  body.home .hero__title {
    /* 各単語(最長 "business" 8 chars)が 346px に収まる font-size。
       bold sans-serif で約 0.55em/char → 4.4em。
       346 / 4.4 ≈ 78px が上限。18vw clamp で 60-80px に。 */
    font-size: clamp(3.25rem, 18vw, 5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
    margin-bottom: 1.25rem !important;
  }
  /* 各 .line は block ・自然折り返し可 */
  body.home .hero__title .line {
    display: block !important;
    white-space: normal !important;
    line-height: 1.02 !important;
  }
  body.home .hero__title .char {
    display: inline-block !important;
  }
  /* line1 の 7 番目の char (Update と business の間の空白) を不可視 block 化 →
     "business" 以降が次の行に強制改行。これで line1 が "Update" / "business" の 2 行に分かれる */
  body.home .hero__title .line:first-child .char:nth-of-type(7) {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  /* line2 ("with AI.") はそのまま 1 行で大きく */
  body.home .hero__title .line:nth-child(2) {
    margin-top: 0 !important;
  }
  /* hero__info の Statement カラムは隠す (about/button だけ表示) */
  body.home .hero__info > .hero__info-block:nth-child(1) { display: none !important; }
  body.home .hero__info {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding-top: 1rem !important;
  }
  body.home .hero__info-text--sub { font-size: 0.8125rem !important; line-height: 1.7 !important; }

  /* ---- かすんで見える問題 (reveal class opacity:0 stuck) を一括解消 ----
     IntersectionObserver が発火しない / 発火タイミング遅延の保険として、
     スマホでは全ての .reveal を強制表示 (アニメより視認性優先) */
  body .reveal,
  body .reveal.delay-1,
  body .reveal.delay-2,
  body .reveal.delay-3,
  body .reveal.delay-4 {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  /* triple-cta カードもしっかり見える濃さに (rgba 透過 8% → 14%) */
  body .triple-cta__card {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.28) !important;
  }

  /* ドロワーのリンク/ボタン/ヘッドのアニメは後段の body 接頭辞ルールに集約 (重複削除済) */
}

/* PCでは絶対表示しない (念のため二重防御) */
@media (min-width: 1101px) {
  .m-menu-toggle,
  .m-drawer,
  .m-bottom-cta { display: none !important; }
}

/* ============================================
   for-lp (AI LP・HP制作) ページ SP 専用 修正
   - 固定 bottom CTA を非表示 (FV 内のボタンと重複・かぶさり)
   - FV 白カードの content を中央寄せ → 上寄せに変更し empty space 解消
   - FV 白カードのpadding-bottom を確保
   ============================================ */
@media (max-width: 1100px) {
  /* m-bottom-cta はカード内 CTA と重なる為 非表示 (page-id-469 = for-lp) */
  body.page-id-469 .m-bottom-cta,
  body.page-template-page-for-lp .m-bottom-cta {
    display: none !important;
  }
  body.page-id-469.has-m-cta,
  body.page-template-page-for-lp.has-m-cta {
    padding-bottom: 0 !important;
  }
  /* FV 白カード: 中央寄せをやめて上寄せに → 上部の巨大な空白を解消 */
  body.page-id-469 .lp-hero__inner,
  body.page-template-page-for-lp .lp-hero__inner {
    justify-content: flex-start !important;
    padding: 3rem 1.5rem 1.75rem !important;
  }
  /* FV 自体は header と同じ 16px (1rem) で左右揃え + 下端 16px */
  body.page-id-469 .lp-hero,
  body.page-template-page-for-lp .lp-hero {
    padding: 4.5rem 1rem 1rem !important;
  }
}

/* ============================================
   全画面モーダル (m-modal) — meeting/document/inquiry フォーム用
   モバイルもPCも使う。フォーム送信を「全画面に集中」させるUI。
   ============================================ */
.m-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.m-modal.is-open { display: block; }
.m-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.m-modal.is-open .m-modal__backdrop { opacity: 1; }
.m-modal__panel {
  position: absolute;
  inset: 0;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  transform: translateY(24px);
  opacity: 0;
  transition: opacity .35s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* body接頭辞 + !important で他の transform/opacity ルールに勝たせる */
body .m-modal.is-open .m-modal__panel {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
body .m-modal.is-open .m-modal__backdrop {
  opacity: 1 !important;
}
.m-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #EFEFEF;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.m-modal__brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #111;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.m-modal__brand::after {
  content: '';
  width: 0.4em; height: 0.4em;
  background: var(--c-accent, #FF6B35);
  border-radius: 50%;
  display: inline-block;
}
.m-modal__title {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #111;
  letter-spacing: 0.02em;
}
.m-modal__close {
  width: 40px;
  height: 40px;
  border: 1px solid #E6E6E6;
  background: #fff;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.m-modal__close:hover { background: #F4F4F4; }
.m-modal__close:active { transform: scale(0.94); }
.m-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  -webkit-overflow-scrolling: touch;
}
.m-modal__body > .doc-form-wrap,
.m-modal__body > .meeting-form-wrap,
.m-modal__body > .contact-form-wrap,
.m-modal__body > .sim-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  /* modal内では reveal アニメをスキップ */
  opacity: 1 !important;
  transform: none !important;
}

/* モーダル展開中は body スクロール禁止 */
html.m-modal-locked,
html.m-modal-locked body { overflow: hidden !important; }

/* モバイル時のサイズ調整 */
@media (max-width: 720px) {
  .m-modal__topbar { padding: 14px 16px; }
  .m-modal__body { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
  .m-modal__close { width: 38px; height: 38px; }
}

/* ---- インラインCTA: JSがフォーム位置に挿入。常時表示 (フォームは modal 内に移動済) ---- */
.m-inline-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  margin: 32px auto;
  max-width: 600px;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(10, 15, 30, 0.06);
}
.m-inline-cta__title {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  color: #111;
  letter-spacing: 0.02em;
  margin: 0;
}
.m-inline-cta__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  margin: 0;
}
.m-inline-cta__btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: linear-gradient(135deg, #0556A0, #096FC8);
  color: #fff;
  box-shadow: 0 8px 24px rgba(9,111,200,0.30);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
  border: none;
}
.m-inline-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(9,111,200,0.35); }
.m-inline-cta__btn:active { transform: translateY(0); }

/* ============================================
   グローバル: 横オーバー防止 (全ページ共通)
   ============================================ */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  /* WP管理バーを除外 (固定ナビが横はみ出すケース) */
  html { max-width: 100vw !important; }
  body > * { max-width: 100vw !important; }
}

/* ============================================
   Mobile レイアウト微調整 (各ページの圧縮を解消)
   ※ <=900px のみ。 PCには影響しない。
   ============================================ */
@media (max-width: 900px) {
  /* for-sales LP: hero タイトル拡大 + サブ拡大 (FV をもっと大きく見せる) */
  body .hero__title-row { white-space: normal !important; }
  body .hero__title {
    font-size: clamp(2rem, 9vw, 2.625rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em !important;
  }
  body .hero__sub {
    font-size: 0.9375rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.25rem !important;
  }
  /* hero copy も収まるように */
  body .hero__copy, body .hero__grid { width: 100% !important; max-width: 100% !important; }

  /* hero__tags: コンパクトな信頼バッジ風に再構成 (ボタン周辺の装飾) */
  body .hero__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    margin: 0.875rem 0 0 !important;
    justify-content: flex-start !important;
  }
  body .hero__tag {
    padding: 0.3125rem 0.625rem !important;
    background: rgba(9,111,200,0.08) !important;
    color: #096FC8 !important;
    border-radius: 999px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border: 1px solid rgba(9,111,200,0.15) !important;
  }

  /* hero__cta-row: ボタンを縦並び・全幅・中央に */
  body .hero__cta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  body .hero__cta-row a, body .hero__btn-primary, body .hero__btn-secondary {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 54px !important;
    padding: 0 1.5rem !important;
    border-radius: 999px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  body .hero__btn-primary {
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(9,111,200,0.32) !important;
  }
  body .hero__btn-secondary {
    background: #fff !important;
    color: #096FC8 !important;
    border: 1.5px solid #096FC8 !important;
  }

  /* hero device: モバイルでは完全非表示 (3D アニメの位置ズレが汚いため) */
  body .hero__device { display: none !important; }
  /* hero__form: 「資料のダウンロードはこちら」フォーム も モバイル非表示 (CTA ボタンで誘導) */
  body .hero__form { display: none !important; }
  body .hero__grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* for-sales LP の Hero: 自然なフロー + ゆとりある余白 (上にギュッ感解消)
     ※ hero-v2 (新デザイン) は :not で除外し、 mobile flex レイアウトを邪魔しない */
  body .hero:not(.hero-v2) {
    min-height: auto !important;
    display: block !important;
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }
  body .hero__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
  }
  body .hero__copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }
  body .hero__cta-row {
    margin-top: 0.75rem !important;
    padding-top: 0 !important;
  }
  /* trust/triple-cta などのwide containerも */
  body .section, body .trust, body .triple-cta, body .compare, body .pricing { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* ============================================
     for-sales LP 全体: 横オーバー防止 + 個別セクション修正
     ============================================ */
  /* セクション全体の padding 統一 */
  body .section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  body .section > *, body .section .sec-head, body .section > div { max-width: 100% !important; }

  /* persona-cta ボタン: **1行表示** に変更 (改行禁止) */
  body .persona-cta { padding: 0 1.25rem !important; }
  body .persona-cta__btn {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body .persona-cta__btn > span:first-child {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
  body .persona-cta__btn .arrow {
    flex-shrink: 0 !important;
    width: 1.375rem !important; height: 1.375rem !important;
    font-size: 0.8125rem !important;
  }

  /* ---- 全ての主要ボタンを 1 行に強制 (改行禁止) ----
     for-sales LP & top page 共通 */
  body .btn,
  body .persona-cta__btn,
  body .hero__btn-primary,
  body .hero__btn-secondary,
  body .triple-cta__card-btn,
  body .agent-card__btn,
  body .pricing__btn,
  body .compare__cell-cta,
  body .persona-card__btn,
  body .venture__cta,
  body .section__view-more,
  body .header__cta-sub,
  body .header__cta,
  body .cta__btn,
  body .resource-card__btn,
  body .mid-cta__btn,
  body .growth-step__cta {
    white-space: nowrap !important;
  }

  /* growth / PDCA セクション (04 — AIで最適化): モバイル用簡略 PDCA を表示 */
  body .growth {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* visual を復活させるが、複雑な SVG/arrows は非表示にして hub + 4cards だけ */
  body .growth__visual {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .pdca {
    width: 100% !important;
    max-width: 100% !important;
  }
  body .pdca__wheel {
    aspect-ratio: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    overflow: visible !important;
    background: transparent !important;
  }
  /* 複雑な SVG / 矢印 / 浮遊バブル は非表示 (モバイルでは情報過多) */
  body .pdca__svg,
  body .pdca__arrow,
  body .pdca__hub-cycle,
  body .pdca__bubble { display: none !important; }
  /* Hub: 大きな中央バッジ → カード形式に変換 */
  body .pdca__hub {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    padding: 1.25rem 1.25rem !important;
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    color: #fff !important;
    border-radius: 16px !important;
    text-align: center !important;
    box-shadow: 0 12px 28px rgba(9,111,200,0.30) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 88px !important;
  }
  body .pdca__hub-i, body .pdca__hub > div > .pdca__hub-i {
    font-size: 0.625rem !important;
    letter-spacing: 0.24em !important;
    opacity: 0.85 !important;
    margin-bottom: 0.25rem !important;
  }
  body .pdca__hub-t {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.25rem !important;
  }
  body .pdca__hub-sub {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    opacity: 0.92 !important;
  }
  /* 4 ステップカード: 2x2 グリッド */
  body .pdca__steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  }
  body .pdca__card {
    position: relative !important;
    width: 100% !important;
    translate: none !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin: 0 !important;
    padding: 0.875rem !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transform: none !important;
    scale: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
  }
  body .pdca__card.is-active {
    background: rgba(9,111,200,0.08) !important;
    border: 1.5px solid #096FC8 !important;
    scale: 1 !important;
  }
  body .pdca__card-i {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: #096FC8 !important;
  }
  body .pdca__card-k {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
  }
  body .pdca__card-sub {
    font-size: 0.5625rem !important;
    color: #666 !important;
  }
  body .growth__story {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }
  body .growth-step {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  }
  body .growth-step__num {
    font-size: 1.5rem !important;
  }
  body .growth-step__t { font-size: 1rem !important; line-height: 1.5 !important; }
  body .growth-step__d { font-size: 0.8125rem !important; line-height: 1.7 !important; }

  /* flow / process セクション (最短1週間で導入可能) */
  body .process__list, body .flow__list, body #flow .sec-content {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  body .process__item, body .flow__item {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
  }

  /* agents grid (AIが担う8つの仕事) — 横スワイプ 1カードビュー */
  body #action,
  body section:has(.agents__grid) {
    position: relative !important;
    overflow: visible !important;
  }
  body .agents__grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding: 0 1.25rem !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem 1.5rem !important;
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
  }
  body .agents__grid::-webkit-scrollbar { display: none !important; }
  body .agents__grid > .agent-card {
    flex: 0 0 84% !important;
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
    padding: 1.5rem 1.25rem !important;
    box-sizing: border-box !important;
  }
  /* swipe hint (上に⟶ SWIPE ラベル) */
  body section:has(.agents__grid)::before {
    content: '⟶ SWIPE';
    position: absolute;
    right: 1.25rem;
    top: 0.5rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #096FC8;
    opacity: 0;
    animation: swipeHintAgents 2.6s ease-in-out 0.8s 3;
    z-index: 2;
  }
  @keyframes swipeHintAgents {
    0%, 100% { opacity: 0; transform: translateX(8px); }
    30%, 70% { opacity: 0.9; transform: translateX(0); }
  }
  /* 最初のカードがちょい動くスワイプ示唆 */
  body .agents__grid > .agent-card:first-child {
    animation: swipeHintCardAgent 3.2s ease-in-out 1.4s 1;
  }
  @keyframes swipeHintCardAgent {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-24px); }
    65% { transform: translateX(0); }
  }

  /* coverage 系 */
  body .coverage__matrix { grid-template-columns: 1fr !important; }
  body .coverage__col { padding: 1.25rem !important; }

  /* compare table — v8: 表形式 (4列) + 中央列が当社で大きく (PC/SP両方の pricing-table style)
     列順: カテゴリ | 月額固定 | 【当社 AI Sales Agent (中央・大)】 | 成果報酬
     PC: 自然な幅、当社列が1.4x幅
     SP: viewport内に収まるよう全列圧縮、当社中央で目立つ */
  body section#compare {
    overflow: hidden !important;
    position: relative !important;
  }
  body .compare {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* 「◉ 当社のサービス」吹き出しは SP で非表示 (AI cell自体が強調されているため不要) */
  body .compare__head-cell--ours::before {
    display: none !important;
  }
  /* ヘッダー行: flex + order で AI を中央に配置 */
  body .compare__head {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .compare__head-cell:nth-child(1) { order: 0 !important; flex: 0 0 60px !important; }
  body .compare__head-cell:nth-child(2):not(.compare__head-cell--ours) { order: 1 !important; flex: 1 1 0 !important; min-width: 0 !important; }
  body .compare__head-cell--ours { order: 2 !important; flex: 1.4 1 0 !important; min-width: 0 !important; }
  body .compare__head-cell:nth-child(3):not(.compare__head-cell--ours) { order: 3 !important; flex: 1 1 0 !important; min-width: 0 !important; }
  body .compare__head-cell {
    padding: 0.5rem 0.375rem !important;
    border: 0 !important;
    background: #F4F6F8 !important;
    border-radius: 8px 8px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
  }
  body .compare__head-cell:first-child {
    background: transparent !important;
  }
  body .compare__head-cell--ours {
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    color: #fff !important;
    margin: -0.5rem 0 0 !important;
    padding: 0.875rem 0.375rem 0.625rem !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 -6px 14px -4px rgba(9,111,200,0.30) !important;
    transform: scale(1.06) !important;
    transform-origin: center bottom !important;
    z-index: 2 !important;
    position: relative !important;
  }
  body .compare__head-cell .compare__cat {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #888 !important;
  }
  body .compare__head-cell--ours .compare__cat { color: rgba(255,255,255,0.85) !important; }
  body .compare__head-cell .compare__name {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #111 !important;
  }
  body .compare__head-cell--ours .compare__name {
    color: #fff !important;
    font-size: 0.75rem !important;
  }

  /* 行: flex + order で AI を中央に配置 (1画面内収まり) */
  body .compare__row {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 3px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  body .compare__row-cell {
    padding: 0.625rem 0.375rem !important;
    border: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    grid-area: auto !important;
    grid-column: auto !important;
    background: #FAFAFA !important;
    color: #555 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.6875rem !important;
    line-height: 1.45 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
  body .compare__row-cell::before { content: none !important; }
  body .compare__row > .compare__row-cell:nth-child(2):not(.compare__row-cell--ours)::before,
  body .compare__row > .compare__row-cell:nth-child(3):not(.compare__row-cell--ours)::before { content: none !important; }

  /* === flex order で 視覚順序: cat | 月額固定 | AI(中央大) | 成果報酬 === */
  /* カテゴリ (col 1, leftmost, 細い) */
  body .compare__row > .compare__row-cell:nth-child(1) {
    order: 0 !important;
    flex: 0 0 60px !important;
    background: #F4F6F8 !important;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    color: #111 !important;
    font-size: 0.625rem !important;
    line-height: 1.3 !important;
    padding: 0.625rem 0.25rem !important;
  }
  /* 月額固定 (HTML cell 2, visual position 2) */
  body .compare__row > .compare__row-cell:nth-child(2):not(.compare__row-cell--ours) {
    order: 1 !important;
    flex: 1 1 0 !important;
    background: #FAFAFA !important;
    border: 1px solid #EFEFEF !important;
  }
  /* AI ours (HTML cell 4, visual position 3 = CENTER) — 大きく主役 */
  body .compare__row > .compare__row-cell--ours {
    order: 2 !important;
    flex: 1.4 1 0 !important;
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    padding: 0.875rem 0.375rem !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px -4px rgba(9,111,200,0.30) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  body .compare__row-cell--ours strong {
    color: #fff !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
  }
  /* 成果報酬 (HTML cell 3, visual position 4 = RIGHT) */
  body .compare__row > .compare__row-cell:nth-child(3):not(.compare__row-cell--ours) {
    order: 3 !important;
    flex: 1 1 0 !important;
    background: #FAFAFA !important;
    border: 1px solid #EFEFEF !important;
  }

  body .compare__row-cell strong {
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
  }

  /* アイコン: 小さく */
  body .compare__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-right: 0.125rem !important;
    flex-shrink: 0 !important;
  }
  body .compare__row-cell--ours .compare__icon {
    color: #fff !important;
    width: 1rem !important;
    height: 1rem !important;
  }
  body .compare__row-cell:not(.compare__row-cell--ours) .compare__icon--bad { color: #DD4848 !important; }
  body .compare__row-cell:not(.compare__row-cell--ours) .compare__icon--good { color: #2E9B5C !important; }
  body .compare__row-cell:not(.compare__row-cell--ours) .compare__icon--mid { color: #BBB !important; }

  /* ===== compare swiper (mobile only): 3パネルを横スワイプ ===== */
  body .compare-swiper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    margin: 0 -1rem !important;
    padding: 0 !important;
  }
  body .compare-swiper::-webkit-scrollbar { display: none !important; }
  body .compare-swiper__panel {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }
  /* 各パネルのタブヘッダ (どのタイプか) */
  body .compare-swiper__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0.875rem 1rem !important;
    background: #F4F6F8 !important;
    border-radius: 14px 14px 0 0 !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }
  body .compare-swiper__panel.is-ours .compare-swiper__tab {
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -4px rgba(9,111,200,0.30) !important;
  }
  body .compare-swiper__tab-en {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    color: #999 !important;
    display: block !important;
  }
  body .compare-swiper__panel.is-ours .compare-swiper__tab-en {
    color: rgba(255,255,255,0.85) !important;
  }
  body .compare-swiper__tab-name {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: #111 !important;
    display: block !important;
  }
  body .compare-swiper__panel.is-ours .compare-swiper__tab-name { color: #fff !important; }

  /* 各パネル内の行: カテゴリ | 値 の2列 (1画面に全6行収まる) */
  body .compare-swiper__row {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  body .compare-swiper__row .compare-swiper__category {
    padding: 0.625rem 0.5rem !important;
    background: #F4F6F8 !important;
    border-radius: 8px !important;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.6875rem !important;
    color: #111 !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body .compare-swiper__row .compare-swiper__value {
    padding: 0.625rem 0.625rem !important;
    background: #fff !important;
    border: 1px solid #EFEFEF !important;
    border-radius: 8px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  body .compare-swiper__row .compare-swiper__value strong {
    font-weight: 800 !important;
    color: #111 !important;
    font-size: 0.875rem !important;
  }
  /* AI パネルの value セルは青グラデ + 大きく */
  body .compare-swiper__panel.is-ours .compare-swiper__value {
    background: linear-gradient(135deg, #0556A0, #096FC8) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px -2px rgba(9,111,200,0.20) !important;
  }
  body .compare-swiper__panel.is-ours .compare-swiper__value strong {
    color: #fff !important;
    font-size: 0.9375rem !important;
  }
  body .compare-swiper__value .compare__icon {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
  }
  body .compare-swiper__panel.is-ours .compare__icon { color: #fff !important; }
  body .compare-swiper__panel:not(.is-ours) .compare__icon--bad { color: #DD4848 !important; }
  body .compare-swiper__panel:not(.is-ours) .compare__icon--good { color: #2E9B5C !important; }
  body .compare-swiper__panel:not(.is-ours) .compare__icon--mid { color: #BBB !important; }

  /* ドットインジケータ + スワイプヒント */
  body .compare-swiper__dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 1rem !important;
    padding: 0 !important;
  }
  body .compare-swiper__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #E0E0E0 !important;
    transition: background 0.3s, transform 0.3s !important;
  }
  body .compare-swiper__dot.is-active {
    background: #096FC8 !important;
    transform: scale(1.3) !important;
  }
  body .compare-swiper__hint {
    text-align: center !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #096FC8 !important;
    margin-bottom: 0.75rem !important;
    opacity: 0 !important;
    animation: compareSwipeHint 2.8s ease-in-out 0.8s 3 !important;
  }
  @keyframes compareSwipeHint {
    0%, 100% { opacity: 0; transform: translateX(8px); }
    30%, 70% { opacity: 0.95; transform: translateX(0); }
  }

  /* オリジナルの compare 自体は非表示 */
  body section#compare .compare:not(.compare-swiper) {
    display: none !important;
  }
}

/* ====================================================
   compare table — PC version: flex + order で AI を中央に拡大
   ==================================================== */
@media (min-width: 1101px) {
  body .compare__head,
  body .compare__row {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 0.625rem !important;
  }
  /* cat: 左 */
  body .compare__head-cell:nth-child(1),
  body .compare__row > .compare__row-cell:nth-child(1) {
    order: 0 !important;
    flex: 0.85 1 0 !important;
    min-width: 0 !important;
  }
  /* 月額固定: position 2 */
  body .compare__head-cell:nth-child(2):not(.compare__head-cell--ours),
  body .compare__row > .compare__row-cell:nth-child(2):not(.compare__row-cell--ours) {
    order: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* AI ours: position 3 (CENTER) — 大きく */
  body .compare__head-cell--ours,
  body .compare__row > .compare__row-cell--ours {
    order: 2 !important;
    flex: 1.2 1 0 !important;
    min-width: 0 !important;
    transform: scale(1.04) !important;
    transform-origin: center !important;
    z-index: 2 !important;
    position: relative !important;
    box-shadow: 0 12px 30px -8px rgba(9,111,200,0.30) !important;
  }
  /* 成果報酬: position 4 (右端) */
  body .compare__head-cell:nth-child(3):not(.compare__head-cell--ours),
  body .compare__row > .compare__row-cell:nth-child(3):not(.compare__row-cell--ours) {
    order: 3 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* === Mobile CSS for additional sections (mid-cta / flow / etc.) ===
   元はここに v4 比較表の placeholder があったが、削除済。
   この @media (max-width: 1100px) ブロック内のルールは全て生きている。 */
@media (max-width: 1100px) {

  /* 中央 CTA (mid-cta) の左右余白 → モバイルで edge にビッタリしないように */
  body .mid-cta {
    margin: 2.5rem 1.25rem !important;
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }
  body .mid-cta__head, body .mid-cta__action {
    text-align: center !important;
    justify-items: center !important;
  }
  body .mid-cta__btn {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }

  /* "06 - 最短1週間で導入" section (.flow-track) — 横スクロール scrollytelling 完全無効化
     旧: height: 1440vh + sticky strip → 新: 通常の縦積みカードリスト */
  body .flow-track {
    height: auto !important;
    position: static !important;
    margin: 0 !important;
  }
  body .flow-track__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    background: transparent !important;
  }
  /* HUD (進捗バー・カウント等) は非表示 — 装飾的でモバイル不要 */
  body .flow-track__hud,
  body .flow-track__hud-phase,
  body .flow-track__hud-progress,
  body .flow-track__hud-count {
    display: none !important;
  }
  /* strip = 横並びコンテナ → 縦積みに */
  body .flow-track__strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    padding: 0 1rem !important;
    overflow: visible !important;
  }
  /* 各ステップカード: 横長 → 縦カード (align-items:center 解除 + 番号バッジ強調) */
  body .flow-step {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    display: flex !important;
    align-items: stretch !important;  /* 元 align-items:center を解除 (子要素が横中央寄せされる原因) */
    text-align: left !important;
    padding: 1.5rem 1.25rem !important;
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(10,15,30,0.05) !important;
    margin: 0 !important;
    opacity: 1 !important;
    gap: 0.875rem !important;
    border: 1px solid #E6E6E6 !important;
    overflow: visible !important;
    /* grid-template-columns も解除 (元 grid 設計の残骸) */
    grid-template-columns: 1fr !important;
  }
  body .flow-step::before {
    display: none !important;
  }
  /* .is-active による青枠強調は解除 (1枚目だけ青枠で違和感がある) */
  body .flow-step.is-active {
    border: 1px solid #E6E6E6 !important;
    box-shadow: 0 6px 18px rgba(10,15,30,0.05) !important;
  }
  /* flow-step__num: 円形バッジ (青グラデ + 白文字) で確実に視認できる形に */
  body .flow-step__num {
    position: relative !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    background-image: linear-gradient(135deg, #0556A0 0%, #096FC8 50%, #3F9EE3 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px -4px rgba(9, 111, 200, 0.40) !important;
    align-self: flex-start !important;  /* 親が stretch でもこの要素だけは左寄せ */
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body .flow-step__body {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: left !important;
  }
  /* CRITICAL: .flow-step__body > * は元 opacity:0 (is-active のみ 1)。
     モバイルでは全カードの中身を強制表示 */
  body .flow-step__body > *,
  body .flow-step__body > .flow-step__meta,
  body .flow-step__body > .flow-step__t,
  body .flow-step__body > .flow-step__d,
  body .flow-step:not(.is-active) .flow-step__body > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body .flow-step__meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    margin: 0 !important;
  }
  body .flow-step__phase {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #096FC8 !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(9, 111, 200, 0.08) !important;
    border-radius: 999px !important;
  }
  body .flow-step__phase-name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #888 !important;
  }
  body .flow-step__t {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin: 0.125rem 0 0 !important;
    text-align: left !important;
  }
  body .flow-step__d {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.8125rem !important;
    line-height: 1.75 !important;
    color: #555 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  body .flow-step__d strong {
    color: #096FC8 !important;
    font-weight: 700 !important;
  }
  /* viz (装飾) はモバイル非表示 */
  body .flow-step__viz { display: none !important; }

  /* pricing */
  body .pricing-wrap { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* triple-cta: 3選択肢を **横スクロールカルーセル + スワイプヒント** に */
  body section.triple-cta,
  body .triple-cta {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* おすすめスタンプを上にはみ出させるため */
  }
  body .triple-cta__grid {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important; /* おすすめスタンプを上にはみ出させるため */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.75rem !important;
    padding: 1.25rem 1.25rem 1.5rem !important; /* 上にスタンプ用のスペース */
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
    max-width: none !important;
  }
  body .triple-cta__grid::-webkit-scrollbar { display: none !important; }
  body .triple-cta__grid > .triple-cta__card {
    flex: 0 0 84% !important;
    width: 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
  /* スワイプヒントラベル */
  body .triple-cta::before {
    content: '⟶ SWIPE';
    position: absolute;
    right: 1.5rem;
    top: 6rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    animation: swipeHintTriple 2.6s ease-in-out 0.8s 3;
    z-index: 5;
    pointer-events: none;
  }
  @keyframes swipeHintTriple {
    0%, 100% { opacity: 0; transform: translateX(8px); }
    30%, 70% { opacity: 0.95; transform: translateX(0); }
  }
  /* 最初のカードが動くスワイプ示唆 */
  body .triple-cta__grid > .triple-cta__card:first-child {
    animation: swipeHintCardTriple 3.2s ease-in-out 1.4s 1;
  }
  @keyframes swipeHintCardTriple {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-24px); }
    65% { transform: translateX(0); }
  }

  /* sec-title: モバイルで小さく */
  body .sec-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    line-height: 1.45 !important;
  }
  body .sec-lead {
    font-size: 0.8125rem !important;
    line-height: 1.7 !important;
  }

  /* トップFV: ボタンを目立つように強化 */
  .hero__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  .hero__actions .btn {
    width: 100% !important;
    height: 54px !important;
    padding: 0 1.5rem !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  .hero__actions .btn--primary,
  .hero__actions .btn.btn--primary {
    background: linear-gradient(135deg, #0556A0 0%, #096FC8 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(9,111,200,0.32) !important;
  }
  .hero__actions .btn--secondary,
  .hero__actions .btn.btn--secondary {
    background: #fff !important;
    color: #096FC8 !important;
    border: 1.5px solid #096FC8 !important;
  }
  .hero__actions .btn:active { transform: scale(0.98) !important; }
  .hero__actions .btn::before, .hero__actions .btn::after { display: none !important; }


  /* ---- トップページ Hero (FV) — body.home スコープ限定 ---- */
  body.home .hero {
    min-height: auto !important;
    padding: 5.5rem 1.25rem 2.5rem !important;
    gap: 1.5rem !important;
  }
  body.home .hero__index { display: none !important; }
  body.home .hero__label { font-size: 0.5625rem !important; gap: 0.5rem !important; }
  body.home .hero__label::before { width: 1.25rem !important; }
  /* hero__title はトップ専用ルール (3行構成) が別途 body.home スコープで定義済 */
  body.home .hero__info {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding-top: 1.25rem !important;
  }
  body.home .hero__info-text { font-size: 0.875rem !important; line-height: 1.7 !important; }
  body.home .hero__info-text--sub { font-size: 0.8125rem !important; line-height: 1.7 !important; }
  body.home .hero__info-label { font-size: 0.5625rem !important; }
  body.home .hero__actions { display: flex !important; flex-direction: column !important; gap: 0.625rem !important; }
  body.home .hero__actions .btn { width: 100% !important; justify-content: center !important; }
  body.home .hero__scroll { display: none !important; }

  /* ---- カミングスーン ベンチャー: 縦積みでテキスト圧縮を解消 ---- */
  .venture--coming {
    grid-template-columns: 1fr !important;
    padding: 1.5rem 1.25rem !important;
    gap: 0.875rem !important;
    text-align: left !important;
  }
  .venture__coming-label {
    font-size: 0.6875rem !important;
    letter-spacing: 0.18em !important;
  }
  .venture__coming-title {
    font-size: 1.0625rem !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
  }
  .venture__coming-desc {
    font-size: 0.8125rem !important;
    line-height: 1.7 !important;
  }
  .venture__coming-eta {
    display: inline-flex !important;
    align-self: flex-start !important;
    padding: 0.25rem 0.625rem !important;
    background: rgba(154,154,154,0.10) !important;
    border-radius: 999px !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* ---- ペルソナ / Industries 横スワイプ 1カード view ----
   トップページ: .expertise__industries (「豊富なエキスパートが在籍」セクション)
   for-sales LP: .persona__grid (ペルソナ3種)
*/
@media (max-width: 900px) {
  .persona__grid,
  .expertise__industries {
    /* 横スクロール + 1カード snap (既存の grid-template-columns: 1fr を上書き) */
    display: flex !important;
    grid-auto-flow: row !important;
    grid-template-columns: none !important;
    grid-auto-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding: 0 1.25rem !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem 1.25rem !important;
    margin: 0 -1.25rem !important;
    scrollbar-width: none !important;
  }
  .persona__grid::-webkit-scrollbar,
  .expertise__industries::-webkit-scrollbar { display: none !important; }

  .persona__grid > .persona-card,
  .expertise__industries > .industry {
    flex: 0 0 86% !important;
    width: 86% !important;
    min-width: 86% !important;
    scroll-snap-align: start !important;
    cursor: default !important;
    /* industry card は元々 grid なのでリセット */
    grid-template-columns: 1fr !important;
    box-sizing: border-box !important;
  }
  .persona-card:hover, .industry:hover { transform: none !important; }

  /* スワイプヒントラベル (右上) */
  .persona__grid::before,
  .expertise__industries::before {
    content: '⟶ SWIPE';
    position: absolute;
    right: 1.25rem;
    top: -2rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #096FC8;
    opacity: 0;
    animation: swipeHintLabel 2.6s ease-in-out 0.8s 3;
  }
  /* 親要素を relative にして hint をアンカー */
  section:has(.persona__grid),
  section:has(.expertise__industries),
  .expertise__industries-wrap { position: relative !important; }
  @keyframes swipeHintLabel {
    0%, 100% { opacity: 0; transform: translateX(8px); }
    30%, 70% { opacity: 0.9; transform: translateX(0); }
  }
  /* 最初のカードを少し動かして「スワイプできる」と示唆 */
  .persona__grid > .persona-card:first-child,
  .expertise__industries > .industry:first-child {
    animation: swipeHintCard 3.2s ease-in-out 1.4s 1;
  }
  @keyframes swipeHintCard {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-22px); }
    65% { transform: translateX(0); }
  }
}

/* ---- トップページ 05 — Ventures: 動画アニメ (venture__visual) 完全非表示 + CTA改行修正 ---- */
@media (max-width: 900px) {
  /* venture 自体を 1 カラムに */
  body .venture {
    grid-template-columns: 1fr !important;
    padding: 1.75rem 1.25rem !important;
    gap: 1.25rem !important;
  }
  body .venture--reverse {
    grid-template-columns: 1fr !important;
  }
  /* visual (PCモックアップ + アニメーション一式) を非表示 */
  body .venture__visual,
  body .venture__visual-pc,
  body .venture__visual-bg,
  body .venture__visual-grid,
  body .venture__visual-badge,
  body .venture__visual-status { display: none !important; }
  /* venture__info 内の要素を中央寄せ + フィット */
  body .venture__info {
    width: 100% !important;
    max-width: 100% !important;
    gap: 1rem !important;
  }
  body .venture__num { font-size: 2rem !important; }
  body .venture__title {
    font-size: 1.125rem !important;
    line-height: 1.55 !important;
  }
  body .venture__desc {
    font-size: 0.8125rem !important;
    line-height: 1.75 !important;
  }
  body .venture__metrics {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  body .venture__metric-num {
    font-size: 1.125rem !important;
  }
  body .venture__metric-label {
    font-size: 0.5625rem !important;
  }
  /* CTA ボタン: 全幅 + letter-spacing 縮小 で改行崩れ防止 */
  body .venture__cta {
    align-self: stretch !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  /* チャットボットはスマホでも表示 (元のCSSに任せる) */
}

/* ---- トップページ Case Studies スライド: モバイルではデバイス画面を完全に非表示 ----
   3D アニメ + 複雑な内部構造が崩れの原因。
   モバイルではヘッダー (タイトル) + View ボタンのみシンプル表示。
*/
@media (max-width: 900px) {
  .products {
    padding: 3rem 0 !important;
    overflow: hidden !important;
  }
  .products__viewport {
    min-height: auto !important;
    padding: 3rem 0 !important;
  }
  /* 背景の巨大テキスト (F&B / RAG / Voice) は装飾的なので非表示 */
  .products__bg-type { display: none !important; }
  .product-slide {
    padding: 0 1.25rem !important;
    gap: 1rem !important;
  }
  .product-slide__head {
    padding: 0 !important;
    text-align: center !important;
  }
  .product-slide__category {
    font-size: 0.625rem !important;
    letter-spacing: 0.24em !important;
  }
  .product-slide__heading {
    font-size: 1.125rem !important;
    line-height: 1.55 !important;
    padding: 0 1rem !important;       /* 画面横端と被らない */
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  /* corner ← +metric を縦並びに (横で被る問題解消) */
  .product-slide__corner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    width: 100% !important;
    padding: 0 1rem !important;
    height: auto !important;
    text-align: center !important;
  }
  .product-slide__corner > span:not(.product-slide__metric) {
    height: auto !important;
    font-size: 0.75rem !important;
  }
  .product-slide__metric {
    font-size: 0.9375rem !important;
    height: auto !important;
    line-height: 1.3 !important;
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /* デバイスモックアップ (アイコン/アニメ) はモバイルでも表示 - 縮小して安定化 */
  .product-slide__device-wrap {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 1rem auto 0 !important;
    perspective: none !important;
  }
  .product-slide__device {
    display: block !important;
    transform: none !important;          /* rotateX 解除でアニメ崩れ防止 */
    aspect-ratio: 16 / 10 !important;
    max-width: 100% !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3), 0 4px 12px -2px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
  }
  .product-slide__device::after { display: none !important; }
  .product-slide__device-screen {
    height: auto !important;
    min-height: 120px !important;
  }
  .product-slide__cards { display: none !important; }    /* 装飾の浮遊カードは引き続き非表示 */
  /* "View" 円形ボタンを中央オーバーレイ → 右下の小さなボタンに */
  .product-slide__view {
    width: 4rem !important;
    height: 4rem !important;
    top: auto !important;
    left: auto !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
    transform: none !important;
    font-size: 0.75rem !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.30) !important;
  }
  .product-slide__view::after { font-size: 0.75rem !important; }
  .product-slide__view:hover { transform: scale(1.08) !important; }
  /* View リンクだけ目立たせる */
  .product-slide__view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1.5rem auto 0 !important;
    padding: 0.875rem 2rem !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.12em !important;
    text-decoration: none !important;
  }
  /* スライドナビゲーション */
  .products__topbar { top: 2rem !important; }
  .products__nav, .products__pagination { padding: 0 1.25rem !important; }
}

/* ---- ドロワー v4: 全画面 + 階層化 + リッチアニメーション ----
   body接頭辞 + !important で他ルールに勝たせる。
*/
@media (max-width: 1100px) {
  /* オープン時のパネル: 下→上スライド + 弾性 (二重保険: 親.is-open OR 自身.is-open OR html.locked) */
  body .m-drawer.is-open .m-drawer__panel,
  body .m-drawer__panel.is-open,
  html.m-drawer-locked .m-drawer__panel {
    transform: translateY(0) scale(1) rotate(0deg) !important;
    opacity: 1 !important;
  }
  body .m-drawer.is-open .m-drawer__backdrop,
  html.m-drawer-locked .m-drawer__backdrop {
    opacity: 1 !important;
  }
  /* リンク/グループ/ボタン: 初期は隠す */
  body .m-drawer__group,
  body .m-drawer__link,
  body .m-drawer__btn,
  body .m-drawer__head {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body .m-drawer.is-open .m-drawer__group,
  body .m-drawer.is-open .m-drawer__link,
  body .m-drawer.is-open .m-drawer__btn,
  body .m-drawer.is-open .m-drawer__head,
  html.m-drawer-locked .m-drawer__group,
  html.m-drawer-locked .m-drawer__link,
  html.m-drawer-locked .m-drawer__btn,
  html.m-drawer-locked .m-drawer__head {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* スタッガーディレイ: ヘッダー → サービスグループ → 各リンク → CTA */
  body .m-drawer.is-open .m-drawer__head { transition-delay: .12s; }
  body .m-drawer.is-open .m-drawer__nav .m-drawer__group { transition-delay: .20s; }
  body .m-drawer.is-open .m-drawer__nav .m-drawer__link:nth-of-type(1) { transition-delay: .26s; }
  body .m-drawer.is-open .m-drawer__nav .m-drawer__link:nth-of-type(2) { transition-delay: .32s; }
  body .m-drawer.is-open .m-drawer__nav .m-drawer__link:nth-of-type(3) { transition-delay: .38s; }
  body .m-drawer.is-open .m-drawer__cta .m-drawer__btn:nth-child(1) { transition-delay: .44s; }
  body .m-drawer.is-open .m-drawer__cta .m-drawer__btn:nth-child(2) { transition-delay: .50s; }
}

/* ============================================
   /case-list/ (cases.html) スマホ全面リデザイン
   既存の grid + 大型カードがモバイルで崩れるため、
   コンパクトな縦リスト + 横サムネ + 矢印の構造に置き換える。
   ============================================ */
@media (max-width: 900px) {
  /* hero/stats のpadding/typography をコンパクトに (case-list page専用) */
  body.page-template-page-case-list .hero,
  body.page-id-16 .hero {
    padding: 5.5rem 1.25rem 1.5rem !important;
    min-height: auto !important;
  }
  body.page-template-page-case-list .stats-bar,
  .page-case-list .stats-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    margin: 0 1.25rem !important;
  }
  body.page-template-page-case-list .stats-bar__item::after,
  .page-case-list .stats-bar__item::after { display: none !important; }
  body.page-template-page-case-list .stats-bar__num,
  .page-case-list .stats-bar__num { font-size: 1.5rem !important; }
  body.page-template-page-case-list .stats-bar__label,
  .page-case-list .stats-bar__label { font-size: 0.625rem !important; }

  /* フィルター: 横スクロールで全部見せる */
  body.page-template-page-case-list .filter-section,
  .page-case-list .filter-section {
    padding: 1rem 1.25rem !important;
  }
  body.page-template-page-case-list .filter,
  .page-case-list .filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }
  body.page-template-page-case-list .filter::-webkit-scrollbar,
  .page-case-list .filter::-webkit-scrollbar { display: none !important; }
  body.page-template-page-case-list .filter__btn,
  .page-case-list .filter__btn {
    flex: 0 0 auto !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* ケースカード: 1カラム + 横サムネ16:9のままだが大幅コンパクト化 */
  body.page-template-page-case-list .cases-grid,
  .page-case-list .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 0 1.25rem !important;
  }
  body.page-template-page-case-list .case-card,
  .page-case-list .case-card {
    cursor: pointer !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    /* サムネ + 本文を横並びにする */
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
  }
  body.page-template-page-case-list .case-card:hover,
  .page-case-list .case-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-rest) !important;
  }
  body.page-template-page-case-list .case-card__visual,
  .page-case-list .case-card__visual {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 110px !important;
  }
  body.page-template-page-case-list .case-card__visual-num,
  .page-case-list .case-card__visual-num {
    top: 0.625rem !important; right: 0.625rem !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.2em !important;
  }
  body.page-template-page-case-list .case-card__visual-arrow,
  .page-case-list .case-card__visual-arrow {
    display: none !important;
  }
  body.page-template-page-case-list .case-card__body,
  .page-case-list .case-card__body {
    padding: 0.875rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.375rem !important;
  }
  body.page-template-page-case-list .case-card__cat,
  .page-case-list .case-card__cat {
    margin-bottom: 0 !important;
    font-size: 0.5625rem !important;
    letter-spacing: 0.2em !important;
  }
  body.page-template-page-case-list .case-card__title,
  .page-case-list .case-card__title {
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    /* 2行までで切り捨て */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.page-template-page-case-list .case-card__metric,
  .page-case-list .case-card__metric {
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
  }
  body.page-template-page-case-list .case-card__metric small,
  .page-case-list .case-card__metric small {
    font-size: 0.625rem !important;
    margin-left: 0.25rem !important;
  }

  /* "coming" 専用カードはモバイルでは隠す or 1段に */
  body.page-template-page-case-list .case-card--coming,
  .page-case-list .case-card--coming {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 1.25rem !important;
    text-align: center !important;
  }

  /* /resources/ カードは元のデザインを維持 (リバート済) */

  /* CTA section (cases.htmlのフッタ前) */
  body.page-template-page-case-list .cta__inner,
  .page-case-list .cta__inner {
    padding: 2.5rem 1.25rem !important;
  }
}