/* ============================================================
   MY MONSTERS — pages.css (Phase 4-B)
   Product detail pages + /shop page
   Loaded AFTER site.css.
   ============================================================ */

/* ====================================================================
   PD-1  BACK LINK
   ==================================================================== */
.pd-back {
  position: relative; z-index: 1;
  padding: 120px 96px 0;
  max-width: 1600px; margin: 0 auto;
}
.pd-back__link {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.16em; color: var(--fog);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0;
  transition: color 140ms, gap 200ms;
}
.pd-back__link:hover { color: var(--ink); gap: 16px; }
.pd-back__arr { display: inline-block; transition: transform 200ms; }
.pd-back__link:hover .pd-back__arr { transform: translateX(-3px); }

/* ====================================================================
   PD-2  HERO  (100vh, overlay-type, product-color bg)
   ==================================================================== */
.pd-hero {
  position: relative;
  min-height: 100vh;
  padding: 40px 96px 80px;
  overflow: hidden;
  display: flex; flex-direction: column;
  --pd-hero-bg: var(--brand-red);
  --pd-hero-fg: var(--white);
}
.pd-hero[data-product="cho"] { --pd-hero-bg: linear-gradient(180deg, #FAF6F1 0%, #F0E8DE 100%); --pd-hero-fg: var(--ink); }
.pd-hero[data-product="ase"] { --pd-hero-bg: linear-gradient(180deg, #E60000 0%, #B30000 100%); --pd-hero-fg: var(--white); }
.pd-hero[data-product="min"] { --pd-hero-bg: linear-gradient(180deg, #8B47F0 0%, #6022C7 100%); --pd-hero-fg: var(--white); }
.pd-hero[data-product="hug"] { --pd-hero-bg: linear-gradient(180deg, #F7C5D2 0%, #EFA0B6 100%); --pd-hero-fg: var(--ink); }
.pd-hero[data-product="tin"] { --pd-hero-bg: linear-gradient(180deg, #2A4A75 0%, #14253D 100%); --pd-hero-fg: var(--white); }
.pd-hero__bg {
  position: absolute; inset: 0;
  background: var(--pd-hero-bg);
  z-index: 0;
}
.pd-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 80%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(0,0,0,0.12), transparent 60%);
}
.pd-hero__inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  max-width: 1600px; margin: 0 auto; width: 100%;
  color: var(--pd-hero-fg);
}
.pd-hero__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
  padding-top: 40px;
}
.pd-hero__crumb {
  display: flex; flex-direction: column; gap: 4px;
}
.pd-hero__name {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 52px);
  letter-spacing: -0.02em; line-height: 1;
}
.pd-hero__char {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-top: 8px;
}
.pd-hero__char::before { content: "「"; }
.pd-hero__char::after { content: "」"; }
.pd-hero__award {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end; text-align: right;
}
.pd-hero__award-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #FFFFFF; color: var(--brand-red);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.24em;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.25);
}
.pd-hero[data-product="cho"] .pd-hero__award-badge { background: var(--ink); color: var(--brand-red); }
.pd-hero__award-trophy { color: var(--brand-red); font-size: 15px; }
.pd-hero__award-sub {
  font-family: var(--font-jp-body); font-size: 11px;
  opacity: 0.75; letter-spacing: 0.06em;
}
.pd-hero__award-date {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; opacity: 0.6;
}
.pd-hero__soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15); color: var(--pd-hero-fg);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.22em;
}
.pd-hero__soon {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.pd-hero__soon-note {
  font-family: var(--font-jp-body); font-size: 10px;
  letter-spacing: 0.12em; opacity: 0.75; color: var(--pd-hero-fg);
}
.pd-hero[data-product="min"] .pd-hero__soon-badge,
.pd-hero[data-product="hug"] .pd-hero__soon-badge,
.pd-hero[data-product="tin"] .pd-hero__soon-badge {
  background: var(--white); color: var(--ink); border-color: var(--white);
}
.pd-hero[data-product="hug"] .pd-hero__soon-badge { color: var(--ink); }

/* Collab badge — C.H.O活 「白瀬あかりコラボ予告」 */
.pd-hero__collab {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  text-align: right;
}
.pd-hero__collab-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-jp-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.25);
}
.pd-hero__collab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 0 rgba(204,0,0,0.6);
  animation: pd-collab-pulse 1.8s ease-in-out infinite;
}
@keyframes pd-collab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(204,0,0,0); }
}
.pd-hero__collab-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--ink); opacity: 0.55;
}
/* Overlay stage — 3-up row: [10-day pkg] [mascot] [30-day pkg], baseline-aligned */
.pd-hero__stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(50px, 6vw, 80px);
  padding: 24px 0;
  min-height: 480px;
  flex-wrap: nowrap;
}
.pd-hero__chara {
  position: relative;
  z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  filter: drop-shadow(0 24px 36px rgba(10,10,10,0.32));
  animation: pd-mascot-float 5.5s ease-in-out infinite;
  flex-shrink: 0;
}
.pd-hero__chara-img {
  width: clamp(280px, 28vw, 440px);
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}
@keyframes pd-mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
/* Dual-package row — 10-day (small) + 30-day (large), baseline-aligned with mascot */
.pd-hero__pkg {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0;
  filter: drop-shadow(0 28px 44px rgba(10,10,10,0.45));
  flex-shrink: 0;
}
.pd-hero__pkg--30 {
  height: min(420px, 54vh);
  animation: pd-pkg-float 6.5s ease-in-out infinite;
  animation-delay: 0.4s;
}
.pd-hero__pkg--10 {
  height: min(270px, 34vh); /* ~64% of 30-day */
  animation: pd-pkg-float 6.5s ease-in-out infinite;
  animation-delay: 1.1s;
}
@keyframes pd-pkg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.pd-hero__pkg-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.pd-hero__pkg-cap {
  font-family: var(--font-jp-body); font-weight: 400;
  font-size: 12px; letter-spacing: 0.08em;
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0.95;
}
.pd-hero[data-product="cho"] .pd-hero__pkg-cap,
.pd-hero[data-product="hug"] .pd-hero__pkg-cap { color: var(--ink); }

/* CHO / ASE hero — single (30-day) package + enlarged mascot (10-day removed).
   Bigger chara + 30-day package so the freed horizontal space is filled by
   size, not left as empty vertical gap. Centered as a 2-up row. */
.pd-hero__stage--solo { justify-content: center; gap: clamp(12px, 3vw, 56px); }
.pd-hero__stage--solo .pd-hero__chara-img { width: clamp(380px, 42vw, 660px); }
.pd-hero__stage--solo .pd-hero__pkg--30 { height: min(580px, 72vh); }

