/*
Theme Name: asitayaruo
Template:   cocoon-master
Version:    1.0.0
Description: 明日やる夫は馬鹿やる夫 用の子テーマ
*/

/* ══ AA（アスキーアート）を壊さないための指定 ═══════════════════════
   出典: 旧サイト affinger-child の style.css（アーカイブから回収）
         ＋ 競合「やる夫スレ本棚」の子テーマ（Saitamaar / aahub の配信）

   ★変えてはいけない点と、その理由
     white-space: nowrap    折り返した瞬間にAAは読めなくなる
     line-height: 18px      行間を詰めないと縦横比が崩れる
     letter-spacing: 0      字間が入るとズレる
     text-size-adjust:100%  iOSが勝手に文字を拡大する。無いとiPhoneで崩れる
                            ★これは旧サイトにあって競合に無い。うちの資産
     font-size: 16px        サイト全体が小さくても、本文だけはこの大きさにする
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Saitamaar';
  src:local('Saitamaar'),
      url('https://keage.tokyo/fonts/Saitamaar.woff2') format('woff2'),
      url('https://keage.tokyo/fonts/Saitamaar.woff')  format('woff');
  font-display:swap; font-weight:normal; font-style:normal;
}

.entry-content, .entry-content dt, .entry-content dd,
.article dt, .article dd, .single dt, .single dd {
  font-family:"ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",
              "IPAMonaPGothic","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",
              Mona, Monapo, Saitamaar, sans-serif;
  font-size:16px;
  line-height:18px;
  letter-spacing:0;
  font-weight:normal;
  font-style:normal;
  white-space:nowrap;
  /* ★2026-09-02 Owner 判断で `auto` → `visible` に変更。
     AAが箱の外へ出て、**ページごと横スクロールする**（競合スレ本棚と同じ作り）。

     `auto`（箱の中だけスクロール）の方がページの作りは壊れない。それは事実。
     だが Owner の判断:「大事なのはユーザーにとっての可視性」。
     箱の中のスクロールは**読者が気づきにくく、動かしにくい**。
     ページ自体のスクロールバーなら、誰でも分かるし操作できる。
     ＝**構造の綺麗さより、読者がAAを最後まで見られることを取る。** */
  overflow-x:visible;
  margin-bottom:0;
  padding:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color:#000;
}

/* ★AA用の指定はトップページには要らない（2026-09-02 実測で判明）。
   `white-space:nowrap` は `.entry-content` 全体に掛かるので、**AAの無いトップページの
   記事一覧まで折り返さなくなる。**箱が `auto` の間は切り取られて表に出なかったが、
   `visible` にした途端に**608px こぼれた**（375pxの画面で実測）。
   トップページの中身は普通の文章なので、折り返してよい。 */
.home.page .entry-content,
.home.page .entry-content dt,
.home.page .entry-content dd{
  white-space:normal;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}

/* ★DLsite のブログパーツには**何も指定しない**（2026-09-01 実測で確認）。
   一度 `white-space:normal` を当てたが、**当てても当てなくても結果が同一**だった
   （LIの高さ231px・はみ出し0件・外枠の必要幅8060px、すべて変化なし）。
   ウィジェットは `.DLsite_bp_inner` に自前の `overflow-x:auto` を持つ
   **独立した横スクロールの箱**で、記事の箱にもページにも影響しない。
   → 効果の無い指定で他社のウィジェットに触れない。外した。 */

/* ★固定ページのAA（2026-09-04 Owner 指摘で追加）。
   AAが素のテキストで保管されているため WordPress が `<p>` に包む。
   `dd` を狙った上の指定が当たらず、Cocoon の p 指定（行間28.8px）に負けて崩れていた。
   → functions.php が**AAらしい段落にだけ** `.ym-aa` を付ける。ここで体裁を当てる。
   ★普通の文章と作品一覧は対象外。あちらは 28.8px のままが正しい。 */
.entry-content p.ym-aa{
  font-family:"ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",
              "IPAMonaPGothic","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",
              Mona, Monapo, Saitamaar, sans-serif;
  font-size:16px;
  line-height:18px;
  letter-spacing:0;
  font-weight:normal;
  font-style:normal;
  white-space:nowrap;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color:#000;
}

/* レス番号・トリップ・日時の行は本文ではないので折り返してよい */
.entry-content dt, .article dt, .single dt {
  white-space:normal;
  font-size:.8rem;
}
.entry-content dd, .article dd, .single dd { margin:0; }

/* AAは横に長い。本文の幅を絞らない */
.entry-content { max-width:none; }

/* ── ヘッダ（案B: 色の帯）─────────────────────────────────
   2026-09-01 Owner 決定「B案で試してみよう」。

   ★狙いは縦を詰めること。Cocoon 既定では
     サイト名の帯 117px ＋ メニューの帯 60px ＝ 記事が始まるまで 201px（実測）。
     AAは縦に長いので、画面の1/4を看板で使うのは高い。
   ★やり方: テンプレートを触らず、#header-container-in を横並びにするだけ。
     `#header`（サイト名）と `#navi`（メニュー）は元から兄弟なので、
     親を flex にすれば1行に収まる。**PHPもメニューの中身も変えていない。**
   ★幅 1265px は本文カラムの実測値。ここを合わせると帯の中身が記事と縦に揃う。
   ★横並びにするのはパソコン表示だけ。1023px 以下は Cocoon のスマホ用ヘッダが
     別に働くので、色だけ合わせて構造は触らない。
   ───────────────────────────────────────────────────── */
#header-container{ background:#2c2c2a; }
#header-container-in,
#header-container .header,
#header-container #navi{ background:transparent; border:0; }

/* サイト名。AAサイトなので本文と同じ等幅寄りの書体を使う（identity） */
#header-container .site-name-text{
  font-family:"ＭＳ Ｐゴシック","MS PGothic","IPAMonaPGothic",Mona,Saitamaar,sans-serif;
  font-size:20px;
  line-height:1.2;
  color:#f1efe8;
  white-space:nowrap;
}
#header-container .site-name-text-link,
#header-container .site-name-text-link:hover{ text-decoration:none; }
#header-container .tagline{ display:none; }

/* メニュー */
#header-container .navi a{ color:#b4b2a9; }
#header-container .navi a:hover{ color:#fff; background:transparent; }

