/*
================================================================================================================
MENU
================================================================================================================
*/
#menu{position:absolute; top:0; left:0; text-align:center;z-index:10;}
#menu.fix{position:fixed;}
#menu > #menu-sp{display:none;}
#menu > .frame{position:relative; z-index:5;}
#menu > .frame > .menu_body > ul > li{
position:relative;
padding-top:25%;
background-image:url(../img/common/menu/menu_btn_off.png);
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;
cursor:pointer;
filter: drop-shadow(2px 4px 0px rgba(0,0,0,0.6));
}
#menu > .frame > .menu_body > ul li:hover,
#menu > .frame > .menu_body > ul li.active{
background-image:url(../img/common/menu/menu_btn_on.png);
filter: drop-shadow:none;
cursor:nomal;
}
#menu > .frame > .menu_body > ul li:not(.active):hover{
transform: translateY(4px);
filter: drop-shadow:none;
}

#menu > .frame > .menu_body > ul li a{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}

#menu > .frame > .menu_body > ul > li::before{
position:absolute;
top: calc(50% - 4px);
left: 50%;
transform: translate(-50%, -50%);
font-family: "M PLUS 1p", sans-serif;
font-weight: 900;
font-style: normal;
color: #FFFFFF;
font-size: 150%;
white-space: nowrap;   
}
#menu > .frame > .menu_body > ul > li:hover::before,
#menu > .frame > .menu_body > ul > li.active::before{
color: #fff600;
text-shadow: -3px -3px 1px #0004bc, 0px -3px 3px #0004bc, 3px -3px 3px #0004bc, -3px 0px 3px #0004bc, 3px 0px 3px #0004bc, -3px 3px 3px #0004bc, 0px 3px 3px #0004bc, 3px 3px 3px #0004bc;
}

#menu > .frame > .menu_body > ul > li:hover::before,
#menu > .frame > .menu_body > ul > li.active::before{top:50%;}

#menu > .frame > .menu_body > ul > li#top::before{content: "トップページ";}
#menu > .frame > .menu_body > ul > li#game::before{content: "あそびかた";}
#menu > .frame > .menu_body > ul > li#search::before{content: "設置店舗";}
#menu > .frame > .menu_body > ul > li#special::before{content: "スペシャル";}
#menu > .frame > .menu_body > ul > li#epass::before{font-size: 100%;content: "e-amusement passで\Aできること";white-space: pre;}

@media screen and (min-width:1101px){
#menu{display:flex; width:calc(50% - 245px); min-height:100vh; align-items:center; justify-content:center;}
#menu > .frame{
width:96%;
max-width:340px;
}
#menu > .frame > .head{width:170px; margin:0 auto;}
#menu > .frame > .menu_body{
width:100%;
margin-bottom:90px;
padding-bottom:20px;
border:#fff600 6px solid;
border-radius:15px;
background-color: #06c0cc;
background-image: radial-gradient(rgba(255,255,255,0.15) 30%, transparent 31.5%), radial-gradient(rgba(255,255,255,0.15) 30%, transparent 31.5%),linear-gradient(0deg, #1e75ff, #31bdff);
background-position: 0 0, 26px 26px,center top;
background-size: 52px 52px, 52px 52px,cover;
box-shadow: 0px 6px 0px 0px #9c9500 inset,2px 6px 0px 0px #9c9500;
}
#menu > .frame > .menu_body > .title{width:150px;margin:20px auto;}
#menu > .frame > .menu_body > ul{
width:83%;
max-width:285px;
margin:0 auto;
}
#menu > .frame > .menu_body > ul > li{
width:100%;
margin-bottom:10px;
}
}

