/* ===== Tokens ===== */
.feed-entry { margin: 0 0 20px; color: var(--text-muted); font-size: .8rem; }
.feed-entry a:hover { color: var(--accent); }
:root {
  --bg: #080f1f;
  --bg-elev: #0e1729;
  --bg-card: #131d33;
  --border: #22304d;
  --border-strong: #3a4a70;
  --text: #eef2fb;
  --text-muted: #97a3bd;
  --accent: #b3a4ff;
  --accent-hover: #cfc6ff;
  --accent-soft: rgba(179, 164, 255, 0.13);
  --accent-warm: #d8c9a7;
  --accent-warm-soft: rgba(216, 201, 167, 0.12);
  --accent-blue: #a9d6ff;
  --accent-gold: #cbb98d;
  --positive: #8dbba4;
  --danger: #d97882;
  --white: #fff;
  --overlay: rgba(4, 8, 18, 0.95);
  --header: rgba(8, 15, 31, 0.88);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 18px 56px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* Seed-based discovery: full-width readable cards on small screens. */
.discovery { padding-top: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.discovery__eyebrow { color: var(--accent); font-size: .7rem; letter-spacing: .18em; margin: 0 0 10px; }
.discovery h2 { font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.4; margin: 0 0 12px; }
.discovery__lead { color: var(--text-muted); max-width: 650px; margin: 0 0 20px; }
.discovery__category { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font-size: .8rem; color: var(--text-muted); }
.discovery__category select { min-width: 0; max-width: 70%; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--bg-elev); }
.discovery__catalog-search { margin: 18px 0 22px; scroll-margin-top: 80px; }
.discovery__seeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.discovery__seed { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--bg-elev); cursor: pointer; min-width: 0; }
.discovery__seed:hover { border-color: var(--accent); }
.discovery__seed img { width: 40px; height: 56px; object-fit: contain; flex-shrink: 0; }
.discovery__seed span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; flex: 1; }
.discovery__seed small { color: var(--accent); width: 4em; flex-shrink: 0; }
.discovery__selected { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 20px 0; padding: 16px; border-left: 2px solid var(--accent); background: var(--bg-elev); }
.discovery__selected span { color: var(--text-muted); font-size: .8rem; }
.discovery__selected strong { flex: 1 1 220px; overflow-wrap: anywhere; }
.discovery__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.discovery__controls label { min-width: 0; font-size: .86rem; }
.discovery__controls select { display: block; width: 100%; margin-top: 8px; padding: 12px; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.discovery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.discovery__result { min-width: 0; }
.discovery__result .card__thumb { aspect-ratio: 1; }
.discovery__result .card__thumb img { object-fit: contain; }
.discovery__reason { font-size: .82rem; margin: 16px 0; overflow-wrap: anywhere; }
.discovery__reason dt { color: var(--accent); margin-top: 10px; }
.discovery__reason dd { margin: 4px 0 0; color: var(--text-muted); }
.discovery__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.discovery__note { font-size: .78rem; color: var(--text-muted); margin-top: 20px; }
.hide-images .discovery__seed img { display: none; }
@media (max-width: 600px) {
  .discovery__controls, .discovery__grid { grid-template-columns: 1fr; }
  .discovery__result { border-bottom: 1px solid var(--border); padding-bottom: 24px; }
  .discovery .search { flex-wrap: wrap; }
  .discovery .search__input { min-width: 0; width: 100%; }
  .discovery__result .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .discovery__result .card__thumb { aspect-ratio: auto; min-height: 148px; }
  .discovery__result .card__body { padding: 48px 12px 12px; }
  .discovery__result .card__label { font-size: .6rem; max-width: calc(100% - 8px); left: 4px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* body に overflow-x: hidden を付けると body がスクロールコンテナ扱いになり、ヘッダー／カテゴリ行の position: sticky が効かなくなる。横はみ出しは html 側で抑える */
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(900px 560px at 8% -8%, rgba(179, 164, 255, 0.075), transparent 68%),
    radial-gradient(760px 520px at 96% 14%, rgba(91, 60, 116, 0.07), transparent 70%),
    var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sp-only { display: none; }
@media (max-width: 600px) { .sp-only { display: inline; } }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; font-weight: 600; transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--accent); color: var(--bg); box-shadow: 0 8px 24px rgba(179, 164, 255, .14); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn--ghost:hover { color: var(--text); border-color: var(--text-muted); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 6px 14px; font-size: .85rem; }

/* ===== Age gate ===== */
.age-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.age-gate[hidden] { display: none; }
.age-gate__box {
  position: relative; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 40px 32px 36px; max-width: 460px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.age-gate__box::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--text), transparent); }
.age-gate__badge {
  display: inline-block; margin: 0 0 12px; padding: 4px 14px; border-radius: 999px;
  background: var(--accent-warm-soft); color: var(--accent-warm); font-weight: 800; letter-spacing: .08em;
}
.age-gate__title { margin: 0 0 12px; font-size: 1.5rem; }
body.has-modal { overflow: hidden; }
.age-gate p { margin: 0 0 20px; color: var(--text-muted); }
.age-gate__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.age-gate__remember, .welcome__off { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: .82rem; color: var(--text-muted); cursor: pointer; }
.welcome__off { margin: 10px 0 6px; }
.age-gate__remember input, .welcome__off input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.age-gate__note { font-size: .8rem; margin: 0; }
.age-gate__note a { color: var(--accent); text-decoration: underline; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.05rem; }
.brand__mark {
  width: 48px; height: 48px; display: grid; place-items: center; overflow: visible;
}
.brand__mark img { width: 48px; height: 48px; max-width: none; flex: none; object-fit: contain; }
.brand__wordmark { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand__name { font-size: .98rem; font-weight: 500; letter-spacing: .24em; }
.brand__tagline { margin-top: 6px; color: var(--accent); font-size: .46rem; font-weight: 600; letter-spacing: .2em; }
.site-nav { display: flex; gap: 6px; }
.site-nav a {
  padding: 6px 12px; border-radius: 8px; color: var(--text-muted); font-size: .92rem;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--text); background: var(--accent-soft); }
.site-nav a { white-space: nowrap; position: relative; }
.nav__badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .7rem; font-weight: 800; line-height: 1;
  vertical-align: 1px;
}
.nav__badge[hidden] { display: none; }
.site-header__tools { display: flex; align-items: center; gap: 6px; }
.tool-btn {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.tool-btn:hover { color: var(--text); border-color: var(--text-muted); }
.tool-btn.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.site-header__inner { gap: 12px; }
.brand { flex-shrink: 0; }
@media (max-width: 900px) {
  .site-header__inner { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
  .brand__name { font-size: .95rem; white-space: nowrap; }
  .site-nav { width: 100%; justify-content: flex-start; gap: 4px; flex-wrap: wrap; order: 3; }
  .site-header__tools { order: 2; margin-left: auto; }
  .site-nav a { padding: 4px 10px; font-size: .8rem; }
}

/* ===== Hero ===== */
.hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(640px 320px at 18% 0%, rgba(179, 164, 255, 0.105), transparent 72%),
    radial-gradient(520px 280px at 90% 18%, rgba(74, 48, 92, 0.1), transparent 72%);
}
.hero__eyebrow { margin: 0 0 8px; color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .08em; }
.hero__title { margin: 0 0 12px; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.3; }
.hero__lead { margin: 0 0 24px; color: var(--text-muted); max-width: 640px; }
.search { display: flex; gap: 8px; max-width: 560px; }
.search__input {
  flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(14, 23, 41, .94); color: var(--text); outline: none; box-shadow: var(--shadow-soft);
}
.search__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft); }

/* コンパクトなヒーロー: h1 は SEO 用に残し、視覚的には検索欄が主役 */
.hero--compact { padding: 22px 0 18px; }
.hero--compact .hero__title { font-size: .95rem; font-weight: 600; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; }
.hero--compact .search { max-width: 640px; }
@media (max-width: 600px) {
  .hero--compact { padding: 14px 0 12px; }
  .hero--compact .hero__title { font-size: .82rem; margin-bottom: 8px; }
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 8px 0 20px;
}
.tabs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tabs--row { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
/* 1 段目: 大分類セグメント */
.seg {
  display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border);
  gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 0;
  background: transparent; color: var(--text-muted); font-weight: 700; font-size: .9rem; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active { background: var(--accent); color: var(--bg); }
.seg__icon { font-size: .85em; }
/* 2 段目: 配下のカテゴリ */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.subtabs::before { content: "└"; color: var(--border); margin-right: 2px; }
.tab {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: .88rem;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.sort { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .9rem; }
.sort[hidden] { display: none; }
.sort select {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text);
}

/* ===== Status ===== */
.status { min-height: 1.5em; margin-bottom: 12px; color: var(--text-muted); font-size: .9rem; }
.status:empty { display: none; }   /* 2026-09-22 余白監査: 空の案内枠が 22px の穴になっていた */
.status--error { color: #ff8a8a; }
.status--demo {
  padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255, 196, 0, 0.1); border: 1px solid rgba(255, 196, 0, 0.35); color: #ffd866;
}
.status--demo code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 4px; }

