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

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
nav#menu{position:relative; width:100%; min-width:320px; background:#ffd552;}
nav#menu img{width:100%;}

#menu-inner *:not(img){position:relative; height:100%;}
#menu-inner > div a{
display:block;
width:100%;
background-image:url(../img/common/logo.png);
background-position:center;
background-repeat:no-repeat;
background-size:auto 96%;
transition:opacity .2s ease;}
#menu-inner > div a:hover{opacity:.7;}

#menu-inner > ul li a{display:flex; width:100%; height:100%; align-items:center; justify-content:center;}
#menu-inner > ul li a::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform-origin:left;
transform:scaleX(0);
transition:all .3s ease;}
#menu-inner > ul li a:hover::before,
#menu-inner > ul li.select a::before{transform:scaleX(1);}
#menu-inner > ul li:nth-child(1) a::before{background:#fff;}
#menu-inner > ul li:nth-child(2) a::before{background:#59de6c;}
#menu-inner > ul li:nth-child(3) a::before{background:#ff6a7a;}
#menu-inner > ul li a p{display:flex; align-items:center; justify-content:center;}
#menu-inner > ul li a p::before{
display:block;
content:"";
width:50px;
height:50px;
background-size:100% auto;
border-radius:5px;}
#menu-inner > ul li:nth-child(1) a p::before{background-color:#fff; background-image:url(../img/menu/icn01.png);}
#menu-inner > ul li:nth-child(2) a p::before{background-color:#59de6c; background-image:url(../img/menu/icn02.png);}
#menu-inner > ul li:nth-child(3) a p::before{background-color:#ff6a7a; background-image:url(../img/menu/icn03.png);}
#menu-inner > ul li a p img{max-width:140px;}

#menu-inner > ul li.selected a:hover{cursor:default;}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:801px){
#menu-inner{display:flex; max-width:980px; height:90px; margin:0 auto; align-items:center;}
#menu-inner > div{width:150px;}
#menu-inner > ul{width:calc(100% - 150px); display:flex; align-items:center; margin:0 auto;}
#menu-inner > ul li{width:calc(100% / 3); height:100%; text-align:left;}}

/*
=====================================================================
MENU-SP
=====================================================================
*/
@media screen and (max-width:800px){
#menu-inner > div{width:250px; height:60px; background:#ffd552; margin:0 auto 0 0;}
#menu-inner > div a{background-image:url(../img/common/logo_text.png); background-size:auto 90%;}
#menu-inner > ul{position:absolute; width:100%; height:unset; top:-220px; background:rgba(255,213,82,.9); border-top:2px solid #0c2d57; border-bottom:2px solid #0c2d57; transition:.3s ease-in-out;}
#menu-inner > ul li + li{border-top:1px dashed #0c2d57;}
#menu-inner > ul li{width:100% !important; padding:5px 0;}
#menu-inner > ul li a{padding:5px 0;}
.slide #menu-inner > ul{
transform:translateY(280px);
animation-name:fadeIn;
animation-duration:1s;}}

@media screen and (max-width:480px){
#menu-inner > ul li a p::before{width:35px; height:35px;}
#menu-inner > ul li a p img{max-width:110px;}}
@media screen and (max-width:380px){
#menu-inner > div{width:190px;}
#menu-inner > div a{background-size:96% auto;}}

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

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

/*
=====================================================================
トグルボタン
=====================================================================
*/
nav#menu #menu-sp{display:none;}

@media screen and (max-width:800px){
nav#menu #menu-sp{
display:block;
position:absolute;
top:5px;
right:5px;}
nav#menu #menu-sp > *{
display:block;
position:absolute;
top:0;
width:50px;
height:50px;
border-radius:5px;
transition:all .2s ease;
cursor:pointer;}

#sns{
right:60px;
background-color:#000;
background-image:url(../img/menu/x.png);
background-position:center;
background-repeat:no-repeat;
background-size:90% auto;}
#sns:hover{filter:invert(1);}

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

#btn-toggle span:nth-child(1){top:13px;}
#btn-toggle span:nth-child(2){top:calc(50% - 2.5px);}
#btn-toggle span:nth-child(3){top:33px;}

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