/* ==========================================================================
   トップ（Figma front-page.php｜トップ 17:2・SP 236:777）— front-page.php・template-parts/corporate/top-*.php
   - p-section__head: 見出しと説明（またはボタン）の行。会社情報のページでも使う
   - トークンにない Figma の値（140px・96px など）は、そのまま書いてコメントを付ける
   ========================================================================== */

/* ---------- 見出しの行（共通） ---------- */
.p-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2xl);
}

.p-section__lead {
	min-width: 0;
	max-width: 480px;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

/* PC の幅が狭いとき: 説明の文がある行は、見出しの下に説明を置く（ボタンだけの行は横並びのまま） */
@media (min-width: 768px) and (max-width: 1023px) {
	.p-section__head:has(> .p-section__lead) {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-lg);
	}

	.p-section__lead {
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.p-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.p-section__lead {
		max-width: none;
	}
}

/* ==========================================================================
   ヒーロー（p-top-hero 40:682）
   ========================================================================== */
.p-top-hero {
	position: relative;
	height: 900px; /* Figma の値 */
	overflow: hidden;
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	--focus-color: var(--neutral-0);
}

.p-top-hero__photo {
	position: absolute;
	inset: 0 0 0 33.333%; /* 480 / 1440 */
}

.p-top-hero__photo picture {
	display: block;
	height: 100%;
}

.p-top-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(20 33 43 / 0.5), rgb(20 33 43 / 0) 25%, rgb(20 33 43 / 0.4)); /* Figma の値 */
}

/* 試し塗り: カラーの写真に TRUSS ブルーを乗算。写真の 640,150 から 320×340（Figma） */
.p-top-hero__patch {
	position: absolute;
	top: 150px;
	left: 66.667%;
	width: 33.333%;
	height: 340px;
	overflow: hidden;
	animation: p-top-hero-patch 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

.p-top-hero__patch picture {
	display: block;
}

.p-top-hero__patch-photo {
	position: absolute;
	top: -44.118%; /* -150 / 340 */
	left: -200%;
	width: 300%;
	max-width: none;
	height: 264.706%; /* 900 / 340（写真と同じ大きさにそろえる） */
	object-fit: cover;
}

.p-top-hero__patch-paint {
	position: absolute;
	inset: 0;
	background: var(--color-bg-brand);
	mix-blend-mode: multiply;
}

.p-top-hero__patch-label {
	position: absolute;
	top: 427px;
	left: 69.583%; /* 668 / 960 */
	display: flex;
	flex-direction: column;
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	animation: p-top-hero-fade 0.4s ease-out 1.4s both;
}

.p-top-hero__patch-label span + span {
	font: var(--text-en-caption);
	letter-spacing: var(--ls-en-caption);
	color: var(--color-text-on-brand-muted);
}

.p-top-hero__plane {
	position: absolute;
	inset: 0 auto 0 0;
	width: 41.667%; /* 600 / 1440 */
	background: var(--color-bg-brand);
	transform-origin: left center;
	animation: p-top-hero-plane 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.p-top-hero__copy,
.p-top-hero__buttons {
	position: relative;
	z-index: 1;
}

.p-top-hero__content {
	padding-top: 220px; /* Figma の値 */
}

.p-top-hero__catch-en {
	font: var(--text-en-hero);
	letter-spacing: var(--ls-en-hero);
	animation: p-top-hero-rise 0.6s ease-out 0.5s both;
	--rise: 24px;
}

.p-top-hero__catch-jp {
	margin-top: 28px; /* Figma の値 */
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
	animation: p-top-hero-rise 0.5s ease-out 1s both;
}

.p-top-hero__lead {
	margin-top: var(--space-md);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	opacity: 0.9;
	animation: p-top-hero-rise 0.5s ease-out 1.15s both;
}

.p-top-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: 44px; /* Figma の値 */
	animation: p-top-hero-rise 0.5s ease-out 1.3s both;
}

.p-top-hero__news {
	position: absolute;
	top: 778px;
	left: 62.361%; /* 898 / 1440 */
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px; /* Figma の値 */
	max-width: calc(37.639% - var(--space-lg));
	padding: 22px 20px 22px 28px; /* Figma の値 */
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border-radius: 12px; /* Figma の値 */
	animation: p-top-hero-rise 0.5s ease-out 1.5s both;
	--focus-color: var(--color-border-brand);
}

.p-top-hero__news-label {
	flex-shrink: 0; /* 縮めない（幅が狭いと「News」が2行になる）。縮むのは題名（… で省く） */
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-brand);
}

.p-top-hero__news-body {
	display: flex;
	align-items: center;
	gap: 20px; /* Figma の値 */
	min-width: 0;
}

.p-top-hero__news-date {
	flex-shrink: 0;
	font: var(--text-en-date);
	letter-spacing: var(--ls-en-date);
	color: var(--color-text-tertiary);
}

.p-top-hero__news-title {
	overflow: hidden;
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.p-top-hero__news-arrow {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--color-text-brand);
}

