/*   main
------------------------------------------------------ */
.main {
  padding-left: 800rem;
  position: relative;
}

::-webkit-scrollbar {
  background: transparent;
  height: 0 !important;
  width: 0 !important;
}

@media screen and (max-width: 1080px) {
  .main {
    padding-left: 0;
    position: relative;
  }

  ::-webkit-scrollbar {
    background: transparent;
    height: 0 !important;
    width: 0 !important;
  }
}

/*   hero
------------------------------------------------------ */
.hero {
  height: 100vh;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 800rem;
  z-index: 100;
}

.hero .swiper-slide img {
  height: 100vh;
  object-fit: cover;
  width: 100%;
}

.hero__logo {
  display: none;
}

@media screen and (max-width: 1080px) {
  .hero {
    position: relative;
    width: 100%;
  }

  .hero__logo {
    display: block;
    position: absolute;
    text-align: center;
    top: 20px;
    width: 100%;
    z-index: 200;
  }

  .hero__logo img {
    height: calc(240px / 2);
  }
}

/*   opening
------------------------------------------------------ */
.opening {
  height: 100vh;
  position: relative;
}

.opening__bg {
  background-image: url("../images/img-section_bg_1.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  height: 100%;
  margin: auto;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 0.5s ease 0s;
  width: calc(100% - 800rem);
  z-index: -100;
}

.opening__bg.is-show {
  opacity: 1;
}

.opening__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  row-gap: 44rem;
}

.opening__logo img {
  height: auto;
  width: 880rem;
}

.opening__sponsor img {
  height: auto;
  width: 635rem;
}

.opening__scroll {
  bottom: 0;
  position: fixed;
  right: 0;
  width: 49rem;
  z-index: 1000;
}

@media screen and (max-width: 1080px) {
  .opening {
    height: auto;
    padding: calc(190px / 2) 20px calc(220px / 2);
    position: relative;
  }

  .opening__inner {
    height: auto;
    row-gap: 0;
  }

  .opening__logo {
    display: none;
  }

  .opening__sponsor {
    text-align: center;
  }

  .opening__sponsor img {
    height: calc(162 / 2);
    width: auto;
  }

  .opening__scroll {
    bottom: unset;
    left: 50%;
    position: absolute;
    right: unset;
    top: -40px;
    transform: translateX(-50%);
    width: 24.5px;
    z-index: 100;
  }
}

/*   movie
------------------------------------------------------ */
.movie {
  height: 100vh;
  position: relative;
}

.movieYoutube {
  text-align: center;
}

.movieYoutube img {
  width: 661rem;
}

.movieCatch {
  position: relative;
  top: 330rem;
}

.movieCatch::before {
  background: rgba(195, 5, 162, 0.6);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 40px;
  content: "";
  height: auto;
  left: 0;
  margin: auto;
  position: absolute;
  top: -7rem;
  transform: skew(0deg, -10deg);
  width: 100%;
}

.movieCatch__inner {
  padding: 80rem 0 130rem;
  position: relative;
  z-index: 100;
}

