/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-top
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  :root {
    --bg: #0d0f14;
    --surface: #161921;
    --surface2: #1e2230;
    --border: rgba(255,255,255,0.08);
    --text: #e8eaf0;
    --muted: #ffffff;
    --accent: #4fc3f7;
    --accent2: #7c6ff7;
    --warn: #f5a623;
    --danger: #e05c5c;
    --success: #4caf82;
    --radius: 14px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Noto Sans JP',sans-serif; background:var(--bg); color:var(--text); line-height:1.65; }

  /* ── グローバルリンク色（ブラウザデフォルトの青を上書き） ── */
  a { color:inherit; text-decoration:none; }
  a:visited { color:inherit; }

  /* ── Age Gate Overlay ── */
  #age-gate {
    position:fixed; inset:0; z-index:9999;
    background:rgba(8,10,16,0.97);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px);
  }
  .gate-box {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:48px 40px; max-width:420px; width:90%;
    text-align:center;
  }
  .gate-icon { font-size:40px; margin-bottom:16px; }
  .gate-title { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin-bottom:8px; }
  .gate-sub { font-size:13px; color:var(--muted); margin-bottom:28px; line-height:1.7; }
  .gate-law {
    background:#1a1010; border:1px solid rgba(224,92,92,0.3);
    border-radius:10px; padding:14px 16px; margin-bottom:28px;
    font-size:12px; color:#e8a0a0; line-height:1.7; text-align:left;
  }
  .gate-law strong { color:var(--danger); }
  .gate-btns { display:flex; gap:12px; }
  .btn-yes {
    flex:1; background:var(--accent); color:#0d0f14;
    border:none; padding:14px; border-radius:10px;
    font-size:14px; font-weight:700; cursor:pointer;
    font-family:'Noto Sans JP',sans-serif; transition:opacity .2s;
  }
  .btn-yes:hover { opacity:.85; }
  .btn-no {
    flex:1; background:var(--surface2); color:var(--muted);
    border:1px solid var(--border); padding:14px; border-radius:10px;
    font-size:14px; cursor:pointer; font-family:'Noto Sans JP',sans-serif;
    transition:background .2s;
  }
  .btn-no:hover { background:#2a1515; color:var(--danger); }
  .gate-note { margin-top:16px; font-size:11px; color:var(--muted); line-height:1.6; }

  /* ── Header ── */
  header {
    background:rgba(13,15,20,0.92); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100; backdrop-filter:blur(10px);
  }
  .header-inner {
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .logo { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700;
    background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .logo-sub { font-size:10px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-top:-2px; }
  nav { display:flex; gap:24px; }
  nav a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; }
  nav a:hover { color:var(--text); }
  .age-badge {
    background:var(--danger); color:white;
    font-size:11px; font-weight:700; padding:5px 10px; border-radius:6px;
    letter-spacing:.5px;
  }

  /* ── Alert Banner ── */
  .alert-banner {
    background:linear-gradient(90deg,rgba(224,92,92,0.15),rgba(245,166,35,0.12));
    border-bottom:1px solid rgba(224,92,92,0.25);
    padding:10px 24px; display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .alert-banner span { font-size:13px; color:#f0c0a0; }
  .alert-banner a { color:var(--warn); font-weight:700; text-decoration:none; }

  /* ── Hero ── */
  .hero {
    padding:80px 24px 90px; text-align:center; position:relative; overflow:hidden;
    background:#0d0f14;
  }
  /* ━━ Blob アニメーション背景 ━━ */
  .hero-blob {
    position:absolute; border-radius:50%; filter:blur(80px);
    pointer-events:none; z-index:0; will-change:transform;
  }
  .hero-blob-1 {
    width:600px; height:600px; top:-100px; left:-150px;
    background:rgba(124,111,247,0.22);
    animation:blob1 14s ease-in-out infinite;
  }
  .hero-blob-2 {
    width:500px; height:500px; top:-80px; right:-100px;
    background:rgba(79,195,247,0.20);
    animation:blob2 18s ease-in-out infinite;
  }
  .hero-blob-3 {
    width:450px; height:450px; bottom:-120px; left:30%;
    background:rgba(76,175,130,0.18);
    animation:blob3 22s ease-in-out infinite;
  }
  .hero-blob-4 {
    width:300px; height:300px; top:30%; right:10%;
    background:rgba(124,111,247,0.14);
    animation:blob4 16s ease-in-out infinite;
  }
  @keyframes blob1 {
    0%,100% { transform:translate(0,0) scale(1); }
    25%      { transform:translate(80px,60px) scale(1.08); }
    50%      { transform:translate(40px,120px) scale(0.95); }
    75%      { transform:translate(-40px,50px) scale(1.05); }
  }
  @keyframes blob2 {
    0%,100% { transform:translate(0,0) scale(1); }
    20%      { transform:translate(-70px,40px) scale(1.06); }
    50%      { transform:translate(-120px,80px) scale(0.92); }
    80%      { transform:translate(-30px,120px) scale(1.10); }
  }
  @keyframes blob3 {
    0%,100% { transform:translate(0,0) scale(1); }
    30%      { transform:translate(60px,-50px) scale(1.07); }
    60%      { transform:translate(-80px,-80px) scale(0.94); }
  }
  @keyframes blob4 {
    0%,100% { transform:translate(0,0) scale(1); }
    40%      { transform:translate(-60px,70px) scale(1.12); }
    70%      { transform:translate(40px,50px) scale(0.90); }
  }
  /* 動画背景 */
  .hero-video-bg {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
    pointer-events:none;
  }
  .hero-video-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(
      to bottom,
      rgba(8,10,16,0.55) 0%,
      rgba(8,10,16,0.45) 50%,
      rgba(8,10,16,0.75) 100%

    );
  }
  /* 動画設定時はグラデーション背景を非表示 */
  .hero:has(.hero-video-bg)::before { display:none; }
  /* ヒーロー内コンテンツを動画・blobの上に */
  .hero > *:not(.hero-video-bg):not(.hero-video-overlay):not(.hero-blob) {
    position:relative; z-index:2;
  }
  .hero::before {
    content:''; position:absolute; inset:0; z-index:1;
    background:radial-gradient(ellipse 100% 50% at 50% 100%, rgba(8,10,16,0.5) 0%, transparent 60%);
    pointer-events:none;
  }
  .hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(79,195,247,0.1); border:1px solid rgba(79,195,247,0.25);
    border-radius:50px; padding:6px 16px; font-size:12px; color:var(--accent);
    margin-bottom:20px; letter-spacing:.5px;
  }
  .hero-title {
    font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,4vw,48px);
    font-weight:700; line-height:1.2; margin-bottom:12px;
  }
  .hero-title .grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .hero-sub {font-size:15px;color: #ffffff;margin-bottom:36px;}
  .search-box {
    max-width:560px; margin:0 auto; display:flex;
    background:var(--surface); border:1px solid var(--border); border-radius:50px;
    overflow:hidden;
  }
  .search-box input {
    flex:1; padding:14px 22px; border:none; outline:none;
    background:transparent; color:var(--text); font-size:14px;
    font-family:'Noto Sans JP',sans-serif;
  }
  .search-box input::placeholder { color:var(--muted); }
  .search-btn {
    background:var(--accent); border:none; padding:12px 24px;
    color:#0d0f14; font-size:15px; cursor:pointer; transition:opacity .2s;
  }
  .search-btn:hover { opacity:.85; }
  .hero-stats { display:flex; justify-content:center; gap:40px; margin-top:40px; }
  .stat-num { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:var(--accent); }
  .stat-label {font-size:11px;color: #ffffff;margin-top:2px;}

  /* ── Education Banner ── */
  .edu-section {
    background:linear-gradient(135deg,#0f1a10,#111820);
    border-top:1px solid rgba(76,175,130,0.2);
    border-bottom:1px solid rgba(76,175,130,0.2);
    padding:40px 24px;
  }
  .edu-inner { max-width:1100px; margin:0 auto; }
  .edu-title {
    font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
    color:var(--success); letter-spacing:1px; text-transform:uppercase;
    margin-bottom:20px; display:flex; align-items:center; gap:10px;
  }
  .edu-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
  .edu-card {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    border-radius:12px; padding:18px 20px;
  }
  .edu-card-icon { font-size:22px; margin-bottom:10px; }
  .edu-card-title { font-size:14px; font-weight:700; margin-bottom:6px; color:var(--text); }
  .edu-card-body { font-size:12px; color:var(--muted); line-height:1.7; }
  .edu-card.warn { border-color:rgba(245,166,35,0.3); }
  .edu-card.danger { border-color:rgba(224,92,92,0.3); }
  .edu-card.info  { border-color:rgba(79,195,247,0.2); }
  .highlight-text { color:var(--warn); font-weight:700; }
  .danger-text    { color:var(--danger); font-weight:700; }
  .edu-more {
    margin-top:16px; text-align:right;
  }
  .edu-more a { font-size:13px; color:var(--success); text-decoration:none; }

  /* ── Sections ── */
  section { max-width:1100px; margin:0 auto; padding:56px 24px; }
  .section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
  .section-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
    display:flex; align-items:center; gap:10px; }
  .section-title::before { content:''; display:inline-block; width:4px; height:18px;
    background:linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:2px; }
  .see-all { font-size:12px; color:var(--accent); text-decoration:none; }

  /* ── Brand Cards (Ranking) ── */
  .brand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
  .brand-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 18px; text-align:center; cursor:pointer;
    transition:transform .2s, border-color .2s;
  }
  .brand-card:hover { transform:translateY(-4px); border-color:rgba(79,195,247,0.3); }
  .brand-rank { font-family:'Space Grotesk',sans-serif; font-size:11px; color:var(--muted); margin-bottom:10px; }
  .brand-rank.r1 { color:#c9a227; }
  .brand-rank.r2 { color:#8d9399; }
  .brand-rank.r3 { color:#b36b3a; }
  .brand-icon { font-size:32px; margin-bottom:10px; }
  .brand-name { font-size:14px; font-weight:700; margin-bottom:4px; }
  .brand-country { font-size:11px; color:var(--muted); margin-bottom:10px; }
  .brand-stars { color:var(--warn); font-size:13px; letter-spacing:1px; }
  .brand-count { font-size:11px; color:var(--muted); margin-top:4px; }

  /* ── Review Cards ── */
  .review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
  .rev-card {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px; transition:border-color .2s, transform .2s; cursor:pointer;
  }
  .rev-card:hover { border-color:rgba(79,195,247,0.25); transform:translateY(-2px); }
  .rev-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .rev-brand-tag {
    background:rgba(79,195,247,0.1); color:var(--accent);
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
  }
  .rev-flavor { font-size:13px; font-weight:700; }
  .rev-body { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:14px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .rev-footer { display:flex; align-items:center; justify-content:space-between; }
  .rev-user { display:flex; align-items:center; gap:8px; }
  .avatar {
    width:26px; height:26px; border-radius:50%;
    background:var(--surface2); color:var(--accent);
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .rev-name { font-size:12px; color:var(--muted); }
  .rev-date { font-size:11px; color:var(--muted); }
  .rev-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .tag { font-size:11px; padding:3px 8px; border-radius:20px;
    background:var(--surface2); color:var(--muted); border:1px solid var(--border); }

  /* ── CTA ── */
  .cta-wrap {
    background:linear-gradient(135deg,var(--surface2),#1a1d2e);
    border:1px solid var(--border); border-radius:20px;
    padding:56px 40px; text-align:center; margin:0 24px 60px;
    max-width:1100px; margin-left:auto; margin-right:auto;
  }
  .cta-title { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; margin-bottom:10px; }
  .cta-sub { font-size:14px; color:var(--muted); margin-bottom:28px; }
  .btn-primary {
    background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0d0f14;
    border:none; padding:14px 36px; border-radius:50px;
    font-size:15px; font-weight:700; cursor:pointer; font-family:'Noto Sans JP',sans-serif;
    transition:opacity .2s, transform .15s; margin-right:12px;
  }
  .btn-primary:hover { opacity:.85; transform:translateY(-1px); }
  .btn-secondary {
    background:transparent; color:var(--muted); border:1px solid var(--border);
    padding:13px 28px; border-radius:50px; font-size:14px; cursor:pointer;
    font-family:'Noto Sans JP',sans-serif; transition:all .2s;
  }
  .btn-secondary:hover { border-color:rgba(255,255,255,0.2); color:var(--text); }

  /* ── Footer ── */
  footer { border-top:1px solid var(--border); padding:32px 24px; text-align:center; }
  footer a { font-size:12px; color:var(--muted); text-decoration:none; margin:0 10px; }
  footer a:hover { color:var(--text); }
  .footer-note { font-size:11px; color:var(--muted); margin-top:12px; line-height:1.7; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-brand-detail
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{--bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;--border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;--accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;--danger:#e05c5c;--success:#4caf82;--radius:14px;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* HEADER */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;flex-shrink:0;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.nav-cta:hover{opacity:.85 !important;background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;transition:background .2s;padding:8px;}
.hamburger:hover{background:var(--surface2);}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* MOBILE DRAWER */
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,0.65);}
.nav-drawer{position:absolute;top:0;right:-310px;width:290px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;padding:0 4px;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link svg{width:17px;height:17px;flex-shrink:0;opacity:.65;}
.link-badge{margin-left:auto;font-size:10px;background:var(--accent);color:#0d0f14;border-radius:20px;padding:2px 8px;font-weight:700;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;}
.drawer-cta svg{width:15px;height:15px;}

/* BREADCRUMB */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;overflow-x:auto;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;}
.breadcrumb a{color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb a svg{width:11px;height:11px;}

/* HERO */
.brand-hero{background:linear-gradient(135deg,#0d0f14 0%,#131824 60%,#0f1520 100%);border-bottom:1px solid var(--border);padding:40px 24px 0;position:relative;overflow:hidden;}
.brand-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(79,195,247,0.07) 0%,transparent 65%);pointer-events:none;}
.hero-inner{max-width:1100px;margin:0 auto;}
.hero-top{display:flex;align-items:flex-start;gap:22px;margin-bottom:30px;}
.brand-logo-wrap{position:relative;flex-shrink:0;}
.logo-ring{width:92px;height:92px;border-radius:22px;padding:2px;background:linear-gradient(135deg,var(--accent),var(--accent2));}
.logo-inner{width:100%;height:100%;border-radius:20px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:42px;}
.logo-rank{position:absolute;bottom:-6px;right:-6px;width:26px;height:26px;border-radius:50%;background:#c9a227;border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;}
.brand-meta{flex:1;min-width:0;}
.brand-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.badge{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
.badge svg{width:11px;height:11px;}
.badge-country{background:rgba(255,255,255,0.06);color:var(--muted);}
.badge-type{background:rgba(79,195,247,0.1);color:var(--accent);border:1px solid rgba(79,195,247,0.2);}
.badge-rank{background:rgba(201,162,39,0.15);color:#c9a227;border:1px solid rgba(201,162,39,0.3);}
.brand-name-h1{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;letter-spacing:-1.5px;margin-bottom:6px;}
.brand-tagline{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.6;}
.score-row{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.big-score{font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:700;color:var(--warn);line-height:1;}
.score-stars{color:var(--warn);font-size:20px;letter-spacing:2px;}
.score-count{font-size:12px;color:var(--muted);margin-top:3px;}
.brand-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s;}
.btn-primary svg{width:13px;height:13px;}
.btn-primary:hover{opacity:.85;}
.btn-ghost{background:var(--surface2);color:var(--muted);border:1px solid var(--border);padding:10px 14px;border-radius:10px;font-size:13px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:all .2s;}
.btn-ghost svg{width:13px;height:13px;}
.btn-ghost:hover{border-color:rgba(255,255,255,0.2);color:var(--text);}

/* Quick stats */
.quick-stats{display:flex;gap:0;border-top:1px solid var(--border);}
.qs-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;border-right:1px solid var(--border);}
.qs-item:last-child{border-right:none;}
.qs-num{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--accent);}
.qs-label{font-size:10px;color:var(--muted);}

/* Tab nav */
.tab-nav{display:flex;border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tab-nav::-webkit-scrollbar{display:none;}
.tab{padding:13px 18px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.tab svg{width:13px;height:13px;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* LAYOUT */
.main-wrap{max-width:1100px;margin:0 auto;padding:28px 24px 80px;display:grid;grid-template-columns:1fr 285px;gap:22px;align-items:start;}

/* SECTION */
.section{margin-bottom:22px;}
.section-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;flex-shrink:0;}
.section-title svg{width:15px;height:15px;opacity:.7;}

/* RATING CARD */
.rating-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.rating-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px;}
.ri{background:var(--surface2);border-radius:10px;padding:12px 13px;display:flex;align-items:center;gap:11px;}
.ri-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ri-icon svg{width:15px;height:15px;}
.ri-label{font-size:11px;color:var(--muted);margin-bottom:4px;}
.ri-bar-row{display:flex;align-items:center;gap:7px;}
.ri-bar{flex:1;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;}
.ri-fill{height:100%;background:linear-gradient(90deg,var(--warn),#f7c94a);border-radius:2px;}
.ri-score{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--warn);flex-shrink:0;}
.dist-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.dist-label{font-size:12px;color:var(--muted);width:28px;text-align:right;flex-shrink:0;}
.dist-bar-wrap{flex:1;height:7px;background:var(--surface2);border-radius:4px;overflow:hidden;}
.dist-bar{height:100%;background:var(--warn);border-radius:4px;}
.dist-count{font-size:11px;color:var(--muted);width:42px;text-align:right;flex-shrink:0;}

/* ACCORDION */
.accordion{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:22px;}
.acc-item{border-bottom:1px solid var(--border);}
.acc-item:last-child{border-bottom:none;}
.acc-trigger{width:100%;background:none;border:none;padding:15px 18px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;transition:background .15s;color:var(--text);font-family:'Noto Sans JP',sans-serif;}
.acc-trigger:hover{background:rgba(255,255,255,0.02);}
.acc-ticon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;}
.acc-ttext{flex:1;min-width:0;}
.acc-ttitle{font-size:14px;font-weight:700;margin-bottom:1px;}
.acc-tsub{font-size:11px;color:var(--muted);}
.acc-tmeta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.acc-pill{font-size:11px;background:var(--surface2);color:var(--muted);border-radius:20px;padding:3px 10px;}
.acc-chev{width:15px;height:15px;color:var(--muted);transition:transform .28s;flex-shrink:0;}
.acc-trigger.open .acc-chev{transform:rotate(180deg);}
.acc-body{display:none;padding:0 18px 18px;}
.acc-body.open{display:block;}

/* FLAVOR GRID */
.flavor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-top:2px;}
.flavor-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:13px 10px;cursor:pointer;transition:all .2s;text-align:center;}
.flavor-card:hover{border-color:rgba(79,195,247,0.4);transform:translateY(-2px);}
.flavor-card.top{border-color:rgba(201,162,39,0.3);background:rgba(201,162,39,0.04);}
.fc-badge{font-size:9px;background:rgba(201,162,39,0.15);color:#c9a227;border-radius:20px;padding:2px 7px;margin-bottom:5px;display:inline-block;}
.fc-img{font-size:26px;margin-bottom:6px;display:block;}
.fc-name{font-size:12px;font-weight:700;margin-bottom:3px;line-height:1.3;}
.fc-stars{color:var(--warn);font-size:11px;}
.fc-count{font-size:10px;color:var(--muted);margin-top:2px;}

/* SPEC TABLE */
.spec-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.spec-row:last-child{border-bottom:none;}
.spec-key{color:var(--muted);display:flex;align-items:center;gap:7px;}
.spec-key svg{width:13px;height:13px;opacity:.55;}

/* BUY GUIDE */
.guide-item{background:var(--surface2);border-radius:10px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;}
.guide-item:last-child{margin-bottom:0;}
.guide-item-icon{font-size:18px;flex-shrink:0;}
.guide-item-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
.guide-item-desc{font-size:12px;color:var(--muted);line-height:1.7;}
.guide-danger{background:rgba(224,92,92,0.07);border:1px solid rgba(224,92,92,0.2);}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.filter-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 11px;color:var(--text);font-size:12px;font-family:'Noto Sans JP',sans-serif;outline:none;cursor:pointer;}
.filter-count{font-size:12px;color:var(--muted);margin-left:auto;}

/* REVIEW CARDS */
.review-list{display:flex;flex-direction:column;gap:11px;}
.rev-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:border-color .2s;}
.rev-card:hover{border-color:rgba(79,195,247,0.2);}
.rev-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:10px;}
.rev-user{display:flex;align-items:center;gap:9px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--accent);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border);}
.rev-name{font-size:13px;font-weight:700;}
.rev-date{font-size:11px;color:var(--muted);}
.rev-score-pill{background:var(--surface2);border-radius:10px;padding:6px 12px;text-align:center;flex-shrink:0;}
.rsn{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--warn);line-height:1;}
.rss{color:var(--warn);font-size:10px;}
.rev-flavor{display:inline-flex;align-items:center;gap:5px;background:rgba(79,195,247,0.08);color:var(--accent);border:1px solid rgba(79,195,247,0.15);border-radius:6px;font-size:11px;padding:4px 10px;margin-bottom:8px;}
.sub-scores{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.sub-score{font-size:11px;color:var(--muted);}
.sub-score span{color:var(--warn);}
.rev-body{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:10px;}
.rev-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.rev-tag{font-size:11px;padding:3px 8px;border-radius:20px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);}
.rev-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.verified{font-size:11px;color:var(--success);display:flex;align-items:center;gap:4px;}
.verified svg{width:11px;height:11px;}
.helpful{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer;margin-left:auto;transition:color .2s;}
.helpful:hover{color:var(--accent);}
.helpful svg{width:12px;height:12px;}
.report-btn{font-size:11px;color:var(--muted);cursor:pointer;background:none;border:none;font-family:'Noto Sans JP',sans-serif;}
.report-btn:hover{color:var(--danger);}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:18px;}
.page-btn{min-width:36px;height:36px;padding:0 8px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.page-btn:hover{border-color:rgba(79,195,247,0.4);color:var(--accent);}
.page-btn.active{background:var(--accent);color:#0d0f14;border-color:var(--accent);font-weight:700;}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:14px;}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.side-title{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.side-title svg{width:13px;height:13px;}
.sim-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s;}
.sim-item:last-child{border-bottom:none;}
.sim-item:hover{opacity:.7;}
.sim-icon{width:38px;height:38px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.sim-name{font-size:13px;font-weight:700;}
.sim-score{font-size:11px;color:var(--warn);}
.sim-arrow{margin-left:auto;color:var(--muted);}
.sim-arrow svg{width:13px;height:13px;}

/* RESPONSIVE */
@media(max-width:760px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .main-wrap{grid-template-columns:1fr;padding:18px 16px 60px;}
  .brand-name-h1{font-size:28px;}
  .big-score{font-size:42px;}
  .logo-ring{width:76px;height:76px;}
  .logo-inner{font-size:34px;}
  .rating-grid{grid-template-columns:1fr;}
  .hero-top{gap:14px;}
  .quick-stats{overflow-x:auto;}
  .qs-item{min-width:72px;}
}
@media(max-width:480px){
  .brand-hero{padding:24px 16px 0;}
  .brand-actions .btn-ghost span{display:none;}
  .quick-stats{display:grid;grid-template-columns:1fr 1fr;}
  .qs-item{border-right:1px solid var(--border) !important;border-bottom:1px solid var(--border);}
  .qs-item:nth-child(2n){border-right:none !important;}
  .qs-item:nth-child(3),.qs-item:nth-child(4){border-bottom:none;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-brand-list
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* ── Header ── */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--accent);background:var(--surface2);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--accent);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

/* ── Breadcrumb ── */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ── Hero ── */
.page-hero{padding:48px 24px 40px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 120%,rgba(124,111,247,.07) 0%,transparent 65%);
    pointer-events:none;
  }
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(124,111,247,.1);border:1px solid rgba(124,111,247,.2);border-radius:50px;padding:5px 14px;font-size:12px;color:var(--accent2);margin-bottom:14px;}
.hero-eyebrow svg{width:12px;height:12px;}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-1px;margin-bottom:10px;}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:32px;max-width:520px;margin-left:auto;margin-right:auto;}
.hero-stats{display:flex;justify-content:center;gap:36px;}
.hs-item{text-align:center;}
.hs-num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--accent2);}
.hs-label{font-size:11px;color:var(--muted);}

