@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){
  /* PCと同じ「画像に重ねず、テキストエリア左上に表示」にするため、
     .entry-card-thumbはstaticのままにし(overflow:hiddenでクリップされる
     のを回避)、containing blockを.entry-card-wrapにする。
     モバイルでは画像幅がCocoon側で38%(.entry-card-content margin-left:40%)
     になるため、leftも同じ40%に合わせる */
  .entry-card-thumb {
    position: static !important;
  }
  .entry-card-thumb .cat-label {
    position: absolute !important;
    top: 0.6em !important;
    left: 40% !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--kb-brass) !important;
    font-size: 11px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

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

/************************************
** 靴バカ.com リデザイン用カスタムCSS(2026-08-06)
** 配色: 生成りキャンバス+焦茶インク+シェルコードバン茶+真鍮アクセント
** プレビュー: https://claude.ai/code/artifact/0e547cc1-f5ac-4174-b559-1478f166ba49
************************************/
:root {
  --kb-ground: #3F2D20;
  --kb-panel: #503929;
  --kb-ink: #EDE3D0;
  --kb-ink-soft: #C2B39C;
  --kb-accent: #C97A6B;
  --kb-accent-soft: #C9A06B;
  --kb-brass: #C7A25A;
  /* 見出し用の明るい真鍮。--kb-brass(#C7A25A)は地色#3F2D20に対し5.44:1で、
     文字色に使うと本文のクリーム(10.26:1)より暗くなり「色を変えたのに沈む」
     現象が起きるため、明度を上げた6.93:1のこの色を見出し文字に使う。 */
  --kb-brass-light: #D9B972;
  /* 強調・注意用の赤。旧AFFINGERの純赤#ff0000は地色#3F2D20に対し3.27:1しか
     なく本文のAA基準(4.5:1)を下回るため、明度を上げた6.41:1のこの色を使う。 */
  --kb-alert: #FF9B8A;
  --kb-line: rgba(237, 227, 208, 0.16);
  --kb-serif: "游明朝体", "YuMincho", "Hiragino Mincho ProN", "HiraMinProN-W6", serif;
}

body {
  background-color: var(--kb-ground);
  color: var(--kb-ink);
}

a {
  color: var(--kb-accent);
}
a:hover {
  color: var(--kb-accent-soft);
}
/* Cocoon本体の各所が白背景(#f5f8fa)のホバースタイルを指定しており、
   ダーク配色の文字が読めなくなるためまとめて上書き */
.a-wrap:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.tag-link:hover, .comment-reply-link:hover,
.tagcloud a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_block ul li a:hover,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.menu-drawer a:hover,
.list-more-button:hover {
  background-color: var(--kb-panel) !important;
}

/* ---- ヘッダー ---- */
#header-container {
  background-color: var(--kb-ground);
  border-bottom: 1px solid var(--kb-brass);
}

/* ---- ヒーロー画像(トップページのタイトル+キャッチコピーに写真を重ねる、2026-08-07) ---- */
#header-in {
  position: relative;
  background-image: linear-gradient(rgba(28, 23, 18, 0.55), rgba(28, 23, 18, 0.55)), url('https://kutsubaka.com/wp-content/uploads/kutsubaka1060-310.jpg');
  background-size: cover;
  background-position: center;
  padding: 4.5em 1em;
  text-align: center;
}
#header-in .tagline {
  color: var(--kb-ink);
  font-size: 0.95em;
  letter-spacing: 0.08em;
  margin-bottom: 0.6em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
#header-in .logo a, #header-in .logo-text a {
  color: var(--kb-ink) !important;
  font-family: var(--kb-serif);
  letter-spacing: 0.06em;
  font-size: 1.6em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 834px) {
  /* 2026-08-07: LCP対策として一時 min-height:300px まで高くしてLCP要素を
     ヒーローに奪わせる実験をしたが、LCPは6.9秒のまま改善しなかった
     (真因はメインスレッドがAdSenseのJSで埋まっていることで、画像側の
     最適化では解決しないと判明)。速度に効かない以上デザイン優先とし、
     Hideの指示で元の高さに戻した。 */
  #header-in {
    padding: 3.2em 1em;
  }
}

