@charset "UTF-8";
/*---------------------

　メディアクエリ調整

---------------------*/
/*---------------------

　ミックスイン管理

---------------------*/
/* アニメーション間隔（ホバー用） */
/* 画像比率設定 */
/* 横並びリストの共通設定用 */
/*---------------------

　共通設定

---------------------*/
div#sqexFooter {
  margin-top: -1px;
}

img {
  vertical-align: bottom;
}

a {
  cursor: pointer;
  display: block;
}

div#sqexFooter a {
  display: unset;
}

* {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* アニメーション用に外枠を調整 */
main {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* レスポンシブ表示非表示用 */
.sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

/* aos.js用のオリジナルアニメーションクラス */
[data-aos=fade-RightOrigin] {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}

@media screen and (max-width: 768px) {
  [data-aos=fade-RightOrigin] {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
}

[data-aos=fade-LeftOrigin] {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}

@media screen and (max-width: 768px) {
  [data-aos=fade-LeftOrigin] {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
}

/*===============================

　Top　Class　Set
　
　target　page↓
　　index.html

=================================*/
.top {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: -1px;
}

.top__left, .top__right {
  width: 50%;
  height: 100vh;
  background: url(../img/top/r_bg.jpg) no-repeat left/cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .top__left, .top__right {
    height: 76vh;
    background: url(../img/top/r_bg_sp.png) no-repeat left/cover;
  }
}

.top__left--char, .top__right--char {
  width: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.top__left--char img, .top__right--char img {
  width: 100%;
}

@media screen and (min-width: 1430px) {
  .top__left--char, .top__right--char {
    width: 100%;
    top: 60%;
  }
}

@media screen and (max-width: 1010px) and (min-width: 769px) {
  .top__left--char, .top__right--char {
    width: 139%;
  }
}

@media screen and (max-width: 768px) {
  .top__left--char, .top__right--char {
    width: 203%;
    left: 61%;
  }
}

.top__left--logo, .top__right--logo {
  position: absolute;
  top: 36%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 1010px) and (min-width: 769px) {
  .top__left--logo, .top__right--logo {
    width: 65.71%;
  }
  .top__left--logo img, .top__right--logo img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .top__left--logo, .top__right--logo {
    width: 99%;
    top: 53%;
  }
  .top__left--logo img, .top__right--logo img {
    width: 100%;
  }
}

.top__left--link, .top__right--link {
  position: absolute;
  top: 85%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
}

@media screen and (max-width: 1010px) and (min-width: 769px) {
  .top__left--link, .top__right--link {
    top: 65%;
  }
}

@media screen and (max-width: 768px) {
  .top__left--link, .top__right--link {
    width: 46%;
    left: 46%;
  }
  .top__left--link img, .top__right--link img {
    width: 100%;
  }
}

.top__right {
  background: url(../img/top/g_bg.jpg) no-repeat right/cover;
}

@media screen and (max-width: 768px) {
  .top__right {
    background: url(../img/top/g_bg_sp.png) no-repeat right/cover;
  }
}

.top__right--char img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .top__right--char {
    left: 31%;
  }
}

@media screen and (max-width: 1010px) and (min-width: 769px) {
  .top__right--logo {
    width: 51.43%;
  }
  .top__right--logo img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .top__right--logo {
    width: 80%;
  }
  .top__right--logo img {
    width: 100%;
  }
}

.top__right--link img {
  width: 100%;
}

.js-hoveron {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06) !important;
  transform: scale(1.06) !important;
}

/*===============================

　Under　Class　Set
　
　target　page↓
　　replicant.html
　　gestalt.html

　Class　Set　List
　　01.Common Class Set
　　02.Menu Class Set
　　03.Kv Class Set
　　04.Prolog Class Set
　　05.Char Class Set
　　06.System Class Set
　　07.Special Class Set
　　08.Spec Class Set
　　09.Modal Class Set

=================================*/
/*-------------------------------

　Common Class Set

-------------------------------*/
.contents-bg, .contents-bg--gt {
  width: 100%;
  height: 100vh;
  background-image: url(../img/replicant/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -20;
}

@media screen and (max-width: 768px) {
  .contents-bg, .contents-bg--gt {
    background-position: left;
  }
}

.contents-bg--gt {
  background-image: url("../img/gestalt/bg.png");
}

/*-------------------------------

　Menu Class Set

-------------------------------*/
.menu, .menu--gt {
  width: 100%;
  margin: 20px auto 0;
  padding-left: 4.4%;
  position: fixed;
  top: 51px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 800;
}

.menu img, .menu--gt img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .menu, .menu--gt {
    height: 60px;
    margin: 0 auto;
    padding-left: 0;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    background: #fff;
    top: 46px;
  }
}

.menu__burger {
  width: 35px;
  height: 22px;
  position: absolute;
  top: 22px;
  left: 10px;
  z-index: 0;
}

.menu__burger span {
  width: 35px;
  height: 4px;
  background: #0a2a9c;
  display: block;
  position: absolute;
  left: 0;
  z-index: 0;
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
}

.menu__burger span:nth-child(1) {
  top: 0;
}

.menu__burger span:nth-child(2) {
  top: 9px;
}

.menu__burger span:nth-child(3) {
  top: 18px;
}

.menu__burger .gt {
  background: #8b0000;
}

@media screen and (max-width: 768px) {
  .menu--gt {
    background-color: #000000;
  }
}

.menu-wap {
  max-width: 1284px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .menu-wap {
    width: 86%;
  }
}

.menu__logo {
  width: 26.8%;
}

@media screen and (max-width: 768px) {
  .menu__logo {
    width: 100.5px;
    position: absolute;
    top: 7px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.menu__list, .menu__list--gt {
  max-width: 917px;
  width: 100%;
  height: 68px;
  background: url(../img/replicant/line.png);
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .menu__list, .menu__list--gt {
    width: 95%;
  }
}

@media screen and (max-width: 768px) {
  .menu__list, .menu__list--gt {
    display: none;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1000;
  }
}

.menu__list--gt {
  background: url(../img/gestalt/line.png);
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .menu__list--gt {
    background: rgba(0, 0, 0, 0.8);
  }
}

.menu__list ul, .menu__list--gt ul {
  max-width: 645px;
  width: 100%;
  margin: 2.7% 7% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .menu__list ul, .menu__list--gt ul {
    max-width: 645px;
    width: 76%;
    margin: 2.7% auto 0;
  }
}

@media screen and (max-width: 768px) {
  .menu__list ul, .menu__list--gt ul {
    max-width: 100%;
    margin: 0;
    display: block;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
  }
}

.menu__list ul li:nth-child(2), .menu__list--gt ul li:nth-child(2) {
  width: 18.8%;
}

.menu__list ul li:nth-child(3), .menu__list--gt ul li:nth-child(3) {
  width: 20.8%;
}

.menu__list ul li:nth-child(4), .menu__list--gt ul li:nth-child(4) {
  width: 16%;
}

.menu__list ul li:nth-child(5), .menu__list--gt ul li:nth-child(5) {
  width: 16%;
}

.menu__list ul li:nth-child(6), .menu__list--gt ul li:nth-child(6) {
  width: 12.8%;
}

.menu__list ul li:hover, .menu__list--gt ul li:hover {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (max-width: 768px) {
  .menu__list ul li:nth-child(1), .menu__list--gt ul li:nth-child(1) {
    width: 100%;
  }
  .menu__list ul li:nth-child(2), .menu__list--gt ul li:nth-child(2) {
    width: 45.87%;
    margin: 6.8% auto 0;
  }
  .menu__list ul li:nth-child(3), .menu__list--gt ul li:nth-child(3) {
    width: 45.87%;
    margin: 3.47% auto 0;
  }
  .menu__list ul li:nth-child(4), .menu__list--gt ul li:nth-child(4) {
    width: 45.87%;
    margin: 3.47% auto 0;
  }
  .menu__list ul li:nth-child(5), .menu__list--gt ul li:nth-child(5) {
    width: 45.87%;
    margin: 3.47% auto 0;
  }
  .menu__list ul li:nth-child(6), .menu__list--gt ul li:nth-child(6) {
    width: 45.87%;
    margin: 3.47% auto 0;
  }
}

.menu__list--close {
  width: 17%;
  margin: 9.47% auto;
}

.menu__transition {
  width: 16%;
}

.menu__transition:hover {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (max-width: 768px) {
  .menu__transition {
    width: 67.5px;
    position: absolute;
    top: 6px;
    right: 10px;
    display: block;
  }
}

.nav_bg_on.menu, .nav_bg_on.menu--gt {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  top: 0;
  margin: 0 auto 0;
  background: rgba(255, 255, 255, 0.8);
}

.nav_bg_on.menu.black, .nav_bg_on.black.menu--gt {
  top: 0;
  margin: 0 auto 0;
  background: rgba(0, 0, 0, 0.8);
}

.nav_on.menu__burger span {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
}

.nav_on.menu__burger span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav_on.menu__burger span:nth-child(2) {
  top: 9px;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
  opacity: 0;
}

.nav_on.menu__burger span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*-------------------------------

　Kv Class Set

-------------------------------*/
.kv {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}

@media screen and (min-width: 1401px) {
  .kv {
    width: 90%;
  }
}

.kv__char, .kv__char--gt {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
}

@media screen and (min-width: 1401px) {
  .kv__char, .kv__char--gt {
    width: 90%;
  }
}

@media screen and (max-width: 768px) {
  .kv__char, .kv__char--gt {
    top: 12%;
  }
}

.kv__char--gt {
  left: 21%;
}

@media screen and (max-width: 768px) {
  .kv__char--gt {
    left: 0;
    top: 12%;
  }
}

.kv__logo {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .kv__logo {
    padding: 14% 0 0;
  }
  .kv__logo img {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
}

.kv img {
  width: 100%;
}

/*-------------------------------

　Prolog Class Set

-------------------------------*/
.prolog {
  max-width: 1110px;
  width: 100%;
  margin: -3% 0 0 11%;
  padding-top: 5%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 5;
}

.prolog img {
  width: 100%;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .prolog {
    width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .prolog {
    margin: -19px 0 0;
    padding-top: 17%;
  }
  .prolog img {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
}

/*-------------------------------

　Char Class Set

-------------------------------*/
.char {
  max-width: 1072px;
  width: 100%;
  margin: -4% auto 0;
  padding-top: 12%;
}

@media screen and (min-width: 1401px) {
  .char {
    margin: -4% auto 0;
  }
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .char {
    width: 80%;
    margin: -4% auto 0;
  }
}

@media screen and (max-width: 768px) {
  .char {
    margin: -14% 0 0 2.3%;
    padding-top: 23%;
  }
}

.char__ttl {
  width: 39.6%;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .char__ttl {
    width: 34.6%;
  }
}

@media screen and (max-width: 768px) {
  .char__ttl {
    width: 66.6%;
  }
}

.char img {
  width: 100%;
}

/* リスト上段調整用 */
.char__list01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .char__list01 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.char__list01 li {
  cursor: pointer;
}

.char__list01 li:nth-child(1) {
  width: 25.56%;
  margin: 2.61% 0 0 1.96%;
  position: relative;
  z-index: 0;
}

.char__list01 li:nth-child(2) {
  width: 21.55%;
  margin: 1.77% 0 0 -3.08%;
  position: relative;
  z-index: 0;
}

.char__list01 li:nth-child(3) {
  width: 24.25%;
  margin: 0.28% 0 0 -5.32%;
  position: relative;
  z-index: -5;
}

.char__list01 li:nth-child(4) {
  width: 20.99%;
  margin: -9.24% 0 0 -4.01%;
  position: relative;
  z-index: 5;
}

.char__list01 li:nth-child(5) {
  width: 25.84%;
  margin: -1.77% 0 0 -6.16%;
  position: relative;
  z-index: 0;
}

.char__list01 li:hover {
  z-index: 10;
}

.char__list01 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .char__list01 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .char__list01 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .char__list01 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
  .char__list01 li:nth-child(4) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
  }
  .char__list01 li:nth-child(5) {
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s;
  }
}

@media screen and (max-width: 768px) {
  .char__list01 li:nth-child(1) {
    width: 51.73%;
    margin: -1.87% 0 0 3.07%;
  }
  .char__list01 li:nth-child(2) {
    width: 43.73%;
    margin: -3.33% 0 0 -5.87%;
  }
  .char__list01 li:nth-child(3) {
    width: 49.6%;
    margin: -8.13% 0 0 -0.53%;
  }
  .char__list01 li:nth-child(4) {
    width: 42.93%;
    margin: -4% 0 0 -3.07%;
  }
  .char__list01 li:nth-child(5) {
    width: 53.07%;
    margin: -17.2% 0 0 -2.53%;
  }
}

/* リスト下段調整用 */
.char__list02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .char__list02 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.char__list02 li {
  cursor: pointer;
}

.char__list02 li:nth-child(1) {
  width: 21.64%;
  margin: -5.6% 0 0 7.93%;
  position: relative;
  z-index: 5;
}

.char__list02 li:nth-child(2) {
  width: 25.28%;
  margin: 1.59% 0 0 -3.92%;
  position: relative;
  z-index: 0;
}

.char__list02 li:nth-child(3) {
  width: 26.59%;
  margin: -6.34% 0 0 -0.56%;
  position: relative;
  z-index: 0;
}

.char__list02 li:nth-child(4) {
  width: 27.43%;
  margin: -1.77% 0 0 -6.16%;
  position: relative;
  z-index: 5;
}

.char__list02 li:hover {
  z-index: 10;
}

.char__list02 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .char__list02 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .char__list02 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .char__list02 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
  .char__list02 li:nth-child(4) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
  }
}

@media screen and (max-width: 768px) {
  .char__list02 li:nth-child(1) {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: 44.53%;
    margin: -72.13% 0 0 50%;
  }
  .char__list02 li:nth-child(1) img {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  .char__list02 li:nth-child(2) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 52.4%;
    margin: 0.67% 0 0 -3.07%;
  }
  .char__list02 li:nth-child(3) {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    width: 53.87%;
    margin: -66.27% 0 0 45.6%;
  }
  .char__list02 li:nth-child(4) {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    width: 55.47%;
    margin: 0.13% 0 0 -0.93%;
  }
}

/*-------------------------------

　System Class Set

-------------------------------*/
.system {
  max-width: 1033px;
  width: 100%;
  margin: -10% 0 0 12.7%;
  padding-top: 13%;
}

@media screen and (min-width: 1401px) {
  .system {
    margin: -10% auto 0;
  }
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .system {
    width: 80%;
    margin: -10% auto 0;
  }
}

@media screen and (max-width: 768px) {
  .system {
    margin: -15% 0 0 0;
    padding-top: 28%;
  }
}

.system__ttl {
  width: 40.46%;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .system__ttl {
    width: 33.46%;
  }
}

@media screen and (max-width: 768px) {
  .system__ttl {
    width: 66.46%;
    margin: -14px 0 0 -25px;
  }
}

.system img {
  width: 100%;
}

/* リスト上段調整用 */
.system__list01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .system__list01 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.system__list01 li {
  cursor: pointer;
}

.system__list01 li:nth-child(1) {
  width: 28.27%;
  margin: 2.61% 0 0 -0.19%;
  position: relative;
  z-index: 5;
}

.system__list01 li:nth-child(2) {
  width: 27.69%;
  margin: 1.16% 0 0 -4.94%;
  position: relative;
  z-index: 0;
}

.system__list01 li:nth-child(3) {
  width: 29.24%;
  margin: -5.32% 0 0 0.77%;
  position: relative;
  z-index: 5;
}

.system__list01 li:nth-child(4) {
  width: 27.88%;
  margin: -10.84% 0 0 -7.16%;
  position: relative;
  z-index: 0;
}

.system__list01 li:hover {
  z-index: 10;
}

.system__list01 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .system__list01 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .system__list01 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .system__list01 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
  .system__list01 li:nth-child(4) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
  }
}

@media screen and (max-width: 768px) {
  .system__list01 li:nth-child(1) {
    width: 55.33%;
    margin: -0.13% 0 0 -0.27%;
  }
  .system__list01 li:nth-child(2) {
    width: 54.27%;
    margin: -3.2% 0 0 -9.33%;
  }
  .system__list01 li:nth-child(3) {
    width: 57.47%;
    margin: -3.87% 0 0 0.8%;
  }
  .system__list01 li:nth-child(4) {
    width: 56.27%;
    margin: -15.47% 0 0 -15%;
  }
}

/* リスト下段調整用 */
.system__list02 {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .system__list02 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.system__list02 li:nth-child(1) {
  width: 26.04%;
  margin: -1.16% 0 0 15.39%;
  position: relative;
  z-index: 10;
}

.system__list02 li:nth-child(2) {
  width: 26.04%;
  margin: 1.74% 0 0 -4.36%;
  position: relative;
  z-index: 5;
}

.system__list02 li:nth-child(3) {
  width: 28.17%;
  margin: -0.29% 0 0 -2.71%;
  position: relative;
  z-index: 0;
}

.system__list02 li:hover {
  z-index: 10;
}

.system__list02 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .system__list02 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .system__list02 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .system__list02 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
}

@media screen and (max-width: 768px) {
  .system__list02 li:nth-child(1) {
    width: 51.87%;
    margin: -10.13% 0 0 0.4%;
  }
  .system__list02 li:nth-child(2) {
    width: 57.73%;
    margin: -4.13% 0 0 -10%;
  }
  .system__list02 li:nth-child(3) {
    width: 56.27%;
    margin: -10.8% 0 0 27.73%;
  }
}

/*-------------------------------

　Special Class Set

-------------------------------*/
.special {
  max-width: 964px;
  width: 100%;
  margin: -7.4% 0 0 14.6%;
  padding-top: 11%;
}

@media screen and (min-width: 1401px) {
  .special {
    margin: -7.4% auto 0;
  }
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .special {
    width: 80%;
    margin: -7.4% auto 0;
  }
}

@media screen and (max-width: 768px) {
  .special {
    margin: -7.4% auto 0;
    padding-top: 20%;
  }
}

.special__ttl {
  width: 33.09%;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .special__ttl {
    width: 32.09%;
  }
}

@media screen and (max-width: 768px) {
  .special__ttl {
    width: 56.09%;
  }
}

.special img {
  width: 100%;
}

/* リスト上段調整用 */
.special__list01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .special__list01 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .special__list01 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.special__list01 li {
  cursor: pointer;
}

.special__list01 li:nth-child(1) {
  width: 31%;
  margin: 1.66% 0 0 4.46%;
  position: relative;
  z-index: 0;
}

.special__list01 li:nth-child(2) {
  width: 31%;
  margin: 1.66% 0 0 2.07%;
  position: relative;
  z-index: 0;
}

.special__list01 li:nth-child(3) {
  width: 32.16%;
  margin: 1.66% 0 0 4.46%;
  position: relative;
  z-index: 0;
}

.special__list01 li:hover {
  z-index: 10;
}

.special__list01 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .special__list01 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .special__list01 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .special__list01 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
}

@media screen and (max-width: 768px) {
  .special__list01 li:nth-child(1), .special__list01 li:nth-child(2), .special__list01 li:nth-child(3) {
    width: 100%;
    margin: 0;
  }
}

/* リスト下段調整用 */
.special__list02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .special__list02 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .special__list02 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.special__list02 li {
  cursor: pointer;
}

.special__list02 li:nth-child(1) {
  width: 31%;
  margin: 3.94% 0 0 4.46%;
  position: relative;
  z-index: 0;
}

.special__list02 li:nth-child(2) {
  width: 31%;
  margin: 3.94% 0 0 2.18%;
  position: relative;
  z-index: 0;
}

.special__list02 li:nth-child(3) {
  width: 32.16%;
  margin: 3.94% 0 0 4.46%;
  position: relative;
  z-index: 0;
}

.special__list02 li:hover {
  z-index: 10;
}

.special__list02 li:hover img {
  -webkit-transition-duration: 0.3s !important;
  transition-duration: 0.3s !important;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

@media screen and (min-width: 769px) {
  .special__list02 li:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .special__list02 li:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
  }
  .special__list02 li:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }
}

@media screen and (max-width: 768px) {
  .special__list02 li:nth-child(1), .special__list02 li:nth-child(2), .special__list02 li:nth-child(3) {
    width: 100%;
    margin: 0;
  }
}

/*-------------------------------

　Spec Class Set

-------------------------------*/
.spec {
  width: 100%;
  margin-top: -3%;
  padding-top: 3%;
  position: relative;
  z-index: -5;
}

@media screen and (max-width: 768px) {
  .spec {
    margin-top: -8%;
    padding-top: 15%;
  }
}

.spec__details {
  width: 100%;
}

.spec__details--in {
  max-width: 708px;
  width: 100%;
  margin: 8% 0 0 12.6%;
  padding-bottom: 7%;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .spec__details--in {
    width: 48%;
  }
}

.spec__char {
  width: 100%;
  position: absolute;
  bottom: -5px;
  right: 0;
  z-index: -5;
}

@media screen and (min-width: 1401px) {
  .spec__char {
    width: 90%;
  }
}

.spec__sp {
  margin-top: 2%;
}

.spec img {
  width: 100%;
}

/*-------------------------------

　Modal Class Set

-------------------------------*/
/* modal default set */
.modal {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  display: none;
  overflow: hidden;
}

.modal__bg, .modal__bg--gt {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 0;
  background: url(../img/replicant/bg.jpg) no-repeat center/cover;
}

@media screen and (max-width: 768px) {
  .modal__bg, .modal__bg--gt {
    background: transparent;
  }
}

.modal__bg--gt {
  background: url(../img/gestalt/bg.png) no-repeat center/cover;
}

.modal__close, .modal__close--gt {
  width: 11%;
  position: absolute;
  top: 1%;
  right: 3%;
  z-index: 30;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .modal__close, .modal__close--gt {
    width: 36%;
    position: relative;
    top: 0;
    right: 0;
    margin: 5% auto;
  }
}

.modal__close--gt {
  width: 15%;
  top: 1%;
  right: 1%;
}

.modal__close--gt img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .modal__close--gt {
    width: 36%;
    position: relative;
    top: 0;
    right: 0;
    margin: 5% auto;
  }
}

.modal__close img, .modal__close--gt img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .modal.chara-modal, .modal.chara-modal--gt, .modal.system-modal--gt, .modal.movie-modal--gt, .modal.modalspecial--gt, .modal.system-modal, .modal.chara-modal--gt, .modal.system-modal--gt, .modal.movie-modal--gt, .modal.modalspecial--gt, .modal.movie-modal, .modal.chara-modal--gt, .modal.system-modal--gt, .modal.movie-modal--gt, .modal.modalspecial--gt, .modal.modalspecial, .modal.chara-modal--gt, .modal.system-modal--gt, .modal.movie-modal--gt, .modal.modalspecial--gt {
    height: 100%;
    overflow-y: scroll;
    background: rgba(255, 255, 255, 0.8);
  }
}

