/* loading */
.mid-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 9999;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: all 0.6s;

	.bar {
		position: absolute;
		top: 0;
		left: 0;
		width: 0%;
		height: 6px;
		background-color: #CB0300;
		transition: width 0.1s;
		transition-timing-function: cubic-bezier(0.95, 0, 0.05, 1);
	}

	.loading-inner {
		width: 280px;
		aspect-ratio: 280/66;

		@media screen and (max-width: 520px) {
			width: 196px;
		}

		img {
			width: 100%;
			object-fit: contain;
		}
	}
}



/* header */
.mid-header {
	a {
		&:hover {
			opacity: 1;
		}
	}

	position: fixed;
	top:74px;
	width: 100%;
	z-index: 999;

	@media screen and (max-width: 1030px) {
		top: 70px;
	}

	.mid-header__container {
		max-width: 1200px;
		height: 64px;
		margin: 0 auto;
		display: block;
		box-shadow: 0px 8px 20px rgba(118, 119, 118, 0.35);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 20px;
		padding-right: 8px;
		box-sizing: border-box;
		background-color: white;

		@media screen and (max-width: 1030px) {
			height: 48px;
			padding-left: 15px;
			padding-right: 15px;
		}

		.logo {
			width: 135px;
			height: 24px;
			margin-right: auto;

			@media screen and (max-width: 1030px) {
				width: 113px;
				height: 20px;
			}

			img {
				width: 100%;
				object-fit: contain;
			}
		}

		nav {
			margin-right: 32px;

			@media screen and (max-width: 1030px) {
				display: none;
			}
		}

		.mid-header__nav {
			display: flex;
			flex-direction: row;
			gap: 16px;

			.item {
				font-size: 16px;
				font-family: "Noto Sans JP", sans-serif;
				font-weight: bold;
				color: #261F19;
				letter-spacing: 0.01em;
				cursor: pointer;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -21px;
					left: 50%;
					transform: translateX(-50%);
					width: 100%;
					height: 6px;
					background-color: #CB0300;
					border-top-left-radius: 6px;
					border-top-right-radius: 6px;
					width: 0;
					transition: all 0.2s;
				}

				.mega {
					position: absolute;
					width: 756px;
					top: 22px;
					left: 50%;
					transform: translateX(-50%);
					padding-top: 41px;
					opacity: 0;
					pointer-events: none;
					transition: all 0.2s;

					.mega-container {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 8px;
						flex-wrap: wrap;
						box-shadow: 0px 8px 20px rgba(118, 119, 118, 0.35);
						background-color: white;
						padding: 10px;
						box-sizing: border-box;

						.mega-item {
							width: 240px;
							height: 70px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							box-sizing: border-box;
							padding-top: 12px;
							padding-bottom: 16px;
							padding-left: 10px;
							padding-right: 10px;
							border-bottom: 3px solid #1C0000;
							cursor: pointer;
							transition: all 0.2s;

							.mega-text {
								font-size: 16px;
								font-family: "Noto Sans JP", sans-serif;
								font-weight: bold;
								color: #1C0000;
								letter-spacing: 0.01em;
								line-height: 1;
								transition: all 0.2s;
							}

							.mega-arrow {
								font-size: 16px;
								width: 32px;
								height: 32px;
								border-radius: 50%;
								background-color: #1C0000;
								color: white;
								display: flex;
								align-items: center;
								justify-content: center;
								transition: all 0.2s;
							}

							@media screen and (min-width: 520px) {
								&:hover {
									border-bottom: 3px solid #CB0300;

									.mega-text {
										color: #CB0300;
									}

									.mega-arrow {
										background-color: #CB0300;
										color: white;
									}
								}
							}
						}
					}
				}

				&:hover {
					opacity: 1;
				}

				@media screen and (min-width: 520px) {
					&:hover {
						color: #CB0300;

						.mega {
							opacity: 1;
							pointer-events: auto;
						}

						&::after {
							width: 100%;
						}
					}
				}

				.mega-company {
					@media screen and (max-width: 1140px) {
						left: 120%;
					}
				}

				.mega-employee {
					/* left:-460px; */
				}

				.mega-environment {
					/* left:-690px; */
				}
			}
		}

		.btns {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 10px;

			@media screen and (max-width: 1030px) {
				gap: 4px;
			}

			.btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 150px;
				height: 48px;
				padding-right: 12px;
				padding-left: 12px;
				box-sizing: border-box;
				background-color: #CB0300;
				color: white;
				position: relative;
				box-sizing: border-box;
				border: 1px solid #CB0300;
				transition: all 0.2s;

				@media screen and (max-width: 1030px) {
					width: 89px;
					height: 23px;
					justify-content: center;
				}

				.text {
					font-size: 14px;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: bold;
					color: white;
					transition: all 0.2s;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 100%;

					@media screen and (max-width: 1030px) {
						font-size: 12px;
						justify-content: center;
					}
				}

				.arrow {
					font-size: 16px;
					transition: all 0.2s;

					@media screen and (max-width: 1030px) {
						display: none;
					}
				}

				.mega {
					position: absolute;
					width: 756px;
					top: 47px;
					right: 0;
					padding-top: 28px;
					opacity: 0;
					pointer-events: none;
					transition: all 0.2s;

					@media screen and (max-width: 1030px) {
						display: none;
					}

					.mega-container {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 8px;
						flex-wrap: wrap;
						box-shadow: 0px 8px 20px rgba(118, 119, 118, 0.35);
						background-color: white;
						padding: 10px;
						box-sizing: border-box;

						.mega-item {
							width: 240px;
							height: 70px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							box-sizing: border-box;
							padding-top: 12px;
							padding-bottom: 16px;
							padding-left: 10px;
							padding-right: 10px;
							border-bottom: 3px solid #1C0000;
							cursor: pointer;
							transition: all 0.2s;

							.mega-text {
								font-size: 16px;
								font-family: "Noto Sans JP", sans-serif;
								font-weight: bold;
								color: #1C0000;
								letter-spacing: 0.01em;
								line-height: 1;
								transition: all 0.2s;
							}

							.mega-arrow {
								font-size: 16px;
								width: 32px;
								height: 32px;
								border-radius: 50%;
								background-color: #1C0000;
								color: white;
								display: flex;
								align-items: center;
								justify-content: center;
								transition: all 0.2s;
							}

							&:hover {
								border-bottom: 3px solid #CB0300;

								.mega-text {
									color: #CB0300;
								}

								.mega-arrow {
									background-color: #CB0300;
									color: white;
								}
							}
						}
					}
				}

				&:hover {
					opacity: 1;
					background-color: white;
					color: #CB0300;

					.text {
						color: #CB0300;
					}

					.arrow {
						color: #CB0300;
					}

					.mega {
						opacity: 1;
						pointer-events: auto;
					}
				}
			}
		}

		.mid-sp-ham {
			width: 32px;
			height: 32px;
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 4px;
			cursor: pointer;
			transition: all 0.2s;
			border: 1px solid #1C0000;
			border-radius: 50%;
			box-sizing: border-box;
			padding: 4px;
			margin-left: 8px;

			.line {
				width: 12px;
				height: 1px;
				background-color: #1C0000;
				transition: all 0.2s;
			}

			@media screen and (max-width: 1030px) {
				display: flex;
			}

			&.active {
				.line {
					position: absolute;
				}

				.line:nth-child(1) {
					transform: rotate(30deg);
				}

				.line:nth-child(2) {
					transform: rotate(-30deg);
				}
			}
		}
	}
}

.mid-mega-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 900;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s;

	&.active {
		opacity: 1;
		pointer-events: auto;
	}
}

.mid-sp-hamburger {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/ham-back.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 900;
	box-sizing: border-box;
	padding-top: 166px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.6s;

	.ham-anim-mask {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
		opacity: 1;
		transform: translateY(0%);
		transition: all 0.8s;
		transition-delay: 0.3s;
		transition-timing-function: ease-in-out;
	}

	&.open {
		opacity: 1;
		pointer-events: auto;

		.ham-anim-mask {
			transform: translateY(100%);
		}
	}

	.mid-sp-ham-container {
		width: 100%;
		padding-left: 23px;
		padding-right: 23px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 24px;

		.item {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2px solid #020012;
			padding-bottom: 10px;
			box-sizing: border-box;

			&::before {
				content: '';
				width: 8px;
				height: 14px;
				background-color: #CB0300;
				margin-right: 8px;
				align-self: flex-start;
			}

			.textbox {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 4px;
				margin-right: auto;
				line-height: 1;

				.title {
					font-size: 16px;
					font-family: "Inter", sans-serif;
					font-weight: 900;
					color: #222222;
				}

				.text {
					font-size: 14px;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: bold;
					color: #222222;
					letter-spacing: 0.01em;
					line-height: 1;
				}
			}

			.arrow {
				width: 24px;
				height: 24px;
				background-color: #020012;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				font-size: 12px;
			}

			&:hover {
				opacity: 1;
			}
		}

		.item-has-child {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 2px;

			.item-main {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #020012;
				padding-bottom: 10px;
				box-sizing: border-box;
				margin-bottom: 12px;

				&::before {
					content: '';
					width: 8px;
					height: 14px;
					background-color: #CB0300;
					margin-right: 8px;
					align-self: flex-start;
				}

				.textbox {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					gap: 4px;
					margin-right: auto;
					line-height: 1;

					.title {
						font-size: 16px;
						font-family: "Inter", sans-serif;
						font-weight: 900;
						color: #222222;
					}

					.text {
						font-size: 14px;
						font-family: "Noto Sans JP", sans-serif;
						font-weight: bold;
						color: #222222;
						letter-spacing: 0.01em;
						line-height: 1;
					}
				}
			}

			.item-sm {
				width: 100%;
				height: 24px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 13px;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: bold;
					color: #020012;
					letter-spacing: 0.01em;
					line-height: 1;
				}

				.arrow {
					color: #020012;
					font-size: 12px;
					padding-right: 6px;
				}
			}
		}
	}
}




.mid-float-banner {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 240px;
	aspect-ratio: 240/116;
	z-index: 1000;
	transition: all 0.3s;
	opacity: 1;
	pointer-events: auto;

	@media screen and (max-width: 520px) {
		bottom: 0px;
		right: 0px;
		aspect-ratio: 200/64;
	}

	.inner {
		transition: transform 0.3s;
		display: block;

		@media screen and (min-width: 520px) {
			&:hover {
				opacity: 1;
				transform: scale(1.05);
			}
		}

		img {
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
		}
	}

	.close {
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		width: 24px;
		aspect-ratio: 1/1;
		transform: translateY(-50%) translateX(50%);

		@media screen and (max-width: 520px) {
			display: none;
		}
	}

	img {
		width: 100%;
		object-fit: contain;
	}
}




.mid-banner {
	width: 100%;
	margin-bottom: 60px;
	background: white;

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

	[data-comanim] {
		overflow: hidden;
		opacity: 0;

		.mask {
			transform: translateY(100%);
			transition: transform 1.2s cubic-bezier(0.250, 0.82, 0.355, 1);
		}
	}

	.container {
		max-width: 1200px;
		height: 471px;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-image: url(../img/mid-banner-back.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding-left: 40px;
		padding-right: 40px;
		box-sizing: border-box;

		@media screen and (max-width: 920px) {
			flex-direction: column;
			height: auto;
			padding-top: 40px;
			padding-bottom: 40px;
			gap: 24px;
		}

		@media screen and (max-width: 520px) {
			padding-left: 16px;
			padding-right: 16px;
			background-image: url(../img/mid-banner-back-sp.webp);
		}

		.textbox {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;

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

			.en-title {
				font-size: 32px;
				font-weight: 900;
				font-family: "Inter", sans-serif;
				color: black;
				line-height: 38px;
				letter-spacing: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 10px;

				&::before {
					content: '';
					width: 10px;
					height: 25px;
					background: linear-gradient(116.14deg, #CB0000 33.54%, #FF0000 73.16%);
				}

				@media screen and (max-width: 520px) {
					font-size: 20px;
					line-height: 1;
					gap: 8px;

					&::before {
						width: 6px;
						height: 20px;
					}
				}
			}

			.ja-title {
				font-size: 64px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -4.2px;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					font-size: 28px !important;
					letter-spacing: 0px;
					margin-top: 12px;
				}
			}

			.middle-text {
				font-size: 32px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #222222;
				letter-spacing: -1px;
				line-height: 1.2 !important;
				margin-top: 40px;
				margin-bottom: 40px;

				@media screen and (max-width: 520px) {
					margin-top: 24px;
					margin-bottom: 24px;
				}
			}

			.banner-btns {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				gap: 8px;

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

			.banner-btn {
				width: 321px;
				height: 63px;
				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #100101;
				border-radius: 2.6px;
				box-sizing: border-box;
				padding-left: 12px;
				padding-right: 20px;

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

				&:hover {
					opacity: 1;
				}

				.more-text {
					font-size: 20px;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: white;
					letter-spacing: 0;
					line-height: 1;
					flex: 1;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 20px;
					overflow: hidden;
					position: relative;

					@media screen and (max-width: 769px) {
						font-size: 16px;
						height: 16px;
					}

					.inner {
						position: absolute;
						top: 0;
						transition: transform 0.3s;
					}
				}

				.arrow {
					font-size: 25px;
					color: white;
					width: 25px;
					overflow: hidden;

					@media screen and (max-width: 769px) {
						font-size: 20px;
						width: 20px;
						margin-left: 63px;
					}

					.inner {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						transition: transform 0.3s;
					}
				}

				@media screen and (min-width: 520px) {
					&:hover {
						opacity: 1;

						.more-text {
							.inner {
								transform: translateY(-50%);
							}
						}

						.arrow {
							.inner {
								transform: translateX(100%);
							}
						}
					}
				}
			}
		}

		.img-box {
			position: relative;
			width: 518px;
			height: 100%;

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

			.img-box-container {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: absolute;
				gap: 12px;

				@media screen and (max-width: 920px) {
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					gap: 8px;
				}

				.slide-box {
					width: 253px;
					height: 100%;
					overflow: hidden;

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

					.swiper {
						height: 100%;
					}

					.swiper-wrapper {
						transition-timing-function: linear;
					}

					.swiper-slide {
						width: 253px;
						height: 1384px;

						@media screen and (max-width: 920px) {
							width: 876.7px;
							height: 160px;
						}

						&.long-slide {
							height: 1733px;

							@media screen and (max-width: 920px) {
								height: 160px;
								width: 1097.82px;
							}
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
				}
			}
		}
	}
}





.mid-footer {
	width: 100%;
	padding-top: 60px;
	padding-bottom: 80px;
	background-color: #F6F6F6;

	@media screen and (max-width: 520px) {
		padding: 60px 0px;
	}

	.container {
		box-sizing: border-box;
		width: calc(100% - 120px);
		max-width: 1240px;
		margin: 0 auto;

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

		@media screen and (max-width: 520px) {
			width: 100%;
			padding-right: 16px;
			padding-left: 16px;
		}

		.logo {
			width: 307px;
			display: block;

			@media screen and (max-width: 520px) {
				max-width: 292px;
			}

			img {
				width: 100%;
				object-fit: contain;
			}
		}

		nav {
			margin-top: 40px;

			ul {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 64px;
				flex-wrap: wrap;

				@media screen and (max-width: 520px) {
					gap: 24px;
					flex-direction: column;
				}

				.item {
					.item-inner {
						padding-left: 18px;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-self: flex-start;
						position: relative;

						@media screen and (max-width: 520px) {
							padding-left: 16px;
						}

						&::before {
							content: '';
							width: 10px;
							height: 22px;
							position: absolute;
							top: 0;
							left: 0;
							background-color: #CB0300;

							@media screen and (max-width: 520px) {
								width: 8px;
								height: 14px;
							}
						}

						.en {
							font-size: 18px;
							font-family: "Inter", sans-serif;
							font-weight: 800;
							color: #222222;
							letter-spacing: 0;
							line-height: 1.3;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								font-size: 16px;
								line-height: 1;
							}
						}

						.ja {
							font-size: 16px;
							font-family: "Noto Sans JP", sans-serif;
							font-weight: bold;
							color: #222222;
							letter-spacing: 10%;
							line-height: 1;
							margin-top: 8px;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								font-size: 14px;
								line-height: 1;
							}
						}

						&:hover {
							opacity: 1;
						}

						@media screen and (min-width: 520px) {
							&:hover {
								.en {
									color: #CB0300;
								}

								.ja {
									color: #CB0300;
								}
							}
						}
					}

					.item-has-child {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						position: relative;
						padding-left: 18px;

						@media screen and (max-width: 520px) {
							padding-left: 16px;
						}

						&::before {
							content: '';
							width: 10px;
							height: 22px;
							position: absolute;
							top: 0;
							left: 0;
							background-color: #CB0300;

							@media screen and (max-width: 520px) {
								width: 8px;
								height: 14px;
							}
						}

						.en {
							font-size: 18px;
							font-family: "Inter", sans-serif;
							font-weight: 800;
							color: #222222;
							letter-spacing: 0;
							line-height: 1.3;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								font-size: 16px;
								line-height: 1;
							}
						}

						.ja {
							font-size: 16px;
							font-family: "Noto Sans JP", sans-serif;
							font-weight: bold;
							color: #222222;
							letter-spacing: 10%;
							line-height: 1;
							margin-top: 8px;
							margin-bottom: 12px;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								font-size: 14px;
								line-height: 1;
							}
						}

						.sm-link {
							font-size: 13px;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #222222;
							letter-spacing: 10%;
							line-height: 1.4;
							transition: all 0.3s;
							margin-bottom: 4px;

							@media screen and (max-width: 520px) {
								font-size: 12px;
								line-height: 1;
								margin-bottom: 8px;
							}

							&:hover {
								opacity: 1;
							}

							@media screen and (min-width: 520px) {
								&:hover {
									color: #CB0300;
								}
							}
						}
					}
				}
			}
		}
	}
}








