main {
  position: relative;
  overflow: hidden;
  
  &::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/assets/img/pc-bg-img.webp);
    background-position: center;
    background-size: cover;
  }

  #card {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url(/assets/img/enter-img.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 11;
    span {
      width: 50%;
      max-width: 360px;
      display: block;
      animation: horizontal 3s ease-in-out infinite alternate;
      cursor: pointer;
      img {
        display: block;
        animation: vertical 4.5s ease-in-out infinite alternate;
      }
    }
  }
  
  #opening.on {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #000000;
      overflow: hidden;
    }
    #container netflixintro {
      display: block;
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
      animation-name: zoom-in;
      animation-delay: calc(0.5s * .8);
      animation-duration: calc(3.5s * .8);
      animation-timing-function: ease-in;
      animation-fill-mode: forwards;
      background-size: 4000px;
      background-position: -1950px 0;
    }
    #container netflixintro[letter=K] {
      transform-origin: 30% center;
    }
    #container netflixintro[letter=K] .helper-1 {
      width: 19.5%;
      height: 100%;
      background-color: rgba(228, 9, 19, 0.5);
      left: 22.4%;
      top: 0;
      transform: rotate(180deg);
      animation-name: fading-lumieres-box;
      animation-duration: calc(2s * .8);
      animation-delay: calc(0.6s * .8);
      animation-fill-mode: forwards;
      z-index: 3;
    }
    #container netflixintro[letter=K] .helper-1 .effect-brush {
      animation-name: brush-moving;
      animation-duration: calc(2s * .8);
      animation-fill-mode: forwards;
      animation-delay: calc(1.2s * .8);
    }
    #container netflixintro[letter=K] .helper-1 .effect-brush [class*=fur-] {
      bottom: 0;
      height: 40%;
    }
    #container netflixintro[letter=K] .helper-3 {
      width: 19%;
      height: 82%;
      left: 43%;
      top: 30%;
      transform: rotate(150deg);
      box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, 0.4);
      overflow: hidden;
      z-index: 1;
    }
    #container netflixintro[letter=K] .helper-3 .effect-brush {
      animation-name: brush-moving;
      animation-duration: calc(2s * .8);
      animation-fill-mode: forwards;
      animation-delay: calc(0.8s * .8);
    }
    #container netflixintro[letter=K] .helper-2 {
      width: 19.5%;
      height: 82%;
      left: 43%;
      top: -11%;
      transform: rotate(210deg);
      overflow: hidden;
      z-index: 2;
    }
    #container netflixintro[letter=K] .helper-2 .effect-brush {
      animation-name: brush-moving;
      animation-duration: calc(2s * .8);
      animation-fill-mode: forwards;
      animation-delay: calc(0.5s * .8);
    }
    #container netflixintro [class*=helper-] {
      position: absolute;
    }
    #container netflixintro [class*=helper-] .effect-brush {
      position: absolute;
      width: 100%;
      height: 300%;
      top: 0;
      overflow: hidden;
    }
    #container netflixintro [class*=helper-] .effect-brush::before {
      display: block;
      content: "";
      position: absolute;
      background-color: #e40913;
      width: 100%;
      height: 70%;
      box-shadow: 0px 0px 29px 24px #e40913;
    }
    #container netflixintro [class*=helper-] .effect-brush [class*=fur-] {
      display: block;
      position: absolute;
      bottom: 10%;
      height: 30%;
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-1 {
      left: 0%;
      width: 3.8%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 15%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-2 {
      left: 3.8%;
      width: 2.8%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 10%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-3 {
      left: 6.6%;
      width: 4.8%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 37%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-4 {
      left: 11.4%;
      width: 4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 23%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-5 {
      left: 15.4%;
      width: 4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 15%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-6 {
      left: 19.4%;
      width: 2.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 27%, rgba(0, 0, 0, 0) 89%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-7 {
      left: 21.9%;
      width: 4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 20%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-8 {
      left: 25.9%;
      width: 2%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 30%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-9 {
      left: 27.9%;
      width: 4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 35%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-10 {
      left: 31.9%;
      width: 3.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-11 {
      left: 35.4%;
      width: 2%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 34%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-12 {
      left: 37.4%;
      width: 2.6%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 22%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-13 {
      left: 40%;
      width: 6%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 47%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-14 {
      left: 46%;
      width: 2%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 36%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-15 {
      left: 48%;
      width: 5.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 29%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-16 {
      left: 53.5%;
      width: 3%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-17 {
      left: 56.5%;
      width: 4.1%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 45%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-18 {
      left: 60.6%;
      width: 2.4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 34%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-19 {
      left: 63%;
      width: 4%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 47%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-20 {
      left: 67%;
      width: 1.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 27%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-21 {
      left: 68.5%;
      width: 2.8%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 37%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-22 {
      left: 71.3%;
      width: 2.3%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 9%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-23 {
      left: 73.6%;
      width: 2.2%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 28%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-24 {
      left: 75.8%;
      width: 1%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 37%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-25 {
      left: 76.8%;
      width: 2.1%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 28%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-26 {
      left: 78.9%;
      width: 4.1%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 34%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-27 {
      left: 83%;
      width: 2.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 21%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-28 {
      left: 85.5%;
      width: 4.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 39%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-29 {
      left: 90%;
      width: 2.8%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 30%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-30 {
      left: 92.8%;
      width: 3.5%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 19%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-brush .fur-31 {
      left: 96.3%;
      width: 3.7%;
      background: linear-gradient(to bottom, #e40913 0%, #e40913 37%, rgba(0, 0, 0, 0) 100%);
    }
    #container netflixintro [class*=helper-] .effect-lumieres {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      animation-name: showing-lumieres;
      animation-duration: calc(2s * .8);
      animation-delay: calc(1.6s * .8);
      animation-fill-mode: forwards;
    }
    #container netflixintro [class*=helper-] .effect-lumieres [class*=lamp-] {
      position: absolute;
      display: block;
      height: 100%;
      box-shadow: 0px 0px 10px 0px rgba(228, 9, 19, 0.75);
      background: var(--color);
    }
    #container netflixintro [class*=helper-] .effect-lumieres [class*=lamp-]::before {
      position: absolute;
      content: " ";
      display: block;
      width: 100%;
      height: 100%;
      background: var(--color);
      box-shadow: 0px 0px 10px 0px rgba(228, 9, 19, 0.75);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-1 {
      --color: #ff0100;
      left: 0.7%;
      width: 1%;
      animation-delay: calc(1.49s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-1::before {
      left: 104%;
      animation-delay: calc(1.42s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-2 {
      --color: #ffde01;
      left: 2.2%;
      width: 1.4%;
      animation-delay: calc(0.41s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-2::before {
      left: 22%;
      animation-delay: calc(1.14s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-3 {
      --color: #ff00cc;
      left: 5.8%;
      width: 2.1%;
      animation-delay: calc(0.88s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-3::before {
      left: 64%;
      animation-delay: calc(1.59s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-4 {
      --color: #04fd8f;
      left: 10.1%;
      width: 2%;
      animation-delay: calc(0.73s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-4::before {
      left: 95%;
      animation-delay: calc(1.22s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-5 {
      --color: #ff0100;
      left: 12.9%;
      width: 1.4%;
      animation-delay: calc(1.12s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-5::before {
      left: 118%;
      animation-delay: calc(0.39s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-6 {
      --color: #ff9600;
      left: 15.3%;
      width: 2.8%;
      animation-delay: calc(0.61s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-6::before {
      left: 194%;
      animation-delay: calc(0.04s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-7 {
      --color: #0084ff;
      left: 21.2%;
      width: 2.5%;
      animation-delay: calc(0.96s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-7::before {
      left: 3%;
      animation-delay: calc(1.02s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-8 {
      --color: #f84006;
      left: 25%;
      width: 2.5%;
      animation-delay: calc(0.26s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-8::before {
      left: 101%;
      animation-delay: calc(1.7s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-9 {
      --color: #ffc601;
      left: 30.5%;
      width: 3%;
      animation-delay: calc(1.56s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-9::before {
      left: 43%;
      animation-delay: calc(0.05s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-10 {
      --color: #ff4800;
      left: 36.3%;
      width: 3%;
      animation-delay: calc(1.12s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-10::before {
      left: 104%;
      animation-delay: calc(0.62s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-11 {
      --color: #fd0100;
      left: 41%;
      width: 2.2%;
      animation-delay: calc(1.21s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-11::before {
      left: 156%;
      animation-delay: calc(0.86s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-12 {
      --color: #01ffff;
      left: 44.2%;
      width: 2.6%;
      animation-delay: calc(1.61s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-12::before {
      left: 200%;
      animation-delay: calc(1.64s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-13 {
      --color: #ffc601;
      left: 51.7%;
      width: 0.5%;
      animation-delay: calc(0.45s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-13::before {
      left: 182%;
      animation-delay: calc(0.03s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-14 {
      --color: #ffc601;
      left: 52.1%;
      width: 1.8%;
      animation-delay: calc(0.46s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-14::before {
      left: 200%;
      animation-delay: calc(0.86s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-15 {
      --color: #0078fe;
      left: 53.8%;
      width: 2.3%;
      animation-delay: calc(1.9s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-15::before {
      left: 43%;
      animation-delay: calc(0.11s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-16 {
      --color: #0080ff;
      left: 57.2%;
      width: 2%;
      animation-delay: calc(1.02s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-16::before {
      left: 122%;
      animation-delay: calc(0.2s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-17 {
      --color: #ffae01;
      left: 62.3%;
      width: 2.9%;
      animation-delay: calc(1.79s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-17::before {
      left: 17%;
      animation-delay: calc(0.09s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-18 {
      --color: #ff00bf;
      left: 65.8%;
      width: 1.7%;
      animation-delay: calc(0.43s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-18::before {
      left: 110%;
      animation-delay: calc(0.89s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-19 {
      --color: #a601f4;
      left: 72.8%;
      width: 0.8%;
      animation-delay: calc(0.77s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-19::before {
      left: 60%;
      animation-delay: calc(1.7s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-20 {
      --color: #f30b34;
      left: 74.3%;
      width: 2%;
      animation-delay: calc(0.53s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-20::before {
      left: 86%;
      animation-delay: calc(1.24s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-21 {
      --color: #ff00bf;
      left: 79.8%;
      width: 2%;
      animation-delay: calc(0.38s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-21::before {
      left: 105%;
      animation-delay: calc(1.82s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-22 {
      --color: #04fd8f;
      left: 78.2%;
      width: 2%;
      animation-delay: calc(0.74s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-22::before {
      left: 160%;
      animation-delay: calc(1.88s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-23 {
      --color: #01ffff;
      left: 78.5%;
      width: 2%;
      animation-delay: calc(1.45s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-23::before {
      left: 153%;
      animation-delay: calc(1.66s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-24 {
      --color: #a201ff;
      left: 85.3%;
      width: 1.1%;
      animation-delay: calc(1.13s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-24::before {
      left: 151%;
      animation-delay: calc(0.18s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-25 {
      --color: #ec0014;
      left: 86.9%;
      width: 1.1%;
      animation-delay: calc(1.85s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-25::before {
      left: 166%;
      animation-delay: calc(0.09s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-26 {
      --color: #0078fe;
      left: 88.8%;
      width: 2%;
      animation-delay: calc(1.38s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-26::before {
      left: 17%;
      animation-delay: calc(0.66s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-27 {
      --color: #ff0036;
      left: 92.4%;
      width: 2.4%;
      animation-delay: calc(0.53s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-27::before {
      left: 163%;
      animation-delay: calc(0.74s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-28 {
      --color: #06f98c;
      left: 96.2%;
      width: 2.1%;
      animation-delay: calc(1.32s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-28::before {
      left: 133%;
      animation-delay: calc(1.49s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-1,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-3,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-5,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-7,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-9,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-11,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-13,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-15,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-17,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-19,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-21,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-23,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-25,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-27 {
      animation-name: lumieres-moving-left;
      animation-duration: calc(5s * .8);
      animation-fill-mode: forwards;
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-1::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-3::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-5::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-7::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-9::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-11::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-13::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-15::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-17::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-19::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-21::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-23::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-25::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-27::before {
      animation-name: lumieres-moving-left;
      animation-duration: calc(5.5s * .8);
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-2,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-4,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-6,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-8,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-10,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-12,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-14,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-16,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-18,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-20,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-22,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-24,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-26,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-28 {
      animation-name: lumieres-moving-right;
      animation-duration: calc(5s * .8);
      animation-fill-mode: forwards;
    }
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-2::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-4::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-6::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-8::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-10::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-12::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-14::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-16::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-18::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-20::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-22::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-24::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-26::before,
    #container netflixintro [class*=helper-] .effect-lumieres .lamp-28::before {
      animation-name: lumieres-moving-right;
      animation-duration: calc(5.5s * .8);
    }
  }

  .icon01, .icon02 {
    position: fixed;
    display: block;
  }

  .icon01 {
    top: 0;
    left: 0;
    width: 20%;
    min-width: 320px;
  }
  
  .icon02 {
    bottom: 0;
    right: 0;
    width: 25%;
    min-width: 360px;
  }

  .floatingArea {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(45px, 380px);
    width: 520px;
    z-index: 1;
    text-align: center;
    font-family: "Noto Sans JP", serif;
    color: #fff;
    >img {
      display: block;
      margin: 0 auto 1rem;
      width: 520px;
    }
    .wrap {
      margin: 0 auto;
      max-width: 360px;
      .day {
        .time {
          font-size: 5.8rem;
          font-weight: 700;
          line-height: 1.3;
          span {
            display: block;
            font-size: 2.4rem;
            font-family: "Noto Sans JP", serif;
            font-weight: 500;
          }
        }
        >p {
          font-size: 1.6rem;
        }
        .countdown {
          position: relative;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 0 1rem;
          margin: .5rem 0 0;
          padding: 4rem 2rem 2.5rem;
          width: 100%;
          height: auto;
          aspect-ratio: 824/424;
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: auto;
            height: 114%;
            aspect-ratio: 824/424;
            background-image: url(/assets/img/border-img.webp);
            background-size: 100%;
            background-position: center;
            z-index: -1;
          }
          >p {
            width: 100%;
            font-size: 1.4rem;
            text-align: left;
            font-family: "Noto Sans JP", serif;
            font-weight: 500;
          }
          div {
            position: relative;
            display: block;
            width: 1.7em;
            font-size: 4.2rem;
            font-family: "Outfit", serif;
            line-height: 1.3;
            p {
              font-weight: 700;
            }
            span {
              display: block;
              font-size: 1.4rem;
              font-weight: 800;
            }
          }
          .hours, .minutes {
            &::after {
              content: ":";
              position: absolute;
              top: 0%;
              right: 0;
              transform: translate(100%,0%);
              line-height: 1.1;
            }
          }
        }
      }
      .answer {
        position: relative;
        margin: 5rem 0 0;
        padding: 4rem 2rem;
        border-bottom: 4px solid #E63E7E;
        border-right: 4px solid #E63E7E;
        border-left: 4px solid #E63E7E;
        &::before, &::after {
          content: "";
          position: absolute;
          top: 0;
          display: block;
          width: 50px;
          height: 4px;
          background: #E63E7E;
        }
        &::before {
          left: 0;
        }
        &::after {
          right: 0;
        }
        h3 {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 3.4rem;
          letter-spacing: .15em;
          line-height: 1;
        }
        p {
          font-size: 1.8rem;
          letter-spacing: .04em;
        }
        a {
          display: grid;
          place-content: center;
          margin: 3rem auto 0;
          padding: 1rem;
          width: 280px;
          height: 60px;
          font-size: 1.6rem;
          border: 1px solid #E63E7E;
          border-radius: 30px;
          background: #E63E7E;
          &:hover {
            color: #E63E7E;
            background: #fff;
          }
        }
      }
    }
  }
  
  article {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(45px, -50%);
    width: 360px;
    height: 640px;
    max-height: 640px;
    z-index: 1;
    overflow: scroll;
    border-radius: 8px;
    &.active{
      overflow: hidden;
    }

    .content {
      position: relative;
      background: #000;

      .p-catch {
        position: relative;
        height: 640px;
        max-height: 640px;
        .logo {
          position: absolute;
          top: 25px;
          left: 20px;
          display: block;
          width: calc(50% - 4rem);
          img {
            display: block;
          }
        }
        h1 {
          position: absolute;
          bottom: 40px;
          left: 20px;
          padding-left: 8px;
          border-left: 8px solid #EB1B28;
          font-size: 3.5rem;
          font-weight: 700;
          font-style: italic;
          line-height: 1.2;
          color: #fff;
          span {
            font-size: .9em;
            margin: 0 .1em;
          }
        }
        >img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    
      #game {
        position: relative;
        height: 640px;
        width: 100%;
        background: #010425;
        overflow: hidden;
        z-index: 1;
        &::before {
          content: "";
          position: absolute;
          top: 2vw;
          right: 0;
          width: 70%;
          height: 100%;
          background-image: url(/assets/img/game-bg-img01.webp);
          background-position: top right;
          background-size: contain;
          background-repeat: no-repeat;
          z-index: 0;
        }
        &::after {
          content: "";
          position: absolute;
          bottom: -11vw;
          left: 0;
          width: 70%;
          height: 100%;
          background-image: url(/assets/img/game-bg-img02.webp);
          background-position: bottom left;
          background-size: contain;
          background-repeat: no-repeat;
          z-index: 0;
        }
        &.active{
          position: fixed;
          .p-chapter__inner {
            .close {
              pointer-events: auto;
              opacity: 1;
            }
          }
        }
        &.user-turn{
          .turn {
            /* color: #0386D3; */
            text-shadow: 1px 1px 0 #0386D3, -1px 1px 0 #0386D3, -1px -1px 0 #0386D3, 1px -1px 0 #0386D3;
          }
        }
        &.com-turn{
          .turn {
            /* color: #FF4A00; */
            text-shadow: 1px 1px 0 #FF4A00, -1px 1px 0 #FF4A00, -1px -1px 0 #FF4A00, 1px -1px 0 #FF4A00;
          }
        }
        &.revenge {
          .p-chapter__inner {
            &::before {
              content: "";
              display: inline-block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgb(0, 0, 0, .7);
              z-index: 2;
            }
          }
        }
        .p-chapter__inner {
          position: relative;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          padding: 0 2%;
          height: 100%;
          z-index: 1;
          .particles-js {
            display: none;
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            height: 100%;
          }
          .lose {
            display: none;
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            height: 100%;
          }
          .close {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 1.5rem;
            padding: 0 1.5rem;
            width: fit-content;
            height: 24px;
            font-family: "Noto Sans JP", serif;
            font-size: calc(1.4rem*360/440);
            color: #fff;
            background: #505050;
            border-radius: 12px;
            border: none;
            line-height: 1;
            cursor: pointer;
            pointer-events: none;
            transition: .3s;
            opacity: .3;
            &:hover {
              opacity: .7;
            }
            span {
              position: relative;
              display: inline-block;
              width: 1em;
              height: 1em;
              margin-left: .5em;
              &::before,
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                display: inline-block;
                width: 100%;
                height: 1px;
                background: #fff;
              }
              &::before {
                transform: translate(-50%,-50%) rotate(45deg);
              }
              &::after {
                transform: translate(-50%,-50%) rotate(-45deg);
              }
            }
          }
          .gameArea {
            position: relative;
            width: 100%;
            aspect-ratio: 4/5;
            background: #3D3D57;
            border: 4px solid #D9D9D9;
            border-radius: 8px;
            .com {
              display: inline-block;
              span {
                background: #FF4A00;
              }
            }
            .user {
              display: none;
              span {
                background: #0386D3;
              }
            }
            .com, .user {
              position: absolute;
              /* top: 14% ~ 86%;
              left: 15.5% ~ 84.5%; */
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: 22%;
              height: auto;
              aspect-ratio: 1;
              border-radius: 4px;
              &::before,
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                display: inline-block;
                width: 100%;
                height: 1px;
                background: rgb(0, 0, 0, .5);
              }
              &::before {
                transform: translate(-50%,-50%) rotate(45deg);
              }
              &::after {
                transform: translate(-50%,-50%) rotate(-45deg);
              }
              span {
                display: block;
                width: 100%;
                height: 100%;
                border: 2px solid #000;
              }
              img {
                display: none;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 180%;
                max-width: 180%;
                transform: translate(-50%,-50%);
                z-index: -1;
              }
            }
            .turn {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              width: max-content;
              font-family: "Noto Sans JP", serif;
              font-size: calc(4rem*360/440);
              font-weight: 900;
              font-style: italic;
              opacity: 0;
              z-index: 2;
              color: #fff;
              /* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; */
              letter-spacing: .04em;
              pointer-events: none;
              /* color: #fff; */
              /* animation: textFadeOut 1s forwards linear; */
            }
            .end {
              display: none;
              position: absolute;
              top: calc(50% + 4rem);
              left: 50%;
              transform: translate(-50%,-50%);
              width: 100%;
              height: auto;
              font-family: "Noto Sans JP", serif;
              text-align: center;
              z-index: 4;
              &.win {
                >p {
                  /* color: #0386D3; */
                  text-shadow: 1px 1px 0 #0386D3, -1px 1px 0 #0386D3, -1px -1px 0 #0386D3, 1px -1px 0 #0386D3;
                }
                .button {
                  p {
                    display: none;
                  }
                }
              }
              &.lose {
                >p {
                  /* color: #FF4A00; */
                  text-shadow: 1px 1px 0 #FF4A00, -1px 1px 0 #FF4A00, -1px -1px 0 #FF4A00, 1px -1px 0 #FF4A00;
                }
                .button {
                  a {
                    display: none;
                  }
                }
              }
              >p {
                font-size: calc(6.8rem*360/440);
                font-weight: 900;
                font-style: italic;
                color: #fff;
                /* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; */
                letter-spacing: .04em;
              }
              .button {
                a,p {
                  display: grid;
                  place-content: center;
                  color: #fff;
                  background: #E63E7E;
                  border: 4px solid #E63E7E;
                  margin: 6rem auto 0;
                  width: 230px;
                  height: 70px;
                  border-radius: 35px;
                  font-size: calc(3.2rem*360/440);
                  cursor: pointer;
                  transition: .3s;
                  &:hover {
                    color: #E63E7E;
                    background: #fff;
                  }
                }
              }
            }
            .throw {
              display: none;
              position: absolute;
              bottom: 0%;
              left: 50%;
              /* transform: translate(-50%,-50%); */
              font-family: "Noto Sans JP", serif;
              font-style: italic;
              font-size: calc(5rem*360/440);
              font-weight: 500;
              letter-spacing: .04em;
              color: #fff;
              text-align: center;
              line-height: 1;
              cursor: pointer;
              animation: zoom 1s infinite linear;
              z-index: 1;
              width: calc(270px*360/440);
              height: 66px;
              border-radius: 33px;
              border: 6px solid #E63E7E;
              background: rgb(230, 62, 126, .7);
              span {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                gap: 5px;
                img {
                  display: inline-block;
                  width: 34px;
                }
              }
            }
          }
          .meterArea {
            position: relative;
            margin: 1rem 0 0;
            padding: .5rem;
            height: 45px;
            background: #fff;
            border-radius: 8px;
            .meter {
              position: relative;
              display: block;
              margin: 0 auto;
              width: 70%;
              height: 100%;
              border: 4px solid #010425;
              background: #EDDC33;
              border-radius: 4px;
              .meter01 {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%,0);
                display: inline-block;
                width: 50%;
                height: 100%;
                background: #F69A35;
              }
              .meter02 {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%,0);
                display: inline-block;
                width: 20%;
                height: 100%;
                background: #FF0000;
              }
            }
            .cursor {
              position: absolute;
              top: 50%;
              left: 0;
              width: 17%;
              transform: translate(-50%, 0%);
              animation: handAnimation 4s infinite linear;
            }
          }
        }
      }
    
      #visual {
        overflow: hidden;
        .p-chapter__inner {
          position: relative;
          width: 100%;
          height: 100%;
          aspect-ratio: 880/2400;
          background-image: url(/assets/img/visual-img.webp);
          background-size: cover;
          background-position: top center;
          .logo {
            position: absolute;
            top: 105px;
            left: 30px;
            width: 42%;
          }
          .textArea {
            position: absolute;
            top: 41%;
            left: 0;
            p {
              padding-left: .4em;
              font-size: 1.6rem;
              font-weight: 300;
              color: #fff;
              letter-spacing: .2em;
              text-align: center;
              letter-spacing: 0.26em;
              text-shadow: 0px 0px 14px #2E5868;
            }
            .imgArea {
              margin: 5.5rem 0 0;
              position: relative;
              img {
                width: 110%;
                max-width: 110%;
                transform: translate(-6%,0);
              }
              span {
                position: absolute;
                bottom: -5%;
                left: 50%;
                /* transform: translate(40%,0); */
                display: block;
                font-size: calc(5rem*360/440);
                font-weight: 700;
                color: #fff;
                line-height: 1;
              }
            }
          }
        }
      }

      #days {
        position: relative;
        padding: 0;
        background: #000;
        color: #fff;
        background-image: url(/assets/img/days-bg-img.webp);
        background-size: 85%;
        background-position: 100% 6%;
        background-repeat: no-repeat;
        .item {
          position: absolute;
          top: -275px;
          right: 0;
          width: 95%;
        }
        .p-chapter__inner {
          padding: 0 10%;
          h3 {
            display: block;
            gap: 0 3rem;
            align-items: center;
            font-size: calc(6.8rem*360/440);
            font-weight: 800;
            margin: 0;
            line-height: 1.4;
            letter-spacing: 0.04em;
            text-shadow: 0px 0px 10px #E63E7E;
            span {
              display: block;
              font-size: calc(3rem*360/440);
              font-weight: 600;
              font-family: "Noto Sans JP", serif;
              letter-spacing: 0;
            }
          }
          h4 {
            margin: 3rem 0 0;
            font-weight: 600;
            /* font-size: 5rem; */
            font-size: calc(5rem*360/440);
            line-height: 1.4;
            span {
              display: block;
              font-size: 1.5rem;
              font-weight: 400;
              font-family: "Noto Sans JP", serif;
            }
          }
          ul {
            margin: 8rem 0 0;
            li {
              position: relative;
              padding: 2rem 0 0;
              &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                width: 42px;
                height: 8px;
                background: #E4447D;
              }
              dl {
                dt {
                  font-size: calc(3.4rem*360/440);
                  font-weight: 800;
                  line-height: 1.4;
                  span {
                    display: block;
                    /* font-size: 1.6rem; */
                    font-size: calc(1.6rem*360/440);
                    font-weight: 600;
                    font-family: "Noto Sans JP", serif;
                  }
                }
                /* dd {
                  font-size: 4rem;
                  span {
                    font-family: "Noto Sans JP", serif;
                  }
                } */
              }
              &:not(:first-child) {
                margin: 8rem 0 0;
              }
              &:nth-child(1) {
                dl {
                  dd {
                    .time {
                      margin: 2rem 0 0;
                      font-size: calc(4.8rem*360/440);
                      font-weight: 700;
                      span {
                        display: inline-block;
                        margin: 0 .3em;
                        font-size: calc(3.6rem*360/440);
                        font-weight: 400;
                      }
                    }
                    .info {
                      position: relative;
                      margin: 4rem 0 0;
                      border-bottom: 4px solid #E63E7E;
                      border-right: 4px solid #E63E7E;
                      border-left: 4px solid #E63E7E;
                      /* padding: 5rem 3.5rem 4rem; */
                      padding: 15% 14%;
                      text-align: center;
                      &::before, &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        display: inline-block;
                        width: 36px;
                        height: 4px;
                        background-color: #E63E7E;
                      }
                      &::before {
                        left: 0;
                      }
                      &::after {
                        right: 0;
                      }
                      h5  {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        font-size: calc(3.6rem*360/440);
                        font-weight: 800;
                        /* background: #000; */
                        padding: 0 2rem;
                      }
                      p {
                        font-size: calc(2rem*360/440);
                        font-family: "Noto Sans JP", serif;
                        letter-spacing: .04em;
                        span {
                          display: block;
                          margin: 1rem 0 0;
                          font-size: calc(1.6rem*360/440);
                        }
                      }
                    }
                  }
                }
              }
              &:nth-child(2) {
                dl {
                  dd {
                    >img {
                      margin: 3rem 0 0;
                    }
                    h5 {
                      margin: 2rem 0 0;
                      font-size: calc(3.8rem*360/440);
                      span {
                        display: block;
                        font-size: calc(1.6rem*360/440);
                        font-weight: 500;
                        font-family: "Noto Sans JP", serif;
                      }
                    }
                    p {
                      margin: 2.5rem 0 0;
                      font-size: calc(1.6rem*360/440);
                      font-family: "Noto Sans JP", serif;
                      font-weight: 400;
                      letter-spacing: .04em;
                      a {
                        display: inline-block;
                        line-height: 1.8;
                        color: #E63E7E;
                        border-bottom: 2px solid #E63E7E;
                        img {
                          display: inline-block;
                          width: 1.4em;
                          vertical-align: sub;
                        }
                      }
                      span {
                        display: block;
                        margin: .5rem 0 0;
                        /* font-size: calc(1.2rem*360/440); */
                        font-size: 1rem;
                        color: #D3D3D2;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      #profile {
        position: relative;
        padding: 30rem 0 0;
        z-index: 1;
        .p-chapter__inner {
          position: relative;
          h3 {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            margin: 10% 0 0;
            color: #fff;
            z-index: 2;
            font-size: calc(6.8rem*360/440);
            text-shadow: 0px 0px 10px #E63E7E;
          }
          .item01 {
            position: absolute;
            display: block;
            width: 80%;
            top: -16rem;
            left: 0;
            z-index: 1;
          }
          .item02 {
            position: absolute;
            display: block;
            width: 70%;
            top: 6.5rem;
            right: 3%;
            z-index: 0;
          }
          .profileList {
            position: relative;
            .list01 {
              position: relative;
              display: block;
              z-index: 0;
              overflow: hidden;
              li {
                position: relative;
                /* padding: 0 50% 35%; */
                width: 160%;
                transform: translate(calc(-50% + 50%*10/16),0);
                clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                aspect-ratio: 1;
                /* overflow: hidden; */
                background: #F09BC4;
                font-family: 'Noto Sans JP';
                /* &::before {
                  content: '';
                  display: block;
                  padding-top: 100%;
                } */
                &::after {
                  content: "";
                  display: inline-block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 100%;
                  height: 100%;
                  transform: translate(-50%,-50%) rotate(45deg) scale(calc(1/sqrt(2)));
                  border: calc(4px*sqrt(2)) solid #E9B8D6;
                  z-index: 4;
                }
                &:nth-child(1) {
                  span {
                    top: 20%;
                  }
                }
                &:nth-child(2), &:nth-child(3) {
                  position: absolute;
                  top: 50%;
                }
                &:nth-child(2) {
                  right: 50%;
                  transform: translate(1px,-50%);
                  img {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translate(0%,-50%);
                    width: calc(50% * 100/160);
                    z-index: 3;
                  }
                }
                &:nth-child(3) {
                  left: 50%;
                  transform: translate(-1px,-50%);
                  img {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(0%,-50%);
                    width: calc(50% * 100/160);
                    z-index: 3;
                  }
                }
                &:nth-child(4) {
                  span {
                    top: 10%;
                  }
                }
                &:nth-child(1), &:nth-child(4) {
                  span {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%,0);
                    display: block;
                    font-family: 'Noto Sans JP';
                    font-weight: 900;
                    font-size: calc(3rem*360/440);
                    text-align: center;
                    color: #FFFFFF;
                    text-shadow: 0px 0px 12px #CF407E;
                  }
                  img {
                    position: absolute;
                    bottom: -1px;
                    left: 50%;
                    transform: translate(-50%,0);
                    width: calc(100% * 100/160);
                    z-index: -1;
                  }
                }
              }
            }
          }
          .list02 {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            li {
              position: relative;
              height: 50%;
              &:nth-child(1) {
                .textArea {
                  bottom: 1%;
                }
              }
              &:nth-child(2) {
                .textArea {
                  bottom: 6%;
                }
              }
              .textArea {
                position: absolute;
                left: 50%;
                transform: translate(-50%,0);
                text-align: center;
                color: #fff;
                width: 75%;
                h4 {
                  font-weight: 700;
                  font-size: calc(3.8rem*360/440);
                  text-align: center;
                  color: #FFFFFF;
                }
                p {
                  font-weight: 700;
                  font-size: calc(2rem*360/440);
                  line-height: 1.5;
                  font-family: 'Noto Sans JP';
                  line-height: 1.5;
                  text-align: center;
                  letter-spacing: 0.04em;
                  color: #FFFFFF;
                  text-shadow: 0px 0px 24px #000000;
                }
                a {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 0 4px;
                  margin: 1rem auto 0;
                  width: 160px;
                  height: 28px;
                  font-size: calc(1.4rem*360/440);
                  font-weight: 700;
                  font-family: 'Noto Sans JP';
                  line-height: 1.7;
                  letter-spacing: 0.04em;
                  border-radius: 14px;
                  color: #E63E7E;
                  background: #fff;
                  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                  img {
                    width: calc(18px*360/440);
                  }
                }
              }
            }
          }
        }
      }

      #album {
        position: relative;
        margin: 24rem 0 0;
        padding: 0 0 36rem;
        z-index: 0;
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: -270px;
          left: 0;
          width: 100%;
          height: calc(100% + 270px);
          background-image: url(/assets/img/album-bg-img.webp);
          background-position: 50% 0;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .p-chapter__inner {
          position: relative;
          padding: 0 8%;
          h3 {
            /* position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%); */
            margin: 0 0 2rem;
            font-size: calc(6.8rem*360/440);
            text-align: center;
            color: #FFFFFF;
            text-shadow: 0px 0px 9px #E63E7E;
            letter-spacing: .04em;
            z-index: 2;
          }
          #albumSwiper {
            .swiper-wrapper {
              border-radius: 8px;
              overflow: hidden;
              .swiper-slide {
                display: block;
                height: auto;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
            .swiper-pagination {
              position: relative;
              padding: 0 2px;
              top: auto;
              bottom: auto;
              margin: 2rem 0 0;
              display: flex;
              justify-content: flex-end;
              gap: 0 10px;
              .swiper-pagination-bullet {
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 4px;
                margin: 0;
                background: #fff;
                border: 1px solid #fff;
                transition: .3s;
                overflow: hidden;
                opacity: 1;
                @media (hover: hover) {
                  &:hover {
                    background: #F2A7C6;
                  }
                }
              }
              .swiper-pagination-bullet-active {
                position: relative;
                width: 42px;
                background: none;
                &::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 0;
                  height: 100%;
                  background: #F2A7C6;
                  animation: widthAnimation 3.5s forwards linear;
                }
              }
            }
          }
        }
      }

      #attend {
        position: relative;
        padding: 0 0 16rem;
        background: #002026;
        .imgArea {
          position: relative;
          color: #fff;
          text-align: center;
          z-index: 1;
          &::before {
            content: "";
            position: absolute;
            bottom: -10%;
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 440/103;
            background: linear-gradient(180deg, rgba(0, 159, 193, 0.7) -48.98%, rgba(0, 35, 42, 0.7) 98.68%);
            z-index: -1;
          }
          .item {
            position: absolute;
            top: -16rem;
            right: 0;
            width: 84%;
            display: block;
            z-index: 0;
          }
          .bgImg {
            display: block;
            width: 100%;
          }
          .textArea {
            position: absolute;
            top: 35px;
            left: 0;
            width: 100%;
            line-height: 1.05;
            z-index: 1;
            h3 {
              margin: 0;
              font-size: calc(6.8rem*360/440);
              letter-spacing: .04em;
              text-shadow: 0px 0px 60px #00D6FF;
            }
            p {
              margin: 1rem 0 0;
              font-size: calc(3rem*360/440);
              font-weight: 600;
              font-family: "Noto Sans JP", serif;
              text-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
            }
          }
        }
        .p-chapter__inner {
          position: relative;
          padding: 0 10%;
          z-index: 2;
          /* background-image: url(/assets/img/form-bg-img.webp);
          background-position: 50% 20%;
          background-size: contain;
          background-repeat: no-repeat; */
          form {
            margin: 6rem 0 0;
            color: #fff;
            letter-spacing: .04em;
            .attendance {
              display: flex;
              justify-content: center;
              flex-wrap: wrap;
              gap: 0 6rem;
              text-align: center;
              input {
                display: none;
              }
              input:checked + label{
                img {
                  opacity: 1;
                  transform: scale(1);
                }
              }
              label {
                display: block;
                font-size: calc(2rem*360/440);
                font-family: "Noto Sans JP", serif;
                text-align: center;
                cursor: pointer;
                transition: .3s;
                span {
                  display: block;
                  font-size: calc(1.2rem*360/440);
                }
                img {
                  display: block;
                  margin: 1rem 0 0;
                  width: 98px;
                  opacity: .5;
                  transition: .3s;
                  transform: scale(.9);
                }
              }
            }
            .lead {
              margin: 6rem 0 8rem;
              padding: 3px;
              font-family: "Noto Sans JP", serif;
              box-shadow: 0px 0px 20px rgba(0, 211, 255, 0.2);
              border-radius: 8px;
              background: linear-gradient(-35deg, #E600CB, #00B0D1);
              p {
                padding: 6.5%;
                font-size: calc(2rem*360/440);
                letter-spacing: .04em;
                background: linear-gradient(126.01deg, rgb(2, 82, 99) 0.69%, rgb(39, 21, 54) 82.91%);
                border-radius: 8px;
                .large {
                  font-size: calc(2.8rem*360/440);
                  line-height: 1.8;
                }
                .desc {
                  display: block;
                  font-size: calc(1.4rem*360/440);
                  line-height: 1.8;
                  margin: 4px 0 0;
                }
              }
            }
            dl {
              margin: 4rem 0 0;
              + dl {
                margin: 4rem 0 0;
              }
              dt {
                margin: 0 0 1rem;
                font-family: "Noto Sans JP", serif;
                font-weight: 600;
                .asterisk {
                  margin-left: .5rem;
                  color: #E63E7E;
                }
              }
              dd {
                input[type="radio"], input[type="checkbox"] {
                  display: none;
                }
                input[type="radio"]:checked + label{
                  opacity: 1;
                  background: #E63E7E;
                }
                input[type="text"], select, option, textarea {
                  display: block;
                  padding: 1.5rem 1rem;
                  width: 100%;
                  font-size: calc(1.6rem*360/440);
                  border: 1px solid #D3D3D2;
                  border-radius: 4px;
                  line-height: 1.4;
                  &::placeholder {
                    color: #B1B1B1;
                  }
                }
                select {
                  -webkit-appearance: none;
                  appearance: none;
                  color: #B1B1B1;
                }
                select option:first-child {
                  color: #B1B1B1;
                }
                select:invalid {
                  color: #B1B1B1;
                }
                select option {
                    color: #000;
                }
                textarea {
                  resize: none;
                }
                label {
                  transition: .3s;
                  display: flex;
                  align-items: center;
                  gap: 0 .5rem;
                  font-size: calc(1.6rem*360/440);
                  .circle {
                    position: relative;
                    display: inline-block;
                    width: 1.4em;
                    height: 1.4em;
                    border-radius: 50%;
                    border: 1px solid #999;
                    transition: .3s;
                  }
                }
                input[type="radio"]:checked + label{
                  .circle {
                    border: 1px solid #E63E7E;
                    &::after {
                      content: "";
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);
                      width: calc(100% - 6px);
                      height: calc(100% - 6px);
                      background: #E63E7E;
                      border-radius: 50%;
                    }
                  }
                }
                input[type="checkbox"]:checked + label{
                  .circle {
                    border: 1px solid #E63E7E;
                    &::after {
                      content: "";
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%,-50%);
                      width: calc(100% - 6px);
                      height: calc(100% - 6px);
                      background: #E63E7E;
                      border-radius: 50%;
                    }
                  }
                }
              }
            }
            .note{
              display: none;
              color: red;
              margin: .5rem 0 1rem;
              width: 100%;
              font-size: calc(1.6rem*360/440);
            }
            .false{
              display: none;
              color: red;
              margin: .5rem 0 0;
              width: 100%;
              font-size: calc(1.6rem*360/440);
              text-align: center;
            }
            .guestArea {
              /* margin: 8rem 0 0; */
              dd {
                display: flex;
                flex-wrap: wrap;
                gap: 0 2.5rem;
                label {
                  display: block;
                  padding: 1.5rem 1.5rem;
                  width: calc(50% - 2.5rem/2);
                  font-size: calc(1.6rem*360/440);
                  font-family: "Noto Sans JP", serif;
                  text-align: center;
                  cursor: pointer;
                  /* opacity: .5;
                  background: #E63E7E; */
                  background: #32344A;
                  border-radius: 4px;
                }
              }
            }
            .sexArea {
              dd {
                display: flex;
                flex-wrap: wrap;
                gap: 0 2.5rem;
                label {
                  display: block;
                  padding: 1.5rem 1.5rem;
                  width: calc(100%/3 - 2.5rem*2/3);
                  font-size: calc(1.6rem*360/440);
                  font-family: "Noto Sans JP", serif;
                  text-align: center;
                  cursor: pointer;
                  /* opacity: .5;
                  background: #E63E7E; */
                  background: #32344A;
                  border-radius: 4px;
                }
              }
            }
            .addressArea {
              dd {
                p {
                  margin: .5rem 0 0;
                  font-size: calc(1.6rem*360/440);
                }
                input + p, select + p {
                  margin: 1rem 0 0;
                }
                input[name="field_4692885_zip"] {
                  width: 65%;
                }
              }
            }
            .allergieArea {
              dd {
                label {
                  font-weight: 700;
                }
                input[type="radio"]:checked + label {
                  background: none;
                }
                input + label {
                  margin: 1rem 0 0;
                }
                .detail {
                  display: none;
                  .wrap {
                    margin: 2rem 0 0;
                    color: #000;
                    background: #eee;
                    border-radius: 10px;
                    padding: 3rem;
                    p {
                      margin: 0 0 1rem;
                      font-size: calc(1.6rem*360/440);
                    }
                    h4 {
                      margin: 0 0 .5rem;
                      font-size: calc(1.6rem*360/440);
                    }
                    ul {
                      display: flex;
                      flex-wrap: wrap;
                      gap: .5rem 1rem;
                      margin: 0 0 2rem;
                      padding: 0 0 2rem;
                      border-bottom: 1px solid #B1B1B1;
                      label {
                        margin: 0;
                        font-weight: 500;
                      }
                    }
                  }
                }
              }
            }
            .freeArea {
              padding: 0 0 4rem;
              border-bottom: 1px solid #282828;
            }
            .addCompany {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 0 1em;
              margin: 4rem auto 0;
              width: calc(280px*360/440);
              height: 58px;
              background: #2D2D2D;
              border: 2px solid #E63E7E;
              border-radius: 29px;
              color: #fff;
              font-size: calc(1.6rem*360/440);
              transition: .3s;
              cursor: pointer;
              span {
                position: relative;
                width: 1em;
                &::before,
                &::after {
                  content: "";
                  display: inline-block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 90%;
                  height: 2px;
                  background: #fff;
                  transition: .3s;
                }
                &::before {
                  transform: translate(-50%,-50%);
                }
                &::after {
                  transform: translate(-50%,-50%) rotate(90deg);
                }
              }
              &:hover {
                background: #E63E7E;
                /* color: #000;
                span {
                  &::before,
                  &::after {
                    background: #000;
                  }
                } */
              }
            }
            .taxiArea {
              margin: 8rem 0 0;
              padding: 0 0 4rem;
              border-bottom: 1px solid #282828;
              p {
                margin: 1.5rem 0 2rem;
                font-size: calc(1.6rem*360/440);
                strong {
                  display: block;
                  margin: 2rem 0 0;
                }
              }
              label {
                margin: 1rem 0 0;
                font-weight: 700;
              }
              input[type="radio"]:checked + label {
                background: none;
              }
              .representative {
                display: none;
                .wrap {
                  margin: 3rem 0 0;
                  p {
                    margin: 0;
                  }
                  input + p {
                    margin: 1rem 0 0;
                  }
                }
              }
            }
            .kimonoArea {
              margin: 4rem 0 0;
              p {
                margin: 1.5rem 0 2rem;
                font-size: calc(1.6rem*360/440);
                strong {
                  display: block;
                  margin: 2rem 0 0;
                }
              }
              label {
                margin: 1rem 0 0;
                font-weight: 700;
              }
              input[type="radio"]:checked + label {
                background: none;
              }
            }
            input[type="submit"] {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 4rem auto 0;
              width: calc(280px*360/440);
              height: 58px;
              background: #E63E7E;
              border: 2px solid #E63E7E;
              border-radius: 29px;
              color: #fff;
              font-size: calc(1.6rem*360/440);
              font-weight: 700;
              transition: .3s;
              cursor: pointer;
              letter-spacing: .04em;
              &:hover {
                color: #E63E7E;
                background: #fff;
              }
            }
            .company01, .company02 {
              display: none;
              position: relative;
              .close {
                position: absolute;
                top: 10px;
                right: 0px;
                width: 32px;
                height: 32px;
                padding: 1.2rem;
                cursor: pointer;
                transition: .3s;
                &:hover {
                  opacity: .5;
                }
                &::before,
                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  display: inline-block;
                  width: 80%;
                  height: 3px;
                  background: #fff;
                }
                &::before {
                  transform: translate(-50%,-50%) rotate(45deg);
                }
                &::after {
                  transform: translate(-50%,-50%) rotate(-45deg);
                }
              }
              >h4 {
                padding: 4rem 0 0;
                font-size: calc(2.2rem*360/440);
                .asterisk {
                  margin-left: .5rem;
                  color: #E63E7E;
                }
              }
            }
          }
        }
      }
      
    }

  }

}

.en {
  font-family: "Outfit", serif;
}

@keyframes textFadeOut {
  0% {
    left: 0;
    opacity: 0;
  }
  25% {
    left: 48%;
    opacity: .8;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  75% {
    left: 52%;
    opacity: .8;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes handAnimation {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

@keyframes throwAnimation {
  0% {
    transform: translate(-50%,-50%) rotate(-30deg) scale(3);
  }
  100% {
    transform: translate(-50%,-50%) rotate(-30deg) scale(1);
  }
}

@keyframes flipAnimation {
  0% {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(-45deg) rotate3d(0, 1, 0, 0deg);
  }
  100% {
      transform: rotateY(0deg) rotateX(0deg) rotateZ(-45deg) rotate3d(0, 1, 0, 360deg);
  }
}

@keyframes zoom {
  0% {
    transform: translate(-50%,-50%) scale(1);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.1);
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
  }
}

@keyframes widthAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes brush-moving {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes fading-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lumieres-moving-right {
  0% {
    transform: translate(0);
  }
  40% {
    transform: translate(-10px) scaleX(1);
  }
  50% {
    transform: translate(-60px);
  }
  100% {
    transform: translate(-120px) scaleX(3);
  }
}
@keyframes lumieres-moving-left {
  0% {
    transform: translate(0);
  }
  40% {
    transform: translate(10px) scaleX(1);
  }
  50% {
    transform: translate(60px);
  }
  100% {
    transform: translate(120px) scaleX(3);
  }
}
@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(15);
  }
}
@keyframes showing-lumieres {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fading-lumieres-box {
  0% {
    background-color: rgba(228, 9, 19, 0.5);
  }
  100% {
    background-color: rgba(228, 9, 19, 0);
  }
}

@keyframes brush-moving01 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes brush-moving02 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes horizontal {
  0% {
   transform:translateX(-15px) rotate(2deg);
  }
  100% {
   transform:translateX(15px) rotate(-2deg);
  }
}
@keyframes vertical {
  0% {
   transform:translateY(-7px); 
  }
  100% {
   transform:translateY(7px); 
  }
}

@media (max-width: 768px) {
  main {
    
    .icon01, .icon02 {
      display: none;
    }

    .floatingArea {
      display: none;
    }
    
    article {
      position: relative;
      top: 0;
      left: 0;
      width: 440px;
      height: 100%;
      max-height: 100%;
      transform: translate(0,0);
      margin: 0 auto;

      .content {

        .p-catch {
          height: 100svh;
          max-height: 100svh;
        }

        #game {
          height: 100vh;
        }

      }
    }

  }
}

@media (max-width: 480px) {
  main {
    
    &::before {
      display: none;
    }
    
    article {
      width: 100%;
      border-radius: 0;

      /* .content {

        #profile {
          .p-chapter__inner {
            ul {
              li {
                padding: 28% 14%;
              }
            }
          }
        }

      } */

    }

  }
}