/* ===================================
   Global Styles — CSS変数・タイポグラフィ・基本スタイル
   Template 03: Clean & Bold Red Design (melabo01 inspired)
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* === メインカラー（ビビッドレッド：情熱と信頼感） === */
  --color-primary: #E92A3B;
  --color-primary-dark: #C41E2F;
  --color-primary-light: #FDE8EA;

  /* === アクセントカラー（オリーブグリーン：落ち着きと知性） === */
  --color-accent: #A1A767;
  --color-accent-dark: #8A9058;
  --color-accent-light: #F0F1E5;

  /* === ベースカラー === */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F0;
  --color-bg-primary: #FDE8EA;

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

  /* === 英語ラベル === */
  --color-label: #E92A3B;
  --label-opacity: 0.10;

  /* === ボーダー・シャドウ === */
  --color-border: #E0E0DC;
  --color-shadow: rgba(2, 34, 34, 0.08);

  /* === その他 === */
  --color-error: #D93025;
  --color-success: #2E8B57;
  --color-star: #F0A500;
  --color-line: #06C755;
  --color-accent-bg: rgba(161, 167, 103, 0.12);
  --color-primary-bg: rgba(233, 42, 59, 0.08);

  /* === フォント === */
  --font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-family-heading: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 900;

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

  /* === 角丸（シャープめ、信頼感） === */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* === シャドウ === */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* --- 基本スタイル --- */
body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*: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--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.section--primary h1,
.section--primary h2,
.section--primary h3,
.section--primary h4,
.section--primary h5,
.section--primary h6 {
  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-text);
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

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: 2;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: var(--font-weight-bold);
}

small {
  font-size: 0.9375rem;
  color: var(--color-text-light);
}

a {
  color: var(--color-primary);
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  color: var(--color-primary-dark);
  opacity: 0.85;
}

.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;
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.85;
  }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }

  .container {
    padding: 0 20px;
  }

  .section {
    padding: var(--section-padding-sp) 0;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 1.8;
  }

  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
}

.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }