@charset "UTF-8";
.top-artistnote {
  position: relative;
}
@media (max-width: 779px) {
  .top-artistnote {
    margin-top: 61.5vw;
    padding: 14.1vw 0 25.6vw 5.1vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote {
    margin-top: 27vw;
    height: 800lvh;
    padding: 182px 20px 20px;
    margin-bottom: 27.6vw;
  }
}

.top-artistnote__cont {
  height: 100%;
}
@media (min-width: 780px) {
  .top-artistnote__cont {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    height: 100lvh;
  }
}

@media (min-width: 780px) {
  .top-artistnote__bg {
    position: absolute;
    top: 50%;
    right: 1.6vw;
    background: #fff;
    content: "";
    transform: translateY(-50%) scaleY(0);
    mix-blend-mode: difference;
    z-index: 1;
    transform-origin: center 0;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-artistnote__bg {
    position: absolute;
    top: 50%;
    right: 0.3vw;
  }
}
.top-artistnote__bg.-reveal {
  -webkit-animation: noteBgIn 0.5s 0.2s ease-out forwards;
          animation: noteBgIn 0.5s 0.2s ease-out forwards;
}

@-webkit-keyframes noteBgIn {
  0% {
    transform: translateY(-50%) scaleY(0);
  }
  100% {
    transform: translateY(-50%) scaleY(1);
  }
}

@keyframes noteBgIn {
  0% {
    transform: translateY(-50%) scaleY(0);
  }
  100% {
    transform: translateY(-50%) scaleY(1);
  }
}
@media (min-width: 780px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 840px;
    width: 71vw;
  }
}
@media (min-width: 780px) and (max-height: 840px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 90vh;
  }
}
@media (min-width: 1033px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    width: 78.1vw;
  }
}
@media (min-width: 1033px) and (max-height: 840px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 90vh;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 740px;
    width: 67.7vw;
  }
}
@media (min-width: 1551px) and (max-height: 740px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 90vh;
  }
}
@media (min-width: 1921px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 740px;
    width: 61.6vw;
  }
}
@media (min-width: 1921px) and (max-height: 740px) {
  .top-artistnote__bg,
.top-artistnote__item__inner {
    height: 90vh;
  }
}

