@charset "UTF-8";
/*
Theme Name:   Flash Blog Child - Circuit Calm Guide
Theme URI:    https://circuit-calm-guide.com
Description:  Flash Blog(親テーマ)を土台にしたCircuit Calm Guide専用の子テーマ。
Author:       Zenken
Template:     flash-blog
Version:      1.3.0
Text Domain:  flash-blog-child
*/

/* =========================================================
   Circuit Calm Guide ブランドトークン
   -----------------------------------------------------------
   親テーマ(flash-blog)には :root のCSS変数が存在しない
   （grep確認済み。"style.css"内の ":root" 一致は svg:not(:root) のみ）。
   そのため以下は子テーマ内でのみ完結する独自トークンであり、
   実際の上書きはすべて親テーマに実在する通常セレクタに対して行う。
   ========================================================= */
/* デザインモデル（配色）: ゲンロクWeb・Motor-Fan（https://motor-fan.jp/）
   2026-07-29 に実測した値へ差し替え（旧モデル The Road Rat の選定経緯・実測値は design-notes.md に温存）。
     下地 #F9F9F9 / カード面 #FFFFFF / 文字 #282828 / ヘッダー・フッター 黒(#000000)基調 / リンク #0033CC（下線なし）
   タイポグラフィ（本文16px・行間1.8・見出しweight600・uppercase解除等）は配色と無関係のため
   本差し替えでは無変更＝旧モデル選定時の方針をそのまま維持している。
   和文サイト向けの意図的な差分は各トークン・各ブロックのコメントに明記した。 */
:root {
    --ccg-font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    --ccg-ink:           #0a0a0a; /* 見出し・ボタン背景・フッター。新モデルの「ヘッダー・フッター黒(#000000)基調」とも合致し、
                                     #282828より暗い階調のため無変更（意図的維持） */
    --ccg-text:          #282828; /* 本文。新モデル実測 #282828 に更新（旧#1a1a1a） */
    --ccg-text-soft:     #565656; /* 補助テキスト・ボタンhover（無彩色グレー。新モデルでも変更不要） */
    --ccg-bg:            #f9f9f9; /* サイト背景（新モデル実測 #F9F9F9。旧#ffffffから変更） */
    --ccg-panel:         #ffffff; /* パネル面：ウィジェット・フォーム・コメント欄（新モデルの記事・カード面 #FFFFFF。
                                     旧#f5f5f5から反転＝下地がグレー・カードが白という新モデルの関係に合わせた） */
    --ccg-border:        #e3e3e3; /* 罫線（無彩色。新bg/panelいずれの上でも視認できるため無変更） */
    --ccg-accent:        #000000; /* 装飾（飾り罫・面）専用。新モデルは無彩色＋青のみのため黒に統一（旧値は design-notes.md 参照） */
    --ccg-accent-text:   #0033cc; /* テキスト/リンク用。新モデル実測 #0033CC（青・下線なし）。
                                     #ffffffで8.95:1、#f9f9f9で8.50:1＝いずれもWCAG AA達成（旧値は design-notes.md 参照） */
    --ccg-accent-hover:  #002699; /* リンクhover用の濃色バリエーション。#ffffffで12.09:1、#f9f9f9で11.48:1（旧値は design-notes.md 参照） */
    --ccg-on-dark:       #ffffff; /* 濃色背景上の文字色 */
}

/* -----------------------------------------------------------
   フォント：外部フォントは一切読み込まない。
   親が指定する 'Inter' / 'Oswald'（Google Fonts・和文グリフ無し）を
   使用箇所すべてで和文対応のシステムフォントスタックに上書きする。
   （Google Fontsの読み込み自体はfunctions.php側でdequeueして停止）
   ----------------------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea,
h1, h2, h3, h4, h5, h6,
.btn,
input[type="button"],
input[type="reset"],
input[type="submit"],
.main-navigation .menu ul li a,
.nav-previous a,
.nav-next a,
.entry-meta,
.entry-footer,
.site-title,
.floating-post-navigation .floating-navigation-label,
.floating-post-navigation .floating-navigation-title {
    font-family: var(--ccg-font-jp);
}

/* Oswald(欧文アッパーケース)前提の広いletter-spacingは和文で間延びするため解除。
   モデル(The Road Rat)も見出し・メタともに letter-spacing: normal。 */
.site-title,
.entry-meta,
.entry-footer,
.nav-previous a,
.nav-next a,
.widget-title,
.wp-block-heading,
.related-post-title,
.floating-post-navigation .floating-navigation-label,
.floating-post-navigation .floating-navigation-title {
    letter-spacing: normal;
}

/* -----------------------------------------------------------
   大文字化の解除（デザインモデル準拠）
   The Road Rat は見出し・ナビ・メタすべて通常ケース。親テーマは
   uppercase を24箇所で使用しており、欧文アッパーケース前提の
   ラウド寄りな印象になる。和文には効かない一方、英字混在部分
   （カテゴリ英字・タグ・カレンダー等）だけが大文字化して不揃いに
   なるため、親テーマ側の uppercase 指定を全数解除する。
   ----------------------------------------------------------- */
