@charset "utf-8";
/* =========================================================
   company.css — 会社情報（/company/ 配下）
   取り組み（/company/action/）・会社概要（/company/）で共有する
   原稿は docs/content/about-us.md
   ========================================================= */

/* ---- 取り組み：制度ごとのカード ----------------------------------------
   共通パーツ c-mediaList / c-media _thumb（components.css）に置き換えた */

/* ---- 取り組み：方針・事例の文章ブロック --------------------------------- */
.p-actPolicy {
	max-width: var(--w-text);

	& .p-actPolicy-title {
		margin-block-end: var(--sp-xs);
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
	}

	& .p-actPolicy-note {
		margin-block-start: var(--sp-xs);
		padding-inline-start: var(--sp-xs);
		border-inline-start: 2px solid var(--cl-line-strong);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		line-height: var(--lh-body);
	}
}

/* ---- 取り組み：SDGsの分野別 --------------------------------------------
   制度カードと同じ作法（1枚ずつ縦積み・左にゴールのバナー）*/
.p-actSdgs {
	display: grid;
	gap: var(--sp-s);
}

.p-actSdgs-item {
	display: grid;
	gap: var(--sp-s);
	align-items: start;
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	/* 目指すゴールは公式アイコンで見せる（名称は alt に持たせる）*/
	& .p-actSdgs-goalsTitle {
		margin-block-end: 0.8rem;
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		letter-spacing: 0.04em;
	}

	& .p-actSdgs-icons { display: flex; flex-wrap: wrap; gap: 0.8rem; }
	& .p-actSdgs-icons img { width: 8rem; height: auto; }

	& .p-actSdgs-body { display: grid; gap: var(--sp-xs); align-content: start; }

	& .p-actSdgs-label {
		justify-self: start;
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		line-height: var(--lh-ui);
	}

	& .p-actSdgs-goal { font-weight: var(--fw-bold); line-height: var(--lh-body); }
	& .p-actSdgs-txt { color: var(--cl-text-sub); line-height: var(--lh-body); }

	& .p-actSdgs-num {
		padding-block-start: var(--sp-xs);
		border-block-start: 1px solid var(--cl-line);
		font-size: var(--fs-s);
		line-height: var(--lh-body);
	}

	& .p-actSdgs-num dt { color: var(--cl-text-sub); font-weight: var(--fw-bold); }
	& .p-actSdgs-num dd { margin-block-start: 0.3em; font-weight: var(--fw-bold); }
	& .p-actSdgs-num dd::before { content: "・"; }
}

/* 左列は公式アイコン3つ（12rem 角）が1行に収まる幅。SP はアイコン 8rem のまま */
@media print, screen and (min-width: 640px) {
	.p-actSdgs-item { grid-template-columns: 38rem 1fr; gap: var(--sp-m); }
	.p-actSdgs-item .p-actSdgs-icons img { width: 12rem; }
}

/* ---- 取り組み：認定バッジ ----------------------------------------------- */
.p-actBadges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: var(--sp-s);

	/* ロゴの比率がバラバラなので 3:2 の枠に contain で収める（切らない）*/
	& img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
}

