/**
 * Core GX Readability Theme
 * Version: 2.19.0
 * Purpose: 視認性改善＆配色統一 - WCAG AA準拠
 * 
 * 背景：ネイビー統一
 * カード：薄い青（#E9F5FF）
 * テキスト：コントラスト比 4.5:1 以上
 */

/* ========================================
   色トークン定義
   ======================================== */
:root {
  /* 背景色（ネイビー系） */
  --bg-navy: #0B1E3A;
  --bg-navy-2: #091931;
  
  /* カード色（薄い青） */
  --card-light: #E9F5FF;
  
  /* テキスト色 */
  --text-on-navy: #EAF6FF;      /* ネイビー上の本文/見出し */
  --text-strong: #0A2540;        /* カード上の本文/見出し */
  --muted: #8FA3B8;              /* 補助テキスト */
  
  /* アクセント色（Core GX シアン） */
  --accent: #35B6FF;
  --accent-2: #7DD3FF;
  
  /* エフェクト */
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  --card-border-color: rgba(53, 182, 255, 0.25);
}

/* ========================================
   背景統一（ネイビー）
   ======================================== */
body.body-coregx {
  background: var(--bg-navy) !important;
  color: var(--text-on-navy) !important;
}

/* 全セクション背景をネイビーに */
.section,
.hero,
.features,
.pricing,
.cta,
section {
  background: var(--bg-navy) !important;
}

/* 交互背景用（少し濃いネイビー） */
.section.alt,
section:nth-child(even) {
  background: var(--bg-navy-2) !important;
}

/* 既存のグラデーション背景を上書き */
.hero-gradient,
.gradient-bg {
  background: var(--bg-navy) !important;
}

/* ========================================
   見出し＆本文（ネイビー上）
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-on-navy) !important;
  text-shadow: none !important; /* グロー禁止 */
}

p, li, small, span, div {
  color: var(--text-on-navy);
}

/* 補助テキスト */
.muted,
.text-gray-500,
.text-gray-600,
.text-secondary {
  color: var(--muted) !important;
}

/* main-copy クラスの上書き */
.main-copy {
  color: var(--text-on-navy) !important;
}

/* ========================================
   カード（薄い青）
   ======================================== */
.card,
.card-gx,
.feature-card,
.stat-card,
.card-hover,
.bg-white {
  background: var(--card-light) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--card-border-color) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important; /* グラスモーフィズム解除 */
}

/* カード内の見出し */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card-gx h1,
.card-gx h2,
.card-gx h3,
.card-gx h4,
.card-gx h5,
.card-gx h6,
.feature-card h3,
.stat-card h3,
.gx-title,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
  color: var(--text-strong) !important;
  text-shadow: none !important;
}

/* カード内の本文 */
.card p,
.card li,
.card span,
.card-gx p,
.card-gx li,
.card-gx span,
.feature-card p,
.stat-card p,
.bg-white p,
.bg-white li,
.bg-white span {
  color: var(--text-strong) !important;
}

/* カード内のリンク */
.card a,
.card-gx a,
.bg-white a {
  color: #0556A3 !important;
  text-decoration: underline;
}

.card a:hover,
.card-gx a:hover,
.bg-white a:hover {
  color: #003E7A !important;
}

/* ========================================
   ボタン
   ======================================== */
.button,
.btn,
.btn-gx {
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

/* プライマリボタン（ネイビー上） */
.btn-primary,
.btn-gx {
  color: #fff !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(53, 182, 255, 0.3) !important;
}

.btn-primary:hover,
.btn-gx:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(53, 182, 255, 0.4) !important;
}

/* アウトラインボタン（ネイビー上） */
.btn-outline,
.btn-secondary {
  color: var(--text-on-navy) !important;
  background: transparent !important;
  border: 2px solid var(--accent) !important;
}

.btn-outline:hover,
.btn-secondary:hover {
  background: rgba(53, 182, 255, 0.1) !important;
}

/* カード上のボタン */
.btn-on-card {
  color: var(--text-strong) !important;
  background: #fff !important;
  border: 1px solid rgba(10, 37, 64, 0.12) !important;
}

.btn-on-card:hover {
  background: #F7FBFF !important;
}

/* ========================================
   アイコン配色（単色化）
   ======================================== */
