.tab_container {
  position: relative;
}
@media (max-width: 834px) {
  .tab_container {
    min-height: 143.22vw;
    overflow-x: hidden;
  }
}
@media (min-width: 835px) {
  .tab_container {
    min-height: 1068px;
  }
}
.tab_container .main_img {
  position: absolute;
  top: 0;
  left: 58.85vw;
  pointer-events: none;
  width: 52.99vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .tab_container .main_img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: initial;
  }
}
.tab_container .main_img img {
  opacity: 0;
  transform: translate(0, 5%);
}
.-ready .tab_container .main_img img {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.6s 0.5s ease;
}

.character_part {
  position: relative;
  margin-top: 0;
}
@media (min-width: 835px) {
  .character_part {
    margin-top: -108px;
  }
}
.character_part .catchcopy {
  margin-left: 7.81vw;
  position: relative;
}
@media (max-width: 834px) {
  .character_part .catchcopy img {
    height: 23.69vw;
  }
}
@media (min-width: 835px) {
  .character_part .catchcopy {
    position: absolute;
    bottom: 110px;
    margin-left: 0;
    width: 28.6%;
  }
  .character_part .catchcopy img {
    height: auto;
  }
}
@media (min-width: 835px) {
  .character_part .bg_part {
    height: 510px;
  }
}
@media (min-width: 835px) {
  .character_part .bg_part img {
    position: absolute;
    left: 50%;
    bottom: 0;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0;
    transform: translate(-50%, 5%);
  }
}
.-ready .character_part .bg_part img {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: all 0.6s 0.7s ease;
}

.pagination_part {
  margin-top: 9.63vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 835px) {
  .pagination_part {
    margin-top: -45px;
  }
}

.pagination {
  clip-path: inset(0 100% 0 0);
  height: 14.05vw;
  padding-top: 3.38vw;
  position: relative;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@media (min-width: 835px) {
  .pagination {
    height: 95px;
    padding-top: 20px;
  }
}
.-ready .pagination {
  clip-path: inset(0 0 0 0);
}
.pagination.hitori_pagination::before {
  background-color: #ff2291;
}
.pagination.hitori_pagination::after {
  background: url(/tv/assets/img/page/character/hitori/name.svg) repeat-x;
}
.pagination.nijika_pagination::before {
  background-color: #ffb400;
}
.pagination.nijika_pagination::after {
  background: url(/tv/assets/img/page/character/nijika/name.svg) repeat-x;
}
.pagination.ryo_pagination::before {
  background-color: #02d1e0;
}
.pagination.ryo_pagination::after {
  background: url(/tv/assets/img/page/character/ryo/name.svg) repeat-x;
}
.pagination.ikuyo_pagination::before {
  background-color: #ff4637;
}
.pagination.ikuyo_pagination::after {
  background: url(/tv/assets/img/page/character/ikuyo/name.svg) repeat-x;
}
.pagination_block {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
}
@media (min-width: 835px) {
  .pagination_block {
    height: 75px;
  }
}
.pagination_block .name_icon {
  display: inline-block;
  height: 6.9vw;
  margin: 0 8.2vw;
}
@media (min-width: 835px) {
  .pagination_block .name_icon {
    height: 34px;
    margin: 0 27px;
  }
}
.pagination_block .arrow_icon {
  display: none;
}
@media (min-width: 835px) {
  .pagination_block .arrow_icon {
    transition: all 0.3s ease;
    display: inline-block;
    width: 20px;
  }
}
@media (min-width: 835px) {
  .pagination_block .arrow_icon:hover {
    transform: translateX(-5px);
  }
}
@media (min-width: 835px) {
  .pagination_block .arrow_icon.-next:hover {
    transform: translateX(5px);
  }
}
.pagination::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  display: block;
  height: 10.67vw;
  width: 100%;
}
@media (min-width: 835px) {
  .pagination::before {
    height: 75px;
  }
}
.pagination::after {
  animation: chara_txtmove 15s 0s linear infinite;
  content: "";
  width: 100%;
}
@media (max-width: 834px) {
  .pagination::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 3.64vw;
  }
}
@media (min-width: 835px) {
  .pagination::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
  }
}

