progress-wrapper {
    margin-bottom: 30px;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid var(--green);
    padding: 2px;
}

#progressFill {
    height: 100%;
    width: 0%;
    background: #4caf50;
    transition: .3s;
    border-radius: 100px;
}

#progressText {
    display: none;
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--green);
}



.navigation {
    margin-top: 20px;
}



/* ======= */

:root {
    --inner__pdding: 20px;
    --green: #48A636;
    --red: #E73736;
    --pink: #FBE3E9;
    --purple: #E089AE;
    --color-black: #222222;
    --ellipse: ellipse(130% 100% at 50% 100%);
}

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

@media screen and (max-width:500px) {
    :root {
        --ellipse: ellipse(200% 100% at 50% 100%);
    }
}


body {

    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    overflow-y: scroll;
    background: #fff;
    background-image: url(../../../../images/sp/choya/sarari/bg.webp);
    background-size: 50%;
    background-attachment: fixed;
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Noto Sans JP",
        sans-serif;
}


.wrapper {
    width: 100%;
    max-width: 600px;
    margin: auto;
    background: #fff;
    z-index: inherit;
    position: relative;

}

h1 {
    margin: 0;
}

.l-inner {
    padding: 0 var(--inner__pdding);
}

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

.mincho {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

.header__inner img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.slide {
    padding: 20px 0 30px;
    overflow: hidden;
}

.slide__splide .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide__splide .splide__slide img {
    display: block;
    width: 100%;
    height: auto;
}

.c-card {
    border: 1px solid var(--green);
    border-radius: 10px;
    padding: 15px;
    color: var(--green);
    font-weight: bold;
    position: relative;
}

.c-card__head img {
    max-height: 50px;
    width: auto;
    background: #fff;
}

.c-card__head {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.c-card__body {
    padding-top: 20px;
}



.c-btn {
    width: 100%;
    max-width: 500px;
    padding: 10px 20px;
    margin: 0;
    border: 2px solid var(--red);
    background: #fff;
    box-shadow: 0 2px 0 var(--red);
    border-radius: 10px;
    font-weight: bold;
    font-size: clamp(16px, calc((20 / 600) * 100vw), 20px);
    line-height: 1.7;
    box-sizing: border-box;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--red);
    letter-spacing: 5px;
    position: relative;
    transition: .2s;
}

.c-btn:after {
    content: "";
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--red);
    display: block;
    right: 10px;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}



.c-btn:hover {
    background-color: #eee;
}

.age_confirm__button:hover,
.index_recipe .c-btn:hover,
.c-btn:hover {
    background-color: var(--red);
    color: #fff;
}

.age_confirm__button:hover:after,
.index_recipe .c-btn:hover:after,
.c-btn:hover:after {
    background: #fff;
}

.answer-btn:hover {
    background-color:var(--red);
    color: #fff;
}

.answer-btn.clicked {

    background-color: var(--red);
    color: #fff;
}

.indexCta {
    text-align: center;
}

.campaing__cta {
    text-align: center;
}

.indexCampaing {
    clip-path: var(--ellipse);
    background: var(--pink);
    padding-top: 20px;
    padding-bottom: 40px;

}

.campaing__title--img {
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.campaing__title {
    display: flex;
    gap: 10px;
    font-size: 30px;
    font-weight: bold;
    color: var(--red);
    justify-content: center;
    align-items: center;
    line-height: 1;
    margin-bottom: 30px;
}

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

    .campaing__title p {
        margin: 0;
        text-align: center;
    }
}

.campaing__title img {
    width: 100px;
}


.campaing__body {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #FFDBDB;
    box-shadow: 1px 1px 4px #e69ab03b;
    background-image: url(../../../../images/sp/choya/sarari/30th_logo.png);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.campaing__body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: .9;
}

.campaing__body--inner {
    position: relative;
}

.campaing__row {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--pink);
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.campaing__body .campaing__row.campaing__duel {
    border-bottom: none;
    margin: 20px 0 10px;
    padding-bottom: 0;
}

.campaing__body .campaing__row.campaing__duel .campaing__label {
    background-color: initial;
    color: var(--red);
    font-size: 20px;
    border: 2px solid;
    background-color: #ffffffb8;
}


