@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&family=Shippori+Mincho:wght@400;500;600;800&display=swap");
@import url("https://use.typekit.net/nrv5qrb.css");
/*変数(ブレイクポイント)設定(必要に応じて数値を変更)*/
/*------------------------------------------------------------------------------*/
/* 全体設定 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  list-style-type: none;
  -webkit-text-size-adjust: 100%;
  border: none; }

img, a img {
  border: none;
  vertical-align: text-bottom;
  -ms-interpolation-mode: bicubic;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0); }

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  border: none; }

/*画像リンク関連*/
a:active, a:focus {
  outline: none;
  border: none; }

a img {
  border: none;
  outline: none; }

img {
  padding: 0px;
  margin: 0px;
  border: none;
  outline: none; }

/*=====================================================================================================================*/
/*ボディー全体設定*/
html {
  overflow: auto; }

html, body {
  width: 100%; }

body {
  outline: none;
  min-width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #4047a3;
  overflow: hidden auto; }
  @media screen and (max-width: 1024px) {
    body {
      position: relative;
      min-width: 100%;
      width: 100vw; } }

area {
  border: none;
  outline: none; }

a.modal {
  outline: none;
  border: none; }

a {
  text-decoration: none;
  outline: none;
  border: none; }

input[type="text"]:focus {
  outline: 0;
  border-color: orange; }

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

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

/*フォント設定*/
.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; }

/*=====================================================================================================================*/
/*PCメニュー*/
.pc_menu {
  position: fixed;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: 100vw;
  max-width: 100%;
  transition: .5s; }
  @media screen and (max-width: 1024px) {
    .pc_menu {
      display: none; } }

.pc_menu ul {
  display: flex;
  justify-content: flex-end; }
  .pc_menu ul li {
    font-family: gill-sans-nova, sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-right: 1em;
    font-size: 1.1vw;
    height: calc(100vw / 1920 * 60);
    display: flex;
    align-items: center;
    padding-bottom: 1%; }
  .pc_menu ul a {
    color: #FFF;
    transition: .2s; }
  .pc_menu ul a:hover {
    color: #ff9c70; }

.pc_menu.bg_blue {
  background: rgba(64, 67, 131, 0.9); }

.pc_menu .cau a {
  color: yellow; }

/*=====================================================================================================================*/
/*=====================================================================================================================*/
/*折り畳みSPメニュー*/
header {
  display: none; }
  @media screen and (max-width: 1024px) {
    header {
      width: 100%;
      display: block;
      overflow-x: hidden; } }

#nav-toggle {
  position: fixed;
  right: 2vw;
  left: auto;
  top: 2vw;
  height: calc(100vw / 1024 * 90);
  width: calc(90 / 1024 * 100vw);
  z-index: 999;
  background: #ff9c70;
  border-radius: 50%;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  transition: .3s ease-in-out; }
  @media screen and (max-width: 1024px) {
    #nav-toggle {
      display: block; } }
  @media screen and (max-width: 640px) {
    #nav-toggle {
      height: calc(100vw / 1024 * 130);
      width: calc(130 / 1024 * 100vw); } }

#nav-toggle div {
  position: relative;
  height: calc(100vw / 1024 * 90);
  width: calc(90 / 1024 * 100vw);
  display: flex;
  text-align: center;
  filter: box-shadow(0 0 0.75rem #4b2700); }
  @media screen and (max-width: 640px) {
    #nav-toggle div {
      height: calc(100vw / 1024 * 130);
      width: calc(130 / 1024 * 100vw); } }

#nav-toggle span {
  display: block;
  position: absolute;
  margin: auto;
  width: calc(50 / 1024 * 100vw);
  height: calc(100vw / 1024 * 5);
  background: #FFF;
  border-radius: 5px;
  left: 0%;
  right: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out; }
  @media screen and (max-width: 640px) {
    #nav-toggle span {
      width: calc(50 / 1024 * 100vw);
      height: calc(100vw / 1024 * 8); } }

#nav-toggle span:nth-child(1) {
  top: 30%; }

