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

/*** 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: flex-start; flex-wrap: wrap;}
	header {position: relative; top: 0px; margin: 0; transition: all .3s;}
	header {background-color: #fff;}
	footer {position: relative;}
	::selection {color: #fff; background-color: #6CC24A;}
	.krr-mpls {font-family: "M PLUS Rounded 1c", sans-serif; font-style: normal;}
	.overlay{width: 100%; height: calc(100vh - -600px); position: fixed; top: 0; left: 0; z-index: -1; background-image: url(../img/event/cpn_keroro/krr__bg.webp); background-repeat: repeat;}

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


/*** Event - Nav ***/
/* Navi */
	nav {width: 84px; height: 84px; 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 #krr__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; width: 84px; height: 84px; position: relative; top: 50%; right: 0; margin: -42px 0 0 0; padding: 10px; border-radius: 60px; background: rgb(0 0 0 / 0.75); box-shadow: inset 0 0 0 5px rgb(108 194 74 / 1); cursor: pointer; overflow: hidden; will-change: transform;}
	nav .menu:after{content: ""; display: block; background: #6CC24A; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: scaleY(0); transform-origin: bottom; transition: all 0.35s ease; transition-property: transform;}
	nav:hover .menu:after{top: 0; left: 0; z-index: 1;
	transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform-origin: top;}
	nav .menu .ico_star{width: 42px; height: 42px; fill: #6CC24A; position: absolute; top: 11px; left: 50%; margin: 0 0 0 -21px; z-index: 10; transition: all 0.35s ease;}
	nav:hover .menu .ico_star{fill: #fff101;}
	nav .menu span{display: block; position: absolute; bottom: 10px; left: 50%; font-size: 1.45rem; font-weight: 800; color: #6CC24A; margin: 0 0 0 -20px; z-index: 10; transition: all 0.35s ease;}
	nav .menu span:after{content: "MENU";}
	nav:hover span{color: #fff101;}
	nav .krr__js-modal__btn.active:after{top: 0; left: 0; transform: scaleY(1); transform-origin: top;}
	nav .krr__js-modal__btn.active .ico_star{fill: #fff101;}
	nav .krr__js-modal__btn.active span{color: #fff101;}

/* Navi - Modal */
	#krr__modal{display: block;}
	.krr__js-modal__bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 11; display: none;}
	.krr__js-modal__main {display: none; width: 100%; height: 100%; padding: 0; margin: 0; position: fixed; top: 0; left: 0; background-color: rgb(9 5 38 / 0.95); z-index: 50;}
	.krr__js-modal__main .modal__contentsBox{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0;}
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul{list-style: none; margin: 0; padding: 0;}
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul > li a {display: flex; justify-content: flex-start; align-items: center; color: #6CC24A !important; font-size: 3.6rem; font-weight: 700; padding: 1.25rem 1.25rem 1.25rem 40px; margin: 0 0 0 20px; position: relative;}
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul > li a:before{content: ""; display: block; width: 30px; height: 30px; position: absolute; top: 50%; left: 0; margin: -15px 0 0; background-image: url(../img/event/cpn_keroro/krr_icon_nav.svg); background-repeat: no-repeat;}
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul > li a:hover {color: #fff101 !important; text-decoration: none !important;}
	.krr__js-modal__btn--close--fix {display: inline-block; width: 100%; max-width: 340px; outline: none; font-size: 2.0rem; margin-top: 2.5rem; text-align: center; line-height: 1; color: #6CC24A; background: none; padding: 1.75rem 1.75rem 1.5rem; box-shadow: inset 0 0 0 3px rgb(108 194 74 / 1); border-radius: 30px; position: relative; transition: color 0.35s ease; overflow: hidden; cursor: pointer; will-change: transform;}
	.krr__js-modal__btn--close--fix:hover{color: #fff101;}
	.krr__js-modal__btn--close--fix:hover::before{transform: scaleX(1); transform-origin: left;}
	.krr__js-modal__btn--close--fix::before{content: ""; display: block; width: 100%; height: 100%; background: #6CC24A; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: all 0.35s ease; transition-property: transform;}
	.krr__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;}
	.krr__js-modal__btn--close--fix span{position: relative;}
	.krr__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
	.krr__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

/*** Event - h ***/
	h2,h3,h4,h5{color: #fff; margin: 0; padding: 0;}
	.krr__title h2{font-size: 7rem; font-weight: 900; letter-spacing: -1.5px; color: #fff; text-align: center; position: relative;}
	.krr__title h2 em{font-size: 3.0rem; font-weight: inherit;}
	.krr__title h2.starico::before,
	.krr__title h2.starico::after{content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(../img/event/cpn_keroro/krr__ttl_starico.webp); background-repeat: no-repeat; background-size: contain;}
	.krr__title h2.starico::before{width: 42px; height: 42px; transform: rotate(-15deg);}
	.krr__title h2.starico::after{width: 30px; height: 30px; transform: rotate(20deg);}
	.krr__title h2.starico.x1::before{top: calc(50% - 40px); left: calc(50% - 192px);}
	.krr__title h2.starico.x1::after{top: calc(50% - -10px); left: calc(50% - -149px);}
	.krr__title h2.starico.x2::before{top: calc(50% - 40px); left: calc(50% - 322px);}
	.krr__title h2.starico.x2::after{top: calc(50% - -10px); left: calc(50% - -275px);}
	.krr__title h2.starico.x3::before{top: calc(50% - 11px); left: calc(50% - 295px);}
	.krr__title h2.starico.x3::after{top: calc(50% - -48px); left: calc(50% - -244px);}
	.krr__title h2.starico.x4::before{top: calc(50% - 7px); left: calc(50% - 350px);}
	.krr__title h2.starico.x4::after{top: calc(50% - -48px); left: calc(50% - -307px);}


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


/*** Event - a&Btn ***/
	a,a:hover{transition: all .3s;}
	.modal__btn{line-height: 0; text-align: center;}
	.modal__btn div.krr__btn{cursor: pointer;}
	.btnArea{margin: 0; padding: 0; line-height: 0;}
	.btnArea a{display: inline-block; transition: all .35s;}
	.btnArea a.krr__btn,
	.modal__btn div.krr__btn{display: inline-block; width: 100%; outline: none; font-size: 2.0rem; line-height: 1.15; color: #6CC24A; background: none; padding: 1.75rem 1.75rem 1.5rem; box-shadow: inset 0 0 0 3px rgb(108 194 74 / 1); border-radius: 60px; position: relative; transition: color 0.35s ease; overflow: hidden; will-change: transform;}
	.btnArea a.krr__btn:hover,
	.modal__btn div.krr__btn:hover{color: #fff101;}
	.btnArea a.krr__btn:hover::before,
	.modal__btn div.krr__btn:hover::before{transform: scaleX(1); transform-origin: left;}
	.btnArea a.krr__btn::before,
	.modal__btn div.krr__btn::before{content: ""; display: block; width: 100%; height: 100%; background: #6CC24A; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: all 0.35s ease; transition-property: transform;}
	.btnArea a.krr__btn::after,
	.modal__btn div.krr__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.krr__btn span,
	.modal__btn div.krr__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; 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: calc(0vh - -15px);}
	#page-top a .scroll {display: block; width: 16rem; height: 11.75rem; position: absolute; right: 0; bottom: calc(0vh - 120px); transition: all .3s; z-index: 9;}
	#page-top a:hover .scroll figure.img{animation: bound .5s ease-in-out forwards;}


/*** Event - Keroro ***/
	#wrap{background:none !important;}
	#wrap_krr{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;}
	.content-wrapper{width: 100%; padding: 5.5rem 0;}
	.content-block{width: 100%; max-width: 970px; background-color: rgb(10 5 30 / 0.75); backdrop-filter: blur(5px); margin: 0 auto; padding: 6rem; position: relative; border-radius: 30px; border: 3px solid #fff; box-shadow: 0 0 20px 0 rgb(255 255 255 / 0.75), inset 0 0 20px 0 rgb(255 255 255 / 0.75); z-index: 10;}


/* Contents Common */
	/* Main image */
	section.hero{background-image: url(../img/event/cpn_keroro/krr__mv_bg.webp); background-repeat: repeat; position: relative;}
	section.hero:after{content: ""; display: block; border: 1px solid rgb(108 194 74 / 1); box-shadow: 0 0 15px 4px rgb(108 194 74 / 0.75);}
	section.hero .krr__mv{padding: 6rem 0 ;}


/* Section:Outline */
	section.outline .content-wrapper{padding: 7.5rem 0 5.5rem;}
	section.outline .krr__chach .krr__title h2{font-size: 7.25rem; line-height: 1.45em; margin: 0 0 1.75rem; background: -webkit-linear-gradient(-90deg, #fffef3, #fff24f); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
	section.outline .krr__chach .krr__title h2 span{font-size: 4.75rem; line-height: 1; display: block;}
	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: 215px; background: #6CC24A; color: #fff; font-size: 2.2rem; font-weight: 700; text-align: center; padding: 0.5rem; margin-right: 1.5rem; border-radius: 30px;}
	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:Pampaign */
	section.present .krr__title h2{margin-bottom: 3rem;}
	section.present .krr__detail h3{text-align: center; font-size: 2.5rem; margin: 2rem 0 0.75rem;}
	section.present .krr__detail p sup{font-size: 1.15rem; margin: 0 -3px; vertical-align: sub; letter-spacing: 1px;}
	section.present .krr__detail ul{width: 80%; max-width: 340px; margin: 0 auto;}
	section.present .krr__detail ul > li{width: 100%; margin: 0.75rem 0;}
	section.present .krr__detail div.cp__rewards{margin: 4rem 0;}
	section.present .krr__detail div.cp__rewards figure{margin-bottom: 1.5rem; overflow: hidden; position: relative;}
	section.present .krr__detail div.cp__rewards a{display: block; width: 100%; max-width: 740px; margin: 0 auto;}
	section.present .krr__detail div.cp__rewards a figure img{transition: all 0.35s ease;}
	section.present .krr__detail div.cp__rewards a:hover figure img{transform: scale(1.05) rotate(2deg);}
	section.present .krr__detail div.cp__howto{width: 100%; max-width: 780px; margin: 5rem auto; padding: 3rem; border-radius: 30px; border: 6px solid #fff;}
	section.present .krr__detail div.cp__howto div.desc{width: 65%;}
	section.present .krr__detail div.cp__howto div.desc h3{font-size: 2.25rem; font-weight: 800; color: #fff100; line-height: 3rem; margin: 0 0 2rem;}
	section.present .krr__detail div.cp__howto div.desc p{background: rgb(255 255 255 / 0.1); font-size: 1.65rem; line-height: 1.5em; text-align: center; padding: 1rem 1rem 0.75rem; margin-bottom: 2rem;}
	section.present .krr__detail div.cp__howto div.desc dl{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem;}
	section.present .krr__detail div.cp__howto div.desc dt{display: block; width: 100%; max-width: 54px; background: #6CC24A; color: #fff; font-size: 1.25rem; font-weight: 700; text-align: center; padding: 0.15rem 0.25rem 0.15rem; margin-right: 1.0rem; border-radius: 5px;}
	section.present .krr__detail div.cp__howto div.desc dd{width: 80%; font-size: 1.5rem;}
	section.present .krr__detail div.cp__howto figure{width: 25%; max-width: 155px; margin: 0 5%;}


/* Section:Mission */
	section.mission h3{font-size: 3.5rem; font-weight: 800; line-height: 4.25rem; color: #fff100; text-align: center; margin: 2.5rem 0;}
	section.mission .krr__detail p{font-size: 1.675rem; line-height: 1.75;}
	section.mission .krr__detail ul{width: 90%; margin: 0 auto; justify-content: center;}
	section.mission .krr__detail ul > li{width: 47%; margin: 3rem 1.5%;}
	section.mission .krr__ms__list{margin: 4rem 0;}
	section.mission .krr__ms__list table{width: 100%; border-collapse: collapse;}
	section.mission .krr__ms__list table th{width: 320px; table-layout: fixed; background: #fff; color: #08051b; font-weight: 800; text-align: center; padding: 1.5rem; border: 2px solid #09051d; white-space: nowrap;}
	section.mission .krr__ms__list table td{border: 2px solid #09051d; white-space: nowrap;}
	section.mission .krr__ms__list table td{background: rgb(255 255 255 / 0.1); padding: 1.5rem;}
	section.mission .krr__ms__list td h4{width: 100%; max-width: 120px; background: #474747; color: #08051b; font-size: 1.6rem; line-height: 1; text-align: center; border-radius: 30px; padding: 0.75rem 1rem 0.5rem; margin: 0 auto 0.75rem;}
	section.mission .krr__ms__list td h4.cp1{background-color: #fffd9a;}
	section.mission .krr__ms__list td h4.cp2{background-color: #b5ffb3;}
	section.mission .krr__ms__list td span{font-size: 2rem; text-align: center; display: block;}
	section.mission .krr__ms__list td span em{font-size: 1.05rem;}
	section.mission .krr__ms__list td span sup{font-size: inherit; top: 0; margin: 0 0.45rem 0 -0.35rem;}
	section.mission .krr__ms__list td dl{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
	section.mission .krr__ms__list td dt{width: 45px;}
	section.mission .krr__ms__list td dd{width: 100%;}
	section.mission .krr__ms__list tr.cp_end > td span,
	section.mission .krr__ms__list tr.cp_ready > td p{display: block; color: #fff; text-align: center; font-size: 1.4rem;}

	section.mission .krr__mission{width: 100%; max-width: 840px; margin: 4rem auto;}
	section.mission .krr__mission .krr__tabs{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; border-radius: 30px 30px 0 0; overflow: hidden;}
	section.mission .krr__mission .krr__tabs .tab_label {text-align: center; background-color: #555; padding: 2rem; cursor: pointer; flex: 1; transition: all .3s;}
	section.mission .krr__mission .krr__tabs .tab_label.ms__primary.enable{background-color: #fffd9a;}
	section.mission .krr__mission .krr__tabs .tab_label.ms__secondary.enable{background-color: #b5ffb3;}
	section.mission .krr__mission .krr__tabs .tab_label div{font-size: 3.4rem; font-weight: 700; color: #08051b; letter-spacing: -3px;}
	section.mission .krr__mission .krr__tabs .tab_label div em{font-size: 2.5rem; font-weight: 700; margin: 0 4px 0 5px; letter-spacing: -5px;}
	section.mission .krr__mission .krr__tabs .tab_label:hover {opacity: 1.0;}
	section.mission .krr__mission .krr__tabs .tab_label.ms__primary:hover{background-color: #fffd9a;}
	section.mission .krr__mission .krr__tabs .tab_label.ms__secondary:hover {background-color: #b5ffb3;}

	section.mission .krr__mission .krr__tab_inner{width: 100%;}
	section.mission .krr__mission .krr__tab_inner .btnArea{width: 100%; max-width: 340px; margin: 0 auto;}
	section.mission .krr__mission .krr__tab_inner .mission__list{margin-bottom: 10rem; animation: fadeIn 0.3s ease;}
	section.mission .krr__mission .krr__tab_inner .mission__list li.slick-slide {margin: 0 1.5rem;}
	section.mission .krr__mission .krr__tab_inner .krr__itemList{width: 100%; flex: 100%; display: none; background: rgb(255 255 255 / 0.1);  border: solid 6px #ccc; padding: 5rem; overflow: hidden; position: relative; border-radius: 0 0 30px 30px;}
	section.mission .krr__mission .krr__tab_inner .krr__itemList.show{display: block;}
	section.mission .krr__mission .krr__tab_inner .krr__itemList.ms__primary.show{border: solid 6px #fffd9a; }
	section.mission .krr__mission .krr__tab_inner .krr__itemList.ms__secondary.show{border: solid 6px #b5ffb3;}

	section.mission .l_draw__flow{width: 100%; align-items: center; flex-wrap: wrap; margin: 0 auto;}
	section.mission .l_draw__flow .l_draw__text{width: 60%;}
	section.mission .l_draw__flow .l_draw__text h4{font-size: 6.4rem; font-weight: 800; line-height: 1;}
	section.mission .l_draw__flow .l_draw__text p{font-size: 2.5rem; line-height: 3.8rem; margin: 2rem 0 0; letter-spacing: -0.5px;}
	section.mission .l_draw__flow .l_draw__text span{display: block; font-size: 1.05rem; line-height: 2.0rem; margin: 0.75rem 0 0; letter-spacing: 0;}
	section.mission .l_draw__flow .l_draw__image{width: 40%; max-width: 320px; margin: 0 auto;}

	section.mission .ms__clear h4{background: rgb(51 51 51 / 1); font-size: 2.8rem; font-weight: 800; line-height: 1; text-align: center; color: #08051b; padding: 1.5rem; margin-bottom: 1.5rem;}
	section.mission .ms__clear.ms-1 h4{background: rgb(255 253 154 / 1);}
	section.mission .ms__clear.ms-2 h4{background: rgb(181 255 179 / 1);}
	section.mission .ms__clear .detail figure{margin-bottom: 1.5rem; overflow: hidden; position: relative;}
	section.mission .ms__clear .detail a{display: block; position: relative;}
	section.mission .ms__clear .detail a:hover figure img{transform: scale(1.05) rotate(2deg);}
	section.mission .ms__clear .detail a figure img{transition: all 0.35s ease;}
	section.mission .ms__clear .detail a::after{content: "▲"; display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; color: #fff; font-size: 6rem; position: absolute; top: 50%; left: 50%; background-color: rgb(0 0 0 / 0.55); border-radius: 50%; margin: -50px 0 0 -50px; transform: rotate(90deg);}

	section.mission .ms__complete{margin: 5rem 0;}
	section.mission .ms__complete ul{width: 100%;}
	section.mission .ms__complete ul > li{display: flex; width: 100%;}
	section.mission .ms__complete a{height: 100%; display: flex; align-items: center; justify-content: flex-start; color: #fff; padding: 5rem; flex-grow: 1; border-radius: 30px; border: 6px solid rgb(108 194 74 / 1); box-shadow: 0 0 0 0 rgb(108 194 74 / 0.75), inset 0 0 0 0 rgb(108 194 74 / .75); transition: all .3s ease-in-out; position: relative;}
	section.mission .ms__complete a:hover{box-shadow: 0 0 20px 0 rgb(108 194 74 / 0.75), inset 0 0 20px 0 rgb(108 194 74 / .75);}
	section.mission .ms__complete figure{width: 35%; margin: 0 auto; overflow: hidden; position: relative;}
	section.mission .ms__complete a::after{content: ""; display: block; width: 115px; height: 115px; position: absolute; top: 15px; right: 15px; background-image: url(../img/event/cpn_keroro/krr__sec3_obj_comp_ico.webp); background-repeat: no-repeat; background-size: contain;}
	section.mission .ms__complete a figure img{transition: all 0.35s ease;}
	section.mission .ms__complete a:hover figure img{transform: scale(1.1325) rotate(7deg);}
	section.mission .ms__complete .desc{width: 60%;}
	section.mission .ms__complete .desc h4{font-size: 3.6rem; font-weight: 800; line-height: 4.2rem; color: #fff100; margin-bottom: 1.5rem;}
	section.mission .ms__complete .desc p{font-size: 1.6rem;}
	section.mission .ms__complete .desc p.tips{font-size: 1.1rem; text-align: left; margin: 0;}


/* Section:Campaign */
	section.campaign .krr__detail{margin: 5rem 0 0;}
	section.campaign .krr__detail h3{width: 100%; max-width: 320px; font-size: 1.875rem; text-align: center; border: 2px solid #fff; border-radius: 30px; margin: 0 auto; padding: 1.4rem 1rem 1rem;}
	section.campaign .krr__detail p.cs{text-align: center;}
	section.campaign .krr__detail dl{width: 100%;}
	section.campaign .krr__detail dt{width: 100%; max-width: none; margin: 3rem auto;}
	section.campaign .krr__detail dt.kc{max-width: 850px;}
	section.campaign .krr__detail dt.sns{max-width: 450px; height: auto; top: 0;}
	section.campaign .krr__detail table{margin: 2rem 0;}
	section.campaign .krr__detail th{width: 180px; table-layout: fixed; background: #fff; text-align: center; color: #09051f; padding: 1.5rem; border-bottom: 3px solid #09051f; white-space: nowrap;}
	section.campaign .krr__detail td{background: rgb(255 255 255 / 0.1); border-bottom: 2px solid #fff; padding: 1.5rem; white-space: nowrap;}
	section.campaign .krr__detail ul{width: 90%; margin: 0 auto; justify-content: center;}
	section.campaign .krr__detail ul > li{width: 47%; margin: 3rem 1.5%;}


/* Section:IP About */
	section.ip__about .krr__about{margin: 5rem 0 0; align-items: center;}
	section.ip__about .krr__about h3{width: 100%; background: #52b750; font-size: 2.45rem; font-weight: 800; line-height: 2rem; color: #ffffff; margin: 0 0 2.5rem; padding: 1.5rem;}
	section.ip__about .krr__about .visual-arts{margin: 0 5% 0 0; width: 35%;}
	section.ip__about .krr__about .detail.nowrap{width: 100%;}
	section.ip__about .krr__about .detail{width: 60%;}
	section.ip__about .krr__about .detail figure{display: block; width: 80%; max-width: 280px; margin: 2rem auto;}
	section.ip__about .krr__about .detail p{font-size: 1.45rem; line-height: 2.25rem; margin: 0 0 1.75rem;}
	section.ip__about .krr__about .detail .btnArea{max-width: 340px; margin: 0 auto; padding: 0; line-height: 0;}
	section.ip__about .krr__about .detail.nowrap .btnArea{margin: 3rem auto 0;}


/* Section:Notice */
	section.notice .content-wrapper{padding: 5.5rem 0 7.5rem;}
	section.notice .content-block a:hover{text-decoration: underline;}
	section.notice .content-block .detail{margin: 3.5rem 0 0;}
	section.notice .content-block .detail h3{font-size: 3.0rem; font-weight: 700; margin: 0 0 -1.75rem;}
	section.notice .content-block .detail p{font-size: 1.25rem; margin: 2.5rem 0 0;}
	section.notice .content-block .detail ul{margin: 3rem 0 3.5rem 15px; 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(25 25 29 / 1); padding: 2.5rem 0; text-align: center;}
	#ip__footer small{font-family: Noto Sans JP, sans-serif; font-size: 1.15rem;}


/* == Slick ================================================== */
	.modal__detail .mod__slider .slick-slide {width: 100%; min-width: 470px; margin: 0 1rem;}
	.modal__detail .mod__slider .slick-track,
	.modal__detail .mod__slider .slick-list {width: 100%; display: flex;}
	section .slick-dots,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots{bottom: -50px;}
	section .slick-dots li,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li{margin: 0 12px !important;}
	section .slick-dots li.slick-active button:before,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li.slick-active button:before{color: unset; opacity: 1;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #6CC24A;}
	section .slick-dots li button:before,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li button:before{font-size: 20px; color: unset; opacity: 1;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #666;}
	.slick-dots li.slick-active button:before {opacity: 1;}


/* == Modal ================================================== */
	.js-modal__bg,
	.krr-js-modal__bg,
	.krr-js-mi_modal__bg{width: 100%; height: 100%; background-color: rgb(9 5 38 / 0.95); position: fixed; top: 0; left: 0; z-index: 50; display: none;}
	.js-modal__btn,
	.krr-js-modal__btn{cursor: pointer;}
	.js-modal__main._slideUp,
	.krr-js-modal__main._slideUp,
	.krr-js-mi_modal__main._slideUp,
	.krr-js-mi_modal__modCont-mission._slideUp{animation: SlideUp .5s ease-in-out forwards;}
	.js-modal__main._slideDown,
	.krr-js-modal__main._slideDown,
	.krr-js-mi_modal__main._slideDown,
	.krr-js-mi_modal__modCont-mission._slideDown{animation: SlideDown .5s ease-in-out forwards;}
	.krr-js-mi_modal__main{display: none; width: 100%; max-width: 720px; padding: 3rem; margin: -285px 0 0 -360px; background-color: rgb(0 0 0 / 1); border-radius: 30px; border: 3px solid #6CC24A; box-shadow: 0 0 20px 0 rgb(108 194 74 / 0.75), inset 0 0 20px 0 rgb(108 194 74 / .75); position: fixed; top: 50%; left: 50%; z-index: 99;}
	.krr-js-mi_modal__main .confirm{position: absolute; top: -32px; right: -32px;}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix{display: block; width: 64px; height: 64px; position: relative; padding: 10px; border-radius: 60px; background: rgb(108 194 74 / 1); cursor: pointer; overflow: hidden;}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::before,
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::after{content: ''; display: block; color: #fff101; line-height: 1; width: 32px; height: 0.225em; position: absolute; top: 22px; left: 16px; background: currentColor; border-radius: 0.1em; transform: rotate(0deg);}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::before {transform: rotate(-45deg);}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::after{transform: rotate(45deg);}
	.krr-js-mi_modal__main .confirm span{font-size: 1.2rem; font-weight: 800; color: #fff101; margin: 0 0 0 -18px; position: absolute; bottom: 7px; left: 50%; z-index: 10;}
	.krr-js-mi_modal__modCont-mission{display: none;}
	.js-modal__main .modal__contentsBox,
	.krr-js-modal__main .modal__contentsBox{z-index: 100; display: block; position: relative; padding: 0;}
	.modal__detail h3{font-size: 3.6rem; font-weight: 900; letter-spacing: -1.5px; color: #fff; text-align: center;}
	.modal__detail .mod__slider{width: 95%; margin: 2.5rem auto; padding: 0 0 2.5rem;}
	.modal__detail .mod__slider a{color: rgb(108 194 74 / 1);}
	.modal__detail .mod__slider a:hover{text-decoration: underline;}	
	.modal__detail .mod__slider .slick-slide div img{border: 4px solid rgb(255 255 255);}
	.modal__detail .mod__slider .slick-slide p{font-size: 1.5rem; font-weight: 700; line-height: 1.55em; text-align: center; margin: 1.5rem 0 0 0;}
	.modal__detail .mod__slider ul.slick-dots{top: calc(100% + -20px);}
	.modal__detail .mod__slider ul.slick-dots > li{margin: 0 12px !important;}
	.modal__detail .mod__slider ul.slick-dots > li.slick-active button:before{color: unset; opacity: 1;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #6CC24A;}
	.modal__detail .mod__slider ul.slick-dots > li button:before{font-size: 20px; color: unset; opacity: 1;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #666;}
	.modal__detail .mod__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;}
	.overlay{background-size: calc(100vh - 0px);}

/* Loader */
	.ico_keroro{width: 120px; height: 125px; opacity: 1;}
	.loading-Icon {width: 120px; height: 125px;}
	.loading-text{font-size: 2.0rem; margin: 20px 0 0 18px;}
	.loader_letter:nth-child(1){left: 0;}
	.loader_letter:nth-child(2){left: 13px;}
	.loader_letter:nth-child(3){left: 27px;}
	.loader_letter:nth-child(4){left: 39px;}
	.loader_letter:nth-child(5){left: 53px;}
	.loader_letter:nth-child(6){left: 60px;}
	.loader_letter:nth-child(7){left: 74px;}

/* Navi */
	nav {width: 64px; height: 64px;}
	nav .menu {width: 64px; height: 64px; margin: -35px 0 0 5px; box-shadow: inset 0 0 0 4px rgb(108 194 74 / 1);}
	nav .menu .ico_star{width: 35px; height: 35px; top: 8px; margin: 0 0 0 -18px;}
	nav .menu span{bottom: 7px; font-size: 1.05rem; margin: 0 0 0 -15px;}

/* Navi - Modal */
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul > li a {font-size: 2.25rem; padding: 1.0rem 1.0rem 1.0rem 25px; margin: 0 0 0 5px;}
	.krr__js-modal__main .modal__contentsBox .krr__modal__menu ul > li a:before{width: 20px; height: 20px; margin: -10px 0 0;}
	.krr__js-modal__btn--close--fix {max-width: 240px; outline: none; font-size: 1.6rem; margin-top: 1.5rem; padding: 1.5rem;}
	.krr__js-modal__btn--close--fix::after{right: 2.0rem; border-width: 0.4em 0.5em;}

/*** Event - h ***/
	.krr__title h2{font-size: 3.25rem; line-height: 3.5rem;}
	.krr__title h2 em{font-size: 2rem;}
	.krr__title h2.starico::before{width: 21px; height: 21px;}
	.krr__title h2.starico::after{width: 15px; height: 15px;}
	.krr__title h2.starico.x1::before{top: calc(50% - 19px); left: calc(50% - 90px);}
	.krr__title h2.starico.x1::after{top: calc(50% - -6px); left: calc(50% - -74px);}
	.krr__title h2.starico.x2::before{top: calc(50% - 19px); left: calc(50% - 152px);}
	.krr__title h2.starico.x2::after{top: calc(50% - -6px); left: calc(50% - -129px);}
	.krr__title h2.starico.x3::before{top: calc(50% - 5px); left: calc(50% - 142px);}
	.krr__title h2.starico.x3::after{top: calc(50% - -23px); left: calc(50% - -122px);}
	.krr__title h2.starico.x4::before{top: calc(50% - 4px); left: calc(50% - 160px);}
	.krr__title h2.starico.x4::after{top: calc(50% - -22px); left: calc(50% - -139px);}

/*** Event - hr ***/
	hr{border-top: 7px dotted #fff100; margin: 3rem 0;}

/*** Event - a&Btn ***/
	a,a:hover{transition: all .0s;}
	.btnArea a.krr__btn,
	.modal__btn div.krr__btn{font-size: 1.6rem; padding: 1.5rem;}
	.btnArea a.krr__btn::after,
	.modal__btn div.krr__btn::after{right: 1.75rem; margin: -0.35rem 0 0 0;}
	#page-top {right: 0.8rem;}
	#page-top .scroll.show{bottom: calc(0vh - -4.5px);}
	#page-top a .scroll {width: 8rem; height: 6.2rem; bottom: calc(0vh - 65px);}
	#page-top a:hover .scroll figure.img{animation: bound .5s ease-in-out forwards;}

/*** Event - Keroro ***/
	#wrap_krr{font-size: 1.6rem; line-height: 1.6;}
	.content-wrapper{padding: 3rem 0;}
	.content-block{width: 100%; padding: 3rem; border: 2px solid #fff; border-left: none; border-right: 0; box-shadow: 0 0 15px 0 rgb(255 255 255 / 0.75); border-radius: 0;}

/* Contents Common */
/* Main image */
	section.hero .krr__mv{padding: 0;}

/* Section:Outline */
	section.outline .content-wrapper{padding: 3.75rem 0 3rem;}
	section.outline .krr__chach .krr__title h2{font-size: 2.4rem; line-height: 1.25em; margin: 0 0 1.5rem;}
	section.outline .krr__chach .krr__title h2 span{font-size: 1.6rem; line-height: 1.25;}
	section.outline date{margin: 2rem auto 0;}
	section.outline date dl{flex-direction: column; padding: 0.5rem 0;}
	section.outline date dt{max-width: 180px; font-size: 1.6rem; margin-right: 0; margin-bottom: 1.25rem;}
	section.outline date dd{font-size: 2.75rem; line-height: 1.15;}
	section.outline date dd em{font-size: 1.4rem; margin: 0 3px;}
	section.outline date dd sup{margin: 0 -5px;}

/* Section:Present */
	section.present .krr__title h2{margin-bottom: 1.5rem;}
	section.present .krr__detail p sup{font-size: 1.1rem; letter-spacing: 0;}
	section.present .krr__detail ul{width: 90%; max-width: 260px;}
	section.present .krr__detail div.cp__rewards{margin: 2rem 0;}
	section.present .krr__detail div.cp__howto{margin: 3rem auto; padding: 2.75rem 1.5rem; border: 2px solid #fff;}
	section.present .krr__detail div.cp__howto div.desc{width: 100%;}
	section.present .krr__detail div.cp__howto div.desc h3{font-size: 1.4rem; line-height: 2.05rem;}
	section.present .krr__detail div.cp__howto div.desc p{font-size: 1.5rem;}
	section.present .krr__detail div.cp__howto div.desc dl{margin-bottom: 1.75rem;}
	section.present .krr__detail div.cp__howto div.desc dt{padding: 0.25rem 0.25rem 0.1rem; margin-right: 0; margin-bottom: 0.5rem;}
	section.present .krr__detail div.cp__howto div.desc dd{width: 100%;}
	section.present .krr__detail div.cp__howto figure{width: 55%; margin: 0 auto;}

/* Section:Mission */
	section.mission h3{font-size: 1.85rem; line-height: 2.5rem; margin: 2rem 0;}
	section.mission .krr__detail p{font-size: 1.425rem; line-height: 1.65;}
    section.mission .krr__detail ul {max-width: 280px; margin: 2rem auto 1rem;}
	section.mission .krr__detail ul > li{width: 100%; margin: 0.75rem auto;}
	section.mission .krr__ms__list{margin: 2rem 0;}
	section.mission .krr__ms__list table th{width: 280px; padding: 0.75rem 1.25rem; border: 1px solid #09051d;}
	section.mission .krr__ms__list table td{border: 1px solid #09051d;}
	section.mission .krr__ms__list table td{padding: 0.75rem 1.25rem;}
	section.mission .krr__ms__list td h4{max-width: 100px; font-size: 1.4rem;}
	section.mission .krr__ms__list td span{font-size: 1.75rem;}
	section.mission .krr__ms__list td span em{font-size: 1.00rem;}
	section.mission .krr__ms__list td span sup{margin: 0 0.5rem 0 -0.25rem;}
	section.mission .krr__mission{margin: 2.5rem auto;}
	section.mission .krr__mission .krr__tabs .tab_label {padding: 1.25rem;}
	section.mission .krr__mission .krr__tabs .tab_label div{font-size: 1.8rem;}
	section.mission .krr__mission .krr__tabs .tab_label div em{font-size: 0.75em;  margin: 0 3px 0 4px; letter-spacing: -4px;}
	section.mission .krr__mission .krr__tab_inner .btnArea{max-width: 260px;}
	section.mission .krr__mission .krr__tab_inner .mission__list{margin-bottom: 5.5rem;}
	section.mission .krr__mission .krr__tab_inner .mission__list li.slick-slide {margin: 0 0.75rem;}
	section.mission .krr__mission .krr__tab_inner .krr__itemList{border: solid 3px #ccc; padding: 2.5rem;}
	section.mission .krr__mission .krr__tab_inner .krr__itemList.ms__primary.show{border: solid 3px #fffd9a; }
	section.mission .krr__mission .krr__tab_inner .krr__itemList.ms__secondary.show{border: solid 3px #b5ffb3;}
	section.mission .l_draw__flow .l_draw__text{width: 100%;}
	section.mission .l_draw__flow .l_draw__text h4{font-size: 3.2rem; text-align: center;}
	section.mission .l_draw__flow .l_draw__text p{font-size: 1.55rem; line-height: 2.55rem; margin: 1.5rem 0 0; letter-spacing: 0;}
	section.mission .l_draw__flow .l_draw__image{width: 80%;}
	section.mission .ms__clear h4{font-size: 1.8rem; line-height: 2.2rem; padding: 0.75rem; margin-bottom: 1.0rem;}
	section.mission .ms__clear .detail figure{margin-bottom: 0.75rem;}
	section.mission .ms__complete{margin: 2.5rem 0;}
	section.mission .ms__complete a{flex-direction: column; padding: 2.5rem; border: 3px solid rgb(108 194 74 / 1);}
	section.mission .ms__complete figure{width: 90%; max-width: 360px;}
	section.mission .ms__complete a::after{width: 27.5%; height: 27.5%; max-width: 115px; font-size: 2.745rem; margin: -40px -45px 0 0;}
	section.mission .ms__complete .desc{width: 100%; margin-bottom: 1.5rem;}
	section.mission .ms__complete .desc h4{font-size: 2.2rem; line-height: 2.8rem; margin-bottom: 1.5rem; text-align: center;}
	section.mission .ms__clear .detail a::after{width: 54px; height: 54px; font-size: 3.255rem; margin: -27px 0 0 -27px;}

/* Section:Campaign */
	section.campaign .krr__detail{margin: 3rem 0 0;}
	section.campaign .krr__detail h3{max-width: 190px; font-size: 1.25rem; border: 1px solid #fff; padding: 1.2rem 1rem 1rem;}
	section.campaign .krr__detail dt{margin: 1.5rem auto;}
	section.campaign .krr__detail th{padding: 1.0rem 0.5rem; border-bottom: 2px solid #09051f;}
	section.campaign .krr__detail td{padding: 1.0rem 0.5rem;}
	section.campaign .krr__detail ul{max-width: 280px; margin: 2rem auto 1rem;}
	section.campaign .krr__detail ul > li{width: 100%; margin: 0.75rem auto;}

/* Section:IP About */
	section.ip__about .krr__about{margin: 3rem 0 0;}
	section.ip__about .krr__about h3{font-size: 1.6rem; margin: 0 0 1.5rem; padding: 0.75rem;}
	section.ip__about .krr__about .visual-arts{width: 100%; margin: 0 auto 2rem;}
	section.ip__about .krr__about .detail{width: 100%;}
	section.ip__about .krr__about .detail figure{width: 75%; margin: -0.5rem auto 1.5rem;}
	section.ip__about .krr__about .detail p{line-height: 2.5rem; margin: 0 0 1.5rem;}
	section.ip__about .krr__about .detail .btnArea{max-width: 240px;}
	section.ip__about .krr__about .detail.nowrap .btnArea {margin: 2.0rem auto 0;}

/* Section:Notice */
	section.notice .content-wrapper{padding: 3rem 0 3.75rem;}
	section.notice .content-block .detail{margin: 2.5rem 0 0.25rem;}
	section.notice .content-block .detail h3{font-size: 1.55rem; margin: 0 0 -1.0rem;}
	section.notice .content-block .detail p{font-size: 1.2rem; margin: 1.75rem 0 0;}
	section.notice .content-block .detail ul{margin: 2rem 0 2rem 20px;}
	section.notice .content-block .detail ul > li{line-height: 1.65em; margin: 0 0 1.0rem;}

/* Section:Footer */
	#ip__footer{padding: 2rem 0;}


/* == Slick ================================================== */
	.modal__detail .mod__slider .slick-slide {min-width: 240px; margin: 0 0.5rem;}
	section .slick-dots,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots{bottom: -35px;}
	section .slick-dots li,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li{margin: 0 7px !important;}
	section .slick-dots li.slick-active button:before,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li.slick-active button:before{-webkit-text-stroke-width: 2px;}
	section .slick-dots li button:before,
	.krr-js-modal__main .modal__contentsBox .modal__detail .mod__slider ul.slick-dots li button:before{font-size: 13.75px; -webkit-text-stroke-width: 2px;}


/* == Modal ================================================== */
	.krr-js-mi_modal__main{max-width: 300px; padding: 1.5rem; margin: -180px 0 0 -150px; border: 2px solid #6CC24A;}
	.krr-js-mi_modal__main .confirm{top: -25px; right: -25px;}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix{width: 50px; height: 50px;}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::before,
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::after{width: 26px; top: 18px; left: 12px;}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::before {transform: rotate(-45deg);}
	.krr-js-mi_modal__main .confirm .krr-js-mi_modal__btn--close--fix::after{transform: rotate(45deg);}
	.krr-js-mi_modal__main .confirm span{font-size: 0.95rem; margin: 0 0 0 -14px; bottom: 4px;}
	.modal__detail h3{font-size: 2.0rem;}
	.modal__detail .mod__slider{margin: 1.25rem auto; padding: 0 0 1.25rem;}
	.modal__detail .mod__slider .slick-slide div img{border: 2px solid rgb(255 255 255);}
	.modal__detail .mod__slider .slick-slide p{font-size: 1.25rem; margin: 0.75rem 0 0 0;}
	.modal__detail .mod__slider ul.slick-dots{top: calc(100% + -10px);}
	.modal__detail .mod__slider ul.slick-dots > li{margin: 0 5px !important;}
	.modal__detail .mod__slider ul.slick-dots > li.slick-active button:before{-webkit-text-stroke-width: 2px;}
	.modal__detail .mod__slider ul.slick-dots > li button:before{font-size: 13.75px; -webkit-text-stroke-width: 2px;}
}

@media (max-width: 374px) {}

@media (max-width: 560px) {/**/}
@media (max-width: 400px) {/**/}
@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*/}


/* OVERLAY PICTURE ==============================================================================*/
/* Def */
	picture{width: 400px; height: auto; position: absolute; top: auto; left: auto; right: auto; bottom: auto;}
	picture.krrobj-1{bottom: -15px; left: -300px;}
	picture.krrobj-1 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-2{bottom: -15px; right: -295px;}
	picture.krrobj-2 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-3{top: 200px; right: -260px;}
	picture.krrobj-3 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-4{bottom: 15px; left: -245px;}
	picture.krrobj-4 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-5{top: 1235px; right: -250px;}
	picture.krrobj-5 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-6{bottom: 750px; left: -265px;}
	picture.krrobj-6 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-7{top: 75px; right: -215px;}
	picture.krrobj-7 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-8{bottom: -25px; left: -250px;}
	picture.krrobj-8 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-9{top: 320px; right: -200px;}
	picture.krrobj-9 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}
	picture.krrobj-10{bottom: -20px; left: -240px;}
	picture.krrobj-10 img{animation: float 3.75s ease-in-out infinite alternate-reverse;}

@media (max-width: 1280px) {
/* w1280 */
	picture{width: 260px;}
	picture.krrobj-1{bottom: -15px; left: -175px;}
	picture.krrobj-2{bottom: -15px; right: -175px;}
	picture.krrobj-3{top: 280px; right: -150px;}
	picture.krrobj-4{bottom: 15px; left: -155px;}
	picture.krrobj-5{top: 1450px; right: -165px;}
	picture.krrobj-6{bottom: 820px; left: -150px;}
	picture.krrobj-7{top: 140px; right: -125px;}
	picture.krrobj-8{bottom: -25px; left: -160px;}
	picture.krrobj-9{top: 475px; right: -135px;}
	picture.krrobj-10{bottom: -20px; left: -135px;}
}

@media (max-width: 1024px) {
/* w1024 */
	picture{width: 180px;}
	picture.krrobj-1{top: 30px; bottom: auto; left: -35px;}
	picture.krrobj-2{top: 30px; bottom: auto; right: -35px;}
	picture.krrobj-3{top: 280px; right: -35px;}
	picture.krrobj-4{bottom: 0; left: -35px;}
	picture.krrobj-5{top: 1525px; right: -35px;}
	picture.krrobj-6{bottom: 865px; left: -25px;}
	picture.krrobj-7{top: 100px; right: -5px;}
	picture.krrobj-8{bottom: -25px; left: -35px;}
	picture.krrobj-9{top: 540px; right: 5px;}
	picture.krrobj-10{bottom: -5px; left: -15px;}
}

@media (max-width: 767px) {
/* w767 */
	picture{width: 82px;}
	picture.krrobj-1{top: auto; bottom: -2px; left: -5px;}
	picture.krrobj-2{top: auto; bottom: -2px; right: -5px;}
	picture.krrobj-3{top: 445px; right: -5px;}
	picture.krrobj-4{bottom: 0; left: -5px;}
	picture.krrobj-5{top: 1185px; right: -5px;}
	picture.krrobj-6{bottom: 865px; left: 5px;}
	picture.krrobj-7{top: 53px; right: 5px;}
	picture.krrobj-8{bottom: -2px; left: -5px;}
	picture.krrobj-9{top: 74px; right: 20px;}
	picture.krrobj-10{bottom: -2px; left: -5px;}
}

@media (max-width: 374px) {
	/* w374 */
	picture.krrobj-1,picture.krrobj-2,picture.krrobj-3,picture.krrobj-4,picture.krrobj-5,picture.krrobj-6,picture.krrobj-7,picture.krrobj-8,picture.krrobj-9,picture.krrobj-10,picture.krrobj-11{display: none;}
}


/*DARTS MISSION ==============================================================================*/
	#content {background: none;}
	#head-menu .banner img{width: 100%;}
	.dartsmission {margin: 0; position: relative;}
	.dartsmission a{color: #6CC24A; text-decoration: underline;}
	.dartsmission .btnArea {width: 100%; max-width: 340px; margin: 0 auto;}
	.dartsmission .btnArea a{text-decoration: none;}

	.dartsmission .howto{width: 100%; padding: 4rem 0;}
	.dartsmission .howto .dm__date{margin-bottom: 3rem;}
	.dartsmission .howto .dm__date dl{width: 100%; display: flex; justify-content: flex-start; align-items: center; background-color: #fff; margin: 0 auto; padding: 2rem; border-radius: 60px;}
	.dartsmission .howto .dm__date dt{display: block; width: 30%; max-width: 170px; background: #08051b; color: #fffd9a; font-size: 2.5rem; font-weight: 700; line-height: 1.85rem; text-align: center; padding: 1.25rem; margin-right: 1rem; border-radius: 30px;}
	.dartsmission .howto .dm__date dd{width: 100%; color: #08051b; font-size: 3.75rem; font-weight: 700; line-height: 1; margin: 0;}
	.dartsmission .howto .dm__date dd em {font-size: 1.85rem; font-weight: 700; margin: 0 4px;}
	.dartsmission .howto .dm__date dd sup{top: 0; font-size: inherit; margin: 0 -8px;}
	.dartsmission .howto .dm__date.cp1 dl{background-color:#fffd9a;}
	.dartsmission .howto .dm__date.cp2 dl{background-color: #b5ffb3;}
	.dartsmission .howto .dm__date.cp1 dt{color: #fffd9a;}
	.dartsmission .howto .dm__date.cp2 dt{color: #b5ffb3;}

/* Common */
	.dartsmission .mission__List{width: 100%; padding: 3rem 0;}
	.dartsmission .mission__List h3 {font-size: 3.4rem; font-weight: 800; line-height: 1.25; color: #81e132; text-align: center; margin: -1.5rem 0 3rem;}
	.dartsmission .mission{background-color: rgb(255 255 255 / 0.1); width: 100%; max-width: 670px; padding: 2.5rem; margin: 2.5rem auto; position: relative; z-index: 1;}
	.dartsmission .mission:after{content: ""; position: absolute; border: solid 5px #333; top: -2px; left: -2px; bottom: -2px; right: -2px; z-index: -1;}
	.dartsmission .mission.cp1:after{border: solid 5px #fffd9a;}
	.dartsmission .mission.cp2:after{border: solid 5px #b5ffb3;}
	.dartsmission .mission h3 {width: 100%; max-width: 190px; color: #08051b; font-size: 2rem; background: #333; padding: 1rem; line-height: 1; text-align: center; margin: -23px 0 3rem -23px;}
	.dartsmission .mission.cp1 h3 {background: #fffd9a;}
	.dartsmission .mission.cp2 h3 {background: #b5ffb3;}
	.dartsmission .mission p.disc {font-size: 2.4rem; font-weight: bold; line-height: 3.0rem; margin: 0 0 5px;}
	.dartsmission .mission span.sub {font-size: 14px;}
	.dartsmission .mission .infosub {color: #fff100; margin: 1.5rem 0 0;}
	.dartsmission .mission .cell.info {width: 50%; color: #fff; vertical-align: bottom; position: relative;}
	.dartsmission .mission .cell.info p {margin: 10px 10px 0 0;}
	.dartsmission .mission .cell.bonus div.item-wrap {margin: 0; padding: 0;}
	.dartsmission .mission .cell.bonus {width: 50%;}
	.dartsmission .mission .cell.bonus img {width: 100%; max-width: 100%; border-radius: 0;}
	.dartsmission .mission .count {font-size: 2.2rem; font-weight: 700; text-align: left;}
	.dartsmission .mission.normal .count span {font-size: 3.0rem; font-weight: bold; color: #6CC24A;}

	.dartsmission .tips{font-size: 1.2rem; font-weight: 400;}
	.dartsmission .tips ul{margin: 0 0 1rem 25px; padding: 0;}
	.dartsmission .tips ul > li{list-style: disc;}
	.dartsmission .tips p{margin: 0; padding: 0;}
	.dartsmission .tips p span{font-size: 1.6rem; font-weight: 700;}

/* Cleared */
	.dartsmission .mission .clear-icon{width: 100px; height: 100px; background-image: url(../img/event/cpn_keroro/badge_clear.png); background-repeat: no-repeat; background-size: contain; text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute; top: -20px; right: -35px; transform: rotate(25deg); z-index: 5;}

/* Lucky Draw */
	.dartsmission .l_draw_result{background-color: #333; color: #fff; width: 100%; max-width: 300px; font-size: 1.35rem; text-align: center; padding: 0.75rem 0.5rem 0.5rem; margin: 0 auto; position: relative; z-index: 1;}
	.dartsmission .mission .l_draw_result.default{background-color: #a89f7c;}
	.dartsmission .l_draw_result.win{background-color: #e60012;}
	.dartsmission .l_draw_result.lose{background-color: #b0b0b0;}
	.dartsmission .l_draw_result.get{background-color: #bfb98a; background: -webkit-linear-gradient(-90deg, #bfb98a, #8b8428)}
	.dartsmission a.l_draw_lot{text-decoration: none;}
	.dartsmission a.l_draw_lot:hover{opacity: 0.75;}

/* footer-navi */
	.mission .footer-navi{margin: 2rem 0 4rem;}
	.mission .footer-navi ul,
	.mission .footer-navi ul > li {border: 1px solid #08051b;}
	.mission .footer-navi ul > li a{color: #08051b; background: rgb(108 194 74 / 1);}


@media (max-width: 768px) {
	.dartsmission .btnArea {max-width: 260px;}
	.dartsmission .howto{padding: 2.5rem 0;}
	.dartsmission .howto .dm__date{margin-bottom: 1.5rem;}
	.dartsmission .howto .dm__date dl{width: 90%; max-width: 500px; padding: 1.25rem 2.5rem;}
	.dartsmission .howto .dm__date dt{max-width: 85px; font-size: 1.35rem; line-height: 1.75rem; border-radius: 5px; padding: 0.5rem;}
	.dartsmission .howto .dm__date dd{font-size: 3.0rem;}
	.dartsmission .howto .dm__date dd em {font-size: 1.25rem; margin: 0 2px;}
	.dartsmission .howto .dm__date dd sup{margin: 0 -6px 0 -3px;}

/* Common */
	.dartsmission .mission__List{padding: 1.75rem 0;}
	.dartsmission .mission__List h3 {font-size: 2.8rem; margin: 0rem 0 3rem;}
	.dartsmission .mission__List h2{margin: 0 0 -1rem; font-size: 1.75rem; line-height: 1.45;}
	.dartsmission .mission{max-width: 520px; padding: 1.75rem;}
	.dartsmission .mission h3 {font-size: 1.8rem; margin: -19px 0 2.5rem -19px;}
	.dartsmission .mission span.sub {font-size: 12px;}
	.dartsmission .mission:after{border: solid 2px #333; top: -2px; left: -2px; bottom: -2px; right: -2px;}
	.dartsmission .mission.cp1:after{border: solid 2px #fffd9a;}
	.dartsmission .mission.cp2:after{border: solid 2px #b5ffb3;}
	.dartsmission .mission .cell.bonus {width: 52.5%;}
	.dartsmission .mission .count {font-size: 1.8rem; margin: -10px 0 0;}
	.dartsmission .mission.normal .count span {font-size: 2.8rem;}
	.dartsmission .tips{margin: 0;}
    .dartsmission .tips ul {margin: 0 0 1rem 20px;}

/* Cleared */
	.dartsmission .mission .clear-icon{width: 64px; height: 64px; top: -20px; right: -25px;}

/* Lucky Draw */
	.dartsmission .l_draw_result{font-size: 0.9rem; padding: 0.5rem;}

/* footer-navi */
	.mission .footer-navi{margin: 0 0 1.5rem;}
}

@media (max-width: 560px) {
	.dartsmission .howto .dm__date dl{max-width: 380px; padding: 1.15rem 2rem;}
	.dartsmission .howto .dm__date dt{max-width: 55px; font-size: 1.125rem; line-height: 1.35rem; margin-right: 0.5rem; padding: 0.5rem;}
	.dartsmission .howto .dm__date dd{font-size: 2.0rem;}
	.dartsmission .howto .dm__date dd em {font-size: 1.175rem;}
	.dartsmission .mission__List h3 {font-size: 1.7rem; padding: 0; margin: 0;}
	.dartsmission .mission h3 {max-width: 145px; font-size: 1.25rem; padding: 1rem; margin: -19px 0 2.0rem -19px;}
	.dartsmission .mission p.disc {font-size: 1.325rem; line-height: 1.75rem; margin: 0 0 2.5px;}
	.dartsmission .tips ul {margin: 0 0 2rem 20px;}
}



/*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 stroke {
  0%   {fill: #090526; stroke-dashoffset: 1800;}
  10%  {fill: transparent;}
  20%  {fill: #6CC24A; stroke-dashoffset: 0;}
  70%  {fill: #6CC24A; stroke-dashoffset: 0;}
  80%  {fill: transparent;}
  90%  {fill: #090526; stroke-dashoffset: 1800;}
  100% {fill: #090526; stroke-dashoffset: 1800;}
}

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

@keyframes float {
  0%   {transform: translateY(-1.75%);}
  100% {transform: translateY(2.75%);}
}