/*z-index*/
header#id_nav_menu_1                  {z-index:9999 !important;}
footer                                {z-index:2 !important;}

#bpl-menu                    {z-index:10;}
#bpl-menu .second-menu        {z-index:3;}
#bpl-menu-main                          {z-index:20;}
#nav-btn                          {z-index:12;}
#menu-main                      {z-index:11;}
#menu-main li p.main-btn::before {z-index:3;}
#nav-bg                               {z-index:11;}
#page-top,#page-top a                 {z-index:10 !important;}

/*スクロール固定*/
#bpl-menu.nav-fix{position:fixed; top:0;}
#bpl-menu-main.nav-fix{position:fixed; top:0;}
#bpl-menu-main #nav-btn.nav-fix{top:15px;}

/*フォント*/
#bpl-menu,
#bpl-menu-main{font-family:'Noto Sans JP', sans-serif;}

/*
================================================================================================================
メインメニュー
================================================================================================================
*/
#bpl-menu-main{position:absolute; top:50px; right:0; transition:transform .4s; pointer-events:none;}
#bpl-menu-main a img{transition:.3s ease-in-out;}
#bpl-menu-main a:hover img{opacity:0.5;}

/*
================================================================================================================
開閉ボタン
================================================================================================================
*/
#nav-btn{
display:flex;
position:absolute;
top:15px;
right:10px;
width:150px;
height:50px;
color:#fff;
background:#00baff;
font-size:12px;
font-weight:900;
border-radius:40px;
padding-left:25px;
overflow:hidden;
transition:all .4s ease;
align-items:center;
justify-content:center;
pointer-events:auto;}
#nav-btn:hover{background:#ff6d8a; cursor:pointer;}
.nav-btn-click:checked ~ #nav-btn{background:#ff6d8a;}

/*メニュー開閉ボタン テキスト*/
#nav-btn::before{display:block; content:"MENU";}
.nav-btn-click:checked ~ #nav-btn::before{content:'CLOSE';}

/*メニュー開閉ボタン アイコン*/
#nav-btn span{
display:block;
position:absolute;
left:40px;
height:2px;
width:20px;
background:#fff;
transition:.35s ease-in-out;}
#nav-btn span:nth-child(1){top:18px;}
#nav-btn span:nth-child(2){top:24px;}
#nav-btn span:nth-child(3){top:30px;}
.nav-btn-click:checked ~ #nav-btn span:nth-child(1){top:24px; transform:rotate(315deg);}
.nav-btn-click:checked ~ #nav-btn span:nth-child(2){width:0; height:0; opacity:0;}
.nav-btn-click:checked ~ #nav-btn span:nth-child(3){top:24px; transform:rotate(-315deg);}

@media screen and (max-width:640px){
#nav-btn{width:120px; height:40px;}
#nav-btn span{left:20px;}
#nav-btn span:nth-child(1){top:13px;}
#nav-btn span:nth-child(2){top:19px;}
#nav-btn span:nth-child(3){top:25px;}
.nav-btn-click:checked ~ #nav-btn span:nth-child(1){top:19px;}
.nav-btn-click:checked ~ #nav-btn span:nth-child(3){top:19px;}}

/*
================================================================================================================
スライドイン表示メニュー
================================================================================================================
*/
#menu-main{
position:relative;
width:350px;
color:#fff;
background:#ff6d8a;
font-weight:900;
text-align:center;
letter-spacing:1px;
margin-top:95px;
border-radius:20px;
opacity:0;
overflow-x:hidden;
overflow-y:auto;
transform-origin:right;
transform:scaleX(0) translateX(200px);
transition:all .15s ease-in;
-webkit-overflow-scrolling:touch;
pointer-events:none;}
#menu-main a{color:#fff;}
.nav-btn-click:checked ~ #menu-main{transform:scaleX(1) translateX(-10px); opacity:1; pointer-events:auto;}

#menu-main::-webkit-scrollbar{width:0; height:0;}
#menu-main::-webkit-scrollbar-track{background-color:transparent;}
#menu-main::-webkit-scrollbar-thumb{background-color:transparent;}

@media screen and (max-width:640px){#menu-main{margin-top:75px;}}

/*
=============================
メインメニュー SNSエリア
=============================
*/
#menu-main li#menu-main-sns{
display:flex;
width:100%;
min-height:50px;
justify-content:center;
align-items:center;
margin:0 auto;}
#menu-main li#menu-main-sns a{width:40px;}
#menu-main li#menu-main-sns a img{width:100%;}
#menu-main li#menu-main-sns a + a{margin-left:5px;}

