@CHARSET "UTF-8";
/*コンテンツ----------------------------------------------------*/
body{

}
#pc{
        background: url(../images/question/background_dark.jpg);
}
#sp{
    display:none;
}
#pc .q_content{
    max-width:1200px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:-400px;
    padding-top:200px;
    overflow:hidden;
    text-align:center;
    background: url(../images/question/background.jpg);
}
#pc .light{
    position:relative;
    top:200px;
    z-index:2;
}
#pc .q_title{
    position:relative;
    z-index:5;
    margin-top:-30px;
}
#pc  .intro{
    margin:50px auto 100px auto;
}
#pc .q_1{
    height:1264px;
    width:1000px;
    background: url(../images/question/question_1.png) no-repeat;
    margin:50px auto 0px auto;
}
#pc .q_2{
    height:1420px;
    width:1000px;
    background: url(../images/question/question_2.png) no-repeat;
    margin:50px auto 0px auto;
}
#pc .q_3{
    height:1220px;
    width:1000px;
    background: url(../images/question/question_3.png) no-repeat;
    margin:50px auto 0px auto;
}
#pc .q_4{
    height:1320px;
    width:1000px;
    background: url(../images/question/question_4.png) no-repeat;
    margin:50px auto 0px auto;
}
#pc .ansower{
    height:634px;
    width:1000px;
    background: url(../images/question/ansower.png) no-repeat;
    margin:50px auto 0px auto;
}
#pc .ansower .answ_btn{
    position:relative;
    top:360px;
}
#pc .congratulations{
    margin-top:100px;
    margin-bottom:100px;
}

#pc .ansower .input_area ul{
    position:relative;
    top:340px;
    width:800px;
    overflow:hidden;
    margin:auto;
}
#pc .input_area li{
    width:150px;
    margin-left:35px;
    float:left;
}
#pc .text_input{
    font-size:100px;
    text-align:center;
    border:solid 2px #CC9966
}
#pc .bingo{
    position:relative;
    top:300px;
    width:610px;
    margin:auto;
    overflow:hidden;
}
#pc .bingo li{
    float:left;
    cursor: pointer;
}
#pc .bingo_under{
    margin-top:-7px;
}
#pc .q1hint{
    position:relative;
    top:720px;
}
#pc .q2hint{
    position:relative;
    top:1280px;
}
#pc .q3hint{
    position:relative;
    top:170px;
}
#pc .q4hint{
    position:relative;
    top:1060px;
}
#pc .fumen{
    position:relative;
    left:430px;
}
#pc .fumen_1{
    background: url(../images/question/q3_do.png) no-repeat;
    position:relative;
    top:580px;
    left:100px;
    width:155px;
    height:146px;
    cursor:pointer;
}
#pc .fumen_2{
    background: url(../images/question/q3_si.png) no-repeat;
    position:relative;
    top:440px;
    left:270px;
    width:143px;
    height:145px;
    cursor:pointer;
}
#pc .fumen_3{
    background: url(../images/question/q3_so.png) no-repeat;
    position:relative;
    top:400px;
    left:150px;
    width:158px;
    height:124px;
    cursor:pointer;
}
#pc .fumen_4{
    background: url(../images/question/q3_fa.png) no-repeat;
    position:relative;
    top:330px;
    left:280px;
    width:138px;
    height:146px;
    cursor:pointer;
}
#pc .fumen_5{
    background: url(../images/question/q3_mi.png) no-repeat;
    position:relative;
    top:250px;
    left:100px;
    width:132px;
    height:108px;
    cursor:pointer;
}
#pc .fumen_6{
    background: url(../images/question/q3_re.png) no-repeat;
    position:relative;
    top:220px;
    left:250px;
    width:156px;
    height:128px;
    cursor:pointer;
}
#pc .fumen_7{
    background: url(../images/question/q3_ra.png) no-repeat;
    position:relative;
    top:140px;
    left:120px;
    width:171px;
    height:115px;
    cursor:pointer;
}
#pc .btn_area{
    overflow:hidden;
    width:1000px;
    margin:50px auto;
}
#pc .btn_area li{
    float:left;
    margin-left:20px;
    cursor:pointer;
}
#pc .btn_area li img{
    width:70%;
}

