@charset "utf-8";
.kv_outer {
		overflow: hidden;
		background: #2ad2ec;
}
.kv {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s;
		transition-delay: 1.2s;
		height: 60vw;
}
@media(min-width: 768px) {
		.kv {
				transform: translate(11.32vw, -6.4vw);
				opacity: 0;
		}
		.isStart .kv {
				opacity: 1;
				transform: translate(0, 0);
		}
}
@media(max-width: 767px) {
		.kv_outer {
				/* transform: scale(1.5);
				transition: transform 3.5s cubic-bezier(0.16, 1, 0.3, 1); */
				transition-delay: 1.2s;
		}
		.kv_outer.isStart {
				transform: scale(1)
		}
}
@media(max-width: 960px) {
		.kv {
				height: 75vw !important;
				min-height: inherit !important;
		}
}
.kv_base {
		width: 95%;
		margin-top: 40px;
		position: relative;
}
.kv_base .kv_land {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
}
.land-1, .ataru-1 {
		animation: land-1 3.5s infinite;
}
.land-2, .ataru-2 {
		animation: land-2 3.5s infinite;
}
.land-3, .ataru-3, .area-3::after {
		animation: land-1 3.5s infinite;
}
.land-4, .ataru-4-1, .ataru-4-2 {
		animation: land-2 3.5s infinite;
}
.land-5, .ataru-5, .kv_statue, .kv_kids {
		animation: land-1 3.5s infinite;
}
@media(max-width: 767px) {
		.land-1, .ataru-1, .kv_pkg {
				animation: land-1SP 2.5s infinite;
		}
		.land-2, .ataru-2 {
				animation: land-2SP 2.5s infinite;
		}
		.land-3, .ataru-3, .area-3::after {
				animation: land-2SP 2.5s infinite;
		}
		.land-4, .ataru-4-1, .ataru-4-2 {
				animation: land-2SP 2.5s infinite;
		}
		.land-5, .ataru-5, .kv_statue, .kv_kids {
				animation: land-1SP 2.5s infinite;
		}
}
@media(max-width: 960px) {
		.kv_base {
				width: 760px;
				margin-top: 100px;
		}
}
.kv_area {
		animation: cloud 3.5s infinite;
}
.kv_base img {
		width: 100%;
		height: auto
}
.kv_base .kv_cloud {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none
}
@keyframes cloud {
		0%, 100% {
				transform: translateY(-20px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes land-1 {
		0%, 100% {
				transform: translateY(-15px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes land-2 {
		0%, 100% {
				transform: translateY(15px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes cloudSP {
		0%, 100% {
				transform: translateY(-5px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes land-1SP {
		0%, 100% {
				transform: translateY(-5px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes land-2SP {
		0%, 100% {
				transform: translateY(5px);
		}
		50% {
				transform: translateY(0px);
		}
}
@keyframes fly {
		from {
				transform: translateX(-1920px) translateY(-1200px); /* -1200 * 0.62487 */
		}
		to {
				transform: translateX(0) translateY(0);
		}
}
/* =========== */
.kv_base .item_land {
		position: absolute;
		cursor: pointer;
		z-index: 10;
}
@media(max-width: 767px) {
		.kv_base .item_land.area-1 {
				z-index: 50;
		}
}
.item_land .item_ataru {
		position: absolute;
		cursor: pointer;
		z-index: 9;
		width: 5.7vw;
		bottom: 0;
		left: calc(50% - 2.85vw);
}
.item_land.area-5 .item_ataru {
		left: calc(100% - 4.5vw);
}
.item_ataru img {
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ----------- */
.area-1 {
		width: 10vw;
		height: 9.5vw;
		left: 35.2vw;
		top: 17.5vw;
}
.area-2 {
		width: 10vw;
		height: 8.1vw;
		right: 12.4vw;
		top: 12.9vw;
}
.area-3 {
		width: 10vw;
		height: 8vw;
		left: 7.8vw;
		top: 10.4vw;
}
.area-3::after {
		content: '';
		display: block;
		position: absolute;
		bottom: -3.6vw;
		left: -0.3vw;
		width: 7vw;
		height: 6vw;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-image: url(../re_images/kv_cow.png);
		pointer-events: none;
		z-index: 10;
}
.area-4-1 {
		width: 10vw;
		height: 8vw;
		left: 12.45vw;
		top: 30vw;
}
.area-4-2 {
		width: 10vw;
		height: 8.3vw;
		right: 16.95vw;
		top: 30.8vw;
}
.area-5 {
		width: 16vw;
		height: 12vw;
		left: 41vw;
		top: 35.3vw;
}
.comment {
		width: 180px;
		height: 80px;
		position: relative;
		z-index: 30;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-image: url("../re_images/kv_comment.png");
		transition: opacity 0.8s;
		margin: 0 auto;
		opacity: 0;
}
@media(min-width: 768px) {
		.comment {
				transform: translateY(10px);
				transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
		}
}
@media(max-width: 767px) {
		.isAppeal .comment {
				animation: isAppeal 3s forwards;
		}
		.item_land.isOn .comment {
				opacity: 1 !important;
		}
		.item_land.isOn .item_ataru img {
				transform: scale(1.25) !important
		}
}
@keyframes isAppeal {
		0% {
				opacity: 0;
		}
		20%, 80% {
				opacity: 1
		}
		100% {
				opacity: 0;
		}
}
@media(max-width: 2000px) {
		.comment {
				top: -1vw
		}
}
@media(max-width: 1750px) {
		.comment {
				top: -1.5vw
		}
}
@media(max-width: 1700px) {
		.comment {
				top: -2vw
		}
}
@media(max-width: 1500px) {
		.comment {
				top: -2.5vw
		}
}
@media(max-width: 1200px) {
		.comment {
				top: -3vw
		}
}
.comment p a {
		color: #E60012;
		text-decoration: none;
}
.area-5 .comment {
		background-image: url("../re_images/kv_comment_extra.png");
		width: 3.7vw;
		height: 4.1vw;
		position: absolute;
		right: 0;
		top: 2.1vw;
}
@media (hover: hover) and (min-width: 768px) {
		.item_land:hover .comment {
				transform: translateY(0px);
				opacity: 1 !important;
		}
		.item_land:hover .item_ataru img {
				transform: scale(1.25)
		}
}
.comment_in {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 63px;
}
.comment p {
		text-align: center;
		line-height: 1.5;
		font-weight: 600;
		color: #E60012;
}
@media(max-width: 1600px) {
		.comment {
				width: 168px;
				height: 75px;
		}
		.comment p {
				font-size: 14px;
		}
}
@media(max-width: 1300px) {
		.area-5 .comment {
				top: 1.6vw;
				left: 12.2vw;
		}
}
@media(max-width: 1200px) {
		.comment {
				width: 150px;
				height: 66px;
		}
		.comment_in {
				height: 55px;
		}
		.comment p {
				font-size: 13px;
		}
}
@media(max-width: 960px) {
		.comment {
				width: 130px;
				height: 60px;
				top: -4vw;
				left: -1vw
		}
		.comment_in {
				height: 47px;
		}
		.comment p {
				font-size: 11px;
		}
		.area-5 .comment {
				top: -1.2vw;
				left: 10.1vw;
		}
}
@media(max-width: 960px) {
		.area-1 {
				width: 100px;
				height: 90px;
				left: 276px;
				top: 128px;
		}
		.area-2 {
				width: 100px;
				height: 90px;
				right: 90px;
				top: 80px;
		}
		.area-3 {
				width: 100px;
				height: 90px;
				left: 49px;
				top: 60px;
		}
		.area-4-1 {
				width: 100px;
				height: 90px;
				left: 87px;
				top: 221px;
		}
		.area-4-2 {
				width: 100px;
				height: 90px;
				right: 123px;
				top: 238px;
		}
		.area-5 {
				width: 100px;
				height: 90px;
				left: 354px;
				top: 294px;
		}
		.item_land .item_ataru {
				width: 60px;
				left: calc(50% - 30px);
		}
}
@media(max-width: 767px) {
		.kv_outer {
				overflow: hidden;
				height: 175vw;
		}
		.kv {
				height: 175vw !important;
				min-height: inherit;
		}
		.kv_base {
				width: 110vw;
				height: auto;
				margin-top: 40px;
				margin-left: -5vw;
		}
		.kv_base .kv_land, .kv_base .kv_cloud {
				width: 110vw;
				padding: 0;
		}
		.kv_base .kv_land.land-1 {
				z-index: 2
		}
		.kv_base .kv_land.land-4 {
				z-index: 3
		}
		.kv_base .kv_land.land-5 {
				z-index: 4
		}
		.kv_base .kv_land.land-6 {
				z-index: 6;
				pointer-events: none
		}
		.area-1 {
				width: 30vw;
				height: 35vw;
				left: 27.7vw;
				top: 50.1vw;
		}
		.area-2 {
				width: 30vw;
				height: 35vw;
				right: 10vw;
				left: inherit;
				top: 9.9vw;
		}
		.area-3 {
				width: 30vw;
				height: 35vw;
				left: 10.3vw;
				top: 9.6vw;
		}
		.area-3::after {
				bottom: -6vw;
				left: 4vw;
				width: 14vw;
				height: 14vw;
		}
		.area-4-1 {
				width: 30vw;
				height: 35vw;
				left: 4.1vw;
				top: 82.3vw;
		}
		.area-4-2 {
				width: 30vw;
				height: 35vw;
				right: 7.2vw;
				left: inherit;
				top: 84.1vw;
		}
		.area-5 {
				width: 30vw;
				height: 35vw;
				left: 38vw;
				top: 110vw;
				z-index: 50 !important
		}
		.item_land .item_ataru {
				width: 13vw;
				left: calc(50% - 6.5vw);
				bottom: 5vw;
		}
		.comment {
				width: 130px;
				height: 60px;
				top: -6px;
				left: calc(calc(30vw - 130px) * 0.5);
		}
		.area-1 .comment {
				top: 0;
		}
		.area-2 .comment {
				top: 5vw;
		}
		.area-3 .comment {
				top: 7vw;
		}
		.area-4-1 .comment {
				left: 2.4vw;
				top: 2.6vw;
		}
		.area-4-2 .comment {
				top: 3vw;
		}
		.area-5 .comment {
				top: 2.5vw;
				left: 26vw;
				width: 45px;
				height: 50px;
		}
		.item_land.area-3 .item_ataru {
				bottom: 3vw;
		}
}
/* =========== */
.kv_base .kv_kids {
		position: absolute;
		left: 43vw;
		top: 45.6vw;
		width: 8.1vw;
		pointer-events: none
}
.kv_base .kv_statue {
		position: absolute;
		left: 42.4vw;
		top: 33.5vw;
		width: 9.5vw;
}
.kv_statue img {
		width: 100%;
		height: auto;
}
@media(max-width: 960px) {
		.kv_base .kv_statue {
				left: 341px;
				top: 274px;
				width: 80px;
		}
}
@media(max-width: 767px) {
		.kv_base .kv_statue {
				width: 18.6vw;
				height: 30vw;
				left: 46.2vw;
				top: 112.2vw;
				z-index: 21
		}
		.kv_base .kv_kids {
				width: 17.3vw;
				left: 46.4vw;
				top: 133.3vw;
				z-index: 22;
		}
}
.kv_statue.beforeLaunch .rocket {
		transform: translateY(0);
}
.rocket img {
		position: relative;
		z-index: 2
}
/* 第一段階 */
.kv_statue.firstFire .rocket {
		animation: firstFire 1.2s ease-out forwards;
}
/* 第二段階 */
.kv_statue.speedUp .rocket {
		animation: speedUp 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@media(max-width: 767px) {
		.kv_statue.speedUp .rocket {
				animation: speedUp 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
		}
}
@keyframes firstFire {
		0% {
				transform: translateY(0);
		}
		100% {
				transform: translateY(-150px);
		}
}
@keyframes speedUp {
		0% {
				transform: translateY(-150px);
		}
		100% {
				transform: translateY(-2000px);
		}
}
.firstFire img {
		animation: biribiri .2s infinite;
}
@keyframes biribiri {
		0% {
				transform: translate(0px, 0px)
		}
		25% {
				transform: translate(1px, 1px)
		}
		50% {
				transform: translate(0px, 1px)
		}
		75% {
				transform: translate(1px, 0px)
		}
		100% {
				transform: translate(0px, 0px)
		}
}
/* ================ */
@media(min-width: 768px) {
		.kv_pkg {
				display: none
		}
}
@media(max-width: 767px) {
		.kv .kv_pkg {
				position: absolute;
				width: 41.9vw;
				left: 51.2vw;
				top: 30.1vw;
				z-index: 20;
				pointer-events: none;
		}
		.kv_pkg img {
				width: 100%;
				height: auto;
		}
}
/* =========== */
.kv_base .bard_oya {
		position: absolute;
		width: 70px;
		top: 100vh;
		right: -300px;
		z-index: 200;
}
.kv_base .bard_child {
		position: absolute;
		width: 42px;
		top: 100vh;
		right: -200px;
		z-index: 200;
}
.isFly .bard_oya {
		animation: fly 3.8s ease-out both;
}
.isFly .bard_child {
		animation: fly 3.7s ease-out both;
		animation-delay: 0.03s
}
@media(max-width: 767px) {
		.kv_base .bard_oya {
				width: 60px;
				right: -200px;
		}
		.kv_base .bard_child {
				width: 30px;
				right: -220px;
		}
}
/* =============== */
.rocket .fireGr {
		position: absolute;
		bottom: -20px;
		left: calc(50% - 30px);
		width: 60px;
		height: 60px;
		transform-origin: center bottom;
		animation-name: flicker;
		animation-duration: 3ms;
		animation-delay: 200ms;
		animation-timing-function: ease-in;
		animation-iteration-count: infinite;
		animation-direction: alternate;
}
.fire {
		bottom: 0;
		position: absolute;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
		border-top-left-radius: 50%;
		transform: rotate(-225deg) scale(1.5, 1.5);
		display: none;
}
.firstFire .fire, .speedUp .fire {
		display: block;
}
.fire.yellow {
		left: 15px;
		width: 30px;
		height: 30px;
		background: gold;
		box-shadow: 0px 0px 9px 4px gold;
}
.fire.orange {
		left: 10px;
		width: 40px;
		height: 40px;
		background: orange;
		box-shadow: 0px 0px 9px 4px orange;
}
.fire.red {
		left: 5px;
		width: 50px;
		height: 50px;
		background: OrangeRed;
		box-shadow: 0px 0px 5px 4px OrangeRed;
}
.fire.white {
		left: 15px;
		bottom: -4px;
		width: 30px;
		height: 30px;
		background: white;
		box-shadow: 0px 0px 9px 4px white;
}
.fire.blue {
		width: 10px;
		height: 10px;
		left: 25px;
		bottom: -25px;
		background: SlateBlue;
		box-shadow: 0px 0px 15px 10px SlateBlue;
}
.fire.black {
		width: 40px;
		height: 40px;
		left: 10px;
		bottom: -60px;
		background: #fff;
		box-shadow: 0px 0px 15px 10px #fff;
}
@media(max-width: 767px) {
		.rocket .fireGr {
				transform: scale(0.5)
		}
		.fire {
				bottom: 0;
				transform: rotate(-225deg) scale(1, 1);
		}
}
@keyframes flicker {
		0% {
				transform: rotate(-1deg);
		}
		20% {
				transform: rotate(1deg);
		}
		40% {
				transform: rotate(-1deg);
		}
		60% {
				transform: rotate(1deg) scaleY(1.04);
		}
		80% {
				transform: rotate(-2deg) scaleY(0.92);
		}
		100% {
				transform: rotate(1deg);
		}
}
.kv_base .smokeGr {
		position: absolute;
		top: 45.2vw;
		left: 41.6vw;
		width: 10vw;
		height: 5vw;
		z-index: 30;
		pointer-events: none
}
.smokeGr .smoke {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 50%;
		width: 3.5vw;
		height: 3.5vw;
		position: absolute;
		filter: blur(6px);
}
.smoke {
		transform: scale(0) translateY(-100px);
		opacity: 0;
}
.firstSmoke {
		animation: biribiri .2s infinite;
}
.firstSmoke .smoke {
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
		transform: scale(1.4) translateY(0px);
		opacity: 1;
}
.secondSmoke .smoke {
		transform: scale(1.4);
		opacity: 1;
		animation: smokeDown 2.2s forwards;
}
@keyframes smokeDown {
		0% {
				opacity: 1;
				transform: scale(1.4);
		}
		100% {
				opacity: 0;
				transform: scale(2);
		}
}
.smokeGr .smoke:nth-child(1) {
		width: 3vw;
		height: 3vw;
		top: -1vw;
		left: -1vw;
		transition-delay: 0.05s
}
.smokeGr .smoke:nth-child(2) {
		width: 4.2vw;
		height: 4.2vw;
		top: 0vw;
		left: -1vw;
}
.smokeGr .smoke:nth-child(3) {
		width: 4.5vw;
		height: 4.5vw;
		top: 1.4vw;
		left: 2vw;
		transition-delay: 0.02s
}
.smokeGr .smoke:nth-child(7) {
		width: 3.2vw;
		height: 3.2vw;
		top: 0vw;
		left: 1vw;
}
.smokeGr .smoke:nth-child(4) {
		width: 2.8vw;
		height: 2.8vw;
		top: 2vw;
		left: 4vw;
}
.smokeGr .smoke:nth-child(5) {
		width: 4.2vw;
		height: 4.2vw;
		top: 0vw;
		right: -1vw;
		transition-delay: 0.06s
}
.smokeGr .smoke:nth-child(6) {
		width: 3.2vw;
		height: 3.2vw;
		top: -2vw;
		right: -2vw;
}
@media(max-width: 1500px) {
		.kv_base .smokeGr {
				left: 41vw;
				top: 43vw;
				width: 12vw;
				height: 6vw;
		}
		.smokeGr .smoke {
				background: rgba(255, 255, 255, 0.8);
				width: 100px;
				height: 100px;
				filter: blur(2px);
				transform: scale(1.4)
		}
		.smokeGr .smoke:nth-child(1) {
				width: 20px;
				height: 20px;
				top: -8px;
				left: 0px;
		}
		.smokeGr .smoke:nth-child(2) {
				width: 30px;
				height: 30px;
				top: 0;
				left: -5px;
		}
		.smokeGr .smoke:nth-child(3) {
				width: 40px;
				height: 40px;
				top: 10px;
				left: 25px;
		}
		.smokeGr .smoke:nth-child(7) {
				width: 40px;
				height: 40px;
				top: 10px;
				left: 25px;
		}
		.smokeGr .smoke:nth-child(4) {
				width: 45px;
				height: 45px;
				top: 5px;
				left: 40px;
		}
		.smokeGr .smoke:nth-child(5) {
				width: 35px;
				height: 35px;
				top: 0;
				right: 5px;
		}
		.smokeGr .smoke:nth-child(6) {
				width: 20px;
				height: 20px;
				top: -0;
				right: -15px;
		}
}
@media(max-width: 767px) {
		.kv_base .smokeGr {
				width: 22.7vw;
				height: 12vw;
				left: 43.5vw;
				top: 129.3vw;
				z-index: 30;
		}
		.smokeGr .smoke:nth-child(3) {
				width: 40px;
				height: 40px;
				top: 8px;
				left: 5px;
		}
}