/* =========================================================
   禁断のおまじない展 — Design System / Tokens
   トンマナ: 赤×黄 ポップ・キッチュ / 和の呪物マキシマリズム
   KV由来カラー: #E20F2A(赤) #FCC81C(黄) #0A0807(黒) #F3E7D9(和紙)
   ========================================================= */

/* Google Fonts — Zen Maru Gothic（角丸ゴシック / 全テキスト共通） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

:root{
  /* ---------- Color: Core (KV由来) ---------- */
  --c-red:          #e6001a;  /* 主役・ブランド赤 */
  --c-red-deep:     #a30013;  /* 影・濃赤 */
  --c-red-dark:     #6b000d;  /* 最暗赤（背景沈め） */
  --c-yellow:       #e4b919;  /* ハイライト・袋文字フィル */
  --c-yellow-hi:    #f2ca1f;  /* さらに鮮やかな黄（強調） */
  --c-ink:          #0A0807;  /* 黒（文字・縁取り） */
  --c-ink-soft:     #291913;  /* 焦げ茶寄りの黒 */
  --c-paper:        #FFFFFF;  /* サブ＝白（明テキスト） */
  --c-paper-2:      #EDEDED;  /* サブ くすみ */
  --c-white:        #FFFFFF;

  /* ---------- Color: Semantic ---------- */
  --bg:             var(--c-ink);     /* 既定背景（暗） */
  --bg-pop:         var(--c-red);     /* 派手背景 */
  --bg-paper:       var(--c-paper);   /* 明背景セクション */
  --surface:        #14100E;          /* カード面（暗） */
  --text:           var(--c-paper);   /* 暗背景上の文字 */
  --text-on-paper:  var(--c-ink);     /* 明背景上の文字 */
  --text-muted:     #B9A892;          /* 補助テキスト */
  --accent:         var(--c-yellow);  /* アクセント */
  --line:           var(--c-ink);     /* 縁取り・罫 */
  --danger:         var(--c-red);     /* 注意・お呪い警告 */

  /* ---------- Typography: Family（VDL V7丸ゴシック / 未読込時はZen Maru Gothicで代替） ---------- */
  --font-display: "vdl-v7marugothic", "Zen Maru Gothic", sans-serif; /* 巨大見出し（900） */
  --font-accent:  "vdl-v7marugothic", "Zen Maru Gothic", sans-serif; /* 中見出し・帯（700） */
  --font-hand:    "vdl-v7marugothic", "Zen Maru Gothic", sans-serif; /* 注釈（500） */
  --font-body:    "vdl-v7marugothic", "Zen Maru Gothic", sans-serif; /* 本文（500） */

  /* ---------- Typography: Scale (clampでレスポンシブ) ---------- */
  --fz-display:  clamp(40px, 11vw, 88px);   /* ヒーロー級 */
  --fz-h1:       clamp(30px, 7.5vw, 56px);
  --fz-h2:       clamp(24px, 5.5vw, 40px);
  --fz-h3:       clamp(19px, 4vw, 26px);
  --fz-lead:     clamp(16px, 2.4vw, 20px);
  --fz-body:     16px;
  --fz-small:    14px;
  --fz-caption:  12px;

  --lh-tight: 1.15;
  --lh-base:  1.8;
  --ls-wide:  0.04em;

  /* ---------- Spacing (8基準) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(48px, 10vw, 96px);  /* セクション上下余白 */
  --container:  720px;                    /* 本文最大幅（SP起点LP） */

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------- Border ---------- */
  --bw: 3px;                 /* 標準の太縁取り（キッチュ感） */
  --bw-bold: 5px;

  /* ---------- Shadow / Pop ---------- */
  --shadow-pop:  4px 4px 0 var(--c-ink);          /* ベタ影（ポップ） */
  --shadow-pop-red: 4px 4px 0 var(--c-red-deep);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.35);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: .2s;
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fz-body);
  line-height:var(--lh-base);
  color:var(--text);
  background:var(--bg);
}

/* =========================================================
   Utilities
   ========================================================= */
.u-container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
.u-section{ padding-block:var(--section-y); }
.u-paper{ background:var(--bg-paper); color:var(--text-on-paper); }
.u-pop{ background:var(--bg-pop); color:var(--c-white); }
.u-center{ text-align:center; }

