@charset "UTF-8";
/* ============================================================
 * デザインリニューアル用スタイル（2026-08 Figma準拠）
 *
 * 方針:
 *   - ビルド不要の素のCSS。Tailwindの再ビルドなしで反映される
 *   - dist/output.css の後に読み込むため、既存スタイルを上書きできる
 *   - 値は tailwind.config.js のトークンと同一。将来Tailwindへ寄せる際も差分が出ない
 *   - 既存クラス（actress-btn-primary 等）は触らない。新規は gm- 接頭辞で分離する
 * ============================================================ */

:root {
  /* 文字 */
  --gm-ink: #1f1f1d;
  --gm-sub: #6e6e6a;
  --gm-muted: #9b9b96;
  /* 面・罫線 */
  --gm-surface: #f5f4f1;
  --gm-line: #e3e3e0;
  --gm-white: #ffffff;
  /* アクセント（CTA） */
  --gm-coral: #d85a30;
  --gm-coral-bg: #faece7;
  --gm-coral-ink: #993c1d;
  /* 解説記事ブロック */
  --gm-article-bg: #eeedfe;
  --gm-article-ink: #3c3489;
  /* 広告枠 */
  --gm-ad-bg: #f1eeda;
  --gm-ad-ink: #854f0b;
  --gm-ad-line: #bb9f27;
  /* 角丸 */
  --gm-radius-card: 12px;
  --gm-radius-btn: 8px;
  /* レイアウト */
  --gm-content-max: 1600px;
  --gm-gutter: 20px;
}

@media (min-width: 1024px) {
  :root {
    --gm-gutter: 64px;
  }
}

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

.gm-container {
  max-width: var(--gm-content-max);
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}

.gm-section {
  padding-block: 24px;
}

@media (min-width: 1024px) {
  .gm-section {
    padding-block: 48px;
  }
}

.gm-section--surface {
  background: var(--gm-surface);
}

/* ---- セクション見出し ---- */

.gm-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

.gm-heading__num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gm-coral);
  line-height: 1;
}

.gm-heading__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0;
  line-height: 1.4;
}

.gm-heading__desc {
  font-size: 12px;
  color: var(--gm-sub);
  line-height: 1.65;
  margin: 0 0 16px;
}

@media (min-width: 1024px) {
  .gm-heading__num { font-size: 13px; }
  .gm-heading__title { font-size: 22px; }
  .gm-heading__desc { font-size: 14px; margin-bottom: 20px; }
}

/* ---- ボタン ---- */

.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 22px;
  border-radius: var(--gm-radius-btn);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease;
}

.gm-btn:hover { opacity: .85; }

.gm-btn--primary {
  background: var(--gm-coral);
  color: var(--gm-white);
}

.gm-btn--outline {
  background: var(--gm-white);
  color: var(--gm-ink);
  border-color: var(--gm-line);
}

.gm-btn--full {
  display: flex;
  width: 100%;
}

/* ---- チップ（タグ・絞り込み） ---- */

.gm-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--gm-line);
  background: var(--gm-white);
  color: var(--gm-sub);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.gm-chip:hover { border-color: var(--gm-ink); }

.gm-chip--active {
  background: var(--gm-ink);
  border-color: var(--gm-ink);
  color: var(--gm-white);
}

.gm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.gm-card {
  display: flex;
  flex-direction: column;
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.gm-card:hover { border-color: var(--gm-muted); }

/* サムネイル: 比率を固定してCLSを防ぐ */
.gm-card__thumb {
  display: block;
  width: 100%;
  background: var(--gm-surface);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gm-card__thumb--portrait { aspect-ratio: 3 / 4; }

.gm-card__thumb img {
  width: 100%;
  height: 100%;
  /* パッケージ画像は縦横比がまちまち。cover だと上下が切れるため contain で全体を見せる。
     旧テーマ（u-object-contain）と同じ挙動。 */
  object-fit: contain;
  display: block;
}

.gm-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gm-card__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--gm-ink);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gm-card__meta {
  font-size: 11px;
  color: var(--gm-sub);
  line-height: 1.5;
  margin: 0;
}

.gm-card__rating {
  font-size: 11px;
  font-weight: 700;
  color: var(--gm-coral);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 1024px) {
  .gm-card__body { padding: 14px 16px 16px; }
  .gm-card__title { font-size: 15px; }
  .gm-card__meta,
  .gm-card__rating { font-size: 12px; }
}

/* ---- グリッド ---- */

.gm-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .gm-grid { gap: 20px; }
  .gm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

.gm-breadcrumb {
  background: var(--gm-surface);
  padding: 10px var(--gm-gutter);
}

.gm-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--gm-content-max);
  font-size: 10px;
}

.gm-breadcrumb__list a {
  color: var(--gm-sub);
  text-decoration: none;
}

.gm-breadcrumb__list a:hover { text-decoration: underline; }

.gm-breadcrumb__current {
  color: var(--gm-ink);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .gm-breadcrumb__list { font-size: 12px; }
}

/* ---- ページネーション ---- */

.gm-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding-block: 24px;
}

.gm-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px 13px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-btn);
  background: var(--gm-white);
  color: var(--gm-sub);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
}

.gm-pager .page-numbers.current {
  background: var(--gm-ink);
  border-color: var(--gm-ink);
  color: var(--gm-white);
}

.gm-pager .page-numbers:hover:not(.current) { border-color: var(--gm-ink); }

.gm-pager__note {
  text-align: center;
  font-size: 10px;
  color: var(--gm-muted);
  margin: 0 0 24px;
}

/* ---- 広告枠 ----
 * min-height は inc/ads.php が動的に出力する（枠定義と1箇所で整合させるため）。
 * ここでは見た目のみ定義する。 */

.gemini-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-block: 24px;
}

.gemini-ad__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--gm-muted);
  line-height: 1;
}

.gemini-ad__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1024px) {
  .gemini-ad__frame { max-width: 728px; }
  .gemini-ad--infeed .gemini-ad__frame { max-width: 336px; }
}

.gemini-ad__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 1px dashed var(--gm-ad-line);
  border-radius: var(--gm-radius-btn);
  background: var(--gm-ad-bg);
  color: var(--gm-ad-ink);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

/* ---- 注釈 ---- */

.gm-note {
  font-size: 10px;
  color: var(--gm-muted);
  line-height: 1.65;
  margin: 8px 0 0;
}

@media (min-width: 1024px) {
  .gm-note { font-size: 12px; }
}

/* ---- アクセシビリティ ---- */

.gm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:where(.gm-btn, .gm-chip, .gm-card, .gm-pager .page-numbers):focus-visible {
  outline: 2px solid var(--gm-coral);
  outline-offset: 2px;
}

/* ---- 記事本文: 目次(wa-toc)・執筆者ボックス(wa-author-box)
 * AIコンテンツ生成/リライトパイプラインが記事本文の先頭・末尾に自動挿入するブロック。
 * 全記事で共通の見た目にするため、ここでスタイルを統一する。 ---- */

.wa-toc {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 16px 20px;
  margin: 20px 0 28px;
}

.wa-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 10px;
}

.wa-toc ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gm-sub);
}

.wa-toc ol ol {
  padding-left: 1.2em;
  font-size: 12px;
}

.wa-toc a {
  color: var(--gm-article-ink);
  text-decoration: none;
}

.wa-toc a:hover {
  text-decoration: underline;
}

.wa-author-box {
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 20px 24px;
  margin: 40px 0 20px;
}

.wa-author-box-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gm-muted);
  letter-spacing: .04em;
  margin: 0 0 8px;
}

.wa-author-box-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 8px;
}

.wa-author-box p {
  font-size: 13px;
  color: var(--gm-sub);
  line-height: 1.75;
  margin: 0 0 6px;
}

.wa-author-box p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .wa-toc { padding: 20px 28px; }
  .wa-toc ol { font-size: 14px; }
  .wa-author-box { padding: 24px 32px; }
}

/* ============================================================
 * yoruno-theme 追加分（ヘッダー・フッター・固定ナビ）
 * 旧 gemini-theme の u- クラス実装を gm- へ移した際の追加。
 * ============================================================ */

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

.gm-header {
  border-bottom: 1px solid var(--gm-line);
  background: var(--gm-white);
}

/* トップページ: ロゴ2枚を中央に積む */
.gm-header--brand {
  padding: 12px var(--gm-gutter);
  text-align: center;
}

.gm-header--brand h1 { margin: 0; }

.gm-header__copy {
  display: block;
  margin: 0 auto 8px;
}

.gm-header__logo { display: block; margin: 0 auto; }

/* 下層: 戻る矢印 + タイトル */
.gm-header--page {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
}

.gm-header__back {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gm-header__title {
  flex: 1;
  margin: 0;
  padding-inline: 48px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .gm-header__title { font-size: 18px; }
}

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

.gm-footer {
  border-top: 1px solid var(--gm-line);
  padding-block: 24px;
  /* 固定ナビに隠れないよう下に逃がす */
  margin-bottom: 56px;
}

.gm-footer__copy {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--gm-sub);
}

/* ---- 画面下の固定ナビ ---- */

.gm-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--gm-white);
  border-top: 1px solid var(--gm-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.gm-tabbar__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-tabbar__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 12px;
}

.gm-tabbar__list img { height: 28px; width: auto; }

@media (min-width: 1024px) {
  .gm-tabbar { display: none; }
  .gm-footer { margin-bottom: 0; }
}

/* ---- 横スクロールの並び（人気の女優・バナー） ---- */

.gm-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.gm-scroller > * { flex: 0 0 auto; scroll-snap-align: start; }

.gm-avatar {
  width: 100px;
  text-align: center;
}

.gm-avatar img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.gm-avatar__name {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--gm-ink);
  line-height: 1.4;
}