.icon svg,
.icon svg path,
.icon svg circle,
.icon svg rect {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* カード内のアイコンは濃い色 */
.card .icon svg,
.card .icon svg path,
.card-gx .icon svg,
.card-gx .icon svg path,
.bg-white .icon svg,
.bg-white .icon svg path {
  fill: var(--text-strong) !important;
  stroke: var(--text-strong) !important;
}

/* Lucide icons */
svg.lucide {
  color: var(--accent) !important;
  stroke: var(--accent) !important;
}

.card svg.lucide,
.card-gx svg.lucide,
.bg-white svg.lucide {
  color: var(--text-strong) !important;
  stroke: var(--text-strong) !important;
}

/* Font Awesome icons in cards - チェックマークは青系に */
.card .fa-check,
.card-gx .fa-check,
.bg-white .fa-check {
  color: var(--accent) !important;
}

/* ========================================
   ヒーローセクション可読性
   ======================================== */
.hero .title,
.hero .subtitle,
.hero h1,
.hero h2,
.hero p {
  text-shadow: none !important;
  color: var(--text-on-navy) !important;
}

.hero .content {
  position: relative;
  z-index: 2;
}

.hero .bg,
.hero .decor,
.hero .particles {
  z-index: 1;
}

/* ========================================
   セクションタイトル
   ======================================== */
.section-title,
.section-title-gx {
  color: var(--text-on-navy) !important;
  text-shadow: none !important;
}

/* ========================================
   Z-index 調整（文字が背景に沈まない）
   ======================================== */
.heading,
.hero .content,
.cta .content,
h1, h2, h3, h4, h5, h6,
p, .card, .card-gx {
  position: relative;
  z-index: 2;
}

.hero .bg,
.decor,
.particles,
.background-effect {
  z-index: 1 !important;
}

/* ========================================
   グリッド・カード配置
   ======================================== */
.grid,
.cards,
.card-container {
  gap: 24px;
}

/* ========================================
   ナビゲーション
   ======================================== */
.nav-coregx {
  background: rgba(11, 30, 58, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border-color);
}

.nav-coregx a {
  color: var(--text-on-navy) !important;
}

.nav-coregx a:hover {
  color: var(--accent) !important;
}

/* ========================================
   テーブル（費用比較など）
   ======================================== */
table {
  background: var(--card-light) !important;
  border: 1px solid var(--card-border-color);
  border-radius: 16px;
  overflow: hidden;
}

table thead {
  background: var(--bg-navy) !important;
}

table thead th {
  color: var(--text-on-navy) !important;
}

table tbody tr {
  background: var(--card-light) !important;
}

table tbody td {
  color: var(--text-strong) !important;
}

table tbody tr:hover {
  background: rgba(53, 182, 255, 0.08) !important;
}

/* ========================================
   フォーカス・アクセシビリティ
   ======================================== */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* キーボードナビゲーション */
*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(53, 182, 255, 0.2) !important;
}

/* ========================================
   行間・可読性
   ======================================== */
p, li, .main-copy {
  line-height: 1.6;
}

.card p,
.card-gx p,
.feature-card p {
  line-height: 1.6;
}

/* ========================================
   画像上テキスト（オーバーレイ）
   ======================================== */
.image-overlay {
  position: relative;
}

.image-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 30, 58, 0.6);
  z-index: 1;
}

.image-overlay * {
  position: relative;
  z-index: 2;
}

/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 768px) {
  .card,
  .card-gx,
  .feature-card {
    padding: 1.5rem !important;
  }
  
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  
  p, li {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ========================================
   アニメーション抑制（可読性優先）
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   特定要素の強制上書き
   ======================================== */
/* 既存のCore GX変数を上書き */
.body-coregx {
  --gx-deep-navy: var(--bg-navy);
  --gx-cyan: var(--accent);
  --gx-blue: var(--accent-2);
  --text-primary: var(--text-on-navy);
  --text-secondary: var(--muted);
  --card-bg: var(--card-light);
  --card-bd: var(--card-border-color);
}

/* 3つのサポートカード専用の統一スタイル */
#support-services .bg-white,
#support-services .card-gx {
  background: var(--card-light) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--card-border-color) !important;
}

#support-services .bg-white h3,
#support-services .card-gx h3 {
  color: var(--text-strong) !important;
}

#support-services .bg-white p,
#support-services .bg-white span,
#support-services .card-gx p,
#support-services .card-gx span {
  color: var(--text-strong) !important;
}

#support-services .bg-white .fa-check,
#support-services .card-gx .fa-check {
  color: var(--accent) !important;
}

