@charset "utf-8";

/* ---------- hero ---------- */
.topHero {
  position: relative;
  width: 100%;
  height: 100vh;
  /*background: url(../img/top/img_hero_bg.webp) no-repeat center/cover;*/
  overflow: hidden;
}

.topHero-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
@media screen and (width <= 768px) {
  .topHero-inner {
    flex-flow: column-reverse;
    height: 100vh;
  }
}

.topHero-logo {
  translate: 0 30%;
  width: 50vw;
  height: auto;
  aspect-ratio: 750/152;
  max-height: 20vh;
  opacity: 0;
  transition: all 1s 0.8s ease-in;
  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .is-view & {
   translate: 0 0;
    opacity: 1;
  }
}
@media screen and (width <= 768px) {
  .topHero-logo {
    width: max(60vw,200px);
    aspect-ratio: 200/41;
  }
}

.topHero-img {
  transition: translate .6s 1.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .7s 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  &[data-member="1"] {
    translate: 0 10%;
    width: max(13.33vw,120px);
    height: auto;
    max-height: calc(88vh - 90px);
    aspect-ratio: 256/834;
    opacity: 0;
    .is-view & {
      translate: 0 0;
      opacity: 1;
    }
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@media screen and (width <= 768px) {
  .topHero-img {
    &[data-member="1"] {
      width: max(18.66vw,120px);
      max-height: calc(70vh - 80px);
      aspect-ratio: 80/261;
    }
  }
}

.topHeading-h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.21;
  text-align: center;
  [data-section="profile"] &,[data-section="video"] & {
    color: #FFF;
  }
}
@media screen and (width <= 768px) {
  .topHeading-h2 {
    font-size: max(10.66vw,40px);
  }
}

/* ---------- section ---------- */
.topSection {
  padding: 150px 0;
  &[data-section="introduction"], &[data-section="video"] {
    background: url(../img/top/img_introduction_bg.webp) repeat;
  }
  &[data-section="profile"] {
    background: url(../img/top/img_profile_bg.webp) repeat;
  }
}
@media screen and (width <= 768px) {
  .topSection {
    padding: max(21.33vw,80px) 0;
  }
}

.topSection-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (width <= 768px) {
  .topSection-inner {
    max-width: 100%;
    padding: 0 max(5.33vw,20px);
  }
}

.topProjectBox {
  text-align: center;
  & p {
    margin-top: 26px;
    color: var(--txt-color-sub);
    font-size: 20px;
    line-height: 1.81;
    & + p {
      margin-top: 1em;
    }
  }
}
@media screen and (width <= 768px) {
  .topProjectBox {
    & h2 {
      width: max(80vw,300px);
      margin: 0 auto;
      & img {
        width: 100%;
      }
    }
    & p {
      margin-top: max(17.33vw,65px);
      /* font-size: max(4.26vw,16px); */
      font-size: 4.26vw;
      line-height: 2;
      & + p {
        
      }
    }
  }
}

.topIntroductionBox {
  margin-top: 120px;
  padding: 0 20px;
  text-align: center;
  & h2 {
    color: var(--txt-color-sub);
    & span {
      display: block;
      margin-top: 8px;
      font-size: 16px;
      line-height: 1.35;
    }
  }
  & p {
    margin-top: 30px;
    color: var(--txt-color-sub);
    font-size: 20px;
    line-height: 1.79;
    & + p {
      margin-top: 1em;
    }
  }
}
@media screen and (width <= 768px) {
  .topIntroductionBox {
    margin: 0 calc(max(5.33vw,20px) * -1);
    margin-top: max(13.33vw,50px);
    padding: max(13.33vw,50px) max(5.33vw,20px) max(12vw,45px);
    & h2 {
      width: max(70vw,280px);
      margin: 0 auto;
      & span {
        font-size: max(3.73vw,14px);
      }
    }
    & p {
      font-size: 4.26vw;
      line-height: 2;
    }
  }
}

.topNewsBox {
  display: flex;
  gap: 0 70px;
  & + div {
    margin-top: 150px;
  }
  & > div:first-child {
    display: flex;
    flex-direction: column;
    width: 260px;
    & h2 {
      text-align: left;
    }
    & > a {
      margin: auto 0 0 auto;
      color: var(--link-color-sub);
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      line-height: 1;
      & span {
        position: relative;
        padding-right: 33px;
        &::before {
          position: absolute;
          bottom: 5px;
          right: 0;
          rotate: 40deg;
          width: 7px;
          height: 2px;
          transition: translate .3s;
          background-color: var(--link-color-sub);
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 3px;
          right: 0;
          width: 29px;
          height: 2px;
          background-color: var(--link-color-sub);
          transition: translate .3s;
          content: "";
        }
      }
      &:hover {
        & span {
          &::before, &::after {
            translate: 5px;
          }
        }
      }
    }
  }
  & > div:last-child {
    width: calc(100% - 330px);
  }
}
@media screen and (width <= 768px) {
  .topNewsBox {
    display: block;
    & + div {
      margin-top: max(21.33vw,80px);
    }
    & > div:first-child {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      & h2 {
        font-size: max(10.66vw,40px);
      }
      & a {
        font-size: max(3.73vw,14px);
        & span {
          position: relative;
          padding-right: max(8.79vw,33px);
          &::before {
            bottom: max(1.33vw,5px);
            width: max(1.86vw,7px);
            height: max(0.53vw,2px);
          }
          &::after {
            bottom: max(0.8vw,3px);
            width: max(7.73vw,29px);
            height: max(0.53vw,2px);
          }
        }
      }
    }
    & > div:last-child {
      width: 100%;
      & ul {
        margin-top: max(2.66vw,10px);
      }
    }
  }
}

.profile._top {
  & .profile-name, & .profileTxtArea * {
    color: var(--txt-color-sub);
  }
}


.swiper-button {
  position: relative;
  width: 50px;
  height: auto;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background-color: #DDBFF3;
  opacity: 1;
  transition: background .3s;
  &:hover {
    background-color: #541B86;
  }
  &::before {
    position: absolute;
    top: 50%;
    rotate: 45deg;
    translate: -50% -50%;
    display: block;
    width: 16px;
    height: auto;
    aspect-ratio: 1;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    content: "";
  }
  &.swiper-button-prev {
    &::before {
      left: calc(50% + 3px);
      rotate: -135deg;
    }
  }
  &.swiper-button-next {
    &::before {
      left: calc(50% - 3px);
    }
  }
  &.swiper-button-disabled {
    background-color: #DDD;
  }
  & svg {
    display: none;
  }
}
@media screen and (width <= 768px) {
  .swiper-button {
    width: max(10.66vw,40px);
    &::before {
      width: max(3.2vw,12px);
    }
    &.swiper-button-prev {
      &::before {
        left: calc(50% + max(0.8vw,3px));
        rotate: -135deg;
      }
    }
    &.swiper-button-next {
      &::before {
        left: calc(50% - max(0.8vw,3px));
      }
    }
  }
}

.topSection[data-section="discography"] {
  overflow: hidden;
}

#topDiscographyBox {
  position: relative;
  & > div:first-child {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 100%;
    & .topHeading-h2 {
      text-align: left;
    }
    & .moreBtnWrap {
      margin-top: 50px;
    }
    & .moreBtn {
      margin-left: 0;
    }
  }
  & .swiper {
    width: calc(50vw + 690px);
    margin-left: 370px;
    padding-right: calc(50vw + 240px);
  }
  & .swiper-wrapper {
    margin: 0 -25px;
  }
  & .swiper-slide {
    width: 400px;
    padding: 0 25px;
    transition: opacity .3s;
    &:not(.swiper-slide-active) {
      opacity: .3;
    }
  }
  & .swiper-buttons {
    display: flex;
    gap: 0 20px;
    margin-top: auto;
  }
}
@media screen and (width <= 768px) {
  #topDiscographyBox {
    padding-bottom: max(17.33vw,65px);
    & > div:first-child {
      position: static;
      width: 100%;
      height: auto;
      & .moreBtnWrap {
        margin-top: max(6.66vw,25px);
      }
    }
    & .swiper {
      width: 100%;
      margin: max(6.66vw,25px) 0 0;
      padding: 0;
      overflow: hidden;
    }
    & .swiper-wrapper {
      margin: 0;
    }
    & .swiper-slide {
      padding: 0 15px;
      /* width: 100%; */
    }
    & .swiper-buttons {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}

.topSection[data-section="video"] {
  overflow: hidden;
}

#topVideoBox {
  margin-top: 80px;
  & .swiper {
    position: relative;
    overflow: visible;
  }
  & .swiper-slide {
    width: min(44.27vw,850px);
    height: auto;
    aspect-ratio: 2/1;
    padding: 0 min(1.3vw,25px);
    & a {
      display: block;
      & img {
        transition: scale .3s;
      }
      &:hover {
        & img {
          scale: 1.05;
          opacity: 1;
        }
      }
    }
  }
  & .swiper-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(48.95vw,940px);
    margin: 0 auto;
  }
  & .swiper-button {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    &.swiper-button-prev {
      left: 0;
    }
    &.swiper-button-next {
      right: 0;
    }
  }
}
@media screen and (width <= 768px) {
  #topVideoBox {
    margin-top: max(13.33vw,50px);
    & .swiper {
      overflow: hidden;
    }
    & .swiper-slide {
      aspect-ratio: auto;
      padding: 0 20px;
    }
    & .swiper-buttons {
      width: max(85.33vw,320px);
    }
  }
}





