/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}
#container{/*background-color:#0171b1;*/ background:#fff;}

/*z-index*/
#bg                              {z-index:1;}
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
#main .section                   {z-index:3;}
#page-title                      {z-index:4;}

header#id_nav_menu_1              {z-index:9999 !important;}
footer                            {z-index:2 !important;}
#page-top,#page-top a             {z-index:10 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:#000 !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:600; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

.no-show{display:none !important;}/*タブ切替*/

/*
================================================================================================================
パララックス用共通背景
================================================================================================================
*/
#bg{
display:block;
width:100%;
height:110vh;
position:fixed;
top:0;
left:0;
background:#000;}
#bg > #bg00,
#bg > #bg01,
#bg > #bg02{
display:block;
width:100%;
height:110vh;
position:fixed;
top:0;
left:0;
background-repeat:repeat;
transition:all .4s ease;}
#bg > #bg00{background-image:url(/game/bpl/season6/img/common/bg/main.jpg); transition:all .6s ease;}
#bg > #bg01{height:55vh; background:linear-gradient(to bottom, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 100%); mix-blend-mode:screen;}
#bg > #bg02{background-image:url(/game/bpl/season5/img/common/bg/dot.png); opacity:.9}

#bg > #bg00,#bg > #bg01{background-size:cover;}