@media (hover: hover) {
	.p-top-hero__news:hover .p-top-hero__news-title {
		color: var(--color-text-brand);
	}
}

@keyframes p-top-hero-plane {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes p-top-hero-patch {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0); }
}

@keyframes p-top-hero-rise {
	from {
		opacity: 0;
		transform: translateY(var(--rise, 16px));
	}
}

@keyframes p-top-hero-fade {
	from { opacity: 0; }
}

/* 動きを減らす設定の人には、最初から最後の状態を見せる */
@media (prefers-reduced-motion: reduce) {
	.p-top-hero__patch,
	.p-top-hero__patch-label,
	.p-top-hero__plane,
	.p-top-hero__catch-en,
	.p-top-hero__catch-jp,
	.p-top-hero__lead,
	.p-top-hero__buttons,
	.p-top-hero__news {
		animation: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-hero__catch-en {
		font-size: var(--fs-en-h1);
	}

	.p-top-hero__news {
		top: auto;
		bottom: var(--space-2xl);
		left: auto;
		right: var(--space-2xl);
		max-width: calc(100% - var(--space-2xl) * 2);
	}
}

@media (max-width: 767px) {
	.p-top-hero {
		height: auto;
		padding-bottom: 40px; /* Figma の値 */
	}

	.p-top-hero__photo {
		inset: 0 0 auto;
		height: 400px; /* Figma の値 */
	}

	.p-top-hero__shade {
		background: linear-gradient(to bottom, rgb(21 37 48 / 0.6), rgb(21 37 48 / 0.05) 35%, rgb(21 37 48 / 0.5)); /* Figma の値 */
	}

	/* 写真の 243,96 から 112×120（Figma） */
	.p-top-hero__patch {
		top: 96px;
		left: 64.8%;
		width: 29.867%;
		height: 120px;
	}

	.p-top-hero__patch-photo {
		top: -80%; /* -96 / 120 */
		left: -216.964%; /* -243 / 112 */
		width: 334.821%; /* 375 / 112 */
		height: 333.333%; /* 400 / 120 */
	}

	.p-top-hero__patch-label {
		top: 224px;
		left: 64.8%;
		font-size: 14px; /* Figma の値 */
	}

	.p-top-hero__patch-label span + span {
		font-size: 13px; /* Figma の値 */
	}

	.p-top-hero__plane {
		inset: 400px 0 0;
		width: auto;
	}

	.p-top-hero__content {
		display: flex;
		flex-direction: column;
		gap: 28px; /* Figma の値 */
		padding-top: 342px; /* Figma の値 */
	}

	.p-top-hero__copy {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	.p-top-hero__catch-jp {
		margin-top: 0;
		font: var(--text-h3);
		letter-spacing: var(--ls-h3);
	}

	.p-top-hero__lead {
		margin-top: 0;
	}

	.p-top-hero__buttons {
		flex-direction: column;
		gap: var(--space-sm);
		margin-top: 0;
	}

	.p-top-hero__news {
		position: relative;
		top: auto;
		left: auto;
		gap: var(--space-md);
		max-width: none;
		padding: 14px var(--space-md) 14px var(--space-lg); /* 14 は Figma の値 */
	}

	.p-top-hero__news-body {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px; /* Figma の値 */
	}

	.p-top-hero__news-title {
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
		white-space: normal;
	}
}

/* ==========================================================================
   会社の紹介と数字（p-top-intro 17:66）
   ========================================================================== */
.p-top-intro {
	padding-block: var(--space-7xl);
}

.p-top-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 96px; /* Figma の値 */
}

.p-top-intro__body {
	display: flex;
	gap: 96px; /* Figma の値 */
}

.p-top-intro__head {
	flex: 0 1 640px;
}

.p-top-intro__title {
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}

.p-top-intro__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2xl);
}

.p-top-intro__lead {
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-secondary);
}

.p-top-intro__lead p + p {
	margin-top: 2em; /* 1行あける（Figma） */
}

.p-top-intro__numbers {
	display: flex;
	border-top: 1px solid var(--color-border-default);
	border-bottom: 1px solid var(--color-border-default);
}

.p-top-intro__number {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	padding-block: var(--space-2xl);
}

.p-top-intro__number + .p-top-intro__number {
	padding-left: var(--space-3xl);
	border-left: 1px solid var(--color-border-default);
}

.p-top-intro__number-label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-secondary);
}

.p-top-intro__number-value {
	display: flex;
	align-items: baseline;
	gap: 6px; /* Figma の値 */
	color: var(--color-text-brand);
}

.p-top-intro__number-num {
	font: var(--text-en-number);
	letter-spacing: var(--ls-en-number);
}

.p-top-intro__number-unit {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-top-intro__number-note {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-tertiary);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-intro__body {
		flex-direction: column;
		gap: var(--space-2xl);
	}

	.p-top-intro__head {
		flex-basis: auto;
	}
}