/* ---- セクションヘッダーに「全て見る」を置く ---- */

.gm-section__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gm-section__bar .gm-heading { margin: 0; }
.gm-section__bar .gm-btn { margin-left: auto; }

/* ============================================================
 * Figma準拠セクション（node 86:751 PC / TOPページ）
 * 値は Figma 実測。トークンは上の :root を使う。
 * ============================================================ */

/* ---- グローバルナビ（1段ヘッダー内） ---- */

.gm-nav { min-width: 0; }

.gm-nav__list {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.gm-nav__list::-webkit-scrollbar { display: none; }

/* line-height を px で固定する理由は .gm-topbar__search input と同じ。
 * 900px以下ではこのナビがヘッダーの2行目になるので、既定の normal のままだと
 * Web フォントが当たった時点で行の高さが変わり、ヘッダーごと本文が下へずれる。 */
.gm-nav__list a {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gm-sub);
  text-decoration: none;
  white-space: nowrap;
}

.gm-nav__list a:hover { color: var(--gm-ink); }

@media (min-width: 1024px) {
  .gm-nav__list { gap: 24px; }
  /* 14px には 20px だと行の高さが足りない（Noto Sans JP の normal は 14 × 約1.48 ＝ 20.7px）。
   * .gm-nav__list は overflow-x: auto なので縦もはみ出しを抱える形になる。22px にして余らせる。
   * この幅ではナビはヘッダー1行目に並び、行の高さはロゴ側の 40px で決まるので、
   * ここを 20px から 22px にしてもヘッダーの高さは変わらない。 */
  .gm-nav__list a { font-size: 14px; line-height: 22px; }
}

/* ---- 00 ヒーロー ---- */

.gm-hero {
  background: var(--gm-white);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 32px var(--gm-gutter);
  max-width: var(--gm-content-max);
  margin-inline: auto;
}

.gm-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 0;
}

.gm-hero__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--gm-ink);
  margin: 0;
  max-width: 820px;
}

.gm-hero__lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gm-sub);
  margin: 0;
  max-width: 820px;
}

.gm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gm-hero__cta .gm-btn { padding: 15px 28px; font-size: 15px; }

.gm-hero__note {
  font-size: 12px;
  line-height: 1.65;
  color: var(--gm-muted);
  margin: 0;
  max-width: 820px;
}

.gm-hero__visual {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 340;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* 画像は枠いっぱいに敷く。比率が違う画像は cover で切り取られる
 * （設定画面「外観 > メインビジュアル」で比率のずれを警告している）。 */
.gm-hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* リンクつきの場合、a が枠を埋めないと画像が中央の小さい塊になる */
.gm-hero__visual > a { display: block; width: 100%; height: 100%; }

/* 画像を入れたら枠線と面は不要。プレースホルダのときだけ見せる */
.gm-hero__visual:has(img) { background: none; border: none; }

.gm-hero__visual span {
  font-size: 14px;
  color: var(--gm-muted);
}

@media (min-width: 1024px) {
  .gm-hero { flex-direction: row; gap: 48px; padding: 56px var(--gm-gutter); }
  .gm-hero__title { font-size: 38px; }
}

/* ---- 03 人気ランキング ---- */

.gm-rank-cols {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .gm-rank-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

.gm-rank {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  background: var(--gm-white);
  overflow: hidden;
}

.gm-rank__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gm-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--gm-ink);
}

.gm-rank__list { list-style: none; margin: 0; padding: 0; }

.gm-rank__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--gm-line);
}

.gm-rank__list li:last-child { border-bottom: none; }

.gm-rank__no {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--gm-surface);
  color: var(--gm-sub);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-rank__list li:nth-child(-n+3) .gm-rank__no {
  background: var(--gm-coral-bg);
  color: var(--gm-coral-ink);
}

.gm-rank__list a {
  flex: 1;
  font-size: 13px;
  color: var(--gm-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-rank__list a:hover { text-decoration: underline; }

/* ---- 05 配信サービス比較 ---- */

.gm-service {
  background: var(--gm-coral-bg);
}

.gm-service__cols {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  /* カードが1枚のとき（MGSのURL未登録など）に半分幅で残らないよう auto-fit にする */
  .gm-service__cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
}

.gm-service__card {
  background: var(--gm-white);
  border-radius: var(--gm-radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-service__name { font-size: 15px; font-weight: 700; color: var(--gm-ink); margin: 0; }
.gm-service__desc { font-size: 12px; color: var(--gm-sub); margin: 0; flex: 1; }

/* ---- 06 このサイトについて ---- */

.gm-about { background: var(--gm-article-bg); }

.gm-about__cols {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .gm-about__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.gm-about__item {
  background: var(--gm-white);
  border-radius: var(--gm-radius-card);
  padding: 16px 18px;
}

.gm-about__item h3 { font-size: 13px; font-weight: 700; color: var(--gm-article-ink); margin: 0 0 6px; }
.gm-about__item p { font-size: 12px; line-height: 1.7; color: var(--gm-sub); margin: 0; }

/* ---- フッター サイトマップ ---- */

.gm-sitemap {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: 28px;
}

@media (min-width: 1024px) {
  .gm-sitemap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
}

.gm-sitemap h3 { font-size: 12px; font-weight: 700; color: var(--gm-ink); margin: 0 0 8px; }
.gm-sitemap ul { list-style: none; margin: 0; padding: 0; }
.gm-sitemap li { margin-bottom: 5px; }
.gm-sitemap a { font-size: 12px; color: var(--gm-sub); text-decoration: none; }
.gm-sitemap a:hover { text-decoration: underline; }

/* ---- ヘッダー（node 86:752 + 86:759 を1段に統合） ---- */

.gm-topbar {
  background: var(--gm-white);
  border-bottom: 1px solid var(--gm-line);
}

/* min-height は「ヘッダーの高さを、中身の読み込み状況に関係なく先に決める」ため。
 * <main> のすぐ上にあるのはこのヘッダーだけなので、ここの高さが後から変わると
 * ページ本文が丸ごと下へずれる。PSI 2026-08-24 のモバイル計測で
 * 「レイアウト シフトの原因」に挙がっていた <main>（スコア 0.179）がこれ。
 *
 * 内訳（1024px未満・--gm-gutter 20px のとき）:
 *   padding-block 12px × 2 ＝ 24px
 *   1行目 40px（.gm-topbar__logo の padding 10px × 2 ＋ ロゴ画像 20px）
 *   計 64px
 * 900px以下は折り返して2行になるので、下のメディアクエリで上書きする。 */
.gm-topbar__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 64px;
  max-width: var(--gm-content-max);
  margin-inline: auto;
  padding: 12px var(--gm-gutter);
}

.gm-topbar__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--gm-surface);
  border-radius: var(--gm-radius-btn);
  padding: 10px 16px;
  text-decoration: none;
}

/* 幅も px で持つ（元は width: auto）。
 * 画像は 120×22 の SVG で、高さ 20px に合わせると幅は 109.09px。
 * 109px に丸めているぶん縦が 0.09px 縮むが、SVG なので目視できる差にはならない。
 *
 * 【なぜ auto をやめるか】
 * auto は「読み込んで実寸が分かるまで決まらない」値。img の width/height 属性が
 * 生きていれば属性から比率を割り出して先に確保されるが、遅延読み込みプラグインが
 * src を差し替える過程で属性の扱いが変わると、そこが崩れる。実際 PSI 2026-08-24 の
 * 「レイアウト シフトの原因」で、このロゴが width="120" height="22" を持ったまま
 * 「サイズ指定されていない画像要素」として挙がっていた。
 * 縦横とも px で書いておけば、属性が何であろうと枠は先に決まる。
 * header.php 側で遅延読み込みからも外してあり、こちらはその二重の備え。 */
.gm-topbar__logo img { height: 20px; width: 109px; display: block; }

/* 検索は右端。伸ばしすぎないよう上限を付ける */
.gm-topbar__search {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  margin-left: auto;
}

/* line-height を px で固定する。既定の normal はフォントごとに違う値になるため、
 * Noto Sans JP が当たった瞬間に入力欄の高さが変わる。ヘッダーの高さが動く経路を
 * 1つずつ塞ぐ意図（下の .gm-nav__list a も同じ）。
 * 20px は Noto Sans JP の normal 相当（13px × 約1.48 ＝ 19.2px）を丸めた値で、
 * 入力欄の高さは 20 + padding 9×2 + border 1×2 ＝ 40px。ロゴ側と同じ高さになる。 */
.gm-topbar__search input[type="search"] {
  width: 100%;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--gm-ink);
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-btn);
  padding: 9px 14px;
}

.gm-topbar__search input::placeholder { color: var(--gm-muted); }

/* 狭い画面では ロゴ+検索 / ナビ の2行に折り返す
 *
 * min-height の内訳:
 *   padding-block 10px × 2  ＝ 20px
 *   1行目（ロゴ / 検索）     ＝ 40px
 *   行間の gap               ＝ 10px
 *   2行目（ナビ）            ＝ 20px（.gm-nav__list a の line-height）
 *   計 90px
 * PSI の計測条件（Moto G Power エミュレーション / 幅412px）はここに入る。 */
@media (max-width: 900px) {
  .gm-topbar__inner { flex-wrap: wrap; gap: 10px 14px; padding-block: 10px; min-height: 90px; }
  .gm-topbar__search { order: 2; flex: 1 1 auto; max-width: none; }
  .gm-nav { order: 3; flex-basis: 100%; }
}

/* ---- フッター（node 86:972） ---- */

.gm-footer {
  background: var(--gm-surface);
  border-top: 1px solid var(--gm-line);
  padding: 40px 0 24px;
  margin-bottom: 56px;
}

