header#id_nav_menu_1            {z-index:100 !important;}
nav#menu-main                   {z-index:100 !important;}
nav#menu-main #btn-toggle       {z-index:220 !important;}
nav#menu-main #logo             {z-index:200;}
nav#menu-main #menu             {z-index:100 !important;}
nav#menu-main.fixed             {z-index:100 !important;}
@media screen and (max-width:980px){
header#id_nav_menu_1{z-index:200 !important;}}

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
/*メニュー全体*/
nav#menu-main{position:absolute; top:50px; left:0; width:100%; min-width:320px; color:#fff; font-family:"Yuji Syuku", serif;}
nav#menu-main img{width:100%;}
nav#menu-main a{display:block;}

nav#menu-main #menu-inner{width:100%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); transform:translateZ(0);}

/*ロゴエリア*/
nav#menu-main #logo img{filter:drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff); transform:translateZ(0); transition:all .3s ease-in-out;}
nav#menu-main #logo a:hover img{opacity:.6;}

/*メインメニュー*/
nav#menu-main #menu{width:100%; display:flex; justify-content:center; align-items:center; margin:0 auto;}
nav#menu-main #menu > li{font-size:24px; text-align:center;}
nav#menu-main #menu > li .btn{display:block; position:relative; cursor:pointer; transition:all .2s ease-in-out;}
nav#menu-main #menu > li .btn p{
position:relative;
background:linear-gradient(to right, #f3ec7e 0%,#f6cd16 50%,#ff9600 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:100%;
filter:drop-shadow(1px 1px 0 #3d3100) drop-shadow(-1px -1px 0 #3d3100) drop-shadow(-1px 1px 0 #3d3100) drop-shadow(1px -1px 0 #3d3100);
transform:translateZ(0);}
nav#menu-main #menu > li:not(#mypage).selected{pointer-events:none;}

/*マイページ*/
nav#menu-main #menu > li#mypage .btn p{
background:linear-gradient(to right, #95ffae 0%,#76f8c8 50%,#00ba9e 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(1px 1px 0 #07343f) drop-shadow(-1px -1px 0 #07343f) drop-shadow(-1px 1px 0 #07343f) drop-shadow(1px -1px 0 #07343f);
transform:translateZ(0);}

/*第2階層*/
nav#menu-main #menu > li .second-menu a{display:block; transition:all .3s ease-in-out;}
nav#menu-main #menu > li .second-menu a:hover,
nav#menu-main #menu > li .second-menu a.selected{color:#fff;}

/*メニュー非公開*/
nav#menu-main #menu > li .btn.none{pointer-events:none; filter:grayscale(1) brightness(.6); opacity:.8;}
@media screen and (max-width:980px){
nav#menu-main #menu > li .btn.none{background:#777;}
nav#menu-main #menu > li#mypage .btn.none::after{display:none;}}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:981px){
nav#menu-main #menu-inner{display:flex; max-width:1500px; padding:10px 10px 0; margin:0 auto; align-items:flex-start;}

/*ロゴエリア*/
nav#menu-main #logo{width:140px;}

/*メインメニュー*/
nav#menu-main #menu{width:calc(100% - 140px); margin:0 auto;}
nav#menu-main #menu > li{width:calc((100% / 6) - 10px);}
nav#menu-main #menu > li + li{margin-left:10px;}
nav#menu-main #menu > li .btn{
display:flex;
width:100%;
aspect-ratio:218/68;
background-image:url(../img/menu/btn.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
justify-content:center;
align-items:center;}
nav#menu-main #menu > li .btn:hover,
nav#menu-main #menu > li.selected .btn{background-image:url(../img/menu/btn_on.png);}

/*オンマウス*/
nav#menu-main #menu > li .btn::after{
display:block;
content:"";
position:absolute;
top:5%;
left:10%;
width:80%;
height:90%;
background-image:url(../img/menu/eff.png);
background-size:100% 120px;
background-repeat:repeat-y;
mix-blend-mode:screen;
transition:all .3s ease-in-out;
pointer-events:none;
opacity:0;}
nav#menu-main #menu > li .btn:hover::after,
nav#menu-main #menu > li.selected .btn::after,
nav#menu-main #menu > li#mypage .btn.open::after{animation:particle 10s linear infinite; opacity:1;}

/*マイページ*/
nav#menu-main #menu > li#mypage .btn{background-image:url(../img/menu/btn_mypage.png);}
nav#menu-main #menu > li#mypage .btn:hover,
nav#menu-main #menu > li#mypage .btn.open,
nav#menu-main #menu > li#mypage.selected .btn{background-image:url(../img/menu/btn_mypage_on.png);}
nav#menu-main #menu > li#mypage .btn::after,
nav#menu-main #menu > li#mypage .btn.open::after,
nav#menu-main #menu > li#mypage.selected .btn::after{background-image:url(../img/menu/eff_mypage.png);}

/*第2階層*/
nav#menu-main #menu > li .second-menu{
display:block;
position:absolute;
left:calc(50% - 50vw);
width:100vw;
max-height:0;
overflow:hidden;
transition:all .3s ease-in-out;
opacity:0;}
nav#menu-main #menu > li .second-menu > ul{
display:flex;
width:100%;
background-image:url(../img/menu/bar.png);
background-size:auto 100%;
background-repeat:repeat-x;
justify-content:center;
align-items:center;
padding:20px 10px;
margin-top:10px;}
nav#menu-main #menu > li .second-menu li + li{margin-left:50px;}
nav#menu-main #menu > li .second-menu a{color:#ff9600;}
nav#menu-main #menu > li .second-menu a:hover,
nav#menu-main #menu > li .second-menu a.selected{text-shadow:0 0 2px #ff9600 , 0 0 2px #ff9600 , 0 0 4px #ff9600 , 0 0 10px #ff9600 , 0 0 10px #ff9600;}
nav#menu-main #menu > li .second-menu.open{max-height:999px !important; opacity:1 !important;}