@media screen and (min-width:1024px){
  #header-container-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:1265px;
    max-width:100%;
    margin:0 auto;
    padding:13px 0;
  }
  #header-container-in > .header{ flex:1 1 auto; min-width:0; }
  #header-container-in > #navi{ flex:0 0 auto; }

  /* サイト名の右に道具を並べる（ロゴ直後のフックで差してある）
     ★Cocoon は `hlt-center-logo` のとき `flex-direction:column` にしている（実測）。
       ロゴを中央に据える設定のため。横並びにするので明示的に戻す。 */
  #header-container .header-in{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:22px;
  }
  #header-container .logo-header{ flex:0 0 auto; }

  /* .wrap は本来「中央に寄せる箱」。1行に入れるので箱としての役割を外す */
  #header-container .header-in.wrap,
  #header-container .navi-in.wrap{
    width:auto; max-width:none; margin:0; padding:0;
  }
  #header-container .logo-header{ margin:0; padding:0; }

  /* ★Cocoon 既定の項目は 高さ60px × 幅176px の「タイル」。
     帯に入れるとメニューだけで880px を占める（実測）。
     高さも幅も文字なりにして、右端に寄せる。 */
  #header-container .menu-pc{ width:auto; justify-content:flex-end; }
  #header-container .menu-pc > li{ width:auto; height:auto; }
  #header-container .menu-pc > li > a{
    width:auto;
    height:auto;
    line-height:1.2;
    padding:0 0 0 26px;
    font-size:13px;
  }
}

/* ── 畳んでいる間だけヘッダに出す道具 ───────────────────────
   2026-09-01 Owner 指示「サイドバーがたたまれた時にヘッダー部分に
   検索バーとハンバーガーメニューを表示」。

   ★2026-09-01 作り直し。**開閉は文字のボタン2つ。片方だけ出す。**
     　開いている  「≪ メニューを閉じる」
     　畳んでいる  「メニューを開く ≫」
     ハンバーガーは使わない。**☰ は「開く」の記号であって「閉じる」の記号ではない**
     （Owner 指摘）。☰1つで兼ねる案は取り下げた。
     左端の縦書きボタンも廃止済み（場所が違うと「戻し方が変わった」ように見えるため）。
   ★競合スレ本棚も文字ボタン2つだった（実測）:
     　畳  `button.view-sidebar`「メニューを開く >>」 166x32
     　開  `button.hide-sidebar`「<< メニューを閉じる」179x32
   ★**検索窓だけは畳んでいる時に出す。**開いていればサイドバーの中に検索窓がある。
   ★出す条件は既存の `.no-sidebar` に相乗りする。新しい状態を作らない。
   ★パソコン表示だけ。スマホはサイドバーが元から下に回り、
     画面下の固定バーに検索がある（重複させない）。
   ───────────────────────────────────────────────────── */
.ym-header-tools{ display:none; }

@media screen and (min-width:1024px){
  /* ★.no-sidebar を付けない。**開いていても畳んでいても ☰ は出す** */
  .ym-header-tools{
    display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;
  }


  /* ★検索窓は畳んでいる時だけ。開いていればサイドバーの中にある */
  .ym-header-search{ display:none; }
  .no-sidebar .ym-header-search{
    display:flex; align-items:center;
    flex:1 1 auto; min-width:0; max-width:360px;
    border:1px solid #55534e; border-radius:4px;
    background:rgba(255,255,255,.06);
  }
  .ym-header-search input[type="search"]{
    flex:1 1 auto; min-width:0;
    border:0; background:transparent; box-shadow:none;
    color:#f1efe8; font-size:13px; line-height:1.2;
    padding:5px 10px; height:auto; margin:0;
  }
  .ym-header-search input[type="search"]:focus{ outline:0; }
  .ym-header-search input::placeholder{ color:#888780; }
  .ym-header-search button{
    flex:0 0 auto;
    border:0; background:transparent; cursor:pointer;
    color:#b4b2a9; font-size:13px; padding:5px 9px;
  }
  .ym-header-search button:hover{ color:#fff; }
}

@media screen and (max-width:1023px){
  /* ★スマホのメニューは**消さずに1行に畳む**（2026-09-01 Owner 指摘で復活）。
     一度は「画面下の固定バーと重複している」として消したが、
     **トップ / 掲載作品一覧 / お知らせ / RSS / X が見えなくなる**と指摘された。
     下のバーから開く引き出しには入っているが、**開かないと見えない。**
     ★Cocoon 既定は3行に折り返して 120px を使う。
       横1行にして、入りきらなければ**横スクロール**させる（実測 120px → 約36px）。
     ★`#navi .navi-in > .menu-mobile` と同じ強さでは勝てないので id を1つ足す。 */
  #header-container #navi .navi-in > .menu-mobile{
    display:flex;
    flex-wrap:wrap;                /* ★隠さない。入らなければ折り返す */
    justify-content:center;
  }
  /* ★Cocoon 既定は項目が **幅50%固定のタイル**（実測 187.5px）。
     5項目なので 250% ＝ 3行になる。文字なりの幅に直すと1〜2行に収まる。
     ★`#navi` を足さないと Cocoon 側の指定に負ける（実測） */
  #header-container #navi .navi-in > .menu-mobile > li{
    flex:0 0 auto; width:auto; height:auto;
  }
  #header-container #navi .navi-in > .menu-mobile > li > a{
    width:auto; height:auto;
    padding:8px 11px; font-size:13px; line-height:1.2;
  }
  #header-container .logo-header{ padding:12px 0 6px; margin:0; }
  #header-container .site-name-text{ font-size:17px; }
}

/* ── トップページの部品 ─────────────────────────────────
   2026-09-01。競合スレ本棚のトップの作りに合わせた（実測）。
   ★肝は「高さを決めた箱の中だけスクロールさせる」こと。
     向こうは 500px の箱に32件（中身802px）。館が増えても画面を食い潰さない。
   ───────────────────────────────────────────────────── */
/* ★トップページでは、記事用の飾りを消す。
   固定ページとして作っているため、放っておくと
   ページ題名・SNSボタン・目次・投稿日が全部出てしまう（実測）。 */
/* ★コメント欄のハニーポット。**人には見えない場所へ置く。**
   `display:none` にしないのは、それを読み飛ばす機械がいるため。
   読み上げからも外してある（PHP側で aria-hidden、tabindex=-1）。 */
.ym-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ★関連記事は**題名だけ**にする（2026-09-03 Owner 指示）。
   Cocoon はカードに本文の抜粋を添えるが、うちの記事の冒頭は
   **レス番号・トリップ・日時**（例「2700 ： ◆xxxx ： 2023/…」）で、
   中身の予告として役に立たない。AAは抜粋にすると崩れるので出しようもない。 */
.related-entry-card-snippet,
.related-list .card-snippet{ display:none; }

/* ★抜粋を消しただけだと**下に空白が残る**（2026-09-03 Owner 指摘。実測で確認）。
   題名は29pxなのに、その下に35pxの余白がぶら下がっていた。内訳:
     題名の下マージン        7.2px   … 題名と抜粋の間隔だったもの
     中身枠の下パディング   14.4px   … 抜粋の下の余白だったもの
     外枠の下パディング     13.75px  … カード自体の余白（これは残す）
   前の2つは**抜粋があった前提の寸法**なので、一緒に外す。 */
