/* ==========================================================================
   会社情報（Figma 会社概要 26:392・代表挨拶 72:733・会社沿革 72:912・社員紹介 73:1001・SDGs 73:1217、SP 238:2414〜240:2442）
   - page-company.php・page-company-*.php・template-parts/corporate/company-nav.php
   - トークンにない Figma の値（140px・96px など）は、そのまま書いてコメントを付ける
   ========================================================================== */

/* ---------- ページの切り替え（p-company-nav） ---------- */
.p-company-nav {
	background: var(--color-bg-canvas);
	border-bottom: 1px solid var(--color-border-default);
}

.p-company-nav__list {
	display: flex;
	flex-wrap: wrap;
}

.p-company-nav__item {
	display: block;
	padding: 26px 28px 22px; /* Figma の値 */
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-secondary);
	text-align: center;
	text-decoration: none;
	border-bottom: 4px solid transparent;
	transition: color 0.2s;
}

.p-company-nav__item:hover {
	color: var(--color-text-brand);
}

.p-company-nav__item.is-current {
	color: var(--color-text-brand);
	border-bottom-color: var(--color-border-brand);
}

/* PC の幅が狭いとき: 左右の余白を詰めて5つを1行に（768px で「SDGsへの取り組み」だけが2行目に落ちるため） */
@media (min-width: 768px) and (max-width: 1023px) {
	.p-company-nav__item {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.p-company-nav {
		padding-block: var(--space-xs);
	}

	.p-company-nav__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.p-company-nav__item {
		padding: var(--space-sm) var(--space-xs);
		border-bottom-width: 0;
	}

	.p-company-nav__item.is-current {
		border-bottom-width: 4px;
	}
}

/* ==========================================================================
   会社概要: 使命（p-company-mission）
   ========================================================================== */
.p-company-mission {
	padding: var(--space-7xl) 0 140px; /* 140 は Figma の値 */
	overflow: hidden;
}

.p-company-mission__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

/* 左の端から伸びる青い帯（Figma p-company-mission__plane） */
.p-company-mission__catch {
	position: relative;
	z-index: 0;
	padding-block: 36px; /* Figma の値 */
	text-wrap: balance; /* 折り返す幅で「ステージを／彩る」と2字だけ落ちないように（「人生のあらゆる／ステージを彩る」。2026-10-05） */
}

.p-company-mission__catch::before {
	position: absolute;
	inset: 0 auto 0 -50vw;
	z-index: -1;
	width: calc(50vw + 871px); /* Figma の値（色面の右端は中身の左端から 871px） */
	max-width: calc(50vw + 100%);
	content: "";
	background: var(--color-bg-brand);
}

.p-company-mission__title {
	font: var(--text-catch);
	letter-spacing: var(--ls-catch);
	color: var(--color-text-on-brand);
}

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

.p-company-mission__en {
	flex-shrink: 0;
	font: var(--text-en-h2);
	letter-spacing: var(--ls-en-h2);
	color: var(--color-text-brand);
	white-space: nowrap;
}

.p-company-mission__text {
	flex: 1;
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-secondary);
}

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

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

	.p-company-mission__inner {
		gap: var(--space-2xl);
	}

	.p-company-mission__catch {
		padding-block: var(--space-xl); /* SP 24 */
	}

	.p-company-mission__catch::before {
		width: calc(50vw + 315px); /* Figma の値（画面の左端から 335px） */
	}

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

	.p-company-mission__body {
		flex-direction: column;
		gap: var(--space-md);
	}

	.p-company-mission__en {
		white-space: normal;
	}
}

/* ==========================================================================
   会社概要: 理念（p-company-vision）
   ========================================================================== */
.p-company-vision {
	padding: 140px 0 var(--space-7xl); /* 140 は Figma の値 */
	background: var(--color-bg-subtle);
}

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

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

.p-company-vision__title-wrap {
	display: flex;
	flex: 0 1 600px;
	flex-direction: column;
	gap: var(--space-xl);
}

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

.p-company-vision__lead-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md);
	padding-top: var(--space-6xl);
}

.p-company-vision__en {
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-tertiary);
}

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

.p-company-vision__list {
	border-top: 1px solid var(--color-border-default);
}

