@charset "utf-8";
/* =========================================================
   components.css — 共通コンポーネント（c-）
   パーツを追加するときは _html/_components.html にも必ず追加する
   ========================================================= */

/* ---- セクション ------------------------------------------------------
   余白は上下対称。白地・f5 を問わず上下 --sp-l、小さい帯（_s）だけ上下 --sp-s（§9）。
   見出しのリズムは見出しの下の余白で作り、セクションの padding で差をつけない。
   ページごとに独自値を作らない（docs/design-direction.md 4章）。 */
.c-sec {
	padding-block: var(--sp-l);

	/* 色のついたセクション。中の罫線は --cl-line だと地色に溶けるので、--cl-line-sub に差し替える */
	&._bg {
		--cl-line: var(--cl-line-sub);
		background-color: var(--cl-bg-sub);
	}

	/* 小さい帯（絞り込みバー・定義文の帯）。_bg と組み合わせても --sp-s のまま（_bg より後に書く）*/
	&._s { padding-block: var(--sp-s); }
}

/* 白の見出しブロック（KV の下に --sp-l の padding を持つもの）の直後に白のセクションが続くときは、
   セクションの上余白を 0 にする。余白は見出しブロックの --sp-l だけ（白→白で倍にしない。§9）*/
:is(.p-artHead, .p-caseHead) + .c-sec:not(._bg) { padding-block-start: 0; }

/* f5 セクションの上では、f5 の面を持つパーツを白の面にする（§9：面は白だけ）*/
.c-sec._bg :is(.c-toc, .c-author, .c-balloon-body, .c-table thead th) { background-color: var(--cl-bg); }

/* ---- 下層ページの見出し（パンくず＋英字ラベル＋h1＋リード）--------------
   サービス詳細・課題詳細は専用の型を持つので、それ以外の下層ページで使う */
.c-pageHead {
	padding-block-start: var(--sp-xs);

	& .c-pageHead-en {
		margin-block-start: var(--sp-m);
		color: var(--cl-text-sub);
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: 0.08em;
		line-height: var(--lh-ui);
	}

	/* 検索・AIO 用の h1。キャッチの上に小さく置く。
	   display:none や 1px 隠しはクローキング扱いになるので必ず見える大きさで出す */
	& .c-pageHead-label {
		margin-block-start: 0.8rem;
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		font-weight: var(--fw-normal);
		line-height: var(--lh-body);
	}

	& .c-pageHead-title {
		margin-block-start: 0.8rem;
		font-size: var(--fs-2xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.025em;
	}

	& .c-pageHead-label + .c-pageHead-title { margin-block-start: 0.4rem; }
	/* リードのないページ（/issue/）は、見出しの下に下の帯との余白を取る */
	& .c-pageHead-title:last-child { margin-block-end: var(--sp-m); }

	& .c-pageHead-lead {
		margin-block-start: var(--sp-s);
		margin-block-end: var(--sp-m);
		max-width: var(--w-text);
		font-size: var(--fs-lead);
		font-weight: var(--fw-med);
		line-height: var(--lh-body);
		letter-spacing: -0.01em;
	}
}

/* ---- セクション見出し（英字ラベル＋日本語見出し）----------------------- */
/* 見出しと中身の間隔はこの下余白1種類だけ（§9）。直後の要素に u-mt を付けない */
.c-secTitle {
	display: grid;
	gap: var(--sp-xs);
	margin-block-end: var(--sp-m);

	& .c-secTitle-ja {
		font-size: var(--fs-xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.015em;
	}

	/* 英字は見出しの上に小さく置く（Apple の eyebrow 的な扱い） */
	& .c-secTitle-en {
		order: -1;
		color: var(--cl-text-sub);
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		line-height: var(--lh-ui);
		letter-spacing: 0.08em;
	}

	/* リード文。既定はページ冒頭の大きいリード、_s はセクション内のリード（本文と同じ大きさ）*/
	& .c-secTitle-lead {
		/* 見出しとの間を広げる（gap の --sp-xs だけでは近すぎる）。既定・_s とも */
		margin-block-start: 1em;
		max-width: var(--w-text);
		font-size: var(--fs-lead);
		font-weight: var(--fw-med);
		line-height: var(--lh-body);
		letter-spacing: -0.01em;

		&._s { font-size: var(--fs-m); font-weight: var(--fw-normal); line-height: var(--lh-body); letter-spacing: normal; }
	}
}

/* ---- 見出し（セクション内）-------------------------------------------- */
.c-title-lv3 {
	font-size: var(--fs-ml);
	font-weight: var(--fw-head);
	line-height: var(--lh-tight);
}

.c-title-lv4 {
	font-size: var(--fs-m);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--cl-text-sub);
}

/* ---- 本文・リンク ----------------------------------------------------- */
.c-txt {
	line-height: var(--lh-body);

	& + .c-txt { margin-block-start: 1em; }
}

.c-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 700;
	text-decoration: underline;
}

/* 矢印つきリンク（旧 .u-linkarrow を継承）
   テキスト＋右の丸矢印。アイコンは mask ＋ currentColor で色を1箇所に寄せる */
.c-linkArrow {
	display: grid;
	grid-template-columns: 1fr 3rem;
	align-items: center;
	gap: 1rem;
	width: fit-content;
	line-height: var(--lh-tight);
	font-weight: 700;

	&::after {
		content: "";
		width: 3rem;
		height: 3rem;
		background-color: currentColor;
		-webkit-mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		transition: translate var(--ease-t);
	}
}

/* 小サイズ。丸が小さいと矢印が潰れるので、矢印を大きくした専用SVGを使う */
.c-linkArrow._sm {
	grid-template-columns: 1fr 2.4rem;
	gap: 0.6rem;
	font-size: var(--fs-s);

	&::after {
		width: 2.4rem;
		height: 2.4rem;
		-webkit-mask-image: url(../images/common/ico_arrow_sm.svg);
		mask-image: url(../images/common/ico_arrow_sm.svg);
	}
}

@media print, screen and (min-width: 640px) {
	.c-linkArrow {
		grid-template-columns: 1fr 4rem;

		&::after { width: 4rem; height: 4rem; }
	}

	.c-linkArrow._sm {
		grid-template-columns: 1fr 2.8rem;

		&::after { width: 2.8rem; height: 2.8rem; }
	}
}

/* mask に対応していないブラウザ向けのフォールバック（色は黒固定になる） */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.c-linkArrow::after {
		background-color: transparent;
		background: url(../images/common/ico_arrow.svg) no-repeat center / contain;
	}

	.u-ico {
		background-color: transparent;
		background: var(--u-ico) no-repeat center / contain;
	}
}

/* リンク先によって矢印の向きを変える：
   既定＝次のページへ（→）／ _down＝同じページ内のアンカー（↓）／ _ext＝外部サイト（↗）*/
.c-linkArrow._down::after { rotate: 90deg; }
.c-linkArrow._ext::after { rotate: -45deg; }

@media (any-hover: hover) {
	.c-linkArrow:hover { color: var(--cl-accent); opacity: 1; }
	.c-linkArrow:hover::after { translate: 0.4rem 0; }
	.c-linkArrow._down:hover::after { translate: 0 0.4rem; }
	.c-linkArrow._ext:hover::after { translate: 0.3rem -0.3rem; }
}

/* ---- リスト ----------------------------------------------------------- */
.c-list {
	display: grid;
	gap: 0.5em;
	line-height: var(--lh-body);

	& > li { padding-inline-start: 1em; text-indent: -1em; }
	& > li::before { content: "・"; }
}

.c-listNum {
	display: grid;
	gap: 0.5em;
	line-height: var(--lh-body);
	list-style: decimal;
	padding-inline-start: 1.5em;
}

.c-dl {
	display: grid;
	gap: var(--sp-xs);

	& dt { font-weight: 700; }
	& dd { color: var(--cl-text-sub); }
}