/*スマホサイズ*/
@media screen and (max-width:1100px){
#menu,
#menu > *{width:100%;}
#menu{pointer-events:none; z-index:999;}
#menu > #menu-sp{display:block;}
#menu > .frame{transform:translateY(-100vh); opacity:0; transition:all .4s ease; pointer-events:none; }
#menu > .frame > .head,
#menu > .frame > .menu_body > .title{display:none;}
#menu > .frame.slide{transform:translateY(0); opacity:1; pointer-events:auto;}

#menu > .frame > .menu_body{background-image: linear-gradient(to bottom, #FFF 70%, transparent);}
#menu > .frame > .menu_body > ul{width: inherit;max-width:inherit;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:20px 0;}
#menu > .frame > .menu_body > ul > li{
width:calc(50% - 16px);
max-width:285px;
margin:0 5px 10px ;
padding-top:74px;
}
#menu > .frame > .menu_body > ul > li:hover::before,
#menu > .frame > .menu_body > ul > li.active::before{
text-shadow: -2px -2px 2px #0004bc, 0px -2px 2px #0004bc, 2px -2px 2px #0004bc, -2px 0px 2px #0004bc, 2px 0px 2px #0004bc, -2px 2px 2px #0004bc, 0px 2px 2px #0004bc, 2px 2px 2px #0004bc;
}

}

@media screen and (max-width:480px){
#menu > .frame > .menu_body > ul{width: inherit;max-width:inherit;display:flex;justify-content: flex-start;padding:10px 0 20px;}
#menu > .frame > .menu_body > ul > li{width:calc(50% - 6px);margin:5px 2px;padding-top: 12%;}
#menu > .frame > .menu_body > ul > li::before{font-size:130%;line-height:110%;}
#menu > .frame > .menu_body > ul > li#epass::before{font-size: 84%;}
}

/*
========================
メニューボタン
========================
*/
#menu .menu-btn{width:100%; font-family:'Noto Sans JP', sans-serif; font-weight:700; margin:0 auto;}
#menu .menu-btn .btn{
display:block;
position:relative;
color:#fff;
font-size:20px;
letter-spacing:1px;
padding:15px 0;
transition:all .2s ease;
cursor:pointer;}
#menu .menu-btn .btn > p{filter:drop-shadow(1px 1px 0 #8b5589) drop-shadow(1px -1px 0 #8b5589) drop-shadow(-1px 1px 0 #8b5589) drop-shadow(-1px -1px 0 #8b5589);}
#menu .menu-btn .btn:hover,
#menu .menu-btn div.btn.open{background:#8b5589;}
#menu .menu-btn .btn.select,
#menu .menu-btn .btn.select:hover{background:#b3fbe5;}

