/*
 * 記事本文（ブログ・お知らせ）の見た目の補正。
 *
 * テーマ本体より後に読み込むこと。テーマ側の指定を上書きするため、
 * 順序が逆だと効かない。
 *
 * ------------------------------------------------------------------
 * スコープの決まり（重要）
 * ------------------------------------------------------------------
 * 本文の箱 `.ckBox` は **記事だけのものではない**。
 * /about/ /works/ /recruit/ /recruit-setsubi/ /recruit-ishosekkei/
 * /contact/ /thanks/ /about/kokuji/ /404.html も同じ `.ckBox` を使っている。
 * そのため `.ckBox { ... }` と素で書くと固定ページ全部の字面が変わる。
 *
 * 記事ページ（templates/blog-detail.html・news-detail.html）だけが
 * `<body class="... single single-blog ...">` を持つので、
 * **本文組みの指定は必ず `body.single-blog` で囲む**。
 * 固定ページは `wp-singular ... page`、一覧は `archive` で、`single-blog` を持たない。
 *
 * リンクの色と下線（このファイルの後半）は記事・固定ページ共通で効かせたいので
 * `body.single-blog` を付けていない。ここは意図的な差。
 */

/* ==================================================================
 * 1. 本文の書体・字送り
 * ==================================================================
 *
 * 12,000〜16,000字の情報記事を読み切ってもらうための組み。
 *
 * 【書体】本文だけゴシック（端末内蔵フォント）にする。
 *   見出し・記事タイトル・ナビ・トップページは明朝（Shippori Mincho）のまま残すので、
 *   静かな建築事務所サイトという見た目は保てる。
 *   明朝は画数の多い漢字が小さい字面で潰れやすく、長文の本文には向かない。
 *   端末内蔵フォントを使うので **Web フォントの追加ダウンロードは 0 バイト**。
 *   表示が遅くなったり、後から字が入れ替わってガタつくこともない。
 *
 * 【字間】テーマは body 0.13em / p 0.08em。日本語の本文としては開きすぎで、
 *   一文字ずつ離れて見えるので語のまとまりが読み取りにくい。0.02em に詰める。
 *
 * 【行間】テーマは body 2.4em / p 1.8。1.9 に揃える。
 *   リポジトリの表記ルールは 2.0 と書いているが、ここでは 1.9 にした。
 *   行間 2.0（＝行の隙間 17px）に対して段落の余白を 1.6rem（16px）にすると
 *   **行の隙間と段落の隙間がほぼ同じ**になり、段落の切れ目が見えなくなる。
 *   本文 1.9（隙間 15.3px）＋段落下 2.1rem（21px）＝段落の隙間 36px で、
 *   行間の約 2.4 倍。段落が塊として読める。
 *
 * 【word-break】テーマの `p { word-break: break-all }` は
 *   英単語・URL・数値を途中で断ち切る。情報記事では不可なので解除し、
 *   はみ出しそうなときだけ折る `overflow-wrap: break-word` に置き換える。
 */
body.single-blog .ckBox {
    /* 本文の幅は本文の箱（1000px）いっぱいに使う。
       以前は 1行 35〜45 字に収める狙いで max-width: 70rem を掛けていたが、
       記事タイトルの黒帯・目次の囲み・見出しの下線がいずれも 1000px なので、
       段落だけ 700px で折り返すと「途中で切れている」ようにしか見えなかった
       （画像のない導入部でとくに顕著）。読みやすさより、
       ブロックの右端が揃っていることを優先する。 */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
        "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.02em;
    word-break: normal;
    overflow-wrap: break-word;

    /* 記事タイトルの閉じタグ崩れ（下の 6 章）に巻き込まれても
       地色と文字色が反転しないように明示しておく */
    color: #000;
    background: #fff;
}

body.single-blog .ckBox p {
    font-size: 1.7rem;
    line-height: 1.9;
    letter-spacing: 0.02em;
    margin: 0 0 2.1rem;
    word-break: normal;
    overflow-wrap: break-word;
}

body.single-blog .ckBox p:last-child {
    margin-bottom: 0;
}

/* 強調は太らせる。ゴシックなので bold が素直に効く */
body.single-blog .ckBox strong,
body.single-blog .ckBox b {
    font-weight: 700;
}