.movieCatch__inner::before {
  background: url("../images/img-letter_catseye_card.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 210rem;
  left: 48rem;
  position: absolute;
  top: -40rem;
  width: 280rem;
}

.movieCatch__head {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -32rem;
  width: 100%;
}

.movieCatch__head img {
  height: auto;
  width: 123rem;
}

.movieCatch__name {
  color: #fff;
  font-family: var(--fontNotoSelf);
  font-size: 50rem;
  font-weight: 500;
  text-align: center;
}

.movieCatch__title {
  color: #fff;
  font-family: var(--fontNotoSelf);
  font-size: 60rem;
  font-weight: 500;
  margin-top: 24rem;
  text-align: center;
}

.movieCatch__comment {
  margin-top: 32rem;
  text-align: center;
}

.movieCatch__comment span {
  border-bottom: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: var(--fontNotoSelf);
  font-size: 22rem;
  font-weight: 500;
  padding-bottom: 8rem;
  padding-left: 43rem;
  position: relative;
}

.movieCatch__comment span::before {
  background: url("../images/icon_comment.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  height: 28rem;
  left: 0;
  margin: auto;
  position: absolute;
  top: -4px;
  width: 33rem;
}

@media screen and (max-width: 1080px) {
  .movie {
    height: auto;
    position: relative;
  }

  .movieYoutube {
    text-align: center;
  }

  .movieYoutube img {
    width: 100%;
  }

  .movieCatch {
    margin-top: calc(330px / 2);
    top: 0;
  }

  .movieCatch__inner {
    padding: calc(80px / 2) 0 calc(160px / 2);
  }

  .movieCatch__inner::before {
    height: calc(196px / 2);
    left: 0;
    top: calc(-80px / 2);
    width: calc(265px / 2);
  }

  .movieCatch__head {
    top: calc(-50px / 2);
  }

  .movieCatch__head img {
    width: calc(130px / 2);
  }

  .movieCatch__name {
    font-size: calc(42px / 2);
  }

  .movieCatch__title {
    font-size: calc(50px / 2);
    margin-top: calc(32px / 2);
  }

  .movieCatch__comment {
    margin-top: calc(32px / 2);
  }

  .movieCatch__comment span {
    font-size: calc(18px / 2);
    padding-left: calc(40px / 2);
  }

  .movieCatch__comment span::before {
    height: calc(28px / 2);
    left: 0;
    top: -6px;
    width: calc(33px / 2);
  }
}

/*   staff
------------------------------------------------------ */
.staff {
  height: 100vh;
  position: relative;
  padding:45vw 0 35vw 0;
}

.staff__wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.staff__inner {
   -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  display: grid;
  padding: 80rem 72rem;
  position: relative;
  width: 920rem;
}

.frame__deco {
  position: absolute;
  width: 100%;
}

.frame__deco._type1::before {
  background: url("../images/icon-frame_1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 150rem;
  left: -70rem;
  position: absolute;
  top: -70rem;
  width: 140rem;
}

.frame__deco._type1::after {
  background: url("../images/section_num3_frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 220rem;
  position: absolute;
  right: -40rem;
  top: -140rem;
  width: 390rem;
}

.frame__deco._type2 {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.frame__deco._type2::before {
  background: url("../images/icon-frame_3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -15rem;
  content: "";
  height: 55rem;
  left: -20rem;
  position: absolute;
  width: 50rem;
}

.frame__deco._type2::after {
  background: url("../images/icon-frame_2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -15rem;
  content: "";
  height: 55rem;
  position: absolute;
  right: -25rem;
  width: 50rem;
}

.staffList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 48px;
}

.staffList__box dt {
  color: #79d9fd;
  font-family: var(--fontNotoSelf);
  font-size: 23rem;
  font-weight: 500;
  text-align: center;
}

.staffList__box dd {
  color: #fff;
  font-family: var(--fontNotoSelf);
  font-size: 38rem;
  font-weight: 500;
  margin-top: 16rem;
  text-align: center;
}

@media screen and (max-width: 1080px) {
  .staff {
    height: auto;
    padding: calc(190px / 2) calc(70px / 2) calc(100px / 2);
    width: auto;
  }

  .staff__inner {
    backdrop-filter: blur(3px);
    grid-template-columns: 100%;
    padding: calc(80px / 2) calc(80px / 4);
    row-gap: calc(64px / 2);
    width: 100%;
  }

  .frame__deco._type1::before {
    height: calc(200px / 4);
    left: -7%;
    position: absolute;
    top: -30px;
    width: 15%;
  }

  .frame__deco._type1::after {
    height: calc(220px / 2);
    right: -20px;
    top: -60px;
    width: calc(390px / 2);
  }

  .frame__deco._type2::before {
    bottom: -10rem;
    height: calc(75px / 2);
    left: -10px;
    position: absolute;
    width: calc(50px / 2);
  }

  .frame__deco._type2::after {
    bottom: -10rem;
    height: calc(90px / 2);
    position: absolute;
    right: -15px;
    width: calc(60px / 2);
  }

  .staffList {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .staffList__box dt {
    font-size: calc(30px / 2);
  }

  .staffList__box dd {
    font-size: calc(50px / 2);
    margin-top: calc(24px / 2);
  }
}

/*   cast
------------------------------------------------------ */
.cast {
  height: 100vh;
  position: relative;
}

.cast__wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.cast__inner {
 -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 80rem 72rem;
  position: relative;
  width: 920rem;
}

.cast__frame {
  position: absolute;
  width: 100%;
}

.cast__frame::before {
  background: url("../images/section_num4_frame.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 220rem;
  left: -60rem;
  position: absolute;
  top: -140rem;
  width: 390rem;
}

.cast__frame::after {
  background: url("../images/icon-frame_1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 150rem;
  position: absolute;
  right: -70rem;
  top: -70rem;
  width: 140rem;
}

.cast__frameBottom {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.cast__frameBottom::before {
  background: url("../images/icon-frame_3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -15rem;
  content: "";
  height: 55rem;
  left: -20rem;
  position: absolute;
  width: 50rem;
}

.cast__frameBottom::after {
  background: url("../images/icon-frame_2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -15rem;
  content: "";
  height: 55rem;
  position: absolute;
  right: -25rem;
  width: 50rem;
}

.cast__listBox:nth-of-type(n + 2) {
  margin-top: 54rem;
}

.cast__listBox dt {
  color: #e8abfc;
  font-size: 23rem;
  font-weight: 500;
  text-align: center;
}

.cast__listBox dd {
  color: #fff;
  font-family: var(--fontNotoSelf);
  font-size: 38rem;
  font-weight: 500;
  margin-top: 24rem;
  text-align: center;
}

.cast__listBox--comment {
  cursor: pointer;
  margin-top: 0rem !important;
}

.cast__listBox--comment span {
  border-bottom: 2px solid #fff;
  color: #fff;
  display: inline-block;
  font-family: var(--fontNotoSelf);
  font-size: 16rem;
  font-weight: 500;
  padding-bottom: 8rem;
  padding-left: 30rem;
  position: relative;
}

.cast__listBox--comment span::before {
  background: url("../images/icon_comment_purple.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  height: 20rem;
  left: 0;
  margin: auto;
  position: absolute;
  top: -5rem;
  width: 23rem;
}

@media screen and (max-width: 1080px) {
  .cast {
    height: auto;
    overflow: hidden;
    padding: calc(230px / 2) calc(70px / 2) calc(100px / 2);
    width: auto;
  }

  .cast__inner {
    grid-template-columns: 100%;
    padding: 80rem 72rem;
    position: relative;
    row-gap: calc(72px / 2);
    width: 100%;
  }

  .cast__frame::before {
    height: calc(220px / 2);
    left: -30px;
    top: -60px;
    width: calc(390px / 2);
  }

  .cast__frame::after {
    height: calc(200px / 4);
    right: -7%;
    top: -30px;
    width: 15%;
  }

  .cast__frameBottom::before {
    bottom: -10rem;
    height: calc(75px / 2);
    left: -10px;
    position: absolute;
    width: calc(50px / 2);
  }

  .cast__frameBottom::after {
    bottom: -10rem;
    height: calc(90px / 2);
    position: absolute;
    right: -15px;
    width: calc(60px / 2);
  }

  .cast__listBox:nth-of-type(n + 2) {
    margin-top: calc(72px / 2);
  }

  .cast__listBox dt {
    font-size: calc(30px / 2);
  }

  .cast__listBox dd {
    font-size: calc(50px / 2);
    margin-top: calc(24px / 2);
  }
}

@media screen and (max-width: 768px) {
  .cast__frame::after {
    height: calc(200px / 2);
    right: -15%;
    top: -54px;
    width: 30%;
  }
  .frame__deco._type1::before {
    height: calc(200px / 2);
    left: -15%;
    top: -54px;
    width: 30%;
  }
}

/* introduction
------------------------------------------------------ */
.introduction {
  padding-bottom: 100rem;
  position: relative;
}

.introduction__catch {
  padding: 135rem 0 0;
  text-align: center;
}

.introduction__catch img {
  width: 717rem;
}

.introduction__textarea {
  margin: 54rem auto 0;
  width: 730rem;
}

.introduction__textarea p {
  color: #fff;
  font-family: var(--fontNotoSelf);
  font-size: 20rem;
  line-height: 2;
}

.introduction__thumbnail {
  margin: 80rem auto 0;
  text-align: right;
  width: 730rem;
}

.introduction__thumbnail img {
  width: 383rem;
}

@media screen and (max-width: 1080px) {
  .introduction {
    padding: 0 20px;
    padding-bottom: calc(56px / 2);
  }

  .introduction__catch {
    padding: calc(80px / 2) 0 0;
    text-align: center;
  }

  .introduction__catch img {
    margin: 0 -20px 0 0;
    width: 100%;
  }

  .introduction__textarea {
    margin: calc(60px / 2) auto 0;
    width: 100%;
  }

  .introduction__textarea p {
    font-size: calc(30px / 2);
  }

  .introduction__thumbnail {
    margin: calc(70px / 2) auto 0;
    text-align: right;
    width: 100%;
  }

  .introduction__thumbnail img {
    width: calc(383px / 2);
  }
}