@charset "utf-8";
/* 2025/12 update */
html,
body {background: none; margin: 0; width: 100%; height: auto !important;}
header {background: #fff;}

/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
::selection {color: #fff; background-color: #dbcf6e;}
#wrap {background: none;}
#wrap_cheers{font-size: clamp(12px, calc(12px + 0.0267 * (100vw - 375px)), 18px); color: #242424; padding: 0; margin: 0; position: relative; overflow-wrap: anywhere; word-break: normal; line-break: strict;}
#wrap_cheers .desktop__window{width: 100%; transform: scale(1); overflow: hidden;}
#wrap_cheers figure {margin: 0 0 0.5rem;}
#wrap_cheers .desktop__figure {position: fixed; z-index: -1;}
#wrap_cheers .desktop__figure {left: 50%;}
#wrap_cheers .desktop__figure.--object1 {
  bottom: min(1.1713030747vw, 16px);
  width: min(35.7979502196vw, 500px);
  min-width: 415.65px;
  transform: translate(max(-50vw, -704px), 0);
}
#wrap_cheers .desktop__figure.--object2 {
  bottom: min(0.0732064422vw, 1px);
  width: min(36.0175695461vw, 500px);
  min-width: 418.2px;
  transform: translate(min(13.5431918009vw, 187px), 0);
}
article#ev_cheers{width: 100%; max-width: 520px; margin: 0 auto; padding: 0; color: #242424; background: rgb(255 255 255 / 0.875); position: relative; border-left: 5px solid #ae6ec3; border-right: 5px solid #ae6ec3; z-index: 999;}
section:not(:first-child){padding: 3rem 2rem;}
section:not(:first-child) p{font-size: 1.65rem; font-weight: 600; line-height: 1.55em;}

/* h */
#wrap_cheers h2,#wrap_cheers h3,#wrap_cheers h4,#wrap_cheers h5{padding: 0 !important; margin: 0 !important;}
#wrap_cheers h2{position: absolute; top: min(3.3333333333vh, 20px); left: min(3.3333333333vw, 20px); width: min(21.6666666667vw, 200px); z-index: 10;}
#wrap_cheers h2.fixed{position: fixed;}
#wrap_cheers h2 img{width: 100%; height: auto;}
#wrap_cheers h3{background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); font-size: 3.2rem; font-weight: 800; line-height: 1.05em; letter-spacing: -1.5px; text-align: center; margin-bottom: 1.6rem !important;}
#wrap_cheers h3 em{font-size: 2.2rem; font-weight: 800; margin: 0 1px 0 2px;}

/* font */
.m-plus-reg {font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 400; font-style: normal;}
.m-plus-exb {font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-style: normal;}

