@charset "utf-8";
/*********** SELF CHECK ***********/
.selfcheck_contents a:hover img{
    filter: alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}
.selfcheck_contents {
    position: relative;
    width: 94%;
    max-width: 980px;
    margin: 50px auto 150px;
    aspect-ratio: 49/27;
}
.selfcheck_contents img {
    width: 100%;
}
.checkstart {
    width: 100%;
}

.check_q,
.check_a {
    display: none;
}

.checkstart > a,
.check_q > a {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%,-50%);
}

.check_q,
.check_a {
    aspect-ratio: 49 / 27;
    background: url(../img/selfcheck/bg01.jpg) top center no-repeat;
    background-size: contain;
}

.check_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
}
.answerbtn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 70%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transform: translate(-50%,-50%);
}
.answerbtn a {
    width: 40%;
}
.a_btn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform: translate(-50%,-50%);
}

.selfcheck_contents img.check_ph {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(25%, 220px);
}

.selfcheck_contents .check_btn1 {
    position: absolute;
    top: 25px;
    right: 25px;
    width: min(25%, 220px);
 }

 @media screen and (max-width:768px) {
    .check_q,
    .check_a {
        aspect-ratio: 64 / 76;
        background: url(../img/selfcheck/sp_bg01.jpg) top center no-repeat;
        background-size: contain;
    }
    .checkstart > a,
    .check_q > a {
        bottom: 15%;
    }

 }