@charset "utf-8";

.second_bg {
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}
.second_bg .loop {
  position: absolute;
  top: 0; right: -50%; left: -50%;
  width: 200%;
  height: 200%;
  background: url(../img/bg_second.png) 50% 0 repeat;
  -webkit-animation: bgLoop 4.8s linear infinite both;
  animation: bgLoop 4.8s linear infinite both;
}
@-webkit-keyframes bgLoop {
  0% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
  to {-webkit-transform:translate3d(-240px,-216px,0);transform:translate3d(-240px,-216px,0);}
}
@keyframes bgLoop {
  0% {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
  to {-webkit-transform:translate3d(-240px,-216px,0);transform:translate3d(-240px,-216px,0);}
}

.second_header a {
  display: block;
  line-height: 0;
}

/* ---------------------------------
  メインボックス
---------------------------------- */
#contents {
}
#contents #mainBox article h2.new:after,
#contents #mainBox article p.new:after {
  top: -15px;
  right: auto;
  left: -8px;
}
#contents .singleBox {
  position: relative;
  z-index: 1;
}
#contents div[id$="Box"] .frame {
  padding: 0 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contents div[id$="Box"] .frame h2 {
  position: relative;
  width: 473px;
  height: 80px;
  padding: 0 0 0 10px;
  margin: 0 auto 20px;
  background: url(../img/bg_h2.png) 50% 100% no-repeat;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contents div[id$="Box"] .frame p {
  width: 690px;
  margin: 0 auto 16px;
}

#contents div[id$="Box"] .frame p.mini_caption {
  margin: 26px auto 16px;
}

