.announcemodal__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 3.64vw;
}
.announcemodal__content img[src$="logo_we_will.svg"] {
  width: 49.21vw;
}
@media (min-width: 835px) {
  .announcemodal__content {
    position: relative;
  }
  .announcemodal__content img[src$="logo_we_will.svg"] {
    position: absolute;
    bottom: 0;
    right: -280px;
    width: 252px;
  }
}

.bnr {
  overflow: hidden;
}
@media (max-width: 834px) {
  .bnr {
    padding-top: 8.33vw;
    margin: 0 auto;
    width: 83.33vw;
  }
}
@media (min-width: 835px) {
  .bnr {
    position: absolute;
    left: calc(3.43vw + 40px);
    bottom: 1.66vw;
    margin-bottom: -10px;
    width: 306px;
    z-index: 1;
  }
}
@media (min-width: 835px) {
  .bnr.-fixed {
    position: fixed;
    left: calc(3.43vw + 40px);
    bottom: 1.66vw;
  }
}
.bnr a {
  position: relative;
  display: block;
}
.bnr a::before {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.bnr img {
  max-width: none;
  width: 100%;
}
.bnr .swiper-wrapper {
  display: flex;
}
.bnr .swiper-slide {
  flex-shrink: 0;
}
.bnr .swiper-slide a {
  display: block;
}
.bnr .swiper-pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.bnr .swiper-pagination span {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  height: 2.08vw;
  margin: 0 1.56vw;
  transition: background 0.4s;
  width: 2.08vw;
  cursor: pointer;
}
@media (min-width: 835px) {
  .bnr .swiper-pagination span {
    height: 8px;
    margin: 0 5px;
    width: 8px;
  }
}
.bnr .swiper-pagination span.swiper-pagination-bullet-active {
  background-color: #fff;
}

.pink {
  background: #FF228E;
}

.blue {
  background: #02CEDD;
}

.yellow {
  background: #FFF000;
}

.red {
  background: #FF4637;
}

.orange {
  background: #FFB100;
}

#countdown__modal {
  overflow: hidden;
}
#countdown__modal .c-modal__inner {
  display: block;
}
#countdown__modal .c-modal__close {
  top: 2.6vw;
  right: 2.6vw;
}
#countdown__modal .c-modal__close:before {
  background: #000;
}
#countdown__modal .c-modal__close:after {
  background: #000;
}
.c-modal__inner {
  transition: all 0.5s 0s ease;
}

