@charset "UTF-8";
/* ==========================================================================
   トップページ(Figma VD 7/3 > PC_top 準拠)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	height: 633px;
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figmaの切り抜き位置に合わせる(やや左下寄り) */
	object-position: 60% 68%;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 137px 40px 0 167px;
}

.hero__title {
	font-family: var(--font-hero);
	font-size: 78px;
	font-weight: 600;
	line-height: 91px;
	color: #ffffff;
}

.hero__copy {
	margin-top: 60px;
	font-size: 14px;
	line-height: 38px;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   NEWS
   -------------------------------------------------------------------------- */
.news {
	padding-block: 50px;
}

.news__head {
	position: relative;
}

.news__head .heading-ja {
	font-size: 13px;
	line-height: 16px;
}

.news__more {
	position: absolute;
	right: 0;
	bottom: 8px;
	font-family: var(--font-en);
	font-size: 12px;
	color: var(--color-heading);
}

.news__list {
	margin-top: 16px;
	border-top: 1px solid var(--color-heading);
}

.news__item a {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 26px 0 19px;
	border-bottom: 1px solid var(--color-line);
}

.news__date {
	flex: 0 0 89px;
	font-family: var(--font-en);
	font-size: 14px;
	line-height: 17px;
	color: var(--color-heading);
}

.news__badge {
	flex: 0 0 106px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 17px;
	background: var(--color-dark);
	border-radius: 30px;
	font-family: var(--font-en);
	font-size: 11px;
	line-height: 1;
	color: #ffffff;
}

.news__text {
	flex: 1;
	font-size: 14px;
	line-height: 17px;
	color: var(--color-text-sub);
}

/* --------------------------------------------------------------------------
   会社概要 / 採用 2カラムカード
   -------------------------------------------------------------------------- */
.feature-cards {
	display: flex;
	flex-wrap: wrap;
}

/* 背景の白/ダークは全幅で分割したまま、中身は .container のテキストラインに揃える。
   padding の 50% は .feature-cards の幅(=画面幅)に対する割合なので、
   「画面中央から container の内側まで」の距離が求まる。
   広い画面でも NEWS や BUSINESS と左右端が一致し、狭い画面では 40px で下限を打つ */
.feature-card {
	flex: 1 1 50%;
	min-width: 320px;
	padding: 40px 40px 40px max(40px, calc(50% - var(--container-inset)));
	background: #ffffff;
}

.feature-card--dark {
	position: relative;
	padding: 40px max(40px, calc(50% - var(--container-inset))) 40px 40px;
	background: linear-gradient(180deg, rgba(85, 85, 85, 0.9) 0%, rgba(26, 26, 26, 0.9) 100%);
	color: #ffffff;
	overflow: hidden;
}

.feature-card--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/common/bg_texture.jpg") center / cover no-repeat;
	/* Figmaの画像調整(彩度min・露出/コントラスト強め)を再現 */
	filter: grayscale(1) brightness(1.6) contrast(1.4);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.feature-card--dark > * {
	position: relative;
}

.feature-card__img {
	width: 440px;
	max-width: 100%;
	aspect-ratio: 440 / 224;
	object-fit: cover;
}

.feature-card__head {
	margin-top: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-heading);
}

.feature-card--dark .feature-card__head {
	border-bottom-color: #ffffff;
}

.feature-card--dark .heading-en,
.feature-card--dark .heading-ja {
	color: #ffffff;
}

.feature-card__head .heading-ja {
	margin-top: 5px;
}

.feature-card__text {
	margin-top: 32px;
	min-height: 75px;
	font-size: 14px;
	line-height: 25px;
}

.feature-card .btn-outline {
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   BUSINESS 事業紹介
   -------------------------------------------------------------------------- */
.business {
	padding-block: 50px 40px;
}

.business__head .heading-en {
	font-family: var(--font-jp);
	font-size: 40px;
	font-weight: 700;
	line-height: 58px;
	letter-spacing: 0.04em;
	color: var(--color-dark);
}

.business__head .heading-ja {
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	letter-spacing: 0.04em;
	color: var(--color-text-sub);
}

.business__head {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-dark);
}

.business__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 36px;
}

.business-item {
	position: relative;
	padding-top: 50px;
}

.business-item__icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 97px;
	height: 100px;
}

.business-item__body {
	min-height: 214px;
	padding: 80px 24px 24px;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	text-align: center;
}

.business-item__title {
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
	color: var(--color-text-sub);
}

.business-item__text {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
}

.business__more {
	display: flex;
	justify-content: center;
	margin-top: 35px;
}

.btn-business {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 260px;
	height: 48px;
	border: 1px solid var(--color-text-sub);
	border-radius: 4px;
	font-family: "Hiragino Kaku Gothic Pro", var(--font-jp);
	font-size: 16px;
	font-weight: 300;
	color: var(--color-text-sub);
}

/* 右向きシェブロン(細い線) */
.btn-business::after {
	content: "";
	width: 6px;
	height: 11px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23333333' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.hero {
		height: auto;
		min-height: 560px;
	}

	.hero__inner {
		padding: 150px 24px 64px;
	}

	.hero__title {
		font-size: clamp(40px, 7.2vw, 78px);
		line-height: 1.17;
	}

	.hero__copy {
		margin-top: 40px;
		line-height: 2.2;
	}

	/* PCではテキスト側に大きな内側余白を取っているが、幅が縮むと窮屈になるため均等に */
	.feature-card,
	.feature-card--dark {
		padding: 40px 24px;
	}

	.business__head .heading-en {
		font-size: 32px;
		line-height: 1.4;
	}
}

@media (max-width: 768px) {
	.hero {
		min-height: 0;
		height: auto;
	}

	.hero__inner {
		padding: 120px 20px 56px;
	}

	.hero__title {
		font-size: 40px;
		line-height: 1.2;
	}

	.hero__copy {
		margin-top: 28px;
		font-size: 13px;
		line-height: 2;
	}

	.news {
		padding-block: 40px;
	}

	/* 日付+カテゴリを1行目、本文を2行目に折り返す */
	.news__item a {
		flex-wrap: wrap;
		gap: 10px;
		padding: 20px 0 18px;
	}

	.news__text {
		flex-basis: 100%;
		line-height: 1.6;
	}

	.news__more {
		font-size: 11px;
	}

	/* 2カラムカード → 1カラム */
	.feature-card,
	.feature-card--dark {
		flex: 0 0 100%;
		min-width: 0;
		padding: 32px 20px;
	}

	.feature-card__img {
		width: 100%;
	}

	.feature-card__text {
		min-height: 0;
		line-height: 1.9;
	}

	.feature-card__head,
	.feature-card__text,
	.feature-card .btn-outline {
		margin-top: 24px;
	}

	.business {
		padding-block: 40px 32px;
	}

	.business__head .heading-en {
		font-size: 26px;
	}

	.business__head .heading-ja {
		font-size: 14px;
		line-height: 1.6;
	}

	.business__list {
		gap: 16px;
		margin-top: 28px;
	}

	.business-item__body {
		min-height: 0;
		padding: 72px 16px 24px;
	}
}

@media (max-width: 600px) {
	.business__list {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.hero__inner {
		padding: 104px 16px 48px;
	}

	.hero__title {
		font-size: 32px;
	}

	/* 日付・カテゴリだけで1行が埋まらないよう詰める */
	.news__date {
		flex-basis: 78px;
		font-size: 13px;
	}

	.news__badge {
		flex-basis: 92px;
		font-size: 10px;
	}

	.btn-business {
		width: 100%;
		min-width: 0;
	}
}