@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		z-index: 9999;
}
.loading_logo {
		display: none;
}
.loading_base .loading_logo {
		width: 250px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
}
@media(max-width: 767px) {
		.loading_base {
				width: 100%;
				height: 100vh;
				height: 100dvh;
		}
		.loading_base .loading_logo {
				width: 150px;
				transform: translate(-50%, -42.5%);
		}
}
.loading_logo img {
		width: 100%;
		height: auto;
		opacity: 0;
		animation: fadeIn 0.3s linear forwards;
}
@keyframes fadeIn {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
.kv {
		position: relative;
		overflow: hidden;
		background-color: #cedee9;
}
.kv img {
		width: 100%;
		height: auto
}
.kv_base {
		position: relative;
		z-index: 0
}
.kv .kv_parts {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
}
.kv .kv_parts.catch {
		top: 50%;
		transform: translateY(-50%)
}
@media(max-width: 600px) {
		.kv .kv_parts.catch {
				top: 45%;
				transform: translateY(-50%)
		}
}
@media screen and (orientation: portrait) and (max-width: 767px) {
		.kv {
				height: 100vh;
				height: 100dvh;
		}
		.kv .kv_parts.catch {
				top: 37vh;
				top: 37dvh;
				transform: translateY(0%)
		}
		.kv_base {
				position: absolute;
				top: inherit;
				bottom: 0;
				left: 0;
				width: 100%;
		}
		.kv .kv_parts {
				top: inherit;
				bottom: 0;
				left: 0;
		}
}
@media(max-width: 375px) {
		.kv .kv_parts.catch {
				top: 30vh !important;
				top: 30dvh !important;
				transform: translateY(0%)
		}
}
/* ================= */
.kv_parts.catch {
		opacity: 0;
		transition: opacity 0.8s;
}
.carLeft {
		/* transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s; */
		opacity: 0;
		/* transform: translateX(15vw); */
		will-change: transform, opacity;
}
.carRight {
		/*	transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s;*/
		opacity: 0;
		/*transform: translateX(-15vw);*/
		will-change: transform, opacity;
}
.carLeft.isActive, .carRight.isActive {
		opacity: 1;
		/* transform: translateX(0); */
}
.kv_parts.catch.isActive {
		opacity: 1;
}
.people {
		opacity: 0;
		transition: opacity 1s;
		will-change: opacity;
}
.people.isActive {
		opacity: 1;
}
.comment {
		opacity: 0;
		transform: translateY(100px);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
		will-change: transform, opacity;
}
.comment.isActive {
		opacity: 1;
		transform: translateY(0px);
}
.kv .kv_parts.cloud-1, .kv .kv_parts.cloud-2 {
		top: 130px;
		height: 300px;
		pointer-events: none;
		background-repeat: repeat-x;
		background-size: 100vw;
		z-index: 0;
		will-change: transform;
		transform: translateZ(0);
}
@media (max-width: 1500px) {
		.kv .kv_parts.cloud-1, .kv .kv_parts.cloud-2 {
				top: 80px;
		}
}
.kv .kv_parts.cloud-1 {
		background-image: url("../images/cloud-1_pc.png");
		animation: cloudMoveRight 60s linear infinite;
}
.kv .kv_parts.cloud-2 {
		background-image: url("../images/cloud-2_pc.png");
		animation: cloudMoveLeft 60s linear infinite;
}
.kv .kv_parts.carRight, .kv .kv_parts.carLeft {
		top: inherit;
		bottom: 0;
		height: 300px;
		pointer-events: none;
		background-repeat: repeat-x;
		background-size: 100vw;
		background-position: 0 bottom;
		z-index: 0;
		will-change: background;
}
.kv .kv_parts.carLeft {
		background-image: url("../images/kv_carLeft_bg_pc.png");
		animation: carMoveRight 18s linear infinite;
		z-index: 15
}
.kv .kv_parts.carRight {
		background-image: url("../images/kv_carRight_bg_pc.png");
		animation: carMoveLeft 20s linear infinite;
		z-index: 10
}
@keyframes cloudMoveRight {
		from {
				background-position: 0 0;
		}
		to {
				background-position: -100vw 0;
		}
}
@keyframes cloudMoveLeft {
		from {
				background-position: 0 0;
		}
		to {
				background-position: 100vw 0;
		}
}
@keyframes carMoveLeft {
		from {
				background-position: 0 bottom;
		}
		to {
				background-position: 100vw bottom;
		}
}
@keyframes carMoveRight {
		from {
				background-position: 0 bottom;
		}
		to {
				background-position: -100vw bottom;
		}
}
@media(max-width: 600px) {
		.kv .kv_parts.cloud-1 {
				top: 8vh;
				height: 300px;
		}
		.kv .kv_parts.cloud-2 {
				top: 15vh;
				height: 300px;
		}
		.kv .kv_parts.cloud-1 {
				background-image: url("../images/cloud-1_sp.png");
				animation: cloudMoveRight 20s linear infinite;
		}
		.kv .kv_parts.cloud-2 {
				background-image: url("../images/cloud-2_sp.png");
				animation: cloudMoveLeft 20s linear infinite;
		}
		.kv .kv_parts.carLeft {
				background-image: url("../images/kv_carLeft_bg_sp.png");
				animation: carMoveRight 14s linear infinite;
		}
		.kv .kv_parts.carRight {
				background-image: url("../images/kv_carRight_bg_sp.png");
				animation: carMoveLeft 15s linear infinite;
		}
}
@media(max-width: 375px) {
		.kv .kv_parts.cloud-1 {
				top: 2vh;
				height: 300px;
		}
		.kv .kv_parts.cloud-2 {
				top: 7vh;
				height: 300px;
		}
}
.bounce img {
		animation-duration: 0.75s;
		animation-name: bounce;
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
}
.comment-1.bounce img {
		animation-delay: 0.3s
}
/*
.people-1 img,
.people-2 img {
		opacity: 0!important
}
.people-1, .people-2 {
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
}
.people-1 {
		background-image: url("../images/kv_people-1_motion_pc.png")
}
.people-2 {
		background-image: url("../images/kv_people-2_motion_pc.png")
}
@media(max-width: 600px) {
		.people-1 {
				background-position: 0 bottom;
				background-size: 100%;
				background-image: url("../images/kv_people-1_sp.png")
		}
		.people-2 {
				background-position: 0 bottom;
				background-size: 100%;
				background-image: url("../images/kv_people-2_sp.png")
		}
}
*/
@keyframes bounce {
		from, 20%, 53%, 80%, to {
				-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		}
		40%, 43% {
				-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				-webkit-transform: translate3d(0, -60px, 0);
				transform: translate3d(0, -60px, 0);
		}
		70% {
				-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				-webkit-transform: translate3d(0, -30px, 0);
				transform: translate3d(0, -30px, 0);
		}
		90% {
				-webkit-transform: translate3d(0, -10px, 0);
				transform: translate3d(0, -10px, 0);
		}
}
.businessman {
		animation: walkMan 60s linear infinite;
}
.sanpo {
		animation: sanpo 50s linear infinite;
}
.cycle {
		animation: cycle 10s linear infinite;
}
@keyframes walkMan {
		0% {
				transform: translateX(-10vw)
		}
		100% {
				transform: translateX(30vw)
		}
}
@keyframes sanpo {
		0% {
				transform: translateX(0vw)
		}
		100% {
				transform: translateX(-30vw)
		}
}
@keyframes cycle {
		0% {
				transform: translateX(0vw)
		}
		100% {
				transform: translateX(-40vw)
		}
}