/*
================================================================================================================
メイン
================================================================================================================
*/
@media screen and (min-width:981px){#main{min-height:calc(100vh - 201px);}}
@media screen and (max-width:980px){#main{min-height:calc(100vh - 249px);}}

#main{position:relative; font-family:'M PLUS 1', sans-serif; padding:120px 40px 40px;}
@media screen and (max-width:640px){#main{padding:150px 20px 40px;}}
@media screen and (max-width:480px){#main{padding:130px 20px 40px;}}

#main > #main-inner{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0 auto;}

#main .section{
position:relative;
width:100%;
text-align:center;}

#main > #main-inner > .section{
max-width:1200px;
color:#000;
font-size:16px;
font-weight:600;
text-align:left;
letter-spacing:1px;
line-height:160%;
margin:0 auto;}
@media screen and (max-width:800px){#main > #main-inner > .section{font-size:15px;}}
@media screen and (max-width:640px){#main > #main-inner > .section{font-size:13px;}}

#main > #main-inner > .section > *{position:relative; z-index:4;}

/*
================================================================================================================
ページタイトル/パンくずリスト
================================================================================================================
*/
#page-title{
display:block;
position:relative;
width:100%;
max-width:1200px;
margin:0 auto 20px;}

#page-title > h1{
display:block;
position:relative;
width:100%;
color:#fe5a72;
background:linear-gradient(90deg, #ff3348 0%, #ffb771 40%, #ff6480 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:44px;
font-weight:800;
line-height:100%;
text-align:left;
align-items:center;
margin:0 auto;}
#page-title > h1 > span{display:block; font-size:30px; line-height:100%; margin-top:10px;}
@media screen and (max-width:800px){
#page-title > h1{font-size:34px;}
#page-title > h1 > span{font-size:20px;}}
@media screen and (max-width:640px){
#page-title > h1{font-size:26px;}
#page-title > h1 > span{font-size:15px;}}
@media screen and (max-width:480px){#page-title > h1{font-size:22px;}}
@media screen and (max-width:370px){#page-title > h1{font-size:20px;}}

/*パンくずリスト*/
#page-title > ol{
display:flex;
font-family:'Noto Sans JP', sans-serif;
font-size:12px;
font-weight:100;
padding:10px 0;
margin:0 auto;
flex-wrap:wrap;}
#page-title > ol li{position:relative; font-weight:700;}
#page-title > ol li a{color:#000;}
#page-title > ol li:not(:last-child){padding-right:20px;}
#page-title > ol li:not(:last-child) a{border-bottom:1px solid rgba(255,51,72,0); transition:all .3s ease;}
#page-title > ol li:not(:last-child) a:hover{color:#ff3348; border-bottom:1px solid rgba(255,51,72,1);}
#page-title > ol li:last-child{pointer-events:none;}
#page-title > ol li:last-child a:hover{cursor:default;}
#page-title > ol li:not(:last-child)::after{
display:block;
content:">";
position:absolute;
top:-1px;
right:6px;
color:#ff3348;
font-size:12px;
transform:scaleY(1.5);}
@media screen and (max-width:480px){
#page-title > ol{font-size:10px; /*padding:2px 5px;*/ padding:5px 0;}
#page-title > ol li:not(:last-child){padding-right:16px;}
#page-title > ol li:not(:last-child)::after{right:3px;}}

/*
================================================================================================================
共通
================================================================================================================
*/
h2.title,h3.title{display:block; position:relative; width:100%; font-weight:800;}

/*
========================
見出し-大
========================
*/
h2.title{color:#000; font-size:22px; margin:30px auto 10px;}
h2.title:first-of-type{margin:0 auto 10px;}
h2.title::after{
display:block;
content:"";
width:100%;
height:4px;
background:#fe5a72;
border-radius:2px;
margin-top:5px;}

@media screen and (max-width:640px){h2.title{font-size:18px;}}
@media screen and (max-width:480px){h2.title{font-size:16px;}}

/*
========================
見出し-中
========================
*/
h3.title{
color:#fff;
background:#00baff;
font-size:24px;
padding:20px 10px;
margin:50px auto 20px 0;}
h3.title:first-of-type{margin:0 auto 20px 0;}
h3.title > span{display:inline-block; font-size:18px; margin-left:10px;}

@media screen and (max-width:640px){h3.title{font-size:22px;}}
@media screen and (max-width:480px){
h3.title{font-size:20px; padding:10px; margin:30px auto 10px;}
/*h3.title > span{display:block;}*/}

/*
=========================
リスト
========================
*/
#main .small{font-size:12px;}
@media screen and (max-width:640px){#main .small{font-size:11px;}}
@media screen and (max-width:480px){#main .small{font-size:10px;}}

ul.sq > li,ul.dot > li,ul.ast > li,span.ast{position:relative; padding-left:16px;}
ul.num > li{position:relative; padding-left:22px;}

ul.sq > li::before,
ul.dot > li::before,
ul.ast > li::before,
ul.num > li::before,
span.ast::before{display:block; position:absolute; top:0; left:0;}

ul.sq > li::before{content:"■";}
ul.dot > li::before{content:"・";}
ul.ast > li::before,span.ast::before{content:"※";}

ul.num > li:first-child::before{content:"①";}
ul.num > li:nth-child(2)::before{content:"②";}
ul.num > li:nth-child(3)::before{content:"③";}
ul.num > li:nth-child(4)::before{content:"④";}
ul.num > li:nth-child(5)::before{content:"⑤";}

@media screen and (max-width:640px){
ul.dot.small li,ul.ast.small li,span.ast.small{padding-left:14px;}
ul.num > li{padding-left:18px;}}/*
@media screen and (max-width:480px){
ul.dot.small li::before,ul.ast.small li::before,span.ast.small::before{top:-2px;}}*/

/*
========================
動画
========================
*/
#movie,
.movie{
position:relative;
width:100%;
margin:0 auto;}
#movie{max-width:1200px;}
.movie-inner{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;}
.movie-inner iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
z-index:2;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.link-btn{
display:block;
position:relative;
width:100%;
max-width:400px;
color:#00baff;
background:#fff;
font-size:16px;
text-decoration:none !important;
border:2px solid;
border-radius:30px;
padding:10px 45px 10px 20px;
margin:10px auto;
transition:.3s ease;
box-shadow:0 0 2px rgba(0,0,0,0);
cursor:pointer;}
.link-btn:hover{color:#fff; background:#ff3348; text-decoration:none !important; border:2px solid #ff3348; box-shadow:3px 3px 2px rgba(0,0,0,.2);}

.link-btn::before,
.link-btn::after{display:block; position:absolute; content:""; transition:.3s ease;}
.link-btn::before{top:calc(50% - 1px); right:25px; width:25px; height:.5px; border-bottom:2px solid; opacity:0;}
.link-btn:hover::before{right:17px; opacity:1;}
.link-btn::after{top:calc(50% - 6px); right:20px; width:12px; height:12px; border-top:2px solid; border-right:2px solid; transform:rotate(45deg);}
.link-btn:hover::after{right:17px;}

@media screen and (max-width:640px){.link-btn{font-size:15px;}}
@media screen and (max-width:480px){.link-btn{font-size:14px;}}
@media screen and (max-width:420px){.link-btn{font-size:13px;}}

/*同意確認アクティブ*/
.link-btn.none{opacity:.6; pointer-events:none; filter:grayscale(1) invert(1);}

.link-btn.music{
max-width:600px;
color:#fff;
background:#ff1bc7;
border:1px solid #ff1bc7;
margin:20px auto 0 0;}
.link-btn.music:hover{color:#ff1bc7; background:#fff;}
@media screen and (min-width:641px){.link-btn.music{font-size:20px;}}
@media screen and (max-width:640px){.link-btn.music{font-size:18px;}}

/*
================================================================================================================
チームカラー
================================================================================================================
*/
.team-av{background-color:#0057b5;}/*APINA VRAMeS*/
.team-gg{background-color:#006cdc;}/*GiGO*/
.team-gp{background-color:#ffcb21;}/*GAME PANIC*/
.team-sh{background-color:#c8c8c8;}/*SILK HAT*/
.team-tt{background-color:#f00;}/*TAITO STATION Tradz*/
.team-r1{background-color:#d80c18;}/*ROUND1*/
.team-ll{background-color:#ff1d84;}/*レジャーランド*/

/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:1s;}
.fade > .fade{animation-delay:2s;}

#fade{
animation-name:fadeIn;
animation-duration:.7s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:.5s;}

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

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
display:none !important;
position:fixed;
bottom:-25px;
right:-15px; 
font-size:13px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
transition:all .3s ease;
visibility:hidden;
opacity:0;}
#page-top a{display:block; position:relative; color:#fff; transition:opacity .3s ease;}
#page-top:hover a,#page-top a:hover{opacity:.8;}
#page-top a img{width:100%; max-width:60px;}
#page-top a > span{position:relative;}
#page-top a > span:first-child{display:block; margin:0 auto 5px;}
#page-top a > span br{display:none;}

#page-top::before{
display:block;
content:"";
position:fixed;
bottom:-130px;
right:-130px;
width:200px;
height:200px;
background-color:rgba(0,0,0,.9);
transform:rotate(45deg);
transition:all .3s ease;}
#page-top:hover::before{opacity:.5; cursor:pointer;}

/*スクロール表示 移動量30px*/
#page-top.scroll{bottom:5px; right:15px; opacity:1; visibility:visible;}
#page-top.scroll::before{bottom:-100px; right:-100px;}

@media screen and (max-width:480px){
#page-top{width:60px; right:-15px; bottom:-10px; font-size:11px; font-weight:400; line-height:130%;}
#page-top a img{max-width:50px;}
#page-top::before{bottom:-100px; right:-100px; width:160px; height:160px;}

/*スクロール表示 移動量20px*/
#page-top.scroll{right:5px; bottom:10px;}
#page-top.scroll::before{bottom:-80px; right:-80px;}}

/*
================================================================================================================
HEADER
================================================================================================================
*/
header #id_nav_menu_2.common-header dl,
header #id_nav_menu_2.common-header dl dd,
header #id_nav_menu_2.common-header dl dd ul{display:flex; justify-content:flex-end; align-items:center;}
header #id_nav_menu_2.common-header dl dd ul li:last-child{transform:translateY(2px); margin:0 20px 0 5px !important;}

#title_ad{text-align:left; margin:0;}
#title_ad a{display:flex; width:auto; color:#004484; font-size:12px; text-decoration:underline; align-items:center;}
#title_ad br{display:none;}
@media screen and (max-width:620px){
#title_ad a{font-size:10px; line-height:12px;}
#title_ad br{display:block;}}
@media screen and (max-width:380px){#title_ad a{font-size:7px;}}