@charset "Shift-JIS";

@media screen and (min-width:1101px){nav#g-menu #menu-sp-bar,nav#g-menu ul#menu-sp{display:none;}}
@media screen and (max-width:1100px){nav#g-menu #menu-sp-bar,nav#g-menu ul#menu-sp{display:block;}}

/*
================================================================================================================
SP MENU - 固定ヘッダーボタン OPEN
================================================================================================================
*/
nav#g-menu #menu-sp-bar{
width:100%;
min-width:320px !important;
height:80px;
position:absolute;
top:50px;
background-image:url(../images/menu/main_bg.png);
background-repeat:no-repeat;
background-position:left;
background-size:cover;
box-shadow:0px 6px 7px -5px rgba(0,0,0,0.7);
z-index:2;}
nav#g-menu #menu-sp-bar ul{position:absolute; top:0; right:100px;}
nav#g-menu #menu-sp-bar ul li{float:left;}
nav#g-menu #menu-sp-bar ul li:first-child img{width:66px; margin:14px 5px 0 0;}
nav#g-menu #menu-sp-bar ul li:last-child img{width:50px; margin:14px 0 0 0;}
nav#g-menu #menu-sp-bar ul li img a{display:block;}
nav#g-menu #menu-sp-bar ul li img:hover{opacity:0.7;}

/*タイトルロゴ*/
#title-sp{padding-top:2px; filter:drop-shadow(1px 1px 0px rgba(0,0,0,0.6));}
#title-sp img{height:76px;}

/*SP版用メニュー 開閉ボタン*/
nav#g-menu #menu-sp-bar #menu-sp-btn{
display:block;
position:absolute;
top:0;
right:0;
width:80px;
height:80px;
background-image:url(../images/menu/sp/btn01.png);
z-index:3;}
nav#g-menu #menu-sp-bar #menu-sp-btn:hover{cursor:pointer;}

@media screen and (max-width:800px){
nav#g-menu #menu-sp-bar ul{right:90px;}
nav#g-menu #menu-sp-bar ul li:first-child img{width:46px; margin:26px 5px 0 0;}
nav#g-menu #menu-sp-bar ul li:last-child img{width:30px; margin:29px 0 0 0;}}

@media screen and (max-width:480px){
nav#g-menu #menu-sp-bar{height:40px; background-size:auto,auto,auto,auto 40px;}
nav#g-menu #menu-sp-bar ul{display:none;}
nav#g-menu #menu-sp-bar #menu-sp-btn{width:40px; height:40px; background-size:cover;}
#title-sp img{height:36px;}}

/*
================================================================================================================
SP MENU - MAIN MENU
================================================================================================================
*/
nav#g-menu ul#menu-sp{
position:fixed;
top:50px;
width:100%;
height:100%;
min-width:320px !important;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
box-shadow:0px 6px 11px -2px rgba(0,0,0,0.7);
z-index:999;}

nav#g-menu ul#menu-sp li{
position:relative;
font-size:14px;
font-weight:900;
font-family:'Noto Sans JP', sans-serif;
border-bottom:1px solid #000;}
nav#g-menu ul#menu-sp li:nth-child(even){border-right:1px solid #000;}
nav#g-menu ul#menu-sp li:last-child{border-right:none !important;}

nav#g-menu ul#menu-sp li div.cell{
display:table;
height:50px;
width:100%;
font-weight:900;
font-family:'Noto Sans JP', sans-serif;
text-align:center;}

nav#g-menu ul#menu-sp li div.cell-inner{
position:relative;
display:table-cell;
vertical-align:middle;}

/*通知*/
nav#g-menu #menu-sp-btn p.alert,
nav#g-menu ul#menu-sp p.alert{
position:absolute;
top:0;
right:0;
width:40px;
height:40px;
color:#fff;
background:linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%;
font-size:11px;
font-weight:bold;
text-align:right;
text-shadow:0px 1px 3px #000000;
padding:0 3px 0 0;}

