/**
 * Delta v5 SPA (Inertia+Vue) product page styles.
 * Structure ported from public/v5-mock.html; colors use v5 tokens only
 * (see .claude/skills/delta-ui-check/TOKENS.md + css/v5/tokens.css).
 */
.v5-scope { --shell: 1300px; }
.v5-scope * { box-sizing: border-box; }
.v5-scope {
  margin: 0;
  background: var(--v5-bg);
  color: var(--v5-text);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  font-size: var(--v5-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.v5-scope a { color: inherit; text-decoration: none; }
.v5-scope img { display: block; }

/* nav */
.v5-nav { position: sticky; top: 0; z-index: 50; background: var(--v5-nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--v5-border); }
.v5-nav__in { max-width: none; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); height: 56px; display: flex; align-items: center; gap: 24px; }
.v5-brand { font-weight: 800; letter-spacing: .16em; font-size: var(--v5-fs-h3); display: inline-flex; align-items: center; }
.v5-brand img { height: 18px; width: auto; display: block; }
.v5-brand b { color: var(--v5-brand-blue); } /* 確定v1: ロゴ実色（金は創作だった） */
.v5-nav__links { display: flex; align-items: center; gap: 2px; font-size: var(--v5-fs-body); list-style: none; margin: 0; padding: 0; }
.v5-nav__links > li { position: relative; }
.v5-nav__links > li > a { display: block; padding: 8px 11px; color: var(--v5-text-muted); border-radius: 6px; white-space: nowrap; }
.v5-nav__links > li > a:hover { color: var(--v5-heading); }
.v5-caret { font-size: var(--v5-fs-micro); opacity: .7; }
.v5-has-sub .v5-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 170px; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 8px; padding: 6px; list-style: none; margin: 6px 0 0; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 60; }
/* invisible bridge over the trigger↔menu gap so hover stays continuous (fixes drop-out) */
.v5-has-sub .v5-sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.v5-has-sub:hover .v5-sub, .v5-has-sub:focus-within .v5-sub { display: block; }
.v5-sub li a { display: block; padding: 8px 12px; color: var(--v5-text-muted); border-radius: 6px; font-size: var(--v5-fs-body); white-space: nowrap; }
.v5-sub li a:hover { background: var(--v5-bg); color: var(--v5-heading); }
.v5-nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.v5-member { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-decoration: none; padding: 3px 10px; border-radius: var(--v5-radius-sm); border: 1px solid var(--v5-border); }
.v5-member:hover { border-color: var(--v5-text-muted); }
.v5-member-rank { font-size: var(--v5-fs-micro); font-weight: 700; color: var(--v5-heading); white-space: nowrap; }
.v5-member-tok { font-size: var(--v5-fs-micro); color: var(--v5-text-faint); white-space: nowrap; }
.v5-member--black { background: #000; border-color: #555; }
.v5-member--black .v5-member-rank { color: #fff; }
.v5-member--black .v5-member-tok { color: #b3b3b3; } /* black chip is dark in both themes → keep token count light (AA) */
.v5-light .v5-member--black { background: #111; border-color: #111; }
.v5-member--platinum .v5-member-rank { color: var(--v5-tier-platinum); }
.v5-member--gold .v5-member-rank { color: var(--v5-accent-gold); }
.v5-light .v5-member--gold { background: var(--v5-tier-gold); border-color: var(--v5-tier-gold); }
.v5-light .v5-member--gold .v5-member-rank, .v5-light .v5-member--gold .v5-member-tok { color: #111; } /* gold chip + dark ink (AA・トークンのみ) */
.v5-member--silver .v5-member-rank { color: var(--v5-tier-silver); }
.v5-search { display: flex; align-items: center; gap: 6px; background: var(--v5-bg); border: 1px solid var(--v5-border); border-radius: 999px; padding: 3px 8px 3px 14px; color: var(--v5-text-faint); }
.v5-search .v5-search-input { margin: 0; min-width: 150px; background: transparent; border: 0; border-radius: 0; padding: 4px 4px; color: var(--v5-text); font: inherit; font-size: var(--v5-fs-body); }
.v5-search .v5-search-input:focus { outline: none; }
.v5-search .v5-search-input::placeholder { color: var(--v5-text-faint); }
.v5-lang { position: relative; }
.v5-lang-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; color: var(--v5-text-muted); cursor: pointer; font: inherit; font-size: var(--v5-fs-body); padding: 6px 12px; }
.v5-lang-caret { font-size: var(--v5-fs-micro); opacity: .8; }
.v5-lang-btn:hover { color: var(--v5-heading); }
.v5-lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 8px; padding: 6px; margin: 0; list-style: none; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 70; }
.v5-lang.open .v5-lang-menu { display: block; }
.v5-lang-menu a { display: block; padding: 8px 12px; color: var(--v5-text-muted); border-radius: 6px; font-size: var(--v5-fs-body); }
.v5-lang-menu a:hover { background: var(--v5-bg); color: var(--v5-heading); }
.v5-lang-menu a.current { color: var(--v5-heading); font-weight: 700; }
.v5-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; box-sizing: border-box; }
.v5-burger span { width: 20px; height: 2px; background: var(--v5-text); border-radius: 2px; }
@media (max-width: 900px) {
  .v5-burger { display: flex; margin-left: auto; }
  .v5-nav__links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--v5-surface); border-bottom: 1px solid var(--v5-border); padding: 8px; max-height: calc(100vh - 56px); overflow-y: auto; }
  .v5-nav__links.open { display: flex; }
  .v5-nav__links > li > a, .v5-has-sub > a { padding: 12px; }
  .v5-has-sub .v5-sub { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding-left: 14px; margin: 0; }
  .v5-search { display: none; }
}

/* watch layout */
.v5-watch { max-width: var(--shell); margin: 0 auto; padding: 22px 24px 40px; display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 32px; align-items: start; }

/* player (product_top.webp 790x444 = 16:9). Cap at native width — never enlarge. */
.v5-player { position: relative; width: 100%; max-width: 790px; aspect-ratio: 790/444; border-radius: var(--v5-radius-md); overflow: hidden; background: #000; }
.v5-player > img { width: 100%; height: 100%; object-fit: contain; }
.v5-player video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.v5-player__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 34%, transparent 55%, rgba(0,0,0,.55) 88%, rgba(0,0,0,.85)); }
.v5-play-fab { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.85); display: grid; place-items: center; cursor: pointer; transition: transform .25s, background .25s; }
.v5-play-fab:hover { transform: translate(-50%,-50%) scale(1.06); background: rgba(0,0,0,.6); }
.v5-hd-chip { position: absolute; top: 14px; right: 14px; font-size: var(--v5-fs-micro); font-weight: 700; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); padding: 3px 8px; border-radius: var(--v5-radius-sm); }
.v5-badge-play { position: absolute; left: 14px; bottom: 12px; font-size: var(--v5-fs-micro); font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 3px; }

.v5-title { font-size: var(--v5-fs-h1); font-weight: 800; color: var(--v5-heading); margin: 16px 0 8px; line-height: 1.15; }
.v5-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--v5-text-faint); font-size: var(--v5-fs-body); }
.v5-subline .model { display: inline-flex; align-items: center; gap: 8px; color: var(--v5-text-muted); }
.v5-subline .model img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--v5-surface); }
.v5-subline .model b { color: var(--v5-heading); font-weight: 600; }
.v5-badge-tier { font-size: var(--v5-fs-micro); font-weight: 800; letter-spacing: .06em; color: var(--v5-text-muted); border: 1px solid var(--v5-border-strong); padding: 2px 8px; border-radius: 3px; }
.v5-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--v5-border); display: inline-block; }

.v5-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; padding-bottom: 18px; border-bottom: 1px solid var(--v5-border); }
.v5-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--v5-fs-control); font-weight: 700; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.v5-scope .v5-btn--primary { background: var(--v5-cta-bg); color: var(--v5-cta-ink); }
.v5-scope .v5-btn--primary:hover { opacity: .88; }
.v5-scope .v5-btn--ghost { background: var(--v5-surface); color: var(--v5-text); }
.v5-scope .v5-btn--ghost:hover { background: var(--v5-border); color: var(--v5-heading); }
.v5-btn--icon { padding: 10px 13px; }
.v5-btn[disabled] { opacity: .5; cursor: not-allowed; }
.v5-spacer { margin-left: auto; }
.v5-chip-plain { display: inline-flex; align-items: center; gap: 6px; font-size: var(--v5-fs-label); color: var(--v5-text-muted); }

.v5-aboutbox { background: var(--v5-surface); border-radius: var(--v5-radius-md); padding: 16px 18px; margin: 18px 0; }
.v5-aboutbox .meta-line { font-size: var(--v5-fs-body); color: var(--v5-text-muted); font-weight: 600; margin-bottom: 8px; }
.v5-aboutbox p { margin: 0 0 10px; color: var(--v5-text-muted); }
.v5-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
/* clickable pill chips so tags read as links, not plain text (確定v1: border=affordance, hover=brand-blue) */
.v5-tags a { font-size: var(--v5-fs-label); color: var(--v5-text-muted); border: 1px solid var(--v5-border); border-radius: 999px; padding: 4px 12px; text-decoration: none; white-space: nowrap; }
.v5-tags a::before { content: "#"; color: var(--v5-text-faint); margin-right: 1px; }
.v5-tags a:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-tags--model { margin-top: 10px; }
.v5-taglabel { font-size: var(--v5-fs-micro); font-weight: 700; color: var(--v5-text-faint); }
.v5-tags--model a::before { content: none; }

/* download gate reason */
.v5-gate { margin: 4px 0 18px; padding: 12px 16px; background: var(--v5-surface); border-left: 3px solid var(--v5-brand-blue); border-radius: var(--v5-radius-md); font-size: var(--v5-fs-body); color: var(--v5-text-muted); }
.v5-gate a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }

/* PPV purchase panel */
.v5-ppv { margin: 4px 0 22px; padding: 16px 18px; background: var(--v5-surface); border-radius: var(--v5-radius-md); }
.v5-ppv h3 { margin: 0 0 10px; font-size: var(--v5-fs-h3); font-weight: 700; color: var(--v5-heading); }
.v5-ppv-note { margin: 0 0 10px; font-size: var(--v5-fs-label); color: var(--v5-text-faint); }
.v5-ppv-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.v5-ppv-list li { display: flex; align-items: baseline; gap: 8px; font-size: var(--v5-fs-body); color: var(--v5-text-muted); }
.v5-ppv-list b { color: var(--v5-heading); font-size: var(--v5-fs-body); font-weight: 700; }
.v5-ppv-list .v5-need { color: var(--v5-warning); }
.v5-ppv-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* review post form */
.v5-revform { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v5-border); }
.v5-rating { display: flex; gap: 4px; margin-bottom: 8px; }
.v5-rating button { font-size: 24px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--v5-border); padding: 0; }
.v5-rating button.on { color: var(--v5-star); }
.v5-revform textarea { width: 100%; box-sizing: border-box; background: var(--v5-bg); color: var(--v5-text); border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); padding: 10px 12px; font: inherit; resize: vertical; }
.v5-revform-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.v5-revmsg { font-size: var(--v5-fs-label); color: var(--v5-warning); }

.v5-sec { padding: 26px 0; border-top: 1px solid var(--v5-border); }
.v5-sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.v5-sec-head h2 { font-size: var(--v5-fs-h2); font-weight: 700; margin: 0; color: var(--v5-heading); }
.v5-sec-head .count { font-size: var(--v5-fs-label); color: var(--v5-text-faint); }

