/* =====================================================================
   vatican.css（ショップ用）─ 光の聖堂テーマ（バチカンの黄と白）
   style.css / shop.css の後に読み込む上書きテーマ。
   神聖な白 × 希望のバナナイエロー × ごく小さな赤。
   ===================================================================== */

:root {
  --v-white: #ffffff;
  --v-paper: #ffffff;
  --v-cream: #ffffff;
  --v-banana: #f2f2f2;
  --v-yellow: #e5e5e5;
  --v-gold:   #e5e5e5;
  --v-deep:   #606060;
  --v-ink:    #0f0f0f;
  --v-soft:   #606060;
  --v-muted:  #606060;
  --v-line:   #e5e5e5;
  --v-red:    #0f0f0f;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "Noto Serif JP", "MS PMincho", serif;
}

html { background: var(--v-white); }
body {
  background:
    radial-gradient(ellipse 70% 46% at 50% -8%, rgba(255, 214, 30, .22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 40%, rgba(255, 233, 140, .18), transparent 65%),
    radial-gradient(ellipse 50% 60% at 100% 44%, rgba(255, 233, 140, .18), transparent 65%),
    var(--v-paper);
  background-attachment: fixed;
  color: var(--v-ink);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: .03em;
}
a { color: var(--v-deep); }
a:hover { color: #b28a00; }
b, strong { color: #3d3423; }

/* ---------- ヘッダー ---------- */
.site-top {
  background:
    radial-gradient(ellipse 70% 140% at 50% -40%, rgba(255, 255, 255, .85), transparent 60%),
    linear-gradient(180deg, #f2f2f2 0%, #e5e5e5 100%);
  border-bottom: 2px solid var(--v-gold);
  box-shadow: 0 1px 0 #fff inset, 0 6px 20px rgba(0,0,0, .25);
}
.site-top::before { opacity: .35; }
.site-top .logo, .site-top .logo a { color: #fff; text-shadow: 0 1px 0 var(--v-gold), 0 2px 8px rgba(160, 120, 0, .45); }
.site-top .sub { color: #7a5c00; }
.site-top .counter { color: #7a5c00; background: rgba(255, 255, 255, .6); border: 1px solid #fff; }
.site-top .counter b { color: var(--v-red); }
.ticker { background: var(--v-cream); border-color: var(--v-line); color: var(--v-soft); }
.retro-nav { background: var(--v-white); border-bottom: 2px solid var(--v-yellow); }
.retro-nav a { color: var(--v-ink); border-color: transparent; }
.retro-nav a:hover, .retro-nav a.active { background: var(--v-cream); color: var(--v-deep); border-color: var(--v-yellow); }
.retro-nav a.nav-official {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  color: #606060; border: 1px solid var(--v-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.login-line { background: var(--v-paper); color: var(--v-soft); border-bottom: 1px solid var(--v-line); }

/* ---------- 見出し：黄金の光の帯 ---------- */
.bar {
  position: relative;
  background: linear-gradient(180deg, #f2f2f2 0%, #e5e5e5 55%, #e5e5e5 100%);
  border: 1px solid var(--v-gold);
  border-top: 1px solid #fff6cf;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -8px 16px rgba(0,0,0, .25),
    0 2px 8px rgba(0,0,0, .25);
  color: #606060;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.bar::after { content: none; }
.bar .more { color: #7a5c00; }
.bar .more:hover { color: #4a3800; }

/* ---------- ヒーロー・スライダー ---------- */
.shop-hero {
  background:
    radial-gradient(ellipse 75% 120% at 50% -10%, rgba(255, 214, 30, .3), transparent 65%),
    linear-gradient(180deg, #fffef8, var(--v-cream));
  border-color: var(--v-gold);
  border-top-color: var(--v-yellow);
  border-bottom-color: var(--v-yellow);
  box-shadow: 0 0 0 1px var(--v-line), 0 4px 18px rgba(0,0,0, .2);
}
.shop-hero .sh-cross { color: var(--v-gold); text-shadow: 0 0 16px rgba(0,0,0, .8); }
.shop-hero .sh-title { color: var(--v-deep); text-shadow: 0 1px 0 #fff, 0 2px 10px rgba(0,0,0, .5); }
.shop-hero .sh-sub { color: var(--v-soft); }
.hero-slider { background: var(--v-cream); border-bottom: 3px double var(--v-gold); box-shadow: 0 1px 0 #fff; }
.hero-slider .hs-dot { border-color: var(--v-gold); background: rgba(255, 255, 255, .7); }
.hero-slider .hs-dot.on { background: var(--v-yellow); }

/* ---------- パネル ---------- */
.panel, .empty-note, .note {
  background: var(--v-white); border-color: var(--v-line);
  color: var(--v-ink);
  box-shadow: 0 2px 10px rgba(220, 190, 80, .14), inset 0 1px 0 #fff;
}
.muted, .note { color: var(--v-muted); }
.error-box { background: #fdf0ee; border-color: #e5b6b0; color: #a53125; }
.ok-box { background: #ffffff; border-color: #e5e5e5; color: #606060; }

/* ---------- アイテムカード：光のアーチ窓 ---------- */
.p-grid .thumb-card {
  background: var(--v-white);
  border-color: var(--v-line);
  box-shadow: 0 2px 10px rgba(220, 190, 80, .16);
}
.p-grid .thumb-card:hover {
  border-color: var(--v-yellow);
  box-shadow: 0 6px 18px rgba(0,0,0, .3);
}
.p-card .frame {
  border-color: var(--v-gold);
  background: radial-gradient(circle at 50% 26%, #fffef8, var(--v-cream) 85%);
  box-shadow:
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px var(--v-banana),
    0 2px 10px rgba(0,0,0, .18);
}
.p-card .t-title { color: var(--v-ink); }
.p-card .p-tags i { color: var(--v-muted); }
.p-card .p-tags i::before { color: var(--v-gold); }
.p-card .p-price { color: #606060; }
.p-card .p-price small { color: var(--v-muted); }
.p-card .p-actions { border-top-color: var(--v-line); }
.p-card .t-badge { background: var(--v-gold) !important; color: #fff; }
.p-card .t-new { background: var(--v-red); color: #fff; }
.p-card .p-spot { background: var(--v-yellow); border-color: var(--v-gold); color: #606060; }
.p-card .p-rank { border-color: #fff; }
.p-card .p-rank.r1 { background: linear-gradient(180deg, #f2f2f2, var(--v-yellow)); color: #606060; }
.p-card .p-out { color: var(--v-muted); }
.p-stock.st-few { background: var(--v-gold); }

/* ---------- カテゴリーカード ---------- */
.cat-card { background: var(--v-white); border-color: var(--v-line); box-shadow: 0 2px 8px rgba(220, 190, 80, .16); }
.cat-card:hover { background: var(--v-cream); border-color: var(--v-yellow); box-shadow: 0 0 14px rgba(0,0,0, .4); }
.cat-card .cc-cross { color: var(--v-gold); text-shadow: 0 0 10px rgba(0,0,0, .6); }
.cat-card .cc-name { color: var(--v-deep); }
.cat-card .cc-desc { color: var(--v-muted); }
.cat-card .cc-count { background: var(--v-cream); border-color: var(--v-line); color: var(--v-deep); }

/* ---------- ボタン・タグ ---------- */
.btn {
  background: var(--v-white);
  border: 1px solid var(--v-gold);
  color: var(--v-deep);
  box-shadow: 0 1px 0 rgba(0,0,0, .35), inset 0 1px 0 #fff;
}
.btn:hover { background: var(--v-cream); color: #606060; box-shadow: 0 0 10px rgba(0,0,0, .5); }
.btn.primary {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  color: #606060; border-color: var(--v-gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.btn.primary:hover { background: linear-gradient(180deg, #f2f2f2, #e5e5e5); }
.btn.gray { background: #f2f2f2; color: var(--v-muted); border-color: #e5e5e5; }
.btn.danger { background: #fdf0ee; border-color: #d98d82; color: var(--v-red); }
.ptag { background: var(--v-cream); border-color: var(--v-line); color: var(--v-deep); }
.ptag:hover { background: var(--v-banana); color: #606060; border-color: var(--v-gold); }
.ptag.active-tag { background: var(--v-yellow) !important; color: #606060 !important; border-color: var(--v-gold) !important; }

/* ---------- アイテム詳細 ---------- */
.pd-gallery .pd-main {
  border-color: var(--v-gold);
  background: radial-gradient(circle at 50% 24%, #fffef8, var(--v-cream) 85%);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--v-banana), 0 3px 14px rgba(0,0,0, .2);
}
.pd-thumbs img { border-color: var(--v-line); background: #fff; }
.pd-thumbs img.on, .pd-thumbs img:hover { border-color: var(--v-gold); }
.pd-buy {
  background: var(--v-white);
  border-color: var(--v-gold);
  border-top: 3px double var(--v-yellow);
  box-shadow: 0 3px 14px rgba(0,0,0, .18);
}
.pd-title { color: #3d3423; }
.pd-subtitle { color: var(--v-soft); }
.pd-price { color: #606060; }
.pd-price small, .pd-views { color: var(--v-muted); }
.pd-stock.st-few { background: var(--v-gold); }
.pd-spec th { background: var(--v-cream); color: var(--v-deep); border-color: var(--v-line); }
.pd-spec td { background: #fff; color: var(--v-ink); border-color: var(--v-line); }
.pd-paypal { background: var(--v-cream); border-color: var(--v-gold); }
.pd-paypal.cart { background: #fffef8; border-style: solid; }
.pd-paylabel { color: var(--v-deep); }
.pd-paynote { color: var(--v-muted); }
.pd-soldout { background: #f2f2f2; border-color: #e5e5e5; color: var(--v-muted); }
.pd-desc { font-size: 16px; line-height: 2.15; }
.pd-cartbtn, .pp-wrap, .p-card .cart-add { background: transparent; padding: 0; }

/* ---------- 試聴プレーヤー：光の聖盤 ---------- */
.sm-player {
  background: linear-gradient(180deg, #fffef8, var(--v-cream));
  border-color: var(--v-gold);
  box-shadow: inset 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0, .2);
}
.smp-label { color: var(--v-soft); }
.sm-player.playing .smp-label { color: var(--v-deep); }
.smp-btn {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  border-color: var(--v-gold);
  box-shadow: 0 0 0 1px #fff, 0 2px 6px rgba(0,0,0, .4);
}
.smp-ic.play { border-left-color: #606060; }
.smp-ic.pause { border-left-color: #606060; border-right-color: #606060; }
.smp-track { background: #f3ecd2; border-color: #e0d29a; }
.smp-buffer { background: #ecdfa8; }
.smp-fill { background: linear-gradient(90deg, var(--v-banana), var(--v-yellow)); }
.smp-knob { background: #fff; border-color: var(--v-gold); box-shadow: 0 0 6px rgba(0,0,0, .6); }
.smp-time { color: var(--v-muted); }

/* ---------- サイド ---------- */
.side-title {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  border: 1px solid var(--v-gold);
  color: #606060;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.side-menu a { color: var(--v-ink); border-bottom: 1px dashed var(--v-line); }
.side-menu a:hover { color: var(--v-deep); background: var(--v-cream); }
.side-mini { color: var(--v-soft); background: var(--v-white); border-color: var(--v-line); }
.ad-slot { background: var(--v-white); color: var(--v-muted); border-color: #e8d98e; }
.side-reco-item { background: var(--v-white); border-color: var(--v-line); }
.side-reco-item:hover { border-color: var(--v-gold); }
.side-reco-item img { background: #fff; border-bottom-color: var(--v-line); }
.side-reco-item .srt { color: var(--v-ink); }
.side-reco-item .srp { color: #606060; }
.side-reco-item .pop-no { background: var(--v-yellow); border-color: var(--v-gold); color: #606060; }

/* ---------- ブログ・FAQ ---------- */
.blog-card { background: var(--v-white); border-color: var(--v-line); }
.blog-card:hover { border-color: var(--v-yellow); box-shadow: 0 0 14px rgba(0,0,0, .35); }
.blog-card .bc-thumb { background: var(--v-cream); border-bottom-color: var(--v-line); }
.blog-card .bc-cat { background: var(--v-cream); border-color: var(--v-line); color: var(--v-deep); }
.blog-card .bc-title { color: var(--v-ink); }
.blog-card .bc-date { color: var(--v-muted); }
.blog-eyecatch { border-color: var(--v-line); }
.faq-item { background: var(--v-white); border-color: var(--v-line); box-shadow: 0 2px 8px rgba(220, 190, 80, .14); }
.faq-q { color: var(--v-deep); }
.faq-a { color: var(--v-ink); }
.fq-mark { background: var(--v-yellow); color: #606060; }
.fa-mark { background: var(--v-cream); color: var(--v-deep); border-color: var(--v-gold); }

/* ---------- 法定表示・管理 ---------- */
.law-table th { background: var(--v-cream); color: var(--v-deep); border-color: var(--v-line); }
.law-table td { background: #fff; color: var(--v-ink); border-color: var(--v-line); }
.admin-form th { background: var(--v-cream); color: var(--v-deep); border-color: var(--v-line); }
.admin-form td { background: #fff; border-color: var(--v-line); }
.admin-form input, .admin-form select, .admin-form textarea,
.panel input[type=text], .panel input[type=password], .panel textarea {
  background: #fff !important; color: var(--v-ink) !important; border-color: #e0d29a !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--v-gold) !important; box-shadow: 0 0 0 3px rgba(0,0,0, .3); outline: none; }
::placeholder { color: #b8ab8a !important; }
.table-scroll { border-color: var(--v-line); }
.admin-list th { background: linear-gradient(180deg, var(--v-banana), var(--v-yellow)); color: #606060; border-color: var(--v-gold); }
.admin-list td { background: #fff; color: var(--v-ink); border-color: var(--v-line); }
.admin-slide { background: var(--v-cream); border-color: var(--v-line); }
.admin-img img { border-color: var(--v-line); }

/* ---------- カートFAB・フッター・ドロワー ---------- */
.cart-fab {
  background: #fff;
  border-color: var(--v-gold);
  box-shadow: 0 0 0 2px var(--v-banana), 0 2px 10px rgba(0,0,0, .4);
}
.site-footer { background: var(--v-cream); border-top: 2px solid var(--v-yellow); color: var(--v-soft); }
.site-footer a { color: var(--v-deep); }
.home-banner {
  background: linear-gradient(180deg, var(--v-banana), var(--v-yellow));
  border: 1px solid var(--v-gold);
  color: #606060 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.hb-btn { background: linear-gradient(180deg, var(--v-banana), var(--v-yellow)) !important; border-color: var(--v-gold) !important; }
.hb-btn .hb-lines i { background: #606060 !important; }
.hb-panel {
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(255, 214, 30, .25), transparent 60%),
    linear-gradient(170deg, #fffef8 0%, var(--v-paper) 60%, var(--v-cream) 100%) !important;
  border-color: var(--v-gold) !important;
}
.hb-cross { color: var(--v-gold) !important; }
.hb-title { color: var(--v-deep) !important; }
.hb-sub, .hb-sec, .hb-foot { color: var(--v-muted) !important; }
.hb-link, .hb-lt { color: var(--v-ink) !important; }
.hb-link:hover { background: var(--v-cream) !important; }
.hb-lt small { color: var(--v-muted) !important; }
.hb-li { background: var(--v-cream) !important; border-color: var(--v-line) !important; color: var(--v-deep) !important; }
.hb-x { color: var(--v-deep) !important; }
.hb-foot-mark { color: var(--v-gold) !important; }