#nav-toggle span:nth-child(2) {
  top: 47.5%; }
  @media screen and (max-width: 420px) {
    #nav-toggle span:nth-child(2) {
      top: 46.5%; } }

#nav-toggle span:nth-child(3) {
  top: auto;
  bottom: 30%; }

.menu {
  position: fixed;
  /* 開いてないときは画面外に配置 */
  margin: auto;
  top: 0px;
  left: 0;
  right: 0;
  background: rgba(255, 156, 112, 0.9);
  width: 100%;
  text-align: center;
  padding: 0px 0;
  transform: translateX(100rem);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  z-index: 100; }
  @media screen and (max-width: 1024px) {
    .menu img {
      display: block;
      max-width: 60%;
      margin: 0 auto; } }

.menu ul {
  position: static;
  right: 0;
  top: 0; }

.menu ul li {
  float: none;
  position: static;
  font-size: 25px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
  color: #FFF; }

.menu ul li:last-child {
  border-bottom: none; }

.menu ul li a {
  width: 100%;
  display: block;
  color: #404383;
  padding: 15px 0;
  font-family: gill-sans-nova, sans-serif; }

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle {
  background: #FFF; }

.open #nav-toggle span {
  background: #4047a3; }

.open #nav-toggle span:nth-child(1) {
  top: 48%;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg); }

.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%; }

.open #nav-toggle span:nth-child(3) {
  top: 48%;
  bottom: auto;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg); }

/* #global-nav スライドアニメーション */
.open .menu {
  /* #global-nav top + #mobile-head height */
  right: 0px;
  transform: translateX(0rem); }

/*SP折り畳みメニュー終了==================================================================================================*/
/*=====================================================================================================================*/
/*bg*/
.g_back {
  background: url("../../ja/img/back.png") top right;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  position: fixed;
  z-index: -1; }

#dust1 img, #dust2 img, #dust3 img, #dust4 img {
  position: absolute;
  width: calc(228 / 1920 * 100vw);
  margin: auto; }
@media screen and (max-width: 1024px) {
  #dust1 img, #dust2 img, #dust3 img, #dust4 img {
    position: absolute;
    width: calc(228 / 1024 * 100vw);
    margin: auto; } }

#dust1 img {
  top: 10%;
  left: 5%; }

#dust2 img {
  bottom: 5%;
  left: 25%; }

#dust3 {
  bottom: 0%;
  right: 5%; }
  #dust3 img {
    bottom: 0%;
    right: 5%; }

#dust4 img {
  top: -10%;
  right: 35%; }

/*=====================================================================================================================*/
/*TOPメイン画像関連（パーツ増やしたり減らしたり）================================================================================*/
.main_img {
  background: url("../../ja/img/title_bg.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100vw;
  height: calc(100vw / 1920 * 990);
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 1024px) {
    .main_img {
      background: url("../../ja/img/top_sp.jpg") top center no-repeat;
      background-size: contain;
      height: calc(100vw / 1024 * 1336); } }

.catch img {
  position: absolute;
  top: 25%;
  left: 10%;
  width: calc(347 / 1920 * 100vw); }
  @media screen and (max-width: 1024px) {
    .catch img {
      margin: auto;
      top: 5%;
      left: 0;
      right: 0;
      width: 70%; } }

.tc_logo {
  position: absolute;
  top: .5vw;
  left: 2vw;
  z-index: 200;
  height: calc(100vw / 1920 * 60);
  display: block; }
  @media screen and (max-width: 1024px) {
    .tc_logo {
      height: calc(100vw / 1024 * 80); } }

.t_sale {
  position: absolute;
  text-align: center;
  z-index: 30;
  margin: 0 auto;
  bottom: 60px;
  left: 0;
  right: 0;
  background: rgba(14, 25, 75, 0.82);
  border-radius: 9999px;
  border: #a4b3b9 solid 2px;
  width: calc(1000 / 1920 * 100vw); }
  .t_sale div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(100vw / 1920 * 80); }
  .t_sale img {
    height: calc(100vw / 1920 * 38);
    transition: .2s; }
  .t_sale a img {
    transition: .2s; }
  .t_sale a img:hover {
    opacity: 0.5; }
  @media screen and (max-width: 1024px) {
    .t_sale {
      border-radius: 30px;
      flex-wrap: wrap;
      width: 80%;
      height: auto; }
      .t_sale div {
        margin: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        height: auto; }
      .t_sale img {
        height: calc(100vw / 1024 * 50);
        transition: .2s;
        display: block;
        margin: 0 1rem; } }
  @media screen and (max-width: 640px) {
    .t_sale {
      bottom: 5%;
      border-radius: 10px; }
      .t_sale img {
        height: calc(100vw / 1024 * 55);
        transition: .2s;
        margin: 0 1rem .5rem; }
      .t_sale img:nth-child(3), .t_sale img:nth-child(4) {
        margin: 0 1rem 0rem; } }
  @media screen and (max-width: 360px) {
    .t_sale {
      bottom: 5%;
      border-radius: 10px; }
      .t_sale div {
        margin: 0.5rem; }
      .t_sale img {
        height: calc(100vw / 1024 * 50);
        transition: .2s;
        margin: 0 .5rem .5rem; }
      .t_sale img:nth-child(3), .t_sale img:nth-child(4) {
        margin: 0 1rem 0rem; } }

