@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =========================================================================
   ECAI LABO — 段ボール（クラフト紙 + 墨 + 送り状）  2026-08-07
   ロールバック: この区切りコメントから最終行までを削除すれば元に戻る。
   バックアップ: assets/backup-20260806/20260806_cocoon-child_style.css.bak

   ------------------------------------------------------------------------
   ★これは 2026-08-06 のネイビー版(P0/P1)の置き換えである
   ------------------------------------------------------------------------
   旧配色は ANA のブランドカラー参照で、ECとの関連が無かった。
   段ボールは EC実務者が毎日触る物質そのもので、`.ecai-barcode` が
   「送り状のバーコード」という本物の文脈を得る。
   P0/P1 で入れた構造（Cocoon見出し打ち消し・スコープ限定・詳細度）は
   そのまま生きている。差し替わったのは色と、面の塗り分けの範囲。

   ------------------------------------------------------------------------
   ★実測の前提（2026-08-07 / getComputedStyle。推測ではない）
   ------------------------------------------------------------------------
   記事ページで「実際に面を塗っている要素」は以下だけだった:
     body                        rgb(244,245,247)  ← 外周の薄グレー
     #header-container           rgb(255,255,255)  1268x117
     #main.main                  rgb(255,255,255)  860x3148
     #sidebar.sidebar            rgb(255,255,255)  376x3148
     #footer.footer              rgb(255,255,255)  1268x114
     #sidebar h2.wp-block-heading rgb(245,246,247) ← ウィジェット見出し
     コメント欄の input/textarea/button  白 / #f9f9f9 / #f5f8fa
   ★これが全部。ここを塗れば記事ページは段ボールになる。
     旧版は paper が #ffffff だったため Cocoon の白い chrome と同化していて、
     塗る必要が無かった。クラフト茶にした瞬間、塗らないと継ぎ目が出る。

   ホーム(page-id-7)は `content-only` 指定で Cocoon の header/footer が
   実質不可視。ホームは固定ページ本文の <style> が自前で全部塗る。
   ------------------------------------------------------------------------
   ★メタファー: 「板」と「伝票」
     body      = クラフトの板（フルートの縞が入る）
     #main.main= 板に貼られた伝票／出荷ラベル（paper-raised・縞なし）
     #sidebar  = 板そのまま（透過）
   ========================================================================= */


/* ---- [C-0] トークン ------------------------------------------------------
   ★全48組み合わせのコントラストを実測済み（FAIL 0 / WARN 0）。
     検証: node assets/contrast.mjs   仕様: references/design-tokens.md
     トークンを1つでも変えたら再実行すること。茶は明度が中間に寄り AA を割りやすい。
   ★宣言順: plain :root → @media dark → [data-theme]
     @media は詳細度を上げないため、この順序でないと切替が壊れる。
   ★実測: このサイトの DOM に data-theme 属性は無い（切替UIが無い）。
     現在効いているのは prefers-color-scheme のみ。将来の切替UIに備えて
     html / body どちらに付いても効くよう両方を列挙しておく。
--------------------------------------------------------------------------- */
:root {
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ecai-paper: #17140F;
    --ecai-paper-raised: #221E17;
    /* ★ダークでは flute が paper より「明るい」。ライトと逆向きで正しい。
       暗い側に明度の余地が無く、縞を暗くすると 1.05:1 に潰れて存在しないのと
       同じになる（実測）。「夜の倉庫で庫内灯がフルートの山に当たる」と読み替える。 */
    --ecai-flute: #1D1914;
    --ecai-ink: #EFE4CE;
    --ecai-ink-soft: #BCAF95;
    --ecai-ink-faint: #968A73;
    --ecai-accent: #E8705B;
    --ecai-accent-ink: #17140F;
    --ecai-accent-2: #7FC0A2;
    --ecai-accent-2-ink: #17140F;
    --ecai-line: #4B4336;
    --ecai-line-strong: #736850;
  }
}

:root[data-theme="light"],
body[data-theme="light"] {
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  --ecai-paper: #17140F;
  --ecai-paper-raised: #221E17;
  --ecai-flute: #1D1914;
  --ecai-ink: #EFE4CE;
  --ecai-ink-soft: #BCAF95;
  --ecai-ink-faint: #968A73;
  --ecai-accent: #E8705B;
  --ecai-accent-ink: #17140F;
  --ecai-accent-2: #7FC0A2;
  --ecai-accent-2-ink: #17140F;
  --ecai-line: #4B4336;
  --ecai-line-strong: #736850;
}


/* ---- [C-0b] テクスチャ（画像を使わない）----------------------------------
   ★段ボールのテクスチャは必ず repeating-linear-gradient で作る。
     画像は LCP を悪化させ、かつ「AI生成の質感」に寄る。
   ★15px周期 は物理的な根拠がある: Bフルートのピッチが約4mm、
     96dpi で 4mm ≒ 15px。目分量ではなく実寸から決めている。

   ★★フルートは「ハードストップにしない」。ここだけ他のテクスチャと逆。
     最初はハードストップ（0 4px / 4px 15px）で実装したが、本番DOMに当てて
     目視したところ「段ボール」ではなく**縞の壁紙／すだれ**に見えた。
     振幅を 1.16:1 → 1.06:1 まで落としても直らない。
     大面積どうしの境界にはエッジ検出が強く効くため、
     **コントラスト比では「縞の見えすぎ」を検査できない**（比は 1.06 でも縞は出る）。
     → paper → flute → paper のなだらかなランプにする。これが波の陰影の実体で、
       輪郭が消えるので繊維の質感として読める。
     ★戻すときは必ず実機で見ること。数値だけ見て「AA通ってるから」で
       ハードストップに戻すと、また壁紙になる。

   ★transparent を混ぜないこと（補間で灰色のフリンジが出る）。実色で書く。
   ★カスタムプロパティに gradient を入れると、使用側の要素の var() で
     解決されるためダーク切替に自動追従する。
--------------------------------------------------------------------------- */
:root {
  --ecai-tex-flute: repeating-linear-gradient(
    90deg,
    var(--ecai-paper) 0,
    var(--ecai-flute) 7px,
    var(--ecai-paper) 15px
  );
  /* 板の切り口（フルートの断面）。セクションの区切りに敷く帯 */
  --ecai-tex-edge: repeating-linear-gradient(
    90deg,
    var(--ecai-line-strong) 0 1px,
    var(--ecai-paper) 1px 5px
  );
}