.gm-footer__inner {
  max-width: var(--gm-content-max);
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gm-sitemap {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

@media (min-width: 768px) {
  .gm-sitemap { display: flex; gap: 80px; }
}

.gm-sitemap h3 { font-size: 13px; font-weight: 700; color: var(--gm-ink); margin: 0 0 10px; }
.gm-sitemap ul { list-style: none; margin: 0; padding: 0; }
.gm-sitemap li { margin-bottom: 10px; }
.gm-sitemap a { font-size: 13px; color: var(--gm-sub); text-decoration: none; }
.gm-sitemap a:hover { text-decoration: underline; }

.gm-footer__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--gm-muted);
  text-align: left;
}

@media (min-width: 1024px) {
  .gm-footer { margin-bottom: 0; }
}

/* 女優などの縦長サムネは顔を見せたいので cover（パッケージ画像は contain のまま） */
.gm-card__thumb--portrait img { object-fit: cover; }

/* ---- 広告枠（inc/ads.php が出力）----
 * 枠ごとの min-height / max-width は inc/ads.php が
 * スロット定義のサイズから組み立てて後ろに足す。ここでは寸法を書かない。 */

.yoruno-ad { text-align: center; padding-block: 24px; }

.yoruno-ad__label {
  display: block;
  font-size: 11px;
  color: var(--gm-ad-ink);
  margin-bottom: 6px;
}

.yoruno-ad__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* タグ未登録の枠だけ、場所が分かるように破線で囲む */
.yoruno-ad__frame--empty {
  background: var(--gm-ad-bg);
  border: 1px dashed var(--gm-ad-line);
  border-radius: var(--gm-radius-btn);
}

.yoruno-ad__placeholder { font-size: 12px; color: var(--gm-ad-ink); }

.gm-rank__score {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--gm-coral);
}

/* ---- 女優カード（アバター型）----
 * 女優のアイキャッチは取り込み時の都合で 125x125 しかない。
 * Figmaの縦長カードのまま引き伸ばすと3倍拡大でぼやけるため、
 * 原寸に近いサイズの円形アバターとして見せる。
 * 元画像が差し替えられたら --portrait に戻せばよい。
 */

.gm-card__thumb--avatar {
  aspect-ratio: auto;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gm-surface);
}

.gm-card__thumb--avatar img {
  width: 120px;
  height: 120px;
  max-width: 120px;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(31, 31, 29, .12);
}

.gm-card--actress .gm-card__body {
  align-items: center;
  text-align: center;
  gap: 3px;
}

.gm-card--actress .gm-card__title { font-size: 14px; font-weight: 700; }

@media (min-width: 1024px) {
  .gm-card__thumb--avatar { height: 188px; }
  .gm-card__thumb--avatar img { width: 132px; height: 132px; max-width: 132px; }
}

/* ---- ページヘッダー（node 86:1238） ---- */

.gm-pagehead { background: var(--gm-white); padding: 28px 0 8px; }

.gm-pagehead__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--gm-ink);
  margin: 0 0 12px;
}

.gm-pagehead__lead {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gm-sub);
  margin: 0 0 12px;
  max-width: 1200px;
}

.gm-pagehead__meta { margin: 0; }

.gm-pill {
  display: inline-flex;
  align-items: center;
  background: var(--gm-surface);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-ink);
}

@media (min-width: 1024px) {
  .gm-pagehead { padding: 36px 0 8px; }
  .gm-pagehead__title { font-size: 32px; }
  .gm-pagehead__lead { font-size: 15px; }
}

/* ---- 絞り込み・並び替え（node 86:1245） ---- */

.gm-filter { background: var(--gm-white); padding-bottom: 24px; }

.gm-filter .gm-chip-list { margin-bottom: 14px; }

/* ボタン要素をチップとして使うためのリセット */
.gm-chip-list button.gm-chip {
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
}

.gm-sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.gm-sortbar__label { font-size: 12px; color: var(--gm-muted); white-space: nowrap; }

.gm-sortbar .gm-chip-list { margin-bottom: 0; }

.gm-note { font-size: 13px; color: var(--gm-sub); }

/* hidden 属性を確実に効かせる
 * .gm-card は display:flex を持つため、ブラウザ標準の [hidden]{display:none}
 * に打ち勝ってしまい、絞り込みで非表示にならない。詳細度を上げて明示する。 */
.gm-grid > [hidden],
.gm-card[hidden] { display: none; }

/* ============================================================
 * 女優詳細（Figma node 86:522）
 * ============================================================ */

/* ---- 01 ヒーロー ---- */

.gm-ahero { background: var(--gm-white); }

.gm-ahero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 24px;
}

/* Figmaは360x460の縦長写真だが、実際のアイキャッチは125x125しかない。
 * 枠に合わせて引き伸ばすと3倍拡大でぼやけるうえ、余白が目立つ。
 * 実画像に近いサイズの正方形にしている。元画像を差し替えたら
 * aspect-ratio: 360/460 と width:100% に戻せばFigma準拠になる。 */
.gm-ahero__photo {
  width: 160px;
  height: 160px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gm-ahero__photo img { width: 100%; height: 100%; object-fit: cover; }
.gm-ahero__noimg { font-size: 12px; color: var(--gm-muted); }

.gm-ahero__body { flex: 1; min-width: 0; }

.gm-ahero__ruby { font-size: 13px; color: var(--gm-sub); margin: 0 0 2px; }

.gm-ahero__name {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gm-ink);
  margin: 0 0 14px;
}

.gm-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.gm-ahero__lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gm-sub);
  margin: 0 0 16px;
}

.gm-ahero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 1024px) {
  .gm-ahero__inner { flex-direction: row; gap: 32px; padding-block: 36px; align-items: flex-start; }
  .gm-ahero__photo { width: 200px; height: 200px; }
  .gm-ahero__name { font-size: 34px; }
  .gm-ahero__lead { font-size: 15px; }
}

/* ---- 02 もくじ（追従バー） ---- */

.gm-toc {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-block: 1px solid var(--gm-line);
}

.gm-toc__inner { display: flex; align-items: center; gap: 14px; padding-block: 11px; }

.gm-toc__label { font-size: 12px; color: var(--gm-muted); flex-shrink: 0; }

.gm-toc__list {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.gm-toc__list::-webkit-scrollbar { display: none; }

.gm-toc__list a {
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-sub);
  text-decoration: none;
  white-space: nowrap;
}

.gm-toc__list a:hover { color: var(--gm-ink); }

/* アンカー先が追従バーに隠れないように */
[id^="section-"] { scroll-margin-top: 64px; }

/* ---- 本文2カラム ---- */

.gm-2col { display: block; }

.gm-2col__main { min-width: 0; }

.gm-2col__side { display: none; }

@media (min-width: 1024px) {
  .gm-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
  }
  /* sticky はカラム自体に付ける。
   * 内側の .gm-sticky に付けると、align-items:start で side の高さが中身と同じに
   * なるため、sticky が動ける余白がゼロになって追従しない。 */
  .gm-2col__side {
    display: block;
    position: sticky;
    /* メインカラム先頭の .gm-section（padding-block:48px）と頭を揃える */
    top: 124px;
    align-self: start;
  }
  .gm-sticky { display: flex; flex-direction: column; gap: 16px; }
}

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

.gm-proflist {
  display: grid;
  grid-template-columns: 120px 1fr;
  margin: 0;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  overflow: hidden;
  font-size: 14px;
}

.gm-proflist dt,
.gm-proflist dd {
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--gm-line);
}

.gm-proflist dt { background: var(--gm-surface); color: var(--gm-sub); font-size: 13px; }
.gm-proflist dd { color: var(--gm-ink); }
.gm-proflist dt:nth-last-of-type(1),
.gm-proflist dd:nth-last-of-type(1) { border-bottom: none; }

/* ---- 04 解説記事の本文 ---- */

.gm-prose { font-size: 15px; line-height: 1.9; color: var(--gm-ink); }
.gm-prose p { margin: 0 0 1.2em; }
.gm-prose h3 { font-size: 17px; font-weight: 700; margin: 1.8em 0 .6em; }
.gm-prose a { color: var(--gm-coral); }

/* ---- 06 メインCTA の補助リンク ---- */

.gm-subcta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.gm-subcta a { font-size: 12px; color: var(--gm-sub); }

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

.gm-sidecta,
.gm-sidebox {
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 18px;
}

.gm-sidecta { display: flex; flex-direction: column; gap: 10px; }
.gm-sidecta__title { font-size: 15px; font-weight: 700; color: var(--gm-ink); margin: 0; }
.gm-sidecta__meta { font-size: 12px; color: var(--gm-sub); margin: 0; }
.gm-sidebox__title { font-size: 13px; font-weight: 700; color: var(--gm-ink); margin: 0 0 10px; }

/* ---- もっと見るリンク ---- */

.gm-morelink { text-align: center; margin: 20px 0 0; }

/* ---- SP用の追従CTAバー ---- */

.gm-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 56px; /* タブバーの上 */
  z-index: 45;
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--gm-line);
  backdrop-filter: blur(6px);
}

.gm-stickybar .gm-btn { flex: 1; padding: 12px 10px; font-size: 13px; }

@media (min-width: 1024px) {
  .gm-stickybar { display: none; }
}

/* .gm-service はトップの全幅バンド用で、内側の .gm-container が左右余白を作る。
 * 女優ページでは2カラムの中に直接置くため、余白と角丸をここで補う。 */
.gm-2col__main .gm-service {
  padding-inline: 20px;
  border-radius: var(--gm-radius-card);
}

/* 2カラムの上下の余白
 * メインは .gm-section が余白を持つが、サイドと下端は素のままだった。
 * サイド頭をメインの見出しと揃え、セクション末尾と次のバンドの間を空ける。 */
.gm-2col { padding-block: 0 32px; }

@media (min-width: 1024px) {
  .gm-2col { padding-block: 0 56px; }
  .gm-2col__side { padding-top: 48px; }
}