.sign {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 375px;
  max-height: 667px;
  min-height: initial;
  margin: auto;
}
@media (min-width: 835px) {
  .sign {
    max-width: initial;
    max-height: initial;
  }
}
.sign__count {
  position: absolute;
  top: 50%;
  left: 0;
  opacity: 0;
}
@media (min-width: 835px) {
  .sign__count {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: 80vh;
  }
}
.sign__content {
  position: absolute;
  left: 0;
  right: 0;
  width: 83.5%;
  margin: 0 auto;
  opacity: 0;
}
@media (min-width: 835px) {
  .sign__content {
    top: 0;
    bottom: 0;
    margin: auto;
    width: 486px;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.sign__content__img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}
.sign__content__name {
  display: inline-block;
  font-weight: bold;
  opacity: 0;
  margin-top: -1px;
  font-size: 1rem;
}
@media (min-width: 835px) {
  .sign__content__name {
    font-size: 16px;
  }
}
.sign__content__name span {
  color: #fff;
  background-color: #000;
  padding: 2px;
}
.sign__content__name__sub {
  font-size: 0.75rem;
  font-weight: 500;
}
@media (min-width: 835px) {
  .sign__content__name__sub {
    font-size: 14px;
  }
}

.-active .pattern01 .sign__count {
  animation: CountPattern01_1 0.5s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards, CountPattern01_2 0.5s 1s cubic-bezier(0.14, 1.59, 0.61, 0.78) forwards;
}
.-active .pattern01 .sign__content {
  animation: CountSignImage01 0.5s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.-active .pattern02 .sign__count {
  animation: CountPattern02_1 0.5s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards, CountPattern02_2 0.5s 1s cubic-bezier(0.14, 1.59, 0.61, 0.78) forwards;
}
.-active .pattern02 .sign__content {
  animation: CountSignImage02 0.5s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.-active .pattern03 .sign__count {
  animation: CountPattern03_1 0.5s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards, CountPattern03_2 0.5s 1s cubic-bezier(0.14, 1.59, 0.61, 0.78) forwards;
}
.-active .pattern03 .sign__content {
  animation: CountSignImage03 0.5s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.-active .pattern04 .sign__count {
  animation: CountPattern04_1 0.5s 0.25s cubic-bezier(0.33, 1, 0.68, 1) forwards, CountPattern04_2 0.5s 1s cubic-bezier(0.14, 1.59, 0.61, 0.78) forwards;
}
.-active .pattern04 .sign__content {
  animation: CountSignImage04 0.5s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.-active .sign__content__name {
  animation: CountSignName 0.5s 1.75s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes CountSignImage01 {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-200deg);
    left: -100%;
    bottom: -20%;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    left: 0;
    bottom: 4.4%;
  }
}
@media (min-width: 835px) {
  @keyframes CountSignImage01 {
    0% {
      opacity: 0;
      transform: scale(1.5) rotate(200deg);
      right: -100%;
      top: -20%;
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
      left: 0;
      top: 9.7%;
    }
  }
}
@keyframes CountSignImage02 {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-200deg);
    left: -100%;
    top: -20%;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    left: 0;
    top: 9.7%;
  }
}
@media (min-width: 835px) {
  @keyframes CountSignImage02 {
    0% {
      opacity: 0;
      transform: scale(1.5) rotate(-200deg);
      left: -100%;
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
      left: 0;
    }
  }
}
@keyframes CountSignImage03 {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-200deg);
    left: -100%;
    top: -20%;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    left: 0;
    top: 9.7%;
  }
}
@keyframes CountSignImage04 {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-200deg);
    left: 100%;
    bottom: -20%;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    left: 0;
    bottom: 4.4%;
  }
}
@keyframes CountSignName {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes CountPattern01_1 {
  0% {
    opacity: 0;
    top: 34.4%;
    transform: scale(1.5);
  }
  40% {
    opacity: 1;
    top: 34.4%;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    top: 34.4%;
    transform: scale(1);
  }
}
@keyframes CountPattern01_2 {
  0% {
    opacity: 1;
    top: 34.4%;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    top: 10.4%;
    transform: scale(1.05) rotate(20deg);
    transform-origin: 70% 60%;
  }
}
@media (min-width: 835px) {
  @keyframes CountPattern01_1 {
    0% {
      opacity: 0;
      top: 1.8%;
      transform: scale(1.5);
    }
    40% {
      opacity: 1;
      top: 1.8%;
      transform: scale(0.7);
    }
    100% {
      opacity: 1;
      top: 1.8%;
      transform: scale(1);
    }
  }
  @keyframes CountPattern01_2 {
    0% {
      opacity: 1;
      top: 1.8%;
      right: 0%;
      transform: rotate(0deg);
    }
    100% {
      opacity: 1;
      top: 1%;
      right: 46.8%;
      transform: rotate(-20deg);
      transform-origin: 40% 80%;
    }
  }
}
@keyframes CountPattern02_1 {
  0% {
    opacity: 0;
    top: 34.4%;
    transform: scale(1.5);
  }
  40% {
    opacity: 1;
    top: 34.4%;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    top: 34.4%;
    transform: scale(1);
  }
}
@keyframes CountPattern02_2 {
  0% {
    opacity: 1;
    top: 53.9%;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    top: 62.2%;
    transform: scale(1.05) rotate(-20deg);
    transform-origin: 70% 60%;
  }
}
@media (min-width: 835px) {
  @keyframes CountPattern02_1 {
    0% {
      opacity: 0;
      top: 1.8%;
      transform: scale(1.5);
    }
    40% {
      opacity: 1;
      top: 1.8%;
      transform: scale(0.7);
    }
    100% {
      opacity: 1;
      top: 1.8%;
      transform: scale(1);
    }
  }
  @keyframes CountPattern02_2 {
    0% {
      opacity: 1;
      top: 1.8%;
      left: 0%;
      transform: rotate(0deg);
    }
    100% {
      opacity: 1;
      top: 1%;
      left: 46.8%;
      transform: rotate(20deg);
      transform-origin: 60% 80%;
    }
  }
}
@keyframes CountPattern03_1 {
  0% {
    opacity: 0;
    top: 34.4%;
    transform: scale(1.5);
  }
  40% {
    opacity: 1;
    top: 34.4%;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    top: 34.4%;
    transform: scale(1);
  }
}
@keyframes CountPattern03_2 {
  0% {
    opacity: 1;
    top: 53.9%;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    top: 62.2%;
    transform: scale(1.05);
    transform-origin: 70% 60%;
  }
}
@media (min-width: 835px) {
  @keyframes CountPattern03_1 {
    0% {
      opacity: 0;
      top: 1.8%;
      transform: scale(1.5);
    }
    40% {
      opacity: 1;
      top: 1.8%;
      transform: scale(0.7);
    }
    100% {
      opacity: 1;
      top: 1.8%;
      transform: scale(1);
    }
  }
  @keyframes CountPattern03_2 {
    0% {
      opacity: 1;
      top: 1.8%;
      left: 0%;
    }
    100% {
      opacity: 1;
      top: 1%;
      left: 54.6%;
      transform-origin: 80% 80%;
    }
  }
}
@keyframes CountPattern04_1 {
  0% {
    opacity: 0;
    top: 34.4%;
    transform: scale(1.5);
  }
  40% {
    opacity: 1;
    top: 34.4%;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    top: 34.4%;
    transform: scale(1);
  }
}
@keyframes CountPattern04_2 {
  0% {
    opacity: 1;
    top: 34.4%;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    top: 5.9%;
    transform: scale(1.05);
    transform-origin: 70% 60%;
  }
}
@media (min-width: 835px) {
  @keyframes CountPattern04_1 {
    0% {
      opacity: 0;
      top: 1.8%;
      transform: scale(1.5);
    }
    40% {
      opacity: 1;
      top: 1.8%;
      transform: scale(0.7);
    }
    100% {
      opacity: 1;
      top: 1.8%;
      transform: scale(1);
    }
  }
  @keyframes CountPattern04_2 {
    0% {
      opacity: 1;
      top: 1.8%;
      right: 0%;
    }
    100% {
      opacity: 1;
      top: 1%;
      right: 54.6%;
      transform-origin: 80% 80%;
    }
  }
}
.top__cont {
  background: #000;
  position: relative;
}

.top__seeall {
  color: #fff;
  display: block;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  margin-top: 12px;
  position: relative;
  width: 68px;
  font-size: 1.125rem;
}
.top__seeall:before, .top__seeall:after {
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  right: 0;
  background: #fff;
  content: "";
  height: 2px;
  transform: translate(0, -50%);
  width: 10px;
}
.top__seeall:after {
  transform: translate(0, -50%) rotate(90deg);
}
.top__seeall:hover:before {
  transform: translate(0, -50%) rotate(270deg);
}
.top__seeall:hover:after {
  transform: translate(0, -50%) rotate(360deg);
}

.top__scroller {
  overflow: hidden;
  overflow-x: scroll;
}
@media (min-width: 1281px) {
  .top__scroller {
    width: calc(100vw - (100vw - 1280px) / 2);
  }
}
.top__scroller::-webkit-scrollbar {
  height: 3px;
}
.top__scroller::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.2);
}
.top__scroller::-webkit-scrollbar-thumb {
  background: #fff;
}