@media (max-width: 767px) {
	.p-top-intro {
		padding-block: var(--space-6xl);
	}

	.p-top-intro__inner {
		gap: var(--space-2xl);
	}

	.p-top-intro__body {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.p-top-intro__head {
		flex-basis: auto;
	}

	.p-top-intro__title {
		font: var(--text-h2);
		letter-spacing: var(--ls-h2);
	}

	.p-top-intro__text {
		gap: var(--space-xl);
	}

	.p-top-intro__numbers {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-md) var(--space-sm);
		border-top: 0;
	}

	/* 下の余白は注記の下の余白（Figma 2xs ＋ sm）を枠に持たせる（注記のない「対応エリア」も同じ余白に） */
	.p-top-intro__number,
	.p-top-intro__number + .p-top-intro__number {
		gap: 6px; /* Figma の値 */
		padding: var(--space-md) 0 calc(var(--space-2xs) + var(--space-sm));
		border-top: 1px solid var(--color-border-default);
		border-left: 0;
	}
}

/* ==========================================================================
   事業内容（p-top-business 21:46）・c-business-card（39:84）
   ========================================================================== */
.p-top-business {
	padding-block: var(--space-7xl);
	background: var(--color-bg-subtle);
	scroll-margin-top: var(--header-height);
}

.p-top-business__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

.p-top-business__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.c-business-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 510px; /* Figma の値 */
	overflow: hidden;
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border-radius: 20px; /* Figma の値 */
}

.c-business-card__media {
	position: relative;
	display: block;
	height: 260px; /* Figma の値 */
	overflow: hidden;
}

.c-business-card__media picture {
	display: block;
	height: 100%;
}

.c-business-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.c-business-card--it .c-business-card__img {
	background: var(--color-bg-canvas);
}

.c-business-card__plane {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: var(--space-md) 28px 14px; /* Figma の値 */
	font: 600 32px / 1.1 var(--font-en); /* Figma の値 */
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: var(--color-business-paint);
}

.c-business-card--care .c-business-card__plane { background: var(--color-business-care); }

.c-business-card--it .c-business-card__plane {
	color: var(--color-text-primary);
	background: var(--color-business-it);
}

.c-business-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px; /* Figma の値 */
	padding: 28px 28px var(--space-xl); /* Figma の値 */
}

.c-business-card__brand {
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-tertiary);
}

.c-business-card--care .c-business-card__brand {
	font-family: var(--font-ja);
}

.c-business-card__head {
	display: flex;
	align-items: center;
	gap: 10px; /* Figma の値 */
}

.c-business-card__dot {
	width: 10px;
	height: 10px;
	background: var(--color-business-paint);
	border-radius: var(--radius-full);
}

.c-business-card--care .c-business-card__dot { background: var(--color-business-care); }
.c-business-card--it .c-business-card__dot { background: var(--color-business-it); }

.c-business-card__name {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.c-business-card__text {
	flex: 1;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.c-business-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding-top: 10px; /* Figma の値 */
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
}

.c-business-card__arrow {
	width: 18px;
	height: 18px;
	transition: transform 0.2s;
}

@media (hover: hover) {
	.c-business-card:hover .c-business-card__img {
		transform: scale(1.04);
	}

	.c-business-card:hover .c-business-card__arrow {
		transform: translateX(3px);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.p-top-business__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}
}

@media (max-width: 767px) {
	.p-top-business {
		padding-block: var(--space-6xl);
	}

	.p-top-business__inner {
		gap: var(--space-2xl);
	}

	.p-top-business__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-md);
	}

	.c-business-card__brand {
		font-size: var(--fs-en-date);
	}

	.c-business-card__name {
		font: var(--text-h4);
	}

	.c-business-card__text {
		font: var(--text-body-s);
	}
}

/* 幅がとても狭いとき（320px など）は、写真の下の帯の英字を小さく（32px のままでは「Paint & Waterproof」がカードの幅より 5px 広かった。2026-10-05） */
@media (max-width: 359px) {
	.c-business-card__plane {
		padding-inline: 20px;
		font-size: 28px;
	}
}

/* ==========================================================================
   お悩みから探す（p-top-worries 40:759）
   ========================================================================== */
.p-top-worries {
	padding-block: 140px; /* Figma の値 */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	--focus-color: var(--neutral-0);
}

.p-top-worries__inner {
	display: flex;
	flex-direction: column;
	gap: 56px; /* Figma の値 */
}

.p-top-worries__lead {
	max-width: none;
	color: var(--color-text-on-brand);
}

.p-top-worries__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

.p-top-worries__item {
	display: flex;
	align-items: center;
	gap: 20px; /* Figma の値 */
	height: 100%;
	min-height: 124px; /* Figma の値 */
	padding: 26px var(--space-lg); /* 26 は Figma の値 */
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-lg);
	--focus-color: var(--neutral-0);
}

.p-top-worries__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	font-size: 26px; /* アイコンの大きさ */
	color: var(--color-text-brand);
	background: var(--color-bg-muted);
	border-radius: 12px; /* Figma の値 */
}

.p-top-worries__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px; /* Figma の値 */
	min-width: 0;
}