/*SP----------------------------------------------------*/

@media (max-width: 768px){
#pc{
    display:none;
}
#sp{
    display:block;
    background: url(../images/question/background.jpg);
}
#sp .q_title{
    width:80%;
    margin:auto;
    margin-top:-230px;
}
#sp .intro{
    width:90%;
    margin:0px auto 50px auto;
    
}
#sp .middle{
    margin-bottom:50px;
}
#sp .q_1_1{
    width:90%;
    margin:auto;

}
#sp .q_1_2{
    background: url(../images/question/sp/question_1_2.png) repeat-y;
    background-size:100%;
    width:90%;
    margin:auto;
    margin-top:-23px;
}
#sp .q_1_3{
    width:90%;
    margin:auto;
    margin-top:-16px;

}
#sp .q_1_4{
    width:90%;
    margin:auto;
    margin-top:-6px;
}
#sp .q_2_1{
    width:90%;
    margin:auto;
}
#sp .q_2_2{
    width:90%;
    margin:-6px auto;
}
#sp .q_3_1{
    width:90%;
    margin:auto;
}
#sp .q_3_2{
    background: url(../images/question/sp/question_3_2.png) no-repeat;
    background-size:100%;
    width:90%;
    margin:-6px auto;
    overflow:hidden;
}
#sp .q_3_3{
    width:90%;
    margin:6px auto;
}

#sp .q_4_1{
    width:90%;
    margin:auto;
}
#sp .q_4_2{
    width:90%;
    margin:-7px auto;

}
#sp .ansower_1{
    width:90%;
    margin:auto;
}
#sp .ansower_2{
    background: url(../images/question/sp/ansower_2.png) no-repeat;
    background-size:100%;
    width:90%;
    margin:-7px auto;
    overflow:hidden;
}
#sp .ansower{
    background: url(../images/question/ansower.png) no-repeat;
    background-size:104%;
    width:90%;
    margin:auto;
}
#sp .ansower .answ_btn{
    position:relative;
}
#sp .congratulations{
    width:100%;
    margin:70px auto;
}
#sp .bingo {
     width:100%;
     margin:auto;
     position:relative;
     left:10px;
}
#sp .bingo ul{
    overflow:hidden;
}

#sp .bingo_under {
    margin-top:-23px;
}
#sp .bingo img{
    width:100%;
}
#sp .bingo .t7{
    height:59.8px;
}
#sp .bingo li{
    float:left;
    width:13%;
}
#sp .fumen_1{
    position:relative;
    left:53%;
}
#sp .fumen_2{
    position:relative;
    left:73%;
    margin-top:-15%;
}
#sp .fumen_3{
    position:relative;
    left:60%;
    margin-top:-8%;
}
#sp .fumen_4{
    position:relative;
    left:52%;
    margin-top:-2%;
}
#sp .fumen_5{
    position:relative;
    left:72%;
    margin-top:-13%;
}
#sp .fumen_6{
    position:relative;
    left:72%;

}
#sp .fumen_7{
    position:relative;
    left:57%;
    margin-top:-9%;
}
#sp .input_area ul{
    position:relative;
    overflow:hidden;
    margin:auto;
    padding-bottom:15%;
    margin-left:-15px;
}
#sp .input_area li{
    width:15%;
    margin-left:7%;
    float:left;
}
#sp .text_input{
    font-size:100%;
    height:50px;
    text-align:center;
    border:solid 2px #CC9966
}
#sp .answ_btn{
    position:relative;
    width:50%;
    margin:auto;
    top:-40px;
}
#sp .btn_area{
    overflow:hidden;
    margin:-30px auto 20px auto;
}
#sp .btn_area li{
    float:left;
    cursor:pointer;
    width:20%;
}
#sp .btn_area li img{
    width:80%;
}
@-moz-document url-prefix() {
  #sp .q_1_2{
    margin-top: -24px;
  }
  #sp .q_1_4{
    margin-top: -8px;
  }
  #sp .q_2_2{
    margin-top: -8px;
  }
  #sp .q_3_2{
    margin-top: -8px;
  }
  #sp .q_3_3{
    margin-top: -11px;
  }
}
}