@charset "Shift-JIS";

header#id_nav_menu_1            {z-index:9999 !important;}
footer                          {position:relative; z-index:10 !important;}

nav#main-menu                   {z-index:9999 !important;}
nav#main-menu .main-menu        {z-index:90 !important;}
nav#main-menu #sp-menu-btn      {z-index:999 !important;}
nav#main-menu #sp-logo          {z-index:100;}
nav#main-menu #sp-btn           {z-index:9999 !important;}
nav#main-menu #sp-btn #toggle   {z-index:9999 !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:800px){
header#id_nav_menu_1{z-index:10000 !important;}}

/*
================================================================================================================
COMMON
================================================================================================================
*/
nav#main-menu{
position:relative;
width:100%;
color:#fff;
font-weight:500;
font-family:'M PLUS Rounded 1c', sans-serif;
text-align:center;
transform:rotate(0.05deg);
padding:0;}
nav#main-menu img{width:100%;}
nav#main-menu a{display:block;}

/*全階層ul共通*/
nav#main-menu ul{
display:flex;
width:100%;
align-items:center;
margin:0 auto;}

/*第1階層MENU*/
nav#main-menu .first-menu:hover{cursor:pointer;}

/*
================================================================================================================
PC
================================================================================================================
*/
@media screen and (min-width:801px){
nav#main-menu{max-width:980px; background-color:#fff; margin:0 auto;}
nav#main-menu #menu00{display:none;}
#pc-menu{display:block;}
#sp-btn{display:none;}
#sp-menu{display:none;}

/*全階層共通 アニメーション*/
nav#main-menu .first-menu,
nav#main-menu .second-menu,
nav#main-menu .second-menu ul li a{transition:all 0.3s ease;}

/*第1階層MENU*/
nav#main-menu #pc-menu > ul{font-size:18px; flex-wrap:wrap; margin:0 auto;}

nav#main-menu #pc-menu > ul.main-menu > li{
position:relative;
height:54px;
background-color:#000;
background-repeat:no-repeat;
background-position:left 10px center;
border-radius:26px;
border:2px solid #251dca;
box-shadow:0 2px 0 #ff6900;}
nav#main-menu #pc-menu > ul.main-menu > li#menu01{background-image:url(../images/menu/icn01.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu02{background-image:url(../images/menu/icn02.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu03{background-image:url(../images/menu/icn03.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu04{background-image:url(../images/menu/icn04.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu05{background-image:url(../images/menu/icn05.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu06{background-image:url(../images/menu/icn06.png);}
nav#main-menu #pc-menu > ul.main-menu > li#menu07{background-image:url(../images/menu/icn07.png);}

nav#main-menu #pc-menu > ul.main-menu > li#menu01,
nav#main-menu #pc-menu > ul.main-menu > li#menu02,
nav#main-menu #pc-menu > ul.main-menu > li#menu03{width:calc((100% / 3) - 10px); margin:8px 5px 0;}
nav#main-menu #pc-menu > ul.main-menu > li#menu04,
nav#main-menu #pc-menu > ul.main-menu > li#menu05,
nav#main-menu #pc-menu > ul.main-menu > li#menu06,
nav#main-menu #pc-menu > ul.main-menu > li#menu07{width:calc((100% / 4) - 10px); margin:8px 5px;}

nav#main-menu #pc-menu > ul.main-menu > li#menu01 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu02 a.first-menu{border:4px solid #ff81b1;}
nav#main-menu #pc-menu > ul.main-menu > li#menu03 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu04 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu05 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu06 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu07 .menubtn{border:4px solid #ffe208;}

nav#main-menu #pc-menu > ul.main-menu > li#menu01 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu02 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu03 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu04 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu05 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu06 a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu07 .menubtn{
border-radius:24px;
height:50px;
color:#fff;
line-height:43px;
text-shadow:2px 2px 0 #251dca,-2px -2px 0 #251dca,
            2px -2px 0 #251dca,-2px 2px 0 #251dca,
            1px 1px 0 #251dca,-1px -1px 0 #251dca,
            -1px 1px 0 #251dca,1px -1px 0 #251dca,
            0px 2px 0 #251dca,2px 0px 0 #251dca,
            0px -2px 0 #251dca,-2px 0px 0 #251dca,
            0px 0px 0 #251dca;}

nav#main-menu #pc-menu > ul.main-menu > li:hover{top:2px; box-shadow:0 2px 0 rgba(255,255,255,0);}
nav#main-menu #pc-menu > ul.main-menu > li#menu01:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu02:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu03:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu04:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu05:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu06:hover a.first-menu,
nav#main-menu #pc-menu > ul.main-menu > li#menu07:hover .menubtn{border:4px solid #fff;}

/*第2階層MENU*/
nav#main-menu .second-menu{
display:block !important;
position:absolute !important;
top:53px;
width:100% !important;
max-height:0;
overflow:hidden;
opacity:0;}
nav#main-menu .second-menu > ul{flex-wrap:wrap;}
nav#main-menu .second-menu > ul li{
width:100% !important;
height:auto !important;
background-color:rgba(255,255,255,0.95);
font-size:15px;
font-weight:800 !important;
line-height:120% !important;
border:1px solid #251dca !important;}
nav#main-menu .second-menu > ul li:not(:first-child){border-top:none !important;}
nav#main-menu .second-menu > ul li a{color:#251dca; padding:8px 0;}
nav#main-menu .second-menu > ul li a:hover{background-color:#68b5f9;}

