/* ===================================
   Global Styles — CSS変数・タイポグラフィ・基本スタイル
   Template 02: Sharp & Trust (Blue) — conojuku inspired
   =================================== */

:root {
  /* === メインカラー（グリーン系：conojuku inspired） === */
  --color-primary: #0B9444;
  --color-primary-dark: #087A38;
  --color-primary-darker: #2D3748;
  --color-primary-light: #E6F7ED;

  /* === アクセントカラー（イエロー：CTA・ボタン） === */
  --color-accent: #FFD600;
  --color-accent-dark: #E6C100;
  --color-accent-light: #FFF9DB;

  /* === サブカラー === */
  --color-success: #0B9444;
  --color-success-light: #E6F7ED;

  /* === ベースカラー === */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F0F7F2;
  --color-bg-dark: #2D3748;

  /* === テキストカラー === */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-muted: #999999;

  /* === 英語ラベル === */
  --color-label: #0B9444;
  --label-opacity: 0.08;

  /* === ボーダー・シャドウ === */
  --color-border: #E5E5E5;
  --color-shadow: rgba(0, 0, 0, 0.06);

  /* === その他 === */
  --color-error: #E53E3E;
  --color-star: #FFD600;
  --color-line: #06C755;
  --color-accent-bg: rgba(255, 214, 0, 0.12);
  --color-primary-bg: rgba(11, 148, 68, 0.08);

  /* === フォント（ゴシック系：シャープな印象） === */
  --font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-family-heading: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 900;

  /* === レイアウト === */
  --max-width: 1200px;
  --header-height: 72px;
  --header-height-sp: 56px;
  --section-padding: 80px;
  --section-padding-sm: 56px;
  --section-padding-sp: 48px;

  /* === 角丸（やや控えめ：シャープさ） === */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* === シャドウ（クールで鋭い） === */
  --shadow: 0 1px 3px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(27, 42, 74, 0.04);
  --shadow-md: 0 4px 16px rgba(27, 42, 74, 0.08);
  --shadow-lg: 0 8px 30px rgba(27, 42, 74, 0.12);
  --shadow-hover: 0 8px 24px rgba(37, 99, 235, 0.15);
}

/* --- 基本スタイル --- */
body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* --- フォーカススタイル --- */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- コンテナ --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- セクション --- */
.section {
  padding: var(--section-padding) 0;
}
.section--bg {
  background-color: var(--color-bg-alt);
}
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 {
  color: var(--color-white);
}
.section--dark p {
  color: rgba(255, 255, 255, 0.9);
}
.section--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.section--primary h1, .section--primary h2, .section--primary h3 {
  color: var(--color-white);
}
.section--primary p {
  color: rgba(255, 255, 255, 0.95);
}

/* --- タイポグラフィ --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-primary-darker);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: 1.2em;
  line-height: 1.9;
}
p:last-child {
  margin-bottom: 0;
}
strong {
  font-weight: var(--font-weight-bold);
}
small {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* --- リンク --- */
a {
  color: var(--color-primary);
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
  color: var(--color-primary-dark);
}

/* --- ユーティリティ --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.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;
}
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.75; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  .container { padding: 0 20px; }
  .section { padding: var(--section-padding-sp) 0; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
}