.kv {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-bg.webp");
}
@media screen and (orientation: portrait) {
  .kv {
    background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-bg-m.webp");
  }
}
.kv .slogan h1 {
  background: -webkit-gradient(linear, left bottom, left top, from(#eccade), to(#fff));
  background: linear-gradient(to top, #eccade 0%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
}
.kv .slogan h1::before {
  -webkit-text-stroke: 6px #2e2069;
  text-stroke: 6px #2e2069;
}
.kv .slogan h3::before {
  -webkit-text-stroke: 5px #2e2069;
  text-stroke: 5px #2e2069;
}

.classes-drifter::after {
  content: "Drifter";
}
.classes-drifter .second {
  -webkit-transform: translate(-5%, -1%);
          transform: translate(-5%, -1%);
}
.classes-drifter .second figcaption {
  -webkit-transform: translate(-24em, 100%);
          transform: translate(-24em, 100%);
}
@media screen and (orientation: portrait) {
  .classes-drifter .second {
    -webkit-transform: translate(-56%, 32%);
            transform: translate(-56%, 32%);
  }
  .classes-drifter .second figcaption {
    -webkit-transform: translate(-20em, 100%);
            transform: translate(-20em, 100%);
  }
}
.classes-drifter .third-1 {
  -webkit-transform: translate(28%, -14%);
          transform: translate(28%, -14%);
}
.classes-drifter .third-1 figcaption {
  -webkit-transform: translate(-20em, 0%);
          transform: translate(-20em, 0%);
}
@media screen and (orientation: portrait) {
  .classes-drifter .third-1 {
    -webkit-transform: translate(-23%, 9%);
            transform: translate(-23%, 9%);
  }
}
.classes-machinist::after {
  content: "Machinist";
}
.classes-machinist .second {
  -webkit-transform: translate(20%, -4%);
          transform: translate(20%, -4%);
}
.classes-machinist .second figcaption {
  -webkit-transform: translate(-24em, 100%);
          transform: translate(-24em, 100%);
}
@media screen and (orientation: portrait) {
  .classes-machinist .second {
    -webkit-transform: translate(-30%, 33%);
            transform: translate(-30%, 33%);
  }
  .classes-machinist .second figcaption {
    -webkit-transform: translate(-20em, 50%);
            transform: translate(-20em, 50%);
  }
}
.classes-machinist .third-1 {
  -webkit-transform: translate(-17%, -12%);
          transform: translate(-17%, -12%);
}
.classes-machinist .third-1 figcaption {
  -webkit-transform: translate(-20em, 0%);
          transform: translate(-20em, 0%);
}
@media screen and (orientation: portrait) {
  .classes-machinist .third-1 {
    -webkit-transform: translate(-60%, 15%);
            transform: translate(-60%, 15%);
  }
}

body.class_Astrologer.zh-hant .kv .container::after {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-tw.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.zh-hant .kv .container::after {
    background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-tw-m.png");
  }
}
body.class_Astrologer.zh-hant .kv .slogan h1 {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-tw.webp");
}
body.class_Astrologer.zh-hans .kv .container::after {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-cn.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.zh-hans .kv .container::after {
    background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-cn-m.png");
  }
}
body.class_Astrologer.zh-hans .kv .slogan h1 {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-cn.webp");
}
body.class_Astrologer.JP .kv .container::after {
  height: 12em;
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-ja.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .kv .container::after {
    background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-ja-m.png");
  }
}
@media screen and (max-width: 1024px) and (min-width: 481px) {
  body.class_Astrologer.JP .kv .slogan {
    padding-top: 60vw;
  }
}
body.class_Astrologer.JP .kv .slogan h1 {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-ja.webp");
  font-size: 1vw;
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 2vw;
  }
}
@media screen and (max-width: 820px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 2.3vw;
  }
}
@media screen and (max-width: 480px) {
  body.class_Astrologer.JP .kv .slogan h1 {
    font-size: 3vw;
  }
}
body.class_Astrologer.JP .classes-name.new::before {
  right: calc(8.2em + 30px);
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.JP .classes-name.new::before {
    right: 50%;
    top: 0%;
    -webkit-transform: translate(50%, 0%);
            transform: translate(50%, 0%);
  }
}
body.class_Astrologer.JP .classes-content {
  width: 23em;
}
body.class_Astrologer.EN .kv .container::after {
  height: 12em;
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-en.png");
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .kv .container::after {
    background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-sub-en-m.png");
  }
}
body.class_Astrologer.EN .kv .slogan h1 {
  background-image: url("/online/grandfantasia-origin/assets/images/index/update_Machinist/kv-slogan-en.webp");
  font-size: 1vw;
  height: 11em;
  margin-top: 2em;
}
@media screen and (min-width: 1025px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    margin-bottom: 11em;
  }
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    font-size: 2vw;
    height: 14em;
  }
}
@media screen and (max-width: 820px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    height: 13em;
    margin-top: 4em;
  }
}
@media screen and (max-width: 480px) {
  body.class_Astrologer.EN .kv .slogan h1 {
    font-size: 2.5vw;
  }
}
body.class_Astrologer.EN .classes-name.new::before {
  right: calc(14em + 30px);
}
@media screen and (max-width: 1024px) {
  body.class_Astrologer.EN .classes-name.new::before {
    right: 50%;
    top: 0%;
    -webkit-transform: translate(50%, 0%);
            transform: translate(50%, 0%);
  }
}