.g_title {
  position: absolute;
  z-index: 20;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 20%;
  height: calc(100vw / 1920 * 252); }
  @media screen and (max-width: 1024px) {
    .g_title {
      bottom: 25%;
      height: calc(100vw / 1024 * 252); } }

.spmain {
  display: none; }
  .spmain img {
    max-width: 100%; }
  @media screen and (max-width: 1024px) {
    .spmain {
      display: block; } }

.extra_link {
  position: absolute;
  z-index: 20;
  margin: auto;
  right: 8%;
  bottom: 6%;
  height: calc(100vw / 1920 * 300);
  transition: .3s;
  transform: rotate(4deg);
  filter: drop-shadow(5px 5px 0px #b2b7ee); }
  .extra_link:hover {
    transform: scale(1.05); }
  @media screen and (max-width: 1024px) {
    .extra_link {
      display: none; } }

.sp_extrabn {
  display: none; }
  @media screen and (max-width: 1024px) {
    .sp_extrabn {
      display: flex;
      background: rgba(222, 212, 244, 0.4);
      overflow: hidden;
      justify-content: center;
      align-items: center;
      align-self: flex-start;
      font-size: 4vw;
      margin: 0 0 5vh; }
      .sp_extrabn img {
        width: 100%; } }

/*PCメヌー--------------------------------------------------------------------------------------------------------------*/
/*PV部分================================================================================*/
#trairer {
  margin: 5rem auto 10rem; }
  #trairer h2 {
    margin-bottom: 5rem; }
  #trairer img {
    display: block;
    margin: 0 auto;
    max-width: 100%; }
  @media screen and (max-width: 800px) {
    #trairer {
      margin: 5rem auto 5rem; }
      #trairer h2 {
        margin-bottom: 1rem; }
      #trairer img {
        width: 80%; } }

/*=====================================================================================================================*/
/*ストーリー部分================================================================================*/
h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0 2rem;
  font-size: 3.2rem;
  font-family: gill-sans-nova, sans-serif;
  letter-spacing: 0.5rem; }
  @media screen and (max-width: 1024px) {
    h2 {
      font-size: 2rem;
      letter-spacing: 0.2rem; } }

section h2::before {
  display: block;
  content: " ";
  height: 2px;
  width: calc((100% - 1200px) / 2 - 20px);
  min-width: 20px;
  background: #31367b;
  margin-right: 20px;
  margin-top: calc(100vw / 1920 * 15); }

section h2::after {
  content: "";
  display: block;
  margin-left: 10px;
  width: 2rem;
  height: 3rem;
  background: url("../img/line_accent_moon.svg") no-repeat;
  background-position: left 60%;
  background-size: 2rem; }

