.catch {
  background: #000;
  padding-bottom: 7.5rem;
}

.catch__txt {
  color: rgba(179, 179, 179, 0.73);
  padding-left: 1.125rem;
}
.catch__txt .catch__txt__line1,
.catch__txt .catch__txt__line2 {
  justify-content: center;
  align-items: baseline;
  display: flex;
  width: 46.875rem;
}
.catch__txt .catch__txt__line2 {
  margin-top: 0.625rem;
}
@media (min-width: 960px) {
  .catch__txt .catch__txt__line2 {
    margin-top: 0.375rem;
  }
}
.catch__txt p {
  line-height: 1;
}
.catch__txt .normal {
  font-weight: 700;
  font-size: 2.90625rem;
  transform: scaleX(0.7);
}
.catch__txt .size54 {
  font-weight: 700;
  font-size: 3.375rem;
  letter-spacing: -0.06em;
  transform: scaleX(0.7);
}
.catch__txt .size48 {
  font-weight: 900;
  font-size: 3rem;
  transform: scaleX(0.9);
}
.catch__txt .size59 {
  font-weight: 900;
  font-size: 3.6875rem;
  transform: scaleX(0.9);
}
.catch__txt .size78 {
  font-weight: 800;
  font-size: 4.875rem;
  letter-spacing: -0.03em;
}
.catch__txt .size28 {
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
}
.catch__txt .txt2 {
  margin-left: -0.625rem;
}
.catch__txt .txt4 {
  margin-left: -0.625rem;
}
.catch__txt .txt4 {
  letter-spacing: -0.01em;
}
.catch__txt .txt6 {
  margin-left: -2.25rem;
}
.catch__txt .txt9 {
  letter-spacing: -0.05em;
}
.catch__txt .txt10 {
  margin-left: -5.125rem;
}
.catch__txt .txt11 {
  letter-spacing: -0.08em;
  margin-left: -2.375rem;
}
.catch__txt .txt12 {
  margin-left: -2.875rem;
}

.character {
  height: 116.4375rem;
  position: relative;
}

.character__cont {
  position: absolute;
  inset: 0;
  padding: 87.5rem 6.25rem 0;
  transition: opacity 0.3s 0.3s;
}
.character__cont:not(.-active) {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

.character__upper {
  position: absolute;
  top: 12.8125rem;
  left: 3.09375rem;
}

.character__name {
  color: #cccccc;
  font-size: 4.875rem;
  font-weight: bold;
  line-height: 0.8205128205;
  letter-spacing: -0.05em;
}
.character__name .-row {
  transform-origin: left;
  display: inline-block;
  transform: scaleX(0.7);
}
.character__name .-comma {
  display: inline-block;
  margin-left: -.75rem;
  margin-right: 0.5rem;
  translate: 0.25em;
}
.character__name .-dot {
  letter-spacing: -0.25em;
}

.character__cv {
  transform-origin: left;
  color: rgba(179, 179, 179, 0.73);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  mix-blend-mode: exclusion;
  transform: scaleX(0.7);  
}
.character__cv span {
  display: inline-block;
}

.character__ph,
.character__ico {
  transition: scale 0.3s 0.3s;
}
.character__cont:not(.-active) .character__ph,
.character__cont:not(.-active) .character__ico {
  filter: grayscale(1);
  scale: 1.05;
  transition-delay: 0s;
}

.character__ph {
  position: absolute;
  top: 1.125rem;
  left: 11.6875rem;
  width: 35.4375rem;
}

.character__lower {
  position: absolute;
  top: 46.6875rem;
  left: 8.125rem;
  width: 14.375rem;
}

.character__ico + .character__ico {
  margin-top: 1.25rem;
}

.character__nav {
  -moz-column-gap: 3.875rem;
       column-gap: 3.875rem;
  display: flex;
  justify-content: center;
  margin-top: 3.125rem;
}

.character__nav__btn {
  width: 3.5rem;
}
.character__nav__btn:before {
  aspect-ratio: 56/62;
  background-color: #b3b3b3;
  clip-path: polygon(0 3%, 3% 0, 100% 50%, 3% 100%, 0 97%, 92% 50%);
  content: "";
  display: block;
}
.character__nav__btn.-prev {
  scale: -1;
}

.character__txt {
  color: #b3b3b3;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.025em;
  line-height: 1.5;
  scale: 0.8 1;
  transform-origin: left;
  width: 125%;
}

.character__side {
  position: absolute;
  top: 24.0625rem;
  left: -0.125rem;
  z-index: 0;
}

.character__side__btn {
  background-color: #000;
  position: relative;
  width: 6.1875rem;
}
.character__side__btn img {
  transition: 0.3s;
}
.character__side__btn + .character__side__btn {
  margin-top: -0.125rem;
}
.character__side__btn:before {
  position: absolute;
  inset: 0;
  border: 0.125rem solid #fff;
  content: "";
  transition: border-color 0.3s;
  z-index: 1;
}
.character__side__btn:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: url(../img/top/character/ico_target.svg);
  font-size: 0;
  mix-blend-mode: exclusion;
  pointer-events: none;
  transition: 0.3s;
  translate: -50% -50%;
  width: 6.9375rem;
  z-index: 2;
}
.character__side__btn:not(.-active) {
  z-index: -1;
}
.character__side__btn:not(.-active) img {
  filter: grayscale(1);
  opacity: 0.5;
}
.character__side__btn:not(.-active):before {
  border-color: #646464;
}
.character__side__btn:not(.-active):after {
  opacity: 0;
  scale: 1.5;
}

.goods {
  color: #b3b3b3;
}

.goods__list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.125rem 2.5rem;
  margin-top: 5rem;
}

.goods__item {
  color: #b3b3b3;
  text-align: justify;
  width: calc((100% - 2.5rem) / 2);
  word-break: break-all;
}

.goods__ph {
  position: relative;
}
.goods__ph img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.goods__ph:after {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  content: url(../img/common/ico/ico_open.svg);
  font-size: 0;
  width: 3.25rem;
}

.goods__ttl {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.3571428571;
  margin-top: 1rem;
  position: relative;
  padding-left: 1.375rem;
}
.goods__ttl::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: 0;
  width: 0.375rem;
  height: 90%;
  background-color: #b3b3b3;
}