@media print, screen and (min-width: 640px) {
	.c-dl {
		grid-template-columns: 16rem 1fr;
		column-gap: var(--sp-s);
	}
}

/* ---- テーブル --------------------------------------------------------- */
.c-table {
	width: 100%;
	line-height: var(--lh-body);

	& :is(th, td) {
		padding: var(--sp-xs);
		border-block-end: 1px solid var(--cl-line);
		text-align: start;
		vertical-align: top;
	}

	& th { width: 28%; font-weight: 700; }
	& thead th { background-color: var(--cl-bg-sub); }
}

/* ---- ボタン ----------------------------------------------------------- */
.c-btn {
	display: inline-grid;
	place-content: center;
	min-width: 20rem;
	min-height: 5rem;
	padding: 1.2rem 2.8rem;
	border: 1px solid var(--cl-btn-bg);
	border-radius: 999px;
	background-color: var(--cl-btn-bg);
	color: var(--cl-btn-text);
	font-weight: 700;
	text-align: center;
	line-height: var(--lh-ui);

	/* 副ボタン（スケルトン）：透明地＋文字色と同じ色の枠（design-direction §8）*/
	&._secondary {
		border-color: var(--cl-text);
		background-color: transparent;
		color: var(--cl-text);
	}

	&._full { width: 100%; }

	/* フォームの送信など、ページで一番押させたいとき */
	&._lg {
		min-width: 32rem;
		min-height: 6.4rem;
		padding: 1.6rem 4rem;
		font-size: var(--fs-m);
	}

	/* ヘッダーなど、小さく置くとき */
	&._sm {
		min-width: 0;
		min-height: 3.8rem;
		padding: 0 1.8rem;
		font-size: var(--fs-xs);
	}
}

@media (any-hover: hover) {
	.c-btn { transition: background-color var(--ease-t), border-color var(--ease-t), color var(--ease-t); }

	/* 黒ピル＝主導線はオレンジに、白地＋罫線＝副導線は文字だけオレンジに */
	.c-btn:hover { background-color: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-btn-text); opacity: 1; }
	.c-btn._secondary:hover { background-color: var(--cl-bg); border-color: var(--cl-accent); color: var(--cl-accent); }
}

/* 「もっとみる」。全セクション共通の型（docs/design-direction.md 4章）
   見た目は .c-linkArrow と同じにするため、HTML では両方のクラスを付ける。
   カードを並べたあとに置くので、中央に寄せて余白を取る */
/* 単独で立つナビ（「〜をもっとみる」「〜を見る」）の置き場。中に c-btn _secondary を1つ置く（§9）*/
.c-moreWrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--sp-m);
}

/* ---- タグ・ラベル ----------------------------------------------------- */
.c-tag {
	color: var(--cl-text-sub);
	font-size: var(--fs-xs);
	line-height: var(--lh-ui);

	&::before { content: "#"; }
	/* 強調（Pickup など）。面は敷かず、アクセントの文字＋下線 */
	&._key { color: var(--cl-accent); text-decoration: underline 2px; text-underline-offset: 0.3em; }
}

@media (any-hover: hover) {
	/* リンクとして使ったときだけ反応させる */
	a.c-tag:hover { color: var(--cl-accent); opacity: 1; }
}

.c-tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
}

/* ---- CTA（2カラムのボックス）-------------------------------------------
   相談・診断／見積もり依頼の2分岐。白フッターとの区切りも兼ねる。
   ボックス全体がリンクなので、中のボタンは span で見た目だけ合わせる */
.c-ctaList {
	display: grid;
	gap: var(--sp-s);
}

.c-ctaBox {
	display: grid;
	/* アイコン／見出し／本文（伸びる）／ボタン。本文の長さが違っても左右のボタンの段がそろう */
	grid-template-rows: auto auto 1fr auto;
	gap: var(--sp-xs);
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .c-ctaBox-ico { font-size: 4.8rem; }
	& .c-ctaBox-title { font-size: var(--fs-ml); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.015em; }
	& .c-ctaBox-txt { color: var(--cl-text-sub); line-height: var(--lh-body); }

	/* 主導線（相談・診断）は c-btn _primary（黒ピル）、見積もりは c-btn _secondary（スケルトン）。
	   箱は同じにして、ボタンの種類だけで主従を示す */
	& .c-btn { justify-self: start; margin-block-start: var(--sp-xs); }
}

@media (any-hover: hover) {
	.c-ctaBox:hover { opacity: 1; }
	.c-ctaBox:hover .c-btn._primary { border-color: var(--cl-accent); background-color: var(--cl-accent); }
	.c-ctaBox:hover .c-btn._secondary { border-color: var(--cl-accent); color: var(--cl-accent); }
}

/* CTA の下に添えるサブ導線（資料DL・オンライン部署）
   主役の2ボックスより軽く見せるため、白カードにせず地色（f5）の上に直接置く。
   左にアイコン（黒）、右端に矢印 */
.c-ctaSub {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-s);
}

.c-ctaSub-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	/* アイコンと本文の間は --sp-xs。本文と右端の矢印の間は --sp-s（矢印側で差を足す）*/
	gap: var(--sp-xs);
	padding-block: var(--sp-xs);

	& .u-ico { font-size: 3.6rem; }
	& .c-ctaSub-body { display: grid; gap: 0.3em; }
	& .c-ctaSub-title { font-weight: var(--fw-bold); }
	& .c-ctaSub-txt { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }

	&::after {
		content: "";
		width: 2.8rem;
		height: 2.8rem;
		margin-inline-start: calc(var(--sp-s) - var(--sp-xs));
		background-color: currentColor;
		-webkit-mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		transition: translate var(--ease-t);
	}
}

@media (any-hover: hover) {
	.c-ctaSub-item:hover { opacity: 1; color: var(--cl-accent); }
	.c-ctaSub-item:hover::after { translate: 0.4rem 0; }
}

@media print, screen and (min-width: 640px) {
	.c-ctaSub { grid-template-columns: 1fr 1fr; }

	/* PC はカードが横に長く、右端の矢印がタイトルから離れすぎるので、タイトルの後ろに付ける。
	   主役は下の本文なので、矢印はタイトルの文字と同じ大きさまで落とす（c-linkCard も同じ）*/
	.c-ctaSub-item { grid-template-columns: auto 1fr; }
	.c-ctaSub-item::after { content: none; }
	.c-ctaSub-title::after {
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-inline-start: 0.3em;
		vertical-align: -0.15em;
		background-color: currentColor;
		-webkit-mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		transition: translate var(--ease-t);
	}
}

@media (any-hover: hover) and (min-width: 640px) {
	.c-ctaSub-item:hover .c-ctaSub-title::after { translate: 0.4rem 0; }
}

@media print, screen and (min-width: 640px) {
	.c-ctaList { grid-template-columns: 1fr 1fr; }
	.c-ctaList > :only-child { grid-column: 1 / -1; }
}

/* ---- 課題カード ----------------------------------------------------------
   f5 セクションの上の白カード。アイコン → タイトル → 本文を縦に積み、
   右端に c-linkArrow と同じ丸矢印を縦中央に置く。カード全体がリンク */
.c-issueCards {
	display: grid;
	gap: var(--sp-xs);
}

.c-issueCard {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--sp-s);
	padding: var(--card-pad-sm) var(--card-pad);
	border-radius: var(--radius);
	background-color: var(--cl-bg);

	/* アイコン → タイトル → 本文 の縦積み */
	& .c-issueCard-body { display: grid; justify-items: start; gap: 0.3em; }
	/* アイコンとタイトルの間は --sp-xs 程度（body の gap と合わせて）*/
	& .c-issueCard-ico { margin-block-end: calc(var(--sp-xs) / 2); font-size: 4.8rem; }
	/* アイコンの代わりに英字ラベルを置くとき（事例トップの3入口など）*/
	& .c-issueCard-label { color: var(--cl-text-sub); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: var(--lh-ui); }

	& .c-issueCard-title {
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
	}

	& .c-issueCard-txt { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }

	/* 右端の丸矢印。c-linkArrow と同じSVG・同じ大きさ・文字色 */
	&::after {
		content: "";
		width: 3rem;
		height: 3rem;
		background-color: currentColor;
		-webkit-mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		transition: translate var(--ease-t);
	}
}

