/*
Theme Name: ステレオリンチの本棚
Description: Instagramアカウント「ステレオリンチの本棚」の書籍紹介サイト用カスタムテーマ。旧Netlify版SPAのデザイン（紙の質感・図書館カード風UI）を再現。
Version: 1.1.0
Author: ステレオリンチの本棚
Text Domain: stereorynch
*/

:root{
  --paper:#f2ecdd;
  --card:#fbf7ec;
  --card-edge:#e8dfc7;
  --ink:#1c1810;
  --ink-soft:#3a3428;
  --yellow:#f4c430;
  --yellow-deep:#e0ab12;
  --red:#8b2e22;
  --red-deep:#6f2119;
  --muted:#625c4d;
  --line: rgba(28,24,16,0.18);
  --line-soft: rgba(28,24,16,0.10);
  --shadow: 0 6px 18px rgba(28,24,16,0.10);
  /* 紙の角。切りっぱなしの直角ではなく、触られて落ちた角。
     楕円で指定すると、隅ごとに曲がり方が変わって手のあとに見える。
     この変数はサイト中の「紙でできた枠」が共有している。 */
  --radius-card: 4px 6px 5px 7px / 6px 4px 7px 5px;
  --ok:#4a6b3d;   /* 読み終えた、返した、済んだ */
  --gothic: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Meiryo", sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Courier New", monospace;
}
*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* iOSのSafariは、指定が無いと本文の文字だけを独自に拡大する（テキスト自動調整）。
     拡大された結果、1行に入る文字数が減り、右端に使われない余白が残る。
     PCや検証用ブラウザでは起きないため、実機を見ないと気づけない。
     100% にすると、こちらが決めた大きさがそのまま使われる。
     利用者がブラウザで拡大する操作は妨げない（none ではなく 100% にする理由）。 */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* 管理画面「見た目の調整」から差し替わる値。
   設定されていなければ、右側の既定値がそのまま使われる。 */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mincho);
  font-size:var(--srb-text, 16px);
  line-height:var(--srb-line, 1.85);
  /* -webkit-font-smoothing:antialiased は付けない。
     iOS・macOSでは既定より線が細く描かれる。明朝は横線がもともと細いので、
     スマホの本文が「かすれて見える」原因になっていた（2026-08-19に指摘を受けて外した）。 */
  /* 日本語を文節の切れ目で折り返す（「ここではあ／そこでは」のような
     不自然な改行を防ぐ）。未対応のブラウザでは従来どおりの折り返し。 */
  word-break:auto-phrase;
  /* 最終行が1文字だけ残るのを避ける */
  text-wrap:pretty;
  padding-bottom:72px;
}
::selection{background:var(--yellow);color:var(--ink);}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(242,236,221,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none;}
/* ロゴを縦2行から横1行に変えたぶん、同じ高さでも幅を大きく取るようになった。
   固定の高さだと、画面が狭いときにメニューを押し出してSNSのアイコンに
   重なる（860pxで139pxも重なっていた）。画面幅に応じて縮むようにする。 */
.brand-logo{height:28px;width:auto;flex:none;display:block;}
@media (min-width:860px){
  .brand-logo{height:clamp(16px,2.05vw,30px);}
}
/* SRくんの顔。PCではこちらだけを出す。
   横長ロゴは170px前後あってメニューを押し縮めていた（項目の間が15pxまで
   詰まっていた）。TOPには大きなロゴが出ているので、ここは顔だけで足りる。
   TOPへ戻る道は残す必要があるので、消すのではなく差し替える（2026-08-29）。 */
.brand-mark{display:none;height:34px;width:34px;flex:none;border-radius:50%;transition:transform .15s ease;}
/* TOP以外の「トップ」。メニューの他の項目と同じ見た目にして、
   押せば戻れることが読んで分かるようにする（2026-08-29）。 */
.brand-home{
  display:none;font-family:var(--gothic);font-weight:700;white-space:nowrap;
  color:var(--ink);border-bottom:2px solid transparent;padding:6px 2px;
}
.brand:hover .brand-home{border-bottom-color:var(--red);}
@media (min-width:860px){
  .brand-logo{display:none;}
  .brand-mark{display:block;}
  .brand-home{display:inline-block;font-size:clamp(12.5px,1.08vw,13.5px);}
}
.brand:hover .brand-mark{transform:translateY(-1px);}
/* 900px未満は、いちばん詰まる。印と字送りとアイコンを少しずつ縮めて間を作る。 */
@media (min-width:860px) and (max-width:899px){
  .brand-mark{height:30px;width:30px;}
  .icon-btn{width:30px;height:30px;}
  .header-actions{gap:5px;}
  .header-inner{padding-left:14px;padding-right:14px;}
  .desk-nav{margin-left:10px;gap:2px 13px;font-size:12px;margin-right:12px;}
}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;flex:none;
}
/* PC版のナビ。見出しは5つだけ並べ、その下は開いて選ぶ。
   項目を全部並べると13個で1行に収まらなくなったため。 */
.desk-nav{
  display:none;gap:2px 22px;font-family:var(--gothic);font-size:12.5px;font-weight:700;
  align-items:center;justify-content:flex-end;min-width:0;flex:1;
}
.desk-nav-item{
  padding:6px 2px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;
  background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.desk-nav-item.active, .desk-nav-item:hover{border-bottom-color:var(--red);}
.desk-nav-group{position:relative;}
.desk-nav-caret{
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.5;transition:transform .15s ease;
}
.desk-nav-group.open .desk-nav-caret{transform:rotate(180deg);}
/* 開いた中身。説明を一行添えて、どこへ行くのかを読ませる */
.desk-nav-panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:0 10px 30px rgba(28,24,16,.13);padding:8px;min-width:238px;
  display:flex;flex-direction:column;gap:1px;
}
.desk-nav-panel[hidden]{display:none;}
/* マウスが見出しと中身のあいだを通るときに閉じないよう、隙間を橋渡しする。
   橋は「中身の幅」に合わせる。見出しの幅（54px）に合わせていたころは、
   中身（238px）が左右に90pxずつはみ出していて、そこへ斜めに向かうと
   橋の外を通ることになり、途中で止まると閉じた。押せない、と報告があった。 */
.desk-nav-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px;}
.desk-nav-group::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;}
.desk-nav-sub{
  display:block;padding:9px 12px;border-radius:6px;text-decoration:none;color:var(--ink);
  border:0;white-space:normal;
}
.desk-nav-sub:hover{background:var(--paper);}
.desk-nav-sub.active{background:var(--ink);color:var(--paper);}
.desk-nav-sub-label{display:block;font-size:12.5px;font-weight:700;line-height:1.4;}
.desk-nav-sub-desc{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.5;}
.desk-nav-sub.active .desk-nav-sub-desc{color:rgba(242,236,221,.72);}
.nav-badge{font-family:var(--mono);font-size:10px;color:var(--red);margin-left:2px;}
.tab-bar .nav-badge{font-size:9px;margin-left:1px;}

@media (min-width:860px){
  .header-inner{padding:14px 40px;max-width:1080px;}
  /* 見出しはロゴから間を空けて左から並べる。
     項目が13個あった頃はロゴにぴったり付けて詰めていたが、
     6個になったいまは右に350pxほど余ったままロゴに密着していた。 */
  .desk-nav{
    display:flex;justify-content:flex-start;
    margin-left:clamp(18px,2.6vw,52px);
    /* ロゴを顔だけにして130pxほど空いたぶん、項目の間をひろげる。
       いままでは狭いところで15pxまで詰まっていた（2026-08-29）。 */
    gap:4px clamp(20px,2.6vw,36px);
    font-size:clamp(12.5px,1.08vw,13.5px);
    /* 右のアイコンと隙間なく接していて、「お問い合わせ」が
       重なって読めなくなっていた。間を空ける（2026-08-27）。 */
    margin-right:clamp(16px,2vw,28px);
    min-width:0;
  }
  /* ロゴはヘッダーに残す。PCにはこれ以外にTOPへ戻る道が無いため。
     一度これを消したところ、本のページから帰れなくなった（2026-08-27）。
     スマホは下のタブに「ホーム」があるので、そちらは無くても戻れる。 */
  .brand{display:flex;}
}

/* ---------- Bottom tab bar (mobile) ---------- */
.tab-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;background:var(--ink);
  box-shadow:0 -4px 14px rgba(0,0,0,.18);
}
.tab-bar a, .tab-bar button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px 10px;color:#cfc7ae;text-decoration:none;
  font-family:var(--gothic);font-size:10px;font-weight:700;letter-spacing:.02em;
  background:none;border:none;cursor:pointer;
}
.tab-bar a.active, .tab-bar button.active{color:var(--yellow);}
.tab-bar svg{width:20px;height:20px;}
@media (min-width:860px){ .tab-bar{display:none;} body{padding-bottom:0;} }

/* ---------- Mobile menu sheet ---------- */
.menu-sheet{position:fixed;inset:0;z-index:80;display:none;}
.menu-sheet.open{display:block;}
.menu-sheet-backdrop{position:absolute;inset:0;background:rgba(28,24,16,.45);}
.menu-sheet-panel{
  position:absolute;left:0;right:0;bottom:0;background:var(--paper);
  border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 24px rgba(0,0,0,.2);
  max-height:74vh;overflow-y:auto;
  animation:menuSheetUp .2s ease;
}
@keyframes menuSheetUp{from{transform:translateY(14px);opacity:.5;}to{transform:translateY(0);opacity:1;}}
@media (prefers-reduced-motion: reduce){ .menu-sheet-panel{animation:none;} }
.menu-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.menu-sheet-close{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  font-size:14px;color:var(--ink);flex:none;
}
.menu-sheet-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 4px;font-family:var(--gothic);font-weight:700;font-size:14.5px;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-soft);
}
.menu-sheet-link:hover, .menu-sheet-link.active{color:var(--red);}
.menu-sheet-panel > .menu-sheet-link:last-child{border-bottom:none;}
/* 役割ごとの区画。見出しを小さく置いて、どこに何があるか一目で分かるようにする。 */
.menu-sheet-group{margin-bottom:14px;}
.menu-sheet-group:last-child{margin-bottom:0;}
.menu-sheet-group .menu-sheet-link:last-child{border-bottom:none;}
.menu-sheet-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  padding:2px 4px 4px;border-bottom:1.5px solid var(--ink);margin-bottom:2px;
}
@media (min-width:860px){ .menu-sheet{display:none !important;} }

/* ---------- Layout helpers ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px;}
@media (min-width:860px){ .wrap{padding:0 40px;} }

/* 区画のラベル。もとは英語（About this shelf など）を入れていたが、
   どれも真下の日本語見出しを訳しただけで、情報をひとつも足していなかった。
   2026-08-23に日本語だけにした。種別を言えるところにしか置かない。
   等幅・大文字は英語のための指定だったので外す。 */
.eyebrow{
  font-family:var(--gothic);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--red);
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--red);}

h1,h2,h3{font-family:var(--gothic);margin:0 0 .5em;font-weight:900;letter-spacing:.01em;text-wrap:balance;}
.section-title{font-size:22px;word-break:auto-phrase;overflow-wrap:break-word;}
.section-title .seg2, .hub-card h3 .seg2{display:inline-block;}
/* chは「0」の字幅（約0.5em）基準で、日本語だと64ch＝約32文字しか入らない。
   本文の幅は切らず、コンテンツ列（.wrap＝最大1080px）いっぱいまで使う。 */
.lead{color:var(--ink-soft);font-size:15px;max-width:none;word-break:auto-phrase;}
.prose p, .prose li, .editor-note-text p, .bgm-reason p, .comment-item .txt{word-break:auto-phrase;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:28px 0 36px;}
.hero-inner{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;}
@media (min-width:760px){ .hero-inner{grid-template-columns:1.1fr 0.9fr;gap:10px;} }
/* スマホは従来どおり右上へ逃がす（枠内に収めると本文の上に重なって読みにくい）。
   PCは枠内に完全に収める。はみ出させると overflow:hidden で縦にすっぱり切れ、
   その右側に余白が残るため「途中で切れた」ように見えてしまうため。 */
.hero-yellow{
  position:absolute;right:-70px;top:-56px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--yellow) 0%, var(--yellow-deep) 72%);
  z-index:0;opacity:.9;
}
@media (min-width:760px){
  .hero-yellow{right:0;top:14px;width:340px;height:340px;}
}
.hero-copy{position:relative;z-index:2;}
/* ヒーローのロゴ。ヘッダーにロゴがあるスマホでは出さない。 */
.hero-logo{display:none;}
@media (min-width:860px){
  .hero-logo{display:block;width:min(340px,72%);height:auto;margin:0 0 14px;}
}
.hero h1{font-size:clamp(26px,5vw,40px);line-height:1.35;word-break:auto-phrase;overflow-wrap:break-word;}
.hero h1 .seg{display:inline-block;}
.hero .lead{margin-bottom:22px;font-size:15.5px;}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;}
.btn{
  font-family:var(--gothic);font-weight:700;font-size:13.5px;
  padding:13px 20px;border-radius:2px;border:1.5px solid var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--paper);transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px);}
/* 押している間だけ沈める。スマホは hover が無いので、
   これが無いと「押せたのか」がまったく返らない。 */
.btn:active{transform:translateY(0) scale(.985);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.brand{background:var(--red);border-color:var(--red);color:#fbf3e6;}
.hero-mascot{position:relative;z-index:2;display:none;justify-content:center;}
.hero-mascot img{filter:drop-shadow(0 10px 14px rgba(28,24,16,.18));}
@media (min-width:760px){
  .hero-mascot{display:flex;}
  .hero-mascot img{width:min(360px,88%);}
}
/* スマホでは、ボタンの右に空くところへ小さく立たせる。
   絶対配置にしてレイアウトの高さに影響しないようにしている。 */
@media (max-width:759px){
  .hero-mascot{
    display:block;position:absolute;right:0;bottom:26px;width:82px;
    pointer-events:none;z-index:1;
  }
  .hero-mascot img{width:100%;height:auto;}
  .cta-row{padding-right:92px;}
  /* 本文の最終行にかからないよう、文章側の右を少しだけ空ける */
  .hero .lead{padding-right:0;}
}

/* ---------- Instagram feed grid ---------- */
.ig-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:2px;}
@media (min-width:620px){ .ig-feed-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;} }
@media (min-width:900px){ .ig-feed-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;} }
.ig-feed-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--card-edge);}
.ig-feed-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.ig-feed-item:hover img{transform:scale(1.05);}
.ig-feed-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(28,24,16,0);color:#fbf3e6;opacity:0;transition:opacity .2s ease,background .2s ease;
}
.ig-feed-item:hover .ig-feed-overlay{opacity:1;background:rgba(28,24,16,.38);}
.ig-feed-note{font-size:11.5px;color:var(--muted);margin-top:12px;}

/* ---------- Shelf strip (decorative marquee) ---------- */
/* 左右の端をぼかして、棚が続いている感じにする（唐突に切れて見えるのを防ぐ） */
.shelf-strip{
  overflow:hidden;padding:22px 0;border-top:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
@media (min-width:860px){
  .shelf-strip{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  }
}
.shelf-strip-track{display:flex;gap:14px;width:max-content;animation:shelfScroll 46s linear infinite;}
.shelf-strip:hover .shelf-strip-track,
.shelf-strip:focus-within .shelf-strip-track{animation-play-state:paused;}
.shelf-strip-item{flex:0 0 auto;width:84px;text-decoration:none;display:block;transition:transform .15s ease;}
.shelf-strip-item:hover{transform:translateY(-3px);}
.shelf-strip-item .cover{aspect-ratio:3/4.2;margin:0;}
@media (min-width:620px){ .shelf-strip-item{width:96px;} }
@keyframes shelfScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .shelf-strip-track{animation:none;} }

/* ---------- Section ---------- */
.section{
  /* 「行間と余白」の設定で、節どうしの間隔が伸び縮みする */
  padding:calc(34px * var(--srb-gap, 1)) 0;border-top:1px solid var(--line-soft);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
/* 「すべて見る」の類。もとは12pxの細い文字リンクで、見出しの横に埋もれていた。
   ここは次の場所へ進む唯一の入口なので、押せる形にして大きくする（2026-08-23）。
   紙のサイトなので、塗りつぶしではなく縁取り。矢印だけ赤くして進む向きを示す。 */
.see-all{
  font-family:var(--gothic);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;
  background:var(--card);
  border:1.4px solid var(--ink);
  border-radius:var(--radius-card);
  box-shadow:0 2px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.see-all::after{content:"→";color:var(--red);font-family:var(--mono);font-size:14px;}
.see-all:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--ink);}
.see-all:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink);}
@media (prefers-reduced-motion:reduce){ .see-all{transition:none;} .see-all:hover{transform:none;} }

/* 一覧の下に置くとき。右へ寄せ、ひとまわり大きくする。 */
.section-foot{display:flex;justify-content:flex-end;margin-top:18px;}
.see-all-strong{
  font-size:15px;padding:13px 22px;
  background:var(--yellow);border-color:var(--ink);
  box-shadow:0 3px 0 var(--ink);
}
.see-all-strong::after{color:var(--ink);}
.see-all-strong:hover{background:var(--yellow-deep);box-shadow:0 4px 0 var(--ink);}
/* スマホでも右下のまま。画面幅いっぱいに伸ばすと、区画ごとにボタンの形が
   変わって見えるため（2026-08-24、位置を全ページでそろえた）。 */
/* 節の見出しの下に置く一文。トップで同じ余白指定を各所に直書きしていたのをまとめた。 */
.section-lead{margin-bottom:14px;}

/* ---------- Hub grid (site guide links) ---------- */
/* 2枚を横に並べると1枚あたりが小さくなるので、縦に積んで1枚ずつ大きく見せる */
.hub-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.hub-card{
  position:relative;background:var(--card);border:1px solid var(--card-edge);
  border-left:4px solid var(--yellow);
  border-radius:var(--radius-card);box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);display:block;
  padding:20px 18px;transition:transform .15s ease, box-shadow .15s ease;
}
.hub-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,24,16,.14);}
.hub-card .hub-eyebrow{
  font-family:var(--mono);font-size:10px;color:var(--red);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.hub-card .hub-eyebrow::before{content:"";width:16px;height:1px;background:var(--red);}
.hub-card h3{font-size:19px;margin:0 0 8px;line-height:1.4;}
.hub-card p{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.85;max-width:none;}
.hub-card .hub-arrow{
  font-family:var(--gothic);font-weight:700;font-size:13px;color:var(--red);
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;min-height:44px;
}
@media (min-width:700px){
  .hub-grid{gap:18px;}
  .hub-card{padding:28px 30px;border-left-width:5px;}
  .hub-card h3{font-size:22px;margin:0 0 10px;}
  .hub-card p{font-size:15px;}
  .hub-card .hub-arrow{font-size:13.5px;margin-top:16px;}
}
/* PCでは見出しと本文を左右に分ける。
   1段のままだと本文の読みやすさ用の幅制限で右側が大きく空いてしまうため。 */
@media (min-width:860px){
  .hub-card{
    display:grid;grid-template-columns:minmax(200px,30%) 1fr;
    column-gap:36px;align-items:start;
  }
  .hub-card .hub-eyebrow{grid-column:1;grid-row:1;}
  .hub-card h3{grid-column:1;grid-row:2;}
  .hub-card .hub-arrow{grid-column:1;grid-row:3;margin-top:14px;}
  .hub-card p{grid-column:2;grid-row:1 / span 3;max-width:none;margin:0;}
}

/* ---------- Library card (signature component) ---------- */
.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (min-width:620px){ .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:900px){ .shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;} }

/* 折り返さず横1列に並べる（トップの「最新の紹介本」）。
   はみ出したぶんはこの行の中だけで横に送る。 */
.shelf-row{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;align-items:stretch;scrollbar-width:thin;
  /* overflow-x:auto を指定すると overflow-y も auto になり、この行は切り取り枠になる。
     カードが浮いたぶんが上で切れるので、描く余地だけ作って同じ分を引き上げ、
     見た目の位置は変えない。 */
  margin-top:-10px;padding-top:10px;
}
.shelf-row > *{flex:0 0 158px;width:158px;min-width:0;}
@media (min-width:620px){ .shelf-row > *{flex-basis:180px;width:180px;} }
@media (min-width:900px){ .shelf-row{gap:18px;} .shelf-row > *{flex-basis:200px;width:200px;} }

