/*切替*/
@media screen and (min-width:1201px){#menu-sp{display:none;}}
@media screen and (max-width:1200px){#menu-sp{display:block;}}

#menu-sp{position:relative; width:100%; z-index:90;}
#menu-sp > ul{
position:absolute;
top:50px;
left:0;
width:100%;
font-size:14px;
font-weight:700;
transform:translateY(-400px);
transition:all .4s ease;
opacity:0;}
#menu-sp.slide > ul{transform:translateY(0); opacity:1; z-index:100;}
@media screen and (max-width:480px){#menu-sp.slide > ul{font-size:12px; transform:translateY(-10px);}}
@media screen and (max-width:430px){#menu-sp.slide > ul{font-size:11px;}}

/*
================================================================================================================
SP MENU - 固定ヘッダーボタン OPEN
================================================================================================================
*/
#bar{
position:relative;
top:0;
width:100%;
height:50px;
min-width:320px !important;
background:rgba(37,176,124,1);
border-bottom:1px solid #000;}
#bar::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../../images/menu/pc/exp/splash.png);
background-position:top left;
background-repeat:no-repeat;
background-size:100% auto;
/*filter:blur(1px);*/
opacity:.5;}

/*タイトルロゴ*/
#title-sp{display:flex; position:relative; width:100%; height:100%; justify-content:center; align-items:center; text-align:center;}
#title-sp a{display:inline !important;}
#title-sp a img{height:50px; transition:all .2s ease;}
#title-sp a:hover img{opacity:.7;}

@media screen and (max-width:480px){
#bar{height:40px;} 
#title-sp a img{height:40px;}}

/*
================================================================================================================
共通
================================================================================================================
*/
#menu-sp ul{display:flex; flex-wrap:wrap;}
#menu-sp ul li{position:relative; width:50%;}
#menu-sp a{display:block;}

#menu-sp > ul > li > *:first-child,
#menu-sp .second-menu > ul > li > a,
#menu-sp .second-menu > ul > li > p,
#menu-sp .third-menu > ul > li > a,
#menu-sp li.blank > p{display:block; position:relative; color:#000; height:40px; line-height:40px; text-align:center; transition:all .2s ease;}

#menu-sp li.blank{pointer-events:none;}

#menu-sp .long br{display:none;}
@media screen and (max-width:600px){
#menu-sp .long br{display:block;}
#menu-sp li.long > a,
#menu-sp li.long > p{line-height:16px !important; padding-top:4px;}}

/*メニュー高さ調整*/
@media screen and (max-width:430px){
#menu-sp > ul > li > *:first-child,
#menu-sp .second-menu > ul > li > a,
#menu-sp .second-menu > ul > li > p,
#menu-sp .third-menu > ul > li > a,
#menu-sp li.blank > p{height:30px; line-height:30px;}
#menu-sp li.long > a,
#menu-sp li.long > p{line-height:12px !important; padding-top:2px;}}

/*
================================================================================================================
第1階層
================================================================================================================
*/
#menu-sp > ul > li > *:first-child{display:block; background:#bffe40; cursor:pointer;}

/*オンマウス*/
#menu-sp > ul > li > *:first-child:hover,
#menu-sp > ul > li > .btn.open{color:#fff; background:#ff9000;}

/*ライン*/
#menu-sp > ul > li{border-top:1px solid #323232;}
#menu-sp > ul > li:nth-child(odd){border-right:1px solid #323232;}
#menu-sp > ul > li:nth-child(1),#menu-sp > ul > li:nth-child(2){border-top:none;}

/*設置店舗検索*/
#menu-sp > ul > li.search{width:100% !important; border-right:none !important;}
#menu-sp > ul > li.search > a{color:#fff; background:#888;}

/*SNS系*/
#menu-sp > ul > li.sns{display:flex; width:100% !important; background:#222; justify-content:center; align-items:center;}
#menu-sp > ul > li.sns > a{background:transparent !important;}
#menu-sp > ul > li.sns > a img{max-width:40px; transition:opacity .2s ease;}
#menu-sp > ul > li.sns > a + a{margin-left:10px;}
#menu-sp > ul > li.sns > a:hover img{opacity:.7;}
@media screen and (max-width:480px){
#menu-sp > ul > li.sns{padding:3px 0;}
#menu-sp > ul > li.sns > a img{max-width:36px;}
#menu-sp > ul > li.sns > a + a{margin-left:5px;}}

/*TOPにもどる*/
#menu-sp > ul > li.top{width:100% !important; border-right:none; border-bottom:1px solid #323232;}

/*
================================================================================================================
第2階層
================================================================================================================
*/
#menu-sp .second-menu{display:none; position:relative; width:200%; z-index:2;}
#menu-sp .second-menu > ul{display:flex; width:100%; flex-wrap:wrap;}
#menu-sp .second-menu > ul > li{position:relative; width:50%; background:#ffee06;}
#menu-sp .second-menu > ul > li:not(.blank) > p{cursor:pointer;}

/*第2階層･奇数列*/
#menu-sp > ul > li:nth-child(odd) > .second-menu{width:calc(200% + 2px);}

/*第2階層･偶数列*/
#menu-sp > ul > li:nth-child(even) > .second-menu{margin-left:-100%;}

/*ライン*/
#menu-sp .second-menu > ul li{border-top:1px solid #323232;}
#menu-sp .second-menu > ul li:nth-child(odd){border-right:1px solid #323232;}

/*オンマウス*/
#menu-sp .second-menu > ul > li > a:hover,
#menu-sp .second-menu > ul > li > p:hover,
#menu-sp .second-menu > ul > li > p.open{color:#ff9000; background:#fff;}

/*コース装飾*/
#menu-sp .icn-b:after,
#menu-sp .icn-p:after,
#menu-sp .icn-s:after{
display:block;
content:"";
width:20px;
height:20px;
position:absolute;
top:calc(50% - 10px);
left:5px;}
#menu-sp .icn-b:after{background-image:url(/game/2dx/30/images/menu/icn/basic_course_sp.png);}
#menu-sp .icn-p:after{background-image:url(/game/2dx/30/images/menu/icn/premium_course_sp.png);}
#menu-sp .icn-s:after{background-image:url(/game/2dx/30/images/menu/icn/specific_sp.png);}
@media screen and (max-width:480px){
#menu-sp .icn-b:after,
#menu-sp .icn-p:after,
#menu-sp .icn-s:after{
top:calc(50% - 8px);
background-size:100% auto;
width:16px;
height:16px;}}

/*
================================================================================================================
第3階層
================================================================================================================
*/
#menu-sp .third-menu{display:none; position:relative; width:calc(200% + 2px); z-index:3;}
#menu-sp .third-menu > ul{position:relative; display:flex; width:100%; flex-wrap:wrap; background:#aaa;}
#menu-sp .third-menu > ul > li{width:50%;}
#menu-sp .third-menu > ul > li a,
#menu-sp .third-menu li.blank{color:#fff; background:#aaa;}

/*第3階層･偶数列*/
#menu-sp .second-menu > ul > li:nth-child(even) .third-menu{width:200% !important; margin-left:-100%;}

/*オンマウス*/
#menu-sp .third-menu > ul > li a:hover{background:#444;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
#menu-sp > ul > li.first-menu > .btn::after,
#menu-sp .second-menu > ul > li:not(.blank) > p::after{
display:block;
content:"▼";
position:absolute;
top:calc(50% - 5px);
right:10px;
font-size:11px;
line-height:100% !important;}
#menu-sp > ul > li.first-menu > .btn.open::after,
#menu-sp .second-menu > ul > li:not(.blank) > p.open::after{content:"▲";}
@media screen and (max-width:480px){
#menu-sp > ul > li.first-menu > .btn::after,
#menu-sp .second-menu > ul > li:not(.blank) > p::after{right:5px;}}

/*
================================================================================================================
SP MENU - MENU/CLOSEボタン
================================================================================================================
*/
#menu-sp-btn{
display:block;
position:absolute;
top:10px;
right:10px;
width:40px;
height:30px;
z-index:3;}
#menu-sp-btn:hover{cursor:pointer;}
#menu-sp-btn.open span{background:#c0fe43;}
#menu-sp-btn:hover span,
#menu-sp-btn.open:hover span{background:#fff800;}

#menu-sp-btn span{display:block; position:absolute; left:0; width:100%; height:4px; background:#fff; transition:.35s ease-in-out;}
#menu-sp-btn span:first-child{top:3px;}
#menu-sp-btn span:nth-child(2){top:calc(50% - 1px);}
#menu-sp-btn span:nth-child(3){top:24px;}

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

@media screen and (max-width:480px){
#menu-sp-btn{right:5px; width:36px; height:20px;}
#menu-sp-btn span{height:3px;}
#menu-sp-btn span:first-child{top:3px;}
#menu-sp-btn span:nth-child(2){top:10px;}
#menu-sp-btn span:nth-child(3){top:17px;}
#menu-sp-btn.open span:first-child{top:9px;}
#menu-sp-btn.open span:nth-child(3){top:9px;}}

/*
================================================================================================================
MENU-ログイン50pxスクロール
================================================================================================================
*/
#menu-sp.fix{position:fixed !important; top:0 !important; left:0; z-index:100 !important;}