.goods__price {
  font-size: 1.625rem;
  font-weight: bold;
  line-height: 1.3846153846;
  margin-top: 0.75rem;
}

.goods__txt {
  font-size: 1.625rem;
  line-height: 1.6923076923;
  margin-top: 0.5rem;
}

.info {
  margin-top: 5rem;
}
.info .c-acc_btn {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 2.1875rem;
}
.info .c-acc_btn a {
  background: url(../img/common/ico/ico_q.svg) no-repeat left center/2.625rem;
  color: #b3b3b3;
  font-size: 1.625rem;
  font-weight: bold;
  padding-left: 3.125rem;
  text-decoration: underline;
}
.info .c-acc_btn button {
  border-color: rgba(153, 153, 153, 0.5);
  color: #b3b3b3;
  padding: 0 1rem 0.1em 0;
  width: 11.625rem;
}
.info .c-acc_btn button:before, .info .c-acc_btn button:after {
  border-color: #b3b3b3;
  right: 1.75rem;
}

.info__web {
  margin-top: 3.75rem;
}

.info__brackets {
  color: #b3b3b3;
  display: grid;
  font-size: 2.5rem;
  font-weight: bold;
  height: 6.25rem;
  line-height: 1.25;
  padding-bottom: 0.1em;
  place-content: center;
  position: relative;
  text-align: center;
}
.info__brackets span {
  scale: 0.8 1;
}
.info__brackets:before, .info__brackets:after {
  position: absolute;
  inset: 0;
  border: 0.125rem solid rgba(153, 153, 153, 0.5);
  border-right: none;
  content: "";
  width: 1.25rem;
}
.info__brackets:after {
  left: auto;
  scale: -1;
}

