@charset "UTF-8";
/* Scss Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
/*変数(ブレイクポイント)設定(必要に応じて数値を変更)*/
.sp {
  display: none; }
  @media screen and (max-width: 500px) {
    .sp {
      display: block; } }

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

div, a {
  outline: none; }

/*=====================================================================================================================*/
/*--------------------body設定 */
body {
  background: #000;
  font-family: ‘Noto Sans Japanese’, sans-serif; }

/*フォント設定*/
.red {
  color: #FF0000; }

.redB {
  color: #FF0000;
  font-weight: bold; }

.blue {
  color: #0000FF; }

.blueB {
  color: #0000FF;
  font-weight: bold; }

.yellow {
  color: #FFB730; }

.yellowB {
  color: #FFB730;
  font-weight: bold; }

/*=====================================================================================================================*/
/*ヘッダー(一番上の奴)設定*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 45px;
  background: #000;
  border-bottom: 1px solid #c3bcbc;
  color: #FFF;
  overflow: hidden;
  z-index: 90; }
  header img {
    text-align: left; }

.h_con {
  width: 1260px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; }

.k_icon img {
  margin: 2px 0 0; }
.k_icon img:hover {
  opacity: 0.7; }

.right ul {
  display: flex; }
.right li {
  width: 35px;
  margin: 5px 3px 0px; }
.right li a:hover {
  opacity: 0.7; }

/*=====================================================================================================================*/
/*コンテンツ共通*/
.main_back {
  background: #000 url("../img/back_00.jpg") top center no-repeat;
  overflow: hidden; }

.slider {
  width: 1280px;
  height: 778px;
  margin: 0 auto;
  overflow: hidden; }

.swiper-wrapper {
  position: relative;
  width: 1300px;
  height: 790px;
  margin: 0 auto; }

/*=====================================================================================================================*/
/*slick setting*/
.prev-arrow, .next-arrow {
  position: absolute;
  top: 50%;
  background: rgba(255, 255, 255, 0);
  border: none;
  outline: none;
  z-index: 60; }

.prev-arrow {
  left: 0; }

.prev-arrow:before {
  content: url("../img/arrow_l.png"); }

.next-arrow {
  right: 0px; }

.next-arrow:before {
  content: url("../img/arrow_r.png"); }

.slide-dots {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  margin: 0 auto; }
  .slide-dots li {
    display: inline-block;
    margin: 0 7px; }
    .slide-dots li button {
      position: relative;
      text-indent: -9999px;
      background: rgba(255, 255, 255, 0);
      border: none;
      outline: none; }
      .slide-dots li button:before {
        content: url("../img/navi_0.png");
        font-size: 34px;
        text-indent: 0px;
        position: absolute;
        top: 0;
        left: 0; }
    .slide-dots li.slick-active button:before {
      content: url("../img/navi_1.png"); }

/*=====================================================================================================================*/
/*TOP画像*/
.main_img {
  position: absolute;
  right: -10px;
  width: 800px;
  bottom: 0; }

.main_catch {
  position: absolute;
  top: 60px;
  left: 80px; }

.main_logo {
  position: absolute;
  top: 130px;
  left: -20px; }

.pv {
  position: absolute;
  bottom: 160px;
  width: 360px;
  left: 132px;
  z-index: 5; }
  .pv:hover {
    opacity: 0.8; }

.dl_bn {
  position: absolute;
  bottom: 70px;
  width: 400px;
  left: 120px;
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; }

/*=====================================================================================================================*/
/*STORY画像*/
.mt_0 {
  position: absolute;
  top: 80px;
  left: 60px;
  z-index: 20; }

.story_img {
  position: absolute;
  bottom: 12px;
  right: -40px; }

/*=====================================================================================================================*/
/*GARALLY画像*/
.gimg_list {
  position: absolute;
  top: 220px;
  bottom: 0px;
  right: 0;
  left: 70px;
  margin: 0 auto; }

.capture {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1080px; }
  .capture li {
    width: 260px;
    margin-bottom: 10px; }

/*=====================================================================================================================*/
/*SYSTEM画像*/
.sys_img {
  position: absolute;
  top: 200px;
  bottom: 0px;
  right: 0;
  left: -20px;
  margin: 0 auto; }

/*=====================================================================================================================*/
/*Character画像*/
.chara_list {
  position: absolute;
  top: 160px;
  bottom: 0px;
  right: 0;
  left: 0px;
  margin: 0 auto; }

.c_list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center; }
  .c_list li {
    margin: 0 5px 0; }
  .c_list li img {
    transition: 0.5s; }
  .c_list li img:hover {
    transform: scale(1.05);
    opacity: 0.7; }

/*=====================================================================================================================*/
/*footerカスタム*/
footer {
  background: #000;
  color: #FFF;
  width: 100%; }

hr {
  background: #5d5c5c; }

.terminal {
  max-width: 860px; }

.s-title {
  width: 180px; }

.kadomaru {
  width: 90px; }

.tlist_sps {
  width: 22%; }

.mrgn {
  margin-right: 15px; }

.tlist_sp .pflist_l, .tlist_sps .pflist_l, .tlist-last_sp .pflist_l {
  background: #a80505; }

.pflist_r {
  color: #FFF; }

.mcau {
  margin: 0 auto;
  width: 850px;
  max-width: 90%; }

.clogo-m {
  max-width: 980px;
  margin: 0 auto; }

/*DLモーダルウィンドウ========================================================================================================*/
.open_dl {
  display: none; }
  @media screen and (max-width: 850px) {
    .open_dl {
      display: block;
      margin: 25px auto;
      text-align: center; }
      .open_dl img {
        max-width: 90%; } }
  @media screen and (max-width: 768px) {
    .open_dl {
      margin: 10px auto 25px; } }

.modal_wrap input {
  display: none; }

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0); }

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%; }

.modal_content {
  align-self: center;
  width: 760px;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  line-height: 1.4em;
  transform: scale(0.3);
  transition: 0.5s; }
  @media screen and (max-width: 500px) {
    .modal_content {
      width: 80%;
      margin: 0 auto; } }
  @media screen and (max-width: 420px) {
    .modal_content {
      padding: 10px 0;
      width: 80%; } }

.modal_content_two {
  align-self: center;
  width: 450px;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  line-height: 1.4em;
  transform: scale(0.3);
  transition: 0.5s; }
  @media screen and (max-width: 500px) {
    .modal_content_two {
      width: 80%;
      margin: 0 auto; } }
  @media screen and (max-width: 420px) {
    .modal_content_two {
      padding: 10px 0;
      width: 80%; } }

.close_button {
  position: absolute;
  top: 14px;
  right: 16px;
  cursor: pointer;
  color: #FFFFFF;
  opacity: 1; }

@media screen and (max-width: 768px) {
  .close_button {
    top: 1%;
    right: 4%;
    color: #FFFFFF; } }
@media screen and (max-width: 420px) {
  .close_button {
    top: -10px;
    right: -10px;
    color: #FFFFFF; } }
.close_button img {
  width: 24px;
  height: 24px; }

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s; }

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: scale(1); }

.modal_wrap input:checked ~ .modal_overlay .modal_content_two {
  transform: scale(1); }

.open_button {
  text-align: center;
  max-width: 96%;
  margin: 0 auto;
  font-family: 'Noto Sans JP'; }

.dl_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
.dl_list li {
  color: #FFF;
  width: 150px;
  height: 90px;
  border: 2px #d5cb87 solid;
  border-radius: 5px;
  text-align: center;
  margin: 5px 5px;
  font-size: 12px;
  background: black;
  background: -moz-linear-gradient(top, black 0%, #6e2020 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, black), color-stop(100%, #6e2020));
  background: -webkit-linear-gradient(top, black 0%, #6e2020 100%);
  background: -o-linear-gradient(top, black 0%, #6e2020 100%);
  background: -ms-linear-gradient(top, black 0%, #6e2020 100%);
  background: linear-gradient(to bottom, black 0%, #6e2020 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000', GradientType=0 );
  box-shadow: 6px 6px rgba(66, 54, 0, 0.5); }
  .dl_list li img {
    height: 70px;
    margin-top: 12px; }
@media screen and (max-width: 500px) {
  .dl_list li {
    width: 110px;
    height: 70px; }
    .dl_list li img {
      height: 50px;
      margin: 8px auto 0px; } }

.dl_link a {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 5px 0;
  font-size: 12px;
  border-radius: 2px;
  background: #FFF;
  color: #092570;
  font-weight: bold;
  overflow: hidden; }
.dl_link a:hover {
  border: 2px solid #FFF;
  background: none;
  color: #FFF; }

.sooncon {
  position: relative; }
  @media screen and (max-width: 500px) {
    .sooncon {
      height: 60px; } }

.soon {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -0.1em;
  color: #FFF;
  text-align: center;
  font-weight: bold; }
  @media screen and (max-width: 500px) {
    .soon {
      font-size: 8px;
      bottom: 0em; } }