/* 
 * さながわ歯科クリニック カスタムスタイル
 * 症状別ページの統一デザイン用CSSをここに記載
 */

/* ===== ページバナーコンテナ（高さ統一・ヘッダーとの重なり防止） ===== */
/* 使い方：ElementorのコンテナのCSSクラスに「page-banner-container」を追加 */
.page-banner-container {
  min-height: 350px;
  margin-top: 0;
  padding-top: 0px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* バナーコンテナ内のコンテンツの幅を適切に設定 */
.page-banner-container .e-con-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* バナー内テキスト: p の下余白を微調整（14.4px相当 → 10px）
 * 使い方：Elementorの「テキストエディタ」ウィジェットのCSSクラスに「page-banner-text」を追加
 */
.page-banner-container .page-banner-text p {
  margin-bottom: 10px;
}

/* ===== ページバナー：見出し(h2)＋英語サブテキスト(p)の中央揃え・余白統一 =====
 * 目的：h2側のpadding/margin、p側のmargin、コンテナpaddingがバラバラだとバランスが崩れるため、
 *       e-con-inner 側で縦の余白と間隔を一元管理する。
 * 前提：このファイル内で :has() を既に使用しているため、同様の方針で限定適用する。
 */
.elementor .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px; /* h2 と英語の間隔 */
  padding-top: 14px;
  padding-bottom: 14px;
}

.page-banner-container .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px; /* h2 と英語の間隔 */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ===== ページバナー：英語サブテキスト（HTMLウィジェット用） =====
 * 使い方：ElementorのHTMLウィジェットに以下を貼り付け
 *
 * <p class="page-banner-subtext-en">Root canal treatment</p>
 *
 * 目的：テキストエディタのタイポグラフィに依存せず、HTMLウィジェットでも同等の見え方にする。
 */
.elementor .page-banner-subtext-en {
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-text);
  font-size: 25px; /* PC基準 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  /* 余白は e-con-inner 側で統一管理する */
  margin: 0;
  padding: 0;
}

.page-banner-container .page-banner-subtext-en {
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-text);
  font-size: 25px; /* PC基準 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  /* 余白は e-con-inner 側で統一管理する */
  margin: 0;
  padding: 0;
}

/* スマホ表示：適切なサイズに縮小 */
@media (max-width: 768px) {
  .elementor .page-banner-subtext-en {
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.35;
  }

  .page-banner-container .page-banner-subtext-en {
    font-size: clamp(16px, 4.2vw, 22px);
    line-height: 1.35;
  }

  .elementor .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) {
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .page-banner-container .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) {
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .page-banner-container {
    min-height: 300px;
    padding-top: 0px;
    width: 100%;
    max-width: 100%;
  }
  
  .page-banner-container .e-con-inner {
    width: 100%;
    max-width: 100%;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .page-banner-container {
    min-height: 250px;
    padding-top: 80px; /* スマホではメニューがハンバーガーメニューになるため調整 */
    width: 100%;
    max-width: 100%;
  }
  
  .page-banner-container .e-con-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .page-banner-container {
    min-height: 200px;
    padding-top: 0px;
    width: 100%;
    max-width: 100%;
  }
  
  .page-banner-container .e-con-inner {
    width: 100%;
    max-width: 100%;
  }
}

/* ===== ページバナー：メイン見出し（h2） ===== */
/* 使い方：ElementorのHTMLウィジェットに以下を貼り付け
 *
 * <h2 class="page-banner-heading">根管治療</h2>
 *
 * ※ 既存の見出しウィジェットから置き換える用途。バナー内だけに効くよう page-banner-container 配下に限定。
 */
h2.page-banner-heading {
  margin: 0;
  padding: 0;
}

.elementor .page-banner-heading,
.elementor h2.page-banner-heading {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  color: var(--e-global-color-secondary);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  width: auto;
  max-width: 100%;
}

.page-banner-container .page-banner-heading {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  color: var(--e-global-color-secondary);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
}

/* 追加調整：HTMLウィジェットで使う h2.page-banner-heading のみ文字間隔をpx指定で上書き */
.elementor .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) h2.page-banner-heading {
  letter-spacing: 9.5px;
}

.page-banner-container h2.page-banner-heading {
  letter-spacing: 9.5px;
  /* 余白は e-con-inner 側で統一管理する */
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  .elementor .page-banner-heading,
  .elementor h2.page-banner-heading {
    font-size: clamp(24px, 5vw, 30px);
    letter-spacing: 0.06em;
  }

  .page-banner-container .page-banner-heading {
    font-size: clamp(24px, 5vw, 30px);
    letter-spacing: 0.06em;
  }

  /* スマホ表示：バナー見出しの上に余白を追加 */
  .elementor .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) h2.page-banner-heading {
    margin-top: 10px;
  }

  .page-banner-container h2.page-banner-heading {
    margin-top: 10px;
  }

  /* スマホでも同じ見出し（h2.page-banner-heading）はpx指定を優先 */
  .elementor .e-con-inner:has(.page-banner-heading):has(.page-banner-subtext-en) h2.page-banner-heading {
    letter-spacing: 9.5px;
  }

  .page-banner-container h2.page-banner-heading {
    letter-spacing: 9.5px;
  }
}

/* ===== 見出し：＼ テキスト ／（h3タグ用） ===== */
/* 使い方：HTMLウィジェット内の任意要素に class="html-h3-wrap" を付与 */
.html-h3-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2.5rem auto 2rem; /* PC: 上2.5rem、下2rem、左右中央寄せ */
  padding: 0;
  box-sizing: border-box;
}

.html-h3-wrap h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: "Noto Serif JP", serif; /* 全体統一 */
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 700;
  color: var(--e-global-color-secondary); /* Elementorグローバルカラーに追従 */
  text-align: center;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}