.profile {
  position: relative;
  z-index: 1;
}
.profile_part {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 835px) {
  .profile_part {
    flex-direction: row;
    min-height: 504px;
  }
}
.profile_block {
  clip-path: inset(0 100% 0 0);
  transition: all 0.5s 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.-ready .profile_block {
  clip-path: inset(0 0 0 0);
}
@media (max-width: 834px) {
  .profile_block {
    margin: 2.6vw 0 0 8.33vw;
    width: 49.73vw;
  }
}
@media (min-width: 835px) {
  .profile_block {
    padding: 80px 0;
    width: 50%;
  }
}
.profile_block h2 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 3.12vw;
}
@media (min-width: 835px) {
  .profile_block h2 {
    margin: 0;
    padding-bottom: 20px;
    width: 50%;
  }
}
.profile_block h2 img {
  width: 49.47vw;
}
@media (min-width: 835px) {
  .profile_block h2 img {
    width: 316px;
  }
}
.profile_block p {
  font-size: 0.8125rem;
  color: #fff;
  line-height: 1.6923076923;
  padding-top: 2.34vw;
}
@media (min-width: 835px) {
  .profile_block p {
    font-size: 0.875rem;
    padding-top: 14px;
    width: 50%;
  }
}
.profile_avatar {
  position: relative;
  align-items: flex-start;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
@media (min-width: 835px) {
  .profile_avatar {
    aspect-ratio: 640/387;
    height: auto;
    width: 50%;
  }
}
.profile_avatar img {
  opacity: 0;
  transform: translate(0, 5%);
}
.-ready .profile_avatar img {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.6s 0.7s ease;
}
.profile_avatar .txt1 {
  animation: chara_serifshow 5s 0s ease infinite;
  opacity: 0;
}
.profile_avatar .txt2 {
  animation: chara_serifshow 5s 2.5s ease infinite;
  opacity: 0;
}
@media (min-width: 835px) {
  .profile_avatar.hitori_avatar .txt1 {
    position: absolute;
    top: 46.5%;
    left: 21.2%;
    width: 15.9%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.hitori_avatar .txt2 {
    position: absolute;
    top: 8.2%;
    left: 67.8%;
    width: 15.6%;
  }
}
@media (max-width: 834px) {
  .profile_avatar.hitori_avatar .middle_txt {
    margin: 0 0 8.33vw 6.51vw;
  }
}
@media (min-width: 835px) {
  .profile_avatar.hitori_avatar .middle_txt {
    position: absolute;
    top: -15.8%;
    left: 22.8%;
    width: 42.9%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ryo_avatar .txt1 {
    position: absolute;
    top: 48%;
    left: 23.1%;
    width: 15.9%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ryo_avatar .txt2 {
    position: absolute;
    top: 8.2%;
    left: 67.8%;
    width: 15.6%;
  }
}
@media (max-width: 834px) {
  .profile_avatar.ryo_avatar .middle_txt {
    margin: 0 0 8.33vw 6.51vw;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ryo_avatar .middle_txt {
    position: absolute;
    top: -11.9%;
    left: 22.8%;
    width: 42.9%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.nijika_avatar .txt1 {
    position: absolute;
    top: 10.8%;
    left: 20.9%;
    width: 11.5%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.nijika_avatar .txt2 {
    position: absolute;
    top: 37.2%;
    left: 75.3%;
    width: 10%;
  }
}
@media (max-width: 834px) {
  .profile_avatar.nijika_avatar .middle_txt {
    margin: 0 0 8.33vw 6.51vw;
  }
}
@media (min-width: 835px) {
  .profile_avatar.nijika_avatar .middle_txt {
    position: absolute;
    top: -15%;
    left: 33.5%;
    width: 41.2%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ikuyo_avatar .txt1 {
    position: absolute;
    top: 12.1%;
    left: 17.5%;
    width: 14.3%;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ikuyo_avatar .txt2 {
    position: absolute;
    top: 37.2%;
    left: 75.3%;
    width: 10%;
  }
}
@media (max-width: 834px) {
  .profile_avatar.ikuyo_avatar .middle_txt {
    margin: 0 0 8.33vw 6.51vw;
  }
}
@media (min-width: 835px) {
  .profile_avatar.ikuyo_avatar .middle_txt {
    position: absolute;
    top: -15%;
    left: 33.5%;
    width: 41.2%;
  }
}

@keyframes chara_txtmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -281px 0;
  }
}
@keyframes chara_serifshow {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(0, -20%) scale(1);
  }
}