@charset "UTF-8";

/* -- リセットCSS -- */
@media all {
    /* 1. 全要素の余白・ボーダー・フォントの初期化 */
    .event-content :where(div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video) {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* 2. HTML5 要素のブロック化（古いブラウザ互換用） */
    .event-content :where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section) {
        display: block;
    }

    /* 3. リストスタイルの除去 */
    .event-content :where(ol, ul) {
        list-style: none;
    }

    /* 4. 引用符の除去 */
    .event-content :where(blockquote, q) {
        quotes: none;

        .event-content::before,
        .event-content::after {
            content: '';
            content: none;
        }
    }

    /* 5. テーブルの境界線設定 */
    .event-content table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}

/* -- 共通スタイル -- */
:root {

    --event-color-primary: #CB95FF;
    --event-color-secondary: #80579E;
    --event-color-accent:#EF5D49;
    --event-color-black: #000000;
    --event-color-gray: #585858;
    --event-color-gray2: #D2CDC0;
    --event-color-gray3: #B2B2B2;
    --event-color-gray4: #D9D9D9;
    --event-color-white: #FFFFFF;
    --event-color-white-alpha60: #FFFFFF99;
    --event-color-blue: #0D00FF;
    --event-color-green: #DEF89B;

    --font-family: 'Noto Sans JP', sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;



    --design-width-sp: 393;
    --content-width-pc: 430;
    --content-width: calc(var(--content-width-pc) * 1px);
    --rem-ratio: calc(var(--design-width-sp) / 100); /* 100px = 1rem にするための除数 (393 / 100) */

    /* 【PCデフォルト】: 430px基準で固定 (430 / 3.93 = 109.41....px) */
    font-size: calc(var(--content-width-pc) * 1px / var(--rem-ratio));
}
@media screen and (max-width: 430px) {
    :root {
        --content-width: 100vw;
        
        /* SP: 750px基準で100px = 1rem */
        font-size: calc(100vw / var(--rem-ratio));
    }
}

body {
    font-size: 0.16rem;
}

.event-content {
    max-width: var(--content-width);
    width: 100%;
    font-family: var(--font-family);
    font-size: 0.16rem;
    margin-inline: auto;
    background-image: url('../images/bg-image02.webp');
    background-size: 56px 56px;
    background-position: center;
}

.event-content img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

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


/* -- common --------------------------- */
/* -- p-event-sct */
.p-event-sct {
    width: calc(100% - 26px);
    margin: 0 auto;
}
.p-event-sct .l-inner {
    background-color: var(--event-color-white-alpha60);
    border-radius: 0.1rem;
    padding-inline: 0.13rem;
    padding-top: 0.32rem;
    padding-bottom: 0.15rem;
}


/* -- hero --------------------------- */
.p-event-hero {
    padding-bottom: 0.09rem;
}

/* -- intro -------------------------- */
.p-event-intro {
    padding: 0 0.16rem;
}
/* -- lead */
.p-event-intro__lead .c-text--lead {
    padding-bottom: 0.2rem;
}
/* -- auth */
.p-event-intro__auth .c-note {
    padding-bottom: 0.22rem;
}
.p-event-intro__auth .c-btn:nth-of-type(1) {
    margin-bottom: 0.08rem;
}
.p-event-intro__auth .c-btn:nth-of-type(2) {
    margin-bottom: 0.18rem;
}

/* -- goTop */
.p-event-intro__goTop .c-btn {
    margin-bottom: 0.08rem;
}
.p-event-intro__goTop .c-note {
    padding-bottom: 0.28rem;
}

/* -- shinkansen --------------------- */
.p-event-shinkansen {
    margin-bottom: 0.2rem;
}
.p-event-shinkansen__title {
    width: 2.03rem;
    margin: 0 auto;
    padding-bottom: 0.14rem;
}
.p-event-shinkansen__shinkansen {
    width: calc(100% + 0.26rem);
    margin-left: -0.13rem;
    padding-left: 0.07rem;
    padding-bottom: 0.2rem;
}
.p-event-shinkansen .c-text--primary {
    padding-bottom: 0.12rem;
}
.p-event-shinkansen .c-btn {
    margin-bottom: 0.1rem;
}
.p-event-shinkansen .c-note {
    padding-bottom: 0.33rem;
}

/* -- wallpaper */
.p-event-shinkansen__wallpaper {
    margin-bottom: 0.23rem;
}
.p-event-shinkansen__wallpaper .p-event-shinkansen__btn-create {
    margin-bottom: 0.1rem;
}
.p-event-shinkansen__wallpaper .c-note--secondary {
    margin-bottom: 0.15rem;
}
.p-event-shinkansen__wallpaper .p-event-shinkansen__btn-list {
    margin-bottom: 0.05rem;
}

