@charset "utf-8";

/* -------------------------
  1. common
  2. top
  3. system
  4. mode
  5. movie
  6. bonus
  7. special
------------------------- */

/* -------------------------
  1. common
------------------------- */

body {
  background: #00004b;
  color: #fff;
  font-family: 'American Typewriter','Meiryo UI','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN',sans-serif;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-width: 1200px;
}

img{
  width: 100%;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.cont {
  margin: 0 auto;
  position: relative;
  width: 1000px;
  z-index: 50;
}

.inr{
  margin: 0 auto;
  width: 95%;
}

/* loading */

#loading {
  background: #00004b;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.sk-chasing-dots {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
 }

.sk-chasing-dots .sk-child {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #2f89ff;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}
.sk-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#loading > div {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

/* logo/sns/bgm */

ul.logo {
  display: -webkit-flex;
  display: flex;
  position: absolute;
  width: 100%;
  z-index: 999;
}

#bgm{
  cursor: pointer;
  height: 66px;
  position: absolute;
  right: 390px;
  width: 84px;
  z-index: 999;
}

#bgm.bgmOn{  
  background:url(../img/pc/nav/nav-bgmOn.png) no-repeat;
}

#bgm.bgmOff{  
  background:url(../img/pc/nav/nav-bgmOff.png) no-repeat;
}

.sns {
  background:url(../img/pc/nav/nav-sns-bg.png) no-repeat;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  height: 66px;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 8px 15px 0;
  position: absolute;
  right: 139px;
  width: 252px;
  z-index: 999;
}

.sns a {
  display: block;
}

.sns a img {
  transition: all .5s;
}

.sns a:hover img {
  transform: rotateX(360deg);
}

.logo li {
  margin: 20px 0 0 20px;
}

.logo .switch {
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* nav */

#nav {
  bottom: -158px;
  left: 0;
  position: fixed;
  transition: all .3s;
  width: 100%;
  z-index: 999;
}

#nav.in {
  bottom: -68px;
}

#nav.copyIn {
  bottom: 0;
}

#nav .page {
  background: url(../img/pc/nav/nav-bg.png) repeat-x 0 0;
  border-bottom: 4px solid #fff351;
  display: -webkit-flex;
  display: flex;
  height: 88px;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

#nav .page li {
  margin-top: 24px;
  position: relative;
}

#nav .logo {
  margin-right: 110px;
  opacity: 0;
  transition: all .3s;
}

#nav.in .logo,
#nav.copyIn .logo {
  opacity: 1;
}

#nav img {
 width: auto; 
}

#nav .logo img {
  margin-top: -50px;
}

#nav li:not(:last-child) {
  margin-right: 100px;
}

#nav .page li a {
  display: block;
  position: relative;
}

#nav .page li.active::before,
#nav .page li.active::after,
#nav .page li a::before,
#nav .page li a::after {
  content: "";
  display: block;
  height: 58px;
  opacity: 0;
  position: absolute;
  top: -7px;
  transition: all .1s;
  width: 14px;
  z-index: 1;
}

#nav .page li.active::before,
#nav .page li a::before {
  background: url(../img/pc/nav/frame-left.png) no-repeat 0 0;
  left: -20px;
}

#nav .page li.active::after,
#nav .page li a::after {
  background: url(../img/pc/nav/frame-right.png) no-repeat 0 0;
  right: -20px;
}

#nav .page li.active::before,
#nav .page li.active::after,
#nav .page li a:hover::before,
#nav .page li a:hover::after {
  opacity: 1;
}

/* コピーライト */

.copy {
  background: #dadada;
  box-sizing: border-box;
  color: #131313;
  height: 68px;
  position: relative;
  width: 100%;
}

.copy div {
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 1200px;
}

.copy p {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 15px;
  text-align: left;
}

.copy .link{
  background: #fff;
  border: solid 2px #c6c6c6;
  color: #f36267;
  font-size: 12px;
  margin-top: 12px;
  padding: 10px 15px;
}

.copy .link a{
  color: #f36267;
  text-decoration: none;
  transition: all .3s;
}

.copy .link a:hover{
  opacity: .7;
}

.copy .link img{
  margin-left: 8px;
  padding-bottom: 3px;
  width: 6px;
}

