/* ZENT新大久保店 ティザーLP（池上さん案を本番化）
   1画面完結。中央に縦一列：遊べもっと → 見出し → ボタン → ロゴ・注意表記 */
:root {
  --black: #000000;
  --white: #ffffff;
  --red: #e60012;
  --mute: rgba(255, 255, 255, 0.62);
  --disp: "Rubik Mono One", "Arial Black", sans-serif;
  --body:
    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color-scheme: dark;
}
img {
  max-width: 100%;
}
html,
body {
  height: 100%;
  margin: 0;
  background: var(--black);
  color: var(--white);
}
body {
  font-family: var(--body);
  font-size: 14px;
}
a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

.stage {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(120px, 22vh, 220px);
  padding-block: clamp(110px, 18vh, 190px) 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow: hidden;
  text-align: center;
}

.main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 6.5vh, 64px);
  width: 100%;
  max-width: 1000px;
}
.asobe {
  width: clamp(150px, 22vw, 230px);
  height: auto;
  display: block;
  animation: fadeDown 0.9s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
}

.coming {
  margin: 0;
  line-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.cd-img {
  width: min(88vw, 900px);
  max-width: 100%;
  height: auto;
  display: block;
  animation:
    wipeIn 1s 0.45s cubic-bezier(0.8, 0, 0.2, 1) both,
    flicker 7s 2.6s steps(1) infinite;
}
@keyframes wipeIn {
  from {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.04);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.35;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.6;
  }
  97% {
    opacity: 1;
  }
}
.rule {
  width: clamp(96px, 14vw, 156px);
  height: 3px;
  background: var(--red);
  transform-origin: center;
  animation: draw 0.7s 1.35s cubic-bezier(0.8, 0, 0.2, 1) both;
}
@keyframes draw {
  from {
    transform: scaleX(0);
  }
}
.start {
  margin: calc(clamp(28px, 5vh, 48px) * -0.4) 0 0;
  line-height: 0;
}
.start img {
  width: min(36vw, 370px);
  height: auto;
  display: block;
  animation: spread 1s 1.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes spread {
  from {
    opacity: 0;
    transform: scaleX(0.7);
  }
}

.ctas {
  margin-top: clamp(24px, 5vh, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  animation: fade 0.8s 2.1s both;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.cta {
  flex: 1 1 260px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 32px;
  text-decoration: none;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.cta .en {
  font-family: var(--disp);
  font-size: 17px;
  letter-spacing: 0.04em;
}
.cta .ja {
  font-size: 11px;
  font-weight: 700;
  display: block;
  margin-top: 3px;
  letter-spacing: 0.06em;
}
.cta .t {
  text-align: left;
}
.cta svg {
  flex: none;
  transition: transform 0.3s;
}
.cta:hover svg {
  transform: translateX(5px);
}
.cta.primary {
  background: var(--red);
  color: var(--white);
  border: 2px solid var(--red);
}
.cta.primary:hover {
  background: var(--white);
  color: var(--red);
  border-color: var(--white);
}
.cta.ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.cta.ghost:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fade 0.8s 2.3s both;
}
.foot .cat {
  font-family: var(--disp);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.foot img {
  width: clamp(220px, 34vw, 330px);
  height: auto;
  display: block;
}
.foot .notice {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--mute);
  max-width: 62ch;
}

.is-preview.settled * {
  animation: none !important;
}
/* 校了版（2026-10-29）で追加：見出しのベクター化と画面サイズ別の調整 */
.cd-svg{width:min(90vw,980px);max-width:100%;height:auto;display:block;overflow:visible}
.cd-w{animation:wipeIn 1s .45s cubic-bezier(.8,0,.2,1) both,flicker 7s 2.6s steps(1) infinite}
.cd-rule{transform-box:fill-box;transform-origin:center;animation:draw .7s 1.35s cubic-bezier(.8,0,.2,1) both}
.cd-start{transform-box:fill-box;transform-origin:center;animation:spread 1s 1.55s cubic-bezier(.2,.8,.2,1) both}

/* ===== レスポンシブ（ティザー） ===== */
.stage{gap:clamp(96px,18svh,200px);padding-block:clamp(72px,14svh,170px) 44px}
.main{gap:clamp(28px,5.5svh,60px)}
.ctas{margin-top:clamp(16px,4svh,48px)}
/* 小さいスマホ */
@media (max-width:374px){
  .cta{padding:0 18px;min-height:58px}
  .cta .en{font-size:15px}
  .asobe{width:140px}
}
/* タブレット */
@media (min-width:768px){
  .asobe{width:210px}
  .cd-svg{width:min(84vw,880px)}
  .ctas{max-width:680px;gap:16px}
  .cta{min-height:68px}
  .cta .en{font-size:18px}
  .foot img{width:300px}
}
/* PC */
@media (min-width:1024px){
  .stage{gap:clamp(80px,14svh,170px);padding-block:clamp(56px,11svh,140px) 48px}
  .main{max-width:1100px}
  .asobe{width:230px}
  .cd-svg{width:min(76vw,980px)}
  .ctas{max-width:740px;gap:18px}
  .cta{min-height:74px;padding:0 28px;border-radius:37px}
  .cta .en{font-size:20px}
  .cta .ja{font-size:12px}
  .foot .notice{font-size:12px}
}
/* 大画面 */
@media (min-width:1600px){
  .main{max-width:1300px}
  .asobe{width:270px}
  .cd-svg{width:min(66vw,1180px)}
  .ctas{max-width:820px}
  .foot img{width:340px}
}
/* スマホ横向き・高さの低い画面 */
@media (max-height:540px) and (orientation:landscape){
  .stage{gap:56px;padding-block:28px 28px}
  .main{gap:16px}
  .asobe{width:130px}
  .cd-svg{width:min(60vw,560px)}
  .ctas{margin-top:8px;max-width:620px}
  .cta{min-height:52px}
  .cta .en{font-size:15px}
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}