@media screen and (max-width:1100px){#menu .menu-btn .btn{font-size:18px; padding:10px 0;}}
@media screen and (min-width:481px){
#menu .menu-btn > * + *,
#menu .menu-btn > #menu .second-menu + .btn{border-top:1px solid #b77fb5;}}
@media screen and (max-width:480px){
#menu .menu-btn{display:flex; flex-wrap:wrap;}
#menu .menu-btn > *{width:50%; border-bottom:1px solid #b77fb5;}
#menu .menu-btn > *:nth-child(odd){border-right:1px solid #b77fb5;}
#menu .menu-btn .btn{font-size:16px; padding:8px 0;}
#menu .menu-btn .btn > p{filter:drop-shadow(0 1px 0 #8b5589) drop-shadow(0 -1px 0 #8b5589) drop-shadow(-1px 0 0 #8b5589) drop-shadow(1px 0 0 #8b5589) drop-shadow(0 0 1px #8b5589);}
}

/*
========================
SP用ヘッダー
========================
*/
#menu > #menu-sp,
#menu > #menu-sp > .title{height:90px;}
#menu > #menu-sp{
position:relative;
background-image:url(../img/common/bg_earth.png),url(../img/common/pc_bg_pattern.jpg);
background-repeat:no-repeat,repeat;
background-size:500px auto,auto 300%;
background-position:center top 5%,center top -50px;
border-bottom:3px solid #1957a8; pointer-events:auto; z-index:10;}
#menu > #menu-sp > .title{display:flex; align-items:center; justify-content:center;}
#menu > #menu-sp > .title img{width:auto;height:70px;}


/*
========================
SP用トグル
========================
*/
#menu > #menu-sp > .slide-btn,
#menu > #menu-sp > .slide-btn > p{position:absolute; width:70px; height:70px; border-radius:50%;}

#menu > #menu-sp > .slide-btn{background:linear-gradient(0deg, #1e75ff, #31bdff); top:5px; right:10px; border:#fff600 3px solid;box-shadow: 0px 2px 0px 0px #9c9500 inset,2px 4px 0px 0px #9c9500; cursor:pointer;}
#menu > #menu-sp > .slide-btn > p{top:-1px; right:-1px;}
#menu > #menu-sp > .slide-btn > p > span{
display:block;
position:absolute;
left:19px;
height:5px;
width:36px;
background:#fff;
border-radius:5px;
transition:.35s ease-in-out;}

#menu > #menu-sp > .slide-btn > p > span:nth-child(1){top:19px;}
#menu > #menu-sp > .slide-btn > p > span:nth-child(2){top:calc(50% - 3px);}
#menu > #menu-sp > .slide-btn > p > span:nth-child(3){top:44px;}

#menu > #menu-sp > .slide-btn.open > p > span:nth-child(1){top:calc(50% - 3px); transform:rotate(315deg);}
#menu > #menu-sp > .slide-btn.open > p > span:nth-child(2){width:0; left:50%;}
#menu > #menu-sp > .slide-btn.open > p > span:nth-child(3){top:calc(50% - 3px); transform:rotate(-315deg);}

/*
========================
スクロール
========================
*/
@media screen and (min-width:1100px) and (max-height:800px){
#menu .menu-btn{height:calc(100vh - 280px); overflow:scroll; overflow-x:hidden;}
#menu .menu-btn::-webkit-scrollbar{width:6px;}
#menu .menu-btn::-webkit-scrollbar-track{background-color:#ccc; border-radius:4px; border:1px solid rgba(204,129,212,.3);}
#menu .menu-btn::-webkit-scrollbar-thumb{background-color:#fabeff; border-radius:4px; border:1px solid #cc81d4;}
#menu > .frame > .inner{padding:10px 5px 10px 0;}
#menu .menu-btn > .btn,#menu .toggle-menu{width:calc(100% - 5px); margin-right:5px;}}

@media screen and (min-width:481px) and (max-width:1100px) and (max-height:600px){
#menu > .frame{/*height:calc(100vh - 100px);*/ height:calc(100vh - 185px); overflow:scroll; overflow-x:hidden;/*padding:10px 0;*/}
#menu > .frame::-webkit-scrollbar{width:6px;}
#menu > .frame::-webkit-scrollbar-track{background-color:#ccc; border-radius:4px; border:1px solid rgba(204,129,212,.3);}
#menu > .frame::-webkit-scrollbar-thumb{background-color:#fabeff; border-radius:4px; border:1px solid #cc81d4;}}

/*
================================================================================================================
PC表示用/キャラ浮遊エリア
================================================================================================================
*/
#side-crew{display:none; pointer-events:none;}
@media screen and (min-width:1501px){
#side-crew{
display:flex;
position:fixed;
top:0;
right:0;
width:calc(50% - 245px);
max-width:inherit !important;
min-height:100vh;
align-items:center;
justify-content:center;
z-index:3;}
#side-crew::before,
#side-crew::after{display:none !important;}
#side-crew > .free_area {position:relative;}
#side-crew > .free_area > p{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:100% auto;
background-repeat:no-repeat;
background-position:center;}
#side-crew > .free_area > p:nth-child(2){background-image:url(../img/common/menu/side/chara1.png); animation:3s fuwafuwa infinite;}
#side-crew > .free_area > p:nth-child(3){background-image:url(../img/common/menu/side/chara2.png); animation:3s fuwafuwa infinite; animation-delay:.3s;}
#side-crew > .free_area > p:nth-child(4){background-image:url(../img/common/menu/side/chara3.png); animation:3s fuwafuwa infinite; animation-delay:.4s;}
#side-crew > .free_area > p:nth-child(5){background-image:url(../img/common/menu/side/chara4.png); animation:3s fuwafuwa infinite; animation-delay:.5s;}
@keyframes fuwafuwa{
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}