/* downloads */
.v5-dl-group { margin-bottom: 26px; }
.v5-dl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.v5-dl-bar h3 { font-size: var(--v5-fs-h3); font-weight: 700; margin: 0; }
.v5-dl-bar .n { font-size: var(--v5-fs-label); color: var(--v5-text-faint); }
.v5-seg { display: inline-flex; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; padding: 3px; }
.v5-seg button { font: inherit; font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); background: transparent; border: 0; padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.v5-seg button.is-on { background: var(--v5-on-bg); color: var(--v5-on-ink); }
.v5-allbtn { margin-left: auto; }

/* photo contact sheet — image_thumb shown at native size (ratio varies per
   product; never enlarge or force a ratio → no distortion, shrink only). */
.v5-sheet { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.v5-sheet a { position: relative; border-radius: 4px; overflow: hidden; background: var(--v5-surface); line-height: 0; }
.v5-sheet img { display: block; width: auto; height: auto; max-width: 100%; }
.v5-sheet a:hover { outline: 2px solid var(--v5-brand-blue); }

/* movie rows — movie_thumb shown at native size (50px wide, as legacy). */
.v5-mrow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--v5-radius-md); }
.v5-mrow:hover { background: var(--v5-surface); }
.v5-mrow .mt { position: relative; flex: 0 0 auto; border-radius: 4px; overflow: hidden; background: var(--v5-surface); line-height: 0; }
.v5-mrow .mt img { display: block; width: auto; height: auto; max-width: 100%; }
.v5-mrow .mt .pl { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); cursor: pointer; }
.v5-mrow .mn { font-size: var(--v5-fs-body); color: var(--v5-text); font-weight: 600; }
.v5-mrow .mm { font-size: var(--v5-fs-micro); color: var(--v5-text-faint); }
.v5-mrow .mact { margin-left: auto; display: flex; gap: 8px; }
.v5-mrow .ic { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--v5-border); color: var(--v5-text-muted); display: grid; place-items: center; cursor: pointer; }
.v5-mrow .ic:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-mrow.locked { opacity: .5; }
/* DL redesign: resolution label, PDF sub-row, non-public photo lock, per-row reso hint */
.v5-seglabel { font-size: var(--v5-fs-micro); font-weight: 600; color: var(--v5-text-faint); margin-right: 2px; align-self: center; }
.v5-dl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 14px; }
.v5-pdfbtn { font: inherit; font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.v5-pdfbtn:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-mm-other { color: var(--v5-text-faint); }
.v5-sheet-lock { position: relative; border-radius: 4px; overflow: hidden; background: var(--v5-surface); line-height: 0; display: inline-block; opacity: .55; }
.v5-sheet-lock img { display: block; width: auto; height: auto; max-width: 100%; }
.v5-sheet-lock .lk { position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--v5-fs-micro); line-height: 1.2; font-style: normal; color: var(--v5-text-muted); background: rgba(0,0,0,.6); padding: 2px 3px; text-align: center; }

