@charset "UTF-8";
/* step_01 */

.content_step_01{
    width: 100%;
    min-width: 1100px;
    height:auto;
    background-image: url("../img/step_01/bg_game.png");
    background-repeat: repeat-y;
    background-position:top left;
    background-size: contain;
}
.content_step_01 .content_wrap{
    width: 1100px;
    height:auto;
    margin: 0 auto;
    padding-bottom: 150px;
    position: relative;
}
.game_title{
    width: 300px;
    padding: 20px 0 0 30px;
}
.game_title img{
    display: block;
    width: 100%;
    height:auto;
}
.howto{
    width: 800px;
    margin:  -50px auto 80px;
}
.howto img{
    display: block;
    width: 100%;
    height:auto;
}
#calc_02,#calc_03,#calc_04,#calc_05,#calc_06,#calc_07,#calc_08,#calc_09,#calc_10,
.shindan{
    opacity: 0;
}
article{
    width: 100%;
    padding:50px 30px 30px;
    margin-bottom: 80px;
    background-color: #fff;
    border-radius: 70px;
    box-shadow: 3px 3px 3px #999999;
    position: relative;
}
article:nth-of-type(1){
    border: solid 8px #98ec7a;
}
article:nth-of-type(2){
    border: solid 8px #ccff33;
}
article:nth-of-type(3){
    border: solid 8px #fee633;
}
article:nth-of-type(4){
    border: solid 8px #fecf66;
}
article:nth-of-type(5){
    border: solid 8px #fd9869;
}
article:nth-of-type(6){
    border: solid 8px #ff928b;
}
article:nth-of-type(7){
    border: solid 8px #d2b9d5;
}
article:nth-of-type(8){
    border: solid 8px #b0b8d5;
}
article:nth-of-type(9){
    border: solid 8px #99d2d5;
}
article:nth-of-type(10){
    border: solid 8px #6de1ef;
}
.q_no{
    width: 120px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top:-10px;left: -10px;
}
article:nth-of-type(1) .q_no{
    background-image:url("../img/step_01/obj_q_1.png");
}
article:nth-of-type(2) .q_no{
    background-image:url("../img/step_01/obj_q_2.png");
}
article:nth-of-type(3) .q_no{
    background-image:url("../img/step_01/obj_q_3.png");
}
article:nth-of-type(4) .q_no{
    background-image:url("../img/step_01/obj_q_4.png");
}
article:nth-of-type(5) .q_no{
    background-image:url("../img/step_01/obj_q_5.png");
}
article:nth-of-type(6) .q_no{
    background-image:url("../img/step_01/obj_q_6.png");
}
article:nth-of-type(7) .q_no{
    background-image:url("../img/step_01/obj_q_7.png");
}
article:nth-of-type(8) .q_no{
    background-image:url("../img/step_01/obj_q_8.png");
}
article:nth-of-type(9) .q_no{
    background-image:url("../img/step_01/obj_q_9.png");
}
article:nth-of-type(10) .q_no{
    background-image:url("../img/step_01/obj_q_10.png");
}
h3.question{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
}
ul.answer{
    width: 100%;
    margin: 50px 0 0;
}
ul.answer li{
    width: 30%;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-radius:40px;
    box-shadow: 3px 3px 3px #999999;
    margin: 0 1.5%;
    cursor: pointer;
    float: left;
}
/*radio btn custom*/
input[type="radio"] {
  display:none; 
}    
label {
    display:inline-block;
    width: 100%;
    padding: 25px;
    border-radius:40px;
    cursor: pointer;
}
 input[type="radio"]:checked + label { 
  background-color:#000;
}
/*radio btn color*/
article:nth-of-type(1) label{
    background-color:#e3f5d3;
}
article:nth-of-type(1) input[type="radio"]:checked + label{
    background-color:#98ec7a;
}
article:nth-of-type(2) label{
    background-color:#F0FFC3;
}
article:nth-of-type(2) input[type="radio"]:checked + label{
    background-color:#ccff33;
}
article:nth-of-type(3) label{
    background-color:#FFF5B1;
}
article:nth-of-type(3) input[type="radio"]:checked + label{
    background-color:#fee633;
}
article:nth-of-type(4) label{
    background-color:#FFEDC6;
}
article:nth-of-type(4) input[type="radio"]:checked + label{
    background-color:#fecf66;
}
article:nth-of-type(5) label{
    background-color:#FFDBCA;
}
article:nth-of-type(5) input[type="radio"]:checked + label{
    background-color:#fd9869;
}
article:nth-of-type(6) label{
    background-color:#FFD0CD;
}
article:nth-of-type(6) input[type="radio"]:checked + label{
    background-color:#ff928b;
}
article:nth-of-type(7) label{
    background-color:#FCE6FF;
}
article:nth-of-type(7) input[type="radio"]:checked + label{
    background-color:#d2b9d5;
}
article:nth-of-type(8) label{
    background-color:#E4EAFF;
}
article:nth-of-type(8) input[type="radio"]:checked + label{
    background-color:#b0b8d5;
}
article:nth-of-type(9) label{
    background-color:#DDFDFF;
}
article:nth-of-type(9) input[type="radio"]:checked + label{
    background-color:#99d2d5;
}
article:nth-of-type(10) label{
    background-color:#C8F9FF;
}
article:nth-of-type(10) input[type="radio"]:checked + label{
    background-color:#6de1ef;
}
.shindan{
    width:500px;
    height:100px;
    margin: 150px auto 0;
    background-color: #309933;
    border-radius: 35px;
    color: #fff;
    font-size: 26px;
    text-align: center;
    line-height: 100px;
    box-shadow: 3px 3px 3px #999999;
    cursor: pointer;
}
.nanami{
    width: 30%;
    position: absolute;
    bottom: 0;right:-20px;
}
.nanami img{
    display: block;
    width: 100%;
    height:auto;
}

