@charset "utf-8";
/* ツギドレ Phase2 作品棚プロトタイプ（第3.1回・一覧の表示調整）
   基準デザイン：案3「無機質なグリッド」＝ Phase1 第8.1回 公開前整理
   明るい無彩色／角丸なし／細い罫線／左揃え／黒地の主要ボタン

   第1回からの変更
   - コンテンツ幅 1120px → 1320px
   - カード幅 176px → 264px（スマホ 148px → 236px）
   - 棚の下の情報帯（152px固定）を廃止し、ページ共通の浮動パネル1個に置き換え
   - 冒頭を2段組にして圧縮

   第2.1回の変更（この3点だけ）
   1. 浮動詳細を元カードの作品名・出演者まで覆う高さにし、元カードの文字は隠す
   2. スマホの冒頭を圧縮し、注意書きを「短い本文＋詳しく見る」にする
   3. ヘッダーをスクロール方向で出し入れするスマートヘッダーにする
   このファイルは棚画面に必要な部分だけを自己完結で持つ。参照元は変更していない。 */

:root{
  --bg:#ececeb;
  --surface:#f7f7f6;
  --surface-2:#e3e4e3;
  --ink:#15171a;
  --ink-soft:#4d5157;
  --ink-mute:#61666d;
  --line:#cfd0cf;
  --line-soft:#dedfde;
  --slate:#3c4e5c;
  --focus:#3c4e5c;

  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Courier New",monospace;

  /* 1440px幅で左右に52pxずつ残し、内側 1264px を作品棚に使う */
  --wrap:1320px;
  --pad:28px;
  --label:200px;

  /* 大きなパッケージ。264 + 24 で1枚あたり288px、内側1264pxに4.4枚が入る */
  --card-w:264px;
  --card-gap:24px;
  --pkg-ratio:210 / 300;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.95;
  letter-spacing:.02em; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
}
body[data-age-open="true"]{overflow:hidden;}
main{flex:1 0 auto;}
a{color:inherit;}
img{max-width:100%;}
[hidden]{display:none !important;}
h1,h2,h3,h4{letter-spacing:.02em;}

.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(21,23,26,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,26,.03) 1px, transparent 1px);
  background-size:80px 80px;
}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);}
main,footer{position:relative; z-index:1;}

.tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--ink-mute); line-height:1.6;
}
.sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--surface); padding:10px 16px; z-index:99;
}
.skip:focus{left:0;}

/* ---------- ヘッダー（スマートヘッダー） ----------
   position:sticky なので、隠しても出しても本文は動かない。
   高さは64px（スマホ56px）で固定。transform だけを動かし、再レイアウトを起こさない。
   本文の上に重なるため、背景は半透明をやめて不透明にした。 */
.site-header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line); background:var(--bg);
  transition:transform .18s ease;
}
.site-header.is-hidden{transform:translateY(-100%);}
/* キーボードのフォーカスが入ったら、JSを待たずにその場で表示する */
.site-header:focus-within{transform:none;}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px;}
.brand{display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none;}
.brand-name{font-weight:700; letter-spacing:.08em; color:var(--ink); white-space:nowrap;}
.mark{display:block; width:24px; height:24px; background:var(--ink); position:relative;}
.mark::after{content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; background:var(--bg);}
.badge{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  line-height:1; padding:6px 8px; color:var(--ink); border:1px solid var(--ink);
}
.nav{display:flex; gap:0;}
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 13px;
  font-size:13px; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a + a{border-left:1px solid var(--line-soft);}
.nav a:hover{color:var(--ink); background:var(--surface);}
.nav a[aria-current="page"]{color:var(--ink); font-weight:700; border-bottom-color:var(--ink);}
.nav .nav-quiz{color:var(--ink); font-weight:700;}
.nav-abbr{display:none;}

.crumb{border-bottom:1px solid var(--line-soft); background:rgba(247,247,246,.5);}
.crumb-inner{display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; min-height:40px;}
.crumb a,.crumb span{font-size:12px; color:var(--ink-mute); text-decoration:none;}
.crumb a{display:inline-flex; align-items:center; min-height:40px;}
.crumb a:hover{color:var(--ink);}
.crumb .sep{color:var(--line);}
.crumb [aria-current="page"]{color:var(--ink);}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 32px; border-radius:0;
  font-size:15px; font-weight:600; letter-spacing:.06em;
  text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  background:transparent; color:var(--ink); font-family:inherit;
  transition:background .15s linear, color .15s linear;
}
.btn-primary{background:var(--ink); color:var(--surface);}
.btn-primary:hover{background:var(--slate); border-color:var(--slate);}
.btn-ghost{color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink);}
.btn-sm{min-height:46px; padding:0 20px; font-size:13.5px;}
.btn[disabled]{opacity:.5; cursor:default;}
.btn[aria-pressed="true"]{background:var(--ink); color:var(--surface);}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin:0;}

