/*切替*/
@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:relative; font-family:'Noto Sans JP', sans-serif;}

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


/*
================================================================================================================
PC MENU
================================================================================================================
*/
/*MENU全体*/
#menu-pc{position:relative; width:100%; top:0; left:0; background:rgba(37,176,124,.5); align-items:flex-end; padding:0 0 10px;}
@media screen and (max-width:1300px){#menu-pc{font-size:13px; padding:10px 0 20px;}}
#menu-pc::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../../images/menu/pc/exp/splash.png);
background-position:top left;
background-repeat:no-repeat;
mix-blend-mode:screen;
opacity:.8;}

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

/*
=============================
MENU
=============================
*/
/*メニュー左エリア - タイトルロゴ*/
#title-pc{width:22%; position:relative;}
#title-pc a{display:flex; width:100%; height:100%; justify-content:center; align-items:center;}
#title-pc a img{
position:relative;
width:98%;
transition:opacity .3s ease;
filter:drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff)}
#title-pc a:hover img{opacity:.7;}

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

@media screen and (max-width:1300px){
#menu-main{width:82%;}
#title-pc{width:18%;}}
@media screen and (max-width:1200px){
#menu-main{width:85%;}
#title-pc{width:15%;}}

/*
================================================================================================================
第1階層
================================================================================================================
*/
#menu-main{}

#menu-main > ul{
display:flex;
width:100%;
align-items:flex-end;
justify-content:space-between;}
@media screen and (max-width:1800px){#menu-main > ul{width:100%;}}
@media screen and (max-width:1200px){#menu-main > ul{padding-right:5px;}}

#menu-main > ul > li{width:calc(100% / 8); color:#fff; text-align:center;}

#menu-main > ul .first-menu a{display:block; position:relative; transition:background .3s ease;}

/*ボタン*/
#menu-pc .first-menu > .btn,
#menu-pc a.first-menu{
display:block;
position:relative;
width:100%;
max-width:176px;
height:0;
padding-top:calc(83 / 176 * 100%);
background-size:100% auto;
background-repeat:no-repeat;
background-position:center;
margin:0 auto;}

#menu-pc .first-menu > .btn > p,
#menu-pc a.first-menu > p{display:none;}

/*
=============================
ボタン 装飾
=============================
*/
/*ボタン画像*/
#menu-pc #menu01.first-menu > .btn{background-image:url(../../images/menu/pc/btn01_off.png);}
#menu-pc #menu02 a.first-menu{background-image:url(../../images/menu/pc/btn02_off.png);}
#menu-pc #menu03.first-menu > .btn{background-image:url(../../images/menu/pc/btn03_off.png);}
#menu-pc #menu04.first-menu > .btn{background-image:url(../../images/menu/pc/btn04_off.png);}
#menu-pc #menu05.first-menu > .btn{background-image:url(../../images/menu/pc/btn05_off.png);}
#menu-pc #menu06.first-menu > .btn{background-image:url(../../images/menu/pc/btn06_off.png);}
#menu-pc #menu07.first-menu > .btn{background-image:url(../../images/menu/pc/btn07_off.png);}
#menu-pc #menu08.first-menu > .btn{background-image:url(../../images/menu/pc/btn08_off.png);}

#menu-pc #menu01.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn01_on.png);}
#menu-pc #menu02 a.first-menu:hover{background-image:url(../../images/menu/pc/btn02_on.png);}
#menu-pc #menu03.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn03_on.png);}
#menu-pc #menu04.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn04_on.png);}
#menu-pc #menu05.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn05_on.png);}
#menu-pc #menu06.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn06_on.png);}
#menu-pc #menu07.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn07_on.png);}
#menu-pc #menu08.first-menu:hover > .btn{background-image:url(../../images/menu/pc/btn08_on.png);}

/*
================================================================================================================
第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 #menu01 .second-menu ul{padding:10px 10px 0;}
#menu-pc #menu01 .second-menu ul > li{width:calc(20% - 10px) !important; margin:0 5px;}
#menu-pc #menu01 .second-menu ul > li > p{padding:0 0 5px !important; color:#fff800; font-size:12px; border-bottom:1px solid #fff800;}
#menu-pc #menu01 .second-menu ul > li > .third-menu{display:block !important; padding:0 !important; margin:0 auto 10px !important;}
#menu-pc #menu01 .second-menu ul > li > .third-menu ul li{display:block; width:100% !important;}
#menu-pc #menu01 .second-menu ul > li > .third-menu ul li a{color:#fff; padding:5px !important; border:none; transition:all .3s ease;}
#menu-pc #menu01 .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 #menu01 .second-menu ul > li{width:calc((100% / 3) - 10px) !important;}}

#menu-pc #menu01 .second-menu ul,
#menu-pc #menu03 .second-menu ul,
#menu-pc #menu04 .second-menu ul{justify-content:center;}

#menu-pc #menu01 .second-menu > ul,
#menu-pc #menu03 .second-menu > ul,
#menu-pc #menu04 .second-menu > ul{border-top:4px solid #fff800; border-bottom:4px solid #fff800;}
#menu-pc #menu05 .second-menu > ul,
#menu-pc #menu06 .second-menu > ul,
#menu-pc #menu07 .second-menu > ul,
#menu-pc #menu08 .second-menu > ul{border-top:4px solid #1fd8ff; border-bottom:4px solid #1fd8ff;}

#menu-pc #menu01 .second-menu > ul li > ul li:hover,
#menu-pc #menu03 .second-menu li:hover,
#menu-pc #menu04 .second-menu li:hover{color:#fffabf; text-shadow:0 0 10px #fff800 , 0 0 5px #fff800;}
#menu-pc #menu05 .second-menu li:hover,
#menu-pc #menu06 .second-menu li:hover,
#menu-pc #menu07 .second-menu li:hover,
#menu-pc #menu08 .second-menu li:hover{color:#cffcff; text-shadow:0 0 10px #00edff , 0 0 5px #00edff;}

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

/*
================================================================================================================
説明
================================================================================================================
*/
#menu-exp{position:relative; width:100%;}
#menu-exp ul{display:flex; width:100%;}
#menu-exp ul li{
position:relative;
display:flex;
width:calc(50% - 68px);
height:35px;
color:#000;
background-image:url(../../images/menu/pc/exp/line.png);
background-repeat:repeat-x;
background-position:bottom;
font-size:12px;
font-weight:700;
line-height:100%;
padding-bottom:8px;
align-items:center;}
#menu-exp ul li + li{margin-left:68px;}
#menu-exp ul li > p:first-child{margin:0 20px;}

#menu-exp ul li::before{
display:block;
content:"";
position:absolute;
top:0;
right:-66px;
width:68px;
height:35px;
background:no-repeat;}
#menu-exp ul li.vis::before{background-image:url(../../images/menu/pc/exp/side01.png);}
#menu-exp ul li.eam::before{background-image:url(../../images/menu/pc/exp/side02.png);}

@media screen and (max-width:1500px){#menu-exp ul li > p:first-child{margin:0 5px 0 0;}}
@media screen and (max-width:1300px){#menu-exp{display:none;}}