@charset "UTF-8";

/* = pc
-------------------------------------------------------------- */
.pcArea{display: block;}
.spArea{display: none;}
@media screen and (max-width: 900px) {
.pcArea{display: none;}
.spArea{display: block;}
}

body{
    background: #54aad6;
    height: 100%;}

@media screen and (min-width: 900px) {
 a img:hover, #pcWarn .close:hover{
    opacity: 0.70;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
}
}

@media screen and (min-width: 900px) {
body:before {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/pc/pc_bg.png") no-repeat top/100%;
  background-size: 100%;
}
body:after {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #54aad6;
  z-index: -1;
}
	.pcLeft{
		width: calc((100% - 420px) / 2);
		position: fixed;
		left: 0;
		height: 100%;
	}
	.pcLeft .logoArea{
		margin: 0 auto 0;
		width: 350px;
		position: relative;
		height: 100%;
		top: 35vh;
	}
	.pcRight{
		width: calc((100% - 420px) / 2);
		position: fixed;
		right: 0;
		height: 100%;
	}
	.pcRight .headerPlay{
		margin: 0 auto 0;
		width: 220px;
		position: relative;
		height: 100%;
		top: 25%;
	}
#wrapper {
  width: 420px;
  margin: 0 auto;
  text-align: center;
  background: #54aad6;
  box-shadow: 0px 0px 20px 5px #14375d;
}
}