/* ── Filter / sort bar ── */
.filter-wrap{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:57px;z-index:100;}
.filter-inner{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:180px;}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none;}
.search-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 14px 9px 36px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}
.search-input:focus{border-color:rgba(124,111,247,.4);}
.search-input::placeholder{color:var(--muted);}
.fselect{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;outline:none;cursor:pointer;}
.result-count{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap;}

/* ── Type tabs ── */
.type-tabs-wrap{background:var(--surface);border-bottom:1px solid var(--border);}
.type-tabs{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none;}
.type-tabs::-webkit-scrollbar{display:none;}
.type-tab{display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.type-tab:hover{color:var(--text);}
.type-tab.active{color:var(--accent2);border-bottom-color:var(--accent2);}
.type-tab-icon{font-size:15px;}
.type-tab-count{font-size:10px;background:var(--surface2);border-radius:20px;padding:2px 7px;color:var(--muted);}
.type-tab.active .type-tab-count{background:rgba(124,111,247,.15);color:var(--accent2);}

/* ── Main ── */
.main-wrap{max-width:1100px;margin:0 auto;padding:28px 24px 80px;}

/* ── Compare bar ── */
.compare-bar{
  display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid rgba(124,111,247,.35);
  border-radius:50px;padding:12px 20px;z-index:150;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  align-items:center;gap:12px;white-space:nowrap;
}
.compare-bar.show{display:flex;}
.compare-icons{display:flex;gap:6px;}
.compare-slot{width:32px;height:32px;border-radius:8px;background:var(--surface2);border:1.5px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:16px;}
.compare-slot.filled{border-color:var(--accent2);background:rgba(124,111,247,.1);}
.compare-label{font-size:13px;color:var(--muted);}
.btn-compare{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0d0f14;border:none;padding:9px 20px;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}
.btn-compare-clear{font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;font-family:'Noto Sans JP',sans-serif;}
.btn-compare-clear:hover{color:var(--danger);}

/* ── Section title ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--accent2),var(--accent));border-radius:2px;}
.view-toggle{display:flex;gap:4px;}
.view-btn{width:32px;height:32px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.view-btn svg{width:14px;height:14px;color:var(--muted);}
.view-btn.active{border-color:rgba(124,111,247,.4);background:rgba(124,111,247,.1);}
.view-btn.active svg{color:var(--accent2);}

/* ── Brand grid (card view) ── */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.brand-grid.list-view{grid-template-columns:1fr;}

/* ── Brand card ── */
.brand-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  position:relative;
}
.brand-card:hover{transform:translateY(-3px);border-color:rgba(124,111,247,.35);box-shadow:0 8px 32px rgba(0,0,0,.2);}
.brand-card.rank-1{border-color:rgba(201,162,39,.3);}
.brand-card.rank-2{border-color:rgba(141,147,153,.2);}
.brand-card.rank-3{border-color:rgba(179,107,58,.2);}
.brand-card.in-compare{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(124,111,247,.25);}

/* Rank badge */
.rank-badge{position:absolute;top:12px;left:12px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;}
.rank-1-badge{background:rgba(201,162,39,.15);color:#c9a227;border:1px solid rgba(201,162,39,.3);}
.rank-2-badge{background:rgba(141,147,153,.1);color:#8d9399;border:1px solid rgba(141,147,153,.2);}
.rank-3-badge{background:rgba(179,107,58,.12);color:#b36b3a;border:1px solid rgba(179,107,58,.2);}
.new-badge{background:rgba(124,111,247,.15);color:var(--accent2);border:1px solid rgba(124,111,247,.3);}

/* Card header */
.bc-head{padding:20px 20px 0;display:flex;align-items:flex-start;gap:14px;}
.bc-logo{width:64px;height:64px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;position:relative;}
.bc-logo-ring{width:64px;height:64px;border-radius:16px;padding:1.5px;background:linear-gradient(135deg,var(--accent2),var(--accent));flex-shrink:0;}
.bc-logo-inner{width:100%;height:100%;border-radius:14px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:30px;}
.bc-info{flex:1;min-width:0;}
.bc-name{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-country{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.bc-country svg{width:11px;height:11px;}
.bc-score-row{display:flex;align-items:center;gap:8px;}
.bc-score{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--warn);}
.bc-stars{color:var(--warn);font-size:13px;letter-spacing:1px;}
.bc-count{font-size:11px;color:var(--muted);}

/* Rating bars */
.bc-ratings{padding:14px 20px;display:flex;flex-direction:column;gap:6px;}
.bc-rating-row{display:flex;align-items:center;gap:8px;}
.bc-rating-label{font-size:11px;color:var(--muted);width:68px;flex-shrink:0;}
.bc-rating-bar{flex:1;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;}
.bc-rating-fill{height:100%;background:linear-gradient(90deg,var(--warn),#f7c94a);border-radius:2px;}
.bc-rating-score{font-size:11px;color:var(--warn);font-weight:700;width:26px;text-align:right;flex-shrink:0;}

/* Tags / type */
.bc-tags{padding:0 20px 14px;display:flex;flex-wrap:wrap;gap:6px;}
.bc-tag{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);}
.bc-tag.type{background:rgba(124,111,247,.08);border-color:rgba(124,111,247,.2);color:var(--accent2);}

/* Flavor preview */
.bc-flavors{padding:0 20px 14px;display:flex;gap:6px;flex-wrap:wrap;}
.bc-flavor-chip{display:flex;align-items:center;gap:4px;background:var(--surface2);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--muted);}
.bc-flavor-more{font-size:11px;color:var(--accent);padding:4px 10px;cursor:pointer;}

/* Card footer */
.bc-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.btn-detail{font-size:12px;color:var(--accent2);display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:'Noto Sans JP',sans-serif;padding:0;transition:opacity .2s;}
.btn-detail:hover{opacity:.75;}
.btn-detail svg{width:12px;height:12px;}
.btn-compare-add{font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;color:var(--muted);transition:all .2s;display:flex;align-items:center;gap:5px;}
.btn-compare-add svg{width:11px;height:11px;}
.btn-compare-add:hover{border-color:rgba(124,111,247,.4);color:var(--accent2);}
.btn-compare-add.added{border-color:var(--accent2);background:rgba(124,111,247,.1);color:var(--accent2);}

/* List view card overrides */
.brand-grid.list-view .brand-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;}
.brand-grid.list-view .bc-head{padding:16px;flex-shrink:0;border-right:1px solid var(--border);}
.brand-grid.list-view .bc-ratings{padding:14px 20px;border-right:1px solid var(--border);}
.brand-grid.list-view .bc-tags{display:none;}
.brand-grid.list-view .bc-flavors{display:none;}
.brand-grid.list-view .bc-footer{flex-direction:column;align-items:stretch;padding:14px;min-width:140px;}
.brand-grid.list-view .rank-badge{top:auto;left:auto;position:static;margin-bottom:6px;display:inline-block;}

/* Empty */
.empty-state{text-align:center;padding:60px;color:var(--muted);}
.empty-icon{font-size:48px;margin-bottom:14px;}

/* ── Compare modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;max-width:860px;width:100%;max-height:90vh;overflow-y:auto;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.modal-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;}
.modal-close{background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;}
.compare-table{display:grid;gap:1px;background:var(--border);}
.compare-table.cols-2{grid-template-columns:auto 1fr 1fr;}
.compare-table.cols-3{grid-template-columns:auto 1fr 1fr 1fr;}
.ct-cell{background:var(--surface);padding:11px 14px;font-size:13px;}
.ct-head{background:var(--surface2);font-weight:700;font-size:12px;color:var(--muted);text-align:center;}
.ct-label{background:var(--surface2);color:var(--muted);font-size:12px;}
.ct-val{text-align:center;}
.ct-score{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--warn);}
.ct-best{background:rgba(124,111,247,.06);}
.ct-brand-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;}
.ct-brand-icon{font-size:28px;}
.ct-brand-name{font-size:14px;font-weight:700;}

/* ── Responsive ── */
@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .brand-grid{grid-template-columns:1fr;}
  .brand-grid.list-view .brand-card{grid-template-columns:1fr;}
  .brand-grid.list-view .bc-head{border-right:none;}
  .brand-grid.list-view .bc-ratings{border-right:none;}
  .hero-stats{gap:20px;}
  .compare-bar{bottom:16px;padding:10px 14px;gap:8px;font-size:12px;}
}
@media(max-width:480px){
  .page-hero{padding:32px 16px 28px;}
  .main-wrap{padding:20px 16px 60px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-flavor-list
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* ── Header ── */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--accent);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;padding:0 4px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--accent);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

/* ── Breadcrumb ── */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;overflow-x:auto;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ── Hero ── */
.page-hero{padding:44px 24px 36px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(79,195,247,.06) 0%,transparent 70%);
    pointer-events:none;
  }
.hero-label{display:inline-flex;align-items:center;gap:7px;background:rgba(79,195,247,.1);border:1px solid rgba(79,195,247,.2);border-radius:50px;padding:5px 14px;font-size:12px;color:var(--accent);margin-bottom:14px;letter-spacing:.5px;}
.hero-label svg{width:12px;height:12px;}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,4vw,40px);font-weight:700;margin-bottom:8px;letter-spacing:-1px;}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:28px;}
.hero-counts{display:flex;justify-content:center;gap:32px;}
.hc-item{text-align:center;}
.hc-num{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--accent);}
.hc-label{font-size:11px;color:var(--muted);}

/* ── Filter bar ── */
.filter-bar-wrap{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:57px;z-index:100;}
.filter-bar{max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search-wrap{position:relative;flex:1;min-width:200px;}
.search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);}
.search-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 14px 9px 36px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}
.search-input:focus{border-color:rgba(79,195,247,.4);}
.search-input::placeholder{color:var(--muted);}
.filter-select{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:9px 13px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;outline:none;cursor:pointer;transition:border-color .2s;}
.filter-select:focus{border-color:rgba(79,195,247,.4);}
.filter-count-badge{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto;}

