@charset "Shift-JIS";

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

#top-main{
display:block;
position:relative;
width:100%;
min-width:320px;
min-height:600px;
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:1101px){
#index-top{
background-image:url(../images/common/page/bg.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:top left , top 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:top left -150px , top right -150px;}}

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

@media screen and (max-width:1300px){
#top-main{
background-position:bottom -20px left -120px , bottom -20px right -120px;
background-size:650px auto , 650px auto;}}

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

/*
=========================
PCサイズ 背景画像
=========================
*/
@media screen and (max-width:1100px){
#top-main #top-img .sp-top{display:block;}}

@media screen and (min-width:981px) and (max-width:1100px){
#top-main{min-height:1000px;}}

@media screen and (max-width:980px){
#top-main{min-height:900px;}}

@media screen and (max-width:800px){
#top-main{padding-top:80px; min-height:auto;}}

@media screen and (max-width:700px){
#top-main{min-height:800px;}}

@media screen and (max-width:640px){
#top-main{min-height:600px;}}

@media screen and (max-width:480px){
#top-main{padding-top:70px; min-height:550px;}}

@media screen and (max-width:360px){
#top-main{min-height:450px;}}

/*
=========================
PCサイズ メイン高さ
=========================
*/
@media screen and (min-width:1201px){
#top-main #top-inner{min-height:700px !important;}}

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

/*
=========================
スライド 位置
=========================
*/
#top-main #top-slide{position:absolute; width:100%;}
@media screen and (min-width:1101px){#top-main #top-slide{bottom:20px;}}
@media screen and (max-width:1100px){#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:-20px;}}
@media screen and (max-width:400px){#top-main #top-slide{top:-180px;}}
@media screen and (max-width:380px){#top-main #top-slide{top:-160px;}}
@media screen and (max-width:360px){#top-main #top-slide{bottom:10px;}}
@media screen and (max-width:330px){#top-main #top-slide{top:-170px;}}
/*
================================================================================================================
各種インフォ領域
================================================================================================================
*/
#top-info{
display:block;
position:relative;
width:100%;
background-image:url(../images/common/page/bar.png) , url(../images/common/page/bar.png) , url(../images/common/page/bg01.png);
background-repeat:repeat-x , repeat-x , repeat;
background-position:top , bottom , center;
margin:0 auto;
z-index:0;}

#top-info #top-info-inner{
display:flex;
width:100%;
max-width:1200px;
margin:0 auto;
padding:50px 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%;}}

/*
================================================================================================================
各種インフォ領域-インフォメーション
================================================================================================================
*/
/*インフォメーション*/
#top-info #top-info-inner .info{
width:98%;
color:#000;
margin:0 2% 0 auto;}

/*インフォメーション メニュー*/
#top-info #top-info-inner #cat-info{position:relative; width:100%;}
#top-info #top-info-inner #cat-info #info-menu ul{display:flex; justify-content:flex-end; width:100%; margin:0; padding:0; border:0;}
#top-info #top-info-inner #cat-info #info-menu ul li{width:calc(100% / 6); text-align:center; margin:0 -10px 0 0;}
#top-info #top-info-inner #cat-info #info-menu ul li img{width:100%; max-width:84px;}
#top-info #top-info-inner #cat-info #info-menu ul li img:hover{cursor:pointer;}

#top-info #top-info-inner #cat-info #info-inner{
width:100%;
padding:0 10px;
margin:50px auto auto auto !important;}

/*インフォメーション 一覧へ*/
#top-info #top-info-inner #cat-info #info-log a,
#top-info #top-info-inner #cat-info #info-top a{
display:block;
position:absolute;
bottom:5px;
right:10px;
width:84px;
height:63px;
background-size:100% auto;
background-position:center;}
#top-info #top-info-inner #cat-info #info-log a{background-image:url(../images/top/info/log_off.png);}
#top-info #top-info-inner #cat-info #info-log a:hover{background-image:url(../images/top/info/log_on.png);}
#top-info #top-info-inner #cat-info #info-top a{background-image:url(../images/top/info/top_off.png);}
#top-info #top-info-inner #cat-info #info-top a:hover{background-image:url(../images/top/info/top_on.png);}

@media screen and (min-width:981px){
#top-info #top-info-inner .info{height:680px;}}

@media screen and (max-width:980px){
#top-info #top-info-inner .info{height:350px; margin:0 auto 20px auto;}
#top-info #top-info-inner #cat-info{width:100%;}
#top-info #top-info-inner #cat-info #info-title{left:-20px;}}

@media screen and (min-width:641px){
#top-info #top-info-inner #cat-info #info-menu{position:absolute; top:5px; right:10px;}}

@media screen and (max-width:640px){
#top-info #top-info-inner .info{height:400px;}
#top-info #top-info-inner #cat-info #info-menu{position:relative; margin:40px auto 0;}
#top-info #top-info-inner #cat-info #info-menu ul{justify-content:center;}

#top-info #top-info-inner #cat-info #info-inner{margin:10px auto auto auto !important;}}

@media screen and (max-width:480px){
#top-info #top-info-inner #cat-info #info-inner{padding:0;}
#top-info #top-info-inner #cat-info #info-menu ul li{margin:0;}

#top-info #top-info-inner #cat-info #info-log a,
#top-info #top-info-inner #cat-info #info-top a{width:67px; height:50px;}}

/*
===============================
インフォメーション ニュース内容
===============================
*/
#top-info #top-info-inner #cat-info ul#info-news{
width:100%;
overflow-y:scroll;
padding-right:20px;}

#top-info #top-info-inner #cat-info ul#info-news li{
display:block;
position:relative;
padding:15px 0;}

#top-info #top-info-inner #cat-info ul#info-news li + li{border-top:2px solid #555145;}

#top-info #top-info-inner #cat-info ul#info-news li:after{visibility:hidden; display:block; content:" "; clear:both; height:0;}
#top-info #top-info-inner #cat-info ul#info-news li:last-child{border-bottom:none; padding:15px 0 0;}
#top-info #top-info-inner #cat-info ul#info-news li div a{color:#00a8ff;}
#top-info #top-info-inner #cat-info ul#info-news li div a:hover{text-decoration:underline;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-left{float:left; width:14%; padding-right:1%;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-right{float:left; width:85%;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-icon img{width:100%; max-width:71px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-date{color:#0084ff; font-size:13px; font-weight:bold;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-title{font-size:13px; font-weight:bold; margin-top:5px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-text{font-size:12px; margin-top:5px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-text a{display:inline; padding:0 5px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-title:before{content:"▽"; margin-right:3px;}
#top-info #top-info-inner #cat-info ul#info-news li p{font-size:11px; font-weight:bold; color:#f00; margin-top:10px;}

@media screen and (min-width:981px){
#top-info #top-info-inner #cat-info ul#info-news{max-height:550px; min-height:550px;}}

@media screen and (max-width:980px){
#top-info #top-info-inner #cat-info ul#info-news{max-height:230px; min-height:230px;}}

@media screen and (max-width:640px){
#top-info #top-info-inner #cat-info ul#info-news li div.news-date{font-size:12px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-title{font-size:11px;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-text{font-size:11px;}
#top-info #top-info-inner #cat-info ul#info-news li p{font-size:10px;}

#top-info #top-info-inner #cat-info ul#info-news li div.news-left{display:none;}
#top-info #top-info-inner #cat-info ul#info-news li div.news-right{float:none; width:100%;}

#top-info #top-info-inner #cat-info ul#info-news li::before{
display:inline-block;
position:absolute;
left:135px;
color:#fff;
font-weight:bold;
font-size:11px;
padding:0 10px;}
#top-info #top-info-inner #cat-info ul#info-news li.i_01::before{content:"NEWSONG"; background-color:#0084ff;}
#top-info #top-info-inner #cat-info ul#info-news li.i_02::before{content:"RANKING"; background-color:#2ae100;}
#top-info #top-info-inner #cat-info ul#info-news li.i_03::before{content:"EVENT"; background-color:#ff7800;}
#top-info #top-info-inner #cat-info ul#info-news li.i_04::before{content:"BISTRO"; background-color:#ff00ae;}
#top-info #top-info-inner #cat-info ul#info-news li.i_05::before{content:"その他"; background-color:#f00;}}

@media screen and (max-width:480px){
#top-info #top-info-inner #cat-info ul#info-news{padding-right:0;}
#top-info #top-info-inner #cat-info ul#info-news li{padding:10px 0;}}

/*
===============================
インフォメーション一覧/単体ページ
===============================
*/
#top-info.news-list{background-image:none !important; margin:30px auto 0 !important;}
#top-info.news-list #top-info-inner .info{width:100% !important; margin:0 auto !important;}
#top-info.news-list #top-info-inner{padding:0 !important;}
#top-info.news-list #top-info-inner li div.news-left{width:10% !important;}
#top-info.news-list #top-info-inner li div.news-right{width:89% !important;}

@media screen and (max-width:480px){
#top-info.news-list{margin:20px auto 0 !important;}}

@media screen and (min-width:801px){
#top-info.news-list #top-info-inner .info{height:548px !important;}
#top-info.news-list #top-info-inner #cat-info #info-inner{max-height:565px !important;}
#top-info.news-list #top-info-inner #cat-info ul#info-news{max-height:410px !important; min-height:410px !important;}}

/*
================================================================================================================
設置店検索
================================================================================================================
*/
#top-info #top-info-inner #cat-shop{
display:block;
position:relative;
width:100%;
height:90px;
box-sizing:border-box;
margin:0 0 20px auto;}

#top-info #top-info-inner #cat-shop .title-shop{
position:absolute;
top:0;
right:0;
width:100%;
height:90px;
background-image:url(../images/top/info/shop_title1_off.png), url(../images/top/info/shop_title2_off.png);
background-repeat:no-repeat , no-repeat;
background-position:right center, left center;}

#top-info #top-info-inner #cat-shop:hover .title-shop{background-image:url(../images/top/info/shop_title1_on.png) , url(../images/top/info/shop_title2_on.png);}

@media screen and (max-width:850px){
#top-info #top-info-inner #cat-shop .title-shop{
background-image:none , url(../images/top/info/shop_title2_off.png) !important;
background-repeat:no-repeat , no-repeat !important;
background-position:right center , left center !important;}
#top-info #top-info-inner #cat-shop:hover .title-shop{
background-image:none, url(../images/top/info/shop_title2_on.png) !important;
background-repeat:no-repeat , no-repeat !important;
background-position:right center , left center !important;}}

@media screen and (max-width:800px){#top-info #top-info-inner #cat-shop{display:none;}}

/*
================================================================================================================
今日のイチオシ
================================================================================================================
*/
#top-info #top-info-inner #cat-music{
display:block;
position:relative;
width:100%;
color:#fe8f01;
margin:0 0 20px auto;}
#top-info #top-info-inner #cat-music p{font-size:15px; font-weight:bold; padding:5px 0;}
#top-info #top-info-inner #cat-music p span{display:block; color:#000; font-size:12px; font-weight:normal !important;}
#top-info #top-info-inner #cat-music p:not(:last-child){border-bottom:1px solid #fff;}

@media screen and (max-width:980px){
#top-info #music-title{left:-20px;}}

@media screen and (max-width:480px){
#top-info #top-info-inner #cat-music p{font-size:13px;}
#top-info #top-info-inner #cat-music p span{font-size:11px;}}

/*
================================================================================================================
Twitter アプリ
================================================================================================================
*/
#top-info #top-info-inner .app{
display:block;
position:relative;
width:100%;
box-sizing:border-box;
margin:0 0 0 auto;}

#top-info #top-info-inner #cat-twitter{position:relative; margin-bottom:20px;}
#top-info #top-info-inner #cat-app{position:relative;}

#top-info #top-info-inner #cat-app #app-timeline{width:96%; height:200px; background-color:#fff; margin:auto; overflow:auto; border-radius:5px;}

.twitter-timeline{width:96% !important; margin:0 2% !important;}

@media screen and (max-width:980px){
#top-info .title-twitter,#top-info .title-app{left:-20px;}}

@media screen and (max-width:800px){
#top-info #top-info-inner .app{max-width:auto !important;}}

@media screen and (max-width:480px){
#top-info #top-info-inner #cat-twitter,#top-info #top-info-inner #cat-app{text-align:center;}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#top-info #top-info-inner #cat-shop,
#top-info #top-info-inner #cat-music,
#top-info #top-info-inner .app,
#top-info #top-info-inner .info{
background:#fff;
background-image:url(../images/top/frame/f04.png) , url(../images/top/frame/f03.png) , url(../images/top/frame/f02.png) , url(../images/top/frame/f01.png) , url(../images/top/frame/right.png) , url(../images/top/frame/left.png) , url(../images/top/frame/bottom.png) , url(../images/top/frame/top.png);
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat , repeat-y , repeat-y , repeat-x , repeat-x;
background-position:left bottom , right bottom , right top , left top , right , left , bottom , top;
border-radius:20px;}

#top-info #top-info-inner #cat-music{padding:60px 25px 30px;}
#top-info #top-info-inner .app{padding:70px 15px 30px;}
#top-info #top-info-inner .info{padding:20px 15px;}

@media screen and (max-width:800px){
#top-info #top-info-inner .info{padding:20px 15px 40px;}}

@media screen and (max-width:480px){
#top-info #top-info-inner .info{padding:20px 15px 60px;}}

@media screen and (max-width:370px){
#top-info #top-info-inner .info{padding:10px 15px 60px;}
#top-info #top-info-inner #cat-music{padding:40px 25px 30px;}
#top-info #top-info-inner .app{padding:50px 15px 30px;}}

/*
================================================================================================================
フレーム カテゴリ名
================================================================================================================
*/
#top-info #music-title,
#top-info .title-twitter,
#top-info .title-app,
#top-info #top-info-inner #cat-info #info-title{
position:absolute;
top:-5px;
left:5px;
color:#fff;
font-size:14px;
font-weight:bold;
font-family:'Noto Sans JP', sans-serif;
letter-spacing:0.5px;
padding:35px 0 0 50px;
text-shadow:0px 2px 0 #0084ff , 0px 1px 0 #0084ff , 1px 1px 0 #0084ff , 1px 0px 0 #0084ff,
            0px -1px 0 #0084ff , -1px -1px 0 #0084ff , -1px 0px 0 #0084ff,
            -1px 1px 0 #0084ff , 1px -1px 0 #0084ff;}
            
#top-info #music-title::before,
#top-info .title-twitter::before,
#top-info .title-app::before,
#top-info #top-info-inner #cat-info #info-title::before{
display:inline-block;
position:absolute;
top:0;
left:0;
content:"";
width:57px;
height:65px;
background-image:url(../images/top/frame/chef.png);
background-size:100%;}

@media screen and (max-width:370px){
#top-info #music-title,
#top-info .title-twitter,
#top-info .title-app,
#top-info #top-info-inner #cat-info #info-title{font-size:12px; padding:30px 0 0 40px;}

#top-info #music-title::before,
#top-info .title-twitter::before,
#top-info .title-app::before,
#top-info #top-info-inner #cat-info #info-title::before{width:46px; height:52px;}}

/*
================================================================================================================
フッター バナー
================================================================================================================
*/
#top-bnr{
position:relative;
width:100%;
color:#000;
font-size:11px;
text-align:center;
padding:20px 0;}
#top-bnr #top-bnr-inner{width:100%; max-width:640px; margin:0 auto;}
#top-bnr #top-bnr-inner li{text-align:center;}
#top-bnr #top-bnr-inner li img{width:100%; padding:5px; transition:all .5s ease-in-out;}
#top-bnr #top-bnr-inner li a:hover img{opacity:0.7;}

#top-bnr #top-bnr-inner ul#bnr-single{width:100%; margin:0 auto;}
#top-bnr #top-bnr-inner ul#bnr-single img{width:100%;}
#top-bnr #top-bnr-inner ul#bnr-single li:nth-child(odd){display:block;}
#top-bnr #top-bnr-inner ul#bnr-single li:nth-child(even){display:none;}

#top-bnr #top-bnr-inner ul#bnr-big,
#top-bnr #top-bnr-inner ul#bnr-small{display:flex; flex-wrap:wrap; width:100%; margin:0 auto;}

#top-bnr #top-bnr-inner span{display:block; margin-top:10px;}

@media screen and (max-width:640px){
#top-bnr{padding:20px 0 0 0 !important;}
#top-bnr #top-bnr-inner{width:96%;}}

@media screen and (min-width:481px){
#top-bnr #top-bnr-inner ul#bnr-big li{width:50%;}
#top-bnr #top-bnr-inner ul#bnr-small li{width:25%;}}

@media screen and (max-width:480px){
#top-bnr{font-size:10px;}

#top-bnr #top-bnr-inner ul#bnr-single li:nth-child(odd){display:none;}
#top-bnr #top-bnr-inner ul#bnr-single li:nth-child(even){display:block;}

#top-bnr #top-bnr-inner ul#bnr-big li{width:100%;}
#top-bnr #top-bnr-inner ul#bnr-small li{width:50%;}

#top-bnr #top-bnr-inner ul#bnr-single,
#top-bnr #top-bnr-inner ul#bnr-big,
#top-bnr #top-bnr-inner ul#bnr-small{width:90%;}}

@media screen and (max-width:380px){
#top-bnr #top-bnr-inner ul#bnr-single,
#top-bnr #top-bnr-inner ul#bnr-big,
#top-bnr #top-bnr-inner ul#bnr-small{width:80%;}}

/*BEMANIブランド*/
#bemani{
position:relative;
width:100%;
color:#333;
background-color:#fff;
font-size:12px;
text-align:left;
justify-content:center;
align-items:center;
padding:20px 0;
margin:0 auto;
z-index:4;}
#bemani .inner{
display:flex;
width:100%;
max-width:500px !important;
margin:0 auto;}
#bemani img{width:86px;}
#bemani p:first-child{width:86px; margin-right:10px;}
#bemani p:nth-child(2){width:calc(100% - 96px);}

@media screen and (max-width:530px){#bemani .inner{width:96%; font-size:11px; line-height:14px;}}
@media screen and (max-width:420px){#bemani{font-size:10px;}}