/* この一枚がサイトの看板。特集・コラム・グッズ・問いのカードは
   どれもマウスを乗せると浮くのに、ここだけ反応が無かった（2026-08-22）。
   浮き方はほかのカードに合わせ、押したときは沈めて指の操作にも返す。 */
.card{
  position:relative;background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--radius-card);box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);display:block;
  padding:14px 12px 12px;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* カードは <article>。リンクは書名に付いている（リンクの中にボタンを
   置けないため）。押せる面はカード全体のままにしたいので、書名のリンクを
   透明な板として敷く。マイ本棚のボタンなどは、その上に重ねる。 */
.card h3 .card-link{color:inherit;text-decoration:none;}
.card h3 .card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;}
.card .bm-ribbon, .card .bm-tip, .card .stamp, .card > .card-code{z-index:2;}
.card h3 .card-link:focus-visible{outline:none;}
.card:focus-within{box-shadow:0 0 0 2px var(--red), var(--shadow);}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,24,16,.14);}
.card:active{transform:translateY(0);box-shadow:0 3px 9px rgba(28,24,16,.12);}
/* 図書館の貸出カードの意匠。
   綴じ穴を上下2つにして、間を細い線でつなぐ。カードポケットに綴じてある見え方。
   請求記号は右の隅に小さく置くのではなく、左上に枠で囲んで、
   背ラベルのように立てる。図書館で本を探すときに最初に見る場所。 */
.card::before,
.card::after{
  content:"";position:absolute;left:11px;width:7px;height:7px;
  border-radius:50%;background:var(--paper);
  box-shadow:inset 0 1px 1.5px rgba(28,24,16,.22);
}
.card::before{top:11px;}
.card::after{top:26px;}

.card-code{
  font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:right;
  letter-spacing:.03em;margin-bottom:6px;
}
/* 請求記号は、図書館の本の背に貼ってあるラベル。
   紙色の地に薄い文字だと、ただ印刷された記号にしか見えない。
   実物と同じ黄色い地に黒文字にすると、一目で図書館の本と分かる。 */
.card > .card-code{
  position:absolute;top:9px;left:26px;
  text-align:left;margin:0;padding:3px 7px 2px;
  font-size:9px;line-height:1.4;letter-spacing:.07em;font-weight:700;
  color:var(--ink);
  background:var(--yellow);
  border:1px solid rgba(28,24,16,.22);border-radius:1px;
  box-shadow:0 1px 2px rgba(28,24,16,.14);
  max-width:calc(100% - 44px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card > .card-code.has-stamp{max-width:calc(100% - 44px);}
/* 請求記号のぶん、中身を下げる。
   請求記号を持たないカード（著者など）は、下げると上が間延びするので戻す。 */
/* 上の余白は、綴じ穴と朱印のぶん。
   請求記号を外したので、必要な高さだけに戻す。 */
.card{padding-top:22px;}
.card:has(> .stamp){padding-top:40px;}
/* 「Instagramでは未紹介」は請求記号（778-スタ-01）よりずっと長い。
   請求記号ぶんの余白22pxでは足りず、ラベルの下7pxが書影に重なっていた。
   文字も右端で切れかけていたので、幅も少し広げる（2026-08-27）。 */
.card.unintroduced{padding-top:38px;}
.card.unintroduced > .card-code{max-width:calc(100% - 32px);}
.author-card{padding-top:16px;}
.author-card::after{display:none;}   /* 貸出カードの綴じ穴は、本のカードだけに */
.cover{
  aspect-ratio:3/4.2;border-radius:2px;display:flex;align-items:flex-end;
  padding:10px;margin-bottom:10px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.cover::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:5px 5px;mix-blend-mode:soft-light;opacity:.5;
}
.cover.photo{background-size:cover;background-position:center top;background-color:#eee6d3;}
.cover.photo::after{display:none;}
/* 書影がない本の代替表示。地色は本ごとに変わり、明るい色だと白文字が 3.1:1 まで落ちる。
   影は見た目を助けるだけで比の数字は上がらないので、文字の下端に暗い幕を敷いて
   地色によらず読める状態にする。 */
.cover:not(.photo)::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:0;
  background:linear-gradient(to top, rgba(20,16,10,.72), rgba(20,16,10,.42) 45%, transparent);
  pointer-events:none;
}
.cover-title{font-family:var(--gothic);font-weight:900;font-size:13px;color:#fff;line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  position:relative;z-index:1;word-break:auto-phrase;overflow-wrap:break-word;}
.card h3{font-size:13.5px;margin:0 0 2px;line-height:1.4;word-break:auto-phrase;overflow-wrap:break-word;}
.card .author{font-family:var(--gothic);font-size:11px;color:var(--muted);margin-bottom:6px;}
/* ひとことコピーはフェアのPOP（黄色い札）と同じ見た目に揃える */
/* 蛍光ペンで引いた線。
   これまでは黄色いベタ塗りに影を落としていて、貼った付箋に見えていた。
   ペンは紙に色を置くだけなので、影は落ちず、下の紙が透ける。
   2行になれば線も2本になる（display:inline にすると行ごとに引かれる）。 */
.card .hook{
  display:inline;
  color:var(--ink);
  /* 行間は詰める。手で線を引くとき、2本目は1本目のすぐ下に来る。
     広く空けると、印刷された2行に見える。
     行が詰まるぶん、線の上下の余りも減らして、太さを保つ。 */
  font-family:var(--gothic);font-weight:700;font-size:10.5px;line-height:1.55;
  padding:1px 3px;
  background-image:linear-gradient(
    transparent 9%,
    rgba(244,196,48,.58) 9%,
    rgba(244,196,48,.58) 92%,
    transparent 92%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  word-break:auto-phrase;overflow-wrap:break-word;
}
/* ひとことを、書名などから離して置くための入れもの。
   行送りはこの入れものが決める。中の .hook にいくら行間を指定しても、
   ここが本文の行送り（1.85＝30px）のままだと、そちらが勝つ。 */
.card .hook-line{display:block;margin-top:9px;line-height:1.55;font-size:10.5px;}
.reax{display:flex;gap:8px;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.reax span{display:flex;align-items:center;gap:3px;}
/* 「紹介済み」は、カードに押された印。
   赤いベタ塗りの札だと、押した印ではなく貼った付箋に見える。
   枠だけの朱印にして、傾けて薄く置く。
   しおりと重なっていた（11px食い込んでいた）ので、場所も分ける。
   印は左（請求記号の下）、しおりは右上。役割が違うので、辺を分ける。 */
.stamp{
  position:absolute;top:12px;left:26px;z-index:2;
  background:none;color:var(--red);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  padding:2px 6px 1px;border:1.2px solid var(--red);border-radius:1px;
  transform:rotate(-6deg);opacity:.62;box-shadow:none;
}
/* しおりは、読者が自分で挟むもの。カードの上端から垂らす。 */
/* マイ本棚に入れるしおり。
   灰色の帯だけだと、初めて見る人には飾りにしか見えない。
   中に「＋」を入れて、押して足せるものだと分かるようにする。
   入れたあとは色が変わり、印が「✓」になる。 */
.bm-ribbon{
  /* 書影の上に垂らすと、表紙の絵を隠す。
     カードの上端（書影が始まる前の余白）に収める。 */
  position:absolute;top:0;right:14px;width:24px;height:34px;z-index:6;
  background:rgba(28,24,16,.42);cursor:pointer;border:none;padding:0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
  transition:background .15s ease,transform .15s ease;
  display:flex;align-items:flex-start;justify-content:center;
}
.bm-ribbon::before{
  content:"＋";
  font-family:var(--gothic);font-size:12px;font-weight:700;line-height:1;
  color:var(--paper);margin-top:5px;
}
.bm-ribbon:hover{transform:translateY(2px);background:rgba(28,24,16,.58);}
.bm-ribbon.on{background:var(--red);}
.bm-ribbon.on::before{content:"✓";font-size:12px;}
.bm-ribbon:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* 何のためのしおりかを、押す前に伝える。
   274枚すべてに文字を出すとうるさいので、指を置いたときだけ。 */
.bm-tip{
  position:absolute;top:38px;right:8px;z-index:7;
  background:var(--ink);color:var(--paper);
  font-family:var(--gothic);font-size:10.5px;font-weight:700;
  padding:4px 8px;border-radius:3px;white-space:nowrap;
  opacity:0;transform:translateY(-3px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.bm-ribbon:hover + .bm-tip,
.bm-ribbon:focus-visible + .bm-tip{opacity:1;transform:none;}
.bm-remove{
  /* 見た目の丸は22pxのまま、押せる範囲だけ44px角に広げる（誤って消さないため）。
     書影リンクに重ならないよう、カードの外側の角に寄せる。 */
  position:absolute;top:-6px;right:-6px;width:44px;height:44px;border:0;background:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:6;
}
.bm-remove::before{
  content:"";position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);
}
.bm-remove > *{position:relative;}
.bm-remove:hover{color:var(--red);border-color:var(--red);}

/* ---------- Ranking (home) ---------- */
/* 閲覧数／いいね数／保存数の切り替えタブ。見た目はチップに合わせる。 */
.rank-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.rank-tab{
  font-family:var(--gothic);font-size:11.5px;font-weight:700;padding:8px 14px;
  border:1.5px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink-soft);
  cursor:pointer;line-height:1;
}
.rank-tab:hover{border-color:var(--ink);}
.rank-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
/* タブごとの短い説明。数字の意味（とくに保存率）は言葉にしないと伝わらない */
.rank-note{font-family:var(--gothic);font-size:11.5px;color:var(--muted);margin:0 0 12px;line-height:1.7;}
.rank-note[hidden]{display:none;}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.rank-list[hidden]{display:none;}   /* display:flex に負けないよう、必ずこの後ろに置く */
.rank-row{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  padding:10px 14px;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.rank-row:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,24,16,.14);}
.rank-row:active{transform:translateY(0);box-shadow:0 3px 9px rgba(28,24,16,.12);}
.rank-num{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--muted);width:26px;flex:none;text-align:center;}
/* 上位3件だけ赤。.rank-row は li の唯一の子なので、li 側で数える。 */
.rank-list li:nth-child(-n+3) .rank-num{color:var(--red);}
.rank-cover{width:44px;flex:none;}
.rank-cover .cover{aspect-ratio:3/4.2;margin:0;padding:4px;}
.rank-cover .cover-title{font-size:7px;}
.rank-body{flex:1;min-width:0;}
.rank-body h3{font-size:13.5px;margin:0 0 2px;line-height:1.4;}
.rank-body .author{font-family:var(--gothic);font-size:11px;color:var(--muted);}
/* 順位の根拠になる数字。小さく添えるのではなく、本文と同じゴシックで読ませる。 */
.rank-counts{display:flex;flex-direction:column;gap:2px;text-align:right;flex:none;}
.rank-n{
  font-family:var(--gothic);font-weight:700;font-size:17px;color:var(--ink);
  line-height:1.2;white-space:nowrap;
}
.rank-unit{font-size:11px;font-weight:700;color:var(--muted);margin-left:2px;}
@media (max-width:520px){
  .rank-n{font-size:15px;}
  .rank-unit{font-size:10px;}
}

/* ---------- Search / filter bar ---------- */
.filter-bar{
  position:sticky;top:57px;z-index:20;background:var(--paper);
  padding:12px 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.filter-bar input[type="search"]{
  flex:1 1 200px;font-family:var(--mincho);font-size:14px;padding:11px 14px;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--card);color:var(--ink);
}
.chip{
  font-family:var(--gothic);font-size:11.5px;font-weight:700;padding:8px 12px;
  border:1.5px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink-soft);
  text-decoration:none;display:inline-block;
}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.sort-select{
  font-family:var(--gothic);font-size:11.5px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:20px;background:var(--card);color:var(--ink-soft);
}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.count-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 0 14px;}

/* ---------- Detail pages ---------- */
.detail-grid{display:grid;grid-template-columns:1fr;gap:26px;padding:26px 0;}
/* グリッドの子は既定でmin-width:autoなので、中の横スクロール行（同じ著者の本）の
   全幅ぶんまで列が広がり、ページ全体が横にはみ出す。0にして列の中でスクロールさせる。 */
.detail-grid > *{min-width:0;}
@media (min-width:760px){ .detail-grid{grid-template-columns:260px 1fr;} }
/* 書名。テンプレートに直書きしていた指定をここへ移した。
   書名は固有名詞なので、文節で折る auto-phrase ではなく keep-all のまま。
   それでも収まらない長い書名だけ、どこでも折って画面からはみ出させない。 */
.book-title{font-size:24px;word-break:keep-all;overflow-wrap:anywhere;}
.detail-cover{position:static;align-self:start;max-width:220px;margin:0 auto;}
.detail-cover .cover{aspect-ratio:3/4.2;margin-bottom:14px;}
@media (min-width:760px){ .detail-cover{position:sticky;top:80px;max-width:none;margin:0;} }
.meta-table{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--mono);}
.meta-table tr{border-top:1px solid var(--line-soft);}
.meta-table td{padding:7px 0;vertical-align:top;}
.meta-table td:first-child{color:var(--muted);width:38%;}
.meta-table td:last-child{word-break:auto-phrase;overflow-wrap:break-word;}
.ad-badge{
  /* 広告であることの表示。読めない大きさで出す性質のものではないので 12px を下限にする。 */
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;
  word-break:auto-phrase;overflow-wrap:break-word;
  color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 10px;margin-bottom:14px;
}
/* ---------- 問い（読み終えたあとに残るもの） ---------- */
.q-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (min-width:760px){ .q-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} }
.q-item{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  border:1.5px solid var(--ink);border-radius:3px;background:var(--card);
  padding:14px 14px 15px;text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.q-item:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(28,24,16,.14);}
.q-item-name{
  font-family:var(--mincho);font-weight:700;font-size:16px;line-height:1.4;
  word-break:auto-phrase;overflow-wrap:break-word;
}
.q-item-count{font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.q-item-desc{
  font-size:11.5px;line-height:1.75;color:var(--muted);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.q-list-lg .q-item{padding:20px 18px 22px;}
.q-list-lg .q-item-name{font-size:19px;}
.q-list-lg .q-item-desc{font-size:12.5px;-webkit-line-clamp:4;}

/* 問い別ページの見出し */
.q-hero{padding:26px 0 18px;border-bottom:1.5px solid var(--ink);margin-bottom:20px;}
.q-hero-title{
  font-family:var(--mincho);font-size:clamp(24px,5.4vw,36px);line-height:1.35;margin:2px 0 10px;
  word-break:auto-phrase;overflow-wrap:break-word;text-wrap:balance;
}
.q-hero-lead{font-size:14.5px;line-height:1.9;color:var(--ink-soft);max-width:none;margin:0 0 10px;}
.q-hero-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0;}

/* 書籍ページに出す問いの札 */
.q-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 18px;}
.q-chips-label{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em;}
.q-chip{
  font-family:var(--gothic);font-weight:700;font-size:11.5px;
  border:1.5px solid var(--ink);border-radius:20px;padding:4px 11px;
  text-decoration:none;color:var(--ink);background:var(--card);
  transition:background .15s,color .15s;
}
.q-chip:hover{background:var(--ink);color:var(--card);}

/* コラムの中で使う集計リスト */
.stat-list{list-style:none;margin:18px 0;padding:0;}
.stat-list li{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px;
}
.stat-list li strong{flex:1 1 auto;min-width:0;font-weight:700;}
.stat-pct{
  flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:2px 8px;
}

/* ---------- 本棚の音楽 ---------- */
.music-wrap{max-width:760px;margin:0 auto;}
.music-player{margin:22px 0 30px;border-radius:12px;overflow:hidden;}
.music-player iframe{display:block;border:0;}
.music-count{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 6px;}
.music-count strong{font-size:16px;color:var(--ink);}
.music-year{margin-top:26px;}
.music-year-head{
  display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:15px;
  margin:0 0 10px;padding-bottom:7px;border-bottom:1.5px solid var(--ink);
}
.music-year-head span{font-size:11px;color:var(--muted);font-weight:400;}
.music-list{list-style:none;margin:0;padding:0;}
/* 曲の一覧。ここは本ではなく音楽の場所なので、紙ではなく盤で並べる。
   ただし中央のラベルに書影をのぞかせて、どの本の回かは分かるようにする。
   特集を SRB-001 という盤番号で呼んでいるのと、地続きの見立て。 */
.music-row{
  display:flex;align-items:center;gap:16px;
  padding:13px 2px;border-bottom:1px dashed var(--card-edge);
  /* 画面が広いと、曲名と再生ボタンのあいだが空きすぎる。
     1行の中身が伸びきらないよう、行そのものに幅の上限を置く。 */
  max-width:640px;
}

/* 盤。溝は繰り返しのグラデーションで引く（画像を足さない）。 */
.music-disc{
  position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:50%;
  display:block;text-decoration:none;
  background:
    radial-gradient(circle at 50% 50%, #2a2620 0 17%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 34% 30%, #4a443a, #1a1712 62%);
  box-shadow:0 2px 6px rgba(28,24,16,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* 中央のラベルに書影 */
.music-disc-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:33%;height:33%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.music-disc-label .cover{width:100%;height:100%;margin:0;padding:0;border-radius:0;}
.music-disc-label .cover img{width:100%;height:100%;object-fit:cover;display:block;}
.music-disc-label .cover-title{font-size:4px;padding:1px;line-height:1.2;}
/* 中心の穴 */
.music-disc::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:6.5px;height:6.5px;border-radius:50%;background:var(--paper);z-index:2;
}

.music-body{flex:1 1 auto;min-width:0;}
.music-list{max-width:640px;}
.music-no{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);
  display:block;line-height:1.4;
}
.music-track{
  font-family:var(--gothic);font-weight:700;font-size:14.5px;line-height:1.5;
  margin:1px 0 2px;
}
.music-artist{
  font-size:12.5px;color:var(--ink-soft);text-decoration:none;display:block;
}
.music-artist:hover{color:var(--ink);text-decoration:underline;}
/* 曲名と本を、破線で分ける。同じ行に並んでいると、どちらが曲か分からない。 */
.music-from{
  font-size:11.5px;color:var(--muted);text-decoration:none;
  display:block;margin-top:5px;padding-top:5px;
  border-top:1px dashed var(--card-edge);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-from::before{content:"♦ ";font-size:8px;vertical-align:middle;color:var(--red);}
.music-from:hover{color:var(--ink);text-decoration:underline;}
.music-play{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;
  color:var(--ink);text-decoration:none;transition:background .15s,color .15s;
}
.music-play:hover{background:var(--ink);color:var(--card);}

@media (max-width:520px){
  .music-row{gap:10px;padding:10px 0;}
  .music-track{font-size:13px;}
}

/* ---------- 週に1冊（メール登録） ---------- */
.nl-form{
  border:1.5px solid var(--ink);border-radius:3px;background:var(--card);
  padding:26px 22px;position:relative;
}
.nl-form::before{
  content:"";position:absolute;inset:5px;border:1px solid var(--line);border-radius:2px;pointer-events:none;
}
.nl-copy{position:relative;}
.nl-title{font-family:var(--mincho);font-size:22px;line-height:1.4;margin:2px 0 8px;text-wrap:balance;}
.nl-note{font-size:13.5px;line-height:1.85;color:var(--muted);margin:0 0 18px;max-width:46ch;}
.nl-fields{display:flex;gap:8px;flex-wrap:wrap;position:relative;}
.nl-fields input[type=email]{
  flex:1 1 240px;min-width:0;font-family:var(--gothic);font-size:15px;
  padding:12px 14px;border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);
}
/* focus-visible は冒頭の共通指定（赤3px）に任せる。
   ここにあった上書きは未定義の変数を見ていて、輪郭が文字色のままだった。 */
.nl-fields .btn{flex:0 0 auto;white-space:nowrap;}
.nl-fine{font-size:11.5px;line-height:1.7;color:var(--muted);margin:12px 0 0;position:relative;}

/* 書籍ページの下に置く控えめな版 */
.nl-inline{padding:20px 18px;margin:30px 0 6px;}
.nl-inline .nl-title{font-size:18px;}
.nl-inline .nl-note{font-size:12.5px;margin-bottom:14px;}
.nl-inline .nl-fields input[type=email]{font-size:14px;padding:10px 12px;}

.nl-faq{margin-top:34px;}
.nl-faq-head{font-family:var(--mincho);font-size:17px;margin:0 0 12px;}
.nl-faq dt{font-weight:700;font-size:13.5px;margin-top:16px;}
.nl-faq dd{margin:5px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted);}

