@charset "UTF-8";

/* Loading Video Overlay */
#sd-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 99999;
	background-color: #000;
	transition: opacity 1s ease-out;
}

#sd-video.fade-out {
	opacity: 0;
}

body.video-playing {
	overflow: hidden !important;
}

main {
	margin-bottom: 9rem;
	@media screen and (max-width: 767px) {
		margin-bottom: 4rem;
	}
}

.common-header-top {
	margin-bottom: 4rem;
	@media screen and (max-width: 767px) {
		margin-bottom: 2rem;
	}
	.en {
		font-family: var(--inter);
		font-style: normal;
		font-weight: 700;
		font-size: 11rem;
		line-height: 100%;
		letter-spacing: 0.05em;
		color: #ffffff;
		margin-bottom: 2.4rem;
		@media screen and (max-width: 767px) {
			font-size: 3.6rem;
			margin-bottom: 0.9rem;
		}
	}
	.jp {
		font-family: var(--noto);
		font-style: normal;
		font-weight: 700;
		font-size: 3rem;
		line-height: 100%;
		letter-spacing: 0.1em;
		color: #ffffff;
		padding-bottom: 4rem;
		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			padding-bottom: 2rem;
		}
	}
	.bar {
		width: 22rem;
		margin-left: 1rem;
		margin-right: 1rem;
		background-color: #ffffff;
		height: 1px;
		box-sizing: border-box;
		position: relative;
		@media screen and (max-width: 767px) {
			width: 6.8rem;
		}
		&:before {
			content: "";
			position: absolute;
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.6rem;
			background-color: #ffffff;
			left: -1rem;
			top: 50%;
			transform: translateY(-50%);
			@media screen and (max-width: 767px) {
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 0.3rem;
				left: -0.5rem;
			}
		}
		&:after {
			content: "";
			position: absolute;
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.6rem;
			background-color: #ffffff;
			right: -1rem;
			top: 50%;
			transform: translateY(-50%);
			@media screen and (max-width: 767px) {
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 0.3rem;
				right: -0.5rem;
			}
		}
	}
}

#banner {
	width: 100%;
	background: url("../img/top/banner.png") no-repeat center / cover;
	box-sizing: border-box;
	margin-bottom: 6rem;
	position: relative;
	@media screen and (max-width: 767px) {
		background: url("../img/top/banner-sp.png") no-repeat center / cover;
		height: 70rem;
		margin-bottom: 4rem;
	}
	.lottie-corner-container {
		position: absolute;
		top: 0;
		left: -4.5rem;
		z-index: 100;
		transform: rotate(90deg);
		pointer-events: none;
		@media screen and (max-width: 767px) {
			left: -6rem;
		}
		& lottie-player {
			width: 45.492rem;
			height: 44.851rem;
			opacity: 30%;
			@media screen and (max-width: 767px) {
				width: 18.8rem;
				height: 25.974rem;
			}
		}
	}
	.banner-text {
		padding-top: 78.3rem;
		padding-bottom: 12.2rem;
		position: relative;
		z-index: 10;
		@media screen and (max-width: 767px) {
			padding-top: 52.6rem;
		}
		.jp {
			margin-bottom: 1.6rem;
			font-family: var(--noto);
			font-style: normal;
			font-weight: 700;
			font-size: 6rem;
			line-height: 100%;
			letter-spacing: 0.1em;
			color: #ffffff;
			@media screen and (max-width: 767px) {
				font-size: 2.235rem;
				line-height: 120%;
				margin-bottom: 0.6rem;
			}
		}
		.en {
			font-family: var(--inter);
			font-style: normal;
			font-weight: 700;
			font-size: 10rem;
			line-height: 100%;
			font-feature-settings: "liga" off;
			color: #ffffff;
			word-break: keep-all;
			@media screen and (max-width: 767px) {
				font-size: 3.724rem;
			}
		}
	}
	.lottie-bottom-corner-container {
		position: absolute;
		bottom: -0.5rem;
		right: -0.5rem;
		z-index: 100;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 3rem;
		pointer-events: none;
		@media screen and (max-width: 767px) {
			width: calc(100% + 6.3rem);
			gap: 1.6rem;
			right: -6.3rem;
		}
		.lottie-wrapper {
			display: flex;
			align-items: flex-end;
			flex-shrink: 0;
			opacity: 30%;
			& lottie-player {
				width: 51.314rem !important;
				height: 41.751rem !important;
				display: block !important;
				flex-shrink: 0;
				@media screen and (max-width: 767px) {
					width: 23.247rem !important;
					height: 18.915rem !important;
					display: block !important;
					flex-shrink: 0;
					vertical-align: bottom;
				}
				svg {
					width: 100%;
					height: 100%;
					@media screen and (max-width: 767px) {
						display: block;
						vertical-align: bottom;
					}
				}
			}
            & lottie-player.lottie-player3 {
				width: 41.751rem !important;
				height: 51.314rem !important;
                @media screen and (max-width:767px){
                    width: 18.915rem !important;
					height: 23.247rem !important;
                }
            }
		}
	}
}

