:root {
  color-scheme: light;
  --navy: #071d42;
  --gold: #b58a2c;
  --cream: #fffdf8;
}

* {
  box-sizing: border-box;
}

html {
  background: #ece9e2;
}

body {
  margin: 0;
  color: #111;
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", sans-serif;
}

.lp {
  width: min(100%, 750px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 32px rgb(0 0 0 / 8%);
}

.panel,
.panel picture,
.panel img {
  display: block;
  width: 100%;
}

.panel img {
  height: auto;
}

.fv-note {
  margin: 5px 10px 12px;
  color: #686868;
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}

.article-panel {
  margin: clamp(34px, 7vw, 52px) 0;
}

#panel-part_02 {
  margin-bottom: 0;
}

.time-jump {
  padding: clamp(28px, 6vw, 44px) 18px clamp(20px, 4.5vw, 34px);
  color: #17100d;
  background: #fff;
  font-size: clamp(25px, 6vw, 38px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
}

.cta-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 20px 48px;
  border-top: 5px solid #d9a91d;
  border-bottom: 5px solid #d9a91d;
  background:
    radial-gradient(circle at 13% 24%, #fff 0 1px, #ffd86a 2px 4px, transparent 5px),
    radial-gradient(circle at 86% 72%, #fff 0 1px, #ff85cd 2px 4px, transparent 5px),
    radial-gradient(circle at center, rgb(184 0 111 / 54%) 0 16%, transparent 58%),
    linear-gradient(180deg, #210015 0%, #070005 100%);
  text-align: center;
}

.cta-arrow-zone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 0;
  background: #fff;
  text-align: center;
}

.cta-wrap--mid {
  border-color: #8be9ff;
  background:
    radial-gradient(circle at 14% 28%, #fff 0 1px, #7cecff 2px 4px, transparent 5px),
    radial-gradient(circle at 88% 68%, #fff 0 1px, #ff4fbd 2px 4px, transparent 5px),
    radial-gradient(circle at center, rgb(109 54 255 / 52%) 0 16%, transparent 58%),
    linear-gradient(180deg, #0b0735 0%, #03010e 100%);
}

.cta-wrap::before {
  position: absolute;
  inset: -70%;
  z-index: -1;
  background:
    repeating-conic-gradient(
      from -8deg,
      transparent 0deg 5deg,
      rgb(255 211 67 / 20%) 5.5deg 6.5deg,
      rgb(255 54 173 / 15%) 7deg 8deg,
      transparent 7.5deg 12deg
    );
  content: "";
  animation: cta-rays 10s linear infinite;
}

.cta-arrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 86px;
  margin: 0 auto;
}

.cta-chevron {
  display: block;
  width: 35px;
  height: 35px;
  margin-top: -15px;
  border-right: 8px solid currentcolor;
  border-bottom: 8px solid currentcolor;
  transform: rotate(45deg);
  animation: cta-arrow-drop 1.45s ease-in-out infinite;
}

.cta-chevron:nth-child(2) {
  animation-delay: .14s;
}

.cta-chevron:nth-child(3) {
  animation-delay: .28s;
}

.cta-arrow--mid {
  color: #ff4fbd;
  filter: drop-shadow(0 0 6px rgb(255 79 189 / 92%));
}

.cta-arrow--final {
  color: #72f3ff;
  filter: drop-shadow(0 0 8px rgb(114 243 255 / 96%));
}

.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 112px;
  overflow: hidden;
  padding: 17px 16px 19px;
  border: 4px solid #ffd85a;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, transparent 30%),
    linear-gradient(180deg, #ff6dba 0%, #f0008b 45%, #85004d 100%);
  box-shadow:
    0 0 0 4px #16000e,
    0 0 0 7px #c48a08,
    0 13px 0 #520032,
    0 20px 34px rgb(255 0 151 / 58%),
    inset 0 3px 0 rgb(255 255 255 / 58%),
    inset 0 -5px 0 rgb(82 0 48 / 68%);
  text-decoration: none;
  text-shadow:
    0 2px 0 #6c003f,
    0 3px 8px rgb(0 0 0 / 72%);
  transform-origin: center;
  animation: cta-glam-pulse 2.8s ease-in-out infinite;
}

.cta--mid {
  border-color: #8be9ff;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 38%) 0%, transparent 30%),
    linear-gradient(180deg, #6d36ff 0%, #3230d8 47%, #12125f 100%);
  box-shadow:
    0 0 0 4px #05021e,
    0 0 0 7px #41c7ef,
    0 13px 0 #101055,
    0 20px 34px rgb(79 57 255 / 58%),
    inset 0 3px 0 rgb(255 255 255 / 58%),
    inset 0 -5px 0 rgb(8 5 77 / 68%);
  text-shadow:
    0 2px 0 #17146f,
    0 3px 8px rgb(0 0 0 / 72%);
  animation-name: cta-mid-pulse;
}

.cta--mid .cta-time {
  border-color: #8be9ff;
  color: #bff7ff;
  background: linear-gradient(180deg, #241179 0%, #05021e 100%);
  box-shadow:
    0 3px 0 #151168,
    0 4px 10px rgb(0 0 0 / 48%),
    0 0 12px rgb(124 236 255 / 52%);
}

.cta::before {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 24%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 86%),
    transparent
  );
  content: "";
  filter: blur(2px);
  transform: skewX(-22deg);
  animation: cta-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.cta-time {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 5px;
  padding: 3px 18px 4px;
  border: 2px solid #ffd85a;
  border-radius: 999px;
  color: #ffe98f;
  background: linear-gradient(180deg, #31001e 0%, #080005 100%);
  box-shadow:
    0 3px 0 #6f0043,
    0 4px 10px rgb(0 0 0 / 48%),
    0 0 12px rgb(255 80 185 / 44%);
  font-size: clamp(13px, 3.5vw, 17px);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 2px #000;
}

.cta-label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: .02em;
  white-space: nowrap;
}

.cta:active {
  transform: translateY(7px) scale(.985);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0%, transparent 28%),
    linear-gradient(180deg, #ed4ca7 0%, #c70075 48%, #69003d 100%);
  box-shadow:
    0 0 0 4px #16000e,
    0 0 0 7px #c48a08,
    0 6px 0 #520032,
    0 12px 22px rgb(255 0 151 / 46%),
    inset 0 3px 0 rgb(255 255 255 / 38%),
    inset 0 -4px 0 rgb(82 0 48 / 58%);
}

.cta--mid:active {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0%, transparent 28%),
    linear-gradient(180deg, #5930dc 0%, #2623b6 48%, #0a0a47 100%);
  box-shadow:
    0 0 0 4px #05021e,
    0 0 0 7px #41c7ef,
    0 6px 0 #101055,
    0 12px 22px rgb(79 57 255 / 46%),
    inset 0 3px 0 rgb(255 255 255 / 38%),
    inset 0 -4px 0 rgb(8 5 77 / 58%);
}

.cta:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 10px;
}

@keyframes cta-glam-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 4px #16000e,
      0 0 0 7px #c48a08,
      0 13px 0 #520032,
      0 20px 34px rgb(255 0 151 / 58%),
      inset 0 3px 0 rgb(255 255 255 / 58%),
      inset 0 -5px 0 rgb(82 0 48 / 68%);
  }

  50% {
    transform: translateY(-3px) scale(1.028);
    box-shadow:
      0 0 0 4px #16000e,
      0 0 0 8px #ffe06a,
      0 15px 0 #520032,
      0 25px 46px rgb(255 42 175 / 78%),
      inset 0 3px 0 rgb(255 255 255 / 64%),
      inset 0 -5px 0 rgb(82 0 48 / 68%);
  }
}

@keyframes cta-mid-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 4px #05021e,
      0 0 0 7px #41c7ef,
      0 13px 0 #101055,
      0 20px 34px rgb(79 57 255 / 58%),
      inset 0 3px 0 rgb(255 255 255 / 58%),
      inset 0 -5px 0 rgb(8 5 77 / 68%);
  }

  50% {
    transform: translateY(-3px) scale(1.028);
    box-shadow:
      0 0 0 4px #05021e,
      0 0 0 8px #8be9ff,
      0 15px 0 #101055,
      0 25px 46px rgb(109 54 255 / 78%),
      inset 0 3px 0 rgb(255 255 255 / 64%),
      inset 0 -5px 0 rgb(8 5 77 / 68%);
  }
}

@keyframes cta-arrow-drop {
  0%,
  100% {
    opacity: .34;
    transform: translateY(-5px) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translateY(5px) rotate(45deg);
  }
}

@keyframes cta-shine {
  0%,
  58% {
    left: -45%;
    opacity: 0;
  }

  66% {
    opacity: 1;
  }

  84%,
  100% {
    left: 125%;
    opacity: 0;
  }
}

@keyframes cta-rays {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta::before,
  .cta-wrap::before,
  .cta-chevron {
    animation: none;
  }
}

@media (max-width: 750px) {
  html,
  body {
    background: #fff;
  }

  .lp {
    box-shadow: none;
  }
}