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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ========================================
   ツギカメ ─ カスタムCSS v1.3（クリーン全文版）
   設置日：2026-05-13
   設置先：子テーマ cocoon-child-master/style.css
   適用方法：style.css 内の v0.1〜v1.2 までの全ブロックを削除し、本ファイル全体で置換

   v1.2 → v1.3 の主な変更点（大掃除）：
     ✅ background ショートハンドを廃止し background-color に統一
        （background-image を意図せず初期化しないため）
     ✅ .header からの背景指定を削除（Cocoon管理画面の画像設定に追従）
        → 画像差し替え時もCSS編集不要
     ✅ ヘッダー画像URLのハードコード解消（v0.5 由来）
     ✅ !important を最小限に（マーカーとテーブルヘッダーのみ）
     ✅ Webフォント M PLUS 1（v1.1 のチューニング含む）統合
     ✅ H2/H3 余白 321web.link 準拠
     ✅ マーカー（黄）→オレンジ塗り、マーカー下線→オレンジ下線
     ✅ テーブルヘッダー白抜き

   設計原則：
     1. background ショートハンドは禁止（color と image を分離）
     2. .header には background 指定を入れない（Cocoonに任せる）
     3. 外側コンテナ（#header-container）でダーク色背景を維持
     4. 詳細度勝負・!important は最小限

   関連設定：
     - Cocoon設定 > アクセス解析・認証 > ヘッド用コードに Google Fonts 読み込み済み
     - Cocoon設定 > ヘッダー > ヘッダー背景画像 で画像URL管理（CSSは触れない）

   解除方法：本ブロック全体を削除すれば v1.0 〜 v1.2 を全て消した状態に戻る
   ======================================== */

:root {
  --tg-bg-main: #ffffff;
  --tg-bg-secondary: #f5f5f5;
  --tg-bg-dark: #1a1a1a;
  --tg-bg-sidebar: #2a2a2a;
  --tg-text-main: #222222;
  --tg-text-light: #ffffff;
  --tg-border: #e5e5e5;
  --tg-accent: #f37021;
  --tg-accent-hover: #ff6b35;
  --tg-marker: rgba(243, 112, 33, 0.8);   /* ← 追加：マーカー専用半透明オレンジ */
}

/* ───── ベース ───── */
body {
  background-color: var(--tg-bg-main);
  color: var(--tg-text-main);
}

#main, .main, .article, .entry-content {
  background-color: var(--tg-bg-main);
}

/* ───── フォント（M PLUS 1 / Google Fonts） ─────
   Google Fonts <link> は Cocoon設定 > ヘッド用コードに設置済み */
body,
input, textarea, select, button {
  font-family: "M PLUS 1", "M PLUS 1p",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
               "Meiryo", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 見出しは太字（700） */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6,
.site-name-text,
.tagline,
.sidebar h2,
.sidebar h3,
.sidebar .wp-block-heading {
  font-family: "M PLUS 1", "M PLUS 1p",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
               "Meiryo", sans-serif;
  font-weight: 700;
}

/* ───── ヘッダー外側コンテナ（暗色背景） ─────
   .header 自体には触れず、外側でダーク色を担保 */
#header-container,
.header-container,
#header-container-in,
.header-container-in {
  background-color: var(--tg-bg-dark);
}

/* ───── ヘッダー画像の表示制御（CocoonのbackgroundimageURLに対する表示方法） ─────
   background-image はCocoonインライン<style>に任せ、こちらでは触れない
   表示方法（cover/center/no-repeat）だけ補強 */
.header {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ───── ヘッダー内テキスト色（背景は触らない） ───── */
.header,
#header,
.header-in,
.site-name-text,
.tagline {
  color: var(--tg-text-light);
}

/* ───── グローバルナビ（暗色背景・画像なし想定） ───── */
.navi,
.navi-in,
#navi {
  background-color: var(--tg-bg-dark);
}

.navi a,
.navi-in a,
#navi a {
  color: var(--tg-text-light);
}

.navi a:hover,
.navi-in a:hover,
#navi a:hover {
  color: var(--tg-accent);
  background-color: transparent;
}