@media (any-hover: hover) {
	.c-issueCard:hover { opacity: 1; color: var(--cl-accent); }
	.c-issueCard:hover::after { translate: 0.4rem 0; }
}

@media print, screen and (min-width: 640px) {
	.c-issueCard::after { width: 4rem; height: 4rem; }
}

@media print, screen and (min-width: 640px) {
	.c-issueCards { grid-template-columns: 1fr 1fr; gap: var(--sp-xs) var(--sp-s); }
}

@media print, screen and (min-width: 640px) {
	.c-issueCards._col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 進め方（番号つきのステップ）------------------------------------------
   f5 セクションの上に白カードで横に並べる（§9）。番号は自動（01, 02 …）。
   _col3 で3列、_plain で箱にしない（リンクのない説明の一覧を白セクションに置くとき）*/
.c-steps {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);
	counter-reset: step;
}

.c-step {
	display: grid;
	gap: 0.5em;
	align-content: start;
	padding: var(--card-pad-sm);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	&::before {
		counter-increment: step;
		content: counter(step, decimal-leading-zero);
		color: var(--cl-accent);
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
	}

	& .c-step-title { font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
	& .c-step-txt { color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }
}

@media print, screen and (min-width: 640px) {
	.c-steps { grid-template-columns: repeat(4, 1fr); }
	.c-steps._col3 { grid-template-columns: repeat(3, 1fr); }
}

.c-steps._plain .c-step { padding: 0; background-color: transparent; }

/* ---- アイコン＋見出し＋説明＋リンク（3カラム）---------------------------
   長い文章を避けて要点を並べたいときに使う。 */
.c-featureList {
	display: grid;
	gap: var(--sp-m);
}

@media print, screen and (min-width: 640px) {
	.c-featureList { grid-template-columns: repeat(2, 1fr); }
}

/* 640 以上は3カラム。4つ目以降は次の行へ */
@media print, screen and (min-width: 640px) {
	.c-featureList {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-m);
	}
}

.c-feature {
	display: grid;
	gap: var(--sp-xs);
	align-content: start;

	/* クラスの付け忘れでも効くように u-ico も対象にする */
	& :is(.c-feature-ico, .u-ico) { font-size: 6rem; }
	/* アイコンの代わりに正方形の画像を置くとき（オンライン部署の動物）*/
	& .c-feature-pic { justify-self: start; width: 8rem; aspect-ratio: 1; border-radius: var(--radius); object-fit: cover; }
	& .c-feature-title { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }
	& .c-feature-txt { color: var(--cl-text-sub); line-height: var(--lh-body); }
}

/* _num：アイコンの位置に番号（01, 02 …）を置く。お悩み・あるあるなど、順に読ませたいとき */
.c-featureList._num {
	counter-reset: feature;

	& .c-feature::before {
		counter-increment: feature;
		content: counter(feature, decimal-leading-zero);
		color: var(--cl-accent);
		font-size: var(--fs-xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
	}
}

/* ---- 画像＋本文（2カラム）---------------------------------------------
   画像と本文を左右に並べる。_rev で画像を右に。
   本文スロット（c-media-body）には、ラベル・見出し・リード・本文・箇条・補足・ボタン・矢印リンクを
   必要なものだけ自由に入れる（モディファイアで中身を切り替えない）。
   揃えは上（start）が既定。stretch や center のままだと、比率指定の画像と本文の高さがずれて
   本文がはみ出す事故が起きた（company のアクセス）。縦中央にしたいときだけ _center を付ける。
   _thumb は画像を小さく（28rem の列）。比率は画像の width/height 属性に任せる（16:10 か正方形）
   _logo は _thumb と併用。ロゴを 16:10 の白枠に余白つきで収める（取り組みの制度カード）*/
.c-media {
	display: grid;
	gap: var(--sp-s);
	align-items: start;

	&._center { align-items: center; }

	& .c-media-pic {
		display: block;
		aspect-ratio: 16 / 10;
		background-color: var(--cl-bg-sub);
		overflow: clip;
	}

	& .c-media-pic img { width: 100%; height: 100%; object-fit: cover; }

	&._thumb .c-media-pic { aspect-ratio: auto; }
	&._thumb .c-media-pic img { height: auto; }

	/* 制度・認証のロゴ。比率がバラバラなので 16:10 の白枠に contain で収める（切らない）*/
	&._logo .c-media-pic { aspect-ratio: 16 / 10; padding: var(--sp-xs); background-color: var(--cl-bg); border: 1px solid var(--cl-line); }
	&._logo .c-media-pic img { height: 100%; object-fit: contain; }

	/* _icon は画像の代わりにアイコンを左に置く（写真が用意できるまでのサービス詳細）。SPでも左右に並べる */
	&._icon { grid-template-columns: auto 1fr; }
	&._icon .c-media-pic { aspect-ratio: auto; background-color: transparent; overflow: visible; }
	&._icon .c-media-pic .u-ico { display: block; font-size: 4.8rem; }

	& .c-media-body { display: grid; gap: var(--sp-xs); align-content: start; }
	/* 画像の無い制度（ロゴが無い宣言など）は本文だけで全幅にする */
	& .c-media-body:only-child { grid-column: 1 / -1; }
	& .c-media-label { justify-self: start; color: var(--cl-text-sub); font-size: var(--fs-ui); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
	/* ラベルの中で1語だけ強調する（例：資料の「お申し込みが必要」）*/
	& .c-media-label strong { color: var(--cl-accent); }
	& .c-media-title { font-size: var(--fs-ml); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.015em; }
	& .c-media-lead { font-size: var(--fs-lead); font-weight: var(--fw-med); line-height: var(--lh-body); letter-spacing: -0.01em; }
	& .c-media-txt { line-height: var(--lh-body); }
	/* 要点を罫線区切りで並べる */
	& .c-media-list { display: grid; font-size: var(--fs-s); line-height: var(--lh-body); }
	& .c-media-list > li { padding-block: 0.7em; border-block-start: 1px solid var(--cl-line); color: var(--cl-text-sub); }
	& .c-media-meta { color: var(--cl-text-sub); font-size: var(--fs-ui); }
	& .c-media-body > .c-btn { justify-self: start; }
}

/* 白地の一覧は項目の間を --sp-l（画像＋本文の組が詰まって見えないように）*/
.c-mediaList {
	display: grid;
	gap: var(--sp-l);
}

/* f5 セクションの上で一覧にするときは白カード（§9）。1つだけ置く c-media は面なしのまま */
.c-sec._bg .c-mediaList {
	gap: var(--sp-s);

	& .c-media { padding: var(--card-pad); background-color: var(--cl-bg); border-radius: var(--radius); }
}

@media print, screen and (min-width: 640px) {
	.c-media {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-m);

		&._thumb { grid-template-columns: 28rem 1fr; }
		&._rev .c-media-pic { order: 1; }
		&._icon { grid-template-columns: auto 1fr; gap: var(--sp-s); }
		&._icon .c-media-pic .u-ico { font-size: 6.4rem; }
	}
}

/* ---- 数字（そのサービスの実績・期間などを短く見せる）--------------------
   中央寄せ。PCでは縦の区切り線で4分割する（円で囲まない＝他の作法に合わせる） */
.c-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-m) var(--sp-s);
	text-align: center;
}

