:root {
  --em-black: #050505;
  --em-panel: #111;
  --em-red: #ff3158;
  --em-yellow: #ffd84d;
  --em-white: #fff;
}

html:has(.em-movie-shell),
body:has(.em-movie-shell) {
  overflow: hidden !important;
  background: var(--em-black) !important;
}

.em-movie-shell,
.em-movie-shell * { box-sizing: border-box; }

.em-movie-shell {
  position: fixed;
  inset: 0;
  z-index: 999990;
  overflow: hidden;
  background: #000;
  color: var(--em-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}

body.admin-bar .em-movie-shell { top: 32px; }

.em-movie-topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(100%, 520px);
  height: 60px;
  padding: 12px 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
  pointer-events: none;
}

.em-movie-brand {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.04em;
  pointer-events: auto;
}

.em-movie-brand b { color: var(--em-red); margin-left: 4px; font-size: 13px; letter-spacing: .02em; }
.em-movie-topbar-note { margin-left: auto; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; }

/* フィードが画面を覆うため、固定ページへの入口をここに置く。 */
.em-movie-menu-toggle {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

/* 検索。虫めがねはメニューより少し大きくする。
   「⌕」は字形が細く、30pxのままだと何のボタンか分かりにくかった。 */
.em-movie-search-toggle {
  margin-left: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.em-movie-search-toggle[aria-expanded="true"] { background: var(--em-red, #e2264d); }

/* 開いたときはトップバーの下に帯で出す。入力中は動画に触れないので、
   幅いっぱいを使って打ちやすさを優先する。 */
.em-movie-search {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 6px;
  width: calc(100% - 36px);
  max-width: 480px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(18,18,20,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  pointer-events: auto;
}
.em-movie-search[hidden] { display: none; }
.em-movie-search input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 16px; /* 16px未満だとiOSで勝手に拡大される。 */
}
.em-movie-search input::placeholder { color: rgba(255,255,255,.45); }
.em-movie-search button {
  flex: 0 0 auto;
  width: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--em-red, #e2264d);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

/* 検索したことを伝える一行。カードを潰さず、1枚目の上に重ねる。
   検索窓が開いているときは、その下へ押し下げる（is-below）。
   同じ高さに置くと検索窓の裏に隠れて、何も出ていないように見えてしまう。 */
.em-movie-searchnote {
  position: absolute;
  z-index: 18;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 36px);
  max-width: 480px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: auto;
}
.em-movie-searchnote.is-below { top: 114px; }
.em-movie-searchnote b { font-weight: 800; }
.em-movie-searchnote a {
  margin-left: auto;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.em-movie-menu {
  position: absolute;
  top: 52px;
  right: 18px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(18,18,20,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  pointer-events: auto;
}
.em-movie-menu[hidden] { display: none; }
.em-movie-menu a {
  padding: 10px 12px;
  border-radius: 6px;
  color: rgba(255,255,255,.88) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.em-movie-menu a:hover { background: rgba(255,255,255,.1); color: #fff !important; }

.em-movie-feed {
  position: absolute;
  inset: 0;
  width: min(100%, 520px);
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  background: #090909;
}
.em-movie-feed::-webkit-scrollbar { display: none; }

/* 次カードのちら見せは撤回した（2026-10-04）。
   覗くのは次カードの背景＝ぼかした大判ポスターなので、22pxだけ見えても
   ただのにじんだ色の帯にしかならず、「次がある」と読めなかった。
   高さを戻し、代わりにヒント側を強くする。 */
.em-movie-card,
.em-movie-empty {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

/* ---------------------------------------------------------------
   スワイプのヒント（まだ一度もスワイプしていない人にだけ出す）

   初版は13pxの地味な帯で、本人に「目立ちにくい」と言われた。
   縦送りできると知らない人に気づかせるのが唯一の仕事なので、
   遠慮せず動かす。スワイプした時点で役目が終わるので消える。
   --------------------------------------------------------------- */
.em-swipe-hint {
  position: absolute;
  left: 50%;
  /* 下に出す。上に置くと「上へスライドするのか」と読めてしまい、
     矢印の向きと操作が噛み合わなかった（2026-10-05のフィードバック）。
     タイトル欄が565〜788pxを占めていて余白が無いため、文字には重なる。
     数秒で消える案内なので、位置の正しさを優先してこれを許容する。
     送りボタンの真上に来るので、押せる場所も同時に示せる。 */
  bottom: 170px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 10, 10, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.04);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  /* 浮き沈みで視線を取る。translateXは中央寄せの分なので常に維持する。 */
  animation: em-hint-in .4s ease-out both, em-hint-float 1.9s ease-in-out .4s infinite;
}
.em-swipe-hint.is-gone {
  opacity: 0;
  transition: opacity .3s ease-out;
}

/* 矢印は本体より速く動かす。実際の指の動きに近いほうが伝わる。 */
.em-swipe-hint-arrow {
  display: inline-block;
  font-size: 19px;
  line-height: 1;
  color: var(--em-red);
  animation: em-hint-arrow 1.25s ease-in-out infinite;
}

@keyframes em-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes em-hint-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}
@keyframes em-hint-arrow {
  0%, 100% { transform: translateY(3px); opacity: .65; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .em-swipe-hint {
    animation: none;
    transform: translateX(-50%);
  }
  .em-swipe-hint-arrow { animation: none; }
}

.em-movie-backdrop {
  position: absolute;
  inset: -24px;
  z-index: -3;
  background: var(--em-poster) center/cover no-repeat, #111;
  filter: blur(18px);
  transform: scale(1.12);
  opacity: .52;
}

.em-movie-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  background: var(--em-poster) center/contain no-repeat;
}

/* 再生が始まったらサムネイルを消す。
   プレイヤーより一回り大きく描画されるため、残すと上下からはみ出して見える。 */
.em-movie-card.is-playing .em-movie-media {
  background-image: none;
}

/* 既定：16:9で中央に配置する（YouTube等、iframe内で中身が伸縮するもの） */
.em-movie-media iframe,
.em-movie-media video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  border: 0;
  background: #000;
}

.em-movie-media video { object-fit: contain; }

/* DMMのlitevideoは中身が size= の実寸で組まれており、幅を狭めると
   max-width:100% で幅だけ縮む一方、高さは固定のまま残る。加えて
   body のマージンがリセットされていないため、iframeをいくら詰めても
   縦に余りが出てスクロールバーが消せない。

   そこで「縮めない」方針にする。iframeには本来の実寸を与え、
   表示上の縮小は transform に任せる。中身が一切リフローしないので、
   どの画面幅でも比率が保たれ、余白もスクロールバーも発生しない。
   倍率(--em-scale)は再生時にJSが実測して設定する。

   +16px は、DMM側がbodyのマージン(既定8px)をリセットしていないぶんの逃がし。
   これがないと実寸ぴったりに合わせてもスクロールバーが出る。

   なお中央寄せに place-items は使えない。iframeの実寸(736px等)はホスト幅より
   大きく、グリッドはこの状態の要素を中央ではなく左端に置くため右へずれる。
   実測でも left が 176px になっていた。絶対配置＋translate(-50%,-50%)で
   明示的に中央へ固定する。 */
.em-movie-card.has-fixed-embed .em-movie-embed-host iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--em-embed-w) * 1px + 16px);
  height: calc(var(--em-embed-h) * 1px + 16px);
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  transform: translate(-50%, -50%) scale(var(--em-scale, 1));
  transform-origin: center center;
}

.em-movie-embed-host {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* 再生ボタンはカード直下に置き、本文ブロックより上の層に出す。
   メディア層(z-index:-1)の中にあると、タイトルが長い作品で
   本文(z-index:5)に覆われて押せなくなる。 */
.em-movie-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(12px);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.em-movie-play span { color: var(--em-red); }
.em-movie-card.is-playing .em-movie-play { display: none; }

.em-movie-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 28%),
    linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.2) 43%, transparent 64%);
}

