@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
    --font-NotoSerif: 'Noto Serif JP', serif;
}


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

/* -- text */
.c-text--lead {
    font-family: var(--font-NotoSerif);
    font-size: 0.18rem;
    line-height: 0.26rem;
    text-align: center;
    font-weight: var(--font-weight-medium);
}


/* -- btn */
.c-btn {
    font-family: var(--font-NotoSerif);
    font-size: 0.20rem;
    line-height: 0.29rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
    padding: 0.12rem 0.24rem;
    border: none;
    cursor: pointer;
    background-color: var(--event-color-primary);
    color: var(--event-color-white);
}

.c-btn--event1 {
    background-color: var(--event-color-purple);
    line-height: 0.25rem;
    letter-spacing: 5%;
    background-image: url(../images/c-btn-event1-bg.png);
    background-size: 3.49rem auto;
    background-position: center;
    background-repeat: no-repeat;
}

/* -- note */
.c-note__item a {
    color: var(--event-color-primary);
}

/* -- card */
.c-card {
    padding-inline: 0;
    padding-top: 0;
}
.c-card__title {
    width: 100%;
    text-align: center;
    padding-bottom: 0.055rem;
    margin-bottom: 0.12rem;
    border-bottom: solid 0.01rem var(--event-color-gold2);
}
.c-card__title-text {
    position: relative;
    display: inline-block;
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-bold);
    font-size: 0.22rem;
    line-height: 0.30rem;
    letter-spacing: 5%;
}
.c-card__title-text::before,
.c-card__title-text::after {
    content: '◆';
    color: var(--event-color-gold2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.15rem;
}
.c-card__title-text::before {
    left: -1.5em;
}
.c-card__title-text::after {
    right: -1.5em;
}

.c-card__subtitle {
    font-family: var(--font-NotoSerif);
    font-size: 0.18rem;
    line-height: 0.30rem;
    text-align: center;
    letter-spacing: 5%;
    font-weight: var(--font-weight-bold);
    padding-top: 0.12rem;
    padding-bottom: 0.08rem;
}

.c-card__text {
    font-family: var(--font-NotoSerif);
    font-size: 0.16rem;
    line-height: 0.25rem;
    text-align: center;
    letter-spacing: 5%;
    font-weight: var(--font-weight-medium);
    padding-bottom: 0.13rem;
}
.c-card__text span {
    font-size: 0.18rem;
    color: var(--event-color-primary);
}
.c-card__text--secondary {
    font-weight: var(--font-weight-medium);
    font-size: 0.18rem;
    line-height: 0.25rem;
    letter-spacing: 5%;
    text-align: center;
}
.c-card__text--secondary a {
    color: var(--event-color-secondary);
    text-decoration: underline;
}
.c-card--event1 {
    position: relative;
    background-color: var(--event-color-green);
    padding: 0.38rem 0.2rem 0.33rem;
}
.c-card--event1::before,
.c-card--event1::after {
    content: "";
    position: absolute;
    width: 3rem;
    aspect-ratio: 300 / 61;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    right: 0;
    margin: auto;
}
.c-card--event1::before {
    top: 0.1rem;
    background-image: url(../images/c-card-event1-before.png);
}
.c-card--event1::after {
    bottom: 0.15rem;
    background-image: url(../images/c-card-event1-after.png);
}
.c-card--event1__title {
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-bold);
    font-size: 0.21rem;
    line-height: 0.21rem;
    text-align: center;
    color: var(--event-color-secondary);
    padding-bottom: 0.16rem;
}
.c-card--event1__subtitle { 
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-bold);
    font-size: 0.19rem;
    line-height: 0.30rem;
    text-align: center;
    padding-bottom: 0.05rem;;
}
.c-card--event1__subtitle small {
    font-size: 0.14rem;
}
.c-card--event1__subtitle.c-card--event1__subtitle--green {
    color: var(--event-color-primary);
}
.c-card--event1__subtitle.c-card--event1__subtitle--purple {
    color: var(--event-color-purple);
}
.c-card--event1__list {
    display: grid;
    column-gap: 0.07rem;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 0.03rem;
}
.c-card--event1__item-caption {
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-bold);
    font-size: 0.105rem;
    line-height: 0.157rem;
    letter-spacing: 0%;
    text-align: center;
}
.c-card--event1__note {
    font-size: 0.13rem;
    line-height: 0.30rem;
    letter-spacing: 5%;
    text-align: center;
    padding-top: 0.12rem;
}