#support-services .bg-white i.fa-rocket,
#support-services .bg-white i.fa-cogs,
#support-services .bg-white i.fa-chart-line,
#support-services .card-gx i.fa-rocket,
#support-services .card-gx i.fa-cogs,
#support-services .card-gx i.fa-chart-line {
  color: var(--text-strong) !important;
}

/* Chart.js グラフの背景透明化解除 */
canvas {
  background: transparent !important;
}

/* グラフを含むカードは薄い青背景 */
.card-gx:has(canvas),
.bg-white:has(canvas) {
  background: var(--card-light) !important;
}

/* ========================================
   GTPソリューションの効果事例セクション専用
   ======================================== */
/* セクション全体の背景グラデーション */
#effect-case-section {
  background: linear-gradient(135deg, #071B2F 0%, #0B2A49 55%, #0F3D66 100%) !important;
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* 左カード：1棚あたりのオーダー数による効率の違い */
#effect-case-section > .grid > div:first-child {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 左カード：暗色グラデのオーバーレイ */
#effect-case-section > .grid > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0B2440 0%, rgba(11, 36, 64, 0.55) 35%, rgba(11, 36, 64, 0) 100%);
  pointer-events: none;
  border-radius: 14px;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* 左カード：すべての子要素を前面に */
#effect-case-section > .grid > div:first-child > * {
  position: relative;
  z-index: 2;
}

/* 効率化ポイントバッジ */
#effect-case-section .inline-flex.items-center {
  background: linear-gradient(135deg, #1F7DDC, #52B2FF) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(47, 179, 255, 0.35);
}

#effect-case-section .inline-flex.items-center .font-bold {
  color: #FFFFFF !important;
}

/* 左カード：見出しエリアをフロステッド化 */
#effect-case-section > .grid > div:first-child > h4,
#effect-case-section > .grid > div:first-child > p:nth-of-type(1) {
  background: rgba(7, 27, 47, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 12px;
}

/* 左カード：見出し */
#effect-case-section > .grid > div:first-child h4 {
  color: #E9F5FF !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* 左カード：サブ見出し */
#effect-case-section > .grid > div:first-child > p:nth-of-type(1) {
  color: #CBE7FF !important;
  font-weight: 600 !important;
  text-align: center;
}

/* 左カード：本文ブロック */
#effect-case-section > .grid > div:first-child .text-sm.text-gray-700 {
  background: rgba(7, 27, 47, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  color: #D7EAFE !important;
  line-height: 1.7 !important;
}

#effect-case-section > .grid > div:first-child .text-sm.text-gray-700 p {
  color: #D7EAFE !important;
}

#effect-case-section > .grid > div:first-child .text-sm.text-gray-700 strong {
  color: #59D0FF !important;
  font-weight: 700;
}

/* 右カード：投資効果シミュレーション */
#effect-case-section > .grid > div:last-child {
  background: rgba(9, 28, 50, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 右カード：バッジ */
#effect-case-section > .grid > div:last-child .bg-blue-600 {
  background: linear-gradient(135deg, #1F7DDC, #52B2FF) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(47, 179, 255, 0.35);
}

/* 右カード：大見出し */
#effect-case-section > .grid > div:last-child h4 {
  color: #E9F5FF !important;
  font-weight: 700 !important;
}

/* 右カード：KPIミニカード（4つの小枠） */
#effect-case-section .grid.grid-cols-2 > div {
  background: rgba(9, 28, 50, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* KPIミニカード：アイコン */
#effect-case-section .grid.grid-cols-2 i {
  color: #59D0FF !important;
}

/* KPIミニカード：ラベル */
#effect-case-section .grid.grid-cols-2 .text-xs {
  color: #CBE7FF !important;
}

/* KPIミニカード：数値 */
#effect-case-section .grid.grid-cols-2 .text-2xl,
#effect-case-section .grid.grid-cols-2 .text-lg {
  color: #59D0FF !important;
  font-weight: 700 !important;
}

/* KPIミニカード：アクセント数値（緑系） */
#effect-case-section .grid.grid-cols-2 .text-aqua-accent {
  color: #2FB3FF !important;
}

/* 右カード：下段の詳細指標カード */
#effect-case-section > .grid > div:last-child > .bg-white:last-child {
  background: rgba(9, 28, 50, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

/* 下段指標：ラベル */
#effect-case-section > .grid > div:last-child > .bg-white:last-child .text-sm {
  color: #CBE7FF !important;
}

