@charset "UTF-8";
/* ------------------------------------------------ */
/* イベント 共通設定
/* ------------------------------------------------ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

img {
    /* width: 100%; */
    max-width: 100%;
    height: auto;
}

button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.w10 { width: 10px !important;}
.w11 { width: 11px !important;}
.w12 { width: 12px !important;}
.w13 { width: 13px !important;}
.w14 { width: 14px !important;}
.w15 { width: 15px !important;}
.w16 { width: 16px !important;}
.w17 { width: 17px !important;}
.w18 { width: 18px !important;}
.w19 { width: 19px !important;}
.w20 { width: 20px !important;}
.w21 { width: 21px !important;}
.w22 { width: 22px !important;}
.w23 { width: 23px !important;}
.w24 { width: 24px !important;}
.w25 { width: 25px !important;}
.w26 { width: 26px !important;}
.w27 { width: 27px !important;}
.w28 { width: 28px !important;}
.w29 { width: 29px !important;}
.w30 { width: 30px !important;}
.w31 { width: 31px !important;}
.w32 { width: 32px !important;}
.w33 { width: 33px !important;}
.w34 { width: 34px !important;}
.w35 { width: 35px !important;}
.w36 { width: 36px !important;}
.w37 { width: 37px !important;}
.w38 { width: 38px !important;}
.w39 { width: 39px !important;}
.w40 { width: 40px !important;}
.w41 { width: 41px !important;}
.w42 { width: 42px !important;}
.w43 { width: 43px !important;}
.w44 { width: 44px !important;}
.w45 { width: 45px !important;}
.w46 { width: 46px !important;}
.w47 { width: 47px !important;}
.w48 { width: 48px !important;}
.w49 { width: 49px !important;}
.w50 { width: 50px !important;}


/* ------------------------------------------------ */
/* イベント 個別設定 - Color
/* ------------------------------------------------ */
:root {
    --event-color1: #F9C801;
    --event-color2: #F39801;
    --event-color3: #FEBDD1;
    --event-color4: #FF92B2;
    --event-color5: #F56A89;
    --event-color6: #44C5CF;
    --event-color7: #FFED34;
    --event-color8: #C499C5;
    --event-gray: #B2B2B2;
    --event-blue: #0000FF;
}