@media (max-width:520px){
  .nl-form{padding:22px 16px;}
  .nl-title{font-size:19px;}
  .nl-fields .btn{width:100%;}
}

/* 買う以外の道。広告の並びとは分けて、控えめに置く */
.library-link{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--gothic);font-size:12.5px;font-weight:700;
  color:var(--muted);text-decoration:none;
  border:1px dashed var(--line);border-radius:3px;padding:9px 12px;margin-bottom:14px;
  transition:color .15s,border-color .15s;
}
.library-link:hover{color:var(--ink);border-color:var(--ink);}
.library-link svg{flex:none;}
/* どこへ行くのかを添える（送客先が公共機関であることを見せる） */
.library-src{font-family:var(--mono);font-size:11.5px;font-weight:400;opacity:.8;}

.react-row{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap;align-items:center;}
.react-btn, .bm-btn{
  font-family:var(--gothic);font-weight:700;font-size:13px;padding:11px 16px;border-radius:2px;
  border:1.5px solid var(--ink);background:var(--card);display:flex;align-items:center;gap:7px;
}
.react-btn.active, .bm-btn.active{background:var(--red);border-color:var(--red);color:#fbf3e6;}
.react-btn .n{font-family:var(--mono);color:var(--muted);}
.react-btn.active .n{color:#f2d9d4;}

.ig-embed{
  border:1.5px dashed var(--line);border-radius:4px;padding:18px;text-align:center;
  background:var(--card);margin:16px 0 22px;
}
.ig-embed .ig-mark{font-family:var(--gothic);font-weight:900;font-size:13px;}
/* 投稿の出どころとリンクは1行にまとめる */
.ig-meta{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  margin:14px 0 0 !important;font-size:12.5px;
}
/* Instagramの投稿へ行く導線。ここが一番押してほしい場所なので、
   文字リンクではなく塗りのボタンにして、他の丸ボタンより一段強く見せる。 */
.ig-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--gothic);font-weight:700;font-size:14px;letter-spacing:.02em;
  color:var(--paper);background:var(--ink);
  text-decoration:none;border:1.5px solid var(--ink);border-radius:2px;
  padding:13px 26px;box-shadow:0 3px 0 rgba(28,24,16,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ig-link:hover{color:var(--paper);transform:translateY(-2px);box-shadow:0 5px 0 rgba(28,24,16,.18);}
.ig-link:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(28,24,16,.18);}
.ig-link svg{width:17px;height:17px;flex:none;}
.ig-date{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.ig-embed.has-photo{padding:14px;}
.ig-photo{width:100%;max-width:280px;margin:0 auto 12px;border-radius:2px;box-shadow:0 4px 12px rgba(28,24,16,.14);}
/* 写真があるときは本文を左寄せにするが、印・キャプション・ボタンは中央に置く */
.ig-embed.has-photo .ig-mark, .ig-embed.has-photo p{text-align:center;}
.ig-embed .btn{margin:0 auto;}

/* Instagramでの反響。数字を主役にして、本文と同じゴシックで読ませる。 */
.ig-stats-box{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:3px;
  padding:12px 10px 10px;margin:12px 0 0;text-align:left;
}
.ig-stats-mark{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  margin:0 0 8px;padding-left:2px;
}
.ig-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 6px;
  list-style:none;margin:0;padding:0;
}
@media (min-width:760px){ .ig-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 4px;} }
.ig-stats li{display:flex;flex-direction:column;align-items:center;line-height:1.25;min-width:0;}
.ig-stat-n{
  font-family:var(--gothic);font-size:18px;font-weight:700;color:var(--ink);
  white-space:nowrap;letter-spacing:-.01em;
}
.ig-stat-l{font-family:var(--gothic);font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;}
@media (max-width:380px){ .ig-stat-n{font-size:16px;} }

/* ---------- コメント（ひとこと感想） ---------- */
.comment-form{display:flex;flex-direction:column;gap:8px;margin:14px 0 20px;}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea{
  /* 16px未満だとiOSが入力時に画面を拡大し、以後そのページが横にはみ出したままになる。
     #shelfSearch と同じ理由で16pxにする。 */
  font-family:var(--mincho);font-size:16px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:2px;background:var(--card);color:var(--ink);resize:vertical;width:100%;
}
.comment-form .row{display:flex;gap:8px;flex-wrap:wrap;}
.comment-form .row p{flex:1;min-width:140px;margin:0;}
.comment-form .form-submit{margin:0;align-self:flex-end;}
.comment-form .form-submit input{
  font-family:var(--gothic);font-weight:700;font-size:12.5px;
  padding:9px 16px;background:var(--ink);color:var(--paper);border:none;border-radius:2px;cursor:pointer;
}
.comment-form .comment-notes, .comment-form label{font-size:12px;color:var(--muted);}
.spoiler-check{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;margin:0;}
.spoiler-check input{width:auto;}
.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.comment-item{border-left:2px solid var(--line);padding:4px 0 4px 12px;}
.comment-item .who{font-family:var(--gothic);font-weight:700;font-size:12px;}
.comment-item .txt{font-size:13.5px;color:var(--ink-soft);}
.comment-item .txt p{margin:0;}
.comment-empty{color:var(--muted);border:none;padding-left:0;font-size:13.5px;}
.comment-awaiting{font-family:var(--mono);font-size:10px;color:var(--muted);}
.spoiler-tag{font-family:var(--mono);font-size:9px;background:var(--yellow);color:var(--ink);padding:1px 6px;border-radius:8px;margin-left:6px;}
/* ネタバレのコメント。字は残したまま地色にごく近い色にして、
   なぞって選択したときだけ読めるようにする（クリックで一気に出さない）。 */
.txt.spoiler-hide{
  color:rgba(28,24,16,.07);background:rgba(28,24,16,.05);
  border-radius:3px;padding:2px 6px;cursor:text;
  text-shadow:none;-webkit-user-select:text;user-select:text;
}
.txt.spoiler-hide ::selection, .txt.spoiler-hide::selection{
  color:var(--ink);background:var(--yellow);
}
.txt.spoiler-hide ::-moz-selection, .txt.spoiler-hide::-moz-selection{
  color:var(--ink);background:var(--yellow);
}

/* 横スクロール行のカードは幅を固定する。auto幅だとタイトルの長さで
   カードごとに幅が変わり、書影の大きさまでバラバラに見えるため。 */
.related-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;align-items:stretch;
  /* .shelf-row と同じ理由で、浮いたカードの上端が切れないようにする */
  margin-top:-10px;padding-top:10px;}
.related-row > *{flex:0 0 148px;width:148px;min-width:0;}
@media (min-width:900px){ .related-row > *{flex-basis:164px;width:164px;} }

/* カード＋購入リンクのまとまり（同じ著者の本・著者ページ） */
.card-wrap{display:flex;flex-direction:column;}
.card-wrap > .card{flex:1;}
/* カードの「読んでみる」。ふだんはボタン1つだけで、
   マウスを乗せる（スマホは押す）と選択肢がカードの上に重なって開く。
   横スクロールの行の中でも切れないよう、カードの内側に収める。 */
.card-shop{position:relative;margin-top:8px;}
.read-trigger{
  width:100%;font-family:var(--gothic);font-weight:700;font-size:11px;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
  padding:9px 6px;display:flex;align-items:center;justify-content:center;gap:5px;
}
.read-trigger::after{content:"▾";font-size:9px;opacity:.7;}
.read-trigger:hover{background:var(--ink);color:var(--paper);}

.read-panel{
  display:none;position:absolute;left:0;right:0;bottom:calc(100% + 5px);z-index:20;
  background:var(--card);border:1.5px solid var(--ink);border-radius:2px;
  box-shadow:0 8px 22px rgba(28,24,16,.22);padding:6px;
}
.card-shop.open > .read-panel{display:block;}
@media (hover:hover) and (pointer:fine){
  .card-shop:hover > .read-panel,
  .card-shop:focus-within > .read-panel{display:block;}
}
.read-panel .card-shop-link{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--gothic);font-weight:700;font-size:10.5px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:2px;padding:8px 4px;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.read-panel .card-shop-link:last-of-type{margin-bottom:0;}
.card-shop-link.fam-amazon{border-color:rgba(255,153,0,.85);}
.card-shop-link.fam-amazon:hover{background:rgba(255,153,0,.12);}
.card-shop-link.fam-rakuten{border-color:rgba(191,0,0,.7);}
.card-shop-link.fam-rakuten:hover{background:rgba(191,0,0,.09);}
.read-panel-note{
  display:block;font-family:var(--mono);font-size:9px;color:var(--muted);
  text-align:center;margin-top:5px;
}

/* ---------- Author page ---------- */
.author-head{display:flex;align-items:center;gap:16px;padding:26px 0 10px;}
.toggle-row{display:flex;gap:8px;margin:14px 0 18px;}
.toggle-btn{font-family:var(--gothic);font-weight:700;font-size:12px;padding:8px 14px;border-radius:20px;
  border:1.5px solid var(--line);background:var(--card);}
.toggle-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.unintroduced{opacity:.55;}
.unintroduced .cover{filter:grayscale(.5);}
.sample-flag{font-family:var(--mono);font-size:9px;color:var(--muted);}

/* ---------- Prose pages ---------- */
.prose{max-width:none;}
.prose p{margin:0 0 1.1em;font-size:15px;color:var(--ink-soft);}
.prose h2{font-size:17px;margin-top:1.6em;}
.prose ul{padding-left:1.1em;color:var(--ink-soft);font-size:14.5px;}
.prose ul li{margin-bottom:.6em;}
.guideline-list{padding-left:1.1em;color:var(--ink-soft);font-size:14.5px;}
.guideline-list li{margin-bottom:.6em;}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);margin-top:40px;padding:26px 0 40px;
  font-size:12px;color:var(--muted);
}
.footer-logo{width:120px;height:auto;margin-bottom:14px;opacity:.82;}
.aff-banner{
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;
  text-align:center;padding:8px 14px;letter-spacing:.02em;
}
.footer-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-family:var(--gothic);font-size:12px;}
.footer-links a{text-decoration:none;}
.footer-operator{margin-top:6px;font-family:var(--gothic);font-size:12px;}
.footer-operator a{text-decoration:underline;text-underline-offset:2px;}

.admin-note{
  background:var(--card);border:1px dashed var(--line);border-radius:4px;padding:14px 16px;
  font-size:12px;color:var(--muted);margin-top:18px;
}

.empty{padding:40px 0;text-align:center;color:var(--muted);font-size:13.5px;}
.empty-mascot{width:76px;height:auto;margin:0 auto 12px;opacity:.85;}

/* ---------- マイ本棚：この端末にしかない、という断り書きと引き継ぎ ---------- */
/* 下で display を指定する要素は、hidden属性だけでは隠れない（作者スタイルが勝つ）。 */
.bm-keep-actions[hidden], .bm-keep-msg[hidden], .bm-keep-out[hidden]{display:none;}
.bm-keep{
  background:var(--card);border:1.5px solid var(--ink);border-radius:4px;
  padding:18px 18px 16px;margin:18px 0 4px;
}
.bm-keep-title{font-size:15px;margin:0 0 8px;word-break:auto-phrase;}
/* 枠のいっぱいまで使う。幅を切ると右が大きく空いて、注意書きが読み流されてしまう。 */
.bm-keep-note{font-size:13px;color:var(--ink-soft);margin:0 0 8px;word-break:auto-phrase;}
.bm-keep-hint{font-size:12px;color:var(--muted);margin:8px 0 0;word-break:auto-phrase;}
.bm-keep-hint[hidden]{display:none;}
.bm-keep-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.bm-keep-actions .btn{font-size:13px;padding:11px 16px;}
/* 0冊のあいだ。消さずに、押せないことが見て分かる状態にしておく */
.bm-keep-actions .btn:disabled{opacity:.4;cursor:not-allowed;}
.bm-keep-actions .btn:disabled:hover{transform:none;}
.bm-keep-msg{font-size:12.5px;color:var(--red);margin:10px 0 0;}
.bm-keep-out{display:block;margin-top:12px;}
.bm-keep-out-label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px;}
.bm-keep-out textarea{
  width:100%;font-family:var(--mono);font-size:12px;line-height:1.6;
  padding:10px;border:1px solid var(--line);border-radius:4px;
  background:var(--paper);color:var(--ink);resize:vertical;
}

/* 引き継ぎリンクで開かれたときの確認 */
.bm-restore{
  background:var(--paper);border:1.5px solid var(--red);border-radius:4px;
  padding:16px 18px;margin:14px 0 4px;
}
.bm-restore-title{font-size:14px;font-weight:700;margin:0 0 6px;}
.bm-restore-note{font-size:13px;color:var(--ink-soft);margin:0;word-break:auto-phrase;}
.bm-restore-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.bm-restore-actions .btn{font-size:13px;padding:11px 16px;}

/* ---------- WP調整 ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}
.page-title-block{padding-top:22px;}

/* ---------- Support (charity) page ----------
   団体名の頭にあった黒丸のイニシャルは廃止。
   広い画面では左に「分野・団体名・運営」、右に本文の2段組みにして、
   どこに何が書いてあるかを見た目で分けている。 */
.org-card{padding:22px 20px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}
.org-card + .org-card{margin-top:18px;}
@media (min-width:760px){
  /* 日本語は minmax(0,…) がないと列が縮まらず横スクロールが出る */
  .org-card{grid-template-columns:minmax(0,244px) minmax(0,1fr);gap:28px;padding:24px 24px;}
  .org-side{border-right:1px solid var(--line-soft);padding-right:24px;}
}
.org-side > *{min-width:0;}
.org-side h3{font-size:17px;margin:6px 0 4px;word-break:auto-phrase;overflow-wrap:break-word;line-height:1.5;}
.org-by{font-size:12px;color:var(--muted);line-height:1.7;word-break:auto-phrase;}
.org-tag{
  font-family:var(--gothic);font-size:10.5px;font-weight:700;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:20px;padding:5px 10px;display:inline-block;
  line-height:1.5;word-break:auto-phrase;
}
/* 団体のロゴや写真を用意できたら、org-side の中にこの class の img を置く */
.org-logo{width:100%;max-width:170px;height:auto;margin-top:12px;border:1px solid var(--line-soft);border-radius:2px;background:var(--paper);}
.org-card p{font-size:14px;color:var(--ink-soft);margin:0 0 .9em;}
.org-body > p:first-child{margin-top:0;}
.org-diff{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:3px;
  padding:12px 14px;margin:4px 0 0;font-size:13px;color:var(--ink-soft);
}
.org-diff b{font-family:var(--gothic);font-size:11.5px;color:var(--ink);display:block;margin-bottom:4px;}
.org-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.org-links .btn{font-size:12px;padding:9px 14px;}
.support-table-wrap{overflow-x:auto;}
.support-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px;}
.support-table th{font-family:var(--gothic);font-size:11px;color:var(--muted);font-weight:700;text-align:left;padding:8px;border-bottom:1.5px solid var(--ink);white-space:nowrap;}
.support-table td{padding:10px 8px;border-top:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top;}