.modal.chara-modal--gt, .modal.system-modal--gt, .modal.movie-modal--gt, .modal.modalspecial--gt {
  background: rgba(0, 0, 0, 0.8);
}

/* modal chara set */
.modal__chara, .modal__chara--nier, .modal__chara--nier--gt, .modal__chara--kaine, .modal__chara--grimoireweiss, .modal__chara--no7, .modal__chara--debol_popol, .modal__chara--yonah, .modal__chara--maskedking, .modal__chara--fyra, .modal__chara--emil {
  max-width: 1400px;
  width: 100%;
  height: 100vh;
  position: absolute;
  right: 0;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .modal__chara, .modal__chara--nier, .modal__chara--nier--gt, .modal__chara--kaine, .modal__chara--grimoireweiss, .modal__chara--no7, .modal__chara--debol_popol, .modal__chara--yonah, .modal__chara--maskedking, .modal__chara--fyra, .modal__chara--emil {
    width: 100%;
    height: auto;
    position: relative;
    background: transparent !important;
  }
  .modal__chara img, .modal__chara--nier img, .modal__chara--nier--gt img, .modal__chara--kaine img, .modal__chara--grimoireweiss img, .modal__chara--no7 img, .modal__chara--debol_popol img, .modal__chara--yonah img, .modal__chara--maskedking img, .modal__chara--fyra img, .modal__chara--emil img {
    width: 100%;
  }
}