/* -- certificate */
.p-event-shinkansen__certificate .c-card__text {
    margin-inline: -0.02rem;
}
.p-event-shinkansen__certificate .c-info-box {
    margin-bottom: 0.15rem;
}
.p-event-shinkansen__certificate .c-note {
    padding-bottom: 0;
}
.p-event-shinkansen__certificate .c-note__item {
    font-size: 0.11rem;
}

/* -- camera ------------------------- */
.p-event-camera__title {
    width: 1.92rem;
}

/* -- stamp -------------------------- */
.p-event-stamp.c-section--primary {
    margin-bottom: 0.4rem;
}
.p-event-stamp__title {
    width: 3.27rem;
}


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

/* -- text */
.c-text--lead {
    font-size: 0.19rem;
    line-height: 0.29rem;
    text-align: center;
    font-weight: var(--font-weight-extrabold);
}

.c-text--primary {
    text-align: center;
    font-size: 0.18rem;
    line-height: 0.25rem;
    letter-spacing: 5%;
    font-weight: var(--font-weight-bold);
    color: var(--event-color-secondary);
}

.c-text--secondary {
    text-align: center;
    font-size: 0.17rem;
    line-height: 0.25rem;
    letter-spacing: 5%;
    font-weight: var(--font-weight-black);
    color: var(--event-color-secondary);
}

/* -- btn */
.c-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    width: 100%;
    height: 0.8rem;
    border-radius: 0.1rem;
    border: solid 0.02rem;
    font-size: 0.2rem;
    line-height: 0.3rem;
    padding: 0 0.32rem;
    font-weight: var(--font-weight-bold);
}

.c-btn.c-btn--outline {
    background-color: var(--event-color-white);
}

.c-btn.c-btn--sm {
    height: 0.6rem;
}
.c-btn.c-btn--extra {
    font-weight: var(--font-weight-black);
    letter-spacing: 5%;
}

.c-btn[class*="icn-l-"] {
    padding-left: 0.76rem;
}
.c-btn[class*="icn-r-"] {
    padding-right: 0.76rem;
}
.c-btn[class*="icn-l-"]::before,
.c-btn[class*="icn-r-"]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.76rem;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    mask-position: center;
}
.c-btn[class*="icn-l-"]::before {
    left: 0;
}
.c-btn[class*="icn-l-"]::after {
    right: 0;
}

.c-btn.icn-l-user::before {
    -webkit-mask-image: url('../images/icn-user.svg');
    mask-image: url('../images/icn-user.svg');
    -webkit-mask-size: 0.24rem auto;
    mask-size: 0.24rem auto;
}
.c-btn.icn-l-lock::before {
    -webkit-mask-image: url('../images/icn-lock.svg');
    mask-image: url('../images/icn-lock.svg');
    -webkit-mask-size: 0.18rem auto;
    mask-size: 0.18rem auto;
}
.c-btn.icn-l-speed::before {
    -webkit-mask-image: url('../images/icn-speed.svg');
    mask-image: url('../images/icn-speed.svg');
    -webkit-mask-size: 0.32rem auto;
    mask-size: 0.32rem auto;
}
.c-btn.icn-l-download::before {
    -webkit-mask-image: url('../images/icn-download.svg');
    mask-image: url('../images/icn-download.svg');
    -webkit-mask-size: 0.18rem auto;
    mask-size: 0.18rem auto;
}
.c-btn.icn-l-list::before {
    -webkit-mask-image: url('../images/icn-list.svg');
    mask-image: url('../images/icn-list.svg');
    -webkit-mask-size: 0.2689rem auto;
    mask-size: 0.2689rem auto;
}
.c-btn.icn-l-gift::before {
    -webkit-mask-image: url('../images/icn-gift.svg');
    mask-image: url('../images/icn-gift.svg');
    -webkit-mask-size: 0.24rem auto;
    mask-size: 0.24rem auto;
}
.c-btn.icn-l-camera::before {
    -webkit-mask-image: url('../images/icn-camera.svg');
    mask-image: url('../images/icn-camera.svg');
    -webkit-mask-size: 0.2489rem auto;
    mask-size: 0.2489rem auto;
}
.c-btn.icn-l-qr::before {
    -webkit-mask-image: url('../images/icn-qr.svg');
    mask-image: url('../images/icn-qr.svg');
    -webkit-mask-size: 0.2225rem auto;
    mask-size: 0.2225rem auto;
}
.c-btn.icn-r-arrow::after {
    -webkit-mask-image: url('../images/icn-arrow.svg');
    mask-image: url('../images/icn-arrow.svg');
    -webkit-mask-size: 0.26rem auto;
    mask-size: 0.26rem auto;
}