/* ---- [C-1] Cocoon chrome を持つページはライト値に pin（意図的）-----------
   ★条件は `body.content-only` の**有無**で判定する。ページIDでもURLでもない。

   `content-only` は Cocoon のページ設定「本文のみ(フルワイド)」が付けるクラスで、
   **「このページは Cocoon の header/footer/sidebar を出さない」そのもの**を意味する。
   実測（2026-08-07）:
     ホーム   body class に content-only / content-only-full-wide あり
     記事      content-only なし
   ダークが危険なのは「chromeのハードコード色が残るから」なので、
   chromeの有無こそが因果。`page-id-7` は同じ結果になる代理指標にすぎず、
   - ホームの固定ページIDが変わったら壊れる
   - 将来ホーム以外に「本文のみ」ページを作ったら手当てが要る
   - 逆にホームの設定を「本文のみ」から戻したら、chromeが出たままダークになる
   という3つのズレがある。`content-only` ならこの3つとも自動的に正しくなる。

   なぜ pin するのか（「壊れているから消した」ではない）:
     chrome の「面」はこの [C-2] でトークン化したので、以前より一歩近づいた。
     残っているのは chrome の「文字と部品」で、Cocoon 側にハードコードがある:
       - 本文既定色 #333、パンくず #999
       - SNSシェアボタンのブランド色（X=黒 / LINE=緑 / Pinterest=赤）
       - フォーム部品の枠色
     これらを監査せずにダークを開けると「暗い板に暗い文字」を再発させる。
   ★解除する条件: 上記のハードコード色を全て洗い出してトークン化したとき。
     そのときこのブロックだけ削除すればサイト全面でダークが効く。
--------------------------------------------------------------------------- */
body:not(.content-only) {
  color-scheme: light;
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}


/* ---- [C-2] 面の塗り分け（実測した7面だけを塗る）--------------------------
   ★ここはサイト全面に効く。旧版が `body.single-post` に限定していたのは
     「記事だけ暗くすると白い chrome が残る」ためで、chrome を塗らない前提の
     制約だった。今回は chrome ごと塗るので限定する理由が無い。
     カテゴリ・アーカイブ・検索結果も同じ板の上に乗る。
   ★ロールバックはこのファイル末尾までの一括削除で足りる（区切りコメント参照）。
   ★#container / #content には当てない（塗り重ねになり、面の階層が壊れる）。
--------------------------------------------------------------------------- */

/* 板。ページ全体の地。 */
body {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  color: var(--ecai-ink);
}

/* 板に貼られた伝票。記事本文カラム。縞は入れない（貼り紙なので平ら）。 */
#main.main {
  background-color: var(--ecai-paper-raised);
  border-top: 1px solid var(--ecai-line);
  border-bottom: 1px solid var(--ecai-line);
}

/* サイドバーは板そのまま。白い箱を浮かせない。 */
#sidebar.sidebar {
  background-color: transparent;
}

/* ヘッダ／フッタも板。伝票との境目に罫を一本入れて「貼ってある」ことを示す。 */
#header-container {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  border-bottom: 1px solid var(--ecai-line-strong);
}
#footer.footer {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  border-top: 1px solid var(--ecai-line-strong);
}

/* ---- モバイル専用のCocoon chrome（★SPで実測して初めて見つかった）---------
   PC幅の実測だけでは出てこない白面が3つある。SP390で必ず確認すること。
     ul.mobile-footer-menu-buttons.mobile-menu-buttons  375x50  fixed 下部  白
     div#sidebar-menu-content.menu-content              315x844 fixed 横    白
     div#search-menu-content                                    fixed      透過
   これを塗り忘れると、板の上に白い帯が1本だけ残る。 */
.mobile-menu-buttons,
.mobile-footer-menu-buttons {
  background-color: var(--ecai-paper);
  border-top: 1px solid var(--ecai-line-strong);
  color: var(--ecai-ink);
}
.mobile-menu-buttons a,
.mobile-menu-buttons .menu-button,
.mobile-footer-menu-buttons a {
  color: var(--ecai-ink);
}
/* ★`.menu-content` 単独では当てない。Cocoonの汎用クラス名で、
   スライドメニュー以外を巻き込むと「予期しない面がクラフトになる」＝間違って光る。
   実測した要素は .sidebar-menu-content も持っているので、そちらで足りる。 */
.sidebar-menu-content {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  color: var(--ecai-ink);
}
.menu-close-button {
  color: var(--ecai-ink);
}

/* サイドバーのウィジェット見出し = 検品票の項目欄 */
#sidebar h2,
#sidebar h2.wp-block-heading {
  background: none;
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line);
  border-left: 3px solid var(--ecai-accent);
  border-radius: 0;
  color: var(--ecai-ink);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 15px;
  padding: 10px 14px;
}

