nav#main-menu          {z-index:10 !important;}
nav#main-menu::before  {z-index:3 !important;}
nav#main-menu::after   {z-index:10 !important;}
nav#main-menu *        {z-index:20 !important;}

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
nav#main-menu{position:absolute; width:100%; max-width:2000px; min-width:320px;}
nav#main-menu #menu li{text-align:center;}
nav#main-menu #menu li a{display:block;}

nav#main-menu::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:linear-gradient(to bottom, rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 100%);
opacity:0;
transition:.2s ease-in-out;}
@media screen and (max-width:900px){nav#main-menu::before{height:150px;}}

nav#main-menu,
nav#main-menu::after,
nav#main-menu::before,
nav#main-menu #menu{pointer-events:none;}
nav#main-menu #sp-header,
nav#main-menu #menu li a{pointer-events:auto;}

nav#main-menu a,
nav#main-menu a img{transition:.2s ease-in-out;}
nav#main-menu a:hover img{transform:scale(1.05); filter:contrast(120%) drop-shadow(0 0 3px #fff)  drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff);}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:901px){
nav#main-menu{display:flex; justify-content:space-between;}
nav#main-menu::after{
display:block;
content:"";
position:absolute;
top:0;
/*left:0;*/
right:30px;
width:100%;
/*height:100%;*/height:300px;
background-image:url(../img/common/bg_menu.png);
background-repeat:no-repeat;
background-position:top right;}

nav#main-menu #sp-header{width:200px;}
nav#main-menu #sp-header #sp-btn{display:none;}
nav#main-menu #sp-header #sp-logo{padding:10px;}
nav#main-menu #sp-header #sp-logo img{width:100%; max-width:200px;}

nav#main-menu #menu{
display:flex;
width:120px;
height:300px;
/*width:calc(100% - 200px);*/
justify-content:center;
align-items:center;
flex-direction:column;
margin-right:30px;
padding-bottom:50px;
/*
padding:0 150px 0 0;
margin:0 auto;*/}
nav#main-menu #menu li + li{margin-top:20px;}
nav#main-menu #menu li a{display:block; width:140%; margin-left:-20%;}
nav#main-menu #menu li a img{width:100%;}}

/*
=====================================================================
MENU-SP
=====================================================================
*/
@media screen and (max-width:900px){
nav#main-menu #sp-logo{
display:block;
position:relative;
width:100%;
text-align:left;
padding:5px 10px;}
nav#main-menu #sp-logo img{max-height:90px;}

nav#main-menu #menu{
position:absolute;
top:-570px;
left:10px;
width:calc(100% - 20px);
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
margin:0 auto;
transition:.3s ease-in-out;}
nav#main-menu #menu li{width:100% !important;}
nav#main-menu #menu li + li{margin-top:10px;}
nav#main-menu #menu li a{color:#fff; background:linear-gradient(to bottom, #fd78a4 0%,#fe5490 100%); border-radius:20px; padding:10px; border:3px solid;}
nav#main-menu #menu li:nth-child(1) a::before{content:"TOP";}
nav#main-menu #menu li:nth-child(2) a::before{content:"プレゼントキャンペーン";}
nav#main-menu #menu li a img{display:none}}

@media screen and (max-width:480px){
nav#main-menu #sp-logo img{max-height:60px;}
nav#main-menu #menu{top:-600px;}}

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

@media screen and (max-width:900px){
#sp-btn{
display:block;
position:absolute;
top:calc(50% - 30px);
right:10px;
width:60px;
height:60px;
background:linear-gradient(to bottom, #fd78a4 0%,#fe5490 100%);
border-radius:8px;
cursor:pointer;}

#sp-btn span{
display:block;
position:absolute;
left:10px;
height:4px;
width:40px;
background:#fff;
transition:.35s ease-in-out;}

#sp-btn span:nth-child(1){top:20px;}
#sp-btn span:nth-child(2){top:calc(50% - 2px);}
#sp-btn span:nth-child(3){bottom:20px;}

#sp-btn.open span:nth-child(1){top:30px; transform:rotate(315deg);}
#sp-btn.open span:nth-child(2){width:0; left:50%; opacity:0;}
#sp-btn.open span:nth-child(3){top:30px; bottom:unset; transform:rotate(-315deg);}}

@media screen and (max-width:480px){
#sp-btn{top:calc(50% - 23px); width:46px; height:46px; border-radius:5px;}
#sp-btn span{left:5px; height:3px; width:36px;}
#sp-btn span:nth-child(1){top:14px;}
#sp-btn span:nth-child(2){top:calc(50% - 1.5px);}
#sp-btn span:nth-child(3){bottom:13px;}
#sp-btn.open span:nth-child(1){top:23px;}
#sp-btn.open span:nth-child(2){width:0;}
#sp-btn.open span:nth-child(3){top:23px; bottom:unset;}}

/*
=====================================================================
スクロールメニュー固定
=====================================================================
*/
nav#main-menu.fixed{position:fixed; top:0;}
nav#main-menu.fixed::before{opacity:1;}
nav#main-menu.fixed a,
nav#main-menu.fixed #sp-btn{filter:drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 0 2px rgba(255,255,255,.5));}
nav#main-menu.fixed::after{filter:drop-shadow(0 0 10px rgba(255,255,255,.5));}

/*
=====================================================================
ANIMATION - SPサイズMENU用
=====================================================================
*/
@media screen and (max-width:900px){
.slide #menu{
transform:translateY(670px);
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:liner;}}

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