@charset "Shift-JIS";

#top{
position:relative;
width:100%;
color:#fff;
overflow:hidden;
padding:92px 0 0;
margin:0 auto;
z-index:3;}
@media screen and (max-width:980px){#top{padding:78px 0 0;}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#top .cat{
position:relative;
color:#eaffff;
background-color:rgba(83,134,148,.4);
box-shadow:0 5px 3px rgba(0,0,0,.4) , 0 10px 15px rgba(0,0,0,.7) , 0 0 10px rgba(0,0,0,.2) , inset 0 1px 1px rgba(255,255,255,.5);
border-radius:10px;
padding:30px;}

#top div.cat{width:calc(100% - 40px); max-width:1200px; margin:0 auto;}
#top div.cat + div.cat{margin-top:120px;}
@media screen and (max-width:480px){#top div.cat + div.cat{margin-top:50px;}}

#top .cat::before,
#top .cat::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:10px;
z-index:1;}
#top .cat::before{background:linear-gradient(to right, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);}
#top .cat::after{background:linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 50%);}
@media screen and (max-width:640px){#top .cat{padding:30px 20px 20px}}
@media screen and (max-width:480px){#top .cat{padding:30px 10px 10px;}}

#top .cat > .inner{position:relative; z-index:2;}
#top .cat > .inner > h3{
display:block;
color:#fff;
text-align:center;
font-family:'Poppins', sans-serif;
font-weight:300;
font-size:25px;
letter-spacing:2px;
border-bottom:1px solid #a0b3b5;
filter:drop-shadow(0 0 2px #19fcff);
padding-bottom:20px;
margin:0 auto 40px;}
@media screen and (max-width:640px){#top .cat > .inner > h3{margin:0 auto 30px;}}
@media screen and (max-width:480px){#top .cat > .inner > h3{font-size:20px; margin:0 auto 20px;}}

#top .cat .btn{
display:block;
position:relative;
color:#fff;
background-color:#001e26;
font-size:13px;
line-height:100%;
border-radius:40px;
border:solid 2px #fff;
text-align:center;
padding:8px;
transition:all .2s ease;
box-shadow:0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 4px #00bcd4 , 
           0 0 4px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 4px #00bcd4 inset , 0 0 4px #00bcd4 inset ,
           0 4px 4px 0 rgba(0,0,0,.5);}


#top .cat .btn:hover{
cursor:pointer;
box-shadow:0 0 2px #00bcd4 , 0 0 2px #00bcd4 ,0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 10px #00bcd4 , 
           0 0 10px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset ,  0 0 2px #00bcd4 inset , 0 0 5px #00bcd4 inset , 0 0 5px #00bcd4 inset ,
           0 4px 4px 0 rgba(0,0,0,.5);}

/*
================================================================================================================
動画エリア
================================================================================================================
*/
#movie{box-shadow:0 30px 20px #000; margin:0 auto 120px;}
#movie,#movie .inner{position:relative; width:100%; max-height:600px;}
#movie .inner video{position:relative; width:100%; z-index:2;}

#movie .inner{overflow:hidden;}
#movie .inner::before,
#movie .inner::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;}
#movie .inner::before{background-color:rgba(38,7,7,.2); background-image:url(../../images/top/movie/bg.png); opacity:.7; filter:blur(0.5px);}
#movie .inner::after{background-image:url(../../images/top/movie/logo.png); background-repeat:no-repeat; background-position:center;}

#movie::after{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:20px;
background:#fff;
box-shadow:0 0 5px #2afdff , 0 0 20px #2afdff , 0 0 60px #2afdff;
z-index:4;}

@media screen and (max-width:800px){
#movie{margin:0 auto 100px;}
#movie::after{height:15px;}}

@media screen and (max-width:640px){
#movie .inner::after{background-size:90% auto;}}

@media screen and (max-width:480px){
#movie{margin:0 auto 70px;}
#movie::after{height:10px;}}

/*
================================================================================================================
NEWS/MUSIC ループスライダー
================================================================================================================
*/
.slider{width:100%; margin:0 auto 130px;}

.slider > h2,
.slider > a.link{
display:block;
position:relative;
color:#fff;
font-family:'Poppins', sans-serif;
font-weight:300;
line-height:100%;
text-align:center;}

/*見出し*/
.slider > h2{font-size:70px;}
.slider > h2::before,
.slider > h2::after{bottom:10px;}
.slider > h2::before{left:0;}
.slider > h2::after{right:0;}

/*リンク*/
.slider > a.link{font-weight:500; transition:text-shadow .2s ease;}
.slider > a.link::before,
.slider > a.link::after{top:5px;}
.slider > a.link::before{left:0;}
.slider > a.link::after{right:0;}

/*見出し・リンク線*/
.slider > h2::before,
.slider > h2::after,
.slider > a.link::before,
.slider > a.link::after{
display:block;
content:"";
position:absolute;
width:calc(50% - 120px);
height:5px;
background-color:#fff;}

/*スライダー中身*/
.slider > .inner{padding:40px 0;}
.slider > .inner > .slider-loop{display:none;}

@media screen and (max-width:640px){
.slider{margin:0 auto 100px;}
.slider > h2{font-size:50px;}
.slider > h2::before,
.slider > h2::after,
.slider > a.link::before,
.slider > a.link::after{width:calc(50% - 90px);}}
@media screen and (max-width:480px){
.slider{margin:0 auto 60px;}
.slider > h2{font-size:40px;}
.slider > h2::before,
.slider > h2::after,
.slider > a.link::before,
.slider > a.link::after{width:calc(50% - 70px); height:3px;}
.slider > .inner{padding:20px 0;}
.slider > a.link{font-size:14px;}}

/*
========================
NEWS
========================
*/
#news .inner .slider-loop li{width:420px; margin:10px;}
#news .inner .slider-loop li img{width:100%; height:auto; vertical-align:bottom; border:2px solid #000;}

#news.slider > h2,#news.slider > a.link{color:#b4ffe6; filter:drop-shadow(0 0 2px #5ce7b9) drop-shadow(0 0 3px #5ce7b9);}
#news.slider > a.link:hover{text-shadow:0 0 10px #1b624a,0 0 20px #1b624a;}
#news.slider > h2::before,
#news.slider > h2::after,
#news.slider > a.link::before,
#news.slider > a.link::after{background-color:#b4ffe6;}

@media screen and (max-width:640px){#news .inner .slider-loop li{width:300px;}}

/*
========================
MUSIC
========================
*/
#music .inner .slider-loop li{width:170px; margin:5px;}
#music .inner .slider-loop li img{width:100%; height:auto; vertical-align:bottom;}

#music.slider > h2,#music.slider > a.link{color:#ffbcd3; filter:drop-shadow(0 0 2px #c13263) drop-shadow(0 0 3px #ed4881);}
#music.slider > a.link:hover{text-shadow:0 0 10px #c13263,0 0 20px #c13263;}
#music.slider > h2::before,
#music.slider > h2::after,
#music.slider > a.link::before,
#music.slider > a.link::after{background-color:#ffbcd3;}

@media screen and (max-width:480px){#music .inner .slider-loop li{width:120px;}}

/*
======================================================================
LOGIN
======================================================================
*/
#log-in{
display:flex;
width:calc(100% - 40px);
max-width:800px;
justify-content:space-between;
align-items:center;
margin:0 auto;}
#log-in > a.cat{width:49%; padding:30px !important;}
#log-in > a.cat > .inner > h3{line-height:120%; padding-bottom:10px; margin:0 auto 20px;}
#log-in > a.cat > .inner > h3 > span{display:inline-block; margin-right:10px;}
#log-in > a.cat > .inner > h3 > span img{width:auto; height:30px;}
#log-in > a.cat > .inner > p{letter-spacing:2px; line-height:150%;}
#log-in > a.cat::after{transition:all .2s ease;}
#log-in > a.cat:hover::after{box-shadow:0 0 5px #5ce7b9 , 0 0 10px #5ce7b9 , inset 0 0 30px #5ce7b9;}

@media screen and (min-width:801px){#log-in > a.cat{min-height:200px;}}
@media screen and (max-width:800px){
#log-in{flex-wrap:wrap; max-width:400px;}
#log-in > a.cat{width:100%;}
#log-in > a.cat + a.cat{margin-top:40px;}}
@media screen and (max-width:480px){
#log-in > a.cat{padding:20px !important;}
#log-in > a.cat > .inner > h3{line-height:150%;}
#log-in > a.cat > .inner > p{font-size:13px;}}

/*
================================================================================================================
ページ下部
================================================================================================================
*/
#top-footer{position:relative; padding:100px 0 150px;}
#top-footer::after{
display:block;
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 50%,rgba(0,0,0,.5) 100%);
z-index:1;}
#top-footer > *{z-index:2;}
@media screen and (max-width:480px){#top-footer{padding:60px 0 100px;}}

/*
========================
権利表記
========================
*/
#copyright{
display:block;
position:relative;
width:calc(100% - 40px);
max-width:1200px;
color:#d4e5ff;
font-size:12px;
line-height:200%;
letter-spacing:1px;
margin:0 auto 40px;}
@media screen and (max-width:480px){#copyright{font-size:9px; line-height:150% !important;}}

/*
========================
フッター バナー
========================
*/
#top-bnr{display:block; position:relative; width:calc(100% - 40px); max-width:980px; margin:0 auto;}
#top-bnr > ul{display:flex; justify-content:center; align-items:center; margin:0 auto 20px;}
#top-bnr > ul li{margin:5px;}
#top-bnr > ul li img{width:100%;}
#top-bnr > ul#bnr-sns li{width:45px;}
#top-bnr > ul#bnr-small li{width:145px;}
#top-bnr > ul#bnr-small li img{border:1px solid #666;}

/*BEMANIブランド*/
#bemani{
position:relative;
width:100%;
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;}}