/* 06 の補助リンクは、テキストのままだとリンクに見えない。
 * 小さめのアウトラインボタンにして押せることを明示する。 */
.gm-subcta { gap: 8px; margin-top: 10px; }

.gm-subcta a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border: 1px solid var(--gm-line);
  border-radius: 999px;
  background: var(--gm-white);
  color: var(--gm-ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.gm-subcta a::after { content: '›'; color: var(--gm-muted); }
.gm-subcta a:hover { border-color: var(--gm-ink); }

/* もっと見るボタンを横いっぱいに使う指定 */
.gm-morelink .gm-btn--full { width: 100%; }

/* ============================================================
 * 作品レビュー個別ページ（single.php）
 * Figma node 105:522（PC 内容幅1060 A案確定版）/ 111:522（SP 440）
 * 比較記録: 144:522（B案 内容幅1600）/ 147:522（比較ノート）
 *
 * 【このページだけ内容幅が 1060px の理由】
 * 既存の商品ブロックは .u-max-w-560 で幅560px固定になっており、PC 1728px でも
 * 広がらない。そこで 560px を「このページの版面」として採用し、
 *   柱600（内容560）+ gap40 + レール420 = 1060px
 * で左右対称にしている。他ページの 1600px より狭いが、ページ内で幅が一度も
 * 変動しないことを優先した判断（比較ノート 147:522 に経緯あり）。
 *
 * 【既存ブロックに触らずに再デザインできる根拠】
 * #review-content は id が振られていて中の要素に class が無く data-gtm-click も
 * 0件。サンプル画像ギャラリーもリンクが無い。この2区画（実測 8,198px / 72%）は
 * セレクタだけで組み直せる。content-fanza-videoa.php 等は1行も変更していない。
 * ============================================================ */

/* ---- 内容幅 1060px ---- */

.gm-review-container {
  /* 1060 + 左右のガター。gm-container の max-width を上書きする */
  max-width: calc(1060px + var(--gm-gutter) * 2);
}

/* ---- 01 記事ヘッダー ---- */

.gm-review-head { padding-block: 20px 8px; }

.gm-review-head__inner { display: block; }

.gm-review-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.gm-chip--static { cursor: default; pointer-events: none; }

/* チップの件数（/tags/ のジャンル・タグ一覧）。名前より一段弱く見せる */
.gm-chip__count {
  margin-left: 6px;
  font-size: 11px;
  color: var(--gm-muted);
  font-variant-numeric: tabular-nums;
}

.gm-review-head__date { font-size: 12px; color: var(--gm-sub); }

.gm-review-head__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--gm-ink);
  margin: 0;
}

.gm-review-head__rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 14px;
}

.gm-stars { color: var(--gm-coral); font-size: 16px; letter-spacing: 1px; }
.gm-review-head__score { font-size: 22px; font-weight: 700; color: var(--gm-ink); }

/* 件数を必ず併記する。6件しかない平均値を「高評価」として見せると誤認を招くため、
 * スコアと同じ行に置いて切り離せないようにしている。 */
.gm-review-head__count { font-size: 12px; color: var(--gm-sub); }

.gm-review-head__lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gm-ink);
  margin: 16px 0 0;
}

/* 出演女優カード */
.gm-review-head__actress {
  margin-top: 20px;
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 18px;
}

.gm-actressrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  text-decoration: none;
  color: inherit;
}

.gm-actressrow__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gm-surface);
}

.gm-actressrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-actressrow__name { font-size: 15px; font-weight: 700; color: var(--gm-ink); }
.gm-actressrow__meta { font-size: 12px; color: var(--gm-sub); }

.gm-subcta--single { margin-top: 12px; }

@media (min-width: 1024px) {
  .gm-review-head { padding-block: 32px 12px; }
  /* h1 の左端を既存ブロックの左端（柱の内容560px の左端）と一致させる。
   * ヘッダーを全幅にすると 334px の空白インデントに見えて破綻する。 */
  .gm-review-head__inner {
    display: grid;
    grid-template-columns: 600px 420px;
    gap: 40px;
    align-items: start;
  }
  .gm-review-head__main { padding-inline: 20px; }
  .gm-review-head__title { font-size: 28px; }
  .gm-review-head__actress { margin-top: 0; }
}

/* ---- もくじ・進捗バー ---- */

.gm-toc--review .gm-toc__progress {
  display: none;
  width: 180px;
  height: 6px;
  border-radius: 999px;
  background: var(--gm-line);
  margin-left: auto;
  flex-shrink: 0;
  overflow: hidden;
}

.gm-toc--review .gm-toc__progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gm-coral);
}

.gm-toc__skip {
  font-size: 12px;
  color: var(--gm-sub);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.gm-toc__skip:hover { color: var(--gm-ink); }

/* 現在位置。11,768px をスクロールする間「まだメーカー提供データの中」が
 * 常に分かることが、囲み枠を捨てた代わりの主要な認識装置になっている。 */
.gm-toc__list a[aria-current="true"] { color: var(--gm-coral); font-weight: 700; }

@media (min-width: 1024px) {
  .gm-toc--review .gm-toc__progress { display: block; }
}

@media (max-width: 1023px) {
  .gm-toc__skip { display: none; }
}

/* ---- 2カラム（柱600 + レール420） ---- */

@media (min-width: 1024px) {
  .gm-2col--review {
    grid-template-columns: 600px 420px;
    gap: 40px;
  }
  /* 柱の内容を 560px にして、既存ブロックの .u-max-w-560 と幅を一致させる */
  .gm-2col--review .gm-2col__main { padding-inline: 20px; }
  .gm-2col--review .gm-2col__side { padding-top: 0; }
}

/* ---- 02 見出し（既存ブロックの入口） ---- */

.gm-heading--legacy { margin-top: 24px; }

@media (min-width: 1024px) {
  .gm-heading--legacy { margin-top: 40px; }
}

/* ============================================================
 * 既存ブロック（.gm-legacy-product）
 * 中の HTML・u- クラス・data-gtm-click は一切変更していない。
 * ここから下はすべてセレクタだけで当てている。
 * ============================================================ */

/* 既存テンプレート先頭のタイトル＋日付ブロックを隠す。
 * 01 記事ヘッダーの h1 と時刻が同じ内容を持つため重複する。
 * 元の要素は div（見出しではない）なので、隠しても見出し階層に影響しない。 */
/* 先頭は <style> 要素なので :first-child では当たらない。
 * この div.u-p-6.u-pb-3 の組み合わせは既存テンプレート内で一意。 */
.gm-legacy-product > .u-max-w-560 > div.u-p-6.u-pb-3 { display: none; }

/* 触れない参照データを面で囲む。囲むのは1〜2画面に収まる区画だけ。
 * 11,442px 全体を囲む案は、スクロール中ずっと枠線が視界の外にあって
 * 「囲まれている」ことが認識できないため破棄した。 */
.gm-legacy-product section:has(> table),
.gm-legacy-product section.u-bg-light-gray {
  position: relative;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 40px 16px 16px;
  margin-bottom: 24px;
}

.gm-legacy-product section:has(> table)::before,
.gm-legacy-product section.u-bg-light-gray::before {
  content: 'メーカー提供の作品データ';
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 11px;
  color: var(--gm-muted);
}

/* 02「作品を見る」区画は囲まない。
 * ここには購入ボタンがある。CV導線をグレー枠で括ると免責表示に見え、
 * 行動を促す場所として弱くなる。白地のまま連番見出しと余白だけで区切る。 */

/* ------------------------------------------------------------
 * 03 レビュー本文（#review-content）
 * the_content() の素の出力。class が1つも無く data-gtm-click も0件なので、
 * セレクタだけで新デザインのタイポグラフィを流し込める。
 * H2 の本数は記事によって4〜5本で可変なため、連番は振らない。
 * ------------------------------------------------------------ */

.gm-legacy-product #review-content {
  position: relative;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gm-ink);
  scroll-margin-top: 64px;
}

/* 03 の連番。中途に実見出しを挿せないので装飾として注入する。
 * 見出し階層は中の h2 群が担っている。 */
.gm-legacy-product #review-content::before {
  content: '03 レビュー本文';
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gm-coral);
  letter-spacing: .04em;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gm-line);
}

.gm-legacy-product #review-content p { margin: 0 0 22px; font-size: 15px; line-height: 1.8; }

/* content-fanza-videoa.php 等がテンプレート内の <style> で
 *   #review-content h2 { background:#f2f2f2; padding:1rem; border-radius:.5rem }
 * を当てている。インライン <style> は本文中にあるため後勝ちするが、
 * .gm-legacy-product を足した分こちらの詳細度が上。明示的に打ち消しておく。
 * （下のモジュール2種だけは、この後で面と余白を付け直している） */
.gm-legacy-product #review-content h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gm-ink);
  margin: 40px 0 14px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* 見出し直後に来るので、地の文の h2 の上マージンがそのまま乗ると空きすぎる */
.gm-legacy-product #review-content > h2:first-of-type { margin-top: 0; }

/* 旧デザインでは h3 が 14px = 本文と同サイズで、ウェイトだけで差をつけていた。
 * 記事内で最も読ませたい「見どころ3点」が本文に埋もれるため 16px に上げる。 */
.gm-legacy-product #review-content h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--gm-ink);
  margin: 28px 0 10px;
}

.gm-legacy-product #review-content ul,
.gm-legacy-product #review-content ol { margin: 0 0 22px; padding-left: 1.3em; }
.gm-legacy-product #review-content li { margin-bottom: 8px; line-height: 1.8; }
.gm-legacy-product #review-content a { color: var(--gm-coral); }