/* reviews */
.v5-rev-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.v5-rev-score { font-size: 38px; font-weight: 800; color: var(--v5-heading); line-height: 1; }
.v5-stars { color: var(--v5-star); letter-spacing: 2px; }
.v5-stars .off { color: var(--v5-border); }
.v5-rev-summary .c { font-size: var(--v5-fs-body); color: var(--v5-text-faint); }
.v5-review { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--v5-border); }
.v5-review .ava { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--v5-avatar-grad-a), var(--v5-avatar-grad-b)); }
.v5-review .who { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v5-review .who b { color: var(--v5-heading); font-size: var(--v5-fs-body); }
.v5-rank { font-size: var(--v5-fs-micro); font-weight: 700; padding: 1px 7px; border-radius: 3px; color: #111; background: var(--v5-tier-silver); }
.v5-rank.gold { background: var(--v5-accent-gold); }
.v5-review .date { color: var(--v5-text-faint); font-size: var(--v5-fs-label); }
.v5-review p { margin: 7px 0; color: var(--v5-text-muted); }
.v5-review .acts { display: flex; gap: 16px; font-size: var(--v5-fs-label); color: var(--v5-text-faint); }
.v5-review .acts span { cursor: pointer; }
.v5-review .acts span:hover { color: #fff; }

/* right rail — up next (YouTube, product_top 16:9) */
.v5-aside { position: sticky; top: 72px; }
.v5-aside h2 { font-size: var(--v5-fs-h2); font-weight: 700; margin: 0 0 14px; color: var(--v5-heading); }
.v5-upcard { display: grid; grid-template-columns: 168px 1fr; gap: 10px; padding: 6px; border-radius: var(--v5-radius-md); cursor: pointer; }
.v5-upcard:hover { background: var(--v5-surface); }
.v5-upcard .ut { position: relative; aspect-ratio: 790/444; border-radius: 8px; overflow: hidden; background: var(--v5-surface); }
.v5-upcard .ut img { width: 100%; height: 100%; object-fit: contain; }
.v5-upcard .len { position: absolute; right: 5px; bottom: 5px; font-size: var(--v5-fs-micro); color: #fff; background: rgba(0,0,0,.75); padding: 1px 5px; border-radius: 3px; }
.v5-upcard .ub b { display: block; font-size: var(--v5-fs-body); color: var(--v5-text); line-height: 1.3; margin-bottom: 3px; }
.v5-upcard .ub span { display: block; font-size: var(--v5-fs-body); color: var(--v5-text-faint); }
/* 関連作品のユーザーレビュー文(現行本番踏襲)。長文は2行でクランプ。--v5-text-muted は本文相当で可読性確保 */
/* レビュー本文はコンテンツ=本文色(--v5-text/14.6:1)。補助色(muted)だと暗く読みづらい */
.v5-upcard .ub .ur { margin: 4px 0 0; font-size: var(--v5-fs-body); line-height: 1.5; color: var(--v5-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* モデル名の代わりに評価の星(限られた幅を有効活用) */
.v5-upcard .ub .urst { display: inline-flex; gap: 1px; font-size: var(--v5-fs-label); line-height: 1; margin-top: 1px; }
.v5-upcard .ub .urst i { color: var(--v5-border-strong); font-style: normal; }
.v5-upcard .ub .urst i.on { color: var(--v5-star); }

/* netflix-style poster row (face 180x360 = 1:2) */
.v5-rowsec { max-width: var(--shell); margin: 0 auto; padding: 8px 24px 30px; }
.v5-rowsec h2 { font-size: var(--v5-fs-h2); font-weight: 700; color: var(--v5-heading); margin: 0 0 14px; }
.v5-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.v5-rail::-webkit-scrollbar { height: 8px; }
.v5-rail::-webkit-scrollbar-thumb { background: var(--v5-border); border-radius: 4px; }
.v5-pcard { flex: 0 0 168px; scroll-snap-align: start; cursor: pointer; }
.v5-pcard .pt { position: relative; aspect-ratio: 180/360; border-radius: 8px; overflow: hidden; background: var(--v5-surface); transition: transform .25s; }
.v5-pcard .pt img { width: 100%; height: 100%; object-fit: contain; }
.v5-pcard:hover .pt { transform: scale(1.04); outline: 2px solid var(--v5-brand-blue); }
.v5-pcard .pov { position: absolute; inset: auto 0 0 0; padding: 24px 10px 9px; background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.v5-pcard .pov b { display: block; font-size: var(--v5-fs-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v5-pcard .pov span { font-size: var(--v5-fs-micro); color: rgba(255,255,255,.72); }

/* mini player (product_top 16:9) */
.v5-miniplayer { position: fixed; right: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 40px); background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--v5-border); box-shadow: 0 14px 44px rgba(0,0,0,.65); transform: translateY(150%); transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: 80; }
.v5-miniplayer.on { transform: translateY(0); }
.v5-miniplayer .mv { position: relative; aspect-ratio: 790/444; background: #111; }
.v5-miniplayer .mv img { width: 100%; height: 100%; object-fit: contain; }
.v5-miniplayer .mv video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.v5-mini-live { position: absolute; left: 10px; top: 9px; font-size: var(--v5-fs-micro); font-weight: 700; color: #fff; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; pointer-events: none; }
.v5-mini-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ad06a; display: inline-block; animation: v5pulse 1.6s infinite; }
@keyframes v5pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
/* mini-player is dark chrome in BOTH themes (media is the UI) — fixed values. */
.v5-miniplayer .mb { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #1e1e1e; }
.v5-miniplayer .mb b { font-size: var(--v5-fs-label); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v5-miniplayer .mb .mm { font-size: var(--v5-fs-micro); color: #999; }
.v5-miniplayer .mb .x { color: #ccc; cursor: pointer; display: inline-flex; }
.v5-miniplayer .mb .x:hover { color: #fff; }

/* footer */
.v5-foot { border-top: 1px solid var(--v5-border); padding: 34px 0 26px; color: var(--v5-text-faint); font-size: var(--v5-fs-label); margin-top: 30px; }
.v5-foot-in { max-width: none; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }
.v5-foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.v5-foot-ttl { font-size: var(--v5-fs-body); font-weight: 700; color: var(--v5-text-muted); margin-bottom: 12px; }
.v5-foot-ttl a { color: inherit; }
.v5-foot-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.v5-foot-tags a { color: var(--v5-text-faint); }
.v5-foot-tags a::before { content: "#"; color: var(--v5-border); margin-right: 2px; }
.v5-foot-tags a:hover { color: var(--v5-text); }
.v5-foot-news { list-style: none; margin: 0; padding: 0; }
.v5-foot-news li { margin-bottom: 8px; }
.v5-foot-news a { color: var(--v5-text-faint); }
.v5-foot-news a span { display: block; color: var(--v5-text-muted); }
.v5-foot-news a:hover span { color: var(--v5-text); }
/* 言語バーはフッター他要素と同一の左レールに揃える。中央寄せは ①PCで左右約260pxの死に空間を作り
   ②ロケール毎にラベル幅が変わり左端がドリフトし ③375pxで2行(6+5)が各行独立に中央寄せされ両端ラグドになる。
   直下の .v5-foot-legal が ≤700px で既に flex-start である矛盾も解消する。 */
.v5-foot-lang { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; padding: 16px 0; margin-top: 22px; border-top: 1px solid var(--v5-border); }
.v5-foot-lang a { color: var(--v5-text-faint); font-size: var(--v5-fs-label); }
.v5-foot-lang a:hover, .v5-foot-lang a.active { color: var(--v5-text); }
.v5-foot-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--v5-border); }
.v5-foot-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-left: auto; }
.v5-foot-links a { color: var(--v5-text-muted); }
@media (max-width: 700px) { .v5-foot-cols { grid-template-columns: 1fr; gap: 22px; } .v5-foot-legal { flex-direction: column; align-items: flex-start; } .v5-foot-links { margin-left: 0; } }

/* home — Netflix hero billboard + YouTube-style 16:9 grids */
/* hero = native 16:9 (product_top / model_top are 790x444) — never crop/stretch/enlarge.
   Capped at native 790px width so the source is only ever shrunk, never upscaled. */
.v5-hero { position: relative; width: 100%; max-width: 790px; margin: 0 auto; aspect-ratio: 790/444; overflow: hidden; background: #000; border-radius: var(--v5-radius-md); }
.v5-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.v5-hero-scrim { display: none; }
.v5-hero-body { position: absolute; left: 0; bottom: 0; padding: clamp(18px,4vw,44px); max-width: 620px; }
.v5-hero-title { font-size: clamp(24px,4vw,44px); font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.08; text-shadow: 0 2px 12px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9); }
.v5-hero-model { font-size: var(--v5-fs-body); color: #fff; margin: 0 0 16px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.v5-hero-actions { display: flex; gap: 10px; }

.v5-home { max-width: none; margin: 0 auto; padding: 24px clamp(16px, 3vw, 48px) 48px; }
.v5-home-sec { margin-bottom: 34px; }
.v5-home-sec h2 { font-size: var(--v5-fs-h2); font-weight: 700; color: var(--v5-heading); margin: 0 0 14px; }
.v5-yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 18px 14px; }
.v5-ytcard { display: block; cursor: pointer; }
.v5-ytcard .yt-thumb { position: relative; aspect-ratio: 790/444; border-radius: 12px; overflow: hidden; background: var(--v5-surface); }
.v5-ytcard .yt-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.v5-ytcard:hover .yt-thumb { border-radius: 4px; }
.v5-ytcard:hover .yt-thumb img { transform: scale(1.04); }
/* duration/count badge (YouTube-style, bottom-right) */
.v5-ytcard .yt-badge { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.8); color: #fff; font-size: var(--v5-fs-micro); font-weight: 700; padding: 1px 5px; border-radius: 4px; line-height: 1.4; }
.v5-ytcard .yt-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .2s; }
.v5-ytcard:hover .yt-hover { opacity: 1; }
/* meta: avatar-less YouTube card — 2-line title, channel, submeta */
.v5-ytcard .yt-meta { padding: 10px 2px 0; }
.v5-ytcard .yt-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--v5-fs-body); font-weight: 700; color: var(--v5-heading); line-height: 1.35; max-height: 2.7em; }
.v5-ytcard .yt-ch { display: block; font-size: var(--v5-fs-body); color: var(--v5-text-faint); margin-top: 4px; }
.v5-ytcard .yt-ch:hover { color: var(--v5-text-muted); }
.v5-ytcard .yt-sub { display: block; font-size: var(--v5-fs-body); color: var(--v5-text-faint); margin-top: 1px; }
.v5-ytcard.rail-item { flex: 0 0 300px; scroll-snap-align: start; }

/* YouTube-style top chip bar (sticky under nav, horizontal scroll) */
.v5-chipbar { position: sticky; top: 56px; z-index: 40; background: var(--v5-nav-bg); backdrop-filter: blur(10px); padding: 10px clamp(16px, 3vw, 48px); border-bottom: 1px solid var(--v5-border); }
.v5-chipbar .v5-chips { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.v5-chipbar .v5-chips::-webkit-scrollbar { display: none; }

/* model list: search bar next to chips */
.v5-modelbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; }
.v5-modelbar .v5-chips { margin: 0; }
.v5-search-input { margin-left: auto; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; padding: 8px 16px; color: var(--v5-text); font: inherit; font-size: var(--v5-fs-body); min-width: 200px; }
.v5-search-input::placeholder { color: var(--v5-text-faint); }
.v5-search-input:focus { outline: none; border-color: var(--v5-brand-blue); }

/* home: top featured sample-video row (hover to preview) */
.v5-featsec { margin-bottom: 30px; }
.v5-featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 480px)); justify-content: start; gap: 18px 16px; }
.v5-featcard { display: block; cursor: pointer; }
.v5-feat-media { position: relative; aspect-ratio: 790/444; border-radius: 12px; overflow: hidden; background: #000; }
.v5-feat-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-featcard:hover .v5-feat-media { border-radius: 4px; }

/* Netflix-style home: big hero + varied shelves */
/* hero row: 2–3 large works side by side, each capped at native 790px (never enlarged) */
.v5-herowrap { padding: 12px clamp(16px, 3vw, 48px) 0; margin: 0 0 30px; }
.v5-herorow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: center; gap: 16px; }
.v5-herocard { position: relative; display: block; width: 100%; max-width: 790px; margin: 0 auto; cursor: pointer; }
.v5-herocard-media { position: relative; aspect-ratio: 790/444; border-radius: 12px; overflow: hidden; background: #000; }
.v5-herocard-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-herocard:hover .v5-herocard-media { border-radius: 6px; }
.v5-herocard-body { position: absolute; left: 0; bottom: 0; padding: 16px 18px; max-width: 92%; pointer-events: none; }
.v5-herocard-title { display: block; font-size: clamp(18px, 1.5vw, 24px); font-weight: 800; color: #fff; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9); }
.v5-herocard-model { display: block; font-size: var(--v5-fs-body); color: #fff; margin-top: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
/* narrow/tablet: don't show an unbalanced 2-column hero — swipeable carousel (1 shown, peek next).
   applies until 3 heroes fit comfortably (>=1024px). card capped at native 790px so it never upscales. */
@media (max-width: 1023px) {
  .v5-herowrap { padding: 8px 0 0; }
  .v5-herorow { display: flex; grid-template-columns: none; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 0 12px; }
  .v5-herorow::-webkit-scrollbar { display: none; }
  .v5-herocard { flex: 0 0 86%; max-width: 790px; margin: 0; scroll-snap-align: center; }
}

.v5-home--shelves { padding-top: 10px; }
.v5-shelf { margin-bottom: 34px; }
.v5-shelf > h2 { font-size: var(--v5-fs-h2); font-weight: 700; color: var(--v5-heading); margin: 0 0 12px; }
/* --- session C (home polish): shelf heading links + SEO body --- */
.v5-shelf-h a { color: var(--v5-heading); text-decoration: none; display: inline-flex; align-items: center; }
.v5-shelf-h a::after { content: "›"; margin-left: 6px; color: var(--v5-text-faint); font-weight: 400; transition: transform .2s; }
.v5-shelf-h a:hover { color: var(--v5-heading); }
.v5-shelf-h a:hover::after { transform: translateX(3px); color: var(--v5-heading); }
.v5-seotext { margin: 8px 0 40px; padding-top: 22px; border-top: 1px solid var(--v5-border); }
.v5-seotext p { font-size: var(--v5-fs-label); line-height: 1.9; color: var(--v5-text-faint); margin: 0 0 12px; }

/* 新着作品：小さい横(product_top)を2段の横スクロール */
.v5-landgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 236px; gap: 16px 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.v5-landgrid::-webkit-scrollbar { height: 8px; }
.v5-landgrid::-webkit-scrollbar-thumb { background: var(--v5-border); border-radius: 4px; }
.v5-landgrid .land-item { width: 236px; scroll-snap-align: start; }

/* 縦(face)レール & 注目動画レール項目の幅 */
.v5-rail--portrait .rail-item-p { flex: 0 0 150px; scroll-snap-align: start; }
.v5-rail .v5-featcard { flex: 0 0 300px; scroll-snap-align: start; }

/* 今週のランキング：大きな番号＋face(Netflix top10風) */
.v5-rankrail { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; }
.v5-rankrail::-webkit-scrollbar { height: 8px; }
.v5-rankrail::-webkit-scrollbar-thumb { background: var(--v5-border); border-radius: 4px; }
.v5-rankcard { flex: 0 0 auto; display: flex; align-items: flex-end; cursor: pointer; }
.v5-ranknum { font-size: 132px; font-weight: 900; line-height: .72; color: var(--v5-bg); -webkit-text-stroke: 2px var(--v5-text-faint); margin-right: -12px; user-select: none; }
.v5-rankposter { flex: 0 0 auto; width: 128px; aspect-ratio: 180/360; border-radius: 6px; overflow: hidden; background: var(--v5-surface); }
.v5-rankposter img { width: 100%; height: 100%; object-fit: contain; }
.v5-rankcard:hover .v5-rankposter { outline: 2px solid var(--v5-brand-blue); }

/* home: join CTA (guest only) — prominent horizontal banner under the hero */
.v5-cta { display: flex; align-items: center; gap: 24px; margin: 0 0 32px; padding: 20px clamp(20px,3vw,32px); background: var(--v5-surface); border-left: 4px solid var(--v5-brand-blue); border-radius: var(--v5-radius-md); }
.v5-cta-text { flex: 1 1 auto; min-width: 0; }
.v5-cta h2 { margin: 0 0 4px; font-size: var(--v5-fs-h2); font-weight: 800; color: var(--v5-heading); }
.v5-cta p { margin: 0; color: var(--v5-text-muted); font-size: var(--v5-fs-body); }
.v5-cta-btn { flex: 0 0 auto; white-space: nowrap; font-size: var(--v5-fs-control); padding: 12px 26px; }
@media (max-width: 560px) { .v5-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; } .v5-cta-btn { align-self: center; } }

/* browse pages (model list / product list / model) */
.v5-page-title { font-size: var(--v5-fs-h1); font-weight: 800; color: var(--v5-heading); margin: 0 0 16px; }
.v5-count { font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-faint); }
.v5-empty { color: var(--v5-text-faint); padding: 30px 0; }
/* news / announcements list */
.v5-newslist { list-style: none; margin: 0; padding: 0; }
.v5-newslist li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--v5-border); }
.v5-newslist li .d { flex: 0 0 96px; color: var(--v5-text-faint); font-size: var(--v5-fs-body); }
.v5-newslist li .s { color: var(--v5-text); font-size: var(--v5-fs-body); }
.v5-newslist li .s a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
/* ranking page: numbered poster grid */
.v5-rankgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
.v5-rankgrid .rc { position: relative; display: block; }
.v5-rankgrid .rn { position: absolute; left: -4px; top: -8px; font-size: 40px; font-weight: 900; line-height: 1; color: var(--v5-bg); -webkit-text-stroke: 1.5px var(--v5-text-faint); z-index: 1; }
.v5-rankgrid .rp { aspect-ratio: 180/360; border-radius: 6px; overflow: hidden; background: var(--v5-surface); }
.v5-rankgrid .rp img { width: 100%; height: 100%; object-fit: contain; }
.v5-rankgrid .rc:hover .rp { outline: 2px solid var(--v5-brand-blue); }
.v5-rankgrid .rt { font-size: var(--v5-fs-label); color: var(--v5-text); margin-top: 6px; }
.v5-rankgrid .rt span { color: var(--v5-text-faint); }
/* term tabs (ranking week/month/year) */
.v5-termtabs { display: inline-flex; gap: 4px; margin-bottom: 20px; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; padding: 3px; }
.v5-termtabs a { font-size: var(--v5-fs-control); font-weight: 600; color: var(--v5-text-muted); padding: 6px 16px; border-radius: 999px; text-decoration: none; }
.v5-termtabs a.on { background: var(--v5-on-bg); color: var(--v5-on-ink); }
/* portrait poster grid (face 180x360 = 1:2). Cap column at native 180px — no enlarge. */
.v5-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); justify-content: start; gap: 18px 14px; }
.v5-ytcard--poster .yt-thumb { aspect-ratio: 180/360; }
.v5-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.v5-chip { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; font-size: var(--v5-fs-control); font-weight: 600; color: var(--v5-text-muted); background: var(--v5-surface); border: 1px solid var(--v5-border); padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.v5-chip:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-chip.is-on { background: var(--v5-on-bg); color: var(--v5-on-ink); border-color: var(--v5-on-bg); }
.v5-hero-tags { margin-top: 14px; }
.v5-hero-tags a { color: rgba(255,255,255,.9); }
.v5-hero-tags a::before { color: rgba(255,255,255,.5); }
.v5-sentinel { width: 100%; height: 1px; }

/* reviews feed */
.v5-revfeed { display: flex; flex-direction: column; gap: 4px; }
.v5-revrow { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--v5-border); }
.v5-revthumb { display: block; aspect-ratio: 790/444; border-radius: var(--v5-radius-md); overflow: hidden; background: var(--v5-surface); }
.v5-revthumb img { width: 100%; height: 100%; object-fit: contain; }
.v5-revbody .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v5-revbody .who b { color: var(--v5-heading); font-size: var(--v5-fs-body); }
.v5-revbody .who .v5-revwho { color: var(--v5-heading); font-size: var(--v5-fs-body); font-weight: 700; text-decoration: none; }
.v5-revbody .who .v5-revwho:hover { color: var(--v5-heading); }
/* tier feed: responsive product-card grid */
.v5-tiergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 20px 12px; }
.v5-revbody .date { color: var(--v5-text-faint); font-size: var(--v5-fs-label); }
.v5-revwork { display: inline-block; margin: 6px 0 4px; font-size: var(--v5-fs-body); font-weight: 600; color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-revwork span { color: var(--v5-text-faint); font-weight: 400; margin-left: 6px; }
.v5-revbody p { margin: 4px 0 0; color: var(--v5-text-muted); }
@media (max-width: 560px) { .v5-revrow { grid-template-columns: 110px 1fr; gap: 12px; } }

@media (max-width: 1000px) { .v5-watch { grid-template-columns: 1fr; } .v5-aside { position: static; border-top: 1px solid var(--v5-border); padding-top: 22px; } }
@media (max-width: 767px) { .v5-hero { border-radius: 0; } .v5-hero-body { max-width: 100%; } }
@media (max-width: 560px) {
  .v5-nav__links, .v5-search { display: none; }
  .v5-home { padding-left: 12px; padding-right: 12px; }
  .v5-shelf { margin-bottom: 24px; }
  .v5-shelf > h2 { font-size: var(--v5-fs-h2); }
  /* smaller new-arrivals cards so more fit on a phone */
  .v5-landgrid { grid-auto-columns: 158px; gap: 12px 10px; }
  .v5-landgrid .land-item { width: 158px; }
  .v5-rail--portrait .rail-item-p { flex-basis: 120px; }
  .v5-rail .v5-featcard { flex-basis: 228px; }
  .v5-ranknum { font-size: 96px; -webkit-text-stroke-width: 2px; margin-right: -10px; }
  .v5-rankposter { width: 96px; }
  .v5-nfhero-title { font-size: clamp(20px, 6vw, 28px); }
}
@media (prefers-reduced-motion: reduce) { .v5-scope * { transition: none !important; } }

/* ---- v5 breadcrumb (shared) ---- */
/* パンくず: faint(5.34:1)は暗すぎたため muted(8.79:1)へ。現在地/区切りも読める明るさに。 */
.v5-breadcrumb { font-size: var(--v5-fs-label); color: var(--v5-text-muted); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v5-breadcrumb a { color: var(--v5-text-muted); text-decoration: none; }
.v5-breadcrumb a:hover { color: var(--v5-heading); }
.v5-bc-sep { color: var(--v5-text-faint); }

/* ---- v5 FAQ ---- */
.v5-faq-search { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.v5-faq-search-label { font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); }
.v5-faq-input { font-size: 16px; color: var(--v5-text); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 6px; padding: 8px 12px; min-width: 200px; }
.v5-faq-input:focus { outline: none; border-color: var(--v5-brand-blue); }
.v5-faq-btn { font-size: var(--v5-fs-control); font-weight: 600; color: var(--v5-cta-ink); background: var(--v5-cta-bg); border: 0; border-radius: 999px; padding: 9px 18px; min-height: 40px; cursor: pointer; }
.v5-faq-cat { font-size: var(--v5-fs-h2); font-weight: 700; color: var(--v5-heading); margin: 0 0 12px; }
.v5-faq-list { max-width: 860px; }
.v5-faq-item { border: 1px solid var(--v5-border); border-radius: 6px; background: var(--v5-surface); margin: 0 0 10px; scroll-margin-top: 70px; }
.v5-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font-size: var(--v5-fs-control); font-weight: 600; color: var(--v5-heading); background: none; border: 0; padding: 12px 14px; min-height: 44px; cursor: pointer; }
.v5-faq-q:hover .v5-faq-q-text { color: var(--v5-heading); }
.v5-faq-caret { color: var(--v5-text-faint); flex: none; }
.v5-faq-a { font-size: var(--v5-fs-body); line-height: 1.8; color: var(--v5-text); padding: 0 14px 14px; }
.v5-faq-a a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }

/* ---- v5 contact form ---- */
.v5-contact-form { max-width: 560px; }
.v5-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.v5-field { margin: 0 0 16px; }
.v5-field-label { display: block; font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); margin: 0 0 6px; }
.v5-input { display: block; width: 100%; box-sizing: border-box; font-size: 16px; font-family: inherit; color: var(--v5-text); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 6px; padding: 10px 12px; }
.v5-input:focus { outline: none; border-color: var(--v5-brand-blue); }
.v5-textarea { resize: vertical; min-height: 160px; }
.v5-field-error { display: block; font-size: var(--v5-fs-micro); color: var(--v5-warning); margin-top: 4px; }
.v5-contact-memo { border: 1px solid var(--v5-border); border-left: 4px solid var(--v5-brand-blue); background: var(--v5-surface); padding: 14px 20px; margin: 20px 0; font-size: var(--v5-fs-body); color: var(--v5-text); }
.v5-contact-memo .ci-item { display: block; line-height: 2.2; }
.v5-contact-memo .ci-item i { color: var(--v5-brand-blue); margin-right: 8px; width: 14px; text-align: center; }
.v5-contact-memo .ci-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v5-border); font-size: var(--v5-fs-label); color: var(--v5-text-faint); line-height: 1.9; }
.v5-contact-submit { font-size: var(--v5-fs-control); font-weight: 700; color: var(--v5-cta-ink); background: var(--v5-cta-bg); border: 0; border-radius: 999px; padding: 12px 40px; min-height: 44px; cursor: pointer; }
.v5-contact-submit:hover:not(:disabled) { opacity: .88; }
.v5-contact-done { max-width: 560px; font-size: var(--v5-fs-body); line-height: 1.9; color: var(--v5-text); border: 1px solid var(--v5-border); background: var(--v5-surface); border-radius: 6px; padding: 20px; }

/* ---- v5 webmaster ---- */
.v5-wm-text { font-size: var(--v5-fs-body); line-height: 1.9; color: var(--v5-text); max-width: 860px; margin: 0 0 20px; }
.v5-wm-text a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-wm-tablewrap { overflow-x: auto; margin: 0 0 24px; }
.v5-wm-table { border-collapse: collapse; min-width: 320px; font-size: var(--v5-fs-body); color: var(--v5-text); }
.v5-wm-table th, .v5-wm-table td { border: 1px solid var(--v5-border); padding: 8px 16px; text-align: left; }
.v5-wm-table th { color: var(--v5-text-muted); font-weight: 600; background: var(--v5-surface); }

/* ---- v5 PPV catalog (search-result style rows) ---- */
.v5-ppv-lead { font-size: var(--v5-fs-body); color: var(--v5-text-muted); margin: 0 0 16px; max-width: 860px; }
.v5-ppv-list { max-width: 960px; }
.v5-ppv-row { display: flex; gap: 16px; border: 1px solid var(--v5-border); background: var(--v5-surface); border-radius: 6px; padding: 12px; margin: 0 0 12px; }
.v5-ppv-thumb { flex: none; width: 200px; }
/* E3: native超えの拡大禁止。width:100%固定だと product_right(例146px)を200pxへ拡大していた。
   native寸法で表示し、枠より大きい時だけ縮小(max-width:100%)。小さい画像は中央寄せ。 */
.v5-ppv-thumb img { width: auto; height: auto; max-width: 100%; display: block; margin: 0 auto; border-radius: 4px; }
.v5-ppv-body { min-width: 0; }
.v5-ppv-title { display: block; font-size: var(--v5-fs-body); font-weight: 700; color: var(--v5-heading); text-decoration: none; margin: 0 0 6px; }
.v5-ppv-title:hover { color: var(--v5-heading); }
.v5-ppv-meta { font-size: var(--v5-fs-label); color: var(--v5-text-muted); margin: 0 0 8px; }
.v5-ppv-meta a { color: var(--v5-link); text-decoration: none; }
.v5-ppv-size { margin-left: 10px; color: var(--v5-text-faint); }
.v5-ppv-review { font-size: var(--v5-fs-label); color: var(--v5-text); margin: 0 0 8px; }
.v5-ppv-stars { color: var(--v5-star); margin-right: 6px; }
.v5-ppv-review a { color: var(--v5-link); text-decoration: none; }
.v5-ppv-comment { margin: 4px 0 0; color: var(--v5-text-muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v5-ppv-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.v5-ppv-badge { font-size: var(--v5-fs-micro); font-weight: 600; color: var(--v5-text-muted); border: 1px solid var(--v5-border-strong); border-radius: 4px; padding: 3px 8px; }
.v5-loadmore-wrap { text-align: center; padding: 10px 0 30px; }
.v5-loadmore { font-size: var(--v5-fs-control); font-weight: 600; color: var(--v5-text-muted); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 999px; padding: 10px 28px; min-height: 44px; cursor: pointer; }
.v5-loadmore:hover:not(:disabled) { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-loadmore:disabled { opacity: .5; }
@media (max-width: 480px) {
  .v5-ppv-row { flex-direction: column; }
  .v5-ppv-thumb { width: 100%; max-width: 320px; }
}

/* ---- v5 paipan landing ---- */
.v5-pp-h3 { font-size: var(--v5-fs-h3); font-weight: 700; color: var(--v5-heading); margin: 22px 0 10px; }
.v5-pp-u { font-weight: 600; color: var(--v5-text); margin: 14px 0 6px; }
.v5-pp-nav { list-style: none; padding: 0; margin: 0 0 20px; }
.v5-pp-nav li { margin: 4px 0; }
.v5-pp-nav a, .v5-pp-arrowlink a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-pp-nav a:hover, .v5-pp-arrowlink a:hover { text-decoration: underline; }

/* ---- v5 model-list measurement filters ---- */
.v5-ml-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.v5-ml-filter { display: inline-flex; align-items: center; gap: 5px; }
.v5-ml-label { font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); }
.v5-ml-select { font-size: var(--v5-fs-control); color: var(--v5-text); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 6px; padding: 6px 8px; min-height: 36px; }
.v5-ml-tilde { color: var(--v5-text-faint); font-size: var(--v5-fs-label); }
.v5-ml-reset { font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-muted); background: none; border: 1px solid var(--v5-border); border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.v5-ml-reset:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
.v5-tierchips { margin-top: -8px; }

/* ---- v5 FAQ two-column (legacy width33/66 parity) + light-theme answer HTML ---- */
.v5-faq-cols { display: flex; gap: 24px; align-items: flex-start; }
.v5-faq-side { flex: 0 0 300px; min-width: 0; }
.v5-faq-main { flex: 1; min-width: 0; }
.v5-faq-menu { border: 1px solid var(--v5-border); border-radius: 6px; background: var(--v5-surface); padding: 12px 14px; margin: 0 0 12px; }
.v5-faq-menu-head { font-size: var(--v5-fs-h3); font-weight: 700; color: var(--v5-heading); margin: 0 0 8px; }
.v5-faq-menu-list { margin: 0; padding: 0 0 0 18px; }
.v5-faq-menu-list li { margin: 4px 0; font-size: var(--v5-fs-label); }
.v5-faq-menu-list a { color: var(--v5-text-muted); text-decoration: none; }
.v5-faq-menu-list a:hover { color: var(--v5-heading); }
@media (max-width: 890px) {
  .v5-faq-cols { flex-direction: column; }
  .v5-faq-side { flex: none; width: 100%; order: 2; }
  .v5-faq-main { order: 1; width: 100%; }
}
/* FAQ回答内の表: レガシーHTMLのインライン白背景(<tr style="background-color:rgb(255,255,255)">)を
   無効化し、v5トークンでダーク/ライト両テーマに自動対応させる(以前の白島流用をやめて作り直し)。
   インラインstyleを上書きするため :where() でなく通常詳細度+!importantを使う。 */
.v5-faq-a { overflow-x: auto; }
.v5-faq-a table { width: 100%; border-collapse: collapse; font-size: var(--v5-fs-body); color: var(--v5-text); background: transparent; margin: 8px 0 16px; }
.v5-faq-a table [style*="background"], .v5-faq-a table tr[style] { background-color: transparent !important; }
.v5-faq-a th, .v5-faq-a td { border: 1px solid var(--v5-border-strong); padding: 8px 12px; text-align: center; vertical-align: middle; color: var(--v5-text); }
.v5-faq-a th { background: var(--v5-surface); color: var(--v5-heading); font-weight: 700; }
.v5-faq-a tr:nth-child(even) td { background: color-mix(in srgb, var(--v5-surface) 45%, transparent); }
.v5-faq-a table a { color: var(--v5-link); text-decoration: underline; text-decoration-color: var(--v5-link-deco); }
.v5-faq-a .center { text-align: center; }
.v5-faq-a .left { text-align: left; }
.v5-faq-a .point { white-space: nowrap; }
/* ===== account / buy-token / renew (member core) ===== */
/* 他のコンテンツページ(v5-watch/v5-rowsec)と同じ --shell(1300px)・padding 24px に統一。
   以前は980pxで、全幅ヘッダー/フッターや他ページより狭く中央に浮いていた。 */
.v5-acct { max-width: var(--shell); margin: 0 auto; padding: 24px 24px var(--v5-space-section); }
.v5-acct-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 var(--v5-space-lg); border-bottom: 1px solid var(--v5-border); }
.v5-acct-tab { min-height: 40px; padding: 8px 2px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--v5-text-faint); font: inherit; font-size: var(--v5-font-size-label); cursor: pointer; }
.v5-acct-tab.on { border-bottom-color: var(--v5-sel-line); color: var(--v5-heading); font-weight: 700; }
.v5-acct-sec { margin: 0 0 var(--v5-space-section); }
.v5-acct-h { font-size: var(--v5-fs-h2); color: var(--v5-heading); margin: 0 0 var(--v5-space-md); }
h3.v5-acct-h { font-size: var(--v5-font-size-body); margin-top: var(--v5-space-lg); }
.v5-acct-scroll { overflow-x: auto; }
.v5-acct-table { width: 100%; border-collapse: collapse; font-size: var(--v5-font-size-label); }
.v5-acct-table th, .v5-acct-table td { border-bottom: 1px solid var(--v5-border); padding: 10px 12px; text-align: left; vertical-align: middle; }
.v5-acct-table th { color: var(--v5-text-faint); font-weight: 600; white-space: nowrap; }
.v5-acct-table td { color: var(--v5-text); font-size: var(--v5-font-size-body); }
.v5-acct-table a:not(.v5-acct-btn) { color: var(--v5-link-v1); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--v5-link-deco); }
.v5-acct-table a:not(.v5-acct-btn):hover { text-decoration-color: var(--v5-link-v1); }
.v5-acct-table--mini { max-width: 480px; margin: var(--v5-space-md) 0; }
.v5-acct-sub { word-break: break-all; }
.v5-scope .v5-acct-btn { display: inline-block; margin: 2px 0 2px 8px; padding: 6px 16px; min-height: 40px; line-height: 26px; border: 1px solid var(--v5-border-strong); border-radius: 999px;
  background: transparent; color: var(--v5-text); font: inherit; font-size: var(--v5-font-size-label); cursor: pointer; text-decoration: none; }