.c-card--event2 {
    position: relative;
    background-color: var(--event-color-purple2);
    padding: 0.38rem 0.2rem 0.74rem;
}
.c-card--event2::before,
.c-card--event2::after {
    content: "";
    position: absolute;
    width: 3rem;
    aspect-ratio: 300 / 61;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    right: 0;
    margin: auto;
}
.c-card--event2::before {
    top: 0.1rem;
    background-image: url(../images/c-card-event2-before.png);
}
.c-card--event2::after {
    bottom: 0.15rem;
    background-image: url(../images/c-card-event2-after.png);
}
.c-card--event2__title {
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-bold);
    font-size: 0.21rem;
    line-height: 0.21rem;
    text-align: center;
    color: var(--event-color-purple);
    padding-bottom: 0.12rem;
}
.c-card--event2__text {
    font-family: var(--font-NotoSerif);
    font-weight: var(--font-weight-medium);
    font-size: 0.15rem;
    line-height: 0.25rem;
    letter-spacing: 5%;
    text-align: center;
    padding-bottom: 0.29rem;
}
.c-card--event2__list {
    width: 2.7rem;
    margin: 0 auto;
    display: grid;
    column-gap: 0.0817rem;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 0.03rem;
}
.c-card--event2__note {
    font-size: 0.13rem;
    line-height: 0.30rem;
    letter-spacing: 5%;
    text-align: center;
    padding-top: 0.09rem;
}

/* -- list */
.c-list {
    font-family: var(--font-NotoSerif);
}

/* -- box */

/* -- section */


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


/* -- common ------------------------- */
/* -- p-event-sct */
.p-event-sct .l-inner {
    border-radius: 0.2rem;
    padding-inline: 0.15rem;
    padding-top: 0;
    background-color: var(--event-color-white);
    border: solid 0.01rem var(--event-color-gold);
}

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

/* -- intro -------------------------- */
.p-event-intro .c-btn.c-btn--sm[class*="icn-l-"] {
    justify-content: center;
    font-size: 0.2rem;
}

/* -- lead */

/* -- auth */

/* -- goTop */
.p-event-intro__goTop .c-btn--event1 {
    margin-bottom: 0.17rem;
}
.p-event-intro__goTop .c-note {
    padding-bottom: 0.51rem;
}

/* -- shinkansen --------------------- */
.p-event-shinkansen__title {
    width: calc(100% + 0.32rem);
    margin-top: -0.01rem;
    margin-left: -0.16rem;;
    background-image: url(../images/p-event-shinkansen__title.png);
    background-size: 3.4rem auto;
    background-position: center 0.096rem;
    background-repeat: no-repeat;
    background-color: var(--event-color-primary);
    text-align: center;
    font-family: var(--font-NotoSerif);
    font-size: 0.24rem;
    font-weight: var(--font-weight-bold);
    line-height: 0.30rem;
    letter-spacing: 5%;
    color: var(--event-color-white);
    padding-top: 0.38rem;
    padding-bottom: 0.26rem;
    border-radius: 0.2rem 0.2rem 0 0;
}
.p-event-shinkansen__shinkansen {
    width: calc(100% + 0.3rem);
    margin-left: -0.15rem;
    padding-left: 0.13rem;
    padding-top: 0.11rem;
    padding-bottom: 0.16rem;
}

/* -- voice */
.p-event-shinkansen__voice .c-card {
    padding-bottom: 0.6rem;
}

/* -- quiz */
.p-event-shinkansen__quiz .c-card__text {
    padding-bottom: 0.24rem;
}
.p-event-shinkansen__quiz .c-btn--ssm {
    background-color: var(--event-color-secondary);
    margin-top: 0.15rem;
    margin-bottom: 0.2rem;
}

/* -- certificate */
.p-event-shinkansen__certificate .c-card {
    padding-bottom: 0.7rem;
}
.p-event-shinkansen__certificate .c-card__text {
    padding-bottom: 0.24rem;
}
.p-event-shinkansen__certificate .c-list {
    margin-bottom: 0.25rem;
}
.p-event-shinkansen__certificate .c-info-box {
    margin-bottom: 0.2rem;
}
.p-event-shinkansen__certificate .c-btn {
    margin-bottom: 0.2rem;
}

/* -- lottery */
.p-event-shinkansen__lottery .c-card {
    padding-bottom: 0.25rem;
}
.p-event-shinkansen__lottery .c-card__subtitle {
    padding-bottom: 0.16rem;
}
.p-event-shinkansen__lottery .c-card__text {
    font-size: 0.14rem;
}
.p-event-shinkansen__lottery .c-card__text span {
    font-size: 0.16rem;
}
.p-event-shinkansen__lottery .c-btn--ssm {
    background-color: var(--event-color-secondary);
    margin-block: 0.16rem;
    font-size: 0.15rem;
}

