/* ============================================================
   ENHANCE LAYER — プロ仕様の見た目強化
   既存style.cssを"上書き"する形で読み込む。HTMLは変更最小限。
   ============================================================ */

:root {
  --serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --mono-num: 'Inter', 'Manrope', system-ui, sans-serif;

  /* 拡張パレット */
  --coral:        #F4847D;
  --coral-soft:   #FFE9E6;
  --lavender:     #B5A4E0;
  --cream:        #FFF8E7;
  --ink-50:       rgba(13,36,71,.04);
  --ink-100:      rgba(13,36,71,.08);

  /* 強化シャドウ（2層） */
  --shadow-1:     0 1px 2px rgba(13,36,71,.04), 0 2px 8px rgba(13,36,71,.06);
  --shadow-2:     0 2px 4px rgba(13,36,71,.05), 0 12px 28px rgba(13,36,71,.10);
  --shadow-3:     0 4px 8px rgba(13,36,71,.06), 0 24px 56px rgba(13,36,71,.16);
  --shadow-teal:  0 8px 24px rgba(31,179,168,.32);

  /* リズム */
  --gap-sec:      clamp(56px, 11vw, 96px);
  --r-card:       18px;

  /* ========== PRO EASING CURVES ========== */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);      /* 着地が優雅 */
  --ease-in-out-quart:  cubic-bezier(0.76, 0, 0.24, 1);     /* 遷移用 */
  --ease-out-back:      cubic-bezier(0.34, 1.56, 0.64, 1);  /* 少し跳ねる */
  --ease-in-quart:      cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-quad:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   1. グローバル下地：ドットパターン + 微テクスチャ
   ============================================================ */
body {
  background:
    radial-gradient(circle at 1px 1px, rgba(13,36,71,.045) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--bg);
  letter-spacing: .005em;
}

/* ===== FILM GRAIN オーバーレイ（プロ感のコア） ===== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23noise)' /%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* セクションごとの呼吸量を圧縮 */
.trouble-section,
.why-section,
.samples-section,
.funnel-section,
.story-section,
.industry-section,
.approach-section,
.preview-section {
  padding-top: var(--gap-sec) !important;
  padding-bottom: var(--gap-sec) !important;
  position: relative;
}

/* セクション見出しと本文の間隔を引き締める */
.sec-head { margin-bottom: clamp(2rem, 5vw, 3rem) !important; }

/* ============================================================
   2. タイポグラフィ：欧文ラベルをセリフに、数字は専用フォントに
   ============================================================ */
.sec-label {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: clamp(.95rem, 2.2vw, 1.1rem) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--teal) !important;
  gap: .8rem !important;
}
.sec-label::before {
  width: 28px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--teal)) !important;
}

.sec-title {
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.4 !important;
}
.sec-title .accent {
  background: linear-gradient(120deg, var(--teal) 0%, var(--teal-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* 数字専用フォント（料金、No、FLOW番号、Reason番号） */
.tnum, .fn-num, .ap-num, .pv-price, .pv-en, .why-num,
.sidebar-cta .num, .nav-num, .hero-limit strong,
.sample-num {
  font-family: var(--mono-num) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.01em !important;
}
.pv-price { font-weight: 800 !important; }

/* ============================================================
   3. カード再設計：2層シャドウ + 巨大背景番号 + hover浮き上がり
   ============================================================ */
.trouble-card,
.why-card,
.funnel-card,
.approach-card,
.preview-card {
  border-radius: var(--r-card) !important;
  border: 1px solid rgba(13,36,71,.05) !important;
  box-shadow: var(--shadow-1) !important;
  transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo), border-color .5s !important;
  position: relative;
  overflow: hidden;
}
.trouble-card:hover,
.why-card:hover,
.funnel-card:hover,
.preview-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-3) !important;
  border-color: rgba(31,179,168,.25) !important;
}

/* Spotlight effect for cards */
.trouble-card::before,
.why-card::before,
.funnel-card::before,
.preview-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(31,179,168,.08), transparent 50%);
  opacity: 0;
  transition: opacity .3s ease-out;
  pointer-events: none;
  z-index: 2;
}