.v5-scope .v5-acct-btn:hover { border-color: var(--v5-text-muted); }
.v5-scope .v5-acct-btn[disabled] { opacity: .5; cursor: not-allowed; }
.v5-scope .v5-acct-btn--primary { background: var(--v5-cta-bg); border-color: var(--v5-cta-bg); color: var(--v5-cta-ink); margin-left: 0; font-weight: 700; }
.v5-scope .v5-acct-btn--primary:hover { opacity: .88; }
.v5-acct-expired { background: #fff; color: var(--v5-warning); font-weight: 700; margin-right: 8px; padding: 2px 8px; border-radius: var(--v5-radius-md); display: inline-block; }
.v5-acct-badge { display: inline-block; padding: 3px 10px; border-radius: var(--v5-radius-sm); border: 1px solid var(--v5-border-strong); color: var(--v5-heading); font-weight: 700; letter-spacing: .06em; }
.v5-acct-badge--black { background: #000; border-color: #555; color: #fff; }
.v5-light .v5-acct-badge--black { background: #111; border-color: #111; color: #fff; }
.v5-light .v5-acct-badge--platinum { background: var(--v5-tier-platinum); border-color: var(--v5-tier-platinum); color: #222; }
.v5-light .v5-acct-badge--gold { background: #c98910; border-color: #c98910; color: #111; }
.v5-light .v5-acct-badge--silver { background: var(--v5-tier-silver); border-color: var(--v5-tier-silver); color: #111; }
.v5-acct-badge--platinum { border-color: var(--v5-tier-platinum); color: var(--v5-tier-platinum); }
.v5-acct-badge--gold { border-color: var(--v5-tier-gold); color: var(--v5-tier-gold); }
.v5-acct-badge--silver { border-color: var(--v5-tier-silver); color: var(--v5-tier-silver); }
.v5-acct-msg { background: #fff; color: var(--v5-warning); margin: var(--v5-space-md) 0; padding: 8px 12px; border-radius: var(--v5-radius-md); display: inline-block; }
.v5-acct-panel { margin: var(--v5-space-lg) 0; padding: var(--v5-space-lg); background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); }
.v5-acct-panel label { display: block; margin: 0 0 var(--v5-space-md); color: var(--v5-text-muted); font-size: var(--v5-fs-label); font-weight: 600; }
.v5-acct-panel input, .v5-acct-panel select { display: block; width: 100%; max-width: 420px; margin-top: 4px; padding: 8px 10px; font-size: 16px;
  background: var(--v5-bg); color: var(--v5-text); border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); }
.v5-acct-rate { color: var(--v5-text-faint); font-size: var(--v5-font-size-label); margin: 0 0 var(--v5-space-md); }
.v5-acct-note { margin-top: var(--v5-space-lg); color: var(--v5-text-muted); font-size: var(--v5-font-size-label); line-height: 1.7; }
.v5-acct-note b { color: var(--v5-heading); }
.v5-acct-new { background: #fff; color: var(--v5-warning); font-size: 0.8em; margin-left: 10px; padding: 1px 6px; border-radius: var(--v5-radius-sm); display: inline-block; }
.v5-acct-copy { color: var(--v5-text-muted); font-size: var(--v5-font-size-body); line-height: 1.8; margin: 0 0 var(--v5-space-md); }
.v5-acct-copy a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-acct-warn { background: #fff; color: var(--v5-warning); padding: 8px 12px; border-radius: var(--v5-radius-md); display: inline-block; }
.v5-acct-list { margin: 0 0 var(--v5-space-md) 1.4em; padding: 0; line-height: 1.8; }
.v5-acct-list li { margin: 0 0 4px; }
.v5-token-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--v5-space-md); margin: var(--v5-space-md) 0; }
.v5-token-card { background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); padding: var(--v5-space-lg); text-align: center; }
.v5-token-course { font-size: var(--v5-font-size-title); font-weight: 800; color: var(--v5-heading); }
.v5-token-price { font-size: var(--v5-font-size-body); color: var(--v5-accent-gold); margin: 6px 0 2px; font-weight: 700; }
.v5-light .v5-token-price { color: var(--v5-heading); } /* gold=2.1:1 on white → dark ink (prices must be readable) */
.v5-token-save { font-size: var(--v5-font-size-micro); color: var(--v5-text-muted); margin: 0 0 var(--v5-space-md); }
@media (max-width: 480px) {
  .v5-acct-tabs { gap: 6px; }
  .v5-acct-table th, .v5-acct-table td { padding: 8px 6px; }
}

/* links inside white warning chips need AA on white (gjc precedent: #06f = 4.83:1) */
.v5-acct-warn a, .v5-acct-msg a { color: var(--v5-cta); }
/* light theme: white chips need a visible edge on the white page bg */
.v5-light .v5-acct-msg, .v5-light .v5-acct-expired, .v5-light .v5-acct-warn, .v5-light .v5-acct-new { border: 1px solid var(--v5-border); }

/* ===== v5-polish addendum（確定v1準拠・上流未収載分のみ 2026-07-10） ===== */
/* テーマ切替（☀/☾・.v5-light休眠テーマの入口） */
.v5-theme-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--v5-border-strong); color: var(--v5-text-muted); font-size: var(--v5-fs-control); cursor: pointer; line-height: 1; flex: none; }
.v5-theme-toggle:hover { color: var(--v5-heading); border-color: var(--v5-brand-blue); }
/* PPV/ティアカタログの行リスト（.v5-ppv-list=製品PPVパネルと衝突するため専用名） */
.v5-ppvcat-list { display: block; max-width: 960px; }
/* FAQ回答内レガシー表: 金/グレーグラデセルの白文字を濃色化（コンテンツ内styleより後勝ち） */
.v5-faq-a .point3, .v5-faq-a .point4 { color: #1a1a1a; }
/* モデルカードの英名/かな副行 */
.v5-pcard .pov-sub { display: block; font-size: var(--v5-fs-micro); color: var(--v5-text-faint); }
/* contact系を中央寄せ（現行 input-form-wrapper 560px準拠） */
.v5-contact-form, .v5-contact-memo, .v5-contact-done { margin-left: auto; margin-right: auto; }
.v5-contact-memo { max-width: 560px; box-sizing: border-box; }
/* news 2階調 */
.v5-newslist .d { color: var(--v5-text-faint); }
.v5-newslist .s { color: var(--v5-text); }
/* 製品レビュー 3階調+一定の区切り */
.v5-review .who b, .v5-review .who .v5-revwho { color: var(--v5-heading); font-weight: 600; }
.v5-review .who .date { color: var(--v5-text-faint); }
.v5-review p { color: var(--v5-text); }
.v5-review { border-bottom: 1px solid var(--v5-border); padding-bottom: 14px; margin-bottom: 14px; }

/* interview Q&A color-coding (parity: legacy .question=#15b1f3 / .answer=#f6c) */
.v5-interview .question { color: #15b1f3; }
.v5-interview .answer { color: #f6c; }
.v5-interview .question, .v5-interview .answer { line-height: 1.75; }

/* product DL: batch publish schedule + howto link (確定v1) */
.v5-dl-wait { color: var(--v5-text-faint); font-size: var(--v5-font-size-label); }
.v5-dl-howto { color: var(--v5-link); font-size: var(--v5-font-size-label); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }

/* v5 auth pages (login / password remind / reset) */
.v5-auth { max-width: 560px; }
.v5-auth .v5-acct-panel { margin-top: var(--v5-space-md); }
.v5-auth-links { display: flex; gap: 24px; margin-top: var(--v5-space-lg); font-size: var(--v5-font-size-label); }
.v5-auth-links a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }

/* ============================================================
   Product v5 redesign — tabs (会員=DL群 / 非会員=価値+価格CTA)
   Appended for feat/product-v5-redesign. Colors: v5 tokens only.
   ============================================================ */

/* single-column watch (related lives in a tab now, no right rail) */
.v5-watch--single { grid-template-columns: 1fr; }

/* avg-star chip in the primary subline */
.v5-substar { color: var(--v5-star); font-weight: 700; font-size: var(--v5-fs-body); }
.v5-substar i { color: var(--v5-text-faint); font-weight: 400; font-style: normal; }

/* volume stats (写真 / 動画 / 最高画質) */
.v5-volume { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.v5-vstat { display: flex; flex-direction: column; background: var(--v5-surface); border: 1px solid var(--v5-border-strong); border-radius: 10px; padding: 8px 16px; min-width: 92px; }
.v5-vstat .n { color: var(--v5-heading); font-size: 20px; font-weight: 800; line-height: 1.1; }
.v5-vstat .l { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); margin-top: 2px; }

/* guest metered overlay (over the sample player) */
.v5-metered { position: absolute; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; }
.v5-metered__inner { max-width: 460px; }
.v5-metered h3 { color: #fff; font-size: var(--v5-fs-h2); line-height: 1.4; margin: 0 0 6px; }
.v5-metered p { color: #ddd; font-size: var(--v5-fs-label); line-height: 1.7; margin: 0 0 10px; }
.v5-metered__price { color: #fff; font-size: var(--v5-fs-body); margin-bottom: 12px; }
.v5-metered__price b { color: var(--v5-star); font-size: 20px; }
.v5-metered__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.v5-pop { background: var(--v5-star); color: #111; font-size: var(--v5-fs-micro); font-weight: 800; border-radius: 5px; padding: 3px 8px; }

/* guest value + price + CTA block (shown before any negative gate) */
.v5-value { background: linear-gradient(180deg, var(--v5-surface), var(--v5-bg)); border: 1px solid var(--v5-brand-blue); border-radius: 14px; padding: 18px; margin: 16px 0 4px; }
.v5-value h2 { color: var(--v5-heading); font-size: var(--v5-fs-h2); line-height: 1.4; margin: 0 0 6px; }
.v5-value__sub { color: var(--v5-text-muted); font-size: var(--v5-fs-body); line-height: 1.7; margin: 0 0 14px; }
.v5-value__how { margin: 0 0 14px; }
.v5-value__how p { color: var(--v5-text); font-size: var(--v5-fs-body); line-height: 1.8; margin: 0 0 4px; }
.v5-value__how b { color: var(--v5-heading); }
.v5-value__btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.v5-value__btns .v5-btn--primary { min-height: 50px; }
.v5-plink { color: var(--v5-link); font-size: var(--v5-fs-label); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); display: inline-flex; align-items: center; min-height: 40px; }
.v5-value__fine { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); line-height: 1.6; margin: 12px 0 0; }

/* tab bar (sticky, 1-click) */
/* Tabs WRAP — never horizontally scroll. A scrollbar in the tab strip hides tabs
   and is treated as a bug; flex-wrap keeps every tab reachable at any width. */
.v5-ptabs { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 2px 0; margin: 20px 0 0; background: var(--v5-bg); border-bottom: 1px solid var(--v5-border-strong); }
.v5-ptabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--v5-text-muted); min-height: 48px; padding: 0 16px; font: inherit; font-size: var(--v5-fs-control); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.v5-ptabs button .c { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); font-weight: 400; }
.v5-ptabs button.on { color: var(--v5-heading); border-bottom-color: var(--v5-sel-line); }
/* anchor-based ptabs (navigation tabs, e.g. PPV tier switch) — mirror the button tabs */
.v5-ptabs .v5-ptab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--v5-text-muted); min-height: 48px; padding: 0 16px; font: inherit; font-size: var(--v5-fs-control); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.v5-ptabs .v5-ptab.on { color: var(--v5-heading); border-bottom-color: var(--v5-sel-line); }
@media (max-width: 640px) { .v5-ptabs .v5-ptab { padding: 0 9px; } }
.v5-panel { padding-top: 18px; }

/* guest preview note (量訴求 only, no DL controls) */
.v5-previewnote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.v5-previewnote__t { flex: 1 1 260px; color: var(--v5-text); font-size: var(--v5-fs-body); }
.v5-previewnote .v5-btn { margin-left: auto; }

/* guest sample thumbnails — shrink only, never enlarge or crop */
.v5-sheet-sample { border-radius: 4px; overflow: hidden; background: var(--v5-surface); line-height: 0; display: inline-block; }
.v5-sheet-sample img { display: block; width: auto; height: auto; max-width: 100%; }

/* guest repeat CTA before leaving */
.v5-cta-repeat { background: var(--v5-surface); border: 1px solid var(--v5-brand-blue); border-radius: 12px; padding: 16px; text-align: center; margin: 24px 0 0; }
.v5-cta-repeat h3 { color: var(--v5-heading); font-size: var(--v5-fs-h3); margin: 0 0 12px; }
.v5-cta-repeat__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* guest review empty state (base .v5-empty defined above; add link styling) */
.v5-empty a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }

/* ============================================================
   Product detail redesign (feat/product-v5-redesign)
   Two-column: PC = right sidebar (guest CTA + 関連作品).
   Mobile (<=900px) = sidebar hidden, 関連作品 becomes a tab,
   guest CTA moves into the main flow. Exactly ONE CTA at any width.
   ============================================================ */

/* two-column product shell (the 372px rail is defined on .v5-watch above) */
.v5-watch--product { align-items: start; }
/* グリッドアイテムの min-width は既定 auto = 中身の固有幅より縮まない。
   サイドバー内の .v5-rail(横並びレール)が枠を押し広げて横スクロールを起こすため 0 に固定する。 */
.v5-pside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v5-pside > *, .v5-pside .v5-rail { min-width: 0; max-width: 100%; }
.v5-sidehead { color: var(--v5-heading); font-size: var(--v5-fs-h2); margin: 0; }

/* 関連作品 tab is PC-hidden: on wide screens it lives in the sidebar instead.
   Also used for the guest CTA in the main flow (mobile-only). */
.v5-hide-pc { display: none; }
/* PCではゲスト集客ブロック(.v5-value)を隠す: 同じピッチ/価格/ボタンを右サイドバーの
   sticky CTA が既にファーストビューで担っており重複。これがタブを約231px押し下げ、
   タブがfold際(899px)に落ちる原因だった。隠すとタブが現行同等(≈668px)に上がる。
   モバイルはサイドバーが消えるため .v5-value を残す(ボタンの受け皿)。tier別の
   「この作品を見るには」はDLタブのゲストCTAとtierバッジで担保。 */
@media (min-width: 901px) { .v5-value { display: none; } }
@media (max-width: 900px) {
  .v5-watch--product { grid-template-columns: 1fr; }
  .v5-pside { display: none; }
  .v5-ptabs button.v5-hide-pc { display: inline-flex; }
  .v5-value__btns.v5-hide-pc { display: flex; }
}
/* keep tap targets >=44px while fitting more tabs per row on narrow screens */
@media (max-width: 520px) {
  .v5-ptabs button { padding: 0 9px; font-size: var(--v5-fs-control); }
}

/* hero stays put while playing, so switching movies in the list below
   never scrolls the player out of view */
.v5-player.is-playing { position: sticky; top: 8px; z-index: 25; }

/* 作品詳細 / モデル詳細 definition tables */
.v5-sechead { color: var(--v5-heading); font-size: var(--v5-fs-h2); margin: 18px 0 8px; }
.v5-panel .v5-sechead:first-child { margin-top: 0; }
.v5-dtable { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 18px; font-size: var(--v5-fs-body); margin: 0 0 4px; }
.v5-dtable dt { color: var(--v5-text-faint); white-space: nowrap; }
.v5-dtable dd { color: var(--v5-text); min-width: 0; margin: 0; }

/* file rows: number only. No per-file counts/ranges/progress — the real zip
   contents are not reliably known, so showing them would be false data. */
.v5-mrow2 { display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid var(--v5-border); flex-wrap: wrap; }
.v5-mrow2.play { cursor: pointer; }
.v5-mrow2.play:hover { background: var(--v5-surface); border-radius: var(--v5-radius-md); }
.v5-mrow2.lock { opacity: .55; }
.v5-mrow2 .pnum { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--v5-border-strong); display: flex; align-items: center; justify-content: center; font-size: var(--v5-fs-label); color: var(--v5-text); }
.v5-mrow2.active { background: var(--v5-surface); border-radius: var(--v5-radius-md); }
.v5-mrow2.active .pnum { background: var(--v5-brand-blue); color: #fff; border-color: var(--v5-brand-blue); }
.v5-mrow2.active .mi b { color: var(--v5-brand-blue); }
.v5-mrow2 .mi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v5-mrow2 .mi b { color: var(--v5-heading); font-size: var(--v5-fs-body); }
.v5-mrow2 .mi .q { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); }
.v5-mrow2 .acts { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.v5-act { display: inline-flex; align-items: center; gap: 4px; background: var(--v5-surface); border: 1px solid var(--v5-border-strong); color: var(--v5-text); border-radius: 8px; min-height: 40px; padding: 0 14px; font: inherit; font-size: var(--v5-fs-label); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.v5-act:hover { border-color: var(--v5-brand-blue); color: var(--v5-heading); }

/* 一括 sits at the TOP: when every file is published most users finish in 1 click */
.v5-allbtn-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v5-border-strong); }
.v5-alllab { color: var(--v5-text-faint); font-size: var(--v5-fs-label); }
.v5-dlq { display: inline-flex; align-items: center; gap: 5px; background: var(--v5-surface); border: 1px solid var(--v5-border-strong); color: var(--v5-text); border-radius: 8px; min-height: 40px; padding: 0 13px; font: inherit; font-size: var(--v5-fs-label); font-weight: 700; text-decoration: none; cursor: pointer; }
.v5-dlq:hover { border-color: var(--v5-brand-blue); }
.v5-thumbbtn { background: var(--v5-surface); border: 1px solid var(--v5-border-strong); color: var(--v5-text); border-radius: 8px; min-height: 40px; padding: 0 13px; font: inherit; font-size: var(--v5-fs-label); font-weight: 700; cursor: pointer; }
.v5-thumbbtn:hover { border-color: var(--v5-brand-blue); color: var(--v5-heading); }

/* guest CTA inside the DL tabs */
.v5-dlcta { background: var(--v5-surface); border: 1px dashed var(--v5-border-strong); border-radius: 10px; padding: 14px; margin-bottom: 12px; color: var(--v5-text-muted); font-size: var(--v5-fs-body); }
.v5-dlcta b { color: var(--v5-heading); display: block; margin-bottom: 10px; }
.v5-dlcta__btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v5-plink { color: var(--v5-link); font-size: var(--v5-fs-label); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); min-height: 40px; display: inline-flex; align-items: center; }