#story {
  margin: 3rem auto 5rem;
  overflow-x: hidden; }

#story, #character, #gallery, #extra, #infomation {
  padding-top: 5rem; }
  @media screen and (max-width: 1024px) {
    #story, #character, #gallery, #extra, #infomation {
      padding-top: 0rem; } }

.st_0, .st_1, .st_2, .st_3, .st_4 {
  margin: 0 auto 10rem; }
  .st_0 img, .st_1 img, .st_2 img, .st_3 img, .st_4 img {
    max-width: 100%; }
  .st_0 p, .st_1 p, .st_2 p, .st_3 p, .st_4 p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 240%; }
  @media screen and (max-width: 1280px) {
    .st_0 p, .st_1 p, .st_2 p, .st_3 p, .st_4 p {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      line-height: 180%; } }
  @media screen and (max-width: 1024px) {
    .st_0, .st_1, .st_2, .st_3, .st_4 {
      margin: 0 auto 5rem; }
      .st_0 p, .st_1 p, .st_2 p, .st_3 p, .st_4 p {
        font-size: 1.2rem;
        margin-bottom: 1rem; } }

.st_0 {
  width: calc(1400 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center; }
  .st_0 img {
    border-radius: 10px;
    display: block;
    width: 720px;
    max-width: 100%; }
  @media screen and (max-width: 1280px) {
    .st_0 {
      width: calc(1100 / 1280 * 100vw); }
      .st_0 img {
        width: calc(720 / 1280 * 100vw);
        border-radius: 10px;
        display: block;
        max-width: 100%; } }
  @media screen and (max-width: 1024px) {
    .st_0 {
      width: 90%;
      display: block; }
      .st_0 img {
        width: calc(800 / 1024 * 100vw);
        border-radius: 10px;
        display: block;
        margin-left: 30%; } }

.st_1 {
  width: calc(1400 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  align-items: center; }
  .st_1 p {
    margin-left: 1rem; }
  .st_1 img {
    width: calc(720 / 1920 * 100vw);
    border-radius: 10px;
    display: block;
    max-width: 100%; }
  @media screen and (max-width: 1280px) {
    .st_1 {
      width: calc(1100 / 1280 * 100vw); }
      .st_1 img {
        width: calc(720 / 1280 * 100vw);
        border-radius: 10px;
        display: block;
        max-width: 100%; } }
  @media screen and (max-width: 1024px) {
    .st_1 {
      width: 90%;
      display: block; }
      .st_1 img {
        width: calc(800 / 1024 * 100vw);
        border-radius: 10px;
        display: block;
        margin-left: -20%; } }

.st_2 {
  background: url("../../ja/img/story_02.jpg") center bottom;
  background-size: cover;
  text-align: center;
  color: #FFF;
  overflow: hidden;
  margin: 2rem auto 5rem; }
  .st_2 p {
    width: calc(1200 / 1920 * 100vw);
    text-align: center;
    margin: 8rem auto;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.3); }
    .st_2 p span {
      font-family: 'Shippori Mincho', serif;
      font-weight: 600; }
  @media screen and (max-width: 1024px) {
    .st_2 p {
      margin: 5rem auto;
      width: 90%; } }

.st_3 {
  margin-top: 1rem;
  width: calc(1400 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center; }
  .st_3 p {
    margin-right: 1rem; }
  .st_3 img {
    display: block;
    max-width: 100%;
    margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .st_3 {
      text-align: center;
      width: 90%;
      display: block; } }

.st_4 {
  width: calc(1400 / 1920 * 100vw);
  text-align: center; }
  .st_4 p {
    margin-top: 3rem; }
  .st_4 img {
    display: block;
    margin: 0 auto;
    width: 1280px;
    max-width: 100%;
    border-radius: 10px; }
  @media screen and (max-width: 1024px) {
    .st_4 {
      width: 90%;
      display: block; }
      .st_4 img {
        width: 100%; } }

/*=====================================================================================================================*/
/*キャラクター部分================================================================================*/
.icon_slider {
  margin: 0 auto 3rem;
  width: calc(1100 / 1920 * 100vw);
  display: flex;
  justify-content: space-around; }
  .icon_slider li {
    width: calc(150 / 1920 * 100vw) !important;
    height: calc(100vw / 1920 * 150) !important;
    border-radius: 50%;
    background: #e8eafb;
    overflow: hidden;
    margin-right: 2rem;
    transition: .3s; }
    .icon_slider li:last-child {
      margin-right: 0; }
    .icon_slider li:hover {
      background: #ff9c70; }
    .icon_slider li img {
      width: 100%; }
  @media screen and (max-width: 1024px) {
    .icon_slider {
      width: 700px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 auto; }
      .icon_slider li {
        margin-bottom: .3rem;
        margin-right: 1rem;
        margin-left: 1rem;
        width: calc(200 / 1024 * 100vw) !important;
        height: calc(100vw / 1024 * 200) !important; } }
  @media screen and (max-width: 800px) {
    .icon_slider {
      width: 550px; } }
  @media screen and (max-width: 640px) {
    .icon_slider {
      width: 85%;
      margin: 0 auto 1rem; }
      .icon_slider li {
        margin-right: 1rem;
        margin-left: 1rem; } }
  @media screen and (max-width: 360px) {
    .icon_slider {
      width: 95%; } }

.icon_slider li.slick-current {
  background: #ff9c70; }

.chara_main {
  width: 100%;
  background: #e8eafb;
  height: auto;
  margin: 0 auto 10rem; }
  @media screen and (max-width: 1024px) {
    .chara_main {
      height: auto;
      overflow: hidden; } }

.chara_list {
  width: calc(1200 / 1920 * 100vw);
  margin: 0 auto;
  padding: 0; }
  .chara_list li {
    margin: 0;
    padding: 0; }
  @media screen and (max-width: 1024px) {
    .chara_list {
      width: 100%; } }

.chara_con {
  display: flex;
  align-items: flex-start; }
  .chara_con img {
    max-width: 100%; }
  @media screen and (max-width: 1024px) {
    .chara_con {
      display: block; }
      .chara_con img {
        display: block;
        margin: 0 auto;
        width: 60%; } }
  @media screen and (max-width: 640px) {
    .chara_con img {
      width: 70%; } }

.chara_con .text {
  width: 80%;
  margin-top: 10rem; }
  @media screen and (max-width: 1024px) {
    .chara_con .text {
      width: 60%;
      margin: 0 auto; } }
  @media screen and (max-width: 640px) {
    .chara_con .text {
      width: 90%;
      margin: 0 auto; } }

h4 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 2vw;
  border-left: solid 15px #4047a3;
  /*左線（実線 太さ 色）*/
  padding-bottom: .5rem;
  padding-top: 0;
  padding-left: .5rem;
  margin-bottom: .5rem; }
  h4 p {
    margin-left: .8rem;
    font-weight: 700;
    font-size: 1.3vw; }
  @media screen and (max-width: 1024px) {
    h4 {
      margin-top: 1rem;
      margin-bottom: 0rem;
      font-size: 2rem;
      border-left: solid 10px #4047a3;
      /*左線（実線 太さ 色）*/ }
      h4 p {
        margin-left: 0rem;
        font-size: 1.3rem; } }
  @media screen and (max-width: 640px) {
    h4 {
      font-size: 1.8rem; } }

.cv_name {
  margin-left: 0rem;
  margin-bottom: 1rem;
  font-size: 1.2rem; }

.caption p {
  font-weight: 300;
  font-size: 1.3vw;
  margin-bottom: 1.3rem; }
@media screen and (max-width: 1024px) {
  .caption p {
    font-size: 1.2rem;
    margin: 1rem auto 2rem; } }

.kiriko {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 1.3vw; }
  @media screen and (max-width: 1024px) {
    .kiriko {
      font-size: 1rem; } }

/*キャラクタースライダー矢印設定*/
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  margin: auto;
  display: block;
  width: calc(47 / 1920 * 100vw);
  height: calc(100vw / 1920 * 87);
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 10; }
  @media screen and (max-width: 1024px) {
    .slick-prev, .slick-next {
      width: calc(47 / 1024 * 100vw);
      height: calc(100vw / 1024 * 87);
      top: 35%; } }

.slick-prev {
  left: -5rem;
  background: url("../img/arrow_l.svg") no-repeat;
  background-size: cover;
  transition: .2s;
  opacity: .7;
  transform: scale(0.9); }
  .slick-prev:hover {
    opacity: 1;
    transform: scale(1); }
  @media screen and (max-width: 1024px) {
    .slick-prev {
      left: 0; } }

.slick-next {
  right: -5rem;
  background: url("../img/arrow_r.svg") no-repeat;
  background-size: cover;
  transition: .2s;
  opacity: .7;
  transform: scale(0.9); }
  .slick-next:hover {
    opacity: 1;
    transform: scale(1); }
  @media screen and (max-width: 1024px) {
    .slick-next {
      right: 0; } }

/*Gallery=================================================================================================================*/
.gallery {
  display: flex;
  width: calc(1280 / 1920 * 100vw);
  margin: 0 auto 5rem;
  flex-wrap: wrap;
  justify-content: space-around; }
  .gallery div {
    width: calc(410 / 1920 * 100vw);
    margin: 0 auto 2rem; }
  @media screen and (max-width: 1024px) {
    .gallery {
      width: 90%; }
      .gallery div {
        width: calc(410 / 1024 * 100vw); } }

.thumb {
  border-radius: 10px;
  width: 100%; }

.mfp-counter {
  display: none; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  display: block;
  width: calc(47 / 1920 * 100vw);
  height: calc(100vw / 1920 * 87);
  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  z-index: 999; }
  @media screen and (max-width: 1024px) {
    .gallery-arrow {
      width: calc(47 / 900 * 100vw);
      height: calc(100vw / 900 * 87); } }

.gallery-arrow-left {
  left: 3rem;
  background: url("../img/arrow_l.svg") no-repeat;
  background-size: cover;
  transition: .2s;
  opacity: .7;
  transform: scale(0.9); }
  .gallery-arrow-left:hover {
    opacity: 1;
    transform: scale(1); }
  @media screen and (max-width: 1024px) {
    .gallery-arrow-left {
      left: 0rem;
      right: auto; } }

.gallery-arrow-right {
  right: 3rem;
  background: url("../img/arrow_r.svg") no-repeat;
  background-size: cover;
  transition: .2s;
  opacity: .7;
  transform: scale(0.9); }
  .gallery-arrow-right:hover {
    opacity: 1;
    transform: scale(1); }
  @media screen and (max-width: 1024px) {
    .gallery-arrow-right {
      right: 0rem;
      left: auto; } }

.gallery-arrow-right:before {
  content: ''; }

.mfp-bg {
  background-color: rgba(30, 50, 50, 0.3); }

.mfp-container {
  padding-left: 1rem;
  padding-right: 1rem; }

/*=====================================================================================================================*/
/*追加要素===========================================================================================================*/
#extra .m_con {
  width: 100%;
  background: #34377a;
  padding: 3rem 0;
  display: flex;
  margin: 0 auto 5rem;
  justify-content: center;
  color: #FFF;
  overflow: hidden; }
  #extra .m_con img {
    max-width: 100%;
    filter: drop-shadow(10px 10px 0px #b2b7ee); }
  @media screen and (max-width: 1024px) {
    #extra .m_con {
      display: block; }
      #extra .m_con img {
        max-width: 100%;
        display: block;
        margin: 0 auto; } }