.info__subttl {
  background-color: rgba(179, 179, 179, 0.2);
  color: #cccccc;
  display: grid;
  font-size: 2.25rem;
  font-weight: bold;
  height: 9.375rem;
  line-height: 1.3888888889;
  padding-bottom: 0.1em;
  place-content: center;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
.info__subttl strong {
  position: absolute;
  top: 0;
  left: 50%;
  color: #fff;
  font-size: 2.0625rem;
  font-weight: bold;
  line-height: 1.2333333333;
  padding: 0 0.5em 0.1em;
  scale: 0.7 1;
  transition: background-color 2s;
  translate: -50% -50%;
}
.info__subttl strong .splitdiv {
  mix-blend-mode: exclusion;
}
.info__subttl span,
.info__subttl time {
  scale: 0.8 1;
}
.info__subttl time {
  color: #b3b3b3;
}
.info__subttl:not(:first-child) {
  margin-top: 3.75rem;
}
.info__subttl.-reveal strong {
  background-color: #cccccc;
}
.novelty .info__subttl {
  height: 10.625rem;
  padding-top: 1.375rem;
}
.novelty .info__subttl span {
  font-size: 2.625rem;
  line-height: 1.1904761905;
}
.novelty .info__subttl sub {
  font-size: 2.25rem;
}
.novelty .info__subttl.--tall {
  height: 13.75rem;
}
.greeting .info__subttl {
  font-size: 2.5rem;
  line-height: 1.25;
}

.info__ph {
  margin-top: 3rem;
  position: relative;
}
.info__ph:after {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  content: url(../img/common/ico/ico_open.svg);
  font-size: 0;
  width: 3.25rem;
}

.info__txt {
  color: #cccccc;
  font-size: 1.625rem;
  line-height: 1.6923076923;
  margin-top: 1.5rem;
  text-align: justify;
  word-break: break-all;
}

.info__detail {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  color: #cccccc;
  display: flex;
  font-size: 1.625rem;
  justify-content: space-between;
  line-height: 1.6923076923;
  margin-top: 0.5625rem;
  padding-top: 0.4375rem;
  text-align: justify;
  word-break: break-all;
}
.info__detail:first-of-type {
  margin-top: 2.25rem;
}
.info__detail:last-of-type {
  border-bottom: 0.125rem solid rgba(153, 153, 153, 0.5);
  padding-bottom: 0.625rem;
}
.info__detail.-web {
  margin-top: 3.75rem;
}

.info__detail__ttl {
  width: 12.5rem;
}

.info__detail__txt {
  width: 24.375rem;
}
.info__detail__txt.-line span:not(:first-child) {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  margin-top: 0.5625rem;
  padding-top: 0.4375rem;
}

.info__detail__indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
.info__detail__indent * {
  text-indent: 0;
}

.info__note {
  color: #cccccc;
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-top: 1.625rem;
  text-align: justify;
  word-break: break-all;
}

.info__theater01 {
  color: #cccccc;
  font-size: 1.625rem;
  line-height: 1.5384615385;
  margin-top: 1.875rem;
  margin-bottom: -1.5rem;
  text-align: justify;
  word-break: break-all;
}

.info__theater02 {
  color: #cccccc;
  font-size: 1.625rem;
  line-height: 1.5384615385;
  margin-top: -0.9375rem;
  margin-bottom: -1.5rem;
  text-align: justify;
  word-break: break-all;
}

.info__theater03 {
  color: #cccccc;
  font-size: 1.625rem;
  line-height: 1.5384615385;
  margin-top: 2.5rem;
  margin-bottom: 0rem;
  text-align: justify;
  word-break: break-all;
}

.info__btn {
  margin-top: 1.875rem;
}
.info__btn a {
  align-items: center;
  border: 0.125rem solid rgba(153, 153, 153, 0.5);
  border-radius: 100vmax;
  color: #cccccc;
  display: flex;
  font-size: 1.875rem;
  font-weight: bold;
  height: 7.5rem;
  justify-content: center;
  padding-bottom: 0.1em;
  position: relative;
}
.info__btn a:after {
  position: absolute;
  top: 50%;
  right: 3.125rem;
  aspect-ratio: 1;
  border-right: 0.125rem solid #b3b3b3;
  border-top: 0.125rem solid #b3b3b3;
  content: "";
  rotate: 45deg;
  translate: 0 -50%;
  width: 1.75rem;
}
.theater .info__btn {
  margin-top: 2.5rem;
}

.js-splittext.-nowrap {
  white-space: nowrap;
}

.js-splittext2 {
  white-space: nowrap;
  font-size: 1.8rem;
}

.info__detail__txt.-line {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.info__detail__txt.-line span {
  padding-top: 0.4375rem;
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
}
.info__detail__txt.-line span:first-child {
  border-top: none;
  padding-top: 0;
}

.info__brackets {
  white-space: nowrap;
}

.info__brackets.-smallbrackets {
  height: 6.25rem;
  white-space: nowrap;
}
.info__brackets.-smallbrackets__blue {
  color: #4884b4;
}
.info__brackets.-smallbrackets__yellow {
  color: #c79649;
}
.info__brackets.-smallbrackets__purple {
  color: #745f9e;
}
.info__brackets.-smallbrackets__red {
  color: #a82f2b;
}
.info__brackets.-smallbrackets:before, .info__brackets.-smallbrackets:after {
  height: 6.25rem;
}

.info__brackets.-music {
  height: 7.5rem;
  margin-top: -1.5rem;
}
.info__brackets.-music span {
  background-color: transparent;
  font-size: 3.5rem;
  white-space: nowrap;
}
.info__brackets.-music sub {
  font-size: 2.5rem;
  margin-top: 0.375rem;
  white-space: nowrap;
}
.info__brackets.-music:before, .info__brackets.-music:after {
  height: 7.5rem;
}

.info__block {
  margin-top: 4.375rem;
}
@media (min-width: 960px) {
  .info__block {
    width: 100%;
  }
}

.info__block.-compact {
  margin-top: 3.75rem;
}

.info__block .info__detail:last-of-type {
  border-bottom: 0.125rem solid rgba(153, 153, 153, 0.5);
  padding-bottom: 0.625rem;
}

.info__music {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  color: #cccccc;
  display: flex;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  line-height: 1.5;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  scale: 0.8 1;
  text-align: justify;
  transform-origin: left;
  width: 125%;
  word-break: break-all;
}
.info__music:first-of-type {
  margin-top: 2.25rem;
}
.info__music:last-of-type {
  border-bottom: 0.125rem solid rgba(153, 153, 153, 0.5);
  padding-bottom: 0.4375rem;
}
.info__music.-web {
  margin-top: 3.75rem;
}

.info__music__ttl {
  padding-top: 0.4375rem;
}

.info__music__txt {
}

.info__music__txt.-line span:not(:first-child) {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  margin-top: 0.5rem;
  padding-top: 0.4375rem;
}

.introduction {
  background-color: rgba(179, 179, 179, 0.2);
  min-height: 87.25rem;
}

.introduction__head {
  text-align: center;
}

.introduction__head__shoulder {
  color: #fff;
  display: inline-block;
  font-size: 2.0625rem;
  font-weight: bold;
  line-height: 1.203030303;
  padding: 0 0.5em 0.1em;
  scale: 0.7 1;
  transition: background-color 2s;
}
.introduction__head__shoulder span {
  mix-blend-mode: exclusion;
}
.introduction__head__shoulder.-reveal {
  background-color: #cccccc;
}

.introduction__head__ttl {
  color: #cccccc;
  display: flex;
  font-size: 3rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.25;
  margin-top: 1rem;
  margin-bottom: 2rem;
  scale: 0.7 1;
  white-space: nowrap;
}

.introduction__txtwrap {
  padding: 0 6.25rem;
}

.introduction__txt {
  color: #b3b3b3;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  scale: 0.8 1;
  text-align: justify;
  transform-origin: left;
  width: 125%;
}
.introduction__txt:first-child {
  margin-top: 1.125rem;
}

.m-goods {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  overflow: auto;
}
.m-goods__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  overflow: visible;
  max-height: none;
}
@media (max-width: 959px) {
  .m-goods__inner {
    margin-top: 9.375rem;
    margin-bottom: 9.375rem;
  }
}
@media (min-width: 960px) {
  .m-goods__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    transform: translate(-45%, -50%);
  }
  .m-goods__inner.has-thumbnails {
    transform: translate(-45%, -68%);
  }
}
.m-goods__inner__novrlty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 960px) {
  .m-goods__inner__novrlty {
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    transform: translate(-45%, -68%);
  }
}
.m-goods__phwrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 960px) {
  .m-goods__phwrap {
    position: relative;
  }
}
.m-goods__ph {
  position: relative;
  height: auto;
  width: 36.25rem;
  flex-shrink: 0;
  flex-direction: column;
  text-align: initial;
  display: block;
  margin-bottom: 0.625rem;
}
@media (min-width: 960px) {
  .m-goods__ph {
    width: 440px;
    height: auto;
    margin-bottom: 0;
  }
}
.m-goods__body {
  width: 36.375rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.m-goods__desc {
  color: #b3b3b3;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.6923076923;
  text-align: left;
  width: 100%;
}
@media (min-width: 960px) {
  .m-goods__desc {
    width: 291px;
    font-size: 13px;
    line-height: 22px;
  }
}
.m-goods__spec {
  width: 100%;
}
@media (min-width: 960px) {
  .m-goods__spec {
    width: 291px;
  }
}
.m-goods__spec dl {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.m-goods__spec dl .spec__row {
  display: flex;
  align-items: flex-start;
  padding: 0.625rem 0;
  border-top: 1px solid rgba(179, 179, 179, 0.5);
}
@media (min-width: 960px) {
  .m-goods__spec dl .spec__row {
    padding: 4px 0;
  }
}
.m-goods__spec dl .spec__row:last-child {
  border-bottom: 1px solid rgba(179, 179, 179, 0.5);
}
.m-goods__spec dl .spec__row dt {
  flex: 0 0 11rem;
  color: #b3b3b3;
  font-size: 1.625rem;
  font-weight: 500;
  text-align: left;
}
@media (min-width: 960px) {
  .m-goods__spec dl .spec__row dt {
    flex: 0 0 90px;
    font-size: 13px;
  }
}
.m-goods__spec dl .spec__row dd {
  flex: 1;
  margin: 0;
  color: #b3b3b3;
  font-size: 1.625rem;
  font-weight: 500;
  text-align: left;
}
@media (min-width: 960px) {
  .m-goods__spec dl .spec__row dd {
    font-size: 13px;
  }
}
.m-goods__spec dl .spec__row dd div {
  padding: 0.375rem 0;
  border-top: 1px solid rgba(179, 179, 179, 0.5);
  width: 100%;
}
.m-goods__spec dl .spec__row dd div:first-child {
  border-top: none;
}

.detail__swiper {
  width: 100%;
}
@media (min-width: 960px) {
  .detail__swiper {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}
.detail__swiper .swiper-slide img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.detail__thumb {
  display: grid;
  grid-template-columns: repeat(3, 11.25rem);
  grid-template-rows: repeat(2, 11.25rem);
  gap: 1.25rem;
  margin-top: 1.25rem;
  text-align: left;
  position: relative;
  top: auto;
  transform: none;
}
@media (min-width: 960px) {
  .detail__thumb {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 1.25rem;
    grid-template-columns: repeat(3, 137px);
    grid-template-rows: repeat(2, 137px);
    gap: 1.25rem;
    justify-content: start;
  }
}
.detail__thumb__item {
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: border-color 0.3s, opacity 0.3s;
  box-sizing: border-box;
}
.detail__thumb__item.-active {
  opacity: 1;
  border-color: #fff;
}
.detail__thumb__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

@media (min-width: 960px) {
  .m-goods__inner__novrlty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -68%);
  }
}

@media (min-width: 960px) {
  .m-goods__inner__novrlty.-thumb6 {
    transform: translate(-45%, -89%) !important;
  }
}

.js-modal.-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.js-modal.-closing {
  opacity: 0;
}

.movie {
  position: relative;
}

.movie__wrapper {
  display: flex;
}

.movie__slide {
  flex-shrink: 0;
  position: relative;
}
.movie__slide img {
  height: 20.375rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.movie__slide:after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  content: "";
  pointer-events: none;
  transition: opacity 0.3s;
}
@media (min-width: 960px) {
  .movie__slide:hover:after {
    opacity: 0.3;
  }
}

.movie__txt {
  position: absolute;
  inset: 7.25rem 0 auto;
  background: url(../img/common/ico/ico_tri.svg) no-repeat center right 2.0625rem/1.5rem auto;
  border: 0.0625rem solid #b4b4b4;
  border-radius: 100vmax;
  color: #cccccc;
  display: grid;
  font-size: 1.5rem;
  font-weight: bold;
  height: 5.875rem;
  margin-inline: auto;
  place-content: center;
  pointer-events: none;
  width: 23.75rem;
}

.movie__pagination {
  -moz-column-gap: 1.375rem;
       column-gap: 1.375rem;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.movie__pagination .swiper-pagination-bullet {
  aspect-ratio: 1;
  background-color: #363636;
  border-radius: 50%;
  transition: background-color 0.3s;
  width: 1.125rem;
}
.movie__pagination .swiper-pagination-bullet.-active {
  background-color: #828282;
}
.movie__pagination.swiper-pagination-lock {
  display: none;
}

.music {
  margin-top: -9rem;
}

.music__ph {
  cursor: default;
  margin-top: 2.75rem;
  position: relative;
}

.music__head {
  text-align: center;
}

.music__head__shoulder {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.0625rem;
  font-weight: bold;
  line-height: 0.9;
  margin-top: 2.75rem;
  scale: 0.7 1;
  transition: background-color 2s;
}
@media (max-width: 959px) {
  .music__head__shoulder {
    padding: 0.6875rem 3.125rem 0.875rem;
  }
}
@media (min-width: 960px) {
  .music__head__shoulder {
    padding: 0.5rem 3.125rem 0.6875rem;
  }
}
.music__head__shoulder span {
  mix-blend-mode: exclusion;
}
.music__head__shoulder.-reveal {
  background-color: #cccccc;
}

.music__btn {
  margin-top: 2.75rem;
  margin-bottom: 3.125rem;
}
.music__btn a {
  align-items: center;
  border: 0.125rem solid rgba(153, 153, 153, 0.5);
  border-radius: 100vmax;
  color: #cccccc;
  display: flex;
  font-size: 1.875rem;
  font-weight: bold;
  height: 7.5rem;
  justify-content: center;
  padding-bottom: 0.1em;
  position: relative;
}
.music__btn a:after {
  position: absolute;
  top: 50%;
  right: 3.125rem;
  aspect-ratio: 1;
  border-right: 0.125rem solid #b3b3b3;
  border-top: 0.125rem solid #b3b3b3;
  content: "";
  rotate: 45deg;
  translate: 0 -50%;
  width: 1.75rem;
}

.music__shoulder {
  color: rgba(179, 179, 179, 0.73);
  display: flex;
  font-size: 1.625rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1.625rem;
  margin-left: 1.875rem;
}

.music__note {
  color: #cccccc;
  font-size: 1.625rem;
  line-height: 1.8333333333;
  margin-top: -0.75rem;
  text-align: justify;
  word-break: break-all;
}

.music__spacer {
  margin-left: 2.5rem;
  display: inline-block;
}

.top-news {
  position: relative;
}

.top-news__list {
  max-height: 34.375rem;
  overflow-y: auto;
  padding-right: 1.25rem;
}
.top-news__list.-reveal .top-news__item {
  animation: glitchIn 0.5s 0s 1 none;
}
.top-news__list::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0);
  border-radius: 20px;
  width: 0.625rem;
}
.top-news__list::-webkit-scrollbar-thumb {
  background-color: rgba(153, 153, 153, 0.2);
  border-radius: 20px;
}

