@charset "utf-8";

/* ==========================================
 Layout
============================================*/

/* デザイン幅に対する比率計算用 */
[style*="--w"] {
  width: calc(100% * var(--w) / 1100);
}

.main {
  overflow: hidden;
}

/* ==========================================
 Layer
============================================*/

.layer--1 {
  top: 24%;
}

.layer--2 {
  top: 65%;
}

.layer--3 {
  top: 23%;
}

.layer--4 {
  top: 8.5%;
  left: 49.8%;
  overflow: hidden;
  height: 87%;
}

.layer--5 {
  top: 85%;
}

.layer--6 {
  top: 8%;
}

.layer--7 {
  top: 24%;
}

.layer--8 {
  top: 84%;
  left: 19.5%;
}

.layer--9 {
  top: 36%;
}

.layer--10 {
  top: 2.8%;
  left: 59.5%;
  transform: unset;
  font-size: var(--sz-36);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  color: var(--bs-white);
}

.layer--11 {
  top: 19%;
  left: 73.5%;
  text-align: center;
  color: #950607;
  font-size: var(--sz-50);
  line-height: 1;

  &:has(.over) {
    top: 38.5%;
  }
}

.layer--12 {
  top: 25%;
}

.layer--popup {
  top: 75%;
}

.layer--popup2 {
  top: 67%;
  left: 17.8%;
}

.layer--follow {
  top: 52%;
  left: 77%;
  transform: translateY(-50%);
}

/* ==========================================
 Animation
============================================*/
[data-aos="ring"] {
  --ring-border-radius: 1em;
}

/* ==========================================
 Contents
============================================*/

/* form */
.form-control {
  font-size: var(--sz-26);
  text-align: center;
  padding: 1em 1em;
  margin-bottom: var(--sz-75);
  --bs-border-radius: 0;
  width: 96%;
  margin-inline: auto;
}

/* slider */
.slider {
  width: 100%;
}

/* ==========================================
 CountDown
============================================*/
.countdown {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translateY(-50%);
  color: #fff001;
  font-size: var(--sz-48);
  white-space: nowrap;
  display: flex;
  &.over {
    font-size: var(--sz-40);
  }
}

/* ==========================================
 Page Top
============================================*/
.pagetop {
  bottom: calc(100vw * 235 / 1100);
}

@media (min-width: 750px) {
  .pagetop {
    bottom: 5%;
  }
}

/* ==========================================
 Modal
============================================*/
.modal__today {
  top: 8.5%;
  left: 59%;
  font-family: var(--font-gothic);
  font-size: var(--sz-58);
  font-weight: bold;
  color: #fff001;
  & span {
    color: inherit;
  }
  @media (min-width: 576px) {
    font-size: 36px;
  }

  @media (min-width: 750px) {
    font-size: 46px;
  }
}