/* パンくず。Cocoon既定の #999 はクラフト地で 2.3:1 しか出ない（AA未達）。
   ★これは刷新による新規劣化ではなく、白地でも 2.85:1 で元から未達だった。
     ついでに直している。 */
#breadcrumb,
#breadcrumb a,
#breadcrumb .fa {
  color: var(--ecai-ink-faint);
}

/* 目次の枠（Cocoon既定 #ccc）を罫に寄せる */
.toc {
  border-color: var(--ecai-line);
  border-radius: 0;
  background-color: var(--ecai-paper);
}

/* コメント欄の部品。白い矩形が伝票の上に残るのを防ぐ。
   ★実測した id をそのまま使う（#comment / #author / #email / #url / #submit）。 */
#comment-area textarea,
#comment-area input[type="text"],
#comment-area input[type="email"],
#comment-area input[type="url"],
#comment,
#author,
#email,
#url {
  background-color: var(--ecai-paper);
  border: 1px solid var(--ecai-line);
  border-radius: 0;
  color: var(--ecai-ink);
}
#submit,
#comment-reply-btn {
  background-color: var(--ecai-paper);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-ink);
}
#submit:hover,
#comment-reply-btn:hover {
  background-color: var(--ecai-accent);
  border-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}


/* ---- [C-2b] 残っていた寒色面（★機械的に洗い出して潰した）-----------------
   段ボールCSSを当てた状態で「まだ白/灰/寒色のまま塗られている要素」を
   DOM全走査で検出した結果（2026-08-07 / 記事ページ）:
     input.wp-block-search__input    rgb(255,255,255)  256x51
     button.wp-block-search__button  rgb(50,55,60)     71x51
     button.go-to-top-button         rgb(238,238,238)  40x40
     a.cat-link                      rgb(51,51,51)     41x26
     a.sns-button (シェア/フォロー)   ブランド色       ← 意図的に残す（下記）
   ★この「洗い出し」は目視より確実。トークンを触ったら同じ走査をやり直すこと。

   ★SNSシェアボタンは [C-2c] で「枠は墨・アイコンはブランド色」にした（運営者判断）。
--------------------------------------------------------------------------- */
.wp-block-search__input,
#sidebar input[type="search"],
#sidebar input[type="text"] {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line);
  border-radius: 0;
  color: var(--ecai-ink);
}
.wp-block-search__button {
  background-color: var(--ecai-ink);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-paper-raised);
}
.wp-block-search__button:hover {
  background-color: var(--ecai-accent);
  border-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}
.go-to-top-button,
.go-to-top-common {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line-strong);
  border-radius: 0;
  color: var(--ecai-ink);
}
/* カテゴリの札。黒塗りをやめて押印にする。 */
.cat-link {
  background-color: transparent;
  border: 1px solid var(--ecai-accent);
  border-radius: 0;
  color: var(--ecai-accent);
}
.cat-link:hover {
  background-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}


/* ---- [C-2c] SNSシェア／フォローボタン（運営者判断: 2026-08-07）-----------
   「枠は墨、アイコンだけブランド色」。
   ベタ塗りのブランド色6個が並ぶのがクラフト地で最も強い不一致だったため、
   面と枠を伝票側に寄せ、識別はアイコンの色と形に持たせる。

   ★サービスごとの色を直書きしない。
     Cocoon は各ボタンに `--cocoon-sns-color` を持たせており
     （実測: `.sns-buttons a { background-color: var(--cocoon-sns-color) }` だけで
     ボタンごとに違う色が出ている）、それをそのまま流用する。
     直書きすると Cocoon 側がブランド色を更新したとき追従できない。

   ★アイコン色のコントラスト実測（貼り紙 #F4EDDF 上）:
       X #000000        18.03:1     Facebook #3b5998  5.87:1
       はてブ #2c6ebd    4.43:1     Pinterest #bd081c 5.61:1
       コピー #333333    10.85:1
       LINE #00c300      2.05:1  ▲   feedly #2bb24c   2.38:1  ▲
       RSS  #f26522      2.71:1  ▲
   ★3:1 を割る3つの扱いを分けている理由:
     - LINE は **シェアボタンでキャプション「LINE」が墨で入る**。
       アイコンは同じ情報の重複＝装飾なので、色が沈んでも識別は失われない。
     - feedly / RSS は **フォローボタンでキャプションが無く、アイコンが唯一の識別子**。
       ここを薄い緑・橙にすると「形が見えない」＝情報が落ちる。
       → フォローボタンのアイコンだけ墨にする。
--------------------------------------------------------------------------- */
.sns-share a.sns-button,
.sns-follow a.sns-button {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-ink);
}

/* シェアボタンのアイコンだけブランド色。キャプションは墨のまま。 */
.sns-share a.share-button .social-icon {
  color: var(--cocoon-sns-color, var(--ecai-ink));
}

/* フォローボタンはキャプションが無いのでアイコンを墨に（上のコメント参照）。 */
.sns-follow a.follow-button [class^="icon-"],
.sns-follow a.follow-button [class*=" icon-"] {
  color: var(--ecai-ink);
}

/* hover でブランド色に塗りつぶす。押せる場所であることの手応えを残す。
   アイコンは面と同色になってしまうので inherit に戻す。 */