/* ---------- glitch animation ---------- */
.topHeroGlitch {
  position: relative;
  height: 101vh;
  background: #000 no-repeat center/0;
  background-image: url(../img/top/img_hero_bg.webp);
  overflow: hidden;
  &::before, &::after {
    position: absolute;
/*    top: 0;
    right: 0;
    bottom: 0;
    left: 0;*/
    inset: 0;
    background: inherit;
    background-size: cover;
    content: "";
  }
  .is-view & {
    &::before {
      animation: glitch-before 3s linear alternate both;
    }
    &::after {
      animation: glitch-after 3s linear alternate both;
    }
  }
}

.topHeroGlitch-channel {
  position: absolute;
/*    top: 0;
  right: 0;
  bottom: 0;
  left: 0;*/
  inset: 0;
  background: inherit;
  background-size: cover;
  mix-blend-mode: screen;
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    mix-blend-mode: multiply;
    content: "";
  }
  &._r {
    .is-view & {
      animation: rgb-shift-r 3s steps(1,jump-end) alternate both;
    }
    &::before {
      background: #F00;
    }
  }
  &._g {
    .is-view & {
      animation: rgb-shift-g 3s steps(1,jump-end) alternate both;
    }
    &::before {
      background: #0F0;
    }
  }
  &._b {
    .is-view & {
      animation: rgb-shift-b 3s steps(1,jump-end) alternate both;
    }
    &::before {
      background: #00F;
    }
  }
}