/* ==================================================================
 * 2. 見出しの階層
 * ==================================================================
 *
 * テーマの状態は h2 も h3 も h4 も 2.4rem（SP 2rem）で、大小の差がない。
 * しかも h3 は「2px の黒枠で囲った角丸の箱」で、
 * h2（薄いグレーの地色＋左の黒罫）より装飾が強い。上下が逆に見える。
 *
 * 大きさと装飾の強さを揃えて、上から順に弱くする。
 *   h2 = 27px  地色つきの帯 ＋ 左の黒罫（節）
 *   h3 = 21px  下の実線（項）
 *   h4 = 18.5px 下の点線（小見出し）
 *
 * 見出しは明朝のまま。ここが本文と書体で切り替わるので、
 * 見出しと本文の切れ目がより分かりやすくなる。
 */
body.single-blog .ckBox h2,
body.single-blog .ckBox h3,
body.single-blog .ckBox h4,
body.single-blog .ckBox h5,
body.single-blog .ckBox .tempTitle_2,
body.single-blog .ckBox .tempTitle_3,
body.single-blog .ckBox .tempTitle_4 {
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.04em;
    word-break: normal;
    overflow-wrap: break-word;
}

body.single-blog .ckBox h2,
body.single-blog .ckBox .tempTitle_2 {
    font-size: 2.7rem;
    font-weight: 600 !important;
    line-height: 1.5;
    background: #f4f4f4;
    border-left: 4px solid #000;
    padding: 0.7em 0.9em;
    /* 上の余白は直前の .wp-block-spacer（7 章）が持つ */
    margin: 0 0 2.6rem !important;
}

body.single-blog .ckBox h3,
body.single-blog .ckBox .tempTitle_3 {
    font-size: 2.1rem;
    font-weight: 600 !important;
    line-height: 1.55;
    /* 角丸の黒枠をやめ、下罫だけにする */
    background: none;
    border: none;
    border-bottom: 1px solid #111;
    border-radius: 0;
    padding: 0 0 0.5em;
    margin: 4rem 0 1.8rem !important;
}

body.single-blog .ckBox h4,
body.single-blog .ckBox .tempTitle_4 {
    font-size: 1.85rem;
    font-weight: 600 !important;
    line-height: 1.6;
    border-bottom: 1px dotted #999;
    padding: 0 0 0.45em;
    margin: 3.4rem 0 1.6rem !important;
}

/* ------------------------------------------------------------------
 * 2-2. 段落で書かれた小見出し（.leadTitle）
 * ------------------------------------------------------------------
 * 「基本構想」「基本計画」のように、Sanity の本文で <p> に短い語だけを
 * 書いて小見出しの代わりにしている箇所がある。素のままだと本文と同じ字面で、
 * 見出しに見えない。`scripts/build.mjs` の isLeadTitle() が拾って
 * このクラスを付けている（判定条件はそちらのコメントを参照）。
 *
 * h4 より一段弱い扱いにする。字は本文と同じ大きさのまま、
 * 先頭の黒い四角と細い下線だけで「ここから話が変わる」と示す。
 * h4（点線・1.85rem）と競合しないよう、大きくはしない。
 */
body.single-blog .ckBox p.leadTitle {
    font-family: "Shippori Mincho", serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #000;
    border-bottom: 1px solid #d8d8d8;
    padding: 0 0 0.4em;
    margin: 3rem 0 1.4rem;
}

/* 先頭の黒い四角。文字ではなく擬似要素の箱にしてあるので、
   読み上げに「くろしかく」と入らず、書体によって大きさが化けることもない */
body.single-blog .ckBox p.leadTitle::before {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.6em;
    vertical-align: 0.08em;
    background: #000;
}

/* 節や画像ブロックの先頭に来たときは上の余白を詰める */
body.single-blog .ckBox > p.leadTitle:first-child,
body.single-blog .ckBox .rBox > p.leadTitle:first-child {
    margin-top: 0;
}

/* 節の頭の見出しが箱の一番上に来たときは、上の余白を作らない */
body.single-blog .ckBox > h2:first-child,
body.single-blog .ckBox > h3:first-child,
body.single-blog .ckBox > h4:first-child {
    margin-top: 0 !important;
}

/* ==================================================================
 * 3. 箇条書き
 * ==================================================================
 * テーマは項目ごとに点線の区切りを引く。線は残すが色を薄くし、
 * 本文と同じ字送りに揃える。
 */
/* 本文の箇条書きだけを対象にする。目次（.articleTOC の ol）を巻き込まないよう、
   `ul` `ol` と素で書かずに、生成される class を名指しする */