.p-top-worries__title {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	word-break: keep-all; /* 折り返すのは <br> と <wbr> の所だけ（top-worries.php。SP で「気に／なる」と切れないように） */
}

.p-top-worries__to {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	gap: 6px; /* Figma の値 */
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
}

.p-top-worries__dot {
	width: 8px;
	height: 8px;
	background: var(--color-business-paint);
	border-radius: var(--radius-full);
}

.p-top-worries__dot--care { background: var(--color-business-care); }
.p-top-worries__dot--it { background: var(--color-business-it); }

.p-top-worries__arrow {
	width: 20px;
	height: 20px;
	color: var(--color-text-brand);
	transition: transform 0.2s;
}

@media (hover: hover) {
	.p-top-worries__item:hover .p-top-worries__title {
		color: var(--color-text-brand);
	}

	.p-top-worries__item:hover .p-top-worries__arrow {
		transform: translateX(3px);
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-worries__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-top-worries {
		padding-block: var(--space-6xl);
	}

	.p-top-worries__inner {
		gap: var(--space-2xl);
	}

	.p-top-worries__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md) var(--space-sm);
	}

	.p-top-worries__item {
		position: relative;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
		min-height: 0;
		padding: var(--space-md) var(--space-sm); /* Figma は左右 14。文字が1字はみ出して折り返すので 12 に */
	}

	.p-top-worries__icon {
		width: 44px;
		height: 44px;
	}

	.p-top-worries__title {
		font: var(--text-label-m);
		letter-spacing: var(--ls-label-m);
	}

	.p-top-worries__to {
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
	}

	.p-top-worries__arrow {
		position: absolute;
		top: 28px; /* Figma の値 */
		right: 14px; /* Figma の値 */
	}
}

/* 幅の狭い SP（360px 未満）では、行き先の名前も折り返す（<wbr> の所で「介護保険／リフォーム」。「リフォ／ーム」と切れないように） */
@media (max-width: 359px) {
	.p-top-worries__to {
		white-space: normal;
	}

	.p-top-worries__to-name {
		word-break: keep-all;
	}
}

/* ==========================================================================
   TRUSS の強み（p-top-strength 21:132）
   - 円の図は 500×500（SP 335×335）。工程の名前などの位置は図の大きさに対する %
   ========================================================================== */
.p-top-strength {
	padding-block: var(--space-7xl);
}

.p-top-strength__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5xl);
}

.p-top-strength__body {
	display: flex;
	align-items: center;
	gap: var(--space-5xl);
}

.p-top-strength__cycle {
	position: relative;
	flex-shrink: 0;
	width: 500px;
	max-width: 100%;
	aspect-ratio: 1;
	color: var(--color-text-on-brand);
}

.p-top-strength__photo,
.p-top-strength__photo-tint {
	position: absolute;
	top: 19.464%;
	left: 19.464%;
	width: 61.071%;
	height: 61.071%;
	border-radius: var(--radius-full);
}

.p-top-strength__photo {
	object-fit: cover;
}

.p-top-strength__photo-tint {
	background: var(--color-bg-brand);
	opacity: 0.82;
}

.p-top-strength__ring {
	position: absolute;
	inset: 1.786%;
}

.p-top-strength__step {
	position: absolute;
}

.p-top-strength__step picture,
.p-top-strength__step img {
	display: block;
	width: 100%;
	height: 100%;
}

.p-top-strength__step--1 { inset: 0 2.93% 61.81% 51.05%; }
.p-top-strength__step--2 { inset: 35.98% 0 10.45% 71.41%; }
.p-top-strength__step--3 { inset: 78.92% 21.84% 0 21.84%; }
.p-top-strength__step--4 { inset: 35.98% 71.41% 10.45% 0; }
.p-top-strength__step--5 { inset: 0 51.05% 61.81% 2.93%; }

.p-top-strength__step-label {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	white-space: nowrap;
}

.p-top-strength__step-label--1 { top: 13.18%; left: 69.64%; }
.p-top-strength__step-label--2 { top: 59%; left: 82.99%; }
.p-top-strength__step-label--3 { top: 87.32%; left: 44.02%; }
.p-top-strength__step-label--4 { top: 59%; left: 8.08%; }
.p-top-strength__step-label--5 { top: 11.08%; left: 19.91%; }

.p-top-strength__step-num {
	font: 500 12.5px / 1.2 var(--font-en); /* Figma の値（図の中の小さい文字） */
	letter-spacing: 0.04em;
	color: var(--color-text-on-brand-muted);
}

.p-top-strength__step-name {
	font: 700 14.3px / 1.5 var(--font-ja); /* Figma の値 */
	letter-spacing: 0.06em;
}

.p-top-strength__center {
	position: absolute;
	top: 44.02%;
	left: 34.73%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.5px; /* Figma の値 */
	font-weight: 700;
	white-space: nowrap;
}

.p-top-strength__center-title {
	font-size: 23.2px; /* Figma の値 */
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.p-top-strength__center-text {
	font-size: 12.5px; /* Figma の値 */
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.p-top-strength__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xl);
	min-width: 0;
}

.p-top-strength__title {
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
}