nav#g-menu ul#menu-sp li{
width:50%;
float:left;
color:#fff;
text-align:center;}
nav#g-menu ul#menu-sp li:hover{cursor:pointer;}
nav#g-menu ul#menu-sp li a{display:block; color:#fff;}

/*タイトルロゴ・TOPに戻るエリア*/
nav#g-menu ul#menu-sp li:first-child,
nav#g-menu ul#menu-sp li:last-child{width:100%; text-align:center;}

/*タイトルロゴ*/
nav#g-menu ul#menu-sp li:first-child{
height:80px;
position:relative;
background-image:url(../images/menu/main_bg.png);
background-repeat:no-repeat;
background-position:left;
background-size:auto 80px;}
nav#g-menu ul#menu-sp li:first-child a{display:block;}
nav#g-menu ul#menu-sp li:first-child img{width:210px; padding-top:10px;}

/*TOPに戻るエリア*/
nav#g-menu ul#menu-sp li:last-child{
font-size:18px !important;
background-image:url(../images/menu/main_bg.png);
background-repeat:no-repeat;
background-position:left;
background-size:cover;
text-shadow:0px 1px 1px #001e3a , 0px 2px 1px #001e3a , 1px 0px 1px #001e3a , 2px 0px 1px #001e3a ,0px 0px 5px #001e3a , 0px 0px 3px #001e3a , 0px 0px 3px #001e3a , 0px 0px 2px #001e3a;}
nav#g-menu ul#menu-sp li:last-child a{display:block;}

@media screen and (max-width:480px){
nav#g-menu ul#menu-sp li:first-child{height:40px;}
nav#g-menu ul#menu-sp li:first-child img{width:100px; padding-top:5px;}

/*通知*/
nav#g-menu #menu-sp-btn p.alert,
nav#g-menu ul#menu-sp p.alert{
width:30px;
height:30px;
font-size:10px;
padding:0 2px 0 0;}}

/*
================================================================================================================
SP MENU - 固定ヘッダーボタン CLOSE
================================================================================================================
*/
#menu-sp-close{
display:block;
position:absolute;
right:0;
width:80px;
height:80px;
background-image:url(../images/menu/sp/btn02.png);
z-index:999;}
#menu-sp-close:hover{cursor:pointer;}

