@charset "UTF-8";
/*!
Theme Name: AdBridge
Description: PPCアフィリエイト向けのテーマです。【重要】このテーマは「Cocoon」の子テーマです。先にCocoon（親テーマ）をインストールしてから有効化してください。Cocoonは https://wp-cocoon.com/downloads/ から無料で入手できます。
Author: AdBridge
Template: cocoon-master
Version: 3.9.61
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adbridge
*/
/*
* このテーマは WordPress テーマ「Cocoon」（作者: わいひら / https://nelog.jp/）の
* 子テーマです。Cocoon は 100% GPL のもとで配布されています。
* 本テーマも GPL v2 or later のもとで配布されます。
*/
/************************************
** カスタマイズについて
** ---------------------------------
** このファイルは自動アップデートで上書きされます。
** 独自のCSSは「外観 → カスタマイズ → 追加CSS」に記述してください。
** （データベースに保存されるため、更新の影響を受けません）
************************************/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/************************************
* 見た目のパターン
************************************
* ★ なぜ全パターンを静的に書いてあるのか
* 選んだ色をその場で に書き出す方法もあるが、それをやると
* サイト表示のたびに出力が増える。訪問者に届くものは増やさない方針なので、
* 全パターンをここに置き、body に短いクラスを足すだけにしてある。
*
* ★ クラス名に意味を持たせていないのは意図的
* adbridge-skin-blue のような名前だと、どのサイトも同じ仕組みから
* 出ていることをソースで説明してしまう。
*
* ★ 色は「対」で決めてある
* 乱数で色を作ると、いつか必ず下品な組み合わせが出る。
*
* ★★ セレクタは Cocoon の実際のHTMLに合わせること
* サイドバーの見出しは h3 ではなく h2.wp-block-heading。
* 思い込みで書くと、1つも当たらないまま「入れたつもり」になる。
************************************/
.s1, .s2, .s3 { } /* サイト名の型（下で使う） */
/* --- 配色（6組） -------------------------------------
* ★★★ 色相を、輪ぜんぶに散らしてある（2026-08-30 に作り直した）。
* ★ 前は6つとも青〜緑青で、色相が 60° の中に固まっていた。
* ★★ ランダムに選んでも、ほぼ同じ絵しか出なかった。
*
* ★★★ --a（飾り）と --at（文字用）を分けてある。
* ★ 前は1つの色が、飾りにも文字にも使われていた。
* ★★ 飾りとして良い明るさは、文字としては薄すぎる。
* ★★★ 実測で、6配色すべてが読める基準を割っていた（比 2.5〜3.3）。
* ★ 文字に使うのは必ず --at。飾り（枠・地）だけが --a。
*
* ★ 値は手で選んでいない。基準を満たすものを計算で出している。
* ★★ 触るときは 検査/色が読めるかを検査.py を必ず回すこと。
* --------------------------------------------------- */
.c1 { --k:#29588e; --a:#3b80ce; --at:#276ebe; --al:#edf3fa; } /* 藍 × 空 */
.c2 { --k:#7336ba; --a:#803bce; --at:#8a45d9; --al:#f3edfa; } /* すみれ × 藤 */
.c3 { --k:#9a2d5c; --a:#ce3b7b; --at:#c7296d; --al:#faedf3; } /* 梅 × 紅 */
.c4 { --k:#864727; --a:#ce6c3b; --at:#ae5224; --al:#faf1ed; } /* 錆朱 × 杏 */
.c5 { --k:#34631d; --a:#6cce3b; --at:#3c7f1a; --al:#f1faed; } /* 苔 × 若草 */
.c6 { --k:#1d6359; --a:#3bceba; --at:#197b6e; --al:#edfaf9; } /* 青緑 × 浅葱 */
/* --- 書体（3組） -------------------------------------
* ★★★ 色を散らしても、字面が同じなら「似たサイト」に見える。
* ★ 文字は画面のいちばん広い面積を占める。ここが同じだと印象は動かない。
*
* ★★ 端末に入っている字だけを使う（読みこみを1つも増やさない）。
* ★ 外から字を取ってくると、表示が遅れ、どのサイトも同じ所へ取りに行く。
* ★★ 訪問者に届くものは、これまでと1バイトも変わらない。
*
* ★★ 本文を明朝にはしない。
* ★ Windows の游明朝は細く、長い文章だと読みにくい。
* ★★ 見出しとサイト名だけ明朝にすれば、第一印象は十分に変わる。
* --------------------------------------------------- */
.f1 { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
"Noto Sans JP", Meiryo, sans-serif; }
.f2 { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
"Noto Sans JP", Meiryo, sans-serif; }
/* ★ Cocoon の実際のHTMLに合わせてある。サイドバーの見出しは h2.wp-block-heading。 */
.f2 :is(.site-name-text, .entry-card-title, .entry-title, .archive-title,
.wp-block-heading, .article h1, .article h2, .article h3) {
font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
"Noto Serif JP", "Times New Roman", serif;
}
/* ★ 丸ゴシックが無い端末では、字間と行間だけが効く。
* ★★ それでも「ゆったりした別のサイト」に見える。 */
.f3 { font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c",
"Yu Gothic Medium", YuGothic, "Hiragino Sans", "Noto Sans JP", sans-serif;
letter-spacing: .02em; line-height: 1.9; }
:is(.c1,.c2,.c3,.c4,.c5,.c6) {
--ln:#e6ecf1;
--bg:#f2f3f5;
--sf:#ffffff;
--tx:#333333;
/* ★ 地（--bg）の上でも 4.5:1 を満たす濃さ。前は #6b7280 で 4.35 だった。 */
--tx2:#5f6773;
}
/************************************
* 文字組み
************************************
* ★ 日本語のサイトが素人っぽく見える最大の原因は、たいてい文字組み。
* palt は端末に入っているフォントの機能なので、
* 外からフォントを読み込む必要がない。速度も足跡も増えない。
************************************/
:is(.c1,.c2,.c3,.c4,.c5,.c6) {
font-feature-settings: "palt";
line-break: strict;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) :is(h1,h2,h3,.entry-card-title,.entry-title) {
text-wrap: balance;
letter-spacing: .01em;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content p { line-height: 1.9; }
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content > p:first-of-type { font-size: 1.05em; }
/************************************
* サイト名の見せ方（3種）
************************************
* ★ サイトを開いて最初に目が行く場所。
* ここが同じだと、色を変えても「同じサイト」に見えてしまう。
************************************/
:is(.c1,.c2,.c3,.c4,.c5,.c6) .site-name-text {
color: var(--k);
}
/* s1: 中央。下に短いグラデーションの線 */
.s1 .logo-header { text-align: center; }
.s1 .site-name-text {
font-weight: 600;
letter-spacing: .06em;
}
.s1 .site-name-text::after {
content: ""; display: block; width: 46px; height: 3px;
margin: 12px auto 0; border-radius: 2px;
background: linear-gradient(90deg, var(--a), var(--k));
}
/* s2: 左寄せ。左に太い縦線を立てる */
.s2 .logo-header { text-align: left; }
.s2 .site-name-text {
display: inline-block;
padding-left: 16px;
position: relative;
font-weight: 700;
letter-spacing: .02em;
}
.s2 .site-name-text::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 5px; height: 1.15em; margin-top: -.575em;
border-radius: 3px;
background: linear-gradient(180deg, var(--a), var(--k));
}
/* s3: 中央。字間を大きく開けて、上下に細い罫線
* ★★ 罫線に --ln（枠線の色）を使ってはいけない。
* --ln は「地の色に近い、目立たせない線」なので、
* 暗い設定のときは背景に沈んで、何も無いのと同じになる。
* 見せるための線には、差し色を使う。 */
.s3 .logo-header { text-align: center; }
.s3 .site-name-text {
display: inline-block;
padding: 9px 6px;
border-top: 1px solid var(--a);
border-bottom: 1px solid var(--a);
font-weight: 400;
letter-spacing: .24em;
text-indent: .24em; /* 字間ぶん右にずれるのを戻す */
}
/************************************
* 記事一覧
************************************/
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-title {
color: var(--k);
transition: color .18s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card-title {
color: var(--at);
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card {
border-radius: 6px;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card {
transform: translateY(-2px);
background: var(--al);
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* ★ 画像の縦横比をそろえる。
* 高さがバラつくと散らかるうえ、読み込み中にガタつく。
* このガタつき（CLS）は表示速度の評価にも響く。 */
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-thumb {
overflow: hidden; border-radius: 5px; position: relative;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-thumb img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%; height: auto;
transition: filter .18s ease, transform .35s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card-thumb img {
filter: saturate(1.08);
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .eye-catch img {
aspect-ratio: 16 / 9; object-fit: cover;
}
/************************************
* サイドバー
************************************
* ★★ 見出しは h2.wp-block-heading。h3 ではない。
* 古いウィジェットは h3 や .widget-title を使うので、両方に当てる。
************************************/
:is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar :is(.wp-block-heading, .widget-title, h3) {
background: none !important;
color: var(--k);
padding: 0 0 9px;
margin: 0 0 10px;
border: none;
border-bottom: 2px solid var(--ln);
position: relative;
font-size: 15px;
letter-spacing: .04em;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar :is(.wp-block-heading, .widget-title, h3)::after {
content: ""; position: absolute; left: 0; bottom: -2px;
width: 38px; height: 2px; background: var(--a);
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li {
transition: color .16s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li a {
transition: color .16s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li a:hover {
color: var(--at);
}
/************************************
* 目次
************************************/
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc {
border: 1px solid var(--ln);
border-left: 3px solid var(--a);
border-radius: 0 6px 6px 0;
background: var(--sf);
padding: 16px 20px;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-title {
color: var(--k); font-size: 15px; letter-spacing: .04em;
border: none; padding-bottom: 8px;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list > li { margin-bottom: 6px; }
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list a {
color: var(--tx); text-decoration: none; transition: color .16s ease;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list a:hover {
color: var(--at); text-decoration: underline; text-underline-offset: 3px;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list > li::marker {
color: var(--at); font-weight: 700;
}
/************************************
* カテゴリラベルの形（3種）
************************************/
.b1 .cat-label {
top: 14px; left: -34px; padding: 4px 40px; border-radius: 0;
/* ★★★ 前は「飾り色の地に白文字」だった。
★ 実測で、6配色すべてが読める基準を割っていた（比 2.5〜3.3）。
★★ 明るい飾り色に白は、どの色相でも成立しない。
★ うすい地に、文字用の色を置く。形も位置も、そのまま。 */
background: var(--al); color: var(--at);
font-size: 11px; font-weight: 700; letter-spacing: .08em;
transform: rotate(-45deg);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.b2 .cat-label {
top: 10px; left: 10px; padding: 3px 12px; border-radius: 999px;
background: rgba(255,255,255,.92); color: var(--k);
font-size: 11px; font-weight: 700; letter-spacing: .04em;
box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.b3 .cat-label {
top: 12px; left: 0; padding: 4px 14px 4px 10px; border-radius: 0 3px 3px 0;
background: var(--k); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
border-left: 3px solid var(--a);
}
/************************************
* 一覧の並べ方（3種）
************************************
* ★ 色だけでなく、形でも差が出るようにする。
* 並べて見たときに「同じサイト」に見えないことが目的。
************************************/
/* l1: 横並び。左端に細い差し色の線を走らせる */
.l1 .entry-card {
border-left: 3px solid transparent;
padding-left: 10px;
transition: border-color .18s ease, transform .18s ease,
box-shadow .18s ease, background .18s ease;
}
.l1 .entry-card-wrap:hover .entry-card { border-left-color: var(--at); }
/* l2: 余白を広く、区切り線をなくす。画像も大きめ */
.l2 .entry-card { border-bottom: none; padding: 24px 10px; margin-bottom: 8px; }
.l2 .entry-card-title { font-size: 1.1em; }
.l2 .entry-card-thumb { flex-basis: 44%; }
.l2 .entry-card-snippet { opacity: .85; }
/* l3: 枠で囲ってカードらしく。ホバーで枠が差し色に */
.l3 .entry-card {
border: 1px solid var(--ln); border-radius: 8px;
padding: 16px; margin-bottom: 14px; background: var(--sf);
}
.l3 .entry-card-wrap:hover .entry-card {
border-color: var(--at); transform: translateY(-3px);
}
/************************************
* ページの切り替え
************************************
* ★ JavaScript は使っていない。
* 対応していないブラウザでは、いままでどおり切り替わるだけ。
************************************/
@view-transition { navigation: auto; }
/************************************
* スクロールに合わせて出す
************************************
* ★ これも JavaScript を使わない書き方。
* ★★ 透明度は 0 から始めない。
* 完全に消えた状態から始めると、万一動かなかったときに読めなくなる。
* ★ 端末側で「動きを減らす」設定にしている人には出さない。
************************************/
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap {
animation: ab-in linear both;
animation-timeline: view();
animation-range: entry 0% entry 32%;
}
@keyframes ab-in {
from { opacity: .35; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
}
}
/************************************
* 細部
************************************/
/* ★ 地は主色（--k）。白文字との比を 7:1 で保証してある。
★★ 前は飾りの色（--a）だった。6配色中4つで読めなかった（比 1.96〜4.07）。
★★★ --a は飾り用。その上に文字を置かない、が決めごと。 */
:is(.c1,.c2,.c3,.c4,.c5,.c6) ::selection { background: var(--k); color: #fff; }
:is(.c1,.c2,.c3,.c4,.c5,.c6) :focus-visible {
outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) {
scrollbar-color: var(--a) var(--bg);
scrollbar-width: thin;
}
:is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content a:not([class]) {
color: var(--at); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
/************************************
* フッターの足もと
************************************
* ★★★ サイト名とコピーライトを、中央にそろえる。
*
* ★ Cocoon の fdt-logo は「左にロゴ・右にメニュー」の2段組。
* ★★ .footer-bottom-logo … position:absolute で左端に固定
* ★★ .footer-bottom-content … float:right で右端
* ★ ところがフッターメニューが空なので、
* ★★ 右側にコピーライトだけが浮く。
* ★★★ 左端と右端に1つずつ、置き忘れたように見える。
*
* ★★★ ここは色クラス（.c1〜.c6）の外に置くこと。
* ★ ワンタッチのデザイン変更（inc/skin.php）は、
* body に色クラスを足して、style.css から --変数だけを拾う。
* ★★ 配置には触らないので、外に書けば何色にしても戻らない。
* ★ 逆に .c1{...} の中へ書くと、その色のときしか効かない。
* ★★ 「直したのに、色を変えたら戻った」——いちばん分かりにくい壊れ方。
*
* ★ position:absolute を外すのを忘れない。
* ★★ float と text-align だけ直しても、絶対配置のままなので動かない。
* ★★★ 実機で、幅が141pxのまま変わらず、そこで1度 詰まった。
*
* ★ 実機で確かめた：パソコン(1280) 中央633 ／ スマホ(375) 中央188。
*/
.footer-bottom.fdt-logo.fnm-text-width .footer-bottom-logo,
.footer-bottom.fdt-logo.fnm-text-width .footer-bottom-content {
position: static;
float: none;
display: block;
width: auto;
text-align: center;
}
.footer-bottom.fdt-logo.fnm-text-width .footer-bottom-logo {
margin: 0 0 8px;
}
/************************************
* 端末が暗い設定のとき
************************************
* ★★ 個別のセレクタを潰していく方法は、必ず取りこぼす。
*
* 前回それをやって、サイドバーが白いまま残った。
* 原因は、親テーマ（Cocoon）が
* .header-container, .main, .sidebar, .footer {
* background: var(--cocoon-white-color);
* }
* のように「色変数」で塗っていたこと。
* こちらが .sidebar を狙い撃ちしても、他の箱が同じ変数で白いままになる。
*
* なので、狙うのは箱ではなく変数のほう。
* 親テーマの色の定義そのものを暗い側に置き換えれば、
* その変数を使っている 170 か所あまりが、まとめて追従する。
* 親テーマが将来どこかに白い箱を足しても、同じ変数を使う限り追従する。
************************************/
@media (prefers-color-scheme: dark) {
/* ★ .nd が付いているときは、暗い版を当てない。
* 端末を暗い設定にしたまま、明るい見た目で使いたい人のため。
* （設定でいつでも切り替えられる） */
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) {
color-scheme: dark;
/* --- 親テーマの色を、暗い側に置き換える --- */
--cocoon-text-color: #dfe3e8;
--cocoon-black-color: #dfe3e8;
--cocoon-grey-color: #9aa3ad;
/* --- こちらの色 --- */
--tx:#dfe3e8;
--tx2:#9aa3ad;
}
/* ★★ 暗い版でも、地の色を色ごとに変える。
* ここを共通の1色にしてしまうと、差し色しか変わらず、
* 6種類が並んでもほぼ同じに見える。
* 端末を暗い設定にしている人にとっては、それが「いつもの見た目」なので、
* 散らすための仕組みが、そこだけ働かないことになる。
*
* --cocoon-white-color は親テーマが面に使っている変数。
* これを色ごとに変えることで、ヘッダーもサイドバーもまとめて追従する。 */
.c1:not(.nd) { --k:#a1bbd9; --a:#397bc6; --at:#5e97d9; --al:#232c36;
--bg:#0f1317; --sf:#1a1f26; --ln:#364351;
--cocoon-white-color:#1a1f26; --cocoon-thin-color:#364351;
--cocoon-xx-thin-color:#232c36; --cocoon-xxx-thin-color:#232c36;
--cocoon-basic-border-color:#364351; --cocoon-custom-border-color:#364351;
--cocoon-current-background-color:#232c36; --cocoon-tab-label-color:#232c36; }
.c2:not(.nd) { --k:#c0a8dc; --a:#9059cf; --at:#aa7be0; --al:#2c2336;
--bg:#130f17; --sf:#1f1a26; --ln:#433651;
--cocoon-white-color:#1f1a26; --cocoon-thin-color:#433651;
--cocoon-xx-thin-color:#2c2336; --cocoon-xxx-thin-color:#2c2336;
--cocoon-basic-border-color:#433651; --cocoon-custom-border-color:#433651;
--cocoon-current-background-color:#2c2336; --cocoon-tab-label-color:#2c2336; }
.c3:not(.nd) { --k:#dca8be; --a:#c9457e; --at:#dd6e9e; --al:#36232b;
--bg:#170f13; --sf:#261a1f; --ln:#513642;
--cocoon-white-color:#261a1f; --cocoon-thin-color:#513642;
--cocoon-xx-thin-color:#36232b; --cocoon-xxx-thin-color:#36232b;
--cocoon-basic-border-color:#513642; --cocoon-custom-border-color:#513642;
--cocoon-current-background-color:#36232b; --cocoon-tab-label-color:#36232b; }
.c4:not(.nd) { --k:#d7b19d; --a:#ba6236; --at:#d67e51; --al:#362923;
--bg:#17120f; --sf:#261e1a; --ln:#513f36;
--cocoon-white-color:#261e1a; --cocoon-thin-color:#513f36;
--cocoon-xx-thin-color:#362923; --cocoon-xxx-thin-color:#362923;
--cocoon-basic-border-color:#513f36; --cocoon-custom-border-color:#513f36;
--cocoon-current-background-color:#362923; --cocoon-tab-label-color:#362923; }
.c5:not(.nd) { --k:#9fce88; --a:#4d922a; --at:#57b22a; --al:#293623;
--bg:#12170f; --sf:#1e261a; --ln:#3f5136;
--cocoon-white-color:#1e261a; --cocoon-thin-color:#3f5136;
--cocoon-xx-thin-color:#293623; --cocoon-xxx-thin-color:#293623;
--cocoon-basic-border-color:#3f5136; --cocoon-custom-border-color:#3f5136;
--cocoon-current-background-color:#293623; --cocoon-tab-label-color:#293623; }
.c6:not(.nd) { --k:#88cec5; --a:#298e81; --at:#29ae9c; --al:#233634;
--bg:#0f1716; --sf:#1a2625; --ln:#36514d;
--cocoon-white-color:#1a2625; --cocoon-thin-color:#36514d;
--cocoon-xx-thin-color:#233634; --cocoon-xxx-thin-color:#233634;
--cocoon-basic-border-color:#36514d; --cocoon-custom-border-color:#36514d;
--cocoon-current-background-color:#233634; --cocoon-tab-label-color:#233634; }
/* 薄い文字 */
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(
.entry-card-snippet, .entry-card-meta, .post-date, .entry-date, .copyright
) { color: var(--tx2); }
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.sidebar a, .navi a, .footer a) { color: var(--tx); }
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.sidebar a:hover, .navi a:hover, .footer a:hover) {
color: var(--at);
}
/* 入力欄 */
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(input, textarea, select) {
background: var(--bg);
color: var(--tx);
border: 1px solid var(--ln);
}
/* 変数を使わず、直接白を塗っている箱（親テーマ側の書き方が古い部分） */
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.go-to-top-button, .menu-content) {
background: var(--sf);
color: var(--tx);
}
/* カード */
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) .entry-card { background: transparent; }
:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) .entry-card-wrap:hover .entry-card {
background: var(--al);
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.l3:not(.nd) .entry-card { background: var(--bg); }
/************************************
* 暗い画面で、読めなくなっていたところ（2026-08-30 に直した）
************************************
* ★★★ 実測で3か所が、読める基準（4.5:1）を大きく割っていた。
* ★ 比 1.22〜1.29。ほとんど見えない。
*
* ★★★ 原因はこの暗い版そのものにあった。
* ★ ここで --k と --a を「明るい色」に反転させている。
* ★★ 明るい地に置く文字として使うため。それは正しい。
* ★★★ ところが、それらを面の色に使って
* 白い文字を乗せている部品が、明るい版に3つあった。
* 暗い版では、明るい面に白文字＝消える。
* ★ 暗い版を用意してあったのは .b2 だけだった。
*
* ★ 直すのは色だけ。位置も形も、明るい版のまま。
************************************/
.b2:not(.nd) .cat-label { background: rgba(27,32,39,.92); color: var(--k); }
/* ★ b1 は、うすい地（暗い版では暗い地）に文字用の色。明るい版と同じ組み方。 */
.b1:not(.nd) .cat-label { background: var(--al); color: var(--at); }
/* ★ .b3 は、地に --k（暗い版では明るい）を使って白文字だった。
★★ 同じく、地を暗くして文字を --k にする。
★★★ 左の差し色（border-left: --a）は、そのまま効く。 */
/* ★ b3 は、面の色を地にして、主色の文字。暗い版でも 7:1 を満たす。 */
.b3:not(.nd) .cat-label { background: var(--sf); color: var(--k); }
/*
* ★★★ 親テーマが、変数を文字にも面にも使っているところ。
*
* ★ --cocoon-text-color を、こちらは「文字の色」として明るくした。
* ★★ 親テーマは、それを面の色にも使っていた。
* ★★★ 明るい面に、白い文字が乗る。比 1.29。
* ★ 変数を差し替えるやり方では直せない。名指しで押さえる。
*/
.copy-info { background: var(--sf); color: var(--tx); }
/*
* ★★★ 親テーマが直の値で面を塗っているところ。
*
* ★ #f9f9f9 と書いてあるので、変数を差し替えても追従しない。
* ★★ 文字だけが明るくなって、白い地の上で消える。比 1.22。
* ★ ここも名指しで押さえる。数は少ない。
*/
:is(.pagination-next-link, .comment-btn) {
background: var(--sf); color: var(--tx); border-color: var(--ln);
}
:is(.pagination-next-link, .comment-btn):hover {
background: var(--al); color: var(--tx);
}
}