/* service-bundle.css — 全サービスページの和集合（自動生成・共通バンドル） */

/* ===== public/css/style.css ===== */
  :root {
    /* ライトテーマをベース値に統一（旧ダークテーマは white-theme.css と統合し撤去）。
       これにより白テーマCSS適用前の一瞬でも黒くならない。 */
    --bg: #FFFFFF;
    --bg-elev: #F6F7FA;
    --bg-elev-2: #EDEFF3;
    --ink: #0B0E14;
    --ink-soft: rgba(11,14,20,0.88);
    --ink-quiet: rgba(11,14,20,0.62);
    --ink-faint: rgba(11,14,20,0.42);
    --line: rgba(11,14,20,0.10);
    --line-bright: rgba(11,14,20,0.22);
    --accent: #2563EB;
    --accent-deep: #1D4ED8;
    --accent-glow: rgba(37,99,235,0.18);
    --gold: #B08833;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; background: var(--bg); }
  body {
    font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
    background: var(--bg); color: var(--ink);
    font-size: 16px;
    font-weight: 300; line-height: 1.85;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
    overflow-x: hidden;
  }
  .container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
  .container-tight { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }

  /* ───── Film grain overlay (subtle texture) ───── */
  body::before {
    content: ""; position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 1000; opacity: 0.7;
    mix-blend-mode: overlay;
  }

  /* ───── Custom cursor blob ───── */
  .cursor-blob {
    position: fixed; top: 0; left: 0; width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91,155,255,0.15) 0%, transparent 65%);
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 1; mix-blend-mode: screen;
    transition: opacity 0.3s ease;
    will-change: transform;
  }

  /* ───── Page loader ───── */
  .loader {
    position: fixed; inset: 0; z-index: 9999;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
  }
  html.loader-seen .loader { display: none !important; }
  html.loader-first .loader {
    /* JSが失敗しても初回表示を長く塞がないためのフォールバック。 */
    animation: loaderAutoHide 0.45s var(--ease) 1.1s forwards;
  }
  .loader.hidden { opacity: 0; visibility: hidden; }
  @keyframes loaderAutoHide {
    to { opacity: 0; visibility: hidden; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.loader-first .loader { animation-delay: 0.2s; }
  }
  .loader-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px; font-weight: 400; color: var(--ink);
    letter-spacing: 0.06em;
    animation: loaderPulse 1.4s ease-in-out infinite;
  }
  .loader-mark .dot { color: var(--accent); font-style: italic; }
  @keyframes loaderPulse {
    0%, 100% { opacity: 0.4; letter-spacing: 0.06em; }
    50% { opacity: 1; letter-spacing: 0.18em; }
  }

  /* ───── Disclaimer ───── */

  /* ───── Navigation (two-tier) ───── */
  header.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(0,0,0,0.6);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--line);
    transition: transform 0.4s var(--ease);
  }
  header.nav.hide { transform: translateY(-100%); }
  .nav-primary { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .logo .dot { color: var(--accent); font-style: italic; }
  .nav-primary-links { display: flex; gap: 44px; }
  .nav-primary-links a {
    color: var(--ink-soft); font-size: 12px; font-weight: 400; letter-spacing: 0.18em;
    text-transform: uppercase; transition: color .25s; position: relative; padding: 6px 0;
  }
  .nav-primary-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
  }
  .nav-primary-links a:hover { color: var(--ink); }
  .nav-primary-links a:hover::after { transform: scaleX(1); }
  .nav-cta {
    border: 1px solid var(--line-bright);
    color: var(--ink); padding: 11px 24px; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.18em; font-weight: 400;
    transition: all .3s var(--ease); display: inline-flex; align-items: center; gap: 8px;
  }
  .nav-cta:hover { background: var(--ink); color: var(--bg); }
  .nav-cta .arrow { transition: transform .3s var(--ease); }
  .nav-cta:hover .arrow { transform: translateX(3px); }
  .nav-secondary {
    display: flex; justify-content: center; gap: 36px;
    height: 44px; align-items: center;
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,0.4);
  }
  .nav-secondary a {
    font-size: 11px; color: var(--ink-quiet); letter-spacing: 0.1em;
    transition: color .2s;
  }
  .nav-secondary a:hover { color: var(--ink); }

  /* ───── Reveal animation ───── */
  .reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  .mask-reveal { position: relative; overflow: hidden; }
  .mask-reveal::after {
    content: ""; position: absolute; inset: 0;
    background: var(--bg); z-index: 2;
    transform-origin: right center;
    transition: transform 1.4s var(--ease);
  }
  .mask-reveal.in-view::after { transform: scaleX(0); }

  /* ───── Hero — Massive Edition ───── */
  .hero-bg-layer {
    position: absolute; inset: -10% -5%; z-index: 0;
    background-image: url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=2400&q=80&auto=format&fit=crop');
    background-size: cover; background-position: center;
    opacity: 0.10;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    will-change: transform;
  }
  .hero-vlines {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;
    background-image:
      linear-gradient(90deg, rgba(91,155,255,0.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91,155,255,0.12) 1px, transparent 1px);
    background-size: 25% 100%, 12.5% 100%;
    background-position: 0 0, 0 0;
    opacity: 0.65;
    mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  /* Top live status bar */
  .hero-status {
    position: absolute; top: 90px; left: 0; right: 0; z-index: 8;
    padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', monospace; font-size: 10px; letter-spacing: 0.24em;
    color: var(--ink-soft); text-transform: uppercase;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
  }

  /* Side metadata columns */
  .hero-side {
    position: absolute; z-index: 7; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 28px;
    font-family: 'Inter', monospace; font-size: 10px; letter-spacing: 0.14em;
    color: var(--ink-soft);
  }
  .hero-side.left { left: 40px; }
  .hero-side.right { right: 40px; align-items: flex-end; }

  /* Bottom media marquee */
  .hero-marquee {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 7;
    height: 80px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
    overflow: hidden;
    display: flex; align-items: center;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .marquee-track span.sep { color: var(--accent); font-style: italic; font-family: 'Cormorant Garamond', serif; }
  @keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* Center content */
  .hero-center {
    position: relative; z-index: 6;
    text-align: center;
    max-width: 1280px; padding: 0 80px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
  }
  .hero-marker {
    display: inline-flex; gap: 18px; align-items: center;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 15px; color: var(--ink-soft); letter-spacing: 0.18em;
    margin-bottom: 44px;
  }
  .hero-marker .line {
    width: 56px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
  }
  .hero-marker .line.r {
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  .hero-massive-title {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(56px, 9.5vw, 168px);
    font-weight: 400; line-height: 1.05; letter-spacing: -0.015em;
    color: var(--ink);
    text-shadow: 0 4px 60px rgba(0,0,0,0.5);
  }
  .hero-massive-title .line-1,
  .hero-massive-title .line-3 { display: block; }
  .hero-massive-title .line-2 {
    display: block; min-height: 1.1em;
  }
  .hero-massive-title .rotate-wrap {
    display: inline-block; overflow: hidden; vertical-align: top;
    min-width: 8em; height: 1.1em;
  }
  @keyframes glitchA {
    0% { transform: translate(0,0); }
    20% { transform: translate(-4px, 1px); }
    40% { transform: translate(2px, -2px); }
    60% { transform: translate(-2px, 0); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0,0); opacity: 0; }
  }
  @keyframes glitchB {
    0% { transform: translate(0,0); }
    20% { transform: translate(4px, -1px); }
    40% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, 0); }
    80% { transform: translate(-1px, -2px); }
    100% { transform: translate(0,0); opacity: 0; }
  }

  .hero-massive-sub {
    margin-top: 56px;
    font-size: 14px; color: var(--ink-soft); line-height: 2;
    max-width: 640px; font-weight: 300; letter-spacing: 0.04em;
  }
  .hero-cta-block {
    margin-top: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
  }
  .hero-cta-major {
    display: inline-flex; align-items: center; gap: 18px;
    background: var(--ink); color: var(--bg);
    padding: 24px 44px; border-radius: 999px;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
    transition: all .35s var(--ease);
    box-shadow: 0 20px 60px rgba(91,155,255,0.25), 0 0 0 1px rgba(91,155,255,0);
  }
  .hero-cta-major:hover {
    background: var(--accent); color: var(--ink);
    box-shadow: 0 30px 80px rgba(91,155,255,0.4), 0 0 0 1px rgba(91,155,255,0.5);
    transform: translateY(-2px);
  }
  .hero-cta-major .arrow { transition: transform .3s var(--ease); }
  .hero-cta-major:hover .arrow { transform: translateX(6px); }

  /* Live clock styling */
  .hero-bg-overlay {
    position: absolute; inset: 0; z-index: 3;
    background:
      radial-gradient(800px 500px at 80% 30%, rgba(91,155,255,0.10), transparent 60%),
      linear-gradient(180deg, transparent 0%, transparent 75%, rgba(0,0,0,0.6) 92%, #000 100%);
    pointer-events: none;
  }
  .hero-bit {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    opacity: 1;
    display: block; width: 100%; height: 100%;
  }
  .hero-scanline {
    position: absolute; inset: 0; z-index: 4;
    pointer-events: none; opacity: 0.35;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(91,155,255,0.06) 0,
      rgba(91,155,255,0.06) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode: screen;
  }
  /* Horizontal sweep line — CRT scan effect */
  .hero-sweep {
    display: none !important;
    position: absolute; left: 0; right: 0; height: 220px; z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(91, 155, 255, 0.0) 30%,
      rgba(91, 155, 255, 0.12) 50%,
      rgba(170, 206, 255, 0.18) 51%,
      rgba(91, 155, 255, 0.10) 52%,
      rgba(91, 155, 255, 0.0) 70%,
      transparent 100%
    );
    top: -220px;
    animation: heroSweep 7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    mix-blend-mode: screen;
  }
  @keyframes heroSweep {
    0% { top: -220px; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100vh; opacity: 0; }
  }
  /* Right-side equalizer-style bars (data presence) */
  .hero-eq {
    position: absolute; right: 40px; bottom: 120px; z-index: 6;
    display: flex; gap: 4px; align-items: flex-end;
    height: 64px;
    pointer-events: none;
  }
  .hero-eq .bar {
    width: 4px; background: linear-gradient(180deg, var(--accent), rgba(91,155,255,0.2));
    border-radius: 1px;
    animation: eqBar 1s ease-in-out infinite alternate;
  }
  @keyframes eqBar {
    0% { height: 12%; }
    100% { height: 90%; }
  }
  .hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center;
    min-height: calc(100vh - 264px);
  }
  .hero-eyebrow {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 14px; color: var(--ink-soft); letter-spacing: 0.15em;
    margin-bottom: 32px;
    display: inline-flex; align-items: center; gap: 14px;
  }
  .hero-eyebrow::before, .hero-eyebrow::after {
    content: ""; width: 32px; height: 1px; background: var(--line-bright);
  }
  .hero-title {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(48px, 6.5vw, 84px);
    font-weight: 400; line-height: 1.22; letter-spacing: 0.005em;
  }
  .hero-title .static-line { display: block; }
  .hero-title .rotate-wrap {
    display: inline-block; height: 1.22em; overflow: hidden;
    position: relative; min-width: 6.5em; vertical-align: top;
  }

  .hero-sub {
    margin-top: 40px; font-size: 14px; color: var(--ink-soft);
    line-height: 2; max-width: 460px; font-weight: 300; letter-spacing: 0.04em;
  }

  .hero-trust {
    margin-top: 64px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
  }

  .hero-disclaim {
    margin-top: 28px; font-size: 10px; color: var(--ink-faint);
    letter-spacing: 0.08em; line-height: 1.6;
  }

  /* Hero visual right */
  .hero-visual {
    position: relative; aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-visual::before {
    content: ""; position: absolute; inset: -15%;
    background: radial-gradient(circle, rgba(91,155,255,0.18) 0%, transparent 55%);
    z-index: 0; animation: glowPulse 6s ease-in-out infinite;
  }
  @keyframes glowPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }
  @keyframes floatDevice {
    0%, 100% { transform: translateY(0) rotateZ(-0.5deg); }
    50% { transform: translateY(-14px) rotateZ(0.5deg); }
  }

  /* Decoration around device */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  /* ───── Statement / centerpiece ───── */
  /* === Digital pulse background for Statement section === */
  @keyframes stmtGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 60px 60px, 60px 60px; }
  }
  /* Radial pulse waves emanating from center */
  /* 合成可能アニメ化: 旧版は width/height(60→2200px) を毎フレーム拡大しレイアウト+ペイントが
     走っていた。固定サイズ + transform:scale + opacity に変更し、GPU合成で軽量化。 */
  @keyframes stmtPulseRing {
    0%   { opacity: 0.65; transform: translate(-50%, -50%) scale(0.027); }
    50%  { opacity: 0.35; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }
  /* Horizontal scan band */
  @keyframes stmtScanLine {
    0%   { top: -280px; }
    100% { top: 100%; }
  }
  /* Subtle dotted columns */
  /* Floating dots */
  @keyframes stmtDotPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1.0; }
  }

  /* ───── Section base ───── */
  .eyebrow {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif; font-style: normal;
    font-size: 13px; color: rgba(255,255,255,0.95); letter-spacing: 0.14em;
    font-weight: 500;
  }
  .section-title {
    margin-top: 18px; text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 400; line-height: 1.65; letter-spacing: 0.025em;
    color: var(--ink);
  }
  .section-sub {
    margin-top: 28px; text-align: center;
    font-size: 13px; color: var(--ink-soft); line-height: 2.1; font-weight: 300;
    max-width: 720px; margin-left: auto; margin-right: auto;
    letter-spacing: 0.04em;
  }

  /* ───── News ───── */
  .news-all .arrow { transition: transform .3s var(--ease); }
  .news-all:hover .arrow { transform: translateX(4px); }

  /* ───── 4-card grid ───── */

  /* ───── Asymmetric blocks ───── */
  @keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    33% { transform: translate(8px, -10px) scale(1.05); opacity: 1; }
    66% { transform: translate(-6px, 6px) scale(0.97); opacity: 0.8; }
  }

  /* ───── Industries ───── */

  /* Industry grid placed inside Statement section */

  /* ───── Representative Profile (under Plan card) ───── */

  /* ───── Plan / 入口商品 ───── */
  /* 2枚目以降のカードはタイトル直下の大きな余白を縮めて間隔調整 */
  .plan-cta .arrow { transition: transform .3s var(--ease); }
  .plan-cta:hover .arrow { transform: translateX(5px); }

  /* ───── Partnership ───── */

  /* ───── Process ───── */

  /* ───── FAQ ───── */
  .faq-item.open .faq-q { padding-bottom: 16px; }
  .faq-item.open .faq-q .toggle { transform: rotate(45deg); color: var(--accent); }
  .faq-item.open .faq-a {
    max-height: 400px; padding-bottom: 36px;
  }

  /* ───── Footer ───── */
  footer {
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 120px 0 48px;
  }
  .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 72px; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
  .footer-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px; font-weight: 500; color: var(--ink); letter-spacing: 0.04em;
  }
  .footer-logo .dot { color: var(--accent); font-style: italic; }
  .footer-tag {
    margin-top: 22px; font-size: 12px; color: var(--ink-soft); line-height: 2;
    max-width: 340px; font-weight: 300; letter-spacing: 0.04em;
  }
  .footer-addr {
    margin-top: 40px; font-size: 11px; color: var(--ink-quiet); line-height: 1.85;
    letter-spacing: 0.06em;
  }
  .footer-col h5 {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 15px; color: var(--ink-soft); letter-spacing: 0.06em;
  }
  .footer-col ul { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a {
    color: var(--ink); font-size: 13px; font-weight: 300; letter-spacing: 0.04em;
    transition: color .3s, padding-left .3s;
  }
  .footer-col ul a:hover { color: var(--accent); padding-left: 6px; }
  .footer-legal { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 28px; }
  .footer-legal a { font-size: 11px; color: var(--ink-quiet); letter-spacing: 0.06em; }
  .footer-legal a:hover { color: var(--ink); }
  .footer-bottom {
    margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: var(--ink-quiet); letter-spacing: 0.1em;
  }

  /* ───── Floating CV ───── */
  .floating-cv {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    background: rgba(20,20,24,0.85);
    backdrop-filter: blur(24px);
    border: 1px solid var(--line-bright);
    border-radius: 18px; padding: 14px 22px 16px;
    display: flex; gap: 16px; align-items: center;
    box-shadow: 0 28px 80px rgba(0,0,0,0.7);
    opacity: 0; transform: translateY(60px);
    visibility: hidden;
    pointer-events: none;
    transition: all .6s var(--ease);
    max-width: 460px;
  }
  .floating-cv[hidden] { display: none !important; }
  .floating-cv.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .floating-cv.hide { opacity: 0; visibility: hidden; transform: translateY(60px); pointer-events: none; }
  .floating-cv .body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
  .floating-cv .head { font-size: 11px; color: var(--ink); font-weight: 500; letter-spacing: 0.04em; }
  .floating-cv .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .floating-cv .actions a {
    font-size: 10px; color: var(--ink-soft); padding: 5px 12px;
    background: rgba(255,255,255,0.05); border-radius: 999px;
    transition: all .25s;
  }
  .floating-cv .actions a.primary { background: var(--accent); color: var(--ink); }
  .floating-cv .actions a:hover { background: rgba(255,255,255,0.12); }
  .floating-cv .actions a.primary:hover { background: var(--accent-deep); }
  .floating-cv .close {
    color: var(--ink-quiet); padding: 4px 8px; cursor: pointer; font-size: 16px;
    background: transparent; border: none; line-height: 1;
  }
  .floating-cv .close:hover { color: var(--ink); }

  /* ───── Scroll progress indicator ───── */
  .scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px;
    background: var(--accent);
    z-index: 9998; transition: width 0.1s linear;
    box-shadow: 0 0 12px var(--accent);
  }

  /* ═════ Hero v5 — 3D Interactive Override ═════ */
  .hero-canvas {
    position: absolute; inset: 0; z-index: 1;
    display: block; width: 100%; height: 100%;
    cursor: grab; touch-action: none;
  }
  .hero-canvas:active { cursor: grabbing; }

  /* v5 Status bar */
  .hero-status-v5 {
    position: absolute; top: 92px; left: 0; right: 0; z-index: 6;
    padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Inter', monospace; font-size: 10px; letter-spacing: 0.22em;
    color: var(--ink-soft); text-transform: uppercase;
    pointer-events: none;
  }
  .hero-status-v5 .status-l { display: flex; gap: 14px; align-items: center; }
  .hero-status-v5 .status-r { display: flex; gap: 28px; align-items: center; font-variant-numeric: tabular-nums; }
  .hero-status-v5 .ok { color: #6FE5B0; }

  /* v5 Title */
  .hero-title-v5 {
    position: absolute; top: 14vh; left: 50%; transform: translateX(-50%);
    z-index: 5; text-align: center;
    width: 100%; max-width: 1200px; padding: 0 40px;
    pointer-events: none;
  }
  .hero-marker-v5 {
    display: inline-flex; gap: 16px; align-items: center;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 13px; color: var(--ink-soft); letter-spacing: 0.18em;
    margin-bottom: 26px;
  }
  .hero-marker-v5 .line {
    width: 36px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
  }
  .hero-marker-v5 .line.r {
    background: linear-gradient(90deg, var(--accent), transparent);
  }
  .hero-title-v5 h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 400; line-height: 1.35; letter-spacing: 0.005em;
    color: var(--ink);
  }
  .hero-title-v5 h1 .line { display: block; }
  .hero-title-v5 h1 .line.l2 { min-height: 1.4em; }
  .hero-title-v5 .rotate-wrap {
    display: inline-block; overflow: hidden; vertical-align: top;
    min-width: 8em; height: 1.35em;
  }

  /* v5 CTA bottom */
  .hero-cta-v5 {
    position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%);
    z-index: 5; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    pointer-events: none;
    width: 100%; max-width: 720px; padding: 0 40px;
  }
  .hero-cta-v5 > * { pointer-events: auto; }
  .hero-cta-v5 p {
    font-size: 13px; color: var(--ink-soft); line-height: 1.95; max-width: 560px;
    font-weight: 300; letter-spacing: 0.05em; margin: 0;
  }
  .hero-cta-v5 .cta-major {
    display: inline-flex; align-items: center; gap: 18px;
    background: var(--ink); color: var(--bg);
    padding: 22px 44px; border-radius: 999px;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: 0.14em;
    text-decoration: none;
    transition: all .35s var(--ease);
    box-shadow: 0 20px 60px rgba(91,155,255,0.3);
  }
  .hero-cta-v5 .cta-major:hover {
    background: var(--accent); color: var(--ink);
    box-shadow: 0 28px 80px rgba(91,155,255,0.5);
    transform: translateY(-2px);
  }
  .hero-cta-v5 .cta-major .arrow { transition: transform .3s var(--ease); }
  .hero-cta-v5 .cta-major:hover .arrow { transform: translateX(5px); }

  /* Floating data tags */
  @keyframes floatTag {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
  }

  /* Interaction hint */
  @keyframes hintFade {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.85; }
  }
  @keyframes hintSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
  }

  /* v5 Marquee */
  .hero-marquee-v5 {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    height: 64px;
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,0.55); backdrop-filter: blur(10px);
    overflow: hidden; display: flex; align-items: center;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .hero-marquee-v5 .marquee-track {
    display: flex; gap: 48px; align-items: center;
    white-space: nowrap; animation: marqueeScroll 45s linear infinite;
    font-family: 'Cormorant Garamond', 'Noto Sans JP', sans-serif;
    font-size: 20px; font-weight: 500; letter-spacing: 0.06em;
    color: var(--ink); padding-left: 48px;
  }
  .hero-marquee-v5 .marquee-track span.sep {
    color: var(--accent); font-style: italic; font-family: 'Cormorant Garamond', serif;
  }

  /* ───── Responsive ───── */
  @media (max-width: 1100px) {
    .hero-side { display: none; }
    .hero-status { padding: 0 20px; font-size: 9px; }
    .hero-status .status-r .meta:first-child, .hero-status .status-l .meta { display: none; }
    .hero-center { padding: 0 24px; }
    .hero-massive-title { font-size: clamp(40px, 12vw, 84px); }
    .hero-marker { font-size: 12px; margin-bottom: 32px; }
    .hero-marker .line { width: 32px; }
    .hero-marquee { height: 56px; }
    .feature-grid, .industry-grid, .process-grid, .media-grid, .footer-top {
      grid-template-columns: 1fr 1fr;
    }
    .nav-primary-links, .nav-secondary { display: none; }
    .floating-cv { left: 16px; right: 16px; max-width: none; }
    .cursor-blob { display: none; }
    .container { padding: 0 24px; }
  }

  /* SP: フッターは1カラム */
  @media (max-width: 760px) {
    .footer-top { grid-template-columns: 1fr; gap: 48px; }
  }

  /* Header — flexible to viewport width */
  header.nav .nav-primary,
  header.nav .nav-secondary {
    max-width: none !important;
    width: 100% !important;
    padding: 0 max(32px, 4vw) !important;
  }
  header.nav .nav-primary-links { gap: clamp(20px, 3.5vw, 56px) !important; }

  /* ═══════════════════════════════════════════════════
     HERO v6 — CLEAN & BEAUTIFUL
     Strips away noise. Big type, soft gradient, one CTA.
     ═══════════════════════════════════════════════════ */
  /* Hide all old v5 hero elements */
  .hero-canvas,
  .hero-status-v5,
  .data-tag,
  .interaction-hint,
  .hero-marquee-v5 { display: none !important; }

  /* Soft gradient mesh background */
  .hero-mesh {
    position: absolute; inset: -20%;
    z-index: 1;
    background:
      radial-gradient(circle at 78% 22%, rgba(91, 155, 255, 0.32) 0%, transparent 38%),
      radial-gradient(circle at 22% 78%, rgba(60, 100, 220, 0.20) 0%, transparent 48%),
      radial-gradient(circle at 50% 50%, rgba(91, 155, 255, 0.06) 0%, transparent 60%);
    filter: blur(50px);
    animation: meshShift 22s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes meshShift {
    0%, 100% { transform: scale(1) translate(0, 0); }
    33% { transform: scale(1.08) translate(2%, -2%); }
    66% { transform: scale(0.96) translate(-2%, 2%); }
  }

  /* Subtle grain overlay */
  .hero-grain {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  /* Vignette frame */
  .hero-vignette {
    position: absolute; inset: 0; z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
  }

  /* Content */
  .hero-clean {
    position: relative; z-index: 5;
    text-align: center;
    padding: 0 40px;
    max-width: 1180px;
    width: 100%;
  }
  .hero-clean .eyebrow {
    display: inline-flex; gap: 16px; align-items: center;
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 14px; color: rgba(255,255,255,0.95); letter-spacing: 0.2em;
    margin-bottom: 44px;
  }
  .hero-clean .eyebrow .l {
    width: 32px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
  }
  .hero-clean .eyebrow .l.r {
    background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent);
  }
  .hero-clean h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(46px, 7.2vw, 108px);
    font-weight: 400; line-height: 1.22; letter-spacing: -0.01em;
    color: #fff;
  }
  .hero-clean h1 .accent {
    color: #5B9BFF; font-style: italic; font-weight: 500;
  }
  .hero-clean h1 .nb { white-space: nowrap; }
  .hero-clean .sub {
    margin-top: 44px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px; color: rgba(255,255,255,0.95);
    line-height: 2.05; max-width: 620px;
    margin-left: auto; margin-right: auto;
    font-weight: 300; letter-spacing: 0.04em;
  }
  .hero-clean .actions {
    margin-top: 56px;
    display: inline-flex; align-items: center; gap: 28px;
  }
  .hero-clean .cta {
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff; color: #000;
    padding: 20px 38px; border-radius: 999px;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
    text-decoration: none;
    transition: all .35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero-clean .cta:hover {
    background: #5B9BFF; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(91,155,255,0.4);
  }
  .hero-clean .cta .arrow { transition: transform .3s; }
  .hero-clean .cta:hover .arrow { transform: translateX(4px); }
  .hero-clean .secondary {
    font-family: 'Inter', sans-serif;
    font-size: 13px; color: rgba(255,255,255,0.95);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color .2s;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 4px;
  }
  .hero-clean .secondary:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
  .hero-clean .cta-note {
    margin-top: 32px;
    font-family: 'Inter', sans-serif; font-size: 11px;
    color: rgba(255,255,255,0.95); letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Scroll cue */
  @keyframes scrollCue {
    0% { top: -44px; }
    100% { top: 44px; }
  }

  @media (max-width: 1100px) {
    .hero-clean { padding: 0 28px; }
    .hero-clean h1 { font-size: clamp(38px, 11vw, 64px); }
    .hero-clean .sub { font-size: 13px; }
    .hero-clean .actions { flex-direction: column; gap: 16px; margin-top: 40px; }
  }

  /* ╔═══════════════════════════════════════════════════╗
     ║ HERO v7 — TECH IMPACT (asymmetric · JS-heavy)    ║
     ╚═══════════════════════════════════════════════════╝ */
  .hero-mesh, .hero-grain, .hero-vignette, .scroll-cue, .hero-clean { display: none !important; }

  /* Animated grid bg */
  @keyframes gridShift {
    from { background-position: 0 0; }
    to { background-position: 64px 64px; }
  }

  /* Left text column */
  .hero-v7-text { position: relative; z-index: 6; max-width: 720px; }
  .hero-v7-eyebrow {
    display: inline-flex; gap: 14px; align-items: center;
    font-family: 'Inter', monospace;
    font-size: 11px; letter-spacing: 0.24em;
    color: rgba(255,255,255,0.95);
    margin-bottom: 36px;
    text-transform: uppercase;
    /* Pattern E: readability shadow over the 3D sphere */
    text-shadow: 0 0 22px rgba(0, 0, 0, 0.85), 0 0 12px rgba(91, 155, 255, 0.35);
  }
  .hero-v7-eyebrow .live-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #6FE5B0; box-shadow: 0 0 12px #6FE5B0;
    animation: livePulse 1.6s ease-in-out infinite;
  }
  h1.hero-v7-title {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(50px, 7.4vw, 124px);
    font-weight: 400; line-height: 1.1; letter-spacing: -0.024em;
    color: #fff;
    /* Pattern E: multi-layer shadow so white text reads over bright voxels */
    text-shadow:
      0 2px 40px rgba(0, 0, 0, 0.95),
      0 4px 80px rgba(0, 0, 0, 0.85),
      0 0 120px rgba(0, 0, 0, 0.6);
  }
  h1.hero-v7-title .accent {
    color: #5B9BFF; font-style: italic; font-weight: 500;
    position: relative; display: inline-block;
    /* Pattern E: dark backing shadow + the original blue glow */
    text-shadow:
      0 2px 40px rgba(0, 0, 0, 0.95),
      0 4px 60px rgba(0, 0, 0, 0.7),
      0 0 32px rgba(91, 155, 255, 0.45);
  }
  h1.hero-v7-title .accent::before,
  h1.hero-v7-title .accent::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    opacity: 0; pointer-events: none;
  }
  h1.hero-v7-title .accent.flash::before {
    color: #FF4D6B; transform: translate(-3px, 1px);
    animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
  }
  h1.hero-v7-title .accent.flash::after {
    color: #4DFFEA; transform: translate(3px, -1px);
    animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
  }

  /* Statement h2 — same glitch/glow accent as hero */
  .statement .statement-h2 .accent {
    color: #5B9BFF; font-style: italic; font-weight: 500;
    position: relative; display: inline-block;
    text-shadow: 0 0 28px rgba(91, 155, 255, 0.45);
  }
  .statement .statement-h2 .accent::before,
  .statement .statement-h2 .accent::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    opacity: 0; pointer-events: none;
  }
  .statement .statement-h2 .accent.flash::before {
    color: #FF4D6B; transform: translate(-3px, 1px);
    animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
  }
  .statement .statement-h2 .accent.flash::after {
    color: #4DFFEA; transform: translate(3px, -1px);
    animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
  }

  .hero-v7-sub {
    margin-top: 38px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px; line-height: 2.05;
    color: rgba(255,255,255,0.95); font-weight: 300;
    max-width: 540px; letter-spacing: 0.04em;
    /* Pattern E: readability shadow */
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.92), 0 0 60px rgba(0, 0, 0, 0.6);
  }
  .hero-v7-actions {
    margin-top: 52px;
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  }
  .hero-v7-cta {
    display: inline-flex; gap: 14px; align-items: center;
    background: #fff; color: #000;
    padding: 22px 42px; border-radius: 999px;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
    text-decoration: none;
    transition: all .35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 12px 40px rgba(91, 155, 255, 0.2);
  }
  .hero-v7-cta:hover {
    background: #5B9BFF; color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 30px 80px rgba(91, 155, 255, 0.6);
  }
  .hero-v7-cta .arrow { transition: transform .3s; }
  .hero-v7-cta:hover .arrow { transform: translateX(5px); }
  .hero-v7-secondary {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 13px; color: rgba(255,255,255,0.95);
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    padding-bottom: 4px; text-decoration: none;
    transition: all .25s;
  }
  .hero-v7-secondary:hover { color: #fff; border-color: #5B9BFF; }

  .hero-v7-stats {
    margin-top: 44px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    max-width: 520px;
  }
  .hero-v7-stat .num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px; font-weight: 500;
    color: #fff; letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hero-v7-stat .num .sign { color: #5B9BFF; font-style: italic; }
  .hero-v7-stat .lbl {
    margin-top: 8px;
    font-family: 'Inter', monospace;
    font-size: 9px; color: rgba(255,255,255,0.95);
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .hero-v7-note {
    margin-top: 36px;
    font-family: 'Inter', monospace;
    font-size: 10px; color: rgba(255,255,255,0.95);
    letter-spacing: 0.28em; text-transform: uppercase;
  }

  /* Right visual column */
  .hero-v7-visual {
    position: relative; z-index: 5;
    width: 100%; aspect-ratio: 1;
    max-width: 560px;
    margin-left: auto;
  }
  .hero-canvas {
    display: block !important;
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    cursor: grab; touch-action: none;
  }
  .hero-canvas:active { cursor: grabbing; }

  .hero-static-orb {
    display: none;
    position: absolute;
    top: 50%;
    right: max(28px, 7vw);
    width: min(46vw, 560px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.96;
    contain: paint;
    background:
      radial-gradient(circle at 45% 42%, rgba(255,255,255,0.96) 0 8%, rgba(98,226,255,0.84) 9% 15%, rgba(37,99,235,0.46) 36%, rgba(20,56,150,0.24) 58%, rgba(255,255,255,0) 72%),
      radial-gradient(circle at 62% 48%, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%);
    box-shadow:
      0 0 44px rgba(63, 205, 255, 0.28),
      inset 0 0 70px rgba(37, 99, 235, 0.34);
  }
  .hero-static-orb::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background:
      conic-gradient(from 210deg, rgba(255,255,255,0) 0 12%, rgba(122,246,255,0.92) 18% 32%, rgba(255,255,255,0.96) 38% 50%, rgba(37,99,235,0.72) 62% 78%, rgba(255,255,255,0) 86% 100%);
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 68%, transparent 70%);
    mask: radial-gradient(circle, transparent 52%, #000 54%, #000 68%, transparent 70%);
  }
  .hero-static-orb::after {
    content: "";
    position: absolute;
    inset: -14%;
    background-image:
      linear-gradient(rgba(91,155,255,0.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91,155,255,0.22) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.42;
    transform: rotate(-11deg);
  }
  .hero-static-orb__letters {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: translateX(-2%);
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: clamp(84px, 12vw, 176px);
    font-weight: 900;
    letter-spacing: -0.12em;
    color: rgba(255,255,255,0.90);
    text-shadow:
      0 0 22px rgba(70,228,255,0.95),
      0 0 54px rgba(37,99,235,0.86);
  }
  html.hero-three-active .hero-static-orb {
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  .visual-label.top-l .dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: #6FE5B0; box-shadow: 0 0 10px #6FE5B0;
    animation: livePulse 1.6s ease-in-out infinite;
  }

  /* Data tags around sphere */

  /* Terminal log */
  .hero-v7-terminal {
    position: absolute; bottom: 32px; right: 80px;
    z-index: 5; width: 340px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    padding: 14px 18px;
    font-family: 'Inter', monospace; font-size: 10px;
    color: rgba(255,255,255,0.95);
  }
  .hero-v7-terminal .term-head {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.22em;
    color: rgba(255,255,255,0.95);
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-transform: uppercase;
  }
  .hero-v7-terminal .term-head .green { color: #6FE5B0; }
  @keyframes termFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Side numeric column (left bottom) */
  .hero-v7-tickers {
    position: absolute; bottom: 38px; left: 80px;
    z-index: 5;
    display: flex; gap: 32px;
    font-family: 'Inter', monospace;
  }
  .ticker-item .v.accent { color: #5B9BFF; }

  @media (max-width: 1100px) {
    .hero-v7-visual { max-width: 360px; margin: 0 auto; }
    h1.hero-v7-title { font-size: clamp(40px, 11vw, 64px); }
    .hero-v7-terminal, .hero-v7-tickers { display: none; }
  }

  /* ╔═══════════════════════════════════════════════════╗
     ║ HERO v8 — CINEMATIC RECREATION                    ║
     ║ Full-bleed canvas matching reference image        ║
     ╚═══════════════════════════════════════════════════╝ */

  /* Hide v7 noise */
  .hero-v7-stats,
  .hero-v7-tickers,
  .hero-v7-terminal,
  .data-tag,
  .visual-frame,
  .visual-label,
  .hero-v7-secondary { display: none !important; }

  /* Full-bleed canvas */
  .hero-v7-visual {
    position: absolute !important;
    inset: 0 !important;
    max-width: none !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  .hero-canvas {
    width: 100% !important; height: 100% !important;
  }

  /* ───── v9: Hero CTA buttons — match reference style ───── */
  .hero-v7-cta {
    background: #2563EB !important;
    color: #fff !important;
    padding: 18px 30px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 500 !important;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35) !important;
    min-width: 200px !important;
    justify-content: space-between !important;
  }
  .hero-v7-cta:hover {
    background: #1D4ED8 !important;
    color: #fff !important;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.5) !important;
  }
  .hero-v7-secondary {
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    background: transparent !important;
    padding: 18px 30px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.95) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-width: 200px !important;
    transition: all .25s !important;
  }
  .hero-v7-secondary:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(91, 203, 255, 0.6) !important;
  }
  .hero-v7-secondary::after {
    content: '→';
    font-size: 14px;
    color: rgba(255,255,255,0.95);
  }

  /* ───── v9: HERO LAYOUT — text left, sphere right ───── */
  .hero-v7-text {
    position: absolute !important;
    top: 42% !important;
    left: max(64px, 6vw) !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: min(620px, 50vw) !important;
    max-width: 620px !important;
    padding: 0 !important;
    pointer-events: none;
    text-align: left !important;
  }
  .hero-v7-text > * { pointer-events: auto; }
  .hero-v7-eyebrow { justify-content: flex-start !important; }
  .hero-v7-actions { justify-content: flex-start !important; }
  .hero-v7-sub { margin-left: 0 !important; margin-right: 0 !important; }

  h1.hero-v7-title {
    font-size: clamp(40px, 5.2vw, 80px) !important;
    line-height: 1.15 !important;
  }

  /* SCROLL vertical indicator */

  /* NEWS bar */
  .v9-news .arrow {
    color: rgba(255,255,255,0.95); font-size: 16px; text-align: right;
  }

  /* 4 service cards row */
  .v9-card .body { display: flex; flex-direction: column; gap: 4px; }

  /* Statement-context variant: not absolutely positioned, larger cards, glass bg */
  /* 3-column variant (Our Services under News) */

  /* Update nav: add secondary CTA + add documents button */
  .nav-cta-pair {
    display: flex; gap: 12px; align-items: center;
  }
  .nav-cta-primary {
    background: #2563EB !important;
    border: none !important;
    color: #fff !important;
    padding: 13px 24px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-decoration: none;
    transition: background 0.25s;
  }
  .nav-cta-primary:hover { background: #1D4ED8 !important; }
  .nav-cta-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s;
  }
  .nav-cta-secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.6); }

  /* Updated logo style for v9 */
  .logo-v9 {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none;
  }
  .logo-v9 .logo-mark {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5BCBFF, #2563EB);
    box-shadow: 0 0 16px rgba(91, 203, 255, 0.5);
  }
  .logo-v9 .logo-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700; font-size: 24px;
    color: #fff; letter-spacing: 0.01em;
  }

  @media (max-width: 1100px) {
    .hero-v7-text {
      left: 24px !important;
      right: 24px !important;
      width: auto !important;
      max-width: none !important;
    }
    h1.hero-v7-title { font-size: clamp(32px, 9vw, 52px) !important; }
  }
  .hero-v7-text > * { pointer-events: auto; }
  .hero-v7-text > .hero-v7-actions > * { pointer-events: auto; }

  .hero-v7-eyebrow,
  h1.hero-v7-title,
  .hero-v7-sub,
  .hero-v7-note {
    text-shadow: 0 4px 30px rgba(0,0,0,0.7);
  }
  h1.hero-v7-title {
    font-size: clamp(44px, 5.8vw, 88px) !important;
    line-height: 1.18 !important;
  }
  .hero-v7-sub { color: rgba(255,255,255,0.95) !important; }

  /* v9 overrides — hide v8 scroll cue */
  .hero-scroll-v8 { display: none !important; }

  /* Scroll cue centered bottom (legacy v8) */
  .hero-scroll-v8-legacy {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: 'Inter', monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    pointer-events: none;
  }
  .hero-scroll-v8 .line {
    width: 1px; height: 44px;
    background: linear-gradient(180deg, rgba(91, 203, 255, 0.55), transparent);
    position: relative; overflow: hidden;
  }
  .hero-scroll-v8 .line::after {
    content: ''; position: absolute; top: -44px; left: 0; right: 0;
    height: 24px;
    background: linear-gradient(180deg, transparent, #5BCBFF);
    animation: scrollFlow 2.6s ease-in-out infinite;
  }
  @keyframes scrollFlow {
    0% { top: -44px; }
    100% { top: 44px; }
  }

  @media (max-width: 1100px) {
    .hero-v7-text {
      left: 24px !important;
      right: 24px !important;
      max-width: none !important;
    }
    h1.hero-v7-title { font-size: clamp(36px, 10vw, 56px) !important; }
  }

  /* ═══════════════════════════════════════════════════
     GLOBAL FONT SIZE BUMP — readability pass
     ═══════════════════════════════════════════════════ */

  /* Nav */
  header.nav .nav-primary-links a { font-size: 15px !important; letter-spacing: 0.08em !important; text-transform: none !important; }
  .logo-v9 .logo-text { font-size: 26px !important; }
  .nav-cta-primary { font-size: 15px !important; padding: 14px 26px !important; }
  .nav-cta-secondary { font-size: 15px !important; padding: 14px 26px !important; }

  /* Hero */
  .hero-v7-eyebrow { font-size: 13px !important; }
  .hero-v7-sub { font-size: 17px !important; line-height: 2 !important; }
  .hero-v7-cta { font-size: 16px !important; padding: 20px 34px !important; min-width: 220px !important; }
  .hero-v7-secondary { font-size: 16px !important; padding: 20px 34px !important; min-width: 220px !important; }
  .hero-v7-note { font-size: 13px !important; }

  /* News bar */
  .v9-news .arrow { font-size: 18px !important; }

  /* Service cards (bottom of hero) — CRITICAL FIX */

  /* Section titles & subs */
  h2.section-title { font-size: clamp(32px, 4vw, 52px) !important; }
  .eyebrow { font-size: 16px !important; }

  /* Statement section */

  /* News list */

  /* Feature cards */

  /* Asymmetric blocks */

  /* Industries */

  /* Plan */

  /* Partnership */

  /* Process */

  /* FAQ */

  /* Footer */
  .footer-tag { font-size: 14px !important; }
  .footer-addr { font-size: 13px !important; }
  .footer-col h5 { font-size: 16px !important; }
  .footer-col ul a { font-size: 15px !important; }
  .footer-bottom { font-size: 13px !important; }
  .footer-legal a { font-size: 13px !important; }

  /* SCROLL & misc */

  /* Floating CV */
  .floating-cv .head { font-size: 13px !important; }
  .floating-cv .actions a { font-size: 12px !important; padding: 7px 14px !important; }
  .floating-cv .actions a { flex: 1 1 auto; text-align: center; white-space: nowrap; }

  /* Mobile responsive — keep proportions */
  @media (max-width: 1100px) {
    .hero-v7-sub { font-size: 15px !important; }
    .hero-v7-cta, .hero-v7-secondary { font-size: 15px !important; min-width: 0 !important; }
  }

  /* ╔═══════════════════════════════════════════════════╗
     ║ V5 OVERRIDES                                       ║
     ║ - Fixed 3D background (parallax)                   ║
     ║ - Larger body / paragraph text (18px+)             ║
     ╚═══════════════════════════════════════════════════╝ */

  /* PARALLAX: canvas is fixed to viewport so content scrolls over it */
  .hero-v7-visual {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .hero-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto;
  }
  /* Hero section becomes transparent to show fixed canvas through */
  /* Upper sections: transparent so fixed 3D scene shows through */
  /* 旧ダークテーマの名残。白テーマでは白固定（黒チラつき防止のため #000 から変更） */
  body { background: #FFFFFF !important; }

  /* News block: 白テーマに合わせ light glass（旧 dark glass から変更。white-theme.css と同値） */

  /* Footer-area sections（固定3D背景を覆う不透明背景）。
     白テーマと同値の light に統一し、旧ダーク値による初期描画のチラつきを解消。 */
  footer {
    position: relative; z-index: 2;
    background: #FFFFFF !important;
    border-top: 1px solid var(--line);
  }

  /* Text readability over the fixed 3D scene — subtle shadows */
  .hero-v7-text,
  .statement-inner,
  .news-block,
  section.section .container,
  .asym .container,
  .industries .container,
  .plan .container-tight,
  .partnership-inner,
  .process .container,
  .faq .container,
  footer .container {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
  }
  /* Cards keep their backdrop blur backgrounds for readability */
  .floating-cv {
    background: rgba(10, 12, 18, 0.85) !important;
  }
  .hero-v7-cta,
  .nav-cta-primary {
    text-shadow: none !important;
  }

  /* Body / paragraph text — bump to 18px+ for readability */
  p { font-size: 18px; line-height: 1.95; }
  .hero-v7-sub { font-size: 19px !important; line-height: 2 !important; }
  .footer-tag { font-size: 16px !important; line-height: 1.9 !important; }
  .footer-col ul a { font-size: 16px !important; }

  /* CTAs slightly larger too */
  .hero-v7-cta { font-size: 17px !important; padding: 22px 38px !important; min-width: 240px !important; }
  .hero-v7-secondary { font-size: 17px !important; padding: 22px 38px !important; min-width: 240px !important; }

  @media (max-width: 1100px) {
    .hero-v7-visual {
      position: fixed !important;
    }
    p { font-size: 16px !important; }
    .hero-v7-sub { font-size: 16px !important; }
  }

  /* ═══════════════════════════════════════════════════
     V6: AI Usecases list (under AI-Powered Ops paragraph)
     ═══════════════════════════════════════════════════ */

  /* ─── AI-Powered Ops: standalone section after Partnership ─── */
  /* Original full-width 1-column layout */

  /* Row-mode usecases container */

  /* 4-column card grid with icon-led usecases */

  /* ═══════════════════════════════════════════════════
     V6: Track Record / Results strip after AI Operations
     ═══════════════════════════════════════════════════ */
  .results-strip .result-eyebrow .line {
    width: 44px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,155,255,0.7));
  }
  .results-strip .result-eyebrow .line.r {
    background: linear-gradient(90deg, rgba(91,155,255,0.7), transparent);
  }

  /* ═══════════════════════════════════════════════════
     SP (スマホ) モバイルファースト調整
     — 全デバイスで心地よい文字サイズ・改行・余白を目指した一括上書き
     ═══════════════════════════════════════════════════ */
  @media (max-width: 600px) {
    /* ───── フロート「無料診断」ポップアップは SP 非表示 ───── */
    .floating-cv { display: none !important; }

    /* ───── ファーストビュー ───── */
    /* 球体を右へ寄せつつ、背景の隙間（ずれ）が出ないよう拡大して全面を覆う */
    .hero-canvas {
      transform: translateX(10%) scale(1.22) !important;
      transform-origin: center center !important;
    }
    /* タイトル「マーケティング予算を、」を1行に収める */
    h1.hero-v7-title {
      font-size: clamp(22px, 7.2vw, 36px) !important;
      line-height: 1.3 !important;
    }
    h1.hero-v7-title .nowrap { white-space: nowrap; }
    .hero-v7-sub { font-size: 15px !important; line-height: 1.9 !important; }

    /* ───── 全体の縦余白を圧縮（縦に短く） ───── */

    /* 見出しのサイズと余白も詰める */
    h2.section-title,
    .section-title { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.45 !important; margin-top: 12px !important; }
    .section-sub { margin-top: 18px !important; font-size: 14px !important; line-height: 1.9 !important; }
    .eyebrow { font-size: 12px !important; }

    /* ───── 改行・折り返しの調整（はみ出し防止・自然な改行） ───── */
    p,
    .hero-v7-sub,
    .section-sub,
    .asym-text p,
    .ai-ops-head p,
    .news-title { overflow-wrap: anywhere; word-break: normal; line-break: strict; }

    /* ───── ニュース：4カラムをスマホ用に再構成 ───── */

    /* ───── 選ばれる理由（asym-row）：縦積みを整える ───── */

    /* ───── AI活用領域：2カラム固定 ───── */

    /* ───── すべてのボタンのテキストを1行に ───── */
    .hero-v7-cta,
    .hero-v7-secondary,
    .news-all,
    .industries-cta,
    .service-intro-all,
    .service-intro-link-c,
    .process-cta,
    .process-cta-label,
    .plan-cta,
    .diagnosis-cta-label,
    .svc-cta-primary,
    .svc-cta-secondary,
    .partnership-all-cta,
    .diag-cta-card-arrow { white-space: nowrap !important; }

    /* 1行を保つためにボタンの文字とパディングを最適化 */
    .hero-v7-cta,
    .hero-v7-secondary,
    .process-cta,
    .plan-cta,
    .svc-cta-primary,
    .svc-cta-secondary {
      font-size: 14px !important;
      padding: 15px 22px !important;
      min-width: 0 !important;
    }
  }