.sns-share a.sns-button:hover,
.sns-follow a.sns-button:hover {
  background-color: var(--cocoon-sns-color, var(--ecai-accent));
  border-color: var(--cocoon-sns-color, var(--ecai-accent));
  color: #ffffff;
}
.sns-share a.sns-button:hover .social-icon,
.sns-follow a.sns-button:hover [class^="icon-"],
.sns-follow a.sns-button:hover [class*=" icon-"] {
  color: inherit;
}


/* ---- [C-3] 記事ページのブランド接続 --------------------------------------
   P0/P1 から構造はそのまま。色だけ段ボールに差し替わっている。
   実測(P0適用前): 本文 Hiragino Kaku Gothic ProN / #333 /
                   h1 20px lh1.25（h2 20px と同寸で階層が無い）
--------------------------------------------------------------------------- */
body.single-post .article .entry-title,
body.single-post .article .entry-content {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--ecai-ink);
}

body.single-post .article .entry-title {
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

/* Cocoon親の見出し装飾（h2の灰色帯 / h3の#888縦棒）を打ち消して置き換える。
   ★子セレクタ「> h2」「> h3」に限定する。
     子孫セレクタだと吹き出し(.speech-balloon)・各種ボックス・目次(.toc)・
     ブログカード・再利用ブロック内の h2/h3 まで巻き込んで崩す。
   ※制約: Gutenbergのグループ/カラムブロックで囲まれた見出しは
     .entry-content の直下でなくなるため適用されず、Cocoon既定の装飾が残る。
     執筆規約側で「本文の見出しはブロックで囲まない」を担保する。
   ※詳細度 (0,3,2)。打ち消し対象は全て Cocoon 親 style.css 側にあり、
     !important は付いていないことを実測で確認済み（2026-08-06）。
   ★段ボールでの意味: h2 の下罫 = 伝票の記入欄の罫、h3 の朱の縦棒 = 押印。 */
body.single-post .article .entry-content > h2 {
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--ecai-ink);
  border-radius: 0;
  padding: 0 0 10px;
  margin: 3em 0 1.2em;
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.5;
  color: var(--ecai-ink);
}

body.single-post .article .entry-content > h3 {
  background: none;
  background-color: transparent;
  border: 0;
  border-left: 3px solid var(--ecai-accent);
  border-radius: 0;
  padding: 0 0 0 14px;
  margin: 2.4em 0 1em;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.6;
  color: var(--ecai-ink);
}

/* ★ p も子セレクタ限定。子孫だと吹き出し・キャプション・ブログカード内の
   <p> を巻き込む。級数は現状維持(16px)、行送りのみ調整。 */
body.single-post .article .entry-content > p {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 1.6em;
  color: var(--ecai-ink);
}

/* 記事タイトルの下に送り状のバーコードを一本。
   ★装飾ではなく「この伝票の識別子」という位置づけ。ホームの .ecai-barcode と同じ語彙。
   ★aria 上は意味が無いので content は空。読み上げに影響しない。 */
body.single-post .article .entry-title::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: 16px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ecai-line-strong) 0 2px,
    var(--ecai-paper-raised) 2px 5px,
    var(--ecai-line-strong) 5px 6px,
    var(--ecai-paper-raised) 6px 10px,
    var(--ecai-line-strong) 10px 13px,
    var(--ecai-paper-raised) 13px 15px
  );
  opacity: 0.55;
}

/* 日付・カテゴリなどの欧文/数字はモノスペースに寄せる（段ボール刷新で比重を上げた）。
   ★日本語グリフを持たない書体なので、日本語が混ざる要素には当てない。
     .post-date / .post-update は日付のみ。 */
body.single-post .article .post-date,
body.single-post .article .post-update {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ecai-ink-faint);
}

/* フォーカスリング。板の上でも見えるように accent。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ecai-accent);
  outline-offset: 2px;
}

/* ===== ECAI 段ボール ここまで ===== */


/* === ECAI-ARTICLE-A BEGIN ===
   記事ページをホームのA案と同じ設計言語に合わせる 2026-08-10
   body.single-post のライト値 pin は維持（Cocoonのヘッダ/フッタが追随しないため）。
   バックアップ: assets/home-snapshots/20260810-2102_child_style.css
   ロールバック: この BEGIN〜END を削除するだけ。
   根拠: assets/design-teardown-20260810.md（9サイト実測） */
