@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-08-23 追加 / 2026-08-25 改訂
**
** 【2026-08-25 の改訂内容 ― 初期描画のちらつき対策】
** 旧実装は折りたたみの初期状態を JavaScript が決めていた。
** HTML は全階層が展開されたまま配信され、子テーマの javascript.js は
** </body> 直前で読み込まれるため、サイドバーが 1081px → 349px に畳まれる
** 様子がページ遷移のたびに見えていた（画面がフラッシュする原因）。
**
** 改訂後は初期状態を CSS だけで確定させる。
** ・<html> の .js-cat-accordion は functions.php が <head> で付ける
**   （JS 無効環境では付かない → 従来どおり全展開で劣化しない）
** ・表示中カテゴリーまでの道筋は WordPress が出力する
**   current-cat / current-cat-ancestor で開く。JS を待たない
** ・javascript.js は is-open へ移し替えたあと .cat-accordion-ready を付ける。
**   それ以降は下の初期ルールが降りるので、トグルで閉じられるようになる
**
** 開閉ボタンはカテゴリー名の先頭マーカー（従来の「→」）に重ねる。
** 置くのは透明な当たり判定だけで、見えるマーカーは a::before が描く。
** ボタンが JS で後から挿入されてもレイアウトは 1px も動かない。
**   子なし … →（\f0da）そのまま記事一覧へ
**   子あり … ↓（\f0d7）閉 ／ ↑（\f0d8）開
************************************/

/* --- 折りたたみの初期状態。JS を待たずに確定する --- */
.js-cat-accordion .widget_categories li.cat-item > ul.children{display:none}
.js-cat-accordion .widget_categories li.cat-item.is-open > ul.children{display:block}
.js-cat-accordion .widget_categories:not(.cat-accordion-ready) li.current-cat > ul.children,
.js-cat-accordion .widget_categories:not(.cat-accordion-ready) li.current-cat-ancestor > ul.children{display:block}

/* --- 先頭マーカーで開閉状態を表す（FontAwesome 4 のカレット） --- */
.js-cat-accordion .widget_categories li.cat-item > a::before{content:"\f0da"}
.js-cat-accordion .widget_categories li.cat-item:has(> ul.children) > a::before{content:"\f0d7"}
.js-cat-accordion .widget_categories li.cat-item.is-open:has(> ul.children) > a::before{content:"\f0d8"}
.js-cat-accordion .widget_categories:not(.cat-accordion-ready) li.current-cat:has(> ul.children) > a::before,
.js-cat-accordion .widget_categories:not(.cat-accordion-ready) li.current-cat-ancestor:has(> ul.children) > a::before{content:"\f0d8"}

/* --- マーカーに重ねる透明な開閉ボタン（生成は javascript.js） ---
   幅 20px はリンクの padding-left と同じ＝マーカー用に空いている領域。
   カテゴリー名の文字には掛からないので、リンクのクリックを邪魔しない。
   高さはリンク1行分（line-height 1.8em ＋ 上下 padding 10px）。 */
.widget_categories li.cat-item{position:relative}
.widget_categories .cat-toggle{
  position:absolute;left:0;top:0;z-index:2;
  width:20px;height:calc(1.8em + 20px);
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.widget_categories .cat-toggle:focus-visible{
  outline:2px solid currentColor;outline-offset:-3px;border-radius:3px;
}
/* ボタンに触れたらマーカーを少し強調する（ボタンはリンクの直前に入る） */
.widget_categories .cat-toggle:hover ~ a::before,
.widget_categories .cat-toggle:focus-visible ~ a::before{transform:scale(1.4)}

/* 現在表示中のカテゴリーは、閉じていても位置がわかるようにする */
.widget_categories li.current-cat > a{font-weight:700}

/************************************
** カテゴリーカード（子カテゴリーのフロントページ一覧）
** 2026-08-25 追加。子テーマの style.css 末尾に追記して使う。
** マークアップは functions.php の byt_category_cards_tag() が出す。
************************************/
.cat-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:1.6em 0 2.4em;
}