/* 内部の要素（装飾線やテキスト）に自動的にスタイルを適用 */
.html-h3-wrap h3 * {
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  font-size: 1em;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* 後方互換性のため、個別クラスもサポート（通常は使用不要） */
.html-h3-line {
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  font-size: 1em;
  line-height: 1;
}

.html-h3-text {
  font-family: inherit;
  color: inherit;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* スマホ対応：見出しを適切なサイズに、余白を調整 */
@media (max-width: 600px) {
  .html-h3-wrap {
    margin: 1.5rem auto 2rem; /* スマホ: 上1.5rem（減らす）、下2rem、左右中央寄せ */
    padding: 0 1rem; /* 左右に少し余白 */
  }
  
  .html-h3-wrap h3 {
    font-size: clamp(24px, 5vw, 28px);
    gap: 0.4em;
  }
  
  /* Elementorコンテナ内で中央配置を確実にする */
  .e-con-inner:has(.html-h3-wrap) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0; /* コンテナの上パディングをリセット */
  }
  
}

/* 後方互換性のため、旧クラス名もサポート */
/* 使い方：Elementorの見出しウィジェットのCSSクラスに「html-h2-wrap」を1つだけ追加 */
.elementor-element.html-h2-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2.5rem auto 2rem; /* PC: 上2.5rem、下2rem、左右中央寄せ */
  padding: 0;
  box-sizing: border-box;
}



/* 後方互換性のため、個別クラスもサポート（通常は使用不要） */
.html-h2-line {
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  font-size: 1em;
  line-height: 1;
}

.html-h2-text {
  font-family: inherit;
  color: inherit;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .elementor-element.html-h2-wrap {
    margin: 1.5rem auto 2rem; /* スマホ: 上1.5rem（減らす）、下2rem、左右中央寄せ */
    padding: 0 1rem; /* 左右に少し余白 */
  }
  
  
  /* Elementorコンテナ内で中央配置を確実にする */
  .e-con-inner:has(.html-h2-wrap) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0; /* コンテナの上パディングをリセット */
  }
  
}

/* ===== 本文（左寄せ） ===== */
.section-html.left {
  text-align: left;
  margin: 3rem 0 2.5rem;
}

.html-p-text {
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-text);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin: 0 auto;
  max-width: 800px;
}

/* ===== h3見出し：中央揃え＋下線（html-h3-wrapと同じサイズ感） ===== */
/* 使い方：HTMLウィジェット内の任意要素に class="html-h3-center-underline" を付与 */
.html-h3-center-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 2.5rem auto 1.5rem; /* PC: 上2.5rem、下1.5rem、左右中央寄せ */
  padding: 0;
  box-sizing: border-box;
}

.html-h3-center-underline h3 {
  position: relative;
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 4.5vw, 34px); /* html-h3-wrapと同じサイズ */
  font-weight: 700;
  color: var(--e-global-color-secondary);
  text-align: center;
  margin: 0 auto;
  padding-bottom: 0.4rem;
  width: auto;
  max-width: 100%;
}

/* 下線（中央寄せ・指定色・テキスト幅より短め） */
.html-h3-center-underline h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80%; /* テキスト幅の80%に設定 */
  max-width: 180px; /* 最大幅を短めに設定 */
  height: 2px;
  background-color: #068A7D; /* 緑の下線カラー */
}

/* スマホ対応：サイズと下線を調整 */
@media (max-width: 600px) {
  .html-h3-center-underline {
    margin: 1.5rem auto 1.5rem; /* スマホ: 上1.5rem、下1.5rem、左右中央寄せ */
    padding: 0 1rem; /* 左右に少し余白 */
  }
  
  .html-h3-center-underline h3 {
    font-size: clamp(24px, 5vw, 28px); /* html-h3-wrapと同じサイズ */
  }
  
  .html-h3-center-underline h3::after {
    width: 75%; /* スマホではさらに短めに */
    max-width: 120px;
  }
}


/* ----------------------------------------
   マーカー付き h4 見出し（Elementor共通）
---------------------------------------- */

/* 対象：HTMLウィジェット内の任意要素に class="marker-heading" を付与 */
.marker-heading h4{
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-secondary);
  font-size: 30px;      /* PC */
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 1px;
  margin: 0 0 1em 0;
}

/* マーカー表現（テキスト部分のみ） */
.marker-heading .marker-text{
  background: linear-gradient(
    transparent 55%,
    #FFDC4894 0%
  );
  padding: 0 0.15em;
  font-weight: 700;
}

/* スマホ調整 */
@media screen and (max-width: 768px){
  .marker-heading h4{
    font-size: clamp(18px, 4.4vw, 24px);
    line-height: 1.6;
  }
}

/* 対象：CSSクラス border-long-heading を付けた見出しウィジェット */
.border-long-heading {
  /* 見出しブロックとして上下の余白を確保 */
  margin: 1.8rem 0 1.1rem;
}

.border-long-heading h3,
h3.border-long-heading {
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-bb9737f) !important;                  /* Elementorグローバルカラー */
  border-bottom: 1px solid var(--e-global-color-bb9737f) !important;/* 下線 */
  padding-bottom: 0.4em;
  display: block;                             /* 下線を長く（100%） */
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
  font-size: 26px;
}

/* タブレット */
@media (max-width: 1024px){
  .border-long-heading h3{
    font-size: 22px;
  }
}

/* スマホ */
@media (max-width: 768px){
  .border-long-heading h3{
    font-size: 19px;
    line-height: 1.6;
    padding-bottom: 0.35em;
  }
}

