@charset "utf-8";

/*
parallax
*/
.parallax {
	top: -370px;
	@media (width <= 800px) {
		top: auto;
	}
}


/*
read-top
*/
.read-top {
	p {
		&.read-l {
			color: var(--black);
		}
	}
}


/*
business01
*/
.business01 {
	padding: 56px 0 180px;
	@media (width <= 800px) {
		padding: 40px 0 64px;
	}
	h3 {
		color: var(--blue);
		font-size: 24px;
		font-weight: 400;
		line-height: 1.16;
		margin-bottom: 8px;
		@media (width <= 800px) {
			font-size: 20px;
			margin-bottom: 15px;
		}
	}
	.cap-business {
		margin-bottom: 64px;
		margin-bottom: 56px;
	}
}
.philosophy {
	background-color: var(--white);
	padding: 0 110px;
	margin-bottom: 115px;
	@media (width <= 800px) {
		padding: 0 48px;
		margin-bottom: 72px;
	}
	.philosophy-detail {
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--lightgray);
		@media (width <= 800px) {
			flex-direction: column;
			gap: 32px 0;
		}
		&:first-child {
			padding: 72px 0 56px;
			@media (width <= 800px) {
				padding: 40px 0;
			}
		}
		&:last-child {
			padding: 56px 0 48px;
			border-bottom: none;
			@media (width <= 800px) {
				padding: 40px 0;
			}
		}
		h2 {
			width: 50%;
			margin: 0;
			@media (width <= 800px) {
				width: 100%;
			}
			.en {
				display: block;
				font-size: 40px;
				font-weight: 400;
				line-height: 1.2;
				margin-bottom: 10px;
				@media (width <= 800px) {
					font-size: 32px;
				}
			}
			.jp {
				display: block;
				color: var(--blue);
				font-size: 16px;
				@media (width <= 800px) {
					font-size: 14px;
				}
			}
		}
		p {
			width: 50%;
			font-size: 20px;
			line-height: 2.4;
			margin: 0;
			@media (width <= 800px) {
				width: 100%;
				font-size: 18px;
				white-space: nowrap;
				line-height: 1.75;
			}
		}
	}
}


/*
business02
*/
.business02 {
	padding-top: 132px;
	@media (width <= 800px) {
		padding-top: 72px;
	}
}

.business-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 56px;
	@media (width <= 800px) {
		flex-wrap: wrap;
		gap: 16px 0;
		margin-bottom: 48px;
	}
	.read-business-l {
		font-size: 40px;
		line-height: 1.675;
		margin-bottom: 0;
		@media (width <= 800px) {
			font-size: 26px;
			line-height: 1.8;
		}
	}
	.read-business-s {
		width: 56.4%;
		margin: 0;
		@media (width <= 800px) {
			width: 100%;
		}
	}
}

