:root {
    --inner__pdding: 20px;
}

@media screen and (max-width:420px) {
    :root {
        --inner__pdding: 10px;
    }
}

body {
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    background-color: #000;
    opacity: 0;
}

body.loaded {
    opacity: 1;
    transition: .5s;
}

body:before {
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: -1;
    background-image: url(../../../images/sp/poupelle/cert2026/back.webp);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .2;
}

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

.l-inner {
    max-width: 600px;
    margin: auto;
    background-image: url(../../../images/sp/poupelle/cert2026/innerbg.webp);
    background-size: cover;
    /* background-attachment: fixed; */
}

/* section内のinner */
.l-sinner {
    padding: 0 var(--inner__pdding);
}

#quiz {
    transition: opacity 0.3s ease;
    opacity: 1;


}

footer {
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    max-width: 600px;
    width: 100%;
    margin: auto;
    font-size: clamp(12px, calc((14/ 400)*100vw), 14px);

}


#quiz.is-fadeout {
    opacity: 0;
}

.indexMv {
    margin-bottom: -50px;
}

.indexTitle {
    aspect-ratio: 600 / 465;
    width: clamp(12px, calc((400/ 600)*100vw), 400px);
    margin: auto;
    display: block;
}

.indexSubTitle {
    aspect-ratio: 261 / 40;
    width: clamp(12px, calc((260/ 600)*100vw), 260px);
    margin: auto;
    display: block;
    margin-bottom: 10px;
}



.c-frame {
    position: relative;
}

.c-frame__inner {
    position: relative;
    padding: 40px 12px;
    background-color: #ffffffab;
    border-radius: 10px;
}


.c-frame__inner:before,
.c-frame__inner:after,
.c-frame::before,
.c-frame::after {
    content: "";
    position: absolute;
    background-image: url(../../../images/sp/poupelle/cert2026/frame.png);
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    width: 81px;
    z-index: 1;
}

.c-frame__inner:before {
    top: -5px;
    left: -5px;
}

.c-frame__inner:after {
    top: -5px;
    right: -5px;
    rotate: 90deg;
}

.c-frame::before {
    bottom: -5px;
    left: -5px;
    rotate: 270deg;
}

.c-frame::after {
    bottom: -5px;
    right: -5px;
    rotate: 180deg;
}


.c-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-bottom: 30px;
}

.c-heading__en {
    font-size: 40px;
    font-weight: bold;
    color: #ff6600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: -4%;
    opacity: .2;
}

.c-heading__en:before,
.c-heading__en:after {
    content: "";
    height: 4px;
    width: 23px;
    background-color: #ff6600;
    display: block;
    opacity: .2;
}


.c-heading__ja {
    color: #FF6600;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    bottom: -20px;
}

.c-hash {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    margin: 0 3px;
}

.prize__image {
    aspect-ratio: 1055 / 1026;
    width: 100%;

}

.c-ctabtn {
    display: flex;
    width: 264px;
    aspect-ratio: 264/66;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #FFE24F;
    border: 2px solid #000;
    box-shadow: 0 4px 0 0 #000;
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 20px;
    font-weight: bold;
    margin: auto;
}

.c-ctabtn:after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'%3E%3Cpath d='M12.4127 6.15471L1.34921 6.15471C0.966931 6.15471 0.646495 6.28363 0.387897 6.54148C0.129299 6.79933 3.11174e-07 7.11883 3.27835e-07 7.5C3.44497e-07 7.88117 0.129299 8.20067 0.387897 8.45852C0.646495 8.71637 0.966932 8.84529 1.34921 8.84529L12.4127 8.84529L8.5 12.7466C8.25265 12.9933 8.12897 13.3072 8.12897 13.6883C8.12897 14.0695 8.25265 14.3834 8.5 14.63C8.74736 14.8767 9.06217 15 9.44445 15C9.82672 15 10.1415 14.8767 10.3889 14.63L16.5952 8.4417C16.8651 8.17264 17 7.85874 17 7.5C17 7.14126 16.8651 6.82735 16.5952 6.5583L10.3889 0.369955C10.1415 0.123318 9.82672 -4.2954e-07 9.44444 -4.1283e-07C9.06217 -3.9612e-07 8.74735 0.123318 8.5 0.369955C8.25265 0.616592 8.12897 0.930493 8.12897 1.31166C8.12897 1.69282 8.25265 2.00673 8.5 2.25336L12.4127 6.15471Z' fill='currentColor'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    right: 10px;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}

.c-ctabtn:hover {
    opacity: .7;
    transition: .2s;
}

.c-ctabtn:focus,
.c-ctabtn:focus-visible {
    outline: initial;
}

.indexPrize {
    margin-bottom: 20px;
}

.indexDetail__image {
    margin-bottom: 20px;
}

.indexHerohead {
    position: relative;
}

.indexHerohead:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../../../images/sp/poupelle/cert2026/bat.png);
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 234 / 196;
    display: block;
    width: clamp(12px, calc((110/ 600)*100vw), 110px);

}