#totop{
  bottom: -32px;
  position: fixed;
  right: 0;
  transition: all .3s;
  width: 136px;
}

#nav.copyIn #totop{
  bottom: 33px;
}

/* -------------------------
  2. top
------------------------- */

#top {
  background: url(../img/pc/top/visual-bg.jpg) no-repeat 50% 0;
  box-sizing: border-box;
  overflow: hidden;
}


#top > .cont img{
  width: auto;
}

#top::after {
  background: url(../img/pc/top/visual-effect.png) no-repeat 50% 0;
  content: "";
  display: block;
  height: 969px;
  left: 0;
  position: absolute;
  top: 0;
  min-width: 1200px;
  width: 100%;
  z-index: 10;
}

#top h1{
  text-align: center;
  position: relative;
  top: 0;
  transition: all 1s;
  z-index: 4;
}

#top h1 {
  -webkit-animation: fuwa 5s infinite;
  animation: fuwa 5s infinite;
}

#top h1.hide{
  opacity: 0;
  top: -30px;
}

#top h1 img {
  margin-top: 490px;
  max-width: 680px;
  width: 68%;
}

@-webkit-keyframes fuwa {
  
  0% {
    -webkit-transform: translateY(0);
  }
  
  50% {
    -webkit-transform: translateY(-10px);
  }
  
  100% {
    -webkit-transform: translateY(0);
  }
  
}

@keyframes fuwa {
  
  0% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-10px);
  }
  
  100% {
    transform: translateY(0);
  }
  
}

.obj {
  position: absolute;
  transition: all .6s;
  z-index: 1;
}

.obj.hide {
  opacity: 0;
}

.obj.jump {
  -webkit-animation: jump 4s infinite;
  animation: jump 4s infinite;
}

.obj01 {
  left: 185px;
  top: 118px;
  z-index: 3;
}

.obj01.highJump {
  -webkit-animation: highJump 5s infinite;
  animation: highJump 5s infinite;
}

.obj01.hide {
  margin-top: 50px;
}

.obj02 {
  left: 253px;
  top: 21px;
}

.obj02.hide {
  margin: 79px 0 0 59px;
}

.obj03 {
  left: 422px;
  top: 41px;
}

.obj03.hide {
  margin: 66px 0 0 -64px;
}

.obj04 {
  left: -16px;
  top: 133px;
}

.obj04.hide {
  margin: 44px 0 0 60px;
}

.obj05 {
  left: 676px;
  top: 325px;
}

.obj05.hide {
  margin: 52px 0 0 -76px;
}

.obj06 {
  left: -56px;
  top: 407px;
}

.obj06.hide {
  margin: 2px 0 0 66px;
}

.obj07 {
  left: 782px;
  top: 551px;
}

.obj07.hide {
  margin: -13px 0 0 -85px;
}

.obj08 {
  left: -272px;
  top: 499px;
}

.obj08.hide {
  margin: -6px 0 0 65px;
}

.obj09 {
  left: -8px;
  top: 628px;
}

.obj09.hide {
  margin: -27px 0 0 66px;
}

.obj10 {
  left: 860px;
  top: 141px;
}

.obj10.hide {
  margin: 38px 0 0 -86px;
}

.obj11 {
  left: -283px;
  top: 127px;
}

.obj11.hide {
  margin: 33px 0 0 84px;
}

.obj12 {
  left: 682px;
  top: 262px;
}

.obj12.hide {
  margin: 59px 0 0 -50px;
}

.obj13 {
  left: -258px;
  top: 210px;
}

.obj13.hide {
  margin: 33px 0 0 84px;
}

.obj14 {
  left: 1059px;
  top: 473px;
}

.obj14.hide {
  margin: 22px 0 0 -103px;
}

.obj15 {
  left: 17px;
  top: 262px;
}

.obj15.hide {
  margin: 18px 0 0 60px;
}

.obj16 {
  left: 848px;
  top: 829px;
  z-index: 4;
}

.obj16.hide {
  margin: -38px 0 0 -50px;
}

