@charset "Shift-JIS";

/*プレーヤー名*/
@media screen and (min-width:1201px){
#top-playername #playername{
position:absolute !important;
top:190px;
right:50px;
width:300px;}}

/*ティッカーニュース*/
@media screen and (max-width:1200px){
#nav-text{display:block !important;}}

/*
================================================================================================================
メインビジュアル/スライドショー領域
================================================================================================================
*/
#index-top{
position:relative;
width:100%;
max-width:2048px;
background:#fff;
margin:0 auto;
z-index:0;}

#top-main{
display:block;
position:relative;
width:100%;
min-width:320px;
z-index:0;}

#top-main #top-img{position:relative; top:0;width:100%;}
#top-main #top-img .sp-top{width:100%; display:none;}
#top-main #top-img .sp-top img{width:100%;}

#top-main #top-inner{position:relative; /*filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5));*/}

/*
=========================
PCサイズ 背景画像
=========================
*/
@media screen and (min-width:1921px){
#index-top{background-size:100% !important;}}

@media screen and (min-width:1101px){
#index-top{
background-image:url(../images/top/bg_main.jpg);
background-size:auto;
background-position:center top;
background-repeat:no-repeat;}

#top-main{
background-image:url(../images/top/main_pc01.png) , url(../images/top/main_pc02.png);
background-position:bottom left , bottom right;
background-repeat:no-repeat , no-repeat;}

#top-main #top-inner{
width:96%;
max-width:1200px;
margin:0 auto;}}

/*
=========================
PCサイズ キャラ画像調整
=========================
*/
@media screen and (max-width:1800px){
#top-main{background-position:bottom left -150px , bottom right -150px;}}

@media screen and (max-width:1600px){
#top-main{
background-position:bottom left -200px , bottom right -200px;
background-size:750px auto , 750px auto;}}

@media screen and (max-width:1350px){
#top-main{
background-size:650px auto , 650px auto;}}

@media screen and (max-width:1200px){
#top-main{
background-position:bottom left -180px , bottom right -180px;
background-size:600px auto , 600px auto;}}