.p-company-vision__item {
	display: flex;
	gap: 96px; /* Figma の値 */
	padding-block: 36px; /* Figma の値 */
	border-bottom: 1px solid var(--color-border-default);
}

.p-company-vision__item-title {
	flex: 0 1 520px;
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	text-wrap: balance; /* SP で「サービスと／製品」と2字だけ落ちないように（「カスタマイズされた／サービスと製品」。2026-10-05） */
}

.p-company-vision__item-text {
	flex: 1;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

@media (min-width: 768px) and (max-width: 1199px) {
	/* 見出しと英文・リードを縦に積む（横並びのままだと右の列が細くなり、文が縦長になる） */
	.p-company-vision__head {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.p-company-vision__title-wrap {
		flex-basis: auto;
	}

	.p-company-vision__lead-wrap {
		padding-top: 0;
	}

	.p-company-vision__item {
		gap: var(--space-2xl);
	}

	.p-company-vision__item-title {
		flex-basis: 280px;
	}
}

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

	.p-company-vision__inner {
		gap: var(--space-2xl);
	}

	.p-company-vision__head {
		flex-direction: column;
		gap: 20px; /* Figma の値 */
	}

	.p-company-vision__title-wrap {
		flex-basis: auto;
		gap: 20px; /* Figma の値 */
	}

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

	.p-company-vision__lead-wrap {
		gap: var(--space-sm);
		padding-top: 0;
	}

	.p-company-vision__item {
		flex-direction: column;
		gap: var(--space-xs);
		padding-block: 20px; /* Figma の値 */
	}

	.p-company-vision__item-title {
		flex-basis: auto;
	}
}

/* ==========================================================================
   会社概要: 行動指針（p-company-value）
   ========================================================================== */
.p-company-value {
	padding-block: 140px; /* Figma の値 */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

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

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

.p-company-value__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: 36px var(--space-xl) var(--space-2xl); /* 36 は Figma の値 */
	background: var(--color-bg-brand-strong);
	border-radius: 20px; /* Figma の値 */
}

.p-company-value__swatch {
	width: 48px;
	height: 6px;
	background: var(--color-text-on-brand);
	border-radius: 3px; /* Figma の値 */
}

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

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

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

	.p-company-value__inner {
		gap: var(--space-2xl);
	}

	.p-company-value__list {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-sm);
	}

	.p-company-value__item {
		gap: var(--space-md);
		padding: var(--space-xl) 14px var(--space-xl) var(--space-md); /* 14 は Figma の値 */
	}

	.p-company-value__text {
		font: var(--text-label-l);
		letter-spacing: var(--ls-label-l);
	}
}

/* 360px 未満は2列だと「クリエイティブな」が1行に入らず「クリエイティ／ブな」と切れるので1列に（2026-10-05） */
@media (max-width: 359px) {
	.p-company-value__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   会社概要: 会社概要の表と地図（p-company-overview）
   ========================================================================== */
.p-company-overview {
	padding-block: var(--space-7xl);
}

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

.p-company-overview__body {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4xl);
}

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

.p-company-overview__row {
	display: flex;
	gap: var(--space-xl);
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--color-border-default);
}

.p-company-overview__th {
	flex-shrink: 0;
	width: 160px;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	line-height: 2; /* 右の文と1行目をそろえる */
}

.p-company-overview__td {
	flex: 1;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-company-overview__td a {
	color: inherit;
	text-decoration: none;
}

/* 電話番号: 押せる高さを 44px 以上に（見た目と行の高さは変えない。上下の margin で打ち消す） */
.p-company-overview__td a[href^="tel:"] {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

.p-company-overview__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 440px;
}

.p-company-overview__map {
	height: 360px; /* Figma の値 */
	overflow: hidden;
	background: var(--color-bg-muted);
	border-radius: 20px; /* Figma の値 */
}

.p-company-overview__map-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 押してから地図を出したとき、フォーカスの枠が角丸の外で切れないように内側に描く */
.p-company-overview__map-frame:focus-visible {
	outline-offset: -3px;
	border-radius: 20px;
}

/* 地図の代わりの面（押す前。Google マップはまだ読み込まない。corporate-company-map.js） */
.p-company-overview__map-placeholder {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--space-lg);
	text-align: center;
}