/* ── Category tabs ── */
.cat-tabs-wrap{background:var(--surface);border-bottom:1px solid var(--border);}
.cat-tabs{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.cat-tab:hover{color:var(--text);}
.cat-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.cat-tab-icon{font-size:15px;}
.cat-tab-count{font-size:10px;background:var(--surface2);border-radius:20px;padding:2px 7px;color:var(--muted);}
.cat-tab.active .cat-tab-count{background:rgba(79,195,247,.15);color:var(--accent);}

/* ── Main layout ── */
.main-wrap{max-width:1100px;margin:0 auto;padding:28px 24px 80px;}

/* ── Section heading ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;}
.sort-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 11px;color:var(--muted);font-size:12px;font-family:'Noto Sans JP',sans-serif;outline:none;cursor:pointer;}

/* ── Flavor card grid ── */
.flavor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}

.flavor-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.flavor-card:hover{transform:translateY(-3px);border-color:rgba(79,195,247,.3);box-shadow:0 8px 32px rgba(0,0,0,.2);}
.flavor-card.trending{border-color:rgba(245,166,35,.25);}

/* Card header band */
.fc-band{padding:18px 18px 14px;display:flex;align-items:flex-start;gap:14px;position:relative;}
.fc-band-bg{position:absolute;inset:0;opacity:.04;}
.fc-emoji{font-size:36px;flex-shrink:0;position:relative;z-index:1;}
.fc-meta{flex:1;min-width:0;position:relative;z-index:1;}
.fc-name{font-size:16px;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-cat{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.fc-cat svg{width:11px;height:11px;}
.fc-stars-row{display:flex;align-items:center;gap:8px;}
.fc-stars{color:var(--warn);font-size:13px;letter-spacing:1px;}
.fc-score{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--warn);}
.fc-count{font-size:11px;color:var(--muted);}
.fc-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;border-radius:20px;padding:3px 9px;}
.fc-badge.hot{background:rgba(245,166,35,.15);color:var(--warn);border:1px solid rgba(245,166,35,.3);}
.fc-badge.new{background:rgba(124,111,247,.15);color:var(--accent2);border:1px solid rgba(124,111,247,.3);}

/* Brand pills in card */
.fc-brands{padding:0 18px 14px;display:flex;flex-wrap:wrap;gap:6px;}
.fc-brand-pill{display:flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--muted);transition:all .2s;cursor:pointer;}
.fc-brand-pill:hover{border-color:rgba(79,195,247,.35);color:var(--accent);}
.fc-brand-pill-icon{font-size:12px;}
.fc-brand-pill-score{color:var(--warn);}

/* Card footer */
.fc-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.fc-review-link{font-size:12px;color:var(--accent);display:flex;align-items:center;gap:5px;}
.fc-review-link svg{width:12px;height:12px;}
.fc-write-btn{font-size:11px;background:rgba(79,195,247,.08);color:var(--accent);border:1px solid rgba(79,195,247,.2);border-radius:6px;padding:5px 10px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;}
.fc-write-btn:hover{background:rgba(79,195,247,.15);}

/* ── Trending section ── */
.trending-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:28px;}
.trending-strip::-webkit-scrollbar{display:none;}
.trending-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid rgba(245,166,35,.2);border-radius:50px;padding:8px 16px;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.trending-pill:hover{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.04);}
.tp-icon{font-size:16px;}
.tp-name{font-size:13px;font-weight:700;}
.tp-count{font-size:11px;color:var(--muted);}
.tp-hot{font-size:10px;background:rgba(245,166,35,.15);color:var(--warn);border-radius:20px;padding:2px 7px;}

/* ── Empty state ── */
.empty-state{text-align:center;padding:60px 24px;color:var(--muted);}
.empty-icon{font-size:48px;margin-bottom:14px;}
.empty-text{font-size:15px;margin-bottom:8px;color:var(--text);}
.empty-sub{font-size:13px;}

/* ── Load more ── */
.load-more-wrap{text-align:center;margin-top:32px;}
.btn-load{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:13px 40px;border-radius:10px;font-size:14px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;display:inline-flex;align-items:center;gap:8px;}
.btn-load svg{width:14px;height:14px;}
.btn-load:hover{border-color:rgba(79,195,247,.4);color:var(--accent);}

/* ── Responsive ── */
@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .flavor-grid{grid-template-columns:1fr;}
  .filter-bar{gap:8px;}
  .filter-select{font-size:12px;padding:8px 10px;}
}
@media(max-width:480px){
  .hero-counts{gap:20px;}
  .page-hero{padding:32px 16px 24px;}
  .main-wrap{padding:20px 16px 60px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-knowledge
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
  --cat-law:#e05c5c;--cat-health:#4caf82;--cat-buy:#4fc3f7;--cat-youth:#f5a623;--cat-news:#7c6ff7;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* ── Header ── */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--success);background:rgba(76,175,130,.08);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--success);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

/* ── Breadcrumb ── */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ── Page hero ── */
.page-hero{padding:48px 24px 40px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(76,175,130,.07) 0%,transparent 65%);
    pointer-events:none;
  }
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(76,175,130,.1);border:1px solid rgba(76,175,130,.25);border-radius:50px;padding:5px 14px;font-size:12px;color:var(--success);margin-bottom:14px;}
.hero-eyebrow svg{width:12px;height:12px;}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.5vw,40px);font-weight:700;letter-spacing:-1px;margin-bottom:10px;}
.page-sub{font-size:14px;color:var(--muted);max-width:540px;margin:0 auto 28px;}
.hero-stat-row{display:flex;justify-content:center;gap:32px;}
.hs{text-align:center;}
.hs-num{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--success);}
.hs-label{font-size:11px;color:var(--muted);}

/* ── Category filter ── */
.cat-bar-wrap{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:57px;z-index:100;}
.cat-bar{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none;gap:0;}
.cat-bar::-webkit-scrollbar{display:none;}
.cat-btn{display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:'Noto Sans JP',sans-serif;}
.cat-btn:hover{color:var(--text);}
.cat-btn.active{font-weight:700;}
.cat-btn[data-cat="all"].active{color:var(--success);border-bottom-color:var(--success);}
.cat-btn[data-cat="law"].active{color:var(--cat-law);border-bottom-color:var(--cat-law);}
.cat-btn[data-cat="health"].active{color:var(--cat-health);border-bottom-color:var(--cat-health);}
.cat-btn[data-cat="buy"].active{color:var(--cat-buy);border-bottom-color:var(--cat-buy);}
.cat-btn[data-cat="youth"].active{color:var(--cat-youth);border-bottom-color:var(--cat-youth);}
.cat-btn[data-cat="news"].active{color:var(--cat-news);border-bottom-color:var(--cat-news);}
.cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── Layout ── */
.main-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:1fr 290px;gap:28px;align-items:start;}

/* ── Featured article (top) ── */
.featured-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:all .2s;margin-bottom:24px;}
.featured-card:hover{border-color:rgba(76,175,130,.35);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2);}
.fc-img-area{height:200px;background:linear-gradient(135deg,#0f1a18 0%,#0d1f1b 60%,#0a1a16 100%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fc-img-area::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(76,175,130,.15) 0%,transparent 60%);
    pointer-events:none;
  }
.fc-img-emoji{font-size:72px;position:relative;z-index:1;}
.fc-featured-badge{position:absolute;top:14px;left:14px;background:var(--success);color:#0d0f14;font-size:11px;font-weight:700;border-radius:20px;padding:4px 12px;z-index:2;}
.fc-body{padding:22px 24px;}
.fc-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cat-pill{font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;}
.fc-title{font-family:'Noto Serif JP',serif;font-size:20px;font-weight:700;line-height:1.5;margin-bottom:8px;}
.fc-excerpt{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:14px;}
.fc-meta{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);}
.fc-meta svg{width:11px;height:11px;}
.fc-meta-item{display:flex;align-items:center;gap:4px;}
.read-more{margin-left:auto;font-size:12px;color:var(--accent);display:flex;align-items:center;gap:4px;}
.read-more svg{width:12px;height:12px;}

/* ── Article list ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--success),#2ecc71);border-radius:2px;}
.sort-select{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 11px;color:var(--muted);font-size:12px;font-family:'Noto Sans JP',sans-serif;outline:none;cursor:pointer;}

.article-list{display:flex;flex-direction:column;gap:12px;}
.article-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;display:flex;gap:0;}
.article-card:hover{border-color:rgba(79,195,247,.25);transform:translateX(3px);}
.ac-thumb{width:120px;min-height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;overflow:hidden;}
.ac-body{flex:1;padding:16px 18px;min-width:0;}
.ac-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.ac-title{font-size:14px;font-weight:700;line-height:1.55;margin-bottom:6px;}
.ac-excerpt{font-size:12px;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.ac-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);}
.ac-meta svg{width:10px;height:10px;}
.ac-meta-item{display:flex;align-items:center;gap:3px;}
.ac-new{font-size:10px;background:rgba(124,111,247,.15);color:var(--accent2);border-radius:20px;padding:2px 8px;font-weight:700;}

/* Load more */
.load-more-wrap{text-align:center;margin-top:20px;}
.btn-load{background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:12px 36px;border-radius:10px;font-size:13px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;display:inline-flex;align-items:center;gap:7px;}
.btn-load svg{width:13px;height:13px;}
.btn-load:hover{border-color:rgba(79,195,247,.4);color:var(--accent);}

/* Empty */
.empty-state{text-align:center;padding:48px;color:var(--muted);}
.empty-icon{font-size:40px;margin-bottom:12px;}

/* ── Sidebar ── */
.sidebar{display:flex;flex-direction:column;gap:14px;}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.side-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.side-title svg{width:13px;height:13px;opacity:.7;}
.side-title.green{color:var(--success);}
.side-title.warn{color:var(--warn);}

/* Popular articles */
.pop-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s;}
.pop-item:last-child{border-bottom:none;}
.pop-item:hover{opacity:.75;}
.pop-num{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--surface3);min-width:24px;flex-shrink:0;}
.pop-num.n1{color:var(--gold,#c9a227);}
.pop-num.n2{color:var(--silver,#8d9399);}
.pop-num.n3{color:var(--bronze,#b36b3a);}
.pop-title{font-size:12px;font-weight:700;line-height:1.5;margin-bottom:2px;}
.pop-meta{font-size:10px;color:var(--muted);}

/* Tags cloud */
.tags-cloud{display:flex;flex-wrap:wrap;gap:7px;}
.tag-cloud-item{font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 11px;cursor:pointer;color:var(--muted);transition:all .2s;}
.tag-cloud-item:hover{border-color:rgba(79,195,247,.4);color:var(--accent);}

/* Newsletter */
.newsletter-card{background:linear-gradient(135deg,rgba(76,175,130,.1),rgba(79,195,247,.06));border:1px solid rgba(76,175,130,.2);border-radius:var(--radius);padding:18px;}
.nl-title{font-size:14px;font-weight:700;margin-bottom:6px;}
.nl-sub{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.7;}
.nl-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 13px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;outline:none;margin-bottom:8px;}
.nl-input:focus{border-color:rgba(76,175,130,.4);}
.btn-nl{width:100%;background:var(--success);color:#0d0f14;border:none;padding:10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}

/* Warning box in sidebar */
.warn-box{background:rgba(224,92,92,.05);border:1px solid rgba(224,92,92,.2);border-radius:10px;padding:13px 14px;font-size:12px;color:#e8a0a0;line-height:1.8;}
.warn-box strong{color:var(--danger);}

/* ── CATEGORY COLOR HELPER ── */
.cat-pill.law{background:rgba(224,92,92,.15);color:var(--cat-law);}
.cat-pill.health{background:rgba(76,175,130,.15);color:var(--cat-health);}
.cat-pill.buy{background:rgba(79,195,247,.12);color:var(--cat-buy);}
.cat-pill.youth{background:rgba(245,166,35,.15);color:var(--cat-youth);}
.cat-pill.news{background:rgba(124,111,247,.15);color:var(--cat-news);}
.ac-thumb.law{background:rgba(224,92,92,.08);}
.ac-thumb.health{background:rgba(76,175,130,.08);}
.ac-thumb.buy{background:rgba(79,195,247,.06);}
.ac-thumb.youth{background:rgba(245,166,35,.08);}
.ac-thumb.news{background:rgba(124,111,247,.08);}

/* ── Responsive ── */
@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .main-wrap{grid-template-columns:1fr;padding:20px 16px 60px;}
  .ac-thumb{width:90px;font-size:32px;}
  .hero-stat-row{gap:20px;}
}
@media(max-width:480px){
  .page-hero{padding:32px 16px 28px;}
  .fc-title{font-size:17px;}
  .ac-excerpt{display:none;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-knowledge-article
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--success);background:rgba(76,175,130,.08);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--success);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* Article layout */
.article-wrap{max-width:1100px;margin:0 auto;padding:36px 24px 80px;display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;}

/* Article main */
.article-hero{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin-bottom:24px;}
.article-hero-img{height:220px;background:linear-gradient(135deg,#0f1a10 0%,#0a1208 60%,#0d1f10 100%);display:flex;align-items:center;justify-content:center;position:relative;}
.article-hero-img::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(224,92,92,.12) 0%,transparent 60%);
    pointer-events:none;
  }
.article-hero-emoji{font-size:80px;position:relative;z-index:1;}
.article-hero-body{padding:28px 32px;}
.article-cat-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.cat-pill{font-size:11px;font-weight:700;border-radius:20px;padding:4px 12px;}
.cat-pill.law{background:rgba(224,92,92,.15);color:var(--danger);}
.article-title{font-family:'Noto Serif JP',serif;font-size:clamp(20px,3vw,28px);font-weight:700;line-height:1.5;margin-bottom:16px;}
.article-meta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.am-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);}
.am-item svg{width:12px;height:12px;}
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.share-label{font-size:12px;color:var(--muted);}
.share-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;color:var(--muted);transition:all .2s;font-family:'Noto Sans JP',sans-serif;}
.share-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2);}
.share-btn svg{width:12px;height:12px;}

/* Article body */
.article-body{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;margin-bottom:20px;}
.article-body h2{font-family:'Noto Serif JP',serif;font-size:20px;font-weight:700;margin:32px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-size:16px;font-weight:700;margin:20px 0 10px;color:var(--accent);}
.article-body p{font-size:14px;line-height:1.9;margin-bottom:14px;color:var(--muted);}
.article-body p strong{color:var(--text);}
.article-body ul,.article-body ol{padding-left:20px;margin-bottom:14px;}
.article-body li{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:4px;}
.article-body li strong{color:var(--text);}

/* Callout boxes */
.callout{border-radius:12px;padding:16px 18px;margin:20px 0;}
.callout.danger{background:rgba(224,92,92,.08);border:1px solid rgba(224,92,92,.25);}
.callout.warn{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.2);}
.callout.info{background:rgba(79,195,247,.07);border:1px solid rgba(79,195,247,.18);}
.callout.success{background:rgba(76,175,130,.07);border:1px solid rgba(76,175,130,.18);}
.callout-title{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.callout.danger .callout-title{color:var(--danger);}
.callout.warn .callout-title{color:var(--warn);}
.callout.info .callout-title{color:var(--accent);}
.callout.success .callout-title{color:var(--success);}
.callout p,.callout li{font-size:13px;line-height:1.8;color:var(--muted);}
.callout strong{color:var(--text);}

/* Table */
.law-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;}
.law-table th{background:var(--surface2);padding:10px 14px;text-align:left;font-weight:700;border:1px solid var(--border);color:var(--text);}
.law-table td{padding:10px 14px;border:1px solid var(--border);color:var(--muted);vertical-align:top;}
.law-table tr:hover td{background:rgba(255,255,255,.02);}
.law-table .danger-text{color:var(--danger);font-weight:700;}

/* Progress / reading bar */
.reading-progress{position:fixed;top:57px;left:0;right:0;height:2px;background:var(--border);z-index:199;}
.reading-progress-bar{height:100%;background:linear-gradient(90deg,var(--success),var(--accent));width:0%;transition:width .1s;}

/* TOC */
.toc{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:24px;}
.toc-title{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.toc-title svg{width:13px;height:13px;}
.toc-list{display:flex;flex-direction:column;gap:4px;}
.toc-item{font-size:13px;color:var(--muted);cursor:pointer;padding:5px 8px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:7px;}
.toc-item:hover{background:rgba(255,255,255,.04);color:var(--accent);}
.toc-item svg{width:11px;height:11px;flex-shrink:0;}
.toc-item.active{color:var(--accent);}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:14px;}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.side-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.side-title svg{width:13px;height:13px;opacity:.7;}
.side-title.green{color:var(--success);}

.related-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s;}
.related-item:last-child{border-bottom:none;}
.related-item:hover{opacity:.75;}
.ri-emoji{font-size:22px;flex-shrink:0;}
.ri-title{font-size:12px;font-weight:700;line-height:1.5;margin-bottom:2px;}
.ri-cat{font-size:10px;color:var(--muted);}