.campaing__head {
    text-align: center;
    align-items: center;
    display: block;
    width: 100%;
    font-weight: bold;
    line-height: 1.5;
    font-size: 20px;
    color: var(--red);
    border-bottom: 2px dotted;
    padding-bottom: 10px;
}

.campaing__label {
    font-weight: bold;
    flex-shrink: 0;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    background: var(--red);
    color: #fff;
    margin: auto;
    text-align: center;
    min-width: 80px;
}

@media screen and (max-width:500px) {
    .campaing__label {
        width: initial;
    }
}



.campaing__text {
    flex: 1;

    /* color: var(--red); */
    line-height: 1.7;
}

.campaing__list {
    margin: 0 0 0px;
    padding: 0 0 0 0;
    /* color: var(--red); */
    font-weight: initial;
    line-height: 1.7;
    list-style: none;
}

.campaing__list li+li {
    margin-top: 8px;
}

.campaing__note {
    margin: 10px 0 16px;
    font-size: 12px;
    font-weight: bold;
    color: var(--red);
    line-height: 1.7;

}

.campaing__prize {
    margin: 0 0 20px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
}

.campaing__prize span {
    display: inline-block;
}

@media screen and (max-width:500px) {
    .campaing__prize {

        text-align: left;
    }

    .campaing__prize span {
        display: inline;
    }
}

.indexSlide {
    margin-bottom: 20px;
}

.indexAbout {
    margin-bottom: 30px;
}

.indexCta {
    margin-bottom: 30px;
}

.campaing__body {
    margin-bottom: 30px;
}

.index_sarari {
    background: var(--pink);
}

.sarari__image img {
    width: 100px;
}

.index_sarari__description {
    display: flex;
    justify-content: center;
    align-items: center;
   
    gap: 20px;
    font-weight: bold;
     max-width: 500px;
    margin: auto;
}


.index_sarari__description--outer{
padding: 20px;
    background: #fff;
    border-radius: 10px;
}
footer {
    background: var(--pink);
    padding-top: 40px;
    font-size: 12px;
    text-align: center;
}

.footer_copy a {
    color: #d49d9d;
}

.footer_copy {
    text-align: center;
    padding: 30px;
    color: #d49d9d;
}

.footer_logo__outer {
    text-align: center;
}

.footer_logo {
    max-width: 100px;
}

.brand_link {
    font-size: 16px;
    text-decoration: none;
    padding: 5px 10px;
    background: var(--red);
    color: #fff;
    border-radius: 3px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.brand_link:after {
    content: "";
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234B4B4B;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234B4B4B;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff;
}

.question {
    transition: opacity 0.3s ease;
}

.body__question h2 {
    font-size: 16px;
    margin: 0;
}

.answer-btn {
    display: block;
    width: 100%;
    margin: 0px 0;
    padding: 16px;

    cursor: pointer;
    font-size: 14px;
    justify-content: flex-start;
    max-width: initial;
    text-align: left;
    letter-spacing: 0;
}

.answer-btn:after {
    content: initial;
}

.question__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question__group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.q {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--green);
    border-radius: 100px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

.quesition__head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--green);
    font-weight: bold;
    font-size: 20px;
}

.question__title {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--pink);
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 var(--pink);
    padding: 0 20px;
}

.progress-wrapper {
    margin-bottom: 30px;
}