/* 下段指標：数値 */
#effect-case-section > .grid > div:last-child > .bg-white:last-child .text-lg {
  color: #59D0FF !important;
  font-weight: 700 !important;
}

/* 下段指標：警告数値（最低処理単価など） */
#effect-case-section > .grid > div:last-child > .bg-white:last-child .text-red-500 {
  color: #FFDA6B !important;
  font-weight: 700 !important;
}

/* ビデオカードは既存デザイン維持 */
#effect-case-section .relative.grid video {
  /* 既存スタイルを維持 */
}

/* ========================================
   1棚あたり受注行数による費用効率比較セクション
   ======================================== */
/* セクション見出し */
.section-cost-efficiency h2 {
  color: #133A78 !important;
  font-weight: 800 !important;
  position: relative !important;
}

/* 見出し右下の注釈（疑似要素） */
.section-cost-efficiency h2::after {
  content: "※時間あたり1,200行の処理能力とした場合";
  display: block;
  font-size: 13px;
  color: #557AAE;
  font-style: italic;
  text-align: right;
  margin-top: 4px;
  font-weight: 400;
}

/* Screen reader only caption */
.section-cost-efficiency .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* テーブルヘッダ */
.section-cost-efficiency table thead th {
  background: #EAF3FF !important;
  color: #113A6C !important;
  font-weight: 700 !important;
  border-right: 1px solid #D0E4FF !important;
}

.section-cost-efficiency table thead th:last-child {
  border-right: none !important;
}

/* テーブル本体の行背景 */
.section-cost-efficiency table tbody tr:nth-child(odd) {
  background: #FFFFFF !important;
}

.section-cost-efficiency table tbody tr:nth-child(even) {
  background: #FAFCFF !important;
}

/* テーブル本体のセル */
.section-cost-efficiency table tbody th[scope="row"] {
  color: #113A6C !important;
  font-weight: 700 !important;
}

/* 必要AGV台数（台）列を強調（2列目） */
.section-cost-efficiency table tbody td:nth-child(2) {
  color: #0EA5E9 !important;
  font-weight: 700 !important;
}

/* 最終行（5行目）の全数値を強調 */
.section-cost-efficiency table tbody tr:last-child td {
  color: #0EA5E9 !important;
  font-weight: 700 !important;
}

.section-cost-efficiency table tbody tr:last-child th[scope="row"] {
  color: #0EA5E9 !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
}

/* ホバー効果 */
.section-cost-efficiency table tbody tr:hover {
  background: #EBF5FF !important;
}

/* GX Footnotes（注意書き） */
.gx-footnotes {
  margin-top: 16px;
  margin-bottom: 12px;
  padding: 0;
}

.gx-footnotes p {
  margin: 0;
  color: #234C84 !important;
  font-size: 12px !important;
  line-height: 1.6;
}

/* 注釈の先頭マーカー（※）をブルーで強調 */
.gx-footnotes p .gx-footnote-marker {
  color: #0EA5E9 !important;
  font-weight: 700 !important;
}

.gx-footnotes p strong {
  font-weight: 700 !important;
  color: #234C84 !important;
}

/* ※記号を強調 */
.gx-footnotes p strong::before {
  color: #0EA5E9 !important;
}

/* GX Point Cards（3つのポイントカード） */
.gx-point-card {
  background: #F4F8FF !important;
  border: 1px solid #D9E7FF !important;
  box-shadow: 0 8px 24px rgba(18, 69, 132, 0.08) !important;
  border-radius: 14px !important;
  transition: all 0.3s ease;
}

.gx-point-card:hover {
  box-shadow: 0 12px 32px rgba(18, 69, 132, 0.14) !important;
  transform: translateY(-2px);
}

.gx-point-card h4 {
  color: #133A78 !important;
  font-weight: 700 !important;
}

.gx-point-card p {
  color: #3A5A7C !important;
  line-height: 1.7;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-cost-efficiency table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .gx-footnotes {
    margin-top: 16px;
    padding: 12px 0;
  }
  
  .gx-footnotes p {
    font-size: 0.85rem;
  }
  
  /* モバイルでは必要AGV台数と最低処理単価を優先表示 */
  .section-cost-efficiency table thead th:nth-child(1),
  .section-cost-efficiency table thead th:nth-child(2),
  .section-cost-efficiency table thead th:nth-child(8),
  .section-cost-efficiency table tbody th:nth-child(1),
  .section-cost-efficiency table tbody td:nth-child(2),
  .section-cost-efficiency table tbody td:nth-child(8) {
    position: sticky;
    background: inherit;
  }
}