body.single-blog .ckBox ul.baseUL,
body.single-blog .ckBox ol.baseOL {
    margin-bottom: 2.4rem !important;
}

body.single-blog .ckBox li {
    font-size: 1.7rem;
    line-height: 1.9;
    letter-spacing: 0.02em;
    word-break: normal;
    overflow-wrap: break-word;
}

body.single-blog .ckBox ul.baseUL > li,
body.single-blog .ckBox ol.baseOL > li {
    border-bottom-color: #e3e3e3;
    padding: 0.5em 0 0.5em 1.7em;
}

/* 「ラベル: 説明文」のラベル部分。
   scripts/build.mjs の splitTermLabel() が付ける。
   1行に連ねたままだと、**SP で折り返してラベルと説明文が1本の帯になり、
   どこまでがラベルなのか判別できなくなる**（PC では区切って見えるので
   見落としやすい）。ブロックにして改行し、小さな見出しとして立てる。 */
body.single-blog .ckBox .term-label {
    display: block;
    margin-bottom: 0.35rem;
    line-height: 1.7;
    font-weight: 700;
}

/* ==================================================================
 * 4. 図版・キャプション・目次
 * ==================================================================
 * 画像と画像＋本文の2段組みは本文の最大幅で絞らない（写真が小さくなるため）。
 */
body.single-blog .ckBox figure {
    max-width: 100%;
}

body.single-blog .ckBox figcaption,
body.single-blog .ckBox .box4_6 > div figcaption {
    font-size: 1.4rem !important;
    line-height: 1.8 !important;
    letter-spacing: 0.02em;
    color: #555;
    margin-top: 0.8rem;
}

/* 本文冒頭の目次。囲みの箱なので幅は絞らず、字送りだけ本文に合わせる */
body.single-blog .articleTOC {
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}

/* 目次の行は本文の字送りに引っ張られないよう、ここで打ち直す
   （`.ckBox li` の指定より後・同じ詳細度なのでこちらが勝つ） */
body.single-blog .articleTOC li {
    font-size: 1.6rem;
    line-height: 1.85;
    letter-spacing: 0.02em;
    margin-bottom: 0.8rem;
}

body.single-blog .articleTOC li:last-child {
    margin-bottom: 0;
}

/* ==================================================================
 * 5. 記事末尾の著者情報
 * ==================================================================
 * `.ckBox` の外にあるので 1〜4 章の指定が届かない。本文と同じ書体に揃える。
 * インラインの <style id="blog-detail-css"> はこのファイルより後ろに出るので、
 * body から書いて詳細度で勝たせている。
 */
body.single-blog .authorBox {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
        "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif;
    letter-spacing: 0.02em;
}

body.single-blog .authorBox .authorBox_text {
    font-size: 1.5rem;
    line-height: 1.9;
}

body.single-blog .authorBox .authorBox_meta {
    font-size: 1.4rem;
    line-height: 1.8;
}

/* ==================================================================
 * 6. 記事タイトルの閉じタグ崩れに対する保険
 * ==================================================================
 * `templates/blog-detail.html` / `news-detail.html` は
 *
 *     <h1 class="pageTitle">{{TITLE}}</p>
 *
 * と、h1 を </p> で閉じている（2026-08-13 時点の main。公開中のサイトは正しく
 * </h1> なので、この状態はまだ本番に出ていない）。
 * ブラウザは h1 が閉じていないものとして解釈するので、
 * **本文・著者情報・ボタンがまるごと h1 の中に入る**。結果として
 *   ・本文が h1 の font-size 3rem（＝30px）を継いで極端に大きくなる
 *   ・`.pageTitle` の `color:#fff; background:#000` を継いで黒地・白抜きになる
 *   ・`padding:0.5em 1em` の分だけ本文が内側に押し込まれる
 * という状態になる。「文字が大きすぎて見られない」の直接の原因はこれ。
 *
 * **本筋の直しはテンプレート側で </p> を </h1> に戻すこと。** ここは
 * それが直るまでの保険。`:has(.ckBox)` は本文が h1 の中にある場合しか
 * 一致しないので、テンプレートが直れば自動的に無効になり、
 * 黒帯のタイトルがそのまま元に戻る。
 */
body.single-blog h1.pageTitle:has(.ckBox) {
    /* 黒帯・白抜き・内側の余白をやめて、素の見出しに戻す。
       h1 の下罫や margin-bottom は「記事全体の下」に付いてしまい
       タイトルの区切りにはならないので使わない */
    background: none;
    color: #000;
    padding: 0;
    margin-bottom: 0 !important;
}