.p-company-overview__map-address {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-primary);
}

.p-company-overview__map-pin {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.p-company-overview__map-pin-icon {
	width: 26px;
	height: 26px;
}

.p-company-overview__map-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-sm);
	justify-content: center;
}

.p-company-overview__map-button {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--space-lg);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
	text-decoration: none;
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 0;
	border-radius: var(--radius-full);
	box-shadow: inset 0 0 0 1.5px var(--color-border-brand); /* 枠線（高さを変えないように内側の影で。c-button--secondary と同じ） */
	transition: background-color 0.2s, color 0.2s;
}

.p-company-overview__map-button--show {
	color: var(--color-text-on-brand);
	background: var(--color-action-primary);
	box-shadow: none;
}

.p-company-overview__map-button-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

@media (hover: hover) {
	.p-company-overview__map-button:hover {
		background-color: var(--color-bg-muted);
	}

	.p-company-overview__map-button--show:hover {
		background-color: var(--color-action-primary-hover);
	}
}

.p-company-overview__photo {
	height: 300px; /* Figma の値 */
	overflow: hidden;
	border-radius: 20px; /* Figma の値 */
}

.p-company-overview__photo picture {
	display: block;
	height: 100%;
}

.p-company-overview__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-company-overview__caption {
	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-company-overview__body {
		flex-direction: column;
		align-items: stretch; /* 表を本文の幅いっぱいに */
	}

	.p-company-overview__side {
		width: 100%;
	}
}

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

	.p-company-overview__inner,
	.p-company-overview__body {
		flex-direction: column;
		gap: var(--space-2xl);
	}

	.p-company-overview__body {
		align-items: stretch; /* 表を本文の幅いっぱいに（Figma 238:2414 は 335px） */
	}

	.p-company-overview__row {
		flex-direction: column;
		gap: var(--space-2xs);
		padding-block: var(--space-md);
	}

	.p-company-overview__th {
		width: auto;
		line-height: 1.5;
	}

	.p-company-overview__side {
		gap: var(--space-md);
		width: 100%;
	}

	.p-company-overview__map {
		height: 220px; /* Figma の値 */
	}

	/* SP：高さ 220 に入るよう、ピンは住所の左に小さく・ボタンは縦に並べて幅いっぱい */
	.p-company-overview__map-placeholder {
		gap: var(--space-sm);
		align-items: stretch;
		padding: var(--space-md) var(--space-lg);
		text-align: left;
	}

	.p-company-overview__map-address {
		flex-direction: row;
		align-items: center;
	}

	.p-company-overview__map-pin {
		width: 40px;
		height: 40px;
	}

	.p-company-overview__map-pin-icon {
		width: 20px;
		height: 20px;
	}

	.p-company-overview__map-actions {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.p-company-overview__map-button {
		min-height: 44px;
	}

	.p-company-overview__photo {
		height: 228px; /* Figma の値 */
	}
}

/* ==========================================================================
   会社概要: 会社情報のほかのページ（p-company-related）
   ========================================================================== */
.p-company-related {
	padding: 140px 0 var(--space-7xl); /* 140 は Figma の値 */
	background: var(--color-bg-subtle);
}

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

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

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

.p-company-related__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 416px; /* Figma の値（4枚の高さをそろえる） */
	overflow: hidden;
	color: var(--color-text-primary);
	text-decoration: none;
	background: var(--color-bg-canvas);
	border-radius: 20px; /* Figma の値 */
}

.p-company-related__photo {
	display: block;
	height: 200px; /* Figma の値 */
	overflow: hidden;
}

.p-company-related__photo picture {
	display: block;
	height: 100%;
}

.p-company-related__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.p-company-related__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg) var(--space-lg) 28px; /* 28 は Figma の値 */
}

.p-company-related__en {
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-text-brand);
}

.p-company-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
}

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

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

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

@media (hover: hover) {
	.p-company-related__item:hover .p-company-related__img {
		transform: scale(1.04);
	}

	.p-company-related__item:hover .p-company-related__arrow {
		transform: translateX(3px);
	}
}

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

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

	.p-company-related__inner {
		gap: var(--space-xl);
	}

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

	.p-company-related__item {
		min-height: 0;
	}

	.p-company-related__photo {
		height: 180px; /* Figma の値 */
	}

	.p-company-related__body {
		padding: 20px 20px var(--space-xl); /* Figma の値 */
	}
}