.extra_txt {
  width: calc(700 / 1920 * 100vw);
  font-size: 1.6rem;
  margin-left: 3rem; }
  .extra_txt h3 {
    margin: 0 auto 1em;
    padding: .5rem;
    background: #FFF;
    font-size: 2vw;
    position: relative;
    color: #34377a;
    font-family: 'Shippori Mincho', serif;
    font-weight: 800;
    text-align: center; }
  .extra_txt h3::after {
    border: 2px solid #FFF;
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 100%;
    height: 100%;
    z-index: 0; }
  .extra_txt p {
    line-height: 250%;
    letter-spacing: .3rem; }
  .extra_txt span {
    color: #fecb52;
    font-weight: bold; }
  @media screen and (max-width: 1024px) {
    .extra_txt {
      width: 80%;
      margin: 2rem auto 0;
      font-size: 2rem; }
      .extra_txt h3 {
        font-size: 2rem; }
      .extra_txt p {
        line-height: 180%;
        letter-spacing: .1rem; } }
  @media screen and (max-width: 640px) {
    .extra_txt {
      font-size: 1.4rem;
      line-height: 180%; } }

/*スペック===========================================================================================================*/
#infomation .m_con {
  width: 100%;
  padding: 3rem 0;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 800px) {
    #infomation .m_con {
      display: block;
      padding: 0rem 0; } }