/* ---------- 汎用レイアウト ---------- */
.row-label .tag{display:block; margin-bottom:8px;}
.row-label h2{margin:0; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.8;}
.page-head{padding:44px 0 40px; border-bottom:1px solid var(--line);}
.page-head .tag{display:block; margin-bottom:10px;}
.page-head h1{margin:0 0 14px; font-size:32px; line-height:1.5; font-weight:700;}
.page-head p{margin:0; max-width:34em; color:var(--ink-soft); font-size:16px; line-height:1.95;}
.prose{max-width:36em;}
.prose p{margin:0 0 20px; font-size:16px; line-height:1.95; color:var(--ink-soft);}
.prose p:last-child{margin-bottom:0;}
.note{background:var(--surface); border:1px solid var(--line); padding:20px 22px; margin:0 0 24px; max-width:44em;}
.note .tag{display:block; margin-bottom:6px;}
.note p{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink-soft);}
.note-strong{border-color:var(--ink);}
.eyebrow{
  margin:0 0 14px; display:inline-block;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; line-height:1.6;
  color:var(--ink); border:1px solid var(--ink); padding:6px 11px;
}

/* ---------- ページ冒頭（2段組にして縦を詰める） ---------- */
.lead-block{
  display:grid; grid-template-columns:minmax(0,1fr) 600px; gap:0 44px;
  align-items:start; padding:18px 0 14px; border-bottom:1px solid var(--line);
}
.lead-title{margin:0 0 8px; font-size:28px; line-height:1.5; font-weight:700;}
.lead-text{margin:0; font-size:15px; line-height:1.9; color:var(--ink-soft); max-width:38em;}
.lead-side{padding-top:2px;}
.shelf-index{display:flex; align-items:baseline; gap:0 14px; flex-wrap:wrap;}
.shelf-index ul{display:flex; flex-wrap:wrap; gap:0 2px; list-style:none; margin:0; padding:0;}
.shelf-index a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 9px;
  font-size:12.5px; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent;
}
.shelf-index a:hover{color:var(--ink); border-bottom-color:var(--ink);}
.ix-abbr{display:none;}

.sample-notice{
  margin:6px 0 0; padding:8px 12px; border-left:2px solid var(--ink);
  background:var(--surface); font-size:12.5px; line-height:1.7; color:var(--ink-mute);
}
.sample-notice strong{color:var(--ink);}
.sample-notice.ns{margin:16px 0 0; font-size:13.5px;}
/* 原文は1つ。PCは全文を出し、スマホでは後半を「詳しく見る」で開く。
   JavaScriptが無いときは開けないので、そのときはどの幅でも全文を出す（html.js で切り替える）。 */
.notice-more{display:inline;}
.notice-toggle{display:none;}

/* ---------- 作品棚 ----------
   .shelf は position:relative。浮動パネルの位置の基準になる。
   overflow は .rail にしか付いていないので、パネルは切れない。 */