/* guest join card (sidebar on PC) */
.v5-gjc { background: var(--v5-surface); border: 1px solid var(--v5-border-strong); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.v5-gjc__head { color: var(--v5-heading); font-size: var(--v5-fs-h3); font-weight: 800; line-height: 1.4; }
.v5-gjc__sub { color: var(--v5-text-muted); font-size: var(--v5-fs-body); }
.v5-gjc__pricebox { display: flex; flex-direction: column; }
/* V5_DESIGN_RULES 準拠。CTAは白ピル(--v5-cta-bg×--v5-cta-ink・radius999・hover opacity.88)
   ＝正準の .v5-btn--primary と同一。#06fのダーク面塗りは禁止。価格は無彩(強調はサイズ/太さ)。
   .v5-scope を付けるのは .v5-scope a{color:inherit}(詳細度0,1,1)に負けないため。 */
.v5-scope .v5-gjc__price { color: var(--v5-heading); font-size: var(--v5-fs-body); font-weight: 700; line-height: 1.35; white-space: nowrap; }
.v5-scope .v5-gjc__btn { background: var(--v5-cta-bg); color: var(--v5-cta-ink); border-radius: 999px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--v5-fs-control); line-height: 1.2; text-decoration: none; }
.v5-scope .v5-gjc__btn:hover { opacity: .88; }
.v5-scope .v5-gjc__login { color: var(--v5-link); font-size: var(--v5-fs-label); text-align: center; text-decoration: underline; text-decoration-color: var(--v5-link-deco); text-underline-offset: 3px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.v5-scope .v5-gjc__login:hover { color: var(--v5-heading); }

/* thumbnail lightbox: mixed portrait/landscape thumbs live here only, so the
   row list stays number-only and the page layout can't break.
   Images are never upscaled or cropped — max-width/height, natural size kept. */
.v5-lb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.v5-lb-box { background: var(--v5-bg); border: 1px solid var(--v5-border-strong); border-radius: 14px; max-width: 900px; width: 100%; max-height: 85vh; overflow: auto; padding: 16px; }
.v5-lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.v5-lb-head b { color: var(--v5-heading); font-size: var(--v5-fs-h3); }
.v5-lb-close { background: var(--v5-surface); border: 1px solid var(--v5-border-strong); color: var(--v5-text); border-radius: 8px; min-height: 40px; padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.v5-lb-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.v5-lbc { margin: 0; }
.v5-lbc.port { flex: 0 0 110px; }
.v5-lbc.land { flex: 0 0 200px; }
.v5-lbc img { display: block; width: auto; height: auto; max-width: 100%; border-radius: 8px; background: var(--v5-surface); }
.v5-lbc figcaption { color: var(--v5-text-faint); font-size: var(--v5-fs-label); margin-top: 4px; }

/* guest_join_cta copy helpers (same as user/partials/_gjc_style.blade.php):
   .gjc__ln = break per sentence so JP wraps at 「。」 / .gjc__nb = keep katakana words whole */
.v5-gjc .gjc__ln { display: block; }
.v5-gjc .gjc__nb { white-space: nowrap; }
.v5-gjc__renew { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); }

/* ===== /v5/regist : plan selection (v5 tokens only・確定v1準拠) ===== */
.v5-plan-hero { margin: 0 0 var(--v5-space-lg); }
.v5-plan-subhead { font-size: var(--v5-fs-h2); font-weight: 700; color: var(--v5-text); margin: 0; }
/* plan grid: rows on mobile, 5 columns ≥1040px (6 cols for token/bank rows) */
.v5-plan-grid { display: flex; flex-direction: column; gap: var(--v5-space-md); margin: 0 0 var(--v5-space-md); }
.v5-plan-card { position: relative; display: flex; align-items: stretch; background: var(--v5-surface); border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); overflow: hidden; }
.v5-plan-card--pop { border: 1px solid var(--v5-brand-blue); }
.v5-plan-ribbon { position: absolute; top: 0; right: 0; z-index: 2; font-size: var(--v5-fs-micro); font-weight: 800; letter-spacing: .04em; color: var(--v5-cta-ink); background: var(--v5-cta-bg); padding: 3px 10px; border-bottom-left-radius: var(--v5-radius-md); }
.v5-plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--v5-space-md) var(--v5-space-md) var(--v5-space-md) var(--v5-space-lg); }
.v5-plan-dur { font-size: var(--v5-fs-h3); font-weight: 800; color: var(--v5-heading); line-height: 1.2; }
.v5-plan-note { font-size: var(--v5-fs-label); font-weight: 600; color: var(--v5-text-faint); margin-left: 6px; }
.v5-plan-pricerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v5-plan-price { font-size: var(--v5-fs-h1); font-weight: 800; color: var(--v5-heading); line-height: 1; }
.v5-plan-was { font-size: var(--v5-fs-label); color: var(--v5-text-faint); text-decoration: line-through; }
.v5-plan-save { font-size: var(--v5-fs-micro); font-weight: 700; color: var(--v5-brand-blue); border: 1px solid var(--v5-border-strong); border-radius: 999px; padding: 1px 9px; }
.v5-plan-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.v5-plan-tag { font-size: var(--v5-fs-micro); line-height: 1.6; padding: 1px 8px; border-radius: var(--v5-radius-sm); background: var(--v5-bg); color: var(--v5-text-muted); border: 1px solid var(--v5-border); }
.v5-plan-cta { display: flex; align-items: center; padding: var(--v5-space-sm) var(--v5-space-md); }
.v5-plan-form { margin: 0; }
.v5-plan-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 108px; min-height: 44px; padding: 0 18px; font: inherit; font-size: var(--v5-fs-control); font-weight: 700; color: var(--v5-cta-ink); background: var(--v5-cta-bg); border: 1px solid var(--v5-cta-bg); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.v5-plan-btn:hover { opacity: .88; }
.v5-plan-note-mini { font-size: var(--v5-fs-micro); color: var(--v5-text-faint); }
.v5-plan-returning { text-align: center; font-size: var(--v5-fs-body); color: var(--v5-text-muted); margin: var(--v5-space-lg) 0 var(--v5-space-md); }
.v5-plan-returning a { color: var(--v5-link-v1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-plan-returning a:hover { text-decoration-color: var(--v5-link-v1); }
/* accordions (styled like the product/account page) */
.v5-plan-acc { border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); margin-top: var(--v5-space-md); background: var(--v5-surface); overflow: hidden; }
.v5-plan-acc > summary { list-style: none; cursor: pointer; padding: 13px 16px; font-size: var(--v5-fs-control); font-weight: 700; color: var(--v5-text); display: flex; align-items: center; justify-content: space-between; }
.v5-plan-acc > summary::-webkit-details-marker { display: none; }
.v5-plan-acc > summary::after { content: "\25be"; font-size: var(--v5-fs-control); color: var(--v5-text-faint); transition: transform .2s; }
.v5-plan-acc[open] > summary::after { transform: rotate(180deg); }
.v5-plan-acc-body { padding: 4px var(--v5-space-md) var(--v5-space-lg); }
.v5-plan-copy { font-size: var(--v5-fs-body); line-height: 1.8; color: var(--v5-text-muted); margin: var(--v5-space-sm) 0; }
.v5-plan-copy a { color: var(--v5-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v5-link-deco); }
.v5-plan-acc-body .v5-plan-grid { margin-top: var(--v5-space-sm); }
@media (min-width: 1040px) {
  .v5-plan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--v5-space-md); align-items: stretch; }
  .v5-plan-grid--6 { grid-template-columns: repeat(6, 1fr); }
  .v5-plan-card { flex-direction: column; text-align: center; }
  .v5-plan-ribbon { left: 0; right: 0; border-radius: 0; text-align: center; }
  .v5-plan-body { padding: var(--v5-space-lg) var(--v5-space-md) var(--v5-space-sm); align-items: center; }
  .v5-plan-pricerow { justify-content: center; }
  .v5-plan-tags { justify-content: center; }
  .v5-plan-cta { padding: var(--v5-space-sm) var(--v5-space-md) var(--v5-space-lg); }
  .v5-plan-btn { width: 100%; }
}

