/* FANZA core ─ 女優のページ
 *
 * いまのテーマ（AFFINGER5）の枠の中に入ります。
 * テーマの指定とぶつからないよう、すべて fz- で始まる名前にしています。
 *
 * 見た目は最小限です。テーマを一から作り直すときに、そちらへ寄せます。
 * いまは「読める・押せる」ことだけを満たします。
 */

.fz-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}

/* ------------------------------------------------ プロフィール */

.fz-prof {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 36px;
}

.fz-prof__img {
  flex: 0 0 auto;
  width: 160px;
}

.fz-prof__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.fz-prof__body {
  flex: 1 1 auto;
  min-width: 0;
}

.fz-prof__name {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.3;
}

.fz-prof__ruby {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #777;
}

/* 項目名と中身を2列に並べます。
   入っていない項目は、そもそも出しません（PHP側）。 */
.fz-prof__list {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 14px;
}

.fz-prof__list dt {
  color: #777;
  margin: 0;
}

.fz-prof__list dd {
  margin: 0;
}

.fz-prof__none {
  margin: 0 0 14px;
  font-size: 14px;
  color: #777;
}

.fz-prof__count {
  margin: 0 0 10px;
  font-size: 14px;
}

.fz-prof__count b {
  font-size: 18px;
}

.fz-prof__link a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: #e8334a;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.fz-prof__link a:hover {
  filter: brightness(1.08);
  color: #fff;
}

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

.fz-sec {
  margin-bottom: 36px;
}

.fz-sec__ttl {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8334a;
  font-size: 18px;
}

/* ------------------------------------------------ 共演 */

.fz-costars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.fz-costars a {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.fz-costars img,
.fz-costars__noimg {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: #eee;
  margin-bottom: 5px;
}

.fz-costars__name {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fz-costars__n {
  display: block;
  font-size: 11px;
  color: #999;
}

/* ------------------------------------------------ 出演作 */

.fz-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.fz-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fz-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  background: #f2f2f2;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fz-item__thumb img {
  width: 100%;
  height: 100%;
  /* 題名が焼き込まれている絵が多いので、切らずに収めます。 */
  object-fit: contain;
  display: block;
}

/* まだ出ていない作品。いちばん知りたいのはここなので、印を付けます。 */
.fz-item__soon {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e8334a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.fz-item__ttl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.fz-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  color: #888;
}

.fz-item__price {
  color: #e8334a;
  font-weight: 700;
}

/* ------------------------------------------------ ページ送り・その他 */

.fz-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  font-size: 14px;
}

