@charset "utf-8";
/* =========================================================
   busho.css — オンライン部署（/online-busho/）
   原稿：docs/content/online-busho.md（小川さん作成のExcelを移植）
   縦長LPなので、セクションの型を少なく・リズムを一定に保つ
   ========================================================= */

/* ---- ヒーロー ------------------------------------------------------------ */
.p-obHero {
	display: block;
	/* パンくずの位置と、ラベル→h1の間隔は c-pageHead と揃える */
	padding-block: var(--sp-xs) var(--sp-m);

	/* 部署ページの動詞ラベル（まもる／広げる…）*/
	& .p-obHero-verb {
		justify-self: start;
		margin-block-start: var(--sp-m);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		font-weight: var(--fw-bold);
		line-height: var(--lh-ui);
	}

	& .p-obHero-verb + .p-obHero-title { margin-block-start: var(--sp-xs); }

	& .p-obHero-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); }

	& .p-obHero-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;
	}

	& .p-obHero-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-obHero-body { display: grid; gap: var(--sp-m); }

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

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

}

@media print, screen and (min-width: 640px) {
	.p-obHero .p-obHero-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}

/* ボタンの置き場（ヒーローとCTAで共通）*/
.p-obBtns {
	display: grid;
	gap: var(--sp-xs);
	margin-block-start: var(--sp-m);

	& .c-btn { width: 100%; }
}

@media print, screen and (min-width: 640px) {
	.p-obBtns { display: flex; flex-wrap: wrap; }
	.p-obBtns .c-btn { width: auto; }
}

/* ---- 定義文（LLMO用。検索・AIに拾わせたい一段落）------------------------- */
.p-obDef {
	max-width: var(--w-text);
	display: grid;
	gap: 0.8em;
	padding: var(--card-pad);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);
	line-height: var(--lh-body);

	& .p-obDef-title { font-size: var(--fs-m); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
}

/* ---- お悩み ---------------------------------------------------------------
   共通パーツ c-featureList _num（components.css）に置き換えた */

/* ---- 採用コストの注記 ----------------------------------------------------
   景品表示法の観点から出典と注記は必須。小さくても必ず出す */
.p-obNote {
	margin-block-start: var(--sp-s);
	max-width: var(--w-text);
	color: var(--cl-text-sub);
	font-size: var(--fs-ui);
	line-height: var(--lh-body);
}

/* ---- 部署カード ----------------------------------------------------------
   共通パーツ c-cardList _col4 / c-card _lg（components.css）に置き換えた */

/* ---- 比較表 --------------------------------------------------------------
   SPは横に入りきらないので、表だけ横スクロールさせる */
.p-obCompare {
	margin-block-start: var(--sp-m);
	overflow-x: auto;

	& .c-table { min-width: 64rem; }
	& .c-table th { width: 20%; }
	& .c-table td:last-child { background-color: var(--cl-bg-sub); font-weight: var(--fw-bold); }
}

/* ---- 料金プラン ---------------------------------------------------------- */
.p-obPlans {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);
}

.p-obPlan {
	display: grid;
	gap: 0.6em;
	align-content: start;
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .p-obPlan-name { font-size: var(--fs-l); font-weight: var(--fw-head); line-height: var(--lh-tight); }
	& .p-obPlan-price { font-size: var(--fs-ml); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }
	& .p-obPlan-price span { font-size: var(--fs-ui); font-weight: var(--fw-bold); }
	& .p-obPlan-txt { color: var(--cl-text-sub); font-size: var(--fs-ui); line-height: var(--lh-body); }

	/* おすすめのプラン：箱は変えず、バッジ（アクセントの文字＋下線）で示す */

	& .p-obPlan-badge {
		justify-self: start;
		color: var(--cl-accent);
		text-decoration: underline 2px;
		text-underline-offset: 0.3em;
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		line-height: var(--lh-ui);
	}
}

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

/* 定義文のブロック：白セクションの上では f5 の面（補足の型）、f5 のセクションの上では白地（design-direction §9）*/
.c-sec._bg .p-obDef { background-color: var(--cl-bg); }