@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 68.8518832005%, 100% 68.8518832005%, 100% 73.2777262915%, 0% 73.2777262915%);
    transform: translate(-4.0823807444%, -0.0124942647%);
  }
  2% {
    clip-path: polygon(0% 10.6456861801%, 100% 10.6456861801%, 100% 18.1346758929%, 0% 18.1346758929%);
    transform: translate(5.0562298323%, -0.3261447483%);
  }
  4% {
    clip-path: polygon(0% 68.1834747538%, 100% 68.1834747538%, 100% 76.1089622353%, 0% 76.1089622353%);
    transform: translate(4.9654742502%, -0.2612388877%);
  }
  6% {
    clip-path: polygon(0% 43.8110455171%, 100% 43.8110455171%, 100% 46.4161700466%, 0% 46.4161700466%);
    transform: translate(1.2124112449%, -0.2095065587%);
  }
  8% {
    clip-path: polygon(0% 42.7497090453%, 100% 42.7497090453%, 100% 50.030749559%, 0% 50.030749559%);
    transform: translate(6.1248859985%, -0.030125123%);
  }
  10% {
    clip-path: polygon(0% 39.3972322823%, 100% 39.3972322823%, 100% 40.650747474%, 0% 40.650747474%);
    transform: translate(6.614287729%, -0.1057689863%);
  }
  12% {
    clip-path: polygon(0% 69.7389674213%, 100% 69.7389674213%, 100% 75.9012536571%, 0% 75.9012536571%);
    transform: translate(1.9039200819%, 0.0152428805%);
  }
  14% {
    clip-path: polygon(0% 55.037001917%, 100% 55.037001917%, 100% 64.3270676725%, 0% 64.3270676725%);
    transform: translate(3.7123510822%, 0.1963603951%);
  }
  16% {
    clip-path: polygon(0% 14.6726717977%, 100% 14.6726717977%, 100% 16.8858485584%, 0% 16.8858485584%);
    transform: translate(-1.0555377666%, 0.4240099309%);
  }
  18% {
    clip-path: polygon(0% 78.1958198022%, 100% 78.1958198022%, 100% 86.1573586836%, 0% 86.1573586836%);
    transform: translate(7.0704047704%, 0.2455830769%);
  }
  20%,
    100% {
    clip-path: none;
    transform: none;
  }
}