/* Legacy single-pkg path (kept for products without pkg images yet) */
.pd-hero__pkg-only {
  position: relative; z-index: 1;
  width: min(420px, 38vw);
  filter: drop-shadow(0 28px 44px rgba(10,10,10,0.45));
}
.pd-hero__pkg--placeholder {
  filter: none;
}
.pd-hero__pkg--10.pd-hero__pkg--placeholder .pd-hero__pkg-placeholder {
  width: clamp(160px, 16vw, 220px); height: 100%; aspect-ratio: auto;
}
.pd-hero__pkg--30.pd-hero__pkg--placeholder .pd-hero__pkg-placeholder {
  width: clamp(240px, 26vw, 340px); height: 100%; aspect-ratio: auto;
}
.pd-hero__pkg-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 2.5px dashed rgba(255,255,255,0.5);
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.7);
  font-size: 11px; letter-spacing: 0.2em;
  padding: 32px;
}
.pd-hero[data-product="cho"] .pd-hero__pkg-placeholder,
.pd-hero[data-product="hug"] .pd-hero__pkg-placeholder {
  border-color: rgba(10,10,10,0.3); color: rgba(10,10,10,0.55);
}
.pd-hero__pkg-placeholder-name {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 24px; letter-spacing: -0.01em;
  color: inherit;
}

.pd-hero__bottom {
  display: flex; flex-direction: column; gap: 28px;
  padding-bottom: 8px;
}
.pd-hero__tagline {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.8vw, 60px);
  line-height: 1.25; letter-spacing: 0.005em;
  margin: 0; max-width: 24ch;
}
.pd-hero__tagline-em {
  display: inline-block;
  color: var(--brand-red);
  /* Single font for the whole line so digits (109) and kanji (1日/円/。)
     share identical metrics and render at one uniform size. */
  font-family: 'Noto Sans JP', var(--font-jp-display), system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.5em;
  line-height: 1.1;
  font-feature-settings: 'palt' 0;
}
/* A.S.E tagline — original tagline size, single line on desktop (no
   mid-sentence wrap); wraps normally on small screens. */