/* ---- 本文内モジュール1: 内部リンクカード（全記事共通「次にチェックすべき注目レビュー」） ----
 * 現状は各171pxのバナー3枚が連続し、本文の途中に約577pxの壁を作っている。
 * 横型に圧縮して回遊導線として機能させつつ、本文の流れを切らない。
 * 見出しは実 h2 が既にあるので ::before で注入しない（二重になる）。
 * 面はラッパー無しで作る。h2 と3枚に同じ背景を与え、先頭に上側・末尾に下側の
 * 角丸だけ付ければ、隙間なく1枚の面として繋がる。 */

.gm-legacy-product #review-content h2:has(+ div.u-mb-32) {
  font-size: 17px;
  margin: 32px 0 0;
  padding: 16px 16px 12px;
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card) var(--gm-radius-card) 0 0;
}

.gm-legacy-product #review-content > div.u-mb-32 {
  margin: 0;
  padding: 0 16px 10px;
  background: var(--gm-surface);
}

/* 記事によってはカード群の直前が h2 ではなく p のことがある（実測: snos00291）。
 * その場合 h2 側の指定が当たらないので、カード群の先頭が面の上端を担う。 */
.gm-legacy-product #review-content > div.u-mb-32:first-of-type {
  margin-top: 32px;
  padding-top: 16px;
  border-radius: var(--gm-radius-card) var(--gm-radius-card) 0 0;
}

/* 直前に h2 がある記事では、h2 が面の上端なのでカード側の角丸と上余白を戻す */
.gm-legacy-product #review-content h2:has(+ div.u-mb-32) + div.u-mb-32 {
  margin-top: 0;
  padding-top: 0;
  border-radius: 0;
}

.gm-legacy-product #review-content > div.u-mb-32:last-of-type {
  padding-bottom: 16px;
  border-radius: 0 0 var(--gm-radius-card) var(--gm-radius-card);
  margin-bottom: 32px;
}

.gm-legacy-product #review-content > div.u-mb-32 > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-btn);
  text-decoration: none;
  color: inherit;
}

.gm-legacy-product #review-content > div.u-mb-32 > a:hover { border-color: var(--gm-muted); }

/* 元は縦積みの大きなバナー。サムネを固定サイズにして横型に組み替える */
.gm-legacy-product #review-content > div.u-mb-32 > a > div:first-child {
  flex: 0 0 96px;
  width: 96px;
  margin: 0;
}

/* 高さは固定しない。96x64 に cover で嵌めるとパッケージ画像の上下が切れる
   （ショートコード側の元指定も u-h-auto / u-object-contain）。 */
.gm-legacy-product #review-content > div.u-mb-32 img {
  width: 96px;
  height: auto;
  border-radius: 4px;
  display: block;
}

.gm-legacy-product #review-content > div.u-mb-32 > a > div:last-child { min-width: 0; }

.gm-legacy-product #review-content > div.u-mb-32 > a > div:last-child > *:first-child {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* 抜粋は横型では入りきらないので落とす */
.gm-legacy-product #review-content > div.u-mb-32 > a > div:last-child > *:not(:first-child) { display: none; }

/* ---- 本文内モジュール2: 「こんな人にオススメ！」（全記事共通・必ず最後のh2） ----
 * 読者が「これは自分だ」と自己判定する装置。地の文と同じ組みだと流し読みで
 * 飛ばされるが、チェックリストの体裁にすると視線が止まり、直後のサンプル画像・
 * 購入ボタンへの動機づけになる。CVに最も近いテキストなので面を1枚使う。 */

.gm-legacy-product #review-content h2:last-of-type {
  font-size: 17px;
  margin: 32px 0 0;
  padding: 16px 16px 12px;
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card) var(--gm-radius-card) 0 0;
}

.gm-legacy-product #review-content h2:last-of-type + ul {
  margin: 0 0 32px;
  padding: 0 16px 16px;
  list-style: none;
  background: var(--gm-surface);
  border-radius: 0 0 var(--gm-radius-card) var(--gm-radius-card);
}

.gm-legacy-product #review-content h2:last-of-type + ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.8;
}

.gm-legacy-product #review-content h2:last-of-type + ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gm-coral);
  font-weight: 700;
}

/* 面（罫線・ラベルなし）= 本文内のモジュール
 * 面 + 罫線 + ラベル      = メーカー提供の参照データ
 * この2種を混ぜないため、本文内モジュールには罫線とラベルを付けない。 */

/* ------------------------------------------------------------
 * 04 サンプル画像ギャラリー
 *
 * 【当面1カラム維持】実測 5,665px（PC・512px幅で10枚縦積み / SPは約4,870px）。
 * lightbox を作らない判断が出たため、一覧時の画像サイズが購入判断の唯一の材料に
 * なった。縮めると購入率が落ちるおそれがあるので、まず現状のまま公開し、
 * GA4で下記を実測してから2カラム化を判断する。
 *   - この区間の離脱率
 *   - スクロール到達率（何枚目まで見られているか）
 *   - 区間通過後の購入率
 * 離脱率が下がっても購入率が落ちるなら1カラムに戻す。
 *
 * 【2カラム化する場合】以下を有効にするだけ。期待値 PC 5,665px → 約2,000px /
 * SP 約4,870px → 約1,720px。Grid ではなく multi-column を使う理由は、
 * 512×767 と 512×342 がランダムに混在するため Grid では行の高さが縦位置画像に
 * 揃い、横位置画像の下に毎回209pxの空白（10枚で約1,000px）が出るから。
 *
 *   .gm-legacy-product section:has(> div.u-mb-2) { column-count: 2; column-gap: 8px; }
 *   .gm-legacy-product section:has(> div.u-mb-2) > h3,
 *   .gm-legacy-product section:has(> div.u-mb-2) > div.u-mb-2:first-of-type { column-span: all; }
 *   .gm-legacy-product section:has(> div.u-mb-2) > div.u-mb-2 { break-inside: avoid; margin-bottom: 8px; }
 *
 * object-fit: cover でのトリミングは使わない。メーカー提供の画角を切ると、
 * 読者が確認しようとしている中身を隠すことになる。
 * ------------------------------------------------------------ */

/* 04 の連番。実 h3「サンプル画像」が既にあるので数字だけを注入する（見出し階層は正しい） */
.gm-legacy-product section:has(> div.u-mb-2) { scroll-margin-top: 64px; }

.gm-legacy-product section:has(> div.u-mb-2) > h3::before {
  content: '04';
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gm-coral);
  letter-spacing: .04em;
}

/* ---- 既存ブロックの終端 ----
 * 「囲み」を捨てた代わりに、終わりをここで明示する。
 * 開始（連番見出し02）だけがあって終端が無いのが、囲み案で失われていた部分。 */

.gm-legacy-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 24px;
  padding-top: 14px;
  border-top: 1px solid var(--gm-line);
  font-size: 12px;
  color: var(--gm-muted);
}

.gm-legacy-end a { color: var(--gm-sub); text-decoration: none; }
.gm-legacy-end a:hover { color: var(--gm-ink); }

/* ---- 再CTA ---- */

.gm-recta { margin: 0 0 32px; }

/* ---- 右レール（2段階） ---- */

.gm-rail__panel[hidden] { display: none; }

.gm-sidelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.gm-sidelist a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* パッケージ画像は縦横比がまちまち。56x40 に cover で嵌めると上下が切れて
   何の作品か分からなくなるため、幅だけ決めて高さは成り行きにする。 */
.gm-sidelist__thumb {
  width: 56px;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--gm-surface);
}

.gm-sidelist__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- SP: カードタイトルは2行で省略する ----
 * 実データ（32文字級のタイトル）で検証したところ、SPの幅170pxでは3行になる。
 * gm-card__title は既に line-clamp:2 が効いているが、
 * h3 として使うこのページでも確実に効くよう明示する。 */
@media (max-width: 1023px) {
  h3.gm-card__title { -webkit-line-clamp: 2; }
}

/* ---- SP追従CTAバー（このページ用） ----
 * 表示条件は JS で制御する。ページ上端では出さない。 */
.gm-stickybar--review[hidden] { display: none; }

/* ---- Figma 105:522 とのすり合わせ（2026-08-17）----
 * フレームを並べて確認した結果、面の使い方が実装と違っていた箇所を合わせる。
 * いずれも「白いカード＋罫線」で組んでいたものを、Figmaどおり面で塗る。 */

/* メタ行のチップ: カテゴリはアクセント面、品番はグレー面（116:531 / 116:533）
 * アウトラインの白チップだと2つが同じ重みに見え、カテゴリが目印にならない。 */
.gm-chip--cat {
  background: var(--gm-coral-bg);
  border-color: transparent;
  color: var(--gm-coral-ink);
}

.gm-chip--id {
  background: var(--gm-surface);
  border-color: transparent;
  color: var(--gm-sub);
}

/* 出演女優カードは面のみ・罫線なし（116:542） */
.gm-review-head__actress {
  background: var(--gm-surface);
  border-color: transparent;
}

/* 段階1のCTAカードはアクセント面（119:526）
 * 約11,768pxのスクロール中ずっと視界に入る唯一のCV導線なので、
 * 白いカードだと本文の一部に見えて弱い。 */
.gm-rail__panel--cta .gm-sidecta {
  background: var(--gm-coral-bg);
  border-color: transparent;
}

/* コーラルのテキストリンク（116:549）
 * .gm-subcta のアウトラインピルは補助リンク用。ここは主導線なので文字で強く出す。 */
.gm-textlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gm-coral);
  text-decoration: none;
}

.gm-textlink::after { content: '\203A'; }
.gm-textlink:hover { text-decoration: underline; }

