@charset "Shift-JIS";

/*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:#fff;}

/*z-index*/
header#id_nav_menu_1             {z-index:9999 !important;}
footer                           {z-index:2 !important;}
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
#main .section                   {z-index:2;}
#main #footer > .inner           {z-index:3;}
#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%; min-width:320px !important; overflow-wrap:break-word}
body{
min-width:320px !important;
background-color:#000;
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;}
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:700; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}
a img{transition:opacity .3s ease;}

@media screen and (min-width:2000px){body{max-width:2000px; margin:0 auto;}}

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

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

#main{position:relative; background-color:#000; line-break:strict; hanging-punctuation:allow-end;}
#main::before{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-size:cover;
background-image:url(/game/bpl/season5/event/bpl_supporters/img/main/bg.jpg);}

#main > #main-inner{position:relative;}

/*
================================================================================================================
メニュー
================================================================================================================
*/
/*#menu-area{background:rgba(0,0,0,.2);}*/

/*イベントロゴ*/
#menu-area #main-logo{position:relative; width:90%; max-width:800px; padding:20px 0 30px; margin:0 auto;}
#menu-area #main-logo > p:first-child{filter:drop-shadow(0 0 10px rgba(255,255,255,.3)) drop-shadow(0 0 3px #fff);}
#menu-area #main-logo > p:last-child{position:absolute; top:20px; left:0;}
#menu-area #main-logo > p img{width:100%;}

/*メニュー*/
#menu-area > #main-menu{position:relative; display:flex; max-width:1200px; margin:0 auto -29px; z-index:4; filter:drop-shadow(5px 5px 0 rgba(0,0,0,.3));}
#menu-area > #main-menu > a{
display:block;
width:calc((100% / 6) - 10px);
height:58px;
color:#fff;
background:#000 !important;
border:2px solid #ff6cc2;
font-family:'Noto Sans JP', sans-serif;
border-radius:5px;
margin:0 5px;
transition:background .2s ease-in-out;}
#menu-area > #main-menu > a > p{
display:flex;
position:relative;
font-size:16px;
height:100%;
line-height:120%;
text-align:center;
justify-content:center;
align-items:center;}
#menu-area > #main-menu > a:nth-child(5) > p,
#menu-area > #main-menu > a:nth-child(6) > p{font-size:12px; line-height:110%;}

#menu-area > #main-menu > a:hover,
#menu-area > #main-menu > a.active{color:#000; background:#ff6cc2 !important; font-weight:700;}