/* ===== public/css/service.css ===== */
/* ═══════════════════════════════════════════════════
   Service Hub Page — Local Styles
   グローバル style.css の後に読み込む前提
   ═══════════════════════════════════════════════════ */

/* ───── Page hero ───── */
.breadcrumb {
  display: flex; gap: 12px; align-items: center;
  font-family: 'Inter', monospace; font-size: 11px;
  color: var(--ink-quiet); letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 32px;
}
.breadcrumb a { color: var(--ink-quiet); transition: color .25s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-faint); }
.breadcrumb .current { color: var(--ink); }
.page-hero-title .accent {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(91,155,255,0.4);
}

/* ───── Service Index list ───── */

.svc-row .body {
  display: flex; flex-direction: column; gap: 14px;
}
.svc-row .arrow-pill .arrow {
  transition: transform .3s var(--ease);
}
.svc-row:hover .arrow-pill .arrow { transform: translateX(4px); }

/* ───── Comparison Matrix ───── */
/* 1列目（比較軸ラベル）は左寄せのまま中央縦揃え */

/* ───── Selection Guide ───── */
.svc-guide-card .recommendation a .arrow {
  color: var(--ink-quiet); transition: transform .3s var(--ease), color .3s var(--ease);
}
.svc-guide-card .recommendation a:hover .arrow {
  color: var(--accent); transform: translateX(4px);
}

