/* ===== Tokens ===== */
.feed-entry { margin: 0 0 20px; color: var(--text-muted); font-size: .8rem; }
.feed-entry a:hover { color: var(--accent); }
:root {
  --bg: #0b0b0f;
  --bg-elev: #121217;
  --bg-card: #18181f;
  --border: #292831;
  --border-strong: #413e4d;
  --text: #f2efe8;
  --text-muted: #9c98a6;
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-soft: rgba(167, 139, 250, 0.13);
  --accent-warm: #d8c9a7;
  --accent-warm-soft: rgba(216, 201, 167, 0.12);
  --accent-blue: #8fa8d8;
  --accent-gold: #cbb98d;
  --positive: #8dbba4;
  --danger: #d97882;
  --white: #fff;
  --overlay: rgba(7, 7, 10, 0.95);
  --header: rgba(11, 11, 15, 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(167, 139, 250, 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(167, 139, 250, .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(167, 139, 250, 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(18, 18, 23, .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--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(167, 139, 250, .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(167,139,250,.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(167,139,250,.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; }
.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(167,139,250,.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(167,139,250,.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(167,139,250,.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; }
.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);
}
.site-footer__notice { margin: 0 0 12px; }
.site-footer__api a { color: var(--text); font-weight: 600; }
.site-footer__api { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.site-footer__credit img { display: block; width: 135px; height: 17px; }   /* 公式クレジット画像。改変しない */
.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--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, .9s; }
/* 未確認のときは 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 { 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: #0b0b0f; }
.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: 236px; }
  .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(167,139,250,.14); scrollbar-width: thin; animation: sk-fade .5s ease-out both; }
  .sidebar .sheet__group { margin: 10px 10px 4px; }
  .sidebar .sheet__group:first-child { margin-top: 2px; }
  .sidebar__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; position: relative; }
  .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(167,139,250,.14); }
  .sidebar__item.is-active .sheet__ico { filter: drop-shadow(0 0 8px rgba(167,139,250,.6)); }
  .sidebar__item .sheet__badge { margin-left: auto; }
  .sidebar__item .bottom-nav__logo { width: 22px; height: 22px; }
  .sidebar__links { margin: 12px 10px 0; flex-direction: column; gap: 6px; }
  body.has-sidebar main, body.has-sidebar .site-footer, body.has-sidebar .site-header { margin-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 6px; text-decoration: none; color: var(--text); border-bottom: 1px solid rgba(167,139,250,.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(167,139,250,.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(167,139,250,.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: #0b0b0f; 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; } }
.sidebar__mia { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 4px 0 8px; padding: 6px 4px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.sidebar__mia .mia { flex: none; --mia-size: 84px; }
.sidebar__mia .mia-speech { font-size: .74rem; padding: 8px 10px; }
.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: #0b0b0f; 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; }
/* 右下のミニ相棒 */
/* 相棒ドック（右下に常駐。待機中は少し薄く、話すと吹き出し） */
.mia-dock { position: fixed; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px)); z-index: 290;   /* 下部ナビ（300）より下、シート（400）より下 */ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(88vw, 360px); }
.mia-dock__btn { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; display: block; transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.2); animation: sk-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.mia-dock.is-idle .mia-dock__btn { opacity: .82; transform: scale(.86); transform-origin: 100% 100%; }
.mia-dock__btn:hover { opacity: 1; transform: none; }
.mia-dock__btn .mia { display: block; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(167,139,250,.28)); }
.mia-dock__bubble { position: relative; width: 100%; margin-bottom: 14px; padding: 14px 16px 14px; border-radius: 30px 28px 26px 32px / 28px 32px 30px 26px; 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: mia-pop .45s cubic-bezier(.2,1.2,.3,1) both, mia-cloud 5.4s ease-in-out .6s infinite; }
.mia-dock__bubble[hidden] { display: none; }
.mia-dock__bubble::before, .mia-dock__bubble::after { content: ""; position: absolute; border-radius: 50%; background: var(--cloud); border: 1px solid var(--cloud-border); box-shadow: var(--cloud-shadow); }
.mia-dock__bubble::before { width: 13px; height: 13px; right: 46px; bottom: -14px; }
.mia-dock__bubble::after { width: 7px; height: 7px; right: 36px; bottom: -24px; }
.mia-dock__text { margin: 0; padding-right: 18px; }
.mia-dock__work { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); text-decoration: none; }
.mia-dock__work:hover { background: rgba(167,139,250,.16); }
.mia-dock__thumb { flex: none; width: 72px; aspect-ratio: 3/2; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); }
.mia-dock__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hide-images .mia-dock__thumb img { display: none; }
.mia-dock__wt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mia-dock__wt strong { font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mia-dock__wt small { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mia-dock__bits { display: block; margin-top: 8px; font-size: .76rem; color: #ffd6e6; }
.mia-dock__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mia-dock__act { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(167,139,250,.14); color: var(--text); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.mia-dock__act:hover { background: rgba(167,139,250,.28); }
.mia-dock__close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; }
@media (min-width: 601px) { .mia-dock { bottom: 22px; right: 22px; } }
/* スマホ: 吹き出しはミアの左に横並びで置く（2026-09-16 ユーザー指示: 画面を占有しない）。高さはミアの背丈の目安（最大 30vh）まで、それ以上は中でスクロール */
@media (max-width: 600px) {
  .mia-dock { right: 6px; gap: 6px; flex-direction: row; align-items: flex-end; max-width: calc(100vw - 12px); }
  .mia-dock.is-idle .mia-dock__btn { opacity: .78; transform: scale(.74); }
  .mia-dock__btn { flex: none; order: 2; }
  .mia-dock__bubble { order: 1; width: auto; max-width: min(62vw, 300px); margin: 0 0 8px; padding: 9px 11px 9px; font-size: .74rem; line-height: 1.42; max-height: 30vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 20px 22px 20px 18px / 22px 20px 18px 22px; }
  .mia-dock__bubble::before { width: 10px; height: 10px; right: -12px; bottom: 26px; } .mia-dock__bubble::after { width: 6px; height: 6px; right: -21px; bottom: 18px; }
  .mia-dock__text { padding-right: 14px; }
  .mia-dock__acts { gap: 5px; margin-top: 8px; }
  .mia-dock__act { padding: 5px 9px; font-size: .7rem; }
  .mia-dock__close { top: 4px; right: 6px; width: 22px; height: 22px; }
  .mia-dock__work { gap: 8px; padding: 6px; margin-top: 8px; }
  .mia-dock__thumb { width: 56px; }
  .mia-dock__wt strong { font-size: .74rem; -webkit-line-clamp: 1; }
  .mia-dock__wt small { font-size: .66rem; }
  .mia-dock__bits { font-size: .7rem; margin-top: 6px; }
}
body.is-reel .mia-dock { display: none; }
/* シート・モーダル・ウェルカム・年齢確認の間は引っ込む */
.mia-dock { transition: opacity .3s, transform .3s; }
body.has-sheet .mia-dock, body.has-modal .mia-dock, body:has(.welcome) .mia-dock, body:has(.a2hs) .mia-dock, body:has(#age-gate:not([hidden])) .mia-dock { opacity: 0; pointer-events: none; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) { .mia-dock__btn, .mia-dock__bubble { animation: none !important; } }
@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: #0b0b0f; }
.tp__badge--5 { background: linear-gradient(90deg, var(--accent), var(--accent-warm)); border-color: transparent; color: #0b0b0f; }
.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: #0b0b0f; box-shadow: 0 6px 18px rgba(167,139,250,.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(167,139,250,.28), rgba(167,139,250,.08)); color: var(--text); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 0 28px rgba(167,139,250,.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(56px); transition: opacity 2s cubic-bezier(.4,.1,.5,.9), transform 2s cubic-bezier(.2,.4,.2,1); will-change: opacity, transform; }
.rv.is-visible { opacity: 1; transform: 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 枚は常に表示 */
.slide__info, .slide__rail { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.4,.1,.5,.9) .1s, transform 1s cubic-bezier(.2,.4,.2,1) .1s; }
.slide.is-active .slide__info, .slide.is-active .slide__rail, .slide:first-child .slide__info, .slide:first-child .slide__rail { opacity: 1; transform: none; }
.tray { animation: sk-rise .45s ease-out both; }
.rv-off .slide__info, .rv-off .slide__rail { opacity: 1; transform: 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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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: #0b0b0f; }
.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, .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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.16); }
.card__thumb--placeholder { background: var(--glass); }

/* ボタン・チップ */
.btn--primary { background: linear-gradient(135deg, #b9a3ff, var(--accent) 60%, #8f76e6); color: #0b0b0f; box-shadow: var(--glow-btn); border: 0; }
.btn--primary:hover { background: linear-gradient(135deg, #c8b6ff, #b39cff 60%, #9a83ee); box-shadow: 0 14px 36px rgba(167,139,250,.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: #0b0b0f; box-shadow: 0 6px 18px rgba(167,139,250,.35); }
.cattab.is-active { border-bottom-color: var(--accent); text-shadow: 0 0 18px rgba(167,139,250,.55); }

/* ヘッダー・カテゴリ行・検索 */
.site-header { background: rgba(8,8,12,.72); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(167,139,250,.14); }
.catbar { background: rgba(8,8,12,.72); backdrop-filter: blur(16px); border-bottom-color: rgba(167,139,250,.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(167,139,250,.14); }
.brand__mark { position: relative; }
.brand__mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,.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(167,139,250,.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(167,139,250,.12); position: relative; overflow: hidden; }
.age-gate__box::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,.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(167,139,250,.2), rgba(6,6,9,.6) 45%, rgba(6,6,9,.92)); backdrop-filter: blur(8px); }
.welcome__icon { background: linear-gradient(135deg, rgba(167,139,250,.28), rgba(167,139,250,.08)); border: 1px solid var(--glass-border); box-shadow: 0 0 28px rgba(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.6); }
  .bottom-nav__item.is-active .bottom-nav__icon { filter: drop-shadow(0 0 8px rgba(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.12); }
.welcome__box--quests .quest, .seeds__group { position: relative; }

/* フッター */
.site-footer { background: linear-gradient(180deg, transparent, rgba(167,139,250,.05)); border-top: 1px solid rgba(167,139,250,.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(167,139,250,.16); backdrop-filter: blur(6px); }
.slide__btn span { background: rgba(8,8,12,.55); border: 1px solid rgba(167,139,250,.22); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.slide__btn.is-on span { box-shadow: 0 0 22px rgba(167,139,250,.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(167,139,250,.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(167,139,250,.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(167,139,250,.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: #0b0b0f; }
.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(167,139,250,.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(167,139,250,.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: -20px -20px 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: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; }
.page--column, .page--note, .mp, .mia-speech, .mia__bubble, .mia-dock__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(167,139,250,.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 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: #0b0b0f; 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(167,139,250,.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; } }

/* ミアのページは静止画の枚数が多いので、ページ内のミアは浮遊・影・呼吸を止めて軽くする（右下のドックは別） */
.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: 3 / 4; object-fit: cover; }
.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); }
@media (max-width: 600px) {
  .srv__hero, .srv__hero--person { grid-template-columns: 1fr; gap: 14px; }
  .srv__poster { max-width: 320px; margin: 0 auto; }
  .srv__poster--person { max-width: 180px; }
  .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; } }
@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; } }

/* 探す: ジャンル（公式）と性癖（SAKUNAVI の切り口）の区別 */
.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(167,139,250,.5); box-shadow: 0 0 0 1px rgba(167,139,250,.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(167,139,250,.08); border: 1px solid rgba(167,139,250,.28); margin-bottom: 10px; }
.kink--hot .kink__label { color: var(--accent-hover); font-weight: 700; }
.chip--hot { border-color: rgba(167,139,250,.6); color: var(--text); background: rgba(167,139,250,.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: #a78bfa; --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: #a78bfa; }
.mia-cele--aurora { --c1: #7fe3ff; --c2: #5fd6a0; --c3: #a78bfa; --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; }
}
/* スマホ: ミアの吹き出しはミアの頭より少し高い程度（約 120px）。1 文＋ボタン 2 つ。詳しくは「…」で広げる */
@media (max-width: 600px) {
  .mia-dock__bubble { max-height: 124px; padding: 8px 10px 8px; font-size: .72rem; line-height: 1.38; max-width: min(64vw, 300px); }
  .mia-dock__bubble.is-more { max-height: 40vh; }
  .mia-dock__text { padding-right: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mia-dock__bubble.is-more .mia-dock__text { display: block; -webkit-line-clamp: unset; }
  .mia-dock__acts { gap: 4px; margin-top: 6px; }
  .mia-dock__act { padding: 4px 8px; font-size: .68rem; }
  .mia-dock__act:nth-child(n+3) { display: none; }
  .mia-dock__bubble.is-more .mia-dock__act:nth-child(n+3) { display: inline-block; }
  .mia-dock__more { position: absolute; right: 26px; top: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text-muted); font-size: .9rem; line-height: 22px; padding: 0; cursor: pointer; }
  .mia-dock__work { margin-top: 6px; padding: 4px; gap: 6px; }
  .mia-dock__thumb { width: 44px; }
  .mia-dock__bits { display: none; }
  .mia-dock__bubble.is-more .mia-dock__bits { display: block; }
}