@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){
  /*必要ならばここにコードを書く*/
}


/************************************
** 2026-09-06 追加：図解のキャプション重複を消す
** 図解は画像の中にタイトルを持っている。その真下に同じ文言の
** figcaption が出て、同じ文が縦に2回並んでいた（84本すべて）。
** 文言は alt に残るので、SEO・アクセシビリティは落ちない。
** 戻すときはこの1ブロックを消すだけ。
************************************/
.zukai-figure > figcaption { display: none; }


/************************************
** 2026-09-06 追加：カテゴリラベルをサムネイルの下へ逃がす
** Cocoon は .cat-label を .card-thumb の左上（top:3px）に重ねて描く。
** アイキャッチv2は主役を中央に置いているので、上に重なると文字が読めない。
** 実測：ラベルは画像内の y=27〜177 を覆い、幅はカテゴリ名で変わる
**       （「IT資格」x=28〜380 ／「資格の勉強法・キャリア」x=28〜988）。
**       84本のうち 33本 の文字がこの帯に食い込んでいた。
** 下（y=495〜）へ移すと、文字の下端は最大でも y=472 なので衝突ゼロになる。
** ⚠️ 画像側を作り直して上に余白を空ける手もあるが、それをやると
**    本命であるSERPの正方形クロップで主役が下に寄って構図が崩れる。
**    一覧ページの都合は、一覧ページ側で直す。
************************************/
.card-thumb .cat-label { top: auto; bottom: 3px; }


/************************************
** 2026-09-06 追加：緑を「地」に下げ、色に意味を1つずつ割り当てる
**
** 実測（84記事）で分かったこと
**   ・h2 は平均6.5本、すべて濃緑ベタ塗り＋白文字＝ページが濃緑の帯で刻まれる
**   ・strong は平均30.7個（最大80）。ここに色を足すと「全部目立って何も目立たない」
**     → strong は触らない
**   ・A8の広告23本はすべて「本文中の素のテキストリンク」で、内部リンクと同じ青
**     ＝読者が広告と内部リンクを見分けられない（ASP成果ゼロの一因の疑い）
**   ・もしも22本はカード内に #F79256(橙)/#F76956(朱) のボタンを自前で持っている
**
** 色の割り当て
**   #0B4F44 構造    … h2の罫。塗りをやめて地に下げる
**   #146A5B サイト内 … 内部リンク（歩く）
**   #B4531A 外へ出る … 広告リンク（行動）
**     ↑ もしものボタン #F79256 と色相が同じ22°＝「同じ信号の濃い版」。
**       白地でのコントラストは 5.01:1 で本文リンクに使える
**       （#F79256 のままだと 2.28:1 で本文には不足）
************************************/

/* 1. h2：濃緑ベタ塗り → 白地＋左の太罫。帯を消して地を白くする */
.entry-content h2 {
  background: transparent;
  color: #0B4F44;
  border-left: 6px solid #0B4F44;
  border-radius: 0;
  padding: 2px 0 2px 16px;
  margin: 56px 0 24px;
  font-size: 22px;
  line-height: 1.5;
}
/* h3：Cocoonの既定は「上下右に1px罫の箱」。左罫だけ消すと3辺の箱が残って
   h2（罫だけ）より目立ってしまう＝階層が逆転する。箱ごと外して細い下罫にする。
   これで h2＝左6px罫/22px ＞ h3＝下2px罫/19px の順になる。 */
.entry-content h3 {
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(11, 79, 68, .3);
  color: #0B4F44;
  padding: 0 0 8px;
  margin: 40px 0 16px;
  font-size: 19px;
  line-height: 1.5;
}