@-webkit-keyframes jump {
  
  0% {
    -webkit-transform: translateY(0);
  }
  
  4% {
    -webkit-transform: translateY(-10px);
  }
  
  6%,
  100% {
    -webkit-transform: translateY(0);
  }
  
}

@keyframes jump {
  
  0% {
    transform: translateY(0);
  }
  
  4% {
    transform: translateY(-10px);
  }
  
  6%,
  100% {
    transform: translateY(0);
  }
  
}

@-webkit-keyframes highJump {
  
  0% {
    -webkit-transform: translateY(0);
  }
  
  4% {
    -webkit-transform: translateY(-40px);
  }
  
  6%,
  7% {
    -webkit-transform: translateY(0);
  }
  
  11% {
    -webkit-transform: translateY(-40px);
  }
  
  14%,
  100% {
    -webkit-transform: translateY(0);
  }
  
}

@keyframes highJump {
  
  0% {
    transform: translateY(0);
  }
  
  4% {
    transform: translateY(-40px);
  }
  
  6%,
  7% {
    transform: translateY(0);
  }
  
  11% {
    transform: translateY(-40px);
  }
  
  14%,
  100% {
    transform: translateY(0);
  }
  
}

.star {
  position: absolute;
  z-index: 2;
}

.star img {
  max-width: 100%;
}

.star01,
.star05,
.star09 {
  -webkit-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

.star02,
.star06,
.star10,
.star13 {
  -webkit-animation: spin 3s infinite;
  animation: spin 3s infinite;
}

.star04,
.star11 {
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.star03,
.star07,
.star08,
.star12 {
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}

.star01 {
  height: 110px;
  left: -82px;
  top: -10px;
  width: 114px;
}

.star02 {
  height: 45px;
  left: 624px;
  top: 29px;
  width: 46px;
}

.star03 {
  height: 27px;
  left: 182px;
  top: 147px;
  width: 28px;
}

.star04 {
  height: 27px;
  left: 564px;
  top: 121px;
  width: 28px;
}

.star05 {
  height: 31px;
  left: 599px;
  top: 142px;
  width: 33px;
}

.star06 {
  height: 35px;
  left: -283px;
  top: 313px;
  width: 37px;
}

.star07 {
  height: 60px;
  left: -324px;
  top: 358px;
  width: 62px;
}

.star08 {
  height: 31px;
  left: 1025px;
  top: 350px;
  width: 33px;
}

.star09 {
  height: 48px;
  left: 1311px;
  top: 473px;
  width: 50px;
}

.star10 {
  height: 49px;
  left: -10px;
  top: 788px;
  width: 51px;
}

.star11 {
  height: 32px;
  left: 21px;
  top: 911px;
  width: 33px;
}

.star12 {
  height: 48px;
  left: 818px;
  top: 890px;
  width: 50px;
}

.star13 {
  height: 56px;
  left: 1094px;
  top: 753px;
  width: 58px;
}

@-webkit-keyframes spin {
  
  0% {
    -webkit-transform: rotate(0deg);
  }
  
  100% {
    -webkit-transform: rotate(360deg);
  }
  
}

@keyframes spin {
  
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
  
}

#top h2,
#top .txt{
  text-align: center;
  margin: 0 auto;
}

/*--- outline ---*/

/* info */

.info{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 364px;
  margin: -1.406% auto 0;
  overflow: hidden;
  padding-bottom: 1.406%;
  position: relative;
  max-width: 1420px;
  z-index: 60;
}

.info > div{
  width: 45.634%;
  position: relative;
  text-align: center;
  z-index: 20;
}

.info .release{
  margin: 0 auto;
  max-width: 416px;
}

.info .price img{
  margin: .619% 0 0 1.238%;
  max-width: 538px;
  width: 79.412%;
}

.info .eshop{
  float: left;
  margin: -.155% 0 0 .31%;
  width: 49.371%;
}

.info .enquete{
  float: right;
  margin-top: 4%;
  width: 50%;
}

.info .eshop a:hover img,
.info .enquete a:hover img{
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name: pop;
}

.info .special-favor{
  max-width: 742px;
  width: 52.25%;
}

.info .special-favor img{
  margin: 4% 0 0;
}

@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.05);
  }
}

@keyframes pop {
  50% {
    transform: scale(1.05);
  }
}