.cat-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e3e3e3;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease;
}
.cat-card:hover,
.cat-card:focus-visible{
  box-shadow:0 4px 14px rgba(0,0,0,.14);
  transform:translateY(-2px);
  color:inherit;
  text-decoration:none;
}
.cat-card:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* サムネイル。比率を固定して、縦横バラバラの流用画像でも揃えて見せる */
.cat-card-thumb{
  margin:0;
  aspect-ratio:16/9;
  background:#eceff1;
  overflow:hidden;
}
.cat-card-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* アイキャッチ未設定のカテゴリー用。潰れないように箱だけ残す */
.cat-card-thumb-empty{
  background:repeating-linear-gradient(
    45deg,#eceff1,#eceff1 10px,#e4e8ea 10px,#e4e8ea 20px);
}

.cat-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px 14px;
}
.cat-card-name{
  font-size:1.05em;
  font-weight:700;
  line-height:1.45;
}
.cat-card-lead{
  font-size:.85em;
  line-height:1.6;
  color:#555;
}
.cat-card-count{
  margin-top:auto;
  padding-top:4px;
  font-size:.75em;
  color:#888;
}

/* 子カテゴリーに属していない記事が残っている場合の見出し */
.cat-rest-title{
  margin:1.8em 0 .6em;
  padding-left:.5em;
  border-left:4px solid #bbb;
  font-size:1.1em;
  line-height:1.4;
}

/*834px以下*/
@media screen and (max-width:834px){
  .cat-cards{
    grid-template-columns:1fr;
    gap:12px;
  }
}

/************************************
** 連載内の前後移動ナビ
** 2026-08-31 追加。子テーマの style.css 末尾に追記して使う。
** マークアップは functions.php の byt_series_navi_tag() が出す。
************************************/
.series-navi{
  margin:2em 0 2.4em;
  border:1px solid #e3e3e3;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}

/* 見出し行：連載名といま何番目か。カテゴリーアーカイブへの導線も兼ねる */
.series-navi-index{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:#f5f5f5;
  border-bottom:1px solid #e3e3e3;
  color:inherit;
  text-decoration:none;
}
.series-navi-index:hover{background:#efefef;color:inherit;text-decoration:none}
.series-navi-name{font-weight:700;font-size:.95em;line-height:1.4}
.series-navi-pos{
  flex:none;
  font-size:.8em;
  color:#777;
  font-variant-numeric:tabular-nums;
}

.series-navi-body{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.series-navi-item{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"dir dir" "thumb title";
  align-items:center;
  gap:4px 10px;
  padding:12px 14px;
  color:inherit;
  text-decoration:none;
}
.series-navi-item:hover{background:#fafafa;color:inherit;text-decoration:none}
.series-navi-next{border-left:1px solid #eee}
/* 次の記事は右寄せにして、左右の向きを目で分かるようにする */
.series-navi-next{grid-template-areas:"dir dir" "title thumb";grid-template-columns:1fr auto;text-align:right}

.series-navi-dir{
  grid-area:dir;
  font-size:.75em;
  color:#888;
}
.series-navi-prev .series-navi-dir::before{content:"← "}
.series-navi-next .series-navi-dir::after{content:" →"}

.series-navi-thumb{grid-area:thumb;line-height:0}
.series-navi-thumb img{
  display:block;
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:4px;
}
.series-navi-title{
  grid-area:title;
  font-size:.85em;
  line-height:1.5;
}

/* 端に来たとき。リンクではないので沈める */
.series-navi-item.is-empty{color:#aaa}
.series-navi-item.is-empty .series-navi-title{font-size:.8em}

/*834px以下*/
@media screen and (max-width:834px){
  .series-navi-body{grid-template-columns:1fr}
  .series-navi-next{border-left:0;border-top:1px solid #eee}
}