/* ---------- 更新履歴 ---------- */
.update-list{max-width:none;}
.update-entry{border-left:2px solid var(--line);padding:2px 0 18px 16px;position:relative;}
.update-entry::before{content:"";position:absolute;left:-5px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--red);}
.update-head{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.update-date{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.update-type{font-family:var(--gothic);font-size:10px;font-weight:700;color:var(--red);border:1px solid var(--red);border-radius:20px;padding:2px 9px;}
.update-title{font-size:15px;margin:0 0 4px;}
.update-body{font-size:13.5px;color:var(--ink-soft);}
.update-body p{margin:0 0 .6em;}
.update-body ul{margin:0 0 .6em;padding-left:1.2em;}
.pagination{font-family:var(--gothic);font-size:13px;margin-top:20px;}
.pagination .nav-links{display:flex;gap:12px;}

/* ---------- SRくんチャット ---------- */
/* 起動ボタン: 丸ボタンではなく、SRくん本人が立って動いている */
.srb-launcher{
  position:fixed;right:12px;bottom:72px;z-index:60;
  background:none;border:none;padding:0;
  display:block;line-height:0;
  transition:opacity .2s ease, transform .2s ease;
}
.srb-launcher-char{position:relative;display:block;}
.srb-launcher .srb-launcher-char img{
  /* 新しい絵は横に広い（360x405）。前の縦長の絵（304x420）と同じ幅にすると
     顔が小さく見えるので、少し大きくする（2026-08-27）。 */
  width:84px;height:auto;display:block;position:relative;z-index:1;
  /* 紙色のふちどりで、ページ本文の上でも輪郭が埋もれないようにする */
  filter:drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 6px var(--paper)) drop-shadow(0 3px 5px rgba(28,24,16,.3));
  transform-origin:50% 100%;
  animation:srbBob 2.8s ease-in-out infinite;
}
.srb-launcher-shadow{
  position:absolute;left:50%;bottom:-3px;width:56%;height:7px;
  background:rgba(28,24,16,.28);border-radius:50%;filter:blur(2px);
  transform:translateX(-50%);
  animation:srbShadow 2.8s ease-in-out infinite;
}
/* ふわりと上下に揺れる（呼吸・足踏みのイメージ） */
@keyframes srbBob{
  0%,100%{transform:translateY(0) rotate(-1.6deg) scaleY(1);}
  25%{transform:translateY(-5px) rotate(0deg) scaleY(1.02);}
  50%{transform:translateY(-7px) rotate(1.6deg) scaleY(1.03);}
  75%{transform:translateY(-3px) rotate(0deg) scaleY(1);}
}
@keyframes srbShadow{
  0%,100%{transform:translateX(-50%) scaleX(1);opacity:.26;}
  50%{transform:translateX(-50%) scaleX(.78);opacity:.13;}
}
/* ときどき跳ねて気づいてもらう */
.srb-launcher.hop .srb-launcher-char img{animation:srbHop .95s cubic-bezier(.28,.84,.42,1) 1;}
@keyframes srbHop{
  0%{transform:translateY(0) scale(1,1);}
  14%{transform:translateY(2px) scale(1.09,.9);}
  38%{transform:translateY(-24px) scale(.95,1.08) rotate(-4deg);}
  60%{transform:translateY(-10px) scale(1,1) rotate(3deg);}
  80%{transform:translateY(2px) scale(1.08,.92);}
  100%{transform:translateY(0) scale(1,1);}
}
.srb-launcher:hover .srb-launcher-char img,
.srb-launcher:focus-visible .srb-launcher-char img{animation:srbHop .95s cubic-bezier(.28,.84,.42,1) infinite;}

/* ふきだし */
.srb-launcher-bubble{
  position:absolute;right:calc(100% - 8px);bottom:38%;
  /* 何ができる相手かを名乗るぶん、文が長くなった。
     一行で書ききろうとすると画面の外へ出るので、折り返させる。 */
  /* 行はこちらで決めるので、勝手に折り返させない。
     いちばん長い行（12文字）が収まる幅を確保する。 */
  max-width:min(72vw,250px);white-space:normal;text-align:left;
  background:var(--card);border:1.5px solid var(--ink);border-radius:14px;
  padding:7px 12px;font-family:var(--gothic);font-size:12px;font-weight:700;
  color:var(--ink);line-height:1.4;box-shadow:0 4px 10px rgba(28,24,16,.16);
  opacity:0;transform:translateY(4px) scale(.94);transform-origin:100% 60%;
  transition:opacity .22s ease, transform .22s ease;pointer-events:none;
}
.srb-launcher-bubble > span{display:block;white-space:nowrap;}
.srb-launcher-bubble::after{
  content:"";position:absolute;right:-7px;bottom:9px;
  width:0;height:0;border:6px solid transparent;border-left-color:var(--ink);
}
.srb-launcher-bubble::before{
  content:"";position:absolute;right:-4px;bottom:10px;z-index:1;
  width:0;height:0;border:5px solid transparent;border-left-color:var(--card);
}
.srb-launcher.speak .srb-launcher-bubble,
.srb-launcher:hover .srb-launcher-bubble,
.srb-launcher:focus-visible .srb-launcher-bubble{opacity:1;transform:translateY(0) scale(1);}

/* パネルを開いている間は引っ込む */
.srb-launcher.hidden{opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;}

@media (min-width:860px){
  .srb-launcher{right:24px;bottom:20px;}
  .srb-launcher .srb-launcher-char img{width:132px;}
  .srb-launcher-bubble{font-size:13px;padding:8px 13px;}
}
/* 狭い画面ではふきだしが本文を覆いすぎないよう折り返す
   （rightのみ指定の絶対配置は縮み幅が親幅に縛られるため、width:max-content が必要） */
@media (max-width:420px){
  .srb-launcher-bubble{
    white-space:normal;width:max-content;max-width:46vw;
    font-size:11.5px;padding:6px 10px;
  }
}
@media (prefers-reduced-motion: reduce){
  .srb-launcher-char img,.srb-launcher-shadow{animation:none !important;}
  .srb-launcher:hover .srb-launcher-char img{animation:none !important;}
}

.srb-panel{
  position:fixed;right:16px;bottom:84px;z-index:70;
  width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);
  background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;
  box-shadow:0 12px 36px rgba(28,24,16,.28);
  display:none;flex-direction:column;overflow:hidden;
}
.srb-panel.open{display:flex;animation:srbUp .18s ease;}
@keyframes srbUp{from{transform:translateY(10px);opacity:.4;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){ .srb-panel.open{animation:none;} }
@media (min-width:860px){ .srb-panel{right:28px;bottom:28px;} }

.srb-head{display:flex;align-items:center;gap:9px;padding:10px 10px 10px 12px;background:var(--ink);color:var(--paper);}
.srb-head-avatar{width:32px;height:32px;border-radius:50%;flex:none;}
.srb-head-name{flex:1;font-family:var(--gothic);font-weight:900;font-size:14px;line-height:1.25;}
.srb-head-name span{display:block;font-weight:400;font-size:10.5px;color:#cfc7ae;font-family:var(--mono);}
.srb-head-btn{background:none;border:none;color:#cfc7ae;font-size:14px;padding:4px 6px;border-radius:4px;}
.srb-head-btn:hover{color:var(--yellow);}

.srb-log{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;}
.srb-msg{display:flex;gap:8px;align-items:flex-start;}
.srb-msg-avatar{width:28px;height:28px;border-radius:50%;flex:none;border:1px solid var(--card-edge);}
.srb-bubble{
  background:var(--card);border:1px solid var(--card-edge);border-radius:2px 12px 12px 12px;
  padding:10px 12px;font-size:13.5px;line-height:1.75;color:var(--ink-soft);max-width:100%;
}
.srb-msg-user{justify-content:flex-end;}
.srb-msg-user .srb-bubble{background:var(--ink);color:var(--paper);border-color:var(--ink);border-radius:12px 12px 2px 12px;font-family:var(--gothic);font-size:13px;}
.srb-thinking .srb-bubble{color:var(--muted);font-style:italic;}

.srb-choices{display:flex;flex-wrap:wrap;gap:7px;padding-left:36px;}
.srb-choice{
  font-family:var(--gothic);font-size:12px;font-weight:700;padding:8px 13px;
  border:1.5px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink-soft);
}
.srb-choice:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.srb-cards{display:flex;flex-direction:column;gap:9px;margin-top:10px;}
.srb-card{
  display:flex;gap:10px;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  padding:8px;transition:transform .15s ease;
}
.srb-card:hover{transform:translateX(2px);border-color:var(--red);}
.srb-card-cover{
  width:46px;flex:none;aspect-ratio:3/4.2;border-radius:2px;
  background-size:cover;background-position:center top;background-color:#eee6d3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.srb-card-cover-plain{
  display:flex;align-items:flex-end;padding:4px;
  font-family:var(--gothic);font-weight:900;font-size:8px;color:#fff;line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;
}
.srb-card-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.srb-card-title{font-family:var(--gothic);font-weight:900;font-size:12.5px;line-height:1.4;word-break:auto-phrase;overflow-wrap:break-word;}
.srb-card-author{font-family:var(--gothic);font-size:10.5px;color:var(--muted);}
.srb-card-hook{font-size:11.5px;color:var(--ink-soft);margin-top:4px;border-top:1px dashed var(--line);padding-top:4px;}
.srb-card-src{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px;}

.srb-freeform{display:flex;gap:6px;padding-left:36px;}
.srb-freeform input{
  flex:1;min-width:0;font-family:var(--mincho);font-size:13.5px;padding:9px 11px;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--card);color:var(--ink);
}
.srb-freeform button{
  font-family:var(--gothic);font-weight:700;font-size:12px;padding:9px 14px;
  background:var(--ink);color:var(--paper);border:none;border-radius:2px;flex:none;
}
.srb-foot{
  padding:8px 12px;border-top:1px solid var(--line-soft);background:var(--card);
  font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:1.5;
}

/* ---------- フェア（本屋の平台のような特集） ---------- */
.fair{
  position:relative;margin:0 -16px;padding:30px 16px 34px;
  background:
    linear-gradient(180deg, rgba(244,196,48,.13) 0%, rgba(244,196,48,0) 220px),
    var(--paper);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
@media (min-width:860px){ .fair{margin:0 -40px;padding:40px 40px 44px;} }
.fair-head{margin-bottom:22px;}
.fair-title{font-size:clamp(22px,4.4vw,32px);line-height:1.3;margin:0 0 10px;word-break:auto-phrase;overflow-wrap:break-word;}
.fair-title a{text-decoration:none;}
.fair-title a:hover{color:var(--red);}
.fair-lead{color:var(--ink-soft);font-size:14.5px;max-width:none;margin:0 0 8px;}
.fair-count{font-family:var(--mono);font-size:11px;color:var(--muted);}

/* 平台: 木の棚に本が並んでいるイメージ */
.fair-table{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;
}
@media (min-width:560px){ .fair-table{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;} }
@media (min-width:860px){ .fair-table{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 18px;} }

.fair-item{
  position:relative;display:block;min-width:0;text-decoration:none;color:inherit;
  transition:transform .15s ease;
}
.fair-item:hover{transform:translateY(-4px);}
.fair-cover{display:block;position:relative;}
.fair-cover .cover{
  aspect-ratio:3/4.2;margin:0;
  box-shadow:0 6px 14px rgba(28,24,16,.20), inset 0 0 0 1px rgba(0,0,0,.08);
}
/* 本が置かれている面の影 */
.fair-cover::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-7px;height:7px;
  background:radial-gradient(ellipse at center, rgba(28,24,16,.26) 0%, rgba(28,24,16,0) 72%);
}
.fair-body{display:block;margin-top:12px;}
.fair-book-title{
  display:block;font-family:var(--gothic);font-weight:900;font-size:12.5px;line-height:1.45;
  word-break:auto-phrase;overflow-wrap:break-word;
}
.fair-book-author{display:block;font-family:var(--gothic);font-size:10.5px;color:var(--muted);margin-top:2px;}

/* POP（手書きの値札のような札） */
.fair-pop{
  display:inline-block;max-width:100%;margin-top:7px;
  background:var(--yellow);color:var(--ink);
  font-family:var(--gothic);font-weight:700;font-size:10.5px;line-height:1.45;
  padding:5px 9px;border-radius:2px;
  transform:rotate(-1.6deg);
  box-shadow:0 2px 5px rgba(28,24,16,.18);
  word-break:auto-phrase;overflow-wrap:break-word;
}
.fair-item:nth-child(even) .fair-pop{transform:rotate(1.4deg);}
.fair-more{margin:18px 0 0;}

/* フェア一覧 */
.fair-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.fair-list a{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:14px 16px;transition:transform .15s ease;
}
.fair-list a:hover{transform:translateY(-2px);border-color:var(--red);}
.fair-list-covers{display:flex;gap:6px;margin-bottom:10px;}
.fair-list-cover{width:38px;flex:none;}
.fair-list-cover .cover{aspect-ratio:3/4.2;margin:0;padding:3px;}
.fair-list-cover .cover-title{font-size:6px;}
.fair-list-title{display:block;font-family:var(--gothic);font-weight:900;font-size:15px;line-height:1.4;}
.fair-list-lead{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.fair-list-meta{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;}

/* ---------- 購入リンク（Amazon / 楽天） ---------- */
.shop-links{display:flex;flex-direction:column;gap:8px;}
.shop-links .btn{width:100%;justify-content:center;}

/* ヒーローの導入文（2段落を続けて置くときの間隔） */
.hero-greet{margin-bottom:10px !important;}

/* ---------- 編集後記 ---------- */
.editor-note{
  background:var(--card);border:1px solid var(--card-edge);border-left:4px solid var(--yellow);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:16px 16px 8px;margin:24px 0;
}
.editor-note-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.editor-note-mark{font-family:var(--gothic);font-weight:900;font-size:13px;letter-spacing:.04em;}
.editor-note-body{display:flex;gap:14px;align-items:flex-start;}
.editor-note-mascot{width:64px;height:auto;flex:none;margin-top:2px;}
.editor-note-text{min-width:0;}

/* 最も印象に残ったコメント。編集後記の下に、同じ組みで置く。
   コメント本文は載せず、相手の名前とこちらの言葉だけを出す。 */
.fav-comment{
  background:var(--card);border:1px solid var(--card-edge);border-left:4px solid var(--ink);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:16px 16px 8px;margin:24px 0;
}
.fav-comment-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.fav-comment-mark{font-family:var(--gothic);font-weight:900;font-size:13px;letter-spacing:.04em;}
.fav-comment-user{font-family:var(--gothic);font-weight:700;font-size:13px;color:var(--ink);}
/* 相手が複数のときに名前どうしがくっつかないよう、2人目から中黒を入れる */
.fav-comment-user + .fav-comment-user::before{content:"・";font-weight:400;color:var(--muted);}
.fav-comment-san{font-weight:400;color:var(--ink-soft);margin-left:1px;}
.fav-comment-note p{font-size:15.5px;line-height:1.95;color:var(--ink);margin:0 0 .8em;word-break:auto-phrase;}
.editor-note-text p{margin:0 0 .9em;font-size:16px;color:var(--ink);line-height:1.9;}

/* ---------- この本のBGM ---------- */
.bgm-box{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:16px;margin:24px 0;
}
.bgm-mark{font-family:var(--gothic);font-weight:900;font-size:13px;letter-spacing:.04em;}
.bgm-title{
  font-family:var(--gothic);font-weight:700;font-size:15px;margin:10px 0 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;word-break:auto-phrase;overflow-wrap:break-word;
}
.bgm-artist{font-family:var(--gothic);font-weight:400;font-size:12px;color:var(--muted);}
.bgm-reason p{margin:.7em 0 0;font-size:15.5px;color:var(--ink);line-height:1.9;}
.bgm-player{display:block;margin-top:14px;border:0;border-radius:12px;}
@media (max-width:520px){ .editor-note-mascot{width:48px;} }

/* ---------- コラム ---------- */
.column-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:620px){ .column-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:900px){ .column-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;} }
.column-card{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block;padding:14px;
  transition:transform .15s ease;
}
.column-card:hover{transform:translateY(-2px);}
.column-card-thumb{display:block;margin:-14px -14px 12px;overflow:hidden;}
.column-card-thumb img{width:100%;height:150px;object-fit:cover;}
.column-card-date{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block;margin-bottom:5px;}
.column-card h3{font-size:15px;margin:0 0 6px;line-height:1.5;word-break:auto-phrase;overflow-wrap:break-word;}
.column-card-lead{font-size:12.5px;color:var(--ink-soft);line-height:1.8;display:block;}
.column-single{padding:26px 0 40px;max-width:720px;}
.column-date{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 16px;}
.column-hero img{width:100%;height:auto;border-radius:var(--radius-card);}

/* ---------- グッズ ---------- */
.goods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
/* PCは一段に4つ並べる。BASEの商品画像は320px想定なので、
   1枚あたりが細くなりすぎないよう、余白は少し詰める。 */
@media (min-width:760px){ .goods-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} }
@media (min-width:1000px){ .goods-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} }
.goods-card{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block;padding:12px;
  transition:transform .15s ease;
}
.goods-card:hover{transform:translateY(-2px);}
.goods-card-thumb{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;background:var(--paper);border-radius:2px;overflow:hidden;margin-bottom:10px;
}
.goods-card-thumb img{width:100%;height:100%;object-fit:cover;}
.goods-card-noimg{font-family:var(--mono);font-size:11px;color:var(--muted);}
.goods-card h3{font-size:13.5px;margin:0 0 4px;line-height:1.45;word-break:auto-phrase;overflow-wrap:break-word;}
.goods-card-price{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.goods-photo img{width:100%;height:auto;border-radius:var(--radius-card);}
/* 縦長の写真でも、商品名や購入ボタンが遠くならないよう高さを抑える */
@media (max-width:759px){
  .goods-photo img{max-height:46vh;width:auto;max-width:100%;margin:0 auto;}
}
.goods-price{font-family:var(--mono);font-size:15px;color:var(--ink-soft);margin:0 0 4px;}
.goods-soon{font-family:var(--mono);font-size:12.5px;color:var(--muted);}

/* ---------- 準備中の枠（コラム・グッズが0件のとき） ---------- */
.coming-soon{
  border:1.5px dashed var(--line);border-radius:var(--radius-card);
  background:var(--card);padding:22px 18px;text-align:center;
}
.coming-soon-mark{
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-family:var(--gothic);font-weight:700;font-size:11px;
  padding:4px 10px;border-radius:2px;transform:rotate(-1.6deg);
  box-shadow:0 2px 5px rgba(28,24,16,.18);
}
.coming-soon p{margin:12px 0 0;font-size:13.5px;color:var(--muted);}

/* 編集後記・BGMが未記入のとき */
.editor-note.is-empty, .bgm-box.is-empty, .fav-comment.is-empty{box-shadow:none;border-style:dashed;}
.fav-comment.is-empty{border-left-color:var(--card-edge);}
.fav-comment.is-empty .soon-text{margin:0;}
.editor-note.is-empty{border-left-color:var(--card-edge);}
.bgm-head{display:flex;align-items:center;gap:8px;}
.soon-tag{
  display:inline-block;background:var(--yellow);color:var(--ink);
  font-family:var(--gothic);font-weight:700;font-size:10px;
  padding:3px 8px;border-radius:2px;transform:rotate(-1.6deg);
}
.soon-text{margin:8px 0 0;font-size:13px;color:var(--muted);}
.editor-note.is-empty .soon-text{margin:0;}

/* ================================================================
   スマホでの操作性・見やすさの調整
   ================================================================ */

/* 書影を背景画像から<img>に変えたぶんの見た目合わせ */
.cover.photo{background-color:#eee6d3;padding:0;}
.cover.photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}

/* --- 書籍ページ：スマホの並び順 ---
   書影 → 書名・ひとこと・投稿画像 → 編集後記・読者の言葉・BGM → 購入リンク → 書誌情報。
   ISBNや発売日より先に「何の本でどう面白いか」が来るようにする。 */
@media (max-width:759px){
  .detail-grid{display:flex;flex-direction:column;gap:20px;}
  /* 投稿画像に書影が写っている本は、上の書影が重複するので出さない。
     投稿画像が無い本では、書影が唯一の見た目になるのでそのまま残す。 */
  .detail-grid.has-ig .detail-cover{display:none;}
  .detail-side, .detail-main{display:contents;}
  .detail-cover{order:1;max-width:190px;margin:0 auto;}
  .detail-main-top{order:2;min-width:0;}
  /* 読み物（編集後記・読者の言葉・BGM）を、購入リンクより先に置く。
     全項目がそろうと本文がかなり長くなるので、
     「読んで、気に入ったら買う」の順にしないと買う導線ばかりが目に入る。 */
  .detail-main-bottom{order:3;min-width:0;}
  .detail-buy{order:4;}
  .detail-meta{order:5;min-width:0;border-top:1px solid var(--line-soft);padding-top:16px;}
  /* 関連本・広告・コメントはいちばん後ろ。買う前に他の本へ送らない */
  .detail-more{order:6;min-width:0;}
  .detail-buy .ad-badge{margin-bottom:10px;}
}
@media (min-width:760px){
  /* PCは従来どおり左に書影・購入リンク・書誌、右に本文。左列だけ追従させる。
     DOMは「書名（h1）が先」に直したので、見た目の左右は order で作る。 */
  .detail-side{position:sticky;top:80px;align-self:start;order:-1;}
  .detail-cover{position:static;}
  .detail-buy{margin-top:14px;}
  .detail-meta{margin-top:14px;}
}

/* --- 下タブに本文が隠れないように（iPhoneのホームバーぶんも確保） --- */
body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}
.tab-bar{padding-bottom:env(safe-area-inset-bottom, 0px);}
@media (min-width:860px){ body{padding-bottom:0;} }

/* --- ジャンルのチップは横1行のスクロールに（縦に積むと画面を占有する） --- */
@media (max-width:759px){
  .chip-row{
    display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:8px;padding-bottom:6px;scrollbar-width:none;
  }
  .chip-row::-webkit-scrollbar{display:none;}
  .chip-row .chip{flex:0 0 auto;}
}

/* --- 指で押しやすい大きさに --- */
.bm-ribbon{width:34px;height:36px;}   /* 指で押せる幅は保ちつつ、書影に被らない高さに */
.sort-select{min-height:44px;font-size:13.5px;}
#shelfSearch{min-height:46px;font-size:16px;} /* 16px未満だとiOSで入力時に画面が拡大する */
.filter-bar{gap:10px;}
.shelf-more-row{text-align:center;margin:4px 0 30px;}
#shelfMore{min-height:48px;}
.footer-links a{min-height:44px;display:inline-flex;align-items:center;}
/* メニューシートは1行1項目。inline-flexにすると横に並んでしまうのでflexのまま高さだけ確保する。 */
.menu-sheet-link{min-height:44px;}

/* --- スマホでの文字サイズ --- */
@media (max-width:759px){
  .card .hook{font-size:12.5px;padding:1px 4px;}   /* ペンの線なので、上下に厚みを持たせない */
  .card .hook-line{font-size:12.5px;}              /* 入れものの行送りも、同じ字の大きさで計算する */
  .card .author{font-size:12px;}
  .card h3{font-size:14.5px;}
  .fair-book-title{font-size:13.5px;}
  .fair-book-author{font-size:11.5px;}
  .fair-pop{font-size:11.5px;}
  .lead{font-size:15.5px;}
  .meta-table{font-size:13.5px;}
}

/* グリッドの子は縮められるようにしておく。
   （最小幅が効いてしまうと、2列ぶんの幅が画面幅を超えて横スクロールが出る） */
.shelf-grid > *, .goods-grid > *, .column-grid > *{min-width:0;}

/* --- 反応ボタンはスマホでも横一列に収める --- */
@media (max-width:520px){
  .react-row{gap:6px;flex-wrap:wrap;margin:16px 0;}
  .react-row > .react-btn,
  .react-row > .bm-btn{
    flex:1 1 0;min-width:0;justify-content:center;
    font-size:11.5px;padding:11px 4px;gap:4px;white-space:nowrap;
  }
  .react-row .react-btn .n{font-size:11px;}
  .bm-label-long{display:none;}          /* 「あなたの〜する」を省いて短くする */
  .react-row .bm-status-select{flex:1 0 100%;margin-top:2px;}
}

/* --- 販売サイトの見分け（ブランドカラーのみ・ロゴは使わない） ---
   AmazonとBookのロゴは各社の商標で、アフィリエイト参加者が自前で
   ボタンに貼ることは認められていないため、色の点だけで見分けをつける。 */