/* 列数は明示（640 以上は7列＝バッジ7点が1行。点数が変わったら列数も合わせる）*/
@media print, screen and (min-width: 640px) {
	.p-actBadges { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---- 取り組み：一覧表 ---------------------------------------------------
   名称／制度運営の2列。名称のほうが長いので広めに取る */
.p-actTable {
	& .c-table th { width: auto; }
	& .c-table tbody th { width: 60%; }
}

/* ---- 会社概要：概要表 ----------------------------------------------------
   項目名が長いので、SPは縦に積む（th/td を block にする）*/
.p-compTable {
	& .c-table th { width: 24%; }
	& .c-table :is(th, td) { padding-block: var(--sp-s); }
	& .c-list { line-height: var(--lh-body); }
}

.p-compAddr {
	& dt { font-weight: var(--fw-bold); }
	& dt:not(:first-child) { margin-block-start: var(--sp-xs); }
	& dd { margin-block-start: 0.2em; }
}

/* ---- 会社概要：沿革 ------------------------------------------------------
   左に年月、右に内容。境目に線を引いて時系列を見せる */
.p-compHistory {
	display: grid;

	& dt {
		padding-block-start: var(--sp-s);
		border-block-start: 1px solid var(--cl-line);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		letter-spacing: 0.04em;
	}

	& dd {
		padding-block: 0.4rem var(--sp-s);
		font-weight: var(--fw-bold);
		line-height: var(--lh-body);
	}
}

@media print, screen and (min-width: 640px) {
	.p-compHistory {
		/* 列の隙間で罫線が切れないよう、gapではなく dt の余白で間を空ける */
		grid-template-columns: 12rem 1fr;

		& dt { grid-column: 1; padding-inline-end: var(--sp-s); }

		& dd {
			grid-column: 2;
			padding-block: var(--sp-s);
			border-block-start: 1px solid var(--cl-line);
		}
	}
}

/* ---- 会社概要：アクセス -------------------------------------------------
   共通パーツ c-media（components.css）に置き換えた */

/* ---- 会社概要：パートナー募集 --------------------------------------------- */
.p-compPartner {
	padding: var(--card-pad);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& .p-compPartner-body { display: grid; gap: var(--sp-xs); max-width: var(--w-text); }
	& .p-compPartner-en { color: var(--cl-text-sub); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: var(--lh-ui); }
	& .p-compPartner-title { font-size: var(--fs-xl); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.015em; }
	& .p-compPartner-txt { color: var(--cl-text-sub); line-height: var(--lh-body); }
	& .c-btn { justify-self: start; margin-block-start: var(--sp-xs); }
}

/* ---- 理念：代表あいさつ -------------------------------------------------
   共通パーツ c-media _thumb（components.css）に置き換えた */

/* ---- 理念：VISION / MISSION のキャッチ ------------------------------------
   ロゴタイプはSVG（assets/images/company/spd_vision.svg・mission.svg）*/
.p-visCatch {
	display: grid;
	gap: 0.8em;
	justify-items: start;

	/* 親（grid item）は shrink-to-fit になるので、幅は p 側で決める */
	& .p-visCatch-pic { width: min(44rem, 100%); }
	& .p-visCatch-pic img { width: 100%; height: auto; }

	& .p-visCatch-sub {
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.015em;
	}

	& .p-visCatch-en { color: var(--cl-text-sub); font-size: var(--fs-ui); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
}

/* 理念の本文。詩のような原稿なので、読み物幅に収めて行間を広めに取る */
.p-visProse {
	display: grid;
	gap: 1em;
	max-width: var(--w-text);
	line-height: var(--lh-body);

	& .p-visProse-last { font-size: var(--fs-l); font-weight: var(--fw-head); letter-spacing: 0.04em; }
}

/* ---- 理念：SIX VALUES（details の開閉）----------------------------------- */
.p-visValues {
	display: grid;
	gap: var(--sp-xs);
}

.p-visValue {
	padding-inline: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .p-visValue-head {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--sp-s);
		padding-block: var(--sp-s);
		cursor: pointer;
		list-style: none;
	}

	& .p-visValue-head::-webkit-details-marker { display: none; }

	& .p-visValue-no { color: var(--cl-accent); font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); }
	& .p-visValue-title { display: grid; gap: 0.2em; }
	& .p-visValue-en { font-size: var(--fs-ui); font-weight: var(--fw-bold); letter-spacing: 0.08em; }
	& .p-visValue-note { margin-inline-start: 0.8em; color: var(--cl-text-sub); font-weight: 400; letter-spacing: 0; }
	& .p-visValue-ja { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }

	/* 閉じたままでも中身が伝わるように、要約を1行そえる */
	& .p-visValue-lead { margin-block-start: 0.2em; max-width: var(--w-text); color: var(--cl-text-sub); font-size: var(--fs-ui); font-weight: 400; line-height: var(--lh-body); }

	& .p-visValue-head::after {
		content: "";
		width: 1.6rem;
		height: 1.6rem;
		background-color: var(--cl-text);
		-webkit-mask: url(../../images/common/icons/chevron-down.svg) no-repeat center / contain;
		mask: url(../../images/common/icons/chevron-down.svg) no-repeat center / contain;
		transition: rotate var(--ease-t);
	}

	&[open] .p-visValue-head::after { rotate: 180deg; }

	/* なめらかな開閉（非対応環境では瞬時に開く）*/
	&::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--ease-t), content-visibility var(--ease-t);
		transition-behavior: allow-discrete;
	}

	&[open]::details-content { block-size: auto; }

	& .p-visValue-body {
		display: grid;
		gap: 1em;
		padding-block-end: var(--sp-s);
		max-width: var(--w-text);
		color: var(--cl-text-sub);
		line-height: var(--lh-body);
	}
}

/* ---- 理念：ロゴコンセプト ------------------------------------------------- */
.p-visLogo {
	display: grid;
	gap: var(--sp-m);
	align-items: start;

	& .p-visLogo-pic { width: min(22rem, 60%); }
	& .p-visLogo-pic img { width: 100%; height: auto; }

	& .p-visLogo-body { display: grid; gap: 1em; align-content: start; max-width: var(--w-text); }

	& .p-visLogo-title {
		font-size: var(--fs-xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: 0.06em;
	}
}

@media print, screen and (min-width: 640px) {
	.p-visLogo { grid-template-columns: 28rem 1fr; }
	.p-visLogo .p-visLogo-pic { justify-self: center; }
}

/* ---- スタッフ紹介 ---------------------------------------------------------
   顔・実名は松原・小川は必須。ほかはニックネーム＋イラストも可（sitemap 34行目）*/

/* スタッフ紹介の人物カードは共通パーツ c-memberList / c-member（components.css）に移した */