.top__row {
  display: flex;
  justify-content: unset;
  position: relative;
}

:root {
  --movieprogress: 0%;
}

.movie {
  overflow: hidden;
  padding: 27px 0 0 8.33vw;
  position: relative;
}
@media (min-width: 835px) {
  .movie {
    margin-left: 0;
    padding: calc(136px - 0.8em) 0 0;
  }
}

@keyframes onpu_move {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(-5%, 0) rotate(2deg) scale(1.05);
  }
}
.movie__onpu {
  position: absolute;
  top: 0;
  left: 0;
  animation: onpu_move 2s 0s ease infinite alternate;
  background: url(/tv/assets/img/page/top/common/ph_onpu_1_nrw.png) no-repeat 0 0/100%;
  height: 210.93vw;
  width: 100%;
}
@media (min-width: 835px) {
  .movie__onpu {
    position: absolute;
    top: 0.52vw;
    left: auto;
    right: 2.6vw;
    height: 274px;
    width: 317px;
  }
}

.movie__ttlrow {
  align-items: center;
  display: flex;
}

.movie__pn {
  display: flex;
  margin-left: 30px;
}
@media (max-width: 834px) {
  .movie__pn {
    display: none;
  }
}
.movie__pn .prev,
.movie__pn .next {
  height: 16px;
  transform: rotate(45deg);
  width: 16px;
}
.movie__pn .prev {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}
.movie__pn .next {
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.movie__item {
  cursor: pointer;
  min-width: 280px;
  position: relative;
}
@media (min-width: 835px) {
  .movie__item {
    width: 488px;
  }
}
.movie__item:hover .thumb::before {
  opacity: 0;
}
.movie__item .thumb {
  aspect-ratio: 16/9;
  position: relative;
}
.movie__item .thumb img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.movie__item .thumb:before {
  background: #000;
  content: "";
  height: 100%;
  opacity: 0.3;
  transition: opacity 0.3s 0s ease;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.movie__item .thumb:after {
  background: url(/tv/assets/img/common/ico/ico_play.svg) no-repeat 0 0/100%;
  content: "";
  height: min(12.5vw, 58px);
  transform: translate(-50%, -50%);
  width: min(12.5vw, 58px);
  position: absolute;
  top: 50%;
  left: 50%;
}
.movie__item .ttl {
  color: #fff000;
  font-weight: 300;
  margin-bottom: 20px;
  margin-top: 10px;
}
@media (max-width: 834px) {
  .movie__item .ttl {
    line-height: 1.2;
  }
}
@media (min-width: 835px) {
  .movie__item .ttl {
    margin-bottom: 32px;
  }
}
.movie__item .ttl strong {
  font-size: 0.8125rem;
  font-weight: 700;
}
@media (min-width: 835px) {
  .movie__item .ttl strong {
    font-size: 0.875rem;
  }
}
.movie__item .ttl .date {
  font-size: 0.875rem;
}
@media (min-width: 835px) {
  .movie__item .ttl .date {
    font-size: 1rem;
  }
}
.movie__item + .movie__item {
  margin-left: 14px;
}
@media (min-width: 835px) {
  .movie__item + .movie__item {
    margin-left: 20px;
  }
}
.movie__item:last-child:after {
  position: absolute;
  top: 0;
  left: 100%;
  content: "";
  height: 100%;
  width: 14px;
}
@media (min-width: 835px) {
  .movie__item:last-child:after {
    width: 20px;
  }
}

.movie__ui {
  margin-right: 8.33vw;
}
@media (min-width: 835px) {
  .movie__ui {
    margin-right: 0;
  }
}

.movie__progress {
  background: rgba(255, 255, 255, 0.2);
  display: block;
  height: 2px;
  margin-top: 24px;
  position: relative;
}
@media (min-width: 835px) {
  .movie__progress {
    height: 3px;
    margin-top: 36px;
  }
}
.movie__progress .bar {
  background: #fff;
  height: 100%;
  width: var(--movieprogress);
}

.news {
  padding: 20px 8.33vw 50px;
  position: relative;
}
@media (min-width: 835px) {
  .news {
    margin-left: 0;
    padding: 136px 0 180px;
  }
}

.news__onpu {
  position: absolute;
  left: 4.27vw;
  bottom: 2.13vw;
  animation: onpu_move 2s 0s ease infinite alternate;
  background: url(/tv/assets/img/page/top/common/ph_onpu_2.png) no-repeat 0 0/100%;
  height: 420px;
  width: 219px;
}

@media (min-width: 835px) {
  .news__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
  }
}
@media (max-width: 834px) {
  .news__list {
    border-bottom: 2px solid #333333;
  }
}

.news__list__item {
  position: relative;
  border-top: 2px solid #333333;
  color: #fff;
}
@media (min-width: 835px) {
  .news__list__item {
    border-bottom: 3px solid #333333;
    border-top: 3px solid #333333;
    margin: -3px 20px 0;
    width: calc(50% - 40px);
  }
}
@media (min-width: 835px) {
  .news__list__item:hover::before {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.15);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
  }
}
.news__list__item a {
  display: block;
  padding: 14px 36px 14px 0;
  position: relative;
}
@media (min-width: 835px) {
  .news__list__item a {
    padding: 20px 40px 20px 0;
  }
}
.news__list__item a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  content: "";
  height: 7px;
  transform: translate(0, -50%) rotate(45deg);
  width: 7px;
}
@media (min-width: 835px) {
  .news__list__item a::after {
    position: absolute;
    top: 50%;
    right: 12px;
  }
}
.news__list__item .date {
  font-size: 1rem;
  color: #646464;
  font-weight: 600;
}
.news__list__item .ttl {
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 834px) {
  .announce2ndmodal__comment {
    margin-top: 20.83vw !important;
    padding-top: 10.41vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment {
    padding-top: 75px;
  }
}

@media (max-width: 834px) {
  .announce2ndmodal__comment__ttl {
    width: 42.18vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__ttl {
    width: 200px;
  }
}

@media (min-width: 835px) {
  .announce2ndmodal__comment__cont {
    align-items: flex-start;
    display: flex;
    justify-content: center;
  }
}

.announce2ndmodal__comment__cont__box {
  position: relative;
}
.announce2ndmodal__comment__cont__box::before, .announce2ndmodal__comment__cont__box::after {
  aspect-ratio: 551/570;
  content: "";
  pointer-events: none;
  width: 85.3%;
}
.announce2ndmodal__comment__cont__box::before {
  position: absolute;
  top: -2.5%;
  right: -4.1%;
  background: url("/tv/assets/img/page/top/announce2nd/bg_paint_1.png") no-repeat center/contain;
}
.announce2ndmodal__comment__cont__box::after {
  position: absolute;
  top: auto;
  left: -4.1%;
  bottom: -2.5%;
  right: auto;
  background: url("/tv/assets/img/page/top/announce2nd/bg_paint_2.png") no-repeat center/contain;
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box {
    width: 490px;
  }
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box + .announce2ndmodal__comment__cont__box {
    margin-top: 10.93vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box + .announce2ndmodal__comment__cont__box {
    margin-left: 6.7%;
  }
}

.announce2ndmodal__comment__cont__box__inner {
  position: relative;
  background: #000;
  height: 100%;
  width: 100%;
  z-index: 1;
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box__inner {
    padding: 6.51vw 5.2vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box__inner {
    padding: 50px 34px;
  }
}

.announce2ndmodal__comment__cont__box__head {
  line-height: 1;
}
.announce2ndmodal__comment__cont__box__head dt {
  font-weight: 500;
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box__head dt {
    font-size: 3.38vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box__head dt {
    font-size: min(1.18vw, 14px);
  }
}
.announce2ndmodal__comment__cont__box__head dd {
  color: #fff;
  font-weight: 900;
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box__head dd {
    font-size: 7.55vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box__head dd {
    font-size: min(2.71vw, 32px);
  }
}
.announce2ndmodal__comment__cont__box__head dd span {
  color: #fff;
  display: inline-block;
  font-size: 62.5%;
  margin-left: 4px;
  transform: translateY(-25%);
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box__head dt + dd {
    margin-top: 1.04vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box__head dt + dd {
    margin-top: 6px;
  }
}

.announce2ndmodal__comment__cont__box__txt {
  font-weight: 600;
  line-height: 1.75;
}
@media (max-width: 834px) {
  .announce2ndmodal__comment__cont__box__txt {
    font-size: 3.9vw;
    margin-top: 1.95vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__comment__cont__box__txt {
    font-size: min(1.69vw, 20px);
    margin-top: 16px;
  }
}

.announce2ndmodal {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  color: #fff;
  display: block;
  height: 100%;
  width: 100%;
}
.announce2ndmodal img {
  max-height: none;
  max-width: none;
  width: 100%;
}
.announce2ndmodal .c-modal__close {
  z-index: 2;
}
.announce2ndmodal .c-modal__close::before, .announce2ndmodal .c-modal__close::after {
  border-color: #fff;
}

.announce2ndmodal__inner {
  height: 100%;
  overflow-y: scroll;
}

.announce2ndmodal__content {
  position: relative;
  display: none;
}
.announce2ndmodal__content[data-page="1"] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
.announce2ndmodal__content[data-page="2"] {
  margin: 0 auto;
}
@media (max-width: 834px) {
  .announce2ndmodal__content[data-page="2"] {
    padding: 24.21vw 0 16.92vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__content[data-page="2"] {
    max-width: 1180px;
    padding: 328px 40px 120px;
  }
}

@media (max-width: 834px) {
  .announce2ndmodal__ttl {
    position: absolute;
    top: 4.55vw;
    left: 3.9vw;
    width: 42.18vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__ttl {
    position: absolute;
    top: 44px;
    left: 0;
    width: 324px;
    z-index: 3;
  }
}

.announce2ndmodal__box {
  position: relative;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 834px) {
  .announce2ndmodal__box {
    margin: 0 auto;
    width: 83.33vw;
  }
}

@media (max-width: 834px) {
  .announce2ndmodal__box__ttl {
    position: absolute;
    top: -9.38vw;
    left: -3.26vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__box__ttl {
    position: absolute;
    top: -46px;
    left: -36px;
  }
}
.announce2ndmodal__box__ttl img {
  max-height: none;
  max-width: none;
  height: auto;
  width: 100%;
}

.announce2ndmodal__fv {
  position: relative;
  aspect-ratio: 1.475;
}

.announce2ndmodal__fv__mv {
  aspect-ratio: 700/990;
  background: linear-gradient(135deg, rgb(174, 155, 150) 0%, rgb(255, 255, 255) 50%, rgb(174, 155, 150) 100%);
  transform: rotate(-7deg);
  z-index: 1;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__mv {
    margin-left: 4.16vw;
    padding: 1.82vw;
    transform-origin: top center;
    width: 78.12vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__mv {
    position: absolute;
    top: -22%;
    left: 39.1%;
    padding: 1.2%;
    transform-origin: top left;
    width: 53.8%;
  }
}
.announce2ndmodal__fv__mv img {
  max-height: none;
  max-width: none;
  width: 100%;
}
[data-isMV=false] .announce2ndmodal__fv__mv {
  background: transparent;
  padding: 0;
}

.announce2ndmodal__fv__info {
  position: relative;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__info {
    margin-top: 22.13vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info {
    width: 44.4%;
  }
}

@media (min-width: 835px) {
  .announce2ndmodal__fv__info__ttl {
    position: absolute;
    top: 3.3%;
    left: -18.8%;
    width: 130.4%;
  }
}
.announce2ndmodal__fv__info__ttl img {
  width: 100%;
}

@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff {
    padding-top: 6.25vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff {
    padding: 36px 11.8% 0 5.3%;
  }
}

@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__ttl {
    width: 26.04vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__ttl {
    width: 123px;
  }
}

.announce2ndmodal__fv__info__staff__cont {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__cont {
    gap: 4.16vw 0;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__cont {
    gap: 10px 0;
  }
}

.announce2ndmodal__fv__info__staff__cont__list {
  line-height: 1.3;
}
.announce2ndmodal__fv__info__staff__cont__list:first-of-type {
  width: 100%;
}
.announce2ndmodal__fv__info__staff__cont__list:nth-of-type(2), .announce2ndmodal__fv__info__staff__cont__list:nth-of-type(4) {
  width: 55%;
}
.announce2ndmodal__fv__info__staff__cont__list:nth-of-type(3), .announce2ndmodal__fv__info__staff__cont__list:nth-of-type(5) {
  width: 45%;
}
.announce2ndmodal__fv__info__staff__cont__list dt {
  font-weight: 500;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__cont__list dt {
    font-size: 3.64vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__cont__list dt {
    font-size: min(1.18vw, 14px);
  }
}
.announce2ndmodal__fv__info__staff__cont__list dd {
  font-weight: 900;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__cont__list dd {
    font-size: 5.2vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__cont__list dd {
    font-size: min(2.03vw, 24px);
  }
}
.announce2ndmodal__fv__info__staff__cont__list dd span {
  font-weight: 500;
}
@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__cont__list dd span {
    display: block;
    font-size: 3.64vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__cont__list dd span {
    font-size: min(1.18vw, 14px);
  }
}

@media (max-width: 834px) {
  .announce2ndmodal__fv__info__staff__mov {
    margin-top: 8.85vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__fv__info__staff__mov {
    margin-top: 40px;
  }
}
@media (any-hover: hover) {
  .announce2ndmodal__fv__info__staff__mov {
    transition: none;
  }
  .announce2ndmodal__fv__info__staff__mov:hover {
    opacity: 1;
  }
}
.announce2ndmodal__fv__info__staff__mov:hover .thumb::before {
  opacity: 0;
}
.announce2ndmodal__fv__info__staff__mov .thumb {
  aspect-ratio: 16/9;
  display: block;
  position: relative;
}
.announce2ndmodal__fv__info__staff__mov .thumb img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.announce2ndmodal__fv__info__staff__mov .thumb:before {
  background: #000;
  content: "";
  height: 100%;
  opacity: 0.3;
  transition: opacity 0.3s 0s ease;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.announce2ndmodal__fv__info__staff__mov .thumb:after {
  background: url(/tv/assets/img/page/top/announce2nd/ico_play.svg) no-repeat 0 0/100%;
  content: "";
  height: min(12.5vw, 58px);
  transform: translate(-50%, -50%);
  width: min(12.5vw, 58px);
  position: absolute;
  top: 50%;
  left: 50%;
}

.announce2ndmodal__intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
@media (max-width: 834px) {
  .announce2ndmodal__intro__bg {
    background: radial-gradient(circle, rgb(228, 202, 195) 0%, rgb(0, 0, 0) 95%, rgb(0, 0, 0) 100%);
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__intro__bg {
    background: radial-gradient(circle, rgb(228, 202, 195) 0%, rgb(0, 0, 0) 70%, rgb(0, 0, 0) 100%);
  }
}
[data-isMV=false] .announce2ndmodal__intro__bg {
  display: none !important;
}

.announce2ndmodal__intro__mv {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 700/990;
  align-items: center;
  background: linear-gradient(135deg, rgb(174, 155, 150) 0%, rgb(255, 255, 255) 50%, rgb(174, 155, 150) 100%);
  display: flex;
  justify-content: center;
  transform: rotate(-10deg);
}
@media (max-width: 834px) {
  .announce2ndmodal__intro__mv {
    height: 70vh;
    padding: 1.82vw;
  }
}
@media (min-width: 835px) {
  .announce2ndmodal__intro__mv {
    height: 100vh;
    padding: 1.2%;
  }
}
.announce2ndmodal__intro__mv img {
  height: 100%;
  width: auto;
}
[data-isMV=false] .announce2ndmodal__intro__mv {
  background: transparent;
  padding: 0;
}

@keyframes loaderout {
  0% {
    clip-path: inset(0 0 0 0);
  }
  99% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
  }
}
@keyframes bginanim {
  0% {
    filter: grayscale(1) contrast(1.3) brightness(1);
    transform: scale(1.5);
  }
  100% {
    filter: grayscale(1) contrast(1.1) brightness(1.2);
    transform: scale(1);
  }
}
@keyframes _blogo2in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5) rotate(560deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  90% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}
@keyframes blogo2in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3) rotate(560deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}
@keyframes loadernamein {
  0% {
    opacity: 0;
    transform: rotate(-10deg) scale(2);
  }
  50% {
    opacity: 1;
    transform: rotate(-10deg) scale(0.5);
  }
  75% {
    opacity: 1;
    transform: rotate(-10deg) scale(1.2);
  }
  90% {
    opacity: 1;
    transform: rotate(-10deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
  }
}
@keyframes loadernamein {
  0% {
    opacity: 0;
    transform: rotate(-50deg) scale(2);
  }
  100% {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
  }
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  height: 100%;
  pointer-events: none;
  width: 100%;
  z-index: 3;
}
.-ready .loader {
  animation: loaderout 0.5s 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

.loader__bg {
  position: absolute;
  top: 0;
  left: 0;
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_all_1_nrw.jpg) no-repeat 50% 50%/100%;
  height: 177.86vw;
  width: 100%;
}
@media (max-width: 834px) {
  .loader__bg {
    filter: grayscale(1);
  }
}
@media (min-width: 835px) {
  .loader__bg {
    background: url(/tv/assets/img/page/top/loader/ph_bg.png) no-repeat 50% 50%/cover;
    height: 100%;
  }
}
@media (max-width: 834px) {
  .loader__bg:before {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    content: "";
    height: 100%;
    opacity: 0.4;
    width: 100%;
  }
}
.-ready .loader__bg {
  animation: bginanim 6s 0s ease forwards;
}

.loader__blogo2 {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 84.89vw;
  opacity: 0;
  transform: translate(-50%, -50%);
  width: 89.45vw;
}
[data-introtheme="1"] .loader__blogo2 {
  background: url(/tv/assets/img/page/top/loader/ph_bandlogo_2_1.png) no-repeat 50% 50%/100%;
}
[data-introtheme="2"] .loader__blogo2 {
  background: url(/tv/assets/img/page/top/loader/ph_bandlogo_2_2.png) no-repeat 50% 50%/100%;
}
[data-introtheme="3"] .loader__blogo2 {
  background: url(/tv/assets/img/page/top/loader/ph_bandlogo_2_3.png) no-repeat 50% 50%/100%;
}
[data-introtheme="4"] .loader__blogo2 {
  background: url(/tv/assets/img/page/top/loader/ph_bandlogo_2_4.png) no-repeat 50% 50%/100%;
}
@media (min-width: 835px) {
  .loader__blogo2 {
    height: 33.95vw;
    width: 35.78vw;
  }
}
.-ready .loader__blogo2 {
  animation: blogo2in 1s 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.loader__logotxt {
  position: absolute;
  top: calc(50% + 22.13vw);
  left: 10.02vw;
  font-size: 3.64vw;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.7857142857;
  opacity: 0;
  transform: rotate(-10deg);
  transform-origin: 0 0;
}
[data-introtheme="1"] .loader__logotxt {
  color: #ff19c6;
}
[data-introtheme="2"] .loader__logotxt {
  color: #fff000;
}
[data-introtheme="3"] .loader__logotxt {
  color: #0fb0fb;
}
[data-introtheme="4"] .loader__logotxt {
  color: #ff1919;
}
@media (min-width: 835px) {
  .loader__logotxt {
    position: absolute;
    top: calc(50% + 7.55vw);
    left: calc(50% - 16.14vw);
    font-size: 0.98vw;
  }
}
.-ready .loader__logotxt {
  opacity: 1;
  transition: opacity 0.5s 2.5s ease;
}

.loader__name {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.loader__name em {
  font-style: normal;
  font-weight: 600;
}
.loader__name .item {
  animation: loadernamein 0.5s 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  color: #000;
  display: inline-flex;
  font-size: 7.03vw;
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  padding: 4px 8px 5px;
  transform: rotate(-10deg);
  transform-origin: 0 0;
  white-space: nowrap;
}
@media (min-width: 835px) {
  .loader__name .item {
    font-size: 1.87vw;
  }
}
[data-introtheme="1"] .loader__name .item {
  background: #ff19c6;
}
[data-introtheme="2"] .loader__name .item {
  background: #fff000;
}
[data-introtheme="3"] .loader__name .item {
  background: #0fb0fb;
}
[data-introtheme="4"] .loader__name .item {
  background: #ff1919;
}
.loader__name .item[data-character=hitori] {
  position: absolute;
  top: 26.04vw;
  left: 6.51vw;
  animation-delay: 2.5s;
  width: 27.34vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .loader__name .item[data-character=hitori] {
    position: absolute;
    top: 9.4vw;
    left: 2.6vw;
    width: 6.7vw;
  }
}
.loader__name .item[data-character=nijika] {
  position: absolute;
  top: 15.62vw;
  left: 20.83vw;
  animation-delay: 2.7s;
  width: 27.34vw;
}
@media (min-width: 835px) {
  .loader__name .item[data-character=nijika] {
    position: absolute;
    top: 6.7vw;
    left: 7.4vw;
    width: 7vw;
  }
}
.loader__name .item[data-character=ryo] {
  position: absolute;
  top: -36.46vw;
  left: -36.46vw;
  animation-delay: 2.9s;
  width: 22.13vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .loader__name .item[data-character=ryo] {
    position: absolute;
    top: -13.5vw;
    left: -8.9vw;
    width: 5.5vw;
  }
}
.loader__name .item[data-character=ikuyo] {
  position: absolute;
  top: -26.05vw;
  left: -52.09vw;
  animation-delay: 3.1s;
  width: 32.55vw;
}
@media (min-width: 835px) {
  .loader__name .item[data-character=ikuyo] {
    position: absolute;
    top: -10.5vw;
    left: -15.9vw;
    width: 8.5vw;
  }
}

@keyframes mv_curtainanim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  30% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
  31% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
  70% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}
:root {
  --navHeight: 0;
}

.mainvisual__change {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 834px) {
  .mainvisual__change {
    height: 50px;
    transition: height 0.4s 0s ease;
    width: 50px;
  }
}
@media (min-width: 835px) {
  .mainvisual__change {
    height: var(--navHeight);
    width: 60px;
  }
}
@media (max-width: 834px) {
  .mainvisual__change.-open {
    height: var(--navHeight);
    overflow: visible;
  }
}
.mainvisual__change.-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

.mainvisual__change__row {
  display: flex;
  flex-flow: column;
}

.mainvisual__change__item {
  position: relative;
}
@media (min-width: 835px) {
  .mainvisual__change__item {
    height: 60px;
    width: 60px;
  }
}
@media (max-width: 834px) {
  .mainvisual__change__item {
    height: 50px;
    order: 1;
    width: 50px;
  }
}
@media (max-width: 834px) {
  .mainvisual__change__item.-active {
    order: 0;
  }
}
.mainvisual__change__item:before {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid;
  border-color: #fff;
  content: "";
  height: 100%;
  transition: all 0.3s 0s ease;
  width: 100%;
  z-index: 1;
}
.mainvisual__change__item[data-character=hitori] {
  background: url(/tv/assets/img/page/top/mainvisual/thumb/ph_thumb_hitori.jpg) no-repeat 0 0/100%;
}
.mainvisual__change__item[data-character=hitori]:before {
  border-color: #ff2291;
}
.mainvisual__change__item[data-character=hitori]:hover:before {
  border-width: 6px;
}
.mainvisual__change__item[data-character=nijika] {
  background: url(/tv/assets/img/page/top/mainvisual/thumb/ph_thumb_nijika.jpg) no-repeat 0 0/100%;
}
.mainvisual__change__item[data-character=nijika]:before {
  border-color: #ffb400;
}
.mainvisual__change__item[data-character=nijika]:hover:before {
  border-width: 6px;
}
.mainvisual__change__item[data-character=ryo] {
  background: url(/tv/assets/img/page/top/mainvisual/thumb/ph_thumb_ryo.jpg) no-repeat 0 0/100%;
}
.mainvisual__change__item[data-character=ryo]:before {
  border-color: #02d1e0;
}
.mainvisual__change__item[data-character=ryo]:hover:before {
  border-width: 6px;
}
.mainvisual__change__item[data-character=ikuyo] {
  background: url(/tv/assets/img/page/top/mainvisual/thumb/ph_thumb_ikuyo.jpg) no-repeat 0 0/100%;
}
.mainvisual__change__item[data-character=ikuyo]:before {
  border-color: #ff4637;
}
.mainvisual__change__item[data-character=ikuyo]:hover:before {
  border-width: 6px;
}
.mainvisual__change__item[data-character=all] {
  background: url(/tv/assets/img/page/top/mainvisual/thumb/ph_thumb_all.jpg) no-repeat 0 0/100%;
}
.mainvisual__change__item[data-character=all]:before {
  border-color: #fff000;
}
.mainvisual__change__item[data-character=all]:hover:before {
  border-width: 6px;
}

.mainvisual__change__curtain {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 0;
  width: 100%;
  z-index: 1;
}
@media (min-width: 835px) {
  .mainvisual__change__curtain {
    position: absolute;
    top: 0;
    left: calc(50% - 22.87vw);
    height: 100%;
    width: 45.75vw;
  }
}
.mainvisual__change__curtain.-anim {
  animation: mv_curtainanim 1s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
[data-character=hitori] .mainvisual__change__curtain {
  background: #ff2291;
}
[data-character=nijika] .mainvisual__change__curtain {
  background: #ffb400;
}
[data-character=ryo] .mainvisual__change__curtain {
  background: #02d1e0;
}
[data-character=ikuyo] .mainvisual__change__curtain {
  background: #ff4637;
}
[data-character=all] .mainvisual__change__curtain {
  background: #fff000;
}

@keyframes mv_scrolleranim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  40% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
  41% {
    transform-origin: 100% 0;
  }
  80% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}
.mainvisual__scroller {
  position: absolute;
  left: 3.43vw;
  bottom: 1.66vw;
  color: #fff000;
  font-weight: 600;
  line-height: 1;
  padding-left: 70px;
  transform: translate(0, -118px) rotate(90deg);
  transform-origin: 0 100%;
  font-size: 1.125rem;
}
.mainvisual__scroller.-fixed {
  position: fixed;
  left: 3.43vw;
  bottom: 1.66vw;
}
.mainvisual__scroller:before {
  position: absolute;
  top: calc(50% - 0.5px);
  left: 0;
  animation: mv_scrolleranim 3s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  background: #fff000;
  content: "";
  height: 1px;
  width: 60px;
}
@media (max-width: 834px) {
  .mainvisual__scroller {
    display: none;
  }
}

.mainvisual__ph {
  height: 177.86vw;
  pointer-events: none;
  position: relative;
}
@media (min-width: 835px) {
  .mainvisual__ph {
    height: 56.25vw;
    margin: 0 auto;
    position: relative;
    width: 45.75vw;
  }
}

.mainvisual__ph__slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: background 0s 0.5s ease;
  width: 100%;
}
.mainvisual__ph__slide .layer1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: background 0s 0.5s ease;
  width: 100%;
  z-index: 1;
}
[data-character=hitori] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_hitori_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=hitori] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_hitori_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=hitori] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_hitori_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=hitori] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_hitori_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=nijika] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_nijika_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=nijika] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_nijika_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=nijika] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_nijika_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=nijika] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_nijika_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=ryo] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ryo_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=ryo] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ryo_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=ryo] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ryo_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=ryo] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ryo_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=ikuyo] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ikuyo_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=ikuyo] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ikuyo_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=ikuyo] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ikuyo_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=ikuyo] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_ikuyo_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=all] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_all_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=all] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_all_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=all] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_all_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=all] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_all_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=compilation] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=compilation] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=compilation] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=compilation] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation_2.png) no-repeat 50% 50%/cover;
  }
}
[data-character=compilation2] .mainvisual__ph__slide {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation2_1_nrw.jpg) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=compilation2] .mainvisual__ph__slide {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation2_1.jpg) no-repeat 50% 50%/cover;
  }
}
[data-character=compilation2] .mainvisual__ph__slide .layer1 {
  background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation2_2_nrw.png) no-repeat 50% 50%/cover;
}
@media (min-width: 835px) {
  [data-character=compilation2] .mainvisual__ph__slide .layer1 {
    background: url(/tv/assets/img/page/top/mainvisual/slides/ph_compilation2_2.png) no-repeat 50% 50%/cover;
  }
}

