.character .under__wrap {
  padding: 26.6666666667vw 0;
}
@media only screen and (min-width: 768px) {
  .character .under__wrap {
    padding: 11.1111111111vw 0vw 6.25vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character .under__wrap {
    padding: 213.3333333333px 0px 120px;
  }
}
.character__school {
  width: 97.3333333333vw;
  margin: 0 auto;
  padding: 16.6666666667vw 0 21.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .character__school {
    padding-left: 38.5px;
  }
}
@media (min-width: 1280px) {
  .character__school {
    padding-left: 55px;
  }
}
@media (min-width: 1920px) {
  .character__school {
    padding-left: 66px;
  }
}
@media (min-width: 768px) {
  .character__school {
    padding-right: 38.5px;
  }
}
@media (min-width: 1280px) {
  .character__school {
    padding-right: 55px;
  }
}
@media (min-width: 1920px) {
  .character__school {
    padding-right: 66px;
  }
}
@media only screen and (min-width: 768px) {
  .character__school {
    padding-top: 4.1666666667vw;
    padding-bottom: 5.5555555556vw;
    width: calc(100% - 2.7777777778vw);
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school {
    padding-bottom: 106.6666666667px;
  }
}
.character__school::before {
  content: "";
  position: relative;
  top: -16.6666666667vw;
  left: 50%;
  display: block;
  width: 100%;
  height: 0.6666666667vw;
  background-color: #9f9f9f;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
@media (min-width: 768px) {
  .character__school::before {
    height: 2.8px;
  }
}
@media (min-width: 1280px) {
  .character__school::before {
    height: 4px;
  }
}
@media (min-width: 1920px) {
  .character__school::before {
    height: 4.8px;
  }
}
@media only screen and (min-width: 768px) {
  .character__school::before {
    width: 97.2222222222vw;
    top: -4.1666666667vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school::before {
    width: 1866.6666666667px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school::before {
    top: -80px;
  }
}
@media (width >= 1920px) {
  .character__school::before {
    width: 97.2222222222vw;
  }
}
.character__school::after {
  content: "";
  position: relative;
  top: 21.3333333333vw;
  left: 50%;
  display: block;
  width: 100%;
  height: 0.6666666667vw;
  background-color: #9f9f9f;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
@media (min-width: 768px) {
  .character__school::after {
    height: 2.8px;
  }
}
@media (min-width: 1280px) {
  .character__school::after {
    height: 4px;
  }
}
@media (min-width: 1920px) {
  .character__school::after {
    height: 4.8px;
  }
}
@media only screen and (min-width: 768px) {
  .character__school::after {
    width: 97.2222222222vw;
    top: 5.5555555556vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school::after {
    width: 1866.6666666667px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school::after {
    top: 106.6666666667px;
  }
}
@media (width >= 1920px) {
  .character__school::after {
    width: 97.2222222222vw;
  }
}
.character__school:not(:first-of-type) {
  margin-top: 21.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .character__school:not(:first-of-type) {
    margin-top: 4.8611111111vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school:not(:first-of-type) {
    margin-top: 93.3333333333px;
  }
}
.character__school-wrap {
  position: relative;
  margin: 0 auto;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 H 100 V 100 H 100 A 300 300 0 0 1 0 0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 H 100 V 100 H 100 A 300 300 0 0 1 0 0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-size: 0% 0%;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
  .character__school-wrap {
    padding: 0 5.3333333333vw;
    overflow: hidden;
  }
}
@media only screen and (min-width: 768px) {
  .character__school-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    mask-size: 20% 0%;
    gap: 0;
    width: 88.8888888889vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school-wrap {
    width: 1706.6666666667px;
  }
}
.character__school-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3333333333vw;
}
@media (min-width: 768px) {
  .character__school-head {
    gap: 17.5px;
  }
}
@media (min-width: 1280px) {
  .character__school-head {
    gap: 25px;
  }
}
@media (min-width: 1920px) {
  .character__school-head {
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .character__school-head {
    flex-shrink: 0;
    margin-left: 6.25vw;
    margin-right: 6.25vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school-head {
    margin-left: 120px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school-head {
    margin-right: 120px;
  }
}
.character__school-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  pointer-events: none;
}
.character__school-overlay-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../img/common/bg_gradient_character.webp") no-repeat center center/100% 100%;
  opacity: 1;
  transform: scale(1.24);
  pointer-events: none;
  will-change: mask-size;
  inset: 0;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100 100 A 300 300 0 0 1 0 0' stroke='%23000' stroke-width='28' fill='none'/%3E%3C/svg%3E");
  mask-size: 0% 0%;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .character__school-overlay-inner {
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 100 100 A 300 300 0 0 1 0 0' stroke='%23000' stroke-width='24' fill='none'/%3E%3C/svg%3E");
    mask-size: 20% 0%;
    mask-position: 100% 0%;
    transform: scale(1.2);
  }
}
.character__school.is-revealed {
  background-color: #ffffff;
  transition: background-color 0.4s cubic-bezier(0.61, 0.16, 0.14, 0.975);
  transition-delay: 0.6s;
}
.character__school.is-revealed::before {
  transition: clip-path 0.6s ease-in-out;
  transition-delay: 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@media only screen and (min-width: 768px) {
  .character__school.is-revealed::before {
    transition: clip-path 0.8s ease-in-out;
  }
}
.character__school.is-revealed::after {
  transition: clip-path 0.6s ease-in-out;
  transition-delay: 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@media only screen and (min-width: 768px) {
  .character__school.is-revealed::after {
    transition: clip-path 0.8s ease-in-out;
  }
}
.character__school.is-revealed .character__school-overlay-inner {
  mask-size: 280% 160%;
  mask-position: 100% 0%;
  transition: mask-size 2s cubic-bezier(0.61, 0.16, 0.14, 0.975), mask-position 2s cubic-bezier(0.61, 0.16, 0.14, 0.975), transform 2s cubic-bezier(0.98, 0.045, 0.995, 0.46);
}
@media only screen and (min-width: 768px) {
  .character__school.is-revealed .character__school-overlay-inner {
    transition: mask-size 2.4s cubic-bezier(0.61, 0.16, 0.14, 0.975), mask-position 2.4s cubic-bezier(0.61, 0.16, 0.14, 0.975), transform 2.4s cubic-bezier(0.98, 0.045, 0.995, 0.46);
    transform: scale(1);
    mask-size: 170% 300%;
    mask-position: 100% 0%;
  }
}
.character__school.is-revealed .character__school-wrap {
  mask-size: 300% 160%;
  mask-position: 100% 0%;
  transition: all 2s cubic-bezier(0.61, 0.16, 0.14, 0.975);
}
@media only screen and (min-width: 768px) {
  .character__school.is-revealed .character__school-wrap {
    mask-size: 170% 300%;
    mask-position: 100% 0%;
    transition: all 2.4s cubic-bezier(0.61, 0.16, 0.14, 0.975);
  }
}
.character__school-logo {
  width: 20vw;
}
@media only screen and (min-width: 768px) {
  .character__school-logo {
    width: 8.3333333333vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__school-logo {
    width: 160px;
  }
}
.character__school-logo img {
  width: 100%;
  height: auto;
}
.character__school-logo.logo-1 {
  width: 16vw;
  mask-image: url("../img/chara/school_logo_1.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .character__school-logo.logo-1 {
    width: 56px;
  }
}
@media (min-width: 1280px) {
  .character__school-logo.logo-1 {
    width: 80px;
  }
}
@media (min-width: 1920px) {
  .character__school-logo.logo-1 {
    width: 96px;
  }
}
.character__school-logo.logo-2 {
  width: 13.3333333333vw;
  mask-image: url("../img/chara/school_logo_2.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .character__school-logo.logo-2 {
    width: 52.5px;
  }
}
@media (min-width: 1280px) {
  .character__school-logo.logo-2 {
    width: 75px;
  }
}
@media (min-width: 1920px) {
  .character__school-logo.logo-2 {
    width: 90px;
  }
}
.character__school-logo.logo-3 {
  width: 10.6666666667vw;
  mask-image: url("../img/chara/school_logo_3.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .character__school-logo.logo-3 {
    width: 42px;
  }
}
@media (min-width: 1280px) {
  .character__school-logo.logo-3 {
    width: 60px;
  }
}
@media (min-width: 1920px) {
  .character__school-logo.logo-3 {
    width: 72px;
  }
}
.character__school-name {
  height: 9.3333333333vw;
  mask-size: 100% auto;
}
@media (min-width: 768px) {
  .character__school-name {
    height: 35px;
  }
}
@media (min-width: 1280px) {
  .character__school-name {
    height: 50px;
  }
}
@media (min-width: 1920px) {
  .character__school-name {
    height: 60px;
  }
}
.character__school-name.school-name-1 {
  mask-image: url("../img/chara/school_name_1.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
.character__school-name.school-name-2 {
  mask-image: url("../img/chara/school_name_2-2.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
.character__school-name.school-name-3 {
  mask-image: url("../img/chara/school_name_3.webp");
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
.character__school-name img {
  width: auto;
  height: 100%;
}
.character__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6666666667vw 1.3333333333vw;
  margin-top: 4vw;
}
@media only screen and (min-width: 768px) {
  .character__list {
    gap: 0;
    margin-top: 0;
    height: 31.25vw;
    margin-left: 0.6944444444vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__list {
    height: 600px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__list {
    margin-left: 13.3333333333px;
  }
}
@media only screen and (max-width: 767px) {
  .character__list-wrap {
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.character__list.list-1 .character__list-item:nth-of-type(1) {
  mask-image: url("../img/chara/1/benihime_mask.webp");
}
.character__list.list-1 .character__list-item:nth-of-type(1) .character__list-thumb::after {
  top: 50.25%;
  left: 50.5%;
  background-size: 99.25% 99.75%;
}
.character__list.list-1 .character__list-item:nth-of-type(2) {
  mask-image: url("../img/chara/1/kagami_mask.webp");
}
.character__list.list-1 .character__list-item:nth-of-type(2) .character__list-thumb::after {
  left: 50.5%;
  background-size: 99.25% 99.85%;
}
.character__list.list-1 .character__list-item:nth-of-type(3) {
  mask-image: url("../img/chara/1/nagi_mask.webp");
}
.character__list.list-1 .character__list-item:nth-of-type(3) .character__list-thumb::after {
  left: 50%;
  background-size: 99.25% 99.85%;
}
.character__list.list-1 .character__list-item:nth-of-type(4) {
  mask-image: url("../img/chara/1/komomo_mask.webp");
}
.character__list.list-1 .character__list-item:nth-of-type(4) .character__list-thumb::after {
  left: 50%;
  background-size: 99.25% 99.85%;
}
.character__list.list-1 .character__list-item:nth-of-type(5) {
  mask-image: url("../img/chara/1/hibiki_mask.webp");
}
.character__list.list-1 .character__list-item:nth-of-type(5) .character__list-thumb::after {
  background-size: 99.5% 99.85%;
}
.character__list.list-2 .character__list-item:nth-of-type(1) {
  mask-image: url("../img/chara/2/inori_mask.webp");
}
.character__list.list-2 .character__list-item:nth-of-type(1) .character__list-thumb::after {
  left: 49.75%;
  background-size: 99.5% 99.85%;
}
.character__list.list-2 .character__list-item:nth-of-type(2) {
  mask-image: url("../img/chara/2/touka_mask.webp");
}
.character__list.list-2 .character__list-item:nth-of-type(2) .character__list-thumb::after {
  background-size: 99.25% 99.85%;
}
.character__list.list-2 .character__list-item:nth-of-type(3) {
  mask-image: url("../img/chara/2/sara_mask.webp");
}
.character__list.list-2 .character__list-item:nth-of-type(3) .character__list-thumb::after {
  background-size: 99.5% 99.85%;
}
.character__list.list-2 .character__list-item:nth-of-type(4) {
  mask-image: url("../img/chara/2/aizen_mask.webp");
}
.character__list.list-2 .character__list-item:nth-of-type(4) .character__list-thumb::after {
  background-size: 99.5% 99.85%;
}
.character__list.list-2 .character__list-item:nth-of-type(5) {
  mask-image: url("../img/chara/2/hagiri_mask.webp");
}
.character__list.list-2 .character__list-item:nth-of-type(5) .character__list-thumb::after {
  left: 50.05%;
  background-size: 99.35% 99.85%;
}
.character__list.list-3 .character__list-item:nth-of-type(1) {
  mask-image: url("../img/chara/3/kira_mask.webp");
}
.character__list.list-3 .character__list-item:nth-of-type(1) .character__list-thumb::after {
  background-size: 99.25% 99.85%;
}
.character__list.list-3 .character__list-item:nth-of-type(2) {
  mask-image: url("../img/chara/3/hirasaka_mask.webp");
}
.character__list.list-3 .character__list-item:nth-of-type(2) .character__list-thumb::after {
  left: 49.2%;
  background-size: 99.5% 99.85%;
}
.character__list.list-3 .character__list-item:nth-of-type(3) {
  mask-image: url("../img/chara/3/gekko_mask.webp");
}
.character__list.list-3 .character__list-item:nth-of-type(3) .character__list-thumb::after {
  left: 49.75%;
  background-size: 99.25% 99.85%;
}
.character__list.list-3 .character__list-item:nth-of-type(4) {
  mask-image: url("../img/chara/3/senko_mask.webp");
}
.character__list.list-3 .character__list-item:nth-of-type(4) .character__list-thumb::after {
  background-size: 99.25% 99.85%;
}
.character__list.list-3 .character__list-item:nth-of-type(5) {
  mask-image: url("../img/chara/3/kuon_mask.webp");
}
.character__list.list-3 .character__list-item:nth-of-type(5) .character__list-thumb::after {
  left: 49.25%;
  background-size: 99.5% 99.85%;
}
.character__list-item {
  display: block;
  width: 27.3333333333vw;
  mask-size: 100% auto;
  mask-position: 100% 0%;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .character__list-item {
    margin: 0px -4.9px;
  }
}
@media (min-width: 1280px) {
  .character__list-item {
    margin: 0px -7px;
  }
}
@media (min-width: 1920px) {
  .character__list-item {
    margin: 0px -8.4px;
  }
}
@media only screen and (min-width: 768px) {
  .character__list-item {
    transition: transform 0.3s ease;
    width: 11.1111111111vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .character__list-item {
    width: 213.3333333333px;
  }
}
@media only screen and (min-width: 768px) {
  .character__list-item:nth-of-type(even) {
    margin-top: auto;
  }
}
@media only screen and (min-width: 768px) {
  .character__school.is-mask-cleared .character__list-item:hover {
    transform: translateY(-4%);
  }
}
@media only screen and (min-width: 768px) {
  .character__school.is-mask-cleared .character__list-thumb:hover::after {
    opacity: 1;
  }
}
.character__list-item.is-locked {
  cursor: default;
  pointer-events: none;
}
.character__list-item.is-locked .character__list-thumb:before {
  width: 102%;
}
.character__list-thumb {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .character__list-thumb {
    transition: all 300ms;
  }
  .character__figure:hover .character__list-thumb {
    opacity: 0.8;
  }
  .character__list-thumb::after {
    transition: all 300ms;
  }
}
.character__list-thumb img {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
}
.character__list-thumb:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent url("../img/chara/bg_gray.webp") no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .character__list-thumb:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: transparent url("../img/chara/bg_gradient.webp") no-repeat;
    background-position: 0% 0%;
    background-size: 99.75% 99.85%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}
/*# sourceMappingURL=sourcemaps/character.css.map */