hr {
  border: none;
  display: block;
  width: 663px;
  height: 6px;
  margin: 40px auto;
  background: url(../img/line.png) 0 0 / 100% auto no-repeat;
}
/* ---------------------------------
  ストーリー
---------------------------------- */
#contents #mainBox.about article#about,
#contents #mainBox.intro article#intro,
#contents #mainBox.past article#past {
  display: block;
}
#intro .pop_image_center {
  width: 624px;
  margin: 0 auto 20px;
}
#intro .pop_image_center .pop img {
  width: 624px;
}
#contents div[id$="Box"] .frame p {
  margin: 0 auto 20px;
}
#contents div[id$="Box"] .frame p.txt_past04 {
  margin: 0 auto 42px;
}
#past .img_right {
  position: absolute;
  top: 36px; right: 2px;
}
/* ---------------------------------
  キャラクター
---------------------------------- */
.gathering {
  position: relative;
  width: 750px;
  height: 640px;
  margin: -15px auto 0;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.gathering a {
  position: absolute;
  display: block;
  background: 0 0 no-repeat;
}
.gathering a img {
  opacity: 0;
  background: 0 100% no-repeat;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.gathering a:hover img,
.gathering a.hover img {
  opacity: 1;
}
.gathering span {
  position: absolute;
  display: block;
}
/*.gathering a:after,
.gathering span:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #fff;
  mix-blend-mode: lighten;
  z-index: 1;
}*/
.gathering .chara01 {
  bottom: 7.7%;
  left: 26.1%;
  z-index: 10;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s both;
}
.gathering .chara01,
.gathering .chara01 img {
  width: 212px;
  height: 335px;
  background-image: url(../img/character/btn_character01.png);
}
.gathering .chara02 {
  bottom: 9%;
  left: 35.4%;
  background: url(../img/character/btn_character02.png) 0 0 no-repeat;
  z-index: 6;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.0s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.0s both;
}
.gathering .chara02,
.gathering .chara02 img {
  width: 300px;
  height: 584px;
  background-image: url(../img/character/btn_character02.png);
}
.gathering .chara03 {
  bottom: 8%;
  left: 13%;
  background: url(../img/character/btn_character03.png) 0 0 no-repeat;
  z-index: 8;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s both;
}
.gathering .chara03,
.gathering .chara03 img {
  width: 160px;
  height: 293px;
  background-image: url(../img/character/btn_character03.png);
}
.gathering .chara04 {
  position: absolute;
  bottom: 13%;
  left: -16.3%;
  z-index: 7;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
}
.gathering .chara04,
.gathering .chara04 img {
  width: 264px;
  height: 305px;
  background-image: url(../img/character/btn_character04.png);
}
.gathering .chara05 {
  position: absolute;
  bottom: 8%;
  left: 3.9%;
  z-index: 2;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s both;
}
.gathering .chara05,
.gathering .chara05 img {
  width: 198px;
  height: 390px;
  background-image: url(../img/character/btn_character09.png);
}
.gathering .chara06 {
  position: absolute;
  bottom: 5.9%;
  left: 9%;
  z-index: 3;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
}
.gathering .chara06,
.gathering .chara06 img {
  width: 291px;
  height: 478px;
  background-image: url(../img/character/btn_character10.png);
}
.gathering .chara07 {
  position: absolute;
  bottom: 7.7%;
  left: 52%;
  z-index: 14;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s both;
}
.gathering .chara07,
.gathering .chara07 img {
  width: 166px;
  height: 353px;
  background-image: url(../img/character/btn_character07.png);
}
.gathering .chara08 {
  position: absolute;
  bottom: 6.4%;
  left: 71%;
  z-index: 12;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.3s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.3s both;
}
.gathering .chara08,
.gathering .chara08 img {
  width: 252px;
  height: 434px;
  background-image: url(../img/character/btn_character08.png);
}
.gathering .chara09 {
  position: absolute;
  bottom: 8.2%;
  left: 72%;
  z-index: 12;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s both;
}
.gathering .chara09,
.gathering .chara09 img {
  width: 146px;
  height: 350px;
  background-image: url(../img/character/btn_character05.png);
}
.gathering .chara10 {
  position: absolute;
  bottom: 8.2%;
  left: 96.8%;
  z-index: 12;
  -webkit-animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s both;
  animation: charaSlideIn 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s both;
}
.gathering .chara10,
.gathering .chara10 img {
  width: 144px;
  height: 311px;
  background-image: url(../img/character/btn_character06.png);
}
@-webkit-keyframes charaSlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50px,0,0);
    transform: translate3d(50px,0,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0px,0,0);
    transform: translate3d(0px,0,0);
  }
}
@keyframes charaSlideIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(30px,0,0);
    transform: translate3d(30px,0,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0px,0,0);
    transform: translate3d(0px,0,0);
  }
}
.gathering_new {
  position: absolute;
  top: 100px;
  left: 0; right: 0;
  width: 700px;
  height: 540px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 15;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.gathering_new img {
  position: absolute;
  top: auto;
  width: 50.3px;
  height: 22px;
  -webkit-animation: blink 1.8s infinite;
  animation: blink 1.8s infinite;
}
.gathering_new .new_chara04 {
  bottom: 56.5%;
  left: -6.7%;
}
.gathering_new .new_chara05 {
  bottom: 62.5%;
  left: 2%;
}
.gathering_new .new_chara06 {
  bottom: 72.5%;
  left: 14.7%;
}
.gathering_new .new_chara07 {
  bottom: 51.5%;
  left: 50.5%;
}
.gathering_new .new_chara08 {
  bottom: 68%;
  left: 86.0%;
}
.gathering_new .new_chara09 {
  bottom: 57.5%;
  left: 78.0%;
}
.gathering_new .new_chara10 {
  bottom: 52%;
  left: 105.0%;
}
#click04 {
  position: absolute;
  top: 310px;
  left: 144px;
  display: block;
  width: 70px;
  height: 100px;
  /*background: rgba(255,0,0,.5);*/
  z-index: 50;
  cursor: pointer;
}
#charaPopup {
  position: absolute;
  top: 84px;
  left: 0; right: 0;
  width: 92.75%;
  height: 610px;
  margin: 0 auto;
  background: rgba(222,205,151,0.8);
  /*-webkit-box-shadow: 0 0 6px 6px rgba(222,205,151,0.8);
  box-shadow: 0 0 6px 6px rgba(222,205,151,0.8);*/
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
#charaPopup.show {
  opacity: 1;
  pointer-events: auto;
}
#charaPopup button {
  position: absolute;
  display: block;
  background: 0 0 no-repeat;
  z-index: 100;
}
#charaPopup button:disabled {
  display: none;
}
#charaPopup button img {
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#charaPopup button:not(:disabled):hover img {
  opacity: 1;
}
#charaPopup .close {
  top: -85px;
  right: 15px;
}
#charaPopup .close,
#charaPopup .close img {
  width: 60px;
  height: 60px;
  background-image: url(../img/close.png);
}
#charaPopup .prev {
  top: 0; bottom: 0;
  left: 5px;
  margin: auto 0;
}
#charaPopup .prev,
#charaPopup .prev img {
  width: 45px;
  height: 65px;
  background-image: url(../img/arrow_prev.png);
}
#charaPopup .next {
  top: 0; bottom: 0;
  right: 5px;
  margin: auto 0 !important;
}
#charaPopup .next,
#charaPopup .next img {
  width: 45px;
  height: 65px;
  background-image: url(../img/arrow_next.png);
}
#charaPopup .slide_wrap {
  width: -webkit-calc(100% - 110px);
  width: calc(100% - 110px);
  height: 625px;
  margin: 0 auto;
  overflow: hidden;
}
#charaPopup .slide_wrap ul {
  width: 50000px;
}
#charaPopup.chara02 .slide_wrap ul {
  white-space: nowrap;
  -webkit-transform: translate3d(-808px,0,0);
  transform: translate3d(-808px,0,0);
}
#charaPopup li {
  float: left;
  position: relative;
  height: 625px;
}
#charaPopup li img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  margin: auto;
}
/* ---------------------------------
システム
---------------------------------- */
#contents #mainBox.outline article#outline,
#contents #mainBox.battlesystem article#battlesystem,
#contents #mainBox.town article#town,
#contents #mainBox.customize article#customize,
#contents #mainBox.costume article#costume,
#contents #mainBox.enhancement article#enhancement {
  display: block;
}