.info_con {
  margin-left: 2rem; }
  @media screen and (max-width: 800px) {
    .info_con {
      margin-left: 0rem;
      width: 70%;
      margin: 2rem auto; } }
  @media screen and (max-width: 640px) {
    .info_con {
      width: 90%; } }

.ap_icon {
  filter: drop-shadow(10px 10px 0px #b2b7ee);
  max-width: 100%; }
  @media screen and (max-width: 800px) {
    .ap_icon {
      display: block;
      width: 80%;
      margin: 0 auto; } }

.game_title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto 2rem; }
  .game_title p {
    background: #34377a;
    color: #FFF;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    text-align: center;
    padding: 1px 0 2px;
    width: 150px;
    margin-top: 5px;
    margin-right: 1rem;
    letter-spacing: .5em; }
  .game_title span {
    font-family: 'Shippori Mincho', serif;
    font-weight: bold;
    color: #34377a;
    font-size: 2.5rem; }
  @media screen and (max-width: 800px) {
    .game_title {
      margin: 0 auto 1rem; }
      .game_title p {
        margin-right: .5rem;
        font-size: .8rem;
        width: 100px; }
      .game_title span {
        font-size: 1.5rem; } }

.specification {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 1rem auto 3rem; }
  .specification p {
    background: #34377a;
    color: #FFF;
    font-size: 1rem;
    text-align: center;
    padding: 1px 0 2px;
    width: 150px;
    margin-top: 5px;
    margin-right: 1.2rem;
    letter-spacing: .2em; }
  .specification span {
    color: #34377a;
    font-size: 1.2rem; }
  @media screen and (max-width: 800px) {
    .specification {
      margin: 1rem auto 1rem; }
      .specification p {
        margin-right: .5rem;
        font-size: .8rem;
        width: 100px; }
      .specification span {
        font-size: 1rem; } }