/* ==========================================================================
   代表挨拶（p-message-main・p-message-origin・p-message-director）
   ========================================================================== */
.p-message-main {
	padding-block: 140px; /* Figma の値 */
}

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

.p-message-main__profile {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 20px; /* Figma の値 */
	width: 460px;
}

.p-message-main__photo {
	position: relative;
	aspect-ratio: 460 / 560;
	overflow: hidden;
	border-radius: var(--radius-xl);
}

.p-message-main__photo picture {
	display: block;
	height: 100%;
}

.p-message-main__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写真の右下の試し塗り（120×140 / 460×560） */
.p-message-main__patch {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 26.087%;
	height: 25%;
	background: var(--color-bg-brand);
	opacity: 0.9;
}

.p-message-main__role {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
}

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

.p-message-main__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-secondary);
}

.p-message-main__title {
	font: 700 40px / 1.5 var(--font-ja); /* Figma の値（H1 と H2 の間の大きさ） */
	letter-spacing: var(--ls-h1);
	color: var(--color-text-primary);
}

.p-message-origin {
	padding-block: 140px; /* Figma の値 */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

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

.p-message-origin__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
	min-width: 0;
}

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

.p-message-origin__body {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	opacity: 0.9;
}

.p-message-origin__truss {
	flex-shrink: 0;
	width: 500px;
	max-width: 100%;
	height: auto;
}

.p-message-director {
	padding-block: 140px; /* Figma の値 */
}

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

.p-message-director__body {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}

.p-message-director__photo {
	flex-shrink: 0;
	width: 240px;
	height: 280px; /* Figma の値 */
	overflow: hidden;
	border-radius: 20px; /* Figma の値 */
}

.p-message-director__photo picture {
	display: block;
	height: 100%;
}

.p-message-director__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-message-director__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-message-director__role {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand);
}

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

.p-message-director__en {
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-tertiary);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-message-main__inner,
	.p-message-origin__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3xl);
	}

	.p-message-main__profile {
		width: min(460px, 100%);
	}

	.p-message-origin__truss {
		align-self: center;
	}
}

@media (max-width: 767px) {
	.p-message-main,
	.p-message-origin,
	.p-message-director {
		padding-block: var(--space-6xl);
	}

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

	.p-message-main__profile {
		gap: var(--space-sm);
		width: 100%;
	}

	.p-message-main__photo {
		border-radius: 17.5px; /* Figma の値 */
	}

	.p-message-main__text {
		gap: 20px; /* Figma の値 */
	}

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

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

	.p-message-origin__text {
		gap: 20px; /* Figma の値 */
	}

	.p-message-origin__truss {
		width: 100%;
	}

	.p-message-director__inner {
		gap: var(--space-2xl);
	}

	.p-message-director__body {
		gap: 20px; /* Figma の値 */
	}

	.p-message-director__photo {
		width: 140px;
		height: 163px; /* Figma の値 */
	}
}

/* ==========================================================================
   会社沿革（p-history）
   ========================================================================== */
.p-history {
	padding-block: 140px; /* Figma の値 */
}

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

.p-history__lead {
	max-width: 520px;
}

.p-history__item {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	padding-block: 28px; /* Figma の値 */
	border-bottom: 1px solid var(--color-border-default);
}

.p-history__row {
	flex-shrink: 0;
	width: 220px;
	color: var(--color-text-brand);
}

.p-history__row time {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
}

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

.p-history__month {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-history__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-2xl);
	min-width: 0;
}

