@charset "Shift-JIS";

/*
================================================================================================================
パララックス用共通背景
================================================================================================================
*/
#bg{
display:block;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:linear-gradient(45deg, #ff56a6 10%,#00a7ec 90%);
transition:all .6s ease;}
#bg::after{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(/game/qk_stadium/1/img/common/bg/bg_dot.png);
opacity:.5;}

#bg > *{
display:block;
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
background-repeat:repeat;
background-position:top center;
transition:all .4s ease;}
#bg > #hex01{background-image:url(/game/qk_stadium/1/img/common/bg/hex01.png);}
#bg > #hex02{background-image:url(/game/qk_stadium/1/img/common/bg/hex02.png);}
#bg > #hex03{background-image:url(/game/qk_stadium/1/img/common/bg/hex03.png);}
#bg > #hex04{background-image:url(/game/qk_stadium/1/img/common/bg/hex04.png);}
#bg > #cross01{background-image:url(/game/qk_stadium/1/img/common/bg/cross01.png);}
#bg > #cross02{background-image:url(/game/qk_stadium/1/img/common/bg/cross02.png);}

@media screen and (max-width:980px){#bg > *{background-size:130% auto;}}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
width:100%;
padding:50px 0;
margin:0 auto;
z-index:2;
animation-name:fadeIn;
animation-duration:.7s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:.5s;}

#main-inner{
width:100%;
max-width:1300px;
min-width:320px;
font-size:14px;
padding:20px;
margin:0 auto;}

@media screen and (min-width:981px){#main-inner{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#main-inner{min-height:calc(100vh - 225px);}}
@media screen and (max-width:640px){#main-inner{font-size:13px;}}
@media screen and (max-width:480px){
#main{padding:50px 0 30px;}
#main-inner{font-size:12px; padding:10px;}}

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

/*
================================================================================================================
フレーム
================================================================================================================
*/
#main .frame + h2.frame-title{margin-top:30px;}

/*見出し*/
#main h2.frame-title{
position:relative;
background-image:url(/game/qk_stadium/1/img/common/frame/left.png);
background-position:left top;
background-repeat:no-repeat;
padding-left:34px;
filter:drop-shadow(-4px 0 0 #dc0068) drop-shadow(4px 0 0 #dc0068) drop-shadow(0 -4px 0 #dc0068);
margin-left:4px;
z-index:3;}

#main h2.frame-title > span{
display:inline-block;
position:relative;
height:48px;
color:#fa006a;
background-color:#fff;
font-size:30px;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
line-height:48px;
padding:0 10px 0 120px;}
#main h2.frame-title > span > span{font-size:20px;}

#main h2.frame-title > span::before,
#main h2.frame-title > span::after{
display:block;
content:"";
position:absolute;
top:0;
height:48px;
background-repeat:no-repeat;}
#main h2.frame-title > span::before{left:-34px; width:150px; background-image:url(/game/qk_stadium/1/img/common/frame/icn.png);}
#main h2.frame-title > span::after{right:-24px; width:24px; background-image:url(/game/qk_stadium/1/img/common/frame/right.png);}

/*フレーム本体*/
#main .frame{position:relative; border:4px solid #dc0068; margin:-4px auto 0; z-index:2;}
#main .frame .frame-border{padding-top:16px; border:10px solid #fff;}
#main .frame .frame-inner{
position:relative;
color:#fff;
background-color:rgba(0,45,96,.9);
background-image:url(/game/qk_stadium/1/img/common/frame/bg.png);
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;
padding:20px;
border:4px solid #dc0068;}
#main .frame .frame-inner::before{
display:block;
content:"";
position:absolute;
top:-20px;
left:-4px;
width:calc(100% + 8px);
height:16px;
background:linear-gradient(to right, #fa006a 10%,#00b4ff 80%);}

@media screen and (max-width:680px){
#main h2.frame-title{
height:25px;
/*overflow:hidden;*/
filter:drop-shadow(-2px 0 0 #dc0068) drop-shadow(2px 0 0 #dc0068) drop-shadow(0 -2px 0 #dc0068);
margin-left:-14px;}

#main h2.frame-title > span{height:25px; font-size:18px; line-height:20px; padding:0 10px 0 65px;}
#main h2.frame-title > span > span{font-size:15px;}
#main h2.frame-title > span::before,#main h2.frame-title > span::after{height:25px;}
#main h2.frame-title > span::before{left:-19px; width:80px; background-size:99% auto; background-position:left top;}

#main .frame{border:2px solid #dc0068; margin:-2px auto 0;}
#main .frame .frame-border{padding-top:10px; border:5px solid #fff;}
#main .frame .frame-inner{background-size:180% auto; border:2px solid #dc0068; padding:10px;}
#main .frame .frame-inner::before{width:calc(100% + 4px); height:10px; top:-12px; left:-2px;}}

@media screen and (max-width:430px){
#main h2.frame-title > span{font-size:15px; line-height:24px;}
#main h2.frame-title > span > span{font-size:12px;}}

@media screen and (max-width:360px){
#main h2.frame-title > span{font-size:13px; padding:0 0 0 50px;}
#main h2.frame-title > span > span{font-size:11px;}
#main h2.frame-title > span::before{left:-15px; width:80px; background-size:auto 20px;}}


/*
========================
見出し
========================
*/
h2.title,
h2.title > p,
h2.title > p > span{
display:block;
position:relative;
text-align:center;}

h2.title{width:calc(100% - 40px); margin:0 auto;}

h2.title *::before,
h2.title *::after{
display:block;
content:"";
position:absolute;
top:0;
width:0;
height:0;}

h2.title > p{width:100%; height:46px; background-color:#fe0074; filter:drop-shadow(-10px 0 0 #0dfefc) drop-shadow(10px 0 0 #0dfefc);}
h2.title > p::before,
h2.title > p::after{
border:23px solid transparent;
border-right:15px solid transparent;
border-left:15px solid transparent;
z-index:2;}
h2.title > p::before{right:-30px; border-left-color:#fe0074;}
h2.title > p::after{left:-30px; border-right-color:#fe0074;}

h2.title > p > span{
top:2px;
width:calc(100% - 4px);
height:42px;
color:#fe0074;
background-color:#fff;
font-size:22px;
font-family:'M PLUS 1', sans-serif;
line-height:42px;
margin:0 auto;}
h2.title > p > span::before,
h2.title > p > span::after{
border:21px solid transparent;
border-right:14px solid transparent;
border-left:14px solid transparent;
z-index:3;}
h2.title > p > span::before{right:-28px; border-left-color:#fff;}
h2.title > p > span::after{left:-28px; border-right-color:#fff;}