/*
=====================================================================
  MASUTO.inc - Creative Light Override v2
  Stripe/Vercel/Linear-inspired radical redesign
  読み込み順: style-light.css -> improvements.css -> [THIS] -> animations-rich.css
  全セレクタに !important を使用し、既存のすべてのスタイルを確実に上書き
=====================================================================
*/

/* =================================================================
   0. CSS Custom Properties Override
   ================================================================= */
:root {
  --cl-bg-white: #ffffff;
  --cl-bg-off: #f8fafc;
  --cl-heading: #0f172a;
  --cl-body: #475569;
  --cl-sub: #64748b;
  --cl-teal: #4ECDC4;
  --cl-teal-dark: #38b2ac;
  --cl-coral: #FF6B6B;
  --cl-coral-dark: #e85d5d;
  --cl-border: rgba(15, 23, 42, 0.06);
  --cl-card-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.06);
  --cl-card-shadow-hover: 0 8px 30px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --cl-radius: 16px;
  --cl-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   1. Global Typography - 白文字問題の完全解決
   ================================================================= */

/* 全ての見出し: ダーク背景セクション以外は #0f172a */
h1, h2, h3, h4, h5, h6 {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

/* 全ての段落テキスト */
p {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* リンク色 */
a {
  color: var(--cl-teal) !important;
}
a:hover {
  color: var(--cl-teal-dark) !important;
}

/* ダーク背景セクション内は白文字を許可 */
.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-section a,
.testimonials-section h1,
.testimonials-section h2,
.testimonials-section p,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer a,
.site-footer dt,
.site-footer dd,
.cta-section h1,
.cta-section h2,
.cta-section p,
.cta-section a,
.dxa-hero h1,
.dxa-hero h2,
.dxa-hero p,
.dxa-cta-section h1,
.dxa-cta-section h2,
.dxa-cta-section p,
.dxa-stats-section h2,
.dxa-stats-section p,
/* web-designページのダーク背景セクション */
.wd-hero h1,
.wd-hero h2,
.wd-hero h3,
.wd-hero p,
.wd-hero a,
.wd-hero span,
.wd-hero__title,
.wd-hero__subtitle,
.wd-hero__eyebrow,
.wd-cta-section h1,
.wd-cta-section h2,
.wd-cta-section h3,
.wd-cta-section p,
.wd-cta-section a,
.wd-cta-section span,
.wd-cta-title,
.wd-cta-desc,
.wd-cta-badge,
.wd-cta-note,
.wd-stats-section h2,
.wd-stats-section p,
.wd-stats-section span,
.wd-stat__value,
.wd-stat__unit,
.wd-stat__label,
/* セクションタイトル: ダーク背景内 */
.wd-hero .section-title,
.wd-hero .section-label,
.wd-hero .section-desc,
.wd-cta-section .section-title,
.wd-cta-section .section-label,
.wd-stats-section .section-title,
.wd-stats-section .section-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* AIOハイライト: ライト背景 — web-design.css側で色を管理 */

/* 強みセクションのラベル・説明 */
.wd-strengths-section .section-label {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}
.wd-strengths-section .section-desc {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
.wd-strength-card__num {
  content-visibility: visible !important;
  contain: none !important;
}

/* web-designページ: ライト背景セクションのテキスト色を明示 */
.wd-problems-section .section-label,
.wd-strengths-section .section-label,
.wd-plans-section .section-label,
.wd-options-section .section-label,
.wd-flow-section .section-label,
.wd-faq-section .section-label {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}

.wd-problems-section h2,
.wd-problems-section h3,
.wd-problems-section .section-title,
.wd-strengths-section h2,
.wd-strengths-section h3,
.wd-strengths-section .section-title,
.wd-plans-section h2,
.wd-plans-section h3,
.wd-plans-section .section-title,
.wd-options-section h2,
.wd-options-section h3,
.wd-options-section .section-title,
.wd-flow-section h2,
.wd-flow-section h3,
.wd-flow-section .section-title,
.wd-faq-section h2,
.wd-faq-section h3,
.wd-faq-section .section-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.wd-problems-section p,
.wd-problems-section .section-desc,
.wd-strengths-section p,
.wd-strengths-section .section-desc,
.wd-plans-section p,
.wd-plans-section .section-desc,
.wd-options-section p,
.wd-options-section .section-desc,
.wd-flow-section p,
.wd-flow-section .section-desc,
.wd-faq-section p,
.wd-faq-section .section-desc {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* web-designページ: カード内テキスト */
.wd-problem-card__text {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-strength-card__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-strength-card__desc {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.wd-plan-card__name {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-plan-card__target,
.wd-plan-card__note {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.wd-plan-card__price-num {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}
.wd-plan-card__price-unit {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-plan-card__feature {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
.wd-plan-card__feature--included .wd-plan-card__feature-icon {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}
.wd-plan-card__feature--excluded {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
.wd-option-item__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-option-item__desc {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.wd-option-item__price {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}
.wd-flow-item__title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-flow-item__desc {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
.wd-flow-item__step {
  color: #4ECDC4 !important;
  -webkit-text-fill-color: #4ECDC4 !important;
}
.wd-faq-item__q {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.wd-faq-item__a {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* ヒーローのグラデーションテキストは維持 */
.wd-hero__title--accent {
  background: linear-gradient(90deg, #4ECDC4, #FF6B6B) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* =================================================================
   2. Section Dividers - グラデーションライン
   ================================================================= */
.about-section::before,
.services-section::before,
.case-studies-section::before,
.contact-inline-section::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  right: 5% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--cl-teal), var(--cl-coral), transparent) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* WHYセクション用の区切り線（::beforeは他で使用されている） */
.why-section::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  right: 5% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--cl-teal), var(--cl-coral), transparent) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* testimonials - ::afterで区切り線 */
.testimonials-section::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  right: 5% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--cl-teal), var(--cl-coral), transparent) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  bottom: auto !important;
  width: auto !important;
  border-radius: 0 !important;
}

/* =================================================================
   3. Section Titles - 巨大でインパクトのあるタイポグラフィ
   ================================================================= */
.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  line-height: 1.15 !important;
}

.section-title::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-coral)) !important;
  border-radius: 2px !important;
}

.section-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
  font-size: 1.05rem !important;
  max-width: 680px !important;
}

.section-eyebrow {
  color: var(--cl-teal) !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
}

/* =================================================================
   4. Hero Section - グラデーションタイトル & 大型ボタン
   ================================================================= */
.hero-title {
  font-size: clamp(3.5rem, 10vw, 7rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.92 !important;
  color: #fff !important;
  margin-bottom: 2rem !important;
}

.hero-title,
.hero-title .word-inner {
  background: linear-gradient(135deg, #ffffff 20%, var(--cl-teal) 60%, #a8edea 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.375rem) !important;
  color: rgba(255, 255, 255, 0.60) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.60) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.9 !important;
  max-width: 540px !important;
  margin: 0 auto 2.5rem !important;
}

.hero-eyebrow {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}
.hero-eyebrow span {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

/* Hero Buttons - 大きめ、丸みを帯びたデザイン */
.hero-btn-main,
.btn.btn-primary.hero-btn-main {
  background: linear-gradient(135deg, var(--cl-teal) 0%, var(--cl-teal-dark) 50%, var(--cl-coral) 100%) !important;
  background-size: 200% 200% !important;
  animation: heroButtonGradient 4s ease infinite !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 1.1rem 2.8rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 24px rgba(78, 205, 196, 0.35), 0 2px 8px rgba(78, 205, 196, 0.20) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
@keyframes heroButtonGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-btn-main:hover,
.btn.btn-primary.hero-btn-main:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 36px rgba(78, 205, 196, 0.45), 0 4px 12px rgba(78, 205, 196, 0.25) !important;
}

.hero-section .btn-ghost {
  border-radius: 50px !important;
  padding: 1rem 2.4rem !important;
  font-size: 1rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.hero-section .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(78, 205, 196, 0.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Hero scroll indicator */
.hero-scroll-indicator {
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}
.hero-scroll-indicator span {
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

/* Hero stat bar */
.hero-stat-num {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.hero-stat-unit {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}
.hero-stat-text {
  color: rgba(255, 255, 255, 0.4) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

/* =================================================================
   5. About Section - 明るいライト背景上のテキスト色修正
   ================================================================= */
.about-section {
  background: var(--cl-bg-off) !important;
}

.about-eyebrow {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}
.about-eyebrow span {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.about-mission {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.about-mission-line {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.about-mission-line--accent {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.about-body-text p {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
  font-size: 1.0625rem !important;
  line-height: 1.9 !important;
}

.about-stat-number {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
  letter-spacing: -0.04em !important;
}

.about-stat-unit {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.about-stat-label {
  color: var(--cl-sub) !important;
  -webkit-text-fill-color: var(--cl-sub) !important;
  font-weight: 600 !important;
}

.about-stat-card {
  background: #fff !important;
  transition: all 0.3s ease !important;
}
.about-stat-card:hover {
  background: rgba(78, 205, 196, 0.04) !important;
  transform: translateY(-2px) !important;
}

.about-info-row dt {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}
.about-info-row dd {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.about-cta {
  border-radius: var(--cl-radius) !important;
}

/* =================================================================
   6. Services Section - 白背景 + カラフルアクセントバー
   ================================================================= */
.services-section {
  background: var(--cl-bg-white) !important;
}

.services-section .section-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.services-section .section-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

.services-grid {
  border-radius: 24px !important;
  background: var(--cl-border) !important;
  border: 1px solid var(--cl-border) !important;
}

.service-card {
  background: #fff !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 各カードに異なるアクセントバー色 */
.service-card:nth-child(1)::after {
  background: linear-gradient(90deg, transparent, var(--cl-teal), transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}
.service-card:nth-child(2)::after {
  background: linear-gradient(90deg, transparent, var(--cl-coral), transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}
.service-card:nth-child(3)::after {
  background: linear-gradient(90deg, transparent, #818cf8, transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}
.service-card:nth-child(4)::after {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}
.service-card:nth-child(5)::after {
  background: linear-gradient(90deg, transparent, #ec4899, transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}
.service-card:nth-child(6)::after {
  background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
  width: 100% !important;
  height: 3px !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(0) scaleX(1) !important;
  opacity: 1 !important;
}

/* Service card hover */
.service-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  background: #fff !important;
}
.service-card:nth-child(1):hover {
  box-shadow: 0 16px 40px rgba(78, 205, 196, 0.18), 0 4px 12px rgba(78, 205, 196, 0.08) !important;
}
.service-card:nth-child(2):hover {
  box-shadow: 0 16px 40px rgba(255, 107, 107, 0.18), 0 4px 12px rgba(255, 107, 107, 0.08) !important;
}
.service-card:nth-child(3):hover {
  box-shadow: 0 16px 40px rgba(129, 140, 248, 0.18), 0 4px 12px rgba(129, 140, 248, 0.08) !important;
}
.service-card:nth-child(4):hover {
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.18), 0 4px 12px rgba(245, 158, 11, 0.08) !important;
}
.service-card:nth-child(5):hover {
  box-shadow: 0 16px 40px rgba(236, 72, 153, 0.18), 0 4px 12px rgba(236, 72, 153, 0.08) !important;
}
.service-card:nth-child(6):hover {
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.18), 0 4px 12px rgba(16, 185, 129, 0.08) !important;
}

.service-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  font-weight: 700 !important;
}

.service-num {
  color: rgba(78, 205, 196, 0.4) !important;
  -webkit-text-fill-color: rgba(78, 205, 196, 0.4) !important;
}

.service-details li {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}
.service-card:hover .service-details li {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  padding-left: 4px !important;
}
.service-card:hover .service-details ul li {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

/* =================================================================
   7. WHY Section - 白文字問題の完全修正（最重要）
   ================================================================= */
.why-section {
  background: var(--cl-bg-off) !important;
  padding: 7rem 0 !important;
}

/* ダーク背景要素を非表示 */
.why-bg {
  display: none !important;
}

.why-section .section-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.why-section .section-eyebrow {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.why-section .section-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}
.why-section .section-description strong {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

/* WHY Cards - 白背景カード */
.why-card {
  background: #fff !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--cl-card-shadow) !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.why-card:hover {
  background: #fff !important;
  border-color: rgba(78, 205, 196, 0.3) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 48px rgba(78, 205, 196, 0.15), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.why-card::before {
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-coral)) !important;
  height: 3px !important;
}

.why-card-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.why-card-body {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.85 !important;
}

.why-card-number {
  color: rgba(78, 205, 196, 0.12) !important;
  -webkit-text-fill-color: rgba(78, 205, 196, 0.12) !important;
}
.why-card:hover .why-card-number {
  color: rgba(78, 205, 196, 0.20) !important;
  -webkit-text-fill-color: rgba(78, 205, 196, 0.20) !important;
}

.why-card-line {
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-coral)) !important;
}

.why-cta-note {
  color: var(--cl-sub) !important;
  -webkit-text-fill-color: var(--cl-sub) !important;
}

/* =================================================================
   8. Testimonials Section - ダーク背景、視認性確保
   ================================================================= */
.testimonials-section .section-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.testimonials-section .section-description {
  color: rgba(255, 255, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(78, 205, 196, 0.35) !important;
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(78, 205, 196, 0.25) !important;
}

.testimonial-body {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
.testimonial-body p {
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

.testimonial-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.testimonial-company {
  color: rgba(78, 205, 196, 0.80) !important;
  -webkit-text-fill-color: rgba(78, 205, 196, 0.80) !important;
}

.testimonial-stars .star {
  color: #FFD700 !important;
  -webkit-text-fill-color: #FFD700 !important;
}

/* =================================================================
   9. CTA Section - グラデーション背景 + インパクト
   ================================================================= */
.cta-section {
  background: linear-gradient(135deg, var(--cl-teal) 0%, #2ec4b6 30%, var(--cl-coral) 70%, #e85d5d 100%) !important;
  background-size: 200% 200% !important;
  padding: 6rem 0 !important;
}

.cta-section .cta-content {
  text-align: center !important;
}

.cta-section h2,
.cta-section .cta-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.5rem !important;
}

.cta-section p,
.cta-section .cta-description {
  color: rgba(255, 255, 255, 0.90) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;
  font-size: 1.1rem !important;
  max-width: 600px !important;
  margin: 0 auto 2.5rem !important;
}

.cta-section .btn-primary {
  background: #fff !important;
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  border-radius: 50px !important;
  padding: 1.1rem 2.8rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.cta-section .btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.cta-section .btn-outline {
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 50px !important;
  padding: 1rem 2.4rem !important;
  background: transparent !important;
}
.cta-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
  transform: translateY(-3px) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* =================================================================
   10. Contact Section - ライト背景
   ================================================================= */
.contact-inline-section {
  background: var(--cl-bg-off) !important;
}

.contact-inline-section h2,
.contact-inline-section .section-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.contact-inline-section .section-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

.contact-inline-section h3 {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.contact-inline-section p {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

.contact-inline-item strong {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.contact-inline-item span {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

.contact-inline-section .btn-primary {
  border-radius: var(--cl-radius) !important;
}

/* =================================================================
   11. Buttons - 全体的なスタイル強化
   ================================================================= */
.btn {
  border-radius: var(--cl-radius) !important;
  font-weight: 600 !important;
  transition: var(--cl-transition) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cl-teal) 0%, var(--cl-teal-dark) 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(78, 205, 196, 0.30) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(78, 205, 196, 0.40) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.btn-lg {
  padding: 1rem 2.5rem !important;
  font-size: 1rem !important;
  border-radius: 50px !important;
}

.btn-outline {
  border-radius: var(--cl-radius) !important;
  border: 2px solid var(--cl-heading) !important;
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.btn-outline:hover {
  background: var(--cl-heading) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* Header CTA button */
.menu-button .btn-primary {
  border-radius: 50px !important;
  background: linear-gradient(135deg, var(--cl-coral), var(--cl-coral-dark)) !important;
  box-shadow: 0 3px 14px rgba(255, 107, 107, 0.30) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.menu-button .btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 24px rgba(255, 107, 107, 0.45) !important;
}

/* Contact section CTA */
#contact .btn-primary,
.contact-section .btn-primary {
  border-radius: 50px !important;
  background: linear-gradient(135deg, var(--cl-coral), var(--cl-coral-dark)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* =================================================================
   12. Case Studies - ライト背景
   ================================================================= */
.case-studies-section {
  background: var(--cl-bg-off) !important;
}

.case-studies-section .section-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.case-studies-section .section-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

.case-study-card {
  border-radius: 16px !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow: var(--cl-card-shadow) !important;
  transition: var(--cl-transition) !important;
}

.case-study-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--cl-card-shadow-hover) !important;
}

.case-study-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.case-study-title a {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.case-study-excerpt {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* =================================================================
   13. DXA Page Overrides - 白文字問題修正
   ================================================================= */

/* DXA Tiles (ライト背景) */
.dxa-tile__title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.dxa-tile__desc {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* DXA Service cards (ライト背景) */
.dxa-service-card__title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.dxa-service-card__desc {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}
.dxa-service-card__num {
  color: rgba(78, 205, 196, 0.3) !important;
  -webkit-text-fill-color: rgba(78, 205, 196, 0.3) !important;
}
.dxa-service-card__points li {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* DXA About section */
.dxa-about-desc {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}
.dxa-about-points li {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

/* DXA Flow items (ライト背景) */
.dxa-flow-item__title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.dxa-flow-item__desc {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}
.dxa-flow-item__step {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

/* DXA FAQ items (ライト背景) */
.dxa-faq-item__q {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.dxa-faq-item__a {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* DXA Hero - ダーク背景OK */
.dxa-hero__title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.dxa-hero__title--accent {
  -webkit-text-fill-color: transparent !important;
}
.dxa-hero__subtitle {
  color: rgba(255, 255, 255, 0.75) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

/* DXA Stats - ダーク背景OK */
.dxa-stat__value {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.dxa-stat__label {
  color: rgba(255, 255, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

/* DXA CTA - ダーク背景OK */
.dxa-cta-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.dxa-cta-desc {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
.dxa-cta-note {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

/* =================================================================
   14. Cards - 共通ホバーエフェクト強化
   ================================================================= */
.service-card,
.case-study-card,
.testimonial-card,
.news-card,
.feature-item {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease !important;
}

/* =================================================================
   15. Footer - ダーク背景、テキスト色保証
   ================================================================= */
.site-footer {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.site-footer p,
.site-footer dd {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
.site-footer a:hover {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.site-footer dt {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

.footer-accent-bar {
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cl-teal) 20%,
    var(--cl-coral) 50%,
    var(--cl-teal) 80%,
    transparent 100%) !important;
}

/* =================================================================
   16. Header - 視認性確保
   ================================================================= */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 20px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ヒーロー上のヘッダー文字は白 */
.site-header:not(.scrolled) .site-title a {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}
.site-header:not(.scrolled) .menu-item a {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}
.site-header:not(.scrolled) .menu-item a:hover,
.site-header:not(.scrolled) .menu-item.current-menu-item a {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

/* スクロール後のヘッダー文字はダーク */
.site-header.scrolled .site-title a {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.site-header.scrolled .menu-item a {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.site-header.scrolled .menu-item a:hover,
.site-header.scrolled .menu-item.current-menu-item a {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

/* =================================================================
   17. Animations Override - text-fill-color 問題の修正
   ================================================================= */

/* text-gradient-anim クラスは意図的な透明テキスト - 許可 */
.text-gradient-anim {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* section-title-anim のアンダーライン */
.section-title-anim::after {
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-coral)) !important;
}

/* =================================================================
   18. Alternating Section Backgrounds
   ================================================================= */
.about-section {
  background: var(--cl-bg-off) !important;
}
.services-section {
  background: var(--cl-bg-white) !important;
}
.case-studies-section {
  background: var(--cl-bg-off) !important;
}
.contact-inline-section {
  background: var(--cl-bg-off) !important;
}

/* =================================================================
   19. Feature Items
   ================================================================= */
.feature-item {
  border-radius: 20px !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow: var(--cl-card-shadow) !important;
}
.feature-item:hover {
  border-color: var(--cl-teal) !important;
  box-shadow: var(--cl-card-shadow-hover) !important;
  transform: translateY(-6px) !important;
}

.feature-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

.feature-description {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* =================================================================
   20. Scroll Progress Bar
   ================================================================= */
#scroll-progress-bar {
  background: linear-gradient(90deg, var(--cl-teal), var(--cl-coral), var(--cl-teal)) !important;
  background-size: 300% 100% !important;
  height: 3px !important;
}

/* =================================================================
   21. Mobile Responsive Overrides
   ================================================================= */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
    line-height: 0.95 !important;
  }

  .section-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  .hero-btn-main,
  .btn.btn-primary.hero-btn-main {
    padding: 1rem 2rem !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  .hero-section .btn-ghost {
    padding: 0.9rem 2rem !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  .about-body-grid {
    grid-template-columns: 1fr !important;
  }

  .about-mission {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
  }

  /* モバイルメニュー内のテキスト色 */
  .main-navigation .menu.active .menu-item a {
    color: var(--cl-heading) !important;
    -webkit-text-fill-color: var(--cl-heading) !important;
  }

  .cta-section {
    padding: 4rem 0 !important;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: clamp(2rem, 14vw, 3rem) !important;
  }

  .btn-lg {
    padding: 0.875rem 2rem !important;
    font-size: 0.9rem !important;
  }
}

/* =================================================================
   22. Miscellaneous - その他の視認性修正
   ================================================================= */

/* Card titles and text in light sections */
.card-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.card-text {
  color: var(--cl-body) !important;
  -webkit-text-fill-color: var(--cl-body) !important;
}

/* News cards */
.news-card h3,
.news-card .card-title {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}

/* Section footer links */
.section-footer .btn-outline {
  border-color: var(--cl-heading) !important;
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
  border-radius: 50px !important;
}
.section-footer .btn-outline:hover {
  background: var(--cl-heading) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Breadcrumbs */
.breadcrumb__item a {
  color: var(--cl-heading) !important;
  -webkit-text-fill-color: var(--cl-heading) !important;
}
.breadcrumb__item a:hover {
  color: var(--cl-teal) !important;
  -webkit-text-fill-color: var(--cl-teal) !important;
}

/* SVG icons in service/why cards */
.service-icon svg {
  color: var(--cl-teal) !important;
}
.why-card-icon svg {
  color: var(--cl-teal) !important;
}