.shelf{position:relative; padding:18px 0 24px; border-bottom:1px solid var(--line);}
.shelf.has-panel{z-index:20;}
.shelf-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:10px;}
/* ラベル・見出し・補足を1行に置いて、棚1つあたりの高さを54px減らす */
.shelf-name{display:flex; align-items:baseline; gap:0 16px; flex-wrap:wrap;}
.shelf-name .tag{flex:0 0 auto;}
.shelf-line{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.shelf-name h2{margin:0; font-size:22px; font-weight:700; line-height:1.5;}
.shelf-sub{font-size:13.5px; line-height:1.7; color:var(--ink-mute);}
.shelf-sub .demo-mark{
  display:inline-block; margin-left:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; border:1px solid var(--ink-mute); padding:2px 6px; color:var(--ink-mute);
}
.shelf-tools{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.shelf-more{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-size:13.5px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px;
}
.shelf-more:hover{color:var(--ink);}
.shelf-count{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-mute);}
.rail-nav{display:flex; gap:0; border:1px solid var(--line);}
.railbtn{
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:15px; color:var(--ink-soft); line-height:1;
}
.railbtn + .railbtn{border-left:1px solid var(--line);}
.railbtn:hover{background:var(--surface); color:var(--ink);}
.railbtn[disabled]{opacity:.35; cursor:default;}
.railbtn[disabled]:hover{background:transparent; color:var(--ink-soft);}

/* 横スクロールはこの要素の内側だけ */
.rail{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  border-top:1px solid var(--line-soft); padding:16px 0 0;
}
.rail-track{display:flex; gap:0 var(--card-gap); list-style:none; margin:0; padding:0;}
.rail-track::after{content:""; flex:0 0 4px;}

.card{flex:0 0 var(--card-w); width:var(--card-w);}
.card-btn{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; position:relative;
}
/* 枠の比率を先に決める。実データで縦横比が違っても、カードの高さは変わらない */
.card-pkg{
  display:block; position:relative; border:1px solid var(--line); background:var(--surface);
  aspect-ratio:var(--pkg-ratio);
}
.card-pkg img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.card-flag{
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; line-height:1;
  padding:6px 8px; background:var(--ink); color:var(--surface);
}
/* 常時出す情報は作品名と出演者だけ。それ以外は浮動詳細へ移した */
.card-title{
  display:-webkit-box; margin:12px 0 5px; font-size:15.5px; line-height:1.6; font-weight:700;
  color:var(--ink); min-height:3em; overflow:hidden;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.card-cast{display:block; font-size:13px; line-height:1.6; color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-btn:hover .card-title{color:var(--slate);}
/* 選択中の印。寸法は一切変えない（拡大も移動もしない） */
.card.is-active .card-pkg{box-shadow:inset 0 0 0 2px var(--ink); border-color:var(--ink);}
/* 元カードの作品名と出演者は、浮動詳細と二重に出さない。
   visibility なので場所は残り、カードも周囲も動かない。 */
.card.is-active .card-title,
.card.is-active .card-cast{visibility:hidden;}
.card.is-out .card-pkg{opacity:.4;}
.card.is-out .card-title,.card.is-out .card-cast{color:var(--ink-mute);}
.card-mark{
  position:absolute; right:0; top:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; line-height:1;
  padding:6px 8px; background:var(--surface); color:var(--ink); border:1px solid var(--ink);
}

/* ランキング。順位はパッケージに重ねず、上に置く */
.card-rank{
  display:block; font-family:var(--mono); font-size:30px; line-height:1;
  letter-spacing:.04em; color:var(--ink); padding:0 0 8px;
  border-bottom:2px solid var(--ink); margin-bottom:12px;
}

/* ---------- 浮動詳細パネル（ページに1個だけ） ----------
   PC：選んだカードの近くへ絶対配置。棚（position:relative）が基準。
   スマホ：画面下から出る固定パネル。
   影・ぼかし・角丸は使わない。黒い1px罫線と明るい面だけで浮きを表す。 */
.fp{
  position:absolute; z-index:30; width:724px;
  display:grid; grid-template-columns:312px minmax(0,1fr); gap:0 24px;
  align-content:start;
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  padding:20px 22px;
}
.fp-pkg{
  grid-column:1; grid-row:1 / span 2; position:relative;
  border:1px solid var(--line); background:var(--bg);
  aspect-ratio:var(--pkg-ratio); width:312px;
}
.fp-pkg img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
.fp-flag{
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; line-height:1;
  padding:6px 8px; background:var(--ink); color:var(--surface);
}
.fp-body{grid-column:2; grid-row:1; min-width:0;}
.fp-id{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px;}
.fp-title{
  display:-webkit-box; margin:0 0 8px; font-size:20px; line-height:1.5; font-weight:700;
  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.fp-meta{
  display:-webkit-box; margin:0 0 10px; font-size:13.5px; line-height:1.8; color:var(--ink-mute);
  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.fp-genres{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 10px; padding:0; max-height:29px; overflow:hidden;}
.fp-genres li{border:1px solid var(--line); padding:3px 9px; font-size:12.5px; line-height:1.6; color:var(--ink-soft);}
.fp-note{
  display:-webkit-box; margin:0; font-size:14px; line-height:1.8; color:var(--ink-soft);
  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
.fp-reason{
  display:-webkit-box; margin:10px 0 0; padding-left:12px; border-left:3px solid var(--ink);
  font-size:13.5px; line-height:1.75; color:var(--ink);
  overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
/* パッケージの高さと本文の高さの差は、細い罫線で区切って操作の置き場にする */
.fp-acts{
  grid-column:2; grid-row:2; align-self:end;
  display:grid; grid-template-columns:1fr 1fr 100px; gap:8px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.fp-acts .bb{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 10px; border:1px solid var(--line); background:transparent;
  font:inherit; font-size:13.5px; color:var(--ink-soft); cursor:pointer; text-decoration:none;
  transition:background .15s linear, color .15s linear;
}
.fp-acts .bb:hover{border-color:var(--ink); color:var(--ink);}
.fp-acts .bb-main{grid-column:1 / 3; background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600;}
.fp-acts .bb-main:hover{background:var(--slate); border-color:var(--slate); color:var(--surface);}
.fp-acts .bb[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink);}
.fp-acts .bb-close{grid-column:3; grid-row:1;}
.fp-acts [data-act="yes"]{grid-column:1;}
.fp-acts [data-act="no"]{grid-column:2;}
.fp-esc{
  grid-column:3; grid-row:2; align-self:center; margin:0; text-align:center; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-mute);
}
.fp-back{display:none;}

/* ---------- 作品以外の入口 ---------- */
.rest{display:grid; grid-template-columns:var(--label) 1fr; gap:0 40px;
  padding:40px 0 42px; border-bottom:1px solid var(--line);}
.rest-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft);}
.rest-list li{border-bottom:1px solid var(--line-soft);}
.rest-list a{display:grid; grid-template-columns:44px 200px 1fr; gap:0 16px; align-items:baseline;
  min-height:60px; padding:14px 4px; text-decoration:none;}
.rest-list a:hover .rt{color:var(--slate);}
.rn{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute);}
.rt{font-size:16px; font-weight:700; color:var(--ink);}
.rd{font-size:14.5px; line-height:1.8; color:var(--ink-soft);}

/* ---------- プロトタイプ操作（公開時には置かない） ---------- */
.proto{display:grid; grid-template-columns:var(--label) 1fr; gap:0 40px; padding:36px 0 44px;}
.proto-text{margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--ink-soft); max-width:44em;}
.proto-actions{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px;}
.proto-note{margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-mute); max-width:44em;}

/* ---------- 作品詳細（仮） ---------- */
.work{padding:34px 0 44px;}
.work-title{margin:0 0 24px; font-size:28px; line-height:1.5; font-weight:700; max-width:24em;}
.work-grid{display:grid; grid-template-columns:280px 1fr; gap:0 40px; margin-bottom:30px; align-items:start;}
.work-pkg{margin:0;}
.work-pkg img{display:block; width:280px; height:auto; border:1px solid var(--line); background:var(--surface);}
.kv{margin:0 0 20px; border-top:1px solid var(--line);}
.kv-row{display:grid; grid-template-columns:150px 1fr; gap:0 20px; padding:12px 0; border-bottom:1px solid var(--line-soft);}
.kv-key{margin:0; font-size:14px; color:var(--ink-mute);}
.kv-val{margin:0; font-size:15px; line-height:1.8; color:var(--ink);}
.work-note{margin:0; font-size:15.5px; line-height:1.9; color:var(--ink-soft); max-width:36em;}

/* ---------- 画面状態の一覧 ---------- */
.states-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.states-list li{border-bottom:1px solid var(--line); padding:20px 0;}
.states-list h3{margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.6;}
.states-list p{margin:0; font-size:15px; line-height:1.85; color:var(--ink-soft); max-width:40em;}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--line); padding:34px 0 48px;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:0 4px;}
.footer-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px 0 0;
  font-size:13px; color:var(--ink-soft); text-decoration:none;}
