@charset "utf-8";
.kv_first {
		height: 500vh
}
.kv_section {
		min-height: 600px;
		height: 100vh;
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
}
@media(max-width: 600px) {
		.kv_section {
				height: 100vh;
				height: 100svh;
		}
}
.kv_section .kv {
		width: 800px;
		height: 730px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0
}
.kv .kv_cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 800px;
		background-image: url("../images/kv_logo_cover.png");
		z-index: -1;
		opacity: 0;
}
.kv_cover .kv_cover_in {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 800px;
		background-image: url("../images/kv_logo_cover_light.jpg");
		opacity: 0;
}
.kv .kv_catch {
		position: absolute;
		bottom: 0;
		right: -360px;
		font-size: 54px;
		font-family: "Figtree";
		font-weight: 400;
		line-height: 1.2;
}
.kv_catch, .kv_catch_sp, .kv_footer {
		transition: opacity 0.8s;
		opacity: 0;
}
.kv_catch.isActive, .kv_catch_sp.isActive, .kv_footer.isActive {
		opacity: 1;
}
.isDone .kv_catch, .kv_catch_sp.isDone, .kv_footer.isDone, .kv_catch_sp.isDone {
		transition: opacity 0.9s !important;
		transition-delay: 0s !important;
		opacity: 1 !important;
}
@media (min-width: 768px) and (max-height: 1150px) {
		.kv .kv_catch {
				right: -320px;
				font-size: 42px;
		}
}
@media(max-width: 1300px) {
		.kv .kv_catch {
				right: -220px;
				font-size: 34px;
		}
}
@media(max-width: 1024px) {
		.kv .kv_catch {
				right: inherit;
				left: 0;
				bottom: -10px;
				font-size: 34px;
		}
}
@media(min-width: 601px) {
		.kv_catch_sp {
				display: none
		}
}
@media(max-width: 600px) {
		.kv .kv_catch {
				display: none
		}
		.kv_section .kv_catch_sp {
				position: absolute;
				left: 30px;
				bottom: 80px;
				font-size: 32px;
				font-family: "Figtree";
				font-weight: 400;
				line-height: 1.2;
		}
}
.kv img {
		width: 100%;
		height: auto;
}
.kv .area-1 {
		position: absolute;
		left: 158px;
		top: -26px;
		width: 286px;
}
.area-1 div {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
}
.isStart .area-1 div {
		animation: kv1 1.0s linear forwards;
}
.isDone .area-1 div, .isDone .area-2 div, .isDone .area-3 div, .isDone .area-4 div {
		transition: opacity 0.5s;
		transition-delay: 0s !important;
		opacity: 1 !important;
}
.kv .area-2 {
		position: absolute;
		left: 391px;
		top: 0px;
		width: 408px;
}
.area-2 div {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
}
.isStart .area-2 div {
		animation: kv2 1.0s linear forwards;
}
.kv .area-3 {
		position: absolute;
		left: 0px;
		top: 293px;
		width: 417px;
}
.area-3 div {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
}
.isStart .area-3 div {
		animation: kv3 1.0s linear forwards;
}
.kv .area-4 {
		position: absolute;
		left: 361px;
		top: 466px;
		width: 266px;
}
.area-4 div {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
}
.isStart .area-4 div {
		animation: kv4 1.0s linear forwards;
}
@media(max-width: 600px) {
		.isStart .area-1 div {
				animation: kv1SP 1.0s linear forwards;
		}
		.isStart .area-2 div {
				animation: kv2SP 1.0s linear forwards;
		}
		.isStart .area-3 div {
				animation: kv3SP 1.0s linear forwards;
		}
		.isStart .area-4 div {
				animation: kv4SP 1.0s linear forwards;
		}
}
.kv div.kvAn-2 {
		animation-delay: 0.045s;
}
.kv div.kvAn-3 {
		animation-delay: 0.09s;
}
.kv div.kvAn-4 {
		animation-delay: 0.135s;
}
.kv div.kvAn-5 {
		animation-delay: 0.18s;
}
.kv div.kvAn-6 {
		animation-delay: 0.225s;
}
.kv div.kvAn-7 {
		animation-delay: 0.27s;
}
.kv div.kvAn-8 {
		animation-delay: 0.315s;
}
.kv div.kvAn-9 {
		animation-delay: 0.36s;
}
.kv div.kvAn-10 {
		animation-delay: 0.405s;
}
.kv div.kvAn-11 {
		animation-delay: 0.45s;
}
.kv div.kvAn-12 {
		animation-delay: 0.495s;
}
.kv div.kvAn-13 {
		animation-delay: 0.54s;
}
.kv div.kvAn-14 {
		animation-delay: 0.585s;
}
.kv div.kvAn-15 {
		animation-delay: 0.63s;
}
.kv div.kvAn-16 {
		animation-delay: 0.675s;
}
.kv div.kvAn-17 {
		animation-delay: 0.72s;
}
.kv div.kvAn-18 {
		animation-delay: 0.765s;
}
.kv div.kvAn-19 {
		animation-delay: 0.81s;
}
.kv div.kvAn-20 {
		animation-delay: 0.855s;
}
.kv div.kvAn-21 {
		animation-delay: 0.9s;
}
.kv div.kvAn-22 {
		animation-delay: 0.945s;
}
.kv div.kvAn-23 {
		animation-delay: 0.99s;
}
.kv div.kvAn-24 {
		animation-delay: 1.035s;
}
.kv div.kvAn-25 {
		animation-delay: 1.08s;
}
.kv div.kvAn-26 {
		animation-delay: 1.125s;
}
.kv div.kvAn-27 {
		animation-delay: 1.17s;
}
.kv div.kvAn-28 {
		animation-delay: 1.215s;
}
.kv div.kvAn-29 {
		animation-delay: 1.26s;
}
.kv div.kvAn-30 {
		animation-delay: 1.305s;
}
@keyframes kv1 {
		0% {
				opacity: 0;
				/*transform: scale(0.8) translate(30px, 30px);			*/
		}
		100% {
				opacity: 1;
				/*transform: scale(1) translate(0px, 0px);			*/
		}
}
@keyframes kv2 {
		0% {
				opacity: 0;
				/*transform: scale(0.8) translate(-10px, 30px);			*/
		}
		100% {
				opacity: 1;
				/*transform: scale(1) translate(0px, 0px); */
		}
}
@keyframes kv3 {
		0% {
				opacity: 0;
				/*transform: scale(0.8) translate(30px, -30px);*/
		}
		100% {
				opacity: 1;
				/*transform: scale(1) translate(0px, 0px);*/
		}
}
@keyframes kv4 {
		0% {
				opacity: 0;
				/* transform: scale(0.8) translate(-10px, -10px); */
		}
		100% {
				opacity: 1;
				/*	transform: scale(1) translate(0px, 0px); */
		}
}
@keyframes kv1SP {
		0% {
				opacity: 0;
				/*transform: scale(0.8) translate(15px, 15px); */
		}
		100% {
				opacity: 1;
				/*transform: scale(1) translate(0px, 0px); */
		}
}
@keyframes kv2SP {
		0% {
				opacity: 0;
				/*	transform: scale(0.8) translate(-5px, 15px); */
		}
		100% {
				opacity: 1;
				/*	transform: scale(1) translate(0px, 0px); */
		}
}
@keyframes kv3SP {
		0% {
				opacity: 0;
				/*		transform: scale(0.8) translate(15px, -15px);*/
		}
		100% {
				opacity: 1;
				/*transform: scale(1) translate(0px, 0px);*/
		}
}
@keyframes kv4SP {
		0% {
				opacity: 0;
				/*transform: scale(0.8) translate(-5px, -5px); */
		}
		100% {
				opacity: 1;
				/*	transform: scale(1) translate(0px, 0px);		*/
		}
}
/* ========== */
.kv-1-1 {
		transform-origin: 237px 207px;
}
.kv-1-3 {
		transform-origin: 189px 111px;
}
.kv-1-4 {
		transform-origin: 44px 174px;
}
.kv-1-5 {
		transform-origin: 60px 100px;
}
.kv-1-6 {
		transform-origin: 64px 52px;
}
.kv-1-7 {
		transform-origin: 35px 35px;
}
/*2 */
.kv-2-1 {
		transform-origin: 55px 359px;
}
.kv-2-2 {
		transform-origin: 155px 323px;
}
.kv-2-3 {
		transform-origin: 169px 241px;
}
.kv-2-4 {
		transform-origin: 264px 226px;
}
.kv-2-5 {
		transform-origin: 274px 106px;
}
.kv-2-6 {
		transform-origin: 153px 80px;
}
.kv-2-7 {
		transform-origin: 275px 56px;
}
/* 3 */
.kv-3-1 {
		transform-origin: 336px 58px;
}
.kv-3-2 {
		transform-origin: 239px 130px;
}
.kv-3-3 {
		transform-origin: 211px 169px;
}
.kv-3-4 {
		transform-origin: 274px 257px;
}
.kv-3-5 {
		transform-origin: 110px 239px;
}
.kv-3-6 {
		transform-origin: 247px 338px;
}
.kv-3-7 {
		transform-origin: 65px 373px;
}
.kv-3-8 {
		transform-origin: 162px 336px;
}
/* 4 */
.kv-4-1 {
		transform-origin: 34px 50px;
}
.kv-4-2 {
		transform-origin: 100px 78px;
}
.kv-4-3 {
		transform-origin: 150px 112px;
}
.kv-4-4 {
		transform-origin: 203px 138px;
}
.kv-4-5 {
		transform-origin: 150px 189px;
}
.kv-4-6 {
		transform-origin: 253px 123px;
}
.kv-4-7 {
		transform-origin: 230px 123px;
}
@media (min-width: 768px) and (max-height: 1150px) {
		.kv_section .kv {
				width: 500px;
				height: 470px;
		}
		.kv .kv_cover {
				top: 17px;
				left: 4px;
				background-size: 500px;
				background-image: url("../images/kv_logo_cover_mid.png");
		}
		.kv_cover .kv_cover_in {
				background-size: 500px;
				background-image: url("../images/kv_logo_cover_mid_light.jpg");
		}
		.kv .area-1 {
				top: 0px;
				left: 99px;
				width: 179px;
		}
		.kv .area-2 {
				left: 244px;
				top: 16px;
				width: 256px;
		}
		.kv .area-3 {
				top: 199px;
				width: 262px;
		}
		.kv .area-4 {
				left: 226px;
				top: 307px;
				width: 167px;
		}
		.kv-1-1 {
				transform-origin: 148.1px 129.4px;
		}
		.kv-1-3 {
				transform-origin: 118.1px 69.4px;
		}
		.kv-1-4 {
				transform-origin: 27.5px 108.8px;
		}
		.kv-1-5 {
				transform-origin: 37.5px 62.5px;
		}
		.kv-1-6 {
				transform-origin: 40px 32.5px;
		}
		.kv-1-7 {
				transform-origin: 21.8px 21.8px;
		}
		/* 2 */
		.kv-2-1 {
				transform-origin: 34.3px 224.3px;
		}
		.kv-2-2 {
				transform-origin: 96.8px 201.8px;
		}
		.kv-2-3 {
				transform-origin: 105.6px 150.6px;
		}
		.kv-2-4 {
				transform-origin: 165px 141.25px;
		}
		.kv-2-5 {
				transform-origin: 171.25px 66.25px;
		}
		.kv-2-6 {
				transform-origin: 95.6px 50px;
		}
		.kv-2-7 {
				transform-origin: 171.9px 35px;
		}
		/* 3 */
		.kv-3-1 {
				transform-origin: 210px 36px;
		}
		.kv-3-2 {
				transform-origin: 149px 81px;
		}
		.kv-3-3 {
				transform-origin: 131.9px 105.6px;
		}
		.kv-3-4 {
				transform-origin: 171px 160.6px;
		}
		.kv-3-5 {
				transform-origin: 68.8px 149.4px;
		}
		.kv-3-6 {
				transform-origin: 154.4px 211px;
		}
		.kv-3-7 {
				transform-origin: 40.6px 233px;
		}
		.kv-3-8 {
				transform-origin: 101px 210px;
		}
		/* 4 */
		.kv-4-1 {
				transform-origin: 21px 31px;
		}
		.kv-4-2 {
				transform-origin: 62.5px 48.8px;
		}
		.kv-4-3 {
				transform-origin: 93.8px 70px;
		}
		.kv-4-4 {
				transform-origin: 126.875px 86;
		}
		.kv-4-5 {
				transform-origin: 93.75px 118px;
		}
		.kv-4-6 {
				transform-origin: 158px 76.9px;
		}
		.kv-4-7 {
				transform-origin: 143.7px 76.9px;
		}
}
@media (min-width: 768px) and (max-height: 1150px) {
		.kv .kv_cover {
				top: 17px;
				left: 4px;
				background-size: 500px;
				background-image: url("../images/kv_logo_cover_mid.png");
		}
		.kv_cover .kv_cover_in {
				background-size: 500px;
				background-image: url("../images/kv_logo_cover_mid_light.jpg");
		}
		.kv .area-1 {
				top: 0px;
				left: 99px;
				width: 179px;
		}
		.kv .area-2 {
				left: 244px;
				top: 16px;
				width: 256px;
		}
		.kv .area-3 {
				top: 199px;
				width: 262px;
		}
		.kv .area-4 {
				left: 226px;
				top: 307px;
				width: 167px;
		}
		.kv-1-1 {
				transform-origin: 148.1px 129.4px;
		}
		.kv-1-3 {
				transform-origin: 118.1px 69.4px;
		}
		.kv-1-4 {
				transform-origin: 27.5px 108.8px;
		}
		.kv-1-5 {
				transform-origin: 37.5px 62.5px;
		}
		.kv-1-6 {
				transform-origin: 40px 32.5px;
		}
		.kv-1-7 {
				transform-origin: 21.8px 21.8px;
		}
		/* 2 */
		.kv-2-1 {
				transform-origin: 34.3px 224.3px;
		}
		.kv-2-2 {
				transform-origin: 96.8px 201.8px;
		}
		.kv-2-3 {
				transform-origin: 105.6px 150.6px;
		}
		.kv-2-4 {
				transform-origin: 165px 141.25px;
		}
		.kv-2-5 {
				transform-origin: 171.25px 66.25px;
		}
		.kv-2-6 {
				transform-origin: 95.6px 50px;
		}
		.kv-2-7 {
				transform-origin: 171.9px 35px;
		}
		/* 3 */
		.kv-3-1 {
				transform-origin: 210px 36px;
		}
		.kv-3-2 {
				transform-origin: 149px 81px;
		}
		.kv-3-3 {
				transform-origin: 131.9px 105.6px;
		}
		.kv-3-4 {
				transform-origin: 171px 160.6px;
		}
		.kv-3-5 {
				transform-origin: 68.8px 149.4px;
		}
		.kv-3-6 {
				transform-origin: 154.4px 211px;
		}
		.kv-3-7 {
				transform-origin: 40.6px 233px;
		}
		.kv-3-8 {
				transform-origin: 101px 210px;
		}
		/* 4 */
		.kv-4-1 {
				transform-origin: 21px 31px;
		}
		.kv-4-2 {
				transform-origin: 62.5px 48.8px;
		}
		.kv-4-3 {
				transform-origin: 93.8px 70px;
		}
		.kv-4-4 {
				transform-origin: 126.875px 86;
		}
		.kv-4-5 {
				transform-origin: 93.75px 118px;
		}
		.kv-4-6 {
				transform-origin: 158px 76.9px;
		}
		.kv-4-7 {
				transform-origin: 143.7px 76.9px;
		}
}
@media(max-width: 1024px) {
		.kv_section .kv {
				width: 500px;
				height: 600px;
		}
}
@media(max-width: 600px) {
		.kv_section .kv {
				width: 270px;
				height: 320px;
		}
		.kv .kv_cover {
				top: 8px;
				left: 0px;
				background-size: 270px;
		}
		.kv_cover .kv_cover_in {
				background-size: 270px;
		}
		.kv .area-1 {
				left: 53px;
				width: 98px;
				top: -2px;
		}
		.kv .area-2 {
				left: 131px;
				top: 8px;
				width: 139px;
		}
		.kv .area-3 {
				top: 107px;
				width: 143px;
		}
		.kv .area-4 {
				left: 121px;
				top: 164px;
				width: 92px;
		}
		.kv-1-1 {
				transform-origin: 79.9px 69.8px;
		}
		.kv-1-3 {
				transform-origin: 63.7px 37.4px;
		}
		.kv-1-4 {
				transform-origin: 14.8px 58.6px;
		}
		.kv-1-5 {
				transform-origin: 20.2px 33.7px;
		}
		.kv-1-6 {
				transform-origin: 21.6px 17.5px;
		}
		.kv-1-7 {
				transform-origin: 11.8px 11.8px;
		}
		/* 2 */
		.kv-2-1 {
				transform-origin: 18.5px 121.0px;
		}
		.kv-2-2 {
				transform-origin: 52.3px 108.9px;
		}
		.kv-2-3 {
				transform-origin: 56.9px 81.2px;
		}
		.kv-2-4 {
				transform-origin: 89.0px 76.2px;
		}
		.kv-2-5 {
				transform-origin: 92.4px 35.7px;
		}
		.kv-2-6 {
				transform-origin: 51.6px 27.0px;
		}
		.kv-2-7 {
				transform-origin: 92.7px 18.9px;
		}
		/* 3 */
		.kv-3-1 {
				transform-origin: 113.2px 19.5px;
		}
		.kv-3-2 {
				transform-origin: 80.5px 43.8px;
		}
		.kv-3-3 {
				transform-origin: 71.1px 57.0px;
		}
		.kv-3-4 {
				transform-origin: 92.4px 86.6px;
		}
		.kv-3-5 {
				transform-origin: 37.1px 80.5px;
		}
		.kv-3-6 {
				transform-origin: 83.2px 113.9px;
		}
		.kv-3-7 {
				transform-origin: 21.9px 125.7px;
		}
		.kv-3-8 {
				transform-origin: 54.6px 113.2px;
		}
		/* 4 */
		.kv-4-1 {
				transform-origin: 11.5px 16.9px;
		}
		.kv-4-2 {
				transform-origin: 33.7px 26.3px;
		}
		.kv-4-3 {
				transform-origin: 50.6px 37.7px;
		}
		.kv-4-4 {
				transform-origin: 68.4px 46.5px;
		}
		.kv-4-5 {
				transform-origin: 50.6px 63.7px;
		}
		.kv-4-6 {
				transform-origin: 85.3px 41.5px;
		}
		.kv-4-7 {
				transform-origin: 77.5px 41.5px;
		}
}
.kv_section .kv_footer {
		position: absolute;
		left: 0;
		bottom: 40px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30px;
}
.kv_section .kv_footer p {
		font-size: 14px;
		letter-spacing: 0
}
.kv_scroll a {
		color: #000;
		text-decoration: none;
		padding-right: 25px;
		position: relative;
}
.kv_scroll a::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 10px);
		right: 0;
		width: 15px;
		height: 17px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 15px;
		background-image: url("../images/icon_scroll.png")
}
@media(max-width: 600px) {
		.kv_section .kv_footer p {
				font-size: 12px;
		}
}
/* ========== */
.kv .kv_caption {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 20
}
.kv_caption_gr p {
		font-size: 24px;
		font-weight: 500;
		text-align: center;
		line-height: 2.4;
		opacity: 0;
		transition: opacity 0.8s;
}
.kv_caption_gr p.isActive {
		opacity: 1
}
@media (min-width: 768px) and (min-height: 1151px) {
		.kv_caption_gr p {
				font-size: 28px;
		}
}
@media(max-width: 767px) {
		.kv .kv_caption {
				width: calc(100% + 50px);
				left: -25px;
				top: -2em;
		}
		.kv_caption_gr p {
				font-size: 16px;
				line-height: 2;
		}
}