/**
 * Section Card Outside Heading Style - Ver.2.21.0
 * カード外見出しデザイン（Core GXスタイル統一）
 * 見出しをカードの外（上部）に配置し、下に大きなカードボディを置く構成
 */

:root {
  --gx-navy: #0F2740;
  --gx-navy-2: #0C2033;
  --gx-blue: #1FA2FF;
  --gx-blue-2: #3CAAF2;
  --gx-white: #FFFFFF;
  --gx-white-80: #FFFFFFCC;
  --gx-card: #F4F8FF; /* or #EFF6FF */
}

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

/* ========================================
   gx-block__heading: 見出しブロック（カード外）
   ======================================== */
.gx-block__heading {
  text-align: center;
  margin-bottom: 16px;
}

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

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

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

/* サブテキスト（説明文） */
.gx-block__sub {
  max-width: 900px;
  margin: 14px auto 0;
  color: var(--gx-white-80);
  font-size: 15px;
  line-height: 1.65;
}

/* ========================================
   gx-card: 大きなカードボディ
   ======================================== */
.gx-card {
  margin-top: 16px;
  background: var(--gx-card);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(10, 30, 60, 0.18);
}

/* 既存の内側コンテンツの左右余白を自然に合わせる */
.gx-card > * {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

/* カード内の見出しと本文の色を濃く */
.gx-card h1,
.gx-card h2,
.gx-card h3,
.gx-card h4,
.gx-card h5,
.gx-card h6 {
  color: #0A2540 !important;
}

.gx-card p,
.gx-card li,
.gx-card span,
.gx-card div {
  color: #0A2540;
}

/* ========================================
   レスポンシブ調整
   ======================================== */
@media (max-width: 960px) {
  .gx-block {
    padding: 24px 14px 20px;
  }
  
  .gx-block__title {
    font-size: 24px;
  }
}

@media (max-width: 640px) {
  .gx-block__title {
    font-size: 22px;
  }
  
  .gx-underline {
    width: 90px;
  }
  
  .gx-underline--btm {
    width: 66px;
  }
  
  .gx-block__sub {
    font-size: 14px;
  }
  
  .gx-card {
    padding: 14px;
  }
}