.footer-nav a:hover{color:var(--ink);}
.notice{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-mute);}

/* ---------- 年齢確認 ---------- */
.modal{position:fixed; inset:0; z-index:80; padding:24px;
  display:flex; align-items:center; justify-content:center; background:rgba(21,23,26,.55);}
.modal[hidden]{display:none;}
.modal-panel{width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--ink); border-radius:0; padding:34px 32px 30px;}
.modal-title{margin:10px 0 12px; font-size:21px; font-weight:700; line-height:1.65;}
.modal-body{margin:0 0 10px; font-size:15px; line-height:1.95; color:var(--ink-soft);}
.modal-sub{margin:0 0 24px; font-size:13px; line-height:1.85; color:var(--ink-mute);}
.modal-actions{display:flex; gap:0; border:1px solid var(--line);}
.modal-actions .btn{flex:1 1 50%; border:0;}
.modal-actions .btn-ghost{border-left:1px solid var(--line);}

/* ---------- 中間幅 ---------- */
@media (max-width:1240px){
  .lead-block{grid-template-columns:1fr; gap:14px 0;}
  .lead-side{padding-top:0;}
  .rest,.proto{grid-template-columns:1fr; gap:0;}
  .rest .row-label,.proto .row-label{margin-bottom:18px;}
  .rest-list a{grid-template-columns:44px 1fr;}
  .rest-list .rd{grid-column:2;}
}
/* ---------- スマートフォン ---------- */
@media (max-width:860px){
  :root{--pad:20px; --card-w:236px; --card-gap:14px;}
  body{font-size:15.5px;}
  .grid-bg{background-size:56px 56px;}

  .header-inner{min-height:56px;}
  .brand{gap:10px;}
  .nav a{padding:0 10px; font-size:12.5px;}
  /* スマホでは「作品を探す」と「診断」だけ残す。
     それ以外は冒頭の棚の目次とフッターへ寄せる。 */
  .nav .nav-sub{display:none;}
  .nav-full{display:none;}
  .nav-abbr{display:inline;}

  /* 冒頭を詰めて、最初のパッケージを画面内へ入れる。本文は14px未満にしない */
  .lead-block{padding:12px 0 10px; gap:8px 0;}
  .lead-title{font-size:22px; line-height:1.45; margin-bottom:6px;}
  .lead-text{font-size:14.5px; line-height:1.8;}
  .eyebrow{margin-bottom:8px; font-size:11px; padding:5px 9px;}
  /* 目次を1行に収めて、最初のパッケージを上げる。
     「SHELVES」の等幅ラベルはスマホでは行を1つ使うだけなので外す。 */
  .shelf-index{gap:0;}
  .shelf-index .tag{display:none;}
  .shelf-index ul{gap:0;}
  .shelf-index a{padding:0 7px; font-size:12px; min-height:44px;}
  .ix-full{display:none;}
  .ix-abbr{display:inline;}
  .sample-notice{font-size:12.5px; line-height:1.6; padding:6px 10px;}
  /* スマホは短い本文だけ。残りは「詳しく見る」で開く（原文は1つ） */
  .js .notice-more{display:none;}
  .js .sample-notice.is-open .notice-more{display:inline;}
  .js .notice-toggle{
    display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
    border:0; background:transparent; font:inherit; font-size:12.5px;
    color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  }

  .shelf{padding:14px 0 20px;}
  /* 見出しと件数を1行に並べ、棚1つあたり36px詰める */
  .shelf-head{align-items:flex-end; gap:12px; margin-bottom:6px;}
  .shelf-name{flex:1 1 auto; min-width:0;}
  .shelf-name .tag{display:none;}
  .shelf-line{gap:2px 12px;}
  .shelf-name h2{font-size:19px;}
  .shelf-sub{font-size:13px;}
  .shelf-tools{gap:10px; flex:0 0 auto;}
  /* 指で送るため、スマホでは矢印を出さない */
  .rail-nav{display:none;}
  .rail{padding:10px 0 0; margin:0 calc(var(--pad) * -1);
    padding-left:var(--pad); padding-right:var(--pad); -webkit-overflow-scrolling:touch;}
  .card-title{font-size:14.5px; margin-top:10px;}
  .card-cast{font-size:12.5px;}
  .card-rank{font-size:24px; padding-bottom:6px; margin-bottom:9px;}

  /* 浮動詳細は画面下から出るパネルにする */
  .fp{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; z-index:70;
    grid-template-columns:112px minmax(0,1fr); gap:0 14px;
    max-height:64vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    border-left:0; border-right:0; border-bottom:0;
    padding:16px 20px 20px;
  }
  .fp-pkg{width:112px; grid-row:1;}
  .fp-acts{padding-top:12px;}
  .fp-body{grid-column:2; grid-row:1;}
  .fp-title{font-size:17px; -webkit-line-clamp:3;}
  .fp-meta{font-size:12.5px; -webkit-line-clamp:3;}
  .fp-genres{max-height:none;}
  .fp-note{font-size:13.5px; -webkit-line-clamp:3;}
  .fp-reason{font-size:13px;}
  .fp-acts{grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px;}
  .fp-acts .bb{grid-column:auto !important; grid-row:auto !important; padding:0 4px; font-size:12.5px;}
  .fp-esc{display:none;}
  .fp-back{display:block; position:fixed; inset:0; z-index:69; background:rgba(21,23,26,.5);}
  .fp-back[hidden]{display:none;}
  body[data-sheet="open"]{position:fixed; left:0; right:0; overflow:hidden;}

  .rest{padding:30px 0 32px;}
  .rest-list a{grid-template-columns:1fr; gap:4px; padding:18px 0;}
  .rest-list .rd{grid-column:1;}
  .proto{padding:28px 0 36px;}
  .proto-actions .btn{width:100%;}

  .work{padding:26px 0 36px;}
  .work-title{font-size:23px;}
  .work-grid{grid-template-columns:1fr; gap:24px 0;}
  .work-pkg img{width:200px;}
  .kv-row{grid-template-columns:1fr; gap:2px;}

  .page-head{padding:28px 0 26px;}
  .page-head h1{font-size:24px;}
  .btn{width:100%; padding:0 16px;}
  .btn-sm{width:auto;}
  .actions .btn{width:100%;}

  .footer-inner{flex-direction:column; align-items:flex-start; gap:0;}
  .notice{margin-top:10px;}
  .modal-panel{padding:26px 20px 22px;}
  .modal-title{font-size:19px;}
  .modal-actions{flex-direction:column;}
  .modal-actions .btn-ghost{border-left:0; border-top:1px solid var(--line);}
}