/*
=========================
PCサイズ トップ領域 高さ
=========================
*/
@media screen and (min-width:1201px){
#top-main,
#top-main #top-inner{min-height:520px !important;}}

@media screen and (min-width:1101px) and (max-width:1200px){
#top-main,
#top-main #top-inner{min-height:450px !important;}}

/*
=========================
SPサイズ トップ領域 高さ
=========================
*/
@media screen and (max-width:1100px){
#top-main #top-img .sp-top{display:block;}}

@media screen and (max-width:420px){
#top-main{padding-bottom:70px;}}

/*
=========================
スライド 位置
=========================
*/
#top-main #top-slide{position:absolute; width:100%; bottom:10px;}
@media screen and (min-width:1201px){#top-main #top-slide{bottom:20px;}}
@media screen and (max-width:1200px){#top-main #top-slide{bottom:10px;}}
@media screen and (max-width:800px){#top-main #top-slide{bottom:5px;}}
@media screen and (max-width:420px){#top-main #top-slide{bottom:-60px;}}

/*
================================================================================================================
インフォ領域
================================================================================================================
*/
#top-info{
display:block;
position:relative;
width:100%;
background-color:#000;
background-image:url(../images/common/page/bg_sdvx.png) , url(../images/common/page/bg_grd_left.png) , url(../images/common/page/bg_grd_right.png) , url(../images/common/page/bg_main02.png) , url(../images/common/page/bg_main01.png);
background-repeat:no-repeat , repeat-y , repeat-y , repeat , repeat-x;
background-position:center , left , right , top left , bottom;
margin:0 auto;
z-index:0;}

/*
=========================
インフォ上下枠装飾
=========================
*/
#top-info::before,
#top-info::after{
display:block;
position:absolute;
left:0;
width:100%;
height:33px;
content:"";}
#top-info::before{
top:0;
background-image:url(../images/common/page/frame_top_left.png) , url(../images/common/page/frame_top_right.png) , url(../images/common/page/frame_top_bar.png) , url(../images/common/page/frame_top_title.png);
background-repeat:no-repeat , no-repeat , repeat-x , no-repeat;
background-position:top left , top right , top center , top center;}
#top-info::after{
bottom:0;
background-image:url(../images/common/page/frame_btm_left.png) , url(../images/common/page/frame_btm_right.png) , url(../images/common/page/frame_btm_bar.png) , url(../images/common/page/frame_btm_title.png);
background-repeat:no-repeat , no-repeat , repeat-x , no-repeat;
background-position:bottom left , bottom right , bottom center , bottom center;}

@media screen and (max-width:900px){
#top-info::before,
#top-info::after{background-size:auto 20px , auto 20px , auto 20px , auto 20px;}}

@media screen and (max-width:640px){
#top-info{background-size:auto , 100px auto , 100px auto , auto , auto;}
#top-info::before{background-position:top left -100px , top right -100px, top center , top center;}
#top-info::after{background-position:bottom left -100px , bottom right -100px , bottom center , bottom center;}}

@media screen and (max-width:480px){
#top-info{background-size:80% auto , 100px auto , 100px auto , auto , auto;}}

@media screen and (max-width:360px){
#top-info::before{background-position:top left -150px , top right -150px, top center , top center;}
#top-info::after{background-position:bottom left -150px , bottom right -150px , bottom center , bottom center;}}

/*
=========================
インフォ左右 横幅調整
=========================
*/
#top-info #top-info-inner{
display:flex;
width:100%;
max-width:1200px;
margin:0 auto;
padding:80px 0;}

#top-info #top-info-inner #info-left{width:64%; margin-right:2%;}
#top-info #top-info-inner #info-right{width:32%;}

@media screen and (max-width:1366px){
#top-info #top-info-inner{width:96%;}}

@media screen and (max-width:980px){
#top-info #top-info-inner{flex-wrap:wrap;}
#top-info #top-info-inner #info-left{width:95%; margin:0 2.5%;}
#top-info #top-info-inner #info-right{width:95%; margin:0 3% 0 2%;}}

@media screen and (max-width:980px){
#top-info #top-info-inner{padding:40px 0;}}

/*
================================================================================================================
フレーム関連
================================================================================================================
*/

/*NEWS*/
#top-info ul.news{
width:calc(100% - 20px);
overflow-y:scroll;
padding:0 20px;
margin:10px 20px 20px 0;}
#top-info ul.news .info-text{display:none;}
/*#top-info ul.news img{display:none;}*/

/*
=========================
NEWS スクロール高さ
=========================
*/
/*バナー有*/
/*@media screen and (min-width:981px){
#top-info .cat.news{height:461px;}
#top-info ul.news{max-height:360px; min-height:360px;}}*/
/*バナー無*/
@media screen and (min-width:981px){
#top-info .cat.news{height:540px;}
#top-info ul.news{max-height:440px; min-height:440px;}}

@media screen and (max-width:980px){
#top-info .cat.news{height:350px; margin:0 auto 20px;}
#top-info ul.news{max-height:270px; min-height:270px;}}

/*SNSタイムライン*/
#top-info .cat.twitter{margin:0 auto 20px;}

#top-info .cat.twitter > .inner,
#top-info .cat.app > .inner{
height:200px;
background-color:#fff;
border-radius:5px;
padding-right:20px;
margin:20px 10px;
overflow:auto;}

/*
================================================================================================================
フレーム装飾
================================================================================================================
*/
#top-info .cat{
width:calc(100% - 6px);
position:relative;
background-repeat:repeat-y , repeat-y , repeat-x , repeat-x , repeat-x , repeat-x;
background-position:top left -3px , top right -3px , top , bottom , bottom , bottom;
border-radius:14px;
padding:10px;}
#top-info .cat::before,
#top-info .cat::after{
display:block;
position:absolute;
left:-3px;
width:calc(100% + 6px);
height:62px;
content:"";}
#top-info .cat::before{
top:0;
background-image:url(../images/common/frame/top_left.png) , url(../images/common/frame/top_right.png);
background-repeat:no-repeat , no-repeat;
background-position:top left , top right;
border-radius:14px 14px 0 0;}
#top-info .cat::after{
bottom:0;
background-image:url(../images/common/frame/btm_left.png) , url(../images/common/frame/btm_right.png);
background-repeat:no-repeat , no-repeat;
background-position:bottom left , bottom right;
border-radius:0 0 14px 14px;}

/*NEWS*/
#top-info .cat.news{
background-image:url(../images/common/frame/bar.png) , url(../images/common/frame/bar.png) ,
                 url(../images/common/frame/top_orange.png) , url(../images/common/frame/btm_orange.png) ,
                 url(../images/common/frame/bg02.png) , url(../images/common/frame/bg01.png);}
/*Twitter TL*/
#top-info .cat.twitter{
background-image:url(../images/common/frame/bar.png) , url(../images/common/frame/bar.png) ,
                 url(../images/common/frame/top_blue.png) , url(../images/common/frame/btm_blue.png) ,
                 url(../images/common/frame/bg02.png) , url(../images/common/frame/bg01.png);}
/*e-amusement app TL*/
#top-info .cat.app{
background-image:url(../images/common/frame/bar.png) , url(../images/common/frame/bar.png) ,
                 url(../images/common/frame/top_green.png) , url(../images/common/frame/btm_green.png) ,
                 url(../images/common/frame/bg02.png) , url(../images/common/frame/bg01.png);}

/*カテゴリ名画像*/
#top-info .cat > .title{position:relative; margin:10px 0 0 10px; z-index:4;}
#top-info .cat > .title img{width:100%; max-width:300px;}

/*
================================================================================================================
バナー/リンク関連
================================================================================================================
*/
/*FLOOR･新筐体設置店*/
#info-left > a.bnr{display:block; width:100%; margin:0 auto 10px;}
#info-left > a.bnr img{width:100%;}

#info-bnr{margin:0 auto 10px;}
#info-bnr td{padding:3px;}
#info-bnr td img{width:100%;}

/*通常筐体設置店*/
#info-right > a.shop{
display:flex;
position:relative;
width:calc(100% - 50px);
height:48px;
background-image:url("../images/common/login/bar.png");
justify-content:space-between;
align-items:center;
margin:0 auto 10px;}
#info-right > a.shop::before,
#info-right > a.shop::after{
display:block;
position:absolute;
width:25px;
height:48px;
content:"";}
#info-right > a.shop::before{top:0; left:-25px; background-image:url("../images/common/login/left.png");}
#info-right > a.shop::after{top:0; right:-25px; background-image:url("../images/common/login/right.png");}

#info-right > a.shop p{
color:#fff;
font-size:18px;
font-weight:800;
font-family:'M PLUS Rounded 1c', sans-serif;
line-height:30px;
transform:rotate(0.05deg);
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
text-shadow:2px 2px 0 #205a63,-2px -2px 0 #205a63,
            2px -2px 0 #205a63,-2px 2px 0 #205a63,
            1px 1px 0 #205a63,-1px -1px 0 #205a63,
            -1px 1px 0 #205a63,1px -1px 0 #205a63,
            0px 0px 0 #205a63;}
#info-right > a.shop:hover p{
color:#f8d9b5;
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 0px 0 #764d34;}

@media screen and (max-width:980px){
#info-right > a.shop{display:none;}}