@charset "Shift-JIS";

/*
================================================================================================================
ティッカーニュース
================================================================================================================
*/
#nav-text{
width:100%;
max-width:1200px;
height:30px;
font-size:14px;
line-height:30px;
overflow: hidden;}
#nav-text ul{position:relative; width:100%; padding:0 10px;}
#nav-text ul li{display:none; width:100%;}
#nav-text ul li a{
color:#fff;
text-decoration:underline;
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
transition:color 0.3s ease;}
#nav-text ul li a:hover{color:#f8d9b5; text-decoration:none;}

@media screen and (min-width:1201px){
#nav-text{
display:block;
position:absolute;
top:10px;
left:20%;
background-color:rgba(0,0,0,0.7);
z-index:9998;}
#nav-text ul::before{
display:inline-block;
content:"■";
color:#ffdd92;
font-size:16px;}
#nav-text ul li{text-align:left; padding-left:30px;}}

@media screen and (max-width:1200px){
#nav-text{display:none; position:relative; border-bottom:1px solid #fff;}}

@media screen and (min-width:1201px) and (max-width:1500px){
#nav-text{width:calc(80% - 10px) !important;}}

@media screen and (max-width:480px){
#nav-text{font-size:12px;}}

/*
================================================================================================================
MENU COMMON
================================================================================================================
*/
div#main-menu-wrapper{
height:100px;}

nav#main-menu{
position:relative;
width:100%;
color:#fff;
background-color:#000;
font-size:22px;
text-align:center;
z-index:9998;}
nav#main-menu img{width:100%;}
nav#main-menu a{display:block; color:#fff;}
nav#main-menu a img:hover{opacity:0.7;}

/*全階層ul共通*/
nav#main-menu ul{display:flex; width:100%; max-width:1200px;}
nav#main-menu .second-menu > ul{margin:0 auto;}
nav#main-menu .second-menu > ul li{font-size:16px;}

/*第1階層MENU テキスト装飾*/
nav#main-menu .first-menu{
text-shadow:2px 2px 0 rgba(0,0,0,0.3),-2px -2px 0 rgba(0,0,0,0.3),
            2px -2px 0 rgba(0,0,0,0.3),-2px 2px 0 rgba(0,0,0,0.3),
            1px 1px 0 rgba(0,0,0,0.3),-1px -1px 0 rgba(0,0,0,0.3),
            -1px 1px 0 rgba(0,0,0,0.3),1px -1px 0 rgba(0,0,0,0.3),
            0px 2px 0 rgba(0,0,0,0.3),2px 0px 0 rgba(0,0,0,0.3),
            0px -2px 0 rgba(0,0,0,0.3),-2px 0px 0 rgba(0,0,0,0.3),
            0px 0px 0 rgba(0,0,0,0.3);}
            
nav#main-menu .first-menu:hover,
.selected,.selected:hover{
cursor:pointer;
text-shadow:2px 2px 0 #764d34,-2px -2px 0 #764d34,
            2px -2px 0 #764d34,-2px 2px 0 #764d34,
            1px 1px 0 #764d34,-1px -1px 0 #764d34,
            -1px 1px 0 #764d34,1px -1px 0 #764d34,
            0px 2px 0 #764d34,2px 0px 0 #764d34,
            0px -2px 0 #764d34,-2px 0px 0 #764d34,
            0px 0px 0 #764d34 !important;}

/*第2階層MENU テキスト装飾*/
nav#main-menu .second-menu > ul li a:hover{
color:#f8d9b5;
text-shadow:2px 2px 10px rgba(241,182,60,0.5),-2px -2px 10px rgba(241,182,60,0.5),
            0px 0px 10px rgba(241,182,60,0.5),-1px -1px 3px rgba(241,182,60,0.3),
            1px 1px 3px rgba(241,182,60,0.3);}

/*MENU フォント種類*/
nav#main-menu a.first-menu,
nav#main-menu li.first-menu > .btn{
font-weight:400;
font-family:'Teko', sans-serif;}
nav#main-menu .second-menu ul li a{
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);}

