/* ══════════════════════════════════════════════════════════════
   theme-light.css — 白基調のデザインシステム
   各ページの <style> と dark-theme.css より「後」に読み込むこと。
   ページごとの黒×紫の装飾を上書きし、白ベース・角丸・控えめな影に揃える。
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --bg-sub: #f5f6f8;
  --bg-card: #ffffff;
  --surface-2: #f8f9fb;

  --text: #1f2328;
  --text-sub: #545b66;
  --text-muted: #8b929c;

  --border: #e6e8eb;
  --border-dark: #d5d9de;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dark: #1e40af;
  --accent-light: #eff5ff;
  --accent-ring: rgba(37, 99, 235, .18);
  --accent-grad: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);

  --red: #e11d48;
  --red-light: #fff1f2;
  --success: #16a34a;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10);
}

html, body { background: var(--bg-sub) !important; color: var(--text); }

/* .container は display:flex なので、直下の要素は min-width:auto の仕様で
   中身(検索ボタンやチップの並び)の幅より縮めず、スマホで画面外にはみ出していた。
   直下の要素は必ず画面幅に収める。 */
.container > * { min-width: 0; max-width: 100%; }
img, video, iframe, canvas, svg { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
.page-wrap { background: var(--bg-sub) !important; }
.page-wrap::before { display: none !important; }

/* ── 基本パーツ ───────────────────────────────────────── */
:where(input, textarea, select) {
  background-color: #fff;
  color: var(--text);
  border-color: var(--border-dark);
  border-radius: var(--r-md);
}
:where(input, textarea)::placeholder { color: var(--text-muted); }
:where(input, textarea, select):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
:where(button, .btn) { border-radius: var(--r-md); }

/* ── ヒーロー (トップ) ───────────────────────────────── */
/* トップのヒーロー背景: 青空と城の絵 (画像の右半分)。
   文字がある左側は白く覆って読みやすくし、右にいくほど絵を見せる */
.hero-v3 {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.45) 70%, rgba(255,255,255,.15) 100%),
    url('/img/hero-bg-v2.jpg') right center / cover no-repeat !important;
  border-bottom: 1px solid var(--border) !important;
}
@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .hero-v3 {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.45) 70%, rgba(255,255,255,.15) 100%),
      image-set(url('/img/hero-bg-v2.webp') type('image/webp'), url('/img/hero-bg-v2.jpg') type('image/jpeg')) !important;
  }
}
.hero-v3__chara { display: none !important; }
@media (max-width: 640px) {
  .hero-v3 {
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,.35) 100%),
      url('/img/hero-bg-v2.jpg') 70% center / cover no-repeat !important;
  }
  /* キャラ画像が無くなったので、検索バーの逃げ場 (画像の高さ分の余白) も不要 */
  .hero-v3__search { margin-top: 8px !important; }
}
.hero-v3::before { display: none !important; }
.hero-v3::after {
  opacity: .35 !important;
  background:
    linear-gradient(rgba(17, 24, 39, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .035) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
}
.hero-v3__chara img { filter: drop-shadow(0 18px 30px rgba(16, 24, 40, .16)) !important; }
.hero-v3__status {
  color: var(--text-sub) !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}
.hero-v3__status-dot { background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18) !important; }
.hero-v3__status-sep { background: var(--border-dark) !important; }
.hero-v3__title { color: #111827 !important; text-shadow: none !important; }
.hero-v3__grad {
  background: linear-gradient(92deg, var(--accent) 0%, #6366f1 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; filter: none !important;
}
.hero-v3__lead { color: var(--text-sub) !important; }
.hero-v3__key {
  clip-path: none !important;
  background: #fff !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important;
}
.hero-v3__key:hover { background: var(--accent-light) !important; color: var(--accent) !important; }
.hero-v3__key-no { color: var(--accent) !important; }
.hero-v3__btn { border-radius: var(--r-md) !important; }
.hero-v3__btn--primary {
  background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28) !important;
}
.hero-v3__btn--primary:hover { background: var(--accent-hover) !important; filter: none !important; }
.hero-v3__btn--ghost {
  background: #fff !important; color: var(--text) !important;
  border: 1px solid var(--border-dark) !important; box-shadow: var(--shadow);
}
.hero-v3__btn--ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: #fff !important; }
.hero-v3__search i { color: var(--text-muted) !important; }
.hero-v3__search input {
  background: #fff !important; color: var(--text) !important;
  border: 1px solid var(--border-dark) !important; border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md); backdrop-filter: none !important;
}
.hero-v3__search input::placeholder { color: var(--text-muted) !important; }
.hero-v3__search input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring) !important; }
.hero-v3__results {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--shadow-lg); backdrop-filter: none !important;
}
.hero-v3__results .search-result-bar { color: var(--text) !important; }
.hero-v3__results .search-close-btn { background: var(--surface-2) !important; color: var(--text-sub) !important; border: 1px solid var(--border) !important; }
.hero-v3__results .home-empty { color: var(--text-muted) !important; }