.trouble-card:hover::before,
.why-card:hover::before,
.funnel-card:hover::before,
.preview-card:hover::before {
  opacity: 1;
}

/* TROUBLEカードに巨大透かしNo */
.trouble-card { padding: 2rem 1.5rem 1.8rem !important; }
.trouble-card::after {
  content: attr(data-bgnum);
  position: absolute;
  right: -.15em; bottom: -.35em;
  font-family: var(--mono-num);
  font-weight: 900;
  font-size: clamp(6rem, 22vw, 10rem);
  line-height: 1;
  color: rgba(31,179,168,.06);
  pointer-events: none;
  letter-spacing: -.04em;
}
.trouble-card .tnum {
  color: var(--teal) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  margin-bottom: .8rem !important;
}
.trouble-card h3 {
  font-size: 1.08rem !important;
  letter-spacing: -.01em;
  margin-bottom: .7rem !important;
}

/* FUNNELカード（FLOW）の背景番号 */
.funnel-card { position: relative; overflow: hidden; }
.funnel-card::after {
  content: attr(data-step);
  position: absolute;
  right: -.1em; top: -.3em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(7rem, 26vw, 11rem);
  line-height: 1;
  color: rgba(31,179,168,.07);
  pointer-events: none;
}
.fn-num {
  color: var(--teal) !important;
  font-size: .72rem !important;
  letter-spacing: .18em !important;
  font-weight: 700 !important;
}

/* APPROACHカード（dark section） */
.approach-card {
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08) !important;
}
.ap-num {
  font-size: 3.2rem !important;
  background: linear-gradient(135deg, var(--teal-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* WHYカード */
.why-card { padding: 2rem 1.6rem !important; }
.why-num {
  color: var(--teal) !important;
  letter-spacing: .14em !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* PREVIEWカード（料金） */
.preview-card {
  padding: 2.2rem 1.6rem !important;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%) !important;
}
.preview-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  opacity: .8;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.pv-en {
  font-style: italic;
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  color: var(--text-mute) !important;
}
.pv-price {
  font-size: clamp(1.6rem, 5vw, 2rem) !important;
  color: var(--navy) !important;
}
.pv-price span {
  font-family: var(--font-jp) !important;
  font-size: .7rem !important;
  color: var(--text-soft) !important;
  margin-left: .2rem;
  font-weight: 500;
}

/* ============================================================
   4. ボタン強化：常時アンビエントグロー + リップル
   ============================================================ */
.btn-teal {
  position: relative;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%) !important;
  box-shadow: var(--shadow-teal), 0 0 0 0 rgba(31,179,168,.6);
  animation: btnPulse 2.6s ease-in-out infinite;
  overflow: hidden;
}
.btn-teal::before {
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s;
  pointer-events: none;
}
.btn-teal:hover::before { transform: translateX(100%); }
.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(31,179,168,.42);
}
@keyframes btnPulse {
  0%, 100% { box-shadow: var(--shadow-teal), 0 0 0 0 rgba(31,179,168,.5); }
  50%      { box-shadow: var(--shadow-teal), 0 0 0 12px rgba(31,179,168,0); }
}

.btn-light, .btn-outline {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(10px);
  transition: all .3s !important;
}
.btn-light:hover, .btn-outline:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.7) !important;
  transform: translateY(-2px);
}

/* ============================================================
   5. HEROセクション強化：粒子、深いグラデ、タイプライター
   ============================================================ */
.hero {
  position: relative;
}
.hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(31,179,168,.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(232,197,71,.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%) !important;
}

/* 流れる粒子（CSSのみ） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(63,201,190,.6), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(232,197,71,.5), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 15% 90%, rgba(63,201,190,.4), transparent);
  background-size: 200% 200%;
  animation: particleDrift 24s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: .85;
}
@keyframes particleDrift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

.hero-orb {
  filter: blur(60px) !important;
  animation: orbFloat 12s ease-in-out infinite;
}
.hero-orb.o2 { animation-delay: -4s; animation-duration: 14s; }
.hero-orb.o3 { animation-delay: -8s; animation-duration: 16s; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(20px,-30px) scale(1.1); }
  66%     { transform: translate(-15px,20px) scale(.95); }
}

.hero-title {
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.45 !important;
}
.hero-title .teal {
  background: linear-gradient(120deg, var(--teal-light) 0%, #6fe0d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SCROLL ヒントを矢印付き脈動アニメに */
