/*切替*/
@media screen and (min-width:1201px){#menu-pc{display:flex;}}
@media screen and (max-width:1200px){#menu-pc{display:none;}}

nav#menu{width:100%; position:absolute; top:50px; left:0; font-family:'Noto Sans JP', sans-serif;}

#menu-pc .search,
#menu-pc .sns,
#menu-pc .blank{display:none !important;}

#menu-pc li.none{pointer-events:none;}
#menu-pc li.none a{opacity:.4;}

/*
================================================================================================================
PC MENU
================================================================================================================
*/
/*MENU全体*/
#menu-pc{position:relative; width:100%; top:0; left:0; background:linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(109,162,24,0.8) 100%); align-items:center;}
@media screen and (max-width:1300px){#menu-pc{font-size:13px;}}

#menu-pc .long br{display:none;}

/*
=============================
MENU
=============================
*/
/*メニュー左エリア - タイトルロゴ*/
#title-pc{width:12%; position:relative;}
#title-pc a{display:flex; width:100%; height:100%; justify-content:center; align-items:center; padding:10px;}
#title-pc a img{width:90%;}
#title-pc a:hover img{opacity:.7;}

/*メニュー右エリア*/
#menu-main{width:88%;}
#menu-main a{transition:all .3s ease;}

/*
================================================================================================================
第1階層
================================================================================================================
*/
#menu-main > ul{display:flex; width:100%; align-items:flex-end; justify-content:space-between;}
#menu-main > ul > li{width:calc(100% / 9); color:#fff; text-align:center;}
#menu-main > ul .first-menu a{display:block; position:relative; transition:background .3s ease;}

/*ボタン*/
#menu-pc .btn{
display:flex;
position:relative;
width:100%;
height:100px;
color:#fff;
margin:0 auto;
cursor:pointer;
justify-content:center;
align-items:center;
transition:all .3s ease;}
#menu-pc .btn:hover{color:#1e3207; background:#a9e54a;}

#menu-pc li.ea .btn{color:#50ffc3;}
#menu-pc li.ea .btn:hover{color:#009551;}

/*
================================================================================================================
第2階層
================================================================================================================
*/
#menu-pc .second-menu{
position:absolute;
top:100%;
left:0;
width:100%;
max-height:0;
overflow:hidden;
opacity:0;
transition:all .3s ease;}

#menu-pc .second-menu ul{display:flex; width:100%; flex-wrap:wrap; height:auto !important;}
#menu-pc .second-menu ul li{width:25%; transition:all .3s ease;}
#menu-pc .second-menu ul li a{color:#fff; padding:0 5px 20px;}
@media screen and (max-width:1300px){#menu-pc .second-menu ul li{width:calc(100% / 3);}}

/*メイン第2階層装飾*/
#menu-pc .second-menu > ul{
display:flex;
width:100%;
height:auto !important;
background:#000;
font-weight:700;
padding:20px 10px 0;
margin:0 auto;
flex-wrap:wrap;}

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

/*
=============================
第2階層 装飾
=============================
*/
/*HOWTO*/
#menu-pc #menu02 .second-menu ul{padding:10px 10px 0;}
#menu-pc #menu02 .second-menu ul > li{width:calc(20% - 10px) !important; margin:0 5px;}
#menu-pc #menu02 .second-menu ul > li > p{padding:0 0 5px !important; color:#fff800; font-size:12px; border-bottom:1px solid #fff800;}
#menu-pc #menu02 .second-menu ul > li > .third-menu{display:block !important; padding:0 !important; margin:0 auto 10px !important;}
#menu-pc #menu02 .second-menu ul > li > .third-menu ul li{display:block; width:100% !important;}
#menu-pc #menu02 .second-menu ul > li > .third-menu ul li a{color:#fff; padding:5px !important; border:none; transition:all .3s ease;}
#menu-pc #menu02 .second-menu ul > li > .third-menu ul li a:hover{text-shadow:0 0 10px #fff800 , 0 0 5px #fff800;}
@media screen and (max-width:1300px){#menu-pc #menu02 .second-menu ul > li{width:calc((100% / 3) - 10px) !important;}}

#menu-pc .second-menu > ul li > ul li:hover,
#menu-pc .second-menu li:hover{text-shadow:0 0 10px #50ffc3, 0 0 5px #50ffc3;}

/*第2階層 課金系コース*/
#menu-pc .second-menu ul li.icn-b a:after,
#menu-pc .second-menu ul li.icn-p a:after{
display:block;
width:100%;
text-align:center;
font-size:10px;}
#menu-pc .second-menu ul li.icn-b a:after{content:"ベーシックコース"; color:#50ffc3;}
#menu-pc .second-menu ul li.icn-p a:after{content:"プレミアムコース"; color:#a9e54a;}