/* note と同じ約物半角フォント（2026-08-28 追加）
   「」（） など括弧類の余白だけを詰める専用フォント。
   note の本文フォントは実測すると YakuHanJPs が先頭に入っている。
   unicode-range で括弧類だけに限定されていて、実体は各3KB。
   @import はスタイルシートの先頭でないと無視されるので、必ずここに置く。
   外すときは、この @import と .entry-body の font-family の2か所を消す。 */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp_s.min.css");

/* 右メニューを本文と一緒についてこさせる（PCのみ）2026-08-21
   戻すときはこのブロックごと削除する。 */
@media (min-width: 992px) {
  /* html/body の overflow-x:hidden が sticky を無効化するため clip に替える */
  html, body { overflow-x: clip; }
  .sideSection { position: sticky; top: 24px; }
  body.admin-bar .sideSection { top: 56px; }
}

/* 本文の組版（2026-08-28 追加）
   長文をゆっくり読んでもらうため。note.com の実測値を参照した。

   実測 -> 変更後
   1行の文字数  46字 -> 39字（日本語の適正は35〜40字）
   段落の空き   19.2px（行間30.4pxより狭い）-> 1行ぶん
   h2 と h3     どちらも28px -> 26px / 20px
   スマホ本文   14px・行間1.70 -> 16px・行間1.88

   戻し方: この行から下をすべて削除して保存する。 */

/* 本文 */
.entry-body {
  font-family: YakuHanJPs, メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: .02em;
  color: #1f2328;
}
.entry-body p {
  margin-top: 0;
  margin-bottom: 30px;   /* 段落の空き＝ちょうど1行ぶん */
  line-height: 30px;
}

/* 見出し。h2 と h3 が同じ大きさで階層が見えなかった */
.entry-body h2 {
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 54px 0 14px;   /* 前を広く、後ろを狭く。見出しは次の本文に付ける */
  padding: 14px 0 12px;
}
.entry-body h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 40px 0 10px;
  padding: 0 0 6px;
}
.entry-body h4 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  margin: 30px 0 8px;
  padding: 0;
}
/* 見出しの直後に見出しが来たとき、空きが開きすぎないように */
.entry-body h2 + h3,
.entry-body h3 + h4 { margin-top: 20px; }

/* 箇条書き。行が続いて読み分けられなかった */
.entry-body ul,
.entry-body ol { margin: 0 0 30px; padding-left: 1.6em; }
.entry-body li { line-height: 28px; margin-bottom: 10px; }
.entry-body li:last-child { margin-bottom: 0; }
.entry-body li > ul,
.entry-body li > ol { margin: 10px 0 0; }

/* 表。補助金ページは表が主役なので、詰まって見えないように */
.entry-body table { margin: 0 0 30px; font-size: 15px; }
.entry-body th,
.entry-body td { font-size: 15px; padding: 10px 12px; line-height: 24px; vertical-align: top; }
.entry-body tbody tr:nth-child(even) > td { background: #fafafa; }

/* 引用・図版。
   padding は触らない。テーマが引用符アイコンを top:10px に絶対配置していて、
   上を詰めると1行目と重なる（2026-08-28 実測） */
.entry-body blockquote { margin: 30px 0; line-height: 28px; }
.entry-body figure,
.entry-body .wp-block-image { margin: 30px 0; }

/* 本文中のリンクは下線を引く。長文だと色だけでは気づけない */
.entry-body p > a,
.entry-body li > a,
.entry-body td > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(1, 111, 70, .45);
}
.entry-body p > a:hover,
.entry-body li > a:hover,
.entry-body td > a:hover { text-decoration-color: rgba(1, 111, 70, 1); }

/* 太字。本文が font-weight 500 なので 700 にしないと差が出ない */
.entry-body strong,
.entry-body b { font-weight: 700; }

/* 目次。詰まっていて飛ばし読みの入口になっていなかった */
/* [id] は toc_white（#id+class）に詳細度で競り勝つため。!important は使わない */
#toc_container[id] { padding: 18px 22px; margin-bottom: 34px; background: #f7f8f7; }
#toc_container li { line-height: 26px; margin-bottom: 6px; }
#toc_container .toc_title { font-size: 16px; margin-bottom: 10px; }