.logo a, .logo-text a {
  color: var(--kb-ink) !important;
  font-family: var(--kb-serif);
  letter-spacing: 0.06em;
}
#navi {
  background-color: var(--kb-ground);
  border-top: none;
}
#navi .menu-item > a {
  color: var(--kb-ink-soft);
}
#navi .menu-item > a:hover {
  color: var(--kb-accent);
}

/* ---- 記事タイトル・見出し(明朝体) ---- */
.entry-title,
.entry-card-title,
.related-entry-card-title,
.article h1, .article h2, .article h3 {
  font-family: var(--kb-serif);
  font-weight: 600;
  color: var(--kb-ink);
}
/* h2は「本文との差が小さく見出しに見えない」というフィードバックを受けて
   2026-08-08に強化。装飾を足すのではなく、サイズ・余白・真鍮のアクセントバーで
   階層を作る方針(Cocoon本体の薄グレー背景の箱、旧AFFINGERの装飾過多とは別路線)。
   Cocoon本体の .article h2 が font-size:24px / padding:25px / 背景色 を
   持っているため、それを打ち消す指定が必要。 */
.entry-content h2 {
  font-size: 1.6em;
  background: none;
  border: none;
  border-left: 5px solid var(--kb-brass-light);
  padding: 0.15em 0 0.15em 0.7em;
  margin-top: 2.2em;
  color: var(--kb-brass-light);
}
.entry-content h3 {
  color: var(--kb-ink);
  border-left: 3px solid var(--kb-accent);
  background: var(--kb-panel);
}

/* ---- カード・ウィジェット・目次(角丸/影を落として直線基調に) ---- */
.entry-card, .related-entry-card, .toc, .widget,
.entry-card-wrap, .related-entry-card-wrap {
  background-color: var(--kb-panel);
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--kb-line);
}
.entry-card-snippet, .related-entry-card-snippet {
  color: var(--kb-ink-soft);
}

/* ---- 記事内カード式リンク(旧st-cardショートコード→blogcard変換分) ---- */
.blogcard-wrap {
  background-color: var(--kb-panel) !important;
  border-radius: 0 !important;
  border: 1px solid var(--kb-line);
}
.blogcard-snippet {
  color: var(--kb-ink-soft);
}
.blogcard-thumbnail {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.blogcard-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 本文リンク・引用 ---- */
.entry-content a {
  color: var(--kb-accent);
  border-bottom: 1px solid var(--kb-accent-soft);
}
.entry-content blockquote {
  background: var(--kb-panel);
  border-left: 3px solid var(--kb-accent);
}

/* ---- 著者情報ボックス ---- */
.author-info {
  background-color: var(--kb-panel);
  border-radius: 0;
  border: 1px solid var(--kb-line);
}
.author-name {
  font-family: var(--kb-serif);
  color: var(--kb-ink);
}

/* ---- サイドバー ---- */
.sidebar .widget-title, .sidebar-title {
  font-family: var(--kb-serif);
  border-bottom: 1px solid var(--kb-brass);
  color: var(--kb-ink);
}

/* ---- フッター ---- */
.footer, .footer-container {
  background-color: var(--kb-panel);
  color: var(--kb-ink);
  border-top: 1px solid var(--kb-brass);
}
.footer a {
  color: var(--kb-ink);
}
.footer .logo a {
  color: var(--kb-ink) !important;
}
/* Cocoon本体デフォルトは「ロゴ左固定・メニュー右寄せ」、中央寄せに変更 */
.footer-bottom-logo {
  float: none;
  position: static;
  text-align: center;
  margin-bottom: 12px;
}
.footer-bottom-content {
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer {
  justify-content: center;
}

/************************************
** 靴バカ.com リデザイン 追加修正(2026-08-07)
** 1) Cocoon本体が.header-container/.main/.sidebar/.footerを
**    強制的に真っ白(#fff)にしていて配色が薄く見えていた問題を修正
** 2) トップページの記事リストの行間を拡張
************************************/
.header-container, .main, .sidebar {
  background-color: var(--kb-ground) !important;
}

.list {
  row-gap: 2.4em;
}
.entry-card-wrap {
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--kb-line);
  display: flex;
}
/* タイトルが画像上端に詰まって見えていたため上部に余白を追加。
   本文右側にも余白を持たせる。テキストは上寄せのまま */
.entry-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2em 1.4em 0 0;
}
.entry-card-title {
  margin-bottom: 1.4em;
}
/* カテゴリーラベルを画像への重ね表示から、テキストエリア左上(タイトルの少し上)へ移動 */
.entry-card-wrap {
  position: relative;
}
.entry-card-thumb {
  position: static;
}
.entry-card-thumb .cat-label {
  position: absolute;
  top: 0.6em;
  left: 340px;
  background-color: transparent;
  border: none;
  color: var(--kb-brass);
  font-size: 12px;
  padding: 0;
}
.entry-card-snippet, .related-entry-card-snippet {
  line-height: 1.9;
}

