/* ==========================================================================
   base.css - カスタムプロパティ / タイポグラフィ / 共通パーツ
   ========================================================================== */

:root {
  /* Color */
  --c-navy-900: #0a2a52;
  --c-navy-800: #0d3564;
  --c-navy-700: #114277;
  --c-blue-600: #1560ac;
  --c-blue-500: #2a7ac9;
  --c-blue-100: #e5eefa;
  --c-blue-050: #f2f7fd;
  --c-accent: #f0a132;
  --c-red: #e0483c;

  --c-text: #1e2b3a;
  --c-text-sub: #5c6b7d;
  --c-text-mute: #8a97a6;
  --c-line: #dde5ee;
  --c-bg: #eef3f9;
  --c-white: #ffffff;

  /* Layout */
  --container: 1240px;
  --col-left: 220px;
  --col-right: 292px;
  --gap: 20px;

  /* Style */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(13, 45, 85, 0.08);
  --shadow: 0 2px 10px rgba(13, 45, 85, 0.1);
  --shadow-hover: 0 8px 22px rgba(13, 45, 85, 0.16);
  --transition: 0.2s ease;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", meiryo, sans-serif;
  font-size: 14px;
  color: var(--c-text);
  background-color: var(--c-bg);
}

a {
  transition: color var(--transition), opacity var(--transition);
}

a:hover {
  color: var(--c-blue-600);
}

:focus-visible {
  outline: 2px solid var(--c-blue-500);
  outline-offset: 2px;
}

/* 画面外に隠すユーティリティ */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  color: var(--c-white);
  background-color: var(--c-navy-800);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
  color: var(--c-white);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   ボタン / テキストリンク
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn i {
  font-size: 11px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: var(--c-white);
  background-color: var(--c-blue-600);
}

.btn-primary:hover {
  color: var(--c-white);
  background-color: var(--c-blue-500);
}

.btn-ghost {
  color: var(--c-white);
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn-ghost:hover {
  color: var(--c-navy-900);
  background-color: var(--c-white);
}

.btn-outline {
  color: var(--c-navy-800);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  color: var(--c-white);
  background-color: var(--c-navy-800);
  border-color: var(--c-navy-800);
}

.link-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-navy-800);
  background-color: var(--c-blue-050);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}

.link-more i {
  font-size: 10px;
}

.link-more:hover {
  color: var(--c-white);
  background-color: var(--c-navy-800);
  border-color: var(--c-navy-800);
}