@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');

/*
 Theme Name: BIRTH Child
 Template:   birth_tcd057
*/

@charset "utf-8";

/* ベースフォントを今風に */
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2933;
}

/* コンテンツ幅と余白をゆったり */
#main_col,
.post_content {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* 見出しのスタイルをシンプルに */
.post_content h2 {
  font-size: 1.8rem;
  margin: 2.5em 0 1em;
  padding-left: 0;
  font-weight: 700;
}

.post_content h3 {
  font-size: 1.4rem;
  margin: 2em 0 0.8em;
  font-weight: 600;
}

/* ボタンをフラット＆モダンに */
.btn a,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 9999px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn a:hover,
a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.35);
  opacity: 0.92;
}

/* Elementor用テンプレートではBIRTH側の余計な装飾を外す */
.page-template-page-elementor #main_col,
.page-template-page-elementor .post_content {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-template-page-elementor #main {
  margin: 0;
  padding: 0;
}

/* Elementorのセクションを画面いっぱいに */
.page-template-page-elementor .elementor-section {
  max-width: 100%;
}


/* ──────────────────────────────
   本文内のテーブル共通デザイン
   （Elementorでも通常本文でも共通で効かせる）
   ────────────────────────────── */

/* 幅と基本レイアウト */
.post_content table,
.elementor-page table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95rem;
}

/* すべてのセルに薄いグレーの線 */
.post_content table th,
.post_content table td,
.elementor-page table th,
.elementor-page table td {
  padding: 0.6em 0.8em;
  border: 1px solid #e5e7eb; /* 薄いグレー */
  vertical-align: top;
}

/* 左側の<th>を少し強調 */
.post_content table th,
.elementor-page table th {
  background: #f5f5f7;      /* 左列の背景色（お好みで変更OK） */
  font-weight: 600;
  white-space: nowrap;      /* 見出しはできるだけ1行 */
  width: 7em;               /* 左列の目安幅 */
}

/* 右側<td>は読みやすく */
.post_content table td,
.elementor-page table td {
  line-height: 1.7;
}

/* ─ スマホ用：1行をカード型に崩す ─ */
@media (max-width: 768px) {
  /* compare-table を除外してカード化する */
  .post_content table:not(.compare-table),
  .post_content table:not(.compare-table) tbody,
  .post_content table:not(.compare-table) tr,
  .post_content table:not(.compare-table) th,
  .post_content table:not(.compare-table) td,
  .elementor-page table:not(.compare-table),
  .elementor-page table:not(.compare-table) tbody,
  .elementor-page table:not(.compare-table) tr,
  .elementor-page table:not(.compare-table) th,
  .elementor-page table:not(.compare-table) td {
    display: block;
    width: 100%;
  }

  .post_content table:not(.compare-table) tr,
  .elementor-page table:not(.compare-table) tr {
    border: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
    padding: 0;
  }
}

  .post_content table tr,
  .elementor-page table tr {
    border: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
    padding: 0;
  }

  .post_content table th,
  .elementor-page table th {
    background: #f5f5f7;
    border-bottom: 0;
  }

  .post_content table td,
  .elementor-page table td {
    border-top: 0;
  }
}

/************************************
 * LP用タイポ調整
 ************************************/

/* 1) Elementorページ内の基本行間（本文） */
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-text-editor p,
.elementor-page .elementor-widget-text-editor li {
  line-height: 1.9;   /* 行間ゆったりめ */
  font-size: 1rem;    /* 必要なら 15px / 16px 相当 */
}

/* 2) 見出し用 明朝フォントスタック */
.elementor-page h2,
.elementor-page h3 {
  font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",
               serif;
}

/* 3) H2 を少し大きく＆見出しっぽく */
.elementor-page h2 {
  font-size: 1.8rem;   /* お好みで 1.8〜2.2rem の範囲で調整 */
  font-weight: 600;
  line-height: 1.4;
}

/* 4) H3 も明朝＋ほどよいサイズに */
.elementor-page h3 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}

/* 5) Elementor の「文字色」設定が効くように、テーマ側の色指定をリセット */
.elementor-page h1,
.elementor-page h2,
.elementor-page h3,
.elementor-page h4,
.elementor-page h5,
.elementor-page h6 {
  color: inherit;
}

/************************************
 * LP 見出しをモダン明朝に
 ************************************/