/*MENU フォントサイズ*/
@media screen and (max-width:640px){nav#main-menu .second-menu > ul li{font-size:14px;}}
@media screen and (max-width:420px){nav#main-menu .second-menu > ul li{font-size:12px;}}

/*第1階層MENU 未公開*/
nav#main-menu .first-menu.soon{opacity:0.7; pointer-events:none;}
nav#main-menu .first-menu.soon:hover{cursor:default;}

@media screen and (min-width:2048px){
nav#main-menu{width:100%; max-width:2048px; margin:0 auto;}}

/*
================================================================================================================
PC
================================================================================================================
*/
#pc-btn{bottom:-40px;}
@media screen and (max-width:1600px){#pc-btn{bottom:-30px;}}
@media screen and (max-width:1300px){#pc-btn{bottom:10px;}}

@media screen and (min-width:1201px){
div#main-menu-wrapper{
height:130px;}

nav#main-menu{
height:130px;
background-image:url(/game/sdvx/vi/images/menu/bg.jpg);
background-position:center;
background-size:cover;
border-bottom:2px solid #dde0e4;}

#pc-btn{position:absolute; left:0; width:20%; text-align:right; z-index:3;}
#pc-btn img{width:100%; max-width:462px;}
#pc-menu{display:block; width:80%; /*background:#000;*/ margin-left:20%; padding-top:50px;}

#sp-btn{display:none;}
#sp-menu{display:none;}

/*Twitter・設置店検索*/
nav#main-menu li.other{display:none !important;}

/*全階層共通 アニメーション*/
nav#main-menu .first-menu,
nav#main-menu .second-menu,
nav#main-menu .second-menu ul li a{
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;}

/*第1階層MENU*/
nav#main-menu #pc-menu > ul{/*height:130px;*/}
nav#main-menu #pc-menu > ul > li{width:calc(100% / 8); max-width:137px; margin:0 5px;}

nav#main-menu .first-menu{
height:57px;
background-image:url(/game/sdvx/vi/images/menu/btn_off.png);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;
line-height:65px;}
nav#main-menu .first-menu:hover{background-image:url(/game/sdvx/vi/images/menu/btn_on.png);}

/*第2階層MENU*/
nav#main-menu .second-menu{
position:absolute;
top:130px;
left:0;
width:100%;
max-height:0;
background:rgba(0,0,0,0.9);
background:-moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(18,29,50,0.9) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(18,29,50,0.9) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(18,29,50,0.9) 100%);
overflow:hidden;
opacity:0;
z-index:4;}
nav#main-menu .second-menu > ul{flex-wrap:wrap;}
nav#main-menu .second-menu > ul li{width:20% !important; height:auto !important; font-size:15px; line-height:120% !important;}
nav#main-menu .second-menu > ul li.none{display:none;}
nav#main-menu .second-menu > ul li a{text-shadow:none; padding:15px 0;}

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

/*第2階層MENU 中央揃え*/
#pc-menu ul li:nth-child(5) > .second-menu > ul,
#pc-menu ul li:nth-child(6) > .second-menu > ul{justify-content:center;}

/*ページアクティブ*/
.selected{cursor:default !important; background-image:url(/game/sdvx/vi/images/menu/btn_on.png) !important;}}