@media screen and (max-width:480px){#menu-sp-close{width:40px; height:40px; background-size:cover;}}

/*
================================================================================================================
SP MENU - メニューボタン装飾
================================================================================================================
*/
/*メニュー画像*/
nav#g-menu ul#menu-sp li div.cell img{width:100%; max-width:360px;}
@media screen and (max-width:1100px){nav#g-menu ul#menu-sp li div.cell img{width:90%; max-width:280px;}}
@media screen and (max-width:980px){nav#g-menu ul#menu-sp li div.cell img{width:90%; max-width:200px;}}

/*第1階層 メニューオンオフ*/
#menu-sp .first-off{
background:#00529f;
background:-moz-linear-gradient(top, #00529f 0%, #41ceff 100%);
background:-webkit-linear-gradient(top, #00529f 0%,#41ceff 100%);
background:linear-gradient(to bottom, #00529f 0%,#41ceff 100%);
text-shadow:0px 1px 1px #001e3a , 0px 2px 1px #001e3a , 1px 0px 1px #001e3a , 2px 0px 1px #001e3a ,0px 0px 5px #001e3a , 0px 0px 3px #001e3a , 0px 0px 3px #001e3a , 0px 0px 2px #001e3a;}
#menu-sp .first-on,
#menu-sp .first-off:hover{
background:#ffa200;
background:-moz-linear-gradient(top, #ffa200 0%, #ffe500 100%);
background:-webkit-linear-gradient(top, #ffa200 0%,#ffe500 100%);
background:linear-gradient(to bottom, #ffa200 0%,#ffe500 100%);
text-shadow:0px 1px 1px #b14300 , 0px 2px 1px #523400 , 1px 0px 1px #523400 , 2px 0px 1px #b14300 ,0px 0px 5px #b14300 , 0px 0px 3px #b14300 , 0px 0px 3px #b14300 , 0px 0px 2px #b14300;}

/*第2階層*/
nav#g-menu ul#menu-sp li.second-menu{
background:#25a9a9;
background:-moz-linear-gradient(top, #25a9a9 0%, #66f5f5 100%);
background:-webkit-linear-gradient(top, #25a9a9 0%, #66f5f5 100%);
background:linear-gradient(to bottom, #25a9a9 0%, #66f5f5 100%);
text-shadow:0px 1px 1px #005858 , 0px 2px 1px #005858 , 1px 0px 1px #005858 , 2px 0px 1px #005858 ,0px 0px 5px #005858 , 0px 0px 3px #005858 , 0px 0px 3px #005858 , 0px 0px 2px #005858;}
nav#g-menu ul#menu-sp li.second-menu a{display:block;}
nav#g-menu ul#menu-sp li.second-menu a:hover{box-shadow:0px 0px 27px 3px #5efff9 inset;}
nav#g-menu ul#menu-sp li.second-menu br{display:none;}

/*第2階層 メニューオンオフ*/
#menu-sp .second-on{box-shadow:0px 0px 27px 3px #5efff9 inset;}
#menu-sp .second-off:hover{box-shadow:0px 0px 27px 3px #5efff9 inset;}

/*第3階層*/
nav#g-menu ul#menu-sp li.third-menu{
background:#a8a8a8;
background:-moz-linear-gradient(top, #4b4c4c 0%, #a8a8a8 100%);
background:-webkit-linear-gradient(top, #4b4c4c 0%, #a8a8a8 100%);
background:linear-gradient(to bottom, #4b4c4c 0%, #a8a8a8 100%);
text-shadow:0px 1px 1px #444 , 0px 2px 1px #444 , 1px 0px 1px #444 , 2px 0px 1px #444 ,0px 0px 5px #444 , 0px 0px 3px #444 , 0px 0px 3px #444 , 0px 0px 2px #444;}
nav#g-menu ul#menu-sp li.third-menu a{display:block;}
nav#g-menu ul#menu-sp li.third-menu:hover{box-shadow:0px 0px 27px 3px #fff inset;}

/*第1階層 SNS*/
nav#g-menu ul#menu-sp li.sns-menu{
background:#fe8f01;
background:-moz-linear-gradient(top, #fe8f01 0%, #ff7e00 100%);
background:-webkit-linear-gradient(top, #fe8f01 0%,#ff7e00 100%);
background:linear-gradient(to bottom, #fe8f01 0%,#ff7e00 100%);
text-shadow:0px 1px 1px #8a4b00 , 0px 2px 1px #8a4b00 , 1px 0px 1px #8a4b00 , 2px 0px 1px #8a4b00 ,0px 0px 5px #8a4b00 , 0px 0px 3px #8a4b00 , 0px 0px 3px #8a4b00 , 0px 0px 2px #8a4b00;}
nav#g-menu ul#menu-sp li.sns-menu:hover{box-shadow:0px 0px 27px 3px #fffb99 inset;}

/*着荷時未公開 EVENT*/
#menu-sp .event{
color:#9a9376 !important;
background:#2e2500;
background:-moz-linear-gradient(top, #000 0%, #3a4545 100%);
background:-webkit-linear-gradient(top, #000 0%,#3a4545 100%);
background:linear-gradient(to bottom, #000 0%,#3a4545 100%);}
#menu-sp .event:hover{cursor:default !important;}
#menu-sp .event img{opacity:0.6;}

/*第2階層 課金系コース*/
#menu-sp .icn-b,
#menu-sp .icn-p,
#menu-sp .icn-s{position:relative;}

#menu-sp .icn-b:after,
#menu-sp .icn-p:after,
#menu-sp .icn-s:after{
content: " ";
position:absolute;
top:12px;
left:5px;
display:block;
width:20px;
height:20px;}
#menu-sp .icn-b:after{background-image:url(../images/menu/icn/basic_course_sp.png);}
#menu-sp .icn-p:after{background-image:url(../images/menu/icn/premium_course_sp.png);}
#menu-sp .icn-s:after{background-image:url(../images/menu/icn/specific_sp.png);}

.cat-1,.cat-2,.cat-3,.cat-4,.cat-5,.cat-6,.cat-7,.cat-8,.cat-9,.cat-10,.cat-11,.cat-12,.cat-13{display:none;}

/*SP版メインメニュー*/
#menu-global-sp{display:none; position:fixed; top:0; z-index:2;}
#menu-sp{display:none;}

/*第1階層 新着通知*/
nav#g-menu ul#menu-sp li.first-menu .info-new{
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style:solid;
border-width:0 35px 35px 0;
border-color:transparent #cc0000 transparent transparent;}
nav#g-menu ul#menu-sp li.first-menu .info-new span{
display:block;
color:#fff;
width:20px;
font-size:11px;
font-weight:bold;
text-shadow:0px 1px 3px #000000;
text-align:center;
margin:3px 0 0 15px;}

@media screen and (max-width:640px){
#menu-sp-bar .sp-icn{display:none;}
nav#g-menu ul#menu-sp li{font-size:11px !important;}
nav#g-menu ul#menu-sp li:last-child{font-size:14px !important;}
nav#g-menu ul#menu-sp li.second-menu br,
nav#g-menu ul#menu-sp li.third-menu br{display:block;}}

@media screen and (max-width:480px){
nav#g-menu ul#menu-sp li div.cell{height:35px; line-height:13px;}
#menu-sp .icn-b:after,
#menu-sp .icn-s:after,
#menu-sp .icn-p:after{
width:15px;
height:15px;
top:8px;
background-size:15px;}
/*#menu-sp .icn-p:after{top:11px;}

nav#g-menu ul#menu-sp li:nth-child(12) div.cell,
nav#g-menu ul#menu-sp li:nth-child(13) div.cell,
nav#g-menu ul#menu-sp li:nth-child(26) div.cell,
nav#g-menu ul#menu-sp li:nth-child(27) div.cell,
nav#g-menu ul#menu-sp li:nth-child(50) div.cell,
nav#g-menu ul#menu-sp li:nth-child(51) div.cell,
nav#g-menu ul#menu-sp li:nth-child(52) div.cell,
nav#g-menu ul#menu-sp li:nth-child(53) div.cell,
nav#g-menu ul#menu-sp li:nth-child(54) div.cell,
nav#g-menu ul#menu-sp li:nth-child(55) div.cell,
nav#g-menu ul#menu-sp li:nth-child(82) div.cell,
nav#g-menu ul#menu-sp li:nth-child(83) div.cell,
nav#g-menu ul#menu-sp li:nth-child(106) div.cell,
nav#g-menu ul#menu-sp li:nth-child(107) div.cell{height:45px !important; padding-bottom:7px!important;}*/}

/*
================================================================================================================
MENU-ログイン50pxスクロール
================================================================================================================
*/
#menu-sp-bar.bar-fix{position:fixed !important; top:0 !important;}
#menu-sp.menu-fix{position:fixed !important; top:0 !important;}

@media screen and (max-width:1100px){nav#g-menu ul#menu-pc li .title-menu.logo-fix{position:fixed !important; top:0 !important;}}
@media screen and (max-width:1100px){nav#g-menu #menu-login.login-fix #log-off,#log-on.logon-fix{position:fixed; top:80px;}}
@media screen and (max-width:480px){nav#g-menu #menu-login.login-fix #log-off,#log-on.logon-fix{position:fixed; top:40px;}}