/* ───── CTA strip ───── */
.svc-cta-strip {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.svc-cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(91,155,255,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.svc-cta-inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 40px;
  text-align: center;
}
.svc-cta-inner .eyebrow {
  color: var(--accent);
}
.svc-cta-inner h2 {
  margin-top: 24px;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--ink);
}
.svc-cta-inner p {
  margin-top: 28px;
  font-size: 14px; color: var(--ink-soft); line-height: 2.1;
  font-weight: 300; max-width: 640px; margin-left: auto; margin-right: auto;
  letter-spacing: 0.04em;
}
.svc-cta-actions {
  margin-top: 56px;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.svc-cta-primary {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; letter-spacing: 0.16em; font-weight: 500;
  border-radius: 999px;
  transition: all .3s var(--ease);
}
.svc-cta-primary:hover {
  background: var(--accent); color: var(--ink);
  box-shadow: 0 0 32px rgba(91,155,255,0.4);
}
.svc-cta-primary .arrow { transition: transform .3s var(--ease); }
.svc-cta-primary:hover .arrow { transform: translateX(4px); }
.svc-cta-secondary {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px;
  border: 1px solid var(--line-bright);
  color: var(--ink);
  font-size: 13px; letter-spacing: 0.16em; font-weight: 400;
  border-radius: 999px;
  transition: all .3s var(--ease);
}
.svc-cta-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--ink);
}

/* ───── Responsive ───── */
@media (max-width: 960px) {
  .svc-cta-actions { flex-direction: column; align-items: stretch; padding: 0 24px; }
}


/* ===== public/css/white-theme.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   WHITE THEME OVERRIDE  (2026-06-05)
   読み込み順: style.css → service.css → このファイル
   黒ベースを白ベースに反転するための専用オーバーライド層。
   このファイルを削除（または HTML から読み込み解除）すれば元の黒テーマに戻ります。
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1. デザイントークン ─────
   【一本化 Stage 1】トークンは style.css の :root に統合（同値）。
   style.css が先に読み込まれるため、ここでの再定義は重複。撤去済み。
   トークンの変更は style.css の :root を編集すること。 */

/* ───── 2. ベース ───── */
html, body {
  background: #FFFFFF !important;
  color: var(--ink) !important;
}
body::before {
  /* グレイン: 黒い斑点が白背景でも目立たないよう透明度を下げる */
  opacity: 0.25 !important;
  mix-blend-mode: multiply !important;
}

/* カスタムカーソル: 白背景では青の発光で十分なので軽く */
.cursor-blob {
  background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 65%) !important;
  mix-blend-mode: multiply !important;
}

/* ───── 3. ローダー ───── */
.loader { background: #FFFFFF !important; }
.loader-mark { color: var(--ink) !important; }
.loader-mark .dot { color: var(--accent) !important; }

/* ─── ロゴ SVG (Header / Footer / Loader) ─── */
.logo-v9 { display: inline-flex; align-items: center; text-decoration: none; gap: 0; position: relative; }
.logo-v9 .logo-img {
  display: block;
  height: 34px;
  width: auto;
}

/* ─── ロゴ シマー（光のラインがロゴ形状を走る演出） ─── */
/* .logo-shine 要素を SVG ロゴ形でマスクし、その内側を青いグラデが横切る */
.logo-v9.has-shine .logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(91,155,255,0.0) 45%,
    rgba(91,155,255,0.95) 50%,
    rgba(91,155,255,0.0) 55%,
    transparent 62%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-position: -120% 0;
  /* ロゴ SVG の形状でクリップ */
  -webkit-mask: url('/assets/logos/logo.svg') no-repeat left center / contain;
          mask: url('/assets/logos/logo.svg') no-repeat left center / contain;
  -webkit-mask-position: 0 center;
          mask-position: 0 center;
  animation: logoShine 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.95;
}
@keyframes logoShine {
  0%, 72% { background-position: -120% 0; }
  100%    { background-position: 220% 0; }
}
/* モーション控えめ設定時は停止 */
@media (prefers-reduced-motion: reduce) {
  .logo-v9.has-shine .logo-shine { animation: none; }
}
.footer-logo { display: inline-block; text-decoration: none; position: relative; }
.footer-logo .footer-logo-img {
  display: block;
  height: 42px;
  width: auto;
}
/* Footer ロゴのシマー (Header と共通の .logo-shine 仕様、サイズ差吸収) */
.footer-logo.has-shine {
  display: inline-flex;
}
.footer-logo.has-shine .logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(91,155,255,0.0) 45%,
    rgba(91,155,255,0.95) 50%,
    rgba(91,155,255,0.0) 55%,
    transparent 62%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-position: -120% 0;
  -webkit-mask: url('/assets/logos/logo.svg') no-repeat left center / contain;
          mask: url('/assets/logos/logo.svg') no-repeat left center / contain;
  animation: logoShine 8s 1s ease-in-out infinite; /* Header と少しずらして自然に */
  mix-blend-mode: screen;
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
  .footer-logo.has-shine .logo-shine { animation: none; }
}
.loader-logo {
  display: block;
  width: 200px;
  height: auto;
  animation: loaderPulse 1.4s ease-in-out infinite;
}
@media (max-width: 720px) {
  .logo-v9 .logo-img { height: 28px; }
  .footer-logo .footer-logo-img { height: 36px; }
  .loader-logo { width: 160px; }
}