.rating-card-small{background:linear-gradient(135deg,rgba(76,175,130,.08),rgba(79,195,247,.05));border:1px solid rgba(76,175,130,.2);border-radius:12px;padding:16px;text-align:center;}
.rcs-title{font-size:13px;font-weight:700;margin-bottom:8px;}
.rcs-stars{font-size:22px;color:var(--warn);letter-spacing:3px;margin-bottom:6px;}
.rcs-count{font-size:11px;color:var(--muted);}
.btn-rate{width:100%;background:var(--success);color:#0d0f14;border:none;padding:10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;margin-top:10px;}

.warn-box{background:rgba(224,92,92,.05);border:1px solid rgba(224,92,92,.2);border-radius:10px;padding:13px 14px;font-size:12px;color:#e8a0a0;line-height:1.8;}
.warn-box strong{color:var(--danger);}

/* Back to list */
.back-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 20px;font-size:13px;color:var(--muted);cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;text-decoration:none;}
.back-btn:hover{border-color:rgba(79,195,247,.35);color:var(--accent);}
.back-btn svg{width:14px;height:14px;}

@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .article-wrap{grid-template-columns:1fr;padding:20px 16px 60px;}
  .article-hero-body{padding:20px;}
  .article-body{padding:20px;}
  .article-hero-img{height:160px;}
  .article-hero-emoji{font-size:60px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-ranking
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
  --gold:#c9a227;--silver:#8d9399;--bronze:#b36b3a;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* ── Header ── */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--warn);background:rgba(245,166,35,.08);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--warn);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

/* ── Breadcrumb ── */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ── Page hero ── */
.page-hero{padding:48px 24px 40px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 120%,rgba(245,166,35,.07) 0%,transparent 65%);
    pointer-events:none;
  }
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:50px;padding:5px 14px;font-size:12px;color:var(--warn);margin-bottom:14px;}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw,44px);font-weight:700;letter-spacing:-1.5px;margin-bottom:10px;}
.page-title .year{color:var(--warn);}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:28px;}
.update-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(76,175,130,.1);border:1px solid rgba(76,175,130,.2);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--success);}
.update-badge svg{width:11px;height:11px;}

/* ── Ranking tabs ── */
.rank-tabs-wrap{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:57px;z-index:100;}
.rank-tabs{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none;}
.rank-tabs::-webkit-scrollbar{display:none;}
.rank-tab{display:flex;align-items:center;gap:7px;padding:13px 18px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;}
.rank-tab svg{width:14px;height:14px;}
.rank-tab:hover{color:var(--text);}
.rank-tab.active{color:var(--warn);border-bottom-color:var(--warn);}

/* ── Main layout ── */
.main-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;}

/* ── Section title ── */
.section-title{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--warn),#f7a823);border-radius:2px;}
.section-title svg{width:15px;height:15px;opacity:.7;}

/* ── Podium (top 3) ── */
.podium-wrap{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin-bottom:28px;padding:24px 16px 0;}
.podium-item{display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;transition:transform .2s;}
.podium-item:hover{transform:translateY(-4px);}
.podium-item.p1{order:2;}
.podium-item.p2{order:1;}
.podium-item.p3{order:3;}
.podium-avatar{width:72px;height:72px;border-radius:18px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:8px;border:2px solid transparent;position:relative;}
.podium-item.p1 .podium-avatar{width:88px;height:88px;border-color:var(--gold);box-shadow:0 0 24px rgba(201,162,39,.25);}
.podium-item.p2 .podium-avatar{border-color:var(--silver);}
.podium-item.p3 .podium-avatar{border-color:var(--bronze);}
.podium-crown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:20px;}
.podium-name{font-size:13px;font-weight:700;margin-bottom:3px;}
.podium-score{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--warn);margin-bottom:3px;}
.podium-count{font-size:10px;color:var(--muted);}
.podium-base{width:100%;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-top:10px;}
.p1 .podium-base{height:80px;background:linear-gradient(180deg,rgba(201,162,39,.25),rgba(201,162,39,.1));color:var(--gold);}
.p2 .podium-base{height:56px;background:linear-gradient(180deg,rgba(141,147,153,.2),rgba(141,147,153,.05));color:var(--silver);}
.p3 .podium-base{height:44px;background:linear-gradient(180deg,rgba(179,107,58,.2),rgba(179,107,58,.05));color:var(--bronze);}

/* ── Ranking list ── */
.rank-list{display:flex;flex-direction:column;gap:10px;}
.rank-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all .2s;
}
.rank-item:hover{border-color:rgba(245,166,35,.3);transform:translateX(4px);}
.rank-item.rank-1{border-color:rgba(201,162,39,.3);background:rgba(201,162,39,.03);}
.rank-item.rank-2{border-color:rgba(141,147,153,.2);}
.rank-item.rank-3{border-color:rgba(179,107,58,.2);}

/* Rank number */
.ri-rank{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;min-width:36px;text-align:center;}
.ri-rank.r1{color:var(--gold);}
.ri-rank.r2{color:var(--silver);}
.ri-rank.r3{color:var(--bronze);}
.ri-rank.r-other{color:var(--surface3);font-size:16px;}

/* Change indicator */
.ri-change{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:18px;}
.ri-change svg{width:12px;height:12px;}
.ri-change-num{font-size:9px;font-weight:700;}
.change-up{color:var(--success);}
.change-down{color:var(--danger);}
.change-same{color:var(--muted);}

.ri-icon{font-size:28px;flex-shrink:0;}
.ri-info{flex:1;min-width:0;}
.ri-name{font-size:15px;font-weight:700;margin-bottom:2px;}
.ri-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ri-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border);display:inline-block;}
.ri-score-col{text-align:right;flex-shrink:0;}
.ri-score{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--warn);line-height:1;}
.ri-stars{color:var(--warn);font-size:11px;letter-spacing:1px;}
.ri-review-count{font-size:11px;color:var(--muted);}

/* Admin badge on item */
.admin-pin{font-size:10px;background:rgba(124,111,247,.15);color:var(--accent2);border:1px solid rgba(124,111,247,.25);border-radius:20px;padding:2px 8px;margin-left:6px;}

/* ── Sidebar ── */
.sidebar{display:flex;flex-direction:column;gap:14px;}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.side-title{font-size:13px;font-weight:700;color:var(--warn);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.side-title svg{width:13px;height:13px;}

.flavor-rank-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.flavor-rank-item:last-child{border-bottom:none;}
.fr-num{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;min-width:22px;}
.fr-num.r1{color:var(--gold);}
.fr-num.r2{color:var(--silver);}
.fr-num.r3{color:var(--bronze);}
.fr-num.ro{color:var(--muted);}
.fr-icon{font-size:18px;flex-shrink:0;}
.fr-name{font-size:13px;font-weight:700;flex:1;}
.fr-score{font-size:12px;color:var(--warn);}
.fr-count{font-size:10px;color:var(--muted);}

.note-box{background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.15);border-radius:10px;padding:13px 14px;font-size:12px;color:var(--muted);line-height:1.8;}
.note-box strong{color:var(--warn);}

/* ── ADMIN PANEL ── */
.admin-toggle-wrap{max-width:1100px;margin:0 auto;padding:0 24px 16px;display:flex;justify-content:flex-end;}
.btn-admin-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid rgba(124,111,247,.3);color:var(--accent2);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;}
.btn-admin-toggle:hover{background:rgba(124,111,247,.08);}
.btn-admin-toggle svg{width:14px;height:14px;}

.admin-panel{background:var(--surface);border:1px solid rgba(124,111,247,.25);border-radius:20px;margin:0 auto 28px;max-width:1100px;overflow:hidden;display:none;}
.admin-panel.open{display:block;}

.ap-header{background:linear-gradient(90deg,rgba(124,111,247,.12),rgba(79,195,247,.06));padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(124,111,247,.2);}
.ap-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--accent2);display:flex;align-items:center;gap:8px;}
.ap-title svg{width:16px;height:16px;}
.ap-subtitle{font-size:12px;color:var(--muted);margin-top:2px;}
.ap-actions{display:flex;gap:8px;align-items:center;}
.btn-ap{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;display:flex;align-items:center;gap:6px;border:none;}
.btn-ap svg{width:13px;height:13px;}
.btn-ap-reset{background:var(--surface2);color:var(--muted);border:1px solid var(--border) !important;}
.btn-ap-reset:hover{color:var(--danger);border-color:rgba(224,92,92,.3) !important;}
.btn-ap-save{background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0d0f14;}
.btn-ap-save:hover{opacity:.85;}

.ap-body{padding:20px 24px;}
.ap-mode-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.ap-mode-label{font-size:13px;font-weight:700;color:var(--text);}
.mode-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;color:var(--muted);transition:all .2s;}
.mode-btn.active{border-color:var(--accent2);background:rgba(124,111,247,.1);color:var(--accent2);font-weight:700;}
.mode-desc{font-size:11px;color:var(--muted);margin-left:auto;padding:8px 12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);}

/* Drag list */
.drag-list{display:flex;flex-direction:column;gap:8px;}
.drag-item{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  user-select:none;transition:all .15s;
}
.drag-item.dragging{opacity:.4;border-style:dashed;}
.drag-item.drag-over{border-color:var(--accent2);background:rgba(124,111,247,.08);}
.drag-handle{cursor:grab;color:var(--muted);display:flex;flex-direction:column;gap:3px;padding:4px;flex-shrink:0;}
.drag-handle:active{cursor:grabbing;}
.drag-handle span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px;}
.di-rank{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;min-width:28px;text-align:center;}
.di-rank.r1{color:var(--gold);}
.di-rank.r2{color:var(--silver);}
.di-rank.r3{color:var(--bronze);}
.di-rank.ro{color:var(--muted);}
.di-icon{font-size:22px;flex-shrink:0;}
.di-info{flex:1;}
.di-name{font-size:14px;font-weight:700;margin-bottom:2px;}
.di-score{font-size:11px;color:var(--warn);}
.di-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.di-pin-toggle{display:flex;align-items:center;gap:5px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;color:var(--muted);transition:all .2s;}
.di-pin-toggle.pinned{border-color:rgba(124,111,247,.4);background:rgba(124,111,247,.08);color:var(--accent2);}
.di-pin-toggle svg{width:11px;height:11px;}
.di-score-override{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.di-score-override input{width:52px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text);font-size:12px;font-family:'Noto Sans JP',sans-serif;outline:none;text-align:center;}
.di-score-override input:focus{border-color:rgba(124,111,247,.4);}
.di-auto-badge{font-size:10px;background:rgba(76,175,130,.1);color:var(--success);border:1px solid rgba(76,175,130,.2);border-radius:20px;padding:2px 8px;}

.ap-note{background:rgba(79,195,247,.05);border:1px solid rgba(79,195,247,.15);border-radius:10px;padding:13px 16px;font-size:12px;color:var(--muted);line-height:1.8;margin-top:16px;}
.ap-note strong{color:var(--accent);}

/* Save toast */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--success);color:#0d0f14;border-radius:50px;padding:11px 24px;font-size:13px;font-weight:700;z-index:500;opacity:0;transition:all .3s;pointer-events:none;display:flex;align-items:center;gap:7px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:14px;height:14px;}

@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .main-wrap{grid-template-columns:1fr;padding:20px 16px 60px;}
  .podium-wrap{gap:6px;padding:16px 8px 0;}
  .podium-avatar{width:60px;height:60px;font-size:26px;}
  .p1 .podium-avatar{width:72px;height:72px;}
  .ap-actions{flex-wrap:wrap;}
  .di-controls{flex-wrap:wrap;gap:6px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-review-form
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--border-focus:rgba(79,195,247,0.5);
  --text:#e8eaf0;--muted:#ffffff;--accent:#4fc3f7;--accent2:#7c6ff7;
  --warn:#f5a623;--danger:#e05c5c;--success:#4caf82;--radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;min-height:100vh;}

/* Header */
header{background:rgba(13,15,20,0.95);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:13px 24px;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* Page */
.page-wrap{max-width:820px;margin:0 auto;padding:44px 24px 80px;}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin-bottom:5px;}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:32px;}

/* Steps */
.steps{display:flex;margin-bottom:36px;}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;}
.step::after{content:'';position:absolute;top:15px;left:calc(50% + 18px);width:calc(100% - 36px);height:1px;background:var(--border);
    pointer-events:none;
  }
.step:last-child::after{display:none;}
.step-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--surface2);color:var(--muted);z-index:1;}
.step.done .step-num{background:var(--success);color:#0d0f14;border-color:var(--success);}
.step.active .step-num{background:var(--accent);color:#0d0f14;border-color:var(--accent);}
.step.done::after{background:var(--success);opacity:.3;}
.step-label{font-size:11px;color:var(--muted);white-space:nowrap;}
.step.active .step-label{color:var(--accent);font-weight:700;}
.step.done .step-label{color:var(--success);}

/* Layout */
.layout{display:grid;grid-template-columns:1fr 264px;gap:20px;align-items:start;}

/* Form card */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 32px;margin-bottom:14px;}
.form-section-title{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.form-section-title::before{content:'';width:3px;height:13px;background:var(--accent);border-radius:2px;}

/* Form elements */
.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.form-label .req{font-size:11px;background:rgba(224,92,92,.15);color:var(--danger);border-radius:4px;padding:2px 6px;margin-left:6px;font-weight:400;}
.form-label .opt{font-size:11px;color:var(--muted);margin-left:6px;font-weight:400;}
.form-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 15px;color:var(--text);font-size:14px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}
.form-input:focus{border-color:var(--border-focus);}
.form-input::placeholder{color:var(--muted);}
.form-textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:13px 15px;resize:vertical;min-height:130px;color:var(--text);font-size:14px;font-family:'Noto Sans JP',sans-serif;line-height:1.7;outline:none;transition:border-color .2s;}
.form-textarea:focus{border-color:var(--border-focus);}
.form-textarea::placeholder{color:var(--muted);}
.char-count{font-size:11px;color:var(--muted);text-align:right;margin-top:5px;}

/* Brand chips */
.brand-chips{display:flex;flex-wrap:wrap;gap:8px;}
.brand-chip{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 13px;display:flex;align-items:center;gap:7px;cursor:pointer;transition:all .2s;font-size:13px;color:var(--text);}
.brand-chip:hover{border-color:rgba(79,195,247,.35);}
.brand-chip.selected{border-color:var(--accent);background:rgba(79,195,247,.1);color:var(--accent);}
.brand-chip-icon{font-size:15px;}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLAVOR SUGGEST SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flavor-field-wrap{position:relative;}

/* Selected flavor pill (shown after selection) */
.flavor-selected{
  display:none;align-items:center;gap:10px;
  background:rgba(79,195,247,.08);border:1px solid rgba(79,195,247,.25);
  border-radius:10px;padding:10px 14px;margin-bottom:10px;
}
.flavor-selected.show{display:flex;}
.fs-icon{font-size:20px;}
.fs-name{font-size:14px;font-weight:700;color:var(--accent);}
.fs-meta{font-size:11px;color:var(--muted);}
.fs-clear{margin-left:auto;font-size:12px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s;background:none;border:none;font-family:'Noto Sans JP',sans-serif;}
.fs-clear:hover{background:rgba(224,92,92,.1);color:var(--danger);}

/* Input row */
.flavor-input-row{display:flex;gap:8px;align-items:flex-start;}
.flavor-input-wrap{position:relative;flex:1;}
.flavor-input-wrap svg.fi-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none;}
.flavor-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 15px 12px 40px;color:var(--text);font-size:14px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}
.flavor-input:focus{border-color:var(--border-focus);}
.flavor-input::placeholder{color:var(--muted);}
.flavor-input.has-value{border-color:rgba(79,195,247,.3);}

/* Suggest dropdown */
.suggest-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid rgba(79,195,247,.25);
  border-radius:12px;overflow:hidden;z-index:50;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  display:none;
}
.suggest-dropdown.open{display:block;}

.suggest-section-label{font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:10px 14px 6px;}

/* Existing flavor item */
.suggest-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;transition:background .15s;
}
.suggest-item:hover{background:var(--surface2);}
.suggest-item.keyboard-focus{background:var(--surface2);outline:none;}
.si-icon{font-size:18px;flex-shrink:0;}
.si-info{flex:1;min-width:0;}
.si-name{font-size:13px;font-weight:700;margin-bottom:1px;}
.si-meta{font-size:11px;color:var(--muted);}
.si-count{margin-left:auto;font-size:11px;background:rgba(79,195,247,.08);color:var(--accent);border-radius:20px;padding:2px 9px;flex-shrink:0;}
.si-match{color:var(--accent);}

/* New flavor item */
.suggest-new{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;transition:background .15s;
  border-top:1px solid var(--border);
}
.suggest-new:hover{background:rgba(124,111,247,.07);}
.sn-badge{font-size:10px;background:rgba(124,111,247,.15);color:var(--accent2);border-radius:20px;padding:3px 9px;font-weight:700;flex-shrink:0;}
.sn-name{font-size:13px;font-weight:700;}
.sn-sub{font-size:11px;color:var(--muted);}

/* No results */
.suggest-empty{padding:16px 14px;font-size:13px;color:var(--muted);text-align:center;}