/*-----*/

.outline{
  background: url(../img/pc/top/outline-bg.jpg)no-repeat 50% 0;
  box-sizing: border-box;
  height: 1342px;
  padding-top: 70px;
  position: relative;
  margin: -55px auto 0;
  width: 100%;
  z-index: 10;
}

.outline > .inr{
  max-width: 1437px;
  position: relative;
}

.outline h2{
  max-width: 1407px;
  width: 100%;
}

.outline .txt01{
  margin: 0 auto;
  margin: 36px 0 48px;
  width: 100%;
}

.outline .movie{
  background: url(../img/pc/top/outline-movie-bg.png)no-repeat;
  box-sizing: border-box;
  height: 427px;
  margin: 0 auto;
  padding: 52px 0 0 211px;
  width: 1000px;
}

.outline .txt02{
  position: absolute;
  bottom: -237px;
  right: 12px;
}

.outline .txt02 {
  max-width: 884px;
  width: 61.51%;
}

.outline .txt02 img{
  position: relative;
  z-index: 10;
}

/*--- details ---*/

.details{
  background: url(../img/pc/top/details-bg.jpg)no-repeat 50% 0;
  box-sizing: border-box;
  height: 1733px;
  margin-bottom: 155px;
  padding-top: 206px;
  position: relative;
  z-index: 15;
}

.details .inr{
  max-width: 1446px;
}

.details .cont01,
.details .cont02{
  position: relative;
}

.details .cont01{
  background: url(../img/pc/top/details-bg01.png)no-repeat 50% 0;
  background-size: cover;
  height: 730px;
  width: 100%;
}

.details .cont02{
  height: 420px;
  padding-top: 9%;
  width: 100%;
}

.details .cont01 > .inr,
.details .cont02 > .inr{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.details h2,
.details .cont01 p{
  text-align: center;
  position: relative;
}

.details .cont01 h2{
  margin-top: -5.1% !important;
  max-width: 764px;
  width: 52.83%;
}

.details .cont01 .txt{
  margin: 40px auto !important;
  max-width: 748px;
  width: 52.83%;
}

.details .cont02 h2{
  margin-top: -54px;
  position: relative;
  z-index: 10;
  max-width: 912px;
  width: 63.07%;
}

.details .cont02 .inr{
  margin-top: -5.8%;
}

.details .img-list{
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.details .img-list li{
  position: absolute;
  z-index: 20;
}

.details .img-list .img01{
  top: 28px;
  left: -108px;
}

.details .img-list .img02{
  top: 60px;
  right: -108px;
}

.details .movie-list{
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  max-width: 1430px;
  padding-top: 223px;
  width: 95%;
}

.details .movie-list > div:nth-child(2){
  padding-top: 30px;
}

.details .movie-list > div:nth-child(3){
  padding-top: 60px;
}

.details .movie-list > div{
  width: 100%;
}

.details .movie-list .frame{
  background: rgba(0, 0, 0, .1);
  border: 1px solid rgba(255, 243, 80, .2);
  box-sizing: border-box;
  margin: 2px auto 0;
  padding: 5px;
  width: 91%;
}

.details .movie-list h3{
  width: 100%;
}

.details .movie-list h3 img{
  max-width: 472px;
  width: 100%;
}

.details .movie::before{
  content:"";
  display: block;
  padding-top: 56.25%;
}

.details .movie{
  position: relative;
  width: 100%;
}

.details .movie iframe{
  left: 0;
  position: absolute;
  top: 0;
  max-height: 240px;
  max-width: 428px;
}

.details .slide{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}

.details .slide li{
  margin-left: -60px;
}

.btn-system {
  margin: 25px auto 0;
  text-align: center;
  width: 100%;
}

.btn-system img {
  max-width: 591px;
  width: 40.87%;
}

.btn-system a:hover img {
  -webkit-animation: shake 1s;
  animation: shake 1s;
}

/* -------------------------
  3. system
------------------------- */

#system h2,
#system .txt{
  text-align: center;
  margin: 0 auto;
}

#system .img_list li{
  position: absolute;
}

/*--- gameflow ---*/

