/* ============================================================
   base.css — リセット・CSS変数・タイポグラフィ (Adobe Fonts対応)
============================================================ */

@font-face {
  font-family: 'NotoSansJP'; /* 任意のフォント名 */
  src: url('../assets/font/NotoSansJP-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
}
@font-face {
  font-family: 'NotoSansJP'; /* 任意のフォント名 */
  src: url('../assets/font/NotoSansJP-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: 'NotoSansJP'; /* 任意のフォント名 */
  src: url('../assets/font/NotoSansJP-Black.woff2') format('woff2');
  font-display: swap;
  font-weight: bold;
}
@font-face {
  font-family: 'NotoSansJP'; /* 任意のフォント名 */
  src: url('../assets/font/NotoSansJP-Black.woff2') format('woff2');
  font-display: swap;
  font-weight: 900;
}
@font-face {
  font-family: 'ZalandoSans'; /* 任意のフォント名 */
  src: url('../assets/font/ZalandoSansSemiExpanded-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
}
@font-face {
  font-family: 'ZalandoSans'; /* 任意のフォント名 */
  src: url('../assets/font/ZalandoSansSemiExpanded-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: 'ZalandoSans'; /* 任意のフォント名 */
  src: url('../assets/font/ZalandoSansSemiExpanded-Black.woff2') format('woff2');
  font-display: swap;
  font-weight: bold;
}
@font-face {
  font-family: 'ZalandoSans'; /* 任意のフォント名 */
  src: url('../assets/font/ZalandoSansSemiExpanded-Black.woff2') format('woff2');
  font-display: swap;
  font-weight: 900;
}
/* ── CSS カスタムプロパティ ── */
:root {
  /* ─ Brand Colors ─ */
  --color-navy:       #1C2D6B;   /* メインカラー */
  --color-navy-dark:  #141F4D;   /* ホバー・フッター */
  --color-coral:      #EA6155;   /* アクセントカラー */
  --color-coral-dark: #D04D42;   /* コーラルホバー */
  --color-white:      #ffffff;

  /* ─ Gray Scale (高コントラスト・アクセシビリティ改善) ─ */
  --color-gray-50:   #F8F9FC;   /* ページ背景 */
  --color-gray-100:  #F0F2F8;   /* セクション背景（薄） */
  --color-gray-200:  #CBD2E1;   /* ボーダー・区切り (見やすく強化) */
  --color-gray-400:  #555C75;   /* ヒントテキスト (高コントラスト化) */
  --color-gray-600:  #222533;   /* 本文サブテキスト (黒に近い視認性向上色) */
  --color-gray-800:  #0F121D;   /* 本文メインテキスト (濃黒) */

  /* ─ Typography (Adobe Fonts: Ryo Gothic PlusN & Termina) ─ */
  --font-sans: "NotoSansJP", "ZalandoSans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en:   "ZalandoSans", sans-serif;

  /* モバイルデフォルトサイズ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   clamp(24px, 3.5vw, 34px);
  --text-2xl:  clamp(30px, 5vw, 56px);

  --leading-tight:  1.3;
  --leading-normal: 1.8;
  --leading-loose:  1.95;

  /* ─ Spacing ─ */
  --space-xs:  10px;
  --space-sm:  20px;
  --space-md:  40px;
  --space-lg:  72px;
  --space-xl:  110px;

  /* ─ Border Radius ─ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-full: 999px;

  /* ─ Transitions ─ */
  --transition:      0.25s ease;
  --transition-slow: 0.45s ease;

  /* ─ Shadows ─ */
  --shadow-card: 0 8px 24px rgba(28, 45, 107, 0.08);
  --shadow-hover: 0 12px 32px rgba(28, 45, 107, 0.13);

  /* ─ Layout ─ */
  --container-max: 1140px;
  --container-narrow: 820px;
  --header-height: 72px;
}

/* PC環境（768px以上）での文字サイズおよび余白拡大 */
@media (min-width: 768px) {
  :root {
    --text-xs:   13px;
    --text-sm:   15px;
    --text-base: 17px;
    --text-md:   19px;
    --text-lg:   22px;

    --space-xs:  12px;
    --space-sm:  24px;
    --space-md:  48px;
    --space-lg:  84px;
    --space-xl:  140px; /* セクション上下余白を大伸ばし */
  }
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500; /* 日本語・標準ウェイト */
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background-color: var(--color-white);
  overflow-x: hidden;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

/* ── Typography (見出し・強中ウェイト) ── */
h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: 900; /* 日本語太字ウェイト */
  color: var(--color-gray-800);
}

h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl);  line-height: var(--leading-tight); }
h3 { font-size: var(--text-md);  line-height: var(--leading-tight); }
h4 { font-size: var(--text-base); }

/* 英語フォント専用ユーティリティ */
.u-en-font {
  font-family: var(--font-en);
  font-weight: 900; /* 英語太字ウェイト */
}

/* ── アクセシビリティ：フォーカス ── */
:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── モーション軽減設定 ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Utility Classes ── */

.u-text-navy   { color: var(--color-navy); }
.u-text-coral  { color: var(--color-coral); }
.u-text-white  { color: var(--color-white); }
.u-text-muted  { color: var(--color-gray-600); }
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }

.u-hidden-sp { display: block; }
.u-show-sp   { display: none; }

@media (max-width: 767px) {
  .u-hidden-sp { display: none; }
  .u-show-sp   { display: block; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* セクション eyebrow（英字小見出し） */
.u-eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 900; /* Termina 太字 */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: var(--space-xs);
}

.u-eyebrow--white {
  color: rgba(255, 255, 255, 0.85);
}

/* セクションタイトル */
.u-section-title {
  font-size: var(--text-xl);
  font-weight: 900; /* Ryo Gothic PlusN 太字 */
  color: var(--color-navy);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}

.u-section-title--white {
  color: var(--color-white);
}

/* セクションリード */
.u-section-lead {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-gray-600); /* 高コントラスト文字色 */
  line-height: var(--leading-loose);
  max-width: 600px;
}

.u-section-lead--white {
  color: rgba(255, 255, 255, 0.90);
}

.c-section-header {
  margin-bottom: var(--space-md);
}

.c-section-header--center {
  text-align: center;
}

.c-section-header--center .u-section-lead {
  margin-left: auto;
  margin-right: auto;
}

.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }

