#front_page {
	.main_visual {
		margin-top: 0;
		margin-inline: 1em;
		background-image: url(../images/front-page/main-visual.avif);
		background-size: cover;
		background-position: center;
		aspect-ratio: 1384 / 565;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 0.5em;
		border-radius: 1em;
		box-sizing: border-box;
		padding-bottom: 1em;
		img {
			display: inline-block;
			background-color: #fff;
			padding: 0.5em 1em;
		}
		.text_1 {
			width: calc(432 / 1384 * 100%);
		}
		.text_2 {
			width: calc(768 / 1384 * 100%);
		}
	}
	.top_section {
		background-image: url(../images/front-page/bg.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center bottom;
	}
	#about_us {
		max-width: var(--small-width);
		padding: 5em 1em;
		margin-inline: auto;
		.intro {
			font-size: calc(22 * var(--px));
			line-height: 1.8em;
			font-weight: bold;
		}
		.content {
			display: flex;
			gap: 2em;
		}
		.description {
			flex: 1;
			line-height: 1.8em;
		}
		.image {
			flex: 1;
		}
		.link {
			margin-top: 3em;
			a {
				display: inline-flex;
				gap: 2em;
				align-items: center;
				justify-content: center;
				color: #fff;
				text-decoration: none;
				border-radius: 9999px;
				background-color: var(--accent-color);
				padding: 1em 1.5em;
				line-height: 1em;
				&::after {
					content: '';
					background-image: url("../images/front-page/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 1em;
					height: 1em;
				}
				&:hover {
					background-color: var(--accent-color-hover);
				}
			}
		}
	}
	#support {
		background-color: #f6f6f9;
		padding: 3em 3em 5em;
		.title {
			text-align: center;
			font-size: calc(26 * var(--px));
			color: var(--main-color);
			padding-inline: 1em;
		}
		.intro {
			max-width: 32em;
			font-size: calc(20 * var(--px));
			line-height: 1.8em;
			margin-inline: auto;
			padding-inline: 1em;
		}
		.steps {
			max-width: var(--content-width);
			margin-inline: auto;
			padding-inline: 1em;
			display: flex;
			gap: 1em;
			margin-top: 6em;
		}
		section {
			background-color: #fff;
			padding: 2em;
			position: relative;
			flex: 1;
			&:nth-of-type(2) {
				transform: translateY(1em);
			}
			&:nth-of-type(3) {
				transform: translateY(2em);
			}
		}
		.number {
			position: absolute;
			top: 0;
			left: 0;
			font-size: calc(64 * var(--px));
			padding: 0.05em 0.3em;
			font-family: "Lato", sans-serif;
			font-weight: 900;
			margin: 0;
			background-color: #fff;
			color: var(--main-color);
			transform: translateY(-50%);
		}
		.image {
			border-radius: 0.5em;
			overflow: hidden;
			img {
				width: 100%;
				height: auto;
			}
		}
		.step_title {
			color: var(--main-color);
			font-size: calc(24 * var(--px));
			line-height: 1.8em;
		}
		.description {
			line-height: 1.8em;
		}
	}
	#service {
		padding-inline: 1em;
		margin: 5em auto;
		max-width: var(--content-width);
		box-sizing: border-box;
		background-color: var(--main-color);
		border-radius: 0.5em;
		padding: 3em;
		.container {
			margin-inline: auto;
			box-sizing: border-box;
			max-width: var(--content-width2);
		}
		.section_title {
			.jp {
				color: #fff;
			}
			&::before {
				background: linear-gradient(to right, #009ad2 50%, #fff 50%);
			}
		}
		.intro {
			line-height: 1.8em;
			color: #fff;
		}
		.service_lineup {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2em;
		}
		.item {
			background-color: #fff;
			border-radius: 0.5em;
			padding: 2em;
		}
		.description {
			line-height: 1.8em;
		}
		.title {
			display: flex;
			align-items: center;
			gap: 0.5em;
			margin-top: 0;
			&::before {
				content: '';
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				width: 2em;
				height: 2em;
			}
		}
		.service_1 .title::before {
			background-image: url("../images/front-page/service-1.svg");
		}
		.service_2 .title::before {
			background-image: url("../images/front-page/service-2.svg");
		}
		.service_3 .title::before {
			background-image: url("../images/front-page/service-3.svg");
		}
		.service_4 .title::before {
			background-image: url("../images/front-page/service-4.svg");
		}
		.link {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 0;
			a {
				text-align: center;
				background-color: var(--accent-color);
				color: #fff;
				display: flex;
				gap: 2em;
				text-decoration: none;
				align-items: center;
				justify-content: center;
				padding: 1em 1.5em;
				line-height: 1em;
				border-radius: 9999px;
				&::after {
					content: '';
					background-image: url("../images/front-page/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 1em;
					height: 1em;
				}
				&:hover {
					background-color: var(--accent-color-hover);
				}
			}
		}
		.service_5 {
			grid-column: span 2;
			.title::before {
				display: none;
			}
			.other {
				display: flex;
				gap: 2em;
				section {
					flex: 1;
				}
			}
			ul {
				padding-left: 0;
				margin-bottom: 0;
				padding-left: 1em;
				line-height: 1.8em;
			}
			h4 {
				&::before {
					content: '■';
				}
			}
		}
	}
	#flow {
		margin: 5em auto;
		max-width: var(--content-width2);
		padding-inline: 1em;
		.steps {
			display: flex;
			flex-direction: column;
			gap: 2em;
			margin-top: 3em;
		}
		.step {
			display: flex;
			align-items: center;
			position: relative;
			&:last-of-type {
				.number::after {
					display: none;
				}
			}
		}
		.number {
			background-color: var(--accent-color);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 50%;
			width: 5em;
			height: 5em;
			position: static;
			z-index: 2;
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 2.5em;
				height: calc(100% + 2em);
				border-left: 4px solid var(--accent-color);
				z-index: -1;
			}
		}
		.wrap {
			margin-left: -1em;
			flex: 1;
			box-shadow: 0 0 0.5em 0 #0000001a;
			padding: 3em;
			display: flex;
			align-items: center;
		}
		.title {
			display: flex;
			align-items: center;
			font-size: calc(20 * var(--px));
			color: var(--main-color);
			gap: 1em;
			width: 12em;
			line-height: 1.4em;
			margin: 0;
			&::before {
				content: '';
				width: 2em;
				height: 2em;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}
		}
		.description {
			margin: 0;
			line-height: 1.8em;
			flex: 1;
		}
		.step01 .title::before {
			background-image: url("../images/front-page/flow-1.svg");
		}
		.step02 .title::before {
			background-image: url("../images/front-page/flow-2.svg");
		}
		.step03 .title::before {
			background-image: url("../images/front-page/flow-3.svg");
		}
		.step04 .title::before {
			background-image: url("../images/front-page/flow-4.svg");
		}
		.step05 .title::before {
			background-image: url("../images/front-page/flow-5.svg");
		}
	}
	#area {
		background-color: #f6f6f9;
		padding: 3em 1em;
		.container {
			max-width: var(--content-width2);
			margin-inline: auto;
		}
		.content {
			margin-top: 2em;
			padding: 2em;
			background-color: #fff;
			display: flex;
			align-items: center;
			gap: 2em;
		}
		.image {
			flex: 1;
		}
		.wrap {
			flex: 2;
		}
		.message {
			font-size: calc(24 * var(--px));
			font-weight: bold;
			line-height: 1.8em;
		}
		ul {
			display: grid;
			gap: 1em;
			padding-left: 0;
			list-style-type: none;
			margin-top: 2em;
			margin-bottom: 2em;
			margin-right: 3em;
			grid-template-columns: repeat(6, 1fr);
		}
		.more {
			line-height: 1.8em;
		}
	}
	#voices {
		margin-top: 5em;
		background-color: #f6f6f9;
		padding: 3em 1em;
		.container {
			max-width: var(--content-width2);
			margin-inline: auto;
		}
		.intro {
			line-height: 1.8em;
		}
		.items {
			list-style-type: none;
			padding-left: 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1em;
			margin-top: 2em;
		}
		.item {
			background-color: #fff;
			border-radius: 0.5em;
			padding: 2em;
		}
		.thumbnail {
			margin-top: 0;
			a {
				&:hover {
					opacity: 0.8;
				}
			}
		}
		.name {
			color: var(--main-color);
			font-weight: bold;
		}
		.title {
			line-height: 1.8em;
			margin-bottom: 0;
			a {
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.more {
			display: flex;
			justify-content: center;
			margin-top: 3em;
			margin-bottom: 0;
			a {
				text-align: center;
				background-color: var(--accent-color);
				color: #fff;
				display: flex;
				gap: 2em;
				text-decoration: none;
				align-items: center;
				justify-content: center;
				padding: 1em 1.5em;
				line-height: 1em;
				border-radius: 9999px;
				&::after {
					content: '';
					background-image: url("../images/front-page/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 1em;
					height: 1em;
				}
				&:hover {
					background-color: var(--accent-color-hover);
				}
			}
		}
	}
	#news {
		max-width: 874px;
		padding-inline: 1em;
		margin: 5em auto;
		.intro {
			margin-top: 2em;
			line-height: 1.8em;
		}
		.items {
			list-style-type: none;
			padding-left: 0;
			margin-top: 3em;
			display: flex;
			flex-direction: column;
			gap: 2em;
		}
		.item {
			display: flex;
			border-bottom: 1px solid #d7d7d7;
			padding-bottom: 2em;
			line-height: 1.8em;
		}
		time {
			width: 7em;
		}
		.title {
			flex: 1;
			margin: 0;
			font-weight: bold;
			a {
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.more {
			display: flex;
			justify-content: center;
			margin-top: 3em;
			margin-bottom: 0;
			a {
				text-align: center;
				background-color: var(--accent-color);
				color: #fff;
				display: flex;
				gap: 2em;
				text-decoration: none;
				align-items: center;
				justify-content: center;
				padding: 1em 1.5em;
				line-height: 1em;
				border-radius: 9999px;
				&::after {
					content: '';
					background-image: url("../images/front-page/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 1em;
					height: 1em;
				}
				&:hover {
					background-color: var(--accent-color-hover);
				}
			}
		}
	}
	#staff {
		margin-top: 5em;
		background-color: var(--main-color);
		padding: 3em 1em;
		box-sizing: border-box;
		margin-inline: auto;
		max-width: var(--content-width);
		border-radius: 1em;
		.section_title {
			.jp {
				color: #fff;
			}
			&::before {
				background: linear-gradient(to right, #009ad2 50%, #fff 50%);
			}
		}
		.container {
			max-width: var(--content-width2);
			margin-inline: auto;
		}
		.intro {
			line-height: 1.8em;
			color: #fff;
		}
		.items {
			list-style-type: none;
			padding-left: 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1em;
		}
		.item {
			background-color: #fff;
			border-radius: 0.5em;
			margin-top: 2em;
			overflow: hidden;
			padding-bottom: 1em;
		}
		.thumbnail {
			margin-top: 0;
		}
		.staff_name {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 1em;
			margin-inline: 1em;
		}
		.name {
			color: var(--main-color);
			font-weight: bold;
			font-size: calc(22 * var(--px));
			margin: 0;
		}
		.position {
			font-size: calc(16 * var(--px));
			color: #7b7b7b;
			margin: 0;
		}
		.description {
			line-height: 1.8em;
			margin-bottom: 0;
			margin-inline: 1em;
		}
		.more {
			display: flex;
			justify-content: center;
			margin-top: 3em;
			margin-bottom: 0;
			a {
				text-align: center;
				background-color: var(--accent-color);
				color: #fff;
				display: flex;
				gap: 2em;
				text-decoration: none;
				align-items: center;
				justify-content: center;
				padding: 1em 1.5em;
				line-height: 1em;
				border-radius: 9999px;
				&::after {
					content: '';
					background-image: url("../images/front-page/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					width: 1em;
					height: 1em;
				}
			}
		}
	}
	#company {
		margin: 5em auto;
		padding-inline: 1em;
		max-width: var(--content-width2);
		.container {
			display: flex;
			gap: 2em;
			margin-top: 2em;
		}
		.text {
			flex: 1.5;
		}
		.map {
			margin: 0;
			flex: 2;
			iframe {
				width: 100%;
			}
		}
		dl {
			margin: 2em 1em 0;
			line-height: 1.8em;
			display: grid;
			grid-template-columns: 6em 1fr;
			gap: 1em;
		}
		dd {
			margin-left: 0;
			span {
				font-size: calc(15 * var(--px));
			}
		}
	}
	#recruit {
		padding: 5em 1em;
		background-color: #f6f6f9;
		.container {
			display: flex;
			align-items: center;
			gap: 3em;
			max-width: var(--content-width);
			margin-inline: auto;
		}
		.image {
			flex: 1;
			img {
				width: 100%;
				height: auto;
			}
		}
		.wrap {
			flex: 1;
		}
		.intro {
			line-height: 1.8em;
		}
		.content {
			background-color: #fff;
			border-radius: 0.5em;
			padding: 2em;
			margin-top: 3em;
			display: flex;
			flex-direction: column;
			gap: 2em;
		}
		section {
			padding: 2em;
			padding-top: 0;
			border-bottom: 1px solid #f6f6f9;
			&:last-of-type {
				padding-bottom: 0;
				border: none;
			}
		}
		.title {
			color: var(--main-color);
		}
		dl {
			display: grid;
			grid-template-columns: 6em 1fr;
			line-height: 1.8em;
			gap: 0.5em;
			margin-top: 2em;
		}
		dt {
			font-weight: bold;
		}
		dd {
			margin-left: 0;
		}
		.notice {
			margin-inline: 2em;
			font-size: calc(16 * var(--px));
			line-height: 1.8em;
		}
	}
	#contact {
		margin: 5em 1em;
		text-align: center;
		.section_title {
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			padding-bottom: 1.5em;
			margin-bottom: 3em;
			&::before {
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.jp {
				order: 2;
				margin: 0;
			}
			.en {
				order: 1;
				margin: 0;
			}
		}
		.message {
			text-align: center;
			line-height: 1.8em;
		}
		.wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 3em;
			margin-top: 5em;
		}
		address {
			font-style: normal;
		}
		.tel {
			font-size: calc(40 * var(--px));
			font-family: "Lato", sans-serif;
			font-weight: 900;
			letter-spacing: 0.05em;
			margin: 0;
			a {
				display: flex;
				align-items: center;
				gap: 0.5em;
				text-decoration: none;
				color: var(--main-color);
				&:hover {
					opacity: 0.8;
				}
			}
			img {
				width: 0.8em;
				height: 0.8em;
			}
		}
		.hours {
			font-size: calc(14 * var(--px));
		}
		.mail {
			margin: 0;
			a {
				padding: 1.5em 4em;
				background-color: #ff781d;
				color: #fff;
				text-decoration: none;
				text-align: center;
				display: block;
				position: relative;
				font-size: calc(28 * var(--px));
				border-radius: 0.5em;
				font-weight: bold;
				&::after {
					position: absolute;
					top: 50%;
					right: 1em;
					transform: translateY(-50%);
					content: '';
					width: 0.8em;
					height: 0.8em;
					background-image: url("../images/header/arrow.svg");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
				&:hover {
					background-color: var(--accent-color-hover);
				}
			}
			img {
				position: absolute;
				width: 2em;
				height: 2em;
				top: 50%;
				left: 1em;
				transform: translateY(-50%);
			}
			span {
				display: block;
				line-height: 1.4em;
			}
		}
	}
}