/* ───── 4. 免責バー ───── */

/* ───── 5. ナビ ───── */
header.nav {
  background: rgba(255,255,255,0.85) !important;
  border-bottom-color: var(--line) !important;
}
.nav-secondary {
  background: rgba(255,255,255,0.6) !important;
  border-top-color: var(--line) !important;
}
.logo, .logo-v9 .logo-text { color: var(--ink) !important; }
.nav-primary-links a { color: var(--ink-soft) !important; }
.nav-primary-links a:hover { color: var(--ink) !important; }
.nav-primary-links a::after { background: var(--ink) !important; }
.nav-cta { color: var(--ink) !important; border-color: var(--line-bright) !important; }
.nav-cta:hover { background: var(--ink) !important; color: #FFFFFF !important; }
.nav-secondary a { color: var(--ink-quiet) !important; }
.nav-secondary a:hover { color: var(--ink) !important; }

.nav-cta-primary {
  background: #2563EB !important;
  color: #FFFFFF !important;
}
.nav-cta-primary:hover { background: #1D4ED8 !important; }
.nav-cta-secondary {
  background: transparent;
  border: 1px solid rgba(11,14,20,0.25) !important;
  color: var(--ink) !important;
}
.nav-cta-secondary:hover {
  background: rgba(11,14,20,0.04) !important;
  border-color: rgba(11,14,20,0.6) !important;
}
.logo-v9 .logo-mark {
  box-shadow: 0 0 16px rgba(37,99,235,0.35) !important;
}

/* ───── 6. ヒーロー（v6, v7, v8 すべて白背景に） ───── */
.hero-bg-overlay {
  background:
    radial-gradient(800px 500px at 80% 30%, rgba(37,99,235,0.07), transparent 60%),
    linear-gradient(180deg, transparent 0%, transparent 75%, rgba(255,255,255,0.6) 92%, #FFFFFF 100%) !important;
}

/* ヒーロー固定3Dシーン (v5 OVERRIDES) — 白背景に */
body { background: #FFFFFF !important; }

/* セクション透過対応 */
.statement,
.industries,
section.section,
.news-block,
.asym,
.partnership,
.plan,
.process,
.faq,
footer {
  background: transparent !important;
}

/* 後半セクションのソリッド背景を白に */
footer {
  background: #FFFFFF !important;
  border-top-color: var(--line) !important;
}

/* ───── 7. ヒーロー内テキスト（v7） ───── */
h1.hero-v7-title {
  color: var(--ink) !important;
  text-shadow: none !important;
}
h1.hero-v7-title .accent {
  color: var(--accent) !important;
  text-shadow: 0 0 24px rgba(37,99,235,0.15) !important;
}
.hero-v7-eyebrow {
  color: var(--ink-quiet) !important;
  text-shadow: none !important;
}
.hero-v7-sub {
  color: var(--ink-soft) !important;
  text-shadow: none !important;
}
.hero-v7-note {
  color: var(--ink-quiet) !important;
  text-shadow: none !important;
}
.hero-v7-stat .num { color: var(--ink) !important; }
.hero-v7-stat .num .sign { color: var(--accent) !important; }
.hero-v7-stat .lbl { color: var(--ink-quiet) !important; }
.hero-v7-stats { border-top-color: var(--line) !important; }
.hero-v7-secondary {
  color: var(--ink) !important;
  border-color: rgba(11,14,20,0.25) !important;
}
.hero-v7-secondary:hover {
  background: rgba(11,14,20,0.04) !important;
  border-color: var(--accent) !important;
}
.hero-v7-secondary::after { color: var(--ink) !important; }

/* hero-clean (v6) */
.hero-clean h1 { color: var(--ink) !important; }
.hero-clean h1 .accent { color: var(--accent) !important; }
.hero-clean .eyebrow { color: var(--ink-quiet) !important; }
.hero-clean .eyebrow .l {
  background: linear-gradient(90deg, transparent, rgba(11,14,20,0.4)) !important;
}
.hero-clean .eyebrow .l.r {
  background: linear-gradient(90deg, rgba(11,14,20,0.4), transparent) !important;
}
.hero-clean .sub { color: var(--ink-soft) !important; }
.hero-clean .secondary {
  color: var(--ink-soft) !important;
  border-bottom-color: rgba(11,14,20,0.2) !important;
}
.hero-clean .secondary:hover {
  color: var(--ink) !important;
  border-color: rgba(11,14,20,0.6) !important;
}
.hero-clean .cta-note { color: var(--ink-quiet) !important; }
.hero-clean .cta { background: var(--ink) !important; color: #FFFFFF !important; }
.hero-clean .cta:hover { background: var(--accent) !important; color: #FFFFFF !important; }

/* ───── 8. CTA ボタン: 白背景なので dark / accent に反転 ───── */
.hero-cta-major,
.plan-cta {
  background: var(--ink) !important;
  color: #FFFFFF !important;
}
.hero-cta-major:hover,
.plan-cta:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
}

/* ───── 9. Statement セクション ───── */
.statement .statement-h2 .accent { color: var(--accent) !important; }

/* ───── 10. セクション共通 ───── */
.section-title { color: var(--ink) !important; }
.section-sub { color: var(--ink-soft) !important; }
.eyebrow { color: var(--ink-quiet) !important; }

/* ───── 11. News ───── */
.v9-news .arrow { color: var(--ink-quiet) !important; }

/* ───── 12. 4列 feature/industry/media グリッド ───── */
/* グリッド線（gap が透けて見える色）を白系に統一 */
/* media-grid を特により白く（partnership 内で背景3Dと重なるため）*/

/* media-mark (TOPの対応メディア アイコン風マーク) — サービス一覧と統一 */
/* グリッド線（gap の色）を白に */
/* グリッド全体: 外枠 + gap 1px = グリッド線 (背景色がそのまま線になる) */

/* 運用事例を見るCTA（statement-industries下） */
.industries-cta .arrow { transition: transform .3s var(--ease); }
.industries-cta:hover .arrow { transform: translateX(5px); }

/* Industry 丸アイコン — コンパクト化 */

/* AI活用領域 ラベルを大きく */

/* ───── 13. Asym ───── */

/* ───── 14. Plan ───── */

/* ───── 15. Partnership ───── */

/* ───── 16. Process ───── */

/* ───── 17. FAQ ───── */
.faq-item.open .faq-q .toggle { color: var(--accent) !important; }

/* ───── 18. Footer ───── */
footer { border-top-color: var(--line) !important; }
.footer-top { border-bottom-color: var(--line) !important; }
.footer-logo { color: var(--ink) !important; }
.footer-tag { color: var(--ink-soft) !important; }
.footer-addr { color: var(--ink-quiet) !important; }
.footer-col h5 { color: var(--ink-soft) !important; }
.footer-col ul a { color: var(--ink) !important; }
.footer-col ul a:hover { color: var(--accent) !important; }
.footer-legal a { color: var(--ink-quiet) !important; }
.footer-legal a:hover { color: var(--ink) !important; }
.footer-bottom {
  color: var(--ink-quiet) !important;
  border-top-color: var(--line) !important;
}

/* ───── 19. Floating CV ───── */
.floating-cv {
  background: rgba(255,255,255,0.92) !important;
  border-color: var(--line-bright) !important;
  box-shadow: 0 28px 80px rgba(11,14,20,0.18) !important;
}
.floating-cv .head { color: var(--ink) !important; }
.floating-cv .actions a {
  background: rgba(11,14,20,0.05) !important;
  color: var(--ink-soft) !important;
}
.floating-cv .actions a:hover { background: rgba(11,14,20,0.10) !important; }
.floating-cv .actions a.primary { background: var(--accent) !important; color: #FFFFFF !important; }
.floating-cv .actions a.primary:hover { background: var(--accent-deep) !important; }
.floating-cv .close { color: var(--ink-quiet) !important; }
.floating-cv .close:hover { color: var(--ink) !important; }

/* ───── 20. Trust pills / blocks ───── */
.hero-disclaim { color: var(--ink-faint) !important; }

/* ───── 21. プロフィールカード ───── */

/* ───── 22. AI usecases ───── */

/* ───── 23. Results strip ───── */
.results-strip .result-eyebrow .line {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.7)) !important;
}
.results-strip .result-eyebrow .line.r {
  background: linear-gradient(90deg, rgba(37,99,235,0.7), transparent) !important;
}

/* ───── 24. v9 サービスカード ───── */

/* ───── 25. デバイスモック (Hero visual) ───── */

/* ───── 26. Scroll cue / V9 scroll / hints ───── */

/* ───── 27. Hero v5 status / data tags ───── */
.hero-status-v5 { color: var(--ink-quiet) !important; }
.hero-status, .status-l, .status-r .meta { color: var(--ink-quiet) !important; }

/* ───── 28. v7 terminal / tickers ───── */
.hero-v7-terminal {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(11,14,20,0.10) !important;
  color: var(--ink-quiet) !important;
}
.hero-v7-terminal .term-head {
  color: var(--ink-quiet) !important;
  border-bottom-color: rgba(11,14,20,0.08) !important;
}
.ticker-item .v.accent { color: var(--accent) !important; }

/* ───── 29. Hero v6 mesh / overlays ───── */
.hero-mesh {
  background:
    radial-gradient(circle at 78% 22%, rgba(37,99,235,0.18) 0%, transparent 38%),
    radial-gradient(circle at 22% 78%, rgba(60,100,220,0.12) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(37,99,235,0.04) 0%, transparent 60%) !important;
}
.hero-vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(11,14,20,0.10) 100%) !important;
}
.hero-grain {
  opacity: 0.25 !important;
  mix-blend-mode: multiply !important;
}

/* ───── 30. Marquee ───── */
.hero-marquee,
.hero-marquee-v5 {
  background: rgba(255,255,255,0.6) !important;
  border-top-color: var(--line) !important;
  border-bottom-color: var(--line) !important;
}
.marquee-track,
.hero-marquee-v5 .marquee-track { color: var(--ink) !important; }
.marquee-track span.sep,
.hero-marquee-v5 .marquee-track span.sep { color: var(--accent) !important; }

/* ───── 31. グリッチ強調語: 白背景でも視認性確保 ───── */
.hero-massive-title { color: var(--ink) !important; text-shadow: none !important; }

/* ───── 32. テキストシャドウ: 白背景なので無効化 ───── */
.hero-v7-eyebrow,
h1.hero-v7-title,
.hero-v7-sub,
.hero-v7-note,
.hero-v7-text,
.statement-inner,
.news-block,
section.section .container,
.asym .container,
.industries .container,
.plan .container-tight,
.partnership-inner,
.process .container,
.faq .container,
footer .container {
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE PAGE 用 (service.css の上書き)
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Page Hero アニメーション背景（TOPに近い演出） ───── */
@keyframes pageHeroGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 56px 56px; }
}
@keyframes pageHeroMeshShift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33%      { transform: scale(1.08) translate(2%, -2%); }
  66%      { transform: scale(0.95) translate(-2%, 2%); }
}
/* PAGE HERO LINES — 左から右へラインが引かれる演出
   （削除する場合は、HTML側 .page-hero-lines ブロック ＋ この section ごと除去） */