.em-movie-copy {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 78px;
  bottom: max(24px, env(safe-area-inset-bottom));
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}

.em-movie-service {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #111;
  background: var(--em-yellow);
  font-size: 11px;
  font-weight: 900;
}

/* FANZAの作品名は100文字を超えるものが珍しくない。そのまま流すと
   本文ブロックが画面中央まで伸び、再生ボタンや動画を覆ってしまう。
   既定では打ち切り、タップで全文に切り替える。

   行数は2026-10-08に3行から2行へ。送りボタンを下部中央の帯にしたぶん
   本文を52px持ち上げたところ、3行だと本文の上端が551pxではなく525pxまで
   上がり、プレイヤーの下端(375x812で532px)に19px食い込んでいた。
   プレイヤーに文字を重ねるのは見栄えが悪いうえ、配信元の素材を
   隠す形になるので避ける。 */
.em-movie-copy h2 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(20px, 5vw, 27px) !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.em-movie-card.is-expanded .em-movie-copy h2 {
  display: block;
  overflow: visible;
}

/* 全文表示でも、画面の半分を超えたら中でスクロールさせる。
   極端に長いタイトルで上まで埋まるのを防ぐ。 */
.em-movie-card.is-expanded .em-movie-copy {
  max-height: 62%;
  overflow-y: auto;
  scrollbar-width: none;
}
.em-movie-card.is-expanded .em-movie-copy::-webkit-scrollbar { display: none; }