.c-stats-item {
	display: grid;
	gap: 0.3em;
	align-content: start;

	& .c-stats-num {
		font-size: var(--fs-2xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.03em;
	}

	& .c-stats-num span { font-size: var(--fs-l); letter-spacing: 0; }
	& .c-stats-label { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }
}

/* _col3：項目が3つのとき。数字の範囲（30〜35%）も折り返さない。SP の3つ目は1列ぶん使う */
.c-stats._col3 .c-stats-num { white-space: nowrap; }
.c-stats._col3 .c-stats-item:last-child { grid-column: 1 / -1; }

@media print, screen and (min-width: 640px) {
	.c-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}

	.c-stats-item {
		padding-inline: var(--sp-s);

		& + .c-stats-item { border-inline-start: 1px solid var(--cl-line); }
	}

	.c-stats._col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-stats._col3 .c-stats-item:last-child { grid-column: auto; }
}

/* ---- カード（汎用）---------------------------------------------------- */
/* 列数は必ず _col2 / _col3 / _col4 で明示する（auto-fill / auto-fit は使わない）。SP は1列、640 以上で指定の列数 */
.c-cardList {
	display: grid;
	gap: var(--sp-m) var(--sp-s);
}

@media print, screen and (min-width: 640px) {
	.c-cardList._col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c-cardList._col3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-cardList._col4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 記事カードで使う日付＋カテゴリの行 */
.c-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	color: var(--cl-text-sub);
	font-size: var(--fs-s);
	line-height: var(--lh-ui);
}

/* ---- 画像枠（16:10）と画像のホバー -------------------------------------
   c-card の画像枠。カードの外（トップの実績帯）でも単体で使う。
   画像のホバーはサイト内でこの1種類だけ：リンクに乗ったら画像を 1.03 倍（枠からははみ出さない）。
   対象は c-card・実績帯・c-work・c-post・c-linkCard（メニュー）・c-heroSlide の画像。リンクでない画像（c-media 等）は動かさない。ページ側では書かない */
.c-card-pic {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--cl-bg-sub);
	overflow: clip;

	& img { width: 100%; height: 100%; object-fit: cover; }
}

:is(.c-card-pic, .c-work-pic, .c-post-pic, .c-linkCard-pic, .c-heroSlide) img { transition: scale var(--ease-t-fast); }

@media (any-hover: hover) {
	:is(a:hover :is(.c-card-pic, .c-work-pic, .c-post-pic, .c-linkCard-pic), a.c-card-pic:hover, .c-heroSlide:hover) img { scale: 1.03; }
}

.c-card {
	display: grid;
	gap: var(--sp-xs);
	align-content: start;

	/* 画像の下の小さなラベル（事例の種別・部署の動詞・進め方の軸など）*/
	& .c-card-label { justify-self: start; color: var(--cl-text-sub); font-size: var(--fs-ui); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
	/* ラベルの中で1語だけ強調する（例：資料の「お申し込みが必要」）*/
	& .c-card-label strong { color: var(--cl-accent); }
	/* タイトル・本文は2行固定：2行分の高さを確保し、3行目以降は省略（並べたときに下の矢印リンクの位置がそろう）*/
	& :is(.c-card-title, .c-card-txt) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		min-block-size: 2lh;
	}
	& .c-card-title { font-size: var(--fs-m); font-weight: 700; line-height: var(--lh-tight); }
	& .c-card-txt { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-body); }
	/* 要点を罫線区切りで2〜3行 */
	& .c-card-list { display: grid; font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-card-list > * { padding-block: 0.7em; border-block-start: 1px solid var(--cl-line); color: var(--cl-text-sub); }
	& .c-linkArrow { margin-block-start: 0.4em; }

	/* 見出しを大きく（トップの入口・事例・部署など、カードの数が少ないとき）*/
	&._lg .c-card-title { font-size: var(--fs-l); font-weight: var(--fw-head); letter-spacing: -0.01em; }
	/* _lg（部署カード・2つの入口）は省略しない。高さも確保しない（部署名1行の下に空きができるため）*/
	&._lg :is(.c-card-title, .c-card-txt) { display: block; overflow: visible; min-block-size: auto; }
}

/* f5 セクションの上では白カードにする（§9）。画像は角から角まで、文字には内側の余白 */
.c-sec._bg .c-card {
	padding-block-end: var(--card-pad-sm);
	background-color: var(--cl-bg);
	border-radius: var(--radius);
	overflow: clip;

	& > :not(.c-card-pic) { margin-inline: var(--card-pad-sm); }
	& > :first-child:not(.c-card-pic) { margin-block-start: var(--card-pad-sm); }
}

@media (any-hover: hover) {
	/* 面なし・白カード共通：見出しとリンク矢印の色だけ変える（浮かせるのは白カードのときだけ。下の「ホバー」）*/
	a.c-card:hover { opacity: 1; }
	a.c-card:hover :is(.c-card-title, .c-linkArrow) { color: var(--cl-accent); }
}

/* ---- ホバー（白カードを浮かせる）------------------------------------------
   静止状態では影を使わない（§9）。ホバーのときだけ薄い影（--cl-shadow）＋2px 持ち上げる。
   対象は白カードだけ：c-card・c-media（f5 上の白カードのとき）、c-issueCard、c-localNav の c-linkCard、
   c-ctaBox、p-issWay-box、c-step（_plain 以外）。面なしの c-card／c-media は浮かせない。ページ側では書かない。
   ホバーは a 要素のときだけ（先頭の a: で保証する）。リンクのない div の白カードは浮かせない */
a:is(.c-sec._bg .c-card, .c-sec._bg .c-mediaList .c-media, .c-issueCard, .c-localNav .c-linkCard, .c-ctaBox, .p-issWay-box, .c-steps:not(._plain) .c-step) {
	transition: translate var(--ease-t-fast), box-shadow var(--ease-t-fast), color var(--ease-t-fast);
}

@media (any-hover: hover) {
	a:is(.c-sec._bg .c-card, .c-sec._bg .c-mediaList .c-media, .c-issueCard, .c-localNav .c-linkCard, .c-ctaBox, .p-issWay-box, .c-steps:not(._plain) .c-step):hover {
		translate: 0 -0.2rem;
		box-shadow: 0 0.4rem 1.6rem var(--cl-shadow);
	}
}

/* ---- 実績カード（旧 inc_workitem.php 相当）-----------------------------
   タイトル＝クライアント名、その下に SCF の works_name（案件名）を出す。 */
.c-workList {
	display: grid;
	gap: var(--sp-m) var(--sp-s);
}

/* 列数は明示（640 以上は3列）。件数が少なくてもカードは伸びない */
@media print, screen and (min-width: 640px) {
	.c-workList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-work {
	display: grid;
	gap: var(--sp-xs);
	/* 画像・タイトル・メタの3段。タイトルの行数が違っても、メタの位置がそろう */
	grid-template-rows: auto 1fr auto;

	& .c-work-pic {
		align-self: start;
		width: 100%;
		aspect-ratio: 16 / 10;
		background-color: var(--cl-bg-sub);
		overflow: clip;
	}

	& .c-work-pic img { width: 100%; height: 100%; object-fit: cover; }

	/* タイトルは「何をしたか」が分かる文にする（クライアント名＋制作物名の羅列にしない）*/
	& .c-work-title {
		font-size: var(--fs-m);
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
		text-wrap: pretty;
		word-break: auto-phrase;
		/* 文節の最小幅でカードが広がらないように */
		overflow-wrap: anywhere;
		/* 2行分の高さを取り、1行のタイトルでもタグの位置をそろえる */
		min-block-size: 2lh;
	}

	/* クライアント名とタグを1行に。制作ジャンルはタイトルに入るのでタグから外す */
	& .c-work-meta {
		margin-block-start: var(--sp-xs);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4em 1em;
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		line-height: var(--lh-ui);
	}

	& .c-work-client::after { content: "／"; margin-inline-start: 1em; color: var(--cl-text-sub); }
}

/* ---- ヒーロー用の画像スライダー -----------------------------------------
   サービスごとに用意した「この枠のための画」を並べる。左端は本文（1200）の線、
   右は画面の端まで流す。画像は角丸、左下にテキストを重ねる。 */
.c-heroSlider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 30rem;
	gap: 1.6rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	padding-inline: max(var(--gutter), (100% - var(--w-inner)) / 2);
	scroll-padding-inline-start: max(var(--gutter), (100% - var(--w-inner)) / 2);
	scrollbar-width: none;
	cursor: grab;

	&::-webkit-scrollbar { display: none; }
	& > * { scroll-snap-align: start; }
	&.is-dragging { cursor: grabbing; }
	&.is-dragging a { pointer-events: none; }
}