@keyframes pageHeroLineDraw {
  0%   { transform: scaleX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  55%  { transform: scaleX(1); opacity: 0.6; }
  85%  { transform: scaleX(1); opacity: 0.25; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Page hero 内に粒子（青のドット） */
@keyframes pageHeroDotPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.9; }
}

/* page-hero-title — フォント大幅アップ + accent + glitch */
.page-hero-title .accent {
  color: var(--accent) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 28px rgba(37,99,235,0.22);
}
.page-hero-title .accent::before,
.page-hero-title .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.page-hero-title .accent.flash::before {
  color: #FF4D6B; transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
}
.page-hero-title .accent.flash::after {
  color: #4DFFEA; transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
}

/* eyebrow / sub / meta フォントUP */

/* セクション見出し・eyebrow 全般のフォントUP */
.svc-index .section-title,
.svc-matrix-section .section-title,
.svc-guide .section-title,
.svc-cta-strip h2 {
  font-size: clamp(28px, 3.8vw, 48px) !important;
  font-weight: 800 !important;
}
.svc-index .eyebrow,
.svc-matrix-section .eyebrow,
.svc-guide .eyebrow,
.svc-cta-strip .eyebrow {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
}
/* section-sub: 2行で表示するため .line を block 化 + nowrap */
.section-sub {
  font-size: 16px !important;
  line-height: 2.1 !important;
  max-width: none !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
}
.section-sub .line {
  display: block !important;
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
}
@media (max-width: 960px) {
  .section-sub { font-size: 13px !important; }
}
@media (max-width: 720px) {
  .section-sub { font-size: 12px !important; }
  .section-sub .line { white-space: normal !important; }
}

/* svc-row 内テキストのフォントUP */

/* tags：上下中央寄せ + 白背景 + 余白調整 */

/* 「詳細を見る」ボタンを黒ボタンに */
.svc-row .arrow-pill .arrow { color: #FFFFFF !important; }
.svc-row:hover .arrow-pill .arrow { transform: translateX(5px); }

/* 比較表 / Selection Guide / CTA も少し大きく */
.svc-cta-inner h2 { font-size: clamp(28px, 4vw, 52px) !important; font-weight: 800 !important; }
.svc-cta-inner p { font-size: 16px !important; line-height: 2.1 !important; }
.svc-cta-primary, .svc-cta-secondary { font-size: 15px !important; font-weight: 700 !important; padding: 20px 38px !important; }
.breadcrumb { color: var(--ink-quiet) !important; }
.breadcrumb a { color: var(--ink-quiet) !important; }
.breadcrumb a:hover { color: var(--ink) !important; }
.breadcrumb .sep { color: var(--ink-faint) !important; }
.breadcrumb .current { color: var(--ink) !important; }
.page-hero-title .accent {
  color: var(--accent) !important;
  text-shadow: 0 0 24px rgba(37,99,235,0.15) !important;
}
/* tag & arrow-pill 旧定義は下層のすりガラス/フォントUP定義で上書きするためここでは触らない */
.svc-guide-card .recommendation a .arrow { color: var(--ink-quiet) !important; }
.svc-guide-card .recommendation a:hover .arrow { color: var(--accent) !important; }

.svc-cta-strip { border-top-color: var(--line) !important; }
.svc-cta-strip::before {
  background: radial-gradient(ellipse at center, rgba(37,99,235,0.06) 0%, transparent 60%) !important;
}
.svc-cta-inner .eyebrow { color: var(--accent) !important; }
.svc-cta-inner h2 { color: var(--ink) !important; }
.svc-cta-inner p { color: var(--ink-soft) !important; }
.svc-cta-primary {
  background: var(--ink) !important;
  color: #FFFFFF !important;
}
.svc-cta-primary:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 32px rgba(37,99,235,0.30) !important;
}
.svc-cta-secondary {
  color: var(--ink) !important;
  border-color: var(--line-bright) !important;
}
.svc-cta-secondary:hover {
  background: rgba(11,14,20,0.04) !important;
  border-color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ハードコード rgba(255,255,255,*) を黒に反転
   （style.css 内に rgba(255,255,255,0.95) が大量に残るための包括対応）
   ═══════════════════════════════════════════════════════════════════ */
.hero-clean .eyebrow,
.hero-clean .sub,
.hero-clean .secondary,
.hero-clean .cta-note,
.statement-mark,
.eyebrow,
.news-eyebrow,
.hero-v7-eyebrow,
.hero-v7-sub,
.hero-v7-note,
.hero-v7-secondary,
.hero-v7-stat .lbl,
.visual-label,
.visual-label.bot-r,
.hero-v7-terminal,
.term-log .ln .t,
.term-log .ln .v,
.ticker-item .k,
.ticker-item .v,
.v9-scroll,
.v9-news .date,
.v9-news .text,
.v9-news .arrow,
.v9-card .desc,
.v9-card .chev,
.results-strip .result-eyebrow,
.result-item .result-label,
.result-disclaim,
.hero-status,
.hero-status-v5,
.hero-side {
  color: var(--ink-soft) !important;
}

/* 3Dヒーロー上のテキスト読みやすさ確保（白文字シャドウ→不要） */
.hero-v7-text * { text-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HERO TITLE FIT — 「マーケティング予算」が崩れないよう調整
   ═══════════════════════════════════════════════════════════════════ */
.hero-v7-text {
  width: min(760px, 56vw) !important;
  max-width: 760px !important;
}
h1.hero-v7-title {
  font-size: clamp(34px, 4.4vw, 64px) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.01em !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
@media (max-width: 1100px) {
  h1.hero-v7-title { font-size: clamp(28px, 7vw, 44px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO TEXT vs 3D SPHERE — 重なり対策
   球体は画面右側に固定描画されるため、中間幅でテキストと衝突する。
   1) テキストブロック全体にすりガラス背景を敷いて常に可読性確保
   2) ブレイクポイントを多段にし、中間幅でフォントサイズと幅を絞る
   ═══════════════════════════════════════════════════════════════════ */

.hero-v7-text {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  /* 球体（右側）と物理的に重ならない最大幅 */
  width: clamp(420px, 48vw, 640px) !important;
  max-width: 640px !important;
}

/* 中間幅（1100–1500px）— 球体に最も干渉しやすい帯 */
@media (max-width: 1500px) {
  .hero-v7-text {
    width: clamp(380px, 44vw, 560px) !important;
    max-width: 560px !important;
    padding: 36px 32px !important;
  }
  h1.hero-v7-title {
    font-size: clamp(30px, 3.6vw, 52px) !important;
    line-height: 1.28 !important;
  }
}

/* さらに狭い 1300px 以下 */
@media (max-width: 1300px) {
  .hero-v7-text {
    width: clamp(340px, 42vw, 500px) !important;
    max-width: 500px !important;
  }
  h1.hero-v7-title {
    font-size: clamp(26px, 3.2vw, 44px) !important;
  }
}

/* タブレット以下では球体が後ろに回るので幅をフルに */
@media (max-width: 1100px) {
  .hero-v7-text {
    width: auto !important;
    max-width: none !important;
    left: 24px !important;
    right: 24px !important;
    padding: 32px 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT WEIGHT BOOST — エフェクトのかかる強調語をさらに太く
   ═══════════════════════════════════════════════════════════════════ */
h1.hero-v7-title,
h1.hero-v7-title .accent,
h1.hero-v7-title .nowrap,
.hero-title,
.hero-massive-title,
.hero-clean h1,
.hero-clean h1 .accent,
.page-hero-title,
.page-hero-title .accent,
.statement .statement-h2,
.statement .statement-h2 .accent,
.rotate-word,
.rotate-word.glitch {
  font-weight: 800 !important;
}
/* セリフ系見出しは可読性のためのウェイトを最大に */
.hero-title .rotate-word,
.hero-massive-title .rotate-word,
.hero-v7-title .accent,
.statement-h2 .accent {
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLASS MASK — 3D背景と重なる要素に半透明白マスクを追加
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Apple風すりガラス共通スタイル ─────
   半透明・強いblur・saturate・内側ハイライトで本物の frosted glass に */
.hero-v7-secondary,
.asym-text,
.partnership-text,
.statement-inner,
.ai-ops-head,
.news-block {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 16px 50px rgba(11,14,20,0.10) !important;
}

/* サービスを見る（ヒーロー2次CTA）追加調整 — 透過をやめてソリッド白に */
.hero-v7-secondary {
  color: var(--ink) !important;
  background: #FFFFFF !important;
  border-color: rgba(11,14,20,0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-v7-secondary:hover {
  background: #EEF3FF !important;
  border-color: var(--accent) !important;
}

/* asym-text（AIクリエイティブ等のテキストブロック）→ ガラスカード化
   画像と同じ高さに揃える（stretch 配置） */

/* asym-visual の coming（背景アニメと重なるオーブ）→ ガラス化 */

/* partnership-text → ガラスカード化（右側 media-grid と高さを揃える） */

/* statement の中身（見出しブロック）→ ガラス化（パディングはオリジナル準拠）*/

/* section-title 周りの container も透明背景対策 — eyebrow + section-title のラッパー */
.section-title,
.eyebrow {
  position: relative;
}

/* AI ops の見出し部は背景なしに（テキストのみ）*/

/* news-block すりガラス */

/* feature-card / industry-cell / media-cell も Apple風すりガラスに */

/* feature-card のテキスト/画像の縦位置を揃える
   - 各カード height を CSS Grid が自動で揃える
   - .visual を margin-top:auto で常に下端へ寄せる
   - .desc に min-height を持たせてテキスト下端も近づける */

/* ═══════════════════════════════════════════════════════════════════
   Strengths（LOadsが選ばれる3つの理由）
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Partnership セクション — 見出し ＋ 下部ボタン
   ═══════════════════════════════════════════════════════════════════ */
.partnership-head-eyebrow.eyebrow {
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-size: 13px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.14em;
  font-weight: 700;
}
.partnership-head-title.section-title {
  margin-top: 18px;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: 0.025em;
  line-height: 1.65;
}
.partnership-head-title .accent,
.ai-ops-head h3 .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 24px rgba(37,99,235,0.18);
}
/* glitch flash on partnership-head-title / ai-ops accent */
.partnership-head-title .accent::before,
.partnership-head-title .accent::after,
.ai-ops-head h3 .accent::before,
.ai-ops-head h3 .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.partnership-head-title .accent.flash::before,
.ai-ops-head h3 .accent.flash::before {
  color: #FF4D6B; transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
}
.partnership-head-title .accent.flash::after,
.ai-ops-head h3 .accent.flash::after {
  color: #4DFFEA; transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
}
.partnership-all-cta .arrow { transition: transform .3s var(--ease); }
.partnership-all-cta:hover .arrow { transform: translateX(5px); }

/* Statement内のタグ（上場企業 / 中堅企業）*/

/* plan-card 透過マスク強化 */

/* profile-card 透過マスク強化 */

/* asym-row のレイアウトを padding 増加に合わせて調整 */

/* レスポンシブで padding 抑制 */

/* ═══════════════════════════════════════════════════════════════════
   STATEMENT セクション縦積み化
   オリジナルの .statement は display:flex で center 配置 + min-height 100vh。
   lead-message / statement-inner / service-intro の3ブロックを縦積みしつつ、
   オリジナルの「画面全高セクション」のスケール感を維持する。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   リードメッセージ（statement-inner 上）
   ═══════════════════════════════════════════════════════════════════ */
.lead-message-title .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  text-shadow: 0 0 24px rgba(37,99,235,0.18);
  position: relative;
  display: inline-block;
}
/* glitch flash on lead-message accent */
.lead-message-title .accent::before,
.lead-message-title .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.lead-message-title .accent.flash::before {
  color: #FF4D6B;
  transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1;
  opacity: 0.85;
}
.lead-message-title .accent.flash::after {
  color: #4DFFEA;
  transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1;
  opacity: 0.85;
}
.lead-message-body .accent {
  color: var(--accent);
  font-weight: 800;
  font-style: normal;
  text-shadow: 0 0 22px rgba(37,99,235,0.20);
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   サービス紹介（第三階層 5サービス）
   ═══════════════════════════════════════════════════════════════════ */
/* 各行を必ず別ブロックに */
.service-intro-sub .line,
.service-intro-sub > span.line {
  display: block !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}
@media (max-width: 760px) {
  .service-intro-sub .line { white-space: normal !important; }
}
/* 英語サブ（Marketing Consulting等）は非表示 */
/* main accent in service-intro-title (glitch flash) */
.service-intro-title .accent {
  color: var(--accent) !important;
  font-style: italic;
  font-weight: 800 !important;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 24px rgba(37,99,235,0.18);
}
.service-intro-title .accent::before,
.service-intro-title .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.service-intro-title .accent.flash::before {
  color: #FF4D6B; transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
}
.service-intro-title .accent.flash::after {
  color: #4DFFEA; transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
}
.service-intro-all .arrow { transition: transform .3s var(--ease); }
.service-intro-all:hover .arrow { transform: translateX(4px); }

/* service-intro-card のサイズ感を 3カラム用に強化 */

/* Responsive */

/* ═══════════════════════════════════════════════════════════════════
   プロセスセクション CTA — 「診断申込からレポート提示まで」直下
   ═══════════════════════════════════════════════════════════════════ */

/* eyebrow-inline 先頭の横棒（::before）を削除 */

/* ═══════════════════════════════════════════════════════════════════
   診断CTA（広告診断 / SEO診断） — plan-card と同じ横幅で整列
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   代表者プロフィール 見出し
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   STEP/SECTION HEADINGS BOLDER
   フォームから申込・診断・各ステップなどの見出しをさらに太く
   ═══════════════════════════════════════════════════════════════════ */
.process-step h4,
.feature-card h4,
.news-block h3,
.asym-text h3,
.partnership-text h3,
.plan-left h3,
.ai-ops-head h3,
.svc-cta-inner h2,
.section-title,
.page-hero-title,
.statement h2,
.statement .statement-h2,
.faq-q .text {
  font-weight: 800 !important;
}
.process-num,
.feature-mark,
.eyebrow,
.eyebrow-inline,
.news-eyebrow,
.page-hero-eyebrow,
.asym-text .eyebrow-inline,
.partnership-text .eyebrow-inline,
.plan-left .plan-name,
.ai-ops-head .eyebrow-inline,
.ai-usecases-label,
.results-strip .result-eyebrow,
.hero-v7-eyebrow,
.hero-clean .eyebrow,
.statement-mark { font-weight: 700 !important; }

/* CTA系もよりはっきり */
.hero-v7-cta,
.hero-v7-secondary,
.hero-cta-major,
.hero-clean .cta,
.plan-cta,
.svc-cta-primary,
.svc-cta-secondary,
.nav-cta-primary,
.nav-cta-secondary,
.news-all,
.svc-row .arrow-pill { font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════════
   SECTION-TITLE ACCENT — 媒体運用/売上/一本の設計 等にグリッチ強調
   ═══════════════════════════════════════════════════════════════════ */
.section-title .accent {
  color: var(--accent) !important;
  font-weight: 800 !important;
  font-style: italic;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 24px rgba(37,99,235,0.18);
}
.section-title .accent::before,
.section-title .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
}
.section-title .accent.flash::before {
  color: #FF4D6B;
  transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1;
  opacity: 0.85;
}
.section-title .accent.flash::after {
  color: #4DFFEA;
  transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   FONT WEIGHT BUMP — 全体的に文字を太く
   ═══════════════════════════════════════════════════════════════════ */

/* 本文・ベース */
body { font-weight: 400 !important; }
p { font-weight: 400 !important; }

/* 主要見出し (Noto Serif JP 400 → 500/600) */
h1, h2, h3, h4, h5, h6 { font-weight: 500 !important; }
.hero-title,
.hero-massive-title,
h1.hero-v7-title,
.hero-clean h1 {
  font-weight: 600 !important;
}
.section-title,
.statement h2,
.statement .statement-h2 {
  font-weight: 600 !important;
}
.news-block h3,
.asym-text h3,
.partnership-text h3,
.plan-left h3,
.ai-ops-head h3,
.svc-cta-inner h2 {
  font-weight: 600 !important;
}

/* サブ・リード */
.hero-sub,
.hero-massive-sub,
.hero-v7-sub,
.hero-clean .sub,
.page-hero-sub,
.section-sub,
.statement p,
.asym-text p,
.partnership-text p,
.feature-card .desc,
.process-step .desc,
.faq-a,
.plan-list-item,
.svc-cta-inner p,
.svc-row .desc {
  font-weight: 400 !important;
}

/* ナビ */
.nav-primary-links a,
.nav-secondary a { font-weight: 500 !important; }
.nav-cta-primary,
.nav-cta-secondary,
.nav-cta { font-weight: 600 !important; }
.logo, .logo-v9 .logo-text { font-weight: 700 !important; }
.footer-logo { font-weight: 600 !important; }

/* CTA */
.hero-cta-major,
.hero-v7-cta,
.hero-clean .cta,
.plan-cta,
.svc-cta-primary,
.svc-cta-secondary,
.hero-v7-secondary,
.hero-cta-v5 .cta-major,
.news-all { font-weight: 700 !important; }

/* タグ・ピル・ラベル */
.eyebrow,
.hero-v7-eyebrow,
.hero-v7-note,
.hero-clean .eyebrow,
.statement-mark,
.news-eyebrow,
.page-hero-eyebrow,
.feature-mark,
.asym-text .eyebrow-inline,
.partnership-text .eyebrow-inline,
.plan-left .plan-name,
.process-num,
.ai-ops-head .eyebrow-inline,
.ai-usecases-label,
.results-strip .result-eyebrow,
.breadcrumb,
.svc-row .cat,
.svc-row .status,
.svc-guide-card .mark { font-weight: 600 !important; }

/* News / リスト */

/* Footer */
.footer-tag { font-weight: 400 !important; }
.footer-addr { font-weight: 500 !important; }
.footer-col h5 { font-weight: 600 !important; }
.footer-col ul a { font-weight: 500 !important; }
.footer-bottom,
.footer-legal a,
.footer-cert .cert-item { font-weight: 500 !important; }

/* FAQ */

/* Industry / Media cells */

/* Trust / hero stats */
.hero-v7-stat .num,
.trust-block .num,
.result-item .result-num,
.plan-price { font-weight: 600 !important; }
.hero-v7-stat .lbl,
.trust-block .label,
.result-item .result-label { font-weight: 600 !important; }

/* プロフィール */

/* サービス一覧 (service.html) */

/* AI usecases */

/* Floating CV */
.floating-cv .head { font-weight: 600 !important; }
.floating-cv .actions a { font-weight: 500 !important; }
.floating-cv .actions a.primary { font-weight: 600 !important; }

/* スクロールキュー・ヒント */

/* ═══════════════════════════════════════════════════════════════════
   運用型広告セクション (svc-performance)
   ═══════════════════════════════════════════════════════════════════ */
/* section-title 内の "/" を装飾的に */
.svc-performance .section-title .slash {
  display: inline-block;
  color: var(--ink-quiet);
  font-weight: 300;
  margin: 0 0.18em;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE — コンサルティング（service-consulting.html）
   ═══════════════════════════════════════════════════════════════════ */

/* ----- 課題セクション ----- */

/* ----- 提供内容 ----- */

/* ----- Approach（asym） ----- */

/* ----- Process ----- */

/* ----- Related Services ----- */

/* ----- アクセント accent (service-consulting page-hero + sections) ----- */
.page-hero-title .accent + .accent { margin-left: 6px; }
.svc-detail-problems .section-title .accent,
.svc-detail-offerings .section-title .accent,
.svc-detail-approach .section-title .accent,
.svc-detail-process .section-title .accent,
.svc-detail-related .section-title .accent {
  color: var(--accent) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 22px rgba(37,99,235,0.18);
}
.svc-detail-problems .section-title .accent::before,
.svc-detail-problems .section-title .accent::after,
.svc-detail-offerings .section-title .accent::before,
.svc-detail-offerings .section-title .accent::after,
.svc-detail-approach .section-title .accent::before,
.svc-detail-approach .section-title .accent::after,
.svc-detail-process .section-title .accent::before,
.svc-detail-process .section-title .accent::after,
.svc-detail-related .section-title .accent::before,
.svc-detail-related .section-title .accent::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.svc-detail-problems .section-title .accent.flash::before,
.svc-detail-offerings .section-title .accent.flash::before,
.svc-detail-approach .section-title .accent.flash::before,
.svc-detail-process .section-title .accent.flash::before,
.svc-detail-related .section-title .accent.flash::before {
  color: #FF4D6B; transform: translate(-3px, 1px);
  animation: glitchA 0.42s steps(2) 1; opacity: 0.85;
}
.svc-detail-problems .section-title .accent.flash::after,
.svc-detail-offerings .section-title .accent.flash::after,
.svc-detail-approach .section-title .accent.flash::after,
.svc-detail-process .section-title .accent.flash::after,
.svc-detail-related .section-title .accent.flash::after {
  color: #4DFFEA; transform: translate(3px, -1px);
  animation: glitchB 0.42s steps(2) 1; opacity: 0.85;
}

/* レスポンシブ */

/* ═══════════════════════════════════════════════════════════════════
   サブカテゴリ詳細ページ（動的ルート [slug].astro 用）
   ═══════════════════════════════════════════════════════════════════ */
/* ─── MDX 内のリンク (SEO 重視: 内部リンク誘導が明確) ─── */

/* ─── MDX 内のテーブル ─── */

/* ─── MDX 内のブロッククォート (Q&A 等) ─── */

/* ─── タグ一覧 (svc-detail-tags) ─── */
.svc-detail-tags-head .eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.22em;
  font-weight: 700;
}
.svc-detail-tags-head .section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   RelatedCases コンポーネント
   ═══════════════════════════════════════════════════════════════════ */
.related-cases {
  padding: 100px 0;
}
.related-cases-head {
  text-align: center;
  margin-bottom: 56px;
}
.related-cases-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.22em;
  font-weight: 700;
}
.related-cases-title {
  margin-top: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.related-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.related-case-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 28px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(11,14,20,0.08);
  box-shadow: 0 10px 24px rgba(11,14,20,0.05);
  text-decoration: none;
  transition: all .25s var(--ease);
  height: 100%; /* グリッドセル高さに揃える */
}
.related-case-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(37,99,235,0.15);
}
.related-case-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-quiet);
  letter-spacing: 0.14em;
  font-weight: 600;
  min-height: 18px;
}
.related-case-client {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-case-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.55;
  /* 3 行に丸める */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(17px * 1.55 * 3); /* 3 行分の高さで揃える */
}
.related-case-title-num {
  color: var(--accent);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.related-case-summary {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-soft);
  /* 4 行に丸める */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.9 * 4); /* 4 行分の高さで揃える */
}
.related-case-arrow {
  margin-top: auto; /* カード下部に押し下げ */
  padding-top: 16px;
  border-top: 1px solid rgba(11,14,20,0.08);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.14em;
}

@media (max-width: 980px) {
  .related-cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .related-cases-grid { grid-template-columns: 1fr; }
  .related-case-title { min-height: auto; }
  .related-case-summary {
    min-height: auto;
    -webkit-line-clamp: 5;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE v2 — コンサル詳細を一覧と差別化
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1. Detail Hero ───── */

/* ───── 2. About ───── */
/* About 1行目を 1 行表示に固定（狭い画面では折り返しを許可） */

/* コンサルページの代表者プロフィール (進め方の手前) */

/* ═══════════════════════════════════════════════════════════════════
   CONSULTING DETAIL — NEW SECTIONS (Webコンサルティングとは / お悩み / 比較 / 契約フロー)
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1.5 Webコンサルティングとは ───── */

/* ───── 1.7 このようなお悩み ───── */

/* ───── 4.3 他社との比較 ───── */
.svc-detail-comparison-table thead th.is-loads {
  background: var(--accent);
  color: #FFFFFF;
  font-size: 18px;
}
.svc-detail-comparison-table tbody td.is-loads {
  background: rgba(37,99,235,0.04);
}
/* 文章を入れる比較テーブル（診断ページ等）は、記号テーブル(22px)より小さく・左寄せにして読みやすくする */
.svc-detail-comparison-table.is-text tbody td {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  text-align: left;
  padding: 16px 18px;
  vertical-align: top;
  color: var(--ink);
}
.svc-detail-comparison-table.is-text thead th {
  font-size: 14px;
  text-align: left;
  padding: 16px 18px;
}
.svc-detail-comparison-table.is-text thead th.svc-detail-comparison-axis-th {
  padding-left: 18px;
}
.svc-detail-comparison-table.is-text tbody td.svc-detail-comparison-axis {
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  padding-left: 18px;
}
.svc-detail-comparison-table.is-text tbody td.mark-best {
  font-weight: 700;
}

/* ───── 6.5 ご契約までの流れ ───── */

/* ═══════════════════════════════════════════════════════════════════
   CASE DETAIL — 個別事例ページ
   ═══════════════════════════════════════════════════════════════════ */
.case-detail-hero {
  padding: 140px 0 80px;
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(11,14,20,0.06);
}
.case-detail-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.case-detail-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-quiet);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.case-detail-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.case-detail-summary {
  margin-top: 28px;
  font-size: 17px;
  line-height: 2.0;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}
.case-detail-tags {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.case-detail-tag {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(37,99,235,0.10);
  color: var(--accent);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background .25s var(--ease);
}
.case-detail-tag:hover { background: rgba(37,99,235,0.18); }
.case-detail-tag--industry {
  background: rgba(11,14,20,0.06);
  color: var(--ink-soft);
  cursor: default;
}

/* Metrics */
.case-detail-metrics {
  padding: 100px 0;
  background: #FFFFFF;
}
.case-detail-metrics-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case-detail-metric {
  text-align: center;
  padding: 36px 20px;
  background: #F4F8FF;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 18px;
}
.case-detail-metric-val {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.case-detail-metric-lbl {
  margin-top: 12px;
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-quiet);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .case-detail-metrics-grid { grid-template-columns: 1fr; }
}

/* Body (MDX) */
.case-detail-body {
  padding: 100px 0 120px;
  background: #FFFFFF;
}
.case-detail-article {
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.case-detail-article h2 {
  margin-top: 56px;
  margin-bottom: 24px;
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  padding-left: 18px;
  border-left: 4px solid var(--accent);
  line-height: 1.5;
}
.case-detail-article h2:first-child { margin-top: 0; }
.case-detail-article h3 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.case-detail-article p { margin-bottom: 20px; }
.case-detail-article ul,
.case-detail-article ol {
  margin: 16px 0 28px 24px;
}
.case-detail-article li {
  margin-bottom: 12px;
  padding-left: 6px;
}
.case-detail-article strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 70%, rgba(37,99,235,0.18) 70%);
  padding: 0 2px;
}

/* ── テーブル ── */
.case-detail-article table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 15px;
  background: #FFFFFF;
  border: 1px solid rgba(11,14,20,0.10);
  border-radius: 10px;
  overflow: hidden;
}
.case-detail-article thead th {
  background: rgba(37,99,235,0.06);
  padding: 14px 18px;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  border-bottom: 2px solid rgba(37,99,235,0.18);
}
.case-detail-article tbody td {
  padding: 14px 18px;
  border-top: 1px solid rgba(11,14,20,0.06);
  vertical-align: middle;
  color: var(--ink-soft);
}
.case-detail-article tbody tr:hover td {
  background: rgba(37,99,235,0.03);
}
.case-detail-article tbody td:first-child {
  font-weight: 700;
  color: var(--ink);
}

/* ── 引用 (お客様の声) ── */
.case-detail-article blockquote {
  margin: 36px 0;
  padding: 28px 32px;
  background: #F4F8FF;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  line-height: 2.0;
  color: var(--ink);
  font-style: normal;
}
.case-detail-article blockquote p {
  margin: 0;
}
.case-detail-article blockquote p + p {
  margin-top: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--ink-quiet);
  letter-spacing: 0.06em;
}

/* ── 水平線 ── */
.case-detail-article hr {
  margin: 56px 0;
  border: none;
  border-top: 1px dashed rgba(11,14,20,0.18);
}

/* ── インラインコード (たまに使う) ── */
.case-detail-article code {
  background: rgba(11,14,20,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Inter', monospace;
  font-size: 14px;
  color: var(--ink);
}

@media (max-width: 720px) {
  .case-detail-hero { padding: 100px 0 40px; }
  .case-detail-body { padding: 64px 0 80px; }
  .case-detail-article h2 { font-size: 22px; }
  .case-detail-article table { font-size: 13px; display: block; overflow-x: auto; }
  .case-detail-article blockquote { padding: 22px 20px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CASES ARCHIVE — テキスト主体 (画像なし)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cases-hero {
  padding: 140px 0 64px;
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(11,14,20,0.06);
}
.cases-hero .breadcrumb { margin-bottom: 28px; }
.cases-hero-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.24em;
  margin-bottom: 16px;
}
.cases-hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.cases-hero-lead {
  margin-top: 24px;
  max-width: 760px;
  font-size: 17px;
  line-height: 2.0;
  color: var(--ink-soft);
}
.cases-hero-lead strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 70%, rgba(37,99,235,0.16) 70%);
}
.cases-hero-nda {
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}

/* ── Filters ── */
.cases-filters {
  padding: 40px 0 24px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(11,14,20,0.06);
}
.cases-filters-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 14px 0;
  align-items: flex-start;
}
.cases-filters-row + .cases-filters-row {
  border-top: 1px dashed rgba(11,14,20,0.08);
}
.cases-filters-label {
  font-family: 'Inter', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-quiet);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 6px;
}
.cases-filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cases-chip {
  cursor: pointer;
  appearance: none;
  border: 1px solid rgba(11,14,20,0.14);
  background: #FFFFFF;
  color: var(--ink-soft);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  transition: all .25s var(--ease);
}
.cases-chip:hover {
  border-color: rgba(37,99,235,0.4);
  color: var(--accent);
}
.cases-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
.cases-filters-count {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,14,20,0.06);
  font-size: 14px;
  color: var(--ink-quiet);
}
.cases-filters-count #cases-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 6px;
}
@media (max-width: 720px) {
  .cases-filters-row { grid-template-columns: 1fr; gap: 8px; }
  .cases-filters-label { padding-top: 0; }
}