.cat-label, .cat-label-3, .cat-label-4, .cat-label-5{
  background:#A32B21; color:#FBF6EC; border-color:#A32B21; border-radius:0;
}
.required{ color:#A32B21; }
.entry-title, .article h1.entry-title{ font-size:34px; line-height:1.20; letter-spacing:-.02em; }
.entry-content h2, .article h2{ font-size:24px; line-height:1.35; letter-spacing:-.01em; }
.entry-content h3, .article h3{ font-size:20px; line-height:1.40; }
.entry-content p, .entry-content li{ font-size:17px; line-height:1.9; }
figcaption, .date-tags, .post-meta, .entry-content small{ font-size:12px; line-height:1.6; }
.entry-card, .cat-label, .entry-content blockquote, .entry-content table,
.entry-content pre, .a-wrap, .widget{ border-radius:0; box-shadow:none; }
@media (max-width:768px){
  .entry-title, .article h1.entry-title{ font-size:24px; line-height:1.25; }
  .entry-content h2, .article h2{ font-size:20px; line-height:1.40; }
  .entry-content h3, .article h3{ font-size:17px; }
  .entry-content p, .entry-content li{ font-size:16px; line-height:1.9; }
}
/* 詳細度の詰め（実測でCocoon側に負けていた分） */
body .required{ color:#8A2018; }                       /* 3.43:1 → 6.7:1 */
body.single-post .entry-title{ line-height:1.20; }
body.single-post .entry-content h2{ line-height:1.35; }
body.single-post .entry-content h3{ line-height:1.40; }
@media (max-width:768px){
  body.single-post .entry-title{ font-size:24px; line-height:1.25; }
  body.single-post .entry-content h2{ font-size:20px; line-height:1.40; }
  body.single-post .entry-content h3{ font-size:17px; line-height:1.45; }
}
/* === ECAI-ARTICLE-A END === */


/* =========================================================================
   ECAI LABO — UI改修  2026-08-18
   ロールバック: この「BEGIN」から「END」までを削除すれば完全に元へ戻る。
   バックアップ: assets/backup-20260818/live-cocoon-child_style_20260818-1330.css

   ------------------------------------------------------------------------
   ★なぜ直すのか（全部 getComputedStyle と getBoundingClientRect の実測）
   ------------------------------------------------------------------------
   U-1 記事ヘッダがホームと別物。#navi-in が空・タグライン空・CTA無し。
       記事に着地した読者に出口が1つも無い。
   U-2 本文1行 = 50文字（800.7px / 16px）。日本語の上限 35〜45 を超過。
   U-3 H1 の直下に、同じタイトルを焼き込んだアイキャッチ。ファーストビューで
       タイトルが二重に出て、しかも画像内の文字が枠外にはみ出て切れている。
   U-4 収益導線 .ecai-ad-slot / .ecai-ad-text が完全に無スタイル。
       border:0 / background:transparent / padding:0、リンク色は Chrome 既定の
       rgb(25,103,210)。このサイトが稼ぐ唯一の場所が、唯一デザインされていない。
   U-5 サイドバーの列 13,957px に対し中身 1,071px（92%が空白）。position:static。
   U-6 目次と 404 が Cocoon 素のまま。404 は img.not-found が 801x471 の
       巨大なグレーPNG。
   ------------------------------------------------------------------------
   ★踏襲した既存の規約
     - クラス名は ecai- プレフィックス（Cocoon の一般名と衝突させない）
     - 色は必ずトークン経由。リテラルを書かない（ダーク追従と AA 実測が効かなくなる）
     - 見出しの打ち消しは子セレクタ限定（吹き出し・目次・カードを巻き込まない）
     - 角丸・影・絵文字・寒色グラデは使わない
   === ECAI-UI-20260818 BEGIN ===
   ========================================================================= */

/* ---- [U-0] 本文の計測（measure）------------------------------------------
   本文の級数を 17px に戻す。[ECAI-ARTICLE-A] が 2026-08-10 に 17px を
   意図していたが、[C-3] の 本文段落ルール（詳細度 0,4,1）が後から 16px で
   上書きしていて効いていなかった。実測 16px。
   17px × 40字 = 680px を measure とする。
--------------------------------------------------------------------------- */
body.single-post {
  --ecai-measure: 680px;
}

body.single-post .article .entry-content > p,
body.single-post .article .entry-content > ul,
body.single-post .article .entry-content > ol {
  font-size: 17px;
  line-height: 1.9;
}

/* ★ .entry-content にだけ効かせる。.article-footer（関連記事・シェア・広告枠）
   まで narrow にすると、カード一覧が不自然に痩せる。 */
body.single-post .article .entry-content {
  max-width: var(--ecai-measure);
}

body.single-post .article .entry-content > ul > li,
body.single-post .article .entry-content > ol > li {
  margin-bottom: 0.7em;
}
body.single-post .article .entry-content > ul > li::marker {
  color: var(--ecai-accent);
}
body.single-post .article .entry-content > ol > li::marker {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color: var(--ecai-accent);
}


/* ---- [U-1] 記事ページのヘッダをホームと接続 ------------------------------
   ★ body:not(.content-only) にスコープする。ホーム(content-only)は固定ページ
     本文の style が自前で全部塗っており、そちらに触れてはいけない。
     判定を page-id ではなく content-only の有無で行う理由は [C-1] と同じ。
--------------------------------------------------------------------------- */
body:not(.content-only) .logo-header .site-name-text {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ecai-ink);
  border: 2px solid var(--ecai-ink);
  padding: 9px 13px 8px;
}
body:not(.content-only) .logo-header .site-name-text-link:hover .site-name-text {
  background-color: var(--ecai-ink);
  color: var(--ecai-paper);
}

/* タグライン。.tagline は実測で空だったため CSS で補う。 */
body:not(.content-only) .logo.logo-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
body:not(.content-only) .logo.logo-header::after {
  content: "EC × AI 研究所";
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ecai-ink-faint);
  white-space: nowrap;
}

/* ロゴ左・ナビ右。#navi は header の兄弟なので #header-container-in を flex に。
   ★モバイル(834px以下)は Cocoon がモバイルメニューに切り替えるので当てない。 */