#about {
	width: 100%;
	padding: 10rem 0;
	box-sizing: border-box;
	background: url("../img/top/about-bg.png") no-repeat center / cover;
	margin-bottom: 6rem;
	position: relative;
	@media screen and (max-width: 767px) {
		margin-bottom: 4rem;
		padding: 4.8rem 0 9.5rem;
	}
	.body-text {
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 180%;
		letter-spacing: 0.1em;
		color: #ffffff;
		margin-bottom: 4rem;
		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-bottom: 2rem;
		}
	}
	.lottie-player-a {
		position: absolute;
		bottom: -0.6rem;
		right: -0.5rem;
		width: 41.751rem !important;
		height: 51.314rem !important;
		opacity: 30%;
		@media screen and (max-width: 767px) {
			width: 20.7rem !important;
			height: 25.01rem !important;
		}
	}
}

#service {
	width: 100%;
	padding: 10rem 0;
	box-sizing: border-box;
	background: url("../img/top/service-bg.png") no-repeat center / cover;
	margin-bottom: 9rem;
	position: relative;
	@media screen and (max-width: 767px) {
		padding: 4.8rem 0 12rem;
		margin-bottom: 4rem;
	}

	.body-text {
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 180%;
		letter-spacing: 0.1em;
		color: #ffffff;
		margin-bottom: 4rem;
		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}
	.lottie-player-a {
		position: absolute;
		bottom: -0.6rem;
		right: -0.5rem;
		width: 36.492rem !important;
		height: 44.851rem !important;
		opacity: 30%;
		@media screen and (max-width: 767px) {
			width: 20.7rem !important;
			height: 25.01rem !important;
		}
	}
}

#pcb {
	width: 100%;
	padding: 8rem 32rem;
	box-sizing: border-box;
	background: url("../img/top/pcb-bg.png") no-repeat center / cover;
	margin-bottom: 9rem;
	@media screen and (max-width: 767px) {
		padding: 4rem 2.4rem;
		margin-bottom: 4rem;
	}
	.header {
		font-style: normal;
		font-weight: 700;
		font-size: 7rem;
		line-height: 100%;
		text-align: center;
		letter-spacing: 0.1em;
		color: #ffffff;
		margin-bottom: 4.8rem;
		@media screen and (max-width: 767px) {
			font-size: 2rem;
			margin-bottom: 2.4rem;
		}
	}
	.bar-wide {
		margin-left: 1.2rem;
		margin-right: 1.2rem;
		background-color: #ffffff;
		height: 1px;
		width: 100%;
		position: relative;
		@media screen and (max-width: 767px) {
			margin-left: 0;
			margin-right: 0;
		}
		&:before {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: -1.2rem;
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.6rem;
			background: #fff;
		}
		&:after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: -1.2rem;
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 0.6rem;
			background: #fff;
		}
	}
	.pcb-main-text {
		padding: 3.2rem 0;
		box-sizing: border-box;
		@media screen and (max-width: 767px) {
			padding: 1.6rem 0;
		}
		.title {
			margin-bottom: 2rem;
			font-style: normal;
			font-weight: 700;
			font-size: 2.8rem;
			line-height: 3.4rem;
			letter-spacing: 0.1em;
			color: #ffffff;
			@media screen and (max-width: 767px) {
				font-size: 1.6rem;
				line-height: 1.5;
				margin-bottom: 1rem;
			}
		}
		.description {
			font-style: normal;
			font-weight: 400;
			font-size: 1.8rem;
			line-height: 180%;
			letter-spacing: 0.1em;
			color: #ffffff;
			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				line-height: 170%;
			}
		}
	}
	.view-more-btn.reversed {
		margin: 4.8rem auto 0;
		background-color: #fff;
		border: #0f73ba solid 1px;
		@media screen and (max-width: 767px) {
			margin: 2.4rem auto 0;
		}
		.text {
			color: #0f73ba;
		}
		.bar {
			&:before {
				background-color: #0f73ba;
			}
			&:after {
				background-color: #0f73ba;
			}
		}
	}
	.view-more-btn.reversed:hover {
		background-color: #0f73ba;
		border: #fff solid 1px;
		.text {
			color: #fff;
		}
		.bar {
			&:before {
				background-color: #fff;
			}
			&:after {
				background-color: #fff;
			}
		}
	}
}

#verticle-bar {
	width: 0.1rem;
	height: 15rem;
	box-sizing: border-box;
	margin: 0 auto 1.2rem;
	position: relative;
	@media screen and (max-width: 767px) {
		height: 6rem;
	}
	&:before {
		content: "";
		position: absolute;
		bottom: -1.2rem;
		transform: translateX(-50%);
		left: 50%;
		right: 0;
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 0.6rem;
		background: #00518b;
		@media screen and (max-width: 767px) {
			width: 0.4rem;
			height: 0.4rem;
			border-radius: 0.4rem;
			bottom: 0;
		}
	}
	&:after {
		content: "";
		position: absolute;
		top: -1.2rem;
		background-color: #00518b;
		left: 50%;
		transform: translateX(-50%);
		right: 0;
		width: 1px;
		height: 15rem;
		background: #00518b;
		@media screen and (max-width: 767px) {
			height: 5rem;
			top: 0;
		}
	}
}