@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ==========================================================
   オアシス新聞 ブランドCSS（子テーマ版 v2.6）
   出力日：2026年7月7日
   もとになった版：カスタマイザー追加CSS v1.4
   v2.6での変更：
     ・16項を調整：「今日の一面」が1本→2本表示になったことに伴い、
       2本を横並びグリッドで表示するCSSを追加
   v2.5での変更：
     ・17項を追加：記事下のカテゴリ・タグリンクの視認性修正。
       Cocoon標準の「濃い背景＋白文字」バッジに対し、7項の
       リンク色指定（紺色・下線）が白文字を上書きして
       「濃い背景×濃紺文字」で読めなくなっていたため、
       シェア・フォローボタン（12・13項）と同じ
       白地・細枠・グレー文字のトーンに統一
   v2.4での変更：
     ・16項を調整：「今日の一面」のタイトル・抜粋文からリンク装飾
       （下線・紺色）を除去し、通常テキストの見た目に変更
   v2.3での変更：
     ・16項を追加：「今日の一面」（class="oasis-hero"）の大型表示
   v2.2での変更：
     ・15項を追加：一面（トップページ）専用の調整
       （日付・シェアボタン・フォローボタンを一面のみ非表示）
   v2.1での変更：
     ・9c項を追加：一覧サムネイルの表示比率を1.91:1に上書き
       （functions.phpのサムネイル差し替えフィルターとセット）
   v2.0での変更：
     ・カスタマイザーの「追加CSS」から子テーマstyle.cssへ移行
     ・フォント読み込み（@import）を廃止し、functions.phpでの
       正式な読み込み方式に変更（このファイルには書かない）
   構成：
     [A] スマホ用ロゴ・ヘッダー調整（従来の追加CSSから移植）
     [B] ブランドCSS（紙面の下地・見出し・SNSボタン等）
   ========================================================== */

/* ==========================================================
   [A] スマホ（画面幅768px以下）のみに適用する設定
   ========================================================== */
@media screen and (max-width: 768px) {

  /* ① ロゴ画像として設定している場合の高さ制限を解除・調整 */
  .site-logo-image,
  .site-logo-image img {
    max-height: none !important;
    height: auto;
    /* height: 120px; */
  }

  /* ② ヘッダー背景画像として設定している場合の高さ調整 */
  .header-container .header-in {
    min-height: 150px;
  }
}

/* ==========================================================
   [B] ブランドCSS
   ========================================================== */

/* ---- 1. ブランドカラーの定義（デザイントークン） ------------- */
:root {
  --oasis-paper: #fdf8f2;   /* 紙色（アイキャッチ背景と同じ） */
  --oasis-ink:   #2b2b2b;   /* 文字のスミ色 */
  --oasis-navy:  #1a5276;   /* 基調アクセント（紺） */
  --oasis-line:  #ddd5c8;   /* 罫線用の淡いベージュグレー */
  --oasis-gray:  #5f584e;   /* 補足テキスト用の濃いめグレー */
}

/* ---- 2. サイト全体の下地 ------------------------------------ */
body {
  background-color: var(--oasis-paper);
  color: var(--oasis-ink);
  font-family: 'Noto Sans JP', sans-serif;
}

.entry-content {
  font-size: 17px;
  line-height: 2.0;
  letter-spacing: 0.03em;
}
.entry-content p {
  margin-bottom: 1.8em;
}

/* ---- 3. サイト名（題字） -------------------------------------- */
.site-name-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.tagline {
  color: var(--oasis-gray);
  letter-spacing: 0.1em;
  font-size: 14px;
}

/* ---- 4. 記事タイトル（H1） ------------------------------------ */
.entry-title,
.article h1 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ---- 5. 見出しH2 ----------------------------------------------- */
.article h2 {
  background: none !important;
  background-color: transparent !important;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--oasis-line);
  padding: 0 0 12px 0;
  margin-top: 2.8em;
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--oasis-ink) !important;
}
.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--oasis-navy);
}