.specification1 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 1rem auto 3rem; }
  .specification1 p {
    background: #34377a;
    color: #FFF;
    font-size: 1rem;
    text-align: center;
    padding: 1px 0 2px;
    width: 150px;
    margin-top: 5px;
    margin-right: 1.2rem;
    letter-spacing: .5em; }
  .specification1 span {
    color: #34377a;
    font-size: 1.2rem;
    line-height: 2.5rem; }
  @media screen and (max-width: 800px) {
    .specification1 {
      margin: 1rem auto 1rem; }
      .specification1 p {
        margin-right: .5rem;
        font-size: .8rem;
        width: 100px; }
      .specification1 span {
        font-size: .9rem;
        line-height: 1.8rem; } }

/*ガイドライン設定===========================================================================================================*/
.guideline {
  display: block;
  border: 3px solid #34377a;
  background: #FFF;
  width: calc(510 / 1920 * 100vw);
  text-align: center;
  font-weight: bold;
  margin: 5rem auto;
  padding-bottom: 1rem;
  transition: .3s; }
  .guideline a {
    display: block; }
  .guideline div {
    font-size: 3rem;
    font-family: gill-sans-nova, sans-serif; }
  .guideline p {
    margin: 0 auto 1rem; }
  .guideline span {
    position: relative;
    font-size: 1.2rem; }
  .guideline span::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #34377a;
    border-right: 0;
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    margin: auto; }
  .guideline span::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #34377a;
    border-left: 0;
    position: absolute;
    right: -1rem;
    top: 0;
    bottom: 0;
    margin: auto; }
  @media screen and (max-width: 1024px) {
    .guideline {
      width: 400px; }
      .guideline div {
        font-size: 2rem;
        font-family: gill-sans-nova, sans-serif; }
      .guideline p {
        margin: 0 auto 1rem; }
      .guideline span {
        position: relative;
        font-size: 1.2rem; } }
  @media screen and (max-width: 640px) {
    .guideline {
      width: 300px; } }