/* ---- 幅・余白のずれを直す（2026-08-17 / Figma 105:522 と実測の突き合わせ）----
 *
 * 実測で見つかった不整合:
 *   h1・01ヘッダーの文字      x=337
 *   #video-frame（幅560）      x=337  ← u-p-6 の外にあるため
 *   本文・タグ・サンプル画像    x=361  ← u-p-6 の内側で 24px 押し込まれている
 *   赤いCTAボタン（幅512）      x=361
 *
 * 結果、動画だけが左右24px広く、その下の本文とボタンが内側にずれて見えていた。
 * Figma では柱の内容がすべて同じ左端（x=354 / 柱の左端+20）に揃っている。
 *
 * 既存テンプレートの u-p-6 の左右パディングだけを外して 560px に揃える。
 * HTML は変更しない。上下のパディングは残す（縦のリズムは既存のまま）。
 * 副作用として本文・タグ・CTAボタン・サンプル画像が 512px → 560px に広がる。
 * サンプル画像が大きくなるのは、lightbox を作らない判断と整合する（一覧時の
 * 大きさが購入判断の唯一の材料になったため）。 */
.gm-legacy-product > .u-max-w-560 > div.u-p-6 {
  padding-inline: 0;
}

/* パネルの内側の余白を Figma に合わせる。
 * 出演女優カード（116:542）とレール段階1（119:526）はいずれも
 * 幅420・内容が x=24 から始まる = padding 24px。実装は 18px だった。 */
.gm-review-head__actress,
.gm-2col--review .gm-sidecta,
.gm-2col--review .gm-sidebox {
  padding: 22px 24px 24px;
}

/* 囲んだ参照データも柱の余白に合わせる（16px → 20px） */
.gm-legacy-product section:has(> table),
.gm-legacy-product section.u-bg-light-gray {
  padding: 40px 20px 20px;
}

.gm-legacy-product section:has(> table)::before,
.gm-legacy-product section.u-bg-light-gray::before {
  left: 20px;
}

/* ---- もくじバーの指摘2点（2026-08-17 代表レビュー）----
 *
 * 1. 上の罫線が不要
 *    01ヘッダーとの間に線が入ると、記事ヘッダーが独立したブロックに見えて
 *    h1 とバーが切り離される。下の罫線だけで区切りは足りる。
 *
 * 2. 「もくじ」の文字が柱の内容と揃っていない
 *    バーの内側は gm-container のガター（64px）で始まるが、柱の内容は
 *    そこからさらに 20px 内側にある（h1・見出し・本文はすべて x=337）。
 *    そのため「もくじ」だけが 20px 左に出ていた。
 *    Figma（116:552）も柱の外枠 x=334 に置いていて同じずれがあるので、
 *    こちらで揃える。SPには 20px のインセットが無いので PC のみ。 */

.gm-toc--review {
  border-top: none;
}

@media (min-width: 1024px) {
  .gm-toc--review .gm-toc__inner {
    padding-inline: calc(var(--gm-gutter) + 20px);
  }
}

/* セクション見出しの横に置く導線は右寄せ（2026-08-17 代表レビュー）
 * .gm-section__bar は .gm-btn だけを margin-left:auto で押し出していたため、
 * チップで置いた「女優ページを見る ›」が見出しの直後に貼り付いていた。
 * Figma（120:533）では見出し行の右端（x=921 / 内容幅1060の右寄せ）にある。 */
.gm-section__bar .gm-chip { margin-left: auto; }

/* ---- ラベルの表記を書き換える（2026-08-17 代表判断）----
 *
 * 「メーカー提供の作品データ」は業界語で、読者には何を言われているのか伝わらない。
 * 出典を示す役目は残しつつ、普通の日本語にする。
 *
 * あわせて事実誤認を1つ訂正する。
 * 出演女優ブロック（section.u-bg-light-gray）は actress カスタム投稿を
 * meta_query で引いている「自サイトのコンテンツ」で、メーカー提供データではない。
 * ここに出典ラベルを付けるのは誤り。ラベルは商品情報テーブルだけに絞る。
 * （囲み自体は残す。触らない区画であることと、回遊カードとしての体裁のため） */

.gm-legacy-product section:has(> table)::before {
  /* FANZA / MGS の両方があるので、どちらでも成り立つ言い方にする */
  content: '配信サイトに掲載されている情報';
}

.gm-legacy-product section.u-bg-light-gray::before {
  content: none;
}

/* ラベルが無くなった分、上の余白をほかの面と揃える */
.gm-legacy-product section.u-bg-light-gray {
  padding-top: 20px;
}

/* ============================================================
 * 右レール（2段階sticky）の挙動修正 — 修正指示書 2026-08-17
 * ============================================================ */

/* 指示D: 吸着位置を追従バーの高さに合わせる。
 * 追従バーは47px。top:124px は初期表示の頭揃え目的だったが、
 * 吸着後は77pxの無駄な余白になって視認領域を削っていた。
 * 47 + 16 = 63px。 */
@media (min-width: 1024px) {
  .gm-2col--review .gm-2col__side { top: 63px; }
}

/* 代表指摘: 右カラムが目次バーの罫線とくっついていた。
 * グリッド自体に上の余白を入れて、両カラムを罫線から離す。
 * メイン側は 02 の見出しの上マージンで既に40px空いていたので、
 * 二重にならないようその分を詰める。 */
.gm-2col--review { padding-top: 16px; }
.gm-2col--review .gm-heading--legacy { margin-top: 8px; }

@media (min-width: 1024px) {
  .gm-2col--review { padding-top: 24px; }
  .gm-2col--review .gm-heading--legacy { margin-top: 16px; }
}

/* 指示C-2: パネルの追加は短いフェードで出す。
 * hidden の即時付け外しだと display:none から一気に現れる。
 * display の切替は残すので、1フレーム挟んで --enter を外す（JS側）。 */
@media (min-width: 1024px) {
  .gm-rail__panel {
    transition: opacity .18s ease, transform .18s ease;
  }
  .gm-rail__panel--enter {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-rail__panel { transition: none; }
  .gm-rail__panel--enter { opacity: 1; transform: none; }
}

/* 指示C-1の高さ確保は JS 側（reserveRailHeight）で行う。
 * 固定値で min-height を置くと、回遊パネルが空の記事（出演女優が紐づかない・
 * タグが無い）で無駄な余白を確保し、吸着範囲をその分削ってしまうため。
 * JS無効時は stage1 のみが表示され、min-height も付かないので崩れない。 */

/* 段階2でCTAと回遊が積み上がるので、パネル間の余白を明示する。
 * .gm-sticky の gap:16px は 1024 以上でしか効いていなかった。 */
.gm-2col--review .gm-sticky { display: flex; flex-direction: column; gap: 16px; }

/* ---- 右レール: 2段階切替の廃止に伴う整理（2026-08-17 代表判断）----
 * 「なぜ途中からフェードインするのか。最初から表示でよい」との判断。
 * フェードと段階用の指定を無効化する。JS側の切替ロジックも削除済み。 */

.gm-rail__panel {
  transition: none;
}

.gm-rail__panel--enter {
  opacity: 1;
  transform: none;
}

/* 代表指摘: 「この女優の他の作品」と「タグから探す」がくっついていた。
 * この2つは同じパネル（.gm-rail__panel--browse）の中にある兄弟なので、
 * .gm-sticky の gap では離れない。パネル内にも縦の間隔を持たせる。 */
.gm-rail__panel--browse {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- 既存の「この作品の女優さんは...」ブロックを隠す（2026-08-17 代表判断）----
 *
 * 01 記事ヘッダーの出演女優カードと内容が完全に重複している。
 *   アバター / 女優名 / 女優ページへのリンク
 * さらに右レールの「この女優の他の作品」、05 セクションの「女優ページを見る」
 * も同じ導線を持つため、同じページに同じ導線が4つある状態だった。
 *
 * data-gtm-click は付いていない自サイト内リンクなので、隠しても計測に影響しない。
 * 戻したい場合はこのブロックを消すだけでよい（HTMLは残してある）。 */
/* 追記（代表指摘）: 「MGSのカテゴリー記事だとグレーのボックスの中に商品リンクが
 * 入っている」との指摘を受けて3テンプレートを確認した。
 *   content-fanza-videoa.php:231 / videoc.php:235 / mgs.php:258
 * いずれも section.u-mb-32.u-bg-light-gray.u-p-3.u-rounded-1 は
 * 「この作品の女優さんは...」ブロックで、購入リンクは入っていなかった
 * （購入リンクは a.u-border.u-border-gray[data-gtm-click="purchase-link"] で、
 *   section の外にある独立した要素）。
 *
 * ただし将来テンプレートが変わったときに購入リンクを隠してしまうと
 * 収益が止まる。計測属性を持つリンクを含む場合は絶対に隠さないようにする。 */
.gm-legacy-product section.u-bg-light-gray:not(:has(a[data-gtm-click])) {
  display: none;
}

/* ---- 01 記事ヘッダーの文字色を Figma に合わせる（2026-08-17 代表指摘）----
 * リード文（125:532）は本文色ではなく補助テキスト色。h1 との明度差で
 * 「タイトル → 要約」の階層が読めるようになる。
 * あわせて評価スコア（125:529）も確認したところ、Figma では★と同じ
 * コーラルだった。実装は本文色にしていたので直す。 */

.gm-review-head__lead { color: var(--gm-sub); }
.gm-review-head__score { color: var(--gm-coral); }

/* ---- Figma に無い要素を隠す（2026-08-17 代表判断「Figmaを正として」）----
 *
 * Figma 105:522 の柱の構成は
 *   既存ブロック開始の注記 / 02 作品を見る / 03 レビュー本文 / 04 サンプル画像 /
 *   商品情報・出演女優 / 終端 / 再CTA
 * で、以下は含まれていない。いずれも data-gtm-click を持たないので
 * 計測には影響しない。HTMLは残してあるので指定を消せば戻る。 */

/* 「この記事をシェアする」（content-fanza-videoc.php:108）
 * Figma に無い。SNS共有はヘッダー・フッターの導線と役割が重複する。 */
.gm-legacy-product div.u-bg-light-gray.u-rounded-md {
  display: none;
}

/* 「← 前の記事 / 次の記事 →」（3テンプレート共通の nav.post-navigation）
 * Figma に無い。回遊は 05 この女優の他の作品 / 06 関連レビュー / 右レールが担う。
 * 公開日の前後は読者にとって意味のある順序ではないため、残す理由も薄い。 */
.gm-legacy-product nav.post-navigation {
  display: none;
}

/* 本文冒頭のタグ一覧
 * 右レールの「タグから探す」と完全に重複している。ただしレールは
 * PC（1024px以上）だけの表示なので、SPで消すとページからタグへの内部リンクが
 * 1本も無くなる。インデックスはモバイル版が基準になるため、
 * PCでのみ隠して SP では残す。 */
@media (min-width: 1024px) {
  .gm-legacy-product ul.u-flex-wrap.u-gap-1 {
    display: none;
  }
}

/* ============================================================
 * カテゴリー / タグ アーカイブ
 * Figma 86:1573（カテゴリー）/ 86:1734（タグ）
 * 土台（gm-pagehead / gm-sortbar / gm-grid / gm-pager）は
 * 女優一覧ページで作ったものをそのまま使う。
 * ここは差分だけ。
 * ============================================================ */

/* ジャンル解説（E-E-A-T）
 * 一覧だけのページは「実質的な内容がない」と判断されやすい。
 * この区画が検索評価を左右するので、読み飛ばされない見え方にする。
 * 未入力なら noindex が付く（inc/archive.php）。 */
.gm-termdesc {
  margin-top: 16px;
}

.gm-termdesc__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gm-ink);
  margin: 0 0 10px;
}