/*第2階層MENU OPEN*/
li.first-menu:hover > .second-menu{max-height:999px !important; opacity:1 !important;}
li.first-menu:hover > .second-menu ul{height:auto !important;}}

@media screen and (min-width:801px) and (max-width:980px){
nav#main-menu #pc-menu > ul{font-size:15px;}
nav#main-menu #pc-menu .second-menu > ul li{font-size:13px;}}

/*
================================================================================================================
SP
================================================================================================================
*/
@media screen and (max-width:800px){
nav#main-menu{position:absolute; top:50px; left:0;}

#pc-menu{display:none;}
#sp-menu{display:block;}
#sp-btn{display:block; position:absolute; right:0; width:50px; height:50px; background-color:#f00;}

/*第1階層MENU*/
nav#main-menu ul{height:auto; flex-wrap:wrap;}
nav#main-menu ul li{width:100%; font-size:16px; font-weight:800; transform:rotate(0.05deg);}
li.first-menu > div:first-of-type,a.first-menu{color:#251dca; padding:8px 0; border-bottom:1px solid #251dca;}
li.first-menu{width:100%;}

nav#main-menu #menu00{background-image:url(../images/menu/bg.png) !important; border-bottom:1px solid #251dca;}
nav#main-menu #menu00 img{max-width:150px;}

nav#main-menu #sp-menu > ul{ background-color:rgba(255,255,255,0.95);}
li.first-menu > div:first-of-type:hover,a.first-menu:hover{color:#ff3250;}
nav#main-menu #sp-menu > ul > li:hover{background-color:#ffff54;}

/*第1階層MENU 全体非表示*/
nav#main-menu #sp-menu{position:absolute; top:-550px; width:100%;}
nav#main-menu #sp-menu > ul{width:100%;}

/*第1階層MENU ボタン用トグル装飾*/
#menu07 .menubtn{position:relative;}
#menu07 .menubtn::after{
display:block !important;
visibility:visible !important;
content:"▼";
position:absolute;
top:8px;
right:10px;
font-size:14px;
font-weight:normal;}
#menu07 div.menubtn.open::after{content:"▲";}

/*第2階層MENU*/
nav#main-menu .second-menu{display:none;}
nav#main-menu .second-menu > ul{position:relative; flex-wrap:wrap; border-bottom:1px solid #251dca;align-items:stretch;}
nav#main-menu .second-menu > ul li{width:50%; background-color:#81ccff; font-size:14px; font-weight:400; text-align:center;display:flex;}
nav#main-menu .second-menu > ul li a{color:#251dca; padding:8px 0;display:flex; align-items:center; justify-content:center;width:100%;}

nav#main-menu .second-menu > ul li:hover{background-color:#251dca;}
nav#main-menu .second-menu > ul li:hover a{color:#fff;}

nav#main-menu .second-menu > ul li:nth-child(odd) + li:nth-child(even){border-left:1px solid #251dca;}
nav#main-menu .second-menu > ul li:first-child,
nav#main-menu .second-menu > ul li:nth-child(2),
nav#main-menu .second-menu > ul li:nth-child(3),
nav#main-menu .second-menu > ul li:nth-child(4),
nav#main-menu .second-menu > ul li:nth-child(5),
nav#main-menu .second-menu > ul li:nth-child(6),
nav#main-menu .second-menu > ul li:nth-child(7){border-bottom:1px solid #251dca;}}
nav#main-menu .second-menu > ul li.none{display:none;}

@media screen and (max-width:370px){
nav#main-menu ul li{font-size:14px;}
nav#main-menu .second-menu > ul li{font-size:12px;}}

/*
================================================================================================================
ANIMATION - SP版MENU OPEN
================================================================================================================
*/
@media screen and (max-width:800px){
.slide #sp-menu{
transform:translateY(550px);
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:liner;}}

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

/*
================================================================================================================
SP版MENUボタン
================================================================================================================
*/
@media screen and (max-width:800px){
#sp-btn #toggle{
display:block;
position:absolute;
top:9px;
right:10px;
width:30px;
height:20px;
cursor:pointer;}
#sp-btn #toggle::after{display:block; position:absolute; width:50px; top:25px; right:-10px; content:"MENU"; font-size:11px;}

#sp-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;
margin:0 auto;}

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

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

/*
================================================================================================================
スクロールメニュー固定
================================================================================================================
*/
@media screen and (max-width:800px){
nav#main-menu.fixed{position:fixed; top:0;}
nav#main-menu.fixed #sp-btn #toggle{position:fixed; top:10px;}}