@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: #ffffff;
    --event-color-secondary: #FE3600;
    --event-color-accent:#FC0B0F;
    --event-color-disabled: #B2B2B2;
    --event-color-disabled-text: #E0DEDE;
    --event-color-black: #000000;
    --event-color-white: #FFFFFF;
    --event-color-gray: #D2D2D2;

    --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.webp');
    background-size: 100% auto;
    background-position: left top;
}

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

/* ----------------------------------- */
/* -- 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);
}


/* -- title */
.c-title {
    text-align: center;
    font-size: 0.18rem;
    font-weight: var(--font-weight-black);
    line-height: 0.36rem;
    letter-spacing: 5%;
    padding-block: 0.12rem;
}


/* -- 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__label {
    font-weight: var(--font-weight-bold);
    font-size: 0.2rem;
    line-height: 0.29rem;
    letter-spacing: 7%;
}

.c-btn.c-btn--outline {
    background-color: var(--event-color-white);
    color: var(--event-color-secondary) ;
    border: solid 0.02rem var(--event-color-secondary);
}

.c-btn.c-btn--sm {
    height: 0.6rem;
}
.c-btn.c-btn--ssm {
    height: 0.5rem;
}
.c-btn.c-btn--tsm {
    font-size: 0.14rem;
    line-height: 0.17rem;
}
.c-btn.c-btn--extra {
    font-weight: var(--font-weight-black);
    letter-spacing: 5%;
}
.c-btn--primary.is-disabled {
    background-color: var(--event-color-disabled) !important;
    color: var(--event-color-disabled-text) !important;
}
.c-btn.c-btn--finished {
    max-width: 2rem;
    height: 0.7rem;
    margin: 0 auto;
    font-weight: var(--font-weight-extrabold);
    font-size: 0.25rem;
    letter-spacing: 5%;
    padding: 0;
    cursor: none;
    pointer-events: none;
    color: var(--event-color-primary);
    border: solid 0.05rem;
    background-color: var(--event-color-white);
}
.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.c-btn--sm[class*="icn-l-"] {
    padding-left: 0.64rem;
    font-size: 0.16rem;
    justify-content: flex-start;
}
.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-l-voice::before {
    -webkit-mask-image: url('../images/icn-voice.svg');
    mask-image: url('../images/icn-voice.svg');
    -webkit-mask-size: 0.3rem auto;
    mask-size: 0.3rem auto;
}
.c-btn.icn-l-movie::before {
    -webkit-mask-image: url('../images/icn-movie.svg');
    mask-image: url('../images/icn-movie.svg');
    -webkit-mask-size: 0.22rem auto;
    mask-size: 0.22rem auto;
}
.c-btn.icn-l-lottery::before {
    -webkit-mask-image: url('../images/icn-lottery.svg');
    mask-image: url('../images/icn-lottery.svg');
    -webkit-mask-size: 0.27rem auto;
    mask-size: 0.27rem auto;
}
.c-btn.icn-l-map::before {
    -webkit-mask-image: url('../images/icn-map.svg');
    mask-image: url('../images/icn-map.svg');
    -webkit-mask-size: 0.24rem auto;
    mask-size: 0.24rem auto;
}
.c-btn.icn-l-pin::before {
    -webkit-mask-image: url('../images/icn-pin.svg');
    mask-image: url('../images/icn-pin.svg');
    -webkit-mask-size: 0.24rem auto;
    mask-size: 0.24rem auto;
}
.c-btn.icn-l-reset::before {
    -webkit-mask-image: url('../images/icn-reset.svg');
    mask-image: url('../images/icn-reset.svg');
    -webkit-mask-size: 0.24rem auto;
    mask-size: 0.24rem 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: '※';
}
.c-note--secondary.c-note--red {
    color: var(--event-color-accent);
}

/* -- 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;
    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-black);
    text-align: center;
    padding-bottom: 0.1rem;
}
.c-card__text span {
    font-size: 0.2rem;
    color: var(--event-color-primary);
    font-weight: var(--font-weight-black);
}
.c-card__image {
    width: 1.54rem;
    margin: 0 auto;
    height: 3.56rem;
    padding-bottom: 0.22rem;
}
.c-card__note {
    text-align: center;
    padding-bottom: 0.14rem;
}
.c-card__note-item {
    font-size: 0.1rem;
    line-height: 0.15rem;
    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 {
    text-align: center;
    border-bottom: solid 0.01rem var(--event-color-primary);
}
.c-list__title {
    font-size: 0.2rem;
    font-weight: var(--font-weight-bold);
    line-height: 0.33rem;
    color: var(--event-color-primary);
    border-top: solid 0.01rem var(--event-color-primary);
    padding-block: 0.09rem;;
    letter-spacing: 9%;
}
.c-list__item {
    font-weight: var(--font-weight-bold);
    font-size: 0.17rem;
    line-height: 0.27rem;
    letter-spacing: 4%;
    padding-bottom: 0.09rem;
}

.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%;
    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;
    }
}

.c-list--voice {
    counter-set: cnt 0;
}
.c-list--voice__item {
    position: relative;
    counter-increment: cnt;
    padding-bottom: 0.15rem;
}
.c-list--voice__item-title {
    font-weight: var(--font-weight-bold);
    font-size: 0.2rem;
    line-height: 0.3rem;
    letter-spacing: 7%;
    padding-left: 1.2em;
    padding-bottom: 0.05rem;
}
.c-list--voice__item-title::before {
    content: counter(cnt)".";
    position: absolute;
    left: 0;
}
.c-list--voice__item-title span {
    font-size: 0.17rem;;
}
.c-list--voice__item-title span {
    font-size: 0.17rem;;
}
.c-list--voice__item-title small {
    font-size: 0.14rem;
}
.c-list--voice__item-title .note {
    font-size: 0.11rem;;
}
.c-list--voice .c-btn {
    margin-bottom: 0.05rem;
}
.c-list--voice__item-text {
    font-family: Noto Sans JP;
    font-weight: var(--font-weight-regular);
    font-size: 0.15rem;
    line-height: 0.3rem;
    letter-spacing: 5%;
    text-align: center;
}

.c-list--camera {
    display: grid;
    row-gap: 0.15rem;
}
.c-list--camera__item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    column-gap: 0.17rem;
    background-color: var(--event-color-white);
    border-radius: 0.16rem;
    box-shadow: 0 0.02rem 0 #00000040;
    padding: 0.2rem;
    text-align: center;
    cursor: pointer;
}
.c-list--camera__figure {
    grid-row: 1/4;
}
.c-list--camera__img.c-list--camera__img--disabled {
    display: none;
}
.c-list--camera__title {
    font-size: 0.19rem;
    line-height: 0.25rem;
    font-weight: var(--font-weight-black);
    color: var(--event-color-secondary);
    letter-spacing: 5%;
    padding-bottom: 0.06rem;
    padding-top: 0.055rem;
}
.c-list--camera__text {
    font-size: 0.1rem;
    line-height: 0.14rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 5%;
    padding-bottom: 0.06rem;
}
.c-list--camera__text span{
    color: var(--event-color-secondary);
}
.c-list--camera__text2 {
    padding-bottom: 0.055rem;
}
.c-list--camera__text2 p {
    display: inline-block;
    font-size: 0.1rem;
    line-height: 0.14rem;
    font-weight: var(--font-weight-bold);
    background-color: var(--event-color-primary);
    color: var(--event-color-white);
    padding: 0.04rem 0.09rem;
    border-radius: 0.12rem;
}

.c-list--camera__item.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.c-list--camera__item.is-disabled .c-list--camera__img--enabled {
    display: none;
}
.c-list--camera__item.is-disabled .c-list--camera__img--disabled {
    display: block;
}

.c-list--chooseWallpaper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.2rem;
}
.c-list--chooseWallpaper__figure {
    text-align: center;
}
.c-list--chooseWallpaper__img {
    margin-bottom: 0.1rem;
}
.c-list--chooseWallpaper__caption {
    text-align: center;
    font-size: 0.12rem;
    line-height: 0.2rem;
    display: inline-block;
    font-weight: var(--font-weight-bold);
}


/* -- box */
.c-info-box {
    border: solid 0.01rem var(--event-color-primary);
}
.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-primary);
    border-bottom: solid 0.01rem var(--event-color-primary);
}
.c-info-box__place {
    font-weight: var(--font-weight-bold);
    font-size: 0.2rem;
    line-height: 0.3rem;
    letter-spacing: 6%;
    text-align: center;
    padding-top: 0.1rem;
}
.c-info-box__time {
    font-weight: var(--font-weight-bold);
    font-size: 0.18rem;
    line-height: 0.27rem;
    letter-spacing: 6%;
    text-align: center;
    padding-bottom: 0.01rem;
}
.c-info-box__text {
    font-size: 0.17rem;
    line-height: 0.23rem;
    padding-block: 0.09rem;
    text-align: center;
    color: var(--event-color-black);
    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 */


/* -- modal */
.c-modal {
    display: none;
}
.c-modal .l-inner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.c-modal__confirm {
    width: 2.95rem;
    background-color: var(--event-color-white);
    padding-block: 0.58rem 0.44rem;
    text-align: center;
}
.c-modal__text {
    font-weight: var(--font-weight-black);
    font-size: 0.16rem;
    line-height: 0.19rem;
    padding-bottom: 0.24rem;
}
.c-modal__note {
    font-weight: var(--font-weight-regular);
    font-size: 0.15rem;
    line-height: 0.25rem;
    letter-spacing: 5%;
    padding-bottom: 0.19rem;
}
.c-modal__note::before {
    content: "※";
}
.c-modal__btns {
    display: flex;
    justify-content: center;
    gap: 0.22rem;
}
.c-modal__btns--yes,
.c-modal__btns--no {
    font-size: 0.18rem;
    font-weight: var(--font-weight-bold);
    line-height: 100%;
    letter-spacing: 13%;
    text-align: center;
    height: 0.57rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: none;
    color: var(--event-color-white);
    box-shadow: unset !important;
}
.c-modal__btns--yes {
    width: 0.75rem;
    background-color: var(--event-color-primary);
}
.c-modal__btns--no {
    width: 0.99rem;
    background-color: var(--event-color-gray3);
}


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


/* -- common --------------------------- */
/* -- p-event-sct */
.p-event-sct {
    width: calc(100% - 0.26rem);
    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.27rem;
}

/* -- intro -------------------------- */
.p-event-intro {
    padding: 0 0.16rem;
}
.p-event-intro .c-btn.c-btn--sm[class*="icn-l-"] {
    font-size: 0.2rem;
}
/* -- lead */
.p-event-intro__lead .c-text--lead {
    padding-bottom: 0.2rem;
}
/* -- auth */
.p-event-intro__auth .c-note {
    padding-bottom: 0.27rem;
}
.p-event-intro__auth .c-btn {
    background-color: var(--event-color-secondary);
    font-family: var(--font-family);
    color: var(--event-color-white);
    justify-content: center !important;
}
.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.30rem;
}

/* -- 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 {
    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;
}

/* -- wallpaper */
.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;
}

/* -- lottery */
.p-event-shinkansen__lottery .c-note {
    width: calc(100% + 0.5em);
}
.p-event-shinkansen__lottery .c-note__item {
    font-size: 0.11rem;
}

/* -- cafe */

/* -- 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;
}