/* 2. 内部リンク＝サイト内を歩く色 */
.entry-content a { color: #146A5B; }

/* 3. 広告リンク＝外へ出る色。もしもの「かんたんリンク」カード内には当てない
      （カードは自前のボタン色を持っているので、二重に塗ると濁る） */
.entry-content a[href*="px.a8.net"],
.entry-content a[href*="af.moshimo.com"],
.entry-content a[href*="i.moshimo.com"] {
  color: #B4531A;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content [class*="easyLink"] a {
  color: inherit;
  font-weight: inherit;
}

/* 4. 本文の1行を45字→40字に（日本語の適正は25〜40字）。デスクトップのみ。
      ⚠️ 段落だけに掛けると目次や引用が全幅で残って右端が揃わない。.entry-content ごと絞る */
@media screen and (min-width: 835px) {
  .entry-content { max-width: 720px; }
}

/************************************
** 2026-09-08 追加：スマホの現在地と、クラスタ横断の導線
**
** なぜ要るか（実測）
**   ・グローバルナビ(#navi)はスマホで display が消える＝カテゴリが画面に1つも出ない
**   ・GSC 直近3か月：トップページ 表示4・クリック0／カテゴリページ 表示0
**     ＝読者は全員「記事1本」に着地する。サイトの地図ではなく「現在地」が要る
**   ・86記事／5クラスタ。全記事がカテゴリを1つだけ持つ（複数持ち0）
**
** 置き方
**   ・CSSはここに1回だけ。記事側はHTMLだけを入れる（本文を膨らませない）
**   ・色は1色も足していない。#0B4F44=構造／#146A5B=サイト内／グレー階調のみ。
**     #B4531A(外へ出る=広告) はナビには使わない。信号を壊さないため
**   ・JSゼロ。本文に <script> を入れるとWAFに弾かれるため
************************************/

/* ============ ① 現在地バー（記事の頭・h1直下） ============ */
.csk-here{
  display:flex; align-items:center; gap:10px;
  margin:0 0 28px; padding:10px 14px;
  background:#f2f7f5; border-left:3px solid #0B4F44;
  font-size:14px; line-height:1.6; color:#4a4a4a;
}
.csk-here .csk-ico{flex:0 0 auto; width:28px; height:28px; padding:4px;
  background:#0B4F44; color:#fff; border-radius:2px}
.csk-here .csk-ico svg{display:block; width:20px; height:20px}
.csk-here .csk-here-body{min-width:0}
.csk-here .csk-here-cat{display:block; font-weight:700; color:#0B4F44; font-size:15px}
.csk-here .csk-here-sub{display:block; color:#767676; font-size:13px}
.csk-here a{color:#146A5B; text-decoration:underline; text-underline-offset:2px}

/* ============ ② クラスタ横断（記事の尻・関連記事のあと） ============ */
.csk-clusters{
  margin:36px 0 0; padding:20px 18px 14px;
  border:1px solid #dde4e2; border-top:3px solid #0B4F44; background:#fff;
}
.csk-clusters .csk-clusters-h{
  margin:0 0 4px; font-size:16px; font-weight:700; color:#0B4F44; line-height:1.5;
}
.csk-clusters .csk-clusters-lead{
  margin:0 0 14px; font-size:13px; color:#767676; line-height:1.7;
}
.csk-clusters ul{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  /* ⚠️ ビューポートのメディアクエリでは「記事カラムの幅」を判定できない。
     auto-fit なら親の幅だけで決まる＝343pxで1列・720pxで2列に自然に割れる */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.csk-clusters li{margin:0; background:#fff; border-top:1px solid #e8edeb}
/* 表示順は本数の多い順で固定なので、最後の1つは常に列をまたいで幅を埋める
   （2列に割れたとき、右半分が空いて罫線がちぎれて見えるのを防ぐ） */
.csk-clusters li:last-child{grid-column:1 / -1}
.csk-clusters a{
  display:flex; align-items:center; gap:10px;
  padding:12px 6px; text-decoration:none; color:#1a1a1a;
  transition:background .15s ease;
}
.csk-clusters a:hover,.csk-clusters a:focus-visible{background:#f2f7f5}
.csk-clusters .csk-ico{
  flex:0 0 auto; width:30px; height:30px; padding:5px;
  border:1px solid #cfd8d5; color:#8a938f; border-radius:2px;
}
.csk-clusters .csk-ico svg{display:block; width:20px; height:20px}
.csk-clusters .csk-label{
  flex:1 1 auto; min-width:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px;
}
.csk-clusters .csk-name{font-size:15px; font-weight:700; line-height:1.45}
.csk-clusters .csk-n{flex:0 0 auto; margin-left:auto; font-size:12px; color:#767676; font-variant-numeric:tabular-nums}
.csk-clusters .csk-arrow{flex:0 0 auto; width:16px; color:#a8b2ae; transition:transform .15s ease}
.csk-clusters a:hover .csk-arrow{transform:translateX(3px)}

/* いま読んでいるクラスタだけ、アイコンを塗る（他は線画で沈む）
   ＝WOWはこれ1つ。THE idea「現在地」以外のことは語らせない */
.csk-clusters .is-here .csk-ico{background:#0B4F44; border-color:#0B4F44; color:#fff}
.csk-clusters .is-here .csk-name{color:#0B4F44}
.csk-clusters .is-here .csk-badge{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:#0B4F44; padding:2px 7px; border-radius:2px;
}
.csk-clusters .csk-note{margin:12px 0 0; font-size:12px; color:#8a938f; line-height:1.7}