/* ★スライドの大きさはここで決める（1枚の幅）*/
@media print, screen and (min-width: 640px) {
	.c-heroSlider { grid-auto-columns: 44rem; }
}

@media print, screen and (min-width: 640px) {
	.c-heroSlider { grid-auto-columns: 84rem; }

	.c-heroSlide .c-heroSlide-title { font-size: var(--fs-ml); }
}

/* スライド：画像（16:10）の上に、左下へカテゴリ＋タイトル＋リンクを重ねる。
   画像の上に文字を重ねるのはこのパーツだけ（design-direction §9 の例外）。画像の角丸は0 */
.c-heroSlide {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: clip;
	background-color: var(--cl-bg-sub);
	color: var(--cl-text-inverse);

	& img { width: 100%; height: 100%; object-fit: cover; }

	/* 文字を読ませるための影 */
	&::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 45%;
		background: var(--cl-overlay);
	}

	& .c-heroSlide-body {
		position: absolute;
		z-index: 1;
		inset-inline-start: var(--card-pad);
		inset-block-end: var(--card-pad);
		inset-inline-end: var(--card-pad);
		display: grid;
		gap: 0.4em;
	}

	& .c-heroSlide-cat { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; opacity: 0.85; }
	& .c-heroSlide-title { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; overflow-wrap: anywhere; }
	& .c-linkArrow { color: var(--cl-text-inverse); }
}

@media (any-hover: hover) {
	.c-heroSlide:hover { opacity: 1; }
	.c-heroSlide:hover .c-linkArrow::after { translate: 0.4rem 0; }
}

/* スライダーの前後ボタン。本文（1200）の右端にそろえる */
.c-slider-nav {
	display: flex;
	justify-content: end;
	gap: 1rem;
	width: min(var(--w-inner), 100% - var(--gutter) * 2);
	margin-inline: auto;
	margin-block-start: var(--sp-s);
}

.c-slider-btn {
	display: grid;
	place-content: center;
	width: 4.8rem;
	height: 4.8rem;
	padding: 0;
	border: 1px solid var(--cl-line);
	border-radius: 50%;
	background-color: transparent;
	color: var(--cl-text);
	cursor: pointer;
	transition: color var(--ease-t), border-color var(--ease-t);

	&::before {
		content: "";
		width: 1.8rem;
		height: 1.8rem;
		background-color: currentColor;
		-webkit-mask: url(../images/common/icons/arrow-right.svg) no-repeat center / contain;
		mask: url(../images/common/icons/arrow-right.svg) no-repeat center / contain;
	}

	&._prev::before { rotate: 180deg; }
	&:disabled { opacity: 0.3; cursor: default; }
}

@media (any-hover: hover) {
	.c-slider-btn:not(:disabled):hover { color: var(--cl-accent); border-color: var(--cl-accent); }
}

/* ---- コラム／ニュースのリストアイテム ----------------------------------- */
.c-postList {
	display: grid;
	border-block-start: 1px solid var(--cl-line);
}

.c-post {
	display: grid;
	gap: 0.25em;
	/* 左右にも少し余白を取り、ホバーの背景（f5）が文字に張り付かないようにする */
	padding: var(--sp-s) var(--sp-xs);
	border-block-end: 1px solid var(--cl-line);
	transition: background-color var(--ease-t-fast);

	& .c-post-meta { display: flex; align-items: center; gap: 1em; }
	& .c-post-date { color: var(--cl-text-sub); font-size: var(--fs-s); line-height: var(--lh-ui); }
	& .c-post-title { font-size: var(--fs-m); font-weight: 700; line-height: var(--lh-tight); }
}

/* アイキャッチ付き（トップのお知らせ）。左に小さめの16:10、右にメタ＋タイトルの2段 */
.c-post._pic {
	grid-template-columns: 10rem 1fr;
	align-content: center;
	column-gap: var(--sp-s);

	& .c-post-pic { grid-row: span 2; align-self: center; aspect-ratio: 16 / 10; background-color: var(--cl-bg-sub); overflow: clip; }
	& .c-post-pic img { width: 100%; height: 100%; object-fit: cover; }
}

@media print, screen and (min-width: 640px) {
	.c-post._pic { grid-template-columns: 16rem 1fr; }
}

/* リスト行のホバー：白セクションの上では背景を f5 に（影は使わない）*/
@media (any-hover: hover) {
	.c-sec:not(._bg) .c-post:hover { background-color: var(--cl-bg-sub); opacity: 1; }
}

/* ---- 実績カテゴリナビ（旧 inc_workcat.php 相当）------------------------- */
.c-workNav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-xs) var(--sp-s);

	& a { color: var(--cl-text-sub); font-weight: 700; }
	& .is-active { color: var(--cl-text); text-decoration: underline; text-underline-offset: 0.4em; }
}

/* ---- パンくず --------------------------------------------------------- */
.c-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	color: var(--cl-text-sub);
	font-size: var(--fs-xs);   /* 12px 固定 */
	line-height: var(--lh-ui);

	& li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5em; }

	/* リンクのある項目は黒。現在地だけグレーのまま */
	& a { color: var(--cl-text); }

	/* 先頭はロゴマーク（読み上げ用のテキストは残す） */
	& .c-breadcrumb-home { display: inline-flex; align-items: center; }
	/* リンクとして機能するアイコン：文字色に追従し、ホバーでオレンジ（§8）*/
	& .c-breadcrumb-home .u-ico { width: 1.3rem; height: 1.35rem; background-color: currentColor; }
}

@media (any-hover: hover) {
	.c-breadcrumb a:hover { color: var(--cl-accent); opacity: 1; }
}

/* ---- ページネーション（旧 my_paginate 相当）----------------------------- */
.c-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-xs);

	/* SP は数字のリストを出さず、「1 / 14」（c-pager-pos）に置き換える。PC は数字のリスト（下の @media）*/
	& .c-pager-list { display: none; align-items: center; gap: 0.5em; }

	& :is(.c-pager-num, .c-pager-arrow) {
		display: grid;
		place-content: center;
		min-width: 4rem;
		min-height: 4rem;
		line-height: var(--lh-ui);
	}

	/* 現在地。面は敷かず、アクセントの文字＋下線 */
	& .is-current { color: var(--cl-accent); font-weight: var(--fw-bold); text-decoration: underline 2px; text-underline-offset: 0.3em; }
	& .c-pager-pos { color: var(--cl-text-sub); font-size: var(--fs-s); }
	/* 前後の矢印はリンクとして機能するアイコン：文字色に追従し、ホバーでオレンジ（§8）*/
	& .c-pager-arrow .u-ico { background-color: currentColor; }
	/* 前へは、次への矢印（右向き）を反転して使う */
	& .c-pager-arrow._prev .u-ico { scale: -1 1; }
}

@media print, screen and (min-width: 640px) {
	.c-pager .c-pager-list { display: flex; }
	.c-pager .c-pager-pos { display: none; }
}

@media (any-hover: hover) {
	a.c-pager-arrow:hover { color: var(--cl-accent); opacity: 1; }
}

/* ---- 目次 -------------------------------------------------------------
   Table of Contents Plus の出力を新テーマ側で上書きする前提の骨格。
   WP化のときにプラグイン側の出力へこのクラスを付ける（ID セレクタは使わない）。 */
.c-toc {
	padding: var(--card-pad);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& .c-toc-title { font-weight: 700; }
	& .c-toc-list { display: grid; gap: 0.5em; margin-block-start: var(--sp-xs); }
	& .c-toc-list .c-toc-list { margin-block-start: 0.5em; padding-inline-start: 1em; }
	& a { text-decoration: underline; }
}