button,
.btn,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn-link:link,
.btn-link:visited,
.main-navigation .menu ul li a,
.nav-previous a,
.nav-next a,
.comments-title,
.reply a,
#reply-title,
.widget-title,
.wp-block-heading,
.tagcloud a,
.tagcloud > a,
#wp-calendar tfoot #next,
#wp-calendar tfoot #prev,
.rss-date,
.widget_rss li a,
.site-title,
.slides-title,
.entry-meta,
.entry-footer,
.entry-title,
.title-header,
.copyright-info,
.search-results .page-header,
.archive .page-header .page-title,
.recommended-title,
.related-post-title,
.floating-post-navigation .floating-navigation-label,
.floating-post-navigation .floating-navigation-title {
    text-transform: none;
}

/* 見出しの太さ：モデルは font-weight 500 で統一されている。
   親テーマは本文中の見出し h1〜h6 が 700、記事タイトル .entry-title が
   300（42px）と両極に振れているため、モデルの 500 を挟んで寄せる。
     ・h1〜h6 / ウィジェット見出し（親700）→ 600
       和文システムフォントでは 500 が Regular にフォールバックして
       見出し階層が消える環境があるため、Hiragino Sans W6 に載る 600 を採る。
       親の 700 からは1段軽くなり「重すぎない見出し」という意図は満たす。
     ・.entry-title / .title-header（親300）→ 500
       ここに 600 を当てると逆にモデルより重くなる。モデル実測値の 500 をそのまま採用。 */
h1, h2, h3, h4, h5, h6,
.widget-title,
.related-post-title,
.recommended-title {
    font-weight: 600;
}
.entry-title,
.title-header {
    font-weight: 500;
}

/* -----------------------------------------------------------
   可読性：本文16px・行間1.8
   モデルの実測は 16px / 1.50 だが、行間はモデルに寄せない。
   欧文より字面の大きい和文は同じ行間だと詰まって見えるため、
   本文サイズだけ合わせ、行間は和文長文向けの1.8を維持する。
   ----------------------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    font-size: 16px;
    line-height: 1.8;
    color: var(--ccg-text);
}
.entry-content,
.entry-summary,
.page-content {
    line-height: 1.8;
}

/* -----------------------------------------------------------
   配色：グレー下地＋白カード面＋ほぼ黒の文字（#282828）。
   アクセントは無彩色（黒）の装飾のみ、リンクは青（#0033cc）1色に
   限定。「静かな下地に、色を1点だけ置く」という構造は旧モデルから
   変わらず踏襲している（配色の実測元をMotor-Fanに差し替え）。
   ----------------------------------------------------------- */
body {
    background: var(--ccg-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.title-header,
.site-description,
.search-results .page-header span,
.archive .page-header span {
    color: var(--ccg-ink);
}

a {
    color: var(--ccg-accent-text);
}
a:active,
a:visited {
    color: var(--ccg-accent-text);
}
a:hover,
a:focus {
    color: var(--ccg-accent-hover);
}

/* 親テーマが個別に #333 を指定していて上の a ルールでは届かない箇所を統一
   （ブラウザ実測で検出：.tagcloud > a と .comment-meta b a の2系統） */
.tagcloud > a,
.comment-meta b a {
    color: var(--ccg-text);
}

/* ウィジェットタイトル・関連記事タイトルの飾り罫（before）にアクセントを最小面積で使用 */
.widget-title,
.wp-block-heading,
.related-post-title {
    color: var(--ccg-ink);
}
.widget-title:before,
.wp-block-heading:before,
.related-post-title:before {
    background-color: var(--ccg-accent);
}

/* ボタン・送信系：モデルのボタンは黒ベタ。親の黒をほぼ黒(--ccg-ink)に置き、
   hoverは無彩色グレーへ（アクセント色はボタンに使わない＝面積を広げない） */
.social-navigation a,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.navigation.pagination .page-numbers.current,
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover,
.nav-links .page-numbers:focus,
.tagcloud > a:hover,
.tagcloud > a:focus,
.comment-form .submit {
    background-color: var(--ccg-ink);
    color: var(--ccg-on-dark);
    border-color: var(--ccg-ink);
}
.social-navigation a:hover,
.social-navigation a:focus,
button:hover,
button:active,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
    background-color: var(--ccg-text-soft);
}
.btn-link {
    border-color: var(--ccg-ink);
}
.post-navigation a:hover,
.post-navigation a:focus {
    border-color: var(--ccg-ink);
}

/* 罫線を無彩色ヘアラインに統一（モデルが暖色を持たないため #ded9d2 から #e3e3e3 へ） */
#secondary .widget,
#masthead,
.site #primary,
.comments-title,
.comments-area .comment-respond .comment-reply-title,
#wp-calendar tbody td,
.site .site-footer,
.site .site-widget-area,
#primary .hentry,
.nav-previous,
.nav-next,
.site .united-recommendation-block,
.photo-grid header,
.united-related-post,
.related-post-header {
    border-color: var(--ccg-border);
}

/* 親テーマ既定の原色イエロー(#FFEB3B)は「煽らない・冷静」トーンと相反するため
   モデルのアクセント系に差し替え（面積は変えず最小のまま。文字なので
   AA達成版の --ccg-accent-text を使う） */
.site .main-navigation div.menu > ul > li.current-menu-item > a,
.site .main-navigation div.menu > ul > li:hover > a,
.site .main-navigation div.menu > ul > li:focus > a,
.copyright-info a {
    color: var(--ccg-accent-text);
}
/* 元セレクタが !important を使用しているため、上書きにも !important が必要 */
#masthead .menu-bg a {
    background: var(--ccg-ink) !important;
    color: var(--ccg-on-dark) !important;
}