.p-top-strength__desc {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-strength__body {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3xl);
	}

	.p-top-strength__cycle {
		align-self: center;
	}
}

@media (max-width: 767px) {
	.p-top-strength {
		padding-block: var(--space-6xl);
	}

	.p-top-strength__inner {
		gap: var(--space-2xl);
	}

	.p-top-strength__body {
		flex-direction: column;
		gap: var(--space-2xl);
	}

	.p-top-strength__cycle {
		width: 335px;
	}

	.p-top-strength__photo,
	.p-top-strength__photo-tint {
		top: 24.355%;
		left: 24.355%;
		width: 51.29%;
		height: 51.29%;
	}

	.p-top-strength__step--1 { inset: 0 2.93% 60.12% 50.9%; }
	.p-top-strength__step--2 { inset: 35.98% 0 10.45% 68.35%; }
	.p-top-strength__step--3 { inset: 74.79% 21.84% 0 21.84%; }
	.p-top-strength__step--4 { inset: 35.98% 68.35% 10.45% 0; }
	.p-top-strength__step--5 { inset: 0 50.9% 60.12% 2.93%; }

	.p-top-strength__step-label--1 { top: 13.41%; left: 66.54%; }
	.p-top-strength__step-label--2 { top: 56.44%; left: 78.51%; }
	.p-top-strength__step-label--3 { top: 83.2%; left: 41.92%; }
	.p-top-strength__step-label--4 { top: 56.49%; left: 9.27%; }
	.p-top-strength__step-label--5 { top: 10.36%; left: 19.23%; }

	.p-top-strength__step-num,
	.p-top-strength__step-name {
		font-size: 13px; /* Figma の値 */
	}

	.p-top-strength__center {
		top: 42.18%;
		left: 29.4%;
		gap: 2.4px; /* Figma の値 */
	}

	.p-top-strength__center-title {
		font-size: 19px; /* Figma の値 */
	}

	.p-top-strength__center-text {
		font-size: 13px; /* Figma の値 */
	}

	.p-top-strength__text {
		gap: 20px; /* Figma の値 */
	}

	.p-top-strength__title {
		font: var(--text-h3);
		letter-spacing: var(--ls-h3);
	}
}

/* ==========================================================================
   施工事例（p-top-works 22:128）
   ========================================================================== */
.p-top-works {
	padding-block: var(--space-7xl);
	background: var(--color-bg-subtle);
}

.p-top-works__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

.p-top-works__lead {
	max-width: 640px;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-top-works__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.p-top-works__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-top-works {
		padding-block: var(--space-6xl);
	}

	.p-top-works__inner {
		gap: var(--space-xl);
	}

	/* 「施工事例をすべて見る」を一覧の下に */
	.p-top-works__head {
		display: contents;
	}

	.p-top-works__more {
		order: 9;
	}

	.p-top-works__list {
		grid-template-columns: minmax(0, 1fr); /* 1fr だとカードの中身の幅より細くならず、Safari で広い幅から縮めると横にはみ出した（2026-10-06） */
		gap: var(--space-xl);
	}
}

/* ==========================================================================
   検討中の方へ（p-top-tools 42:667）・c-tool-card（39:127）
   ========================================================================== */
.p-top-tools {
	padding-block: var(--space-7xl);
	background: var(--color-bg-muted);
}

.p-top-tools__inner {
	display: flex;
	flex-direction: column;
	gap: 56px; /* Figma の値 */
}

.p-top-tools__lead {
	max-width: 540px;
}

.p-top-tools__featured {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-top-tools__feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px; /* Figma の値 */
	min-height: 610px; /* Figma の値（3枚の高さをそろえる） */
	padding: var(--space-2xl);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-xl);
}

.p-top-tools__feature--color {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	--focus-color: var(--neutral-0);
}

.p-top-tools__visual {
	display: block;
	width: 304px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 9.6px; /* Figma の値 */
}

.p-top-tools__visual img {
	width: 100%;
	height: auto;
}

.p-top-tools__title {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-top-tools__text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-top-tools__feature--color .p-top-tools__text {
	color: var(--color-text-on-brand);
}

.p-top-tools__spacer {
	flex: 1;
}

.p-top-tools__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-lg);
}

.c-tool-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: var(--space-xl) var(--space-xl) 28px; /* 28 は Figma の値 */
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-default);
	border-radius: 20px; /* Figma の値 */
}

.c-tool-card__content {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の値 */
	padding-bottom: 20px; /* Figma の値 */
}

.c-tool-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
}

.c-tool-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	font-size: 28px; /* アイコンの大きさ */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: 14px; /* Figma の値 */
}

.c-tool-card--care .c-tool-card__icon {
	background: var(--color-business-care);
}

.c-tool-card__time {
	display: inline-flex;
	align-items: center;
	gap: 6px; /* Figma の値 */
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-brand);
	white-space: nowrap;
	background: var(--color-bg-muted);
	border-radius: var(--radius-full);
}

.c-tool-card__clock {
	width: 14px;
	height: 14px;
}

