@charset "UTF-8";

.text-20p {font-size: 125%;}
.text-30p {font-size: 187.5%;}
.text-40p {font-size: 250%;}
@media screen and (max-width: 767.98px) {
    .text-20p {font-size: 100%;}
    .text-30p {font-size: 125%;}
    .text-40p {font-size: 150%;}
}

/* 汎用 */
.quiz .section-header {
    border: 4px solid #004B9F;
    background: #FFFF3F;
}
.quiz .section-body {
    margin-top: -4px;
    border: 4px solid #004B9F;
}

/* クイズ画面 */
#quiz .section-header {
    background-image: url("../img/quiz/section-header.svg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}
#quiz .section-body .q-header {
    background: #D3F3FF;
}
#quiz .section-body .q-header .q-num {
    position: relative;
    display: inline-block;
    text-align: center;
    background: #FFF;
    border-radius: 50%;
    box-sizing: border-box;
    color: #004B9F;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    width: 100px;
    height: 100px;
    line-height: 90px;
    border: solid 4px #004B9F;
    font-size: 30px;
    margin-bottom: 15px;
}
#quiz .section-body .q-header .q-num:before {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 2;
    bottom: -30px;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 25px solid #FFF;
}
#quiz .section-body .q-header .q-num:after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 1;
    bottom: -36px;
    margin-left: -14px;
    border: 14px solid transparent;
    border-top: 22px solid #004B9F;
}
@media screen and (max-width: 767.98px) {
    #quiz .section-header {
        background-size: contain;
    }
}
@media (max-width: 575.98px) {
    #quiz .section-body .q-header .q-num {
        width: 60px;
        height: 60px;
        line-height: 52px;
        font-size: 20px;
        margin-bottom: 0;
    }
    #quiz .section-body .q-header .q-num:before {
        bottom: -19px;
        margin-left: -9px;
        border: 9px solid transparent;
        border-top: 18px solid #FFF;
    }
    #quiz .section-body .q-header .q-num:after {
        bottom: -26px;
        margin-left: -10px;
        border: 10px solid transparent;
        border-top: 16px solid #004B9F;
    }
}

/* 選択肢 */
#quiz .section-body .select-inner {display: flex;}
#quiz .section-body .select-inner .q-list {width: 80%;}
#quiz .section-body .select-inner figure {width: 20%;}
#quiz .section-body .select-inner .q-list li {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    background: #FFFF3F;
    border-radius: 50px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    line-height: 1.35;
    font-weight: bold;
    border: solid 4px #004B9F;
    height: 100px;
    padding: 0 1.5rem 0 7rem;
    margin-bottom: 2rem;
}
#quiz .section-body .select-inner .q-list li div {
    position: absolute;
    display: inline-block;
    background: #FFF;
    text-align: center;
    border-radius: 50%;
    color: #004B9F;
    font-weight: bold;
    border: solid 4px #004B9F;
    top: -4px;
    left: -4px;
    font-size: 50px;
    width: 100px;
    height: 100px;
    line-height: 85px;
}
@media (max-width: 767.98px) {
    #quiz .section-body .select-inner {display: block;}
    #quiz .section-body .select-inner .q-list {width: 100%;}
    #quiz .section-body .select-inner figure {width: 100%;}
    #quiz .section-body .select-inner figure img {width: 50%;}
    #quiz .section-body .select-inner .q-list li {
        height: 100px;
        padding: 0.5rem 1.25rem 0.5rem 4rem;
        margin-bottom: 1rem;
    }
    #quiz .section-body .select-inner .q-list li div {
        font-size: 30px;
        width: 60px;
        height: 60px;
        line-height: 48px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

/* 回答画面 */
.answer-block {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #FFF;
    border: solid 2px #0066CC;
    box-sizing: border-box;
    border-radius: 5px;
}
.answer-block:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -23px;
    margin-top: -18px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.answer-block:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    margin-top: -20px;
    border: 14px solid transparent;
    border-left: 14px solid #0066CC;
    z-index: 1;
}
.answer-block .word {
    font-weight: bold;
    text-align: center;
    color: #FFF;
    background: #004B9F;
    padding: 0.5rem;
}
.answer-block .res {
    font-weight: bold;
    color: #004B9F;
    min-height: 7rem;
}
#answer_res div::after {
    content: '：';
    left: 0;
}
#answer.true .true-img {
    display: block !important;
    position: absolute;
    bottom: 0;
    right: -33.5%;
    width: 47%;
}
#answer.false .false-img {
    display: block !important;
    position: absolute;
    bottom: 0;
    right: -30%;
    width: 28%;
}
@media (max-width: 575.98px) {
    #answer.true .true-img {
        right: -49.5%;
        width: 65%;
    }
    #answer.false .false-img {
        right: -40%;
        width: 38%;
    }
}