@charset "UTF-8";
@media screen and (max-width: 667px) {
  /* Magnific Popup CSS */
  .mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #fff;
    opacity: 1;
  }
  button.mfp-close {
    width: 50px;
    height: 50px;
    background: url("../_chara/btn_close@2x.png") no-repeat center top/100% auto;
    position: absolute;
    font-size: 0;
    right: 8px;
    top: 16px;
  }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 0.8;
  }
  .mfp-close:active {
    top: 16px;
  }
  /*------------------------------------------------------*/
  /*SP設定------------------------------------------------*/
  /*全体背景*/
  #chara {
    background: url("../_chara/bg.png") no-repeat center top 100px/1024px auto;
    padding: 30px 0 30px;
    box-sizing: border-box;
    overflow: hidden;
  }
  /*魔法陣背景*/
  #chara article {
    position: relative;
    width: 100%;
    height: auto;
    background: url("../_chara/bg_chara.png") no-repeat center top/110% auto;
    margin: 0 auto;
    padding-bottom: calc(800 / 782 * 110%);
  }
    #lower #chara h2 {
  margin: 0 auto;
}
  /*------------------------------------------------------*/
  /*キャラクター配置*/
  /*------------------------------------------------------*/
  /*ミラ*/
  .chara01 {
    width: 66%;
    height: 0;
    background: url("../_chara/chara01@2x.png") no-repeat left top/100% auto;
    margin-left: -33.5%;
    padding-bottom: calc(100% * 500/750);
    top: 20%;
    left: 50%;
    z-index: 2;
  }
  /*ソロモン*/
  .chara02 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara02@2x.png") no-repeat left top/100% auto;
    margin-left: -16%;
    padding-bottom: calc(100% * 200/750);
    top: 0%;
    left: 50%;
    z-index: 1;
  }
/*ソロモン：オンマウス*/
.chara02:hover,.chara02:active {
    width: 32%;
    height: 0;
    background: url("../_chara/chara02_bg_on_@2x.png") no-repeat left top/100% auto;
    margin-left: -16%;
    padding-bottom: calc(100% * 200/750);
    top: 0%;
    left: 50%;
    z-index: 1;
     -webkit-transform: scale(1.03) !important;
  transform: scale(1.03) !important;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  }

  /*ルミナリア*/
  .chara03 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara03@2x.png") no-repeat left top/100% auto;
    margin-left: 0%;
    padding-bottom: calc(100% * 220/750);
    top: 6%;
    left: 60%;
    z-index: 1;
  }
  /*エメラ*/
  .chara04 {
    width: 24%;
    height: 0;
    background: url("../_chara/chara04@2x.png") no-repeat left top/100% auto;
    margin-top: -30%;
    margin-left: 27%;
    padding-bottom: calc(100% * 250/750);
    top: 50%;
    left: 50%;
    z-index: 3;
  }
  /*フリッカ*/
  .chara05 {
    width: 25%;
    height: 0;
    background: url("../_chara/chara05@2x.png") no-repeat left top/100% auto;
    margin-top: 0%;
    margin-left: 27%;
    padding-bottom: calc(100% * 250/750);
    top: 50%;
    left: 50%;
    z-index: 3;
  }
  /*アスバル*/
  .chara06 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara06@2x.png") no-repeat left top/100% auto;
    margin-top: 0;
    margin-left: 0;
    padding-bottom: calc(100% * 220/750);
    top: 68.5%;
    left: 60.5%;
    z-index: 3;
  }
  /*ゼフ*/
  .chara07 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara07@2x.png") no-repeat left top/100% auto;
    margin-top: 0;
    margin-left: -16%;
    padding-bottom: calc(100% * 200/750);
    top: 79.5%;
    left: 50%;
    z-index: 3;
  }
  /*タクト*/
  .chara08 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara08@2x.png") no-repeat left top/100% auto;
    margin-top: 0;
    margin-left: 0;
    padding-bottom: calc(100% * 220/750);
    top: 68.5%;
    left: 8.5%;
    z-index: 3;
  }
  /*マリアナ*/
  .chara09 {
    width: 25%;
    height: 0;
    background: url("../_chara/chara09@2x.png") no-repeat left top/100% auto;
    margin-top: 1%;
    margin-left: -52%;
    padding-bottom: calc(100% * 250/750);
    top: 50%;
    left: 50%;
    z-index: 3;
  }
  /*アマラッテ*/
  .chara10 {
    width: 26%;
    height: 0;
    background: url("../_chara/chara10@2x.png") no-repeat left top/100% auto;
    margin-top: -30%;
    margin-left: -53%;
    padding-bottom: calc(100% * 250/750);
    top: 50%;
    left: 50%;
    z-index: 3;
  }
  /*ダンブルフ*/
  .chara11 {
    width: 32%;
    height: 0;
    background: url("../_chara/chara11@2x.png") no-repeat left top/100% auto;
    margin-top: 0;
    margin-left: 0;
    padding-bottom: calc(100% * 230/750);
    top: 7%;
    left: 8%;
    z-index: 3;
  }
    
       /*ミラ*/
  .chara01L,.chara01L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara01L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
           /*ミラ*/
  .chara02L,.chara02L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara02L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
               /*ミラ*/
  .chara03L,.chara03L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara03L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
                   /*ミラ*/
  .chara04L,.chara04L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara04L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
                       /*ミラ*/
  .chara05L,.chara05L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara05L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
        
                       /*ミラ*/
  .chara06L,.chara06L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara06L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
                           /*ミラ*/
  .chara07L,.chara07L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara07L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
                               /*ミラ*/
  .chara08L,.chara08L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara08L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
                                   /*ミラ*/
  .chara09L,.chara09L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara09L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
       .chara10L,.chara10L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara10L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
    
    
          .chara11L,.chara11L:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara11L@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    
    
    
      /*クレオス*/
  .chara12,.chara12:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara12@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara13,.chara13:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara13@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara14,.chara14:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara14@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara15,.chara15:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara15@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara16,.chara16:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara16@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara17,.chara17:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara17@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara18,.chara18:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara18@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara19,.chara19:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara19@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara20,.chara20:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara20@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara21,.chara21:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara21@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
      /*クレオス*/
  .chara22,.chara22:hover {
   width: 100%;
    height: 0;
    background: url("../_chara/chara22@2x.png") no-repeat left top/100% auto;
    margin: 0 auto;
    padding-bottom: calc(100% * 276/236);
  }
    

    
    