.event1-bg {
    background-color: var(--event-color1);
}
.event1-text {
    color: var(--event-color1);
}
.event1-border {
    border: var(--border-width, 1px) solid var(--event-color1);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event2-bg {
    background-color: var(--event-color2);
}
.event2-text {
    color: var(--event-color2);
}
.event2-border {
    border: var(--border-width, 1px) solid var(--event-color2);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event3-bg {
    background-color: var(--event-color3);
}
.event3-text {
    color: var(--event-color3);
}
.event3-border {
    border: var(--border-width, 1px) solid var(--event-color3);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event4-bg {
    background-color: var(--event-color4);
}
.event4-text {
    color: var(--event-color4);
}
.event4-border {
    border: var(--border-width, 1px) solid var(--event-color4);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event5-bg {
    background-color: var(--event-color5);
}
.event5-text {
    color: var(--event-color5);
}
.event5-border {
    border: var(--border-width, 1px) solid var(--event-color5);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event6-bg {
    background-color: var(--event-color6);
}
.event6-text {
    color: var(--event-color6);
}
.event6-border {
    border: var(--border-width, 1px) solid var(--event-color6);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event7-bg {
    background-color: var(--event-color7);
}
.event7-text {
    color: var(--event-color7);
}
.event7-border {
    border: var(--border-width, 1px) solid var(--event-color7);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.event8-bg {
    background-color: var(--event-color8);
}
.event8-text {
    color: var(--event-color8);
}
.event8-border {
    border: var(--border-width, 1px) solid var(--event-color8);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.eventGray-bg {
    background-color: var(--event-gray);
}
.eventGray-text {
    color: var(--event-gray);
}
.eventGray-border {
    border: var(--border-width, 1px) solid var(--event-gray);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}


/* ------------------------------------------------ */
/* 共通設定（style.css）上書き分
/* ------------------------------------------------ */
.page-content {
    width: unset;
    max-width: 430px;
}


/* ------------------------------------------------ */
/* 共通設定（color.css）追加分
/* ------------------------------------------------ */

.black-border {
    border: var(--border-width, 1px) solid var(--color-black);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}

.white-border {
    border: var(--border-width, 1px) solid var(--color-white);
    &.px2 { --border-width: 2px; }
    &.px3 { --border-width: 3px; }
    &.px4 { --border-width: 4px; }
    &.px5 { --border-width: 5px; }
}


/* ------------------------------------------------ */
/* イベント 個別設定 - ブロック要素
/* ------------------------------------------------ */
/* タイトル */
.event-title {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 342px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22.5px;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 5%;
    font-weight: 700;
}

/* サブページ タイトル */
.event-subpage__title {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 5%;
    font-weight: 700;
    margin-bottom: 20px;
}


/* ボタン1 */
.event-button {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 80px 1fr 80px;
    width: calc(100% - 30px);
    max-width: 360px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;

    &.non-icon {
        grid-template-columns: 1fr;
    }
}

.event-button.is-invalid {
    border-color: #DCDCDC;
    background-color: #B2B2B2;
    color: #DCDCDC;
}

.event-button.is-invalid img {
    filter: brightness(86%);
}

.event-button.black-text img {
    filter: brightness(0);
}

.event-button.black-text.is-invalid img {
    filter: brightness(86%);
}

/* ボタン2 */
.event-button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 30px);
    max-width: 364px;
    height: 65px;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    font-weight: 900;
    letter-spacing: 5%;
    border-radius: 32.5px;
}
.event-button2.is-invalid {
    background-color: #B2B2B2;
    color: #DCDCDC;
    border-color: #B2B2B2;
}

/* ボタン3 */
.event-button3 {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 80px;
    width: calc(100% - 32px);
    margin: 0 auto;
    max-width: 360px;
    height: 80px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 5%;
}

.event-button3__text {
    text-align: right;
}

/* 注意書き */
.event-notice__list {
    width: calc(100% - 40px);
    margin: 0 auto;
}

.event-notice__item {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 5%;
    position: relative;
    padding-left: 1em;
}

.event-notice__item::before {
    content: "※";
    display: block;
    position: absolute;
    left: 0;
}

.event-notice__item a {
    text-decoration: underline;
}

/* リスト */
.event-list__list {
    width: calc(100% - 40px);
    max-width: 290px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding-bottom: 40px;
}

.event-list__item-figure {
    margin: 0;
}

.event-list__item-caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    padding-top: 6px;
}


/* ------------------------------------------------ */
/* コンテンツ毎の設定 - トップページ
/* ------------------------------------------------ */
.content-holder {
    width: 100%;
    max-width: max-content;
    margin: 0;
    border-radius: 0;
    padding: 0;
}

.content-holder {
    padding: 16px 15px 27px;
}

.event-description__text {
    margin: 0;
    text-align: center;
    font-size: 16px;
    line-height: 25px;
    font-weight: 700;
    color: #707070;
    padding-bottom: 16px;
}

.loginRegisterMessage__list {
    padding-bottom: 16px;
}

.loginRegisterMessage__item {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 5%;
    position: relative;
    padding-left: 1em;
}

.loginRegisterMessage__item::before {
    content: "※";
    display: block;
    position: absolute;
    left: 0;
}

.loginRegisterMessage__item a {
    text-decoration: underline;
    color: var(--event-blue);
}

.loginRegisterButton {
    width: 100%;
    max-width: 430px;
    height: 60px;
    display: grid;
    align-items: center;
    grid-template-columns: 84px 1fr;
    border-radius: 10px;
    cursor: pointer;
    padding-right: 30px;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    background-color: var(--event-color1);
}

.loginRegisterButton.registerButton .icon {
    width: 24px;
    margin: 0 auto;
}

.loginRegisterButton.loginButton .icon {
    width: 20px;
    margin: 0 auto;
}

.loginRegisterButton.loginButton {
    margin-bottom: 16px;
}

.goOshitabiButton__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    border-radius: 16px;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 5%;
    font-weight: 900;
    margin-bottom: 17px;
}

/* SPECIAL MOVIE */
.content-movie {
    position: relative;
    padding-top: 35px;
    padding-bottom: 32px;
}
.content-movie::before,
.content-movie::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    background: repeating-linear-gradient(    
        -45deg,   
        transparent,
        transparent 8px,
        #ffdee8 8px, 
        #ffdee8 16px
    );
}
.content-movie::before {
    top: 0;
}
.content-movie::after {
    bottom: 0;
}

.content-movie__head-text1 {
    text-align: center;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: 5%;
    font-weight: 900;
}

.content-movie__head-text2 {
    text-align: center;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 5%;
    font-weight: 900;
    padding-bottom: 8px;
}

.content-movie__head-figure {
    margin: 0;
    padding-left: 6px;
    padding-right: 1px;
    padding-bottom: 24px;
}

.content-movie__head-text1 {
    text-align: center;
    font-size: 19px;
    line-height: 27px;
    letter-spacing: 5%;
    font-weight: 900;
}

.content-movie__head-text2 {
    text-align: center;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 5%;
    font-weight: 900;
    padding-bottom: 8px;
}

.content-movie__head-figure {
    margin: 0;
    padding-left: 6px;
    padding-right: 1px;
    padding-bottom: 24px;
}

.content-movie__body-button.event-button {
    font-size: 21px;
    margin-bottom: 20px;
}

.content-movie__body-notice {
    padding-bottom: 22px;
}

.content-movie__haru {
    padding-top: 23px;
    padding-bottom: 22px;
}

.content-movie__haru-title {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 5%;
    line-height: 20px;
    text-align: center;
    padding-bottom: 26px;
}

.content-movie__haru-button1 {
    margin-bottom: 15px;
}

.content-movie__haru-notice {
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 5%;
}

/* オリジナルブロマイド */
.content-photo {
    padding-top: 30px;
}

.content-photo__head-text1 {
    margin-bottom: 15px;
}

.content-photo__head-text2 {
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 5%;
    font-weight: 700;
    color: #707070;
    padding-bottom: 20px;
}

.content-photo__period {
    width: calc(100% - 30px);
    margin: 0 auto;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 17px;
    margin-bottom: 16px;
}

.content-photo__period-text1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    padding-bottom: 4px;
}

.content-photo__period-text2 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.content-photo__buttons-btn1 {
    margin-bottom: 15px;
}

.content-photo__buttons-btn2 {
    margin-bottom: 22px;
}


/* プレゼントキャンペーン */
.content-present {
    padding-top: 33px;
    padding-bottom: 33px;
}

.content-present__head-text1 {
    margin-bottom: 15px;
}

.content-present__head-text2 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 5%;
    text-align: center;
    color: #707070;
    padding-bottom: 26px;
}

.content-present__body-figure {
    width: calc(100% - 40px);
    max-width: 278px;
    margin: 0 auto;
    padding-bottom: 26px;
}

.content-present__body-text {
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    font-weight: 900;
    letter-spacing: 5%;
    padding-bottom: 34px;
}

.content-present__body-text__link {
    text-decoration: underline;
}

.content-present__buttons-btn1 {
    margin-bottom: 15px;
}

.content-present__buttons-btn2 {
    margin-bottom: 16px;
}

.content-present__notice .event-notice__item {
    font-size: 11px;
}


/* ------------------------------------------------ */
/* コンテンツ毎の設定 - 下層ページ
/* ------------------------------------------------ */
.subpage-content {
    min-height: unset;
}

/* ボタン */
.subpage-buttons__button1 {
    margin-bottom: 20px;
}

.subpage-buttons__button2 {
    margin-bottom: 26px;
}

/* テキスト */
.subpage-text {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 5%;
    text-align: center;
    padding-bottom: 19px;
}


/* モーダル */
.subpage-modal {
    display: none;
    position: fixed;
    z-index: 100;
}

.subpage-modal__wrapper {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}

.subpage-modal__inner {
    width: 100%;
    max-width: 320px;
    background-color: var(--color-white);
    padding-top: 82px;
    padding-bottom: 62px;
}

.subpage-modal__text {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 5%;
    font-weight: 700;
    text-align: center;
    padding-bottom: 50px;
}

.subpage-modal__buttons {
    display: flex;
    justify-content: center;
    column-gap: 22px;
}

.subpage-modal__buttons-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 57px;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 13%;
}

.subpage-buttonTop {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    border-radius: 8px;
    width: calc(100% - 32px);
    margin: 0 auto;
    max-width: 360px;
    font-size: 20px;
    letter-spacing: 5%;
    font-weight: 700;
}