/* ── Cases list (テキスト主体) ── */
.cases-list {
  padding: 64px 0 100px;
  background: #FFFFFF;
}
.cases-list-inner {
  display: flex;
  flex-direction: column;
}
.case-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 40px 28px;
  margin: 0 -28px;
  border-top: 1px solid rgba(11,14,20,0.08);
  transition: background .25s var(--ease);
}
.case-item:last-child { border-bottom: 1px solid rgba(11,14,20,0.08); }
.case-item:hover { background: rgba(37,99,235,0.03); }

/* 業種ラベル (上部の小さな帯) */
.case-item-industry {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.case-item-industry-label {
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-quiet);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(11,14,20,0.14);
  border-radius: 4px;
}
.case-item-industry-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* タイトル */
.case-item-title {
  margin: 6px 0 22px 0;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.02em;
  transition: color .25s var(--ease);
}
.case-item:hover .case-item-title { color: var(--accent); }

/* 共通ブロック (改善結果 / 提供サービス) */
.case-item-block {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: start;
}
.case-item-block-label {
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-quiet);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 14px 4px 0;
  border-right: 1px solid rgba(11,14,20,0.1);
  align-self: stretch;
}

/* 改善結果 (bullet 付き) */
.case-item-improvements {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-item-improvements li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.case-item-improvements li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* 提供サービス (chip 形式) */
.case-item-services {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-item-services li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* 矢印 */
.case-item-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  transition: gap .25s var(--ease);
}
.case-item:hover .case-item-arrow { gap: 14px; }

@media (max-width: 720px) {
  .case-item { padding: 32px 0; margin: 0; }
  .case-item:last-child { border-bottom: none; }
  .case-item-block { grid-template-columns: 1fr; gap: 10px; }
  .case-item-block-label {
    border-right: none;
    padding: 0;
    align-self: auto;
  }
}

/* 空状態 */
.cases-empty {
  margin-top: 56px;
  text-align: center;
  padding: 60px 20px;
  background: #F4F8FF;
  border: 1px dashed rgba(37,99,235,0.25);
  border-radius: 14px;
  color: var(--ink-quiet);
  font-size: 16px;
}

/* ── 業種別支援実績数 ── */
.cases-industries {
  padding: 100px 0;
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  border-top: 1px solid rgba(11,14,20,0.06);
}
.cases-industries-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cases-industry-card {
  background: #FFFFFF;
  border: 1px solid rgba(11,14,20,0.08);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cases-industry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,0.3);
  box-shadow: 0 14px 30px rgba(37,99,235,0.10);
}
.cases-industry-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
.cases-industry-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT — 会社概要 (1 ページ完結)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.about-hero .breadcrumb { margin-bottom: 28px; }

/* ── Purpose ── */

/* ── 代表メッセージ ── */

/* ── 会社情報 ── */

/* ── 沿革 ── */

/* ── 取引先 ── */

/* ── アクセス ── */

/* ═══════════════════════════════════════════════════════════════════
   CONTACT — お問い合わせハブ
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.contact-hero .breadcrumb { margin-bottom: 28px; }

/* ── 用途別カード ── */
.contact-channel-card.is-accent {
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  border-color: rgba(37,99,235,0.30);
}
/* ═══════════════════════════════════════════════════════════════════
   /downloads/ — お役立ち資料 (kaonavi 風レイアウト)
   ═══════════════════════════════════════════════════════════════════ */

/* DOWNLOADS 共通テーマ変数 */
:root {
  --dl-accent: #2563EB;
  --dl-accent-soft: #EEF3FF;
  --dl-accent-band: #F4F8FF;
  --dl-card-bg: #FFFFFF;
  --dl-card-radius: 10px;
}

/* Hero */
.dl-kao-hero .container { max-width: 1080px; }
.dl-kao-hero-bundle-cta .arrow { transition: transform 0.2s ease; }
.dl-kao-hero-bundle-cta:hover .arrow { transform: translateX(4px); }

/* Hero ビジュアル (3 ドキュメントの重なりイラスト) */

/* アンカーナビ (kaonavi 風: 青帯背景の中にピル型タブ) */
.dl-kao-anchor-nav .container { display: flex; justify-content: center; }

/* セクション (kaonavi 風: 青帯 / 白を交互) */

/* グリッド */

/* カード (kaonavi 風: 白カード + 影、シンプル) */

/* カバー (グラデーション + 文書イラスト) */
/* 中央の文書アイコン */

/* カードボディ (kaonavi 風: タイトル中心、シンプル) */
.dl-kao-card-cta .arrow { transition: transform 0.2s ease; }
.dl-kao-card:hover .dl-kao-card-cta .arrow { transform: translateX(4px); }

/* カードカバー画像のオーバーレイ調整 (kaonavi 風) */

/* TOP: 無料診断 CTA セクション */

/* About LOads (AIO 向けの会社紹介・FAQ 構造化テキスト) */

/* 2 列 × 2 段レイアウト (お問い合わせ窓口 4 種) */