/* ───── サイドバー：タイトル帯のみダーク、本体は白 ───── */
.sidebar {
  background-color: var(--tg-bg-main);
}

.sidebar h2,
.sidebar h3,
.sidebar .wp-block-heading,
.sidebar aside h2,
.sidebar aside.widget h2,
.sidebar .widget-sidebar h2,
.sidebar .widget-sidebar h3,
.sidebar .widget-sidebar-standard h2,
.sidebar .widget-sidebar-scroll h2,
.sidebar .widget-sidebar-scroll h3 {
  background-color: var(--tg-bg-sidebar);
  color: var(--tg-text-light);
  padding: 12px 16px;
  border: none;
  margin: 0 0 8px 0;
}

/* ───── 記事本文 H2 塗りボックス（余白：321web.link準拠） ───── */
.entry-content h2,
.article h2 {
  background-color: var(--tg-bg-dark);
  color: var(--tg-text-light);
  padding: 14px 18px;
  border: none;
  margin-top: 4em;
  margin-bottom: 2em;
}

/* ───── 記事本文 H3 ライン（余白：321web.link準拠） ───── */
.entry-content h3,
.article h3 {
  border-left: 4px solid var(--tg-bg-dark);
  border-bottom: none;
  padding: 12px 0 12px 12px;
  color: var(--tg-bg-dark);
  background-color: transparent;
  margin-top: 3em;
  margin-bottom: 2em;
}

/* ───── リンク・強調 ───── */
a {
  color: var(--tg-accent);
}

a:hover {
  color: var(--tg-accent-hover);
}

/* ───── ボタン全般（CTA・検索・送信） ───── */
.btn,
.cta,
.cta-btn,
.btn-wrap a,
.wp-block-search__button,
.wp-element-button,
.search-submit,
input[type="submit"],
button[type="submit"] {
  background-color: var(--tg-accent);
  color: var(--tg-text-light);
  border: none;
}

.btn:hover,
.cta:hover,
.cta-btn:hover,
.btn-wrap a:hover,
.wp-block-search__button:hover,
.wp-element-button:hover,
.search-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--tg-accent-hover);
  color: var(--tg-text-light);
}

/* マーカー塗り（オレンジ・細め下端寄り版 v1.3.1）
   linear-gradient で上下の停止位置を指定し、
   下端から少し離れた位置に細い帯を作る */
.entry-content .marker,
.article .marker {
  background-image: linear-gradient(
    transparent 70%,
    var(--tg-marker) 70%,
    var(--tg-marker) 100%,
    transparent 100%
  );
  background-color: transparent;
}

/* マーカー下線（オレンジ下線） */
.entry-content .marker-under,
.article .marker-under {
  border-bottom: 2px solid var(--tg-accent);
  background-image: none;
  background-color: transparent;
}

/* ───── テーブル ───── */
.entry-content table,
.article table {
  border-collapse: collapse;
}

.entry-content table th,
.entry-content table td,
.article table th,
.article table td {
  border: 1px solid var(--tg-border);
  padding: 8px 12px;
}

/* テーブルヘッダー：白抜き（黒背景＋白文字） */
.entry-content table thead th,
.article table thead th,
.entry-content table th,
.article table th {
  background-color: var(--tg-bg-dark) !important;
  color: var(--tg-text-light) !important;
}

/* ───── フッター（上部・下部・ナビ） ───── */
.footer,
#footer,
.footer-in,
.footer-bottom,
.footer-bottom-content,
.footer-bottom-logo,
#navi-footer,
.navi-footer,
#navi-footer-in,
.navi-footer-in {
  background-color: var(--tg-bg-dark);
  color: var(--tg-text-light);
}

.footer a,
#footer a,
.footer-bottom a,
.navi-footer a {
  color: var(--tg-text-light);
}

.footer a:hover,
.footer-bottom a:hover,
.navi-footer a:hover {
  color: var(--tg-accent);
}

