@charset "UTF-8";
/* CSS Document */
/*-------------------------------
common
--------------------------------*/
/*header*/
#nav-open {
top:10px;
z-index: 99999;
}
#wrap_conts{
position: relative;
}
/*チェックボックス*/
.nav-unshown {
display:none;
}
/*menuアイコン*/
#nav-open {
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
padding:15px 10px;
margin:0 auto;
position:fixed;
background:#4574db;
border-radius: 6px;
border:2px solid #fff;
}
#nav-open span{
width: 50px;
height: 50px;
display: block;
content: '';
cursor: pointer;
background:url(../img/title/menu.png) no-repeat center center;
background-size:50px;
}
/*closeBG*/
#nav-close {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#0a70a1;
opacity: 0;
transition: 1s ease-in-out;
}
/*content*/
#nav-content {
overflow: auto;
position: fixed;
top: 120px;
left: 0;
z-index: 999999;/**/
width:100%;/**/
height:auto;
transition:0.5s ease-in-out;/**/
-webkit-transform: translateY(-150%);
transform: translateY(-150%);/**/
}
/**/
#nav-input:checked ~ #nav-open span{
background:url(../img/title/menu_close.png) no-repeat center center;
background-size:50px;
transition: 0.5s ease-in-out;
}
/**/
#nav-input:checked ~ #nav-close {
display: block;/**/
opacity: 0.8;
z-index: 9999;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
/**/
#navMenu{
margin:0 auto;
}
#navMenu nav ul{
width:100%;
margin:0 auto;
background:#4574db;
border-top:2px solid #fff;
}
#navMenu nav ul li{
margin:0 auto;
padding: 0;
text-align:center;
width:100%;
border-bottom:2px solid	#fff;
text-indent:-9999px;
}
#navMenu nav ul li a{
display: block;
height:72px;
margin: 0;
}
#navMenu nav ul li a:link{
display: block;
padding:0;
margin:0 auto;
}
#navMenu nav ul li:hover{
margin:0 auto;
padding:0;
cursor: pointer;
opacity: 1;
background:#ff74db;
}
#navMenu nav ul li.nav00 a{background:url(../img/title/title_top.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav01 a{background:url(../img/title/title_introduction.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav02 a{background:url(../img/title/title_story.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav03 a{background:url(../img/title/title_characters.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav04 a{background:url(../img/title/title_updateDLC.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav05 a{background:url(../img/title/title_product.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav06 a{background:url(../img/title/title_special.png) no-repeat center center;background-size:640px;}
#navMenu nav ul li.nav07 a{background:url(../img/title/title_switch2.png) no-repeat center center;background-size:640px;}


/*-------------------------------
SP only
--------------------------------*/
@media screen and (max-width: 768px) {
#nav-open {
top:10px;
left:10px;
}
.pageNav ul {
width:90%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.pageNav li {
margin: 0 auto 20px;
float: left;
height:40px;
}
.pageNav li img {
height:40px;
position: relative;
color: #fff;
background:#fff;
border-radius: 20px 0 20px 0;
padding:0px 10px;
border: 6px double #4574db;
}
.pageNav li a img:hover{
filter:drop-shadow(0 0 6px #ff74db);
background:#fff;
padding:0px 10px;
border: 6px double #ff74db;
}
#navMenu nav ul li.nav00 a{background:url(../img/title/title_top.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav01 a{background:url(../img/title/title_introduction.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav02 a{background:url(../img/title/title_story.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav03 a{background:url(../img/title/title_characters.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav04 a{background:url(../img/title/title_updateDLC.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav05 a{background:url(../img/title/title_product.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav06 a{background:url(../img/title/title_special.png) no-repeat center center;background-size:100%;}
#navMenu nav ul li.nav07 a{background:url(../img/title/title_special.png) no-repeat center center;background-size:100%;}
}
/**/

/*-------------------------------
PC only
--------------------------------*/
@media screen and (min-width: 769px) {
#nav-open {
top:10px;
left: calc(50% - 500px);
}	
.pageNav ul {
width:100%;
margin:10px auto 0;
display: flex;
flex-wrap: wrap;
}
.pageNav li {
margin: 0 auto 20px;
float: left;
height:48px;
}
.pageNav li img {
height:48px;
position: relative;
color: #fff;
background:#fff;
border-radius: 20px 0 20px 0;
padding:0px 10px;
border: 6px double #4574db;
}
.pageNav li a img:hover{
filter:drop-shadow(0 0 6px #ff74db);
background:#fff;
padding:0px 10px;
border: 6px double #ff74db;

}
}