/* -- note */
.c-note__item {
    position: relative;
    padding-left: 1em;
    font-size: 0.12rem;
    line-height: 0.2rem;
    letter-spacing: 5%;
}
.c-note__item::before {
    content: '※';
    position: absolute;
    left: 0;
}
.c-note__item a {
    color: var(--event-color-blue);
    text-decoration: underline;
}

.c-note--secondary {
    text-align: center;
}
.c-note--secondary__item {
    font-size: 0.12rem;
    line-height: 0.2rem;
    letter-spacing: 5%;
}
.c-note--secondary__item::before {
    content: '※';
}

/* -- card */
.c-card {
    background-color: var(--event-color-white);
    border-radius: 0.1rem;
    padding-inline: 0.1rem;
    padding-top: 0.21rem;
    padding-bottom: 0.20rem;
}
.c-card__title {
    width: calc(100% - 0.08rem);
    margin: 0 auto;
    font-size: 0.22rem;
    line-height: 0.3rem;
    font-weight: var(--font-weight-black);
    text-align: center;
    color: var(--event-color-secondary);
    padding-bottom: 0.12rem;
    border-bottom: solid 0.02rem var(--event-color-gray2);
    margin-bottom: 0.18rem;
}
.c-card__text {
    font-size: 0.18rem;
    line-height: 0.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--event-color-gray);
    text-align: center;
    padding-bottom: 0.1rem;
}
.c-card__note {
    text-align: center;
    padding-bottom: 0.14rem;
}
.c-card__note-item {
    font-size: 0.12rem;
    line-height: 0.2rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: 5%;
}
.c-card__note-item::before {
    content: '※';
}

.c-card--secondary {
    background-color: var(--event-color-white);
    border-radius: 0.1rem;
    padding: 0.44rem 0.19rem 0.11rem;
    position: relative;
}
.c-card--secondary__title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* -- list */
.c-list--wallpaper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.30rem 0.23rem;
}
.c-list--wallpaper__item {
    position: relative;
}

.c-list--stamp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0.17rem;
}
.c-list--stamp.c-list--stamp--col3 {
    grid-template-columns: repeat(3, 1fr);
}
.c-list--stamp__item-icon-wrapper {
    margin: 0 auto;
    width: 0.66rem;
    height: 0.66rem;
    border-radius: 50%;
    background-color: var(--event-color-gray3);
    overflow: hidden;
}
.c-list--stamp__item-icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.c-list--stamp__item-text {
    font-weight: var(--font-weight-bold);
    font-size: 0.12rem;
    line-height: 0.18rem;
    padding-block: 0.035rem;
    letter-spacing: 5%;
    text-align: center;
}
.c-list--stamp__item.is-gotten {
    .c-list--stamp__item-icon-wrapper {
        background-image: url(../images/bg-image03.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* -- box */
.c-info-box {
    border: solid 0.01rem var(--event-color-secondary);
}
.c-info-box__title {
    font-size: 0.2rem;
    line-height: 0.25rem;
    font-weight: var(--font-weight-black);
    padding-block: 0.11rem;
    text-align: center;
    letter-spacing: 5%;
    color: var(--event-color-secondary);
    border-bottom: solid 0.01rem var(--event-color-secondary);
}
.c-info-box__text {
    font-size: 0.17rem;
    line-height: 0.23rem;
    padding-block: 0.09rem;
    text-align: center;
    color: var(--event-color-gray);
    font-weight: var(--font-weight-bold);
    letter-spacing: 6%;
}
.c-info-box__note {
    width: calc(100% - 0.24rem);
    margin: 0 auto;
}
.c-info-box__note-item {
    font-size: 0.12rem;
    line-height: 0.20rem;
    letter-spacing: 5%;
    font-weight: var(--font-weight-regular);
    padding-bottom: 0.06rem;
}
.c-info-box__note-item::before {
    content: '※';
}

/* -- section */
.c-section--primary {
    margin-bottom: 0.2rem;
}
.c-section--primary__title {
    margin: 0 auto;
    padding-bottom: 0.14rem;
}
.c-section--primary__text {
    font-size: 0.16rem;
    padding-bottom: 0.09rem;
}
.c-section--primary__duration {
    padding-bottom: 0.2rem;
}
.c-section--primary__btn {
    margin-bottom: 0.11rem;
}