/* ───── カード・セクション ───── */
.entry-card,
.related-entry-card {
  background-color: var(--tg-bg-main);
  border: 1px solid var(--tg-border);
}

/* ───── 区切り・薄背景セクション ───── */
.section-secondary,
.bg-secondary {
  background-color: var(--tg-bg-secondary);
}

/* ───── オプション：ヘッダー画像が明るすぎてタイトル文字が読みにくい場合
   コメントアウトを外して半透明オーバーレイを有効化
.header {
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 0;
}
.header > * {
  position: relative;
  z-index: 1;
}
*/

/* ========================================
   ツギカメ ─ v1.4 追加クラス
   設置日：2026-05-14
   適用方法：子テーマ style.css の v1.3 ブロックの末尾にこの内容を追記

   追加内容（writing_style.md v0.2 対応）：
     - 段落タイトル（.lead-line）：太字＋オレンジ下線
       見出し（H2/H3）を立てるほどでもない「項目の表題」用
     - オレンジ枠ボックス（.box-orange）：重要な段落・リストを枠で囲む
   ======================================== */

/* ───── 段落タイトル（見出し未満の項目見出し） ─────
   使い方：
     <p><strong class="lead-line">■ 表題</strong></p>
     または
     <p class="lead-line">■ 表題</p>

   Cocoonエディターでの操作：
     段落（または太字span）を選択 > 高度な設定 > 追加CSSクラス に「lead-line」を入力 */
.entry-content .lead-line,
.article .lead-line {
  font-weight: 700;
  border-bottom: 2px solid var(--tg-accent);
  padding-bottom: 4px;
}

/* p に直接クラスを当てた場合は inline-block で内容幅にする
   （p 全幅に下線が引かれて見栄えが悪くなるのを防ぐ） */
.entry-content p.lead-line,
.article p.lead-line {
  display: inline-block;
  margin-bottom: 0.5em;
}

/* ───── オレンジ枠ボックス（特に目立たせたい段落・リスト） ─────
   使い方：
     <div class="box-orange">
       <p>本文</p>
       <ul>
         <li>項目1</li>
         <li>項目2</li>
       </ul>
     </div>

   Cocoonエディターでの操作：
     ブロック追加 > カスタムHTML で <div class="box-orange">...</div> を直接入力
     または段落グループを選択 > 高度な設定 > 追加CSSクラス に「box-orange」を入力 */
.entry-content .box-orange,
.article .box-orange {
  border: 2px solid var(--tg-accent);
  padding: 14px 16px;
  margin: 1.5em 0;
  background-color: var(--tg-bg-main);
}

/* ボックス内の最初/最後の要素のmarginを除去（余白の重複を防ぐ） */
.entry-content .box-orange > *:first-child,
.article .box-orange > *:first-child {
  margin-top: 0;
}

.entry-content .box-orange > *:last-child,
.article .box-orange > *:last-child {
  margin-bottom: 0;
}

/* ========================================
   ツギカメ ─ v1.5 リンク色調整パッチ
   設置日：2026-05-14
   適用方法：子テーマ style.css の v1.4 ブロックの末尾にこの内容を追記

   修正内容：
     - 本文リンク色をオレンジ（#f37021）から「Googleの伝統」に倣った青系に変更
     - マーカー・ボタン系のオレンジは変更なし（記事内強調は引き続きオレンジで統一）
     - :visited はCSSで触らない（ブラウザ標準の紫系がそのまま効く＝Google伝統）

   背景：
     リンクの色はWeb業界で「青＝Google伝統」が浸透しており、
     クリックできることの可読性が最も高い。
     ツギカメの強調色オレンジはマーカー・ボタンに集中させ、
     リンクは標準色で「分かりやすさ」を優先する方針。
   ======================================== */

/* :root にリンク色変数を追加 */
:root {
  --tg-link: #1a0dab;        /* 本文リンク：Google伝統の青 */
  --tg-link-hover: #0a3593;  /* リンクホバー時：少し暗く */
}

/* リンク色の上書き（v1.3 の a { color: var(--tg-accent); } を青に上書き） */
a {
  color: var(--tg-link);
}