/* ---- フォーム ---------------------------------------------------------
   プラグイン非依存の汎用マークアップ。CF7 / Snow Monkey Forms どちらでも使える形。 */
.c-form {
	display: grid;
	gap: var(--sp-s);
}

.c-formRow {
	display: grid;
	gap: var(--sp-xs);

	& .c-formRow-label { display: flex; align-items: center; gap: 0.5em; font-weight: 700; }
	& .c-formRow-note { color: var(--cl-text-sub); font-size: var(--fs-s); }
	& .c-formRow-err { color: var(--cl-error); font-size: var(--fs-s); }
}

/* 必須ラベル。面を敷かず、文字色だけで示す */
.c-req {
	color: var(--cl-error);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
}

.c-choice {
	display: grid;
	gap: var(--sp-xs);

	/* 1行のときは上下中央、折り返したときは1行目に合わせる */
	& label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6em; cursor: pointer; line-height: var(--lh-body); }
	& input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: var(--cl-accent); }
}

@media print, screen and (min-width: 640px) {
	/* 選択肢が多いときは2列にして、縦に長くなりすぎないようにする */
	.c-choice._col2 { grid-template-columns: 1fr 1fr; }
}

.c-formFoot {
	display: grid;
	gap: var(--sp-s);
	justify-items: center;
	/* 送信ボタンの下は広めに空ける（次の要素と近いと押しづらい）*/
	margin-block-end: var(--sp-m);
}

/* 送信の前に置く同意。ボタン周りに説明文を散らさず、ここに集約する */
/* 枠で囲まず、上下の余白だけで送信ボタンの前に置く */
.c-formConsent {
	justify-self: stretch;
	padding-block: var(--sp-xs);

	& label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.6em; justify-content: center; cursor: pointer; }
	& input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: var(--cl-accent); }
	& a { text-decoration: underline; text-underline-offset: 0.2em; }
	& .c-req { margin-inline-start: 0.5em; }
}

@media print, screen and (min-width: 640px) {
	.c-formConsent label { justify-self: center; }
}

/* ---- Contact Form 7 の出力に合わせる（cf7/*.txt）------------------------------------------
   CF7 は、入力欄を span.wpcf7-form-control-wrap で包み、選択肢も span で包む。見た目を崩さないよう、包みは「無いもの」として扱う。
   CF7 標準の CSS は読んでいない（inc/forms.php）。 */
.wpcf7-form {
	& .wpcf7-form-control-wrap { display: block; }
	& .wpcf7-spinner { display: none; }

	/* CF7 標準の CSS で隠していたもの。hidden の入力を入れる枠（fieldset）と、読み上げ用の結果の文 */
	& .hidden-fields-container { display: none; }

	/* 入力のエラー（CF7 が項目の下に出す）と、送信結果のメッセージ */
	& .wpcf7-not-valid-tip { display: block; color: var(--cl-error); font-size: var(--fs-s); }
	& .wpcf7-response-output { margin: 0; color: var(--cl-error); font-size: var(--fs-s); text-align: center; }
	& .wpcf7-response-output:empty { display: none; }
	/* 入力のエラーは、項目の下の1つだけにする（フォームの上下に、まとめのエラー文は出さない）*/
	&:is(.invalid, .unaccepted, [data-status="invalid"], [data-status="unaccepted"]) .wpcf7-response-output { display: none; }
}

/* c-form は display: grid なので、hidden 属性だけでは隠れない */
.c-form[hidden] { display: none; }

/* CF7 の読み上げ用の結果の文。form の外（div.wpcf7 の直下）に出る。画面には出さない（エラーは項目の下の1つだけ）*/
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.c-choice,
.c-formConsent {
	& .wpcf7-form-control-wrap,
	& .wpcf7-form-control,
	& .wpcf7-list-item { display: contents; margin: 0; }
}

/* 送信ボタンは、CF7 では input[type=submit]。c-btn の見た目に合わせて、余計な枠・背景を持ち込まない */
.wpcf7-form input[type="submit"].c-btn { appearance: none; cursor: pointer; }

/* 確認画面 */
.c-formConfirm {
	display: grid;
	gap: var(--sp-s);

	& .c-formConfirm-row { display: grid; gap: 0.25em; padding-block-end: var(--sp-xs); border-block-end: 1px solid var(--cl-line); }
	& .c-formConfirm-label { color: var(--cl-text-sub); font-size: var(--fs-s); }
	& .c-formConfirm-val { line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* 完了画面。ページの主役なので、見出しもアイコンも大きく取る */
.c-formDone {
	display: grid;
	gap: var(--sp-s);
	justify-items: center;
	padding-block: var(--sp-m);
	text-align: center;

	& .u-ico { font-size: 8rem; }

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

	& .c-formDone-txt { max-width: var(--w-text); line-height: var(--lh-body); }
	& .c-formDone-note { max-width: var(--w-text); color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }
}

/* ---- リンクカード（サムネ＋タイトル＋一言＋矢印）とメガメニューの中身 -------------------------------------------------
   PC：ヘッダー下のパネルに1グループだけ表示
   SP：フルスクリーンメニューに全グループを縦積み
   どちらも同じマークアップを使う（layout.css の .header-mega 参照）*/
.c-megaGroup {
	display: grid;
	gap: var(--sp-s);

	& .c-megaGroup-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); }
	& .c-megaGroup-title { margin-block-start: 0.6rem; font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }
	& .c-megaGroup-txt { margin-block-start: 0.8rem; color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-megaGroup-head p + p { margin-block-start: var(--sp-xs); }
}

.c-megaList {
	display: grid;
	align-content: start;   /* 伸ばさない＝カードの高さをどのグループでも揃える */
	gap: 0.4rem;
}

.c-linkCard {
	display: grid;
	grid-template-columns: 5.6rem 1fr auto;
	align-items: center;
	gap: 1.2rem;
	padding: 0.8rem;
	border-radius: var(--radius);
	transition: background-color var(--ease-t);

	& .c-linkCard-pic {
		/* メニューのサムネイルだけ正方形（横に並ぶ情報量を優先）*/
		aspect-ratio: 1;
		overflow: clip;
		background-color: var(--cl-bg-sub);
	}

	& .c-linkCard-pic img { width: 100%; height: 100%; object-fit: cover; }

	/* サムネイルの代わりにアイコンを置く版（課題・会社情報）。列はアイコンの幅に詰め、本文との間はサムネ版と同じ gap */
	&:has(.c-linkCard-ico) { grid-template-columns: auto 1fr auto; }
	& .c-linkCard-ico { font-size: 3.6rem; }

	& .c-linkCard-body { display: grid; gap: 0.2em; }
	& .c-linkCard-title {
		font-size: var(--fs-s);
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
		/* 2行になるときは文節で折り返す */
		text-wrap: pretty;
		word-break: auto-phrase;
		overflow-wrap: anywhere;
		transition: color var(--ease-t);
	}
	& .c-linkCard-txt { color: var(--cl-text-sub); font-size: var(--fs-xs); line-height: var(--lh-body); }

	&::after {
		content: "";
		width: 1.8rem;
		height: 1.8rem;
		/* c-linkArrow と同じ黒丸。ホバーでオレンジ（グレーの矢印は使わない）*/
		background-color: var(--cl-text);
		-webkit-mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow.svg) no-repeat center / contain;
		transition: background-color var(--ease-t), translate var(--ease-t);
	}
}

@media (any-hover: hover) {
	.c-linkCard:hover {
		background-color: var(--cl-bg);
		opacity: 1;
	}

	/* タイトルと矢印をオレンジにして、矢印を少し進ませる（補足文は灰色のまま）*/
	.c-linkCard:hover .c-linkCard-title { color: var(--cl-accent); }
	.c-linkCard:hover::after { background-color: var(--cl-accent); translate: 0.4rem 0; }
}