nav#menu-main #menu > li .sp{display:none;}
}

@media screen and (min-width:981px) and (max-width:1400px){nav#menu-main #menu > li .second-menu li + li{margin-left:30px;}}
@media screen and (min-width:981px) and (max-width:1300px){
nav#menu-main #logo{width:8%;}
nav#menu-main #menu{width:92%;}}
@media screen and (min-width:981px) and (max-width:1200px){
nav#menu-main #menu > li{width:calc((100% / 6) - 5px); font-size:20px;}
nav#menu-main #menu > li + li{margin-left:5px;}}

/*
=====================================================================
MENU-SP
=====================================================================
*/
@media screen and (max-width:980px){
/*ロゴエリア*/
nav#menu-main #logo{
position:relative;
width:calc(100% - 20px);
height:120px;
background-color:#242424;
background-image:url(../img/common/frame/bg02.png) , url(../img/common/frame/bg01.png);
background-size:auto 120% , 60px auto;
background-position:top , bottom;
background-repeat:repeat-x , repeat;
border-radius:0 0 20px 20px;
margin:0 auto;}
nav#menu-main #logo p{display:flex; position:relative; width:100%; height:100%; justify-content:center; align-items:center;}
nav#menu-main #logo a{width:90px;}

/*ロゴ フレーム装飾*/
nav#menu-main #menu-inner::before,
nav#menu-main #menu-inner::after,
nav#menu-main #logo::before,
nav#menu-main #logo:after,
nav#menu-main #logo p::before,
nav#menu-main #logo p::after{display:block; content:""; position:absolute; pointer-events:none;}
nav#menu-main #menu-inner::before,
nav#menu-main #menu-inner::after{top:0; width:10px; height:calc(100% - 20px); background:linear-gradient(to bottom, #bfb56a 0%,#885b35 50%,#9b8637 100%); z-index:120;}
nav#menu-main #menu-inner::before{left:0;}
nav#menu-main #menu-inner::after{right:0;}
nav#menu-main #logo::before,
nav#menu-main #logo::after{top:9px; height:100%;}
nav#menu-main #logo::before{
left:15px;
width:calc(100% - 30px);
background-image:url(../img/common/frame/border/03.png);
background-size:auto;
background-position:bottom;
background-repeat:repeat-x;}
nav#menu-main #logo::after{
left:-10px;
width:calc(100% + 20px);
background-image:url(../img/common/frame/radius/03.png), url(../img/common/frame/radius/04.png);
background-size:auto , auto;
background-position:bottom right, bottom left;
background-repeat:no-repeat, no-repeat;}
nav#menu-main #logo p::before{
top:0;
left:-10px;
width:calc(100% + 20px);
height:calc(100% - 20px);
background-image:url(../img/common/frame/border/02.png) , url(../img/common/frame/border/04.png);
background-position:right , left;
background-repeat:repeat-y , repeat-y;}

/*メインメニュー*/
nav#menu-main #menu{
width:100%;
position:absolute;
top:0;
background:#000;
padding-top:130px;
margin:0 auto;
transition:all .2s ease-in-out;
transform:translateY(-501px);
flex-wrap:wrap;}
nav#menu-main #menu > li{width:100% !important; border-bottom:1px solid #c17c00;}
nav#menu-main #menu > li .btn{padding:10px;}
nav#menu-main #menu > li .btn:hover,
nav#menu-main #menu > li.selected .btn{background:#c17c00;}
nav#menu-main #menu > li#mypage .btn:hover,
nav#menu-main #menu > li#mypage.selected .btn,
nav#menu-main #menu > li#mypage .btn.open{background:#008671;}