.guideline a {
  transition: .3s; }
  .guideline a div {
    color: #34377a; }
  .guideline a p {
    color: #34377a; }
  .guideline a span {
    color: #34377a; }

.guideline:hover {
  opacity: .5; }

/*=====================================================================================================================*/
/*SNS系統設定===========================================================================================================*/
.sns_btn {
  display: -webkit-flex;
  display: flex;
  max-width: 300px;
  margin: 20px auto;
  text-align: center; }
  .sns_btn li {
    flex-grow: 2;
    -webkit-flex-grow: 1;
    /* Safari */ }
    .sns_btn li img {
      width: 50px; }

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

.terminal {
  max-width: 800px; }

.mcau {
  margin: .5rem auto 0;
  width: calc(850 / 1920 * 100vw); }
  @media screen and (max-width: 1024px) {
    .mcau {
      width: calc(850 / 1024 * 100vw); } }

.kmclogo img {
  display: block;
  margin: 5px auto; }

.pf-img img {
  opacity: 1; }

.pflist_long {
  margin-top: 5px; }

hr {
  background: #e8eafb; }

.tlist-last span {
  font-size: 10px; }

.tlist_sp .pflist_l, .tlist_sps .pflist_l, .tlist-last_sp .pflist_l, .tlist_spss .pflist_l {
  background: #FFF;
  color: #090023; }

/*各種項目名背景色変更*/
.c-logo {
  width: 400px;
  max-width: 100%;
  margin: .5rem auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  overflow: hidden; }
  .c-logo img {
    height: calc(100vw / 1920 * 50); }
  @media screen and (max-width: 1024px) {
    .c-logo {
      width: 60%; }
      .c-logo img {
        height: calc(100vw / 1024 * 60); } }
  @media screen and (max-width: 800px) {
    .c-logo {
      width: 70%;
      max-width: 100%; } }

.copy2 {
  margin-bottom: 5rem;
  text-align: center;
  font-size: 10px; }

/*=====================================================================================================================*/
/*ダウンロードボタン*/
.dlbtn {
  display: block;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 80;
  transition: .3s; }
  .dlbtn:hover {
    transform: scale(1.03); }

/*DLモーダルウィンドウ========================================================================================================*/
.open_dl {
  display: none; }
  @media screen and (max-width: 1024px) {
    .open_dl {
      display: block;
      margin: 25px auto;
      text-align: center; }
      .open_dl img {
        max-width: 90%; } }
  @media screen and (max-width: 800px) {
    .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: 640px) {
    .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;
  margin: 0 auto; }
  .open_button img {
    width: calc(250 / 1920 * 100vw); }
  @media screen and (max-width: 1024px) {
    .open_button img {
      width: calc(310 / 1024 * 100vw); } }
  @media screen and (max-width: 1024px) {
    .open_button img {
      width: calc(310 / 800 * 100vw); } }

.dl_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
.dl_list li {
  color: #FFF;
  width: 150px;
  height: 100px;
  border: 4px white double;
  border-radius: 5px;
  text-align: center;
  margin: 5px 5px;
  font-size: 12px;
  background: #34377a;
  box-shadow: 6px 6px rgba(106, 110, 163, 0.5); }
  .dl_list li img {
    height: 70px;
    margin-top: 12px; }
@media screen and (max-width: 640px) {
  .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: 640px) {
    .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; } }