@media print, screen and (min-width: 640px) {
	.c-megaGroup { grid-template-columns: 22rem 1fr; gap: var(--sp-m); }
	.c-megaGroup .c-megaGroup-head { align-self: start; }
	.c-megaList { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }

	/* PC は矢印をタイトルの後ろに付ける（c-ctaSub と同じ考え方・同じ線の矢印）。大きさはタイトルの文字と同じ */
	.c-linkCard { grid-template-columns: 5.6rem 1fr; }
	.c-linkCard:has(.c-linkCard-ico) { grid-template-columns: auto 1fr; }
	.c-linkCard::after { content: none; }
	.c-linkCard-title::after {
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-inline-start: 0.3em;
		vertical-align: -0.15em;
		background-color: var(--cl-text);
		-webkit-mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		mask: url(../images/common/ico_arrow_sm.svg) no-repeat center / contain;
		transition: background-color var(--ease-t), translate var(--ease-t);
	}
}

@media (any-hover: hover) and (min-width: 640px) {
	.c-linkCard:hover .c-linkCard-title::after { background-color: var(--cl-accent); translate: 0.4rem 0; }
}

/* ---- 会社情報のブランドブロック --------------------------------------
   フッター左下と、SPメニューの最下部で同じものを使う。
   幅・並びは置き場所側（layout.css）で調整する */
.c-brand {
	display: grid;
	gap: var(--sp-s);
	align-content: start;

	& .c-brand-logo img { width: 15rem; }
	& .c-brand-url img { width: 14rem; margin-block-start: 0.5rem; }

	& .c-brand-addr { font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-brand-addr .c-brand-name { font-weight: var(--fw-bold); }

	& .c-brand-addr dt {
		margin-block-start: var(--sp-xs);
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		letter-spacing: 0.08em;
	}
}

.c-brand-sns {
	display: flex;
	gap: var(--sp-xs);

	& a {
		display: grid;
		place-content: center;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		background-color: var(--cl-bg-sub);
		font-size: 1.6rem;
		transition: background-color var(--ease-t), color var(--ease-t);
	}

	/* リンクとして機能するアイコン：文字色に追従し、ホバーでオレンジ（§8）*/
	& .u-ico { background-color: currentColor; }
}

@media (any-hover: hover) {
	.c-brand-sns a:hover { color: var(--cl-accent); opacity: 1; }
}

.c-brand-badges {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: start;
	align-items: center;
	gap: 1.6rem;

	/* 縦長（SECURITY ACTION）と横長（パートナーシップ）が並ぶので、幅ではなく高さで指定する。
	   同じ高さだと横長が大きく見えるので、横長（_wide）は 4rem に下げる */
	& img { width: auto; height: 6rem; }
	& img._wide { height: 4rem; }
}

/* ---- 一覧のタブ（すべて／コラム／ナレッジ など）--------------------------
   WPでは投稿タイプ・タクソノミー別のアーカイブへのリンクになる */
.c-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.c-tab {
	display: grid;
	place-content: center;
	padding: 0.8em 1.6em;
	border: 1px solid var(--cl-line);
	border-radius: 999px;
	color: var(--cl-text-sub);
	font-size: var(--fs-ui);
	font-weight: var(--fw-bold);
	line-height: var(--lh-ui);
	transition: background-color var(--ease-t), border-color var(--ease-t), color var(--ease-t);

	/* 表示中のタブ */
	&.is-current {
		border-color: var(--cl-accent);
		color: var(--cl-accent);
		text-decoration: underline 2px;
		text-underline-offset: 0.3em;
	}
}

@media (any-hover: hover) {
	.c-tab:not(.is-current):hover { color: var(--cl-accent); opacity: 1; }
}

/* 一覧の絞り込み（実績・事例）。「サービス別」「業種別」などのラベルつきで c-tabs を段に並べる。
   WP ではタクソノミー一覧へのリンクになる */
.c-tabFilter {
	display: grid;
	gap: var(--sp-s);
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .c-tabFilter-row { display: grid; gap: var(--sp-xs); }
	& .c-tabFilter-label { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
	& .c-tabs { gap: 0.6rem; }
}

@media print, screen and (min-width: 640px) {
	.c-tabFilter .c-tabFilter-row { grid-template-columns: 10rem 1fr; align-items: start; gap: var(--sp-s); }
	.c-tabFilter .c-tabFilter-label { padding-block-start: 0.9em; }
}

/* ---- 人物カード（スタッフ紹介・拠点の担当者）------------------------------
   正方形の写真＋役割・名前（英字）・紹介文・タグ・得意／苦手。
   一覧は c-memberList（640 以上で3列）。1人を大きく見せるときは _lg（PC で写真 32rem＋本文の横並び）*/
.c-memberList {
	display: grid;
	gap: var(--sp-m) var(--sp-s);
}

.c-member {
	display: grid;
	gap: var(--sp-s);
	align-content: start;

	& .c-member-pic { aspect-ratio: 1; overflow: clip; background-color: var(--cl-bg-sub); }
	& .c-member-pic img { width: 100%; height: 100%; object-fit: cover; }

	& .c-member-body { display: grid; gap: 0.6em; align-content: start; }
	& .c-member-role { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; }

	& .c-member-name {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.6em;
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
	}

	& .c-member-en { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; }
	& .c-member-txt { color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-member-tags { display: flex; flex-wrap: wrap; gap: 0.5em; }
	& .c-member-dl { display: grid; gap: 0.3em; font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-member-dl dt { color: var(--cl-text-sub); font-weight: var(--fw-bold); }

	/* 1人を大きく見せる（福岡拠点の担当者など）*/
	&._lg .c-member-body { gap: var(--sp-xs); max-width: var(--w-text); }
	&._lg .c-member-name { gap: 0.8em; font-size: var(--fs-xl); letter-spacing: -0.015em; }
	&._lg .c-member-en { font-size: var(--fs-ui); }
}

@media print, screen and (min-width: 640px) {
	.c-memberList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-member._lg { grid-template-columns: 32rem 1fr; gap: var(--sp-m); align-items: start; }
}

/* ---- 記事の執筆者（EEAT）------------------------------------------------
   著者アーカイブは作らないので、リンク先はスタッフ紹介ページ（D14）*/
.c-author {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--sp-s);
	padding: var(--card-pad-sm);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);

	& .c-author-pic { width: 8rem; aspect-ratio: 1; overflow: clip; border-radius: 50%; }
	& .c-author-pic img { width: 100%; height: 100%; object-fit: cover; }
	& .c-author-label { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
	& .c-author-name { margin-block-start: 0.2em; font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); }
	& .c-author-txt { margin-block-start: 0.4em; color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }
	& .c-linkArrow { margin-block-start: 0.6em; }
}

/* ---- 吹き出し（てばくんブログ）------------------------------------------
   記事本文で使う会話パーツ。_left＝アイコンが左、_right＝アイコンが右。
   現行サイトは WP のカラムブロック（.p-balloon -left / -right）で組まれているので、
   既存記事の互換スタイルは article.css 側に置く */
/* WP のブロックエディタで作る吹き出し（ブロックパターン）では、グループの中身が .wp-block-group__inner-container で包まれる。
   プロトタイプ（包みなし）と同じ見た目にするため、grid などは「包みがあればその中身、なければ自分」に当てる
   （ルールの例外：WP の出力クラスを指定する。docs/wp-structure.md「実績・事例の説明文」）。 */
.c-balloon:not(:has(> .wp-block-group__inner-container)),
.c-balloon > .wp-block-group__inner-container {
	display: grid;
	/* 吹き出しは、短い文は文字の幅に合わせ、長い文は列の幅（画面）で折り返す。
	   minmax(0, max-content)：最大でも「1行に並べた幅」まで広がり、足りなければ縮む（はみ出さない）。auto ではないので、余白に引き伸ばされない */
	grid-template-columns: max-content minmax(0, max-content);
	align-items: start;
	gap: var(--sp-xs);
}

/* アイコンを右に置く（自分側の発言）。全体を右端に寄せる */
.c-balloon._right:not(:has(> .wp-block-group__inner-container)),
.c-balloon._right > .wp-block-group__inner-container {
	grid-template-columns: minmax(0, max-content) max-content;
	justify-content: end;
}

.c-balloon-icon,
.c-balloon-icon > .wp-block-group__inner-container {
	display: grid;
	gap: 0.4em;
	justify-items: center;
}

.c-balloon {
	& .c-balloon-icon { width: 8rem; }
	/* アイコン画像は、枠（円）の中に全体が収まるように contain */
	& .c-balloon-icon img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
	& .c-balloon-icon figure { margin: 0; width: 100%; }
	& .c-balloon-name { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-tight); text-align: center; }

	& .c-balloon-body {
		position: relative;
		padding: var(--card-pad-sm);
		background-color: var(--cl-bg-sub);
		border-radius: var(--radius);
		line-height: var(--lh-body);
	}

	/* 吹き出しのしっぽ */
	& .c-balloon-body::before {
		content: "";
		position: absolute;
		inset-block-start: 2.4rem;
		inset-inline-start: -0.8rem;
		width: 1.6rem;
		height: 1.6rem;
		background-color: inherit;
		rotate: 45deg;
	}

	&._right .c-balloon-icon { order: 2; }
	&._right .c-balloon-body::before { inset-inline: auto -0.8rem; }
}

/* ---- FAQ（details のネイティブ実装）--------------------------------------
   サービス詳細・オンライン部署など、質問と答えを並べる場所で共通に使う */
.c-faq {
	border-block-start: 1px solid var(--cl-line);

	& details { border-block-end: 1px solid var(--cl-line); }

	& summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-xs);
		padding-block: var(--sp-s);
		font-weight: 700;
		line-height: var(--lh-tight);
		cursor: pointer;
		list-style: none;
	}

	& summary::-webkit-details-marker { display: none; }

	& summary::after {
		content: "";
		flex: none;
		width: 2.4rem;
		height: 2.4rem;
		background-color: currentColor;
		-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);
	}

	& details[open] summary::after { rotate: 180deg; }

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

	& details[open]::details-content { block-size: auto; }
	& .c-faq-body { padding-block-end: var(--sp-s); max-width: var(--w-text); color: var(--cl-text-sub); line-height: var(--lh-body); }
}