.scroll-hint {
  font-family: var(--serif) !important;
  font-style: italic !important;
  letter-spacing: .25em !important;
  font-size: .75rem !important;
}
.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: .8; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============================================================
   6. セクション境界：SVGウェーブ + 上下のフェード境界
   ============================================================ */
.trouble-section { background: var(--bg) !important; }
.why-section {
  background:
    radial-gradient(circle at 1px 1px, rgba(13,36,71,.04) 1px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(180deg, #fafbfd 0%, #f2f5fa 100%) !important;
}
.story-section { background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%) !important; }
.industry-section { background: var(--bg) !important; }
.preview-section { background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important; }

/* ウェーブdivider（上下に） */
.trouble-section::before,
.why-section::before,
.funnel-section::before,
.industry-section::before,
.preview-section::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,24 C240,8 480,40 720,24 C960,8 1200,40 1440,24 L1440,0 L0,0 Z' fill='%23F7F9FC'/></svg>");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

/* ============================================================
   7. TROUBLE / WHY / INDUSTRY等の見た目調整
   ============================================================ */
.trust-banner {
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-light) 100%) !important;
  box-shadow: var(--shadow-3) !important;
  border: 1px solid rgba(255,255,255,.06);
}
.trust-banner::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(31,179,168,.25) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(232,197,71,.12) 0%, transparent 60%) !important;
  opacity: 1 !important;
}
.tb-brand {
  background: linear-gradient(120deg, var(--gold) 0%, #FFE082 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* INDUSTRYカードを上品に */
.industry-card {
  border-radius: 16px !important;
  border: 1px solid rgba(13,36,71,.06) !important;
  box-shadow: var(--shadow-1) !important;
  transition: all .35s cubic-bezier(.2,.7,.2,1) !important;
  background:
    linear-gradient(180deg, #fff 0%, #fdfefe 100%) !important;
}
.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2) !important;
  border-color: rgba(31,179,168,.25) !important;
}
.ind-icon {
  color: var(--teal) !important;
  background: linear-gradient(135deg, var(--teal-soft) 0%, rgba(232,197,71,.12) 100%) !important;
}

/* STORY OUR STORY円ロゴをふんわり */
.story-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(31,179,168,.08) 0%, transparent 70%);
  pointer-events: none;
  animation: orbFloat 18s ease-in-out infinite;
}

/* APPROACHセクションは深い夜空に */
.approach-section {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(31,179,168,.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(232,197,71,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
  position: relative;
}
.approach-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(63,201,190,.5), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(232,197,71,.4), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.3), transparent);
  pointer-events: none;
}
.approach-section .sec-title { color: var(--white) !important; }
.approach-section .sec-sub { color: rgba(255,255,255,.7) !important; }

/* ============================================================
   8. フローティングCTA（モバイル）
   ============================================================ */