/* = header
-------------------------------------------------------------- */
header { position: relative; padding-top: 221%; background-color: #161616; overflow: hidden;}
header h1 { position: absolute; width: 71.3%; left: 0; right: 0; margin: auto; top: 0.6%; z-index: 99;}
header .top_text { position: absolute; width: 93.0%; left: 2.8%; top: 55.3%; z-index: 99;}
header .kv { position: absolute; width: 100%; left: 0; right: 0; margin: auto; top: 3%; z-index: 0; }
header .btn_game { position: absolute; width: 37%; right: 0%; top: 43.4%; z-index: 99;}
header .date { position: absolute; width: 97.4%; left: 0; right: 0; margin: auto; top: 7.8%; z-index: 99;}
header .linkbtn { position: absolute; width: 85.8%; left: 0; right: 0; margin: auto; top: 70.7%; z-index: 99;}
header .splatter_01 { position: absolute; width: 30.9%; left: -15%; top: 52.5%; z-index: 50;}
header .splatter_02 { position: absolute; width: 30.6%; left: -14%; top: 64%; z-index: 50;}
header .splatter_03 { position: absolute; width: 41.6%; right: -27%; top: 62.3%; z-index: 50;}
header .hd_bg { position: absolute; width: 100%; left: 0; right: 0; margin: auto; top: 0%; z-index: 10;}

/* = nav
-------------------------------------------------------------- */
#nav li { position: absolute; z-index: 99;}
#nav li:nth-of-type(1) { width: 22.9%; left: 2.7%; top: 83.9%;}
#nav li:nth-of-type(2) { width: 22.9%; left: 26.7%; top: 82.7%;}
#nav li:nth-of-type(3) { width: 25%; left: 49.4%; top: 82.3%; }
#nav li:nth-of-type(4) { width: 24.9%; left: 74.7%; top: 83.8%;}

/* = game
-------------------------------------------------------------- */
#game { position: relative; background-image: url(../img/game_bg.png); background-size: 100%; background-repeat: no-repeat; padding-top: 344%; overflow: hidden; z-index: 50;}
.game_fukidashi { width: 63.6%; position: absolute; left: 0; right: 0; margin: auto; top: 0.9%;}
.game_title { position: absolute; width: 62%; left: 0; right: 0; margin: auto; top: 6.7%; z-index: 50;}
.card { width: 80.2%; position: absolute; left: 0; right: 0; margin: auto; top: 20.2%; z-index: 59;}
.game_item { position: absolute; width: 78.9%; left: 0; right: 0; margin: auto; top: 34.3%; z-index: 50;}
.game_add { position: absolute; width: 42.4%; left: 0; right: 0; margin: auto; top: 43.6%; z-index: 50;}
.game_pre { position: absolute; width: 80.6%; left: 0; right: 0; margin: auto; top: 48.4%; z-index: 50;}
.btn_minigame { position: absolute; width: 85.8%; left: 7.7%; top: 57%; z-index: 50;}
.game_1 { position: absolute; width: 92.4%; left: 5%; top: 75.6%; z-index: 50;}
.game_2 { position: absolute; width: 89.3%; left: 5%; top: 82.3%; z-index: 50;}
.game_3 { position: absolute; width: 92.5%; left: 6%; top: 85%; z-index: 60;}

/* = character
-------------------------------------------------------------- */
#character {margin-top: -15%; position: relative; background-image: url('../img/chara_bg_02.png'); background-attachment: fixed; background-size: 100%;  background-position: center; padding-top: 293%; overflow: hidden; }
@media screen and (min-width: 900px) {
#character { background-size: 420px; }
}
.chara_ttl { position: absolute; width: 23.4%; left: 0; right: 0; margin: auto; top:5.9%; z-index: 50;}
.chara_txt_01 { position: absolute; width: 86.1%; right: 5.5%; top: 14.6%; z-index: 99;}
.chara_notice { position: absolute; width: 55.3%; left: 0; right: 0; margin: auto; top: 25.6%; z-index: 99;}
.tab-area li { position: absolute; z-index: 99;}
.tab-area li:nth-of-type(1) { width: 26%; left: 4.8%; top: 29.4%;}
.tab-area li:nth-of-type(2) { width: 26%; left: 36.8%; top: 29.4%;}
.tab-area li:nth-of-type(3) { width: 26%; left: 68.6%; top: 29.4%; }
.tab-area li:nth-of-type(4) { width: 26%; left: 4.8%; top: 36.8%;}
.tab-area li:nth-of-type(5) { width: 26%; left: 36.8%; top: 36.8%;}
.tab-area li:nth-of-type(6) { width: 26%; left: 68.6%; top: 36.8%;}
.tab-area li:nth-of-type(1):hover,.tab-area li:nth-of-type(1).active { content: url(../img/btn_01_on.png);}
.tab-area li:nth-of-type(2):hover,.tab-area li:nth-of-type(2).active { content: url(../img/btn_02_on.png);}
.tab-area li:nth-of-type(3):hover,.tab-area li:nth-of-type(3).active { content: url(../img/btn_03_on.png);}
.tab-area li:nth-of-type(4):hover,.tab-area li:nth-of-type(4).active { content: url(../img/btn_04_on.png);}
.tab-area li:nth-of-type(5):hover,.tab-area li:nth-of-type(5).active { content: url(../img/btn_05_on.png);}
.tab-area li:nth-of-type(6):hover,.tab-area li:nth-of-type(6).active { content: url(../img/btn_06_on.png);}
.tab-area li:hover { opacity: 0.8; cursor : pointer;}
.panel {display: none;}
.panel.active { display: block;}
.panelbg { position: absolute; width: 100%; left: 0; right: 0; margin: auto; top: 43.6%; z-index: 20;}
.panelname { position: absolute; width: 69.4%; right: 0%; top: 48.9%; z-index: 99;}
.panelchara { position: absolute; width: 55.6%; left: 0%; top: 43.6%; z-index: 50;}
.chara_txt_02 { position: absolute; width: 65.8%; left: 0; right: 0; margin: auto; top: 74.6%; z-index: 99;}
#character video { position: absolute; width: 90%; left: 0; right: 0; margin: auto; top: 58.7%; z-index: 40; outline: 2px solid #fff;}
#character .splatter_04 { position: absolute; width: 26.1%; right: -9.5%; top: 9.7%; z-index: 50;}
#character .splatter_01 { position: absolute; width: 30.9%; left: -14.5%; top: 20.4%; z-index: 50;}
#character .splatter_05 { position: absolute; width: 35.7%; right: 7%; top: 66%; z-index: 30;}
#character .splatter_06 { position: absolute; width: 30.8%; right: -7%; top: 74%; z-index: 30;}
#character .splatter_07 { position: absolute; width: 26.4%; left: -9%; top: 80.5%; z-index: 30;}
.chara_bg_01 { position: absolute; width: 100%; left: 0; right: 0; margin: auto; top: 9.8%; z-index: 10;}
#character .linkbtn { position: absolute; width: 85.8%; left: 0; right: 0; margin: auto; top: 89.6%; z-index: 99;}
.charafadein {
    animation-name: charafadein;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    z-index: 99;
    opacity: 0;
    animation-fill-mode: forwards;
}
@keyframes charafadein {
      0% { opacity: 0; transform: scale(1.2);}
     100% { opacity: 1; transform: scale(1);}
}
.namefadein {
    animation-name: namefadein;
    animation-duration: 0.3s;
    animation-delay: 0.4s;
    animation-timing-function: ease-in-out;
    z-index: 99;
    opacity: 0;
    animation-fill-mode: forwards;
}
@keyframes namefadein {
      0% { opacity: 0; transform: scale(1.1);}
     100% { opacity: 1; transform: scale(1);}
}

/* = event
-------------------------------------------------------------- */
#event { margin-top: -1%; position: relative; padding-top: 298%; background-color: #161616; overflow: hidden;}
.event_ttl { width: 20.2%; position: absolute; left: 0; right: 0; margin: auto; top:1.4%;}
#event .splatter_04 { position: absolute; width: 26.1%; right: 5%; top: 0%; z-index: 5;}
#event video { position: absolute; width: 100%; left: 0; right: 0; margin: auto; top: 7.5%; z-index: 0;}
.event_01_ttl { width: 85.7%; position: absolute; left: 0; right: 0; margin: auto; top: 3%; z-index: 99;}
.event_01 { position: absolute; left: 0; right: 0; margin: auto; top:-1%; z-index: 10;}
.event_02 { position: absolute; left: 0; right: 0; margin: auto; top:47.8%;}
.event_03 { position: absolute; left: 0; right: 0; margin: auto; top:60.5%;}
.event_04 { position: absolute; left: 0; right: 0; margin: auto; top:74.5%;}
.event_05 {; position: absolute; left: 0; right: 0; margin: auto; top:87.5%;}

/* = campaign
-------------------------------------------------------------- */
#campaign { margin-top: -1%; position: relative; background-color: #161616; padding-top: 423%; overflow: hidden;}
#campaign p, #campaign div, #campaign li { position: absolute;}
.campaign_ttl { width: 38.1%; left: 0; right: 0; margin: auto; top:0.8%;}
.campaign_01_ttl { width: 70.6%; left: 0; right: 0; margin: auto; top:5%; z-index: 99;} 
.campaign_01_bg { width: 91.3%; left: 0; right: 0; margin: auto; top:4.7%; z-index: 10;} 
.btn_cp01 { width: 85.8%; left: 0; right: 0; margin: auto; top:26.2%; z-index: 99;}
.campaign_02_ttl { width: 85.6%; left: 0; right: 0; margin: auto; top:35.3%; z-index: 99;} 
.campaign_02_bg { left: 0; right: 0; margin: auto; top:34.4%; z-index: 10;} 
.btn_cp02 { width: 85.8%; left: 0; right: 0; margin: auto; top:54.4%; z-index: 99;}
.ftr_text_02 { left: 0; right: 0; margin: auto; width: 90%; top:61.3%; z-index: 99;}
#campaign .linkbtn { width: 85.8%; left: 0; right: 0; margin: auto; top: 69.5%; z-index: 99;}
.sns li:nth-of-type(1) { left: 0; right: 0; margin: auto; width: 17.3%; top:78.6%; z-index: 99;}
.btn_terms { left: 0; right: 0; margin: auto; width: 72.5%; top:90.7%; z-index: 99;}
.info li:nth-of-type(1) { left: 30%; width: 15.2%; top:95.6%; z-index: 90;}
.info li:nth-of-type(2) { left: 58.5%; width: 12.1%; top:95.6%; z-index: 90;}
.footer { left: 0; right: 0; margin: auto; top: 55.7%; z-index: 0;}

/* = modal
-------------------------------------------------------------- */
.modaal-container { top: 0;}
.modal_close1 { position: absolute; top: 102%; left: 0; right: 0; margin: auto; width: 60%; z-index: 98;}
.modal_close2 { position: absolute; top: -5%; right: -5%; width: 14%; z-index: 98;}
.modal_close3 { position: absolute; top: 98%; left: 0; right: 0; margin: auto; width: 34.8%; z-index: 98;}
.modaal-container { width: auto;}
.modal-terms-cover { color: #fff; font-size: 0.8em; line-height: 1.4em;}
.modal-terms-inner { position: relative; width: 100%; left: 0; right: 0; margin: auto;}
.modal-terms1-contents { position: absolute; height: 73%; width: 90%; left: 8%; margin: auto; padding-right: 4%; top: 18%; overflow-x: hidden; z-index: 98;}
.modal-game-inner { position: relative; width: 100%; left: 0; right: 0; margin: auto;}