@charset "UTF-8";
/* Scss Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap");
/*変数(ブレイクポイント)設定(必要に応じて数値を変更)*/
.sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp {
      display: block; } }

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

div, a {
  outline: none; }

/*--------------------body設定 */
body {
  background: #000;
  font-family: 'Noto Sans JP', 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 {
  width: 100%;
  height: 50px;
  background: #000;
  overflow: hidden; }
  header img {
    text-align: left; }
  header img:hover {
    opacity: 0.7; }

.hd_con {
  margin: 0 auto;
  margin-top: 0.3%;
  display: flex;
  justify-content: space-between; }

.left_con {
  max-width: 150px; }

.lg_select {
  color: #FFF;
  margin-top: .5%; }
  .lg_select a {
    color: #FFF; }
    .lg_select a:hover {
      color: aqua; }

/*=====================================================================================================================*/
/*各項目(一番上の奴)設定*/
.main_img {
  text-align: center;
  margin: 0px auto 0;
  position: relative;
  padding: 0;
  height: 900px; }
  @media screen and (max-width: 1280px) {
    .main_img {
      height: 600px; } }

/*=====================================================================================================================*/
/*メインイメージ(一番上の奴)設定*/
.main {
  background: url(../img/back_00.jpg) no-repeat center top;
  background-size: cover;
  overflow: hidden; }

.switch_logo {
  width: 80px;
  position: absolute;
  z-index: 50;
  top: 2%;
  left: 1%; }

.g-title {
  position: absolute;
  margin: auto;
  right: 0px;
  left: 0;
  top: 28%;
  z-index: 10; }
  @media screen and (max-width: 1280px) {
    .g-title {
      height: 220px;
      right: 10px; } }

.catch {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0%;
  z-index: 51; }
  @media screen and (max-width: 1920px) {
    .catch {
      max-width: 50%; } }

.top_h {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -20%;
  max-height: 150%; }
  @media screen and (max-width: 1920px) {
    .top_h {
      top: 0%;
      max-height: 110%; } }

.top_v {
  position: absolute;
  z-index: 0;
  right: 0;
  top: -15%;
  max-height: 120%; }
  @media screen and (max-width: 1920px) {
    .top_v {
      top: -5%;
      max-height: 105%; } }

.swdlbn {
  position: absolute;
  margin: 0 auto;
  right: 20em;
  bottom: 10px;
  transition: .3s; }
  .swdlbn:hover {
    opacity: .5; }
  @media screen and (max-width: 1280px) {
    .swdlbn {
      bottom: 10px;
      right: 25em;
      height: 80px; } }

.dllink_pclist {
  width: 1230px;
  position: absolute;
  margin: 0 auto;
  bottom: 170px;
  left: -0px;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start; }
  .dllink_pclist a img {
    transition: 0.3s;
    cursor: pointer;
    cursor: hand; }
  .dllink_pclist a img:hover {
    opacity: 0.5; }
  @media screen and (max-width: 1280px) {
    .dllink_pclist {
      width: 90%;
      left: 0;
      right: 0;
      bottom: 120px; }
      .dllink_pclist img {
        height: 50px; } }

.dllink_splist img {
  height: 45px; }

.bn_img {
  position: absolute;
  margin: 0 auto;
  bottom: 100px;
  left: 0px;
  right: 0;
  z-index: 10;
  max-width: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .bn_img img {
    height: 180px;
    max-height: 100%; }
  @media screen and (max-width: 1280px) {
    .bn_img {
      left: 20px;
      text-align: center; }
      .bn_img img {
        max-width: 100%;
        height: 100px; } }

.spmain {
  display: none; }
  @media screen and (max-width: 768px) {
    .spmain {
      display: block;
      width: 100%;
      text-align: center; } }

.youtubesp {
  margin: 2em auto 1em;
  max-width: 90%; }

/*=====================================================================================================================*/
/*各項目設定*/
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  max-width: 1024px;
  margin: 20px auto 20px;
  z-index: 30; }
  @media screen and (max-width: 768px) {
    .menu {
      margin: 0px auto 20px;
      max-width: 98%; } }
  @media screen and (max-width: 420px) {
    .menu {
      margin: 0px auto 0px;
      max-width: 98%; } }

.menu ul {
  display: flex; }

.menu li {
  margin: 5px;
  transition: .5s; }
  @media screen and (max-width: 768px) {
    .menu li {
      margin: 0px 0px 40px; } }
  @media screen and (max-width: 420px) {
    .menu li {
      margin: 0px 0px 20px; } }

.menu li:hover {
  opacity: .5;
  transform: scale(1.05); }

.menu li:first-child {
  margin-left: 0px;
  margin-right: 5px; }

.menu li:last-child {
  margin-left: 5px;
  margin-right: 0px; }

/*=====================================================================================================================*/
/*PV項目用*/
@media screen and (max-width: 768px) {
  .pv_con {
    width: 96%; } }

/*=====================================================================================================================*/
/*各項目設定*/
.obi {
  margin: 4em auto;
  text-align: center; }
  @media screen and (max-width: 1280px) {
    .obi {
      margin: 2em auto; } }

/*=====================================================================================================================*/
/*シリーズ紹介*/
.siries {
  background: #353535 url("../img/back_01.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden; }

.siries_text {
  display: block;
  margin: 0 auto 5em;
  text-align: center; }
  @media screen and (max-width: 1024px) {
    .siries_text {
      margin: 1em auto;
      max-width: 90%; } }

.siries_con {
  width: 1250px;
  max-width: 90%;
  margin: 3em auto;
  height: 500px;
  position: relative;
  text-align: center; }
  @media screen and (max-width: 1024px) {
    .siries_con {
      margin: 1em auto;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
      .siries_con img {
        margin: 0 auto 2em;
        width: 45%; } }

.sm1 {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0; }
  @media screen and (max-width: 1024px) {
    .sm1 {
      position: static; } }

.sm2 {
  position: absolute;
  margin: auto;
  left: 0;
  right: auto;
  bottom: 0; }
  @media screen and (max-width: 1024px) {
    .sm2 {
      position: static; } }

.sm3 {
  position: absolute;
  margin: auto;
  left: auto;
  right: 0;
  bottom: 0; }
  @media screen and (max-width: 1024px) {
    .sm3 {
      position: static; } }

/*=====================================================================================================================*/
/*ストーリー*/
.story {
  background: #353535 url("../img/back_02.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden; }

.story_con {
  margin: 5em auto;
  width: 1250px;
  max-width: 98%;
  display: flex;
  justify-content: space-around;
  align-items: baseline; }
  @media screen and (max-width: 1024px) {
    .story_con {
      flex-wrap: wrap;
      margin: 2em auto; } }

/*=====================================================================================================================*/
/*システム*/
.system {
  background: #353535 url("../img/back_03.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden; }

.system_con {
  margin: 5em auto;
  width: 1250px;
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .system_con img {
    margin: 3.5em 0; }
  @media screen and (max-width: 1280px) {
    .system_con {
      margin: 2em auto 3em;
      justify-content: space-around; }
      .system_con img {
        margin: 1.5em 0; } }

/*=====================================================================================================================*/
/* 装備 */
.equip {
  background: black url("../img/back_04.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden; }

.equip_con {
  width: 1250px;
  max-width: 90%;
  margin: 5em auto; }
  @media screen and (max-width: 1280px) {
    .equip_con {
      margin: 2em auto 4em; } }

.e_txt {
  border: 1px #00fff0 solid;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  color: #FFF;
  font-size: 1.15em;
  line-height: 180%;
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) 5px, rgba(0, 0, 0, 0.5) 5px, rgba(0, 0, 0, 0.5) 10px); }
  .e_txt p {
    margin: 1em; }
  @media screen and (max-width: 1280px) {
    .e_txt {
      font-size: 1em; } }

.equip_img {
  display: flex;
  justify-content: space-between; }
  .equip_img img {
    margin: 1em 0; }
  @media screen and (max-width: 1280px) {
    .equip_img {
      flex-wrap: wrap; }
      .equip_img img {
        margin: 0em auto 1em; } }

/*=====================================================================================================================*/
/* スペックとか */
.spec_img {
  text-align: center;
  width: 1250px;
  margin: 0 auto; }
  @media screen and (max-width: 1280px) {
    .spec_img {
      max-width: 90%; } }

.dlbtn_list {
  display: flex;
  justify-content: space-around;
  margin: 50px auto; }
  .dlbtn_list li {
    width: 290px;
    background: rgba(0, 0, 0, 0);
    border: 3px solid #FFF; }
    .dlbtn_list li a img {
      transition: .3s; }
    .dlbtn_list li a img:hover {
      opacity: 0.5; }
  @media screen and (max-width: 1280px) {
    .dlbtn_list {
      flex-wrap: wrap;
      text-align: center; }
      .dlbtn_list li {
        width: 45%;
        margin: 0 auto 20px; } }

/*DLモーダルウィンドウ========================================================================================================*/
.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: 768px) {
    .modal_content {
      width: 80%;
      margin: 0 auto; } }
  @media screen and (max-width: 420px) {
    .modal_content {
      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); }

.open_button {
  text-align: center;
  max-width: 96%;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif; }

.dl_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
.dl_list li {
  color: #FFF;
  width: 150px;
  height: 100px;
  border: 4px #c0a564 solid;
  border-radius: 5px;
  text-align: center;
  margin: 5px 5px;
  font-size: 12px;
  background: white;
  background: -moz-linear-gradient(top, white 0%, #fff7e4 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #fff7e4));
  background: -webkit-linear-gradient(top, white 0%, #fff7e4 100%);
  background: -o-linear-gradient(top, white 0%, #fff7e4 100%);
  background: -ms-linear-gradient(top, white 0%, #fff7e4 100%);
  background: linear-gradient(to bottom, white 0%, #fff7e4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#e8d19b', GradientType=0 );
  box-shadow: 6px 6px rgba(0, 0, 0, 0.4); }
  .dl_list li img {
    height: 70px;
    margin-top: 12px; }
@media screen and (max-width: 768px) {
  .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; }

/*YOUTUBE*/
.youtube_sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .youtube_sp {
      display: block; } }
  @media screen and (max-width: 420px) {
    .youtube_sp {
      display: none; } }

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

/*=====================================================================================================================*/
/* 上に戻るボタン */
.upbtn {
  display: block;
  position: fixed;
  bottom: 5%;
  right: 5%;
  font-size: 77%; }

.upbtn a {
  background: url(../img/up_btn.png) center no-repeat;
  background-size: cover;
  text-decoration: none;
  color: #fff;
  width: 50px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 5px;
  opacity: .2;
  transition: .3s; }

.upbtn a:hover {
  opacity: .8; }

@media screen and (max-width: 768px) {
  #cboxLoadedContent {
    width: 100%; } }

/*=====================================================================================================================*/
/*予約トップ10用*/
.yoyaku_con {
  display: none; }

.dl_bn {
  margin-bottom: 40px; }

.inline_box img {
  display: block;
  margin: 10px auto 20px;
  transition: 0.5s; }
  .inline_box img:hover {
    transform: scale(1.01); }

.topten, .gplink {
  width: 475px;
  background: rgba(255, 255, 255, 0.95);
  margin: 15px auto;
  text-align: center;
  padding: 25px 5px; }
  @media screen and (max-width: 768px) {
    .topten, .gplink {
      width: 300px;
      padding: 25px 0px; } }

.topten ul {
  width: 410px;
  margin: 0 auto;
  display: flex;
  flex-wrap: none;
  justify-content: space-around; }
  @media screen and (max-width: 768px) {
    .topten ul {
      width: 250px; } }
.topten li {
  display: block;
  width: 190px;
  background: #c0a564;
  border-radius: 5px;
  height: 40px;
  margin-top: 20px;
  padding-top: 5%; }
  @media screen and (max-width: 768px) {
    .topten li {
      width: 120px;
      height: 35px;
      padding-top: 10px; } }

.gp_bn {
  width: 180px;
  margin: 20px auto 0;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .gp_bn {
      width: 130px; } }

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

.sns_btn img {
  width: 50px; }

.c_logo {
  width: 450px;
  max-width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around; }

.klogo {
  height: 45px; }

.logo_img {
  height: 50px; }