/* link */
#wrap_cheers a{color: #c358e3; transition: all .3s;}
#wrap_cheers a:hover{color: #c358e3; text-decoration: underline;}
.boxLink{width: 100%; max-width: 480px; font-size: 2.0rem; font-weight: 700; line-height: 1.0em; text-align: center; background: #242422; border: 2px solid #dbcf6e; border-radius: 50px; margin: 1.0rem auto; padding: 2rem 1rem 1.75rem; position: relative;}
.boxLink::before,
.boxLink::after {content: ""; width: 15px; height: 4px; position: absolute; top: calc(50% - 2px); right: 20px; border-radius: 9999px; background-color: #fff; color: #fff; transform-origin: calc(100% - 1.75px) 50%;}
.boxLink::before {transform: rotate(45deg);}
.boxLink::after {transform: rotate(-45deg);}
a.boxLink {display: block;}
a.boxLink:hover{opacity: 0.75; color: #fff !important; transition: all .3s; text-decoration: none !important;}
.boxLink.disable{color: #4f4f4f; background: #171717; border: 2px solid #4f4f4f; cursor: no-drop;}
.boxLink.disable::before,
.boxLink.disable::after {background-color: #4f4f4f;}

#page-top {position: fixed; right: 1.6rem; bottom: 0.8rem; z-index: 10;
-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
#page-top .scroll.show{bottom: 1rem;}
#page-top a .scroll {width: 1.5rem; height: 5.8rem; position: absolute; right: 0; bottom: -10rem; transition: all 1.0s; z-index: 9;}
#page-top a .scroll .arw::after {content: ""; display: block; position: absolute; right: -17.25px; top: -7px; width: 7px; height: 7px; border-right: 2px solid #b31dfb; border-top: 2px solid #b31dfb; transform: rotate(-45deg);}
#page-top a .scroll .arw {position: absolute; top: 0; left: 50%; margin-left: -1.0rem;}
#page-top a .scroll .txt {color: #242424; font-size: 1rem; font-weight: 700; mix-blend-mode: difference; position: absolute; left: 0.3rem; bottom: 0;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;}

/* Loader */
.che-loader{background:#fff8e6; background-size: cover; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 200;}
.loader{background: rgb(246 216 118 / 1); width: 100%; height: 100%; position: fixed; display: flex; align-items: center; justify-content: center; left: 0; top: 0; z-index: 1000;}
/* Loader - Animation */
.loader-animation {position: relative;}
/* Loader - Animation */
.loader-logo {font-size: 10px; margin: -1.5em 0; text-indent: -9999em; width: 5em; height: 5em; border-radius: 50%; position: absolute; top: calc(50% - 60px); left: calc(50% - 25px);
background: #914cff;
background: -moz-linear-gradient(left, #914cff 10%, rgba(239, 59, 234, 0) 42%);
background: -webkit-linear-gradient(left, #914cff 10%, rgba(239, 59, 234, 0) 42%);
background: -o-linear-gradient(left, #914cff 10%, rgba(239, 59, 234, 0) 42%);
background: -ms-linear-gradient(left, #914cff 10%, rgba(239, 59, 234, 0) 42%);
background: linear-gradient(to right, #914cff 10%, rgba(239, 59, 234, 0) 42%);
-webkit-animation: loader 0.75s infinite linear;
animation: loader 0.75s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);}
.loader-logo:before {
content: ''; width: 50%; height: 50%; background: #914cff; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0;}
.loader-logo:after {content: ''; background: rgb(246 216 118 / 1); width: 70%; height: 70%; border-radius: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.loading-text {width: 100%; font-size: 1.05rem; font-weight: 700; color: #c358e3; text-align: center; margin: 0 0 0 -3.5em; position: absolute; top: 100%;}
.loader_letter{
  background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0);
  animation: bound 1.0s infinite; position: absolute; animation-delay: 0s;
}
.loader_letter:nth-child(1){left: 0; animation-delay: 0s;}
.loader_letter:nth-child(2){left: 12px; animation-delay: 0.1s;}
.loader_letter:nth-child(3){left: 24px; animation-delay: 0.2s;}
.loader_letter:nth-child(4){left: 36px; animation-delay: 0.3s;}
.loader_letter:nth-child(5){left: 48px; animation-delay: 0.4s;}
.loader_letter:nth-child(6){left: 60px; animation-delay: 0.5s;}
.loader_letter:nth-child(7){left: 72px; animation-delay: 0.6s;}

/* Main image */
.bg_movie {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}
.bg_movie .video_box {width: 100%; height: 100%;}
.bg_movie .video_box video {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; aspect-ratio: 16/9; opacity: 0.45;}
.bg_movie .video_box .overlay {width: 100%; height: calc(100vh - 0px); position: fixed; top: 0; left: 0;
background-image: linear-gradient(45deg, rgb(255 255 255 / 0.05) 5%, rgb(255 255 255 / 0.45) 45%);
background-size: 2px 2px; z-index: 0;}

/* Navi */
nav {width: 46px; height: 46px; position: absolute; top: min(3.3333333333vh, 20px); right: min(3.3333333333vw, 20px); padding: 0; background: none; border: none; z-index: 10;}
nav .navi__area h2.logo{display: none;}
nav .navi__area .che__js-modal__btn{display: block; width: 36px; height: 36px; position: absolute; top: 50%; right: 20px; margin: -15px 0 0;}
nav .navi__area ul{display: none; justify-content: flex-start; align-items: normal;}
nav .navi__area li{width: 100%; text-align: center;}
nav .navi__area li a{color: #fff !important; font-size: 1.8rem; font-weight: 700; text-shadow: 0 3px 1px #000; position: relative; text-decoration: none !important;}
nav .navi__area li a::after {display: none;}
nav .navi__area li a:hover::after {display: none;}
nav.fixed{position: fixed;}
nav #che__slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.85); z-index: 5;}
.menu {display: block; width: 46px; height: 46px; position: absolute; top: 50%; right: 0; margin: -23px 0 0 0; padding: 10px; border-radius: 60px; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border: 2px solid #fff; cursor: pointer;}
.menu span:before {bottom: -9px;}
.menu span:after {bottom: -18px;}
.menu span,
.menu span, .menu span::before, .menu span::after {content: ''; display: block; width: 22px; height: 3px; border-radius: 0; background: #fff; transition: 0.5s; position: absolute;}

/* Navi - Modal */
#che__modal{display: block;}
.che__js-modal__bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 11; display: none;}
.che__js-modal__main {display: none; width: 100%; height: 100%; padding: 0; margin: 0; position: fixed; top: 0; left: 0; background-color: rgb(255 255 255 / 0.885); z-index: 50;}
.che__js-modal__main .modal__contentsBox{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0;}
.che__js-modal__main .modal__contentsBox .che__modal__menu ul{list-style: none; margin: 0; padding: 0;}
.che__js-modal__main .modal__contentsBox .che__modal__menu ul > li a {display: flex; justify-content: flex-start; align-items: center; color: #c358e3 !important; font-size: 2.8rem; font-weight: 700; padding: 1.5rem 0;}
.che__js-modal__main .modal__contentsBox .che__modal__menu ul > li a:hover {text-decoration: none !important;}
.che__js-modal__btn--close--fix {display: block; width: 100%; max-width: 300px; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border: 2px solid #fff; border-radius: 30px; color: #fff; font-size: 2.5rem; font-weight: 700; text-decoration: none; text-align: center; padding: 1.25rem; margin: 2.5rem auto 0; transition: all .3s; cursor: pointer;}
.che__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
.che__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

/* hero */
section#hero{}
section#hero .statement{margin: 3rem 3.5rem 0;}
section#hero .statement__detail{width: 90%; max-width: 400px; margin: 0 auto;}
section#hero .statement__detail dl{background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border-radius: 10px; text-align: center; overflow: hidden;}
section#hero .statement__detail dt{font-size: 2.6rem; font-weight: 800; line-height: 1.05em; letter-spacing: -1.5px; color: #fff; text-align: center; padding: 1rem 1rem 0.75rem;}
section#hero .statement__detail dd{margin: 0.25rem; padding: 1.0rem 1.5rem 1.5rem; background: #fff; border-radius: 0 0 7px 7px;}
section#hero .statement__detail dd em{font-size: 2.8rem;}

/* ev_event */
section#ev_event{}
section#ev_event .section-detail .images{width: 90%; margin: 0 auto;}
section#ev_event .section-detail .images .desc{margin: 1rem 0 2rem;}
section#ev_event .section-detail .images .desc p{font-size: 2.8rem;}
section#ev_event .section-detail .images .desc p span{display: block; font-size: 1.25rem; line-height: 1.0em;}
section#ev_event .section-detail .images .desc div{display: block; width: 100%; max-width: 200px; background: #2b69fc; font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; border-radius: 30px; padding: 1rem 2rem 0.75rem; margin: 0 auto 1rem;}

/* ev_event - StampCard */
section#ev_event #stamp-card{width: 90%; max-width: 400px; display: flex; justify-content: flex-start; flex-wrap: wrap; border-radius: 10px; overflow: hidden; padding: 1.5rem; margin: 1.5rem auto;}
section#ev_event #stamp-card.enable{border: 3px solid #426af7; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); }
section#ev_event #stamp-card.disable{background: linear-gradient(180deg, #999 0% 0%, #666 50% 0%, #333 100%); border: 3px solid #7f7f7f;}
section#ev_event #stamp-card h4{width: 100%; font-size: 2.1rem; color: #fff; text-align: center;}
section#ev_event #stamp-card .stamp-detail{display: none; justify-content: center; flex-direction: row; flex: 100%; align-items: center; flex-wrap: wrap; gap: 0.5em; opacity: 0; transition: all .3s;}
section#ev_event #stamp-card.disable .stamp-detail{display: flex; opacity: 1;}
section#ev_event #stamp-card .che__tabs{width: 100%; display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; margin: 1.5rem 0;}
section#ev_event #stamp-card .che__tabs input[name="tab_switch"] {display: none;}
section#ev_event #stamp-card .che__tabs span.radio_check {background: none; display: none; height: auto; margin: 0; width: auto;}
section#ev_event #stamp-card .che__tabs #stamp-tab-1:checked ~ #stamp__tab-1_content,
section#ev_event #stamp-card .che__tabs #stamp-tab-2:checked ~ #stamp__tab-2_content{display: flex; margin: 1.5rem auto 0; z-index: 0; opacity: 1;}
section#ev_event #stamp-card .tab_label {width: 47.5%; color: #fff; font-size: 1.0rem; text-align: center; background: #4b528d; border: 2px solid #fff; border-radius: 30px; padding: 0.7rem; position: relative; cursor: pointer;}
section#ev_event #stamp-card .che__tabs #stamp-tab-1:checked ~ .tab_label.btn-1,
section#ev_event #stamp-card .che__tabs #stamp-tab-2:checked ~ .tab_label.btn-2 {color: #fff; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border: 2px solid #fff;}
section#ev_event #stamp-card .tab_label div{font-size: 1.4rem; font-weight: 700; color: #fff;}
section#ev_event #stamp-card .tab_label:hover {opacity: 1.0;}
section#ev_event #stamp-card .tab_label div::before,
section#ev_event #stamp-card .tab_label div::after {content: ""; color: #fff; width: 8.5px; height: 3px; position: absolute; top: calc(50% - 0.5px); right: 10px; border-radius: 9999px; background-color: #fff; transform-origin: calc(100% - 1.25px) 50%;}
section#ev_event #stamp-card .tab_label div::before {transform: rotate(45deg);}
section#ev_event #stamp-card .tab_label div::after {transform: rotate(-45deg);}
section#ev_event #stamp-card .stamp-detail .stamp-slot{width: 50px; height: 50px; background: #fff; border-radius: 10%; font-size: 1rem; line-height: 0; padding: 10px 5px; position: relative;}
section#ev_event #stamp-card.disable .stamp-detail .stamp-slot{background: #999; color: #666;}
section#ev_event #stamp-card .stamp-detail .stamp-slot.stamped:before{content: ''; display: block; width: 48px; height: 48px; position: absolute; top: 3px; left: 1px;
background-image: url(../img/event/cpn_cheers/v2/che__stamp.png); background-repeat: no-repeat; background-size: contain;}
section#ev_event #stamp-card .loginbox{margin: 1rem auto 0;}
section#ev_event #stamp-card .loginbox p{font-size: 1.05rem; text-align: center; font-weight: normal; color: #fff; margin: 0;}
section#ev_event #stamp-card .loginbox a.boxLink{max-width: 300px; border-radius: 30px; color: #fff; font-size: 1.7rem; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border: 2px solid #fff; padding: 1.25rem;}

/* ev_goods */
section#ev_goods{}
section#ev_goods .section-detail .images{width: 90%; margin: 0 auto;}
section#ev_goods .section-detail .images .desc{margin: 1rem 0 2rem;}
section#ev_goods .section-detail .images .desc div{display: block; width: 100%; max-width: 200px; background: #d96dc3; font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; border-radius: 30px; padding: 1rem 2rem 0.75rem; margin: 0 auto 1rem;}
section#ev_goods .section-detail ul{font-size: 1.2rem; margin: 1rem 0;}
section#ev_goods .section-detail ul > li{list-style: disc; margin: 0.5rem 0 0 25px;}

/* ev_howto */
section#ev_howto{}
section#ev_howto .section-detail ul.howto{display: flex; justify-content: flex-start; flex-direction: column; width: 90%; max-width: 500px; margin: 0 auto;}
section#ev_howto .section-detail ul.howto > li{background: rgb(255 255 255 / 0.4); border: 3px solid #c358e3; border-radius: 15px; margin: 1.5rem 0; position: relative; overflow: hidden;}
section#ev_howto .section-detail ul.howto > li .step{width: 32.5%; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: 0; line-height: 1em; text-align: center; margin: -1px; padding: 1.0rem 1.5rem 1.0rem 0.5rem; clip-path: polygon(0 0, 100% 0, 87.5% 100%, 0% 100%); position: absolute; top: 0; left: 0;}
section#ev_howto .section-detail ul.howto > li .text{font-size: 1.8rem; font-weight: 600; line-height: 1.25em; padding: 1.5rem;}
section#ev_howto .section-detail ul.howto > li .text span{display: block; font-size: 1.1rem; font-weight: normal; line-height: 1.65em; margin-top: 0.5rem;}

/* ev_event */
section#ev_collab{}
section#ev_collab figure{display: block; width: 70%; max-width: 220px; background: #0e090d; margin: 2rem auto; padding: 4rem; border-radius: 50%; overflow: hidden;}
section#ev_collab p{display: block; width: 90%; max-width: 440px; font-size: 1.4rem; margin: 2rem auto;}
section#ev_collab a.boxLink{max-width: 300px; border-radius: 30px; color: #fff; font-size: 1.35rem; background: linear-gradient(180deg, #2b69fc 0% 0%, #914cff 50% 0%, #ef3bea 100%); border: 2px solid #fff; padding: 1.25rem;}

/* Notice */
section#ev_notice h4{font-size: 1.65rem; font-weight: 700; line-height: 1em; margin: 1rem 0 !important;}
section#ev_notice a:hover{text-decoration: underline;}
section#ev_notice .statement__detail {background: rgb(255 255 255 / 0.4); border: 3px solid #c358e3; border-radius: 10px; padding: 1.5rem; overflow: auto;}
section#ev_notice .statement__detail .noticeBox{height: 320px;}
section#ev_notice .statement__detail .noticeBox ul{width: 97%; margin: 0 0 2.5rem;}
section#ev_notice .statement__detail .noticeBox li{font-size: 1.4rem; line-height: 1.4em; list-style: disc; margin: 0 0 10px 25px;}
section#ev_notice .statement__detail .noticeBox .jspTrack{background: none;}
section#ev_notice .statement__detail .noticeBox .jspDrag {background: #c358e3; left: 0; border-radius: 30px;}
.jspVerticalBar{width: 7px !important;}


@media (min-width: 1400px) {}

@media (max-width: 767px) {
/*** Event - Common ***/
  .sp_display{display:block;}
  .pc_display{display:none;}
  article#ev_cheers{max-width: 768px; background: rgb(255 255 255 / 0.55);}
  section:not(:first-child) p{font-size: 1.55rem;}
  #wrap_cheers figure {display: none;}

  /* h */
  #wrap_cheers h3{font-size: 2.45rem; line-height: 1.225em;}
  #wrap_cheers h3 em{font-size: 1.65rem; margin: 0 2px;}

  /* Navi - Modal */
  .che__js-modal__main .modal__contentsBox .che__modal__menu ul > li a {font-size: 2.25rem; padding: 1.0rem 0;}
  .che__js-modal__btn--close--fix {max-width: 190px; font-size: 1.75rem; padding: 1.0rem; margin: 1.75rem auto 0;}

  /* hero */
  section#hero .statement{margin: 3rem 1rem 0;}
  section#hero .statement__detail dt{font-size: 2.45rem;}
  section#hero .statement__detail dd em{font-size: 2.6rem;}

  /* ev_event */
  /* ev_event - StampCard */
  section#ev_event #stamp-card{width: 100%;}
  section#ev_event #stamp-card .tab_label {width: 48%;}
  section#ev_event #stamp-card .tab_label div{font-size: 1.0rem;}
  section#ev_event #stamp-card .tab_label div::before,
  section#ev_event #stamp-card .tab_label div::after {content: ""; width: 7px; height: 2px; right: 8px;}
  section#ev_event #stamp-card .loginbox p{font-size: 0.975rem;}
  section#ev_event #stamp-card .loginbox a.boxLink{max-width: 220px; font-size: 1.5rem;}
}

/* == keyframes ================================================== */
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both;}
@keyframes SlideUp {
  0%   {opacity: 1; transform: translateX(0%);}
  100% {opacity: 0; transform: translateX(100%);}
}
@keyframes SlideDown {
  0%   {opacity: 0; transform: translateX(100%);}
  100% {opacity: 1; transform: translateX(0%);}
}
@keyframes stroke {
  0%   {fill: #10101e; stroke-dashoffset: 1800;}
  10%  {fill: transparent;}
  20%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  70%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  80%  {fill: transparent;}
  90%  {fill: #10101e; stroke-dashoffset: 1800;}
  100% {fill: #10101e; stroke-dashoffset: 1800;}
}

@keyframes bound{
  0%   {transform: translateY(0px);}
  50%  {transform: translateY(-10px);} 
  60%  {transform: translateY(1px);}
  70%  {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@keyframes loader {
  0%   {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}