.products {
	display: flex;
	@media (width <= 800px) {
		display: block;
	}
	.l-products {
		width: 43.1%;
		padding-right: 115px;
		@media (width <= 800px) {
			width: 100%;
			padding-right: 0;
		}
		ul {
			width: 100%;
			max-width: 320px;
			counter-reset: my-counter;
			margin: 0;
			padding: 0;
			@media (width <= 800px) {
				max-width: inherit;
			}
			li {
				width: 100%;
				margin: 0 0 30px;
				padding: 0;
				@media (width <= 800px) {
					margin-bottom: 25px;
				}
				&:last-child {
					margin-bottom: 0;
				}
				&.current {
					a {
						.jp {
							color: var(--blue);
							@media (width <= 800px) {
								color: var(--black);
							}
						}
						&::after {
							width: 100%;
						}
						.btn-arrow {
							&::before {
								rotate: 45deg;
							}
						}
					}
				}
				a {
					position: relative;
					display: block;
					text-decoration: none;
					border-bottom: 1px solid var(--gray);
					padding-bottom: 5px;
					cursor: default;
					@media (width >= 800px) {
						&:hover {
							&::after {
								width: 100%;
							}
						}
					}
					&::before,
					&::after {
						position: absolute;
					}
					&::before {
						top: -2px;
						right: 2px;
						color: var(--blue);
						font-family: "Rubik", sans-serif;
						font-size: 12px;
						font-weight: 500;
						counter-increment: my-counter;
						content: counter(my-counter, decimal-leading-zero);						
					}
					&::after {
						left: 0;
						bottom: -1px;
						width: 0;
						height: 1px;
						background-color: var(--blue);
						content: "";
						transition: width 0.3s ease-out;
						@media (width <= 800px) {
							display: none;
						}
					}
					&.open {
						.btn-plus {
							&::after {
								@media (width <= 800px) {
									rotate: 0deg;
									opacity: 0;
								}
							}
						}
					}
					.en {
						display: block;
						color: var(--blue);
						font-size: 12px;
						line-height: 1.18;
						@media (width <= 800px) {
							font-size: 12px;
						}
					}
					.jp {
						display: block;
						font-size: 20px;
						line-height: 1.6;
						font-weight: 500;
					}
					.btn-arrow {
						right: 0;
						bottom: 10px;
						@media (width <= 800px) {
							display: none;
						}
					}
					.btn-plus {
						display: none;
						@media (width <= 800px) {
							display: block;
							position: absolute;
							top: 24px;
							right: 0;
							width: 17px;
							height: 17px;
							&::before,
							&::after {
								position: absolute;
								left: 50%;
								top: 50%;
								translate: -50% -50%;
								width: 100%;
								height: 2px;
								content: "";
								background-color: var(--blue);
								transition: all 0.3s ease-out;
							}
							&::after {
								rotate: -90deg;
							}
						}
					}
					.slide-content {
						display: none;
						width: 100%;
						.products-img-sp {
							@media (width <= 800px) {
								display: block;
								width: 100%;
								margin: 10px auto 15px;
							}
							img {
								@media (width <= 800px) {
									width: 100%;
									height: 44.5vw;
									object-fit: cover;
								}								
							}
						}
						.products-title-sp {
							@media (width <= 800px) {
								display: block;
								color: var(--blue);
								font-size: 16px;
								line-height: 1.7;
								margin-bottom: 5px;
							}
						}
						.products-text-sp {
							@media (width <= 800px) {
								display: block;
								font-size: 15px;
								line-height: 1.7;
								margin-bottom: 15px;
							}
						}
					}
				}
			}
		}
	}
	.r-products {
		position: relative;
		width: 56vw;
		margin-right: calc(50% - 50vw);
		@media (width <= 800px) {
			display: none;
		}
		.products-content {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			transition: opacity 0.3s ease-out;
			&.current {
				opacity: 1;
			}
			&.p01 {
				position: relative;
				left: auto;
				top: auto;
			}
			.products-img {
				position: relative;
				width: 100%;
				z-index: 0;
				img {
					width: 100%;
				}
			}
			.products-detail {
				position: absolute;
				left: -110px;
				bottom: -56px;
				width: 320px;
				background-color: var(--white);
				padding: 80px 24px;
				z-index: 1;
				p {
					font-size: 15px;
					margin: 0;
					&.products-title {
						color: var(--blue);
						font-size: 16px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
}


/*
business02
*/
.sticky {
	position: sticky;
	top: 96px;
	width: 100%;
	height: calc(100vh - 96px);
	@media (width <= 800px) {
		position: relative;
		top: auto;
		height: auto;
	}
	&:nth-child(even) {
		.value-content {
			flex-direction: row-reverse;
		}	
	}
	&.show {
		.value-content {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
			@media (width <= 800px) {
				clip-path: none;
			}
		}
	}
}
.value-content {
	display: flex;
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	@media (width <= 800px) {
		display: block;
		clip-path: none;
	}
	.value-img {
		width: 50%;
		height: calc(100vh - 96px);
		@media (width <= 800px) {
			width: 80.6%;
			height: auto;
			margin: 0 auto 32px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.value-detail {
		position: relative;
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 50%;
		height: calc(100vh - 96px);
		background-color: var(--darkblue);
		padding: 0 167px 0 88px;
		overflow: hidden;
		@media (width <= 800px) {
			width: 100%;
			height: auto;
			padding: 64px 15px
		}
		&::before {
			position: absolute;
			left: 50%;
			top: 50%;
			translate: -50% -50%;
			width: 83.9vw;
			height: 80.8vw;
			content: "";
			mix-blend-mode: multiply;
			background-image: url(../img/bg_value.webp);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			z-index: 0;
			pointer-events: none;
			@media (width <= 800px) {
				width: 247.7vw;
				height: 238.4vw;
			}
		}
		&::after {
			@media (width <= 800px) {
				position: absolute;
				left: 50%;
				bottom: 0;
				translate: -50% 0;
				width: calc(100% - 30px);
				height: 1px;
				content: "";
				background-color: #707070;
				mix-blend-mode: multiply;
			}
		}
		.no {
			color: var(--white);
			font-family: "Figtree", sans-serif;
			font-size: 12px;
			font-weight: 500;
			.now {
				font-size: 20px;
			}
		}
		h2 {
			color: var(--white);
			margin-bottom: 56px;
			@media (width <= 800px) {
				margin-bottom: 32px;
			}
			.l-text {
				display: block;
				font-size: 48px;
				font-weight: 400;
				line-height: 1.5;
				@media (width <= 800px) {
					font-size: 40px;
				}
			}
			.s-text {
				display: block;
				font-size: 16px;
				line-height: 1.5;
				@media (width <= 800px) {
					font-size: 15px
				}
			}
		}
		p {
			color: var(--white);
			line-height: 1.67;
			margin: 0;
		}
	}
}


/*
related-pages
*/
.related-pages {
	ul {
		li {
			&:nth-child(1) {
				display: none;
			}
		}
	}
}