@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;800;900&display=swap');

:root {
    --font-mplus: 'M PLUS 1p', sans-serif;
}

.event-content {
    box-shadow: 0 0 0.12rem rgba(0, 0, 0, 0.25);
}

/* ----------------------------------- */
/* -- Component                     -- */
/* ----------------------------------- */

/* -- text */
.c-text--primary {
    font-size: 0.15rem;
    font-weight: var(--font-weight-black);
    color: var(--event-color-black);
}

.c-text--secondary {
    font-size: 0.11rem;
    line-height: 0.2rem;
    letter-spacing: 5%;
    color: var(--event-color-black);
    font-weight: var(--font-weight-regular);
}

/* -- title */
.c-title--primary {
    text-align: center;
    font-size: 0.25rem;
    line-height: 0.32rem;
    letter-spacing: 5%;
    font-weight: var(--font-weight-bold);
    color: var(--event-color-white);
    padding-block: 0.2rem;
    background-image: url('../img/event/ptn-red.webp');
    background-size: 100% auto;
    background-position: center;
    margin-bottom: 0.2rem;
}

.c-title--primary::first-letter {
    color: var(--event-color-yellow);
}

/* -- btn */

.c-btn.icn-r-arrow2::after {
    background: transparent;
    background-image: url('../img/event/icn-arrow2.svg');
    background-size: 0.18rem auto;
    background-position: center;
    background-repeat: no-repeat;
}

.c-btn--primary {
    background-image: url('../img/event/ptn-blue.webp');
    color: #fff;
    border-radius: 0.4rem;
    border: solid 0.03rem var(--event-color-white);
    box-shadow: 0 0.04rem 0.04rem rgba(0, 0, 0, 0.25);
    background-size: 100% auto;
    background-position: center;
}

.c-btn--primary.is-disabled {
    background-image: url('../img/event/ptn-gray.webp');
    color: var(--event-color-white-alpha50) !important;
}

.c-btn--secondary {
    display: block;
    background-image: url('../img/event/ptn-red.webp');
    background-size: 100% auto;
    background-position: center;
    border: solid 0.03rem var(--event-color-white);
    box-shadow: 0 0.04rem 0.04rem rgba(0, 0, 0, 0.25);
    font-size: 0.2rem;
    line-height: 0.25rem;
    font-weight: var(--font-weight-extrabold);
    color: var(--event-color-white);
    padding: 0 0.16rem;

    &::first-letter {
        color: var(--event-color-yellow);
    }

    &.c-btn[class*="icn-r-"] {
        padding-right: 0.6rem;
    }

    &.c-btn[class*="icn-l-"] {
        padding-left: 0.6rem;
    }

    &.c-btn[class*="icn-l-"]::before,
    &.c-btn[class*="icn-r-"]::after {
        width: 0.6rem
    }
}

.c-btn.c-btn--outline {
    color: var(--event-color-primary);
    border-color: var(--event-color-primary);
}

.c-btn.c-btn--sm[class*="icn-l-"] {
    justify-content: center;
    border-radius: 0;
    background-color: var(--event-color-black);
    color: var(--event-color-white);
    border: none;
    font-size: 0.2rem;
    font-family: var(--font-mplus);
}

/* -- note */

/* -- card */
.c-card {
    width: calc(100% - 0.23rem);
    margin: 0 auto;
    border: solid 0.01rem var(--event-color-red);
    padding: 0.14rem;
    padding-top: 0.19rem;
}

.c-card__title {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
    padding-bottom: 0.1rem;
    border: unset;
}

.c-card__title__p {
    background-color: var(--event-color-primary);
    color: var(--event-color-white);
    display: inline-block;
    padding: 0 0.2rem;
    line-height: 0.35rem;
    font-family: var(--font-mplus);
    font-weight: var(--font-weight-bold);
    letter-spacing: 5%;
    font-size: 0.2rem;
    position: relative;
}

.c-card__title__p::before,
.c-card__title__p::after {
    content: "";
    display: block;
    position: absolute;
    width: 0.07rem;
    height: 0.1rem;
    background-color: var(--event-color-white);
    top: 0;
    bottom: 0;
    margin: auto;
}

.c-card__title__p::before {
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    left: 0;
}

.c-card__title__p::after {
    clip-path: polygon(100% 0%, 100% 100%, 0 50%);
    right: 0;

}

.c-card__text {
    font-size: 0.17rem;
    font-family: var(--font-mplus);
}

.c-card__figure {
    margin: 0 auto;
}