/* ===== Grid / Cards ===== */
.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(179, 164, 255, .55); box-shadow: var(--shadow); }
.card__thumb {
  position: relative; aspect-ratio: 3 / 4; background: var(--bg-elev); overflow: hidden;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__thumb--placeholder {
  display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: .8rem;
  background:
    radial-gradient(120px 120px at 50% 40%, rgba(179, 164, 255,.1), transparent 70%),
    linear-gradient(180deg, var(--bg-elev), var(--bg-card));
}
.card__label {
  position: absolute; top: 8px; left: 8px; max-width: calc(100% - 52px);
  padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  background: rgba(0,0,0,.72); color: #fff; backdrop-filter: blur(4px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__label--top, .card__label--safe { background: var(--accent); color: var(--bg); }
.card__label--new { background: var(--accent-blue); color: var(--bg); }
.card__label--review, .card__label--adventure { background: var(--accent-gold); color: var(--bg); }
.card__label--discovery { background: var(--positive); color: var(--bg); }
.card__label--sale, .card__label--ending { background: var(--danger); }
.card__label--best { background: var(--accent-gold); color: var(--bg); }
.card__label--popular { background: var(--accent); color: var(--bg); }
.card__label--latest { background: var(--accent-blue); color: var(--bg); }
.card__sale { color: var(--danger); font-weight: 800; margin-right: 6px; }
.card__match {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; backdrop-filter: blur(4px);
}
.card__match--great { background: rgba(126,94,201,.9); color: #fff; }
.card__match--good { background: rgba(87,126,107,.9); color: #fff; }
.card__why {
  margin: 4px 0 0; padding-top: 6px; border-top: 1px dashed var(--border);
  color: var(--text-muted); font-size: .74rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rail__locked {
  margin: 0; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: .9rem;
}
.card__rank {
  position: absolute; top: 8px; left: 8px; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 8px; display: grid; place-items: center;
  background: rgba(0,0,0,.7); color: #fff; font-weight: 800; font-size: .85rem;
}
.card__rank--top { background: var(--accent); color: var(--bg); }
.card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title {
  margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta { margin: 0; color: var(--text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; padding-top: 6px; flex-wrap: wrap; }
.card__review, .card__price { white-space: nowrap; }
.card__price { color: var(--text-muted); font-size: .78rem; }
.card__review { color: #ffc63d; font-size: .8rem; font-weight: 600; }
.card__title a:hover { color: var(--accent); }
.card:focus-within { border-color: var(--accent); }

.card__fav {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.6); color: #fff;
  cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s, color .15s, transform .1s; z-index: 1;
}
.card__fav:hover { background: rgba(0,0,0,.85); transform: scale(1.08); }
.card__fav.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.card { position: relative; }
.card__badges { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.badge {
  font-size: .7rem; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}

.pager { text-align: center; margin: 28px 0 8px; }

/* ===== 画像を隠す（ユーザー切替。DMM 規約により画像にフィルタ等の加工はしない） ===== */
.hide-images .card__thumb img, .hide-images .work__poster img, .hide-images .samples img { display: none; }
.hide-images .card__thumb::before, .hide-images .work__poster::before {
  content: "画像を非表示中"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-muted); font-size: .75rem;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card));
}
.hide-images .work__poster { position: relative; }
.hide-images .samples { display: none; }

/* ===== 今夜の3本 ===== */
.tonight { margin-bottom: 36px; }
.tonight[hidden] { display: none; }
.tonight__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 760px; }
.tonight__why { margin: 8px 2px 0; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }

/* ===== 初回ヒント ===== */
.hint {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px;
  border-radius: var(--radius); background: var(--accent-soft); border: 1px solid rgba(179, 164, 255,.3);
}
.hint > span { color: var(--accent); font-size: 1.1rem; }
.hint p { margin: 0; flex: 1; font-size: .85rem; }
.hint__close { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.hint__close:hover { color: var(--text); }

/* ===== Rails (home) ===== */
.rail { margin-bottom: 36px; }
.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rail__title { margin: 0; font-size: 1.15rem; }
.rail__desc { margin: 2px 0 0; color: var(--text-muted); font-size: .85rem; }
.grid--rail {
  grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: 200px;
  overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.grid--rail > .card { scroll-snap-align: start; }
.rail__status { min-height: 0; margin: 6px 0 0; color: var(--text-muted); font-size: .85rem; }
.rail__status:empty { display: none; }

/* ===== List view ===== */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.list-head__title { margin: 0; font-size: 1.1rem; }

/* skeleton */
.skeleton { animation: pulse 1.2s ease-in-out infinite; }
.skeleton .card__thumb { background: var(--bg-elev); }
.skeleton .card__title, .skeleton .card__meta {
  background: var(--bg-elev); border-radius: 4px; height: 14px; color: transparent;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ===== Info cards ===== */
.info-cards {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 56px;
}
.info-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
}
.info-card h2, .info-card h3 { margin: 0 0 8px; font-size: 1rem; }
.info-card p { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ===== Static pages ===== */
.page { padding-top: 40px; padding-bottom: 60px; max-width: 760px; }
/* 一覧・グリッドを持つページは幅いっぱいに（2026-09-18 ユーザー指摘「右に余白が空いて左に寄る」）。読み物（about / privacy / guide / column / note）は 760px のまま */
.page.srv, .page.page--wide, .page.mp { max-width: 1100px; }
.page.srv .srv__note, .page.srv .srv__adnote, .page.srv .srv__sources { max-width: 900px; }
.page h1 { font-size: 1.8rem; margin: 0 0 8px; }
.page__lead { color: var(--text-muted); margin: 0 0 32px; }
.page h2 { font-size: 1.2rem; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.page p, .page li { color: #d1cdd4; }
.page ul { padding-left: 1.3em; }
.page a { color: var(--accent); text-decoration: underline; }
.page table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.page th, .page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.page th { color: var(--text-muted); font-weight: 600; width: 32%; white-space: nowrap; }
.page__toc { margin: 0 0 8px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.page__toc ol { margin: 0; padding-left: 1.3em; }
.page__toc li { margin: 4px 0; font-size: .92rem; }
.page__toc a { text-decoration: none; }
.page__toc a:hover { text-decoration: underline; }
/* みんなの傾向 */
.trend { margin: 0 0 8px; }
.trend h3 { font-size: .95rem; margin: 18px 0 8px; color: var(--text-muted); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars__row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { height: 10px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bars__num { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.bars__num small { margin-left: 2px; font-size: .75em; }
@media (max-width: 600px) { .page .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; } .page .kpi { padding: 10px 10px; } .page .kpi__value { font-size: .9rem; } .page .kpi__label { font-size: .72rem; } }
/* ブランド: ロゴマークの配置（年齢確認・ウェルカム・フッター・下部ナビ・プレースホルダー・ショート） */
.age-gate__brand { margin: 0 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.age-gate__brand img { width: 56px; height: 56px; object-fit: contain; }
.age-gate__brand span { font-size: .78rem; letter-spacing: .28em; color: var(--text-muted); font-weight: 500; }
.welcome__brand { margin: 0 0 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; letter-spacing: .26em; color: var(--text-muted); font-weight: 500; }
.welcome__brand img { width: 36px; height: 36px; object-fit: contain; }
.site-footer__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 16px; text-decoration: none; color: var(--text); }
.site-footer__brand img { width: 40px; height: 40px; object-fit: contain; }
.site-footer__wordmark { font-size: .9rem; letter-spacing: .3em; font-weight: 500; }
.site-footer__tagline { font-size: .6rem; letter-spacing: .24em; color: var(--text-muted); }
.bottom-nav__logo { width: 26px; height: 26px; object-fit: contain; display: block; }
.card__thumb--placeholder { flex-direction: column; gap: 6px; align-content: center; grid-auto-rows: max-content; }
.card__thumb--placeholder .ph__logo { width: 40px; height: 40px; object-fit: contain; opacity: .55; }
.hide-images .card__thumb::before, .hide-images .work__poster::before { background-image: url("../assets/logo-mark.png"), linear-gradient(180deg, var(--bg-elev), var(--bg-card)); background-repeat: no-repeat; background-position: center 34%, 0 0; background-size: 34px 34px, auto; padding-top: 30px; }
.pref-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); margin: 8px 0 16px; }
.page__updated { color: var(--text-muted); font-size: .85rem; margin-top: 40px; }
.page .rail__title { margin: 0; padding: 0; border: 0; }
.faq dt { font-weight: 700; margin: 18px 0 6px; color: var(--text); }
.faq dt::before { content: "Q. "; color: var(--accent); }
.faq dd { margin: 0; color: #cfd3dc; }
.page ol { padding-left: 1.4em; }
/* .page a のリンク装飾をボタン・カード・パンくずには適用しない */
.page .btn, .page .card a, .page .crumbs a, .page .work__library-note a { text-decoration: none; }
.page .btn--primary { color: var(--bg); }
.page .btn--outline, .page .card a { color: inherit; }
.page .btn--ghost, .page .crumbs a { color: var(--text-muted); }
.page .crumbs a:hover, .page .btn--ghost:hover { color: var(--text); }
.page .work__library-note a { text-decoration: underline; }

.page--wide { max-width: 1100px; }
.page__title { margin: 0 0 4px; font-size: 1.6rem; }
.page__lead--tight { margin-bottom: 0; }
.crumbs { margin: 0 0 16px; font-size: .9rem; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.lib-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-actions .btn--sm { padding: 5px 12px; font-size: .8rem; }
#lib-filters .tab { padding: 5px 12px; font-size: .82rem; }

/* ===== Work detail ===== */
.work { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 32px; align-items: start; }
.work[hidden] { display: none; }
.work > * { min-width: 0; }
.grid--rail { min-width: 0; }
.work__media { position: sticky; top: 76px; align-self: start; }
@media (max-width: 700px) { .work__media { position: static; } }
.work__poster { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-elev); aspect-ratio: 3 / 4; }
.work__poster img { width: 100%; height: 100%; object-fit: cover; }
.work__poster-placeholder { height: 100%; }
.work__title { margin: 0 0 16px; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.35; }
.work__meta { margin: 0 0 14px; display: grid; gap: 6px; }
.work__meta-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: .92rem; }
.work__meta dt { color: var(--text-muted); margin: 0; }
.work__meta dd { margin: 0; color: #d1cdd4; }
.work__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.page .work__section-title { margin: 0 0 10px; padding: 0; border: 0; font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.work__library { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); margin-bottom: 24px; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.flag {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; font-weight: 600; font-size: .8rem; line-height: 1.4;
}
.flag:hover { border-color: var(--text-muted); }
.flag.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.flag--muted.is-active { background: #3a3f4b; border-color: #3a3f4b; }
.rating { display: flex; align-items: center; gap: 0; }
.rating__label { color: var(--text-muted); font-size: .8rem; margin-right: 8px; }
.star { background: none; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; color: #3a3f4b; padding: 2px 3px; transition: color .1s, transform .1s; }
.star:hover { transform: scale(1.15); }
.star.is-active { color: #ffc63d; }
.rating__clear { margin-left: 10px; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: .8rem; text-decoration: underline; }
.work__library-note { margin: 8px 0 0; font-size: .75rem; color: var(--text-muted); }
.work__library-note a { color: var(--accent); text-decoration: underline; }
.btn--lg { padding: 14px 28px; font-size: 1.05rem; gap: 10px; }
.work__offer { margin-bottom: 20px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.price__now { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.price--sale .price__now { color: #ff6b6b; }
.price__list { color: var(--text-muted); text-decoration: line-through; font-size: .95rem; }
.price__off { padding: 2px 10px; border-radius: 999px; background: #e0322f; color: #fff; font-weight: 800; font-size: .85rem; }
.price__ends { width: 100%; color: #ffc63d; font-weight: 700; font-size: .9rem; }
.price__ends--soon { color: #ff6b6b; }
.price__title { width: 100%; color: var(--text-muted); font-size: .8rem; }
.hub-link { color: var(--accent); text-decoration: underline dotted; }
.hub-link:hover { text-decoration: underline; }

/* ===== 情報源チップ・汎用ブロック ===== */
.src__chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; vertical-align: middle;
  border: 1px solid var(--border); color: var(--text-muted); letter-spacing: .02em; margin-left: 4px;
}
.src__chip--official { border-color: rgba(47,123,255,.5); color: #7fb0ff; }
.src__chip--reviews { border-color: rgba(255,198,61,.5); color: #ffc63d; }
.src__chip--auto { border-color: rgba(154,161,177,.5); color: var(--text-muted); }
.src__chip--you { border-color: rgba(179, 164, 255,.5); color: var(--accent); }
.src--inline { margin: -8px 0 10px; }
.block { margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.block[hidden] { display: none; }
.block__body { margin: 6px 0 0; font-size: .92rem; color: #cfd3dc; line-height: 1.7; }
.block__desc { margin: 4px 0 8px; font-size: .78rem; color: var(--text-muted); }
.check { margin: 0; padding-left: 1.2em; font-size: .88rem; color: #cfd3dc; }
.check li { margin-bottom: 4px; }
.work__wide { grid-column: 1 / -1; margin-top: 8px; }
.work__wide[hidden] { display: none; }

/* CTA 3 本 */
.cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.cta .btn { flex: 1 1 auto; justify-content: center; padding: 12px 16px; }
.page .cta .btn--outline { color: var(--text); }

/* 配信形態 */
.delivery { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.delivery__title { margin: 0 0 6px; font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.delivery__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.delivery__list li { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.delivery__type { color: #cfd3dc; }
.delivery__price { color: var(--text); font-weight: 600; }
.delivery__price s { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.delivery__price em { font-style: normal; color: #ff6b6b; font-size: .75rem; margin-left: 4px; }
.delivery__note { margin: 8px 0 0; font-size: .74rem; color: var(--text-muted); }

/* 比較表 */
.table-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .88rem; }
.compare th, .compare td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.compare thead th { color: var(--text-muted); font-weight: 600; font-size: .78rem; }
.compare tbody th { font-weight: 600; white-space: normal; min-width: 180px; }
.compare tbody th a { color: var(--text); }
.compare tbody th a:hover { color: var(--accent); }
.compare tr.is-current { background: rgba(179, 164, 255,.06); }
.compare__this { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--accent); color: var(--bg); font-size: .68rem; vertical-align: 1px; }
.compare small { color: var(--text-muted); }

/* ===== 購入判断のヒント ===== */
.decision { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.decision[hidden] { display: none; }
.decision__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.decision__head .work__section-title { margin: 0; }
.decision__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 12px; }
.decision__col h3 { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.decision__col ul { margin: 0; padding-left: 1.1em; font-size: .88rem; color: #cfd3dc; }
.decision__col li { margin-bottom: 4px; }
.decision__col--yes h3 { color: #5fd6a0; }
.decision__col--no h3 { color: #ff8a8a; }
.decision__col--unknown h3 { color: var(--text-muted); }
.match-chip { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.match-chip--great { background: rgba(179, 164, 255,.18); color: var(--accent-hover); }
.match-chip--good { background: rgba(42,168,118,.2); color: #5fd6a0; }
.match-chip--new { background: var(--bg-card); color: var(--text-muted); font-weight: 500; }

/* ===== 価格の見立て ===== */
.pricing { margin-bottom: 24px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elev); }
.pricing__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pricing__head .work__section-title { margin: 0; }
.pricing__badge { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.pricing--buy .pricing__badge { background: rgba(42,168,118,.2); color: #5fd6a0; }
.pricing--wait .pricing__badge { background: rgba(255,198,61,.18); color: #ffc63d; }
.pricing--unknown .pricing__badge { background: var(--bg-card); color: var(--text-muted); }
.pricing__headline { margin: 10px 0 8px; font-weight: 700; }
.pricing--buy .pricing__headline { color: #5fd6a0; }
.pricing--wait .pricing__headline { color: #ffc63d; }
.pricing__chart { margin: 6px 0 10px; color: var(--text-muted); }
.spark { display: block; width: 100%; height: 56px; }
.spark__min { fill: #5fd6a0; }
.spark__now { fill: var(--accent); }
.pricing__axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); }
.pricing__facts { margin: 0; padding-left: 1.1em; font-size: .88rem; color: #cfd3dc; }
.pricing__facts li { margin-bottom: 3px; }
.pricing__forecast { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-card); font-size: .88rem; color: #cfd3dc; }
.pricing__note { margin: 10px 0 0; font-size: .74rem; color: var(--text-muted); }
.os-badge { display: inline-block; padding: 1px 8px; margin: 0 4px 2px 0; border-radius: 6px; font-size: .7rem; font-weight: 700; background: rgba(47,123,255,.18); color: #7fb0ff; }
.card__os { margin: 0; line-height: 1.2; }

/* ===== 比較 ===== */
.card__cmp {
  position: absolute; top: 44px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.6); color: #fff; cursor: pointer;
  font-size: .95rem; line-height: 1; display: grid; place-items: center; z-index: 1;
}
.card__cmp:hover { background: rgba(0,0,0,.85); }
.card__cmp.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(23,26,33,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.tray__inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tray__label { font-weight: 800; color: #7fb0ff; white-space: nowrap; }
.tray__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.tray__list li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); font-size: .78rem; max-width: 220px; }
.tray__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray__list button, .tray__x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.tray__actions { display: flex; gap: 6px; margin-left: auto; }
body:has(#compare-tray) { padding-bottom: 72px; }
.compare--page thead th { white-space: normal; min-width: 160px; vertical-align: top; }
.compare--page thead th a { color: var(--text); font-weight: 700; }
.compare--page tbody th { min-width: 90px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.compare--page td { white-space: normal; min-width: 160px; }
.chip--common { border-color: #5fd6a0; color: #5fd6a0; }
@media (max-width: 600px) {
  .card__cmp { width: 28px; height: 28px; top: 40px; right: 6px; font-size: .85rem; }
  .tray__inner { padding: 8px 14px; gap: 8px; }
  .tray__list { display: none; }
}

/* ===== スマホ下部ナビ ===== */
.bottom-nav { display: none; }
@media (max-width: 600px) {
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--vv-bottom, 0px); z-index: 300;
    background: rgba(15,17,21,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .bottom-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    color: var(--text-muted); font-size: .66rem; background: none; border: 0; border-radius: 10px; position: relative; cursor: pointer;
  }
  .bottom-nav__item.is-active { color: var(--accent); }
  .bottom-nav__icon { font-size: 1.25rem; line-height: 1; }
  .bottom-nav__badge {
    position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .62rem; font-weight: 800; display: grid; place-items: center;
  }
  .bottom-nav__badge[hidden] { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(#compare-tray) { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .tray { bottom: calc(58px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); }
  /* 上部ヘッダーはロゴのみ（ナビ・画像ボタンは下部へ） */
  .site-nav, .site-header__tools { display: none; }
  .site-header__inner { height: 48px; padding-top: 0; padding-bottom: 0; }
}

/* ===== シンプル化: 案内 1 行、特集の切替 ===== */
.note { margin: 0 0 24px; padding: 10px 14px; border-left: 3px solid var(--accent); color: var(--text-muted); font-size: .85rem; }
.seg--small { margin: 6px 0 4px; padding: 3px; max-width: 100%; flex-wrap: wrap; border-radius: 14px; }
.seg--small .seg__btn { padding: 4px 11px; font-size: .78rem; white-space: normal; text-align: left; }
.rail__head > div { min-width: 0; }   /* 長いタブ名で親が広がらないように（実機で横パンの原因になった） */
.rail__head { min-width: 0; }
.work__tools { margin-top: 8px; }

/* ===== 起点探索（折りたたみ） ===== */
.discovery-wrap { margin: 6px 0 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.discovery-wrap__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.discovery-wrap__summary::-webkit-details-marker { display: none; }
.discovery-wrap__title { font-weight: 700; white-space: nowrap; }
.discovery-wrap__desc { color: var(--text-muted); font-size: .84rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discovery-wrap__toggle { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); position: relative; flex-shrink: 0; }
.discovery-wrap__toggle::after { content: "＋"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: .9rem; }
.discovery-wrap[open] .discovery-wrap__toggle::after { content: "－"; }
.discovery-wrap[open] .discovery-wrap__summary { border-bottom: 1px solid var(--border); }
.discovery-wrap .discovery { padding: 4px 16px 16px; }
.discovery-wrap .discovery .hero__title, .discovery-wrap .discovery h2 { font-size: 1rem; }
.rail__title--search { font-size: .9rem; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 600px) {
  .discovery-wrap__summary { padding: 10px 12px; gap: 8px; }
  .discovery-wrap__desc { display: none; }
}

/* ===== シンプル UI: 詳細は箱をやめて 1 カラムの読み物風、チップは控えめ ===== */
.decision, .block, .pricing, .work__library, .work__related, .work__wide, .work__samples {
  background: none; border: 0; border-radius: 0; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--border);
}
.work__offer { margin-bottom: 8px; }
.decision__head { margin-bottom: 4px; }
.src__chip { border: 0; padding: 0; margin-left: 6px; font-size: .64rem; font-weight: 600; color: var(--text-muted) !important; opacity: .8; }
.work__sources { grid-column: 1 / -1; margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); line-height: 1.6; }
.cta { flex-direction: column; align-items: stretch; gap: 10px; }
.cta__links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; }
.page .cta__link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.page .cta__link:hover { color: var(--text); }
.discovery-wrap--link { margin: 8px 0 4px; border: 0; background: none; }
.discovery-wrap--link .discovery-wrap__summary { padding: 4px 0; color: var(--text-muted); font-size: .86rem; font-weight: 500; }
.discovery-wrap--link .discovery-wrap__summary::before { content: "＋ "; color: var(--accent); }
.discovery-wrap--link[open] .discovery-wrap__summary::before { content: "－ "; }
.discovery-wrap--link[open] .discovery-wrap__summary { border: 0; }
.discovery-wrap--link .discovery { padding: 8px 0 12px; }
.tonight__grid { max-width: none; }

/* ===== ウォッチ ===== */
.watch { margin-bottom: 28px; padding: 14px 16px; }   /* 2026-09-21 ユーザー指摘: 値下がりブロックだけ余白が無かった（.push / #taste-report と同じに） */
.watch[hidden] { display: none; }
.btn__sub { font-weight: 400; opacity: .9; }
.work__offer-note { margin: 10px 0 0; font-size: .8rem; color: var(--text-muted); }
.work__samples { grid-column: 1 / -1; margin-top: 8px; }
.work__related { grid-column: 1 / -1; margin-top: 8px; }
.work__related[hidden] { display: none; }
.work__samples[hidden] { display: none; }
.samples { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.samples img { width: 100%; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); }
@media (max-width: 700px) {
  .work { grid-template-columns: 1fr; gap: 20px; }
  .work__poster { max-width: 260px; }
  .work__meta-row { grid-template-columns: 76px 1fr; }
}

/* ===== Stats ===== */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 8px 0 32px; }
.kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi__label { color: var(--text-muted); font-size: .8rem; margin-bottom: 4px; }
.kpi__value { font-weight: 800; font-size: 1.1rem; }
.criterion { list-style: none; margin-left: -1.3em; }
.criterion--ok { color: #7ee2a8; }
.criterion--ng { color: #ff8a8a; }

/* ===== アクセシビリティ ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}

/* ===== スマホ最適化（600px 以下） ===== */
@media (max-width: 600px) {
  /* ヘッダー: 1 行ナビ（横スクロール）でコンパクトに */
  .site-header__inner { height: 56px; padding-top: 4px; padding-bottom: 4px; row-gap: 4px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark img { width: 40px; height: 40px; }
  .brand__name { font-size: .88rem; letter-spacing: .2em; }
  .brand__tagline { display: none; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 4px 9px; font-size: .78rem; }
  .tool-btn { padding: 4px 10px; font-size: .72rem; }
  /* ヒーロー */
  .hero { padding: 26px 0 20px; }
  .hero__eyebrow { font-size: .72rem; margin-bottom: 4px; }
  .hero__title { font-size: 1.4rem; margin-bottom: 8px; }
  .hero__lead { font-size: .86rem; margin-bottom: 14px; }
  .search { gap: 6px; }
  .search__input { padding: 9px 14px; font-size: .9rem; }
  .search .btn { padding: 9px 16px; }
  /* タブ・通知 */
  .toolbar { margin: 4px 0 14px; gap: 10px; }
  .seg__btn { padding: 6px 12px; font-size: .84rem; }
  .status--demo, .hint { font-size: .78rem; padding: 8px 12px; }
  .hint { margin-bottom: 12px; }
  /* 今夜の3本／まず見るならこの3本: 横スクロールのレールに */
  .tonight__grid {
    display: flex; gap: 12px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none;
  }
  .tonight__grid::-webkit-scrollbar { display: none; }
  /* スナップ位置にも左右余白を含め、見出しとカードの左端を揃える。 */
  .tonight__grid, .grid--rail { scroll-padding-inline: 20px; }
  .tonight__slot, .tonight__grid > .card { flex: 0 0 66%; scroll-snap-align: start; min-width: 0; }
  .tonight__why { font-size: .74rem; }
  /* レール: カードを小さく、端まで使う */
  .grid--rail { grid-auto-columns: 152px; gap: 10px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .grid--rail::-webkit-scrollbar { display: none; }
  .rail { margin-bottom: 24px; }
  .rail__title { font-size: 1.02rem; }
  .rail__desc { font-size: .78rem; }
  .rail__head { margin-bottom: 8px; }
  /* 一覧: 2 列 */
  .grid:not(.grid--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card__body { padding: 9px 10px 10px; gap: 3px; }
  .card__title { font-size: .82rem; }
  .card__meta { font-size: .72rem; }
  .card__price, .card__review { font-size: .72rem; }
  .card__label { font-size: .64rem; padding: 2px 7px; top: 6px; left: 6px; }
  .card__fav { width: 28px; height: 28px; font-size: .9rem; top: 6px; right: 6px; }
  .card__match { font-size: .64rem; padding: 2px 7px; left: 6px; bottom: 6px; }
  .card__why { font-size: .68rem; }
  .os-badge { font-size: .62rem; padding: 1px 6px; }
  .rail__locked { font-size: .82rem; padding: 10px 12px; }
  .info-cards { margin-top: 32px; gap: 10px; }
  .info-card { padding: 14px; }
  .info-card p { font-size: .84rem; }
  /* 詳細 */
  .crumbs { margin-bottom: 10px; }
  .work__poster { max-width: 190px; margin: 0 auto; }
  .work__title { font-size: 1.2rem; margin-bottom: 10px; }
  .work__meta-row { font-size: .86rem; }
  .price__now { font-size: 1.5rem; }
  .btn--lg { width: 100%; padding: 13px 20px; font-size: 1rem; }
  .decision, .pricing, .work__library { padding: 12px 14px; }
  .decision__grid { grid-template-columns: 1fr; gap: 10px; }
  .decision__col ul, .pricing__facts { font-size: .84rem; }
  .pricing__forecast { font-size: .82rem; }
  /* 静的ページ・マイリスト */
  .page { padding-top: 24px; padding-bottom: 40px; }
  .page h1, .page__title { font-size: 1.35rem; }
  .page h2 { font-size: 1.05rem; margin-top: 26px; }
  .page p, .page li, .faq dd { font-size: .92rem; }
  .list-head { gap: 8px; margin-bottom: 12px; }
  .page__lead { font-size: .9rem; }
  .site-footer { padding: 26px 0 22px; font-size: .76rem; margin-top: 48px; }
  .site-footer__nav { gap: 10px 14px; }
}

/* ===== Footer ===== */
.site-footer {
  margin-top: 72px; padding: 36px 0 28px; border-top: 1px solid var(--border);
  background: var(--bg-elev); text-align: center; font-size: .85rem; color: var(--text-muted);
}
/* 規約で各ページに必要な最小の表記だけを 1 行に（説明文は about.html#affiliate）。クレジット画像は改変しない */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 72ch; margin: 18px auto 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .68rem; line-height: 1.5; color: var(--text-muted); }
.site-footer__legal a { color: var(--text-muted); text-decoration: none; }
.site-footer__legal a:hover { color: var(--text); }
.site-footer__age { font-weight: 700; color: var(--text); }
.site-footer__sep { opacity: .5; }
.site-footer__credit img { display: block; width: auto; max-width: none; height: auto; }   /* DMM 135×17・SOKMIL 135×18。規定の画像を拡大縮小しない（width を固定すると、広告ブロッカーで読めなかったときに alt が 135px の枠で 2 行に折れる。auto なら実寸のまま＝拡大縮小しない） */
/* 2026-09-22 ユーザー指摘「フッターのソクミルの画像がエラーしてない？」: 広告ブロッカーが sokmil-ad.com を遮ると img が読めず alt が出る（クレジット表示は保たれるが見た目が不揃い）。
   alt のテキストを隣のテキストクレジットと同じ大きさ・色・1 行に整える。規定 HTML は変えない（CSS だけ） */
.site-footer__credit { display: inline-flex; align-items: center; min-height: 18px; font-size: .56rem; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; overflow: visible; color: var(--text-muted); }
.site-footer__credit img { flex: none; }
@media (max-width: 600px) { .site-footer__sep { display: none; } .site-footer__legal { gap: 6px 12px; } }
.site-footer__nav { display: flex; justify-content: center; gap: 18px; margin: 16px 0; flex-wrap: wrap; }
.site-footer__nav a:hover { color: var(--text); }
.site-footer__copy { margin: 0; }

/* =====================================================================
   グリッド UI（サムネイル主役。既存トークン・ブランドは維持）
   このブロックは末尾に置き、上の定義を上書きする。
   ===================================================================== */
:root { --bg: #0a0a0d; --bg-elev: #121216; --bg-card: #151519; --thumb-ratio: 3 / 2; }

/* ---- ヘッダー: ロゴ / 検索 / ナビ / ツール ---- */
.site-header__inner { display: flex; align-items: center; gap: 14px; height: 60px; }
.hsearch { flex: 1 1 420px; display: flex; min-width: 0; max-width: 620px; }
.hsearch__input {
  flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px 0 0 999px; border: 1px solid var(--border);
  border-right: 0; background: var(--bg-elev); color: var(--text); font-size: .92rem; outline: none;
}
.hsearch__input:focus { border-color: var(--accent); }
.hsearch__btn {
  padding: 0 16px; border-radius: 0 999px 999px 0; border: 1px solid var(--border); border-left: 0;
  background: var(--bg-card); color: var(--text); font-size: 1.1rem; cursor: pointer;
}
.hsearch__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav__minor { color: var(--text-muted); }
.site-nav__minor small { font-size: .62rem; margin-left: 3px; opacity: .8; }
.brand__tagline { display: none; }

/* ---- カテゴリチップ（1 行、横スクロール） ---- */
.catbar { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 60px; z-index: 90; }
.catbar__inner { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.chips::-webkit-scrollbar { display: none; }
.chips__group { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--border); }
.chips__group:last-child { border-right: 0; }
.chips__label { font-size: .68rem; color: var(--text-muted); letter-spacing: .04em; white-space: nowrap; }
.chip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--text-muted); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip--action { color: var(--accent); border-style: dashed; }
.discovery-wrap--chip { margin: 0; border: 0; background: none; flex-shrink: 0; }
.discovery-wrap--chip .discovery-wrap__summary { padding: 0; }
.discovery-wrap--chip .discovery-wrap__summary::before { content: none; }
.discovery-wrap--chip[open] .chip--action { background: var(--accent-soft); }
.discovery { padding: 14px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.discovery[hidden] { display: none; }

/* ---- セクション ---- */
.sec { margin: 22px 0 8px; }
.sec[hidden] { display: none; }
.sec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sec__title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.sec__desc { color: var(--text-muted); font-size: .8rem; }
.sec__more { margin-left: auto; background: none; border: 0; color: var(--text-muted); font-size: .86rem; cursor: pointer; padding: 4px 0; }
.sec__more:hover { color: var(--accent); }
.sec__criteria { margin: -6px 0 10px; font-size: .76rem; color: var(--text-muted); }
.sec .btn--outline.btn--sm { margin-left: auto; }
.rail { margin: 0; }
.rail__head, .rail__title, .rail__desc { all: revert; }
.status--demo { margin: 14px 0 0; }
.note { margin: 18px 0 0; }

/* ---- グリッド（縦。横スクロールはしない） ---- */
.grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--rail { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding: 0; margin: 0; }
.tonight__grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- カード ---- */
.card { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; position: relative; }
.card:hover { transform: none; box-shadow: none; }
.card__thumb {
  display: block; position: relative; aspect-ratio: var(--thumb-ratio); border-radius: 8px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.card:hover .card__thumb img { transform: scale(1.03); }
.card__thumb--placeholder { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: .78rem; background: linear-gradient(180deg, var(--bg-card), var(--bg-elev)); }
.ov {
  position: absolute; padding: 2px 7px; border-radius: 4px; font-size: .7rem; font-weight: 800; line-height: 1.5;
  background: rgba(0,0,0,.78); color: #fff; backdrop-filter: blur(3px); max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov--tl { top: 6px; left: 6px; }
.ov--bl { bottom: 6px; left: 6px; }
.ov--br { bottom: 6px; right: 6px; font-weight: 700; }
.ov--match { top: 6px; right: 6px; }
.ov--rank.ov--top, .ov--safe, .ov--popular { background: var(--accent); }
.ov--new, .ov--latest { background: var(--accent-blue, #6096ff); }
.ov--review, .ov--adventure, .ov--best { background: var(--accent-gold, #cbb98d); color: #111; }
.ov--discovery { background: var(--positive, #54d6a0); color: #111; }
.ov--sale, .ov--ending { background: #e0322f; }
.ov--hot { background: #ff6a3d; }   /* Discover: 伸びている */
.ov--gem { background: #2fb39a; color: #061511; }   /* Discover: 隠れた高評価 */
.ov--match-great { background: var(--accent); }
.ov--match-good { background: var(--positive, #54d6a0); color: #111; }
.card__label, .card__sale, .card__match, .card__rank { display: none; }
.card__fav {
  top: auto; bottom: calc(100% - 32px); right: 6px; width: 28px; height: 28px; opacity: 0; transition: opacity .15s;
  background: rgba(0,0,0,.7);
}
.card__fav.is-active { opacity: 1; background: var(--accent); }
.card:hover .card__fav, .card__fav:focus-visible { opacity: 1; }
.card__body { padding: 8px 2px 0; gap: 2px; }
.card__title { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.card__title a { color: var(--text); }
.card__title a:hover { color: var(--accent); }
.card__meta { font-size: .78rem; color: var(--text-muted); }
.card__line { margin: 0; font-size: .78rem; color: var(--text-muted); }
.card__line .card__count { opacity: .8; }
.card__dot { margin: 0 4px; opacity: .6; }
.card__bottom, .card__price, .card__review { display: none; }
.card__why { border: 0; padding: 2px 0 0; margin: 0; font-size: .74rem; }
.card__os { margin: 2px 0 0; }
.skeleton .card__thumb { border: 0; }
.skeleton .card__title, .skeleton .card__meta { height: 12px; }

/* ---- 並び替えタブ ---- */
.sorttabs { display: flex; gap: 4px; margin: 0 0 12px; flex-wrap: wrap; }
.sorttabs[hidden] { display: none; }
.sorttab {
  padding: 6px 12px; border-radius: 6px; border: 0; background: transparent; color: var(--text-muted);
  font-size: .86rem; font-weight: 600; cursor: pointer;
}
.sorttab:hover { color: var(--text); }
.sorttab.is-active { background: var(--bg-card); color: var(--text); }
.list-head { margin: 22px 0 8px; }
.list-head__title { font-size: 1.1rem; }
.toolbar, .sort, .seg, .subtabs { display: none; }

/* ---- 詳細ページの関連（縦グリッド、3 列上限） ---- */
.work__related .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---- タブレット以下 ---- */
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
  .hsearch { order: 3; flex-basis: 100%; max-width: none; }
  .site-nav { order: 2; }
  .site-header__tools { order: 2; }
  .catbar { top: 0; position: static; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 10px; }
}

/* ---- スマホ ---- */
@media (max-width: 600px) {
  .site-header__inner { height: auto; padding: 8px 0 8px; }
  .hsearch { order: 2; }
  .hsearch__input { padding: 8px 12px; font-size: .88rem; }
  .site-nav, .site-header__tools { display: none; }
  .catbar__inner { padding-top: 6px; padding-bottom: 6px; }
  .chips__label { display: none; }
  .chip { padding: 5px 11px; font-size: .8rem; }
  .chips__group { padding-right: 6px; margin-right: 2px; }
  .grid, .grid:not(.grid--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .grid--3, .tonight__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > .card:nth-child(3) { grid-column: 1 / -1; }
  .card__fav { opacity: 1; width: 26px; height: 26px; }
  .card__title { font-size: .82rem; }
  .card__meta, .card__line { font-size: .72rem; }
  .ov { font-size: .64rem; padding: 1px 6px; }
  .sec { margin: 16px 0 4px; }
  .sec__title { font-size: 1rem; }
  .sec__desc { display: none; }
  .grid--rail { margin: 0; padding: 0; }
  .tonight__grid, .grid--rail { display: grid; overflow: visible; }
  .tonight__slot, .tonight__grid > .card { flex: none; }
}

.chip__short { display: none; }
@media (max-width: 600px) {
  .chip__long { display: none; }
  .chip__short { display: inline; }
}

/* ---- カテゴリ: 上段タブ + 下段チップ ---- */
.catbar .container { padding-top: 0; padding-bottom: 0; }
.cattabs { display: flex; gap: 4px; }
.cattab {
  flex: 0 0 auto; padding: 12px 18px 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); font-size: 1rem; font-weight: 800; cursor: pointer;
}
.cattab:hover { color: var(--text); }
.cattab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.catbar .chips { padding: 8px 0 10px; }
@media (max-width: 600px) {
  .cattabs { justify-content: space-around; }
  .cattab { flex: 1; padding: 10px 6px 8px; font-size: .95rem; }
  .catbar .chips { padding: 6px 0 8px; justify-content: flex-start; }
}

/* ---- メニューシート（スマホ） ---- */
.sheet { position: fixed; inset: 0; z-index: 400; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-elev); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 2px; max-height: 80vh; overflow: auto;
}
.sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 10px; }
.sheet__item {
  display: flex; align-items: center; gap: 12px; padding: 13px 8px; border: 0; background: none; color: var(--text);
  font-size: 1rem; font-weight: 600; text-align: left; border-radius: 10px; cursor: pointer; width: 100%;
}
.sheet__item > span:first-child { width: 22px; text-align: center; color: var(--accent); }
.sheet__item:active, .sheet__item:hover { background: var(--bg-card); }
.sheet__item--minor { font-size: .88rem; font-weight: 500; color: var(--text-muted); padding: 10px 8px; }
.sheet__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.sheet__badge[hidden] { display: none; }
.sheet__sep { height: 1px; background: var(--border); margin: 6px 0; }
/* 整理: グループ見出し → タイル（あなたの）→ 行（探す・設定）→ 小さなリンク（このサイト） */
.sheet__group { margin: 10px 8px 4px; font-size: .68rem; letter-spacing: .18em; color: var(--text-muted); font-weight: 600; }
.sheet__group:first-of-type { margin-top: 2px; }
.sheet__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 4px; }
.sheet__tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); font: inherit; font-size: .72rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.sheet__tile:active, .sheet__tile:hover { border-color: var(--glass-border); }
.sheet__tile .sheet__badge { position: absolute; top: 6px; right: 6px; margin: 0; }
.sheet__ico { width: 24px; height: 24px; display: grid; place-items: center; color: var(--accent); flex: none; }
.sheet__ico svg { width: 22px; height: 22px; }
.sheet__item { padding: 11px 8px; font-size: .95rem; }
.sheet__item > .sheet__ico:first-child { width: 24px; }
.sheet__switch { margin-left: auto; width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; transition: background .2s; flex: none; }
.sheet__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sheet__item.is-active .sheet__switch, .sidebar__item.is-active .sheet__switch { background: var(--accent); }
.sheet__item.is-active .sheet__switch::after { transform: translateX(16px); }
.sheet__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 8px 4px; font-size: .78rem; }
.sheet__links a { color: var(--text-muted); text-decoration: none; }
.sheet__links a:hover { color: var(--text); }
.sheet__close { margin-top: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: none; color: var(--text-muted); font-weight: 600; cursor: pointer; }
body.has-sheet { overflow: hidden; }
/* モーダル・シート表示中は body を固定して背景のスクロールを止める（top は JS が現在位置を入れる） */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* ちらつき防止（head のインラインスクリプトが付ける html クラス。JS 初期化前の一瞬だけ効く） */
html.age-ok .age-gate { display: none; }
/* JS がスクロール連動フェード（.rv）を付ける前に本文が一瞬見えるのを防ぐ。initScrollReveal が .rv を付けてから rv-pre を外す（保険で 4 秒後に自動解除） */
html.rv-pre main > *, html.rv-pre .site-footer .container { opacity: 0; }
/* index.html#sale で開いたとき: セールの位置へ移動し終えるまで本文を見せない（先頭が一瞬見えて跳ぶのを防ぐ） */
html.to-sale main { visibility: hidden; }
/* 読み込み直後に画面内にある要素は短め（.9s）に、スクロールで入ってくる要素は 2s */
.rv.rv-fast { transition-duration: .9s, 1s, .7s; }
/* 未確認のときは JS がフェードイン（.is-in）を付けるまで透明にして「一度出て消えて再度出る」ちらつきを防ぐ */
html:not(.age-ok) .age-gate:not(.is-in) { opacity: 0; }
html.view-list #tonight, html.view-list #rails, html.view-list #personal, html.view-list #specials, html.view-list .home-mia { display: none; }
/* カテゴリ行は JS 描画。描画前に高さを確保して、下のコンテンツが跳ねないようにする */
#category-tabs:empty { min-height: 128px; }
@media (max-width: 600px) { #category-tabs:empty { min-height: 124px; } }

/* ---- ウェルカム演出 ---- */
.welcome { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,6,9,.92); backdrop-filter: blur(6px); }
.welcome__box { position: relative; width: 100%; max-width: 420px; padding: 36px 28px 24px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--border); text-align: center; box-shadow: var(--shadow); }
.welcome__skip { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--text-muted); font-size: .8rem; cursor: pointer; }
.welcome__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--accent-soft); color: var(--accent); }
.welcome__title { margin: 0 0 10px; font-size: 1.3rem; }
.welcome__body { margin: 0 0 18px; color: #cfd3dc; font-size: .92rem; line-height: 1.75; text-align: left; }
.welcome__dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.welcome__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.welcome__dots span.is-active { background: var(--accent); width: 20px; border-radius: 4px; }
.welcome__next { width: 100%; }
.welcome__box--seeds { max-width: 520px; padding-top: 28px; }
.welcome__box--seeds .welcome__title { font-size: 1.15rem; }
.seeds { text-align: left; margin: 6px 0 14px; max-height: min(46vh, 380px); overflow-y: auto; padding-right: 4px; }
.seeds__group { margin-bottom: 10px; }
.seeds__label { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .06em; }
.seeds__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seeds .chip.is-active { background: var(--accent); border-color: var(--accent); color: #080f1f; }
.tp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* PC の左サイドメニュー（スマホのハンバーガーと同じ項目・同じ世界観） */
.sidebar { display: none; }
@media (min-width: 901px) {
  body.has-sidebar { --sidebar-w: 264px; }
  .sidebar { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); overflow-y: auto; padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); z-index: 95;
    background: rgba(8,8,12,.62); backdrop-filter: blur(16px); border-right: 1px solid rgba(179, 164, 255,.14); scrollbar-width: thin; animation: sk-fade .5s ease-out both; }
  .sidebar .sheet__group { margin: 16px 12px 6px; }
  .sidebar .sheet__group:first-child { margin-top: 2px; }
  .sidebar__item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0; padding: 10px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; position: relative; }
  .sidebar__item > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .sidebar__item .sheet__ico, .sidebar__item .sheet__switch, .sidebar__item .sheet__badge, .sidebar__item .sheet__chev { flex: none; }
  .sidebar__item:hover { background: rgba(255,255,255,.04); border-color: var(--glass-border-soft); }
  .sidebar__item.is-active { background: var(--glass); border-color: var(--glass-border); box-shadow: 0 0 22px rgba(179, 164, 255,.14); }
  .sidebar__item.is-active .sheet__ico { filter: drop-shadow(0 0 8px rgba(179, 164, 255,.6)); }
  .sidebar__item .sheet__badge { margin-left: auto; }
  .sidebar__item .bottom-nav__logo { width: 22px; height: 22px; }
  .sidebar__links { margin: 18px 12px 0; flex-direction: column; gap: 8px; }
  /* 2026-09-23: main の margin-left でずらすと、main 自体が .container のページ（運営・統計・ダッシュボード）で
     max-width の中央寄せ（margin: 0 auto）が効かず、左に寄って右に大きな余白ができていた（ヘッダーの中身だけ中央）。
     body の padding で場所を空ければ、どのページも残りの幅の中で中央に来る。サイドメニュー自体は position: fixed なので影響しない */
  body.has-sidebar { padding-left: var(--sidebar-w); }
  body.has-sidebar .site-header .brand { display: none; }   /* ロゴとタイトルはサイドメニューの上に常時表示 */
  body.has-sidebar .site-header__inner { padding-left: 20px; }
  .sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 10px 8px 14px; margin: 0 0 10px; text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(179, 164, 255,.14); }
  .sidebar__brand .brand__mark { width: 44px; height: 44px; position: relative; flex: none; }
  .sidebar__brand .brand__mark img { width: 44px; height: 44px; }
  .sidebar__brand .brand__mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(179, 164, 255,.28), transparent 65%); z-index: -1; filter: blur(4px); }
  .sidebar__brand .brand__wordmark { display: flex; flex-direction: column; line-height: 1; }
  .sidebar__brand .brand__name { font-size: 1rem; letter-spacing: .26em; font-weight: 500; }
  .sidebar__brand .brand__tagline { margin-top: 6px; color: var(--accent); font-size: .48rem; font-weight: 600; letter-spacing: .2em; }
}
/* 運営コラム */
.column__crumb { margin: 0 0 6px; font-size: .78rem; }
.column__crumb a { color: var(--text-muted); text-decoration: none; }
.column__meta { margin: 0 0 22px; font-size: .8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.column__author { margin-top: 32px; padding: 12px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); font-size: .82rem; color: var(--text-muted); }
.column__back { margin-top: 12px; }
.columns { display: grid; gap: 12px; margin: 0 0 24px; }
.column-card { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-soft); text-decoration: none !important; color: var(--text); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
.column-card:hover { transform: translateY(-2px); border-color: var(--glass-border); }
.column-card__meta { font-size: .76rem; color: var(--text-muted); }
.column-card__title { font-size: 1.05rem; font-weight: 700; }
.column-card__desc { font-size: .86rem; color: var(--text-muted); line-height: 1.6; }
.column-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.page--column table { margin: 8px 0 16px; }
.series { font-size: .8rem; color: var(--text-muted); margin: -12px 0 16px; }
.series--next { margin: 20px 0 0; }
.note-banner { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(217,120,130,.4); background: rgba(217,120,130,.08); color: #e6a3ab; font-size: .78rem; }
.note-beta { font-size: .84rem; color: var(--text-muted); }
.chip--ai { border-color: var(--accent-warm); color: var(--accent-warm); }
.chip--beta { border-color: var(--accent-blue); color: var(--accent-blue); }
.note-cta { margin-top: 28px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(165deg, rgba(48,30,44,.7), rgba(14,13,20,.95)); border: 1px solid rgba(217,120,130,.3); }
.note-cta h2 { margin: 0 0 6px; border: 0; padding: 0; font-size: 1.05rem; }
.note-cta p { margin: 0 0 8px; }
.page--note figure { margin: 16px 0; }
.page--note figure img, .page--note figure video { width: 100%; border-radius: 12px; border: 1px solid var(--glass-border-soft); }
.page--note figcaption { font-size: .78rem; color: var(--text-muted); margin-top: 6px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0 20px; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; padding: 8px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.gallery figure img { aspect-ratio: 1; object-fit: contain; border: 0; background: radial-gradient(circle at 50% 40%, rgba(179, 164, 255,.16), transparent 70%); }
.gallery figure.gallery__light img { background: none; border-radius: 10px; }
.gallery figcaption { text-align: center; }
/* ミア（マスコット）: 浮遊・まばたき・ポップ・吹き出し */
.mia { display: inline-block; position: relative; width: var(--mia-size, 96px); height: var(--mia-size, 96px); vertical-align: middle; animation: a2hs-float 4.8s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.mia__svg, .mia--img img { width: 100%; height: 100%; display: block; }
.mia--img img { object-fit: contain; }
.mia__lids { transform-origin: 60px 40px; transform: scaleY(0); animation: mia-blink 4.6s infinite; }
.mia--sleepy .mia__lids, .mia--wink .mia__lids { animation: none; }
.mia--wave .mia__hand { transform-origin: 104px 78px; animation: mia-wave 1.4s ease-in-out infinite; }
.mia--pop { animation: mia-pop .55s cubic-bezier(.2,1.2,.3,1) both, a2hs-float 4.8s ease-in-out 1s infinite; }
.mia__name { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #080f1f; font-size: .62rem; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.mia__bubble { position: absolute; right: calc(100% + 16px); bottom: 30%; max-width: 220px; padding: 10px 14px; border-radius: 24px 28px 26px 22px / 28px 24px 22px 28px; background: var(--cloud); border: 1px solid var(--cloud-border); color: var(--text); font-size: .8rem; font-weight: 600; line-height: 1.45; box-shadow: var(--cloud-shadow); white-space: normal; text-align: left; animation: sk-rise .4s cubic-bezier(.2,.8,.2,1) both, mia-cloud 5s ease-in-out infinite; animation-delay: .25s, .7s; }
.mia--inline { --mia-size: 72px; margin: -6px 10px -6px 0; animation: none; }
.mia--inline .mia__bubble { right: auto; left: calc(100% + 16px); bottom: 20%; }
.mia--inline .mia__bubble::before { right: auto; left: -12px; }
.mia--inline .mia__bubble::after { right: auto; left: -20px; }
.mia--title { --mia-size: 56px; margin: -14px 6px -12px 0; }
/* 画像版の動き: 呼吸（縦 1.5%）とゆらぎ（±1.2°）。切り抜き画像は transform だけで動かす＝形は変えない */
.mia--img img { transform-origin: 50% 100%; animation: mia-breathe 3.8s ease-in-out infinite; }
.mia--img .mia__alt, .mia--img .mia__react { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.mia--img.is-alt .mia__alt, .mia--img.is-react .mia__react { opacity: 1; }
.mia--img.is-alt > img:first-child, .mia--img.is-react > img:first-child { opacity: 0; transition: opacity .35s ease; }
.mia--img.is-react .mia__alt { opacity: 0; }
@keyframes mia-cloud { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mia-breathe { 0%, 100% { transform: scale(1, 1) rotate(-1.2deg); } 50% { transform: scale(1.012, 1.018) rotate(1.2deg); } }
.mia__bubble.is-flash { animation: mia-pop .5s cubic-bezier(.2,1.2,.3,1) both; }
/* きせかえ（イラスト単位）: 全身イラストの箱 */
.mia--full { overflow: visible; }
.mia--full img { object-fit: contain; }
/* 置き場所の共通レイアウト */
.mia-place { display: flex; align-items: flex-start; gap: 14px; margin: 14px 0 18px; }
.mia-place .mia { flex: none; margin-top: 4px; }
.mia-place--sm { margin: 8px 0 12px; }
.mia-place--footer { max-width: 520px; margin: 18px auto 10px; text-align: left; justify-content: center; }
.age-gate__mia { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px 0 0; }
.age-gate__mia .mia { --mia-size: 96px; flex: none; }
.mia__bubble--below { position: relative; left: auto; right: auto; bottom: auto; max-width: 190px; font-size: .74rem; }
.mia__bubble--below::before { right: auto; left: -12px; bottom: 10px; }
.mia__bubble--below::after { right: auto; left: -20px; bottom: 2px; }
@media (max-width: 600px) { .mia__bubble--below { display: none; } .age-gate__mia .mia { --mia-size: 80px; } }
/* 2026-09-22 ユーザー指示「サイドメニューのミアは大きく、吹き出しはその下」: ミア 150px を中央に、吹き出しは幅いっぱいで下（しっぽは上向き）。横に並べると吹き出しが 1 行 3 文字になる */
.sidebar__mia { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 2px 0 14px; padding: 4px 2px 0; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.sidebar__mia .mia { flex: none; --mia-size: 150px; }
.sidebar__mia .mia-speech { flex: none; width: 100%; min-width: 0; margin: 0; font-size: .76rem; line-height: 1.55; padding: 10px 12px 9px; }
.sidebar__mia .mia-speech__p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tp__mia { display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; }
.tp__mia .mia { flex: none; margin-bottom: 8px; }
.tp__mia-say { margin: 0; font-size: .84rem; color: var(--text); line-height: 1.5; }
/* ミアの吹き出し（パネル等。しっぽ付き） */
.mia-speech { position: relative; flex: 1; min-width: 0; padding: 12px 16px; border-radius: 26px 30px 28px 24px / 30px 26px 24px 30px; background: var(--cloud); border: 1px solid var(--cloud-border); box-shadow: var(--cloud-shadow); color: var(--text); font-size: .84rem; line-height: 1.5; animation: sk-rise .45s cubic-bezier(.2,.8,.2,1) both, mia-cloud 5.2s ease-in-out .5s infinite; animation-delay: .2s, .6s; }
.mia-speech p { margin: 0; }
.mia-speech__sub { margin-top: 6px !important; padding-top: 6px; border-top: 1px dashed var(--glass-border-soft); font-size: .78rem; color: var(--text-muted); }
.mia-speech__mood { position: absolute; top: -9px; right: 12px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #f7b6c8); color: #080f1f; font-size: .6rem; font-weight: 800; letter-spacing: .06em; }
/* しっぽは雲の小さな泡 2 つ（ミアの側へ） */
.mia-speech--left::before, .mia-speech--left::after { content: ""; position: absolute; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); box-shadow: var(--cloud-shadow); }
.mia-speech--left::before { width: 12px; height: 12px; left: -13px; top: 24px; }
.mia-speech--left::after { width: 7px; height: 7px; left: -23px; top: 36px; }
.tp__mia { align-items: flex-start; }
.tp__mia .mia { margin-top: 6px; }
.mia__bubble::before, .mia__bubble::after { content: ""; position: absolute; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); box-shadow: var(--cloud-shadow); }
.mia__bubble::before { width: 11px; height: 11px; right: -12px; bottom: 8px; }
.mia__bubble::after { width: 6px; height: 6px; right: -20px; bottom: 0; }
.welcome__mia { display: flex; justify-content: center; margin: 4px 0 8px; }
.a2hs__mia { position: absolute; right: -78px; bottom: -10px; --mia-size: 88px; }
@keyframes mia-blink { 0%, 92%, 100% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } }
@keyframes mia-wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes mia-pop { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mia, .mia__lids, .mia__hand, .mia--pop, .mia__bubble, .mia--img img, .about-mia__figure img { animation: none !important; } }
.about-mia { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.about-mia__figure img { width: 220px; max-width: 48vw; display: block; animation: a2hs-float 5s ease-in-out infinite; }
@media (max-width: 600px) { .about-mia { grid-template-columns: 1fr; justify-items: center; text-align: left; } }
/* 相棒ピル（ヘッダー右）とパネル */
.buddy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; box-shadow: var(--glass-shadow-soft); white-space: nowrap; flex: none; }
.buddy:hover { border-color: var(--glass-border); }
.buddy__ring { width: 22px; height: 22px; transform: rotate(-90deg); flex: none; }
.buddy__track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 2.4; }
.buddy__fill { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.buddy.is-on .buddy__fill { stroke: var(--positive, #8dbba4); }
.buddy__lv { color: var(--accent); letter-spacing: .02em; }
.buddy__txt { color: var(--text-muted); font-weight: 600; }
.buddy-sheet__panel { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.buddy-panel .tp { margin: 6px 0 8px; }
.sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); margin: 6px auto 8px; }
@media (max-width: 600px) {
  .buddy { margin-left: auto; height: 30px; padding: 0 9px 0 5px; font-size: .7rem; }
  .buddy__txt { display: none; }
  .site-header__inner { flex-wrap: wrap; }
}
@media (min-width: 601px) { .buddy { order: 0; } }
/* 相棒レベル・クエスト */
.tp__level { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .78rem; color: var(--text-muted); margin: 2px 0; }
.tp__badge { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: .74rem; letter-spacing: .04em; }
.tp__badge--2 { border-color: var(--accent); color: var(--accent); }
.tp__badge--3 { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tp__badge--4 { background: var(--accent); border-color: var(--accent); color: #080f1f; }
.tp__badge--5 { background: linear-gradient(90deg, var(--accent), var(--accent-warm)); border-color: transparent; color: #080f1f; }
.tp__pts { font-weight: 700; color: var(--text); }
.tp__buddy { flex-basis: 100%; color: var(--text); }
.welcome__box--quests { max-width: 560px; padding-top: 28px; text-align: left; }
.welcome__box--quests .welcome__title { text-align: center; font-size: 1.15rem; }
.qlevel { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); margin: 0 0 10px; font-size: .82rem; }
.qlevel strong { font-size: 1rem; }
.qlevel__bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.qlevel__bar span { display: block; height: 100%; background: var(--accent); }
.qlevel small { color: var(--text-muted); }
.qtabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.qtab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text-muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qtab.is-active { background: linear-gradient(135deg, #b9a3ff, var(--accent)); border-color: transparent; color: #080f1f; box-shadow: 0 6px 18px rgba(179, 164, 255,.35); }
.qtab__n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .7rem; display: grid; place-items: center; }
.qtab.is-active .qtab__n { background: rgba(0,0,0,.18); }
.quests { max-height: min(50vh, 440px); overflow-y: auto; padding-right: 4px; }
/* 相棒パネルのクエスト導線 */
.tp__questcta { display: grid; gap: 2px; width: 100%; margin: 8px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border); background: linear-gradient(135deg, rgba(179, 164, 255,.28), rgba(179, 164, 255,.08)); color: var(--text); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 0 28px rgba(179, 164, 255,.18); position: relative; overflow: hidden; }
.tp__questcta::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--accent); }
.tp__questcta-main { font-weight: 800; font-size: .95rem; }
.tp__questcta-next { font-size: .76rem; color: var(--text-muted); padding-right: 20px; }
.quests__group { font-size: .78rem; color: var(--text-muted); margin: 6px 0 2px; letter-spacing: .06em; }
.quest { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.quest.is-done { opacity: .55; }
.quest__main { display: grid; gap: 3px; min-width: 0; }
.quest__title { font-size: .9rem; font-weight: 600; }
.quest__title small { font-weight: 500; color: var(--text-muted); margin-left: 4px; white-space: nowrap; }
.quest__desc { font-size: .74rem; color: var(--text-muted); }
.quest__bar { display: block; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-top: 2px; }
.quest__bar span { display: block; height: 100%; background: var(--accent); }
.quest__side { display: grid; justify-items: end; gap: 4px; }
.quest__pts { font-weight: 800; color: var(--accent); font-size: .9rem; }
.quest.is-done .quest__pts { color: var(--positive, #54d6a0); }
.quest__prog { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#taste-report h3 { font-size: .86rem; color: var(--text-muted); margin: 14px 0 6px; letter-spacing: .04em; }
#taste-report .bars { margin-bottom: 4px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.share__label { font-size: .76rem; color: var(--text-muted); margin-right: 2px; }
.share .chip { text-decoration: none; }
.welcome__note { margin: 12px 0 0; font-size: .74rem; color: var(--text-muted); }

/* ---- パーソナライズ進捗 ---- */
.tp { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border); }
.tp__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.tp__bar span { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.tp--on .tp__bar span { background: var(--positive, #54d6a0); }
.tp__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp__text strong { font-size: .88rem; }
.tp__text span { font-size: .76rem; color: var(--text-muted); }
.tp__feed { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: .8rem; font-weight: 600; }
.tp__feed:hover { border-color: var(--accent); color: var(--accent); }

/* ---- トースト ---- */
.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); transform: translate(-50%, 12px); z-index: 500; padding: 10px 16px; border-radius: 999px; background: rgba(20,20,26,.96); border: 1px solid var(--border); color: var(--text); font-size: .86rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 601px) { .toast { bottom: 28px; } }
@media (max-width: 600px) {
  .welcome__box { padding: 30px 20px 20px; }
  .tp { padding: 8px 12px; margin: 10px 0 2px; grid-template-columns: 1fr; }
  .tp__actions { justify-content: flex-start; }
  .tp__feed { padding: 5px 10px; font-size: .76rem; }
}

/* ---- 下部ナビの SVG アイコン ---- */
.bottom-nav__icon svg { width: 24px; height: 24px; display: block; }
.bottom-nav__item.is-active .bottom-nav__icon svg { stroke-width: 2.2; }

/* ---- ゲームの対応 OS 絞り込み ---- */
.chips--os { padding-top: 0 !important; margin-top: -4px; }
.chip--sm { padding: 4px 10px; font-size: .78rem; }
.chips--os .chips__label { display: inline; font-size: .72rem; margin-right: 2px; }

/* ---- 探す（ジャンル／女優） ---- */
.explore { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 8px; }
.explore__btn { border-style: dashed; }
.explore__panel { flex-basis: 100%; padding: 10px 0 4px; border-top: 1px dashed var(--border); margin-top: 4px; }
.explore__panel[hidden] { display: none; }
.explore__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.explore__status { margin: 0; color: var(--text-muted); font-size: .84rem; }
.explore__search { display: flex; gap: 6px; max-width: 420px; margin-bottom: 8px; }
.explore__input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); }
.explore__kana { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.explore__result { display: flex; flex-wrap: wrap; gap: 8px; }
.actress { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: .86rem; }
.actress:hover { border-color: var(--accent); color: var(--accent); }
.actress img, .actress__ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--bg-card); display: grid; place-items: center; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 600px) { .explore { padding-bottom: 6px; } .explore__panel { padding-top: 8px; } }

/* =====================================================================
   ふわっとしたフェードイン演出（サイト全体で統一）
   ===================================================================== */
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sk-ch { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ページ本体 */
main { animation: sk-fade .55s ease-out both; }
/* スクロール連動: .rv は画面に入ると .is-visible になり、ふわっと浮かび上がる（common.js initScrollReveal） */
.rv { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); transition: opacity 1.6s cubic-bezier(.22,.61,.36,1), transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.2s ease-out; will-change: opacity, transform, filter; }   /* 2026-09-20 ユーザー指示「もっとふわっと」: 大きく動かすより、ぼやけた状態から輪郭が結ばれつつ静かに浮き上がる */
.rv.is-visible { opacity: 1; transform: none; filter: none; }
.rv.is-visible.rv-done { will-change: auto; filter: none; }
.rv-off .rv { opacity: 1; transform: none; transition: none; }
.grid > .card.skeleton { animation: pulse 1.2s ease-in-out infinite; }
/* チップ・タブ */
.catbar .chip, .sorttab, .explore__chips .chip, .actress { animation: sk-fade .4s ease-out both; }

/* 年齢確認・ウェルカム */
.age-gate.is-in { animation: sk-fade .6s ease-out both; }
.age-gate__box.is-in { animation: sk-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .15s; }
.age-gate__actions, .age-gate__note, .age-gate__remember { animation: sk-fade .6s ease-out both; animation-delay: 1.6s; }
.welcome.is-in { animation: sk-fade .45s ease-out both; }
.welcome__box.is-in { animation: sk-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.welcome__icon { animation: sk-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.welcome__dots, .welcome__next, .welcome__note { animation: sk-fade .5s ease-out both; animation-delay: 1.4s; }

/* 一文字ずつ */
.reveal .ch { display: inline-block; opacity: 0; animation: sk-ch .5s ease-out both; white-space: pre; }
.reveal .ch:empty { display: inline; }

/* シート・トースト・下部ナビ */
.sheet__panel { animation: sk-rise .3s ease-out both; }
.bottom-nav { animation: sk-fade .5s ease-out both; }
/* ショート: 画面に来たスライドだけ、下から情報と操作ボタンが浮かび上がる。IO が発火しない環境の保険として最初の 1 枚は常に表示 */
/* 2026-09-22 ユーザー指示「ザッピングとショートの表示アニメーションを他と統一」: 他ページの .rv（ぼやけた状態から輪郭が結ばれつつ静かに浮き上がる）と同じ値・同じ曲線。女優ザッピング（.zslide__info / .zslide__rail）も同じ */
.slide__info, .slide__rail, .zslide__info, .zslide__rail { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); transition: opacity 1.6s cubic-bezier(.22,.61,.36,1) .1s, transform 1.8s cubic-bezier(.16,1,.3,1) .1s, filter 1.2s ease-out .1s; will-change: opacity, transform, filter; }
.slide.is-active .slide__info, .slide.is-active .slide__rail, .slide:first-child .slide__info, .slide:first-child .slide__rail,
.zslide.is-active .zslide__info, .zslide.is-active .zslide__rail, .zslide:first-child .zslide__info, .zslide:first-child .zslide__rail { opacity: 1; transform: none; filter: none; }
.tray { animation: sk-rise .45s ease-out both; }
.rv-off .slide__info, .rv-off .slide__rail, .rv-off .zslide__info, .rv-off .zslide__rail { opacity: 1; transform: none; filter: none; transition: none; }
/* ボタン類（並び替え・もっと見る・絞り込み）は行ごと .rv で出るので個別アニメは無し */

/* ホーム画面に追加（A2HS）: ガラスのカード、ゆらめく光輪、流れる光沢、浮遊するアイコン */
.a2hs { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: flex-end; justify-content: center; padding: 16px; opacity: 0; transition: opacity .45s ease; }
.a2hs.is-in { opacity: 1; }
.a2hs.is-out { opacity: 0; }
.a2hs__veil { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 100%, rgba(179, 164, 255,.22), rgba(6,6,9,.55) 45%, rgba(6,6,9,.9)); backdrop-filter: blur(8px); }
.a2hs__card { position: relative; width: 100%; max-width: 440px; padding: 30px 24px 18px; border-radius: 22px; overflow: hidden; text-align: center;
  background: linear-gradient(165deg, rgba(30,28,40,.92), rgba(14,13,20,.96)); border: 1px solid rgba(179, 164, 255,.35);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(179, 164, 255,.12);
  transform: translateY(40px) scale(.96); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.a2hs.is-in .a2hs__card { transform: none; }
.a2hs.is-out .a2hs__card { transform: translateY(30px) scale(.97); transition-duration: .4s; }
.a2hs__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, rgba(179, 164, 255,.14) 50%, rgba(255,255,255,.07) 55%, transparent 70%); background-size: 260% 100%; animation: a2hs-sheen 5.5s ease-in-out infinite; pointer-events: none; }
.a2hs__glow { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.a2hs__glow--1 { width: 260px; height: 260px; left: -70px; top: -90px; background: radial-gradient(circle, rgba(179, 164, 255,.45), transparent 65%); animation: a2hs-drift 9s ease-in-out infinite; }
.a2hs__glow--2 { width: 220px; height: 220px; right: -80px; bottom: -60px; background: radial-gradient(circle, rgba(216,201,167,.28), transparent 65%); animation: a2hs-drift 11s ease-in-out infinite reverse; }
.a2hs__spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(179, 164, 255,.8); opacity: 0; left: 18%; top: 30%; animation: a2hs-spark 4.2s ease-in-out infinite; }
.a2hs__spark--2 { left: 78%; top: 22%; animation-delay: 1.1s; animation-duration: 5s; }
.a2hs__spark--3 { left: 64%; top: 58%; animation-delay: 2.3s; animation-duration: 4.6s; }
.a2hs__spark--4 { left: 28%; top: 66%; animation-delay: 3.1s; animation-duration: 5.4s; }
.a2hs__close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
.a2hs__icon { position: relative; width: 96px; height: 96px; margin: 4px auto 14px; animation: a2hs-float 4.5s ease-in-out infinite; }
.a2hs__icon img { width: 84px; height: 84px; border-radius: 20px; position: absolute; left: 6px; top: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.a2hs__ring { position: absolute; inset: -2px; border-radius: 26px; border: 1px solid rgba(179, 164, 255,.55); animation: a2hs-ring 2.8s ease-out infinite; }
.a2hs__eyebrow { margin: 0 0 4px; font-size: .68rem; letter-spacing: .32em; color: var(--accent); font-weight: 600; }
.a2hs__title { margin: 0 0 8px; font-size: 1.45rem; letter-spacing: .02em; }
.a2hs__body { margin: 0 0 16px; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.a2hs__btn { width: 100%; padding: 13px 16px; font-size: 1rem; box-shadow: 0 10px 30px rgba(179, 164, 255,.35); }
.a2hs__steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; text-align: left; }
.a2hs__steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: .9rem; animation: sk-rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: 1.3s; }
.a2hs__steps li + li { animation-delay: 1.55s; }
.a2hs__step { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--accent); color: #080f1f; }
.a2hs__later { margin-top: 8px; background: none; border: 0; color: var(--text-muted); font-size: .84rem; cursor: pointer; padding: 8px; }
.a2hs__note { margin: 4px 0 0; font-size: .7rem; color: var(--text-muted); }
@keyframes a2hs-sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -140% 0; } }
@keyframes a2hs-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22px, 14px) scale(1.12); } }
@keyframes a2hs-spark { 0%, 100% { opacity: 0; transform: translateY(6px) scale(.6); } 40% { opacity: .95; transform: translateY(-10px) scale(1); } 70% { opacity: .4; } }
@keyframes a2hs-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.2deg); } }
@keyframes a2hs-ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (min-width: 601px) { .a2hs { align-items: center; } }

@media (prefers-reduced-motion: reduce) {
  .a2hs, .a2hs__card, .a2hs__card::before, .a2hs__glow, .a2hs__spark, .a2hs__icon, .a2hs__ring, .a2hs__steps li { animation: none !important; transition: none !important; opacity: 1; transform: none !important; }
  .a2hs__spark, .a2hs__ring { display: none; }
  main, .catbar .chip, .sorttab, .explore__chips .chip, .actress,
  .age-gate.is-in, .age-gate__box.is-in, .age-gate__actions, .age-gate__note, .welcome.is-in, .welcome__box.is-in, .welcome__icon, .welcome__dots, .welcome__next, .welcome__note,
  .reveal .ch, .sheet__panel, .bottom-nav, .slide__info, .slide__rail, .zslide__info, .zslide__rail, .tray { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ---- 性癖から探す・さらに絞る ---- */
.kink { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.kink__label { flex-shrink: 0; width: 84px; padding-top: 5px; font-size: .72rem; color: var(--text-muted); letter-spacing: .03em; }
.refine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.refine[hidden] { display: none; }
.refine .chips__label { font-size: .72rem; color: var(--text-muted); margin-right: 2px; }
@media (max-width: 600px) { .kink { flex-direction: column; gap: 4px; } .kink__label { width: auto; padding-top: 0; } }

/* =====================================================================
   テーマ「グラス＆グロー」（2026-09-16、ホーム画面追加ポップアップ .a2hs の世界観を全体へ）
   - 面: 暗いガラス（斜めグラデーション＋ラベンダーの細い縁＋内側のハイライト＋深い影）
   - 光: 画面全体に漂う 2 つの光輪、主要な面に流れる光沢（sheen）、火花はモーダルだけ
   - 動き: 浮遊（ロゴ・アイコン）、ホバーでわずかに浮く、リング
   - 性能: backdrop-filter は固定 UI（ヘッダー・下部ナビ・シート・トースト・ベール）だけ。カードはグラデーションのみ
   ===================================================================== */
:root {
  --glass: linear-gradient(165deg, rgba(30,28,40,.86), rgba(14,13,20,.94));
  --glass-strong: linear-gradient(165deg, rgba(34,31,46,.94), rgba(14,13,20,.98));
  --glass-border: rgba(179, 164, 255,.28);
  /* ミアの吹き出し（ふわふわの雲） */
  --cloud: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 40%, rgba(255,214,235,.06)), linear-gradient(165deg, rgba(48,42,66,.96), rgba(26,23,38,.98));
  --cloud-border: rgba(255,232,244,.28);
  --cloud-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 24px rgba(214,190,255,.14), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(255,255,255,.03);
  --glass-border-soft: rgba(179, 164, 255,.16);
  --glass-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 40px rgba(179, 164, 255,.08);
  --glass-shadow-soft: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  --glow-btn: 0 10px 30px rgba(179, 164, 255,.35);
}
/* 漂う光輪（固定・合成は 1 回。本文の下に敷く） */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(60px);
}
body::before { width: 62vmax; height: 62vmax; left: -22vmax; top: -24vmax; background: radial-gradient(circle, rgba(179, 164, 255,.22), transparent 62%); animation: a2hs-drift 16s ease-in-out infinite; }
body::after { width: 54vmax; height: 54vmax; right: -20vmax; bottom: -22vmax; background: radial-gradient(circle, rgba(216,201,167,.13), transparent 62%); animation: a2hs-drift 21s ease-in-out infinite reverse; }
body { background-color: #08080c; }

/* 面（カード・ブロック・パネル） */
.sec, .tp, .status--demo, .kpi, .block, .decision, .pricing, .work__library, .work__related, .work__wide, .work__samples, .watch,
.explore__panel, .page__toc, .qlevel, .pref-toggle, .compare, .refine, .hub-head, .trend, #taste-report, .work__offer, .price {
  background: var(--glass); border: 1px solid var(--glass-border-soft); border-radius: 16px; box-shadow: var(--glass-shadow-soft);
}
.sec { padding: 14px 14px 10px; margin: 18px 0 10px; }
.sec > .grid { margin: 0; }
.tp { border-radius: 16px; border-color: var(--glass-border); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; }
.tp::before, .age-gate__box::after, .welcome__box::before, .kpi::before, .slide__salebox::before, .qlevel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, rgba(179, 164, 255,.12) 50%, rgba(255,255,255,.06) 55%, transparent 70%);
  background-size: 260% 100%; animation: a2hs-sheen 6.5s ease-in-out infinite;
}
.kpi, .qlevel, .slide__salebox { position: relative; overflow: hidden; }
.status--demo { border-color: rgba(216,201,167,.35); background: linear-gradient(165deg, rgba(48,42,30,.8), rgba(20,18,14,.95)); color: var(--accent-warm); }
.note { border-left: 0; padding: 10px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); box-shadow: none; }
.refine, .hub-head { padding: 10px 12px; }
.trend { padding: 12px 14px; margin-bottom: 14px; }
#taste-report { padding: 12px 14px; }
.compare { border-radius: 12px; overflow: hidden; }

/* カード: サムネがガラスのタイル、ホバーで浮く */
.card__thumb { border: 1px solid var(--glass-border-soft); border-radius: 12px; background: var(--glass); box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.card:hover .card__thumb { transform: translateY(-3px); border-color: var(--glass-border); box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(179, 164, 255,.16); }
.card__thumb--placeholder { background: var(--glass); }

/* ボタン・チップ */
.btn--primary { background: linear-gradient(135deg, #b9a3ff, var(--accent) 60%, #8f76e6); color: #080f1f; box-shadow: var(--glow-btn); border: 0; }
.btn--primary:hover { background: linear-gradient(135deg, #c8b6ff, #b39cff 60%, #9a83ee); box-shadow: 0 14px 36px rgba(179, 164, 255,.45); }
.btn--outline, .btn--ghost, .tp__feed, .rail__more, .sorttab, .tab, .slide__link:not(.slide__link--primary):not(.slide__link--sale) { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.btn--outline:hover, .tp__feed:hover, .sorttab:hover, .tab:hover { border-color: var(--glass-border); color: var(--text); }
.sorttab.is-active, .tab.is-active { background: var(--accent-soft); border-color: var(--glass-border); color: var(--text); }
.chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); backdrop-filter: none; }
.chip:hover { border-color: var(--glass-border); }
.chip.is-active { background: linear-gradient(135deg, #b9a3ff, var(--accent)); border-color: transparent; color: #080f1f; box-shadow: 0 6px 18px rgba(179, 164, 255,.35); }
.cattab.is-active { border-bottom-color: var(--accent); text-shadow: 0 0 18px rgba(179, 164, 255,.55); }

/* ヘッダー・カテゴリ行・検索 */
.site-header { background: rgba(8,8,12,.72); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(179, 164, 255,.14); }
.catbar { background: rgba(8,8,12,.72); backdrop-filter: blur(16px); border-bottom-color: rgba(179, 164, 255,.1); position: static; top: auto; }   /* カテゴリ行は固定しない（ヘッダーだけ残す） */
.hsearch__input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.hsearch__input:focus { border-color: var(--glass-border); box-shadow: 0 0 0 3px rgba(179, 164, 255,.14); }
.brand__mark { position: relative; }
.brand__mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(179, 164, 255,.28), transparent 65%); z-index: -1; filter: blur(4px); }
.brand__mark img { animation: a2hs-float 6s ease-in-out infinite; }

/* 年齢確認・ウェルカム・クエスト・好みの種: .a2hs と同じカード */
.age-gate { background: radial-gradient(120% 80% at 50% 100%, rgba(179, 164, 255,.22), rgba(6,6,9,.55) 45%, rgba(6,6,9,.9)); backdrop-filter: blur(8px); }
.age-gate__box, .welcome__box { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(179, 164, 255,.12); position: relative; overflow: hidden; }
.age-gate__box::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(179, 164, 255,.7), rgba(255,255,255,.5), transparent); }
.age-gate__brand img, .welcome__brand img { animation: a2hs-float 4.5s ease-in-out infinite; }
.age-gate__brand, .welcome__brand { position: relative; }
.age-gate__badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.welcome { background: radial-gradient(120% 80% at 50% 100%, rgba(179, 164, 255,.2), rgba(6,6,9,.6) 45%, rgba(6,6,9,.92)); backdrop-filter: blur(8px); }
.welcome__icon { background: linear-gradient(135deg, rgba(179, 164, 255,.28), rgba(179, 164, 255,.08)); border: 1px solid var(--glass-border); box-shadow: 0 0 28px rgba(179, 164, 255,.25); animation: a2hs-float 4.5s ease-in-out infinite; }
/* モーダルの光輪と火花（.a2hs と同じ部品を年齢確認・ウェルカムに） */
.age-gate__box .fx, .welcome__box .fx { position: absolute; border-radius: 50%; pointer-events: none; }
.fx--glow1 { width: 260px; height: 260px; left: -70px; top: -90px; filter: blur(30px); background: radial-gradient(circle, rgba(179, 164, 255,.45), transparent 65%); animation: a2hs-drift 9s ease-in-out infinite; }
.fx--glow2 { width: 220px; height: 220px; right: -80px; bottom: -60px; filter: blur(30px); background: radial-gradient(circle, rgba(216,201,167,.28), transparent 65%); animation: a2hs-drift 11s ease-in-out infinite reverse; }
.fx--spark { width: 4px; height: 4px; background: #fff; box-shadow: 0 0 10px 2px rgba(179, 164, 255,.8); opacity: 0; left: 18%; top: 30%; animation: a2hs-spark 4.2s ease-in-out infinite; }
.fx--spark2 { left: 78%; top: 22%; animation-delay: 1.1s; animation-duration: 5s; }
.fx--spark3 { left: 64%; top: 58%; animation-delay: 2.3s; animation-duration: 4.6s; }
.fx--spark4 { left: 28%; top: 66%; animation-delay: 3.1s; animation-duration: 5.4s; }

/* 下部ナビ・シート・トースト・トレイ */
@media (max-width: 600px) {
  .bottom-nav { background: rgba(8,8,12,.78); backdrop-filter: blur(18px); border-top: 1px solid rgba(179, 164, 255,.16); box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
  .bottom-nav__item.is-active { color: var(--accent); text-shadow: 0 0 14px rgba(179, 164, 255,.6); }
  .bottom-nav__item.is-active .bottom-nav__icon { filter: drop-shadow(0 0 8px rgba(179, 164, 255,.6)); }
}
.sheet__panel { background: var(--glass-strong); border-top: 1px solid var(--glass-border); backdrop-filter: blur(18px); box-shadow: 0 -20px 60px rgba(0,0,0,.6), 0 0 40px rgba(179, 164, 255,.1); }
.toast { background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 24px rgba(179, 164, 255,.18); }
.tray { background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); box-shadow: 0 -10px 40px rgba(0,0,0,.5), 0 0 30px rgba(179, 164, 255,.12); }
.welcome__box--quests .quest, .seeds__group { position: relative; }

/* フッター */
.site-footer { background: linear-gradient(180deg, transparent, rgba(179, 164, 255,.05)); border-top: 1px solid rgba(179, 164, 255,.12); }
.site-footer__brand img { animation: a2hs-float 6s ease-in-out infinite; }
.site-footer__social { margin: -6px 0 14px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text-muted); font-size: .78rem; text-decoration: none; }
.site-footer__social a:hover { color: var(--text); border-color: var(--glass-border); }

/* ショート（feed）: 情報ボックスをガラスに */
.slide__info { padding: 8px 10px; border-radius: 12px; background: linear-gradient(165deg, rgba(20,18,28,.5), rgba(8,8,12,.66)); border: 1px solid rgba(179, 164, 255,.16); backdrop-filter: blur(6px); }
.slide__btn span { background: rgba(8,8,12,.55); border: 1px solid rgba(179, 164, 255,.22); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.slide__btn.is-on span { box-shadow: 0 0 22px rgba(179, 164, 255,.5); }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .tp::before, .age-gate__box::after, .welcome__box::before, .kpi::before, .slide__salebox::before, .qlevel::before,
  .brand__mark img, .age-gate__brand img, .welcome__brand img, .welcome__icon, .site-footer__brand img, .fx { animation: none !important; }
  .fx--spark, .fx--spark2, .fx--spark3, .fx--spark4 { display: none; }
}

/* ---------- ミアの紹介ページ（mia.html）: シルク＆グロー ---------- */
.mp { position: relative; isolation: isolate; }
.mp__silk { position: absolute; inset: -40px -20px 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 32px;
  background: radial-gradient(60% 50% at 20% 10%, rgba(255,182,206,.16), transparent 70%), radial-gradient(50% 40% at 85% 25%, rgba(179, 164, 255,.18), transparent 70%), radial-gradient(45% 45% at 60% 90%, rgba(255,222,180,.10), transparent 70%); }
.mp__sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, rgba(255,235,245,.10) 50%, rgba(255,255,255,.05) 55%, transparent 70%); }   /* 動かさない（全面の再描画が重いため） */
@keyframes mp-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.mp__spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,200,230,.55); opacity: 0; animation: mp-spark 6s ease-in-out infinite; }
.mp__spark--1 { left: 12%; top: 18%; } .mp__spark--2 { left: 78%; top: 12%; animation-delay: 1.5s; } .mp__spark--3 { left: 64%; top: 60%; animation-delay: 3s; } .mp__spark--4 { left: 28%; top: 72%; animation-delay: 4.5s; }
@keyframes mp-spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
.mp__hero { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 28px; align-items: center; padding: 28px 8px 12px; }
.mp__figure { position: relative; margin: 0; }
.mp__figure img, .mp__figure > .mia { position: relative; width: 100%; height: auto; display: block; animation: a2hs-float 5.5s ease-in-out infinite; will-change: transform; }
.mp__figure > .mia--full { --mia-size: 100%; width: 100%; height: auto; aspect-ratio: 1; filter: none; }   /* filter は付けない（アニメ中の drop-shadow は重い） */
.mp__halo { position: absolute; inset: 8% 4% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255,205,225,.30), rgba(179, 164, 255,.20) 45%, transparent 72%); }
.mp__eyebrow { margin: 0 0 6px; font-size: .68rem; letter-spacing: .32em; color: var(--accent-gold); font-weight: 700; }
.mp__name { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; line-height: 1; }
.mp__name-ja { font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 800; letter-spacing: .06em; background: linear-gradient(95deg, #ffd6e6, #e9d5ff 45%, #ffe7c9); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(255,190,220,.25); }
.mp__name-en { font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif; font-style: italic; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--text-muted); letter-spacing: .12em; }
.mp__tag { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.mp__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.mp__chips li { padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--text); background: linear-gradient(135deg, rgba(255,182,206,.16), rgba(179, 164, 255,.14)); border: 1px solid rgba(255,214,230,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.mp__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.mp__live { margin: 14px 0 0; font-size: .88rem; color: #ffd6e6; font-weight: 600; min-height: 1.4em; }
.mp__sec { margin: 34px 0 0; }
.mp__h2 { font-size: 1.25rem; margin: 0 0 8px; letter-spacing: .04em; background: linear-gradient(95deg, #ffd6e6, #e9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mp__lead { margin: 0 0 16px; color: var(--text-muted); line-height: 1.7; }
.mp__lead strong { color: #ffd6e6; }
.mp__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp__tier { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border-soft); opacity: .78; transition: opacity .3s, transform .3s; }
.mp__tier .mia { flex: none; }
.mp__tier > div { flex: 1; min-width: 0; }
.mp__tier.is-done { opacity: .92; }
.mp__tier.is-now { opacity: 1; border-color: rgba(255,214,230,.5); box-shadow: 0 0 0 1px rgba(255,214,230,.2), 0 12px 34px rgba(255,182,206,.14); transform: translateX(4px); }
.mp__tier-lv { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-weight: 800; font-size: .86rem; letter-spacing: .04em; }
.mp__tier-lv em { font-style: normal; font-size: .62rem; padding: 1px 8px; border-radius: 999px; background: linear-gradient(90deg, #ffd6e6, #e9d5ff); color: #080f1f; }
.mp__tier .mia-speech { font-size: .82rem; }
.mp__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mp__card { padding: 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border-soft); position: relative; overflow: hidden; }
.mp__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,235,245,.07) 50%, transparent 60%); pointer-events: none; }
.mp__card h3 { margin: 0 0 6px; font-size: .98rem; color: #ffd6e6; }
.mp__card p { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--text-muted); }
.mp__rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mp__rail figure { flex: 0 0 200px; margin: 0; scroll-snap-align: start; padding: 10px; border-radius: 18px; background: linear-gradient(165deg, rgba(255,182,206,.10), rgba(179, 164, 255,.08)), var(--glass); border: 1px solid rgba(255,214,230,.16); }
.mp__rail img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: radial-gradient(circle at 50% 42%, rgba(255,205,225,.16), transparent 70%); border-radius: 12px; transition: transform .4s; }
.mp__rail figure:hover img { transform: scale(1.04); }
.mp__rail figure.is-scene img { background: none; }
.mp__rail figcaption { margin-top: 8px; text-align: center; font-size: .76rem; color: var(--text-muted); }
.mp__more { text-align: right; margin: 0; font-size: .86rem; }
.mp__toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mp__toggle > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.mp__toggle small { color: var(--text-muted); font-size: .78rem; }
.mp__toggle.is-active .sheet__switch { background: var(--accent); }
.sidebar__item.is-active .sheet__switch::after, .mp__toggle.is-active .sheet__switch::after { transform: translateX(16px); }
.mp__profile dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin: 0; padding: 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.mp__profile dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--glass-border-soft); font-size: .84rem; }
.mp__profile dt { color: #ffd6e6; font-weight: 700; } .mp__profile dd { margin: 0; color: var(--text); }
.mp__now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp__now-card { padding: 14px; border-radius: 18px; background: linear-gradient(165deg, rgba(255,182,206,.10), rgba(179, 164, 255,.08)), var(--glass); border: 1px solid rgba(255,214,230,.18); display: flex; flex-direction: column; gap: 6px; }
.mp__now-k { font-size: .66rem; letter-spacing: .2em; color: var(--accent-gold); font-weight: 800; }
.mp__now-card strong { font-size: 1rem; color: #ffd6e6; }
.mp__now-card .mia-speech { font-size: .8rem; margin-top: 4px; }
.mp__now-card .mia-speech--left::before, .mp__now-card .mia-speech--left::after { display: none; }
.mp__now-why { grid-column: 1 / -1; margin: 4px 0 0; font-size: .8rem; color: var(--text-muted); }
.mp__xp { margin: 10px 0 0; font-size: .84rem; color: #ffd6e6; font-weight: 700; }
.mp__story p { margin: 0 0 12px; line-height: 1.85; color: var(--text); font-size: .92rem; }
.mp__story p::first-letter { color: #ffd6e6; font-weight: 700; }
@media (max-width: 700px) { .mp__profile dl, .mp__now { grid-template-columns: 1fr; } }
.mp__note { margin: 14px 0 0; font-size: .78rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 700px) { .mp__hero { grid-template-columns: 1fr; text-align: center; padding-top: 12px; } .mp__figure { max-width: 300px; margin: 0 auto; } .mp__name, .mp__chips, .mp__cta { justify-content: center; } .mp__grid { grid-template-columns: 1fr; } .mp__silk { inset: 0 -12px 0; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .mp__sheen, .mp__spark, .mp__figure img, .mp__halo, .mp__card::before { animation: none !important; } }

/* ---------- X 投稿（運営用 x.html） ---------- */
.xp__sec { margin: 24px 0 0; }
.xp__kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.xp__cands { display: grid; gap: 8px; margin: 0 0 12px; }
.xp__cand { text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border-soft); color: var(--text); font: inherit; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; cursor: pointer; }
.xp__cand:hover { border-color: var(--accent); }
.xp__cand-k { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 700; }
.xp__text { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text); font: inherit; font-size: .92rem; line-height: 1.6; resize: vertical; }
.xp__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.xp__count { font-size: .8rem; color: var(--text-muted); } .xp__count.is-over { color: #ff8a9c; font-weight: 700; }
.xp__result { font-size: .88rem; color: var(--accent); word-break: break-all; }
.xp__how { padding-left: 1.2em; font-size: .88rem; line-height: 1.7; color: var(--text-muted); }
.xp__log table { width: 100%; border-collapse: collapse; font-size: .8rem; } .xp__log th, .xp__log td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--glass-border-soft); vertical-align: top; }
.xp__logtext { white-space: pre-wrap; max-width: 420px; }

/* ---------- 運営ログイン ---------- */
.admin-login { display: grid; gap: 10px; max-width: 420px; padding: 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); margin: 0 0 16px; }
.admin-login__lead { margin: 0; font-size: .88rem; color: var(--text-muted); }
.admin-login__row { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.admin-login__row input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text); font: inherit; }
.admin-login__msg { color: #ff8a9c; font-size: .8rem; }
.admin-login__ok { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--text-muted); margin: 0 0 12px; }

/* ---------- ミアの手書き風（Yomogi、assets/fonts/yomogi.css でセルフホスト。女の子の丸い手書き）: ミアが語る場所だけに使う ---------- */
:root { --font-mia: var(--font); }   /* 2026-09-20 ユーザー指示: 手書き風（Yomogi）は廃止。書体は全ページ統一 */
.page--column, .page--note, .mp, .mia-speech, .mia__bubble, .tp__mia, .column-card, .note-cta { font-family: var(--font-mia); }
.page--column, .page--note { font-size: 1.05rem; line-height: 2; letter-spacing: .02em; }
.page--column h1, .page--note h1 { font-size: 1.7rem; letter-spacing: .02em; }
.page--column h2, .page--note h2 { font-size: 1.28rem; }
.page--column p, .page--note p, .page--column li, .page--note li { color: var(--text); }
.page--column code, .page--note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.mp__tag, .mp__lead, .mp__card p, .mp__story p, .mp__profile dd { font-family: var(--font-mia); }
.mp__story p { font-size: 1.02rem; line-height: 2; }
/* ノートの挿絵・つぶやき */
.note-fig { margin: 22px 0; padding: 12px; border-radius: 20px; background: linear-gradient(165deg, rgba(255,182,206,.10), rgba(179, 164, 255,.08)), var(--glass); border: 1px solid rgba(255,214,230,.18); }
.note-fig img { display: block; width: min(100%, 360px); margin: 0 auto; border-radius: 14px; }
.note-fig video { display: block; width: min(100%, 360px); margin: 0 auto; border-radius: 14px; background: #080f1f; }
.col-key { margin: 22px 0; padding: 14px 18px 14px 20px; border-radius: 16px; border-left: 4px solid #ffb6ce; background: linear-gradient(165deg, rgba(255,182,206,.12), rgba(179, 164, 255,.08)), var(--glass); font-size: 1.02rem; line-height: 1.9; font-weight: 600; }
.col-key strong { color: #ffd6e6; }
.note-fig figcaption { margin-top: 10px; text-align: center; font-size: .92rem; color: #ffd6e6; }
.note-aside { position: relative; margin: 22px 0 22px 18px; padding: 14px 16px 12px; border-radius: 26px 30px 28px 24px / 30px 26px 24px 30px; background: var(--cloud); border: 1px solid var(--cloud-border); box-shadow: var(--cloud-shadow); }
.note-aside::before { content: ""; position: absolute; left: -12px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); }
.note-aside::after { content: ""; position: absolute; left: -22px; top: 36px; width: 7px; height: 7px; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); }
.note-aside__who { display: inline-block; margin-bottom: 4px; padding: 1px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffd6e6, #e9d5ff); color: #080f1f; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.note-aside p { margin: 0; font-size: .98rem; line-height: 1.85; }

/* ---------- きせかえ（mia.html） ---------- */
.dress { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; padding: 16px; border-radius: 20px; background: linear-gradient(165deg, rgba(255,182,206,.10), rgba(179, 164, 255,.08)), var(--glass); border: 1px solid rgba(255,214,230,.18); }
.dress__preview { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dress__preview .mia--full { --mia-size: 300px; width: 300px; height: 300px; }
.dress__bust { display: flex; align-items: center; gap: 10px; font-size: .74rem; color: var(--text-muted); }
.dress__bust .mia { animation: none; }
.dress__label { margin: 8px 0 6px; font-size: .7rem; letter-spacing: .2em; color: var(--accent-gold); font-weight: 800; }
.dress__row { display: flex; flex-wrap: wrap; gap: 6px; }
.dress__row .chip[disabled] { opacity: .5; cursor: not-allowed; }
#dress-poses[hidden] { display: none; } #dress-poses-wrap:has(#dress-poses[hidden]) { display: none; }
.dress__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dress__msg { font-size: .82rem; color: #ffd6e6; }
@media (max-width: 700px) { .dress { grid-template-columns: 1fr; } .dress__preview .mia--full { --mia-size: 240px; width: 240px; height: 240px; } }

/* キービジュアル（Grok で生成した 16:9 の情景。2026-09-18。assets/brand/kv-*.jpg。DMM の画像とは混ぜない＝自社コンテンツだけの面） */
.mp__kv { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,214,230,.18); box-shadow: 0 24px 60px rgba(0,0,0,.45); aspect-ratio: 16/9; background: #14111c; }
.mp__kv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp__kv-copy { position: absolute; left: 6%; bottom: 10%; max-width: 46%; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.mp__kv-copy .mp__eyebrow { color: var(--accent-gold); }
.mp__kv-line { margin: 0; font-family: var(--font-mia); font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1.25; letter-spacing: .02em; }
.mp__kv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.mp__kv-row figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,214,230,.14); background: #14111c; }
.mp__kv-row img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: transform .6s ease; }
.mp__kv-row figure:hover img { transform: scale(1.04); }
.mp__kv-row figcaption { padding: 8px 12px; font-family: var(--font-mia); font-size: .92rem; color: var(--text-muted); }
@media (max-width: 700px) { .mp__kv-copy { max-width: 60%; left: 5%; bottom: 7%; } .mp__kv-row { grid-template-columns: 1fr; } }
/* ヒーローの動画（6 秒ループ。再生できない・reduced-motion のときは静止画 .mp__kv-still を見せる） */
.mp__kv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mp__kv-still { position: relative; z-index: 0; }
.mp__kv:not(.is-still) .mp__kv-still { opacity: 0; }
.mp__kv.is-still .mp__kv-video { display: none; }
.mp__kv-copy { z-index: 2; }
/* 動くミア（タップ／ホバーで再生。動画は自社の AI 生成物） */
.mp__motion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mp__motion figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,214,230,.14); background: #14111c; cursor: pointer; }
.mp__motion video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mp__motion figure::before { content: "▶"; position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(8, 15, 31,.55); border: 1px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; pointer-events: none; transition: opacity .3s; }
.mp__motion figure.is-playing::before { opacity: 0; }
.mp__motion figcaption { padding: 8px 12px; font-family: var(--font-mia); font-size: .92rem; color: var(--text-muted); }
@media (max-width: 700px) { .mp__motion { grid-template-columns: 1fr 1fr; gap: 8px; } .mp__motion figcaption { font-size: .8rem; padding: 6px 8px; } }
.mp__kv-row--grid { grid-template-columns: repeat(3, 1fr); }
.mp__kv-row--grid figure, .mp__kv { cursor: zoom-in; }
@media (max-width: 700px) { .mp__kv-row--grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .mp__kv-row--grid figcaption { font-size: .8rem; padding: 6px 8px; } }
/* スマホ壁紙（9:16）: 5 列、スマホは 3 列 */
.mp__kv-row--wp { grid-template-columns: repeat(5, 1fr); }
.mp__kv-row--wp img { aspect-ratio: 9/16; }
@media (max-width: 700px) { .mp__kv-row--wp { grid-template-columns: repeat(3, 1fr); } }
/* シチュエーションのライトボックス */
.mp__lb { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 5, 10, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.mp__lb[hidden] { display: none; }
.mp__lb img { max-width: min(96vw, 1400px); max-height: 82vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.mp__lb-video { display: block; width: min(96vw, 1400px); max-height: 82vh; aspect-ratio: 16/9; background: #000; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default; }
.mp__lb-video[hidden] { display: none; }
.mp__lb-cap { margin: 14px 0 0; color: #fff; font-family: var(--font-mia); font-size: 1.1rem; text-align: center; }
.mp__lb-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; font-size: 1.4rem; cursor: pointer; }
/* ホームのミアのバナー（自社コンテンツ。DMM の画像とは別の面。日替わりで kv を差し替える） */
.home-mia { display: block; position: relative; margin: 14px 0 6px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,214,230,.16); background: #14111c; aspect-ratio: 16/5; text-decoration: none; color: #fff; }
.home-mia img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; display: block; transition: transform .8s ease; }
.home-mia::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 15, 31,.78) 0%, rgba(8, 15, 31,.35) 42%, transparent 65%); z-index: 1; pointer-events: none; }
.home-mia__copy { z-index: 2; }
.home-mia:hover img { transform: scale(1.03); }
.home-mia__copy { position: absolute; left: 4.5%; bottom: 14%; text-shadow: 0 2px 16px rgba(0,0,0,.75); }
.home-mia__copy .mp__eyebrow { display: block; margin-bottom: 4px; }
.home-mia__line { display: block; margin: 0; font-family: var(--font-mia); font-size: clamp(1.1rem, 2.6vw, 1.7rem); line-height: 1.3; }
.home-mia__cta { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-size: .8rem; backdrop-filter: none; }
.hide-images .home-mia img { visibility: visible; }   /* ミアの絵は作品画像ではないので隠さない */
@media (max-width: 600px) { .home-mia { aspect-ratio: 16/8; margin: 8px 8px 4px; } .home-mia__copy { bottom: 10%; } }

/* レアきせかえ（解放前はシルエット。ミアの絵は自社の AI 生成物なので CSS フィルタで隠してよい＝DMM 画像の制約とは別） */
.mp__rare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mp__rare-item { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, rgba(255,182,206,.16), transparent 60%), var(--glass); border: 1px solid rgba(255,214,230,.14); padding: 10px 6px 0; text-align: center; }
.mp__rare-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .5s ease; }
.mp__rare-item:hover img { transform: translateY(-4px); }
.mp__rare-item figcaption { padding: 6px 0 10px; font-size: .84rem; font-weight: 700; color: var(--accent-gold); }
.mp__rare-item.is-locked img { filter: brightness(0) saturate(0); opacity: .55; }
.mp__rare-item.is-locked figcaption { color: var(--text-muted); font-weight: 500; }
.mp__rare-item.is-locked::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 15, 31,.55)); pointer-events: none; }
@media (max-width: 700px) { .mp__rare { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
/* 極秘ギャラリー（絵は自社の AI 生成物。未解放は強いぼかし） */
.mp__secret-item img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }
.mp__secret-item.is-locked img { filter: blur(22px) saturate(.6); opacity: .8; transform: scale(1.08); }
.mp__secret-item:not(.is-locked) { cursor: zoom-in; }
.chip--rare { border-color: rgba(255,200,120,.45); }
.chip--rare.is-active { background: linear-gradient(135deg, rgba(255,200,120,.35), rgba(255,154,162,.3)); }

/* ミアのページは静止画の枚数が多いので、ページ内のミアは浮遊・影・呼吸を止めて軽くする（右下のドックは別） */
.mp .mia, .mp .mia--img img { animation: none !important; filter: none !important; }
.mp__spark { will-change: opacity, transform; }

/* ---------- サーバー描画ページ（api/page.php: /w-<cid> /a-<id> /g-<id>）。見た目は詳細・一覧と揃える ---------- */
.srv__crumbs { font-size: .8rem; color: var(--text-muted); margin: 6px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.srv__crumbs a { color: var(--text-muted); }
.srv__crumbs span[aria-current] { color: var(--text); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv__hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 18px; }
.srv__hero--person { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.srv__poster img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: var(--glass); }
.srv__poster--person img { aspect-ratio: 1; object-fit: cover; width: 125px; height: 125px; max-width: 100%; border-radius: 50%; image-rendering: auto; }   /* DMM の女優写真は 125×125 しか無い。引き伸ばさず円で */
.srv__poster--person { background: none; border: 0; box-shadow: none; }
.srv__hero--person { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
.srv__title { font-size: 1.35rem; line-height: 1.4; margin: 0 0 10px; }
.srv__ruby { margin: -6px 0 10px; color: var(--text-muted); font-size: .85rem; }
.srv__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.srv__chips .chip { text-decoration: none; }
.srv__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; margin: 0 0 12px; font-size: .9rem; }
.srv__facts div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--glass-border-soft); }
.srv__facts dt { flex: none; width: 7.5em; color: var(--text-muted); font-size: .8rem; padding-top: 2px; }
.srv__facts dd { margin: 0; min-width: 0; }
.srv__price { font-size: 1.5rem; margin: 6px 0; }
.srv__price s { font-size: .9rem; color: var(--text-muted); margin-left: 8px; }
.srv__off { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-warm); color: var(--bg); font-size: .8rem; font-weight: 700; }
.srv__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.srv__adnote, .srv__note, .srv__sources { font-size: .78rem; color: var(--text-muted); line-height: 1.6; }
.srv__sec { margin: 26px 0; }
.srv__sec h2 { font-size: 1.05rem; margin: 0 0 10px; }
.srv__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.srv__table th, .srv__table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--glass-border-soft); }
.srv__samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.srv__samples img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--glass-border-soft); }
/* SEO ページのページ送り（?page=N） */
.srv__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 6px; font-size: .88rem; }
.srv__pager a, .srv__pager span { display: inline-flex; align-items: center; min-width: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); text-decoration: none; justify-content: center; }
.srv__pager a:hover { border-color: var(--accent); }
.srv__pager .is-current { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; }
.srv__pager .is-disabled { opacity: .4; }
.srv__pager .srv__pager-gap { border: 0; background: none; min-width: 0; padding: 6px 2px; color: var(--text-muted); }
/* SEO ページ「YUMEVIQ の観測」ブロック・配信終了の注記 */
.srv__stats .srv__h3 { font-size: .85rem; color: var(--text-muted); margin: 12px 0 6px; font-weight: 600; }
.srv__stats .srv__chips { margin-bottom: 4px; }
.card__extra { margin: 2px 0 0; font-size: .72rem; color: var(--text-muted); }
/* 作品詳細: パッケージ＋サンプル画像のスライドショー（work.js renderGallery） */
.pkg { outline: none; }
.pkg:focus-visible .pkg__main { box-shadow: 0 0 0 2px var(--accent); }
.pkg__main { position: relative; aspect-ratio: 3 / 2; background: var(--glass); border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-soft); }
.pkg__main .pkg__img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.pkg__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .75; }
.pkg__nav:hover { opacity: 1; }
.pkg__nav--prev { left: 8px; } .pkg__nav--next { right: 8px; }
.pkg__count { position: absolute; right: 10px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; font-variant-numeric: tabular-nums; }
.pkg__thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pkg__thumb { flex: 0 0 auto; width: 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--bg-elev); cursor: pointer; opacity: .6; scroll-snap-align: center; }
.pkg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg__thumb.is-active { border-color: var(--accent); opacity: 1; }
.pkg__thumb:hover { opacity: 1; }
.work__poster:has(.pkg) { background: none; border: 0; box-shadow: none; }
.hide-images .pkg img { display: none; }
@media (max-width: 600px) { .pkg__nav { width: 34px; height: 48px; font-size: 1.3rem; } .pkg__thumb { width: 60px; height: 40px; } }
/* 女優データベース /actresses（page.php actressdb）と /a- のギャラリー */
.adb__toolbar { display: flex; gap: 8px; align-items: center; margin: 8px 0 10px; }   /* .adb__bar は分布の棒に使用済み */
.adb__toolbar .adb__search { flex: 1; margin: 0; min-width: 0; }
@media (max-width: 380px) { .adb__toolbar { flex-wrap: wrap; } .adb__toolbar .adb__search { flex-basis: 100%; } }   /* 小さい端末で検索ボタンがはみ出さない（2026-09-19） */
.adb__sort { margin-bottom: 6px !important; }
.adb__panel { margin: 4px 0 6px; border: 1px solid var(--glass-border-soft); border-radius: 12px; background: var(--glass); }
.adb__panel > summary { cursor: pointer; padding: 10px 14px; font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.adb__panel > summary::-webkit-details-marker { display: none; }
.adb__panel > summary::before { content: "▸"; color: var(--text-muted); font-size: .8rem; }
.adb__panel[open] > summary::before { content: "▾"; }
.adb__panel > summary small { font-weight: 400; color: var(--text-muted); font-size: .74rem; }
.adb__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: .72rem; }
.adb__clear { margin-left: auto; font-size: .76rem; color: var(--text-muted); }
.adb__panel .adb__filters { padding: 4px 14px 10px; }
.adb__search { display: flex; gap: 8px; margin: 8px 0 10px; }
.adb__search input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); color: var(--text); font: inherit; }
.adb__filters .srv__chips { margin: 0 0 6px; align-items: center; }
.adb__flabel { font-size: .75rem; color: var(--text-muted); width: 3.5em; flex: none; }
.adb__filters .chip.is-active, .adb__lead-g { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.adb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.adb__card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.adb__photo { display: block; aspect-ratio: 3 / 4; background: var(--bg-elev); overflow: hidden; position: relative; }
.adb__photo--cover { aspect-ratio: 3 / 4; }   /* 単体作品のパッケージ（横長 800×536）の右半分＝表紙（女優の写真）だけを見せる。裏面の細かい文字が入らないので見やすい */
.adb__photo--cover img { object-position: 50% 30%; }   /* サンプル 1 枚目（文字なし）: 顔が上寄りなので少し上を見せる */
.adb__photo--pkg img { object-position: 100% 50%; }   /* パッケージしか無いときは表紙側（右半分） */
.adb__photo--cover::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); pointer-events: none; }
.adb__photo img.adb__face { position: absolute; left: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid rgba(255, 255, 255, .8); z-index: 2; }   /* .adb__photo img（100%）より強く */
.adb__name-on { position: absolute; left: 60px; right: 8px; bottom: 10px; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); line-height: 1.2; display: flex; flex-direction: column; }
.adb__name-on strong { font-size: 1rem; }
.adb__name-on small { font-size: .7rem; opacity: .9; }
.adb__photo:not(.adb__photo--cover) + .adb__body .adb__name { display: block; }
.adb__photo--cover ~ .adb__body .adb__name, .adb__photo--cover ~ .adb__body .adb__ruby { display: none; }
.adb__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hide-images .adb__face { display: none; }
.adb__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adb__noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: var(--text-muted); font-family: var(--font-mia); }
.adb__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.adb__name { margin: 0; font-size: .95rem; line-height: 1.3; }
.adb__name a { color: var(--text); text-decoration: none; }
.adb__ruby { margin: 0; font-size: .7rem; color: var(--text-muted); }
.adb__spec { margin: 0; font-size: .78rem; line-height: 1.5; }
.adb__spec--none { color: var(--text-muted); }
.adb__line { margin: 0; font-size: .76rem; color: var(--text-muted); }
.adb__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.adb__tags .chip { text-decoration: none; font-size: .7rem; padding: 2px 8px; }
.adb__dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; margin-top: 8px; }
.adb__bars { list-style: none; margin: 0; padding: 0; }
.adb__bars li { display: grid; grid-template-columns: 6.5em 1fr 4em; align-items: center; gap: 8px; font-size: .8rem; padding: 3px 0; }
.adb__bar-label .chip { padding: 2px 8px; font-size: .75rem; }
.adb__bar { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); width: var(--w, 0%); min-width: 4px; }
.adb__bar-n { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.adb__lead { padding: 10px 0 6px; border-bottom: 1px solid var(--glass-border-soft); }
.adb__lead-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.adb__lead-head small { color: var(--text-muted); font-size: .74rem; }
.adb__lead-row { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.adb__mini-card, .adb__mini-card:hover { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--text); text-align: center; }
.adb__mini-img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); display: block; }
.adb__mini-img.is-pkg { object-position: 100% 50%; }
.adb__mini-img.adb__noimg { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--text-muted); font-family: var(--font-mia); }
.adb__mini-name { font-size: .78rem; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb__mini-card small { color: var(--text-muted); font-size: .68rem; }
.hide-images .adb__mini-img { visibility: hidden; }
.adb__lead a.adb__lead-g { padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; flex: none; color: var(--bg); background: var(--accent); }
.adb__filters a.chip.is-active { color: var(--bg); }
.adb__mini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 4px; }
.srv__samples--gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.srv__samples--gallery a { display: block; }
.srv__movies { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.srv__movie { margin: 0; }
.srv__movie-box { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--glass-border-soft); cursor: pointer; }
.srv__movie-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv__movie-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.srv__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.4rem; cursor: pointer; }
.srv__movie figcaption { font-size: .78rem; margin-top: 4px; }
.srv__movie figcaption a { color: var(--text-muted); text-decoration: none; }
.hide-images .srv__samples img, .hide-images .srv__movie-box img, .hide-images .adb__photo img, .hide-images .adb__mini { display: none; }
@media (max-width: 600px) { .adb__grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .srv__movies { grid-template-columns: 1fr; } .adb__bars li { grid-template-columns: 5.5em 1fr 3.5em; } }
/* 好きな出演者（js/people.js） */
.fav-person { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; vertical-align: middle; }
.fav-person:hover { border-color: var(--accent-warm); }
.fav-person.is-on { border-color: var(--accent-warm); color: var(--accent-warm); }
.fav-person__icon { font-size: 1em; line-height: 1; }
.fav-person--compact { padding: 0 6px; margin-left: 4px; border: 0; background: none; font-size: 1rem; line-height: 1; }
.fav-person--compact:hover { color: var(--accent-warm); }
#list-title .fav-person { margin-left: 8px; font-weight: 400; }
.chip--exclusive { background: var(--accent-warm); color: var(--bg); border-color: var(--accent-warm); }
.srv__compare tr.is-self td { background: rgba(179, 164, 255, .08); }
.srv__compare small { color: var(--text-muted); font-size: .75rem; }
.dlsite-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.dlsite-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); color: var(--text); font: inherit; width: 12em; }
.people__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.people__item { display: inline-flex; align-items: center; gap: 2px; }
.people__item .chip { text-decoration: none; }
.people__remove { border: 0; background: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.people__remove:hover { color: var(--accent-warm); }
.srv__tabs .chip.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.srv__gone { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--accent-warm); color: var(--text); font-size: .88rem; background: var(--glass); }
@media (max-width: 600px) {
  .srv__hero, .srv__hero--person { grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* 1fr だと min が auto＝サムネ列の幅（15 枚 ≈ 1,000px）まで広がり横にはみ出す（2026-09-19 スマホで発生） */
  .srv__poster { max-width: 320px; margin: 0 auto; }
  .srv__poster--person { max-width: 125px; }
  .srv__facts { grid-template-columns: 1fr; }
}

/* ---------- 詳細ページ（work.html）の見直し（2026-09-16 ユーザー指摘: 余白が狭い・配信形態と金額が離れすぎ・サムネの両脇が切れる・スクロールでサムネが残る） ---------- */
.work { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 28px; }
.work__media { position: static; }                                   /* 追従させない（本文の後ろにサムネを残さない） */
.work__poster { aspect-ratio: auto; background: var(--glass); border: 1px solid var(--glass-border-soft); border-radius: 14px; box-shadow: var(--glass-shadow-soft); }
.work__poster img { width: 100%; height: auto; object-fit: contain; display: block; }   /* パッケージ画像は横長。切らずに全体を見せる（規約: 拡大縮小のみ） */
.decision, .block, .pricing, .work__library, .work__related, .work__wide, .work__samples, .work__offer { padding: 16px 20px 18px; margin: 16px 0 0; }
.work__offer { margin-top: 0; }
.work__offer .price { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 12px; }   /* 箱の中に箱を作らない */
.delivery { margin-top: 16px; padding-top: 14px; }
.delivery__list { gap: 6px; max-width: 420px; }
.delivery__list li { display: grid; grid-template-columns: minmax(9em, auto) 1fr; justify-content: start; gap: 16px; align-items: baseline; }
.delivery__price { text-align: left; }
.work__sources { padding: 14px 4px 0; }
@media (max-width: 700px) { .work { grid-template-columns: 1fr; } .work__poster { max-width: 100%; margin: 0; } }
/* 2026-09-18 ユーザー要望「下に長すぎる。パッケージの下の空白を使って見やすく」: 左の列にパッケージ → 価格・CTA → 記録 を積み、右の列は説明だけに。
   スマホ（700px 以下）は display: contents で 1 列に戻し、order で タイトル → パッケージ → 価格 → 記録 → 出演・ジャンル → 相性 → 残り の順 */
.work { align-items: start; }
.work__media { display: flex; flex-direction: column; gap: 14px; }
.work__media .work__offer, .work__media .work__library { margin: 0; }
.work__library { padding: 14px 16px 16px; }
.work__library .work__section-title { margin: 0 0 6px; font-size: .95rem; }
.record__state { margin: 0 0 10px; font-size: .8rem; color: var(--text-muted); }
.flags--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.flags--grid .flag { min-height: 42px; padding: 8px 10px; font-size: .88rem; text-align: center; border-color: var(--glass-border-soft); background: var(--glass); }
.flags--grid .flag.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.flags--grid .flag--muted.is-active { background: #3a3f4b; border-color: #3a3f4b; color: var(--text); }
.work__library .rating { flex-wrap: wrap; }
.work__library .star { font-size: 1.7rem; padding: 4px 5px; }
.work__main { display: flex; flex-direction: column; gap: 0; }
.work__main > .block, .work__main > .decision, .work__main > .pricing { margin-top: 14px; }
@media (max-width: 700px) {
  .work__media, .work__main { display: contents; }
  .work > *, .work__media > *, .work__main > * { order: 9; }
  #work-title { order: 1; } #work-image { order: 2; } #work-offer { order: 3; } .work__library { order: 4; } #work-meta { order: 5; } #work-tags { order: 6; } #work-match { order: 7; }
  .work__media .work__offer, .work__media .work__library { margin: 12px 0 0; }
}
/* 口コミの読み解き（page.php review_block / work.js renderReviews） */
.srv__reviews .mia-place, #work-reviews .mia-place { margin: 4px 0 12px; }
.rv__dist { display: grid; gap: 4px; max-width: 420px; margin: 8px 0; }
.rv__bar { display: grid; grid-template-columns: 3.5em 1fr 3em; align-items: center; gap: 8px; font-size: .8rem; }
.rv__bar-t { display: block; height: 8px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; }
.rv__bar-t span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); }
.rv__bar-n { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.work__meta--compact { margin: 6px 0 8px; }
.block__note { margin: 6px 0 0; font-size: .74rem; color: var(--text-muted); line-height: 1.6; }
/* 折りたたみ（work.js foldAll）: 見出しの行だけ残して中身を隠す。右端に ▾ */
.fold > .fold__head { cursor: pointer; user-select: none; position: relative; padding-right: 28px; }
.fold > .fold__head::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.fold.is-open > .fold__head::after { transform: rotate(-135deg); margin-top: -3px; }
.fold:not(.is-open) > :not(.fold__head) { display: none; }
.fold:not(.is-open) > .fold__head { margin-bottom: 0; }
.fold:not(.is-open) > .fold__head h2, .fold:not(.is-open) > .fold__head h3, .fold > h2.fold__head, .fold > h3.fold__head { margin-bottom: 0; }
.fold.is-open > h2.fold__head, .fold.is-open > h3.fold__head { margin-bottom: 10px; }
.fold > .fold__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.fold:not(.is-open) { padding-bottom: 14px; }
/* 検索エンジン向け作品ページ: パッケージの下に記録ブロック（js/record.js） */
.srv__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.srv__side .work__library { margin: 0; background: var(--glass); border: 1px solid var(--glass-border-soft); border-radius: 14px; }
@media (max-width: 700px) { .srv__side { display: contents; } .srv__hero > .srv__head { order: 1; } .srv__side > .srv__poster, .srv__side > .pkg { order: 0; } .srv__side > .work__library { order: 2; } }   /* スマホ: スライドショー（パッケージ → サンプル → 動画） → 題名・相性・価格 → 記録 */
@media (max-width: 600px) { .decision, .block, .pricing, .work__library, .work__related, .work__wide, .work__samples, .work__offer { padding: 14px 16px 16px; } .delivery__list li { grid-template-columns: minmax(8em, auto) 1fr; gap: 12px; } }

/* 探す: ジャンル（公式）と性癖（YUMEVIQ の切り口）の区別 */
.explore__lead { margin: 0 0 8px; font-size: .78rem; color: var(--text-muted); line-height: 1.6; }
.explore__search--genre { max-width: 100%; }
.chip--bundle { border-style: dashed; }

/* 詳細ページの相性（タイトル直下、大きめ）と記録ブロックの格上げ（価格の直後） */
.work__match { margin: 0 0 16px; }
.work__match[hidden] { display: none; }
.wmatch { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); box-shadow: var(--glass-shadow-soft); }
.wmatch__ring { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: var(--text); background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), rgba(255,255,255,.08) 0); position: relative; }
.wmatch__ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #121218; }
.wmatch__ring b, .wmatch__ring i { position: relative; font-style: normal; }
.wmatch__ring i { font-size: .7rem; margin-left: 1px; color: var(--text-muted); }
.wmatch__ring--new { background: rgba(255,255,255,.08); color: var(--text-muted); }
.wmatch__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wmatch__body strong { font-size: 1.02rem; }
.wmatch__body small { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.wmatch--great { border-color: rgba(179, 164, 255,.5); box-shadow: 0 0 0 1px rgba(179, 164, 255,.25), var(--glass-shadow-soft); }
.wmatch--great .wmatch__body strong { color: var(--accent-hover); }
.wmatch--good .wmatch__ring { background: conic-gradient(#5fd6a0 calc(var(--pct, 0) * 1%), rgba(255,255,255,.08) 0); }
.wmatch--good .wmatch__body strong { color: #5fd6a0; }
.wmatch--low .wmatch__ring { background: conic-gradient(rgba(255,255,255,.35) calc(var(--pct, 0) * 1%), rgba(255,255,255,.08) 0); }
.wmatch--avoid .wmatch__ring { background: rgba(255,107,107,.18); color: #ff6b6b; }
.wmatch--avoid .wmatch__body strong { color: #ff6b6b; }
.work__library { margin-top: 16px; }
.work__library .work__section-title { margin-top: 0; }

/* 探す: 五十音の行で畳む・刺さりそうを格上げ */
.explore__rows { display: flex; flex-direction: column; gap: 4px; }
.explore__row { border: 1px solid var(--glass-border-soft); border-radius: 12px; background: rgba(255,255,255,.03); }
.explore__row summary { cursor: pointer; padding: 8px 12px; font-size: .84rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.explore__row summary::-webkit-details-marker { display: none; }
.explore__row summary::before { content: "＋"; color: var(--accent); font-weight: 700; }
.explore__row[open] summary::before { content: "－"; }
.explore__row summary small { color: var(--text-muted); font-weight: 400; }
.explore__row .explore__chips { padding: 0 12px 10px; }
.kink--hot { padding: 8px 10px; border-radius: 12px; background: rgba(179, 164, 255,.08); border: 1px solid rgba(179, 164, 255,.28); margin-bottom: 10px; }
.kink--hot .kink__label { color: var(--accent-hover); font-weight: 700; }
.chip--hot { border-color: rgba(179, 164, 255,.6); color: var(--text); background: rgba(179, 164, 255,.14); }

/* ---------- ミアレベルアップの祝福（Mia.celebrate）。テーマ 4 種・紙吹雪・光の筋・全身ミア ---------- */
.mia-cele { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .4s; --c1: #b3a4ff; --c2: #f7b6c8; --c3: #ffd76a; --c4: #7fe3ff; --c5: #fff; }
.mia-cele.is-in { opacity: 1; }
.mia-cele.is-out { opacity: 0; }
.mia-cele--gold { --c1: #ffd76a; --c2: #ffb347; --c3: #fff1b8; --c4: #f7b6c8; }
.mia-cele--rose { --c1: #ff8fb7; --c2: #f7b6c8; --c3: #ffd6e6; --c4: #b3a4ff; }
.mia-cele--aurora { --c1: #7fe3ff; --c2: #5fd6a0; --c3: #b3a4ff; --c4: #ffd76a; }
.mia-cele__veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c1) 30%, rgba(8,8,14,.96)), rgba(5,5,10,.96) 70%); backdrop-filter: blur(10px); }
.mia-cele__rays { position: absolute; left: 50%; top: 42%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 22%, transparent) 0 6deg, transparent 6deg 14deg); opacity: .35; animation: cele-spin 40s linear infinite; mask: radial-gradient(circle, #000 0, transparent 60%); pointer-events: none; }
.mia-cele__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mia-cele__confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c1); opacity: 0; transform: rotate(var(--r)); animation: cele-fall var(--t) linear var(--d) infinite; }
.mia-cele__confetti i:nth-child(5n+1) { background: var(--c2); } .mia-cele__confetti i:nth-child(5n+2) { background: var(--c3); width: 6px; height: 6px; border-radius: 50%; }
.mia-cele__confetti i:nth-child(5n+3) { background: var(--c4); } .mia-cele__confetti i:nth-child(5n+4) { background: var(--c5); width: 5px; height: 10px; }
@keyframes cele-fall { 0% { transform: translateY(0) rotate(var(--r)); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .9; } }
@keyframes cele-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mia-cele__box { position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transform: translateY(24px) scale(.96); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.mia-cele.is-in .mia-cele__box { transform: none; }
.mia-cele__badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 999px; background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 55%, #000), color-mix(in srgb, var(--c2) 55%, #000)); border: 1px solid color-mix(in srgb, var(--c3) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 45%, transparent); color: #fff; animation: a2hs-float 4s ease-in-out infinite; }
.mia-cele__badge small { font-size: .62rem; letter-spacing: .3em; opacity: .85; }
.mia-cele__badge b { font-size: 2rem; line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--c3) 80%, transparent); }
.mia-cele__badge span { font-size: .84rem; font-weight: 700; color: var(--c3); }
.mia-cele__stage { position: relative; height: 260px; display: grid; place-items: center; }
.mia-cele__stage::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 40%, transparent), transparent 70%); filter: blur(16px); animation: a2hs-drift 7s ease-in-out infinite; }
.mia-cele__mia { position: relative; --mia-size: 260px; animation: mia-pop .7s cubic-bezier(.2,1.2,.3,1) both, a2hs-float 4.8s ease-in-out .8s infinite; }
.mia-speech--cele { max-width: 100%; text-align: left; background: rgba(18,18,26,.92); }
.mia-speech--cele::before, .mia-speech--cele::after { content: ""; position: absolute; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); }
.mia-speech--cele::before { width: 12px; height: 12px; top: -14px; left: 50%; } .mia-speech--cele::after { width: 7px; height: 7px; top: -25px; left: calc(50% + 10px); }
.mia-cele__main { font-size: .95rem; font-weight: 600; }
.mia-cele__extra { margin-top: 6px !important; font-size: .82rem; color: var(--text-muted); }
.mia-cele__reward { margin-top: 8px !important; font-size: .8rem; color: var(--c3); font-weight: 700; }
.mia-cele__ok { margin-top: 4px; min-width: 160px; }
@media (max-width: 600px) { .mia-cele__stage { height: 210px; } .mia-cele__mia { --mia-size: 210px; } .mia-cele__badge b { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .mia-cele__confetti, .mia-cele__rays { display: none; } .mia-cele__badge, .mia-cele__mia, .mia-cele__stage::before { animation: none; } }

/* スマホ: サムネをできるだけ大きく（2026-09-16 ユーザー指示）。枠は両端ギリギリ、グリッドの隙間も最小に */
@media (max-width: 600px) {
  main.container, .catbar .container { padding-left: 8px; padding-right: 8px; }
  .sec { padding: 8px 6px 6px; margin: 12px 0 4px; border-radius: 12px; }
  .sec__head { padding: 0 4px; }
  .grid, .grid:not(.grid--rail) { gap: 10px 6px; }
  .grid--3, .tonight__grid { gap: 10px 6px; }
  .card__thumb { border-radius: 9px; }
  .card__body { padding: 7px 4px 8px; }
  .list-head, .sorttabs, #refine, .status { padding-left: 4px; padding-right: 4px; }
}

/* スマホ: 枠もサムネも画面の両端いっぱいに（2026-09-16 ユーザー指示「キワキワに」） */
@media (max-width: 600px) {
  main.container, main > .container, .catbar .container { padding-left: 0; padding-right: 0; }
  .sec { margin-left: 0; margin-right: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 8px 0 6px; }
  .sec__head { padding: 0 8px; }
  .grid, .grid:not(.grid--rail), .grid--3, .tonight__grid { gap: 8px 2px;   /* 2026-09-20 デザイン C の密度: 2px */ }
  .card__thumb { border-radius: 6px; }
  .card__body { padding: 6px 5px 8px; }
  .catbar__inner, .cattabs, .catbar .chips, .explore { padding-left: 8px; padding-right: 8px; }
  .list-head, .sorttabs, #refine, .status, .hub-head, .explore__panel { margin-left: 8px; margin-right: 8px; }
  #personal .sec, #specials .sec, .rail { margin-left: 0; margin-right: 0; }
  .work { padding: 0 8px; }
  .page, main.container.page { padding-left: 12px; padding-right: 12px; }   /* 文章のページは端から 12px（2026-09-19 ユーザー指示「サムネは端まで、文章はぎりぎりだと読みづらい」。main.container の 0 に負けていた） */
  /* サーバー描画ページ・ミアのページの画像グリッドは端まで（文章だけ内側） */
  .page.srv .grid, .page.srv .srv__samples, .page.srv .srv__movies, .page.srv .adb__grid, .page.srv .adb__lead-row, .page.srv .pkg, .page.srv .srv__hero--person .srv__poster,
  .page.mp .mp__kv-row, .page.mp .mp__motion, .page.mp .mp__rare, .page.mp .mp__kv, .page.mp .mp__rail, .page.mp .mp__secret, .page.mp .dress { margin-left: -12px; margin-right: -12px; }
  .page .grid { margin-left: -12px; margin-right: -12px; }   /* マイリスト等のカード一覧も端まで */
  .page.srv .srv__sec > .grid { width: auto; }
  .page.srv .srv__hero .pkg, .page.srv .srv__hero .srv__poster { width: calc(100% + 24px); max-width: none; }   /* grid の子は負のマージンだけでは広がらない */
  .page.srv .srv__scroll { margin-left: -12px; margin-right: -12px; padding: 0 12px; }
  .page.mp .mp__sec--text, .page.mp .mp__sec--kv .mp__h2, .page.mp .mp__sec--kv .mp__lead, .page.mp .mp__sec--motion .mp__h2, .page.mp .mp__sec--motion .mp__lead, .page.mp .mp__sec--wp .mp__h2, .page.mp .mp__sec--wp .mp__lead,
  .page.mp .mp__sec--gallery .mp__h2, .page.mp .mp__sec--gallery .mp__lead, .page.mp .mp__sec--gallery > p, .page.mp .mp__sec--rare .mp__h2, .page.mp .mp__sec--rare .mp__lead, .page.mp .mp__sec--secret .mp__h2, .page.mp .mp__sec--secret .mp__lead, .page.mp .mp__sec--dress .mp__h2, .page.mp .mp__sec--dress .mp__lead { padding-left: 4px; padding-right: 4px; }
  .page.mp .mp__hero { padding-left: 4px; padding-right: 4px; }
  .page.mp .mp__jump { margin-left: -12px; margin-right: -12px; }
  .page.mp .mp__rail { padding-left: 12px; padding-right: 12px; }
  .page.mp .dress { margin-left: -4px; margin-right: -4px; }
}

/* 引き継ぎ・同期ページ（sync.html） */
.sp__sec { margin: 22px 0 0; padding: 16px 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.sp__sec h2 { margin: 0 0 8px; font-size: 1.02rem; }
.sp__mia { margin: 8px 0 14px; }
.sp__mia-inner { display: flex; align-items: flex-start; gap: 10px; }
.sp__code-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sp__qr { flex: none; width: 168px; height: 168px; border-radius: 12px; overflow: hidden; background: #fff; padding: 6px; box-sizing: border-box; }
.sp__qr svg { width: 100%; height: 100%; display: block; }
.sp__qr.is-hidden svg { filter: blur(6px); opacity: .35; }
.sp__qr.is-hidden { position: relative; }
.sp__qr.is-hidden::after { content: "「コードを表示」で QR も表示"; position: absolute; inset: 0; display: grid; place-items: center; color: #222; font-size: .72rem; text-align: center; padding: 12px; }
.sp__code-side { flex: 1; min-width: 220px; }
.sp__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; letter-spacing: .08em; margin: 6px 0 10px; user-select: all; -webkit-user-select: all; }
.sp__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sp__meta { font-size: .76rem; }
.sp__danger { margin-top: 14px; font-size: .84rem; }
.sp__danger summary { cursor: pointer; color: var(--muted); }
.sp__btn-danger { border-color: var(--accent-warm); color: var(--accent-warm); }
.sp__form { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.sp__input { flex: 1; min-width: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.sp__faq { margin: 0; padding-left: 1.2em; font-size: .86rem; line-height: 1.7; }
.sp__faq li + li { margin-top: 6px; }
@media (max-width: 600px) { .sp__sec { padding: 14px 12px; } .sp__qr { width: 148px; height: 148px; } }

/* 値下がりの通知（Web Push。js/push.js）: マイリストのブロックと、詳細の記録ブロック内の 1 行 */
.push { padding: 14px 16px; }
.push__title { margin: 0 0 6px; }
.push__note { margin: 0 0 8px; font-size: .84rem; color: var(--muted); line-height: 1.6; }
.push__note--on { color: var(--text); }
.push__row { display: flex; flex-wrap: wrap; gap: 8px; }
.push__msg { margin: 8px 0 0; font-size: .78rem; color: var(--muted); min-height: 0; }
.push__msg:empty { display: none; }
.push--compact { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.push--compact .push__note { margin-bottom: 6px; font-size: .8rem; }
.push[hidden] { display: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* 404 ページ（content/pages/404.html）: 検索フォームとミア */
.nf__search { display: flex; gap: 8px; margin: 8px 0 14px; }
.nf__search input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,.04); color: var(--text); font-size: 16px; }
.nf__search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.crumbs__here { color: var(--text-muted); }

/* ミアのページの整理（2026-09-19 ユーザー指摘「一番見るのはギャラリー。文章が両端ギリギリで読みづらい」）
   順番: ヒーロー → 目次 → 画像・動画（シチュエーション／動くミア／壁紙／部屋着／レア／きせかえ）→ 文章（プロフィール／いまのミア／来歴／口調／できること）→ 設定。
   スマホは main の左右 padding が 0（「キワキワに」）なので、文章のセクションだけ 16px 内側に。画像グリッドは端まで */
.mp__jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 10px; margin: 6px 0 0; scroll-snap-type: x proximity; }
.mp__jump::-webkit-scrollbar { display: none; }
.mp__jump a { flex: 0 0 auto; scroll-snap-align: start; padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--text); text-decoration: none; background: var(--glass); border: 1px solid var(--glass-border-soft); white-space: nowrap; }
.mp__jump a:hover { border-color: rgba(255,214,230,.5); color: #ffd6e6; }
.mp__sec[id] { scroll-margin-top: calc(var(--header-h, 56px) + 12px); }
.mp__sec--text { max-width: 760px; }
.mp__sec--text .mp__h2 { font-size: 1.3rem; }
.mp__sec--text .mp__lead { font-size: 1rem; line-height: 1.8; }
.mp__fold { border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); padding: 0 18px; }
.mp__fold > summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: #ffd6e6; list-style: none; display: flex; align-items: center; gap: 8px; }
.mp__fold > summary::-webkit-details-marker { display: none; }
.mp__fold > summary::before { content: "▸"; font-size: .9em; transition: transform .2s; }
.mp__fold[open] > summary::before { transform: rotate(90deg); }
.mp__fold[open] > summary { border-bottom: 1px dashed var(--glass-border-soft); margin-bottom: 14px; }
.mp__fold .mp__story p:last-child { padding-bottom: 6px; }
@media (max-width: 600px) {
  .mp .mp__sec--text, .mp .mp__sec--kv .mp__h2, .mp .mp__sec--kv .mp__lead, .mp .mp__sec--motion .mp__h2, .mp .mp__sec--motion .mp__lead, .mp .mp__sec--wp .mp__h2, .mp .mp__sec--wp .mp__lead,
  .mp .mp__sec--gallery .mp__h2, .mp .mp__sec--gallery .mp__lead, .mp .mp__sec--gallery > p, .mp .mp__sec--rare .mp__h2, .mp .mp__sec--rare .mp__lead, .mp .mp__sec--secret .mp__h2, .mp .mp__sec--secret .mp__lead, .mp .mp__sec--dress .mp__h2, .mp .mp__sec--dress .mp__lead { padding-left: 16px; padding-right: 16px; }
  .mp .mp__sec { margin-top: 28px; }
  .mp .mp__story p { font-size: .98rem; line-height: 1.95; }
  .mp .mp__fold { margin: 0; }
  .mp .mp__hero { padding: 8px 16px 8px; gap: 14px; }
  .mp .mp__figure { max-width: 240px; }
  .mp .mp__jump { padding-left: 12px; padding-right: 12px; }
  .mp .mp__rail { padding-left: 8px; padding-right: 8px; margin: 0; }
  .mp .mp__kv-row--grid, .mp .mp__motion, .mp .mp__kv-row--wp, .mp .mp__rare { gap: 4px; }
  .mp .mp__kv-row figure, .mp .mp__motion figure { border-radius: 8px; }
  .mp .mp__kv { border-radius: 0; }
  .mp .dress { margin: 0 8px; }
}

/* 作品詳細の公式サンプル動画（.wmv は旧 work.html 用。2026-09-19 夕方からはスライドショーの最後の 1 枚＝下の .pkg__main.is-video） */
.wmv { margin: 0 0 12px; }
.wmv__box { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--glass-border-soft); cursor: pointer; }
.wmv__box img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82); }
.wmv__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wmv__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(8, 15, 31,.6); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }
.wmv__box::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(8, 15, 31,.25)); pointer-events: none; }
.wmv.is-playing .wmv__box::after { display: none; }
.wmv figcaption { margin-top: 6px; font-size: .78rem; color: var(--text-muted); }
.hide-images .wmv__box img { display: none; }
/* /w- の相性・比較（2026-09-19 統合。record.js が描く） */
.srv__match { margin: 8px 0 12px; }
.srv__match[hidden] { display: none; }
.record .work__section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record__compare { font-size: .78rem; }

/* 作品詳細の拡大表示（js/gallery.js。画像は ← →、動画は公式プレイヤー 720×480 を画面に合わせて拡大） */
.gzoom { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(8, 15, 31,.55); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); z-index: 2; opacity: .85; }
.gzoom:hover { opacity: 1; background: rgba(8, 15, 31,.75); }
.pkg--single .gzoom { display: none; }
@media (hover: hover) and (min-width: 901px) { .pkg__img { cursor: zoom-in; } }
.glb { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 5, 10, .94); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.glb[hidden] { display: none; }
.glb__body { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.glb__img { max-width: min(96vw, 1600px); max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default; }
.glb__video { position: relative; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default; }
.glb__video iframe { position: absolute; left: 0; top: 0; width: 720px; height: 480px; border: 0; transform-origin: 0 0; }
.glb__cap { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; color: #fff; font-size: .9rem; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.glb__close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 2; }
.glb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4); color: #fff; font-size: 2rem; cursor: pointer; z-index: 2; }
.glb__nav--prev { left: 12px; } .glb__nav--next { right: 12px; }
.glb--single .glb__nav { display: none; }
@media (max-width: 600px) { .glb { padding: 8px; } .glb__nav { width: 40px; height: 56px; font-size: 1.6rem; } .glb__nav--prev { left: 4px; } .glb__nav--next { right: 4px; } }
/* スライドショーの動画スライドと「サンプル動画を再生」ボタン（2026-09-19 ユーザー指示: パッケージ → サンプル画像 → 最後に動画、下にサムネ無しのボタン） */
.pkg__main.is-video .pkg__img { visibility: hidden; }
.pkg__main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pkg__main .pkg__ext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; background: rgba(8, 15, 31,.7); text-decoration: none; }
.pkg__thumb--video { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, rgba(179, 164, 255,.5), rgba(255,182,206,.35)); }
.pkg__movie { display: block; width: 100%; margin-top: 10px; }
.srv .pkg, .work__media .pkg { min-width: 0; max-width: 100%; }
.srv__person { display: inline-flex; align-items: center; gap: 2px; }
.srv__person .fav-person--compact { vertical-align: middle; }
@media (max-width: 600px) {
  /* 一覧の「さらに絞る」は 1 行の横スクロール（3 行に折り返すと結果がファーストビューから消える） */
  .refine { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-top: 8px; padding-bottom: 8px; }
  .refine::-webkit-scrollbar { display: none; }
  .refine .chip { flex: 0 0 auto; }
}
/* 2026-09-19: 最近見た作品・ランダム発掘のラベル、検索 0 件の空状態 */
.ov--seen { background: rgba(179, 164, 255,.85); color: #120c1f; }
.ov--dice { background: #f4c95d; color: #2a1d00; }
.empty { grid-column: 1 / -1; padding: 22px 16px 18px; text-align: center; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.empty__title { margin: 0 0 6px; font-weight: 700; }
.empty__hint { margin: 0 0 12px; font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.empty__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.btn[hidden], .chip[hidden] { display: none !important; }   /* .btn は inline-flex なので hidden が効いていなかった（0 件のとき「もっと見る」が残る。2026-09-19） */
/* ソクミル・DLsite の強化（2026-09-19）: 他ストアの方が安い 1 行、ソクミルのラベル、FANZA でも探す */
.srv__cheaper { margin: 6px 0 0; font-size: .9rem; }
.srv__cheaper a { color: var(--accent-gold, #f4c95d); text-decoration: none; }
.srv__cheaper a strong { font-size: 1rem; }
.srv__cheaper--same a { color: var(--text-muted); }
.srv__cheaper-more { margin-left: 8px; font-size: .78rem; color: var(--text-muted) !important; text-decoration: underline !important; }
.ov--sokmil { background: #e8563f; color: #fff; }
.ov--duga, .card__tag--duga { background: #2f7de1; color: #fff; }
.srv__cross .srv__chips { margin-top: 8px; }
.srv__price small { margin-left: 4px; font-size: .74rem; color: var(--text-muted); font-weight: 400; }
.srv__samples--tiny { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.srv__samples--tiny img { border-radius: 6px; }
/* YUMEVIQ 調べ /lab（2026-09-19） */
.srv__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lab__table th, .lab__table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab__table small { color: var(--text-muted); font-size: .72rem; }
.lab__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lab__bars li { display: grid; grid-template-columns: minmax(7em, 12em) 1fr auto; align-items: center; gap: 10px; font-size: .88rem; }
.lab__bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab__bar-l a { color: var(--text); text-decoration: none; }
.lab__bar-t { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.lab__bar-t > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffb6ce); }
.lab__bar-v { font-variant-numeric: tabular-nums; min-width: 4em; text-align: right; }
.lab__bar-v small { color: var(--text-muted); }
@media (max-width: 600px) { .lab__bars li { grid-template-columns: minmax(5em, 8em) 1fr auto; font-size: .8rem; } }
/* /w- の判断ヒント・見立て（record.js が描く。work.html の .decision / .pricing と同じ部品） */
.srv__decision { margin-top: 14px; }
.srv__decision[hidden], .srv__pricing[hidden] { display: none; }
.srv__decision .work__section-title { margin-top: 12px; }
.srv__pricing .pricing { margin: 0; }
.ov--score { background: #f4c95d; color: #2a1d00; font-weight: 800; }
.lab__list { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: .9rem; }
.lab__list a { color: var(--text); text-decoration: none; }
.lab__num { color: var(--text-muted); font-size: .82rem; margin-left: 6px; font-variant-numeric: tabular-nums; }
/* /c- /g- の絞り込み（2026-09-19） */
.filter { margin-top: 12px; }
.filter__rows { display: grid; gap: 8px; padding: 8px 0 4px; }
.filter__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter__label { font-size: .74rem; color: var(--text-muted); min-width: 3em; }
.filter__clear { margin: 6px 0 0; }
/* /w- 価格推移（サーバー描画 SVG。2026-09-19） */
.pchart-wrap { max-width: 480px; margin: 0 0 10px; color: var(--accent); }
.pchart { width: 100%; height: auto; display: block; }
.pchart__axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.lab__bars--years li { grid-template-columns: 4em 1fr auto; }
/* ホームの「YUMEVIQ でできること」（初回〜3 日目。2026-09-19） */
.intro { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 8px 14px; }
.intro__tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border-soft); text-decoration: none; color: var(--text); }
.intro__tile strong { font-size: .95rem; }
.intro__tile span { font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.intro__tile:hover { border-color: rgba(179, 164, 255,.5); }
.intro__close { position: absolute; right: -4px; top: -10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--glass-border-soft); background: var(--bg-elev, #14111c); color: var(--text-muted); cursor: pointer; }
.intro[hidden] { display: none; }
@media (max-width: 600px) { .intro { grid-template-columns: 1fr; gap: 6px; margin: 4px 8px 10px; } .intro__tile { flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 12px; } .intro__tile strong { flex: 0 0 7em; } }

/* 作品ページ「YUMEVIQ の見立て」の数字パネル（2026-09-19 ユーザー要望「本文を視覚的に面白く」） */
.ncards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.ncard { background: var(--glass); border: 1px solid var(--glass-border-soft); border-radius: 14px; padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ncard--score { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
.ncard__ring { flex: 0 0 auto; color: var(--accent); }
.ncard__body { min-width: 0; flex: 1; }
.ncard__t { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); margin: 0; }
.ncard__t small { font-weight: 400; letter-spacing: 0; opacity: .8; display: block; margin-top: 2px; }
.ncard__big { margin: 0; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ncard__big b { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.ncard__big small { font-size: 13px; color: var(--text-muted); }
.ncard__sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.ncard__parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.ncard__parts li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.ncard__parts i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); min-width: 3px; }
.ncard__parts li { position: relative; }
.ncard__parts li::before { content: ""; position: absolute; left: 72px; right: 54px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.ncard__parts i { position: relative; }
.ncard__parts b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.ncard__parts b small { color: var(--text-muted); font-weight: 400; }
.ring text { font-family: inherit; }
.posbar, .gauge { display: grid; gap: 4px; margin-top: 4px; }
.posbar__track, .gauge__track { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.posbar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .12), var(--accent)); }
.posbar__dot, .gauge__me { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(0, 0, 0, .25); }
.gauge__median { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-muted); transform: translateX(-50%); }
.posbar__ends, .gauge__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gauge__mid { text-align: center; }
.ncard--gem { border-color: rgba(200, 170, 255, .45); }
.ncard--hot .ncard__big, .ncard--up .ncard__big { color: var(--accent-warm); }
.srv__insight .srv__fold { margin-top: 4px; }
.srv__insight .srv__fold summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
@media (max-width: 600px) {
  .ncards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ncard { padding: 12px; }
  .ncard__big b { font-size: 24px; }
  .ncard--score { gap: 12px; }
  .ncard--score .ring { width: 80px; height: 80px; }
}
.gauge__note { font-size: 10px; color: var(--text-muted); opacity: .8; }

/* ホームのレールのグループ（2026-09-19 「レールの整理」。js/app.js HomeGroups） */
.hg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 22px 0 0; padding: 0 2px; }
.hg__label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.hg__chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.hg + .sec, .hg ~ .sec { margin-top: 8px; }
.sec.hg-sec[hidden] { display: none; }
.sec.hg-sec .sec__title { font-size: .95rem; }
@media (max-width: 600px) {
  .hg { margin: 14px 0 0; padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .hg::-webkit-scrollbar { display: none; }
  .hg__chip { flex: 0 0 auto; }
}
/* SSR ページの「読み物」（関連コラム。2026-09-19 流入拡大の内部リンク） */
.srv__read-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.srv__read-list a { display: inline-block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .84rem; color: var(--text); background: var(--glass); }
.srv__read-list a:hover { border-color: var(--accent); color: var(--accent-hover); }
.ncard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ncard__chips span { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text-muted); }
.ncard__parts--stars li { grid-template-columns: 30px minmax(0, 1fr) 30px; }
.ncard__parts--stars li::before { left: 38px; right: 38px; }
/* 「この数字を引用」（/lab・/a-。2026-09-20） */
.srv__quote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); font-size: .84rem; }
.srv__quote-t { flex: 1 1 240px; color: var(--text); font-variant-numeric: tabular-nums; }

/* =====================================================================
   触って気持ちいい（2026-09-20 ユーザー指示「触りやすさからワンランク上、触りたくなる UI」）
   方針: 押した瞬間に縮む・戻る（ばね）、画像はふわっと現れる、数字は目に入ったときに伸びる、
   ♥ と ★ は弾む、下部ナビの現在地は光る。reduced-motion では全部止める。js/common.js の initFeel と対
   ===================================================================== */
:root { --spring: cubic-bezier(.2, .9, .3, 1.4); --ease-out: cubic-bezier(.16, 1, .3, 1); }
.card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s; will-change: transform; }
.card:active { transform: scale(.965); transition-duration: .08s; }
.card__thumb img { transition: transform .6s var(--ease-out), opacity .45s ease; }
@media (hover: hover) { .card:hover .card__thumb img { transform: scale(1.05); } }
html.js-feel .card__thumb img:not(.is-loaded), html.js-feel .pkg__img:not(.is-loaded), html.js-feel .srv__samples img:not(.is-loaded), html.js-feel .adb__photo img:not(.is-loaded) { opacity: 0; }
html.js-feel .card__thumb img.is-loaded, html.js-feel .pkg__img.is-loaded, html.js-feel .srv__samples img.is-loaded, html.js-feel .adb__photo img.is-loaded { opacity: 1; }   /* 対象を絞る（ショートの背景やミアのクロスフェードの opacity を潰さない） */
.btn, .chip, .sorttab, .bottom-nav__item, .fav-person, .card__fav, .star, .work__library button, .hg__chip { transition: transform .25s var(--spring), background-color .2s, border-color .2s, color .2s, opacity .2s; }
.btn:active, .chip:active, .sorttab:active, .hg__chip:active { transform: scale(.94); transition-duration: .06s; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .28), transparent 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.btn:active::after { opacity: 1; transition: opacity 0s; }
.btn--primary:hover { box-shadow: 0 8px 24px rgba(179, 164, 255, .35); transform: translateY(-1px); }
/* ♥・★・記録ボタン: 弾む */
@keyframes feel-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 65% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes feel-ring { 0% { box-shadow: 0 0 0 0 rgba(179, 164, 255, .55); } 100% { box-shadow: 0 0 0 14px rgba(179, 164, 255, 0); } }
.card__fav.is-active, .fav-person.is-on, .star.is-active, .work__library [data-flag].is-active { animation: feel-pop .45s var(--spring); }
.fav-person.is-on { position: relative; }   /* .card__fav は absolute のまま（2026-09-20 修正） */
.card__fav.is-active::before, .fav-person.is-on::before { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: feel-ring .6s ease-out; pointer-events: none; }
.star { transition: transform .25s var(--spring), color .15s; }
.star:hover { transform: scale(1.2); }
.rating:hover .star { color: var(--accent); } .rating .star:hover ~ .star { color: var(--text-muted); }   /* ホバーでそこまで光る */
/* 下部ナビ: 現在地に光る点、押すと沈む */
.bottom-nav__item::before { content: ""; position: absolute; top: 2px; left: 50%; width: 18px; height: 3px; border-radius: 3px; background: var(--accent); transform: translateX(-50%) scaleX(0); transition: transform .35s var(--spring); }
.bottom-nav__item.is-active::before { transform: translateX(-50%) scaleX(1); }
.bottom-nav__item:active { transform: scale(.9); transition-duration: .06s; }
.bottom-nav__item.is-active .bottom-nav__icon { filter: drop-shadow(0 0 6px rgba(179, 164, 255, .6)); }
/* チップの行: 端がふわっと消える・スナップ */
.srv__chips, .refine, .hg, .catbar__sub, .sorttabs { scroll-snap-type: x proximity; }
.srv__chips > *, .refine > *, .hg > *, .sorttabs > * { scroll-snap-align: start; }
/* トースト: 下からばねで */
.toast { transition: opacity .25s, transform .45s var(--spring); }
/* 見立ての数字: 画面に入ったら伸びる（初期状態は 0。is-in を common.js が付ける） */
html.js-feel .ncards:not(.is-in) .ring circle:nth-of-type(2) { stroke-dashoffset: 251.3; }
.ring circle:nth-of-type(2) { transition: stroke-dashoffset 1.1s var(--ease-out); }
html.js-feel .ncards:not(.is-in) .ncard__parts i, html.js-feel .ncards:not(.is-in) .posbar__fill { width: 0 !important; }
.ncard__parts i, .posbar__fill { transition: width .9s var(--ease-out); }
html.js-feel .ncards:not(.is-in) .posbar__dot, html.js-feel .ncards:not(.is-in) .gauge__me { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.posbar__dot, .gauge__me { transition: opacity .4s .5s, transform .5s .5s var(--spring); }
html.js-feel .ncards:not(.is-in) .ncard__big b { opacity: 0; transform: translateY(6px); }
.ncard__big b { display: inline-block; transition: opacity .5s .15s, transform .5s .15s var(--ease-out); }
.ncard { transition: transform .3s var(--ease-out), border-color .3s; }
@media (hover: hover) { .ncard:hover { transform: translateY(-2px); border-color: rgba(179, 164, 255, .45); } }
/* 相性リング・スライドショーの矢印 */
.pkg__nav { transition: transform .2s var(--spring), background-color .2s, opacity .2s; }
.pkg__nav:active { transform: translateY(-50%) scale(.85); }
.pkg__thumb { transition: transform .25s var(--spring), border-color .2s, opacity .2s; }
.pkg__thumb:active { transform: scale(.92); }
/* スケルトンは光が走る */
@keyframes feel-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton .card__thumb, .skeleton .card__title, .skeleton .card__meta { background: linear-gradient(90deg, var(--bg-elev) 25%, rgba(255, 255, 255, .06) 50%, var(--bg-elev) 75%); background-size: 200% 100%; animation: feel-shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .card, .btn, .chip, .sorttab, .bottom-nav__item, .fav-person, .card__fav, .star, .pkg__nav, .pkg__thumb, .ncard, .toast, .ring circle, .ncard__parts i, .posbar__fill, .posbar__dot, .gauge__me, .ncard__big b, .card__thumb img { transition: none !important; animation: none !important; }
  .card:active, .btn:active, .chip:active { transform: none; }
  html.js-feel .card__thumb img:not(.is-loaded), html.js-feel .pkg__img:not(.is-loaded), html.js-feel .srv__samples img:not(.is-loaded), html.js-feel .adb__photo img:not(.is-loaded) { opacity: 1; }
  html.js-feel .ncards:not(.is-in) .ring circle:nth-of-type(2) { stroke-dashoffset: inherit; }
  html.js-feel .ncards:not(.is-in) .ncard__parts i, html.js-feel .ncards:not(.is-in) .posbar__fill { width: auto !important; }
  html.js-feel .ncards:not(.is-in) .ncard__big b, html.js-feel .ncards:not(.is-in) .posbar__dot, html.js-feel .ncards:not(.is-in) .gauge__me { opacity: 1; transform: none; }
}
/* ページ間の移動（2026-09-22 ユーザー指示「すべてのページを移動するときと戻るときに気持ちのよいスムースなアニメーション」）
   1) Chrome 126+ / Safari 18.2+: クロスドキュメント View Transition。進むときは右から、戻るときは左から（common.js initPageTransitions が pageswap/pagereveal で html.vt-back を付ける）。
      ヘッダー・島（下部ナビ）・PC サイドメニューは view-transition-name で別グループ＝動かない。
   2) それ以外（Firefox・古い Safari）: common.js がリンクのクリックで html.pt-leave（150ms でフェードアウト）→ 遷移、着いたページは CSS だけで main がフェードイン（@supports not）。bfcache から戻ったときは pt-replay で再生。
   reduced-motion では両方とも無効 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: .3s; }
  ::view-transition-old(root) { animation: .16s cubic-bezier(.4, 0, 1, 1) both pt-vt-leave; }
  ::view-transition-new(root) { animation: .32s cubic-bezier(.16, .84, .3, 1) both pt-vt-enter; }
  html.vt-back::view-transition-old(root) { animation-name: pt-vt-leave-back; }
  html.vt-back::view-transition-new(root) { animation-name: pt-vt-enter-back; }
  .site-header { view-transition-name: site-header; }
  .bottom-nav { view-transition-name: bottom-nav; }
  .sidebar { view-transition-name: sidebar; }
  /* 2026-09-23: モード切替のカーソルはページを跨いで滑る（共有要素）。ヘッダーは動かない組なので、つまみだけが動く */
  .modesw__thumb { view-transition-name: modesw-thumb; }
  ::view-transition-group(modesw-thumb) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.35); z-index: 6; }
  ::view-transition-old(modesw-thumb), ::view-transition-new(modesw-thumb) { animation: none; }
  /* 男性向け ⇄ 女性向け: 横に流さず、その場でふわっと入れ替える（カーソルの移動を主役にする） */
  html.mode-swap::view-transition-old(root) { animation: .24s cubic-bezier(.4, 0, 1, 1) both ms-vt-out; }
  html.mode-swap::view-transition-new(root) { animation: .52s cubic-bezier(.16, .84, .3, 1) both ms-vt-in; }
  @keyframes ms-vt-out { to { opacity: 0; transform: scale(.986) translateY(-8px); } }
  @keyframes ms-vt-in { from { opacity: 0; transform: scale(1.014) translateY(12px); } }
  ::view-transition-old(site-header), ::view-transition-old(bottom-nav), ::view-transition-old(sidebar) { animation: none; opacity: 0; }
  ::view-transition-new(site-header), ::view-transition-new(bottom-nav), ::view-transition-new(sidebar) { animation: none; }
  /* 共有要素 hero（common.js が 1 要素だけに付ける）: 位置と大きさをなめらかに合わせる。ぼかし・影は使わない（軽さ優先） */
  ::view-transition-group(hero) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 3; }
  ::view-transition-old(hero), ::view-transition-new(hero) { animation-duration: .34s; height: 100%; object-fit: cover; overflow: hidden; border-radius: 10px; }
  ::view-transition-image-pair(hero) { isolation: isolate; }
  @keyframes pt-vt-leave { to { opacity: 0; transform: translateX(-22px) scale(.992); } }
  @keyframes pt-vt-enter { from { opacity: 0; transform: translateX(26px) scale(.992); } }
  @keyframes pt-vt-leave-back { to { opacity: 0; transform: translateX(22px) scale(.992); } }
  @keyframes pt-vt-enter-back { from { opacity: 0; transform: translateX(-26px) scale(.992); } }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@supports not (view-transition-name: x) {
  @media (prefers-reduced-motion: no-preference) {
    main, .site-footer { animation: pt-enter .32s cubic-bezier(.16, .84, .3, 1) backwards; }
    html.pt-replay main, html.pt-replay .site-footer { animation: pt-enter-back .32s cubic-bezier(.16, .84, .3, 1) backwards; }
    html.pt-leave main, html.pt-leave .site-footer { animation: pt-leave .15s cubic-bezier(.4, 0, 1, 1) forwards; }
    html.pt-leave.pt-leave-back main, html.pt-leave.pt-leave-back .site-footer { animation-name: pt-leave-back; }
    @keyframes pt-enter { from { opacity: 0; transform: translateX(22px); } }
    @keyframes pt-enter-back { from { opacity: 0; transform: translateX(-22px); } }
    @keyframes pt-leave { to { opacity: 0; transform: translateX(-18px); } }
    @keyframes pt-leave-back { to { opacity: 0; transform: translateX(18px); } }
  }
}

/* =====================================================================
   デザイン A「Ink & Lilac 2.0」＋ C の密度とセール色（2026-09-20 ユーザー承認）
   枠線なし・隙間を詰める・SCORE は金のタグ・英字の小見出し・価格を最大に・CTA は 1 本・セールは新色 --sale
   ===================================================================== */
:root { --sale: #ff6b8a; --sale-soft: rgba(255, 107, 138, .14); --sale-ink: #1a0b10; }
.grid { gap: 14px 8px; }
.card__thumb { border: 0; border-radius: 6px; background: var(--bg-elev); }
.card__body { padding: 7px 1px 0; }
.card__title { font-size: .86rem; }
.ov { border-radius: 3px; font-size: .66rem; padding: 2px 6px; }
.ov--sale, .ov--ending { background: var(--sale); color: #fff; }
.ov--score { background: var(--accent-warm); color: #1b170e; font-weight: 900; letter-spacing: .02em; }
.card__sale, .price--sale .price__now, .srv__off, .slide__sale { color: var(--sale); }
.price__off, .srv__off { background: var(--sale-soft); color: var(--sale); border: 1px solid rgba(255, 107, 138, .35); }
.ov--rank.ov--top { background: var(--accent); }
/* 英字の小見出し */
.sec__head[data-eyebrow] { position: relative; padding-top: 14px; flex-wrap: wrap; }
.sec__head[data-eyebrow]::before { content: attr(data-eyebrow); position: absolute; top: 0; left: 0; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); opacity: .9; }
.sec__title { font-size: 1.05rem; letter-spacing: -.01em; }
/* 作品ページ: 価格を最大に、CTA は 1 本＋文字リンク */
.page .srv__price, .srv__price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.srv__price s { font-size: .95rem; font-weight: 400; }
.srv__off { vertical-align: middle; font-size: .8rem; }
.srv__cta { align-items: center; gap: 8px 14px; }
.srv__cta .btn--primary { padding: 12px 22px; font-size: .95rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(179, 164, 255, .28); }
.srv__cta-links { display: inline-flex; gap: 14px; font-size: .84rem; }
.srv__cta-links a { color: var(--text-muted); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.srv__cta-links a:hover { color: var(--accent); }
.srv__cheaper { color: var(--sale); }
/* セール系のカードラベル・チップ */
.hg__chip[data-hg="sale"].is-active, .chip--sale { background: var(--sale-soft); border-color: var(--sale); color: #fff; }
.ncard--hot .ncard__big, .ncard--up .ncard__big { color: var(--sale); }
@media (max-width: 600px) {
  .grid { gap: 8px 2px; }
  .card__thumb { border-radius: 4px; }
  .sec__head[data-eyebrow]::before { left: 8px; }
  .sec__title { font-size: .98rem; }
  .page .srv__price, .page p.srv__price { font-size: 1.7rem; }
}

/* =====================================================================
   ナビ刷新（2026-09-20 ユーザー承認）: N1 浮かぶ島 ＋ N2 ミアバー ＋ N4 縮むヘッダー ＋ N6 PC のスペースと ⌘K
   js/common.js initIsland / initMiaBar / initKeys と対
   ===================================================================== */
@media (max-width: 600px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.has-mbar body { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* 島 */
  .bottom-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); border-radius: 26px; padding: 4px 6px; border: 1px solid rgba(179, 164, 255, .28); background: rgba(20, 19, 27, .82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 12px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08); transition: left .35s var(--spring), right .35s var(--spring), padding .35s var(--spring), border-radius .35s; }
  .bottom-nav__item { padding: 5px 2px 4px; border-radius: 16px; transition: transform .25s var(--spring), opacity .2s, color .2s, background-color .2s; }
  .bottom-nav__item.is-active { background: rgba(179, 164, 255, .16); color: #fff; }
  .bottom-nav__item.is-active .bottom-nav__icon { color: var(--accent); }
  .bottom-nav__item::before { display: none; }   /* 上の線は島では使わない（背景の丸で示す） */
  .bottom-nav__mia { flex: 0 0 56px; padding: 0; background: none !important; }
  .bottom-nav__miaimg { display: block; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7d9e6, #c9a6f5 60%, #7c5cc4) center / cover no-repeat; border: 2px solid rgba(8, 15, 31, .9); box-shadow: 0 0 0 2px rgba(179, 164, 255, .45), 0 6px 18px rgba(179, 164, 255, .45); transform: translateY(-12px); transition: transform .3s var(--spring), box-shadow .3s; }
  .bottom-nav__mia:active .bottom-nav__miaimg { transform: translateY(-12px) scale(.9); }
  .bottom-nav__mia[hidden] { display: none; }
  /* 縮む: 現在地 ＋ ミアだけの島に */
  .bottom-nav.is-mini { left: auto; right: 12px; padding: 4px 6px 4px 10px; border-radius: 30px; }
  .bottom-nav.is-mini .bottom-nav__item:not(.is-active):not(.bottom-nav__mia) { display: none; }
  .bottom-nav.is-mini .bottom-nav__item.is-active { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 6px 10px; }
  .bottom-nav.is-mini .bottom-nav__miaimg { width: 36px; height: 36px; transform: none; }
  .bottom-nav.is-mini .bottom-nav__mia { flex-basis: 40px; }
  /* 長押しの選択肢 */
  .bottom-nav__qa { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); width: 180px; z-index: 310; border-radius: 14px; background: rgba(22, 21, 28, .97); border: 1px solid rgba(179, 164, 255, .3); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); padding: 6px 0; animation: qa-in .22s var(--spring) both; transform-origin: bottom center; }
  @keyframes qa-in { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
  .bottom-nav__qa-h { margin: 0; padding: 4px 14px 6px; font-size: .66rem; letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; }
  .bottom-nav__qa a { display: block; padding: 10px 14px; font-size: .92rem; color: var(--text); }
  .bottom-nav__qa a:active { background: rgba(179, 164, 255, .16); }
  /* ミアバー */
  .mbar { position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); z-index: 295; display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 4px 0 6px; border-radius: 14px; color: var(--text); background: linear-gradient(90deg, rgba(179, 164, 255, .26), rgba(24, 22, 34, .92)); border: 1px solid rgba(179, 164, 255, .32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: sk-rise .5s var(--ease-out) backwards; transition: opacity .3s, transform .3s; }   /* 2026-09-20: fill-mode を both → backwards。both だとアニメ終了後も opacity:1 が固定され、nav-mini の opacity:0 が効かず「見えているのに押せない（pointer-events:none）」バーになっていた */
  .mbar.is-off { opacity: 0; transform: translateY(8px); }
  .mbar__mia { flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7d9e6, #c9a6f5 60%, #7c5cc4) center / cover no-repeat; border: 1.5px solid rgba(255, 255, 255, .25); }
  .mbar__tx { flex: 1; min-width: 0; line-height: 1.3; }
  .mbar__tx b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__tx span { display: block; font-size: .7rem; color: #d8d4e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__go { flex: none; font-size: .72rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #080f1f; }
  .mbar__link, .mbar__link:hover { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; color: inherit; text-decoration: none; }
  .mbar__go { min-height: 34px; display: inline-flex; align-items: center; padding: 0 12px; }
  .mbar__x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--text); font-size: 1.15rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  html.nav-mini .mbar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility 0s .3s; }   /* visibility も切る＝見えないものは押せない・押せるものは見える、を保証 */
  /* 縮むヘッダー */
  /* 縮むヘッダーは高さを変えない（sticky の高さが変わるとスクロール位置が跳ねて上下が点滅する。2026-09-20 ユーザー指摘）: transform で上へ逃がし、下端の帯だけ残す */
  .site-header { transition: transform .32s var(--ease-out); will-change: transform; }
  .site-header .hdr-mini { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; opacity: 0; pointer-events: none; transition: opacity .2s; background: var(--header); }
  .site-header.is-mini { transform: translateY(calc(44px - var(--hdr-h, 100px))); }
  .site-header.is-mini .site-header__inner { visibility: hidden; }
  .site-header.is-mini .hdr-mini { opacity: 1; pointer-events: auto; }
  .hdr-mini__pill { flex: 1; text-align: left; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(179, 164, 255, .35); background: rgba(179, 164, 255, .12); color: var(--text); font-size: .86rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
  .hdr-mini__pill span { color: var(--text-muted); font-weight: 400; }
  .hdr-mini__search { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); display: grid; place-items: center; }
  .hdr-mini__search svg { width: 18px; height: 18px; }
  /* シートの検索 */
  .sheet__search { display: flex; gap: 6px; margin: 4px 0 12px; }
  .sheet__search input { flex: 1; height: 40px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); padding: 0 12px; font-size: 16px; }
  .sheet__search button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--accent); color: #080f1f; display: grid; place-items: center; } .sheet__search button svg { width: 20px; height: 20px; }
}
@media (min-width: 601px) { .mbar, .hdr-mini, .bottom-nav__qa { display: none !important; } }
/* PC: サイドバーのスペース（動画／漫画／ゲーム）と J/K の現在地 */
.sidebar__spaces { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 4px 0 14px; }
.sidebar__space { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); background: var(--bg-elev); transition: transform .2s var(--spring), border-color .2s; }
.sidebar__space b { font-size: .62rem; opacity: .6; }
.sidebar__space:hover { transform: translateY(-1px); color: var(--text); }
.sidebar__space--video.is-active { border-color: var(--accent); background: rgba(179, 164, 255, .14); color: #fff; }
.sidebar__space--read.is-active { border-color: var(--accent-warm); background: rgba(216, 201, 167, .14); color: #fff; }
.sidebar__space--game.is-active { border-color: var(--accent-blue); background: rgba(143, 168, 216, .14); color: #fff; }
.card.is-key .card__thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bottom-nav, .bottom-nav__item, .bottom-nav__miaimg, .mbar, .site-header, .sidebar__space { transition: none !important; animation: none !important; } }

/* カードの角（2026-09-20 ユーザー指示「サムネの右上・左上には何も表示しない」）: 順位・セールは左下に並べ、♥ は右下、文脈ラベル・相性・収録分・SCORE は本文へ */
.card__media { position: relative; }
.card__bl { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; align-items: center; max-width: calc(100% - 44px); }
.card__bl .ov { position: static; max-width: none; overflow: visible; }   /* 親（card__bl）は幅 auto なので % の max-width が循環して「…」だけになっていた（2026-09-20 ユーザー指摘） */
.card__media .card__fav, .card__fav { top: auto; bottom: 6px; right: 6px; left: auto; width: 30px; height: 30px; }
.card__tag { margin: 0 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); display: flex; gap: 8px; flex-wrap: wrap; }
.card__tag--sale, .card__tag--ending { color: var(--sale); } .card__tag--gem { color: #5fd6b0; } .card__tag--hot { color: var(--sale); } .card__tag--review, .card__tag--best, .card__tag--adventure { color: var(--accent-warm); } .card__tag--new, .card__tag--latest { color: var(--accent-blue); }
.card__tag--match { color: var(--positive); }
.card__score { display: inline-block; padding: 0 5px; border-radius: 3px; background: var(--accent-warm); color: #1b170e; font-weight: 900; font-size: .68rem; line-height: 1.5; vertical-align: 1px; }
@media (max-width: 600px) { .card__media .card__fav, .card__fav { width: 28px; height: 28px; bottom: 5px; right: 5px; opacity: 1; } .card__tag { padding: 0 1px; } }

/* 島の上に来るもの（2026-09-20 精査）: 比較トレイ・トースト・ホーム画面追加は島（bottom 10 + 高さ 64）より上 */
@media (max-width: 600px) {
  .tray { bottom: calc(84px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); left: 12px; right: 12px; border-radius: 14px; border: 1px solid var(--border); }
  html.has-mbar .tray { bottom: calc(138px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); }
  html.has-mbar .toast { bottom: calc(146px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); }
  .bottom-nav__item, .bottom-nav__mia { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* 長押しで iOS のリンクプレビューを出さない */
  body.is-reel .bottom-nav { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); box-shadow: none; }   /* ショートは従来どおり端に貼る（動画の領域を計算しているため） */
  body.is-reel .bottom-nav__miaimg { transform: none; width: 34px; height: 34px; }
  body.is-reel .bottom-nav.is-mini { left: 0; right: 0; }
  body.is-reel .bottom-nav.is-mini .bottom-nav__item { display: flex; }
}
/* 判断材料 4 点（作品ページの価格の直下。2026-09-20 監査 Phase 1） */
.srv__decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.srv__decide > div { background: var(--glass); border: 1px solid var(--glass-border-soft); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.srv__decide dt { font-size: .66rem; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 2px; }
.srv__decide dd { margin: 0; font-size: .9rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.srv__decide dd b { font-size: 1.05rem; } .srv__decide dd a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.srv__decide dd s { color: var(--text-muted); font-size: .8rem; margin-left: 4px; }
.srv__d-off { font-style: normal; color: var(--sale); font-weight: 800; font-size: .8rem; margin-left: 4px; }
.srv__d-sub { display: block; font-size: .74rem; color: var(--text-muted); }
.srv__decide small { display: block; font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 600px) { .srv__decide { grid-template-columns: 1fr 1fr; gap: 4px; } .srv__decide dd { font-size: .84rem; } .srv__decide dd b { font-size: .98rem; } }
/* ホームの箱の並び（2026-09-20 監査 Phase 3: 目的別。今夜 → 今安い／あなた向け → 人気・新着 → 急上昇／調べ → 続きを探す → 特集 → ミア） */
main > section.container:has(#rails) { display: flex; flex-direction: column; }
main > section.container:has(#rails) > * { order: 0; }
main > section.container:has(#rails) > #tonight { order: 1; }
main > section.container:has(#rails) > #personal { order: 2; }
main > section.container:has(#rails) > #recent { order: 3; }   /* 2026-09-21 UX 再設計: 続きを探す（For You）は人気・新着より上 */
main > section.container:has(#rails) > .catbar--inline { order: 1; }   /* 2026-09-22 Home 整理: 区分タブは今夜のおすすめの直後（同じ order 1 で DOM が後）＝First View の外・最初のスクロールで届く（js/app.js placeCatbar が DOM を移す） */
main > section.container:has(#rails) > #rails { order: 5; }
main > section.container:has(#rails) > #discover { order: 6; }
main > section.container:has(#rails) > #specials { order: 7; }
main > section.container:has(#rails) > #home-mia { order: 8; }
main > section.container:has(#rails) > #list-view { order: 9; }
html.view-list main > section.container:has(#rails) { display: block; }   /* 一覧表示は従来どおり */
.hg + .sec, .hg ~ .sec { margin-top: 8px; }
.srv__compare .srv__seen { display: block; font-size: .66rem; color: var(--text-muted); }
/* MIA MATCH（作品評価 = YUMEVIQ SCORE、あなたとの相性 = MIA MATCH。2026-09-20 監査 Phase 4: 名前で役割を分ける） */
.wmatch { position: relative; }
.wmatch::before { content: "MIA MATCH"; position: absolute; top: 6px; right: 10px; font-size: .58rem; letter-spacing: .16em; font-weight: 800; color: var(--accent); opacity: .85; }
/* ミアに選んでもらう（2026-09-20 監査 Phase 5。app.js MiaPick） */
.sec__pick { margin-left: auto; }
.pick__panel { max-height: 88vh; overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.pick__close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--text); font-size: 1.1rem; }
.pick__mia { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 12px; } .pick__mia .mia-speech { flex: 1; }
.pick__opts { display: grid; gap: 8px; margin: 8px 0 4px; } .pick__opt { justify-content: flex-start; text-align: left; padding: 12px 14px; font-size: .95rem; }
.pick__step { margin: 8px 0 0; text-align: center; font-size: .74rem; color: var(--text-muted); }
.pick__grid { margin: 4px 0 12px; }
@media (max-width: 600px) { .pick__grid { grid-template-columns: 1fr 1fr; } .pick__grid .card:first-child { grid-column: 1 / -1; } .sec__pick { width: 100%; margin: 6px 0 0; } }
/* 初回タイルはスマホで 1 行の横スクロール（2026-09-20 監査 Phase 3: 最初の画面に作品を出す） */
@media (max-width: 600px) {
  .intro { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 6px; margin: 4px 0 8px; padding: 0 8px 2px; scrollbar-width: none; }
  .intro::-webkit-scrollbar { display: none; }
  .intro__tile { flex: 0 0 78%; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
  .intro__tile strong { flex: none; font-size: .9rem; } .intro__tile span { font-size: .74rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ミアに相談する（assist.html。2026-09-20 ユーザー指示: 吹き出しを廃止し、相談は特設ページに） */
.assist__hero { display: flex; align-items: flex-end; gap: 14px; margin: 8px 0 6px; }
.assist__mia { flex: none; width: 132px; }
.assist__head { flex: 1; min-width: 0; } .assist__head h1 { margin: 2px 0 8px; }
.assist__greet { margin: 0; }
.assist__q { margin: 12px 0 0; } .assist__q-t { margin: 0 0 6px; font-weight: 700; font-size: .92rem; }
.assist__opts { display: flex; flex-wrap: wrap; gap: 6px; } .assist__opts .chip { padding: 8px 12px; font-size: .86rem; } .assist__opts .chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: #fff; }
.assist__go { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; } .assist__pool { font-size: .76rem; color: var(--text-muted); }
.assist__result { margin-top: 12px; } .assist__grid { margin-top: 10px; }
.assist__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.assist__now-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); min-width: 0; max-width: 100%; overflow: hidden; text-decoration: none; }
.assist__now-item img { width: 72px; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; flex: none; }
.assist__now-body { flex: 1 1 0; min-width: 0; overflow: hidden; } .assist__now-body b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .assist__now-body small { color: var(--text-muted); font-size: .74rem; }
.assist__now-item--ending .assist__now-body small { color: var(--sale); font-weight: 700; }
.assist__linkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.assist__link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.assist__link, .assist__link:hover, .page .assist__link, .page .assist__link:hover { text-decoration: none; } .assist__link strong { font-size: .9rem; color: var(--text); } .assist__link span { font-size: .72rem; color: var(--text-muted); }
.assist__link:hover { border-color: var(--accent); }
/* ミアのこと: タイルの右下にミアの表情、背景に淡い光、下にシーンの絵（2026-09-20 ユーザー指示「イラストをちりばめて見映え良く」） */
.assist__links { position: relative; overflow: hidden; }
.assist__links-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 10% 0%, rgba(197,163,255,.18), transparent 70%), radial-gradient(50% 45% at 95% 100%, rgba(255,150,190,.14), transparent 70%); }
.assist__links > h2, .assist__linkgrid, .assist__scenes { position: relative; }
.assist__link { position: relative; overflow: hidden; min-height: 92px; padding-right: 76px; }
.assist__link-mia { position: absolute; right: -6px; bottom: -10px; width: 78px; height: 78px; pointer-events: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.assist__link-mia .mia { --mia-size: 78px; animation: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.assist__link:hover .assist__link-mia { transform: translateY(-4px) scale(1.06); }
.assist__scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.assist__scene { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-elev); }
.assist__scene img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.assist__scene:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .assist__hero { align-items: center; } .assist__mia { width: 96px; } .assist__grid { grid-template-columns: 1fr 1fr; } .assist__grid .card:first-child { grid-column: 1 / -1; } .assist__linkgrid { grid-template-columns: 1fr 1fr; } .assist__link { min-height: 78px; padding: 8px 54px 8px 10px; } .assist__link strong { font-size: .84rem; } .assist__link span { font-size: .66rem; } .assist__link-mia { width: 60px; height: 60px; right: -8px; bottom: -8px; } .assist__link-mia .mia { --mia-size: 60px; } .assist__scenes { grid-template-columns: 1fr 1fr; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .assist__link-mia, .assist__scene img { transition: none; } }
/* 旧: 島の上の吹き出し・右下ドック（廃止。ensureDock が null を返すので DOM に出ない） */

/* =====================================================================
   吹き出しの刷新（2026-09-20 ユーザー指示「吹き出しのクオリティを上げて」）: 雲型・ゆらぎ・手書き風をやめ、
   静かなガラスのカードに小さな名札「ミア」。しっぽは 1 つの三角。行間広め・文字は本文と同じ書体
   ===================================================================== */
.mia-speech, .mia__bubble, .tp__mia-say { font-family: var(--font); }
.mia-speech { border-radius: 14px; padding: 14px 16px 12px; background: linear-gradient(165deg, rgba(38, 34, 52, .96), rgba(22, 20, 32, .98)); border: 1px solid rgba(179, 164, 255, .28); box-shadow: 0 10px 28px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06); font-size: .9rem; line-height: 1.75; letter-spacing: .01em; animation: sk-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.mia-speech::before, .mia-speech::after { content: none; }
.mia-speech::before, .mia-speech--left::before { content: "ミア"; position: static; display: inline-block; width: auto; height: auto; left: auto; top: auto; margin: 0 8px 4px 0; padding: 1px 8px; border: 0; border-radius: 999px; box-shadow: none; background: rgba(179, 164, 255, .16); color: var(--accent-hover); font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1.6; vertical-align: 2px; transform: none; }   /* 旧・雲型のしっぽ（absolute 12px）の指定を上書き */
.mia-speech--left { margin-left: 10px; }
.mia-speech--left::after { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: rgba(36, 32, 50, .97); border-left: 1px solid rgba(179, 164, 255, .28); border-bottom: 1px solid rgba(179, 164, 255, .28); transform: rotate(45deg); border-radius: 2px; }
.mia-speech p { margin: 0; }
.mia-speech p + p { margin-top: 6px; }
.mia-speech__sub { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .74rem; color: var(--text-muted); line-height: 1.5; }
.mia-speech__sub::before { content: none !important; }
.mia-place { align-items: flex-start; }
.sidebar__mia .mia-speech { font-size: .76rem; padding: 10px 12px 9px; }
/* 上向きのしっぽ（ミアの下に置く吹き出し。サイドメニュー） */
.mia-speech--up::before { content: "ミア"; position: static; display: inline-block; width: auto; height: auto; left: auto; top: auto; margin: 0 8px 4px 0; padding: 1px 8px; border: 0; border-radius: 999px; box-shadow: none; background: rgba(179, 164, 255, .16); color: var(--accent-hover); font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1.6; vertical-align: 2px; }
.mia-speech--up::after { content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; background: rgba(36, 32, 50, .97); border-left: 1px solid rgba(179, 164, 255, .28); border-top: 1px solid rgba(179, 164, 255, .28); transform: rotate(45deg); border-radius: 2px; }
.mia-speech--plain::before { content: none; }
@media (prefers-reduced-motion: reduce) { .mia-speech { animation: none; } }

.assist .grid { gap: 12px 8px; }
.assist .assist__result .grid, .assist #reco-grid { margin-top: 8px; }
.assist .card__title { font-size: .84rem; }
.assist__hero .mia-speech { max-width: 62ch; }
@media (max-width: 600px) { .assist #reco-grid { grid-template-columns: 1fr 1fr; gap: 10px 4px; } .assist__now-item img { width: 64px; } }

/* 迷った瞬間の「ミアに相談する」（検索 0 件・マイリスト空・ショートの終わりカード。2026-09-20） */
.chip--mia { border-color: rgba(197,163,255,.55); background: linear-gradient(135deg, rgba(197,163,255,.18), rgba(255,150,190,.12)); color: var(--text); text-decoration: none; }
.chip--mia::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 25%, #c5a3ff 26% 60%, #7d5cc2 61%); }
.chip--mia:hover { border-color: var(--accent); }
.slide__endassist { display: inline-block; margin-top: 10px; font-size: .82rem; color: #d9c8ff; text-decoration: underline; text-underline-offset: 3px; }

/* 女優データベース: API の顔写真（125×125）を実寸で（2026-09-20 ユーザー指示「顔写真の API に。荒くならないサイズで」）。拡大しない＝ぼやけない */
.adb__card--api { align-items: stretch; }
.adb__photo--api { aspect-ratio: auto; width: 125px; height: 125px; max-width: 100%; margin: 12px auto 0; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--glass-border-soft); }
.adb__photo--api img { width: 100%; height: 100%; object-fit: cover; }
.adb__card--api .adb__body { text-align: center; align-items: center; }
.adb__card--api .adb__tags { justify-content: center; }
.adb__mini-img.is-api { aspect-ratio: 1 / 1; width: 100px; max-width: 100%; height: auto; object-position: center; border-radius: 14px; }
@media (max-width: 600px) { .adb__photo--api { width: 112px; height: 112px; margin-top: 10px; } .adb__mini-img.is-api { width: 96px; } }

/* 女優データベースの洗練（2026-09-20 ユーザー指示）: 顔写真のグリッド・KPI タイル・詰めた余白 */
.adb__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.adb__kpi { padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border-soft); display: flex; flex-direction: column; gap: 2px; }
.adb__kpi b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.adb__kpi b i { font-style: normal; font-size: .8rem; font-weight: 600; margin-left: 2px; color: var(--text-muted); }
.adb__kpi span { font-size: .74rem; color: var(--text-muted); }
.adb__kpi small { font-size: .68rem; color: var(--text-muted); opacity: .8; }
.adb .adb__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.adb__card--api { border-radius: 14px; }
.adb__card--api .adb__body { padding: 6px 8px 10px; gap: 2px; }
.adb__card--api .adb__name { font-size: .9rem; }
.adb__card--api .adb__ruby { display: none; }
.adb__card--api .adb__spec { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.adb__card--api .adb__line { font-size: .7rem; }
.adb__card--api .adb__tags .chip { font-size: .66rem; padding: 1px 7px; }
.adb__card--api .adb__tags .chip:nth-child(n+3) { display: none; }
.adb .srv__sec > h2, .adb .sec__title { font-size: 1.05rem; }
.adb .adb__dist { gap: 6px 20px; }
.adb .adb__bars li { font-size: .74rem; padding: 2px 0; }
@media (max-width: 600px) {
  .adb .adb__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .adb__photo--api { width: 84px; height: 84px; margin-top: 8px; border-radius: 14px; }
  .adb__card--api .adb__body { padding: 4px 4px 8px; }
  .adb__card--api .adb__name { font-size: .78rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .adb__card--api .adb__spec { font-size: .64rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .adb__card--api .adb__line, .adb__card--api .adb__tags { display: none; }
  .adb__card:not(.adb__card--api) { grid-column: span 1; }
  .adb__photo--cover { aspect-ratio: 1 / 1; }
  .adb__name-on strong { font-size: .78rem; } .adb__name-on { left: 6px; right: 6px; bottom: 6px; }
  .adb__kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
  .adb__kpi { padding: 10px 12px; } .adb__kpi b { font-size: 1.35rem; }
}

/* ===== 女優ランキング（/actresses 上部。2026-09-20） ===== */
.adb__rank .srv__note { margin-top: -2px; }
.adb__rank-row { display: grid; grid-auto-flow: column; grid-auto-columns: 120px; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.adb__rank-card, .adb__rank-card:hover, .page .adb__rank-card { text-decoration: none; } .adb__rank-card, .adb__rank-card:hover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--text); text-align: center; scroll-snap-align: start; }
.adb__rank-card img { width: 108px; height: 108px; object-fit: cover; border-radius: 18px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); display: block; }
.adb__rank-card b { font-size: .8rem; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb__rank-card small { font-size: .66rem; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb__rank-no { position: absolute; top: -4px; left: 2px; z-index: 2; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; background: rgba(20, 18, 30, .9); color: var(--text); border: 1px solid var(--glass-border-soft); }
.adb__rank-no.is-top { background: linear-gradient(135deg, #f6d365, #e8a33d); color: #1a1408; border-color: transparent; box-shadow: 0 4px 12px rgba(232, 163, 61, .35); }
[data-rank="picked"] .adb__rank-no.is-top { background: linear-gradient(135deg, var(--accent), #ff8fb3); color: #080f1f; }
@media (max-width: 600px) { .adb__rank-row { grid-auto-columns: 104px; gap: 8px; margin: 0 -12px; padding: 4px 12px 10px; } .adb__rank-card img { width: 96px; height: 96px; } }

/* ===== 推し診断: 入口 ===== */
.aq-entry__box { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(120deg, rgba(179, 164, 255, .22), rgba(255, 107, 138, .12) 60%, rgba(24, 22, 34, .6)); border: 1px solid rgba(179, 164, 255, .35); }
.aq-entry__box::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 60%); pointer-events: none; }
.aq-entry__tx { flex: 1; min-width: 0; }
.aq-entry__eyebrow { margin: 0 0 2px; font-size: .68rem; letter-spacing: .18em; color: #d9c8ff; font-weight: 700; }
.aq-entry__box h2 { margin: 0 0 4px; font-size: 1.3rem; }
.aq-entry__box p { margin: 0; font-size: .82rem; color: var(--text-muted); }
.aq-entry__mine { margin-top: 8px !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem !important; color: var(--text) !important; }
.aq-entry__mine a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 700; }
.aq-entry__mine img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.aq-entry__mine span { color: var(--text-muted); }
.aq-entry__go { flex: none; padding: 12px 18px; font-size: .95rem; box-shadow: 0 10px 26px rgba(179, 164, 255, .35); }
@media (max-width: 600px) { .aq-entry__box { flex-direction: column; align-items: stretch; padding: 16px; } .aq-entry__go { width: 100%; } }

/* ===== 推し診断: オーバーレイ ===== */
html.aq-open { overflow: hidden; }
.aq { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 12px; }
.aq__bg { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, rgba(179, 164, 255, .25), transparent 60%), rgba(8, 7, 12, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.aq__box { position: relative; width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-border-soft); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; animation: sk-rise .45s var(--ease-out) both; }
.aq__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--glass-border-soft); }
.aq__brand { font-size: .68rem; letter-spacing: .18em; font-weight: 800; color: #d9c8ff; flex: none; }
.aq__prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aq__prog-t { font-size: .74rem; color: var(--text-muted); }
.aq__prog-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.aq__prog-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ff8fb3); transition: width .5s var(--ease-out); }
.aq__x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--text); font-size: 1.15rem; }
.aq__stage { padding: 18px 16px 20px; overflow-y: auto; opacity: 0; transform: translateY(10px); }
.aq__stage.is-in { opacity: 1; transform: none; transition: opacity .35s, transform .35s var(--ease-out); }
.aq__q { margin: 4px 0 14px; font-size: 1.35rem; text-align: center; text-wrap: balance; }
.aq__q small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 500; color: var(--text-muted); }
.aq__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aq__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 16px; border-radius: 16px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); text-align: left; font: inherit; cursor: pointer; animation: sk-rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .18s var(--ease-out), border-color .18s, background .18s; }
.aq__tile b { font-size: 1.05rem; }
.aq__tile span { font-size: .74rem; color: var(--text-muted); }
.aq__tile:hover { border-color: var(--accent); background: rgba(179, 164, 255, .1); transform: translateY(-2px); }
.aq__tile.is-hit { border-color: var(--accent); background: rgba(179, 164, 255, .22); transform: scale(.97); }
.aq__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aq__chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; animation: sk-rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .18s var(--ease-out), background .18s, border-color .18s; }
.aq__chip.is-on { background: var(--accent); color: #080f1f; border-color: var(--accent); transform: scale(1.04); }
.aq__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; }
.aq__note, .aq__hint { text-align: center; font-size: .74rem; color: var(--text-muted); margin: 10px 0 0; }
.aq__loading { text-align: center; padding: 40px 0; color: var(--text-muted); }
.aq__spin { display: inline-block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); animation: aq-spin .8s linear infinite; }
@keyframes aq-spin { to { transform: rotate(360deg); } }
/* 対戦 */
.aq__vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.aq__vs-mark { align-self: center; font-weight: 900; font-size: .9rem; letter-spacing: .1em; color: #d9c8ff; padding: 6px 4px; }
.aq__card { position: relative; display: flex; flex-direction: column; padding: 0; border-radius: 18px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; animation: sk-rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s, opacity .3s; }
.aq__card-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-elev); }
.aq__card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; transition: transform .6s var(--ease-out); }
.aq__card-img.is-pkg img, .aq__champ-img.is-pkg > img:first-child { object-position: 100% 50%; }   /* パッケージは表紙側（右半分） */
.aq__card-face { position: absolute; top: 8px; left: 8px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.aq__card-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq__card-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.aq__card-body b { font-size: .92rem; line-height: 1.25; }
.aq__card-body small { font-size: .7rem; color: var(--text-muted); }
.aq__card-body em { font-style: normal; font-size: .66rem; color: #d9c8ff; }
.aq__card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 36px rgba(179, 164, 255, .25); }
.aq__card:hover .aq__card-img img { transform: scale(1.05); }
.aq__card.is-win { transform: scale(1.04); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179, 164, 255, .5), 0 20px 50px rgba(179, 164, 255, .35); z-index: 2; }
.aq__card.is-win::after { content: "♥ 選択"; position: absolute; right: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: #080f1f; font-size: .72rem; font-weight: 800; animation: feel-pop .5s var(--ease-out) both; }
.aq__card.is-lose { opacity: .25; transform: scale(.94); filter: grayscale(.6); }
/* 結果 */
.aq__result { display: flex; flex-direction: column; gap: 16px; }
.aq__champ { position: relative; text-align: center; padding: 8px 0 4px; }
.aq__crown { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) translateY(0); font-size: 2rem; z-index: 3; animation: a2hs-float 3s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.aq__champ-img { position: relative; width: min(280px, 70vw); margin: 14px auto 10px; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 0 0 6px rgba(179, 164, 255, .25), 0 30px 60px rgba(0, 0, 0, .5); }
.aq__champ-img > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.aq__champ-face { position: absolute; right: 10px; bottom: 10px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.aq__champ-eyebrow, .aq__type-eyebrow { margin: 0; font-size: .68rem; letter-spacing: .18em; color: #d9c8ff; font-weight: 700; }
.aq__champ-name { margin: 2px 0 2px; font-size: 1.6rem; }
.aq__champ-name a { color: var(--text); text-decoration: none; }
.aq__champ-spec { margin: 0; font-size: .8rem; color: var(--text-muted); }
.aq__champ-fav { margin: 8px 0 0; }
.aq__type { text-align: center; padding: 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(179, 164, 255, .18), rgba(255, 107, 138, .1)); border: 1px solid rgba(179, 164, 255, .3); }
.aq__type-text { margin: 4px 0 2px; font-size: 1.15rem; font-weight: 800; }
.aq__type-note { margin: 0; font-size: .72rem; color: var(--text-muted); }
.aq__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.aq__people--sm { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.aq__person, .aq__person:hover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; text-align: center; }
.aq__person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.aq__person.is-sm img { width: 48px; height: 48px; }
.aq__person b { font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq__person small { font-size: .66rem; color: var(--text-muted); }
.aq__fav { position: absolute; top: 4px; right: 4px; }
.aq__burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.aq__burst i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; background: hsl(var(--h) 90% 70%); transform: rotate(var(--a)) translateY(0); animation: aq-burst calc(var(--d) * 1s) var(--ease-out) both; }
@keyframes aq-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(.4); } }
@media (max-width: 600px) { .aq { padding: 0; align-items: stretch; } .aq__box { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; } .aq__stage { padding: 14px 12px 24px; } .aq__q { font-size: 1.15rem; } .aq__tile { padding: 14px 12px; } .aq__card-body b { font-size: .8rem; } .aq__people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .aq__box, .aq__tile, .aq__chip, .aq__card, .aq__crown, .aq__burst i { animation: none !important; } .aq__stage, .aq__card, .aq__tile, .aq__chip { transition: none !important; } }

/* ===== MIA QUEST（assist.html。2026-09-20） ===== */
.page.mq { max-width: 1100px; }
.mq__stage { position: relative; border-radius: 22px; overflow: hidden; background: #0b0a12; border: 1px solid var(--glass-border-soft); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); min-height: 520px; display: grid; grid-template-rows: 1fr auto; isolation: isolate; }
.mq__room { position: absolute; inset: 0; z-index: 0; }
.mq__bg, .mq__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mq__video { opacity: 0; transition: opacity 1.2s; }
.mq__room.has-video .mq__video { opacity: 1; }
.mq__room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 12, .1) 0%, rgba(8, 7, 12, 0) 35%, rgba(8, 7, 12, .78) 100%); pointer-events: none; }
.mq__wx { position: absolute; top: 12px; left: 14px; z-index: 2; font-size: .7rem; letter-spacing: .08em; color: #efe9ff; background: rgba(8, 7, 12, .55); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(197, 163, 255, .35); backdrop-filter: blur(6px); }
.mq__mia { position: absolute; right: 14px; bottom: 150px; z-index: 2; width: 200px; height: 200px; pointer-events: none; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); transform: translateY(20px); opacity: 0; transition: opacity .8s .3s, transform .8s .3s var(--ease-out); }
html.mq-ready .mq__mia { opacity: 1; transform: none; }
.mq__mia .mia { --mia-size: 200px; }
.mq__box { position: relative; z-index: 3; margin: 12px; padding: 14px 16px 16px; border-radius: 16px; background: rgba(14, 12, 22, .78); border: 1px solid rgba(197, 163, 255, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); align-self: end; opacity: 0; transform: translateY(12px); transition: opacity .6s .6s, transform .6s .6s var(--ease-out); }
html.mq-ready .mq__box { opacity: 1; transform: none; }
.mq__eyebrow { margin: 0 0 4px; font-size: .64rem; letter-spacing: .2em; color: #d9c8ff; font-weight: 800; } .mq__eyebrow span { letter-spacing: .04em; opacity: .7; margin-left: 6px; }
.mq__text { margin: 0 0 10px; font-size: 1rem; line-height: 1.75; min-height: 3.4em; color: #f4f1fb; }
.mq__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mq__choice { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(197, 163, 255, .55); background: rgba(197, 163, 255, .12); color: #f4f1fb; font: inherit; font-size: .86rem; cursor: pointer; animation: sk-rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + .35s); transition: transform .18s var(--ease-out), background .18s; }
.mq__choice:hover { background: rgba(197, 163, 255, .28); transform: translateY(-1px); }
.mq__choice.is-hit { background: var(--accent); color: #080f1f; border-color: var(--accent); transform: scale(.97); }
.mq__hud { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.mq__hud-i { font-size: .72rem; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border-soft); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mq__hud-i b { color: var(--text); }
.mq__hud-i--new { background: var(--accent); color: #080f1f; border-color: var(--accent); }
.mq__picks { margin: 8px 0 12px; }
.mq__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px 0 12px; padding: 2px; }
.mq__tabs::-webkit-scrollbar { display: none; }
.mq__tabs button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); font: inherit; font-size: .84rem; cursor: pointer; }
.mq__tabs button.is-active { background: var(--accent); color: #080f1f; border-color: var(--accent); }
.mq__panel { padding: 16px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); margin: 0 0 14px; }
.mq__panel h2 { margin: 0 0 10px; font-size: 1.05rem; } .mq__panel h2 small { font-weight: 500; color: var(--text-muted); font-size: .78rem; margin-left: 6px; }
.mq__panel h3 { margin: 16px 0 8px; font-size: .92rem; } .mq__panel h3 small { font-weight: 400; color: var(--text-muted); font-size: .74rem; margin-left: 6px; }
.mq__note { margin: 8px 0 0; font-size: .74rem; color: var(--text-muted); }
.mq__quests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mq__quest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border-soft); }
.mq__quest.is-done { border-color: rgba(94, 196, 138, .5); background: rgba(94, 196, 138, .08); }
.mq__quest-t { flex: 1; min-width: 0; font-size: .86rem; } .mq__quest-t small { display: block; font-size: .7rem; color: var(--text-muted); }
.mq__quest-p { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--text-muted); }
.mq__quest-ok { color: #5ec48a; font-weight: 800; }
.mq__quests--boss .mq__quest { border-color: rgba(232, 163, 61, .5); background: rgba(232, 163, 61, .08); }
.mq__chest { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--glass-border-soft); color: var(--text-muted); font-size: .84rem; }
.mq__chest b { color: var(--text); } .mq__chest small { margin-left: auto; font-size: .72rem; }
.mq__chest.is-ready { border-style: solid; border-color: var(--accent); background: linear-gradient(120deg, rgba(179, 164, 255, .18), rgba(255, 107, 138, .1)); }
.mq__chest-ico { font-size: 1.5rem; }
.mq__chest.is-ready .mq__chest-ico { animation: a2hs-float 2.4s ease-in-out infinite; }
.mq__chestov, .mq__awaken { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 7, 12, .8); backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s; }
.mq__chestov.is-in, .mq__awaken.is-in { opacity: 1; }
.mq__chestbox { position: relative; width: min(360px, 100%); padding: 24px 20px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-border-soft); text-align: center; animation: sk-rise .5s var(--ease-out) both; }
.mq__chestbox--gold { border-color: #e8a33d; box-shadow: 0 0 0 4px rgba(232, 163, 61, .25), 0 30px 70px rgba(232, 163, 61, .25); }
.mq__chestbox--silver { border-color: #c7c9d6; box-shadow: 0 0 0 4px rgba(199, 201, 214, .2); }
.mq__chestlid { font-size: 4rem; animation: feel-pop .8s var(--ease-out) both; }
.mq__chest-title { margin: 6px 0; font-weight: 800; font-size: 1.2rem; }
.mq__chestbox ul { list-style: none; padding: 0; margin: 6px 0 10px; } .mq__chestbox li { padding: 4px 0; }
.mq__chest-line { font-size: .86rem; color: var(--text-muted); margin: 0 0 12px; }
.mq__toast { position: fixed; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 940; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(14, 12, 22, .9); border: 1px solid rgba(197, 163, 255, .4); color: #f4f1fb; font-size: .82rem; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease-out); max-width: 520px; margin: 0 auto; }
.mq__toast.is-in { opacity: 1; transform: none; }
.mq__toast .mia { --mia-size: 44px; flex: none; animation: none; }
@media (min-width: 601px) { .mq__toast { bottom: 28px; } }
/* 遊ぶ */
.mq__games { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mq__game { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .18s var(--ease-out), border-color .18s; }
.mq__game:hover { border-color: var(--accent); transform: translateY(-2px); }
.mq__game b { font-size: .95rem; } .mq__game span { font-size: .74rem; color: var(--text-muted); } .mq__game small { font-size: .68rem; color: #d9c8ff; }
.mq__gamebox { margin-top: 12px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--glass-border-soft); }
.mq__gamebox h3 { margin: 0 0 10px; }
.mq__vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.mq__vs-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; text-align: left; overflow: hidden; cursor: pointer; transition: transform .2s var(--ease-out), border-color .2s, opacity .3s; }
.mq__vs-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.mq__vs-card b { padding: 0 10px; font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mq__vs-card small { padding: 0 10px; font-size: .68rem; color: var(--text-muted); }
.mq__vs-card em { position: absolute; top: 8px; right: 8px; font-style: normal; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(8, 7, 12, .8); color: #fff; font-size: .76rem; }
.mq__vs-card.is-win { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179, 164, 255, .45); } .mq__vs-card.is-lose { opacity: .4; }
.mq__memory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mq__mem { position: relative; aspect-ratio: 3 / 2; border-radius: 10px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); overflow: hidden; padding: 0; cursor: pointer; perspective: 600px; }
.mq__mem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: rotateY(90deg); transition: transform .25s, opacity .2s; }
.mq__mem-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; color: rgba(197, 163, 255, .5); font-size: 1.4rem; background: linear-gradient(135deg, rgba(179, 164, 255, .18), rgba(255, 107, 138, .08)); transition: opacity .2s; }
.mq__mem.is-open img, .mq__mem.is-done img { opacity: 1; transform: none; } .mq__mem.is-open .mq__mem-back, .mq__mem.is-done .mq__mem-back { opacity: 0; }
.mq__mem.is-done { border-color: #5ec48a; opacity: .75; }
.mq__who { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 12px; align-items: start; }
.mq__who-img { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border-soft); }
.mq__who-img img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.mq__who-img.is-pkg img:first-child { object-position: 100% 50%; }
.mq__who-face { position: absolute; left: 8px; bottom: 8px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.mq__who-opts { display: grid; gap: 8px; } .mq__who-opts .btn { justify-content: flex-start; }
.mq__who-opts .btn.is-win { border-color: #5ec48a; background: rgba(94, 196, 138, .15); } .mq__who-opts .btn.is-lose { border-color: var(--sale, #ff6b8a); background: rgba(255, 107, 138, .12); }
.mq__predict-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.mq__predict-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 8px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; text-align: left; overflow: hidden; cursor: pointer; }
.mq__predict-opt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .mq__predict-opt b { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(8, 7, 12, .8); color: #fff; font-size: .74rem; } .mq__predict-opt span { padding: 0 8px; font-size: .74rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mq__predict-mine { padding: 10px 12px; border-radius: 12px; background: rgba(179, 164, 255, .12); border: 1px solid rgba(179, 164, 255, .35); font-size: .86rem; }
.mq__predict-hist { list-style: none; margin: 10px 0 0; padding: 0; font-size: .76rem; color: var(--text-muted); } .mq__predict-hist li { padding: 3px 0; border-bottom: 1px dashed var(--glass-border-soft); }
/* 図鑑・部屋・物語・手紙 */
.mq__dex-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.mq__dex-tile { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border-soft); display: flex; flex-direction: column; }
.mq__dex-tile b { font-size: 1.3rem; font-variant-numeric: tabular-nums; } .mq__dex-tile b small { font-size: .7rem; color: var(--text-muted); font-weight: 500; margin-left: 2px; } .mq__dex-tile span { font-size: .72rem; color: var(--text-muted); } .mq__dex-tile > small { font-size: .64rem; color: var(--text-muted); opacity: .8; }
.mq__dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } .mq__dex-grid--sm { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.mq__dex-item { margin: 0; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border-soft); text-align: center; }
.mq__dex-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mq__dex-q { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: .78rem; color: var(--text-muted); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 12px); }
.mq__dex-item figcaption { font-size: .66rem; padding: 4px 4px 6px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__dex-item.is-seen figcaption { color: var(--text); } .mq__dex-item.is-locked { opacity: .6; }
.mq__dex-item--letter .mq__dex-q { font-size: 1.4rem; }
.mq__sharecard { width: 100%; max-width: 360px; border-radius: 14px; border: 1px solid var(--glass-border-soft); display: block; margin: 10px 0; }
.mq__chapters { display: grid; gap: 6px; }
.mq__chapter { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mq__chapter small { font-size: .7rem; color: var(--text-muted); } .mq__chapter.is-locked { opacity: .55; cursor: default; } .mq__chapter.is-read { border-color: rgba(94, 196, 138, .45); }
.mq__storybox, .mq__letterbox { margin-top: 12px; }
.mq__storypage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--glass-border-soft); text-align: center; animation: sk-rise .4s var(--ease-out) both; }
.mq__storypage p { margin: 0; line-height: 1.9; max-width: 34em; }
.mq__letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mq__letter { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mq__letter.is-new { border-color: var(--accent); background: rgba(179, 164, 255, .12); } .mq__letter-ico { font-size: 1.4rem; } .mq__letter small { font-size: .7rem; color: var(--text-muted); }
.mq__paper { padding: 22px 20px; border-radius: 6px; background: #f6f1e7; color: #2a2420; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); animation: sk-rise .45s var(--ease-out) both; max-width: 520px; }
.mq__paper h3 { margin: 0 0 12px; color: #2a2420; } .mq__paper p { margin: 0 0 6px; line-height: 1.9; }
.mq__set { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .88rem; } .mq__set input[type="date"] { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--glass-border-soft); background: var(--bg-elev); color: var(--text); }
/* 覚醒 */
.mq__awaken-light { position: absolute; inset: 0; background: radial-gradient(40% 60% at 50% 40%, rgba(255, 255, 255, .35), rgba(179, 164, 255, .25) 40%, transparent 70%); animation: mq-light 2s ease-out both; }
@keyframes mq-light { 0% { transform: scaleX(.02); opacity: 0; } 30% { transform: scaleX(.05); opacity: 1; } 100% { transform: scaleX(1); opacity: .9; } }
.mq__awaken-box { position: relative; text-align: center; width: min(420px, 100%); padding: 20px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-border-soft); animation: sk-rise .7s .6s var(--ease-out) both; }
.mq__awaken-box h2 { margin: 0 0 8px; font-size: 1.6rem; } .mq__awaken-line { font-size: .92rem; margin: 10px 0 4px; }
.mq__awaken-box .mia--full { --mia-size: 300px; }
@media (max-width: 600px) {
  .page.mq { padding-left: 0; padding-right: 0; }
  .mq__stage { border-radius: 0; border-left: 0; border-right: 0; min-height: 78vh; min-height: 78svh; }
  .mq__mia { width: 150px; height: 150px; right: 8px; bottom: 170px; } .mq__mia .mia { --mia-size: 150px; }
  .mq__box { margin: 8px; padding: 12px 12px 14px; } .mq__text { font-size: .92rem; }
  .mq__hud, .mq__tabs, .mq__picks { padding-left: 8px; padding-right: 8px; }
  .mq__panel { border-radius: 0; border-left: 0; border-right: 0; padding: 14px 12px; }
  .mq__who { grid-template-columns: minmax(0, 140px) 1fr; }
  .mq__vs-card b { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .mq__choice, .mq__chestbox, .mq__chestlid, .mq__awaken-light, .mq__awaken-box, .mq__storypage, .mq__paper, .mq__chest.is-ready .mq__chest-ico { animation: none !important; } .mq__mia, .mq__box, .mq__video, .mq__toast { transition: none !important; } }
/* MIA QUEST 調整（2026-09-20 検証後）: 見出しは小さく、動画があるときはミアの絵を小さな顔に、ミアバーは出さない（部屋そのものがミア） */
.page.mq h1.mq__eyebrow { font-size: .64rem; margin: 0 0 4px; line-height: 1.4; }
.mq__room.has-video + .mq__mia { width: 64px; height: 64px; right: auto; left: 12px; bottom: auto; top: 44px; }
.mq__room.has-video + .mq__mia .mia { --mia-size: 64px; }
main.mq ~ .mbar { display: none !important; }
html.has-mbar main.mq ~ .tray, html.has-mbar main.mq ~ .toast { bottom: calc(84px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); }

/* MIA QUEST: 継ぎ目のないループ（動画 2 本のクロスフェード）と、静止画のゆっくり寄り＋光の粒 */
.mq__video { opacity: 0; transition: opacity .8s; }
.mq__room.has-video .mq__video.is-front { opacity: 1; }
.mq__bg.is-kb { animation: mq-kb 28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes mq-kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.mq__dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.mq__dust i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 244, 214, .85); box-shadow: 0 0 8px rgba(255, 230, 180, .6); animation: mq-dust var(--d) linear infinite; animation-delay: calc(var(--t) * -1); opacity: 0; }
@keyframes mq-dust { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-110vh) translateX(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mq__bg.is-kb, .mq__dust i { animation: none !important; } }
.mq__room.has-video .mq__video:not(.is-front) { opacity: 0; }
.mq__room.has-video + .mq__mia .mia { width: 64px !important; height: 64px !important; }   /* Mia.render の inline --mia-size に勝つ */
/* MIA QUEST スマホ（2026-09-20 ユーザー指摘「スマホで見るとサイズがおかしい」）: 16:9 の絵を縦長の箱に cover で入れると 1/3 しか見えず、
   ミアの顔が切れて「拡大されすぎ」に見えていた。スマホは 絵 4:3（顔が入るよう上寄せ）＋ 会話ボックスは絵の下（重ねない）＋ ミアの絵は小さく */
@media (max-width: 600px) {
  .mq__stage { min-height: 0; display: block; }
  .mq__room { position: relative; inset: auto; aspect-ratio: 4 / 3; width: 100%; }
  .mq__bg, .mq__video { object-position: 50% 30%; }
  .mq__room::after { background: linear-gradient(180deg, rgba(8, 7, 12, 0) 70%, rgba(8, 7, 12, .55) 100%); }
  .mq__mia { position: absolute; right: 8px; top: calc(100% * 3 / 4 - 118px); bottom: auto; width: 110px; height: 110px; }
  .mq__mia .mia { --mia-size: 110px; width: 110px !important; height: 110px !important; }
  .mq__room.has-video + .mq__mia { top: 44px; }
  .mq__box { position: relative; margin: 0; border-radius: 0; border-left: 0; border-right: 0; background: rgba(14, 12, 22, .92); }
  .mq__text { min-height: 3.2em; }   /* 2026-09-21 監査: 文が一文字ずつ出る間に枠が伸びて下のデッキが動く（CLS 0.099）→ 3 行分を先に確保 */
  .mq__choices { min-height: 40px; }
  .mq__hud { min-height: 30px; }
}

/* ===== スマホの「同じミス」を根絶するルール（2026-09-20 ユーザー指摘。scripts/mobile-audit.mjs が検査する） =====
   1) 入力欄は 16px 以上（iOS はフォーカスでページ全体を拡大し、戻らない＝「サイズがおかしい」の常連）
   2) タップ対象は 36px 以上（♥ は見た目 28px のまま、当たり判定を ::before で広げる）
   3) 1 行で切る文字はリンクの箱ごと切る（アンカーがはみ出して幅を押し広げない）
   4) 16:9 の絵を縦長の箱に cover で入れない（MIA QUEST の修正と同じ） */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .search__input { font-size: 16px !important; }
  .card__fav { position: absolute; }
  .card__fav::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
}
.lab__bar-l a, .adb__name a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* MIA QUEST: コマンドデッキ（2026-09-20 ユーザー指摘「ボタンが目立たず何をしていいか分かりづらい。ゲームらしく」） */
.mq__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 8px; }
.mq__hud-lv { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: 999px; background: linear-gradient(120deg, rgba(179, 164, 255, .28), rgba(255, 107, 138, .14)); border: 1px solid rgba(179, 164, 255, .5); font-size: .74rem; }
.mq__hud-lv b { font-size: .9rem; } .mq__hud-lv small { color: var(--text-muted); }
.mq__hud-lv i { display: inline-block; width: 54px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.mq__hud-lv i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 10%); background: linear-gradient(90deg, var(--accent), #ff8fb3); border-radius: 999px; }
.mq__hud-bond { color: #ff8fb3; letter-spacing: .04em; } .mq__hud-bond span { color: rgba(255, 255, 255, .18); }
.mq__hud-i em { font-style: normal; margin-right: 3px; }
.mq__deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.mq__cmd { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px 11px; border-radius: 16px; border: 1px solid rgba(197, 163, 255, .35); background: linear-gradient(160deg, rgba(197, 163, 255, .16), rgba(24, 22, 34, .7)); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s; min-height: 92px; }
.mq__cmd:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(179, 164, 255, .25); }
.mq__cmd:active { transform: scale(.97); }
.mq__cmd.is-active { border-color: var(--accent); background: linear-gradient(160deg, rgba(197, 163, 255, .34), rgba(24, 22, 34, .75)); }
.mq__cmd-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(197, 163, 255, .18); color: #e9dcff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mq__cmd-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; }
.mq__cmd-tx b { font-size: .95rem; letter-spacing: .02em; } .mq__cmd-tx small { font-size: .68rem; color: var(--text-muted); line-height: 1.3; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq__cmd--main { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; padding: 14px 16px; background: linear-gradient(120deg, #7c5cc4, #ff6b8a 130%); border-color: transparent; box-shadow: 0 14px 34px rgba(179, 164, 255, .4); }
.mq__cmd--main .mq__cmd-ico { background: rgba(255, 255, 255, .18); color: #fff; width: 46px; height: 46px; }
.mq__cmd--main .mq__cmd-tx b { font-size: 1.1rem; color: #fff; } .mq__cmd--main .mq__cmd-tx small { color: rgba(255, 255, 255, .8); }
.mq__cmd-arrow { margin-left: auto; font-size: 1.6rem; color: rgba(255, 255, 255, .8); }
.mq__cmd--sub { background: rgba(255, 255, 255, .03); border-color: var(--glass-border-soft); box-shadow: none; }
.mq__badge { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #080f1f; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); animation: feel-pop .6s var(--ease-out) both; }
.mq__badge--pink { background: #ff6b8a; color: #fff; } .mq__badge--gold { background: linear-gradient(135deg, #f6d365, #e8a33d); color: #1a1408; animation: a2hs-float 2s ease-in-out infinite; }
@media (max-width: 600px) { .mq__deck { padding: 0 8px; gap: 6px; } .mq__cmd { padding: 10px 10px 9px; min-height: 86px; border-radius: 14px; } .mq__cmd-ico { width: 34px; height: 34px; } .mq__cmd-tx b { font-size: .86rem; } .mq__cmd--main { padding: 12px 14px; } .mq__hud { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .mq__badge { animation: none !important; } }
.mq__badge[hidden] { display: none !important; }   /* display を指定した要素の hidden は明示（AGENTS のルール） */
.mq__cmd--sub { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; padding: 8px 12px; }
.mq__cmd--sub .mq__cmd-ico { width: 30px; height: 30px; } .mq__cmd--sub .mq__cmd-tx b { font-size: .84rem; }

/* hidden 属性は必ず消す（2026-09-20 ユーザー指摘「動くミアを再生すると画像が二段になる」: 全体の `img { display: block }` が
   ライトボックスの `img[hidden]` に勝ち、iOS Safari で空の画像枠が動画の上に出ていた。display を持つ要素すべてに効く保険） */
[hidden] { display: none !important; }

/* 購入先 CTA（2026-09-21: 最安のストアを主ボタン、他ストアは価格・差額つきの行。/w- /sk- /d- /du- 共通） */
.srv__cta .btn--primary .srv__cta-best { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .72rem; font-weight: 800; font-style: normal; vertical-align: 1px; }
.srv__stores { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.srv__store { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border-soft); font-size: .86rem; }
.srv__store-n { font-weight: 700; } .srv__store-n small { display: block; font-weight: 400; font-size: .68rem; color: var(--text-muted); }
.srv__store-p { margin-left: auto; font-variant-numeric: tabular-nums; } .srv__store-p small { color: var(--text-muted); font-size: .72rem; margin-left: 2px; }
.srv__store .btn--sm { flex: none; }
.srv__stores + .srv__adnote { margin-top: 6px; }

/* 幅を押し広げる犯人を根絶（2026-09-21 mobile-audit で発見: /m- /a- の長いチップ、/sk- のパッケージ） */
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }   /* 長いシリーズ名・ジャンル名のチップは省略（nowrap のまま横に伸ばさない） */
@media (max-width: 600px) { .page.srv .srv__hero .srv__poster { margin-left: -12px; margin-right: -12px; } }   /* width を +24px にしているのに負のマージンが --person だけだった */

/* ===== 規約監査（2026-09-21）: 各ストアの提供素材（パッケージ・サンプル・女優写真）は「縦横比を保った拡大縮小だけ」（DMM 参加規約 7 条 4 項の改変禁止、DLsite「改変禁止・拡大縮小は可」、DUGA 10 条 7 項）。
   cover（切り取り）や丸抜きをやめ、contain（余白は暗い地）に統一。ミア（自社素材）の絵は対象外 ===== */
.card__thumb img, .work__poster img, .pkg__thumb img, .adb__photo img, .adb__mini-img, .srv__movie-box img, .wmv__box img, .assist__now-item img, .aq__card-img img, .aq__champ-img > img:first-child, .mq__vs-card img, .mq__mem img, .mq__who-img img:first-child, .mq__predict-opt img, .zslide__bg img { object-fit: contain !important; object-position: 50% 50% !important; background: #0b0a12; }
.adb__face, .adb__mini, .actress img, .aq-entry__mine img, .aq__card-face, .aq__card-face img, .aq__champ-face, .aq__person img, .mq__who-face, .zslide__face, .adb__rank-card img, .srv__poster--person img { border-radius: 10px !important; object-fit: contain !important; }
.adb__photo--cover::after { display: none; }   /* 切り取りをやめたので暗い帯も不要 */

/* ミアについて「このデザインの意味」（2026-09-21 ユーザー指示: キャラデザをユメヴィクのコンセプトに結びつけて反映） */
.mp__design { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 18px; align-items: start; margin: 8px 0 12px; }
.mp__design-kv { margin: 0; text-align: center; }
.mp__design-kv img { width: 100%; height: auto; max-width: 260px; display: inline-block; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); }
.mp__design-kv figcaption { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
.mp__design-list { margin: 0; display: grid; gap: 6px; }
.mp__design-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.mp__design-list dt { font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.mp__design-list dd { margin: 0; font-size: .84rem; line-height: 1.7; color: var(--text-muted); }
.mp__design-list dd b { color: var(--text); } .mp__design-list dd em { font-style: normal; color: #ffd6e6; }
.mp__swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 0 10px rgba(0, 0, 0, .4); }
.mp__swatch--eyeL { background: #4da3ff; } .mp__swatch--eyeR { background: #c2334d; } .mp__swatch--hair { background: linear-gradient(135deg, #f4f2f7, #c9c5d6); } .mp__swatch--tip { background: linear-gradient(135deg, #cfd8ff, #4da3ff); }
.mp__swatch--shirt { background: #ffb3cc; } .mp__swatch--btn { background: #fff; } .mp__swatch--age { background: var(--accent); } .mp__swatch--milk { background: #e9d7b8; }
@media (max-width: 600px) { .mp__design { grid-template-columns: 1fr; } .mp__design-kv img { max-width: 200px; } }
@media (max-width: 600px) { .mp__silk { inset: -40px 0 0; border-radius: 0; } }   /* 2026-09-21 mobile-audit: 装飾の光（-20px はみ出し）がレイアウト幅を 402px にしていた */

/* ===== 画像を隠すの案内バー（2026-09-21。common.js ensureHideBar。全ページの main 先頭） ===== */
.hidebar { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--glass, var(--bg-elev)); border: 1px solid var(--glass-border-soft, var(--border)); font-size: .85rem; line-height: 1.5; color: var(--text); }
.hidebar__ico { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--accent); }
.hidebar__ico svg { width: 20px; height: 20px; }
.hidebar__text { flex: 1 1 auto; min-width: 0; }
.hidebar__btn { flex: none; white-space: nowrap; }
.hide-images .card__thumb::before, .hide-images .work__poster::before { content: "画像を非表示中"; }
@media (max-width: 600px) {
  .hidebar { margin: 8px 8px 12px; padding: 10px 12px; font-size: .8rem; flex-wrap: wrap; }
  .hidebar__text { flex-basis: calc(100% - 30px); }
  .hidebar__btn { margin-left: 30px; }
}

/* ===== 今日の動き（2026-09-21 監査。ホームの帯: 新作・値下がり・セール終了間近） ===== */
.intro-lead { margin: 14px 8px 12px; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }   /* 2026-09-22 ユーザー指摘: ヘッダー直後で上下の余白が無かった */
.intro-lead[hidden] { display: none; }
.intro-lead b { color: var(--text); font-weight: 700; }
@media (max-width: 600px) { .intro-lead { margin: 12px 8px 10px; font-size: .8rem; } }
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 8px 12px; }
.today[hidden] { display: none; }
.today__tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); text-decoration: none; color: var(--text); min-width: 0; }
.today__tile b { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.today__tile b small { font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.today__tile span { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today__tile--drops b { color: var(--sale, #ff6b8a); }
.today__tile--ending b { color: var(--accent-warm, #f5a56b); }
.today__tile:hover { border-color: rgba(179, 164, 255,.5); }
.today__date { grid-column: 1 / -1; margin: -2px 0 0; font-size: .7rem; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 600px) { .today { gap: 4px; margin: 2px 8px 8px; } .today__tile { padding: 8px 8px; } .today__tile b { font-size: 1.1rem; } .today__tile span { font-size: .68rem; } }
/* CTA のセール表示（2026-09-21 監査: 「<店> でセール価格を見る」の N% OFF はセール色） */
.srv__cta .btn--primary .srv__cta-best--sale { background: var(--sale, #ff6b8a); color: #fff; }
/* 女優ランキングの順位変動（2026-09-21 監査） */
.adb__move { position: absolute; right: 6px; top: 6px; z-index: 2; font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: var(--text-muted); letter-spacing: .02em; }
.adb__move--up { color: #7ee2a8; } .adb__move--down { color: var(--sale, #ff6b8a); } .adb__move--new { color: var(--accent); }
/* 出演者ページの順位変動（2026-09-21 第 2 フェーズ） */
.srv__up { color: #7ee2a8; font-weight: 700; } .srv__down { color: var(--sale, #ff6b8a); font-weight: 700; }
/* きせかえ: 切り替えと確認を同じ画面で（2026-09-21 ユーザー指摘「下のボタンで切り替えると上にスクロールしないと絵が見えない」）
   プレビューを sticky にして、服・表情・ポーズのチップを押した瞬間に絵が見える。スマホは横並び（全身 170px ＋ バストアップ 72px）で高さを抑える */
.dress__preview { position: sticky; top: calc(var(--header-h, 56px) + 12px); z-index: 2; }
@media (max-width: 700px) {
  .dress__preview { top: var(--hdr-h, 56px); flex-direction: row; justify-content: center; align-items: flex-end; gap: 14px; margin: -16px -16px 8px; padding: 8px 12px 10px; background: rgba(12, 10, 20, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 214, 230, .16); border-radius: 20px 20px 16px 16px; }
  .dress__preview .mia--full { --mia-size: 170px; width: 170px; height: 170px; }
  .dress__bust { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .dress__bust .mia { --mia-size: 72px !important; width: 72px; height: 72px; }
  .dress__bust small { font-size: .62rem; }
  html.nav-mini .dress__preview { top: 44px; }   /* 縮んだヘッダー（is-mini）は 44px だけ見えている */
}
/* ミアの絵・動画の転載対策（2026-09-21）: 長押しの保存メニュー・ドラッグ・選択を止める（透かしは画像に焼いてある。common.js initMiaGuard と対） */
.mia img, .mia--full img, .mp img, .mp video, .home-mia img, .assist__scenes img, .mq__room img, .mq__room video, .mp__lb img, .mp__lb video, .x-card img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* ナビの層構造（2026-09-21 UX 再設計「Simple on the surface. Deep underneath.」）: 探すシート／サイドメニューの「データ・読み物」「他のストア」は折りたたみ */
.sheet__more { margin: 0; }
.sheet__more > summary { list-style: none; cursor: pointer; }
.sheet__more > summary::-webkit-details-marker { display: none; }
.sheet__chev { margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.sheet__more[open] > summary .sheet__chev { transform: rotate(-135deg); }
.sheet__more > .sheet__item:not(.sheet__summary), .sheet__more > .sidebar__item:not(.sheet__summary) { padding-left: 34px; font-weight: 500; font-size: .88rem; }
.sheet__summary { display: flex; align-items: center; gap: 10px; }
.sheet__tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .sheet__tiles { grid-template-columns: repeat(3, 1fr); } }
/* 3 つの目的別導線（2026-09-21 UX 再設計）: スマホも 3 列固定（横スクロールで切れない）。色は役割（今夜＝ミア／好み＝ラベンダー／安く＝セール色）の細い線だけ */
@media (max-width: 600px) {
  .intro { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 6px; margin: 6px 8px 10px; padding: 0; }
  .intro__tile { flex: none; padding: 10px 8px 9px; gap: 3px; border-radius: 12px; }
  .intro__tile strong { font-size: .84rem; letter-spacing: -.01em; } .intro__tile span { font-size: .66rem; -webkit-line-clamp: 2; line-height: 1.4; }
}
.intro__tile { border-top: 2px solid var(--glass-border-soft); }
.intro__tile--tonight { border-top-color: rgba(255, 182, 206, .7); }
.intro__tile--taste { border-top-color: rgba(179, 164, 255, .8); }
.intro__tile--cheap { border-top-color: var(--sale, #ff6b8a); }
.intro__close { display: none; }
/* 作品ページ「Decision first」（2026-09-21 UX 再設計）: 要約行・ページ内ジャンプ・折りたたみ */
.srv__key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 8px; font-size: .86rem; color: var(--text-muted); }
.srv__key i { font-style: normal; opacity: .5; }
.srv__key a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.srv__key-star { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .srv__key-star small { font-weight: 400; color: var(--text-muted); }
.srv__key-score { padding: 1px 8px; border-radius: 999px; background: rgba(255, 214, 120, .14); color: #ffd678; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.srv__key-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; letter-spacing: .04em; }
.srv__jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px 0 4px; padding: 2px 0; }
.srv__jump::-webkit-scrollbar { display: none; }
.srv__jump a { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); font-size: .78rem; text-decoration: none; }
.srv__jump a:hover { border-color: rgba(179, 164, 255,.5); }
.srv__fold--facts, .srv__fold--deep, .srv__fold--more { margin: 10px 0 0; }
.srv__fold--facts > summary, .srv__fold--deep > summary, .srv__fold--more > summary { cursor: pointer; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); font-size: .84rem; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 8px; }
.srv__fold--facts > summary::-webkit-details-marker, .srv__fold--deep > summary::-webkit-details-marker, .srv__fold--more > summary::-webkit-details-marker { display: none; }
.srv__fold--facts > summary::after, .srv__fold--deep > summary::after, .srv__fold--more > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.srv__fold--facts[open] > summary::after, .srv__fold--deep[open] > summary::after, .srv__fold--more[open] > summary::after { transform: rotate(-135deg); }
.srv__fold--facts[open] > summary, .srv__fold--deep[open] > summary, .srv__fold--more[open] > summary { margin-bottom: 8px; }
.srv__fold--deep > .srv__sec, .srv__fold--more > .srv__sec { margin-top: 10px; }
.srv__head .mia-place { margin: 10px 0 4px; }
.srv__head .mia-place .mia-speech__sub { display: none; }   /* 一言は 1〜2 行だけ。注記は情報源の行にある */
.page.srv #data { scroll-margin-top: calc(var(--hdr-h, 56px) + 8px); } .page.srv #deep, .page.srv #next { scroll-margin-top: calc(var(--hdr-h, 56px) + 8px); }
@media (max-width: 600px) { .srv__key { font-size: .8rem; } .page.srv .srv__title { font-size: 1.12rem; line-height: 1.35; } }
/* スマホの作品ページ: 価格と CTA が最初の画面に近づくよう、サムネ列と「サンプル動画」ボタンを小さく（スライドショー自体は残す。2026-09-21） */
@media (max-width: 600px) {
  .page.srv .pkg__thumbs { padding: 6px 2px 2px; } .page.srv .pkg__thumb { width: 44px; height: 30px; border-radius: 6px; }
  .page.srv .pkg__movie { margin-top: 6px; padding: 8px 12px; font-size: .84rem; min-height: 38px; }
}
.srv__fold--why { margin: 8px 0 0; }
.srv__fold--why > summary { cursor: pointer; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); font-size: .84rem; font-weight: 600; list-style: none; display: flex; align-items: center; }
.srv__fold--why > summary::-webkit-details-marker { display: none; }
.srv__fold--why > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.srv__fold--why[open] > summary::after { transform: rotate(-135deg); }
.srv__fold--why:has(> #srv-decision[hidden]) { display: none; }
/* 統合サジェスト（2026-09-21 UX 再設計。common.js initSuggest） */
.sug { position: absolute; z-index: 60; max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; border-radius: 14px; background: rgba(14, 12, 20, .96); border: 1px solid var(--glass-border-soft); box-shadow: 0 18px 48px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sug[hidden] { display: none; }
.sug__row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: .88rem; text-align: left; text-decoration: none; cursor: pointer; min-height: 40px; }
.sug__row:hover, .sug__row:focus-visible { background: rgba(179, 164, 255, .14); outline: none; }
.sug__row b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug__k { flex: none; font-size: .64rem; letter-spacing: .08em; color: var(--text-muted); width: 3.6em; }
.sug__sub { margin-left: auto; flex: none; font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .sug__sub em { font-style: normal; color: var(--sale, #ff6b8a); font-weight: 700; }
.sug__row--code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.sug__row--work img { flex: none; width: 48px; height: 32px; object-fit: contain; border-radius: 4px; background: #000; }
.sug__row--all { border-top: 1px solid var(--glass-border-soft); margin-top: 4px; border-radius: 0 0 10px 10px; }
/* 検索 0 件（2026-09-21 UX 再設計）: ミア＋近い候補 */
.empty__mia { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 10px; max-width: 460px; text-align: left; }
.empty__mia .mia { flex: none; animation: none; } .empty__mia .mia-speech { flex: 1; margin: 0; font-size: .9rem; }
.empty__sug { margin: 8px 0 12px; } .empty__sug-t { margin: 0 0 6px; font-size: .74rem; letter-spacing: .1em; color: var(--text-muted); }
.empty__sug .chips { justify-content: center; }
.page__sub { font-size: .62rem; letter-spacing: .18em; font-weight: 700; color: var(--accent); vertical-align: middle; margin-left: 6px; }
.recent .grid--recent { margin-top: 6px; }
@media (max-width: 600px) { .recent .grid--recent { grid-template-columns: repeat(2, 1fr); } }
/* 女優ザッピング＝目玉機能（2026-09-21 ユーザー指示「目立たせて」）: ホームのバナー、探すシートの先頭タイル、サイドメニュー */
.zapb { display: flex; align-items: center; gap: 12px; margin: 0 8px 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text); position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(179, 164, 255,.22), rgba(255,107,138,.14) 60%, rgba(255,214,120,.12)), var(--glass); border: 1px solid rgba(179, 164, 255,.45); box-shadow: 0 10px 30px rgba(179, 164, 255,.12); }
.zapb::before { content: attr(data-eyebrow); position: absolute; top: 6px; right: 12px; font-size: .58rem; letter-spacing: .18em; font-weight: 800; color: var(--accent); opacity: .8; text-transform: uppercase; }
.zapb__faces { display: none; flex: none; gap: 0; }
.zapb.has-faces .zapb__faces { display: flex; }
.zapb__faces img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #000; border: 2px solid rgba(255,255,255,.25); margin-left: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.zapb__faces img:first-child { margin-left: 0; }
.zapb__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.zapb__copy strong { font-size: 1.02rem; letter-spacing: -.01em; }
.zapb__copy span { font-size: .76rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zapb__cta { flex: none; padding: 8px 12px; border-radius: 999px; background: linear-gradient(135deg, #b9a3ff, var(--accent) 60%, #8f76e6); color: #080f1f; font-size: .8rem; font-weight: 800; white-space: nowrap; box-shadow: var(--glow-btn); }
.zapb:hover { border-color: rgba(179, 164, 255,.8); }
@media (max-width: 600px) { .zapb { gap: 10px; padding: 10px 12px; } .zapb__faces img { width: 38px; height: 38px; } .zapb__copy strong { font-size: .94rem; } .zapb__copy span { font-size: .7rem; } .zapb__cta { padding: 7px 10px; font-size: .74rem; } }
html.view-list .zapb { display: none; }
.sheet__tile--hot { border-color: rgba(179, 164, 255,.6); background: linear-gradient(135deg, rgba(179, 164, 255,.22), rgba(255,107,138,.12)), var(--glass); }
.sheet__tile--hot::after { content: "★"; position: absolute; top: 4px; right: 8px; font-size: .6rem; color: #ffd678; }
.sheet__tile { position: relative; }
.sidebar__item[data-hot] { background: linear-gradient(135deg, rgba(179, 164, 255,.18), rgba(255,107,138,.08)); border-color: rgba(179, 164, 255,.4); }
/* Discovery の 2 枚（2026-09-21: 女優ザッピング＝人物から／ショート＝作品から。見せ方を分ける: 人物は顔写真＋ラベンダー、作品は映像アイコン＋セール色） */
.disc { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 8px 18px; }   /* 2026-09-22 ユーザー指摘: DISCOVERY の上下に隙間が無かった（上は小見出しの分を足す） */
.disc::before { content: attr(data-eyebrow); position: absolute; top: -14px; left: 2px; font-size: .58rem; letter-spacing: .18em; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.disc .zapb { margin: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.disc .zapb::before { content: none; }
.zapb--short { background: linear-gradient(120deg, rgba(255,107,138,.16), rgba(255,214,120,.08) 70%), var(--glass); border-color: rgba(255,107,138,.35); box-shadow: 0 10px 30px rgba(255,107,138,.08); }
.zapb__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,107,138,.18); color: #ffb3c4; }
.zapb__cta--ghost { background: rgba(255,255,255,.08); color: var(--text); box-shadow: none; border: 1px solid var(--glass-border-soft); }
html.view-list .disc { display: none; }
@media (max-width: 600px) { .disc { gap: 6px; } .disc .zapb { padding: 10px 10px 10px; gap: 6px; } .disc .zapb__copy span { -webkit-line-clamp: 3; } .disc .zapb__faces img { width: 34px; height: 34px; } }
/* 探すシート: 幅広タイル（補助説明つき）／サイドメニューの補助説明 */
.sheet__tile--wide { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 10px 12px; }
.sheet__tile--wide > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.sheet__tile--wide small { font-size: .66rem; font-weight: 500; color: var(--text-muted); }
.sidebar__sub { display: block; font-size: .66rem; font-weight: 500; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.sidebar__item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.sidebar__item[data-hot] { margin: 4px 0; }
/* ザッピング: 主 CTA「この女優を見る」と cross link（Secondary） */
.zslide__ctas { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.zslide__cta { padding: 7px 14px; }
.zslide__cross { font-size: .74rem; color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; }
.slide__person { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.sheet__tiles--2 { grid-template-columns: 1fr 1fr; margin-bottom: 8px; } @media (max-width: 600px) { .sheet__tiles--2 { grid-template-columns: 1fr 1fr; } }

/* UX-07（2026-09-21 Codex 監査「島のミアは可視テキストがない」）: 中央のミアにも他の項目と同じ文字ラベル。絵は浮かせたままラベルを詰める */
.bottom-nav__mia { display: flex; flex-direction: column; align-items: center; }
.bottom-nav__mia .bottom-nav__label { margin-top: -11px; }
.bottom-nav.is-mini .bottom-nav__mia .bottom-nav__label, body.is-reel .bottom-nav__mia .bottom-nav__label { display: none; }

/* ===== 2026-09-22 Home 整理「Stop adding. Start measuring, simplifying and strengthening.」（ユーザー指示書 0〜51）
   First View = ヘッダー・検索・3 導線・TODAY の 1 本。区分タブは本文（今夜のおすすめ）の直前へ、Discovery は 3 導線と TODAY の下で軽く。
   紫のアクセントは 選択中・CTA・ミア だけに絞る（3 導線の色つき上辺と発光を外す） ===== */
/* TODAY: 3 枚のカード → 1 本のストリップ（タップで /today） */
.today { display: block; margin: 0 8px 14px; }
.today__strip { display: flex; align-items: center; gap: 6px; padding: 9px 10px 9px 12px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; font-size: .76rem; white-space: nowrap; overflow: hidden; }
.today__strip::-webkit-scrollbar { display: none; }
.today__strip .today__date { grid-column: auto; margin: 0 2px 0 0; flex: none; letter-spacing: .04em; }
.today__stat { flex: none; color: var(--text-muted); min-width: 0; }
@media (max-width: 380px) { .today__strip .today__date { display: none; } }
.today__stat b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.today__stat--drops b { color: var(--sale, #ff6b8a); }
.today__sep { color: var(--glass-border-soft); flex: none; }
.today__chev { margin-left: auto; padding-left: 6px; color: var(--text-muted); flex: none; }
.today__strip:hover { border-color: rgba(179, 164, 255,.45); }
/* 3 導線: 主役だが主張は軽く（境界線 1 本・発光なし・上辺の色なし） */
.intro { gap: 6px; margin: 4px 8px 10px; }
.intro__tile, .intro__tile--tonight, .intro__tile--taste, .intro__tile--cheap { border: 1px solid var(--glass-border-soft); border-top: 1px solid var(--glass-border-soft); background: rgba(255,255,255,.035); box-shadow: none; padding: 11px 12px 10px; border-radius: 12px; }
.intro__tile strong { font-size: .92rem; }
.intro__tile span { font-size: .72rem; }
.intro__tile:active { background: rgba(179, 164, 255,.12); }
.intro-lead { margin: 12px 8px 10px; font-size: .82rem; }
/* Discovery: 3 導線・TODAY の下で 1 段軽く（2 枚のカード → 2 本の行。人物から／作品からの役割は残す。高さ 190px → 約 110px） */
.disc { grid-template-columns: 1fr; margin: 22px 8px 18px; gap: 6px; }
.disc::before { top: -14px; }
.disc .zapb, .disc .zapb--short { flex-direction: row; align-items: center; padding: 8px 12px 8px 10px; gap: 10px; border-radius: 12px; box-shadow: none; background: rgba(255,255,255,.035); border: 1px solid var(--glass-border-soft); }
.disc .zapb--zap { border-left: 3px solid rgba(179, 164, 255,.7); }
.disc .zapb--short { border-left: 3px solid rgba(255,107,138,.6); }
.disc .zapb__copy { gap: 1px; }
.disc .zapb__copy strong { font-size: .9rem; }
.disc .zapb__copy span { -webkit-line-clamp: 1; font-size: .7rem; }
.disc .zapb__faces img, .disc .zapb__icon { width: 30px; height: 30px; border-radius: 8px; }
.disc .zapb__faces img { margin-left: -9px; border-width: 1.5px; box-shadow: none; }
.disc .zapb__faces img:first-child { margin-left: 0; }
.disc .zapb__faces img:nth-child(n+4) { display: none; }   /* 顔は 3 枚まで */
.disc .zapb__cta, .disc .zapb__cta--ghost { padding: 0; background: none; box-shadow: none; border: 0; color: var(--accent); font-size: .74rem; font-weight: 700; }
@media (max-width: 600px) { .disc { gap: 6px; } .disc .zapb { padding: 8px 10px 8px 10px; gap: 8px; } .disc .zapb__copy span { -webkit-line-clamp: 1; } .disc .zapb__faces img { width: 30px; height: 30px; } }
/* 区分タブをスマホのホームで本文へ降ろしたとき（js/app.js placeCatbar。今夜のおすすめの下・人気/新着の上）: 見出しの小さな英字と細い上罫だけ */
.catbar--inline { position: relative; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--glass-border-soft); border-bottom: 0; background: none; backdrop-filter: none; }
.catbar--inline::before { content: "Category"; position: absolute; top: -8px; left: 10px; padding: 0 4px; background: var(--bg); font-size: .58rem; letter-spacing: .18em; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
.catbar--inline .explore:not(.is-open) { display: none; }   /* ジャンル／女優／性癖の細かい探索は探すシートへ（#explore で開いたときだけ出す） */
/* 島の中央のミア: 存在感は保ちつつ光を少し弱く */
@media (max-width: 600px) { .bottom-nav__miaimg { box-shadow: 0 0 0 2px rgba(179, 164, 255,.35), 0 4px 12px rgba(179, 164, 255,.3); } }
/* ショートの行のサムネ（2026-09-22）: パッケージは横長なので 45×30 の contain（規約: 切り抜かない）。読めたらアイコンの代わりに */
.disc .zapb__faces--short img { width: 45px; height: 30px; border-radius: 6px; object-fit: contain; background: #000; margin-left: -14px; }
.disc .zapb__faces--short img:first-child { margin-left: 0; }
.disc .zapb--short.has-faces .zapb__icon { display: none; }

/* 遊ぶ（play.html。2026-09-22 ユーザー指示「各ゲームはページに飛んで全画面で」）: ヘッダー・島・フッターは出さず、画面全体をゲームに */
body:has(main.play) .site-header, body:has(main.play) .site-footer, body:has(main.play) .bottom-nav, body:has(main.play) .mbar, body:has(main.play) .sidebar, body:has(main.play) .tray { display: none !important; }
body:has(main.play) main { margin-left: 0 !important; }
.play { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 0%, rgba(179, 164, 255,.12), transparent 60%), var(--bg); }   /* fixed にしない（トースト等の固定 UI と重ならない・ページとしてスクロール） */
.play__top { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--glass-border-soft); }
.play__back { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--glass-border-soft); color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 700; }
.play__ttl { flex: 1; min-width: 0; }
.play__ttl h1 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.play__ttl p { margin: 2px 0 0; font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play__stat { flex: none; font-size: .76rem; color: #d9c8ff; font-variant-numeric: tabular-nums; }
.play__stage { flex: 1; padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.play__q { margin: 0 0 12px; font-size: 1.05rem; text-align: center; }
.play__menu { margin-top: 8px; }
.play .mq__vs-card img { object-fit: contain; background: #000; }   /* 規約: 提供素材は切り抜かない */
.play .mq__mem img { object-fit: contain; background: #000; }
.play .mq__who-img img:first-child { object-fit: contain; background: #000; }
.play .mq__who-face { object-fit: contain; background: #000; border-radius: 10px; }
@media (min-width: 700px) { .play__stage { padding-top: 28px; } .play .mq__memory { max-width: 560px; margin: 0 auto; } }

/* AIO（2026-09-22）: Answer-first の 1 文と、購入先の行ごとの出所（配信形態・取得日） */
.srv__answer { margin: 2px 0 10px; font-size: .86rem; line-height: 1.7; color: var(--text); }
.srv__answer::before { content: "YUMEVIQ の確認"; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); border: 1px solid rgba(179, 164, 255,.4); vertical-align: 1px; }
.srv__store-meta { display: block; font-size: .66rem; color: var(--text-muted); font-weight: 500; }

/* 運営ページ（admin / dashboard / stats / x。js/admin.js が body.is-admin と運営専用のナビを作る。公開側の検索・島・ミア・ウェルカムは出さない。2026-09-22） */
body.is-admin .hsearch, body.is-admin .site-nav, body.is-admin .site-header__tools, body.is-admin #buddy-pill, body.is-admin .mbar, body.is-admin .hidebar, body.is-admin .hdr-mini { display: none !important; }
body.is-admin .site-header__inner { gap: 12px; }
body.is-admin .sidebar__mia, body.is-admin .mia-place, body.is-admin .a2hs, body.is-admin .sug { display: none !important; }   /* mia.js が差す吹き出し類は運営ページでは出さない */
.adm-head { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.adm-head__badge { font-size: .62rem; font-weight: 800; letter-spacing: .18em; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #080f1f; flex: none; }
.adm-head__title { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.adm-head__sp { flex: 1 1 auto; }
.adm-head__site { font-size: .76rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }
.adm-head__logout { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .76rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; min-height: 34px; }
.adm-head__logout svg { width: 16px; height: 16px; }
.adm-head__logout[hidden] { display: none; }
.adm-side__tag { margin: -6px 10px 8px; font-size: .58rem; font-weight: 800; letter-spacing: .3em; color: var(--accent); }
.adm-side__item { text-decoration: none; }
.adm-side__sub { display: block; font-size: .64rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.adm-side__logout { margin-top: 10px; color: var(--text-muted); }
.adm-side__logout[hidden] { display: none; }
.adm-side__foot { margin: 16px 12px 0; font-size: .64rem; color: var(--text-muted); line-height: 1.5; }
body.is-admin .sidebar--admin .sheet__ico svg { width: 20px; height: 20px; }
/* スマホ・タブレット（900px 以下）は下部バー。島の飾りはそのまま使う */
@media (max-width: 900px) {
  .bottom-nav--admin { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); z-index: 300; padding: 4px 6px; border-radius: 26px; border: 1px solid rgba(179, 164, 255,.28); background: rgba(20,19,27,.9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
  .bottom-nav--admin .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: var(--text-muted); font-size: .64rem; text-decoration: none; border-radius: 10px; min-height: 44px; }
  .bottom-nav--admin .bottom-nav__item.is-active { color: var(--accent); }
  .bottom-nav--admin .bottom-nav__icon svg { width: 22px; height: 22px; }
  body.is-admin main { padding-bottom: 92px; }
  body.is-admin .adm-head__site { display: none; }
}
@media (max-width: 600px) { body.is-admin .adm-head__title { font-size: .84rem; } }
.adm__menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.adm__menu[hidden] { display: none; }
.page .adm__tile { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text); text-decoration: none; }
.page .adm__tile b { font-size: 1rem; }
.page .adm__tile span { font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.page .adm__tile--main { grid-column: 1 / -1; border-color: var(--accent); }
.page .adm__tile:hover { border-color: var(--accent); }

/* MGS動画の入口 /mgs（2026-09-22）: 公式ブログパーツの置き場と品番検索フォーム */
.mgs__parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.mgs__part { min-width: 0; padding: 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.mgs__part-t { margin: 0 0 8px; font-size: .92rem; font-weight: 700; }
.mgs__wait { margin: 0; color: var(--text-muted); font-size: .8rem; }
/* 公式ウィジェットの中身（divclass_p / ulclass_p / liclass_p / img.tclass（縦）/ img.yclass（横）/ pclass_p）を暗い面に合わせる。ウィジェットは枠の class を書き換えるので .mgs__part から当てる。画像は拡大縮小のみ（規約） */
.mgs__part div.mgs_widget_r_p { background: transparent !important; }   /* 公式 CSS（mgs_banner_sp.css）が白背景を敷く */
.mgs__part div.mgs_widget_r_p h2.h2class_p { display: none; }   /* 見出しは自前の .mgs__part-t */
.mgs__part li.liclass_p a.aclass_p { margin: 0; }
.mgs__part a.aclass_p img.tclass, .mgs__part a.aclass_p img.yclass { margin-left: 0; max-height: none; max-width: none; }
.mgs__part a.aclass_p p.pclass_p { font-size: .82rem; text-align: left; margin: 0; }
.mgs__part ul { list-style: none; margin: 0; padding: 0; }
.mgs__part li { margin: 0 0 8px; }
.mgs__part li a { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; }
.mgs__part li a:hover .pclass_p:first-child { color: var(--accent); }
.mgs__part img.tclass, .mgs__part img.yclass { width: 56px; height: 80px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.04); flex: none; }
.mgs__part img.yclass { width: 96px; height: 64px; }
.mgs__part .wrap_pclass_p { min-width: 0; }
.mgs__part .pclass_p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgs__part .pclass_p + .pclass_p { color: var(--text-muted); font-size: .74rem; }
@media (max-width: 600px) { .mgs__parts { grid-template-columns: 1fr; } }
.mgs__search { display: flex; gap: 8px; align-items: center; max-width: 560px; }
.mgs__search input[type="search"] { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,.04); color: var(--text); }
.mgs__search .btn { flex: none; }
@media (max-width: 600px) { .mgs__search { flex-direction: column; align-items: stretch; } }

/* 2026-09-22 余白監査（scripts/spacing-audit.mjs）: ホームの箱の間 */
#specials { margin-top: 12px; }

/* ミアの一言の中の作品名リンクとサムネのプレビュー（2026-09-22 ユーザー要望）。画像は contain（切り取らない＝規約） */
.mia-work { color: var(--accent-hover); text-decoration: underline dotted rgba(179, 164, 255,.6); text-underline-offset: 2px; cursor: pointer; }
.mia-work:hover { color: #fff; text-decoration-style: solid; }
.mia-pop { position: fixed; z-index: 1200; padding: 10px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.mia-pop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mia-pop[hidden] { display: none; }
.mia-pop img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.04); }
.mia-pop__t { margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--text); }
.mia-pop__go { display: block; margin-top: 8px; text-align: center; padding: 9px 12px; font-size: .84rem; }
.mia-pop__x { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(20,18,28,.95); color: var(--text); font-size: 1rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mia-pop { transition: none; } }

/* 2026-09-22 記録の仕組みの説明（library.html #how。畳み） */
.lib-how { margin: 28px 0 8px; }
.lib-how__d { padding: 8px 0; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border-soft); }   /* mobile-audit の「余白なしの枠」対策。中身の余白は summary / body 側 */
.lib-how__d > summary { list-style: none; cursor: pointer; padding: 6px 18px; display: flex; align-items: center; gap: 10px; }
.lib-how__d > summary::-webkit-details-marker { display: none; }
.lib-how__d > summary::after { content: "＋"; margin-left: auto; color: var(--text-muted); font-size: 1rem; }
.lib-how__d[open] > summary::after { content: "－"; }
.lib-how__title { margin: 0; font-size: 1rem; }
.lib-how__title small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--text-muted); }
.lib-how__body { padding: 0 18px 16px; }
.lib-how__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lib-how__item { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border-soft); }
.lib-how__item b { display: block; margin-bottom: 4px; font-size: .92rem; }
.lib-how__item p { margin: 0; font-size: .86rem; line-height: 1.7; color: #cfd3dc; }
.lib-how__note { margin: 12px 0 0; font-size: .82rem; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 600px) { .lib-how__grid { grid-template-columns: 1fr; } .lib-how__body { padding: 0 12px 12px; } .lib-how__d > summary { padding: 12px 12px; } }
.sp__flow { list-style: none; counter-reset: f; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp__flow li { counter-increment: f; position: relative; padding: 10px 12px 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border-soft); font-size: .82rem; line-height: 1.6; }
.sp__flow li::before { content: counter(f); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-bottom: 6px; border-radius: 50%; background: var(--accent); color: #080f1f; font-size: .72rem; font-weight: 800; }
.sp__flow li b { display: block; font-size: .9rem; margin-bottom: 2px; }
.sp__flow li span { display: block; color: #cfd3dc; }
.sp__flow li em { font-style: normal; color: #ffd6e6; font-weight: 700; }
.faq--tight dt { margin: 14px 0 4px; font-size: .92rem; }
.faq--tight dd { font-size: .86rem; line-height: 1.7; }
@media (max-width: 600px) { .sp__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2026-09-22 privacy.html データの所在の一覧表 */
.tablewrap { overflow-x: auto; margin: 12px 0 16px; -webkit-overflow-scrolling: touch; }
.datatable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .84rem; line-height: 1.6; }
.datatable th, .datatable td { padding: 8px 10px; border: 1px solid var(--glass-border-soft); vertical-align: top; text-align: left; }
.datatable th { background: rgba(255,255,255,.04); font-weight: 700; white-space: nowrap; }
.datatable td:first-child { font-weight: 600; }
@media (max-width: 600px) {
  .tablewrap { overflow: visible; }
  .datatable { min-width: 0; display: block; }
  .datatable thead { display: none; }
  .datatable tbody, .datatable tr { display: block; }
  .datatable tr { margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--glass-border-soft); background: rgba(255,255,255,.03); padding: 4px 0; }
  .datatable td { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 8px; border: 0; border-top: 1px solid rgba(255,255,255,.05); padding: 6px 12px; }
  .datatable td:first-child { border-top: 0; font-size: .92rem; }
  .datatable td::before { content: attr(data-l); color: var(--text-muted); font-size: .76rem; font-weight: 600; padding-top: 2px; }
  .datatable td:first-child::before { content: ""; }
  .datatable td:first-child { grid-template-columns: 1fr; }
}
/* 2026-09-22 trust.html 安全性・第三者評価 */
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 26px; }
.trust__card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border-soft); color: var(--text); text-decoration: none; }
.page .trust__card { text-decoration: none; }
.trust__card:hover { border-color: rgba(179, 164, 255,.5); }
.trust__grade { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 10px; background: linear-gradient(90deg, #ffd6e6, #e9d5ff); color: #080f1f; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.trust__grade--ok { background: linear-gradient(90deg, #bbf7d0, #99f6e4); }
.trust__grade--na { background: rgba(255,255,255,.08); color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.trust__card b { font-size: .95rem; margin-top: 4px; }
.trust__what { font-size: .82rem; color: #cfd3dc; line-height: 1.6; }
.trust__date { margin-top: auto; padding-top: 6px; font-size: .76rem; color: var(--accent); }
.trust__list dt { font-weight: 700; margin: 16px 0 4px; }
.trust__list dd { margin: 0; font-size: .92rem; line-height: 1.8; color: #cfd3dc; }
@media (max-width: 600px) { .trust__grid { grid-template-columns: 1fr; gap: 8px; } }
/* 2026-09-22 新人・デビュー（/debut）、別名義、レーベルの経緯、豆知識 */
.adb__rank-row--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-columns: auto; overflow: visible; }
.adb__rank-noimg { display: block; width: 108px; height: 108px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border-soft); }
.adb__rank-card small { font-size: .7rem; color: var(--text-muted); line-height: 1.3; max-width: 100%; }
.adb__rank-card .adb__rank-title { color: #cfd3dc; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adb__rank-card--pkg img { object-fit: contain; }
.srv__trivia-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.srv__trivia-list li { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border-soft); font-size: .88rem; line-height: 1.65; }
.srv__trivia-list li::before { content: "◆"; color: var(--accent); margin-right: 6px; font-size: .7rem; }
.srv__trivia-list li a { color: inherit; }
.srv__timeline { list-style: none; margin: 8px 0 6px; padding: 0 0 0 14px; border-left: 2px solid rgba(179, 164, 255,.35); }
.srv__timeline li { position: relative; padding: 2px 0 8px 12px; font-size: .88rem; line-height: 1.6; }
.srv__timeline li::before { content: ""; position: absolute; left: -19px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.srv__timeline b { display: inline-block; min-width: 3.2em; color: #ffd6e6; }
@media (max-width: 600px) { .srv__trivia-list { grid-template-columns: 1fr; } .adb__rank-row--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .adb__rank-row--wrap .adb__rank-card img, .adb__rank-row--wrap .adb__rank-noimg { width: 92px; height: 92px; } }
.adb__rank-alias { font-style: normal; color: #ffd6e6; }
/* 2026-09-22 全ての女優名の横に ♥（People）。カードは右上、名前の横は compact。消さないこと（ユーザー指示） */
.adb__rank-item { position: relative; display: block; min-width: 0; scroll-snap-align: start; }
.adb__rank-item > .adb__rank-card, .adb__rank-item > .adb__mini-card { scroll-snap-align: none; }
.adb__rank-item > .fav-slot { position: absolute; top: 2px; right: 4px; z-index: 2; }
.adb__rank-item > .fav-slot .fav-person--compact { width: 32px; height: 32px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(8, 15, 31,.62); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.adb__rank-item > .fav-slot .fav-person--compact.is-on { color: var(--accent-warm); }
.adb__card .adb__name .fav-person--compact { margin-left: 6px; }
.fav-slot .fav-person--compact { position: relative; }
.fav-slot .fav-person--compact::before { content: ""; position: absolute; inset: -8px; }   /* 当たり判定を 36px 以上に */
.srv__trivia-list .fav-person--compact, .srv__chips .fav-person--compact { font-size: .95rem; margin-left: 2px; margin-right: 4px; }
/* 2026-09-22 データ品質ページ（quality.html） */
.dq__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.dq__st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; background: rgba(255,255,255,.08); }
.dq__st--OK { background: rgba(134,239,172,.18); color: #bbf7d0; } .dq__st--WARNING { background: rgba(253,224,71,.18); color: #fde68a; } .dq__st--ERROR { background: rgba(252,165,165,.2); color: #fecaca; }
.dq__table td pre { max-height: 160px; overflow: auto; font-size: .72rem; }
@media (max-width: 600px) { .dq__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2026-09-22 ミアのページをタブに（ユーザー指摘「長すぎて見辛い」）。中身は DOM に残し、表示だけ 1 面に絞る。hidden のセクション（極秘）は隠れたまま */
.mp__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 22px; }
.mp__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 14px; border: 1px solid var(--glass-border-soft); background: var(--glass); color: var(--text-muted); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mp__tab small { font-size: .68rem; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.mp__tab:hover { color: var(--text); border-color: rgba(179, 164, 255,.4); }
.mp__tab.is-active { color: #080f1f; background: linear-gradient(90deg, #ffd6e6, #e9d5ff); border-color: transparent; }
.mp__tab.is-active small { opacity: .7; }
.mp[data-tab] .mp__sec[data-tab] { display: none; }
.mp[data-tab="gallery"] .mp__sec[data-tab="gallery"], .mp[data-tab="dress"] .mp__sec[data-tab="dress"], .mp[data-tab="about"] .mp__sec[data-tab="about"], .mp[data-tab="settings"] .mp__sec[data-tab="settings"] { display: block; }
.mp[data-tab] .mp__sec[data-tab][hidden] { display: none; }   /* 極秘ギャラリーは解放前は出さない */
.mp__kv-row--grid.is-folded > *:nth-child(n+13), .mp__motion.is-folded > *:nth-child(n+10) { display: none; }
.mp__more { margin: 12px 0 0; text-align: center; }
@media (max-width: 600px) { .mp__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0 18px; } .mp__tab { padding: 9px 6px; font-size: .86rem; } .mp__tab small { font-size: .62rem; } }

/* =====================================================================
   表示モードの切り替えと女性向けの面（2026-09-23 Women Mode。docs/women-mode.md）
   ユーザー指示「各選択アニメーションを徹底」。動きは既存の値に合わせる
   （--spring / --ease-out、フェードインは sk-rise と同じ性格）。reduced-motion では全部止める。
   女性向けだからとピンクにはしない。accent はブランドのまま、密度と余白で穏やかに差を出す。
   ===================================================================== */

/* --- モード切替（2026-09-23 ユーザー指示「右上の定位置に維持」「カーソルが MEN と WOMEN を滑らかに行き来」
   「その動きに合わせて全体がふわっと変わる、エレガントでポップなもの」）
   置き場所はヘッダーの右上 1 か所だけ（common.js が差す）。本文には置かない
   ＝ view-transition-name が重複せず、カーソルがページを跨いで滑る。
   位置は px で決めない（track に対する 50% ＋ translateX(100%)）。 --- */
.modesw { flex: none; order: 3; display: inline-flex; align-items: center; gap: 0; margin-left: auto; padding: 3px; border: 1px solid var(--glass-border-soft, rgba(255,255,255,.14)); border-radius: 999px; background: rgba(255,255,255,.04); }
.modesw__t { flex: none; font-size: .62rem; color: var(--muted); padding: 0 8px 0 9px; letter-spacing: .04em; }
.modesw__track { position: relative; display: inline-flex; }
.modesw__thumb { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 50%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, rgba(185,163,255,.30), rgba(179, 164, 255,.20)); box-shadow: inset 0 0 0 1px rgba(185,163,255,.45), 0 4px 14px rgba(179, 164, 255,.22);
  transform: translateX(var(--msx, 0)); transition: transform .46s var(--spring); }
.modesw--women .modesw__thumb { --msx: 100%; }
.modesw__b { position: relative; z-index: 1; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 4.8em; min-height: 30px; padding: 5px 13px; border-radius: 999px; font-size: .74rem; color: var(--muted); white-space: nowrap; transition: color .34s var(--ease-out), transform .25s var(--spring); }
.page .modesw__b, .modesw__b { text-decoration: none; }
.modesw__b.is-on { color: var(--text); font-weight: 600; }
.modesw__b:active { transform: scale(.94); }
.modesw:hover .modesw__thumb { box-shadow: inset 0 0 0 1px rgba(185,163,255,.6), 0 6px 18px rgba(179, 164, 255,.3); }

/* --- 女性向けのワードマーク（2026-09-23 ユーザー選択「B. 赤ベタに白抜き」）
   YUMEVIQ の右に赤い板を置き、文字は地色で抜く。common.js の initWomenMark が女性向けのページだけに差す。
   赤は --women（ブランドの --danger #d97882 を小さい文字でも立つ明度に起こしたもの）。
   Chapter 2 の「YUMEVIQ AI（A/I を赤）」とは色味を分ける前提で、こちらは朱寄りに固定する --- */
:root { --women: #e2564f; }
.brand__row { display: inline-flex; align-items: center; gap: 8px; }
.brand__women { flex: none; padding: 4px 8px 5px; border-radius: 4px; background: var(--women); color: #080f1f; font-size: .74rem; font-weight: 800; letter-spacing: .2em; line-height: 1; white-space: nowrap;
  animation: sk-rise .5s var(--ease-out) both; animation-delay: .06s; }
.sidebar__brand .brand__women { font-size: .68rem; padding: 3px 7px 4px; }
@media (prefers-reduced-motion: reduce) { .brand__women { animation: none; } }

/* --- 女性向けの面: 少しだけ余白を広く（密度で違いを出す） --- */
.wm h1 { letter-spacing: .01em; }
.wm .page__lead { max-width: 46em; }
.wm .srv__sec { margin-top: 26px; }

/* --- 分類タブ・軸チップ: 選択アニメーションを徹底 --- */
.wm .wm__tabs { margin: 12px 0 16px; gap: 7px; }
.wm__tab, .wm__chip { position: relative; overflow: hidden; transition: transform .25s var(--spring), background-color .28s var(--ease-out), border-color .28s var(--ease-out), color .28s var(--ease-out); }
.page .wm__tab, .page .wm__chip { text-decoration: none; }
.wm__tab:hover, .wm__chip:hover { border-color: var(--accent); color: var(--text); }
.wm__tab:active, .wm__chip:active { transform: scale(.93); }
/* 押した瞬間に内側から広がる輪（既存の波紋と同じ考え方。位置は要らないので中央から） */
.wm__tab::after, .wm__chip::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0; transform: scale(1); pointer-events: none; }
.wm__tab:active::after, .wm__chip:active::after { animation: wm-ripple .5s var(--ease-out); }
@keyframes wm-ripple { 0% { opacity: .22; transform: scale(1); } 100% { opacity: 0; transform: scale(26); } }
/* 選択中: 着地したときに一度だけ弾む＋下に細い印（色だけで判別させない） */
.wm__tab.is-active, .wm__chip.is-active { animation: wm-pick .52s var(--spring) both; }
@keyframes wm-pick { 0% { transform: scale(1); } 32% { transform: scale(1.14); } 62% { transform: scale(.97); } 100% { transform: scale(1); } }
.wm__chip.is-active { background: linear-gradient(135deg, #b9a3ff, var(--accent)); border-color: transparent; color: #080f1f; box-shadow: 0 6px 18px rgba(179, 164, 255,.32); }
.wm__chip.is-active small { color: rgba(8, 15, 31,.62); }
.wm__chip.is-active::before { content: "✓ "; font-weight: 700; }
.wm__chip--clear { border-style: dashed; color: var(--muted); }
.wm__chips { gap: 7px; }
.wm__chip small { margin-left: 6px; color: var(--muted); font-size: .66rem; font-variant-numeric: tabular-nums; }

/* --- 探す軸: 見出しの階層を整える（h3 を使わず小さなラベルに） --- */
.wm__axes .sec__head { align-items: baseline; }
.wm__h1-f { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 11px; border-radius: 999px; font-size: .62em; font-weight: 600; color: #080f1f; background: linear-gradient(135deg, #b9a3ff, var(--accent)); vertical-align: middle; animation: sk-rise .45s var(--ease-out) both; }
.wm__h1-f::before { content: "✓ "; }
.wm__axes-note { margin: 0 0 14px; font-size: .72rem; line-height: 1.6; color: var(--muted); }
.wm .sec__head { margin-bottom: 8px; }
.wm__axis { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.wm__axis-l { position: relative; flex: none; width: 9.2em; padding: 6px 0 0 11px; font-size: .74rem; font-weight: 600; color: var(--text-muted, var(--muted)); letter-spacing: .03em; }
.wm__axis-l::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 999px; background: var(--accent); }
.wm__axis .srv__chips { margin: 0; }

/* --- 分類カード: 浮き上がり・左のアクセント・矢印 --- */
.wm__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wm__cat { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 15px 17px; border-radius: 12px; background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--glass-border-soft, rgba(255,255,255,.12)); overflow: hidden; transition: transform .3s var(--spring), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.page .wm__cat, .wm__cat { text-decoration: none; }
.wm__cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #b9a3ff, var(--accent)); transform: scaleY(0); transform-origin: 50% 0; transition: transform .4s var(--ease-out); }
.wm__cat:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.wm__cat:hover::before { transform: scaleY(1); }
.wm__cat:active { transform: translateY(0) scale(.985); }
.wm__cat b { font-size: 1.04rem; color: var(--text); }
.wm__cat span { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.wm__cat small { font-size: .72rem; color: var(--muted); }
.wm__cat small i { font-style: normal; font-size: .96rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.wm__cat-go { position: absolute; right: 13px; top: 15px; font-size: 1.1rem; font-style: normal; color: var(--muted); transition: transform .3s var(--spring), color .3s var(--ease-out); }
.wm__cat:hover .wm__cat-go { transform: translateX(3px); color: var(--accent); }

/* --- 出現: SSR ページは html.rv-off でスクロール連動を使わないので、CSS だけで順に出す --- */
.wm__cat, .wm__tab, .wm__chip { animation: sk-rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.wm__cat { animation-duration: .6s; animation-delay: calc(var(--i, 0) * 60ms); }
.wm__tab.is-active, .wm__chip.is-active { animation: sk-rise .5s var(--ease-out) both, wm-pick .52s var(--spring) .12s both; }

@media (max-width: 600px) {
  /* ワードマークの赤板はスマホでは詰める（ヘッダーに検索・ミア Lv・モード切替が並ぶため） */
  .brand__row { gap: 5px; }
  .brand__women { padding: 3px 5px 4px; font-size: .62rem; letter-spacing: .1em; border-radius: 3px; }
  .modesw { margin: 2px 0 0 auto; padding: 2px; }   /* スマホでも右端の定位置 */
  .modesw__t { display: none; }
  .modesw__b { min-width: 4.4em; min-height: 28px; padding: 4px 9px; font-size: .68rem; }
  .wm__cats { grid-template-columns: 1fr 1fr; gap: 7px; }
  .wm__cat { padding: 12px 13px; border-radius: 10px; }
  .wm__cat span { display: none; }
  .wm__cat-go { right: 10px; top: 12px; font-size: 1rem; }
  .wm__axis { flex-direction: column; gap: 5px; margin-bottom: 15px; }
  .wm__axis-l { width: auto; padding: 0 0 0 11px; }
  .wm__axis-l::before { top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .modesw__thumb, .modesw__b, .wm__tab, .wm__chip, .wm__cat, .wm__cat::before, .wm__cat-go { transition: none; animation: none; }
  .wm__tab:active, .wm__chip:active, .wm__cat:active, .modesw__b:active { transform: none; }
  .wm__tab:active::after, .wm__chip:active::after { animation: none; }
}

/* 取得できない値の表示（2026-09-24 PART4）: 「0 件」と「判定できない」を見た目でも区別する。
   色だけに頼らず、言葉と小さな理由書きで示す */
.na { color: var(--muted); font-style: normal; }
.na small { display: block; margin-top: 2px; font-size: .62rem; line-height: 1.5; color: var(--muted); opacity: .85; }
.lab__table .na small { max-width: 22em; }
@media (max-width: 600px) { .na small { font-size: .58rem; } }

/* ===== WOMAN の気分 Discovery（2026-09-24 PART9・11・13）
   ピンク・ハート・キラキラは使わない。落ち着いた夜の空気を、余白と字組みで出す。
   通常版のカード思想（角丸・ガラス面・ラベンダーのアクセント）は共有する ===== */
.wm__moods { margin-top: 20px; }
.wm__moods-note { margin: 2px 0 14px; font-size: .72rem; line-height: 1.7; color: var(--muted); }
.wm__mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 9px; }
.wm__mood { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 15px 16px 14px; border-radius: 12px;
  background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--glass-border-soft, rgba(255,255,255,.11)); overflow: hidden;
  transition: transform .3s var(--spring), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  animation: sk-rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms); }
.page .wm__mood, .wm__mood { text-decoration: none; }
.wm__mood b { font-size: .96rem; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.wm__mood span { font-size: .73rem; line-height: 1.65; color: var(--muted); }
.wm__mood::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .3s var(--ease-out); }
.wm__mood:hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(255,255,255,.055); }
.wm__mood:hover::before { opacity: .75; }
.wm__mood:active { transform: translateY(0) scale(.985); }
.wm__mood.is-active { border-color: var(--accent); background: rgba(179, 164, 255,.10); }
.wm__mood.is-active::before { opacity: 1; }
.wm__mood.is-active b::before { content: "✓ "; color: var(--accent); }
@media (max-width: 600px) {
  .wm__mood-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .wm__mood { padding: 12px 12px 11px; border-radius: 10px; }
  .wm__mood b { font-size: .88rem; }
  .wm__mood span { font-size: .67rem; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) { .wm__mood { animation: none; transition: none; } .wm__mood:hover, .wm__mood:active { transform: none; } }

/* =====================================================================
   YUMEVIQ ブランド（2026-09-24。ブランドキービジュアルを最上位リファレンスとして実装）
   ---------------------------------------------------------------------
   KV から読み取った方向性:
     - 背景は「夜空・深い海」の **ネイビー**（従来は黒寄り #080f1f → 青寄り #080f1f）
     - 発光は **ラベンダー / ピンク / スカイブルー** の 3 色。オーロラ状・リボン状にやわらかく重なる
     - 余白を広く、線は細く、動きは遅く。**光らせすぎない**（可読性が最優先）
     - タイポは字間を広げて静かに。和文は読みやすさ、欧文は細く上品に
   実装方針:
     既存のトークン名（--bg / --accent / --glass …）の**値だけ**を寄せるので、
     3,700 行の既存 CSS がそのまま新しい世界観になる。新しい名前は追加だけで上書きしない。
   ===================================================================== */
:root {
  /* --- KV のカラーパレット（画像内の指定値そのまま） --- */
  --yq-midnight: #080f1f;   /* Midnight   背景の基準 */
  --yq-purple:   #b3a4ff;   /* Luminous Purple  主アクセント */
  --yq-pink:     #f7c8e8;   /* Dream Pink       副アクセント */
  --yq-sky:      #a9d6ff;   /* Sky Blue         副アクセント */

  /* --- 面（背景 → 前面へ、青みを保ったまま明度を上げる） --- */
  --bg:       #080f1f;
  --bg-elev:  #0e1729;
  --bg-card:  #131d33;
  --border:        #22304d;
  --border-strong: #3a4a70;

  /* --- 文字（わずかに青を含む白。純白は目が疲れるので使わない） --- */
  --text:       #eef2fb;
  --text-muted: #97a3bd;

  /* --- アクセント --- */
  --accent:       #b3a4ff;
  --accent-hover: #cfc6ff;
  --accent-soft:  rgba(179, 164, 255, .14);
  --accent-blue:  #a9d6ff;
  --accent-warm:  #f7c8e8;                      /* 人の温度・急ぐ情報（KV の Dream Pink へ） */
  --accent-warm-soft: rgba(247, 200, 232, .12);

  /* --- 発光（KV のオーロラ。border とは別に「光そのもの」を持つ） --- */
  --glow:        rgba(179, 164, 255, .38);
  --glow-pink:   rgba(247, 200, 232, .30);
  --glow-sky:    rgba(169, 214, 255, .28);
  --aurora: linear-gradient(105deg, rgba(169,214,255,.55) 0%, rgba(179,164,255,.60) 38%, rgba(247,200,232,.52) 72%, rgba(169,214,255,.42) 100%);

  /* --- 面の重なり --- */
  --overlay: rgba(4, 8, 18, .95);
  --header:  rgba(8, 15, 31, .88);
  --shadow:      0 18px 56px rgba(2, 5, 14, .52);
  --shadow-soft: 0 10px 30px rgba(2, 5, 14, .30);

  /* --- タイポ（KV: 字間を広く・細く・静かに） --- */
  --tracking-brand: .34em;   /* ワードマーク */
  --tracking-label: .18em;   /* 英字の小ラベル */
  --tracking-wide:  .08em;

  /* --- 動き（ゆっくり・控えめ。reduced-motion で全部止まる） --- */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-slow: 1.2s;
}

/* ---------------------------------------------------------------------
   ブランドバンド（ホーム先頭。KV の「WEBSITE HERO」を、First View を埋めない高さで）
   2026-09-22 の Home 整理（検索・3 導線・TODAY・Discovery だけ）を壊さないよう、
   高さは PC 168px / スマホ 132px に抑える。画像は使わない＝LCP を増やさない。
   背景は CSS グラデーションだけで「夜空 + オーロラ + 水面の反射」を作る。
   --------------------------------------------------------------------- */
.yqband {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 14px; padding: 22px 20px 19px; border-radius: 16px;
  border: 1px solid var(--glass-border-soft, rgba(179,164,255,.18));
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(179,164,255,.20) 0%, transparent 62%),  /* 水面の反射 */
    radial-gradient(90% 70% at 50% -10%, rgba(169,214,255,.16) 0%, transparent 60%),   /* 空の光 */
    linear-gradient(180deg, #0a1326 0%, #0b1428 45%, #080f1f 100%);
  text-align: center;
}
/* オーロラのリボン: ぼかした帯を 2 枚、ごくゆっくり流す */
.yqband::before, .yqband::after {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 150%; z-index: -1;
  background: var(--aurora); filter: blur(46px); opacity: .32;
  transform: rotate(-8deg) translateY(12%);
  animation: yq-drift 26s var(--ease-soft) infinite alternate;
}
.yqband::after { opacity: .18; filter: blur(70px); transform: rotate(6deg) translateY(-6%); animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes yq-drift { from { transform: rotate(-8deg) translate(-4%, 12%); } to { transform: rotate(-4deg) translate(5%, 6%); } }

.yqband__mark { display: block; width: 38px; height: 38px; margin: 0 auto 8px; }
.yqband__name {
  display: block; font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 300;
  letter-spacing: var(--tracking-brand); text-indent: var(--tracking-brand);
  color: #fff; line-height: 1.1;
}
.yqband__read { display: block; margin-top: 4px; font-size: .62rem; letter-spacing: .5em; text-indent: .5em; color: var(--text-muted); }
.yqband__copy { margin: 10px 0 0; font-size: clamp(.9rem, 2.6vw, 1.08rem); font-weight: 500; color: var(--text); letter-spacing: .04em; }
.yqband__sub  { margin: 5px 0 0; font-size: .6rem; font-weight: 600; letter-spacing: var(--tracking-label); text-indent: var(--tracking-label); color: var(--accent); }
.yqband__sub::before, .yqband__sub::after { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 10px 4px; background: currentColor; opacity: .5; }

/* スマホは縦に積まず、マークとワードマークを横に並べて高さを抑える
   （2026-09-22 の Home 整理「First View は 検索・3 導線・TODAY・Discovery」を押し下げないため。
    縦積みのままだと 187px 使ってしまう＝実測。横並びで 115px 前後） */
@media (max-width: 600px) {
  .yqband {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 11px; text-align: left;
    margin: 0 0 10px; padding: 14px 16px 15px; border-radius: 12px;
  }
  .yqband__mark { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; }
  .yqband__name { grid-column: 2; font-size: 1.36rem; letter-spacing: .2em; text-indent: .2em; }
  .yqband__read { grid-column: 2; margin-top: 2px; font-size: .58rem; letter-spacing: .34em; text-indent: .34em; }
  .yqband__copy { grid-column: 1 / -1; margin-top: 11px; font-size: .95rem; }
  .yqband__sub  { grid-column: 1 / -1; margin-top: 5px; }
  .yqband__sub::before { display: none; }
  .yqband__sub::after { width: 16px; margin: 0 0 3px 8px; }
}
@media (prefers-reduced-motion: reduce) { .yqband::before, .yqband::after { animation: none; } }

/* --- ヘッダーのワードマーク: KV に合わせて細く・字間を広く --- */
.brand__name { font-weight: 400; letter-spacing: .16em; }
.brand__tagline { letter-spacing: var(--tracking-label); opacity: .9; }

/* --- CTA: 発光しすぎない上品なグラデーション（KV の DISCOVER ボタン） --- */
.btn--primary {
  background: linear-gradient(120deg, #b3a4ff 0%, #c9b8ff 46%, #f7c8e8 100%);
  color: #14102b; border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 22px rgba(179,164,255,.22);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: linear-gradient(120deg, #c2b6ff 0%, #d8ccff 46%, #ffd9f0 100%);
  box-shadow: 0 10px 30px rgba(179,164,255,.34); transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   面と光を KV の夜空へ寄せる（トークンの値だけ。構造・クラスは触らない）
   「グラス＆グロー」の定義（上の 1468 行あたり）は紫がかった黒だった。
   KV は**青い夜**なので、同じ名前のまま値を寄せる＝既存の全ページが揃う。
   --------------------------------------------------------------------- */
:root {
  --glass:        linear-gradient(165deg, rgba(22, 32, 55, .86), rgba(10, 18, 34, .94));
  --glass-strong: linear-gradient(165deg, rgba(27, 39, 66, .94), rgba(10, 18, 34, .98));
  --cloud: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 40%, rgba(247,200,232,.07)),
           linear-gradient(165deg, rgba(30, 44, 76, .96), rgba(14, 23, 41, .98));
  --glow-btn: 0 10px 30px rgba(179, 164, 255, .30);
}
body { background-color: var(--yq-midnight); }
/* 漂う光輪は KV の 3 色へ（左上 = スカイ→パープル、右下 = ピンク） */
body::before { background: radial-gradient(circle, rgba(169,214,255,.16), rgba(179,164,255,.14) 45%, transparent 66%); }
body::after  { background: radial-gradient(circle, rgba(247,200,232,.13), transparent 62%); }

/* --- 英字の小見出し（data-eyebrow）: KV のラベルと同じ字間 --- */
[data-eyebrow] > h2::before, .sec[data-eyebrow]::before { letter-spacing: var(--tracking-label); }

/* --- 検索: 触れたときだけオーロラがにじむ（常時は光らせない） --- */
.hsearch__input:focus, .hsearch__input:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 24px rgba(179,164,255,.16);
}

/* --- カード: ホバーでラベンダーの細い縁。影は増やさない（CLS も増やさない） --- */
.card:hover .card__thumb, .card:focus-within .card__thumb { box-shadow: 0 0 0 1px rgba(179,164,255,.30); }

/* --- フッターのワードマーク --- */
.site-footer__wordmark { letter-spacing: .22em; font-weight: 400; }
.site-footer__tagline { color: var(--accent); opacity: .75; }