.pd-hero__tagline--ase {
  max-width: none; white-space: nowrap;
}
@media (max-width: 820px) {
  .pd-hero__tagline--ase { white-space: normal; }
}
.pd-hero__actions { display: flex; gap: 24px; flex-wrap: wrap; }
.pd-hero__btn {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.22em;
  padding: 20px 32px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: all 160ms;
  border: 1.5px solid var(--pd-hero-fg);
}
.pd-hero__btn--prim { background: var(--pd-hero-fg); color: var(--pd-hero-bg, var(--ink)); }
.pd-hero[data-product="cho"] .pd-hero__btn--prim { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pd-hero[data-product="hug"] .pd-hero__btn--prim { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pd-hero__btn--prim:hover { background: var(--brand-red); border-color: var(--brand-red); color: var(--white); }
.pd-hero__btn--sec { background: transparent; color: var(--pd-hero-fg); }
.pd-hero__btn--sec:hover { background: var(--pd-hero-fg); color: var(--pd-hero-bg, var(--ink)); }
.pd-hero__btn.is-pending { opacity: 0.5; cursor: not-allowed; }
.pd-hero__btn.is-pending:hover { background: transparent; color: var(--pd-hero-fg); border-color: var(--pd-hero-fg); }
/* Rakuten「6月中公開予定」— disabled (no navigation) but keep full 楽天 brand-red #BF0000. */
.pd-hero__btn.pd-hero__btn--rakuten.is-pending,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--rakuten.is-pending,
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten.is-pending {
  background: #BF0000; color: #FFFFFF; border-color: #BF0000;
  opacity: 1; cursor: not-allowed;
}
.pd-hero__btn.pd-hero__btn--rakuten.is-pending:hover,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--rakuten.is-pending:hover,
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten.is-pending:hover {
  background: #BF0000; color: #FFFFFF; border-color: #BF0000;
}
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten.is-pending .pd-hero__btn-arr { color: #FFFFFF; }
/* SHOP RAKUTEN card button — same: 楽天 brand-red fill while disabled. */
.shop-ch__btn.is-disabled.shop-ch__btn--rakuten,
.shop-ch__btn.is-disabled.shop-ch__btn--rakuten:hover {
  background: #BF0000; color: #FFFFFF; border-color: #BF0000; cursor: not-allowed;
}
.pd-hero__btn-arr { transition: transform 200ms; }
.pd-hero__btn:hover:not(.is-pending) .pd-hero__btn-arr { transform: translateX(3px); }

/* ---- Brand-channel CTA buttons (RAKUTEN / AMAZON) ----------------- */
/* High specificity (doubled class) to win over per-product overrides */
.pd-hero__btn.pd-hero__btn--rakuten,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--rakuten {
  background: #BF0000;
  color: #FFFFFF;
  border-color: #BF0000;
  font-family: var(--font-jp-display); font-weight: 900;
  letter-spacing: 0.14em;
}
.pd-hero__btn.pd-hero__btn--rakuten:hover,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--rakuten:hover {
  background: #A00000;
  border-color: #A00000;
  color: #FFFFFF;
}

/* ASE only — invert rakuten button (red-bg hero → white button) */
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten {
  background: #FFFFFF;
  color: #BF0000;
  border-color: #FFFFFF;
}
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten .pd-hero__btn-arr {
  color: #BF0000;
}
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten:hover {
  background: #F5F5F5;
  color: #BF0000;
  border-color: #F5F5F5;
}
.pd-hero__btn.pd-hero__btn--amazon,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--amazon {
  background: #232F3E;
  color: #FFFFFF;
  border-color: #232F3E;
  font-family: var(--font-jp-display); font-weight: 900;
  letter-spacing: 0.14em;
}
.pd-hero__btn.pd-hero__btn--amazon:hover,
.pd-hero[data-product] .pd-hero__btn.pd-hero__btn--amazon:hover {
  background: #131A24;
  border-color: #131A24;
  color: #FFFFFF;
}
.pd-hero__btn--amazon .pd-hero__btn-arr { color: #FF9900; font-weight: 700; }
/* Shop CTA (white section) — default monochrome black when no channel set */
.pd-hero__btn.pd-hero__btn--shop-cta {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.pd-hero__btn.pd-hero__btn--shop-cta:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.pd-hero__scroll {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; opacity: 0.6;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px;
}

/* ---- C.H.O活 hero — kitchen (blender + fruits) photo background + white halos ----- */
.pd-hero[data-product="cho"] .pd-hero__bg {
  background-image: url('assets/cho-card-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pd-hero[data-product="cho"] .pd-hero__name { color: rgb(31, 29, 29); }
/* Title + character label sit top-left over the busy kitchen photo. Keep the
   ink black, but push the white halo hard so they lift off the background. */
.pd-hero[data-product="cho"] .pd-hero__name,
.pd-hero[data-product="cho"] .pd-hero__char {
  text-shadow:
    0 0 12px rgba(255,255,255,0.95),
    0 0 24px rgba(255,255,255,0.8),
    0 0 48px rgba(255,255,255,0.6);
}
/* Faint warm-white scrim anchored top-left, fading toward centre, so the
   title group reads cleanly without flattening the photo. */
.pd-hero[data-product="cho"] .pd-hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 55% 45% at 16% 12%,
    rgba(250,246,241,0.55) 0%,
    rgba(250,246,241,0.28) 45%,
    rgba(250,246,241,0) 75%);
  pointer-events: none;
}
.pd-hero[data-product="cho"] .pd-hero__bg::after {
  /* Soft warm-white scrim fading in toward the bottom so the black tagline
     stays legible over the bright kitchen photo. Top stays clear. */
  display: block;
  background: linear-gradient(180deg,
    rgba(250,246,241,0) 42%,
    rgba(250,246,241,0.30) 72%,
    rgba(250,246,241,0.58) 100%);
}
.pd-hero[data-product="cho"] .pd-hero__chara-img {
  filter:
    drop-shadow(0 0 60px rgba(255,255,255,0.95))
    drop-shadow(0 0 100px rgba(255,255,255,0.8));
}
.pd-hero[data-product="cho"] .pd-hero__pkg-img {
  filter:
    drop-shadow(0 0 30px rgba(255,255,255,1))
    drop-shadow(0 0 60px rgba(255,255,255,0.8))
    drop-shadow(0 0 90px rgba(255,255,255,0.5));
}
.pd-hero[data-product="cho"] .pd-hero__pkg-cap,
.pd-hero[data-product="cho"] .pd-hero__scroll {
  text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.9),
    0 0 60px rgba(255,255,255,0.7);
}
/* Tagline keeps a tighter, lower-opacity halo so the last line
   (「反則だ。」) doesn't bloom into a bright white patch. */
.pd-hero[data-product="cho"] .pd-hero__tagline {
  text-shadow:
    0 1px 3px rgba(255,255,255,0.85),
    0 0 12px rgba(255,255,255,0.55);
}
.pd-hero[data-product="cho"] .pd-hero__btn.pd-hero__btn--rakuten {
  box-shadow: 0 0 80px 30px rgba(255,255,255,0.92);
}
.pd-hero[data-product="cho"] .pd-hero__btn.pd-hero__btn--amazon {
  box-shadow: 0 0 60px 20px rgba(255,255,255,0.9);
}

/* ---- A.S.E活 hero — fire×water photo background + white halos ------ */
.pd-hero[data-product="ase"] .pd-hero__bg {
  background-image: url('assets/ase-hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pd-hero[data-product="ase"] .pd-hero__bg::after {
  /* Dark scrim for text legibility over the fire×water photo. Stronger at the
     top (crumb + badge) and bottom (tagline + CTA + scroll), lighter through
     the middle so the dual image stays vivid. Existing white halos on the
     text/char/packages sit above this and read cleanly against the darkened bg. */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.46) 0%,
    rgba(0,0,0,0.30) 30%,
    rgba(0,0,0,0.28) 60%,
    rgba(0,0,0,0.50) 100%
  );
}
.pd-hero[data-product="ase"] .pd-hero__chara-img {
  filter:
    drop-shadow(0 0 60px rgba(255,255,255,0.95))
    drop-shadow(0 0 100px rgba(255,255,255,0.8));
}
.pd-hero[data-product="ase"] .pd-hero__pkg--30 .pd-hero__pkg-img {
  filter:
    drop-shadow(0 0 60px rgba(255,255,255,0.98))
    drop-shadow(0 0 100px rgba(255,255,255,0.8));
}
.pd-hero[data-product="ase"] .pd-hero__pkg--10 .pd-hero__pkg-img {
  filter:
    drop-shadow(0 0 40px rgba(255,255,255,0.95))
    drop-shadow(0 0 80px rgba(255,255,255,0.7));
}
.pd-hero[data-product="ase"] .pd-hero__pkg-cap,
.pd-hero[data-product="ase"] .pd-hero__tagline,
.pd-hero[data-product="ase"] .pd-hero__scroll {
  text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,0.9),
    0 0 60px rgba(255,255,255,0.7);
}
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--rakuten {
  box-shadow: 0 0 80px 30px rgba(255,255,255,0.92);
}
.pd-hero[data-product="ase"] .pd-hero__btn.pd-hero__btn--amazon {
  box-shadow: 0 0 60px 20px rgba(255,255,255,0.9);
}

/* ====================================================================
   PD-3  OVERVIEW  (key-value vertical stack)
   ==================================================================== */
.pd-overview {
  background: var(--white);
  padding: 140px 96px;
  border-top: 1.5px solid var(--ink);
}
.pd-overview__inner { max-width: 1100px; margin: 0 auto; }
/* 追加① — big heading at the top of the product overview block (CHO / ASE). */
.pd-overview__lead { text-align: center; margin: 0 0 48px; }
.pd-overview__lead-jp {
  display: block;
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(34px, 5vw, 64px); letter-spacing: 0.02em;
  line-height: 1.08; color: var(--ink);
}
.pd-overview__lead-en {
  display: block; margin-top: 10px;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 30px); letter-spacing: 0.04em;
  color: var(--ink);
}
.pd-overview__eyebrow {
  font-family: var(--font-en-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--fog); text-transform: uppercase;
  margin: 0 0 64px;
}
.pd-kv { border-top: 1.5px solid var(--ink); }
.pd-kv__row {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 32px 0;
  border-bottom: 1.5px solid var(--rule-soft);
  align-items: start;
}
.pd-kv__row:last-of-type { border-bottom: 1.5px solid var(--ink); }
.pd-kv__key {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 4px;
}
.pd-kv__val {
  font-family: var(--font-jp-body);
  font-size: 15px; line-height: 1.85;
  color: var(--ink);
}
.pd-kv__val--lead {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 22px; letter-spacing: 0.01em;
  line-height: 1.4;
}
.pd-kv__val-sub {
  display: block;
  font-family: var(--font-jp-body); font-weight: 400;
  font-size: 12px; color: var(--fog); margin-top: 6px;
  letter-spacing: 0.04em;
}
.pd-kv__val-en {
  display: block; margin-top: 12px;
  font-family: var(--font-en-display); font-weight: 400;
  font-size: 13px; font-style: italic; color: var(--fog);
  letter-spacing: 0.04em;
}
.pd-kv__val--ingredients {
  font-size: 13px; line-height: 1.9; color: var(--fog);
  letter-spacing: 0.02em;
}

/* ====================================================================
   PD-4  PAIN BLOCKS  (3-act: problem → monster → resolution)
   ==================================================================== */
.pd-pain { padding: 0; }
.pd-pain__section-cap {
  text-align: center;
  padding: 96px 96px 0;
  background: var(--white);
}
.pd-pain__section-eyebrow {
  font-family: var(--font-en-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--fog); text-transform: uppercase;
  margin: 0 0 18px;
}
.pd-pain__section-title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 auto;
  max-width: 28ch;
  white-space: pre-line;
}

/* Product CM video (ASE & CHO only) — sits between heading and PAIN block 1 */
.product-cm-video {
  position: relative;
  background: var(--white);
  padding: 64px 0 0;
  width: 100%;
  box-sizing: border-box;
}
.product-cm-video > video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
/* Block 1 – Problem */
.pd-pain__block {
  padding: 140px 96px;
  position: relative;
  overflow: hidden;
}
.pd-pain__b1 {
  background: #1A1A1A; color: var(--white);
}
.pd-pain__b1-inner {
  max-width: 880px; margin: 0 auto; text-align: center;
}
.pd-pain__chapter {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.32em; color: rgba(255,255,255,0.4);
  margin: 0 0 40px;
}
.pd-pain__shout-jp {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.35; letter-spacing: 0.01em;
  margin: 0 0 48px;
  color: var(--white);
}
.pd-pain__hl-red { color: var(--brand-red); padding: 0 4px; }
.pd-pain__body-jp {
  font-family: var(--font-jp-body); font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2.0; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
  margin: 0 auto 18px;
  max-width: 56ch;
  white-space: pre-line;
}
/* C.H.O活 — PAIN list (01–05, stacked vertically) */
.pd-pain__b1-list {
  list-style: none;
  margin: 0 auto 44px;
  padding: 0;
  max-width: 60ch;
  text-align: left;
}
.pd-pain__b1-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pd-pain__b1-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.pd-pain__b1-num {
  flex: 0 0 auto;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--brand-red);
  letter-spacing: 0.04em;
}
.pd-pain__b1-itxt {
  font-family: var(--font-jp-body); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}