@media screen and (min-width: 835px) {
  body:not(.content-only) #header-container-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
  }
  body:not(.content-only) #header-container-in > #header { flex: 0 0 auto; }
  body:not(.content-only) #header-container-in > #navi   { flex: 1 1 auto; }

  body:not(.content-only) #header-in.wrap,
  body:not(.content-only) #navi-in.wrap {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body:not(.content-only) #header .header-in { min-height: 0; }
  body:not(.content-only) #navi-in { display: flex; justify-content: flex-end; }

  body:not(.content-only) #navi-in > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
  body:not(.content-only) #navi-in > ul > li {
    height: auto;
    line-height: 1.4;
  }
  body:not(.content-only) #navi-in > ul > li > a {
    height: auto;
    line-height: 1.4;
    padding: 11px 14px;
    font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-size: 14px;
    color: var(--ecai-ink);
  }
  body:not(.content-only) #navi-in > ul > li > a:hover {
    background-color: transparent;
    color: var(--ecai-accent);
  }

  /* 無料相談だけ朱の面に。メニュー項目の「CSSクラス」に ecai-nav-cta を入れる。
     ★:last-child にしないのは、並び順を変えた瞬間に CTA が別リンクへ移るため。 */
  body:not(.content-only) #navi-in > ul > li.ecai-nav-cta > a {
    background-color: var(--ecai-accent);
    color: var(--ecai-accent-ink);
    font-weight: 700;
  }
  body:not(.content-only) #navi-in > ul > li.ecai-nav-cta > a:hover {
    background-color: var(--ecai-ink);
    color: var(--ecai-paper);
  }
}


/* ---- [U-2] アイキャッチのタイトル二重を止める ----------------------------
   ★消すのは「記事ページの表示」だけ。画像そのものは残るので、
     一覧カード・関連記事・OGP には影響しない。
--------------------------------------------------------------------------- */
body.single-post .eye-catch-wrap { display: none; }


/* ---- [U-3] 収益導線 = 送り状に貼った「取扱注意」ラベル --------------------
   実測した構造（本文下ウィジェット / #custom_html-2）:
     DIV.widget.widget-single-content-bottom
       DIV.widget-single-content-bottom-title.widget-title  ← "スポンサーリンク"
       DIV.textwidget.custom-html-widget
         DIV.ecai-ad-slot  > A > IMG(936x120 を 468x60 で表示) ＋ IMG(1x1)
         P.ecai-ad-text    > A ＋ IMG(1x1)
         P.ecai-ad-text    > A ＋ IMG(1x1)

   ★1x1 の計測ピクセルは display:none にしない。読み込まれなくなると成果計測が
     落ちる可能性がある。position:absolute で版面から外すだけにする（DOM に残り、
     リクエストは飛ぶ）。直下の img だけを狙うので、A の中のバナーは対象外。
--------------------------------------------------------------------------- */
.widget-single-content-bottom {
  position: relative;
  max-width: var(--ecai-measure, 680px);
  margin: 3.5em 0 2.5em;
  padding: 28px 22px 22px;
  background-color: var(--ecai-paper);
  border: 1px solid var(--ecai-line-strong);
  border-top: 3px solid var(--ecai-accent);
}

.widget-single-content-bottom > .widget-title,
.widget-single-content-bottom > .main-widget-label {
  position: absolute;
  top: -11px;
  left: 18px;
  margin: 0;
  padding: 3px 10px;
  background: var(--ecai-accent);
  border: 0;
  border-radius: 0;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--ecai-accent-ink);
}

.ecai-ad-slot > img,
.ecai-ad-text > img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ecai-ad-slot {
  margin: 0 0 16px;
  text-align: center;
}
.ecai-ad-slot > a {
  display: inline-block;
  line-height: 0;
  border: 1px solid var(--ecai-line);
  background-color: var(--ecai-paper-raised);
}
.ecai-ad-slot img { max-width: 100%; height: auto; }

/* テキストリンク。Chrome 既定の青をやめ、押せる面にする。 */
.ecai-ad-text {
  margin: 0 0 10px;
  text-align: left;
}
.ecai-ad-text:last-child { margin-bottom: 0; }
.ecai-ad-text > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-ink);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ecai-ink);
  text-decoration: none;
}
.ecai-ad-text > a::after {
  content: "→";
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color: var(--ecai-accent);
}
.ecai-ad-text > a:hover {
  background-color: var(--ecai-accent);
  border-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}
.ecai-ad-text > a:hover::after { color: inherit; }


/* ---- [U-4] サイドバーを追従させる ----------------------------------------
   実測: #content-in は display:flex、#sidebar は position:static で
   高さ 13,957px（中身 1,071px）。flex で引き伸ばされているだけ。
   ★align-self は #sidebar だけに当てる。#content-in に align-items を当てると
     #main の伸長も変わり、伝票の面（paper-raised）の高さに影響する。
--------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  #sidebar.sidebar {
    align-self: flex-start;
    position: sticky;
    top: 20px;
  }
  body.admin-bar #sidebar.sidebar { top: 52px; }
}

#sidebar .widget a { color: var(--ecai-ink); }
#sidebar .widget a:hover { color: var(--ecai-accent); }


/* ---- [U-5] 目次 = 検品票のチェック欄 --------------------------------------
   枠色と背景は [C-2] で当て済み。ここでは中央揃えの見出しと、
   Cocoon 既定のリンク色・行間だけを直す。
   ★.toc の中の見出しには [C-3] の打ち消しが効かない（子セレクタ限定のため）。
--------------------------------------------------------------------------- */
.toc {
  max-width: var(--ecai-measure, 680px);
  padding: 20px 22px;
}
.toc .toc-title {
  display: block;
  margin: 0 0 14px;
  text-align: left;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ecai-ink-faint);
}
.toc a {
  color: var(--ecai-ink);
  text-decoration: none;
  line-height: 1.8;
}
.toc a:hover { color: var(--ecai-accent); text-decoration: underline; }
.toc li::marker {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color: var(--ecai-accent);
}


/* ---- [U-6] 404 = 宛先不明の返送伝票 ---------------------------------------
   実測: img.not-found が 801x471 の巨大なグレーPNG。段ボールと無関係。
--------------------------------------------------------------------------- */
body.error404 img.not-found { display: none; }