.question__title {
    margin-bottom: 30px;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.backBtn {
    border: initial;
    background: #eee;
    font-size: 16px;
    padding: 7px 30px;
    border-radius: 10px;
    color: #606060;
    transition: .2s;
}

.backBtn:hover {
    background: #bbb;
}

.body__question {
    min-height: 100dvh;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.body__question .wrapper {

    flex: 1;
    display: flex;
    flex-direction: column;
}

.body__question main {
    flex: 1;
}

.resultMv {
    margin-bottom: 40px;
}

html:has(body.result) {
    scroll-behavior: smooth;
}

.resultMv__link--inner {
    background-color: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 100px;
    display: inline-block;
    padding: 5px 20px;
    gap: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.resultMv__link--inner:hover {
    filter: brightness(0.8) contrast(1.1);
}
.resultMv__link {
    text-align: center;
    margin: 10px 0 20px 0;
    text-align: center;
    margin-bottom: 20px;
}

.resultMv__link--inner:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    background: #ffffff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m480-320 160-160-56-56-64 64v-168h-80v168l-64-64-56 56 160 160Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m480-320 160-160-56-56-64 64v-168h-80v168l-64-64-56 56 160 160Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.resultDetail {
    margin-bottom: 50px;
}

.resultDetail__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.resultTrivia__head {
    width: 100px;
    margin: auto;
}

.resultTrivia__body {
    padding: 20px;
    border-radius: 10px;
    border: solid 2px var(--green);
    background: #fff;
}

.resultTrivia__about {
    font-size: 22px;
    color: var(--red);
    font-weight: bold;
    border-bottom: 1px dashed #555;
    margin-bottom: 10px;

}

.resultTrivia {
    clip-path: var(--ellipse);
    background: #E6F7E4;
    padding-top: 50px;
    padding-bottom: 80px;
}





.result_heading {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-bottom: 10px;
}

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

@media screen and (max-width: 600px) {
    .result_heading img {
        width: clamp(200px, calc((225/ 600)*100vw), 225px);
        height: auto;
    }

    .result_heading.recipe img {
        width: clamp(300px, calc((427/ 600)*100vw), 427px);
        height: auto;
    }
}


.result_heading:after,
.result_heading:before {
    content: "";
    flex: 1;
    width: 100%;
    height: 2px;
    background: var(--green);
}

.result_heading.recipe:after,
.result_heading.recipe:before {
    background: var(--purple);
}



.recipeCard__img img {
    width: 195px;
    height: 195px;
    object-fit: cover;
    border-radius: 7px;
}

.cocktailList .recipeCard__img img {
    width: 100%;
    height: initial;
    aspect-ratio: 1/1;
}

.c-recipe__item--outer {
    text-align: center;
    margin-bottom: 10px;


}

.c-recipe__item {
    pointer-events: all;
    cursor: pointer;
    padding: 3px;
    display: inline-block;
    background: var(--red);
    border-radius: 10px;
    color: #fff;
    text-align: center;
}

.cocktailList .c-recipe__item {
    background-color: var(--purple);
    font-weight: bold;
}

.c-recipe__card {
    border-radius: 20px;
    background: #FCEFF4;
    border: 2px solid var(--red);
    padding: 20px;
    color: var(--red);
    font-weight: bold;
}

.recipeCard__subtitle {
    font-size: 16px;
    font-weight: bold;
    background: #fff;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 100px;
    border: 1px solid var(--red);
    display: inline-flex;
    transform: translate(10px, -50%);
}

.recipeCard__ingredients {
    margin-bottom: 30px;
}

.recipeCard__ingredients,
.recipeCard__instructions {
    border-top: 1px solid;
    margin-top: 20px;
}

.recipeCard__title {
    font-size: 24px;
    font-weight: bold;
}

.c-recipe__card ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.c-recipe__card p {
    margin: 0;
}

.resultRecipe__list {
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.resultRecipe {
    margin-bottom: 30px;
    padding-top: 60px;
    clip-path: ellipse(200% 100% at 50% 100%);
    background: #ffffff;
    margin-top: -50px;
}

@media screen {
    .resultRecipe {
        clip-path: ellipse(200% 100% at 50% 100%);
    }
}

.resultRecipe__list {
    margin-bottom: 30px;
}

.recipe__linkbtn--outer {
    text-align: center;
}


.cocktailList {
    padding: 0px 0 30px;
}

.recipeGroup {
    margin-bottom: 40px;
}

.recipeGroup--title {
    margin-bottom: 20px;
    text-align: center;
}

.recipeGroup--title img {
    width: 100%;
    max-width: 121px;
    height: auto;
}

.recipeGroup__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.recipeGroup__list .c-recipe__item {
    text-decoration: none;
}

.resultShare {
    margin-bottom: 30px;
    padding: 20px 0;
}

.resultShare__title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 20px;
}

.resultShare__body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.resultShare__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resultShare__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.4;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
    font-family: inherit;
    --share-icon-color: #fff;
}

.resultShare__item::before,
.resultShare__item::after {
    content: "";
    flex-shrink: 0;
    display: block;
    background: var(--share-icon-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.resultShare__item::after {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
}

.share_x {
    background: #000;
}

.share_x::before {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.7509 0H18.818L12.1179 8.47154L20 20H13.8284L8.99458 13.0085L3.46336 20H0.394938L7.56153 10.9385L0 0H6.32805L10.6974 6.39077L15.7509 0ZM14.6746 17.9692H16.3739L5.40467 1.92385H3.58086L14.6746 17.9692Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.7509 0H18.818L12.1179 8.47154L20 20H13.8284L8.99458 13.0085L3.46336 20H0.394938L7.56153 10.9385L0 0H6.32805L10.6974 6.39077L15.7509 0ZM14.6746 17.9692H16.3739L5.40467 1.92385H3.58086L14.6746 17.9692Z'/%3E%3C/svg%3E");
}

.share_link {
    background: var(--green);
}

.share_link::before {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.59805 12.4176C8.33805 12.4176 8.07805 12.3182 7.87992 12.1201C6.0218 10.262 6.0218 7.23886 7.87992 5.38073L11.6299 1.63073C12.5299 0.730732 13.7268 0.235107 14.9999 0.235107C16.273 0.235107 17.4693 0.730732 18.3699 1.63073C20.228 3.48886 20.228 6.51198 18.3699 8.37011L16.6555 10.0845C16.2587 10.4814 15.6162 10.4814 15.2193 10.0845C14.8224 9.68761 14.8224 9.04511 15.2193 8.64823L16.9337 6.93386C17.9999 5.86761 17.9999 4.13323 16.9337 3.06698C16.4174 2.55073 15.7305 2.26636 14.9999 2.26636C14.2693 2.26636 13.583 2.55073 13.0662 3.06698L9.31617 6.81698C8.24992 7.88323 8.24992 9.61761 9.31617 10.6839C9.71305 11.0807 9.71305 11.7232 9.31617 12.1201C9.11805 12.3182 8.85805 12.4176 8.59805 12.4176Z'/%3E%3Cpath d='M4.99992 19.7657C3.7268 19.7657 2.52992 19.27 1.62992 18.37C-0.228203 16.5119 -0.228203 13.4888 1.62992 11.6307L3.3443 9.91629C3.74117 9.51941 4.3843 9.51941 4.78055 9.91629C5.1768 10.3132 5.17742 10.9557 4.78055 11.3525L3.06617 13.0669C1.99992 14.1332 1.99992 15.8675 3.06617 16.9338C3.58242 17.45 4.2693 17.7344 4.99992 17.7344C5.73055 17.7344 6.4168 17.45 6.93367 16.9338L10.6837 13.1838C11.7499 12.1175 11.7499 10.3832 10.6837 9.31691C10.2868 8.92004 10.2868 8.27754 10.6837 7.88066C11.0805 7.48379 11.723 7.48379 12.1199 7.88066C13.978 9.73879 13.978 12.7619 12.1199 14.62L8.36992 18.37C7.46992 19.27 6.27305 19.7657 4.99992 19.7657Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.59805 12.4176C8.33805 12.4176 8.07805 12.3182 7.87992 12.1201C6.0218 10.262 6.0218 7.23886 7.87992 5.38073L11.6299 1.63073C12.5299 0.730732 13.7268 0.235107 14.9999 0.235107C16.273 0.235107 17.4693 0.730732 18.3699 1.63073C20.228 3.48886 20.228 6.51198 18.3699 8.37011L16.6555 10.0845C16.2587 10.4814 15.6162 10.4814 15.2193 10.0845C14.8224 9.68761 14.8224 9.04511 15.2193 8.64823L16.9337 6.93386C17.9999 5.86761 17.9999 4.13323 16.9337 3.06698C16.4174 2.55073 15.7305 2.26636 14.9999 2.26636C14.2693 2.26636 13.583 2.55073 13.0662 3.06698L9.31617 6.81698C8.24992 7.88323 8.24992 9.61761 9.31617 10.6839C9.71305 11.0807 9.71305 11.7232 9.31617 12.1201C9.11805 12.3182 8.85805 12.4176 8.59805 12.4176Z'/%3E%3Cpath d='M4.99992 19.7657C3.7268 19.7657 2.52992 19.27 1.62992 18.37C-0.228203 16.5119 -0.228203 13.4888 1.62992 11.6307L3.3443 9.91629C3.74117 9.51941 4.3843 9.51941 4.78055 9.91629C5.1768 10.3132 5.17742 10.9557 4.78055 11.3525L3.06617 13.0669C1.99992 14.1332 1.99992 15.8675 3.06617 16.9338C3.58242 17.45 4.2693 17.7344 4.99992 17.7344C5.73055 17.7344 6.4168 17.45 6.93367 16.9338L10.6837 13.1838C11.7499 12.1175 11.7499 10.3832 10.6837 9.31691C10.2868 8.92004 10.2868 8.27754 10.6837 7.88066C11.0805 7.48379 11.723 7.48379 12.1199 7.88066C13.978 9.73879 13.978 12.7619 12.1199 14.62L8.36992 18.37C7.46992 19.27 6.27305 19.7657 4.99992 19.7657Z'/%3E%3C/svg%3E");
}

.recipeCard__img {
    position: relative;
    display: flex;
}

.alcohol {
    font-size: 12px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px 5px;
    background-color: #fff;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: 100px;
}

.compatibility_group {
    display: flex;
    justify-content: center;
    align-items: center;
}

.compatibility_group img {
    width: 140px;
}

.brand_link_outer {
    text-align: center;
}

#player {
    position: fixed;
    inset: 0;
    background: #00000073;
    z-index: 9999;
    width: 100%;
    height: 100%;
    padding: 20px var(--inner__pdding);
    box-sizing: border-box;
}

.player__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255);
    color: #000000;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url(../../../../images/sp/choya/sarari/bg.webp);
    background-size: 50%;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.result .wrapper {
    opacity: 0;
}


@media screen and (max-width:500px) {
    .indexAbout img {
        width: clamp(12px, calc((356/ 500)*100vw), 356px);
        ;
    }

    .c-card,
    .resultTrivia__body,
    .c-recipe__card {
        padding: 10px;
    }

    .compatibility_group img {
        width: clamp(100px, calc((140/ 500)*100vw), 140px);
    }

    .recipeCard__title {
        font-size: clamp(20px, calc((24/ 500)*100vw), 24px);
    }

    footer p {
        text-align: left;
    }

    .index_sarari__description {
        flex-direction: column;
        gap: 0;
    }
}

.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading_image {
    position: relative;
    /* width: 200px; */
    /* height: 200px; */
    background: #fff;
    box-sizing: border-box;
    max-width: 600px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}




@keyframes loading-ring-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading__text {
    margin-top: 20px;
    font-weight: bold;
    font-size: 16px;
    color: var(--purple);
}

.loading__text::after {
    content: ".";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: loading-dots 1.8s steps(1, end) infinite;
}

@keyframes loading-dots {

    0%,
    32% {
        content: ".";
    }

    33%,
    65% {
        content: "..";
    }

    66%,
    100% {
        content: "...";
    }
}

.card_modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--inner__pdding);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}


