@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); }

/* 記事見出し：左に紺のアクセントバー＋下線でシンプルに。
   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; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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; }
}