/* ---- 同じ階層のページへの横リンク --------------------------------------
   読み終えたあとに兄弟ページへ渡すためのもの。**ページの下部に置く**。
   上部に置くと本題の前に選択肢を出すことになるため使わない。
   中身はメガメニューと同じ c-linkCard（サムネ＋タイトル＋一言＋矢印）*/
.c-localNav {
	display: grid;
	gap: 0.8rem;
	margin-block-start: var(--sp-m);
}

/* ページの中では、メニューより一回り大きく置く。f5 のセクションの上の白カード（枠なし・影なし）。
   リンク先があるテキストなので白カード（design-direction §9）*/
.c-localNav .c-linkCard {
	grid-template-columns: 8rem 1fr auto;
	gap: var(--sp-xs);
	padding: var(--card-pad-sm);
	border-radius: var(--radius);
	background-color: var(--cl-bg);
}

/* サムネイルの代わりにアイコンを置く版（トップの会社ブロック・課題／会社情報のページ下部）。
   アイコンと本文の間は c-ctaSub と同じ --sp-xs（サムネ版と同じ値）*/
.c-localNav .c-linkCard:has(.c-linkCard-ico) { grid-template-columns: auto 1fr auto; }

.c-localNav .c-linkCard-title { font-size: var(--fs-m); }
.c-localNav .c-linkCard-txt { font-size: var(--fs-ui); }
.c-localNav .c-linkCard::after { width: 2.4rem; height: 2.4rem; }

@media (any-hover: hover) {
	.c-localNav .c-linkCard:hover { color: var(--cl-accent); }
}

@media print, screen and (min-width: 640px) {
	.c-localNav { grid-template-columns: 1fr 1fr; gap: var(--sp-xs); }

	/* PC は矢印をタイトルの後ろに付ける（c-linkCard のPC指定を参照）ので、右端の列をなくす */
	.c-localNav .c-linkCard { grid-template-columns: 8rem 1fr; }
	.c-localNav .c-linkCard:has(.c-linkCard-ico) { grid-template-columns: auto 1fr; }
}


/* ---- マーキー（自動で横に流れる帯。トップの実績帯・お取引先ロゴ）-----------------
   row の中に同じ track を偶数本並べ、row を半分動かすと継ぎ目なく回る。
   半分が画面幅より短いと、先頭に戻る直前に右端が空くので、足りなければ track を4本にする。
   track 同士の間も同じ間隔になるよう、gap ではなく track の末尾の余白でそろえる。
   周期は --marquee-t、間隔は --marquee-gap（使う側で上書きする）。
   c-logoMarquee は先にできたロゴ専用の名前。仕組みはここで共有し、タイルの見た目だけ下で持つ */
:is(.c-marquee, .c-logoMarquee) {
	--marquee-gap: var(--sp-s);
	overflow: hidden;
	contain: inline-size;  /* 流れる中身の幅を親に伝えない（grid の中に置いても列が広がらないように）*/
}

:is(.c-marquee-row, .c-logoMarquee-row) {
	display: flex;
	width: max-content;
	animation: c-marquee var(--marquee-t) linear infinite;

	/* 下段は逆向き・少し遅く流す */
	& + & {
		margin-block-start: var(--marquee-gap);
		animation-duration: calc(var(--marquee-t) * 1.25);
		animation-direction: reverse;
	}
}

:is(.c-marquee-track, .c-logoMarquee-track) {
	display: flex;
	flex: none;
	gap: var(--marquee-gap);
	padding-inline-end: var(--marquee-gap);
	list-style: none;

	& li { flex: none; }
}

@keyframes c-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* 動きを減らす設定：止めて、手動で横にスクロールできるようにする */
@media (prefers-reduced-motion: reduce) {
	:is(.c-marquee-row, .c-logoMarquee-row) {
		width: auto;
		overflow-x: auto;
		animation: none;
	}

	:is(.c-marquee-track, .c-logoMarquee-track)[aria-hidden] { display: none; }
}

/* 印刷：止めて、折り返して並べる */
@media print {
	:is(.c-marquee-row, .c-logoMarquee-row) {
		width: auto;
		animation: none;
	}

	:is(.c-marquee-track, .c-logoMarquee-track) { flex: auto; flex-wrap: wrap; }
	:is(.c-marquee-track, .c-logoMarquee-track)[aria-hidden] { display: none; }
}

/* ロゴのタイル（トップのお取引先）。流れる仕組みは上の c-marquee と共通 */
.c-logoMarquee-track {
	& li {
		width: 16rem;
		aspect-ratio: 5 / 2;
		background-color: var(--cl-bg);
	}

	/* 素材側に余白が入っているので、タイルの padding はなし */
	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

@media print, screen and (min-width: 640px) {
	.c-logoMarquee-track li { width: 22rem; }
}

/* ---- 流れるマーカー（ページのキャッチに、読み込み時に左から右へ引く）--------
   行の途中で分かれても1本の線として流れる（2行なら1行目→2行目の順）。
   動きを抑える設定では、animation が止まり、最初から引いた状態で出る。 */
.c-marker {
	/* 文字に重ねず、文字の下に少し隙間を空けて引く。下端は文字の領域の外に出るので、padding で背景の範囲を広げる（行の高さは変わらない）*/
	padding-block-end: 0.04em;
	background: linear-gradient(var(--cl-accent), var(--cl-accent)) no-repeat 0 100% / 100% 0.16em;
	animation: c-marker 1.2s ease-out 0.4s backwards;
}

@keyframes c-marker {
	from { background-size: 0 0.16em; }
}