.hero-vote {
  background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.hero-vote:hover { border-color: var(--accent) !important; box-shadow: 0 14px 36px rgba(37, 99, 235, .16) !important; }
.hero-vote__ic { background: var(--accent-grad) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, .3) !important; }
.hero-vote__label { color: var(--accent) !important; }
.hero-vote__title { color: var(--text) !important; }
.hero-vote__cta { color: var(--accent) !important; background: var(--accent-light) !important; border: 1px solid rgba(37, 99, 235, .25) !important; }
.hero-vote:hover .hero-vote__cta { background: var(--accent) !important; color: #fff !important; }

.hero-v3__stats {
  background: #fff !important;
  border-top: none !important; border-bottom: 1px solid var(--border) !important;
}
.hero-v3__stat:not(:last-child)::after { background: var(--border) !important; transform: none !important; }
.hero-v3__stat .ic { background: var(--accent-light) !important; border: none !important; color: var(--accent) !important; }
.hero-v3__stat .t { color: var(--text-muted) !important; }
.hero-v3__stat .v { color: var(--text) !important; }
@media (max-width: 640px) {
  .hero-v3__stat:nth-child(-n+2) { border-bottom: 1px solid var(--border) !important; }
  .hero-vote { background: #fff !important; }
}

/* ── サービス一覧 (トップ) ───────────────────────────── */
.svx { background: var(--bg-sub) !important; border-bottom: none !important; }
.svx::before { display: none !important; }
.svx__eng { color: var(--accent) !important; }
.svx__title { color: #111827 !important; }
.svx__sub { color: var(--text-muted) !important; }
.svx__list {
  border-top: none !important; display: grid; gap: 12px;
}
.svx__row {
  background: #fff; border: 1px solid var(--border) !important; border-radius: var(--r-lg);
  padding: 20px 22px !important; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.svx__row::before { display: none !important; }
.svx__row:hover {
  background: #fff !important; padding-left: 22px !important;
  border-color: rgba(37, 99, 235, .45) !important; box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.svx__no { color: transparent !important; -webkit-text-stroke: 1px #c9ced6 !important; }
.svx__row:hover .svx__no { color: var(--accent) !important; -webkit-text-stroke: 1px transparent !important; }
.svx__name { color: var(--text) !important; }
.svx__tag {
  color: var(--accent) !important; background: var(--accent-light);
  border: none !important; border-radius: var(--r-pill) !important; padding: 3px 10px !important;
}
.svx__desc { color: var(--text-sub) !important; }
.svx__arrow { border: 1px solid var(--border) !important; color: var(--text-muted) !important; background: #fff; }
.svx__row:hover .svx__arrow { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
@media (max-width: 640px) {
  .svx__row { padding: 15px 14px !important; }
  .svx__row:hover { padding-left: 14px !important; }
}

/* ── 人気商品TOP5 / 累計販売数 ──────────────────────── */
.rank5 {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.rank5::before { display: none !important; }
.rank5__title { color: var(--text) !important; font-family: inherit !important; font-weight: 800; letter-spacing: .04em !important; }
.rank5__deco { background: linear-gradient(90deg, var(--border), transparent) !important; }
.rank5 .rank-item { border-bottom: 1px solid #f0f2f4 !important; border-radius: var(--r-sm); }
.rank5 .rank-item:hover { background: var(--surface-2) !important; }
.rank5 .rank-title { color: var(--text) !important; }
.rank-title--dot { font-family: inherit !important; font-weight: 700 !important; font-size: .95rem !important; letter-spacing: 0 !important; }
.rank5 .rank-thumb { border-color: var(--border) !important; background: var(--surface-2) !important; border-radius: var(--r-sm) !important; }
.rank5 .rank-thumb--none { background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 6px, #e9ecef 6px, #e9ecef 12px) !important; }
.rank5-no { font-family: 'Inter', sans-serif !important; font-weight: 800; }
.rank5-no--1 { color: #f59e0b !important; text-shadow: none !important; }
.rank5-no--2 { color: #94a3b8 !important; text-shadow: none !important; }
.rank5-no--3 { color: #d97706 !important; text-shadow: none !important; }
.rank5-no--4, .rank5-no--5 { color: #c3c8cf !important; }
.rank5 .rank-arrow { color: #c3c8cf !important; }
.rank5 .rank-item:hover .rank-arrow { color: var(--accent) !important; }
.rank5__cta { border-top: 1px solid var(--border) !important; }
.rank5__cta-btn {
  background: var(--accent) !important; color: #fff !important; border-radius: var(--r-md) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
.rank5__cta-btn:hover { background: var(--accent-hover) !important; }

.showcase-stat {
  background: #fff !important; color: var(--text) !important;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.showcase-stat::before {
  background: radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .08) 0%, transparent 55%) !important;
}
.showcase-stat__num { color: var(--accent) !important; }
.showcase-stat__num::after { color: var(--text-muted) !important; }
.showcase-stat__label { color: var(--text) !important; }
.showcase-stat__sub { color: var(--text-sub) !important; }
.showcase-rank__cta-btn { background: var(--accent) !important; border-color: var(--accent) !important; border-radius: var(--r-md) !important; }
.showcase-rank__cta-btn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.showcase-rank__cta-btn--sub { background: #fff !important; color: var(--text) !important; border-color: var(--border-dark) !important; }

/* ── トップ下部のブロック ────────────────────────────── */
.km-block { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.km-block--dark { background: #fff !important; color: var(--text) !important; }
.km-block__title, .km-block__title--light { color: var(--text) !important; }
.km-block__title small { color: var(--accent) !important; }
.km-item__num { color: var(--accent) !important; }
.km-item__title { color: var(--text) !important; }
.km-item__desc { color: var(--text-sub) !important; }
.km-pay__item { border-radius: var(--r-md); }

/* ── フッター ──────────────────────────────────────── */
.footer { background: #fff !important; border-top: 1px solid var(--border) !important; }
.footer__sns-link {
  background: var(--surface-2) !important; color: var(--text-sub) !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important;
}
.footer__sns-link:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.footer__copy { color: var(--text-muted) !important; }
.powered { border-top: 1px solid var(--border) !important; }
.powered p { color: var(--text-muted) !important; }

/* ── 商品一覧 (ゲーム垢販売) ─────────────────────────── */
/* 石垢・進行垢の一覧ヒーロー: 城と朝日の風景 (画像の右側)。
   見出しがある左側は白く覆い、右にいくほど絵を見せる */
.gh-hero {
  min-height: 190px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.35) 62%, rgba(255,255,255,.08) 100%),
    url('/img/hero-ishi-v1.jpg') 62% 45% / cover no-repeat !important;
  border-bottom: 1px solid var(--border) !important;
}
@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .gh-hero {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.35) 62%, rgba(255,255,255,.08) 100%),
      image-set(url('/img/hero-ishi-v1.webp') type('image/webp'), url('/img/hero-ishi-v1.jpg') type('image/jpeg')) !important;
  }
}
.gh-hero::before, .gh-hero::after { display: none !important; }
.gh-hero__chara { display: none !important; }
.gh-hero__title { text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; }
@media (max-width: 640px) {
  .gh-hero {
    min-height: 150px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 60%, rgba(255,255,255,.3) 100%),
      url('/img/hero-ishi-v1.jpg') 70% 40% / cover no-repeat !important;
  }
  .gh-hero__sub { max-width: 100% !important; }
}
.gh-hero__eng { color: var(--accent) !important; }
.gh-hero__title { color: #111827 !important; text-shadow: none !important; }
.gh-hero__sub { color: var(--text-sub) !important; }

.filter-btn {
  background: #fff !important; color: var(--text-sub) !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important;
}
.filter-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.filter-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important; }
.result-count { color: var(--text-muted) !important; }

.pcard {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--shadow);
}
.pcard:hover { border-color: rgba(37, 99, 235, .4) !important; box-shadow: var(--shadow-lg) !important; }
.pcard__img { background: var(--surface-2) !important; }
.pcard__img-placeholder { color: #cfd4da !important; }
.pcard__cat-tag { background: rgba(255, 255, 255, .95) !important; color: var(--accent) !important; box-shadow: var(--shadow); }
.pcard__game-tag { border-radius: var(--r-pill) !important; }
.pcard__title { color: var(--text) !important; }
.pcard__details { color: var(--text-muted) !important; }
.pcard__price { color: #111827 !important; }
.pcard__price small { color: var(--text-muted) !important; }
.pcard__btn { background: var(--accent) !important; border-radius: var(--r-sm) !important; }
.pcard__btn:hover { background: var(--accent-hover) !important; filter: none !important; }
.pcard__btn--sold { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.sk-card {
  border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
  background: linear-gradient(100deg, #f3f4f6 40%, #fafafa 50%, #f3f4f6 60%) !important;
  background-size: 200% 100% !important;
}
.loading-state, .empty-state { color: var(--text-muted) !important; }
#ghLoading { background: var(--bg-sub) !important; }
.gh-load__spin { border-color: rgba(37, 99, 235, .18) !important; border-top-color: var(--accent) !important; }
.gh-load__txt { color: var(--text-muted) !important; }
.cart-fab { background: var(--accent) !important; }
.cart-fab:hover { background: var(--accent-hover) !important; }
.cart-checkout-a, .qb-btn { background: var(--accent) !important; border-radius: var(--r-md) !important; }
.cart-checkout-a:hover, .qb-btn:hover { background: var(--accent-hover) !important; }
.qb-plat.active { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ── よくある質問: ホバーで文字が白くなり読めなかった ── */
.faq-item { border-radius: var(--r-lg) !important; overflow: hidden; border-color: var(--border) !important; }
.faq-q, .faq-q * { color: var(--text) !important; }
.faq-q:hover { background: var(--surface-2) !important; }
.faq-q__q, .faq-q__caret { color: var(--text-muted) !important; }
.faq-a, .faq-a * { color: var(--text-sub) !important; }
.faq-tab { border-radius: var(--r-pill) !important; }
.faq-tab.is-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.faq-search input { border-radius: var(--r-md) !important; }

/* ── 動画・音楽 ── */
.player-nav button, .player-controls button, .search button { border-radius: var(--r-sm) !important; }
.player-nav button { background: var(--accent) !important; }
.player-nav button:disabled { background: #d5d9de !important; }
.card { border-radius: var(--r-lg) !important; overflow: hidden; }

/* ── 下層ページ共通 ─────────────────────────────────── */
.header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.7) 100%),
    url('/img/band-ishi-v1.jpg') center 42% / cover no-repeat !important;
  border-bottom: 1px solid var(--border) !important;
}
@supports (background-image: image-set(url('a.webp') type('image/webp'))) {
  .header {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.7) 100%),
      image-set(url('/img/band-ishi-v1.webp') type('image/webp'), url('/img/band-ishi-v1.jpg') type('image/jpeg')) !important;
  }
}
.header__inner { background: transparent !important; border-bottom: none !important; }
.header::before { display: none !important; }
.header__title { color: #111827 !important; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.9) !important; }
.sub-page { border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important; background: #fff !important; }
.sub-page__back-link { border-radius: var(--r-pill) !important; }

/* ── マイページ: プロフィール ───────────────────────── */
.mpx-box {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--shadow);
}
.mpx-box__h { color: var(--text) !important; border-bottom: 1px solid #f0f2f4 !important; }
.mph__avatar { background: var(--accent-grad) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, .25) !important; }
.mph__name { color: var(--text) !important; }
.mph__since { color: var(--text-muted) !important; }
.mpx-sub__box, .mph__stat {
  background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
}
.mpx-sub__box .t, .mph__stat .t { color: var(--text-muted) !important; }
.mpx-sub__box .v, .mph__stat .v { color: var(--text) !important; }
.mpx-sub__box .v small { color: var(--text-muted) !important; }
a.mpx-sub__box:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-md); }
.mph__stat .v.accent { color: var(--accent) !important; }
.mpx-sub__box--max { border-color: #fcd34d !important; background: #fff !important; }
.mpx-sub__box--max .v { color: #b45309 !important; }
.mpx-sub__box--premium { border-color: rgba(37, 99, 235, .35) !important; background: #fff !important; }
.mpx-sub__box--premium .v { color: var(--accent) !important; }
.mpx-sub__box--none .v { color: var(--text-muted) !important; }
.mp-settings-link {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--shadow);
}
.mp-settings-link__txt { color: var(--text-sub) !important; }
.mp-settings-link__btn {
  background: var(--accent) !important; border-radius: var(--r-md) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .22) !important;
}
.mp-settings-link__btn:hover { background: var(--accent-hover) !important; filter: none !important; }
.order-card, .cart-card, .mp-stat-card { border-radius: var(--r-lg) !important; }
.goto-btn, .creds-copy, .rev-submit { border-radius: var(--r-md) !important; }
.rev-submit { background: var(--accent) !important; }
#mpLoading { background: var(--bg-sub) !important; }
.mp-load__spin { border-color: rgba(37, 99, 235, .18) !important; border-top-color: var(--accent) !important; }
.mp-load__txt { color: var(--text-muted) !important; }