/* だらけ LP / afi-support.net/darake/
見た目は運営会社の本体サイト（afi-support.net）の雰囲気を踏襲：真っ黒な地、マゼンタ×金、
細い色枠のラベル、光沢カプセルのボタン、ロボット写真の左右配置。
app.js / cart-logic.js が参照する class・id は変えていない（.btn .sc* .badge-* .result-* .shelf-* .skel .spin など）。 */
:root {
--bg: #000;
--panel: #0b0b10;
--panel2: #111118;
--line: rgba(255, 255, 255, 0.16);
--accent: #e0218a;
--accent-d: #c2185b;
--accent2: #ff5fb0;
--gold: #d4a017;
--gold2: #f5c542;
--teal: #3fd6c4;
--blue: #4aa8ff;
--orange: #ff9a4d;
--txt: #fff;
--muted: #bcc0cc;
--danger: #ff9b9b;
--ok: #9fe0b0;
--sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
--head-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; background: #000; }
/* 書体の切り替わりを見せない（assets/font-gate.js が html に fg を付け、Noto Sans JP が届いたら fg-in に替える。2026-11-06 KEN指示） */
html.fg body { opacity: 0; }
html.fg-in body { transition: opacity 0.25s ease; }
/* 端末の「動きを減らす」設定（prefers-reduced-motion）でも、LPのアニメーションは止めない（2026-11-03 KEN指示） */
body { margin: 0; color: var(--txt); font-family: var(--sans); font-size: 16px; line-height: 2; background: #000; word-break: auto-phrase; line-break: strict; }
.h2, .h1, .hero-sub, .statement, .box-h, .final p { text-wrap: balance; }
img { max-width: 100%; }
a { color: var(--accent2); }
a:hover { color: #ff8cc7; }
:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
.page { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: #fff; color: #000; padding: 10px 16px; z-index: 200; border-radius: 6px; }
.skip:focus { top: 8px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
/* UI部品は読み物より詰める */
.btn, .input, .select, .shelf-tools, .shelf-msg, .card, .box, .step, .sc, .modal, table, .price-box, .toc, .check, .tg { line-height: 1.7; }
/* ---------- 入場アニメーション ---------- */
@keyframes moIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.mo-in { animation: moIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0s); }
/* ---------- ボタン（光沢カプセル） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 30px; border-radius: 100px; font-size: 16px; font-weight: 900; text-decoration: none; cursor: pointer; border: 3px solid transparent; text-align: center; transition: transform 0.12s, filter 0.15s, background 0.15s; }
.btn-main { color: #fff; border-color: rgba(255, 255, 255, 0.88); background: linear-gradient(180deg, #ff59b4 0%, #e0218a 46%, #b3126d 54%, #d11c80 100%); text-shadow: 0 1px 2px rgba(60, 0, 35, 0.5); box-shadow: 0 0 0 1px rgba(224, 33, 138, 0.55), 0 8px 26px rgba(224, 33, 138, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-main:hover { filter: brightness(1.1); color: #fff; }
.btn-main:active { transform: translateY(2px); box-shadow: 0 0 0 1px rgba(224, 33, 138, 0.55), 0 3px 10px rgba(224, 33, 138, 0.45), inset 0 2px 5px rgba(60, 0, 35, 0.35); }
.btn-main[disabled] { transform: none; opacity: 0.75; box-shadow: none; }
/* ピンクの購入・申込ボタン（.btn-main）は白の外枠を太くする（KEN指示 2026-11-03）。「このサイトを申し込む」はさらに太く。ほかのボタンは3pxのまま */
.btn-main { border-width: 5px; }
.btn-apply { border-width: 6px; }
/* 「このサイトを申し込む」は大きく目立たせる（2026-11-03 KEN指示：視認性と購買意欲のため非常に大きく） */
.btn.btn-apply { min-height: 78px; padding: 18px 30px; font-size: clamp(20px, 5.2vw, 24px); letter-spacing: 0.04em; box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.35), 0 10px 34px rgba(224, 33, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.btn.btn-apply:hover { filter: brightness(1.08); transform: translateY(-2px); }
.sc-foot .btn.btn-apply { min-height: 76px; padding-left: 8px; padding-right: 8px; font-size: 19px; letter-spacing: 0; }
@media (max-width: 700px) { .sc-foot .btn.btn-apply { min-height: 80px; font-size: 22px; letter-spacing: 0.04em; } }
.btn-sub { color: #fff; border-color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); }
.btn-sub:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.btn-sm { min-height: 44px; padding: 8px 22px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn svg { flex: none; }
.btn-hero { min-height: 68px; padding: 10px 26px 10px 14px; gap: 14px; font-size: 18px; }
.btn-hero .btn-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.btn-hero .btn-ar { margin-left: 6px; }
.final .btn-hero { padding-left: 30px; }
.btn-hero .btn-tx { text-align: center; line-height: 1.5; }
/* 「販売中の女優サイト ○人から」: 件数が出る前後でボタンの幅が変わらないよう、文字の領域に最小幅を持たせる。数字は等幅で、桁が変わってもガタつかない */
.btn-hero[data-avail-count] .btn-tx { min-width: 10em; }
/* 2026-11-08 とても狭い画面（340px未満）では最小幅を外し、文字を少しだけ小さくして、アイコンと矢印の場所を守る */
@media (max-width: 339px) { .btn-hero[data-avail-count] .btn-tx { min-width: 0; font-size: 14px; } }
/* 広い画面では2行が1行に並ぶので、1〜3桁の件数でも幅が変わらないよう、さらに広い最小幅を持たせる（ヒーローは2列になる1000px以上だけ。最後のボタンは640px以上） */
@media (min-width: 1000px) { .hero .btn-hero[data-avail-count] .btn-tx { min-width: 20.4em; } }
@media (min-width: 640px) { .final .btn-hero[data-avail-count] .btn-tx { min-width: 20.4em; } }
.hero-count { display: inline-block; min-width: 1.2em; margin: 0 0.1em; font-size: 1.34em; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0; color: #fff3b0; text-shadow: 0 1px 3px rgba(60, 0, 35, 0.75), 0 0 14px rgba(255, 220, 120, 0.45); vertical-align: -0.04em; }
/* 数が変わったとき、数字だけ下から短く切り替わる（0.3秒で、動きを減らす設定のときは app.js が付けない） */
.hero-count.is-flip { animation: heroCountFlip 0.3s ease-out; }
@keyframes heroCountFlip { 0% { opacity: 0; transform: translateY(45%) scale(0.85); } 100% { opacity: 1; transform: none; } }
.nb { display: inline-block; }
/* ---------- 共通 ---------- */
main { margin: 0; padding: 0; counter-reset: sec; }
.sec { position: relative; padding: 96px 20px; }
.wrap, .wrap-sm, .wrap-md, .wrap-lg { margin: 0 auto; }
.wrap { max-width: 1040px; }
.wrap-sm { max-width: 780px; }
.wrap-md { max-width: 900px; }
.wrap-lg { max-width: 1120px; }
.sec-alt { background: linear-gradient(180deg, #000 0%, #09090f 18%, #09090f 82%, #000 100%); }
.eyebrow { font-weight: 700; color: var(--accent2); }
.sec .eyebrow { counter-increment: sec; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; line-height: 1.6; }
.sec .eyebrow::before { content: counter(sec, decimal-leading-zero); color: var(--gold2); font-weight: 900; font-size: 13px; letter-spacing: 0.12em; }
.sec .eyebrow::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.h2 { margin-top: 10px; font-weight: 900; font-size: clamp(25px, 6.6vw, 40px); line-height: 1.5; letter-spacing: 0.01em; color: #fff; }
.lead { margin-top: 24px; font-size: 16px; color: #d3d6de; }
.statement { margin-top: 32px; font-size: clamp(20px, 5.6vw, 30px); font-weight: 900; line-height: 1.65; color: transparent; background: linear-gradient(180deg, #ff5db8 0%, #e0218a 60%, #b3126d 100%); -webkit-background-clip: text; background-clip: text; }
.note { font-size: 14px; color: var(--muted); }
.note-sm { font-size: 12px; color: var(--muted); }
.ph { color: #ffd98a; background: rgba(255, 217, 138, 0.1); border-radius: 4px; padding: 0 4px; }
/* ---------- ロボット写真を左右に大きく置く（本体の 01〜05 の型） ----------
構造: .rb > .rb-fig（写真）/ .rb-head（eyebrow + h2）/ .rb-body（本文）。grid-template-areas で並べる。
PC: 写真が片側、見出し+本文が反対側。スマホ: 見出しと写真を横並びの1行にし、本文はその下に全幅で流す（片側が空かない）。 */
.rb { display: grid; grid-template-columns: 5fr 7fr; grid-template-areas: "fig head" "fig body"; column-gap: 48px; row-gap: 0; align-items: center; }
.rb-r { grid-template-columns: 7fr 5fr; grid-template-areas: "head fig" "body fig"; }
.rb-fig { grid-area: fig; position: relative; display: flex; justify-content: center; align-items: center; }
.rb-fig::before { content: ""; position: absolute; inset: -3% -4%; background: radial-gradient(closest-side, rgba(224, 33, 138, 0.2), rgba(74, 168, 255, 0.07) 55%, transparent 75%); }
/* ロボット画像は背景が透明な切り抜き。マスクやぼかしは掛けず、形に沿った影だけを付けて背景になじませる（端が切れて見えないように）オーナー指定 */
.rb-fig img { position: relative; display: block; width: auto; height: 430px; max-width: none; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 34px rgba(74, 168, 255, 0.14)); }
.rb-head { grid-area: head; align-self: end; min-width: 0; }
.rb-body { grid-area: body; align-self: start; min-width: 0; }
.sec:has(> .rb) { padding-top: 72px; padding-bottom: 72px; }
/* ---------- ヘッダー（ヒーローの上に重ねる） ---------- */
.header, .site-head { position: sticky; top: 0; z-index: 50; height: var(--head-h); margin-bottom: calc(var(--head-h) * -1); }
.header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -14px; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.header-in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { text-decoration: none; display: flex; align-items: center; gap: 12px; color: var(--txt); }
.brand:hover { color: var(--txt); }
/* ロゴ「女優アーカイブ」（G1・2026-11-07 KEN決定。ルビ「アーカイブ」は大きめでスマホにも出す）。PC は高さ48px・幅は比率なり（203px）、600px 以下はスマホ用のファイル（picture で切り替え）を幅108px */
.brand picture { display: block; flex: none; }
.brand-logo { display: block; width: auto; height: 48px; flex: none; object-fit: contain; transition: transform 0.2s, filter 0.2s; }
.brand:hover .brand-logo { transform: translateY(-1px); filter: drop-shadow(rgba(224, 33, 138, 0.6) 0 4px 14px); }
.brand-sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.header-nav .btn { min-height: 40px; padding: 6px 18px; font-size: 13px; font-weight: 700; color: #fff; border: 3px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.78); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07); white-space: nowrap; }
.header-nav .btn:hover { background: rgba(255, 255, 255, 0.16); }
.header-nav .btn:last-child { border: 3px solid rgba(255, 255, 255, 0.85); font-weight: 900; background: linear-gradient(180deg, #f0359c, #c2185b); box-shadow: 0 0 18px rgba(224, 33, 138, 0.5); }
.header-nav .btn:last-child:hover { filter: brightness(1.12); }
@media (max-width: 600px) {
:root { --head-h: 56px; }
.brand-logo { width: 108px; height: auto; }
.header-in { padding: 0 14px; }
.header-nav .btn { min-height: 36px; padding: 4px 12px; font-size: 12px; }
}
/* 幅374px以下（幅360の端末など）: 余白14px×2＋ボタン2つ（約224px）＋間隔12px の残りが約96px なので、ロゴを96px に（ボタンとくっつかない） */
@media (max-width: 374px) {
.brand-logo { width: 96px; }
}
@media (min-width: 720px) {
.brand-sub { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--muted); border: 3px solid rgba(255, 255, 255, 0.28); border-radius: 100px; padding: 2px 14px; background: rgba(0, 0, 0, 0.4); }
}
/* ---------- 1. ファーストビュー ----------
本体と同じ作り：暗い写真を全面＋左→右の黒グラデ、細い色枠のラベル、光沢マゼンタのカプセルCTA。
PCは左に文字・右にデバイスモック（ブラウザ枠＋スマホ枠）、スマホは 文字→CTA→モック の縦並び。 */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 92px 20px 30px; background: #000; }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 34% at 80% 82%, rgba(224, 33, 138, 0.26), transparent 72%), linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.86) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0), #000); }
.hero-in { position: relative; display: grid; gap: 28px; max-width: 680px; margin: 0 auto; }
.hero-copy { min-width: 0; }
.hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.26em; line-height: 1.6; color: var(--gold2); }
.hero-kicker::before { content: ""; flex: none; width: 30px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--gold2)); }
.hero .eyebrow { margin-top: 8px; font-size: 13px; letter-spacing: 0.12em; line-height: 1.7; color: #fff; text-shadow: 0 2px 12px #000; }
.nb { display: inline-block; }
.h1 { margin-top: 14px; font-size: clamp(30px, 8.9vw, 52px); font-weight: 900; line-height: 1.2; letter-spacing: -0.03em; font-feature-settings: "palt" 1; color: #fff; transform: skewX(-6deg); transform-origin: 0 50%; text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65); }
.h1 .pk { color: var(--accent); text-shadow: 0 0 22px rgba(224, 33, 138, 0.5), 0 4px 28px rgba(0, 0, 0, 0.6); }
/* ---------- 2026-11-10 KEN決定：ファーストビューのキャッチコピーを「デジタルの文字変換」で出す（案E。動きは assets/hero-scramble.js）---------- */
.h1 .hs-ch { position: relative; }
.h1 .hs-scr { color: transparent; text-shadow: none; }
.h1 .hs-g { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-style: normal; white-space: nowrap; pointer-events: none; color: #7fe3ff; text-shadow: 0 0 10px rgba(127, 227, 255, 0.7); opacity: 0.85; }
.h1 .hs-lock { animation: hsLock 0.35s ease-out; }
.h1 .hs-lock-pk { animation: hsLockPk 0.5s ease-out; }
@keyframes hsLock { 0% { color: #fff; text-shadow: 0 0 18px #fff; } 100% { color: inherit; } }
@keyframes hsLockPk { 0% { color: #fff; text-shadow: 0 0 30px #fff, 0 0 50px var(--accent2); } 100% { color: inherit; } }
.hero-sub { margin-top: 18px; max-width: 32em; font-size: 14px; font-weight: 500; line-height: 1.9; color: #e6e8ee; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); text-wrap: pretty; }
.cta-row { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-micro, .cta-note { margin-top: 20px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.hero .cta-row { margin-top: 24px; align-items: stretch; gap: 14px; }
.hero .btn-hero { min-height: 64px; }
.hero .btn-hero .btn-tx { flex: 1; }
.hero .btn-sub { align-self: flex-start; min-height: 38px; padding: 4px 18px; font-size: 13px; font-weight: 700; border-width: 3px; border-color: rgba(255, 255, 255, 0.78); background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero .btn-sub:hover { background: rgba(255, 255, 255, 0.16); }
.hero .hero-micro { margin-top: 14px; font-size: 11.5px; text-shadow: 0 1px 8px #000; }
/* ラインナップにない女優の依頼フォームへの小さな1行（目立たせすぎない。2026-11-08） */
.hero .hero-micro.hero-req { margin-top: 4px; }
/* ボタンの直前に置く短い一言（マイクロコピー）。ボタンの一部に見えるよう、間隔を詰めて小さく控えめに。 */
.cta-unit { display: flex; flex-direction: column; align-items: inherit; gap: 7px; }
.cta-row .cta-micro, .cta-micro { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.7; letter-spacing: 0; color: #cfd3dc; text-align: center; text-wrap: pretty; }
.hero .cta-micro { text-align: left; font-size: 11.5px; text-shadow: 0 1px 8px #000; }
.cta-micro-m { margin: 0 0 8px; }
/* 「1女優につき1サイトだけ。先に申し込まれた方のものになります。」は、どの画面幅でも途中で折り返さず1行にする（2026-11-05 KEN指示）。
文字の幅は約30em（実測 29.99em）＋余裕5% = 31.5em。親の左右余白（LPのガター 20px×2）を引いた幅に収まる大きさにして、PCでは 12px のまま。 */
.cta-micro-one, .cta-row .cta-micro-one { white-space: nowrap; text-wrap: nowrap; overflow: hidden; text-overflow: clip; font-size: min(12px, calc((100vw - 40px) / 32.5)); }
.hero .cta-micro-one { font-size: min(11.5px, calc((100vw - 40px) / 32.5)); }
@media (min-width: 641px) and (max-width: 999px) { .hero .cta-micro-one { font-size: min(11.5px, calc((100vw - 48px) / 60)); } } /* この幅だけヒーローは2列（文字側の列 = (画面幅 - 左右24px×2) × 0.525）。その列に収まる大きさ */
.shelf-msg .cta-micro { margin-top: 16px; }
/* デバイスモック（ブラウザ枠＋スマホ枠）。位置は ステージ幅・高さに対する % */
.hx-wrap { position: relative; }
.hx-stage { position: relative; aspect-ratio: 350 / 300; }
.hx-glow { position: absolute; left: 2%; right: 2%; top: 10%; bottom: 0; background: radial-gradient(closest-side, rgba(224, 33, 138, 0.4), rgba(224, 33, 138, 0.1) 62%, transparent); }
.hx-t { position: absolute; left: var(--l); top: var(--t); width: var(--w); z-index: var(--z, 1); }
.hx-browser { position: relative; border: 5px solid rgba(255, 255, 255, 0.22); border-radius: 9px; background: #0b0d12; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6); transform: perspective(1000px) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); filter: brightness(var(--b, 1)); }
.hx-bar { display: flex; gap: 4px; align-items: center; height: 13px; padding: 0 7px; background: #20252f; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hx-bar i { width: 5px; height: 5px; border-radius: 50%; background: #ff6b6b; }
.hx-bar i:nth-child(2) { background: #ffd76a; }
.hx-bar i:nth-child(3) { background: #7ddc9a; }
.hx-browser img { display: block; width: 100%; height: auto; }
.hx-phone { position: relative; aspect-ratio: 300 / 650; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 14% / 6.4%; background: #000; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75); transform: perspective(1000px) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); filter: brightness(var(--b, 1)); }
.hx-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-stage .hx-browser { border-color: rgba(255, 255, 255, 0.26); border-radius: 7px; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6); }
.hx-stage .hx-bar { height: 11px; padding: 0 6px; gap: 3px; }
.hx-stage .hx-bar i { width: 4px; height: 4px; }
.hx-stage .hx-phone { border: 2px solid #2d303c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 16px 30px rgba(0, 0, 0, 0.75); }
.t-main { --l: 10%; --t: 7%; --w: 78%; --ry: -5deg; --z: 3; }
.t-a { --l: -8%; --t: 2%; --w: 38%; --ry: 24deg; --b: 0.5; --z: 1; }
.t-b { --l: 70%; --t: -2%; --w: 38%; --ry: -24deg; --b: 0.42; --z: 1; }
.t-c { --l: 33%; --t: -3%; --w: 36%; --b: 0.32; --z: 1; }
.t-p1 { --l: 1%; --t: 42%; --w: 21%; --rz: -4deg; --z: 5; }
.t-p2 { --l: 77%; --t: 50%; --w: 19%; --rz: 4deg; --z: 5; }
.hero-caption { margin-top: 12px; font-size: 11px; line-height: 1.7; color: var(--muted); }
/* 浮いているラベル（細い色枠） */
.hero-tags { list-style: none; margin: 0; padding: 0; }
.tg { --c: var(--teal); position: absolute; z-index: 8; display: inline-block; padding: 1px 12px; border: 3px solid var(--c); border-radius: 100px; background: rgba(6, 6, 10, 0.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--c); font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 22%, transparent); }
.tg-teal { --c: var(--teal); left: 0; top: 2%; }
.tg-gold { --c: var(--gold2); right: 0; bottom: 2%; }
.tg-blue { --c: var(--blue); display: none; }
.tg-pink { --c: var(--accent2); display: none; }
/* 右下 SCROLL（PCのみ） */
.scroll { display: none; }
@media (min-width: 641px) and (max-width: 999px) {
.hx-wrap { max-width: 560px; margin: 0 auto; }
}
@media (min-width: 1000px) {
.hero { display: flex; align-items: center; min-height: clamp(660px, 100svh, 920px); padding: 96px 40px 72px; }
.hero::before { background: radial-gradient(60% 70% at 78% 62%, rgba(224, 33, 138, 0.28), transparent 70%), linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.8) 34%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 22%); }
.hero-in { width: 100%; max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 28px; align-items: center; }
.hero-kicker { font-size: 12px; }
.hero .eyebrow { margin-top: 10px; font-size: 15px; }
.h1 { margin-top: 18px; font-size: clamp(36px, 3.9vw, 58px); }
.hero-sub { margin-top: 22px; font-size: 15px; }
.hero .cta-row { margin-top: 28px; align-items: flex-start; }
.hero .btn-hero { min-width: 440px; }
.hero .hero-micro { margin-top: 16px; font-size: 12px; }
.hx-wrap { margin-right: -30px; }
.hx-stage { aspect-ratio: 640 / 500; }
.hx-stage .hx-bar { height: 13px; padding: 0 7px; gap: 4px; }
.hx-stage .hx-bar i { width: 5px; height: 5px; }
.t-main { --l: 11%; --t: 12%; --w: 74%; --ry: -5deg; }
.t-a { --l: -6%; --t: 3%; --w: 40%; }
.t-b { --l: 66%; --t: -3%; --w: 40%; }
.t-c { --l: 33%; --t: -4%; --w: 34%; }
.t-p1 { --l: 3%; --t: 45%; --w: 18.5%; }
.t-p2 { --l: 75%; --t: 51%; --w: 17.5%; }
.tg { font-size: 12.5px; padding: 2px 15px; }
.tg-teal { left: -2%; top: 29%; bottom: auto; }
.tg-gold { right: 6%; top: 4%; bottom: auto; }
.tg-blue { display: inline-block; left: 30%; bottom: 2%; }
.tg-pink { display: inline-block; right: 2%; top: 40%; }
.hero-caption { padding-right: 34px; text-align: right; text-wrap: balance; }
.scroll { position: absolute; right: 30px; bottom: 48px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; color: #fff; }
.scroll span { writing-mode: vertical-rl; }
.scroll::after { content: ""; width: 1px; height: 72px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
}
/* 訴求・実績の帯（3項目が標準。2項目は .band-2） */
.band { padding: 22px 20px; background: linear-gradient(90deg, #8d0f5d, #e0218a 50%, #8d0f5d); border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
.stats { display: flex; justify-content: center; max-width: 760px; margin: 0 auto; }
.stats > div { flex: 1 1 0; min-width: 0; padding: 0 clamp(8px, 3vw, 28px); text-align: center; }
.stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.4); }
.band-2 .stats { max-width: 520px; }
.stat-n { font-size: clamp(26px, 7vw, 38px); font-weight: 900; line-height: 1.2; color: #fff; text-shadow: 0 2px 10px rgba(80, 0, 50, 0.5); }
.stat-l { margin-top: 2px; font-size: 12px; line-height: 1.5; color: #ffe3f3; }
/* ---------- 2. 悩み ---------- */
.cards { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card { border: 5px solid var(--line); border-radius: 18px; padding: 18px 22px 20px; background: linear-gradient(180deg, #111118, #08080c); }
.card-n { font-size: 30px; font-weight: 900; color: var(--accent); line-height: 1.2; letter-spacing: 0.04em; }
.card-n + p { margin-top: 6px; }
/* ---------- 3. サービス ---------- */
.steps { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { border: 5px solid rgba(212, 160, 23, 0.5); border-radius: 18px; padding: 16px 18px 20px; background: linear-gradient(180deg, #111118, #08080c); }
.step-k { font-size: 12px; font-weight: 900; color: var(--gold2); letter-spacing: 0.18em; }
.step-t { margin-top: 2px; font-weight: 900; font-size: 20px; }
.step-d { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
/* ---------- 4. デモ（ブラウザ枠＋スマホ枠のモック） ---------- */
.demo-head { display: block; }
.demo-head .btn { margin-top: 22px; }
.demo-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 52px; }
.hx-mock { position: relative; }
.hx-mock .hx-browser { transform: none; width: 86%; border-radius: 12px; box-shadow: 0 22px 46px rgba(0, 0, 0, 0.7); }
.hx-mock .hx-bar { height: 22px; gap: 6px; padding: 0 12px; }
.hx-mock .hx-bar i { width: 8px; height: 8px; }
.hx-mock .hx-phone { position: absolute; right: 0; bottom: 26px; width: 24%; border-width: 4px; border-radius: 12% / 5.6%; transform: rotateZ(2deg); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.8); }
.hx-mock figcaption, .demo-grid figcaption { margin-top: 18px; font-size: 14px; font-weight: 700; color: #fff; }
.hx-mock figcaption::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 10px 4px 0; background: var(--accent); vertical-align: middle; }
/* ---------- 4b. 陳列棚 ---------- */
.shelf { background: radial-gradient(60% 30% at 50% 22%, rgba(224, 33, 138, 0.1), transparent 75%), #000; }
.shelf-tools { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; padding: 18px 20px; border: 5px solid var(--line); border-radius: 18px; background: #0a0a0f; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .lbl { font-size: 13px; color: var(--muted); }
.input, .select { background: #000; color: var(--txt); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; padding: 10px 14px; min-height: 48px; font-size: 16px; font-family: var(--sans); width: 100%; }
.input:focus, .select:focus { border-color: var(--accent2); }
.input::placeholder { color: #7e8696; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%23ff5fb0' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.shelf-tools .field-search { flex: 1 1 240px; max-width: 420px; }
/* 並べ替えタブ（JS が .sst を4つ作る）。枠は3px・カプセル（.badge / .sugg と同じ）。スマホでも1行。収まらない幅では横にスクロール */
.shelf-sort { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 18px; padding: 4px 4px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shelf-sort::-webkit-scrollbar { display: none; }
.sst { flex: 0 0 auto; min-height: 44px; padding: 4px 18px; border-radius: 100px; border: 3px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.sst:hover { background: rgba(255, 255, 255, 0.12); }
.sst:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.sst[aria-selected="true"] { border-color: #fff; color: #fff; background: linear-gradient(180deg, #f0359c, #c2185b); box-shadow: 0 0 14px rgba(224, 33, 138, 0.5); font-weight: 900; }
@media (max-width: 480px) {
.shelf-sort { gap: 4px; }
.sst { padding: 4px 8px; font-size: 12.5px; letter-spacing: 0; }
}
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-size: 15px; color: var(--muted); }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.shelf-count { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); min-height: 1.6em; }
.shelf-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sc { position: relative; display: flex; flex-direction: column; border: 5px solid rgba(212, 160, 23, 0.6); border-radius: 20px; background: linear-gradient(180deg, #121219, #09090d); overflow: hidden; box-shadow: 0 0 26px rgba(212, 160, 23, 0.08); }
.sc-body { padding: 16px 20px 14px; flex: 1; display: flex; flex-direction: column; }
.sc-top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 1px 12px; border-radius: 100px; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; border: 3px solid; }
.badge-available { color: #1a1206; background: linear-gradient(180deg, #ffe07a, #e8b023); border-color: #ffe9a3; }
/* 2026-11-08 受付開始前の「販売前」（灰色） */
.badge-before { color: #d9d9df; border-color: rgba(200, 200, 208, 0.55); background: rgba(150, 150, 160, 0.18); }
.badge-reserved { color: #ffd98a; border-color: rgba(255, 217, 138, 0.6); background: rgba(255, 217, 138, 0.08); }
.badge-unknown { color: var(--muted); border-color: rgba(255, 255, 255, 0.3); background: transparent; }
.sc-name { margin-top: 16px; font-weight: 900; font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
.sc-ruby { margin-top: 2px; font-size: 13px; color: var(--muted); min-height: 1.6em; }
.sc-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc-works-l { font-size: 12px; color: var(--muted); }
.sc-works-n { font-size: 28px; font-weight: 900; color: var(--gold2); line-height: 1; }
.sc-works-n small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.sc-domain { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.sc-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge-showcase { color: var(--gold2); border-color: rgba(245, 197, 66, 0.75); background: rgba(10, 10, 15, 0.72); letter-spacing: 0.1em; }
.sc.sc-showcase { border-color: rgba(245, 197, 66, 0.55); }
.sc-showcase-note { margin-top: 14px; padding: 12px 14px; border: 3px solid rgba(245, 197, 66, 0.45); border-radius: 12px; background: rgba(212, 160, 23, 0.07); color: #f3ead2; font-size: 14px; font-weight: 700; line-height: 1.8; }
.badge-ready { color: #fff; background: linear-gradient(180deg, var(--accent2), var(--accent)); border-color: #ff9ed0; }
.badge-retired { color: #e6e8ee; border-color: rgba(230, 232, 238, 0.7); background: rgba(230, 232, 238, 0.08); }
.badge-rank { color: var(--gold2); border-color: rgba(212, 160, 23, 0.7); background: rgba(212, 160, 23, 0.08); }
.badge-rank-S { color: #1a1206; background: linear-gradient(180deg, #ffe07a, #e8b023); border-color: #ffe9a3; }
/* 集客力の目安（★1〜5。2026-11-07）: 価格の真下の小さな表記。ランクの金色と区別するため、塗り★はティール系、空★は同系の薄い色。ラベルは常に表示 */
.ease { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.ease-k { white-space: nowrap; }
.ease-v { white-space: nowrap; letter-spacing: 0.04em; }
.ease-on { color: #3fd6c4; }
.ease-off { color: rgba(63, 214, 196, 0.28); }
.sc-ease { display: flex; justify-content: flex-end; margin-top: 4px; }
.sc-price { margin-top: 10px; padding-top: 10px; }
.sc-price-n { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.2; }
/* 見本サイトリンクの見た目は .btn-link（小さなリンクボタン）。ここは並びだけ */
a.btn-link.sc-demo { align-self: flex-start; margin-top: 8px; }
.sc.sc-ready { border-color: rgba(224, 33, 138, 0.8); box-shadow: 0 0 28px rgba(224, 33, 138, 0.16); }
.sc-foot { padding: 0 20px 24px; }
.sc-foot .btn { width: 100%; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.sc.is-off { opacity: 0.8; border-color: var(--line); box-shadow: none; }
.sc.is-off .sc-name { color: var(--muted); }
.btn[disabled].btn-off { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--muted); box-shadow: none; text-shadow: none; }
.skel { height: 400px; border-radius: 20px; border: 5px solid var(--line); background: linear-gradient(100deg, #101016 30%, #1b1b24 50%, #101016 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.shelf-msg { margin-top: 12px; border: 5px solid var(--line); border-radius: 18px; padding: 26px 20px; text-align: center; background: #0a0a0f; color: var(--muted); }
.shelf-msg .btn { margin-top: 16px; }
.shelf-more { margin-top: 28px; text-align: center; }
.shelf-note { margin-top: 24px; }
/* 探している女優がいない方へ（ラインナップの下。依頼フォームへの案内。2026-11-08） */
.shelf-req { margin-top: 28px; border: 2px dashed rgba(255, 255, 255, 0.28); border-radius: 18px; padding: 18px 20px; text-align: center; background: rgba(10, 10, 15, 0.8); }
.shelf-req-h { font-size: 16px; font-weight: 900; line-height: 1.6; color: #fff; }
.shelf-req-b { margin-top: 6px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.shelf-req .btn { margin-top: 12px; }
.shelf-msg-req { margin-top: 10px; font-size: 14px; }
.shelf-msg-req a.text-link { color: #fff; }
/* 棚カードのアイキャッチ（サイトの画面イメージ。女優の写真は使わない）: 軽いぼかし + 下へ暗くなるグラデーション + 名前の重ね */
.sc-eye { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #2a1633, #0b0b10); }
.sc-eye-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2.5px); transform: scale(1.06); }
.sc-eye-img[hidden] { display: none; }
.sc-eye-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.06) 38%, rgba(0, 0, 0, 0.9) 100%); }
.sc-eye .sc-top { position: absolute; z-index: 1; top: 14px; left: 16px; right: 16px; }
.sc-eye-cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 12px; }
.sc-eye .sc-name { margin-top: 0; font-size: 28px; line-height: 1.3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.sc-site { margin-top: 3px; font-size: 12px; line-height: 1.5; color: #f1e6ff; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); overflow-wrap: anywhere; }
.sc-catch { margin-bottom: 7px; font-weight: 900; font-size: 13px; font-size: clamp(11px, 4.3cqw, 17px); line-height: 1.45; color: #fff; letter-spacing: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 14px rgba(224, 33, 138, 0.45); }
.sc-catch span { display: block; }
.sc-catch span:first-child { color: var(--accent2); }
.sc.is-off .sc-eye-img { filter: blur(2.5px) grayscale(0.7); }
.sc.is-off .sc-eye .sc-name { color: #fff; }
.sc-price-n.is-pending { font-size: 15px; font-weight: 700; color: var(--muted); }
/* 売約済み: 棚に残して実績として見せる。写真は少し色を落とし、角にリボン、価格は控えめな色にする（文字の読みやすさは保つ） */
.sc.sc-sold { opacity: 0.92; border-color: rgba(245, 197, 66, 0.4); }
.sc.sc-sold .sc-eye-img { filter: blur(2.5px) grayscale(0.45); }
.sc-ribbon { position: absolute; z-index: 2; top: 52px; left: -2px; padding: 3px 14px 3px 12px; border-radius: 0 100px 100px 0; background: linear-gradient(90deg, var(--accent-d), var(--accent)); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.5; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.badge-sold { color: var(--gold2); border-color: rgba(245, 197, 66, 0.55); background: rgba(212, 160, 23, 0.1); }
.sc.sc-sold .sc-price-n { color: var(--muted); }
.sc-first { margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--gold2); overflow-wrap: anywhere; }
.sc-first-t { display: inline-block; }
/* スターバリュー・プライシングの開示（棚の見出し付近・申込モーダル） */
.pnote { margin-top: 24px; border: 5px solid rgba(212, 160, 23, 0.5); border-radius: 18px; padding: 16px 20px 18px; background: linear-gradient(180deg, #14110a, #09080a); }
.pnote-k { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent2); text-transform: uppercase; }
.pnote-h { margin-top: 4px; font-size: 17px; font-weight: 900; color: var(--gold2); line-height: 1.4; }
.pnote-b { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.pnote-m { margin-top: 12px; padding: 12px 14px 14px; border-radius: 14px; }
.pnote-m .pnote-h { margin-top: 0; font-size: 14px; }
.pnote-m .pnote-b { margin-top: 4px; font-size: 12.5px; line-height: 1.8; }
/* ---------- 5. コンテンツ・9. 運用体制（色枠を使い分けるカード） ---------- */
.cards-3 { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.box { --c: var(--accent); --cr: 224, 33, 138; border: 5px solid rgba(var(--cr), 0.6); border-radius: 20px; padding: 22px 22px 24px; background: linear-gradient(180deg, #111118, #08080c); box-shadow: 0 0 28px rgba(var(--cr), 0.08); }
.cards-3 .box:nth-child(2) { --c: var(--teal); --cr: 63, 214, 196; }
.cards-3 .box:nth-child(3) { --c: var(--gold2); --cr: 212, 160, 23; }
.box-t { font-weight: 900; font-size: 19px; color: var(--c); }
.box ul { margin-top: 10px; padding-left: 1.1em; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.box ul li::marker { color: var(--c); }
.box-k { display: inline-block; padding: 0 12px; border: 3px solid var(--c); border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--c); line-height: 1.7; }
.box-h { margin-top: 10px; font-weight: 900; font-size: 18px; line-height: 1.55; }
.box-p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.85; }
/* ---------- 6. 表 ---------- */
.tbl-wrap { margin-top: 30px; overflow-x: auto; border: 5px solid var(--line); border-radius: 18px; background: #0a0a0f; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 360px; }
th { text-align: left; padding: 14px 22px; color: var(--gold2); font-weight: 900; border-bottom: 1px solid rgba(212, 160, 23, 0.5); background: #121218; }
td { padding: 14px 22px; border-bottom: 1px solid var(--line); }
td + td { color: var(--muted); }
tr:last-child td { border-bottom: 0; }
/* ---------- 7. チェック ---------- */
.checks { margin-top: 30px; display: grid; grid-template-columns: 1fr; list-style: none; border: 5px solid rgba(63, 214, 196, 0.55); border-radius: 20px; background: linear-gradient(180deg, #0d1112, #08080c); padding: 8px 22px; box-shadow: 0 0 28px rgba(63, 214, 196, 0.07); }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks svg { flex: none; margin-top: 9px; stroke: var(--teal); }
/* ---------- 8. AV新法（暗い書斎風テクスチャの上の長文） ---------- */
.sec-tex { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), #000 url("/Image/bg-main.jpg") center / cover no-repeat; }
.stance { position: relative; }
.stance::before { content: ""; z-index: 0; align-self: stretch; grid-column: 1; grid-row: 1 / 3; border: 5px solid rgba(255, 255, 255, 0.18); border-radius: 22px; background: rgba(6, 6, 10, 0.86); }
.stance .rb-head { position: relative; z-index: 1; padding: 34px 32px 0; }
.stance .rb-body { position: relative; z-index: 1; padding: 0 32px 30px; }
.stance .h2 { font-size: clamp(22px, 5.6vw, 32px); }
.stance .rb-body p { margin-top: 16px; color: #d3d6de; font-size: 15.5px; }
.stance .rb-head .eyebrow { margin-top: 0; }
.stance .rb-body > p:first-child { margin-top: 22px; }
a.btn-link.link-arrow { margin-top: 14px; }
.stance .note-sm { margin-top: 8px; }
/* ---------- 10. 先にお伝えしておくこと（注意はマゼンタ枠） ---------- */
.rules { margin-top: 30px; list-style: none; border: 5px solid var(--accent); border-radius: 22px; background: linear-gradient(180deg, #14090f, #09070a); padding: 6px 24px; box-shadow: 0 0 40px rgba(224, 33, 138, 0.16); }
.rules li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted); font-size: 15px; line-height: 1.85; }
.rules li:last-child { border-bottom: 0; }
.rules strong { color: #fff; font-weight: 900; }
/* ---------- 11. 料金と流れ（重要カードは金枠） ---------- */
.split { display: block; }
.split > div + div { margin-top: 72px; }
.price-box { margin-top: 30px; border: 5px solid var(--gold); border-radius: 24px; padding: 24px 26px; background: linear-gradient(180deg, #14110a, #09080a); box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.18), 0 0 48px rgba(212, 160, 23, 0.16); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.price-row:first-child { padding-top: 0; }
.price-row:last-child { border-bottom: 0; padding-bottom: 0; }
.price-row > span:first-child { color: var(--muted); }
.price-v { font-weight: 900; font-size: 22px; text-align: right; color: var(--gold2); }
.price-v small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
/* 初回お支払い合計（初期費用＋1か月目の月額保守費用）: 他の行より目立たせる */
.price-row.price-total { margin: 4px -12px 0; padding: 16px 12px; border-radius: 3px; border-bottom: 0; background: rgba(245, 197, 66, 0.12); }
.price-row.price-total > span:first-child { color: #fff; font-weight: 700; }
.price-row.price-total .price-v { font-size: 26px; color: var(--gold2); }
.flow { margin-top: 30px; list-style: none; counter-reset: none; border: 5px solid rgba(212, 160, 23, 0.75); border-radius: 24px; padding: 8px 24px; background: linear-gradient(180deg, #14110a, #09080a); box-shadow: 0 0 40px rgba(212, 160, 23, 0.1); }
.flow li { position: relative; display: flex; gap: 16px; padding: 16px 0; }
/* 番号を縦線でつなぐ（フロー表示。2026-11-03 KEN指示）丸の下端から次の丸の上端まで */
.flow li:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 54px; bottom: -20px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 224, 122, 0.95), rgba(217, 162, 26, 0.55)); box-shadow: 0 0 10px rgba(212, 160, 23, 0.35); }
.flow-n { position: relative; z-index: 1; }
.flow-n { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 4px; border-radius: 50%; background: linear-gradient(180deg, #ffe07a, #d9a21a); color: #1a1200; font-weight: 900; font-size: 16px; line-height: 1; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 14px rgba(212, 160, 23, 0.45); }
.flow b { display: block; font-weight: 900; line-height: 1.7; }
.flow small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); line-height: 1.8; }
/* ---------- 12. FAQ ---------- */
.faq { margin-top: 30px; display: grid; gap: 10px; }
.faq details { border: 5px solid var(--line); border-radius: 18px; background: #0a0a0f; }
.faq details[open] { border-color: rgba(224, 33, 138, 0.75); background: linear-gradient(180deg, #120910, #09070a); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; min-height: 52px; font-weight: 700; line-height: 1.7; }
.faq-plus { color: var(--accent2); font-size: 24px; line-height: 1.3; transition: transform 0.2s; flex: none; }
.faq details p { padding: 0 20px 20px; color: var(--muted); font-size: 15px; line-height: 1.95; }
/* ---------- 13. 最終CTA ---------- */
.final { position: relative; overflow: hidden; padding: 104px 20px 110px; text-align: center; background: radial-gradient(62% 52% at 50% 78%, rgba(224, 33, 138, 0.3), transparent 72%), #000; }
.final-in { max-width: 760px; margin: 0 auto; }
.final .h2 { text-align: center; }
.final p { margin: 22px 0 0; font-size: 15.5px; color: #d3d6de; text-align: center; }
.cta-robo { position: relative; margin-top: 34px; }
.cta-robo::before { content: ""; position: absolute; left: 10%; right: 10%; top: 5%; bottom: -10%; background: radial-gradient(closest-side, rgba(224, 33, 138, 0.35), transparent 75%); }
.cta-robo img { position: relative; display: block; margin: 0 auto; width: auto; height: clamp(190px, 44vw, 270px); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 34px rgba(74, 168, 255, 0.2)); }
.final .cta-row { margin-top: 24px; }
.final .note-sm, .final .cta-note { margin-top: 24px; text-align: center; }
/* ---------- フッター（暗いセミナー会場の写真） ---------- */
.footer { position: relative; padding: 64px 20px 40px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--muted); background: linear-gradient(rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.88)), #000 url("/Image/footer-seminar.webp") center / cover no-repeat; border-top: 1px solid rgba(224, 33, 138, 0.55); }
.foot-logo { display: inline-block; }
.foot-logo img { display: block; width: auto; height: 48px; max-width: 100%; object-fit: contain; }
.footer nav { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.footer a:not(.btn-link) { color: #e6e8ee; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:not(.btn-link):hover { color: #fff; text-decoration: underline; }
.footer nav a.btn-link { margin: 0; }
.footer p { margin-top: 12px; color: var(--muted); }
/* ---------- モーダル（カート） ---------- */
body.modal-open { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.86); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.overlay[hidden] { display: none; }
.modal { position: relative; width: 100%; max-width: 640px; max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; background: #0b0b10; border: 5px solid rgba(255, 255, 255, 0.22); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(224, 33, 138, 0.15); padding: 28px 18px 28px; }
.modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold2)); }
.modal-x { position: absolute; right: 6px; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 50%; }
.modal-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.modal h2 { font-weight: 900; font-size: 22px; line-height: 1.5; padding-right: 44px; }
.modal-sub { margin-top: 2px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.m-sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.m-sec:first-of-type { border-top: 0; padding-top: 0; }
.m-h { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; line-height: 1.6; color: var(--txt); }
.m-h i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #ffe07a, #d9a21a); font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; color: #1a1200; flex: none; }
.picked { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 14px; padding: 14px 16px; background: #14110a; }
.picked b { font-size: 20px; font-weight: 900; }
.picked span { font-size: 13px; color: var(--muted); }
.row { margin-top: 10px; display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.row .input { flex: 1 1 200px; width: auto; }
.row .btn { flex: 0 0 auto; }
.help { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.result { margin-top: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.7; border: 5px solid; }
.result[hidden] { display: none; }
.result-available { border-color: rgba(159, 224, 176, 0.6); background: rgba(159, 224, 176, 0.08); color: var(--ok); }
.result-taken, .result-invalid, .result-error { border-color: rgba(255, 155, 155, 0.6); background: rgba(255, 155, 155, 0.08); color: var(--danger); }
.result-unknown { border-color: rgba(255, 217, 138, 0.6); background: rgba(255, 217, 138, 0.08); color: #ffd98a; }
.result-checking { border-color: var(--line); color: var(--muted); }
.result-price { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); white-space: pre-line; }
.sugg-price { margin-left: 4px; font-size: 12px; color: var(--muted); }
.sugg { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sugg button { min-height: 44px; padding: 7px 16px; border-radius: 100px; background: rgba(255, 255, 255, 0.05); border: 3px solid rgba(255, 255, 255, 0.6); color: #fff; cursor: pointer; font-size: 14px; }
.sugg button:hover { background: rgba(255, 255, 255, 0.16); }
.err { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--danger); }
.err[hidden] { display: none; }
.agree { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1.7; }
.agree input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; margin: 6px 0 0; }
.agree > span { min-width: 0; }
.agree-list { margin: 10px 0 0 36px; padding-left: 1.1em; font-size: 13px; color: var(--muted); line-height: 1.8; }
.m-price { margin-top: 10px; border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 14px; padding: 14px 16px; background: #14110a; }
.m-price .price-row { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.m-price .price-v { font-size: 20px; }
.m-price .price-row:last-child { border-bottom: 0; }
.m-price .price-row.price-total { margin: 4px -8px 0; padding: 10px 8px; }
.m-price .price-row.price-total .price-v { font-size: 22px; }
/* 申込ボタンの直前の「今回のお支払い」 */
.m-total { margin: 0 0 12px; border: 5px solid rgba(245, 197, 66, 0.8); border-radius: 14px; padding: 12px 16px 14px; background: #14110a; text-align: center; }
.m-total-l { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.5; }
.m-total-n { margin-top: 2px; font-size: 32px; font-weight: 900; line-height: 1.25; color: var(--gold2); }
.m-total-s { margin-top: 4px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.m-actions { margin-top: 24px; }
.m-actions .btn { width: 100%; }
.m-actions .btn[disabled] { opacity: 0.7; }
.m-alert { margin-top: 14px; border: 5px solid rgba(255, 155, 155, 0.6); background: rgba(255, 155, 155, 0.08); color: var(--danger); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.m-alert[hidden] { display: none; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: rot 0.8s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
/* ---------- 利用規約ページ（/darake/terms/） ---------- */
.tbc { color: #ffe3a0; background: rgba(255, 217, 138, 0.22); border-bottom: 3px solid rgba(255, 217, 138, 0.75); border-radius: 3px; padding: 0 4px; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tbc-bar { position: relative; z-index: 60; padding: 10px 20px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.7; color: #ffe3a0; background: #2c2614; border-bottom: 1px solid rgba(255, 217, 138, 0.6); }
.doc-sec { padding: 112px 20px 96px; background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), #000 url("/Image/bg-main.jpg") center / cover no-repeat; }
.doc { max-width: 840px; margin: 0 auto; padding: 40px 36px 44px; border: 5px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(6, 6, 10, 0.9); }
.doc .eyebrow { display: block; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; }
.doc .h2 { margin-top: 6px; }
.doc-lead { margin-top: 22px; font-size: 15.5px; color: #d3d6de; }
.toc { margin-top: 28px; border: 5px solid rgba(212, 160, 23, 0.5); border-radius: 18px; padding: 18px 22px; background: #0d0c08; }
.toc-t { font-size: 12px; font-weight: 700; color: var(--gold2); letter-spacing: 0.2em; }
.toc ol { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.toc li { max-width: 100%; }
.toc a.btn-link { margin: 0; }
.art { margin-top: 48px; padding-top: 0; border-top: 0; scroll-margin-top: 76px; }
.art-h { font-weight: 900; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.6; color: #fff; padding-bottom: 8px; border-bottom: 1px solid rgba(224, 33, 138, 0.6); }
.art-h small { font-size: 12px; font-weight: 700; color: var(--gold2); letter-spacing: 0.1em; margin-right: 10px; }
.art p, .art li { color: var(--muted); overflow-wrap: anywhere; line-height: 1.95; }
.art > p { margin-top: 14px; }
/* 利用規約だけ本文を小さく（2026-11-05 KEN指示）。AV新法のページ（同じ .art）は変えない */
.doc-terms .doc-lead { font-size: 14px; }
.doc-terms .art p, .doc-terms .art li { font-size: 13.5px; line-height: 1.9; }
.doc-terms .art-h { font-size: clamp(15.5px, 4.2vw, 17.5px); }
@media (max-width: 640px) { .doc-terms .art p, .doc-terms .art li { font-size: 13px; } }
.cl { margin: 14px 0 0; padding-left: 1.7em; }
.cl > li { margin-top: 12px; }
.cl > li::marker { color: var(--accent2); }
.sub { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: sub; }
.sub > li { counter-increment: sub; position: relative; margin-top: 6px; padding-left: 2.6em; }
.sub > li::before { content: "（" counter(sub) "）"; position: absolute; left: 0; color: var(--muted); }
.doc-end { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc-end .art-h { margin-bottom: 4px; }
.doc-end p { color: var(--muted); margin-top: 8px; }
.back-row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px 12px; } /* ボタンが2つ以上並ぶとき（スマホで縦に積むときも）間を空ける */
/* ---------- 小さなリンクボタン（.btn-link）----------
文中・フッター・目次などのテキストリンクを、小さなボタンに置き換える共通クラス。
使い方: ラベル（矢印を付けたいときは中に svg を置く。target="_blank" には外部リンクの印「↗」が付く）。
.btn / .btn-sub / .btn-sm と同じカプセル形・白い細枠・Noto Sans JP の太字。a.btn-link と書いて、他の「.xxx a」の色指定より優先させる。 */
a.btn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 2px; padding: 3px 14px; border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 100px; background: rgba(255, 255, 255, 0.07); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-align: left; text-decoration: none; vertical-align: middle; cursor: pointer; overflow-wrap: anywhere; transition: background 0.15s, border-color 0.15s, color 0.15s; }
a.btn-link:hover { background: rgba(224, 33, 138, 0.3); border-color: var(--accent2); color: #fff; }
a.btn-link:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; border-radius: 100px; }
a.btn-link:active { background: rgba(224, 33, 138, 0.45); }
a.btn-link svg { flex: none; }
/* 価格の推移を開く小さなリンクボタン（button.btn-link。a.btn-link と同じ見た目） */
button.btn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 2px; padding: 3px 14px; border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 100px; background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-align: left; vertical-align: middle; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
button.btn-link:hover { background: rgba(224, 33, 138, 0.3); border-color: var(--accent2); color: #fff; }
button.btn-link:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; border-radius: 100px; }
button.btn-link:active { background: rgba(224, 33, 138, 0.45); }
button.btn-link.sc-ph { align-self: flex-start; margin-top: 8px; }
button.btn-link.dt-ph { margin: 8px 0 0; }
/* ---------- 価格の推移ポップアップ（.ph-。申込モーダルの .overlay / .modal を流用） ---------- */
.ph-modal { max-width: 680px; }
.ph-body { margin-top: 14px; }
.ph-msg { margin: 18px 0; font-size: 15px; color: var(--muted); line-height: 1.8; }
.ph-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ph-pill { min-height: 40px; padding: 4px 18px; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 3px; background: rgba(0, 0, 0, 0.45); color: #fff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.ph-pill:hover { background: rgba(255, 255, 255, 0.12); }
.ph-pill:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.ph-pill[aria-pressed="true"] { border-color: #fff; background: linear-gradient(180deg, #f0359c, #c2185b); box-shadow: 0 0 14px rgba(224, 33, 138, 0.5); }
.ph-deltas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ph-delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 12px; border: 3px solid var(--line); border-radius: 3px; font-size: 13px; line-height: 1.6; }
.ph-delta-k { color: var(--muted); }
.ph-delta-v { font-size: 17px; font-weight: 900; }
.ph-delta-w { font-size: 12px; font-weight: 700; }
.ph-ar { font-size: 11px; margin-right: 3px; }
.ph-up { border-color: var(--accent2); }
.ph-up .ph-delta-v, .ph-up .ph-delta-w { color: var(--accent2); }
.ph-down { border-color: var(--gold2); }
.ph-down .ph-delta-v, .ph-down .ph-delta-w { color: var(--gold2); }
.ph-chart { margin: 0; padding: 8px 2px 4px; border: 3px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #111118, #08080c); }
.ph-svg { display: block; width: 100%; height: auto; }
.ph-single { margin: 10px 0 0; font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--gold2); }
.ph-axisnote { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.ph-recalc { margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.ph-flat { margin: 12px 0 0; font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--gold2); }
.ph-sw.ph-sw-price { border-top-color: #fff; }
.ph-sw.ph-sw-score { border-top: 3px dotted #8fb4ff; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.ph-lg { display: inline-flex; align-items: center; gap: 6px; }
.ph-sw { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--muted); border-radius: 2px; }
.ph-lg-up .ph-sw { border-top-color: var(--accent2); }
.ph-lg-down .ph-sw { border-top-color: var(--gold2); }
.ph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.ph-stat { padding: 8px 10px; border-left: 3px solid var(--gold); }
.ph-stat dt { font-size: 11.5px; color: var(--muted); }
.ph-stat dd { margin: 0; }
.ph-stat dd b { display: block; font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.ph-stat dd small { font-size: 11px; color: var(--muted); }
.ph-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
@media (max-width: 420px) {
.ph-stat dd b { font-size: 14px; }
.ph-stat { padding: 6px 8px; }
}
/* 文章の途中に入るリンクは、ボタンにせず普通の文字リンク（色は a の既定。下線で文字と区別） */
a.text-link { text-decoration: underline; text-underline-offset: 3px; }
.hero-micro a.text-link { color: #fff; }
.hero-micro a.text-link:hover { color: #ff8cc7; }
a.btn-link[target="_blank"]::after { content: "\2197"; content: "\2197" / ""; flex: none; font-size: 11px; line-height: 1; opacity: 0.85; }
a.btn-link[aria-current="page"] { border-color: var(--gold2); color: var(--gold2); }
/* ---------- PC幅 ---------- */
@media (min-width: 720px) {
.overlay { align-items: center; padding: 24px; }
.modal { border-radius: 22px; padding: 34px 36px 36px; }
.modal h2 { font-size: 24px; }
.hx-mock .hx-browser { width: 84%; }
.checks { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.checks li:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 900px) {
.demo-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split > div + div { margin-top: 0; }
}
@media (min-width: 1000px) {
.rb-fig img { height: 470px; }
.stance .rb-fig img { height: 520px; }
}
/* ---------- スマホ幅 ---------- */
@media (max-width: 899px) {
/* ロボットは見出しの横（rb-r は右、rb-l は左）。見出しは写真の残り幅いっぱいに使い、本文は下に全幅 */
.rb { --rbh: clamp(190px, 56vw, 270px); grid-template-columns: minmax(0, 1fr) 38%; grid-template-areas: "head fig" "body body"; column-gap: 14px; align-items: center; }
.rb-r { grid-template-columns: minmax(0, 1fr) 38%; grid-template-areas: "head fig" "body body"; }
.rb-l { grid-template-columns: 38% minmax(0, 1fr); grid-template-areas: "fig head" "body body"; }
.rb-fig { z-index: 0; }
.rb-fig::before { inset: 0 -8%; }
.rb-fig img { width: auto; height: auto; max-width: 100%; max-height: var(--rbh); }
.rb-head { align-self: center; }
.rb-body { position: relative; z-index: 1; }
.rb .rb-head .eyebrow { letter-spacing: 0.2em; }
.rb .rb-head .eyebrow::after { display: none; }
.sec:has(> .rb) { padding-top: 52px; padding-bottom: 56px; }
.rb-head .h2 { font-size: clamp(21px, 5.8vw, 30px); line-height: 1.45; }
.stance .h2 { font-size: clamp(21px, 5.8vw, 30px); }
.stance::before { grid-column: 1 / -1; grid-row: 2; }
.stance .rb-head { padding: 0; }
.stance .rb-body { padding: 26px 20px 24px; }
.stance .rb-body > p:first-child { margin-top: 0; }
.cards-3 { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.sec { padding: 72px 20px; }
.btn { width: 100%; }
.btn-hero { padding-right: 18px; font-size: 16px; }
.btn-hero .btn-tx { font-size: 15px; }
.cta-row { gap: 16px; }
.cta-unit { align-self: stretch; }
.header-nav .btn { width: auto; }
.btn-sm { width: auto; }
.row .btn { width: 100%; }
.cards { grid-template-columns: 1fr; }
.price-row { flex-wrap: wrap; }
.hx-mock .hx-browser { width: 88%; }
.hx-mock .hx-phone { width: 26%; bottom: 20px; }
.footer { padding-top: 52px; }
.doc-sec { padding: 92px 14px 64px; }
.doc { padding: 28px 18px 32px; border-radius: 20px; }
.final { padding: 80px 20px 88px; }
}
/* ===== 陳列棚の説明（サイトの作り込み） ===== */
.shelf-intro { margin-top: 22px; }
.si-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.si-points li { border: 5px solid rgba(212, 160, 23, 0.45); border-radius: 14px; padding: 16px 18px; background: rgba(12, 10, 14, 0.72); }
.si-points b { display: block; font-size: 15px; font-weight: 900; color: var(--gold2, #ffd76a); letter-spacing: 0.02em; }
.si-points span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.85; color: #c9ccd4; }
.si-more { margin-top: 14px; border: 5px solid var(--line, #2a2f3a); border-radius: 14px; background: rgba(10, 10, 15, 0.72); }
.si-more[open] { border-color: rgba(224, 33, 138, 0.6); }
.si-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; font-size: 14px; font-weight: 700; color: #fff; }
.si-more summary::-webkit-details-marker { display: none; }
.si-more .si-more-close { display: none; }
.si-more[open] .si-more-open { display: none; }
.si-more[open] .si-more-close { display: inline; }
.si-more[open] .faq-plus { transform: rotate(45deg); }
.si-body { padding: 0 18px 18px; }
.si-body h3 { margin: 16px 0 4px; font-size: 14.5px; font-weight: 900; color: var(--accent2, #ff6bb0); }
.si-body p { margin: 0; font-size: 13.5px; line-height: 1.9; color: #c9ccd4; }
.si-body .si-note { margin-top: 14px; font-size: 12px; color: var(--muted, #9aa0aa); }
@media (max-width: 760px) { .si-points { grid-template-columns: 1fr; } }
/* ===== サーバー不要・守りの訴求（ヒーローの帯のすぐ後ろの大きなセクション） ===== */
.ns { background: radial-gradient(70% 38% at 50% 0%, rgba(74, 168, 255, 0.16), transparent 72%), radial-gradient(60% 30% at 50% 100%, rgba(224, 33, 138, 0.12), transparent 75%), #05070c; border-bottom: 1px solid rgba(74, 168, 255, 0.28); }
.ns .eyebrow { color: var(--blue); }
.ns .eyebrow::after { background: linear-gradient(90deg, var(--blue), transparent); }
.ns-h { margin-top: 14px; font-size: clamp(30px, 8.4vw, 56px); line-height: 1.32; letter-spacing: -0.01em; }
.ns-h .nb:last-child { color: var(--accent2); text-shadow: 0 0 28px rgba(224, 33, 138, 0.45); }
.ns-lead { margin-top: 20px; max-width: 40em; font-size: 15.5px; }
.ns-grid { margin-top: 36px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ns-card { --c: var(--blue); --cr: 74, 168, 255; border: 5px solid rgba(var(--cr), 0.6); border-radius: 22px; padding: 20px 20px 22px; background: linear-gradient(180deg, #101521, #08090e); box-shadow: 0 0 30px rgba(var(--cr), 0.1); line-height: 1.8; }
.ns-card:nth-child(2) { --c: var(--teal); --cr: 63, 214, 196; }
.ns-card:nth-child(3) { --c: var(--gold2); --cr: 212, 160, 23; }
.ns-card:nth-child(4) { --c: var(--accent2); --cr: 224, 33, 138; }
.ns-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ns-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(var(--cr), 0.7); background: rgba(var(--cr), 0.1); color: var(--c); }
.ns-n { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: 0.02em; color: rgba(var(--cr), 0.55); font-feature-settings: "palt" 1; }
.ns-t { margin-top: 14px; font-size: 19px; font-weight: 900; line-height: 1.55; color: var(--c); text-wrap: balance; }
.ns-card p { margin-top: 8px; color: #d3d6de; font-size: 14.5px; }
/* サーバー費用のメリット（Cost）。角丸の枠は3px */
.ns-cost { margin-top: 34px; padding: 26px 22px 24px; border: 5px solid rgba(224, 33, 138, 0.65); border-radius: 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(224, 33, 138, 0.16), transparent 60%), #0b0a10; box-shadow: 0 0 34px rgba(224, 33, 138, 0.14); }
.ns-cost-k { font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent2); }
.ns-cost-h { margin-top: 8px; font-size: clamp(22px, 5.6vw, 34px); font-weight: 900; line-height: 1.45; color: #fff; }
.ns-cost-h .nb:last-child { color: var(--accent2); }
.ns-cost-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ns-cost-list li { display: grid; gap: 4px; padding: 14px 16px; border: 5px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.ns-cost-list b { font-size: 16px; font-weight: 900; color: #fff; }
.ns-cost-list span { font-size: 14.5px; line-height: 1.8; color: #d3d6de; }
.ns-cost-note { margin-top: 16px; font-size: 13px; line-height: 1.85; color: var(--muted); }
@media (min-width: 760px) { .ns-cost { padding: 32px 34px 30px; } .ns-cost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ns-tbl { margin-top: 34px; background: #080a10; border-width: 5px; border-color: rgba(74, 168, 255, 0.5); }
.ns-tbl table { min-width: 0; table-layout: fixed; font-size: 13px; line-height: 1.7; }
.ns-tbl th, .ns-tbl td { padding: 11px 10px; vertical-align: top; }
.ns-tbl thead th { font-size: 12.5px; color: var(--muted); background: #0e1018; border-bottom-color: rgba(74, 168, 255, 0.5); }
.ns-tbl thead th.ns-us { color: #fff; background: linear-gradient(180deg, #d11c80, #8d0f5d); }
.ns-tbl thead th:first-child { width: 27%; }
.ns-tbl tbody th { font-weight: 700; font-size: 12.5px; color: #fff; background: transparent; border-bottom: 1px solid var(--line); }
.ns-tbl tbody tr:last-child th { border-bottom: 0; }
.ns-tbl td { color: var(--muted); }
.ns-tbl td.ns-us { color: #fff; font-weight: 700; background: rgba(224, 33, 138, 0.1); border-left: 1px solid rgba(224, 33, 138, 0.5); }
.ns-note { margin-top: 18px; line-height: 1.8; }
.ns-cta { margin-top: 30px; align-items: center; }
.ns-cta .btn-hero { padding-left: 30px; }
@media (min-width: 720px) {
.ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ns-card { padding: 24px 26px 26px; }
.ns-t { font-size: 21px; }
.ns-card p { font-size: 15px; }
.ns-tbl table { font-size: 15px; }
.ns-tbl th, .ns-tbl td { padding: 14px 20px; }
.ns-tbl thead th, .ns-tbl tbody th { font-size: 14.5px; }
}
@media (min-width: 1000px) {
.ns { padding-top: 104px; padding-bottom: 96px; }
.ns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ns-card { padding: 22px 20px 24px; }
.ns-t { font-size: 19px; }
.ns-card p { font-size: 14.5px; }
}
/* ---------- ヒーローの動き（デザインはそのまま、ゆっくり動かして生きた印象に）オーナー指定 ----------
・背景写真：ゆっくりズームと横移動（ケン・バーンズ）
・画面モック：1枚ずつ周期をずらして上下にふわっと浮かぶ（登場アニメの translate と競合しないよう、中の枠に transform で付ける）
・後ろの光：ゆっくり脈打つ
・特長タグ：登場後、小さく上下に揺れる
・「毎日自動で。」：ネオンのようにほのかに明滅
・主ボタン：数秒おきに光が横切る */
@keyframes heroKB { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.12) translate(-2.5%, -1.5%); } }
.hero-photo { transform-origin: 70% 40%; animation: heroKB 26s ease-in-out infinite alternate; will-change: transform; }
/* 2026-11-10 KEN決定：背景のロボットの目を光らせる（写真の目の位置に光を重ねる。位置と大きさは assets/hero-scramble.js が写真の切り取りに合わせて決める）
光の層は暗い重ね（.hero::before）より上に置き、写真と同じゆっくりズームで一緒に動かす。文字が入れ替わる間はチカチカ、「毎日自動で。」が決まる瞬間に強く光り、その後はゆっくり光り続ける */
.hero-eyes { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 70% 40%; animation: heroKB 26s ease-in-out infinite alternate; will-change: transform; }
.hero-eye { position: absolute; left: -999px; top: 0; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(225, 252, 255, 0.95) 0, rgba(110, 220, 255, 0.75) 18%, rgba(40, 160, 255, 0.35) 42%, rgba(20, 120, 255, 0) 70%); mix-blend-mode: screen; opacity: 0; }
.hero.eye-scan .hero-eye { animation: eyeScan 0.9s steps(1) infinite; }
.hero.eye-flash .hero-eye { animation: eyeFlash 1s ease-out both; }
.hero.eye-idle .hero-eye { animation: eyeIdle 4.2s ease-in-out infinite; }
@keyframes eyeScan { 0% { opacity: 0.35; } 15% { opacity: 0.9; } 30% { opacity: 0.45; } 45% { opacity: 1; } 60% { opacity: 0.3; } 75% { opacity: 0.8; } 90% { opacity: 0.5; } }
@keyframes eyeFlash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); } 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); } }
@keyframes eyeIdle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
/* スマホ・タブレット（999px以下）は写真を左へ寄せ、ロボットの顔と目を画面の中に入れる（2026-11-10 KEN決定。PC は 72% のまま） */
@media (max-width: 999px) { .hero-photo { object-position: 50% 40%; } }
@keyframes hxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--amp, -8px)); } }
.hx-t > .hx-browser, .hx-t > .hx-phone { animation: hxFloat var(--dur, 7s) ease-in-out infinite; animation-delay: var(--fd, 0s); will-change: transform; }
.hx-t.t-main > .hx-browser { --amp: -6px; --dur: 8s; --fd: -1s; }
.hx-t.t-a > .hx-browser { --amp: -9px; --dur: 7s; --fd: -3s; }
.hx-t.t-b > .hx-browser { --amp: -7px; --dur: 9s; --fd: -5s; }
.hx-t.t-c > .hx-browser { --amp: -10px; --dur: 6.5s; --fd: -2s; }
.hx-t.t-p1 > .hx-phone { --amp: -12px; --dur: 6s; --fd: -4s; }
.hx-t.t-p2 > .hx-phone { --amp: -10px; --dur: 7.5s; --fd: -.5s; }
@keyframes hxGlow { 0% { opacity: .65; transform: scale(.95); } 100% { opacity: 1; transform: scale(1.06); } }
.hx-glow { animation: hxGlow 5s ease-in-out infinite alternate; }
@keyframes tgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-tags .tg.mo-in { animation: moIn .7s cubic-bezier(.2, .7, .2, 1) both, tgBob 4.8s ease-in-out infinite; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .9s); }
.hero-tags .tg-gold.mo-in { animation-duration: .7s, 5.6s; }
.hero-tags .tg-blue.mo-in { animation-duration: .7s, 4.2s; }
.hero-tags .tg-pink.mo-in { animation-duration: .7s, 6.2s; }
@keyframes pkNeon { 0%, 100% { text-shadow: 0 0 18px rgba(224, 33, 138, .45), 0 4px 28px rgba(0, 0, 0, .6); } 50% { text-shadow: 0 0 34px rgba(255, 89, 180, .85), 0 0 8px rgba(255, 89, 180, .55), 0 4px 28px rgba(0, 0, 0, .6); } }
.hero .h1 .pk { animation: pkNeon 3.6s ease-in-out infinite; }
@keyframes btnShine { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
.hero .btn-hero.btn-main { position: relative; overflow: hidden; isolation: isolate; }
.hero .btn-hero.btn-main::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: btnShine 4.2s ease-in-out infinite 1.4s; transform: translateX(-160%) skewX(-20deg); }
.hero .btn-hero.btn-main > * { position: relative; z-index: 1; }
/* ===== 女優1人に1サイトの優位性（#onesite）。既存の .box / .ns-cost / .ns-tbl / .statement を再利用する最小限の追加 ===== */
.os-grid { margin-top: 34px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.os-grid .box:nth-child(2) { --c: var(--teal); --cr: 63, 214, 196; }
.os-grid .box:nth-child(3) { --c: var(--gold2); --cr: 212, 160, 23; }
.os-grid .box:nth-child(4) { --c: var(--blue); --cr: 74, 168, 255; }
.os-grid .box-h { font-size: 19px; }
.os-ask { margin-top: 34px; }
.os-qa { margin-top: 40px; }
.os-qa-a { margin-top: 16px; font-size: 15px; line-height: 1.9; color: #e6e8ee; }
.os-qa-ab { color: var(--accent2); font-weight: 900; margin-right: 4px; }
.os-qa-list li > span { word-break: auto-phrase; }
.os-sub-k { margin-top: 64px; font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent2); }
.os-sub { margin-top: 8px; font-size: clamp(22px, 5.6vw, 34px); font-weight: 900; line-height: 1.45; color: #fff; text-wrap: balance; }
.os-sub .nb:last-child { color: var(--accent2); }
.os-tbl { margin-top: 24px; }
.os-tbl thead th:first-child { width: 28%; }
.os-tbl thead th:nth-child(2) { width: 32%; }
.os-tbl th, .os-tbl td { word-break: auto-phrase; }
.os-note { margin-top: 18px; line-height: 1.8; }
.os-close { margin-top: 56px; font-size: clamp(18px, 5vw, 30px); text-align: center; }
@media (min-width: 720px) {
.os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.os-grid .box { padding: 26px 26px 28px; }
.os-grid .box-h { font-size: 20px; }
}
/* ヒーローの特長カプセル：ランダムな位置に出ては消える（assets/hero-tags.js）オーナー指定
JS が動くときは元のリストを読み上げ専用にし、画面には JS のカプセルだけを出す */
.hero-tags.tg-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hx-wrap .tg-pop {
display: inline-block; right: auto; bottom: auto; z-index: 9; pointer-events: none;
opacity: 0; transform: translateY(8px) scale(0.86);
transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hx-wrap .tg-pop.is-in { opacity: 1; transform: translateY(0) scale(1); }
.hx-wrap .tg-pop.is-out { opacity: 0; transform: translateY(-8px) scale(0.94); transition-duration: 0.55s; }
/* ===== 更新情報・在庫入荷情報（ヒーローの帯のすぐ後ろ）app.js が描画する。データが無いときは section ごと hidden。
番号付きの見出し（01 02 …）には数えない（このセクションを足しても、他のセクションの番号は変わらない） ===== */
.news { padding: 56px 20px 60px; background: #05070c; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.news .eyebrow { counter-increment: none; color: var(--gold2); }
.news .eyebrow::before { content: none; }
.news .eyebrow::after { background: linear-gradient(90deg, var(--gold2), transparent); }
.news-h { margin-top: 8px; font-size: clamp(22px, 5.8vw, 30px); line-height: 1.5; }
.news-box { margin-top: 20px; border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 22px; background: linear-gradient(180deg, #11131b, #08090e); box-shadow: 0 0 30px rgba(212, 160, 23, 0.08); overflow: hidden; }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-item + .news-item { border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 14px 18px; color: #e8eaf0; font-size: 15px; line-height: 1.7; text-decoration: none; }
.news-date { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-tag { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 82px; min-height: 26px; padding: 1px 12px; border: 3px solid; border-radius: 100px; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.5; white-space: nowrap; }
.news-tag-stock { color: #fff; background: linear-gradient(180deg, var(--accent2), var(--accent)); border-color: #ff9ed0; }
.news-tag-sold { color: var(--muted); background: transparent; border-color: rgba(255, 255, 255, 0.3); }
.news-tag-notice { color: #a9d4ff; background: rgba(74, 168, 255, 0.08); border-color: rgba(74, 168, 255, 0.5); }
.news-tag-update { color: #8fe6da; background: rgba(63, 214, 196, 0.08); border-color: rgba(63, 214, 196, 0.5); }
.news-text { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
a.news-row { color: #fff; transition: background 0.15s; }
a.news-row:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
a.news-row:hover .news-text { text-decoration: underline; text-underline-offset: 3px; }
a.news-row:focus-visible { outline-offset: -4px; }
a.news-row .news-text::after { content: "\203A"; margin-left: 0.5em; color: var(--accent2); font-weight: 900; }
@media (min-width: 600px) {
.news { padding: 64px 20px 68px; }
.news-row { grid-template-columns: 92px 82px minmax(0, 1fr); gap: 4px 16px; padding: 14px 24px; }
.news-text { grid-column: auto; }
}
/* 更新情報の「すべて見る」リンク（トップ）と、更新情報の一覧ページ（news/ ・PHP が描く） */
.news-more { margin-top: 16px; text-align: right; }
.news-more .btn-link { margin-left: 0; }
.news-page { padding-top: calc(var(--head-h) + 36px); }
.news-crumb { margin-bottom: 14px; color: var(--muted); }
.news-crumb a.btn-link { margin-left: 0; }
.news-intro { margin-top: 10px; }
.news-note { margin-top: 12px; }
.news-empty { padding: 28px 20px; text-align: center; color: var(--muted); line-height: 1.8; }
.news-pager { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.news-pager-now { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-back { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* ===== 受付の段階（会員の方の先行受付・一般受付）2026-11-06 =====
棚の上の「受付の日程」（更新情報の欄の後ろ）と、受付開始前の申込系ボタン（.sale-wait。押せない btn-off の見た目のまま、
「11月14日（土）」「20:00 受付開始」の2語の間だけで折り返す）。一般受付が始まったら app.js が案内を隠す。 */
.sale-notice { padding: 28px 20px; background: #05070c; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.news:has(+ .sale-notice:not([hidden])) { border-bottom: 0; padding-bottom: 8px; }
.sale-notice-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 14px 20px; border: 3px solid rgba(74, 168, 255, 0.5); border-radius: 18px; background: rgba(74, 168, 255, 0.06); }
.sale-notice-h { margin: 0; flex: none; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; color: #a9d4ff; }
.sale-notice-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 26px; font-size: 15px; font-weight: 700; line-height: 1.7; color: #fff; }
.sale-notice-list li { min-width: 0; }
.sale-notice-join { flex: 1 1 100%; margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.7; color: #fff; }
.sale-notice-join .btn { flex: none; max-width: 100%; }
.cart-member-join { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: #c9d1e0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
.sale-notice { padding: 22px 16px; }
.sale-notice-box { padding: 12px 14px; border-width: 2px; }
.sale-notice-list { font-size: 13.5px; }
}
.btn.sale-wait { flex-wrap: wrap; column-gap: 0.35em; row-gap: 0; white-space: normal; line-height: 1.35; cursor: not-allowed; }
.btn.sale-wait .nb { white-space: nowrap; }
.sc-foot .btn.sale-wait { white-space: normal; }
.sc-foot .btn.sale-wait + .btn.sale-wait { margin-top: 10px; }
/* 見本サイトの公開前（受付開始前だけ。瀬戸環奈以外）: 「サイトを見る」の代わりの押せない表示（.demo-wait）。
形と枠の太さは元のボタン（棚は .btn-link、詳細は .btn.btn-sm）のまま、色だけ押せない btn-off に合わせる。「11月14日（土）」「20:00 公開」の2語の間だけで折り返す */
button.btn-link.demo-wait, .btn.demo-wait { flex-wrap: wrap; column-gap: 0.35em; row-gap: 0; white-space: normal; line-height: 1.35; cursor: not-allowed; }
.demo-wait .nb { white-space: nowrap; }
button.btn-link.demo-wait[disabled], button.btn-link.demo-wait[disabled]:hover, button.btn-link.demo-wait[disabled]:active { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--muted); }
button.btn-link.sc-demo { align-self: flex-start; margin-top: 8px; }
/* 「なぜこのサービスを始めたのか」の署名（2026-11-06 オーナー指示）: アカデミーと同じ青山のサイン画像（白・透過）。右寄せ */
.founder-sign { margin: 24px 0 0; text-align: right; }
.founder-sign img { display: inline-block; width: min(220px, 55%); height: auto; }
.cart-member .input { max-width: 320px; }
/* 会員特典の一文（2026-11-06）: 会員コード欄の下に太字で目立たせる */
.cart-member-perk { margin: 10px 0 0; padding: 10px 12px; border: 2px solid rgba(255, 79, 163, 0.55); border-radius: 10px; background: rgba(255, 79, 163, 0.08); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.7; }
.cart-member-perk:empty { display: none; }
/* 陳列棚の見出しの背面：女優サイトの画面がずらっと流れる壁（期待感の演出・装飾のみ） */
.shelf { overflow: hidden; padding-top: 230px; }
.shelf > .wrap-lg { position: relative; z-index: 1; }
.shelf-wall { position: absolute; left: 0; right: 0; top: 0; height: 700px; z-index: 0; pointer-events: none; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
/* ヒーローの壁と同じ見え方（明るさ・速さ・ピンクの光）。中身は実際の女優サイトをぼかした画面（2026-11-04 KEN指示） */
.shelf-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(50% 45% at 60% 40%, rgba(224,33,138,.30), transparent 90%); }
.shelf-wall .sw-tilt { z-index: 0; }
.shelf-wall::after { content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 26% at 30% 50%, rgba(0,0,0,0.62), rgba(0,0,0,0.18) 70%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.0) 25%, rgba(0,0,0,0.55) 60%),
linear-gradient(90deg, #000 0%, transparent 14%, transparent 86%, #000 100%); }
.sw-tilt { position: absolute; left: 50%; top: -40px; width: 2400px; margin-left: -1200px; display: grid; gap: 18px;
transform: perspective(1400px) rotateX(16deg) rotateZ(-7deg); transform-origin: 50% 0; opacity: 0.9; }
.sw-row { overflow: visible; }
.sw-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.sw-l .sw-track { animation: swL 60s linear infinite; }
.sw-r .sw-track { animation: swR 72s linear infinite; }
.sw-tile { flex: 0 0 auto; width: 300px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 10px 30px rgba(0,0,0,0.6); background: #111; }
.sw-tile:nth-child(5n+2) { box-shadow: 0 0 0 1px rgba(224,33,138,0.55), 0 0 28px rgba(224,33,138,0.35); }
.sw-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes swL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes swR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
.shelf { padding-top: 170px; }
.shelf-wall { height: 520px; }
.sw-tilt { width: 1500px; margin-left: -750px; gap: 12px; opacity: 0.88; }
.sw-track { gap: 12px; }
.sw-tile { width: 180px; border-radius: 6px; }
}
/* 管理者モードの表示（需要に数えない）?staff=on のブラウザだけに出る。クリックで解除 */
.staff-badge { position: fixed; left: 8px; bottom: 8px; z-index: 150; padding: 2px 12px; border: 3px solid var(--gold2); border-radius: 100px; background: rgba(6, 6, 10, 0.9); color: var(--gold2); font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.7; cursor: pointer; }
.staff-badge:hover { background: rgba(212, 160, 23, 0.18); }
/* ---------- 自動更新の訴求（#autoupdate）。KEN指示 2026-11-03：更新作業に時間もスキルも奪われない ---------- */
.au { background: radial-gradient(70% 34% at 50% 0%, rgba(224, 33, 138, 0.2), transparent 72%), radial-gradient(60% 28% at 50% 100%, rgba(212, 160, 23, 0.14), transparent 75%), #07050a; border-bottom: 1px solid rgba(212, 160, 23, 0.32); }
.au-h { margin-top: 14px; font-size: clamp(32px, 9vw, 64px); line-height: 1.3; letter-spacing: -0.01em; }
.au-h .nb:last-child { color: var(--accent2); text-shadow: 0 0 30px rgba(224, 33, 138, 0.5); }
.au-lead { max-width: 40em; font-size: 15.5px; }
.au-cmp { margin-top: 36px; display: grid; gap: 14px; }
.au-head { display: none; }
.au-row { display: grid; gap: 0; border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 22px; overflow: hidden; background: #0b0a10; line-height: 1.75; }
.au-row p { margin: 0; }
.au-task { padding: 12px 18px; font-size: 16px; font-weight: 900; color: var(--gold2); background: rgba(212, 160, 23, 0.1); }
.au-m, .au-a { padding: 12px 18px; font-size: 14.5px; }
.au-m { color: var(--muted); }
.au-a { color: #fff; background: rgba(224, 33, 138, 0.12); border-top: 1px solid rgba(224, 33, 138, 0.45); }
.au-row small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.au-a small { color: var(--accent2); }
.au-a b { display: block; font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--accent2); text-shadow: 0 0 16px rgba(224, 33, 138, 0.4); }
.au-note { margin-top: 16px; line-height: 1.8; }
.au-day { margin-top: 44px; padding: 26px 20px 22px; border: 5px solid rgba(224, 33, 138, 0.65); border-radius: 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(224, 33, 138, 0.16), transparent 60%), #0b0a10; box-shadow: 0 0 34px rgba(224, 33, 138, 0.14); }
.au-day-h .nb:last-child { color: var(--accent2); }
.au-day-lead { margin-top: 12px; font-size: 14.5px; color: #d3d6de; }
.au-tl { position: relative; margin: 30px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.au-tl::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 224, 122, 0.95), rgba(224, 33, 138, 0.8)); box-shadow: 0 0 10px rgba(212, 160, 23, 0.35); }
.au-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.5; }
.au-dot { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; background: linear-gradient(180deg, #ffe07a, #d9a21a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 14px rgba(212, 160, 23, 0.55); animation: auPulse 2.4s ease-in-out infinite; }
.au-tl li:nth-child(2) .au-dot { animation-delay: 0.3s; }
.au-tl li:nth-child(3) .au-dot { animation-delay: 0.6s; }
.au-tl li:nth-child(4) .au-dot { animation-delay: 0.9s; }
@keyframes auPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(212, 160, 23, 0.4); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 224, 122, 0.95); } }
.au-time { margin-top: 6px; font-size: 14px; font-weight: 900; color: var(--gold2); }
.au-ev { font-size: 12px; color: #d3d6de; }
.au-daily { margin-top: 26px; display: grid; gap: 10px; padding: 16px 18px; border: 5px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.au-daily-k { display: inline-block; justify-self: start; padding: 0 16px; border: 3px solid var(--accent2); border-radius: 100px; font-size: 14px; font-weight: 900; line-height: 1.7; color: var(--accent2); }
.au-daily ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.au-daily li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.75; color: #fff; }
.au-daily li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent2); }
.au-day-note { margin-top: 16px; line-height: 1.8; }
.au-you { margin-top: 28px; padding: 22px 20px; border: 5px solid rgba(212, 160, 23, 0.75); border-radius: 22px; background: linear-gradient(180deg, #14110a, #09080a); box-shadow: 0 0 40px rgba(212, 160, 23, 0.1); }
.au-you-k { font-size: 12px; font-weight: 800; letter-spacing: 0.26em; color: var(--gold2); }
.au-you-in { margin-top: 14px; display: grid; gap: 10px; align-items: center; }
.au-you-once, .au-you-after { display: grid; gap: 6px; justify-items: start; }
.au-you p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.7; color: #fff; }
.au-badge { display: inline-block; padding: 0 16px; border: 3px solid var(--gold2); border-radius: 100px; font-size: 13px; font-weight: 900; line-height: 1.7; color: var(--gold2); }
.au-badge-g { border-color: var(--accent2); color: var(--accent2); }
.au-you-ar { display: grid; place-items: center; color: var(--gold2); transform: rotate(90deg); width: 28px; height: 28px; }
.au-close { margin-top: 40px; text-align: center; font-size: clamp(24px, 6.6vw, 38px); }
.au-close .nb { color: transparent; }
@media (min-width: 760px) {
.au-lead { font-size: 16.5px; }
.au-head { display: grid; grid-template-columns: 24% 1fr 1fr; gap: 0; padding: 0 5px; font-size: 13px; font-weight: 900; }
.au-head span { padding: 0 18px; }
.au-hm { color: var(--muted); }
.au-ha { color: var(--accent2); }
.au-cmp { gap: 10px; }
.au-row { grid-template-columns: 24% 1fr 1fr; align-items: stretch; border-radius: 18px; }
.au-task { display: flex; align-items: center; padding: 14px 18px; font-size: 15px; }
.au-m, .au-a { padding: 14px 18px; font-size: 15px; }
.au-a { border-top: 0; border-left: 1px solid rgba(224, 33, 138, 0.45); }
.au-row small { display: none; }
.au-day { padding: 34px 38px 28px; }
.au-ev { font-size: 14px; }
.au-time { font-size: 17px; }
.au-tl { margin-top: 36px; }
.au-daily { grid-template-columns: auto 1fr; align-items: start; gap: 20px; padding: 20px 24px; }
.au-daily li, .au-day-lead { font-size: 15.5px; }
.au-you { padding: 26px 34px; }
.au-you-in { grid-template-columns: 1fr auto 1fr; gap: 24px; }
.au-you-ar { transform: none; }
.au-you p { font-size: 18px; }
}
/* ===== AI検索の時代の一次情報（#records）。.ns-grid / .ns-card を再利用する最小限の追加 ===== */
.rc { background: radial-gradient(70% 30% at 50% 0%, rgba(74, 168, 255, 0.12), transparent 72%), #06070c; border-bottom: 1px solid var(--line); }
.rc-h { margin-top: 14px; font-size: clamp(32px, 9vw, 60px); line-height: 1.3; letter-spacing: -0.01em; }
.rc-h .nb:last-child { color: var(--accent2); text-shadow: 0 0 28px rgba(224, 33, 138, 0.45); }
.rc-lead { margin-top: 20px; max-width: 40em; font-size: 15.5px; }
.rc-sub { margin-top: 40px; font-size: clamp(19px, 5vw, 26px); font-weight: 900; line-height: 1.5; color: #fff; }
.rc-sub + .rc-grid { margin-top: 16px; }
.rc-pill { display: inline-block; white-space: nowrap; padding: 4px 12px; border: 3px solid rgba(var(--cr), 0.7); border-radius: 999px; background: rgba(var(--cr), 0.1); color: var(--c); font-size: 12.5px; font-weight: 800; line-height: 1.5; }
@media (min-width: 1100px) { .rc-card .rc-pill { padding: 3px 8px; font-size: 11px; } }
.rc-note { margin-top: 28px; line-height: 1.8; }
@media (min-width: 760px) { .rc-lead { font-size: 16.5px; } }
@media (min-width: 1100px) { .rc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- 推し活・タレント化の訴求（#talent）---------- */
.tk { background: radial-gradient(70% 30% at 50% 0%, rgba(74, 168, 255, 0.14), transparent 72%), radial-gradient(60% 28% at 50% 100%, rgba(224, 33, 138, 0.16), transparent 75%), #07050a; border-bottom: 1px solid rgba(63, 214, 196, 0.3); }
.tk-h { margin-top: 14px; font-size: clamp(32px, 9vw, 64px); line-height: 1.3; letter-spacing: -0.01em; }
.tk-h .nb:last-child { color: var(--accent2); text-shadow: 0 0 30px rgba(224, 33, 138, 0.5); }
.tk-lead { max-width: 40em; font-size: 15.5px; }
.tk-cmp { margin-top: 36px; display: grid; gap: 14px; }
.tk-head { display: none; }
.tk-row { display: grid; gap: 0; border: 5px solid rgba(63, 214, 196, 0.5); border-radius: 22px; overflow: hidden; background: #0b0a10; line-height: 1.75; }
.tk-row p { margin: 0; }
.tk-task { padding: 12px 18px; font-size: 16px; font-weight: 900; color: var(--teal); background: rgba(63, 214, 196, 0.09); }
.tk-b, .tk-n { padding: 12px 18px; font-size: 14.5px; }
.tk-b { color: var(--muted); }
.tk-n { color: #fff; background: rgba(224, 33, 138, 0.12); border-top: 1px solid rgba(224, 33, 138, 0.45); }
.tk-row small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); }
.tk-n small { color: var(--accent2); }
.tk-n b { display: block; font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--accent2); text-shadow: 0 0 16px rgba(224, 33, 138, 0.4); }
.tk-oshi { margin-top: 44px; padding: 26px 20px 22px; border: 5px solid rgba(74, 168, 255, 0.6); border-radius: 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(74, 168, 255, 0.14), transparent 60%), #0b0a10; box-shadow: 0 0 34px rgba(74, 168, 255, 0.12); }
.tk-oshi-h .nb:last-child { color: var(--accent2); }
.tk-steps { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tk-steps li { display: grid; gap: 4px; padding: 14px 16px; border: 5px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.tk-no { font-size: 12px; font-weight: 900; letter-spacing: 0.2em; color: var(--blue); }
.tk-steps b { font-size: 16.5px; font-weight: 900; line-height: 1.55; color: #fff; }
.tk-steps li > span:last-child { font-size: 14.5px; line-height: 1.8; color: #d3d6de; }
.tk-arrow { margin: 14px 0 0; display: grid; place-items: center; color: var(--gold2); }
.tk-bridge { margin: 6px 0 0; text-align: center; font-size: clamp(17px, 4.8vw, 24px); font-weight: 900; line-height: 1.7; color: #fff; text-wrap: balance; }
.tk-name { display: inline-block; margin-top: 4px; padding: 2px 16px; border: 3px solid var(--accent2); border-radius: 100px; font-size: 1.12em; color: var(--accent2); text-shadow: 0 0 18px rgba(224, 33, 138, 0.45); overflow-wrap: anywhere; }
.tk-oshi .ns-cost-note { text-align: center; }
.tk-scale { margin-top: 30px; padding: 20px 20px 18px; border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 22px; background: #0b0a10; }
.tk-scale-k { margin: 0; font-size: 15px; font-weight: 900; color: var(--gold2); }
.tk-scale-in { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tk-scale-in > div { padding: 12px 10px; border: 5px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.03); text-align: center; }
.tk-num { margin: 0; white-space: nowrap; font-size: clamp(18px, 4.8vw, 34px); font-weight: 900; line-height: 1.4; color: var(--gold2); }
.tk-lab { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.tk-scale-note { margin-top: 12px; line-height: 1.8; }
/* 数字3つ（2026-11-03 KEN指示）：スマホは上2つ・下1つを横いっぱいに。640px以上は3列 */
.tk-scale-in > div:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 640px) { .tk-scale-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tk-scale-in > div:nth-child(3) { grid-column: auto; } }
.tk-close { margin-top: 44px; text-align: center; font-size: clamp(22px, 6vw, 36px); }
.tk-go { margin-top: 14px; text-align: center; font-size: 14.5px; line-height: 1.8; color: #d3d6de; }
.tk-src { margin-top: 28px; line-height: 1.8; }
@supports (animation-timeline: view()) {
.tk-row, .tk-steps li, .tk-scale-in > div { animation: moIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
@media (min-width: 760px) {
.tk-lead { font-size: 16.5px; }
.tk-head { display: grid; grid-template-columns: 24% 1fr 1.3fr; gap: 0; padding: 0 5px; font-size: 13px; font-weight: 900; }
.tk-head span { padding: 0 18px; }
.tk-hb { color: var(--muted); }
.tk-ha { color: var(--accent2); }
.tk-cmp { gap: 10px; }
.tk-row { grid-template-columns: 24% 1fr 1.3fr; align-items: stretch; border-radius: 18px; }
.tk-task { display: flex; align-items: center; padding: 14px 18px; font-size: 15px; }
.tk-b, .tk-n { padding: 14px 18px; font-size: 15px; }
.tk-n { border-top: 0; border-left: 1px solid rgba(224, 33, 138, 0.45); }
.tk-row small { display: none; }
.tk-oshi { padding: 34px 38px 28px; }
.tk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tk-steps li { align-content: start; }
.tk-scale { padding: 22px 30px 20px; }
.tk-scale-in { max-width: none; }
.tk-go { font-size: 15.5px; }
}
/* 安心感の訴求（#fanza-trust） */
.fz { background: radial-gradient(70% 30% at 50% 0%, rgba(63, 214, 196, 0.12), transparent 72%), radial-gradient(60% 28% at 50% 100%, rgba(212, 160, 23, 0.14), transparent 75%), #06060a; border-bottom: 1px solid rgba(212, 160, 23, 0.3); }
.fz-h { margin-top: 14px; font-size: clamp(32px, 9vw, 64px); line-height: 1.3; letter-spacing: -0.01em; }
.fz-h .nb:last-child { color: var(--gold2); text-shadow: 0 0 30px rgba(212, 160, 23, 0.5); }
.fz-lead { max-width: 40em; font-size: 15.5px; }
.fz-close { margin-top: 40px; text-align: center; font-size: clamp(21px, 5.8vw, 36px); }
.fz-go { margin-top: 14px; text-align: center; font-size: 14.5px; line-height: 1.8; color: #d3d6de; }
.fz-src { margin-top: 28px; line-height: 1.8; }
.own-op { margin-top: 28px; line-height: 1.9; }
/* FANZA・DMMアフィリエイト公式へのリンク（2026-11-04 KEN指示）。ボタン風の小さな部品なので枠線は3px */
.fz-links { margin: 26px auto 0; max-width: 980px; text-align: center; }
.fz-links-t { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.8; color: #fff; }
.fz-link-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
a.fz-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; border: 3px solid rgba(212, 160, 23, 0.7); border-radius: 999px; background: rgba(212, 160, 23, 0.08); color: #fff; text-decoration: none; line-height: 1.4; transition: background 0.15s, border-color 0.15s; }
a.fz-link:hover { background: rgba(212, 160, 23, 0.2); border-color: var(--gold2); color: #fff; }
a.fz-link:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
.fz-link-n { font-size: 15px; font-weight: 900; color: var(--gold2); }
.fz-link-d { font-size: 13.5px; font-weight: 700; }
.fz-link-ic { flex: none; opacity: 0.85; }
a.btn-link.fz-link[target="_blank"]::after { content: none; } /* 外部リンクの共通の矢印は出さない（専用のアイコンを使う） */
.fz-links-n { margin-top: 10px; line-height: 1.8; }
@media (max-width: 520px) { .fz-link-list { flex-direction: column; align-items: stretch; } .fz-link-list li { display: flex; } a.fz-link { flex: 1 1 auto; justify-content: center; margin: 0; } }
@media (min-width: 760px) {
.fz-lead { font-size: 16.5px; }
.fz-go { font-size: 15.5px; }
}
/* ---------- まとめ割（複数サイトを1回の決済で。catalog の bundle.enabled が true のときだけ表示）----------
枠線: 箱は5px・小さい部品は3px・入力欄は1px（既存の .input）。ピンクの主ボタンの枠は変えない。 */
.bundle-info, .bundle-brief { display: none; margin-top: 20px; border: 5px solid rgba(63, 214, 196, 0.55); border-radius: 18px; padding: 16px 20px 18px; background: linear-gradient(180deg, #0d1112, #08080c); }
body.bundle-on .bundle-info, body.bundle-on .bundle-brief { display: block; }
.bundle-info .pnote-k { color: var(--teal); }
.bundle-info .pnote-h { color: #fff; }
/* 申込画面の女優ごとの行 */
.cart-rows { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cart-row { border: 5px solid rgba(212, 160, 23, 0.55); border-radius: 14px; padding: 12px 14px 14px; background: #14110a; min-width: 0; }
.cart-row.is-err { border-color: var(--danger); background: rgba(255, 155, 155, 0.06); }
.cart-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cart-row-name { flex: 1 1 140px; min-width: 0; font-size: 18px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; }
.cart-row-price { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 8px; font-size: 13px; color: var(--muted); }
.cart-row-pct { flex: none; align-self: center; border: 3px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 900; line-height: 1.6; color: var(--muted); white-space: nowrap; }
.cart-row-pct.is-off { border-color: var(--gold2); background: rgba(245, 197, 66, 0.12); color: var(--gold2); }
.cart-row-orig { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.cart-row-now { font-size: 18px; font-weight: 900; color: var(--gold2); }
.cart-row-now.is-pending { font-size: 14px; font-weight: 700; color: var(--muted); }
/* 公開のしかた（無料URL / 独自ドメイン）のラジオ。タップしやすい高さ（44px以上） */
.mode-set { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mode-opt { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 14px; border: 3px solid rgba(255, 255, 255, 0.28); border-radius: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); cursor: pointer; }
.mode-opt input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 3px 0 0; }
.mode-opt > span { min-width: 0; }
.mode-opt:has(input:checked) { border-color: var(--gold2); background: rgba(245, 197, 66, 0.08); color: #fff; }
.mode-opt:has(input:focus-visible) { outline: 3px solid var(--gold2); outline-offset: 2px; }
.mode-set-row { margin-top: 10px; }
.cart-row-own { margin-top: 10px; }
.cart-row-rm { flex: none; min-width: 64px; min-height: 44px; padding: 4px 14px; font-size: 13px; font-weight: 700; border-color: rgba(255, 255, 255, 0.6); }
.cart-row-lbl { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.cart-row .field { margin-top: 4px; }
.cart-row .result { margin-top: 10px; }
.cart-row .sugg { margin-top: 8px; }
.cart-full { color: var(--gold2); font-weight: 700; }
.cart-sum .price-row { flex-wrap: wrap; gap: 4px 12px; }
.cart-sum .price-v { overflow-wrap: anywhere; }
.cart-sum .price-v small { margin-top: 2px; }
.cart-tiers-t { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--txt); }
.cart-tiers { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cart-tier { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; border: 3px solid rgba(255, 255, 255, 0.28); border-radius: 12px; padding: 3px 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cart-tier.is-on { border-color: var(--gold2); background: rgba(245, 197, 66, 0.12); color: #fff; }
.cart-tier-p { font-size: 15px; font-weight: 900; color: var(--gold2); white-space: nowrap; }
.cart-hint { margin-top: 10px; min-height: 1.7em; font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--teal); }
.cart-more { margin-top: 8px; width: 100%; }
.cart-submit-hint { color: var(--gold2); }
@media (max-width: 420px) {
.cart-tiers { grid-template-columns: 1fr; }
.cart-row-price { flex: 1 1 100%; justify-content: flex-start; }
}
/* まとめ割の説明（料金の近く .bundle-info と、棚の上の .bundle-brief）割引率の表・3つの手順・注意書き。数字は app.js がサーバーの値で入れる */
.bundle-brief { margin: 24px 0 22px; padding: 18px 20px 20px; } /* 2026-11-07 オーナー指示「枠線同士をくっつけない」: 上の Pricing 枠との間を空ける */
.bundle-brief-h { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.6; color: #fff; }
.bundle-tbl { width: 100%; min-width: 0; margin-top: 12px; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; line-height: 1.6; }
.bundle-tbl-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bundle-tbl th, .bundle-tbl td { padding: 4px 14px; border: 3px solid rgba(63, 214, 196, 0.5); background: rgba(63, 214, 196, 0.06); }
.bundle-tbl thead th { border: 0; background: none; padding: 0 14px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: left; }
.bundle-tbl tbody th { width: 55%; border-right-width: 0; border-radius: 12px 0 0 12px; font-weight: 700; color: var(--muted); text-align: left; }
@media (max-width: 520px) { .bundle-tbl th, .bundle-tbl td { padding-left: 10px; padding-right: 10px; } } /* 料金欄のまとめ割の表: 一般の table の min-width: 360px を打ち消し、スマホ幅で枠からはみ出さない（2026-11-05 端末で確認して修正） */
.bundle-tbl tbody td { border-left-width: 0; border-radius: 0 12px 12px 0; font-size: 16px; font-weight: 900; color: var(--teal); text-align: right; white-space: nowrap; }
/* 料金欄のまとめ割の表：一般の tr:last-child td { border-bottom: 0 } に負けて最後の行（10サイト目）の右側の下線が消えていたので戻す（2026-11-06 KEN指摘）。棚の上の表（.bundle-tbl-row）は別の指定なので対象外 */
.bundle-tbl:not(.bundle-tbl-row) tbody tr:last-child td { border-bottom: 3px solid rgba(63, 214, 196, 0.5); }
/* 割引率の表：見出し行(th)と割引率の行(td)を1枚のカードにつなげる。.bundle-info 側の表（.bundle-tbl だけ）は触らない */
.bundle-tbl-row { display: block; width: 100%; min-width: 0; margin-left: 0; border-spacing: 0; }
.bundle-tbl-row thead, .bundle-tbl-row tbody { display: block; }
.bundle-tbl-row tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 6px; }
.bundle-tbl-row tr.bundle-sub-h { margin: 0; }
.bundle-tbl-row tr.bundle-sub-h:not(:first-child) { margin-top: 10px; }
.bundle-tbl-row th, .bundle-tbl-row td { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; border: 3px solid rgba(63, 214, 196, 0.5); background: rgba(63, 214, 196, 0.06); }
.bundle-tbl-row tbody th { width: auto; text-align: center; border-width: 3px 3px 0; border-radius: 12px 12px 0 0; padding: 5px 2px 1px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.bundle-tbl-row tbody td { border-width: 0 3px 3px; text-align: center; border-radius: 0 0 12px 12px; padding: 1px 2px 6px; font-size: 18px; font-weight: 900; line-height: 1.5; color: var(--teal); }
.bundle-tbl-row tbody tr:first-child th:first-child { border-color: rgba(63, 214, 196, 0.3); background: transparent; }
.bundle-tbl-row tbody tr:nth-child(2) td:first-child { border-color: rgba(63, 214, 196, 0.3); background: transparent; color: var(--muted); font-size: 16px; }
.bundle-tbl-row tbody tr.bundle-sub-h:nth-last-child(2) th:last-child, .bundle-tbl-row tbody tr.bundle-info-tier:last-child td:last-child { border-color: var(--gold2); background: rgba(255, 200, 80, 0.08); }
.bundle-tbl-row tbody tr.bundle-sub-h:nth-last-child(2) th:last-child { color: var(--gold2); }
.bundle-tbl-row tbody tr.bundle-info-tier:last-child td:last-child { color: var(--gold2); }
@media (max-width: 520px) { .bundle-tbl-row tr { gap: 0 3px; } .bundle-tbl-row th, .bundle-tbl-row td { border-width: 2px; } .bundle-tbl-row tbody th { border-width: 2px 2px 0; font-size: clamp(8px, 2.5vw, 10px); white-space: normal; word-break: keep-all; letter-spacing: -0.04em; padding: 5px 0 1px; } .bundle-tbl-row tbody td { border-width: 0 2px 2px; font-size: clamp(9.5px, 3.1vw, 13px); padding: 1px 0 6px; white-space: normal; word-break: keep-all; letter-spacing: -0.05em; } .bundle-tbl-row tbody tr:nth-child(2) td:first-child { font-size: clamp(9.5px, 3vw, 12px); } } /* スマホ幅で「10サイト目」「50%オフ」が枠に欠けない・折り返さない（画面幅に合わせて文字を縮める。2026-11-05 端末で欠けを確認して修正） */
/* 棚の上の割引率の表も、一般の tr:last-child td { border-bottom: 0 } で最後の行の下線が消えていたので戻す（2026-11-06 KEN指摘）。色は各セルの指定（金色の枠など）のまま */
.bundle-tbl-row tbody tr:last-child td { border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgba(63, 214, 196, 0.5); }
@media (max-width: 520px) { .bundle-tbl-row tbody tr:last-child td { border-bottom-width: 2px; } }
.bundle-explain { margin: 12px 0 0; font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--txt); }
.bundle-brief .bundle-steps-h { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--txt); }
.bundle-steps { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.bundle-steps li { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 0; padding: 10px 12px; border: 3px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }
.bundle-step-n { flex: none; font-size: 18px; line-height: 1.3; font-weight: 900; color: var(--gold2); }
.bundle-steps li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 759px) { .bundle-steps li { flex-direction: row; align-items: baseline; gap: 8px; } }
.bundle-notes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.bundle-brief-note { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.8; color: var(--muted); }
@media (min-width: 760px) {
.bundle-steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
/* 棚・詳細ページの「＋カートに入れる」トグル（大きい「このサイトを申し込む」の下。ピンクではなく控えめな枠のボタン） */
.sc-cart-toggle { width: 100%; margin-top: 10px; min-height: 44px; padding: 6px 14px; font-size: 14px; font-weight: 700; }
/* 畳むボタンはスマホ（639px以下）だけ。下の @media (max-width: 639px) で表示する */
.sc-fold-toggle { display: none; }
.sc-cart-toggle.is-on { border-color: var(--teal); background: rgba(63, 214, 196, 0.14); color: #fff; }
.sc-cart-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
/* 画面の下に固定するカートバー（カートに1サイト以上あり、申込画面が閉じているときだけ）。ヘッダーなど他の固定表示より前、申込画面（.overlay 100）より後ろ */
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 10px 12px; padding: 8px max(12px, calc((100vw - 960px) / 2)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 5px solid rgba(63, 214, 196, 0.7); background: rgba(8, 8, 12, 0.97); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.6); font-family: var(--sans); }
.cart-bar[hidden] { display: none; }
.cart-bar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.cart-bar-count { margin: 0; flex: none; font-size: 14px; font-weight: 900; line-height: 1.7; color: #fff; white-space: nowrap; }
.cart-bar-meter { display: flex; gap: 3px; flex: 1 1 120px; max-width: 180px; min-width: 90px; }
.cart-bar-seg { flex: 1 1 0; min-width: 0; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.cart-bar-seg.is-on { background: var(--teal); }
.cart-bar-info { margin: 0; flex: 1 0 100%; font-size: 12px; line-height: 1.7; color: var(--muted); }
.cart-bar-pct { font-weight: 900; color: var(--gold2); }
.cart-bar-hint { margin-left: 10px; font-weight: 700; color: var(--teal); }
.cart-bar-open { flex: none; min-height: 44px; padding: 6px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 480px) {
.cart-bar { gap: 8px; }
.cart-bar-count { font-size: 13px; }
.cart-bar-meter { min-width: 0; max-width: none; }
.cart-bar-hint { display: block; margin-left: 0; }
.cart-bar-open { padding: 6px 12px; }
}
/* バーが出ているあいだは、ページ末尾がバーに隠れないよう下に余白を足す（高さは2〜3行ぶん） */
body.cart-bar-on { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 480px) { body.cart-bar-on { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } }
body.cart-bar-on .staff-badge { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
/* 「カートに追加しました」などの短い知らせ（空のときは出ない）*/
.cart-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; max-width: calc(100vw - 32px); padding: 6px 18px; border: 3px solid var(--teal); border-radius: 100px; background: rgba(6, 6, 10, 0.97); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center; pointer-events: none; }
.cart-toast:empty { display: none; }
body.cart-bar-on .cart-toast { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
/* ヒーロー: 斜めに流れるPC画面の壁（2026-11-03 KEN指示。浮遊するスクショから差し替え）*/
.hero .hx-wrap { margin-right: 0; }
.hero .hero-wall { position: relative; height: 240px; margin: 0 -20px; overflow: hidden; pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
.hero .hero-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(closest-side, rgba(224,33,138,.34), transparent 90%); }
.hero .hero-wall .sw-tilt { top: 50%; left: 50%; width: 1100px; margin-left: -550px; margin-top: -150px; gap: 10px; opacity: .92;
transform: perspective(900px) rotateX(14deg) rotateZ(-8deg); transform-origin: 50% 50%; z-index: 1; }
.hero .hero-wall .sw-track { gap: 10px; }
.hero .hero-wall .sw-l .sw-track { animation: swL 40s linear infinite; }
.hero .hero-wall .sw-r .sw-track { animation: swR 48s linear infinite; }
.hero .hero-wall .sw-tile { width: 150px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.6); }
.hero .hero-wall .sw-tile:nth-child(5n+2) { box-shadow: 0 0 0 1px rgba(224,33,138,.6), 0 0 18px rgba(224,33,138,.4); }
.hero .hero-tags .tg-teal, .hero .hero-tags .tg-gold { z-index: 8; }
@media (min-width: 641px) and (max-width: 999px) { .hero .hero-wall { height: 340px; margin: 0 auto; max-width: 640px; }
.hero .hero-wall .sw-tilt { width: 1400px; margin-left: -700px; margin-top: -190px; gap: 14px; }
.hero .hero-wall .sw-track { gap: 14px; } .hero .hero-wall .sw-tile { width: 210px; border-radius: 7px; } }
@media (min-width: 1000px) {
.hero .hx-wrap { margin-right: -40px; }
.hero .hero-wall { height: 520px; margin: 0; }
.hero .hero-wall .sw-tilt { width: 1700px; margin-left: -850px; margin-top: -290px; gap: 16px; transform: perspective(1200px) rotateX(14deg) rotateZ(-9deg); }
.hero .hero-wall .sw-track { gap: 16px; }
.hero .hero-wall .sw-tile { width: 250px; border-radius: 8px; }
.hero .hero-wall .sw-l .sw-track { animation-duration: 60s; } .hero .hero-wall .sw-r .sw-track { animation-duration: 72s; }
}
/* PC: テキストを中央（スライダー側）へ寄せ、テキストと壁の間の余白を詰める（2026-11-03 KEN指示） */
@media (min-width: 1000px) {
.hero-in { max-width: 1120px; gap: 0; }
.hero-copy { justify-self: end; width: 100%; max-width: 560px; }
.hero .hx-wrap { margin-left: -36px; }
}
/* タブレット〜小さめのPC（641〜999px）も、ヒーローはテキストと斜めスライダーを横並びにする。スマホ（640px以下）だけ縦並び（2026-11-04 KEN指示） */
@media (min-width: 641px) and (max-width: 999px) {
.hero { padding-left: 24px; padding-right: 24px; }
.hero-in { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0; align-items: center; }
.hero .hx-wrap { max-width: none; margin: 0 -24px 0 -12px; }
.hero .hero-wall { height: 420px; margin: 0; max-width: none; }
.hero .hero-wall .sw-tilt { width: 1300px; margin-left: -650px; margin-top: -230px; }
.hero .hero-wall .sw-tile { width: 190px; }
.h1 { font-size: clamp(28px, 4.6vw, 42px); }
.hero .btn-hero { min-width: 0; width: 100%; }
}
/* ---------- 棚のカード一覧: スマホ（639px以下）は2列（2026-11-04 KEN指示）----------
カード幅は 360px 端末で約 165px。情報を詰め、価格推移・ドメイン例・作品数・サイト名の小見出し・初回合計の注記は出さない
（どれも詳細ページで見られる）。「サイトを見る」「詳細を見る」「＋カートに入れる」「申し込む」はタップしやすい高さ（40px以上）を保つ。
640px以上（タブレット・PC）は従来の auto-fill（minmax(240px, 1fr)）のまま。 */
@media (max-width: 639px) {
.sec.shelf { padding-left: 12px; padding-right: 12px; }
.shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shelf-grid .skel { height: 300px; }
.sc { border-width: 3px; border-radius: 14px; min-width: 0; }
.sc-eye { aspect-ratio: 1 / 1; }
.sc-eye .sc-top { top: 8px; left: 8px; right: 8px; gap: 4px; }
.sc-showcase .badge-showcase { padding: 0 5px; letter-spacing: 0; font-size: 10px; }
.sc .badge { min-height: 20px; padding: 0 7px; font-size: 10.5px; letter-spacing: 0.02em; border-width: 2px; white-space: nowrap; }
.sc-eye-cap { left: 8px; right: 8px; bottom: 8px; }
.sc-catch { margin-bottom: 4px; font-size: 10.5px; font-size: clamp(10px, 6.6cqw, 11.5px); line-height: 1.4; }
.sc-catch span { text-wrap: balance; word-break: auto-phrase; }
.sc-eye .sc-name { font-size: 21px; line-height: 1.25; }
.sc-site { display: none; }
.sc-ribbon { top: 38px; padding: 2px 9px 2px 7px; font-size: 10.5px; letter-spacing: 0.04em; }
.sc-body { padding: 8px 8px 8px; }
.sc-tags { margin-top: 0; gap: 4px; }
.sc-ruby, .sc-domain { display: none; }
.sc-body > .sc-meta:not(.sc-price) { display: none; }
.sc-price { margin-top: 8px; padding-top: 6px; flex-direction: column; align-items: flex-start; gap: 0; }
.sc-ease { justify-content: flex-start; margin-top: 3px; }
.sc-works-l { font-size: 10.5px; }
.sc-price-n { font-size: 18px; }
.sc-price-n.is-pending { font-size: 12px; }
.sc-first { margin-top: 2px; font-size: 11px; line-height: 1.5; }
.sc-first-t, button.btn-link.sc-ph { display: none; }
.sc-body a.btn-link.sc-demo, .sc-body a.btn-link.sc-detail { align-self: stretch; justify-content: center; min-height: 40px; margin: 8px 0 0; padding: 4px 6px; border-width: 2px; font-size: 12.5px; text-align: center; white-space: nowrap; }
.sc-body a.btn-link.sc-demo + a.btn-link.sc-detail { margin-top: 6px; }
.sc-body button.btn-link.sc-demo { align-self: stretch; justify-content: center; min-height: 40px; margin: 8px 0 0; padding: 4px 6px; border-width: 2px; font-size: 12px; text-align: center; white-space: normal; } /* 見本サイトの公開前（2026-11-06）: 幅320pxでも2行に収める */
.sc-body button.btn-link.sc-demo + a.btn-link.sc-detail { margin-top: 6px; }
.sc-showcase-note { margin-top: 8px; padding: 8px 8px; border-width: 2px; border-radius: 10px; font-size: 11.5px; line-height: 1.7; }
.sc-foot { padding: 0 8px 10px; }
.sc-foot .btn { padding-left: 4px; padding-right: 4px; }
.sc-foot .btn.btn-apply { min-height: 46px; padding-top: 6px; padding-bottom: 6px; border-width: 3px; font-size: 15px; letter-spacing: 0; }
.sc-foot .btn.btn-off { min-height: 44px; font-size: 14px; }
.sc-foot .btn.btn-off.sale-wait { min-height: 46px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; } /* 受付開始前（2026-11-06）: 幅320pxでも2行に収める */
.sc-foot .btn.sale-wait.sc-cart-toggle { min-height: 40px; font-size: 11.5px; }
.sc-ap-lead { display: none; }
.sc-cart-toggle { margin-top: 6px; min-height: 40px; padding: 4px 4px; border-width: 2px; font-size: 12px; white-space: normal; line-height: 1.4; }
.sc-foot .btn.sc-cart-toggle { white-space: normal; }
/* 畳む（スマホだけ）。is-folded のカードは、初回合計・サイトを見る・詳細を見る・カートを隠す。PC・タブレットでは何も隠さない */
.sc.is-folded .sc-first, .sc.is-folded .sc-demo, .sc.is-folded .sc-detail, .sc.is-folded .sc-cart-toggle { display: none; }
/* 開いたカードが隣のカードを引き伸ばして、隣の「申し込む」が下に離れないよう、開いているカードがある間は上揃えにする */
.shelf-grid:has(.sc-fold-toggle[aria-expanded="true"]) { align-items: start; }
.sc .sc-fold-toggle { display: inline-flex; width: calc(100% - 16px); margin: 0 8px 10px; min-height: 44px; padding: 4px 6px; border-width: 3px; font-size: 13px; font-weight: 700; color: var(--muted); border-color: rgba(255, 255, 255, 0.4); background: transparent; }
.sc .sc-fold-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.sc .sc-fold-toggle:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; color: #fff; }
}
/* PC（960px以上）は3列。タブレット（640〜959px）は auto-fill で2列 */
@media (min-width: 960px) { .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 本文（段落・リスト・ニュース・注記）の中に出てくる女優名。周りの文の色・大きさのまま、太さだけ 800 にする。
「.tk-n b」などの 用の見た目（ブロック表示・色・文字サイズ）に引っ張られないよう、詳細度を上げて打ち消す */
b.actress-name.actress-name { display: inline; font-size: inherit; font-weight: 800; line-height: inherit; color: inherit; letter-spacing: inherit; text-shadow: none; text-align: inherit; margin: 0; }
/* 知名度プレミアム（初期費用に上乗せしている女優だけ） */
.sc-premium { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent2, #e0218a); letter-spacing: 0.02em; }
.dt-premium { display: block; margin-top: 4px; font-weight: 700; color: var(--accent2, #e0218a); }
/* ---------- 見本サイト（showcase）の「サイトを見る」（2026-11-06 オーナー指示）----------
ほかの女優の申込ボタンと同じ位置・同じ大きさの枠。色は押せる控えめなボタン（.btn-sub。ピンクは購入・申込専用）。
カード: 受付開始前（.sc-visit-wait）は押せない「11月14日（土）20:00 受付開始」と、受付開始後（.sc-visit-open）は「申し込む」と同じ文字・余白・枠の太さ。
受付開始前は、同じ文言を見えない形（.visit-ghost）で重ね、2行に折り返す画面でも同じ大きさになるようにする。
まとめ割が有効なときの .sc-foot-spacer は、ほかの女優の「＋カートに入れる」と同じ大きさの見えない枠（縦の位置をそろえるだけ）。
一覧のボタン（sl-visit-btn）は「陳列棚の表示切り替え」のブロックの最後。 */
.visit-stack { display: inline-grid; place-items: center; min-width: 0; max-width: 100%; }
.visit-stack > * { grid-area: 1 / 1; }
.visit-label { white-space: nowrap; }
.visit-ghost { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.35em; row-gap: 0; visibility: hidden; }
.visit-ghost .nb { white-space: nowrap; }
.sc-foot .sc-foot-spacer { visibility: hidden; pointer-events: none; }
.sc-foot .btn.sc-visit-wait { white-space: normal; line-height: 1.35; }
.sc-foot .btn.sc-visit-open { min-height: 76px; padding: 18px 8px; border-width: 6px; font-size: 19px; letter-spacing: 0; }
@media (max-width: 700px) { .sc-foot .btn.sc-visit-open { min-height: 80px; font-size: 22px; letter-spacing: 0.04em; } }
@media (max-width: 639px) {
.sc-foot .btn.sc-visit-open { min-height: 46px; padding-top: 6px; padding-bottom: 6px; border-width: 3px; font-size: 15px; letter-spacing: 0; }
.sc-foot .btn.sc-visit-wait { min-height: 46px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
}
/* 2026-11-07 KEN指示：背景にロボットを大胆に、画面の端で切れる配置 */
.bgr-host { position: relative; }
.bgr { position: absolute; z-index: 0; pointer-events: none; user-select: none; width: auto; max-width: none; height: calc(var(--bgr-h) * var(--bgr-k, 1)); top: var(--bgr-t); opacity: var(--bgr-o); filter: drop-shadow(0 30px 40px rgba(0,0,0,.8)) drop-shadow(0 0 60px rgba(74,168,255,.18)); }
.bgr-r { right: calc(var(--bgr-h) * var(--bgr-k, 1) * var(--bgr-ar) * var(--bgr-out) * -1); }
.bgr-l { left: calc(var(--bgr-h) * var(--bgr-k, 1) * var(--bgr-ar) * var(--bgr-out) * -1); }
.bgr-flip { transform: scaleX(-1); }
.bgr-host > .wrap, .bgr-host > .wrap-lg { position: relative; z-index: 1; }
.bgr-ns { --bgr-h: 820px; --bgr-t: 90px; --bgr-ar: 1000 / 785; --bgr-out: 0.38; --bgr-o: 0.5; }
.bgr-au { --bgr-h: 1150px; --bgr-t: 40px; --bgr-ar: 726 / 1536; --bgr-out: 0.45; --bgr-o: 0.42; }
.bgr-fz { --bgr-h: 900px; --bgr-t: -60px; --bgr-ar: 1000 / 1250; --bgr-out: 0.4; --bgr-o: 0.45; }
.bgr-tk { --bgr-h: 1100px; --bgr-t: 120px; --bgr-ar: 1000 / 1500; --bgr-out: 0.42; --bgr-o: 0.42; }
.bgr-os { --bgr-h: 980px; --bgr-t: 260px; --bgr-ar: 900 / 970; --bgr-out: 0.36; --bgr-o: 0.45; }
@media (max-width: 600px) {
.bgr { --bgr-k: 0.6; opacity: 0.22; }
}
/* ---------- 2026-11-10 追加（販売LP改修）----------
.bt : ページ前半の「まとめ買い」の段（#bundle-top）。まとめ割が有効のとき（body.bundle-on）だけ表示。既存の .bundle-info と同じ色・枠・角丸
.stock : 棚の上の「ランク別の在庫」欄（#stock）。app.js が /api/catalog の実データで描く。データが無いときは hidden のまま */
.bt { display: none; }
body.bundle-on .bt { display: block; }
.bt .eyebrow { color: var(--teal); }
.bt .eyebrow::after { background: linear-gradient(90deg, var(--teal), transparent); }
.bt-ex-cap { margin-top: 22px; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--muted); }
.bt-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bt-card { min-width: 0; border: 5px solid rgba(63, 214, 196, 0.55); border-radius: 18px; padding: 16px 18px 14px; background: linear-gradient(180deg, #0d1112, #08080c); }
.bt-card-h { font-size: 17px; font-weight: 900; line-height: 1.5; color: #fff; }
.bt-row { margin-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.bt-l { min-width: 0; }
.bt-v { flex: none; font-size: 15px; font-weight: 900; color: #fff; white-space: nowrap; }
.bt-disc .bt-v { color: var(--teal); }
.bt-total { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-weight: 700; }
.bt-total .bt-v { font-size: 20px; color: var(--gold2); }
.bt-note { margin-top: 14px; line-height: 1.85; }
.bt-more { margin-top: 12px; }
@media (max-width: 640px) { .bt-grid { grid-template-columns: 1fr; } }
.stock { margin-top: 24px; border: 5px solid rgba(212, 160, 23, 0.5); border-radius: 18px; padding: 16px 20px 18px; background: linear-gradient(180deg, #14110a, #09080a); }
.stock-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stock-rank { min-width: 0; display: grid; gap: 4px; padding: 10px 8px 10px; border: 3px solid rgba(255, 255, 255, 0.16); border-radius: 12px; text-align: center; }
.stock-k { font-size: 14px; font-weight: 900; color: var(--gold2); }
.stock-n { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.stock-n em { font-style: normal; font-size: 18px; font-weight: 900; color: #fff; }
.stock-n-av em { color: var(--teal); }
.stock-note { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
@media (max-width: 520px) { .stock-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- 2026-11-10 KEN指示：「なぜ、このサービスを始めたのか。」（#story）の背景に、afi-support.net 本体の透かし写真 ----------
写真は afi-support.net の /wp-content/uploads/2026/07/rds-bg-man.webp（同じドメインの本体サイトの画像をそのまま参照）。文字の読みやすさを優先して薄く・周りをぼかす */
#story { position: relative; overflow: hidden; isolation: isolate; }
#story::after { content: ""; position: absolute; inset: 0; background: url(/wp-content/uploads/2026/07/rds-bg-man.webp) no-repeat right -60px top 40px / auto 640px; opacity: 0.4; filter: grayscale(1) contrast(1.15); /* 2026-11-10 KEN指示：薄すぎたので濃く・ぼかしを弱く */ -webkit-mask-image: radial-gradient(ellipse 44% 58% at 72% 40%, black 62%, transparent 100%), linear-gradient(to bottom, black 0, black 400px, transparent 670px); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 44% 58% at 72% 40%, black 62%, transparent 100%), linear-gradient(to bottom, black 0, black 400px, transparent 670px); mask-composite: intersect; pointer-events: none; z-index: 0; } /* 2026-11-10 KEN指示：写真の下の切れ目を見せない（下だけフェードアウト。上はそのまま） */
#story > .wrap-sm { position: relative; z-index: 1; }
@media (max-width: 640px) { #story::after { background-position: left -430px top 30px; background-size: auto 620px; opacity: 0.42; filter: grayscale(1) contrast(1.25); -webkit-mask-image: linear-gradient(to right, transparent 0, black 25%), linear-gradient(to bottom, black 0, black 440px, transparent 650px); mask-image: linear-gradient(to right, transparent 0, black 25%), linear-gradient(to bottom, black 0, black 440px, transparent 650px); } } /* 2026-11-10 KEN指示：スマホは写真を大きくしすぎたので縮小（案A）、ぼかしを弱めて写真をはっきり。拡大でぼやけたので元画像（800x533）に近い 620px まで小さく */
/* ---------- 陳列棚の表示切り替え（カード／一覧）----------
#shelf に data-shelf-view-toggle 属性があるページ（index.html。2026-11-06 に確認用の preview-shelf.html から移した）だけで効く。
一覧は文字だけの省スペースな行。PC（1000px以上）は列見出しつきの表、それより狭い画面は1件2行程度（名前・ランク・価格が必ず見える）。 */
[data-shelf-view-toggle] .shelf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 18px; }
[data-shelf-view-toggle] .shelf-bar .shelf-sort { flex: 0 1 auto; min-width: 0; margin-top: 0; }
[data-shelf-view-toggle] .shelf-view { flex: none; display: inline-flex; gap: 4px; padding: 3px; border: 3px solid rgba(255, 255, 255, 0.35); border-radius: 100px; background: rgba(255, 255, 255, 0.04); }
[data-shelf-view-toggle] .ssv { min-height: 38px; min-width: 64px; padding: 2px 16px; border: 3px solid transparent; border-radius: 100px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: nowrap; }
[data-shelf-view-toggle] .ssv:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
[data-shelf-view-toggle] .ssv:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
[data-shelf-view-toggle] .ssv[aria-checked="true"] { border-color: var(--teal); background: rgba(63, 214, 196, 0.16); color: #fff; font-weight: 900; }
[data-shelf-view-toggle] .shelf-list { margin-top: 12px; border: 5px solid rgba(212, 160, 23, 0.6); border-radius: 18px; background: linear-gradient(180deg, #101016, #09090d); overflow: hidden; line-height: 1.5; }
[data-shelf-view-toggle] .sl-head { display: none; }
[data-shelf-view-toggle] .sl-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
[data-shelf-view-toggle] .sl-head + .sl-row { border-top: 0; }
[data-shelf-view-toggle] .sl-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
[data-shelf-view-toggle] .sl-row:hover { background: rgba(63, 214, 196, 0.06); }
/* スマホ・タブレット: 1行目 = No.・名前（よみ・引退のバッジ）・価格、2行目 = ランク・作品数・販売状態・（右端に）＋カート。詳細ページへは名前のリンクから（「詳細」ボタンは 2026-11-06 に削除） */
[data-shelf-view-toggle] .sl-row::before { content: ""; order: 3; flex: 0 0 100%; height: 0; }
/* 文字が大きい端末（Android の文字サイズ設定など）でも横にはみ出さない: 名前の行に価格が入りきらなければ、価格は次の行の右端へ回り込む */
[data-shelf-view-toggle] .sl-namec { order: 1; flex: 1 1 5em; min-width: 0; max-width: 100%; align-self: baseline; overflow-wrap: anywhere; }
[data-shelf-view-toggle] .sl-price { order: 2; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; align-self: baseline; text-align: right; }
[data-shelf-view-toggle] .sl-rank { order: 4; }
[data-shelf-view-toggle] .sl-price .sl-ease-v { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 3px; font-size: 11.5px; }
[data-shelf-view-toggle] .sl-works { order: 5; }
[data-shelf-view-toggle] .sl-status { order: 6; }
[data-shelf-view-toggle] .sl-ops { order: 7; display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; margin-left: auto; }
[data-shelf-view-toggle] .sl-rank:empty { display: none; }
[data-shelf-view-toggle] .sl-ops:empty { display: none; } /* まとめ割が無効・申し込めない女優は操作の欄が空（2行目に余白を作らない） */
/* 女優名は詳細ページへのリンク: 常にティールの下線と「›」を付けて、リンクだと分かるようにする。ホバー・フォーカスで明るく */
[data-shelf-view-toggle] a.sl-name { color: #fff; font-size: 18px; line-height: 1.35; font-weight: 900; text-decoration: underline; text-decoration-color: rgba(63, 214, 196, 0.8); text-decoration-thickness: 2px; text-underline-offset: 4px; }
[data-shelf-view-toggle] a.sl-name::after { content: "›"; display: inline-block; margin-left: 4px; color: var(--teal); font-weight: 900; text-decoration: none; }
[data-shelf-view-toggle] a.sl-name:hover, [data-shelf-view-toggle] a.sl-name:focus-visible { color: #a6f7ec; text-decoration-color: #a6f7ec; }
[data-shelf-view-toggle] a.sl-name:hover::after, [data-shelf-view-toggle] a.sl-name:focus-visible::after { color: #a6f7ec; }
[data-shelf-view-toggle] a.sl-name:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; border-radius: 4px; }
[data-shelf-view-toggle] .sl-row.is-off a.sl-name { color: var(--muted); text-decoration-color: rgba(63, 214, 196, 0.5); }
[data-shelf-view-toggle] .sl-row.is-off a.sl-name:hover, [data-shelf-view-toggle] .sl-row.is-off a.sl-name:focus-visible { color: #a6f7ec; text-decoration-color: #a6f7ec; }
[data-shelf-view-toggle] .sl-ruby { display: inline-block; max-width: 100%; margin-left: 6px; font-size: 12px; color: var(--muted); }
[data-shelf-view-toggle] .sl-namec .sl-badge { max-width: calc(100% - 6px); margin-left: 6px; vertical-align: 1px; }
[data-shelf-view-toggle] .shelf-list .sl-badge { max-width: 100%; min-height: 22px; padding: 0 6px; font-size: 11px; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; }
/* 名前の欄のバッジ（引退など）は、狭い画面・大きな文字では枠の中で折り返す */
[data-shelf-view-toggle] .shelf-list .sl-namec .sl-badge { white-space: normal; overflow-wrap: anywhere; }
/* スマホ・タブレット: 名前の下に回り込んだ「引退・過去作アーカイブ」などのバッジが名前や下の行とくっつかないよう、上下に余白（2026-11-06 KEN指摘） */
@media (max-width: 999px) { [data-shelf-view-toggle] .shelf-list .sl-namec .sl-badge { margin-top: 8px; margin-bottom: 6px; } }
[data-shelf-view-toggle] .sl-k { margin-right: 4px; font-size: 11px; color: var(--muted); }
[data-shelf-view-toggle] .sl-works-n { font-size: 14px; font-weight: 900; color: var(--gold2); }
[data-shelf-view-toggle] .sl-works-n small { margin-left: 2px; font-size: 11px; font-weight: 400; color: var(--muted); }
[data-shelf-view-toggle] .sl-price-n { display: block; font-size: 15px; font-weight: 900; color: #fff; line-height: 1.3; white-space: nowrap; }
[data-shelf-view-toggle] .sl-price-n.is-pending { font-size: 12px; font-weight: 700; color: var(--muted); }
[data-shelf-view-toggle] .sl-row.is-off .sl-price-n { color: var(--muted); }
[data-shelf-view-toggle] .sl-prem { display: block; max-width: 10em; margin-left: auto; font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--accent2); white-space: normal; overflow-wrap: anywhere; }
[data-shelf-view-toggle] .sl-prem.sl-sold-l { color: var(--muted); font-weight: 400; }
[data-shelf-view-toggle] .sl-na { color: var(--muted); }
[data-shelf-view-toggle] .shelf-list .sl-cart-btn { width: auto; min-height: 34px; margin: 0; padding: 2px 9px; border-width: 3px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
[data-shelf-view-toggle] .shelf-list .sl-cart-btn.is-on { border-color: var(--teal); background: rgba(63, 214, 196, 0.14); color: #fff; }
[data-shelf-view-toggle] .shelf-list .sl-cart-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* PC（1000px以上）: 列見出しつきの表。1行 40〜48px 程度 */
@media (min-width: 1000px) {
[data-shelf-view-toggle] .sl-head, [data-shelf-view-toggle] .sl-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 76px 190px 96px 132px; column-gap: 12px; align-items: center; padding: 4px 16px; }
[data-shelf-view-toggle] .sl-head { min-height: 38px; background: #121218; border-bottom: 1px solid rgba(212, 160, 23, 0.5); }
[data-shelf-view-toggle] .sl-h { color: var(--gold2); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; white-space: nowrap; }
[data-shelf-view-toggle] .sl-row { min-height: 44px; }
[data-shelf-view-toggle] .sl-row::before { display: none; }
[data-shelf-view-toggle] .sl-row > .sl-c, [data-shelf-view-toggle] .sl-head > .sl-h { order: 0; }
[data-shelf-view-toggle] .sl-namec, [data-shelf-view-toggle] .sl-price { align-self: center; max-width: none; }
[data-shelf-view-toggle] .sl-rank:empty, [data-shelf-view-toggle] .sl-ops:empty { display: block; }
[data-shelf-view-toggle] .sl-works, [data-shelf-view-toggle] .sl-price, [data-shelf-view-toggle] .sl-h.sl-works, [data-shelf-view-toggle] .sl-h.sl-price { text-align: right; }
[data-shelf-view-toggle] .sl-ops { margin-left: 0; }
[data-shelf-view-toggle] .sl-h.sl-ops { text-align: right; }
[data-shelf-view-toggle] .sl-k { display: none; }
[data-shelf-view-toggle] .sl-price-n { font-size: 16px; line-height: 1.25; }
[data-shelf-view-toggle] .sl-prem { max-width: none; }
[data-shelf-view-toggle] .sl-ruby { font-size: 13px; margin-left: 8px; }
/* 女優名を大きく見やすく（2026-11-06 KEN指示）。PCは 19px */
[data-shelf-view-toggle] a.sl-name { font-size: 19px; }
[data-shelf-view-toggle] .shelf-list .sl-cart-btn { min-height: 32px; }
}
@media (max-width: 640px) {
[data-shelf-view-toggle] .shelf-bar .shelf-sort { flex-basis: 100%; }
/* 並べ替えタブが4つになるので、入りきらない幅では横スクロール（スクロールバー非表示で「切れて」見える）ではなく次の行へ折り返す */
[data-shelf-view-toggle] .shelf-bar .shelf-sort { flex-wrap: wrap; overflow-x: visible; }
}
/* 400px未満: 2行目に「＋カート」まで収めるため、「作品数」の文字は画面の読み上げ用にだけ残す（見た目は「146本」） */
@media (max-width: 399px) {
[data-shelf-view-toggle] .sl-k { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 359px) {
[data-shelf-view-toggle] .sl-row { gap: 4px 5px; padding: 9px 10px; }
[data-shelf-view-toggle] .shelf-list .sl-badge { padding: 0 5px; }
[data-shelf-view-toggle] .shelf-list .sl-cart-btn { padding: 2px 7px; }
[data-shelf-view-toggle] .sl-ops { gap: 4px; }
}
/* 受付開始前（2026-11-06）: 一覧の「＋カート」も「11月14日（土）」「20:00 受付開始」の2語の間で折り返す */
[data-shelf-view-toggle] .shelf-list .sl-cart-btn.sale-wait { white-space: normal; text-align: center; }
/* 見本サイトの「サイトを見る」（一覧の操作の列）: 「＋カート」・受付開始前の押せないボタンと同じ大きさ（2026-11-06 オーナー指示。カードの方は上の .sc-visit） */
[data-shelf-view-toggle] .shelf-list .sl-visit-btn { width: auto; min-height: 34px; margin: 0; padding: 2px 9px; border-width: 3px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
[data-shelf-view-toggle] .shelf-list .sl-visit-btn.sl-visit-wait, [data-shelf-view-toggle] .shelf-list .sl-visit-btn.demo-wait { white-space: normal; text-align: center; }
@media (min-width: 1000px) { [data-shelf-view-toggle] .shelf-list .sl-visit-btn { min-height: 32px; } }
@media (max-width: 359px) { [data-shelf-view-toggle] .shelf-list .sl-visit-btn { padding: 2px 7px; } }
/* スマホ・タブレット（999px以下）の行の収まり（2026-11-06 オーナー指示「ランク・本数の行と受付開始ボタンの行が詰まっている」）
- 行の上下の余白 8px → 12px。行の中の段と段の間は 10px（改行用の ::before の上下に row-gap が2回入るので row-gap は 5px）。
- 受付開始前の押せないボタン（.sale-wait）と見本の「サイトを見る」（.sl-visit-wait）の置き場所は、一覧の幅を「文字の大きさ（em）」で測って全行一律に決める
（行ごとの中身で決めると、「見本サイト」のバッジが長い見本の行だけ次の行に落ちて並びがそろわないため）:
・27em 以上（タブレットなど）: これまでどおり、ランク・作品数・販売状態と同じ段の右端に1行のボタン。
・21.25em 以上 27em 未満（通常の文字で 375〜450px 程度の画面）: 同じ段の右端。ボタンは「11月14日（土）」「20:00 受付開始」の2行に折り返した幅（min-content）にそろえ、
どの行も同じ幅で右端に縦一列に並ぶ（見本の「サイトを見る」も、見えない同じ文言で同じ幅）。
21.25em = いちばん幅を取る見本の行（ランク・4桁の作品数・「見本サイト」・2行にしたボタン）が入る幅（2026-11-06 Playwright で実測 21.1em）。
27em = ボタンを1行のまま並べても入る幅（同じく実測 26.5em）。
・21.25em 未満（360px の画面、文字を大きくした画面）: ボタンは次の段に行の幅いっぱいで置き、上の段と 10px 空ける。
受付開始後の「＋カート」・「サイトを見る」はこれまでどおり（短いので2段目の右端に入る）。
- 価格の下の「知名度プレミアム＋10%込み」は「知名度プレミアム」「＋10%込み」で折り返す幅（8.5文字分）にして、行末に「＋」が残らないようにする（価格の欄が少し細くなり、名前の欄が広がる） */
@media (max-width: 999px) {
[data-shelf-view-toggle] .shelf-list { container: sl-list / inline-size; }
[data-shelf-view-toggle] .sl-row { row-gap: 5px; padding-top: 12px; padding-bottom: 12px; }
[data-shelf-view-toggle] .sl-prem { max-width: 8.5em; }
@container sl-list (21.25em <= width < 27em) {
[data-shelf-view-toggle] .sl-ops > .sale-wait, [data-shelf-view-toggle] .sl-ops > .sl-visit-wait { width: min-content; }
}
@container sl-list (width < 21.25em) {
[data-shelf-view-toggle] .sl-ops:has(> .sale-wait, > .sl-visit-wait) { flex: 1 0 100%; margin-top: 5px; }
[data-shelf-view-toggle] .sl-ops > .sale-wait, [data-shelf-view-toggle] .sl-ops > .sl-visit-wait { flex: 1 1 auto; }
}
}