/************************************
** 靴バカ.com リデザイン 追加修正(2026-08-07 その3、その4で1:1に変更)
** 1) カード・アイキャッチ画像を正方形(1:1)にクロップ表示
************************************/
.entry-card-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.entry-card-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-entry-card-thumb {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.related-entry-card-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eye-catch {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.eye-catch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/************************************
** 靴バカ.com リデザイン 追加修正(2026-08-07 その5)
** 1) 前後記事ナビゲーションの文字が読めない問題を修正
**    (Cocoon本体の.a-wrapがcolor: var(--cocoon-text-color)(#333)を
**     指定しており、子テーマのa{color}指定より詳細度が高く上書きされていた)
** 2) 前後記事ナビゲーションのサムネイルも5:4クロップに統一
************************************/
.prev-post-title, .next-post-title {
  color: var(--kb-ink);
}
.prev-post-thumb, .next-post-thumb {
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.prev-post-thumb img, .next-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/************************************
** 靴バカ.com リデザイン 追加修正(2026-08-07 その4)
** 1) 背景色を少し明るいチョコレート寄りに調整(黒すぎるとの指摘)
** 2) 記事一覧の日付テキストに文字色を明示指定
**    (Cocoon本体の.entry-date/.entry-card-metaは色指定がなく、
**     デフォルトの薄いグレーがダーク背景に同化して見えなかった)
************************************/
.entry-date, .entry-card-meta, .related-entry-card-meta,
.post-date, .post-update, .post-author {
  color: var(--kb-ink-soft);
}

/************************************
** Pinterestバナー(2026-08-07修正)
** 当初footer-centerウィジェットに置いていたが、以下2点の問題が発覚。
** 1) 枠線問題: 172行目付近の共通ルール`.widget{border:1px solid var(--kb-line)}`
**    が効いて、バナー周りに薄い四角枠が出ていた
** 2) モバイル非表示問題: Cocoon本体がモバイル(834px以下)で.footer-widgets
**    (footer-left/center/right)自体をdisplay:noneにする仕様のため、
**    バナーがモバイルで丸ごと消えていた
** → functions.phpのkb_pinterest_footer_boards()でalden/trickersボードと
** 同じcocoon_footer_beforeフックに統合(.kb-pinterest-bannerクラス)。
** これで.widgetクラスの共通スタイルの影響を受けず、PC/モバイル問わず
** 確実に表示される。枠線・点線とも無し、Hideの指示(2026-08-07)で
** 区切り線自体を完全に無くし余白のみにした。
************************************/
.kb-pinterest-banner {
  text-align: center;
  padding: 1.4em 0;
}

/* ======== 旧AFFINGER4の独自クラス互換(2026-08-08追加) ========
** Cocoonにはこれらの定義が無いため、旧テーマ時代に付けた太字・マーカー・
** ボックスがすべて「ただの本文」として表示されていた(Hide指摘で発覚)。
** 公開記事での使用数(wp db queryで実測):
**   oomozi 776 / hutoaka 131 / ymarker 66 / yellowbox 25 / huto 14 /
**   rmarker 11 / dotline 9 / attentionmark 6 / redbox 5
** 旧テーマの色はすべて白背景前提(#ff0000の赤字・#FFF9C4の黄マーカー・
** #ffffe0の黄ボックス等)で、そのままダーク配色に持ち込むと読めなくなる。
** 「強調」「注意」という意図だけを保ち、色はダーク側に置き換えている。 */

.huto {
  font-weight: bold;
}
/* 旧定義は font-size:18pt(=24px) / line-height:35px の固定値。
   本文20px基準の相対値に置き換え、同等の見え方にしている */
.oomozi {
  font-size: 1.2em;
  line-height: 1.75;
  font-weight: bold;
}
.hutoaka {
  font-weight: bold;
  color: var(--kb-alert);
}

/* マーカーは淡色ベタ塗り(#FFF9C4/#ffcdd2)だったが、ダーク背景に敷くと
   その上のクリーム文字が読めなくなる。アクセント色の半透明を下地にして
   文字色は本文のまま継承させる方式に変更 */
.ymarker,
.rmarker {
  padding: 0 0.2em;
}
.ymarker {
  background: rgba(199, 162, 90, 0.32);
}
.rmarker {
  background: rgba(201, 122, 107, 0.32);
}

.dotline {
  border-bottom: 1px dotted var(--kb-ink-soft);
}

/* ボックスは白系ベタ塗りをやめ、パネル背景+左のアクセント線で
   「補足(黄)」「注意(赤)」「その他(グレー)」の区別だけを残す */
.yellowbox,
.redbox,
.graybox {
  background: var(--kb-panel);
  padding: 1.1em 1.3em;
  margin-bottom: 1.5em;
}
.yellowbox {
  border-left: 4px solid var(--kb-brass-light);
}
.redbox {
  border-left: 4px solid var(--kb-alert);
}
.graybox {
  border-left: 4px solid var(--kb-ink-soft);
}

/* 旧テーマはjQuery+FontAwesomeで⚠アイコンを差し込んでいた(js/base.js)。
   Cocoonにその仕組みは無いのでCSSの::beforeで再現する */
.attentionmark {
  color: var(--kb-alert);
}
.attentionmark::before {
  content: "⚠ ";
}

/* 記事本文に直接書き込まれた純赤(53箇所)と純青(29箇所)のinline style。
** 地色#3F2D20に対し純赤は3.27:1、純青に至っては約1.5:1しかなく、
** どちらもダーク配色では沈んで読めない(本文のAA基準は4.5:1)。
** Hideの判断で両方とも--kb-alert(6.41:1)に置き換える。
** 記事本文(post_content)は一切書き換えていないので、この指定を消せば
** 元の純赤・純青に戻る。 */
.entry-content [style*="#ff0000"],
.entry-content [style*="#FF0000"],
.entry-content [style*="#0000ff"],
.entry-content [style*="#0000FF"] {
  color: var(--kb-alert) !important;
}

/* 管理者ログイン時だけカードに出るPV表示(本日/週/月/全体)。
** Cocoon本体はここに文字色を指定しておらず、親の.a-wrapが持つ
** color:var(--cocoon-text-color)(#333)を継承するため、ダーク配色では
** 背景と同化して全く読めなかった。前後記事ナビ・カードの日付が
** 読めなかったのと同じ原因。 */
.admin-pv,
.admin-pv > span,
.admin-pv > span > span {
  color: var(--kb-ink-soft);
}
.admin-pv {
  border-color: var(--kb-line);
}

/* ---- ページネーションの数字が読めない問題(2026-08-08修正) ----
** Cocoon本体が .page-numbers に color: var(--cocoon-text-color)(#333)を
** 指定しており、ダーク配色では背景と同化して番号が見えなかった。
** 「カード内の要素が読めない」系と同じ原因(本体が明るい背景を前提に
** 暗い文字色を指定している)。
** .current(現在ページ)は本体が明るい背景色を敷くので、そこだけ暗い文字にする。 */
.page-numbers,
.pagination a,
.pagination-next-link {
  color: var(--kb-ink);
  border-color: var(--kb-line);
}
.pagination .current,
.page-numbers.current {
  background-color: var(--kb-brass-light);
  border-color: var(--kb-brass-light);
  color: var(--kb-ground);
}
/* 「…」は本体が薄い背景+opacity0.6で、暗い背景だとほぼ消える */
.page-numbers.dots {
  background-color: transparent;
  opacity: 1;
  color: var(--kb-ink-soft);
}
/* ホバー時に本体が背景を#f5f8fa(ほぼ白)にするため文字が飛ぶ */
.pagination a:hover,
.pagination-next-link:hover {
  background-color: var(--kb-panel) !important;
  color: var(--kb-ink) !important;
}