a:hover {
  color: var(--tg-link-hover);
}

/* 注意：以下はそのまま維持（変更なし）
   ・マーカー（.marker / .marker-under）はオレンジのまま
   ・ボタン系（.btn / .cta / .wp-block-search__button など）はオレンジ背景＋白文字のまま
   　（ボタン系は color プロパティをクラスセレクタで上書きしているため、
   　 上記の a 指定の影響を受けない） */

/* ========================================
   ツギカメ ─ v1.6 グロナビ調整パッチ
   設置日：2026-05-15
   適用方法：子テーマ style.css の v1.5 ブロックの末尾に追記

   修正内容：
     - グローバルナビゲーション内のカテゴリ説明文（.item-description）を非表示
     - カテゴリ description はアーカイブページで活用するため、
       term データ自体は削除せず、ナビ内表示だけを抑制
   ======================================== */

/* ───── グロナビのカテゴリ説明文を非表示 ───── */
.navi .item-description,
.navi-in .item-description,
#navi .item-description,
.navi .menu-item-has-description .sub-caption,
.navi-in .menu-item-has-description .sub-caption,
#navi .menu-item-has-description .sub-caption {
  display: none;
}

/* グロナビの caption-wrap も、説明非表示後の高さ調整で見栄えを整える（任意） */
.navi .caption-wrap,
.navi-in .caption-wrap,
#navi .caption-wrap {
  /* 必要に応じて padding 等を調整。デフォルトのままで問題なければこのブロックは削除可 */
}

/* ========================================
   ツギカメ ─ v1.7 カテゴリラベル オレンジ化パッチ
   設置日：2026-05-15
   適用方法：子テーマ style.css の v1.6 ブロックの末尾に追記

   修正内容：
     - エントリーカード上のカテゴリラベル（.cat-label）
     - サイドバー新着情報のカテゴリラベル（.entry-category）
     - 個別記事ページのカテゴリラベル（同クラス共通）
     をブランドオレンジ（背景）＋白抜き文字に統一

   背景：
     ファクトリー感の「そっけなさ」を維持しつつ、ピンポイントで
     オレンジを置くことでブランド色を視認性良く配置する方針。
   ======================================== */

/* ───── カテゴリラベル：オレンジ背景＋白抜き文字 ───── */
.cat-label,
.entry-category,
.entry-card-cat-label,
a.cat-label,
a.entry-category {
  background-color: var(--tg-accent);
  color: var(--tg-text-light);
}

/* ホバー時：少し明るいオレンジへ */
a.cat-label:hover,
a.entry-category:hover,
.cat-label a:hover,
.entry-category a:hover {
  background-color: var(--tg-accent-hover);
  color: var(--tg-text-light);
}

/* ラベル内のリンク文字色も白で統一 */
.cat-label a,
.entry-category a {
  color: var(--tg-text-light);
}

/* ========================================
   ツギカメ ─ v1.8 サイドバー新着情報 opacity 修正パッチ
   設置日：2026-05-15
   適用方法：子テーマ style.css の v1.7 ブロックの末尾に追記

   修正内容：
     - Cocoonデフォルトで .info-list-item-meta に opacity: 0.6 が当たり、
       子要素全体（日付＋カテゴリラベル）が薄く見える問題を修正
     - 日付（.info-list-item-date）は控えめのまま維持
     - カテゴリラベルは本来の orange + 白文字で表示

   背景：
     v1.7 でカテゴリラベルをオレンジ化したが、サイドバー新着情報では
     親要素の opacity:0.6 によりオレンジが pink っぽく薄く表示されていた。
     CSS opacity は子要素には継承ではなく適用されるため、子要素単独で
     opacity を上げることはできない。そのため親の opacity を 1 に戻し、
     日付要素にだけ opacity:0.6 を再適用する方式で対応。
   ======================================== */

/* 親要素の opacity を 1 に戻す */
.info-list-item-meta {
  opacity: 1;
}

/* 日付だけ控えめ表示を維持 */
.info-list-item-meta .info-list-item-date {
  opacity: 0.6;
}