/* 実装版でのみ必要な追加スタイル。
   画面の正本は承認済みモックの zukan.css。ここには「モックに無い実装専用の部品」だけを置く。
   （モックは静的HTMLのため、フォーム送信・管理画面の表・状態表示などが存在しない） */

/* スマホの絞り込みシートの位置補正。
   ベースCSSはPC用に .filters{position:sticky;top:96px} を指定しており、
   スマホ用ブロックで position:fixed;bottom:0 へ変えるときに top を戻していないため、
   top:96px が効いたままシートが画面下へ収まらない（実測で56px はみ出す）。
   モックは変更できないため、実装版で top を打ち消す。 */
@media(max-width:900px){
  .filters{top:auto}
}

/* フォーム部品（モックはJSのみでフォーム送信が無いため実装版で追加） */
.filters select,
.filters input[type="search"],
.filters input[type="text"]{
  width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);
  background:#12141c;color:var(--txt);font-size:13px;min-height:40px}
.filters .fg select{margin-top:2px}
.filter-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* 検索タブ（実装版はJSなしでも動くようリンク型にする） */
.searchtabs a{display:inline-block;border:0;background:transparent;color:#cfd4de;font-size:13.5px;
  letter-spacing:.02em;padding:10px 20px;border-radius:999px;min-height:44px;line-height:24px}