.c-card__title--secondary {
    .c-card__title__p {
        font-size: 0.18rem;
        line-height: 0.23rem;
        background-color: var(--event-color-red);
        padding-top: 0.05rem;
        padding-bottom: 0.05rem;
        display: block;
    }

    .c-card__title__p::before,
    .c-card__title__p::after {
        content: none;
    }
}

/* -- list */

/* -- box */
.c-info-box {
    margin: 0 auto;
    border-color: var(--event-color-primary);
}

.c-info-box__text {
    font-size: 0.14rem;
    line-height: 0.27rem;
    color: var(--event-color-primary);
    padding: 0;
    padding-bottom: 0.11rem;
}

.c-info-box__note {
    padding-bottom: 0.04rem;
}

/* -- section */


/* ----------------------------------- */
/* -- Project                       -- */
/* ----------------------------------- */


/* -- common ------------------------- */
/* -- p-event-sct */
.p-event-sct {
    width: 100%;
}

.p-event-sct .l-inner {
    padding: 0;
}

/* -- hero --------------------------- */

/* -- intro -------------------------- */

/* -- lead */

/* -- auth */
.p-event-intro__auth .c-btn:nth-of-type(2) {
    margin-bottom: 0.3rem;
}

/* -- goTop */

/* -- shinkansen --------------------- */
.p-event-shinkansen__shinkansen {
    width: 100%;
    padding-left: 0.16rem;
    padding-bottom: 0.27rem;
    margin-left: 0;
}

.p-event-shinkansen .c-note {
    padding: 0;
}

/* -- voice */

/* -- quiz */

.quiz-list-button {
    display: block;
    width: 70%;
    height: 0.60rem;
    background-color: #fff;
    border: solid 0.02rem #000;
    border-radius: 0.30rem;
    margin: auto;
    font-weight: var(--font-weight-bold);
    font-size: 0.18rem;
}

.quiz-list-button.is-selected {
    background-color: #17BFF6;
    border: solid 0.02rem #17BFF6;
    border-color: #17BFF6;
    color: #fff;
}

/* -- certificate */

/* -- lottery */

/* -- cafe */


/* ---------------------------------------------------------------------------------------- */
/* -- event-content--stamprally                                                          -- */
/* ---------------------------------------------------------------------------------------- */
.event-content--stamprally {
    &::before {
        /* background-image: url(../images/bg-image04.webp); */
    }

    &.event-content {
        background-image: url('../img/bg-image03.webp');
        background-size: 30px 30px;
        background-position: center;
    }

    /* ----------------------------------- */
    /* -- Component                     -- */
    /* ----------------------------------- */

    /* -- text */
    .c-text--primary {
        font-size: 0.17rem;
        font-weight: var(--font-weight-bold);
    }

    /* -- btn */
    .c-btn--secondary.c-btn[class*="icn-r-"] {
        padding-right: 0.5rem;
    }

    /* -- note */

    /* -- card */

    /* -- list */
    .c-list--stamp {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.2rem;
    }

    .c-list--stamp__item-icon-wrapper {
        width: 0.98rem;
        height: 0.98rem;
    }

    .c-list--stamp__item-text {
        padding-top: 0.1rem;
        padding-bottom: 0;
        font-size: 0.11rem;
        letter-spacing: 0%;
        line-height: 0.1622rem;
    }

    .c-list--voice__item-title {
        font-size: 0.18rem;
        text-align: center;
        line-height: 0.3rem;
        letter-spacing: 5%;
        padding: 0;
        padding-bottom: 0.1rem;
        font-family: var(--font-mplus);
    }

    .c-list--voice__item {
        padding-bottom: 0.3rem;
    }

    .c-list--voice__item-title::before {
        content: none;
    }

    .c-list--voice .c-btn {
        font-family: var(--font-mplus);
    }

    /* -- box */

    /* -- section */


    /* ----------------------------------- */
    /* -- Project                       -- */
    /* ----------------------------------- */


    /* -- common ------------------------- */

    /* -- hero --------------------------- */

    /* -- intro -------------------------- */

    /* -- lead */

    /* -- auth */

    /* -- goTop */

    /* -- stamprally --------------------- */
    .p-event-stamprally .c-text--secondary {
        font-size: 0.15rem;
        line-height: 0.20rem;
        letter-spacing: 5%;
        font-weight: var(--font-weight-regular);
    }

    /* -- prologue */

    /* -- stamp */

    /* -- detour */

    /* -- reward */

    /* -- foot --------------------- */
}