body.error404 .article .entry-title {
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.error404 .article .entry-title::after {
  content: "宛先不明 / RETURN TO SENDER";
  display: inline-block;
  margin-left: 16px;
  padding: 6px 12px;
  vertical-align: middle;
  border: 2px solid var(--ecai-accent);
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--ecai-accent);
  transform: rotate(-2.5deg);
}
body.error404 .article > p {
  max-width: var(--ecai-measure, 680px);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ecai-ink-soft);
}


/* ---- [U-7] 空ウィジェットの保険 -------------------------------------------
   「最近のコメント」は管理画面から外す（そちらが本筋）。
   ★ここは、将来また空のウィジェットが刺さったときに
     「表示できる〇〇はありません」だけが板の上に残るのを防ぐ保険。
--------------------------------------------------------------------------- */
#sidebar .no-comments,
#sidebar .widget:empty { display: none; }


/* ---- [U-1b] 適用後の実測で出た回帰の修正（2026-08-18）-------------------
   ヘッダを flex にして初めて見えた2件。適用前のDOMでは検出できなかった。
   ① #navi の背景が rgb(255,255,255)（Cocoon既定）。板の上に白帯が1本残る。
      ★メディアクエリの外に置く。モバイルでも同じ白帯が出る面なので。
   ② #navi-in > ul > li が幅176px（Cocoonのmin-width）。3項目が間延びする。
--------------------------------------------------------------------------- */
body:not(.content-only) #navi {
  background-color: transparent;
}

@media screen and (min-width: 835px) {
  body:not(.content-only) #navi-in > ul > li,
  body:not(.content-only) #navi-in > ul > li > a {
    min-width: 0;
    width: auto;
  }
}


/* ---- [U-8] 本文中のリンク -------------------------------------------------
   実測: .entry-content のリンクは rgb(25,103,210)（Chrome/Cocoon 既定の青）。
   記事末尾のCTAだけ直して本文を放置していた。板の上で青が一番強い不一致になる。
   ★墨の文字 + 朱の下線にする。「伝票に引いた線」の語彙。
     色だけに依存せず下線を残すので、色覚に依らず判別できる。
   ★.a-wrap / .blogcard （カード形式の内部リンク）は除外する。
     カード全体が <a> なので、下線を引くと面が崩れる。
--------------------------------------------------------------------------- */
body.single-post .article .entry-content a:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button) {
  color: var(--ecai-ink);
  text-decoration: underline;
  text-decoration-color: var(--ecai-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}
body.single-post .article .entry-content a:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button):hover {
  color: var(--ecai-accent);
  text-decoration-color: var(--ecai-accent);
}


/* ---- [U-3b] CTAボタンの揃え（SP390 の実測で発見）---------------------
   ウィジェットHTML側に style="text-align:center" がインラインで入っており、
   PCでは1行に収まって見えないが、SPで折り返すと中央寄せになる。
   ★マークアップ側を直さないのは、同じブロックにアフィリエイトの計測タグが
     同居しているため。見た目のために収益の配線を触るリスクを取らない。
   ★このファイルで唯一の !important。インラインスタイルは詳細度では勝てない。
--------------------------------------------------------------------------- */
.ecai-ad-text { text-align: left !important; }

/* === ECAI-UI-20260818 END === */


/* === ECAI-TYPE-20260819 BEGIN ===
   記事本文のタイポ階層にメリハリを付ける。
   実測 2026-08-19 (/2026/08/19/inventory-update-half-automation/):
     PC1440  title 34 / h2 26 / h3 20 / p 17 / td 18   / 広告注記 15.3
     SP390   title 24 / h2 20 / h3 17 / p 17 / td 12.8 / 広告注記 13.6
   問題は3つ:
     (1) SPで h3 と本文が同寸(17px)。見出しが本文に埋もれて段が消えていた
         ([U-0] が本文を17pxへ戻したのに ARTICLE-A の @media h3:17px が残ったため)
     (2) 表が 18px で本文 17px より大きい。補助情報が本文より目立つ逆転
     (3) 広告注記が 15.3px。本文とほぼ同格で、法的注記が記事の一部に見える
   方針: 見出しは上げる / 本文は据え置き(17px は measure 680px と噛み合っている) /
         補助情報(表・コード・目次・キャプション・広告面)は下げる。
   ロールバック: この BEGIN〜END を削除するだけ。
   バックアップ: assets/backup-20260819-1548/style.css (59,290 bytes) */

/* ---- 見出し: 本文 17px に対する比を 2.12 / 1.59 / 1.24 に開く ---- */
body.single-post .article .entry-title {
  font-size: 36px;
  line-height: 1.22;
}
body.single-post .article .entry-content > h2 {
  font-size: 27px;
  line-height: 1.40;
  margin: 3.4em 0 1.1em;
}
body.single-post .article .entry-content > h3 {
  font-size: 21px;
  line-height: 1.50;
  margin: 2.6em 0 0.9em;
}
/* h4 は本文と同寸まで下がるので、太さと字間で段を作る（サイズでは作れない） */
body.single-post .article .entry-content > h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 2em 0 0.7em;
}

/* ---- 補助情報: 本文より一段下げる ----
   表・コードは「読み進めるもの」ではなく「参照するもの」。本文より大きいのは逆転。 */