/* ここから PC */
@media (min-width: 992px) {
  /* 1行 46字 -> 39字。本文の幅を絞る */
  .entry-body { font-size: 18px; line-height: 36px; max-width: 700px; }
  .entry-body p { line-height: 36px; margin-bottom: 36px; }

  .entry-body h2 { font-size: 26px; line-height: 38px; margin: 72px 0 18px; padding: 18px 0 14px; }
  .entry-body h3 { font-size: 20px; line-height: 34px; margin: 54px 0 12px; padding: 0 0 8px; }
  .entry-body h4 { font-size: 18px; line-height: 30px; margin: 36px 0 10px; }
  .entry-body h2 + h3,
  .entry-body h3 + h4 { margin-top: 24px; }

  .entry-body ul,
  .entry-body ol { margin-bottom: 36px; }
  .entry-body li { line-height: 32px; margin-bottom: 12px; }

  .entry-body table { margin-bottom: 36px; font-size: 16px; }
  .entry-body th,
  .entry-body td { font-size: 16px; padding: 12px 14px; line-height: 26px; }

  .entry-body blockquote { margin: 36px 0; line-height: 32px; }
  .entry-body figure,
  .entry-body .wp-block-image { margin: 36px 0; }
}


/* 表・リスト・ボタンの見え方（2026-08-28 追加）

   実測の裏づけ
   表     572個 / 172記事。うち仕様表(th.label)が415、一覧表(thead)が88
   リスト 373個 / 253記事。ul 359 / ol 14。277個がリンクを含む
   ボタン 3個 / 1記事（sauna-hat のみ）。ここは新しく決める

   スマホで4列表の高さ 3,687px（4.5画面）だったものを 1,863px にする。
   戻すときは、この行から下をすべて削除する。 */