.top-artistnote__item__inner {
  padding: 35.1vw 7.6vw 15.3vw;
}
@media (min-width: 780px) {
  .top-artistnote__item__inner {
    padding: 350px 52px 40px;
  }
}
@media (min-width: 780px) and (max-height: 840px) {
  .top-artistnote__item__inner {
    padding-top: 300px;
  }
}
@media (min-width: 1033px) {
  .top-artistnote__item__inner {
    padding: 430px 66px 40px;
  }
}
@media (min-width: 1033px) and (max-height: 840px) {
  .top-artistnote__item__inner {
    padding-top: 330px;
  }
}
@media (min-width: 1033px) and (max-height: 680px) {
  .top-artistnote__item__inner {
    padding-top: 300px;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item__inner {
    padding: 346px 88px 40px;
  }
}
@media (min-width: 1551px) and (max-height: 740px) {
  .top-artistnote__item__inner {
    padding-top: 320px;
  }
}
@media (min-width: 1921px) {
  .top-artistnote__item__inner {
    padding: 346px 88px 40px;
  }
}
@media (min-width: 1921px) and (max-height: 740px) {
  .top-artistnote__item__inner {
    padding-top: 350px;
  }
}

.name-wrapper {
  position: absolute;
}
@media (max-width: 779px) {
  .name-wrapper {
    left: -16.7vw;
    top: 10.2vw;
  }
  .-item1 .name-wrapper {
    top: 7.6vw;
  }
}
@media (min-width: 780px) {
  .name-wrapper {
    left: -105px;
    top: 96px;
  }
}
@media (min-width: 780px) and (max-height: 840px) {
  .name-wrapper {
    top: 80px;
  }
}
@media (min-width: 780px) {
  .-item1 .name-wrapper {
    top: 100px;
  }
}
@media (min-width: 780px) and (max-height: 840px) {
  .-item1 .name-wrapper {
    top: 76px;
  }
}
@media (min-width: 1551px) {
  .name-wrapper {
    left: -221px;
  }
  .-item4 .name-wrapper {
    left: -236px;
  }
}
@media (min-width: 1921px) {
  .name-wrapper {
    left: -145px;
  }
  .-item4 .name-wrapper {
    left: -236px;
  }
}

.js-artistnote-item {
  display: block;
  height: 100vh;
  width: 100%;
}

.top-artistnote__item__inner {
  position: relative;
}
@media (min-width: 780px) {
  .top-artistnote__item__inner {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 779px) {
  .top-artistnote__item__inner:before {
    background: #fff;
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .-reveal.top-artistnote__item .top-artistnote__item__inner:before {
    -webkit-animation: SPNoteBgIn 0.5s 0.5s ease-out forwards;
            animation: SPNoteBgIn 0.5s 0.5s ease-out forwards;
  }
}

@-webkit-keyframes SPNoteBgIn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes SPNoteBgIn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.top-artistnote__item {
  color: #fff;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  pointer-events: none;
}
@media (max-width: 779px) {
  .top-artistnote__item {
    margin-top: 17vw;
    padding: 5.1vw 0 0;
    width: 76.9vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item {
    position: absolute;
    top: 0;
    right: 1.6vw;
    padding: 72px 0;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-artistnote__item {
    position: absolute;
    top: 0;
    right: 0.3vw;
  }
}
.top-artistnote__item .index {
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
  display: flex;
}
@media (max-width: 779px) {
  .top-artistnote__item .index {
    position: absolute;
    top: -8.8vw;
    left: -17.4vw;
    font-size: 12.3vw;
    letter-spacing: -0.005em;
    padding-left: 1.5vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .index {
    position: absolute;
    top: 11px;
    left: -167px;
    font-size: 5.375rem;
    letter-spacing: -0.005em;
    padding-left: 0.6vw;
  }
}
@media (min-width: 1033px) {
  .top-artistnote__item .index {
    position: absolute;
    top: 11px;
    left: -167px;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item .index {
    position: absolute;
    top: 11px;
    left: -288px;
  }
}
.top-artistnote__item .index .char {
  display: inline-block;
  transform: translateY(100%);
}
.top-artistnote__item .index::before {
  position: absolute;
  left: 0;
  bottom: 0.05em;
  background: #fff;
  content: "";
}
@media (max-width: 779px) {
  .top-artistnote__item .index::before {
    height: 0.7vw;
    width: 1.5vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .index::before {
    height: 3px;
    width: 8px;
  }
}
.top-artistnote__item .plus {
  opacity: 0;
}
@media (max-width: 779px) {
  .top-artistnote__item .plus {
    position: absolute;
    top: -6.2vw;
    left: 0vw;
    width: 6.1vw;
    height: 6.1vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .plus {
    position: absolute;
    top: 5px;
    left: -60px;
    width: 27px;
    height: 27px;
  }
}
@media (min-width: 1033px) {
  .top-artistnote__item .plus {
    position: absolute;
    top: 0px;
    left: -60px;
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item .plus {
    position: absolute;
    top: 0px;
    left: -170px;
  }
}
.top-artistnote__item .plus .plus-line {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.top-artistnote__item .plus .plus-line.-x {
  transform: translate(-50%, -50%);
  width: 100%;
}
@media (max-width: 779px) {
  .top-artistnote__item .plus .plus-line.-x {
    height: 0.5vw;
  }
  .-reveal .top-artistnote__item .plus .plus-line.-x {
    -webkit-animation: plusLineInX 1.3s 1.3s cubic-bezier(1, 0, 0, 1) forwards;
            animation: plusLineInX 1.3s 1.3s cubic-bezier(1, 0, 0, 1) forwards;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .plus .plus-line.-x {
    height: 2px;
  }
}
.top-artistnote__item .plus .plus-line.-y {
  transform: translate(-50%, -50%);
  height: 100%;
}
@media (max-width: 779px) {
  .top-artistnote__item .plus .plus-line.-y {
    width: 0.5vw;
  }
  .-reveal .top-artistnote__item .plus .plus-line.-y {
    -webkit-animation: plusLineInY 1.5s 0.9s cubic-bezier(1, 0, 0, 1) forwards;
            animation: plusLineInY 1.5s 0.9s cubic-bezier(1, 0, 0, 1) forwards;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .plus .plus-line.-y {
    width: 2px;
  }
}
@-webkit-keyframes plusLineInX {
  0% {
    transform: translate(-50%, -50%) scaleX(0);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1);
  }
}
@keyframes plusLineInX {
  0% {
    transform: translate(-50%, -50%) scaleX(0);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1);
  }
}
@-webkit-keyframes plusLineInY {
  0% {
    transform: translate(-50%, -50%) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
}
@keyframes plusLineInY {
  0% {
    transform: translate(-50%, -50%) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) scaleY(1);
  }
}
.top-artistnote__item .name {
  line-height: 1;
  overflow: hidden;
}
@media (max-width: 779px) {
  .top-artistnote__item .name {
    mix-blend-mode: difference;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .name {
    letter-spacing: -0.015em;
    margin-top: 1.1vw;
    display: table;
  }
}
.top-artistnote__item .name .char {
  display: inline-block;
}
@media (max-width: 779px) {
  .top-artistnote__item .name .char {
    transform: translateY(100%);
  }
}
.top-artistnote__item .name.-en {
  font-weight: 400;
  letter-spacing: -0.04em;
}
@media (max-width: 779px) {
  .top-artistnote__item .name.-en {
    font-weight: 400;
    font-size: 13.2vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .name.-en {
    font-size: 7.75rem;
    white-space: nowrap;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item .name.-en {
    font-size: 8.1875rem;
  }
}
@media (max-width: 779px) {
  .top-artistnote__item .name.-ja {
    font-size: 5.3vw;
    margin-top: 1.1vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .name.-ja {
    font-size: 2.5rem;
    margin: 0.6vw 0 0 0;
    letter-spacing: -0.06em;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item .name.-ja {
    font-size: 2.625rem;
    margin: 10px 0 0 0;
    letter-spacing: -0.06em;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item.-item1 .name.-en {
    font-size: 8rem;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item.-item1 .name.-en {
    font-size: 9rem;
  }
}
.top-artistnote__item .note {
  position: relative;
  z-index: 1;
  color: #000;
}
@media (max-width: 779px) {
  .top-artistnote__item .note {
    transform: translateY(5%);
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .note {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.top-artistnote__item .note::-webkit-scrollbar {
  width: 0;
}
.top-artistnote__item .note::-webkit-scrollbar-thumb {
  background: #666666;
  border-radius: 999px;
  background-clip: padding-box;
  /* 背景を切り取る */
}
.top-artistnote__item .note .line {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  content: "";
  opacity: 0;
  display: block;
}
@media (max-width: 779px) {
  .top-artistnote__item .note .line {
    height: 0.5vw;
    width: 2vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .note .line {
    height: 3px;
    width: 12px;
  }
}
.top-artistnote__item.-active .note::-webkit-scrollbar {
  width: 8px;
}
.top-artistnote__item .text {
  position: relative;
  font-weight: 500;
  text-align: justify;
}
@media (max-width: 779px) {
  .top-artistnote__item .text {
    padding-top: 3vw;
    font-size: 3.7vw;
    opacity: 0;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .text {
    font-size: 1.0625rem;
    line-height: 2;
    padding-top: 20px;
  }
}
@media (min-width: 780px) and (max-height: 840px) {
  .top-artistnote__item .text {
    line-height: 1.7647058824;
  }
}
@media (min-width: 780px) and (max-height: 740px) {
  .top-artistnote__item .text {
    line-height: 1.7647058824;
  }
}
@media (min-width: 780px) and (max-height: 680px) {
  .top-artistnote__item .text {
    font-size: 1rem;
    line-height: 2.125;
  }
}
@media (min-width: 1551px) {
  .top-artistnote__item .text {
    font-size: 1.1875rem;
    line-height: 2.1052631579;
  }
}
@media (min-width: 1551px) and (max-height: 740px) {
  .top-artistnote__item .text {
    font-size: 1.0625rem;
    line-height: 1.5789473684;
  }
}
@media (max-width: 779px) {
  .top-artistnote__item .text:nth-of-type(2) {
    padding-top: 4.4vw;
  }
}
@media (min-width: 780px) {
  .top-artistnote__item .text:nth-of-type(2) {
    padding-top: 30px;
  }
}
.top-artistnote__item .index span {
  display: block;
}
.top-artistnote__item .index::before {
  transform: scaleX(0);
  transform-origin: left;
}
.top-artistnote__item.-active {
  pointer-events: all;
}
.top-artistnote__item.-active .index::before {
  -webkit-animation: 0.5s indexLineIn ease-out forwards;
          animation: 0.5s indexLineIn ease-out forwards;
}
@-webkit-keyframes indexLineIn {
  0% {
    transform: scaleX(3);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes indexLineIn {
  0% {
    transform: scaleX(3);
  }
  100% {
    transform: scaleX(1);
  }
}
@media (max-width: 779px) {
  .top-artistnote__item.-reveal .index span {
    -webkit-animation: textInUp 0.8s 0.4s cubic-bezier(1, 0, 0, 1) forwards;
            animation: textInUp 0.8s 0.4s cubic-bezier(1, 0, 0, 1) forwards;
  }
}
@media (max-width: 779px) {
  .top-artistnote__item.-reveal .name.-en .char {
    -webkit-animation: textInUp 0.6s 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
            animation: textInUp 0.6s 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
  .top-artistnote__item.-reveal .name.-ja .char {
    -webkit-animation: textInUp 0.6s 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
            animation: textInUp 0.6s 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
  .top-artistnote__item.-reveal .plus {
    -webkit-animation: in 0.3s 0.9s ease-out forwards;
            animation: in 0.3s 0.9s ease-out forwards;
  }
  .top-artistnote__item.-reveal .text {
    -webkit-animation: noteInUp 0.5s 1.1s ease-out forwards;
            animation: noteInUp 0.5s 1.1s ease-out forwards;
  }
  .top-artistnote__item.-reveal .text:nth-of-type(2) {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
  }
  .top-artistnote__item.-reveal .line {
    transform-origin: left;
    -webkit-animation: lineSpIn 0.5s 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
            animation: lineSpIn 0.5s 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
}

@-webkit-keyframes lineWideNote {
  0% {
    opacity: 0;
    width: 10%;
  }
  100% {
    opacity: 1;
    width: 6px;
  }
}

@keyframes lineWideNote {
  0% {
    opacity: 0;
    width: 10%;
  }
  100% {
    opacity: 1;
    width: 6px;
  }
}
@-webkit-keyframes noteInUp {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes noteInUp {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes lineSpIn {
  0% {
    opacity: 0;
    transform: scaleX(4);
  }
  1% {
    opacity: 1;
    transform: scaleX(4);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes lineSpIn {
  0% {
    opacity: 0;
    transform: scaleX(4);
  }
  1% {
    opacity: 1;
    transform: scaleX(4);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
.top-artistnote__pager {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  opacity: 0;
}
.top-artistnote__pager.-pagerin {
  -webkit-animation: in 0.2s 0s ease-out forwards;
          animation: in 0.2s 0s ease-out forwards;
}
@media (min-width: 780px) {
  .top-artistnote__pager {
    gap: 9px;
    top: 37px;
    right: 31px;
  }
}

.top-artistnote__pager__item {
  width: 30px;
  height: 6px;
  background: #000;
  opacity: 0.4;
}
[data-noteitem="1"] .top-artistnote__pager__item:nth-child(1) {
  opacity: 1;
  pointer-events: none;
}
[data-noteitem="2"] .top-artistnote__pager__item:nth-child(2) {
  opacity: 1;
  pointer-events: none;
}
[data-noteitem="3"] .top-artistnote__pager__item:nth-child(3) {
  opacity: 1;
  pointer-events: none;
}
[data-noteitem="4"] .top-artistnote__pager__item:nth-child(4) {
  opacity: 1;
  pointer-events: none;
}

.top-introduction {
  position: relative;
}
@media (max-width: 779px) {
  .top-introduction {
    text-align: center;
    padding: 22.5vw 10.6vw 25.6vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-introduction {
    padding: 121px 5.5vw 205px;
    /* padding: 150px 0 180px;
    text-align: center; */
  }
}
@media (min-width: 1025px) {
  .top-introduction {
    padding: 121px 0 205px;
    text-align: center;
  }
}

.top-introduction__wrapper {
  opacity: 0;
  transform: translateY(5%);
}
.-reveal .top-introduction__wrapper {
  -webkit-animation: fadeUpIntro 1.2s 0.8s ease-out forwards;
          animation: fadeUpIntro 1.2s 0.8s ease-out forwards;
}
@media (min-width: 1025px) {
  .top-introduction__wrapper {
    display: inline-block;
    width: 833px;
  }
}

@-webkit-keyframes fadeUpIntro {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpIntro {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes lineWide {
  0% {
    opacity: 0;
    width: 30%;
  }
  100% {
    opacity: 1;
    width: 6px;
  }
}
@keyframes lineWide {
  0% {
    opacity: 0;
    width: 30%;
  }
  100% {
    opacity: 1;
    width: 6px;
  }
}
.top-introduction__content .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  position: relative;
  letter-spacing: -0.035em;
  text-align: left;
}
@media (max-width: 779px) {
  .top-introduction__content .text {
    letter-spacing: -0.06em;
  }
}
.top-introduction__content .text .item-wrap {
  overflow: hidden;
}
.top-introduction__content .text .item {
  display: inline-block;
  transform: translateY(100%);
}
.-reveal .top-introduction__content .text .item {
  -webkit-animation: introTextIn 0.6s 1.2s ease-in-out forwards;
          animation: introTextIn 0.6s 1.2s ease-in-out forwards;
}
@-webkit-keyframes introTextIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes introTextIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.top-introduction__content.-top {
  font-weight: 700;
}
@media (max-width: 779px) {
  .top-introduction__content.-top {
    font-size: 4.3vw;
    line-height: 1.8611111111;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-introduction__content.-top {
    font-size: 1.4375rem;
    line-height: 1.9130434783;
  }
}
@media (min-width: 1025px) {
  .top-introduction__content.-top {
    font-size: 1.6875rem;
    line-height: 1.9259259259;
  }
}
.top-introduction__content.-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
}
@media (max-width: 779px) {
  .top-introduction__content.-top::before {
    height: 0.5vw;
    width: 2vw;
  }
}
@media (min-width: 780px) {
  .top-introduction__content.-top::before {
    height: 3px;
    width: 8px;
  }
}
.-reveal .top-introduction__content.-top::before {
  -webkit-animation: lineWide 0.6s 1.2s ease-out forwards;
          animation: lineWide 0.6s 1.2s ease-out forwards;
}
@media (max-width: 779px) {
  .top-introduction__content.-top .text {
    padding-top: 7.6vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-introduction__content.-top .text {
    padding-top: 22px;
  }
}
@media (min-width: 1025px) {
  .top-introduction__content.-top .text {
    padding-top: 22px;
  }
}
.top-introduction__content.-bottom {
  font-weight: 500;
}
@media (max-width: 779px) {
  .top-introduction__content.-bottom {
    font-size: 3.8vw;
    line-height: 2.0333333333;
    margin-top: 10.8vw;
    font-weight: 400;
  }
}
@media (min-width: 780px) {
  .top-introduction__content.-bottom {
    margin-top: 57px;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-introduction__content.-bottom {
    font-size: 1.1875rem;
    line-height: 2;
  }
}
@media (min-width: 1025px) {
  .top-introduction__content.-bottom {
    font-size: 1.375rem;
    line-height: 2.0909090909;
  }
}
.top-introduction__content .line {
  overflow: hidden;
  text-align: left !important;
}
.top-introduction__content .line-inner {
  transform: translateY(100%);
}
.-reveal .top-introduction__content .line-inner {
  -webkit-animation: textInUp 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: textInUp 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  -webkit-animation-delay: calc(var(--line-index) * 0.05s + 0.8s);
          animation-delay: calc(var(--line-index) * 0.05s + 0.8s);
}
.top-introduction__content.-top .item-wrap:nth-child(1) .item {
  -webkit-animation-delay: 1.25s !important;
          animation-delay: 1.25s !important;
}
.top-introduction__content.-top .item-wrap:nth-child(2) .item {
  -webkit-animation-delay: 1.3s !important;
          animation-delay: 1.3s !important;
}
.top-introduction__content.-top .item-wrap:nth-child(3) .item {
  -webkit-animation-delay: 1.35s !important;
          animation-delay: 1.35s !important;
}
.top-introduction__content.-top .item-wrap:nth-child(4) .item {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}
.top-introduction__content.-top .item-wrap:nth-child(5) .item {
  -webkit-animation-delay: 1.45s !important;
          animation-delay: 1.45s !important;
}
.top-introduction__content.-top .item-wrap:nth-child(6) .item {
  -webkit-animation-delay: 1.5s !important;
          animation-delay: 1.5s !important;
}
@media (max-width: 779px) {
  .top-introduction__content.-bottom .item-wrap:nth-child(1) .item {
    -webkit-animation-delay: 1.75s !important;
            animation-delay: 1.75s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(2) .item {
    -webkit-animation-delay: 1.8s !important;
            animation-delay: 1.8s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(3) .item {
    -webkit-animation-delay: 1.85s !important;
            animation-delay: 1.85s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(4) .item {
    -webkit-animation-delay: 1.9s !important;
            animation-delay: 1.9s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(5) .item {
    -webkit-animation-delay: 1.95s !important;
            animation-delay: 1.95s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(6) .item {
    -webkit-animation-delay: 2s !important;
            animation-delay: 2s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(7) .item {
    -webkit-animation-delay: 2.05s !important;
            animation-delay: 2.05s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(8) .item {
    -webkit-animation-delay: 2.1s !important;
            animation-delay: 2.1s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(9) .item {
    -webkit-animation-delay: 2.15s !important;
            animation-delay: 2.15s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(10) .item {
    -webkit-animation-delay: 2.2s !important;
            animation-delay: 2.2s !important;
  }
}
@media (min-width: 780px) {
  .top-introduction__content.-bottom .item-wrap:nth-child(1) .item {
    -webkit-animation-delay: 1.55s !important;
            animation-delay: 1.55s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(2) .item {
    -webkit-animation-delay: 1.6s !important;
            animation-delay: 1.6s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(3) .item {
    -webkit-animation-delay: 1.65s !important;
            animation-delay: 1.65s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(4) .item {
    -webkit-animation-delay: 1.7s !important;
            animation-delay: 1.7s !important;
  }
  .top-introduction__content.-bottom .item-wrap:nth-child(5) .item {
    -webkit-animation-delay: 1.75s !important;
            animation-delay: 1.75s !important;
  }
}

.top-mainvisual {
  height: 100svh;
}

.top-mainvisual__img {
  position: fixed;
  top: 0;
  left: 0;
  height: 100svh;
  width: 100%;
  z-index: 0;
}
.top-mainvisual__img:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 115vh;
  transition: filter 0.3s ease;
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__img:before {
    background: url("../../assets/img/top/mainvisual/ph_mv.webp") no-repeat 80% 80%/cover;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__img:before {
    background: url("../../assets/img/top/mainvisual/ph_mv.webp") no-repeat 80% 80%/cover;
  }
}
@media (max-width: 779px) {
  .top-mainvisual__img:before {
    background: url("../../assets/img/top/mainvisual/ph_mv_nrw.webp") no-repeat 47% center/cover;
  }
}
.top-mainvisual__img:after {
  content: "";
  width: 100%;
  height: 110vh;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
}
.-ready .top-mainvisual__img:after {
  -webkit-animation: out 0.2s 0.5s ease-out forwards;
          animation: out 0.2s 0.5s ease-out forwards;
}
.-dark .top-mainvisual__img::before {
  filter: brightness(0.8);
}

@media (max-width: 779px) {
  .top-mainvisual__content {
    position: fixed;
    top: 5.1vw;
    left: 5.1vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__content {
    position: fixed;
    top: 2.7vw;
    left: 1.9vw;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__content {
    position: fixed;
    top: 1.6vw;
    left: 1.6vw;
  }
}

.top-mainvisual__date {
  display: flex;
  line-height: 1;
  opacity: 0;
}
.top-mainvisual__date .date {
  font-weight: 300;
}
@media (max-width: 779px) {
  .top-mainvisual__date .date {
    font-size: 12.8vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__date .date {
    font-size: 7.3vw;
    letter-spacing: -0.01em;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__date .date {
    font-size: max(75px, 4.8vw);
  }
}
.top-mainvisual__date .day {
  font-weight: 400;
  margin-top: 0.15em;
  margin-left: 0.3em;
}
@media (max-width: 779px) {
  .top-mainvisual__date .day {
    font-size: 6.4vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__date .day {
    font-size: 3.7vw;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__date .day {
    font-size: max(38px, 2.5vw);
  }
}
.-ready .top-mainvisual__date {
  -webkit-animation: in 1.6s 1s ease-in-out forwards;
          animation: in 1.6s 1s ease-in-out forwards;
}

.top-mainvisual__text {
  opacity: 0;
}
@media (max-width: 779px) {
  .top-mainvisual__text {
    font-size: 3.7vw;
    line-height: 1.6428571429;
    margin-top: 2.5vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__text {
    font-size: 1.7vw;
    line-height: 1.7307692308;
    margin-top: 0.5vw;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__text {
    font-size: max(18px, 1.1vw);
    line-height: 1.7307692308;
    margin-top: 0.5vw;
  }
}
.-ready .top-mainvisual__text {
  -webkit-animation: in 1.6s 1s ease-in-out forwards;
          animation: in 1.6s 1s ease-in-out forwards;
}

.top-mainvisual__logo {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
@media (max-width: 779px) {
  .top-mainvisual__logo {
    width: 100%;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-mainvisual__logo {
    width: 72.2vw;
  }
}
@media (min-width: 1025px) {
  .top-mainvisual__logo {
    width: 50.3vw;
    max-width: 966px;
    min-width: 700px;
  }
}
.top-mainvisual__logo img {
  opacity: 0;
  width: 100%;
}
@media (min-width: 780px) {
  .top-mainvisual__logo img {
    max-width: none;
  }
}
.-ready .top-mainvisual__logo img {
  -webkit-animation: in 1.6s 1.7s ease-in-out forwards;
          animation: in 1.6s 1.7s ease-in-out forwards;
}

@-webkit-keyframes ttlScaleIn {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ttlScaleIn {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes ttlScaleUp {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ttlScaleUp {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.top-news {
  position: relative;
}
@media (max-width: 779px) {
  .top-news {
    margin-top: 61.5vw;
    padding: 14.1vw 0 6.4vw;
  }
}
@media (min-width: 780px) {
  .top-news {
    margin-top: 27vw;
    padding: 182px 0 28px;
  }
}
.top-news .top__title {
  position: relative;
  z-index: 1;
}
@media (max-width: 779px) {
  .top-news .top__title {
    margin-left: 5.1vw;
  }
}

.top__title {
  line-height: 0.82;
  font-weight: 300;
}
@media (max-width: 779px) {
  .top__title {
    font-size: 22.5vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top__title {
    font-size: 16vw;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.04em;
  }
  .top-artistnote .top__title {
    font-size: 16.4vw;
    margin-left: -15px;
    letter-spacing: -0.065em;
  }
}
@media (min-width: 1025px) {
  .top__title {
    font-size: 10.6vw;
    text-align: center;
  }
}
.top__title .text {
  display: inline-block;
  overflow: hidden;
}
.top__title .text span {
  display: inline-block;
  transform: translateY(100%);
}
@media (max-width: 779px) {
  .top__title .text span {
    font-weight: 300;
    letter-spacing: -0.04em;
  }
}
@media (min-width: 780px) {
  .top__title .text span {
    font-weight: 200;
    letter-spacing: -0.03em;
  }
}
@media (min-width: 1025px) {
  .top__title .text:nth-child(2) {
    margin-left: 0.2em;
  }
}
.top__title .char {
  transform: translateY(100%);
}
.-reveal .top__title .char {
  -webkit-animation: textInUp 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: textInUp 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  -webkit-animation-delay: calc(var(--char-index) * -0.05s + 1.1s);
          animation-delay: calc(var(--char-index) * -0.05s + 1.1s);
}
@media (max-width: 779px) {
  .top__title .char {
    margin-left: -0.07em;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top__title .char {
    margin-left: -0.05em;
  }
}
@media (min-width: 1025px) {
  .top__title .char {
    margin-left: -0.05em;
  }
}
.top__title .char:nth-of-type(1) {
  margin-left: 0;
}

.top-trailer {
  background: #000;
  position: relative;
  width: 100%;
}
@media (max-width: 779px) {
  .top-trailer {
    height: 71.7vw;
    padding-bottom: 5.1vw;
  }
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-trailer {
    height: 54.6vw;
  }
}
@media (min-width: 1025px) {
  .top-trailer {
    margin-top: -1px;
    height: 35.4vw;
  }
}
@media (min-width: 780px) {
  .top-trailer {
    padding-bottom: 4.1vw;
  }
}
.-reveal .top-trailer {
  -webkit-animation: in 0.6s 0.6s ease-out forwards;
          animation: in 0.6s 0.6s ease-out forwards;
}

.top-trailer__thumb {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 66.6vw;
}
@media (min-width: 780px) and (max-width: 1024px) {
  .top-trailer__thumb {
    height: 46.8vw;
  }
}
@media (min-width: 1025px) {
  .top-trailer__thumb {
    height: 31.2vw;
  }
}
.top-trailer__thumb iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  min-height: 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  transition: filter 0.3s ease-out;
}
.top-trailer__thumb .video-stream .html5-main-video,
.top-trailer__thumb video {
  min-height: 100% !important;
  width: 100% !important;
}
.top-trailer__thumb .video-stream .html5-main-video {
  min-height: 100% !important;
  width: 100% !important;
}
.top-trailer__thumb::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff url("../../assets/img/common/icon/icon_triangle.svg") no-repeat 53% 50%/cover;
  border-radius: 99px;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease-out;
}
@media (max-width: 779px) {
  .top-trailer__thumb::after {
    background-size: 5.8vw 7.4vw;
    height: 18.9vw;
    width: 18.9vw;
  }
}
@media (min-width: 780px) {
  .top-trailer__thumb::after {
    background-size: 1.8vw 2.3vw;
    height: 6.5vw;
    width: 6.5vw;
  }
}
.-reveal .top-trailer__thumb::after {
  -webkit-animation: btnIn 0.3s 0.5s ease-out forwards;
          animation: btnIn 0.3s 0.5s ease-out forwards;
}
.top-trailer__thumb:hover iframe {
  filter: brightness(0.8);
}
.top-trailer__thumb:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

@-webkit-keyframes btnIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes btnIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}