@charset "utf-8";

/* 動くグラデーション背景 */
.graRY {
  background: linear-gradient(-45deg, #700000, #ff3131) fixed;
  background-size: 800% 800%;
  animation: GradietionAnimation 3s ease infinite;
  border: #ff2e2e 3px double;
  padding: 2%;
  box-shadow: 0px 0px 10px 2px hsl(0, 100%, 67%);
}

@keyframes GradietionAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.graR {
  background: linear-gradient(-45deg, #ffd900, #555300) fixed;
  background-size: 800% 800%;
  animation: GradietionAnimation 2s ease infinite;
  border: #ffee00 3px solid;
  box-shadow: 0px 0px 10px 0px #fbff24;
}

@keyframes GradietionAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 動くグラデーション背景 */

/* ネオンテキスト */
.neonText {
  animation: orange 3.5s infinite alternate;
  color: #ff3d3d;
}

/* Flickering animation */
@keyframes orange {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 4px #ff6600,
      0 0 11px #ff6600,
      0 0 19px #ff6600,
      0 0 20px #ffc402,
      0 0 40px #ffc402,
      0 0 50px #ffc402,
      0 0 60px #ffc402;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.neonText2 {
  animation: white 3.5s infinite alternate;
  color: #ffffff;
}

/* Flickering animation */
@keyframes white {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 4px #2b2b2b,
      0 0 11px #2b2b2b,
      0 0 19px #2b2b2b,
      0 0 20px #ffffff,
      0 0 40px #ffffff,
      0 0 50px #ffffff,
      0 0 60px #ffffff;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.neonText3 {
  animation: orange 3.5s infinite alternate;
  color: #fff784;
}

/* Flickering animation */
@keyframes orange {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 4px #ff6600,
      0 0 11px #ff6600,
      0 0 19px #ff6600,
      0 0 20px #ffc402,
      0 0 40px #ffc402,
      0 0 50px #ffc402,
      0 0 60px #ffc402;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.neonText4 {
  animation: red 3.5s infinite alternate;
  color: #ffd000;
}

/* Flickering animation */
@keyframes red {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 4px #e72121,
      0 0 11px #e72121,
      0 0 19px #e72121,
      0 0 20px #ff6a3c,
      0 0 40px #ff6a3c,
      0 0 50px #ff6a3c,
      0 0 60px #ff6a3c;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.neonText5 {
  animation: orange 3.5s infinite alternate;
  color: #f8f8f8;
}

/* Flickering animation */
@keyframes orange {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow:
      0 0 4px #ff6600,
      0 0 11px #ff6600,
      0 0 19px #ff6600,
      0 0 20px #ffc402,
      0 0 40px #ffc402,
      0 0 50px #ffc402,
      0 0 60px #ffc402;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

/* ネオンテキスト */

/* きらりテキスト */
.red_star {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(224, 1, 1, 0.849) 40%,
    #ffb5b5 50%,
    rgba(224, 1, 1, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.gold_star {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(34, 34, 34, 0.849) 40%,
    #ff3d3d 50%,
    rgba(37, 37, 37, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.gold_star2 {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(255, 153, 0, 0.849) 40%,
    #ffffff 50%,
    rgba(255, 153, 0, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.gold_star3 {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(34, 34, 34, 0.849) 40%,
    #ffe600 50%,
    rgba(37, 37, 37, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.yellow_star {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(255, 255, 255, 0.849) 45%,
    #b0bd00 50%,
    rgba(255, 255, 255, 0.849) 55%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.yellow_star2 {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgb(255, 238, 0) 45%,
    #ffffff 50%,
    rgb(255, 238, 0) 55%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.green_star {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(21, 255, 0, 0.849) 40%,
    #ffffff 50%,
    rgba(21, 255, 0, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

.blue_star {
  position: relative;
  background-image: linear-gradient(
    70deg,
    rgba(0, 217, 255, 0.849) 40%,
    #ffffff 50%,
    rgba(0, 217, 255, 0.849) 60%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* きらりテキスト */

.blinking {
  -webkit-animation: blink 2.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  4% {
    opacity: 0.6;
  }

  8% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  72% {
    opacity: 0.6;
  }

  74% {
    opacity: 1;
  }
}

.blinking2 {
  animation: tikatika 2s step-end infinite;
}

@keyframes tikatika {
  0% {
    opacity: 1;
  }

  85% {
    opacity: 0.7;
  }

  90% {
    opacity: 1;
  }

  95% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 3s ease 0s 1 normal;
}

/* fadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
  }
}

.fadeInLeft {
  animation: fadeInLeft 1s ease 0s 1 normal;
}

/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
  }
}

.flash2 {
  animation: flash 1.5s linear infinite;
}

@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.zoomIn {
  animation: zoomIn 1s ease 0s 1 normal;
}

/* zoomIn */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomFade {
  animation: zoomFade 2s ease-in-out infinite;
}

/* zoomFade */
@keyframes zoomFade {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scaleX(1);
  }
}

.fadein-blink {
  opacity: 0;
  animation:
    fadeInOnce 0.8s ease-out 0.2s forwards,
    /* 0.2s後にフェードインして止まる */ blinkLoop 1.1s ease-in-out 1.2s
      infinite;
  /* フェードイン完了後に点滅開始 */
}

/* 1回だけフェードイン */
@keyframes fadeInOnce {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ずっと点滅（opacityで） */
@keyframes blinkLoop {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

/* 動きが苦手な人向け：OS設定を尊重して止める */
@media (prefers-reduced-motion: reduce) {
  .fadein-blink {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }

  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

.shivering {
  animation: shivering 2s linear infinite;
}

/* shivering */
@keyframes shivering {
  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-4deg);
  }

  20% {
    transform: rotateZ(4deg);
  }

  25% {
    transform: rotateZ(-2.5deg);
  }

  30% {
    transform: rotateZ(3deg);
  }

  35% {
    transform: rotateZ(-2deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

/* float */
@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

/* カウントダウン */
input[type="datetime-local"] {
  border: none;
  font-size: 16px;
  padding: 8px 12px;
  text-align: center;
  margin: 0 auto;
}

.countdown-wrapper {
  text-align: center;
  align-items: flex-end;
  background-color: rgb(0, 0, 0);
  border: 3px double rgba(198, 23, 23, 0.843);
  display: flex;
  padding: 12px 16px;
  margin: 0 auto;
  max-width: 800px;

  & > .time {
    text-align: center;
    margin: 0 auto;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    min-width: 48px;
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 4px;
  }

  & > .unit {
    text-align: center;
    margin: 0 auto;
    color: brown;
  }
}

/* カウントダウン */

.buruburu {
  display: inline-block;
  animation: hurueru 0.1s infinite;
}

@keyframes hurueru {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }

  25% {
    transform: translate(1px, 2px) rotateZ(0deg);
  }

  50% {
    transform: translate(0px, 1px) rotateZ(0deg);
  }

  75% {
    transform: translate(2px, 0px) rotateZ(0deg);
  }

  100% {
    transform: translate(0px, 3px) rotateZ(0deg);
  }
}

.buruburu2 {
  -webkit-animation: buruburu2 0.1s infinite linear alternate;
  animation: buruburu2 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0) rotate(-3deg);
  }

  50% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
  }

  100% {
    -webkit-transform: translate(0, 0) rotate(3deg);
  }
}

@keyframes buruburu2 {
  0% {
    transform: translate(0, 0) rotate(-3deg);
  }

  50% {
    transform: translate(0, -1px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(3deg);
  }
}

.shine-and-vib {
  display: block;
  position: relative;
  overflow: hidden;
  transition: 1s;
  animation: vib 3s linear infinite;

  &::before {
    position: absolute;
    content: "";
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 300ms;
    animation: shine 2.5s ease-in-out infinite;
  }

  @-webkit-keyframes shine {
    0% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0;
    }

    80% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0.5;
    }

    81% {
      -webkit-transform: scale(4) rotate(45deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: scale(50) rotate(45deg);
      opacity: 0;
    }
  }

  @-webkit-keyframes vib {
    0% {
      transform: translate(0);
    }

    20% {
      transform: translate(0);
    }

    22% {
      transform: translate(2px) rotate(2deg);
    }

    24% {
      transform: translate(0, 0);
    }

    26% {
      transform: translate(-2px) rotate(-2deg);
    }

    28% {
      transform: translate(0);
    }

    30% {
      transform: translate(2px) rotate(2deg);
    }

    32% {
      transform: translate(0);
    }

    100% {
      transform: translate(0);
    }
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s linear infinite;
}

/* fuwafuwa */
@keyframes fuwafuwa {
  0% {
    transform: translateY(0);
  }

  33.33333% {
    transform: translateY(15px);
  }

  66.66667% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

.animate73,
.a-option73,
.a-btnsub73 {
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  -o-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

a.a-btn {
  position: relative;
  display: inline-block;
  margin: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a.a-btn img {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

img.a-main {
  width: 100%;
  position: relative;
  z-index: 54;
}

@-moz-keyframes animate73 {
  0% {
    -moz-transform: scale(0.92);
  }

  40% {
    -moz-transform: scale(0.97);
  }

  100% {
    -moz-transform: scale(0.92);
  }
}

@-o-keyframes animate73 {
  0% {
    -o-transform: scale(0.92);
  }

  40% {
    -o-transform: scale(0.97);
  }

  100% {
    -o-transform: scale(0.92);
  }
}

@-webkit-keyframes animate73 {
  0% {
    -webkit-transform: scale(0.92);
  }

  40% {
    -webkit-transform: scale(0.97);
  }

  100% {
    -webkit-transform: scale(0.92);
  }
}

@keyframes animate73 {
  0% {
    transform: scale(0.92);
  }

  40% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(0.92);
  }
}

.animate73 {
  -webkit-animation-name: animate73;
  -moz-animation-name: animate73;
  -o-animation-name: animate73;
  animation-name: animate73;
}

.a-btn73 {
  padding-left: 0% !important;
}

.a-option73 {
  top: 0% !important;
}

.a-option73 {
  width: 20% !important;
}

.a-btn73 {
  max-width: 100% !important;
}

.animate73,
.a-btnsub73,
.a-option73 {
  animation-duration: 1s !important;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -moz-animation-duration: 1s !important;
}

.fv-win-wrap {
  position: relative;
  display: block;
  overflow: hidden; /* ← これが最重要 */
}

/* 念のため全体にも */
body {
  overflow-x: hidden;
}

/* 画像 */
.fv-win-img {
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center center; /* ← ブレ防止 */

  animation:
    fvWinIn 0.8s ease-out forwards,
    fvWinPulse 2.2s ease-in-out 1s infinite;

  will-change: transform, opacity, filter;
}

/* 初回 */
@keyframes fvWinIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  70% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 断続アニメ */
@keyframes fvWinPulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  10% {
    transform: scale(1.03);
    filter: brightness(1.3);
  }

  20% {
    transform: scale(1.06);
    filter: brightness(1.5);
  }

  30% {
    transform: scale(1.02);
    filter: brightness(1.15);
  }

  40% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* <!-- スクロール時に要素が画面内に入ったらアニメーションを適用 --> */
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;

  &.fadein-left {
    transform: translate(-30px, 0);
  }

  &.fadein-right {
    transform: translate(30px, 0);
  }

  &.fadein-up {
    transform: translate(0, -30px);
  }

  &.fadein-bottom {
    transform: translate(0, 30px);
  }

  &.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
.float-quake {
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform-origin: center center;

  animation:
    floatUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    quake 1.8s ease-in-out 1.1s infinite;
}

/* =========================
   ① ふわっと浮かび上がる
========================= */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.94);
    filter: blur(3px);
  }

  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* =========================
   ② 地震のようにグラグラ
========================= */
@keyframes quake {
  0%,
  65%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  68% {
    transform: translate(-3px, 1px) rotate(-1deg);
  }

  71% {
    transform: translate(4px, -2px) rotate(1.2deg);
  }

  74% {
    transform: translate(-4px, 2px) rotate(-1.3deg);
  }

  77% {
    transform: translate(3px, -1px) rotate(0.8deg);
  }

  80% {
    transform: translate(-2px, 1px) rotate(-0.6deg);
  }

  84% {
    transform: translate(2px, 0) rotate(0.4deg);
  }

  88% {
    transform: translate(-1px, 0) rotate(-0.2deg);
  }

  92% {
    transform: translate(0, 0) rotate(0);
  }
}