@charset "Shift-JIS";

/*
================================================================================================================
PC
================================================================================================================
*/
nav#main-menu{
position:absolute;
top:50px;
left:0;
width:100%;}

@media screen and (min-width:981px){
nav#main-menu{
height:68px;
background-color:rgba(255,255,255,.8);
border-bottom:1px solid #fff;
z-index:5;}}

@media screen and (min-width:981px){nav > #pc-menu{display:flex;}}
@media screen and (max-width:980px){nav > #pc-menu{display:none;}}

nav > #pc-menu{
width:100%;
max-width:1200px;
padding:0 20px;
align-items:center;
margin:0 auto;}
@media screen and (max-width:1100px){nav > #pc-menu{padding:0 10px;}}

/*
========================
タイトルロゴ
========================
*/
nav > #pc-menu > #menu-logo{width:180px; text-align:center;}
nav > #pc-menu > #menu-logo img{width:90%;}
@media screen and (max-width:1100px){nav > #pc-menu > #menu-logo{width:130px;}}

/*
========================
メニューメイン
========================
*/
nav > #pc-menu > ul{
display:flex;
width:calc(100% - 180px);
align-items:center;
justify-content:space-between;
margin:0 auto;}
@media screen and (max-width:1100px){nav > #pc-menu > ul{width:calc(100% - 130px);}}

/*
========================
第1階層
========================
*/
nav > #pc-menu > ul > li{position:relative; /*width:calc((100% - 200px) / 8);*/}
nav > #pc-menu > ul > li.first-menu > .btn,
nav > #pc-menu > ul > li.first-menu > a{line-height:68px;}

/*第1階層 階層有+ 装飾*/
nav > #pc-menu > ul > li.first-menu > .btn{padding-right:18px;}
nav > #pc-menu > ul > li.first-menu > .btn::before{/*right:-20px;*/ right:0;}
nav > #pc-menu > ul > li.first-menu > .btn::after{/*right:-14.5px;*/ right:5.5px;}

/*第1階層 別サイトジャンプ矢印 装飾*/
nav > #pc-menu > ul > li.first-menu.blank > a{padding-right:15px;}
nav > #pc-menu > ul > li.first-menu.blank > a::before{top:calc(50% - 1.5px); /*right:-15px;*/ right:0;}
nav > #pc-menu > ul > li.first-menu.blank > a::after{top:21.5px; right:-21.5px; /*right:6.5px;*/ right:-6.5px;}
nav > #pc-menu > ul > li.first-menu.blank > a:hover::before{top:calc(50% - 3px); /*right:-16.5px;*/ right:1.5px;}
nav > #pc-menu > ul > li.first-menu.blank > a:hover::after{top:20px; /*right:-23.5px;*/ right:-6px;}

/*
========================
第2階層
========================
*/
nav > #pc-menu > ul > li > .second-menu{
display:block !important;
position:absolute;
top:68px;
left:-20px;
width:200px;
max-height:0;
background-color:#000033;
overflow:hidden;
opacity:0;
transition:all .2s ease;
z-index:5;}
nav > #pc-menu > ul > li > .second-menu ul li a{padding:10px;}

nav > #pc-menu > ul > li.first-menu:nth-child(2) > .second-menu{/*left:calc((200px - 63px) / 2);*/ left:-68.5px;}
nav > #pc-menu > ul > li.first-menu:nth-child(4) > .second-menu{/*left:calc((200px - 108px) / 2);*/ left:-46px;}

/*第2階層MENU OPEN*/
nav > #pc-menu > ul > li.first-menu:hover > .second-menu{max-height:999px !important; opacity:1 !important;}
nav > #pc-menu > ul > li.first-menu:hover > .second-menu ul{height:auto !important;}

@media screen and (min-width:981px){nav > #pc-menu > ul > li.first-menu:hover > .second-menu ul li.none{display:none;}}

/*
================================================================================================================
SP
================================================================================================================
*/
@media screen and (min-width:981px){nav > #sp-btn,nav > #sp-menu{display:none;}}
@media screen and (max-width:980px){nav > #sp-btn,nav > #sp-menu{display:block;}}

/*メニュー開閉*/
#sp-menu > ul{position:relative; margin-top:-400px; /*transform:translateY(-400px);*/ opacity:0; transition:all .3s ease; z-index:5;}
.slide #sp-menu > ul{/*transform:translateY(0);*/ opacity:1; margin-top:0;}

/*
========================
メニュー開閉ボタン
========================
*/
nav > #sp-btn{
position:absolute;
top:0;
right:0;
width:50px;
height:50px;
z-index:7;}
nav > #sp-btn > span{
display:block;
position:absolute;
left:5px;
width:40px;
height:4px;
background-color:#000033;
transition:all .4s ease;}
nav > #sp-btn:hover{cursor:pointer;}
nav > #sp-btn:hover > span{background-color:#ff35a4;}

nav > #sp-btn > span:first-child{top:14px;}
nav > #sp-btn > span:nth-child(2){top:calc(50% - 2px);}
nav > #sp-btn > span:last-child{bottom:14px;}

nav > #sp-btn.open > span:first-child{top:23px; transform:rotate(315deg);}
nav > #sp-btn.open > span:nth-child(2){opacity:0;}
nav > #sp-btn.open > span:last-child{bottom:23px; transform:rotate(-315deg);}

/*
========================
タイトルロゴ
========================
*/
nav > #sp-menu > #menu-logo{
position:relative;
width:100%;
height:50px;
background-color:rgba(255,255,255,.8);
text-align:center;
/*border-bottom:1px solid #000033;*/
z-index:6;}
nav > #sp-menu > #menu-logo a{display:block; width:100%; height:50px; padding-top:5px;}
nav > #sp-menu > #menu-logo a img{height:90%;}

/*
========================
第1階層
========================
*/
nav > #sp-menu > ul{background-color:rgba(255,255,255,1);}
nav > #sp-menu > ul > li.first-menu > .btn,
nav > #sp-menu > ul > li.first-menu > a,
nav > #sp-menu > ul > li > .second-menu ul li a{height:30px; line-height:30px; padding:0 10px;}

nav > #sp-menu > ul > li.first-menu{border-bottom:1px solid #000033;}
nav > #sp-menu > ul > li.first-menu:first-child{border-top:1px solid #000033;}

/*第1階層 階層有+ 装飾*/
nav > #sp-menu > ul > li.first-menu > .btn::before{right:10px;}
nav > #sp-menu > ul > li.first-menu > .btn::after{right:15.5px;}

/*第1階層 別サイトジャンプ矢印 装飾*/
nav > #sp-menu > ul > li.first-menu.blank > a::before{top:calc(50% - 1.5px); right:10px;}
nav > #sp-menu > ul > li.first-menu.blank > a::after{top:4px; right:-21.5px; right:3.5px;}
nav > #sp-menu > ul > li.first-menu.blank > a:hover::before{top:calc(50% - 3px); right:11.5px;}
nav > #sp-menu > ul > li.first-menu.blank > a:hover::after{top:2px; right:5px;}

/*
========================
第2階層
========================
*/
nav > #sp-menu > ul > li > .second-menu{display:none;}
nav > #sp-menu > ul > li > .second-menu ul{display:flex; flex-wrap:wrap;}
nav > #sp-menu > ul > li > .second-menu ul li{width:50%; /*text-align:center;*/ border-top:1px solid #fff;}
nav > #sp-menu > ul > li > .second-menu ul li:nth-child(odd){border-right:1px solid #fff;}
nav > #sp-menu > ul > li > .second-menu ul li:first-child,
nav > #sp-menu > ul > li > .second-menu ul li:nth-child(2){border-top:1px solid #000033;}

/*
================================================================================================================
COMMON
================================================================================================================
*/

nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a,
nav > div > ul > li > .second-menu ul li a{
display:block;
position:relative;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);}

/*
========================
第1階層
========================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{color:#000033; font-size:15px; font-weight:700; transition:color .2s ease;}
nav > div > ul > li.first-menu:hover > .btn,
nav > div > ul > li.first-menu > a:hover{color:#ff35a4; cursor:pointer;}

/*第1階層 第2階層用＋ 装飾*/
nav > div > ul > li.first-menu > .btn::before,
nav > div > ul > li.first-menu > .btn::after{display:block; content:""; position:absolute; background-color:#000033; transition:all .3s ease;}
nav > div > ul > li.first-menu > .btn::before{width:13px; height:3px; top:calc(50% - 1.5px);}
nav > div > ul > li.first-menu > .btn::after{width:3px; height:13px; top:calc(50% - 6.5px);}
nav > div > ul > li.first-menu:hover > .btn::before,
nav > div > ul > li.first-menu:hover > .btn::after{background-color:#ff35a4;}
nav > div > ul > li.first-menu:hover > .btn::before{opacity:0;}
nav > div > ul > li.first-menu:hover > .btn::after{transform:rotate(90deg);}

/*SP 第2階層オープン時*/
nav > #sp-menu > ul > li.first-menu > .btn.open{color:#ff35a4;}
nav > #sp-menu > ul > li.first-menu > .btn.open::before,
nav > #sp-menu > ul > li.first-menu > .btn.open::after{background-color:#ff35a4;}
nav > #sp-menu > ul > li.first-menu > .btn.open::before{opacity:0;}
nav > #sp-menu > ul > li.first-menu > .btn.open::after{transform:rotate(90deg);}

/*第1階層 別サイトジャンプ矢印 装飾*/
nav > div > ul > li.first-menu.blank > a::before,
nav > div > ul > li.first-menu.blank > a::after{display:block; content:""; position:absolute; transform:rotate(-45deg); transition:all .2s ease;}
nav > div > ul > li.first-menu.blank > a::before{width:12px; height:3px; background-color:#000033;}
nav > div > ul > li.first-menu.blank > a::after{width:0; height:0; border:5px solid transparent; border-left:6px solid #000033;}
nav > div > ul > li.first-menu.blank > a:hover::before{background-color:#ff35a4;}
nav > div > ul > li.first-menu.blank > a:hover::after{border-left:6px solid #ff35a4;}

/*
========================
第2階層
========================
*/
nav > div > ul > li > .second-menu{background-color:#000033;}
nav > div > ul > li > .second-menu ul li a{width:100%; color:#fff; /*font-size:14px;*/ font-size:12px; background-color:#000033; transition:background .2s ease;}
nav > div > ul > li > .second-menu ul li a:hover{background-color:#ff35a4;}

/*第2階層 矢印 装飾*/
nav > div > ul > li > .second-menu ul li a::before,
nav > div > ul > li > .second-menu ul li a::after{display:block; content:""; position:absolute; transition:right .2s ease;}
nav > div > ul > li > .second-menu ul li a::before{top:calc(50% - 1.5px); right:18px; width:12px; height:3px; background-color:#fff;}
nav > div > ul > li > .second-menu ul li a::after{top:calc(50% - 5.5px); right:5px; width:0; height:0; border:5px solid transparent; border-left:8px solid #fff;}
nav > div > ul > li > .second-menu ul li a:hover::before{right:16px;}
nav > div > ul > li > .second-menu ul li a:hover::after{right:3px;}

/*
================================================================================================================
スクロールメニュー固定
================================================================================================================
*/
nav#main-menu.fixed{position:fixed; top:0; z-index:6;}

@media screen and (min-width:981px){#epass.fixed{position:fixed; top:68px;}}
@media screen and (max-width:980px){#epass.fixed{position:fixed; top:50px;}}

@media screen and (min-width:981px){#login.fixed{position:fixed; top:78px;}}
@media screen and (max-width:980px){#login.fixed{position:fixed; top:60px;}}

/*
================================================================================================================
e-apss
================================================================================================================
*/
@media screen and (min-width:981px){#epass{top:118px;}}
@media screen and (max-width:980px){#epass{top:100px;}}

#epass{
position:absolute;
left:0;
width:100%;
color:#fff;
background:linear-gradient(to right, rgba(200,236,250,0.8) 0%,rgba(96,157,201,0.8) 20%,rgba(66,96,163,0.8) 33%,rgba(66,80,118,0.8) 45%,rgba(66,80,118,0.8) 55%,rgba(66,96,163,0.8) 67%,rgba(96,157,201,0.8) 80%,rgba(200,236,250,0.8) 100%);
font-size:14px;
text-align:center;
border-bottom:1px solid #fff;
padding:5px 0;
z-index:4;}
#epass > p a{color:#fff;}
#epass > p a:hover{text-decoration:underline;}
#epass > p::before{display:inline-block; content:"e-amusement passカードナンバー"; font-size:12px; padding-right:30px;}
@media screen and (max-width:480px){
#epass{font-size:12px; background:linear-gradient(to right,rgba(96,157,201,0.8) 0%,rgba(66,96,163,0.8) 20%,rgba(66,80,118,0.8) 35%,rgba(66,80,118,0.8) 65%,rgba(66,96,163,0.8) 80%,rgba(96,157,201,0.8) 100%);}
#epass > p::before{font-size:11px; padding-right:10px;}}
@media screen and (max-width:330px){
#epass{font-size:11px;}
#epass > p::before{font-size:10px; padding-right:5px;}}

/*
================================================================================================================
ログイン/インストールボタン
================================================================================================================
*/
@media screen and (min-width:981px){#login{top:128px;}}
@media screen and (max-width:980px){#login{top:110px;}}

#login{
position:absolute;
right:0;
width:calc(50% - 200px);
z-index:4;}

#login > .inner{display:flex;}
#login > .inner a{
display:block;
width:50%;
max-width:215px;
height:82px;
background-size:100% auto;
background-position:top left;
background-repeat:no-repeat;
border-radius:50px;
transition:background .2s ease;}
#login > .inner a.btn1{background-image:url(../img/top/btn/play_off.png);}
#login > .inner a.btn2{background-image:url(../img/top/btn/inst_off.png); margin-left:-5px;}
#login > .inner a.btn3{background-image:url(../img/top/btn/login_off.png); margin-left:10%;}
#login > .inner a.btn1:hover{background-image:url(../img/top/btn/play_on.png);}
#login > .inner a.btn2:hover{background-image:url(../img/top/btn/inst_on.png);}
#login > .inner a.btn3:hover{background-image:url(../img/top/btn/login_on.png);}
@media screen and (max-width:1250px){#login > .inner a{height:auto; padding:9.5% 0;}}
@media screen and (max-width:980px){#login{display:none;}}