@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:9999 !important;}
nav#main-menu #sp-logo          {z-index:100;}
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:900px){header#id_nav_menu_1{z-index:10000 !important;}}

/*
================================================================================================================
メニュー全体
================================================================================================================
*/
nav#main-menu{
position:absolute;
top:0;
left:0;
width:100%;}
@media screen and (min-width:981px){nav#main-menu{height:90px; background-color:#001e26;}}

/*
================================================================================================================
メニュー共通
================================================================================================================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a,
nav > div > ul > li > .second-menu ul li,
nav > div > ul > li > .second-menu ul li a{
display:block;
position:relative;
color:#eaffff !important;
text-align:center;
font-family:'Noto Sans JP', sans-serif;
font-weight:400;
letter-spacing:1px;
transition:all .2s ease;
z-index:7 !important;}

nav > div > ul > li.first-menu.soon{pointer-events:none;}
@media screen and (min-width:981px){nav > #pc-menu > ul > li.first-menu.soon{opacity:.3;}}
@media screen and (max-width:980px){
nav > #sp-menu > ul > li.first-menu.soon > .btn{opacity:.3;}
nav > #sp-menu > ul > li.first-menu.soon > .btn::after{display:none !important;}}

/*
========================
タイトルロゴ
========================
*/
nav #menu-logo{text-align:center;}
nav #menu-logo a img{position:relative; z-index:999 !important; transition:opacity .3s ease;}
nav #menu-logo a:hover img{opacity:.8;}

@media screen and (min-width:981px){
nav #menu-logo a > p:first-child{display:block;}
nav #menu-logo a > p:last-child{display:none;}}
@media screen and (max-width:980px){
nav #menu-logo a > p:first-child{display:none;}
nav #menu-logo a > p:last-child{display:block;}}

/*
========================
第1階層
========================
*/
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{font-size:18px; text-shadow:1px 1px 0 rgba(0,0,0,.5) , 2px 2px 0 rgba(0,0,0,.5);}
nav > div > ul > li.first-menu > * > p{position:relative; z-index:3;}

nav > div > ul > li.first-menu:hover > .btn,
nav > div > ul > li.first-menu > .btn.open,
nav > div > ul > li.first-menu > a:hover,
nav > div > ul > li > .second-menu ul li a:hover{cursor:pointer; color:#fff !important; text-shadow:0 0 4px #00ced0 , 0 0 3px #00ced0 , 0 0 3px #00ced0 , 0 0 2px #00ced0 , 0 0 2px #00ced0 , 0 5px 10px #000 , 0 8px 5px #242424 , 0 0 20px #1ffcff;}

@media screen and (min-width:981px) and (max-width:1100px){
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li.first-menu > a{font-size:15px;}}

@media screen and (max-width:430px){
nav > div > ul > li.first-menu > .btn,
nav > div > ul > li > a.first-menu{font-size:16px;}}

/*
========================
第2階層
========================
*/
nav > div > ul > li > .second-menu ul li a{font-size:16px;}
nav > div > ul > li > .second-menu ul li a:hover{color:#fff !important; text-shadow:0 0 4px #00ced0 , 0 0 3px #00ced0 , 0 0 3px #00ced0 , 0 0 2px #00ced0 , 0 0 2px #00ced0 , 0 0 10px #00ced0 , 0 0 20px #00ced0;}
nav > div > ul > li > .second-menu ul li a br{display:none;}

@media screen and (max-width:500px){nav > div > ul > li > .second-menu ul li a{font-size:13px;}}
@media screen and (max-width:420px){nav > div > ul > li > .second-menu ul li a{font-size:12px;}}
@media screen and (max-width:400px){nav > div > ul > li > .second-menu ul li a br{display:block;}}

/*ベーシック・プレミアムコース*/
nav > div > ul > li > .second-menu ul li.c-b a::before,
nav > div > ul > li > .second-menu ul li.c-p a::before{
display:inline-block;
font-size:8px;
width:14px;
height:14px;
background:#007b7c;
line-height:14px;
text-align:center;
letter-spacing:0;
border-radius:2px;
margin-right:5px;}
nav > div > ul > li > .second-menu ul li.c-b a::before{content:"B"}
nav > div > ul > li > .second-menu ul li.c-p a::before{content:"P"}
nav > div > ul > li > .second-menu ul li a:hover::before{text-shadow:none;}
@media screen and (max-width:980px){
nav > div > ul > li > .second-menu ul li.c-b a::before,
nav > div > ul > li > .second-menu ul li.c-p a::before{
display:block;
position:absolute;
top:calc(50% - 7px);
left:10px;}}

/*
========================
第1階層 オンマウス装飾
========================
*/
nav > div > ul > li.first-menu > a::before,
nav > div > ul > li.first-menu > .btn::before{
display:block;
content:"";
position:absolute;
width:100%;
height:100%;
left:0;
bottom:0;
background:linear-gradient(to bottom, rgba(5,149,156,0) 0%,rgba(5,149,156,.4) 100%);
opacity:0;
transition:opacity .2s ease;
z-index:2;}

nav > div > ul > li.first-menu:hover > .btn::before,
nav > div > ul > li.first-menu:hover > a::before{opacity:1;}

/*
================================================================================================================
PC
================================================================================================================
*/
@media screen and (min-width:981px){nav > #pc-menu{display:flex;}}
@media screen and (max-width:980px){nav > #pc-menu{display:none;}}

nav > #pc-menu{width:100%; height:90px; align-items:center; margin:0 auto;}

/*
========================
タイトルロゴ
========================
*/
nav > #pc-menu > #menu-logo{width:160px;}
nav > #pc-menu > #menu-logo img{width:100%; max-width:80px; transition:all .2s ease;}
nav > #pc-menu > #menu-logo a:hover img{
opacity:1 !important;
filter:drop-shadow(0 0 4px #00ced0) drop-shadow(0 0 3px #00ced0) drop-shadow(0 0 5px #000) drop-shadow(0 8px 5px #242424);}

@media screen and (max-width:1400px){nav > #pc-menu > #menu-logo{width:100px;}}

/*
========================
メニューメイン
========================
*/
nav > #pc-menu > ul{display:flex; width:calc(100% - 160px); align-items:center;}
nav > #pc-menu > ul > li{flex:1;}
@media screen and (max-width:1400px){nav > #pc-menu > ul{width:calc(100% - 100px);}}

/*
========================
第1階層
========================
*/
nav > #pc-menu > ul > li.first-menu > .btn,
nav > #pc-menu > ul > li.first-menu > a{height:90px; line-height:90px;}

/*
========================
第2階層
========================
*/
nav > #pc-menu > ul > li > .second-menu{
display:block !important;
position:absolute;
top:90px;
left:0;
width:100%;
max-height:0;
background-color:rgba(0,0,0,.9);
box-shadow:0 5px 5px rgba(0,0,0,.5) , 0 5px 5px rgba(0,0,0,.1) inset;
overflow:hidden;
opacity:0;
transition:all .2s ease;
margin-top:2px;
z-index:3;}
nav > #pc-menu > ul > li > .second-menu ul{display:flex; height:75px; justify-content:center;}
nav > #pc-menu > ul > li > .second-menu ul li a{position:relative; width:100%; line-height:75px; padding:0 20px;}

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

@media screen and (max-width:1400px){
nav > #pc-menu > ul > li#play-data > .second-menu ul{flex-wrap:wrap;}
nav > #pc-menu > ul > li#play-data > .second-menu ul li{width:20%;}}

/*
================================================================================================================
SP
================================================================================================================
*/
@media screen and (min-width:981px){nav > #sp-btn,nav > #sp-menu{display:none;}}
@media screen and (max-width:980px){nav > #sp-btn,nav > #sp-menu{display:block;}}

/*メニュー開閉*/
#sp-menu > ul{position:relative; margin-top:-600px !important; opacity:0 !important; transition:all .3s ease; z-index:5;}
.slide #sp-menu > ul{margin-top:2px !important; opacity:1 !important}

/*
========================
タイトルロゴ
========================
*/
nav > #sp-menu > #menu-logo{width:100%; height:76px; background-color:rgba(0,0,0,.9);}
nav > #sp-menu > #menu-logo a img{max-width:100px; padding:5px 0; filter:drop-shadow(0 0 2px #00ced0) drop-shadow(0 0 10px #1ffcff);}

/*
========================
第1階層
========================
*/
nav > #sp-menu > ul{display:flex; width:100%; flex-wrap:wrap; margin:0 auto;}
nav > #sp-menu > ul > li{position:relative; width:50%; background-color:#001e26; border-bottom:1px solid #265153;}
nav > #sp-menu > ul > li:nth-child(odd){border-right:1px solid #265153;}

nav > #sp-menu > ul > li.first-menu > .btn,
nav > #sp-menu > ul > li.first-menu > a,
nav > #sp-menu > ul > li > .second-menu ul li a{height:46px; line-height:46px;}

nav > #sp-menu > ul > li.first-menu > .btn::after{
display:block;
content:"▼";
position:absolute;
top:0;
right:5px;
font-size:15px;}
nav > #sp-menu > ul > li.first-menu > .btn.open::after{content:"▲";}

@media screen and (max-width:430px){nav > #sp-menu > ul > li.first-menu > .btn::after{font-size:12px;}}

/*
========================
第2階層
========================
*/
nav > #sp-menu > ul > li > .second-menu{display:none; width:200%;}
nav > #sp-menu > ul > li:nth-child(odd) > .second-menu{width:calc(200% + 2px);}
nav > #sp-menu > ul > li:nth-child(even) > .second-menu{margin-left:-100%;}
nav > #sp-menu > ul > li > .second-menu ul{display:flex; width:100%; flex-wrap:wrap;}
nav > #sp-menu > ul > li > .second-menu ul li{position:relative; width:50%; background:#000; border-top:1px solid #265153;}
nav > #sp-menu > ul > li > .second-menu ul li:nth-child(odd){border-right:1px solid #265153;}

@media screen and (max-width:400px){nav > #sp-menu > ul > li > .second-menu ul li.long a{padding-top:3px; line-height:20px !important;}}

/*
================================================================================================================
SNS
================================================================================================================
*/
nav#main-menu #sns{display:flex;}
nav#main-menu #sns a{display:block; width:calc(100% / 3); text-align:center;}
nav#main-menu #sns a img{width:90%; transition:opacity .3s ease-in-out;}
nav#main-menu #sns a:hover img{opacity:0.6;}

@media screen and (min-width:981px){
nav#main-menu #sns{padding-right:20px;}}

@media screen and (max-width:980px){
nav#main-menu #sns{width:100% !important; background:rgba(0,0,0,.9) !important; justify-content:center; padding:10px 0 !important;}
nav#main-menu #sns a{width:50px; padding:0 3px !important;}}

/*
================================================================================================================
SP メニュー開閉ボタン
================================================================================================================
*/
nav > #sp-btn{
position:absolute;
top:13px;
right:10px;
width:50px;
height:50px;
z-index:7;
transition:filter .4s ease;}
nav > #sp-btn > span{
display:block;
position:absolute;
left:10px;
width:40px;
height:3px;
background-color:#fff;
transition:all .4s ease;}
nav > #sp-btn:hover{cursor:pointer;}

nav > #sp-btn > span:first-child{top:14px;}
nav > #sp-btn > span:nth-child(2){top:calc(50% - 1px);}
nav > #sp-btn > span:last-child{bottom:14px;}

nav > #sp-btn.open > span:first-child{top:23px; transform:rotate(315deg);}
nav > #sp-btn.open > span:nth-child(2){opacity:0;}
nav > #sp-btn.open > span:last-child{bottom:23px; transform:rotate(-315deg);}

nav > #sp-btn:hover,
nav > #sp-btn.open{
filter:drop-shadow(0 0 2px #00ced0) drop-shadow( 0 0 2px #00ced0) drop-shadow(0 0 20px #1ffcff);}

/*nav > #sp-btn.open ~ #sp-menu{background-color:rgba(0,0,0,.8); padding-bottom:10px;}*/

/*
================================================================================================================
スクロールメニュー固定
================================================================================================================
*/
nav#main-menu.fixed{position:fixed; top:0; z-index:4;}
@media screen and (max-width:980px){nav#main-menu.fixed::before{opacity:1;}}

/*ベーシック・プレミアムコース
nav > div > ul > li > .second-menu ul li.c-b::before,
nav > div > ul > li > .second-menu ul li.c-p::before{
display:block;
position:absolute;
left:calc(50% - 50px);
top:8px;
font-size:8px;
width:100px;
background:#001e26;
line-height:100%;
letter-spacing:0;
border-radius:10px;
padding:3px 0;}

nav > div > ul > li > .second-menu ul li.c-b::before{content:"ベーシックコース"}
nav > div > ul > li > .second-menu ul li.c-p::before{content:"プレミアムコース"}
@media screen and (max-width:980px){
nav > div > ul > li > .second-menu ul li.c-b::before,
nav > div > ul > li > .second-menu ul li.c-p::before{top:5px;}
nav > div > ul > li > .second-menu ul li.c-b a,
nav > div > ul > li > .second-menu ul li.c-p a{padding-top:10px;}}*/