@charset "Shift-JIS";

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: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:900px){
header#id_nav_menu_1{z-index:10000 !important;}}

/*
=====================================================================
MENU-COMMON
=====================================================================
*/
nav#main-menu{
position:relative;
width:100%;
min-width:320px;
color:#fff;
background-color:#ffd552;
font-family: "M PLUS Rounded 1c";
transform:rotate(0.05deg);

/*
background:-moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(16,0,37,0.9) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(16,0,37,0.9) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(16,0,37,0.9) 100%);
*/
font-weight:600;
border-bottom:4px solid #ffc100;
/*filter:drop-shadow(0px 10px 5px rgba(84,115,47,0.3));*/}

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

nav#main-menu #menu{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
margin:0 auto;}
nav#main-menu #menu li{text-align:center; font-size:20px;}
nav#main-menu #menu li:first-child img{width:100%; width:auto; height:100%;}

nav#main-menu #menu li a{
position:relative;
display:inline-block;}
nav#main-menu #menu li:not(:first-child) a{
color:#0c2d57;
text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.9);
transition:.2s ease-in-out;}

nav#main-menu #menu li:not(:first-child) a::after{
position:absolute; 
display:block; 
content:""; 
width:100%; 
height:4px; 
background-color:#8fc5ff; 
border-radius:4px; 
left:0;
top:70%; 
transition:.2s ease-in-out;
opacity:0;}

nav#main-menu #menu li:not(:first-child) a:hover{position:relative; color:#ff6a7a; text-shadow:2px 2px 0px rgba(255, 255, 255, 0.9); margin:0 auto;}
nav#main-menu #menu li:not(:first-child) a:hover::after{opacity:1;}

nav#main-menu #menu li:first-child a:hover{}
nav#main-menu #menu li.selected a{}
nav#main-menu #menu li.selected a:hover{cursor:default;}

/*
=====================================================================
MENU-PC
=====================================================================
*/
@media screen and (min-width:901px){
nav#main-menu #sp-logo{display:none;}
nav#main-menu #menu{height:80px;}
nav#main-menu #menu li{flex-grow:1;}

nav#main-menu #menu li a{height:80px;}
nav#main-menu #menu li:not(:first-child) a{line-height:80px;}
nav#main-menu #menu li:first-child a{padding:5px 0 0 0; overflow:hidden;}}

@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-logo{
display:block;
position:relative;
width:100%;
height:60px;
background-color:#ffd552;
/*
background:-moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(16,0,37,0.9) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(16,0,37,0.9) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(16,0,37,0.9) 100%);*/
text-align:left;
padding:5px;}
nav#main-menu #sp-logo img{max-height:50px;}

nav#main-menu #sp-menu-btn{
display:block;
position:absolute;
top:0;
right:0;
width:60px;
height:60px;}

nav#main-menu #menu{
width:100%;
position:absolute;
top:-600px;
background-color:#8fc5ff;
flex-wrap:wrap;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
transition:.3s ease-in-out;
margin:0 auto;}
nav#main-menu #menu li{width:100% !important; border-bottom:1px solid #2e0055;}
nav#main-menu #menu li:first-child{display:none;} /*
nav#main-menu #menu li:nth-child(2){border-top:1px solid #c4f408;}*/
nav#main-menu #menu li a{padding:10px;}}

@media screen and (max-width:480px){
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:20px;
right:12px;
width:32px;
height:30px;
cursor:pointer;}

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

#btn-toggle span:nth-child(1){top:0;}
#btn-toggle span:nth-child(2){top:9px;}
#btn-toggle span:nth-child(3){top:18px;}

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

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

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