/* ---------- 動きの抑制 ----------
   拡大・移動・スライドはもともと使っていない。止めるのは色の変化と送りの補間だけ。
   浮動詳細は動きを持たないので、抑制時も即座に出る。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
  .rail{scroll-behavior:auto !important;}
}

/* ================================================================
   第3回：検索欄・価格表示・作品一覧（グリッド／並び替え／絞り込み）
   第2.1回の配色・罫線・角丸なしの方針をそのまま使う。
   ================================================================ */

/* ---------- ヘッダーの検索欄 ---------- */
.search-bar{flex:0 0 auto; margin-left:12px;}
.search{display:flex; align-items:center; gap:0; border:1px solid var(--line); background:var(--surface);}
.search-input{
  width:210px; min-height:40px; border:0; background:transparent; padding:0 12px;
  font:inherit; font-size:13.5px; color:var(--ink);
}
.search-input::placeholder{color:var(--ink-mute);}
.search-input:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;}
.search-go{
  min-height:40px; padding:0 14px; border:0; border-left:1px solid var(--line);
  background:var(--ink); color:var(--surface); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.search-go:hover{background:var(--slate);}
.search-close{display:none;}
.search-toggle{
  display:none; align-items:center; min-height:44px; padding:0 12px;
  border:0; border-left:1px solid var(--line-soft); background:transparent;
  font:inherit; font-size:12.5px; color:var(--ink-soft); cursor:pointer;
}
.search-toggle:hover{color:var(--ink); background:var(--surface);}

/* ---------- 棚の見出しリンク ---------- */
.shelf-name h2 a.shelf-link{text-decoration:none; color:inherit;}
.shelf-name h2 a.shelf-link:hover{color:var(--slate); text-decoration:underline; text-underline-offset:5px;}

/* ---------- カードの価格（既定は出さない。一覧とセール棚だけ出す） ---------- */
.card-price{display:none;}
.grid .card-price,
.shelf[data-kind="sale"] .card-price{display:block; margin-top:7px;}
.card-pr1{display:flex; align-items:center; gap:8px; min-height:20px;}
.card-off{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.04em; line-height:1; padding:4px 6px; background:var(--ink); color:var(--surface);
}
.card-left{font-size:11.5px; line-height:1; color:var(--ink); border:1px solid var(--ink); padding:3px 5px;}
.card-pr2{display:flex; align-items:baseline; gap:8px; margin-top:4px; flex-wrap:wrap;}
.card-sale{font-size:15.5px; font-weight:700; color:var(--ink);}
.card-reg{font-size:12px; color:var(--ink-mute); text-decoration:line-through;}
.card-reg-only{font-size:14px; color:var(--ink-soft);}
.card-nopr{display:block; margin-top:7px; font-size:12.5px; color:var(--ink-mute);}
.grid .card-price{min-height:48px;}

/* ---------- 詳細パネルの価格 ---------- */
.fp-price{margin:10px 0 0;}
.fp-pl{margin:0; display:grid; gap:2px 0;}
.fp-pl > div{display:grid; grid-template-columns:76px 1fr; gap:0 10px; align-items:baseline;}
.fp-pl dt{margin:0; font-size:12px; color:var(--ink-mute);}
.fp-pl dd{margin:0; font-size:13.5px; line-height:1.7; color:var(--ink);}
.fp-pl s{color:var(--ink-mute);}
.fp-pl b{font-size:16px;}
.fp-coupon{margin:6px 0 0; font-size:12px; line-height:1.6; color:var(--ink-mute);}
.fp-pnote{margin:4px 0 0; font-size:11.5px; line-height:1.6; color:var(--ink-mute);}

/* ---------- 一覧の見出し ---------- */
body[data-page="listing"] #main{position:relative;}
.listing-head{position:relative; padding:20px 0 14px; border-bottom:1px solid var(--line); z-index:24;}
.listing-title{margin:0 0 6px; font-size:28px; line-height:1.4; font-weight:700;}
.listing-sub{margin:0 0 6px; font-size:14.5px; line-height:1.7; color:var(--ink-soft);}
.listing-count{margin:0 0 14px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.listing-count strong{font-size:16px;}
.listing-shown{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--ink-mute);}

.period{display:flex; align-items:center; gap:0 10px; flex-wrap:wrap; margin:0 0 14px;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:4px 0;}
.period .per{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font-size:13.5px; color:var(--ink-soft); text-decoration:none; border-bottom:2px solid transparent;
}
.period .per:hover{color:var(--ink);}
.period .per[aria-current="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--ink);}
.period-note{font-size:11.5px; line-height:1.6; color:var(--ink-mute);}

.listing-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px;}
.sortbox{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);}
.sortbox select, .sel select{
  min-height:44px; padding:0 10px; border:1px solid var(--line); background:var(--surface);
  font:inherit; font-size:13.5px; color:var(--ink); border-radius:0;
}
.lbtn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border:1px solid var(--ink); background:transparent; font:inherit; font-size:13.5px;
  color:var(--ink); cursor:pointer;
}
.lbtn:hover{background:var(--surface);}
.lbtn[aria-expanded="true"]{background:var(--ink); color:var(--surface);}
.lbtn-n{font-family:var(--mono); font-size:11px; border:1px solid currentColor; padding:1px 5px;}
.lbtn-sp{display:none;}