@keyframes mv_catch_changeanim {
  0% {
    opacity: 0;
    transform: translate(0, -10%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0%);
  }
}
@keyframes mv_catch_inanim {
  0% {
    opacity: 0;
    transform: translate(0, -10%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0%);
  }
}
@keyframes mv_phnamein {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.mainvisual {
  position: relative;
}
@media (max-width: 834px) {
  .mainvisual {
    overflow: hidden;
  }
}

.mainvisual__wrapper {
  overflow: hidden;
  position: relative;
}

.mainvisual__bg {
  position: fixed;
  top: 0;
  left: 0;
  background: url(/tv/assets/img/page/top/mainvisual/ph_bg.png) no-repeat 50% 50%/cover, #000;
  height: 100%;
  width: 100%;
}

.mainvisual__catch {
  position: absolute;
  top: -2.74vw;
  left: -1.31vw;
  color: #fff000;
  font-size: 22.13vw;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.8823529412;
  white-space: nowrap;
}
@media (min-width: 835px) {
  .mainvisual__catch {
    position: absolute;
    top: -1.67vw;
    left: -0.58vw;
    font-size: 11.56vw;
    line-height: 0.8828828829;
  }
}
.mainvisual__catch em {
  font-style: normal;
  font-weight: 300;
}
.mainvisual__catch .nrwspace {
  letter-spacing: -0.1em;
}
.mainvisual__catch .row {
  display: block;
  opacity: 0;
}
@media (min-width: 835px) {
  .mainvisual__catch .row:nth-child(2) {
    letter-spacing: 0.003em;
  }
}
.-introend .mainvisual__catch .row {
  animation: mv_catch_inanim 1s 0s ease forwards;
}
.-change .mainvisual__catch .row:nth-child(1) {
  animation: mv_catch_changeanim 1s 0.7s ease forwards;
  opacity: 0;
}
.-change .mainvisual__catch .row:nth-child(2) {
  animation: mv_catch_changeanim 1s 0.8s ease forwards;
  opacity: 0;
}
.-change .mainvisual__catch .row:nth-child(3) {
  animation: mv_catch_changeanim 1s 0.9s ease forwards;
  opacity: 0;
}

.mainvisual__logo {
  position: absolute;
  left: 7.81vw;
  bottom: 10.8vw;
  display: none;
  pointer-events: none;
  transform: translate(0, 0);
  width: 85.28vw;
  z-index: 1;
}
.-introend .mainvisual__logo {
  display: block;
}
@media (min-width: 835px) {
  .mainvisual__logo {
    position: absolute;
    top: 27.23vw;
    left: 3.43vw;
    transform: translate(0, 0);
    width: 27.76vw;
  }
}
.-change .mainvisual__logo .obj {
  animation: mv_catch_changeanim 1s 1s ease forwards;
  opacity: 0;
}

.mainvisual__phname {
  position: absolute;
  top: 59.89vw;
  left: 0;
  clip-path: inset(0 100% 0 0);
  z-index: 1;
}
@media (min-width: 835px) {
  .mainvisual__phname {
    position: absolute;
    top: 30.2vw;
    left: 0;
  }
}
.mainvisual__phname em {
  font-style: normal;
  font-weight: 600;
}
.-change .mainvisual__phname {
  animation: mv_phnamein 0.5s 0s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
.mainvisual__phname .item {
  color: #000;
  display: none;
  font-size: 7.03vw;
  font-weight: 300;
  line-height: 1;
  padding: 4px 8px 5px;
  z-index: 1;
}
@media (min-width: 835px) {
  .mainvisual__phname .item {
    font-size: 2.125rem;
    padding: 5px 10px;
  }
}
[data-character=hitori] .mainvisual__phname .item[data-character=hitori] {
  background: #ff2291;
  display: block;
}
[data-character=nijika] .mainvisual__phname .item[data-character=nijika] {
  background: #ffb400;
  display: block;
}
[data-character=ryo] .mainvisual__phname .item[data-character=ryo] {
  background: #02d1e0;
  display: block;
}
[data-character=ikuyo] .mainvisual__phname .item[data-character=ikuyo] {
  background: #ff4637;
  display: block;
}
[data-character=all] .mainvisual__phname .item[data-character=all] {
  background: #fff000;
  display: block;
}
[data-character=compilation] .mainvisual__phname .item[data-character=compilation] {
  background: #ff2291;
  display: block;
}
[data-character=compilation2] .mainvisual__phname .item[data-character=compilation2] {
  background: #ffb400;
  display: block;
}

.mainvisual__announce2nd {
  z-index: 1;
}
@media (max-width: 834px) {
  .mainvisual__announce2nd {
    position: absolute;
    top: 124.73vw;
    left: 55.98vw;
    width: 44.79vw;
  }
}
@media (min-width: 835px) {
  .mainvisual__announce2nd {
    position: absolute;
    left: 61.97vw;
    bottom: 1.66vw;
    width: 14.32vw;
  }
}
.mainvisual__announce2nd img {
  display: block;
  transition: transform 0.15s ease-out;
}
.mainvisual__announce2nd:hover img {
  transform: scale(1.03);
}

.mainvisual__mov {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}