.related-entry-card-title{ margin-bottom:0; }
.related-entry-card-content{ padding-bottom:0; }

/* ★SNSボタンは投稿・固定ページとも全部消す（2026-09-02 Owner 指示）。
   実測で3ブロックあった。合わせて **235px** を使っていた:
     `.sns-share.ss-col-6`  題名の下   45px
     `.sns-share.ss-col-3`  記事の下  125px
     `.sns-follow`          記事の下   65px（Website / Feedly / RSS）
   ★「SNSボタン各種」と言われたので、共有ボタンとフォローボタンの両方を対象にした。 */
.sns-share,
.sns-follow{ display:none; }

.home.page .entry-title,
.home.page .toc,
.home.page .date-tags,
.home.page .entry-categories-tags,
.home.page .footer-meta{ display:none; }

/* ★見出しは Cocoon の h2/h3 の飾りに負けるので、要素名を足して勝たせる */
.entry-content h2.ym-fp-h{
  font-size:1.05rem;
  margin:1.6em 0 0;
  padding:.45em .7em;
  background:#2c2c2a;
  color:#f1efe8;
  border:0;
  border-radius:4px 4px 0 0;
}
.entry-content h2.ym-fp-h:first-child{ margin-top:0; }
.entry-content h3.ym-fp-h3{
  font-size:.95rem; margin:1.4em 0 0; padding:.4em .7em;
  background:#5f5e5a; color:#f1efe8; border:0; border-radius:4px 4px 0 0;
}