.chips-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;}
.chips-label{font-size:12.5px; color:var(--ink-mute);}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 10px;
  border:1px solid var(--ink); background:var(--surface); font:inherit; font-size:12.5px;
  color:var(--ink); cursor:pointer;
}
.chip:hover{background:var(--ink); color:var(--surface);}
.chip-clear{
  min-height:36px; padding:0 10px; border:1px solid var(--line); background:transparent;
  font:inherit; font-size:12.5px; color:var(--ink-soft); cursor:pointer;
}
.chip-clear:hover{border-color:var(--ink); color:var(--ink);}

/* ---------- 条件パネル（PCは作品の上に重ねる。グリッドは動かさない） ---------- */
.filter-back{display:none;}
.filter-panel{
  position:absolute; left:0; right:0; top:100%; z-index:25;
  background:var(--surface); border:1px solid var(--ink); border-radius:0;
  max-height:70vh; overflow-y:auto;
}
.fp-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--line);}
.fp-h{margin:0; font-size:16px; font-weight:700;}
.fp-x{width:44px; height:44px; border:1px solid var(--line); background:transparent;
  font-size:18px; line-height:1; color:var(--ink-soft); cursor:pointer;}
.fp-x:hover{border-color:var(--ink); color:var(--ink);}
/* PCは主要条件（左）と詳細条件（右）を最初から2列で出す。
   畳んだ見出しだけの列は作らない。 */
