:root {
  --screen-base-size: 800;
  background-color: #141517;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

img,
video {
  width: 100%;
}

.l-container {
  background-color:#141517;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: min(224px, calc(224 / var(--screen-base-size) * 100vw));
  overflow: hidden;
}

.u-relative {
  position: relative;
}

.u-absolute {
  position: absolute;
}

/* * ページ内共通CTA * */
.c-cta-sec {
  position: relative;
}

.c-cta-sec-text-wrap {
  width: 80%;
  left: 50%;
  top: 10.9%;
  transform: translateX(-50%);
}

.c-cta-sec-ticket {
  width: 85% !important;
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  /* filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.6)); */
  box-shadow: 0 0 75px rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.3);
}

.c-sta-sec-ticket-wrap {
  overflow: hidden;
}

.c-cta-sec-ticket__shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-100%) rotate(0deg);
  pointer-events: none;
}

.c-cta-sec-btn {
  width: 85% !important;
  position: absolute;
  bottom: 18.5%;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.2));
  animation: ctaAnime 1.5s linear infinite;
}

.cancel-link-text{
    position: absolute;
  /* ここだけいじればOK */
  top: 74%;  /* 上からの距離 */
  left: 50%;       /* 横位置 */
  transform: translateX(-50%);

  /* 見た目 */
  font-size: 18px;
  color: #888;
  text-decoration: none;
   white-space: nowrap; 
}

/* 下線だけ付ける */
.cancel-link-text .underline {
  text-decoration: underline;
}

.cancel-link-text .underline {
  text-decoration: underline;
}

@keyframes ctaAnime {
  0% {
    transform: translateX(-50%);
  }

  /* ——— 高速で5回揺れ（より短間隔） ——— */
  3% {
    transform: translateX(-48.5%);
  }

  6% {
    transform: translateX(-51.5%);
  }

  9% {
    transform: translateX(-48.5%);
  }

  12% {
    transform: translateX(-51.5%);
  }

  15% {
    transform: translateX(-50%);
  }

  /* ——— 残り時間は停止 ——— */
  100% {
    transform: translateX(-50%);
  }
}

/* * ページ内共通CTA /E * */
/* * ページ下部固定CTA * */
.c-cta-fixed {
  max-width: 800px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
}

.c-cta-fixed-wrapper {
  position: relative;
}

.c-cta-fixed__time {
  font-size: min(36px, 5vw);
  font-weight: bold;
  position: absolute;
  right: 18%;
  top: 29.5%;
}