#system .gameflow{
  background: url(../img/pc/system/gameflow-bg.jpg)no-repeat 50% 0;
  height: 1299px;
  overflow: hidden;
  width: auto;
}

#system .inr{
  max-width: 1328px;
}

#system .gameflow .inr > div{
  background: url(../img/pc/system/gameflow-bg02.png)no-repeat;
  background-size: contain;
  box-sizing: border-box;
  height: auto;
  margin: -83px auto 0;
  max-width: 1328px;
  padding: 82px 0 4% 0;
  position: relative;
  width: 100%;
}

#system .gameflow .inr ul li{
  position: absolute;
}

#system .gameflow h2{
  position: relative;
  margin: 30px auto 18px;
  max-width: 826px;
  width: 62.19%;
  z-index: 5;
}

#system .gameflow .txt{
  margin: 0 auto 28px;
  max-width: 1063px;
  width: 80.04%;
}

#system .gameflow .chara_description{
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  padding: 0 4.363%;
  width: 100%;
}

#system .gameflow .chara{
  margin-left: -0.5%;
}

#system .gameflow .moku01{
  padding-top: 58px;
}

#system .gameflow .moku02{
  padding-top: 58px;
  margin-left: -1.9%;
}

#system .gameflow .img01{
  top: -18px;
  left: -171px;
  width: 309px;
}

#system .gameflow .img02{
  top: 257px;
  left: -138px;
  width: 157px;
}

#system .gameflow .img03{
  bottom: 61px;
  right: -210px;
  width: 180px;
}

#system .gameflow .img04{
  bottom: -26px;
  right: -26px;
  width: 143px;
}

/*--- stage ---*/

#system .stage{
  background: url(../img/pc/system/stage-bg.jpg)no-repeat 50% 0;
  height: 1592px;
  margin-top: -170px;
  overflow: hidden;
  width: auto;
}

#system .stage .inr{
  max-width: 1476px;
}

#system .stage h2{
  margin: 165px auto 24px;
  max-width: 505px;
  width: 34.21%;
}

#system .stage .txt{
  margin-bottom: 55px;
  max-width: 645px;
  width: 43.69%;
}

#system .stage .stage_list{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
}

#system .stage .stage_list li{
  margin-top: 64px;
  text-align: right;
  position: relative;
  max-width: 667px;
  width: 45.18%;
}

#system .stage .stage_list li:nth-child(1),
#system .stage .stage_list li:nth-child(2){
  margin-top: 54px;
}

#system .stage .stage_list li .huki + img{
  max-width: 336px;
  width: 50.37%;
}

#system .stage .stage_list li .huki{
  position: absolute;
  top: -42px;
  left: -8%;
  max-width: 325px;
  width: 48.72%;
}

/*--- story ---*/

#system .back-movie{
  height: 1080px;
  margin: 0 auto;
  position: relative;
  max-width: 1920px;
  overflow: hidden;
  width: 100%;
}
#system .back-movie iframe{
  height: 1080px;
  margin: 0 auto 0 -960px;
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
}

#system .story{
  background: url(../img/pc/system/story-bg-tex.png)repeat-y 50% 0;
  background-blend-mode: multiply;
  height: 1080px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}

#system .story h2{
  margin: 70px auto 3px;
  max-width: 407px;
  width: 29%;
}

#system .story .txt {
  margin-top: 30px;
  max-width: 811px;
  width: 57.92%;
}

#system .story .ss{
  position: relative;
  height: 490px;
  margin: 0 auto;
  width: 95%;
}

#system .story .ss p{
  position: absolute;
  bottom: 205px;
  left: 0;
  max-width: 390px;
  width: 21.38%;
}

#system .storySlide{
  position: absolute;
  bottom: 4.2%;
  left: 12%;
  max-width: 538px;
  width: 29.49%;
}
#system .storySlide li{
  max-width: 538px;
  width: 100%;
}

/*--- collection ---*/

#system .collection{
  background: url(../img/pc/system/collection-bg.jpg)no-repeat 50% 0;
  box-sizing: border-box;
  height: 1741px;
  overflow: hidden;
  padding-top: 70px;
  position: relative;
  width: auto;
}

#system .collection .inr{
  position: relative;
  max-width: 1376px;
}

