#front_page {
	.main_visual {
		margin-top: 0;
		img {
			width: 100%;
			height: auto;
		}
	}
	#about_us {
		.section_title {
			background-image: url("../images/front-page/section_title.webp");
			background-size: cover;
			background-position: center;
			aspect-ratio: 2000 / 394;
			text-align: center;
			display: flex;
			flex-direction: column;
			place-content: center;
			gap: 1vw;
			.en_title {
				margin: 0;
				color: var(--theme-color);
				font-size: 2vw;
				font-family: 'Montserrat', sans-serif;
				font-weight: 500;
				letter-spacing: 0.05em;
			}
			.jp_title {
				margin: 0;
				font-size: 4vw;
			}
		}
		.section_content {
			max-width: var(--content-width);
			margin-left: auto;
			margin-right: auto;
			padding-right: 1em;
			padding-left: 1em;
			display: flex;
			gap: 2em;
			align-items: center;
			.origin {
				flex: 1;
				text-align: center;
				.title {
					margin: 0;
					font-size: calc(20 / var(--root-font-size) * 1rem);
					margin-bottom: 1em;
				}
				.image {
					margin: 0;
				}
			}
			.text {
				line-height: 1.8em;
				flex: 1.5;
			}
		}
	}
	.section_title_common {
		border-top: 5px solid var(--theme-color);
		background-color: #E7E7E7;
		margin-bottom: 10px;
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 2em;
		&:after {
			content: '';
			position: absolute;
			top: 100%;
			left: 0;
			display: block;
			width: 100%;
			border-bottom: 10px solid rgba(215, 218, 238, 0.2);
		}
		.en_title {
			background-color: var(--theme-color);
			padding: 0.5em 2em;
			color: #fff;
			font-size: calc(14 / var(--root-font-size) * 1rem);
			font-family: 'Montserrat', sans-serif;
			margin: 0;
			position: relative;
			line-height: 1em;
			&:after {
				content: '';
				position: absolute;
				border-right: 1em solid transparent;
				border-top: 2em solid var(--theme-color);
				left: 100%;
				top: 0;
			}
		}
		.jp_title {
			margin: 0;
			font-size: calc(35 / var(--root-font-size) * 1rem);
			padding: 0.2em 0;
		}
	}
	#workcase {
		max-width: var(--content-width);
		margin-left: auto;
		margin-right: auto;
		padding-right: 1em;
		padding-left: 1em;
		margin-top: 5em;
		.categories {
			display: flex;
			gap: 2em;
			list-style-type: none;
			padding-left: 0;
			margin-top: 2em;
			li {
				flex: 1;
				padding: 0.5em;
				background-color: var(--theme-color);
				color: #fff;
				text-decoration: none;
				border-radius: 9999px;
				text-align: center;
				position: relative;
				cursor: pointer;
				&:after {
					position: absolute;
					content: '▶';
					right: 1em;
					top: 50%;
					transform: translateY(-50%);
					font-size: calc(14 / var(--root-font-size) * 1rem);
				}
				&.current, &:hover {
					background-color: #5d5d5d;
				}
			}
		}
		.posts {
			display: none;
			&.current {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2em;
				margin-top: 2em;
			}
			.thumbnail {
				margin-top: 0;
				img {
					width: 100%;
					aspect-ratio: 352 / 249;
					object-fit: cover;
					object-position: center;
				}
			}
			.wrap {
				display: flex;
				gap: 1em;
				align-items: center;
				p {
					margin: 0;
				}
				.category {
					font-size: calc(14 / var(--root-font-size) * 1rem);
					padding: 0.5em 1em;
					color: #fff;
				}
			}
			.title {
				line-height: 1.8em;
				font-size: calc(18 / var(--root-font-size) * 1rem);
				a {
					text-decoration: none;
				}
			}
			.excerpt {
				line-height: 1.8em;
			}
		}
		.link {
			display: flex;
			justify-content: center;
			a {
				color: #fff;
				text-decoration: none;
				background-color: #b62715;
				padding: 0.5em 2em;
				display: flex;
				align-items: center;
				gap: 1em;
				&:after {
					content: '→';
				}
			}
		}
	}
	.contact {
		margin-top: 5em;
		margin-left: auto;
		margin-right: auto;
		max-width: var(--content-width);
		padding-left: 1em;
		padding-right: 1em;
		.bg {
			overflow: hidden;
			border-radius: 1em;
			background-image: url("../images/front-page/contact.webp");
			background-size: cover;
			background-position: center;
			display: flex;
		}
		.container {
			background-color: var(--theme-color);
			padding: 2em;
			color: #fff;
			clip-path: circle(105% at -5% 50%);
		}
		.section_title {
			.en_title {
				margin: 0;
				font-size: calc(14 / var(--root-font-size) * 1rem);
				font-family: 'Montserrat', sans-serif;
				margin-left: 1em;
			}
			.jp_title {
				margin-top: 0.5em;
				font-size: calc(35 / var(--root-font-size) * 1rem);
			}
		}
		.catchcopy {
			font-size: calc(20 / var(--root-font-size) * 1rem);
			line-height: 1.8em;
			font-weight: bold;
		}
		.text {
			line-height: 1.8em;
		}
		.link {
			display: flex;
			a {
				background-color: #fff;
				text-decoration: none;
				color: #b62715;
				padding: 0.5em 2em;
				display: flex;
				align-items: center;
				gap: 1em;
				&:before {
					content: '';
					background-image: url("../images/front-page/contact.svg");
					width: 1.5em;
					height: 1.5em;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}
		}
	}
	#news {
		background-image: url("../images/front-page/news.webp");
		background-size: cover;
		background-position: center;
		margin-top: 5em;
		.container {
			max-width: 988px;
			margin-left: auto;
			margin-right: auto;
			background-color: #fff;
			padding: 5em 4em;
			box-sizing: border-box;
			display: flex;
			gap: 2em;
		}
		.summary {
			flex: 1;
		}
		.section_title {
			.en_title {
				margin: 0;
				font-size: calc(14 / var(--root-font-size) * 1rem);
				font-family: 'Montserrat', sans-serif;
				display: flex;
				gap: 0.5em;
				&:before {
					content: '■';
					color: var(--theme-color);
				}
			}
			.jp_title {
				margin-top: 0.5em;
				font-size: calc(35 / var(--root-font-size) * 1rem);
			}
		}
		.description {
			line-height: 1.8em;
		}
		.link {
			display: flex;
			margin-top: 3em;
			a {
				color: #fff;
				text-decoration: none;
				background-color: #b62715;
				padding: 0.5em 2em;
				display: flex;
				align-items: center;
				gap: 1em;
				&:after {
					content: '→';
				}
			}
		}
		.posts {
			flex: 2;
			border-top: 1px solid #adadad;
			.post {
				border-bottom: 1px solid #adadad;
				padding: 1em 0;
			}
			.wrap {
				display: flex;
				align-items: center;
				gap: 1em;
				p {
					margin: 0;
				}
			}
			.category {
				padding: 0.25em 1em;
				border-radius: 9999px;
				border: 1px solid;
				font-size: calc(10 / var(--root-font-size) * 1rem);
			}
			.title {
				margin-bottom: 0;
				a {
					text-decoration: none;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&:after {
						content: '';
						background-image: url("../images/front-page/arrow.svg");
						width: 1em;
						height: 1em;
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
					}
				}
			}
		}
	}
	#company {
		max-width: var(--content-width);
		margin-left: auto;
		margin-right: auto;
		margin-top: 5em;
		padding-left: 1em;
		padding-right: 1em;
		.intro {
			line-height: 1.8em;
			margin: 2em 0;
		}
		.companies {
			display: flex;
			flex-direction: column;
			gap: 2em;
		}
		.company {
			display: flex;
			gap: 2em;
		}
		.photo {
			margin: 0;
			flex: 1;
		}
		.summary {
			flex: 2;
		}
		.title {
			font-size: calc(20 / var(--root-font-size) * 1rem);
			border-bottom: 1px solid #000;
			padding-bottom: 0.5em;
			margin-top: 0;
		}
		.info {
			display: grid;
			grid-template-columns: 6em 1fr;
			gap: 0.5em 1em;
			line-height: 1.8em;
			flex: 1;
			margin-top: 0;
			margin-bottom: 0;
			dd {
				margin: 0;
			}
		}
		.link {
			text-align: center;
			margin-top: 2em;
			a {
				text-decoration: none;
				border: 1px solid var(--theme-color);
				padding: 0.5em;
				color: var(--theme-color);
				display: block;
			}
		}
		.wrap {
			display: flex;
			align-items: flex-start;
			gap: 2em;
		}
		.logo {
			text-align: center;
			width: 100px;
			margin: 0;
		}
		.more {
			display: flex;
			justify-content: center;
			margin-top: 3em;
			a {
				color: #fff;
				text-decoration: none;
				background-color: #b62715;
				padding: 0.5em 2em;
				display: flex;
				align-items: center;
				gap: 1em;
				&:after {
					content: '→';
				}
			}
		}
	}
	#equipment {
		max-width: var(--content-width);
		margin-left: auto;
		margin-right: auto;
		margin-top: 5em;
		padding-left: 1em;
		padding-right: 1em;
		.intro {
			line-height: 1.8em;
			margin: 2em 0;
		}
		.equipments {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2em;
			p {
				margin: 0;
			}
		}
		.more {
			display: flex;
			justify-content: center;
			margin-top: 3em;
			a {
				color: #fff;
				text-decoration: none;
				background-color: #b62715;
				padding: 0.5em 2em;
				display: flex;
				align-items: center;
				gap: 1em;
				&:after {
					content: '→';
				}
			}
		}
	}
}