/* ---- 6. 見出しH3・H4 ------------------------------------------- */
.article h3 {
  background: none;
  border: none;
  border-left: 3px solid var(--oasis-navy);
  border-radius: 0;
  padding: 2px 0 2px 14px;
  font-weight: 700;
  color: var(--oasis-ink);
}
.article h4 {
  background: none;
  border: none;
  padding-left: 0;
  font-weight: 700;
}

/* ---- 7. リンクの色 ---------------------------------------------- */
.article a {
  color: var(--oasis-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 82, 118, 0.35);
}
.article a:hover {
  text-decoration-color: var(--oasis-navy);
}

/* ---- 8. 引用（blockquote） -------------------------------------- */
.article blockquote {
  background: #ffffff;
  border: 1px solid var(--oasis-line);
  border-left: 3px solid var(--oasis-navy);
  border-radius: 0;
  color: #4a453d;
}

/* ---- 9. 記事一覧カード ------------------------------------------- */
.entry-card-wrap,
.related-entry-card-wrap {
  background: #ffffff;
  border: 1px solid var(--oasis-line);
  margin-bottom: 18px;
  transition: box-shadow 0.2s ease;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  box-shadow: 0 3px 14px rgba(43, 43, 43, 0.08);
}

.entry-card-title,
.related-entry-card-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.6;
}

.entry-card-snippet,
.related-entry-card-snippet {
  color: var(--oasis-gray);
  font-size: 16px;
  line-height: 1.9;
}

/* ---- 9b. 一覧カードのカテゴリラベル：非表示 ----------------------
   一覧のアイキャッチ左上のラベルは画像内タイトルと重なるため非表示。
   元に戻す場合はこのブロックをコメントアウト。 */
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label {
  display: none !important;
}

/* ---- 9c. 一覧サムネイルの表示比率（v2.1追加） ----------------------
   Cocoon本体は .card-thumb img を16:9に強制切り抜き表示するため、
   functions.phpで切り抜き前の画像を渡しても左右が欠けて見える。
   アイキャッチと同じ1.91:1に上書きし、元の構図のまま表示する。
   （functions.phpの「サムネイル差し替え」フィルターとセットで機能） */
.card-thumb img {
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
}

/* 記事ページ上部のアイキャッチのラベルは残しつつ、小さく半透明に */
.eye-catch .cat-label {
  font-size: 10px !important;
  padding: 2px 8px !important;
  background-color: rgba(43, 43, 43, 0.55) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  letter-spacing: 0.04em;
}

/* ---- 10. サイドバーの見出し（h2・h3両対応） ------------------------ */
.sidebar h2,
.sidebar h3,
.sidebar .widget h2,
.sidebar .widget h3,
#sidebar h2,
#sidebar h3 {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--oasis-ink) !important;
  border-radius: 0 !important;
  padding: 0 0 8px 0 !important;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--oasis-ink) !important;
}

/* ---- 11. フッター --------------------------------------------------- */
.footer {
  background-color: var(--oasis-ink);
  color: #d9d2c5;
}
.footer a {
  color: #d9d2c5;
}