.searchtabs a:hover{color:var(--txt)}
.searchtabs a[aria-selected="true"]{background:linear-gradient(180deg,var(--gold),#b8945a);
  color:#1a1405;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.35)}
@media(max-width:480px){.searchtabs a{flex:1;padding:10px 8px;font-size:12px;text-align:center}}

/* 管理画面の表・状態（モックには操作結果の一覧が無い） */
.tablewrap{overflow-x:auto}
table.log{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
table.log th,table.log td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.log th{color:var(--mut);font-weight:500}
.state-approved{color:var(--ok)}
.state-pending{color:var(--warn)}
.state-rejected{color:var(--err)}
.state-hold{color:var(--info)}
.qform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.qform input[type=text],.qform input[type=url]{padding:9px 10px;border-radius:8px;border:1px solid var(--line);
  background:#12141c;color:var(--txt);font-size:12.5px;min-width:170px;min-height:40px}
.qform select{padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:#12141c;
  color:var(--txt);font-size:12.5px;min-height:40px}
.flash{background:#1d3324;border:1px solid #2c6b47;color:#bdf0d3;border-radius:8px;
  padding:11px 13px;font-size:12.5px;margin-bottom:14px}
.flash.err{background:#3a1f1c;border-color:#6b2c2c;color:#f0bdbd}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* 作品詳細の仕様表 */
.spec{width:100%;border-collapse:collapse;font-size:13px}
.spec th,.spec td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{color:var(--mut);font-weight:500;width:34%}

/* 送客リンクが未発行で無効なときの表示 */
.disabled-cta{display:block;background:var(--panel2);border:1px dashed #4a5163;color:var(--mut);
  border-radius:10px;padding:11px 14px;font-size:12.5px;line-height:1.7}

/* ---- 検証中だけ出す注記（本番では出さない） ---- */
.devnote{border-left:3px solid var(--warn);background:#221c12;border-radius:0 8px 8px 0;
  padding:9px 12px;font-size:11.5px;color:#e0cfa8;margin:10px 0;line-height:1.8}
.devnote-tag{display:inline-block;background:var(--warn);color:#231a08;font-weight:700;
  font-size:10px;border-radius:4px;padding:1px 7px;margin-right:8px}
.devnote-inline{color:var(--warn);font-size:11px}

/* ---- フッター ---- */
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.foot-nav a{color:#cfd4de;font-size:12.5px;text-decoration:underline}
.foot-nav a:hover{color:var(--gold)}

/* ---- 女優詳細 ---- */
/* パッケージ画像の表示（サイト共通）。
   FANZAのパッケージ画像は「左＝裏表紙／中央＝背表紙／右＝表紙」の3要素で1枚（例:800×538）。
   右端に寄せて cover で敷くだけだと、背表紙の帯が左端にわずかに残る
   （表紙面の幅が作品ごとに違うため、ちょうど半分では割り切れない）。
   そこで「枠幅の何倍で敷くか」で切り出す位置を決める。
   background-size:212% は、画像の横幅のうち右側 1/2.12 ≒ 47.2% だけを枠に映す指定。

   数値の根拠（社長が高解像度版で実測した継ぎ目の比率）：
     裏表紙 47.36% ／ 背表紙 5.27% ／ 表紙 47.36%
   表紙は右端から47.36%なので、それより内側を映す 212%（=47.2%）を採用する。

   ※FABLEが縮小画像やコントラストで推定した値（201%等）は精度が足りず、
     背表紙の帯が数％残った（社長指摘・3回発生）。この種の値は必ず実寸で確認すること。
   ※高さ方向の拡大（auto 112%等）だと表紙の左端（タイトル文字）が切れる。
     cover や center に戻すと背表紙・裏表紙が写り込む。 */
/* 枠の縦横比も表紙に合わせる。
   ベースCSSの 147/200（=0.735）は「表紙のみ画像 ps.jpg」の比率だが、
   pl.jpg から切り出す表紙面の比率は 0.704（幅47.36% × 800 ÷ 高さ538）で、
   両者がずれている。枠を0.735のままにすると、横幅を合わせたときに
   縦がはみ出して上下が切れる（社長指摘）。枠を0.704にすれば縦も横もぴったり収まる。 */
.first-card .fthumb,
.card .ph.pkg,
.work-row .thumb{
  aspect-ratio:704 / 1000;
  background-position:right center;
  background-size:212% auto;
}
/* 2026-09-27：作品画像を背景画像から実画像（.pkg-img）へ移した。
   背景画像には loading="lazy" が無く、画面外の作品画像まで初回表示で
   全部取得していた（女優詳細1ページで62件・10,302KB／実測）。

   **見え方は変えない。** 上の背景指定と同じ切り出しを、実画像の寸法指定で再現する。
     background-size:212% auto      → width:212%;height:auto
     background-position:right center → right:0 と上下中央ぞろえ
   枠側は aspect-ratio で高さを先に確保しているため、
   画像の読み込みが遅れてもカードの高さは動かない。
   `max-width:none` は必須。共通の `img{max-width:100%}` に潰されて212%にならない。 */
.first-card .fthumb,
.card .ph.pkg,
.work-row .thumb{position:relative;overflow:hidden}
.first-card .fthumb > .pkg-img,
.card .ph.pkg > .pkg-img,
.work-row .thumb > .pkg-img{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:212%;max-width:none;height:auto;display:block;
}
/* おすすめ4作は枠がカード幅いっぱい・高さ上限なしで aspect-ratio 147/200 に従わせる */
.first-card .fthumb{width:100%;max-height:none}
/* 公式サンプル動画の枠は、他ページと同じく最大720pxで中央に置く */
.actress-video{max-width:720px}
.actress-video .video-frame{max-width:100%}

/* ---- PC動画シアター ---- */
/* 公式プレーヤー（720x480=3:2）に枠を合わせ、上下左右の黒帯を出さない。
   横幅が広い画面では枠だけを広げず、実際の再生領域の比率を保つ。 */
.theater-media{max-width:720px;margin:0 auto}
/* 候補一覧の中だけをスクロールさせ、ページ全体が動かないようにする */
.theater-side{position:sticky;top:96px;overscroll-behavior:contain}
.theater-main{scroll-margin-top:96px}

/* ---- 作品詳細 ---- */
.wd-grid .video-frame{max-width:100%}
/* 「完全版動画を見る」は収益に直結する最重要ボタン。
   ベースCSSの .btn は inline-flex で文字幅ぶんしか広がらず、右カラムで極端に小さく見える。
   PC・スマホとも右カラムの横幅いっぱいに出す。 */
.wd-grid .btn-row{display:block}
.wd-grid .btn-row .btn,
.wd-grid .disabled-cta{display:block;width:100%;text-align:center;
  padding:15px 18px;font-size:15.5px;font-weight:700}

/* ---- スマホ動画発見 ---- */
/* 公式プレーヤーは実比率の箱の中で全面に広げる（枠の外へ入れると高さ0になる）。
   ただし高さいっぱいに伸ばすと、中の映像は上端に16:9で描かれ、下が黒帯になる。
   ポスターは contain で中央にあったので、再生した瞬間に位置が飛んで見えた
   （社長指摘 2026-08-19）。プレーヤーも同じ比率・同じ中央位置に置く。 */
.feed-media-fg.playing{
  background-image:none !important;
  display:flex;align-items:center;justify-content:center;
}
/* プレーヤーのURLで size=720_480 を要求しているため、中身は3:2で描かれる。
   16:9で枠を作ると、中で余白が生まれて位置がずれる。要求サイズと同じ比率にする。 */
.feed-media-fg iframe{
  width:100%;height:auto;aspect-ratio:720 / 480;max-height:100%;
  border:0;display:block;margin:auto;
}

/* スマホ動画発見：実装版は素のリンクで戻れるようにする */
.feed-top .btn{min-height:36px;padding:7px 12px;font-size:12px}
.feed-top h1{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}

/* 動画枠の縦横比あわせはJSの実測ではなくCSSのcontainで行う。
   モックはJSで実寸を測って箱を作っていたが、読み込み順や画面回転で
   計算前の幅（PC幅など）を拾って枠が画面外へはみ出す事故が起きたため、
   実装版では計算を持たない方式にする。黒帯は後ろのぼかし背景が埋める。 */
.feed-media-fg{background-size:contain;background-position:center;border-radius:0;box-shadow:none}

/* ---- スマホ表示の詰め（社長指摘） ---- */
@media(max-width:640px){
  /* ヒーロー：画像の上に余白を作らず、画面上部から画像で始める */
  .hero{margin-top:0;border-radius:12px}
  .hero .inner{padding:96px 14px 16px}
  main{padding-top:10px}

  /* 同じ項目で文字の開始位置がそろわないのを防ぐ（カード内の行頭を統一） */
  .card .body{padding:8px 10px 10px}
  .card .name,.card .kana,.card .meta,.card .why{padding:0;margin-left:0;text-align:left}
  .grid.works .card .meta{min-height:0}

  /* 作品詳細の主要ボタンは横幅いっぱいにする */
  .wd-grid .btn-row{display:block}
  .wd-grid .btn-row .btn,.wd-grid .disabled-cta{display:block;width:100%;text-align:center}
  .first-card .fbody .btn,.first-card .fbody .disabled-cta{width:100%;display:block;text-align:center}
}

/* ---- スマホ動画発見の送客ボタン ---- */
/* 動画の上に重ねるため、無効表示のときも読める濃さの背景を敷く */
.feed-cta{margin-bottom:8px}
.feed-cta .btn{display:block;width:100%;text-align:center;padding:12px;font-size:14px;font-weight:700}
.feed-cta .disabled-cta{background:rgba(18,20,28,.86);font-size:11.5px;padding:9px 11px}

/* ------------------------------------------------------------------
   サンプル動画プレーヤー（社長判断 2026-08-19）

   公式プレーヤー（litevideo）をURLに掲載用IDを付けて埋め込む。
   IDを付けないと、プレーヤー内のリンクから購入されても売上にならない。
   mp4の直接埋め込みも試したが、初期表示に再生ボタンが出ず却下した。

   プレーヤーの実寸は720×480で固定のため、枠もそれ以上に広げない（下の指定）。
   ------------------------------------------------------------------ */
/* 枠は720pxで止める（社長判断 2026-08-19）。
   FANZAのプレーヤーは要求サイズ（720×480）ちょうどで描かれ、枠を広げても
   映像は大きくならない。広げた分がそのまま黒帯として残る
   （1280px幅の画面で、横154px・縦103pxの黒帯が出ていた）。
   選べるサイズは 476×306 / 560×360 / 644×414 / 720×480 の4種類で、720×480が最大。
   CSSで引き伸ばす方法もあるが、画質が落ちるため採らない。 */
.theater-media{position:relative;max-width:720px;margin:0 auto}
.theater-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ------------------------------------------------------------------
   スマホ動画発見：ボタンがタップできない不具合の修正（社長指摘 2026-08-19）

   画面下20vhのスワイプ用透明レイヤーが、ボタン3つ（完全版動画を見る／
   女優詳細／作品詳細）の上に重なっていたため、タップがリンクへ届かなかった。
   下帯はクリックを受け取らないようにし、スワイプ判定はボタンの並び自体へ移した。
   ------------------------------------------------------------------ */
.feed-touch-bottom{pointer-events:none}
.feed-ui{pointer-events:auto}

/* ------------------------------------------------------------------
   カードの高さ揃え（社長指摘 2026-08-19）
   タイトルが1行の作品と2行の作品で高さが24pxずれていた。
   ------------------------------------------------------------------ */
/* 高さを揃えるのは**作品カードだけ**。女優カードは名前が1行なので、
   同じ指定を当てると名前とよみの間に空白ができる（社長指摘 2026-08-19）。

   作品名は1行のものから4行になるものまであり、min-height だけでは
   下の行（出演者・価格・評価）の位置がカードごとにずれる。
   3行で固定して切り、はみ出しは省略記号にする。 */
.card .body .work-name{
  height:4.2em;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.shelf .card,.first-grid .card{align-self:stretch}

/* ------------------------------------------------------------------
   女優を探す：絞り込みを画面上部へ（社長指摘 2026-08-19）

   左カラムに独立したスクロールがあり、ページ全体のスクロールと二重になって
   使いにくかった。絞り込みを上部の横並びに変え、スクロールを1本にする。
   スマホのボトムシート方式（max-width:900px）はそのまま維持する。
   ------------------------------------------------------------------ */
@media(min-width:901px){
  /* 2カラムをやめ、上下に積む */
  .cols{display:block}

  .filters{
    position:static;max-height:none;overflow:visible;
    margin:0 0 18px;padding:14px 16px;
  }
  /* 各絞り込み条件を横に並べる */
  .filters .fg{
    border-top:0;padding:0;
    break-inside:avoid;
  }
  .filters .fg-row{
    display:grid;gap:16px 22px;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    align-items:start;
  }
  /* 条件の中の選択肢は横に流す */
  .filters .fg > div,
  .filters .fg > .opts{display:flex;flex-wrap:wrap;gap:4px 14px}
  .filters label{margin:4px 0}
}

/* ------------------------------------------------------------------
   作品ページ：購入ブロックと余白（社長指摘 2026-08-19）
   ------------------------------------------------------------------ */

/* 価格とボタンを仕様表の下に1つのまとまりとして置く */
.wd-grid .buy-box{
  margin:0 0 14px;padding:14px;border-radius:var(--r);
  background:var(--panel2);border:1px solid var(--line);
}
.wd-grid .buy-box .buy-price{margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* 終了日時の吹き出しを出すときは、価格との間を詰めて「価格の補足」に見せる。
   吹き出しが無いときの見た目は変えない */
.wd-grid .buy-box .buy-price:has(+ .sale-deadline){margin-bottom:0}
/* 価格だけが唐突に出ると意味が伝わらないため、必ず見出しを添える */
.wd-grid .buy-box .buy-label{font-size:12px;color:var(--mut)}

/* 動画のすぐ下に「この作品を選ぶ理由」が接していたので離す */
.wd-grid + section{margin-top:22px}

/* 女優一覧：1行に7人並べる（6人＋余白が中途半端だったため。社長指摘 2026-08-19） */
@media(min-width:901px){
  .grid.faces{grid-template-columns:repeat(auto-fill,minmax(0,1fr));gap:12px}
}
@media(min-width:1200px){
  .grid.faces{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* ------------------------------------------------------------------
   スマホの女優ページをコンパクトに（社長指摘 2026-08-19）

   タイル1つずつが大きく、作品にたどり着くまでスクロールが長かった。
   競合（AVWikiDB）と同様、プロフィールは小さくまとめ、すぐ作品を見せる。
   ------------------------------------------------------------------ */
@media(max-width:640px){
  /* 写真と名前を上段に並べ、プロフィール表は画面の幅いっぱいに使う。
     写真の右へ表を押し込むと、値が「1988年5月24／日（38歳）」のように
     折り返して読みにくくなる（社長指摘 2026-08-19）。 */
  .detail-hero{display:block}
  .detail-hero .photo{
    float:left;width:88px;height:88px;margin:0 12px 6px 0;aspect-ratio:auto;
  }
  .detail-hero h1{font-size:20px}
  .detail-hero .kana{font-size:11px}
  /* 表とボタンは写真の下へ回り込ませず、全幅で置く */
  .detail-hero .facts,.detail-hero .btn-row{clear:both}

  /* プロフィール項目は表にする（社長指摘 2026-08-19）。
     「ラベル: 値／…」を横に流すと、どこで区切れているのか分からず読みにくい。
     作品ページの仕様表と同じ「左に項目名・右に値」の形へ揃える。 */
  .facts{
    display:grid;grid-template-columns:auto 1fr;
    margin:8px 0 10px;font-size:12.5px;
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
  }
  /* .fact の中の span（項目名）と b（値）を、そのまま表のセルとして並べる */
  .fact{display:contents}
  .fact span,.fact b{
    padding:5px 10px;border-top:1px solid var(--line);
    display:flex;align-items:center;min-width:0;line-height:1.45;
  }
  .fact:first-child span,.fact:first-child b{border-top:0}
  .fact span{
    font-size:11.5px;color:var(--mut);background:rgba(255,255,255,.02);
    white-space:nowrap;
  }
  .fact b{font-size:12.5px;font-weight:700;word-break:break-word}

  /* ボタンは幅いっぱいに1つだけ */
  .detail-hero .btn-row{margin-top:4px}
  .detail-hero .btn-row .btn{display:block;width:100%;text-align:center;padding:11px;font-size:13.5px}

  /* 経歴文も詰める */
  .panel{padding:12px}
}

/* ------------------------------------------------------------------
   トップのファーストビュー（社長判断 2026-08-19）

   高さ380pxのヒーロー枠を廃止した。実測でPC 553px・スマホ 552pxの位置まで
   作品が出ず、ファーストビューの6割が作品以外で埋まっていた。
   ここは直帰率に最も効く場所で、作品に触れる前に離脱されると戻ってこない。

   検索だけ1行で残す（女優名から探すのが主導線のため）。
   ------------------------------------------------------------------ */
.top-search{margin:0 0 16px}
/* 旧ヒーロー内の検索用に .searchbox へ max-width:520px が入っている。
   トップの検索は本文の幅いっぱいに使うため、その上限を外す。
   レスポンシブの制約ではなく、ヒーロー廃止時の外し忘れだった（社長指摘 2026-08-19）。 */
.top-search .searchbox{display:flex;gap:8px;margin:0;max-width:none}
.top-search .searchbox input{
  flex:1;min-width:0;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);font-size:14px;
}
.top-search .searchbox button{
  padding:12px 22px;border-radius:10px;border:1px solid var(--gold2);
  background:var(--gold);color:#1a1206;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap;
}
.top-search .top-stat{margin:8px 0 0;font-size:12px;color:var(--mut)}

@media(max-width:640px){
  .top-search{margin:0 0 12px}
  .top-search .searchbox input{padding:11px 12px;font-size:13.5px}
  .top-search .searchbox button{padding:11px 16px;font-size:13.5px}
  .top-search .top-stat{font-size:11.5px}
}

/* ------------------------------------------------------------------
   スマホのヘッダーを1行に収める（社長指摘 2026-08-19）

   ロゴ「熟女AV女優図鑑」が2行に折り返し、メニューも2段になって
   ヘッダーだけで縦に伸びていた。ファーストビューを削る原因になる。
   ------------------------------------------------------------------ */
.nav-short{display:none}

@media(max-width:700px){
  /* ロゴは折り返さない */
  .logo .name{white-space:nowrap}
  /* メニューも折り返さない。入りきらない分は短い文言へ差し替える */
  nav.global ul{flex-wrap:nowrap}
  .nav-full{display:none}
  .nav-short{display:inline}
  nav.global a{padding:5px 9px;font-size:11px;white-space:nowrap}
}

/* 画面が特に狭い場合は、ロゴをさらに詰めて1行を守る */
@media(max-width:400px){
  .logo .name{font-size:14.5px}
  nav.global ul{gap:4px}
  nav.global a{padding:5px 7px;font-size:10.5px}
}

/* ------------------------------------------------------------------
   入口タイル（社長指摘 2026-08-19）

   縦積みのボタン2つは場所を取り、どれも同じ見た目で選びにくかった。
   銀行サイト等と同じ「アイコン＋名前のタイルを横に並べる」形にする。
   ------------------------------------------------------------------ */
.entry-tiles{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.entry-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:18px 10px;min-height:104px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  color:var(--txt);text-align:center;text-decoration:none;
}
.entry-tile:hover{border-color:var(--gold2);background:var(--panel2)}
.entry-ico{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:rgba(212,175,55,.12);color:var(--gold);
}
.entry-ico svg{width:24px;height:24px}
.entry-label{font-size:13.5px;font-weight:800;line-height:1.3}
.entry-note{font-size:11px;color:var(--mut);line-height:1.3}

@media(max-width:640px){
  /* スマホは2列。1列だと縦積みボタンと同じ問題に戻る */
  .entry-tiles{grid-template-columns:repeat(2,1fr);gap:8px}
  .entry-tile{padding:14px 8px;min-height:92px;gap:6px}
  .entry-ico{width:38px;height:38px;border-radius:10px}
  .entry-ico svg{width:21px;height:21px}
  .entry-label{font-size:12.5px}
  .entry-note{font-size:10.5px}
}

/* ------------------------------------------------------------------
   ページ末尾の余白（社長指摘 2026-08-19）
   最後のセクションの下マージンと本文の下パディングが重なり、
   フッターとの間に使われない帯ができていた。
   ------------------------------------------------------------------ */
main > section:last-child{margin-bottom:0}
main{padding-bottom:12px}
/* フッターの上マージンと本文の下パディングが二重にかからないようにする */
footer.site{margin-top:0}

/* セールの終了日時（商品ページ）。
   FANZAの商品ページと同じく「いつまでか」を伝える。
   ただし**主役は価格**なので、日時は控えめな吹き出しにして price より小さく弱く出す。
   期限を知らせないと、終わったセールを見て来店したお客様を裏切ることになる。

   枠線は付けない。半透明の枠線を付けると、尻尾（三角）と本体（四角）の
   境目に線が残って割れて見える。塗りだけの1色にすれば継ぎ目が出ない。 */
.sale-deadline{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  /* 価格の直下に置く。離すと価格と無関係な情報に見える */
  margin:5px 0 12px;
  padding:5px 10px;
  border-radius:8px;
  background:#3a2a2b;
  color:#ffb4a0;
  font-size:.76rem; font-weight:600; line-height:1.2;
}
/* 吹き出しの尻尾。本体と同じ塗りだけの四角を回して出す（枠線なし＝継ぎ目なし） */
.sale-deadline::before{
  content:""; position:absolute; top:-4px; left:14px;
  width:9px; height:9px;
  background:#3a2a2b;
  transform:rotate(45deg);
}
.sale-deadline .sale-tag{
  display:inline-block; padding:1px 6px; border-radius:4px;
  background:#ff7a59; color:#241a1b;
  font-size:.66rem; font-weight:700; letter-spacing:.04em;
}

/* ------------------------------------------------------------------
   画像候補の確認（管理モード専用・/admin/image-review）
   公開画面では使わない。ここで選んでもサイトの表示は変わらない。
   ------------------------------------------------------------------ */
.warn{background:#2a2118;border-left:4px solid #c8a25a;border-radius:6px;
  padding:10px 14px;margin:0 0 16px;font-size:13px;line-height:1.8}
.prog{margin:0 0 14px}
.prog-bar{height:8px;background:#20242e;border-radius:4px;overflow:hidden}
.prog-bar span{display:block;height:100%;background:#c8a25a}
.prog-txt{font-size:12.5px;color:var(--mut);margin-top:6px}
.rv{border:1px solid #2b2f3a;border-radius:10px;padding:12px;margin:0 0 14px;background:#1a1d25}
.rv-head{font-size:15px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rv-kana{color:var(--mut);font-size:12px;font-weight:400}
.rv-link{font-size:12px}
.rv-state{margin-left:auto;font-size:12px;color:var(--mut)}
.rv-state.ok{color:#8fe0b0}
.rv-state.ng{color:#e08f8f}
.rv-note{font-size:12px;color:var(--mut);margin:6px 0 0}
.rv .cands{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.rv .cand{width:260px;border:1px solid #2b2f3a;border-radius:8px;overflow:hidden;
  background:#12141a;display:block}
.rv .cand.picked{border-color:#c8a25a}
/* 表示枠。画像は加工せず、枠と表示位置だけで表表紙を見せる。
   front … 縦長の枠の右端に寄せる＝見開きの右半分（表表紙）が大きく出る
   whole … パッケージ全体を収める                                     */
.rv .cand-frame{display:block;background:#0d0f14;cursor:pointer;overflow:hidden}
.rv .cand-frame[data-mode="front"]{aspect-ratio:3/4}
.rv .cand-frame[data-mode="front"] img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.rv .cand-frame[data-mode="whole"]{aspect-ratio:auto}
.rv .cand-frame[data-mode="whole"] img{width:100%;height:auto;max-height:260px;object-fit:contain}
.rv .cand img{display:block}
.rv .cand-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.rv .cand-note{font-size:11px;color:var(--mut)}
.rv .cand-body{padding:8px;font-size:12px}
.rv .cand-t{display:block;margin:2px 0 4px}
.rv .cand-m{display:block;color:var(--mut);font-size:11px;line-height:1.5}
@media (max-width:480px){ .rv .cand{width:100%;max-width:320px} }

/* ------------------------------------------------------------------
   女優画像の見せ方（2026-09-20 反映）

   公式の女優画像が無い女優には、社長が目視で選んだ作品のパッケージ画像を出す。
   パッケージは左が裏表紙・右が表表紙の見開きが多いので、**中央で切らず**、
   右側の表表紙だけを見せる。見開きでない画像は全体を枠へ収める。
   画像そのものは加工しない。枠と表示位置だけで行う。
   ------------------------------------------------------------------ */
.face-img{position:absolute;inset:0;width:100%;height:100%}
/* 公式の女優画像。従来どおり上寄せで切り抜く */
.face-img.official{object-fit:cover;object-position:center 25%}
/* 作品画像・見開き。**右半分（表表紙）だけ**を出す。
   枠の縦横比に関わらず表表紙だけにするため、画像を枠の2倍幅で置いて右端をそろえる。
   （右寄せのcoverだけだと、正方形の枠では裏表紙が2割ほど映り込む）
   縦は、顔が入りやすい上寄りで切る（公式画像の center 25% と同じ考え方）。
   `max-width:none` は必須。共通の `img{max-width:100%}` に潰されて2倍幅にならない。 */
.face-img.front{left:auto;right:0;width:200%;max-width:none;object-fit:cover;object-position:100% 30%}
/* 2倍幅の画像が枠からはみ出さないようにする */
.card .ph{overflow:hidden}
/* 作品画像・見開きでない。切らずに全体を収める */
.face-img.whole{object-fit:contain;object-position:center;background:#0d0f14}
/* 女優詳細の大画像。枠は従来どおりで、中身をimgに変えたぶんの受け皿 */
.detail-hero .photo .noimg{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#5d6373;font-size:12px}
/* 背景画像で女優画像を出すところ（シアターのポスター・候補サムネイル、スワイプの札）。
   <img> 側（.face-img）と同じ見せ方にそろえる。
   front は画像を枠の2倍幅で敷いて右端をそろえ、右半分＝表表紙だけを見せる。 */
.theater-media .poster.bg-front,
.cand .cthumb.bg-front,
.feed-media-fg.bg-front{background-size:200% auto;background-position:right center}
.theater-media .poster.bg-whole,
.cand .cthumb.bg-whole,
.feed-media-fg.bg-whole{background-size:contain;background-position:center}

/* 2026-09-27：シアターの候補一覧サムネイルを背景画像から実画像（.thumb-img）へ移した。
   候補15件ぶんの画像を初回表示で全部取得していたため、画面に入るまで遅らせる。
   **見え方は変えない。** 上の背景指定と同じ見せ方を実画像の寸法指定で再現する。
     既定（center/cover）        → object-fit:cover;object-position:center
     bg-whole（contain center）  → object-fit:contain
     bg-front（200% auto/right） → width:200%;height:auto;右ぞろえ・上下中央 */
.cand .cthumb{position:relative;overflow:hidden}
.cand .cthumb > .thumb-img{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;
}
.cand .cthumb > .thumb-img.whole{object-fit:contain;object-position:center}
.cand .cthumb > .thumb-img.front{
  left:auto;right:0;top:50%;transform:translateY(-50%);
  width:200%;max-width:none;height:auto;object-fit:fill;
}

/* ---- 押した瞬間の反応（2026-09-28 Codex指示 turn023） ---- */
/*
   一覧の札を押してから女優詳細が出るまで、計測では最大356ms（公開版・PC幅・接続が冷えた初回）。
   基準内だが、その間**画面が何も変わらない**ため「押しても反応しない」と感じる。
   押した瞬間に札をわずかに沈ませ、画面上端へ細い帯を出して、移動が始まったことを見せる。

   表示内容・並び・件数・画像の切抜きは1つも変えない。
   帯は画面を塞がない（pointer-events:none）。JavaScriptが動かない環境では
   印が付かないだけで、リンクは通常どおり動く。
*/
.card.is-pressing,
a.is-pressing {
  transform: scale(.985);
  filter: brightness(1.12);
  transition: transform .06s ease, filter .06s ease;
}
/* 移動中であることを示す細い帯。読み込みが終われば画面ごと置き換わる。 */
html.is-navigating::before {
  content: "";
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 100%; height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(212,175,106,.12), var(--gold) 45%, rgba(212,175,106,.12));
  background-size: 220% 100%;
  animation: zukan-nav 1s linear infinite;
}
@keyframes zukan-nav {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
/* 動きを減らす設定の利用者には、沈み込みと流れる動きを出さない。 */
@media (prefers-reduced-motion: reduce) {
  .card.is-pressing,
  a.is-pressing { transform: none; transition: none; }
  html.is-navigating::before { animation: none; opacity: .85; }
}