@charset "utf-8";
/* 2026/08 update */
html,
body {background-color: rgb(0 0 0 / 1); margin: 0; width: 100%; height: auto !important; overscroll-behavior-y: none;}
html {-webkit-text-size-adjust: none;}
html::-webkit-scrollbar {width: 16px; background: rgb(1 32 34 / 1);}
html::-webkit-scrollbar-thumb {background-color: #faec00; border: 3px solid rgb(1 32 34 / 1); border-radius: 3px;}


/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible;}
.flex{width:100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
.bout-bg{width: 100%; height: 100%; background-color: rgb(0 0 0 / 0.5); top: 0; left: 0; background-image: linear-gradient(45deg, rgb(1 32 34 / 0.35) 50%, rgb(255 255 255 / 0.1) 25%); background-size: 3px 3px;}
header {position: relative; top: 0px; margin: 0; transition: all .3s;}
header {background-color: #fff;}
footer {position: relative;}
::selection {color: #000; background-color: #faec00;}


/*** Event - font-family ***/
.wk-cg{font-family: "Cormorant Garamond", serif; font-style: normal;}
.wk-cp-reg {font-family: "Chakra Petch", sans-serif; font-weight: 400; font-style: normal;}
.wk-cp-bold {font-family: "Chakra Petch", sans-serif; font-weight: 700; font-style: normal;}
.wk-nsjp400 { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
.wk-nsjp900 { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 900; font-style: normal;}


/* Loader */
.loader{background: rgb(1 32 34 / 1); width: 100%; height: 100%; margin: 0; padding: 0; position: fixed; display: flex; align-items: center; justify-content: center; left: 0; top: 0; z-index: 1000; object-fit: cover;}
/* Loader - Animation */
.loader-animation {position: relative;}
/* Loader - Animation */
.loading-Icon {width: 150px; height: 135px; margin: 0 auto; position: relative;}
.ico_warakemo{width: 120px; height: 125px; opacity: 1;}
.ico_warakemo path {fill: #faec00; animation-name: fadeInOut; animation-duration: 2s; animation-iteration-count: infinite;}


/*** Event - Nav ***/
/* Navi */
nav {width: 6.25rem; height: 6.25rem; position: absolute; top: min(3.3333333333vh, 20px); right: min(3.3333333333vw, 20px); padding: 0; background: none; border: none; z-index: 49;}
nav.fixed{position: fixed;}
nav #wk__slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgb(0 0 0 / 0.85); z-index: 5;}
nav .menu {display: block; background: rgb(0 0 0 / 0.35); position: relative; top: 50%; right: 0; margin: -50% 0 0 0; padding: 1.25rem 0; cursor: pointer;}
nav .menu span{display: block; height: 3px; margin: 0.75rem; background: #fff; border-radius: 2px; transition: 0.4s;}
nav .wk__js-modal__btn.active span{background: #faec00;}
nav .wk__js-modal__btn.active span:nth-of-type(1) {transform: translateY(1rem) rotate(45deg); -webkit-transform: translateY(1rem) rotate(45deg);}
nav .wk__js-modal__btn.active span:nth-of-type(2) {opacity: 0;}
nav .wk__js-modal__btn.active span:nth-of-type(3) {transform: translateY(-1.1rem) rotate(-45deg); -webkit-transform: translateY(-1.1rem) rotate(-45deg);}

/* Navi - Modal */
#wk__modal{display: block;}
.wk__js-modal__bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 11; display: none;}
.wk__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;}
.wk__js-modal__main .modal__contentsBox{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0;}
.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul{list-style: none; margin: 0; padding: 0;}
.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul > li a {display: block; text-align: center; color: #fff !important; font-size: 5.0rem; font-weight: 700; line-height: 1.25em; padding: 0; margin: 2.75rem 0; position: relative;}
.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul > li a sup{display: block; font-size: 1.45rem; line-height: 1; font-style: inherit; color: #faec00; top: 0;}
.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul > li a em{color: #faec00; font-weight: inherit; font-style: inherit;}
.wk__js-modal__btn--close--fix {width: 100%; max-width: 320px; background: rgb(250 236 0 / 1); outline: none; font-size: 2.0rem; font-weight: 700; line-height: 1.15; text-align: center; color: #000; margin-top: 2.5rem; padding: 1.75rem 1.75rem 1.5rem; box-shadow: inset 0 0 0 1px rgb(250 236 0 / 1); position: relative; transition: all .35s; cursor: pointer; }
.wk__js-modal__btn--close--fix:hover{color: #faec00; background: rgb(0 0 0 / 1);}
.wk__js-modal__btn--close--fix::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.wk__js-modal__btn--close--fix::after{content: ""; display: block; position: absolute; top: 50%; right: 2.5rem; border-style: solid; border-color: transparent; border-width: 0.3em 0.425em; border-left-color: currentColor; border-right: 0; margin: -0.575rem 0 0 0;}
.wk__js-modal__btn--close--fix span{position: relative;}
.wk__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
.wk__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}


/*** Event - h ***/
h2,h3,h4,h5{color: #fff; margin: 0; padding: 0;}
.wk__title h2{font-size: 7rem; font-weight: 600; text-align: center; position: relative; margin: 0;}


/*** Event - hr ***/
hr{border-top: 1px dotted #ffff; border-bottom: none; margin: 5rem 0;}


/*** Event - marquee ***/
.marquee {width: 110%; grid-column-gap: 1rem; background-color: #faec00; margin: 0 -5%; padding: 2.5rem 0; display: flex; overflow: hidden; position: relative; top: 0; left: 0; z-index: 1;}
.marquee.left{transform: rotate(-5.75deg);}
.marquee.right{transform: rotate(5.75deg);}
.marquee.left .bull__scroll{animation: maq-left 4s linear infinite;}
.marquee.right .bull__scroll{animation: maq-right 4s linear infinite;}
.marquee-content {display: flex; flex: none; justify-content: space-around; grid-column-gap: 1rem;}
.text-block {color: #000; font-size: 7vw; line-height: 1;}
.text-block::before{content: ""; display: inline-block; width: 4.5vw; height: 80%; background-image: url(../img/event/cpn_warakemo/wk__icon.svg); background-size: cover; background-repeat: no-repeat; position: relative; top: 0; left: 0; margin: 0 1.5vw 0 0.75vw;}


/*** Event - a&Btn ***/
a,a:hover{transition: all .3s;}
.modal__btn{line-height: 0; text-align: center;}
.modal__btn div.wk__btn{cursor: pointer;}
.btnArea{margin: 0; padding: 0; line-height: 0;}
.btnArea a{display: inline-block; transition: all .35s;}
.btnArea a.wk__btn,
.modal__btn div.wk__btn{display: inline-block; width: 100%; outline: none; font-size: 2.0rem; font-weight: 700; line-height: 1.15; color: #000; background: rgb(250 236 0 / 1); padding: 1.75rem 1.75rem 1.5rem; box-shadow: inset 0 0 0 1px rgb(250 236 0 / 1); position: relative;}
.btnArea a.wk__btn:hover,
.modal__btn div.wk__btn:hover{color: #faec00; background: rgb(0 0 0 / 1);}
.btnArea a.wk__btn::before,
.modal__btn div.wk__btn::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.35s ease; transition-property: transform;}
.btnArea a.wk__btn::after,
.modal__btn div.wk__btn::after{content: ""; display: block; position: absolute; top: 50%; right: 2.5rem; border-style: solid; border-color: transparent; border-width: 0.3em 0.425em; border-left-color: currentColor; border-right: 0; margin: -0.575rem 0 0 0;}
.btnArea a.wk__btn span,
.modal__btn div.wk__btn span{position: relative;}

.btnArea a.disable{color: #666; box-shadow: inset 0 0 0 3px rgb(75 75 75 / 1); cursor: no-drop;}
.btnArea a.disable::before{background: none;}
.btnArea a.disable::after{border-left-color: #666;}
.btnArea a.disable:hover{color: #666;}

#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: 7.25rem; 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: 0; width: 7px; height: 7px; border-right: 2px solid #faec00; border-top: 2px solid #faec00; 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.82rem; bottom: 5px; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000; white-space: nowrap;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;}


/*** Event - warakemo ***/
#wrap{background:none !important;}
#wrap_wk{color: #fff; font-size: 2.2rem; font-weight: 500; line-height: 1.6; position: relative; overflow: hidden;}
section{width: 100%; padding: 0; margin: 0; position: relative; z-index: 1;}
.content-wrapper{width: 100%; padding: 7rem 0;}
.content-block{width: 100%; max-width: 970px; margin: 0 auto; padding: 0; position: relative;}
#wrap_wk .overlay{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:url(../img/event/cpn_warakemo/wk__main_bg.webp); background-repeat: no-repeat; background-size: cover; z-index: 0;}
#wrap_wk .overlay:before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(1 25 32 / 0.75);}


/* Contents Common */
/* Main image */
section.hero{background-image: url(../img/event/cpn_warakemo/wk__bg.webp); background-repeat: no-repeat; background-size: cover; background-position-y: center; position: relative; overflow: hidden; z-index: 1;}
section.hero .wk__mv{padding: 7.25rem;}
section.hero .hero-effect {width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: -1; background-image: linear-gradient(45deg, rgb(0 0 0 / 1) 25%, rgb(0 0 0 / 0.05) 25%); background-size: 2px 2px;}


/* Section:Outline */
section.outline .content-wrapper{padding: 7rem 0 10rem;}
section.outline .wk__chach h2{font-size: 5.75rem; line-height: 1.25em; color: #faec00; margin: 0 0 5rem; transform: scaleX(1);}
section.outline .wk__chach h3{text-align: center; font-size: 2.75rem; line-height: 1.4em; margin: 5rem 0; letter-spacing: 2px; position: relative; z-index: 0;}
section.outline .wk__chach h3::after{content: ""; display: block; width: 280px; height: 200px; background-image: url(../img/event/cpn_warakemo/wk__chach_h3.webp); background-size: contain; background-repeat: no-repeat; position: absolute; top: -140%; right: -12.5rem; z-index: -1;}
section.outline .wk__chach h3 em{color: #faec00; font-weight: inherit;}
section.outline date{display: block; width: 100%; margin: 3rem auto 0;}
section.outline date dl{width: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 2rem 0;}
section.outline date dt{display: block; width: 100%; max-width: 260px; background: #faec00; color: #000; font-size: 2.7rem; font-weight: 700; text-align: center; padding: 0.65rem 0.5rem; margin-right: 2.75rem;}
section.outline date dd{font-size: 4.25rem; font-weight: 700; color: #fff; line-height: 1;}
section.outline date dd em{font-size: 2.2rem; font-weight: 700; margin: 0 4px;}
section.outline date dd sup{top: 0; font-size: inherit; margin: 0 -10px;}


/* Section:bull */
section.bull .content-wrapper{padding: 10rem 0;}
section.bull .wk__detail div.ev_100million,
section.bull .wk__detail div.rewards{position: relative;}
section.bull .wk__detail h3{color: #faec00; font-size: 7rem; text-align: center; margin: 4rem 0; position: relative; z-index: 1;}
section.bull .wk__detail p sup {font-size: 1.15rem; margin: 0 -3px; vertical-align: sub; letter-spacing: 0;}
section.bull .wk__detail .rewards h3{font-size: 5rem;}
section.bull .wk__detail .rewards p{font-size: 1.75rem; text-align: center; margin: 2.5rem 0;}
section.bull .wk__detail .rewards em{color: #faec00; font-weight: inherit;}
section.bull .wk__detail .rewards .flex{justify-content: space-between;}
section.bull .wk__detail .rewards .box{width: 100%; background: rgb(0 0 0 / 0.3); border: 1px solid; padding: 5rem; border-image: linear-gradient(to top, #8e7835, #f6e6b5, #8e7835) 1;}
section.bull .wk__detail .rewards .box h4{display: block; width: 100%; border: 1px solid; border-image: linear-gradient(to top, #8e7835, #f6e6b5, #8e7835) 1; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: 1px; padding: 1.5rem;}
section.bull .wk__detail .rewards .box p.tips{font-size: 1.25rem; font-family: initial; text-align: center; margin: 1.5rem 0 0;}
section.bull .wk__detail .rewards .box.grp-1 .movie{width: 100%; margin: 0 auto 4rem; position: relative;}
section.bull .wk__detail .rewards .box.grp-1 .movie a{display: block; position: relative;}
section.bull .wk__detail .rewards .box.grp-1 .movie a:before {content: ""; background-image: url(../img/event/cpn_warakemo/wk__play.svg); background-repeat: no-repeat; background-size: contain; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 1;}
section.bull .wk__detail .rewards .box.grp-1 .movie a:after {content: ""; display: block; width: 100%; height: 100%; background-color: rgb(0 0 0 / 1.0); position: absolute; top: 0; left: 0; z-index: -1;}
section.bull .wk__detail .rewards .box.grp-1 .movie a img{opacity: 0.75; position: relative; z-index: 0; transition: all 0.35s ease;}
section.bull .wk__detail .rewards .box.grp-1 .movie a:hover img{opacity: 0.55; position: relative; z-index: 0;}
section.bull .wk__detail .rewards .box.grp-2{width: 100%; position: relative;}
section.bull .wk__detail .rewards .box.grp-2:before{content: ""; background-image: url(../img/event/cpn_warakemo/wk_sec3_icon_01.webp); background-repeat: no-repeat; background-size: contain; width: 140px; height: 140px; position: absolute; top: 0; right: 0; margin: -45px -45px 0 0; z-index: 1;}
section.bull .wk__detail .rewards .box.grp-3{width: 47.5%; margin: 5% 0 0; padding: 2.5rem 5rem; position: relative;}
section.bull .wk__detail .rewards .box.grp-3 .goods-title{width: 100%; font-size: 1.5rem; font-weight: 700; text-align: center; border: 1px solid; border-image: linear-gradient(to top, #8e7835, #f6e6b5, #8e7835) 1; margin: 1.25rem 0; padding: 1.0rem;}
section.bull .wk__detail .rewards .box.grp-3 p.tips{text-align: left; margin: 0; padding: 0;}
section.bull .wk__detail .rewards .box.grp-4{width: 100%; margin: 5% 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; position: relative;}
section.bull .wk__detail .rewards .box.grp-4 .goods-title{width: 60%;}
section.bull .wk__detail .rewards .box.grp-4 .goods-title p{font-size: 3.2rem; font-weight: 700; line-height: 1.4em; text-align: left;}
section.bull .wk__detail .rewards .box.grp-4 .goods-title span{width: 100%; max-width: 250px; display: block; background: #faec00; color: #000; font-size: 2.6rem; font-weight: 700; text-align: center; padding: 0.5rem 1rem; border-radius: 50px;}
section.bull .wk__detail .rewards .box.grp-4 figure{width: 35%; margin: 0 2.5%;}
section.bull .wk__detail .rewards .box.grp-4 figure img{transform: rotate(15deg);}
section.bull .wk__detail .rewards .box.grp-3:before,
section.bull .wk__detail .rewards .box.grp-4:before{content: ""; background-image: url(../img/event/cpn_warakemo/wk_sec3_icon_02.webp); background-repeat: no-repeat; background-size: contain; width: 140px; height: 140px; position: absolute; top: 0; right: 0; margin: -25px -40px 0 0; z-index: 1;}
section.bull .wk__detail .cp__bull{margin: 5rem 0; padding: 5rem; position: relative;}
section.bull .wk__detail table{margin: 2rem 0;}
section.bull .wk__detail th{width: 180px; table-layout: fixed; background: #faec00; text-align: center; color: #000; font-weight: 700; line-height: 1.25; padding: 1.5rem; border-bottom: 1px solid #09051f; white-space: nowrap;}
section.bull .wk__detail td{background: rgb(0 0 0 / 0.3); border-bottom: 1px solid #faec00; font-size: 14.5px; padding: 2.5rem; white-space: nowrap;}
section.bull .wk__detail ul{width: 100%;}
section.bull .wk__detail ul > li{width: 100%; margin: 0 0 0 2.5rem; list-style: disc;}
section.bull .wk__detail .tablebox h4{font-size: 2.4rem; font-weight: 700; line-height: 1; margin: 0;}
section.bull .wk__detail table.level{margin: 2rem 0;}
section.bull .wk__detail table.level th{font-size: 1.4rem; border-right: 1px solid #09051f;}
section.bull .wk__detail table.level th em{display: block; font-weight: inherit;}
section.bull .wk__detail table.level td{border-right: 1px solid #2a2a2a; font-size: 1.75rem; padding: 1.5rem; text-align: center;}

#bullEvent{}
#bullEvent h4{width: 100%; background: #faec00; font-weight: 700; font-size: 3.2rem; line-height: 1; text-align: center; color: #000; padding: 1.5rem;}
#bullEvent p{text-align: center; font-size: 1.25rem; font-family: initial; margin: 1.5rem 0 0;}
#bullEvent .innner{margin-bottom: 0;}
#bullEvent .count{text-align: right; margin: -1.5rem 0 0;}
#bullEvent div.num{display: inline; font-size: 14.3333rem; letter-spacing: -3px; margin: 0; padding: 0;}
#bullEvent div em{font-size: 7rem;}
#bullEvent .progress{width: 100%; display: table; margin: 0;}
#bullEvent .progress .title{display: table-cell; width: 10%; height: 30px; font-size: 1.85rem; vertical-align: middle; line-height: 1;}
#bullEvent .progress .bar{display: table-cell; width: 100%; height: 30px; background: rgb(0 0 0 / 1); position: relative; z-index: 0;}
#bullEvent .progress .bar sup{display: inline-block; position: absolute; top: 50%; right: 0; line-height: 1; padding: 0.5rem; margin: -1.35rem 0; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;}
#bullEvent .progress .bar span{display: block; background: #faec00; height: 30px;}
#bullEvent .playdata{display: flex; justify-content: space-between; align-items: center; width: 100%;}
#bullEvent .playdata .status{width: 100%; max-width: 500px;}
#bullEvent .playdata .status dl{display: flex; justify-content: flex-start; align-items: center; width: 320px; background: rgb(250 236 0 / 1); margin-bottom: 2rem;}
#bullEvent .playdata .status dt,
#bullEvent .playdata .status dd{font-size: 1.8rem; font-weight: 700; line-height: 1; padding: 1.0rem 1rem 0.75rem; text-align: center; white-space: nowrap;}
#bullEvent .playdata .status dt{background: rgb(0 0 0 / 1); border: 1px solid #faec00; color: #faec00;}
#bullEvent .playdata .status dd{width: 100%; color: #000;}
#bullEvent .playdata .status data{display: block; font-size: 3.7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#bullEvent .rewards{width: 100%; background: rgb(0 0 0 / 0.75); border: 1px solid; padding: 3rem;border-image: linear-gradient(to top, #8e7835, #f6e6b5, #8e7835) 1;}
#bullEvent .rewards h5{background: rgb(0 0 0 / 1); text-align: center; color: #faec00; font-size: 1.05rem; font-weight: 700; letter-spacing: 1px; border: 1px solid; padding: 0.75rem; margin-bottom: 0.25rem;}
#bullEvent .rewards h5 div{display: inline; font-size: 2rem; letter-spacing: 0; margin: 0 -1px;}
#bullEvent .rewards ul{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; flex-direction: row;}
#bullEvent .rewards ul > li{width: 24%; margin: 0 auto; list-style: none;}
#bullEvent .rewards figure{width: 100%; margin-bottom: 1.5rem;}
#bullEvent .rewards figcaption{background: rgb(255 255 255 / 0.175); font-size: 0.95rem; text-align: center; margin: 0; padding: 0.75rem 0 0.65rem;}
#bullEvent .rewards .btnArea a{padding: 2rem; font-size: 1.45rem;}
#bullEvent .rewards .btnArea a.enable{background: rgb(255 0 234 / 1); box-shadow: inset 0 0 0 1px rgb(255 0 234 / 1); color: #fff;}
#bullEvent .rewards .btnArea a.dissable{background: rgb(62 62 62 / 1); box-shadow: inset 0 0 0 1px rgb(62 62 62 / 1); color: #787878;}
#bullEvent .login{display: block; width: 100%; margin: 5rem auto 0;}
#bullEvent .login .btnArea{width: 100%; max-width: 580px; margin: 0 auto;}


/* Section:Present */
section.present .content-wrapper{padding: 10rem 0 7rem;}
section.present .wk__detail h3{text-align: center; font-size: 2.4rem; line-height: 1.5em; margin: 2rem 0;}
section.present .wk__detail p{margin: 0;}
section.present .wk__detail p sup{font-size: 1.15rem; margin: 0 -3px; vertical-align: sub; letter-spacing: 1px;}
section.present .wk__detail p.tips{color: #faec00;}
section.present .wk__detail div.cp__rewards{margin: 5rem 0 2.5rem; padding: 5rem; position: relative;}
section.present .wk__detail div.cp__rewards figure{position: relative;}
section.present .wk__detail div.cp__rewards a{display: block; width: 100%; max-width: 840px; margin: 0 auto;}
section.present .wk__detail div.cp__rewards a figure img{transition: all 0.35s ease;}
section.present .wk__detail div.cp__rewards a:hover figure img{opacity: 0.75;}
section.present .wk__detail table{margin: 2.5rem 0 0;}
section.present .wk__detail th{width: 180px; table-layout: fixed; background: #faec00; text-align: center; color: #000; font-weight: 700; line-height: 1.25; padding: 1.5rem; border-bottom: 1px solid #09051f; white-space: nowrap;}
section.present .wk__detail td{background: rgb(0 0 0 / 0.3); border-bottom: 1px solid #faec00; font-size: 14.5px; padding: 2.5rem; white-space: nowrap;}
section.present .wk__detail td ul{margin-bottom: 0.5rem;}
section.present .wk__detail td ul > li{list-style: disc; margin-left: 20px;}


/* Section:Shop List */
section.shop {background: rgb(96 70 140 / 0.35);}
section.shop .content-wrapper{padding: 7rem 0 3.5rem;}
section.shop .wk__list{margin: 5rem 0 0; padding: 5rem; align-items: center; position: relative;}
section.shop .wk__list h3{width: 100%; font-size: 2.5rem; font-weight: 800; line-height: 2rem; color: #fff; margin: 0 0 2.5rem;}
section.shop .wk__list h3 em{font-weight: inherit; color: #faec00;}
section.shop .wk__list .detail{width: 100%;}
section.shop .wk__list .detail p{font-size: 1.45rem; line-height: 2.75rem; margin: 0 0 1.75rem;}
section.shop .wk__list .btnArea{width: 100%; max-width: 580px; margin: 2rem auto 0;}


/* Section:APP Download */
section.app {background: rgb(96 70 140 / 0.35);}
section.app .content-wrapper{padding: 3.5rem 0 7rem;}
section.app .wk__dl{margin: 5rem 0 0; padding: 5rem; align-items: center; position: relative;}
section.app .wk__dl h3{width: 100%; font-size: 2.5rem; font-weight: 800; line-height: 2rem; color: #fff; margin: 0 0 2.5rem;}
section.app .wk__dl h3 em{font-weight: inherit; color: #faec00;}
section.app .wk__dl .detail{width: 100%;}
section.app .wk__dl .detail p{font-size: 1.45rem; line-height: 2.75rem; margin: 0 0 1.75rem;}
section.app .wk__dl .link{width: 70%; margin: 2rem auto 0;}
section.app .wk__dl .link ul{max-width: 580px; justify-content: space-around; margin: 0 auto;}
section.app .wk__dl .link ul > li{width: 48%;}
section.app .wk__dl .link a:hover{opacity: 0.55;}


/* Section:Campaign */
section.campaign .wk__detail h3{color: #faec00; font-size: 3rem; text-align: center;}
section.campaign .wk__detail dl{width: 100%;}
section.campaign .wk__detail dt{width: 100%; max-width: none; margin: 5rem auto;}
section.campaign .wk__detail dt.sns{max-width: 540px; height: auto; top: 0;}
section.campaign .wk__detail table{margin: 2rem 0 0;}
section.campaign .wk__detail th{width: 180px; table-layout: fixed; background: #faec00; text-align: center; color: #000; font-weight: 700; line-height: 1.25; padding: 1.5rem; border-bottom: 1px solid #09051f; white-space: nowrap;}
section.campaign .wk__detail td{background: rgb(0 0 0 / 0.3); border-bottom: 1px solid #faec00; font-size: 14.5px; padding: 2.5rem; white-space: nowrap;}
section.campaign .wk__detail td div.notice-list div{display: list-item; list-style-type: disc; margin: 0 0 0 20px;}
section.campaign .wk__detail td a{color: #faec00; text-decoration: underline;}
section.campaign .wk__detail ol,
section.campaign .wk__detail ul{width: 100%;}
section.campaign .wk__detail ol > li{width: 100%; margin: 0 0 1.5rem;}
section.campaign .wk__detail ol > li:last-child{margin: 0;}
section.campaign .wk__detail ol > li b{color: #faec00;}
section.campaign .wk__detail ol > li span{position: relative; display: inline-block; padding: 0 0 0 15px;}
section.campaign .wk__detail ol > li span:before {content: ''; width: 6px; height: 6px; border: 0; border-top: solid 2px #faec00; border-right: solid 2px #faec00; transform: rotate(45deg); position: absolute; top: 0; left: 0; bottom: 0; margin: auto;}
section.campaign .wk__detail ol > li a{color: #fff;}
section.campaign .wk__detail ol > li a:hover{color: #faec00;}
section.campaign .wk__detail ul > li{width: 100%; margin: 0 0 0 2.5rem; list-style: disc;}
section.campaign .wk__detail p.tips{color: #faec00; margin: 1rem 0 0;}


/* Section:IP About */
section.ip__about {background: rgb(0 0 0 / 0.3);}
section.ip__about .wk__about{margin: 5rem 0 0; padding: 5rem; align-items: center; position: relative;}
section.ip__about .wk__about h3{width: 100%; font-size: 2.5rem; font-weight: 800; line-height: 2rem; color: #fff; margin: 0 0 2.5rem;}
section.ip__about .wk__about .visual-arts{margin: 0 5% 0 0; width: 35%;}
section.ip__about .wk__about .detail{width: 60%;}
section.ip__about .wk__about .detail p{font-size: 1.45rem; line-height: 2.25rem; margin: 0 0 1.75rem;}
section.ip__about .wk__about .movie{width: 100%; margin: 4rem auto; position: relative;}
section.ip__about .wk__about .movie a {display: block; position: relative;}
section.ip__about .wk__about .movie a:before {content: ""; background-image: url(../img/event/cpn_warakemo/wk__play.svg); background-repeat: no-repeat; background-size: contain; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 1;}
section.ip__about .wk__about .movie a:after {content: ""; display: block; width: 100%; height: 100%; background-color: rgb(0 0 0 / 1.0); position: absolute; top: 0; left: 0; z-index: -1;}
section.ip__about .wk__about .movie a img{opacity: 0.75; position: relative; z-index: 0; transition: all 0.35s ease;}
section.ip__about .wk__about .movie a:hover img{opacity: 0.55;}
section.ip__about .wk__about .link{width: 100%;}
section.ip__about .wk__about .link ul{width: 100%; justify-content: space-evenly;}
section.ip__about .wk__about .link ul > li{width: 100%; max-width: 270px;}
section.ip__about .wk__about .link ul > li .btnArea sup{font-size: 1.15rem; margin: 0 1px; vertical-align: sub; letter-spacing: 1px;}


/* Section:Notice */
section.notice .content-wrapper{padding: 7rem 0 10rem;}
section.notice .content-block a:hover{text-decoration: underline;}
section.notice .wk__title h2{transform: scaleX(1);}
section.notice .content-block .detail{margin: 5rem 0 0;}
section.notice .content-block .detail h3{font-size: 2.5rem; font-weight: 700; margin: 0 0 -1.5rem;}
section.notice .content-block .detail p{font-size: 1.25rem; margin: 2.5rem 0 0;}
section.notice .content-block .detail ul{margin: 3rem 0 3rem 20px; padding: 0;}
section.notice .content-block .detail ul > li{font-size: 1.25rem; list-style: disc; margin: 0 0 0.75rem;}


/* Section:Footer */
#ip__footer{background: rgb(249 235 0 / 1); color: #000; padding: 2.5rem 0; text-align: center;}
#ip__footer small{font-family: Noto Sans JP, sans-serif; font-size: 1.15rem;}



/* == Slick ================================================== */
.slider{width: 100%; margin: 0; padding: 0}
.slider .slick-slide figcaption{font-size: 2.4rem; font-weight: 700; line-height: 1; text-align: center; margin: 3rem 0;}
.slider .slick-slide figcaption em{color: #faec00; font-weight: inherit;}
.slider .slick-slide figcaption sup{font-size: 1.5rem; margin: 0 4px; vertical-align: sub; letter-spacing: 1px;}
.slider.slick-dotted.slick-slider {margin-bottom: 15px;}
.slider ul.slick-dots{top: calc(100% + -15px);}
.slider ul.slick-dots > li{width: auto !important; margin: 0 12px !important;}
.slider ul.slick-dots > li.slick-active button:before{color: #faec00; opacity: 1;}
.slider ul.slick-dots > li button:before{font-size: 20px; color: #373737; opacity: 1;}
.slider ul.slick-dots > li.slick-active button:before {opacity: 1;}



/*responsive ==============================================================================*/
	@media (max-width: 767px) {
	/*smart phone*/
	/*** Event - Common ***/
	#wrap {overflow: visible;}
	.sp_display{display:block !important;}
	.pc_display{display:none !important;}

	/* Loader - Animation */
	.loading-Icon {width: 100px; height: 95px;}
	.ico_warakemo{width: 100px; height: 95px;}

	/*** Event - Nav ***/
	/* Navi */
	nav {width: 5rem; height: 5rem;}
	nav .menu {padding: 0.625rem 0;}
	nav .menu span{height: 2px;}

	/* Navi - Modal */
	.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul > li a {font-size: 3.2rem; margin: 1.6rem 0;}
	.wk__js-modal__main .modal__contentsBox .wk__modal__menu ul > li a sup{font-size: 1.15rem;}
	.wk__js-modal__btn--close--fix {max-width: 240px; font-size: 1.6rem; padding: 1.45rem 1.45rem 1.25rem;}

	/*** Event - h ***/
	.wk__title h2{font-size: 4rem;}

	/*** Event - hr ***/
	hr{ margin: 2.5rem 0;}

	/*** Event - marquee ***/
	.marquee.left{transform: rotate(-10.0deg);}
	.marquee.right{transform: rotate(10.0deg);}
	.text-block {font-size: 12vw;}
	.text-block::before{width: 8vw; margin: 0 2.25vw 0 0.25vw;}

	/*** Event - a&Btn ***/
	.btnArea a.wk__btn,
	.modal__btn div.wk__btn{font-size: 1.6rem; padding: 1.75rem;}
	.btnArea a.wk__btn::after,
	.modal__btn div.wk__btn::after{right: 0.75rem; border-width: 0.375em 0.5em; border-left-color: currentColor; margin: -0.5rem 0 0 0;}
	.btnArea a.disable{color: #666; box-shadow: inset 0 0 0 3px rgb(75 75 75 / 1); cursor: no-drop;}

	/*** Event - warakemo ***/
	#wrap_wk{font-size: 1.75rem;}
	.content-wrapper{padding: 3rem;}

	/* Contents Common */
	/* Main image */
	section.hero{background: none;}
	section.hero .wk__mv{padding: 0;}
	section.hero .hero-effect {background: none;}

	/* Section:Outline */
	section.outline .content-wrapper{padding: 3.5rem 3rem 5rem;}
	section.outline .wk__chach h2{font-size: 2.25rem; line-height: 1.45em; margin: 0 0 1.5rem;}
	section.outline .wk__chach h3{font-size: 1.75rem; line-height: 1.45em; margin: 3rem 0;}
	section.outline .wk__chach h3::after{width: 200px; height: 100px; top: -50%; right: -13.5rem;}
	section.outline date{margin: 0 auto;}
	section.outline date dl{flex-direction: column; padding: 1rem 0;}
	section.outline date dt{font-size: 1.575rem; padding: 0.5rem; margin-right: 0; margin-bottom: 1.5rem;}
	section.outline date dd{font-size: 2.75rem; line-height: 1.25; text-align: center;}
	section.outline date dd em{font-size: 1.5rem; margin: 0 3px;}
	section.outline date dd sup{margin: 0 -5px;}

	/* Section:bull */
	section.bull .content-wrapper{padding: 5rem 3rem;}
	section.bull .wk__detail h3{font-size: 3.25rem; margin: 2rem 0;}
	section.bull .wk__detail p sup {font-size: 1.05rem;}
	section.bull .wk__detail .rewards h3{font-size: 3.25rem; line-height: 1.25em;}
	section.bull .wk__detail .rewards p{font-size: 1.75rem; text-align: center; margin: inherit;}
	section.bull .wk__detail .rewards .box{padding: 2.5rem 0.75rem; margin: 3rem 0;}
	section.bull .wk__detail .rewards .box h4{font-size: 1.2rem; letter-spacing: 0; padding: 1.25rem 0.75rem;}
	section.bull .wk__detail .rewards .box p.tips{text-align: left; font-size: 1.125rem; font-weight: inherit; line-height: 1.35em; margin: 1.75rem 0 0;}
	section.bull .wk__detail .rewards .box.grp-1 .movie{margin: 0 auto 2rem;}
	section.bull .wk__detail .rewards .box.grp-1 .movie a:before {width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	section.bull .wk__detail .rewards .box.grp-2:before{width: 80px; height: 80px; margin: -35px -25px 0 0;}
	section.bull .wk__detail .rewards .box.grp-3{width: 100%; padding: 1.5rem; margin: 1.5rem 0;}
	section.bull .wk__detail .rewards .box.grp-3 .goods-title{font-size: 1.2rem; letter-spacing: 0; padding: 1.25rem 0.75rem;}
	section.bull .wk__detail .rewards .box.grp-4{flex-direction: column-reverse; margin: 1.5rem 0;}
	section.bull .wk__detail .rewards .box.grp-4 .goods-title{width: 100%;}
	section.bull .wk__detail .rewards .box.grp-4 .goods-title p{font-size: 1.2rem; text-align: center;}
	section.bull .wk__detail .rewards .box.grp-4 .goods-title span{max-width: 200px; font-size: 1.4rem; text-align: center; padding: 0.5rem 1rem 0.25rem; margin: 0 auto 1.5rem;}
	section.bull .wk__detail .rewards .box.grp-4 figure{width: 75%; max-width: 400px; margin: 4rem 2rem 6rem;}
	section.bull .wk__detail .rewards .box.grp-3:before,
	section.bull .wk__detail .rewards .box.grp-4:before{width: 80px; height: 80px; margin: -35px -25px 0 0;}
	section.bull .wk__detail .cp__bull{margin: 3rem 0; padding: 3rem 2rem;}
	section.bull .wk__detail table{margin: 0.5rem 0;}
	section.bull .wk__detail th{font-size: 1.45rem; padding: 0.75rem;}
	section.bull .wk__detail td{padding: 1.5rem;}
	section.bull .wk__detail .tablebox{margin: 1.5rem 0;}
	section.bull .wk__detail .tablebox h4{font-size: 1.4rem; line-height: 1.4em; margin: 1.5rem 0 0;}
	section.bull .wk__detail table.level{margin: 0.5rem 0;}
	section.bull .wk__detail table.level th{font-size: 1.1rem;}
	section.bull .wk__detail table.level td{font-size: 1.15rem; padding: 1.25rem;}

	#bullEvent h4{font-size: 1.575rem; padding: 1.5rem; margin-bottom: 1.75rem;}
	#bullEvent p{text-align: left; font-size: 1.125rem; font-family: initial; line-height: 1.45em; margin: 1.5rem 0 0;}
	#bullEvent div.num{font-size: 12.33333vw; letter-spacing: -1px;}
	#bullEvent div em{font-size: 4vw; font-weight: inherit; margin: 0 3px;}
	#bullEvent .progress .title{width: 7.5%; min-width: 45px; height: 15px; font-size: 1.175rem;}
	#bullEvent .progress .bar {height: 15px;}
	#bullEvent .progress .bar span {height: 15px;}
	#bullEvent .progress .bar sup {font-size: 70%; margin: -1.15rem 0;}
	#bullEvent .playdata {margin-bottom: 2rem;}
	#bullEvent .playdata .status{width: 60%;}
	#bullEvent .playdata .status dl{width: 100%; margin-bottom: 1.25rem;}
	#bullEvent .playdata .status dt,
	#bullEvent .playdata .status dd{font-size: 1rem; padding: 0.5rem 0.75rem 0.4rem;}
	#bullEvent .playdata .status data{font-size: 1.7rem;}
	#bullEvent .rewards{padding: 2.5rem 1.5rem;}
	#bullEvent .rewards ul {flex-wrap: nowrap; overflow-x: scroll; white-space: nowrap;}
	#bullEvent .rewards ul > li {width: 100%; margin: 0 0.5rem;}
	#bullEvent .rewards h5{font-size: 1.15rem; margin-bottom: 0.5rem;}
	#bullEvent .rewards h5 div{font-size: 1.6rem;}
	#bullEvent .rewards figure{width: 100%; min-width: 180px; margin-bottom: 0.75rem;}
	#bullEvent .rewards figcaption{font-size: 1rem; padding: 0.75rem 0.5rem 0.5rem;}
	#bullEvent .rewards .btnArea a{padding: 1.0rem; font-size: 1.25rem;}
	#bullEvent .login{margin: 2.5rem auto;}
	#bullEvent .login .btnArea{max-width: 380px;}

	/* Section:Present */
	section.present .content-wrapper{padding: 5rem 3rem 3.5rem;}
	section.present .wk__detail p sup{font-size: 1.05rem;}
	section.present .wk__detail div.cp__rewards{margin: 2rem 0 1.5rem; padding: 0.75rem;}
	section.present .wk__detail table{margin: 2rem 0 0;}
	section.present .wk__detail th{font-size: 1.45rem; padding: 0.75rem;}
	section.present .wk__detail td{padding: 1.5rem;}
	section.present .wk__detail td ul{margin-bottom: 0;}
	section.present .wk__detail p.tips {margin: 0.75rem 0 0;}

	/* Section:Shop List */
	section.shop .content-wrapper{padding: 3.5rem 3rem 1.75rem;}
	section.shop .wk__list{margin: 2rem 0 0; padding: 3rem 2rem;}
	section.shop .wk__list h3{font-size: 2.25rem; line-height: 2.6rem; margin: 0 0 2rem;}
	section.shop .wk__list .detail p{font-size: 1.75rem; margin: 0 0 1rem;}
	section.shop .wk__list .btnArea{width: 80%; margin: 1rem auto 0;}

	/* Section:APP Download */
	section.app .content-wrapper{padding: 1.75rem 3rem 3.5rem;}
	section.app .wk__dl{margin: 2rem 0 0; padding: 3rem 2rem;}
	section.app .wk__dl h3{font-size: 2.0rem; line-height: 2.6rem; margin: 0 0 2rem;}
	section.app .wk__dl .detail p{font-size: 1.75rem; margin: 0 0 1.25rem;}
	section.app .wk__dl .link{width: 100%; margin: 1.5rem auto 0;}

	/* Section:Campaign */
	section.campaign .wk__detail h3{font-size: 2rem; margin: 1.5rem 0;}
	section.campaign .wk__detail dt{margin: 2.5rem auto;}
	section.campaign .wk__detail th{font-size: 1.45rem; padding: 0.75rem;}
	section.campaign .wk__detail td{padding: 1.5rem;}
	section.campaign .wk__detail ol > li{margin: 0 0 1.25rem;}
	section.campaign .wk__detail p.tips{margin: 0.75rem 0 0;}

	/* Section:IP About */
	section.ip__about .wk__about{margin: 3rem 0 0; padding: 3rem 2rem;}
	section.ip__about .wk__about h3{font-size: 1.75rem; line-height: 1.2; margin: 0 0 1.75rem;}
	section.ip__about .wk__about .visual-arts{width: 100%; max-width: 320px; margin: 0 auto;}
	section.ip__about .wk__about .detail{width: 100%; max-width: 320px; margin: 2rem auto;}
	section.ip__about .wk__about .movie{margin: 0 auto 2.5rem;}
	section.ip__about .wk__about .movie a:before {width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	section.ip__about .wk__about .link ul > li{max-width: 320px; margin: 0.75rem auto;}

	/* Section:Notice */
	section.notice .content-wrapper{padding: 3.5rem 2rem;}
	section.notice .content-block .detail{margin: 2.5rem 0 0;}
	section.notice .content-block .detail h3{font-size: 1.75rem; margin: 0 0 -2rem;}
	section.notice .content-block .detail p{font-size: 1.1rem; margin: 3rem 0 0;}
	section.notice .content-block .detail ul > li{font-size: 1.1rem;}

	/* Section:Footer */
	#ip__footer{padding: 1.5rem 0;}
	#ip__footer small{font-size: 1.1rem;}

	/* == Slick ================================================== */
	.slider .slick-slide figcaption {font-size: 1.2rem; line-height: 1.25em; margin: 1.25rem 0;}
	.slider .slick-slide figcaption sup{font-size: 1.1rem; margin: 0 2px; vertical-align: -6px;}
	.slider li.slick-slide{margin: 0.5rem;}
	.slider ul.slick-dots > li{margin: 0 5px !important;}
	.slider ul.slick-dots > li button:before{font-size: 14px;}

}

@media (max-width: 374px) {
	#bullEvent div.num { font-size: 11.3333vw; letter-spacing: -1px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	section.bull .wk__detail .rewards .box.grp-2:before {width: 140px; height: 140px; margin: -45px 0 0 0;}
	section.bull .wk__detail .rewards .box.grp-3:before, section.bull .wk__detail .rewards .box.grp-4:before {width: 100px; height: 100px; margin: -40px 0 0 0;}
}

@media (max-width: 560px) {/**/}
@media (max-width: 400px) {/**/}
@media (min-width: 992px) and (max-width: 1199px) {/* desk top */}
@media (min-width: 1200px) {/*desk top learge */}


/* OVERLAY PICTURE ==============================================================================*/
/* Def */
	picture{width: 400px; height: auto; position: absolute; top: auto; left: auto; right: auto; bottom: auto;}
	picture.wkobj-1{top: 70px; left: -10.33333vw;}
	picture.wkobj-2{top: -100px; right: -7.33333vw;}
	picture.wkobj-3{top: -100px; left: -10.33333vw;}
	picture.wkobj-4{top: -170px; right: -7.33333vw;}
	picture.wkobj-5{bottom: -320px; left: -12.33333vw;}

@media (max-width: 1280px) {
/* w1280 */
	picture{width: 350px;}
}

@media (max-width: 1024px) {
/* w1024 */
	picture{width: 300px;}
	picture.wkobj-1{top: 135px; left: -85px;}
	picture.wkobj-2{top: -120px; right: -60px;}
	picture.wkobj-3{top: -60px; left: -100px;}
	picture.wkobj-4{top: -180px; right: -95px;}
	picture.wkobj-5{bottom: -275px; left: -65px;}
}

@media (max-width: 767px) {
/* w767 */
	picture{width: 180px;}
	picture.wkobj-1{top: 105px; left: -75px;}
	picture.wkobj-2{top: -55px; right: -60px;}
	picture.wkobj-3{top: -60px; left: -100px;}
	picture.wkobj-4{top: -100px; right: -100px;}
	picture.wkobj-5{bottom: -120px; left: -85px;}
}

@media (max-width: 374px) {
	/* w374 */
	picture{width: 120px;}
	picture.wkobj-1{top: 180px; left: -12.33333vw;}
	picture.wkobj-2{top: -35px; right: -14.33333vw;}
	picture.wkobj-3{top: -15px; left: -20.33333vw;}
	picture.wkobj-4{top: -30px; right: -20.33333vw;}
	picture.wkobj-5{bottom: -120px; left: -17.33333vw;}
}


/*animated ==============================================================================*/
.animated {animation-duration: 1s; animation-fill-mode: both; -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 maq-left{
  0%   {transform: translateX(0);}
  100% {transform: translateX(calc(-100% - 1rem));}
}
@keyframes maq-right {
  0%   {transform: translateX(calc(-100% - 1rem));}
  100% {transform: translateX(0);}
}
@keyframes fadeInOut{
  0%   {opacity: 0;}
  10%  {opacity: 0;}
  35%,65% {opacity: 1;}
  90%  {opacity: 0;}
  100% {opacity: 0;}
}