/* Section Styles */
.section-header {
	margin-bottom: 88px;
}

.section-header h2 {
	font-size: 6rem;
	font-weight: 700;
	color: var(--main-color);
}

.section-header p {
	font-weight: 500;
	margin-bottom: 0;
}

section:not(#contact) h3 {
	font-weight: 500;
	font-size: 2.5rem;
	display: flex;
	align-items: center;
	gap: 22px;
}

section:not(#contact) h3::before {
	content: '';
	background-color: var(--link-color);
	width: 5px;
	height: 38px;
	display: block;
}

/* Hero Section */
.hero {
	position: relative;
}

.hero-images {
	position: relative;
}

.main-image {
	position: relative;
	height: 835px;
	overflow: hidden;
}

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

.hero-text {
	position: absolute;
	bottom: 35px;
	left: 60px;
}

.hero-text .line:first-of-type p {
	font-size: 3rem;
}

.hero-text p {
	color: var(--main-color);
	background-color: #fff;
	padding: 16px 16px 16px 30px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

/* message Section */
#message {
	padding: 85px 0 105px;
}

.message-catch {
	font-size: 64px;
	color: var(--main-color);
	margin-bottom: 56px;
}

.message-text {
	max-width: 778px;
}

.message-text p {
	margin-bottom: 1rem;
}

.message-text p span {
	color: var(--main-color);
}

/* Company Section */
.greeting h3 {
	margin-bottom: 1.25rem;
}

.greeting-text {
	padding: 3rem;
	background-color: var(--light-background);
}


.philosophy-item {
	padding: 2rem 3rem;
	background-color: var(--light-background);
}

.philosophy-item p {
	margin-bottom: -.5rem;
}

.philosophy-item h4 {
	color: var(--main-color);
	font-size: 3rem;
	font-weight: 700;
}

.company-profile {
	padding-top: 430px;
	padding-bottom: 330px;
}

.company-profile .container,
.company-history .container {
	background-color: #FCFAFA;
	padding: 96px 0 208px;
}

.company-profile h3 {
	margin-bottom: 30px;
}

#company table {
	width: 100%;
	border-collapse: collapse;
}

#company table th,
#company table td {
	padding: 30px 0;

}

#company table th {
	width: 220px;
	text-align: center;
	font-weight: 700;
	border-bottom: 1px solid #A1A1A1;
}

#company table td {
	padding-left: 6rem;
	border-bottom: 1px solid #ddd;
}

#company table tr:last-of-type th,
#company table tr:last-of-type td {
	border-bottom: none;
}

/* セクション背景の設定 */
#message,
#works,
#recruit,
#contact {
	background-color: #FCFAFA;
	position: relative;
	z-index: 1;
}

.company-section {
	position: relative;
	overflow: hidden;
}

.company-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/company_bg.svg');
	background-size: 1300px;
	background-position: right top;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* コンテンツを背景の上に配置 */
.company-section .container,
.company-section .greeting,
.company-section .philosophy,
.company-section .company-profile,
.company-section .company-history {
	position: relative;
	z-index: 10;
}


/* Works Section */
#works {
	padding: 85px 0;
}

#works .container {
	margin-bottom: 7rem;
}

.works-section {
	background-color: #f9f9f9;
}

.works-content {
	list-style: disc;
	padding: 2rem;
	border-radius: 4px;
	background-color: #fff;
	margin-bottom: 1.5rem;
}

.works-content li {
	margin-left: 20px;
}

.works-content li:first-child {
	margin-bottom: 1rem;
}

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

/* Recruit Section */
#recruit {
	padding: 87px 0 128px;
}

#recruit h3 {
	margin-bottom: 4.5rem;
}

.recruit-catch {
	font-size: 2rem;
	color: var(--main-color);
	margin-bottom: 2rem;
}

.recruit-text {
	max-width: 600px;
	padding-bottom: 316px;
}

#recruit img {
	width: clamp(768px, 60%, 1184px);
}

.recruit-text span {
	color: var(--main-color);
	font-weight: 700;
}

.recruit-info table {
	background: #fff;
	width: 100%;
}

.recruit-info table th,
.recruit-info table td {
	vertical-align: top;
	padding: 2rem 0;
}

.recruit-info table th {
	border-bottom: 1px solid #a1a1a1;
	width: 220px;
	text-align: center;
}

.recruit-info table td {
	border-bottom: 1px solid #ccc;
	padding-left: 6rem;
}
.recruit-info table a {
	text-decoration: underline;
	color: var(--link-color);
}