.c-tool-card__title {
	min-height: 64px; /* Figma の値（2行ぶん。カードの文の位置をそろえる） */
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	word-break: keep-all; /* 折り返すのは <wbr> の所だけ（「劣化／セルフ診断」。SP の細いカードで「診／断」と1字だけ落ちないように。top-tools.php） */
}

.c-tool-card__text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.c-tool-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
}

.c-tool-card__arrow {
	width: 18px;
	height: 18px;
	transition: transform 0.2s;
}

@media (hover: hover) {
	.c-tool-card:hover {
		border-color: var(--color-border-brand);
	}

	.c-tool-card:hover .c-tool-card__arrow {
		transform: translateX(3px);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-tools__featured {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}

	.p-top-tools__feature {
		min-height: 0;
	}

	.p-top-tools__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 3列のカードが Figma（384px）より細い幅: 題名を1段小さく（「カラーシミュレーション」の「ン」だけが2行目に落ちるため） */
@media (min-width: 1200px) and (max-width: 1279px) {
	.p-top-tools__title {
		font: var(--text-h4);
		letter-spacing: var(--ls-h4);
	}
}

@media (max-width: 767px) {
	.p-top-tools {
		padding-block: var(--space-6xl);
	}

	.p-top-tools__inner {
		gap: var(--space-2xl);
	}

	.p-top-tools__featured {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-md);
	}

	.p-top-tools__feature {
		gap: var(--space-md);
		min-height: 0;
		padding: 28px var(--space-xl); /* Figma の値 */
	}

	.p-top-tools__visual {
		width: min(287px, 100%); /* Figma の値（287px）。320px 前後では幅に合わせて縮める */
	}

	.p-top-tools__spacer {
		display: none;
	}

	.p-top-tools__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm);
	}

	.c-tool-card {
		padding: 20px 14px; /* Figma の値 */
	}

	/* 所要時間の札（13px）がアイコンの右に入るように、間と札の左右を詰める。入らない幅（320px など）は下へ折り返す */
	.c-tool-card__top {
		flex-wrap: wrap;
		gap: var(--space-2xs);
	}

	.c-tool-card__time {
		gap: var(--space-2xs);
		padding-inline: var(--space-xs);
	}

	.c-tool-card__title {
		min-height: 0; /* SP は1行の題のカードで文の上が大きく空くので、2行ぶんの最小の高さを外す（2026-10-02 監視役。Figma も SP のバリアントで外す） */
		font: var(--text-label-l);
		font-size: var(--fs-h5);
		line-height: 1.6;
	}
}

/* ==========================================================================
   お客様の声（p-top-voice 22:277）
   ========================================================================== */
.p-top-voice {
	padding: var(--space-7xl) 0 var(--space-4xl);
}

.p-top-voice__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

.p-top-voice__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-top-voice__item {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma の値 */
	min-height: 478px; /* Figma の値（3枚の高さをそろえる） */
	padding: var(--space-2xl) 36px 36px; /* 36 は Figma の値 */
	background: var(--color-bg-subtle);
	border-radius: 20px; /* Figma の値 */
}

.p-top-voice__mark {
	height: 58px; /* 96px × 行の高さ 0.6 */
	font: 600 96px / 0.6 var(--font-en); /* Figma の値 */
	color: var(--color-text-brand);
	opacity: 0.35;
}

.p-top-voice__title {
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-top-voice__text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-top-voice__spacer {
	flex: 1;
}

.p-top-voice__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding-top: 20px; /* Figma の値 */
	border-top: 1px solid var(--color-border-default);
}

.p-top-voice__name {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-voice__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}

	.p-top-voice__item {
		min-height: 0;
	}
}

/* 3列のカードが Figma（384px）より細い幅: 左右の余白と題名を少し小さく（題名の「中を」だけが1行になるため） */
@media (min-width: 1200px) and (max-width: 1279px) {
	.p-top-voice__item {
		padding-inline: 28px;
	}

	.p-top-voice__title {
		font: var(--text-h5);
		letter-spacing: var(--ls-h5);
	}
}

@media (max-width: 767px) {
	.p-top-voice {
		padding-block: var(--space-6xl);
	}

	.p-top-voice__inner {
		gap: var(--space-2xl);
	}

	.p-top-voice__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-md);
	}

	.p-top-voice__item {
		gap: var(--space-md);
		min-height: 0;
		padding: 28px var(--space-xl); /* Figma の値 */
	}

	.p-top-voice__spacer {
		display: none;
	}
}

/* ==========================================================================
   資格・許可と取り扱いメーカー（p-top-trust 43:779）
   ========================================================================== */
.p-top-trust {
	padding: 96px 0 140px; /* Figma の値 */
}

.p-top-trust__inner {
	display: flex;
	flex-direction: column;
	gap: 56px; /* Figma の値 */
}

.p-top-trust__body {
	display: flex;
	align-items: stretch;
	gap: var(--space-3xl);
}

.p-top-trust__licenses {
	flex: 1;
	min-width: 0;
	border-top: 1px solid var(--color-border-default);
}

