@charset "utf-8";
/* =========================================================
   home.css — トップページ（/）
   骨格は docs/design-direction.md 5章（下層の入口を並べるスーパーindex）
   順番：KV → 実績チラ見せ → 2つの進め方 → オンライン部署 → 課題 →
         つくったもの → 事例 → 会社 → コラム/お知らせ → CTA
   ========================================================= */

/* ---- 1. KV ＋ ステートメント ---------------------------------------------
   画像は現行サイトのものをそのまま使う（コピーは画像に焼き込み済み）。
   ヘッダーの下にフルブリードで敷き、文言（h1）はその下にテキストで置く。 */
.p-homeKv {
	/* SPは画面いっぱい。PCは 1600px で頭打ちにして、ヘッダーの幅に揃える */
	& .p-homeKv-pic {
		display: block;
		width: 100%;
		margin-inline: auto;
	}

	& .p-homeKv-pic img {
		display: block;
		width: 100%;
		height: auto;
	}

	& .p-homeKv-body { padding-block: var(--sp-l); }

	/* 検索・AIO 用の h1。キャッチの上に小さく置く（隠さない）*/
	& .p-homeKv-label {
		margin-block-end: var(--sp-xs);
		color: var(--cl-text-sub);
		font-size: var(--fs-xs);
		font-weight: var(--fw-normal);
		line-height: var(--lh-body);
	}

	& .p-homeKv-title {
		max-width: var(--w-text);
		font-size: var(--fs-2xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.025em;
	}

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

	& .p-homeKv-btns { display: grid; gap: var(--sp-xs); margin-block-start: var(--sp-m); }
	& .p-homeKv-btns .c-btn { width: 100%; }
}

@media print, screen and (min-width: 640px) {
	.p-homeKv .p-homeKv-pic { width: min(var(--w-max), 100% - var(--gutter) * 2); }
	.p-homeKv .p-homeKv-btns { display: flex; flex-wrap: wrap; }
	.p-homeKv .p-homeKv-btns .c-btn { width: auto; }
}


/* ---- 2. 実績チラ見せ（自動スライドの帯・2段）------------------------------
   現行サイトの workslider 相当。JS は使わず CSS アニメーションだけで回す。
   流れる仕組みはお取引先ロゴと同じ c-marquee（components.css）。ここではタイルの幅・間隔・周期だけ持つ。
   1段6枚では1本が画面幅に届かない（PC は文字サイズの上限で約1770px に止まる）ので、track を4本並べて半分＝2本ぶん進める。
   周期は1本60秒の速さ（D77）に合わせて2本ぶんの120秒。下段は c-marquee の指定で逆向き・1.25倍 */
.p-homeStrip {
	--strip-w: 24rem;
	padding-block-end: var(--sp-l);

	& .p-homeStrip-note {
		color: var(--cl-text-sub);
		font-size: var(--fs-s);
		line-height: var(--lh-body);
	}

	& .p-homeStrip-note strong { color: var(--cl-text); font-weight: var(--fw-bold); }

	& .p-homeStrip-rows {
		--marquee-gap: 0.8rem;
		--marquee-t: 120s;
		margin-block-start: var(--sp-s);
	}

	/* 画像は c-card-pic（16:10 の枠とホバーの拡大は components.css） */
	& .p-homeStrip-list li { width: var(--strip-w); }
}

/* 帯は、マウスが乗っても止めずに流し続ける（2026-10-20）。リンク先の表示がちらつかないよう、
   乗っているあいだは base.js（js-strip）が href を外す。そのあいだも指のカーソルにする */
.p-homeStrip a { cursor: pointer; }

@media print, screen and (min-width: 640px) {
	.p-homeStrip { --strip-w: 28rem; }
	.p-homeStrip .p-homeStrip-rows { --marquee-gap: var(--sp-xs); }
}


/* ---- 3. 2つの進め方 ------------------------------------------------------
   共通パーツ c-cardList _col2 / c-card _lg（components.css）に置き換えた */


/* ---- 4. オンライン部署（メイン画像＋本文）--------------------------------
   共通パーツ c-media（components.css）に置き換えた */


/* ---- 5. 課題から探す ----------------------------------------------------
   課題カードは共通パーツ c-issueCards / c-issueCard（components.css）に移した */


/* ---- 7. 事例（プロセスの証明）--------------------------------------------
   共通パーツ c-cardList / c-card _lg（components.css）に置き換えた */


/* ---- 8. 会社・人 ---------------------------------------------------------
   共通パーツ c-media（components.css）に置き換えた */


/* ---- 9. お知らせ（コラムの下にぶら下げる）-------------------------------- */
.p-homeNews {
	margin-block-start: var(--sp-l);
	padding-block-start: var(--sp-m);
	border-block-start: 1px solid var(--cl-line);
}

/* 画像つきのカード（入口・事例）：f5 のセクションでは白カード、白セクションでは箱にしない（design-direction §9）*/