/* AVACTRESS — AV女優データベース
   ------------------------------------------------------------------
   方針
   ・地は白。FANZAのCDNが返すサムネイルには白い余白が焼き込まれているため、
     地を白にすると余白が完全に溶ける。本家が白背景なのと同じ理由。
   ・臙脂（#B22B45）を主役にする。索引の数字、見出しの罫、CTA、状態表示に通す。
     色を決めておきながら使わないと、無彩色の量産型テーマに見える。
   ・65%の女優に画像がないので、文字と索引が主役。写真は補助。
   ・画像は一切トリミング・拡大しない。
   ------------------------------------------------------------------ */

:root{
  --ink:#1A1A1E;
  --ink-2:#5A5A64;
  --ink-3:#8E8E99;
  --bg:#FFFFFF;
  --tint:#FAF7F8;
  --rule:#E4E1E3;
  --accent:#B22B45;
  --accent-dark:#8E1F35;
  --accent-tint:#FBEEF1;
  --pad:clamp(16px,4vw,32px);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",
         "Yu Gothic",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 960px は「6列時のカード幅＝147px」に一致する幅。作品サムネはCDNで
   147x200 に固定して配信しているので、これ以上広げると引き伸ばしになる。
   文字と索引が主役で写真は補助、という方針にも合わせている */
.wrap{width:min(960px,100% - var(--pad)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px 14px}

/* ---------- masthead ---------- */
/* backdrop-filter は使わない。これがあると position:fixed の子孫にとって
   .masthead が「包含ブロック」になり、ドロワー（position:fixed）が
   ビューポートではなくヘッダーの箱を基準に配置されてしまう
   （実測で 幅300×高さ80px の白い矩形がヘッダー内に出ていた）。
   背景は不透明にして、下の内容が透けないようにする */
.masthead{border-bottom:1px solid var(--rule);position:sticky;top:0;
  background:#fff;z-index:20}
.masthead-in{display:flex;align-items:center;gap:24px;padding:14px 0;flex-wrap:wrap}
/* ヘッダーが追従するので、スキップリンク（#main）で飛んだときに
   本文の先頭がヘッダーの下に隠れないようにする。値はヘッダーの実測高（66px）＋余白 */
main#main{scroll-margin-top:80px}
/* 検索窓を展開している間はヘッダーが149pxになる（実測）。
   その間だけ着地点を下げる */
.search-open main#main{scroll-margin-top:155px}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.25}
.brand-ja{font-weight:800;letter-spacing:-.01em;font-size:clamp(18px,2.4vw,21px);line-height:1.2}
.brand-en{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--accent);margin-top:1px}
.brand{margin-right:auto}
.topnav{font-size:14px;display:flex;gap:20px;white-space:nowrap}
/* 群の見出しとドロワー専用の項目は、既定（＝PC）では出さない。
   PCのヘッダーは 五十音／人気ランキング／新着作品／お気に入り の4項目のまま。
   960px幅でメニュー386px＋検索窓263pxと余裕が無く、増やすと折り返す。
   display:none にしておけば、フォーカストラップの focusables() が
   offsetParent で絞っているので、PCでは拾われない */
/* .only-drawer 単独（詳細度0,1,0）だと、あとに出てくる
   .topnav a{display:inline-flex}（詳細度0,1,1）に負けてPCでも出てしまう。
   実測でPCのヘッダーが75px→196pxになった。.topnav を足して 0,2,0 で勝たせる */
.nav-h,.topnav .only-drawer{display:none}
/* ハンバーガー。480px以上では出さない（PCは横並びのまま） */
/* ヘッダーの検索窓。PCは右端で可変幅（メニューの残り幅を使う）、スマホはメニューの中 */
/* flex-basis を小さくしておく。大きいと「縮む前に折り返す」ため、
   960px幅でも検索窓が2段目に落ちてしまう（実測で帯145px） */
/* .search（後に出てくる・同じ詳細度）の border:2px に負けるため、
   セレクタを .search.hsearch にして勝たせる */
.search.hsearch{flex:1 1 170px;max-width:420px;border-width:1px}
/* メニューの語は幅で使い分ける */
.lbl-short{display:none}
/* 長い語のままだと ブランド199 + 余白48 + メニュー386 + 検索窓228（プレースホルダが
   切れない最小）= 861px 要る。ビューポートに直すと 925px。
   それ未満（768〜924px）は短い語にして検索窓の幅を確保する */
@media (min-width:768px) and (max-width:924px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .topnav{gap:14px}
}
/* セレクタを .search.hsearch にしているのは、あとに出てくる .search input
   （同じ詳細度・ヒーローの検索窓と共通）に負けないため。
   .hsearch input のままでは padding:12px 14px が勝ってしまう */
/* 入力欄は16px以上にする。iOS Safari は実効 font-size が16px未満だと
   フォーカス時にビューポートを拡大し、フォーカスを外しても戻らない。
   user-scalable=no や maximum-scale で抑えるのはWCAG上できないので、
   文字サイズ側で満たす */
.search.hsearch input{padding:8px 12px;font-size:16px}
.search.hsearch button{padding:0 16px;font-size:13px}
/* 360px級の端末では長いプレースホルダ（226px）がはみ出すので、左右の余白だけ詰める */
@media (max-width:379px){
  .search.hsearch input{padding-left:8px;padding-right:8px}
}

/* ヘッダーのボタン（虫眼鏡・ハンバーガー・ドロワーの閉じる）は共通クラスにまとめる。
   個別に display の出し分けを書くと、条件が増えるたびに崩れる */
.hdr-btn{display:none;position:relative;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--ink);line-height:0}
.drawer-close{display:none}
.hdr-btn svg{width:22px;height:22px;display:block}
.hdr-btn[hidden]{display:none}
@media (max-width:767px){ .hdr-btn:not([hidden]){display:block} }
.navbtn{padding:8px 10px 8px 4px}
.navbtn-bars{display:block;width:22px}
.navbtn-bars i{display:block;height:2px;background:currentColor;border-radius:1px;
  margin:4px 0;transition:transform .15s,opacity .15s}
.navbtn.is-open .navbtn-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navbtn.is-open .navbtn-bars i:nth-child(2){opacity:0}
.navbtn.is-open .navbtn-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 閉じていても件数が分かるように、アイコンの右上に置く。
   実測で3本線に7px食い込んでいたので、外へ逃がして白で縁取る。
   寸法は .fav-badge（後に出てくる・同じ詳細度）に負けるので、
   セレクタを .fav-badge.navbtn-badge にして勝たせる */
.fav-badge.navbtn-badge{position:absolute;top:-3px;right:-2px;margin:0;
  min-width:15px;font-size:10px;line-height:15px;
  box-shadow:0 0 0 2px #fff}
/* バッジを確実に中央で揃えるため、リンク自体を inline-flex にする。
   vertical-align:middle は「ベースライン＋x-heightの半分」に合わせる指定で、
   和文フォントによって字面の位置が変わると、ずれて見えることがある。
   flex の align-items:center なら箱の中心どうしで揃うのでフォントに依存しない */
.topnav a{color:var(--ink-2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:5px}
.topnav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* 広告表記（ステマ規制）。全ページ共通で <main> の先頭に出る。
   装飾は付けない。臙脂の太字にしていたが、**規約に装飾の指定は無い**ので外した。
   色はフッターの注記3行と同じ --ink-3 に揃える。
   白地でのコントラスト比は3.27:1で WCAG AA の4.5:1を下回るが、
   規約に色の指定は無く、サイト内の注記の水準に合わせる判断（2026-08-17）。
   12px。10px以下は「客観的に視認される」と言えないので下げない */
.admark{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3)}

/* ---------- hero ---------- */
/* 検索フォームを外したぶん、上下を詰めて五十音索引を上に上げる
   （スマホで索引の開始位置が827px下だった） */
.hero{padding:clamp(20px,4vw,44px) 0 clamp(26px,4vw,40px)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--accent);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.hero-h{margin:0 0 16px;font-size:clamp(27px,3.9vw,36px);line-height:1.32;
  font-weight:800;letter-spacing:-.02em}
.hero-h em{font-style:normal;color:var(--accent)}
.hero-lead{margin:0 0 22px;max-width:48ch;color:var(--ink-2);font-size:15px}
/* 見出し・リード・検索をまとめて左カラムに入れ、右カラムを見出しの高さから始める。
   見出しを外に出すと、右カラムがその下からしか始まらず上が大きく空く。
   左右は 50:50。左を広く取ると検索窓が間延びし、右のカードも痩せる。 */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:stretch}
.hero-main{min-width:0}

.search{display:flex;border:2px solid var(--ink);border-radius:3px;overflow:hidden}
.search input{flex:1;min-width:0;border:0;padding:12px 14px;font:inherit;font-size:16px;background:#fff}
.search input:focus{outline:none}
.search button{border:0;background:var(--accent);color:#fff;font:inherit;font-weight:700;
  font-size:14px;padding:0 22px;cursor:pointer}
.search button:hover{background:var(--accent-dark)}
.search-note{margin:8px 0 0;font-size:12px;color:var(--ink-3)}

.stats{display:flex;flex-direction:column;gap:12px;justify-content:center}
.stat{border:1px solid var(--rule);border-left:4px solid var(--accent);
  padding:18px 22px 20px;background:var(--tint);border-radius:2px;flex:1;
  display:flex;flex-direction:column;justify-content:center}
.stat-k{font-size:12px;color:var(--ink-2);letter-spacing:.06em;margin:0;font-weight:700}
.stat-v{font-family:var(--mono);font-size:clamp(26px,3vw,28px);font-weight:700;
  color:var(--accent);margin:4px 0 0;line-height:1.15;letter-spacing:-.02em}
.stat-v small{font-size:12px;color:var(--ink-2);margin-left:4px;font-family:var(--sans)}
/* 図が何を表しているかを一行で言う。図だけだと飾りに見えるため */
.stat-n{font-size:10.5px;color:var(--ink-3);margin:5px 0 0;line-height:1.4;
  display:flex;justify-content:space-between;gap:10px;font-family:var(--mono)}
/* 実データの形。汎用アイコンではなくこのDBにしか描けない図 */
.spark{display:block;width:100%;height:30px;margin-top:14px;fill:var(--accent);opacity:.6}
.stat:hover .spark{opacity:.85}
/* 棒の下の目盛。棒と同じ座標計算でSVGに描くので位置が正確に揃う。
   44文字を280px幅に入れるため文字は極小。判読性は実機で要確認。 */
.spark-axis{display:block;width:100%;height:11px;margin-top:4px;
  fill:var(--ink-3);font-size:7px;text-anchor:middle}

/* ---------- section ---------- */
.block{padding:clamp(30px,5vw,52px) 0;border-top:1px solid var(--rule)}
.block-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.block-h,.page-h{margin:0;font-weight:800;letter-spacing:-.01em}
.block-h{font-size:clamp(17px,2vw,18px);padding-left:12px;border-left:4px solid var(--accent)}
.block-sub{font-size:12px;color:var(--ink-3)}
.page-h{font-size:clamp(23px,3.2vw,28px);padding-top:8px}
.page-lead{margin:6px 0 24px;color:var(--ink-2);font-size:14px}
.mini-h{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin:0 0 8px}
.note{margin:14px 0 0;font-size:12px;color:var(--ink-3)}
.empty{color:var(--ink-3)}

/* 折り返さず横スクロールにする（.works.is-rail と同じ方式）。
   折り返すと2行になって高さが変わり、下の内容の位置が作品ごとにずれる。
   右端は余白いっぱいまで伸ばし、続きがあることが見えるようにする。
   開始位置は左端のまま。先頭の「ホーム」「女優名」が移動先のリンクで、
   末尾の作品名はすぐ下の見出しと同じ内容なので、隠れて困るのは先頭側 */
.crumbs{font-size:12px;color:var(--ink-3);padding:16px 0 0;
  white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
.crumbs::-webkit-scrollbar{display:none}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 7px;color:var(--rule)}

/* ---------- 五十音図 ---------- */
.gojuon{border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.gj-row{display:grid;grid-template-columns:repeat(5,1fr)}
/* かなを中央に置き、件数はその下。横並びだと「あ 4,488」が一語に見えてしまう */
.gj-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:10px 4px 8px;text-decoration:none;background:#fff;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:background .12s,color .12s}
.gj-row:last-child .gj-cell{border-bottom:0}
.gj-cell:nth-child(5n){border-right:0}
a.gj-cell:hover{background:var(--accent);color:#fff}
.gj-kana{font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.2}
.gj-num{font-family:var(--mono);font-size:11px;color:var(--accent);line-height:1.3}
.gj-num small{font-size:9px;margin-left:1px;font-family:var(--sans)}
a.gj-cell:hover .gj-num{color:#fff}
.gj-cell.is-off{background:var(--tint);color:var(--ink-3)}
.gj-cell.is-off .gj-num{color:var(--ink-3)}
.gj-cell.is-empty{background:var(--tint)}

/* ---------- 頭文字プレースホルダ ---------- */
.initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--accent-tint);color:var(--accent);font-weight:800;font-size:1.4rem;line-height:1}
/* 女優の顔写真は 125x125 の正方形なので、枠も正方形にする。
   以前は aspect-ratio:147/200（作品サムネイルの比率）が入っており、
   写真のある女優は125x125、無い女優は125x169と高さが食い違っていた。
   **画像の無い女優が28,849人（65.2%）で、そちらの方が多い**（2026-08-17 実測）*/
.initial-lg{font-size:3.4rem;aspect-ratio:1/1;height:auto}

/* 作品一覧の下のCTA。一覧とページ送りの間で息継ぎさせる */
/* 下のページャーとの間隔は40px（margin 10 + .pager の padding-top 30）。
   近すぎると誤タップする */
/* 下のページャーとの間隔は40px（margin 10 + .pager の padding-top 30）。
   中央寄せは .cta-out が自前で持つので、ここでは指定しない */
.cta-wrap{margin:26px 0 10px}

/* ---------- お気に入り ---------- */
/* ☆はリンクの中に置けないので、どこでも <a> の兄弟として置いている。
   画像の上には重ねない（規約の「加筆」を避けるため）。名前の行の右端に出す */
/* 字形はSVG。文字の☆★はAndroid等で絵文字として描かれ、字送り・縦位置・色が
   環境で変わるため使わない。色は currentColor でSVGに渡す */
.fav{background:none;border:0;cursor:pointer;line-height:0;padding:3px 5px;
  color:var(--ink-3);border-radius:2px;display:inline-flex;align-items:center}
.fav svg{width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.fav:hover{color:var(--accent)}
.fav.is-on{color:var(--accent)}
.fav.is-on svg{fill:currentColor}
/* 女優詳細は名前の右。名前の文字サイズに合わせて少し大きく、上下は中央で揃える */
/* vertical-align:middle は行ボックスの中央に合わせるため、和文の字面に対しては
   わずかに下がって見える。実測の差（28pxで5px）を em で戻す */
.fav-lg{padding:0 0 0 8px;vertical-align:middle;position:relative;top:-0.12em}
.fav-lg svg{width:clamp(20px,2.6vw,24px);height:clamp(20px,2.6vw,24px);stroke-width:1.6}
/* margin-left と vertical-align は使わない（親の gap と align-items で揃える）。
   .navbtn-badge は絶対配置なので、この指定の影響を受けない */
.fav-badge{display:inline-block;min-width:17px;padding:0 4px;
  background:var(--accent);color:#fff;border-radius:2px;
  font-family:var(--sans);font-weight:700;font-size:11px;line-height:17px;
  text-align:center;letter-spacing:0}
/* display を指定した要素は hidden 属性が効かなくなる（UAの display:none を上書きするため）。
   0件のときに「0」が出たままになるので、明示的に消す */
.fav-badge[hidden]{display:none}
/* 女優詳細：名前の行の右端 */
/* h1 を inline にすると、☆が最後の文字のすぐ右に付き、
   名前が長くて折り返しても離れない（最長19字でも崩れない） */
.page-h-row{display:block}
.page-h-row .page-h{display:inline}
/* 名簿の行：リンクと☆を横に並べ、それぞれの領域を確保する。
   ☆を絶対配置にしていたときは、あとから来る .roster-link の
   padding 一括指定（padding:9px 8px）に負けて余白が消え、
   件数の文字と23px重なっていた。flex なら領域が確実に確保される */
.roster-row{display:flex;align-items:center}
.roster-link{flex:1;min-width:0}
.roster-row .fav{flex:0 0 auto;margin-right:4px}

/* トースト。操作の直後に、何が起きたかと保存先を伝える */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:200;
  width:min(560px,calc(100vw - 24px));background:var(--ink);color:#fff;
  padding:14px 16px;border-radius:2px;font-size:13px;line-height:1.65;
  box-shadow:0 6px 24px rgba(0,0,0,.28)}
.toast[hidden]{display:none}
.toast a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}
.toast-note{display:block;margin-top:4px;font-size:11.5px;color:#C9C6C8}

/* ---------- 分類の一覧（ジャンル等） ---------- */
/* 件数順に175件並ぶので、名前と件数を1行1件で敷き詰める。
   タグ状に流すと件数が読みにくく、目で走査できない */
.taxo{list-style:none;margin:0;padding:0;display:grid;gap:6px 14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* height:100% で <a> を行の高さまで伸ばす。
   <li> はグリッドの子なので既定（align-items:normal＝stretch）で行の高さまで
   伸びているが、中の <a> は内容ぶんの高さしか持たず、枠線だけが不揃いに見えていた。
   実測：シリーズは幅960pxで50行中34行が不揃い。3行以上は最大3件（1.5%）しかないので、
   揃えたときにできる余白は多くの行で23.7px（2行と1行の差）に収まる。
   分類名は識別子なので、切り詰めずに全部読ませる方を採る。
   align-items:baseline は残す。件数の数字が名前の1行目のベースラインに揃う */
.taxo a{display:flex;align-items:baseline;gap:8px;text-decoration:none;height:100%;
  padding:7px 10px;border:1px solid var(--rule);border-radius:2px;font-size:13.5px}
.taxo a:hover{border-color:var(--accent);color:var(--accent)}
.taxo-n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* 並び順の切り替え（一覧の上）と「五十音の一覧へ戻る」（一覧の下）。
   **上下対称にする。**下だけ 18px だったため、一覧・五十音図・ページャーの
   直下に置いたときに間隔が 0px になり、詰まって見えた（2026-08-19 実測）。
   18px は同じ要素の margin-bottom と揃えたもので、新しい数値ではない。
   6px（li 同士）は同種の並びの値、24px（page-lead）はリード文と本体の
   区切りの値なので、どちらも役割が違う。 */
.taxo-order{margin:18px 0;font-size:13px;color:var(--ink-3)}
.taxo-order a{color:var(--accent)}
/* 五十音図の直下に置く「読み仮名が未登録」への導線。
   図の中に入れると「五十音のどこか」に見えるので、外に出している */
.kana-other{margin:14px 0 18px;font-size:13px;color:var(--ink-3)}
.kana-other a{color:var(--accent)}
.kana-other small{font-size:12px}
/* 五十音順のときの行見出し（あ行・か行…） */
.taxo-row{margin:22px 0 8px;font-size:15px;font-weight:800;
  padding-left:10px;border-left:3px solid var(--accent)}
.taxo a:hover .taxo-n{color:var(--accent)}

/* ---------- 女優名簿 ---------- */
.roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.roster-row{border-bottom:1px solid var(--rule)}
.roster-link{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;
  padding:9px 8px;text-decoration:none}
.roster-link:hover{background:var(--accent-tint)}
.roster-face{width:42px;height:42px;overflow:hidden;border-radius:2px;background:var(--tint);
  display:flex;align-items:center;justify-content:center}
.roster-face img{max-width:100%;max-height:100%;width:auto;height:auto}
.roster-text{min-width:0}
.roster-name{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-ruby{display:block;font-size:11px;color:var(--ink-3);line-height:1.4}
.roster-count{font-family:var(--mono);font-size:13px;color:var(--accent);white-space:nowrap}
.roster-count small{font-size:10px;color:var(--ink-3);margin-left:2px;font-family:var(--sans)}

/* ---------- 女優カード ---------- */
/* 列数は auto-fill にせず幅ごとに固定する。
   自動だと端末幅で 2列/3列 が変わり、何件にしても端数が出る。
   3・4・6 はすべて 12 の約数なので、12件ならどの幅でも割り切れる。 */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:18px 14px;align-items:start;
  grid-template-columns:repeat(6,minmax(0,1fr))}
.card{position:relative}
.card-link{text-decoration:none;display:block}
/* 名前と☆を1行に。名前はリンク、☆はボタンなので別要素として横に並べる */
.card-row{display:flex;align-items:flex-start;gap:2px;margin-top:8px}
.card-name{flex:1;min-width:0}
.card-row .fav{flex:0 0 auto;margin-top:-2px}
/* 女優画像はほぼ全件が 125x125 の正方形。枠に比率を持たせて、
   未読込や欠測でカードの高さが変わらないようにする。
   **「全件」ではない。**実測（2026-08-17）：
     女優ページのある女優 200件 … 125x125 が199件 / 125x124 が1件
     全女優 100件          … 125x125 が98件 / 90x122 が2件
   正方形でない画像は object-fit:contain で余白が入るだけで、歪まない */
.card-img{display:block;background:#fff;line-height:0;border-radius:2px;overflow:hidden;
  border:1px solid var(--rule);aspect-ratio:1/1}
.card-img img{width:100%;height:100%;object-fit:contain}
/* ホバーの枠は画像の外側に、白＋臙脂の二重で描く。内側や1pxの枠だと
   暗い画像の縁と同化して見えない。白の輪が画像と臙脂の間に必ず入るので、
   画像の明暗によらず臙脂が読める。地が白なので白い輪は背景に溶ける */
.card:hover .card-img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.card-name{display:block;font-weight:700;font-size:12.5px;line-height:1.45;text-decoration:none}
.card-meta{display:block;font-family:var(--mono);font-size:11px;color:var(--accent)}

/* ---------- 作品一覧 ---------- */
.works{list-style:none;margin:0;padding:0;display:grid;gap:22px 14px;align-items:start;
  grid-template-columns:repeat(6,minmax(0,1fr))}
.wk a{text-decoration:none;display:block}
/* 比率は枠に持たせる。img 側に置くと、画像が読み込まれる前や失敗したときに
   枠が潰れてタイトルの位置がずれる。contain なので歪まず、切り抜きもしない
   （CDNは147x200で返すが、想定外の寸法が来ても崩れない） */
.wk-img{display:block;background:#fff;line-height:0;border-radius:2px;overflow:hidden;
  aspect-ratio:147/200}
.wk-img img{width:100%;height:100%;object-fit:contain}
.wk:hover .wk-img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.wk-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:9px;font-size:12px;line-height:1.55}
.wk:hover .wk-title{color:var(--accent)}
.wk-meta{display:flex;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}

/* ---------- プロフィール ---------- */
/* 写真の列幅は配信実寸の125pxちょうど。以前は220pxで174%に引き伸ばしていた。
   名前とふりがなは .profile の外（layout.php）。画像を持たない女優が65%いるため、
   写真を先頭にするとプレースホルダが最初に来てしまう */
.profile{display:grid;grid-template-columns:125px minmax(0,1fr);
  gap:clamp(20px,4vw,40px);padding:14px 0 8px;align-items:start}
.profile-face{max-width:125px;background:#fff;border:1px solid var(--rule);
  line-height:0;border-radius:2px;overflow:hidden}
.profile-face img{width:100%;height:auto}
.profile-ruby{margin:4px 0 14px;color:var(--ink-3);font-size:13px}
.profile-alias{font-size:12px;color:var(--ink-3);margin:0 0 14px;padding:8px 12px;
  background:var(--tint);border-left:3px solid var(--rule);border-radius:2px}

/* 上端の罫も他と同じ細い灰にする。2px の黒だと表がジャケットを断ち切って見える */
.spec{margin:0 0 22px;border-top:1px solid var(--rule)}
.spec > div{display:grid;grid-template-columns:6rem 1fr;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.spec dt{margin:0;color:var(--ink-3);font-size:11.5px;align-self:center}
.spec dd{margin:0}
.spec a{color:var(--accent)}

/* ---------- 作品詳細 ---------- */
/* タイトルと品番は2カラムの外。全幅で動画の直下に置く（layout.php）。
   中に入れると狭幅で1カラムになったとき、ジャケットがタイトルより先に来る */
.work-head{padding:22px 0 0}
.work-head .pid{margin-bottom:0}
/* align-items:start が要る。既定の stretch だと左のジャケット枠が
   右カラムの高さまで引き伸ばされ、画像の下に空白が残る
   （出演者やジャンルが多い作品ほど右が伸びるので、最大449pxの空白が出ていた）。
   枠自体は必要。ジャケットは白い余白が焼き込まれた画像なので、
   白地に直接置くと輪郭が消える（.card-img や .profile-face と同じ理由） */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,40px);padding:22px 0;align-items:start}
.work-visual{background:#fff;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
/* 既定の object-fit は fill。今は height:auto なので歪んでいないが、
   箱に固定の高さが入った瞬間に引き伸ばされる。規約は拡大・縮小のみなので
   contain を明示しておく */
.work-visual img{object-fit:contain}
.work-h{margin:0 0 10px;font-size:clamp(19px,2.3vw,22px);line-height:1.5;font-weight:800}
.pid{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#fff;background:var(--accent);
  display:inline-block;padding:2px 9px;border-radius:2px;margin:0 0 18px;text-transform:uppercase}
.cast,.tags{margin-bottom:20px}
.cast-list,.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
/* 角丸は 2px。白地・細い罫・臙脂という構成の中で完全な円形は浮く。
   すぐ上の品番バッジや画像枠と同じ値に揃える（2pxが標準・大面だけ3px） */
.cast-list a,.tag-list a{display:inline-block;padding:4px 12px;border:1px solid var(--rule);
  border-radius:2px;text-decoration:none;font-size:13px}
/* 形・余白・太さは共通。出演とジャンルの差は文字色だけにする。
   枠まで臙脂にすると、ジャンルが10個以上並ぶ作品で画面が赤くなる */
.cast-list a{color:var(--accent)}
.cast-list a:hover,.tag-list a:hover{border-color:var(--accent);color:var(--accent)}
/* 列を固定する。高さ揃え・幅可変だと行末に必ず余白が出る。
   縦長・横長が混ざるため枠内に contain で収める。切り抜きは規約上できない。
   枠に地色を敷くと余白が帯になって目立つので、地は透明のままにする。

   枠は 16:9。実測358枚で 16:9 より横長の画像は1枚も無かった（最大1.778）ため、
   16:9の枠なら全画像が枠の高さいっぱいになり、見た目の高さのばらつきが0になる。
   4:3枠だと 16:9画像は枠高の75%しか使わず、縦長画像（大画像の10%）だけが
   高さいっぱいになるので、その1枚が飛び出して見えていた。
   差は横幅にだけ出る（縦長画像は細くなる）。 */
.samples{list-style:none;margin:0;padding:0;display:grid;gap:6px;
  grid-template-columns:repeat(6,minmax(0,1fr))}
.samples a{position:relative;line-height:0;border-radius:2px;
  aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* 枠いっぱいに広げる。width:auto だと元画像が枠より小さいときに拡大されず、
   画像のまわりに空きが出る。contain は比率を保つだけで切り抜かない */
.samples a img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
/* 隙間が6px（片側3px）しかないので輪は3pxまで。z-index で隣より前面に出す */
.samples a:hover{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--accent);z-index:1}
/* 大画像が無い作品は a でラップしない（layout.php）。枠と大きさは同じにして
   並びを崩さないが、拡大できないので zoom-in カーソルと hover 枠は付けない */
.samples > li > img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:2px}

/* ---------- サンプル動画 ---------- */
/* 高さは幅の 0.75 倍（4:3）でよい。ヘッドレスブラウザで実測した結果、
   litevideo の映像枠は 4:3 固定（幅×0.75）で、タイトルも操作バーも
   その枠に重なるオーバーレイだった。段組ではないので足し算は要らない。
   4:3作品でも16:9作品でも枠の寸法は同じ（16:9は枠内で上下に黒帯が入る）。
   以前の「タイトル帯＋動画(16:9)＋操作バー の3段」という前提は誤りで、
   JS による高さ計算（sizeMovie）もその前提だったため削除した。
   max-width は 720px。4:3なので高さは540pxに収まり、動画が主役にならない */
.movie{position:relative;width:100%;max-width:720px;aspect-ratio:4/3;
  margin:18px auto 4px;background:#000;border-radius:3px;overflow:hidden}
.movie iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ---------- ライトボックス ---------- */
/* 画像とボタンを縦に密着させて、その塊を画面中央に置く。
   stage に flex:1 を与えると余った縦空間ぶんボタンが下へ押し出される。 */
.lb{position:fixed;inset:0;z-index:100;background:rgba(12,10,11,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:12px}
.lb[hidden]{display:none}
/* 画像を入れる領域の大きさを先に確保する。ここが可変だと、画像の比率によって
   下の操作バーの位置が上下に動く（スマホで実測156px動いていた）。
   PCで動かなかったのは、窓が横長で常に「高さ基準」に入り
   画像の高さが72vhで一定になっていたため。領域を固定すれば両方で止まる。
   174px = padding 12*2 + gap 16*2 + 操作バー46 + サムネイル72。
   画面が低いとき（横向きのスマホ）に操作バーがはみ出さないよう min() で抑える */
.lb-stage{display:flex;align-items:center;justify-content:center;
  width:min(96vw,1280px);height:min(72vh,calc(100vh - 174px))}
/* 寸法は JS が比率を見て決める。
   width を固定して max-height で頭打ちにすると、縦だけ縮んで画像が横に伸びる。
   規約上も画像を歪める加工はできないため、比率は必ず保つ。 */
.lb-img{display:block;border-radius:2px}
.lb-bar{display:flex;align-items:center;gap:10px;z-index:2}
.lb-bar button{background:rgba(255,255,255,.14);color:#fff;border:0;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.lb-bar button:hover{background:rgba(255,255,255,.28)}
.lb-count{margin:0 6px;color:#fff;font-family:var(--mono);font-size:14px;
  min-width:64px;text-align:center}
.lb-play.is-on,.lb-thumbs-btn.is-on{background:var(--accent)}

/* 再生・一時停止の形はCSSで描く。▶ や ❙❙ の記号はフォント依存で、
   iOSでは細く見えるなど環境によって太さが変わってしまう */
.lb-play{position:relative}
.lb-play i{position:absolute;background:#fff;display:block}
/* 停止中は三角（再生）。ボーダーで三角を作る */
.lb-play i:first-child{
  top:50%;left:50%;transform:translate(-40%,-50%);
  width:0;height:0;background:none;
  border-left:15px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent}
.lb-play i:last-child{display:none}
/* 再生中は縦棒2本（一時停止） */
.lb-play.is-on i{
  top:50%;width:4.5px;height:17px;border:0;background:#fff;border-radius:1px;
  transform:translateY(-50%)}
.lb-play.is-on i:first-child{left:16px}
.lb-play.is-on i:last-child{display:block;right:16px}

/* サムネイル列。既定で表示する。
   閉じるときは visibility で消し、場所は空けたままにする。
   display:none にすると画像が上下にガタついてしまう。 */
.lb-thumbs{flex:0 0 auto;max-width:100%;height:72px;
  display:flex;gap:6px;overflow-x:auto;padding:8px;
  background:rgba(0,0,0,.5);border-radius:3px;scrollbar-width:none}
.lb-thumbs.is-off{visibility:hidden}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumb{flex:0 0 auto;width:auto;height:52px;padding:0;border:2px solid transparent;
  border-radius:2px;background:#000;cursor:pointer;overflow:hidden;line-height:0}
/* DMMアフィリエイトの規約で、画像の加工は拡大・縮小のみ。
   「NG例：切り抜く」と明示されている。cover だと 533×800 の縦長を
   74×52 の横長の箱に入れることになり、長辺の約54%が切れていた（実測）。
   contain にして全体を入れ、余白は箱の地色で埋める。
   選択中でないものを暗くする opacity も、規約の文言から外れるので外した */
/* 幅は画像の比に任せる（高さだけ52pxに揃える）。
   サンプル画像は同じ作品の中で縦長と横長が混在するので、箱を固定幅にすると
   どちらかに大きな余白が出る。実測で箱の中の余白 30.1% → 2.9% になる */
.lb-thumb img{width:auto;height:100%;object-fit:contain}
/* 選択中の区別は枠線だけで表す（減光は使わない）。
   地が黒に近いので、臙脂の枠の外側に白を1px重ねて二重にする。
   サンプル画像のホバー枠と同じ手法（画像の外側に白＋臙脂） */
.lb-thumb.is-current{border-color:var(--accent);box-shadow:0 0 0 1px #fff}
.lb-thumb:hover{border-color:var(--ink-3)}
.lb-thumb.is-current:hover{border-color:var(--accent)}


/* ---------- 関連作品（横スクロール） ---------- */
/* PCはグリッドのまま。マウスでは横スクロールが操作しづらい */
.block-more{margin-left:auto;font-size:12px;color:var(--accent);text-decoration:none}
.block-more:hover{text-decoration:underline}

/* ---------- CTA ---------- */
.cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:12px 28px;border-radius:3px;font-weight:700;font-size:14px}
.cta:hover{background:var(--accent-dark)}
/* 上部のCTAは従。臙脂の塗り面は1ページにひとつ（下部のCTA）だけにする */
/* 枠線ぶんの padding 調整は .cta-out.cta-ghost 側に持たせている。
   ここに書くと同じ値の二重指定になり、検査で打ち消しとして出る */
.cta-ghost{background:none;color:var(--accent);border:1px solid var(--accent)}
.cta-ghost:hover{background:var(--accent-tint);color:var(--accent-dark);
  border-color:var(--accent-dark)}
/* FANZAへの送客ボタンだけの形。ページ内の移動（トップへ戻る等）には付けない。
   スマホで全幅にするのは、親指で押しやすく、ブロックの区切りにもなるため。
   PC 960pxで全幅にすると横896pxで間延びするので 420px で止める。
   .cta-ghost より後に書いて、枠線1pxぶんを引いた padding を勝たせる */
.cta-out{display:block;width:100%;max-width:420px;margin-inline:auto;
  text-align:center;padding:12px 28px;box-sizing:border-box}
.cta-out.cta-ghost{padding:11px 27px}
/* 上のCTAはグリッドの全幅行にする。右カラムの中に置くと、その幅で中央寄せに
   なるため、下部のCTA（コンテンツ幅で中央寄せ）と左端が揃わない。
   全幅行にすれば上下のCTAの左端・幅が一致する。
   行の隙間は .profile / .work の gap（PCで40px）が入るので、上だけ詰める */
.profile>.cta-top,.work>.cta-top{grid-column:1/-1;margin:0}
/* 下のCTAが指す作品名。ボタンと左端・右端を揃える（.cta-out と同じ 420px・中央寄せ）。
   2行で切る。作品名は最長149字あり、全文を出すと帯になる
   （実測：全477,329件の平均33.4字、41字以上が27.7%）。
   ボタンの一部に見えないよう、塗りも枠も付けず、色は本文寄りの --ink-2 にする */
.cta-target{max-width:420px;margin:0 auto 8px;
  font-size:12px;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- ページ送り ---------- */
.pager{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;padding:30px 0 4px}
.pager-num,.pager-step{display:inline-block;min-width:38px;padding:7px 11px;text-align:center;
  border:1px solid var(--rule);text-decoration:none;font-family:var(--mono);font-size:13px;border-radius:2px}
.pager-step{font-family:var(--sans)}
.pager-num:hover,.pager-step:hover{border-color:var(--accent);color:var(--accent)}
/* 臙脂の塗り面はCTAだけにする。現在地は淡い地＋臙脂枠＋太字で十分に分かる */
.pager-num.is-current{background:var(--accent-tint);border-color:var(--accent);
  color:var(--accent);font-weight:700}
.pager-gap{color:var(--ink-3);padding:0 2px}

/* ---------- 固定ページ ---------- */
/* 本文の行長だけを絞る。68ch は和文で42字（実測：和文1字15.35px、
   .doc の幅649px）で、読みやすさの目安35〜45字に収まる。
   .doc 自体を絞ると表（.spec）や見出しまで649pxで止まり、
   960pxのうち右247pxが空いて見えるので、絞るのは段落・箇条書きだけにする。
   子孫セレクタにしているのは、/faq/ の段落が .qa の中に入っていて
   直下（>）では届かないため */
.doc{
  /* 読書幅。`68ch` を本文の font-size:15px で解いた値（実測 648.955px ≒ 649px・約42字）。
     **`ch` は要素自身の font-size で解決される。**
     17px の h2 に `68ch` と書くと 804px になり、段落（649px）と揃わない（実測）。
     ここで px に確定させて、見出しも段落も同じ幅を使う */
  --read:649px;
  max-width:none;font-size:15px}
/* 見出しも段落と同じ読書幅に揃える。
   **896pxのページの中に、649pxの読書カラムが左寄せで存在する**構成。
   見出しだけ896pxを使っていると、そちらが本来の本文幅に見えてしまい、
   右の247pxが「欠け」に見える。左端は全部揃え、右端だけを変える。
   表（.spec）は896pxのまま（読む幅ではなくデータの幅）。
   h3以降は現在使っていないが、足したときに揃うように含めてある */
.doc p,.doc ul,.doc ol,.doc h2,.doc h3,.doc h4{max-width:var(--read)}
.doc h2{font-size:17px;font-weight:800;margin:32px 0 10px;padding-left:11px;
  border-left:4px solid var(--accent)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:1.4em}
.doc li{margin-bottom:5px}
.doc a{color:var(--accent)}
/* .doc a（詳細度0,1,1）は .cta{color:#fff}（0,1,0）に勝ってしまう。
   固定ページの中の送客ボタンは文字と地が同じ臙脂になり、
   コントラスト比 1:1 で文字が消えていた（/guide/fanza/ で実測）。
   ここで .doc の中だけ .cta 側を勝たせる */
.doc .cta{color:#fff}
/* 表も読書幅に揃える。896px にしていたが、実測で dd に必要な幅は最大556px
   （/legal/ の「サービス内容」）で、790px の箱に234pxの空きが常にあった。
   649px に戻すと折り返しが増えるのは34行中1行だけ。
   罫線が本文より右へ伸びて段差が繰り返し出る方が目立つ */
.doc .spec{margin:0 0 20px;max-width:var(--read)}
/* 固定ページの本文で、文ごとに改行するための <br>。**PCだけ効かせる**。
   スマホは読書幅（649px）より狭いので、どこで改行しても結局折り返す。
   改行が意図した位置で働かないまま行数だけ増えるので無効にする。
   命名は .lbl-full / .lbl-short（幅で出し分ける前例）に合わせて 要素-用途 の形 */
.br-pc{display:inline}
.qa{border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:6px}
.qa h2{margin-top:22px}
.ok{background:var(--accent-tint);color:var(--accent);padding:12px 16px;
  border-radius:2px;font-weight:700}
.err{color:var(--accent);font-size:13px;margin:6px 0 0;font-weight:700}

/* ---------- フォーム ---------- */
.form{max-width:640px;margin-top:22px}
.field{margin-bottom:22px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.req,.opt{display:inline-block;font-size:10px;padding:2px 7px;border-radius:2px;
  margin-left:6px;vertical-align:2px;font-weight:700}
.req{background:var(--accent);color:#fff}
.opt{background:var(--tint);color:var(--ink-3);border:1px solid var(--rule)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:16px;
  border:1px solid var(--rule);border-radius:2px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field textarea{resize:vertical;min-height:160px;line-height:1.7}
.hint{font-size:12px;color:var(--ink-3);margin:6px 0 0}
/* Turnstile のウィジェット。.field と同じ下余白（22px）に揃える。
   幅は data-size="flexible" が親に追従するので指定しない */
.cf-turnstile{margin:0 0 22px}
/* JS無効時の案内。フォームの中に出るので .field と同じ下余白にする */
noscript .err{margin:0 0 22px}
button.cta{border:0;cursor:pointer;font-family:inherit}

/* ---------- サイトマップ ---------- */
.sm-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.sm-list a{color:var(--accent);text-decoration:none;font-size:14px}
.sm-list a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.foot{border-top:3px solid var(--accent);background:var(--tint);margin-top:40px;
  padding:24px 0 28px;font-size:13px;color:var(--ink-2)}
/* PCは4列。ブランド列を広く取り、説明文2行が収まるようにする */
.foot-main{display:grid;grid-template-columns:1.8fr 1.9fr 1.25fr 1.25fr;gap:20px}
.foot-brand{min-width:0}
.foot-name{margin:0;font-weight:800;font-size:15px;color:var(--ink)}
.foot-en{margin:2px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;color:var(--accent)}
.foot-about{margin:12px 0 0;font-size:12px;line-height:1.85;color:var(--ink-2)}
.foot-h{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin:0 0 10px}
/* JSが見出しの中身をボタンに差し替えるので、既定ではボタンらしさを消して
   見出しと同じ見た目にする（PCでは押す必要がない） */
.foot-h-btn{display:block;width:100%;padding:0;background:none;border:0;
  font:inherit;color:inherit;text-align:left;cursor:default}
@media (min-width:768px){ .foot-h-btn{pointer-events:none} }
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:6px}
.foot-col a{color:var(--ink-2);text-decoration:none;font-size:13px}
.foot-col a:hover{color:var(--accent)}
/* 「探す」は6項目あるので、見出しは1つのまま中身だけ2段に流す。
   縦に6つ並べると、この列だけ他の倍の高さになる */
.foot-find ul{columns:2;column-gap:16px}
.foot-find li{break-inside:avoid}

/* SNS・RSSは円形のアイコン。地は白のまま（臙脂の丸が2つ並ぶと視線を引きすぎる）。
   Xのロゴは色を変えずに黒で出す（ブランドガイドラインで改変が制限されるため）。
   RSSは一般的なアイコンなので臙脂で塗る */
.foot-social{list-style:none;display:flex;gap:10px;margin:16px 0 0;padding:0}
.foot-icon{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:#fff;
  border:1px solid var(--rule);text-decoration:none}
.foot-icon svg{width:16px;height:16px;display:block}
.foot-icon-x svg{fill:var(--ink)}
.foot-icon-rss svg{fill:var(--accent);color:var(--accent)}
.foot-icon:hover{border-color:var(--accent);background:var(--accent-tint)}

.foot-notes{margin-top:30px;padding-top:20px;text-align:center;font-size:12px;
  color:var(--ink-3);border-top:1px solid var(--rule)}
.foot-notes p{margin:0 0 4px}
/* この2つは .foot-notes の中の <p> なので、あとに書いても
   .foot-notes p{margin:0 0 4px}（詳細度0,1,1）に負ける。
   セレクタを .foot-notes .foot-credit の形にして勝たせる */
.foot-notes .foot-credit{margin:12px 0 0;font-size:12px;color:var(--ink-3)}
/* クレジット表示のリンクには色を指定しない。既定のHTMLソースをそのまま出す
   決まりで、CSSの装飾が「改変」に当たるかが判断できないため（2026-08-17） */
.foot-notes .foot-copy{margin:8px 0 0;font-size:11px;color:var(--ink-3)}

/* ---------- 狭幅 ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  /* 中間幅は横2列。グラフを描ける幅がまだ残っている */
  .stats{flex-direction:row}
  .stat{flex:1;min-width:0;padding:14px 16px 16px}
}
@media (max-width:900px){
  /* タブレット：4列 */
  .cards,.works{grid-template-columns:repeat(4,minmax(0,1fr))}
  .samples{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  /* 狭幅では縦積み。2列だとグラフが潰れ、45文字の目盛が読めなくなる */
  .stats{flex-direction:column}
  .stat{padding:14px 18px 16px}
}
/* 覆い。ライトボックス rgba(12,10,11,.94) と同系にして色を増やさない。
   z-index はライトボックス(100)・トースト(200)より下。
   ドロワーは .masthead（z-index:20 で重なりの文脈を作る）の内側にあるため、
   ドロワー自身の z-index:90 はヘッダーの中でしか効かない。
   開いている間だけヘッダーごと覆いより上に出す（下の .drawer-open） */
.scrim{position:fixed;inset:0;z-index:89;background:rgba(12,10,11,.45)}
.drawer-open .masthead{z-index:95}
.scrim[hidden]{display:none}

/* 767px以下はハンバーガー。480〜767pxでも
   ブランド+メニュー+検索窓は1行に収まらない（実測で帯200px）ため、
   スマホと同じ扱いにして帯を66pxに保つ */
@media (max-width:767px){
  .hdr-btn{margin-left:0}
  #searchbtn{margin-left:auto}
  /* 検索窓もメニューの中に入れる。常時表示にすると帯が縦に伸びてしまう */
  /* 基底を .search.hsearch に上げたので、こちらも同じ詳細度にしないと負ける */
  .search.hsearch{display:none;order:3;width:100%;flex-basis:auto;margin:10px 0 2px}
  .search.hsearch.is-open{display:flex}
  /* JSが無いとき（html に js が付かない）は、従来どおりヘッダー直下に
     開いたまま縦に並べる。押しても閉じないボタンを出さないための作り */
  .topnav{display:flex;order:4;width:100%;margin:0;border-top:1px solid var(--rule);
    flex-direction:column;gap:0;padding-top:2px}
  .topnav a{padding:11px 2px;border-bottom:1px solid var(--rule)}
  .topnav a:last-child{border-bottom:0}

  /* JSがあるときだけドロワーにする。開閉は transform だけで動かす
     （width や right を動かすとレイアウトの再計算が走る） */
  .js .topnav{position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(300px,82vw);max-width:none;margin:0;padding:56px 14px 24px;
    background:#fff;border-top:0;border-left:1px solid var(--rule);
    z-index:90;overflow-y:auto;
    transform:translateX(100%);
    transition:transform .18s ease-out}
  /* visibility を transition に含めると、開くときの切り替わりが
     アニメーションの途中まで遅れ、フォーカスを当てられない。
     開くときは即座に visible、閉じるときだけ .18s 後に hidden にする */
  .js .topnav:not(.is-open){visibility:hidden;
    transition:transform .18s ease-out,visibility 0s .18s}
  .js .topnav.is-open{transform:none;visibility:visible}
  .js .topnav a{padding:13px 4px;font-size:15px}
  /* 追加項目と見出しは JS がある時だけ出す。JS無効時はアコーディオンなので、
     11項目を縦に並べるとヘッダーが283px→821pxになり本文が押し出される（実測）。
     JS無効でも分類5種はフッターの「探す」から辿れる */
  .js .topnav .only-drawer{display:block}
  .js .topnav .nav-h{display:block;margin:16px 0 2px;padding:0 4px;
    font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
  .js .topnav .nav-h:first-of-type{margin-top:0}
  /* お気に入りは上の3群と性質が違うので間を空ける。
     直前の項目の border-bottom が区切り線になるため、線は足さない */
  .js .topnav .nav-fav{margin-top:14px}
  /* 閉じるボタンはドロワーの右上 */
  .drawer-close{position:absolute;top:8px;right:8px}
  .js .drawer-close:not([hidden]){display:block}
  /* スマホ：3列に固定。auto-fill のままだと 360px 端末が2列、
     440px 端末が3列になり、機種で並びが変わってしまう */
  .cards,.works{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
  /* 3列のままタイトルを3行にする。1行9字なので2行では18字しか入らず、
     全文が収まるのは35.5%どまり。3行なら27字＝57.9%が収まる。
     2列にすると同じ57.9%になるがサムネが実寸147pxを超えて拡大され、
     1画面の件数も半減するので列数は変えない */
  .wk-title{-webkit-line-clamp:3}
  .card-name,.wk-title{font-size:12px}
  .card-meta,.wk-meta{font-size:10px}
  /* スマホ：リンク群は1列のアコーディオン。ブランドはその下に回す */
  .foot-main{grid-template-columns:1fr;gap:0}
  /* margin-top:0 / padding-top:13px は、上の見出しどうしの間隔に合わせた値。
     見出しは padding:13px なので、線の前後を同じ13pxにすると
     「文字の下端→線」「線→次の文字の上端」が他の項目と1px以内で揃う
     （旧 margin-top:18px / padding-top:22px では、この区間だけ28.1px広かった） */
  .foot-brand{order:9;padding-top:13px;border-top:1px solid var(--rule);margin-top:0}
  /* 最後の列にも線が付くと、その下のブランド列の border-top と二重になる。
     .foot-brand が div で混在するので :last-child ではなく :last-of-type を使う */
  .foot-col:not(:last-of-type){border-bottom:1px solid var(--rule)}
  .foot-col .foot-h{margin:0}
  .foot-h-btn{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:13px 2px;background:none;border:0;cursor:pointer;
    font:inherit;font-size:13px;font-weight:700;color:var(--ink);text-align:left}
  .foot-h-btn::after{content:"";width:8px;height:8px;margin-right:4px;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
  .foot-col:not(.is-closed) .foot-h-btn::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .foot-col.is-closed ul{display:none}
  .foot-col ul{padding-bottom:10px}
  /* リンクを行全体に広げて当たり判定を44px以上にする。
     行の高さは 22.8px なので padding 11px×2 で 44.8px。
     li の margin-bottom は 0 にする（padding が間隔を兼ねる）。
     ここを .foot-col a のままにすると、あとに出る指定と同じ詳細度になり
     打ち消し合うので、li を挟んだ .foot-col li a にしてある */
  .foot-col li{margin-bottom:0}
  .foot-col li a{display:block;padding:11px 2px}
  .foot-find ul{columns:1}
  /* 固定ページの文ごとの改行はPCだけ。スマホは折り返すので無効にする */
  .br-pc{display:none}
  .samples{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  /* 隙間が4px（片側2px）になるので輪も2pxに落とす。はみ出させない */
  .samples a:hover{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--accent)}
}

@media (max-width:760px){
  /* 関連作品はスマホで横スクロール。縦に積むと3ブロックで延々と続く。
     右端に次がのぞくので、続きがあることも分かる */
  .works.is-rail{display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:10px;padding-bottom:6px;margin-right:calc(var(--pad) * -1)}
  .works.is-rail::-webkit-scrollbar{display:none}
  .works.is-rail > .wk{flex:0 0 116px;scroll-snap-align:start}
  /* 右端の余白は擬似要素で作る。最後のカードに padding を足すと、
     幅が固定（flex:0 0 116px）で box-sizing:border-box のため中身が痩せ、
     画像の高さが158→136px、タイトルの位置が22pxずれていた */
  .works.is-rail::after{content:"";flex:0 0 var(--pad)}
}
@media (max-width:720px){
  /* 狭幅は1カラム。2カラムのままだと写真が92pxまで縮み、
     右の表も幅が足りずに「2018.04.14 〜 2026.09.04」が2行に折り返す */
  .profile{grid-template-columns:1fr;gap:14px}
  .initial-lg{font-size:1.8rem}
  .work{grid-template-columns:1fr}
  .spec > div{grid-template-columns:4.5rem 1fr;gap:8px}
  .gj-cell{flex-direction:column;gap:0;padding:8px 2px}
}
@media (prefers-reduced-motion:reduce){
  .js .topnav{transition:none}
  *{transition:none !important;animation:none !important}
}