/* bellwood-theme.css (リファクタリング案) */
/* ブランドカラー定義 */
:root {
  --bws-gold: #ffd700; /* ブランドのキーカラー ゴールド */
  --bws-green: #006948; /* ブランドのキーカラー グリーン */
  --bws-green-dark: #004d33; /* ブランドのキーカラー ダークグリーン */
  --bws-lighter-green: #e6f0e9; /* ブランドのキーカラー ライトグリーン */
  --bws-gold-dark: #e6c200; /* ブランドのキーカラー ダークゴールド */
  --bws-green-light: #10b981; /* ブランドのキーカラー ライトグリーン (明るめ) */

  --brand-primary-color: #004a8d; /* ブランド プライマリーカラー (濃い青) */
  --brand-secondary-color: #0066cc; /* ブランド セカンダリーカラー (青) */
  --brand-accent-color: var(--bws-gold); /* ブランド アクセントカラー (ゴールドを参照) */

  /* output.css の変数を参照 */
  --brand-background-light: var(--color-slate-50, #f8fafc); /* 明るい背景色 (Tailwindのslate-50を参照) */
  --brand-text-dark: var(--color-slate-800, #1e293b); /* 濃いテキスト色 (Tailwindのslate-800を参照、フォールバック値を実際の値に近づける) */
  /* 元のフォールバック #2c3e50 が意図した特定の色であれば、変数名を変更するか、Tailwind変数参照をやめることを検討 */

  --text-dark: var(--color-slate-800, #1e293b); /* 基本の濃いテキスト色 (Tailwindのslate-800を参照) */
  --text-medium: var(--color-gray-700, #374151); /* 基本の中間テキスト色 (Tailwindのgray-700を参照) */
  --text-light: var(--color-slate-500, #64748b); /* 基本の薄いテキスト色 (Tailwindのslate-500を参照) */
  /* 元の #6b7280 に近い変数として --color-slate-500 を選択。意図に応じて --color-gray-500 など他の変数も検討可能 */

  --bg-light: var(--color-slate-50, #f8fafc); /* 明るい背景 (Tailwindのslate-50を参照) */
  --bg-white: var(--color-white, #ffffff); /* 白背景 (Tailwindのwhiteを参照) */

  --custom-sky-50: var(
    --color-blue-50,
    #f0f9ff
  ); /* カスタムカラー 空色50 (Tailwindのblue-50を参照) */
  --custom-sky-100: var(
    --color-blue-100,
    #e0f2fe
  ); /* カスタムカラー 空色100 (Tailwindのblue-100を参照、もし存在しない場合は近いblue-200などから調整するか、この値を維持) */
  /* output.css に --color-blue-100 がない場合、#e0f2fe を維持するか、--color-blue-200 (oklch(88.2% 0.059 254.128) 約#dbeafe) を参考に調整 */
}

/* 基本フォント設定 */
body {
  /* プロジェクト固有のフォントスタック。'Motoyama Bellri' が主要なブランドフォントの場合、この指定は適切。 */
  /* Tailwindのデフォルトフォント (--font-sans) をカスタマイズして、ここで var(--font-sans) を使用する方法も検討可能。 */
  font-family: 'Motoyama Bellri', 'Noto Sans JP', 'Inter', sans-serif;
  overscroll-behavior-y: contain; /* スクロールチェーンの制御 */
}

/* フォントユーティリティクラス (変更なし) */
.font-kosugi-maru {
  font-family: 'Kosugi Maru', sans-serif;
}
.font-fredoka {
  font-family: 'Fredoka One', 'Fredoka', cursive;
}
.font-yuji-syuku {
  font-family: 'Yuji Syuku', serif;
}
.font-title {
  font-family:
    'Hiragino Kaku Gothic ProN W9', 'ヒラギノ角ゴ ProN W9', 'Hiragino Kaku Gothic Pro W9',
    'ヒラギノ角ゴ Pro W9', 'Noto Sans JP', sans-serif;
  font-weight: 900;
}
.font-subtitle {
  font-family:
    'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro',
    'ヒラギノ角ゴ Pro', 'Noto Sans JP', sans-serif;
}
.font-caption {
  font-family: 'Yu Gothic', '游ゴシック体', 'YuGothic', '游ゴシック', 'Noto Sans JP', sans-serif;
}

/* ブランドカラーユーティリティクラス (変更なし) */
.brand-primary {
  color: var(--brand-primary-color);
}
.brand-secondary {
  color: var(--brand-secondary-color);
}
.brand-accent {
  color: var(--brand-accent-color);
}

.brand-gold-text {
  color: var(--bws-gold);
}
.brand-green-text {
  color: var(--bws-green);
}
.brand-lighter-green-bg {
  background-color: var(--bws-lighter-green);
}

/* テーマ背景色クラス */
.brand-primary-bg {
  background-color: var(
    --custom-sky-100,
    #e0f2fe
  ); /* #e9f5ff に近い色として --custom-sky-100 を使用 */
}
.brand-accent-bg-original {
  background-color: var(
    --color-orange-100,
    #fff1e0
  ); /* #fff3e0 に非常に近い --color-orange-100 を使用 */
}

/*
カードスタイル:
以下のカードスタイルでは `!important` を削除しました。
HTML側で汎用カードクラス (例: .section-card) と組み合わせて使用し、
CSSの優先順位や詳細度でスタイルが適用されるように調整することを推奨します。
例: <div class="section-card goal-card">
*/

.goal-card {
  /* !important を削除。汎用カードクラスのスタイルを基本とし、ここで差分を定義 */
  background-color: var(--custom-sky-100, #e0f2fe); /* #e9f5ff に近い色 */
  border-left: 4px solid var(--brand-secondary-color);
  /* border-left-style, border-left-width は汎用カードクラスやTailwindで設定想定 */
}
.goal-card p,
.goal-card ul li {
  /* !important を削除 */
  color: var(--brand-secondary-color);
}
.goal-card .font-small-heading {
  /* class名が .font-small-heading で正しいか確認 */
  /* !important を削除 */
  color: var(--brand-primary-color);
}

.key-takeaway-card {
  /* !important を削除 */
  background-color: var(--color-orange-100, #fff1e0); /* #fff3e0 に近い色 */
  border-left: 4px solid var(--bws-gold);
}
.key-takeaway-card p,
.key-takeaway-card ul li {
  /* !important を削除 */
  color: var(--color-orange-700, #e65100); /* #e65100 は --color-orange-700 とほぼ同等 */
}

.hands-on-goal-card {
  /* !important を削除 */
  background-color: var(
    --color-yellow-100,
    #fffbeb
  ); /* #fff9e6 に近い色として --color-yellow-100 を使用 */
  border: 1px solid var(--bws-gold);
  /* border-style は汎用カードクラスやTailwindで設定想定 */
}
.hands-on-goal-card p,
.hands-on-goal-card ul li {
  /* !important を削除 */
  color: var(--color-orange-700, #e65100);
}

/* モットーテキスト */
.motto-text {
  font-family: 'Yuji Syuku', serif; /* HTML側で .font-yuji-syuku を使用しても良い */
  font-size: var(--text-lg, 1.125rem); /* 18px は --text-lg と同等 */
  font-weight: var(--font-weight-bold, 700); /* Tailwindの font-bold と同等 */
  color: var(--bws-green);
}
.motto-text span {
  color: var(--bws-gold);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* text-shadow はカスタム値を維持 */
}