/* ========================================
   最下部CTAカード（Main Support Visual）
   Core GX視認性改善 - Ver.2.16.0
   ======================================== */

/* カード全体 - 深いネイビーグラデーション */
#pdca .bg-gradient-to-br.from-navy-blue.to-navy-deep {
  background: linear-gradient(135deg, #0B1F3A 0%, #123E70 100%) !important;
  border-radius: 20px !important;
  padding: 32px 40px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* 見出し - 白色・太字 */
#pdca .bg-gradient-to-br h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

/* 本文 - 明るい青白・高コントラスト */
#pdca .bg-gradient-to-br p {
  color: #E9F5FF !important;
  opacity: 0.95 !important;
  line-height: 1.8 !important;
}

/* アイコンボックス - 濃いブルーグラデーション + 白アイコン */
#pdca .bg-gradient-to-br .bg-white.bg-opacity-20 {
  background: linear-gradient(135deg, #1E88E5, #1565C0) !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: none !important; /* backdrop-blurを無効化 */
}

/* アイコン本体 - 白色 */
#pdca .bg-gradient-to-br .bg-white.bg-opacity-20 i {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  #pdca .bg-gradient-to-br.from-navy-blue.to-navy-deep {
    padding: 24px 20px !important;
  }
  
  #pdca .bg-gradient-to-br .bg-white.bg-opacity-20 {
    width: 64px !important;
    height: 64px !important;
  }
  
  #pdca .bg-gradient-to-br h3 {
    font-size: 1.75rem !important;
  }
  
  #pdca .bg-gradient-to-br p {
    font-size: 1rem !important;
  }
}

/* ========================================
   ヒーローセクション背景動画 - Ver.2.18.0
   ======================================== */

/* ヒーローセクション全体 */
.hero-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 背景動画 */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  animation: videoFadeIn 2.5s ease-in forwards;
}

/* 動画フェードインアニメーション */
@keyframes videoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ネイビー系グラデーションオーバーレイ */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 10, 30, 0.5) 0%,
    rgba(11, 30, 58, 0.45) 50%,
    rgba(0, 10, 30, 0.5) 100%
  );
  z-index: 1;
}

/* ヒーロータイトル - 白色＋テキストシャドウ */
.hero-title {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6),
               0 4px 12px rgba(0, 0, 0, 0.4);
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* ヒーローサブタイトル - 白色＋テキストシャドウ */
.hero-subtitle {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5),
               0 2px 8px rgba(0, 0, 0, 0.3);
  font-weight: 400 !important;
  line-height: 1.7;
}

/* ヒーローボタン共通スタイル */
.hero-btn {
  padding: 16px 40px;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* 左ボタン（ソリューション詳細）- Core GX Blue */
.hero-btn-primary {
  background: linear-gradient(135deg, #29B6F6 0%, #1E88E5 100%);
  color: #FFFFFF;
  border: 2px solid transparent;
}

.hero-btn-primary:hover {
  background: linear-gradient(135deg, #42C2FF 0%, #29B6F6 100%);
  box-shadow: 0 6px 16px rgba(41, 182, 246, 0.4);
  transform: translateY(-2px);
}

/* 右ボタン（お問い合わせ）- Deep Navy Blue */
.hero-btn-secondary {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%);
  color: #FFFFFF;
  border: 2px solid transparent;
}

.hero-btn-secondary:hover {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 100%);
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.4);
  transform: translateY(-2px);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .hero-section {
    min-height: 50vh;
  }
  
  .hero-title {
    font-size: 2.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 1.125rem !important;
  }
  
  .hero-btn {
    padding: 14px 32px;
    font-size: 1rem;
  }
}

/* ========================================
   サポートカード統一ホバーアニメーション - Ver.2.30.0
   ======================================== */

.support-card {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* デスクトップのみホバーアニメーション適用 */
@media (min-width: 1024px) {
  .support-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }
}

/* ========================================
   見出しデザイン統一 - Ver.2.19.0
   Core GX二重ラインスタイル
   ======================================== */

/* Core GX共通CSS変数 */
:root {
  --gx-navy: #0F2740;
  --gx-navy-2: #0C2033;
  --gx-blue: #1FA2FF;
  --gx-blue-2: #3CAAF2;
  --gx-white: #FFFFFF;
  --gx-white-80: #FFFFFFCC;
}

/* セクション全体 */
.gx-section {
  background: linear-gradient(180deg, var(--gx-navy) 0%, var(--gx-navy-2) 100%);
  padding: 32px 20px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  margin: 0;
}

/* 見出しコンテナ */
.gx-heading {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

/* 見出しテキスト */
.gx-title {
  color: var(--gx-white);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  line-height: 1.4;
}

/* 二重ライン（上：太い） */
.gx-title-underline {
  display: block;
  height: 4px;
  width: 120px;
  margin: 0 auto;
  background: linear-gradient(90deg, var(--gx-blue-2), var(--gx-blue));
  border-radius: 999px;
}

/* 二重ライン（下：細い） */
.gx-title-underline--bottom {
  height: 2px;
  width: 84px;
  margin-top: 6px;
  opacity: 0.95;
}

/* 説明テキスト */
.gx-subtext {
  margin: 14px auto 0;
  max-width: 860px;
  color: var(--gx-white-80);
  font-size: 15px;
  line-height: 1.65;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .gx-section {
    padding: 24px 16px 18px;
  }
  
  .gx-title {
    font-size: 22px;
  }
  
  .gx-title-underline {
    width: 88px;
  }
  
  .gx-title-underline--bottom {
    width: 64px;
  }
  
  .gx-subtext {
    font-size: 14px;
  }
}

/* ========================================
   ヘッダーロゴテキスト - Ver.2.20.0
   ネオンシアングラデーション + 発光効果
   ======================================== */

/* ロゴラッパー */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ロゴテキスト */
.logo-text {
  font-family: 'Poppins', 'Noto Sans JP', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #21D4FD 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(33, 212, 253, 0.5));
  transition: all 0.25s ease;
}

/* ホバーエフェクト */
.logo-text:hover {
  filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 16px rgba(33, 212, 253, 0.7));
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .logo-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .logo-text {
    font-size: 1.25rem;
  }
}

/* ========================================
   フローCTAボタン - Ver.2.23.0
   改善フロー図解直下のソリューション詳細ボタン
   ======================================== */

.flow-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 48px;
}

.flow-cta .hero-btn {
  min-width: 280px;
  max-width: 360px;
  width: 100%;
  font-size: 1.125rem; /* 18px デスクトップ */
}

/* フォーカスリング（アクセシビリティ） */
.flow-cta .hero-btn:focus {
  outline: 2px solid #29B6F6;
  outline-offset: 2px;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .flow-cta {
    margin-top: 24px;
    margin-bottom: 32px;
  }
  
  .flow-cta .hero-btn {
    min-width: 100%;
    font-size: 1rem; /* 16px モバイル */
  }
}

/* ========================================
   オペレーションタグライン - Ver.2.24.0
   3カードブロック直上の協調最適化コピー
   ======================================== */

.ops-tagline {
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 16px auto 20px;
  padding-bottom: 6px;
  width: min(960px, 92%);
  border-bottom: 1px solid rgba(100, 200, 255, 0.35); /* Core GX寄りの淡いシアン */
  line-height: 1.7;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .ops-tagline {
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (min-width: 768px) {
  .ops-tagline {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ========================================
   Lucideアイコンスタイル - Ver.2.26.0
   4枚目カード用のworkflowアイコン
   ======================================== */

.lucide-icon {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.5;
}

/* カード内のLucideアイコンを中央配置 */
.card-gx .lucide-icon {
  display: inline-block;
}

/* ========================================
   4カードグリッド最適化 - Ver.2.26.0
   レスポンシブ対応（1列→2列→4列）
   ======================================== */

/* デフォルトはTailwindのgrid-cols-1が適用される */

/* タブレット: 2列表示（768px以上） */
@media (min-width: 768px) and (max-width: 1279px) {
  #solution .grid {
    /* Tailwind の md:grid-cols-2 で対応済み */
  }
}

/* デスクトップ: 4列表示（1280px以上） */
@media (min-width: 1280px) {
  #solution .grid {
    /* Tailwind の lg:grid-cols-4 で対応済み */
  }
}

/* 超ワイド画面（1536px以上）: カード最大幅制限 */
@media (min-width: 1536px) {
  #solution .grid {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}