.filter-body{padding:16px 20px 8px; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start;}
.fset{border:0; margin:0 0 16px; padding:0; min-width:0;}
.fset legend{padding:0; margin:0 0 10px; font-size:13px; font-weight:700; color:var(--ink);}
.fset-main{grid-column:1; padding-right:30px;}
.fset-detail{grid-column:2; padding-left:30px; border-left:1px solid var(--line-soft);}
.fset-sp{display:none;}
/* ラジオ・チェックは「印＋項目名」を1行目、説明を2行目に置く。
   説明が項目名の横で細かく折り返されないようにするための2列グリッド。 */
.ck{
  display:grid; grid-template-columns:16px minmax(0,1fr); gap:2px 10px;
  align-items:start; min-height:44px; padding:6px 0;
  font-size:13.5px; line-height:1.6; color:var(--ink); cursor:pointer;
}
.ck input{width:16px; height:16px; margin:3px 0 0; accent-color:#15171a;}
.ck > span{grid-column:2;}
.ck em{grid-column:2; font-style:normal; font-size:12.5px; line-height:1.7; color:var(--ink-mute);}
.rgroup{margin:12px 0 0; padding:10px 0 0; border-top:1px solid var(--line-soft);}
.rlabel{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:4px;}
.range{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;}
.range input{min-height:44px; width:110px; padding:0 10px; border:1px solid var(--line);
  background:var(--surface); font:inherit; font-size:13.5px; color:var(--ink);}
.range .unit{font-size:13px; color:var(--ink-mute);}
.sel{display:grid; gap:4px; margin:0 0 10px; font-size:12.5px; color:var(--ink-soft);}
/* 操作部はPCでもパネルの下端に貼り付ける。条件が多くても最後までスクロールせずに押せる。 */
.filter-foot{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; border-top:1px solid var(--line); background:var(--bg);
  position:sticky; bottom:0; z-index:2;}
.filter-hit{margin:0; font-size:13px; font-weight:700;}
.filter-acts{display:flex; gap:8px;}
.filter-acts .bb{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px;
  border:1px solid var(--line); background:transparent; font:inherit; font-size:13.5px;
  color:var(--ink-soft); cursor:pointer;
}
.filter-acts .bb:hover{border-color:var(--ink); color:var(--ink);}
.filter-acts .bb-main{background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600;}
.filter-acts .bb-main:hover{background:var(--slate); border-color:var(--slate); color:var(--surface);}

/* ---------- 作品グリッド ---------- */
.grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 24px;
  list-style:none; margin:0; padding:26px 0 0;
}
.grid .card{flex:none; width:auto;}
.listing-empty{
  margin:26px 0 0; padding:22px 24px; border:1px solid var(--ink); background:var(--surface);
  font-size:15px; line-height:1.9; color:var(--ink-soft);
}
.listing-empty strong{color:var(--ink);}
.listing-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:32px 0 48px;}
.listing-foot .btn{min-width:220px;}
.pager{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.pager-note{font-size:11.5px; color:var(--ink-mute);}
.pager a{font-size:13.5px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px;
  display:inline-flex; align-items:center; min-height:44px;}
.pager a:hover{color:var(--ink);}

/* ---------- 大型PC ---------- */
@media (min-width:1700px){
  :root{--wrap:1600px;}
  .grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}

/* ---------- タブレット ---------- */
@media (max-width:1240px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .filter-body{grid-template-columns:1fr;}
  .fset-main{grid-column:1; padding-right:0;}
  .fset-detail{grid-column:1; padding-left:0; padding-top:14px;
    border-left:0; border-top:1px solid var(--line-soft);}
  .search-input{width:150px;}
}

/* ---------- スマートフォン ---------- */
@media (max-width:860px){
  /* 検索欄はヘッダーのボタンから開く。閉じているあいだは作品領域を圧迫しない */
  .search-toggle{display:inline-flex;}
  .search-bar{
    position:absolute; left:0; right:0; top:100%; margin:0; padding:10px var(--pad);
    background:var(--bg); border-bottom:1px solid var(--line); display:none;
  }
  .search-bar.is-open{display:block;}
  .search-input{width:100%; min-height:44px;}
  .search-go{min-height:44px;}
  .search-close{
    display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px;
    border:0; border-left:1px solid var(--line); background:transparent;
    font-size:18px; line-height:1; color:var(--ink-soft); cursor:pointer;
  }

  .listing-head{padding:14px 0 10px;}
  .listing-title{font-size:22px;}
  .listing-count{margin-bottom:10px;}
  .period{gap:0 4px; padding:2px 0;}
  .period .per{padding:0 10px; font-size:13px;}
  .period-note{font-size:11px; flex-basis:100%;}
  .listing-bar .sortbox{display:none;}
  .lbtn-sp{display:inline-flex; flex:1 1 0; justify-content:center;}
  #lFilterBtn{display:none;}
  .listing-bar{gap:8px;}

  /* 条件パネルは画面下から出す。作品詳細と同時には開かない */
  .filter-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:70;
    max-height:78vh; border-left:0; border-right:0; border-bottom:0;
  }
  .filter-back{display:block; position:fixed; inset:0; z-index:69; background:rgba(21,23,26,.5);}
  .filter-back[hidden]{display:none;}
  .filter-body{padding:14px 16px 8px;}
  .fset-sp{display:block;}
  .fset-sp .sortbox{display:inline-flex; width:100%;}
  .fset-sp select{width:100%;}
  .filter-foot{padding:10px 16px;}
  .filter-acts .bb{padding:0 12px; font-size:13px;}
  .fp-head{padding:12px 16px;}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; padding-top:18px;}
  .grid .card-price{min-height:44px;}
  .card-sale{font-size:14.5px;}
  .card-off{font-size:11px;}
  .listing-foot{padding:24px 0 36px; gap:12px;}
  .listing-foot .btn{min-width:0;}
}