/* ==================================================
   1. 変数定義 (CSS Variables)
   ユーザーが後からカスタムCSSで上書きしやすいように設計
   ================================================== */
:root {
  --je-text-main: #333333; /* メインテキスト（黒） */
  --je-text-sub: #666666; /* サブテキスト（グレー） */
  --je-bg-base: #ffffff; /* ベース背景（白） */
  --je-bg-gray: #f7f7f7; /* 背景グレー */
  --je-accent: #333333; /* アクセントカラー（ボタン等） */
}

/* ==================================================
   2. カラー設定 (Colors)
   ================================================== */

/* --- 見出しウィジェット用 --- */
.elementor-widget-heading.je-text-main .elementor-heading-title {
  color: var(--je-text-main);
}

.elementor-widget-heading.je-text-sub .elementor-heading-title {
  color: var(--je-text-sub);
}

.elementor-widget-heading.je-text-white .elementor-heading-title {
  color: #ffffff;
}

/* --- テキストエディタウィジェット用 --- */
/* テキストエディタはpタグやリストタグにも適用させる */
.elementor-widget-text-editor.je-text-main,
.elementor-widget-text-editor.je-text-main p,
.elementor-widget-text-editor.je-text-main li {
  color: var(--je-text-main);
}

.elementor-widget-text-editor.je-text-sub,
.elementor-widget-text-editor.je-text-sub p,
.elementor-widget-text-editor.je-text-sub li {
  color: var(--je-text-sub);
}

/* --- ボタンウィジェット用 --- */
.elementor-widget-button.je-btn-accent .elementor-button {
  background-color: var(--je-accent);
  color: #ffffff;
}
/* ホバー時（少し透明にする） */
.elementor-widget-button.je-btn-accent .elementor-button:hover {
  opacity: 0.8;
  background-color: var(--je-accent);
}

/* --- 背景ユーティリティ --- */
/* セクションやコンテナの「CSSクラス」に je-bg-gray と入れるだけで適用 */
.je-bg-gray {
  background-color: var(--je-bg-gray) !important;
}
.je-bg-accent {
  background-color: var(--je-accent) !important;
  color: #fff;
}

/* ==================================================
   3. タイポグラフィ設定 (Typography)
   フォントファミリーは継承。サイズ・行間・太さを定義。
   ================================================== */

/* --- 見出し H2 (セクションタイトル) --- */
.elementor-widget-heading.je-typo-h2 .elementor-heading-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

/* --- 見出し H3 (中見出し・カードタイトル) --- */
.elementor-widget-heading.je-typo-h3 .elementor-heading-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

/* --- 見出し H4 (小見出し) --- */
.elementor-widget-heading.je-typo-h4 .elementor-heading-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

/* --- 本文 (Body Text) --- */
/* 日本語の可読性を高めるため、line-height 1.8 を確保 */
.elementor-widget-text-editor.je-typo-body,
.elementor-widget-text-editor.je-typo-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

/* --- 注釈 (Small Text) --- */
.elementor-widget-text-editor.je-typo-small,
.elementor-widget-text-editor.je-typo-small p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--je-text-sub); /* 注釈は自動的にグレーにする */
}

/* ==================================================
   4. スマホ対応 (Responsive: Mobile < 767px)
   ================================================== */
@media (max-width: 767px) {
  /* H2: 32px -> 24px */
  .elementor-widget-heading.je-typo-h2 .elementor-heading-title {
    font-size: 24px;
  }

  /* H3: 22px -> 20px */
  .elementor-widget-heading.je-typo-h3 .elementor-heading-title {
    font-size: 20px;
  }

  /* 本文は16pxを維持（小さすぎると読みにくいので） */
  .elementor-widget-text-editor.je-typo-body,
  .elementor-widget-text-editor.je-typo-body p {
    font-size: 16px;
  }
}