/* ==================================================
   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)
   ================================================== */

/* --- 見出しウィジェット用 --- */
/* クラス2つで詳細度20。Elementorのデフォルトスタイル（10）に勝ち、ユーザー指定のインライン（1000）やID指定（100）に負けるようにする */
.je-text-main .elementor-heading-title {
  color: var(--je-text-main);
}

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

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

/* --- テキストエディタウィジェット用 --- */
.je-text-main,
.je-text-main li {
  color: var(--je-text-main);
}

.je-text-sub,
.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);
}
.je-bg-accent {
  background-color: var(--je-accent);
  color: #fff;
}

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

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

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

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

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

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


/* ==================================================
   4. スマホ・タブレット用対応 (Responsive: Mobile & Tablet < 1025px)
   ================================================== */

/* --- デバイス別改行コントロール --- */
.je-pc-br {
  display: inline;
}
.je-sp-br {
  display: none;
}

@media (max-width: 1024px) {
  /* スマホ・PCの改行切り替え */
  .je-pc-br {
    display: none;
  }
  .je-sp-br {
    display: inline;
  }
}

@media (max-width: 767px) {
  /* H2: 32px -> 24px */
  .je-typo-h2 .elementor-heading-title {
    font-size: 24px;
  }

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

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