/* ===== 案② VideoCard 拡充(ティアバッジ/★評価/サイズ) — 役割トークンのみ使用 ===== */
.v5-ytcard .yt-signals { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.v5-ytcard .yt-tier { font-size: var(--v5-fs-micro); }
.v5-ytcard .yt-stars { font-size: var(--v5-fs-micro); color: var(--v5-star); letter-spacing: 1px; line-height: 1; }
.v5-ytcard .yt-stars .yt-stars-off { opacity: .45; }
.v5-ytcard .yt-rc { font-size: var(--v5-fs-micro); color: var(--v5-text-faint); }
.v5-ytcard .yt-size { margin-left: 0; } /* .v5-ppv-size の margin-left を打ち消し左揃え */

/* ===== 案③ コンテンツ内CTAの脚注(価格/自動更新開示) + モバイル固定sticky ===== */
.v5-cta-foot { font-size: var(--v5-fs-micro); color: var(--v5-text-muted); margin-top: 6px; }
.v5-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--v5-surface); border-top: 1px solid var(--v5-border); }
.v5-sticky-cta__txt { font-size: var(--v5-fs-label); color: var(--v5-text); }
@media (max-width: 760px) {
  .v5-sticky-cta { display: flex; }
  /* stickyバー(約64px)分をページ末尾に予約=フッター/最終カードが隠れない。GuestCtaがマウント時に付与 */
  body.v5-has-sticky-cta { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== regist reassurance additions (v5x-*) — v5 tokens only ===== */
.v5x-cred{font-size:var(--v5-fs-label);color:var(--v5-text-muted);margin:-4px 0 var(--v5-space-md);display:flex;align-items:center;gap:8px}
.v5x-cred i{color:var(--v5-text-faint)}
.v5x-renew{font-size:var(--v5-fs-micro);color:var(--v5-text-muted);margin-top:2px}
.v5x-bill{font-size:var(--v5-fs-micro);line-height:1.7;color:var(--v5-text-muted);background:var(--v5-surface);border:1px solid var(--v5-border);border-radius:var(--v5-radius-md);padding:11px 14px;margin:0 0 var(--v5-space-md)}
.v5x-bill a{color:var(--v5-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--v5-link-deco)}
.v5x-subhead{font-size:var(--v5-fs-h3);font-weight:700;color:var(--v5-heading);margin:var(--v5-space-lg) 0 var(--v5-space-sm);display:flex;align-items:center;gap:8px}
.v5x-anchor{font-size:var(--v5-fs-label);margin:0 0 var(--v5-space-md)}
.v5x-anchor a{color:var(--v5-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--v5-link-deco)}
@media(min-width:1040px){.v5-plan-grid--4{grid-template-columns:repeat(4,1fr)}}
.v5x-subhead i{color:var(--v5-text-faint);font-size:var(--v5-fs-body)}
.v5x-note{font-size:var(--v5-fs-body);color:var(--v5-text-muted);line-height:1.7;margin:var(--v5-space-sm) 0 0}
.v5x-note a{color:var(--v5-link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--v5-link-deco)}
.v5x-reassure{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;padding:12px 16px;margin:var(--v5-space-md) 0;background:var(--v5-surface);border:1px solid var(--v5-border);border-radius:var(--v5-radius-md)}
.v5x-reassure span{display:inline-flex;align-items:center;gap:7px;font-size:var(--v5-fs-body);color:var(--v5-text-muted)}
.v5x-reassure i{color:var(--v5-text-muted)}
@media(min-width:1040px){.v5-plan-tags{min-height:44px;align-content:flex-start}}
.v5x-value{font-size:var(--v5-fs-body);color:var(--v5-text-muted);margin:0 0 var(--v5-space-md);line-height:1.6;display:flex;align-items:center;gap:8px}
.v5x-value i{color:var(--v5-text-faint)}

/* ===== v5b リッチhome CSS移植(カルーセルヒーロー/promo/価値/proof/band/faq) ===== */
.v5-lp-value { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--v5-border); border-bottom: 1px solid var(--v5-border); }
.v5-lp-value .v { background: var(--v5-surface); padding: 18px 20px; }
.v5-lp-value .v b { display: block; font-size: 15px; color: var(--v5-text); margin-bottom: 3px; }
.v5-lp-value .v span { font-size: 12.5px; color: var(--v5-text-muted); }
.v5-lp-band { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px clamp(16px,3vw,40px); background: linear-gradient(90deg,var(--v5-surface),var(--v5-bg)); }
.v5-lp-band .t { flex: 1; min-width: 220px; }
.v5-lp-band .t h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--v5-heading); }
.v5-lp-band .t p { margin: 0; font-size: 13px; color: var(--v5-text-muted); }
.v5-lp-band .v5-btn { min-height: 52px; padding: 14px 26px; }
.v5-lp-faq { padding: 22px clamp(16px,3vw,40px); }
.v5-lp-faq h3 { font-size: 14px; color: var(--v5-text-faint); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.v5-lp-faq .q { border-top: 1px solid var(--v5-border); padding: 12px 2px; font-size: 13.5px; }
.v5-lp-faq .q b { color: var(--v5-text); }
.v5-lp-faq .q p { margin: 5px 0 0; color: var(--v5-text-muted); font-size: 12.5px; }
.v5-lp-faqmore { display: inline-block; margin-top: 12px; color: var(--v5-brand-blue); text-decoration: none; font-size: 13px; }
@media (max-width: 820px) {
  .v5-lp-value { grid-template-columns: 1fr; }
}
/* ===== Home 回転コンテンツヒーロー（カルーセル動画・ii=文字は画像下の独立帯） ===== */
/* E3: product_top(790x444)/サンプル動画を拡大・切り取りしない。メディアはネイティブ790px上限で中央配置、両脇は黒帯。 */
.v5-rhero { position: relative; background: #000; }
.v5-rhero-media { position: relative; display: block; width: 100%; max-width: 790px; aspect-ratio: 790 / 444; margin: 0 auto; overflow: hidden; background: #000; }
.v5-rhero-media video { width: 100%; height: 100%; object-fit: scale-down; display: block; } /* scale-down=縮小のみ・拡大しない */
.v5-rhero-live { position: absolute; left: 16px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 5px 12px; color: #fff; }
.v5-rhero-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--v5-brand-blue); }
.v5-rhero-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.v5-rhero-arw.l { left: 12px; }
.v5-rhero-arw.r { right: 12px; }
.v5-rhero-bar { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--v5-surface); border-bottom: 1px solid var(--v5-border); }
.v5-rhero-info { text-decoration: none; display: inline-flex; align-items: baseline; }
.v5-rhero-info b { font-size: 16px; color: var(--v5-heading); font-weight: 800; }
.v5-rhero-info span { font-size: 13px; color: var(--v5-text-muted); margin-left: 10px; }
.v5-rhero-sp { flex: 1; }
/* ドットのクリックごとの横ズレ防止: 作品名(info)幅の変動から独立させ中央固定 */
.v5-rhero-dots { display: flex; gap: 8px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.v5-rhero-dots button { width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.v5-rhero-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--v5-border-strong); }
.v5-rhero-dots button.on::before { background: var(--v5-brand-blue); }
.v5-rhero-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #111; background: #fff; border-radius: 8px; padding: 10px 16px; text-decoration: none; min-height: 44px; }
.v5-promo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; border-bottom: 1px solid var(--v5-border); background: var(--v5-surface); }
.v5-promo-t { flex: 1; min-width: 240px; }
.v5-promo-t h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--v5-heading); }
.v5-promo-t p { margin: 0; font-size: 13px; color: var(--v5-text-muted); }
@media (max-width: 820px) {
  /* aspectはネイティブ790/444のまま(切り取り回避)。modeスクリーンでもwidth:100%でネイティブ以下=縮小のみ */
  .v5-rhero-bar { flex-wrap: wrap; row-gap: 10px; }
  /* 折返し時: spacer撤去し go は右寄せ、ドットは独立フル幅行で中央固定(横ズレしない) */
  .v5-rhero-sp { display: none; }
  .v5-rhero-go { margin-left: auto; }
  .v5-rhero-dots { position: static; transform: none; order: 9; flex: 0 0 100%; justify-content: center; }
}