/* ===== セクション見出し（h4タグ用） ===== */
/* 使い方1：Elementorの見出しウィジェットのCSSクラスに「section-sub-heading」を1つだけ追加 */
.elementor-element.section-sub-heading {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* 使い方2：HTMLウィジェットでh4タグに直接クラスを追加（推奨） */
h4.section-sub-heading {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-bb9737f);
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  /* 見出しの前後で適切に間隔を作る */
  margin: 1.4rem 0 0.75rem;
  padding: 0;
  text-align: left;
  /* 枠線デザイン（見出しウィジェットと同じ） */
  border-left: 19px solid #FFDC4894;
  border-bottom: 2px solid #FFDC4894;
  padding-left: 0.8em;
  padding-bottom: 0.25em;
  box-sizing: border-box;
}

/* 使い方3：HTMLウィジェットでh5タグに直接クラスを追加 */
h5.section-sub-heading {
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  font-size: clamp(17px, 3.2vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  /* 見出しの前後で適切に間隔を作る */
  margin: 1.2rem 0 0.6rem;
  padding: 1rem 2rem;
  text-align: left;
  /* 四角で囲むデザイン（グローバルカラー使用） */
  display: block !important;
  width: 500px !important;
  min-width: 500px !important;
  max-width: 100%;
  background: #C9AD6C !important;
  border: none !important;
  border-radius: 0;
  -webkit-box-shadow: 5px 5px 0 var(--e-global-color-bb9737f) !important;
  box-shadow: 5px 5px 0 var(--e-global-color-bb9737f) !important;
  box-sizing: border-box;
}


/* 小さなスマホ対応 */
@media (max-width: 480px) {
  h4.section-sub-heading {
    font-size: clamp(15px, 2.8vw, 19px);
  }
}

/* h5.section-sub-heading のレスポンシブ対応 */
/* タブレット対応 */
@media (max-width: 1024px) {
  h5.section-sub-heading {
    font-size: clamp(16px, 3vw, 21px);
    width: 500px !important;
    padding: 0.9rem 1.8rem;
    -webkit-box-shadow: 4px 4px 0 var(--e-global-color-bb9737f) !important;
    box-shadow: 4px 4px 0 var(--e-global-color-bb9737f) !important;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  h5.section-sub-heading {
    font-size: clamp(15px, 2.8vw, 19px);
    line-height: 1.6;
    margin: 1rem 0 0.5rem;
    display: block !important;
    width: 50% !important;
    min-width: 0 !important;
    padding: 0.8rem 1.5rem;
    -webkit-box-shadow: 3px 3px 0 var(--e-global-color-bb9737f) !important;
    box-shadow: 3px 3px 0 var(--e-global-color-bb9737f) !important;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  h5.section-sub-heading {
    font-size: clamp(14px, 2.6vw, 18px);
    display: block !important;
    width: 50% !important;
    padding: 0.7rem 1.2rem;
    -webkit-box-shadow: 2px 2px 0 var(--e-global-color-bb9737f) !important;
    box-shadow: 2px 2px 0 var(--e-global-color-bb9737f) !important;
  }
}

/* ===== セクション見出し（タイミング用：見出しウィジェット風） =====
 * 目的：HTMLウィジェット内の見出しを、同ページ内の「見出しウィジェット」と同じ見え方に揃える。
 *      既存の「section-sub-heading」は他ページでも使い回している前提のため、影響範囲を分離する。
 *
 * 使い方（推奨：HTMLウィジェット）：
 * <h4 class="section-sub-heading-timing">第1のタイミング：3歳児健診ごろ</h4>
 */
.elementor-element.section-sub-heading-timing {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


h4.section-sub-heading-timing {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-bb9737f); /* 見出しウィジェット側の金色に合わせる */
  font-size: 1.25rem; /* PC: 20px 相当（rem基準なのでスマホは自動で縮む） */
  font-weight: 400;
  line-height: 1; /* PC側の見出しウィジェットに合わせる（20px/20px） */
  letter-spacing: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* スマホ側の見出しウィジェットは行間が広いので追従 */
@media (max-width: 768px) {
  h4.section-sub-heading-timing {
    line-height: 1.3;
  }
}

/* ===== セクションタイトル（■マーク付き） ===== */
/* 使い方：HTMLウィジェットでpタグに「section-title」クラスを追加 */
.section-title,
/* タイポ救済（section-title の s が抜けたケース） */
.ection-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--e-global-color-text) !important;
  background-color: var(--e-global-color-15ba953);
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin: 0 0 16px;
}

/* ----------------------------------------
   金額見出し（背景なし・金額だけ赤・(税込)だけ小さめ）
   使い方（HTMLウィジェット）：
   <p class="pricing-title">
     小児矯正 <span class="price-amount">11万円〜</span><span class="price-tax">（税込）</span>
   </p>
---------------------------------------- */
.pricing-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700; /* 太字 */
  font-size: 38px;  /* 指定：38px */
  line-height: 1;
  letter-spacing: normal;
  color: var(--e-global-color-text);
  background: transparent;
  margin: 0 0 16px;
  padding: 0;
  /* 中央（左右）＋中段寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.pricing-title .price-amount {
  color: var(--e-global-color-text); /* 最新要望：本文色 */
  font-weight: inherit;
}

.pricing-title .price-tax {
  color: var(--e-global-color-text);
  /* （税込）だけ小さく（サイズは後段の .zeikomi/.price-tax ルールで制御） */
  margin-left: 0.1em;
}

/* 金額ブロックの本文（Noto Serif JPで統一） */
.pricing-text,
.pricing-text * {
  font-family: "Noto Serif JP", serif;
}

.pricing-text .note-text {
  font-family: inherit;
}

/* 金額ブロックの本文色を統一（Elementor側の色指定に勝つため） */
.pricing-text,
.pricing-text * {
  color: var(--e-global-color-text);
  letter-spacing: normal; /* Elementor側の letter-spacing(例:0.66px) をリセット */
}

/* 金額ブロック内の段落間をコンパクトに */
.pricing-text p {
  margin: 0 0 0.45em;
  font-size: 20px !important; /* 指定：20px */
  line-height: 30px !important; /* 指定：30px */
}

.pricing-text p:last-child {
  margin-bottom: 0;
}

.pricing-text .note-text {
  margin: 0.25em 0 0.45em;
  font-size: 20px !important;
  line-height: 30px !important;
}

/* スマホ：価格見出しと本文を適切なサイズに */
@media (max-width: 768px) {
  .pricing-title {
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .pricing-text p,
  .pricing-text .note-text {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .pricing-text p {
    margin-bottom: 0.35em;
  }

  .pricing-text .note-text {
    margin: 0.2em 0 0.35em;
  }
}

/* スマホ表示：見出しと画像を縦並びにするための調整 */
@media (max-width: 768px) {
  .section-title {
    margin-bottom: 1em;
  }
  
  /* 見出しと画像を含むコンテナの調整 */
  .elementor-element:has(.section-title) + .elementor-element:has(img) {
    margin-top: 0;
  }
  
  /* 見出しと画像を縦に並べる */
  .elementor-element:has(.section-title),
  .elementor-element:has(.section-title) + .elementor-element:has(img) {
    width: 100% !important;
    flex-direction: column;
  }
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .section-title {
    font-size: clamp(17px, 3.2vw, 22px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(16px, 3vw, 20px);
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .section-title {
    font-size: clamp(15px, 2.8vw, 19px);
  }
}

/* ===== 番号付き見出し（【1】形式） ===== */
/* 使い方：HTMLウィジェットでpタグに「numbered-heading」クラスを追加 */
.numbered-heading {
  font-family: "Noto Serif JP", serif !important;
  color: var(--e-global-color-bb9737f) !important;
  font-size: clamp(18px, 3.5vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  margin: 2.5rem 0 1em;
  padding: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .numbered-heading {
    font-size: clamp(17px, 3.2vw, 22px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .numbered-heading {
    font-size: clamp(16px, 3vw, 20px);
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .numbered-heading {
    font-size: clamp(15px, 2.8vw, 19px);
  }
}

/* ===== 番号付き見出しの説明文 ===== */
/* 使い方：HTMLウィジェットでpタグに「numbered-heading-desc」クラスを追加 */
.numbered-heading-desc {
  font-family: "Noto Sans JP", sans-serif !important;
  color: var(--e-global-color-text) !important;
  font-size: 20px !important;
  line-height: 1.5;
  margin: 0 0 1em;
  padding: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .numbered-heading-desc {
    font-size: 18px !important;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .numbered-heading-desc {
    font-size: 16px !important;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .numbered-heading-desc {
    font-size: 15px !important;
  }
}

/* ===== 治療法見出し（▼マーク付き） ===== */
/* 使い方：HTMLウィジェットでpタグに「treatment-heading」クラスを追加 */
.treatment-heading {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-secondary);
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 0.5em;
  padding: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .treatment-heading {
    font-size: clamp(15px, 2.8vw, 19px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .treatment-heading {
    font-size: clamp(14px, 2.5vw, 18px);
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .treatment-heading {
    font-size: clamp(13px, 2.3vw, 17px);
  }
}

/* ===== 箇条書きリスト（・マーク付き） ===== */
/* 使い方：HTMLウィジェットでulタグに「bullet-list」クラスを追加 */
.bullet-list {
  margin: 0.6em 0 1em; /* 前後の要素と詰まりやすいので少し離す */
  padding-left: 1.5em;
  list-style: none;
  color: var(--e-global-color-text);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 400;
  line-height: 1.8;
}

.bullet-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.5em;
}

.bullet-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--e-global-color-text);
}

.bullet-list li:last-child {
  margin-bottom: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .bullet-list {
    font-size: clamp(14px, 3vw, 17px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .bullet-list {
    font-size: clamp(15px, 3.2vw, 18px); /* スマホで小さすぎないように */
    line-height: 1.8;
    padding-left: 1.3em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .bullet-list {
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.75;
  }
}

/* ===== 治療法説明文（番号付きリスト付き） ===== */
/* 使い方：HTMLウィジェットでdivタグに「treatment-description」クラスを追加 */
.treatment-description {
  color: var(--e-global-color-text);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
}

.treatment-description ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
  color: var(--e-global-color-text);
}

.treatment-description li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

.treatment-description li p {
  margin: 0;
  display: inline;
}

.treatment-description p {
  margin: 1em 0 0;
  line-height: 1.8;
}

.treatment-description strong {
  font-weight: 600;
  color: var(--e-global-color-text);
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .treatment-description {
    font-size: clamp(14px, 3vw, 17px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .treatment-description {
    font-size: clamp(13px, 2.8vw, 16px);
    line-height: 1.75;
  }
  
  .treatment-description ol {
    padding-left: 1.3em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .treatment-description {
    font-size: clamp(12px, 2.5vw, 15px);
    line-height: 1.7;
  }
}

/* ===== 診療方針テキスト（統一デザイン） ===== */
.clinic-philosophy-text {
  font-family: inherit; /* サイト全体のフォントを継承 */
  color: var(--e-global-color-text);
  font-size: clamp(16px, 3.2vw, 20px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-align: left;
  margin: 0;
  padding: 0;
  white-space: normal; /* 改行を有効にする */
}

/* clinic-philosophy-text を「ラッパーdiv」に付けた場合は、中段（縦中央）に配置 */
div.clinic-philosophy-text {
  height: 100%;
  display: flex;
  align-items: center; /* 縦中央（rowのcross-axis） */
}

div.clinic-philosophy-text > p {
  margin: 0;
}

/* ----------------------------------------
   文章カラムだけ左右余白（HTMLウィジェット用）
   使い方：余白を付けたい「左カラムのコンテナ」または「HTMLウィジェット」に
          CSSクラス clinic-philosophy-pad を追加
---------------------------------------- */
.clinic-philosophy-pad {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  /* 左カラム内で文章ブロックを縦中央（中段）に配置 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .clinic-philosophy-pad {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Elementorのコンテナ側flex設定に負けるケースがあるため、コンテナに付けた場合は強めに上書き */
.elementor .e-con.clinic-philosophy-pad {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* 縦中央 */
  align-items: stretch !important;
  /* 親行（画像側）の高さに合わせてストレッチさせる */
  align-self: stretch !important;
  min-height: 0 !important;
}

/* 画像カラム（centered-image）は左右余白を付けない（親のpadding影響を打ち消す） */
.centered-image {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .clinic-philosophy-text {
    font-size: clamp(15px, 3vw, 19px);
    line-height: 1.85;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .clinic-philosophy-text {
    font-size: clamp(16px, 3.5vw, 19px);
    line-height: 1.8;
    letter-spacing: 0.02em;
    padding: 0 1rem; /* 左右に余白を追加 */
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .clinic-philosophy-text {
    font-size: clamp(15px, 3.2vw, 17px);
    line-height: 1.75;
    padding: 0 1.2rem; /* 小さなスマホでは少し多めに */
  }
}

/* ===== 統一コンテンツテキスト（Elementor要素用） ===== */
.unified-content-text {
  /* font-family: "Noto Serif JP", serif; */
  color: var(--e-global-color-text);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 子要素にも適用 */
.unified-content-text * {
  font-family: inherit;
  color: inherit;
}

/* 見出し要素は個別に調整 */
.unified-content-text h1,
.unified-content-text h2,
.unified-content-text h3,
.unified-content-text h4,
.unified-content-text h5,
.unified-content-text h6 {
  font-weight: 700;
  line-height: 1.5;
  margin: 1.5em 0 0.8em;
}

.unified-content-text h1 {
  font-size: clamp(24px, 4.5vw, 32px);
}

.unified-content-text h2 {
  font-size: clamp(22px, 4vw, 28px);
}

.unified-content-text h3 {
  font-size: clamp(20px, 3.8vw, 26px);
}

.unified-content-text h4 {
  font-size: clamp(18px, 3.5vw, 24px);
}

.unified-content-text p {
  margin: 1em 0;
}

.unified-content-text ul,
.unified-content-text ol {
  margin: 1em 0;
  padding-left: 1.5em;
}

.unified-content-text li {
  margin: 0.5em 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .unified-content-text {
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 1.85;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .unified-content-text {
    font-size: clamp(15px, 3.2vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
  
  .unified-content-text h1 {
    font-size: clamp(22px, 4vw, 28px);
  }
  
  .unified-content-text h2 {
    font-size: clamp(20px, 3.5vw, 26px);
  }
  
  .unified-content-text h3 {
    font-size: clamp(18px, 3.2vw, 24px);
  }
  
  .unified-content-text h4 {
    font-size: clamp(17px, 3vw, 22px);
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .unified-content-text {
    font-size: clamp(14px, 3vw, 18px);
    line-height: 1.75;
  }
  
  .unified-content-text h1 {
    font-size: clamp(20px, 3.5vw, 26px);
  }
  
  .unified-content-text h2 {
    font-size: clamp(18px, 3.2vw, 24px);
  }
  
  .unified-content-text h3 {
    font-size: clamp(17px, 3vw, 22px);
  }
  
  .unified-content-text h4 {
    font-size: clamp(16px, 2.8vw, 20px);
  }
}

/* ===== 中央寄せ画像（縦横比保持） ===== */
.centered-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* 縦横比を保持して表示 */
  margin: 0 auto; /* 中央寄せ */
  max-width: 100%;
}

/* スマホ対応：画像の縦横比を確実に保持 */
@media (max-width: 768px) {
  .centered-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto; /* 中央寄せを維持 */
  }
}

/* ===== 標準コンテンツテキスト（共用クラス） ===== */
/* 使い方：HTMLウィジェットのdivに「standard-content-text」クラスを追加 */
.standard-content-text,
/* タイポ救済（standard-content-text の s が抜けたケース） */
.tandard-content-text {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-text);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 400; /* 根管治療ページの本文（clinic-philosophy-text）に合わせて統一 */
  line-height: 1.9;
  letter-spacing: 0.03em;
  /* 本文ブロック同士が詰まらないよう余白を確保 */
  margin: 0 0 1.1rem;
}

.standard-content-text p,
.tandard-content-text p {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
}

.standard-content-text p:last-child,
.tandard-content-text p:last-child {
  margin-bottom: 0;
}

/* standard-content-text 内の小見出し（h5）スタイル */
.standard-content-text h5,
.tandard-content-text h5 {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-secondary);
  font-size: clamp(19px, 3.5vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  margin: 1.5em 0 0.8em;
  padding: 0;
  letter-spacing: 0.02em;
}

.standard-content-text h5:first-child,
.tandard-content-text h5:first-child {
  margin-top: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .standard-content-text h5,
  .tandard-content-text h5 {
    font-size: clamp(18px, 3.2vw, 23px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .standard-content-text h5,
  .tandard-content-text h5 {
    font-size: clamp(17px, 3vw, 22px);
    margin: 1.2em 0 0.7em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .standard-content-text h5,
  .tandard-content-text h5 {
    font-size: clamp(16px, 2.8vw, 21px);
  }
}

/* 中央寄せテキスト（HTMLウィジェット用） */
.text-center {
  text-align: center;
}

/* 強調テキスト（オレンジ色） */
.standard-content-text .text-highlight {
  color: #ff9900;
  font-weight: inherit;
}

/* 強調テキスト（太字・濃いグレー） */
.standard-content-text strong,
.tandard-content-text strong,
.standard-content-text .text-emphasis {
  font-weight: 600;
  color: var(--e-global-color-text);
}

/* ===== 強調コンテンツテキスト（目立たせる版） ===== */
/* 使い方：HTMLウィジェットのdivに「highlighted-content-text」クラスを追加 */
.highlighted-content-text {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-text);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
  /* 控えめな強調スタイル */
  background-color: #f8f9fa;
  border-left: 4px solid var(--e-global-color-bb9737f);
  padding: 1.2em 1.5em;
  margin: 1.5rem 0;
  border-radius: 4px;
}

.highlighted-content-text p {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
}

.highlighted-content-text p:last-child {
  margin-bottom: 0;
}

.highlighted-content-text strong {
  font-weight: 600;
  color: var(--e-global-color-text);
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .highlighted-content-text {
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 1.85;
    padding: 1.1em 1.3em;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .highlighted-content-text {
    font-size: clamp(15px, 3.2vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.02em;
    padding: 1em 1.2em;
    margin: 1.2rem 0;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .highlighted-content-text {
    font-size: clamp(14px, 3vw, 18px);
    line-height: 1.75;
    padding: 0.9em 1.1em;
  }
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .standard-content-text {
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 1.85;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .standard-content-text {
    font-size: clamp(15px, 3.2vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .standard-content-text {
    font-size: clamp(14px, 3vw, 18px);
    line-height: 1.75;
  }
}

/* ===== 症状チェックリスト（共用クラス） ===== */
/* 使い方：HTMLウィジェットでulタグに「symptom-checklist」クラスを追加 */
.symptom-checklist {
  margin: 0 0 1.1rem; /* 下の文章と詰まらないように */
  padding: 0;
  list-style: none;
  color: var(--e-global-color-text);
  font-size: clamp(17px, 3.8vw, 22px);
  font-weight: 400; /* 本文に合わせて統一 */
}

/* 各項目 */
.symptom-checklist li {
  position: relative;
  padding-left: 2.2em; /* アイコン分の余白 */
  margin-bottom: 0.6em;
  line-height: 1.8; /* 読みやすい行間 */
}

/* Font Awesome チェックアイコン */
.symptom-checklist li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Solid 必須 */
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0.2em; /* 行間に合わせて微調整 */
  color: #98781a;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .symptom-checklist {
    font-size: clamp(16px, 3.5vw, 21px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .symptom-checklist {
    font-size: clamp(15px, 3.2vw, 20px);
  }
  
  .symptom-checklist li {
    line-height: 1.9;
    margin-bottom: 0.7em;
    padding-left: 2.0em; /* 画面が狭い分、少し詰める */
  }
  
  .symptom-checklist li::before {
    top: 0.25em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .symptom-checklist {
    font-size: clamp(14px, 3vw, 18px);
  }
}

/* ===== レスポンシブ本文テキスト（共用クラス） ===== */
/* 使い方：HTMLウィジェットでpタグに「responsive-text」クラスを追加 */
.responsive-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(17px, 3.8vw, 22px);
  line-height: 1.9;
  color: var(--e-global-color-text);
  font-weight: 400; /* 本文に合わせて統一 */
  margin: 0;
}

/* 強調テキスト（オレンジ色） */
.responsive-text .highlight-text {
  color: #ff9900;
}

/* 強調テキスト（太字・濃いグレー） */
.responsive-text strong {
  font-weight: 600;
  color: var(--e-global-color-text);
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .responsive-text {
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 1.85;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .responsive-text {
    font-size: clamp(15px, 3.2vw, 20px);
    line-height: 1.8;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .responsive-text {
    font-size: clamp(14px, 3vw, 18px);
    line-height: 1.75;
  }
}

/* ===== 強調テキスト（控えめな強調） ===== */
/* 使い方：HTMLウィジェットでpタグやdivタグに「emphasized-text」クラスを追加 */
.emphasized-text {
  background-color: #f8f9fa;
  border-left: 3px solid #61A173;
  padding: 1em 1.2em;
  margin: 1em 0;
  color: var(--e-global-color-text);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  border-radius: 4px;
}

/* ----------------------------------------
   金色テキスト（Elementorグローバルカラー）
   使い方：HTMLウィジェットで p 等に class="text-gold" を付与
---------------------------------------- */
.text-gold {
  font-family: "Noto Serif JP", serif !important;
  color: var(--e-global-color-bb9737f) !important;
  font-weight: 700 !important;
}

.emphasized-text strong {
  font-weight: 600;
  color: var(--e-global-color-text);
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .emphasized-text {
    font-size: clamp(14px, 3vw, 17px);
    padding: 0.9em 1.1em;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .emphasized-text {
    font-size: clamp(13px, 2.8vw, 16px);
    padding: 0.8em 1em;
    line-height: 1.75;
    margin: 0.8em 0;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .emphasized-text {
    font-size: clamp(12px, 2.5vw, 15px);
    padding: 0.7em 0.9em;
    line-height: 1.7;
  }
}

/* ===== 注釈テキスト（※マーク付きなど） ===== */
/* 使い方：HTMLウィジェットでpタグに「note-text」クラスを追加 */
.note-text {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--e-global-color-text);
  font-size: clamp(13px, 2.8vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  margin: 1em 0;
  padding: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .note-text {
    font-size: clamp(12px, 2.5vw, 15px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .note-text {
    font-size: clamp(12px, 2.3vw, 14px);
    line-height: 1.6;
    margin: 0.8em 0;
  }
}

/* ----------------------------------------
   /syonikyosei/（page-id-4115）スマホ：セクション間の余白を確保
---------------------------------------- */
@media (max-width: 768px) {
  body.page-id-4115 .elementor-element.elementor-element-1b5a35a {
    margin-bottom: 32px;
  }

  body.page-id-4115 .elementor-element.elementor-element-a8784ab {
    margin-top: 24px;
  }
}

/* /syonikyosei/（page-id-4115）床矯正：HTMLウィジェット内リストの位置調整（スマホ） */
@media (max-width: 768px) {
  /* ul/ol を使っている場合のインデントを最適化 */
  body.page-id-4115 .elementor-element.elementor-element-81f0876 ul,
  body.page-id-4115 .elementor-element.elementor-element-81f0876 ol {
    margin-left: 0 !important;
    padding-left: 1.3em !important;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .note-text {
    font-size: clamp(11px, 2vw, 13px);
    line-height: 1.5;
  }
}

/* ----------------------------------------
   金額ブロック（pricing-text）内だけは note-text も Noto Serif JP に統一
---------------------------------------- */
.pricing-text .note-text {
  font-family: "Noto Serif JP", serif !important;
}

/* ----------------------------------------
   （税込）表示：既存の .price-tax に加えて .zeikomi もサポート
   参考：PC 0.8vw / SP 4vw
---------------------------------------- */
.pricing-title .zeikomi,
.pricing-title .price-tax {
  font-size: 0.8vw;
}

@media (max-width: 768px) {
  .pricing-title .zeikomi,
  .pricing-title .price-tax {
    font-size: 4vw;
  }
}

/* 価格エリアの左右カラム間に縦線（#B8B8B8） */
@media (min-width: 769px) {
  /* 左カラム（価格見出し）を中央・中段寄せ */
  .elementor-element.elementor-element-eae5910 .elementor-element.elementor-element-57e4543 {
    display: flex;
    align-items: center;   /* 縦中央 */
    justify-content: center; /* 横中央 */
  }

  .elementor-element.elementor-element-eae5910 .elementor-element.elementor-element-2f38e9e {
    /* 外側コンテナ：上下に余白を作る */
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    position: relative;
  }

  /* 内側コンテナ：左ボーダーで縦線（上下は外側padding内に収まる） */
  .elementor-element.elementor-element-eae5910 .elementor-element.elementor-element-bfe564f {
    border-left: 1px solid #B8B8B8;
    padding-left: 24px;
    box-sizing: border-box;
    height: 100%;
    align-self: stretch;
  }

  .elementor-element.elementor-element-eae5910 .elementor-element.elementor-element-57e4543 {
    padding-right: 24px;
    box-sizing: border-box;
  }
}

/* スマホでは縦線よりも区切り線（上線）の方が自然 */
@media (max-width: 768px) {
  .elementor-element.elementor-element-eae5910 .elementor-element.elementor-element-2f38e9e {
    border-top: 1px solid #B8B8B8;
    padding-top: 16px;
    margin-top: 12px;
  }
}

/* （削除）小児矯正：症例画像の独自スライダー用CSS（Elementorスライドウィジェット採用のため） */

/* ----------------------------------------
   HTMLウィジェット用 テーブル（元の<style>準拠）
   - 常に「左1列目がヘッダー(th)」の2列テーブル
   - レスポンシブは“縦積み”にしない（見た目が変わるため）
---------------------------------------- */
.custom-table {
  /* PCでは一定幅で中央寄せに見せる（幅100%だと中央寄せの意味が出ないため） */
  width: min(100%, 1000px) !important;
  border-collapse: collapse !important;
  /* PCで中央寄せに見せたい場合に備えて（幅100%でも害なし） */
  margin: 0 auto !important;
  table-layout: fixed; /* 行ごとに列幅がブレないように固定 */
}

.custom-table th,
.custom-table td {
  padding: 2% !important; /* 元の指定 */
  text-align: left !important;
  border: 1px solid #ddd !important;
  vertical-align: top;
  word-break: break-word;
}

.custom-table th {
  background-color: #FFDC4894 !important; /* ヘッダーの背景色 */
  color: #7A7A7A !important; /* 元の文字色 */
  font-weight: bold !important;
  font-size: 18px !important; /* 見出し列を少し大きく */
  width: 35% !important; /* デフォルトのヘッダー幅 */
}

.custom-table td {
  background-color: #fff !important; /* ボディ部分の背景色 */
  color: #7A7A7A !important; /* 元の文字色 */
  font-size: 16px !important;
  width: 65% !important; /* デフォルトのボディ幅 */
}

/* 特定のテーブルだけに適用するスタイル */
.custom-table.special-table th {
  width: 50% !important;
}

.custom-table.special-table td {
  width: 50% !important;
}

/* 左列(th)を狭くしたいテーブル用（HTML側でクラス追加） */
.custom-table.narrow-th th {
  width: 32% !important;
  /* 見出し列：横中央・縦中央 */
  text-align: center !important;
  vertical-align: middle;
}

.custom-table.narrow-th td {
  width: 68% !important;
}

/* 行の高さを揃える（PC基準）。内容が増えた場合は高さが伸びることがあります */
.custom-table.narrow-th th,
.custom-table.narrow-th td {
  height: 110px;
}

/* スマホ：固定高さは解除して自然に可変 */
@media (max-width: 600px) {
  .custom-table.narrow-th th,
  .custom-table.narrow-th td {
    height: auto;
  }
}

/* ----------------------------------------
   HTMLウィジェット用：4列テーブル（横スクロール対応）
   使い方：
   <div class="table-scroll">
     <table class="wide-table">...</table>
   </div>
---------------------------------------- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .wide-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  min-width: 720px; /* スマホで潰れないよう最低幅を確保 */
}

.table-scroll .wide-table th,
.table-scroll .wide-table td {
  border: 1px solid #ddd;
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
  color: var(--e-global-color-text);
  word-break: break-word;
  font-size: 17px; /* 少し大きくして読みやすく */
}

.table-scroll .wide-table thead th {
  background: #FFDC4894;
  font-weight: 600;
  text-align: center; /* ヘッダーは中央寄せ */
}

@media (max-width: 768px) {
  .table-scroll .wide-table th,
  .table-scroll .wide-table td {
    padding: 0.75rem 0.8rem;
    font-size: 16px;
  }
}

/* スマホ：2列のまま読みやすく（余白と文字サイズだけ調整） */
@media (max-width: 600px) {
  .custom-table th,
  .custom-table td {
    padding: 0.85rem !important;
  }

  .custom-table td {
    font-size: 14px !important;
  }

  .custom-table th {
    font-size: 16px !important;
  }
}

/* ===== 特徴リスト（feature-list） ===== */
/* 使い方：HTMLウィジェットでulタグに「feature-list」クラスを追加 */
.standard-content-text .feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.standard-content-text .feature-item {
  margin-bottom: 1.5em;
}

.standard-content-text .feature-item:last-child {
  margin-bottom: 0;
}

.standard-content-text .feature-title {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5em;
  font-size: inherit;
  line-height: 1.5;
  color: inherit;
}

.standard-content-text .feature-description {
  margin: 0;
  padding-left: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .standard-content-text .feature-item {
    margin-bottom: 1.3em;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .standard-content-text .feature-item {
    margin-bottom: 1.2em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .standard-content-text .feature-item {
    margin-bottom: 1em;
  }
}

/* ===== コンパクトな補足セクション（standard-content-text内） ===== */
/* 使い方：standard-content-text内で、補足説明部分をdivで囲む */
.standard-content-text .compact-section {
  margin: 1em 0;
}

.standard-content-text .compact-section h5 {
  font-size: clamp(17px, 3.2vw, 20px);
  font-weight: 600;
  color: var(--e-global-color-secondary);
  margin: 0.8em 0 0.4em;
  padding: 0;
  line-height: 1.4;
}

.standard-content-text .compact-section h5:first-child {
  margin-top: 0;
}

.standard-content-text .compact-section p {
  margin: 0 0 0.5em;
  font-size: inherit;
  line-height: 1.7;
}

.standard-content-text .compact-section .bullet-list {
  margin: 0.3em 0 0.8em;
  padding-left: 1.3em;
  font-size: clamp(15px, 3vw, 17px);
  line-height: 1.6;
}

.standard-content-text .compact-section .bullet-list li {
  margin-bottom: 0.3em;
  padding-left: 0.8em;
}

.standard-content-text .compact-section .bullet-list li:last-child {
  margin-bottom: 0;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .standard-content-text .compact-section h5 {
    font-size: clamp(16px, 3vw, 19px);
    margin: 0.7em 0 0.35em;
  }
  
  .standard-content-text .compact-section .bullet-list {
    font-size: clamp(14px, 2.8vw, 16px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .standard-content-text .compact-section {
    margin: 0.8em 0;
  }
  
  .standard-content-text .compact-section h5 {
    font-size: clamp(15px, 2.8vw, 18px);
    margin: 0.6em 0 0.3em;
  }
  
  .standard-content-text .compact-section p {
    margin-bottom: 0.4em;
    line-height: 1.65;
  }
  
  .standard-content-text .compact-section .bullet-list {
    margin: 0.25em 0 0.7em;
    padding-left: 1.2em;
    font-size: clamp(14px, 2.7vw, 16px);
    line-height: 1.55;
  }
  
  .standard-content-text .compact-section .bullet-list li {
    margin-bottom: 0.25em;
    padding-left: 0.7em;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .standard-content-text .compact-section h5 {
    font-size: clamp(14px, 2.5vw, 17px);
  }
  
  .standard-content-text .compact-section .bullet-list {
    font-size: clamp(13px, 2.5vw, 15px);
  }
}

/* ===== セクション見出し（h2タグ用：HTMLウィジェット） ===== */
/* 使い方：HTMLウィジェットでh2タグに直接クラスを追加 */
h2.section-heading-h2 {
  font-family: "Noto Serif JP", serif;
  color: var(--e-global-color-secondary);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  margin: 2rem 0 1.5rem;
  padding: 0;
  text-align: center;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  h2.section-heading-h2 {
    font-size: clamp(20px, 3.5vw, 26px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  h2.section-heading-h2 {
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.5;
    margin: 1.5rem 0 1rem;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  h2.section-heading-h2 {
    font-size: clamp(17px, 2.8vw, 22px);
  }
}

/* ===== シンプルな見出し（HTMLウィジェット用） ===== */
/* 使い方：HTMLウィジェットでh2タグに直接クラスを追加 */
h2.simple-heading {
  font-family: "Noto Serif JP", serif;
  color: #ffffff;
  background-color: var(--e-global-color-bb9737f);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 25px 0;
  padding: 0 0 0 20px;
  text-align: left;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  h2.simple-heading {
    font-size: clamp(20px, 3.5vw, 26px);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  h2.simple-heading {
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.5;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  h2.simple-heading {
    font-size: clamp(17px, 2.8vw, 22px);
  }
}

/* ===== 名前表示（HTMLウィジェット用：テキストエディタウィジェット風） ===== */
/* 使い方：HTMLウィジェットでpタグやdivタグに直接クラスを追加 */
.name-display {
  font-family: "Noto Serif JP", serif;
  color: #7A7A7A;
  font-size: 25px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: normal;
  margin: 0;
  padding: 0 0 14px 15px;
  text-align: left;
  border-left: 9px solid var(--e-global-color-bb9737f);
  border-bottom: 2px solid var(--e-global-color-bb9737f);
  box-sizing: border-box;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .name-display {
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 40px;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .name-display {
    font-size: clamp(15px, 3.2vw, 20px);
    line-height: 35px;
  }
}

/* 小さなスマホ対応 */
@media (max-width: 480px) {
  .name-display {
    font-size: clamp(14px, 3vw, 18px);
    line-height: 30px;
  }
}