@charset "Shift-JIS";

.first-menu.none{opacity:.5; pointer-events:none;}

/*
================================================================
PC MENU
================================================================
*/
/*MENU全体*/
#menu-global-pc{
position:absolute;
width:100%;
max-width:2000px;
top:50px;
/*position:relative;*/
height:auto;
margin:0 auto;/*
background-image:url(../images/menu/main_bg.png);
background-repeat:no-repeat;
background-size:auto 100%;
background-position:top center;*/
background:rgba(255, 255, 255, 0.3);
background:-moz-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.6) 100%);
background:-webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.6) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.6) 100%);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);  
border-bottom:2px solid #0084ff;
z-index:3;}

/*説明*/
#menu-exp{
position:relative;
width:70%;
padding:5px 0 0;
margin:0 0 0 auto;}
#menu-exp ul{display:flex;;}
#menu-exp ul li{
width:50%;
height:20px;
color:#fff;
font-size:12px;
font-family:'Noto Sans JP', sans-serif;
line-height:20px;
text-shadow:0px 1px 0 #000 , 1px 1px 0 #000, 1px 0px 0 #000,
            0px -1px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000,
            -1px 1px 0 #000, 1px -1px 0 #000;}
#menu-exp ul li img{margin:0 10px 4px 0;}

/*PC MENU*/
#menu-pc-main{
display:flex;
width:100%;
max-width:2000px;
align-items:flex-end; 
margin:0 auto;}

/*PC MENU用ロゴ*/
/*#title-pc-top,
#title-pc-bottom{
position:absolute;
left:0;
width:28%;}
#title-pc-top img,#title-pc-bottom img{width:100%;}
#title-pc-top{max-width:503px; bottom:0; z-index:20 !important;}
#title-pc-bottom{max-width:293px; top:140px; z-index:2 !important;}*/

/*メインメニュー内 li タイトル用クラス*/
#menu-pc-main .title-menu{/*flex-basis:28%; max-width:503px;*/width:30%; text-align:center;}
#menu-pc-main .title-menu img{width:100%; max-width:400px;}

/*メインメニュー内 li 第1階層メニュー用クラス*/
#menu-pc-main .first-menu{width:calc(70% / 8); color:#fff;}
#menu-pc-main .first-menu img{width:90%; /*max-width:169px;*/}

/*通知機能*/
#menu-global-pc #menu-pc-main .first-menu a{display:block; position:relative;}
#menu-global-pc #menu-pc-main .first-menu a p.alert{
position:absolute;
top:-5px;
right:0;
width:auto;
font-size:11px;
font-weight:bold;
text-align:right;
background-color:#f00;
padding:3px 5px;}
#menu-global-pc #menu-pc-main .first-menu ul li a p.alert{
display:inline-block !important;
position:relative !important;
right:auto !important;
margin:0 0 0 5px;}

#menu-global-pc:hover a p.alert,
#menu-pc-main:hover a p.alert,
#menu-pc-main .first-menu:hover a p.alert,
#menu-pc-main .first-menu a:hover p.alert{color:#fff !important;}