/* 袋文字（KVの黄フィル×黒縁）— 見出しの主役表現 */
.u-outline{
  font-family:var(--font-display);
  color:var(--c-yellow);
  line-height:var(--lh-tight);
  -webkit-text-stroke: 2px var(--c-ink);
  paint-order: stroke fill;
  text-shadow: var(--shadow-pop-red);
}
.u-outline--red{ color:var(--c-red); -webkit-text-stroke:2px var(--c-ink); text-shadow:3px 3px 0 var(--c-yellow); }

/* 縦書き（背景の呪い文言用） */
.u-vertical{ writing-mode:vertical-rl; text-orientation:upright; }

/* =========================================================
   Typography roles
   ========================================================= */
.t-display{ font-family:var(--font-display); font-size:var(--fz-display); line-height:var(--lh-tight); }
.t-h1{ font-family:var(--font-display); font-size:var(--fz-h1); line-height:var(--lh-tight); }
.t-h2{ font-family:var(--font-accent);  font-size:var(--fz-h2); line-height:1.3; }
.t-h3{ font-family:var(--font-accent);  font-size:var(--fz-h3); line-height:1.4; }
.t-lead{ font-size:var(--fz-lead); }
.t-hand{ font-family:var(--font-hand); }
.t-caption{ font-size:var(--fz-caption); letter-spacing:var(--ls-wide); color:var(--text-muted); }

/* =========================================================
   Components
   ========================================================= */

/* --- Button --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-accent); font-size:var(--fz-body);
  padding:14px 28px; border:var(--bw) solid var(--c-ink);
  border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--primary{ background:var(--c-red); color:var(--c-white); box-shadow:var(--shadow-pop); }
.btn--accent{ background:var(--c-yellow); color:var(--c-ink); box-shadow:var(--shadow-pop); }
.btn--ghost{ background:transparent; color:var(--c-ink); }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--c-ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--c-ink); }
.btn--lg{ padding:18px 40px; font-size:var(--fz-lead); }

/* --- はんこ / スタンプ（KVの「NOT」「展」風 円形印） --- */
.stamp{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  width:88px; height:88px; border-radius:50%;
  background:var(--c-red); color:var(--c-white);
  border:var(--bw) solid var(--c-white);
  font-family:var(--font-accent); font-size:var(--fz-small); line-height:1.25;
  box-shadow:0 0 0 var(--bw) var(--c-red);
  transform:rotate(-8deg);
}

/* --- セクション見出しラベル（帯） --- */
.tag{
  display:inline-block; font-family:var(--font-accent); font-size:var(--fz-small);
  letter-spacing:var(--ls-wide); padding:6px 16px; border-radius:var(--r-pill);
  background:var(--c-ink); color:var(--c-yellow);
}

/* --- カード --- */
.card{
  background:var(--surface); border:var(--bw) solid var(--c-ink);
  border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--shadow-pop);
}
.card--paper{ background:var(--c-white); color:var(--text-on-paper); }

/* --- お呪い注意ボックス（⚠️代償があります 系） --- */
.warn{
  border:var(--bw) dashed var(--c-red);
  background:rgba(226,15,42,.08);
  color:var(--c-red); font-family:var(--font-hand);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-sm);
}

/* --- ニュース黒帯 --- */
.news-bar{
  background:var(--c-ink); color:var(--c-yellow);
  font-family:var(--font-accent); text-align:center;
  padding:var(--sp-6) var(--sp-4);
}

/* --- 追従CTA --- */
.sticky-cta{
  position:fixed; inset:auto 0 0 0; z-index:50;
  background:var(--c-red); color:var(--c-white);
  font-family:var(--font-accent); text-align:center;
  padding:16px; border-top:var(--bw) solid var(--c-ink);
  box-shadow:0 -4px 16px rgba(0,0,0,.3);
}

/* --- 区切り（ジグザグ/テープ等の装飾フック） --- */
.divider-zig{
  height:14px;
  background:
    linear-gradient(45deg, var(--c-yellow) 25%, transparent 25%) -7px 0/14px 14px,
    linear-gradient(-45deg, var(--c-yellow) 25%, transparent 25%) -7px 0/14px 14px;
}

/* =========================================================
   Zen Maru Gothic ウェイト階層（フォント統一に伴う調整）
   ========================================================= */
body{ font-weight:500; }
.t-display, .t-h1, .sec-title, .u-outline, .u-outline--red, .big-copy{ font-weight:900; }
.t-h2, .t-h3, .t-hand, .tag, .btn, .stamp, .eyebrow, .balloon, .chip,
.news-bar, .sns a, .hero__info dt, .marquee__track span,
.goods-card__name, .goods-card__price, .swiper-ctrl button{ font-weight:700; }
.t-caption{ font-weight:500; }