@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 40.0803017169%, 100% 40.0803017169%, 100% 49.4195724116%, 0% 49.4195724116%);
    transform: translate(-2.1542235357%, -0.2419595184%);
  }
  2% {
    clip-path: polygon(0% 50.8846965983%, 100% 50.8846965983%, 100% 59.4958131574%, 0% 59.4958131574%);
    transform: translate(1.8706523958%, -0.2579837757%);
  }
  4% {
    clip-path: polygon(0% 3.5577039369%, 100% 3.5577039369%, 100% 12.5043651954%, 0% 12.5043651954%);
    transform: translate(5.7611293352%, 0.3322193384%);
  }
  6% {
    clip-path: polygon(0% 72.9313186619%, 100% 72.9313186619%, 100% 75.9241792125%, 0% 75.9241792125%);
    transform: translate(3.2839626254%, -0.4602374869%);
  }
  8% {
    clip-path: polygon(0% 52.4678709668%, 100% 52.4678709668%, 100% 60.3664371615%, 0% 60.3664371615%);
    transform: translate(7.4121908754%, -0.0060580958%);
  }
  10% {
    clip-path: polygon(0% 23.4608905294%, 100% 23.4608905294%, 100% 27.3717981072%, 0% 27.3717981072%);
    transform: translate(-4.6498688401%, -0.1717876848%);
  }
  12% {
    clip-path: polygon(0% 62.374201673%, 100% 62.374201673%, 100% 65.2133392822%, 0% 65.2133392822%);
    transform: translate(7.1871300513%, -0.3544126079%);
  }
  14% {
    clip-path: polygon(0% 15.0650555613%, 100% 15.0650555613%, 100% 18.7444107342%, 0% 18.7444107342%);
    transform: translate(2.9556180402%, 0.3791064955%);
  }
  16% {
    clip-path: polygon(0% 53.1185916975%, 100% 53.1185916975%, 100% 57.3495677993%, 0% 57.3495677993%);
    transform: translate(1.9070642843%, -0.1622721856%);
  }
  18% {
    clip-path: polygon(0% 65.1570781503%, 100% 65.1570781503%, 100% 71.4887095146%, 0% 71.4887095146%);
    transform: translate(-7.0296062821%, 0.4999888702%);
  }
  20%,
    100% {
    clip-path: none;
    transform: none;
  }
}

@keyframes rgb-shift-r {
  0% {
    transform: translate(0.6505446855%, -0.4373726855%);
  }
  2% {
    transform: translate(-1.2614477791%, 0.2119960687%);
  }
  4% {
    transform: translate(0.1742279333%, 0.4153243257%);
  }
  6% {
    transform: translate(1.3893193634%, -0.1461135168%);
  }
  8% {
    transform: translate(0.698333886%, 0.4977037779%);
  }
  10% {
    transform: translate(0.7834525945%, -0.3562442969%);
  }
  12% {
    transform: translate(0.5503283553%, 0.3451749288%);
  }
  14% {
    transform: translate(-1.9609185009%, 0.4047020735%);
  }
  16% {
    transform: translate(0.1485708439%, 0.0567659449%);
  }
  18% {
    transform: translate(-1.4899187248%, 0.0943985637%);
  }
  20%,
    100% {
    transform: none;
  }
}

@keyframes rgb-shift-g {
  0% {
    transform: translate(-1.5081975519%, -0.0978993448%);
  }
  2% {
    transform: translate(1.45911622%, 0.464138421%);
  }
  4% {
    transform: translate(0.5009095167%, 0.0360743468%);
  }
  6% {
    transform: translate(0.8983986004%, 0.053747024%);
  }
  8% {
    transform: translate(0.7224076199%, 0.0066885967%);
  }
  10% {
    transform: translate(0.6096930381%, -0.4632138264%);
  }
  12% {
    transform: translate(1.4806069153%, 0.4958900515%);
  }
  14% {
    transform: translate(-1.5736341483%, -0.1409414388%);
  }
  16% {
    transform: translate(1.1199722892%, -0.2477545641%);
  }
  18% {
    transform: translate(-1.3044046767%, 0.1568556737%);
  }
  20%,
    100% {
    transform: none;
  }
}

@keyframes rgb-shift-b {
  0% {
    transform: translate(1.2436848164%, 0.4670484123%);
  }
  2% {
    transform: translate(-1.4408879736%, 0.3740651763%);
  }
  4% {
    transform: translate(-1.1039106592%, -0.1592805455%);
  }
  6% {
    transform: translate(0.796374094%, 0.4736833823%);
  }
  8% {
    transform: translate(-1.2204735397%, -0.1334648421%);
  }
  10% {
    transform: translate(1.5910039973%, -0.1521005047%);
  }
  12% {
    transform: translate(0.9469218955%, -0.3165698322%);
  }
  14% {
    transform: translate(-1.74832043%, 0.3023254924%);
  }
  16% {
    transform: translate(-0.0054501765%, 0.1631216138%);
  }
  18% {
    transform: translate(-0.6459802729%, -0.3478101048%);
  }
  20%,
    100% {
    transform: none;
  }
}