/* Status indicator */
.flavor-status{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:7px;height:18px;}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.status-dot.existing{background:var(--success);}
.status-dot.new{background:var(--accent2);}
.status-dot.empty{background:var(--border);border:1px solid var(--muted);}
.status-dot.loading{background:var(--warn);animation:pulse .8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Popular flavors quick-select */
.popular-label{font-size:11px;color:var(--muted);margin-bottom:8px;}
.popular-chips{display:flex;flex-wrap:wrap;gap:6px;}
.pop-chip{display:flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;transition:all .2s;color:var(--muted);}
.pop-chip:hover{border-color:rgba(79,195,247,.4);color:var(--text);}
.pop-chip-icon{font-size:13px;}
.pop-chip-count{font-size:10px;color:var(--muted);margin-left:2px;}

/* ━━ Star rating ━━ */
.star-rating-wrap{display:flex;flex-direction:column;gap:8px;}
.star-row{display:flex;align-items:center;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 15px;transition:border-color .2s;}
.star-row:hover{border-color:rgba(79,195,247,.2);}
.star-row-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;font-size:14px;}
.star-row-label{font-size:13px;color:var(--muted);width:108px;flex-shrink:0;}
.stars-input{display:flex;gap:3px;}
.star-btn{font-size:22px;cursor:pointer;color:rgba(255,255,255,.1);transition:color .12s,transform .1s;background:none;border:none;padding:0 2px;line-height:1;}
.star-btn.on{color:var(--warn);}
.star-btn:hover{transform:scale(1.18);}
.star-score-label{font-size:12px;font-weight:700;color:var(--warn);margin-left:8px;min-width:28px;}

/* Tags */
.tag-chips{display:flex;flex-wrap:wrap;gap:7px;}
.tag-chip{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:6px 13px;font-size:12px;cursor:pointer;transition:all .2s;color:var(--muted);}
.tag-chip:hover{border-color:rgba(124,111,247,.4);color:var(--text);}
.tag-chip.selected{border-color:var(--accent2);background:rgba(124,111,247,.12);color:var(--accent2);}

/* Upload */
.upload-area{border:1.5px dashed var(--border);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;}
.upload-area:hover{border-color:rgba(79,195,247,.4);background:rgba(79,195,247,.02);}
.upload-text{font-size:13px;color:var(--muted);line-height:1.7;}
.upload-text strong{color:var(--accent);}

/* Age confirm */
.confirm-box{border-radius:12px;padding:16px 18px;display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;}
.confirm-box.danger{background:rgba(224,92,92,.07);border:1px solid rgba(224,92,92,.25);}
.confirm-box.info{background:rgba(79,195,247,.05);border:1px solid rgba(79,195,247,.15);}
.confirm-box input[type=checkbox]{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--accent);cursor:pointer;}
.confirm-text{font-size:13px;line-height:1.7;}
.confirm-text.danger{color:#e8a0a0;}
.confirm-text a{color:var(--accent);}

/* Submit */
.submit-area{display:flex;align-items:center;gap:12px;margin-top:24px;}
.btn-back{background:transparent;color:var(--muted);border:1px solid var(--border);padding:12px 22px;border-radius:10px;font-size:14px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:all .2s;}
.btn-back:hover{border-color:rgba(255,255,255,.2);color:var(--text);}
.btn-submit{flex:1;max-width:300px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:opacity .2s,transform .15s;}
.btn-submit:hover{opacity:.85;transform:translateY(-1px);}
.submit-note{font-size:11px;color:var(--muted);text-align:center;margin-top:8px;}

/* Sidebar */
.tips-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:sticky;top:20px;}
.tips-title{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.tip-item{display:flex;gap:9px;margin-bottom:12px;align-items:flex-start;}
.tip-icon{font-size:15px;flex-shrink:0;margin-top:1px;}
.tip-text{font-size:12px;color:var(--muted);line-height:1.7;}
.tip-text strong{color:var(--text);}

/* Flow card in sidebar */
.flow-card{background:var(--surface2);border-radius:10px;padding:14px;margin-top:14px;}
.flow-title{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.flow-step{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:12px;color:var(--muted);}
.flow-step:last-child{margin-bottom:0;}
.flow-num{width:18px;height:18px;border-radius:50%;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px;}
.flow-step.highlight .flow-num{background:rgba(79,195,247,.15);border-color:rgba(79,195,247,.3);color:var(--accent);}
.flow-step.highlight{color:var(--text);}

@media(max-width:680px){
  .layout{grid-template-columns:1fr;}
  .tips-card{position:static;}
  .form-card{padding:20px 18px;}
  .star-row-label{width:80px;font-size:12px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nicopuff-mypage
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg:#0d0f14;--surface:#161921;--surface2:#1e2230;--surface3:#252836;
  --border:rgba(255,255,255,0.08);--text:#e8eaf0;--muted:#ffffff;
  --accent:#4fc3f7;--accent2:#7c6ff7;--warn:#f5a623;
  --danger:#e05c5c;--success:#4caf82;--radius:14px;
  --pt-color:#f5a623;--pt-bg:rgba(245,166,35,0.1);--pt-border:rgba(245,166,35,0.25);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--text);line-height:1.65;}

/* ── Header ── */
header{background:rgba(13,15,20,0.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);position:sticky;top:0;z-index:200;}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;}
.logo-wrap{text-decoration:none;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
.logo-sub{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:2px;}
.desktop-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:8px;transition:all .2s;display:flex;align-items:center;gap:5px;}
.desktop-nav a svg{width:13px;height:13px;}
.desktop-nav a:hover{background:var(--surface2);color:var(--text);}
.desktop-nav a.active{color:var(--accent);background:rgba(79,195,247,.08);}
.nav-cta{background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;color:#0d0f14 !important;font-weight:700 !important;margin-left:6px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;border-radius:8px;padding:9px;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{position:fixed;inset:0;z-index:190;pointer-events:none;}
.mobile-nav.open{pointer-events:all;}
.nav-overlay{position:absolute;inset:0;background:transparent;transition:background .3s;}
.mobile-nav.open .nav-overlay{background:rgba(0,0,0,.65);}
.nav-drawer{position:absolute;top:0;right:-300px;width:280px;height:100%;background:var(--surface);border-left:1px solid var(--border);padding:68px 0 40px;transition:right .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mobile-nav.open .nav-drawer{right:0;}
.drawer-section{padding:0 16px 16px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.drawer-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.drawer-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:14px;transition:background .15s;}
.drawer-link:hover,.drawer-link.active{background:var(--surface2);}
.drawer-link.active{color:var(--accent);}
.drawer-link svg{width:17px;height:17px;opacity:.65;}
.drawer-cta{margin:16px 16px 0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 32px);font-family:'Noto Sans JP',sans-serif;}

/* ── Breadcrumb ── */
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 0;}
.breadcrumb{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

/* ── Page layout ── */
.page-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}

/* ── Sidebar nav ── */
.side-nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:76px;}
.user-info-block{padding:24px 20px;border-bottom:1px solid var(--border);text-align:center;}
.user-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px;border:3px solid var(--border);}
.user-name{font-size:15px;font-weight:700;margin-bottom:2px;}
.user-since{font-size:11px;color:var(--muted);}
.user-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(245,166,35,.12);border:1px solid var(--pt-border);border-radius:20px;padding:4px 10px;font-size:11px;color:var(--warn);font-weight:700;margin-top:8px;}
.user-badge svg{width:12px;height:12px;}

.nav-menu{padding:8px 0;}
.nav-item{display:flex;align-items:center;gap:10px;padding:12px 20px;font-size:14px;color:var(--muted);cursor:pointer;transition:all .15s;border-left:3px solid transparent;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{color:var(--accent);background:rgba(79,195,247,.05);border-left-color:var(--accent);}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-item-badge{margin-left:auto;font-size:10px;background:var(--danger);color:white;border-radius:20px;padding:2px 7px;font-weight:700;}

.logout-btn{display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:13px;color:var(--muted);cursor:pointer;border-top:1px solid var(--border);transition:color .2s;}
.logout-btn:hover{color:var(--danger);}
.logout-btn svg{width:15px;height:15px;}

/* ── Section commons ── */
.section-wrap{display:none;}
.section-wrap.active{display:block;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;}
.card-title{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.card-title::before{content:'';width:3px;height:15px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;}
.card-title svg{width:15px;height:15px;opacity:.7;}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   パフログポイント セクション
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Point hero card */
.point-hero{background:linear-gradient(135deg,#0f1a0a 0%,#111d10 50%,#0d1a0e 100%);border:1px solid var(--pt-border);border-radius:20px;padding:28px 32px;margin-bottom:16px;position:relative;overflow:hidden;}
.point-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(245,166,35,.12) 0%,transparent 65%);pointer-events:none;}
.ph-label{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.ph-label svg{width:13px;height:13px;color:var(--pt-color);}
.ph-pts-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px;}
.ph-pts{font-family:'Space Grotesk',sans-serif;font-size:56px;font-weight:700;color:var(--pt-color);line-height:1;}
.ph-pts-unit{font-size:18px;color:var(--pt-color);margin-bottom:10px;font-weight:700;}
.ph-sub{font-size:13px;color:var(--muted);}

/* Progress to next coupon */
.pt-progress-wrap{margin-top:20px;}
.pt-progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px;}
.pt-progress-label strong{color:var(--pt-color);}
.pt-progress-track{height:10px;background:rgba(255,255,255,.06);border-radius:50px;overflow:hidden;position:relative;}
.pt-progress-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--warn),#f7c94a);transition:width .8s ease;position:relative;}
.pt-progress-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:white;opacity:.4;border-radius:2px;
    pointer-events:none;
  }
.pt-milestones{display:flex;justify-content:space-between;margin-top:6px;}
.pt-milestone{font-size:10px;color:var(--muted);text-align:center;}
.pt-milestone.reached{color:var(--pt-color);}

/* Point actions */
.pt-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.pt-action-btn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:13px;text-align:center;cursor:pointer;transition:all .2s;}
.pt-action-btn:hover{border-color:rgba(245,166,35,.3);}
.pt-action-icon{font-size:22px;margin-bottom:5px;}
.pt-action-label{font-size:12px;font-weight:700;}
.pt-action-sub{font-size:10px;color:var(--muted);}

/* How to earn */
.earn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.earn-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:flex-start;}
.earn-icon{font-size:20px;flex-shrink:0;}
.earn-label{font-size:13px;font-weight:700;margin-bottom:2px;}
.earn-pt{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--pt-color);}
.earn-desc{font-size:11px;color:var(--muted);}

/* Point history */
.pt-history-list{display:flex;flex-direction:column;gap:0;}
.ph-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.ph-item:last-child{border-bottom:none;}
.ph-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ph-icon.earn{background:rgba(245,166,35,.1);}
.ph-icon.use{background:rgba(224,92,92,.1);}
.ph-info{flex:1;}
.ph-action{font-size:13px;font-weight:700;margin-bottom:1px;}
.ph-date{font-size:11px;color:var(--muted);}
.ph-pts-change{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;}
.ph-pts-change.plus{color:var(--pt-color);}
.ph-pts-change.minus{color:var(--danger);}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   クーポン交換 セクション
━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.coupon-explain{background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.2);border-radius:12px;padding:16px 18px;font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:20px;}
.coupon-explain strong{color:var(--warn);}
.coupon-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.coupon-card{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border);}
.coupon-card:hover:not(.disabled){transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.3);}
.coupon-card.disabled{opacity:.45;cursor:not-allowed;}
.cc-header{padding:20px 20px 16px;position:relative;}
.cc-header.nicohub{background:linear-gradient(135deg,#0a1628,#0d1f3c);}
.cc-header.vapesign{background:linear-gradient(135deg,#1a0a28,#2a0d3c);}
.cc-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cc-logo-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.cc-logo-icon.nicohub{background:rgba(79,195,247,.15);border:1px solid rgba(79,195,247,.3);}
.cc-logo-icon.vapesign{background:rgba(124,111,247,.15);border:1px solid rgba(124,111,247,.3);}
.cc-site-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;}
.cc-site-name.nicohub{color:var(--accent);}
.cc-site-name.vapesign{color:var(--accent2);}
.cc-site-url{font-size:10px;color:var(--muted);}
.cc-discount{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;line-height:1;}
.cc-discount span{font-size:16px;font-weight:400;}
.cc-discount.nicohub{color:var(--accent);}
.cc-discount.vapesign{color:var(--accent2);}
.cc-off-label{font-size:12px;color:var(--muted);margin-top:4px;}

.cc-body{padding:14px 20px;background:var(--surface2);border-top:1px dashed var(--border);}
.cc-cost-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cc-cost-label{font-size:12px;color:var(--muted);}
.cc-cost-val{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--pt-color);display:flex;align-items:center;gap:4px;}
.cc-cost-icon{font-size:14px;}
.cc-shortage{font-size:11px;color:var(--danger);}
.btn-exchange{width:100%;padding:11px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;border:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .2s;}
.btn-exchange svg{width:13px;height:13px;}
.btn-exchange.nicohub{background:var(--accent);color:#0d0f14;}
.btn-exchange.vapesign{background:var(--accent2);color:#0d0f14;}
.btn-exchange.disabled{background:var(--surface3);color:var(--muted);cursor:not-allowed;}
.btn-exchange:not(.disabled):hover{opacity:.85;}

/* Coupon notes */
.coupon-notes{margin-top:16px;background:var(--surface2);border-radius:10px;padding:14px 16px;}
.cn-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.cn-list{display:flex;flex-direction:column;gap:4px;}
.cn-item{font-size:11px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;}
.cn-item::before{content:'•';flex-shrink:0;}

/* Issued coupons */
.issued-coupon{background:var(--surface2);border:1.5px dashed rgba(245,166,35,.3);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.ic-icon{font-size:28px;flex-shrink:0;}
.ic-info{flex:1;}
.ic-site{font-size:11px;color:var(--muted);margin-bottom:2px;}
.ic-code{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--pt-color);letter-spacing:2px;margin-bottom:2px;}
.ic-expire{font-size:11px;color:var(--muted);}
.ic-status{font-size:11px;font-weight:700;border-radius:20px;padding:4px 10px;}
.ic-status.active{background:rgba(76,175,130,.12);color:var(--success);}
.ic-status.used{background:rgba(141,147,153,.1);color:var(--muted);}
.btn-copy{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 13px;font-size:12px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;color:var(--muted);transition:all .2s;display:flex;align-items:center;gap:5px;}
.btn-copy svg{width:12px;height:12px;}
.btn-copy:hover{border-color:rgba(79,195,247,.35);color:var(--accent);}

/* ━━ Reviews section ━━ */
.review-card-my{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px;}
.rcm-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.rcm-brand{display:flex;align-items:center;gap:8px;}
.rcm-icon{font-size:20px;}
.rcm-name{font-size:14px;font-weight:700;}
.rcm-flavor{font-size:11px;color:var(--muted);}
.rcm-status{font-size:11px;border-radius:20px;padding:3px 9px;font-weight:700;}
.rcm-status.approved{background:rgba(76,175,130,.12);color:var(--success);}
.rcm-status.pending{background:rgba(245,166,35,.12);color:var(--warn);}
.rcm-stars{color:var(--warn);font-size:13px;margin-bottom:6px;}
.rcm-body{font-size:13px;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rcm-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.rcm-date{font-size:11px;color:var(--muted);}
.rcm-pt-earned{font-size:11px;color:var(--pt-color);display:flex;align-items:center;gap:4px;font-weight:700;}
.rcm-pt-earned svg{width:11px;height:11px;}

/* ━━ Bookmarks ━━ */
.bookmark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.bm-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .2s;}
.bm-card:hover{border-color:rgba(79,195,247,.3);transform:translateY(-2px);}
.bm-icon{font-size:28px;margin-bottom:6px;}
.bm-name{font-size:13px;font-weight:700;margin-bottom:3px;}
.bm-score{font-size:12px;color:var(--warn);}
.bm-count{font-size:10px;color:var(--muted);}

/* ━━ Profile ━━ */
.profile-form .form-group{margin-bottom:18px;}
.profile-form label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.profile-form input,.profile-form select,.profile-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:11px 14px;color:var(--text);font-size:14px;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .2s;}
.profile-form input:focus,.profile-form select:focus,.profile-form textarea:focus{border-color:rgba(79,195,247,.4);}
.profile-form textarea{min-height:90px;resize:vertical;}
.btn-save-profile{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:12px 28px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}

/* ━━ Modal ━━ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:480px;width:100%;text-align:center;}
.modal-icon{font-size:52px;margin-bottom:16px;}
.modal-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px;}
.modal-sub{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.7;}
.modal-coupon-box{background:var(--surface2);border:1.5px dashed rgba(245,166,35,.4);border-radius:12px;padding:18px;margin-bottom:20px;}
.modal-coupon-site{font-size:11px;color:var(--muted);margin-bottom:4px;}
.modal-coupon-code{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:var(--pt-color);letter-spacing:3px;margin-bottom:4px;}
.modal-coupon-note{font-size:11px;color:var(--muted);}
.modal-btns{display:flex;gap:10px;}
.btn-modal-primary{flex:1;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0d0f14;border:none;padding:13px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}
.btn-modal-secondary{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--muted);padding:13px;border-radius:10px;font-size:14px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;}

/* Toast */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--success);color:#0d0f14;border-radius:50px;padding:11px 24px;font-size:13px;font-weight:700;z-index:500;opacity:0;transition:all .3s;pointer-events:none;display:flex;align-items:center;gap:7px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:14px;height:14px;}

@media(max-width:768px){
  .desktop-nav{display:none;}
  .hamburger{display:flex;}
  .page-wrap{grid-template-columns:1fr;padding:16px 16px 60px;}
  .side-nav{position:static;display:grid;grid-template-columns:auto 1fr;gap:0;}
  .user-info-block{display:none;}
  .nav-menu{display:flex;overflow-x:auto;padding:4px 8px;gap:0;scrollbar-width:none;}
  .nav-menu::-webkit-scrollbar{display:none;}
  .nav-item{flex-direction:column;gap:4px;padding:10px 12px;font-size:11px;min-width:72px;border-left:none;border-bottom:2px solid transparent;white-space:nowrap;}
  .nav-item.active{border-bottom-color:var(--accent);border-left:none;}
  .nav-item svg{width:18px;height:18px;}
  .logout-btn{display:none;}
  .coupon-grid{grid-template-columns:1fr;}
  .earn-grid{grid-template-columns:1fr 1fr;}
  .pt-hero{padding:20px;}
  .ph-pts{font-size:40px;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ポイント特典セクション（トップページ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ヒーロー内ポイントCTA */
.hero-point-cta{
  max-width:640px;margin:0 auto 28px;
  background:rgba(245,166,35,.06);
  border:1px solid rgba(245,166,35,.2);
  border-radius:16px;padding:16px 20px;position:relative;z-index:1;
}
.hpc-inner{display:flex;flex-direction:column;align-items:center;gap:10px;}
.hpc-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.hpc-step{display:flex;flex-direction:column;align-items:center;gap:4px;}
.hpc-icon{font-size:26px;}
.hpc-icon-shop{font-size:22px;position:relative;display:flex;flex-direction:column;align-items:center;}
.hpc-off{font-size:9px;font-weight:700;background:var(--warn);color:#0d0f14;border-radius:20px;padding:1px 6px;margin-top:2px;white-space:nowrap;}
.hpc-step-label{font-size:10px;color: #ffffff;}
.hpc-arrow{font-size:14px;color:var(--warn);opacity:.6;}
.hpc-note{font-size:12px;color: #ffffff;text-align:center;line-height:1.7;}
.hpc-note strong{color:var(--text);}

/* メインポイントセクション */
.point-feature-section{
  background:linear-gradient(180deg,#0a1408 0%,#0d1510 40%,#0a1220 100%);
  border-top:1px solid rgba(245,166,35,.15);
  border-bottom:1px solid rgba(245,166,35,.15);
  padding:64px 24px;position:relative;overflow:hidden;
}
.point-feature-section::before{
  content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(245,166,35,.07) 0%,transparent 65%);
  pointer-events:none;
}
.pfs-inner{max-width:860px;margin:0 auto;position:relative;z-index:1;}

/* ヘッド */
.pfs-head{text-align:center;margin-bottom:44px;}
.pfs-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:50px;padding:5px 16px;font-size:12px;color:var(--warn);margin-bottom:14px;}
.pfs-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw,42px);font-weight:700;line-height:1.25;margin-bottom:10px;letter-spacing:-1px;}
.pfs-title-accent{color:var(--warn);}
.pfs-sub{font-size:14px;color:var(--muted);}

/* フロー */
.pfs-flow{display:flex;align-items:stretch;gap:0;margin-bottom:36px;position:relative;}
.pfs-flow-item{
  flex:1;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:16px;padding:24px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .2s;
}
.pfs-flow-item-highlight{
  background:rgba(245,166,35,.06);border-color:rgba(245,166,35,.3);
  box-shadow:0 0 32px rgba(245,166,35,.08);
}
.pfs-flow-icon{font-size:36px;}
.pfs-flow-title{font-size:15px;font-weight:700;}
.pfs-flow-desc{font-size:12px;color:var(--muted);line-height:1.6;}
.pfs-flow-pt{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--success);margin-top:auto;}
.pfs-flow-arrow{display:flex;align-items:center;padding:0 10px;font-size:20px;color:var(--warn);opacity:.5;flex-shrink:0;}

/* 提携EC */
.pfs-ec-cards{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px;}
.pfs-ec-label{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.pfs-ec-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;}
.pfs-ec-card{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 20px;
}
.pfs-ec-nicohub{border-color:rgba(79,195,247,.2);}
.pfs-ec-vapesign{border-color:rgba(124,111,247,.2);}
.pfs-ec-card-icon{font-size:24px;}
.pfs-ec-card-name{font-size:14px;font-weight:700;}
.pfs-ec-card-url{font-size:11px;color:var(--muted);}
.pfs-ec-card-badge{background:rgba(245,166,35,.15);color:var(--warn);border:1px solid rgba(245,166,35,.3);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;margin-left:4px;}
.pfs-ec-plus{font-size:20px;color:var(--muted);}

/* ポイント獲得一覧 */
.pfs-earn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:32px;}
.pfs-earn-item{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:10px;padding:11px 14px;
}
.pfs-earn-item.highlight{background:rgba(79,195,247,.05);border-color:rgba(79,195,247,.2);}
.pfs-earn-icon{font-size:18px;flex-shrink:0;}
.pfs-earn-label{font-size:12px;flex:1;color:var(--muted);}
.pfs-earn-pt{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--warn);white-space:nowrap;}

/* CTAボタン群 */
.pfs-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;}
.btn-pfs-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,var(--warn),#f7a823);
  color:#0d0f14;border:none;border-radius:50px;
  padding:16px 40px;font-size:16px;font-weight:700;
  text-decoration:none;font-family:'Noto Sans JP',sans-serif;
  transition:opacity .2s,transform .2s;
  box-shadow:0 6px 28px rgba(245,166,35,.3);
}
.btn-pfs-primary:hover{opacity:.88;transform:translateY(-2px);}
.btn-pfs-secondary{
  font-size:14px;color:var(--muted);text-decoration:none;
  border:1px solid var(--border);border-radius:50px;padding:10px 24px;
  transition:all .2s;
}
.btn-pfs-secondary:hover{color:var(--text);border-color:rgba(255,255,255,.2);}

