@charset "UTF-8";

.view-more-btn.reversed {
	margin: 0;
	background-color: #fff;
	border: #0f73ba solid 1px;
	.text {
		color: #0f73ba;
		white-space: nowrap;
	}
	.bar {
		&:before {
			width: 5.8rem;
			background-color: #0f73ba;
			@media screen and (max-width: 767px) {
				width: 4rem;
			}
		}
		&:after {
			background-color: #0f73ba;
			right: 1.83rem;
		}
	}
}

.view-more-btn {
	.bar {
		&:before {
			width: 5.8rem;
			@media screen and (max-width: 767px) {
				width: 4rem;
			}
		}
		&:after {
			right: 1.83rem;
		}
	}
}

.view-more-btn.reversed:hover {
	background-color: #0f73ba;
	border: #fff solid 1px;
	.text {
		color: #fff;
	}
	.bar {
		&:before {
			background-color: #fff;
		}
		&:after {
			background-color: #fff;
		}
	}
}

#countdown .num {
	transition: opacity 0.3s ease;
}
.fade-out {
	opacity: 0.3;
}

#pcb {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding-top: 27.5rem;
	@media screen and (max-width: 767px) {
		padding-top: 16rem;
	}
	&:before {
		content: "";
		position: fixed;
		inset: 0;
		background: url("../../img/page/pcb/pcb-bg.jpg") no-repeat center / cover;
		z-index: -2;
		width: 100%;
		height: 100vh;
		@media screen and (max-width: 767px) {
			background: url("../../img/page/pcb/pcb-bg-sp.png") no-repeat center / cover;
		}
	}
	.main-text {
		max-width: 108rem;
		margin: 0 auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.large-text {
			font-family: var(--noto);
			font-style: normal;
			font-weight: 700;
			font-size: 5.4rem;
			line-height: 100%;
			text-align: center;
			letter-spacing: 0.1em;
			color: #ffffff;
			margin-bottom: 2.4rem;
			@media screen and (max-width: 767px) {
				font-size: 3rem;
				line-height: 1.4;
				margin-bottom: 1.6rem;
			}
		}
		.deadline-text {
			font-family: var(--noto);
			font-style: normal;
			font-weight: 400;
			font-size: 2.6rem;
			line-height: 1;
			text-align: center;
			letter-spacing: 0.1em;
			color: #ffe23d;
			margin-bottom: 5.5rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 3.6rem;
				font-size: 1.8rem;
			}
		}
		.countdown-container {
			width: 100%;
			padding: 3rem 0;
			/* border-top: #fff solid 1px;
            border-bottom: #fff solid 1px; */
			display: flex;
			justify-content: center;
			margin-bottom: 3rem;
			position: relative;
			@media screen and (max-width: 767px) {
				padding: 2.4rem 0;
				margin-bottom: 2rem;
			}
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				height: 6px;
				background: url("../../img/page/pcb/countdown-pc.png") no-repeat center / 100% auto;
				@media screen and (max-width: 767px) {
					background: url("../../img/page/pcb/countdown-sp.png") no-repeat center / 100% auto;
				}
			}
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				height: 6px;
				background: url("../../img/page/pcb/countdown-pc.png") no-repeat center / 100% auto;
				@media screen and (max-width: 767px) {
					background: url("../../img/page/pcb/countdown-sp.png") no-repeat center / 100% auto;
				}
			}
			#countdown {
				margin: 0 auto;
				@media screen and (max-width: 767px) {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.flex-wrapper {
					@media screen and (max-width: 767px) {
						display: flex;
						justify-content: center;
						align-items: baseline;
					}
				}
				.num {
					font-family: var(--inter);
					font-style: normal;
					font-weight: 400;
					font-size: 8rem;
					line-height: 1.2;
					color: #ffffff;
					margin-right: 0.6rem;
					@media screen and (max-width: 767px) {
						font-size: 4.4rem;
						letter-spacing: 0;
						text-align: center;
					}
				}
				.num.days {
					@media screen and (max-width: 767px) {
						font-size: 5.4rem;
					}
				}

				.label {
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 4rem;
					line-height: 4.8rem;
					color: #ffffff;
					margin-right: 1.8rem;
					@media screen and (max-width: 767px) {
						font-size: 1.8rem;
						margin-right: 1.4rem;
						text-align: center;
					}
				}
			}
		}
		.note {
			font-family: var(--noto);
			font-style: normal;
			font-weight: 400;
			font-size: 1.6rem;
			line-height: 1.9rem;
			text-align: center;
			letter-spacing: 0.1em;
			color: #ffffff;
			margin-bottom: 19rem;
			@media screen and (max-width: 767px) {
				font-size: 1.2rem;
				line-height: 1.4;
				text-align: left;
				padding-left: 2.2rem;
				box-sizing: border-box;
				margin-bottom: 10rem;
			}
		}
		.scroll {
			width: 10.4rem;
			margin-bottom: 22.3rem;
			@media screen and (max-width: 767px) {
				width: 9.1rem;
				margin-bottom: 10rem;
			}
			& img {
				width: 100%;
				vertical-align: top;
			}
		}
	}
	.pcb-box {
		width: 100%;
		border: 1px solid #fff;
		padding: 8rem 8.4rem;
		box-sizing: border-box;
		margin-bottom: 28.4rem;
		@media screen and (max-width: 767px) {
			padding: 2.4rem;
			margin-bottom: 8rem;
		}
		.contents-flex {
			display: flex;
			justify-content: space-between;
			gap: 4rem;
			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 1.6rem;
			}
			.main-text {
				font-family: var(--noto);
				font-style: normal;
				font-weight: 700;
				font-size: 5rem;
				line-height: 140%;
				letter-spacing: 0.1em;
				color: #ffffff;
				width: 61.2rem;
				@media screen and (max-width: 767px) {
					width: 100%;
					font-size: 2.2rem;
					line-height: 160%;
				}
				.yellow {
					color: #ffe23d;
					display: contents;
				}
			}
			.description-text {
				width: 100%;
				flex: 1;
				font-family: var(--noto);
				font-style: normal;
				font-weight: 400;
				font-size: 1.8rem;
				line-height: 210%;
				letter-spacing: 0.1em;
				color: #ffffff;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 180%;
				}
			}
		}
	}
	.block {
		margin-bottom: 24.5rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 8rem;
		}
		.block-flex {
			width: 100%;
			display: flex;
			@media screen and (max-width: 767px) {
				flex-direction: column;
			}
			.pcb-title-container {
				width: 37%;
				position: relative;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.pcb-title {
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 4.6rem;
					line-height: 150%;
					letter-spacing: 0.1em;
					color: #ffffff;
					position: relative;
					transition: top 0.3s ease-out, bottom 0.3s ease-out, position 0.3s ease-out;

					@media screen and (max-width: 767px) {
						width: 100%;
						font-size: 2rem;
						margin-bottom: 3.2rem;
						width: 100%;
					}
					&:before {
						content: "";
						position: absolute;
						top: -0.9rem;
						left: 0;
						width: 3.7rem;
						height: 0.4rem;
						background-color: #ffe23d;
						@media screen and (max-width: 767px) {
							top: -0.6rem;
							height: 0.2rem;
							width: 3.2rem;
						}
					}

					/* Sticky state */
					&.is-sticky {
						position: fixed;
						top: 30rem;
						z-index: 10;
					}

					/* Bottom state */
					&.is-bottom {
						position: absolute;
						bottom: 0;
						top: auto;
					}
				}
			}
			.block-main-contents {
				width: 63%;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.block-main-text {
					font-family: var(--noto);
					font-style: normal;
					font-weight: 400;
					font-size: 2rem;
					line-height: 200%;
					letter-spacing: 0.1em;
					color: #ffffff;
					margin-bottom: 8rem;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						line-height: 160%;
						margin-bottom: 2.4rem;
					}
				}
				.bold-text {
					margin-bottom: 4rem;
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 2.2rem;
					line-height: 180%;
					letter-spacing: 0.1em;
					color: #ffffff;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						line-height: 150%;
						margin-bottom: 2.4rem;
					}
				}
				.flex-box {
					display: flex;
					gap: 3.3rem;
					@media screen and (max-width: 767px) {
						gap: 1.6rem;
						width: 47.6rem;
					}
					.box {
						width: 27rem;
						@media screen and (max-width: 767px) {
							width: 15rem;
						}
						.img-container {
							width: 100%;
							margin-bottom: 3rem;
							@media screen and (max-width: 767px) {
								margin-bottom: 1rem;
							}
							& img {
								width: 100%;
								vertical-align: top;
							}
						}
						.box-text {
							font-family: var(--noto);
							font-style: normal;
							font-weight: 400;
							font-size: 2rem;
							line-height: 180%;
							text-align: center;
							letter-spacing: 0.1em;
							color: #ffffff;
							@media screen and (max-width: 767px) {
								font-size: 1.2rem;
							}
						}
					}
				}
				.sp-slider {
					@media screen and (max-width: 767px) {
						overflow-x: auto;
					}
				}
				.steps {
					.step-box {
						border: #fff 1px solid;
						margin-bottom: 2.4rem;
						padding: 3rem 5rem;
						box-sizing: border-box;
						@media screen and (max-width: 767px) {
							padding: 1.4rem 1.6rem;
							margin-bottom: 1rem;
						}
						.flex {
							display: flex;
							align-items: center;
							gap: 4rem;
							@media screen and (max-width: 767px) {
								flex-direction: column;
								gap: 0.8rem;
							}
							.step-num {
								font-family: var(--inter);
								font-style: normal;
								font-weight: 400;
								font-size: 2.8rem;
								line-height: 100%;
								letter-spacing: 0.05em;
								color: #ffffff;
								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
								}
							}
							.step-description {
								font-family: var(--noto);
								font-style: normal;
								font-weight: 400;
								font-size: 2.4rem;
								line-height: 2.9rem;
								letter-spacing: 0.1em;
								color: #ffffff;
								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
									line-height: 1.6;
								}
							}
						}
					}
					.step-arrow {
						padding-left: 8.7rem;
						margin-bottom: 2.4rem;
						@media screen and (max-width: 767px) {
							padding-left: 0;
							margin: 0 auto 1rem;
							width: 3rem;
						}
						& img {
							width: 4.2rem;
							vertical-align: top;
							@media screen and (max-width: 767px) {
								width: 100%;
							}
						}
					}
				}
				.numbered-contents-container {
					width: 100%;
					border-top: #fff 1px solid;
					.flex-contents {
						padding: 6rem 0;
						box-sizing: border-box;
						display: flex;
						gap: 4rem;
						border-bottom: #fff 1px solid;
						margin-bottom: 8rem;
						@media screen and (max-width: 767px) {
							flex-direction: column;
							padding: 2.4rem 0 3.8rem;
							gap: 2.4rem;
							padding-right: 0.5rem;
							padding-left: 0.5rem;
						}
						.text-contents {
							width: 56rem;
							@media screen and (max-width: 767px) {
								width: 100%;
							}
							.num {
								margin-bottom: 0.8rem;
								font-family: var(--inter);
								font-style: normal;
								font-weight: 700;
								font-size: 3.2rem;
								line-height: 100%;
								color: #ffe23d;
								@media screen and (max-width: 767px) {
									font-size: 2.2rem;
									margin-bottom: 0.4rem;
								}
							}
							.title {
								font-family: var(--noto);
								font-style: normal;
								font-weight: 700;
								font-size: 2.8rem;
								line-height: 150%;
								letter-spacing: 0.1em;
								color: #ffffff;
								margin-bottom: 2.4rem;
								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
									margin-bottom: 1.2rem;
								}
							}
							.description {
								font-family: var(--noto);
								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.3rem;
									line-height: 150%;
								}
							}
						}
						.img-container {
							width: 27rem;
							@media screen and (max-width: 767px) {
								width: 100%;
								overflow: hidden;
								margin-top: 2.4rem;
							}
							& img {
								width: 100%;
								vertical-align: top;
								@media screen and (max-width: 767px) {
									object-fit: cover;
								}
							}
						}
					}
				}
				.contact-box {
					background-color: #fff;
					width: 100%;
					padding: 5rem 11.7rem;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					@media screen and (max-width: 767px) {
						padding: 2.4rem;
					}
					.blue-text {
						margin-bottom: 2rem;
						font-family: var(--noto);
						font-style: normal;
						font-weight: 700;
						font-size: 2rem;
						line-height: 180%;
						text-align: center;
						letter-spacing: 0.1em;
						color: #0f73ba;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
							margin-bottom: 1.6rem;
						}
					}
				}
				.feedback-container {
					border-top: 1px solid #fff;
					.feedback-flex {
						padding: 6rem 0;
						border-bottom: #fff 1px solid;
						display: flex;
						gap: 4rem;
						@media screen and (max-width: 767px) {
							padding: 2.4rem 0;
							gap: 2rem;
							flex-direction: column;
							align-items: center;
						}
						.img-container {
							width: 18rem;
							height: 18rem;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(255, 255, 255, 0.2);
							.icon1 {
								width: 8.4rem;
							}
							.icon2 {
								width: 11.2rem;
							}
							.icon3 {
								width: 7.9rem;
							}
						}
						.text-container {
							flex: 1;
							width: 100%;
							.title {
								margin-bottom: 4rem;
								font-family: var(--noto);
								font-style: normal;
								font-weight: 700;
								font-size: 2.8rem;
								line-height: 150%;
								letter-spacing: 0.1em;
								color: #ffffff;
								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
									margin-bottom: 1.6rem;
								}
							}
							.description {
								font-family: var(--noto);
								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;
								}
							}
						}
					}
				}
			}
		}
	}
	.block.process-block {
		padding-top: 24.5rem;
		@media screen and (max-width: 767px) {
			padding-top: 8rem;
		}
		.process {
			.box {
				margin-bottom: 2.4rem;
				border: 1px solid #fff;
				padding: 4rem;
				box-sizing: border-box;
				@media screen and (max-width: 767px) {
					padding: 2rem 1.6rem;
					margin-bottom: 1rem;
				}
				.title {
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 2.6rem;
					line-height: 150%;
					letter-spacing: 0.1em;
					color: #ffffff;
					margin-bottom: 2rem;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						text-align: center;
						margin-bottom: 1.2rem;
					}
				}
				& p {
					font-family: var(--noto);
					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.3rem;
						line-height: 150%;
					}
				}
			}
			.arrow {
				margin-bottom: 2.4rem;
				padding-left: 8.7rem;
				@media screen and (max-width: 767px) {
					margin: 0 auto 1rem;
					display: block;
					padding-left: unset;
					width: 3rem;
				}
				& img {
					width: 4.2rem;
					vertical-align: top;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
				}
			}
			.chart {
				width: 100%;
				margin-bottom: 2.4rem;
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
		}
	}
	.slider-section {
		background-color: #fff;
		z-index: 2;
		position: relative;
		width: 100%;
		.slide-container {
			background-color: #fff;
			z-index: 2;
			position: relative;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100vw;
			padding-top: 8rem;
			padding-bottom: 8rem;
			@media screen and (max-width: 767px) {
				padding-top: 2.4rem;
				padding-bottom: 2.4rem;
			}
			.slider-title {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 3.2rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 2.4rem;
				}
				&:before {
					content: "";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					width: 100%;
					height: 1px;
					background-color: #0f73ba;
				}
				.title {
					position: relative;
					z-index: 3;
					background-color: #fff;
					padding: 0 4.6rem 0 7rem;
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 4.6rem;
					line-height: 150%;
					text-align: center;
					letter-spacing: 0.1em;
					color: #00518b;
					position: relative;
					@media screen and (max-width: 767px) {
						font-size: 2rem;
						padding: 0 1.3rem 0 2rem;
					}
					&:before {
						content: "";
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 0.4rem;
						width: 0.6rem;
						height: 0.6rem;
						border-radius: 0.6rem;
						background-color: #0f73ba;
						@media screen and (max-width: 767px) {
							width: 0.4rem;
							height: 0.4rem;
							border-radius: 0.4rem;
						}
					}
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 0.4rem;
						width: 0.6rem;
						height: 0.6rem;
						border-radius: 0.6rem;
						background-color: #0f73ba;
						@media screen and (max-width: 767px) {
							width: 0.4rem;
							height: 0.4rem;
							border-radius: 0.4rem;
						}
					}
				}
			}
			.slide {
				overflow: hidden;
				/* help avoid reflow jank */
				position: relative;
				.slide-track {
					display: flex;
					gap: 4rem;
					flex-wrap: nowrap;
					width: max-content;
					animation: slide-loop 14s linear infinite;
					will-change: transform;
					backface-visibility: hidden;
					contain: content;
					transform: translateZ(0);
					@media screen and (max-width: 767px) {
						gap: 1.6rem;
					}
				}
				@media (hover: hover) and (pointer: fine) {
					&:hover {
						.slide-track {
							animation-play-state: paused;
						}
					}
				}
				.box {
					width: 27rem;
					flex: 0 0 auto;
					@media screen and (max-width: 767px) {
						width: 15rem;
					}
					.img-container {
						width: 100%;
						flex: 0 0 auto;
						img {
							width: 100%;
							display: block;
						}
					}
				}
			}
		}
	}
	.tab-box-container {
		border: 1px solid #fff;
		padding: 6rem;
		box-sizing: border-box;
		width: 100%;
		margin-bottom: 24.5rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 8rem;
			padding: 1.6rem;
		}
		.tab-flex-contents {
			display: flex;
			gap: 2.4rem;
			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 3.2rem;
			}
			.text-contents {
				width: 52rem;
				flex: 1;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.yellow-title {
					margin-bottom: 1.7rem;
					font-family: var(--noto);
					font-style: normal;
					font-weight: 700;
					font-size: 4.6rem;
					line-height: 150%;
					letter-spacing: 0.1em;
					color: #ffe23d;
					@media screen and (max-width: 767px) {
						font-size: 2rem;
						margin-bottom: 1.6rem;
						text-align: center;
					}
				}
				.description {
					margin-bottom: 3.2rem;
					font-family: var(--noto);
					font-style: normal;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 150%;
					letter-spacing: 0.1em;
					color: #ffffff;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						margin-bottom: 2.4rem;
					}
				}
			}
			.tab-box {
				width: 73.6rem;
				border: 1px solid #fff;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.tab-buttons {
					display: flex;
					.tab-button {
						width: 50%;
						height: 4.9rem;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: #fff solid 1px;
						position: relative;
						cursor: pointer;
						.text {
							font-family: var(--noto);
							font-style: normal;
							font-weight: 700;
							font-size: 2.2rem;
							line-height: 180%;
							text-align: center;
							letter-spacing: 0.1em;
							color: #ffffff;
							text-align: center;
							transition: all 0.3s ease-in;
							@media screen and (max-width: 767px) {
								font-size: 1.6rem;
							}
						}
					}
					.tab-button.active {
						border-bottom: none;
						background-color: rgb(255, 255, 255, 10%);
						&:after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 22rem;
							height: 0.6rem;
							background: url("../../img/page/pcb/tab-active.png") no-repeat center / 100% auto;
							@media screen and (max-width: 767px) {
								width: 8.8rem;
								background: url("../../img/page/pcb/tab-active-sp.png") no-repeat center / 100% auto;
							}
						}
					}
					.tab-button:first-child {
						border-right: #fff solid 1px;
					}
					.tab-button:hover {
						.text {
							opacity: 0.75;
						}
					}
				}
				.tab-contents {
					background-color: rgb(255, 255, 255, 10%);
					padding: 3.2rem 2rem 3.2rem;
					box-sizing: border-box;
					@media screen and (max-width: 767px) {
						padding: 1.6rem 1rem;
					}
					.tab-content {
						display: none;
						.flex-columns {
							display: flex;
							width: 100%;
							justify-content: space-between;
							@media screen and (max-width: 767px) {
								flex-direction: column;
								gap: 2.4rem;
							}
							.column {
								width: 48%;
								@media screen and (max-width: 767px) {
									width: 100%;
								}
								.title {
									font-family: var(--noto);
									font-style: normal;
									font-weight: 700;
									font-size: 2.2rem;
									line-height: 1;
									letter-spacing: 0.1em;
									color: #ffe23d;
									margin-bottom: 1.2rem;
									@media screen and (max-width: 767px) {
										font-size: 1.6rem;
									}
								}
								& ul {
									padding-left: 2.5rem;
									box-sizing: border-box;
									& li {
										font-style: normal;
										font-weight: 400;
										font-size: 1.8rem;
										line-height: 150%;
										letter-spacing: 0.1em;
										color: #ffffff;
										list-style: disc;
										@media screen and (max-width: 767px) {
											font-size: 1.3rem;
										}
										& span {
											font-weight: 700;
											line-height: 150%;
											@media screen and (max-width: 767px) {
												font-size: 1.4rem;
											}
										}
									}
								}
								& p {
									font-style: normal;
									font-weight: 400;
									font-size: 1.6rem;
									line-height: 150%;
									letter-spacing: 0.1em;
									color: #ffffff;
									margin-bottom: 1.2rem;
									@media screen and (max-width: 767px) {
										font-size: 1.4rem;
									}
									.bold {
										font-weight: 700;
										font-size: 2rem;
										line-height: 180%;
										letter-spacing: 0.1em;
										color: #ffffff;
										display: block;
										@media screen and (max-width: 767px) {
											font-size: 1.6rem;
										}
									}
								}
							}
						}
					}
					.tab-content.active {
						display: block;
					}
				}
			}
		}
	}
	.faq-box {
		width: 100%;
		background-color: rgb(255, 255, 255, 20%);
		padding: 4rem;
		margin-bottom: 2.4rem;
		@media screen and (max-width: 767px) {
			padding: 1.6rem;
			/* margin-bottom: 2.4rem; */
		}
		.question-flex {
			margin-bottom: 2rem;
			gap: 1.7rem;
			display: flex;
			align-items: center;
			@media screen and (max-width: 767px) {
				gap: 1.2rem;
				margin-bottom: 1.2rem;
				align-items: flex-start;
			}
			.q {
				width: 2.8rem;
				height: 2.8rem;
				border-radius: 2.8rem;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: var(--inter);
				font-style: normal;
				font-weight: 700;
				font-size: 1.6rem;
				line-height: 1;
				letter-spacing: 0.05em;
				color: #0f73ba;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					margin-top: 0.6rem;
					width: 2.6rem;
					height: 2.6rem;
					border-radius: 2.6rem;
				}
			}
			.question {
				font-style: normal;
				font-weight: 700;
				font-size: 1.8rem;
				line-height: 156%;
				letter-spacing: 0.05em;
				color: #ffffff;
				flex: 1;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 150%;
				}
			}
		}
		.answer-flex {
			display: flex;
			gap: 1.7rem;
			@media screen and (max-width: 767px) {
				gap: 1.2rem;
			}
			.a {
				border: 1px solid #fff;
				font-family: var(--inter);
				font-style: normal;
				font-weight: 700;
				font-size: 1.6rem;
				line-height: 1;
				letter-spacing: 0.05em;
				color: #ffffff;
				width: 2.8rem;
				height: 2.8rem;
				border-radius: 2.8rem;
				display: flex;
				justify-content: center;
				align-items: center;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					margin-top: 0.6rem;
					width: 2.6rem;
					height: 2.6rem;
					border-radius: 2.6rem;
				}
			}
			.answer {
				flex: 1;
				font-style: normal;
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 188%;
				letter-spacing: 0.05em;
				color: #ffffff;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 150%;
				}
			}
		}
	}
}

@keyframes slide-loop {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.slider-section .slide-container .slide .slide-track {
		animation: none !important;
	}
}

/* Pure-CSS image marquee (no JS) */
.slider-section .slide-container .slide-image-marquee {
	height: 12.6rem;
	width: 100vw;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 767px) {
		/* height: 11.8rem; */
		height: 9rem;

	}
}
.slider-section .slide-container .slide-image-marquee .marquee-track {
	display: flex;
	width: max-content;
	gap: 4rem;
	height: 100%;
	animation: marquee-x 30s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.slider-section .slide-container .slide-image-marquee img {
	height: 12.6rem;
	width: auto;
	display: block;
	flex: 0 0 auto;
	@media screen and (max-width: 767px) {
		/* height: 11.8rem; */
		height: 9rem;

	}
}

@keyframes marquee-x {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}