/*
================================================================================================================
SP
================================================================================================================
*/
@media screen and (max-width:1200px){
#sp-btn{
display:block;
width:100%; 
background-image:url(/game/sdvx/vi/images/menu/bg.jpg);
background-position:center;
background-size:100% 100%;
box-shadow:2px 2px 10px #000;
border-bottom:1px solid #fff;}
#sp-btn > p:first-child{display:block; padding:5px;}
#sp-btn > p:first-child a{display:inline-block;}
#sp-btn > p:first-child img{width:auto;}

#pc-btn{display:none;}
#pc-menu{display:none;}
#sp-menu{display:block;}

/*Twitter・設置店検索*/
nav#main-menu li.other{display:block; /*width:50%;*/ width:100%;}
nav#main-menu li.other + li.other{border-left:1px solid #444;}
nav#main-menu li.other .first-menu{
background:#478ba8 !important;
background:-moz-linear-gradient(top, #090d0e 0%, #478ba8 100%) !important;
background:-webkit-linear-gradient(top, #090d0e 0%,#478ba8 100%) !important;
background:linear-gradient(to bottom, #090d0e 0%,#478ba8 100%) !important;}

/*第1階層MENU*/
nav#main-menu ul{height:auto; flex-wrap:wrap;}
nav#main-menu ul li{width:100%; border-bottom:1px solid #444;}
li.first-menu > div:first-of-type,a.first-menu{height:36px; line-height:38px;}
li.first-menu{width:100%;}

/*第1階層MENU 背景色*/
nav#main-menu .first-menu{
background:#090d0e;
background:-moz-linear-gradient(top, #090d0e 0%, #455d68 100%);
background:-webkit-linear-gradient(top, #090d0e 0%,#455d68 100%);
background:linear-gradient(to bottom, #090d0e 0%,#455d68 100%);}
nav#main-menu .first-menu:hover,
.selected,.selected:hover{
background:#daad49 !important;
background:-moz-linear-gradient(top, #daad49 0%, #e7c057 100%) !important;
background:-webkit-linear-gradient(top, #daad49 0%,#e7c057 100%) !important;
background:linear-gradient(to bottom, #daad49 0%,#e7c057 100%) !important;}

/*第1階層MENU 全体非表示*/
nav#main-menu #sp-menu{position:absolute; top:-850px; width:100%; z-index:9998;}
nav#main-menu #sp-menu > ul{
width:100%;
background-color:#000;}

/*第1階層MENU ボタン用トグル装飾*/
li.first-menu > div:first-of-type{position:relative;}
li.first-menu > div:first-of-type::after{
display:block;
position:absolute;
top:0;
right:10px;
font-size:14px;
content:"▼";}
li.first-menu.soon > div:first-of-type::after{display:none !important}
li.first-menu > div.btn.open::after{
display:block;
position:absolute;
top:0;
right:10px;
font-size:14px;
content:"▲";}

li.first-menu > div:first-of-type::after,
li.first-menu > div.btn.open::after,
nav#main-menu .first-menu:hover .second-menu{text-shadow:none !important}

/*第2階層MENU*/
nav#main-menu .second-menu{display:none;}
nav#main-menu .second-menu > ul{position:relative; flex-wrap:wrap;}
nav#main-menu .second-menu > ul li{
width:50%;
background:rgba(0,0,0,0.9);
background:-moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(18,29,50,0.9) 100%);
background:-webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(18,29,50,0.9) 100%);
background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(18,29,50,0.9) 100%);
border-top:1px solid #444;
border-bottom:none;}
nav#main-menu .second-menu > ul li:nth-child(even){border-left:1px solid #444; border-right:none;}
nav#main-menu .second-menu > ul li.none{display:block; padding:8px 0;}
nav#main-menu .second-menu > ul li a{padding:8px 0;}
nav#main-menu .second-menu > ul li br{display:none;}}

/*MENUロゴ*/
@media screen and (max-width:1200px){
#sp-btn{height:70px;}
#sp-btn > p:first-child img{max-height:60px;}}

/*
================================================================================================================
ANIMATION - SP版MENU OPEN
================================================================================================================
*/
@media screen and (max-width:1200px){
.slide #sp-menu{
transform:translateY(920px);
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:liner;}}

@keyframes fadeIn{
0%{opacity:0;}
80%{opacity:1;}
100%{opacity:1;}}

/*
================================================================================================================
SP版MENUボタン
================================================================================================================
*/
@media screen and (max-width:1200px){
#sp-btn #toggle{
display:block;
position:absolute;
top:25px;
right:10px;
width:30px;
height:30px;
cursor:pointer;
z-index:9999 !important;
filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5));}

#sp-btn #toggle span{
display:block;
position:absolute;
left:0;
height:3px;
width:100%;
background-color:#fff;
-webkit-transition:.35s ease-in-out;
-moz-transition:.35s ease-in-out;
transition:.35s ease-in-out;
margin:0 auto;}

#sp-btn #toggle span:nth-child(1){top:0;}
#sp-btn #toggle span:nth-child(2){top:9px;}
#sp-btn #toggle span:nth-child(3){top:18px;}

#sp-btn #toggle.open span:nth-child(1){top:11px; -webkit-transform:rotate(315deg); -moz-transform:rotate(315deg); transform:rotate(315deg);}
#sp-btn #toggle.open span:nth-child(2){width:0; left:50%;}
#sp-btn #toggle.open span:nth-child(3){top:11px; -webkit-transform:rotate(-315deg); -moz-transform:rotate(-315deg); transform:rotate(-315deg);}}

/*
================================================================================================================
スクロールメニュー固定
================================================================================================================
*/
nav#main-menu.fixed{position:fixed; top:0;}
nav#main-menu.fixed #sp-btn #toggle{position:fixed; top:25px;}
@media screen and (max-width:1200px){nav#main-menu.fixed #nav-text{display:none !important;}}