@charset "UTF-8";

/* --------------------------------------------------------------------------
   設計値は参考サイト(xo9.net / erofilewp)の実測に合わせている。
   実測メモ: docs/03_参考サイト分析.md
     最大幅 1280px / 2カラム(main 820px + sidebar 300px, gap 80px)
     カード 3列 (column-gap 40px, row-gap 56px)
     背景 #101010 / 文字 #eee / アクセント #009eba
     html font-size 62.5% → 1rem = 10px
   -------------------------------------------------------------------------- */

:root {
  --width-page: 128rem;
  --width-sidebar: 30rem;
  --gap-column: 8rem;

  --color-bg: #101010;
  --color-bg-raised: #181818;
  --color-bg-sunken: #0d0d0d;
  --color-text: #eee;
  --color-text-muted: #999;
  --color-border: #333;
  --color-accent: #009eba;
  --color-accent-dark: #037184;
  --color-tag: #d8d7cb;
  --color-link: #b7b6a6;
  --color-alert: #ff3366;

  --radius: 0.4rem;
  --font-body: "Arial", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; }
a:hover,
a:focus-visible { color: var(--color-accent-dark); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }

/* ---------------------------------------------------------------- 年齢確認 */

.age_gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(4, 4, 4, 0.97);
}

/* JSが「確認済み」を検出したときだけ外す。JS無効なら出したままにする */
.age_gate[hidden] { display: none; }

.age_gate_panel {
  width: min(48rem, 100%);
  padding: 4rem 3rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}

.age_gate_title {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}

.age_gate_lead { margin-bottom: 3rem; }

.age_gate_actions {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}

.age_gate_yes {
  padding: 1.4rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
}

.age_gate_yes:hover { background-color: var(--color-accent-dark); }

.age_gate_no { color: var(--color-text-muted); font-size: 1.4rem; }

/* ------------------------------------------------------------ サンプル警告 */

/* 準備中の告知。警告ではないので赤ではなく落ち着いた配色にする */
.sample_banner {
  margin: 0;
  padding: 1rem 2rem;
  background-color: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.3rem;
  text-align: center;
}

/* ---------------------------------------------------------------- ヘッダー */

.site_header {
  background-color: var(--color-bg-sunken);
  border-bottom: 1px solid var(--color-border);
}

.site_header_inner {
  max-width: var(--width-page);
  margin-inline: auto;
  padding: 2.4rem 4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo    nav    social"
    "tagline search social";
  align-items: center;
  gap: 1rem 3rem;
}