/* -- cafe */
.p-event-shinkansen__cafe .c-card {
    padding-bottom: 0;
}
.p-event-shinkansen__cafe .c-card__text {
    font-size: 0.14rem;;
    padding-bottom: 0.22rem;
}
.p-event-shinkansen__cafe .c-note--secondary {
    padding-bottom: 0.21rem;
    text-align: left;
}
.p-event-shinkansen__cafe .c-note--secondary__item {
    padding-left: 1em;
    position: relative;
}
.p-event-shinkansen__cafe .c-note--secondary__item::before {
    content: "※";
    position: absolute;
    left: 0;
}
.p-event-shinkansen__cafe .c-note--secondary__item:first-child {
    color: var(--event-color-black);
}
.p-event-shinkansen__cafe .c-card--event1 {
    margin-bottom: 0.14rem;
}
.p-event-shinkansen__cafe .c-info-box {
    margin-bottom: 0.2rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(2) {
    padding-top: 0.14rem;
    padding-bottom: 0.06rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(3) {
    padding-bottom: 0.16rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(4) {
    padding-top: 0;
    padding-bottom: 0.06rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(5) {
    padding-bottom: 0.11rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(6) {
    padding-bottom: 0.06rem;
}
.p-event-shinkansen__cafe .c-info-box div:nth-of-type(7) {
    padding-bottom: 0.9rem;
}
.p-event-shinkansen__cafe .c-btn {
    margin-bottom: 0.24rem;
}
.p-event-shinkansen__cafe .c-note {
    padding-bottom: 0;
}
.p-event-shinkansen__cafe .c-note__item {
    font-size: 0.11rem;
}



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

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

    /* -- text */

    /* -- btn */

    /* -- note */
    .c-note__item a {
        color: var(--event-color-blue);
    }

    /* -- card */

    /* -- list */

    /* -- box */

    /* -- section */


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


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

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

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

    /* -- lead */

    /* -- auth */

    /* -- goTop */
    .p-event-intro__goTop .c-btn--event1 {
        background-color: var(--event-color-primary);
    }

    /* -- shinkansen --------------------- */
    .p-event-shinkansen__title {
        background-color: var(--event-color-purple);
    }

    /* -- prologue */
    .p-event-shinkansen__prologue {
        padding-top: 0.26rem;
    }
    .p-event-shinkansen__prologue .c-card__text {
        width: calc(100% + 0.04rem);
        margin-left: -0.02rem;
        padding-bottom: 0.1rem;
    }

    /* -- stamp */
    .p-event-shinkansen__stamp .c-card {
        padding-bottom: 0.05rem;
    }
    .p-event-shinkansen__stamp .c-card__title {
        margin-bottom: 0.22rem;
    }
    .p-event-shinkansen__stamp .c-list--stamp {
        margin-bottom: 0.17rem;
    }
    .p-event-shinkansen__stamp .c-list--stamp__item-text {
        font-family: var(--font-NotoSerif);
    }
    .p-event-shinkansen__stamp .c-btn--outline {
        color: var(--event-color-purple);
        border-color: var(--event-color-purple);
        font-family: var(--font-family);
        margin-bottom: 0.32rem;
    }
    .p-event-shinkansen__stamp .c-list--voice__item-title {
        font-family: var(--font-NotoSerif);
    }
    .p-event-shinkansen__stamp .c-list--voice .c-btn {
        background-color: var(--event-color-purple);
    }

    /* -- detour */
    .p-event-shinkansen__detour .c-card__title {
        border-top: solid 0.01rem var(--event-color-gold2);
        border-bottom: none;
        padding-top: 0.13rem;
        padding-bottom: 0.13rem;
        margin-bottom: 0;
    }
    .p-event-shinkansen__detour .c-card__text {
        padding-bottom: 0.36rem;
    }
    .p-event-shinkansen__detour .c-btn__label {
        font-family: var(--font-NotoSerif);
    }
    .p-event-shinkansen__detour .c-btn {
        background-color: var(--event-color-purple);
        margin-bottom: 0.02rem;
    }

    /* -- reward */
    .p-event-shinkansen__reward .c-card--event2 {
        margin-bottom: 0.21rem;
    }
    .p-event-shinkansen__reward .c-info-box {
        border-color: var(--event-color-purple);
        margin-bottom: 0.2rem;
    }
    .p-event-shinkansen__reward .c-info-box__title {
        border-bottom-color: var(--event-color-purple);
        color: var(--event-color-purple);
    }
    .p-event-shinkansen__reward .c-info-box__text {
        padding-top: 0.1rem;
        padding-bottom: 0.15rem;
    }
    .p-event-shinkansen__reward .c-info-box__note {
        padding-bottom: 0.1rem;
    }
    .p-event-shinkansen__reward .c-btn--sm {
        font-size: 0.18rem;
        margin-bottom: 0.07rem;
        background-color: var(--event-color-secondary);
    }
    .p-event-shinkansen__reward .c-note--secondary {
        padding-bottom: 0.17rem
    }
    .p-event-shinkansen__reward .c-note--secondary__item {
        font-size: 0.11rem;
    }
    .p-event-shinkansen__reward .c-note--secondary__item::before {
        content: no-close-quote;
    }
    .p-event-shinkansen__reward .c-note {
        padding-bottom: 0.26rem;
    }
    .p-event-shinkansen__reward .c-note__item {
        font-size: 0.11rem;
    }

    /* -- foot --------------------- */
    .p-event-foot {
        padding: 0.07rem 0.165rem 0.3rem;
    }
    .p-event-foot .c-btn {
        background-color: var(--event-color-primary);
    }
}