.floating-cta {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.2rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(31,179,168,.45);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: btnPulse 2.6s ease-in-out infinite;
}
.floating-cta .fc-arrow {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
@media (min-width: 900px) {
  .floating-cta { display: none; }
}

/* ============================================================
   9. SCROLL REVEAL — 既存.revealを強化
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   10. モバイル専用：圧縮・密度アップ
   ============================================================ */
@media (max-width: 720px) {
  /* セクションpaddingを更に圧縮 */
  .trouble-section,
  .why-section,
  .samples-section,
  .funnel-section,
  .story-section,
  .industry-section,
  .approach-section,
  .preview-section {
    padding-top: clamp(48px, 11vw, 72px) !important;
    padding-bottom: clamp(48px, 11vw, 72px) !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .sec-head { margin-bottom: 1.8rem !important; }
  .sec-title {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
    margin-top: .8rem !important;
  }
  .sec-sub {
    font-size: .82rem !important;
    line-height: 1.85 !important;
    margin-top: 1rem !important;
  }

  /* カード間ギャップを引き締め */
  .trouble-grid,
  .why-grid,
  .preview-grid,
  .industry-grid,
  .approach-grid {
    gap: 1rem !important;
  }
  .trouble-card,
  .why-card,
  .preview-card,
  .approach-card,
  .industry-card {
    padding: 1.4rem 1.2rem !important;
  }
  .trouble-card h3 { font-size: 1.02rem !important; }
  .trouble-card p { font-size: .82rem !important; line-height: 1.85 !important; }

  /* ヒーロー文字サイズ */
  .hero-title { font-size: clamp(1.65rem, 7.5vw, 2.4rem) !important; }
  .hero-sub { font-size: .85rem !important; }

  /* trust-banner */
  .trust-banner {
    padding: 1.8rem 1.4rem !important;
    border-radius: 16px !important;
    margin-top: 2rem !important;
  }
  .tb-main { font-size: 1.05rem !important; line-height: 1.7 !important; }
  .tb-desc { font-size: .82rem !important; }

  /* APPROACHカード 1段ずつ */
  .approach-card { padding: 1.8rem 1.4rem !important; }
  .ap-num { font-size: 2.6rem !important; }

  /* フローティングCTA */
  .floating-cta { right: 12px; bottom: 12px; }

  /* hero-orbsを少し弱める */
  .hero-orb { opacity: .35 !important; }

  /* スクロールヒントを下げる */
  .scroll-hint { font-size: .7rem !important; opacity: .5; }
}

/* ============================================================
   11. PCサイドバーも少し格上げ
   ============================================================ */
@media (min-width: 900px) {
  .sidebar {
    background:
      radial-gradient(ellipse 80% 40% at 0% 0%, rgba(31,179,168,.06) 0%, transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    border-right: 1px solid rgba(13,36,71,.06) !important;
  }
  .sidebar-cta {
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-2);
  }
  .sidebar-cta .num { color: var(--teal-light) !important; }
}

/* ============================================================
   12. FOOTER 強化
   ============================================================ */
.footer {
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(31,179,168,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, #050f24 100%) !important;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content:"";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 70% 70%, rgba(63,201,190,.4), transparent);
  pointer-events: none;
}
.footer-col h4 {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 600 !important;
  color: var(--teal-light) !important;
  letter-spacing: .04em !important;
}

/* ============================================================
   13. 細部の美化：選択カラー・スクロールバー
   ============================================================ */
::selection { background: rgba(31,179,168,.28); color: var(--navy); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(13,36,71,.18);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(31,179,168,.4); }

/* ============================================================
   13. CUSTOM CURSOR（マウス追従ドット）
   ============================================================ */
.custom-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
  transition: width .3s ease-out, height .3s ease-out, background .3s ease-out;
  box-shadow: 0 0 12px rgba(31, 179, 168, 0.4);
}

.custom-cursor.hover {
  width: 40px;
  height: 40px;
  background: rgba(31, 179, 168, 0.1);
  box-shadow: 0 0 24px rgba(31, 179, 168, 0.6), inset 0 0 12px rgba(31, 179, 168, 0.3);
  border: 2px solid var(--teal);
}

/* cursorを非表示化（pointer:fineデバイスのみ） */
@media (pointer: fine) {
  * {
    cursor: none !important;
  }
  a, button, [role="button"] {
    cursor: none !important;
  }
}

/* ============================================================
   14. SPLITTEXT CHARS ANIMATION
   ============================================================ */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* ============================================================
   15. SP最適化 2.0 — UX深堀り改善
   ・ヒーロー収まり改善（ファーストビューでCTAまで見える）
   ・タップターゲット拡大（48px+）
   ・フローティングCTAを邪魔しない設計
   ・カード番号の暴走を抑制
   ・タッチ時のフィードバック強化
   ・重いエフェクトを最適化
   ============================================================ */
@media (max-width: 720px) {

  /* ===== ① ヒーロー：ファーストビュー収まり最適化 ===== */
  .hero {
    min-height: 100svh !important;          /* iOS Safari対策 */
    padding-top: clamp(72px, 18vw, 100px) !important;
    padding-bottom: clamp(24px, 6vw, 40px) !important;
  }
  .hero-title {
    font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
    line-height: 1.35 !important;            /* 1.45→1.35で凝縮 */
    letter-spacing: -.02em !important;
    margin-bottom: 1rem !important;
  }
  .hero-sub {
    font-size: .82rem !important;
    line-height: 1.8 !important;
    margin-top: .8rem !important;
  }
  .hero-cta-area,
  .hero-buttons {
    margin-top: 1.4rem !important;
    gap: .8rem !important;
  }

  /* ===== ② タップターゲット拡大（最低48px） ===== */
  .btn-teal,
  .hero-cta,
  .btn-outline,
  .preview-card a,
  .approach-card a {
    min-height: 52px !important;
    padding: .9rem 1.6rem !important;
    font-size: .95rem !important;
    border-radius: 999px !important;
  }
  /* タップ時の押下感 */
  .btn-teal:active,
  .hero-cta:active,
  .btn-outline:active,
  .floating-cta:active {
    transform: scale(.97) !important;
    transition: transform .1s ease-out !important;
  }

  /* ===== ③ フローティングCTA：邪魔しない設計 ===== */
  .floating-cta {
    right: 16px !important;
    bottom: 16px !important;
    padding: .75rem 1.05rem !important;
    font-size: .82rem !important;
    box-shadow: 0 8px 20px rgba(31,179,168,.35), 0 0 0 4px rgba(255,255,255,.5) !important;
    backdrop-filter: blur(4px);
  }
  .floating-cta .fc-arrow {
    width: 16px !important;
    height: 16px !important;
    font-size: .75rem !important;
  }
  /* スクロール中は薄く（後でJS連携できるよう class 用意） */
  .floating-cta.is-scrolling {
    opacity: .55 !important;
    transition: opacity .2s ease;
  }

  /* ===== ④ Trouble Cards 巨大番号を控えめに ===== */
  .trouble-card {
    padding: 1.5rem 1.3rem 1.4rem !important;
    border-radius: 16px !important;
  }
  .trouble-card::after {
    font-size: clamp(4.5rem, 16vw, 6.5rem) !important;  /* 22vw→16vw */
    right: -.1em !important;
    bottom: -.25em !important;
    color: rgba(31,179,168,.045) !important;             /* さらに薄く */
  }
  .trouble-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    margin-bottom: .6rem !important;
  }
  .trouble-card p {
    font-size: .85rem !important;
    line-height: 1.85 !important;
    color: var(--text-mute) !important;
  }
  .trouble-card .tnum {
    font-size: .72rem !important;
    margin-bottom: .65rem !important;
  }

  /* FUNNEL カードの番号も同様に */
  .funnel-card::after {
    font-size: clamp(5rem, 18vw, 7.5rem) !important;
  }

  /* ===== ⑤ WHY セクション：「3」の文字食い込み対策 ===== */
  .sec-title {
    word-spacing: .15em !important;
    padding: 0 .2em;
  }
  .why-card {
    padding: 1.6rem 1.4rem !important;
  }
  .why-card h3 {
    font-size: 1.08rem !important;
    line-height: 1.55 !important;
  }

  /* ===== ⑥ タッチ時の視覚フィードバック（ホバー代替） ===== */
  .trouble-card:active,
  .why-card:active,
  .funnel-card:active,
  .preview-card:active,
  .approach-card:active {
    transform: scale(.98) !important;
    transition: transform .12s ease-out !important;
    box-shadow: 0 4px 14px rgba(13,36,71,.12) !important;
  }

  /* ===== ⑦ 重いエフェクトを最適化（バッテリー＆スクロール性能） ===== */
  .constellation-canvas {
    opacity: .22 !important;                  /* .4→.22で軽量化 */
  }
  .hero-orb {
    opacity: .25 !important;
    filter: blur(40px) !important;
  }
  /* film grain をSPでは弱める（GPU負荷軽減） */
  body::before {
    opacity: .018 !important;
  }
  /* カードのbackdrop-filterはSPでは無効化 */
  .approach-card {
    backdrop-filter: none !important;
    background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%) !important;
  }

  /* ===== ⑧ セクション間リズム調整（読み疲れ防止） ===== */
  .trouble-section,
  .why-section,
  .samples-section,
  .funnel-section,
  .story-section,
  .industry-section,
  .approach-section,
  .preview-section {
    padding-top: clamp(56px, 13vw, 80px) !important;
    padding-bottom: clamp(56px, 13vw, 80px) !important;
  }

  /* ===== ⑨ TRUSTバナー：読みやすく ===== */
  .trust-banner {
    padding: 2rem 1.5rem !important;
    border-radius: 18px !important;
  }
  .tb-main {
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
  }
  .tb-desc {
    font-size: .85rem !important;
    line-height: 1.9 !important;
    margin-top: .8rem !important;
  }

  /* ===== ⑩ Preview Card（料金）：価格を主役に ===== */
  .preview-card {
    padding: 2rem 1.5rem !important;
  }
  .pv-price {
    font-size: clamp(1.85rem, 8vw, 2.4rem) !important;
    letter-spacing: -.02em !important;
  }
  .pv-en {
    font-size: .92rem !important;
  }

  /* ===== ⑪ セクション見出しの余白最適化 ===== */
  .sec-head {
    margin-bottom: 2rem !important;
    text-align: center;
  }
  .sec-label {
    font-size: .88rem !important;
    margin-bottom: .8rem !important;
  }
  .sec-sub {
    font-size: .85rem !important;
    line-height: 1.95 !important;
    margin-top: 1rem !important;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* ===== ⑫ サムネ・画像のクオリティ感向上 ===== */
  .preview-card img,
  .why-card img,
  .approach-card img {
    border-radius: 12px;
  }

  /* ===== ⑬ リンクのタップ領域明示 ===== */
  a:not(.btn-teal):not(.hero-cta):not(.btn-outline):not(.floating-cta) {
    padding: 2px 0;
    display: inline-block;
  }

  /* ===== ⑭ メニュー（ハンバーガー）のタップ領域確保 ===== */
  .hamburger,
  .menu-toggle,
  .nav-toggle {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* ===== ⑮ Selectionカラー（モバイルでも美しく） ===== */
  ::selection {
    background: rgba(31,179,168,.35);
    color: var(--navy-deep);
  }
}

/* ============================================================
   15-B. iPhone SE等の超小型端末向け（375px未満）
   ============================================================ */
@media (max-width: 374px) {
  .hero-title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  .btn-teal,
  .hero-cta {
    padding: .85rem 1.2rem !important;
    font-size: .9rem !important;
  }
  .floating-cta {
    padding: .65rem .9rem !important;
    font-size: .76rem !important;
  }
  .trouble-card::after,
  .funnel-card::after {
    display: none !important;                /* 超小型では完全非表示 */
  }
  .sec-title {
    font-size: 1.35rem !important;
  }
}

/* ============================================================
   15-C. アクセシビリティ：reduced-motion 対応強化
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .constellation-canvas,
  .hero-orb,
  body::before {
    display: none !important;
  }
}

/* ============================================================
   16. ユーザーフィードバック対応
   ============================================================ */

/* ===== ① ヒーロー背景グラデーション強化（丸い光を増加） ===== */
.hero::before {
  background:
    radial-gradient(ellipse 600px 300px at 20% 30%, rgba(31,179,168,.25) 0%, transparent 50%),
    radial-gradient(ellipse 500px 400px at 80% 70%, rgba(232,197,71,.15) 0%, transparent 50%),
    radial-gradient(ellipse 400px 350px at 50% -10%, rgba(31,179,168,.12) 0%, transparent 60%) !important;
  opacity: 1 !important;
}

/* ===== ② ヒーロー見出しのサイズ調整・視認性向上 ===== */
.hero-title {
  font-size: clamp(1.5rem, 6.8vw, 2.4rem) !important;
  line-height: 1.5 !important;
  margin-bottom: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
}
.hero-title .teal {
  background: linear-gradient(120deg, var(--teal-light) 0%, #6fe0d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
}

/* ===== ③ ヒーロー説明文を削減・シンプル化 ===== */
.hero-sub {
  font-size: .95rem !important;
  line-height: 1.9 !important;
  max-width: 85%;
  margin: 0 auto !important;
}

/* ===== ④ サービスを見るボタン：透明度を修正して可視化 ===== */
.btn-outline {
  background: linear-gradient(135deg, rgba(13,36,71,.1) 0%, rgba(31,179,168,.08) 100%) !important;
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: all .3s var(--ease-out-expo);
}
.btn-outline:hover {
  background: linear-gradient(135deg, rgba(13,36,71,.15) 0%, rgba(31,179,168,.12) 100%) !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,179,168,.25) !important;
}

/* ===== ④.5 ヒーロー背景：小さい光が前に向かってくるパラレックス ===== */
.hero::after {
  background:
    /* 背景から手前に来る大きな光（深度感） */
    radial-gradient(circle at 25% 50%, rgba(31,179,168,.15) 0%, transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(232,197,71,.10) 0%, transparent 20%),
    radial-gradient(circle at 15% 80%, rgba(31,179,168,.08) 0%, transparent 15%),
    radial-gradient(circle at 85% 75%, rgba(232,197,71,.12) 0%, transparent 22%),
    /* 中層の小さい光 */
    radial-gradient(circle at 35% 35%, rgba(63,201,190,.18) 0%, transparent 12%),
    radial-gradient(circle at 65% 65%, rgba(31,179,168,.14) 0%, transparent 10%),
    /* 手前の小さい輝く点 */
    radial-gradient(1.5px 1.5px at 20% 45%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 50% 20%, rgba(63,201,190,.9), transparent),
    radial-gradient(1.2px 1.2px at 78% 60%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.8px 0.8px at 30% 75%, rgba(31,179,168,.8), transparent);
  background-size:
    300% 300%,
    280% 280%,
    260% 260%,
    320% 320%,
    250% 250%,
    270% 270%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  animation:
    parallaxWaveLarge 26s ease-in-out infinite,
    parallaxWaveMid 22s ease-in-out infinite 2s,
    parallaxWaveSmall 18s ease-in-out infinite 4s,
    particleFloat 12s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

@keyframes parallaxWaveLarge {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

@keyframes parallaxWaveMid {
  0%, 100% { background-position: 0% 100%; }
  50% { background-position: 100% 0%; }
}

@keyframes parallaxWaveSmall {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes particleFloat {
  0% { transform: translateY(40px) scale(0.6); opacity: 0.3; }
  25% { opacity: 0.9; }
  75% { opacity: 0.7; }
  100% { transform: translateY(-80px) scale(1.1); opacity: 0; }
}

/* ===== ⑤ ロゴ + 丸い光が一緒に動くアニメーション ===== */
/* ロゴコンテナ全体をアニメーション（背景の丸＋ロゴ両方） */
.story-section {
  position: relative;
}
.story-logo-container {
  animation: logoOrbitPulse 8s cubic-bezier(.4, .0, .2, 1) infinite !important;
}
@keyframes logoOrbitPulse {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 30px rgba(31,179,168,.3));
  }
  50% {
    transform: scale(1.08) translateY(-12px);
    filter: drop-shadow(0 12px 40px rgba(31,179,168,.5));
  }
}

/* ===== ⑥ サービス・料金セクション：見やすいグリッドレイアウト ===== */
.preview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 2.5rem !important;
  margin-top: 3rem !important;
}
.preview-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.5rem 2rem !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(13,36,71,.12) !important;
  transition: all .4s var(--ease-out-expo);
}
.preview-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(13,36,71,.18) !important;
}
.preview-card h3 {
  font-size: 1.35rem !important;
  margin-bottom: 1.2rem !important;
  color: var(--navy-deep) !important;
}
.pv-price {
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  color: var(--teal) !important;
  margin: 1.2rem 0 !important;
  line-height: 1.3 !important;
}
.pv-en {
  font-size: 1.05rem !important;
  color: var(--text-mute) !important;
  margin-bottom: 1.5rem !important;
}
.preview-card p {
  flex-grow: 1;
  font-size: .95rem !important;
  line-height: 1.95 !important;
  color: var(--text-mute) !important;
  margin-bottom: 1.8rem !important;
}
.preview-card a {
  align-self: flex-start;
  margin-top: auto;
}

/* SP：サービス・料金をさらに見やすく */
@media (max-width: 720px) {
  .preview-grid {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
  }
  .preview-card {
    padding: 2rem 1.6rem !important;
  }
  .pv-price {
    font-size: 2.2rem !important;
  }
}