/*
=============================
第1階層 装飾
=============================
*/
#menu-main li .main-btn{
display:block;
position:relative;
height:50px;
font-size:16px;
line-height:50px;
text-align:center;
transition:all .2s ease-in;}
#menu-main li .main-btn:hover{cursor:pointer;}

/*オンマウス*/
@media screen and (min-width:641px){
#menu-main li .main-btn::after{
display:block;
content:attr(title);
position:absolute;
top:0;
width:100%;
height:100%;
background:#f4384b;
transform:skewX(-60deg) translateX(300px);
opacity:0;
transition:all .25s ease-in;}
#menu-main li .main-btn:hover::after,
#menu-main li p.main-btn.btn-open::after{transform:skewX(0deg) translateX(0px); opacity:1;}}

/*
=============================
第1階層 ボタンがトグル
=============================
*/
#menu-main li p.main-btn{display:block; position:relative;}
#menu-main li p.main-btn:hover{cursor:pointer;}
#menu-main li p.main-btn::before{
position:absolute;
display:block;
top:0;
right:10px;
width:20px;
height:20px;
content:"▼";
color:#fff;
font-size:12px;
font-weight:normal;}
#menu-main li p.main-btn.btn-open::before{content:"▲";}
@media screen and (max-width:640px){#menu-main li p.main-btn.btn-open{background:#00baff;}}

/*
=============================
第2階層
=============================
*/
#menu-main ul.second-menu{display:none; padding:10px;}

#menu-main ul.second-menu li > *:not(div){
display:block;
position:relative;
color:#f4384b;
background:#f7e8ab;
font-size:14px;
font-weight:700;
padding:10px 0;
transition:.5s ease-in-out;}
#menu-main ul.second-menu > li > *:not(div):hover{cursor:pointer; background:#f7f468;}
#menu-main ul.second-menu > li + li{border-top:1px solid #ff6d8a;}

#menu-main ul.second-menu > li:first-child > *:not(div){border-radius:10px 10px 0 0;}
#menu-main ul.second-menu > li:last-child > *:not(div){border-radius:0 0 10px 10px;}
#menu-main ul.second-menu > li:last-child > *.btn-open{border-radius:0;}

/*トグルボタン*/
#menu-main ul.second-menu > li > p.btn-open{background:#66bcff; transition:background .2s ease;}
#menu-main ul.second-menu > li > p::before,
#menu-main ul.second-menu > li > p::after{
display:block;
content:"";
position:absolute;
background:#fff;
transition:all .2s ease;}
#menu-main ul.second-menu > li > p::before{width:14px; height:2px; top:calc(50% - 1px); right:10px;}
#menu-main ul.second-menu > li > p::after{width:2px; height:14px; top:calc(50% - 7px); right:16px;}
#menu-main ul.second-menu > li > p.btn-open::after{transform:rotate(90deg); opacity:0; right:10px;}

/*
=============================
第3階層
=============================
*/
.third-menu{display:none;}
.third-menu > ul{display:flex; flex-wrap:wrap; border-top:1px solid #ff6d8a;}
.third-menu:not(.game) > ul li{width:50%; border-bottom:1px solid #ff6d8a}
.third-menu:not(.game) > ul li:nth-child(odd){border-right:1px solid #ff6d8a;}
.third-menu:not(.game) > ul li:nth-last-child(2),
.third-menu:not(.game) > ul li:last-child{border-bottom:none;}
.third-menu > ul li a{background:#333 !important; font-size:13px; font-weight:400 !important;}
.third-menu > ul li a:hover{background:#777 !important;}

.third-menu > ul li.none a{pointer-events:none;}
.third-menu.game > ul li{width:100%;}
.third-menu.game > ul li + li{border-top:1px solid #ff6d8a}
#menu-main ul.second-menu > li:last-child > *.btn-open + .third-menu.game > ul li:last-child a{border-radius:0 0 10px 10px;}

#menu-main ul.second-menu > li:last-child > *.btn-open + .third-menu:not(.game) > ul li:nth-last-child(2) a{border-radius:0 0 0 10px;}
#menu-main ul.second-menu > li:last-child > *.btn-open + .third-menu:not(.game) > ul li:last-child a{border-radius:0 0 10px 0;}

/*
=============================
メインメニューオープン時 背景
=============================
*/
#nav-bg,
.nav-btn-click{display:none;}

/*
=====================================================================
MENU SPサイズ
=====================================================================
*/
@media screen and (max-width:480px){
#menu-main{width:300px; max-width:300px;}
#menu-main li .main-btn{height:40px; font-size:14px; line-height:40px;}
#menu-main li p.main-btn::before{right:3px; font-size:8px;}

#menu-main ul.second-menu li > *:not(div){font-size:13px; padding:8px 0;}

.third-menu > ul li a{font-size:11px !important;}}