@charset "UTF-8";
.st-Header #header-bg {
  top: 120px;
}

.artistHeader {
  position: relative;
  color: #fff;
  height: 595px;
  /*
  &:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    height: 80px;
    top: -30px;
    @media (max-width: $breakpoint) {
      height: 50px;
    }
  }*/
  /*
  // 右の白帯
  &:after {
    content: '';
    position: absolute;
    right: 0;
    background: #fff;
    width: 130px;
    height: 100%;
    @media (max-width: $breakpoint) {
      width: 30px;
    }
  }
  */
}

@media (max-width: 1024px) {
  .artistHeader {
    height: 493px;
  }
}

.artistHeader .artistHeader--text {
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  z-index: 2;
  left: 80px;
  bottom: 60px;
  right: 80px;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text {
    left: 30px;
    bottom: 40px;
    right: 20px;
    padding-right: 40px;
  }
}

.artistHeader .artistHeader--text:before {
  content: 'SCROLL';
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  position: absolute;
  bottom: -20px;
  padding-left: 95px;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text:before {
    font-size: 10px;
    padding-left: 80px;
  }
}

.artistHeader .artistHeader--text:after {
  content: '';
  display: block;
  width: 1px;
  height: 70px;
  background: #fff;
  position: absolute;
  bottom: 0px;
  left: 8px;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text:after {
    height: 55px;
    left: 6px;
  }
}

.artistHeader .artistHeader--text .artist--name {
  line-height: 1;
  font-size: 62px;
  font-family: century-gothic, 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  bottom: 290px;
  left: 0;
  right: 0;
  display: inline-block;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text .artist--name {
    font-size: 36px !important;
    bottom: 200px;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0);
  }
}

.artistHeader .artistHeader--text .artist--name span.ja {
  font-size: 58px;
  font-family: century-gothic, 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text .artist--name span.ja {
    font-size: 34px !important;
  }
}

.artistHeader .artistHeader--text .artist--member {
  position: absolute;
  top: -170px;
  left: 0;
  width: 100%;
  display: inline-block;
  margin-top: 0px;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text .artist--member {
    margin-top: 0px;
    top: -130px;
  }
}

.artistHeader .artistHeader--text .artist--member p {
  font-size: 11px;
  line-height: 2;
  padding-left: 70px;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--text .artist--member p {
    font-size: 9px;
    padding-left: 50px;
  }
}

.artistHeader .artistHeader--image {
  position: absolute;
  z-index: 1;
  right: 30px;
  left: 460px;
  top: 0;
  text-align: right;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--image {
    left: 30px;
    right: 5px;
  }
}

.artistHeader .artistHeader--image div {
  border-radius: 8px;
  overflow: hidden;
  width: auto;
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--image div {
    height: auto;
    max-height: 300px;
  }
}

.artistHeader .artistHeader--image img {
  border-radius: 8px;
  overflow: hidden;
  height: 520px;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  font-family: 'object-fit: contain; object-position: right;';
  -o-object-position: top right;
     object-position: top right;
}

@media (max-width: 1450px) {
  .artistHeader .artistHeader--image img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1024px) {
  .artistHeader .artistHeader--image img {
    width: auto;
    height: 29.29688vw;
  }
}

@media (max-width: 750px) {
  .artistHeader .artistHeader--image img {
    height: 200px;
    width: auto;
  }
}

@media (max-width: 430px) {
  .artistHeader .artistHeader--image img {
    height: auto;
    width: 100%;
  }
}

.st-Header--row__Bottom #header-bg {
  position: absolute;
  top: 50px;
  left: 0;
  right: 130px;
  bottom: 0;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  will-change: opacity;
}

@media (max-width: 1024px) {
  .st-Header--row__Bottom #header-bg {
    right: 20px;
    height: 465px;
    top: 30px;
  }
}

.st-Header--row__Bottom .artistHeader--text {
  opacity: 0;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="16" /></filter></svg>#filter');
  -webkit-filter: blur(16px);
          filter: blur(16px);
  will-change: opacity, filter;
}

.st-Header--row__Bottom .artistHeader--image {
  opacity: 0;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="16" /></filter></svg>#filter');
  -webkit-filter: blur(16px);
          filter: blur(16px);
  will-change: opacity, filter;
}

.st-Header--row__Bottom.show #header-bg {
  opacity: 1;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  /*
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  */
}

.st-Header--row__Bottom.show .artistHeader--image {
  -webkit-transition: opacity 2.5s 0.4s ease, -webkit-filter 2.5s 0.4s ease;
  transition: opacity 2.5s 0.4s ease, -webkit-filter 2.5s 0.4s ease;
  transition: opacity 2.5s 0.4s ease, filter 2.5s 0.4s ease;
  transition: opacity 2.5s 0.4s ease, filter 2.5s 0.4s ease, -webkit-filter 2.5s 0.4s ease;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  /*
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  */
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
}

.st-Header--row__Bottom.show .artistHeader--text {
  -webkit-transition: opacity 0.6s 1.5s ease, -webkit-filter 0.6s 1.5s ease;
  transition: opacity 0.6s 1.5s ease, -webkit-filter 0.6s 1.5s ease;
  transition: opacity 0.6s 1.5s ease, filter 0.6s 1.5s ease;
  transition: opacity 0.6s 1.5s ease, filter 0.6s 1.5s ease, -webkit-filter 0.6s 1.5s ease;
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  /*
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  */
  opacity: 1;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
  -webkit-filter: blur(0);
          filter: blur(0);
}