.battlesystem_img {
  width: 690px;
  margin: 0 auto 8px;
  text-align: center;
}
.battlesystem_img > img {
  display: inline-block;
  margin: 0 8px 0 0;
}

.battlesystem_img2 {
  position: relative;
  width: 650px;
  padding: 15px 0 0;
  margin: 0 auto 15px;
}
.battlesystem_img2 .pop {
}
.battlesystem_img2 .circle {
  position: absolute;
  top: -25px;
  right: 10px;
}
#contents div[id$="Box"] .frame p[class^="chara_skill"] {
  width: 685px;
  margin: 0 auto 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.chara_skill01 {
  height: 566px;
  padding: 241px 0 0 24px;
  background: url(../img/system/txt_battlesystem08.png) 0 0 no-repeat;
}
.chara_skill02 {
  height: 566px;
  padding: 241px 0 0 24px;
  background: url(../img/system/txt_battlesystem09.png) 0 0 no-repeat;
}
.chara_skill03 {
  height: 598px;
  padding: 275px 0 0 24px;
  background: url(../img/system/txt_battlesystem10.png) 0 0 no-repeat;
}
.chara_skill04 {
  height: 566px;
  padding: 241px 0 0 24px;
  background: url(../img/system/txt_battlesystem11.png) 0 0 no-repeat;
}
.chara_skill05 {
  height: 692px;
  padding: 340px 0 0 24px;
  background: url(../img/system/txt_battlesystem12.png) 0 0 no-repeat;
}
.culture {
  position: relative;
}
.culture .img02 {
  position: absolute;
  top: 76px;
  right: 0;
}
.culture .img03 {
  position: absolute;
  top: 344px;
  right: 0;
}
#contents div[id$="Box"] .frame p.check_txt {
  margin: 0 auto 36px;
}

.custom_form {
  width: 726px;
  height: 562px;
  margin: 0 auto 14px;
  background: url(../img/system/bg_custom.png) 50% 40px no-repeat;
}
.custom_form .pop {
  margin: 0 3px 3px;
}
.custom_form3 {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 596px;
  padding: 303px 32px 0 0;
  margin: -40px 0 38px 27px;
  background: url(../img/system/txt_gamesystem11.png) 50% 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#contents #mainBox article .custom_form3.new:after {
  top: 74px;
  right: auto;
  left: -8px;
}
.custom_form4 {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 596px;
  padding: 273px 32px 0 0;
  margin: 0 0 14px 27px;
  background: url(../img/system/txt_gamesystem12.png) 50% 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contents #mainBox article .custom_form4.new:after {
  top: 11px;
  right: auto;
  left: -8px;
}
.custom_form5 {
  position: relative;
  width: 798px;
  height: 596px;
  padding: 312px 73px 0 0;
  margin: 0 0 14px 27px;
  background: url(../img/system/txt_gamesystem13.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contents #mainBox article .custom_form5.new:after {
  top: 11px;
  right: auto;
  left: -8px;
}
.custom_form6 {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 596px;
  padding: 328px 32px 0 0;
  margin: 0 0 14px 27px;
  background: url(../img/system/txt_gamesystem14.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contents #mainBox article .custom_form6.new:after {
  top: 11px;
  right: auto;
  left: -8px;
}
#contents #mainBox article#enhancement .txt04 {
  margin: 22px auto 20px;
}
.coslineup {
  position: relative;
}
.coslineup .newIcons .newIcon {
  position: absolute;
  width: 120px;
  -webkit-animation: blink 1.8s infinite;
  animation: blink 1.8s infinite;
}
.coslineup .newIcons .newIcon:nth-child(1) {
  top: 1798px;
  left: -webkit-calc(50% - 334px);
  left: calc(50% - 334px);
}
.coslineup .newIcons .newIcon:nth-child(2) {
  top: 2160px;
  left: -webkit-calc(50% + 200px);
  left: calc(50% + 200px);
}
.coslineup .newIcons .newIcon:nth-child(3) {
  top: 2518px;
  left: -webkit-calc(50% - 334px);
  left: calc(50% - 334px);
}
.coslineup .newIcons .newIcon:nth-child(4) {
  top: 2887px;
  left: -webkit-calc(50% + 210px);
  left: calc(50% + 210px);
}
.coslineup .newIcons .newIcon:nth-child(5) {
  top: 3208px;
  left: -webkit-calc(50% - 350px);
  left: calc(50% - 350px);
}
/* ---------------------------------
ギャラリー
---------------------------------- */
.mv_list li {
  position: relative;
}
.mv_list h3 {
  text-align: center;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  background: #000;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  line-height: 0;
}

/* ---------------------------------
スペシャル
---------------------------------- */
#special .banner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1016px;
  margin: 0 auto;
}