@charset "utf-8";
/* 2026/01 update */
html,
body {background: none; margin: 0; width: 100%; height: auto !important;}

/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
::selection {color: #fff; background-color: #dbcf6e;}
#wrap {background: none;}
article {display: block; background-repeat: no-repeat; background-size: cover;}
header {position: relative; background-color: #fff;}
header.logined {background-color: #D61518;}
footer {position: relative;}
hr {height: 1px; background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 100%); border: none; margin: 8rem;}
.dangrek-reg {font-family: "Dangrek", sans-serif; font-weight: 400; font-style: normal;}

#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: 2rem; height: 6.5rem; 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 #dbcf6e; border-top: 2px solid #dbcf6e; transform: rotate(-45deg);}
#page-top a .scroll .arw {position: absolute; top: 0; left: 50%; margin-left: -0.7rem;}
#page-top a .scroll .txt {color: #fff; 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;}


/*** Event - JEWELS CRUSH ***/
#wrap_jc{color: #fff; font-size: 1.5rem; line-height: 1.65em; letter-spacing: 1px; position: relative; overflow: hidden;}
article{width: 100%; padding: 0; position: relative; overflow: hidden;}
.bg_bk{background: rgb(0 0 0 / 0.7);}

.content__ttl{background: rgb(10 20 65 / 75%); padding: 5rem 0; margin: 0; border-top: 1px solid #d0c360; border-bottom: 1px solid #d0c360;}
.content__ttl h2 {width: 100%; max-width: 970px; color: #ffeb5d; text-transform: uppercase; font-size: 4.6rem; line-height: 1.325em; text-align: center; padding: 0; margin: 0 auto;}
.content__ttl h2 span{width: 215px; display: block; font-size: 1.25rem; line-height: 1em; letter-spacing: 5px; position: relative; margin: 0 auto;}
.content__ttl h2 span:before{content: ''; display: block; width: 50px; height: 1px; background: #ffeb5d; position: absolute; top: 50%; left: 0; margin: -2px 0 0;}
.content__ttl h2 span:after{content: ''; display: block; width: 50px; height: 1px; background: #ffeb5d; position: absolute; top: 50%; right: 0; margin: -2px 0 0;}

.content-block{width: 970px; margin: 0 auto;}
.content-block p{margin: 0;}

.content-block .jc_inner{margin: 8rem 0;}
.content-block .detail h3{text-align: center; font-size: 4.2rem; font-weight: 500; color: #ffeb5d; margin: 5rem 0; padding: 0;}
.content-block .detail h4{text-align: center; font-size: 3.2rem; font-weight: 500; line-height: 1.35em; margin: 0; padding: 0;}
.content-block .detail h4 em{display: inline-block; color: #ffeb5d; font-weight: 700; margin: 0 5px; text-decoration: 2px underline;}

/* link */
#wrap_jc a{color: #dbcf6e; transition: all .3s;}
#wrap_jc a:hover{color: #dbcf6e; 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: #ffeb5d; 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: #dbcf6e !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;}

/* Loader */
.loader{background: rgb(141 120 200 / 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 */
.loading-Icon {width: 150px; height: 135px; margin: 0 auto; position: relative;}
.loading-text{color: #fff; font-size: 1.25rem; font-weight: 700; width: 100%; text-align: center; margin: 0 0 0 28px; position: absolute; top: 100%;}
.loader_letter:nth-child(1){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0s; left: 0;}
.loader_letter:nth-child(2){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.1s; left: 15px;}
.loader_letter:nth-child(3){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.2s; left: 32px;}
.loader_letter:nth-child(4){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.3s; left: 48px;}
.loader_letter:nth-child(5){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.4s; left: 66px;}
.loader_letter:nth-child(6){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.5s; left: 74px;}
.loader_letter:nth-child(7){color: #fff;animation: bound 1.0s infinite; position: absolute; animation-delay: 0.6s; left: 91px;}
.ico_jewel{width: 120px; height: 125px; opacity: 1;}
.ico_jewel polyline,
.ico_jewel path {fill: #fff; animation: stroke 7s ease-in-out forwards infinite; stroke: rgb(255 255 255 / 1); stroke-dasharray: 1800; stroke-dashoffset: 0; stroke-width: 1;}


/* Navi */
#jc__modal{display: none;}
nav{width: 100%; position: absolute; padding: 20px 0; z-index: 10;}
nav .navi__area{width: 970px; margin: 0 auto; position: relative;}
nav .navi__area h2.logo{width: 100px; position: absolute; top: -11px; left: 10px; margin: 0;}
nav .navi__area h2 img{width: 100%;}
nav .navi__area .jc__modal__btn{display: none;}
nav.g-nav .checkbox_check,
nav.g-nav .radio_check {display: none;}
nav .navi__area ul{width: 100%; margin: 0; display: flex; justify-content: flex-end; align-items: center;}
nav .navi__area li{width: 14.5%; text-align: center;}
nav .navi__area li a{color: #fff !important; font-size: 1.35rem; font-weight: 700; text-shadow: 0 2px 1px #000; letter-spacing: 1px; position: relative; text-decoration: none !important;}
nav .navi__area li a:hover{text-decoration: none !important;}
nav .navi__area li a::after {content: ''; position: absolute;bottom: -5px; left: 0; width: 100%; height: 2px; background: #fffa8f; transform: scale(0, 1); transform-origin: right top; transition: transform .15s;}
nav .navi__area li a:hover::after {transform-origin: left top; transform: scale(1, 1);}
nav.fixed{position: fixed; top: 0; left: 0; background:rgb(5 5 5 / 0.65); padding: 20px 0;}


/* Main image */
.video_box .video-background {position: fixed; top: 0; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%); object-fit: cover;}
.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) 15%, rgb(0 0 0 / 0.45) 45%);
background-size: 2px 2px; z-index: -1;}
.main__area .hero{width: 100%; height: calc(910px - 135px); position: relative;}
.vj-jc{width: 100%; max-width: 970px; position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -485px;}
.vj-jc #scroll-down {display: block; position: relative; padding-top: 26px; text-align:center; margin-top: 2.5rem;}
.vj-jc .arrow-down {display: block; margin: 0 auto; width: 10px; height: 20px;}
.vj-jc .arrow-down:after {content: ''; width: 8px; height: 8px; display: block; margin: 0; padding: 0; border-top: 2px solid #dbcf6e; border-right: 2px solid #dbcf6e; behavior: url(-ms-transform.htc);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);}
.vj-jc #scroll-title {display: block; color: #dbcf6e; text-transform: uppercase; font-family: Helvetica Neue, Helvetica, Arial; font-size:14px; font-weight:bold; letter-spacing:.1em;}
.vj-jc #scroll-down::before {content: ''; width: 2px; height: 35px; position: absolute; top: 0px; left: 50%; background: #dbcf6e; margin-left: -2px;
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;}

@media screen and (max-width: 1024px) {
	.video_box .video-background {top: 0;}
}


/* Contents 1 Event*/
.jc_chach h2{font-size: 4.0rem;}
.jc_chach h2 em{display: inline-block; font-size: 5.4rem; font-family: "Roboto", sans-serif; font-weight: 600; margin: 0 3px;
background: linear-gradient(0deg, #12b8ff 0%, #edff1b 40%, #ff3bb4 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

/* 0623 add */
.content__extra{display: block; background: rgb(90 5 45 / 0.75); padding: 5rem 0; margin: 0; border-top: 1px solid #d0c360; border-bottom: 1px solid #d0c360; text-align: center;}
.content__extra h3 {display: inline-block; font-size: 4.8rem; font-family: "Roboto", sans-serif; font-weight: 600; margin: 0 1px; padding: 8px 0; letter-spacing: 0;
background: linear-gradient(0deg, #12b8ff 20%, #edff1b 45%, #ff3bb4 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.content__extra p{font-size: 1.8rem; line-height: 3.0rem;}
.content__extra p em{font-weight: 700; font-size: 2.6rem; color: #edff00;}

/* Data */
div#ev_data{margin: 8rem 0; position: relative;}
div#ev_data h3{font-size: 4.2rem; font-weight: 500; color: #ffeb5d; text-align: center; margin: 2.5rem 0; padding: 0;}
div#ev_data .attention{text-align: center; margin: 1.5rem 0 0;}
div#ev_data .attention p{font-size: 1.25rem;}
div.jc_Score{width: 100%; height: 220px; display: flex; justify-content: flex-start; align-items: center; background: #0a0a0d; position: relative; overflow: hidden; z-index: 0;}
div.jc_Score .score_detail{width: 100%; display: flex; justify-content: space-between; align-items: center; z-index: 1;}
div.jc_Score .score_detail .score_title{width: 20%; font-size: 2.5rem; font-weight: 700; line-height: 1.2em; text-align: center;}
div.jc_Score .score_detail .total_score {width: 75%; margin: 0 5%; display: flex; flex-wrap: nowrap; flex-direction: column;}
div.jc_Score div.rate_bar {
	width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;
	background-color: rgb(141 120 200);
	transition: width 3s cubic-bezier(0.22, 1, 0.36, 1);
}
div.jc_Score div.rate_percentage{opacity: 0; transition: opacity 0.25s;}
div.jc_Score div.rate_bar-container {width: 100%; height: 100%; background-color: rgb(20 20 20); position: absolute; top: 0; left: 0; overflow: hidden;}
div.rate_number {font-size: 15rem; letter-spacing: 5px; line-height: 0.85em; text-align: right;}
div.rate_percentage {font-size: 3.2rem; text-align: right; font-weight: 700; line-height: 1em;}

#wrap_jc #ev_event .content-block .detail .jc__date{font-size: 4.2rem; font-weight: 700; text-align: center; margin: -0.5rem 0 0; position: relative;}
#wrap_jc #ev_event .content-block .detail .jc__date em{font-size: 2.35rem; font-weight: inherit;}
#wrap_jc #ev_event .content-block .detail .jc__date em sup{font-size: 100%; vertical-align: -12.5px; margin: 0 -8px;}
#wrap_jc #ev_event .content-block .detail .jc__date span{width: 40px; display: inline-block; position: relative;}
#wrap_jc #ev_event .content-block .detail .jc__date span:before{content: ''; display: block; width: 8px; height: 14px; position: absolute; top: 50%; left: 50%; background: #fff; margin: -20px 0 0 -5px; clip-path: polygon(0 0, 0% 100%, 100% 50%);}

#wrap_jc #ev_event .content-block .detail .jc__movie{background: rgb(10 20 65 / 75%); border: 1px solid #d0c360; padding: 3rem; position: relative;}
#wrap_jc #ev_event .content-block .detail .jc__movie a:hover{opacity: 0.75;}

#wrap_jc #ev_event .content-block .detail ul.howto{width: 100%; display: flex; justify-content: space-around;}
#wrap_jc #ev_event .content-block .detail ul.howto > li{width: 100%; background: rgb(25 20 20 / 1); margin: 0 1.5%; border: 1px solid #d0c360; position: relative;}
#wrap_jc #ev_event .content-block .detail ul.howto > li .step{width: 32.5%; background: #d0c360; color: #000; 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;}
#wrap_jc #ev_event .content-block .detail ul.howto > li .text{font-size: 1.8rem; font-weight: 600; line-height: 1.25em; padding: 1.5rem;}
#wrap_jc #ev_event .content-block .detail ul.howto > li .text span{display: block; font-size: 1.1rem; font-weight: normal; line-height: 1.65em; margin-top: 0.5rem;}
#wrap_jc #ev_event .content-block .detail ul.machine_list{width: 100%; max-width: 640px; display: flex; justify-content: center; align-items: flex-start; margin: 0 auto;}
#wrap_jc #ev_event .content-block .detail ul.machine_list > li{margin: 0 2.5rem;}


/* Contents 2 Ranking */
#wrap_jc #ev_ranking .jc__ranking{background: rgb(25 20 20 / 1); padding: 5rem 2.5rem; margin: 4rem 0; border: 1px solid #d0c360;}
#wrap_jc #ev_ranking .jc__rank_Area h3{width: 25%; background: #ffeb5d; color: #000; font-size: 1.6rem; font-weight: 600; letter-spacing: 0; line-height: 1em; text-align: center; margin: -5rem 0 2.5rem -2.5rem; padding: 1.0rem 1.5rem 1.0rem 0.5rem;
clip-path: polygon(0 0, 100% 0, 87.5% 100%, 0% 100%);}
#wrap_jc #ev_ranking .jc__rank_Area ul{display: flex; justify-content: space-between; align-items: center;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li{width: 100%; margin: 1.5rem 0;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li:nth-child(1){width: 20%;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__name{width: 420px;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_name,
#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_shop{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_name{font-size: 2.65rem; line-height: 1.35em;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_shop{font-size: 1.25rem; line-height: 1.8em;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point{text-align: right; font-size: 4.2rem; line-height: 1em;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point em{font-size: 2.25rem;}

#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank{font-size: 3rem; font-weight: 600; text-align: center;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div{width: 64px; font-size: 3.1rem; font-weight: 700; line-height: 1em; text-align: center; padding: 20px 0; color: #fff;}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_1{background-image: url(/img/event/cpn_jc/jc_rank_icon_1.png); background-position: 50% 50%; background-repeat: no-repeat; color: rgb(30 30 30);}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_2{background-image: url(/img/event/cpn_jc/jc_rank_icon_2.png); background-position: 50% 50%; background-repeat: no-repeat; color: rgb(30 30 30);}
#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_3{background-image: url(/img/event/cpn_jc/jc_rank_icon_3.png); background-position: 50% 50%; background-repeat: no-repeat; color: rgb(30 30 30);}

#wrap_jc #ev_ranking .jc__ranking .loginbox p{text-align: center; font-size: 1.25rem;}
#wrap_jc #ev_ranking .jc__ranking .none p{text-align: center; font-size: 2rem; margin: 5rem 0 2.5rem;}

/* Contents 3 Rewards */
#wrap_jc #ev_rewards .movie_area{width: 90%; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 auto;}
#wrap_jc #ev_rewards .movie{width: 50%; margin: 0 auto;}
#wrap_jc #ev_rewards .movie h4{width: 100%; display: inline-block; font-family: "Roboto", sans-serif; text-align: center; font-size: 2.0rem; font-weight: 700; letter-spacing: 0; margin: 0 0 1.5rem;
background: linear-gradient(0deg, #12b8ff 20%, #edff1b 40%, #ff3bb4 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
#wrap_jc #ev_rewards .movie h5{text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 1.35em; letter-spacing: 7px; margin-top: 1.8rem;}
#wrap_jc #ev_rewards .movie__wrap{width: 85%; position: relative; padding-top: 150.65%; margin: 0 auto;}
#wrap_jc #ev_rewards .movie__wrap iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#wrap_jc #ev_rewards .present{width: 100%; max-width: 820px; display: flex; justify-content: space-around; margin: 5rem auto;}
#wrap_jc #ev_rewards .present h5{color: #ffeb5d; font-size: 2.0rem; font-weight: 700; line-height: 1.4em; text-align: center; margin: 1.5rem 0;}
#wrap_jc #ev_rewards .present dl:before{content: ""; background-size: contain; background-repeat: no-repeat; width: 150px; height: 150px; position: absolute; top: -1.5rem; right: -1.75rem; z-index: 1;}
#wrap_jc #ev_rewards .present dl:nth-of-type(1):before{background-image: url(../img/event/cpn_jc/jc_badge_1.png);}
#wrap_jc #ev_rewards .present dl:nth-of-type(2):before{background-image: url(../img/event/cpn_jc/jc_badge_2.png);}
#wrap_jc #ev_rewards .present dl{width: 47.5%; display: flex; justify-content: space-around; flex-direction: column; background-color: rgb(25 20 20 / 1); border: 1px solid #d0c360; padding: 2.5rem; position: relative;}
#wrap_jc #ev_rewards .present dt,
#wrap_jc #ev_rewards .present dd{width: 100%; display: flex; flex-direction: column; flex-grow: 1;}
#wrap_jc #ev_rewards .present dd p{font-size: 1.6rem; line-height: 1.6em; letter-spacing: 2px; flex-grow: 1;}
#wrap_jc #ev_rewards .present dl.rank dt .images{margin: 3.5rem 1rem 2rem;}
#wrap_jc #ev_rewards .present dl.play dt .images{transform: rotate(-17deg); margin: 2rem 0;}

/* Other Links */
#ev_other{background: rgb(45 45 45 / 0.95); padding: 5rem 0;}
#ev_other a:hover{text-decoration: none;}
#ev_other a:hover img{opacity: 0.55; transition: all .3s;}
#ev_other img{opacity: 1.0; transition: all .3s;}
#ev_other ul{width: 50%; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 auto;}
#ev_other ul > li{width: 100%;}
#ev_other ul > li p{text-align: center; margin-top: 4px; font-size: 1.25rem;}

/* Notice */
#ev_notice{background: rgb(25 25 25 / 1); color: #fff; padding: 8rem 0;}
#ev_notice h4{font-size: 3.25rem; font-weight: 500; margin: 0; padding: 0;}
#ev_notice .detail{margin: 2.5rem 0;}
#ev_notice .detail:last-of-type{margin: 2.5rem 0 0;}
#ev_notice .detail h5{font-size: 1.8rem; font-weight: 500;}
#ev_notice .detail ul > li{font-size: 1.25rem; line-height: 1.8em; list-style: disc; margin: 0 0 0 40px}



/*responsive ==============================================================================*/
@media (max-width: 767px) {
/*smart phone*/

	/*Event - Common*/
	.sp_display{display:block !important;}
	.pc_display{display:none !important;}
	hr {margin: 4rem 0;}

	/*** Event - JEWELS CRUSH ***/
	.content__ttl{padding: 2.5rem 0;}
	.content__ttl h2 {font-size: 2.6rem;}
	.content__ttl h2 span{width: 125px; font-size: 0.95rem; letter-spacing: 3px;}
	.content__ttl h2 span:before{width: 25px;}
	.content__ttl h2 span:after{width: 25px;}
	.content-block{width: 90%;}
	.content-block .jc_inner{margin: 4rem 0;}
	.content-block .detail h3{font-size: 2.4rem; margin: 2rem 0;}
	.content-block .detail h4{text-align: left; font-size: 2.0rem; line-height: 1.4em; letter-spacing: 0;}
	.content-block .detail h4 em{margin: 0 2px;}

	/* link */
	.boxLink{width: 90%; max-width: 360px; font-size: 1.6rem; margin: 0.5rem auto; padding: 1.5rem 1rem 1.25rem;}
	.boxLink::before,
	.boxLink::after {width: 11px; height: 3px; top: calc(50% - 2px); transform-origin: calc(100% - 1.05px) 50%;}

	/* Loader - Animation */
	.loading-Icon {width: 105px; height: 90px;}
	.loading-text{font-size: 1.15rem; margin: 0 0 0 14px;}
	.loader_letter:nth-child(1){left: 0;}
	.loader_letter:nth-child(2){left: 12px;}
	.loader_letter:nth-child(3){left: 24px;}
	.loader_letter:nth-child(4){left: 36px;}
	.loader_letter:nth-child(5){left: 48px;}
	.loader_letter:nth-child(6){left: 56px;}
	.loader_letter:nth-child(7){left: 68px;}
	.ico_jewel{width: 100px; height: 80px;}

	/* Navi */
	nav{padding: 40px 0; background: none; border: none;}
	nav .navi__area h2.logo{display: none;}
	nav .navi__area .jc__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{padding: 40px 0; background: none; border: none;}
	nav.g-nav #hju__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: 38px; height: 38px; position: absolute; top: 50%; right: 0; margin: -20px 10px 0 0; padding: 6px; border-radius: 4px; background: rgba(20, 20, 20, 0.75); border: 2px solid #191414;}
	.menu span:before {bottom: -9px;}
	.menu span:after {bottom: -18px;}
	.menu span,
	.menu span::before,
	.menu span::after {content: ''; display: block; width: 22px; height: 4px; border-radius: 0; background: #d6c96f; transition: 0.5s; position: absolute;}

	/* Main image */
	.main__area .hero{height: calc(85vh - 47px);}
	.vj-jc{width: 100%; max-width: 480px; margin-top: -285px; margin-left: -240px;}
	.vj-jc #scroll-down::before {content: ''; height: 25px; top: 8px;}

	/* Contents 1 Event*/
	.jc_chach h2{font-size: 1.65rem; line-height: 1.5em;}
	.jc_chach h2 em{font-size: 2.7rem; margin: 0 1px;}

	/* 0623 add */
	.content__extra{padding: 2.5rem 0;}
	.content__extra h3 {display: block; font-size: 2.4rem; line-height: 1.25em; margin: 0 1px; padding: 0;
	background: linear-gradient(0deg, #12b8ff 0%, #edff1b 40%, #ff3bb4 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
	.content__extra p{font-size: 1.35rem; line-height: 1.5em; padding: 1rem 1rem 0;}
	.content__extra p em{font-size: 1.65rem;}

	/* Data */
	div#ev_data{margin: 4rem 0;}
	div#ev_data h3{font-size: 2.6rem; line-height: 1.325em; margin: 2rem 0;}
	div#ev_data .attention{text-align: left; margin: 1.0rem 0 0;}
	div#ev_data .attention p{font-size: 1.05rem; line-height: 1.55em;}
	div.jc_Score{height: 125px;}
	div.jc_Score .score_detail .score_title{width: 30%; font-size: 1.45rem;}
	div.jc_Score .score_detail .total_score {width: 75%; margin: 0 2.5%;}
	div.rate_number {font-size: 6rem; letter-spacing: 3px; line-height: 1.0em;}
	div.rate_percentage {font-size: 2.25rem;}
	#wrap_jc #ev_event .content-block .detail .jc__date{font-size: 2.7rem;}
	#wrap_jc #ev_event .content-block .detail .jc__date em{font-size: 1.55rem;}
	#wrap_jc #ev_event .content-block .detail .jc__date em sup{vertical-align: -7.5px;}
	#wrap_jc #ev_event .content-block .detail .jc__date span:before{width: 8px; height: 16px; margin: -20px 0 0 -10px; transform: rotate(90deg);}
	#wrap_jc #ev_event .content-block .detail .jc__movie{padding: 1.25rem;}
	#wrap_jc #ev_event .content-block .detail ul.howto{width: 90%; max-width: 450px; margin: 0 auto; justify-content: flex-start; flex-direction: column;}
	#wrap_jc #ev_event .content-block .detail ul.howto > li{margin: 1.5rem 0;}
	#wrap_jc #ev_event .content-block .detail ul.howto > li .step{width: 100%; max-width: 125px; font-size: 1.15rem; margin: -0.1rem 0 0 -0.1rem; padding: 1.0rem 1.75rem 0.85rem 0.25rem;}
	#wrap_jc #ev_event .content-block .detail ul.howto > li .text{font-size: 1.4rem; letter-spacing: 0; padding: 1.25rem;}
	#wrap_jc #ev_event .content-block .detail ul.howto > li .text span{line-height: 1.4em; margin-top: 0.75rem;}
	#wrap_jc #ev_event .content-block .detail ul.machine_list{max-width: 500px;}
	#wrap_jc #ev_event .content-block .detail ul.machine_list > li{margin: 0 1.25rem;}

	/* Contents 2 Ranking */
	#wrap_jc #ev_ranking .jc__ranking{padding: 2.5rem 1.5rem; margin: 2rem 0;}
	#wrap_jc #ev_ranking .jc__rank_Area h3{width: 100%; max-width: 125px; font-size: 1.15rem; margin: -2.6rem 0 1.26rem -1.6rem; padding: 1.0rem 1.75rem 0.85rem 0.25rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li{margin: 0.75rem 0;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li:nth-child(1){width: 25%;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__name{width: 230px;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_name{font-size: 1.5rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_shop{font-size: 1.0rem; letter-spacing: 0;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point{font-size: 2.85rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point em{font-size: 1.175rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div{width: 42px; font-size: 2.1rem; padding: 12px 0;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_1,
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_2,
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div.top_3{background-size: contain;}
	#wrap_jc #ev_ranking .jc__ranking .loginbox p{font-size: 1.05rem; letter-spacing: 0;}
	#wrap_jc #ev_ranking .jc__ranking .none p{font-size: 1.4rem; letter-spacing: 0; margin: 4.5rem 0 4rem;}

	/* Contents 3 Rewards */
	#wrap_jc #ev_rewards .movie_area{width: 100%; flex-direction: column;}
	#wrap_jc #ev_rewards .movie{width: 100%; margin: 0 auto 2.5rem;}
	#wrap_jc #ev_rewards .movie:nth-child(2){margin: 0 auto;}
	#wrap_jc #ev_rewards .movie h4{font-size: 1.6rem; margin: 0 0 1.0rem;}
	#wrap_jc #ev_rewards .movie h5{font-size: 1.25rem; margin-top: 1.25rem;}
	#wrap_jc #ev_rewards .movie__wrap{width: 75%; padding-top: 134.65%;}
	#wrap_jc #ev_rewards .present{width: 90%; max-width: 450px; justify-content: flex-start; margin: 2.5rem auto; flex-direction: column;}
	#wrap_jc #ev_rewards .present h5{font-size: 1.8rem; margin: 1.0rem 0;}
	#wrap_jc #ev_rewards .present dl:before{width: 125px; height: 125px;}
	#wrap_jc #ev_rewards .present dl{width: 100%; justify-content: flex-start; padding: 1.25rem; margin: 1.5rem 0;}
	#wrap_jc #ev_rewards .present dd p{font-size: 1.4rem; line-height: 1.5em; letter-spacing: 0;}
	#wrap_jc #ev_rewards .present dl.rank dt .images{margin: 2.5rem 1rem 1.0rem;}
	#wrap_jc #ev_rewards .present dl.play dt .images{width: 80%; max-width: 340px;transform: rotate(25deg); margin: 1.25em auto;}

	/* Other Links */
	#ev_other{padding: 4rem 0;}
	#ev_other ul{width: 100%; max-width: 480px; justify-content: flex-start; flex-direction: column; margin: 0 auto;}
	#ev_other ul > li{width: 100%; margin-bottom: 1.5rem;}
	#ev_other ul > li:last-child;{margin-bottom: 0;}

	/* Notice */
	#ev_notice{padding: 4rem 0;}
	#ev_notice h4{font-size: 2.4rem;}
	#ev_notice .detail{margin: 1.25rem 0;}
	#ev_notice .detail:last-of-type{margin: 1.25rem 0 0 0;}
	#ev_notice .detail h5{font-size: 1.5rem;}
	#ev_notice .detail ul > li{font-size: 1.15rem; letter-spacing: 0; margin: 0 0 0 20px;}

	/* == Modal ================================================== */
	#jc__modal{display: block;}
	.jc__js-modal__bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; display: none;}
	.jc__js-modal__main {display: none; width: 100%; height: 100%; padding: 0; margin: 0; position: fixed; top: 0; left: 0; background-color: rgb(0 0 0 / 0.95); z-index: 50;}
	.jc__js-modal__main .modal__contentsBox{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0;}
	.jc__js-modal__main .modal__contentsBox .jc__modal__menu ul{list-style: none; margin: 0; padding: 0;}
	.jc__js-modal__main .modal__contentsBox .jc__modal__menu ul > li a{display: flex; justify-content: flex-start; align-items: center; color: #dbcf6e; font-size: 3.8rem; font-weight: 700; padding: 1.85rem 0;}
	.jc__js-modal__main .modal__contentsBox .jc__modal__menu ul > li a:hover {text-decoration: none !important;}
	.jc__js-modal__btn--close--fix {display: block; width: 100%; max-width: 300px; background: #dbcf6e; border: 2px solid #534f2f; border-radius: 30px; color: #1f1f1f; 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;}
	.jc__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
	.jc__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

}

@media (max-width: 560px) {
	/* Main image */
	.main__area .hero{height: calc(80vh - 47px); min-height: 320px;}
	.vj-jc{max-width: 340px; margin-top: -200px; margin-left: -170px;}
	.video_box .overlay {height: calc(100dvh - 0px);}

	/* Contents 2 Ranking */
	#wrap_jc #ev_ranking .jc__rank_Area ul > li:nth-child(1){width: 30%;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__name{width: 140px;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_name{font-size: 1.25rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .cseq_shop{font-size: 0.95rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point{font-size: 1.45rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__mydata__log .jc_point em{font-size: 0.9rem;}
	#wrap_jc #ev_ranking .jc__rank_Area ul > li .jc__ranking__rank div{width: 32px; font-size: 1.5rem; padding: 8.5px 0;}
	#wrap_jc #ev_ranking .jc__ranking .loginbox p{font-size: 0.9rem;}

}
@media (max-width: 400px) {
	/* Contents 1 Schedule */
	#wrap_jc #contents1 {margin-top: calc(480px - 47px);}
	/* Data */
	div.jc_Score{height: 105px;}
	div.jc_Score .score_detail .score_title{font-size: 1.2rem;}
	div.jc_Score .score_detail .total_score {width: 70%;}
	div.rate_number {font-size: 4.35rem; letter-spacing: 2px;}
	div.rate_percentage {font-size: 1.9rem;}
}
@media (min-width: 768px) and (max-width: 991px) {/*tablet*/}
@media (min-width: 992px) and (max-width: 1199px) {/* desk top */}
@media (min-width: 1200px) {/*desk top learge */}
@media (min-width: 768px) {/*sm~lg*/}
@media screen and (max-width: 1024px) {
	.video_box .video-background {top: 0;}
}

/*animated ==============================================================================*/
.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: #8d78c8; stroke-dashoffset: 1800;}
  10%  {fill: transparent;}
  20%  {fill: #fff; stroke-dashoffset: 0;}
  70%  {fill: #fff; stroke-dashoffset: 0;}
  80%  {fill: transparent;}
  90%  {fill: #8d78c8; stroke-dashoffset: 1800;}
  100% {fill: #8d78c8; 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);}
}