@charset "UTF-8";
/* ============================================================
   HIMEHINA Official Trading Card — officialcard
   フレームワーク非依存の静的ページ用スタイル

   単位について:
     本文は 1rem = 10〜12px、SP は 10px 固定で読みやすさを維持。
     KV は画面幅とアスペクト比に合わせ、各レイヤーを % で配置する。
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --c-text: #4b446b;
  --c-text-thin: #505162;
  --c-border: #e0e1ec;
  --c-pink: #ff52d1;
  --c-blue: #3783f8;
  --c-btn-pink: #ff68c6;
  --c-bg-shop: #eff2fb;
  --c-bg-collection: #e2e4ed;
  --c-border-blue: #50639d;
  --c-bg-special: #f0f6ff;
  --c-white: #fff;

  --shadow-card: 0 0 2.4rem rgba(95, 84, 170, 0.14);
  --radius-card: 1.2rem;

  /* 全セクション共通のコンテンツ幅と内側余白 */
  --content-w: 100rem;
  --pad-x: 5.6rem;
  --section-gap: 4.6rem;
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / Base ---------- */
html {
  font-size: clamp(10px, 1000vw / 1440, 12px);
  font-family: "century-gothic", "Noto Sans JP", sans-serif;
  color: var(--c-text);
  word-spacing: 1px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 1.6rem; line-height: 1.5; background: #101a21; }
main { display: block; }
section[id] { scroll-margin-top: 2rem; }
ul, ol { list-style: none; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
em, address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure { margin: 0; }
strong { font-weight: 700; }

/* Viewport ornament: above the page, below the card viewer; never captures input. */
.viewport-frame {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  z-index: 900;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #7773ba, #44c7ee 32%, #626dc2 62%, #b080c5) 1;
  pointer-events: none;
  user-select: none;
}
.viewport-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #b5dbff3d;
  box-shadow: 0 0 14px #40b8ed12;
}
.viewport-frame__defs { position: absolute; }
.viewport-frame__star {
  position: absolute;
  width: 46px;
  height: 46px;
  padding: 3px;
  background: radial-gradient(circle, #101735ed 10%, #10173599 40%, transparent 70%);
  filter: drop-shadow(0 0 5px #54bdf755);
  transform: rotate(-16deg);
}
.viewport-frame__star--tl { top: -9px; left: -9px; }
.viewport-frame__star--tr { top: -9px; right: -9px; transform: rotate(16deg); }
.viewport-frame__star--bl { bottom: -9px; left: -9px; transform: rotate(16deg); }
.viewport-frame__star--br { bottom: -9px; right: -9px; }
.viewport-frame__crest {
  position: absolute;
  left: 50%;
  width: 104px;
  height: 6px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #687ecb, #69d6f3, #8f8fd9);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}
.viewport-frame__crest--top { top: -3px; }
.viewport-frame__crest--bottom { bottom: -3px; transform: translateX(-50%) rotate(180deg); }
@media screen and (max-width: 680px), screen and (max-height: 500px) {
  .viewport-frame {
    top: max(4px, env(safe-area-inset-top));
    right: max(4px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(4px, env(safe-area-inset-left));
    border-width: 2px;
  }
  .viewport-frame::before { inset: 3px; border-color: #b5dbff26; }
  .viewport-frame__star { width: 28px; height: 28px; padding: 2px; }
  .viewport-frame__star--tl { top: -5px; left: -5px; }
  .viewport-frame__star--tr { top: -5px; right: -5px; }
  .viewport-frame__star--bl { bottom: -5px; left: -5px; }
  .viewport-frame__star--br { bottom: -5px; right: -5px; }
  .viewport-frame__crest { width: 56px; height: 4px; }
  .viewport-frame__crest--top { top: -2px; }
  .viewport-frame__crest--bottom { bottom: -2px; }
}

/* 画像保護（元ページ踏襲） */
.page { position: relative; user-select: none; -webkit-user-select: none; }
.page img { -webkit-user-drag: none; user-drag: none; }
.page-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(#0c161c99, #0c161c99), #101a21 url('/officialcard/foil-paper.webp') center / cover;
}
.page-background::before,
.page-background::after {
  content: none;
  position: absolute;
  inset: -20%;
  will-change: transform;
}
.page-background::before {
  background:
    radial-gradient(ellipse at 12% 24%, #1b91c8a6 0%, transparent 47%),
    radial-gradient(ellipse at 88% 68%, #8755ca99 0%, transparent 46%),
    radial-gradient(ellipse at 46% 90%, #234fa680 0%, transparent 50%);
  animation: page-aurora-blue 24s ease-in-out infinite alternate;
}
.page-background::after {
  background:
    radial-gradient(ellipse at 83% 10%, #788ff566 0%, transparent 42%),
    radial-gradient(ellipse at 12% 78%, #d348a752 0%, transparent 43%),
    radial-gradient(ellipse at 68% 65%, #46cbe233 0%, transparent 38%);
  animation: page-aurora-pink 31s ease-in-out infinite alternate;
}
@keyframes page-aurora-blue {
  0% { transform: translate3d(-5%, -4%, 0) rotate(-8deg) scale(1.05); }
  50% { transform: translate3d(6%, 3%, 0) rotate(4deg) scale(1.12); }
  100% { transform: translate3d(-2%, 7%, 0) rotate(10deg) scale(1.05); }
}
@keyframes page-aurora-pink {
  0% { transform: translate3d(6%, 5%, 0) rotate(8deg) scale(1.08); }
  50% { transform: translate3d(-5%, -4%, 0) rotate(-6deg) scale(1.16); }
  100% { transform: translate3d(3%, -6%, 0) rotate(-12deg) scale(1.08); }
}
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page__inner { position: relative; z-index: 1; }

/* ---------- 共通：セクションカード ---------- */
.about-content,
.point,
.shop-content,
.collection-content,
.special-content,
.attention-content {
  width: var(--content-w);
  max-width: calc(100% - 4rem);
  margin: 0 auto var(--section-gap);
}

/* 共通：英字大見出し（SHOP / COLLECTION） */
.section-heading,
.shop-content > h2,
.collection-content > h2 {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .04em;
  line-height: 1;
}
.shop-content > h2 span,
.collection-content > h2 span {
  font-size: 8.2rem;
  letter-spacing: 0;
  background: linear-gradient(115deg, #fff, #b6dee4 70%, #d9c4ab);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   LOADER（KV画像の読み込み中だけ表示。JS無効時は出さない）
   ============================================================ */
html.is-loading { overflow: hidden; }
.oc-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 40%, #1c2256 0%, #0b0d2a 65%);
  clip-path: circle(150% at 50% 50%);
}
html.js .oc-loader { display: grid; }
.oc-loader.is-done { animation: loader-iris .85s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes loader-iris { to { clip-path: circle(0% at 50% 50%); } }

.oc-loader__inner { display: grid; justify-items: center; gap: 3rem; }
.oc-loader__scene { perspective: 60rem; }
.oc-loader__card {
  position: relative;
  width: 9.6rem;
  aspect-ratio: 63 / 88;
  border-radius: .9rem;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, .55), 0 0 4rem rgba(120, 140, 255, .25);
  animation: loader-flip 2.4s cubic-bezier(.5, 0, .2, 1) infinite;
}
/* 回転する虹色の縁取り */
.oc-loader__card::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, #ff52d1, #3783f8, #7cf7ff, #ffe27a, #ff52d1);
  animation: loader-spin 2.2s linear infinite;
}
.oc-loader__card::after {
  content: "";
  position: absolute;
  inset: .2rem;
  border-radius: .75rem;
  background: linear-gradient(160deg, #262c6a, #121538);
}
/* ホロの走査光 */
.oc-loader__sheen {
  position: absolute;
  inset: .2rem;
  z-index: 1;
  border-radius: .75rem;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 82, 209, .5) 42%, rgba(124, 247, 255, .6) 50%, rgba(255, 226, 122, .45) 58%, transparent 75%);
  background-size: 300% 100%;
  mix-blend-mode: screen;
  animation: loader-sheen 2.4s ease-in-out infinite;
}
.oc-loader__text {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .42em;
  text-indent: .42em;
  opacity: .8;
}
.oc-loader__bar {
  display: block;
  width: 14rem;
  height: .2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .15);
  overflow: hidden;
}
.oc-loader__bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff52d1, #3783f8);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
}
@keyframes loader-flip {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  50%  { transform: rotateY(180deg); }
  95%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-sheen { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }

/* ============================================================
   KV（第2弾 THE WORLD OF PARALLELS）
   ------------------------------------------------------------
   カンプ 2000×1330 を基準に、各パーツを KV 幅 / 高さに対する
   中央のステージを画面幅と高さの両方に収め、各パーツを % で配置。
   ============================================================ */
.kv-container {
  position: relative;
  width: 100%;
  height: min(66.5278vw, 92svh);
  overflow: hidden;
  background: #0b0d2a;
  isolation: isolate;
}
.kv-stage {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(100%, calc(92svh * 1440 / 958));
  transform: translateX(-50%);
}
.kv-layer { position: absolute; inset: 0; will-change: transform; }
.kv-layer img { position: absolute; max-width: none; }
.kv-layer--bg { z-index: -2; }
.kv-layer--cards { z-index: -1; pointer-events: none; }
.kv-random-cards { position: absolute; inset: 0; }
.kv-floating-card {
  position: absolute;
  top: var(--card-top);
  width: var(--card-width);
  opacity: var(--card-opacity, .8);
  z-index: var(--card-depth, 1);
  transform: perspective(100rem) rotateX(var(--card-tilt, 8deg)) rotateY(var(--card-turn, -18deg)) rotate(var(--card-rotation));
  filter: blur(var(--card-blur, 0px));
}
.kv-floating-card:nth-child(odd) { left: var(--card-edge); }
.kv-floating-card:nth-child(even) { right: var(--card-edge); --card-turn: 18deg; }
.kv-floating-card:nth-child(1), .kv-floating-card:nth-child(2) {
  --card-top: 7%; --card-width: 18%; --card-edge: -5%; --card-depth: 3; --card-rotation: -16deg;
}
.kv-floating-card:nth-child(2) { --card-top: 10%; --card-rotation: 14deg; }
.kv-floating-card:nth-child(3), .kv-floating-card:nth-child(4) {
  --card-top: -7%; --card-width: 12%; --card-edge: 11%; --card-rotation: 22deg;
  --card-opacity: .48; --card-blur: 1.5px;
}
.kv-floating-card:nth-child(4) { --card-top: -4%; --card-rotation: -24deg; }
.kv-floating-card:nth-child(5), .kv-floating-card:nth-child(6) {
  --card-top: 35%; --card-width: 14%; --card-edge: 4%; --card-depth: 2; --card-rotation: 13deg;
  --card-opacity: .7; --card-blur: .4px;
}
.kv-floating-card:nth-child(6) { --card-top: 39%; --card-rotation: -17deg; }
.kv-floating-card:nth-child(7), .kv-floating-card:nth-child(8) {
  --card-top: 65%; --card-width: 19%; --card-edge: -6%; --card-depth: 4; --card-rotation: -19deg;
  --card-opacity: .88; --card-tilt: -10deg;
}
.kv-floating-card:nth-child(8) { --card-top: 68%; --card-rotation: 20deg; }
.kv-floating-card:nth-child(9), .kv-floating-card:nth-child(10) {
  --card-top: 81%; --card-width: 11%; --card-edge: 12%; --card-rotation: 16deg;
  --card-opacity: .5; --card-blur: 1px;
}
.kv-floating-card:nth-child(10) { --card-top: 79%; --card-rotation: -12deg; }
.kv-floating-card:nth-child(11) {
  --card-top: 22%; --card-width: 10%; --card-edge: 17%; --card-rotation: -8deg;
  --card-opacity: .42; --card-blur: 1.8px; --card-depth: 0;
}
.kv-floating-card img {
  position: relative;
  width: 100%;
  border-radius: .7rem;
  box-shadow: 0 1.8rem 3rem #030b2b66, 0 0 1.5rem #80c9ff30;
}
.is-ready .kv-floating-card img { animation: kv-card-drift 9s ease-in-out var(--float-delay) infinite alternate; }
@keyframes kv-card-drift {
  from { transform: translate3d(0, -.6rem, 0); }
  to { transform: translate3d(0, .9rem, 0); }
}

.kv-bg {
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: 40% 30%;
}
.kv-char {
  left: 12%; top: -1%;
  width: 76%;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 2rem 3rem rgba(10, 8, 40, .35));
}
.kv-layer--pack { z-index: 1; }
.kv-pack {
  left: 71%; top: 25%;
  width: 24%;
  filter: drop-shadow(-1rem 2rem 3rem rgba(10, 8, 40, .45));
}
.kv-logo, .kv-badge, .kv-title { position: absolute; margin: 0; }
.kv-logo  { left: 35%;   top: 57%; width: 33%; z-index: 2; }
.kv-badge { left: 69.5%; top: 66%; width: 14%; z-index: 3; }
.kv-title { left: 24.5%; top: 87%; width: 55%; z-index: 2; }
.kv-logo img, .kv-badge img, .kv-title img { width: 100%; }

/* ロゴを走る光（ロゴ自身の形でマスク） */
.kv-logo::after {
  content: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%);
  background-size: 260% 100%;
  -webkit-mask: url("/officialcard/kv/logo.webp") center / contain no-repeat;
  mask: url("/officialcard/kv/logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* ---- 読み込み前は非表示、is-ready で背景→キャラ→ロゴ…の順に登場 ---- */
html.js:not(.is-ready) .kv-bg,
html.js:not(.is-ready) .kv-char,
html.js:not(.is-ready) .kv-pack,
html.js:not(.is-ready) .kv-logo img,
html.js:not(.is-ready) .kv-badge img,
html.js:not(.is-ready) .kv-title img { opacity: 0; }

.is-ready .kv-bg   { animation: kv-bg-in 1.6s cubic-bezier(.22, 1, .36, 1) both; }
.is-ready .kv-char { animation: kv-char-in 1.2s cubic-bezier(.22, 1, .36, 1) .35s both, kv-char-float 7s ease-in-out 1.55s infinite; }
.is-ready .kv-pack { animation: kv-pack-in 1.1s cubic-bezier(.22, 1, .36, 1) .85s both, kv-pack-float 6s ease-in-out 1.95s infinite; }
.is-ready .kv-logo img   { animation: kv-logo-in 1s cubic-bezier(.22, 1, .36, 1) .75s both; }
.is-ready .kv-badge img  { animation: kv-badge-in .75s cubic-bezier(.34, 1.56, .64, 1) 1.45s both; }
.is-ready .kv-title img  { animation: kv-title-in .9s cubic-bezier(.22, 1, .36, 1) 1.2s both; }

@keyframes kv-bg-in {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kv-char-in {
  from { opacity: 0; transform: translate(2%, 6%) scale(1.08); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes kv-char-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.9rem); }
}
@keyframes kv-pack-in {
  from { opacity: 0; transform: translate(14%, 5%) rotate(7deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes kv-pack-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-.7rem) rotate(-1.2deg); }
}
@keyframes kv-logo-in {
  0%   { opacity: 0; transform: scale(.7); filter: brightness(2.4) blur(.5rem); }
  55%  { opacity: 1; filter: brightness(1.5) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes kv-logo-sheen {
  0%   { opacity: 0; background-position: 200% 0; }
  5%   { opacity: 1; }
  35%  { opacity: 1; background-position: -60% 0; }
  40%, 100% { opacity: 0; background-position: -60% 0; }
}
@keyframes kv-badge-in {
  from { opacity: 0; transform: scale(.4) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes kv-title-in {
  from { opacity: 0; transform: translateY(2.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   NAV
   ============================================================ */
.nav-menu {
  position: relative;
  padding: 2rem 0;
  background: linear-gradient(110deg, #080a13, #121326 55%, #090c18);
  box-shadow: 0 1rem 3rem rgba(3, 5, 18, .35);
}
.nav-menu::before,
.nav-menu::after {
  content: "";
  position: absolute;
  height: .4rem;
  width: 42.3rem;
}
.nav-menu::before { left: 0; top: 0; background: linear-gradient(90deg, #dd51b6, #7658bd, transparent); }
.nav-menu::after  { right: 0; bottom: 0; background: linear-gradient(90deg, transparent, #5764c3, #46bce2); }

.nav-menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-menu li {
  width: 18.7rem;
  border-right: .2rem solid rgba(169, 176, 224, .2);
}
.nav-menu li:last-child { border-right: 0; }
.nav-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #edeefa;
  transition: color .3s ease;
}
.nav-menu a span {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.1;
}
.nav-menu a:hover,
.nav-menu a:focus-visible { color: #b5c9ff; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-content {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 5.7rem;
  padding: 4.8rem 4.8rem 4.8rem var(--pad-x);
  color: #f4f5ff;
  background: transparent;
  border-radius: 0;
}
.about-content::before {
  content: none;
  position: absolute;
  inset: 1.1rem;
  border: 1px solid #9bb7ee30;
  border-radius: .8rem;
  pointer-events: none;
}
.about-content::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 10% 15%, #a7e4ff 0 .08rem, transparent .16rem),
    radial-gradient(circle at 47% 12%, #fff 0 .1rem, transparent .2rem),
    radial-gradient(circle at 90% 78%, #bfa8ff 0 .1rem, transparent .2rem),
    linear-gradient(145deg, transparent 55%, #8ccaff0d 55.1%, transparent 55.4%);
  pointer-events: none;
}
.about-content-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 4rem;
}
.about-content-inner:has(.about-card-scene[hidden]) { grid-template-columns: 1fr; }
.about-content-head { position: relative; z-index: 1; }
.about-content-head .about-eyebrow {
  font-size: .95rem;
  letter-spacing: .22em;
  color: #a5c8e8;
  margin-bottom: 2rem;
}
.about-content-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.7rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 2.6rem;
  color: #e8f3ff;
  text-shadow: 0 .2rem 2.4rem #9aabff55;
}
.about-content-head .about-lead {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .025em;
  margin-bottom: 1.3rem;
  color: #ede6ff;
}
.about-content-head .about-description {
  font-size: 1.35rem;
  line-height: 2.1;
  color: #b9c8e3;
}
.about-card-scene { position: relative; width: 100%; aspect-ratio: 1; }
.about-card-scene[hidden] { display: none; }
.about-card-scene::before,
.about-card-scene::after {
  content: none;
  position: absolute;
  inset: 8%;
  border: 1px solid #a3d3ff40;
  border-radius: 50%;
  box-shadow: 0 0 5rem #6b9dfa1f, inset 0 0 4rem #8e6ef02b;
  pointer-events: none;
}
.about-card-scene::after { inset: 14%; border-style: dashed; transform: rotate(-25deg); }
.about-random-cards { position: absolute; inset: 0; }
.about-random-card {
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  width: 27%;
  transform: perspective(700px) rotateY(var(--card-turn, -10deg)) rotateX(5deg) rotate(var(--card-angle)) scale(var(--card-scale, 1));
  filter: drop-shadow(.5rem 1.2rem 1rem #020616aa);
}
.about-random-card img { width: 100%; border-radius: .6rem; outline: 1px solid #d6e6ff60; }
.about-random-card:nth-child(1) { --card-x: 17%; --card-y: 2%; --card-angle: -18deg; --card-scale: .9; }
.about-random-card:nth-child(2) { --card-x: 57%; --card-y: 6%; --card-angle: 13deg; --card-scale: .9; --card-turn: 16deg; }
.about-random-card:nth-child(3) { --card-x: 3%; --card-y: 30%; --card-angle: -17deg; }
.about-random-card:nth-child(4) { --card-x: 70%; --card-y: 33%; --card-angle: 18deg; --card-turn: 18deg; }
.about-random-card:nth-child(5) { --card-x: 19%; --card-y: 59%; --card-angle: -9deg; }
.about-random-card:nth-child(6) { --card-x: 58%; --card-y: 60%; --card-angle: 12deg; --card-turn: 12deg; }
.about-random-card:nth-child(7) { --card-x: 33%; --card-y: 27%; --card-angle: -7deg; --card-turn: -15deg; width: 35%; z-index: 2; filter: drop-shadow(.8rem 1.8rem 1.2rem #020616cc); }

/* ============================================================
   POINT（画像1枚、テキストはSEO用に不可視）
   ============================================================ */
.point {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-card);
}
.point > img { width: 100%; }
.point-inner {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0; height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ============================================================
   SHOP
   ============================================================ */
.shop-content {
  position: relative;
  padding: 3.6rem var(--pad-x) 4.4rem;
  color: #edf3ef;
  background: transparent;
}
/* 左右のアクセントバー */
.shop-content::before,
.shop-content::after {
  content: none;
  position: absolute;
  top: 0; bottom: 0;
  margin: auto 0;
  width: .4rem;
  height: 36.2rem;
  border-radius: .5rem;
  background: linear-gradient(180deg, #2a355a, #1d9cfb);
}
.shop-content::before { left: -.2rem; }
.shop-content::after  { right: -.2rem; }
.shop-content > h2 { gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; color: #beced0; }

.shop-content-inner {
  display: grid;
  gap: 2.4rem;
  padding: 0;
  background: transparent;
}

/* 商品カード */
.shop-info {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  padding: 3.2rem 4rem 3.2rem 3.2rem;
  color: var(--c-white);
  background: #0c171dc4;
  border: 1px solid #b2d3d733;
  border-radius: .8rem;
  overflow: hidden;
  isolation: isolate;
}
/* ほんのり光沢 */
.shop-info::after {
  content: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(55, 131, 248, .35), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(255, 82, 209, .22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.shop-info-image {
  display: grid;
  place-items: center;
  aspect-ratio: 245 / 189;
  background: transparent;
}
.shop-info-image img {
  width: 68%;
  filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, .35));
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.shop-info:hover .shop-info-image img { transform: translateY(-.4rem) rotate(-2deg); }

.shop-info-image--placeholder {
  color: #d3e2e4;
  font-family: "Oswald", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.shop-tag {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.3rem .45rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  border-left: 2px solid #83d6d9;
  border-radius: 0;
  background: #a3dad51a;
}
.shop-eyebrow {
  margin: 1.4rem 0 .2rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .85;
}
.shop-title {
  overflow-wrap: anywhere;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  margin-bottom: 1.8rem;
  text-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .25);
}
.shop-spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 2.4rem;
  row-gap: .8rem;
  padding: 1.4rem 0;
  font-size: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.shop-spec dt { color: rgba(255, 255, 255, .65); }
.shop-spec dd { font-weight: 700; }
.shop-spec small { font-size: .85em; font-weight: 400; color: rgba(255, 255, 255, .75); }
.shop-spec__note { display: block; margin-top: .4rem; font-size: 1.15rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .72); }

.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 4.6rem;
  padding: 0 3.2rem 0 3.6rem;
  margin-top: 2.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-btn-pink);
  border-radius: 5rem;
  box-shadow: 0 .8rem 2.4rem rgba(255, 104, 198, .45);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.shop-btn__arrow {
  width: 1.8rem;
  height: 1.8rem;
  transition: transform .25s ease;
}
.shop-btn:hover,
.shop-btn:focus-visible {
  transform: translateY(-.2rem);
  box-shadow: 0 1.2rem 3rem rgba(255, 104, 198, .55);
  background: #ff7ccf;
}
.shop-btn:hover .shop-btn__arrow { transform: translateX(.4rem); }

.shop-btn--sold-out,
.shop-btn--sold-out:hover {
  background: #687087;
  box-shadow: none;
  transform: none;
}
.shop-btn--upcoming,
.shop-btn--upcoming:hover {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: none;
  transform: none;
}

/* ============================================================
   COLLECTION
   ============================================================ */
/* A dark gallery with generous type and restrained holographic light. */
.collection-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 116rem;
  padding: 5.6rem var(--pad-x) 3rem;
  color: #edf3ff;
  background: #0c171d66;
  border-radius: 0;
}
.collection-content::before {
  content: none;
  position: absolute;
  z-index: -1;
  width: 60rem;
  aspect-ratio: 1;
  top: -36rem;
  right: -12rem;
  border: 1px solid #a7c7ff30;
  border-radius: 50%;
  box-shadow: 0 0 0 4rem #a7c7ff06, 0 0 0 8rem #a7c7ff04;
  pointer-events: none;
}
.collection-content::after {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #69d8ff, #b8a1ff, #eb79cb, transparent);
  pointer-events: none;
}
.collection-content > h2 { gap: 1.6rem; margin-bottom: 1.4rem; color: #b7c9e5; }
.collection-content > h2 span {
  font-size: 8.2rem;
  letter-spacing: 0;
  background: linear-gradient(115deg, #fff 15%, #c3e8ff 55%, #cbbaff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.collection-hint { margin-bottom: 3.6rem; font-size: 1.3rem; color: #afc1db; }
.collection-content-inner { margin-bottom: 4.8rem; }
.collection-tabs {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 3.4rem;
  padding-bottom: 0;
  border: 0;
}
.collection-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 60px;
  padding: 1.7rem 3rem;
  border: 1px solid #a1bce540;
  border-radius: .8rem;
  background: #090f2499;
  color: #aebcd6;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}
.collection-tab[aria-selected="true"] {
  color: #fff;
  border-color: #acccffa6;
  background: linear-gradient(115deg, #204b7b, #494784 65%, #794788);
  box-shadow: inset 0 1px #d7ebff66, 0 .6rem 2.8rem #696dd52b;
}
.collection-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 18%;
  right: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #9aeaff, #efb0fa, transparent);
}
.collection-tab:focus-visible { outline: 3px solid #9bdfff; outline-offset: 4px; }
.collection-tab-panel[hidden] { display: none; }
.collection-empty { padding: 2rem 0 4rem; font-size: 1.5rem; }
.collection-title {
  margin-bottom: 3rem;
  padding: 1rem 0 2.4rem 2.4rem;
  border-left: 2px solid #8cceff99;
  border-bottom: 1px solid #a6c4ee26;
  background: linear-gradient(90deg, #80bfff0a, transparent 65%);
}
.collection-title h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.6rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1.8rem;
  overflow-wrap: anywhere;
  text-wrap: balance;
  color: #f1f5ff;
  text-shadow: 0 .2rem 2.8rem #90b9f233;
}
.collection-range {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.2rem;
  border: 1px solid #96b4e545;
  border-radius: .4rem;
  background: #a3bcff0a;
  font-size: 1.1rem;
  letter-spacing: .12em;
  color: #aebfd8;
}
.collection-range b { font-size: 1.4rem; color: #e9f3ff; }
.collection-title p { margin-top: 1rem; font-size: 1.4rem; font-weight: 400; color: #bbcae1; }
.collection-content-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem 1.8rem;
  padding-bottom: 0;
}
.collection-content-list button {
  display: block;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 .8rem 1.8rem #02071866, 0 0 0 1px #b6d6ff40;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s ease;
}
.collection-content-list img { width: 100%; aspect-ratio: 868 / 1213; object-fit: cover; background: #18243e; }
@media (hover: hover) and (pointer: fine) {
  .collection-content-list button:hover {
    transform: translateY(-.7rem) scale(1.025);
    box-shadow: 0 1.8rem 3rem #02071888, 0 0 0 1px #a7dfff, 0 0 2rem #5dabff40;
  }
}
.collection-content-list button:focus-visible { outline: 3px solid #a7dfff; outline-offset: 4px; }

/* シークレット（未公開）カード：裏面のみ表示、拡大不可 */
.collection-secret {
  position: relative;
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.collection-secret img { width: 100%; aspect-ratio: 868 / 1213; object-fit: cover; background: #18243e; filter: brightness(.85) saturate(.9); }
.collection-secret::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 32, 0) 45%, rgba(10, 14, 32, .55) 100%);
  pointer-events: none;
}
.collection-secret__badge,
.collection-secret__no {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: "Oswald", sans-serif;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.collection-secret__badge {
  top: 50%;
  margin-top: -1.3rem;
  padding: .7rem 1.4rem .6rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #e9f3ff;
  background: rgba(10, 14, 32, .62);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.collection-secret__no {
  bottom: 1rem;
  font-size: 1.1rem;
  color: rgba(233, 243, 255, .75);
}

/* ============================================================
   SPECIAL
   ============================================================ */
.special-content {
  padding: 2.9rem var(--pad-x);
  color: #edf3ef;
  background: #0c171d66;
  border-block: 1px solid #a5c3ff40;
}
.special-content-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.special-content-image { flex-shrink: 0; width: 19.8rem; }
.special-content-head h2 { font-size: 2.8rem; margin-bottom: 1rem; }
.special-content-head p  { font-size: 1.4rem; margin-bottom: 2rem; }
.special-content-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31.9rem;
  height: 5.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-text);
  border-radius: 6rem;
  transition: opacity .3s ease, transform .25s ease;
}
.special-content-head a:hover { opacity: .85; transform: translateY(-.2rem); }

/* ============================================================
   ATTENTION
   ============================================================ */
.attention-content {
  margin-bottom: 14.6rem;
  padding: 3.6rem var(--pad-x);
  color: #d5e0e1;
  background: transparent;
}
.attention-content h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.attention-content li { font-size: 1.2rem; line-height: 1.7; }

/* ============================================================
   ZOOM（3Dホロカードビュー）
   ============================================================ */
.oc-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.oc-zoom.is-open { opacity: 1; pointer-events: auto; }
.oc-zoom.is-closing { pointer-events: auto; }
.oc-zoom__bg {
  position: absolute;
  inset: 0;
  background: rgba(19, 19, 44, .78);
  -webkit-backdrop-filter: blur(.6rem);
  backdrop-filter: blur(.6rem);
}

/* FLIP 用の外側ラッパ（サムネ位置→中央へ飛んでくる） */
.oc-zoom__stage {
  position: relative;
  z-index: 1;
  perspective: 140rem;
  will-change: transform;
  visibility: hidden;
}
.oc-zoom.is-open .oc-zoom__stage,
.oc-zoom.is-closing .oc-zoom__stage { visibility: visible; }

/* ポインタ追従のチルト */
.oc-zoom__card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --glare: 0;
  position: relative;
  width: min(41.7rem, 90vw, calc((100svh - 22rem) * 868 / 1213));
  aspect-ratio: 868 / 1213;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  touch-action: none;
}

/* 待機中はゆらゆら浮遊（ホバー中は停止） */
.oc-zoom__float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: oc-float 7s ease-in-out infinite;
}
.oc-zoom__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn, 0deg));
  transition: transform .75s cubic-bezier(.22, .75, .25, 1);
}
.oc-zoom__rotor.is-resetting,
.oc-zoom__card.is-dragging .oc-zoom__rotor { transition: none; }
.oc-zoom__card.can-turn { cursor: grab; user-select: none; }
.oc-zoom__card.is-dragging { cursor: grabbing; }
.oc-zoom__card:focus-visible { outline: 2px solid #b5c9ff; outline-offset: 6px; }
.oc-zoom__face {
  position: absolute;
  inset: 0;
  border-radius: 4.6% / 3.3%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 3rem 6rem rgba(0, 0, 0, .55),
    0 0 0 .1rem rgba(255, 255, 255, .08) inset;
}
.oc-zoom__face--front { transform: translateZ(.1px); }
.oc-zoom__face--back { transform: rotateY(180deg) translateZ(.1px); background: #fff; }
.oc-zoom__back-img { width: 100%; height: 100%; object-fit: contain; }
.oc-zoom__card.is-hover .oc-zoom__float { animation-play-state: paused; }

.oc-zoom__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1a2e;
  transition: opacity .25s ease;
}
.oc-zoom__img.is-switching { opacity: 0; }

/* ホログラム：カーソルに合わせて流れる虹 */
.oc-zoom__holo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 0, 200, .55) 32%,
      rgba(0, 255, 255, .55) 44%,
      rgba(255, 230, 0, .5) 54%,
      rgba(120, 80, 255, .5) 64%,
      transparent 78%
    );
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--glare) * .55);
  filter: saturate(1.4) contrast(1.05);
  transition: opacity .35s ease;
  pointer-events: none;
}
/* グレア：光源のスポット */
.oc-zoom__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255, 255, 255, .7) 0%,
    rgba(255, 255, 255, .18) 28%,
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: overlay;
  opacity: calc(var(--glare) * .9);
  transition: opacity .35s ease;
  pointer-events: none;
}

@keyframes oc-float {
  0%, 100% { transform: rotateY(-5deg) rotateX(2.5deg) translateY(0); }
  50%      { transform: rotateY(5deg) rotateX(-2.5deg) translateY(-.6rem); }
}

/* 閉じる / 前後ボタン */
.oc-zoom__close,
.oc-zoom__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  color: var(--c-white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(.8rem);
  backdrop-filter: blur(.8rem);
  transition: background-color .25s ease, transform .25s ease;
}
.oc-zoom__close svg,
.oc-zoom__nav svg { width: 2.2rem; height: 2.2rem; }
.oc-zoom__close:hover,
.oc-zoom__nav:hover { background: rgba(255, 255, 255, .24); transform: scale(1.06); }
.oc-zoom__close { top: 2.4rem; right: 2.4rem; }
.oc-zoom__nav { top: 50%; transform: translateY(-50%); }
.oc-zoom__nav:hover { transform: translateY(-50%) scale(1.06); }
.oc-zoom__nav--prev { left: 3.2rem; }
.oc-zoom__nav--next { right: 3.2rem; }
.oc-zoom__nav[disabled] { opacity: .3; pointer-events: none; }

.oc-zoom__counter {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0;
  bottom: 2.4rem;
  z-index: 2;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
}

/* Tablet: keep readable type while allowing the content columns to shrink. */
@media screen and (min-width: 681px) and (max-width: 1100px) {
  :root { --pad-x: 2.8rem; --section-gap: 3.6rem; }
  .about-content { padding: 3.2rem 2.8rem; }
  .about-content-head h2 { font-size: clamp(3.8rem, 5vw, 5.2rem); }
  .about-content-head .about-eyebrow { letter-spacing: .12em; }
  .about-content-head .about-description { font-size: 1.4rem; }
  .shop-info { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2.4rem; padding: 2.4rem; }
  .shop-title { font-size: clamp(2.3rem, 3vw, 3rem); }
  .collection-content-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .special-content-inner { gap: 2.4rem; }
  .special-content-head { min-width: 0; }
  .special-content-head h2 { font-size: 2.4rem; }
  .special-content-head a { max-width: 100%; }
}

/* Mobile: text stays readable independently of the KV's image proportions. */
@media screen and (max-width: 680px) {
  :root {
    --content-w: 100%;
    --pad-x: 1.8rem;
    --section-gap: 3.2rem;
    --shadow-card: 0 0 2.4rem rgba(95, 84, 170, 0.14);
  }
  html { font-size: 10px; }

  .about-content, .point, .shop-content,
  .collection-content, .special-content, .attention-content {
    max-width: calc(100% - 3.2rem);
  }

  /* KV（縦構図に組み替え） */
  .kv-container { height: min(174.6667vw, 94svh); }
  .kv-stage { width: min(100%, calc(94svh * 375 / 655)); }
  .kv-bg   { object-position: 42% top; }
  .kv-char { left: -53%; top: -18%; width: 210%; }
  .kv-floating-card { width: calc(var(--card-width) * 1.4); }
  .kv-floating-card:nth-child(odd) { left: calc(var(--card-edge) - 7%); }
  .kv-floating-card:nth-child(even) { right: calc(var(--card-edge) - 7%); }
  .kv-logo  { left: 8%; top: 35.4%; width: 84%; }
  .kv-title { left: 9%; top: 66.3%; width: 82%; z-index: 3; }
  .kv-badge { left: 54%; top: 90%; width: 32%; z-index: 4; }
  .kv-pack  { left: 30%; right: auto; top: 72%; bottom: auto; width: 33%; }

  /* NAV */
  .nav-menu { padding: 1rem max(1.2rem, env(safe-area-inset-right)) 1rem max(1.2rem, env(safe-area-inset-left)); }
  .nav-menu::before, .nav-menu::after { height: .2rem; width: 9.4rem; }
  .nav-menu li { flex: 1; max-width: 18rem; width: auto; border-right-width: 1px; }
  .nav-menu a { min-height: 44px; gap: .4rem; font-size: 1.2rem; }
  .nav-menu a span { font-size: 1.9rem; }

  /* ABOUT */
  .about-content { margin-top: 3.2rem; padding: 3.2rem 2.4rem 3.4rem; border-radius: 0; }
  .about-content-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-content-head { order: -1; text-align: center; }
  .about-content-head .about-eyebrow { font-size: 1rem; letter-spacing: .1em; margin-bottom: 1.6rem; }
  .about-content-head h2 { font-size: 4rem; margin-bottom: 2rem; }
  .about-content-head .about-lead { font-size: 1.45rem; line-height: 1.9; margin-bottom: 1rem; }
  .about-content-head .about-description { font-size: 1.4rem; line-height: 1.95; max-width: 30rem; margin-inline: auto; text-wrap: pretty; }
  .about-description br { display: none; }
  .about-card-scene { width: min(90%, 32rem); margin: .8rem auto 0; }

  /* POINT */
  .point { border-radius: .9rem; }

  /* SHOP */
  .shop-content { padding: 2.4rem var(--pad-x); border-radius: 1.6rem; }
  .shop-content::before, .shop-content::after { width: .4rem; height: 60%; }
  .shop-content::before { left: -.25rem; }
  .shop-content::after  { right: -.25rem; }
  .shop-content > h2 { font-size: 1.2rem; margin-bottom: 1.2rem; }
  .shop-content > h2 span { font-size: 6rem; }
  .shop-content-inner { padding: 0; background: transparent; }
  .shop-info { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem 1.8rem 2.2rem; border-radius: 1.2rem; }
  .shop-info-image { width: 100%; margin: 0; aspect-ratio: auto; }
  .shop-info-image img { width: 100%; }
  .shop-eyebrow { font-size: 1.2rem; }
  .shop-title { font-size: 2.3rem; margin-bottom: 1.2rem; }
  .shop-spec { font-size: 1.4rem; padding: 1.4rem 0; }
  .shop-btn { width: 100%; min-height: 48px; height: auto; padding: 1.2rem 1.6rem; margin-top: 1.6rem; font-size: 1.4rem; }

  /* COLLECTION */
  .collection-content { padding: 3rem var(--pad-x) 2.2rem; border-radius: 0; }
  .collection-content > h2 { flex-wrap: wrap; gap: .6rem 1rem; font-size: 1.1rem; align-items: baseline; }
  .collection-content > h2 span { font-size: 4.4rem; }
  .collection-hint { font-size: 1.2rem; margin-top: 1rem; margin-bottom: 1.8rem; }
  .collection-content-inner { margin-bottom: 2rem; }
  .collection-title { margin-bottom: 2rem; padding: .6rem 0 1.8rem 1.3rem; }
  .collection-tabs { gap: .8rem; margin-bottom: 2.4rem; padding-bottom: 0; }
  .collection-tab { flex: 1; min-width: 0; min-height: 48px; padding: 1rem; font-size: 1.5rem; }
  .collection-title h3 { font-size: clamp(3rem, 8.2vw, 4.4rem); margin-bottom: 1.4rem; }
  .collection-range { font-size: .95rem; padding: .4rem .8rem; }
  .collection-range b { font-size: 1.2rem; }
  .collection-title p  { font-size: 1.2rem; }
  .collection-content-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  .collection-content-list button { border-radius: .7rem; }
  .collection-secret { border-radius: .7rem; }
  .collection-secret__badge { font-size: 1rem; padding: .55rem 1.1rem .45rem; margin-top: -1.1rem; }
  .collection-secret__no { font-size: .95rem; bottom: .7rem; }
  .collection-content-list { padding-bottom: 0; }

  /* SPECIAL */
  .special-content { padding: 0; background: #0c171d66; border-radius: 0; overflow: hidden; }
  .special-content-inner { flex-direction: column; gap: 0; }
  .special-content-image { width: 100%; padding: 1.6rem 0; text-align: center; background: transparent; }
  .special-content-image img { width: 20.6rem; margin: 0 auto; }
  .special-content-head { width: 100%; padding: 2.1rem 1.8rem 2.4rem; }
  .special-content-head h2 { font-size: 1.9rem; margin-bottom: 1.2rem; }
  .special-content-head p { font-size: 1.4rem; line-height: 1.9; margin-bottom: 1.5rem; }
  .special-content-head a { width: 100%; min-height: 48px; height: auto; padding: 1.2rem; font-size: 1.4rem; }

  /* ATTENTION */
  .attention-content { margin-bottom: 8rem; padding: 1.3rem var(--pad-x) 2.2rem; border-radius: 1.2rem; }
  .attention-content h2 { font-size: 1.8rem; margin-bottom: 1rem; }
  .attention-content li { font-size: 1.3rem; line-height: 1.9; }
  .attention-content li + li { margin-top: .7rem; }

  /* ZOOM */
  .oc-zoom__close { top: max(1.4rem, env(safe-area-inset-top)); right: max(1.4rem, env(safe-area-inset-right)); width: 48px; height: 48px; }
  .oc-zoom__nav { top: auto; bottom: max(2rem, env(safe-area-inset-bottom)); transform: none; width: 48px; height: 48px; }
  .oc-zoom__nav:hover { transform: none; }
  .oc-zoom__nav--prev { left: 2rem; }
  .oc-zoom__nav--next { right: 2rem; }
  .oc-zoom__counter { bottom: calc(max(2rem, env(safe-area-inset-bottom)) + 1.4rem); font-size: 1.4rem; }
  .oc-zoom__card { width: min(34rem, 84vw, calc((100svh - 26rem) * 868 / 1213)); }
}

@media screen and (min-width: 520px) and (max-width: 680px) {
  :root { --pad-x: 2.4rem; }
  .about-content-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-content-head h2 { font-size: 4rem; }
  .about-card-scene { width: min(90%, 32rem); }
  .shop-info { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .shop-info-image { width: 100%; }
  .collection-content-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 359px) {
  :root { --pad-x: 1.4rem; }
  .about-content { padding: 2.8rem 1.8rem 3rem; }
  .about-content-head .about-eyebrow { font-size: .9rem; letter-spacing: .04em; }
  .shop-info { padding-inline: 1.4rem; }
  .shop-title { font-size: 2.1rem; }
  .collection-content > h2 { gap: .4rem; font-size: 1.1rem; }
  .collection-content > h2 span { font-size: 3.6rem; }
}

/* Landscape phones use the wide KV composition and keep zoom controls beside the card. */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .kv-container { height: min(66.5278vw, 92svh); }
  .kv-stage { width: min(100%, calc(92svh * 1440 / 958)); }
  .kv-char { left: 12%; top: -1%; width: 76%; }
  .kv-logo { left: 35%; top: 57%; width: 33%; }
  .kv-title { left: 24.5%; top: 87%; width: 55%; }
  .kv-pack { left: 71%; top: 25%; width: 24%; }
  .kv-badge { left: 69.5%; top: 66%; width: 14%; }
  .kv-floating-card { width: var(--card-width); }
  .kv-floating-card:nth-child(odd) { left: var(--card-edge); }
  .kv-floating-card:nth-child(even) { right: var(--card-edge); }
  .oc-zoom__card { width: min(46vw, calc((100svh - 8rem) * 868 / 1213)); }
  .oc-zoom__nav { top: 50%; bottom: auto; transform: translateY(-50%); width: 48px; height: 48px; }
  .oc-zoom__nav:hover { transform: translateY(-50%); }
  .oc-zoom__close { top: max(1.2rem, env(safe-area-inset-top)); right: max(1.2rem, env(safe-area-inset-right)); width: 48px; height: 48px; }
  .oc-zoom__counter { bottom: 1.2rem; }
}

@media screen and (min-width: 681px) {
  .kv-char { left: 7%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .oc-zoom__rotor { transition: none; }
  .is-ready .kv-floating-card img { animation: none; }
  .page-background::before,
  .page-background::after { animation: none; will-change: auto; }
  .kv-bg, .kv-char, .kv-pack, .kv-logo img, .kv-logo::after, .kv-badge img, .kv-title img,
  .oc-loader__card, .oc-loader__card::before, .oc-loader__sheen,
  .oc-zoom__float { animation: none; }
  html.js:not(.is-ready) .kv-bg, html.js:not(.is-ready) .kv-char, html.js:not(.is-ready) .kv-pack,
  html.js:not(.is-ready) .kv-logo img, html.js:not(.is-ready) .kv-badge img, html.js:not(.is-ready) .kv-title img { opacity: 1; }
  .oc-zoom, .oc-zoom__stage, .oc-zoom__card, .oc-zoom__holo, .oc-zoom__glare,
  .shop-info-image img, .collection-content-list button { transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.oc-footer {
  padding: 3.2rem var(--pad-x) 4.8rem;
  text-align: center;
}
.oc-copyright {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: #d5e0e199;
}