/* ログイン済みユーザー向けポイント表示 */
.pfs-user-pt-box{
  background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.2);
  border-radius:14px;padding:18px 24px;text-align:center;width:100%;max-width:360px;
}
.pfs-user-pt-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.pfs-user-pt-num{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:700;color:var(--warn);margin-bottom:10px;}
.pfs-user-pt-bar-wrap{display:flex;flex-direction:column;gap:5px;}
.pfs-user-pt-bar{height:8px;background:rgba(255,255,255,.06);border-radius:50px;overflow:hidden;}
.pfs-user-pt-fill{height:100%;background:linear-gradient(90deg,var(--warn),#f7c94a);border-radius:50px;transition:width .8s ease;}
.pfs-user-pt-next{font-size:12px;color:var(--muted);}
.pfs-user-pt-next strong{color:var(--warn);}

/* ゲスト向けメッセージ */
.pfs-guest-msg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);}
.pfs-guest-icon{font-size:24px;}

/* ━━ フッター直前CVバナー ━━ */
.bottom-cv-banner{
  background:linear-gradient(90deg,#0a1628,#141020,#0d1a10);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:48px 24px;
}
.bcv-inner{
  max-width:900px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;
}
.bcv-eyebrow{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:1px;}
.bcv-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,3vw,32px);font-weight:700;margin-bottom:8px;letter-spacing:-0.5px;}
.bcv-accent{color:var(--warn);}
.bcv-sub{font-size:13px;color:var(--muted);line-height:1.7;}
.bcv-btn-wrap{display:flex;flex-direction:column;gap:10px;align-items:center;flex-shrink:0;}
.bcv-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:linear-gradient(90deg,var(--warn),#f7a823);
  color:#0d0f14;border:none;border-radius:50px;
  padding:14px 32px;font-size:15px;font-weight:700;
  text-decoration:none;font-family:'Noto Sans JP',sans-serif;
  transition:opacity .2s,transform .2s;
  box-shadow:0 4px 20px rgba(245,166,35,.25);
}
.bcv-btn-primary:hover{opacity:.88;transform:translateY(-2px);}
.bcv-btn-secondary{font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:2px;transition:color .2s;}
.bcv-btn-secondary:hover{color:var(--text);}

/* top-section 共通 */
.top-section{max-width:1100px;margin:0 auto;padding:40px 24px;}