/* ============================================================
   補足・補助テキスト（読み飛ばしても問題のない箇所：500ウェイト）
============================================================ */
.u-font-weight-500,
.u-text-sub,
small,
.breadcrumb,
.c-footer__copyright,
.c-footer__legal,
.c-footer__brand-tagline,
.c-footer__brand-addr,
.c-stat-block__label,
.article-date,
.doc-card__meta {
  font-weight: 500 !important;
}

/* ─ Utility Classes ─ */
.u-d-none { display: none !important; }
.u-d-block { display: block !important; }
.u-d-inline-block { display: inline-block !important; }
.u-d-flex { display: flex !important; }
.u-pos-relative { position: relative !important; }
.u-pos-absolute { position: absolute !important; }
.u-w-full { width: 100% !important; }
.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-font-normal { font-style: normal !important; }
.u-fw-bold { font-weight: 700 !important; }
.u-fw-900 { font-weight: 900 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-mb-32 { margin-bottom: 32px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mt-48 { margin-top: 48px !important; }
.u-min-w-300 { min-width: 300px !important; }
.u-flex-gap-20 { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; }
.u-rounded-md { border-radius: var(--radius-md) !important; }
.u-max-w-600 { max-width: 600px !important; }
.u-max-w-640 { max-width: 640px !important; }
.u-py-24 { padding-block: 24px !important; }
.u-py-32 { padding-block: 32px !important; }
.u-py-36 { padding-block: 36px !important; }