@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){
/*必要ならばここにコードを書く*/
}
@charset "UTF-8";
/* =========================================================================
オタクデスク研究所 — 全体ビジュアルリフレッシュ CSS（設計案 / 未反映）
=========================================================================
作成: ワードプレスビルダー
v0.1 2026-08-29 初版ドラフト
v0.2 2026-08-29 コントラスト比を実測して配色を修正／実記事のHTML構造
（Gutenberg標準ブロック）に合わせて構成を3層に再編／
タイポグラフィ（行間・字間・段落間隔）を追加
v0.3 2026-08-29 CEOが配色案A（現状デフォルト）とフォントOption B
（見出しにZen Kaku Gothic New）を確定。Option Bの
--odl-font-heading 上書きを有効化。側の読み込み
実装は wordpress/snippets/webfont-zen-kaku-gothic-new.php
を参照（未反映）。残り3点（オレンジの強さ／実測データ
ボックス採用可否／AI画像明示表記の設置位置）は回答待ち
v0.4 2026-08-30 本番反映の事前確認（読み取り専用／§6-1）を実施し、
実際のCocoon 2.9.5出力・動的インラインCSSと突き合わせて
判明した4件の実装ミスを修正（本番へはまだ未反映）:
(1) `.entry-content`の行間指定が祖先要素止まりで、
Cocoon側`.entry-content>*{line-height:1.8}`という
直接ルールに負けて本文の行間に反映されていなかった
→ `.entry-content > *` に同形で明示指定を追加
(2) `.information-box`/`.alert-box`/`.memo-box`が
`border-left`のみの上書きで、Cocoon既定の4辺
borderショートハンドが上下右3辺に残っていた
→ 先に`border:none`でリセット
(3) `.speech-balloon`がCocoon実装`div.speech-balloon`
（詳細度0,1,1）より詳細度が低く、背景・枠線・文字
色・角丸のいずれも上書きできていなかった
→ `div.speech-balloon`に変更し、Cocoonが実際に参照
するCSS変数（--cocoon-custom-*）を上書きする方式に
修正。アイコンの実クラスも`.speech-icon img`に修正
(4) 存在しないID`#site-name`（死んだセレクタ）を削除
詳細は agent-workspace/ワードプレスビルダー/outputs/
visual-refresh-proposal-2026-08-29.md の §6-1 実施結果
を参照
対象: Cocoon Child（現状ほぼデフォルト設定）への上乗せCSS
スコープ: 配色・フォント・タイポグラフィ・各パーツの見た目のみ。
トップページ構成／メニュー構造／内部リンク／表示速度対策／
レイアウト（カラム幅・配置）の変更は含まない（別タスク）。
★ このファイルはまだ本番へ反映していません（提案・レビュー段階）。
配色案Aとフォント見出しOption Bは確定済みだが、本番のCocoon環境への
実反映（子テーマstyle.cssへの追記等）はまだ行っていない。
適用手順・事前チェックリスト・レビュー観点は下記を参照:
agent-workspace/ワードプレスビルダー/outputs/visual-refresh-proposal-2026-08-29.md
見た目の確認用プレビュー: wordpress/css/preview/visual-refresh-preview.html
Webフォント読み込み実装案: wordpress/snippets/webfont-zen-kaku-gothic-new.php
■ 構成
1. デザイントークン（:root） ← ここだけ変えれば全体の色が変わる
2. 配色の代替案B/C（コメントアウト） ← 差し替えるだけで別案を試せる
3. Webフォント有効化ブロック（コメントアウト・初期は無効＝追加DLゼロ）
4. 【第1層】確実に効く土台（HTML標準要素）
5. 【第2層】Cocoon構造パーツ（クラス名は要確認）
6. 【第3層】サイト独自クラス（.odl-*）
7. レスポンシブ微調整／アクセシビリティ
■ 適用の優先順位に関する注意
Cocoonでは「親テーマCSS → 子テーマstyle.css → Cocoon設定のカスタムCSS」
の順に後勝ちで適用される。本CSSが効かない場合は !important を足す前に、
(a) スキンが「スキンなし」か (b) Cocoon設定のカスタムCSS/色設定に既存
記述がないか、の順で確認すること。
========================================================================= */
/* =========================================================================
1. デザイントークン（カスタムプロパティ）
=========================================================================
数値はすべてコントラスト比を計算して決定している（WCAG 2.1基準）。
コメント末尾の「◯.◯:1」は白または背景色に対する実測コントラスト比。
========================================================================= */
:root {
/* ---- ニュートラル：紙・ノートのイメージ ------------------------------ */
--odl-bg: #F7F6F3; /* サイト全体の背景。純白より少し温かいオフホワイト＝「研究ノートの紙」 */
--odl-surface: #FFFFFF; /* 記事本文・カードの面。--odl-bgより明るくして浮かせる */
--odl-text: #262A2E; /* 本文。純黒を避けて長文の刺さる感じを緩和（13.4:1 AAA） */
--odl-text-muted: #5A6470; /* 日付・キャプション等の副次テキスト（5.6:1 AA）※青みグレーでネイビーと同族 */
--odl-border: #E3E1DB; /* 罫線・カード枠（装飾専用。文字色には使わない） */
--odl-border-strong: #CFCBC2; /* テーブル罫線など、少し強い区切り */
/* ---- 主色：ネイビー ＝「研究所」の構造色 ----------------------------- */
--odl-navy: #23324A; /* ヘッダー文字・見出し・ナビ背景・表ヘッダ（白文字で12.9:1 AAA） */
--odl-navy-deep: #182233; /* hover・フッター等の濃色（白文字で16.0:1 AAA） */
--odl-navy-tint: #EDF0F4; /* ネイビーの極薄面。見出し背景やゼブラ行に使う */
/* ---- アクセント：オレンジ ＝ 作業・工具・熱量 -------------------------
オレンジは彩度が高く「白文字を乗せると読めない」ため、用途別に3段に
分けている。ここを混同すると可読性が一気に落ちるので注意。 */
--odl-accent: #F2662C; /* 【装飾専用】罫線・下線・アイコン。この上に文字は置かない */
--odl-accent-strong: #C2450F; /* 【面】白文字を乗せるボタン等の背景（白文字で5.1:1 AA） */
--odl-accent-text: #B8420F; /* 【文字】本文リンクの文字色（白5.5:1／背景5.1:1 AA） */
--odl-accent-tint: #FDF1EA; /* 注意ボックス等の極薄面 */
/* ---- サブアクセント：ティール ＝ 実測・データ ------------------------- */
--odl-teal: #1F9E96; /* 【装飾専用】枠線・アイコン */
--odl-teal-deep: #12615C; /* 【文字】ラベル文字色（白7.3:1 AAA） */
--odl-teal-tint: #EAF4F3; /* 情報ボックスの極薄面 */
/* ---- フォント ---------------------------------------------------------
初期状態は「Option A：システムフォントのみ」＝Webフォントの追加
ダウンロードは一切発生しない（表示速度への影響ゼロ）。
・欧文はOSのUIフォント（system-ui / Segoe UI / SF）が拾う
・和文はそれらにグリフが無いので次の和文フォントへ自動的に落ちる
（macOS: ヒラギノ角ゴシック / Windows: 游ゴシック Medium /
Android: Noto Sans CJK）
・Windowsの游ゴシックはRegularだと線が細く痩せて見えるため、
意図的に "Yu Gothic Medium" を先に指定している（定番の対処）
Webフォントを使う案は下の「3. Webフォント有効化ブロック」を参照。 */
--odl-font-body:
system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
"Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック",
"BIZ UDPGothic", Meiryo, sans-serif;
--odl-font-heading: var(--odl-font-body);
/* 実測寸法（W420×D600×H720mm 等）を等幅で見せて「計測データ」感を出す */
--odl-font-mono:
ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Roboto Mono",
"BIZ UDGothic", Menlo, monospace;
/* ---- 形・余白のトークン ---------------------------------------------- */
--odl-radius: 8px; /* カード・ボックスの角丸 */
--odl-radius-sm: 4px; /* ラベル・タグなど小さい要素の角丸 */
--odl-shadow: 0 1px 3px rgba(35, 50, 74, .08); /* 影は薄く。派手にしない */
--odl-line: 1.9; /* 和文本文の行間。1.8〜2.0が読みやすい */
}
/* =========================================================================
2. 【切替用】配色の代替案（初期は無効・コメントアウト）
=========================================================================
採用する場合は、対象ブロックのコメントを外すだけでサイト全体の色が
切り替わる（下の実装部分は一切書き換え不要）。
========================================================================= */
/* ---- 案B「グラファイト × アンバー」：より無骨な"作業場・工具箱"寄り ----
ネイビーの知的さより、道具感・ガレージ感を前に出したい場合。
PC/ガジェット系サイトに寄りすぎないよう、アンバー（琥珀）で温度を残す。
:root {
--odl-navy: #23262B;
--odl-navy-deep: #15181C;
--odl-navy-tint: #EFEFED;
--odl-accent: #E08A1E;
--odl-accent-strong: #A8600A;
--odl-accent-text: #9C5A08;
--odl-accent-tint: #FBF3E4;
}
*/
/* ---- 案C「ディープティール主役」：より"ラボ・実験室"寄り ----
ティールを主色に上げ、オレンジを差し色に回す。「研究所」感が最も強い。
反面、模型・ホビーらしい親しみやすさはA案より弱くなる。
:root {
--odl-navy: #14544F;
--odl-navy-deep: #0F423E;
--odl-navy-tint: #E9F1F0;
--odl-teal: #F2662C;
--odl-teal-deep: #B8420F;
--odl-teal-tint: #FDF1EA;
}
*/
/* =========================================================================
3. 【切替用】Webフォント有効化ブロック（初期は無効）
=========================================================================
■ トレードオフ（判断材料）
・Option A（システムフォントのみ）
追加ダウンロード 0KB。表示のちらつき（FOUT）なし。
欠点：見た目がOSごとに変わる／独自性は出にくい。
・Option B（見出しだけWebフォント：Zen Kaku Gothic New 700）
★ 2026-08-29 CEO確定・現在有効。下の「3. Webフォント有効化
ブロック」内で --odl-font-heading を上書き済み。
幾何学的でクリーンな和文ゴシック。「研究所」の知的さとホビーの
親しみやすさの中間で、模型×PCというテーマに合う。
欠点：和文Webフォントは字数が多く、Google Fontsがunicode-range
で分割配信しても実転送量はページ内の使用文字に依存する。
実際の増加量は本番で計測が必要 → [要実測]
・Option C（本文までWebフォント化）
見た目の統一感は最大だが転送量が大きく、表示速度対策（別タスク）
と正面から衝突するため非推奨。
・数字だけ等幅Webフォント（Roboto Mono等・ラテン文字のみ）
和文を含まないためサブセットが小さく、B案より軽い。実測値の
見せ方だけを強化したい場合の中間案。
■ ライセンス
・Zen Kaku Gothic New / Noto Sans JP / Roboto Mono … SIL Open Font
License 1.1。商用利用可、サーバーへの設置（セルフホスト）も可。
・游ゴシック / ヒラギノ / Meiryo / BIZ UD … OS同梱フォント。
CSSで「端末にあれば使う」と指定するのは配布に当たらず問題ないが、
フォントファイル自体をサーバーに置いて配信してはいけない。
■ 有効化する手順（CEO承認後）
1) フォントファイルの読み込みを追加する。CSSのこの記述だけでは
有効にならず、への読み込み実装が別途必要。
表示速度対策（次フェーズ）との整合を考えるとセルフホスト推奨。
外部読み込みで済ませる場合の例:
2) 下のコメントを外す。
■ 2026-08-29 CEO確定: Option B（見出しWebフォント）を採用。
下の --odl-font-heading 上書きを有効化した（このCSSファイル内の変更の
みで、側の読み込み実装はまだ行っていない）。
読み込み実装の方針・スニペット案は下記を参照:
wordpress/snippets/webfont-zen-kaku-gothic-new.php
本番への適用（子テーマfunctions.phpへの追記等）はCEOの別途承認後。
========================================================================= */
:root {
--odl-font-heading: "Zen Kaku Gothic New", var(--odl-font-body);
}
/* 数字だけ等幅Webフォントにする場合（上とは独立して使える・今回は未確定） */
/*
:root {
--odl-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}
*/
/* =========================================================================
4. 【第1層】確実に効く土台
=========================================================================
実記事（wordpress/templates/posts/）はGutenberg標準ブロックだけで
書かれており、出力されるのは p / h2 / h3 / ul / ol / figure / img が中心。
つまりサイトの印象の8割はこの層で決まる。ここが最優先。
========================================================================= */
/* ---- 4-1. 全体の地色と文字色 ---- */
body {
background-color: var(--odl-bg);
color: var(--odl-text);
font-family: var(--odl-font-body);
}
/* 記事本文やウィジェットが乗る「面」を白にして、地のオフホワイトと分離する */
.article,
.main,
#main,
.sidebar,
.box-widget,
.sidebar-style-box {
background-color: var(--odl-surface);
}
/* テキスト選択時の色をブランド色に */
::selection { background-color: var(--odl-accent); color: #FFFFFF; }
/* ---- 4-2. 本文タイポグラフィ（今回いちばん効く箇所） ----
Cocoon既定のままだと行間が詰まり気味で、和文長文が読みづらい。
行間・字間・段落間隔を整えるだけで「素人っぽさ」がかなり消える。 */
.entry-content {
font-size: 1.0625rem; /* 約17px。和文は16pxだとやや窮屈 */
line-height: var(--odl-line);
letter-spacing: .02em; /* 和文はごく僅かに開けると読みやすい */
}
/* [2026-08-30 本番読み取り確認で判明・修正] Cocoonの動的インラインCSSに
`.entry-content>*{line-height:1.8}` という直接ルールが存在し、pタグ等の
実要素に直接効いている。上の`.entry-content{line-height:...}`は祖先要素
への指定＝子要素へは「継承値」でしかなく、直接一致するルールがある要素
では継承値は採用されない。そのため祖先だけを書き換えても本文の行間は
変わらない。実要素を同じ形（`.entry-content>*`・詳細度は同一）で直接
指定し、後勝ちで上書きする。 */
.entry-content > * { line-height: var(--odl-line); }
.entry-content p {
margin-top: 0;
margin-bottom: 1.6em; /* 段落間をしっかり空けてスマホでの塊感を減らす */
}
/* 行頭・行末の約物（、。「」）の空きを詰める。和文の見栄えが締まる */
.entry-content { font-feature-settings: "palt" 1; }
/* 単語の途中で不自然に折り返さない（英数字混じりの型番対策） */
.entry-content { overflow-wrap: break-word; }
/* ---- 4-3. 見出し ----
Cocoon既定のh2はグレー背景ベタ。これを外し、左のオレンジ罫で
「セクションの始まり」を示す。走査（流し読み）しやすくする狙い。 */
.entry-title,
.article-title,
.article h1 {
font-family: var(--odl-font-heading);
color: var(--odl-navy);
font-weight: 700;
line-height: 1.45;
letter-spacing: .01em;
font-feature-settings: "palt" 1;
}
.entry-content h2 {
font-family: var(--odl-font-heading);
color: var(--odl-navy);
font-weight: 700;
line-height: 1.5;
background: none; /* Cocoon既定の背景ベタを打ち消す */
border: none; /* 既定の枠線も一旦リセット */
border-left: 6px solid var(--odl-accent);
padding: .1em 0 .1em .7em;
margin: 3em 0 1.1em; /* 前の節との間を大きく取る */
font-feature-settings: "palt" 1;
}
.entry-content h3 {
font-family: var(--odl-font-heading);
color: var(--odl-navy);
font-weight: 700;
line-height: 1.55;
background: none;
border: none;
border-bottom: 2px solid var(--odl-border);
padding: 0 0 .35em;
margin: 2.4em 0 .9em;
font-feature-settings: "palt" 1;
}
.entry-content h4 {
color: var(--odl-navy-deep);
font-weight: 700;
background: none;
border: none;
border-left: 3px solid var(--odl-border-strong);
padding-left: .6em;
margin: 2em 0 .8em;
}
/* ---- 4-4. リンク ----
本文リンクは下線を残す（下線を消すとリンクだと気づかれにくい）。
色は白背景でAA基準を満たす濃いオレンジ。 */
.entry-content a {
color: var(--odl-accent-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
text-decoration-color: rgba(242, 102, 44, .55); /* 下線は本文より控えめに */
transition: color .15s ease, text-decoration-color .15s ease;
}
.entry-content a:hover {
color: var(--odl-navy);
text-decoration-color: var(--odl-navy);
}
/* 画像リンクには下線を付けない */
.entry-content .wp-block-image a { text-decoration: none; }
/* :has() 非対応ブラウザでは上の行だけが効くよう、あえて別々に書いている
（1つのセレクタリストにまとめると、非対応環境でルール全体が無効になるため） */
.entry-content a:has(> img) { text-decoration: none; }
/* ---- 4-5. リスト（記事内で多用されている） ---- */
.entry-content ul,
.entry-content ol {
margin: 0 0 1.6em;
padding-left: 1.5em;
}
.entry-content li { margin-bottom: .55em; line-height: 1.85; }
.entry-content li::marker { color: var(--odl-accent); } /* 行頭記号だけ差し色 */
.entry-content ol li::marker { color: var(--odl-navy); font-weight: 700; }
.entry-content li > ul,
.entry-content li > ol { margin-top: .55em; }
/* ---- 4-6. 強調 ---- */
.entry-content strong { color: var(--odl-navy-deep); font-weight: 700; }
.entry-content mark {
background: linear-gradient(transparent 62%, rgba(242, 102, 44, .28) 62%);
color: inherit;
padding: 0 .1em;
}
/* ---- 4-7. 画像・キャプション ----
実物写真がこのサイトの主役なので、枠は最小限にして写真を邪魔しない。 */
.entry-content figure.wp-block-image { margin: 2em 0; }
.entry-content .wp-block-image img {
border-radius: var(--odl-radius);
box-shadow: var(--odl-shadow);
}
.entry-content figcaption,
.entry-content .wp-block-image figcaption {
color: var(--odl-text-muted);
font-size: .875em;
line-height: 1.7;
text-align: left;
margin-top: .7em;
padding-left: .7em;
border-left: 2px solid var(--odl-border);
}
/* ---- 4-8. 引用 ---- */
.entry-content blockquote {
background-color: var(--odl-bg);
border: none;
border-left: 4px solid var(--odl-border-strong);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
color: var(--odl-text);
padding: 1.1em 1.3em;
margin: 2em 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
display: block;
margin-top: .8em;
color: var(--odl-text-muted);
font-size: .875em;
font-style: normal;
}
/* ---- 4-9. 表（スペック比較・実測一覧） ---- */
.entry-content table {
border-collapse: collapse;
border: 1px solid var(--odl-border-strong);
margin: 2em 0;
font-size: .95em;
}
.entry-content table th {
background-color: var(--odl-navy);
color: #FFFFFF;
font-family: var(--odl-font-heading);
font-weight: 700;
border-color: var(--odl-navy-deep);
padding: .7em .9em;
text-align: left;
}
.entry-content table td {
color: var(--odl-text);
border: 1px solid var(--odl-border-strong);
padding: .7em .9em;
}
/* 行を1行おきに薄く塗って、横に長い表でも視線が迷わないようにする */
.entry-content table tbody tr:nth-child(even) td {
background-color: var(--odl-navy-tint);
}
/* ---- 4-10. 区切り線 ---- */
.entry-content hr {
border: none;
border-top: 1px solid var(--odl-border);
margin: 3em 0;
}
/* =========================================================================
5. 【第2層】Cocoon構造パーツ
=========================================================================
[要確認] この節のクラス名・ID名は一般的なCocoonの出力構造に基づく想定。
Cocoonのバージョン差で異なる可能性があるため、本番反映の許可が出た
段階でブラウザの検証ツールで実際の出力と突き合わせること。
効かないセレクタがあっても第1層の効果は損なわれない設計にしている。
========================================================================= */
/* ---- 5-1. ヘッダー ----
ヘッダーは白基調＋下罫線のみ。ナビ側にネイビーを置いて重心を作る。
（レイアウト・ロゴ配置は変更しない＝色と文字だけ） */
#header-container,
#header,
#header-in {
background-color: var(--odl-surface);
}
#header-container { border-bottom: 1px solid var(--odl-border); }
/* [2026-08-30] `#site-name`というIDは実出力に存在しない（実際は
class="site-name site-name-text-link"）。死んでいたセレクタを削除。 */
.site-name-text,
.site-name-text-link {
color: var(--odl-navy);
font-family: var(--odl-font-heading);
font-weight: 700;
letter-spacing: .02em;
}
.tagline { color: var(--odl-text-muted); }
/* ---- 5-2. グローバルナビ ----
並び順・項目の変更はしない（メニュー構造は別タスク）。色だけ。 */
#navi,
#navi-in,
#navi .navi-in > ul {
background-color: var(--odl-navy);
}
#navi .navi-in > ul > li > a {
color: #FFFFFF;
font-family: var(--odl-font-heading);
font-weight: 700;
letter-spacing: .03em;
}
#navi .navi-in > ul > li > a:hover {
background-color: var(--odl-navy-deep);
color: var(--odl-accent); /* 濃紺の上のオレンジは5.1:1でAA達成 */
}
/* ドロップダウン（30MLの子カテゴリー等で使う想定） */
#navi .navi-in > ul .sub-menu {
background-color: var(--odl-navy-deep);
border-top: 3px solid var(--odl-accent);
}
#navi .navi-in > ul .sub-menu a { color: #E6E8EB; }
#navi .navi-in > ul .sub-menu a:hover { color: var(--odl-accent); }
/* モバイルのメニューボタン（配置は変えず色のみ） */
.mobile-menu-buttons .menu-button a,
.mobile-menu-buttons .menu-icon { color: var(--odl-navy); }
/* ---- 5-3. パンくず ---- */
#breadcrumb,
.breadcrumb { color: var(--odl-text-muted); font-size: .8125rem; }
#breadcrumb a,
.breadcrumb a { color: var(--odl-text-muted); }
#breadcrumb a:hover,
.breadcrumb a:hover { color: var(--odl-accent-text); }
/* ---- 5-4. 記事一覧カード ---- */
.entry-card-wrap,
.widget-entry-card-wrap { border-radius: var(--odl-radius); }
.entry-card-title,
.widget-entry-card-title {
color: var(--odl-navy);
font-family: var(--odl-font-heading);
font-weight: 700;
line-height: 1.55;
}
.entry-card-snippet { color: var(--odl-text-muted); line-height: 1.75; }
.entry-card-info,
.e-card-info,
.post-date,
.post-update { color: var(--odl-text-muted); }
/* Cocoonのリンク領域共通クラス。hover時の面をブランド色の極薄にする */
.a-wrap:hover { background-color: var(--odl-navy-tint); }
.entry-card-thumb img,
.widget-entry-card-thumb img { border-radius: var(--odl-radius-sm); }
/* ---- 5-5. カテゴリーラベル・タグ ----
[注記] 6カテゴリーごとの色分けは今回は行わず、サイト全体で単色に統一する。
カテゴリー別配色は category-map.md に基づきカテゴリー構造実装タスク
（別タスク）で検討する。今ここで色を割り振ると、後のカテゴリー設計と
食い違うリスクがあるため。 */
.cat-label,
.cat-link,
.category-link {
background-color: var(--odl-navy);
color: #FFFFFF;
border: none;
border-radius: var(--odl-radius-sm);
font-size: .75rem;
font-weight: 700;
letter-spacing: .03em;
}
.tag-link,
.tag-links a {
background-color: var(--odl-surface);
color: var(--odl-teal-deep);
border: 1px solid var(--odl-teal);
border-radius: 999px;
font-size: .75rem;
padding: .15em .8em;
}
.tag-link:hover,
.tag-links a:hover {
background-color: var(--odl-teal-tint);
color: var(--odl-teal-deep);
}
/* ---- 5-6. 目次（Cocoon標準の目次機能） ---- */
.toc {
background-color: var(--odl-bg);
border: 1px solid var(--odl-border);
border-radius: var(--odl-radius);
}
.toc-title {
color: var(--odl-navy);
font-family: var(--odl-font-heading);
font-weight: 700;
}
.toc-content a { color: var(--odl-text); text-decoration: none; }
.toc-content a:hover { color: var(--odl-accent-text); text-decoration: underline; }
.toc-list > li::marker { color: var(--odl-accent); }
/* ---- 5-7. フキダシ（案内役キャラクター「桐生ここね」用） ----
[2026-08-30 本番Cocoon 2.9.5の実出力で確認済み] 構造は
.speech-wrap > .speech-person(.speech-icon > img) + .speech-balloon(.speech-name)
で一致。ただし2点、想定と実装を合わせる必要があった。
(1) Cocoon本体は`div.speech-balloon{background-color:var(--cocoon-custom-
background-color); border-color:var(--cocoon-custom-border-color);
color:var(--cocoon-custom-text-color); border-radius:6px}`という
「タグ+クラス」セレクタ（詳細度 0,1,1）で書かれている。旧案の
`.speech-balloon{...}`はクラス単独（詳細度 0,1,0）で負けており、
背景色・枠線色・文字色・角丸のいずれも上書きできていなかった。
同じ詳細度になるよう`div.speech-balloon`に修正。
(2) 生の色プロパティを直接書くのではなく、Cocoonが実際に参照している
CSS変数（--cocoon-custom-background-color 等）を上書きする方式に
変更した。この変数は`.speech-wrap`が既定値を持ち`.speech-balloon`
に継承されているだけなので、`.speech-balloon`自身に直接re-declare
すれば「直接一致する宣言は継承値に必ず勝つ」というCSSの原則により、
詳細度に関係なく確実に効く。将来Cocoon管理画面でキャラクターごとに
色を設定した場合も、このサイト独自のティール配色を優先させたいため
この方式が適切。
(3) アイコンの実クラスは `.speech-icon-image` ではなく
`.speech-icon img, .speech-icon amp-img` だった。 */
div.speech-balloon {
--cocoon-custom-background-color: var(--odl-surface);
--cocoon-custom-border-color: var(--odl-teal);
--cocoon-custom-text-color: var(--odl-text);
border-radius: var(--odl-radius);
line-height: 1.85;
}
.speech-name {
color: var(--odl-teal-deep);
font-weight: 700;
font-size: .8125rem;
}
.speech-icon img,
.speech-icon amp-img { border-color: var(--odl-teal); }
/* 吹き出しの三角部分。Cocoonは疑似要素で描画しているため色を合わせる。
[要確認] 三角の実際の配色プロパティ（border-right-color等の具体的な
組み合わせ）は本番の複数ブレークポイントでの目視確認がまだ済んでいない。
上のCSS変数上書きだけで三角も追従する可能性があるため、まずはそちらの
効果を確認してから、必要な場合のみ以下を有効にする。 */
.speech-balloon::before { border-right-color: var(--odl-teal); }
.speech-balloon::after { border-right-color: var(--odl-surface); }
.sbp-r .speech-balloon::before { border-left-color: var(--odl-teal); }
.sbp-r .speech-balloon::after { border-left-color: var(--odl-surface); }
/* ---- 5-8. Cocoon標準ボックス ----
[2026-08-30 本番読み取り確認で判明・修正] Cocoon本体は
`.information-box,.information{background:#f3fafe;border:1px solid #bde4fc}`
のように、四辺分の`border`ショートハンドで自前の枠線を設定済み。
下のように`border-left`だけを上書きすると、Cocoon既定の淡い枠線が
上下右の3辺に残ってしまい「左だけ太い枠＋他3辺に薄い枠」という
意図しない見た目になる。先に`border: none`で四辺をリセットしてから
`border-left`を指定する（.alert-box/.memo-boxも同様）。 */
.information-box,
.information {
background-color: var(--odl-teal-tint);
border: none;
border-left: 4px solid var(--odl-teal);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
}
.alert-box,
.caution-box,
.alert {
background-color: var(--odl-accent-tint);
border: none;
border-left: 4px solid var(--odl-accent);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
}
.blank-box {
background-color: var(--odl-bg);
border: 1px solid var(--odl-border);
border-radius: var(--odl-radius);
}
.memo-box,
.comment-box {
background-color: var(--odl-navy-tint);
border: none;
border-left: 4px solid var(--odl-navy);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
}
/* ---- 5-9. ボタン（アフィリエイトリンク・CTA） ----
[要確認] Cocoonのボタンは .btn-wrap > a、ブロックエディタは
.wp-block-button__link の想定。 */
.btn-wrap > a,
.wp-block-button__link,
.odl-btn {
background-color: var(--odl-accent-strong); /* 白文字で5.1:1。#F2662Cだと不足 */
color: #FFFFFF;
border: none;
border-radius: var(--odl-radius);
font-family: var(--odl-font-heading);
font-weight: 700;
letter-spacing: .02em;
box-shadow: var(--odl-shadow);
transition: background-color .15s ease, transform .1s ease;
}
.btn-wrap > a:hover,
.wp-block-button__link:hover,
.odl-btn:hover {
background-color: #A63A0C; /* さらに濃く。押した感を出す */
color: #FFFFFF;
transform: translateY(-1px);
}
/* 副次的なボタン（「詳しくはこちら」等）はネイビーの枠線だけにして、
オレンジのCTAと役割を分ける */
.odl-btn--sub {
background-color: transparent;
color: var(--odl-navy);
border: 2px solid var(--odl-navy);
box-shadow: none;
}
.odl-btn--sub:hover { background-color: var(--odl-navy); color: #FFFFFF; }
/* ---- 5-10. ブログカード（内部リンク） ----
内部リンクの「設計」は別タスク。ここでは見た目のみ整える。 */
.blogcard-wrap,
.internal-blogcard,
.external-blogcard {
border: 1px solid var(--odl-border);
border-radius: var(--odl-radius);
background-color: var(--odl-surface);
box-shadow: var(--odl-shadow);
}
.blogcard-wrap:hover { border-color: var(--odl-accent); }
.blogcard-title { color: var(--odl-navy); font-weight: 700; }
.blogcard-snippet,
.blogcard-footer { color: var(--odl-text-muted); }
.blogcard-label {
background-color: var(--odl-navy);
color: #FFFFFF;
border-radius: var(--odl-radius-sm);
}
/* ---- 5-11. サイドバー・ウィジェット見出し ---- */
.sidebar h3,
.widget-sidebar-title,
.widget-title {
color: var(--odl-navy);
font-family: var(--odl-font-heading);
font-weight: 700;
background: none;
border: none;
border-bottom: 2px solid var(--odl-accent);
padding-bottom: .4em;
}
/* ---- 5-12. 関連記事・前後記事 ---- */
.related-entry-heading,
.pager-post-navi .prev-post-title,
.pager-post-navi .next-post-title { color: var(--odl-navy); }
.related-entry-card-title { color: var(--odl-navy); font-weight: 700; }
/* ---- 5-13. フッター ---- */
#footer,
.footer-in,
.footer-bottom {
background-color: var(--odl-navy-deep);
color: #E6E8EB; /* ネイビー深に対し16:1近く。十分読める */
}
#footer a,
.footer-bottom a { color: #E6E8EB; }
#footer a:hover,
.footer-bottom a:hover { color: var(--odl-accent); }
.footer-title { color: #FFFFFF; font-family: var(--odl-font-heading); }
#footer .widget-title { border-bottom-color: var(--odl-accent); color: #FFFFFF; }
/* =========================================================================
6. 【第3層】サイト独自クラス（.odl-*）
=========================================================================
Cocoonにもブロックエディタにも存在しない、このサイト固有のパーツ。
使うにはアーティクルライター側の記事テンプレートにクラスを組み込む
必要がある（本CSSを当てるだけでは自動的には付かない）。
========================================================================= */
/* ---- 6-1. 実測データボックス ----
site-concept.md の「実物 × 実測 × 実体験」を視覚化する、このサイト
最大の差別化パーツ。数値だけ等幅にして「計測結果」に見せる。
使用例:
オタクデスク研究所 実測
デスク天板：W□□□ × D□□□ mm［要実測］
*/
.odl-spec-box {
background-color: var(--odl-surface);
border: 1px solid var(--odl-teal);
border-top: 4px solid var(--odl-teal);
border-radius: var(--odl-radius);
padding: 1.1em 1.3em;
margin: 2em 0;
box-shadow: var(--odl-shadow);
}
.odl-spec-box .odl-spec-label {
display: inline-block;
color: var(--odl-teal-deep);
font-weight: 700;
font-size: .75rem;
letter-spacing: .08em;
margin: 0 0 .7em;
}
/* ラベル頭の小さな四角。計測器のインジケーターのイメージ */
.odl-spec-box .odl-spec-label::before {
content: "";
display: inline-block;
width: .55em; height: .55em;
margin-right: .5em;
background-color: var(--odl-teal);
border-radius: 1px;
}
.odl-spec-figure {
font-family: var(--odl-font-mono);
font-weight: 700;
font-size: 1.05em;
color: var(--odl-navy);
letter-spacing: .01em;
}
/* ---- 6-2. AI画像であることの明示表記 ----
CLAUDE.md 10条／image-guide.md の必須表示。目立ちすぎず、しかし
見落とされない程度の存在感にする。
使用例: 案内役キャラクター画像には生成AIを使用しています
*/
.odl-ai-note {
color: var(--odl-text-muted);
font-size: .78rem;
line-height: 1.7;
background-color: var(--odl-bg);
border-left: 3px solid var(--odl-border-strong);
border-radius: 0 var(--odl-radius-sm) var(--odl-radius-sm) 0;
padding: .55em .9em;
margin: 1.2em 0;
}
/* ---- 6-3. 未確定プレースホルダーの下書き表示（本番では使わない） ----
[要確認] [要実測] [写真：〇〇] を執筆・校正中に目立たせるための任意クラス。
公開記事でこのクラスを残さないこと。 */
.odl-todo {
background-color: #FFF6D6;
color: #7A5A00;
border-radius: var(--odl-radius-sm);
padding: 0 .3em;
font-size: .9em;
}
/* ---- 6-4. 汎用の補足・注意 ---- */
.odl-note {
background-color: var(--odl-teal-tint);
border-left: 4px solid var(--odl-teal);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
padding: 1em 1.2em;
margin: 2em 0;
}
.odl-caution {
background-color: var(--odl-accent-tint);
border-left: 4px solid var(--odl-accent);
border-radius: 0 var(--odl-radius) var(--odl-radius) 0;
padding: 1em 1.2em;
margin: 2em 0;
}
.odl-note > :last-child,
.odl-caution > :last-child,
.odl-spec-box > :last-child { margin-bottom: 0; }
/* =========================================================================
7. レスポンシブ微調整・アクセシビリティ
=========================================================================
モバイル対応そのものは別タスクだが、「文字サイズ・行間の比率」は
タイポグラフィ設計の一部なので最小限ここに含める。
レイアウト（カラム構成・要素の並び）は一切変更していない。
========================================================================= */
/* 見出しは画面幅に応じてなめらかに変化させる（PCで大きく、スマホで詰める） */
.entry-title,
.article h1 { font-size: clamp(1.35rem, 1.05rem + 1.6vw, 1.9rem); }
.entry-content h2 { font-size: clamp(1.2rem, 1.02rem + 1.0vw, 1.5rem); }
.entry-content h3 { font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.25rem); }
.entry-content h4 { font-size: 1rem; }
@media screen and (max-width: 480px) {
.entry-content { font-size: 1rem; line-height: 1.85; }
.entry-content p { margin-bottom: 1.45em; }
.entry-content h2 { margin-top: 2.4em; padding-left: .6em; border-left-width: 5px; }
/* 横に長い表がはみ出さないよう横スクロールを許可（レイアウト自体は不変） */
.entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* キーボード操作時のフォーカス位置を分かるようにする（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--odl-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* 動きを減らす設定の端末では、hoverの移動アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
.btn-wrap > a,
.wp-block-button__link,
.odl-btn,
.entry-content a { transition: none; }
.btn-wrap > a:hover,
.wp-block-button__link:hover,
.odl-btn:hover { transform: none; }
}
/* 印刷時は装飾を落とし、本文を読める状態にする */
@media print {
body { background: #FFFFFF; }
.entry-content a { color: var(--odl-text); text-decoration: underline; }
.entry-content .wp-block-image img { box-shadow: none; }
}
/* [要確認] Cocoonの「ダークモード」機能を有効にしている場合、本CSSの
固定色（白背景・濃色文字）と衝突する可能性がある。ダークモード対応は
今回のスコープ外。有効化されているかを本番設定で確認すること。 */