/* ==========================================================
   typography.css (分離版 / コピペ用全文)
   目的：
   - 見出し(h1-h5) = Zen Kaku Gothic New
   - 本文 = Noto Sans JP
   - 斜体は h1/h2 のみ
   - main.css 等と競合しても「確実に太く」する（強制）
   - ttl クラス運用もカバー
   ========================================================== */


/* ==========================================================
   0) 本文フォント（全体）
   ========================================================== */
html, body{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   1) 見出し（h1-h5）：Zen Kaku Gothic New + 強制太字
   ========================================================== */
h1, h2, h3, h4, h5{
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;

  font-weight: 900 !important; /* ★強制太字 */
  font-stretch: normal !important;
  font-variant: normal !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}


/* ==========================================================
   2) 斜体：h1/h2 のみ
   ========================================================== */
h1, h2{
  font-style: italic !important;
}
h3, h4, h5{
  font-style: normal !important;
}


/* ==========================================================
   3) 強いセレクタ保険（テンプレ側が強い場合に勝つ）
   ========================================================== */
#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper h5,
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5{
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 900 !important;
}

#page-wrapper h1, #page-wrapper h2,
#wrapper h1,      #wrapper h2{
  font-style: italic !important;
}

#page-wrapper h3, #page-wrapper h4, #page-wrapper h5,
#wrapper h3,      #wrapper h4,      #wrapper h5{
  font-style: normal !important;
}


/* ==========================================================
   4) ttl クラス運用（span.ttl / 見出し内のttlも確実に勝つ）
   ========================================================== */
.ttl{
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}
h1 .ttl, h2 .ttl,
h1.ttl,  h2.ttl{
  font-style: italic !important;
}
h3 .ttl, h4 .ttl, h5 .ttl,
h3.ttl,  h4.ttl,  h5.ttl{
  font-style: normal !important;
}


/* ==========================================================
   5) 数字が細く見える対策（任意・軽め）
   ========================================================== */
h1, h2, h3, h4, h5, .ttl{
  font-feature-settings: "palt" 1;
}


/* ==========================================================
   6) SEO用：#banner の h1 を“見た目は崩さず”扱う
   （サイズはテンプレ設計に追従）
   ========================================================== */
#banner h1{
  margin: 0 0 0.5em 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}
#banner h1 .ttl{
  display: inline-block;
}