.fz-pager a {
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.fz-pager a:hover {
  background: #f6f6f6;
  color: inherit;
}

.fz-empty {
  color: #777;
  font-size: 14px;
}

.fz-credit {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 11.5px;
  color: #999;
  line-height: 1.7;
}

/* ------------------------------------------------ 狭い画面 */

@media screen and (max-width: 900px) {
  .fz-costars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fz-items   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
  .fz-wrap { padding: 16px 12px 36px; }

  /* 絵と文字を縦に積みます。横に並べると、どちらも狭くなります。 */
  .fz-prof {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
  }

  .fz-prof__img { width: 130px; }
  .fz-prof__name { font-size: 21px; }

  .fz-costars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-items   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .fz-item__ttl { font-size: 12.5px; }
}

/* ------------------------------------------------ さがす画面 */

.fz-h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.fz-lead {
  margin: 0 0 20px;
  font-size: 14px;
  color: #666;
}

.fz-find {
  margin-bottom: 20px;
  padding: 16px;
  background: #f7f7f8;
  border-radius: 8px;
}

.fz-find__row {
  display: flex;
  gap: 8px;
}

.fz-find__q {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
}

.fz-find__go {
  flex: 0 0 auto;
  padding: 10px 24px;
  border: 0;
  border-radius: 6px;
  background: #e8334a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.fz-find__more {
  margin-top: 12px;
  font-size: 14px;
}

.fz-find__more summary {
  cursor: pointer;
  color: #555;
}

/* 3つの条件を横に並べます。狭い画面では下で1列に落とします。 */
.fz-find__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.fz-find__grid label {
  display: block;
  font-size: 13px;
  color: #555;
}

.fz-find__grid input {
  width: 68px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.fz-find__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.7;
}

/* 並べ方。押されているものだけ色を変えます。 */
.fz-sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.fz-sorts__item {
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 100px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
}

.fz-sorts__item:hover {
  background: #f6f6f6;
  color: #555;
}

.fz-sorts__item.is-on {
  background: #e8334a;
  border-color: #e8334a;
  color: #fff;
}

.fz-count {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.fz-count b {
  font-size: 18px;
  color: #222;
}

/* 人の並び。1人ぶんが小さいほど、一度に見渡せます。 */
/* 顔で選ぶ場所なので、1人あたりを大きく取ります。
   8人並べたころは1人が小さく、誰が誰だか分かりませんでした。
   5人なら、顔の作りまで見て取れます。

   さがす画面（/actress/）は、数を見せる場所なので8列のままです。 */
.fz-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

/* ── 貼り付けた部品も、さがす画面と同じ8列です ──
 *
 * いちど5列にして大きく見せようとしましたが、
 * 元の顔写真が125×125しかなく、引き伸ばすと粗くなりました。
 * 等倍で出せる8列に戻しています。
 */

.fz-people a {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.fz-people img,
.fz-people__noimg {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: #eee;
  margin-bottom: 6px;
}

.fz-people__name {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fz-people__sub {
  display: block;
  font-size: 11px;
  color: #999;
  min-height: 15px;
}

.fz-people__n {
  display: block;
  font-size: 11px;
  color: #e8334a;
  font-weight: 700;
}

@media screen and (max-width: 900px) {
  .fz-people { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
  .fz-h1 { font-size: 20px; }
  .fz-find { padding: 12px; }
  .fz-find__grid { grid-template-columns: 1fr; }
  .fz-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ------------------------------------------------ 女優の絵の見え方
 *
 * FANZAが持っている女優の絵は、いちばん大きいもので 125×125 です。
 * 小さいほう（thumbnail）は 65×65 しかありません。
 *
 * それを 120px の枠へ引き伸ばしていたので、粗く見えていました。
 * 大きいほうを使い、枠も元と同じ正方形にします。
 * 縦長の枠に入れると、上下が切れて顔の位置もずれます。
 *
 * 枠を 125px より小さく保てば、拡大が起きません。
 */
.fz-people img,
.fz-people__noimg,
.fz-costars img,
.fz-costars__noimg {
  aspect-ratio: 1 / 1;
  /* 元より大きく引き伸ばさないための上限。
     列数で決まる幅がこれを超えても、絵はここで止まります。 */
  max-width: 125px;
  margin-left: auto;
  margin-right: auto;
}

/* 絵が小さくなったぶん、1行に多く並べられます。
   一度に見渡せる人数が増えるほど、探すのが速くなります。 */
.fz-people {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.fz-costars {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

/* プロフィールの絵も、元が 125px です。
   160px にしていたぶんだけ拡大されていました。 */
.fz-prof__img {
  width: 125px;
}

@media screen and (max-width: 600px) {
  /* 狭い画面では、3つ並ぶ幅に合わせます。
     max-width で止めているので、広がりすぎることはありません。 */
  .fz-people  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-costars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-prof__img { width: 110px; }
}


/* ------------------------------------------------ デビュー予定
 *
 * 一覧ページ（/debut/）と、月ごとの記事の、どちらにも当たります。
 * 記事のほうは、本文に印のあるものだけがこの見た目を読み込みます。
 *
 * ── なぜ画像を大きく出すのか ──
 *
 * はじめは画像を左に180pxで置き、右に文字を並べていました。
 * 情報は詰まりますが、肝心のものが小さくなります。
 *
 * このページを見に来る人が見たいのは、その人の顔と体です。
 * 文字は、そのあとで読めば足ります。
 *
 * 名前を先に出し、そのあと画像を幅いっぱいに置きます。
 * 誰のデビューかを分かってから絵を見る、という順です。
 *
 * 狭い画面向けの指定は、この下に書きます。
 * 先に書くと、あとに来る広い画面向けの指定に打ち消されます。
 */

.fz-ad-note {
  margin: 0 0 20px;
  font-size: 12px;
  color: #888;
}

.fz-debut__month {
  margin: 36px 0 14px;
  padding: 0 0 6px;
  border-bottom: 2px solid #e3e3e3;
  font-size: 20px;
  font-weight: 700;
}

.fz-debut {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fz-debut__card {
  display: block;
  padding: 28px 0 32px;
  border-bottom: 1px solid #ededed;
}

.fz-debut__date {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
}

.fz-debut__who {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
}

.fz-debut__who a {
  text-decoration: none;
}

.fz-debut__who a:hover {
  text-decoration: underline;
}

.fz-debut__size {
  margin: 0 0 10px;
  font-size: 13px;
  color: #666;
}

/* 画像。幅いっぱいに広げます。
   FANZAの絵は横800ほどなので、少し伸びますが、
   小さく置いておくより、こちらのほうが値打ちがあります。 */
.fz-debut__thumb {
  display: block;
  width: 100%;
  margin: 12px 0 14px;
}

.fz-debut__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: #f4f4f4;
}

.fz-debut__noimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: #f0f0f0;
  border-radius: 3px;
}

.fz-debut__title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.7;
}

.fz-debut__maker {
  margin: 0;
  font-size: 12px;
  color: #888;
}

.fz-debut__count {
  margin: 24px 0 0;
  font-size: 14px;
  color: #666;
}

/* 狭い画面。画像は幅いっぱいのままにします。
   スマホこそ、小さく置く余地がありません。 */
@media screen and (max-width: 600px) {

  .fz-debut__month {
    margin: 28px 0 10px;
    font-size: 17px;
  }

  .fz-debut__card {
    padding: 20px 0 24px;
  }

  .fz-debut__who {
    font-size: 20px;
  }

  .fz-debut__title {
    font-size: 14px;
  }
}

/* ------------------------------------------------ 作品ページ・ジャンル
 *
 * 作品ページは検索エンジンに載せません（理由は inc/item-page.php に）。
 * サイトの中を歩く人のためのものなので、次に行き先があることを
 * はっきり見せる作りにします。
 *
 * 狭い画面向けの指定は、この下に書きます。
 * 先に書くと、あとに来る広い画面向けの指定に打ち消されます。
 */

/* いまどこにいるか。 */
.fz-crumb {
  margin: 0 0 14px;
  font-size: 12px;
  color: #888;
}

.fz-crumb a {
  color: #666;
}

.fz-sec__note {
  margin: -6px 0 14px;
  font-size: 12px;
  color: #888;
}

.fz-more {
  margin: 18px 0 0;
  font-size: 14px;
}

/* ── 作品ページ ── */

.fz-item__h1 {
  font-size: 22px;
  line-height: 1.5;
}

/* 絵は大きく。ここが見たくて来た人のためのものです。 */
.fz-item__big {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 18px;
}

.fz-item__big img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  background: #f4f4f4;
}

.fz-item__big .fz-item__soon {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(192, 57, 43, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* 買いに行くところ。ここだけは、押すものだと分かる形にします。 */
.fz-item__buy {
  margin: 0 0 28px;
  text-align: center;
}

.fz-item__buy a {
  display: inline-block;
  min-width: 280px;
  padding: 14px 32px;
  border-radius: 4px;
  background: #e8384f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 #b92a3c;
}

.fz-item__buy a:hover {
  background: #d32e44;
  color: #fff;
}

/* 作品の中身。 */
.fz-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fz-spec th,
.fz-spec td {
  padding: 10px 12px;
  border-bottom: 1px solid #ededed;
  text-align: left;
  vertical-align: top;
}

.fz-spec th {
  width: 110px;
  color: #666;
  font-weight: 600;
  background: #fafafa;
}

/* ジャンルの札。 */
.fz-tags {
  margin: 0;
  line-height: 2.2;
}

.fz-tags a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 14px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
}

.fz-tags a:hover {
  border-color: #999;
  background: #fafafa;
}

/* 作品ページの出演者は人数が少ないので、小さめに並べます。 */
.fz-people--row {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.fz-item__maker {
  color: #999;
}

.fz-pager__now {
  margin: 0 14px;
  color: #666;
  font-size: 14px;
}

/* ── ジャンルの一覧 ── */

.fz-genres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.fz-genres a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.fz-genres a:hover {
  border-color: #bbb;
  background: #fafafa;
}

.fz-genres__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fz-genres__n {
  flex: 0 0 auto;
  color: #999;
  font-size: 12px;
}

/* 狭い画面。 */
@media screen and (max-width: 600px) {

  .fz-item__h1 {
    font-size: 18px;
  }

  .fz-item__buy a {
    display: block;
    min-width: 0;
    padding: 14px 16px;
  }

  .fz-spec th {
    width: 84px;
    padding: 9px 8px;
  }

  .fz-spec td {
    padding: 9px 8px;
  }

  .fz-genres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fz-people--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------ これから出る作品の帯
 *
 * 発売済みのものと混ぜると、先頭が予定ばかりになって、
 * いま買えるものが下に埋もれます。
 *
 * 別の帯にして、数本だけ置きます。続きは「もっと見る」へ逃がします。
 * 背景を少し変えて、下の一覧とは別のものだと分かるようにします。
 */

.fz-soon {
  padding: 18px 20px 6px;
  border-radius: 6px;
  background: #fdf6f4;
  border: 1px solid #f3e0da;
}

.fz-soon__ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
}

.fz-soon__n {
  padding: 3px 10px;
  border-radius: 12px;
  background: #c0392b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.fz-soon .fz-more {
  margin: 4px 0 14px;
  text-align: right;
}

@media screen and (max-width: 600px) {

  .fz-soon {
    padding: 14px 12px 4px;
  }

  .fz-soon__ttl {
    gap: 8px;
  }

  .fz-soon .fz-more {
    text-align: left;
  }
}

/* ------------------------------------------------ どこにでも貼れる部品
 *
 * ウィジェット・固定ページ・記事の中。どこに置かれるか分かりません。
 * 置かれた場所の幅もまちまちです。
 *
 * ですから、幅を決め打ちしません。
 * 並びは、入る数だけ入るようにしておきます（auto-fill）。
 * 狭いところに置かれたら、ひとりでに列が減ります。
 */

/* ── 見出しの行 ──
 *
 * 見出しと「もっと見る」を、同じ行の左右に置きます。
 *
 * はじめは「もっと見る」を並びの下に置いていました。
 * 欄が4つ5つと続くと、そのたびに1行ぶんの余白が積み上がり、
 * 画面を下へ送る回数が増えます。
 *
 * 上の行に寄せれば、その1行がまるごと浮きます。
 * 「この欄はここから」と「続きはこちら」が同じ高さに並ぶので、
 * 目で追うのも楽になります。 */
.fz-sc {
  margin: 0 0 22px;
}

.fz-sc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 0 0 7px;
  border-bottom: 2px solid #e3e3e3;
  position: relative;
}

/* 見出しの下に、赤い線を少しだけ重ねます。 */
.fz-sc__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 70px;
  height: 2px;
  background: #e8003a;
}

.fz-sc__ttl {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  min-width: 0;
}

.fz-sc__more {
  flex: 0 0 auto;
  padding: 4px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #555;
  white-space: nowrap;
}

.fz-sc__more:hover {
  border-color: #999;
  background: #fafafa;
  color: #333;
  text-decoration: none;
}

/* 作品に添える女優の名前。
   デビュー予定のときだけ出ます。誰の作品かが、いちばん知りたいところです。 */
.fz-item__who {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: #c0392b;
  line-height: 1.4;
}

/* 部品の中に置かれた並びは、外側の余白を持ちません。
   置き場所の余白と重なって、間が空きすぎるためです。 */
.fz-sc .fz-people,
.fz-sc .fz-genres,
.fz-sc .fz-items {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 600px) {

  .fz-sc {
    margin-bottom: 18px;
  }

  .fz-sc__head {
    gap: 10px;
    margin-bottom: 10px;
  }

  .fz-sc__ttl {
    font-size: 16px;
  }

  .fz-sc__more {
    padding: 3px 10px;
    font-size: 12px;
  }

  .fz-item__who {
    font-size: 13px;
  }
}

/* ------------------------------------------------ くわしくさがす
 *
 * 条件の欄は、左に項目名、右に中身。
 * 狭い画面では上下に積みます。
 *
 * 狭い画面向けの指定は、この下に書きます。
 * 先に書くと、あとに来る広い画面向けの指定に打ち消されます。
 */

.fz-find2 {
  margin: 0 0 32px;
  padding: 20px 22px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
}

/* ── 作品／女優の切り替え ── */

.fz-find2__tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}

.fz-find2__tab {
  flex: 0 0 auto;
  cursor: pointer;
}

/* もとの丸いつまみは隠します。押す的は、その外側の札にします。 */
.fz-find2__tab input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fz-find2__tab span {
  display: block;
  padding: 9px 24px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #666;
}

.fz-find2__tab.is-on span,
.fz-find2__tab input:checked + span {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

/* 指で押せるようにしつつ、キーボードでも分かるようにします。 */
.fz-find2__tab input:focus-visible + span {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* ── 条件の行 ── */

.fz-find2__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #ececec;
}

.fz-find2__row:first-of-type {
  border-top: 0;
}

.fz-find2__k {
  padding-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
}

.fz-find2__v {
  min-width: 0;
}

.fz-find2__q {
  width: 100%;
  max-width: 420px;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
}

.fz-find2__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.7;
}

/* ── ジャンルの札 ── */

.fz-find2__gs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fz-find2__g {
  cursor: pointer;
}

.fz-find2__g input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fz-find2__g span {
  display: block;
  padding: 5px 13px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  font-size: 13px;
  color: #555;
}

.fz-find2__g.is-on span,
.fz-find2__g input:checked + span {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.fz-find2__g input:focus-visible + span {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* ── 数を入れる欄 ── */

.fz-find2__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.fz-find2__num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}

/* 数を入れる欄。
   type="number" の矢印をやめて、直接打つ形にしました。
   空のところで矢印を押すと 1 から始まり、150 まで押すことになるためです。 */
.fz-num {
  width: 76px;
  padding: 7px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}

.fz-num:focus {
  border-color: #c0392b;
  outline: 0;
}

.fz-find2__num input[type="text"] {
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

/* ── さがすボタン ── */

.fz-find2__go {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 4px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}

.fz-find2__go button {
  padding: 11px 34px;
  border: 0;
  border-radius: 4px;
  background: #c0392b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.fz-find2__go button:hover {
  background: #a93226;
}

.fz-find2__go a {
  font-size: 13px;
  color: #888;
}

/* 狭い画面。項目名を上に、中身を下に積みます。 */
@media screen and (max-width: 600px) {

  .fz-find2 {
    padding: 16px 14px 12px;
  }

  .fz-find2__tabs {
    margin-bottom: 16px;
  }

  .fz-find2__tab span {
    padding: 9px 18px;
    font-size: 13px;
  }

  .fz-find2__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px 0;
  }

  .fz-find2__k {
    padding-top: 0;
    font-size: 13px;
  }

  .fz-num {
    width: 68px;
  }

  .fz-find2__num input[type="text"] {
    width: 100% !important;
  }

  .fz-find2__go button {
    flex: 1 1 auto;
    padding: 12px 16px;
  }
}

/* 女優をさがす（/actress/）の数の欄。
   くわしくさがすと同じ形に揃えます。 */
.fz-find__grid .fz-num {
  margin: 0 2px;
}

/* ── 写真の無い人 ──

   新しく載った人ほど、まだ顔写真が用意されていません。
   灰色の箱だけだと、並びの中で穴が空いて見えます。

   名前の頭文字を置きます。見分けが付くようになり、
   「まだ写真が無い」ことも伝わります。 */
.fz-people__noimg,
.fz-costars__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9b4ad;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
/* ── プロフィールの右に出すデビュー作 ──

   はじめは新しい作品を4枚並べました。1枚が小さくなりすぎて
   何の作品か読めず、中央も空いたままでした。

   1枚だけ大きく出します。デビュー作は一覧の最後まで行かないと
   見られないので、ここに置く値打ちがあります。 */
.fz-prof__debut {
  flex: 0 0 auto;
  width: 300px;
  margin-left: auto;
}

.fz-prof__debut-img {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  transition: opacity .15s;
}
.fz-prof__debut-img:hover { opacity: .85; }

.fz-prof__debut-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.8;
  object-fit: cover;
}

.fz-prof__debut-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 12px;
  color: #777;
}

.fz-prof__debut-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: #e8003a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* 題名は2行まで。長いものが多く、そのまま出すと
   顔写真より縦に伸びます。 */
.fz-prof__debut-ttl {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 狭い画面では、顔写真と本文の下へ回します。 */
@media screen and (max-width: 860px) {
  .fz-prof { flex-wrap: wrap; }
  .fz-prof__debut {
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
  }
  .fz-prof__debut-img img { aspect-ratio: 16 / 9; }
}
/* ============================================================
   「この商品に出ているのは誰か」のページ（who-page.php）

   既存の .fz-* と同じ名前の付け方にそろえます。
   色は決め打ちにせず、テーマの文字色をそのまま使います。
   ============================================================ */

.fz-who__ttl{ font-size:1.5rem; line-height:1.6; margin:0 0 20px }

.fz-who__head{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:28px }
.fz-who__img{ flex:0 0 260px; max-width:100% }
.fz-who__img img{ width:100%; height:auto; border-radius:8px; display:block }
.fz-who__body{ flex:1 1 320px; min-width:0 }

.fz-who__tbl{ width:100%; border-collapse:collapse }
.fz-who__tbl th,
.fz-who__tbl td{
  border:1px solid rgba(128,128,128,.3);
  padding:8px 11px; text-align:left; vertical-align:top; font-size:.94rem;
}
.fz-who__tbl th{ background:rgba(128,128,128,.08); width:112px; white-space:nowrap }

.fz-who__name{ font-size:1.1rem }
.fz-who__note{ font-size:.86rem; opacity:.8 }
.fz-who__unknown{ opacity:.65 }

.fz-who__buy{ margin:14px 0 0 }
.fz-who__buy a{
  display:inline-block; padding:10px 20px; border-radius:6px;
  border:1px solid currentColor; text-decoration:none; font-weight:600;
}

/* 情報を募るところ。ここがこのページの要なので、囲んで目立たせます。 */
.fz-who__ask{
  border:2px solid rgba(128,128,128,.35); border-radius:10px;
  padding:20px 22px; margin:0 0 30px;
}
.fz-who__ask h2{ margin:0 0 10px; font-size:1.15rem }
.fz-who__ask p{ margin:0 0 14px; line-height:1.9 }

.fz-tip p{ margin:0 0 14px }
.fz-tip__lb{ display:block; font-weight:600; margin-bottom:5px; font-size:.92rem }
.fz-tip input[type="text"],
.fz-tip textarea{
  width:100%; padding:9px 11px; border-radius:5px;
  border:1px solid rgba(128,128,128,.45); background:transparent;
  color:inherit; font-family:inherit; font-size:.95rem;
}
.fz-tip__sm{ font-size:.85rem; opacity:.8; line-height:1.8 }
.fz-tip__btn{
  padding:11px 32px; border-radius:6px; border:0; cursor:pointer;
  font-weight:700; font-size:1rem;
}
.fz-tip__done,
.fz-tip__ng{
  padding:12px 16px; border-radius:6px; margin:0 0 16px; line-height:1.8;
  border:1px solid rgba(128,128,128,.4);
}

/* 同じ販売者の商品 */
.fz-who__same h2{ font-size:1.1rem; margin:0 0 12px }
.fz-who__list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px;
}
.fz-who__list a{ text-decoration:none; color:inherit; display:block }
.fz-who__list img{
  width:100%; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:6px; display:block; margin-bottom:6px;
}
.fz-who__list span{ display:block; font-size:.86rem; line-height:1.55 }
.fz-who__list em{ display:block; font-size:.82rem; font-style:normal; opacity:.75; margin-top:3px }

@media (max-width:600px){
  .fz-who__ttl{ font-size:1.25rem }
  .fz-who__img{ flex:0 0 100% }
  .fz-who__tbl th{ width:88px }
  .fz-who__ask{ padding:16px }
}

/* ── 一覧（who-page.php の fz_who_render_list） ── */

.fz-whol__lead{ line-height:1.9; margin:0 0 24px }

.fz-whol{
  list-style:none; padding:0; margin:0 0 28px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:18px;
}
.fz-whol__it a{ text-decoration:none; color:inherit; display:block }
.fz-whol__it img{
  width:100%; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:7px; display:block; margin-bottom:8px;
}
.fz-whol__t{ display:block; font-size:.88rem; line-height:1.55; margin-bottom:4px }
.fz-whol__n{
  display:block; font-size:.95rem; font-weight:700; line-height:1.4;
}
.fz-whol__u{ display:block; font-size:.82rem; opacity:.6 }
.fz-whol__s{ display:block; font-size:.78rem; opacity:.7; margin-top:3px }

.fz-whol__pg{ display:flex; align-items:center; gap:16px; margin:0 0 32px }
.fz-whol__pg a{
  padding:8px 18px; border:1px solid currentColor; border-radius:5px;
  text-decoration:none; color:inherit;
}

/* 販売者からさがす。ここが商品ページへの道になります。 */
.fz-whol__sellers{
  border-top:1px solid rgba(128,128,128,.3); padding-top:22px; margin-top:8px;
}
.fz-whol__sellers h2{ font-size:1.1rem; margin:0 0 12px }
.fz-whol__sellers ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.fz-whol__sellers a{
  display:inline-block; padding:6px 13px; border-radius:16px;
  border:1px solid rgba(128,128,128,.4); text-decoration:none; color:inherit;
  font-size:.88rem;
}
.fz-whol__sellers em{ font-style:normal; opacity:.6; margin-left:5px; font-size:.82rem }

/* 現在地 */
.fz-who__crumb{ font-size:.86rem; margin:0 0 14px; opacity:.85 }
.fz-who__crumb a{ color:inherit }
.fz-who__crumb span{ margin:0 7px; opacity:.5 }

@media (max-width:600px){
  .fz-whol{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px }
}

/* トップに置くときは、他の欄と枚数をそろえます（1行4枚）。 */
.fz-whol--sc{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); margin-bottom:0 }
@media (max-width:600px){
  .fz-whol--sc{ grid-template-columns:repeat(2, 1fr) }
}