.top-news__item {
  border-top: 0.125rem solid #999999;
}
.top-news__item:nth-child(1) {
  animation-delay: 0.15s !important;
}
.top-news__item:nth-child(2) {
  animation-delay: 0.3s !important;
}
.top-news__item:nth-child(3) {
  animation-delay: 0.45s !important;
}
.top-news__item:nth-child(4) {
  animation-delay: 0.6s !important;
}
.top-news__item:last-of-type {
  border-bottom: 0.125rem solid #999999;
}
.top-news__item a {
  transition: all 0.3s ease;
  position: relative;
  display: block;
  padding: 2.5rem 4.8125rem 2.5rem 0.375rem;
}
.top-news__item a::after {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  border-bottom: 0.25rem solid #b4b4b4;
  border-right: 0.25rem solid #b4b4b4;
  content: "";
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.2s;
  height: 1.25rem;
  width: 1.25rem;
}
@media (min-width: 960px) {
  .top-news__item a:hover {
    background: rgba(153, 153, 153, 0.2);
  }
}
@media (min-width: 960px) {
  .top-news__item a:hover::after {
    right: 5px;
  }
}
.top-news__item .date {
  position: relative;
  color: #b3b3b3;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-left: 1.25rem;
}
.top-news__item .date::before {
  left: 0;
}
.top-news__item .title {
  color: #b3b3b3;
  display: -webkit-box;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 0.6875rem;
  overflow: hidden;
  transform: scaleX(0.8);
  transform-origin: left;
  width: 125%;
}