/* Contact Section */
#contact h2 {
	font-weight: 500;
	font-size: 2.5rem;
	display: flex;
	align-items: center;
	gap: 22px;
	color: #fff;
	margin-bottom: calc(2.5rem + .75rem);
}

#contact h2::before {
	content: '';
	background-color: #fff;
	width: 5px;
	height: 38px;
	display: block;
}

#contact .contact-button p {
	margin-bottom: 0;
}

#contact .contact-button p:first-of-type {
	color: var(--link-color);
}

#contact .tel_button p {
	font-size: 2.25rem;
}

#contact .mail-button {
	font-size: 1.5rem;
}

#contact .mail-button:hover,
#contact .mail-button:hover>div {
	background-color: var(--link-color);
	color: #fff;
}

#contact .mail-button:hover p:first-of-type {
	color: #fff;
}

/* Responsive Styles */
@media (max-width: 1280px) {
	.hero-text {
		left: 0;
		bottom: 20px;
	}

	#message .container {
		background-color: rgb(255 255 255 / 60%);
	}

	#company table tr:last-of-type th {
		border-bottom: 1px solid #A1A1A1;
	}

	#company table tr:last-of-type td {
		border-bottom: 1px solid #ddd;
	}

	#works .container {
		margin-bottom: 3rem;
	}
}

@media (max-width: 1024px) {
	#message {
		background-size: 60%;
	}

	#works {
		padding: 85px 0 0;
	}

	.company-profile .container,
	.company-history .container {
		padding: 0;
	}

	.recruit-info table {
		background: var(--light-background);
	}

	.recruit-text {
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	.company-bg {
		display: none;
	}

	.section-header {
		margin-bottom: 46px;
	}

	.section-header h2 {
		font-size: 3rem;
	}

	section:not(#contact) h3 {
		font-size: 2rem;
	}

	.main-image {
		height: 80vh;
	}

	.hero-text .line:first-of-type p {
		font-size: 1.25rem;
	}

	.hero-text .line:last-of-type p {
		font-size: 1rem;
	}

	.message-catch {
		font-size: 2.5rem;
	}

	.greeting-text {
		padding: 1rem;
	}

	.philosophy-item {
		padding: 0;
	}

	.company-profile {
		padding-top: 0;
		padding-bottom: 0;
	}

	#company table th,
	#company table td {
		display: block;
		width: 100%;
		text-align: left;
	}

	#company table th {
		padding: 24px 0 12px;
	}

	#company table td {
		padding-left: 0;
		padding: 12px 0;
		margin-bottom: 12px;
	}

	#recruit h3 {
		margin-bottom: 2.5rem;
	}

	.recruit-catch {
		font-size: 1.75rem;
	}

	.recruit-info table th,
	.recruit-info table td {
		display: block;
		width: 100%;
		text-align: left;
	}

	.recruit-info table td {
		padding-left: 0;
	}

	#recruit img {
		width: 100%;
		margin-bottom: 3rem;
	}

	.contact-buttons {
		flex-direction: column;
		align-items: center;
	}

	#contact .mail-button p:not(.font-bold) {
		font-size: 1rem;
	}
}


/* アニメーション追加 */
.hero-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* 各行（白背景バー） */
.line {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

/* 白いバー */
.line::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0%;
	height: 100%;
	background: white;
	z-index: 1;
	transition: width 1.2s ease;
}

/* テキスト本体 */
.line p {
	opacity: 0;
	position: relative;
	z-index: 2;
	transition: opacity 0.6s ease;
}

/* アクティブ時にバーを右に伸ばす */
.line.active::before {
	width: 100%;
}

/* バーのアニメーション後に文字を表示 */
.line.show-text p {
	opacity: 1;
}

/* fade-upを追加すると下からふわっと表示 */
.fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-up.active {
	opacity: 1;
	transform: translateY(0);
}

/* blurを追加するとモヤモヤっと表示 */
.blur {
	filter: blur(5px);
	opacity: 0;
	transition: filter 1s ease, opacity .6s ease;
}

.blur.active {
	filter: blur(0);
	opacity: 1;
}

/* .slide-in.slide-in-を追加すると左右から表示 */
.slide-in.slide-in-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.8s ease;
}

.slide-in.slide-in-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.8s ease;
}

.slide-in.active {
	opacity: 1;
	transform: translateX(0);
}