#system .collection > .inr .img01{
  top: -6px;
  left: -72px;
  max-width: 326px;
  width: 23.69%;
}

#system .collection > .inr .img02{
  top: 72px;
  right: -55px;
  max-width: 339px;
  width: 24.63%;
}

#system .collection h2{
  max-width: 741px;
  width: 53.85%;
}

#system .collection .txt{
  margin: 35px auto 45px;
  max-width: 740px;
  width: 53.85%;
}

#system .collection .ss{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}

/*--- support---*/

#system .support h2{
  margin-top: 80px;
  max-width: 756px;
  width: 54.94%;
}

#system .support .img01{
  top: -16px;
  left: -149px;
  max-width: 385px;
  width: 27.97%;
}

#system .support .img02{
  top: -2px;
  right: -151px;
  max-width: 383px;
  width: 27.83%;
}

#system .support .img03{
  bottom: -81px;
  left: -118px;
  max-width: 132px;
  width: 9.59%;
}

#system .support .img04{
  bottom: -83px;
  right: -102px;
  max-width: 91px;
  width: 6.61%;
}

#system .support .txt{
  margin: 35px auto 45px;
  max-width: 1213px;
  width: 88.15%;
}

#system .support .ss{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}

/*--- skill---*/

#system .skill{
  background: url(../img/pc/system/skill-bg.jpg)no-repeat 50% 0;
  box-sizing: border-box;
  height: 1404px;
  overflow: hidden;
  padding-top: 48px;
  position: relative;
  width: auto;
}

#system .skill .inr{
  position: relative;
  max-width: 1238px;
  width: 95%;
}

#system .skill .frame{
  background: rgba(0, 0, 0, .1);
  border: 1px solid rgba(255, 243, 80, .2);
  box-sizing: border-box;
  margin: 2px auto 0;
  padding: 5px;
  width: 50%;
}

#system .skill .movie::before{
  content:"";
  display: block;
  padding-top: 56.25%;
}

#system .skill .movie{
  position: relative;
  width: 100%;
}

#system .skill .movie #skillMovie{
  left: 0;
  position: absolute;
  top: 0;
  max-height: 358px;
  max-width: 637px;
}

#system .skill .txt{
  margin: 40px auto 22px;
}

#system .skill .frame{
  margin-bottom: 55px;
}

#system .skill .img01{
  top: 0px;
  left: 0px;
  max-width: 241px;
  width: 19.46%;
}

#system .skill .img02{
  top: 161px;
  right: -81px;
  max-width: 213px;
  width: 17.2%;
}

#system .skill .img03{
  top: 513px;
  left: -142px;
  max-width: 264px;
  width: 21.32%;
}

#system .skill .img04{
  top: 422px;
  right: -208px;
  max-width: 349px;
  width: 28.19%;
}

#system .skill .img05{
  bottom: 77px;
  left: -122px;
  max-width: 121px;
  width: 9.77%;
}

#system .skill .img06{
  bottom: -11px;
  right: -95px;
  max-width: 121px;
  width: 9.77%;
}

/*--- evolution---*/

#system .evolution{
  background: url(../img/pc/system/evolution-bg.jpg)no-repeat 50% 0 / cover;
  box-sizing: border-box;
  height: 1800px;
  overflow: hidden;
  margin-bottom: 100px;
  padding-top: 120px;
  position: relative;
  width: auto;
}

#system .evolution .inr{
  max-width: 1371px
}

#system .evolution h2 + div{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 33px 0 59px;
  position: relative;
  width: 100%;
}

#system .evolution h2 + div .txt{
  box-sizing: border-box;
  padding-left: 33px;
}

#system .evolution .img01{
  position: absolute;
  bottom: -180px;
  right: 0;
  max-width: 334px;
  width: 24.36%;
}

#system .evolution .img02{
  margin: 43px 0 80px;
}

.btn-mode {
  margin: 25px auto 0;
  text-align: center;
  width: 100%;
}

.btn-mode img {
  max-width: 591px;
  width: 40.87%;
}

.btn-mode a:hover img {
  -webkit-animation: shake 1s;
  animation: shake 1s;
}

/* -------------------------
  4. mode
------------------------- */