.top-news__bottom {
  display: flex;
  justify-content: center;
}

.top-news__officialx {
  position: relative;
  border: 0.125rem solid #999999;
  border-radius: 9999px;
  color: #cccccc;
  font-size: 1.5rem;
  font-weight: 700;
  height: 5.8125rem;
  margin-top: 4.875rem;
  text-align: center;
  width: 23.75rem;
}
.top-news__officialx a {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.top-news__officialx .ico_x {
  background: #cccccc;
  display: inline-block;
  -webkit-mask: url(../img/common/ico/ico_x_logo.svg) no-repeat 0 0/contain;
          mask: url(../img/common/ico/ico_x_logo.svg) no-repeat 0 0/contain;
  height: 2.75rem;
  margin-left: 0.625rem;
  width: 2.9375rem;
}
.top-news__officialx::after {
  position: absolute;
  top: 50%;
  right: 2.375rem;
  border-bottom: 0.25rem solid #b4b4b4;
  border-right: 0.25rem solid #b4b4b4;
  content: "";
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.2s;
  height: 1.25rem;
  width: 1.25rem;
}

.section-between {
  position: relative;
  height: 20.4375rem;
  overflow: hidden;
}
.section-between::after {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  content: "";
  height: 100%;
  transition: opacity 0.2s 0s;
  width: 100%;
}

.section-between__ph {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeSlideShowAnm 15s infinite;
}
.section-between__ph img {
  scale: 1.2;
}
.section-between__ph img[src$="ph_4_3.jpg"] {
  transform-origin: top;
}

.section-between__ph:nth-of-type(1) {
  animation-delay: 0s;
}

.section-between__ph:nth-of-type(2) {
  animation-delay: 5s;
}

.section-between__ph:nth-of-type(3) {
  animation-delay: 10s;
}

@keyframes fadeSlideShowAnm {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  62.5% {
    opacity: 0;
  }
  66.67% {
    opacity: 0;
  }
  87.5% {
    opacity: 0;
  }
  91.67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.share {
  text-align: center;
}

.share__txt {
  position: relative;
  color: #b4b4b4;
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
}
.share__txt::before {
  top: 0.625rem;
}

.share__list {
  align-items: center;
  display: flex;
  gap: 0 4.25rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.share__list__item {
  height: 4.25rem;
  width: 4.25rem;
}

.share__list__link {
  background: #c8c8c8;
  display: block;
  height: 100%;
  -webkit-mask-position: top;
          mask-position: top;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: 100%;
}
.-x .share__list__link {
  -webkit-mask-image: url(../img/common/ico/ico_x.svg);
          mask-image: url(../img/common/ico/ico_x.svg);
}
.-instagram .share__list__link {
  -webkit-mask-image: url(../img/common/ico/ico_instagram.svg);
          mask-image: url(../img/common/ico/ico_instagram.svg);
}
.-facebook .share__list__link {
  -webkit-mask-image: url(../img/common/ico/ico_facebook.svg);
          mask-image: url(../img/common/ico/ico_facebook.svg);
}

.staff {
  position: relative;
  text-align: center;
}

.staff__item {
  line-height: 1;
}
.staff__item .role {
  position: relative;
  color: rgba(179, 179, 179, 0.73);
  display: flex;
  font-size: 1.65rem;
  font-weight: 700;
  justify-content: center;
  transform: scaleX(0.7);
  white-space: nowrap;
}
.staff__item .role span::before {
  transform: scaleX(1.3);
}
.staff__item .name {
  color: #cccccc;
  font-size: 3.75rem;
  font-weight: 700;
  margin-top: 0.625rem;
  transform: scaleX(0.7);
}
.staff__col .staff__item .name, [data-section=cast] .staff__item .name {
  font-size: 3.5rem;
  line-height: 1;
  margin-top: 0.25rem;
}
.staff__item .name.-kerning {
  letter-spacing: -0.04em;
}
.staff__item + .staff__item, .staff__col + .staff__item {
  margin-top: 4.375rem;
}

.staff__item[data-id=main_animator] .name .splitdiv:nth-of-type(12),
.staff__item[data-id=main_animator] .name .splitdiv:nth-of-type(27),
.staff__item[data-id=art_director] .name .splitdiv:nth-of-type(10),
.staff__item[data-id=director_of_photography] .name .splitdiv:nth-of-type(12)
 {
  margin: 0 0 1rem;
}

/* .staff__item[data-id=original] .name .splitdiv:nth-of-type(6),
.staff__item[data-id=original] .name .splitdiv:nth-of-type(7),
.staff__item[data-id=original] .name .splitdiv:nth-of-type(8),
.staff__item[data-id=original] .name .splitdiv:nth-of-type(9) {
  margin: 0 -0.1875rem;
} */
/* .staff__item[data-id=sound_director] .name .splitdiv:nth-of-type(4) {
  margin: 0 -0.4375rem;
}
.staff__item[data-id=animation_production] .name .splitdiv:nth-of-type(4) {
  margin-left: -0.4375rem;
}
.staff__item[data-id=distribution] .name .splitdiv:nth-of-type(6) {
  margin-left: -0.25rem;
}
.staff__item[data-id=distribution] .name .splitdiv:nth-of-type(7) {
  margin-left: -0.25rem;
} */

.staff__col {
  display: flex;
  justify-content: center;
  margin-top: 4.375rem;
}

.staff__col__item {
  width: 45%;
}

.team-up {
  position: relative;
  min-height: 65.25rem;
}

.team-up__head {
  text-align: center;
}

.team-up__head__shoulder {
  align-items: center;
  color: rgba(179, 179, 179, 0.73);
  display: flex;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
}

.team-up__head__ttl {
  align-items: center;
  color: #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 700;
  font-size: 4.0625rem;
  line-height: 1;
  margin-top: 1rem;
}
.team-up__head__ttl .item {
  display: inline-block;
  transform: scaleX(0.7);
}
.team-up__head__ttl .-item1 {
  transform-origin: center;
}
.team-up__head__ttl .-item2 {
  transform-origin: center;
}
.team-up__head__ttl .ico_cross {
  position: relative;
  display: inline-block;
  height: 1.875rem;
  margin: 1.125rem 0 0.625rem;
  width: 1.875rem;
  opacity: 0;
}
.team-up__head__ttl .ico_cross::before, .team-up__head__ttl .ico_cross::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  content: "";
  height: 0.0875rem;
  width: 2.6875rem;
}
.team-up__head__ttl .ico_cross::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.team-up__head__ttl .ico_cross::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes crossMove {
  from {
    opacity: 0;
    transform: rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}
.team-up__head__ttl.-reveal .ico_cross {
  animation: crossMove 0.6s 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

.team-up__txtwrap {
  padding-inline: 6.25rem;
}

.team-up__txt {
  color: #b3b3b3;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  scale: 0.8 1;
  text-align: justify;
  transform-origin: left;
  width: 125%;
}
.team-up__txt:first-child {
  margin-top: 2rem;
}

.ticket__inner {
  padding: 10rem 6.25rem 12.5rem;
}

.ticket__head__shoulder {
  color: rgba(179, 179, 179, 0.73);
  display: flex;
  font-size: 1.625rem;
  font-weight: bold;
  justify-content: center;
  line-height: 1;
}

.ticket__head__ttl {
  color: #cccccc;
  display: flex;
  font-size: 4.0625rem;
  font-weight: bold;
  justify-content: center;
  line-height: 1;
  margin-top: 1rem;
  scale: 0.7 1;
  white-space: nowrap;
}

.ticket__sec {
  margin-top: 5rem;
}

.ticket__subttl {
  background-color: rgba(179, 179, 179, 0.2);
  display: grid;
  height: 9.375rem;
  place-content: center;
}
.ticket__subttl span {
  color: #cccccc;
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.2888888889;
  padding-bottom: 0.1em;
  scale: 0.8 1;
  text-align: center;
}

.ticket__ph {
  margin-top: 3rem;
  padding: 0;
}
.ticket__ph.js-modal_open {
  position: relative;
}
.ticket__ph.js-modal_open:after {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  content: url(../img/common/ico/ico_open.svg);
  font-size: 0;
  width: 3.25rem;
}

.ticket__txt {
  color: #b3b3b3;
  font-size: 1.625rem;
  line-height: 1.6923076923;
  margin-top: 1.5rem;
  text-align: justify;
  word-break: break-all;
}

.ticket__detail {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  color: #b3b3b3;
  display: flex;
  font-size: 1.625rem;
  justify-content: space-between;
  line-height: 1.6923076923;
  margin-top: 0.5625rem;
  padding-top: 0.4375rem;
  text-align: justify;
  word-break: break-all;
}
.ticket__detail:first-of-type {
  border-top: none;
  margin-top: 1.75rem;
}

.ticket__detail__ttl {
  width: 9.875rem;
}

.ticket__detail__txt {
  width: 24.375rem;
}
.ticket__detail__txt.-line span:not(:first-child) {
  border-top: 0.125rem solid rgba(153, 153, 153, 0.5);
  margin-top: 0.5625rem;
  padding-top: 0.4375rem;
}

.ticket__detail__indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
.ticket__detail__indent * {
  text-indent: 0;
}

.ticket__detail__note {
  color: #b3b3b3;
  font-size: 1.5rem;
  line-height: 1.6666666667;
  margin-top: 1.5rem;
  text-align: justify;
  word-break: break-all;
}

.intro {
  position: fixed;
  top: 0;
  left: 0;
  color: #b3b3b3;
  height: 100%;
  pointer-events: none;
  transition: all 1s;
  visibility: visible;
  width: 100%;
  z-index: 9999;
}
@media (max-width: 959px) {
  .intro {
    background: url(../img/common/bg/bg_nrw.jpg) no-repeat top center/cover fixed;
  }
}
@media (min-width: 960px) {
  .intro {
    background: url(../img/common/bg/bg.jpg) repeat top center/1080px 1920px fixed;
  }
}
[data-loaded="1"] .intro {
  opacity: 0;
  transition: opacity 1s 3s ease;
}

.intro__inner {
  position: relative;
  height: 100%;
  width: 100%;
}

.intro__txt {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 899px;
    transform: translate(-50%, -50%);
    width: 147.5rem;
}

@media (max-width: 959px){
	.intro__txt {
    	max-width: 299px;
    	width: 36.875rem;
    }
}

.js-intro_txt {
  opacity: 0;
}
.js-intro_txt[data-active="1"] {
  opacity: 1;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  pointer-events: none;
}
[data-loaded="1"] .loader {
  opacity: 0;
  visibility: hidden;
  transition: all 1s 0s ease;
}

@keyframes divideIn {
  to {
    opacity: 1;
    scale: 1;
    transform: translate(0, 0);
  }
}
.mainvisual__ph__g {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.mainvisual__ph__g .channel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0;
  width: 100%;
}
.mainvisual__ph__g .divide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.mainvisual__ph__g .divide[data-pos="1"] {
  clip-path: polygon(0 0%, 100% 0%, 100% 20%, 0 20%);
  transform: translate(-5%, 0%);
}
.mainvisual__ph__g .divide[data-pos="2"] {
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  transform: translate(5%, 0%);
}
.mainvisual__ph__g .divide[data-pos="3"] {
  clip-path: polygon(0 40%, 100% 40%, 100% 65%, 0 65%);
  transform: translate(-5%, 0);
}
.mainvisual__ph__g .divide[data-pos="4"] {
  clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%);
  transform: translate(5%, 0);
}
.mainvisual__ph__g .divide[data-pos="5"] {
  clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
  transform: translate(-5%, 0);
}
[data-kvanim="1"] .mainvisual__ph__g .divide {
  opacity: 0;
  filter: grayscale(1);
  scale: 1.1;
}
[data-divideanim="1"] .mainvisual__ph__g .divide {
  animation: divideIn 1s cubic-bezier(1, 0, 0, 1) forwards;
}
[data-glitchanim="1"] .mainvisual__ph__g .channel {
  opacity: 1;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(-0.3189224526%, -0.0319474226%);
  }
  2% {
    transform: translate(0.4777416865%, -0.2089239655%);
  }
  4% {
    transform: translate(-0.1192086273%, 0.0823022645%);
  }
  6% {
    transform: translate(-0.0881826122%, 0.197420904%);
  }
  8% {
    transform: translate(0.1440217684%, 0.221433621%);
  }
  10% {
    transform: translate(0.1463667084%, -0.2091473786%);
  }
  12% {
    transform: translate(0.272284681%, 0.1390415482%);
  }
  14% {
    transform: translate(-0.1983719669%, 0.0269764701%);
  }
  16% {
    transform: translate(0.0696016928%, 0.2239723761%);
  }
  18% {
    transform: translate(-0.3190171359%, 0.0325211464%);
  }
  20%, 100% {
    transform: none;
  }
}
[data-glitchanim="1"] .mainvisual__ph__g .channel.r {
  animation: rgb-shift-r 2s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(-0.2890173075%, -0.230692847%);
  }
  2% {
    transform: translate(-0.0690208293%, 0.1114355844%);
  }
  4% {
    transform: translate(0.2234908857%, 0.2413554181%);
  }
  6% {
    transform: translate(-0.475958673%, 0.050279581%);
  }
  8% {
    transform: translate(-0.4738942863%, 0.24819877%);
  }
  10% {
    transform: translate(0.031628304%, -0.1829555432%);
  }
  12% {
    transform: translate(0.014765282%, -0.0956439416%);
  }
  14% {
    transform: translate(0.4226268683%, -0.0234344101%);
  }
  16% {
    transform: translate(-0.2206704767%, -0.1485894321%);
  }
  18% {
    transform: translate(0.0809694383%, -0.1424742005%);
  }
  20%, 100% {
    transform: none;
  }
}
[data-glitchanim="1"] .mainvisual__ph__g .channel.g {
  animation: rgb-shift-g 2s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(-0.0253770471%, 0.2341947164%);
  }
  2% {
    transform: translate(-0.033878568%, -0.0810417034%);
  }
  4% {
    transform: translate(0.0435686908%, -0.0360318608%);
  }
  6% {
    transform: translate(0.3458041242%, -0.107887507%);
  }
  8% {
    transform: translate(-0.1229993176%, 0.1218004576%);
  }
  10% {
    transform: translate(-0.3752093608%, 0.1222775651%);
  }
  12% {
    transform: translate(-0.157766704%, -0.1862583883%);
  }
  14% {
    transform: translate(-0.1093189627%, -0.06033372%);
  }
  16% {
    transform: translate(-0.0707865465%, 0.1844294562%);
  }
  18% {
    transform: translate(-0.0904188327%, 0.0596494768%);
  }
  20%, 100% {
    transform: none;
  }
}
[data-glitchanim="1"] .mainvisual__ph__g .channel.b {
  animation: rgb-shift-b 2s steps(1, jump-end) infinite alternate both;
}
@keyframes glitch-pos1 {
  0% {
    clip-path: polygon(0% 53.9725284866%, 100% 53.9725284866%, 100% 55.852426699%, 0% 55.852426699%);
    transform: translate(0.9631931061%, -0.419623292%);
  }
  2% {
    clip-path: polygon(0% 80.9290799043%, 100% 80.9290799043%, 100% 83.4021708025%, 0% 83.4021708025%);
    transform: translate(-1.8409272861%, -0.0892651371%);
  }
  4% {
    clip-path: polygon(0% 83.1534775929%, 100% 83.1534775929%, 100% 87.6520215149%, 0% 87.6520215149%);
    transform: translate(1.0175148685%, -0.442443437%);
  }
  6% {
    clip-path: polygon(0% 39.3933033068%, 100% 39.3933033068%, 100% 43.157200656%, 0% 43.157200656%);
    transform: translate(0.1072743808%, 0.459207031%);
  }
  8% {
    clip-path: polygon(0% 12.9924814978%, 100% 12.9924814978%, 100% 14.0169503172%, 0% 14.0169503172%);
    transform: translate(-1.5018859538%, 0.3997752258%);
  }
  10% {
    clip-path: polygon(0% 45.5951912849%, 100% 45.5951912849%, 100% 48.599462827%, 0% 48.599462827%);
    transform: translate(-1.7288630146%, 0.3631540631%);
  }
  12% {
    clip-path: polygon(0% 12.0336001078%, 100% 12.0336001078%, 100% 16.2077548832%, 0% 16.2077548832%);
    transform: translate(1.3870138881%, 0.2868327713%);
  }
  14% {
    clip-path: polygon(0% 76.9560530808%, 100% 76.9560530808%, 100% 81.4632232441%, 0% 81.4632232441%);
    transform: translate(-2.2698907176%, -0.1945895436%);
  }
  16% {
    clip-path: polygon(0% 62.1496427062%, 100% 62.1496427062%, 100% 63.8101947226%, 0% 63.8101947226%);
    transform: translate(-0.2791387949%, -0.1628590771%);
  }
  18% {
    clip-path: polygon(0% 68.4980220171%, 100% 68.4980220171%, 100% 73.3152727706%, 0% 73.3152727706%);
    transform: translate(1.2286996703%, 0.1571971155%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
[data-glitchanim="1"] .mainvisual__ph__g .divide[data-pos="1"] {
  animation: glitch-pos1 2s linear infinite alternate both;
}
@keyframes glitch-pos2 {
  0% {
    clip-path: polygon(0% 60.80535908%, 100% 60.80535908%, 100% 63.4181362075%, 0% 63.4181362075%);
    transform: translate(-2.921846516%, -0.351835206%);
  }
  2% {
    clip-path: polygon(0% 12.8245729827%, 100% 12.8245729827%, 100% 15.5402518701%, 0% 15.5402518701%);
    transform: translate(1.2882527267%, -0.4507302305%);
  }
  4% {
    clip-path: polygon(0% 36.383831152%, 100% 36.383831152%, 100% 39.8449969606%, 0% 39.8449969606%);
    transform: translate(0.1799881659%, -0.1935461358%);
  }
  6% {
    clip-path: polygon(0% 22.1866482632%, 100% 22.1866482632%, 100% 23.5397167941%, 0% 23.5397167941%);
    transform: translate(1.1538491649%, 0.1605434545%);
  }
  8% {
    clip-path: polygon(0% 43.6610267586%, 100% 43.6610267586%, 100% 44.7954966519%, 0% 44.7954966519%);
    transform: translate(-1.9594219697%, -0.2499091579%);
  }
  10% {
    clip-path: polygon(0% 61.1980988592%, 100% 61.1980988592%, 100% 64.3740075885%, 0% 64.3740075885%);
    transform: translate(-3.1465968614%, 0.0037117084%);
  }
  12% {
    clip-path: polygon(0% 80.049959911%, 100% 80.049959911%, 100% 81.5911836432%, 0% 81.5911836432%);
    transform: translate(2.3100244092%, 0.3129269161%);
  }
  14% {
    clip-path: polygon(0% 3.9019580697%, 100% 3.9019580697%, 100% 8.6401978961%, 0% 8.6401978961%);
    transform: translate(-2.4724961887%, 0.0062628231%);
  }
  16% {
    clip-path: polygon(0% 16.641290294%, 100% 16.641290294%, 100% 17.6981295974%, 0% 17.6981295974%);
    transform: translate(3.380345125%, -0.0317616945%);
  }
  18% {
    clip-path: polygon(0% 26.8847927056%, 100% 26.8847927056%, 100% 30.1498658336%, 0% 30.1498658336%);
    transform: translate(-1.4003691409%, 0.2906719491%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
[data-glitchanim="1"] .mainvisual__ph__g .divide[data-pos="2"] {
  animation: glitch-pos2 2s linear infinite alternate both;
}
[data-glitchanim="1"] .mainvisual__ph__g .divide[data-pos="3"], [data-glitchanim="1"] .mainvisual__ph__g .divide[data-pos="4"], [data-glitchanim="1"] .mainvisual__ph__g .divide[data-pos="5"] {
  display: none;
}
[data-kvanim_ended="1"] .mainvisual__ph__g .divide {
  display: none;
}
[data-start-kv="1"] .mainvisual__ph__g .channel.r {
  background: url(../img/top/mainvisual/kv_01_r.png) no-repeat 50% 100%/cover;
}
[data-start-kv="1"] .mainvisual__ph__g .channel.g {
  background: url(../img/top/mainvisual/kv_01_g.png) no-repeat 50% 100%/cover;
}
[data-start-kv="1"] .mainvisual__ph__g .channel.b {
  background: url(../img/top/mainvisual/kv_01_b.png) no-repeat 50% 100%/cover;
}
[data-start-kv="1"] .mainvisual__ph__g .divide, [data-end-kv="1"]:not([data-glitchanim="1"]) .mainvisual__ph__g {
  background: url(../img/top/mainvisual/kv_01.jpg) no-repeat 50% 100%/cover;
}
[data-start-kv="2"] .mainvisual__ph__g .channel.r {
  background: url(../img/top/mainvisual/kv_02_r.png) no-repeat 50% 100%/cover;
}
[data-start-kv="2"] .mainvisual__ph__g .channel.g {
  background: url(../img/top/mainvisual/kv_02_g.png) no-repeat 50% 100%/cover;
}
[data-start-kv="2"] .mainvisual__ph__g .channel.b {
  background: url(../img/top/mainvisual/kv_02_b.png) no-repeat 50% 100%/cover;
}
[data-start-kv="2"] .mainvisual__ph__g .divide, [data-end-kv="2"]:not([data-glitchanim="1"]) .mainvisual__ph__g {
  background: url(../img/top/mainvisual/kv_02.jpg) no-repeat 50% 100%/cover;
}

.mainvisual__scroll {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  background: #000;
  height: 10rem;
  width: 0.125rem;
  z-index: 1;
  opacity: 0;
}
.mainvisual__scroll::after {
  position: absolute;
  top: 0;
  left: -0.0625rem;
  background: #000;
  content: "";
  height: 3.125rem;
  width: 0.25rem;
  opacity: 0;
}
[data-mvanim_ended="1"] .mainvisual__scroll {
  opacity: 1;
  transition: all 1s 1.5s ease;
}
[data-mvanim_ended="1"] .mainvisual__scroll:after {
  animation: scrollBarMove 3s 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@keyframes scrollBarMove {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  20% {
    translate: 0 0;
    opacity: 1;
  }
  80% {
    translate: 0 6.875rem;
    opacity: 1;
  }
  100% {
    translate: 0 6.875rem;
    opacity: 0;
  }
}
:root {
  --mvHeight: 100svh;
}

.mainvisual {
  position: relative;
  background: #000;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 959px) {
  .mainvisual {
    min-height: 167.9vw;
    height: var(--mvHeight);
  }
}
@media (min-width: 960px) {
  .mainvisual {
    height: 85.5rem;
  }
}

@keyframes mvLogoIn {
  0% {
    opacity: 0;
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.mainvisual__logo {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  translate: -50% 0;
  width: 100%;
  opacity: 0;
}
[data-logoanim="1"] .mainvisual__logo {
  animation: mvLogoIn 2s 0s ease forwards;
}
[data-mvanim_ended="1"] .mainvisual__logo {
  opacity: 1;
}

.mainvisual__txt {
  position: absolute;
  top: 4.1875rem;
  left: 3.9375rem;
  font-size: 1.5625rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.88;
  mix-blend-mode: difference;
  backface-visibility: hidden;
}
.mainvisual__txt::before {
  top: 0.8125rem;
}
[data-mvanim_ended="1"] .mainvisual__txt:before {
  opacity: 0;
}

.mainvisual__btn {
  position: absolute;
  left: 2.25rem;
  bottom: 20rem;
  aspect-ratio: 126/151;
  width: 7.875rem;
}
.mainvisual__btn img {
  position: absolute;
  inset: 0;
  transition: all 0.3s ease;
  opacity: 0;
  scale: 1.1;
}
[data-end-kv="1"] .mainvisual__btn img[src$="btn_change_02.png"], [data-end-kv="2"] .mainvisual__btn img[src$="btn_change_01.png"] {
  opacity: 1;
  scale: 1;
  transition-delay: 0.3s;
}

.js-shuffletxt {
  opacity: 0;
}
.js-shuffletxt[data-active="1"] {
  opacity: 1;
  transition: opacity 0.1s 0.1s ease;
}