@charset "UTF-8";

/*
/* common設定
/* -------------------------------------------------- */

.block-questionnaire--header { display: none; }

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: initial; margin-bottom: initial; font-size: initial; font-weight: initial; }

.confetti { position: absolute; inset: 0; }
.confetti canvas { display: block; width: 100%; height: 100%; }
.confetti_gradation { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 75%, #f0ffff 100%); }

@media screen and (min-width: 700px), print {
.mt_90px_pc { margin-top: 90px; }
.mb_90px_pc { margin-bottom: 90px; }
.mt_60px_pc { margin-top: 60px; }
.mb_60px_pc { margin-bottom: 60px; }
.pt_60px_pc { padding-top: 60px; }
.pb_60px_pc { padding-bottom: 60px; }
}

@media only screen and (max-width: 699px) {
.block-questionnaire { margin: 0; }
.block-questionnaire--form { margin: 10px;}
.mt_60px_sp { margin-top: 60px; }
.mb_60px_sp { margin-bottom: 60px; }
.mt_40px_sp { margin-top: 40px; }
.mb_40px_sp { margin-bottom: 40px; }
.pt_40px_sp { padding-top: 40px; }
.pb_40px_sp { padding-bottom: 40px; }
}

/*
/* section_all
/* -------------------------------------------------- */

.section_all { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #64c1d9 0%, #29a6c2 24.52%, #64c1d9 50%, #f0ffff 100%); }

@media screen and (min-width: 700px), print {
}

@media only screen and (max-width: 699px) {
}

/*
/* section_kv
/* -------------------------------------------------- */

.section_kv { position: relative; }

@media screen and (min-width: 700px), print {
.section_kv_img { width: 600px; }
}

@media only screen and (max-width: 699px) {
}

/*
/* section_timer
/* -------------------------------------------------- */

.section_timer { position: relative; margin-right: auto; margin-left: auto; background: rgba(255,255,255,.9); }
.section_timer_title { border-radius: 20px 20px 0 0; background: rgba(88,187,212,.2); font-family: Oswald; color: #4cb6d0; -webkit-text-stroke: 5px #ffffff; paint-order: stroke; }
.section_timer_counter { position: relative; margin-bottom: 2rem; color: #55bad3; font-family: Oswald; }
.section_timer_counter::after { content: attr(data-txt); position: absolute; bottom: -1em; left: 50%; width: 2.5em; transform: translateX(-50%); text-align: center; font-weight: normal; }

@media screen and (min-width: 700px), print {
.section_timer { padding-bottom: 1rem; width: 900px; }
.section_timer_counter { font-size: 60px; }
.section_timer_counter::after { font-size: 2rem; }
}

@media only screen and (max-width: 699px) {
.section_timer { padding-bottom: 1vw; width: 80vw; }
.section_timer_counter { font-size: 9vw; }
.section_timer_counter::after { font-size: 4.5vw; }
}

/*
/* section_monthly
/* -------------------------------------------------- */

.section_monthly_title { position: relative; background: linear-gradient(0deg, #f6dd8f 0%, #cba652 100%); color: #47281b; -webkit-text-stroke: 5px #f6dd8f; paint-order: stroke; }
.section_monthly_title::after { content: ""; position: absolute; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); left: 0; width: 100%; background: #f6dd8f; }
.section_monthly_button { background: #cba652;  transition: all .2s linear; }
.section_monthly_button.comingsoon { background: #808080;  }
.section_monthly_button:not(.comingsoon):hover,
.section_monthly_button:not(.comingsoon):focus,
.section_monthly_button:not(.comingsoon):active { background: #d4b75e; }
.section_monthly_button a { padding: 1rem; }
.section_monthly_comingsoon { font-family: Oswald; text-shadow: 0 0 8px #cba652, 0 0 8px #cba652, 0 0 8px #cba652; }

@media screen and (min-width: 700px), print {
.section_monthly_title { height: 60px; }
.section_monthly_title::after { bottom: -14px; height: 15px; }
}

@media only screen and (max-width: 699px) {
.section_monthly_title { height: 10vw; font-size: 4.5vw; }
.section_monthly_title::after { bottom: calc(-4vw + 1px); height: 4vw; }
.section_monthly_comingsoon { margin-top: 20vw; margin-bottom: 20vw;font-size: 10vw; }
}

/*
/* section_present
/* -------------------------------------------------- */

.section_present { position: relative; }
.section_present_limited_wrapper { outline: 1px dashed #67c3da; outline-offset: -5px; }
.section_present_limited_title { margin-bottom: .5em; background: #fcd600; }
.section_present_limited_dates { background: #67c3da; }

@media screen and (min-width: 700px), print {
.section_present_limited_wrapper { width: 900px; border-radius: 40px; }
.section_present_limited_dates { width: 600px; }
}

@media only screen and (max-width: 699px) {
.section_present_limited_wrapper { padding: 5vw; width: 85vw; border-radius: 4vw; }
.section_present_limited_title { font-size: 4.5vw; }
.section_present_limited_text { font-size: 3.5vw; }
.section_present_limited_dates { width: 60vw; font-size: 2.5vw; }
}

/*
/* section_button
/* -------------------------------------------------- */

.section_button { position: relative; }
.section_button ._button { border-radius: 10px; background: #e00000; }
.section_button ._button::after { content: ""; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); border-radius: 10px; background: rgba(255,255,255,.25); pointer-events: none; }
.section_button ._button a { height: 100%; color: #ffffff; font-weight: bold; text-decoration: none; }
.section_button ._button a div { height: 100%; }

@media screen and (min-width: 700px), print {
.section_button { padding-bottom: 120px; }
.section_button ._button { width: 480px; height: 80px; }
.section_button ._button::after { height: 35px; }
.section_button ._button a { font-size: 2.5em; }
}

@media only screen and (max-width: 699px) {
.section_button { padding-bottom: 90px; }
.section_button ._button { margin-right: auto; margin-left: auto; width: 75vw; height: 15vw; }
.section_button ._button::after { height: calc(7.5vw - 5px); }
.section_button ._button a { font-size: 5vw; }
}

/*
/* section_radius
/* -------------------------------------------------- */

.section_radius_wrapper { height: 60px; background: linear-gradient(180deg, #f0ffff 0%, #ffffff 100%); }
.section_radius { height: 40px; border-radius: 40px 40px 0 0; box-shadow: 0 -8px 8px 0 rgba(0,0,0,.03); }

@media screen and (min-width: 1201px) {
.section_radius_wrapper { padding-right: calc((100% - 1240px) / 2); padding-left: calc((100% - 1240px) / 2); }
}