.options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.option {
    font-weight: bold;
    width: 100%;
    font-size: 14px;
    border: 2px solid #000;
    text-align: center;
    height: 66px;
    border-radius: 5px;
    position: relative;



}

.option:before {
    content: "";
    background-image: url(../../../images/sp/poupelle/cert2026/select_btn_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    aspect-ratio: 369 / 521;
    height: 90%;
    position: absolute;
    bottom: 2px;
    opacity: .2;
    left: 2px;
    mix-blend-mode: color-burn;
}

.option:after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231f1f1f'%3E%3Cpath d='m485.91-480-184-184L376-738.09 634.09-480 376-221.91 301.91-296l184-184Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;

    transition: .2s;
}


.question {
    padding-top: 30px;
    flex: 1;
    box-sizing: border-box;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
}

.question:before {
    content: "";
    background-image: url(../../../images/sp/poupelle/cert2026/question_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 478 / 253;
    width: 100%;
    position: absolute;
    top: 0;
    opacity: .7;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

#modal-title {
    margin-top: 0;
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 5px;

}

.modal button {
    margin-top: 15px;
    padding: 8px 16px;
}

.no {
    aspect-ratio: 102 / 40;
    width: 152px;
    background-image: url(../../../images/sp/poupelle/cert2026/question_no_back.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #673125;
    padding-bottom: 15px;
    margin: 0 auto 8px;

}



#modal-image {
    border: 2px solid #000;
    box-shadow: 3px 3px 0 0;
    margin-bottom: 10px;
}

#modal-text {

    border-top: 1px dashed #673125;
    padding-top: 50px;
    margin-top: -30px;
    text-align: left;
}

.no__outer {
    position: relative;
}

#question {
    margin-bottom: 20px;
}

#modal-correct-image {
    width: 34px;
    aspect-ratio: 1/1;
}

h2#modal-title-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.modalToResult {
    display: none;
    opacity: 0;
    position: relative;
}


.c-frame.remove {
    opacity: 0;
    transition: .3s;
}

.modalToResult.visible {
    opacity: 1;
    transition: .3s;
    display: block;
}



.grade__b {
    font-size: 30px;
}

.resultGrade {
    max-width: 300px;
    margin: 0 auto 50px;
    background: #fff;
    border: 1px solid;
    box-shadow: 3px 3px 0 0 #000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: relative;

}

.result__share {
    background: #000;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 16px;
    width: 230px;
    height: 66px;
    border-radius: 100px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: auto;
}

.resultPoster {
    color: #fff;
    background: #0C183C;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 30px;
}

.resultPoster__heading {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 13px;
}

.resultPoster__heading--small {
    font-size: 15px;
    margin-bottom: 13px;
}

.resultPoster__date {
    font-size: 16px;
    border: 1px solid;
    display: inline-block;
    padding: 10px 15px;
    margin-bottom: 16px;
}

.resultPoster__credit {
    font-size: 10px;
    margin-bottom: 34px;
}

.resultPoster__act {
    margin-bottom: 28px;
}

.sns__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.sns__item {
    width: 42px;
    aspect-ratio: 1/1;
}

.resultCampaign__inner {
    border-radius: 2px;
    border: 3px solid;
    background: #fff;
    ;
}

.resultCampaign__heading {
    max-width: 500px;
    width: 90%;
    position: relative;

}

.resultCampaign__heading--outer {
    text-align: center;
    transform: translate(0px, -50%);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}


.resultPrize {
    padding: clamp(70px, calc((100/ 500)*100vw), 100px) 30px 20px;
}

.result__top {
    padding-top: 20px;
    padding-bottom: 0px;
    position: relative;
}

.result__share:before {
    content: "";
    width: 36px;
    aspect-ratio: 1 / 1;
    background-image: url(../../../images/sp/poupelle/cert2026/sns/x_white.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

.result__top .l-sinner {
    position: relative;
}

.result__post:after {
    content: "";
    aspect-ratio: 544 / 1200;
    width: clamp(12px, calc((100/ 600)*100vw), 100px);
    background-image: url(../../../images/sp/poupelle/cert2026/result_chara.webp);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    top: -10px;
    right: -5px;
    transform: translateY(-100%);
    position: absolute;
}

.campaign:before {

    image-rendering: -webkit-optimize-contrast;
    content: "";
    aspect-ratio: 933 / 1000;
    width: clamp(12px, calc((120 / 500) * 100vw), 120px);
    background-image: url(../../../images/sp/poupelle/cert2026/bat2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    display: block;
    margin: auto;
    transform: translate(0, -30%);
}

.result__heading {

    margin-bottom: clamp(20px, calc((50/ 600)*100vw), 50px);
}

.resultPoster__image {
    transform: translate(0px, 0px);
    margin-bottom: -20px;
    box-shadow: 6px 6px 6px 0 #00000059;

}

.campaign .l-sinner {
    padding-top: 30px;
}





.modal.is-open {
    display: flex;
}

.modal.is-close {
    display: none;
}

.options:has(.is-selected) .option:not(.is-selected) {
    opacity: 0;
    transition: .2s;
}



.animate__bounceIn2 {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@keyframes bounceIn {

    0%,
    20%,
    50%,
    55%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
        -webkit-transform: scale3d(.7, .7, .7);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, .1)
    }
}


.animate__fadeInSlide {
    -webkit-animation-name: fadeInSlide;
    animation-name: fadeInSlide;
    animation-duration: .5s;

}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20px, 0%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}


.animate__fadeInUp2 {
    -webkit-animation-name: fadeInUp2;
    animation-name: fadeInUp2;
}

@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.campaign {
    margin-bottom: 30px;
}

.modalToResult__img {
    max-width: 400px;
    width: 90%;
    margin: 0 auto 5px;
}

div#level {
    display: inline-block;
}