@media(max-width:768px){
  .pfs-flow{flex-direction:column;}
  .pfs-flow-arrow{transform:rotate(90deg);padding:4px 0;align-self:center;}
  .hpc-icons{gap:6px;}
  .bcv-inner{flex-direction:column;text-align:center;}
  .bcv-btn-wrap{width:100%;}
  .bcv-btn-primary{width:100%;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   トップページ ランキングセクション（改善版）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.top-ranking-section {
  background:linear-gradient(180deg,#0d0f14 0%,#111624 50%,#0d0f14 100%);
  padding:60px 24px;
  position:relative;
  overflow:hidden;
}
.top-ranking-section::before {
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:700px;height:300px;
  background:radial-gradient(ellipse,rgba(245,166,35,.06) 0%,transparent 65%);
  pointer-events:none;
}
.top-ranking-inner { max-width:860px;margin:0 auto;position:relative;z-index:1; }

/* ヘッダー */
.tr-head {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:36px;gap:12px;flex-wrap:wrap;
}
.tr-eyebrow {
  font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.5px;
}
.tr-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-0.5px;
}
.tr-all-link {
  font-size:13px;color:var(--accent);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(79,195,247,.3);padding-bottom:2px;
  transition:border-color .2s;flex-shrink:0;align-self:flex-end;
}
.tr-all-link:hover { border-color:var(--accent); }

/* 表彰台 */
.tr-podium {
  display:flex;align-items:flex-end;justify-content:center;
  gap:12px;margin-bottom:20px;
}
.tr-podium-item {
  flex:1;max-width:240px;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:20px 16px 0;text-align:center;cursor:pointer;
  transition:all .25s;position:relative;overflow:hidden;
}
.tr-podium-item:hover { transform:translateY(-4px);border-color:rgba(79,195,247,.35); }
.tr-podium-item.rank-1 {
  background:linear-gradient(160deg,rgba(201,162,39,.1),rgba(201,162,39,.04));
  border-color:rgba(201,162,39,.35);
  padding-top:28px;
}
.tr-podium-item.rank-2 {
  background:linear-gradient(160deg,rgba(141,147,153,.08),rgba(141,147,153,.02));
  border-color:rgba(141,147,153,.25);
}
.tr-podium-item.rank-3 {
  background:linear-gradient(160deg,rgba(179,107,58,.08),rgba(179,107,58,.02));
  border-color:rgba(179,107,58,.25);
}
.tr-crown {
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  font-size:24px;filter:drop-shadow(0 2px 6px rgba(245,166,35,.5));
}
.tr-pod-icon {
  font-size:40px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;height:52px;
}
.tr-pod-icon svg { width:48px;height:48px; }
.tr-pod-rank {
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:700;margin-bottom:6px;
}
.tr-pod-rank span { font-size:12px;color:var(--muted); }
.tr-pod-name {
  font-size:15px;font-weight:700;margin-bottom:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tr-pod-score-wrap {
  display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px;
}
.tr-pod-score {
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;font-weight:700;
  color:var(--warn);line-height:1;
}
.rank-1 .tr-pod-score { font-size:34px; }
.tr-pod-stars { font-size:14px;color:var(--warn); }
.tr-pod-count {
  font-size:11px;color:var(--muted);padding:8px 0 12px;
  border-top:1px solid var(--border);margin-top:8px;
}
.tr-pod-count-num { font-weight:700;color:var(--text);font-size:13px; }
.tr-pod-base {
  height:8px;
  background:linear-gradient(90deg,rgba(79,195,247,.0),rgba(79,195,247,.1));
  margin:0 -16px;
}
.rank-1 .tr-pod-base { background:linear-gradient(90deg,rgba(201,162,39,.1),rgba(201,162,39,.25),rgba(201,162,39,.1)); height:10px; }
.rank-2 .tr-pod-base { background:linear-gradient(90deg,rgba(141,147,153,.05),rgba(141,147,153,.15),rgba(141,147,153,.05)); }
.rank-3 .tr-pod-base { background:linear-gradient(90deg,rgba(179,107,58,.05),rgba(179,107,58,.15),rgba(179,107,58,.05)); }

/* 4位・5位リスト */
.tr-list { display:flex;flex-direction:column;gap:10px; }
.tr-list-item {
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;cursor:pointer;transition:all .2s;
}
.tr-list-item:hover { border-color:rgba(79,195,247,.3);transform:translateX(4px); }
.tr-list-rank {
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;font-weight:700;color:var(--muted);
  width:28px;text-align:center;flex-shrink:0;
}
.tr-list-icon {
  width:40px;height:40px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
}
.tr-list-icon svg { width:36px;height:36px; }
.tr-list-info { flex:1;min-width:0; }
.tr-list-name { font-size:15px;font-weight:700;margin-bottom:2px; }
.tr-list-meta { font-size:11px;color:var(--muted);margin-bottom:6px; }
.tr-score-bar-wrap { display:flex;align-items:center;gap:8px; }
.tr-score-bar {
  flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:50px;overflow:hidden;
}
.tr-score-fill {
  height:100%;border-radius:50px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width 1s ease;
}
.tr-list-right { text-align:right;flex-shrink:0; }
.tr-list-score {
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;font-weight:700;color:var(--warn);line-height:1;margin-bottom:2px;
}
.tr-list-stars { font-size:11px;color:var(--warn);margin-bottom:2px; }
.tr-list-count { font-size:11px;color:var(--muted); }

/* レスポンシブ */
@media(max-width:640px) {
  .tr-podium { gap:8px; }
  .tr-pod-name { font-size:13px; }
  .tr-pod-score { font-size:24px; }
  .rank-1 .tr-pod-score { font-size:28px; }
  .tr-list-item { padding:12px 14px;gap:10px; }
  .tr-list-rank { font-size:18px;width:22px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   口コミ一覧ページ（archive-review.php）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rev-archive-hero {
  background:linear-gradient(135deg,#0d0f14,#111824);
  border-bottom:1px solid var(--border);
  padding:44px 24px 36px;text-align:center;
}
.rah-inner { max-width:600px;margin:0 auto; }
.rah-eyebrow { font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.5px; }
.rah-title { font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,4vw,36px);font-weight:700;margin-bottom:16px; }
.rah-stats { display:flex;align-items:center;justify-content:center;gap:24px; }
.rah-stat-num { font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--accent);display:block; }
.rah-stat-label { font-size:11px;color:var(--muted); }
.rah-stat-div { width:1px;height:32px;background:var(--border); }

/* フィルターバー */
.rev-filter-bar {
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:57px;z-index:90;
}
.rev-filter-inner { max-width:1100px;margin:0 auto;padding:0; }
.rev-brand-filter {
  display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--border);
  scrollbar-width:none;padding:0 16px;
}
.rev-brand-filter::-webkit-scrollbar { display:none; }
.rbf-item {
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:11px 14px;font-size:13px;color:var(--muted);
  border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0;
}
.rbf-item.active { color:var(--accent);border-bottom-color:var(--accent); }
.rbf-item:hover { color:var(--text); }
.rbf-icon svg { width:100%;height:100%; }
.rev-filter-controls {
  display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap;
}
.rev-select {
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;color:var(--text);font-size:13px;font-family:'Noto Sans JP',sans-serif;
  outline:none;cursor:pointer;
}
.rev-result-count { font-size:13px;color:var(--muted);margin-left:auto; }

/* グリッド */
.rev-archive-wrap { max-width:1100px;margin:0 auto;padding:28px 24px 80px; }
.rev-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;margin-bottom:32px;
}
.rev-empty { text-align:center;padding:60px;color:var(--muted); }

/* 口コミカード v2 */
.rev-card-v2 {
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:18px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:12px;
}
.rev-card-v2:hover { border-color:rgba(79,195,247,.3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25); }

.rcv2-brand-bar { display:flex;align-items:center;gap:10px; }
.rcv2-brand-icon {
  width:36px;height:36px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
}
.rcv2-brand-icon svg { width:32px;height:32px; }
.rcv2-brand-info { flex:1;min-width:0; }
.rcv2-brand-name { font-size:13px;font-weight:700; }
.rcv2-flavor { font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.rcv2-score-pill {
  display:flex;align-items:baseline;gap:1px;
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.2);
  border-radius:20px;padding:4px 10px;flex-shrink:0;
}
.rcv2-score-num { font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--warn);line-height:1; }
.rcv2-score-star { font-size:12px;color:var(--warn); }

.rcv2-stars-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.rcv2-sub-scores { display:flex;gap:6px;flex-wrap:wrap; }
.rcv2-sub {
  font-size:10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:2px 8px;color:var(--muted);
}

.rcv2-body {
  font-size:13px;line-height:1.75;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}
.rcv2-footer { display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--border); }
.rcv2-user { display:flex;align-items:center;gap:7px; }
.rcv2-avatar { width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0d0f14;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.rcv2-username { font-size:12px;font-weight:600; }
.rcv2-meta { display:flex;align-items:center;gap:8px; }
.rcv2-date { font-size:11px;color:var(--muted); }
.rcv2-helpful { font-size:11px;color:var(--muted); }

/* 口コミCTA */
.rev-write-cta {
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(90deg,rgba(124,111,247,.08),rgba(79,195,247,.05));
  border:1px solid rgba(124,111,247,.2);border-radius:16px;padding:20px 24px;
  flex-wrap:wrap;margin-top:8px;
}
.rwc-title { font-size:15px;font-weight:700;margin-bottom:4px; }
.rwc-sub { font-size:13px;color:var(--muted); }
.rwc-btn {
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#0d0f14;border-radius:50px;padding:12px 24px;font-size:14px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   口コミ詳細ページ（single-review.php）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rev-detail-wrap {
  max-width:1000px;margin:0 auto;padding:28px 24px 80px;
  display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start;
}
.rdw-main { display:flex;flex-direction:column;gap:20px; }

/* ブランドリンク */
.rdw-brand-link {
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;transition:all .2s;
}
.rdw-brand-link:hover { border-color:rgba(79,195,247,.3); }
.rdw-bl-icon { width:44px;height:44px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0; }
.rdw-bl-icon svg { width:38px;height:38px; }
.rdw-bl-name { font-size:15px;font-weight:700; }
.rdw-bl-meta { font-size:12px;color:var(--accent); }

/* メインカード */
.rdw-card {
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:24px;
}
.rdw-flavor-badge {
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(79,195,247,.08);border:1px solid rgba(79,195,247,.2);
  border-radius:50px;padding:6px 16px;font-size:13px;color:var(--accent);
  margin-bottom:20px;
}

/* スコアヒーロー */
.rdw-score-hero { text-align:center;padding:16px 0 20px; }
.rdw-score-big {
  font-family:'Space Grotesk',sans-serif;
  font-size:72px;font-weight:700;color:var(--warn);line-height:1;margin-bottom:8px;
}
.rdw-score-stars { font-size:28px;color:var(--warn); }

/* スコアバー */
.rdw-score-bars { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.rdw-score-row { display:flex;align-items:center;gap:10px; }
.rdw-score-icon { font-size:16px;flex-shrink:0; }
.rdw-score-label { font-size:12px;color:var(--muted);width:60px;flex-shrink:0; }
.rdw-bar-wrap { flex:1; }
.rdw-bar { height:8px;background:rgba(255,255,255,.06);border-radius:50px;overflow:hidden; }
.rdw-bar-fill { height:100%;border-radius:50px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .8s ease; }
.rdw-score-val { font-size:13px;font-weight:700;color:var(--warn);width:28px;text-align:right;flex-shrink:0; }

.rdw-divider { height:1px;background:var(--border);margin:4px 0 16px; }

/* ユーザー行 */
.rdw-user-row { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.rdw-avatar-lg {
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0d0f14;font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.rdw-author-name { font-size:15px;font-weight:700; }
.rdw-post-date { font-size:12px;color:var(--muted); }
.rdw-verified-badge {
  margin-left:auto;font-size:11px;
  background:rgba(76,175,130,.1);border:1px solid rgba(76,175,130,.2);
  border-radius:20px;padding:3px 10px;color:var(--success);flex-shrink:0;
}

/* 本文 */
.rdw-body-text {
  font-size:15px;line-height:1.9;color:var(--text);
  background:var(--surface2);border-radius:12px;padding:18px;
  margin-bottom:20px;
}

/* 参考になった */
.rdw-helpful-section { border-top:1px solid var(--border);padding-top:16px; }
.rdw-helpful-label { font-size:13px;color:var(--muted);margin-bottom:10px; }
.rdw-helpful-row { display:flex;align-items:center;gap:12px; }
.rdw-helpful-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:50px;padding:10px 20px;font-size:14px;cursor:pointer;
  color:var(--text);font-family:'Noto Sans JP',sans-serif;transition:all .2s;
}
.rdw-helpful-btn:hover:not(:disabled) { border-color:rgba(76,175,130,.4);color:var(--success); }
.rdw-helpful-btn.already { background:rgba(76,175,130,.1);border-color:rgba(76,175,130,.3);color:var(--success); }
.rdw-helpful-btn:disabled { opacity:.5;cursor:not-allowed; }
.rdw-helpful-count { color:var(--muted);font-size:13px; }
.rdw-login-hint { font-size:12px;color:var(--accent); }

/* 関連口コミ */
.rdw-section-title { font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.rdw-related-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.rdw-rel-card {
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px;cursor:pointer;transition:all .2s;
}
.rdw-rel-card:hover { border-color:rgba(79,195,247,.3);transform:translateY(-2px); }
.rdw-rel-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.rdw-rel-flavor { font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:8px; }
.rdw-rel-score { font-size:12px;color:var(--warn);font-weight:700;flex-shrink:0; }
.rdw-rel-body { font-size:12px;line-height:1.7;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px; }
.rdw-rel-footer { display:flex;justify-content:space-between;align-items:center; }
.rdw-rel-user { display:flex;align-items:center;gap:6px; }
.rdw-rel-avatar { width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0d0f14;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.rdw-rel-footer span { font-size:11px;color:var(--muted); }
.rdw-rel-date { font-size:11px;color:var(--muted); }

/* ナビ */
.rdw-nav { display:flex;gap:10px;flex-wrap:wrap; }
.rdw-nav-btn {
  padding:11px 20px;border-radius:50px;font-size:13px;font-weight:700;border:1px solid var(--border);color:var(--muted);transition:all .2s;
}
.rdw-nav-btn:hover { color:var(--text);border-color:rgba(255,255,255,.2); }
.rdw-nav-btn.primary { background:var(--accent2);color:#fff;border-color:transparent; }

/* サイドバー */
.rdw-sidebar { display:flex;flex-direction:column;gap:14px;position:sticky;top:80px; }
.rdw-side-card { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px; }
.rdw-side-title { font-size:13px;font-weight:700;margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }

/* ページネーション */
.rev-pagination { display:flex;justify-content:center;gap:6px;margin:24px 0; }
.rev-pagination .page-numbers { background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--muted);transition:all .2s; }
.rev-pagination .page-numbers.current { background:var(--accent);color:#0d0f14;border-color:var(--accent);font-weight:700; }
.rev-pagination .page-numbers:hover:not(.current) { border-color:rgba(79,195,247,.3);color:var(--text); }

/* レスポンシブ */
@media(max-width:768px) {
  .rev-detail-wrap { grid-template-columns:1fr; }
  .rdw-sidebar { position:static; }
  .rdw-score-big { font-size:56px; }
  .rdw-related-grid { grid-template-columns:1fr; }
  .rdw-verified-badge { display:none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SEOコンテンツセクション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.seo-sections-wrap { border-top:1px solid var(--border); }

.seo-section {
  padding:64px 24px;
  border-bottom:1px solid var(--border);
}
.seo-section-dark {
  background:linear-gradient(180deg,#0a1015 0%,#0d1018 100%);
}
.seo-inner { max-width:860px;margin:0 auto; }

.seo-eyebrow {
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:10px;
}
.seo-h2 {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,3vw,32px);font-weight:700;
  margin-bottom:14px;letter-spacing:-0.5px;
}
.seo-lead {
  font-size:15px;color:var(--muted);line-height:1.85;
  margin-bottom:32px;
}
.seo-lead strong { color:var(--text); }

/* 特徴グリッド */
.seo-feature-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;margin-bottom:36px;
}
.seo-feat {
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:18px;
}
.seo-feat-icon { font-size:28px;margin-bottom:8px; }
.seo-feat-title { font-size:14px;font-weight:700;margin-bottom:6px; }
.seo-feat-desc { font-size:12px;color:var(--muted);line-height:1.7;margin:0; }

/* 比較テーブル */
.seo-comparison { background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
.seo-comp-title { font-size:13px;font-weight:700;padding:14px 18px;border-bottom:1px solid var(--border);color:var(--muted); }
.seo-comp-table-wrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }
.seo-comp-table { width:100%;min-width:480px;border-collapse:collapse;font-size:13px; }
.seo-comp-table th {
  padding:12px 16px;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);font-weight:700;text-align:center;
  white-space:nowrap;
}
.seo-comp-table th:first-child { text-align:left; }
.seo-comp-table td {
  padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);
  text-align:center;color:var(--muted);
}
.seo-comp-table td:first-child { text-align:left;color:var(--text);font-weight:600; }
.seo-comp-table tr:last-child td { border-bottom:none; }
.seo-comp-table .good { color:var(--success); }
.seo-comp-table .bad  { color:var(--danger);  }
.seo-comp-table .mid  { color:var(--warn);    }

/* 法律カード */
.seo-law-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px; }
.seo-law-card {
  border-radius:16px;padding:20px;
}
.seo-law-card.legal  { background:rgba(76,175,130,.07);border:1px solid rgba(76,175,130,.2); }
.seo-law-card.illegal{ background:rgba(224,92,92,.07);border:1px solid rgba(224,92,92,.2); }
.slc-icon { font-size:28px;margin-bottom:8px; }
.slc-title { font-size:15px;font-weight:700;margin-bottom:10px; }
.slc-list { list-style:none;display:flex;flex-direction:column;gap:6px;margin:0; }
.seo-law-card.legal  .slc-list li::before { content:'\2713  ';color:var(--success); }
.seo-law-card.illegal .slc-list li::before { content:'\2715  ';color:var(--danger); }
.slc-list li { font-size:13px;color:var(--muted);line-height:1.6; }

.seo-notice {
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(79,195,247,.06);border:1px solid rgba(79,195,247,.15);
  border-radius:12px;padding:14px 16px;
}
.seo-notice-icon { font-size:16px;flex-shrink:0;margin-top:1px; }
.seo-notice p { font-size:12px;color:var(--muted);line-height:1.7;margin:0; }

/* 選び方ステップ */
.seo-steps { display:flex;flex-direction:column;gap:0; }
.seo-step {
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid var(--border);
}
.seo-step:last-child { border-bottom:none; }
.seo-step-num {
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0d0f14;font-family:'Space Grotesk',sans-serif;
  font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.seo-step-title { font-size:15px;font-weight:700;margin-bottom:6px; }
.seo-step-desc { font-size:13px;color:var(--muted);line-height:1.75;margin:0; }
.seo-step-desc strong { color:var(--text); }

/* FAQ */
.seo-faq-list { display:flex;flex-direction:column;gap:10px; }
.seo-faq-item {
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:border-color .2s;
}
.seo-faq-item:hover { border-color:rgba(79,195,247,.3); }
.seo-faq-item.open { border-color:rgba(79,195,247,.25); }
.seo-faq-q {
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;font-size:14px;font-weight:700;
}
.seo-faq-icon {
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  background:var(--accent);color:#0d0f14;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.seo-faq-chev {
  width:16px;height:16px;color:var(--muted);margin-left:auto;flex-shrink:0;
  transition:transform .25s;
}
.seo-faq-item.open .seo-faq-chev { transform:rotate(180deg); }
.seo-faq-a {
  display:none;gap:10px;
  padding:0 18px 16px;font-size:13px;color:var(--muted);line-height:1.8;
}
.seo-faq-item.open .seo-faq-a { display:flex; }
.seo-faq-a-icon {
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  background:rgba(76,175,130,.15);color:var(--success);
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.seo-faq-a p { margin:0; }

@media(max-width:640px) {
  .seo-law-grid { grid-template-columns:1fr; }
  .seo-feature-grid { grid-template-columns:1fr 1fr; }
  .seo-section { padding:44px 16px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   クーポンカード v2（マイページ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.coupon-list-v2 { display:flex;flex-direction:column;gap:16px;margin-top:4px; }

.cpv2-card {
  background:linear-gradient(135deg,#1a2035,#161921);
  border:1px solid rgba(79,195,247,.25);
  border-radius:18px;overflow:hidden;transition:all .3s;
}
.cpv2-card:hover { border-color:rgba(79,195,247,.45);box-shadow:0 6px 24px rgba(79,195,247,.08); }
.cpv2-inactive { opacity:.55;border-color:var(--border); }
.cpv2-inactive:hover { border-color:var(--border);box-shadow:none; }

/* ヘッダー */
.cpv2-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 10px;border-bottom:1px solid rgba(255,255,255,.06);
}
.cpv2-site { font-size:14px;font-weight:700; }

/* ステータスバッジ */
.cpv2-status {
  font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;
}
.status-active  { background:rgba(76,175,130,.15);color:var(--success);border:1px solid rgba(76,175,130,.3); }
.status-used    { background:rgba(122,127,148,.12);color:var(--muted);  border:1px solid rgba(122,127,148,.2); }
.status-expired { background:rgba(224,92,92,.1);  color:var(--danger);  border:1px solid rgba(224,92,92,.2); }

/* コード表示エリア */
.cpv2-code-wrap {
  text-align:center;padding:20px 18px 14px;
  background:rgba(0,0,0,.2);
}
.cpv2-discount {
  font-size:13px;color:var(--warn);font-weight:700;
  letter-spacing:1px;margin-bottom:8px;
}
.cpv2-code {
  font-family:'Courier New',Courier,monospace;
  font-size:clamp(20px,5vw,28px);font-weight:700;letter-spacing:4px;
  color:#fff;background:rgba(255,255,255,.05);border:2px dashed rgba(79,195,247,.3);
  border-radius:10px;padding:10px 20px;display:inline-block;
  cursor:text;user-select:all;transition:border-color .2s;
}
.cpv2-code:hover { border-color:rgba(79,195,247,.6); }
.cpv2-code-hint { font-size:11px;color:var(--muted);margin-top:6px; }

/* メタ情報 */
.cpv2-meta-row {
  display:flex;gap:0;border-top:1px solid rgba(255,255,255,.06);
}
.cpv2-meta-item {
  flex:1;padding:10px 18px;display:flex;flex-direction:column;gap:3px;
}
.cpv2-meta-item:first-child { border-right:1px solid rgba(255,255,255,.06); }
.cpv2-meta-label { font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase; }
.cpv2-meta-val   { font-size:13px;font-weight:600; }
.cpv2-expire-warn { color:var(--warn); }
.cpv2-days-left {
  display:inline-block;background:rgba(245,166,35,.15);color:var(--warn);
  font-size:10px;border-radius:20px;padding:1px 8px;margin-left:6px;font-weight:700;
}

/* アクションボタン */
.cpv2-actions {
  display:flex;gap:8px;padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;
}
.cpv2-btn-copy {
  flex:1;min-width:140px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#0d0f14;border:none;border-radius:10px;padding:11px 16px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif;
  transition:opacity .2s;
}
.cpv2-btn-copy:hover { opacity:.88; }
.cpv2-btn-use {
  flex:1;min-width:120px;text-align:center;
  background:rgba(245,166,35,.1);color:var(--warn);
  border:1px solid rgba(245,166,35,.25);border-radius:10px;
  padding:11px 16px;font-size:13px;font-weight:700;transition:all .2s;
}
.cpv2-btn-use:hover { background:rgba(245,166,35,.18); }
.cpv2-btn-mark {
  width:100%;
  background:transparent;color:var(--muted);
  border:1px solid var(--border);border-radius:10px;
  padding:9px 16px;font-size:12px;cursor:pointer;
  font-family:'Noto Sans JP',sans-serif;transition:all .2s;
}
.cpv2-btn-mark:hover { color:var(--success);border-color:rgba(76,175,130,.3); }
.cpv2-btn-mark:disabled { opacity:.5;cursor:not-allowed; }

/* 使用済み・期限切れメッセージ */
.cpv2-done-msg {
  padding:14px 18px;font-size:13px;color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);text-align:center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ブランド比較テーブル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cmp-table { width:100%;border-collapse:collapse; }
.cmp-row {
  display:grid;gap:0;border-bottom:1px solid var(--border);
}
/* 2ブランド選択時は3列、3ブランドは4列 */
.cmp-row { grid-template-columns:90px 1fr 1fr; }
.cmp-row:has(.cmp-data-col:nth-child(4)) { grid-template-columns:80px 1fr 1fr 1fr; }

.cmp-head-row { background:var(--surface2); }
.cmp-foot-row { border-bottom:none; }
.cmp-label-col {
  padding:12px 10px;font-size:11px;color:var(--muted);
  display:flex;align-items:center;letter-spacing:.3px;
  border-right:1px solid var(--border);
  text-transform:uppercase;
}
.cmp-brand-col {
  padding:14px 10px;text-align:center;
  border-right:1px solid var(--border);
}
.cmp-brand-col:last-child { border-right:none; }
.cmp-brand-icon { font-size:24px;margin-bottom:4px; }
.cmp-brand-name { font-size:13px;font-weight:700; }
.cmp-data-col {
  padding:12px 10px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--border);
}
.cmp-data-col:last-child { border-right:none; }
.cmp-score { font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:var(--warn); }
.cmp-stars { color:var(--warn);font-size:12px; }
.cmp-detail-btn {
  display:inline-block;background:var(--accent2);color:#fff;
  border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;
  text-decoration:none;transition:opacity .2s;
}
.cmp-detail-btn:hover { opacity:.85; }

/* モーダル内スクロール対応 */
#compareTableWrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ブランド比較テーブル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cmp-table { width:100%; }
.cmp-row {
  display:grid;border-bottom:1px solid var(--border);
  /* grid-template-columns は JS で inline style で設定 */
}
.cmp-head-row { background:var(--surface2); }
.cmp-foot-row { border-bottom:none; }
.cmp-label-col {
  padding:10px 8px;font-size:10px;color:var(--muted);
  display:flex;align-items:center;
  border-right:1px solid var(--border);
  letter-spacing:.2px;line-height:1.3;word-break:keep-all;
}
.cmp-brand-col {
  padding:12px 8px;text-align:center;
  border-right:1px solid var(--border);min-width:0;
}
.cmp-brand-col:last-child { border-right:none; }
.cmp-brand-icon { font-size:22px;margin-bottom:4px; }
.cmp-brand-name { font-size:12px;font-weight:700;word-break:break-all;line-height:1.3; }
.cmp-data-col {
  padding:10px 8px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  border-right:1px solid var(--border);min-width:0;
}
.cmp-data-col:last-child { border-right:none; }
.cmp-score { font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--warn); }
.cmp-detail-btn {
  display:inline-block;background:var(--accent2);color:#fff;
  border-radius:8px;padding:6px 10px;font-size:11px;font-weight:700;
  text-decoration:none;transition:opacity .2s;white-space:nowrap;
}
.cmp-detail-btn:hover { opacity:.85; }
#compareTableWrap { overflow-x:auto;-webkit-overflow-scrolling:touch; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   購入ボタン共通
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-purchase-nicohub {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(90deg,#1a6fd4,#2489e8);
  color:#fff;border-radius:50px;font-weight:700;
  text-decoration:none;transition:opacity .2s;border:none;cursor:pointer;
}
.btn-purchase-nicohub:hover { opacity:.88; }

.btn-purchase-vapesign {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(90deg,#0ea76a,#12c97f);
  color:#fff;border-radius:50px;font-weight:700;
  text-decoration:none;transition:opacity .2s;border:none;cursor:pointer;
}
.btn-purchase-vapesign:hover { opacity:.88; }

/* ブランド詳細ヒーロー */
.brand-actions .btn-purchase-nicohub,
.brand-actions .btn-purchase-vapesign {
  padding:13px 22px;font-size:14px;width:100%;margin-bottom:8px;
}

/* ランキング 表彰台 */
.podium-buy-btn {
  padding:7px 14px;font-size:11px;margin-top:8px;
}

/* ランキング リスト */
.ri-buy-btn {
  padding:5px 11px;font-size:11px;margin-top:5px;
  display:inline-flex;
}

/* 口コミ詳細サイドバー */
.rdw-purchase-card {
  background:linear-gradient(135deg,rgba(26,111,212,.07),rgba(18,201,127,.05)) !important;
  border-color:rgba(79,195,247,.2) !important;
}
.rdw-buy-btn {
  display:flex;padding:11px 16px;font-size:13px;
  margin-bottom:8px;width:100%;box-sizing:border-box;
}
.rdw-buy-btn:last-of-type { margin-bottom:0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   コラム記事本文（single.php）文字色修正
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.article-body { color:var(--text) !important; }
.article-body p  { color:rgba(232,234,240,.9);line-height:1.9; }
.article-body h2 { color:var(--text);font-size:20px;font-weight:700;margin:32px 0 14px;padding-left:12px;border-left:3px solid var(--accent); }
.article-body h3 { color:var(--text);font-size:17px;font-weight:700;margin:24px 0 10px; }
.article-body li { color:rgba(232,234,240,.9);line-height:1.85; }
.article-body strong { color:var(--text); }
.article-body a  { color:var(--accent); }
.article-body blockquote { border-left:3px solid var(--accent2);padding:10px 16px;background:rgba(124,111,247,.06);border-radius:0 8px 8px 0;margin:16px 0; }
.article-body blockquote p { color:rgba(232,234,240,.7); }
.article-body table { width:100%;border-collapse:collapse;margin:16px 0; }
.article-body table th { background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border:1px solid var(--border);font-size:13px; }
.article-body table td { color:rgba(232,234,240,.85);padding:10px 12px;border:1px solid var(--border);font-size:13px; }

/* 目次の文字色 */
.toc { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:20px 0; }
.toc-title { font-size:14px;font-weight:700;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px; }
.toc-item { font-size:13px;color:var(--text) !important;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .2s; }
.toc-item:last-child { border-bottom:none; }
.toc-item:hover { color:var(--accent) !important; }
.toc-item::before { content:'›';color:var(--accent);font-weight:700;flex-shrink:0; }

/* サイドバーカテゴリの文字色 */
.side-card { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px; }
.side-card a { color:var(--text) !important; }
.side-card a:hover { color:var(--accent) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   統一ページネーション .puff-pager
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.puff-pager {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:32px 0 12px;
  flex-wrap:wrap;
}

/* 数字ボタン共通 */
.puff-pager .page-numbers {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  font-family:'Space Grotesk',sans-serif;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
  letter-spacing:.3px;
  cursor:pointer;
}

/* ホバー */
.puff-pager .page-numbers:hover:not(.current):not(.dots) {
  color:var(--text);
  border-color:rgba(79,195,247,.4);
  background:rgba(79,195,247,.06);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(79,195,247,.1);
}

/* 現在ページ */
.puff-pager .page-numbers.current {
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0d0f14;
  border-color:transparent;
  font-weight:700;
  box-shadow:0 4px 14px rgba(79,195,247,.25);
  transform:translateY(-1px);
}

/* 前へ・次へ */
.puff-pager .prev.page-numbers,
.puff-pager .next.page-numbers {
  padding:0 18px;
  gap:6px;
  background:var(--surface2);
  color:var(--text);
  border-color:rgba(255,255,255,.1);
  font-size:13px;
  font-weight:700;
}
.puff-pager .prev.page-numbers:hover,
.puff-pager .next.page-numbers:hover {
  background:rgba(79,195,247,.08);
  border-color:rgba(79,195,247,.4);
  color:var(--accent);
}

/* … */
.puff-pager .dots,
.puff-pager .page-dots {
  background:transparent;
  border-color:transparent;
  color:var(--muted);
  min-width:28px;
  cursor:default;
  font-size:14px;
  letter-spacing:2px;
}
.puff-pager .dots:hover,
.puff-pager .page-dots:hover {
  transform:none;
  box-shadow:none;
}

/* 旧クラスも同じスタイルに（念のため） */
.pagination, .rev-pagination, .cat-pagination, .load-more-wrap {
  display:flex;justify-content:center;align-items:center;gap:6px;margin:32px 0 12px;flex-wrap:wrap;
}
.pagination .page-numbers,
.rev-pagination .page-numbers,
.cat-pagination .page-numbers,
.load-more-wrap .page-numbers {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);
  transition:all .2s;text-decoration:none;
}
.pagination .page-numbers.current,
.rev-pagination .page-numbers.current,
.cat-pagination .page-numbers.current,
.load-more-wrap .page-numbers.current {
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#0d0f14;border-color:transparent;font-weight:700;
  box-shadow:0 4px 14px rgba(79,195,247,.25);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   コラム記事セクション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.column-section {
  padding:72px 24px;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(22,25,33,0.6) 100%);
  border-top:1px solid var(--border);
}
.column-inner { max-width:1000px; margin:0 auto; }

/* ヘッダー */
.column-head { text-align:center; margin-bottom:40px; }
.column-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(79,195,247,.08); border:1px solid rgba(79,195,247,.2);
  border-radius:50px; padding:5px 16px; font-size:12px;
  color:var(--accent); margin-bottom:14px; letter-spacing:.5px;
}
.column-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,3vw,32px); font-weight:700;
  line-height:1.3; margin-bottom:10px;
}
.column-title-accent {
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.column-lead { font-size:14px; color:var(--muted); }

/* グリッド */
.column-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
@media(max-width:640px) {
  .column-grid { grid-template-columns:1fr; }
}

/* カード */
.col-card {
  display:flex; align-items:flex-start; gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px; padding:18px;
  text-decoration:none; color:var(--text);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.col-card:hover {
  border-color:rgba(79,195,247,.35);
  background:var(--surface2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.col-card--featured {
  grid-column: span 1;
  border-color:rgba(79,195,247,.2);
  background:linear-gradient(135deg,rgba(79,195,247,.06),rgba(124,111,247,.04));
}

/* アイコン */
.col-card-icon {
  flex-shrink:0; width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}

/* 本文 */
.col-card-body { flex:1; min-width:0; }
.col-card-cat {
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.8px;
  color:var(--accent); text-transform:uppercase;
  margin-bottom:5px;
}
.col-card-title {
  font-size:14px; font-weight:700; line-height:1.45;
  margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.col-card-excerpt {
  font-size:12px; color:var(--muted); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  margin:0;
}

/* 矢印 */
.col-card-arrow {
  flex-shrink:0; color:var(--muted); font-size:18px;
  transition:transform .2s; align-self:center;
}
.col-card:hover .col-card-arrow { transform:translateX(4px); color:var(--accent); }

/* もっと見るボタン */
.column-more { text-align:center; margin-top:28px; }
.column-more-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  border:1px solid rgba(79,195,247,.3);
  border-radius:50px; padding:11px 28px;
  font-size:13px; font-weight:700; color:var(--accent);
  text-decoration:none; transition:all .2s;
}
.column-more-btn:hover {
  background:rgba(79,195,247,.08);
  border-color:var(--accent);
  transform:translateY(-1px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   初心者スタートガイド
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.starter-section {
  padding:72px 24px;
  background:linear-gradient(135deg,rgba(124,111,247,.04) 0%,rgba(79,195,247,.04) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.starter-inner { max-width:960px; margin:0 auto; text-align:center; }
.starter-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(124,111,247,.1); border:1px solid rgba(124,111,247,.25);
  border-radius:50px; padding:5px 16px; font-size:12px;
  color:var(--accent2); margin-bottom:14px; letter-spacing:.5px;
}
.starter-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,3vw,32px); font-weight:700;
  line-height:1.3; margin-bottom:10px;
}
.starter-accent {
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.starter-lead { font-size:14px; color:var(--muted); margin-bottom:48px; }

/* ステップ */
.starter-steps {
  display:flex; align-items:flex-start; gap:0;
  justify-content:center;
}
.starter-step {
  flex:1; max-width:280px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px; padding:28px 22px;
  text-align:center;
  transition:all .2s;
}
.starter-step:hover {
  border-color:rgba(79,195,247,.35);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.starter-step-arrow {
  align-self:center; color:var(--muted);
  font-size:28px; padding:0 12px;
  flex-shrink:0;
}
.starter-step-num {
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2px;
  color:var(--accent); margin-bottom:10px;
}
.starter-step-icon { font-size:36px; margin-bottom:12px; }
.starter-step-title {
  font-size:16px; font-weight:700; margin-bottom:10px;
}
.starter-step-body {
  font-size:13px; color:var(--muted); line-height:1.7;
  margin-bottom:16px;
}
.starter-step-link {
  font-size:12px; font-weight:700; color:var(--accent);
  text-decoration:none;
  border:1px solid rgba(79,195,247,.3);
  border-radius:50px; padding:6px 16px;
  display:inline-block;
  transition:all .2s;
}
.starter-step-link:hover {
  background:rgba(79,195,247,.1);
  border-color:var(--accent);
}
@media(max-width:680px) {
  .starter-steps { flex-direction:column; align-items:center; gap:12px; }
  .starter-step { max-width:100%; width:100%; }
  .starter-step-arrow { transform:rotate(90deg); padding:4px 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   人気フレーバーランキング
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flavor-rank-section {
  padding:72px 24px;
  background:var(--bg);
  border-top:1px solid var(--border);
}
.flavor-rank-inner { max-width:760px; margin:0 auto; }
.flavor-rank-head { text-align:center; margin-bottom:36px; }
.flavor-rank-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,160,80,.1); border:1px solid rgba(255,160,80,.25);
  border-radius:50px; padding:5px 16px; font-size:12px;
  color:#ffa050; margin-bottom:14px; letter-spacing:.5px;
}
.flavor-rank-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(22px,3vw,32px); font-weight:700;
  line-height:1.3; margin-bottom:10px;
}
.flavor-rank-accent {
  background:linear-gradient(90deg,#ffa050,#ff6080);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.flavor-rank-lead { font-size:13px; color:var(--muted); }

/* リスト */
.flavor-rank-list { display:flex; flex-direction:column; gap:10px; }
.flavor-rank-item {
  display:flex; align-items:center; gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px; padding:16px 18px;
  transition:all .2s;
}
.flavor-rank-item:first-child {
  border-color:rgba(255,215,0,.3);
  background:linear-gradient(135deg,rgba(255,215,0,.05),var(--surface));
}
.flavor-rank-item:hover {
  border-color:rgba(255,160,80,.35);
  transform:translateX(4px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.flr-rank {
  font-family:'Space Grotesk',sans-serif;
  font-size:22px; font-weight:700;
  min-width:36px; text-align:center;
}
.flr-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.flr-body { flex:1; min-width:0; }
.flr-name {
  font-size:15px; font-weight:700; margin-bottom:3px;
  display:flex; align-items:center; gap:8px;
}
.flr-badge {
  font-size:10px; font-weight:700;
  background:rgba(79,195,247,.15); color:var(--accent);
  border:1px solid rgba(79,195,247,.3);
  border-radius:50px; padding:2px 8px;
}
.flr-desc { font-size:12px; color:var(--muted); line-height:1.6; margin:0; }
.flr-link {
  font-size:12px; font-weight:700; color:var(--accent);
  text-decoration:none; white-space:nowrap;
  flex-shrink:0;
  transition:color .2s;
}
.flr-link:hover { color:var(--accent2); }

/* もっと見る */
.flavor-rank-more { text-align:center; margin-top:24px; }
.flavor-rank-more-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,rgba(255,160,80,.1),rgba(255,96,128,.08));
  border:1px solid rgba(255,160,80,.3);
  border-radius:50px; padding:12px 28px;
  font-size:13px; font-weight:700; color:#ffa050;
  text-decoration:none; transition:all .2s;
}
.flavor-rank-more-btn:hover {
  background:linear-gradient(135deg,rgba(255,160,80,.18),rgba(255,96,128,.14));
  border-color:#ffa050;
  transform:translateY(-1px);
}
@media(max-width:500px) {
  .flr-link { display:none; }
  .flavor-rank-item { padding:14px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ベイプサイン購入バナー（トップページ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vs-purchase-banner {
  background:linear-gradient(135deg,#0a2a1a 0%,#0d3321 50%,#0a2a1a 100%);
  border-bottom:1px solid rgba(76,175,130,0.25);
  padding:14px 24px;
}
.vs-pb-inner {
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.vs-pb-left {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  min-width:0;
}
.vs-pb-label {
  font-size:13px; color:rgba(255,255,255,0.7);
  white-space:nowrap;
}
.vs-pb-brand {
  font-family:'Space Grotesk',sans-serif;
  font-size:17px; font-weight:700;
  color:#4caf82;
  white-space:nowrap;
}
.vs-pb-desc {
  font-size:12px; color:rgba(255,255,255,0.45);
  white-space:nowrap;
}
.vs-pb-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(90deg,#4caf82,#3d9e73);
  color:#fff; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:50px;
  text-decoration:none; white-space:nowrap;
  transition:all .2s; box-shadow:0 4px 14px rgba(76,175,130,0.3);
}
.vs-pb-btn:hover {
  opacity:.88; transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(76,175,130,0.4);
}
@media(max-width:640px) {
  .vs-pb-inner { flex-direction:column; align-items:flex-start; gap:10px; }
  .vs-pb-btn { width:100%; justify-content:center; }
  .vs-pb-desc { display:none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ブランドページ 購入バナー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-buy-banner {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,rgba(76,175,130,0.08),rgba(76,175,130,0.04));
  border:1px solid rgba(76,175,130,0.25);
  border-radius:14px; padding:16px 20px;
  text-decoration:none; color:var(--text);
  margin-bottom:20px;
  transition:all .2s;
}
.brand-buy-banner:hover {
  background:linear-gradient(135deg,rgba(76,175,130,0.14),rgba(76,175,130,0.08));
  border-color:rgba(76,175,130,0.45);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(76,175,130,0.15);
}
.brand-buy-icon {
  font-size:24px; flex-shrink:0;
}
.brand-buy-text {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:3px;
}
.brand-buy-title {
  font-size:15px; font-weight:700;
  color:#4caf82;
}
.brand-buy-sub {
  font-size:12px; color:var(--muted);
}
.brand-buy-arrow {
  font-size:22px; color:#4caf82;
  flex-shrink:0; transition:transform .2s;
}
.brand-buy-banner:hover .brand-buy-arrow {
  transform:translateX(4px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   口コミカード内ベイプサインリンク
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rev-vs-link {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.rev-vs-link a {
  font-size:12px;
  font-weight:700;
  color:#4caf82;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:opacity .2s;
}
.rev-vs-link a:hover {
  opacity:.75;
}