/*第2階層*/
nav#menu-main #menu > li .second-menu{display:none; background:#2d554f;}
nav#menu-main #menu > li .second-menu a{color:#95ffae; padding:10px;}
nav#menu-main #menu > li .second-menu a:hover,
nav#menu-main #menu > li .second-menu a.selected{text-shadow:0 0 2px #95ffae , 0 0 2px #95ffae , 0 0 4px #95ffae , 0 0 10px #95ffae , 0 0 10px #95ffae;}
nav#menu-main #menu > li#mypage .btn::after{display:block; content:"▼"; position:absolute; top:11px; right:10px; color:#00ba9e; transition:all .2s ease-in-out;}
nav#menu-main #menu > li#mypage .btn.open::after{top:13px; color:#95ffae; transform:rotate(180deg);}

nav#menu-main #menu > li .pc{display:none;}
nav#menu-main #menu > li .sp{display:block;}
}

@media screen and (min-width:641px) and (max-width:980px){nav#menu-main #menu > li .second-menu li + li{border-top:1px solid #07343f}}
@media screen and (max-width:640px){
nav#menu-main #menu{align-items:flex-start; padding-top:90px;}
nav#menu-main #logo{height:80px; background-size:auto 120% , 40px auto !important;}
nav#menu-main #logo a{width:60px;}
nav#menu-main #menu > li{width:50% !important; font-size:18px;}
nav#menu-main #menu > li:nth-child(odd){border-right:1px solid #c17c00;}
nav#menu-main #menu > li .second-menu{position:relative; width:200%; margin-left:-100%;}
nav#menu-main #menu > li .second-menu > ul{display:flex; flex-wrap:wrap;}
nav#menu-main #menu > li .second-menu > ul li{position:relative; width:50%; border-top:1px solid #c17c00;}
nav#menu-main #menu > li .second-menu > ul li:nth-child(odd){border-right:1px solid #c17c00;}
nav#menu-main #menu > li .second-menu > ul li:nth-last-child(2)::after,
nav#menu-main #menu > li .second-menu > ul li:nth-last-child(1)::after{
display:block;
content:"";
position:absolute;
bottom:-1px;
left:0;
width:100%;
height:1px;
background:#c17c00;}
nav#menu-main #menu > li#mypage .btn::after{top:9px;}
nav#menu-main #menu > li#mypage .btn.open::after{top:13px;}}
@media screen and (max-width:390px){nav#menu-main #menu > li .second-menu{font-size:15px;}}

/*
=====================================================================
スクロールメニュー固定
=====================================================================
*/
nav#menu-main.fixed{position:fixed; top:0;}
nav#menu-main.fixed #btn-toggle{position:fixed; top:30px;}
@media screen and (max-width:640px){nav#menu-main.fixed #btn-toggle{top:25px;}}

/*
=====================================================================
ANIMATION - SPサイズボタン
=====================================================================
*/
#btn-toggle{display:none;}

@media screen and (max-width:980px){
#btn-toggle{
display:block;
position:absolute;
top:30px;
right:30px;
width:60px;
height:52px;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,.6));
transform:translateZ(0);
cursor:pointer;}
#btn-toggle p{
position:absolute;
left:0;
width:100%;
height:13px;
background-image:url(../img/menu/toggle.png);
background-size:100% auto;
background-repeat:no-repeat;
transition:all .2s ease-in;}
#btn-toggle p:nth-child(1){top:0; background-position:top; transform-origin:top right;}
#btn-toggle p:nth-child(2){top:calc(50% - 6.5px); background-position:center;}
#btn-toggle p:nth-child(3){bottom:0; background-position:bottom; transform-origin:bottom right;}
#btn-toggle.open p:nth-child(1){top:3px; left:-9px; transform:rotate(-35deg);}
#btn-toggle.open p:nth-child(2){opacity:0;}
#btn-toggle.open p:nth-child(3){bottom:3px; left:-8px; background-position:center; transform:rotate(35deg);}
}

@media screen and (max-width:640px){
#btn-toggle{top:25px; right:20px; width:34px; height:30px;}
#btn-toggle p{height:10px;}
#btn-toggle p:nth-child(2){top:calc(50% - 5px);}
#btn-toggle.open p:nth-child(1){left:-5px;}
#btn-toggle.open p:nth-child(3){bottom:0; left:-5px;}}

/*
=====================================================================
ANIMATION - オンマウス
=====================================================================
*/
@keyframes particle{
0%{background-position:0 0;}
100%{background-position:0 -120px;}}

/*
=====================================================================
ANIMATION - SPサイズMENU用
=====================================================================
*/
@media screen and (max-width:980px){
nav#menu-main.slide #menu{
transform:translateY(0) !important;
animation-name:fadeMenu;
animation-duration:1s;}}

@keyframes fadeMenu{
0%{opacity:0;}
80%{opacity:1;}
100%{opacity:1;}}