.character_navi-list__item {
  opacity: 0;
  -webkit-transform: translateY(1.6rem);
  transform: translateY(1.6rem);
}
.is-open .character_navi-list__item {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0);
  -webkit-transition: opacity 0.6s ease-in, transform 0.8s ease-out;
  -webkit-transition: opacity 0.6s ease-in, -webkit-transform 0.8s ease-out;
  transition: opacity 0.6s ease-in, -webkit-transform 0.8s ease-out;
  transition: opacity 0.6s ease-in, transform 0.8s ease-out;
  transition: opacity 0.6s ease-in, transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
}
.is-open .character_navi-list__item:nth-child(1) {
  -webkit-transition-delay: 0.12s;
  transition-delay: 0.12s;
}
.is-open .character_navi-list__item:nth-child(2) {
  -webkit-transition-delay: 0.24s;
  transition-delay: 0.24s;
}
.is-open .character_navi-list__item:nth-child(3) {
  -webkit-transition-delay: 0.36s;
  transition-delay: 0.36s;
}
.is-open .character_navi-list__item:nth-child(4) {
  -webkit-transition-delay: 0.48s;
  transition-delay: 0.48s;
}
.is-open .character_navi-list__item:nth-child(5) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.is-open .character_navi-list__item:nth-child(6) {
  -webkit-transition-delay: 0.72s;
  transition-delay: 0.72s;
}