.ym-fp-box{
  overflow-y:auto;              /* ★中だけスクロールする */
  border:1px solid #ddd;
  border-top:0;
  background:#fff;
  padding:.4em .8em;
}
.ym-fp-list{ list-style:none; margin:0; padding:0; }
.ym-fp-list > li{
  padding:.32em 0;
  border-bottom:1px dotted #e2e2e2;
  line-height:1.45;
  font-size:.86rem;
}
.ym-fp-list > li:last-child{ border-bottom:0; }
.ym-fp-title{ text-decoration:none; }
.ym-fp-date{ color:#888780; font-size:.9em; }

.ym-fp-meta{ margin-left:.6em; font-size:.82em; white-space:nowrap; }
.ym-fp-cat{
  color:#5f5e5a; text-decoration:none;
  background:#f1efe8; border-radius:3px; padding:.05em .5em;
}
.ym-fp-cat:hover{ background:#e2e0d8; }
.ym-fp-c{ color:#888780; margin-left:.6em; }
.ym-fp-c .fa{ margin-right:.25em; }
.ym-fp-pv{ color:#888780; margin-left:.6em; }

/* 順位付きの並び（ランキング・人気カテゴリ） */
.ym-fp-rank-list{ list-style:none; margin:0 0 1em; padding:.4em .8em;
  border:1px solid #ddd; border-top:0; background:#fff; }
.ym-fp-rank-list > li{
  display:flex; align-items:baseline; gap:.6em;
  padding:.32em 0; border-bottom:1px dotted #e2e2e2; font-size:.86rem;
}
.ym-fp-rank-list > li:last-child{ border-bottom:0; }
.ym-fp-rank-list > li > a{ flex:1 1 auto; min-width:0; text-decoration:none; }
.ym-fp-rank{
  flex:0 0 1.8em; text-align:center;
  background:#2c2c2a; color:#f1efe8; border-radius:3px;
  font-size:.8em; line-height:1.6;
}
.ym-fp-rank-list > li:nth-child(1) .ym-fp-rank{ background:#8a6d1f; }
.ym-fp-rank-list > li:nth-child(2) .ym-fp-rank{ background:#6b6b6b; }
.ym-fp-rank-list > li:nth-child(3) .ym-fp-rank{ background:#7a4a25; }

.ym-fp-news{
  border:1px solid #ddd; border-top:0; background:#fff;
  padding:.8em 1em; font-size:.88rem; line-height:1.7;
}
.ym-fp-news p{ margin:0 0 .6em; }
.ym-fp-more{ margin-top:.8em; font-size:.85em; }

/* ★スマホでは箱を低くする。画面の大半を1つの箱に使わせない */
@media screen and (max-width:834px){
  .ym-fp-box{ max-height:320px !important; }
  .ym-fp-meta{ display:block; margin-left:0; margin-top:.15em; }
}

/* ── サイドバー ─────────────────────────────────────────
   競合スレ本棚の子テーマから採った指定（2026-08-30 実測）。
     .widget-sidebar-title { padding:0.6rem; line-height:1.3; font-size:1rem; }
   ★Cocoon 既定の行間だと見出しが間延びする（実測 25.27px 対 向こう 18.25px）。
   ★見出しが .widget-sidebar-title になるのは**従来型ウィジェット**のとき。
     ブロックウィジェットだと h2.wp-block-heading（20px）になり、この指定は当たらない。
     → Classic Widgets を有効にしてある。外すとここが効かなくなる。
   ───────────────────────────────────────────────── */
.widget-sidebar-title{
  /* ★font-size は指定しない。
     競合の子テーマにある `font-size:1rem` は**スマホ用のメディアクエリの中**にあり、
     パソコン表示では Cocoon 既定（本文12px の1.17倍＝14.04px）がそのまま効いている。
     ここで 1rem（=16px）を書くと既定を上書きしてしまう。実測で発覚（2026-08-30）。 */
  line-height:1.3;
  padding:.6rem;
}

/* ── 1700px 未満でサイドバーが逆に広がる件 ───────────────────
   2026-09-01 Owner 指摘「少しずつ縮めた時にサイドバーが広がりすぎる地点がある」
   → 再現した。**境目は 1700px ちょうど**（実測）。

     1700px 以上   サイドバー 380px / 本文 1300px   ← 設定した固定幅
     1699px 以下   サイドバー 505px / 本文 1134px   ← Cocoon 既定の約31%

   ★Cocoon は**設定した固定幅を 1700px 以上でしか使わない**。それ未満では
     割合のレイアウトに落ちる。31% は 380px より大きいので、
     **縮めた瞬間にサイドバーが +125px 広がり、本文が −166px 縮む。**
   ★AAは横に長い。本文が166px縮む影響が大きいので、下でも固定幅に揃える。
   ★380px は**1700px 以上用に既に選んである値**。新しい数値を持ち込まない。
   ★1023px 以下ではサイドバーは `display:none`（Cocoon の no-mobile-sidebar）。
     下に回るのではなく消えるので、この指定の対象外。
   ★本文に `flex:1 1 auto` を使ってはいけない（実測）。
     基準が「中身の幅」になり、AAが横に長いせいで本文が 1,667px まで伸びて
     **サイドバーと重なった**。`flex:1 1 0%` と書いて「残り全部」を明示する。
   ★サイドバーを 380px の**固定**にしてもいけない（実測）。
     1024px まで縮めると本文が 680px → 609px と**前より狭くなる**。
     `max-width:31%` を添えて「380px を上限に、狭い時は元どおり割合で縮む」にする。
     ＝**広がる方だけを止め、狭い時は今までと同じ。**
   ───────────────────────────────────────────────────── */
@media screen and (min-width:1024px) and (max-width:1699px){
  .content-in #sidebar{ flex:0 0 auto; width:380px; max-width:31%; }
  .content-in #main{ flex:1 1 0%; width:auto; min-width:0; }
}

/* ── 本文とサイドバーの1行目の高さを揃える ──────────────────
   2026-09-01 Owner 指摘「サイドバーとメインのテキストの表示開始位置を見ると
   メインが低く感じて視線がおかしい」。→ 実測で16pxずれていた。

     どちらの枠も上端は 77px で同じ。そこから1行目までが違った:
       サイドバー  枠 77 → 見出し 113   （余白 20.8 ＋ 見出しの上マージン 16）
       本文        枠 77 → 題名   129   （余白 36   ＋ 題名の上マージン 16）
     ＝**本文だけ16px低い。**原因は枠の内側の余白の差（36 対 20.8）。

   ★余白そのものは変えない。**題名の上マージンだけ外す**と 77+36=113 で揃う。
     余白を削ると本文と枠の間が詰まって別の窮屈さが出るため。
   ───────────────────────────────────────────────────── */
@media screen and (min-width:1024px){
  /* 記事＝`.entry-title` / カテゴリ・作者ページ＝`.archive-title`。
     どちらも上マージン16pxを持っていて、同じだけ本文を押し下げていた（実測） */
  #main .entry-title,
  #main .archive-title{ margin-top:0; }

  /* ★2026-09-03 パンくずを本文の上へ移したら、今度はパンくずが1行目になった。
     こちらにも上マージン13pxがあり、113pxに対して126pxとずれた（実測）。
     題名と同じ処置で揃える。**1行目になる要素が変わるたびにここを見る。** */
  #main .breadcrumb{ margin-top:0; }

  /* ★トップページ（固定ページ）はさらに42pxずれていた。原因は2つ（実測）:
       ① `.entry-content` 自体の上マージン 16px
       ② 最初の見出しの上マージン 26.88px が効いていた。
          `h2.ym-fp-h:first-child` で消したつもりが**当たっていなかった**——
          非表示の目次 `.toc` が「最初の子」を占めていて、見出しは2番目だったため。
          `:first-of-type` なら目次を飛ばして最初の h2 に当たる。 */
  .home.page .entry-content{ margin-top:0; }
  .home.page .entry-content > h2.ym-fp-h:first-of-type{ margin-top:0; }
}

/* ★フッタ左のサイト名を消す（2026-09-02 Owner 指示）。
   `.footer-bottom-logo` の中にサイト名のリンクが入っている（実測 左端22px）。
   ★右の「© 2021 明日やる夫.」は別要素（`.footer-bottom-content`）。**残す。** */
.footer-bottom-logo{ display:none; }

/* ── 一覧ページ（カテゴリ・検索・アーカイブ）の行を詰める ─────
   2026-09-04 Owner「カテゴリの一覧ページ間隔もあいてるしダサい」→ 実測して作り直し。

   ★1行のタイトルに **104px** 使っていた。内訳（実測）:
       タイトル 29 ＋ 下マージン7.2 ＋ メタ上4.8 ＋ メタ26
       ＋ 中身の下パディング14.4 ＋ カードのパディング27.5（上下）
     **文字は42pxぶんだけ。**残りは余白と重複情報だった。
     63件で 6,552px。1作品の話数を見渡すのに縦に長すぎる。

   ★サムネ枠は既に非表示（AAサイトなので画像を持たない）。犯人ではなかった。
   ★日付は同じ行の右端へ。目線が上下に往復しなくて済む。
   ★区切り線を入れる。余白で分けるより少ない高さで境目が分かる。
   ───────────────────────────────────────────────────── */
.list .entry-card-wrap{
  padding:.55em .2em;
  border-top:1px solid #e6e4dd;
}
.list .entry-card-wrap:first-child{ border-top:0; }
.list .entry-card-content{ padding-bottom:0; margin-left:0; }

/* タイトルと日付を1行に並べる */
.list .entry-card-content{
  display:flex; align-items:baseline; gap:1em; flex-wrap:wrap;
}
.list .entry-card-title{
  flex:1 1 20em; min-width:0;
  margin:0; font-size:.95rem; line-height:1.5;
}
.list .entry-card-meta{
  flex:0 0 auto; margin:0; position:static;
}
.list .entry-card-info{ display:block; }
.list .entry-date{ font-size:.78rem; color:#888780; }

/* ★葉のカテゴリ（＝作品）では、行ごとのカテゴリ名は今いる場所の繰り返し。消す。
   親カテゴリ（＝作者）では「どの作品か」を示すので残す。印は body_class で付けている */
body.ym-cat-leaf .list .entry-card-categorys{ display:none; }
.list .entry-card-categorys{ font-size:.76rem; }

@media screen and (max-width:834px){
  .list .entry-card-title{ flex:1 1 100%; }
}

/* ── 固定ページの文章は折り返す（2026-09-04）──────────────
   ★AA用の `white-space:nowrap` は `.entry-content` 全体に掛かっている。
     そのため**AAでない普通の文章まで折り返さなくなり**、はみ出していた。
       お知らせ 131px ／ 作者ページの作品一覧 272px（実測）
   ★AAだけを nowrap に残す。印が付いた段落（.ym-aa）は下で戻している。
   ★記事（投稿）はAAが dd/dt に入る構造なのでここでは触らない。
   ───────────────────────────────────────────────────── */
body.page .entry-content p,
body.page .entry-content li,
body.page .entry-content td{ white-space:normal; }
body.page .entry-content p.ym-aa{ white-space:nowrap; }   /* ★AAは戻す */

/* ── 旧サイト由来の「素のテキスト」記事（2026-09-26）────────────
   wpautop が本文を `<p>` に包むため、29行のAA指定が Cocoon の
   `.entry-content p`（行間28.8px）に負けて崩れていた。
   対象は functions.php が post meta `_ym_aa` を見て付けた body クラスだけ。
   ★段落は判定しない。対象記事は scripts/aaset.php が事前に確定した1,290本。
   ───────────────────────────────────────────────────── */
body.ym-aa-post .entry-content p{
  font-family:"ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",
              "IPAMonaPGothic","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",
              Mona, Monapo, Saitamaar, sans-serif;
  font-size:16px;
  line-height:18px;
  letter-spacing:0;
  font-weight:normal;
  font-style:normal;
  white-space:nowrap;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color:#000;
}

/* ── 更新履歴（お知らせ）────────────────────────────────
   1つの段落に改行で詰め込まれていたものを、日付と本文の2列に組み直す。
   組み直しは functions.php 側。**保存された本文は書き換えていない。**
   ───────────────────────────────────────────────────── */
.ym-log{
  list-style:none; margin:.6em 0 0; padding:0;
  white-space:normal;
}
.ym-log > li{
  display:flex; gap:1em; align-items:baseline;
  padding:.45em .2em;
  border-top:1px solid #e6e4dd;
  font-size:.88rem; line-height:1.6;
}
.ym-log > li:first-child{ border-top:0; }
.ym-log time{
  flex:0 0 6.6em;
  font-family:"ＭＳ Ｐゴシック","MS PGothic",Mona,monospace,sans-serif;
  font-size:.82rem; color:#888780; white-space:nowrap;
}
.ym-log span{ flex:1 1 auto; min-width:0; word-break:break-all; }

@media screen and (max-width:834px){
  .ym-log > li{ display:block; }
  .ym-log time{ display:block; margin-bottom:.1em; }
}

/* ── 作者ページの作品リスト ────────────────────────────────
   2026-09-04 Owner「なんかダサくない？」→ 作り直し。

   ★見た目より先に、壊れていた点を直す:
     **AA用の `white-space:nowrap` を継承していた**（`.entry-content` から）。
     スマホ375pxで **272pxはみ出し**、作品名が画面外で読めなかった（実測）。
     ここは文章なので折り返してよい。**AAではない。**

   ★見た目の問題（実測に基づく）:
     ・黒丸＋40pxの字下げ＝ブラウザ既定のまま。設計がない
     ・件数が作品名と同じ16px。主従がない
     ・青リンクが縦に並ぶだけで、区切りも密度もない
     ・「その他の記事」が作品と同列に並んでいた（作品ではない）
   ★掲載作品一覧（`.ym-ix`）と同じ言葉づかいに揃える。
   ───────────────────────────────────────────────────── */
.ym-wl-sum{
  margin:.2em 0 .8em;
  font-size:.82rem;
  color:#888780;
  white-space:normal;
}
.ym-wl-sum b{ color:#2c2c2a; font-size:1.05em; }

.entry-content ul.ym-worklist{
  list-style:none;          /* ★黒丸をやめる */
  margin:0;
  padding:0;                /* ★40pxの字下げをやめる */
  white-space:normal;       /* ★★AA用の nowrap を切る。ここが破損の原因 */
}
.entry-content ul.ym-worklist > li{
  display:flex;
  align-items:baseline;
  gap:.8em;
  padding:.5em .2em;
  margin:0;
  border-top:1px solid #e6e4dd;
  line-height:1.5;
  white-space:normal;
}
.entry-content ul.ym-worklist > li:first-child{ border-top:0; }
.entry-content ul.ym-worklist > li > a{
  flex:1 1 auto;
  min-width:0;
  text-decoration:none;
  word-break:break-all;     /* 長い作品名でも枠から出さない */
}
.entry-content ul.ym-worklist > li > a:hover{ text-decoration:underline; }
.ym-worklist .ym-count,
.ym-wl-direct .ym-count{
  flex:0 0 auto;
  font-size:.78rem;
  color:#888780;
  white-space:nowrap;       /* 件数だけは折り返さない */
}

/* ★作品ではないので、一覧から切り離して薄く置く */
.ym-wl-direct{
  display:flex; align-items:baseline; gap:.8em;
  margin:1em 0 0; padding:.5em .2em;
  border-top:2px solid #e6e4dd;
  font-size:.9rem; white-space:normal;
}
.ym-wl-direct > a{ flex:1 1 auto; text-decoration:none; color:#5f5e5a; }

.ym-trip-alias{ white-space:normal; }

/* ── 掲載作品一覧 ───────────────────────────────────────
   2026-09-02。**画像を使わない、文字だけの密な一覧。**
   競合は「サムネイル＋縦長カード＋累計PV」だが、うちは画像もPVも持っていない。
   持っているのは**記事数**と**トリップ**なので、そちらで引ける形にした。
   ★トリップは等幅で出す。`◆bbSAmutrEGW/` のような文字列は等幅の方が読み違えない。
   ───────────────────────────────────────────────────── */
/* ★AA用の `white-space:nowrap` がここにも継承されて、作品名が折り返さず
   スマホで357pxこぼれた（実測）。**この一覧の中だけ** normal に戻す。
   ★固定ページ全体を対象にはしない。全角空白が並ぶ固定ページが9件あり、
     AAが混じっている可能性を排除できないため（実測）。 */
.ym-ix, .ym-ix *{ white-space:normal; }

.ym-ix-tools{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px; background:#f1efe8; border-radius:4px;
}
.ym-ix-filter{
  flex:1 1 18em; min-width:0;
  border:1px solid #ccc; border-radius:4px; background:#fff;
  padding:7px 10px; font-size:14px;
}
.ym-ix-sort{ display:flex; gap:6px; flex:0 0 auto; }
.ym-ix-sort button{
  border:1px solid #ccc; border-radius:4px; background:#fff; cursor:pointer;
  color:#5f5e5a; font-size:12px; padding:6px 12px; white-space:nowrap;
}
.ym-ix-sort button.is-on{ background:#2c2c2a; border-color:#2c2c2a; color:#fff; }

.ym-ix-sum{ margin:.7em 0 .3em; font-size:.82rem; color:#888780; }
.ym-ix-hit{ color:#2c2c2a; font-weight:bold; }

.ym-ix-list{ list-style:none; margin:0; padding:0; }
.ym-ix-author{ border-top:1px solid #e6e4dd; padding:.55em 0; }
.ym-ix-author:first-child{ border-top:0; }

/* 作者の行。名前・記事数・作品数を1行に収める */
.ym-ix-head{ display:flex; align-items:baseline; gap:10px; }
.ym-ix-head > a{
  font-family:"ＭＳ Ｐゴシック","MS PGothic",Mona,monospace,sans-serif;
  font-size:.95rem; text-decoration:none; word-break:break-all;
}
.ym-ix-n{ flex:0 0 auto; font-size:.78rem; color:#888780; }
.ym-ix-w{ flex:0 0 auto; font-size:.78rem; color:#b4b2a9; }

/* 作品は作者の下に、字下げして小さく並べる */
.ym-ix-works{
  list-style:none; margin:.25em 0 0; padding:0 0 0 1.4em;
  display:flex; flex-wrap:wrap; gap:.15em 1.2em;
}
.ym-ix-works > li{ font-size:.84rem; }
.ym-ix-works a{ text-decoration:none; }
.ym-ix-works .ym-ix-n{ margin-left:.35em; }

@media screen and (max-width:834px){
  .ym-ix-works{ display:block; padding-left:1em; }
  .ym-ix-sort{ width:100%; }
}

/* ── サイドバーの開閉ボタン（画面左端・縦書き）─────────────
   ★2026-09-01 Owner 指示で**最初の実装に戻した。**

   間に3つ試して全部戻ってきた。同じ道を二度通らないよう理由を残す:
     1「閉じるは左端の縦書き、開くはヘッダの ☰」→ 場所も形も違うので変
     2「☰ 1つで開閉の両方を兼ねる」  → ☰ は「開く」の記号。「閉じる」ではない
     3「カラムの左上（コンテンツ上部の枠）」→ ヘッダとの間に隙間が空いて奇妙
   ＝**最初の形が正しかった。**`position:fixed` で本文の流れに入らないので、
     位置も形も変わらず、**隙間も生まれない。**

   ★仕組みは Cocoon が元から持つ `.no-sidebar` を付け外しするだけ。幅の計算は Cocoon 側。
   ★置き場所はフッタ（テンプレートを触らないため）。位置はここで決める。
   ★スマホでは出さない。サイドバーは元々出ないため意味がない
     （Cocoon の no-mobile-sidebar）。
   ───────────────────────────────────────────────────── */
.ym-sidebar-toggle{
  position:fixed;
  left:0;
  /* ★画面の縦の中央に置く（2026-09-01 Owner 指示。元は bottom:120px）。
     スクロール位置に関わらず、目線の高さの左脇にいる。 */
  top:50%;
  transform:translateY(-50%);
  z-index:99;
  display:flex;
  flex-direction:column;
}
.ym-sidebar-toggle button{
  writing-mode:vertical-rl;      /* 縦書き。横幅を食わない */
  border:0;
  cursor:pointer;
  padding:14px 5px;
  font-size:12px;
  line-height:1;
  /* ★色はヘッダの帯と同じ（2026-09-01 Owner 指示）。サイトの一部だと分かる */
  background:#2c2c2a;
  color:#fff;
  border-radius:0 4px 4px 0;
}
.ym-sidebar-toggle button:hover{ background:#454541; }

/* いまの状態に応じて、出すボタンを1つだけにする */
.ym-view-sidebar{ display:none; }
.no-sidebar .ym-view-sidebar{ display:inline-block; }
.no-sidebar .ym-hide-sidebar{ display:none; }

@media screen and (max-width:1023px){
  .ym-sidebar-toggle{ display:none; }
}

/* ── サイドバーのカテゴリ（開閉できるツリー）─────────────────
   親84件・子166件。既定では子を閉じておく。
   ★開閉ボタンの置き場所は競合スレ本棚に合わせた（2026-08-30 実測）:
     名前と件数のリンクの**後ろ**に、行内で置く。左に絶対配置しない。
   ★JavaScript が動かない環境では**全部開いた状態**になる（読めなくならない）。
     `.has-children` は JS が付けるクラスなので、付かなければ閉じる指定も効かない。
   ───────────────────────────────────────────────────── */
.widget_categories ul{ list-style:none; margin:0; padding:0; }
.widget_categories li.cat-item{ line-height:1.5; }
.widget_categories li.cat-item > ul.children{ padding-left:1em; }

/* ★中身を全部「行内」にする。
   Cocoon の既定はリンクがブロックで件数が右端に寄る。そのままだと
   開閉ボタンが**名前の下に落ちる**（実測）。
   競合スレ本棚は li 以外を inline にしていた（link/caption/count すべて inline）。
   件数は名前のすぐ後ろに並ぶ形になる。 */
.widget_categories li.cat-item > a,
.widget_categories li.cat-item .list-item-caption,
.widget_categories li.cat-item .post-count{
  display:inline;
  width:auto;
  float:none;
  position:static;
  padding:0;
}
.widget_categories li.cat-item .post-count{ margin-left:.4em; opacity:.7; }

/* 開閉ボタン（名前の右・行内） */
.widget_categories .menu_toggle{
  display:inline-block;
  margin-left:.3em;
  cursor:pointer;
  color:var(--cocoon-text-color,#555);
  font-size:1.15em;
  line-height:1;
  vertical-align:middle;
  text-decoration:none;
}
.widget_categories .menu_toggle:hover{ opacity:.6; }

/* 子は既定で閉じる。開いたときだけ出す */
.widget_categories li.has-children > ul.children{ display:none; }
.widget_categories li.has-children.is-open > ul.children{ display:block; }

/* いま見ているカテゴリを目立たせる */
.widget_categories li.current-cat > a{ font-weight:700; }


/* ══════════════════════════════════════════════════════════════
   記事本文下の回遊ブロック「同じ作者の他の作品」（2026-09-04）
   ★置き場所は関連記事の下・コメントの上（below-single-related-entries）。
     関連記事＝次の話、こちら＝次の作品。役割が違うので見た目も分ける。
   ★AA用の nowrap がここまで効かないよう normal を明示する
     （[[feedback-ugly-often-means-broken]] と同じ破損の型）
   ══════════════════════════════════════════════════════════════ */

.widget-below-single-related-entries{ margin:0 0 1.6em; }

.ym-sa{
  white-space:normal;
  border:1px solid #e6e4dd;
  border-radius:4px;
  padding:.9em 1.1em 1em;
  background:#fbfaf7;
}
.ym-sa-h{
  margin:0 0 .5em;
  padding:0;
  font-size:1.02rem;
  font-weight:700;
  color:#2c2c2a;
  border:0;
  background:none;
}
.ym-sa-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ym-sa-list > li{
  display:flex;
  align-items:baseline;
  gap:.8em;
  margin:0;
  padding:.45em .1em;
  border-top:1px solid #e6e4dd;
  line-height:1.5;
}
.ym-sa-list > li:first-child{ border-top:0; }
.ym-sa-list > li > a{
  flex:1 1 auto;
  min-width:0;
  text-decoration:none;
  word-break:break-all;
}
.ym-sa-list > li > a:hover{ text-decoration:underline; }
.ym-sa-list .ym-count{
  flex:0 0 auto;
  font-size:.78rem;
  color:#8a887f;
  font-variant-numeric:tabular-nums;
}
.ym-sa-more{
  margin:.8em 0 0;
  padding-top:.6em;
  border-top:1px solid #e6e4dd;
  font-size:.86rem;
}
.ym-sa-more a{ text-decoration:none; word-break:break-all; }
.ym-sa-more a:hover{ text-decoration:underline; }


/* ══════════════════════════════════════════════════════════════
   ヘッダのドロップダウン（2026-09-04「連絡・リクエスト」追加に伴い）
   ★うちのヘッダナビは**右端に寄っている。**Cocoon 既定の左揃えのままだと
     子メニューが画面の外へ出る（実測: 1280px で9pxはみ出し、
     マウスを乗せた瞬間にページへ横スクロールが24px出た）。
     → 右端に合わせる。ナビが右寄せである以上こちらが正しい
   ══════════════════════════════════════════════════════════════ */

#navi .navi-in > ul > li > ul.sub-menu{
  left:auto;
  right:0;

  /* ★★2026-09-05 Owner 報告「サブメニューが白くて可視性が悪い」を直した。
     　 原因は**こちらの思い込み**。下の文字色だけを明るく指定し、
     　 背景はヘッダ（暗い）を継ぐものと決めてかかっていた。
     　 実測すると Cocoon 既定の rgb(250,251,252) ＝ ほぼ白のままで、
     　 文字 rgb(232,230,223) との対比は約1.05:1。**白の上に白だった。**
     　 → 背景を明示する。色はヘッダ帯の実測値 rgb(44,44,42) に合わせ、
     　   帯の続きに見えるようにする。文字との対比は約11:1。
     ★白い本文の上に浮くので、枠線と影で「板」であることを示す。 */
  background:#2c2c2a;
  border:1px solid #46453f;
  border-radius:0 0 4px 4px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  overflow:hidden;                 /* 角丸から項目の背景がはみ出さないように */
}
#navi .navi-in > ul > li > ul.sub-menu li{
  background:transparent;          /* Cocoon 側の白い指定を消す */
}
#navi .navi-in > ul > li > ul.sub-menu li + li{
  border-top:1px solid #46453f;    /* 区切り。項目が続きものに見えないように */
}
#navi .navi-in > ul > li > ul.sub-menu a{
  background:transparent;
  color:#e8e6df;                   /* 親（白）より少し落とすが、読める明るさに */
}
#navi .navi-in > ul > li > ul.sub-menu a:hover{
  background:#3d3c38;              /* ★どれを指しているか分かること */
  color:#fff;
}


/* ══════════════════════════════════════════════════════════════
   コメント欄（2026-09-05 Owner「コメントが表示された時のデザインも整えて」）
   ──────────────────────────────────────────────────────────────
   ★直す前の状態（実測）:
     ・アバターが右端に浮いて、名前と離れていた
     ・「より:」という直訳が残っていた
     ・日付が青リンク＋下線で、本文より目立っていた
     ・1件ごとの区切りが無く、どこまでが1件か分からなかった
     ・返信が入れ子に見えず、親子関係が読めなかった
   ★狙いは装飾ではなく「誰が・いつ・何を書いたか」が一目で分かること。

   ★Cocoon の一覧は `ol.commets-list`（**綴りが commets**）。
     直したくなるが、これは親テーマ側の名前なので**このまま書く。**
   ══════════════════════════════════════════════════════════════ */

.comment-area{ margin-top:2.4em; }

.comment-title,
.comment-reply-title{
  font-size:1.15em;
  font-weight:700;
  margin:0 0 .9em;
  padding:0 0 .45em;
  border-bottom:2px solid #2c2c2a;   /* ヘッダ帯と同じ色。サイトの他の見出しと揃える */
}

.commets-list{
  list-style:none;
  margin:0;
  padding:0;
}
.commets-list li.comment{
  list-style:none;
  margin:0 0 .8em;
  padding:0;
}

/* 1件＝1枚。区切りが無いと、どこまでが1人の発言か分からない */
.commets-list .comment-body{
  position:relative;
  background:#fff;
  border:1px solid #e3e1db;
  border-radius:6px;
  padding:.85em 1em .7em;
}

/* ── 名前 ───────────────────────────────────── */
.commets-list .comment-author{
  display:flex;
  align-items:baseline;
  gap:.6em;
  margin:0 0 .15em;
}
.commets-list .comment-author cite.fn{
  font-style:normal;
  font-weight:700;
  font-size:.98em;
  color:#2c2c2a;
}
.commets-list .comment-author cite.fn a{
  color:inherit;
  text-decoration:none;
}
/* ★「より:」は直訳。名前の後に付いても情報が増えない */
.commets-list .comment-author .says{ display:none; }
/* ★アバターは設定で切ってあるが、戻したときに崩れないようにしておく */
.commets-list .comment-author img.avatar{
  width:28px; height:28px;
  border-radius:50%;
  margin:0;
}

/* ── 日付。補助情報なのでリンクに見せない ──────── */
.commets-list .comment-meta{
  margin:0 0 .5em;
  font-size:.8em;
}
.commets-list .comment-meta a{
  color:#8a877e;
  text-decoration:none;
}
.commets-list .comment-meta a:hover{ text-decoration:underline; }

/* ── 本文 ───────────────────────────────────── */
.commets-list .comment-content{
  font-size:.95em;
  line-height:1.75;
  /* ★URLや長い連続文字で枠を突き破らせない */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.commets-list .comment-content p{ margin:0 0 .6em; }
.commets-list .comment-content p:last-child{ margin-bottom:0; }

/* ── 返信ボタン。押せると分かる程度に留める ────── */
.commets-list .reply{
  margin-top:.5em;
  text-align:right;
}
.commets-list .comment-reply-link{
  display:inline-block;
  padding:.2em .8em;
  font-size:.8em;
  color:#5a5750;
  text-decoration:none;
  border:1px solid #d8d5cd;
  border-radius:999px;
  background:#fafaf8;
}
.commets-list .comment-reply-link:hover{
  background:#2c2c2a;
  border-color:#2c2c2a;
  color:#fff;
}

/* ── 返信の入れ子。線と字下げで親子を見せる ────── */
.commets-list .children{
  list-style:none;
  margin:.8em 0 0;
  padding:0 0 0 1.1em;
  border-left:3px solid #e3e1db;
}
.commets-list .children li.comment:last-child{ margin-bottom:0; }

/* ── 管理人の書き込みを見分ける ─────────────────
   ★class は `comment-by-admin` に差し替えてある（ログイン名を出さないため）。
     `bypostauthor` は WordPress 本体が付けるもの。 */
.commets-list .bypostauthor > .comment-body,
.commets-list .comment-by-admin > .comment-body{
  background:#f7f6f2;
  border-color:#d6d2c7;
}
.commets-list .bypostauthor > .comment-body cite.fn::after,
.commets-list .comment-by-admin > .comment-body cite.fn::after{
  content:"管理人";
  margin-left:.5em;
  padding:.1em .5em;
  font-size:.72em;
  font-weight:700;
  vertical-align:.1em;
  color:#fff;
  background:#2c2c2a;
  border-radius:3px;
}

/* ── 承認待ちの知らせ ──────────────────────────
   ★読者が「送れたのか分からない」状態にしない */
.commets-list .comment-awaiting-moderation{
  display:block;
  margin:.4em 0 0;
  padding:.35em .7em;
  font-size:.82em;
  color:#7a5c00;
  background:#fff8e5;
  border:1px solid #f0e0b0;
  border-radius:4px;
}

/* ── 書き込みフォーム ─────────────────────────── */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  max-width:100%;
  border:1px solid #d8d5cd;
  border-radius:4px;
  padding:.5em .6em;
}
.comment-form textarea{ width:100%; }
.comment-form .form-submit input[type="submit"]{
  padding:.55em 1.6em;
  font-size:.95em;
  color:#fff;
  background:#2c2c2a;
  border:0;
  border-radius:4px;
  cursor:pointer;
}
.comment-form .form-submit input[type="submit"]:hover{ background:#46453f; }

/* ★ハニーポットは人に見せない。`display:none` を読み飛ばす機械がいるので画面の外へ置く
   （仕込み側の意図は functions.php 側に書いてある） */
.ym-hp{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}


/* ══════════════════════════════════════════════════════════════
   前後の話ナビ ＆ 関連記事（2026-09-04 作り直し）
   ★狙いは装飾ではなく「見分けられること」。
     ラベルで前後を言い、題名は共通の作品名を落として差分だけ出す。
   ══════════════════════════════════════════════════════════════ */

.ym-nav{
  display:flex;
  gap:10px;
  margin:1.6em 0;
  white-space:normal;
}
.ym-nav > *{ flex:1 1 0%; min-width:0; }
.ym-nav .is-none{ visibility:hidden; }   /* 片方が無くても位置をずらさない */

.ym-nav-prev,
.ym-nav-next{
  display:block;
  padding:.7em .9em;
  border:1px solid #e6e4dd;
  border-radius:4px;
  background:#fbfaf7;
  text-decoration:none;
  color:#2c2c2a;
}
.ym-nav-prev:hover,
.ym-nav-next:hover{ background:#f4f2ea; }
.ym-nav-next{ text-align:right; }

.ym-nav-lbl{
  display:block;
  font-size:.76rem;
  color:#8a887f;
  margin-bottom:.25em;
}
.ym-nav-prev .ym-nav-lbl::before{ content:"← "; }
.ym-nav-next .ym-nav-lbl::after{  content:" →"; }

.ym-nav-t{
  display:block;
  font-size:.95rem;
  line-height:1.45;
  word-break:break-all;
}

.ym-nx{
  margin:1.8em 0;
  white-space:normal;
}
.ym-nx-h{
  margin:0 0 .5em;
  padding:0;
  border:0;
  background:none;
  font-size:1.05rem;
  font-weight:700;
  color:#2c2c2a;
}
.ym-nx-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #e6e4dd;
}
.ym-nx-list > li{ margin:0; }
.ym-nx-list > li > a{
  display:flex;
  align-items:baseline;
  gap:.8em;
  padding:.55em .2em;
  border-bottom:1px solid #e6e4dd;
  text-decoration:none;
}
.ym-nx-list > li > a:hover{ background:#f7f5ef; }
.ym-nx-t{
  flex:1 1 auto;
  min-width:0;
  word-break:break-all;
  line-height:1.5;
}
.ym-nx-d{
  flex:0 0 auto;
  font-size:.78rem;
  color:#8a887f;
  font-variant-numeric:tabular-nums;
}
.ym-nx-more{
  margin:.7em 0 0;
  font-size:.86rem;
}
.ym-nx-more a{ text-decoration:none; word-break:break-all; }
.ym-nx-more a:hover{ text-decoration:underline; }

@media (max-width:480px){
  .ym-nav{ flex-direction:column; }
  .ym-nav .is-none{ display:none; }
}

.ym-nx-sep{
  padding:.5em .2em .35em;
  border-bottom:1px solid #e6e4dd;
  font-size:.76rem;
  color:#8a887f;
  background:#f7f5ef;
}


/* ══════════════════════════════════════════════════════════════
   カテゴリ一覧（2026-09-04 作り直し）
   ★作品ページ＝話数だけ／作者ページ＝作品の一覧＋札つきの記事
   ★AA用の nowrap をここまで効かせない
   ══════════════════════════════════════════════════════════════ */

.ym-al{ white-space:normal; }

.ym-al-sum{
  margin:0 0 .8em;
  font-size:.86rem;
  color:#8a887f;
}
.ym-al-sum b{ color:#2c2c2a; font-size:1.15em; }
.ym-al-page{ margin-left:1em; font-size:.95em; }
.ym-al-note{ margin-left:.6em; font-size:.92em; }

.ym-al-works{
  list-style:none;
  margin:0 0 1.4em;
  padding:0;
  border-top:1px solid #e6e4dd;
}
.ym-al-works > li{
  display:flex;
  align-items:baseline;
  gap:.8em;
  margin:0;
  padding:.5em .2em;
  border-bottom:1px solid #e6e4dd;
}
.ym-al-works > li > a{
  flex:1 1 auto; min-width:0;
  text-decoration:none; word-break:break-all;
}
.ym-al-works .ym-count{
  flex:0 0 auto; font-size:.78rem; color:#8a887f;
  font-variant-numeric:tabular-nums;
}

.ym-al-h{
  margin:0 0 .4em;
  padding:0;
  border:0;
  background:none;
  font-size:1.02rem;
  font-weight:700;
  color:#2c2c2a;
}

.ym-al-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #e6e4dd;
}
.ym-al-list > li{ margin:0; }
.ym-al-list > li > a{
  display:flex;
  align-items:baseline;
  gap:.7em;
  padding:.5em .2em;
  border-bottom:1px solid #e6e4dd;
  text-decoration:none;
}
.ym-al-list > li > a:hover{ background:#f7f5ef; }
.ym-al-t{
  flex:0 1 auto; min-width:0;
  line-height:1.5; word-break:break-all;
}
/* ★札は題名のすぐ隣に置く。右端へ飛ばすと題名が孤立して読みにくい */
.ym-al-w{
  flex:0 1 auto; min-width:0;
  max-width:46%;
  font-size:.76rem;
  color:#6f6d66;
  background:#f0eee6;
  border-radius:3px;
  padding:.1em .5em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ym-al-d{
  flex:0 0 auto;
  margin-left:auto;          /* 札の有無にかかわらず日付は右端 */
  font-size:.78rem;
  color:#8a887f;
  font-variant-numeric:tabular-nums;
}

@media (max-width:600px){
  .ym-al-w{ display:none; }   /* 狭い画面では札より題名を優先する */
}