/* タイトルと本文の間の余白は、本文の側から取る */
body.single-blog h1.pageTitle:has(.ckBox) > .ckBox {
    margin-top: 4rem;
}

/* ==================================================================
 * 7. ブロック間の余白
 * ==================================================================
 * 記事本文は節の前に `<div class="wp-block-spacer" style="height:100px">` が入る。
 * インラインの height を打ち消して、節（h2）の前 72px・項（h3）の前 40px という
 * 上下関係にする。見出しの上を下より広く取るのは、見出しが
 * 「次の文の頭」として読めるようにするため。
 */
body.single-blog .ckBox .wp-block-spacer {
    height: 7.2rem !important;
}

body.single-blog .ckBox .box4_6 {
    margin-bottom: 4rem !important;
}

/* ==================================================================
 * 7-2. 画像＋本文（.box4_6）は PC で画像を右に回り込ませる
 * ==================================================================
 * もとは `display:flex` の2段組み（左38%が画像・右58%が本文）だった。
 * flex は左右の段の高さが揃うため、**本文が先に尽きると画像の下が
 * まるごと空白のまま残り、次の段落は画像の下から始まる**。
 * 画像が9枚ある記事ではこの空白だけで数千 px になり、
 * 「読むところが無いのに延々スクロールする」ページになっていた。
 *
 * そこで PC（901px 以上）では2段組みをやめ、**画像を `float:right`**
 * にする。本文は左から始まり、画像の高さを越えたぶんは
 * **画像の下にも回り込む**。フロートは親（.box4_6）からはみ出すので、
 * imageText ブロックの次に来る段落も同じ画像の左〜下へ流れ込む。
 * ＝ 依頼の「画像の下の空間も使って LP を短く」がそのまま実現できる。
 *
 * **HTML は変えていない（CSS だけ）。** 生成物を作り直さずに済み、
 * 万一この節を消せば元の2段組みへ完全に戻せる。
 *
 * ------------------------------------------------------------------
 * 回り込みで壊れるものと、その防ぎ方
 * ------------------------------------------------------------------
 * フロートが避けられるのは「行ボックス」だけで、**ブロックの背景や
 * 罫線は避けてくれない**。何もしないと h2 の地色帯や箇条書きの区切り線が
 * 画像の下に潜り込む。対処は2通りで、性質によって使い分けている。
 *
 *   (1) `clear: right` … 画像の下まで送る。
 *       節の切れ目（h2 とその前のスペーサー）、全幅の写真、
 *       次の画像ブロック、目次、ボタンなど「幅いっぱいで見せたいもの」。
 *   (2) `display: flow-root` … その場に留まったまま、
 *       **画像に重ならない幅へ自動的に縮む**（新しいブロック整形文脈を作ると
 *       ボーダーボックスがフロートのマージンボックスと重なれない、という規則）。
 *       h3 / h4 / 箇条書きのように「画像の横に置いたままでよいが、
 *       罫線が画像に潜ってはいけないもの」に使う。`clear` と違って
 *       余白が生まれないので、ページを縮める目的に合う。
 *
 * imageText の本文（.rBox）の中にも h3 と箇条書きが入るため、
 * (2) は `.ckBox` の直下だけでなく子孫全体に効かせている。
 *
 * ------------------------------------------------------------------
 * 回り込みを黙って殺していた 2 つの原因（2026-08-13 実測で特定）
 * ------------------------------------------------------------------
 * `float:right` を当てただけでは **画像の下の空白は埋まらなかった**。
 * 原因は 2 つあり、どちらもテーマ CSS の一行だった。
 *
 * (A) テーマの `.box4_6 { align-content: stretch }`
 *     Chrome 123 以降 `align-content` は **フレックスだけでなく通常の
 *     ブロックコンテナにも効く**。値が `normal` 以外だと、その要素は
 *     **ブロック整形文脈（BFC）になり、中のフロートを丸ごと抱え込む**。
 *     結果 `.box4_6` の高さが画像の下端まで伸び、後続の要素は
 *     `clear` の有無に関わらず必ず画像の下から始まっていた。
 *     `display` は `block` と表示されるため、DevTools を見ても原因が分からない。
 *     `align-content: normal` に戻すとフロートが親からはみ出し、
 *     ようやく後続の段落が画像の横〜下へ流れ込む。
 *
 * (B) テーマの `ul.baseUL { width: 100% !important }`
 *     `display:flow-root` の要素は「フロートに重ならない幅へ縮む」が、
 *     **幅が明示されていると縮めないので、代わりに画像の下へ落とされる**。
 *     箇条書きだけが画像の横を素通りして下に飛び、その手前に
 *     400px 前後の空白が残っていた（shop-design-guide で実測）。
 *     `width: auto !important` で返すと 584px へ縮んで画像の横に収まる。
 */
