@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Athiti:wght@600;&family=Henny+Penny&display=swap');

#result{
    --red:#E92D2D;
    --black:#706767;
    --richBlack:#393434;
    --yellow:#FFFF44;
    --midBlue:#004684;
    --midgreen:#008E84;
    --treeBrown:#985219;
    --footerBg:#F9F4F4;
    --lyeBrown:#9E9478;
    --pink:#F53D87;
    --orange:#FF4E00;
}

#result{
    background: #FEFEF2;
}

.resultWrapper{
    max-width: 1200px;
    margin:0 auto;
}

.kvArea{
    min-height:480px;
    background:url("/new/_app/_webroot/img/page/job/kv_result_bg.png") no-repeat;
    background-position:center;
    background-size:cover;
    position:relative;
    overflow:hidden;
}

.kvArea:after{
    content:"";
    display: block;
    background:url("/new/_app/_webroot/img/page/job/kv_result_bottom.png") no-repeat;
    background-position:center;
    background-size:cover;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
    width: 100%;
    min-height:230px;
}

.kvAreaContent{
    width:min(680px,50%);
    margin: 0 auto;
    padding: 60px 0 0 0;
    display:flex;
    justify-content:space-between;
    align-items: center;
    position:relative;
}

.kvAreaContent:before,
.kvAreaContent:after{
    content:"";
    display: block;
    position:absolute;
    bottom:-70px;
    z-index:3;
}

.kvAreaContent:before{
    background:url("/new/_app/_webroot/img/page/job/boy_result.png")no-repeat;
    background-position:center;
    background-size:cover;
    width: 166px;
    height: 257px;
    left:-180px;
}

.kvAreaContent:after{
    background:url("/new/_app/_webroot/img/page/job/girl_result.png")no-repeat;
    background-position:center;
    background-size:cover;
    width: 166px;
    height: 257px;
    right:-180px;
}


.kvAreaContentLeft,.kvAreaContentRight{
    width: 50%;
}

.kvAreaContentRight{
    text-align:center;
    text-shadow:0 3px 6px rgba(0,0,0,0.44);   
}
.kvAreaContentRight h2,
.kvAreaContentRight p{
    font-weight:bold;
    color:#ffffff;
}
.kvAreaContentRight h2{
    font-size:4rem;
    margin:0 0 2rem 0;
}

.kvAreaContentRight .kvText{
    font-size:2rem;
    line-height:1.6;
}

.kvAreaContentRight .kvRankResult{
    margin:2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rankResult{
    font-size:6rem;
}

.contentFlexbox{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display:flex;
    justify-content:space-between;
}

.specialFukidashi {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 2rem auto;
    padding: 1rem;
    border: 4px solid #E92D2D;
    border-radius: 16px;
    background-color: #ffffff;
    text-align: center;
    line-height: 1.4;
    color:#E92D2D;
}

.specialFukidashi::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 50%;
    border-style: solid;
    border-width: 0 15px 20px 15px;
    border-color: transparent transparent #E92D2D;
    translate: -50% -100%;
    transform:rotate(180deg);
}

.specialFukidashi::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    border-style: solid;
    border-width: 0 10px 13.3px 10px;
    border-color: transparent transparent #ffffff;
    translate: -50% -100%;
    transform:rotate(180deg);
}

.specialFukidashi p{
    margin:0.5rem 0 0 0;
    line-height:1.6;
    font-size:1.2rem;
}

.questListBlock{
    margin-top:4rem;
}

/* certificate */
.rankCertificate{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rankCertificateImage{
    position:relative;
    display: flex;
    justify-content: center;
}

.rankCertificateImage .certificateText1,
.rankCertificateImage .certificateText2,
.rankCertificateImage .certificateDate{
    position:absolute;
}

.rankCertificate .certificateText1{
    top: 44%;
    left: 60%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.rankCertificate .certificateText2{
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.rankCertificate .certificateDate{
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.rankCertificate .certificateText1 span.pageCount{
    color:#E92D2D;
    font-size:3rem;
    font-family: "Athiti", sans-serif;
}

.rankCertificate .certificateText2 span.rankResult{
    color:#E92D2D;
    font-size: 3rem;
    font-family: "Henny Penny", system-ui;
}

.rankCertificate .certificateDate span{
    color:#C89213;
    font-size:1.125rem;
}

#downloadButton{
    background:#008E84;
    color:#ffffff;
    display: block;
    text-align: center;
    padding:1rem 2rem;
}

#downloadButton:hover{
    opacity:0.4;
    transition:0.3s;
}

/* SNSbox */
.snsBox{
    width: 100%;
    max-width:340px;
    margin: 0 auto;
    border:3px solid var(--midBlue);
    padding:2rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ttlSns{
    display:flex;
    justify-content:center;
}

.catchSns{
    font-size:1.4rem;
    color:var(--midBlue);
    text-align: center;
    margin:1rem 0 0.5rem 0;
}

.snsBox p{
    font-size:1.2rem;
    margin-bottom:1rem;
    line-height:1.8;
}

.snsBox p span{
    color:var(--red);
    text-decoration:underline;
}

.snsLink ul{
    display:flex;
    flex-direction:column;
    list-style:none;
    margin: 0;
    padding: 0;
}

.snsLinkBtn{
    margin-top:1rem;
    width: 100%;
    max-width:224px;
    margin: 0.75rem auto 0 auto;
}

.snsLinkBtn a{
    background: #ffffff;
    border:2px solid var(--midBlue);
    border-radius:50px;
    color:var(--midBlue);
    display:block;
    font-size:1.15rem;
    font-weight:700;
    text-align: center;
    padding:0.5rem 0.75rem;
}

.snsLinkBtn a:hover{
    background:var(--midBlue);
    color:#ffffff;
    transition:0.3s;
}

.snsLinkBtn a span{
    font-size:0.74rem;
}

@media screen and (max-width:1220px) {
    .kvAreaContent{
        width:80%;
        display:flex;
        justify-content:center;
        flex-direction: column;
    }
    
    .rankResult{
        font-size:4rem;
    }

}
@media screen and (max-width:1080px) {
    .kvArea{
        min-height:480px;
    }
    
    .kvArea:after{
        background-position:center;
        bottom:-10px;
        left:0;
        right:0;
        width: 100%;
        min-height:230px;
    }

    .rankResult{
        font-size:6rem;
    }

}

@media screen and (max-width:768px) {
    .contentFlexbox{
        display:flex;
        justify-content:center;
        flex-direction: column;
    }
    .snsBox{
        width: 92%;
    }

    .kvArea{
        height: min(980px,70vh);
        background:url("/new/_app/_webroot/img/page/job/kv_result_sp.png") no-repeat;
        background-size:cover;
        background-position:bottom;
        position:relative;
        overflow:initial;
    }
    .kvAreaContent{
        display:flex;
        flex-direction: column;
        padding-top:40px;
    }

    .kvAreaContentLeft,
    .kvAreaContentRight{
        width: 72%;
    }

    .kvAreaContentRight{
        padding-top:2rem;
    }

    .kvArea:after{
        display:none;
    }

    .kvAreaContent:before,
    .kvAreaContent:after{
    display:none;
}

    .contentWrap{
        padding-top:6rem;
    }

    #downloadButton{
        width: 100%;
        max-width: 300px;
        margin: 0 auto 6rem auto;
    }
}

@media screen and (max-width:480px) {
    .kvArea{
        height: min(520px,70vh);
    }
}

@media screen and (max-width:375px) {
    .kvArea{
        height: min(420px,70vh);
    }
}