header#id_nav_menu_1            {z-index:9999 !important;}
nav#main-menu                   {z-index:9999 !important;}
nav#main-menu #sp-menu-btn      {z-index:9999 !important;}
nav#main-menu #sp-logo          {z-index:90;}
nav#main-menu #menu             {z-index:100 !important;}
nav#main-menu.fixed             {z-index:10000 !important;}
nav#main-menu.fixed #sp-menu-btn{z-index:10000 !important;}
@media screen and (max-width:900px){
header#id_nav_menu_1{z-index:10000 !important;}}

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
nav#main-menu{
position:relative;
width:100%;
min-width:320px;
color:#fff;
font-family:good-times, sans-serif;
font-weight:800;}

nav#main-menu #sp-menu-btn{display:none;}
nav#main-menu #sp-logo{display:block; position:relative; width:120px; padding:10px; transition:all .2s ease;}
nav#main-menu #sp-logo a img{width:100%; transition:all .2s ease;}
nav#main-menu #sp-logo a:hover img{filter:drop-shadow(0 0 3px #0070ff) drop-shadow(0 0 10px #0070ff);}

nav#main-menu #menu{width:100%;}
nav#main-menu #menu li{text-align:center; font-size:20px;}
nav#main-menu #menu li a{color:#fff; transition:.2s ease-in-out;}
nav#main-menu #menu li a:hover{text-shadow:0 0 2px #0070ff, 0 0 2px #0070ff, 0 0 10px #0070ff, 0 0 20px #0070ff;}
nav#main-menu #menu li.selected a{cursor:default; text-shadow:0 0 2px #0070ff, 0 0 2px #0070ff, 0 0 10px #0070ff, 0 0 20px #0070ff;}
nav#main-menu #menu li.none a{opacity:.4; pointer-events:none;}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:901px){
nav#main-menu{display:flex; align-items:center;}
nav#main-menu::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:150px;
background:linear-gradient(to bottom, rgba(0,0,0,1) 10%,rgba(0,0,0,0) 100%);
opacity:0;
transition:opacity .2s ease;
pointer-events:none;}
nav#main-menu.fixed::before{opacity:1;}

nav#main-menu #menu{display:flex; width:calc(100% - 120px); justify-content:space-between; align-items:center; pointer-events:none;}
nav#main-menu #menu li{flex-grow:1;}
nav#main-menu #menu li a{padding:10px; pointer-events:auto;}
nav#main-menu #menu li#sns{display:none;}}

@media screen and (max-width:1200px){
nav#main-menu #menu li{font-size:18px;}}

/*
=====================================================================
MENU-SP
=====================================================================
*/
@media screen and (max-width:900px){
nav#main-menu{height:auto;}
nav#main-menu #sp-menu-btn{
display:block;
position:absolute;
top:0;
right:0;
background:#0070ff;
width:50px;
height:50px;
transition:all .2s ease;}
nav#main-menu #sp-logo{position:absolute; top:0; left:0;}
nav#main-menu.fixed #sp-logo{opacity:0; pointer-events:none;}
nav#main-menu #menu{
width:100%;
position:absolute;
top:-600px;
background-color:rgba(0,0,0,0.95);
flex-wrap:wrap;
transition:.3s ease-in-out;
margin:0 auto;}
nav#main-menu #menu li{width:100% !important; border-bottom:1px solid #fff;}
nav#main-menu #menu li a{display:block; height:49px; line-height:49px;}

nav#main-menu #menu li#sns{display:flex; width:100%; justify-content:center; align-items:center; padding:5px 0;}
nav#main-menu #menu li#sns a{width:40px; height:unset; line-height:unset;}
nav#main-menu #menu li#sns a img{width:100%; transition:.35s ease-in-out;}
nav#main-menu #menu li#sns a:hover img{opacity:.7;}}

@media screen and (max-width:480px){
nav#main-menu #sp-logo{width:90px;}
nav#main-menu #menu li{font-size:14px;}}

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

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

@media screen and (max-width:900px){
#btn-toggle{
display:block;
position:absolute;
top:0;
right:0;
width:50px;
height:50px;
cursor:pointer;}

#btn-toggle span{
display:block;
position:absolute;
left:10px;
height:3px;
width:30px;
background-color:#fff;
transition:.35s ease-in-out;}

#btn-toggle span:nth-child(1){top:16px;}
#btn-toggle span:nth-child(2){top:calc(50% - 1.5px);}
#btn-toggle span:nth-child(3){top:32px;}

.open #btn-toggle span:nth-child(1){top:calc(50% - 1.5px); transform:rotate(315deg);}
.open #btn-toggle span:nth-child(2){width:0; left:50%;}
.open #btn-toggle span:nth-child(3){top:calc(50% - 1.5px); transform:rotate(-315deg);}}

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

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