/*
================================================================================================================
背景
================================================================================================================
*/
@media screen and (min-width:981px){
#bg{display:none;}
#top-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(/game/2dx/33/images/top/bg/grd.png) , url(/game/2dx/33/images/top/bg/pat.png);
background-position:top , top;
background-repeat:repeat-x , repeat;
pointer-events:none;
z-index:1;}
#top-bg > *{
display:block;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-position:top;
background-repeat:no-repeat;
background-size:100% auto;
transition:all .4s ease;}

#top-bg #bg01{background-image:url(/game/2dx/33/images/top/bg/splash01.webp);}
#top-bg #bg02{background-image:url(/game/2dx/33/images/top/bg/splash02.webp);}
#top-bg #bg03{background-image:url(/game/2dx/33/images/top/bg/splash03.webp);}
#top-bg #bg04{background-image:url(/game/2dx/33/images/top/bg/top.png); position:absolute !important;}

#base.top{
background-image:url(/game/2dx/33/images/top/bg/btm.png);
background-size:100% auto;
background-position:bottom;
background-repeat:no-repeat;}}

/*
================================================================================================================
TOP
================================================================================================================
*/
#base.top{font-family:'Noto Sans JP', sans-serif; padding:0 !important;}

#base.top img{width:100%;}
#base.top > *{margin:50px auto 0;}
#base.top > *.head + *{margin-top:10px;}
@media screen and (max-width:1100px){#base.top > *{margin:30px auto 0;}}
@media screen and (max-width:640px){
#base.top > *{margin:20px auto 0;}
#base.top > *.head + *,
#base.top > *.head:first-child{margin-top:5px;}}

/*
=============================
見出し
=============================
*/
.head{
position:relative;
width:100%;
max-width:980px;
font-family:'M PLUS 1', sans-serif;
font-size:40px;
font-weight:700;
line-height:130%;
padding-left:20px;
pointer-events:none;}
.head::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 1px);
left:-490px;
width:500px;
height:1px;
border-bottom:2px dashed #000;}
@media screen and (max-width:980px){.head{font-size:30px;}}
@media screen and (max-width:480px){.head{font-size:24px;}}

/*
================================================================================================================
メインビジュアル/スライドショーエリア
================================================================================================================
*/
/*スライダーエリア*/
#slider-top{position:relative; width:100%;}
#slider-top > *{z-index:3;}

/*
=============================
キャラ
=============================
*/
#slider-top::before{
display:block;
content:"";
position:absolute;
top:-140px;
left:0;
width:33%;
max-width:534px;
height:773px;
background-image:url(/game/2dx/33/images/top/chara/main.webp);
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
pointer-events:none;
z-index:4;}
@media screen and (max-width:1700px){#slider-top::before{top:-10px;}}
@media screen and (max-width:1400px){#slider-top::before{width:50%;}}
@media screen and (max-width:820px){#slider-top::before{top:10px; left:-30px; width:47%;}}
@media screen and (max-width:640px){#slider-top::before{display:none;}}

/*
=============================
背景スライド
=============================
*/
#slider-background{display:block; position:relative; width:100%;}
#slider-background .swiper-slide{position:relative; width:100%; height:490px; overflow:hidden;}
#slider-background .swiper-slide::before{
display:block;
content:"";
width:120%;
height:120%;
position:absolute;
left:-10%;
top:-10%;
filter:blur(20px);
background-position:center;
background-size:100% auto;}
@media screen and (max-width:1100px){#slider-background .swiper-slide{height:400px;}}
@media screen and (max-width:740px){#slider-background .swiper-slide{height:370px;}}
@media screen and (max-width:640px){#slider-background .swiper-slide{height:350px;}}
@media screen and (max-width:390px){#slider-background .swiper-slide{height:300px;}}

/*
=============================
メインスライド
=============================
*/
#slider-pickup{position:absolute; top:0; left:calc(50% - 245px); width:96%; max-width:490px;}
@media screen and (max-width:1400px){#slider-pickup{left:calc(67% - 245px);}}
@media screen and (max-width:1200px){#slider-pickup{left:unset; right:5%;}}
@media screen and (max-width:1100px){#slider-pickup{max-width:400px; right:20px;}}
@media screen and (max-width:740px){#slider-pickup{max-width:370px; right:10px;}}
@media screen and (max-width:640px){#slider-pickup{max-width:350px; right:calc(50% - 175px);}}
@media screen and (max-width:390px){#slider-pickup{max-width:300px; right:calc(50% - 150px);}}

/*ナビゲーション装飾*/
#slider-pickup *:after{display:none;}
#slider-pickup .swiper{width:100%;}
#slider-pickup .swiper-button-prev,
#slider-pickup .swiper-button-next{width:60px; height:60px; border-top:4px solid #fff; border-right:4px solid #fff;}
#slider-pickup .swiper-button-prev{left:-60px; transform:rotate(-135deg);}
#slider-pickup .swiper-button-next{right:-60px; transform:rotate(45deg);}

#slider-pickup .swiper-pagination{display:flex; width:100%; bottom:-10px; justify-content:center;}
#slider-pickup .swiper-pagination span{display:block; border-radius:0; width:20px; height:3px; background:#000; opacity:1; margin:0 3px;}
#slider-pickup .swiper-pagination span.swiper-pagination-bullet-active{background:#ff9000;}
@media screen and (max-width:1200px){#slider-pickup .swiper-button-prev,#slider-pickup .swiper-button-next{display:none;}}

/*
================================================================================================================
小バナースライド
================================================================================================================
*/
#slider-topics .swiper-container{overflow:unset !important;}

#slider-topics,
#slider-topics .swiper-slide p,
#slider-topics .swiper-slide p img{display:block; position:relative;}
#slider-topics .swiper-slide a img{transition:all 1s ease;}

#slider-topics .swiper-slide p::before{
display:block;
content:"";
position:absolute;
bottom:-10px;
left:5%;
width:90%;
height:20px;
border-radius:30px;
background:rgba(0,0,0,.4);
filter:blur(10px);
transform:translateZ(0);
transition:all 1s ease;}
#slider-topics .swiper-slide a:hover p img{transform:translateY(5px) scale(98%);}
#slider-topics .swiper-slide a:hover p::before{background:rgba(0,0,0,.8);}

/*
================================================================================================================
動画スライド
================================================================================================================
*/
#slider-video .swiper-container{padding:20px 0;}
#slider-video .swiper-container .swiper-slide {position:relative; width:100%;}
#slider-video .swiper-container .swiper-slide:before{content:""; display:block; padding-top:56.25%;}
#slider-video .swiper-container .swiper-slide iframe{position:absolute; top:0; left:0; width:100%; height:100%;}

/*
================================================================================================================
今日のイチオシ
================================================================================================================
*/
.recommend{position:relative; width:100%; max-width:480px; background:#fff; border-radius:40px; padding:20px; margin:0 auto;}
.recommend::before{
display:block;
content:"";
position:absolute;
bottom:-55px;
right:40px;
width:40px;
height:55px;
background-image:url(/game/2dx/33/images/top/chara/baloon.png);
background-position:center;
background-repeat:no-repeat;
background-size:auto 100%;}

.recommend > strong,
.recommend > strong span{display:inline-block; position:relative;}
.recommend > strong{font-weight:900;}
.recommend > strong::before{
display:block;
content:"";
position:absolute;
left:-5px;
bottom:-3px;
width:calc(100% + 10px);
height:10px;
background:#bffe40;}

.recommend .music{font-weight:700 !important;}
.recommend .music > li{padding:10px;}
.recommend .music > li > p:nth-child(2){font-size:12px;}
.recommend .music > li + li{border-top:2px dotted #bffe40;}

/*
=============================
今日のイチオイミニキャラ-PC
=============================
*/
#slider-top .pc{pointer-events:none;}
@media screen and (min-width:1401px){
#slider-top .pc{
position:absolute;
top:-60px;
right:0;
width:calc(50% - 245px);
height:620px;
padding:0 20px;}
#slider-top .pc::before{
display:block;
content:"";
position:absolute;
bottom:-30px;
left:0;
width:100%;
height:65%;
background-image:url(/game/2dx/33/images/top/chara/mini01.webp);
background-position:bottom center;
background-repeat:no-repeat;
background-size:auto 100%;
animation:2.5s fuwafuwa infinite;}}
@media screen and (max-width:1400px){#slider-top .pc{display:none;}}

/*
=============================
今日のイチオイミニキャラ-SP
=============================
*/
#top-footer ul.sp{display:none;}
@media screen and (max-width:1400px){
#top-footer ul.sp{display:flex; position:relative; width:100%; max-width:980px; justify-content:center; align-items:center; margin:0 auto;}
#top-footer ul.sp > li:nth-child(1){
display:block;
width:297px;
height:260px;
background-image:url(/game/2dx/33/images/top/chara/mini02.webp);
background-position:bottom center;
background-repeat:no-repeat;
background-size:auto 100%;
animation:2.5s fuwafuwa infinite;}
#top-footer ul.sp > li:nth-child(2){width:50%; margin-left:20px;}}
@media screen and (max-width:800px){#top-footer ul.sp > li:nth-child(1){width:242px; height:210px;}}
@media screen and (max-width:640px){
#top-footer ul.sp > li:nth-child(1){display:none;}
#top-footer ul.sp > li:nth-child(2){width:calc(100% - 20px); margin-left:0;}
#top-footer .recommend{max-width:unset; border-radius:20px;}}

/*フキダシ*/
@media screen and (min-width:641px){
#top-footer ul.sp .recommend::before{
bottom:unset;
right:unset;
top:70px;
left:-40px;
transform:rotate(90deg);}}
@media screen and (max-width:640px){#top-footer ul.sp .recommend::before{display:none;}}

/*アニメーション*/
@keyframes fuwafuwa{
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

/*
================================================================================================================
設置店舗検索 / SNS
================================================================================================================
*/
#top-link{text-align:center; padding:20px 10px; margin:0 auto;}
#top-link > a{display:block; width:100%; max-width:480px; color:#000; background:#ff9000; border-radius:30px; margin:0 auto; transition:all .2s ease;}
#top-link > a > p{position:relative; width:calc(100% - 40px); background:#fff; font-weight:700; border-radius:30px; padding:10px 20px 10px 90px; margin:0 auto 0 0;}
#top-link > a > p::before,
#top-link > a > p::after{display:block; position:absolute; transition:all .2s ease;}
#top-link > a > p::before{
content:"CLICK";
left:30px;
color:#ff9000;
font-size:13px;}
#top-link > a > p::after{
content:"";
left:75px;
top:calc(50% - 5px);
width:0;
height:0;
border-style:solid;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:10px solid #ff9000;
border-right:0;}
#top-link > a:hover{color:#00ab95; background:#00ab95;}
#top-link > a:hover > p::before{color:#00ab95;}
#top-link > a:hover > p::after{border-left:10px solid #00ab95;}

#top-link > ul{display:flex; width:100%; margin:20px auto 0; justify-content:center; align-items:center;}
#top-link > ul li + li{margin-left:10px;}
#top-link > ul li a{display:block; width:50px; border-radius:5px; transition:all .2s ease;}
#top-link > ul li a:hover{opacity:.7;}
#top-link > ul li:nth-child(1) a{background:#000;}
#top-link > ul li:nth-child(2) a{background:#fff;}

/*
================================================================================================================
フッター バナー
================================================================================================================
*/
#top-bnr{
position:relative;
width:100%;
color:#fff;
background:#282828;
font-family:'Noto Sans JP', sans-serif;
font-size:11px;
text-align:center;
padding:20px 10px;
z-index:3;}
#top-bnr img{width:100%;}
#top-bnr > .inner{width:100%; max-width:640px; margin:0 auto;}
#top-bnr > .inner > ul{display:flex; flex-wrap:wrap; width:100%; margin:0 auto;}
#top-bnr > .inner > ul li{text-align:center;}
#top-bnr > .inner > ul li img{padding:5px; transition:all .5s ease-in-out;}
#top-bnr > .inner > ul li a:hover img{opacity:0.7;}
#top-bnr > .inner span{display:block; margin-top:10px;}
@media screen and (min-width:481px){#top-bnr > .inner ul#bnr-small li{width:25%;}}
@media screen and (max-width:480px){
#top-bnr{font-size:10px;}
#top-bnr > .inner > ul{width:90%;}
#top-bnr > .inner > ul li{width:50%;}}
@media screen and (max-width:380px){#top-bnr > .inner > ul{width:80%;}}

/*BEMANIブランド*/
#bemani{
position:relative;
display:flex;
width:100%;
max-width:490px;
font-size:12px;
text-align:left;
justify-content:center;
align-items:center;
margin:20px auto 0;}
#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{font-size:11px; line-height:14px;}}
@media screen and (max-width:420px){#bemani{font-size:10px;}}