/*
================================================================
レイアウト調整
================================================================
*/
@media screen and (max-width:1700px){
#menu-pc-main .first-menu img{width:100%;}}

@media screen and (max-width:1500px){
#menu-exp{width:80%; padding:10px 0;}
#menu-pc-main .title-menu{width:20%;}
#menu-pc-main .first-menu{width:calc(80% / 8);}}

/*1200以下*/
/*ロゴなしメニューのみ*/
@media screen and (max-width:1200px){
/*#menu-global-pc{height:75px;}
#title-pc-top,#title-pc-bottom{display:none;}
#menu-pc-bottom{height:20px;}*/

#menu-pc-main .title-menu{display:none;}
#menu-pc-main .first-menu{width:100%;}
#menu-pc-main .first-menu img{width:90%;}

#menu-exp{width:100%; margin:0; padding:5px 10px;}
#menu-exp ul li{font-size:11px;}}

/*ロゴなしメニュー用TOPボタン*/
@media screen and (min-width:1100px) and (max-width:1200px){
#top-btn a{
display:block;
position:absolute;
top:0;
right:0;
width:120px;
height:20px;
background-image:url(../images/menu/pc/top_off.png);
z-index:3;}
#top-btn a:hover{background-image:url(../images/menu/pc/top_on.png);}}

/*1100以下*/
@media screen and (max-width:1100px){
#menu-global-pc{display:none;}}

/*
================================================================
PC-MENU-MAIN
================================================================
*/
.menu-pc a{
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all  0.3s ease;}

.menu-pc > ul{
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
position:relative;
width:100%;
box-sizing:border-box;
list-style:none;
margin:0 auto;
padding:0;}

.menu-pc > ul:before,
.menu-pc > ul:after{content:""; display:table;}
.menu-pc > ul:after{clear:both;}

.menu-pc > ul > li{float:left; padding:0; margin:0;}
.menu-pc > ul > li a{display:block; color:#fff; text-decoration:none;}
.menu-pc > ul > li a:hover{color:#ffe382;}

/*オンマウスメニュー*/
.menu-pc > ul > li > ul{
display:none;
position:absolute;
left:0;
width:100%;
background:rgba(0,0,0,1);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.9) 100%);
list-style:none;
box-sizing:border-box;
border-top:2px solid #0084ff;
border-bottom:2px solid #0084ff;
text-shadow:0px 1px 3px #000000;
margin:0;
z-index:99;}

.menu-pc > ul > li > ul:before,
.menu-pc > ul > li > ul:after{content:""; display:table;}
.menu-pc > ul > li > ul:after{clear:both; visibility:visible;}

.menu-pc > ul > li > ul > li{
list-style:none;
/*width:25%;*/
width:20%;
margin:10px 0;
padding-bottom:0;
background:none;
float:left;}

.menu-pc > ul > li > ul > li a{
display:block;
width:95%;
border-bottom:1px solid #dcd2af;
margin:0 0 0 1%;
padding:10px 0 10px 10px;}

.menu-pc > ul > li > ul > li > ul{
display:block;
padding:0;
margin:10px 0 0;
list-style:none;
box-sizing:border-box;}

.menu-pc > ul > li > ul > li > ul:before,
.menu-pc > ul > li > ul > li > ul:after{content:""; display:table;}
.menu-pc > ul > li > ul > li > ul:after{clear:both;}

/*第3階層*/
.menu-pc > ul > li > ul > li > ul > li{float:left; width:100%; font-size:12px; margin:0;}
.menu-pc > ul > li > ul > li > ul > li a{display:block; border:0; padding:5px 0 5px 10px;}

/*第2階層 子メニューなしの場合*/
.menu-pc > ul > li > ul.normal-sub{width:100%;}
.menu-pc > ul > li > ul.normal-sub > li{float:left; width:20%; font-size:14px; text-align:center;}
.menu-pc > ul > li > ul.normal-sub > li a{display:block; position:relative; border:0; padding:15px 0; margin:0 auto 5px auto;}

/*第2階層 課金系コース*/
.menu-pc > ul > li > ul.normal-sub > li.icn-b a:after,
.menu-pc > ul > li > ul.normal-sub > li.icn-p a:after,
.menu-pc > ul > li > ul.normal-sub > li.icn-s a:after{
content:'';
display:block;
position:absolute;
bottom:0;
width:100%;
height:14px;
background-position:center;
background-repeat:no-repeat;}
.menu-pc > ul > li > ul.normal-sub > li.icn-b a:after{background-image:url(../images/menu/icn/basic_course.png);}
.menu-pc > ul > li > ul.normal-sub > li.icn-p a:after{background-image:url(../images/menu/icn/premium_course.png);}
.menu-pc > ul > li > ul.normal-sub > li.icn-s a:after{background-image:url(../images/menu/icn/specific.png);}

@media screen and (max-width:1400px){
.menu-pc > ul > li > ul > li,
.menu-pc > ul > li > ul.normal-sub > li{font-size:12px;}}

/*
- Name:megamenu.js - style.css
- Version:1.0
- Latest update:29.01.2016.
- Author:Mario Loncarek
- Author web site:http://marioloncarek.com
*/