.card_modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.card_modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.card_modal__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    max-height: 90dvh;
    overflow-y: auto;
}

.card_modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.age_confirm {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--inner__pdding);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.age_confirm.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.age_confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.age_confirm__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 40px 20px;
    box-sizing: border-box;
    border: 2px solid var(--red);
    border-radius: 12px;
    background: #fff;
    color: var(--color-black);
    text-align: center;
    font-weight: bold;
}

.age_confirm__close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background-color: var(--red);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.age_confirm__text,
.age_confirm__question {
    margin: 0;
}

.age_confirm__question {
    margin-top: 20px;
    font-size: 16px;
}

.age_confirm__buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.age_confirm__button {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--red);
    border-radius: 10px;
    background: #fff;
    color: var(--red);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 0 var(--red);
}

.age_confirm__button:after {
    content: "";
    width: 24px;
    height: 24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--red);
    display: block;
    right: 10px;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}


.js-age-confirm-trigger.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

body.is-modal-open {
    overflow: hidden;
}

.coution {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

.campaing__head span {
    display: inline-block;
}

.index_recipe {
    margin-top: 40px;
}

.index_recipe .c-btn {
    background-color: #fff;
}

.index__recipe__linkbtn {
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.index__recipe__linkbtn:after {
    display: inline-block;
    content: "";
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234B4B4B;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234B4B4B;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M96,0v416h416V0H96z M472,376H136V40h336V376z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3Cpolygon class='st0' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3Cpolygon class='st0' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff;
}

.index__recipe__linkbtn--outer {
    text-align: center;
}

.age_confirm__text {
    color: var(--red);
}

main.out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}