.gm-termdesc__body {
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.9;
}

.gm-termdesc__body > :first-child { margin-top: 0; }
.gm-termdesc__body > :last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .gm-termdesc { margin-top: 20px; }
  .gm-termdesc__title { font-size: 17px; }
  .gm-termdesc__body { padding: 22px 28px; font-size: 15px; }
}

/* 解説文が未入力のときの編集者向けメモ。
 * noindex になっていることに気づけないのがいちばん困るので出す。
 * current_user_can( 'manage_categories' ) のときだけ描画される。 */
.gm-adminnote {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--gm-ad-line);
  border-radius: var(--gm-radius-btn);
  background: var(--gm-ad-bg);
  color: var(--gm-ad-ink);
  font-size: 12px;
  line-height: 1.7;
}

.gm-adminnote code { font-size: 11px; }
.gm-adminnote a { color: inherit; }

/* 並び替えバー */
.gm-sortbar-wrap { margin-top: 18px; }

/* 一覧の途中の広告。カード列の切れ目に置くので上下に余白を取る */
.gm-archive-ad { margin: 24px 0; }

@media (min-width: 1024px) {
  .gm-archive-ad { margin: 32px 0; }
}

.gm-empty {
  margin: 32px 0;
  padding: 28px 20px;
  text-align: center;
  color: var(--gm-sub);
  font-size: 14px;
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card);
}

/* 関連リンクの見出しは連番ではなく「関連」というラベルなので、
 * 数字用の等幅指定が効くと窮屈になる。ここだけ横幅を許す。 */
.gm-heading__num { white-space: nowrap; }

/* ============================================================
 * 人気ランキング（page-ranking.php / Figma 86:1416）
 * 新着レビュー一覧（page-reviews.php / Figma 86:2523）
 * ============================================================ */

/* ---- ランキングの行 ---- */

.gm-ranklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gm-ranklist__ad { margin: 12px 0; }

.gm-rankrow__link {
  display: grid;
  grid-template-columns: 44px 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  text-decoration: none;
  color: inherit;
}

.gm-rankrow__link:hover { border-color: var(--gm-muted); }

.gm-rankrow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gm-surface);
  color: var(--gm-sub);
  font-size: 16px;
  font-weight: 700;
}

/* 上位3件だけ色を変える。全部色を付けると順位の差が見えなくなる */
.gm-rankrow__num--top {
  background: var(--gm-coral-bg);
  color: var(--gm-coral-ink);
}

.gm-rankrow__thumb {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.gm-rankrow__thumb img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gm-surface);
  display: block;
}

.gm-rankrow__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.gm-rankrow__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gm-ink);
  line-height: 1.5;
}

.gm-rankrow__meta { font-size: 12px; color: var(--gm-sub); }

/* CTAはPCだけ。SPは行全体がリンクなので文字を出すと窮屈になる */
.gm-rankrow__cta { display: none; }

@media (min-width: 1024px) {
  .gm-rankrow__link {
    grid-template-columns: 44px 80px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 18px 24px;
  }
  .gm-rankrow__thumb,
  .gm-rankrow__thumb img { width: 80px; height: 80px; }
  .gm-rankrow__name { font-size: 18px; }
  .gm-rankrow__meta { font-size: 13px; }
  .gm-rankrow__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--gm-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gm-ink);
    white-space: nowrap;
  }
  .gm-rankrow__link:hover .gm-rankrow__cta { border-color: var(--gm-ink); }
}

/* ---- 新着レビュー一覧の2カラム ---- */

/* Figma 86:2547 メイン1140 + 86:2638 サイドバー420 = 1600 */
@media (min-width: 1024px) {
  .gm-2col--reviews {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
  }
  .gm-2col--reviews .gm-2col__side { top: 63px; padding-top: 48px; }
}

/* サイドバーのランキングTOP5 */
.gm-siderank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.gm-siderank a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gm-line);
  text-decoration: none;
  color: inherit;
}

.gm-siderank li:last-child a { border-bottom: none; }

.gm-siderank__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gm-surface);
  color: var(--gm-sub);
  font-size: 12px;
  font-weight: 700;
}

.gm-siderank li:nth-child(-n+3) .gm-siderank__num {
  background: var(--gm-coral-bg);
  color: var(--gm-coral-ink);
}

.gm-siderank__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-ink);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- ランキングの作品行 ----
 * 女優は円形80px、作品はパッケージ画像なので横長の枠にする。
 * 比率がまちまちなので固定枠＋contain で全体を見せる（カードと同じ扱い）。 */

.gm-rankrow--work .gm-rankrow__link {
  grid-template-columns: 44px 100px minmax(0, 1fr);
}

.gm-rankrow--work .gm-rankrow__thumb {
  width: 100px;
  height: 70px;
}

.gm-rankrow--work .gm-rankrow__thumb img {
  width: 100%;
  height: 100%;
  border-radius: var(--gm-radius-btn);
  object-fit: contain;
  background: var(--gm-surface);
}

/* 作品タイトルは長い。2行で省略する */
.gm-rankrow--work .gm-rankrow__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .gm-rankrow--work .gm-rankrow__link {
    grid-template-columns: 44px 140px minmax(0, 1fr) auto;
  }
  .gm-rankrow--work .gm-rankrow__thumb {
    width: 140px;
    height: 96px;
  }
  .gm-rankrow--work .gm-rankrow__name { font-size: 16px; }
}

/* ---- 横スクロールのカード列（人気記事ランキング） ----
 * popular-posts-ranking.php 用。旧テーマは u-flex + u-overflow-x-auto で
 * 組まれていて、スクロールバーの見た目もカードの幅も未調整だった。 */

.gm-hscroll {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  /* スクロールが1枚ずつ止まる。指で弾いたときに中途半端な位置で止まらない */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.gm-hscroll__item {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

.gm-hscroll__item .gm-card { height: 100%; }

/* 順位バッジ。サムネの左上に重ねる */
.gm-hscroll .gm-card__thumb { position: relative; }

.gm-hscroll__rank {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--gm-ink);
  font-size: 12px;
  font-weight: 700;
}

.gm-hscroll__item:nth-child(-n+3) .gm-hscroll__rank {
  background: var(--gm-coral);
  color: var(--gm-white);
}

@media (min-width: 1024px) {
  .gm-hscroll { gap: 20px; }
  .gm-hscroll__item { flex-basis: 240px; }
}

/* ============================================================
 * 汎用固定ページ（page.php）
 * Figma node 178:522（PC 1728）/ 182:522（SP 440）
 *
 * about / policy / disclaimer / ad-policy / privacy / contact の6本。
 * 内容幅は 720px 単一（SP 400px）。サイドバーも広告も置かないので、
 * 1060px の器にしても 340px が余るだけになる。
 * 720px は本文17pxで1行42字前後。法務文書を読み通せる幅。
 * ============================================================ */

/* 関連リンク（Figma 181:522「運営情報」）は出力しない。
 * 同じ6本がフッターの「規約」列にも並んでいて、直上で二重になるため。
 * markup と CSS は git 履歴（ae3de4b）に残してある。 */

/* 本文の下端。関連リンクを外したぶん、フッターとの間をここで取る */
.gm-page {
  background: var(--gm-white);
  padding-bottom: 48px;
}

/* 内容幅720の器。gm-container（最大1600）とは別に持つ。
 * PCのガター64を足した 848px を上限にして中央寄せする。 */
.gm-page-container {
  max-width: calc(720px + var(--gm-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}

/* ---- 01 ページヘッダー（node 178:527） ---- */

.gm-page-head {
  background: var(--gm-white);
  border-bottom: 1px solid var(--gm-line);
  padding: 32px 0 24px;
}

.gm-page-head__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gm-ink);
  margin: 0 0 14px;
  word-break: break-word;
}

/* 最終更新日は h1 直下。読む前に「いつ時点の内容か」が分かるようにする */
.gm-page-head__dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.65;
}

.gm-page-head__updated { font-weight: 500; color: var(--gm-ink); }
.gm-page-head__established { color: var(--gm-muted); }