.modal__chara--nier {
  background: url(../img/common/character01_nier.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--nier {
    background: url(../img/common/character01_nier.png) no-repeat right bottom/100%;
  }
}

.modal__chara--nier--gt {
  background: url(../img/common/character01_nier-gt.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--nier--gt {
    background: url(../img/common/character01_nier-gt.png) no-repeat right bottom/100%;
  }
}

.modal__chara--kaine {
  background: url(../img/common/character02_kaine.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--kaine {
    background: url(../img/common/character02_kaine.png) no-repeat right bottom/100%;
  }
}

.modal__chara--grimoireweiss {
  background: url(../img/common/character03_grimoireweiss.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--grimoireweiss {
    background: url(../img/common/character03_grimoireweiss.png) no-repeat right bottom/100%;
  }
}

.modal__chara--no7 {
  background: url(../img/common/character04_no7.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--no7 {
    background: url(../img/common/character04_no7.png) no-repeat right bottom/100%;
  }
}

.modal__chara--debol_popol {
  background: url(../img/common/character05_debol_popol.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--debol_popol {
    background: url(../img/common/character05_debol_popol.png) no-repeat right bottom/100%;
  }
}

.modal__chara--yonah {
  background: url(../img/common/character06_yonah.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--yonah {
    background: url(../img/common/character06_yonah.png) no-repeat right bottom/100%;
  }
}

.modal__chara--maskedking {
  background: url(../img/common/character07_masked-king.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--maskedking {
    background: url(../img/common/character07_masked-king.png) no-repeat right bottom/100%;
  }
}

.modal__chara--fyra {
  background: url(../img/common/character08_fyra.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--fyra {
    background: url(../img/common/character08_fyra.png) no-repeat right bottom/100%;
  }
}

.modal__chara--emil {
  background: url(../img/common/character09_emil.png) no-repeat right/cover;
}

@media screen and (max-width: 1230px) and (min-width: 769px) {
  .modal__chara--emil {
    background: url(../img/common/character09_emil.png) no-repeat right bottom/100%;
  }
}

.modal__charatxt {
  max-width: 1400px;
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  right: 0;
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .modal__charatxt {
    width: 98%;
    height: auto;
    margin-left: 2%;
  }
}

.modal__charatxt img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .modal__charatxt img {
    width: 100%;
    position: relative;
    top: 0%;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* modal system set */
.modal__systemtxt, .modal__systemphoto, .modal__systemphoto img {
  max-width: 1400px;
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  right: 0;
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .modal__systemtxt, .modal__systemphoto, .modal__systemphoto img {
    width: 100%;
    margin: 30px 0;
    height: auto;
  }
}

.modal__systemtxt img, .modal__systemphoto img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .modal__systemtxt img, .modal__systemphoto img {
    width: 100%;
    position: relative;
    top: 0%;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.modal__systemphoto {
  position: absolute;
  left: auto;
  right: 0;
}

@media screen and (max-width: 768px) {
  .modal__systemphoto {
    position: relative;
  }
}

.modal__systemphoto img {
  height: auto;
  left: auto;
  right: 0;
}

@media screen and (max-width: 768px) {
  .modal__systemphoto img {
    width: 100%;
    position: relative;
    top: 0%;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* modal movie set */
.modal__movie {
  width: 85%;
  height: 69%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 8px;
}

@media screen and (max-width: 768px) {
  .modal__movie {
    width: 90%;
    height: 83%;
    position: relative;
    top: 15px;
    left: 0;
    margin: 0 auto;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.modal__movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* modal special set */
.modal__tabbox {
  width: 70%;
  max-width: 770px;
  height: auto;
  position: absolute;
  top: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
}

@media screen and (min-width: 1430px) {
  .modal__tabbox {
    max-width: 1431px;
  }
}

@media screen and (max-width: 1010px) and (min-width: 769px) {
  .modal__tabbox {
    width: 90%;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .modal__tabbox {
    width: 100%;
    position: relative;
    top: 5%;
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.modal__tabbox--tab {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 2%;
}

@media screen and (max-width: 768px) {
  .modal__tabbox--tab {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.modal__tabbox--tab li {
  opacity: .7;
  width: 140px;
  height: auto;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .modal__tabbox--tab li {
    margin: 1%;
  }
}

.modal__tabbox--tab li img {
  width: 100%;
}

.modal__tabbox--tabcontents {
  width: 77%;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .modal__tabbox--tabcontents {
    width: 90%;
    padding: 8% 0;
  }
}

.modal__tabbox--tabcontents li {
  width: 100%;
  height: auto;
  display: none;
}

.modal__tabbox--tabcontents li img {
  width: 100%;
}

.modal__tabbox--tabcontents li .dl_btn {
  width: 25%;
  display: block;
  margin: 0 auto;
}

.modal__tabbox--tabcontents li .dl_btn--sp {
  text-align: center;
  margin: 20px 0;
}

.modal__tabbox--tabcontents li .dl_btn--sp--gt {
  text-align: center;
  margin: 20px 0;
  color: white;
}

.js-tab.is-active {
  opacity: 1 !important;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.js-panel.is-show {
  display: block;
}

/* modal animation set */
.fadeIn-r {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn-r;
  animation-name: fadeIn-r;
}

@-webkit-keyframes fadeIn-r {
  from {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn-r {
  from {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  @-webkit-keyframes fadeIn-r {
    from {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fadeIn-r {
    from {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.fadeIn-l {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn-l;
  animation-name: fadeIn-l;
}

@-webkit-keyframes fadeIn-l {
  from {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn-l {
  from {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  @-webkit-keyframes fadeIn-l {
    from {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fadeIn-l {
    from {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
      opacity: 0;
    }
    to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* ########## ModalFix(Special) ########## */
@media screen and (min-width: 769px) {
  .modalspecial .modal__tabbox, .modalspecial--gt .modal__tabbox {
    width: 100%;
    height: 90vh;
    max-width: 1430px;
    max-height: 900px;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tab, .modalspecial--gt .modal__tabbox .modal__tabbox--tab {
    position: absolute;
    z-index: 1;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tabcontents, .modalspecial--gt .modal__tabbox .modal__tabbox--tabcontents {
    width: 100%;
    height: 94.8132%;
    position: absolute;
    bottom: 0;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tabcontents .js-panel, .modalspecial--gt .modal__tabbox .modal__tabbox--tabcontents .js-panel {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tabcontents .js-panel img, .modalspecial--gt .modal__tabbox .modal__tabbox--tabcontents .js-panel img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90.3719%;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tabcontents .js-panel a, .modalspecial--gt .modal__tabbox .modal__tabbox--tabcontents .js-panel a {
    display: block;
    width: auto;
    height: auto;
    max-width: 17.1328%;
    max-height: 9.6281%;
    margin: 0 auto;
  }
  .modalspecial .modal__tabbox .modal__tabbox--tabcontents .js-panel a img, .modalspecial--gt .modal__tabbox .modal__tabbox--tabcontents .js-panel a img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}