@charset "Shift-JIS";

#main-inner > .inner .end{
color:#fff;
background-color:#fe0074;
font-size:16px;
text-align:center;
font-family:'M PLUS 1', sans-serif;
padding:10px 0;
margin:0 auto 20px;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
width:100%;
background-color:#fff;
background-image:url(/game/qk_stadium/1/img/common/bg/bg01.png);
background-size:80px auto;
margin:0 auto;}

#main-inner{
width:100%;
max-width:980px;
min-width:320px;
background-color:#fff;
font-size:14px;
border-left:1px solid #fe3591;
border-right:1px solid #fe3591;
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);}}

#main-inner > .inner{padding:20px;}

@media screen and (max-width:640px){#main-inner{font-size:13px;}}
@media screen and (max-width:480px){
#main-inner{font-size:12px;}
#main-inner > .inner{padding:10px;}}

#top img{width:100%;}

/*中身*/
#main-inner > .inner > .cat{
background-image:url(/game/qk_stadium/1/img/common/bg/bg02.png);
background-position:center;
line-height:180%;
border:1px solid #cde3ff;
border-radius:5px;
padding:20px;}
#main-inner > .inner > .cat + .cat{margin-top:40px;}

#main-inner > .inner > .cat > p{
width:calc(100% - 40px);
color:#0874fb;
background-color:#fff;
font-size:15px;
font-weight:bold;
text-align:center;
border:1px solid #0874fb;
padding:20px 10px;
margin:0 auto;}
.cat h2 + p{margin-top:20px !important;}
#main-inner > .inner > .cat a{color:#fe0074; text-decoration:underline;}
#main-inner > .inner > .cat a:hover{text-decoration:none;}

.cat > b{
display:block;
color:#0874fb;
font-size:15px;
font-weight:bold;
border-bottom:1px solid #0874fb;
margin:20px auto 10px;}
.cat > b:first-of-type{margin:0 auto 10px;}

@media screen and (max-width:420px){#main-inner > .inner > .cat{padding:10px;}}

#bnr{width:100%; max-width:640px; margin:30px auto 0;}
#bnr img{width:100%; border:1px solid #fe3591;}
#bnr a:hover img{opacity:.5}

/*
========================
見出し
========================
*/
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;}

@media screen and (max-width:420px){h2.title > p > span{font-size:18px;}}