.pd-pain__b1-closer { margin-top: 8px; }
.pd-pain__b1-closer .pd-pain__body-jp:last-child {
  margin-bottom: 0;
  color: var(--white);
  font-weight: 700;
}

/* Block 2 – Monster reveal — real mascot image override */
.pd-pain__b2-mascot-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative; z-index: 1;
  filter: drop-shadow(0 30px 44px rgba(10,10,10,0.32));
  animation: pd-mascot-float 5.5s ease-in-out infinite;
}

/* Block 2 – Monster reveal (product color bg) */
.pd-pain__b2 {
  background: var(--pd-block-bg, var(--brand-red));
  color: var(--pd-block-fg, var(--white));
}
.pd-pain__b2[data-product="cho"] { --pd-block-bg: linear-gradient(180deg, #F0E8DE 0%, #E5D9CB 100%); --pd-block-fg: var(--ink); }
.pd-pain__b2[data-product="ase"] { --pd-block-bg: linear-gradient(180deg, #CC0000 0%, #A30000 100%); --pd-block-fg: var(--white); }
.pd-pain__b2[data-product="min"] { --pd-block-bg: linear-gradient(180deg, #7C3AED 0%, #5B22BF 100%); --pd-block-fg: var(--white); }
.pd-pain__b2[data-product="hug"] { --pd-block-bg: linear-gradient(180deg, #F4B8C8 0%, #E89AAE 100%); --pd-block-fg: var(--ink); }
.pd-pain__b2[data-product="tin"] { --pd-block-bg: linear-gradient(180deg, #1E3A5F 0%, #102541 100%); --pd-block-fg: var(--white); }

/* CHO-only "all-in-one" connective text block — sits below II-MONSTER.
   Text only, cream background continuing seamlessly from b2's bottom tone.
   (Placeholder position for the future 4-layer card, which will land above
   this block.) */
/* A.S.E high-concentration proof block — sits directly below II-MONSTER.
   Dark stage so the fiery comparison graph blends edge-to-edge; white text
   with a gold accent to echo the graph's "200mg". */
.pd-ase-proof {
  background: #0A0A0A;
  color: var(--white);
  padding: 104px clamp(24px, 4vw, 64px);
  text-align: center;
}
.pd-ase-proof__inner { max-width: 1200px; margin: 0 auto; }
.pd-ase-proof__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(26px, 3.2vw, 44px); letter-spacing: 0.01em;
  line-height: 1.35; margin: 0 0 40px; color: var(--white);
}
.pd-ase-proof__figure { margin: 0 0 38px; }
.pd-ase-proof__img {
  width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 831 / 464;
  display: block; margin: 0 auto;
  border-radius: 12px;
}
.pd-ase-proof__lead {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(18px, 2vw, 26px); line-height: 1.5;
  margin: 0 0 18px; color: var(--white);
}
.pd-ase-proof__note {
  font-family: var(--font-jp-body); font-weight: 400;
  font-size: 0.55em; color: rgba(255,255,255,0.7);
  margin-left: 5px; vertical-align: 0.12em; letter-spacing: 0.02em;
}
.pd-ase-proof__body {
  font-family: var(--font-jp-body); font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.9;
  color: rgba(255,255,255,0.85); margin: 0;
}
.pd-ase-proof__body em {
  font-style: normal; font-weight: 800; color: #F2B845;
}
@media (max-width: 760px) {
  .pd-ase-proof { padding: 64px 24px; }
}

/* CHO 4-layer "all-in-one biotics" block — sits between II-MONSTER and the
   all-in-one text block. Cream bg, orange accents, 4 uniform cards. */
.pd-cho-layers {
  --cho-orange: #E8881A;
  background: #E5D9CB;
  padding: 104px 96px;
  text-align: center;
}
.pd-cho-layers__inner { max-width: 1280px; margin: 0 auto; }
.pd-cho-layers__eyebrow {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cho-orange); margin: 0 0 14px;
}
.pd-cho-layers__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(26px, 3.2vw, 44px); letter-spacing: 0.02em;
  color: var(--ink); margin: 0 0 56px;
}
.pd-cho-layers__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; align-items: stretch;
}
.pd-cho-layer {
  position: relative;
  background: var(--white);
  border: 1.5px solid #EAD9BC;
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 40px -22px rgba(124, 80, 12, 0.45);
  text-align: center;
}
.pd-cho-layer__no {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--cho-orange);
}
.pd-cho-layer__imgwrap {
  width: 100%; aspect-ratio: 3 / 4;
  background: #FBF2DE;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pd-cho-layer__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Text area below the fixed-height image area. Grows to fill the card so
   the image area (and the capsule) stays in the same place on every card,
   regardless of whether the caption is 1 or 2 lines (04 has furigana). */
.pd-cho-layer__text {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
.pd-cho-layer__big {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(22px, 1.9vw, 28px); letter-spacing: 0.04em;
  color: var(--ink); margin: 22px 0 0; line-height: 1.25;
}
.pd-cho-layer__yomi {
  font-family: var(--font-jp-body); font-weight: 500;
  font-size: 0.5em; letter-spacing: 0.04em; color: var(--cho-orange);
}
/* Card 4 (乳酸菌生産物質) — long name: drop the furigana to its own line
   below the name and trim the name size so it fits the same card width. */
.pd-cho-layer__big--stack {
  font-size: clamp(18px, 1.5vw, 22px);
}
.pd-cho-layer__big--stack .pd-cho-layer__yomi {
  display: block; font-size: 0.62em; margin-top: 4px;
}
.pd-cho-layer__sub {
  font-family: var(--font-jp-body); font-weight: 500;
  font-size: 14px; line-height: 1.6; color: var(--fog);
  margin: 8px 18px 26px;
}
.pd-cho-layers__closer {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(18px, 2vw, 26px); letter-spacing: 0.02em;
  color: var(--ink); margin: 56px 0 0;
}
.pd-cho-layers__em { color: var(--cho-orange); }
@media (max-width: 980px) {
  .pd-cho-layers { padding: 72px 24px; }
  .pd-cho-layers__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 520px) {
  .pd-cho-layers__grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}
/* 追加③ — keep the 「全部入り」 closer on ONE line on phones (shrink, no wrap). */
@media (max-width: 600px) {
  .pd-cho-layers__closer { font-size: clamp(13px, 4.4vw, 18px); }
}
.pd-cho-aio {
  background: linear-gradient(180deg, #E5D9CB 0%, #F1EADF 100%);
  color: var(--ink);
  text-align: center;
  padding: 104px 96px;
}
.pd-cho-aio__inner { max-width: 980px; margin: 0 auto; }
.pd-cho-aio__lead {
  font-family: var(--font-jp-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.6; margin: 0 0 10px;
}
.pd-cho-aio__head {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.5; margin: 0 0 40px;
  white-space: nowrap;
}
.pd-cho-aio__tag { color: var(--brand-red); }
.pd-cho-aio__body {
  font-family: var(--font-jp-body); font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.95; margin: 0;
}
.pd-cho-aio__body em { font-style: normal; font-weight: 800; }
.pd-cho-aio__price {
  font-family: var(--font-en-display); font-weight: 800;
  color: var(--brand-red);
  font-size: 1.3em; letter-spacing: -0.01em;
  margin: 0 0.04em;
}
@media (max-width: 900px) {
  .pd-cho-aio { padding: 64px 24px; }
  .pd-cho-aio__head { white-space: normal; font-size: clamp(22px, 5.6vw, 31px); text-wrap: balance; }
}

.pd-pain__b2-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
  max-width: 1400px; margin: 0 auto;
}
.pd-pain__b2-mascot {
  position: relative;
  display: flex; justify-content: center;
}
.pd-pain__b2-mascot-glow {
  position: absolute; inset: -20px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 65%);
  filter: blur(24px); z-index: -1;
}
.pd-pain__b2-text { max-width: 520px; }
.pd-pain__b2-cap {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; opacity: 0.7;
  margin: 0 0 24px;
}
.pd-pain__b2-lede {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.3; letter-spacing: 0.005em;
  margin: 0 0 32px;
}
/* A.S.E II-MONSTER heading — widen the column a touch + trim the size so
   the lede settles into a balanced 2 lines (no orphaned 「る。」). */
.pd-pain__b2[data-product="ase"] .pd-pain__b2-text { max-width: 600px; }
.pd-pain__b2[data-product="ase"] .pd-pain__b2-lede {
  font-size: clamp(26px, 2.9vw, 40px);
  text-wrap: balance;
}
.pd-pain__b2-body {
  font-family: var(--font-jp-body);
  font-size: 15px; line-height: 1.95;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin: 0 0 16px;
  white-space: pre-line;
}
/* CHO / ASE II — MONSTER: enlarge the two body lines for readability. */
.pd-pain__b2[data-product="cho"] .pd-pain__b2-body,
.pd-pain__b2[data-product="ase"] .pd-pain__b2-body {
  font-size: 19px; line-height: 2.1;
}

/* Block 3 – Weapons (3 ingredient cards) */
.pd-pain__b3 {
  background: var(--white); color: var(--ink);
}
.pd-pain__b3-inner { max-width: 1400px; margin: 0 auto; }
.pd-pain__b3-head { text-align: center; margin-bottom: 64px; }
.pd-pain__b3-cap {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.32em;
  color: var(--brand-red); text-transform: uppercase;
  margin: 0 0 12px;
}
.pd-pain__b3-title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.25; color: var(--ink);
  margin: 0;
}
.pd-pain__b3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
.pd-weapon {
  background: #FAFAFA;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 32px 28px 36px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
  transition: transform 200ms;
}
.pd-weapon:hover { transform: translateY(-4px); }
.pd-weapon__video {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  margin: -8px 0 4px;
  background: transparent;
}
.pd-weapon__video > video,
.pd-weapon__video > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.pd-weapon__index {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--fog);
}
.pd-weapon__name {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 24px; line-height: 1.25;
  color: var(--ink);
}
.pd-weapon__amount {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--brand-red);
}
.pd-weapon[data-amount-as-name="true"] .pd-weapon__amount {
  font-size: 24px; line-height: 1.25; letter-spacing: 0.02em;
  white-space: pre-line;
}
.pd-weapon__desc {
  font-family: var(--font-jp-body); font-size: 14px;
  line-height: 1.75; color: var(--fog);
  margin-top: auto;
}
.pd-weapon__note {
  font-family: var(--font-jp-body); font-size: 11px;
  line-height: 1.5; color: var(--ash);
  margin-top: 10px; letter-spacing: 0.02em;
}
.pd-pain__b3-foot {
  text-align: center;
  padding: 48px 0 0;
  border-top: 1.5px solid var(--rule-soft);
}
/* CHO price block — full-bleed Tokyo-tower banner behind the ¥109 copy,
   with a white gradient overlay for legibility. Scoped to CHO only. */
.pd-pain__b3-foot[data-product="cho"] {
  position: relative;
  width: 100vw;
  margin: 48px 0 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 64px 24px;
  border-top: none;
  min-height: min(50vw, 760px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background-image: url('assets/cho-price-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Localized soft white glow behind the text only — keeps the photo at full
   strength everywhere else and fades fully transparent at the edges. */
.pd-pain__b3-foot[data-product="cho"] .pd-pain__b3-foot-text {
  max-width: 820px;
  padding: clamp(76px, 12vw, 176px) clamp(40px, 8vw, 120px);
  background: radial-gradient(ellipse 70% 60% at center, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 35%, rgba(255,255,255,0.0) 65%);
}
/* ASE price block — same full-bleed Tokyo-tower banner treatment as CHO,
   behind the ¥76 copy. Localized white radial glow for legibility; no
   full-section overlay. Scoped to ASE only. */
.pd-pain__b3-foot[data-product="ase"] {
  position: relative;
  width: 100vw;
  margin: 48px 0 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 64px 24px;
  border-top: none;
  min-height: min(50vw, 760px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background-image: url('assets/ase-price-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.pd-pain__b3-foot[data-product="ase"] .pd-pain__b3-foot-text {
  max-width: 820px;
  padding: clamp(76px, 12vw, 176px) clamp(40px, 8vw, 120px);
  background: radial-gradient(ellipse 70% 60% at center, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 35%, rgba(255,255,255,0.0) 65%);
}
.pd-pain__b3-cost {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.pd-pain__b3-cost-em {
  color: var(--brand-red);
  font-family: var(--font-en-display);
  font-size: 1.25em;
  letter-spacing: -0.01em;
}
.pd-pain__b3-note {
  display: block;
  font-family: var(--font-jp-body); font-weight: 400;
  font-size: 12px; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--ash);
  margin-top: 8px;
}
.pd-pain__b3-closer {
  font-family: var(--font-jp-body); font-size: 14px;
  line-height: 1.95;
  color: var(--fog); margin: 0;
}
/* ASE price block — enlarge the closing body lines (and nudge the note up a
   touch) for readability. Scoped to ASE only; heading/¥76 unchanged. */
.pd-pain__b3-foot[data-product="ase"] .pd-pain__b3-closer {
  font-size: 18px; line-height: 2.05;
}
.pd-pain__b3-foot[data-product="ase"] .pd-pain__b3-note {
  font-size: 13px; line-height: 1.7;
}

/* ====================================================================
   PD-5  SCENES  (3 horizontal cards)
   ==================================================================== */
.pd-scenes {
  background: #FAFAFA;
  padding: 140px 96px;
  border-top: 1.5px solid var(--rule-soft);
}
.pd-scenes__inner { max-width: 1400px; margin: 0 auto; }
.pd-scenes__head { text-align: center; margin-bottom: 64px; }
.pd-scenes__eyebrow {
  font-family: var(--font-en-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--fog); text-transform: uppercase;
  margin: 0 0 18px;
}
.pd-scenes__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--ink); margin: 0;
}
.pd-scenes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pd-scenes__grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* CHO 4-card stage — widen toward full-bleed so each of the 4 cards keeps
   its pre-4-up landscape size and the background Luma video reads cleanly.
   Scoped via :has so the 3-card product pages are untouched. */
.pd-scenes:has(.pd-scenes__grid[data-count="4"]) {
  padding-left: clamp(20px, 2.5vw, 48px);
  padding-right: clamp(20px, 2.5vw, 48px);
}
.pd-scenes:has(.pd-scenes__grid[data-count="4"]) .pd-scenes__inner {
  max-width: 1280px;
}
/* 2×2 grid of landscape cards — each card is 16:10 so the background
   video/placeholder reads wide rather than cramped-tall. */
.pd-scenes__grid[data-count="4"] > .pd-scene {
  aspect-ratio: 16 / 10;
  min-height: 0;
}
/* CHO 6-card timing grid — 3×2 landscape cards, same widened canvas + 16:10
   card ratio as the 4-up layout. Scoped via :has so other pages are untouched. */
.pd-scenes:has(.pd-scenes__grid[data-count="6"]) {
  padding-left: clamp(20px, 2.5vw, 48px);
  padding-right: clamp(20px, 2.5vw, 48px);
}
.pd-scenes:has(.pd-scenes__grid[data-count="6"]) .pd-scenes__inner {
  max-width: 1280px;
}
.pd-scenes__grid[data-count="6"] {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pd-scenes__grid[data-count="6"] > .pd-scene {
  aspect-ratio: 16 / 10;
  min-height: 0;
}
/* Placeholder scene card (CHO 04) — striped temp frame + soft wash so the
   text overlay stays legible until the real character art is supplied. */
.pd-scene[data-placeholder="true"] .pd-scene__ph {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(45deg, #efe9dd 0 14px, #e7e0d1 14px 28px);
}
.pd-scene[data-placeholder="true"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.58) 50%, rgba(255,255,255,0.28) 100%);
}
.pd-scene[data-placeholder="true"] > .pd-scene__num,
.pd-scene[data-placeholder="true"] > .pd-scene__title,
.pd-scene[data-placeholder="true"] > .pd-scene__desc,
.pd-scene[data-placeholder="true"] > .pd-scene__mark {
  position: relative; z-index: 2;
}
.pd-scene__ph-tag {
  position: absolute; left: 20px; bottom: 18px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: rgba(0,0,0,0.4);
}
@media (max-width: 1200px) {
  .pd-scenes__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  .pd-scenes__grid[data-count="6"] { grid-template-columns: repeat(2, 1fr); }
}
.pd-scene {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 48px 36px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 280px;
  position: relative; overflow: hidden;
}
.pd-scene__num {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.02em;
  color: var(--brand-red);
}
.pd-scene__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 22px; letter-spacing: 0.01em;
  color: var(--ink);
}
.pd-scene__desc {
  font-family: var(--font-jp-body); font-size: 14px;
  line-height: 1.7; color: var(--fog);
  margin-top: auto;
}
/* CHO 6-card timing section — body copy in solid black (#0A0A0A) for
   legibility over the white wash. Scoped to data-count="6" (CHO only). */
.pd-scenes__grid[data-count="6"] .pd-scene__desc {
  color: #0A0A0A;
}
.pd-scene__mark {
  position: absolute; right: 24px; bottom: 24px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--ash);
  white-space: pre-line;
}
.pd-scene[data-has-side-video="true"] {
  padding-right: clamp(140px, 38%, 220px);
}
/* Landscape (full-background) mode — card 01 of CHO. The video fills the
   card; the right-padding expansion for the side-icon layout is reverted
   so text reflows back to the card's normal column. */
.pd-scene[data-video-landscape="true"] {
  padding-right: 36px;
}
/* Stack the scene's text children above the video + overlay. */
.pd-scene[data-video-landscape="true"] > .pd-scene__num,
.pd-scene[data-video-landscape="true"] > .pd-scene__title,
.pd-scene[data-video-landscape="true"] > .pd-scene__desc,
.pd-scene[data-video-landscape="true"] > .pd-scene__mark {
  position: relative;
  z-index: 3;
}
/* Left-leaning white wash for legibility (per spec). */
.pd-scene[data-video-landscape="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.10) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
/* The "ハピモン" caption sits in the right-bottom corner where the wash is
   thinnest — give it a small text-shadow so it stays legible on any frame. */
.pd-scene[data-video-landscape="true"] > .pd-scene__mark {
  color: var(--ink);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 255, 255, 0.7);
}
.pd-scene__side-video {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 85%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  pointer-events: none;
  /* Transparent WebM (VP9 + ALPHA_MODE=1) — guarantee the alpha channel is
     honoured: no UA-default opaque box, no inherited blend mode, and a
     fresh stacking context so nothing above can knock the alpha out. */
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal;
  isolation: isolate;
  z-index: 2;
}
.pd-scene__side-video::-webkit-media-controls { display: none !important; }

/* Landscape-mode scene video — opaque 16:9 footage used as the entire
   card background (e.g. CHO scene 01). Fills the card; text + overlay
   sit above via z-index. The card's overflow:hidden + border-radius
   clip the video to the card's rounded corners. */
.pd-scene__side-video[data-mode="landscape"] {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
  transform: none;
  border-radius: 0;
  object-fit: cover;
  background: transparent !important;
  background-color: transparent !important;
  z-index: 1;
}

/* ====================================================================
   PD-6  FAQ  (accordion)
   ==================================================================== */
.pd-faq {
  background: var(--white);
  padding: 140px 96px;
  border-top: 1.5px solid var(--rule-soft);
}
.pd-faq__inner { max-width: 880px; margin: 0 auto; }
.pd-faq__head { margin-bottom: 64px; text-align: center; }
.pd-faq__eyebrow {
  font-family: var(--font-en-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--fog); text-transform: uppercase;
  margin: 0 0 16px;
}
.pd-faq__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--ink); margin: 0;
}
/* Mobile (smartphone) only — keep the FAQ heading on one line and the
   heading block centered. Desktop/tablet (≥601px) untouched. */
@media (max-width: 600px) {
  .pd-faq__head { text-align: center; }
  .pd-faq__eyebrow, .pd-faq__title { text-align: center; }
  .pd-faq__title { font-size: clamp(20px, 6.4vw, 28px); }
}
.pd-faq__list { border-top: 1.5px solid var(--ink); }
.pd-faq__item {
  border-bottom: 1.5px solid var(--rule-soft);
}
.pd-faq__item:last-child { border-bottom: 1.5px solid var(--ink); }
.pd-faq__q {
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 17px; letter-spacing: 0.005em;
  color: var(--ink);
  transition: color 140ms;
}
.pd-faq__q:hover { color: var(--brand-red); }
.pd-faq__q-no {
  font-family: var(--font-en-display); font-weight: 700;
  color: var(--brand-red); font-size: 13px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-right: 8px;
}
.pd-faq__q-tx { flex: 1; }
.pd-faq__q-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  position: relative;
  transition: transform 200ms;
}
.pd-faq__q-icon::before, .pd-faq__q-icon::after {
  content: ""; position: absolute;
  background: var(--ink);
  top: 50%; left: 0; right: 0; height: 1.5px;
  margin-top: -0.75px;
}
.pd-faq__q-icon::after { transform: rotate(90deg); transition: transform 200ms; }
.pd-faq__item.is-open .pd-faq__q-icon::after { transform: rotate(0); }
.pd-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 360ms ease, padding 360ms ease;
  padding: 0;
}
.pd-faq__item.is-open .pd-faq__a {
  max-height: 320px;
  padding: 0 0 28px 56px;
}
.pd-faq__a-tx {
  font-family: var(--font-jp-body); font-size: 14px;
  line-height: 1.95; color: var(--fog);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ====================================================================
   PD-7  RELATED MONSTERS
   ==================================================================== */
.pd-related {
  background: #FAFAFA;
  padding: 140px 96px;
  border-top: 1.5px solid var(--rule-soft);
}
.pd-related__inner { max-width: 1600px; margin: 0 auto; }
.pd-related__head { text-align: center; margin-bottom: 64px; }
.pd-related__eyebrow {
  font-family: var(--font-en-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--fog); text-transform: uppercase;
  margin: 0 0 16px;
}
.pd-related__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--ink); margin: 0;
}
.pd-related__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 48px;
}
.pd-rel-card {
  background: var(--bg, var(--cho-color));
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 16px;
  transition: transform 240ms;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.pd-rel-card:hover { transform: translateY(-4px); }
.pd-rel-card.is-locked { cursor: default; }
.pd-rel-card.is-locked:hover { transform: none; }
.pd-rel-card.bg-cho { background: var(--cho-color); color: var(--ink); }
.pd-rel-card.bg-ase { background: var(--ase-color); color: var(--white); }
.pd-rel-card.bg-min { background: var(--min-color); color: var(--white); }
.pd-rel-card.bg-hug { background: var(--hug-color); color: var(--ink); }
.pd-rel-card.bg-tin { background: var(--tin-color); color: var(--white); }
.pd-rel-card__head { display: flex; justify-content: space-between; align-items: flex-start; }
.pd-rel-card__chip {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.22em;
  background: rgba(10,10,10,0.85); color: var(--white);
  border-radius: 999px;
  padding: 6px 10px;
}
.pd-rel-card.bg-cho .pd-rel-card__chip { background: var(--ink); color: var(--white); }
.pd-rel-card.bg-ase .pd-rel-card__chip { background: var(--white); color: var(--brand-red); }
.pd-rel-card__chip--soon { background: rgba(10,10,10,0.5); }
.pd-rel-card__char {
  position: absolute; right: -24px; bottom: -28px;
  opacity: 0.55; pointer-events: none;
  transform: rotate(-8deg); z-index: 0;
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
}
.pd-rel-card__char-img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.pd-rel-card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.pd-rel-card__name {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  margin: 0;
}
.pd-rel-card__sub {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 11px; letter-spacing: 0.04em;
  opacity: 0.8;
}
.pd-rel-card__tag {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 14px; line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.pd-rel-card.bg-cho .pd-rel-card__tag,
.pd-rel-card.bg-hug .pd-rel-card__tag { text-shadow: none; }
.pd-rel-card__cta {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  width: fit-content;
  position: relative; z-index: 1;
}
.pd-rel-card__cta.is-locked { opacity: 0.6; border-bottom-style: dashed; }
.pd-related__bottom {
  text-align: center;
  padding-top: 32px;
}
.pd-related__bottom-link {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 4px;
}
.pd-related__bottom-link:hover { color: var(--brand-red); border-color: var(--brand-red); }

/* ====================================================================
   PD-8  SHOP NOW reprise
   ==================================================================== */
.pd-shop-cta {
  background: var(--white);
  padding: 140px 96px;
  text-align: center;
  border-top: 1.5px solid var(--ink);
}
.pd-shop-cta__inner { max-width: 1100px; margin: 0 auto; }
.pd-shop-cta__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.25;
  color: var(--ink); margin: 0 0 48px;
}
.pd-shop-cta__title-em {
  color: var(--brand-red);
  white-space: nowrap;
}
.pd-shop-cta__actions { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

/* ====================================================================
   SHOP-1  /shop hero
   ==================================================================== */
.shop-hero {
  background: var(--white);
  padding: 80px 96px 120px;
  text-align: center;
  position: relative;
  border-bottom: 1.5px solid var(--ink);
}
.shop-hero__inner { max-width: 1200px; margin: 0 auto; }
.shop-hero__eyebrow {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.32em;
  color: var(--brand-red); text-transform: uppercase;
  margin: 0 0 32px;
  display: inline-flex; align-items: center; gap: 12px;
}
.shop-hero__tick {
  display: inline-block; width: 28px; height: 1.5px; background: var(--brand-red);
}
.shop-hero__title {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: clamp(36px, 5.5vw, 84px);
  line-height: 1.2; letter-spacing: 0.005em;
  color: var(--ink); margin: 0;
}

/* ====================================================================
   SHOP-2  Channels (3 columns)
   ==================================================================== */
.shop-channels {
  background: var(--white);
  padding: 120px 96px;
}
.shop-channels__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1400px; margin: 0 auto;
}
.shop-ch {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  padding: 48px 36px;
  display: flex; flex-direction: column; gap: 28px;
  min-height: 460px;
  transition: transform 240ms, box-shadow 240ms;
  position: relative;
  text-decoration: none; color: inherit;
}
.shop-ch:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(10,10,10,0.2); }
.shop-ch.is-soon { cursor: default; opacity: 0.85; }
.shop-ch.is-soon:hover { transform: none; box-shadow: none; }
.shop-ch__top { display: flex; flex-direction: column; gap: 14px; }
.shop-ch__brand {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.shop-ch__brand-jp {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 13px; color: var(--fog);
  letter-spacing: 0.06em;
}
.shop-ch__body {
  flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.shop-ch__pitch {
  font-family: var(--font-jp-display); font-weight: 900;
  font-size: 18px; line-height: 1.55;
  color: var(--ink); margin: 0;
}
.shop-ch__pitch--trophy::before {
  content: "🏆 "; margin-right: 4px;
}
.shop-ch__perks {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-jp-body); font-size: 13px;
  color: var(--fog); line-height: 1.6;
}
.shop-ch__perk { padding-left: 18px; position: relative; }
.shop-ch__perk::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1.5px; background: var(--brand-red);
}
.shop-ch__soon-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--brand-red);
}
.shop-ch__btn {
  font-family: var(--font-en-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.22em;
  padding: 18px 24px;
  border-radius: 999px;
  background: var(--ink); color: var(--white);
  border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  transition: all 160ms;
  cursor: pointer;
}
.shop-ch__btn:hover { background: var(--brand-red); border-color: var(--brand-red); }
.shop-ch__btn.is-disabled { background: transparent; color: var(--ash); border-color: var(--ash); cursor: not-allowed; }
.shop-ch__btn.is-disabled:hover { background: transparent; color: var(--ash); border-color: var(--ash); }
.shop-ch__btn.shop-ch__btn--rakuten {
  background: #BF0000; color: #FFFFFF; border-color: #BF0000;
  font-family: var(--font-jp-display); font-weight: 900;
  letter-spacing: 0.14em;
}
.shop-ch__btn.shop-ch__btn--rakuten:hover {
  background: #A00000; border-color: #A00000;
}
.shop-ch__btn.shop-ch__btn--amazon {
  background: #232F3E; color: #FFFFFF; border-color: #232F3E;
  font-family: var(--font-jp-display); font-weight: 900;
  letter-spacing: 0.14em;
}
.shop-ch__btn.shop-ch__btn--amazon:hover {
  background: #131A24; border-color: #131A24;
}
.shop-ch__btn.shop-ch__btn--amazon .shop-ch__arr { color: #FF9900; font-weight: 700; }
.shop-ch__arr { transition: transform 200ms; }
.shop-ch__btn:hover:not(.is-disabled) .shop-ch__arr { transform: translateX(3px); }

/* ====================================================================
   SHOP — fixed namiki (tree-lined avenue) backdrop.
   Mirrors the homepage land-tour: a position:fixed image pinned to the
   viewport that only shows while the WHERE TO BUY range (back link →
   hero → channels) is scrolled through; toggled via IntersectionObserver.
   NO full-section overlay tint (that's what caused the seam line on top) —
   the only backing is a radial gradient behind the hero heading text.
   ==================================================================== */
.shop-landtour { position: relative; isolation: isolate; }
.shop-landtour__bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  object-position: center 72%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
.shop-landtour__bg.is-hidden { opacity: 0; }
.shop-landtour > .pd-back,
.shop-landtour > .shop-hero,
.shop-landtour > .shop-channels {
  position: relative;
  z-index: 1;
}
/* Drop the opaque white fills so the fixed backdrop reads through. No tint,
   no overlay — backgrounds become fully transparent and the seam-creating
   hero border-bottom is removed. The white cards keep their own surface. */
.shop-landtour > .shop-hero { background: transparent; border-bottom: none; padding-bottom: 24px; }
.shop-landtour > .shop-channels { background: transparent; padding-top: 28px; padding-bottom: 72px; }
/* Local legibility backing — ONLY behind the heading text block, fading to
   fully transparent at the edges so no boundary line ever appears. */
.shop-landtour .shop-hero__inner {
  background: radial-gradient(ellipse 75% 65% at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.0) 70%);
  padding: clamp(24px, 3.5vw, 48px) clamp(40px, 8vw, 140px);
}

/* ====================================================================
   Mobile
   ==================================================================== */
@media (max-width: 900px) {
  .pd-back { padding: 100px 24px 0; }
  .pd-hero__actions, .pd-shop-cta__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .pd-hero__actions .pd-hero__btn, .pd-shop-cta__actions .pd-hero__btn { justify-content: center; }
  .pd-hero { padding: 24px 24px 60px; }
  .pd-hero__stage { flex-direction: row; flex-wrap: wrap; gap: 24px; min-height: 0; }
  /* ② — enlarge the hero chara video/image toward screen width on phones by
     overriding the width itself (the old clamp capped it at 260px; a max-width
     alone never fired). The max-width:100% guard on .pd-hero__chara-video keeps
     it from overflowing the column. Applies to both ハピモン(CHO) and オイモン(ASE). */
  .pd-hero__chara-img { width: min(70vw, 360px); }
  .pd-hero__pkg--30 { height: min(260px, 32vh); }
  .pd-hero__pkg--10 { height: min(170px, 21vh); }
  .pd-hero__stage--solo .pd-hero__chara-img { width: min(78vw, 420px); }
  .pd-hero__stage--solo .pd-hero__pkg--30 { height: min(360px, 42vh); }
  .pd-hero__tagline { font-size: 28px; }
  .pd-overview { padding: 80px 24px; }
  .pd-kv__row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .pd-pain__block { padding: 80px 24px; }
  .pd-pain__section-cap { padding: 80px 24px 0; }
  .product-cm-video { padding: 40px 0 0; }
  .pd-pain__b2-inner { grid-template-columns: 1fr; gap: 40px; }
  .pd-pain__b3-grid { grid-template-columns: 1fr; }
  .pd-scenes { padding: 80px 24px; }
  .pd-scenes__grid { grid-template-columns: 1fr; }
  .pd-scenes__grid[data-count="4"] { grid-template-columns: 1fr; }
  .pd-scenes__grid[data-count="6"] { grid-template-columns: 1fr; }
  .pd-scenes__grid[data-count="4"] > .pd-scene { aspect-ratio: auto; min-height: 280px; }
  .pd-scenes__grid[data-count="6"] > .pd-scene { aspect-ratio: auto; min-height: 280px; }
  .pd-faq { padding: 80px 24px; }
  .pd-faq__item.is-open .pd-faq__a { padding-left: 0; }
  .pd-related { padding: 80px 24px; }
  .pd-related__grid { grid-template-columns: 1fr 1fr; }
  .pd-shop-cta { padding: 80px 24px; }
  .pd-shop-cta__title-em { white-space: normal; }
  .shop-hero { padding: 60px 24px 80px; }
  .shop-channels { padding: 60px 24px; }
  .shop-channels__inner { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   MOBILE (≤640px) — A.S.E活 product page fixes. Scoped to ≤640 only;
   ≥641px (PC/tablet) untouched. No copy/color/size changes.
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  /* (1) WHEN TO FEED — card 03 only. When the stacked card is tall enough to
     vertically crop its full-bleed background video (cover), the default
     center crop cut the subject's head (top of frame). Anchor the crop to the
     top so the head — and the "03" sitting over it — stay in frame. Inert when
     no vertical crop occurs; cards 01/02 are not targeted. */
  .pd-scenes__grid > .pd-scene:nth-child(3) .pd-scene__side-video[data-mode="landscape"] {
    object-position: center top;
  }
}


/* ==========================================================================
   Character WEBM videos — black-background variants
   Videos shipped as non-alpha (black bg); use mix-blend-mode: screen to
   knock out the black so the character composites cleanly on the page.
   Akari is intentionally OPTED OUT — screen would also erase her black
   tights / turtleneck.
   When alpha-channel (VP9) versions arrive, swap the file and remove the
   is-blackbg class.
   ========================================================================== */
.pd-hero__chara-video {
  /* video inherits .pd-hero__chara-img sizing; just make sure intrinsic
     aspect doesn't break the parent flex column */
  display: block;
  background: transparent;
}
.pd-hero__chara-video.is-blackbg {
  mix-blend-mode: screen;
}
/* ⑨/⑧ — CHO hero sits on a BRIGHT kitchen photo, where mix-blend:screen can't
   cleanly knock out the video's black background (it washes the character out).
   Use the SAME soft radial mask the bento character videos use to fade the
   black square's edges into the page instead. Scoped to CHO only — the ASE
   hero (dark fire×water bg) keeps screen, which works there. */
.pd-hero[data-product="cho"] .pd-hero__chara-video.is-blackbg {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at center,
    #000 0%, #000 52%, rgba(0,0,0,0.85) 66%, rgba(0,0,0,0.45) 82%, rgba(0,0,0,0.00) 96%);
          mask-image: radial-gradient(circle at center,
    #000 0%, #000 52%, rgba(0,0,0,0.85) 66%, rgba(0,0,0,0.45) 82%, rgba(0,0,0,0.00) 96%);
}
/* ② — hapimon-system hero video never exceeds its column on small screens. */
.pd-hero__chara-video { max-width: 100%; height: auto; }