.mid-page {
	background-color: white;
	background: white;

	* {
		&:hover {
			opacity: 1;
		}

		font-feature-settings: 'palt';
	}

	img {
		width: 100%;

		object-fit: contain;
	}

	[data-comanim] {
		overflow: hidden;
		opacity: 0;

		.mask {
			transform: translateY(100%);
			transition: transform 1.2s cubic-bezier(0.250, 0.82, 0.355, 1);
		}
	}
}





/* top page */
.mid-top {
	padding-top: 162px;

	@media screen and (max-width: 769px) {
		padding-top: 130px;
	}

	.mv {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 26px;
		padding-left: 30px;
		padding-right: 30px;
		position: relative;

		@media screen and (max-width: 769px) {
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}

		.video {
			width: 100%;
			aspect-ratio: 1220/646;

			@media screen and (max-width: 769px) {
				aspect-ratio: 355/580;
				border-radius: 12px;
				overflow: hidden;
			}

			.pc-video {
				width: 100%;
				height: 100%;
				object-fit: cover;

				@media screen and (max-width: 769px) {
					display: none;
				}

			}

			.sp-video {
				width: 100%;
				/* height: 100%; */
				object-fit: cover;
				display: none;
				aspect-ratio: unset;

				@media screen and (max-width: 769px) {
					display: block;
				}
			}
		}

		.catch-box {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 32px);

			@media screen and (max-width: 520px) {
				align-items: flex-start;
			}

			.catch {
				aspect-ratio: 626/226;
				position: sticky;
				bottom: 0px;
				padding-bottom: 37px;
				box-sizing: content-box;
				display: block;
				width: calc(100% * calc(626 / 1280));

				@media screen and (max-width: 769px) {
					width: 100%;
					padding-left: 20px;
					padding-right: 16px;
					padding-bottom: 88px;
				}

				@media screen and (max-width: 520px) {
					top: 0;
					bottom: unset;
					padding-top: 20px;
				}

				img {
					width: 100%;
					/* height: 100%; */
					object-fit: contain;
				}
			}
		}
	}

	.c-title {
		font-size: 32px;
		font-weight: 900;
		font-family: "Inter", sans-serif;
		color: black;
		line-height: 38px;
		letter-spacing: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;

		&::before {
			content: '';
			width: 10px;
			height: 25px;
			background: linear-gradient(116.14deg, #CB0000 33.54%, #FF0000 73.16%);
		}

		@media screen and (max-width: 520px) {
			font-size: 20px;
			line-height: 1;
			gap: 8px;

			&::before {
				width: 6px;
				height: 20px;
			}
		}
	}

	.more-black {
		width: 321px;
		height: 63px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #100101;
		border-radius: 2.6px;
		box-sizing: border-box;
		padding-left: 12px;
		padding-right: 20px;

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

		.more-text {
			font-size: 20px;
			font-weight: 900;
			font-family: "Inter", sans-serif;
			color: white;
			letter-spacing: 0;
			line-height: 1;
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 20px;
			overflow: hidden;
			position: relative;

			@media screen and (max-width: 769px) {
				font-size: 16px;
				height: 16px;
			}

			.inner {
				position: absolute;
				top: 0;
				transition: transform 0.3s;
			}
		}

		.arrow {
			font-size: 25px;
			color: white;
			width: 25px;
			overflow: hidden;

			@media screen and (max-width: 769px) {
				font-size: 20px;
				width: 20px;
				margin-left: 63px;
			}

			.inner {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				transition: transform 0.3s;
			}
		}

		@media screen and (min-width: 520px) {
			&:hover {
				opacity: 1;

				.more-text {
					.inner {
						transform: translateY(-50%);
					}
				}

				.arrow {
					.inner {
						transform: translateX(100%);
					}
				}
			}
		}
	}

	.message {
		width: 100%;

		.container {
			max-width: 1280px;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: center;
			margin: 0 auto;
			gap: 10px;

			@media screen and (max-width: 920px) {
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				gap: 40px;
			}

			.text-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				height: 100%;
				padding-top: 100px;
				padding-bottom: 100px;
				padding-left: 40px;

				@media screen and (max-width: 920px) {
					padding-left: 16px;
					padding-right: 16px;
					padding-bottom: 0;
					padding-top: 30px;
				}

				.catch {
					margin-top: 32px;
					aspect-ratio: 509/91;
					max-width: 509px;

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

				.text {
					margin-top: 40px;
					font-size: 20px !important;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: bold;
					color: #222222;
					letter-spacing: 0.01em;
					line-height: 1.8 !important;

					@media screen and (max-width: 520px) {
						margin-top: 24px;
						font-size: 16px !important;
						line-height: 1.4 !important;
					}
				}

				.lg-text {
					max-width: 636px;
					aspect-ratio: 636/225;
					margin-top: 40px;

					@media screen and (max-width: 520px) {
						max-width: calc(100% - 35px);
						aspect-ratio: 307/217;
						margin-top: 24px;
					}

					img {
						object-fit: contain;
						width: 100%;
					}
				}
			}

			.img-box {
				position: relative;
				width: 518px;

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

				.img-box-container {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					position: absolute;
					gap: 12px;

					@media screen and (max-width: 920px) {
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 8px;
					}

					.slide-box {
						width: 253px;
						height: 100%;
						overflow: hidden;

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

						.swiper {
							height: 100%;
						}

						.swiper-wrapper {
							transition-timing-function: linear;
						}

						.swiper-slide {
							width: 253px;
							height: 1384px;

							@media screen and (max-width: 920px) {
								width: 876.7px;
								height: 160px;
							}

							&.long-slide {
								height: 1733px;

								@media screen and (max-width: 920px) {
									height: 160px;
									width: 1097.82px;
								}
							}

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
							}
						}
					}
				}
			}
		}
	}

	.company {
		width: 100%;
		background-color: #F2F2F2;
		padding-top: 100px;
		padding-bottom: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		.container {
			max-width: 1280px;
			padding-left: 40px;
			padding-right: 40px;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			margin: 0 auto;

			@media screen and (max-width: 769px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.catch {
				margin-top: 16px;
				font-size: 64px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -4.2px;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					font-size: 28px !important;
					letter-spacing: 0px;
					margin-top: 12px;
				}

				.color-text {
					color: #CB0300;
				}
			}

			.text-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				gap: 48px;
				margin-top: 40px;

				@media screen and (max-width: 920px) {
					flex-direction: column;
					align-items: flex-start;
				}

				@media screen and (max-width: 769px) {
					margin-top: 24px;
					gap: 25px;
				}

				.lg-text {
					font-size: 42px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1 !important;
					text-decoration: underline;
					text-underline-offset: 6px;
					text-decoration-thickness: 4px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

					.inner {
						display: block;
						padding-bottom: 10px;
					}

					@media screen and (max-width: 769px) {
						font-size: 24px !important;
						text-underline-offset: 4px;
						text-decoration-thickness: 3px;
					}
				}

				.text {
					font-size: 18px !important;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: bold;
					color: black;
					letter-spacing: 0.01em;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 16px !important;
					}
				}
			}

			.more-black {
				margin-top: 24px;
				margin-left: auto;
				margin-right: 0;

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

			.img-box {
				margin-top: 20px;

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

			.sub-title {
				font-size: 48px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				line-height: 1 !important;
				letter-spacing: 0;
				text-align: center;
				margin: 0 auto;
				margin-top: 72px;

				@media screen and (max-width: 769px) {
					font-size: 28px !important;
					margin-top: 24px;
					line-height: 1.1 !important;
					font-feature-settings: "palt";
				}

				br {
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}
				}
			}

			.cate-box {
				margin-top: 32px;
				background-image: url(../img/company-cate-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				gap: 12px;
				border: 3px solid #CB0300;
				box-sizing: border-box;
				border-radius: 20px;
				padding: 40px;

				@media screen and (max-width: 769px) {
					margin-top: 16px;
					padding: 20px;
					border: 2px solid #CB0300;
				}

				.item {
					width: calc(calc(100% - 12px) / 2);
					height: 100px;
					background-color: #100101;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right: 24px;

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

					@media screen and (max-width: 520px) {
						height: 60px;
					}

					.text {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 0;
						line-height: 1 !important;
						text-align: center;
						flex: 1;
						font-feature-settings: "palt";
						height: 29px;
						overflow: hidden;
						position: relative;

						@media screen and (max-width: 1200px) {
							font-size: 18px !important;
							height: 19px;
						}

						@media screen and (max-width: 520px) {
							height: auto;
							line-height: 1.2 !important;
						}

						.inner {
							transition: 0.3s;
							display: block;
							line-height: 1.05 !important;

							.inner-back-text {
								@media screen and (max-width: 520px) {
									display: none;
								}
							}

							.sp-use {
								display: none;

								@media screen and (max-width: 520px) {
									display: block;
								}
							}
						}
					}

					.angle {
						width: 36px;
						height: 36px;
						border-radius: 50%;
						background-color: #CB0300;
						color: white;
						font-size: 16px !important;
						line-height: 1 !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						vertical-align: top;

						@media screen and (max-width: 520px) {
							width: 32px;
							height: 32px;
						}

						.inner {
							width: 14px;
							overflow: hidden;

							.inner-box {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								padding-bottom: 2px;
								transition: 0.3s;
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 1;

							.text {
								.inner {
									transform: translateY(-50%);
								}
							}

							.angle {
								.inner {
									.inner-box {
										transform: translateX(100%);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.job {
		width: 100%;
		padding-top: 100px;
		padding-bottom: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		.more-red {
			width: 321px;
			height: 63px;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #CB0300;
			border-radius: 2.6px;
			box-sizing: border-box;
			padding-left: 12px;
			padding-right: 20px;

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

			.more-text {
				font-size: 20px;
				font-weight: 900;
				font-family: "Inter", sans-serif;
				color: white;
				letter-spacing: 0;
				line-height: 1;
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 20px;
				overflow: hidden;
				position: relative;

				@media screen and (max-width: 769px) {
					font-size: 16px;
					height: 16px;
				}

				.inner {
					position: absolute;
					top: 0;
					transition: transform 0.3s;
				}
			}

			.arrow {
				font-size: 25px;
				color: white;
				width: 25px;
				overflow: hidden;

				@media screen and (max-width: 769px) {
					font-size: 20px;
					width: 20px;
					margin-left: 63px;
				}

				.inner {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					transition: transform 0.3s;
				}
			}

			@media screen and (min-width: 520px) {
				&:hover {
					opacity: 1;

					.more-text {
						.inner {
							transform: translateY(-50%);
						}
					}

					.arrow {
						.inner {
							transform: translateX(100%);
						}
					}
				}
			}
		}

		.container {
			max-width: 1280px;
			width: 100%;
			margin: 0 auto;
			padding-left: 40px;
			padding-right: 40px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;

			@media screen and (max-width: 769px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.catch {
				font-size: 64px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -4.2px;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					font-size: 28px !important;
					letter-spacing: 0px;
					margin-top: 12px;
				}
			}

			.above {
				margin-top: 40px;
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: center;
				gap: 24px;
				width: 100%;
				min-height: 421px;

				@media screen and (max-width: 920px) {
					flex-direction: column;
				}

				@media screen and (max-width: 769px) {
					margin-top: 24px;
					gap: 8px;
				}

				.imgbox {
					flex: 1;

					img {
						object-fit: cover;
						object-position: center;
					}
				}

				.textbox {
					border-top: 6px solid #100101;
					width: 588px;
					padding-top: 24px;
					position: relative;

					@media screen and (max-width: 1100px) {
						width: 488px;
					}

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

					@media screen and (max-width: 769px) {
						padding-top: 10px;
					}

					.text-top {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: space-between;
						width: 100%;
						padding-left: 10px;
						padding-right: 10px;
						box-sizing: border-box;

						@media screen and (max-width: 769px) {
							flex-direction: column;
							gap: 4px;
						}

						.en {
							font-size: 20px !important;
							font-weight: 900;
							font-family: "Inter", sans-serif;
							color: #100101;
							letter-spacing: 0;
							line-height: 1 !important;

							@media screen and (max-width: 769px) {
								font-size: 16px !important;
								line-height: calc(24 / 16) !important;
							}
						}

						.ja {
							font-size: 56px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: -1px;
							line-height: 1 !important;

							@media screen and (max-width: 769px) {
								font-size: 28px !important;
								line-height: 1.1 !important;
							}
						}
					}

					.text-middle-above {
						font-size: 32px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 2%;
						line-height: 1 !important;
						margin-top: 32px;
						font-feature-settings: "palt";

						@media screen and (max-width: 769px) {
							margin-top: 30px;
							font-size: 24px !important;
						}
					}

					.text-middle-below {
						font-size: 18px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 10%;
						line-height: 1.2 !important;
						margin-top: 24px;
						font-feature-settings: "palt";

						@media screen and (max-width: 769px) {
							margin-top: 20px;
							font-size: 16px !important;
							line-height: 1.3 !important;
							letter-spacing: 5%;
						}
					}

					.more-red {
						position: absolute;
						bottom: 0;
						right: 0;

						@media screen and (max-width: 920px) {
							position: relative;
							bottom: unset;
							right: unset;
							margin-top: 20px;
							margin-left: auto;
						}

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

			.middle {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				width: 100%;
				margin-top: 48px;
				border-top: 6px solid #100101;
				padding-top: 24px;
				padding-left: 10px;
				padding-right: 10px;
				box-sizing: border-box;

				@media screen and (max-width: 769px) {
					margin-top: 40px;
					flex-direction: column;
					gap: 4px;
					padding-top: 10px;
				}

				.en {
					font-size: 20px !important;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: #100101;
					letter-spacing: 0;
					line-height: 1 !important;

					@media screen and (max-width: 769px) {
						font-size: 16px !important;
						line-height: calc(24 / 16) !important;
					}
				}

				.ja {
					font-size: 56px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1 !important;

					@media screen and (max-width: 769px) {
						font-size: 28px !important;
						line-height: 1.1 !important;
					}
				}
			}

			.below-lg-text {
				font-size: 32px !important;
				font-weight: bold;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: 2%;
				line-height: 1 !important;
				margin-top: 32px;
				font-feature-settings: "palt";

				@media screen and (max-width: 769px) {
					margin-top: 30px;
					font-size: 24px !important;
				}
			}

			.below-sm-text {
				font-size: 18px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: 10%;
				line-height: 1.2 !important;
				margin-top: 24px;
				font-feature-settings: "palt";

				@media screen and (max-width: 769px) {
					margin-top: 20px;
					font-size: 16px !important;
					line-height: 1.3 !important;
					letter-spacing: 5%;
				}
			}

			.cate-box {
				margin-top: 40px;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;
				gap: 8px 16px;
				position: relative;

				@media screen and (max-width: 769px) {
					margin-top: 24px;
					gap: 10px;
				}

				.item {
					width: calc(calc(100% - 32px) / 3);
					border-top: 4px solid #100101;
					box-sizing: border-box;
					padding-top: 23px;
					padding-bottom: 23px;
					padding-left: 10px;
					padding-right: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					transition: all 0.3s;

					@media screen and (max-width: 920px) {
						width: calc(calc(100% - 16px) / 2);
					}

					@media screen and (max-width: 769px) {
						width: calc(calc(100% - 10px) / 2);
						padding-top: 0;
						padding-left: 4px;
						padding-right: 4px;
						padding-bottom: 4px;
					}

					@media screen and (max-width: 520px) {
						flex-direction: column;
						align-items: flex-start;
						gap: 10px;
					}

					.inner {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						height: 61px;
						overflow: hidden;

						@media screen and (max-width: 769px) {
							height: 49px;
						}

						.inner-box {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							transition: transform 0.3s;
						}

						.item-text-box {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							gap: 4px;

							.en {
								font-size: 16px !important;
								font-weight: 900;
								font-family: "Inter", sans-serif;
								color: #100101;
								letter-spacing: 0;
								line-height: calc(24 / 16);
								transition: all 0.3s;

								@media screen and (max-width: 769px) {
									font-size: 10px !important;
									line-height: calc(24 / 10) !important;
								}
							}

							.ja {
								font-size: 32px !important;
								font-weight: bold;
								font-family: "Noto Sans JP", sans-serif;
								color: #100101;
								letter-spacing: 2%;
								line-height: 1 !important;
								transition: all 0.3s;

								@media screen and (max-width: 769px) {
									font-size: 20px !important;
									line-height: 1 !important;

								}
							}
						}
					}

					.arrow {
						font-size: 25px;
						color: #100101;
						width: 25px;
						overflow: hidden;
						transition: all 0.3s;

						@media screen and (max-width: 520px) {
							margin-left: auto;
							font-size: 20px;
							width: 20px;
						}

						.arrow-inner {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							transition: transform 0.3s;
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							border-top-color: #CB0300;

							.item-text-box {
								.en {
									color: #CB0300;
								}

								.ja {
									color: #CB0300;
								}
							}

							.inner {
								.inner-box {
									transform: translateY(-52%);
								}
							}

							.arrow {
								color: #CB0300;

								.arrow-inner {
									transform: translateX(100%);
								}
							}
						}
					}
				}

				.more-red {
					position: absolute;
					bottom: 0;
					right: 0;

					@media screen and (max-width: 920px) {
						position: relative;
						bottom: unset;
						right: unset;
						margin-top: 14px;
						margin-left: auto;
					}
				}
			}
		}
	}

	.interview {
		width: 100%;
		padding-top: 78px;
		padding-bottom: 100px;
		background-image: url(../img/interview-back.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 769px) {
			padding-top: 38px;
			padding-bottom: 50px;
		}

		.container {
			width: 100%;
			max-width: 1280px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			padding-left: 40px;
			padding-right: 40px;
			box-sizing: border-box;

			@media screen and (max-width: 769px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.title-top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 12px;
				width: 100%;

				.line-box {
					flex: 1;
					height: 11px;
					border-top: 5px solid #100101;
					border-bottom: 2px solid #100101;
					box-sizing: border-box;

					@media screen and (max-width: 769px) {
						height: 10.5px;
						border-top: 4px solid #100101;
						border-bottom: 1.5px solid #100101;
					}
				}

				.ja {
					width: 523px;

					@media screen and (max-width: 769px) {
						width: 249px;
					}
				}
			}

			.title-box {
				height: 95px;
				aspect-ratio: 1241/188;
				margin: 0 auto;
				margin-top: 10px;

				@media screen and (max-width: 769px) {
					height: 45px;
					margin-top: 8px;
				}

				img {
					height: 100%;
				}
			}

			.below-line {
				height: 11px;
				border-top: 2px solid #100101;
				border-bottom: 5px solid #100101;
				box-sizing: border-box;
				margin-top: 30px;
				width: 100%;

				@media screen and (max-width: 769px) {
					height: 10.5px;
					border-top: 1.5px solid #100101;
					border-bottom: 4px solid #100101;
					margin-top: 16px;
				}
			}

			.cate-box {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: flex-start;
				flex-wrap: wrap;
				gap: 40px 24px;
				margin-top: 40px;
				width: 100%;

				@media screen and (max-width: 520px) {
					gap: 24px;
					margin-top: 16px;
				}

				.item {
					width: calc(calc(100% - 48px) / 3);
					display: flex;
					flex-direction: column;

					@media screen and (max-width: 769px) {
						width: calc(calc(100% - 24px) / 2);
					}

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

					.imgbox {
						width: 100%;
						aspect-ratio: 384/216;
						position: relative;
						overflow: hidden;

						@media screen and (max-width: 520px) {
							aspect-ratio: 343/192;
						}

						img {
							transition: all 0.3s;
						}

						.arrow {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 60px;
							height: 60px;
							background-color: #100101;
							display: flex;
							align-items: center;
							justify-content: center;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								width: 45px;
								height: 45px;
							}

							.arrow-inner {
								width: 23px;
								height: 23px;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								overflow: hidden;

								@media screen and (max-width: 520px) {
									width: 18px;
									height: 18px;
								}

								.arrow-inner-box {
									display: flex;
									flex-direction: row;
									align-items: center;
									justify-content: center;
									transition: transform 0.3s;
									color: white;
									font-size: 23px;

									@media screen and (max-width: 520px) {
										font-size: 18px;
									}
								}
							}
						}
					}

					.textbox {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						margin-top: 8px;
						border-top: 6px solid #100101;
						padding-top: 20px;
						transition: all 0.3s;
						flex: 1;

						@media screen and (max-width: 520px) {
							padding-top: 12px;
						}

						.item-title {
							font-size: 32px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: -1px;
							line-height: 1.2 !important;
							transition: all 0.3s;

							@media screen and (max-width: 520px) {
								font-size: 24px !important;
							}
						}

						.table {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							gap: 0;
							margin-top: 24px;
							width: 100%;

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

							.table-item {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;
								border-bottom: 1px solid #B9B9B9;
								width: 100%;

								.head {
									width: 100px;
									padding: 10px;
									box-sizing: border-box;
									font-size: 16px !important;
									font-weight: 500;
									font-family: "Noto Sans JP", sans-serif;
									color: #100101;
									letter-spacing: 10%;
									line-height: 1 !important;
									border-right: 1px solid #B9B9B9;

									@media screen and (max-width: 520px) {
										width: 80px;
										font-size: 12px !important;
										font-weight: bold;
									}
								}

								.val {
									flex: 1;
									padding: 10px;
									font-size: 16px !important;
									font-weight: 500;
									font-family: "Noto Sans JP", sans-serif;
									color: #100101;
									letter-spacing: 10%;
									line-height: 1 !important;

									@media screen and (max-width: 520px) {
										font-size: 12px !important;
									}
								}
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							.imgbox {
								img {
									scale: 1.1;
								}

								.arrow {
									background-color: #CB0300;

									.arrow-inner {
										.arrow-inner-box {
											transform: translateX(50%);
										}
									}
								}
							}

							.textbox {
								border-top-color: #CB0300;

								.item-title {
									color: #CB0300;
								}
							}
						}
					}
				}
			}

			.more-black {
				margin: 0 auto;
				margin-top: 60px;

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

	.env {
		width: 100%;
		padding-top: 100px;
		padding-bottom: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		.container {
			width: 100%;
			max-width: 1280px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			padding-left: 40px;
			padding-right: 40px;
			box-sizing: border-box;

			@media screen and (max-width: 769px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.catch {
				font-size: 64px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -4.2px;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					font-size: 28px !important;
					letter-spacing: 0px;
					margin-top: 12px;
				}
			}

			.box {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: center;
				gap: 40px;
				margin-top: 40px;
				width: 100%;

				@media screen and (max-width: 769px) {
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					margin-top: 24px;
					gap: 20px;
				}

				.slide {
					width: 623px;
					height: 658px;
					overflow: hidden;

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

					.swiper {
						width: 100%;
						height: 100%;

						.swiper-wrapper {
							height: 100%;
							transition-timing-function: linear;

							.swiper-slide {
								height: 100%;
								width: 2314px;

								@media screen and (max-width: 769px) {
									width: 880px;
									height: 249px;
								}

								img {
									height: 100%;
									object-fit: cover;
								}
							}
						}
					}
				}

				.textbox {
					flex: 1;

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

					.links {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						width: 100%;

						.item {
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							border-top: 4px solid #100101;
							padding: 30px 10px;

							@media screen and (max-width: 769px) {
								padding-top: 12px;
								padding-bottom: 16px;
								padding-left: 4px;
								padding-right: 4px;
								border-top-width: 3px;
							}

							.inner {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								height: 61px;
								overflow: hidden;

								@media screen and (max-width: 769px) {
									height: 49px;
								}

								.inner-box {
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: flex-start;
									transition: transform 0.3s;
								}

								.item-text-box {
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: flex-start;
									gap: 4px;

									.en {
										font-size: 16px !important;
										font-weight: 900;
										font-family: "Inter", sans-serif;
										color: #100101;
										letter-spacing: 0;
										line-height: calc(24 / 16);
										transition: all 0.3s;

										@media screen and (max-width: 769px) {
											font-size: 10px !important;
											line-height: calc(24 / 10) !important;
										}
									}

									.ja {
										font-size: 32px !important;
										font-weight: bold;
										font-family: "Noto Sans JP", sans-serif;
										color: #100101;
										letter-spacing: 2%;
										line-height: 1 !important;
										transition: all 0.3s;

										@media screen and (max-width: 769px) {
											font-size: 20px !important;
											line-height: 1 !important;

										}
									}
								}
							}

							.arrow {
								font-size: 25px;
								color: #100101;
								width: 25px;
								overflow: hidden;
								transition: all 0.3s;

								@media screen and (max-width: 520px) {
									margin-left: auto;
									font-size: 20px;
									width: 20px;
								}

								.arrow-inner {
									display: flex;
									flex-direction: row;
									align-items: center;
									justify-content: flex-end;
									transition: transform 0.3s;
								}
							}

							@media screen and (min-width: 520px) {
								&:hover {
									border-top-color: #CB0300;

									.item-text-box {
										.en {
											color: #CB0300;
										}

										.ja {
											color: #CB0300;
										}
									}

									.inner {
										.inner-box {
											transform: translateY(-52%);
										}
									}

									.arrow {
										color: #CB0300;

										.arrow-inner {
											transform: translateX(100%);
										}
									}
								}
							}
						}
					}
				}
			}

			.more-black {
				margin-left: auto;
				margin-right: 0;
				margin-top: 32px;

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


.mid-sub {
	padding-top: 172px;

	@media screen and (max-width: 769px) {
		padding-top: 140px;
	}

	.c-tv {
		width: 100%;

		.container {
			width: 100%;
			box-sizing: border-box;
			padding-left: 36px;
			padding-right: 36px;
			margin: 0 auto;

			@media screen and (max-width: 769px) {
				padding-left: 10px;
				padding-right: 10px;
			}

			.title {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				width: 100%;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 24px;
				box-sizing: border-box;
				border-top: 6px solid #100101;

				@media screen and (max-width: 1024px) {
					flex-direction: column;
					justify-content: flex-start;
					gap: 6px;
				}

				@media screen and (max-width: 520px) {
					border-top-width: 4px;
					padding-top: 16px;
					padding-left: 0px;
					padding-right: 0px;
				}

				.en {
					font-size: 24px !important;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: #100101;
					letter-spacing: 0;
					line-height: 1 !important;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					gap: 12px;

					&::before {
						content: '';
						width: 10px;
						height: 25px;
						background: #CB0300;

						@media screen and (max-width: 520px) {
							width: 6px;
							height: 16px;
						}
					}

					@media screen and (max-width: 520px) {
						gap: 4px;
						font-size: 16px !important;
					}

				}

				.ja {
					font-size: 64px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -4.2px;
					line-height: 1 !important;

					@media screen and (max-width: 920px) {
						font-size: 28px !important;
						letter-spacing: 0 !important;
					}
				}
			}

			.imgbox {
				margin-top: 42px;
				width: 100%;
				aspect-ratio: 1208/393;
				overflow: hidden;
				position: relative;

				@media screen and (max-width: 520px) {
					margin-top: 16px;
					aspect-ratio: 356/200;
				}

				.bread {
					position: absolute;
					bottom: 0;
					left: 0;
					background-color: white;
					padding: 10px 40px;

					@media screen and (max-width: 769px) {
						padding: 8px 10px;
					}

					ul {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						gap: 10px;

						li {
							font-size: 12px;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #1C0000;
							letter-spacing: 10%;
							line-height: 1;

							@media screen and (max-width: 520px) {
								font-size: 10px;
							}

							a {
								color: #999999;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								gap: 10px;

								.home-icon {
									display: block;
									width: 16px;
									aspect-ratio: 1/1;
									background-image: url(../img/icon-home.webp);
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;
								}
							}
						}

						.angle {
							font-size: 14px;
							color: #999999;

							@media screen and (max-width: 520px) {
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}

	.c-has-side {
		width: 100%;
		margin-top: 100px;

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

		.two-column-container {
			width: 100%;
			max-width: 1280px;
			padding-left: 40px;
			padding-right: 40px;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: flex-start;
			gap: 46px;

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

			.side-wrapper {
				width: 270px;
				position: relative;
				padding-top: 100px;
				z-index: 100;
				padding-bottom: 100px;

				@media screen and (max-width: 1024px) {
					display: none;
				}

				.side-bar {
					position: sticky;
					top: 190px;
					width: 100%;
					border-radius: 8px;
					filter: drop-shadow(0px 0px 15px rgba(137, 137, 137, 0.25));
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					background-color: white;
					overflow: hidden;

					.item {
						width: 100%;
						height: 72px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 0px 12px;
						border-bottom: 1px solid #CCCCCC;

						&:nth-last-child(1) {
							border-bottom: none;
						}

						.text {
							font-size: 16px;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: #1C0000;
							letter-spacing: 10%;
							line-height: 1;
							transition: all 0.3s;
						}

						.arrow {
							width: 30px;
							height: 30px;
							background-color: #100101;
							border-radius: 50%;
							color: white;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 13px;
							transition: all 0.3s;
						}

						@media screen and (min-width: 520px) {
							&:hover {
								background-color: #F5F5F5;

								.text {
									/* color: #CB0300; */
								}

								.arrow {
									background-color: #CB0300;
								}
							}
						}
					}

					.side-active {
						background-color: #F5F5F5;

						.text {
							/* color: #CB0300; */
						}

						.arrow {
							background-color: #CB0300;
						}
					}
				}
			}

			.c-main-box {
				flex: 1;
				width: 100%;
			}

			.c-num-en-ja-titlebox {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 16px;

				@media screen and (max-width: 769px) {
					gap: 4px;
				}

				.sp-only {
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}
				}

				.num-en-title {
					font-size: 20px;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: black;
					letter-spacing: 0;
					line-height: 1;

					@media screen and (max-width: 769px) {
						font-size: 14px;
						line-height: calc(24 / 14);
					}
				}

				.ja-title {
					font-size: 42px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: black;
					letter-spacing: -1px;
					line-height: 1 !important;

					@media screen and (max-width: 769px) {
						font-size: 24px !important;
					}
				}
			}
		}
	}
}


.mid-company {
	.about {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 32px;

		@media screen and (max-width: 1024px) {
			padding-left: 7.5px;
			padding-right: 7.5px;
			box-sizing: border-box;
			gap: 20px;
		}

		.imgtextbox {
			width: 100%;
			height: 240px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url(../img/sub-company-about-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding-left: 40px;
			padding-right: 40px;

			@media screen and (max-width: 769px) {
				background-image: url(../img/sub-company-about-back-sp.webp);
				aspect-ratio: 361/179;
				padding-left: 6.5px;
				padding-right: 6.5px;
				height: unset;
			}

			.catch {
				width: 100%;
				aspect-ratio: 799/112;
			}
		}
	}

	.mu {
		width: 100%;
		margin-top: 100px;

		@media screen and (max-width: 1024px) {
			padding-left: 7.5px;
			padding-right: 7.5px;
		}

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

		.mu-wrapper {
			margin-top: 32px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 60px;

			@media screen and (max-width: 769px) {
				margin-top: 22px;
				gap: 20px;
			}

			.item {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 8px;

				@media screen and (max-width: 769px) {
					gap: 20px;
				}

				.above {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
					gap: 25px;
					background-image: url(../img/sub-company-mu-above-back.webp);
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					box-sizing: border-box;
					border-top: 4px solid #100101;

					@media screen and (max-width: 769px) {
						background-image: url(../img/sub-company-mu-above-back-sp.webp);
						flex-direction: column;
						align-items: center;
						gap: 6px;
					}

					.num {
						background-color: #100101;
						color: white;
						padding: 10px;
						padding-top: 6px;
						box-sizing: border-box;
						font-size: 20px !important;
						font-weight: 900;
						font-family: "Inter", sans-serif;
						letter-spacing: 0;
						line-height: calc(24 / 20) !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						gap: 10px;

						&::before {
							content: '';
							width: 6px;
							height: 48px;
							background-color: white;
						}

						@media screen and (max-width: 769px) {
							margin-right: auto;
							margin-left: 0;
							font-size: 15px !important;
							line-height: calc(20 / 15) !important;

							&::before {
								height: 40px;
							}
						}
					}

					.item-title {
						box-sizing: content-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						padding-top: 23px;
						padding-bottom: 25px;
						flex: 1;

						@media screen and (max-width: 769px) {
							padding-top: 6px;
							padding-bottom: 16px;
						}

						.text {
							font-size: 32px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: black;
							letter-spacing: 2%;
							line-height: 1.5 !important;
							position: relative;
							height: 90px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							padding-left: 59px;
							padding-right: 59px;
							font-feature-settings: 'palt';

							.sp-only {
								display: none;
							}

							@media screen and (max-width: 769px) {
								.sp-only {
									display: block;
								}

								padding-left: 39px;
								padding-right: 39px;
								height: unset;
								font-size: 24px !important;
								white-space: nowrap;
							}

							&::before {
								content: '';
								width: 36px;
								height: 29px;
								position: absolute;
								top: 0;
								left: 0;
								background-image: url(../img/icon-quotation-above.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;

								@media screen and (max-width: 769px) {
									width: 23px;
									height: 20px;
								}
							}

							&::after {
								content: '';
								width: 36px;
								height: 29px;
								position: absolute;
								bottom: 0;
								right: 0;
								background-image: url(../img/icon-quotation-below.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;

								@media screen and (max-width: 769px) {
									width: 23px;
									height: 20px;
								}
							}
						}

						.one-line-text {
							@media screen and (max-width: 769px) {
								padding-top: 15px;
								padding-bottom: 15px;
								padding-left: 27px;
								padding-right: 27px;
							}
						}
					}
				}

				.below {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					padding: 32px;
					padding-top: 60px;
					background-image: url(../img/sub-company-mu-below-back.webp);
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
					box-sizing: border-box;
					position: relative;

					@media screen and (max-width: 769px) {
						padding: 32px 10px;
						width: calc(100% - 20px);
						margin-left: auto;
						margin-right: auto;
						background-image: url(../img/sub-company-mu-below-back-sp.webp);
					}

					&::before {
						content: 'A';
						font-size: 64px;
						font-weight: 900;
						font-family: "Inter", sans-serif;
						color: #CB0300;
						letter-spacing: 0;
						line-height: 0.75;
						position: absolute;
						top: -14px;
						left: 0;

						@media screen and (max-width: 769px) {
							font-size: 42px;
							top: -13px;
						}
					}

					.answer {
						font-size: 28px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: 4%;
						line-height: 1 !important;

						@media screen and (max-width: 769px) {
							font-size: 24px !important;
							line-height: 1.2 !important;
							letter-spacing: 3%;
						}

						.color-red {
							color: #CB0300;
						}

						.sp-only {
							display: none;
						}

						@media screen and (max-width: 769px) {
							.sp-only {
								display: block;
							}
						}
					}

					.text {
						font-size: 16px !important;
						font-family: "Noto Sans JP", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: 5%;
						line-height: 1.3 !important;
						font-feature-settings: 'palt';

						@media screen and (max-width: 769px) {
							font-size: 14px !important;
							line-height: 1.4 !important;
						}

						.weight-bold {
							font-weight: bold;
							text-align: center;
							display: block;
							margin-top: 20px;

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

					.first-q-text {
						margin-top: 16px;

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

					.third-q-text {
						margin-top: 20px;

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

					.strong {
						width: 100%;
						background-color: #CB0300;
						text-align: center;
						padding-top: 8px;
						padding-bottom: 10px;
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 5%;
						line-height: 1 !important;
						margin-top: 8px;

						.sp-only {
							display: none;

							@media screen and (max-width: 769px) {
								display: block;
							}
						}

						@media screen and (max-width: 769px) {
							margin-top: 8px;
							font-size: 16px !important;
							letter-spacing: 10%;
						}
					}

					.img-column {
						margin-top: 10px;
						width: 100%;

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

						img {
							object-fit: contain;
						}
					}

					.like-list {
						margin-top: 20px;
						box-sizing: border-box;
						background-color: white;
						padding: 20px;
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 14.5px;

						@media screen and (max-width: 769px) {
							margin-top: 12px;
							gap: 4px;
						}

						.normal-text {
							font-size: 16px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: #1C0000;
							letter-spacing: 10%;
							line-height: 1 !important;

							@media screen and (max-width: 769px) {
								margin-bottom: 10px;
							}
						}

						.normal-text-sm {
							font-size: 16px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: #1C0000;
							letter-spacing: 10%;
							line-height: 1 !important;

							@media screen and (max-width: 769px) {
								font-size: 14px !important;
								margin-top: 10px;
							}
						}

						.check-text {
							font-size: 16px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: #1C0000;
							letter-spacing: 10%;
							line-height: 1 !important;
							position: relative;
							padding-left: 40px;

							@media screen and (max-width: 769px) {
								line-height: 1.3 !important;
							}

							&::before {
								content: '';
								width: 20px;
								height: 16px;
								background-image: url(../img/icon-check-red.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								position: absolute;
								top: 50%;
								left: 0;
								transform: translateY(-50%);
							}

							.color-red {
								color: #CB0300;
							}
						}
					}

					.textimg-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						gap: 20px;
						margin-top: 20px;

						@media screen and (max-width: 769px) {
							flex-direction: column;
							gap: 12px;
							margin-top: 12px;
						}

						.text {
							flex: 1;
						}

						.img {
							width: 100%;
							max-width: 390px;

							@media screen and (max-width: 520px) {
								max-width: 219px;
							}
						}
					}

					.card-box {
						display: flex;
						flex-direction: row;
						align-items: stretch;
						justify-content: center;
						gap: 20px;
						margin-top: 20px;

						@media screen and (max-width: 769px) {
							flex-direction: column;
							gap: 12px;
							margin-top: 12px;
						}

						.card {
							width: calc(calc(100% - 20px) / 2);
							box-sizing: border-box;
							padding: 12px;
							background-color: white;

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

							.card-title {
								width: 100%;
								font-size: 28px !important;
								font-weight: 900;
								font-family: "Noto Sans JP", sans-serif;
								color: black;
								letter-spacing: 0%;
								line-height: 1.1 !important;
								text-align: left;
								padding-top: 12px;
								border-top: 4px solid #100101;

								@media screen and (max-width: 769px) {
									font-size: 24px !important;
								}
							}

							.text {
								font-size: 16px !important;
								font-weight: 900;
								font-family: "Noto Sans JP", sans-serif;
								color: black;
								letter-spacing: 5%;
								line-height: 1.3 !important;
								margin-top: 20px;

								@media screen and (max-width: 769px) {
									font-size: 14px !important;
									line-height: 1.4 !important;
									margin-top: 12px;
								}
							}
						}
					}
				}
			}
		}
	}

	.target {
		margin-top: 100px;
		width: 100%;

		@media screen and (max-width: 1024px) {
			padding-left: 7.5px;
			padding-right: 7.5px;
		}

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

		.container {
			width: 100%;

			.card-box {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 16px;
				flex-wrap: wrap;
				margin-top: 32px;

				@media screen and (max-width: 769px) {
					gap: 10px;
					margin-top: 20px;
				}

				.item {
					width: calc(calc(100% - 32px) / 3);
					display: flex;
					flex-direction: column;
					align-items: stretch;
					justify-content: flex-start;

					@media screen and (max-width: 769px) {
						width: calc(calc(100% - 10px) / 2);
					}

					.img {
						aspect-ratio: 283/159;
						overflow: hidden;
						width: 100%;
					}

					.card-text {
						margin-top: 8px;
						padding-top: 10px;
						border-top: 6px solid #100101;
						width: 100%;
						box-sizing: border-box;
						padding-left: 10px;
						padding-right: 10px;
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: 5%;
						line-height: 1 !important;

						@media screen and (max-width: 769px) {
							font-size: 14px !important;
							line-height: 1 !important;
							border-top-width: 3px;
							padding-top: 5px;
						}
					}
				}
			}

			.lg-text {
				margin-top: 32px;
				font-size: 32px !important;
				font-weight: bold;
				font-family: "Noto Sans JP", sans-serif;
				color: black;
				letter-spacing: 2%;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					margin-top: 20px;
					font-size: 24px !important;
					line-height: 1.2 !important;
					letter-spacing: 3%;
				}
			}

			.sm-text {
				margin-top: 24px;
				font-size: 18px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: black;
				letter-spacing: 10%;
				line-height: 1.2 !important;

				@media screen and (max-width: 769px) {
					margin-top: 12px;
					font-size: 14px !important;
					line-height: 1.4 !important;
				}
			}
		}
	}

	.wot {
		margin-top: 100px;
		width: 100%;
		position: relative;

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

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-image: url(../img/sub-company-wot-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 30px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}

		.container {
			position: relative;
			z-index: 2;
			width: 100%;
			padding-top: 100px;
			padding-bottom: 100px;
			box-sizing: border-box;

			@media screen and (max-width: 1024px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			@media screen and (max-width: 769px) {
				padding-top: 40px;
				padding-bottom: 40px;
			}

			.contents-box {
				width: 100%;
				margin-top: 60px;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-start;
				gap: 40px;

				@media screen and (max-width: 769px) {
					gap: 20px;
					margin-top: 20px;
				}

				.block {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: stretch;
					justify-content: flex-start;
					border-top: 6px solid #100101;
					padding-top: 14px;

					@media screen and (max-width: 769px) {
						padding-top: 12px;
						border-top-width: 4px;
					}

					.sub-title {
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: 5%;
						line-height: 1 !important;

						@media screen and (max-width: 769px) {
							font-size: 16px !important;
							letter-spacing: 5%;
						}
					}

					.catch-lg {
						font-size: 56px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: -1px;
						line-height: calc(105/56) !important;
						font-feature-settings: initial;

						@media screen and (max-width: 769px) {
							font-size: 24px !important;
							letter-spacing: 0%;
							line-height: 1;
						}
					}

					.catch-sm {
						margin-top: 32px;
						font-size: 32px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: -1px;
						line-height: 1.2 !important;
						font-feature-settings: initial;

						@media screen and (max-width: 769px) {
							margin-top: 10px;
							font-size: 16px !important;
							letter-spacing: 5%;
							line-height: 1.3 !important;
						}
					}

					.card-box {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: center;
						gap: 20px;
						width: 100%;
						margin-top: 20px;

						@media screen and (max-width: 769px) {
							gap: 10px;
							margin-top: 10px;
							flex-wrap: wrap;
							justify-content: flex-start;
						}

						.item {
							width: calc(calc(100% - 40px) / 3);

							@media screen and (max-width: 769px) {
								width: calc(calc(100% - 10px) / 2);
							}

							.img {
								width: 100%;
								aspect-ratio: 273/146;
							}

							.card-text {
								margin-top: 8px;
								padding-top: 8px;
								border-top: 4px solid #100101;
								width: 100%;
								box-sizing: border-box;
								padding-left: 10px;
								padding-right: 10px;
								padding-bottom: 10px;
								font-size: 18px !important;
								font-weight: 900;
								font-family: "Noto Sans JP", sans-serif;
								color: black;
								letter-spacing: 10%;
								line-height: 1.2 !important;

								@media screen and (max-width: 769px) {
									margin-top: 8px;
									padding-top: 5px;
									border-top-width: 3px;
									padding-left: 0;
									padding-right: 0;
									padding-bottom: 8px;
									font-size: 14px !important;
									line-height: 1 !important;
								}
							}
						}
					}

					.tile {
						margin-top: 40px;
						background-image: url(../img/sub-company-wot-tile-back.webp);
						padding: 20px;
						box-sizing: border-box;
						width: 100%;

						@media screen and (max-width: 769px) {
							margin-top: 12px;
							padding: 12px;
						}

						.tile-title {
							padding-top: 8px;
							padding-bottom: 10px;
							background-color: #100101;
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: flex-end;
							justify-content: center;
							font-size: 20px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: white;
							letter-spacing: 5%;
							line-height: 1 !important;

							@media screen and (max-width: 769px) {
								font-size: 16px !important;
							}

							.sm {
								font-size: 12px !important;
								font-weight: 400;
								font-family: "Noto Sans JP", sans-serif;
								color: white;
								letter-spacing: 10%;
								line-height: 1 !important;
								margin-left: 10px;
							}
						}

						.tile-box {
							margin-top: 10px;
							display: flex;
							flex-direction: row;
							align-items: stretch;
							justify-content: flex-start;
							flex-wrap: wrap;
							gap: 20px;

							@media screen and (max-width: 769px) {
								margin-top: 12px;
								gap: 12px;
							}

							.item {
								padding: 12px;
								width: calc(calc(100% - 20px) / 2);

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

								.item-title {
									border-top: 4px solid #100101;
									padding-top: 10px;
									width: 100%;
									display: flex;
									flex-direction: row;
									align-items: flex-start;
									justify-content: flex-start;
									gap: 20px;

									@media screen and (max-width: 769px) {
										padding-top: 12px;
										gap: 8px;
									}

									.num {
										font-size: 28px !important;
										font-weight: 900;
										font-family: "Noto Sans JP", sans-serif;
										color: black;
										letter-spacing: 0%;
										line-height: 1.1 !important;

										@media screen and (max-width: 769px) {
											font-size: 24px !important;
											line-height: 1 !important;
										}
									}

									.inner-text {
										font-size: 28px !important;
										font-weight: 900;
										font-family: "Noto Sans JP", sans-serif;
										color: black;
										letter-spacing: 0%;
										line-height: 1.1 !important;
										min-height: 60px;

										@media screen and (max-width: 769px) {
											font-size: 24px !important;
											line-height: 1 !important;
											min-height: unset;
										}
									}
								}

								.text {
									margin-top: 20px;
									font-size: 16px !important;
									font-weight: 900;
									font-family: "Noto Sans JP", sans-serif;
									color: black;
									letter-spacing: 5%;
									line-height: 1.3 !important;

									@media screen and (max-width: 769px) {
										margin-top: 12px;
										font-size: 14px !important;
										line-height: 1.4 !important;
										letter-spacing: 10%;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.data {
		width: 100%;
		position: relative;

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-color: #100101;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 32px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}

		.container {
			position: relative;
			z-index: 2;
			padding-top: 100px;
			padding-bottom: 100px;

			@media screen and (max-width: 1024px) {
				padding-left: 24px;
				padding-right: 24px;
			}

			@media screen and (max-width: 769px) {
				padding-top: 40px;
				padding-bottom: 40px;
			}

			.c-num-en-ja-titlebox {
				padding-left: 20px;

				@media screen and (max-width: 1024px) {
					padding-left: 0;
				}

				.num-en-title {
					color: white;
				}

				.ja-title {
					color: white;
				}
			}

			.card-box {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: flex-start;
				gap: 16px;
				flex-wrap: wrap;
				margin-top: 60px;

				@media screen and (max-width: 769px) {
					margin-top: 20px;
					gap: 10px;
				}

				.item {
					background-color: white;
					width: calc(calc(100% - 32px) / 3);
					padding: 12px;
					padding-bottom: 20px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					box-sizing: border-box;

					@media screen and (max-width: 1120px) {
						width: calc(calc(100% - 16px) / 2);
					}

					@media screen and (max-width: 769px) {
						zoom: calc(158/285);
						width: calc(calc(100% - 19px) / 2);
					}

					.above {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						background-image: url(../img/sub-company-data-card-back.webp);
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						flex: 1;

						.num {
							margin-top: 14.5px;
							font-size: 64px !important;
							font-weight: 900;
							font-family: "Inter", sans-serif;
							color: black;
							letter-spacing: -1%;
							line-height: 0.8 !important;
						}

						.unit {
							font-size: 20px;
							letter-spacing: 5%;
							margin-left: 2px;
							font-family: "Noto Sans JP", sans-serif;
							font-weight: bold;
						}

						.note {
							font-size: 12px !important;
							font-family: "Noto Sans JP", sans-serif;
							font-weight: 400;
							color: black;
							letter-spacing: 10%;
							line-height: 1.2 !important;
							margin-top: 5px;
							margin-bottom: 5px;
						}

						.top-unit {
							font-size: 20px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: black;
							letter-spacing: 5%;
							line-height: 1 !important;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							gap: 45px;
							margin-top: 8px;
						}
					}

					.below {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 7px;
						border-top: 3px solid #100101;
						width: 100%;
						padding-top: 12px;

						.text {
							font-size: 20px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: #222222;
							letter-spacing: 0%;
							line-height: 1 !important;
						}
					}
				}

				.year {
					.icon {
						width: 100px;
						aspect-ratio: 100/73;
						margin-top: 20px;
					}
				}

				.employee {
					.icon {
						width: 117px;
						aspect-ratio: 117/56;
						margin-top: 24px;
					}
				}

				.office {
					.icon {
						width: 57px;
						aspect-ratio: 57/65;
						margin-top: 14px;
					}
				}

				.recruit {
					.above {
						.num {
							margin-top: 2px;
							display: flex;
							flex-direction: row;
							align-items: flex-start;
							gap: 20px;
							vertical-align: top;

							.num-inner {
								&:nth-child(2) {
									margin-top: -10px;
								}
							}
						}
					}

					.icon {
						width: 133px;
						aspect-ratio: 133/60;
						margin-top: 2px;
					}
				}

				.overtime {
					.icon {
						width: 71px;
						aspect-ratio: 71/71;
						margin-top: 9.5px;
					}
				}

				.holiday {
					.icon {
						width: 71px;
						aspect-ratio: 71/71;
						margin-top: 16px;
					}
				}

				.age {
					.icon {
						width: 86px;
						aspect-ratio: 86/85;
						margin-top: 10px;
					}
				}

				.years {
					.icon {
						width: 63px;
						aspect-ratio: 63/70;
						margin-top: 6px;
					}
				}

				.turnover {
					.icon {
						width: 66px;
						aspect-ratio: 66/66;
						margin-top: 20px;
					}
				}
			}
		}
	}

	.morexing {
		margin-top: 60px;
		margin-bottom: 120px;
		width: 100%;

		@media screen and (max-width: 769px) {
			margin-top: 40px;
			margin-bottom: 40px;
		}

		.container {
			margin: 0 auto;
			max-width: 1280px;
			box-sizing: border-box;
			padding: 0 40px;

			@media screen and (max-width: 769px) {
				padding: 0 16px;
			}

			.title {
				font-size: 32px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -1%;
				line-height: 1.2 !important;
				text-align: center;

				@media screen and (max-width: 769px) {
					font-size: 24px !important;
					line-height: 1 !important;
					letter-spacing: 0;
				}

				.sp-only {
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}
				}
			}

			.wrapper {
				margin-top: 32px;
				border: 3px solid #CB0300;
				border-radius: 20px;
				background-image: url(../img/sub-company-morexing-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				padding: 40px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 10px;

				@media screen and (max-width: 769px) {
					padding: 20px;
					margin-top: 16px;
					flex-direction: column;
					border-radius: 12px;
					background-image: url(../img/sub-company-morexing-back-sp.webp);
				}

				.item {
					width: calc(calc(100% - 12px) / 2);
					height: 100px;
					background-color: #100101;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right: 24px;
					padding-left: 24px;

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

					@media screen and (max-width: 769px) {
						height: 60px;
						padding: 0 20px;
					}

					@media screen and (max-width: 520px) {
						height: 60px;
					}

					.text {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 0;
						line-height: 1.05 !important;
						text-align: left;
						flex: 1;
						font-feature-settings: "palt";
						height: 29px;
						overflow: hidden;
						position: relative;

						@media screen and (max-width: 1200px) {
							font-size: 18px !important;
							height: 19px;
						}

						@media screen and (max-width: 769px) {
							font-size: 18px !important;
							height: 18px;
							text-align: center;
						}

						@media screen and (max-width: 520px) {
							height: auto;
							line-height: 1.2 !important;
						}

						.inner {
							transition: 0.3s;
							display: block;

							.inner-back-text {
								line-height: 1.05 !important;

								@media screen and (max-width: 1200px) {
									line-height: 1.06 !important;
								}

								@media screen and (max-width: 520px) {
									display: none;
								}
							}

							.sp-use {
								display: none;

								@media screen and (max-width: 520px) {
									display: block;
								}
							}
						}
					}

					.angle {
						width: 36px;
						height: 36px;
						border-radius: 50%;
						background-color: #CB0300;
						color: white;
						font-size: 16px !important;
						line-height: 1 !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						vertical-align: top;

						@media screen and (max-width: 520px) {
							width: 32px;
							height: 32px;
						}

						.inner {
							width: 14px;
							overflow: hidden;

							.inner-box {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								padding-bottom: 2px;
								transition: 0.3s;
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 1;

							.text {
								.inner {
									transform: translateY(-50%);
								}
							}

							.angle {
								.inner {
									.inner-box {
										transform: translateX(100%);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.mid-job {
	.contents {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
		margin-bottom: 160px;

		@media screen and (max-width: 769px) {
			margin-bottom: 40px;
		}

		.container {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			.item {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: center;
				gap: 24px;
				margin-top: 100px;

				&:first-child {
					margin-top: 0;
				}

				@media screen and (max-width: 769px) {
					flex-direction: column;
					margin-top: 40px;
					gap: 16px;
				}

				.img {
					/* aspect-ratio: 389/567; */
					width: 389px;
					overflow: hidden;
					align-self: stretch;

					@media screen and (max-width: 769px) {
						width: 100%;
						aspect-ratio: 344/193;
						align-self: unset;
					}

					img {
						object-fit: cover;
						height: 100%;
					}
				}

				.sp-title {
					width: 100%;
					border-top: 4px solid #100101;
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}

					.sp-en {
						padding-left: 10px;
						font-size: 18px !important;
						font-family: "Inter", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: 0;
						line-height: calc(22/18) !important;
						width: 100%;
						box-sizing: border-box;
						margin-top: 6px;
					}

					.sp-ja {
						padding-left: 10px;
						margin-top: 4px;
						font-size: 28px !important;
						font-family: "Noto Sans JP", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: 0px;
						line-height: 1 !important;
					}
				}

				.textbox {
					flex: 1;
					border-top: 6px solid #100101;

					@media screen and (max-width: 769px) {
						border-top: none;
					}

					.en {
						padding-left: 10px;
						margin-top: 18px;
						font-size: 18px !important;
						font-family: "Inter", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: 0;
						line-height: calc(22/18) !important;

						@media screen and (max-width: 769px) {
							display: none;
						}
					}

					.ja {
						padding-left: 10px;
						margin-top: 8px;
						font-size: 42px !important;
						font-family: "Noto Sans JP", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: -1px;
						line-height: 1 !important;

						@media screen and (max-width: 769px) {
							display: none;
						}
					}

					.sub-title {
						margin-top: 20px;
						height: 44px;
						padding-left: 10px;
						padding-right: 10px;
						background-color: #100101;
						font-size: 20px !important;
						font-family: "Inter", sans-serif;
						font-weight: 900;
						color: white;
						letter-spacing: 0;
						line-height: 1 !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						gap: 10px;
						width: fit-content;

						&::before {
							content: '';
							width: 6px;
							height: 24px;
							background-color: white;
						}

						@media screen and (max-width: 769px) {
							margin-top: 0px;
							font-size: 15px !important;
						}

						&~.sub-title {
							margin-top: 20px;
						}
					}

					.text {
						margin-top: 12px;
						font-size: 18px !important;
						font-family: "Noto Sans JP", sans-serif;
						font-weight: 900;
						color: black;
						letter-spacing: 10%;
						line-height: 1.2 !important;

						@media screen and (max-width: 769px) {
							font-size: 14px !important;
							line-height: 1.4 !important;
							font-weight: bold;
						}
					}

					.check-list {
						margin-top: 16.5px;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 17px;

						@media screen and (max-width: 769px) {
							margin-top: 12px;
							gap: 14px;
						}

						.check-item {
							font-size: 16px !important;
							font-family: "Noto Sans JP", sans-serif;
							font-weight: 900;
							color: black;
							letter-spacing: 5%;
							line-height: 1.3 !important;
							padding-left: 40px;
							position: relative;

							@media screen and (max-width: 769px) {
								font-size: 14px !important;
								line-height: 1.4 !important;
								font-weight: bold;
							}

							&::before {
								content: '';
								width: 20px;
								height: 16px;
								position: absolute;
								top: 50%;
								left: 0;
								transform: translateY(-50%);
								border-radius: 50%;
								background-image: url(../img/icon-check-red.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								transform: translateY(-50%);
							}
						}
					}
				}
			}

			.banner {
				background-image: url(../img/sub-job-sales-banner-back.webp);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				width: 100%;
				aspect-ratio: 880/220;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				padding-right: 26px;
				padding-bottom: 16px;
				position: relative;
				margin-top: 20px;

				@media screen and (max-width: 769px) {
					background-image: url(../img/sub-job-sales-banner-back-sp.webp);
					aspect-ratio: 344/180;
				}

				.text {
					width: calc(100% * calc(698 / 880));
					padding-right: 78px;
					max-width: 698px;
					box-sizing: content-box;
					overflow: hidden;
					aspect-ratio: 698/92;

					@media screen and (max-width: 769px) {
						display: none;
					}

					.inner {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						transition: 0.3s;
					}
				}

				.arrow {
					width: 51px;
					height: 51px;
					border-radius: 50%;
					background-color: #CB0300;
					color: white;
					font-size: 16px !important;
					line-height: 1 !important;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					vertical-align: top;
					position: absolute;
					right: 20px;
					bottom: 20px;

					@media screen and (max-width: 769px) {
						display: none;
					}

					@media screen and (max-width: 520px) {
						width: 32px;
						height: 32px;
					}

					.inner {
						width: 14px;
						overflow: hidden;

						.inner-box {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							padding-bottom: 2px;
							transition: 0.3s;
						}
					}
				}

				@media screen and (min-width: 520px) {
					&:hover {
						.text {
							.inner {
								transform: translateY(-50%);
							}
						}

						.arrow {
							.inner {
								.inner-box {
									transform: translateX(100%);
								}
							}
						}
					}
				}
			}
		}
	}
}

.mid-interview {
	background-color: #F2F2F2;

	.contents {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		margin-top: 100px;
		padding-bottom: 100px;
		margin-bottom: 60px;
		padding-left: 40px;
		padding-right: 40px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		gap: 40px 24px;
		flex-wrap: wrap;

		@media screen and (max-width: 769px) {
			flex-direction: column;
			margin-bottom: 0;
			padding-bottom: 68px;
		}

		@media screen and (max-width: 520px) {
			gap: 24px;
			padding-left: 16px;
			padding-right: 16px;
			margin-top: 40px;
		}

		.item {
			width: calc(calc(100% - 24px) / 2);
			display: flex;
			flex-direction: column;

			@media screen and (max-width: 769px) {
				width: calc(calc(100% - 24px) / 2);
			}

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

			.img {
				width: 100%;
				aspect-ratio: 384/216;
				position: relative;
				overflow: hidden;

				@media screen and (max-width: 520px) {
					aspect-ratio: 343/192;
				}

				img {
					transition: all 0.3s;
				}

				.arrow {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 60px;
					height: 60px;
					background-color: #100101;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s;

					@media screen and (max-width: 520px) {
						width: 45px;
						height: 45px;
					}

					.arrow-inner {
						width: 23px;
						height: 23px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						overflow: hidden;

						@media screen and (max-width: 520px) {
							width: 18px;
							height: 18px;
						}

						.arrow-inner-box {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							transition: transform 0.3s;
							color: white;
							font-size: 23px;

							@media screen and (max-width: 520px) {
								font-size: 18px;
							}
						}
					}
				}
			}

			.textbox {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 8px;
				border-top: 6px solid #100101;
				padding-top: 20px;
				transition: all 0.3s;
				flex: 1;

				@media screen and (max-width: 520px) {
					padding-top: 12px;
				}

				.item-title {
					font-size: 32px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1.2 !important;
					transition: all 0.3s;

					@media screen and (max-width: 520px) {
						font-size: 24px !important;
					}
				}

				.table {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					gap: 0;
					margin-top: 24px;
					width: fit-content;
					min-width: 363px;

					@media screen and (max-width: 520px) {
						margin-top: 4px;
						min-width: unset;
						width: 100%;
					}

					.table-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						border-bottom: 1px solid #B9B9B9;
						width: 100%;

						.head {
							width: 100px;
							padding: 10px;
							box-sizing: border-box;
							font-size: 16px !important;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1 !important;
							border-right: 1px solid #B9B9B9;

							@media screen and (max-width: 520px) {
								width: 80px;
								font-size: 12px !important;
								font-weight: bold;
							}
						}

						.val {
							flex: 1;
							padding: 10px;
							font-size: 16px !important;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1 !important;

							@media screen and (max-width: 520px) {
								font-size: 12px !important;
							}
						}
					}
				}
			}

			@media screen and (min-width: 520px) {
				&:hover {
					.img {
						img {
							scale: 1.1;
						}

						.arrow {
							background-color: #CB0300;

							.arrow-inner {
								.arrow-inner-box {
									transform: translateX(50%);
								}
							}
						}
					}

					.textbox {
						border-top-color: #CB0300;

						.item-title {
							color: #CB0300;
						}
					}
				}
			}
		}
	}
}

.mid-single-interview {
	background-color: #F2F2F2;
	margin-bottom: 60px;

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

	.single-interview-tv {
		/* max-width: 1280px; */
		width: calc(100% - 80px);
		box-sizing: border-box;
		margin: 0 auto;

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

		.title-top {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 12px;
			width: 100%;

			.line-box {
				flex: 1;
				height: 11px;
				border-top: 5px solid #100101;
				border-bottom: 2px solid #100101;
				box-sizing: border-box;

				@media screen and (max-width: 769px) {
					height: 10.5px;
					border-top: 4px solid #100101;
					border-bottom: 1.5px solid #100101;
				}
			}

			.ja {
				width: 523px;

				@media screen and (max-width: 769px) {
					width: 249px;
				}
			}
		}

		.title-box {
			height: 95px;
			aspect-ratio: 1241/188;
			margin: 0 auto;
			margin-top: 10px;

			@media screen and (max-width: 769px) {
				height: 45px;
				margin-top: 8px;
			}

			img {
				height: 100%;
			}
		}

		.below-line {
			height: 11px;
			border-top: 2px solid #100101;
			border-bottom: 5px solid #100101;
			box-sizing: border-box;
			margin-top: 30px;
			width: 100%;

			@media screen and (max-width: 769px) {
				height: 10.5px;
				border-top: 1.5px solid #100101;
				border-bottom: 4px solid #100101;
				margin-top: 16px;
			}
		}
	}

	.contents {
		width: calc(100% - 32px);
		max-width: 960px;
		margin: 0 auto;
		margin-top: 60px;
		padding-bottom: 100px;

		@media screen and (max-width: 769px) {
			margin-top: 40px;
			padding-bottom: 60px;
		}

		.top {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			gap: 24px;

			@media screen and (max-width: 769px) {
				gap: 8px;
				flex-direction: column;
			}

			.img {
				width: 400px;
				aspect-ratio: 1/1;
				/* PCは正方形 */

				@media screen and (max-width: 769px) {
					width: 100%;
					aspect-ratio: 1/1;
					/* スマホでも正方形を維持（ここを変更） */
				}

				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}

			.textbox {
				flex: 1;
				border-top: 6px solid #100101;
				padding-top: 50px;

				@media screen and (max-width: 769px) {
					width: 100%;
					padding-top: 10px;
				}

				.catch {
					font-size: 42px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 24px !important;
						letter-spacing: 3%;
					}
				}

				.table {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					gap: 0;
					margin-top: 30px;
					width: fit-content;
					min-width: 363px;

					@media screen and (max-width: 520px) {
						margin-top: 4px;
						min-width: unset;
						width: 100%;
					}

					.table-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						border-bottom: 1px solid #B9B9B9;
						width: 100%;

						.head {
							width: 100px;
							padding: 10px;
							box-sizing: border-box;
							font-size: 16px !important;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1 !important;
							border-right: 1px solid #B9B9B9;

							@media screen and (max-width: 520px) {
								width: 80px;
								font-size: 12px !important;
								font-weight: bold;
							}
						}

						.val {
							flex: 1;
							padding: 10px;
							font-size: 16px !important;
							font-weight: 500;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1 !important;

							@media screen and (max-width: 520px) {
								font-size: 12px !important;
							}
						}
					}
				}
			}
		}

		.article-box {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 60px;
			margin-top: 60px;

			@media screen and (max-width: 769px) {
				gap: 16px;
				margin-top: 24px;
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				padding-bottom: 60px;
				border-bottom: 1px solid #CCCCCC;

				@media screen and (max-width: 769px) {
					padding-bottom: 24px;
				}

				.num {
					font-size: 26px !important;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: black;
					letter-spacing: 0;
					line-height: 1 !important;

					@media screen and (max-width: 769px) {
						font-size: 16px !important;
						line-height: calc(24/16) !important;
					}
				}

				.catch {
					margin-top: 24px;
					font-size: 32px !important;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 900;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 24px !important;
						letter-spacing: 0%;
						line-height: 1 !important;
						margin-top: 8px;
					}
				}

				.text {
					margin-top: 32px;
					font-size: 16px !important;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 900;
					color: #100101;
					letter-spacing: 5%;
					line-height: 1.3 !important;

					@media screen and (max-width: 769px) {
						font-size: 13px !important;
						letter-spacing: 10%;
						line-height: 1.4 !important;
						letter-spacing: 10%;
						font-weight: 500;
						margin-top: 12px;
					}
				}

				.imgbox {
					max-width: 760px;
					width: 100%;
					margin: 0 auto;
					margin-top: 24px;

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

		.back {
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 24px;
			margin-top: 32px;

			@media screen and (max-width: 769px) {
				margin-top: 20px;
				gap: 16px;
			}

			.angle {
				width: 30px;
				height: 30px;
				background-color: black;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				font-size: 16px;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					width: 23px;
					height: 23px;
					font-size: 11px;
				}

				.inner {
					width: 14px;
					overflow: hidden;

					@media screen and (max-width: 769px) {
						width: 10px;
						padding-top: 2px;
					}

					.inner-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						padding-bottom: 2px;
						transition: 0.3s;
					}
				}
			}

			.text {
				font-size: 18px;
				font-weight: 500;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: 10%;
				line-height: 1.6 !important;
				height: 29px;
				overflow: hidden;

				@media screen and (max-width: 769px) {
					font-size: 14px;
					line-height: 1 !important;
					height: 15px;
				}

				.inner {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					transition: 0.3s;
				}
			}

			@media screen and (min-width: 520px) {
				&:hover {
					.angle {
						.inner {
							.inner-box {
								transform: translateX(-100%);
							}
						}
					}

					.text {
						.inner {
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}
}


.mid-sales {
	padding-top: 130px;

	.sales-top {
		margin: 0 auto;
		width: 100%;

		.container {
			/* max-width: 1220px; */
			width: calc(100% - 60px);
			margin: 0 auto;
			aspect-ratio: 1220/648;
			background-image: url(../img/sub-sales-tv-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			@media screen and (max-width: 769px) {
				aspect-ratio: 355/580;
				background-image: url(../img/sub-sales-tv-back-sp.webp);
				width: calc(100% - 20px);
			}

			.bread {
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: white;
				padding: 10px 40px;

				@media screen and (max-width: 769px) {
					padding: 8px 10px;
				}

				ul {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 10px;

					li {
						font-size: 12px;
						font-weight: 500;
						font-family: "Noto Sans JP", sans-serif;
						color: #1C0000;
						letter-spacing: 10%;
						line-height: 1;

						@media screen and (max-width: 520px) {
							font-size: 10px;
						}

						a {
							color: #999999;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							gap: 10px;

							.home-icon {
								display: block;
								width: 16px;
								aspect-ratio: 1/1;
								background-image: url(../img/icon-home.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
							}
						}
					}

					.angle {
						font-size: 14px;
						color: #999999;

						@media screen and (max-width: 520px) {
							font-size: 12px;
						}
					}
				}
			}

			.title {
				width: calc(100% * calc(992/1220));
				padding-bottom: 35px;

				@media screen and (max-width: 769px) {
					padding-bottom: 0px;
					width: calc(100% * calc(335/355));
				}
			}
		}
	}

	.c-has-side {
		@media screen and (max-width: 769px) {
			margin-top: 48px;
		}
	}

	.salesposition {
		width: 100%;

		@media screen and (max-width: 1024px) {
			width: 100%;
			box-sizing: border-box;
			padding-left: 16px;
			padding-right: 16px;
		}

		.contents {
			margin-top: 40px;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			gap: 24px;

			@media screen and (max-width: 769px) {
				gap: 16px;
				flex-direction: column;
				margin-top: 20px;
			}

			.img {
				width: 389px;
				aspect-ratio: 389/329;
				overflow: hidden;

				@media screen and (max-width: 769px) {
					width: 100%;
					aspect-ratio: 350/196;
				}
			}

			.textbox {
				border-top: 6px solid #100101;
				padding-top: 18px;
				flex: 1;

				@media screen and (max-width: 769px) {
					padding-top: 8px;
				}

				.catch {
					font-size: 32px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 24px !important;
						letter-spacing: 3%;
					}
				}

				.text {
					margin-top: 20px;
					font-size: 18px !important;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 900;
					color: #100101;
					letter-spacing: 10%;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 16px !important;
						letter-spacing: 3%;
						margin-top: 14px;
						line-height: 1.3 !important;
						letter-spacing: 5%;
					}
				}
			}
		}
	}

	.jobdescription {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
		margin-top: 100px;

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

		.contents {
			margin-top: 40px;

			.lg-sm-text {
				font-size: 32px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -1px;
				line-height: 1.2 !important;

				.lg-red {
					font-size: 42px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #CB0300;
					letter-spacing: -1px;
					line-height: 1.2 !important;

					@media screen and (max-width: 769px) {
						font-size: 32px !important;
					}
				}

				@media screen and (max-width: 769px) {
					font-size: 24px !important;
				}

				.sp-only {
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}
				}
			}

			.imgbox {
				width: 100%;
				aspect-ratio: 880/324;
				overflow: hidden;
				background-image: url(../img/sub-sales-jobdes-cell-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				position: relative;
				margin-top: 20px;

				@media screen and (max-width: 769px) {
					aspect-ratio: 343/393;
				}

				img {
					position: absolute;
					top: 0;
					left: 0;
					transform: translateY(50%);
					transition: all 1s;
					opacity: 0;
				}

				picture:nth-child(1) img {
					transition-delay: 0s;
				}

				picture:nth-child(2) img {
					transition-delay: 0.4s;
				}

				picture:nth-child(3) img {
					transition-delay: 0.8s;
				}

				.active {
					transform: translateY(0);
					opacity: 1;
				}
			}

			.sm-text {
				margin-top: 60px;
				font-size: 20px !important;
				font-weight: bold;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: 5%;
				line-height: 1 !important;

				@media screen and (max-width: 769px) {
					margin-top: 16px;
					font-size: 16px !important;
					letter-spacing: 10%;
				}
			}

			.lg-red-text {
				margin-top: 20px;
				font-size: 50px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #CB0300;
				letter-spacing: -1px;
				line-height: 1.1 !important;
				text-decoration: underline;
				text-underline-offset: 6px;
				text-decoration-thickness: 4px;

				@media screen and (max-width: 769px) {
					margin-top: 10px;
					font-size: 24px !important;
					letter-spacing: 0;
					text-decoration-thickness: 3px;
					text-underline-offset: 3px;
					line-height: 1.2 !important;
				}
			}

			.card-box {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 16px;
				width: 100%;
				margin-top: 32px;

				@media screen and (max-width: 769px) {
					flex-direction: column;
					gap: 24px;
					margin-top: 24px;
				}

				.item {
					width: calc(calc(100% - 32px) / 3);

					@media screen and (max-width: 769px) {
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: center;
						gap: 8px;
					}

					.img {
						width: 100%;
						aspect-ratio: 283/159;
						overflow: hidden;

						@media screen and (max-width: 769px) {
							aspect-ratio: 125/144;
							width: 125px;
						}
					}

					.text-box {
						@media screen and (max-width: 769px) {
							flex: 1;
						}
					}

					.num {
						margin-top: 8px;
						padding-top: 10px;
						border-top: 6px solid #100101;
						width: 100%;
						font-size: 16px !important;
						font-weight: 900;
						font-family: "Inter", sans-serif;
						color: #100101;
						letter-spacing: 0%;
						line-height: calc(24/16) !important;

						@media screen and (max-width: 769px) {
							margin-top: 1px;
							font-size: 14px !important;
							line-height: calc(24/14) !important;
						}
					}

					.item-title {
						margin-top: 8px;
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 0px;
						line-height: 1.1 !important;

						@media screen and (max-width: 769px) {
							margin-top: 4px;
							font-size: 24px !important;
							line-height: 1 !important;
						}

						.--405-none {
							@media screen and (max-width: 405px) {
								display: none;
							}
						}
					}

					.item-text {
						margin-top: 12px;
						font-size: 18px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 10%;
						line-height: 1.2 !important;

						@media screen and (max-width: 769px) {
							font-size: 14px;
							line-height: 1.4 !important;
							font-weight: bold;
						}
					}
				}
			}

			.cell-catch {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 25px;
				background-image: url(../img/sub-company-mu-above-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				box-sizing: border-box;
				border-top: 4px solid #100101;
				margin-top: 60px;

				@media screen and (max-width: 769px) {
					background-image: url(../img/sub-company-mu-above-back-sp.webp);
					flex-direction: column;
					align-items: center;
					gap: 6px;
				}

				.num {
					background-color: #100101;
					color: white;
					padding: 10px;
					padding-top: 6px;
					box-sizing: border-box;
					font-size: 20px !important;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					letter-spacing: 0;
					line-height: calc(24 / 20) !important;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 10px;

					&::before {
						content: '';
						width: 6px;
						height: 48px;
						background-color: white;
					}

					@media screen and (max-width: 769px) {
						margin-right: auto;
						margin-left: 0;
						font-size: 15px !important;
						line-height: calc(20 / 15) !important;

						&::before {
							height: 40px;
						}
					}
				}

				.item-title {
					box-sizing: content-box;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					padding-top: 23px;
					padding-bottom: 25px;
					flex: 1;

					@media screen and (max-width: 769px) {
						padding-top: 6px;
						padding-bottom: 16px;
					}

					.text {
						font-size: 32px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: black;
						letter-spacing: 2%;
						line-height: 1.5 !important;
						position: relative;
						height: 90px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						padding-left: 59px;
						padding-right: 59px;
						font-feature-settings: 'palt';

						.sp-only {
							display: none;
						}

						@media screen and (max-width: 769px) {
							.sp-only {
								display: block;
							}

							padding-left: 39px;
							padding-right: 39px;
							height: unset;
							font-size: 24px !important;
							white-space: nowrap;
						}

						&::before {
							content: '';
							width: 36px;
							height: 29px;
							position: absolute;
							top: 0;
							left: 0;
							background-image: url(../img/icon-quotation-above.webp);
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;

							@media screen and (max-width: 769px) {
								width: 23px;
								height: 20px;
							}
						}

						&::after {
							content: '';
							width: 36px;
							height: 29px;
							position: absolute;
							bottom: 0;
							right: 0;
							background-image: url(../img/icon-quotation-below.webp);
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;

							@media screen and (max-width: 769px) {
								width: 23px;
								height: 20px;
							}
						}
					}

					.one-line-text {
						@media screen and (max-width: 769px) {
							padding-top: 15px;
							padding-bottom: 15px;
							padding-left: 27px;
							padding-right: 27px;
						}
					}
				}
			}

			.list-box {
				background-image: url(../img/sub-sales-jobdes-real-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				margin-top: 12px;
				padding: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 20px;

				@media screen and (max-width: 769px) {
					background-image: url(../img/sub-sales-jobdes-real-back-sp.webp);
					padding: 12px;
					margin-top: 10px;
					gap: 18px;
				}

				.item {
					.title {
						width: 100%;
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 5px;
						line-height: 1 !important;
						padding-top: 10px;
						padding-bottom: 12px;
						padding-left: 10px;
						padding-right: 10px;
						box-sizing: border-box;
						background-color: #100101;
						color: white;

						.num {
							font-size: 20px !important;
							font-weight: 900;
							font-family: "Inter", sans-serif;
							color: white;
							letter-spacing: 0%;
							margin-right: 12px;

							@media screen and (max-width: 769px) {
								font-size: 16px !important;
							}
						}

						@media screen and (max-width: 769px) {
							font-size: 16px !important;
							padding-top: 8px;
							padding-bottom: 10px;
							letter-spacing: 10%;
						}
					}

					.below {
						margin-top: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						gap: 20px;

						@media screen and (max-width: 769px) {
							gap: 12px;
							margin-top: 12px;
							align-items: flex-start;
						}

						.img {
							width: 250px;
							aspect-ratio: 250/146;
							overflow: hidden;

							@media screen and (max-width: 769px) {
								width: 167px;
							}
						}

						.text {
							font-size: 18px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1.2 !important;
							flex: 1;

							@media screen and (max-width: 769px) {
								font-size: 13px !important;
								letter-spacing: 0;
							}
						}
					}
				}
			}

			.note {
				font-family: "Noto Sans JP", sans-serif;
				font-size: 12px !important;
				font-weight: 500;
				color: #100101;
				letter-spacing: 10%;
				line-height: 1.2 !important;
				text-align: left;
				margin-top: 10px;
			}
		}
	}

	.has-back-color {
		width: 100%;
		position: relative;

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-color: #F2F2F2;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 32px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}
	}

	.container {
		position: relative;
		z-index: 2;
		padding-top: 100px;
		margin-top: 100px;

		@media screen and (max-width: 1024px) {
			padding-left: 13px;
			padding-right: 13px;
		}

		@media screen and (max-width: 769px) {
			padding-top: 40px;
			margin-top: 40px;
		}

		.daily {
			.note {
				font-family: "Noto Sans JP", sans-serif;
				font-size: 12px !important;
				font-weight: 500;
				color: #100101;
				letter-spacing: 10%;
				line-height: 1.2 !important;
				text-align: left;
				margin-top: 10px;
			}

			.contents {
				margin-top: 40px;

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

				.btns {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 12px;

					@media screen and (max-width: 769px) {
						gap: 8px;
					}

					.btn {
						width: calc(calc(100% - 12px) / 2);
						height: 68px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding-left: 22px;
						padding-right: 22px;
						box-sizing: border-box;
						border-radius: 4px;
						background-color: #B9B9B9;
						transition: all 0.3s;
						cursor: pointer;

						@media screen and (max-width: 769px) {
							height: 48px;
							padding-left: 8px;
							padding-right: 8px;
						}

						.text {
							font-size: 16px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: white;
							letter-spacing: 10%;
							line-height: 1 !important;
							flex: 1;
							padding-top: 10px;
							padding-bottom: 10px;
							border-right: 1px solid #555353;
							margin-right: 12px;

							@media screen and (max-width: 769px) {
								font-size: 14px !important;
								margin-right: 12px;
								padding-top: 9px;
								padding-bottom: 9px;
							}
						}

						.arrow {
							width: 30px;
							height: 30px;
							background-color: white;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #100101;
							font-size: 14px;

							@media screen and (max-width: 769px) {
								width: 25px;
								height: 25px;
								font-size: 10px;
							}
						}

						@media screen and (min-width: 520px) {
							&:hover {
								opacity: 0.7;
							}
						}

						&.active {
							background-color: #100101;
						}
					}
				}

				.detail {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					width: 100%;
					margin-top: 24px;
					position: relative;
					border-bottom: 1px solid #CCCCCC;
					padding-bottom: 24px;

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

					.box {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						position: absolute;
						visibility: hidden;
						opacity: 0;
						pointer-events: none;

						.hide {
							width: 100%;
							height: 0;
							overflow: hidden;
							transition: all 0.3s;

							.hide-inner {
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: flex-start;
								opacity: 0;
								transition: all 0.3s;
							}
						}

						.item {
							background-color: white;
							width: 100%;
							border-radius: 12px;
							padding: 16px 20px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;

							@media screen and (max-width: 769px) {
								padding: 8px;
								border-radius: 8px;
								flex-direction: column;
								align-items: flex-start;
								justify-content: flex-start;
								gap: 4px;
							}

							.time {
								width: 72px;
								height: 26px;
								border-radius: 128px;
								background-color: #1C0000;
								color: white;
								font-size: 16px !important;
								font-weight: bold;
								font-family: "Goldman", sans-serif;
								letter-spacing: 0;
								line-height: 1 !important;
								display: flex;
								align-items: center;
								justify-content: center;

								@media screen and (max-width: 769px) {
									width: 55px;
									height: 16px;
									font-size: 13px !important;
								}
							}

							.item-title {
								font-size: 16px !important;
								font-weight: bold;
								font-family: "Noto Sans JP", sans-serif;
								color: #100101;
								letter-spacing: 10%;
								line-height: 1.4 !important;
								margin-left: 20px;
								width: 240px;
								box-sizing: border-box;
								padding-right: 20px;

								@media screen and (max-width: 769px) {
									margin-left: 0px;
									width: 100%;
									padding-right: 0;
								}
							}

							.text {
								font-size: 14px !important;
								font-weight: 500;
								font-family: "Noto Sans JP", sans-serif;
								color: #100101;
								letter-spacing: 10%;
								line-height: 1.4 !important;
								flex: 1;

								@media screen and (max-width: 769px) {
									font-size: 12px !important;
								}
							}
						}

						.bar {
							width: 4px;
							height: 24px;
							border-radius: 2px;
							background-color: black;
							margin-top: 8px;
							margin-bottom: 10px;

							@media screen and (max-width: 769px) {
								margin-bottom: 18px;
							}
						}
					}

					.box-active {
						position: relative;
						visibility: visible;
						opacity: 1;
						pointer-events: auto;
					}
				}

				.i-o-btn {
					margin: 0 auto;
					margin-top: 32px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 24px;
					cursor: pointer;

					@media screen and (max-width: 769px) {
						gap: 12px;
					}

					.text {
						font-size: 18px !important;
						font-weight: 500;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 10%;
						line-height: 1.6 !important;

						@media screen and (max-width: 769px) {
							font-size: 14px !important;
						}
					}

					.icon {
						width: 32px;
						height: 32px;
						background-color: #1C0000;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						@media screen and (max-width: 769px) {
							width: 24px;
							height: 24px;
						}

						&::before {
							content: '';
							width: 16px;
							height: 2px;
							background-color: white;
							border-radius: 1px;
							position: absolute;

							@media screen and (max-width: 769px) {
								width: 12px;
								height: 1px;
							}
						}

						&::after {
							content: '';
							width: 16px;
							height: 2px;
							background-color: white;
							border-radius: 1px;
							position: absolute;
							transition: 0.3s;
							transform: rotate(90deg);

							@media screen and (max-width: 769px) {
								width: 12px;
								height: 1px;
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 0.7;
						}
					}
				}

				.icon-close {
					.icon::after {
						transform: rotate(0deg);
					}
				}
			}
		}

		.sau {
			width: 100%;
			margin-top: 100px;

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

			.text {
				margin-top: 40px;
				font-size: 18px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: black;
				letter-spacing: 10%;
				line-height: 1.2 !important;

				@media screen and (max-width: 769px) {
					margin-top: 20px;
					font-size: 14px !important;
					letter-spacing: 0;
				}
			}

			.img {
				width: 100%;
				aspect-ratio: 880/320;
				margin-top: 24px;

				@media screen and (max-width: 769px) {
					margin-top: 20px;
					aspect-ratio: 343/193;
				}

				img {
					object-fit: cover;
				}
			}

			.card-box {
				margin-top: 24px;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 14px;
				padding-bottom: 0;
				width: 100%;
				border-top: 6px solid #100101;

				@media screen and (max-width: 769px) {
					padding-left: 0;
					padding-right: 0;
					padding-top: 12px;
					border-top-width: 4px;
					margin-top: 18px;
				}

				.sub-title {
					font-size: 20px !important;
					font-weight: bold;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: 5%;
					line-height: 1 !important;

					@media screen and (max-width: 769px) {
						font-size: 16px !important;
						letter-spacing: 10%;
					}
				}

				.box {
					margin-top: 20px;
					display: flex;
					flex-direction: row;
					align-items: stretch;
					justify-content: flex-start;
					flex-wrap: wrap;
					gap: 20px;

					@media screen and (max-width: 769px) {
						margin-top: 12px;
						gap: 8px;
					}

					.item {
						width: calc(calc(100% - 40px) / 3);
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						min-height: 120px;
						background-image: url(../img/sub-sales-sau-s-back.webp);
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;

						@media screen and (max-width: 769px) {
							width: calc(calc(100% - 8px) / 2);
							min-height: 74px;
						}

						.item-text {
							font-size: 18px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: black;
							letter-spacing: 10%;
							line-height: 1.2 !important;
							text-align: center;

							@media screen and (max-width: 769px) {
								font-size: 12px !important;
								letter-spacing: 0;
							}
						}
					}
				}

				&~.card-box {
					.box {
						.item {
							background-image: url(../img/sub-sales-sau-u-back.webp);
						}
					}
				}
			}
		}

		.feature {
			margin-top: 72px;
			width: 100%;
			padding-bottom: 100px;

			@media screen and (max-width: 769px) {
				margin-top: 40px;
				padding-bottom: 40px;
			}

			.cell-box {
				margin-top: 32px;
				width: 100%;

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

	.sales-more {
		width: 100%;
		margin-top: 80px;
		margin-bottom: 120px;

		@media screen and (max-width: 769px) {
			margin-top: 33px;
			margin-bottom: 33px;
		}

		.sales-more-container {
			width: calc(100% - 32px);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.title {
				font-size: 32px !important;
				font-weight: bold;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -1px;
				line-height: 1.2 !important;
				text-align: center;

				.sp-only {
					display: none;

					@media screen and (max-width: 769px) {
						display: block;
					}
				}

				@media screen and (max-width: 769px) {
					font-size: 24px !important;
					letter-spacing: 0px;
					line-height: 1 !important;
				}
			}

			.pitch {
				margin-top: 48px;
				max-width: 960px;
				width: 100%;

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

			.wrapper {
				margin-top: 32px;
				max-width: 1200px;
				width: 100%;
				border: 3px solid #CB0300;
				border-radius: 20px;
				background-image: url(../img/sub-company-morexing-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				padding: 40px;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 10px;

				@media screen and (max-width: 769px) {
					padding: 20px;
					margin-top: 20px;
					flex-direction: column;
					border-radius: 12px;
					background-image: url(../img/sub-company-morexing-back-sp.webp);
				}

				.item {
					width: calc(calc(100% - 12px) / 2);
					height: 100px;
					background-color: #100101;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right: 24px;
					padding-left: 24px;

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

					@media screen and (max-width: 769px) {
						height: 60px;
						padding: 0 20px;
					}

					@media screen and (max-width: 520px) {
						height: 60px;
					}

					.text {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 0;
						line-height: 1.05 !important;
						text-align: left;
						flex: 1;
						font-feature-settings: "palt";
						height: 29px;
						overflow: hidden;
						position: relative;

						@media screen and (max-width: 1200px) {
							font-size: 18px !important;
							height: 18px;
						}

						@media screen and (max-width: 769px) {
							font-size: 18px !important;
							height: 19px;
							line-height: 1.1 !important;
							text-align: center;
						}

						@media screen and (max-width: 520px) {
							height: auto;
							line-height: 1.2 !important;
						}

						.inner {
							transition: 0.3s;
							display: block;

							.inner-back-text {
								@media screen and (max-width: 520px) {
									display: none;
								}
							}

							.sp-use {
								display: none;

								@media screen and (max-width: 520px) {
									display: block;
								}
							}
						}
					}

					.angle {
						width: 36px;
						height: 36px;
						border-radius: 50%;
						background-color: #CB0300;
						color: white;
						font-size: 16px !important;
						line-height: 1 !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						vertical-align: top;

						@media screen and (max-width: 520px) {
							width: 32px;
							height: 32px;
						}

						.inner {
							width: 14px;
							overflow: hidden;

							.inner-box {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								padding-bottom: 2px;
								transition: 0.3s;
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 1;

							.text {
								.inner {
									transform: translateY(-50%);
								}
							}

							.angle {
								.inner {
									.inner-box {
										transform: translateX(100%);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.mid-culture {
	.ed {
		width: 100%;

		@media screen and (max-width: 1024px) {
			padding-left: 16px;
			padding-right: 16px;
		}

		.catch {
			width: 100%;
			margin-top: 20px;
			padding-top: 18px;
			border-top: 6px solid #100101;
			font-size: 32px !important;
			font-weight: 900;
			font-family: "Noto Sans JP", sans-serif;
			color: #100101;
			letter-spacing: -1px;
			line-height: 1.2 !important;
			text-align: left;

			@media screen and (max-width: 769px) {
				font-size: 24px !important;
				letter-spacing: 3%;
				line-height: 1.2 !important;
				padding-top: 12px;
				border-top-width: 4px;
				margin-top: 12px;
			}
		}

		.flow {
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 4px;
			width: 100%;

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

			.item {
				padding: 24px;
				width: 100%;
				box-sizing: border-box;
				background-color: #F5F5F5;
				border-radius: 4px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;

				@media screen and (max-width: 769px) {
					padding: 16px;
				}

				.step {
					font-size: 16px !important;
					font-weight: 900;
					font-family: "Inter", sans-serif;
					color: #100101;
					letter-spacing: 0;
					line-height: calc(24/16) !important;
					color: #CB0300;
				}

				.item-title {
					margin-top: 12px;
					padding-top: 12px;
					border-top: 4px solid #100101;
					font-size: 32px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: -1px;
					line-height: 1.2 !important;
					width: 100%;

					@media screen and (max-width: 769px) {
						margin-top: 4px;
						padding-top: 8px;
						font-size: 20px !important;
						letter-spacing: 5%;
						line-height: 1 !important;
					}

					.sm {
						margin-left: 10px;
						font-size: 16px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 5%;
						line-height: 1.3 !important;

						@media screen and (max-width: 769px) {
							font-size: 14px !important;
							line-height: 1 !important;
							margin-left: 4px;
							letter-spacing: 10%;
						}
					}
				}

				.text {
					margin-top: 12px;
					font-size: 16px !important;
					font-weight: 900;
					font-family: "Noto Sans JP", sans-serif;
					color: #100101;
					letter-spacing: 0;
					line-height: 1.3 !important;

					@media screen and (max-width: 769px) {
						margin-top: 4px;
						font-size: 13px !important;
						line-height: 1.6 !important;
						letter-spacing: 10%;
					}
				}
			}

			.tri {
				width: 32px;
				height: 14px;
				background-image: url(../img/icon-tri.webp);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.note {
			margin-top: 10px;
			font-size: 12px !important;
			font-weight: bold;
			font-family: "Noto Sans JP", sans-serif;
			color: #100101;
			letter-spacing: 10%;
			line-height: 1.2 !important;
			text-align: left;

			@media screen and (max-width: 769px) {
				font-size: 10px !important;
			}
		}

		.box {
			background-image: url(../img/sub-culture-ed-box-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			margin-top: 60px;
			width: 100%;
			box-sizing: border-box;
			padding: 24px 32px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 32px;

			@media screen and (max-width: 769px) {
				padding: 24px 12px;
				margin-top: 32px;
			}

			.item {
				width: 100%;

				.above {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					gap: 24px;

					@media screen and (max-width: 769px) {
						flex-direction: column-reverse;
						align-items: flex-start;
						gap: 12px;
					}

					.img {
						max-width: 260px;
						width: 100%;
						aspect-ratio: 260/146;
						overflow: hidden;

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

					.item-title {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 0px;
						line-height: 1.1 !important;
						flex: 1;
						display: block;

						@media screen and (max-width: 769px) {
							font-size: 24px !important;
							letter-spacing: 0%;
							line-height: 1 !important;
						}

						.color-red {
							color: #CB0300;
						}

						.sp-only {
							display: none;

							@media screen and (max-width: 769px) {
								display: block;
							}
						}

						.sp-none {
							display: block;

							@media screen and (max-width: 769px) {
								display: none;
							}
						}
					}
				}

				.below {
					background-color: white;
					margin-top: 12px;
					padding: 20px;
					box-sizing: border-box;

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

					.exam {
						font-size: 16px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						background-color: #CB0300;
						color: white;
						letter-spacing: 10%;
						line-height: 1 !important;
						padding: 8px;
						width: fit-content;
						margin-bottom: 10px;
					}

					.check-list {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 20px;

						@media screen and (max-width: 769px) {
							flex-direction: column;
							gap: 16px;
						}

						.inner-block {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							gap: 13px;

							@media screen and (max-width: 769px) {
								gap: 16px;
							}

							.inner {
								font-size: 16px !important;
								font-weight: 900;
								font-family: "Noto Sans JP", sans-serif;
								color: black;
								letter-spacing: 5%;
								line-height: 1.3 !important;
								padding-left: 40px;
								position: relative;

								@media screen and (max-width: 769px) {
									font-size: 14px !important;
									letter-spacing: 10%;
									line-height: 1 !important;
								}

								&::before {
									content: '';
									width: 20px;
									height: 16px;
									background-image: url(../img/icon-check-red.webp);
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;
									position: absolute;
									top: 50%;
									transform: translateY(-50%);
									left: 5px;
								}
							}
						}
					}
				}
			}
		}
	}

	.career {
		width: 100%;
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		margin-top: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 40px;
			padding-bottom: 40px;
			margin-top: 40px;
		}

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-image: url(../img/sub-culture-career-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 32px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}

		.container {
			z-index: 2;
			position: relative;
			width: 100%;

			@media screen and (max-width: 1024px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.catch {
				width: 100%;
				margin-top: 24px;
				padding-top: 18px;
				border-top: 6px solid #100101;
				font-size: 32px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: -1px;
				line-height: 1.2 !important;
				text-align: left;

				@media screen and (max-width: 769px) {
					font-size: 24px !important;
					letter-spacing: 3%;
					line-height: 1.2 !important;
					padding-top: 12px;
					border-top-width: 4px;
					margin-top: 12px;
				}
			}

			.text {
				margin-top: 24px;
				font-size: 18px !important;
				font-weight: 900;
				font-family: "Noto Sans JP", sans-serif;
				color: #100101;
				letter-spacing: 10%;
				line-height: 1.2 !important;
				text-align: left;

				@media screen and (max-width: 769px) {
					font-size: 16px !important;
					margin-top: 8px;
					line-height: 1.3 !important;
					letter-spacing: 5%;
				}
			}

			.card-box {
				margin-top: 24px;
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: flex-start;
				gap: 20px;

				@media screen and (max-width: 769px) {
					flex-direction: column;
					gap: 10px;
					margin-top: 16px;
				}

				.item {
					width: calc(calc(100% - 10px) / 2);
					box-sizing: border-box;
					padding: 12px;
					background-color: white;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

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

					.item-title {
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 5%;
						line-height: 1 !important;
						background-color: #100101;
						width: 100%;
						padding: 10px;
						padding-top: 8px;
						box-sizing: border-box;

						@media screen and (max-width: 769px) {
							font-size: 16px !important;
							letter-spacing: 10%;
						}
					}

					.item-catch {
						margin-top: 10px;
						padding-top: 6px;
						border-top: 4px solid #100101;
						font-size: 28px !important;
						width: 100%;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 0%;
						line-height: 1.1 !important;

						@media screen and (max-width: 769px) {
							font-size: 20px !important;
							letter-spacing: 5%;
							line-height: 1 !important;
						}
					}

					.item-text {
						margin-top: 20px;
						font-size: 16px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 5%;
						line-height: 1.3 !important;
						text-align: left;

						@media screen and (max-width: 769px) {
							font-size: 13px !important;
							letter-spacing: 10%;
							line-height: 1.4 !important;
							margin-top: 8px;
						}
					}
				}
			}

			.graph {
				width: 100%;
				margin-top: 16px;
			}
		}
	}

	.benefits {
		width: 100%;
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 40px;
			padding-bottom: 40px;
		}

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-color: #100101;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 32px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}

		.container {
			z-index: 2;
			position: relative;
			width: 100%;

			@media screen and (max-width: 1024px) {
				padding-left: 16px;
				padding-right: 16px;
			}

			.c-num-en-ja-titlebox {
				.num-en-title {
					color: white;
				}

				.ja-title {
					color: white;
				}
			}

			.above {
				background-image: url(../img/sub-careers-benefits-above-back.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				width: 100%;
				padding: 24px;
				box-sizing: border-box;
				margin-top: 40px;

				@media screen and (max-width: 769px) {
					padding: 20px 16px;
					margin-top: 28px;
				}

				.inner-above {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					gap: 27px;

					@media screen and (max-width: 769px) {
						flex-direction: column-reverse;
						gap: 12px;
					}

					.img {
						aspect-ratio: 258/145;
						overflow: hidden;
						width: 258px;

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

					.text {
						flex: 1;
						font-size: 20px !important;
						font-weight: bold;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 5%;
						line-height: 1 !important;

						@media screen and (max-width: 769px) {
							font-size: 20px !important;
						}
					}
				}

				.inner-below {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;

					@media screen and (max-width: 769px) {
						flex-direction: column;
						margin-top: 12px;
						gap: 18px;
					}

					.text {
						font-size: 16px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 5%;
						line-height: 1.3 !important;
						text-align: left;
						width: 258px;

						@media screen and (max-width: 769px) {
							font-size: 13px !important;
							letter-spacing: 10%;
							line-height: 1.4 !important;
						}
					}

					.check-list {
						background-color: white;
						flex: 1;
						padding: 20px;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						gap: 14px;

						@media screen and (max-width: 769px) {
							padding: 16px 10px;
							gap: 4px
						}

						.check-title {
							font-size: 16px !important;
							font-weight: bold;
							font-family: "Noto Sans JP", sans-serif;
							color: #100101;
							letter-spacing: 10%;
							line-height: 1 !important;
							text-align: left;

							@media screen and (max-width: 769px) {
								font-size: 14px !important;
								margin-bottom: 10px;
							}
						}

						.inner {
							font-size: 16px !important;
							font-weight: 900;
							font-family: "Noto Sans JP", sans-serif;
							color: black;
							letter-spacing: 5%;
							line-height: 1.3 !important;
							padding-left: 40px;
							position: relative;

							@media screen and (max-width: 769px) {
								font-size: 14px !important;
								letter-spacing: 10%;
								line-height: 1 !important;
							}

							&::before {
								content: '';
								width: 20px;
								height: 16px;
								background-image: url(../img/icon-check-red.webp);
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								left: 5px;
							}
						}
					}
				}
			}

			.below {
				margin-top: 20px;
				pointer-events: none;

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


.mid-info {
	.flow {
		width: 100%;

		@media screen and (max-width: 769px) {
			padding-left: 16px;
			padding-right: 16px;
		}

		.graph {
			margin-top: 32px;

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

		.note {
			margin-top: 20px;
			font-size: 12px !important;
			font-weight: bold;
			font-family: "Noto Sans JP", sans-serif;
			color: #100101;
			letter-spacing: 10%;
			line-height: 1.2 !important;
			text-align: left;

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

	.rec {
		width: 100%;
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		margin-top: 100px;

		@media screen and (max-width: 769px) {
			padding-top: 40px;
			padding-bottom: 40px;
			margin-top: 40px;
		}

		&::before {
			content: '';
			width: 100vw;
			height: 100%;
			background-image: url(../img/sub-info-rec-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			right: calc(calc(calc(100vw - 1280px) / 2 * -1) - 32px);
			z-index: 1;

			@media screen and (max-width: 1280px) {
				right: -40px;
			}

			@media screen and (max-width: 1024px) {
				right: 0px;
			}
		}

		.container {
			z-index: 2;
			position: relative;
			width: 100%;

			@media screen and (max-width: 1024px) {
				padding-left: 16px;
				padding-right: 16px;
			}
		}

		.contents {
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 20px;
			width: 100%;

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

			.item {
				width: 100%;
				cursor: pointer;

				.head {
					padding-bottom: 16px;
					padding-left: 10px;
					padding-right: 10px;
					box-sizing: border-box;
					border-bottom: 4px solid #100101;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					@media screen and (max-width: 769px) {
						padding-bottom: 9px;
						padding-left: 0px;
						padding-right: 0px;
						border-bottom-width: 3px;
					}

					.title {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: #100101;
						letter-spacing: 0%;
						line-height: 1.1 !important;
						text-align: left;

						@media screen and (max-width: 769px) {
							font-size: 16px !important;
							font-weight: bold;
						}
					}

					.icon {
						width: 32px;
						height: 32px;
						background-color: #100101;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						&::before {
							content: '';
							width: 16px;
							height: 2px;
							background-color: white;
							position: absolute;
							border-radius: 1px;
						}

						&::after {
							content: '';
							width: 16px;
							height: 2px;
							background-color: white;
							position: absolute;
							border-radius: 1px;
							transform: rotate(90deg);
							transition: transform 0.3s;
						}
					}
				}

				.body {
					background-color: white;
					margin-top: 20px;
					box-sizing: border-box;
					padding: 0px 32px;
					border-radius: 16px;
					height: 0;
					overflow: hidden;
					transition: height 0.3s;

					@media screen and (max-width: 769px) {
						padding: 0px 12px;
					}

					.inner-box {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						padding-top: 8px;
						padding-bottom: 8px;

						@media screen and (max-width: 769px) {
							gap: 16px;
							padding-top: 20px;
							padding-bottom: 20px;
						}

						.inner {
							padding-top: 24px;
							padding-bottom: 24px;
							border-bottom: 1px solid #E2E2E2;
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: stretch;
							justify-content: flex-start;

							@media screen and (max-width: 769px) {
								padding-top: 0px;
								padding-bottom: 16px;
								flex-direction: column;
								align-items: flex-start;
								justify-content: flex-start;
								gap: 12px;
							}

							.inner-head {
								width: 210px;
								min-height: 52px;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;
								border-right: 1px solid #E2E2E2;
								font-size: 16px !important;
								font-weight: 500;
								font-family: "Noto Sans JP", sans-serif;
								color: #100101;
								letter-spacing: 10%;
								line-height: 1.3 !important;
								text-align: left;

								@media screen and (max-width: 769px) {
									width: 100%;
									min-height: unset;
									border-right: none;
									font-size: 14px !important;
								}
							}

							.inner-val {
								padding-left: 64px;
								font-size: 16px !important;
								font-weight: 500;
								font-family: "Noto Sans JP", sans-serif;
								color: #100101;
								letter-spacing: 10%;
								line-height: 1.3 !important;
								text-align: left;
								flex: 1;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;

								@media screen and (max-width: 769px) {
									padding-left: 0px;
									font-size: 14px !important;
								}
							}
						}

						.btn {
							width: 100%;
							background-color: #CB0300;
							height: 117px;
							padding-left: 16px;
							padding-right: 16px;
							box-sizing: border-box;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							transition: 0.3s;
							margin-top: 24px;
							margin-bottom: 24px;

							@media screen and (max-width: 769px) {
								height: 56px;
								margin-top: 0px;
								margin-bottom: 0px;
							}

							.text {
								font-size: 24px !important;
								font-weight: 900;
								font-family: "Inter", sans-serif;
								color: white;
								letter-spacing: 0%;
								line-height: 1 !important;
								text-align: left;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: flex-start;
								height: 24px;
								overflow: hidden;

								@media screen and (max-width: 769px) {
									height: 14px;
									font-size: 14px !important;
								}

								.btn-text-inner {
									transition: transform 0.3s;
								}
							}

							.angle {
								width: 30px;
								height: 30px;
								background-color: #100101;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								color: white;
								font-size: 14px;

								.angle-inner {
									width: 12px;
									height: 13px;
									overflow: hidden;
									display: flex;
									flex-direction: row;
									align-items: center;
									justify-content: flex-end;
									transition: 0.3s;

									.inner-box {
										display: flex;
										flex-direction: row;
										align-items: center;
										justify-content: flex-start;
										transition: 0.3s;
									}
								}
							}

							@media screen and (min-width: 769px) {
								&:hover {
									opacity: 1;

									.text {
										.btn-text-inner {
											transform: translateY(-50%);
										}
									}

									.angle {
										.angle-inner {
											.inner-box {
												transform: translateX(50%);
											}
										}
									}
								}
							}
						}
					}
				}
			}

			.open-item {
				.head {
					.icon {
						&::after {
							transform: rotate(0deg);
						}
					}
				}
			}
		}
	}

	.morexing {
		width: calc(100% - 32px);
		max-width: 1200px;
		margin: 0 auto;
		margin-top: 60px;
		margin-bottom: 60px;

		@media screen and (max-width: 769px) {
			margin-top: 24px;
			margin-bottom: 40px;
		}

		.title {
			font-size: 32px !important;
			font-weight: 900;
			font-family: "Noto Sans JP", sans-serif;
			color: #100101;
			letter-spacing: -1px;
			line-height: 1.2 !important;
			text-align: center;

			@media screen and (max-width: 769px) {
				font-size: 24px !important;
				line-height: 1 !important;
				letter-spacing: 0;
			}

			.sp-only {
				display: none;

				@media screen and (max-width: 769px) {
					display: block;
				}
			}
		}

		.box {
			margin-top: 32px;
			max-width: 1200px;
			width: 100%;
			border: 3px solid #CB0300;
			border-radius: 20px;
			background-image: url(../img/sub-sales-more-back.webp);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			padding: 40px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20px;

			@media screen and (max-width: 769px) {
				padding: 20px;
				margin-top: 20px;
				flex-direction: column;
				border-radius: 12px;
				background-image: url(../img/sub-company-morexing-back-sp.webp);
				gap: 10px;
			}

			.above {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 20px;

				@media screen and (max-width: 769px) {
					flex-direction: column;
					gap: 10px;
				}

				.banner {
					width: calc(calc(100% - 20px) / 2);
					transition: 0.3s;

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

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 0.7;
						}
					}
				}
			}

			.below {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 10px;
				width: 100%;

				@media screen and (max-width: 769px) {
					flex-direction: column;
				}

				.item {
					width: calc(calc(100% - 12px) / 2);
					height: 100px;
					background-color: #100101;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding-right: 24px;
					padding-left: 24px;

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

					@media screen and (max-width: 769px) {
						height: 60px;
						padding: 0 20px;
					}

					@media screen and (max-width: 520px) {
						height: 60px;
					}

					.text {
						font-size: 28px !important;
						font-weight: 900;
						font-family: "Noto Sans JP", sans-serif;
						color: white;
						letter-spacing: 0;
						line-height: 1 !important;
						text-align: left;
						flex: 1;
						font-feature-settings: "palt";
						height: 28px;
						overflow: hidden;
						position: relative;

						@media screen and (max-width: 1200px) {
							font-size: 18px !important;
							height: 18px;
						}

						@media screen and (max-width: 769px) {
							font-size: 18px !important;
							height: 18px;
							text-align: center;
						}

						@media screen and (max-width: 520px) {
							height: auto;
							line-height: 1.2 !important;
						}

						.inner {
							transition: 0.3s;
							display: block;

							.inner-back-text {
								@media screen and (max-width: 520px) {
									display: none;
								}
							}

							.sp-use {
								display: none;

								@media screen and (max-width: 520px) {
									display: block;
								}
							}
						}
					}

					.angle {
						width: 36px;
						height: 36px;
						border-radius: 50%;
						background-color: #CB0300;
						color: white;
						font-size: 16px !important;
						line-height: 1 !important;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						vertical-align: top;

						@media screen and (max-width: 520px) {
							width: 32px;
							height: 32px;
						}

						.inner {
							width: 14px;
							overflow: hidden;

							.inner-box {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								padding-bottom: 2px;
								transition: 0.3s;
							}
						}
					}

					@media screen and (min-width: 520px) {
						&:hover {
							opacity: 1;

							.text {
								.inner {
									transform: translateY(-50%);
								}
							}

							.angle {
								.inner {
									.inner-box {
										transform: translateX(100%);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}