.shop-amazon, .shop-rakuten{position:relative;}
.shop-amazon::before, .shop-rakuten::before{
  content:"";width:9px;height:9px;border-radius:2px;flex:none;
  transform:rotate(45deg);
}
.shop-amazon::before{background:#ff9900;}   /* Amazonのオレンジ */
.shop-rakuten::before{background:#bf0000;}  /* 楽天のレッド */
.shop-amazon{border-color:rgba(255,153,0,.85);}
.shop-rakuten{border-color:rgba(191,0,0,.75);}
.shop-amazon:hover{background:rgba(255,153,0,.10);}
.shop-rakuten:hover{background:rgba(191,0,0,.08);}

.chip-label{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:.1em;flex:0 0 auto;margin-right:2px;
}
.chip-count{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:5px;}
.chip.on .chip-count{color:inherit;opacity:.75;}
.chip-row-filter{margin-top:8px;align-items:center;}
.chip-row-filter .chip{border:1px solid var(--line);background:var(--card);cursor:pointer;}
/* 上の行が .chip.on より後ろにあるため、選択中の色が上書きされて
   淡い文字が淡い地に乗ってしまう。選択中はここで塗り直す。 */
.chip-row-filter .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* 問いの絞り込み。「問い」とだけ書いても伝わらないので、
   チップの左の小さなラベルではなく、行の上に見出しと一文を置いている。 */
.q-filter{margin-top:20px;}
.q-filter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.q-filter-title{font-size:17px;margin:0;word-break:auto-phrase;overflow-wrap:break-word;}
.q-filter-lead{color:var(--ink-soft);font-size:13px;margin:4px 0 0;max-width:none;word-break:auto-phrase;}

/* 問いの行だけは横スクロールにせず、7つとも見えるように折り返す。
   メニューから「問いから」を外したので、ここが本棚での入り口になる。 */
.chip-row-question{flex-wrap:wrap;margin-top:10px;}
@media (max-width:759px){
  .chip-row-question{flex-wrap:wrap;overflow-x:visible;}
}

/* ---------- グッズ詳細 ----------
   書籍ページとは並びが違うので、専用のレイアウトにしている。 */
.goods-detail{display:grid;grid-template-columns:1fr;gap:24px;padding:26px 0 40px;}
.goods-detail > *{min-width:0;}
@media (min-width:760px){
  .goods-detail{grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:start;}
  .goods-detail-visual{position:sticky;top:80px;}
}
.goods-photo img{width:100%;height:auto;border-radius:var(--radius-card);}
/* 縦長の写真でも、商品名や購入ボタンが遠くならないよう高さを抑える */
@media (max-width:759px){
  .goods-photo img{max-height:46vh;width:auto;max-width:100%;margin:0 auto;}
}
.goods-photo-empty{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius-card);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.goods-back{margin-top:22px;}

/* BASEの商品ウィジェットは個別ページだけに置く（縦長で一覧に向かないため） */
.goods-embed{margin:0 0 18px;}
.goods-embed iframe{width:100%;max-width:320px;height:480px;border:0;display:block;}
/* ---------- SNSへの共有 ----------
   各社のマークは共有ボタン用の形をそのまま使い、色や形は変えない。
   外部スクリプトは読み込まず、共有URLを開くだけ。 */
/* 4つを必ず横1列に収める。幅が狭いときは均等に詰める。 */
.share-row{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 18px;}
.share-btn{
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--gothic);font-weight:700;font-size:13px;color:var(--ink);
  text-decoration:none;background:var(--card);white-space:nowrap;
  border:1.5px solid var(--line);border-radius:8px;padding:8px 6px;
  transition:border-color .15s ease,background .15s ease;
}
@media (min-width:760px){
  .share-row{flex-wrap:wrap;gap:8px;}
  .share-btn{flex:0 0 auto;padding:8px 14px;}
}
.share-btn svg{display:block;flex:none;}
.share-btn.is-pinterest{border-color:#e60023;color:#a80019;}
.share-btn.is-pinterest:hover{background:rgba(230,0,35,.07);}
.share-btn.is-facebook{border-color:#1877F2;color:#0f4fa8;}  /* 同じ理由で濃くする */
.share-btn.is-facebook:hover{background:rgba(24,119,242,.07);}
.share-btn.is-line{border-color:#06C755;color:#046b2e;}  /* #04a144 は 3.17:1 で不足 */
.share-btn.is-line:hover{background:rgba(6,199,85,.08);}
.share-btn.is-x{border-color:var(--ink);color:var(--ink);}
.share-btn.is-x:hover{background:rgba(28,24,16,.06);}
@media (max-width:400px){
  .share-btn{font-size:11.5px;gap:4px;padding:8px 3px;}
  .share-btn svg{width:16px;height:16px;}
}

/* ---------- お仕事のご依頼フォーム ---------- */
.contact-wrap{padding:0 0 40px;max-width:640px;}
.contact-note{
  border:1.5px solid var(--line);border-radius:var(--radius-card);
  padding:14px 16px;margin-bottom:20px;font-size:14px;line-height:1.9;background:var(--card);
}
.contact-note.is-ok{border-left:4px solid var(--yellow);}
.contact-note.is-ng{border-left:4px solid var(--red);}
.contact-form{display:flex;flex-direction:column;gap:2px;margin-top:18px;}
.contact-form p{margin:0 0 16px;}
.contact-form label{
  display:block;font-family:var(--gothic);font-weight:700;font-size:13px;margin-bottom:6px;
}
.contact-form .req{
  font-family:var(--mono);font-size:10px;color:var(--red);
  border:1px solid var(--red);border-radius:2px;padding:1px 5px;margin-left:6px;font-weight:400;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select{
  width:100%;font-family:var(--mincho);font-size:16px;padding:12px;
  border:1.5px solid var(--line);border-radius:2px;background:var(--card);color:var(--ink);
}
.contact-form textarea{resize:vertical;line-height:1.9;}
.contact-form select{font-family:var(--gothic);font-size:14px;}
.contact-submit{margin-top:6px !important;}
.contact-submit .btn{width:100%;justify-content:center;min-height:52px;}
.contact-privacy{font-size:12px;color:var(--muted);margin-top:14px !important;}
.srb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media (min-width:700px){ .contact-submit .btn{width:auto;padding-left:40px;padding-right:40px;} }

/* 聴き放題・読み放題への導線 */
.sub-links{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.sub-links-label{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:2px;
}
.sub-link{
  display:flex;align-items:center;gap:8px;
  font-family:var(--gothic);font-weight:700;font-size:12px;color:var(--ink);
  text-decoration:none;border:1px solid var(--line);border-radius:2px;padding:9px 11px;
}
.sub-link:hover{border-color:var(--ink);}
.sub-link-note{
  font-family:var(--mono);font-weight:400;font-size:9.5px;color:var(--muted);
  border:1px solid var(--line-soft);border-radius:2px;padding:2px 5px;flex:none;
}

/* スマホでも2列の正方形タイルで並べ、ひと目で選べるようにする */
@media (max-width:899px){
  .goods-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .goods-card{padding:8px;}
  .goods-card h3{font-size:12.5px;}
}

/* 聴き放題・読み放題の公式バナー */
.sub-banners{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:28px 0 0;padding:16px;border:1px dashed var(--line);border-radius:var(--radius-card);
}
.sub-banners-label{
  font-family:var(--mono);font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px;flex:none;
}
.sub-banner{max-width:100%;overflow-x:auto;}
.sub-banner img{max-width:100%;height:auto;}

/* ---------- 「読んでみる」 ---------- */
.read-head{
  font-family:var(--gothic);font-weight:900;font-size:14px;margin:0 0 10px;
  display:flex;align-items:center;gap:8px;
}
.read-head::after{content:"";flex:1;height:1px;background:var(--line-soft);}
.read-links{display:flex;flex-direction:column;gap:7px;}
.read-link{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:2px;padding:11px 12px;
  transition:border-color .15s ease,background .15s ease;
}
.read-link:hover{border-color:var(--ink);}
.read-note{
  /* 9.5px は小さすぎて読めない。色も 3.97:1 で足りなかったので濃くする。 */
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:2px;padding:3px 7px;flex:none;min-width:42px;text-align:center;
}
.read-body{display:flex;flex-direction:column;min-width:0;}
.read-label{font-family:var(--gothic);font-weight:700;font-size:12.5px;line-height:1.4;}
.read-sub{font-family:var(--gothic);font-size:11.5px;color:var(--muted);margin-top:2px;}

/* Kindle Unlimited・Audible・Amazonはどれもアマゾンのサービスなので同じ色にまとめる。
   ロゴは各社の商標なので使わず、色と説明文だけで見分ける。 */
.read-link.fam-amazon{border-color:rgba(255,153,0,.85);}
.read-link.fam-amazon:hover{background:rgba(255,153,0,.09);}
.read-link.fam-amazon .read-note{color:#8a5100;border-color:rgba(255,153,0,.55);}  /* #a86400 は 4.37:1 で不足 */
.read-link.fam-rakuten{border-color:rgba(191,0,0,.7);}
.read-link.fam-rakuten:hover{background:rgba(191,0,0,.07);}
.read-link.fam-rakuten .read-note{color:#bf0000;border-color:rgba(191,0,0,.45);}
/* 広告表記の下が0だと、広告ではない「図書館で探す」に密着して
   そこまで広告に見える。下にも余白を置いて切り離す。 */
.detail-buy .ad-badge{margin:12px 0 14px;}

/* 無料体験があるものだけを囲む。
   どこまでが「30日間無料」なのかを、枠で見た目にはっきりさせる。 */
.trial-group{
  position:relative;display:flex;flex-direction:column;gap:7px;
  border:1.5px dashed rgba(255,153,0,.75);border-radius:4px;
  background:rgba(255,153,0,.05);
  padding:20px 9px 9px;margin-bottom:7px;
}
.trial-badge{
  position:absolute;top:-11px;left:10px;
  background:var(--yellow);color:var(--ink);
  font-family:var(--gothic);font-weight:700;font-size:11px;letter-spacing:.03em;
  padding:3px 10px;border-radius:2px;white-space:nowrap;
  box-shadow:0 2px 5px rgba(28,24,16,.16);
}
.trial-group .read-link{background:var(--card);}


/* ---------- 更新履歴（対応日ごと） ---------- */
.update-day{margin-bottom:34px;}
.update-day-head{
  display:flex;align-items:baseline;gap:10px;margin:0 0 14px;
  padding-bottom:8px;border-bottom:1.5px solid var(--ink);
}
.update-day-date{font-family:var(--gothic);font-weight:900;font-size:17px;}
.update-day-count{font-family:var(--mono);font-size:11px;color:var(--muted);}
.update-day-body{display:flex;flex-direction:column;gap:14px;padding-left:2px;}
.update-day .update-entry{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  padding:14px 16px;box-shadow:var(--shadow);
}
.update-day .update-type{
  display:inline-block;font-family:var(--mono);font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin-bottom:8px;
}
.update-day .update-title{font-size:15px;margin:0 0 6px;line-height:1.5;}
.update-day .update-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0 0 .6em;}
.update-day .update-body p:last-child{margin-bottom:0;}
/* 旧デザインの縦線と点は、日付ごとの表示では使わない */
.update-day .update-entry{border-left:none;padding-left:16px;}
.update-day .update-entry::before{display:none;}

@media (min-width:760px){
  .update-day{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:start;}
  .update-day-head{
    flex-direction:column;align-items:flex-start;gap:4px;margin:0;
    border-bottom:none;position:sticky;top:80px;
  }
}
/* 画面が広いときは2列に並べて、縦のスクロールを半分にする */
@media (min-width:1000px){
  .update-day-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
  .update-day .update-entry{padding:12px 14px;}
  .update-day .update-title{font-size:14px;}
  .update-day .update-body p{font-size:13px;line-height:1.8;}
}

/* ---------- 編集後記アーカイブ（/notes/） ---------- */
/* 書籍ページの中の編集後記と違い、ここは「読み物」として通読する場所。
   本の情報は小さく添えるだけにして、文章を主役にする。 */
.notes-count{font-family:var(--gothic);font-size:12px;color:var(--muted);margin:0 0 18px;}
.notes-count strong{font-size:17px;color:var(--ink);margin-right:2px;}
.notes-page{color:var(--muted);}
.notes-list{display:flex;flex-direction:column;gap:34px;}
.note-entry{
  /* 日付の列は中身に合わせる。78px はチップを付ける前（日付が文字だけだった頃）の幅で、
     チップにしたら92pxになり、14px はみ出して隙間を食っていた（書影との間が2px）。 */
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;
  padding-bottom:30px;border-bottom:1px solid var(--line);
}
.note-date{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em;}
.note-main{min-width:0;}
.note-book{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-bottom:12px;}
.note-cover{flex:0 0 34px;display:block;}
.note-cover .cover{width:34px;height:48px;border-radius:2px;overflow:hidden;margin:0;padding:0;}
.note-cover .cover img{width:100%;height:100%;object-fit:cover;display:block;}
.note-cover .cover-title{font-size:6px;padding:3px;line-height:1.3;}
.note-book-body{min-width:0;}
.note-book-title{font-family:var(--gothic);font-weight:700;font-size:13.5px;line-height:1.5;display:block;}
.note-book-author{font-family:var(--gothic);font-size:11px;color:var(--muted);display:block;margin-top:2px;}
.note-book:hover .note-book-title{text-decoration:underline;}
.note-body{display:flex;gap:14px;align-items:flex-start;}
.note-mascot{width:56px;height:auto;flex:none;margin-top:2px;}
.note-text{min-width:0;}
.note-text p{margin:0 0 .9em;font-size:15px;color:var(--ink);line-height:2;}
.note-text p:last-child{margin-bottom:0;}
.note-more{
  display:inline-block;margin-top:12px;font-family:var(--gothic);font-size:12px;
  color:var(--red);text-decoration:none;font-weight:700;
}
.note-more:hover{text-decoration:underline;}
.notes-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 8px;}
.notes-nav-now{font-family:var(--mono);font-size:12px;color:var(--muted);}
@media (max-width:640px){
  .note-entry{grid-template-columns:1fr;gap:8px;padding-bottom:24px;}
  .notes-list{gap:26px;}
  .note-text p{font-size:14.5px;line-height:1.95;}
  .note-mascot{width:44px;}
}

/* ---------- 読者の言葉（/voices/） ---------- */
/* 名前を主役に、運営の言葉をその下に。カードを並べて「声が集まっている」感じを出す。 */
.voices-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px;}
.voice-card{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.voice-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;}
.voice-user{font-family:var(--gothic);font-weight:700;font-size:13px;color:var(--ink);}
.voice-user + .voice-user::before{content:"・";font-weight:400;color:var(--muted);}
.voice-san{font-weight:400;font-size:11px;color:var(--muted);margin-left:1px;}
.voice-date{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;}
.voice-note p{margin:0 0 .7em;font-size:14px;color:var(--ink-soft);line-height:1.95;word-break:auto-phrase;}
.voice-note p:last-child{margin-bottom:0;}
.voice-book{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
}
.voice-cover{flex:0 0 30px;display:block;}
.voice-cover .cover{width:30px;height:43px;border-radius:2px;overflow:hidden;margin:0;padding:0;}
.voice-cover .cover img{width:100%;height:100%;object-fit:cover;display:block;}
.voice-cover .cover-title{font-size:5.5px;padding:2px;line-height:1.25;}
.voice-book-body{min-width:0;}
.voice-book-title{font-family:var(--gothic);font-weight:700;font-size:12.5px;line-height:1.45;display:block;}
.voice-book-author{font-family:var(--gothic);font-size:10.5px;color:var(--muted);display:block;margin-top:1px;}
.voice-book:hover .voice-book-title{text-decoration:underline;}
/* 各セクションから、その項目だけを集めたページへ送る小さなリンク */
.sec-more{
  margin-left:auto;font-family:var(--gothic);font-size:11px;font-weight:700;
  color:var(--red);text-decoration:none;white-space:nowrap;
}
.sec-more:hover{text-decoration:underline;}
@media (max-width:520px){ .sec-more{font-size:10.5px;} }

/* 検索で本文に当たったときの手がかり。何に引っかかったのか見えないと結果を信用できない */
.card-hit{
  font-family:var(--gothic);font-size:11px;line-height:1.7;color:var(--ink-soft);
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  word-break:auto-phrase;
}
.card-hit[hidden]{display:none;}
.card-hit-where{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-size:9.5px;font-weight:700;border-radius:2px;padding:1px 5px;margin-right:6px;
  vertical-align:1px;
}

/* ---------- 本棚の音楽：絞り込み ---------- */
.music-filters{margin:18px 0 22px;display:flex;flex-direction:column;gap:10px;}
.music-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.music-filter-label{
  font-family:var(--gothic);font-size:11px;font-weight:700;color:var(--muted);
  margin-right:2px;flex:0 0 auto;
}
.music-filters .chip{border:1px solid var(--line);cursor:pointer;}
/* .chip の後ろに書いた指定に負けないよう、選択中はここで塗り直す */
.music-filters .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
/* アーティスト名はリンクになったので、下線を出さずに色だけで示す */
a.music-artist{text-decoration:none;}
a.music-artist:hover{text-decoration:underline;}

/* 書籍ページ：下に何が書いてあるかの飛び先 */
.detail-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px;}
.detail-jump a{
  font-family:var(--gothic);font-size:11.5px;font-weight:700;color:var(--ink-soft);
  text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:7px 13px;
  background:var(--card);
}
.detail-jump a::before{content:"↓ ";color:var(--muted);}
.detail-jump a:hover{border-color:var(--ink);color:var(--ink);}
/* 飛んだ先が固定ヘッダーの下に隠れないように */
#note, #voice, #bgm{scroll-margin-top:84px;}

/* ---------- 数字で見る本棚（/numbers/） ---------- */
.num-block{margin:0 0 38px;}
.num-h{font-size:17px;margin:0 0 6px;}
.num-note{font-family:var(--gothic);font-size:11.5px;color:var(--muted);line-height:1.8;margin:0 0 14px;word-break:auto-phrase;}
.num-cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;
}
.num-cards li{
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:14px 12px;text-align:center;
}
.num-n{display:block;font-family:var(--gothic);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink);}
.num-l{display:block;font-family:var(--gothic);font-size:10.5px;color:var(--muted);margin-top:4px;}

/* 保存率の推移。数字だけだと変化が伝わらないので棒でも見せる */
.num-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.num-bars li{display:grid;grid-template-columns:88px minmax(0,1fr) 52px 40px;align-items:center;gap:9px;}
.num-bar-label{font-family:var(--gothic);font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
.num-bar-track{background:var(--line-soft);border-radius:2px;height:12px;overflow:hidden;}
.num-bar-fill{display:block;height:100%;background:var(--red);border-radius:2px;}
.num-bar-val{font-family:var(--gothic);font-weight:700;font-size:12.5px;text-align:right;}
.num-bar-sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right;}

.num-table-wrap{overflow-x:auto;}
.num-table{width:100%;border-collapse:collapse;font-family:var(--gothic);font-size:12.5px;}
.num-table th, .num-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;}
.num-table thead th{font-size:10.5px;color:var(--muted);font-weight:700;border-bottom:1.5px solid var(--line);}
.num-table tbody th{font-weight:700;white-space:nowrap;}
.num-table tbody th a{color:inherit;text-decoration:none;}
.num-table tbody th a:hover{text-decoration:underline;}
.num-table .r{text-align:right;white-space:nowrap;font-family:var(--mono);}
.num-table .strong{font-family:var(--gothic);font-weight:700;color:var(--ink);}
.num-foot{font-family:var(--gothic);font-size:11.5px;color:var(--muted);line-height:1.9;margin-top:8px;word-break:auto-phrase;}
@media (max-width:520px){
  .num-bars li{grid-template-columns:74px minmax(0,1fr) 46px;}
  .num-bar-sub{display:none;}
}

/* ---------- 読みやすさの調整（2026-08-11 実測にもとづく） ---------- */

/* 長い文章の1行が、PCで60〜67文字になっていた。日本語は35〜45文字を超えると
   目が行を見失う。読み物のページだけ、行の長さに上限を置く。
   （em で指定しているので、文字を大きくしても文字数は変わらない） */
.note-text{max-width:40em;}
.page-title-block .lead{max-width:42em;}

/* スマホでの指のあたり。44pxはAppleとGoogleが揃って挙げている最低値。
   タッチの端末だけに効かせる（PCでボタンが間延びしないように）。 */
@media (max-width:759px){
  .chip, .rank-tab, .q-chip{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  /* 文章の中に置いた小さなリンクは、上下に余白を足して押しやすくする */
  .note-more, .sec-more, .see-all, .ig-link{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* 一覧の見出し横に置いた「すべて見る」は、行の高さが崩れないよう詰める */
  .section-head .see-all{min-height:38px;}
}

/* マイ本棚の検索・並び替えも、iOSの自動拡大を避けるため16pxにする（#shelfSearch と同じ） */
#bmSearch{min-height:46px;font-size:16px;}
#bmSort, #shelfSort{font-size:16px;}

/* 画像の縦横比を守る。
   読み込み中のガタつきを抑えるため、<img>に実寸（width/height）を書いた。
   ところがCSS側が幅しか決めていない画像では、書いた高さがそのまま効いて
   縦に伸びた（2026-08-27、ガイドラインのSRくんが56×420pxになった）。

   はじめ img 全体にかける書き方にしたところ、高さを決めている画像
   （ヘッダーのロゴなど）まで巻き込んでトップが崩れた。対象を名指しする。

   .hero-mascot は display:flex で、画像が縦に引き伸ばされる。
   高さを成り行きにするだけでは足りないので、伸びない置き方も指定する。 */
.hero-mascot img, .srb-launcher-char img, .empty-mascot, .ig-photo, .prose img{height:auto;}
.hero-mascot{align-items:flex-end;}
.hero-mascot img{align-self:flex-end;}

/* 文章ページ（このサイトについて・支援）の段落。
   40em（1行40文字）で止めていたが、箱は1000pxあるので右に400pxの
   使われない余白が残り、そこが気になると言われた（2026-08-27）。
   箱の幅いっぱいまで使う。1行は約66文字になる。
   ただし画面がうんと広いときは伸び続けないよう、箱の側（.wrap）が
   1080pxで止めているので、そこが実質の上限になる。 */
.prose p, .prose li{max-width:none;}

/* 編集後記・読者の言葉・BGMを見出し(h2)にした。
   本文14.5pxより確実に大きくしつつ、囲みの中の位置は変えない。 */
h2.editor-note-mark, h2.fav-comment-mark, h2.bgm-mark{
  margin:0;font-size:16px;line-height:1.4;
}

/* 下タブの現在地。色（#f4c430 と #cfc7ae）の明暗差は1.03:1しかなく、
   グレースケールや色覚特性では区別できない。太さと下線でも示す。 */
.tab-bar a.active{font-weight:900;}
.tab-bar a.active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:6px;width:16px;height:2px;background:currentColor;border-radius:1px;
}
.tab-bar a{position:relative;}

/* ---------- SRくんをたためるようにする ---------- */
/* 右下に居座るため、その位置に来たボタンのタップを奪っていた（実測100%）。
   たたむと小さな取っ手だけになり、下のボタンが押せるようになる。 */
.srb-launcher-wrap{position:fixed;right:12px;bottom:72px;z-index:60;}
.srb-launcher-wrap .srb-launcher{position:static;}
.srb-launcher-wrap[hidden]{display:none;}
.srb-launcher-hide{
  position:absolute;top:-2px;right:-2px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease;
}
/* 触っている・見ているときだけ出す。ふだんは絵の邪魔をしない */
.srb-launcher-wrap:hover .srb-launcher-hide,
.srb-launcher-wrap:focus-within .srb-launcher-hide{opacity:1;}
@media (hover:none){ .srb-launcher-hide{opacity:1;} }   /* タッチ端末は常に出す */

.srb-launcher-peek{
  position:fixed;right:10px;bottom:72px;z-index:60;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);
  font-family:var(--gothic);font-weight:900;font-size:12px;cursor:pointer;
  box-shadow:var(--shadow);opacity:.75;
}
.srb-launcher-peek[hidden]{display:none;}
.srb-launcher-peek:hover{opacity:1;}

/* ---------- 読み放題・聴き放題の案内（その本が読めるとは限らない） ---------- */
/* 「読んでみる」からは外し、広告と分かる形でここに置く。
   見出しで嘘をつかないことを優先する。 */
.trial-block{
  margin:26px 0 0;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--radius-card);
}
.trial-block-head{
  font-family:var(--gothic);font-size:13px;font-weight:700;margin:0 0 4px;
  display:flex;align-items:center;gap:8px;
}
.trial-block-ad{
  font-size:9.5px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;
}
.trial-block-note{font-family:var(--gothic);font-size:11px;color:var(--muted);margin:0 0 10px;line-height:1.7;}
.trial-block-links{display:flex;flex-wrap:wrap;gap:8px;}
.trial-block-links .btn{font-size:12px;padding:9px 14px;}