@media screen and (min-width: 901px) {
    /* 2段組みを解体する。テーマの width は !important 付きなので同じく !important で返す */
    body.single-blog .ckBox .box4_6 {
        display: block;
        /* (A) テーマの align-content:stretch を打ち消す。
           これが無いと .box4_6 が BFC になり、フロートを抱え込んで
           後続の本文が画像の横に来られない（上のコメント参照）。 */
        align-content: normal;
        /* 本文が続きとして流れ込むので、段落と同じ行送りに合わせる
           （もとの 4rem は「画像ブロックが独立した図版」だった頃の値） */
        margin-bottom: 2.1rem !important;
    }

    body.single-blog .ckBox .box4_6 > .lBox {
        float: right;
        width: 38% !important;
        /* 下マージンは 1rem までしか取らない。
           フロートが場所を占めるのは「枠 + マージン」までなので、
           下マージンの帯に少しでも重なった要素は幅を縮められる。
           `display: flow-root` の見出しと箇条書きは「縮む」側なので、
           画像より下にあっても 3px 重なっただけで 416px 細くなり、
           画像の下に高さ 500px の空白が残る（2rem のときに実測で2件）。
           1rem なら該当が0件になり、記事の高さも 323px 減る。
           画像の直下へ回り込む行との間隔は行送り（1.9）が受け持つ。 */
        margin: 0.4rem 0 1rem 3.6rem !important;
    }

    /* 段落・箇条書きに max-width を掛けていた頃は、画像の右に 380px を
       取られた状態で「700px で折り返す」＝画像の左端で切れる、という
       見え方になっていた。いまは本文の幅制限そのものを外したので、
       画像の下へ回り込んだ行はそのまま本文の箱（1000px）いっぱいまで伸びる。
       ここで個別に max-width を打ち消す必要はない。 */

    body.single-blog .ckBox .box4_6 > .rBox {
        /* 58% をやめて全幅にする。行は画像を避け、画像の下では全幅に戻る */
        width: auto !important;
        float: none;
    }

    /* (1) 画像の下まで送るもの
       節の切れ目（h2 とその直前のスペーサー）だけは画像の下へ送る。
       h2 は幅いっぱいの地色帯なので、画像の横に置くと帯が細切れに見え、
       節の切れ目として読めなくなる。スペーサーに clear を残しているのは
       h2 の上の 72px を確保するため（外すと h2 の帯が画像の下端に接する）。
       全11記事での実測では、外して稼げるのは合計 88px しかない。 */
    body.single-blog .ckBox > .box4_6,
    body.single-blog .ckBox > figure,
    body.single-blog .ckBox > .wp-block-spacer,
    body.single-blog .ckBox > h2,
    body.single-blog .ckBox > .tempTitle_2,
    body.single-blog .ckBox > table,
    body.single-blog .ckBox > .btnBox {
        clear: right;
    }

    /* (2) その場で幅だけ縮むもの（.rBox の中にも効かせる） */
    body.single-blog .ckBox h3,
    body.single-blog .ckBox h4,
    body.single-blog .ckBox h5,
    body.single-blog .ckBox .tempTitle_3,
    body.single-blog .ckBox .tempTitle_4,
    body.single-blog .ckBox p.leadTitle,
    body.single-blog .ckBox ul.baseUL,
    body.single-blog .ckBox ol.baseOL,
    body.single-blog .articleTOC {
        display: flow-root;
    }

    /* 目次は「画像の下まで送るもの」から「その場で縮むもの」へ移した。
       目次の直前は導入文（.rBox）で、記事によっては 200px 程度しかない。
       目次を画像の下へ送っていたため、1ページ目の画像の横に
       300〜400px の空白が残っていた（依頼者の指摘そのもの）。
       囲み枠は flow-root で画像に重ならない幅へ縮むので、
       枠線が写真に潜り込むことはない。 */
    body.single-blog .articleTOC {
        clear: none;
    }

    /* (B) テーマの `ul.baseUL { width:100% !important }` を戻す。
       幅が明示されていると flow-root が縮めず、箇条書きだけが
       画像の下へ落ちて手前に大きな空白が残る（上のコメント参照）。 */
    body.single-blog .ckBox ul.baseUL,
    body.single-blog .ckBox ol.baseOL {
        width: auto !important;
    }

    /* フロートが本文の箱からはみ出したまま記事が終わると、
       著者情報や関連記事に画像が重なる。最後に必ず解除する */
    body.single-blog .ckBox::after {
        content: '';
        display: block;
        clear: both;
    }
}