@media screen and (max-width:1300px){
#menu-area > #main-menu{padding:10px 0;}
#menu-area > #main-menu > a{width:calc(25% - 4px); margin:0 2px;}}

@media screen and (max-width:1200px){
#menu-area > #main-menu{flex-wrap:wrap; padding:0; margin:-20px auto 10px;}
#menu-area > #main-menu > a{width:calc((100% / 3) - 10px); margin:5px;}}

@media screen and (max-width:620px){
#menu-area > #main-menu > a{width:calc(50% - 6px); margin:3px;}}

@media screen and (max-width:480px){
#menu-area > #main-menu{margin:-10px auto 10px;}
#menu-area > #main-menu > a{height:50px;}
#menu-area > #main-menu > a > p{font-size:14px;}}

@media screen and (max-width:370px){
#menu-area > #main-menu > a:nth-child(5) > p,
#menu-area > #main-menu > a:nth-child(6) > p{font-size:10px;}}

/*
================================================================================================================
epass
================================================================================================================
*/
#support #card_no{
display:flex;
color:#fff;
background:rgba(0,0,0,.8);
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
text-align:center;
padding:10px 0;
margin:10px auto 0px;
justify-content:center;}
#support #card_no > p:first-child{font-size:13px; padding:0 10px;}

@media screen and (max-width:600px){
#support #card_no{flex-wrap:wrap;}
#support #card_no > p{width:100%;}
#support #card_no > p:first-child{font-size:12px; padding:0 0 5px;}
#support #card_no > p:nth-child(2){font-size:14px;}}

/*
================================================================================================================
応援チケット
================================================================================================================
*/
#ticket-num{display:flex; color:#000; font-family:'Noto Sans JP', sans-serif;}
#ticket-num li{width:50%;}
#ticket-num li:first-child{position:relative; font-weight:700; font-size:20px;}
#ticket-num li:first-child::before{
display:block;
content:"";
position:absolute;
width:114px;
height:74px;
background-size:100% auto;
background-image:url(../img/main/ticket.png);
box-shadow:3px 3px 5px rgba(0,0,0,.6);
z-index:2;}
#ticket-num li:nth-child(2){font-size:40px; font-weight:900;}

@media screen and (min-width:601px){
#ticket-num{height:74px; line-height:74px;}
#ticket-num li:first-child{padding-right:20px; text-align:right;}
#ticket-num li:first-child::before{right:150px;}}

@media screen and (max-width:600px){
#ticket-num{flex-wrap:wrap;}
#ticket-num li{width:100%; text-align:center;}
#ticket-num li:first-child{line-height:150%; margin-bottom:10px; font-size:16px;}
#ticket-num li:first-child::before{left:calc(50% - 140px); top:-30px; width:80px; height:52px; transform:rotate(-10deg);}}

@media screen and (max-width:480px){
#ticket-num li:first-child::before{left:calc(50% - 120px); top:-20px; width:60px; height:39px; box-shadow:2px 2px 3px rgba(0,0,0,.4);}
#ticket-num li:nth-child(2){font-size:30px;}
#ticket-num li:nth-child(2)::after{font-size:15px;}}

/*
================================================================================================================
epass応募状況
================================================================================================================
*/
#epass-num{color:#000; background:#fff; font-family:'Noto Sans JP', sans-serif; padding:30px 0;}
#epass-num ul{display:flex; align-items:center;}
#epass-num li{width:50%;}
#epass-num li:first-child{position:relative; font-weight:700; font-size:20px;}
#epass-num li:nth-child(2){font-size:40px; font-weight:900;}
#epass-num li .total_epass{font-size:18px;}
#epass-num p{text-align:center; margin:10px auto 0;}

@media screen and (min-width:601px){
#epass-num li:first-child{padding-right:20px; text-align:right;}}

@media screen and (max-width:600px){
#epass-num{padding:10px 0 15px;}
#epass-num ul{flex-wrap:wrap;}
#epass-num li{width:100%; text-align:center;}
#epass-num li:first-child{line-height:150%; margin-bottom:10px; font-size:16px;}}

@media screen and (max-width:480px){
#epass-num li:nth-child(2){font-size:30px;}
#epass-num li .total_ticket{font-size:15px;}}

/*
================================================================================================================
切り替え用 汎用タブ
================================================================================================================
*/
.tab-title{
display:flex;
position:relative;
width:calc(100% - 40px);
max-width:1200px;
margin:20px auto 0;
justify-content:space-between;
z-index:3;}
.tab-title > *{
position:relative;
display:block;
width:calc((100% / 3) - 5px);
color:#fff;
background:#000;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
font-size:22px;
letter-spacing:.5px;
text-align:center;
border-radius:40px;
padding:20px 0 25px;
transition:.35s ease-in-out;
opacity:.5;}
.tab-title > *:hover,
.tab-title > *.active{cursor:pointer; background:#333; opacity:1;}
.tab-title > *.active{cursor:default !important; pointer-events:none;}

@media screen and (max-width:980px){
.tab-title{width:calc(100% - 20px);}
.tab-title > *{font-size:20px; padding:15px 0 20px;}}

@media screen and (max-width:800px){
.tab-title{width:calc(100% - 40px); flex-wrap:wrap;}
.tab-title > *{width:100%;}
.tab-title > * + *{margin-top:10px;}}

@media screen and (max-width:480px){
.tab-title{margin:10px auto 0;}
.tab-title > *{font-size:18px; padding:10px 0 15px;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
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:#000; 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(255,255,255,.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;}}

/*
================================================================================================================
フッター
================================================================================================================
*/
#footer{position:relative; z-index:3; background-color:#000;}
#footer > .inner{
position:relative;
display:flex;
width:90%;
padding:30px 0;
justify-content:center;
margin:0 auto;}
#footer > .inner a{display:block; background-color:#fff;}
#footer > .inner a img{width:100%; border:1px solid #666;}
#footer > .inner a:hover img{opacity:.5;}
@media screen and (min-width:641px){
#footer > .inner a{width:150px;}
#footer > .inner a + a{margin-left:10px;}}
@media screen and (max-width:640px){
#footer > .inner{flex-wrap:wrap; max-width:320px;}
#footer > .inner a{width:calc(50% - 5px); margin:5px 0;}
#footer > .inner a:nth-child(even){margin-left:10px;}}