.gm-page-head__sep {
  width: 1px;
  height: 14px;
  background: var(--gm-line);
}

.gm-page-head__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--gm-sub);
  word-break: break-word;
}

/* ---- 02 もくじ（node 178:535） ---- */

/* 追従バーは使わない。viewport の縦を常時削るので、
 * 短いページの多いこの6本では損になる。静的なら本文の一部として
 * マークアップでき、「何が書いてあるか」の一覧自体が信頼の表示になる。 */
.gm-page-toc-wrap {
  background: var(--gm-white);
  padding-top: 28px;
}

.gm-page-toc {
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card);
  padding: 20px;
}

.gm-page-toc__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--gm-ink);
}

.gm-page-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-page-toc__item a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gm-ink);
  text-decoration: none;
}

.gm-page-toc__item a:hover .gm-page-toc__text { text-decoration: underline; }

.gm-page-toc__mark {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--gm-coral);
  line-height: 1.65;
}

.gm-page-toc__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

/* ---- 03 本文（node 179:522） ---- */

.gm-page-body {
  background: var(--gm-white);
  padding: 8px 0 0;
}

/* もくじが出ているときは、本文の最初の見出しとの間を空ける。
 * 本文の先頭要素は margin-top を殺してあるので（本文だけのページで
 * 頭に余白が余るのを避けるため）、もくじがある場合だけここで足す。 */
.gm-page-toc-wrap + .gm-page-body { padding-top: 32px; }

/* gm-prose（15px）を、このページ用に17px・行送り1.9へ上げる。
 * 法務文書は一段落が長くなるので、行間を詰めると読み通せない。
 * 連番つきの見出しは使わない。01 / 02 は「もくじに載るセクションの入口」の
 * 記号として作品レビュー側で導入したもので、法務ページでは意味を持たない。 */
.gm-prose--page {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gm-ink);
  word-break: break-word;
}

.gm-prose--page > :first-child { margin-top: 0; }
.gm-prose--page > :last-child { margin-bottom: 0; }

.gm-prose--page p { margin: 0 0 24px; }

.gm-prose--page h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--gm-ink);
  margin: 40px 0 14px;
  /* アンカーで飛んだとき見出しが上端に貼り付かないようにする */
  scroll-margin-top: 24px;
}

.gm-prose--page h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--gm-ink);
  margin: 28px 0 10px;
}

.gm-prose--page a {
  color: var(--gm-coral);
  text-decoration: underline;
}

.gm-prose--page ul,
.gm-prose--page ol {
  margin: 0 0 24px;
  padding-left: 18px;
}

.gm-prose--page ul { list-style: none; padding-left: 0; }

.gm-prose--page ul > li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
}

.gm-prose--page ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-coral);
}

.gm-prose--page ol > li { margin-bottom: 12px; }

/* 表（node 179:536）。2列＝項目200 + 内容520。
 * 罫線を引かずに行の下線だけにして、書類らしさより読みやすさを取る。
 *
 * セレクタの頭に .gm-page を付けて詳細度を上げている。
 * WordPress のブロックスタイル（wp-includes/blocks/table/style.min.css）が
 * components.css より後に読み込まれ、.wp-block-table td に
 * border: 1px solid / thead に border-bottom: 3px を当ててくるため、
 * 同じ詳細度だと後勝ちで全マス罫線の既定表に戻ってしまう。 */

.gm-page .gm-prose--page .wp-block-table { margin: 0 0 24px; }
.gm-page .gm-prose--page .wp-block-table table { margin: 0; }

.gm-page .gm-prose--page table {
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 15px;
  background: var(--gm-white);
}

.gm-page .gm-prose--page table th,
.gm-page .gm-prose--page table td {
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--gm-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
  color: var(--gm-sub);
}

/* 1列目を項目名として扱う。ブロックエディタの表は見出し行以外すべて td なので、
 * th ではなく「行の1つ目のセル」で指定する。 */
.gm-page .gm-prose--page table tr > *:first-child {
  width: 200px;
  font-weight: 500;
  color: var(--gm-ink);
  line-height: 1.65;
}

.gm-page .gm-prose--page table thead { border-bottom: 0; }

.gm-page .gm-prose--page table thead th,
.gm-page .gm-prose--page table thead td {
  background: var(--gm-surface);
  color: var(--gm-ink);
  font-weight: 500;
}

/* 最終行だけ下線を消す。tbody に限定しているのは、tr:last-child が
 * thead の中の行にも当たり、見出し行の下線まで消えてしまうため。 */
.gm-page .gm-prose--page table tbody tr:last-child th,
.gm-page .gm-prose--page table tbody tr:last-child td { border-bottom: none; }

/* SPでは2列が入らない（440px - 左右40 = 400px に 200+520 は無理）ので縦積みにする */
@media (max-width: 1023px) {
  .gm-page .gm-prose--page table,
  .gm-page .gm-prose--page table thead,
  .gm-page .gm-prose--page table tbody,
  .gm-page .gm-prose--page table tr { display: block; }

  .gm-page .gm-prose--page table th,
  .gm-page .gm-prose--page table td { display: block; width: auto; }

  .gm-page .gm-prose--page table tr > *:first-child {
    width: auto;
    padding-bottom: 0;
    border-bottom: none;
  }

  .gm-page .gm-prose--page table tr > * + * { padding-top: 4px; }
}

/* 注記ブロック（node 179:573）。
 * ステマ規制の明示など、本文から少し浮かせたい段落に使う。
 * エディタ側でクラスを付けられない場合に備えて blockquote も同じ見た目にする。 */
.gm-prose--page .gm-note,
.gm-prose--page blockquote {
  margin: 8px 0 24px;
  padding: 20px 24px;
  background: var(--gm-surface);
  border-radius: var(--gm-radius-card);
  border-left: none;
}

.gm-prose--page .gm-note > :first-child,
.gm-prose--page blockquote > :first-child { margin-top: 0; }
.gm-prose--page .gm-note > :last-child,
.gm-prose--page blockquote > :last-child { margin-bottom: 0; }

.gm-prose--page .gm-note strong,
.gm-prose--page blockquote strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--gm-ink);
}

.gm-prose--page .gm-note p,
.gm-prose--page blockquote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gm-sub);
}

/* ---- 05 改定履歴（node 180:563） ---- */

.gm-page-revisions-wrap {
  background: var(--gm-white);
  padding-top: 36px;
}

.gm-page-revisions {
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
  padding: 20px;
}

.gm-page-revisions__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--gm-ink);
}

.gm-page-revisions__list { margin: 0; }

.gm-page-revisions__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gm-line);
}

.gm-page-revisions__row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.gm-page-revisions__row dt {
  flex: 0 0 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--gm-muted);
}

.gm-page-revisions__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gm-ink);
}

/* ---- PC ---- */

@media (min-width: 1024px) {
  .gm-page { padding-bottom: 72px; }

  .gm-page-head { padding: 56px 0 32px; }
  .gm-page-head__title { font-size: 32px; }
  .gm-page-head__lead { font-size: 17px; }

  .gm-page-toc-wrap { padding-top: 40px; }
  .gm-page-toc { padding: 24px 28px; }
  .gm-page-toc-wrap + .gm-page-body { padding-top: 56px; }

  .gm-prose--page { font-size: 17px; }
  .gm-prose--page h2 { font-size: 24px; margin: 56px 0 18px; scroll-margin-top: 32px; }
  .gm-prose--page h3 { font-size: 19px; margin: 32px 0 10px; }

  .gm-page-revisions-wrap { padding-top: 48px; }
  .gm-page-revisions { padding: 24px 28px; }

  /* PCでは日付と内容を横並びに。SPでは縦積み（440pxで100+520は入らない） */
  .gm-page-revisions__row { flex-direction: row; gap: 20px; align-items: flex-start; }

}

/* ---- 女優ページ: おすすめ作品ランキング（SEOREPORT-8 / 設計03） ---- */
/* 順位バッジ・サムネ・本文を横一列に並べる。人気ランキング（.gm-rankrow）と
 * 同じ組み方・同じ寸法に揃えてあるので、サイト内で見え方が揃う。 */
.gm-ranklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.gm-ranklist__item {
  background: var(--gm-white);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-card);
}

.gm-ranklist__body {
  display: grid;
  grid-template-columns: 44px 100px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}

.gm-ranklist__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gm-coral-bg);
  color: var(--gm-coral-ink);
  font-size: 16px;
  font-weight: 700;
}

.gm-ranklist__thumb { width: 100px; }
.gm-ranklist__thumb img {
  width: 100%;
  height: 70px;
  border-radius: var(--gm-radius-btn);
  object-fit: contain;
  background: var(--gm-surface);
  display: block;
}

.gm-ranklist__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gm-ranklist__title { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--gm-ink); }
.gm-ranklist__note { font-size: 13px; line-height: 1.9; color: var(--gm-sub); }

@media (min-width: 1024px) {
  .gm-ranklist__body { grid-template-columns: 44px 140px minmax(0, 1fr); padding: 18px; }
  .gm-ranklist__thumb { width: 140px; }
  .gm-ranklist__thumb img { height: 98px; }
}

/* ---- 女優ページ: シチュエーション別（SEOREPORT-8 / 設計04） ---- */
.gm-situation { margin-top: 28px; }
.gm-situation:first-of-type { margin-top: 8px; }
.gm-situation__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--gm-ink); }
.gm-situation__note { font-size: 14px; line-height: 1.8; margin: 0 0 12px; color: var(--gm-sub); }

@media (max-width: 767px) {
  .gm-ranklist__body { grid-template-columns: 36px 84px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .gm-ranklist__num { width: 36px; height: 36px; font-size: 14px; }
  .gm-ranklist__thumb { width: 84px; }
  .gm-ranklist__thumb img { height: 58px; }
  .gm-situation__title { font-size: 16px; }
}