@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&&family=Zen+Antique+Soft&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*========================================
*	common
========================================*/
::selection {
  color: #000;
  background: #fff;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

*:focus {
  outline: 0;
}

html,
body {
  font-size: 62.5%;
  color: #000;
  background-color: #fff;
}

body {
  width: 100%;
}

a {
  color: #000;
  text-decoration: none;
}

h1,
h2,
h3 {
  line-height: 1;
}

ul,
li {
  list-style: none;
}

tr,
th,
td {
  font-weight: normal;
  text-align: left;
}

img,
picture {
  -webkit-backface-visibility: hidden;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  vertical-align: bottom;
}

.pc-none {
  display: none;
}
@media only screen and (max-width: 750px) {
  .pc-none {
    display: block;
  }
}

@media only screen and (max-width: 750px) {
  .sp-none {
    display: none;
  }
}

.header {
  width: 100%;
  height: 13.3333333333vw;
  background-color: rgba(255, 255, 255, 0.5);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  position: fixed;
  z-index: 25;
  margin-bottom: -13.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .header {
    position: fixed;
    height: 4.39238653vw;
    margin-bottom: -4.39238653vw;
    transition: transform 300ms;
  }
  .header + .common-sns {
    transition: all 300ms;
  }
  .header::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 4.39238653vw;
    transition: height 300ms;
  }
  .header:has(+ .common-sns:hover) {
    transform: translate3d(0, 0, 0) !important;
  }
  .header.js--hide {
    transform: translate3d(0, -101%, 0);
  }
  .header.js--hide + .common-sns {
    transform: translate3d(0, -4.39238653vw, 0);
  }
  .header.js--hide:hover {
    transform: translate3d(0, 0, 0);
  }
  .header.js--hide:hover + .common-sns {
    transform: translate3d(0, 0, 0);
  }
  .header.js--hide::before {
    height: 4.39238653vw;
  }
}
.header-logo {
  width: 34.5333333333vw;
  height: 8.2666666667vw;
  margin: auto auto auto 3.7333333333vw;
}
@media only screen and (min-width: 751px) {
  .header-logo {
    width: 12.5915080527vw;
    height: 3.0014641288vw;
    margin: auto auto auto 2.2693997072vw;
    transition: opacity 200ms;
  }
  .header-logo:hover {
    opacity: 0.5;
  }
}
.header-logo a {
  display: block;
}
.header-modal {
  position: fixed;
  top: 0vw;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  backdrop-filter: blur(2vw);
}
.header-modal.js-show {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 751px) {
  .header-modal {
    backdrop-filter: blur(0);
    background-color: transparent;
    position: static;
    display: flex;
    z-index: 5;
    visibility: visible;
    opacity: 1;
  }
}
.header-modal__store {
  width: 100vw;
  height: 30.9333333333vw;
  margin: 0 auto 0;
  background: url(../data/webp/header/header_store_bg.png.webp) no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  row-gap: 3.6vw;
}
@media only screen and (min-width: 751px) {
  .header-modal__store {
    display: none;
  }
}
.header-modal__store--info {
  width: 70.8vw;
  position: relative;
}
.header-modal__store--btn {
  display: flex;
  column-gap: 2vw;
}
.header-modal__store--appstore {
  width: 35.4666666667vw;
  filter: brightness(0.5);
}
.header-modal__store--googleplay {
  width: 35.0666666667vw;
  filter: brightness(0.5);
}
.header-icon {
  width: 76vw;
  margin: auto;
  filter: brightness(0);
}
@media only screen and (min-width: 751px) {
  .header-icon {
    display: none;
  }
}
.header-icon__txt {
  margin-inline: auto;
  width: 59.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__txt {
    width: 15.0073206442vw;
    font-size: 1.1713030747vw;
  }
}
.header-icon__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 7.3333333333vw;
  margin-top: 4.5333333333vw;
  margin-bottom: 8.2666666667vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__list {
    margin-top: 1.0980966325vw;
    margin-bottom: 2.2693997072vw;
    column-gap: 1.6105417277vw;
  }
}
.header-icon__x {
  display: block;
  width: 6.4vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__x {
    width: 1.756954612vw;
  }
}
.header-icon__fb {
  display: block;
  width: 7.8666666667vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__fb {
    width: 2.196193265vw;
  }
}
.header-icon__dc {
  display: block;
  width: 8.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__dc {
    width: 2.4158125915vw;
  }
}
.header-icon__yt {
  display: block;
  width: 8.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .header-icon__yt {
    width: 2.4890190337vw;
  }
}
.header-list {
  display: flex;
  flex-direction: column;
  margin-top: 23.4666666667vw;
  row-gap: 0.8vw;
}
@media only screen and (min-width: 751px) {
  .header-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    row-gap: 0;
  }
}
.header-list__title {
  font-family: "Noto Serif JP", serif;
  font-size: 4.2666666667vw;
  display: flex;
  width: 91.8666666667vw;
  margin-inline: auto;
  justify-content: center;
  height: 13.3333333333vw;
  align-items: center;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
@media only screen and (min-width: 751px) {
  .header-list__title {
    display: flex;
    background: none;
    font-size: 1.1713030747vw;
    margin: auto 1.0980966325vw;
    width: 100%;
    height: 100%;
    align-items: center;
    transition: opacity 200ms;
  }
  .header-list__title:hover {
    opacity: 0.5;
  }
}
.header-list__external {
  padding: 6.4vw 0 6.6666666667vw;
  row-gap: 0.8vw;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 751px) {
  .header-list__external {
    padding: 0;
    flex-direction: row;
    row-gap: 0;
  }
}
.header-list__special {
  display: flex;
  margin-inline: auto;
  width: 91.8666666667vw;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .header-list__special {
    display: flex;
    width: 8.78477306vw;
    background-color: rgba(255, 255, 255, 0.35);
    align-items: center;
    height: 4.39238653vw;
  }
  .header-list__special:hover {
    background-color: rgb(255, 255, 255);
  }
}
.header-lang {
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  background-color: rgba(255, 255, 255, 0.5);
  margin-right: 0.6666666667vw;
  cursor: pointer;
  position: relative;
}
@media only screen and (min-width: 751px) {
  .header-lang {
    width: 4.39238653vw;
    height: 4.39238653vw;
    margin-right: 0;
  }
  .header-lang img {
    pointer-events: auto;
    transition: opacity 200ms;
  }
  .header-lang img:hover {
    opacity: 0.5;
  }
}
.header-lang__option {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.2666666667vw;
  background-color: rgba(255, 255, 255, 0.5);
  visibility: hidden;
}
.header-lang__option.js-show {
  visibility: visible;
}
.header-lang__option--item {
  height: 5.3333333333vw;
  font-size: 3.0666666667vw;
  display: flex;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .header-lang__option--item {
    font-size: 0.9516837482vw;
    height: 2.196193265vw;
    transition: opacity 200ms;
  }
  .header-lang__option--item:hover {
    opacity: 0.5;
  }
}
.header-audio {
  position: relative;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  background-color: rgba(255, 255, 255, 0.5);
  margin-right: 0.6666666667vw;
  cursor: pointer;
}
@media only screen and (min-width: 751px) {
  .header-audio {
    width: 4.39238653vw;
    height: 4.39238653vw;
    margin-right: 0;
  }
}
.header-audio-play {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
@media only screen and (min-width: 751px) {
  .header-audio-play {
    transition: opacity 200ms;
  }
}
.header-audio-pause {
  opacity: 1;
}
@media only screen and (min-width: 751px) {
  .header-audio.js--play:hover .header-audio-play {
    opacity: 0.5;
  }
}
.header-audio.js--play .header-audio-play {
  opacity: 1;
}
.header-audio.js--play .header-audio-pause {
  opacity: 0;
}
.header-menu {
  position: relative;
  cursor: pointer;
  width: 13.3333333333vw;
  height: 13.3333333333vw;
  background-color: #1d3e70;
  overflow: hidden;
}
.header-menu > picture {
  display: block;
  transition: all 400ms;
}
.header-menu__open {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: all 400ms;
  transform: rotateZ(90deg);
  z-index: 1;
  width: 100%;
  height: 100%;
  will-change: opacity, transform;
}
.header-menu.js-show > picture {
  opacity: 0;
  transform: rotateZ(-90deg);
}
.header-menu.js-show .header-menu__open {
  opacity: 1;
  transform: rotateZ(0deg);
}

.footer {
  background-color: #1a2638;
  color: white;
  position: relative;
  z-index: 5;
}
.footer-support {
  background: url(../data/webp/footer/bg_support.png.webp) no-repeat;
  background-size: contain;
  background-position: center top;
  position: relative;
  height: 90.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-support {
    background: url(../data/webp/footer/bg_support_pc.png.webp) no-repeat;
    background-size: cover;
    background-position: center top;
    height: 29.2825768668vw;
  }
}
.footer-support__title {
  font-family: "Zen Antique Soft", serif;
  font-size: 4.8vw;
  line-height: 18vw;
  color: #e5cc80;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 3.2vw;
  padding-top: 9.3333333333vw;
  margin-inline: auto;
  width: 78.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 751px) {
  .footer-support__title {
    padding-top: 4.39238653vw;
    width: 37.0424597365vw;
    column-gap: 1.6105417277vw;
    font-size: 1.756954612vw;
    line-height: 6.5153733529vw;
  }
}
.footer-support__title:before {
  display: block;
  content: "";
  width: 7.6vw;
  height: 3.7333333333vw;
  background: url(../data/webp/footer/title_ornament_left.png.webp) no-repeat;
  background-size: cover;
  position: relative;
  top: 50%;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .footer-support__title:before {
    background: url(../data/webp/footer/title_ornament_left.png.webp) no-repeat;
    background-size: cover;
    width: 2.7818448023vw;
    height: 1.3909224012vw;
  }
}
.footer-support__title:after {
  display: block;
  content: "";
  width: 7.6vw;
  height: 3.7333333333vw;
  background: url(../data/webp/footer/title_ornament_left.png.webp) no-repeat;
  background-size: cover;
  position: relative;
  top: 50%;
  right: 0;
  transform: rotate(180deg) scaleY(-1);
}
@media only screen and (min-width: 751px) {
  .footer-support__title:after {
    background: url(../data/webp/footer/title_ornament_left.png.webp) no-repeat;
    background-size: cover;
    width: 2.7818448023vw;
    height: 1.3909224012vw;
  }
}
.footer-support__txt {
  font-size: 3.2vw;
  font-family: "Noto Serif JP", serif;
  line-height: 5.8666666667vw;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .footer-support__txt {
    font-size: 1.0248901903vw;
    line-height: 2.196193265vw;
  }
}
.footer-support__txt--greeting {
  font-weight: bold;
  font-size: 4.5333333333vw;
  line-height: 4vw;
}
@media only screen and (min-width: 751px) {
  .footer-support__txt--greeting {
    font-size: 1.6105417277vw;
    line-height: 2.196193265vw;
  }
}
.footer-support__question {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  width: 56.8vw;
  height: 16vw;
  font-size: 4vw;
  margin: auto;
  margin-top: 4.1333333333vw;
  color: white;
  background-color: rgba(154, 30, 30, 0.5);
  text-align: center;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .footer-support__question {
    width: 22.4011713031vw;
    font-size: 1.317715959vw;
    height: 5.1244509517vw;
    margin-top: 1.9765739385vw;
  }
}
.footer-support__question:hover {
  opacity: 0.7;
}
.footer-support__question--txt {
  position: relative;
  background-color: #9a1e1e;
  width: 55.4666666667vw;
  height: 14.6666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 751px) {
  .footer-support__question--txt {
    width: 21.6691068814vw;
    height: 4.39238653vw;
  }
}
.footer-spec {
  display: flex;
  flex-direction: column;
  width: 86.6666666667vw;
  margin: auto;
  font-size: 2.9333333333vw;
  font-family: "Noto Serif JP", serif;
}
@media only screen and (min-width: 751px) {
  .footer-spec {
    flex-direction: row;
    font-size: 1.0248901903vw;
    padding-top: 2.635431918vw;
    align-items: center;
    justify-content: center;
    column-gap: 1.8301610542vw;
  }
}
.footer-spec__scrolltop {
  position: absolute;
  width: 22.4vw;
  z-index: 15;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .footer-spec__scrolltop {
    width: 6.149341142vw;
    position: fixed;
    bottom: 1.8301610542vw;
    right: 1.8301610542vw;
    left: auto;
    transform: translate(0%, 0%);
  }
  .footer-spec__scrolltop img {
    transition: opacity 300ms;
  }
  .footer-spec__scrolltop:hover img {
    opacity: 0.7;
  }
}
@media only screen and (min-width: 1367px) {
  .footer-spec__scrolltop {
    bottom: 25px;
    right: 25px;
  }
}
.footer-spec__logo {
  margin-top: 11.6vw;
  margin-bottom: 2.8vw;
}
@media only screen and (min-width: 751px) {
  .footer-spec__logo {
    width: 23.5724743777vw;
    margin: 0;
  }
}
.footer-spec__content {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 751px) {
  .footer-spec__content {
    width: 36.9692532943vw;
    padding-top: 2.5622254758vw;
    padding-bottom: 1.9765739385vw;
  }
}
.footer-spec__list {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  row-gap: 2.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-spec__list {
    flex-wrap: wrap;
    flex-direction: unset;
    column-gap: 0.7320644217vw;
    row-gap: 1.0980966325vw;
  }
}
.footer-spec__item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.footer-spec__item--title {
  background-color: #1d3e70;
  padding: 1.0666666667vw 1.8666666667vw;
  margin-right: 2.6666666667vw;
  width: 33.3333333333vw;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .footer-spec__item--title {
    padding: 0.3660322108vw 0.8052708638vw;
    margin-right: 1.8301610542vw;
    width: auto;
  }
}
.footer-spec__item--extra {
  display: block;
  margin-top: 2vw;
  position: absolute;
}
@media only screen and (min-width: 751px) {
  .footer-spec__item--extra {
    position: static;
    display: inline;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__gameplay {
    display: flex;
    flex-direction: row;
    column-gap: 0.6588579795vw;
    margin-top: 1.2445095168vw;
    margin-bottom: 1.3333333333vw;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play {
    display: flex;
    flex-direction: row;
    width: 17.7159590044vw;
    background: rgb(0, 0, 0);
    border: 0.0732064422vw solid white;
    border-radius: 0.3660322108vw;
    padding: 0.439238653vw 0.5124450952vw;
    justify-content: right;
    align-items: center;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--left {
    width: 3.1478770132vw;
    margin-right: 0.9516837482vw;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--mid {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.878477306vw;
    margin-right: 0.2928257687vw;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--midbold {
    font-weight: bold;
    font-size: 0.9516837482vw;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--right {
    background-image: linear-gradient(to right, #d5bf82, #ab7f05);
    background-size: contain;
    width: 6.4421669107vw;
    height: 2.3426061493vw;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 300ms ease;
    cursor: pointer;
    border-radius: 0.439238653vw;
  }
}
.footer-spec__play--right:hover {
  opacity: 0.7;
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--doc {
    position: absolute;
    background: url(../data/webp/footer/button_document.png.webp) no-repeat;
    background-size: contain;
    height: 1.317715959vw;
    width: 1.317715959vw;
    left: 0.7320644217vw;
  }
}
@media only screen and (min-width: 751px) {
  .footer-spec__play--txt {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0.6588579795vw;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.8052708638vw;
    color: white;
  }
}
.footer-spec__store {
  display: flex;
  flex-direction: column;
}
.footer-spec__space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 9.0666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-spec__space {
    margin-top: 1.317715959vw;
    margin-bottom: 0;
    justify-content: flex-start;
    column-gap: 0.6588579795vw;
    margin-top: 0;
  }
}
.footer-spec__space--appstore {
  display: block;
  width: 42.6666666667vw;
  filter: brightness(0.5);
}
@media only screen and (min-width: 751px) {
  .footer-spec__space--appstore {
    width: 7.9795021962vw;
  }
}
.footer-spec__space--googleplay {
  display: block;
  width: 42.2666666667vw;
  filter: brightness(0.5);
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .footer-spec__space--googleplay {
    width: 7.906295754vw;
  }
}
.footer-spec__additional {
  font-size: 3.3333333333vw;
  font-family: "Noto Serif JP", serif;
  color: #d5bf82;
  text-align: center;
  margin-top: 2.6666666667vw;
  margin-bottom: 4.1333333333vw;
}
@media only screen and (min-width: 751px) {
  .footer-spec__additional {
    font-size: 0.7320644217vw;
    margin-bottom: 0vw;
    margin-top: 0;
    text-align: left;
  }
}
.footer-spec__additional--copyright {
  font-size: 2.6666666667vw;
  margin-bottom: 8.1333333333vw;
}
@media only screen and (min-width: 751px) {
  .footer-spec__additional--copyright {
    font-size: 0.7320644217vw;
    margin-bottom: 0vw;
    line-height: 1.5vw;
  }
}
.footer-icon {
  width: 76vw;
  margin: auto;
}
.footer-icon__txt {
  margin-inline: auto;
  width: 59.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__txt {
    width: 15.0073206442vw;
    font-size: 1.1713030747vw;
  }
}
.footer-icon__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 7.3333333333vw;
  margin-top: 4.5333333333vw;
  margin-bottom: 8.2666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__list {
    margin-top: 1.0980966325vw;
    margin-bottom: 2.2693997072vw;
    column-gap: 1.6105417277vw;
  }
  .footer-icon__list a {
    transition: opacity 300ms;
  }
  .footer-icon__list a:hover {
    opacity: 0.7;
  }
}
.footer-icon__x {
  display: block;
  width: 6.4vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__x {
    width: 1.756954612vw;
  }
}
.footer-icon__fb {
  display: block;
  width: 7.8666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__fb {
    width: 2.196193265vw;
  }
}
.footer-icon__dc {
  display: block;
  width: 8.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__dc {
    width: 2.4158125915vw;
  }
}
.footer-icon__yt {
  display: block;
  width: 8.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .footer-icon__yt {
    width: 2.4890190337vw;
  }
}
.footer-policy {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5333333333vw;
  column-gap: 0.5333333333vw;
  justify-content: center;
}
@media only screen and (min-width: 751px) {
  .footer-policy {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    column-gap: 2.635431918vw;
    margin-bottom: calc(2.7086383602vw - 0.7 * 2.7086383602vw);
    /*margin-bottom: 2.7086383602vw;*/
  }
}

/* ----- C2S added */
.footer-policy-2 {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5333333333vw;
  column-gap: 0.5333333333vw;
	justify-content: center;
  }
  @media only screen and (min-width: 751px) {
	.footer-policy-2 {
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  margin: auto;
	  column-gap: 2.635431918vw;
	  margin-bottom: calc(2.7086383602vw - 0.1 * 2.7086383602vw);
	}
  }

/* C2S added ----- */

.footer-policy__item {
  color: white;
  font-size: 2.6666666667vw;
  width: 43.4666666667vw;
  height: 8vw;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 751px) {
  .footer-policy__item {
    font-size: 0.7320644217vw;
    padding-bottom: 0.2196193265vw;
    border-bottom: solid white 0.0732064422vw;
    width: auto;
    height: auto;
    display: block;
    background: none;
  }
  .footer-policy__item:hover {
    border-color: transparent;
  }
}
.footer-copyright {
  width: 76vw;
  margin: auto;
  text-align: center;
  font-size: 2.6666666667vw;
  line-height: 4.5333333333vw;
  font-family: "Noto Serif JP", serif;
  padding-top: 9.0666666667vw;
  padding-bottom: 8.2666666667vw;
}
@media only screen and (min-width: 751px) {
  .footer-copyright {
    font-size: 0.7320644217vw;
    padding-top: 0;
    padding-bottom: 1.8301610542vw;
    line-height: 1.2445095168vw;
  }
}

.common-main {
  position: relative;
  z-index: 2;
}
.common-sns {
  cursor: pointer;
  position: absolute;
  width: 11.4666666667vw;
  top: 16.5333333333vw;
  left: 3.7333333333vw;
  z-index: 15;
}
@media only screen and (min-width: 751px) {
  .common-sns {
    width: 4.7584187408vw;
    top: 6.588579795vw;
    left: 2.196193265vw;
    position: fixed;
    z-index: 26;
  }
  .common-sns:hover {
    opacity: 0.6;
    transform: translate3d(0, 0, 0) !important;
  }
}

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
}
.loading-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 256vw;
  transform: translate3d(-50%, -50%, 0);
}
@media only screen and (min-width: 751px) {
  .loading-inner {
    width: 109.8096632504vw;
  }
}
.loading.js--hide {
  opacity: 0;
  transition: opacity 800ms;
  will-change: opacity;
  pointer-events: none;
}

.top-mv {
  width: 100%;
  height: 206.6666666667vw;
  position: relative;
}
@media only screen and (min-width: 751px) {
  .top-mv {
    height: 54.9048316252vw;
  }
}
.top-mv__bg {
  background-image: url(../data/webp/top/mv/bg.png.webp);
  background-size: contain;
  width: 100%;
  height: 400vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media only screen and (min-width: 751px) {
  .top-mv__bg {
    background: url(../data/webp/top/mv/bg_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: top center;
    height: 95.7540263543vw;
  }
}
.top-mv__chara--regina {
  background-image: url(../data/webp/top/mv/chara_regina.png.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  width: 100%;
  height: 190.6666666667vw;
  position: absolute;
  top: 26.1333333333vw;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .top-mv__chara--regina {
    background-image: url(../data/webp/top/mv/chara_regina_pc.png.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 71.8887262079vw;
    height: 107.6500732064vw;
    top: 1.5373352855vw;
    left: 3.9897510981vw;
  }
}
.top-mv__chara--rozi {
  background-image: url(../data/webp/top/mv/chara_rozi.png.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  width: 100%;
  height: 190.6666666667vw;
  position: absolute;
  top: 26.1333333333vw;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .top-mv__chara--rozi {
    background-image: url(../data/webp/top/mv/chara_rozi_pc.png.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 71.8887262079vw;
    height: 107.6500732064vw;
    top: 1.5373352855vw;
    left: 3.9897510981vw;
  }
}
.top-mv__chara--es {
  background-image: url(../data/webp/top/mv/chara_es.png.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  width: 100%;
  height: 190.6666666667vw;
  position: absolute;
  top: 26.1333333333vw;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .top-mv__chara--es {
    background-image: url(../data/webp/top/mv/chara_es_pc.png.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 71.8887262079vw;
    height: 107.6500732064vw;
    top: 1.5373352855vw;
    left: 3.9897510981vw;
  }
}
.top-mv__front {
  position: absolute;
  top: 0;
  height: 183.3333333333vw;
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .top-mv__front {
    height: 100%;
  }
}
.top-mv__txt {
  position: relative;
  width: 73.3333333333vw;
  margin: 27.2vw auto 60vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt {
    justify-content: space-between;
  }
}
.top-mv__txt p {
  margin: 0 0.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt p {
    margin: 0;
  }
}
.top-mv__txt p:nth-of-type(1) {
  width: 8.9333333333vw;
}
.top-mv__txt p:nth-of-type(2) {
  width: 9.2vw;
}
.top-mv__txt p:nth-of-type(3) {
  width: 8.9333333333vw;
}
.top-mv__txt p:nth-of-type(4) {
  width: 7.8666666667vw;
}
.top-mv__txt p:nth-of-type(5) {
  width: 9.0666666667vw;
}
.top-mv__txt p:nth-of-type(6) {
  width: 9.2vw;
}
.top-mv__txt p:nth-of-type(7) {
  width: 5.2vw;
}
.top-mv__txt p:nth-of-type(8) {
  width: 9.0666666667vw;
}
.top-mv__txt p:nth-of-type(9) {
  width: 9.0666666667vw;
}
.top-mv__txt p:nth-of-type(10) {
  width: 6.4vw;
}
.top-mv__txt p:nth-of-type(11) {
  width: 9.2vw;
}
.top-mv__txt p:nth-of-type(12) {
  width: 5.7333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt p:nth-of-type(1) {
    width: 4.0995607613vw;
  }
  .top-mv__txt p:nth-of-type(2) {
    width: 4.39238653vw;
  }
  .top-mv__txt p:nth-of-type(3) {
    width: 4.3191800878vw;
  }
  .top-mv__txt p:nth-of-type(4) {
    width: 2.8550512445vw;
  }
  .top-mv__txt p:nth-of-type(5) {
    width: 4.1727672035vw;
  }
  .top-mv__txt p:nth-of-type(6) {
    width: 4.2459736457vw;
  }
  .top-mv__txt p:nth-of-type(7) {
    width: 2.5622254758vw;
  }
  .top-mv__txt p:nth-of-type(8) {
    width: 4.0995607613vw;
  }
  .top-mv__txt p:nth-of-type(9) {
    width: 4.0263543192vw;
  }
  .top-mv__txt p:nth-of-type(10) {
    width: 2.7818448023vw;
  }
  .top-mv__txt p:nth-of-type(11) {
    width: 4.1727672035vw;
  }
  .top-mv__txt p:nth-of-type(12) {
    width: 2.635431918vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__txt {
    margin: 6.588579795vw auto 0vw;
    width: 65.0805270864vw;
  }
}
.top-mv__title {
  width: 94.1333333333vw;
  margin: auto 1.8666666667vw 2.9333333333vw auto;
}
@media only screen and (min-width: 751px) {
  .top-mv__title {
    margin: 0;
    width: 50.878477306vw;
    position: absolute;
    top: 15.3733528551vw;
    left: calc(50% - 4.39238653vw);
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay {
    position: absolute;
    left: 4.4289897511vw;
    display: flex;
    align-items: center;
    top: 38.0673499268vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--download {
    width: 15.3733528551vw;
    cursor: pointer;
    transition: all 300ms ease;
  }
}
.top-mv__gameplay--download:hover .top-mv__gameplay--l2hover {
  opacity: 1;
}
.top-mv__gameplay--l1 {
  position: relative;
  mix-blend-mode: hard-light;
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--l1 {
    width: 15.3733528551vw;
  }
}
.top-mv__gameplay--l2 {
  position: absolute;
  top: 0;
  z-index: 2;
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--l2 {
    width: 15.3733528551vw;
  }
}
.top-mv__gameplay--l2hover {
  position: absolute;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--l2hover {
    width: 15.3733528551vw;
  }
}
.top-mv__gameplay--l3 {
  position: absolute;
  top: 0;
  z-index: 3;
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--l3 {
    width: 15.3733528551vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--register {
    margin-top: 0;
    margin-left: -1.3333333333vw;
    width: 6.588579795vw;
    position: relative;
    z-index: 4;
    cursor: pointer;
    transition: all 300ms ease;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--register:hover .top-mv__gameplay--r1hover {
    opacity: 1;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--r1 {
    opacity: 1;
  }
}
@media only screen and (min-width: 751px) {
  .top-mv__gameplay--r1hover {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 300ms ease;
  }
}
.top-mv__store {
  width: 100%;
  height: 33.6vw;
  margin: 0 auto 0;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  row-gap: 0.2666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-mv__store {
    width: 19.3265007321vw;
    height: 5.9297218155vw;
    margin: 0;
    background: url(../data/webp/top/mv/bg_store_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: center;
    row-gap: 0.6588579795vw;
    position: absolute;
    top: 43.0453879941vw;
    left: calc(50% - 23.0600292826vw);
  }
}
.top-mv__store--bg {
  position: absolute;
  top: 0;
  height: 33.6vw;
  width: 100%;
}
.top-mv__store--s1 {
  position: absolute;
  top: 0;
  height: 33.6vw;
  width: 100%;
}
.top-mv__store--s2 {
  mix-blend-mode: hard-light;
  position: absolute;
  top: 0;
  height: 33.6vw;
  width: 100%;
}
.top-mv__store--s3 {
  position: absolute;
  top: 0;
  height: 33.6vw;
  width: 100%;
}
.top-mv__store--info {
  width: 70.8vw;
  position: relative;
}
.top-mv__store--txt {
  width: 76vw;
  position: relative;
  font-size: 5.6vw;
  font-family: "Zen Antique Soft", serif;
  color: #d5bf82;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .top-mv__store--txt {
    color: #ffffff;
    width: 14.6412884334vw;
    font-size: 0.878477306vw;
  }
}

/* EN version */

.en_top-mv__store--txt {
  width: 76vw;
  position: relative;
  font-size: 5.6vw;
  font-family: "Zen Antique Soft", serif;
  color: #d5bf82;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .en_top-mv__store--txt {
    color: #ffffff;
    width: 16.6412884334vw;  
    font-size: 1.3vw;  
  }
}

.en_top-mv__store--extra {
  width: 32vw;
  position: relative;
  font-size: 3vw;
  font-family: "Zen Antique Soft", serif;
  color: white;
  padding: 1.3333333333vw 0;
  text-shadow: 0.2666666667vw 0.2666666667vw 1.0666666667vw #d5bf82;
  text-align: center;
}

/* END EN VERSION */

.top-mv__store--extra {
  width: 28.5333333333vw;
  position: relative;
  font-size: 2.6666666667vw;
  font-family: "Zen Antique Soft", serif;
  color: white;
  padding: 1.3333333333vw 0;
  text-shadow: 0.2666666667vw 0.2666666667vw 1.0666666667vw #d5bf82;
  text-align: center;
}
.top-mv__store--btn {
  display: flex;
  column-gap: 2vw;
  position: relative;
}
@media only screen and (min-width: 751px) {
  .top-mv__store--btn {
    column-gap: 0.5124450952vw;
  }
}
.top-mv__store--appstore {
  width: 35.4666666667vw;
  filter: brightness(0.5);
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-mv__store--appstore {
    width: 8.1991215227vw;
  }
}
.top-mv__store--googleplay {
  width: 35.0666666667vw;
  filter: brightness(0.5);
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-mv__store--googleplay {
    width: 8.1259150805vw;
  }
}

.top-news {
  position: relative;
  z-index: 1;
  margin-top: -4vw;
}
@media only screen and (min-width: 751px) {
  .top-news {
    margin-top: -3.6603221083vw;
  }
}
.top-news__bg:before {
  display: block;
  content: "";
}
@media only screen and (min-width: 751px) {
  .top-news__bg:before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -0.2196193265vw;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.5);
    mask-image: url(../img/top/news/bg_pc.svg);
    mask-repeat: no-repeat;
    mask-position: 0 0;
    mask-size: 100%;
    -webkit-mask-image: url(../img/top/news/bg_pc.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 100%;
  }
}
.top-news__bg:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: url(../img/top/news/bg.svg);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100%;
  -webkit-mask-image: url(../img/top/news/bg.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100%;
}
@media only screen and (min-width: 751px) {
  .top-news__bg:after {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0);
    mask-image: url(../img/top/news/bg_pc.svg);
    -webkit-mask-image: url(../img/top/news/bg_pc.svg);
    z-index: -1;
  }
}
.top-news__inner {
  width: 100%;
  height: auto;
  padding: 12.8vw 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 751px) {
  .top-news__inner {
    padding: 5.270863836vw 0 5.7833089312vw;
    flex-direction: row;
  }
}
.top-news__content {
  background: url(../data/webp/top/news/bg_content.png.webp) no-repeat;
  background-size: contain;
  width: 89.3333333333vw;
  height: 91.3333333333vw;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.5);
}
@media only screen and (min-width: 751px) {
  .top-news__content {
    background: url(../data/webp/top/news/bg_content_pc.png.webp) no-repeat;
    background-size: contain;
    width: 44.8755490483vw;
    height: 32.9428989751vw;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0;
  }
}
.top-news__content--title {
  width: 41.8666666667vw;
  padding-top: 5.6vw;
  margin-inline: auto;
  padding-bottom: 4.8vw;
}
@media only screen and (min-width: 751px) {
  .top-news__content--title {
    width: 15.3001464129vw;
    padding-top: 2.5622254758vw;
    padding-bottom: 1.8301610542vw;
  }
}
.top-news__list {
  display: flex;
  width: 74.6666666667vw;
  height: 55.0666666667vw;
  margin: auto;
  flex-direction: column;
  row-gap: 1.2vw;
  overflow: auto;
}
@media only screen and (min-width: 751px) {
  .top-news__list {
    width: 39.8243045388vw;
    height: 19.9121522694vw;
    row-gap: 0.2562225476vw;
  }
}

/* injection Lang. model */

.th_top-news__list {
  display: flex;
  width: 74.6666666667vw;
  height: 55.0666666667vw;
  margin: auto;
  flex-direction: column;
  row-gap: 1.2vw;
  overflow: auto;
}
@media only screen and (min-width: 751px) {
  .th_top-news__list {
    width: 39.8243045388vw;
    height: 19.9121522694vw;
    row-gap: 0.2562225476vw;
  }
}

.en_top-news__list {
  display: flex;
  width: 74.6666666667vw;
  height: 55.0666666667vw;
  margin: auto;
  flex-direction: column;
  row-gap: 1.2vw;
  overflow: auto;
}
@media only screen and (min-width: 751px) {
  .en_top-news__list {
    width: 39.8243045388vw;
    height: 19.9121522694vw;
    row-gap: 0.2562225476vw;
  }
}

/* end injection Lang. model */

.top-news__item {
  background-color: rgba(26, 3, 4, 0.05);
  font-size: 2.9333333333vw;
  font-family: "Noto Sans JP", sans-serif;
  padding: 2.6666666667vw;
  line-height: 4.2666666667vw;
  row-gap: 0.8vw;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 751px) {
  .top-news__item {
    font-size: 1.0248901903vw;
    line-height: 1.4641288433vw;
    padding: 0.8052708638vw;
    row-gap: 0.1830161054vw;
  }
}
.top-news__item--txt {
  display: flex;
}
.top-news__item--type {
  font-size: 2vw;
  background-color: #7c7c7c;
  color: white;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0 1.6vw;
  margin-right: 2.1333333333vw;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .top-news__item--type {
    font-size: 0.878477306vw;
  }
}
.top-news__more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.3333333333vw;
  height: 8.4vw;
  font-size: 3.4666666667vw;
  margin: auto;
  margin-top: 4.1333333333vw;
  color: white;
  background-color: rgba(43, 129, 202, 0.25);
  text-align: center;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-news__more {
    width: 14.6412884334vw;
    font-size: 1.317715959vw;
    height: 3.6603221083vw;
    margin-top: 0.7320644217vw;
  }
}
.top-news__more--txt {
  position: relative;
  background-color: #005a8d;
  width: 31.3333333333vw;
  height: 6.4vw;
  padding-top: 0.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-news__more--txt {
    padding-top: 0.439238653vw;
    width: 13.7628111274vw;
    height: 2.7818448023vw;
  }
}
.top-news__more:hover {
  opacity: 0.7;
}
.top-news__x {
  background: url(../data/webp/top/news/bg_content_pc.png.webp) no-repeat center;
  background-size: cover;
  width: 89.3333333333vw;
  height: 82vw;
  margin: 6.9333333333vw auto 0;
  background-color: rgba(255, 255, 255, 0.5);
}
@media only screen and (min-width: 751px) {
  .top-news__x {
    background: url(../data/webp/top/news/bg_content_pc.png.webp) no-repeat;
    background-size: contain;
    width: 44.8755490483vw;
    height: 32.9428989751vw;
    margin-top: 0;
    margin-right: 0;
    margin-left: 1.6837481698vw;
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.top-news__x--title {
  width: 47.8666666667vw;
  padding-top: 4.9333333333vw;
  margin-inline: auto;
  padding-bottom: 4.8vw;
}
@media only screen and (min-width: 751px) {
  .top-news__x--title {
    width: 17.4963396779vw;
    padding-top: 2.5622254758vw;
    margin-inline: auto;
    padding-bottom: 1.6105417277vw;
  }
}
.top-news__x--list {
  display: flex;
  width: 74.6666666667vw;
  margin: auto;
  flex-direction: column;
  row-gap: 1.2vw;
  overflow-y: scroll;
  height: 58.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-news__x--list {
    width: 39.8243045388vw;
    height: 25.3294289898vw;
  }
}

.top-movie {
  position: relative;
}
.top-movie:before {
  display: block;
  content: "";
  position: absolute;
  background: url(../data/webp/top/movie/texture.png.webp);
  width: 100%;
  height: 66.6666666667vw;
  z-index: 2;
}
@media only screen and (min-width: 751px) {
  .top-movie:before {
    height: 36.6032210835vw;
  }
}
@media only screen and (min-width: 1366px) {
  .top-movie:before {
    height: 36.6032210835vw;
  }
}
.top-movie__area {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
.top-movie__play {
  position: absolute;
  left: 50%;
  top: 21.8666666667vw;
  width: 21.3333333333vw;
  height: 21.3333333333vw;
  cursor: pointer;
  transform: translateX(-50%);
  transition: all 300ms ease;
  background: url(../data/webp/top/movie/play_btn.png.webp) no-repeat;
  background-size: contain;
  z-index: 3;
}
@media only screen and (min-width: 751px) {
  .top-movie__play {
    top: 11.7130307467vw;
    width: 11.7130307467vw;
    height: 11.7130307467vw;
  }
  .top-movie__play:hover {
    background: url(../data/webp/top/movie/play_btn_on.png.webp) no-repeat;
    background-size: contain;
  }
}

.top-feature {
  position: relative;
  height: 280vw;
  overflow: hidden;
}
@media only screen and (min-width: 751px) {
  .top-feature {
    height: 113.1039531479vw;
  }
}
.top-feature__video, .top-feature__video-bg {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 1;
}
@media only screen and (min-width: 751px) {
  .top-feature__video, .top-feature__video-bg {
    top: -6.588579795vw;
    height: 74.6705710102vw;
  }
}
.top-feature__video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 1;
}
.top-feature__card {
  background-size: contain;
  background-position: center top;
  position: relative;
  height: 178.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__card {
    background-size: contain;
    background-position: center top;
    height: 57.9795021962vw;
  }
}
.top-feature__rotate {
  mix-blend-mode: overlay;
  width: 100vw;
  height: 99.0666666667vw;
  position: absolute;
  animation: rotate 20s linear infinite;
}
@media only screen and (min-width: 751px) {
  .top-feature__rotate {
    width: 54.9048316252vw;
    height: 54.9048316252vw;
    left: 22.4743777452vw;
  }
}
.top-feature__light:before {
  display: block;
  content: "";
  background: url(../data/webp/top/feature/dice_flare.png.webp) no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  width: 100vw;
  height: 96vw;
  top: 0;
  transform: scale(1);
  animation: breathe 3s alternate infinite ease-in-out;
}
@media only screen and (min-width: 751px) {
  .top-feature__light:before {
    width: 100vw;
    height: 52.7086383602vw;
    background: url(../data/webp/top/feature/dice_flare_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: center center;
  }
}
.top-feature__dice {
  position: relative;
  z-index: 2;
  width: 25.2vw;
  top: 38vw;
  margin: auto;
}
@media only screen and (min-width: 751px) {
  .top-feature__dice {
    top: 20.7906295754vw;
    width: 13.8360175695vw;
  }
}
.top-feature__dice:before {
  display: block;
  content: "";
  background: url(../data/webp/top/feature/dice_ring.png.webp) no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  width: 44.4vw;
  height: 45.8666666667vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 751px) {
  .top-feature__dice:before {
    width: 24.3777452416vw;
    height: 25.1830161054vw;
  }
}
.top-feature__title {
  position: relative;
  font-family: "Zen Antique Soft", serif;
  font-size: 10.6666666667vw;
  font-weight: 400;
  color: white;
  padding-top: 112vw;
  left: 16vw;
  display: flex;
  flex-wrap: wrap;
  width: 76.2666666667vw;
  column-gap: 1.3333333333vw;
  z-index: 2;
  text-shadow: 1.0666666667vw 0 2vw black;
}
@media only screen and (min-width: 751px) {
  .top-feature__title {
    font-size: 4.6852122987vw;
    padding-top: 41.7276720351vw;
    margin: auto;
    left: 0;
    justify-content: center;
    width: 76.2811127379vw;
    column-gap: 0.7320644217vw;
    text-shadow: 0.5856515373vw 0 1.0980966325vw black;
  }
}
.top-feature__title--item {
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title--item {
    line-height: 3.8067349927vw;
  }
}
.top-feature__title--particle {
  font-size: 8vw;
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title--particle {
    font-size: 3.513909224vw;
    line-height: 3.8067349927vw;
  }
}
.top-feature__title--dice {
  font-size: 12.5333333333vw;
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title--dice {
    font-size: 4.831625183vw;
    line-height: 3.8067349927vw;
  }
}

/* EN VERSION */

.en_top-feature__title {
  position: relative;
  font-family: "Gentium Book Plus", serif;
  font-size: 10.6666666667vw;
  font-weight: 400;
  color: white;
  padding-top: 112vw;
  left: 16vw;
  display: flex;
  flex-wrap: wrap;
  width: 76.2666666667vw;
  column-gap: 1.3333333333vw;
  z-index: 2;
  text-shadow: 1.0666666667vw 0 2vw black;
}

.en_top-feature__title--item {
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .en_top-feature__title--item {
    line-height: 3.8067349927vw;
  }
}

.en_top-feature__title--dice {
  font-size: 12.5333333333vw;
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .en_top-feature__title--dice {
    font-size: 4.831625183vw;
    line-height: 3.8067349927vw;
  }
}

/* END EN VERSION */



.top-feature__title2 {
  position: relative;
  font-family: "Zen Antique Soft", serif;
  font-size: 10.6666666667vw;
  font-weight: 400;
  color: white;
  padding-top: 0vw;
  left: 16vw;
  display: flex;
  flex-wrap: wrap;
  width: 76.2666666667vw;
  column-gap: 1.3333333333vw;
  z-index: 2;
  text-shadow: 1.0666666667vw 0 2vw black;
}
@media only screen and (min-width: 751px) {
  .top-feature__title2 {
    font-size: 4.6852122987vw;
    padding-top: 0vw;
    margin: auto;
    left: 0;
    justify-content: center;
    width: 76.2811127379vw;
    column-gap: 0.7320644217vw;
    text-shadow: 0.5856515373vw 0 1.0980966325vw black;
  }
}
.top-feature__title2--item {
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title2--item {
    line-height: 3.8067349927vw;
  }
}
.top-feature__title2--particle {
  font-size: 8vw;
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title2--particle {
    font-size: 3.513909224vw;
    line-height: 3.8067349927vw;
  }
}
.top-feature__title2--dice {
  font-size: 12.5333333333vw;
  line-height: 12vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__title2--dice {
    font-size: 4.831625183vw;
    line-height: 3.8067349927vw;
  }
}


.top-feature__subtitle {
  position: relative;
  font-family: "Noto Serif JP", serif;
  width: 100%;
  color: white;
  font-size: 3.4666666667vw;
  line-height: 5.3333333333vw;
  text-align: center;
  font-weight: bold;
  margin-top: 5.6vw;
  z-index: 2;
}
@media only screen and (min-width: 751px) {
  .top-feature__subtitle {
    margin-top: 2.3426061493vw;
    font-size: 1.317715959vw;
    line-height: 2.196193265vw;
  }
}
.top-feature__summary {
  position: relative;
  font-family: "Noto Serif JP", serif;
  width: 100%;
  color: white;
  font-size: 3.4666666667vw;
  line-height: 5.3333333333vw;
  text-align: center;
  margin-top: 3.4666666667vw;
  z-index: 2;
}
@media only screen and (min-width: 751px) {
  .top-feature__summary {
    font-size: 1.317715959vw;
    line-height: 1.8301610542vw;
    margin-top: 0;
  }
}
.top-feature__gameplay {
  position: relative;
  z-index: 1;
  width: 101.6vw;
  height: 57.0666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-feature__gameplay {
    width: 75.9882869693vw;
    height: 43.3382137628vw;
    margin: auto;
  }
}
.top-feature__gameplay--inner {
  background: transparent url(../data/webp/top/feature/bg_movie_placeholder.png.webp) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 60.2666666667vw;
  padding-top: 1.6vw;
  position: relative;
}
@media only screen and (min-width: 751px) {
  .top-feature__gameplay--inner {
    background-image: url(../data/webp/top/feature/bg_movie_placeholder_pc.png.webp);
    width: 75.9882869693vw;
    height: 43.3382137628vw;
    padding: 1.0248901903vw 1.2445095168vw;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.top-feature__gameplay--iframe {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16/9;
  pointer-events: none;
}
.top-feature__gameplay--iframe iframe {
  width: 100%;
  height: 100%;
}

.top-world {
  position: relative;
  background-size: contain;
  width: 100%;
  height: 214.2666666667vw;
  display: flex;
  justify-content: center;
  z-index: 3;
  margin-top: -19.0666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-world {
    background-size: cover;
    width: 100%;
    height: 54.3191800878vw;
    margin-top: -7.027818448vw;
  }
}
.top-world__bg {
  position: relative;
  width: 100%;
}
.top-world__bg-blur {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
.top-world__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 95.3333333333vw;
  z-index: 1;
}
@media only screen and (min-width: 751px) {
  .top-world__inner {
    width: 61.1273792094vw;
  }
  .top-world__inner::before, .top-world__inner::after {
    content: "";
    position: absolute;
    top: 7.4666666667vw;
    width: 0.5124450952vw;
    height: 38.7994143485vw;
    background: url(../data/webp/top/world/bg_desc_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: center center;
  }
  .top-world__inner::before {
    left: 0;
  }
  .top-world__inner::after {
    right: 0;
  }
}
.top-world__title {
  padding-top: 24vw;
  padding-bottom: 11.4666666667vw;
  width: 66.8vw;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .top-world__title {
    padding-top: 10.3953147877vw;
    padding-bottom: 2.8550512445vw;
    width: 27.2327964861vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-world__title p {
    margin: 0;
  }
}
.top-world__title p:nth-of-type(1) {
  width: 8.1333333333vw;
  margin-right: 2.1333333333vw;
}
.top-world__title p:nth-of-type(2) {
  width: 8.4vw;
}
.top-world__title p:nth-of-type(3) {
  width: 6.1333333333vw;
}
.top-world__title p:nth-of-type(4) {
  width: 6.6666666667vw;
}
.top-world__title p:nth-of-type(5) {
  width: 6vw;
}
.top-world__title p:nth-of-type(6) {
  width: 6.5333333333vw;
}
.top-world__title p:nth-of-type(7) {
  width: 8.1333333333vw;
  margin-left: 2.1333333333vw;
  transform: scale(-1, 1);
}
@media only screen and (min-width: 751px) {
  .top-world__title p:nth-of-type(1) {
    width: 3.6603221083vw;
    margin-right: 1.1713030747vw;
  }
  .top-world__title p:nth-of-type(2) {
    width: 3.513909224vw;
  }
  .top-world__title p:nth-of-type(3) {
    width: 2.4890190337vw;
  }
  .top-world__title p:nth-of-type(4) {
    width: 2.7086383602vw;
  }
  .top-world__title p:nth-of-type(5) {
    width: 2.3426061493vw;
  }
  .top-world__title p:nth-of-type(6) {
    width: 2.7086383602vw;
  }
  .top-world__title p:nth-of-type(7) {
    width: 3.6603221083vw;
    margin-left: 1.1713030747vw;
  }
}
.top-world__desc {
  font-family: "Noto Serif JP", serif;
  color: white;
  font-size: 3.0666666667vw;
  line-height: 4.8vw;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .top-world__desc {
    font-size: 0.9516837482vw;
    line-height: 1.4641288433vw;
  }
}
.top-world__tag {
  font-family: "Noto Serif JP", serif;
  color: white;
  font-weight: bold;
  font-size: 3.2vw;
  line-height: 5.7333333333vw;
  margin: 12.6666666667vw auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 0.9333333333vw;
  row-gap: 1.3333333333vw;
  width: 89.3333333333vw;
  overflow-x: scroll;
  padding-bottom: 3.3333333333vw;
  cursor: pointer;
}
.top-world__tag::-webkit-scrollbar {
  height: 3.4666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-world__tag::-webkit-scrollbar {
    height: 0;
  }
}
.top-world__tag::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 2.6666666667vw;
}
.top-world__tag::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
  border: 0.8vw solid transparent;
  background-clip: content-box;
  height: 1.8666666667vw;
  border-radius: 2.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-world__tag {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.878477306vw;
    line-height: 1.1713030747vw;
    margin: 3.1478770132vw auto 0;
    width: 51.2445095168vw;
    column-gap: 0.2196193265vw;
    row-gap: 0.1464128843vw;
    padding-bottom: 0;
  }
}
.top-world__tag--item {
  text-align: center;
  width: 42.6666666667vw;
  height: 10.6666666667vw;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 2.5333333333vw 0;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-world__tag--item {
    width: 8.345534407vw;
    height: 3.3674963397vw;
    padding: 0.7320644217vw 0;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (min-width: 751px) {
  .top-world__tag--item:hover {
    background-color: rgba(255, 255, 255, 0.25);
  }
}
.top-world__modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  backdrop-filter: blur(2vw);
}
.top-world__modal.js-show {
  opacity: 1;
  visibility: visible;
  z-index: 99;
}
.top-world__modal--inner {
  width: 89.3333333333vw;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.2666666667vw solid #d5bf82;
  padding: 0.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--inner {
    width: 52.2693997072vw;
    border: 0.1464128843vw solid #d5bf82;
    padding: 0.439238653vw;
  }
}
.top-world__modal--bg {
  background: transparent url(../data/webp/top/world/modal_bg.png.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--bg {
    background-image: url(../data/webp/top/world/modal_bg_pc.png.webp);
  }
}
.top-world__modal--overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.8vw 0;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--overlay {
    padding: 0.439238653vw 0;
  }
}
.top-world__modal--content {
  font-family: "Noto Serif JP", serif;
  padding: 5.3333333333vw;
  height: 100%;
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--content {
    padding: 2.196193265vw;
  }
}
.top-world__modal--item {
  display: none;
}
.top-world__modal--item.selected {
  display: block;
}
.top-world__modal--title {
  font-size: 4.2666666667vw;
  font-weight: bold;
  height: 8.5333333333vw;
  background-color: #1d3e70;
  color: #d5bf82;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--title {
    font-size: 1.756954612vw;
    height: 4.6852122987vw;
  }
}
.top-world__modal--txt {
  font-size: 3.2vw;
  padding-top: 5.2vw;
  line-height: 4.8vw;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--txt {
    padding-top: 2.196193265vw;
    font-size: 1.1713030747vw;
    line-height: 1.9033674963vw;
  }
}
.top-world__modal--close {
  position: absolute;
  bottom: -17.3333333333vw;
  left: 50%;
  transform: translateX(-50%);
  background: transparent url(../data/webp/top/modal_close.png.webp) no-repeat;
  background-position: center;
  background-size: contain;
  width: 12.2666666667vw;
  height: 12.2666666667vw;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--close {
    bottom: -8.78477306vw;
    transition: all 400ms ease;
    width: 5.4172767204vw;
    height: 5.4172767204vw;
  }
}
.top-world__modal--close:hover {
  opacity: 0.7;
}
.top-world__modal--next {
  position: absolute;
  bottom: -15.3333333333vw;
  right: 20vw;
  background: transparent url(../data/webp/top/world/modal_btn_next.png.webp) no-repeat;
  background-position: center;
  background-size: contain;
  width: 6vw;
  height: 9.0666666667vw;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--next {
    bottom: -8.4187408492vw;
    right: 14.5680819912vw;
    transition: all 400ms ease;
    width: 2.7086383602vw;
    height: 4.0995607613vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-world__modal--next:hover {
    opacity: 0.7;
  }
}
.top-world__modal--prev {
  position: absolute;
  bottom: -15.3333333333vw;
  left: 20vw;
  background: transparent url(../data/webp/top/world/modal_btn_prev.png.webp) no-repeat;
  background-position: center;
  background-size: contain;
  width: 6vw;
  height: 9.0666666667vw;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-world__modal--prev {
    bottom: -8.4187408492vw;
    left: 14.5680819912vw;
    transition: all 400ms ease;
    width: 2.7086383602vw;
    height: 4.0995607613vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-world__modal--prev:hover {
    opacity: 0.7;
  }
}

.top-chara {
  background: url(../data/webp/top/chara/bg_chara.png.webp) no-repeat;
  background-size: contain;
  background-position: center top;
  position: relative;
  height: 333.3333333333vw;
  margin-top: -7.4666666667vw;
}
.top-chara__prev, .top-chara__next {
  position: absolute;
  top: 86.6666666667vw;
  width: 12vw;
  height: 12vw;
  z-index: 5;
  cursor: pointer;
}
@media only screen and (min-width: 751px) {
  .top-chara__prev, .top-chara__next {
    display: none;
  }
}
.top-chara__prev {
  left: 5.3333333333vw;
  background: url(../data/webp/top/button_prev.png.webp) no-repeat center top;
  background-size: 100% auto;
}
.top-chara__next {
  right: 5.3333333333vw;
  background: url(../data/webp/top/button_next.png.webp) no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (min-width: 751px) {
  .top-chara {
    background: url(../data/webp/top/chara/bg_chara_pc.png.webp) no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 78.3308931186vw;
    margin-top: -5.710102489vw;
  }
}
.top-chara__bg {
  position: absolute;
  top: 8.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__bg {
    width: 68.2284040996vw;
    top: 0;
    right: 0;
  }
}
.top-chara__title {
  padding-top: 20.6666666667vw;
  padding-bottom: 6.6666666667vw;
  width: 88.1333333333vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .top-chara__title {
    padding-top: 9.0775988287vw;
    padding-bottom: 10.541727672vw;
    width: 41.1420204978vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-chara__title p {
    margin: 0;
  }
}
.top-chara__title p:nth-of-type(1) {
  width: 8.1333333333vw;
  margin-right: 2.1333333333vw;
}
.top-chara__title p:nth-of-type(2) {
  width: 5.4666666667vw;
}
.top-chara__title p:nth-of-type(3) {
  width: 7.2vw;
}
.top-chara__title p:nth-of-type(4) {
  width: 6.6666666667vw;
}
.top-chara__title p:nth-of-type(5) {
  width: 6.1333333333vw;
}
.top-chara__title p:nth-of-type(6) {
  width: 6.4vw;
}
.top-chara__title p:nth-of-type(7) {
  width: 5.4666666667vw;
}
.top-chara__title p:nth-of-type(8) {
  width: 6.1333333333vw;
}
.top-chara__title p:nth-of-type(9) {
  width: 5.8666666667vw;
}
.top-chara__title p:nth-of-type(10) {
  width: 6.4vw;
}
.top-chara__title p:nth-of-type(11) {
  width: 8.1333333333vw;
  margin-left: 2.1333333333vw;
  transform: scale(-1, 1);
}
@media only screen and (min-width: 751px) {
  .top-chara__title p:nth-of-type(1) {
    width: 3.6603221083vw;
    margin-right: 1.1713030747vw;
  }
  .top-chara__title p:nth-of-type(2) {
    width: 2.4158125915vw;
  }
  .top-chara__title p:nth-of-type(3) {
    width: 3.0014641288vw;
  }
  .top-chara__title p:nth-of-type(4) {
    width: 2.8550512445vw;
  }
  .top-chara__title p:nth-of-type(5) {
    width: 2.7086383602vw;
  }
  .top-chara__title p:nth-of-type(6) {
    width: 2.8550512445vw;
  }
  .top-chara__title p:nth-of-type(7) {
    width: 2.4158125915vw;
  }
  .top-chara__title p:nth-of-type(8) {
    width: 2.635431918vw;
  }
  .top-chara__title p:nth-of-type(9) {
    width: 2.5622254758vw;
  }
  .top-chara__title p:nth-of-type(10) {
    width: 2.7086383602vw;
  }
  .top-chara__title p:nth-of-type(11) {
    width: 3.6603221083vw;
    margin-left: 1.1713030747vw;
  }
}
.top-chara__view {
  position: relative;
}
@media only screen and (min-width: 751px) {
  .top-chara__view {
    background: none;
    position: absolute;
    right: 0;
    width: 67.5695461201vw;
    top: -7.906295754vw;
  }
}
.top-chara__sd {
  background: url(../data/webp/top/chara/bg_sdchara.png.webp) no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  right: 0;
  height: 117.8666666667vw;
  width: 94.5333333333vw;
  top: 32.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__sd {
    background: url(../data/webp/top/chara/bg_sdchara.png.webp) no-repeat;
    background-size: cover;
    background-position: center top;
    height: 36.6032210835vw;
    width: 39.2vw;
    top: 2.5622254758vw;
  }
}
.top-chara__sd--item {
  width: 46.6666666667vw;
  height: 47.3333333333vw;
  position: absolute;
  top: 22.9333333333vw;
  right: 0;
}
@media only screen and (min-width: 751px) {
  .top-chara__sd--item {
    width: 19.3265007321vw;
    top: 9.5168374817vw;
    height: 19.6193265007vw;
  }
}
.top-chara__info {
  margin-top: -43.3333333333vw;
  position: relative;
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 751px) {
  .top-chara__info {
    margin-top: 0;
    width: 87.5549048316vw;
  }
}
.top-chara__alias {
  margin-inline: auto;
  margin-bottom: 3.7333333333vw;
  position: relative;
  width: fit-content;
  background-color: rgba(26, 38, 56, 0.5);
  text-align: center;
  color: #d5bf82;
  font-size: 2.6666666667vw;
  line-height: 4.5333333333vw;
  height: 4.5333333333vw;
  font-family: "Noto Serif JP", serif;
  display: flex;
}
@media only screen and (min-width: 751px) {
  .top-chara__alias {
    margin-bottom: 1.6837481698vw;
    margin-top: 0.6954612006vw;
    margin-left: 0;
    font-size: 1.1713030747vw;
    line-height: 2.196193265vw;
    height: 2.196193265vw;
  }
}
.top-chara__alias:before {
  display: block;
  content: "";
  position: relative;
  width: 2.6666666667vw;
  height: 100%;
  top: 0;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  background-color: #1a2638;
  right: -0.1333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__alias:before {
    width: 1.1713030747vw;
    right: -0.0732064422vw;
  }
}
.top-chara__alias--txt {
  background-color: #1a2638;
  height: 100%;
  padding-left: 2vw;
  padding-right: 2vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__alias--txt {
    padding-left: 0.5490483163vw;
    padding-right: 0.5490483163vw;
  }
}
.top-chara__alias:after {
  display: block;
  content: "";
  position: relative;
  width: 2.6666666667vw;
  height: 100%;
  top: 0;
  clip-path: polygon(0 100%, 100% 0, 0 0);
  background-color: #1a2638;
  left: -0.1333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__alias:after {
    width: 1.1713030747vw;
    left: -0.0732064422vw;
  }
}
.top-chara__name {
  width: 93.3333333333vw;
  margin-inline: auto;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  font-size: 8.5333333333vw;
  line-height: 9.8666666667vw;
  color: #1a2638;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .top-chara__name {
    width: 43.9238653001vw;
    margin-left: 0;
    text-align: left;
    font-size: 4.39238653vw;
    line-height: 5.1244509517vw;
    letter-spacing: 0.2em;
    margin-left: -0.6588579795vw;
  }
}
.top-chara__cv {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 4vw;
  padding-bottom: 5.6vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__cv {
    justify-content: start;
    padding-top: 1.6837481698vw;
    padding-bottom: 1.9033674963vw;
  }
}
.top-chara__cv--name {
  color: #1a2638;
  font-size: 4.6666666667vw;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
}
@media only screen and (min-width: 751px) {
  .top-chara__cv--name {
    font-size: 1.9033674963vw;
  }
}
.top-chara__cv--btn {
  width: 21.6vw;
  margin-left: 4.1333333333vw;
  height: 7.0666666667vw;
  background: url(../data/webp/top/chara/btn_cv.png.webp) no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-chara__cv--btn {
    width: 8.9311859444vw;
    height: 2.9282576867vw;
    margin-left: 1.6837481698vw;
  }
}
@media only screen and (min-width: 751px) and (hover: hover) {
  .top-chara__cv--btn:hover {
    background-image: url(../data/webp/top/chara/btn_cv_on.png.webp);
  }
}
.top-chara__story {
  font-size: 3.1333333333vw;
  font-family: "Noto Serif JP", serif;
  line-height: 5.3333333333vw;
  text-shadow: 0.1333333333vw 0 1.0666666667vw white;
}
@media only screen and (min-width: 751px) {
  .top-chara__story {
    font-size: 1.1713030747vw;
    line-height: 1.9033674963vw;
    text-shadow: 0.0732064422vw 0 0.3660322108vw white;
    width: 43.9238653001vw;
  }
}
.top-chara__special {
  font-size: 3.2vw;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  line-height: 6.6666666667vw;
  display: flex;
  flex-direction: row;
  column-gap: 8vw;
  justify-content: center;
  margin: 6.5333333333vw auto 13.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__special {
    font-size: 0.878477306vw;
    line-height: 2.0497803807vw;
    justify-content: start;
    column-gap: 1.6837481698vw;
    margin: 1.8301610542vw auto 7.3206442167vw;
  }
}
.top-chara__special--bg {
  background: #1a2638;
  padding: 0 2.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__special--bg {
    padding: 0 0.7320644217vw;
  }
}
.top-chara__special--title {
  color: white;
}
.top-chara__special--item {
  font-size: 3.7333333333vw;
  padding-left: 2.2666666667vw;
  display: inline-flex;
}
@media only screen and (min-width: 751px) {
  .top-chara__special--item {
    font-size: 1.1713030747vw;
    padding-left: 0.5856515373vw;
  }
}
.top-chara__special--icon {
  width: 6.4vw;
  margin-left: 2vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__special--icon {
    width: 1.9033674963vw;
    margin-left: 0.439238653vw;
  }
}
.top-chara__elemental {
  display: flex;
  flex-direction: row;
}
.top-chara__class {
  display: flex;
  flex-direction: row;
}
.top-chara__nav {
  height: 88.6666666667vw;
  position: relative;
  margin-top: 10.4vw;
  z-index: 10;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav {
    display: flex;
    height: 12.8vw;
    margin-top: -3.3333333333vw;
    overflow: hidden;
  }
}
.top-chara__nav:before {
  display: block;
  content: "";
  background-color: #33496b;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 63.8666666667vw;
  top: 54%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 751px) {
  .top-chara__nav:before {
    height: 8.0527086384vw;
    top: 50%;
  }
}
.top-chara__nav--main {
  width: 90vw;
  height: 32.4vw;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 2.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--main {
    width: 33.6749633968vw;
    height: 11.6398243045vw;
    column-gap: 0.878477306vw;
    display: inline-flex;
    margin-left: 2.9282576867vw;
    margin-right: 1.0980966325vw;
  }
}
.top-chara__nav--main:before {
  display: block;
  content: "";
  background: url(../data/webp/top/chara/bg_card_main.png.webp) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 89.4666666667vw;
  height: 27.4666666667vw;
  position: absolute;
  background-color: #2a446b;
  border-radius: 13.6vw;
  box-shadow: 0 0 6.6666666667vw rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--main:before {
    background: url(../data/webp/top/chara/bg_card_main_pc.png.webp) no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #2a446b;
    box-shadow: 0 0 3.6603221083vw rgba(0, 0, 0, 0.25);
    width: 33.6749633968vw;
    height: 10.2489019034vw;
  }
}
.top-chara__nav--bigthree {
  width: 22vw;
  position: relative;
  cursor: pointer;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--bigthree {
    width: 8.78477306vw;
    height: 12.4450951684vw;
  }
}
.top-chara__nav--bigthree .top-chara__nav--screen {
  opacity: 0;
}
@media (hover: hover) {
  .top-chara__nav--bigthree:hover .top-chara__nav--screen {
    opacity: 1;
  }
}
.top-chara__nav--screen {
  width: 22vw;
  position: absolute;
  top: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: all 300ms ease;
  z-index: 1;
  pointer-events: none;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--screen {
    width: 8.78477306vw;
    height: 12.4450951684vw;
  }
}
.top-chara__nav--sub {
  margin-inline: auto;
  margin-top: 2.6666666667vw;
  height: 38.9333333333vw;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 7%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100%;
}
@media only screen and (max-width: 750px) {
  .top-chara__nav--sub {
    padding-left: 5.3333333333vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--sub {
    margin: 0;
    width: 61.4934114202vw;
    width: 63.6896046852vw;
    height: 100%;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
  }
}
.top-chara__nav--container {
  height: 38.9333333333vw;
}
@media only screen and (max-width: 750px) {
  .top-chara__nav--container {
    padding-left: 5.3333333333vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--container {
    padding: 0 7.3206442167vw;
    height: 100%;
  }
}
.top-chara__nav--scrollbar {
  background: rgba(0, 0, 0, 0.25);
  width: 89.3333333333vw !important;
  height: 3.4666666667vw !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translate3d(-50%, 0, 0);
  border: 0.8vw solid transparent;
  overflow: hidden;
}
.top-chara__nav--scrollbar .swiper-scrollbar-drag {
  background-color: rgb(255, 255, 255);
  height: 1.8666666667vw;
  cursor: grab;
}
.top-chara__nav--next {
  width: 10.5333333333vw;
  height: 10.5333333333vw;
  top: -153.3333333333vw;
  right: 6.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--next {
    width: 3.8067349927vw;
    height: 3.8067349927vw;
    top: 6.588579795vw;
    right: 2.196193265vw;
    transition: opacity 200ms;
  }
  .top-chara__nav--next:hover {
    opacity: 0.7;
  }
}
.top-chara__nav--next:after {
  display: block;
  content: "";
  background: url(../data/webp/top/button_next.png.webp) no-repeat;
  background-size: contain;
  width: 10.5333333333vw;
  height: 10.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--next:after {
    width: 4.831625183vw;
    height: 4.831625183vw;
  }
}
.top-chara__nav--next.swiper-button-disabled {
  opacity: 0.5;
}
.top-chara__nav--prev {
  width: 10.5333333333vw;
  height: 10.5333333333vw;
  top: -153.3333333333vw;
  left: 6.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--prev {
    width: 3.8067349927vw;
    height: 3.8067349927vw;
    top: 6.588579795vw;
    left: 2.196193265vw;
    transition: opacity 200ms;
  }
  .top-chara__nav--prev:hover {
    opacity: 0.7;
  }
}
.top-chara__nav--prev:after {
  display: block;
  content: "";
  background: url(../data/webp/top/button_prev.png.webp) no-repeat;
  background-size: contain;
  width: 10.5333333333vw;
  height: 10.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--prev:after {
    width: 4.831625183vw;
    height: 4.831625183vw;
  }
}
.top-chara__nav--prev.swiper-button-disabled {
  opacity: 0.5;
}
.top-chara__nav--sidechara {
  width: 21.3333333333vw;
  margin-right: 2.4vw;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--sidechara {
    max-width: 8.6383601757vw;
    max-height: 12.298682284vw;
    margin-right: 1.4641288433vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--sidechara:last-of-type {
    margin-right: 0;
  }
}
.top-chara__nav--sidechara .top-chara__nav--sidescreen {
  opacity: 0;
}
@media (hover: hover) {
  .top-chara__nav--sidechara:hover .top-chara__nav--sidescreen {
    opacity: 1;
  }
}
.top-chara__nav--sidescreen {
  width: 21.3333333333vw;
  position: absolute;
  top: 0;
  opacity: 0;
  mix-blend-mode: screen;
  transition: all 300ms ease;
  z-index: 1;
  pointer-events: none;
}
@media only screen and (min-width: 751px) {
  .top-chara__nav--sidescreen {
    width: 8.6383601757vw;
    height: 12.298682284vw;
  }
}
.top-chara__kvmain {
  position: absolute;
  width: 100%;
  height: 190.6666666667vw;
  opacity: 0;
}
@media only screen and (min-width: 751px) {
  .top-chara__kvmain {
    height: 37.0424597365vw;
  }
}
.top-chara__kvmain.selected {
  opacity: 1;
}
.top-chara__kvmain-item {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
@media only screen and (min-width: 751px) {
  .top-chara__kvmain-item {
    width: 100%;
  }
}
.top-chara__kvmain-item.selected {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}
.top-chara__content {
  height: 190.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__content {
    height: 37.0424597365vw;
  }
}

.top-system {
  background: url(../data/webp/top/system/bg.png.webp) no-repeat;
  background-size: contain;
  background-position: center top;
  position: relative;
  height: 146.8vw;
  z-index: 4;
  margin-top: -8vw;
}
@media only screen and (min-width: 751px) {
  .top-system {
    background: url(../data/webp/top/system/bg_pc.png.webp) no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    height: 67.9355783309vw;
    margin-top: -5.0666666667vw;
  }
}
.top-system__inner {
  width: 100%;
  height: auto;
}
.top-system__title {
  padding-top: 23.3333333333vw;
  padding-bottom: 9.8666666667vw;
  width: 70.6666666667vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .top-system__title {
    padding-top: 11.5666178624vw;
    padding-bottom: 3.8799414348vw;
    width: 30.8199121523vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-system__title p {
    margin: 0;
  }
}
.top-system__title p:nth-of-type(1) {
  width: 8.1333333333vw;
  margin-right: 3.2vw;
}
.top-system__title p:nth-of-type(2) {
  width: 4.9333333333vw;
}
.top-system__title p:nth-of-type(3) {
  width: 6.6666666667vw;
}
.top-system__title p:nth-of-type(4) {
  width: 4.9333333333vw;
}
.top-system__title p:nth-of-type(5) {
  width: 6.2666666667vw;
}
.top-system__title p:nth-of-type(6) {
  width: 6vw;
}
.top-system__title p:nth-of-type(7) {
  width: 7.7333333333vw;
}
.top-system__title p:nth-of-type(8) {
  width: 8.1333333333vw;
  margin-left: 3.2vw;
  transform: scale(-1, 1);
}
@media only screen and (min-width: 751px) {
  .top-system__title p:nth-of-type(1) {
    width: 3.6603221083vw;
    margin-right: 1.1713030747vw;
  }
  .top-system__title p:nth-of-type(2) {
    width: 2.0497803807vw;
  }
  .top-system__title p:nth-of-type(3) {
    width: 2.7818448023vw;
  }
  .top-system__title p:nth-of-type(4) {
    width: 2.0497803807vw;
  }
  .top-system__title p:nth-of-type(5) {
    width: 2.4890190337vw;
  }
  .top-system__title p:nth-of-type(6) {
    width: 2.7086383602vw;
  }
  .top-system__title p:nth-of-type(7) {
    width: 3.3674963397vw;
  }
  .top-system__title p:nth-of-type(8) {
    width: 3.6603221083vw;
    margin-left: 1.1713030747vw;
  }
}
.top-system__gallery {
  margin: 0 auto;
  width: 100%;
  height: 93.8666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 751px) {
  .top-system__gallery {
    width: 100%;
    height: 45.3879941435vw;
  }
}
.top-system__swiper {
  height: 100%;
}
.top-system__swiper--slide {
  width: 110vw;
  height: 76vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper--slide {
    width: 56.4421669107vw;
    height: 38.7994143485vw;
    margin-right: 1.756954612vw;
  }
}
.top-system__swiper--next {
  width: 10.5333333333vw;
  height: 10.5333333333vw;
  top: 40.5333333333vw;
  right: 5.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper--next {
    width: 4.831625183vw;
    height: 4.831625183vw;
    top: 18.3016105417vw;
    right: 19.0336749634vw;
    transition: opacity 200ms;
  }
  .top-system__swiper--next:hover {
    opacity: 0.7;
  }
}
.top-system__swiper--next:after {
  display: block;
  content: "";
  background: url(../data/webp/top/button_next.png.webp) no-repeat;
  background-size: contain;
  width: 10.5333333333vw;
  height: 10.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper--next:after {
    width: 4.831625183vw;
    height: 4.831625183vw;
  }
}
.top-system__swiper--next.swiper-button-disabled {
  opacity: 0.5;
}
.top-system__swiper--prev {
  width: 10.5333333333vw;
  height: 10.5333333333vw;
  top: 40.5333333333vw;
  left: 5.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper--prev {
    width: 4.831625183vw;
    height: 4.831625183vw;
    top: 18.3016105417vw;
    left: 19.0336749634vw;
    transition: opacity 200ms;
  }
  .top-system__swiper--prev:hover {
    opacity: 0.7;
  }
}
.top-system__swiper--prev:after {
  display: block;
  content: "";
  background: url(../data/webp/top/button_prev.png.webp) no-repeat;
  background-size: contain;
  width: 10.5333333333vw;
  height: 10.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper--prev:after {
    width: 4.831625183vw;
    height: 4.831625183vw;
  }
}
.top-system__swiper--prev.swiper-button-disabled {
  opacity: 0.5;
}
.top-system__swiper .swiper-pagination {
  width: 91.8666666667vw;
  height: 10.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper .swiper-pagination {
    width: 30.0146412884vw;
    height: 4.2459736457vw;
  }
}
.top-system__swiper .swiper-pagination-bullets {
  bottom: 0;
  margin-top: 6.9333333333vw;
  background: url(../data/webp/top/system/swiper_pagination_bg.png.webp) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  column-gap: 5.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper .swiper-pagination-bullets {
    margin-top: 1.317715959vw;
    column-gap: 1.756954612vw;
  }
}
.top-system__swiper .swiper-pagination-bullet {
  border-radius: 0;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  transform: scale(1);
  background-color: rgb(255, 255, 255);
  transform: rotate(45deg);
}
@media only screen and (min-width: 751px) {
  .top-system__swiper .swiper-pagination-bullet {
    width: 0.878477306vw;
    height: 0.878477306vw;
  }
}
.top-system__swiper .swiper-pagination-bullet-active:before {
  display: block;
  content: "";
  border-radius: 0;
  width: 4.8vw;
  height: 4.8vw;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid white 0.4vw;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 751px) {
  .top-system__swiper .swiper-pagination-bullet-active:before {
    width: 2.0497803807vw;
    height: 2.0497803807vw;
    border: solid white 0.2196193265vw;
  }
}
.top-system__swiper .swiper-slide-next {
  filter: brightness(0.5);
}
.top-system__swiper .swiper-slide-prev {
  filter: brightness(0.5);
}
.top-system__swiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-system__swiper.swiper {
  width: 100%;
  height: 75.7333333333vw;
  overflow: hidden;
}
@media only screen and (min-width: 751px) {
  .top-system__swiper.swiper {
    height: 38.7994143485vw;
  }
}

.top-modal {
  position: relative;
}
.top-modal__vdo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  backdrop-filter: blur(2vw);
}
.top-modal__vdo.js-show {
  opacity: 1;
  visibility: visible;
  z-index: 99;
}
.top-modal__vdo--inner {
  width: 100%;
  height: 57.4666666667vw;
  padding-top: 0.5333333333vw;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--inner {
    width: 73.0600292826vw;
    height: 41.1420204978vw;
    padding: 0.2196193265vw 0.3660322108vw;
    top: 3.6603221083vw;
    transform: translate(-50%, 0);
  }
}
@media only screen and (min-width: 1367px) {
  .top-modal__vdo--inner {
    width: 998px;
    height: 562px;
    padding: 3px 5px;
    top: 50px;
  }
}
.top-modal__vdo--bg {
  width: 100%;
  height: 57.0666666667vw;
  padding-top: 0vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
.top-modal__vdo--bg:before {
  display: block;
  content: "";
  border-bottom: 0.5333333333vw solid transparent;
  position: absolute;
  top: 0;
  border-image: linear-gradient(0.25turn, rgb(189, 124, 39), rgb(248, 221, 111), rgb(255, 249, 225));
  border-image-slice: 1;
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--bg:before {
    display: none;
  }
}
.top-modal__vdo--bg:after {
  display: block;
  content: "";
  border-bottom: 0.5333333333vw solid transparent;
  position: absolute;
  bottom: 0;
  border-image: linear-gradient(0.25turn, rgb(255, 249, 225), rgb(248, 221, 111), rgb(189, 124, 39));
  border-image-slice: 1;
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--bg:after {
    display: none;
  }
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--bg {
    background-image: url(../data/webp/top/frame_yt_pc.png.webp);
    background-size: contain;
    background-position: center;
    width: 73.0600292826vw;
    height: 41.1420204978vw;
    padding: 0.2196193265vw 0.3660322108vw;
    top: 0;
    transform: translate(-50%, 0);
  }
}
@media only screen and (min-width: 1367px) {
  .top-modal__vdo--bg {
    background-image: url(../data/webp/top/frame_yt_pc.png.webp);
    width: 998px;
    height: 562px;
    padding: 3px 5px;
  }
}
.top-modal__vdo--iframe {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16/9;
}
.top-modal__vdo--iframe iframe {
  width: 100%;
  height: 100%;
}
.top-modal__vdo--close {
  position: absolute;
  bottom: -17.3333333333vw;
  left: 50%;
  background: transparent url(../data/webp/top/modal_close.png.webp) no-repeat;
  background-position: center;
  background-size: contain;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  transition: all 300ms ease;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--close {
    bottom: -9.5168374817vw;
    transition: all 400ms ease;
    width: 5.4172767204vw;
    height: 5.4172767204vw;
  }
}
@media only screen and (min-width: 751px) {
  .top-modal__vdo--close:hover {
    opacity: 0.7;
  }
}

.under {
  height: 100%;
  width: 100%;
  background: transparent;
}
.under-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../data/webp/template/bg.png.webp) no-repeat;
  background-size: cover;
  z-index: -1;
}
@media only screen and (min-width: 751px) {
  .under-bg {
    padding: 120px 0;
    background-size: 100%;
    background-image: url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp);
    background-position: 0 -20vw, 0 30vw, 0 80vw, 0 130vw;
    /* original 
    background-position: 0 -20vw, 0 20vw, 0 60vw, 0 130vw;
    */
    background-repeat: no-repeat;
  }
}

/* under bg for long */
.under-bg-long {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../data/webp/template/bg.png.webp) no-repeat;
  background-size: cover;
  z-index: -1;
}
@media only screen and (min-width: 751px) {
  .under-bg-long {
    padding: 120px 0;
    background-size: 100%;
    background-image: url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp), 
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp),
                      url(../data/webp/template/bg_pc.png.webp), url(../data/webp/template/bg_pc.png.webp);
    background-position: 0 -20vw, 0 30vw, 0 80vw, 0 130vw, 0 180vw, 0 260vw, 0 310vw, 0 360vw, 0 430vw, 0 480vw, 0 530vw,
    0 580vw, 0 610vw, 0 660vw, 0 730vw, 0 780vw, 0 810vw, 0 860vw, 0 930vw, 0 980vw, 0 1010vw;
    background-repeat: no-repeat;
  }
}
/* end modified */

.under-inner {
  position: relative;
  height: auto;
  padding-top: 24.9333333333vw;
}
@media only screen and (min-width: 751px) {
  .under-inner {
    padding-top: 8.1991215227vw;
    width: 65.8857979502vw;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 1367px) {
  .under-inner {
    width: 900px;
  }
}
.under-title {
  width: 100%;
  height: 18.4vw;
  background: url(../img/template/title_main_bg.png) no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 751px) {
  .under-title {
    width: 65.5929721816vw;
    height: 6.9546120059vw;
    background: url(../img/template/title_main_bg_pc.png) no-repeat;
    background-size: contain;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 1367px) {
  .under-title {
    width: 896px;
    height: 95px;
  }
}

.under-title-afr {
  width: 100%;
  height: 18.4vw;
  background: url(../img/template/title_template_afr.png) no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 751px) {
  .under-title-afr {
    width: 65.5929721816vw;
    height: 6.9546120059vw;
    background: url(../img/template/title_template_afr_pc.png) no-repeat;
    background-size: contain;
    margin-inline: auto;
  }
}
@media only screen and (min-width: 1367px) {
  .under-title-afr {
    width: 896px;
    height: 95px;
  }
}

.under-title__wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
}
@media only screen and (min-width: 751px) {
  .under-title__wrap {
    width: 65.5929721816vw;
    height: 6.9546120059vw;
    margin-inline: auto;
    padding: 0 7.3206442167vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-title__wrap {
    width: 896px;
    height: 95px;
    padding: 0 100px;
  }
}
.under-title__txt {
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  font-size: 5.3333333333vw;
  color: rgb(229, 204, 128);
  letter-spacing: 1.0666666667vw;
  width: auto;
  max-width: 89.3333333333vw;
  display: block;
  background: linear-gradient(to right, rgb(242, 223, 134) 0%, rgb(203, 156, 77) 50%, rgb(242, 223, 134) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  line-height: normal;
}
.under-title__txt_announce {
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  font-size: 5.3333333333vw;
  color: rgb(229, 204, 128);
  letter-spacing: 0.0666666667vw;
  width: auto;
  max-width: 89.3333333333vw;
  display: block;
  background: linear-gradient(to right, rgb(242, 223, 134) 0%, rgb(203, 156, 77) 50%, rgb(242, 223, 134) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  line-height: normal;
}
@media only screen and (min-width: 751px) {
  .under-title__txt {
    font-size: 2.196193265vw;
    letter-spacing: 0.5856515373vw;
    max-width: 51.2445095168vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-title__txt {
    font-size: 30px;
    letter-spacing: 8px;
    max-width: 700px;
  }
}
@media only screen and (min-width: 751px) {
  .under-title__txt_announce {
    font-size: 2.196193265vw;
    letter-spacing: 0.1856515373vw;
    max-width: 51.2445095168vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-title__txt_announce {
    font-size: 30px;
    letter-spacing: 1px;
    max-width: 700px;
  }
}
.under-content {
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  margin-top: 5.4666666667vw;
  height: auto;
  padding-top: 6.5333333333vw;
  padding-bottom: 16vw;
}
@media only screen and (min-width: 751px) {
  .under-content {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1.4641288433vw;
    margin-top: 2.2693997072vw;
    padding-top: 2.7086383602vw;
    padding-bottom: 5.4904831625vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-content {
    border-radius: 20px;
    margin-top: 31px;
    padding-top: 37px;
    padding-bottom: 75px;
  }
}
.under-subtitle {
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  font-size: 4.2666666667vw;
  color: white;
  width: 100%;
  height: auto;
  border-top: 0.6666666667vw solid rgba(21, 86, 142, 0.5);
  border-bottom: 0.6666666667vw solid rgba(21, 86, 142, 0.5);
}
@media only screen and (min-width: 751px) {
  .under-subtitle {
    font-size: 1.9033674963vw;
    border-top: 0.2196193265vw solid rgba(21, 86, 142, 0.5);
    border-bottom: 0.2196193265vw solid rgba(21, 86, 142, 0.5);
  }
}
@media only screen and (min-width: 1367px) {
  .under-subtitle {
    font-size: 26px;
    border-top: 3px solid rgba(21, 86, 142, 0.5);
    border-bottom: 3px solid rgba(21, 86, 142, 0.5);
  }
}
.under-subtitle__item {
  height: auto;
  background-color: rgb(21, 86, 142);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 2.4vw 4.6666666667vw;
  letter-spacing: 0.2vw;
  line-height: 5.6vw;
}
@media only screen and (min-width: 751px) {
  .under-subtitle__item {
    column-gap: 1.1713030747vw;
    letter-spacing: 0.1098096633vw;
    line-height: normal;
    padding: 2.5333333333vw 3.6603221083vw;
    justify-content: center;
  }
}
@media only screen and (min-width: 1367px) {
  .under-subtitle__item {
    height: auto;
    column-gap: 16px;
    letter-spacing: 1.5px;
    padding: 19px 50px;
  }
}
.under-subtitle__item--txt {
  width: 74.6666666667vw;
  text-align: center;
  letter-spacing: 0.2vw;
  line-height: 5.6vw;
  word-wrap: break-word;
}
@media only screen and (min-width: 751px) {
  .under-subtitle__item--txt {
    width: 40.2635431918vw;
    letter-spacing: 0.1098096633vw;
    line-height: normal;
    justify-content: center;
  }
}
@media only screen and (min-width: 1367px) {
  .under-subtitle__item--txt {
    max-width: 522px;
    column-gap: 16px;
    letter-spacing: 1.5px;
  }
}
.under-subtitle__item--decoleft {
  width: 8.5333333333vw;
  height: 6.2666666667vw;
  background: url(../data/webp/template/subtitle_ornament.png.webp) no-repeat;
  background-size: cover;
  position: relative;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 751px) {
  .under-subtitle__item--decoleft {
    width: 3.8799414348vw;
    height: 2.9282576867vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-subtitle__item--decoleft {
    width: 53px;
    height: 40px;
  }
}
.under-subtitle__item--decoright {
  width: 8.5333333333vw;
  height: 6.2666666667vw;
  background: url(../data/webp/template/subtitle_ornament.png.webp) no-repeat;
  background-size: cover;
  position: relative;
  top: 0;
  right: 0;
  transform: rotate(180deg) scaleY(-1);
}
@media only screen and (min-width: 751px) {
  .under-subtitle__item--decoright {
    width: 3.8799414348vw;
    height: 2.9282576867vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-subtitle__item--decoright {
    width: 53px;
    height: 40px;
  }
}
.under-banner {
  margin-top: 6.4vw;
}
@media only screen and (min-width: 751px) {
  .under-banner {
    margin-top: 2.635431918vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-banner {
    margin-top: 36px;
  }
}
.under-tgs {
  width: 100%;
  margin-inline: auto;
  margin-top: 6.4vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs {
    width: 51.2445095168vw;
    margin-top: 4.1727672035vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs {
    width: 700px;
    margin-top: 57px;
  }
}
.under-tgs__info {
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 6.9333333333vw;
  font-family: "Noto Serif JP", serif;
  font-size: 3.7333333333vw;
  padding-top: 7.6vw;
  padding-bottom: 9.6vw;
  max-width: 750px;
}
@media only screen and (min-width: 751px) {
  .under-tgs__info {
    border-radius: 0.7320644217vw;
    margin-top: 3.513909224vw;
    font-size: 1.317715959vw;
    padding-top: 3.0014641288vw;
    padding-bottom: 2.7086383602vw;
    max-width: 700px;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__info {
    border-radius: 10px;
    margin-top: 48px;
    font-size: 18px;
    padding-top: 41px;
    padding-bottom: 37px;
  }
}
.under-tgs__period {
  color: rgb(21, 86, 142);
}
.under-tgs__period--title {
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vw;
  background: url(../data/webp/template/title_tgs_bg.png.webp) no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 3.0666666667vw;
  padding: 0 24vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--title {
    height: 3.074670571vw;
    background: url(../data/webp/template/title_tgs_bg_pc.png.webp) no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 2.1229868228vw;
    padding: 0 13.17715959vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--title {
    height: 40px;
    margin-bottom: 29px;
    padding: 0 180px;
    max-width: 700px;
  }
}
.under-tgs__period--item {
  font-size: 3.2vw;
  line-height: 4.5333333333vw;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 2.4vw;
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--item {
    font-size: 1.1713030747vw;
    line-height: 1.9033674963vw;
    justify-content: right;
    margin-top: 1.0248901903vw;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 6.588579795vw 0 2.196193265vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--item {
    font-size: 16px;
    line-height: 26px;
    margin-top: 14px;
    padding: 0 90px 0 30px;
  }
}

.under-tgs__period--item-mid {
  font-size: 3.2vw;
  line-height: 4.5333333333vw;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 2.4vw;
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--item-mid {
    font-size: 1.1713030747vw;
    line-height: 1.9033674963vw;
    justify-content: center;
    margin-top: 1.0248901903vw;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 6.588579795vw 0 2.196193265vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--item-mid {
    font-size: 16px;
    line-height: 26px;
    margin-top: 14px;
    padding: 0 90px 0 30px;
  }
}


.under-tgs__period--type {
  margin-right: 2.5333333333vw;
  width: auto;
  font-size: 2.6666666667vw;
  text-align: center;
  min-width: 20vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--type {
    min-width: 7.3206442167vw;
    font-size: 1.0248901903vw;
    margin-right: 1.0980966325vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--type {
    min-width: 100px;
    font-size: 14px;
    margin-right: 15px;
  }
}
.under-tgs__period--border {
  border: 0.2666666667vw solid rgb(21, 86, 142);
  border-radius: 0.1333333333vw;
  width: auto;
  display: block;
  padding: 1.2vw 1.7333333333vw;
  line-height: 2.9333333333vw;
  max-width: 20vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--border {
    max-width: 7.3333333333vw;
    font-size: 1.0248901903vw;
    border: 0.1464128843vw solid rgb(21, 86, 142);
    border-radius: 0.0732064422vw;
    padding: 0.2196193265vw 0.3660322108vw;
    line-height: 2.196193265vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--border {
    padding: 3px 5px;
    font-size: 14px;
    border: 2px solid rgb(21, 86, 142);
    border-radius: 1px;
    line-height: 30px;
  }
}
.under-tgs__period--txt {
  max-width: 520px;
}
@media only screen and (min-width: 751px) {
  .under-tgs__period--txt {
    max-width: 27.4524158126vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__period--txt {
    max-width: 380px;
  }
}
.under-tgs__location {
  color: rgb(21, 86, 142);
}
.under-tgs__location--title {
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vw;
  background: url(../data/webp/template/title_tgs_bg.png.webp) no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 5.4666666667vw;
  margin-bottom: 5.2vw;
  padding: 0 24vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__location--title {
    height: 2.9282576867vw;
    background: url(../data/webp/template/title_tgs_bg_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 2.4890190337vw;
    margin-bottom: 1.6837481698vw;
    padding: 0 13.17715959vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__location--title {
    height: 42px;
    margin-top: 34px;
    margin-bottom: 23px;
    padding: 0 180px;
  }
}
.under-tgs__location--subtitle {
  font-size: 3.7333333333vw;
  font-weight: bold;
  line-height: 4vw;
  text-align: center;
}
@media only screen and (min-width: 751px) {
  .under-tgs__location--subtitle {
    font-size: 1.756954612vw;
    line-height: 2.196193265vw;
    padding: 0 4.39238653vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__location--subtitle {
    font-size: 24px;
    line-height: 30px;
    padding: 0 60px;
  }
}
.under-tgs__location--item {
  font-size: 3.2vw;
  line-height: 4.5333333333vw;
  display: flex;
  justify-content: center;
  margin-top: 2.4vw;
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 751px) {
  .under-tgs__location--item {
    font-size: 1.1713030747vw;
    line-height: 1.9033674963vw;
    justify-content: center;
    margin-top: 1.0248901903vw;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 4.39238653vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__location--item {
    font-size: 16px;
    line-height: 26px;
    margin-top: 14px;
    padding: 0 60px;
  }
}
.under-tgs__location--type {
  margin-right: 2.5333333333vw;
  width: auto;
  font-size: 2.6666666667vw;
  text-align: center;
  min-width: 20vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__location--type {
    min-width: 7.3206442167vw;
    font-size: 1.0248901903vw;
    margin-right: 1.0980966325vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__location--type {
    min-width: 100px;
    font-size: 14px;
    margin-right: 15px;
  }
}
.under-tgs__location--border {
  border: 0.2666666667vw solid rgb(21, 86, 142);
  border-radius: 0.1333333333vw;
  width: auto;
  display: block;
  padding: 1.2vw 1.7333333333vw;
  line-height: 2.9333333333vw;
  max-width: 20vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__location--border {
    padding: 0.2196193265vw 0.3660322108vw;
    font-size: 1.0248901903vw;
    border: 0.1464128843vw solid rgb(21, 86, 142);
    border-radius: 0.0732064422vw;
    line-height: 2.196193265vw;
    max-width: 7.3333333333vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__location--border {
    padding: 3px 5px;
    font-size: 14px;
    border: 2px solid rgb(21, 86, 142);
    border-radius: 1px;
    line-height: 30px;
  }
}
.under-tgs__overview {
  color: rgb(21, 86, 142);
}
.under-tgs__overview--title {
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vw;
  background: url(../data/webp/template/title_tgs_bg.png.webp) no-repeat;
  background-size: contain;
  background-position: center;
  margin-bottom: 7.0666666667vw;
  padding-left: 26.6666666667vw;
  padding-right: 26.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--title {
    height: 3.074670571vw;
    background: url(../data/webp/template/title_tgs_bg_pc.png.webp) no-repeat;
    background-size: contain;
    background-position: center;
    margin-bottom: 3.1478770132vw;
    padding-left: 14.6412884334vw;
    padding-right: 14.6412884334vw;
    max-width: 51.2445095168vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--title {
    height: 42px;
    margin-bottom: 43px;
    padding: 0 180px;
  }
}
.under-tgs__overview--list {
  display: flex;
  flex-direction: column;
  width: 89.3333333333vw;
  margin-inline: auto;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--list {
    width: 43.3382137628vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--list {
    width: 592px;
  }
}
.under-tgs__overview--row {
  display: grid;
  grid-template-columns: 20.6666666667vw 1fr;
  margin-bottom: 2.4vw;
  font-size: 3.2vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--row {
    grid-template-columns: 7.906295754vw 1fr;
    margin-bottom: 0.7320644217vw;
    font-size: 1.1713030747vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--row {
    grid-template-columns: 108px 1fr;
    margin-bottom: 10px;
    font-size: 16px;
  }
}
.under-tgs__overview--type {
  width: 100%;
  position: relative;
}
.under-tgs__overview--type:after {
  display: block;
  content: "";
  position: absolute;
  content: ":";
  right: 0;
  top: -2px;
}
.under-tgs__overview--txt {
  padding-left: 2.6666666667vw;
}
.under-tgs__overview--reference {
  display: flex;
  font-size: 2.6666666667vw;
  line-height: 4.8vw;
  margin-top: 4.5333333333vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--reference {
    font-size: 1.0248901903vw;
    line-height: 1.4641288433vw;
    width: 45.3879941435vw;
    margin-top: 2.4vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--reference {
    font-size: 14px;
    line-height: 20px;
    width: 620px;
    margin-top: 18px;
  }
}
.under-tgs__overview--reference:before {
  display: block;
  content: "";
  position: relative;
  content: "※";
  right: 0;
  top: -2px;
}
.under-tgs__overview--extra {
  font-size: 2.6666666667vw;
  line-height: 4.8vw;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--extra {
    font-size: 1.0248901903vw;
    line-height: 1.4641288433vw;
    width: 45.3879941435vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--extra {
    font-size: 14px;
    line-height: 20px;
    width: 620px;
  }
}
.under-tgs__overview--link {
  color: rgb(149, 115, 33);
  border-bottom: 0.1333333333vw solid rgb(180, 160, 132);
  padding-bottom: 0.8vw;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .under-tgs__overview--link {
    border-bottom: 0.0732064422vw solid rgb(180, 160, 132);
    padding-bottom: 0.2196193265vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-tgs__overview--link {
    border-bottom: 1px solid rgb(180, 160, 132);
    padding-bottom: 3px;
  }
}
.under-tgs__overview--link:hover {
  opacity: 0.7;
}
.under-line {
  border-bottom: 0.2666666667vw rgb(149, 115, 33) dotted;
  margin: 10.6666666667vw 0 9.0666666667vw;
  width: 89.3333333333vw;
  margin-inline: auto;
  max-width: 670px;
}
@media only screen and (min-width: 751px) {
  .under-line {
    margin: 3.8067349927vw 0 3.074670571vw;
    border-bottom: 0.1464128843vw rgb(149, 115, 33) dotted;
    width: 100%;
    max-width: 700px;
  }
}
@media only screen and (min-width: 1367px) {
  .under-line {
    margin: 52px 0 42px;
    border-bottom: 2px rgb(149, 115, 33) dotted;
  }
}
.under-official {
  color: rgb(21, 86, 142);
  font-family: "Noto Serif JP", serif;
  font-size: 3.2vw;
  width: 89.3333333333vw;
  margin-inline: auto;
  max-width: 670px;
}
@media only screen and (min-width: 751px) {
  .under-official {
    font-size: 1.1713030747vw;
    width: 100%;
    max-width: 700px;
  }
}
@media only screen and (min-width: 1367px) {
  .under-official {
    font-size: 16px;
  }
}
.under-official__title {
  font-size: 3.7333333333vw;
  font-weight: bold;
  display: flex;
}
@media only screen and (min-width: 751px) {
  .under-official__title {
    font-size: 1.756954612vw;
    max-width: 47.7306002928vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-official__title {
    font-size: 24px;
  }
}
.under-official__title:before {
  display: block;
  content: "";
  position: relative;
  width: 1.3333333333vw;
  height: 4vw;
  background: url(../data/webp/template/indicator_title.png.webp) no-repeat;
}
@media only screen and (min-width: 751px) {
  .under-official__title:before {
    width: 0.878477306vw;
    height: 1.756954612vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-official__title:before {
    font-size: 24px;
    width: 12px;
    height: 24px;
  }
}
.under-official__txt {
  line-height: 4.5333333333vw;
  margin-top: 3.4666666667vw;
  margin-bottom: 7.8666666667vw;
}
@media only screen and (min-width: 751px) {
  .under-official__txt {
    line-height: 1.9033674963vw;
    margin-top: 1.9765739385vw;
    margin-bottom: 3.3674963397vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-official__txt {
    line-height: 26px;
    margin-top: 27px;
    margin-bottom: 46px;
  }
}
.under-campaign {
  margin-top: 6.4vw;
  background-color: rgb(0, 90, 141);
  height: auto;
  margin-inline: auto;
  padding-top: 2.4vw;
  padding-bottom: 2.4vw;
  max-width: 750px;
}
@media only screen and (min-width: 751px) {
  .under-campaign {
    width: 51.2445095168vw;
    border-radius: 0.7320644217vw;
    margin-top: 3.513909224vw;
    font-size: 1.317715959vw;
    padding: 0.3660322108vw;
    max-width: 700px;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign {
    border-radius: 10px;
    margin-top: 48px;
    font-size: 18px;
    padding: 5px;
    width: 700px;
  }
}
.under-campaign__info {
  width: 100%;
  height: 100%;
  font-family: "Noto Serif JP", serif;
  border-top: 0.5333333333vw solid rgb(213, 191, 130);
  border-bottom: 0.5333333333vw solid rgb(213, 191, 130);
}
@media only screen and (min-width: 751px) {
  .under-campaign__info {
    border: 0.1464128843vw solid rgb(213, 191, 130);
    border-radius: 0.5856515373vw;
    padding-bottom: 1.756954612vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__info {
    border: 2px solid rgb(213, 191, 130);
    border-radius: 8px;
    padding-bottom: 24px;
  }
}
.under-campaign__title {
  width: 100%;
  color: rgb(0, 90, 141);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vw;
  background: url(../data/webp/template/title_campaign_bg.png.webp);
  background-size: contain;
  background-position: center;
  margin-top: 6vw;
  margin-bottom: 5.6vw;
  font-size: 3.7333333333vw;
  font-weight: bold;
  padding: 0 24vw;
}
@media only screen and (min-width: 751px) {
  .under-campaign__title {
    height: 3.074670571vw;
    background: url(../data/webp/template/title_campaign_bg_pc.png.webp);
    background-size: contain;
    background-position: center;
    margin-top: 2.4890190337vw;
    margin-bottom: 1.6837481698vw;
    font-size: 1.317715959vw;
    padding: 0 13.17715959vw;
    max-width: 51.2445095168vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__title {
    height: 42px;
    margin-top: 34px;
    margin-bottom: 23px;
    font-size: 18px;
    padding: 0 180px;
  }
}
.under-campaign__list {
  color: white;
  margin-inline: auto;
  font-size: 3.2vw;
  width: 89.3333333333vw;
  max-width: 670px;
}
@media only screen and (min-width: 751px) {
  .under-campaign__list {
    width: 44.6559297218vw;
    font-size: 1.1713030747vw;
    max-width: 610px;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__list {
    width: 610px;
    font-size: 16px;
  }
}
.under-campaign__list--summary {
  text-align: left;
  margin-bottom: 5.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .under-campaign__list--summary {
    text-align: center;
    margin-bottom: 2.2693997072vw;
    padding: 0 1.0980966325vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__list--summary {
    margin-bottom: 31px;
    padding: 0 15px;
  }
}
.under-campaign__item {
  text-align: center;
  font-size: 3.2vw;
  line-height: 4.5333333333vw;
  border: 0.2666666667vw solid rgb(213, 191, 130);
  margin-bottom: 4.8vw;
  padding: 4.2666666667vw 0 5.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .under-campaign__item {
    font-size: 1.317715959vw;
    line-height: 1.9033674963vw;
    border: 0.1464128843vw solid rgb(213, 191, 130);
    margin-bottom: 1.317715959vw;
    padding: 1.1713030747vw 1.0980966325vw 1.0980966325vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__item {
    font-size: 16px;
    line-height: 26px;
    border: 2px solid rgb(213, 191, 130);
    margin-bottom: 18px;
    padding: 18px 15px 15px;
  }
}
.under-campaign__item--title {
  font-size: 3.4666666667vw;
  font-weight: bold;
  margin-bottom: 4vw;
}
@media only screen and (min-width: 751px) {
  .under-campaign__item--title {
    font-size: 1.317715959vw;
    margin-bottom: 1.317715959vw;
    max-width: 42.1669106881vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__item--title {
    font-size: 18px;
    margin-bottom: 18px;
  }
}
.under-campaign__item--tag {
  width: 81.3333333333vw;
  background-color: white;
  color: rgb(0, 90, 141);
  margin-inline: auto;
  padding: 2.6666666667vw 6.6666666667vw;
  border-radius: 0.8vw;
  margin-top: 4.4vw;
  font-size: 2.6666666667vw;
}
@media only screen and (min-width: 751px) {
  .under-campaign__item--tag {
    width: 37.4816983895vw;
    font-size: 1.1713030747vw;
    padding: 0.878477306vw 3.6603221083vw;
    margin-top: 1.3909224012vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-campaign__item--tag {
    width: 512px;
    font-size: 16px;
    padding: 12px 50px;
    margin-top: 19px;
  }
}
.under-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 12.5333333333vw;
  font-size: 3.4666666667vw;
  font-family: "Noto Serif JP", serif;
  margin: 8.8vw auto 0;
  color: rgb(149, 115, 33);
  background-color: rgba(213, 191, 130, 0.5);
  text-align: center;
  transition: all 300ms ease;
}
@media only screen and (min-width: 751px) {
  .under-back {
    width: 17.5695461201vw;
    font-size: 1.317715959vw;
    height: 3.6603221083vw;
    margin-top: 3.4407027818vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-back {
    width: 240px;
    font-size: 18px;
    height: 50px;
    margin-top: 47px;
  }
}
.under-back:hover {
  opacity: 0.7;
}
.under-back__txt {
  position: relative;
  background-color: rgb(213, 191, 130);
  width: 58.5333333333vw;
  height: 11.0666666667vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 751px) {
  .under-back__txt {
    width: 17.1303074671vw;
    height: 3.2210834553vw;
  }
}
@media only screen and (min-width: 1367px) {
  .under-back__txt {
    width: 234px;
    height: 44px;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes top-mv-chara-move01 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -0.75vw, 0);
  }
}
@keyframes top-mv-chara-move02 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 0.75vw, 0);
  }
}
.top-mv {
  filter: blur(10px);
  will-change: filter;
}
.top-mv__title {
  opacity: 0;
  filter: blur(10px);
  will-change: opacity, filter;
}
.top-mv__bg {
  transform: translate3d(0, -5vw, 0);
  will-change: transform;
}
.top-mv__txt {
  opacity: 0;
  transform: translate3d(0, -1vw, 0);
  will-change: transform;
}
.top-mv__txt p {
  transform: rotateY(-90deg);
  will-change: transform;
}
.top-mv__chara--01, .top-mv__chara--02, .top-mv__chara--03 {
  opacity: 0;
  transform: translate3d(0, 2.5vw, 0);
  will-change: transform, opacity;
}
.top-mv.js--loadend {
  filter: blur(0px);
  transition: all 800ms;
}
.top-mv.js--loadend .top-mv__chara--01, .top-mv.js--loadend .top-mv__chara--02, .top-mv.js--loadend .top-mv__chara--03 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 1200ms;
}
.top-mv.js--loadend .top-mv__chara--es {
  animation: top-mv-chara-move02 3000ms ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 1000ms;
}
.top-mv.js--loadend .top-mv__chara--rozi {
  animation: top-mv-chara-move02 3000ms ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 2000ms;
}
.top-mv.js--loadend .top-mv__chara--regina {
  animation: top-mv-chara-move01 3000ms ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 1000ms;
}
.top-mv.js--loadend .top-mv__bg {
  transform: translate3d(0, 0, 0);
  transition: all 1200ms;
  transition-delay: 100ms;
}
.top-mv.js--loadend .top-mv__txt {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 1200ms;
  transition-delay: 250ms;
}
.top-mv.js--loadend .top-mv__txt p {
  transform: rotateY(0deg);
  transition: all 1200ms;
  transition-delay: 150ms;
}
.top-mv.js--loadend .top-mv__title {
  opacity: 1;
  filter: blur(0px);
  transition: all 700ms;
  transition-delay: 600ms;
}

.top-world__title {
  will-change: width;
  width: 73.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-world__title {
    width: 30.7467057101vw;
  }
}
.top-world__title img {
  opacity: 0;
  will-change: opacity;
}
.top-world__bg-blur {
  will-change: opacity;
}
.top-world__tag, .top-world__desc {
  opacity: 0;
  transform: translate3d(0, 1vw, 0);
  will-change: opacity, transform;
}
.top-world__inner::before {
  opacity: 0;
  transform: translate3d(1vw, 0, 0);
  will-change: opacity, transform;
}
.top-world__inner::after {
  opacity: 0;
  transform: translate3d(-1vw, 0, 0);
  will-change: opacity, transform;
}
.top-world.js--anime .top-world__title {
  width: 66.8vw;
  transition: width 1000ms;
}
@media only screen and (min-width: 751px) {
  .top-world.js--anime .top-world__title {
    width: 27.2327964861vw;
  }
}
.top-world.js--anime .top-world__title img {
  opacity: 1;
  transition: all 800ms;
}
.top-world.js--anime .top-world__bg-blur {
  opacity: 1;
  transition: opacity 800ms;
}
.top-world.js--anime .top-world__tag, .top-world.js--anime .top-world__desc {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 800ms;
}
.top-world.js--anime .top-world__inner::before {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 800ms;
}
.top-world.js--anime .top-world__inner::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 800ms;
}

.top-chara__title {
  will-change: width;
  width: 94.8vw;
}
@media only screen and (min-width: 751px) {
  .top-chara__title {
    width: 44.8023426061vw;
  }
}
.top-chara__title img {
  opacity: 0;
  will-change: opacity;
}
.top-chara__nav, .top-chara__content {
  opacity: 0;
  will-change: opacity;
}
.top-chara__view img {
  transform: translate3d(-1.5vw, 0, 0);
  will-change: transform;
}
.top-chara__info {
  transform: translate3d(1.5vw, 0, 0);
  will-change: transform;
}
.top-chara__view img, .top-chara__info {
  transition: transform 0ms;
  transition-delay: 400ms;
}
.top-chara__kvmain-item {
  transition: opacity 400ms;
}
.top-chara__kvmain-item.selected {
  transition: opacity 600ms;
}
.top-chara.js--anime .top-chara__title {
  width: 88.1333333333vw;
  transition: width 1000ms;
}
@media only screen and (min-width: 751px) {
  .top-chara.js--anime .top-chara__title {
    width: 41.1420204978vw;
  }
}
.top-chara.js--anime .top-chara__title img {
  opacity: 1;
  transition: all 800ms;
}
.top-chara.js--anime .top-chara__nav, .top-chara.js--anime .top-chara__content {
  opacity: 1;
  transition: all 800ms;
}
.top-chara.js--anime .top-chara__kvmain-item.selected .top-chara__view img, .top-chara.js--anime .top-chara__kvmain-item.selected .top-chara__info {
  transform: translate3d(0, 0, 0);
  transition: transform 800ms;
  transition-delay: 0ms;
}

.top-feature {
  background: #000;
}
.top-feature__title--item, .top-feature__title--particle, .top-feature__title--dice {
  opacity: 0;
  transform: rotateY(-90deg);
  will-change: opacity, transform;
}
.top-feature__subtitle, .top-feature__summary {
  opacity: 0;
  transform: translate3d(0, 1.5vw, 0);
  will-change: opacity, transform;
}
.top-feature.js--anime .top-feature__title--item, .top-feature.js--anime .top-feature__title--particle, .top-feature.js--anime .top-feature__title--dice {
  opacity: 1;
  transform: rotateY(0deg);
  transition: all 1000ms;
}
.top-feature.js--anime .top-feature__subtitle, .top-feature.js--anime .top-feature__summary {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 800ms;
}

.top-system__title {
  will-change: width;
  width: 77.3333333333vw;
}
@media only screen and (min-width: 751px) {
  .top-system__title {
    width: 34.4070278184vw;
  }
}
.top-system__title img {
  opacity: 0;
  will-change: opacity;
}
.top-system__gallery {
  transform: translate3d(0, 1vw, 0);
  will-change: opacity, transform;
}
.top-system.js--anime .top-system__title {
  width: 70.6666666667vw;
  transition: width 1000ms;
}
@media only screen and (min-width: 751px) {
  .top-system.js--anime .top-system__title {
    width: 30.8199121523vw;
  }
}
.top-system.js--anime .top-system__title img {
  opacity: 1;
  transition: all 800ms;
}
.top-system.js--anime .top-system__gallery {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 800ms;
}
/*# sourceMappingURL=../maps/share.css.map */



/* top-mv__txt for EN */
.top-mv__txt-en {
  position: relative;
  width: 63.33333333vw;
  margin: 27.2vw auto 60vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt-en {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}
.top-mv__txt-en p {
  margin: 0.222222vw 0.933333vw;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt-en p {
    margin: 0;
  }
}
.top-mv__txt-en p:nth-of-type(1) {
  width: 3.3333333vw;
}
.top-mv__txt-en p:nth-of-type(2) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(3) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(4) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(5) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(6) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(7) {
  width: 6vw;
}
.top-mv__txt-en p:nth-of-type(8) {
  width: 3.3333333vw;
}
.top-mv__txt-en p:nth-of-type(9) {
  width: 12.2222vw;
}
.top-mv__txt-en p:nth-of-type(10) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(11) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(12) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(12) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(13) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(14) {
  width: 12.2222vw;
}
.top-mv__txt-en p:nth-of-type(15) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(16) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(17) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(18) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(19) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(20) {
  width: 5.2vw;
}
.top-mv__txt-en p:nth-of-type(21) {
  width: 5.2vw;
}

@media only screen and (min-width: 751px) {
  .top-mv__txt-en p:nth-of-type(1) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(2) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(3) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(4) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(5) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(6) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(7) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(8) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(9) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(10) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(11) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(12) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(13) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(14) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(15) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(16) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(17) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(18) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(19) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(20) {
    width: 7.7vw;
  }
  .top-mv__txt-en p:nth-of-type(21) {
    width: 7.7vw;
  }
}

@media only screen and (min-width: 751px) {
  .top-mv__txt-en {
    margin: 7.906295754vw auto 0vw;
    width: 59.22327965vw;
  }
}

.top-mv__txt-en {
  opacity: 0;
  transform: translate3d(0, -1vw, 0);
  will-change: transform;
}
.top-mv__txt-en p {
  transform: rotateY(-90deg);
  will-change: transform;
}

.top-mv.js--loadend .top-mv__txt-en {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 1200ms;
  transition-delay: 250ms;
}
.top-mv.js--loadend .top-mv__txt-en p {
  transform: rotateY(0deg);
  transition: all 1200ms;
  transition-delay: 150ms;
}


/* top-mv__txt for TH */
/* top-mv__txt for TH */
.top-mv__txt-th {
  position: relative;
  width: 78.33333333vw;
  margin: 27.2vw auto 60vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt-th {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}
.top-mv__txt-th p {
  margin: 0.222222vw 0;
}
@media only screen and (min-width: 751px) {
  .top-mv__txt-th p {
    margin: 0;
  }
}
.top-mv__txt-th p:nth-of-type(1) {
  width: 10vw;
}
.top-mv__txt-th p:nth-of-type(2) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(3) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(4) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(5) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(6) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(7) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(8) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(9) {
  width: 10vw;
}
.top-mv__txt-th p:nth-of-type(10) {
  width: 4.8vw;
}
.top-mv__txt-th p:nth-of-type(11) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(12) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(13) {
  width: 8vw;
}
.top-mv__txt-th p:nth-of-type(14) {
  width: 8.45vw;
}
.top-mv__txt-th p:nth-of-type(15) {
  width: 6.665vw;
}
.top-mv__txt-th p:nth-of-type(16) {
  width: 7.97vw;
}
.top-mv__txt-th p:nth-of-type(17) {
  width: 7.97vw;
}
.top-mv__txt-th p:nth-of-type(18) {
  width: 7.97vw;
}
.top-mv__txt-th p:nth-of-type(19) {
  width: 4vw;
}
.top-mv__txt-th p:nth-of-type(20) {
  width: 4vw;
}
.top-mv__txt-th p:nth-of-type(21) {
  width: 8vw;
}

@media only screen and (min-width: 751px) {
  .top-mv__txt-th p:nth-of-type(1) {
    width: 4vw;
  }
  .top-mv__txt-th p:nth-of-type(2) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(3) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(4) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(5) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(6) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(7) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(8) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(9) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(10) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(11) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(12) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(13) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(14) {
    width: 9.33vw;
  }
  .top-mv__txt-th p:nth-of-type(15) {
    width: 7.39vw;
  }
  .top-mv__txt-th p:nth-of-type(16) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(17) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(18) {
    width: 9vw;
  }
  .top-mv__txt-th p:nth-of-type(19) {
    width: 9vw;
  }
}

@media only screen and (min-width: 751px) {
  .top-mv__txt-th {
    margin: 7.906295754vw auto 0vw;
    width: 59.22327965vw;
  }
}

.top-mv__txt-th {
  opacity: 0;
  transform: translate3d(0, -1vw, 0);
  will-change: transform;
}
.top-mv__txt-th p {
  transform: rotateY(-90deg);
  will-change: transform;
}

.top-mv.js--loadend .top-mv__txt-th {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all 1200ms;
  transition-delay: 250ms;
}
.top-mv.js--loadend .top-mv__txt-th p {
  transform: rotateY(0deg);
  transition: all 1200ms;
  transition-delay: 150ms;
}