@charset "UTF-8";
/************************************
  font
************************************/
@font-face {
  font-family: "source-han-sans-japanese";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "source-han-sans-traditional";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansTW-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "source-han-sans-simplified-c";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansCN-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "source-han-sans-korean";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansKR-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("https://www.capcom-games.com/common/font/SourceHanSansJP-VF.otf.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/assets/font/Rajdhani-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/assets/font/Rajdhani-Medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: "Rajdhani";
  src: url("/assets/font/Rajdhani-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}
/************************************
  base
************************************/
html,
body {
  height: 100%;
  width: 100%;
}

html {
  box-sizing: border-box;
  font-size: calc(100vw / 7.5);
}
@media screen and (min-width: 769px) {
  html {
    font-size: calc(100vw / 19.2);
  }
}
html *, html ::after, html ::before {
  box-sizing: inherit;
}

body {
  background: #000;
  color: #333;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.22rem;
  font-weight: 400;
  font-feature-settings: "palt";
  min-height: 100vh;
}
@media screen and (min-width: 769px) {
  body {
    font-size: min(0.18rem, 18px);
    min-height: calc(100vh - 70px);
  }
}
body.lang-zhhans {
  font-family: "source-han-sans-simplified-c", sans-serif;
}
body a {
  backface-visibility: hidden;
  border: none;
  color: #333;
  outline: none;
  text-decoration: none;
}
body ul li {
  list-style: none;
}
body ul li a {
  display: block;
}
body img {
  height: auto;
  width: 100%;
  border: none;
  image-rendering: -webkit-optimize-contrast;
  margin: auto;
  outline: none;
}
body img.base-size {
  height: auto;
  width: auto;
}
body button {
  backface-visibility: hidden;
  cursor: pointer;
  outline: none;
}

/*----- フォント -----*/
body.lang-rajdhani {
  font-size: 0.26rem;
}
@media screen and (min-width: 769px) {
  body.lang-rajdhani {
    font-size: min(0.22rem, 22px);
  }
}
body.lang-rajdhani .wrapper {
  font-family: "Rajdhani", sans-serif;
}
body.lang-ja {
  font-family: "source-han-sans-japanese", sans-serif;
}
body.lang-ja .wrapper {
  font-family: "source-han-sans-japanese", sans-serif;
}
body.lang-zhhant {
  font-family: "source-han-sans-traditional", sans-serif;
}
body.lang-zhhant .wrapper {
  font-family: "source-han-sans-traditional", sans-serif;
}
body.lang-zhhans {
  font-family: "source-han-sans-simplified-c", sans-serif;
}
body.lang-zhhans .wrapper {
  font-family: "source-han-sans-simplified-c", sans-serif;
}
body.lang-ko {
  font-family: "source-han-sans-korean", sans-serif;
}
body.lang-ko .wrapper {
  font-family: "source-han-sans-korean", sans-serif;
}

.ff-rajdhani {
  font-family: "Rajdhani", sans-serif;
}
.ff-rajdhani .fs-2byte {
  font-size: 0.8em;
}

.lang-ja .ff-rajdhani {
  font-family: "Rajdhani", "source-han-sans-japanese", sans-serif;
}

.lang-zhhant .ff-rajdhani {
  font-family: "Rajdhani", "source-han-sans-traditional", sans-serif;
}

.lang-zhhans .ff-rajdhani {
  font-family: "Rajdhani", "source-han-sans-simplified-c", sans-serif;
}

.lang-ko .ff-rajdhani {
  font-family: "Rajdhani", "source-han-sans-korean", sans-serif;
}

.ff-rajdhani-byte {
  font-family: "Rajdhani", sans-serif;
}

.lang-ja .ff-rajdhani-byte {
  font-family: "source-han-sans-japanese", sans-serif;
}

.lang-zhhant .ff-rajdhani-byte {
  font-family: "source-han-sans-traditional", sans-serif;
}

.lang-zhhans .ff-rajdhani-byte {
  font-family: "source-han-sans-simplified-c", sans-serif;
}

.lang-ko .ff-rajdhani-byte {
  font-family: "source-han-sans-korean", sans-serif;
}

/************************************
	header
************************************/
.site-header {
  background-color: rgba(15, 22, 31, 0.4);
  border-bottom: 1px solid rgba(101, 228, 255, 0.5);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
}
@media screen and (max-width: 768px) {
  .site-header {
    padding: 0.2rem 0;
  }
}
.site-header::before, .site-header::after {
  background-color: #65e4ff;
  bottom: -1px;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 8px;
}
.site-header::before {
  left: 0;
}
.site-header::after {
  right: 0;
}
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.site-header-inner::before, .site-header-inner::after {
  height: 100%;
  display: block;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.site-header-inner::before {
  background-color: rgba(15, 22, 31, 0.4);
  z-index: -2;
}
.site-header-inner::after {
  background-color: rgba(15, 22, 31, 0);
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  height: 100%;
  display: block;
  content: "";
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.site-header-logo {
  line-height: 0;
  margin-left: 0.4rem;
  width: 6.93%;
}
@media screen and (min-width: 769px) {
  .site-header-logo {
    margin-left: min(0.4rem, 40px);
    max-width: 42px;
    width: 1.97%;
  }
}
.site-header-logo a {
  display: block;
}
.site-header-btn-check {
  display: none;
}
.site-header-btn {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid #285B66;
  color: #C8F5FF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 0.4rem;
  transition: background-color 0.4s ease;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .site-header-btn {
    display: none;
  }
}
.site-header-btn .ic-up {
  left: -0.15rem;
  top: 50%;
  transform: translateY(-50%);
  visibility: visible;
  z-index: 3;
}
.site-header-btn .effect-btn-bg {
  display: block;
}
.site-header-btn .effect-btn-bg-pattern {
  display: block;
  transform: scale(0, 1);
  transform-origin: right top;
}
.site-header-btn .effect-btn-bg-color {
  display: block;
  transform: scale(0, 1);
  transform-origin: right top;
}
.site-header-btn .effect-btn-text {
  color: #C8F5FF;
  display: block;
  padding: 0.2rem 0.3rem;
}
.site-header-btn-ic {
  display: inline-block;
  height: 0.2rem;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  margin-right: 0.15rem;
  position: relative;
  transition: all 0.4s ease;
  width: 0.3rem;
  z-index: 2;
}
.site-header-btn-ic-item {
  background-color: #C8F5FF;
  height: 2.5px;
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.site-header-btn-ic::before, .site-header-btn-ic::after {
  background-color: #C8F5FF;
  content: "";
  display: block;
  height: 2.5px;
  left: 0;
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
}
.site-header-btn-ic::before {
  top: 0;
}
.site-header-btn-ic::after {
  top: 100%;
}
.site-header-btn-label {
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  font-size: 0.26rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .site-header-menu {
    background-image: url(../images/common/siteheader-menu_bg.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100vh;
    height: 100%;
    left: 0;
    min-height: 100vh;
    overflow-y: auto;
    padding: 1.6rem 0.8rem 0.8rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu {
    display: flex;
    flex-wrap: wrap;
  }
}
.site-header-menu-item {
  padding: 0.2rem 0.4rem;
  position: relative;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(0.15rem, 15px) min(0.05rem, 5px);
  }
}
.site-header-menu-item .ic-up {
  visibility: visible;
}
@media screen and (max-width: 768px) {
  .site-header-menu-item .ic-up {
    left: -0.06rem;
    top: 0.125rem;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item .ic-up {
    bottom: -0.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-item .effect-btn-bg {
    opacity: 0;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item .effect-btn-bg {
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.2s ease;
  }
}
.site-header-menu-item .effect-btn-text {
  color: #C8F5FF;
  padding: 0.2rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .site-header-menu-item .effect-btn-text {
    text-align: left;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item .effect-btn-text {
    padding: min(0.05rem, 5px) min(0.15rem, 15px);
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-item .effect-btn-text::before {
    background-color: #65E4FF;
    content: "";
    display: block;
    height: 3px;
    left: -0.4rem;
    position: absolute;
    top: 0.3rem;
    width: 0.2rem;
  }
}
.site-header-menu-item .effect-btn-item {
  border: none;
  font-size: 0.4rem;
  min-width: auto;
  min-width: initial;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item .effect-btn-item {
    font-size: min(0.2rem, 20px);
    text-align: center;
  }
}
.site-header-menu-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.4rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.2rem, 20px);
  }
}
.site-header-menu-item .effect-btn-item.is-current {
  pointer-events: none;
}
.site-header-menu-item .effect-btn-item.is-current .effect-btn-bg {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (max-width: 768px) {
  .site-header-menu-item .effect-btn-item.is-current .effect-btn-bg {
    opacity: 1;
  }
}
.site-header-menu-item .effect-btn-item.is-current .effect-btn-bg-color {
  transform: scale(1, 1);
  transform-origin: left top;
}
.site-header-menu-item .effect-btn-item.is-current .effect-btn-bg-pattern::before, .site-header-menu-item .effect-btn-item.is-current .effect-btn-bg-pattern::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (max-width: 768px) {
  .site-header-menu-item-conts {
    margin-left: 0.4rem;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts {
    left: min(0.36rem, 36px);
    position: absolute;
    top: min(0.92rem, 92px);
  }
}
.site-header-menu-item-conts-list-item {
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .site-header-menu-item-conts-list-item {
    margin-bottom: 0.3rem;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts-list-item {
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.9));
  }
}
.site-header-menu-item-conts-list-item .ic-arrow::before {
  background-image: url(../images/common/arrow_ic-r-blue.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 0.18rem;
  left: -0.14rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.1rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts-list-item .ic-arrow::before {
    height: min(0.11rem, 11px);
    left: min(-0.08rem, -8px);
    width: min(0.06rem, 6px);
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts-list-item:not(:last-child)::after {
    background: #65E4FF;
    content: "";
    display: block;
    height: 0.8em;
    line-height: 1;
    margin: 0.5em 0 0.5em 1em;
    width: 1px;
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-item-conts .effect-btn-bg {
    opacity: 0;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts .effect-btn-bg {
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.2s ease;
  }
}
.site-header-menu-item-conts .effect-btn-text {
  color: #C8F5FF;
  padding: 0.2rem;
  position: relative;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts .effect-btn-text {
    padding: min(0.05rem, 5px) min(0.15rem, 15px);
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-item-conts .effect-btn-text::before {
    background-color: #65E4FF;
    content: "";
    display: block;
    height: 3px;
    left: -0.4rem;
    position: absolute;
    top: 0.3rem;
    width: 0.2rem;
  }
}
.site-header-menu-item-conts .effect-btn-item {
  border: none;
  min-width: auto;
  min-width: initial;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts .effect-btn-item {
    text-align: center;
  }
}
.site-header-menu-item-conts a {
  color: #C8F5FF;
  font-size: 0.3rem;
  font-weight: 700;
  padding: 0.2em;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .site-header-menu-item-conts a {
    font-size: min(0.18rem, 18px);
  }
}
.site-header-menu-cbt, .site-header-menu-product {
  overflow: hidden;
  padding: 0.2rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .site-header-menu-cbt, .site-header-menu-product {
    margin-bottom: 0;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-cbt, .site-header-menu-product {
    padding: 0;
  }
}
.site-header-menu-cbt .anime-btn-item, .site-header-menu-product .anime-btn-item {
  font-size: 0.42rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .site-header-menu-cbt .anime-btn-item, .site-header-menu-product .anime-btn-item {
    font-size: min(0.22rem, 22px);
  }
}
.site-header-menu-cbt .anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-product .anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.42rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-cbt .anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-product .anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.22rem, 22px);
  }
}
.site-header-menu-cbt .anime-btn-text, .site-header-menu-product .anime-btn-text {
  padding: 0.3rem 0.4rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-cbt .anime-btn-text, .site-header-menu-product .anime-btn-text {
    padding: min(0.25rem, 25px);
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-cbt .anime-btn-text::before, .site-header-menu-product .anime-btn-text::before {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season, .site-header-menu-support {
    cursor: pointer;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .ic-main::after, .site-header-menu-support .ic-main::after {
    background-image: url(../images/common/arrow_ic-r-blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 0.55em;
    line-height: 1;
    margin-left: 0.2em;
    position: relative;
    transform: rotate(90deg);
    width: 0.55em;
  }
}
@media screen and (max-width: 768px) {
  .site-header-menu-season .site-header-menu-item-nest, .site-header-menu-support .site-header-menu-item-nest {
    margin-left: 0.4rem;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest, .site-header-menu-support .site-header-menu-item-nest {
    background: linear-gradient(to bottom, rgba(15, 22, 31, 0) 0.6%, rgba(15, 22, 31, 0.8) 0.7%, rgba(15, 22, 31, 0.8) 100%);
    left: 0;
    opacity: 0;
    padding: min(0.25rem, 25px) min(0.2rem, 20px) min(0.2rem, 20px);
    position: absolute;
    pointer-events: none;
    top: 100%;
    transition: all 0.3s;
    width: calc(100% + min(1.2rem, 120px));
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest::before, .site-header-menu-support .site-header-menu-item-nest::before {
    background-color: #65E4FF;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item:not(:last-child), .site-header-menu-support .site-header-menu-item-nest-item:not(:last-child) {
    margin-bottom: min(0.1rem, 10px);
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item {
  font-size: 0.3rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item {
    font-size: min(0.18rem, 18px);
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.3rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.16rem, 16px);
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item small, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item small {
  font-size: 0.26rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item small, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item small {
    font-size: min(0.14rem, 14px);
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item small:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item small:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.26rem;
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item small:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)), .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item small:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.12rem, 12px);
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current {
  pointer-events: none;
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (max-width: 768px) {
  .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg {
    opacity: 1;
  }
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-color, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-color {
  transform: scale(1, 1);
  transform-origin: left top;
}
.site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-pattern::before, .site-header-menu-season .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-pattern::after, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-pattern::before, .site-header-menu-support .site-header-menu-item-nest-item .effect-btn-item.is-current .effect-btn-bg-pattern::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest-item:not(:last-child)::after, .site-header-menu-support .site-header-menu-item-nest-item:not(:last-child)::after {
    background: #65E4FF;
    content: "";
    display: block;
    height: 0.6em;
    line-height: 1;
    margin: 0.2em 0 0.2em 1em;
    width: 1px;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season .site-header-menu-item-nest:hover, .site-header-menu-support .site-header-menu-item-nest:hover {
    pointer-events: auto;
    opacity: 1;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season:hover .effect-btn-nest .effect-btn-bg, .site-header-menu-support:hover .effect-btn-nest .effect-btn-bg {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season:hover .effect-btn-nest .effect-btn-bg-color, .site-header-menu-support:hover .effect-btn-nest .effect-btn-bg-color {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season:hover .effect-btn-nest .effect-btn-bg-pattern::before, .site-header-menu-season:hover .effect-btn-nest .effect-btn-bg-pattern::after, .site-header-menu-support:hover .effect-btn-nest .effect-btn-bg-pattern::before, .site-header-menu-support:hover .effect-btn-nest .effect-btn-bg-pattern::after {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-season:hover .site-header-menu-item-nest, .site-header-menu-support:hover .site-header-menu-item-nest {
    pointer-events: auto;
    opacity: 1;
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-support .site-header-menu-item-nest:lang(es-ES), .site-header-menu-support .site-header-menu-item-nest:lang(es), .site-header-menu-support .site-header-menu-item-nest:lang(pt-BR) {
    width: calc(100% + min(2.8rem, 280px));
  }
}
@media screen and (min-width: 769px) {
  .site-header-menu-dlc {
    margin-right: min(0.1rem, 10px);
  }
}

.page-lower .site-header-menu-item .effect-btn-item.is-current {
  pointer-events: initial;
}

/************************************
	footer
************************************/
#title_footer .title-footer-menu ul li a span::before,
#title_footer .title-footer-legal a {
  color: #65E4FF;
}

/************************************
	Container
************************************/
.wrapper {
  line-height: 1.6;
  overflow: hidden;
  padding-bottom: 1.25rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .wrapper {
    margin-top: 1.1rem;
  }
}
@media screen and (min-width: 769px) {
  .wrapper {
    padding-top: min(0.63rem, 63px);
    padding-bottom: min(0.85rem, 85px);
  }
}
.wrapper:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  line-height: 1.4;
}

.sec {
  padding: 1.2rem 0 1.25rem;
}
@media screen and (min-width: 769px) {
  .sec {
    padding: min(0.8rem, 80px) 0 min(0.85rem, 85px);
  }
}
.sec-inner {
  padding: 0 0.4rem;
}
@media screen and (min-width: 1024px) {
  .sec-inner {
    margin-right: auto;
    margin-left: auto;
    padding: 0 min(0.4rem, 40px);
    width: 80.4347826087%;
  }
}
@media screen and (min-width: 1480px) {
  .sec-inner {
    max-width: 80.4347826087%;
  }
}

.conts:not(:last-of-type) {
  margin-bottom: 0.85rem;
}
@media screen and (min-width: 769px) {
  .conts:not(:last-of-type) {
    margin-bottom: min(0.85rem, 85px);
  }
}

.sub .sec {
  padding: 0.8rem 0 0.85rem;
}
@media screen and (min-width: 769px) {
  .sub .sec {
    padding: min(0.4rem, 40px) 0 min(0.45rem, 45px);
  }
}
.sub .sec-langselect {
  padding: 0.4rem 0 0.45rem;
}
@media screen and (min-width: 769px) {
  .sub .sec-langselect {
    padding: min(0.4rem, 40px) 0 min(0.45rem, 45px);
  }
}

/***** 背景 *****/
.page-bg {
  background-image: url(../images/bg-sp.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150%;
  height: 100%;
  left: 50%;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .page-bg {
    background-image: url(../images/bg.jpg);
    background-size: cover;
  }
}
.page-bg .page-bg-item {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
}
.page-bg .page-bg-item::before, .page-bg .page-bg-item::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  height: 160vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160vw;
}
@media screen and (min-width: 769px) {
  .page-bg .page-bg-item::before, .page-bg .page-bg-item::after {
    background-size: contain;
    height: calc(100% + 120px);
    min-width: 1280px;
    width: calc(100% + 120px);
  }
}
.page-bg .page-bg-item-outside::before {
  background-image: url(../images/bg_object-outside-out.png);
}
.page-bg .page-bg-item-outside::after {
  background-image: url(../images/bg_object-outside-in.png);
}
.page-bg .page-bg-item-inside::before {
  background-image: url(../images/bg_object-inside-out.png);
}
.page-bg .page-bg-item-inside::after {
  background-image: url(../images/bg_object-inside-in.png);
}

/***** 見出し *****/
.sec-ttl {
  color: #65E4FF;
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
  line-height: 0.9;
  position: relative;
}
@media screen and (min-width: 769px) {
  .sec-ttl {
    font-size: min(0.92rem, 92px);
    line-height: 1.2;
    margin-bottom: min(0.1rem, 10px);
  }
}
.sec-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.96rem;
  line-height: 1.05;
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 769px) {
  .sec-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.96rem, 96px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.sec-ttl-pattern {
  position: relative;
}
.sec-ttl-pattern::before, .sec-ttl-pattern::after {
  background: #C8F5FF;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  left: -0.385rem;
  transform: translateY(-50%);
  width: 3px;
}
@media screen and (min-width: 769px) {
  .sec-ttl-pattern::before, .sec-ttl-pattern::after {
    left: min(-0.15rem, -15px);
  }
}
.sec-ttl-pattern::before {
  top: calc(50% - 12px);
}
.sec-ttl-pattern::after {
  top: calc(50% + 12px);
}
.sec-ttl .fs-s {
  font-size: 0.75em;
  vertical-align: middle;
}
.sec-ttl .ic-up {
  position: relative;
  top: -0.12rem;
  visibility: visible;
}
@media screen and (min-width: 769px) {
  .sec-ttl .ic-up {
    top: min(-0.02rem, -2px);
  }
}

.conts-ttl {
  color: #65E4FF;
  font-size: 0.3rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .conts-ttl {
    font-size: min(0.22rem, 22px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.conts-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.34rem;
  line-height: 1.05;
}
@media screen and (min-width: 769px) {
  .conts-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.26rem, 26px);
  }
}
.conts-ttl-line {
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
}
.conts-ttl-line::before {
  background: #65E4FF;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}
.conts-ttl-line::after {
  background: #65E4FF;
  content: "";
  display: none;
  height: 2px;
  right: 0;
  position: absolute;
  top: 0;
  width: 5px;
}
.conts-ttl-line-default {
  background: #285B66;
}
.conts-ttl-line-default::after {
  display: block;
}
.conts-ttl .ic-up {
  position: relative;
  top: -0.12rem;
  visibility: visible;
}
@media screen and (min-width: 769px) {
  .conts-ttl .ic-up {
    top: min(-0.02rem, -2px);
  }
}

/***** リード *****/
.sec-lead {
  color: #FFF;
  font-size: 0.28rem;
  font-weight: 900;
  line-height: 2;
  margin-bottom: 0.2rem;
}
@media screen and (min-width: 769px) {
  .sec-lead {
    font-size: min(0.26rem, 26px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.sec-lead:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.32rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
@media screen and (min-width: 769px) {
  .sec-lead:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.3rem, 30px);
    margin-bottom: min(0.25rem, 25px);
  }
}
.sec-lead:lang(zh-cmn-Hant), .sec-lead:lang(zh-cmn-Hans) {
  font-weight: 700;
}

/***** テキスト *****/
.text-ctr {
  color: #FFF;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (min-width: 769px) {
  .text-ctr .text {
    letter-spacing: 1px;
  }
}
.text-ctr .text:not(:last-child) {
  margin-bottom: 1em;
}
.text-ctr .text .t-spacer {
  display: block;
  margin-bottom: 1em;
}

.t-ruby {
  display: block;
  font-size: 0.6em;
}
.t-ruby-normal {
  font-weight: 400;
}

/***** 包括 *****/
.image-ctr {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  line-height: 0;
}
.image-pattern {
  border: 1px solid #506266;
  position: relative;
}

/***** ESRB メディアレーティング *****/
.media-rating {
  height: 71px;
  margin-right: auto;
  margin-left: auto;
  width: 167px;
}
@media screen and (min-width: 769px) {
  .media-rating {
    margin-right: 0.4rem;
  }
}
.media-rating a {
  display: block;
}

/***** 包括 *****/
.enclose-ctr {
  background: black;
  border: 1px solid #506266;
  color: #FFF;
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .enclose-ctr {
    margin-bottom: min(0.8rem, 80px);
  }
}
.enclose-ctr-inner {
  background: rgba(3, 36, 49, 0.8);
  position: relative;
  padding: 0.4rem;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .enclose-ctr-inner {
    padding: min(0.4rem, 40px);
  }
}
.enclose-ctr .pattern-mark {
  z-index: 3;
}
.enclose-ctr::before, .enclose-ctr::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .enclose-ctr::before, .enclose-ctr::after {
    transition: opacity 0.4s ease;
  }
}
.enclose-ctr::before {
  background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 1;
  z-index: 1;
}
.enclose-ctr::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.8;
  z-index: -1;
}
.enclose-ctr .pattern-dot {
  z-index: 1;
}
.enclose-ctr-dark .enclose-ctr-inner {
  background: rgba(15, 22, 31, 0.8);
}

/***** 罫線包括 *****/
.border-ctr {
  background: #0F161F;
  border: 1px solid #506266;
  color: #FFF;
  position: relative;
  z-index: 1;
}
.border-ctr::before, .border-ctr::after {
  background: #65E4FF;
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
}
.border-ctr::before {
  height: 3px;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
}
.border-ctr::after {
  height: 2px;
  right: -1px;
  top: -7px;
  width: 7px;
}
.border-ctr-inner {
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .border-ctr-inner {
    padding: min(0.4rem, 40px);
  }
}
@media screen and (min-width: 769px) {
  .border-ctr-conts {
    padding: 0 min(0.4rem, 40px);
  }
}
.border-ctr-ttl {
  color: #C8F5FF;
  font-size: 0.34rem;
  margin-bottom: 0.6rem;
  line-height: 1.2;
  position: relative;
}
@media screen and (min-width: 769px) {
  .border-ctr-ttl {
    font-size: min(0.34rem, 34px);
    margin-bottom: min(0.6rem, 60px);
  }
}
.border-ctr-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.38rem;
}
@media screen and (min-width: 769px) {
  .border-ctr-ttl:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.38rem, 38px);
  }
}
.border-ctr-ttl-pattern {
  padding-left: 0.4rem;
  position: relative;
}
@media screen and (min-width: 769px) {
  .border-ctr-ttl-pattern {
    padding-left: min(0.25rem, 25px);
  }
}
.border-ctr-ttl-pattern::before, .border-ctr-ttl-pattern::after {
  background: #65E4FF;
  content: "";
  display: block;
  height: 6px;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  width: 2px;
}
.border-ctr-ttl-pattern::before {
  top: calc(50% - 6px);
}
.border-ctr-ttl-pattern::after {
  top: calc(50% + 6px);
}
.border-ctr-ttl-line {
  background-color: rgba(101, 228, 255, 0.4);
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: calc(100% + 0.3em);
  width: 100%;
}
.border-ctr-ttl-line::before, .border-ctr-ttl-line::after {
  background: #65E4FF;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 0;
  width: 5px;
}
.border-ctr-ttl-line::before {
  left: 0;
}
.border-ctr-ttl-line::after {
  right: 0;
}
.border-ctr-simple::before, .border-ctr-simple::after {
  display: none;
}
.border-ctr.tab-ctr > .border-ctr-inner {
  padding: 0.8rem 0.4rem;
}
@media screen and (min-width: 769px) {
  .border-ctr.tab-ctr > .border-ctr-inner {
    padding: min(0.8rem, 80px) min(0.4rem, 40px);
  }
}
.border-ctr.tab-ctr .border-ctr {
  border: 1px solid rgba(101, 228, 255, 0.6);
}

/***** スクロール包括 *****/
.scroll-ctr {
  height: 30em;
}
.scroll-ctr-inner {
  height: 100%;
  overflow-y: auto;
  padding: 0 0.2rem 0 0;
}
@media screen and (min-width: 769px) {
  .scroll-ctr-inner {
    padding: 0 min(0.2rem, 20px) 0 0;
  }
}
.scroll-ctr-inner::-webkit-scrollbar {
  width: 3px;
}
@media screen and (min-width: 769px) {
  .scroll-ctr-inner::-webkit-scrollbar {
    width: 6px;
  }
}
.scroll-ctr-inner::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(101, 228, 255, 0.5);
}
.scroll-ctr-inner::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #65E4FF;
}

/***** タブ *****/
.tab-ctr .tab-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tab-ctr .tab-conts {
  padding: 0.8rem 0;
}
@media screen and (min-width: 769px) {
  .tab-ctr .tab-conts {
    padding: min(0.8rem, 80px) min(0.4rem, 40px);
  }
}

/***** ボタン *****/
.effect-btn-item {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #285B66;
  display: inline-block;
  cursor: pointer;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  font-size: 0.26rem;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .effect-btn-item {
    font-size: min(0.22rem, 22px);
  }
}
.effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.3rem;
}
@media screen and (min-width: 769px) {
  .effect-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.26rem, 26px);
  }
}
.effect-btn-item.min-w {
  min-width: 3.2rem;
}
@media screen and (min-width: 769px) {
  .effect-btn-item.min-w {
    min-width: min(3.2rem, 320px);
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-item:hover .effect-btn-bg {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-item:hover .effect-btn-bg-color {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-item:hover .effect-btn-bg-pattern::before, .effect-btn-item:hover .effect-btn-bg-pattern::after {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.effect-btn-text {
  color: #FFF;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  padding: 0.2rem 0.6rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .effect-btn-text {
    padding: min(0.2rem, 20px) min(0.4rem, 40px);
  }
}
.effect-btn-bg {
  background-color: rgba(40, 91, 102, 0.8);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.effect-btn-bg-color {
  background-color: #42c0ff;
  height: inherit;
  mix-blend-mode: color;
  position: relative;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.2s ease;
  width: inherit;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .effect-btn-bg-color {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.effect-btn-bg-color-base {
  background-color: #42c0ff;
  height: inherit;
  left: 0;
  mix-blend-mode: color;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: inherit;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .effect-btn-bg-color-base {
    display: none;
  }
}
.effect-btn-bg-pattern {
  height: inherit;
  width: inherit;
}
.effect-btn-bg-pattern::before, .effect-btn-bg-pattern::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.2s ease;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .effect-btn-bg-pattern::before, .effect-btn-bg-pattern::after {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.effect-btn-bg-pattern::before {
  background: linear-gradient(to right, black 0%, white 100%);
  background-size: 150%;
  opacity: 0.25;
  z-index: 2;
}
.effect-btn-bg-pattern::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.5;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .effect-btn-dark .effect-btn-bg {
    background-color: rgba(15, 22, 31, 0.8);
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-dark .effect-btn-item:hover .effect-btn-bg {
    background-color: rgba(40, 91, 102, 0.8);
  }
}
.effect-btn-alldark .effect-btn-bg {
  background-color: rgba(15, 22, 31, 0.8);
}
@media screen and (min-width: 769px) {
  .effect-btn-alldark .effect-btn-item:hover .effect-btn-bg {
    background-color: rgba(40, 91, 102, 0.8);
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-color-blue .effect-btn-bg {
    background-color: rgba(16, 130, 181, 0.8);
  }
}
.effect-btn-color-blue .effect-btn-bg::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .effect-btn-color-blue .effect-btn-item:hover .effect-btn-bg {
    background-color: rgba(40, 91, 102, 0.8);
  }
  .effect-btn-color-blue .effect-btn-item:hover .effect-btn-bg::after {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-color-green .effect-btn-bg {
    background-color: rgba(0, 75, 91, 0.8);
  }
}
@media screen and (min-width: 769px) {
  .effect-btn-color-green .effect-btn-item:hover .effect-btn-bg {
    background-color: rgba(40, 91, 102, 0.8);
  }
}
.effect-btn.ff-default .effect-btn-item {
  letter-spacing: normal;
}

.anime-btn-item {
  background-color: rgba(0, 0, 0, 0);
  display: inline-block;
  cursor: pointer;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  font-size: 0.26rem;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
}
@media screen and (min-width: 769px) {
  .anime-btn-item {
    font-size: min(0.22rem, 22px);
  }
}
.anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.3rem;
}
@media screen and (min-width: 769px) {
  .anime-btn-item:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.26rem, 26px);
  }
}
.anime-btn-item.min-w {
  min-width: 3.2rem;
}
@media screen and (min-width: 769px) {
  .anime-btn-item.min-w {
    min-width: min(3.2rem, 320px);
  }
}
.anime-btn-text {
  color: #FFF;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  padding: 0.2rem 0.6rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .anime-btn-text {
    padding: min(0.2rem, 20px) min(0.4rem, 40px);
  }
}
@media screen and (min-width: 769px) {
  .anime-btn-text:hover + .anime-btn-bg .anime-btn-bg-anime {
    animation-play-state: paused;
    visibility: hidden;
  }
}
@media screen and (min-width: 769px) {
  .anime-btn-text:hover + .anime-btn-bg .anime-btn-bg-hover::before, .anime-btn-text:hover + .anime-btn-bg .anime-btn-bg-hover::after,
  .anime-btn-text:hover + .anime-btn-bg .anime-btn-bg-hover .anime-btn-bg-color {
    transform: scale(1, 1);
    transform-origin: left top;
    transition: transform 0.2s ease 0.1s;
  }
}
.anime-btn-bg {
  background-color: rgba(0, 0, 0, 0.75);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.anime-btn-bg-anime {
  height: inherit;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
}
.anime-btn-bg-anime .anime-btn-bg-color {
  background-color: #e6370a;
  height: inherit;
  mix-blend-mode: color;
  position: relative;
  width: inherit;
  z-index: 3;
}
.anime-btn-bg-anime::before, .anime-btn-bg-anime::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.anime-btn-bg-anime::before {
  animation: siteHeaderMenuCbt 4s linear infinite reverse;
  animation-play-state: running;
  background: linear-gradient(135deg, #E6370A 0%, #000 50%, #E6370A 100%);
  background-size: 300%;
  opacity: 0.25;
  transform: scale(1, 1);
  transform-origin: left top;
  z-index: 2;
}
.anime-btn-bg-anime::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.5;
  transform: scale(1, 1);
  transform-origin: left top;
  z-index: 2;
}
.anime-btn-bg-hover {
  height: inherit;
  width: inherit;
}
.anime-btn-bg-hover .anime-btn-bg-color {
  background-color: #e6370a;
  height: inherit;
  mix-blend-mode: color;
  position: relative;
  transform: scale(0, 1);
  transform-origin: right top;
  width: inherit;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .anime-btn-bg-hover .anime-btn-bg-color {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.anime-btn-bg-hover::before, .anime-btn-bg-hover::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.anime-btn-bg-hover::before {
  background-image: linear-gradient(135deg, black 0%, white 100%);
  background: linear-gradient(135deg, #E6370A 0%, #000 50%, #E6370A 100%);
  background-size: 200%;
  opacity: 0.25;
  transform: scale(0, 1);
  transform-origin: right top;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .anime-btn-bg-hover::before {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.anime-btn-bg-hover::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.5;
  transform: scale(0, 1);
  transform-origin: right top;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .anime-btn-bg-hover::after {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}
.anime-btn.ff-default .anime-btn-item {
  letter-spacing: normal;
}

.border-btn {
  font-size: 0.24rem;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .border-btn {
    font-size: min(0.24rem, 24px);
  }
}
.border-btn:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.28rem;
}
@media screen and (min-width: 769px) {
  .border-btn:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.28rem, 28px);
  }
}
.border-btn-item {
  background-color: #0F161F;
  border: 1px solid rgba(200, 245, 255, 0.3);
  cursor: pointer;
  color: #FFF;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  padding: 0.2rem 0.6rem;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .border-btn-item {
    padding: min(0.2rem, 20px) min(0.4rem, 40px);
  }
}
.border-btn-ss {
  font-size: 0.22rem;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .border-btn-ss {
    font-size: min(0.16rem, 16px);
  }
}
.border-btn-ss:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  font-size: 0.26rem;
}
@media screen and (min-width: 769px) {
  .border-btn-ss:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: min(0.2rem, 20px);
  }
}
.border-btn-ss .border-btn-item {
  padding: 0.12rem 0.6rem;
}
@media screen and (min-width: 769px) {
  .border-btn-ss .border-btn-item {
    padding: min(0.12rem, 12px) min(0.4rem, 40px);
  }
}

.home-btn {
  text-align: center;
}

.obt-linkbtn-item-logo, .obt-linkbtn-item-flame, .obt-linkbtn-item-bg {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.obt-linkbtn-item-logo {
  z-index: 3;
}
.obt-linkbtn-item-flame {
  z-index: 2;
}
.obt-linkbtn-item-bg {
  z-index: 1;
}
.obt-linkbtn-item-base {
  opacity: 0;
}

@media screen and (min-width: 769px) {
  .cbt-linkbtn {
    display: none;
  }
}
.cbt-linkbtn .anime-btn-text {
  padding: 0.3rem;
}

.follow-linkbtn-item-logo, .follow-linkbtn-item-flame, .follow-linkbtn-item-bg {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.follow-linkbtn-item-logo {
  z-index: 3;
}
.follow-linkbtn-item-flame {
  z-index: 2;
}
.follow-linkbtn-item-bg {
  z-index: 1;
}
.follow-linkbtn-item-base {
  opacity: 0;
}

/****** リスト ******/
.list {
  position: relative;
}
.list-item {
  background: #0F161F;
  border: 1px solid #506266;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.list-item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .list-item-inner[data-js-mfp]:hover .list-img img {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
}
@media screen and (min-width: 769px) {
  .list-item-inner.list-item-inner-suits:hover .list-img img {
    transform: scale(0.94) translate3d(0, 0, 0);
  }
}
.list-item::before, .list-item::after {
  background: #65E4FF;
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
}
.list-item::before {
  height: 3px;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
}
.list-item::after {
  height: 2px;
  right: -1px;
  top: -7px;
  width: 7px;
}
.list-img {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  line-height: 0;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .list-img img {
    transition: transform 0.2s ease-in-out;
  }
}
.list-info {
  background: rgba(40, 91, 102, 0.5);
  border-top: 1px solid #285B66;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0.2rem;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .list-info {
    padding: min(0.1rem, 10px) min(0.2rem, 20px);
  }
}
.list-info-name {
  color: #65E4FF;
  font-size: 0.32rem;
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .list-info-name {
    font-size: min(0.22rem, 22px);
  }
}
@media screen and (min-width: 1480px) {
  .list-info-name {
    font-size: 22px;
  }
}
.list-info-name-text {
  width: 100%;
}
.list-info-name-text small {
  font-size: 0.75em;
  vertical-align: middle;
}
.list-info-desc {
  color: #FFF;
  width: 100%;
}
.list-info::before, .list-info::after {
  background: #65E4FF;
  top: -2px;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  width: 2px;
}
.list-info::before {
  left: 0;
}
.list-info::after {
  right: 0;
}
.list-static {
  margin-left: auto;
  margin-right: auto;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  .list-static {
    width: 77.08%;
  }
}
.list-static[data-update=true] .list-item {
  margin-top: 0.5rem;
  margin-bottom: 0 !important;
}
@media screen and (min-width: 769px) {
  .list-static[data-update=true] .list-item {
    margin-top: min(0.3rem, 30px);
    margin-bottom: min(0.1rem, 10px) !important;
  }
}
.list-static[data-update=true].is-update .ic-up {
  left: 0;
  top: -0.45rem;
}
@media screen and (min-width: 769px) {
  .list-static[data-update=true].is-update .ic-up {
    top: min(-0.22rem, -22px);
  }
}
.list-suits-navi[data-update=true] .list-item {
  margin-top: 0.3rem;
  margin-bottom: 0 !important;
}
@media screen and (min-width: 769px) {
  .list-suits-navi[data-update=true] .list-item {
    margin-top: min(0.15rem, 15px);
    margin-bottom: min(0.1rem, 10px) !important;
  }
}
.list-suits-navi[data-update=true].is-update .ic-up {
  left: 0;
  top: -0.45rem;
}
@media screen and (min-width: 769px) {
  .list-suits-navi[data-update=true].is-update .ic-up {
    top: min(-0.22rem, -22px);
  }
}
.list-slider .list {
  margin-left: auto;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  .list-slider .list {
    width: 77.08%;
  }
}

/****** 操作UI ******/
.swiper {
  visibility: hidden;
}
.swiper.swiper-initialized {
  visibility: visible;
}

.swiper-scrollbar {
  background: #506266;
  border-radius: 0;
  bottom: 0;
  cursor: pointer;
  height: 0.1rem;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .swiper-scrollbar {
    height: 6px;
  }
}

.swiper-scrollbar-drag {
  background: #65E4FF;
  border-radius: 0;
}

.swiper-button-box {
  background-color: #0F161F;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #285B66;
  height: 0.48rem;
  margin-top: 0;
  position: relative;
  top: 0;
  width: 0.48rem;
}
@media screen and (min-width: 769px) {
  .swiper-button-box {
    height: 32px;
    width: 32px;
  }
}
.swiper-button-box::before {
  background-image: url(../images/common/arrow_ic-r-blue.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 0.3rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.8rem;
}
@media screen and (min-width: 769px) {
  .swiper-button-box::before {
    height: 15px;
    width: 8px;
  }
}
.swiper-button-box::after {
  content: "";
  display: none;
}
.swiper-button-box.swiper-button-prev {
  left: 0;
}
.swiper-button-box.swiper-button-prev::before {
  left: calc(50% - 0.8rem);
  transform: scale(-1, 1) translate(-50%, -50%);
}
@media screen and (min-width: 769px) {
  .swiper-button-box.swiper-button-prev::before {
    left: calc(50% - 8px);
  }
}
.swiper-button-box.swiper-button-next {
  right: 0;
}
.swiper-button-box.swiper-button-disabled {
  opacity: 1;
  filter: brightness(0.6);
}

/****** クロスフェード ******/
[data-js-slider=crossfade] .swiper-slide::after,
[data-js-slider=modalCrossfade] .swiper-slide::after {
  background-color: #0f161f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.2s cubic-bezier(0.8, 0, 0.2, 1);
  width: 100%;
}
[data-js-slider=crossfade] .swiper-slide.is-anime::after,
[data-js-slider=modalCrossfade] .swiper-slide.is-anime::after {
  transform: scale(1, 1);
  transform-origin: right top;
}
[data-js-slider=crossfade] .swiper-slide.is-pause::after,
[data-js-slider=modalCrossfade] .swiper-slide.is-pause::after {
  transition: none !important;
}

/****** スクロール ******/
[data-js-slider=freemode] .swiper-wrapper {
  align-items: stretch !important;
}
[data-js-slider=freemode] .swiper-slide {
  height: auto;
  margin-right: 0.4rem;
  max-width: 65.67%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode] .swiper-slide {
    max-width: 29.34%;
  }
}
[data-js-slider=freemode] .swiper-slide:last-child {
  margin-right: 0.8rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode] .swiper-slide:last-child {
    margin-right: 2.6rem;
  }
}
[data-js-slider=freemode] .swiper-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode] .swiper-nav {
    min-width: 586px;
    width: 38.06%;
  }
}
[data-js-slider=freemode] .swiper-scrollbar {
  margin-right: 0.4rem;
  margin-left: 0.4rem;
  width: 65.33%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode] .swiper-scrollbar {
    margin-right: 40px;
    margin-left: 40px;
    width: 440px;
  }
}
[data-js-slider=freemode][data-update=true] {
  padding-top: 0.52rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-update=true] {
    padding-top: min(0.4rem, 40px);
  }
}
[data-js-slider=freemode][data-update=true].is-update .ic-up {
  left: 0;
  top: calc(-0.42rem + 3px);
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-update=true].is-update .ic-up {
    top: calc(min(-0.27rem, -27px) + 3px);
  }
}
[data-js-slider=freemode][data-update=true][data-js-slider-freemode=video] {
  padding-top: 0.26rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-update=true][data-js-slider-freemode=video] {
    padding-top: min(0.2rem, 20px);
  }
}
[data-js-slider=freemode][data-js-slider-freemode=character] .swiper-slide, [data-js-slider=freemode][data-js-slider-freemode=suits] .swiper-slide {
  max-width: 50.74%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=character] .swiper-slide, [data-js-slider=freemode][data-js-slider-freemode=suits] .swiper-slide {
    max-width: 22.97%;
  }
}
[data-js-slider=freemode][data-js-slider-freemode=video] .swiper-slide {
  max-width: 85.07%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=video] .swiper-slide {
    max-width: 30.97%;
  }
}
[data-js-slider=freemode][data-js-slider-freemode=topics] {
  padding-top: 0.5rem;
}
[data-js-slider=freemode][data-js-slider-freemode=topics] .swiper-slide {
  max-width: 65.67%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=topics] .swiper-slide {
    max-width: 22.97%;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=topics].is-destroy {
    margin-right: auto;
    padding-top: min(0.3rem, 30px);
    visibility: visible;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=topics].is-destroy .swiper-wrapper {
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=topics].is-destroy .swiper-slide {
    max-width: 31.35%;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=topics].is-destroy .swiper-nav {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=craft] {
    margin-right: auto;
    margin-left: auto;
    visibility: visible;
    width: 77.08%;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=craft] .swiper-wrapper {
    margin: 0;
  }
}
[data-js-slider=freemode][data-js-slider-freemode=craft] .swiper-slide {
  margin-right: 0.4rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=craft] .swiper-slide {
    max-width: 38.51%;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=craft] .swiper-slide:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 769px) {
  [data-js-slider=freemode][data-js-slider-freemode=craft] .swiper-nav {
    display: none;
  }
}
[data-js-slider=freemode][data-js-slider-freemode=mission] .list-info {
  background: #1b3942;
}

/****** スーツ/カスタマイズ ******/
[data-js-slider=customize] .swiper-wrapper {
  max-width: 89.33%;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=customize] .swiper-wrapper {
    max-width: 77.08%;
    width: 77.08%;
  }
}
[data-js-slider=customize] .swiper-nav {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  [data-js-slider=customize] .swiper-nav {
    max-width: 82.5%;
    width: 82.5%;
  }
}
@media screen and (min-width: 1680px) {
  [data-js-slider=customize] .swiper-nav {
    max-width: calc(1344px + min(0.4rem, 40px));
    width: calc(1344px + min(0.4rem, 40px));
  }
}
[data-js-slider=customize] .swiper-nav .swiper-button-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
[data-js-slider=customize][data-js-slider-customize=nav] .swiper-wrapper {
  margin-right: auto;
  margin-left: auto;
}
[data-js-slider=customize][data-update=true] {
  padding-top: 0.5rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=customize][data-update=true] {
    padding-top: min(0.3rem, 30px);
  }
}
[data-js-slider=customize][data-update=true].is-update .ic-up {
  left: 0;
  top: -0.45rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=customize][data-update=true].is-update .ic-up {
    top: min(-0.2rem, -20px);
  }
}

/****** コミック ******/
[data-js-slider=comic] .swiper-nav {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 106%;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  [data-js-slider=comic] .swiper-nav {
    max-width: 77.14%;
    width: 77.14%;
  }
}
[data-js-slider=comic] .swiper-nav .swiper-button-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
[data-js-slider=comic] .swiper-nav .swiper-button-box::before {
  background-image: url(../images/common/arrow_ic-r-white.svg);
}

/****** カルーセル ******/
[data-js-slider=carousel] .swiper-slide {
  text-align: center;
}
[data-js-slider=carousel] .swiper-slide-item {
  border: 1px solid #506266;
  line-height: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  max-width: 88.05%;
}
@media screen and (min-width: 769px) {
  [data-js-slider=carousel] .swiper-slide-item {
    max-width: 77.14%;
    width: 77.14%;
  }
}
[data-js-slider=carousel] .swiper-nav {
  left: 50%;
  max-width: 97.01%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 106%;
  z-index: 5;
}
@media screen and (min-width: 769px) {
  [data-js-slider=carousel] .swiper-nav {
    max-width: 88.57%;
    width: 88.57%;
  }
}
[data-js-slider=carousel] .swiper-nav .swiper-button-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
[data-js-slider=carousel] .swiper-nav .swiper-button-box::before {
  background-image: url(../images/common/arrow_ic-r-white.svg);
}
[data-js-slider=carousel] .swiper-pagination {
  margin-top: 0.2rem;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
@media screen and (min-width: 769px) {
  [data-js-slider=carousel] .swiper-pagination {
    margin-top: min(0.2rem, 20px);
  }
}
[data-js-slider=carousel] .swiper-pagination .swiper-pagination-bullet {
  background: #506266;
  border-radius: 0;
  height: 0.04rem;
  line-height: 1;
  opacity: 1;
  transition: background 0.4s ease;
  vertical-align: middle;
  width: 0.6rem;
}
@media screen and (min-width: 769px) {
  [data-js-slider=carousel] .swiper-pagination .swiper-pagination-bullet {
    height: min(0.04rem, 4px);
    width: min(0.8rem, 80px);
  }
}
[data-js-slider=carousel] .swiper-pagination .swiper-pagination-bullet:not(:last-of-type) {
  margin-right: 0.5em;
}
[data-js-slider=carousel] .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #65E4FF;
}

/************************************
  module
************************************/
/***** モーダル *****/
.modal-ctr {
  display: none;
}

.modal-trigger {
  opacity: 0;
  position: fixed;
  z-index: -1;
}

.modal-br {
  display: none;
}

.modal-agecheck {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
.modal-agecheck::before, .modal-agecheck::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-agecheck::before {
  animation: circularMotion 5s linear infinite;
  animation-play-state: paused;
  background-image: url(../images/common/play_ic-out.png);
  height: 29.6735905045%;
  width: 16.6666666667%;
  z-index: 2;
}
.modal-agecheck::after {
  background-image: url(../images/common/play_ic-in.png);
  height: 20.7715133531%;
  width: 11.6666666667%;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .modal-agecheck:hover::before {
    animation-play-state: running;
  }
}
.modal-agecheck + .video-list-thumb-inner::before, .modal-agecheck + .video-list-thumb-inner::after {
  display: none !important;
}

/*----- モーダル内コンテンツ年齢認証 -----*/
.conts-slider-agecheck {
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
.conts-slider-agecheck-inner {
  display: none;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.conts-slider-agecheck .mfp-agecheck-form {
  margin-right: auto;
  margin-bottom: 0.4rem;
  margin-left: auto;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form {
    margin-bottom: min(0.2rem, 20px);
  }
}
.conts-slider-agecheck .mfp-agecheck-form-ttl {
  color: #FFF;
  font-weight: bold;
  font-size: 0.36rem;
  margin-bottom: 0.2rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form-ttl {
    font-size: min(0.32rem, 32px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.conts-slider-agecheck .mfp-agecheck-form-block form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.conts-slider-agecheck .mfp-agecheck-form-input {
  position: relative;
  text-align: center;
  width: 28%;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form-input {
    width: 26%;
  }
}
.conts-slider-agecheck .mfp-agecheck-form-input .input-ttl,
.conts-slider-agecheck .mfp-agecheck-form-input .input-text {
  display: inline-block;
  vertical-align: middle;
}
.conts-slider-agecheck .mfp-agecheck-form-input .input-ttl {
  color: #FFF;
  display: block;
  font-size: 0.24rem;
  margin-bottom: 0.25em;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form-input .input-ttl {
    font-size: min(0.2rem, 20px);
    margin-bottom: 0.5em;
  }
}
.conts-slider-agecheck .mfp-agecheck-form-input .input-text {
  display: block;
  width: 100%;
}
.conts-slider-agecheck .mfp-agecheck-form-input input[type=tel] {
  border: 1px solid #1F0F16;
  box-sizing: border-box;
  font-size: 0.22rem;
  font-weight: 500;
  padding: 0.6em 0.5em 0.4em;
  text-align: center;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .conts-slider-agecheck .mfp-agecheck-form-input input[type=tel] {
    min-width: 3em;
  }
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form-input input[type=tel] {
    font-size: min(0.2rem, 20px);
    padding: 0.6em 1em 0.4em;
  }
}
.conts-slider-agecheck .mfp-agecheck-form-input input[type=tel].is-error {
  background: #FFCCCC;
  border: 1px solid #FF4747;
}
@media screen and (max-width: 768px) {
  .conts-slider-agecheck .mfp-agecheck-form-input.input-year input[type=tel] {
    min-width: 5em;
  }
}
.conts-slider-agecheck .mfp-agecheck-form .input-mark {
  color: #FFF;
  font-size: 0.32rem;
  font-weight: 500;
  position: relative;
  text-align: center;
  top: 1.2em;
  width: 1em;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-form .input-mark {
    font-size: min(0.28rem, 28px);
  }
}
.conts-slider-agecheck .mfp-agecheck-btn {
  margin: 0.4rem auto 0;
  width: 56.71%;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-btn {
    margin: min(0.4rem, 40px) auto 0;
    width: 35.18%;
  }
}
.conts-slider-agecheck .mfp-agecheck-btn-item {
  border: 1px solid rgba(200, 245, 255, 0.6);
  cursor: pointer;
  font-size: 0.22rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .conts-slider-agecheck .mfp-agecheck-btn-item {
    border: 1px solid rgba(200, 245, 255, 0);
  }
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-btn-item {
    font-size: min(0.18rem, 18px);
  }
}
.conts-slider-agecheck .mfp-agecheck-btn-item#under {
  background: transparent;
  border: none;
  color: #65E4FF;
  display: none;
  font-size: 0.6rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-btn-item#under {
    font-size: min(0.44rem, 44px);
  }
}
.conts-slider-agecheck .mfp-agecheck-btn-item#under .label {
  margin-bottom: 0.4em;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#under .close-btn {
  border: 1px solid #65e4ff;
  display: inline-block;
  font-size: 0.4em;
  font-weight: 400;
  padding: 0.5em 2em;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enterUnder {
  pointer-events: none;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enterUnder.is-active {
  border: 1px solid #65E4FF;
  display: block;
  pointer-events: initial;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enterUnder.is-active a {
  color: #65E4FF;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enterUnder.is-hide {
  display: none;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enter {
  display: none;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enter.is-active {
  border: 1px solid #65E4FF;
  display: block;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enter.is-active a {
  color: #65E4FF;
}
.conts-slider-agecheck .mfp-agecheck-btn-item#enter.is-hide {
  display: none;
}
.conts-slider-agecheck .mfp-agecheck-btn a {
  background-color: rgba(10, 105, 154, 0.75);
  color: #FFF;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0.3rem 0.35rem;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .conts-slider-agecheck .mfp-agecheck-btn a {
    padding: 0.2rem 0.1rem;
  }
}
@media screen and (min-width: 1480px) {
  .conts-slider-agecheck .mfp-agecheck-btn a {
    padding: 20px 10px;
  }
}
.conts-slider-agecheck .mfp-agecheck-btn a::before, .conts-slider-agecheck .mfp-agecheck-btn a::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.conts-slider-agecheck .mfp-agecheck-btn a::before {
  background: linear-gradient(to right, black 0%, white 100%);
  opacity: 0.5;
  z-index: -1;
}
.conts-slider-agecheck .mfp-agecheck-btn a::after {
  background-color: #42c0ff;
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.25;
  z-index: 1;
}
.conts-slider-agecheck.is-active {
  background: rgba(0, 0, 0, 0.8);
  z-index: 9;
}
.conts-slider-agecheck.is-active .conts-slider-agecheck-inner {
  display: block;
}

/*--- common ---*/
.mfp-zoom-out-cur {
  cursor: pointer;
}
.mfp-bg {
  background-color: #0F161F;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.mfp-wrap {
  cursor: pointer;
  overflow: hidden !important;
}
@media screen and (max-width: 768px) {
  .mfp-wrap {
    -webkit-overflow-scrolling: touch;
  }
}
.mfp-container {
  padding: 0;
}
.mfp-container .modal-br {
  display: block;
}
.mfp-img {
  padding: 0 !important;
}
.mfp-image-holder .mfp-close, .mfp-image-holder .mfp-close {
  overflow: hidden;
}
.mfp-preloader {
  font-size: 0;
}
.mfp-preloader::before {
  animation: loadingSpin 1s linear infinite;
  background: url(../images/common/loading_ic.png) center no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 36px;
  margin: -18px 0 0 -18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  z-index: -1;
}
.mfp-close {
  cursor: pointer !important;
  height: 6vw !important;
  opacity: 1;
  position: fixed !important;
  right: 0.2rem !important;
  text-indent: 1000%;
  top: 0.2rem !important;
  white-space: nowrap;
  width: 6vw !important;
}
@media screen and (min-width: 769px) {
  .mfp-close {
    height: 40px !important;
    right: 0.4rem !important;
    top: 0.3rem !important;
    transition: opacity 0.4s ease-in-out;
    width: 40px !important;
  }
}
.mfp-close::before, .mfp-close::after {
  background: #C8F5FF;
  content: "";
  display: block;
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-close::before, .mfp-close::after {
    height: 4px;
    width: 40px;
  }
}
.mfp-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mfp-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 769px) {
  .mfp-close:hover {
    opacity: 0.8;
  }
}
.mfp-zoom-out.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-out .mfp-content {
  perspective: 400px;
}
@media screen and (min-width: 769px) {
  .mfp-zoom-out .mfp-content {
    perspective: 2000px;
  }
}
.mfp-zoom-out .mfp-with-anim {
  backface-visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3) translate3d(0, 0, 0);
  will-change: transform;
}
.mfp-zoom-out .mfp-with-anim + .mfp-close {
  backface-visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3) translate3d(0, 0, 0);
  will-change: transform;
}
.mfp-zoom-out.mfp-ready.mfp-bg {
  opacity: 0.9;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
  opacity: 1;
  overflow: hidden auto;
  transform: scale(1);
}
.mfp-zoom-out.mfp-ready .mfp-with-anim + .mfp-close {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-out.mfp-removing.mfp-bg {
  opacity: 0.9;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
  opacity: 0;
  overflow: hidden;
  transform: scale(0);
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .mfp-zoom-out.mfp-removing .mfp-with-anim {
    transform: scale(0.7);
  }
}
.mfp-zoom-out.mfp-removing .mfp-with-anim + .mfp-close {
  opacity: 0;
  transform: scale(0);
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .mfp-zoom-out.mfp-removing .mfp-with-anim + .mfp-close {
    transform: scale(0.7);
  }
}
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-fade .mfp-content {
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-ready.mfp-bg {
  opacity: 0.9;
}
.mfp-fade.mfp-removing.mfp-bg {
  opacity: 0;
}
.mfp-fade.mfp-removing .mfp-content {
  opacity: 0;
  visibility: hidden;
}
@media screen and (min-width: 769px) {
  .mfp-video .mfp-container {
    padding: 40px 0;
  }
}
.mfp-video .mfp-with-anim {
  backface-visibility: hidden;
  transform: scale(1) translate3d(0, 0, 0);
  will-change: transform;
}
.mfp-video .mfp-with-anim + .mfp-close {
  backface-visibility: hidden;
  transform: scale(1) translate3d(0, 0, 0);
  will-change: transform;
}
.mfp-video .mfp-content {
  height: 56.25vw;
  max-height: calc(56.25vw - 80px);
  max-width: calc(100% - 80px);
  width: 100%;
}
@media screen and (min-width: 1480px) {
  .mfp-video .mfp-content {
    max-height: 832px;
    max-width: 1480px;
  }
}
.mfp-video .mfp-iframe-scaler {
  background: #000;
  height: 100%;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}
.mfp-video .mfp-close {
  position: absolute !important;
  right: 0.2rem !important;
  top: -30px !important;
}
@media screen and (min-width: 769px) {
  .mfp-video .mfp-close {
    height: 20px !important;
    width: 20px !important;
  }
}
.mfp-video .mfp-close::before, .mfp-video .mfp-close::after {
  height: 4px;
  width: 20px;
}
.mfp-character {
  height: inherit;
}
@media screen and (min-width: 769px) {
  .mfp-character {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.mfp-character .mfp-content {
  height: inherit;
}
.mfp-character [data-js-trigger=missionAgeCheck] {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .mfp-character [data-js-trigger=contsVideoEmbed] {
    display: none;
  }
}
.mfp-character [data-js-trigger=contsVideoEmbed].is-hide {
  display: none;
}
.mfp-character [data-js-elem=contsVideoPlayerCtr].is-hide {
  display: none;
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-with-anim {
    min-height: 50vw;
  }
}
.mfp-character .swiper-button-prev::after,
.mfp-character .swiper-button-dinosaurs-prev::after,
.mfp-character .swiper-button-neosaurs-prev::after {
  background-image: url(../images/modal/arrow_ic.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
  content: "";
  height: 24px;
  width: 24px;
}
@media screen and (max-width: 768px) {
  .mfp-character .swiper-button-prev::after,
  .mfp-character .swiper-button-dinosaurs-prev::after,
  .mfp-character .swiper-button-neosaurs-prev::after {
    background-color: #000;
    border: 1px solid #263435;
    padding: 4px;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .swiper-button-prev::after,
  .mfp-character .swiper-button-dinosaurs-prev::after,
  .mfp-character .swiper-button-neosaurs-prev::after {
    background-size: contain;
    height: 21px;
    width: 12px;
  }
}
.mfp-character .swiper-button-next,
.mfp-character .swiper-button-dinosaurs-next,
.mfp-character .swiper-button-neosaurs-next {
  left: auto;
  right: 10px;
}
.mfp-character .swiper-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.mfp-character .swiper-button::after {
  background-image: url(../images/modal/arrow_ic.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
  content: "";
  height: 24px;
  width: 24px;
}
@media screen and (max-width: 768px) {
  .mfp-character .swiper-button::after {
    background-color: #000;
    border: 1px solid #263435;
    padding: 4px;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .swiper-button::after {
    background-size: contain;
    height: 21px;
    width: 12px;
  }
}
.mfp-character .swiper-button .swiper-button-thumb {
  display: none;
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button .swiper-button-thumb {
    background: #0F161F;
    display: block;
    height: 5vw;
    position: absolute;
    width: 5vw;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .swiper-button .swiper-button-thumb {
    height: 72px;
    width: 72px;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button .swiper-button-thumb .swiper-button-thumb-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #506266;
    display: block;
    line-height: 0;
    margin-bottom: 8px;
    position: relative;
    transition: background 0.2s ease-in-out;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button .swiper-button-thumb::after {
    color: #65E4FF;
    display: block;
    font-size: 0.08rem;
    font-weight: 700;
    left: 50%;
    position: relative;
    text-align: center;
    transform: translateX(-50%);
    white-space: pre;
    width: 200%;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .swiper-button .swiper-button-thumb::after {
    font-size: 8px;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character .swiper-button-prev, .mfp-character .swiper-button-dinosaurs-prev, .mfp-character .swiper-button-neosaurs-prev {
    left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button-prev .swiper-button-thumb, .mfp-character .swiper-button-dinosaurs-prev .swiper-button-thumb, .mfp-character .swiper-button-neosaurs-prev .swiper-button-thumb {
    left: 26px;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .swiper-button-prev .swiper-button-thumb, .mfp-character .swiper-button-dinosaurs-prev .swiper-button-thumb, .mfp-character .swiper-button-neosaurs-prev .swiper-button-thumb {
    left: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button-prev .swiper-button-thumb::after, .mfp-character .swiper-button-dinosaurs-prev .swiper-button-thumb::after, .mfp-character .swiper-button-neosaurs-prev .swiper-button-thumb::after {
    content: attr(data-js-label-prev);
  }
}
.mfp-character .swiper-button-prev .swiper-button-thumb[data-js-label-prev="WITCH DOCTOR"]::after, .mfp-character .swiper-button-dinosaurs-prev .swiper-button-thumb[data-js-label-prev="WITCH DOCTOR"]::after, .mfp-character .swiper-button-neosaurs-prev .swiper-button-thumb[data-js-label-prev="WITCH DOCTOR"]::after {
  left: -2.25em;
  min-width: 14em;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mfp-character .swiper-button-next, .mfp-character .swiper-button-dinosaurs-next, .mfp-character .swiper-button-neosaurs-next {
    right: 0;
  }
}
.mfp-character .swiper-button-next::after, .mfp-character .swiper-button-dinosaurs-next::after, .mfp-character .swiper-button-neosaurs-next::after {
  transform: scale(-1, 1);
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button-next .swiper-button-thumb, .mfp-character .swiper-button-dinosaurs-next .swiper-button-thumb, .mfp-character .swiper-button-neosaurs-next .swiper-button-thumb {
    right: 26px;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .swiper-button-next .swiper-button-thumb, .mfp-character .swiper-button-dinosaurs-next .swiper-button-thumb, .mfp-character .swiper-button-neosaurs-next .swiper-button-thumb {
    right: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character .swiper-button-next .swiper-button-thumb::after, .mfp-character .swiper-button-dinosaurs-next .swiper-button-thumb::after, .mfp-character .swiper-button-neosaurs-next .swiper-button-thumb::after {
    content: attr(data-js-label-next);
  }
}
.mfp-character .swiper-button-next .swiper-button-thumb[data-js-label-next="WITCH DOCTOR"]::after, .mfp-character .swiper-button-dinosaurs-next .swiper-button-thumb[data-js-label-next="WITCH DOCTOR"]::after, .mfp-character .swiper-button-neosaurs-next .swiper-button-thumb[data-js-label-next="WITCH DOCTOR"]::after {
  left: -2.25em;
  min-width: 14em;
  position: relative;
}
.mfp-character .character-slider {
  padding: 1rem 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider {
    padding: 8vw 0;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .character-slider {
    max-width: 1780px;
    width: 92.7%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-item {
    height: auto;
  }
}
.mfp-character .character-slider-conts {
  background: black;
  border: 1px solid #506266;
  margin-right: auto;
  margin-left: auto;
  padding: 0.4rem;
  position: relative;
  width: 84%;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts {
    height: calc(100% - 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts {
    display: flex;
    align-items: center;
    max-width: 1400px;
    min-height: 30vw;
    padding: 0.4rem 0.8rem;
    width: 78.65%;
  }
  .mfp-character .character-slider-conts::before, .mfp-character .character-slider-conts::after {
    content: "";
    display: table;
  }
  .mfp-character .character-slider-conts::after {
    clear: both;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-character .character-slider-conts {
    padding: 40px 80px;
  }
}
.mfp-character .character-slider-conts::before, .mfp-character .character-slider-conts::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts::before, .mfp-character .character-slider-conts::after {
    transition: opacity 0.4s ease;
  }
}
.mfp-character .character-slider-conts::before {
  background: linear-gradient(to bottom, #0f161f 0%, rgba(15, 22, 31, 0) 100%);
  opacity: 1;
  z-index: 2;
}
.mfp-character .character-slider-conts::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.3;
  z-index: 1;
}
.mfp-character .character-slider-conts .character-slider-conts-inner {
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-slider-conts-inner {
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-slider-conts-inner {
    width: 63.57%;
  }
}
.mfp-character .character-slider-conts .character-name {
  color: #65E4FF;
  font-weight: 700;
  margin-bottom: 0.2rem;
  position: relative;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-name {
    order: 2;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-name {
    margin-bottom: min(0.2rem, 20px);
  }
}
.mfp-character .character-slider-conts .character-name-text {
  font-size: 0.62rem;
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-name-text {
    font-size: min(0.62rem, 62px);
  }
}
.mfp-character .character-slider-conts .character-name-ruby {
  font-size: 0.28rem;
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-name-ruby {
    font-size: min(0.28rem, 28px);
  }
}
.mfp-character .character-slider-conts .character-video {
  margin-bottom: 0.4rem;
  position: relative;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-video {
    order: 4;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-video {
    margin-bottom: min(0.2rem, 20px);
    max-width: 60%;
  }
}
.mfp-character .character-slider-conts .character-video-inner {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.mfp-character .character-slider-conts .character-video-inner::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-video-inner::after {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-video-inner[data-js-trigger=characterAgeCheck]::after {
    display: block;
  }
}
.mfp-character .character-slider-conts .character-video-thumb, .mfp-character .character-slider-conts .character-video-player {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mfp-character .character-slider-conts .character-video-player {
  background-color: #000;
}
.mfp-character .character-slider-conts .character-video-player-item {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mfp-character .character-slider-conts .character-video-thumb {
  cursor: pointer;
  z-index: 2;
}
.mfp-character .character-slider-conts .character-video-thumb-item::before, .mfp-character .character-slider-conts .character-video-thumb-item::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mfp-character .character-slider-conts .character-video-thumb-item::before {
  animation: circularMotion 5s linear infinite;
  animation-play-state: paused;
  background-image: url(../images/common/play_ic-out.png);
  height: 20.7715133531%;
  width: 11.6666666667%;
  z-index: 2;
}
.mfp-character .character-slider-conts .character-video-thumb-item::after {
  background-image: url(../images/common/play_ic-in.png);
  height: 11.8694362018%;
  width: 6.6666666667%;
  z-index: 1;
}
.mfp-character .character-slider-conts .character-video-thumb-only {
  pointer-events: none;
}
.mfp-character .character-slider-conts .character-video-thumb-only .character-video-thumb-item::before, .mfp-character .character-slider-conts .character-video-thumb-only .character-video-thumb-item::after {
  display: none;
}
.mfp-character .character-slider-conts .character-text {
  color: #FFF;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  line-height: 2;
  position: relative;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-text {
    order: 5;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character .character-slider-conts .character-img {
    margin-right: auto;
    margin-bottom: 0.4rem;
    margin-left: auto;
    order: 3;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character .character-slider-conts .character-img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
}
.mfp-character .character-slider-conts .character-img img {
  height: auto;
  width: 100%;
}
.mfp-character .character-slider-conts-mark {
  color: #65E4FF;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: -2.2em;
}
.mfp-character .character-slider-conts-mark::after {
  background: #65E4FF;
  bottom: 2px;
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.2em;
  width: 7px;
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-name {
    margin-bottom: 0.4rem;
  }
}
.mfp-character.mfp-dinosaurs .character-img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-img {
    margin-bottom: 0.4rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-img {
    right: -0.4rem;
    width: 65.35%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-img img {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    width: 143.33%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider {
    padding: 0 0 1rem;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-item {
    overflow: hidden;
    padding-top: 1.2rem;
    padding-bottom: 0.2rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-raptor .character-text {
    max-width: 71.91%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-raptor .character-img img {
    left: calc(50% - 0.6rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-pteranodon .character-text {
    max-width: 62.92%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-pteranodon .character-img img {
    left: calc(50% + 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-triceratops .character-text {
    max-width: 67.41%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-triceratops .character-img img {
    left: calc(50% - 0.6rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-trex .character-text {
    max-width: 78.65%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-trex .character-img img {
    left: calc(50% + 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-pachycephalosaurus .character-text {
    max-width: 88%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-carnotaurus .character-text {
    max-width: 70.78%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-carnotaurus .character-img {
    right: -1rem;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-carnotaurus .character-img img {
    left: calc(50% + 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-ankylosaurus .character-text {
    max-width: 67.41%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-ankylosaurus .character-img img {
    left: calc(50% + 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-dilophosaurus .character-text {
    max-width: 71.91%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-dilophosaurus .character-img img {
    left: calc(50% - 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-sinornithosaurus .character-text {
    max-width: 71.91%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-sinornithosaurus .character-img img {
    left: calc(50% - 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-stegosaurus .character-text {
    max-width: 71.91%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-dinosaurs .character-slider-stegosaurus .character-img img {
    left: calc(50% - 1.6rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-baryonyx .character-text {
    max-width: 74.15%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-suchomimus .character-text {
    max-width: 74.15%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-dinosaurs .character-slider-deinonychus .character-text {
    max-width: 74.15%;
  }
}
.mfp-character.mfp-neosaurs .swiper-button.swiper-button-disabled {
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-name {
    margin-bottom: -0.4rem;
  }
}
.mfp-character.mfp-neosaurs .character-img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-img {
    margin-bottom: 0.4rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-img {
    right: -1.2rem;
    width: 68.21%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-img img {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    width: 149.06%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider {
    padding: 0 0 1rem;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-item {
    overflow: hidden;
    padding-top: 1.2rem;
    padding-bottom: 0.2rem;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-gas .character-text {
    margin-top: 0.2rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-gas .character-text {
    max-width: 84.93%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-gas .character-img {
    right: -0.6rem;
    transform: translateY(-50%) scale(1.08);
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-gas .character-img img {
    top: 0.4rem;
    transform: translateX(-50%) scale(1.08);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-sniper .character-text {
    max-width: 79.45%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-sniper .character-img {
    right: -1.6rem;
    top: calc(50% - 0.4rem);
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-sniper .character-img img {
    left: calc(50% + 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-evoker .character-text {
    max-width: 84.93%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-evoker .character-img {
    right: -0.6rem;
    top: calc(50% - 0.4rem);
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-evoker .character-img img {
    left: calc(50% - 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-pyro .character-text {
    max-width: 71.23%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-neoankylosaurus .character-text {
    max-width: 76.71%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-neoankylosaurus .character-img img {
    left: calc(50% + 0.45rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-neotrex .character-text {
    max-width: 84.93%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-neotrex .character-img {
    right: -0.6rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-stealth .character-text {
    max-width: 84.93%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-stealth .character-img img {
    left: calc(50% - 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-cryo .character-text {
    max-width: 84.93%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character.mfp-neosaurs .character-slider-cryo .character-img img {
    left: calc(50% - 0.4rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-shadow .character-text {
    max-width: 71.23%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character.mfp-neosaurs .character-slider-neotriceratops .character-text {
    max-width: 71.23%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-slider-conts {
    width: 71.91%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-slider-conts-inner {
    width: 49.21%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-slider {
    padding: 0 0 1rem;
  }
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-slider-item {
    overflow: hidden;
    padding-top: 1.2rem;
    padding-bottom: 0.2rem;
  }
}
.mfp-character#mfpCharacter .character-name {
  margin-bottom: 0.3rem;
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-name {
    max-width: 69.2%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-name {
    margin-bottom: min(0.3rem, 30px);
  }
}
.mfp-character#mfpCharacter .character-job {
  color: #C8F5FF;
  font-size: 0.28rem;
  margin-bottom: 0.4rem;
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-job {
    order: 2;
    max-width: 69.2%;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-job {
    font-size: min(0.28rem, 28px);
    margin-bottom: min(0.3rem, 30px);
  }
}
.mfp-character#mfpCharacter .character-org-ic {
  position: absolute;
  width: 21.26%;
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-org-ic {
    right: 0.4rem;
    top: 0.4rem;
    z-index: 9;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-org-ic {
    left: 50%;
    opacity: 0.2;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32.85%;
    z-index: 2;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-text-ace {
    max-width: 89.04%;
  }
}
.mfp-character#mfpCharacter .character-img {
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-img {
    right: min(0.4rem, 40px);
    width: 48.71%;
  }
}
.mfp-character#mfpCharacter .character-slider-ace .link-btn {
  margin-top: 0.4rem;
}
@media screen and (max-width: 768px) {
  .mfp-character#mfpCharacter .character-slider-ace .link-btn {
    order: 5;
  }
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-slider-ace .link-btn {
    margin-top: min(0.4rem, 40px);
  }
}
.mfp-character#mfpCharacter .character-slider-ace .link-btn .effect-btn-item {
  font-size: 0.2rem;
}
@media screen and (min-width: 769px) {
  .mfp-character#mfpCharacter .character-slider-ace .link-btn .effect-btn-item {
    font-size: min(0.18rem, 18px);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=ace] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-synes.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=ace] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-lorenzo.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=lorenzo] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-ace.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=lorenzo] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-alders.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=alders] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-lorenzo.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=alders] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-majesty.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=majesty] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-alders.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=majesty] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-sandii.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=sandii] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-majesty.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=sandii] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-magnum.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=magnum] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-sandii.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=magnum] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-durban.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=durban] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-magnum.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=durban] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-haruka.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=haruka] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-durban.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=haruka] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-synes.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=synes] .swiper-button-character-prev .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-haruka.png);
  }
}
@media screen and (min-width: 1024px) {
  .mfp-character#mfpCharacter[data-js-slide=synes] .swiper-button-character-next .swiper-button-thumb-img {
    background-image: url(../images/story/slide_btn-character-ace.png);
  }
}
.mfp-mission {
  height: inherit;
}
@media screen and (min-width: 769px) {
  .mfp-mission {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
.mfp-mission .mfp-content {
  height: inherit;
}
@media screen and (min-width: 769px) {
  .mfp-mission.mfp-with-anim {
    min-height: 50vw;
  }
}
.mfp-mission [data-js-trigger=missionAgeCheck] {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .mfp-mission [data-js-trigger=contsVideoEmbed] {
    display: none;
  }
}
.mfp-mission [data-js-trigger=contsVideoEmbed].is-hide {
  display: none;
}
.mfp-mission [data-js-elem=contsVideoPlayerCtr].is-hide {
  display: none;
}
.mfp-mission .swiper-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.mfp-mission .swiper-button::after {
  background-image: url(../images/modal/arrow_ic.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
  content: "";
  height: 24px;
  padding: 4px;
  width: 24px;
}
@media screen and (min-width: 769px) {
  .mfp-mission .swiper-button::after {
    background-size: contain;
    height: 21px;
    width: 12px;
  }
}
.mfp-mission .swiper-button-mission-prev {
  left: 0;
}
@media screen and (min-width: 769px) {
  .mfp-mission .swiper-button-mission-prev {
    left: 0.8rem;
  }
}
.mfp-mission .swiper-button-mission-prev::before {
  left: calc(50% - 0.8rem);
  transform: scale(-1, 1) translate(-50%, -50%);
}
@media screen and (min-width: 769px) {
  .mfp-mission .swiper-button-mission-prev::before {
    left: calc(50% - 8px);
  }
}
.mfp-mission .swiper-button-mission-next {
  right: 0;
}
@media screen and (min-width: 769px) {
  .mfp-mission .swiper-button-mission-next {
    right: 0.8rem;
  }
}
.mfp-mission .mission-slider {
  padding: 2rem 0 1rem;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider {
    padding: 10vw 0;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-mission .mission-slider {
    max-width: 1780px;
    width: 92.7%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-item {
    height: auto;
  }
}
.mfp-mission .mission-slider-conts {
  background: black;
  border: 1px solid #506266;
  margin-right: auto;
  margin-left: auto;
  padding: 0.4rem;
  position: relative;
  width: 84%;
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-conts {
    height: calc(100% - 0.8rem);
  }
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts {
    max-width: 1400px;
    padding: min(0.4rem, 40px) min(0.6rem, 60px);
    width: 69.66%;
  }
  .mfp-mission .mission-slider-conts::before, .mfp-mission .mission-slider-conts::after {
    content: "";
    display: table;
  }
  .mfp-mission .mission-slider-conts::after {
    clear: both;
  }
}
.mfp-mission .mission-slider-conts::before, .mfp-mission .mission-slider-conts::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts::before, .mfp-mission .mission-slider-conts::after {
    transition: opacity 0.4s ease;
  }
}
.mfp-mission .mission-slider-conts::before {
  background: linear-gradient(to bottom, #0f161f 0%, rgba(15, 22, 31, 0) 100%);
  opacity: 1;
  z-index: 2;
}
.mfp-mission .mission-slider-conts::after {
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.3;
  z-index: 1;
}
.mfp-mission .mission-slider-conts .mission-slider-conts-inner {
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-slider-conts-inner {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1.8fr 2.2fr;
    grid-template-rows: 1fr 3fr;
    gap: 0% 0px;
    align-items: center;
    grid-template-areas: "name video" "text video";
  }
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-conts .mission-detail {
    min-height: 20vw;
  }
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-detail {
    width: 42.85%;
  }
}
.mfp-mission .mission-slider-conts .mission-name {
  color: #65E4FF;
  font-weight: 700;
  margin-bottom: 0.4rem;
  position: relative;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-name {
    grid-area: name;
    margin-bottom: min(0.05rem, 5px);
    width: 100%;
  }
}
.mfp-mission .mission-slider-conts .mission-name-text {
  font-size: 0.48rem;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-name-text {
    font-size: min(0.4rem, 40px);
  }
}
.mfp-mission .mission-slider-conts .mission-text {
  color: #FFF;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  line-height: 2;
  position: relative;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-text {
    grid-area: text;
    align-self: start;
    width: 100%;
  }
}
.mfp-mission .mission-slider-conts .mission-video {
  position: relative;
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-conts .mission-video {
    margin-bottom: 0.4rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-mission .mission-slider-conts .mission-video {
    grid-area: video;
    margin-left: 4%;
    width: 96%;
  }
}
.mfp-mission .mission-slider-conts .mission-video-inner {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.mfp-mission .mission-slider-conts .mission-video-inner::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-conts .mission-video-inner::after {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .mfp-mission .mission-slider-conts .mission-video-inner[data-js-trigger=missionAgeCheck]::after {
    display: block;
  }
}
.mfp-mission .mission-slider-conts .mission-video-thumb, .mfp-mission .mission-slider-conts .mission-video-player {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mfp-mission .mission-slider-conts .mission-video-player {
  background-color: #000;
}
.mfp-mission .mission-slider-conts .mission-video-player-item {
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mfp-mission .mission-slider-conts .mission-video-thumb {
  cursor: pointer;
  z-index: 2;
}
.mfp-mission .mission-slider-conts .mission-video-thumb-item::before, .mfp-mission .mission-slider-conts .mission-video-thumb-item::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mfp-mission .mission-slider-conts .mission-video-thumb-item::before {
  animation: circularMotion 5s linear infinite;
  animation-play-state: paused;
  background-image: url(../images/common/play_ic-out.png);
  height: 20.7715133531%;
  width: 11.6666666667%;
  z-index: 2;
}
.mfp-mission .mission-slider-conts .mission-video-thumb-item::after {
  background-image: url(../images/common/play_ic-in.png);
  height: 11.8694362018%;
  width: 6.6666666667%;
  z-index: 1;
}
.mfp-mission .mission-slider-conts-mark {
  color: #65E4FF;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: -2.2em;
}
.mfp-mission .mission-slider-conts-mark::after {
  background: #65E4FF;
  bottom: 2px;
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.2em;
  width: 7px;
}
.mfp-product.mfp-wrap {
  overflow: hidden auto !important;
}
.mfp-product .mfp-content {
  line-height: 1.5;
  margin: 1.2rem auto 0.8rem;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-content {
    margin: 1.2rem auto 0.8rem;
    position: relative;
    width: 92.7%;
  }
}
.mfp-product .mfp-product-item {
  display: none;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 84%;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-item {
    width: 78.65%;
  }
}
.mfp-product .mfp-product-inner {
  background-image: url(../images/conts_bg-sp.png);
  background-size: 120%;
  background-position: center top;
  background-repeat: no-repeat;
  border: 1px solid #506266;
  padding: 0.4rem;
  position: relative;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-inner {
    background-image: url(../images/conts_bg.jpg);
    background-size: 100vw;
  }
}
.mfp-product .mfp-product-inner::before, .mfp-product .mfp-product-inner::after {
  background: #65E4FF;
  content: "";
  display: block;
  position: absolute;
  transition: background 0.2s ease-in-out;
  z-index: 1;
}
.mfp-product .mfp-product-inner::before {
  height: 3px;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
}
.mfp-product .mfp-product-inner::after {
  height: 2px;
  right: -1px;
  top: -7px;
  width: 7px;
}
.mfp-product .mfp-product-bg {
  background: rgba(15, 22, 31, 0);
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.mfp-product .mfp-product-bg::before, .mfp-product .mfp-product-bg::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-bg::before, .mfp-product .mfp-product-bg::after {
    transition: opacity 0.4s ease;
  }
}
.mfp-product .mfp-product-bg::before {
  background: linear-gradient(to bottom, rgba(15, 22, 31, 0) 0%, #0f161f 100%);
  opacity: 1;
  z-index: -1;
}
.mfp-product .mfp-product-bg::after {
  background-image: url(../images/common/pattern_bg.png);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: 100vw;
  opacity: 0.4;
  z-index: 1;
}
.mfp-product .mfp-product-ttl {
  color: #C8F5FF;
  font-size: 0.36rem;
  font-weight: 900;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-ttl {
    font-size: min(0.4rem, 40px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.mfp-product .mfp-product-ttl .pattern-text {
  display: inline-block;
  position: relative;
}
.mfp-product .mfp-product-desc {
  color: #FFF;
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-desc {
    margin-bottom: min(0.4rem, 40px);
    text-align: center;
  }
}
.mfp-product .mfp-product-content {
  margin-bottom: 0.4rem;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-content {
    margin-bottom: min(0.4rem, 40px);
    text-align: center;
  }
}
.mfp-product .mfp-product-content-item {
  display: block;
  position: relative;
}
.mfp-product .mfp-product-content-text {
  color: #65E4FF;
  display: block;
  font-size: 0.2rem;
  font-weight: 700;
  padding: 1em 2em;
}
@media screen and (min-width: 769px) {
  .mfp-product .mfp-product-content-text {
    font-size: min(0.18rem, 18px);
  }
}
.mfp-product .mfp-product-content-line {
  display: block;
  width: 100%;
}
.mfp-product .mfp-product-content-line-item {
  background-color: rgba(101, 228, 255, 0.4);
  display: block;
  height: 1px;
  position: relative;
  width: 100%;
}
.mfp-product .mfp-product-content-line-item::before, .mfp-product .mfp-product-content-line-item::after {
  background-color: #65e4ff;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 4px;
  z-index: 1;
}
.mfp-product .mfp-product-content-line-item::before {
  left: 0;
}
.mfp-product .mfp-product-content-line-item::after {
  right: 0;
}
.mfp-product .mfp-product-image .image-item {
  width: 100%;
}
.mfp-product .product-conts-mark {
  color: #65E4FF;
  font-weight: 700;
  left: 0;
  line-height: 1;
  position: absolute;
  top: -2.2em;
}
.mfp-product .product-conts-mark::after {
  background: #65E4FF;
  bottom: 2px;
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.2em;
  width: 7px;
}
.mfp-product .notes {
  color: #FFF;
  font-size: 0.18rem;
  font-weight: 400;
  margin-top: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product .notes {
    font-size: min(0.12rem, 12px);
    margin-top: min(0.28rem, 28px);
  }
}
.mfp-product .notes:not(:last-child) {
  margin-bottom: 1em;
}
.mfp-product .notes-ttl {
  color: #FFF;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  font-size: 0.9em;
  margin-bottom: 0.2em;
}
.mfp-product .notes-item {
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  padding-left: 1em;
  text-indent: -1em;
}
.mfp-product .notes-item:not(:last-child) {
  margin-bottom: 0.5em;
}
.mfp-product #deluxeKit {
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 769px) {
  .mfp-product #deluxeKit {
    margin-bottom: min(1.2rem, 120px);
  }
}
.mfp-product #deluxeKit .mfp-product-image .image-item {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  width: 129.85%;
}
@media screen and (min-width: 769px) {
  .mfp-product #deluxeKit .mfp-product-image .image-item {
    margin-bottom: -0.48rem;
    width: 126.14%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product #deluxePass .mfp-product-image .image-item {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 111.94%;
  }
}
.mfp-product #storePrivilege .mfp-product-ttl .pattern-bar-item::before {
  top: min(0.15rem, 15px);
}
.mfp-product #storePrivilege .mfp-product-ttl .pattern-bar-item::after {
  bottom: min(0.15rem, 15px);
}
.mfp-product #storePrivilege .mfp-product-content-text-store {
  display: block;
}
.mfp-product #storePrivilege .mfp-product-content-text-item {
  color: #C8F5FF;
  display: block;
}
.mfp-product #storePrivilege .mfp-product-image {
  background-color: rgba(119, 119, 119, 0.2);
  border: 1px solid rgba(101, 228, 255, 0.2);
  position: relative;
  z-index: 1;
}
.mfp-product #storePrivilege .mfp-product-image::before, .mfp-product #storePrivilege .mfp-product-image::after {
  background: #65e4ff;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: -1px;
  width: 1px;
  z-index: 1;
}
.mfp-product #storePrivilege .mfp-product-image::before {
  left: -1px;
}
.mfp-product #storePrivilege .mfp-product-image::after {
  right: -1px;
}
.mfp-product #storePrivilege .mfp-product-image .image-item {
  line-height: 0;
}
.mfp-product #storePrivilege .mfp-product-image .image-item::before, .mfp-product #storePrivilege .mfp-product-image .image-item::after {
  background: #65e4ff;
  bottom: -1px;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 1px;
  z-index: 1;
}
.mfp-product #storePrivilege .mfp-product-image .image-item::before {
  left: -1px;
}
.mfp-product #storePrivilege .mfp-product-image .image-item::after {
  right: -1px;
}
.mfp-product #storePrivilege .mfp-product-image .image-item-all {
  padding: 0.4rem 0;
  text-align: center;
}
.mfp-product #storePrivilege .mfp-product-image .image-item-all img {
  width: 51.94%;
}
@media screen and (min-width: 769px) {
  .mfp-product #storePrivilege .mfp-product-image .image-item-all img {
    width: 24.85%;
  }
}
.mfp-product #storePrivilege .mfp-product-image-ctr {
  margin-top: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-product #storePrivilege .mfp-product-image-ctr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: min(0.4rem, 40px);
  }
}
@media screen and (min-width: 769px) {
  .mfp-product #storePrivilege .mfp-product-image-ctr .mfp-product-image {
    width: 48.5%;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product #storePrivilege .mfp-product-image-ctr .mfp-product-image:not(:last-child) {
    margin-bottom: 0.4rem;
  }
}
.mfp-product #storePrivilege .mfp-product-store-amazon {
  margin-bottom: 0.8rem;
}
@media screen and (min-width: 769px) {
  .mfp-product #storePrivilege .mfp-product-store-amazon {
    margin-bottom: min(0.8rem, 80px);
  }
}
.mfp-product #system .mfp-product-inner {
  background-image: none;
  border: none;
  padding: 0;
}
.mfp-product #system .table {
  border-top: 1px solid rgba(101, 228, 255, 0.5);
  border-left: 1px solid rgba(101, 228, 255, 0.5);
  color: #FFF;
  font-weight: 500;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table {
    display: block;
    text-align: center;
  }
}
.mfp-product #system .table-th {
  background-color: rgba(28, 151, 176, 0.3);
  border-right: 1px solid rgba(101, 228, 255, 0.5);
  border-bottom: 1px solid rgba(101, 228, 255, 0.5);
  font-weight: 500;
  padding: 0.5em 1em;
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table-th {
    display: block;
    font-size: 0.26rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product #system .table-th {
    padding: 0.5em 1em;
    vertical-align: middle;
  }
}
.mfp-product #system .table-td {
  border-right: 1px solid rgba(101, 228, 255, 0.5);
  border-bottom: 1px solid rgba(101, 228, 255, 0.5);
  padding: 0.75em 1em;
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table-td {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product #system .table-td {
    padding: 0.5em 1em;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table-td::before {
    color: #C8F5FF;
    content: attr(data-table-th);
    display: block;
    margin-bottom: 0.5em;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table-td-rowspan {
    border-bottom: none;
    padding: 0.75em 1em 0;
  }
}
@media screen and (max-width: 768px) {
  .mfp-product #system .table thead {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product #system .table tbody .table-th {
    width: 20%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-product #system .table tbody .table-td {
    width: 40%;
  }
}
.mfp-product.mfp-deluxe #deluxeKit,
.mfp-product.mfp-deluxe #deluxePass {
  display: block;
}
.mfp-product.mfp-storePrivilege #storePrivilege {
  display: block;
}
.mfp-product.mfp-storePrivilege-ecapcom #storePrivilegeamazon {
  display: none;
}
.mfp-product.mfp-system #system {
  display: block;
}
.mfp-topics.mfp-wrap {
  overflow: hidden auto !important;
}
.mfp-topics .mfp-content {
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-content {
    position: relative;
  }
}
.mfp-topics .mfp-topics-item {
  margin: 1.2rem auto 0.8rem;
  position: relative;
  width: 84%;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-item {
    margin: 1.2rem auto 0.8rem;
    width: 72.91%;
  }
}
.mfp-topics .mfp-topics-inner {
  background-image: url(../images/conts_bg-sp.png);
  background-size: 120%;
  background-position: center top;
  background-repeat: no-repeat;
  border: 1px solid #506266;
  padding: 0.4rem;
  position: relative;
  z-index: -1;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-inner {
    background-image: url(../images/conts_bg.jpg);
    background-size: 100vw;
  }
}
.mfp-topics .mfp-topics-inner::before, .mfp-topics .mfp-topics-inner::after {
  background: #65E4FF;
  content: "";
  display: block;
  position: absolute;
  transition: background 0.2s ease-in-out;
  z-index: 1;
}
.mfp-topics .mfp-topics-inner::before {
  height: 3px;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
}
.mfp-topics .mfp-topics-inner::after {
  height: 2px;
  right: -1px;
  top: -7px;
  width: 7px;
}
.mfp-topics .mfp-topics-bg {
  background: rgba(15, 22, 31, 0);
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.mfp-topics .mfp-topics-bg::before, .mfp-topics .mfp-topics-bg::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-bg::before, .mfp-topics .mfp-topics-bg::after {
    transition: opacity 0.4s ease;
  }
}
.mfp-topics .mfp-topics-bg::before {
  background: linear-gradient(to bottom, rgba(15, 22, 31, 0) 0%, #0f161f 100%);
  opacity: 1;
  z-index: -1;
}
.mfp-topics .mfp-topics-bg::after {
  background-image: url(../images/common/pattern_bg.png);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: 100vw;
  opacity: 0.4;
  z-index: 1;
}
.mfp-topics .mfp-topics-ttl {
  color: #C8F5FF;
  font-size: 0.36rem;
  font-weight: 900;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-ttl {
    font-size: min(0.4rem, 40px);
    margin-bottom: min(0.2rem, 20px);
  }
}
.mfp-topics .mfp-topics-ttl .pattern-text {
  display: inline-block;
  position: relative;
}
.mfp-topics .mfp-topics-lead {
  color: #FFF;
  font-size: 0.26rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-lead {
    font-size: min(0.28rem, 28px);
    margin-bottom: min(0.4rem, 40px);
  }
}
.mfp-topics .mfp-topics-desc {
  color: #FFF;
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics .mfp-topics-desc {
    margin-bottom: min(0.4rem, 40px);
    text-align: center;
  }
}
.mfp-topics .mfp-topics-image-item {
  line-height: 0;
  width: 100%;
}
.mfp-topics .topics-conts-mark {
  color: #65E4FF;
  font-weight: 700;
  left: 0;
  line-height: 1;
  position: absolute;
  top: -2.2em;
}
.mfp-topics .topics-conts-mark::after {
  background: #65E4FF;
  bottom: 2px;
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.2em;
  width: 7px;
}
.mfp-topics .notes {
  color: #FFF;
  font-size: 0.18rem;
  font-weight: 400;
  margin-top: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics .notes {
    font-size: min(0.12rem, 12px);
    margin-top: min(0.28rem, 28px);
  }
}
.mfp-topics .notes:not(:last-child) {
  margin-bottom: 1em;
}
.mfp-topics .notes-ttl {
  color: #FFF;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  font-size: 0.9em;
  margin-bottom: 0.2em;
}
.mfp-topics .notes-item {
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  padding-left: 1em;
  text-indent: -1em;
}
.mfp-topics .notes-item:not(:last-child) {
  margin-bottom: 0.5em;
}
.mfp-topics #collaboSF6 .mfp-topics-image {
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics #collaboSF6 .mfp-topics-image {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: min(0.4rem, 40px);
  }
}
.mfp-topics #collaboSF6 .mfp-topics-image-item {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-topics #collaboSF6 .mfp-topics-image-item {
    width: 50%;
  }
}
.mfp-topics #titleUpdate .mfp-topics-image {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics #titleUpdate .mfp-topics-image {
    justify-content: center;
    margin-bottom: min(0.4rem, 40px);
  }
}
.mfp-topics #titleUpdate .mfp-topics-image-item:nth-of-type(1) {
  width: 48.0597014925%;
}
@media screen and (min-width: 769px) {
  .mfp-topics #titleUpdate .mfp-topics-image-item:nth-of-type(1) {
    width: min(4.2rem, 420px);
  }
}
.mfp-topics #titleUpdate .mfp-topics-image-item:nth-of-type(2) {
  width: 51.9402985075%;
}
@media screen and (min-width: 769px) {
  .mfp-topics #titleUpdate .mfp-topics-image-item:nth-of-type(2) {
    width: min(6.66rem, 666px);
  }
}
.mfp-topics #titleUpdate4 .mfp-topics-image {
  border: 1px solid #506266;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics #titleUpdate4 .mfp-topics-image {
    justify-content: center;
    margin-right: auto;
    margin-bottom: min(0.4rem, 40px);
    margin-left: auto;
    max-width: 88%;
  }
}
.mfp-topics-notice {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-topics-notice .mfp-topics-item {
    margin: 2.4rem auto 0.8rem;
  }
}
.mfp-topics-notice .mfp-topics-ttl {
  font-size: 0.32rem;
}
@media screen and (min-width: 769px) {
  .mfp-topics-notice .mfp-topics-ttl {
    font-size: min(0.36rem, 36px);
  }
}
.mfp-topics-notice .mfp-topics-ttl .pattern-text {
  display: inline-block;
  max-width: calc(100% - 0.8rem - 1em);
  position: relative;
}
.mfp-topics-notice .mfp-topics-ttl .pattern-text-item {
  line-height: 1.2;
}
.mfp-topics-notice .mfp-topics-ttl strong {
  display: block;
}
.mfp-topics-notice .text-ctr {
  text-align: left;
}
@media screen and (min-width: 769px) {
  .mfp-topics-notice .text-ctr {
    display: inline-block;
  }
}
.mfp-topics-notice .text-ctr:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
  line-height: 1.6;
}
.mfp-notice.mfp-wrap {
  overflow: hidden auto !important;
}
.mfp-notice .mfp-container {
  pointer-events: none;
}
.mfp-notice .mfp-container .mfp-topics-item {
  pointer-events: auto;
}
.mfp-image.mfp-wrap {
  overflow: hidden auto !important;
}
.mfp-image .mfp-figure {
  margin: 0 auto;
  padding: 1.2rem 0 0.8rem;
  width: 94.66%;
}
@media screen and (min-width: 769px) {
  .mfp-image .mfp-figure {
    margin: 8vh auto;
    padding: 0;
    position: relative;
    width: 82.29%;
  }
}
.mfp-image .mfp-figure::after {
  display: none;
}
.mfp-agecheck.mfp-bg {
  background-image: none;
  background-color: #0F161F;
}
.mfp-agecheck .mfp-content {
  margin: 0 auto;
  width: 89.33%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-content {
    margin: 8vh auto;
    position: relative;
    width: 45.31%;
  }
}
.mfp-agecheck .mfp-agecheck {
  padding: 0.4rem;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck {
    padding: 0.4rem 0.8rem;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
  margin-right: auto;
  margin-bottom: 0.4rem;
  margin-left: auto;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
    margin-bottom: 0.2rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form {
    margin-bottom: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
  color: #FFF;
  font-weight: bold;
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
    font-size: 0.32rem;
    margin-bottom: 0.2rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-ttl {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-block form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input {
  position: relative;
  text-align: center;
  width: 28%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input {
    width: 26%;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl,
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-text {
  display: inline-block;
  vertical-align: middle;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
  color: #FFF;
  display: block;
  font-size: 0.28rem;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
    font-size: 0.2rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-ttl {
    font-size: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input .input-text {
  display: block;
  width: 100%;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
  border: 1px solid #1F0F16;
  box-sizing: border-box;
  font-size: 0.26rem;
  font-weight: 500;
  padding: 0.8em 0.5em 0.6em;
  text-align: center;
  max-width: 100%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
    font-size: 0.2rem;
    padding: 0.6em 1em 0.4em;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel] {
    font-size: 20px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form-input input[type=tel].is-error {
  background: #FFCCCC;
  border: 1px solid #FF4747;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
  color: #FFF;
  font-size: 0.36rem;
  font-weight: 500;
  position: relative;
  text-align: center;
  top: 1.5em;
  width: 1em;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
    font-size: 0.28rem;
  }
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-form .input-mark {
    font-size: 28px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
  margin: 0.8rem auto 0;
  width: 56.71%;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
    margin: 0.4rem auto 0;
    width: 35.18%;
  }
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn {
    margin: 40px auto 0;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
  border: 1px solid rgba(200, 245, 255, 0.6);
  cursor: pointer;
  font-size: 0.26rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
    border: 1px solid rgba(200, 245, 255, 0);
  }
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
    font-size: 0.18rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item {
    font-size: 18px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
  background: transparent;
  border: none;
  color: #65E4FF;
  display: none;
  font-size: 0.74rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
    font-size: 0.58rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#under {
    font-size: 58px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder {
  pointer-events: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-active {
  border: 1px solid #65E4FF;
  display: block;
  pointer-events: initial;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-active a {
  color: #65E4FF;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enterUnder.is-hide {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-active {
  border: 1px solid #65E4FF;
  display: block;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-active a {
  color: #65E4FF;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn-item#enter.is-hide {
  display: none;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
  background-color: rgba(10, 105, 154, 0.75);
  color: #FFF;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0.3rem 0.35rem;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
    padding: 0.2rem 0.1rem;
  }
}
@media screen and (min-width: 1480px) {
  .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a {
    padding: 20px 10px;
  }
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a::before, .mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a::before {
  background: linear-gradient(to right, black 0%, white 100%);
  opacity: 0.5;
  z-index: -1;
}
.mfp-agecheck .mfp-agecheck .mfp-agecheck-btn a::after {
  background-color: #42c0ff;
  background-image: url(../images/common/pattern_border.png);
  background-position: top left;
  background-repeat: repeat;
  background-size: 6px;
  opacity: 0.25;
  z-index: 1;
}

.is-age-under .mfp-agecheck .mfp-agecheck,
.is-age-under .mfp-mission .mfp-agecheck,
.is-age-under .mfp-character .mfp-agecheck {
  background: transparent;
  border: none;
  padding: 0;
}
.is-age-under .mfp-agecheck .mfp-agecheck-form,
.is-age-under .mfp-mission .mfp-agecheck-form,
.is-age-under .mfp-character .mfp-agecheck-form {
  display: none;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn,
.is-age-under .mfp-mission .mfp-agecheck-btn,
.is-age-under .mfp-character .mfp-agecheck-btn {
  width: 100%;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#under,
.is-age-under .mfp-mission .mfp-agecheck-btn .mfp-agecheck-btn-item#under,
.is-age-under .mfp-character .mfp-agecheck-btn .mfp-agecheck-btn-item#under {
  display: block;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#enterUnder,
.is-age-under .mfp-mission .mfp-agecheck-btn .mfp-agecheck-btn-item#enterUnder,
.is-age-under .mfp-character .mfp-agecheck-btn .mfp-agecheck-btn-item#enterUnder {
  display: none;
}
.is-age-under .mfp-agecheck .mfp-agecheck-btn .mfp-agecheck-btn-item#enter,
.is-age-under .mfp-mission .mfp-agecheck-btn .mfp-agecheck-btn-item#enter,
.is-age-under .mfp-character .mfp-agecheck-btn .mfp-agecheck-btn-item#enter {
  display: none;
}
.is-age-under [data-js-trigger=contsVideoEmbed] {
  display: block;
  pointer-events: none;
}
.is-age-under .mfp-mission .mission-slider-conts .mission-video-thumb-item::before,
.is-age-under .mfp-mission .mission-slider-conts .mission-video-thumb-item::after {
  display: none;
}
.is-age-under .mfp-character .character-slider-conts .character-video-thumb-item::before,
.is-age-under .mfp-character .character-slider-conts .character-video-thumb-item::after {
  display: none;
}

.is-age-over [data-js-elem=contsAgekCheck] {
  display: none;
}
@media screen and (max-width: 768px) {
  .is-age-over .mfp-mission .mission-slider-conts .mission-video-inner::after {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .is-age-over .mfp-character .character-slider-conts .character-video-inner::after {
    display: none;
  }
}

/****** 言語選択 ******/
.langselect {
  color: #FFF;
}
@media screen and (min-width: 769px) {
  .langselect {
    position: relative;
    text-align: center;
    z-index: 9;
  }
}
.langselect-inner {
  position: relative;
}
@media screen and (max-width: 768px) {
  .langselect-inner {
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .langselect-inner {
    display: inline-block;
    text-align: left;
  }
}
.langselect .SumoSelect {
  width: auto;
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect {
    background: rgba(0, 0, 0, 0);
    min-width: 160px;
    padding: 0 40px 15px;
    transition: background 0.2s ease;
  }
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect.open {
    background: rgba(0, 0, 0, 0.8);
  }
}
.langselect .SumoSelect.open .optWrapper {
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
  top: auto;
  visibility: visible;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .langselect .SumoSelect:hover .CaptionCont {
    border: 1px solid #65E4FF !important;
  }
}
.langselect .SumoUnder {
  display: none;
}
.langselect .CaptionCont {
  background: #000;
  border: 1px solid #1F0F16 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: #C8F5FF;
  cursor: pointer;
  font-size: 1.1em;
  min-height: auto;
  min-height: initial;
  padding: 0.5em 1.5em;
}
@media screen and (min-width: 769px) {
  .langselect .CaptionCont {
    font-size: 12px;
    transition: border 0.2s ease;
  }
}
@media screen and (min-width: 769px) {
  .langselect .CaptionCont:not(:lang(ja)):not(:lang(zh-cmn-Hant)):not(:lang(zh-cmn-Hans)):not(:lang(ko)) {
    font-size: 14px;
  }
}
.langselect .CaptionCont span {
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 6px;
  position: relative;
  vertical-align: middle;
}
.langselect .CaptionCont label {
  display: none;
}
.langselect .CaptionCont::before {
  background-image: url(../images/common/earth_ic_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 18px;
  vertical-align: middle;
  width: 18px;
}
.langselect .optWrapper {
  background: none;
  border: none;
  border-radius: 0;
  bottom: 100%;
  box-shadow: none !important;
  display: block !important;
  font-size: 13px;
  opacity: 0;
  padding: 20px 20px 10px;
  position: absolute;
  text-align: center;
  top: auto;
  transition: all 0.2s ease;
  visibility: hidden;
  z-index: -1;
}
.langselect .optWrapper .options {
  border-radius: 0;
  display: inline-block;
  max-height: auto;
  max-height: initial;
}
.langselect .optWrapper .opt {
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: center;
  transition: background 0.2s ease;
}
.langselect .optWrapper .opt:not(:last-child) {
  margin-bottom: 4px;
}
.langselect .optWrapper .opt:hover {
  background: none !important;
  color: #65E4FF;
}
.langselect .optWrapper .opt.ja, .langselect .optWrapper .opt.ko, .langselect .optWrapper .opt.zh-cmn-Hant, .langselect .optWrapper .opt.zh-cmn-Hans {
  font-size: 0.8em;
}
.langselect .optWrapper .opt.is-selected {
  color: #65E4FF;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .langselect .optWrapper .opt.blank {
    display: none;
  }
}

/***** ホバー *****/
.hover-brightness {
  display: block;
}
@media screen and (min-width: 769px) {
  .hover-brightness img {
    transition: filter 0.3s ease;
  }
}
@media screen and (min-width: 769px) {
  .hover-brightness:hover img {
    filter: brightness(1.2);
  }
}
.hover-opacity {
  transition: opacity 0.4s ease;
}
.hover-opacity:hover {
  opacity: 0.8;
}

/************************************
	Object
************************************/
/****** パターン ******/
.pattern-text {
  position: relative;
}
.pattern-text-item {
  display: block;
  position: relative;
}
.pattern-mark {
  bottom: 4px;
  left: 4px;
  line-height: 0;
  position: absolute;
  width: 32px;
}
@media screen and (min-width: 769px) {
  .pattern-mark {
    bottom: 8px;
    left: 8px;
    width: 64px;
  }
}
.pattern-bar {
  height: 100%;
  display: block;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: calc(100% + 3em);
}
.pattern-bar-item {
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}
.pattern-bar-item::before, .pattern-bar-item::after {
  background: #567482;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  width: 10px;
}
.pattern-bar-item::before {
  top: 0.2em;
}
.pattern-bar-item::after {
  bottom: 0.2em;
}
.pattern-bar-l {
  left: 0;
}
.pattern-bar-l::before, .pattern-bar-l::after {
  left: 0;
}
.pattern-bar-r {
  right: 0;
}
.pattern-bar-r::before, .pattern-bar-r::after {
  right: 0;
}
.pattern-dot {
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.pattern-dot-t::before, .pattern-dot-t::after {
  background: #65E4FF;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 0;
  width: 1px;
}
.pattern-dot-t::before {
  left: 0;
}
.pattern-dot-t::after {
  right: 0;
}
.pattern-dot-b::before, .pattern-dot-b::after {
  background: #65E4FF;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 1px;
}
.pattern-dot-b::before {
  left: 0;
}
.pattern-dot-b::after {
  right: 0;
}
.pattern-sec {
  position: relative;
}
.pattern-sec::before, .pattern-sec::after {
  background: #65E4FF;
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
}
.pattern-sec::before {
  height: 3px;
  left: 0;
  top: -1px;
  width: 100%;
}
.pattern-sec::after {
  height: 2px;
  right: 0;
  top: -7px;
  width: 7px;
}

/****** アイコン ******/
.ic-up {
  background-image: url(../images/common/update_ic.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 0.3rem;
  position: absolute;
  visibility: hidden;
  width: 0.3rem;
}
@media screen and (min-width: 769px) {
  .ic-up {
    height: min(0.2rem, 20px);
    width: min(0.2rem, 20px);
  }
}

/****** 表示 ******/
@media screen and (max-width: 768px) {
  .hide-sp {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .hide-pc {
    display: none;
  }
}
/****** Flexbox ******/
.fl-ctr {
  display: flex;
  flex-wrap: warp;
}
.fl-al-t {
  align-items: flex-start;
}
.fl-al-c {
  align-items: center;
}
.fl-al-b {
  align-items: flex-end;
}
.fl-jc-l {
  justify-content: flex-start;
}
.fl-jc-c {
  justify-content: center;
}
.fl-jc-r {
  justify-content: flex-end;
}
.fl-jc-sb {
  justify-content: space-between;
}
.fl-jc-ar {
  justify-content: space-around;
}

/****** 配色 ******/
.c-yellow {
  color: #FFD965;
}

.c-blue {
  color: #C8F5FF;
}

.c-assault {
  color: #FF4747;
}

.c-tank {
  color: #FFD965;
}

.c-support {
  color: #65FFAD;
}

/****** テキスト ******/
/*----- サイズ -----*/
.fw-500 {
  font-weight: 500;
}

.fs-l {
  font-size: 1.2em;
  font-weight: 900;
}

.fs-s {
  font-size: 0.8em;
}

/*----- 位置 -----*/
.ta-l {
  text-align: left !important;
}
@media screen and (min-width: 1024px) {
  .ta-l-pc {
    text-align: left !important;
  }
}
.ta-c {
  text-align: center !important;
}
@media screen and (min-width: 1024px) {
  .ta-c-pc {
    text-align: center !important;
  }
}
.ta-r {
  text-align: right !important;
}
@media screen and (min-width: 1024px) {
  .ta-r-pc {
    text-align: right !important;
  }
}

/*----- Weight -----*/
.fw-300 {
  font-weight: 300;
}

/*----- 表記 -----*/
.t-upper {
  text-transform: uppercase;
}

.t-lower {
  text-transform: lowercase;
}

/****** 余白 ******/
/*----- margin -----*/
.mg-0 {
  margin: 0 !important;
}
.mg-b-0 {
  margin-bottom: 0 !important;
}
.mg-b-10 {
  margin-bottom: 2.66vw;
}
@media screen and (min-width: 769px) {
  .mg-b-10 {
    margin-bottom: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-10 {
    margin-bottom: 10px;
  }
}
.mg-b-20 {
  margin-bottom: 5.33vw;
}
@media screen and (min-width: 769px) {
  .mg-b-20 {
    margin-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-20 {
    margin-bottom: 20px;
  }
}
.mg-b-30 {
  margin-bottom: 8vw;
}
@media screen and (min-width: 769px) {
  .mg-b-30 {
    margin-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-30 {
    margin-bottom: 30px;
  }
}
.mg-b-40 {
  margin-bottom: 10.66vw;
}
@media screen and (min-width: 769px) {
  .mg-b-40 {
    margin-bottom: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-b-40 {
    margin-bottom: 40px;
  }
}
.mg-t-10 {
  margin-top: 2.66vw;
}
@media screen and (min-width: 769px) {
  .mg-t-10 {
    margin-top: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-10 {
    margin-top: 10px;
  }
}
.mg-t-20 {
  margin-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .mg-t-20 {
    margin-top: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-20 {
    margin-top: 20px;
  }
}
.mg-t-30 {
  margin-top: 8vw;
}
@media screen and (min-width: 769px) {
  .mg-t-30 {
    margin-top: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-30 {
    margin-top: 30px;
  }
}
.mg-t-40 {
  margin-top: 10.66vw;
}
@media screen and (min-width: 769px) {
  .mg-t-40 {
    margin-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .mg-t-40 {
    margin-top: 40px;
  }
}

/*----- padding -----*/
.pd-0 {
  padding: 0 !important;
}
.pd-b-0 {
  padding-bottom: 0 !important;
}
.pd-b-10 {
  padding-bottom: 1.33vw;
}
@media screen and (min-width: 769px) {
  .pd-b-10 {
    padding-bottom: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-10 {
    padding-bottom: 10px;
  }
}
.pd-b-20 {
  padding-bottom: 2.66vw;
}
@media screen and (min-width: 769px) {
  .pd-b-20 {
    padding-bottom: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-20 {
    padding-bottom: 20px;
  }
}
.pd-b-30 {
  padding-bottom: 4vw;
}
@media screen and (min-width: 769px) {
  .pd-b-30 {
    padding-bottom: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-30 {
    padding-bottom: 30px;
  }
}
.pd-b-40 {
  padding-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .pd-b-40 {
    padding-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-b-40 {
    padding-bottom: 40px;
  }
}
.pd-t-10 {
  padding-top: 1.33vw;
}
@media screen and (min-width: 769px) {
  .pd-t-10 {
    padding-top: 0.52vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-10 {
    padding-top: 10px;
  }
}
.pd-t-20 {
  padding-top: 2.66vw;
}
@media screen and (min-width: 769px) {
  .pd-t-20 {
    padding-top: 1.04vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-20 {
    padding-top: 20px;
  }
}
.pd-t-30 {
  padding-top: 4vw;
}
@media screen and (min-width: 769px) {
  .pd-t-30 {
    padding-top: 1.56vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-30 {
    padding-top: 30px;
  }
}
.pd-t-40 {
  padding-top: 5.33vw;
}
@media screen and (min-width: 769px) {
  .pd-t-40 {
    padding-top: 2.08vw;
  }
}
@media screen and (min-width: 1024px) {
  .pd-t-40 {
    padding-top: 40px;
  }
}

/****** Clearfix ******/
.cf::before, .cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}