.site_logo {
  grid-area: logo;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.site_logo a { color: var(--color-text); }

.site_tagline {
  grid-area: tagline;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.global_nav { grid-area: nav; }

/* ハンバーガーボタン。PCでは出さない（767px以下でのみ表示する） */
.nav_toggle {
  display: none;
  grid-area: menubtn;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.4rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}

.nav_toggle:hover { border-color: var(--color-accent); }

/* 3本線。開いているときは×に変える */
.nav_toggle_bars,
.nav_toggle_bars::before,
.nav_toggle_bars::after {
  display: block;
  width: 1.8rem;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav_toggle_bars { position: relative; }

.nav_toggle_bars::before,
.nav_toggle_bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav_toggle_bars::before { top: -0.6rem; }
.nav_toggle_bars::after { top: 0.6rem; }

.nav_toggle[aria-expanded="true"] .nav_toggle_bars { background-color: transparent; }
.nav_toggle[aria-expanded="true"] .nav_toggle_bars::before { transform: translateY(0.6rem) rotate(45deg); }
.nav_toggle[aria-expanded="true"] .nav_toggle_bars::after { transform: translateY(-0.6rem) rotate(-45deg); }

.global_nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  justify-content: flex-end;
}

.global_nav a {
  color: var(--color-text);
  font-size: 1.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
}

.global_nav a:hover,
.global_nav a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

.site_search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-end;
}

.site_search_label { color: var(--color-text-muted); font-size: 1.3rem; }

.site_search input {
  width: min(28rem, 100%);
  padding: 0.8rem 1.2rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.4rem;
}

/* ------------------------------------------------------------- SNS導線 */

.social_links { grid-area: social; }

.social_link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.6rem;
  background-color: #000;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.social_link:hover,
.social_link:focus-visible {
  background-color: #1a1a1a;
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.social_icon {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- レイアウト */

.layout {
  display: flex;
  gap: var(--gap-column);
  max-width: var(--width-page);
  margin-inline: auto;
  padding: 6rem 4rem 10rem;
}

.layout_main { flex: 1; min-width: 0; max-width: 82rem; }

.layout_sidebar { width: var(--width-sidebar); flex-shrink: 0; }

/* ------------------------------------------------------------ パンくず */

.breadcrumb { margin-bottom: 3rem; font-size: 1.3rem; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.breadcrumb li + li::before { content: "›"; margin-right: 0.8rem; color: var(--color-text-muted); }

.breadcrumb li:last-child { color: var(--color-text-muted); }

/* ---------------------------------------------------------------- 見出し */

.site_intro { margin-bottom: 5rem; }

.site_intro_title {
  font-size: 2.8rem;
  line-height: 1.4;
  margin-bottom: 1.2rem;
}

.site_intro_lead { color: var(--color-text-muted); font-size: 1.4rem; }

.section { margin-bottom: 6rem; }

.section_title {
  font-size: 2rem;
  padding-left: 1.2rem;
  border-left: 4px solid var(--color-accent);
  margin-bottom: 2.8rem;
}

/* 見出しの右に一覧ページへの導線を置く。回遊を止めないための配置 */
.section_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.section_head .section_title { margin-bottom: 0; }

.section_more { font-size: 1.3rem; white-space: nowrap; }

.section_more a::after { content: " ›"; }

.section_head + .card_grid,
.section_head + .ad_disclosure { margin-top: 2.8rem; }

.archive_title { font-size: 2.6rem; margin-bottom: 1.2rem; }

.archive_lead { color: var(--color-text-muted); font-size: 1.4rem; margin-bottom: 4rem; }

.empty_message { color: var(--color-text-muted); }

/* ---------------------------------------------------------------- カード */

.card_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4rem;
  row-gap: 5.6rem;
}

/* トップのおすすめ枠だけ2列・大きめにする。
   最初に目に入る場所なので、件数を詰め込むより1点あたりの訴求力を優先する */
.feature_grid {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  row-gap: 4.8rem;
}

.feature_grid .work_card_title {
  font-size: 1.7rem;
  font-weight: 700;
  -webkit-line-clamp: 2;
  margin-top: 1.4rem;
}

.feature_grid .work_card_meta { font-size: 1.3rem; }

.feature_grid .work_card_provider {
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
}

.actress_card_figure { position: relative; margin: 0; }

.actress_card_image,
.work_card_image {
  display: block;   /* インライン画像の下にできる隙間を消す（バッジの位置がずれる） */
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background-color: var(--color-bg-raised);
}

.actress_card_link:hover .actress_card_image,
.work_card_link:hover .work_card_image { opacity: 0.82; }

.card_label {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.3rem 0.9rem;
  background-color: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 1.1rem;
}

.actress_card_name,
.work_card_title {
  display: block;
  margin-top: 1.2rem;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.work_card_title {
  font-weight: 400;
  font-size: 1.4rem;
  /* タイトルが長いので3行で打ち切る。省略しても本文はリンク先にある */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actress_card_meta,
.work_card_meta {
  margin-top: 0.6rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.work_card_rating { color: var(--color-tag); }

.work_card_price { color: var(--color-tag); }

/* 割引の表示。定価は取り消し線（<s>）、現在価格を目立たせる */
.work_card_list_price {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.work_card_list_price + .work_card_price {
  color: var(--color-alert);
  font-weight: 700;
}

/* セールのバッジ。ASPバッジと同じ角に置くと重なるので、反対の角に出す */
.work_card_sale {
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  padding: 0.2rem 0.8rem;
  background-color: var(--color-alert);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ ページ送り */

.pager { margin-top: 4.8rem; text-align: center; }

.pager_status {
  margin-bottom: 1.2rem;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.pager_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pager_list a,
.pager_current span {
  display: block;
  min-width: 4.4rem;          /* 指で押せる大きさを確保する */
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1.4rem;
  line-height: 1;
}

.pager_list a:hover { border-color: var(--color-accent); }

.pager_current span {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
}

.pager_step a { min-width: 0; }

.pager_gap {
  padding: 1rem 0.4rem;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
}

/* 価格は生成時点のもの、という但し書き。読み飛ばされない程度に目立たせる */
.price_notice {
  margin: 1.2rem 0 2rem;
  padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--color-alert);
  background-color: rgba(255, 51, 102, 0.08);
  color: var(--color-tag);
  font-size: 1.3rem;
  line-height: 1.7;
}

/* どのASPへのリンクかをカード上で示す。複数ASPを併載しているため。
   **掲載ASPが1社のときは出さない**（body.multi_provider が付かない）。
   全カードに同じ店名が並ぶだけで情報量がゼロになり、
   パッケージ画像を隠すぶん損になる。2社以上になれば自動で戻る */
.work_card_provider {
  display: none;
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.2rem 0.8rem;
  background-color: rgba(0, 0, 0, 0.78);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-tag);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.multi_provider .work_card_provider { display: inline-block; }

.work_card_figure { margin: 0; }

/* バッジの位置の基準。**画像だけを包む**のが要点。
   figure を基準にすると figcaption（タイトル）まで含まれてしまい、
   bottom 指定のASPバッジがタイトルの上に乗り、しかもタイトルの行数（1〜3行）で
   毎回ずれる。2026-08-19に実際そうなっていた */
.work_card_thumb { position: relative; display: block; }

/* ASPごとの色分け。どこの在庫かを一目で分かるようにする */
.work_card[data-provider="fanza"] .work_card_provider { border-color: #009eba; color: #57d6e8; }
.work_card[data-provider="duga"] .work_card_provider { border-color: #d8a13a; color: #f0c777; }
.work_card[data-provider="sokmil"] .work_card_provider { border-color: #7fbf4d; color: #a9dd80; }

/* ------------------------------------------------------------ 女優ページ */

.actress_header { margin-bottom: 4rem; }

.actress_name { font-size: 2.8rem; line-height: 1.4; margin-bottom: 1.6rem; }

.profile_tags,
.tag_list,
.sidebar_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.profile_tags li a,
.sidebar_tags li a {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-tag);
  font-size: 1.3rem;
}

.profile_tags li a:hover,
.sidebar_tags li a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

.actress_profile { margin-bottom: 6rem; }

.actress_profile_body {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 3.2rem;
  align-items: start;
}

.actress_profile_figure { margin: 0; }

.actress_profile_image { width: 100%; border-radius: var(--radius); }

.profile_table {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0;
  font-size: 1.4rem;
}

.profile_table dt,
.profile_table dd {
  padding: 1.1rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.profile_table dt { color: var(--color-text-muted); }

.profile_table dd { margin: 0; }

/* 広告表記。規約を満たすのに必要なのは「判別できること」であって目立たせることではない。
   枠で囲うと作品一覧より先に目が行き、CTRを下げるだけなので1行の注記に留める */
.ad_disclosure {
  margin-bottom: 2.4rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
}

/* --------------------------------------------- 運営者情報・規約系ページ */

.legal { max-width: 72rem; }

.legal_section { margin-bottom: 4.8rem; }

.legal_section p { margin-bottom: 1.6rem; }

.legal_section p:last-child { margin-bottom: 0; }

.legal_list {
  list-style: disc;
  padding-left: 2.2rem;
  margin-bottom: 1.6rem;
}

.legal_list li { margin-bottom: 0.6rem; }

/* 公開前に埋め忘れている箇所。目立たせて気づけるようにする */
.legal_todo {
  padding: 1.2rem 1.6rem;
  background-color: var(--color-bg-raised);
  border-left: 3px solid var(--color-alert);
  color: var(--color-alert);
}

.legal_todo code {
  color: var(--color-text);
  font-size: 1.3rem;
}

.contact_action { margin-bottom: 2rem; }

/* ------------------------------------------------------- 問い合わせフォーム */

.contact_form { margin-bottom: 2.4rem; }

.form_row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}

.form_row label { font-size: 1.4rem; font-weight: 700; }

.form_required {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.7rem;
  background-color: var(--color-alert);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 400;
  vertical-align: middle;
}

.form_note { color: var(--color-text-muted); font-size: 1.2rem; }

.contact_form input,
.contact_form select,
.contact_form textarea {
  width: 100%;
  padding: 1.1rem 1.3rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.5rem;
}

.contact_form textarea { resize: vertical; line-height: 1.7; }

.contact_form input:focus,
.contact_form select:focus,
.contact_form textarea:focus { border-color: var(--color-accent); }

.contact_form button { border: none; cursor: pointer; font-family: inherit; font-size: 1.5rem; }

/* ハニーポット。人間には見せない（display:none だと埋めないbotがいるので画面外へ逃がす） */
.form_honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* send.php が出す結果ページ用 */
.result_ok { color: var(--color-text); margin-bottom: 2.4rem; }
.result_ng { color: var(--color-alert); margin-bottom: 2.4rem; }

.contact_button {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  background-color: var(--color-accent);
  border-radius: var(--radius);
  color: #fff;
  font-weight: 700;
}

.contact_button:hover,
.contact_button:focus-visible {
  background-color: var(--color-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------------ 入口ページ */

.index_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.6rem;
}

.index_list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 2rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 1.6rem;
}

.index_list a:hover { border-color: var(--color-accent); text-decoration: none; }

.index_count { color: var(--color-text-muted); font-size: 1.3rem; }

/* ---------------------------------------------------------------- サイドバー */

.sidebar_block { margin-bottom: 4rem; }

.sidebar_title {
  font-size: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------- フッター */

.site_footer {
  background-color: var(--color-bg-sunken);
  border-top: 1px solid var(--color-border);
  padding: 4rem 0;
}

.site_footer_inner {
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.footer_nav ul { display: flex; flex-wrap: wrap; gap: 2rem; }

.site_footer_copyright { font-size: 1.2rem; }

/* 検索で隠したカード */
.is_filtered_out { display: none; }

/* ---------------------------------------------------------------- 可変 */

@media (max-width: 1080px) {
  .layout { flex-direction: column; gap: 6rem; padding: 4rem 2.4rem 8rem; }
  .layout_main { max-width: none; }
  .layout_sidebar { width: 100%; }
}

@media (max-width: 767px) {
  body { font-size: 1.4rem; }

  /* ロゴの右にハンバーガー。検索とXは畳まずそのまま出す */
  .site_header_inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo    menubtn"
      "tagline tagline"
      "nav     nav"
      "search  search"
      "social  social";
    padding: 2rem 1.6rem;
    gap: 1.2rem 1.6rem;
  }

  .nav_toggle { display: inline-flex; }

  /* JSが有効なときだけ畳む。JS無効ならメニューは開いたまま表示され、
     ハンバーガーが効かなくても全項目へ行ける */
  .js .global_nav { display: none; }
  .js .global_nav.is_open { display: block; }

  .global_nav ul {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    border-top: 1px solid var(--color-border);
  }

  /* 指で押せる高さを確保する */
  .global_nav li { border-bottom: 1px solid var(--color-border); }

  .global_nav a {
    display: block;
    padding: 1.4rem 0.4rem;
    font-size: 1.5rem;
    border-bottom: none;
  }

  .global_nav a:hover,
  .global_nav a:focus-visible { border-bottom-color: transparent; }

  /* スマホでは横幅いっぱいのフォローボタンにする（押しやすさ優先） */
  .social_link { width: 100%; justify-content: center; }

  .site_search { flex-direction: column; align-items: stretch; }
  .site_search input { width: 100%; }

  .layout { padding: 3rem 1.6rem 6rem; }

  .card_grid { grid-template-columns: repeat(2, 1fr); column-gap: 1.6rem; row-gap: 3.2rem; }

  /* スマホで大きいカードを2列にすると窮屈なので、おすすめ枠は1列にする */
  .feature_grid { grid-template-columns: 1fr; row-gap: 3.2rem; }
  .feature_grid .work_card_title { font-size: 1.6rem; }

  .actress_profile_body { grid-template-columns: 1fr; }
  .actress_profile_figure { max-width: 24rem; }
  .profile_table { grid-template-columns: 9rem 1fr; }

  .site_intro_title, .actress_name { font-size: 2.2rem; }
  .archive_title { font-size: 2rem; }

  .site_footer_inner { padding-inline: 1.6rem; }
}

@media (max-width: 480px) {
  .card_grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 他のサイトで探す導線。作品カードを作れないASP（MGS）向け。
   カードと同じ重さで出すと本来の作品一覧が埋もれるので、控えめに置く */
.actress_elsewhere { margin-top: 3.2rem; }

.elsewhere_links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; }

.elsewhere_link {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-tag);
  font-size: 1.4rem;
}

.elsewhere_link:hover { border-color: var(--color-tag); }

/* 女優の検索候補。**全女優（数千人）から名前で引くための実体。**
   以前は「そのページに出ているカードを隠す」だけで、
   トップページで名前を打っても上位12人に居なければ何も出なかった */
.site_search { position: relative; }

.search_results {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 50;
  width: min(32rem, 80vw);
  max-height: 42rem;
  overflow-y: auto;
  padding: 0.6rem;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.search_results[hidden] { display: none; }

.search_result_link {
  display: block;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 1.4rem;
}

.search_result_link:hover,
.search_result_link:focus-visible {
  background-color: var(--color-bg-sunken);
  color: var(--color-accent);
  text-decoration: none;
}

.search_empty {
  padding: 0.8rem 1.2rem;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}