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 #logo             {z-index:100;}
nav#main-menu #menu             {z-index:90 !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:980px){
header#id_nav_menu_1{z-index:10000 !important;}}

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
nav#main-menu{
position:relative;
width:100%;
min-width:320px;
color:#fff;
background:#0cabd6; 
font-family:"Zen Maru Gothic", sans-serif;
font-weight:700;}

nav#main-menu #sp-menu-btn{display:none;}

nav#main-menu #menu{display:flex; width:100%; align-items:center; margin:0 auto;}
nav#main-menu #menu li{text-align:center; font-size:24px;}
nav#main-menu #menu li a{display:block; color:#fff;}
nav#main-menu #menu li.selected a:hover{pointer-events:none;}
nav#main-menu #menu li,
nav#main-menu #menu li a{transition:.2s ease-in-out;}

nav#main-menu #logo a img{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:981px){
nav#main-menu{display:flex; padding:0 20px; border-bottom:4px solid #0c8ed3;}
nav#main-menu #logo{display:block; position:relative; width:170px;}
nav#main-menu #logo a{display:block; position:absolute; width:100%; top:10px; left:0;}
nav#main-menu #logo a img{width:100%;}
nav#main-menu #menu{width:calc(100% - 170px); justify-content:center; padding:20px 0;}
nav#main-menu #menu li{border:2px solid #0cabd6; border-radius:15px;}
nav#main-menu #menu li + li{margin-left:30px;}
nav#main-menu #menu li a{padding:10px 30px; filter:drop-shadow(0 0 1px #0c8ed3) drop-shadow(2px 2px 0 #0c8ed3) drop-shadow(-2px -2px 0 #0c8ed3) drop-shadow(2px -2px 0 #0c8ed3) drop-shadow(-2px 2px 0 #0c8ed3);}

nav#main-menu #menu li:hover,
nav#main-menu #menu li.selected{background:#ff9320; border:2px solid #f1592e; box-shadow:inset 0 0 5px #f1592e , inset 0 0 5px #f1592e , inset 0 0 10px #f1592e;}
nav#main-menu #menu li:hover a,
nav#main-menu #menu li.selected a{filter:drop-shadow(0 0 1px #ff9da2) drop-shadow(2px 2px 0 #ff9da2) drop-shadow(-2px -2px 0 #ff9da2) drop-shadow(2px -2px 0 #ff9da2) drop-shadow(-2px 2px 0 #ff9da2);}

/*nav#main-menu #menu li a{height:80px; line-height:80px;}*/}

@media screen and (min-width:981px) and (max-width:1400px){
nav#main-menu #logo{width:150px;}
nav#main-menu #menu{width:calc(100% - 120px); padding:15px 0;}
nav#main-menu #menu li{font-size:20px;}
nav#main-menu #menu li + li{margin-left:10px;}
nav#main-menu #menu li a{padding:10px 20px;}}

/*
=====================================================================
MENU-SP
=====================================================================
*/
@media screen and (max-width:980px){
nav#main-menu{height:auto;}

nav#main-menu #logo{
display:block;
position:relative;
width:100%;
height:50px;
background:#0cabd6;
border-bottom:4px solid #0c8ed3;}
nav#main-menu #logo a{display:inline-block; padding:5px;}
nav#main-menu #logo a img{max-height:60px;}

nav#main-menu #sp-menu-btn{
display:block;
position:absolute;
top:0;
right:0;
width:50px;
height:50px;
transition:all .2s ease;}

nav#main-menu #menu{
width:100%;
position:absolute;
top:-550px;
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{height:49px; line-height:49px;}

nav#main-menu #menu li:hover,
nav#main-menu #menu li.selected{background:#ff9320;}}

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

/*
=====================================================================
スクロールメニュー固定
=====================================================================
*/
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:980px){
#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:980px){
.slide #menu{
transform:translateY(600px);
animation-name:fadeIn;
animation-duration:1s;}}

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