body.single-post .article .entry-content table {
  font-size: 15px;
  line-height: 1.7;
}
body.single-post .article .entry-content th {
  font-size: 14px;
  letter-spacing: 0.04em;
}
body.single-post .article .entry-content pre,
body.single-post .article .entry-content code {
  font-size: 14.5px;
  line-height: 1.75;
}
body.single-post .article .toc {
  font-size: 15px;
  line-height: 1.8;
}
body.single-post .article .entry-content figcaption,
body.single-post .article .entry-content small {
  font-size: 12.5px;
  line-height: 1.7;
}

/* ---- 広告地帯 ----
   実測 2026-08-19: ウィジェット(#custom_html-2)の HTML が各行に inline で px を
   直書きしている（注記13 / CTA見出し16 / 説明14 / 補足12 / ラベル11）。
   inline は CSS に勝つため、ここを CSS から動かすには !important が要る = 使わない。
   本文 17px に対して全部小さく、階層としては既に成立しているのでそのまま活かす。
   下の1行は inline を持たない要素（.ecai-ad-text のリンク面など）に効く受け皿。
   ★注記のサイズを変えたくなったら CSS ではなく
     wp-admin > 外観 > ウィジェット > #custom_html-2 の HTML を直すこと。 */
body.single-post .widget-single-content-bottom .textwidget {
  font-size: 15px;
}

@media (max-width: 768px) {
  body.single-post .article .entry-title {
    font-size: 26px;
    line-height: 1.25;
  }
  body.single-post .article .entry-content > h2 {
    font-size: 22px;
    line-height: 1.42;
    margin: 2.8em 0 1em;
  }
  body.single-post .article .entry-content > h3 {
    font-size: 19px;
    line-height: 1.50;
    margin: 2.2em 0 0.8em;
  }
  body.single-post .article .entry-content > h4 {
    font-size: 16.5px;
  }
  /* ARTICLE-A の @media が本文を 16px / li を 16px に降格させるのを止める。
     SPで本文を下げると h3 との差が再び消える。 */
  body.single-post .article .entry-content > p,
  body.single-post .article .entry-content > ul,
  body.single-post .article .entry-content > ol,
  body.single-post .article .entry-content > ul > li,
  body.single-post .article .entry-content > ol > li {
    font-size: 17px;
    line-height: 1.9;
  }
  /* Cocoon が @media(max-width:834px) で `table th, table td` を
     --cocoon-text-size-s (実測 0.8em → 11.2px) へ落とすので、
     table にだけ当てても効かない。td/th へ直接当てること。 */
  body.single-post .article .entry-content table,
  body.single-post .article .entry-content table td {
    font-size: 14px;
  }
  body.single-post .article .entry-content table th {
    font-size: 13px;
  }
  body.single-post .article .entry-content pre,
  body.single-post .article .entry-content code {
    font-size: 13.5px;
  }
  body.single-post .article .toc {
    font-size: 14px;
  }
  body.single-post .widget-single-content-bottom .textwidget {
    font-size: 14px;
  }
}
/* === ECAI-TYPE-20260819 END === */


/* =========================================================================
   ECAI-CTA-INLINE-20260819 BEGIN
   本文中テキストCTA（記事本文の段落の途中に置くA8素材リンク）専用。

   ■なぜ必要か
   本文CTAは <a class="ecai-ad-slot"> で GA4 の表示監視だけを借りていて、
   見た目は Chrome 既定の青リンクのままだった（実測 rgb(25,103,210)）。

   ■なぜ .ecai-ad-slot を直接触らないか
   ウィジェット側は div.ecai-ad-slot（バナー枠）で text-align:center /
   > a に line-height:0 と枠線が当たる別物である。要素修飾 a. と
   .entry-content の2段で、本文中の <a> だけに限定する。

   ■2026-08-19 実測による修正
   初版は color:ink + background:paper-raised + padding としたが、
   実測で paper-raised は記事の実効背景と完全に同一（コントラスト比 1.00）で、
   背景と padding が視覚的に何もしていなかった。素の本文リンクも既に
   墨文字＋朱赤の下線2px なので、差が font-weight だけになっていた。
   → 文字色を accent（朱赤）に変え、下線を3pxにして差を作る。
   border は使わない（アンカーが2行に折り返すため枠が割れる。実測 h=59px）。

   ■2026-08-19 実測その2：詳細度で負けていた
   初版セレクタ body.single-post .entry-content a.ecai-ad-slot は (0,3,2)。
   対する既存ルール body.single-post .article .entry-content
   a:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button) は :not() 4つで
   (0,7,1) あり、ファイル末尾に置いても詳細度で負けて color と
   text-decoration-thickness が効かなかった（background だけ効いて誤解しかけた）。
   → 相手と同じ :not() 連鎖に .ecai-ad-slot を足して (0,8,2) にした。!important は使わない。
   ★教訓: Cocoon系の打ち消しは :not() の数を数えてから書くこと。

   ■ロールバック
   この BEGIN〜END を削除すれば完全に元へ戻る。
   バックアップ: assets/backup-20260819/live-cocoon-child_style_20260819-1713.css
   ========================================================================= */
body.single-post .article .entry-content a.ecai-ad-slot:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button) {
  font-weight: 700;
  color: var(--ecai-accent);
  text-decoration: underline;
  text-decoration-color: var(--ecai-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
body.single-post .article .entry-content a.ecai-ad-slot:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button):visited {
  color: var(--ecai-accent);
}
body.single-post .article .entry-content a.ecai-ad-slot:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button):hover,
body.single-post .article .entry-content a.ecai-ad-slot:not(.a-wrap):not(.blogcard-wrap):not(.btn):not(.sns-button):focus-visible {
  background-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
  text-decoration-color: var(--ecai-accent-ink);
}
/* === ECAI-CTA-INLINE-20260819 END === */