.level {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 5px;
    left: calc(50% - 150px);
    rotate: -20deg;
    z-index: 0;
    /* opacity: 0; */
    animation-duration: .3s;
}


p#no {
    position: relative;
    z-index: 1;
}

.footer_copy {
    opacity: .4;
}

.guiest__btn {
    font-size: clamp(12px, calc((20/ 500)*100vw), 20px);
    width: clamp(200px, calc((264/ 500)*100vw), 264px);
}

.guiest__btn:after {
    width: clamp(14px, calc((24/ 600)*100vw), 24px);
}

.resultGrade.guest {
    padding: 10px;
    font-size: clamp(12px, calc((14/ 500)*100vw), 13px);
    text-align: left;
    font-weight: 400;

}

.index__cta {
    margin-bottom: 20px;
}

.c_m-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 600px;
    margin: auto;

}

.c_m {
    padding: 10px;
    opacity: 0;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #242424;
    color: #fff;
    padding: 10px;
    display: none;
    z-index: 5;
}

.c_m.is-active {
    display: block;
    opacity: 1;
}

.c_m.is-active.toResult__cm {
    display: block;
    opacity: 1;
    position: static;
    margin-top: 20px;
}

.progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, .2);

    overflow: hidden;
}

#progressBar {
    border-radius: 0 999px 999px 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(100deg, #c8bc3e, #dd8e0c);
    transition: width .4s ease;
}

.bquestion .l-inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

section.question .l-sinner {
    width: 100%;
}

.modal-content {
    max-height: 98dvh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.youtube {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
}

.youtube iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


.c-ctabtn.guiest__btn {
    margin-bottom: clamp(20px, calc((50 / 600) * 100vw), 50px);
}



.result__post--title {
    font-size: clamp(16px, calc((18 / 600) * 100vw), 18px);

}

.result__post--link {

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}



.result__post--image {
    border: 2px solid #000;
    width: clamp(100px, calc((200/ 700)*100vw), 200px);
    aspect-ratio: 16 / 9;
    height: auto;
}

.result__post--link:after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M480-329.33 630.67-480 480-630.67 433.33-584 504-513.33H326.67v66.66H504L433.33-376 480-329.33ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.result__newfilm--title {
    display: inline-block;
    font-size: clamp(20px, calc((20 / 600) * 100vw), 20px);
    line-height: 1.3;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 20px 0;
    margin: 10px 0;
}

.result__newfilm {
    font-weight: bold;

    width: 90%;
    margin: 0 auto 30px;
}

.result__newfilm--sub {
    font-size: clamp(20px, calc((20 / 600) * 100vw), 20px);
}

.result__newfilm--date {
    font-size: clamp(20px, calc((20 / 600) * 100vw), 20px);
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-day {
    display: inline-flex;
    font-size: 70%;

    background: #ffffff;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    width: 6%;
    justify-content: center;
    align-items: center;
    color: #0d183d;
    margin-right: 10px;
    margin-left: 5px;
}

.result__post {
    text-align: center;
    font-weight: bold;
    border: 2px solid;
    padding: 10px 0 10px 10px;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    align-items: center;
}

.result__postdetail {
    flex: 1;
}

/* .result__post:hover .result__post--image {
    border-color: #e92e2e;
} */

a.result__post:hover {
    border: 2px solid #bb1212;
}

a.result__post:hover .result__post--link {
    color: #bb1212;
}

a.result__post:hover .result__post--link:after {
    background-color: #bb1212;
}

/* 
.result__post:hover .result__post--link {
    color: #e92e2e;
}

.result__post:hover .result__post--link:after {
    background-color: #e92e2e;
} */

.result__share--outer {
    margin-bottom: 50px;
}



@media screen and (max-width:400px) {
    .result__post {
        flex-direction: column;
    }

    .result__postdetail {
        display: contents;
    }

    .result__post--sub {
        order: 1;
    }

    .result__post--title {
        order: 2;
        margin-bottom: 10px;
    }

    .result__post--link {
        order: 4;
    }

    .result__post--image {
        order: 3;
        margin-bottom: 10px;
    }

    .result__post {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .result__post--image {
        width: 70%;
    }
}