.p-top-trust__license {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-block: 18px; /* Figma の値 */
	border-bottom: 1px solid var(--color-border-default);
}

.p-top-trust__icon {
	width: 24px;
	height: 24px;
	color: var(--color-text-brand);
}

.p-top-trust__license-name {
	flex: 1;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-top-trust__license-number {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-tertiary);
}

.p-top-trust__makers {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma の値 */
	width: 520px;
	padding: 28px var(--space-xl); /* Figma の値 */
	background: var(--color-bg-subtle);
	border-radius: 20px; /* Figma の値 */
}

.p-top-trust__makers-title {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-secondary);
}

.p-top-trust__maker-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-sm);
}

.p-top-trust__maker {
	display: flex;
	grid-column: span 2;
	align-items: center;
	justify-content: center;
	height: 88px; /* Figma の値 */
	background: var(--color-bg-canvas);
	border-radius: 12px; /* Figma の値 */
}

.p-top-trust__maker--dyflex,
.p-top-trust__maker--sk-kaken {
	grid-column: span 3;
}

.p-top-maker__logo {
	object-fit: contain;
}

.p-top-maker__logo--kikusui { width: 140px; height: 30px; object-fit: cover; }
.p-top-maker__logo--nipponpaint { width: 90px; height: 50px; }
.p-top-maker__logo--daido { width: 150px; height: 30px; }
.p-top-maker__logo--dyflex { width: 56px; height: 56px; }
.p-top-maker__logo--sk-kaken { width: 150px; height: 24px; }

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-trust__body {
		flex-direction: column;
	}

	.p-top-trust__makers {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.p-top-trust {
		padding-block: var(--space-6xl);
	}

	.p-top-trust__inner {
		gap: var(--space-2xl);
	}

	.p-top-trust__body {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.p-top-trust__license {
		display: grid;
		grid-template-columns: 24px 1fr;
		align-items: start;
		gap: 2px var(--space-md);
	}

	.p-top-trust__license .p-top-trust__icon {
		grid-row: span 2;
	}

	.p-top-trust__makers {
		width: 100%;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-lg);
	}

	.p-top-trust__maker-list {
		grid-template-columns: 1fr 1fr;
	}

	.p-top-trust__maker,
	.p-top-trust__maker--dyflex,
	.p-top-trust__maker--sk-kaken {
		grid-column: auto;
		height: 72px; /* Figma の値 */
	}

	.p-top-maker__logo--kikusui { width: 118px; height: 25.3px; }
	.p-top-maker__logo--daido { width: 118px; height: 23.6px; }
	.p-top-maker__logo--sk-kaken { width: 118px; height: 18.9px; }
}

/* ==========================================================================
   スタッフ紹介（p-top-staff 43:821）
   ========================================================================== */
.p-top-staff {
	padding-block: 140px; /* Figma の値 */
	background: var(--color-bg-subtle);
}

.p-top-staff__inner {
	display: flex;
	flex-direction: column;
	gap: 56px; /* Figma の値 */
}

.p-top-staff__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-top-staff__item {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の値 */
}

.p-top-staff__photo {
	display: block;
	height: 260px; /* Figma の値 */
	overflow: hidden;
	background: var(--neutral-200); /* Figma の値 */
	border-radius: var(--radius-lg);
}

.p-top-staff__photo picture {
	display: block;
	height: 100%;
}

.p-top-staff__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: grayscale(1);
}

.p-top-staff__role {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-brand);
}

.p-top-staff__name {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-staff__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-top-staff {
		padding-block: var(--space-6xl);
	}

	.p-top-staff__inner {
		gap: var(--space-2xl);
	}

	.p-top-staff__head {
		display: contents;
	}

	.p-top-staff__more {
		order: 9;
	}

	.p-top-staff__list {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl) var(--space-sm);
	}

	.p-top-staff__photo {
		height: 190px; /* Figma の値 */
	}

	.p-top-staff__role {
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
	}
}

/* ==========================================================================
   お知らせ（p-top-news 23:257）
   ========================================================================== */
.p-top-news {
	padding-block: 140px; /* Figma の値 */
}

.p-top-news__inner {
	display: flex;
	align-items: flex-start;
	gap: 96px; /* Figma の値 */
}

.p-top-news__head {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-2xl);
	width: 300px;
}

.p-top-news__list {
	flex: 1;
	min-width: 0;
	border-top: 1px solid var(--color-border-default);
}

.p-top-news__empty {
	padding-block: 28px; /* Figma の値 */
	color: var(--color-text-secondary);
	border-bottom: 1px solid var(--color-border-default);
}

@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-news__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xl);
	}

	.p-top-news__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		width: auto;
	}
}

@media (max-width: 767px) {
	.p-top-news {
		padding-block: var(--space-6xl);
	}

	.p-top-news__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-xl);
	}

	.p-top-news__head {
		display: contents;
	}

	.p-top-news__more {
		order: 9;
	}
}

/* ==========================================================================
   会社情報と採用情報への入口（p-top-links 23:295）
   ========================================================================== */