/* ---- 表：共通 ---------------------------------------------------- */
.entry-body table { border-collapse: collapse; width: 100%; }
.entry-body th,
.entry-body td { border: 1px solid #e2e6e3; }

/* ---- 表(1) 仕様表。1つのものの「項目と値」。製品ページ415個 ---- */
/* 見分け方: th.label + td.value。thead を持たない */
.entry-body th.label {
  background: #f4f6f5;
  font-weight: 700;
  text-align: left;
  color: #33403a;
}
.entry-body td.value { background: #fff; }
@media (min-width: 992px) {
  /* PCは幅に余裕がある。項目名を32%に固定して、値を広く取る */
  .entry-body th.label { width: 32%; }
}

/* ---- 表(2) 一覧表。複数の行を見比べる。補助金88個 -------------- */
/* 見分け方: thead を持つ */
.entry-body table thead th {
  background: #eaf0ed;
  font-weight: 700;
  text-align: left;
  color: #24312b;
  border-bottom: 2px solid #016f46;
}
.entry-body table tbody tr:nth-child(even) > td { background: #fafbfa; }

/* スマホ。3列以上は潰さずに横スクロールさせる。
   figure に overflow-x:auto は元からあるが、表が width:100% なので
   溢れずに潰れていた。min-width を与えて初めてスクロールになる。 */
@media (max-width: 991px) {
  .entry-body figure.wp-block-table:has(thead th:nth-child(3)),
  .entry-body div.wp-block-table:has(thead th:nth-child(3)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 端に影を出して「まだ続きがある」ことを知らせる。JSは使わない */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.13), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .entry-body table:has(thead th:nth-child(4)) { min-width: 640px; }
  .entry-body table:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) { min-width: 520px; }
  /* 1列目は自治体名など。折り返すと1文字ずつ縦に並んで行が190pxになる */
  .entry-body table:has(thead th:nth-child(3)) thead th:first-child,
  .entry-body table:has(thead th:nth-child(3)) tbody td:first-child { white-space: nowrap; }
}

/* ---- リスト ------------------------------------------------------ */
.entry-body ul li::marker { color: #016f46; }
.entry-body ol li::marker { color: #016f46; font-weight: 700; }

/* 全部がリンクの一覧（関連ページへの導線）。点を消して行を広く取る */
.entry-body ul.wb-links { list-style: none; padding-left: 0; }
.entry-body ul.wb-links > li { border-bottom: 1px solid #eceeed; margin: 0; padding: 12px 0; }
.entry-body ul.wb-links > li:last-child { border-bottom: none; }
.entry-body ul.wb-links > li > a { text-decoration: none; font-weight: 700; }
.entry-body ul.wb-links > li > a::before { content: "→ "; color: #016f46; }
.entry-body ul.wb-links > li > a:hover { text-decoration: underline; }

/* ---- ボタン。役割で3つに分ける -------------------------------- */
.entry-body a.wb-btn {
  display: block;
  margin: 0 0 12px;
  padding: 15px 20px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  border: 2px solid #016f46;
  transition: background-color .15s, color .15s;
}
/* 決定。買う・申し込む・問い合わせる。**1つの節に1つまで** */
.entry-body a.wb-btn--do { background: #016f46; color: #fff; }
.entry-body a.wb-btn--do:hover { background: #015537; }
/* 参考。公式サイト・出典を確かめる。**いくつあってもよい** */
.entry-body a.wb-btn--ref { background: #fff; color: #016f46; }
.entry-body a.wb-btn--ref:hover { background: #f1f7f4; }
/* 回遊。サイト内の別記事へ。**本文の流れを止めない** */
.entry-body a.wb-btn--go {
  display: inline-block;
  border: none;
  padding: 6px 0;
  text-align: left;
  background: none;
  color: #016f46;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.entry-body a.wb-btn--go::before { content: "→ "; }

/* ボタンの下に置く小さな注記（広告表示・確認日など） */
.entry-body .wb-btn-note {
  margin: -4px 0 24px;
  font-size: .82em;
  color: #6b736f;
  line-height: 1.7;
}

/* ---- 広告表示。アフィリエイトを含むページの先頭に置く（CLAUDE.md ルール5） ---- */
.entry-body .wb-disclosure {
  margin: 0 0 28px;
  padding: 10px 14px;
  background: #f6f7f6;
  border-left: 3px solid #c9d2cd;
  font-size: .85em;
  line-height: 1.8;
  color: #5c6661;
}

/* ---- 製品カード。名前・仕様・決定ボタンを1つにまとめる ---- */
.entry-body .wb-card { margin: 0 0 32px; }
.entry-body .wb-card__name {
  background: #016f46;
  color: #fff;
  font-weight: 700;
  padding: .7em 1.2em;
  border-radius: 4px 4px 0 0;
  line-height: 1.5;
}
.entry-body .wb-card__body {
  border: 2px solid #016f46;
  border-top: none;
  background: #fff;
  padding: 1.2em 1.4em;
  border-radius: 0 0 4px 4px;
}
.entry-body .wb-card__body > ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.entry-body .wb-card__body > ul > li { margin-bottom: .4em; line-height: 1.8; }
.entry-body .wb-card__body > .wb-btn { margin-bottom: 0; }
/* A8の1x1計測画像。inline のままだと行ボックスができて、カードの下に29pxの空きが出る */
.entry-body .wb-card__body > img { display: block; }

/* ============================================================
   記事一覧（トップ・カテゴリ・タグ・検索）
   2026-08-29 高林さん「トップとカテゴリ一覧の見やすさ改善」

   直した4つ
   1 タイトルが font-weight:400 だった。一覧の主役がいちばん細い字だった
   2 抜粋が16px/1.5で、タイトル20pxとほぼ同じ大きさ。主従が付いていない
   3 メタが rgb(33,37,41) のほぼ黒。日付と著者が本文と同じ濃さで前に出ていた
   4 カードの間が0で、区切り線が rgba(0,0,0,.05)。9件が地続きに見えていた

   .postList の中だけに当てる。関連記事とサイドバーの .media には触らない
   ============================================================ */

/* 1件ぶんの箱。余白と区切りをはっきりさせる */
.postList article.media {
  padding: 1.7rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.postList article.media:first-of-type { border-top: 1px solid rgba(0, 0, 0, .09); }

/* タイトル。一覧でいちばん先に目に入るべきもの */
.postList article.media .entry-title {
  font-size: 21px;
  line-height: 1.55;
  font-weight: 700;
  margin: 0 0 .45em;
}
.postList article.media .entry-title a {
  color: #1f2328;
  text-decoration: none;
}
.postList article.media .entry-title a:hover {
  color: #016f46;
  text-decoration: underline;
}

/* 抜粋。タイトルの次に読むものなので、一段落とす */
.postList article.media .media-body_excerpt,
.postList article.media .media-body_excerpt p {
  font-size: 15px;
  line-height: 1.85;
  color: #5a615d;
  margin: 0;
}
/* 抜粋はまるごとリンク（a要素）なので、そのままだと一段落全体に下線が出る
   このCSSプラグインはコメントの中でもHTMLタグを取り除く。山かっこで書かないこと */
.postList article.media .media-body_excerpt:hover { text-decoration: none; }

/* メタ。日付は「いつの情報か」を伝える役。タイトルより前に出ない濃さにする */
.postList article.media .entry-meta { margin-bottom: .5em; }
.postList article.media .entry-meta_items,
.postList article.media .entry-meta_items.published a { color: #7a827d; }
/* 日付。並び順が「最終更新日」なのに、出ているのは「公開日」だけだった
   2026-08-29 高林さん判断（A案）「手を入れ続けているのを見せたい」
   テーマが .media .entry-meta_updated を display:none にしている */
.postList article.media .entry-meta_updated {
  display: inline;
  /* テーマの文言は「/ 最終更新日時 : 」と長く、スマホで2行になる。
     親の字を0にして消し、ラベルと日付にだけ大きさを戻す。
     文言はHTMLの中にあるので、CSSから消せるのはこの手だけ */
  font-size: 0;
  margin-left: .8em;
}
.postList article.media .entry-meta_updated::before { content: "更新 "; font-size: 12px; }
.postList article.media .entry-meta_updated .updated { font-size: 12px; }

/* どちらの日付か分かるようにする。
   テーマのカレンダーアイコンは出ていない（v4/v5/v6のみ対応で、サイトは fa_v7） */
.postList article.media .entry-meta_items.published::before { content: "公開 "; }

/* 著者は全行「WOODY BIOMASS」。9回並べても情報が増えない */
.postList article.media .entry-meta_items_author { display: none; }

/* サムネイル。白1pxの枠が付いていて、輪郭が出ていなかった */
.postList article.media .postList_thumbnail img {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .08);
}

/* スマホ。本文カラムが狭いぶん、1段下げる */
@media (max-width: 600px) {
  .postList article.media { padding: 1.3rem 0; }
  .postList article.media .entry-title { font-size: 18px; line-height: 1.5; }
  .postList article.media .media-body_excerpt,
  .postList article.media .media-body_excerpt p { font-size: 14px; line-height: 1.8; }
  .postList article.media .entry-meta { margin-bottom: .4em; }
}

/* カテゴリ一覧の頭に置く導入文（2026-08-29 新設）
   Lightning はカテゴリの説明文を出力しないので、子テーマの functions.php で出している。
   一覧の1件目より前に置くので、カードの区切り線とぶつからない余白を取る */
.wb-archive-lead {
  margin: 0 0 1.7rem;
  padding: 1.1rem 1.3rem;
  background: #f6faf8;
  border-left: 3px solid #016f46;
  border-radius: 0 6px 6px 0;
}
.wb-archive-lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: #3a403c;
}
.wb-archive-lead p + p { margin-top: .8em; }
.wb-archive-lead a { color: #016f46; text-decoration: underline; }

@media (max-width: 600px) {
  .wb-archive-lead { padding: .95rem 1rem; margin-bottom: 1.2rem; }
  .wb-archive-lead p { font-size: 14px; line-height: 1.9; }
}

/* ---- 事例記事の末尾に置くクレジット（2026-08-29 新設） ----
   誰が工事をして、誰が取材したのかを示す。
   記事の本文は施工側の言葉で書かれた当時の記録なので、
   立場のちがいを末尾で明示する。 */
.entry-body .wb-credit {
  margin: 2.4em 0 0;
  padding: 1em 1.2em;
  background: #f6faf8;
  border-left: 3px solid #016f46;
  border-radius: 0 6px 6px 0;
}
.entry-body .wb-credit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #3a403c;
}
.entry-body .wb-credit a { color: #016f46; text-decoration: underline; }

@media (max-width: 600px) {
  .entry-body .wb-credit { padding: .9em 1em; }
  .entry-body .wb-credit p { font-size: 14px; }
}