/* ---------- 著者一覧 ---------- */
.chip-row-kana{margin-bottom:6px;}
.chip-row-kana .chip{border:1px solid var(--line);cursor:pointer;}
.chip-row-kana .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.author-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0;}
.author-card-body{min-width:0;}
.author-card-body h3{margin:0;}
#authorGrid .shelf-empty{grid-column:1/-1;}

/* ---------- 特集＝オムニバス盤（ジャケット＋収録曲） ---------- */
.record{
  display:grid;grid-template-columns:1fr;gap:26px;
  padding:26px 0 8px;border-top:2px solid var(--ink);
}
@media (min-width:860px){
  .record{grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);gap:38px;align-items:start;}
}
/* 枠。中身（入稿されたジャケット画像／未設定の空き枠）は
   srb_fair_jacket_frame() が出す。中の文字はジャケット自身の幅を基準に
   決めたいので、画面幅ではなくコンテナ基準（cqw）が効くようにしておく。 */
.record-jacket{position:relative;display:block;container-type:inline-size;}
.record-jacket-link{display:block;text-decoration:none;}
.record-jacket-img,
.record-jacket-blank{
  display:block;width:100%;aspect-ratio:1/1;
  box-shadow:0 10px 26px rgba(28,24,16,.20);border-radius:2px;
  transition:transform .18s ease;
}
/* height 属性（1000）はCSSの指定として効くため、height:auto で打ち消さないと
   aspect-ratio が無視されて縦1000pxの帯になる。属性自体は読み込み中の
   場所取り（レイアウトのずれ防止）に要るので、消さずにここで上書きする。

   contain にしているのは、入稿されたジャケットを絶対に切らないため。
   cover だと正方形からわずかにずれた画像で帯の端が切り落とされる。
   ほぼ正方形なら余白は目に見えないので、切るより余らせる方を選ぶ。 */
/* 枠は正方形。ジャケットの絵も正方形で書き出してもらっているので、余白は出ない。
   正方形でない絵が来たときだけ上下（または左右）が余る。そこは
   ジャケットの紙に近い色にしておく（--card だと、まわりより明るい白い帯に見える）。 */
.record-jacket-img{
  object-fit:contain;height:auto;
  background:#ded2be;
}
.record-jacket-link:hover .record-jacket-img,
.record-jacket-link:hover .record-jacket-blank{transform:translateY(-3px);}
@media (prefers-reduced-motion: reduce){
  .record-jacket-img,.record-jacket-blank{transition:none;}
  .record-jacket-link:hover .record-jacket-img,
  .record-jacket-link:hover .record-jacket-blank{transform:none;}
}

/* ジャケット未入稿のときの空き枠。似せた絵は作らない。
   本物が入ったときに二種類の見た目が混ざるのを避けるため、
   「まだ入っていない」と分かる素の板にしておく。 */
.record-jacket-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;
  padding:8cqw 6cqw;text-align:center;
  background:
    repeating-linear-gradient(-45deg,
      rgba(28,24,16,.028) 0 8px, transparent 8px 16px),
    var(--card);
  border:1px dashed var(--card-edge);box-shadow:none;
}
.record-jacket-blank-title{
  font-family:var(--gothic);font-weight:900;color:var(--ink-soft);
  font-size:clamp(11px,5.4cqw,22px);line-height:1.3;
  word-break:auto-phrase;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.record-jacket-blank-meta{
  font-family:var(--mono);font-size:clamp(7px,2.5cqw,11px);color:var(--muted);
}

/* 特集一覧では、ジャケットの前に「01＿題名」と導入文を出す。
   1本ずつ 題名 → ジャケット → 収録リスト の順で読ませるため、
   このときは .record-title / .record-sub をくり返さない。 */
.record-lead{grid-column:1/-1;}
.record-lead-title{
  font-size:clamp(20px,3.4vw,26px);line-height:1.3;margin:0 0 5px;color:var(--red);
  display:flex;align-items:baseline;gap:9px;
  word-break:auto-phrase;overflow-wrap:break-word;
}
.record-lead-title a{text-decoration:none;color:inherit;}
.record-lead-title a:hover{text-decoration:underline;text-underline-offset:3px;}
.record-lead-no{
  font-family:var(--mono);font-size:15px;color:var(--ink-soft);
  flex:none;letter-spacing:.04em;
}
/* 番号と題名のあいだの罫。「01＿＿題名」に見せる */
.record-lead-no::after{
  content:"";display:inline-block;width:15px;margin-left:6px;
  border-bottom:2px solid currentColor;vertical-align:.22em;opacity:.5;
}
.record-lead-sub{margin:0;font-family:var(--gothic);font-size:13px;color:var(--ink-soft);}
/* 特集一覧の入れもの。.fair-list は本のページで別の使い方をしているので、
   同じ名前にすると中のリンクがカードの見た目になってしまう。 */
.fair-archive{padding:20px 0 40px;}
/* 1本ぶんが縦に長い。次の特集との境目をはっきりさせる */
.fair-archive .record{padding-bottom:26px;}
.record-body{min-width:0;}
.record-title{
  font-size:clamp(22px,4.2vw,30px);line-height:1.28;margin:2px 0 6px;
  color:var(--red);word-break:auto-phrase;overflow-wrap:break-word;
}
.record-title a{text-decoration:none;color:inherit;}
.record-title a:hover{text-decoration:underline;text-underline-offset:3px;}
.record-sub{
  margin:0 0 14px;font-family:var(--gothic);font-size:13px;color:var(--ink-soft);
}
.record-tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.record-track{border-bottom:1px solid var(--line-soft);}
.record-track a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:9px 2px;text-decoration:none;color:inherit;
}
.record-track a:hover{background:rgba(28,24,16,.045);}
.record-no{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.record-track-title{
  font-family:var(--gothic);font-weight:700;font-size:14px;line-height:1.45;
  word-break:auto-phrase;overflow-wrap:break-word;
}
.record-track-author{
  font-family:var(--gothic);font-size:11.5px;color:var(--muted);white-space:nowrap;
}
@media (max-width:459px){
  /* 幅が足りないと著者名が題名を押し潰すので、下へ落とす */
  .record-track a{grid-template-columns:auto minmax(0,1fr);}
  .record-track-author{grid-column:2;white-space:normal;margin-top:1px;}
}
.record-rest{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.record-meta{
  display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.record-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  padding:13px 20px;background:var(--yellow);color:var(--ink);
  font-family:var(--gothic);font-weight:900;font-size:15.5px;text-decoration:none;
  border-radius:3px;box-shadow:0 3px 0 var(--yellow-deep);
}
.record-cta:hover{background:var(--yellow-deep);}
.record-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yellow-deep);}
.record-cta svg{width:22px;height:22px;flex:none;}
.record-cta-arrow{margin-left:auto;padding-left:14px;font-size:20px;line-height:1;}

/* 特集一覧をジャケットの棚として並べる */
.record-shelf{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:24px 18px;
}
.record-shelf a{text-decoration:none;color:inherit;display:block;}
.record-shelf .record-jacket{margin-bottom:10px;}
.record-shelf-title{
  display:block;font-family:var(--gothic);font-weight:900;font-size:14px;line-height:1.4;
}
.record-shelf-meta{
  display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:4px;
}

/* 読者の言葉から、その回のInstagram投稿へ。
   コメントの現物は向こうにあるので、行き先が外部だと分かる形にしておく。 */
.voice-ig{margin:10px 0 0;}
.voice-ig a{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--gothic);font-size:12.5px;font-weight:700;
  color:var(--ink-soft);text-decoration:none;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
}
.voice-ig a:hover{border-color:var(--red);color:var(--red);}
.voice-ig svg{width:15px;height:15px;flex:none;}
.voice-ig-ext{font-size:11px;opacity:.6;}

/* ---------- キーボード操作の入口 ---------- */
/* 見た目には出さず、Tabで焦点が当たったときだけ現れる。
   これが無いと、キーボードだけの人は毎回ナビ13項目を通ってから本文に着く。 */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--ink);color:#f4efe1;padding:10px 16px;border-radius:0 0 4px 4px;
  font-family:var(--gothic);font-weight:700;font-size:14px;text-decoration:none;
  transition:top .12s ease;
}
.skip-link:focus{top:0;}
#main:focus{outline:none;}

/* ---------- 触れる大きさ ---------- */
/* 指の当たり判定は44pxを下限にする。見た目は変えず、
   ::after で透明な当たり判定だけを広げる（並びが崩れないようにするため）。 */
.icon-btn{position:relative;}
.icon-btn::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;
}
/* 文字リンクは高さが15〜18pxしかないものがある。行の高さで稼ぐ。 */
.music-artist, .music-title, .voice-book-title, .card .author,
.detail-more a, .meta-table a{
  display:inline-block;min-height:24px;line-height:1.8;
}
/* 盤（.music-disc）の ::after は中心の穴に使っているので、ここでは触らない。
   盤そのものが58px角あり、指で押すには足りている。 */
.music-play{position:relative;}
.music-play::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;width:100%;height:100%;
}
/* 本のしおり（マイ本棚に入れる）は幅40pxしかない。押しやすくする。 */
.bm-ribbon{position:absolute;}
.bm-ribbon::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;
}
@media (min-width:860px){
  /* PCのナビも高さ37pxで足りていない */
  .desk-nav-item{min-height:44px;display:inline-flex;align-items:center;}
}

/* ---------- 本棚：折り返しの中に本を入れる ---------- */
/* 1440×900 で最初の本が611px下にあり、見えるのが4冊だけだった。
   説明・見出し・チップの高さを削って、1行目が確実に入るようにする。 */
/* 説明を1行にした一覧では、見出しまわりの余白も詰める。
   :has が使えないブラウザ向けに .is-tight も併記しておく。 */
.page-title-block:has(.lead-tight),
.page-title-block.is-tight{padding-top:14px;padding-bottom:2px;}
.page-title-block:has(.lead-tight) .eyebrow,
.page-title-block.is-tight .eyebrow{margin-bottom:2px;}
.page-title-block:has(.lead-tight) h1,
.page-title-block.is-tight h1{margin-bottom:6px;}
.lead-tight{margin-bottom:0;font-size:14.5px;line-height:1.7;}
.filter-hint{
  margin:6px 0 0;font-family:var(--gothic);font-size:11.5px;color:var(--muted);
}
.q-filter-compact{margin-top:14px;}
.q-filter-compact .q-filter-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
.q-filter-compact .q-filter-title{font-size:15px;margin:0;}
.q-filter-compact .q-filter-lead{
  font-family:var(--gothic);font-size:12px;color:var(--muted);
}
.q-filter-compact .see-all{margin-left:auto;}
/* ジャンルはPCでも1行に収めて横スクロールさせる。
   2段に折り返すと87px使い、そのぶん本が押し下げられる。 */
@media (min-width:760px){
  .chip-row-filter{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;
    scrollbar-width:thin;
  }
  .chip-row-filter .chip{flex:0 0 auto;}
}

/* 音楽ページ：押したときに開くSpotifyの枠 */
.music-embed{list-style:none;margin:0 0 10px;padding:0;}
.music-embed iframe{display:block;width:100%;height:152px;border:0;border-radius:12px;}
.music-play.is-playing{background:var(--ink);color:var(--yellow);border-color:var(--ink);}

/* ロゴとページ内ジャンプも44px未満だった。
   ただし display まで書き戻すと、860px以上でロゴを外す指定
   （.brand{display:none}）を打ち消してしまう。実際それでヘッダーに
   ロゴが出続け、「お問い合わせ」がSNSのアイコンに6px重なっていた
   （2026-08-27）。指の当たり判定だけを足し、display には触れない。 */
.brand{position:relative;align-items:center;min-height:44px;}
@media (max-width:859px){ .brand{display:inline-flex;} }
/* ロゴを押せばTOPへ戻れることが分かるように */
.brand{cursor:pointer;}
.brand:hover .brand-logo{opacity:.72;}
.brand-logo{transition:opacity .15s ease;}
.jump-links a, .sec-more, .see-all, .q-chip{
  display:inline-flex;align-items:center;min-height:44px;
}


/* ---------- 本文の見やすさ ---------- */
/* 明朝は横線が細く、スマホだと本文がかすれて見える。
   読ませたい段落だけ、同じ書体の少し太い字面（Hiragino Mincho ProN W6 など）を
   選ばせる。500 は W3 と W6 の中間として解決されるため、太くなりすぎない。 */
.editor-note-text p,
.fav-comment-note p,
.bgm-reason p,
.prose p, .prose li,
.voice-note p{
  /* 読ませたい段落だけゴシックにする。明朝は横線が細く、
     スマホの小さな字ではかすれて読みにくかったため。
     見出し・書名・ひとことは明朝のまま残し、紙の本らしさは保つ。 */
  font-family:var(--gothic);
  font-weight:400;
  letter-spacing:.01em;

  /* text-wrap:pretty を打ち消す。
     この指定の解釈はブラウザで大きく違い、Safariは段落全体の行長を揃えようとして
     すべての行を短くする。その結果、右端に使われない余白が残る。
     Android Chrome はほとんど何もしないため、iPhoneでだけ症状が出ていた。
     長い段落では見た目の利点より、行が詰まって読めることの方が大事なので解除する。
     見出しや短い文（body側の指定）はそのまま残す。 */
  text-wrap:wrap;
}

/* ---------- 狭い画面での折り返し ---------- */
/* word-break:auto-phrase は文節の切れ目でしか折り返さないので、
   次の文節が入らないと行が早く終わる。幅306pxの本文で実測したところ、
   1行あたり平均52px（17%）、最大80pxが空いていた。
   長い段落だけ、狭い画面では通常の折り返しに戻す。
   見出しや短い文は行数が少なく損が出ないので、auto-phrase のままにする。 */
@media (max-width:759px){
  .editor-note-text p,
  .fav-comment-note p,
  .bgm-reason p,
  .prose p, .prose li,
  .comment-item .txt,
  .voice-note p,
  .lead{
    word-break:normal;
    /* 英数字やURLがはみ出さないようにする保険 */
    overflow-wrap:break-word;
    /* pretty は使わない（上のブロックに理由を書いた） */
    text-wrap:wrap;
  }
}

/* 一覧のカードに「このページに何が入っているか」を示す印 */
.card-reads{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.card-reads span{
  font-family:var(--gothic);font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--red);background:rgba(139,46,34,.08);
  border:1px solid rgba(139,46,34,.22);border-radius:2px;padding:2px 5px;line-height:1.5;
}

/* トップの「最新の紹介本」。
   スマホは指でなぞる横1列が扱いやすいが、PCでは横スクロールに気づかれにくい。
   広い画面では折り返して、全部を一度に見せる。
   列数は auto-fill にせず5で固定する。画面幅で3列になったり6列になったりすると、
   最後の行に半端な余りが出て、棚が崩れて見える（冊数の設定も5の倍数にしてある）。 */
@media (min-width:760px){
  .section .shelf-row{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:20px 16px;overflow:visible;
  }
  .section .shelf-row > *{flex:none;width:auto;}
}

/* 一覧カードの紹介日。同じ本の別の回を見分けるための手がかり。
   書名・著者より控えめにして、読む順番を邪魔しない。 */
/* 貸出カードの記録欄。日付を罫線で挟んで、書き込まれた1行に見せる。
   罫線の左に「紹介」と添えて、何の日付かを示す（図書カードの「貸出日」の位置）。 */
.card-date{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:.02em;
  margin:7px 0 2px;padding:4px 0 3px;
  border-top:1px solid var(--card-edge);
  border-bottom:1px dashed var(--card-edge);
}
.card-date::before{
  content:"紹介";
  font-family:var(--gothic);font-size:8.5px;font-weight:700;
  letter-spacing:.08em;color:var(--card-edge);
  flex:none;
}

/* ---------- 支援ページ：オリジナル図書カード ---------- */
.bookcard-lead{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;}
@media (min-width:760px){
  .bookcard-lead{grid-template-columns:1fr minmax(0,0.9fr);gap:30px;}
}
.bookcard-fig{margin:0;}
.bookcard-fig img{
  display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 8px 22px rgba(28,24,16,.16);
}
.bookcard-credit{
  font-family:var(--gothic);font-size:13px;
  background:var(--yellow);color:var(--ink);
  padding:10px 14px;border-radius:3px;display:inline-block;margin-top:4px;
}

/* 4段階の循環。図に頼らず、文字だけでも順番が伝わる形にする。 */
.cycle-list{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;counter-reset:none;
}
@media (min-width:700px){ .cycle-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;} }
.cycle-list li{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--card-edge);border-radius:4px;padding:14px 16px;
}
.cycle-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--yellow);
  font-family:var(--mono);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.cycle-body{display:block;min-width:0;font-family:var(--gothic);font-size:13.5px;line-height:1.8;color:var(--ink-soft);}
.cycle-body strong{display:block;font-size:15px;color:var(--ink);margin-bottom:2px;}
.cycle-fig{margin:0;}
.cycle-fig img{display:block;width:100%;max-width:620px;height:auto;margin:0 auto;}