#mode .ss{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 4% auto 0;
  width: 71.97%;
}

#mode .ss li{
  width: 48%;
}

#mode .newgame {
  background: url(../img/pc/mode/mode-bg01.jpg) no-repeat 0 0 / 100% 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: 6%;
}

#mode .newgame > h2 {
  margin: 2.5% auto 0;
  width: 36.71%;
}

#mode .newgame > div {
  background: url(../img/pc/mode/newgame-bg.png) no-repeat 0 0 / 100% 100%;
  margin: 0 auto;
  width: 77.91%;
}

#mode .newgame > div .inr{
  margin: 10% auto 0;
  padding: 9% 0 4% 0;
  position: relative;
  width: 92.37%;
}

#mode .newgame > div .inr h2{
  margin: 0 auto;
  position: absolute;
  top: -8%;
  right: 0;
  left: 0;
  width: 33.42%;
}

#mode .newgame .ss{
  width: 100%;
}

#mode .challenge {
  background: url(../img/pc/mode/mode-bg02.jpg) no-repeat 0 0 / 100% 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: 6%;
}

#mode .challenge h2{
  margin: 4% auto 0;
  width: 25.72%;
}

#mode .challenge .txt{
  margin: 1.8% auto 0;
  width: 71.97%;
}

#mode .challenge .ss{
  margin: 2% auto 0;
}

#mode .img_list{
  height: 750px;
  margin: 0 auto;
  min-width: 1200px;
  position: absolute;
  right: 0;
  left: 0;
  width: 85%;
}

#mode .img_list .img01{
  top: -17.6%;
  right: 14.17%;
  width: 16.44%
}

#mode .img_list .img02{
  top: -17.6%;
  left: 14.17%;
  width: 12.88%
}

#mode .img_list .img03{
  top: 2%;
  right: 2.14%;
  width: 8.7%
}

#mode .img_list .img04{
  top: 15%;
  left: -0.4%;
  width: 4.66%
}

#mode .img_list .img05{
  top: 66.3%;
  left: -3.4%;
  width: 16.31%
}

#mode .img_list .img06{
  top: 70.3%;
  right: -2%;
  width: 10.79%
}

#mode .img_list .img07{
  top: 3.8%;
  right: -7.11%;
  width: 18.4%
}

#mode .img_list .img08{
  top: 7%;
  left: 3.4%;
  width: 8.7%
}

#mode .img_list .img09{
  top: 23.3%;
  right: -2.2%;
  width: 6%
}

#mode .img_list .img10{
  top: 90.8%;
  right: 6%;
  width: 8.71%
}

#mode .img_list .img11{
  top: 90.8%;
  left: 6%;
  width: 6.68%
}

#mode .img_list li{
  position: absolute;
}

#mode .freemode {
  background: url(../img/pc/mode/mode-bg03.jpg) no-repeat 0 0 / 100% 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: 50%;
}

#mode .freemode h2{
  margin: 4% auto 0;
  width: 26.87%;
}

#mode .freemode  .txt{
  margin: 1.8% auto 0;
  width: 71.97%;
}

#mode .freemode  .ss{
  margin: 2% auto 0;
}

#mode .freemode .other h2{
  margin: 6% auto 0;
  width: 62.7%;
}

#mode .freemode .other .txt{
  margin: 1.8% auto 0;
  width: 28.9%;
}

#mode .freemode .other .ss{
  margin-top: 0;
  position: relative;
}

#mode .freemode .other .ss li{
  position: absolute;
  top: 0;
  width: 100%;
}

/* -------------------------
  5. movie
------------------------- */

#movie {
  background: url(../img/pc/movie/bg.jpg) no-repeat 0 0 / cover fixed;
  padding-bottom: 14.583%;
}

#movie h1 {
  margin: 0 auto 4.063%;
  padding-top: 1.198%;
  width: 33.541%;
}

#movie .wrap {
  display: -webkit-flex;
  display: flex;
  justify-content: -webkit-center;
  justify-content: center;
}

#movie .wrap ~ .wrap {
  margin-top: 3.125%;
}

#movie .box {
  width: 30.729%;
}

#movie .box ~ .box {
  margin-left: 3.125%;
}

#movie .box h2 + * {
  margin-top: 2.881%;
}