/* ==================================================================
 * 8. タブレット幅（〜900px）では画像と本文の2段組みを縦積みにする
 * ==================================================================
 * テーマは 765px 以下でしか縦積みにしない。766〜900px では本文が
 * 幅 58%（768px 幅なら約 400px ＝ 1行 23 字）に潰れて読みにくい。
 * 縦積みにすると本文が全幅（1行 40 字前後）で読める。
 * 7-2 の回り込みは 901px 以上にしか掛けていないので、ここは素の縦積みのまま。
 */
@media screen and (max-width: 900px) {
    body.single-blog .ckBox .box4_6 > .lBox,
    body.single-blog .ckBox .box4_6 > .rBox {
        width: 100% !important;
    }

    body.single-blog .ckBox .box4_6 > div {
        margin-bottom: 2.5rem;
    }

    body.single-blog .ckBox .box4_6 > div:last-child {
        margin-bottom: 0;
    }
}

/* ==================================================================
 * 9. スマートフォン（〜765px）
 * ==================================================================
 * テーマの本文は 14px。情報記事の本文としては小さいので 16px にする。
 */
@media screen and (max-width: 765px) {
    body.single-blog .ckBox {
        font-size: 1.6rem;
    }

    body.single-blog .ckBox p {
        font-size: 1.6rem;
        margin-bottom: 1.9rem;
    }

    body.single-blog .ckBox li {
        font-size: 1.6rem;
    }

    body.single-blog .ckBox h2,
    body.single-blog .ckBox .tempTitle_2 {
        font-size: 2.2rem;
        padding: 0.6em 0.8em;
        margin-bottom: 2rem !important;
    }

    body.single-blog .ckBox h3,
    body.single-blog .ckBox .tempTitle_3 {
        font-size: 1.9rem;
        margin: 3rem 0 1.4rem !important;
    }

    body.single-blog .ckBox h4,
    body.single-blog .ckBox .tempTitle_4 {
        font-size: 1.7rem;
        margin: 2.6rem 0 1.3rem !important;
    }

    body.single-blog .ckBox p.leadTitle {
        font-size: 1.65rem;
        margin: 2.4rem 0 1.2rem;
    }

    body.single-blog .ckBox .wp-block-spacer {
        height: 4rem !important;
    }

    body.single-blog .ckBox .box4_6 {
        margin-bottom: 3rem !important;
    }

    body.single-blog .articleTOC,
    body.single-blog .articleTOC li {
        font-size: 1.5rem;
    }

    body.single-blog .authorBox .authorBox_text {
        font-size: 1.5rem;
    }
}

/* ==================================================================
 * 10. 本文中のリンク（記事・固定ページ共通）
 * ==================================================================
 * テーマは本文リンクに色も下線も与えていないため、地の文と完全に同じ見た目になり
 * リンクだと気づかれない。色と下線を明示する。
 * 依頼者の明示的な要望なので、色（#0b57a4）と下線は変えないこと。
 *
 * ボタン（.btnBox）は意図された見た目があるので除外する。
 * 画像を包むリンクも下線が浮くので除外する。
 */
.ckBox a {
    color: #0b57a4;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s;
}

.ckBox a:hover,
.ckBox a:focus-visible {
    color: #083f77;
    text-decoration-thickness: 2px;
}

/* 画像リンクとボタンには下線・色変更を持ち込まない */
.ckBox .btnBox a,
.ckBox .btnBox a:hover,
.ckBox .btnBox a:focus-visible {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: initial;
}

.ckBox a:has(img) {
    text-decoration: none;
}

/* 目次のリンクは一覧として並ぶので、下線は出さず色だけで示す */
.ckBox .tocBox a {
    text-decoration: none;
}

.ckBox .tocBox a:hover,
.ckBox .tocBox a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}