@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
*/

/*
========================================================================
 sonae（そなえる情報局：防災・防犯）子テーマ カスタマイズ
 方針: 紺・白系で信頼感、可読性重視（大きめフォント）、シンプルレイアウト
 ※ Theme Name / Template ヘッダーは Cocoon が子テーマを認識するため変更しない。
 ※ 配色は :root のカスタムプロパティに集約し、各セレクタはそれを参照する。
========================================================================
*/

:root {
  --sonae-navy:        #16335B; /* 主色（紺）：見出し・ヘッダ・主要ボタン */
  --sonae-navy-dark:   #0F2542; /* ホバー等の濃い紺 */
  --sonae-link:        #2A6FA8; /* リンク・補助色 */
  --sonae-emergency:   #D32F2F; /* 緊急情報アクセント（赤） */
  --sonae-bg:          #FFFFFF; /* 基本背景 */
  --sonae-bg-sub:      #F5F7FA; /* 補助背景（カード・コード等） */
  --sonae-text:        #1A1A1A; /* 本文 */
  --sonae-border:      #D6DEE8; /* 区切り線 */
}

/************************************
** タイポグラフィ（可読性重視・大きめ）
************************************/
body {
  color: var(--sonae-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", "Yu Gothic Medium", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 18px;          /* 既定より一回り大きく */
  line-height: 1.9;         /* 行間ゆったり */
  letter-spacing: 0.02em;
}
.entry-content p { margin-bottom: 1.5em; }

/************************************
** 配色（リンク・見出し・帯）
************************************/
a { color: var(--sonae-link); }
a:hover { color: var(--sonae-navy-dark); }

/* ヘッダ・グローバルナビ：紺系で統一 */
#header, .header-container-in, #navi { background-color: var(--sonae-navy); }
#navi .navi-in > ul li a { color: #fff; }
#navi .navi-in > ul li a:hover { background-color: var(--sonae-navy-dark); }

/* サイトタイトル（備 - SONAE）: 紺ヘッダー上で読めるよう白に固定。
   グローバルの a / a:hover（リンク色・暗紺）に負けないよう #header スコープ＋:hover も明示。 */
#header .site-name-text-link,
#header .site-name-text-link:hover,
#header .site-name-text { color: #fff; }

/* 記事見出し：左に紺のアクセントバー＋下線でシンプルに。
   Cocoon 本体が高 specificity で見出しを装飾するため、要点に !important を付与する。 */
.article h2 {
  border: none !important;
  border-left: 6px solid var(--sonae-navy) !important;
  border-bottom: 2px solid var(--sonae-border) !important;
  background: transparent !important;
  padding: 0.3em 0.6em;
  color: var(--sonae-navy);
}
.article h3 {
  border: none !important;
  border-left: 4px solid var(--sonae-link) !important;
  padding-left: 0.6em;
  color: var(--sonae-navy);
}

/* ボタン・強調要素 */
.wp-block-button__link, .btn, .more-link {
  background-color: var(--sonae-navy);
  color: #fff;
  border-color: var(--sonae-navy);
}
.wp-block-button__link:hover, .btn:hover, .more-link:hover {
  background-color: var(--sonae-navy-dark);
}

/* フッター */
#footer { background-color: var(--sonae-navy); color: #fff; }
#footer a { color: #cfe0f2; }

/************************************
** 緊急情報バナー（タスク09 の mu-plugin が出力する想定の枠を先行スタイル）
** mu-plugin 側で <div class="sonae-emergency-banner">...</div> を出力する。
************************************/
.sonae-emergency-banner {
  background-color: var(--sonae-emergency);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.8em 1em;
  font-size: 1.05em;
  line-height: 1.6;
}
.sonae-emergency-banner a { color: #fff; text-decoration: underline; }

/************************************
** アフィリエイト広告：PR/広告表記と広告枠の余白（景表法ステマ規制対応）
** Cocoon の広告ラベル(.ad-label) と、本文先頭等に置く PR 表記(.pr-notice) を整える。
************************************/
.pr-notice {
  display: inline-block;
  background: var(--sonae-bg-sub);
  border: 1px solid var(--sonae-border);
  color: #555;
  font-size: 0.8em;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-bottom: 0.8em;
}
.ad-label { color: #888; font-size: 0.75em; }
.ad, .article .ad { margin: 1.8em 0; }

/* ===== 本文アフィリエイト広告ブロック（above/middle/below・.ad.affiliate-ad） =====
   複数のテキストリンク/バナーを1枠にまとめてもサイト配色で整うカード。
   :has(img) でバナー、:not(:has(img)) でテキストリンクを自動判別（未対応環境は素のリンク＝無害）。 */
.ad.affiliate-ad {
  background: var(--sonae-bg-sub);
  border: 1px solid var(--sonae-border);
  border-left: 4px solid var(--sonae-link);
  border-radius: 6px;
  padding: 0.9em 1.1em 1em;
  line-height: 1.7;
  color: var(--sonae-text);
}
.affiliate-ad > .pr-notice {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.6em;
  color: #566173; /* コントラスト4.5:1確保（旧 #8a94a1=2.86 は WCAG AA 未達・G1.12） */
  font-size: 0.72em;
  letter-spacing: 0.05em;
}
/* テキストリンク: サイト配色のボタン風（矢印付き・ホバーで反転） */
.affiliate-ad a:not(:has(img)) {
  display: block;
  position: relative;
  margin-top: 0.5em;
  padding: 0.7em 2.2em 0.7em 1em;
  background: var(--sonae-bg);
  border: 1px solid var(--sonae-border);
  border-radius: 5px;
  color: var(--sonae-navy);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.affiliate-ad a:not(:has(img))::after {
  content: "\203A"; /* › */
  position: absolute;
  top: 50%;
  right: 0.9em;
  transform: translateY(-50%);
  color: var(--sonae-link);
  font-weight: 700;
}
.affiliate-ad a:not(:has(img)):hover {
  background: var(--sonae-navy);
  border-color: var(--sonae-navy);
  color: #fff;
}
.affiliate-ad a:not(:has(img)):hover::after { color: #fff; }
/* バナー: 中央寄せ・積み重ね */
.affiliate-ad a:has(img) {
  display: block;
  text-align: center;
  margin-top: 0.6em;
}
.affiliate-ad a:has(img) img { max-width: 100%; height: auto; }

/* サイドバー常設の PR 表記（A8/VC の「分かりやすい位置」表示・掲載例1）。
   消費者庁 Q&A に従い、薄い極小文字にはせず読み取れる大きさ・色にする。 */
/* Cocoon 本体の .sidebar .widget（詳細度0,2,0）に負けないよう .sidebar スコープで指定。 */
.sidebar .sidebar-pr-notice {
  background: var(--sonae-bg-sub);
  border: 1px solid var(--sonae-border);
  border-left: 4px solid var(--sonae-link);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 1.2em;
}
.sidebar .sidebar-pr-notice__text {
  margin: 0;
  color: var(--sonae-text);
  font-size: 0.9em;
  line-height: 1.7;
}

/* サイドバー固定広告枠（共通枠・ConoHa VPS/バリュードメイン等・affiliate_ad_sidebar）。 */
.sidebar .sidebar-ad {
  margin-bottom: 1.2em;
}
.sidebar .sidebar-ad .pr-notice {
  display: inline-block;
  margin-bottom: 0.5em;
}
.sidebar .sidebar-ad img {
  max-width: 100%;
  height: auto;
}

/* 主サイドバーは1ページで複数回描画される（PC の #sidebar ＋ モバイル drawer 等）。
   functions.php は全描画に PR 表記/広告を出力するため、可視 #sidebar 内のものだけを表示し、
   複製（drawer 側など）は隠す（id セレクタ #sidebar で詳細度を確保して上書き）。 */
.sidebar-pr-notice,
.sidebar-ad { display: none; }
#sidebar .sidebar-pr-notice,
#sidebar .sidebar-ad { display: block; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  body { font-size: 17px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  body { font-size: 16px; line-height: 1.85; }
  .article h2 { padding: 0.25em 0.5em; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  body { font-size: 16px; }
}