@charset "utf-8";

body {
    font-family: sans-serif;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffe04f url("../img/bg-dot.png") repeat left top;
}

img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

#quiz-box {
    width: 1420px;
    transform-origin: center top;
    text-align: center;
}

#quiz-box .post{
    margin-top: 1em;
    margin-left: 1em;
    text-align: left;
}

#quiz-box h1 {
    max-width: 1594px;
    width: 100%;
    margin: 0 auto
}

#quiz-sec {
    width: 88.75%;
    max-width: 1420px;
    min-height: 70vh;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    position: relative;
}

#question,
#feedback {
    width: 100%;
}

body:has(#quiz-box) header,
body:has(#quiz-box) footer{
    display:none;
}

.start #question {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    #quiz-box {
        width: 100%;
    }

    .wrapper {
        background: #ffe04f url("../img/bg-dot-sp.png") repeat left top;
    }

    #quiz-sec {
        min-height: unset;
    }

    #quiz-box h1 {
        width: 91.33%;
        margin: 0 auto 4.5%;
    }
}

#choices {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.88%;
    width: 100%;
    position: absolute;
    bottom: 15%;
}

.choice {
    display: block;
    max-width: 475px;
    width: 33.45%;
    opacity: 1;
    transition: .3s;
}

.choice:hover {
    opacity: .7s;
}

.choice input {
    display: none;
}

.choice-or {
    width: 6%;
    box-sizing: border-box;
}

#next-btn {
    position: absolute;
    right: 0;
    bottom: 4.01cqw;
    width: 100%;
    text-align: right;
}

#next-btn img {
    width: 29.57%;
}

.start #next-btn {
    position: absolute;
    bottom: 7.04cqw;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.start #next-btn img {
    width: 33.09%;
}

#next-btn .quiz-finished {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
}

#explanation-btn {
    padding-top: min(6.66vh, 80px);
}

#explanation-btn img {
    max-width: 470px;
    width: 29.37%;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    #choices {
        flex-wrap: wrap;
        gap: 4.53vw;
        bottom: 21%;
    }

    .choice {
        max-width: unset;
        width: 67.91%;
    }

    .choice-or {
        width: 100%;
    }

    .choice-or img {
        width: 11.49%;
    }

    .question04:not(.review) #choices {
        bottom: 15%;
    }

    #next-btn {
        bottom: 21%;
        left: 0;
        margin: auto;
        text-align: center;
    }

    #next-btn img {
        width: 70.14%;
    }

    .start #next-btn {
        bottom: 20%;
    }

    .start #next-btn img {
        width: 70.14%;
    }

    #explanation-btn {
        padding-top: 9.2vw;
    }

    #explanation-btn img {
        max-width: unset;
        width: 62.66%;
    }

    #next-btn .quiz-finished {
        padding-bottom: 40%;
    }
}

/*通常ページ*/

#page-wrap {
    max-width: 1147px;
    width: 84.84%;
    padding: 5.87cqw 0;

}

#page-wrap .page-box {
    padding-bottom: 4.01cqw;
    border-radius: 20px;
}

#page-wrap.privacy-wrap .page-box {
    padding-bottom: 0;
}

#page-wrap .page-box.wht {
    background: #fff;
}

/*END 通常ページ*/

/*解説ページ*/
.explanation {
    position: relative;
}

.explanation .btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 33.09%;
    text-align: right;
}

.explanation .btn-back {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 16.19%;
    text-align: left;
}

.explanation:last-of-type {
    margin-bottom: 4.01cqw;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    .explanation .btn {
        width: 70.14%;
        left: 0;
        margin: 0 auto;
    }
}

/*END　解説ページ*/

/*終了ページ*/
.end-wrap h1 {
    width: 87.81%;
    margin: 0 auto;
}

.end {
    padding-bottom: 6.19cqw;
    position: relative;
}