/* Elementor スライドアップLPのHタグを明朝に */
.elementor-page h1,
.elementor-page h2,
.elementor-page h3,
.elementor-page h4,
.elementor-page h5,
.elementor-page h6,
.elementor-page .elementor-widget-heading .elementor-heading-title {
  font-family: "Noto Serif JP",
               "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "ＭＳ Ｐ明朝", "MS PMincho",
               serif;
  font-weight: 500;       /* ここを 400 にするとさらに細く、600 で少し太く */
  letter-spacing: 0.04em; /* ちょい広めでLPっぽく */
}

/* H2 のサイズと余白（お好みで調整） */
.elementor-page h2,
.elementor-page .elementor-widget-heading .elementor-heading-title.elementor-size-default {
  font-size: 1.8rem;   /* 大きすぎたら 1.6〜1.7rem に */
  line-height: 1.4;
}

/* H3 は一段階小さめ */
.elementor-page h3 {
  font-size: 115%;
  line-height: 1.4;
}

/************************************
 * LP H2の上に余白を追加
 ************************************/

/* すべてのH2の上に余白をつける */
.elementor-page h2,
.elementor-page .elementor-widget-heading .elementor-heading-title.elementor-size-default {
  margin-top: 2.0rem;   /* 好みで 2.0〜3.0rem くらいに調整してOK */
}

/* いちばん最初のH2だけは、少しだけ余白を控えめにする */
.elementor-page h2:first-of-type {
  margin-top: 1.2rem;
}

/* Elementor の色指定がちゃんと効くように、色は親から継承 */
.elementor-page h1,
.elementor-page h2,
.elementor-page h3,
.elementor-page h4,
.elementor-page h5,
.elementor-page h6 {
  color: inherit;
}

/* H3見出しだけ小さくする */
.elementor-page h3.elementor-heading-title {
  font-size: 130% !important;
  line-height: 1.4;
  margin-bottom: 4px; /* 下に4pxの余白を追加 */
}

/* LPのトップ見出しだけゴシック＆ボールド */
.elementor-page .elementor-element-0f5fe2f .elementor-heading-title {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic",
               "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, sans-serif;
  font-weight: 700;  /* ← ここでボールドにする */
  text-align: center;
  color: #AA1A27;
  line-height: 1.4;
}

/* LPのトップ見出しだけゴシック＆ボールド＋上余白カット */
.elementor-page .elementor-element-0f5fe2f {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.elementor-page .elementor-element-0f5fe2f .elementor-heading-title {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic",
               "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  color: #AA1A27;
  line-height: 1.4;
  margin-top: 0;      /* ← ここでも念のため消しておく */
  padding-top: 0;
}

/* ──────────────────────────────
   スマホ表示時のH2サイズ調整（スライドアップLP）
   ────────────────────────────── */
@media (max-width: 768px) {
  .elementor-page h2,
  .elementor-page .elementor-widget-heading .elementor-heading-title.elementor-size-default {
    font-size: 1.4rem;  /* 好みで 1.3〜1.5rem くらいに調整OK */
  }
}

/* 長い URL がスマホで横にはみ出さないようにする */
@media (max-width: 768px) {
  .post_content a {
    word-break: break-all;      /* 英数字を途中で折り返し可 */
    overflow-wrap: anywhere;    /* どこでも折り返して OK */
  }
}

/* 投稿ページのアイキャッチを元画像比率で表示 */
.single .post_thumb img,
.page .post_thumb img,
.entry-header img.wp-post-image {
  width: 100%;
  height: auto !important;   /* ← 高さを自動にしてトリミング解除 */
  object-fit: contain !important; /* ← 画像全体を収める */
}

/* 製品情報ページ（toolgoods）の h3 の上余白を小さくする */
.page-id-3277 .post_content h3 {
  padding-top: 4px !important;   /* デフォルトの 10px を上書き */
  margin-top: 0 !important;      /* もし margin も付いていたら消す */
}

/* Elementor の見出しウィジェットで出る h2 左線を全ページで消す */
.elementor-page .elementor-widget-heading h2.elementor-heading-title {
  border-left: none !important;   /* 左線を打ち消す */
  padding-left: 0 !important;     /* 線用に空いてた余白も戻す（必要なら） */
}

/* 線を ::before で描いているパターン対策 */
.elementor-page .elementor-widget-heading h2.elementor-heading-title::before {
  content: none !important;
}