.p-top-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	color: var(--color-text-on-brand);
	--focus-color: var(--neutral-0);
}

.p-top-links__item {
	position: relative;
	min-height: 600px; /* Figma の値。文が折り返して入りきらない幅（768〜1023px）では伸ばす（下のリンクが切れないように） */
	overflow: hidden;
	background: var(--color-bg-inverse);
}

.p-top-links__item picture {
	position: absolute;
	inset: 0;
}

.p-top-links__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-links__item--company .p-top-links__photo {
	object-position: center bottom;
}

.p-top-links__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(20 33 43 / 0.15), rgb(20 33 43 / 0.8)); /* Figma の値 */
}

.p-top-links__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 268px var(--space-4xl) var(--space-xl); /* 上は Figma の値（英字の上の位置）。下は伸びたときのあき（1200px 以上は 600px のまま収まる） */
}

/* 英字の後ろの色面（左の端から英字の右まで。Figma の p-top-links__plane） */
.p-top-links__en {
	position: relative;
	z-index: 0;
	font: var(--text-en-h1);
	letter-spacing: var(--ls-en-h1);
}

.p-top-links__en::before {
	position: absolute;
	top: -0.193em;
	right: -0.458em;
	bottom: -0.107em;
	left: calc(var(--space-4xl) * -1);
	z-index: -1;
	content: "";
	background: var(--color-bg-brand);
}

.p-top-links__item--recruit .p-top-links__en::before {
	background: var(--color-action-cta);
}

.p-top-links__text {
	margin-top: var(--space-2xl);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

.p-top-links__catch {
	margin-top: var(--space-2xl);
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}

.p-top-links__item--recruit .c-button {
	margin-top: 28px; /* Figma の値 */
}

.p-top-links__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px; /* Figma の値 */
	margin-top: var(--space-2xl); /* リンクの押せる高さ 44 の中に文字があるので、Figma の 51 から少し詰める */
}

.p-top-links__nav-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.p-top-links__nav-item:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.p-top-links__chevron {
	width: 16px;
	height: 16px;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-top-links__content {
		padding-inline: var(--space-2xl);
	}

	.p-top-links__en::before {
		left: calc(var(--space-2xl) * -1);
	}

	.p-top-links__catch {
		font: var(--text-h2);
	}
}

@media (max-width: 767px) {
	.p-top-links {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}

	.p-top-links__item {
		min-height: 400px; /* Figma の値 */
	}

	.p-top-links__content {
		justify-content: flex-end;
		gap: var(--space-md);
		padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
	}

	.p-top-links__en::before {
		left: calc(var(--space-lg) * -1);
	}

	.p-top-links__text,
	.p-top-links__catch,
	.p-top-links__nav,
	.p-top-links__item--recruit .c-button {
		margin-top: 0;
	}

	.p-top-links__catch {
		font: 700 28px / 1.5 var(--font-ja); /* Figma の値 */
		letter-spacing: var(--ls-h1);
	}

	.p-top-links__nav {
		gap: 0 var(--space-lg);
	}
}

/* ==========================================================================
   SDGs への取り組み（p-top-sdgs 23:332）
   ========================================================================== */
.p-top-sdgs {
	padding-block: 140px; /* Figma の値 */
}

.p-top-sdgs__inner {
	display: flex;
	align-items: center;
	gap: 96px; /* Figma の値 */
}

.p-top-sdgs__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px; /* Figma の値 */
	min-width: 0;
}

.p-top-sdgs__title {
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-top-sdgs__desc {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-top-sdgs__goals {
	display: grid;
	flex-shrink: 0;
	grid-template-columns: repeat(4, 112px);
	gap: var(--space-sm);
}

.p-top-sdgs__img {
	width: 112px;
	height: 112px;
	border-radius: var(--radius-sm);
}

@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-sdgs__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3xl);
	}
}

@media (max-width: 767px) {
	.p-top-sdgs {
		padding-block: var(--space-6xl);
	}

	.p-top-sdgs__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xl);
	}

	.p-top-sdgs__text {
		gap: 20px; /* Figma の値 */
	}

	.p-top-sdgs__goals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.p-top-sdgs__img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* ==========================================================================
   よくある質問（p-top-faq 43:853）
   ========================================================================== */
.p-top-faq {
	padding-block: 140px; /* Figma の値 */
	background: var(--color-bg-subtle);
}

.p-top-faq__inner {
	display: flex;
	align-items: flex-start;
	gap: 96px; /* Figma の値 */
}

.p-top-faq__head {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-xl);
	width: 300px;
}

.p-top-faq__list {
	flex: 1;
	min-width: 0;
	border-top: 1px solid var(--color-border-default);
}

@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-faq__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2xl);
	}

	.p-top-faq__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		width: auto;
	}
}

@media (max-width: 767px) {
	.p-top-faq {
		padding-block: var(--space-6xl);
	}

	.p-top-faq__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-xl);
	}

	.p-top-faq__head {
		display: contents;
	}

	.p-top-faq__more {
		order: 9;
	}
}