.end .btn-li {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.end .btn-back {
    width: 16.19%;
    text-align: left;
}

.end .btn-li .btn-link {
    display: flex;
    justify-content: space-between;
    77.11
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    #quiz-box.end-wrap {
        max-width: 1147px;
        width: 84.84%;
        padding: 5.87cqw 0;
    }
    #quiz-box.end-wrap h1{
        width: 66.13%;
    }
    .end{
        padding-bottom: 15.67cqw;
    }
    .end .btn-li{
        justify-content: center;
    }
    .end .btn-back{
        width: 34.32%;
    }
}

/*END　終了ページ*/

/*サンクスページ*/
.thanks-wrap h1 {
    width: 87.81%;
    margin: 0 auto;
}

.thanks {
    padding-bottom: 10%;
    position: relative;
}

.thanks .btn-li {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 100%;
}

.thanks .btn-back {
    width: 16.19%;
    text-align: left;
}

.thanks .btn-li .btn-link {
    display: flex;
    justify-content: flex-start;
    width: 77.11%;
    gap: 4.68cqw;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    #quiz-box.thanks-wrap {
        max-width: 1147px;
        width: 84.84%;
        padding: 5.87cqw 0;
    }

    .thanks .btn-li {
        position: unset;
        left: unset;
        bottom: unset;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .thanks .btn-back {
        width: 34.32%;
        margin: 0 auto 4vw;
    }

    .thanks .btn-li .btn-link {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4vw;
        width: 100%;
    }
    .thanks .btn-li .btn-link a{
    }

    .thanks .btn-li .btn-link img {
        width: 76.11%;
        margin: 0 auto;
    }
}

/*END　サンクスページ*/

/*お客様に関する情報の取り扱いについて*/
.privacy {
    position: relative;
}

.privacy .btn-li {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 3%;
    width: 100%;
}

.privacy .btn-back {
    width: 16.19%;
    margin-left: 4.57%;
    text-align: left;
}

.privacy .btn-li .btn-next {
    width: 29.57%;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    .privacy .btn-li{
        flex-wrap: wrap;
        gap: 4vw;
        bottom: 9cqw;
        text-align: center;
    }
    .privacy .btn-back{
        width: 100%;
        text-align: center;
    }
    .privacy .btn-back img{
        width: 34.32%;
    }
    .privacy .btn-li .btn-next{
        width: 70.14%;
        margin: 0 auto;
    }
}

/*END　お客様に関する情報の取り扱いについて*/

/*がん治療に関して01ページ*/
.cancer-treatment01 {
    position: relative;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    .cancer-treatment01 {
        width: 84.84%;
        padding: 5.87cqw 0;
        margin: 0 auto;
    }
}

/*END　がん治療に関して01ページ*/

/*がん治療に関して02ページ*/
.cancer-treatment02 {
    position: relative;
}

.cancer-treatment01 .btn-li,
.cancer-treatment02 .btn-li {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 3%;
    width: 100%;
}

.cancer-treatment01 .btn-back,
.cancer-treatment02 .btn-back {
    width: 16.19%;
    margin-left: 4.57%;
    text-align: left;
}

.cancer-treatment01 .btn-li .btn-next,
.cancer-treatment02 .btn-li .btn-next {
    width: 29.57%;
}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 767px) {
    .cancer-treatment01 .btn-li,
    .cancer-treatment02 .btn-li{
        flex-wrap: wrap;
        gap: 4vw;
        bottom: 6%;
        text-align: center;
    }
    .cancer-treatment01 .btn-back,
    .cancer-treatment02 .btn-back{
        width: 100%;
        text-align: center;
    }
    .cancer-treatment01 .btn-back img,
    .cancer-treatment02 .btn-back img{
        width: 34.32%;
    }
    .cancer-treatment01 .btn-li .btn-next,
    .cancer-treatment02 .btn-li .btn-next{
        width: 70.14%;
        margin: 0 auto;
    }
}

/*END　がん治療に関して02ページ*/