#movie .movie {
  background: url(../img/pc/movie/movie-bg.png) no-repeat 0 0 / 100% auto;
  height: 77.778%;
}

#movie .movie > .inr {
  height: 87.714%;
  margin: 0 auto;
  position: relative;
  top: 6.286%;
  width: 92.542%;
}

#movie .movie p {
  height: 0;
  padding-bottom: 64.4%;
}

#movie .movie iframe {
  left: 0;
  position: absolute;
  top: 0;
}

/* -------------------------
  6. bonus
------------------------- */

#bonus {
  background: url(../img/pc/bonus/bg.jpg) no-repeat 0 0 / cover;
  padding-bottom: 14.583%;
}

#bonus h1 {
  margin: 0 auto;
  padding-top: 3.854%;
  width: 34.063%;
}

#bonus .wrap {
  display: -webkit-flex;
  display: flex;
  justify-content: -webkit-center;
  justify-content: center;
  margin-top: 2.552%;
}

#bonus .box {
  box-sizing: border-box;
  text-align: center;
  width: 25.052%;
}

#bonus .box ~ .box {
  margin-left: 1.563%;
}

#bonus .box h2 {
  margin-top: 10.811%;
}

#bonus .box h2 + p {
  margin-top: 2.851%;
}

#bonus .box .ttl {
  margin: 7.277% 0 6.445%;
}

#bonus .box .ttl + p img {
  margin-bottom: 8.524%;
}

#bonus .box img {
  width: 86.694%;
}

#bonus .box a {
  display: block;
}

#bonus .box a:hover img {
  -webkit-animation: bounce .6s;
  animation: bounce .6s;
}

#bonus .amazon {
  background: url(../img/pc/bonus/amazon-bg.png) no-repeat 0 0 / 100% 100%;
}

#bonus .aeon {
  background: url(../img/pc/bonus/aeon-bg.png) no-repeat 0 0 / 100% 100%;
}

#bonus .geo {
  background: url(../img/pc/bonus/geo-bg.png) no-repeat 0 0 / 100% 100%;
}

#bonus .geo .ttl {
  margin: 3.119% 0 2.444%;
}

/* -------------------------
  7. special
------------------------- */

#special {
  background: url(../img/pc/special/bg-ttl.jpg) no-repeat 50% 0 / auto 18.594vw, url(../img/pc/special/bg-tex.jpg);
  overflow: hidden;
  padding-bottom: 14.583%;
}

#special h1 {
  margin: 0 auto;
  padding-top: 3.75vw;
  width: 35.885vw;
}

/* streamer */

#streamer {
  margin-top: 8.229vw;
  position: relative;
}

#streamer h2,
#streamer h3 {
  margin: 0 auto;
  width: 52.135vw;
}

#streamer h2 {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#streamer .movie.main,
#streamer .movie.main > .inr {
  height: 513px;
  width: 753px;
}

#streamer .movie.main {
  box-sizing: border-box;
  margin: -6px auto 0;
  position: relative;
  text-align: center;
  z-index: 2;
}

#streamer .movie.main::before,
#streamer .movie.main::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}

#streamer .movie.main::before {
  background: url(../img/pc/special/streamer-creature01.png);
  height: 443px;
  left: -420px;
  top: 45px;
  width: 500px;
}

#streamer .movie.main::after {
  background: url(../img/pc/special/streamer-creature02.png);
  height: 496px;
  right: -340px;
  top: 0;
  width: 349px;
}

#streamer .movie > .inr {
  background: url(../img/pc/special/streamer-prevMovie-bg.png) no-repeat 0 0 / 100% auto;
  padding: 16px 0;
  width: 100%;
}

#streamer .movie.main > .inr {
  background: url(../img/pc/special/streamer-movie-bg.png) no-repeat 0 0 / 100% auto;
  padding-top: 16px;
}

#streamer .prev {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  width: 1200px;
}

#streamer .box {
  width: 580px;
}

#streamer .box h3 {
  margin: 80px auto 7px;
  width: 197px;
}

#streamer .prev > .box:nth-child(odd) {
  float: left;
}

#streamer .prev > .box:nth-child(even) {
  float: right;
}