/* HubSpot 埋め込み用ラップ */
/* フォームページ: 全フォームの幅を揃えて中央寄せ */
.form-page .container-tight { max-width: 720px; }
.form-hubspot-wrap {
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid rgba(11,14,20,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11,14,20,0.04);
}
.form-hubspot-wrap iframe { max-width: 100%; }
/* fieldset の標準枠線/余白をリセット（フォームごとに枠が出るのを防ぐ） */
.form-hubspot-wrap fieldset { border: 0 !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; max-width: 100% !important; }
.form-hubspot-wrap fieldset > legend { display: none !important; }
/* reCAPTCHA バッジを UI から非表示（reCAPTCHA 自体は機能維持） */
.form-hubspot-wrap .hs-form-field { margin-bottom: 18px; }
.form-hubspot-wrap label { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; color: var(--ink); }
.form-hubspot-wrap input[type="text"],
.form-hubspot-wrap input[type="email"],
.form-hubspot-wrap input[type="tel"],
.form-hubspot-wrap input[type="url"],
.form-hubspot-wrap input[type="number"],
.form-hubspot-wrap input[type="password"],
.form-hubspot-wrap input[type="date"],
.form-hubspot-wrap input[type="file"],
.form-hubspot-wrap textarea,
.form-hubspot-wrap select {
  width: 100% !important;
  max-width: 100% !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 16px !important;
  min-height: 48px !important;
  line-height: 1.6 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(11,14,20,0.18) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--ink) !important;
  box-sizing: border-box !important;
}
.form-hubspot-wrap select {
  appearance: none !important; -webkit-appearance: none !important; height: auto !important;
  padding-right: 40px !important; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%3E%3Cpath%20d%3D%27M1%201.5l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27%236B7280%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important;
}
.form-hubspot-wrap textarea { min-height: 120px !important; }
.form-hubspot-wrap ::placeholder { color: #9AA3AF !important; opacity: 1 !important; }
.form-hubspot-wrap input:focus,
.form-hubspot-wrap textarea:focus,
.form-hubspot-wrap select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10) !important;
}
.form-hubspot-wrap .hs-button,
.form-hubspot-wrap input[type="submit"] {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  background: var(--accent) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: 0.08em !important;
  padding: 18px 32px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 26px rgba(37,99,235,0.35) !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.form-hubspot-wrap .hs-button:hover,
.form-hubspot-wrap input[type="submit"]:hover {
  background: #1D4ED8 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(37,99,235,0.45) !important;
}
/* 必須バッジ（* → 必須）・同意チェックの上下ずれ解消（インライン描画時） */
.form-hubspot-wrap .hs-form .hs-form-required {
  display: inline-block !important; margin-left: 6px !important;
  font-size: 0 !important; line-height: 0 !important; vertical-align: middle !important;
}
.form-hubspot-wrap .hs-form .hs-form-required::after {
  content: '必須'; display: inline-block; font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 700; line-height: 1; color: #FFFFFF;
  background: #E45252; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em;
}
.form-hubspot-wrap .hs-form .hs-form-booleancheckbox label,
.form-hubspot-wrap .hs-form .hs-form-booleancheckbox-display,
.form-hubspot-wrap .hs-form .legal-consent-container label {
  display: flex !important; align-items: center; gap: 8px;
  margin-bottom: 0 !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.6;
}
.form-hubspot-wrap .hs-form .hs-form-booleancheckbox input[type="checkbox"],
.form-hubspot-wrap .hs-form .legal-consent-container input[type="checkbox"] {
  flex-shrink: 0; width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 0 !important;
}
/* reCAPTCHA 表示要素を畳む（機能維持）＋送信ボタンとの間隔を詰める */
.form-hubspot-wrap .hs-form .hs_recaptcha,
.form-hubspot-wrap .hs-form .hs-recaptcha,
.form-hubspot-wrap .hs-form div[class*="recaptcha"] { display: none !important; }
.form-hubspot-wrap .hs-form .hs-submit { margin-top: 0 !important; }
.form-hubspot-wrap .hs-error-msgs label,
.form-hubspot-wrap .hs-error-msg {
  color: #D32F2F !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── HubSpot フォームの表示崩れ防止（インライン描画時） ── */
.form-hubspot-wrap .hs-form-field { width: 100% !important; margin-bottom: 18px !important; }
.form-hubspot-wrap .hs-form .hs-form-field > label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.6; }
.form-hubspot-wrap .hs-form .hs-form-required { color: #D32F2F; margin-left: 2px; }
.form-hubspot-wrap .hs-form .hs-field-desc { font-size: 12px; color: var(--ink-quiet); margin: 0 0 6px; }
.form-hubspot-wrap .hs-form .input { margin-right: 0 !important; }
.form-hubspot-wrap .hs-form fieldset { max-width: 100% !important; }
.form-hubspot-wrap .hs-form fieldset .hs-form-field { float: none !important; width: 100% !important; padding: 0 !important; }
.form-hubspot-wrap .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.form-hubspot-wrap .hs-form .inputs-list > li { margin-bottom: 8px; }
.form-hubspot-wrap .hs-form .inputs-list label { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; margin-bottom: 0; line-height: 1.6; }
.form-hubspot-wrap .hs-form input[type="checkbox"],
.form-hubspot-wrap .hs-form input[type="radio"] { width: auto !important; flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }
.form-hubspot-wrap .hs-form .hs-submit { margin-top: 8px; }
.form-hubspot-wrap .hs-form .legal-consent-container,
.form-hubspot-wrap .hs-form .hs-richtext { font-size: 12.5px; color: var(--ink-quiet); line-height: 1.7; }
.form-hubspot-wrap .hs-form .legal-consent-container a,
.form-hubspot-wrap .hs-form .hs-richtext a { color: var(--accent); }
@media (max-width: 720px) {
  .form-hubspot-wrap { padding: 20px 16px; }
}

.contact-channel-card.is-accent::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: 16px; right: 16px;
  font-family: 'Inter', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.18em;
  background: rgba(37,99,235,0.10);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── 直接連絡先 ── */

/* 直接連絡先が 1 つだけの場合 */

/* ═══════════════════════════════════════════════════════════════════
   DOWNLOADS — 資料ダウンロードハブ
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.downloads-hero .breadcrumb { margin-bottom: 28px; }

/* ── 資料一覧 ── */
.downloads-card.is-accent { border-color: rgba(37,99,235,0.30); }

/* ── ダウンロードの流れ ── */

/* ═══════════════════════════════════════════════════════════════════
   FORM PAGES (共通) — /contact/basic/, /diagnostic/ad/, /downloads/[slug]/
   ═══════════════════════════════════════════════════════════════════ */
.form-page .breadcrumb { margin-bottom: 28px; }

/* ── フォーム本体 ── */

/* チェックボックス */

/* 送信ボタン */

/* 送信成功 */

/* ── 複数選択ドロップダウン (チェックリスト → 1行コンボボックス) ── */
.ms-combo-toggle.is-placeholder { color: var(--ink-quiet); font-weight: 400; }
.ms-combo.is-open .ms-combo-toggle {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.ms-combo.is-open .ms-combo-toggle-caret { transform: rotate(180deg); }
.ms-combo.is-open .ms-combo-panel { display: block; }
.ms-combo-option.is-checked { background: #F4F8FF; }

/* ═══════════════════════════════════════════════════════════════════
   DIAGNOSTIC (広告診断 LP)
   ═══════════════════════════════════════════════════════════════════ */
.diag-hero .breadcrumb { margin-bottom: 28px; }

/* 3 benefits */

/* target list */

/* form section on diagnostic page (override pad) */

/* ═══════════════════════════════════════════════════════════════════
   DOWNLOAD DETAIL (/downloads/[slug]/)
   ═══════════════════════════════════════════════════════════════════ */
.dl-detail .breadcrumb { margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGES (共通) — /privacy/, /terms/, /security/
   ═══════════════════════════════════════════════════════════════════ */
.legal-page .breadcrumb { margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════════════════
   SITEMAP — /sitemap/
   ═══════════════════════════════════════════════════════════════════ */
.sitemap-page .breadcrumb { margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════════════════
   404 — エラーページ
   ═══════════════════════════════════════════════════════════════════ */

/* ── お問い合わせの流れ ── */

/* ── 無料診断セクション (Contact 内) ── */

/* ───── 3. Why loads ───── */

/* ───── 4. Offerings v2 — リスト形式 ───── */

/* ─── オファリング行のリンク化 (digital-growth で使用) ─── */

/* ═══════════════════════════════════════════════════════════════════
   /service/ad-management/ — 媒体グリッド / 手法カード / Deep セクション
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Supported Media グリッド ─── */
.svc-detail-media-card.is-primary {
  border-color: rgba(80,140,255,0.25);
  background: linear-gradient(180deg, rgba(80,140,255,0.04) 0%, rgba(255,255,255,0.95) 100%);
}

/* ─── Ad Methods カード ─── */
.svc-detail-method-badge.is-anchor-badge {
  background: rgba(11,14,20,0.06);
  color: var(--ink-soft);
}

/* ─── Deep Dive Anchor セクション ─── */
.svc-detail-deep.is-alt {
  background: linear-gradient(180deg, rgba(245,247,252,0.3) 0%, rgba(255,255,255,0) 100%);
}
.svc-detail-deep .container-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════════════════
   /business/media/ — デジタルメディア運営
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero ─── */
.media-hero .container { max-width: 1080px; }

/* ─── 2. Why ─── */

/* ─── 3. Lineup ─── */
.media-lineup-card.is-accent {
  border-color: rgba(80,140,255,0.3);
  background:
    linear-gradient(135deg, rgba(80,140,255,0.05) 0%, rgba(255,255,255,0.85) 60%);
}
/* ─── 4. Insights ─── */

/* ───── 5. Process Timeline (横) ───── */

/* ───── 6. Engagement Models / Pricing ───── */
.svc-detail-pricing-card.is-recommended {
  background: linear-gradient(180deg, #FFFFFF, #F4F7FC);
  border: 2px solid var(--accent);
  box-shadow: 0 22px 60px rgba(37,99,235,0.22);
  transform: translateY(-10px);
}
.svc-detail-pricing-card.is-recommended:hover { transform: translateY(-14px); }
.svc-detail-pricing-card.is-recommended .svc-detail-pricing-badge {
  color: var(--accent);
}
.svc-detail-pricing-card.is-recommended .svc-detail-pricing-cta {
  background: var(--accent);
}
.svc-detail-pricing-card.is-recommended .svc-detail-pricing-cta:hover {
  background: var(--accent-deep);
}
@media (max-width: 1100px) {
  .svc-detail-pricing-card.is-recommended { transform: none; }
  .svc-detail-pricing-card.is-recommended:hover { transform: translateY(-4px); }
}

/* ───── 7. Voice ───── */

/* ───── 9. Service-specific FAQ ───── */
.svc-detail-faq-item.is-open .svc-detail-faq-toggle {
  transform: rotate(45deg);
  color: var(--accent);
}
.svc-detail-faq-item.is-open .svc-detail-faq-a {
  display: grid;
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL OVERRIDES — svc-row tag & 詳細を見るボタン
   （旧定義より後に配置することで確実に優先される）
   ═══════════════════════════════════════════════════════════════════ */

/* 詳細を見る = 黒ボタン / 文字白 */
.svc-index .svc-row .arrow-pill *,
.svc-row .arrow-pill *,
.svc-index .svc-row .arrow-pill .arrow,
.svc-row .arrow-pill .arrow {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LEGIBILITY PATCH — 本文系を 16px 以上に統一
   （Google Lighthouse "Legible font sizes" / 一般的な可読性ベストプラクティス）
   ─ 装飾系（eyebrow / mono caps / badge / chip / tag）は意図的に小さくする
   ─ 本文系（p, description, link, button-label, list item）は最低 16px
   ═══════════════════════════════════════════════════════════════════ */

/* 1. 全 <p> の最低サイズ */
p { font-size: 16px; }

/* 2. 共通本文系ユーティリティ */
.hero-massive-sub,
.hero-sub,
.section-sub,
.page-hero-sub,
.feature-card .desc,
.asym-text p,
.partnership-text p,
.process-step .desc,
.profile-bio,
.svc-row .desc,
.svc-cta-inner p,
.industry-cell .cat,
.media-cell .name,
.news-title,
.plan-list-item,
.profile-meta .v {
  font-size: 16px !important;
  line-height: 2.0;
}

/* 3. ナビゲーション・CTA・ボタン文字 */
.nav-primary-links a,
.nav-button,
.hero-cta-major,
.cta-primary,
.cta-secondary,
.svc-cta-primary,
.svc-cta-secondary,
.svc-row .arrow-pill,
.plan-cta,
.related-cases-cta,
.consulting-cta-button,
.consulting-final-cta-secondary,
.svc-detail-final-cta a,
button,
input[type="submit"] {
  font-size: 16px !important;
}

/* 4. 表組み・FAQ・カードの本文 */

/* 5. 引用・テスティモニアル本文 */

/* 6. フッターのリンク・本文 */
.footer-col ul a,
.footer-tag,
.footer-addr {
  font-size: 16px !important;
  line-height: 1.85;
}
.footer-legal a,
.footer-bottom,
.footer-cert .cert-item {
  font-size: 14px !important; /* 法的情報・著作権表記は慣例的に小さめだが 14px は確保 */
}

/* 7. プロフィールメタ・装飾的だがやや上げる */

/* 8. フォーム入力欄（iOS Safari の自動ズーム回避にも有効） */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* 9. 装飾系 — 小さいままで意図的に残す（参考メモ）
   .breadcrumb, .eyebrow, .page-hero-eyebrow, .svc-row .cat,
   .svc-row .status, .svc-row .tag (chip),
   .trust-block .label, .news-tag, .news-date (数字),
   .footer-cert (バッジ), .live-dot, .pulse, .cta-note
   → 全てタイポグラフィックな"label"扱いのため対象外 */

/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO VARIANT — svc-hub
   /service/ のファーストビューにだけ青モヤ背景を出す。
   下層 (consulting / sem / analytics etc.) には適用されない。
   ═══════════════════════════════════════════════════════════════════ */
/* 既存の .page-hero::before のラジアルグラデは弱めだったので無効化 */
/* 縦のグリッド線は薄く維持 */
/* ─ blob 1: 左上の濃いコバルト ─ */
/* ─ blob 2: 右上の水色 ─ */
/* ─ blob 3: 中央下の淡い青 ─ */
/* ─ blob 4: アクセント (右下のシアン) ─ */

/* インナーコンテンツが上に乗るように */

/* モヤを微妙に動かして "雲っぽさ" を出す */
@keyframes mistDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes mistDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, 60px) scale(1.1); }
}
@keyframes mistDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -50px) scale(1.05); }
}
@keyframes mistDrift4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
  100% { transform: translate(-30px, -30px) scale(1.12); opacity: 0.8; }
}
/* モーション設定オフ時はアニメ停止 (アクセシビリティ) */

/* ═══════════════════════════════════════════════════════════════════
   ASYM ROW — 写真とテキストの高さ完全一致 (最終層オーバーライド)
   問題: grid + align-items: stretch でも特定ブラウザ / 長文行で
         visual 側が伸び切らないケースがある。
   対策: flex に切り替え、flex-basis 0 + grow 1 で確実に等幅、
         align-items: stretch で確実に等高。
   ═══════════════════════════════════════════════════════════════════ */

/* レスポンシブ時は縦積み */

/* ═══════════════════════════════════════════════════════════════════
   /features/ ページ
   ═══════════════════════════════════════════════════════════════════ */
.features-hero .container { max-width: 1080px; }

/* 5特徴の縦並び */
.features-list .container-tight { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* 比較テーブル */
.features-compare-table thead th.is-highlight {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.features-compare-table td.is-highlight {
  background: rgba(80,140,255,0.06);
  font-weight: 600;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   /news/ ページ
   ═══════════════════════════════════════════════════════════════════ */
.news-hero .container { max-width: 1080px; }
.news-list .container-tight { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* /news/[slug] 詳細ページ */
.news-detail .container-tight { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════════════════
   /careers/ ページ
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Hero ─── */
.careers-hero .container { max-width: 1080px; }

/* ─── 2. Why loads ─── */

/* ─── 3. 求める人材像 ─── */
.careers-traits .container-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ─── 4. 募集ポジション ─── */

/* ─── 5. 働く環境 ─── */
.careers-env .container-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ─── 6. 選考フロー ─── */
.careers-flow .container-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ─── 7. FAQ ─── */
.careers-faq .container-tight { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════════════════
   TOP — 「3つのサービス領域」セクション

   ・既存サイトの eyebrow / section-title / section-sub をそのまま使用。
   ・cuebic から取り入れたのは構造のみ:
     - 3 カラム + 縦の薄い区切り線
     - 大きめアイコン → 改行サービス名 → ハイフン区切りリスト → 詳しく見る
   ・タイポグラフィ・CTA は既存サイトトーンに準拠。
   ═══════════════════════════════════════════════════════════════════ */

/* カードグリッド (3カラム + 縦区切り線) */

/* カード全体クリック化 (a タグでカード全体をラップ) */
/* 背景の青いハイライト (擬似要素で広がり) */
/* 上端に伸びるアクセントバー */

/* アイコン */

/* サービス名 (既存 section-title に近いトーンで小サイズ版) */

/* ハイフン区切りリスト */

/* 詳しく見るリンク (既存サイトの小型アローリンクに統一) */
.service-intro-link-c .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease, ease);
}
.service-intro-card-link:hover .service-intro-link-c .arrow {
  transform: translateX(6px);
}

/* ═══════════════════════════════════════════════════════════════════
   /service/ ハブ (3 ピラー構造)
   ═══════════════════════════════════════════════════════════════════ */

/* 共通 section spacing */

/* ─── 1. Core Pillars (3 大カード) ─── */
.svc-pillar-arrow .arrow { color: #fff; transition: transform 0.2s ease; }

/* ─── 2. Growth ラインナップ ─── */

/* ─── 3. AI Marketing Ops ─── */

/* ─── 4. Solutions by Industry ─── */

/* ───────────────────────────────────────────────────────────────────
   statement-h2 を lead-message-title と同サイズに統一
   既存: clamp(30px, 4vw, 52px) → 縮小: clamp(26px, 3.2vw, 38px)
   ─────────────────────────────────────────────────────────────────── */

/* レスポンシブ */
@media (max-width: 900px) {
  /* li の縦 padding は内側 link と二重になるため横のみに（縦の重複を解消） */
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER — サービスのホバードロップダウン
   ═══════════════════════════════════════════════════════════════════ */
.nav-has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.nav-dropdown-caret {
  font-size: 12px;
  margin-left: 2px;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  transition: transform 0.25s var(--ease, ease), opacity 0.25s ease;
}
.nav-has-dropdown.is-open .nav-dropdown-caret {
  opacity: 1;
}

/* ドロップダウンパネル */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 560px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(11,14,20,0.06);
  border-radius: 16px;
  box-shadow:
    0 18px 60px rgba(11,14,20,0.12),
    0 4px 16px rgba(11,14,20,0.06);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease), visibility 0s 0.25s linear;
  z-index: 1000;
}
.nav-has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease), visibility 0s linear;
}

/* ホバー域を分断しないための見えない橋 */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* サービス一覧へのリンク */
.nav-dropdown-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(80,140,255,0.10) 0%, rgba(80,140,255,0.04) 100%);
  border: 1px solid rgba(80,140,255,0.18);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s var(--ease, ease);
}
.nav-dropdown-overview:hover {
  background: linear-gradient(135deg, rgba(80,140,255,0.18) 0%, rgba(80,140,255,0.08) 100%);
  transform: translateX(2px);
}
.nav-dropdown-overview-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.nav-dropdown-overview-arrow {
  color: var(--accent);
  font-size: 14px;
  transition: transform 0.2s ease;
}
.nav-dropdown-overview:hover .nav-dropdown-overview-arrow {
  transform: translateX(4px);
}

/* サブメニューリスト */
.nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.nav-dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav-dropdown-link:hover {
  background: rgba(11,14,20,0.04);
}
.nav-dropdown-link-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.nav-dropdown-link-desc {
  font-size: 12px;
  color: var(--ink-quiet);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* レスポンシブ — モバイルではドロップダウン無効化 (タップで親ページへ遷移するだけ) */
@media (max-width: 900px) {
  .nav-dropdown,
  .nav-dropdown-caret { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER — サービス用メガメニュー (.nav-has-mega)
   3 ピラーを縦割り表示 + 各カラムに直近のサブサービスを並列で見せる
   ═══════════════════════════════════════════════════════════════════ */
.nav-has-mega .nav-dropdown { display: none !important; } /* 旧レイアウト無効化 */
.nav-mega {
  position: fixed;
  top: 80px;    /* ヘッダー高さ 72px + 8px の隙間 */
  left: 50%;
  transform: translate(-50%, -4px);
  margin: 0;
  width: min(1100px, calc(100% - 32px));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(11,14,20,0.06);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(11,14,20,0.14),
    0 4px 16px rgba(11,14,20,0.06);
  padding: 28px 32px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease), visibility 0s 0.25s linear;
  z-index: 1000;
}
.nav-has-mega.is-open .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease), visibility 0s linear;
}
.nav-mega-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 見えない橋 (ホバー域確保) */
.nav-mega::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

/* 見出し行 */
.nav-mega-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(11,14,20,0.08);
}
.nav-mega,
.nav-mega-head,
.nav-mega-head-eyebrow,
.nav-mega-head-cta,
.nav-mega-col,
.nav-mega-col-head,
.nav-mega-col-meta,
.nav-mega-col-no,
.nav-mega-col-label,
.nav-mega-col-title,
.nav-mega-col-items,
.nav-mega-col-items li,
.nav-mega-col-items li a,
.nav-mega-foot,
.nav-mega-foot-link,
.nav-mega-foot-title {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-style: normal !important;
}
.nav-mega-head-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.nav-mega-head-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.nav-mega-head-cta:hover { gap: 10px; }

/* 3 カラム */
.nav-mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.nav-mega-col {
  padding: 4px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-mega-col + .nav-mega-col {
  border-left: 1px solid rgba(11,14,20,0.08);
}

/* カラム見出し (リンク) */
.nav-mega-col-head {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 14px;
  margin: -10px 0 0; /* カラム padding に揃え左右のずれをゼロに (※ 横方向の負マージン削除) */
  border-radius: 8px;
  position: relative;
  transition: background 0.2s ease;
}
.nav-mega-col-head:hover {
  background: rgba(80,140,255,0.06);
}
.nav-mega-col-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.nav-mega-col-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.04em;
}
.nav-mega-col-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-quiet);
}
/* 大項目: 少し大きく / 太く / 行間ゆとり = 階層強弱 */
.nav-mega-col-title {
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin: 4px 0 14px;
  letter-spacing: 0.04em;
}
.nav-mega-col-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.nav-mega-col-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--ink-quiet);
  font-size: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.nav-mega-col-head:hover .nav-mega-col-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* カラム内サブサービス */
.nav-mega-col-items {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega-col-items li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-mega-col-items li a:hover {
  background: rgba(11,14,20,0.04);
  color: var(--accent);
}
.nav-mega-col-items li .dot {
  color: var(--accent);
  font-size: 12px;
  width: 6px;
  text-align: center;
  opacity: 0.7;
}

/* フッター (補助領域) */
.nav-mega-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(11,14,20,0.08);
}
.nav-mega-foot-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.2s ease;
}
.nav-mega-foot-link:hover {
  background: rgba(80,140,255,0.06);
}
.nav-mega-foot-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.nav-mega-foot-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--ink-quiet);
  font-size: 12px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.nav-mega-foot-link:hover .nav-mega-foot-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* レスポンシブ */
