@charset "Shift-JIS";

@media screen and (min-width:981px){#main{margin-top:80px !important;}}
@media screen and (max-width:980px){#main{margin-top:40px !important;}}

#bnr{margin:0 auto 30px;}
#bnr a{display:block; background:#fff;}
#bnr a img{width:100%;}
#bnr a:hover img{opacity:.7}

#guideline{margin:0 auto 30px;}

@media screen and (max-width:640px){
#bnr{margin:0 auto 20px;}
#guideline{margin:0 auto 20px;}}
@media screen and (max-width:370px){#guideline h2.title > p > span{font-size:18px !important;}}

/*Twitterボタン*/
#main-inner{position:relative;}
#twitter-btn{
display:block;
color:#fff;
background:#009ef7;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
font-size:26px;
line-height:100%;
border-radius:30px;
padding:2px;
transition:background .2s ease; 
filter:drop-shadow(0 1px 0 #0059aa) drop-shadow(1px 1px 0 #0059aa) drop-shadow(2px 1px 0 #0059aa);}
#twitter-btn:hover{background:#0080f3;}
#twitter-btn p{position:relative; border:3px solid; border-radius:30px; padding:15px 20px 15px 70px;}
#twitter-btn p::before{
content:"";
display:block;
position:absolute;
top:calc(50% - 20px);
left:20px;
width:40px;
height:40px;
background-image:url(/game/qk_stadium/1/img/common/menu/icn_twitter.png);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;}



@media screen and (min-width:521px){#twitter-btn{position:absolute; top:-50px; right:20px;}}

@media screen and (max-width:800px){#twitter-btn{top:-20px; font-size:18px;}}
@media screen and (max-width:680px){#twitter-btn{top:-30px;}}
@media screen and (max-width:520px){
#twitter-btn{position:relative !important; top:-20px; text-align:center;}
#twitter-btn p{padding:15px;}}
@media screen and (max-width:370px){
#twitter-btn p{padding:15px 20px 15px 70px;}}

/*
================================================================================================================
TOP
================================================================================================================
*/
#top p{width:100%; max-width:1700px; background-size:100% auto , 100% auto , 100% auto; margin:0 auto;}
#top p > img{width:100%;}

#top p:first-child{background-image:url(../img/top/top_pc03.png) , url(../img/top/top_pc02_0401.png) , url(../img/top/top_pc01.png);}
#top p:last-child{background-image:url(../img/top/top_sp03.png) , url(../img/top/top_sp02.png) , url(../img/top/top_sp01_0401.png);}

@media screen and (min-width:801px){
#top p:first-child{display:block;}
#top p:last-child{display:none;}}
@media screen and (max-width:800px){
#top p:first-child{display:none;}
#top p:last-child{display:block;}}

.frame .frame-inner > .twitter{background-color:#fff; padding:10px;}

/*
========================
SNSエリア
========================
*/
ul#qk-sns{
display:flex;
flex-wrap:wrap;
justify-content:space-between;}

ul#qk-sns li{width:calc(100% / 3 - 25px);}

ul#qk-sns li a{
display:flex;
position:relative;
width:100%;
height:105px;
background-color:#fff;
padding:0 10px;
border:1px solid #cde3ff;
border-radius:4px;
align-items:center;
justify-content:center;
transition:opacity .2s ease;}
ul#qk-sns li a:hover{opacity:.7;}

ul#qk-sns li.twitter a{color:#55acee; font-size:18px; font-weight:bold; /*padding-left:60px;*/}
ul#qk-sns li.twitter a::before{
display:inline-block;
content:"";
width:50px;
height:34px;/*
position:absolute;
top:calc(50% - 17px);
left:14px;*/
background:url(/game/qk_stadium/1/img/common/link/logo-twitter-blue.svg) no-repeat; 
background-size:auto 100%;
background-repeat:no-repeat;
background-position:left center;}
ul#qk-sns li a img{width:100%;}

@media screen and (max-width:800px){
ul#qk-sns li{width:calc(100% / 3 - 10px);}
ul#qk-sns li.twitter a{font-size:15px;}}
@media screen and (max-width:640px){
ul#qk-sns li{width:100%; max-width:300px; margin:0 auto;}
ul#qk-sns li + li{margin-top:10px;}
ul#qk-sns li a{height:80px; padding:0;}
ul#qk-sns li a > img{max-width:200px;}
ul#qk-sns li.twitter a{font-size:17px;}}