/* ===== regist: 上位プランの「新たに解放される作品レベル」を主役に（案3） ===== */
.v5x-unlock{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:7px 10px;background:rgba(255,255,255,.05);border-left:3px solid var(--v5-border-strong);border-radius:var(--v5-radius-sm);font-size:var(--v5-fs-body);font-weight:700;color:var(--v5-heading);line-height:1.5;text-align:left}
.v5x-unlock--silver{border-left-color:var(--v5-tier-silver)}
.v5x-unlock--gold{border-left-color:var(--v5-tier-gold)}
.v5x-dot{width:8px;height:8px;border-radius:50%;flex:none}
.v5x-dot--silver{background:var(--v5-tier-silver)}
.v5x-dot--gold{background:var(--v5-tier-gold)}
.v5x-base{font-size:var(--v5-fs-micro);color:var(--v5-text-muted);margin-top:6px;line-height:1.6}
/* 価格ベースラインを5枚で揃える（サブスクのグリッド限定。トークン/振込の--6/--4には効かせない） */
@media(min-width:1040px){
  .v5-plan-grid:not(.v5-plan-grid--6):not(.v5-plan-grid--4) .v5-plan-body{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;gap:4px}
}
@media(max-width:767px){.v5x-unlock{font-size:13px}.v5x-base{font-size:12px}}

/* ===== 単品購入(/v5/update-list/ppv) を現行 /update-list/ppv に合わせる =====
   現行はティアタブをティア色で色分けし、ランキングを同じ帯の右端に置いている。
   v5はダーク地のため黒(#000)を文字色に使えないので、TOKENS.md のティア色を
   「先頭のドット」で示し4ティアで表現方法を統一する（黒は#000+#555の縁）。 */
.v5-ptabs .v5-ptab--silver::before,
.v5-ptabs .v5-ptab--gold::before,
.v5-ptabs .v5-ptab--platinum::before,
.v5-ptabs .v5-ptab--black::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.v5-ptabs .v5-ptab--silver::before   { background: #a8a8a8; }
.v5-ptabs .v5-ptab--gold::before     { background: #d4af37; }
.v5-ptabs .v5-ptab--platinum::before { background: #ccc2c2; }
.v5-ptabs .v5-ptab--black::before    { background: #000; box-shadow: inset 0 0 0 1px #555; }

/* ランキングは同じ帯の右端（現行同様）。狭い幅では独立行にして左レールへ揃える */
.v5-ptabs-rank { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; padding: 0 4px; }
.v5-ptabs-rank a { color: var(--v5-text-muted); font-size: var(--v5-fs-label); }
.v5-ptabs-rank a:hover { color: var(--v5-heading); }
@media (max-width: 820px) {
  .v5-ptabs-rank { margin-left: 0; flex: 0 0 100%; padding: 6px 0 8px; gap: 16px; flex-wrap: wrap; }
}

/* 現行 h2.search-head「作品カテゴリー: 学生服」相当。ページタイトル(h1)より一段小さい文脈見出し */
.v5-sec-head { margin: 14px 0 4px; font-size: var(--v5-fs-h3); font-weight: 700; color: var(--v5-heading); }

/* ===== ランキング順位数字: 中抜き → 塗り =====
   理由: ①丸ゴシックはW4の1ウェイトのみで font-weight:900 が合成ボールドになり、
   その歪んだ輪郭を text-stroke がなぞって線がぐらつく ②中抜きは大半が背景色の上の
   背景色で効果が出ない ③当サイトは画像上の情報を実体のある塗り+白文字で統一済み
   (.yt-badge = #fff × rgba(0,0,0,.8) / .v5-rhero-live = #fff × rgba(0,0,0,.6) / CTA = 白地)。
   Netflix実物も塗り(stroke:none)。数字は tabular-nums + 2ch で1桁/2桁の左端を揃える。 */
.v5-ranknum,
.v5-rankgrid .rn {
  font-family: Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 8px rgba(0,0,0,.65);
  letter-spacing: -.02em;
}
.v5-ranknum { width: 2ch; text-align: right; }
.v5-rankgrid .rn { font-size: 46px; }

/* ===== /v5/regist プラン比較（PC=テーブル / モバイル=カード・確定v1トークンのみ） ===== */
.v5x-cmp-wrap { display: none; }
.v5x-planmob { display: block; }
@media (min-width: 1040px) {
  .v5x-cmp-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--v5-border); border-radius: var(--v5-radius-md); background: var(--v5-surface); }
  .v5x-planmob { display: none; }
}
.v5x-cmp { width: 100%; min-width: 860px; border-collapse: collapse; }
.v5x-cmp th, .v5x-cmp td { padding: 12px 10px; border-bottom: 1px solid var(--v5-border); text-align: center; font-size: var(--v5-fs-body); vertical-align: top; }
.v5x-cmp thead th { vertical-align: bottom; border-bottom: 1px solid var(--v5-border-strong); }
.v5x-cmp .v5x-cmp-label { text-align: left; color: var(--v5-text-muted); font-weight: 600; min-width: 200px; vertical-align: middle; }
.v5x-cmp tbody tr:last-child th, .v5x-cmp tbody tr:last-child td { border-bottom: 0; }
.v5x-cmp-dur { font-size: var(--v5-fs-control); font-weight: 800; color: var(--v5-heading); }
.v5x-cmp-price { font-size: var(--v5-fs-h2); font-weight: 800; color: var(--v5-heading); line-height: 1.2; }
.v5x-cmp-was { font-size: var(--v5-fs-micro); color: var(--v5-text-faint); text-decoration: line-through; }
.v5x-cmp-flag { display: inline-block; font-size: var(--v5-fs-micro); font-weight: 800; color: var(--v5-cta-ink); background: var(--v5-cta-bg); border-radius: var(--v5-radius-sm); padding: 1px 8px; margin-bottom: 4px; }
/* 人気列は面塗りせず構造線で示す（ブランド青は線のみ） */
.v5x-cmp .v5x-cmp-pop { border-left: 2px solid var(--v5-brand-blue); border-right: 2px solid var(--v5-brand-blue); }
.v5x-cmp thead .v5x-cmp-pop { border-top: 2px solid var(--v5-brand-blue); }
.v5x-cmp tbody tr:last-child .v5x-cmp-pop { border-bottom: 2px solid var(--v5-brand-blue); }
.v5x-ptnum { font-size: var(--v5-fs-h3); font-weight: 800; color: var(--v5-heading); }
.v5x-ptunit { font-size: var(--v5-fs-micro); font-weight: 700; color: var(--v5-text-muted); margin-left: 3px; }
.v5x-wl { display: flex; flex-direction: column; align-items: center; }
.v5x-wl-row { min-height: 26px; line-height: 26px; font-weight: 600; color: var(--v5-text); }
.v5x-wl-row--off { visibility: hidden; }
.v5x-cmp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 108px; padding: 0 16px;
  font: inherit; font-size: var(--v5-fs-label); font-weight: 700; color: var(--v5-cta-ink); background: var(--v5-cta-bg);
  border: 1px solid var(--v5-cta-bg); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.v5x-cmp-btn:hover { opacity: .88; }
/* ティアは色だけに頼らず塗りチップで示す（WCAG 1.4.1・既存 .v5-rank と同方式） */
.v5x-tier { display: inline-block; font-size: var(--v5-fs-micro); font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: 3px; color: #111; background: var(--v5-tier-silver); white-space: nowrap; }
.v5x-tier--gold { background: var(--v5-accent-gold); }
.v5x-tier--silver { background: var(--v5-tier-silver); }
.v5x-tier--reg { background: transparent; color: var(--v5-text-muted); border: 1px solid var(--v5-border-strong); padding: 1px 8px; }
/* モバイルカード内の明細行 */
.v5x-mrows { border-top: 1px solid var(--v5-border); margin: 8px calc(-1 * var(--v5-space-md)) 0; padding: 10px var(--v5-space-md) 2px; text-align: left; }
.v5x-mrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 28px; font-size: var(--v5-fs-body); }
.v5x-mkey { color: var(--v5-text-faint); font-size: var(--v5-fs-micro); font-weight: 700; letter-spacing: .04em; padding-top: 3px; white-space: nowrap; }
.v5x-mval { color: var(--v5-heading); font-weight: 700; text-align: right; }
.v5x-mwork { display: block; line-height: 22px; }
.v5x-cmp-none { color: var(--v5-text-faint); }
/* 会員プラン以外（トークン/振込）は列数が多いので最小幅を抑える */
.v5-plan-acc .v5x-cmp, .v5x-cmp--narrow { min-width: 720px; }

/* ===== /v5/regist トークン・銀行振込を会員登録セクションの書式に合わせる =====
   基準（クレジットカードで会員登録）は変更しない。以下はアコーディオン内など
   合わせる側だけに効くスコープに限定する。 */
.v5-plan-acc-body .v5x-cmp-wrap { margin-left: calc(-1 * var(--v5-space-md)); margin-right: calc(-1 * var(--v5-space-md)); }
.v5-plan-acc-body .v5x-planmob .v5-plan-grid { margin-top: 0; }