@media (max-width: 1000px) {
  .nav-mega-cols { grid-template-columns: 1fr; }
  .nav-mega-col + .nav-mega-col { border-left: none; border-top: 1px solid rgba(11,14,20,0.08); padding-top: 16px; margin-top: 4px; }
  .nav-mega-foot { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-mega,
  .nav-mega-cols,
  .nav-mega-foot { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   モバイルナビ — ハンバーガーメニュー (≤1100px)
   デスクトップでは非表示。1100px 以下で nav-primary-links が消えるため
   ここでバーガー + パネルを表示してナビ手段を確保する。
   ═══════════════════════════════════════════════════════════════════ */
.nav-burger { display: none; }
.nav-mobile { display: none; }

@media (max-width: 1100px) {
  header.nav .nav-cta-pair { display: none !important; }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  header.nav.is-menu-open .nav-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.nav.is-menu-open .nav-burger-line:nth-child(2) { opacity: 0; }
  header.nav.is-menu-open .nav-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #FFFFFF;
    border-top: 1px solid rgba(11,14,20,0.08);
    box-shadow: 0 18px 44px rgba(11,14,20,0.14);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  header.nav.is-menu-open .nav-mobile {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-mobile-inner {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 28px;
  }
  .nav-mobile-link {
    display: block;
    padding: 15px 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(11,14,20,0.06);
  }
  .nav-mobile-group { border-bottom: 1px solid rgba(11,14,20,0.06); padding-bottom: 10px; }
  .nav-mobile-link--head { border-bottom: none; padding-bottom: 4px; }
  .nav-mobile-sub { display: flex; flex-direction: column; padding-left: 12px; }
  .nav-mobile-sublink {
    padding: 10px 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
  }
  .nav-mobile-sublink--pillar { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .nav-mobile-pillar-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
  .nav-mobile-pillar-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
  .nav-mobile-sublink--foot { font-weight: 700; color: var(--ink); margin-top: 4px; }
  .nav-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .nav-mobile-cta-primary,
  .nav-mobile-cta-secondary {
    display: block;
    text-align: center;
    padding: 15px;
    border-radius: 999px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .nav-mobile-cta-primary { background: var(--ink); color: #FFFFFF; }
  .nav-mobile-cta-secondary { background: #FFFFFF; color: var(--ink); border: 1px solid rgba(11,14,20,0.2); }
}

/* ── スマホ向け微調整 (≤520px) ── */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  /* 4カラム由来の窮屈なグリッドを 1 カラムに */
}

/* ═══════════════════════════════════════════════════════════════════
   見出し書体の一貫性ルール（2026-06 追加）
   サイト全体で見出しは明朝（Noto Serif JP）に統一。ゴシックで定義され
   ていた各ページの見出しを明朝・太字へ揃える。本文・ラベル・ボタン等は対象外。
   ═══════════════════════════════════════════════════════════════════ */
.about-hero-title,
.about-history-title,
.contact-hero-title,
.contact-channel-title,
.contact-flow-step-title,
.contact-diagnostic-card-title,
.downloads-hero-title,
.downloads-card-title,
.downloads-flow-step-title,
.form-page-title,
.form-success-title,
.diag-hero-title,
.diag-benefit-title,
.dl-detail-title,
.dl-kao-card-title,
.legal-title,
.legal-article h2,
.sitemap-title,
.sitemap-section-title,
.error-title,
.related-cases-title,
.case-detail-title,
.case-detail-article h2,
.case-detail-article h3,
.svc-detail-pain-title,
.svc-detail-contract-title {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 600 !important;
}

/* H1 のフォントウェイトは全ページ 700 に統一（h2/h3 は 600 のまま） */
h1[class] {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   /service/ad-management/ 追加セクション
   (Stats / Compare / Team / Industry / Reporting / App table)
   ═══════════════════════════════════════════════════════════════════ */

/* A. 数字で見る特徴 */

/* B. 比較表 */
.svc-compare-table .is-loads { color: var(--ink); font-weight: 600; background: rgba(37,99,235,0.06); }
.svc-compare-table thead th.is-loads { color: var(--accent); background: rgba(37,99,235,0.10); }

/* E. 運用体制 */

/* F. 業種別の勝ち筋 */

/* G. 計測・レポート */

/* H. アプリ広告 媒体別テーブル + 補足 */

/* ═══════════════════════════════════════════════════════════════════
   ServiceNav — 詳細ページ末尾の相互リンク（兄弟横移動 + 一覧へ戻る）
   ═══════════════════════════════════════════════════════════════════ */
.svc-nav .container { display: flex; flex-direction: column; }
.svc-nav-all .arrow { transition: transform .25s var(--ease); }
.svc-nav-all:hover .arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════
   サービスハブ: すべてのサービス（領域別フラット一覧）
   ═══════════════════════════════════════════════════════════════════ */

/* 実行領域カード: 明示的な「詳細を見る」ボタン */
.svc-detail-offerings-cta .arrow { transition: transform .25s var(--ease); }
.svc-detail-offerings-row--link:hover .svc-detail-offerings-cta .arrow {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════
   サービス詳細ヒーロー：2カラム（左=見出し+資料画像 / 右=資料DLフォーム）
   ServiceHeroDownload.astro 用の共通スタイル
   ═══════════════════════════════════════════════════════════════════ */
/* 資料の表紙（冊子スタック表現） */


/* ===== public/css/mobile.css ===== */
/* ════════════════════════════════════════════════════════════════════
   mobile.css — モバイル基準レイヤ（全ページ共通・最後に読み込み）

   目的: スマホ幅(~375px)での文字サイズ・グリッド崩れ・余白/タップ・
         横はみ出しを横断的に整える。デスクトップには影響しないよう
         すべて @media (max-width: …) でスコープする。

   検出は scripts/mobile-audit.mjs（静的監査）の結果に基づく。
   ※ 行レイアウト型グリッド（固定px+fr+auto）は意図的に対象外
     （畳むと崩れるため）。
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. メディア要素の横はみ出し防止（全幅・安全） ── */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video, canvas { height: auto; }

@media (max-width: 640px) {
  /* 横スクロール最終ガード */
  html, body { overflow-x: hidden; }

  /* 幅広テーブルは横スクロール可能なブロックに（縦は維持） */

  /* デスクトップ用の強制改行ラインはモバイルで自然折返し */
  .section-sub .line,
  .service-intro-sub .line { white-space: normal; }
}

/* ── 1. カードグリッドの折返し（≤640px） ── */
@media (max-width: 640px) {
  /* コンテンツカード系 → 1カラム */
  .svc-guide-grid,
  .result-grid,
  .strengths-grid,
  .service-intro-grid,
  .service-intro-cards,
  .svc-pillars-grid,
  .feature-grid,
  .process-grid,
  .v9-cards,
  .v9-cards.v9-cards--three,
  .svc-detail-problems-grid,
  .svc-detail-offering-grid,
  .svc-detail-process-grid,
  .svc-detail-related-grid,
  .svc-detail-whatis-points,
  .svc-detail-pains-grid,
  .svc-detail-why-grid,
  .svc-detail-methods-grid,
  .svc-detail-pricing-grid,
  .case-detail-metrics-grid,
  .about-purpose-pillars,
  .contact-channels-grid,
  .diag-benefits-grid,
  .media-why-grid,
  .careers-why-grid {
    grid-template-columns: 1fr !important;
  }

  /* ロゴ/アイコン等のコンパクト系 → 2カラム */
  /* 業種セル：SPは文字を小さく＆余白をコンパクトに（英語表記は削除済み） */
}

/* ── 2. タップ領域の確保（≤640px、ボタン類のみ） ── */
@media (max-width: 640px) {
  .nav-mobile-cta-primary,
  .nav-mobile-cta-secondary,
  .cta-primary,
  .cta-secondary,
  .svc-cta-primary,
  .svc-cta-secondary,
  .form-submit,
  .plan-cta,
  .hero-cta-major,
  .diagnosis-cta {
    min-height: 44px;
  }
  .nav-mobile-link { min-height: 44px; }
  .cases-chip { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── 3. 文字サイズの最適化 ── */
@media (max-width: 520px) {
  /* 本文の最低可読サイズを確保 */
  body { font-size: 15px; }

  /* 過大な装飾数字・マーク・価格・件数を上限付きで縮小（vw連動） */
  .svc-row .num,
  .trust-block .num,
  .device-stat,
  .plan-price,
  .hero-v7-stat .num,
  .strength-num,
  .service-intro-num,
  .svc-detail-problem-num,
  .svc-detail-whatis-point-num,
  .svc-detail-contract-num,
  .cases-industry-count,
  .about-purpose-pillar-num,
  .about-history-year-num,
  .diag-benefit-num,
  .svc-detail-why-num,
  .svc-detail-offerings-no,
  .media-why-num,
  .media-lineup-no,
  .svc-detail-pricing-amount,
  .features-item-num,
  .careers-why-num,
  .careers-traits-num,
  .careers-flow-num,
  .svc-pillar-no,
  .loader-mark,
  .lead-message-mark,
  .svc-detail-media-mark,
  .svc-detail-voice-quote-mark,
  .contact-channel-badge {
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.2 !important;
  }

  /* 中見出し・カード見出しの抑制 */
}

/* ════════════════════════════════════════════════════════════════════
   TOP（ヒーロー / Statement）スマホ実機調整（iPhone SE 等）
   実機スクショに基づく: ①横はみ出し ②ヘッダー被り ③CTA折返し
   ════════════════════════════════════════════════════════════════════ */

/* ── ① 横はみ出し対策（最優先） ── */
@media (max-width: 640px) {
  /* nowrap が狭い画面で溢れる主因 → 折り返しを許可 */
  /* 横スクロールの最終ガード（clip は hidden より確実） */
  html, body { overflow-x: clip; }
  /* 長い語の途中改行を許可してはみ出しを防ぐ */
  h1, h2, h3,
  .hero-v7-title, .statement-h2, .lead-message-title { overflow-wrap: anywhere; }
}

/* ── ①' reveal アニメの取りこぼし防止（最重要）
      .reveal は JS(IntersectionObserver)で .in-view が付くまで opacity:0。
      SPの狭い画面では「巨大な単一reveal要素（例: ケース本文）」が
      閾値を満たせず表示されないことがあるため、SPでは常時表示にする。 ── */
@media (max-width: 640px) {
  .reveal, .mask-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ── ② ヒーロー: ヘッダー被り解消・高さを内容に合わせる ── */
@media (max-width: 640px) {
  .hero-v7-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .hero-v7-visual {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  .hero-canvas {
    display: none !important;
  }
  .hero-static-orb {
    display: block !important;
    position: absolute !important;
    top: 72px !important;
    right: -186px !important;
    width: clamp(300px, 92vw, 390px) !important;
    aspect-ratio: 1 !important;
    transform: none !important;
    opacity: 0.92 !important;
    filter: saturate(1.12) !important;
  }
  .hero-static-orb__letters {
    font-size: clamp(84px, 26vw, 112px) !important;
  }
  h1.hero-v7-title {
    font-size: clamp(20px, 7.3vw, 32px) !important;
    line-height: 1.32 !important;
  }
  /* 1行目「マーケティング予算を、」は折り返さない（.nowrap の normal 化を上書き） */
  h1.hero-v7-title .nowrap { white-space: nowrap !important; }
  .hero-v7-sub { font-size: 15px !important; line-height: 1.9 !important; }

  /* ── ③ CTA: 1行に収める（フォント小さめ・全幅） ── */
  .hero-v7-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero-v7-cta,
  .hero-v7-secondary {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }
  .hero-v7-cta > span,
  .hero-v7-secondary { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .hero-v7-secondary::after { content: none !important; } /* 二重矢印の抑制 */
}

/* ── Statement 見出し: 文字縮小・強制改行除去 ── */
@media (max-width: 640px) {
  /* 強制 <br> を無効化して自然折返しに */
}

/* ── A Letter to Marketers（lead-message）: SPのみ
      文字サイズを揃えて小さく・縦を短く ── */
@media (max-width: 640px) {
  /* カード自体を縦に詰める（上マージン/パディング縮小） */
  /* 巨大な装飾引用符を縮小 */

  /* 文字サイズを均一に（見出しも本文も同じ 13px）・さらに小さく */
  /* 見出しは他セクションの section-title と同サイズに */
  .lead-message-title,
  .lead-message-title .accent {
    font-size: clamp(24px, 6.6vw, 32px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
  }
  /* 本文は少し大きく */
}

/* ════════════════════════════════════════════════════════════════════
   ④ ヒーロー文字: 白いモヤ（フロストパネル）＋文字を濃色に（SPのみ）
      明るい球体と文字が重なって読みづらい問題への対策。
      文字背景に半透明の白パネルを敷き、文字色を濃紺/黒へ反転する。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero-v7-text {
    background: rgba(255, 255, 255, 0.80) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    padding: 22px 18px 24px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
  }
  /* 白パネル上では暗い影が濁るので影を消す */
  .hero-v7-text,
  h1.hero-v7-title,
  .hero-v7-sub,
  .hero-v7-eyebrow { text-shadow: none !important; }
  /* 文字色を濃色へ */
  h1.hero-v7-title { color: #0B0E14 !important; }
  h1.hero-v7-title .accent { color: #2563EB !important; }
  .hero-v7-sub { color: rgba(11, 14, 20, 0.86) !important; }
  .hero-v7-eyebrow { color: #2563EB !important; }
  /* セカンダリCTA（枠線＋淡色文字）が白地で消えないよう濃色化 */
  .hero-v7-secondary {
    border-color: rgba(11, 14, 20, 0.28) !important;
    color: #0B0E14 !important;
  }
  .hero-v7-secondary::after { color: #0B0E14 !important; }
  /* プライマリCTAは青地・白文字のままで可読（変更不要） */
}

/* ════════════════════════════════════════════════════════════════════
   ⑤ TOPページ フォントウェイト見直し（全デバイス・body.home 限定）
      見出し = 800 / 詳細文・本文 = 600 に統一。
   ════════════════════════════════════════════════════════════════════ */
/* 見出し: 800 */
body.home h1.hero-v7-title,
body.home .statement-h2,
body.home .lead-message-title,
body.home h2.section-title,
body.home .section-title,
body.home .asym-text h3,
body.home .ai-ops-head h3,
body.home .news-block h3,
body.home .feature-card h4,
body.home .partnership-text h3,
body.home .process-step h4,
body.home .plan-left h3,
body.home .service-intro-name-c,
body.home .faq-q {
  font-weight: 800 !important;
}

/* 詳細文・本文: 600 */
body.home p,
body.home .hero-v7-sub,
body.home .section-sub,
body.home .lead-message-body,
body.home .asym-text p,
body.home .ai-ops-head p,
body.home .news-title,
body.home .process-step .desc,
body.home .faq-a,
body.home .plan-list-item,
body.home .statement p,
body.home .service-intro-items-c,
body.home .industry-cell .cat {
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════════
   ⑥ Plan カード（無料診断）: SPで文字がはみ出る問題の修正
      h3を縮小・主/副見出しを行分け・価格縮小・CTAを全幅で1行維持。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 主見出しと副見出しを別行に分け、副は小さく */
  /* 価格まわりを縮小 */
  /* CTA を全幅・中央寄せにして1行を維持（はみ出し防止） */
}

/* ════════════════════════════════════════════════════════════════════
   ⑦ AsymRows（LOads が選ばれる3つの理由）SP是正
      デスクトップの「テキストと画像を等高にするガラスカード」用ルールが
      white-theme.css にメディアクエリ外（全幅適用）で書かれており、SPに漏れて
      ・画像が約360pxの縦長になる
        （SP用の aspect-ratio:16/10 が height:100% + min-height:360px +
         aspect-ratio:auto に打ち消される）
      ・縦積みの text↔image 間隔が 80px と過大（.asym-row{gap:80px}）
      となる。mobile.css は最後に読まれるためここで上書きして是正する。
      （.asym-text はガラスカードなので余白は維持） ═══════════════════════ */
/* 根因: white-theme.css の「最終層オーバーライド」が .asym-row を
   flex(.asym-row > .asym-text/visual の高詳細度・flex:1 1 0; min-height:0)に
   変換しており、縦積み時にコンテンツが重なる/画像が縦長になる。
   ≤900px では flex を完全にやめ、単純な block 縦積みに置き換える。
   詳細度を「.asym .asym-row > …(0,3,0)」にして最終層(0,2,0)を確実に上書き。 */
@media (max-width: 900px) {

  /* タイトルと最初の行を確実に分離 */
  .asym .container > .reveal:first-child { margin: 0 0 32px !important; }

  /* 行: flex をやめて block 縦積み（重なり解消の要） */

  /* テキストカード: flex 解除・不透明・通常の高さ */

  /* 画像: flex 解除・16:10 横長・通常の高さ */
}

/* ════════════════════════════════════════════════════════════════════
   ⑧ 3つのサービス領域（service-intro-cuebic）SP
      見出し下の項目テキスト（「- 集客戦略 / KPI 設計 -」等）を1行に
      （改行させない）。1カラム全幅カードなので nowrap で収まる。
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   ⑨ SP 統一タイポグラフィ（body.home 限定・全セクション共通）
      サイト全体に一体感を出すため、SPでは以下に統一する:
        ・小ラベル(eyebrow)  = 12px
        ・セクション見出し    = clamp(22px, 6vw, 28px)
        ・カード/小見出し     = clamp(20px, 5.6vw, 26px)（asym ⑦ と同値）
        ・詳細文/本文        = 14px（asym ⑦ と同値）
      併せて日本語の改行を是正（overflow-wrap:anywhere による「ー」「へ」等の
      不自然な途中改行・孤立を防ぐため line-break:strict に切替）。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 日本語向けの自然な改行（全見出し共通） */
  body.home .statement-h2,
  body.home .lead-message-title,
  body.home h2.section-title,
  body.home .section-title,
  body.home .partnership-head-title,
  body.home .ai-ops-head h3,
  body.home .news-block h3,
  body.home .asym-text h3,
  body.home .feature-card h4,
  body.home .partnership-text h3,
  body.home .process-step h4,
  body.home .plan-left h3,
  body.home .service-intro-name-c {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-break: strict !important;
  }

  /* 小ラベル(eyebrow): 12px */
  body.home .eyebrow,
  body.home .news-eyebrow,
  body.home .partnership-head-eyebrow,
  body.home .ai-ops-head .eyebrow-inline,
  body.home .partnership-text .eyebrow-inline,
  body.home .asym-text .eyebrow-inline,
  body.home .statement-mark {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
  }

  /* セクション見出し（各セクションの主見出し）: 統一 */
  body.home .statement-h2,
  body.home h2.section-title,
  body.home .section-title,
  body.home .partnership-head-title,
  body.home .ai-ops-head h3,
  body.home .news-block h3 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    margin-top: 12px !important;
  }

  /* カード/小見出し（コンテンツ内の見出し）: 統一 */

  /* 詳細文・本文: もっと小さく統一（14px） */
  body.home .section-sub,
  body.home .statement p,
  body.home .asym-text p,
  body.home .ai-ops-head p,
  body.home .feature-card .desc,
  body.home .news-title,
  body.home .partnership-text p,
  body.home .process-step .desc,
  body.home .faq-a,
  body.home .plan-list-item,
  body.home .service-intro-items-c {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
}


/* ===== public/css/header-critical.css ===== */
/*
 * Header critical layer
 * Keep the global header in a stable desktop/mobile state before large CSS files
 * finish loading. This file is intentionally small and loaded synchronously.
 */
body:not(.lp-body) header.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: rgba(255,255,255,0.86) !important;
  border-bottom: 1px solid var(--line, rgba(11,14,20,0.10)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body:not(.lp-body) header.nav.hide {
  transform: translateY(-100%);
}

body:not(.lp-body) header.nav .nav-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  height: 76px !important;
  min-height: 76px !important;
}

body:not(.lp-body) header.nav .logo-v9 {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto;
}

body:not(.lp-body) header.nav .logo-v9 .logo-img {
  width: 140px !important;
  height: auto !important;
  max-height: 44px;
}

body:not(.lp-body) header.nav .nav-primary-links,
body:not(.lp-body) header.nav .nav-cta-pair {
  display: flex !important;
  align-items: center !important;
}

body:not(.lp-body) header.nav .nav-primary-links {
  gap: 22px;
}

body:not(.lp-body) header.nav .nav-cta-pair {
  gap: 10px;
}

body:not(.lp-body) header.nav .nav-mobile,
body:not(.lp-body) header.nav .nav-burger {
  display: none !important;
}

body:not(.lp-body) header.nav .nav-mega,
body:not(.lp-body) header.nav .nav-dropdown {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.lp-body) header.nav .nav-has-mega.is-open .nav-mega,
body:not(.lp-body) header.nav .nav-has-dropdown.is-open .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.lp-body) header.nav .nav-has-mega.is-open .nav-mega {
  transform: translate(-50%, 0) !important;
}

@media (max-width: 1100px) {
  body:not(.lp-body) header.nav .nav-primary {
    height: 64px !important;
    min-height: 64px !important;
  }

  body:not(.lp-body) header.nav .nav-primary-links,
  body:not(.lp-body) header.nav .nav-cta-pair,
  body:not(.lp-body) header.nav .nav-mega,
  body:not(.lp-body) header.nav .nav-dropdown,
  body:not(.lp-body) header.nav .nav-dropdown-caret {
    display: none !important;
  }

  body:not(.lp-body) header.nav .nav-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
  }

  body:not(.lp-body) header.nav .nav-burger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink, #0B0E14);
    border-radius: 2px;
  }

  body:not(.lp-body) header.nav .nav-mobile {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: #FFFFFF;
    border-top: 1px solid rgba(11,14,20,0.08);
    box-shadow: 0 18px 44px rgba(11,14,20,0.14);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px);
  }

  body:not(.lp-body) header.nav.is-menu-open .nav-mobile {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
  }

  body:not(.lp-body) header.nav .nav-mobile-inner {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 28px;
  }

  body:not(.lp-body) header.nav .logo-v9 .logo-img {
    width: 118px !important;
    max-height: 36px;
  }
}