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

/*
========================================================================
 sea（海）子テーマ カスタマイズ
 方針: 青系（海のブルー）で爽やかな雰囲気、写真映え重視、
       カテゴリナビ強調・写真サムネイル大きめ。
 ※ Theme Name / Template ヘッダーは Cocoon が子テーマを認識するため変更しない。
 ※ 配色は :root のカスタムプロパティに集約し、各セレクタはそれを参照する。
========================================================================
*/

:root {
  --sea-blue:      #14688A; /* 主色（海の青） */
  --sea-blue-dark: #0E4E6B; /* ホバー等の濃い青 */
  --sea-link:      #2E8FB0; /* リンク・補助色（明るい水色） */
  --sea-sand:      #C79A5B; /* アクセント（砂浜の暖色） */
  --sea-bg:        #FFFFFF; /* 基本背景 */
  --sea-bg-sub:    #EEF4F7; /* 補助背景（涼しげなオフホワイト） */
  --sea-text:      #24303A; /* 本文 */
  --sea-border:    #D5E1E7; /* 区切り線（ブルーグレー） */
}

/************************************
** タイポグラフィ
************************************/
body {
  color: var(--sea-text);
  background-color: var(--sea-bg-sub);
  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: 16px;
  line-height: 1.85;
}
#main, .main, .content { background-color: var(--sea-bg); }

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

#header, .header-container-in { background-color: var(--sea-bg); }

/* 記事見出し：青の下線＋砂色のサブアクセント。
   Cocoon 本体が高 specificity（#wrapper .article h2 等）で見出しを装飾するため、
   確実に上書きできるよう要点に !important を付与する。 */
.article h2 {
  border: none !important;
  border-bottom: 3px solid var(--sea-blue) !important;
  background: transparent !important;
  padding: 0.3em 0.2em;
  color: var(--sea-blue-dark);
}
.article h3 {
  border: none !important;
  border-left: 5px solid var(--sea-sand) !important;
  padding-left: 0.6em;
  color: var(--sea-blue-dark);
}

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

/* フッター */
#footer { background-color: var(--sea-blue-dark); color: #fff; }
#footer a { color: #cfe6ef; }

/************************************
** カテゴリナビ強調（グローバルナビを青帯で目立たせる）
************************************/
#navi { background-color: var(--sea-blue); }
/* メニュー7項目（カテゴリ6＋about）が既定の字間・余白では1行に収まらず折り返すため、詰めて1行化。
   Cocoon のPCナビは幅広画面のみ表示（狭幅はモバイルメニューへ切替）。 */
#navi .navi-in > ul { flex-wrap: nowrap; justify-content: center; }
#navi .navi-in > ul li a {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding-left: 0.8em;
  padding-right: 0.8em;
  white-space: nowrap;
}
#navi .navi-in > ul li a:hover { background-color: var(--sea-blue-dark); }
/* カテゴリラベル（記事カード上の category タグ等） */
.cat-label, .category-label, .entry-card .cat-label {
  background-color: var(--sea-sand);
  color: #fff;
}

/************************************
** 写真サムネイル大きめ（記事一覧カード）
** Cocoon の実 DOM では画像は .card-thumb img / .entry-card-thumb-image。
** height:auto は aspect-ratio を打ち消すため指定しない。
************************************/
.card-thumb { margin-bottom: 0.8em; }
.card-thumb img, .entry-card-thumb-image {
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
/* 一覧をカード型・サムネを大きく見せる */
.list .entry-card-wrap { box-shadow: 0 1px 6px rgba(0,0,0,.08); }

/************************************
** アフィリエイト広告：PR/広告表記と広告枠の余白（景表法ステマ規制対応）
************************************/
.pr-notice {
  display: inline-block;
  background: var(--sea-bg-sub);
  border: 1px solid var(--sea-border);
  color: #5c6b73;
  font-size: 0.8em;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-bottom: 0.8em;
}
.ad-label { color: #7d8890; 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(--sea-bg-sub);
  border: 1px solid var(--sea-border);
  border-left: 4px solid var(--sea-blue);
  border-radius: 6px;
  padding: 0.9em 1.1em 1em;
  line-height: 1.7;
  color: var(--sea-text);
}
.affiliate-ad > .pr-notice {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.6em;
  color: #7d8890;
  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(--sea-bg);
  border: 1px solid var(--sea-border);
  border-radius: 5px;
  color: var(--sea-blue-dark);
  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(--sea-blue);
  font-weight: 700;
}
.affiliate-ad a:not(:has(img)):hover {
  background: var(--sea-blue);
  border-color: var(--sea-blue);
  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(--sea-bg-sub);
  border: 1px solid var(--sea-border);
  border-left: 4px solid var(--sea-blue);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 1.2em;
}
.sidebar .sidebar-pr-notice__text {
  margin: 0;
  color: var(--sea-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){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* タブレット以下はサムネをやや縦長にして写真を大きく見せる */
  .card-thumb img, .entry-card-thumb-image { aspect-ratio: 4 / 3; }
}

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