/* 図書カードをデザインした人の紹介 */
.designer{
  margin-top:22px;padding:18px 20px;
  background:var(--card);border:1px solid var(--card-edge);border-radius:4px;
}
.designer-name{
  font-family:var(--gothic);font-size:18px;margin:0 0 6px;letter-spacing:.01em;
}
.designer-note{
  font-family:var(--gothic);font-size:13.5px;line-height:1.9;color:var(--ink-soft);
  margin:0 0 12px;max-width:44em;
}
.designer-links{display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.designer-links .btn{min-height:44px;}

/* メニューの中で、見出しを持たない項目（PCで独立しているもの）の並び */
.menu-sheet-flat{border-top:1px solid var(--line-soft);padding-top:10px;}

/* SNSのロゴ。名前を並べるより、探しているものが一目で分かる。 */
.sns-icon{display:block;}
.footer-sns,.menu-sheet-sns{display:flex;gap:14px;justify-content:center;margin-top:14px;}
.footer-sns a,.menu-sheet-sns a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--card-edge);background:var(--card);color:var(--ink-soft);
  transition:color .15s,border-color .15s;
}
.footer-sns a:hover,.menu-sheet-sns a:hover{color:var(--red);border-color:var(--red);}
.menu-sheet-sns{margin-top:18px;padding-top:16px;border-top:1px solid var(--card-edge);}

/* ---------- 押した手応え（2026-08-22） ----------
   丸い札（絞り込み・並べ替え・問い・切り替え）は、これまで hover だけで
   :active が無かった。スマホには hover が無いので、押しても何も返らない。
   位置は動かさず、ごくわずかに縮めて「受け取った」ことだけを伝える。 */
.chip:active,
.rank-tab:active,
.q-chip:active,
.toggle-btn:active,
.react-btn:active,
.bm-btn:active,
.srb-choice:active,
.menu-sheet-link:active{transform:scale(.97);}
.chip,.rank-tab,.q-chip,.toggle-btn,.react-btn,.bm-btn,.srb-choice{
  transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* 動きを減らす設定のときは、浮き沈みをすべて止める。
   色と影の変化は残す（どこを触っているかは分かる必要がある）。 */
@media (prefers-reduced-motion: reduce){
  .card,.rank-row,.btn,.chip,.rank-tab,.q-chip,.toggle-btn,
  .react-btn,.bm-btn,.srb-choice,.menu-sheet-link,
  .hub-card,.q-item,.fair-item,.column-card,.goods-card,.shelf-strip-item{
    transition:box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .card:hover,.card:active,
  .rank-row:hover,.rank-row:active,
  .btn:hover,.btn:active,
  .chip:active,.rank-tab:active,.q-chip:active,.toggle-btn:active,
  .react-btn:active,.bm-btn:active,.srb-choice:active,.menu-sheet-link:active,
  .hub-card:hover,.q-item:hover,.fair-item:hover,.column-card:hover,
  .goods-card:hover,.shelf-strip-item:hover{transform:none;}
}

/* 「制作中」の印。まだ完成品ではない画像に重ねる。
   画像に焼き込まず、ここで重ねる。本物が届いたら span を消すだけで外れる。 */
.bookcard-fig{position:relative;container-type:inline-size;}
.wip-stamp{
  position:absolute;top:5%;right:4%;
  display:flex;align-items:center;justify-content:center;
  width:clamp(64px,15%,110px);aspect-ratio:1;
  border:2px solid var(--red);border-radius:50%;
  background:rgba(242,236,221,.92);color:var(--red);
  font-family:var(--gothic);font-size:clamp(11px,2.6cqw,15px);
  font-weight:700;letter-spacing:.06em;line-height:1.2;
  transform:rotate(-8deg);
  box-shadow:0 1px 6px rgba(0,0,0,.08);
}

/* 引き継ぎリンクのお誘い。本棚が貯まったころに、一度だけ下から出る。
   読書の邪魔をしないよう、画面は塞がず、放っておけば引っ込む。 */
.keep-hint{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  transform:translate(-50%,14px);
  width:min(calc(100vw - 28px),420px);z-index:60;
  background:var(--card);border:1px solid var(--ink);border-radius:8px;
  padding:14px 16px;box-shadow:0 8px 24px rgba(28,24,16,.18);
  opacity:0;transition:opacity .2s ease, transform .2s ease;
}
.keep-hint.in{opacity:1;transform:translate(-50%,0);}
.keep-hint-text{
  margin:0 0 12px;font-family:var(--gothic);font-size:13px;line-height:1.75;color:var(--ink-soft);
}
.keep-hint-actions{display:flex;gap:8px;}
.keep-hint-actions .btn{flex:1;justify-content:center;font-size:13px;padding:9px 10px;}
/* スマホは下のタブに重ならないよう、その上に出す */
@media (max-width:759px){
  .keep-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 74px);}
}

/* トップの検索窓。6万人が最初に触る場所に、いちばん使う機能を置く。
   「あの投稿の本、なんだっけ」を確かめに来る人のための入口。 */
.hero-search{
  display:flex;gap:8px;margin:14px 0 6px;max-width:520px;
}
.hero-search input[type="search"]{
  flex:1;min-width:0;
  font-family:var(--gothic);font-size:16px;  /* iOSで拡大されないよう16px以上 */
  padding:13px 15px;
  border:1.5px solid var(--ink);border-radius:4px;
  background:var(--card);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.hero-search input[type="search"]::placeholder{color:var(--muted);}
.hero-search input[type="search"]:focus-visible{
  outline:2px solid var(--red);outline-offset:1px;
}
.hero-search button{
  flex:none;font-family:var(--gothic);font-size:14.5px;font-weight:700;
  padding:13px 20px;border:1.5px solid var(--ink);border-radius:4px;
  background:var(--ink);color:var(--paper);cursor:pointer;
  transition:background .15s ease;
}
.hero-search button:hover{background:var(--red);border-color:var(--red);}
.hero-search-note{
  font-family:var(--gothic);font-size:12px;color:var(--muted);
  margin:0 0 16px;line-height:1.7;
}
.hero-greet strong{font-weight:700;}
.hero-about{font-size:13.5px;color:var(--ink-soft);}
@media (max-width:520px){
  .hero-search{flex-direction:column;gap:7px;}
  .hero-search button{width:100%;}
}

/* ---------- 数字で見る本棚 ----------
   表を眺めさせるのではなく、数字から見えることを読ませる。
   動きは、目を引くためではなく「増えていく」「戻ってきた」という
   数字そのものの性質を見せるために使う。 */
.nb{max-width:680px;margin:0 auto 54px;}
.nb-h{
  font-family:var(--gothic);font-size:19px;font-weight:700;
  margin:0 0 6px;letter-spacing:.01em;text-wrap:balance;
}
.nb-note{font-family:var(--gothic);font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.8;}
.nb-read{
  font-family:var(--gothic);font-size:14.5px;line-height:2;color:var(--ink-soft);
  margin:22px 0 0;
}
.nb-read strong{color:var(--ink);font-weight:700;}
.nb-read a{color:var(--red);}

/* 全体の数字 */
.nb-figures{
  list-style:none;padding:0;margin:0 0 4px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
}
.nb-figures li{display:flex;flex-direction:column;gap:2px;}
.nb-figures b{
  font-family:var(--mono);font-size:clamp(24px,5.6vw,34px);font-weight:700;
  line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.nb-figures span{font-family:var(--gothic);font-size:12.5px;color:var(--muted);}

/* いちばん見られた本 ／ いちばん保存された本 */
.nb-versus{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px;margin-top:4px;
}
.nb-vs{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--card-edge);border-radius:4px;
  padding:16px 16px 14px;transition:transform .15s ease,border-color .15s ease;
}
.nb-vs:hover{transform:translateY(-2px);border-color:var(--ink);}
.nb-vs-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);}
.nb-vs-title{font-family:var(--gothic);font-size:15px;font-weight:700;line-height:1.55;margin:2px 0 4px;}
.nb-vs-num{font-family:var(--mono);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;}
.nb-vs-num i{font-style:normal;font-size:12px;margin-left:3px;color:var(--muted);}
.nb-vs-sub{font-family:var(--gothic);font-size:11.5px;color:var(--muted);}
.nb-vs.is-deep .nb-vs-num{color:var(--red);}
.nb-vs-mid{
  align-self:center;font-family:var(--mono);font-size:18px;color:var(--muted);
}
@media (max-width:600px){
  .nb-versus{grid-template-columns:1fr;}
  .nb-vs-mid{justify-self:center;transform:rotate(90deg);}
}

/* 図 */
.nb-chart{margin:8px 0 0;overflow-x:auto;}
.nb-chart svg{width:100%;height:auto;display:block;min-width:320px;}
.nb-grid{stroke:var(--card-edge);stroke-width:1;}
.nb-axis{stroke:var(--card-edge);stroke-width:1;}
.nb-area{fill:rgba(139,46,34,.07);opacity:0;transition:opacity .5s ease .5s;}
.nb-line{
  fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.nb-dot{fill:var(--paper);stroke:var(--red);stroke-width:2;opacity:0;}
.nb-dot.is-last{fill:var(--red);}
.nb-val{
  font-family:var(--mono);font-size:11px;fill:var(--muted);text-anchor:middle;opacity:0;
  font-variant-numeric:tabular-nums;
}
.nb-val.is-last{fill:var(--red);font-weight:700;font-size:12.5px;}
.nb-x{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle;}
.nb-ax{font-family:var(--gothic);font-size:10.5px;fill:var(--muted);}
.nb-bub{fill:rgba(139,46,34,.16);stroke:var(--red);stroke-width:1.2;opacity:0;transform-origin:center;}
.nb-bub-t{font-family:var(--gothic);font-size:11.5px;fill:var(--ink-soft);opacity:0;}

/* 線と点は、見えたときに描かれる */
[data-reveal].in .nb-line{animation:nbDraw 1.5s cubic-bezier(.4,0,.2,1) forwards;}
[data-reveal].in .nb-area{opacity:1;}
[data-reveal].in .nb-dot{animation:nbPop .35s ease forwards;animation-delay:calc(.28s * var(--i) + .35s);}
[data-reveal].in .nb-val{animation:nbUp .4s ease forwards;animation-delay:calc(.28s * var(--i) + .5s);}
[data-reveal].in .nb-bub{animation:nbPop .45s cubic-bezier(.34,1.4,.64,1) forwards;animation-delay:calc(.09s * var(--i));}
[data-reveal].in .nb-bub-t{animation:nbUp .4s ease forwards;animation-delay:calc(.09s * var(--i) + .2s);}
@keyframes nbDraw{to{stroke-dashoffset:0;}}
@keyframes nbPop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
@keyframes nbUp{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* 問いの一覧 */
.nb-qlist{
  list-style:none;padding:0;margin:20px 0 0;
  display:flex;flex-direction:column;gap:1px;
  background:var(--card-edge);border:1px solid var(--card-edge);border-radius:4px;overflow:hidden;
}
.nb-qlist li{
  background:var(--card);padding:11px 14px;
  display:grid;grid-template-columns:minmax(96px,auto) 1fr 62px 46px;align-items:center;gap:12px;
}
.nb-q-name{font-family:var(--gothic);font-size:13.5px;font-weight:700;}
.nb-q-bar{height:7px;background:var(--paper);border-radius:4px;overflow:hidden;}
.nb-q-bar i{display:block;height:100%;background:var(--red);opacity:.55;width:0;transition:width .9s cubic-bezier(.4,0,.2,1);}
[data-reveal].in .nb-q-bar i{width:var(--w,0);}
.nb-q-rate{font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;}
.nb-q-rate i{font-style:normal;font-size:10px;color:var(--muted);margin-left:1px;}
.nb-q-n{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;}
@media (max-width:560px){
  .nb-qlist li{grid-template-columns:1fr 56px 42px;gap:8px;}
  .nb-q-bar{grid-column:1/-1;order:3;}
}

.nb-end{border-top:1px solid var(--card-edge);padding-top:26px;}
.nb-end .num-foot{margin-top:18px;}

/* 動きを控えたい人には、動かさずに結果だけ見せる */
@media (prefers-reduced-motion:reduce){
  .nb-line{stroke-dashoffset:0;}
  .nb-area,.nb-dot,.nb-val,.nb-bub,.nb-bub-t{opacity:1;}
  [data-reveal].in .nb-line,[data-reveal].in .nb-dot,[data-reveal].in .nb-val,
  [data-reveal].in .nb-bub,[data-reveal].in .nb-bub-t{animation:none;}
  .nb-q-bar i{transition:none;}
}
.nb-lead{stroke:var(--card-edge);stroke-width:1;opacity:0;}
[data-reveal].in .nb-lead{animation:nbUp .4s ease forwards;animation-delay:calc(.09s * var(--i) + .2s);}
@media (prefers-reduced-motion:reduce){.nb-lead{opacity:1;}}

/* ---------- 手ざわり ----------
   本を画面で見るとき、いちばん失われるのは物としての手ごたえ。
   平らな長方形に見えているうちは、書影は「画像」のままで「本」にならない。 */

/* 1. 本の厚み。左端（背表紙側）に陰を落とし、右下に本の影を伸ばす。
      正面から本を見たときの立ち方に近づける。 */
.cover.photo{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 1px 2px rgba(28,24,16,.10),
    0 6px 14px rgba(28,24,16,.10);
}
.cover.photo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7%;z-index:2;
  background:linear-gradient(90deg,
    rgba(28,24,16,.20) 0%, rgba(28,24,16,.07) 45%, rgba(28,24,16,0) 100%);
  pointer-events:none;
}

/* 2. 紙のざらつき。画面全体に薄くのせる。
      色を変えず、粒だけを足す。強くすると文字が読みにくくなるので、ごく薄く。 */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.038;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}



/* ---------- 紙の古び ----------
   図書館のカードは何年も棚にある。日に焼け、指で触られ、しみが出る。
   ただし同じ古び方が274枚並ぶと、それは古びではなく模様になる。
   本ごとに6通りへ散らす（.age-0 〜 .age-5、本のIDから決まるので並べ替えても変わらない）。 */

/* 記入欄の罫線。何度も貸し出された跡としてうっすら敷く。
   文字の下に来るので、読める濃さを超えない。 */
.card{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 21px,
    rgba(28,24,16,.026) 21px, rgba(28,24,16,.026) 22px);
  background-position:0 34px;
}

/* 日焼けとしみ。しみは紙の中で薄く広がる茶で、位置と濃さを1枚ずつ変える。
   罫線は下に敷いたまま、上にしみを重ねる。 */
.card.age-1{
  background-color:#f8f4ea;
  background-image:
    radial-gradient(ellipse 46px 34px at 84% 30%, rgba(150,112,58,.050), transparent 72%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(28,24,16,.026) 21px,rgba(28,24,16,.026) 22px);
}
.card.age-2{
  background-color:#f7f2e6;
  background-image:
    radial-gradient(ellipse 30px 44px at 8% 72%, rgba(150,112,58,.055), transparent 70%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(28,24,16,.026) 21px,rgba(28,24,16,.026) 22px);
  border-color:#d7ceba;
}
.card.age-3{
  background-image:
    radial-gradient(ellipse 54px 26px at 62% 93%, rgba(150,112,58,.042), transparent 74%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(28,24,16,.026) 21px,rgba(28,24,16,.026) 22px);
}
.card.age-4{
  background-color:#f9f5ec;
  background-image:
    radial-gradient(ellipse 26px 26px at 92% 62%, rgba(150,112,58,.060), transparent 68%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(28,24,16,.026) 21px,rgba(28,24,16,.026) 22px);
}
.card.age-5{
  background-image:
    radial-gradient(ellipse 38px 30px at 16% 14%, rgba(150,112,58,.048), transparent 72%),
    repeating-linear-gradient(to bottom,transparent 0,transparent 21px,rgba(28,24,16,.026) 21px,rgba(28,24,16,.026) 22px);
  border-color:#d9d0bc;
}
/* age-0 は、まだ新しいカード。罫線だけで、しみは無い。 */

/* 綴じ穴は、しみや罫線の上に出す */
.card::before,.card::after{z-index:3;}

/* ---------- 手で引いた線 ----------
   同じペンで引いても、引くたびに手の位置は少しずれる。
   線の高さと濃さを、本ごとに変える（.age-0 〜 .age-5）。
   書体は足さない。手書き風の日本語書体は1.1MB要り、
   このサイトの1ページ（73KB）を16倍にしてしまう。 */
.card.age-1 .hook{background-image:linear-gradient(transparent 12%,rgba(244,196,48,.54) 12%,rgba(244,196,48,.54) 90%,transparent 90%);}
.card.age-2 .hook{background-image:linear-gradient(transparent 7%,rgba(244,196,48,.63) 7%,rgba(244,196,48,.63) 94%,transparent 94%);}
.card.age-3 .hook{background-image:linear-gradient(transparent 11%,rgba(240,190,52,.56) 11%,rgba(240,190,52,.56) 91%,transparent 91%);}
.card.age-4 .hook{background-image:linear-gradient(transparent 8%,rgba(244,196,48,.50) 8%,rgba(244,196,48,.50) 95%,transparent 95%);}
.card.age-5 .hook{background-image:linear-gradient(transparent 13%,rgba(246,200,58,.60) 13%,rgba(246,200,58,.60) 89%,transparent 89%);}

/* ---------- 角の擦れ ----------
   紙の角は、指で触られるうちに丸くなる。ただし4隅が同じようには丸まらない。
   よく持たれる角ほど落ちる。楕円で指定して、隅ごとに曲がり方を変える。
   古びと同じく本ごとに6通り（.age-0 〜 .age-5）。 */
.card{border-radius:4px 6px 5px 7px / 6px 4px 7px 5px;}
.card.age-1{border-radius:7px 4px 6px 5px / 5px 7px 4px 6px;}
.card.age-2{border-radius:9px 5px 4px 8px / 6px 9px 5px 4px;}   /* いちばん古い */
.card.age-3{border-radius:5px 8px 4px 6px / 7px 4px 8px 5px;}
.card.age-4{border-radius:6px 5px 8px 4px / 4px 8px 5px 7px;}
.card.age-5{border-radius:8px 6px 5px 9px / 5px 6px 9px 4px;}

/* 書影も紙。カードほどは触られないので、丸みは控えめに。 */
.cover{border-radius:2px 3px 2px 4px / 3px 2px 4px 2px;}

/* 請求記号の枠と綴じ穴は、印刷と穴あけの跡なので、擦れない。そのまま。 */

/* ジャケットが届いていない特集の印。
   図書カードの「制作中」と同じ考え。無印のままだと抜け落ちに見える。 */
.record-jacket-wip{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:10px;padding:3px 9px 2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--red);border:1.2px solid var(--red);border-radius:1px;
  transform:rotate(-4deg);opacity:.66;
}

/* 本が1冊も入っていないときの、引き継ぎ説明。
   持ち出す本が無いうちは、持ち出し方の話より先に見せるものがある。 */
.bm-keep.is-folded{padding:12px 14px;}
.bm-keep.is-folded .bm-keep-note,
.bm-keep.is-folded .bm-keep-actions,
.bm-keep.is-folded .bm-keep-hint{display:none;}
.bm-keep.is-folded .bm-keep-title{
  margin:0;font-size:12.5px;font-weight:400;color:var(--muted);
  display:flex;align-items:center;gap:7px;
}
.bm-keep.is-folded .bm-keep-title::before{
  content:"";flex:none;width:13px;height:13px;border-radius:2px;
  border:1.5px solid var(--card-edge);
}

/* ---------- 紙に出したとき ----------
   読みたい本の一覧を刷って本屋へ持って行く。この本棚と相性のいい使い方なのに、
   いままで想定していなかった。メニューもチャットも一緒に出ていた。 */