/*------------------------------------------------------*/
/*追加キャラクター*/
/*------------------------------------------------------*/
/*追加キャラクター背景*/
div.sub {
  display: inline-block;
    width: 94%;
  background: #FFF;
  margin: -12px auto -8px;
  padding: 6px;
 
  box-sizing: border-box;
  text-align: left;
  border-radius: 18px;
}
/*追加キャラクターリスト*/
div.sub ul {
  margin: 0 auto;
  padding: 8px;
  font-size: 0;
    text-align: center;
}
/*追加キャラクターリスト*/
div.sub ul li {
  position: relative;
  display: inline-block;
  width: 23.8%;
  height: 0px;
  margin: 2px;
  padding: 0;
  padding-bottom: calc(100% * 220/750);
  font-size: 0;
    
}
    
    /*下層ページ*/
#lower #chara {
  background: none;
  text-align: center;
}
    
    
  /*------------------------------------------------------*/
  /*詳細レイアウト*/
  /*------------------------------------------------------*/
  /*基本レイアウト：背景画像設定*/
  .pop,  #lower .pop {
    border: 1px solid #FFF;
    position: relative;
    width: 100%;
    height: auto;
    background: url("../_chara/bgPop@2x.png") no-repeat left top/100% auto;
    margin: 60px auto 0;
  }
        /*下層ページ*/
#lower #chara .pop {
margin: 0;
    text-align: left;
}
   
  /*画像*/
  .popPh {
    position: relative;
    width: 100%;
    height: auto;
    margin: -20% auto -25%;
    padding-bottom: calc(100% * 170/750);
    z-index: 2;
  }
    
      /*画像*/
  #lower .popPh {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto -25%;
    padding-bottom: calc(100% * 170/750);
    z-index: 2;
  }
    

    
    
      .popPh .swiper-wrapper .swiper-slide img {
    max-width: 145%;
    margin: 0 auto 0 -30%;
  }
    
      img.oLow {
    max-width: 145%;
    margin: 0 auto 0 -30%;
  }
    
  /*テキスト*/
  .popTxt {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: auto;
    width: 100%;
    height: auto;
    padding: 24px 24px 48px;
    box-sizing: border-box;
    background: #f0f0f0;
    /*リュウミン*/
    font-family: a-otf-futo-min-a101-pr6n, serif;
    font-weight: 400;
    font-style: normal;
    float: right;
    z-index: 10;
  }
  /*テキスト*/
  .popTxt strong {
    display: block;
    font-size: 32px;
  }
  /*テキスト*/
  .popTxt em {
    display: block;
    padding: 8px 0 16px;
    font-size: 15px;
    letter-spacing: 0.2em;
  }
  /*テキスト*/
  .popTxt p {
    width: 100%;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }
  /*pop内ナビ*/
  .slider-thumbnail {
    position: relative;
    width: 240px;
    margin: 0 auto 24px;
    top: auto;
    right: auto;
    font-size: 0;
    z-index: 10;
  }
  .slider-thumbnail .swiper-wrapper .swiper-slide img {
    max-width: 90%;
    margin: 0 auto;
  }
  .slider-thumbnail .swiper-wrapper .swiper-slide img:hover {
    opacity: 0.6;
  }
  .slider-thumbnail .swiper-wrapper .swiper-slide-thumb-active {
    opacity: 0.6;
  }
  /*スライド外を非表示*/
  .swiper-container {
    overflow: hidden;
  }
  /*-----------------------------------------------------*/
  /*高解像度ディスプレイ用設定*/
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    /*---------------------------------------------end@media*/
  }
  /*---------------------------------------------end@media*/
}