/* ---- 12. SNSシェアボタン（脱・原色） --------------------------------- */
.sns-share-buttons a,
.sns-share-buttons a.share-button {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--oasis-gray) !important;
  border: 1px solid var(--oasis-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.sns-share-buttons a:hover {
  background: #ffffff !important;
  color: var(--oasis-navy) !important;
  border-color: var(--oasis-navy) !important;
  opacity: 1 !important;
}
.sns-share-buttons a .social-icon,
.sns-share-buttons a .button-caption {
  color: inherit !important;
}

/* ---- 13. フォローボタン（Feedly・RSS等）も同トーンに ------------------ */
.sns-follow-buttons a,
.sns-follow-buttons a.follow-button {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--oasis-gray) !important;
  border: 1px solid var(--oasis-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sns-follow-buttons a:hover {
  color: var(--oasis-navy) !important;
  border-color: var(--oasis-navy) !important;
  opacity: 1 !important;
}

/* ---- 15. 一面（トップページ）専用の調整（v2.2追加） ----------------
   .home は「サイトのトップページを表示しているとき」だけ体に付く
   WordPress標準の目印クラス。これを頭に付けることで、以下の
   非表示指定はトップページにのみ効き、記事ページには影響しない。 */
.home .article .date-tags {
  display: none;   /* 一面の日付表示を消す */
}
.home .sns-share,
.home .sns-follow {
  display: none;   /* 一面のシェア・フォローボタンを消す（記事ページには残る） */
}

/* ---- 16. 「今日の一面」の大型表示（v2.6で2本並び対応） ----------------------
   一面のショートコードに class="oasis-hero" を付けた場合だけ効く
   専用スタイル。画像を段組みいっぱいに広げ、タイトル・抜粋文も
   ひと回り大きくして、一面の「顔」として立たせる。
   v2.6：1本→2本表示になったことに伴い、2本を横並びグリッドで
   表示するCSSを追加。Cocoonの実際のHTML構造を確認できていない
   ため、oasis-heroクラスが付く可能性のある2パターン
   （ul自体に付く場合／それを包むdivに付く場合）両方に効くよう
   セレクタを重ねている。反映後に見た目がおかしい場合は教えてください。 */
.oasis-hero.widget-entry-cards,
.oasis-hero .widget-entry-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.oasis-hero.widget-entry-cards > li,
.oasis-hero .widget-entry-cards > li {
  margin: 0;
}
@media screen and (max-width: 600px) {
  .oasis-hero.widget-entry-cards,
  .oasis-hero .widget-entry-cards {
    grid-template-columns: 1fr;
  }
}
.oasis-hero .card-thumb {
  width: 100%;
}
.oasis-hero .card-thumb img {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
}
/* カード全体を包むリンクの装飾を打ち消し、
   タイトルは見出し・抜粋文は通常の本文として見せる（v2.4） */
.oasis-hero .a-wrap {
  text-decoration: none;
}
.oasis-hero .widget-entry-card-title,
.oasis-hero .card-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.5;
  margin-top: 14px;
  color: var(--oasis-ink);
  text-decoration: none;
}
.oasis-hero .a-wrap:hover .widget-entry-card-title,
.oasis-hero .a-wrap:hover .card-title {
  color: var(--oasis-navy); /* マウスを乗せたときだけ紺色で「読める」合図 */
}
.oasis-hero .widget-entry-card-snippet,
.oasis-hero .card-snippet {
  font-size: 16px;
  line-height: 1.9;
  color: var(--oasis-gray);
  margin-top: 6px;
  text-decoration: none;
}

/* ---- 17. 記事下のカテゴリ・タグリンク（v2.5追加） ------------------
   記事本文下にCocoonが自動表示するカテゴリ・タグのリンク。
   Cocoon標準は「濃い背景＋白文字」のバッジだが、7項のリンク色指定
   （.article a の紺色・下線）が白文字より優先されてしまい、
   「濃い背景×濃紺文字」で読めない状態になっていた。
   シェア・フォローボタン（12・13項）と同じ白地・細枠・グレー文字に
   統一して誌面トーンに揃える。マウスを乗せると紺色に変わる。
   .article を頭に付けているのは、サイドバーのタグクラウド等、
   記事の外にある同名クラスへ影響させないための範囲指定。 */
.article .cat-link,
.article .tag-link {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--oasis-gray) !important;
  border: 1px solid var(--oasis-line) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  padding: 3px 10px !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.article .cat-link:hover,
.article .tag-link:hover {
  color: var(--oasis-navy) !important;
  border-color: var(--oasis-navy) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /* ---- 14. スマホでの微調整 ---- */
  .entry-content {
    font-size: 16px;
    line-height: 1.95;
  }
  .article h2 {
    margin-top: 2.2em;
  }
}