.character_detail .character_inner .character_detail-image .character_detail-catch {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  -webkit-transition: clip-path 0.6s ease-in-out;
  -webkit-transition: -webkit-clip-path 0.6s ease-in-out;
  transition: -webkit-clip-path 0.6s ease-in-out;
  transition: clip-path 0.6s ease-in-out;
  transition: clip-path 0.6s ease-in-out, -webkit-clip-path 0.6s ease-in-out;
}
.character_detail .character_inner .character_detail-image figure {
  opacity: 0;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: opacity 0.6s ease-out, transform 2s ease-out;
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 2s ease-out;
  transition: opacity 0.6s ease-out, -webkit-transform 2s ease-out;
  transition: opacity 0.6s ease-out, transform 2s ease-out;
  transition: opacity 0.6s ease-out, transform 2s ease-out, -webkit-transform 2s ease-out;
}
.character_detail .character_inner .character_detail-name .-ruby,
.character_detail .character_inner .character_detail-name .-name,
.character_detail .character_inner .character_detail-name .-cv {
  opacity: 0;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  filter: blur(4px);
  -webkit-transform: translateX(2rem);
  transform: translateX(2rem);
  -webkit-transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transition: opacity 0.6s ease-in, -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1), -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
}
.character_detail .character_inner .character_detail-name .-name {
  -webkit-transition-delay: 0.24s;
  transition-delay: 0.24s;
}
.character_detail .character_inner .character_detail-name .-cv {
  -webkit-transition-delay: 0.48s;
  transition-delay: 0.48s;
}
.character_detail .character_inner .character_detail-text {
  opacity: 0;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  filter: blur(4px);
  -webkit-transform: translateX(2rem);
  transform: translateX(2rem);
  -webkit-transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transition: opacity 0.6s ease-in, -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  transition: opacity 0.6s ease-in, filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), transform 0.8s cubic-bezier(0.5, 1, 0.89, 1), -webkit-filter 0.92s cubic-bezier(0.32, 0, 0.67, 0), -webkit-transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
  -webkit-transition-delay: 0.52s;
  transition-delay: 0.52s;
}
.character_detail.swiper-slide-active .character_detail-image .character_detail-catch {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.character_detail.swiper-slide-active .character_detail-image figure {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.character_detail.swiper-slide-active .character_detail-name .-ruby,
.character_detail.swiper-slide-active .character_detail-name .-name,
.character_detail.swiper-slide-active .character_detail-name .-cv {
  opacity: 1;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transform: translate(0);
  transform: translate(0);
}
.character_detail.swiper-slide-active .character_detail-text {
  opacity: 1;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.chara_contents {
  margin-top: min(60px, 8vw);
  padding-bottom: min(190px, 25.33vw);
}
.chara_contents .character_navi {
  margin-bottom: min(85px, 14.66vw);
}
.chara_contents .character_navi ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: min(30px, 2.66vw);
}
@media only screen and (max-width:960px) {
  .chara_contents .character_navi ul {
    width: 89.33vw;
    margin: auto;
  }
}
.chara_contents .character_navi-list__item {
  width: 140px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_navi-list__item {
    width: calc(33% - 2vw);
  }
}
.chara_contents .character_navi-list__item.-madoka {
  background: var(--color-chara-madoka);
}
.chara_contents .character_navi-list__item.-homura {
  background: var(--color-chara-homura);
}
.chara_contents .character_navi-list__item.-mami {
  background: var(--color-chara-mami);
}
.chara_contents .character_navi-list__item.-sayaka {
  background: var(--color-chara-sayaka);
}
.chara_contents .character_navi-list__item.-qb {
  background: var(--color-chara-qb);
}
.chara_contents .character_navi-list__item.-kyoko {
  background: var(--color-chara-kyoko);
}
.chara_contents .character_navi-list__item:before, .chara_contents .character_navi-list__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.chara_contents .character_navi-list__item:before {
  background: var(--color-pink);
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.chara_contents .character_navi-list__item:after {
  background: url("../img/_in/select_txt.png") no-repeat center;
  background-size: 80%;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  -webkit-animation: rote_image 20s linear infinite;
  animation: rote_image 20s linear infinite;
}
.chara_contents .character_navi-list__item.is-current:before {
  opacity: 0.8;
}
.chara_contents .character_navi-list__item.is-current:after {
  opacity: 1;
}
@media only screen and (min-width:961px) {
  .chara_contents .character_navi-list__item {
    cursor: pointer;
  }
  .chara_contents .character_navi-list__item:hover:before {
    opacity: 0.8;
  }
}
.chara_contents .character_container {
  width: 980px;
  width: 70%;
  max-width: 1200px;
  margin: auto;
  position: relative;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_container {
    width: 100vw;
  }
}
.chara_contents .character_container .character_pager {
  position: relative;
  z-index: 15;
}
.chara_contents .character_container .character_pager-prev, .chara_contents .character_container .character_pager-next {
  border: 1px solid var(--color-gold);
  width: 80px;
  width: 5rem;
  height: 80px;
  height: 5rem;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  -webkit-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_container .character_pager-prev, .chara_contents .character_container .character_pager-next {
    width: 10.66vw;
    height: 10.66vw;
  }
}
.chara_contents .character_container .character_pager-prev .-icon, .chara_contents .character_container .character_pager-next .-icon {
  width: 16px;
  width: 1rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: calc(50% - 0.5rem);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.chara_contents .character_container .character_pager-prev .-icon .svg_icon, .chara_contents .character_container .character_pager-next .-icon .svg_icon {
  fill: var(--color-gold);
}
.chara_contents .character_container .character_pager-prev .-icon, .chara_contents .character_container .character_pager-next .-icon {
  -webkit-transition: left 0.2s ease-out;
  transition: left 0.2s ease-out;
}
.chara_contents .character_container .character_pager-prev .-icon .svg_icon, .chara_contents .character_container .character_pager-next .-icon .svg_icon {
  -webkit-transition: fill 0.2s ease-out;
  transition: fill 0.2s ease-out;
}
.chara_contents .character_container .character_pager-prev:hover, .chara_contents .character_container .character_pager-next:hover {
  background: var(--color-gold);
}
.chara_contents .character_container .character_pager-prev:hover .-icon, .chara_contents .character_container .character_pager-next:hover .-icon {
  left: 30%;
}
.chara_contents .character_container .character_pager-prev:hover .-icon .svg_icon, .chara_contents .character_container .character_pager-next:hover .-icon .svg_icon {
  fill: #fff;
}
.chara_contents .character_container .character_pager-next .-icon {
  -webkit-transform: rotateY(180deg) translateY(-50%);
  transform: rotateY(180deg) translateY(-50%);
}
.chara_contents .character_container .character_pager-next:hover .-icon {
  left: 50%;
}
@media only screen and (min-width:961px) {
  .chara_contents .character_container .character_pager {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
  }
}
@media only screen and (max-width:960px) {
  .chara_contents .character_container .character_pager {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 6.66vw;
  }
}
.chara_contents .character_detail {
  position: relative;
}
.chara_contents .character_detail-image {
  position: relative;
}
.chara_contents .character_detail-catch {
  position: absolute;
  top: 0;
  left: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  z-index: 3;
  padding-left: 10px;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-catch {
    right: 1.33vw;
  }
}
.chara_contents .character_detail-catch .-line1 {
  margin-right: 16px;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-catch .-line1 {
    margin-right: 12px;
  }
}
.chara_contents .character_detail-catch .-line1 div {
  position: relative;
  line-height: 0.9;
  letter-spacing: 0.08em;
  color: #FFF;
  font-size: 28.8px;
  font-size: 1.8rem;
}
.chara_contents .character_detail-catch .-line1 div p {
  display: inline-block;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  padding: 0.6em 0;
}
.chara_contents .character_detail-catch .-line1 div span.-text-line {
  letter-spacing: -0.06em;
  margin-bottom: 0.12em;
}
.chara_contents .character_detail-catch .-line1 div:before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 27px;
  background: var(--color-pink);
  top: 0;
  left: calc(50% - 13px);
  z-index: -1;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-catch .-line1 div:before {
    width: 1.8rem;
    left: calc(50% - 0.84rem);
  }
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-catch .-line1 div {
    font-size: 1.2rem;
  }
}
.chara_contents .character_detail-name {
  color: var(--color-pink);
  margin-bottom: 64px;
  margin-bottom: 4rem;
}
.chara_contents .character_detail-name .-ruby {
  font-family: var(--font-en);
  font-size: 28.8px;
  font-size: 1.8rem;
  margin-bottom: 19.2px;
  margin-bottom: 1.2rem;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-name .-ruby {
    font-size: 1.6rem;
  }
}
.chara_contents .character_detail-name .-name {
  font-size: 80px;
  font-size: 5rem;
  margin-bottom: 32px;
  margin-bottom: 2rem;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-name .-name {
    font-size: 3.6rem;
  }
}
.chara_contents .character_detail-name .-cv {
  font-size: 28.8px;
  font-size: 1.8rem;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-name .-cv {
    font-size: 1.6rem;
  }
}
.chara_contents .character_detail-text {
  line-height: 2;
  font-size: 22.4px;
  font-size: 1.4rem;
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail-text {
    font-size: 1.28rem;
  }
}
@media only screen and (min-width:961px) {
  .chara_contents .character_detail .character_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .chara_contents .character_detail .character_detail-image {
    width: min(70%, 600px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 4%;
  }
  .chara_contents .character_detail .character_detail-info {
    padding-top: 130px;
  }
}
@media only screen and (max-width:960px) {
  .chara_contents .character_detail .character_detail-image {
    margin-bottom: 8vw;
    overflow: hidden;
  }
  .chara_contents .character_detail .character_detail-image figure {
    width: 104vw;
    position: relative;
    left: -9.34vw;
  }
  .chara_contents .character_detail .character_detail-info {
    width: 89.33vw;
    margin: auto;
  }
  .chara_contents .character_detail .character_detail-catch .-line1 {
    width: 1em;
  }
}