@charset "UTF-8";
/* CSS Document */
@import url(../../css/footer.css);



/*---------------------------
 ベース
----------------------------*/
#survey main {
    display: flex;
    justify-content: center;
    background: url("../img/bg-80.jpg") center top no-repeat #000000;
    background-size: 900px auto;
}
.mainWrap {
    width:min(100%,450px);

}
.mainWrap .contents {
    padding:40px 4% 0;
}


/*---------------------------
 kv 
----------------------------*/
.kv {
    display: flex;
    flex-direction: column;
    align-items: center;
    color:white;
    text-align: center;
    gap:40px;
}
.kv_header {
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kv_header figure{
    width:100%;
    border-bottom:1px solid #c79f62;
}
.kv_header figure img {
    width:min(43%,512px);
    height:auto;
    margin:0 auto 20px;
}
.kv h1 {
    font-size:var(--fsize28);
    line-height: 2;
}
.kv p {
    font-size:clamp(15px, 2.222208vw, 32px);
}

/*---------------------------
 survey_contents
----------------------------*/
.survery_contens {
    background-color: rgba(244,243,232,0.9);
    padding-top:0;
    padding-bottom:40px;
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:40px;
}
.survery_contens h2 {
    background : linear-gradient(90deg, rgba(40, 74, 113, 1) 0%, rgba(0, 0, 0, 1) 100%);
    display: grid;
    place-items: center;
    color:white;
    font-size:clamp(22px, 3.333312vw, 48px);
    border-radius: 36px;
    height:72px;
    width:100%;
}
.survery_contens article.point {
    width:min(85%,1036px);    
    position:relative;
    padding-bottom:0;
    display: grid;
    gap:20px;
}
.survery_contens article.point h3 {
    background: white;
    display: grid;
    place-items: center;
    color:#001420;
    border-radius: 25px;
    height:50px;
    width:100%;
    font-size:clamp(22px, 2.77776vw, 40px);
}

dl.ranking {
    display: grid;
    grid-template-columns: 22.4% auto;
    gap:10px;
    font-family:var(--fontGo);
}
dl.ranking dd {
    align-self: center;
    font-size:clamp(14px, 1.944432vw, 28px);
}
.point_box {
    display: flex;
    justify-content: flex-start;
    background: #e1d7aa;
}
.point_box h4 {
    background : linear-gradient(90deg, rgba(40, 74, 113, 1) 0%, rgba(0, 0, 0, 1) 100%);
    color:white;
    width:min(18%,170px);
    flex-shrink: 0;
    text-align: center;
    display: grid;
    place-items: center;
    font-size:clamp(14px, 2.499984vw, 36px);
    font-family:var(--fontEn);
    text-transform: uppercase;
}
.point_box p {
    align-self: center;
    text-align: left;
    font-size:clamp(15px, 2.499984vw, 36px);
    padding:0.5em 0.75em;
    line-height: 1.4;
    flex:1;
}

.survey_result {
    color:white;
    padding-top:40px;
    padding-bottom:40px;
    display: grid;
    gap:20px;
}

.survey_result p {
    font-size:clamp(16px, 2.77776vw, 40px);
    text-align: center;
}
.survey_result .result_list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:20px;
}
.survey_result .result_list li {
    color:#d3b967;
    font-size:clamp(18px, 3.333312vw, 48px);
}
.survey_result .result_list li small {
    font-size:70%;
}
.survey_result .result_list img {
    width:min(14.5%,124px);
    height:auto;
}
.survey_result .cap {
    font-size:0.8em;
    font-family:var(--font);
}


/*cta */

.cta_box {
    width:100%;
    height:auto;
    aspect-ratio:450/142;
    background-color: #757562;
}
.cta_box .bn_cta {
    display :flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    background: url("../img/bg_bnentry.jpg") no-repeat;
    background-size:cover;
    position:relative;
    gap:10px;
}
.cta_box .bn_cta:before {
    content:"";
    display: block;
    position:absolute;
    left:0;
    top:0;
    background-color: #757562;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
}
.cta_box .bn_cta a {
    position:relative;
    display: flex;
    padding:8px 10px;
    text-decoration: none;
    justify-content: center;
    width:80%;
}



@media (max-width: 450px) {
    .survey_result .result_list li,.survey_result p  {
        letter-spacing: -0.01em;
    }
    
}
@media (min-width: 769px) {
    #survey main {
    background: url("../img/bg-80.jpg") no-repeat #000000;
    background-size: 100% auto;
}
    .kv h1 {
    font-size:var(--size60);
}
    .mainWrap {
    width: 100%;
    } 
}
@media (min-width: 1025px) {
    
    .kv_header {
    padding:0 8%;
    }
    .kv_header figure img {
    margin:0 auto 40px;
}
    .mainWrap {
    width: 100%;
    padding-bottom: 80px;
    }

    .mainWrap .contents {
        padding: 0 0 80px;
        max-width: min(90%, 1280px);
        margin:100px auto 0;
    } 
    .mainWrap .survery_contens_wrapper {
        padding: 60px 0 80px;
        max-width: min(90%, 1280px);
        margin:0 auto;
    } 
    .survery_contens {
    padding-bottom:80px;
    border-radius: 72px 72px 36px 36px;
    gap:80px;
}
    .survery_contens h2 {
    border-radius: 72px;
    height: 144px;
}
    .survery_contens article.point h3 {
    border-radius: 50px;
    height:100px;
}
    
    dl.ranking {
        grid-template-columns: 160px auto;
    }
    .survey_result {
     padding-top:80px;
    padding-bottom:80px;  
        gap:40px;
    }

.survey_result .cap {
    font-size:1.2em;
}

    .cta_box {
        max-width: min(100%, 1280px);
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 6 / 1;
    }
    .cta_box .bn_cta {
        flex-direction: row;
        gap: 40px;
        padding-inline: 60px;
    }
    .cta_box .bn_cta a {
        padding: 16px 10px;
        font-size: 24px;
    }



}