/* * ページ下部固定CTA /E * */
/* * ポップアップ * */
.c-cta-popup {
  /* display: none; */
  width: 100vw;
  height: 100dvh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.c-cta-popup.is-active {
  opacity: 1;
  pointer-events: auto;
}

.c-cta-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.c-cta-popup-link {
  display: block;
  width: 100%;
  max-width: min(500px, 62.5vw);
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.c-cta-popup-link__close {
  width: min(64px, 8vw);
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}
@media screen and (max-width: 700px) {
  .cancel-link-text {
    font-size: 14px;
  }
}

@media screen and (max-width: 500px) {
  .cancel-link-text {
    font-size: 12px;
  }
}

@media screen and (max-width: 400px) {
  .cancel-link-text {
    font-size: 10px;
  }
}

@media screen and (max-width: 350px) {
  .cancel-link-text {
    font-size: 8px;
  }
}

@media screen and (max-width: 300px) {
  .cancel-link-text {
    font-size: 6px;
  }
}


/* * ポップアップ /E * */
/* === SECTION01 === */
/* * * 1-1 * * */
.sec-1-1-anime-wrap {
  width: 87%;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.sec-1-1__parts01 {
  width: 78%;
  top: min(21px, calc(21 / var(--screen-base-size) * 100vw));
  left: 10%;
}

.sec-1-1__parts02 {
  left: min(44px, calc(44 / var(--screen-base-size) * 100vw));
  top: max(-41px, calc(-41 / var(--screen-base-size) * 100vw));
  width: 92%;
}

/* * * 1-1 /E * * */
/* * * 1-3 * * */
.sec-1-3-1-anime-wrap {
  width: 90%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
}

/* * * 1-3 /E * * */
/* === SECTION01 /E === */
/* === SECTION02 === */
/* * * 2-2 * * */
.sec-2-2-anime-wrap {
  width: 48%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.sec-2-2__parts01 {
  left: -45%;
  top: max(-10px, calc(-10 / var(--screen-base-size) * 100vw));
}

.sec-2-2__parts02 {
  left: 46%;
  top: max(-36px, calc(-36 / var(--screen-base-size) * 100vw));
}

.sec-2-2__parts03 {
  left: -45%;
  top: max(-50px, calc(-50 / var(--screen-base-size) * 100vw));
}

.sec-2-2__parts04 {
  left: 46%;
  top: max(-79px, calc(-79 / var(--screen-base-size) * 100vw));
}

/* * * 2-2 /E * * */
/* * * 2-3 * * */
.sec-2-3__parts01 {
  width: 99%;
  left: 1%;
  top: -2%;
}

.sec-2-3__parts02 {
  width: 88%;
  left: 4%;
  bottom: 34%;
}

.sec-2-3__parts03{
  width: 84%;
  left: 8.5%;
  bottom: 2.6%;
}

/* * * 2-3 /E * * */

/* * * 2-4 * * */
.sec-2-4__parts01 {
  width: 100%;
  left: 0%;
  top: 0;
}
/* * * 2-4 /E * * */

/* * * 2-5 * * */
.sec-2-5__parts01{
  left: 0;
  top: 0;
}

.sec-2-5__parts02{
  width: 94%;
  left: 0;
  bottom: 28.5%;
}
/* * * 2-5/E * * */

/* * * 2-6 * * */
.sec-2-6-anime-wrap{
  width: 100%;
  bottom: 31%;
}

.sec-2-6__parts01 {
  width: 57%;
  left: 4%;
  bottom: 31%;
}

.sec-2-6__parts02{
  width: 72%;
  left: 4%;
  margin-top: min(25px, calc(25 / var(--screen-base-size) * 100vw));
}
/* * * 2-6 /E * * */
/* === SECTION02 /E === */



/* === SECTION03 === */
/* * * 3-1 * * */
.sec-3-1-anime-wrap{
  left: 0;
  top: 53.6%;
}

.sec-3-1__parts01 {
  width: 76%;
  left: 13%;
  bottom: 0;
}

.sec-3-1__parts02 {
  width: 86.5%;
  left: 7.5%;
  bottom: 0;
  margin-top: max(-72px, calc(-72 / var(--screen-base-size) * 100vw));;
}
/* * * 3-1 /E * * */


/* * * 3-4 * * */
.sec-3-4__parts01 {
  width: 100%;
  left: 0;
  top: 5.2%;
}

.sec-3-4__parts02 {
  width: 100%;
  left: 0;
  top: 39.8%;
}

.sec-3-4__parts03 {
  width: 94%;
  left: 0;
  top: 74.4%;
}

/* * * 3-4 /E * * */
/* === SECTION03 /E === */


/* === SECTION04 === */
.sec-4-1{
  position: relative;
  z-index: 1;
}

.sec-4-2-wrap {
  margin-top: max(-111px, calc(-111 / var(--screen-base-size) * 100vw));
  z-index: 0;
}

.sec-4-2__parts01 {
  width: 86.5%;
  bottom: 10.2%;
  left: 50%;
  transform: translateX(-50%);
}

.sec-4-3{
  background-color: #141517;
}

.lp-4-3-wrap {
  display: flex;
  background-color: #141517;
}

.sec-4-3__parts02{
  padding: 
    min(8px, calc(8 / var(--screen-base-size) * 100vw))
    min(35px, calc(35 / var(--screen-base-size) * 100vw))
    min(16px, calc(16 / var(--screen-base-size) * 100vw))
    min(35px, calc(35 / var(--screen-base-size) * 100vw))
  ;
}

.sec-4-3__parts03{
  padding: 
    0
    min(8px, calc(8 / var(--screen-base-size) * 100vw))
    min(63px, calc(63 / var(--screen-base-size) * 100vw))
    min(35px, calc(35 / var(--screen-base-size) * 100vw))
  ;
}

.sec-4-3__parts04{
  padding: 
    0
    min(35px, calc(35 / var(--screen-base-size) * 100vw))
    min(63px, calc(63 / var(--screen-base-size) * 100vw))
    min(8px, calc(8 / var(--screen-base-size) * 100vw))
  ;
}

/* * * 4-4 * * */
.sec-4-4__parts01 {
  width: 80%;
  top: 11.4%;
  left: 48%;
  transform: translateX(-50%);
}

.sec-4-4__parts02 {
  width: 82%;
  top: 54.6%;
  left: 49%;
  transform: translateX(-50%);
}

.sec-4-4__parts03 {
  width: 82.5%;
  bottom: 1%;
  left: 49%;
  transform: translateX(-50%);
}

/* * * 4-4 /E * * */
/* === SECTION04 /E === */


/* === SECTION05 === */
/* * * 5-1-1 * * */
.sec-5-1-1-wrap {
  width: 120%;
  display: flex;
  top: 26.3%;
  left: 50%;
  transform: translateX(-50%);
}

.sec-5-1__parts01 {
  left: 4%;
}

.sec-5-1__parts02 {
  right: 4%;
}

.sec-5-1__parts03 {
  left: 0;
  top: 46%;
}

.sec-5-1__parts04 {
  left: 0;
  top: 33%;
}

/* * * 5-1-1 /E * * */
/* === SECTION05 /E === */
/* === SECTION06 === */
.sec-6-1__parts01 {
  margin-top: max(-265px, calc(-265 / var(--screen-base-size) * 100vw));
}

.sec-6-2__parts01 {
  top: 0;
  left: 0;
}

.sec-6-2__parts02 {
  margin-top: max(-663px, calc(-663 / var(--screen-base-size) * 100vw));
}

.sec-6-4 {
  margin-top: max(-185px, calc(-185 / var(--screen-base-size) * 100vw));
  position: relative;
  z-index: 1; 
}

.sec-6-5 {
  margin-top: max(-185px, calc(-185 / var(--screen-base-size) * 100vw));
  position: relative;
  z-index: 0;
}

/* === SECTION06 /E === */
/* === SECTION07 === */
.lp-7-2-wrap {
  margin-bottom: 150px;
}

.lp-7-2-q-wrap{
  position: relative;
}

.lp-7-2-q-wrap::before,.lp-7-2-q-wrap::after{
  content: "";
  background-color: #a28859;
  display: block;
  width: min(20px, calc(20 / var(--screen-base-size) * 100vw));
  height: min(3px, calc(3 / var(--screen-base-size) * 100vw));

  position: absolute;
  right: 5%;
  top: 15%;
  transform: translateX(-50%);
} 

.lp-7-2-q-wrap::after{
  transform: translateX(-50%) rotate(90deg);
  transition: all .3s ease;
}

.lp-7-2-q-wrap.is-active::after{
  transform: translateX(-50%) rotate(0deg);
}

.lp-7-2-q {
  cursor: pointer;
  margin-bottom: 20px;
}

.lp-7-2-a {
  display: none;
}

.rule_text {
  height: 100px;
  padding-top: 30px;
  text-align: center;
  text-decoration: underline;
  color:#fff;
}

/* === SECTION07 /E === */