@media screen and (min-width:0px) and (max-width:767px){

    .content_step_01{
        width: 100%;
        min-width: unset;
        height:auto;
        background-image: url("../img/step_01/bg_game.png");
        background-repeat: repeat-y;
        background-position:top left;
        background-size: contain;
    }
    .content_step_01 .content_wrap{
        width: 100%;
        height:auto;
        margin: 0 auto;
        padding:0 2%;
        position: relative;
    }
    .game_title{
        width: 300px;
        padding: 20px 0 0 30px;
    }
    .game_title img{
        display: block;
        width: 100%;
        height:auto;
    }
    .howto{
        width: 100%;
        margin:  30px auto 40px;
    }
    .howto img{
        display: block;
        width: 100%;
        height:auto;
    }
    article{
        width: 100%;
        padding:25px 15px;
        margin-bottom:40px;
        background-color: #fff;
        border-radius: 35px;
        box-shadow: 3px 3px 3px #999999;
        position: relative;
    }
    article:nth-of-type(1){
        border: solid 4px #98ec7a;
    }
    article:nth-of-type(2){
        border: solid 4px #ccff33;
    }
    article:nth-of-type(3){
        border: solid 4px #fee633;
    }
    article:nth-of-type(4){
        border: solid 4px #fecf66;
    }
    article:nth-of-type(5){
        border: solid 4px #fd9869;
    }
    article:nth-of-type(6){
        border: solid 4px #ff928b;
    }
    article:nth-of-type(7){
        border: solid 4px #d2b9d5;
    }
    article:nth-of-type(8){
        border: solid 4px #b0b8d5;
    }
    article:nth-of-type(9){
        border: solid 4px #99d2d5;
    }
    article:nth-of-type(10){
        border: solid 4px #6de1ef;
    }
    .q_no{
        width: 60px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top:-10px;left: 50%;
        margin-left: -30px;
    }
    article:nth-of-type(1) .q_no{
        background-image:url("../img/step_01/obj_q_1.png");
    }
    article:nth-of-type(2) .q_no{
        background-image:url("../img/step_01/obj_q_2.png");
    }
    article:nth-of-type(3) .q_no{
        background-image:url("../img/step_01/obj_q_3.png");
    }
    article:nth-of-type(4) .q_no{
        background-image:url("../img/step_01/obj_q_4.png");
    }
    article:nth-of-type(5) .q_no{
        background-image:url("../img/step_01/obj_q_5.png");
    }
    article:nth-of-type(6) .q_no{
        background-image:url("../img/step_01/obj_q_6.png");
    }
    article:nth-of-type(7) .q_no{
        background-image:url("../img/step_01/obj_q_7.png");
    }
    article:nth-of-type(8) .q_no{
        background-image:url("../img/step_01/obj_q_8.png");
    }
    article:nth-of-type(9) .q_no{
        background-image:url("../img/step_01/obj_q_9.png");
    }
    article:nth-of-type(10) .q_no{
        background-image:url("../img/step_01/obj_q_10.png");
    }
    h3.question{
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 4px;
        text-align: center;
    }
    ul.answer{
        width: 100%;
        margin: 25px 0 0;
    }
    ul.answer li{
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        border-radius:20px;
        box-shadow: 3px 3px 3px #999999;
        margin: 0 0 15px;
        float: none;
    }
    ul.answer li:nth-of-type(3){
        margin-bottom: 0;
    }
    /*radio btn custom*/
    input[type="radio"] {
      display:none; 
    }    
    label {
        display:inline-block;
        width: 100%;
        padding: 25px;
        border-radius:20px;
    }
     input[type="radio"]:checked + label { 
      background-color:#000;
    }
    /*radio btn color*/
    article:nth-of-type(1) label{
        background-color:#e3f5d3;
    }
    article:nth-of-type(1) input[type="radio"]:checked + label{
        background-color:#98ec7a;
    }
    article:nth-of-type(2) label{
        background-color:#F0FFC3;
    }
    article:nth-of-type(2) input[type="radio"]:checked + label{
        background-color:#ccff33;
    }
    article:nth-of-type(3) label{
        background-color:#FFF5B1;
    }
    article:nth-of-type(3) input[type="radio"]:checked + label{
        background-color:#fee633;
    }
    article:nth-of-type(4) label{
        background-color:#FFEDC6;
    }
    article:nth-of-type(4) input[type="radio"]:checked + label{
        background-color:#fecf66;
    }
    article:nth-of-type(5) label{
        background-color:#FFDBCA;
    }
    article:nth-of-type(5) input[type="radio"]:checked + label{
        background-color:#fd9869;
    }
    article:nth-of-type(6) label{
        background-color:#FFD0CD;
    }
    article:nth-of-type(6) input[type="radio"]:checked + label{
        background-color:#ff928b;
    }
    article:nth-of-type(7) label{
        background-color:#FCE6FF;
    }
    article:nth-of-type(7) input[type="radio"]:checked + label{
        background-color:#d2b9d5;
    }
    article:nth-of-type(8) label{
        background-color:#E4EAFF;
    }
    article:nth-of-type(8) input[type="radio"]:checked + label{
        background-color:#b0b8d5;
    }
    article:nth-of-type(9) label{
        background-color:#DDFDFF;
    }
    article:nth-of-type(9) input[type="radio"]:checked + label{
        background-color:#99d2d5;
    }
    article:nth-of-type(10) label{
        background-color:#C8F9FF;
    }
    article:nth-of-type(10) input[type="radio"]:checked + label{
        background-color:#6de1ef;
    }
    .shindan{
        width:300px;
        height:100px;
        margin: 75px auto 20px;
        background-color: #309933;
        border-radius: 35px;
        color: #fff;
        font-size: 26px;
        text-align: center;
        line-height: 100px;
        box-shadow: 3px 3px 3px #999999;
        cursor: pointer;
    }
    .nanami{
        width: 70%;
        position: static;
    }
    .nanami img{
        display: block;
        width: 100%;
        height:auto;
    }
    
}