@charset "utf-8";
@import url("root.css");

.kv {
	padding: 0 !important;
	width: 100%;
	aspect-ratio: 1920/890;
	position: relative;
	background: white;

	@media screen and (max-width: 480px) {
		aspect-ratio: unset;
	}

	&::before {
		position: absolute;
		content: "";
		background: url(../img/kv/kv_top.svg) no-repeat;
		left: 0;
		top: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: top;
	}

	&::after {
		position: absolute;
		content: "";
		background: url(../img/kv/kv_bottom.svg) no-repeat;
		left: 0;
		bottom: -1px;
		margin: auto;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: bottom;
	}

	@media screen and (max-width: 480px) {
		&::before {
			background: url(../img/kv/kv_top_sp.svg) no-repeat;
			background-size: contain;
			background-position: top;
		}

		&::after {
			background: url(../img/kv/kv_bottom_sp.svg) no-repeat;
			background-size: contain;
			background-position: bottom;
		}

	}

	.kv_box {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;

		@media screen and (max-width: 480px) {
			padding-top: 8vw;
			padding-bottom: 5.5vw;
		}

		&::after {
			content: "";
			position: absolute;
			background: url(../img/common/dots.svg) no-repeat;
			background-size: contain;
			width: 35%;
			aspect-ratio: 675/190;
			bottom: -10%;
			left: -10%;
			margin: auto;
			transform: rotate(30deg);


		}

		.text {
			margin-top: -7.6vw;
			padding-left: 3vw;
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			@media screen and (max-width:820px) {
				margin-top: -3vw;
			}

			@media screen and (max-width: 480px) {
				width: 100%;
				padding: 0;
				margin-top: 0;
			}

			.main_copy {
				width: 82%;

				display: flex;
				flex-direction: column;
				align-items: center;


				h1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #334155;




					span {
						display: inline-block;
						font-weight: 800;
						font-size: 5.1vw;
						line-height: 1.2;
						letter-spacing: 0.02em;

						@media screen and (max-width: 480px) {
							font-size: 10.5vw;
							line-height: 1.3;
						}


						&.row1 {
							.color {
								background: linear-gradient(135deg,
										#FF6B6B 0%,
										#FF8A5A 45%,
										#FF7A00 100%);
								-webkit-background-clip: text;
								background-clip: text;
								color: transparent;
								-webkit-text-fill-color: transparent;
							}
						}

					}

					span.lead {
						text-align: center;
						letter-spacing: 0.06em;
						position: relative;
						font-size: 1.45vw !important;
						font-weight: 700;

						margin-bottom: 1em;
						display: inline-block;
						background: var(--deep-blue);
						padding: 0.4em 0.5em 0.5em;
						width: 85%;
						border-radius: 100px;

						@media screen and (max-width: 480px) {
							letter-spacing: 0.03em;
							width: 95%;
							padding: 1em 1em;
							font-weight: 700;
							margin-bottom: 0.6em;
						}

						&::after {
							position: absolute;
							content: "";
							width: 2.4%;
							aspect-ratio: 14 / 12;
							background: var(--deep-blue);
							clip-path: polygon(50% 100%, 0 0, 100% 0);
							top: calc(100% - 1px);
							right: 0;
							left: 0;
							margin: auto;
						}



						span {
							color: #334155;
							color: var(--bg);
							font-size: 1.45vw !important;
							font-weight: 700;

							@media screen and (max-width: 480px) {
								font-size: 3.2vw !important;
							}

						}
					}

				}
			}

			.sub_copy {
				margin-top: 1.5vw;
				color: #6B7280;

				@media(max-width:480px) {
					margin: 0;
					margin-top: 5.5vw;
				}

				p strong {
					font-size: 600;
					font-size: 1.7vw;
					font-feature-settings: "palt";
					letter-spacing: 0.15em;
					line-height: 1.4;
					text-align: center;

					@media(max-width:480px) {
						padding: 0;
						margin-top: 5.5vw;
						font-size: 4vw;
						line-height: 1.5;
					}

					span {
						display: inline-block;
						font-size: 105%;
						font-weight: 800;
						color: var(--deep-blue);
						padding: 0 .15em;
						background: linear-gradient(transparent 72%,
								rgba(255, 246, 145, 1) 72%);
					}
				}
			}

			.kv_mark {
				width: 90%;
				margin: 0 auto;
				margin-top: 1.6vw;
				display: flex;
				align-items: center;
				justify-content: center;


				@media screen and (max-width: 480px) {
					width: 80%;
					margin: 6vw 0 2em;
					padding-bottom: 3vw;
				}

				.strengths_img {
					width: 80%;

					@media screen and (max-width: 480px) {
						width: 100%;
					}

					ul {
						width: 100%;
						display: flex;
						justify-content: space-between;
						gap: 0 2%;
						flex-wrap: nowrap;

						li {
							/* width: 49.2%; */
							flex: auto;
							position: relative;
							padding: 0 1.8vw;
							display: flex;
							justify-content: center;

							@media screen and (max-width: 480px) {
								padding: 0 4vw;
							}

							&:last-child {
								margin-bottom: 0;
							}

							&::before,
							&::after {
								position: absolute;
								content: "";
								aspect-ratio: 71/189;
								width: 1.8vw;
								top: 0;
								bottom: 0;
								left: 0;
								margin: auto;
								-webkit-mask: url(../img/kv/left.svg) no-repeat center / contain;
								mask: url(../img/kv/left.svg) no-repeat center / contain;
								background-color: #B7991F;
								/* background-size: contain; */
							}

							@media screen and (max-width: 480px) {

								&::before,
								&::after {
									width: 4vw;
								}
							}

							&::after {
								-webkit-mask: url(../img/kv/right.svg) no-repeat center / contain;
								mask: url(../img/kv/right.svg) no-repeat center / contain;
								left: auto;
								right: 0;
							}

							p {
								padding-top: 0.5vw;
								font-weight: 800;
								line-height: 1.2;
								color: #B7991F;
								width: auto;
								font-size: 1.2vw;
								letter-spacing: 0.02em;

								display: flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: center;

								br {
									display: none;
								}


								@media screen and (max-width: 480px) {
									font-size: 3.3vw;
									padding: 0;
									margin: 0;
								}


								span {
									font-size: 1vw;
									letter-spacing: 0.02em;

									width: 90%;

									@media screen and (max-width: 480px) {
										font-size: 2.5vw;
									}

									&.num {
										width: auto;
										font-weight: 700;
										font-size: 2.8vw;
										padding-bottom: 1vw;
										font-family: var(--montserrat);

										@media screen and (max-width: 480px) {
											font-size: 6.4vw;
										}
									}
								}
							}
						}
					}
				}
			}

		}

		.img {
			margin-top: -5.6vw;

			width: 50%;

			@media screen and (max-width:820px) {
				margin-top: 0;
			}

			.kv_slider {
				justify-content: flex-start;
				opacity: 0;
				transition: opacity .5s;

				&.slick-initialized {
					opacity: 1;
				}
			}

			@media screen and (min-width:481px) {

				.mocks {
					overflow: hidden;

					.kv_mock {
						padding-left: 0;

						.kv_slider {
							display: flex;
							align-items: center;
							margin-left: 0;

							.slick-list {
								width: 100%;
								aspect-ratio: 9/7.5;
								overflow: hidden;
								display: flex;
								align-items: center;
							}


							.slick-track {
								display: flex;
								align-items: center;
								width: 92% !important;
								aspect-ratio: 9/7.5;

								justify-content: flex-start !important;
								transform: translateX(0) !important;
							}

							.slick-slide {
								position: relative;
								transition: .5s ease;
								width: 0 !important;
								display: flex;
								align-items: center;

								img {
									width: 100%;
									display: block;
									filter: drop-shadow(0 0.3vw .6vw rgba(2, 132, 199, .15));
								}

								&.slick-current {
									width: 35% !important;
									z-index: 5;

								}

								&.slick-current+.slick-slide {
									width: 27% !important;
									margin-left: -5%;
									z-index: 4;
								}

								&.slick-current+.slick-slide+.slick-slide {
									width: 23% !important;
									margin-left: -4%;
									z-index: 3;
								}

								&.slick-current+.slick-slide+.slick-slide+.slick-slide {
									width: 17% !important;
									margin-left: -3%;
									z-index: 2;
								}

								&.slick-current+.slick-slide+.slick-slide+.slick-slide+.slick-slide {
									width: 0% !important;
									margin-left: -2%;
									z-index: 1;
									/* opacity: 0; */
								}
							}

							.slick-dots {
								display: flex;
								justify-content: center;
								gap: 1.6%;
								position: absolute;
								bottom: 2vw;
								left: 0;
								width: 100%;

								li {
									width: 1.6%;
									max-width: 15px;
									height: auto;
									aspect-ratio: 1/1;
									margin: 0;
									transition: all .1s;

									button {
										width: 100%;
										height: 100%;
										padding: 0;
										border-radius: 50%;
										background: #ccc;
										font-size: 0;

										&::before {
											display: none;
										}
									}

									&.slick-active {

										transform: scale(1.1);

										button {
											background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
										}
									}
								}
							}
						}
					}
				}
			}

		}

	}

	@media(max-width:480px) {

		.kv_box {

			display: flex;
			flex-direction: column;

			.kv_slider {
				padding-bottom: 1em;
				margin-bottom: 2em;
			}

			.text {
				display: contents;
			}

			.main_copy {
				order: 1;
			}

			.img {
				order: 2;
				width: 100%;
				margin-top: 7.5vw;

				.slick-slide {
					margin: 0 0.1em;
					transition: all .1s;

					transform: scale(0.9);
					transform-origin: center bottom;

					&.slick-current {
						transform: scale(1);
						z-index: 5;
					}

				}

				.slick-dots {

					display: flex;
					justify-content: center;
					gap: 12px;
					position: absolute;
					bottom: -7vw;
					left: 0;
					width: 100%;

					li {
						width: 12px;
						height: 12px;
						margin: 0;
						transition: all .1s;

						button {
							width: 12px;
							height: 12px;
							padding: 0;
							border-radius: 50%;
							background: #ccc;
							font-size: 0;

							&::before {
								display: none;
							}
						}

						&.slick-active {

							transform: scale(1.1);

							button {
								background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
							}
						}
					}
				}


			}

			.sub_copy {
				order: 3;
			}

			.kv_mark {
				order: 4;
			}

		}

	}
}