/* フッター情報バー：モデルは黒フッター。親の黒をほぼ黒(--ccg-ink)へ */
.site-info {
    background: var(--ccg-ink);
}
.copyright-info {
    color: var(--ccg-on-dark);
}

/* フォーム系：グレー下地(#f9f9f9)の上に置くため、面色を白いパネル(#ffffff)にして
   入力領域を視覚的に分離する（新モデル反映でbg/panelの明暗関係が反転＝旧は白背景+薄グレーパネル） */
input,
textarea,
select {
    background-color: var(--ccg-panel);
    color: var(--ccg-text);
}
/* 親テーマは input[type="…"] の属性セレクタ（詳細度0,1,1）で文字色 #666 を
   指定しており、上の `input, textarea, select`（0,0,1）では届かない。
   ブラウザ実測で検出したため、同じ詳細度で入力文字色を統一する。 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea {
    color: var(--ccg-text);
}

/* .btn-link は親が :link/:visited（詳細度0,1,1）で #232323 を指定しており
   上の `a` では届かない。ボタン風リンクなので ink に寄せる。 */
.btn-link:link,
.btn-link:visited {
    color: var(--ccg-ink);
}

.comment-form textarea,
.comment-form input {
    border-color: var(--ccg-border);
}
.model-search .search-form label .search-field {
    border-color: var(--ccg-border);
}

/* コメント欄・返信導線の面色 */
.comment-respond {
    background-color: var(--ccg-panel);
    border-color: var(--ccg-border);
}
.reply a {
    background-color: var(--ccg-text-soft);
}
.reply a:hover,
.reply a:focus {
    background: var(--ccg-ink);
    border-color: var(--ccg-ink);
}
.comment-navigation a {
    background-color: var(--ccg-panel);
    border-color: var(--ccg-border);
}
.comment-navigation a:hover,
.comment-navigation a:focus {
    border-color: var(--ccg-text-soft);
    background-color: var(--ccg-text-soft);
    color: var(--ccg-on-dark);
}

/* プリローダー／画面遷移オーバーレイ：親の原色ティール(#01f7b6)＋黒の
   ワイプ演出は「煽らない・冷静」なトーンと相反するため、白＋ほぼ黒に差し替え */
.preloader,
.transition-overlay {
    background: var(--ccg-bg);
}
.preloader .layer,
.transition-overlay .layer {
    background: var(--ccg-ink);
}


/* =========================================================
   パンくずリスト（2026-07-31 構築時に追加）
   配色はゲンロクWeb準拠トークンに合わせる。
   文字色 #555 は下地 #F9F9F9 上で 7.4:1（AA達成）。
   ========================================================= */
.satellite-breadcrumbs {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.7;
	color: #555555;
}

.satellite-breadcrumbs a {
	color: #0033CC;
	text-decoration: none;
}

.satellite-breadcrumbs a:hover,
.satellite-breadcrumbs a:focus {
	text-decoration: underline;
}

.satellite-breadcrumbs .sep {
	margin: 0 6px;
	color: #999999;
}

.satellite-breadcrumbs .current {
	color: #282828;
}


/* =========================================================
   フッター（2026-07-31 追加）
   サイト名＋サイトマップリンク＋著作権表示。
   下地は親テーマのフッター背景を継承し、文字色のみ指定する。
   ========================================================= */
.site-info .copyright-info {
	text-align: center;
	line-height: 1.8;
}

.site-info .satellite-footer-brand {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.site-info .satellite-footer-nav {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.site-info .satellite-footer-nav li {
	display: inline-block;
	margin: 0 8px;
	font-size: 13px;
}

.site-info .satellite-footer-copyright {
	margin: 0;
	font-size: 12px;
}


/* ---------------------------------------------------------
   フッターのリンク色（2026-07-31）
   親テーマのリンク色 #0033CC はフッター下地 #0A0A0A に対して
   2.21:1 しかなくAA不合格。フッター内だけ明色に上書きする。
   #FFFFFF → 19.8:1 ／ #E6E6E6 → 15.9:1（いずれもAAA達成）。
   --------------------------------------------------------- */
.site-info .satellite-footer-brand a {
	color: #FFFFFF;
	text-decoration: none;
}

.site-info .satellite-footer-brand a:hover,
.site-info .satellite-footer-brand a:focus {
	text-decoration: underline;
}

.site-info .satellite-footer-nav a {
	color: #E6E6E6;
	text-decoration: none;
}

.site-info .satellite-footer-nav a:hover,
.site-info .satellite-footer-nav a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}