.p-history__dot {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

.p-history__text {
	flex: 1;
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
}

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

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

	.p-history__item {
		flex-direction: column;
		align-items: stretch;
		gap: 6px; /* Figma の値 */
		padding-block: 20px; /* Figma の値 */
	}

	.p-history__row {
		width: auto;
	}

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

	.p-history__body {
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.p-history__dot {
		margin-top: 7px; /* 1行目の真ん中に（Figma の値） */
	}
}

/* ==========================================================================
   社員紹介（p-staff）
   ========================================================================== */
.p-staff {
	padding-block: 140px; /* Figma の値 */
}

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

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

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

.p-staff__photo,
.p-staff__no-photo {
	position: relative;
	display: flex;
	height: 330px; /* Figma の値 */
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.p-staff__photo {
	background: var(--neutral-200); /* Figma の値 */
}

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

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

/* カーソルを乗せたとき（Figma の is-hover）: カラーにして、下に青い試し塗り */
.p-staff__shape {
	position: absolute;
	right: 36.2%; /* 102 / 282 */
	bottom: 0;
	width: 64px;
	height: 64px;
	background: var(--color-bg-brand);
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s, transform 0.3s;
}

@media (hover: hover) {
	.p-staff__item:hover .p-staff__img {
		filter: none;
	}

	.p-staff__item:hover .p-staff__shape {
		opacity: 1;
		transform: none;
	}
}

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

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

.p-staff__en {
	font: var(--text-en-caption);
	letter-spacing: var(--ls-en-caption);
	color: var(--color-text-tertiary);
}

.p-staff__recruit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
	padding: var(--space-2xl) var(--space-3xl);
	background: var(--color-bg-muted);
	border-radius: 20px; /* Figma の値 */
}

.p-staff__recruit-body {
	display: flex;
	flex-direction: column;
	gap: 6px; /* Figma の値 */
}

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

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

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

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

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

	.p-staff__list {
		grid-template-columns: 1fr 1fr;
		gap: 28px var(--space-sm); /* 28 は Figma の値 */
	}

	.p-staff__item {
		gap: 6px; /* Figma の値 */
	}

	.p-staff__photo,
	.p-staff__no-photo {
		height: 189px; /* Figma の値 */
	}

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

	.p-staff__recruit {
		flex-direction: column;
		align-items: stretch;
		gap: 20px; /* Figma の値 */
		padding: 28px var(--space-xl); /* Figma の値 */
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-staff__img,
	.p-staff__shape {
		transition: none;
	}
}

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

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

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

.p-sdgs-intro__lead {
	max-width: 960px;
	font: var(--text-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-text-secondary);
}

.p-sdgs-pillar {
	padding-block: 140px; /* Figma の値 */
}

.p-sdgs-pillar--1,
.p-sdgs-pillar--3 {
	background: var(--color-bg-subtle);
}

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

.p-sdgs-pillar__head {
	display: flex;
	flex-direction: column;
	gap: 6px; /* Figma の値 */
}

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

.p-sdgs-pillar__en {
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-tertiary);
}

.p-sdgs-pillar__list {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--space-lg);
}

.p-sdgs-pillar__goal {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: 28px; /* Figma の値 */
	background: var(--color-bg-canvas);
	border-radius: 20px; /* Figma の値 */
}

.p-sdgs-pillar--2 .p-sdgs-pillar__goal {
	background: var(--color-bg-subtle);
}

.p-sdgs-pillar__goal picture {
	flex-shrink: 0;
}

.p-sdgs-pillar__photo {
	width: 96px;
	height: 96px;
	border-radius: var(--radius-sm);
}

.p-sdgs-pillar__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px; /* Figma の値 */
	min-width: 0;
}

.p-sdgs-pillar__goal-title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
}

.p-sdgs-pillar__points {
	display: flex;
	flex-direction: column;
	gap: 10px; /* Figma の値 */
}

.p-sdgs-pillar__point {
	position: relative;
	padding-left: 14px; /* 点（6px）と間（8px） */
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

.p-sdgs-pillar__point::before {
	position: absolute;
	top: 10px; /* 1行目の真ん中（Figma の値） */
	left: 0;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.p-sdgs-pillar__list {
		grid-auto-flow: row;
	}
}

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

	.p-sdgs-intro__inner,
	.p-sdgs-pillar__inner {
		gap: var(--space-xl);
	}

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

	.p-sdgs-pillar__list {
		grid-auto-flow: row;
		gap: var(--space-sm);
	}

	.p-sdgs-pillar__goal {
		gap: var(--space-md);
		padding: 20px; /* Figma の値 */
	}

	.p-sdgs-pillar__photo {
		width: 72px;
		height: 72px;
	}

	.p-sdgs-pillar__point::before {
		top: 9px;
	}
}