/* 省略が起きているカードだけJSがクラスを付ける。 */
.em-movie-more {
  display: none;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.em-movie-card.has-overflow .em-movie-more { display: block; }
.em-movie-more::after { content: "もっと見る ▾"; }
.em-movie-card.is-expanded .em-movie-more::after { content: "閉じる ▴"; }

/* 出演者が多い作品は「A・B・C・…」と延々に連なる。タイトルと同じく
   既定で打ち切らないと、ここだけで本文がプレイヤーまで伸びる。 */
.em-movie-actress {
  margin: 0 0 7px !important;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.em-movie-card.is-expanded .em-movie-actress { display: block; overflow: visible; }

/* 女優ページへのリンク。下線を引くと名前が読みにくくなるので、
   触れることだけが分かればよい。 */
.em-movie-actress a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.em-movie-actress a:hover,
.em-movie-actress a:focus-visible { border-bottom-color: #fff; }
.em-movie-description { margin: 0 0 14px !important; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-movie-card.is-expanded .em-movie-description { display: block; overflow: visible; }

/* ---------------------------------------------------------------
   作品の属性（シリーズ・メーカー・収録時間・ジャンルなど）

   既定では畳んでおき、「もっと見る」で開く。常時出すと画面を
   占有して動画が見えなくなるため。HTMLには常に書き出している。
   --------------------------------------------------------------- */
.em-movie-facts {
  display: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  line-height: 1.7;
  color: #c9c9c9;
}
.em-movie-card.is-expanded .em-movie-facts { display: grid; grid-template-columns: 5em 1fr; gap: 2px 10px; }
.em-movie-facts dt { color: #8a8a8a; }
.em-movie-facts dd { margin: 0; color: #ddd; word-break: break-word; }

/* 属性の最終行がCTAボタンの下に潜って読めなくなるため、下に余白を持たせる。
   375x812で実測したところ、ジャンルの行が「FANZAで作品を見る」に隠れていた。 */
.em-movie-card.is-expanded .em-movie-facts { margin-bottom: 8px; }

/* 閉じ方の案内。ボタンではなく、情報エリアのどこを押しても閉じる。
   閉じるボタンを探させる作りをやめたため、場所だけ控えめに示す。 */
.em-movie-close-hint {
  display: none;
  margin: 8px 0 0;
  color: #777;
  font-size: 11px;
  text-align: center;
}
.em-movie-card.is-expanded .em-movie-close-hint { display: block; }
.em-movie-card.is-expanded .em-movie-copy { cursor: pointer; }

/* ---------------------------------------------------------------
   コメントパネル

   右レールの吹き出しから開く、下から出るシート。
   作品情報と同じ領域に入れると縦画面では必ず溢れるため分けている。
   --------------------------------------------------------------- */
.em-comments {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 0 0;
  background: #121212;
  box-shadow: 0 -16px 50px rgba(0,0,0,.6);
  transform: translateY(100%);
  transition: transform .26s ease-out;
}
.em-comments.is-open { transform: translateY(0); }
.em-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.em-comments-close {
  border: 0;
  background: none;
  color: #999;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.em-comments-body { flex: 1; overflow-y: auto; padding: 12px 16px 16px; }

.em-comment { margin: 0 0 14px; }
.em-comment b { display: block; margin-bottom: 3px; color: #8a8a8a; font-size: 11px; font-weight: 700; }
.em-comment p { margin: 0; color: #ddd; font-size: 13px; line-height: 1.75; word-break: break-word; white-space: pre-wrap; }
.em-comment time { display: block; margin-top: 3px; color: #666; font-size: 10px; }

/* 運営のひとこと。利用者の投稿と見分けられるようにする。
   運営が書いたものを一般利用者の感想に見せるのは景品表示法に触れるため、
   必ず「運営」と分かる表示にする。 */
.em-comment-official {
  padding: 12px 14px;
  border: 1px solid rgba(255,77,109,.35);
  border-radius: 10px;
  background: rgba(255,77,109,.08);
}
.em-comment-official b { color: var(--em-red); font-size: 12px; }
.em-comment-official b span {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--em-red);
  color: #fff;
  font-size: 10px;
  vertical-align: middle;
}
.em-comments-empty { color: #777; font-size: 13px; text-align: center; padding: 18px 0; }

/* 投稿フォーム。縦スワイプの途中で開くので、1行から始めて場所を取らない。 */
.em-comments-form {
  flex: none;
  /* ホームバーのある端末で注意書きが隠れないよう、下は安全領域を足す。 */
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.1);
  background: #121212;
}
.em-comments-form input[name="name"] {
  width: 140px;
  margin-bottom: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 12px;
}
.em-comments-row { display: flex; gap: 8px; align-items: flex-end; }
.em-comments-row textarea {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  box-sizing: border-box;
}
.em-comments-row textarea::placeholder,
.em-comments-form input[name="name"]::placeholder { color: #777; }
.em-comments-row button {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--em-red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.em-comments-row button:disabled { opacity: .5; cursor: default; }
.em-comments-note { margin: 8px 0 0; color: #ff7a93; font-size: 12px; }
.em-comments-note.is-ok { color: #6fd08c; }
.em-comments-rule { margin: 8px 0 0; color: #666; font-size: 10px; line-height: 1.6; }
.em-comments-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.em-movie-cta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 340px);
  min-height: 49px;
  padding: 0 16px;
  border-radius: 10px;
  color: #fff !important;
  background: var(--em-red);
  box-shadow: 0 10px 35px rgba(255,49,88,.28);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 900;
}

.em-movie-actions {
  position: absolute;
  right: 14px;
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 5;
}
.em-movie-actions button {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 52px;
  border: 0;
  color: #fff;
  background: transparent;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  cursor: pointer;
}
.em-movie-actions button > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.38); font-size: 22px; backdrop-filter: blur(8px); }
.em-movie-actions small { font-size: 10px; font-weight: 800; }

.em-movie-desktop-nav {
  position: fixed;
  left: calc(50% + 282px);
  top: 50%;
  z-index: 25;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}
.em-movie-desktop-nav button {
  width: 45px;
  height: 45px;
  border: 1px solid #333;
  border-radius: 50%;
  color: #fff;
  background: #151515;
  font-size: 20px;
  cursor: pointer;
}
/* 「次の動画」の文字はスマホの帯でだけ出す。横に並ぶ余裕のある
   PCでは矢印2つのほうが上下の対応が分かりやすい。 */
.em-movie-desktop-nav button em { display: none; }

.em-movie-empty { display: grid; place-items: center; padding: 30px; text-align: center; }
.em-movie-empty strong { font-size: 24px; }

.em-agegate {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 22px;
  color: #fff;
  /* 背後は見せない。年齢確認の目的そのものが「確認前に成人向けの中身を
     見せないこと」なので、透かして見せるのは本末転倒。
     2026-10-04に一度薄くしたが、結局ほぼ見えず、見えたら見えたで
     筋が悪い。ここは隠したまま、パネル側の文言で中身を伝える。 */
  background: rgba(0,0,0,.93);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}
.em-agegate[hidden] { display: none; }
.em-agegate-panel { width: min(100%, 410px); padding: 34px 28px; border: 1px solid #2b2b2b; border-radius: 18px; background: #111; text-align: center; box-shadow: 0 30px 90px #000; }
.em-agegate-logo { margin-bottom: 24px; font-size: 21px; font-weight: 900; }
.em-agegate-logo b { color: var(--em-red); font-size: 14px; }
.em-agegate h2 { margin: 0 0 10px; color: #fff; font-size: 27px; }
.em-agegate p { margin: 0 0 10px; color: #aaa; font-size: 13px; }
/* 壁の向こうに何があるかを文字で伝える一行。背後を見せない代わりの役目。 */
.em-agegate-lead { margin: 0 0 24px !important; color: #ddd !important; font-size: 14px !important; }
.em-agegate-lead b { color: var(--em-red); }
.em-agegate button { width: 100%; min-height: 52px; border: 0; border-radius: 10px; color: #fff; background: var(--em-red); font-size: 15px; font-weight: 900; cursor: pointer; }
.em-agegate a { display: inline-block; margin-top: 18px; color: #888 !important; font-size: 12px; }

/* スマホでも送りボタンを残す（2026-10-05）。
   それまでは max-width:900px で丸ごと display:none にしていたため、
   スマホには送る手段がジェスチャーしかなかった。縦スワイプを知らない人は
   そこで詰まる。Tinderが分かりやすいのは、チュートリアルよりも
   「ボタンでも送れる」ことが大きい。ヒントは消えるが、ボタンは残る。

   2026-10-08に置き場所を変更。右レールにコメントを足したところ、
   右下に ↓ / 💬 / ↗ が縦に3つ並んで重なり、押し分けられなくなった。
   送りは「この作品に対する操作」ではなく「フィードの操作」で性質が違うので、
   右レールから外して下部中央の帯に独立させる。
   丸アイコンではなく文字入りの横長ボタンにして、最も押される前提の
   ボタンとして一番目立つ扱いにする。 */
@media (max-width: 900px) {
  .em-movie-desktop-nav {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    gap: 0;
  }
  .em-movie-desktop-nav [data-em-prev] { display: none; }
  .em-movie-desktop-nav [data-em-next] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 42px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(14,14,14,.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(0,0,0,.6);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }
  .em-movie-desktop-nav [data-em-next] span { font-size: 18px; }
  .em-movie-desktop-nav [data-em-next] em {
    display: inline;
    font-style: normal;
    letter-spacing: .02em;
  }
  .em-movie-desktop-nav [data-em-next]:active { background: rgba(48,48,48,.92); }

  /* 下部中央に帯が入ったぶん、作品情報と右レールを持ち上げる。
     375x812実測で帯は y=758〜800、作品情報の下端は748、右レールの下端は746。
     持ち上げる量は最小限にする。ここを増やすほど本文の上端が
     プレイヤーに近づくため。 */
  .em-movie-copy { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 40px); }
  .em-movie-actions { bottom: calc(max(32px, env(safe-area-inset-bottom)) + 32px); }
}

/* 画面の低い端末（iPhone SE/8など）では、プレイヤーをカードの中央に置くと
   下の作品情報と重なる。375x667で実測するとプレイヤー下端460px、
   作品情報の上端406pxで54px食い込む。下部の帯を入れる前から起きていた。

   2026-10-08に一度プレイヤー側を上へ逃がしたが、中央から外れた見た目が
   明らかにおかしかった。プレイヤーは動かさず、文字側を詰めて避ける。
   タイトルを1行にし、「もっと見る」は隠す（タイトルを押せば開くので
   なくても操作はできる）。この指定で上端473px、13px空く。 */
@media (max-width: 900px) and (max-height: 700px) {
  .em-movie-copy h2 {
    -webkit-line-clamp: 1;
    font-size: 19px !important;
  }
  .em-movie-more { display: none !important; }
  .em-movie-service { margin-bottom: 5px; }
  .em-movie-copy { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 40px); }
  .em-movie-actions { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 32px); }
  .em-movie-desktop-nav { bottom: max(10px, env(safe-area-inset-bottom)); }
  .em-movie-desktop-nav [data-em-next] { height: 38px; }
}

@media (max-width: 782px) {
  body.admin-bar .em-movie-shell { top: 46px; }
}

@media (min-width: 521px) {
  .em-movie-shell { background: radial-gradient(circle at 50% 40%, #202020, #050505 55%); }
  .em-movie-feed { box-shadow: 0 0 80px rgba(0,0,0,.8); }
}

/* ===== 作品一覧（/movie/ と /genre/<ジャンル>/） =====
   フィードと違い、こちらはリンクを並べるのが目的。
   検索エンジンに956件を辿らせる導線と、来訪者が自分で選べる入口。
   画像はCSS背景ではなく img にして loading="lazy" を効かせる。 */

.em-archive-page {
  margin: 0;
  background: #0d0d0f;
  color: #f2f2f4;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.em-archive-head {
  padding: 20px 16px 12px;
  max-width: 1100px;
  margin: 0 auto;
}

.em-archive-brand {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  letter-spacing: .02em;
}

.em-archive-brand span { color: #ff2e55; }

.em-archive-title {
  margin: 14px 0 4px;
  font-size: 22px;
  line-height: 1.3;
}

.em-archive-lead {
  margin: 0;
  color: #9a9aa4;
  font-size: 13px;
  line-height: 1.6;
}

.em-archive-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 4px;
  max-width: 1100px;
  margin: 0 auto;
}

.em-archive-genres a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #1b1b20;
  color: #d8d8de;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #27272e;
}

.em-archive-genres a span { color: #74747e; font-size: 11px; }
.em-archive-genres a:hover { background: #24242b; }
.em-archive-genres a.is-current { background: #ff2e55; color: #fff; border-color: #ff2e55; }
.em-archive-genres a.is-current span { color: rgba(255, 255, 255, .75); }

.em-archive-grid {
  list-style: none;
  margin: 18px auto 0;
  padding: 0 16px;
  max-width: 1100px;
  display: grid;
  gap: 18px 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.em-archive-link { display: block; text-decoration: none; color: inherit; }

.em-archive-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: #17171c;
}

.em-archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.em-archive-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.em-archive-link:hover .em-archive-name { color: #ff6b86; }

.em-archive-cast { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.em-archive-cast a { color: #8e8e99; text-decoration: none; margin-right: 7px; }
.em-archive-cast a:hover { color: #ff6b86; }

.em-archive-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 28px 16px 8px;
}

.em-archive-pager .page-numbers {
  min-width: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #1b1b20;
  color: #d8d8de;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}

.em-archive-pager .page-numbers.current { background: #ff2e55; color: #fff; }
.em-archive-pager .page-numbers.dots { background: none; }

.em-archive-empty { padding: 40px 16px; text-align: center; color: #9a9aa4; }

.em-archive-foot { padding: 22px 16px 40px; text-align: center; }

.em-archive-foot a {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 999px;
  background: #ff2e55;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 420px) {
  .em-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .em-archive-title { font-size: 19px; }
}

/* フィード上部から一覧への導線。クロール経路でもある。
   親の .em-movie-topbar は pointer-events:none で、子が個別に auto で
   復活させる作り。これを付け忘れると見えているのに押せない。 */
.em-movie-topbar-link {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}

.em-movie-topbar-link:hover { background: rgba(255, 255, 255, .24); }

/* ===== ジャンル索引 / 出演者索引（/genre/ と /actress/） =====
   個別URLしか無く根が404だったため、209ジャンルと818人の女優ページが
   どこからもリンクされていなかった。辿れないページは評価が付かない。
   女優は読み仮名で五十音に束ねる。818人を一列に並べても人は探せない。 */

.em-index-group {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 0;
}

.em-index-head {
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #27272e;
  font-size: 15px;
  color: #ff6b86;
}

.em-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px 10px;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.em-index-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #16161b;
  border: 1px solid #23232a;
  color: #d8d8de;
  font-size: 13px;
  text-decoration: none;
}

.em-index-list a:hover { background: #22222a; color: #fff; }
.em-index-list a span { color: #74747e; font-size: 11px; flex: none; }

@media (max-width: 420px) {
  .em-index-list { grid-template-columns: repeat(2, 1fr); gap: 6px 7px; }
  .em-index-list a { padding: 6px 8px; font-size: 12px; }
}

/* セール中のバッジ。配信形式ごとの割引率の最大値を出す。
   価格は動くので EMMF_Prices が毎日取り直している。 */
.em-movie-sale {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 4px;
  background: #ff2e55;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 気になる。右レールの一番上。押すと塗りつぶしに変わる。
   ログインは要らず、匿名IDに紐づいてサーバーに残る。 */
.em-movie-rail [data-em-fav].is-on,
[data-em-fav].is-on {
  color: #ff2e55;
}

[data-em-fav].is-on span {
  transform: scale(1.12);
}

[data-em-fav] span {
  transition: transform .15s ease;
}