@media print{
  /* 画面のための仕掛けは、紙には要らない */
  .site-header,.site-footer,.tab-bar,.menu-sheet,.srb-launcher,.srb-chat,
  .aff-banner,.skip-link,.bm-ribbon,.bm-tip,.keep-hint,.react-row,
  .read-links,.trial-block,.ad-badge,.sub-banners,.comment-form,
  .filter-bar,.chip-row,.shelf-more-row,#shelfMore,.bm-keep-actions{
    display:none !important;
  }
  body::after{display:none;}          /* 紙のざらつきは、紙には不要 */
  body{background:#fff;color:#000;font-size:11pt;line-height:1.7;}
  main,.wrap{max-width:none;padding:0;margin:0;}

  /* カードは1枚ずつ切り離せるように、途中で改ページさせない */
  .card,.lend-card,.note-item,.voice-item{
    break-inside:avoid;page-break-inside:avoid;
    box-shadow:none;border:1px solid #999;background:#fff;
  }
  .card{background-image:none;}
  .cover,.cover.photo{box-shadow:none;}
  .cover.photo::before{display:none;}

  /* リンク先を紙にも残す。手元で読むときに辿れるように。 */
  .detail-body a[href^="http"]::after{
    content:" <" attr(href) ">";
    font-size:8pt;color:#555;word-break:break-all;
  }
  /* ただし本文中の内部リンクまで出すと読みにくい */
  a[href^="/"]::after,a[href*="stereorynch.jp"]::after{content:"";}

  h1,h2,h3{break-after:avoid;page-break-after:avoid;}
  .hook{background:none !important;border-bottom:1.5px solid #999;}
}

/* ---------- 編集後記を、紙に ----------
   サイトでいちばん長い文章が載る場所なのに、罫線で区切られているだけだった。
   1本ずつが1枚の紙になると、読む姿勢が変わる。
   本のカードと同じ紙にすると重いので、こちらは薄く敷いた便箋にする。 */
.note-entry{
  position:relative;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:var(--radius-card);
  box-shadow:0 1px 4px rgba(28,24,16,.07);
  padding:20px 20px 20px 22px;
  margin-bottom:22px;
  /* 便箋の罫線。文字の下に敷くので、読める濃さを超えない */
  background-image:repeating-linear-gradient(
    to bottom,transparent 0,transparent 27px,
    rgba(28,24,16,.024) 27px,rgba(28,24,16,.024) 28px);
}
/* 綴じ穴のかわりに、左端に綴じ跡の線を1本 */
.note-entry::before{
  content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;
  background:rgba(139,46,34,.16);
}
.note-date{
  display:inline-block;padding:2px 8px 1px;
  background:var(--paper);border:1px solid var(--card-edge);border-radius:1px;
}

/* ---------- 読者の言葉を、届いた紙に ----------
   人からもらった言葉なので、こちらが書いた紙とは別の見え方にする。
   角を1つだけ折った、手渡しのメモ。 */
.voice-card{
  position:relative;
  border-radius:3px 3px 3px 14px / 3px 3px 3px 14px;
  background-image:repeating-linear-gradient(
    to bottom,transparent 0,transparent 25px,
    rgba(28,24,16,.02) 25px,rgba(28,24,16,.02) 26px);
}
/* 左下の折り返し */
.voice-card::after{
  content:"";position:absolute;left:0;bottom:0;width:15px;height:15px;
  background:linear-gradient(45deg,var(--paper) 50%,rgba(28,24,16,.10) 50%);
  border-radius:0 0 0 3px;
}
.voice-user{
  /* 送り主の名前は、宛名のように少し大きく */
  font-size:13.5px;letter-spacing:.01em;
}

/* ---------- ここで終わり ----------
   編集後記に「本は閉じられるからいい」と書かれている。
   それなのにページは下まで続いていた。読み終えた人が離れられる場所を置く。
   目立たせない。押させたいボタンではなく、置いてあるだけの出口。 */
.book-close{
  margin:44px 0 8px;padding:26px 20px 24px;
  border-top:1px solid var(--line);
  text-align:center;
}
.book-close-line{
  font-family:var(--mincho);font-size:15px;line-height:1.9;
  color:var(--ink-soft);margin:0 0 4px;letter-spacing:.02em;
}
.book-close-note{
  font-family:var(--gothic);font-size:12px;color:var(--muted);margin:0 0 20px;
}
.book-close-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.book-close-btn{
  font-family:var(--gothic);font-size:13px;font-weight:700;
  padding:11px 20px;border-radius:3px;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  transition:background .15s ease,color .15s ease;
}
.book-close-btn.is-quiet{
  background:none;color:var(--ink-soft);border-color:var(--card-edge);
}
.book-close-btn.is-quiet:hover{border-color:var(--ink);color:var(--ink);}
/* 閉じたあと。続きを勧めるものを、この画面から下げる。
   「閉じられる」と言いながら次を出すのでは、閉じたことにならない。 */
.is-book-closed .srb-launcher,
.is-book-closed .tab-bar,
.is-book-closed .site-footer .footer-links{opacity:.25;pointer-events:none;}
.book-close.is-closed{border-top-color:var(--card-edge);}
.book-close.is-closed .book-close-line{color:var(--muted);}

/* ---------- カードを引き抜く ----------
   一覧から本のページへ移るとき、画面が入れ替わるだけだった。
   目録から1枚引き抜いた感じにする。ブラウザの標準の仕掛けを使うので、
   対応していないブラウザでは、これまでどおり普通に切り替わる。 */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:srbOut .22s ease both;}
::view-transition-new(root){animation:srbIn .26s ease both;}
@keyframes srbOut{to{opacity:0;transform:translateY(-6px);}}
@keyframes srbIn{from{opacity:0;transform:translateY(8px);}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}

/* ---------- 読み終えた本に、返却の印 ----------
   マイ本棚には4つの状態があるのに、読了だけ見た目が同じだった。
   貸出カードなら、返ってきた本には返却印が押される。 */
.card.is-done{opacity:.88;}
.card.is-done::after{
  /* 綴じ穴の2つ目に代えて、返却印を出す */
  content:"返却";
  width:auto;height:auto;left:auto;right:12px;top:44px;
  border-radius:1px;background:none;box-shadow:none;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--ok,#4a6b3d);border:1.2px solid var(--ok,#4a6b3d);
  padding:2px 5px 1px;transform:rotate(-8deg);opacity:.6;
  display:flex;align-items:center;justify-content:center;
}

/* はじめて1冊を入れたときだけ出る知らせ。
   指を置く動作のないスマホでは、しおりの説明が出ないため。 */
.first-save{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);
  transform:translate(-50%,10px);z-index:70;
  width:min(calc(100vw - 32px),340px);
  display:flex;align-items:flex-start;gap:10px;
  background:var(--ink);color:var(--paper);
  padding:13px 15px;border-radius:5px;
  box-shadow:0 8px 22px rgba(28,24,16,.26);
  opacity:0;transition:opacity .22s ease,transform .22s ease;
}
.first-save.in{opacity:1;transform:translate(-50%,0);}
.first-save-mark{
  flex:none;width:19px;height:19px;border-radius:50%;
  background:var(--paper);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;margin-top:1px;
}
.first-save-text{font-family:var(--gothic);font-size:12.5px;line-height:1.75;}
.first-save-text a{color:var(--yellow);}
@media (min-width:760px){
  .first-save{bottom:24px;}
}
@media (prefers-reduced-motion:reduce){
  .first-save{transition:none;}
}

/* ---------- レコード屋の棚 ----------
   盤が並ぶ場所なので、木の箱に入れて、年で仕切る。

   最初は箱ぜんぶに木目を敷いたが、それでは棚に見えず、
   薄い木目が文字の下に残って本文が読みにくくなった（2026-08-23に指摘を受けた）。
   木は「枠」だけに置く。中は紙のまま、文字はいっさい柄の上に乗せない。
   奥行きは、上の縁・左右の板・手前の前板の三つで出す。 */

.music-year{
  --wood:#8b6b45;
  --wood-hi:#a8875d;
  --wood-lo:#5f4629;

  position:relative;
  margin:46px 0 0;
  /* この余白のぶんだけ木があらわれる。中身には一切かからない。 */
  padding:16px 13px 0;
  border-radius:3px;
  background:
    /* 板目 */
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.13) 0 1px,
      rgba(255,255,255,.06) 1px 2px,
      transparent 2px 10px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 42%, var(--wood-lo));
  box-shadow:
    0 12px 22px -10px rgba(28,24,16,.42),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

/* 仕切り板。年の見出しを、箱の縁から上に立てる。
   レコード屋で指をかけて手繰る、あの札。下半分は箱に挿さっている。 */
.music-year-head{
  position:absolute;left:17px;top:-16px;z-index:2;
  display:inline-flex;align-items:baseline;gap:9px;
  margin:0;padding:5px 13px 5px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--card);
  border:1px solid rgba(0,0,0,.26);
  border-bottom:0;
  border-radius:3px 3px 0 0;
  box-shadow:0 -2px 5px rgba(28,24,16,.16);
}
.music-year-head span{font-size:10.5px;color:var(--muted);font-weight:400;}

/* 箱の中。ここは紙。柄を敷かないので、文字はふだんの本文と同じ読みやすさになる。
   上に落ちる影だけで、覗き込んでいる奥行きを出す。 */
.music-year .music-list{
  position:relative;
  max-width:none;
  padding:4px 14px 10px;
  background:var(--card);
  border-radius:2px 2px 0 0;
  box-shadow:inset 0 7px 11px -7px rgba(28,24,16,.5);
}
.music-year .music-row{
  max-width:none;
  border-bottom:1px dashed var(--card-edge);
}
.music-year .music-row:last-child{border-bottom:0;}

/* 前板。盤より手前にある板なので、影は上に向かって落ちる。 */
.music-year::after{
  content:"";display:block;height:18px;margin:0 -13px;
  border-radius:0 0 3px 3px;
  background:
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.13) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--wood-hi), var(--wood-lo));
  box-shadow:
    0 -4px 7px rgba(28,24,16,.3),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* 盤は箱の中で少し立っている。指を置くと、こちらへ引き出される。 */
.music-disc{transition:transform .18s ease, box-shadow .18s ease;}
.music-row:hover .music-disc{
  transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 5px 12px rgba(28,24,16,.34), inset 0 0 0 1px rgba(255,255,255,.06);
}
@media (prefers-reduced-motion:reduce){
  .music-disc{transition:none;}
  .music-row:hover .music-disc{transform:none;}
}

/* 絞り込みの札。店で棚に挿してある手書きの仕切り札。
   紙の色を本文と同じにすると背景に沈むので、カードの色を使う。 */
.music-filters .chip{
  background:var(--card);
  border:1px solid rgba(126,96,58,.4);
  border-radius:2px 2px 4px 4px;
  box-shadow:0 1px 2px rgba(28,24,16,.09);
}
.music-filters .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.music-filter-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:2px 7px;border:1px dashed rgba(126,96,58,.4);border-radius:2px;
}

@media (max-width:640px){
  /* 箱の板のぶんだけ中身が狭くなる。曲名が折れないよう、板は薄く彫る。 */
  .music-year{margin-top:42px;padding:12px 7px 0;}
  .music-year .music-list{padding:2px 7px 8px;}
  .music-year-head{left:11px;}
  .music-year::after{margin:0 -7px;height:14px;}
}


/* ---------- 背景：ざらついた再生紙 ----------
   ざらついた再生紙。柄ではなく、紙そのものの表面。

   一度グレーの砂壁になった。原因は、白黒のノイズをそのまま掛けたこと。
   白黒を掛けると彩度が抜けて、紙の温かい色ごと灰色に寄る。
   再生紙は灰色ではない。地は温かいまま、粒だけが浮いている。

   だから地合いのノイズは、
     ・暗くなりすぎないよう各チャンネルの幅を圧縮し（.78〜1.0 など）
     ・青だけ多めに落として、へこみが茶色く見えるようにする
   ちり（漂白しきらなかった繊維の粒）は、しきい値で飛び飛びにして、
   色を固定する。濃い粒と茶の粒の二種類。実際の再生紙もそう見える。

   いまの紙の粒（body::after）は目がずっと細かい。
   細かい粒と粗い粒が両方あるのは実際の紙と同じなので、そのまま残す。 */

/* 紙の上に刷ってあるので、カードもヘッダーも同じ紙の上にある。
   背面に置くとヘッダーだけ別の紙に見えたので、いちばん上に重ねる（body::after と同じ扱い）。 */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.10' numOctaves='1' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .55 0 0 0 0 .40 0 0 0 0 .20 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23k)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.26' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .34 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='j'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.22' intercept='.78'/%3E%3CfeFuncG type='linear' slope='.27' intercept='.73'/%3E%3CfeFuncB type='linear' slope='.34' intercept='.66'/%3E%3CfeFuncA type='linear' slope='1' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23j)'/%3E%3C/svg%3E");
  background-size:620px 620px, 400px 400px, 300px 300px;
}

@media print{ body::before{display:none;} }

/* ヘッダーのマイ本棚。件数は小さな丸で出す（数字を出すと横に伸びて、
   丸いボタンが並んでいるところで一つだけ形が変わってしまう）。 */
.icon-btn-shelf{position:relative;}
.icon-btn-shelf.active{border-color:var(--red);color:var(--red);}
.nav-badge-dot{
  position:absolute;top:-1px;right:-1px;margin:0;
  min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--red);color:var(--paper);
  font-family:var(--mono);font-size:9px;line-height:15px;text-align:center;
  border:1.5px solid var(--card);
}
.nav-badge-dot:empty{display:none;}
/* スマホは下タブにマイ本棚があるので、ヘッダーには出さない（同じものが二つ並ぶ）。 */
@media (max-width:859px){ .icon-btn-shelf{display:none;} }

/* 話題ランキングのページ。トップの10冊とちがい、全部が並ぶ。
   10位ごとに間を空けて、いま何位のあたりを見ているか分かるようにする。 */
.rank-count{
  display:block;margin-top:4px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
}
.rank-list-full > li:nth-child(10n+1):not(:first-child){
  margin-top:22px;border-top:1px dashed var(--card-edge);padding-top:22px;
}
/* ランキングのページでは、タブはボタンではなくリンク（開いているものだけを出すため）。
   見た目はトップのタブとそろえる。 */
a.rank-tab{text-decoration:none;display:inline-flex;align-items:center;}


/* ---------- ヒーローの中身を中央揃えにする（2026-08-24） ----------
   PCだけ。置き場所は変えず、左の欄の中で内容を中心へ寄せる。
   ロゴだけ左端にあって文章が続く形は、視線の起点が二つに割れていた。

   スマホには当てない。あちらは1列で、右下にSRくんが立っている。
   中央に寄せるとボタンが重なり、逃がすと見出しにかぶる。
   もともと収まっていたので、そのままにしておく。 */
@media (min-width:760px){
  .hero-copy{text-align:center;}
  .hero-logo{margin-left:auto;margin-right:auto;}
  /* 中央寄せは1行が長いほど読みにくい。行の幅を抑えて、その塊を中心に置く。 */
  .hero-copy .lead{margin-left:auto;margin-right:auto;max-width:44ch;}
  .hero-search{margin-left:auto;margin-right:auto;max-width:520px;}
  .hero-search-note{margin-left:auto;margin-right:auto;max-width:46ch;}
  .hero-copy .cta-row{justify-content:center;}
}

/* ロゴが出るのは860px以上。そこでは、ロゴが看板で、見出しはその添え書き。
   同じ大きさで並ぶと、どちらを先に読むのか決まらない（2026-08-24）。 */
@media (min-width:860px){
  .hero h1{font-size:clamp(21px,2.1vw,26px);line-height:1.5;}
}
/* 特集の共有ボタン。トップの「特集を読む」と同じ場所に置くので、上の余白もそろえる。 */
.record-share{margin-top:16px;margin-bottom:0;}

/* 特集一覧の説明文。読みものなので、行の幅を抑えて読みやすくする。 */
.fair-about{
  margin:0 0 8px;padding:20px 20px 4px;
  background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--radius-card);
  box-shadow:0 1px 4px rgba(28,24,16,.06);
}
/* 読みやすい幅（62ch）で止めると、広い画面では箱の右に大きな空白が残る。
   ここは箱の中の短い説明なので、右まで使い切る（2026-08-28）。 */
.fair-about p{margin:0 0 16px;max-width:none;font-size:15px;}
@media (max-width:759px){ .fair-about{padding:16px 16px 2px;} .fair-about p{font-size:14.5px;} }

/* 区画の見出しと説明を、同じ行に並べる。
   別々の行にすると、短い説明でも1行ぶんの高さを取り、区画の頭が重くなる。
   狭い画面では説明が折り返して2行目に落ちる（読める幅を優先する）。 */
.section-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;}
.section-note{
  font-family:var(--mincho);font-size:13.5px;color:var(--muted);
  line-height:1.7;flex:1 1 auto;min-width:0;
}
@media (max-width:759px){ .section-note{font-size:13px;} }

/* ---------- ヒーローの入口（2026-08-24） ----------
   細かい言葉での検索はSRくん（チャット）が受け持つ。
   ここは初めて来た人の入口なので、ざっくりした道を3本だけ、縦に並べる。
   横に並べると1本あたりが小さくなり、どれも同じ重さに見えなくなる。 */
.hero-ways{
  display:flex;flex-direction:column;gap:10px;
  margin:22px 0 0;max-width:340px;
}
.hero-way{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 20px;
  font-family:var(--gothic);font-weight:700;font-size:15px;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);text-decoration:none;
  border:1.5px solid var(--ink);border-radius:2px;
  box-shadow:0 2px 0 rgba(28,24,16,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hero-way:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(28,24,16,.35);}
/* おみくじの入口。数秒おきに、淡い光がすっと走る。押したくなる程度、主張はしない */
.hero-way-omikuji{position:relative;overflow:hidden;}
.hero-way-omikuji::after{
  content:"";position:absolute;top:0;bottom:0;left:-45%;width:26%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,240,190,.4) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);pointer-events:none;
  animation:heroShine 4.6s ease-in-out infinite;
}
@keyframes heroShine{
  0%,74%{left:-45%;}
  90%,100%{left:135%;}
}
.hero-way:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(28,24,16,.35);}
@media (prefers-reduced-motion:reduce){
  .hero-way{transition:none;} .hero-way:hover{transform:none;} .hero-way-omikuji::after{animation:none;display:none;}
}
/* PCは中央そろえなので、3本の帯そのものも中心に置く */
@media (min-width:760px){ .hero-ways{margin-left:auto;margin-right:auto;} }
/* スマホは右下にSRくんが立つ。その幅を避けて、帯を左に寄せる */
/* スマホは、SRくんが3本の帯の右に立つ。
   帯を細く低くして、そのぶんSRくんを大きくする。
   画面の最初に見えるところなので、縦を詰めて下の書影まで届かせる（2026-08-24）。 */
@media (max-width:759px){
  .hero{padding:18px 0 22px;}
  .hero h1{font-size:clamp(23px,6.4vw,30px);}
  .hero-greet{font-size:14.5px;}
  /* 見出しと挨拶は全幅のまま1行。挨拶の終わりは黄色い丸にかかるが、
     濃い文字が黄色に乗るだけなので読める。白い頭までは届かない。 */
  .hero-ways{max-width:56%;gap:8px;margin-top:14px;}
  .hero-way{
    min-height:44px;padding:10px 12px;font-size:13.5px;
    box-shadow:0 2px 0 rgba(28,24,16,.3);
  }
  /* SRくんは3本の帯の右。帯にかからない幅にとどめる。 */
  .hero-mascot{width:38%;max-width:170px;right:-6px;bottom:14px;}
  /* 黄色い丸は、SRくんの後ろに回す */
  .hero-yellow{right:-34px;top:auto;bottom:40px;width:190px;height:190px;}
}
/* 「ジャンルから探す」で飛んできたとき、上のヘッダーに隠れないようにする。 */
/* トップの「ジャンルから探す」は /shelf/#genre へ飛ぶ。
   その着地点は、上に貼り付く検索バー（.filter-bar）の下でなければならない。
   86pxはヘッダーぶんしか見ていなかったため、チップ列が検索バーの裏に
   隠れて、押せるものが何も見えない画面になっていた（2026-08-26に判明）。
   .filter-bar は top:57px に貼り付き、高さはスマホ127px・PC73px。
   その下端＋少しの余白を取る。 */
#genre{scroll-margin-top:196px;}
@media (min-width:760px){ #genre{scroll-margin-top:142px;} }

/* 920px未満の帯だけ、メニューを詰める。
   ロゴを顔だけにして間を広げたが、この幅では「お問い合わせ」が
   右のアイコンに重なった。指定の順番の関係で、ここは
   min-width:860px のかたまりより後ろに置く必要がある（2026-08-29）。 */
@media (min-width:860px) and (max-width:919px){
  .desk-nav{
    gap:4px 14px;
    font-size:12px;
    margin-left:14px;
    margin-right:14px;
  }
  .brand-mark{height:30px;width:30px;}
  .icon-btn{width:30px;height:30px;}
  .header-actions{gap:6px;}
  .header-inner{padding-left:16px;padding-right:16px;}
}

/* 新着の印。本のカードは紹介日の横、コラムは日付の横に付く（7日以内）。
   小さくても目に留まるよう、影を落として静かに脈打たせる */
.card-new{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
  background:#e02b2b;color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;
  line-height:1.6;vertical-align:1px;box-shadow:0 2px 7px rgba(224,43,43,.4);
  animation:srbNewPulse 1.6s ease-in-out infinite;}
@keyframes srbNewPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.card-new{animation:none;}}