/*
========================
リンク-回答するボタン
========================
*/
.push-btn{
display:block;
position:relative;
width:calc(100% - 60px);
max-width:480px;
height:50px;
color:#fff !important;
background-color:#fe0074;
font-size:18px;
font-family:'M PLUS 1', sans-serif;
letter-spacing:2px;
line-height:50px;
text-align:center;
text-decoration:none!important;
margin:20px auto;
filter:drop-shadow(0 1px 0 #2176ea) drop-shadow(0 2px 0 #2176ea) drop-shadow(0 3px 0 #2176ea);
transition:all .2s ease;}
.push-btn::before,
.push-btn::after{
display:block;
content:"";
position:absolute;
top:0;
width:30px;
height:50px;
border-top:50px solid #fe0074;
transition:all .2s ease;}
.push-btn::before{left:-30px; border-left:30px solid transparent;}
.push-btn::after{right:-30px; border-right:30px solid transparent;}

.push-btn:hover{cursor:pointer; background-color:#2176ea; filter:drop-shadow(0 1px 0 #fe0074) drop-shadow(0 2px 0 #fe0074) drop-shadow(0 3px 0 #fe0074);}
.push-btn:hover::before,.push-btn:hover::after{border-top:50px solid #2176ea;}

@media screen and (max-width:640px){.push-btn{font-size:15px;}}
@media screen and (max-width:420px){.push-btn{font-size:13px;}}
@media screen and (max-width:370px){
.push-btn{width:100%; height:40px; line-height:40px;}
.push-btn::before,
.push-btn::after{display:none;}}

.push-btn.none{pointer-events:none; background-color:#888; filter:drop-shadow(0 1px 0 rgba(0,0,0,.2)) drop-shadow(0 2px 0 rgba(0,0,0,.2)) drop-shadow(0 3px 0 rgba(0,0,0,.2));}
.push-btn.none.push-btn::before,.push-btn.none::after{border-top:50px solid #888;}

/*
========================
リンク
========================
*/
.link-btn,
.link-btn > p,
.link-btn > p > span{
display:block;
position:relative;
color:#fe0074 !important;
text-align:center;
text-decoration:none!important;
transition:all .2s ease;}

.link-btn{width:calc(100% - 40px); max-width:200px; margin:0 auto;}

.link-btn *::before,
.link-btn *::after{
display:block;
content:"";
position:absolute;
top:0;
width:0;
height:0;
transition:all .2s ease;}

.link-btn > p{width:100%; height:40px; background-color:#fe0074;}
.link-btn > p::before,
.link-btn > p::after{
border:20px solid transparent;
border-right:15px solid transparent;
border-left:15px solid transparent;
z-index:2;}
.link-btn > p::before{right:-30px; border-left-color:#fe0074;}
.link-btn > p::after{left:-30px; border-right-color:#fe0074;}

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

.link-btn:hover > p{filter:drop-shadow(-10px 0 0 #0dfefc) drop-shadow(10px 0 0 #0dfefc);}
.link-btn:hover > p > span{color:#fff !important; background-color:#fe0074;}
.link-btn:hover > p > span::before{border-left-color:#fe0074;}
.link-btn:hover > p > span::after{border-right-color:#fe0074;}

@media screen and (max-width:420px){.link-btn > p > span{font-size:14px;}}

/*
================================================================================================================
カード達成一覧
================================================================================================================
*/
#card{width:90%; color:#fff; font-family:'M PLUS 1', sans-serif; margin:30px auto;}
#card .card{position:relative; padding:20px; transform:skewX(-4deg);}
#card .card + .card{margin:30px auto 0;}
#card .card::before,
#card .card::after{
display:block;
content:"";
position:absolute;
width:100%;
height:100%;
z-index:2;}
#card .card::before{top:10px; left:10px; background:linear-gradient(to right, #e9fe02 0%,#66ff00 20%,#00d8ff 40%,#5a00ff 60%,#fd007d 80%,#ff011a 100%);}
#card .card::after{top:0; left:0; background-color:#fe0074;}

#card .inner{display:flex; position:relative; z-index:3; transform:skewX(4deg);}

#card .inner ul{width:70%;}
#card .inner ul li{position:relative; line-height:100%;}
#card .inner ul li:first-child::after{content:"人達成";}
#card .inner ul li:nth-child(2){margin:5px auto 10px;}
#card .inner ul li:nth-child(2)::before{content:"稼働開始記念";}
#card .inner ul li:nth-child(2)::after{content:"スペシャルクイズカード";}
#card .inner ul li:last-child::after{
display:block;
content:"";
width:100%;
height:20px;
background-color:#b4ff00;
margin-top:-10px;}

#card .inner p{width:30%; transform:rotate(10deg); filter:drop-shadow(7px 7px 0 #b4ff00);}
#card .inner p img{width:100%; border:2px solid #fff; border-radius:7px;}

/*達成時*/
#card .card.comp .inner::before,
#card .card.comp .inner::after{
display:block;
content:"";
position:absolute;
background-color:#fff;
z-index:4;}
#card .card.comp .inner::before{
width:calc(100% + 50px);
height:calc(100% + 50px);
top:-20px;
left:-20px;
transform:skewX(-4deg);
opacity:.5;}
#card .card.comp .inner::after{
width:150px;
height:150px;
top:calc(50% - 75px);
left:calc(50% - 75px);
border-radius:50%;
background-image:url(../img/card/stamp.png);
background-size:100% auto;
padding:5px;
box-shadow:5px 5px 4px rgba(0,0,0,.4);}

/*文字装飾*/
#card .inner ul li:first-child,#card .inner ul li:last-child{font-size:40px;}
#card .inner ul li:nth-child(2),#card .inner ul li:first-child::after{font-size:22px;}
#card .inner ul:not(:last-child){
text-shadow:1px  1px 1px #1a1e88,
            -1px  1px 1px #1a1e88,
             1px -1px 1px #1a1e88,
            -1px -1px 1px #1a1e88,
             1px  0px 1px #1a1e88,
             0px  1px 1px #1a1e88,
            -1px  0px 1px #1a1e88,
             0px -1px 1px #1a1e88,
             0px  1px 2px #1a1e88,
             0px  2px 2px #1a1e88,
             0px  3px 2px #1a1e88,
             1px  1px 2px #1a1e88,
             2px  1px 2px #1a1e88,
             3px  1px 2px #1a1e88,
             0px  1px 1px #1a1e88,
             0px  2px 1px #1a1e88,
             0px  3px 1px #1a1e88,
             1px  1px 1px #1a1e88,
             2px  1px 1px #1a1e88,
             3px  1px 1px #1a1e88,
             1px  1px 1px #1a1e88,
             2px  2px 1px #1a1e88,
             3px  3px 1px #1a1e88;}

@media screen and (max-width:800px){
#card .inner ul{width:70%;}
#card .inner p{width:40%;}
#card .inner ul li:nth-child(2),#card .inner ul li:first-child::after{font-size:18px;}}

@media screen and (max-width:700px){#card{width:100%;}}

@media screen and (max-width:640px){
#card .inner ul li:first-child,#card .inner ul li:last-child{font-size:30px;}
#card .inner ul li:nth-child(2),#card .inner ul li:first-child::after{font-size:16px;}}

@media screen and (max-width:580px){
#card{width:90%;}
#card .inner{flex-wrap:wrap;}
#card .inner ul,
#card .inner p{width:100%; text-align:center;}
#card .inner p{transform:rotate(0deg); filter:drop-shadow(3px 3px 0 #b4ff00); margin:10px auto 0;}
#card .inner p img{max-width:200px;}}

@media screen and (max-width:430px){
#card .card{padding:10px;}
#card .inner ul li:first-child,#card .inner ul li:last-child{font-size:24px;}
#card .inner ul li:nth-child(2),#card .inner ul li:first-child::after{font-size:14px;}
#card .inner p img{max-width:150px;}}

@media screen and (max-width:370px){
#card .inner ul li:nth-child(2)::after{display:block;}}

/*
================================================================================================================
エントリー規約/チェックボックス
================================================================================================================
*/
.input-checkbox input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
position:relative;
width:390px;
font-size:16px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:30px auto 0;
z-index:5;}

.input-checkbox label{display:inline-block; cursor:pointer;}
.input-checkbox label br{display:none;}

.input-checkbox label:before,
.input-checkbox label:after{content:""; position:absolute; display:inline-block; transition:transform .2s ease;}

.input-checkbox label:before{
top:0;
left:0;
width:30px;
height:30px;
background-color:#fff;
border:2px solid #000;
opacity:.5;}

.input-checkbox label:after{
top:-4px;
left:10px;
width:10px;
height:30px;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:before{opacity:1;}
.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#fe0074;}

@media screen and (max-width:480px){
.input-checkbox{width:340px; font-size:14px; line-height:24px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}

@media screen and (max-width:430px){
.input-checkbox{width:200px;}
.input-checkbox label{text-align:center;}
.input-checkbox label br{display:block;}
.input-checkbox label:before{top:10px;}
.input-checkbox label:after{top:0;}}

/*
================================================================================================================
アンケート
================================================================================================================
*/
#form{width:calc(100% - 40px); margin:20px auto;}
#form > p{
color:#fff;
background-color:#0874fb;
font-weight:bold;
padding:5px 10px;
margin:30px auto 10px;}
#form > p > span{display:inline-block; color:#fff; background-color:#fe0074; font-size:12px; font-weight:bold; padding:0 5px; margin-left:10px;}

/*補足*/
#form .supp{
width:100%;
background-color:rgba(249,211,229,.5);
font-size:13px;
border-radius:10px;
padding:20px;
margin:20px auto 0 0;}
#form .supp b{display:block; color:#fe0074; text-align:center; border-bottom:1px solid #fe0074; margin:20px auto 10px;}
#form .supp b:first-of-type{margin:0 auto 10px;}
#form .supp .movie{width:100% !important;}

/*フォーム*/
#form label{display:block; width:100%;}
#form label:hover{cursor:pointer;}

#form select{border:1px solid #000; padding:5px;}
#form textarea,#form input[type="text"]{
display:block;
width:100%;
height:25px;
font-size:12px;
border:1px solid #000;
padding:5px;}
#form textarea:focus,input[type="text"]:focus{background-color:#e5f0f7; outline:none;}
#form textarea{height:100px;}

/*横幅*/
#form .supp,
#form textarea,
#form input[type="text"],
#form dl.radio{max-width:480px;}

/*フォーム整理用*/
#form dl{display:flex; flex-wrap:wrap;}
#form dl > *{padding:5px 0;}
#form dl.radio > *{background-color:#e5f0f7; padding:5px; margin-bottom:5px;}
#form dl.radio dt{display:flex; width:20px; align-items:center;}
#form dl.radio dt > p{width:100%;}
#form dl.radio dd{width:calc(100% - 20px);}

#form .error{
color:#f00;
font-weight:bold;
text-align:center;
margin:40px auto 0;}

@media screen and (max-width:640px){
#form{width:100%;}
#form textarea,#form input[type="text"]{max-width:none;}
#form select{width:100%;}}

/*
========================
完了後
========================
*/
#form.done,#form.done a{color:#0874fb !important;}
#form.done a{text-decoration:underline;}
#form.done a:hover{text-decoration:none;}

#form.done h1{
display:block;
font-family:'M PLUS 1', sans-serif;
font-size:24px;
font-weight:bold;
text-align:center;
line-height:150%;
margin:40px auto;}
#form.done h1 br.br-sp{display:none;}
@media screen and (max-width:800px){#form.done h1{font-size:20px;}}
@media screen and (max-width:680px){#form.done h1{font-size:24px;} #form.done h1 br.br-sp{display:block;}}
@media screen and (max-width:450px){#form.done h1{font-size:20px;}}
@media screen and (max-width:370px){#form.done h1{font-size:18px;}}