@charset "utf-8";
.question_block_wrap{
    margin-top: 80rem;
}
.question_block + .question_block{
    margin-top: 80rem;
}
.question_ttl_inner{
    font-weight: 900;
    color: var(--color-red);
    background: url(../images/mv_fukidashi.svg) no-repeat center;
    background-size: contain;
    display: grid;
    place-content: center;
    padding-block: 25rem 38rem;
}
.question_block_txt{
    font-weight: 900;
    font-feature-settings: 'halt' on;
}
.question_block_txt_num{
    display: grid;
    place-content: center;
    border-radius: 50%;
    background-color: var(--color-red);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.08em;
    width: 48rem;
    height: 48rem;
    flex-shrink: 0;
    
}
.question_block_img_wrap{
    text-align: center;
}
.question_btn_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
.question_btn{
    font-weight: 700;
    line-height: 1.5;
    border-radius: 32rem;
    color: var(--color-body);
    border: solid 1px var(--color-body);
    background-color: #fff;
    display: grid;
    place-content: center;
}
.question_btn.is_active{
    background-color: var(--color-body);
    color: #fff;
}
.question_comment{
    background-color: #ffffff;
    background-image: radial-gradient(circle, rgba(232,60 ,80 ,0.5) 2rem, transparent 2rem), radial-gradient(circle, rgba(232,60 ,80 ,0.5) 2rem, transparent 2rem);
    background-position: 0 0, 5rem 6rem;
    background-size: 10rem 12rem;
    display: flex;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out; 
}
.question_comment_hidden{
    visibility: hidden;
    opacity: 0;
}
.question_comment_info .question_comment_hidden{
    display: none;
}
.question_comment_txt{
    font-weight: 700;
    line-height: 1.5;
    display: grid;
    place-content: center;
    text-align: center;
}
.question_comment_info > li{
    line-height: 1.7;
    letter-spacing: 0.08em;
}
.question_comment_info > li::before{
    content: '※';
}
.result_btn_wrap{
    margin-top: 80rem;
}
@media (min-width: 769px) {
    .simulator_question{
        margin-top: 128rem;
    }
    .simulator_question_container{
        max-width: 800rem;
        margin-inline: auto;
    }
    .question_ttl_inner{
        font-size: 24rem;
        margin-bottom: 8rem;
    }
    .question_ttl_img{
        width: 822rem;
    }
    .question_block_txt{
        font-size: 20rem;
        text-align: center;
    }
    .question_block_txt_num{
        font-size: 18rem;
        margin: 0 auto 10rem;
    }
    .question_block_img_wrap{
        margin-top: 24rem;
    }
    .question_btn_wrap{
        column-gap: 19rem;
        margin-top: 24rem;
    }
    .question_btn{
        font-size: 14rem;
        width: 392rem;
        height: 48rem;
        transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }
    .question_comment{
        padding-block: 16rem;
        column-gap: 8rem;
        margin-top: 24rem;
    }
    .question_comment_txt{
        background: url(../images/question/comment_fukidashi.svg) no-repeat center;
        background-size: 100%;
        font-size: 14rem;
        width: 514rem;
        height: 90rem;
    }
    .question_comment_info{
        margin-top: 24rem;
    }
    .question_comment_info > li{
        font-size: 12rem;
        text-indent: -12rem;
        padding-left: 12rem;
    }
    .question_comment_info > li + li{
        margin-top: 10rem;
    }
    @media(hover:hover){
        .question_btn:hover{
            background-color: var(--color-body);
            color: #fff;
        }
    }
    .img_q_1{
        width: 276rem;
    }
    .img_q_2{
        width: 242rem;
    }
    .img_q_3{
        width: 350rem;
    }
    .img_q_4{
        width: 256rem;
    }
    .img_q_5{
        width: 240rem;
    }
    .img_q_6{
        width: 218rem;
    }
    .img_q_7{
        width: 342rem;
    }
    .img_q_8{
        width: 242rem;
    }
    .img_q_9{
        width: 290rem;
    }
    .img_q_10{
        width: 168rem;
    }
    .img_q_11{
        width: 362rem;
    }
    .img_q_12{
        width: 262rem;
    }
    .neko_comment_img{
        width: 78rem;
    }
}
@media (max-width: 768px) {
    .simulator_question{
        margin-top: 60rem;
    }
    .simulator_question_container{
        padding-inline: 24rem;
    }
    .question_ttl_inner{
        font-size: 18rem;
        margin-bottom: 16rem;
    }
    .question_ttl_img{
        width: 320rem;
    }
    .question_block_txt{
        font-size: 16rem;
        display: flex;
        align-items: center;
        column-gap: 14rem;
        line-height: 1.5;
    }
    .question_block_img_wrap{
        margin-top: 16rem;
    }
    .question_btn_wrap{
        flex-direction: column;
        row-gap: 16rem;
        margin-top: 16rem;
    }
    .question_btn{
        width: 327rem;
        height: 48rem;
    }
    .question_comment_hidden{
        display: none;
    }
    .question_comment{
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        padding: 16rem 24rem;
        margin-top: 16rem;
        column-gap: 2rem;
    }
    .question_comment_txt{
        background: url(../images/question/comment_fukidashi_sp.svg) no-repeat center;
        background-size: 100%;
        font-size: 12rem;
        width: 252rem;
        height: 92rem;
        padding-left: 14rem;
    }
    .question_comment_info {
        margin-top: 16rem;
    }
    .question_comment_info > li{
        font-size: 10rem;
        text-indent: -10rem;
        padding-left: 10rem;
    }
    .question_comment_info > li + li{
        margin-top: 4rem;
    }
    .result_btn{
        border: solid 1px var(--color-red);
    }
    .img_q_1{
        width: 207rem;
    }
    .img_q_2{
        width: 181rem;
    }
    .img_q_3{
        width: 279rem;
    }
    .img_q_4{
        width: 205rem;
    }
    .img_q_5{
        width: 196rem;
    }
    .img_q_6{
        width: 163rem;
    }
    .img_q_7{
        width: 256rem;
    }
    .img_q_8{
        width: 180rem;
    }
    .img_q_9{
        width: 206rem;
    }
    .img_q_10{
        width: 125rem;
    }
    .img_q_11{
        width: 197rem;
    }
    .img_q_12{
        width: 205rem;
    }
    .neko_comment_img{
        width: 73rem;
    }
}

.question_block_skip,
.question_block_hidden,
.result_button_hidden {
    display: none;
}