@charset "UTF-8";
/**
 * forthecompany.css — /forthecompany（企業向け・分岐トップ）
 *
 * 現行サイトの再現ではなく**新規**（2026-09-13 CEO決定で企業向けを再編したため）。
 * 既存ページと同じ土台に乗せる:
 *   フォント変数は tokens.css（--s-font-f88553ee = Inter + Zen Kaku Gothic New）
 *   ブレークポイント 1140 / 840 / 540 / 320
 *   font-weight は 300→400 / 400→500 / 500→700 の底上げ規則を適用済み
 *   コンテンツ幅 1080px（サイト標準）
 */

.ftc-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ============================================================
 * ヒーロー
 * ============================================================ */

.ftc-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1080px;
	padding: 100px 24px 80px;
	text-align: center;
}

.ftc-hero__eyebrow {
	margin: 0 0 24px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.08em;
}

.ftc-hero__title {
	margin: 0 0 40px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.14em;
}

.ftc-hero__body {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

/* ============================================================
 * 2サービスのカード
 * ============================================================ */

.ftc-services {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1080px;
	padding: 0 24px 100px;
}

.ftc-services__guide {
	margin: 0 0 40px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 2枚並び。gap を引いた等分にする（% のままだと折り返す） */
.ftc-services__list {
	display: flex;
	flex-direction: row;
	gap: 40px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------
 * カードのアクセント色のコントラスト調整（CEO決定 2026-09-15「直してOK」）
 *
 * アクセント色は page-forthecompany.php が style="--ftc-accent:…" で
 * インラインに流し込む（ミレバモット #14314a ／ SHIGO十色 #3da0a8）。
 * CSS 側からは個別値が見えないので、インラインstyleの値そのものをセレクタにして
 * 「色相そのまま・黒方向へ N% 暗くした固定値」を当て、**バッジ地色・サービス名・
 * 「詳しく見る」だけ** を差し替える（PHP のデータは触らない）。
 * color-mix と :nth-child を使わない理由は front.css の同じ注記に書いてある。
 *
 * SHIGO十色のティール #3da0a8（2026-09-15 実測）:
 *   .ftc-card__axis バッジ（白12px/700・要 4.5）      白/#3da0a8 = 3.09 → 5.12
 *   .ftc-card__name（36px・要 3）                      #3da0a8 / #e4f4f5 = 2.73 → 4.52
 *   .ftc-card__more-label（15px/700・要 4.5）          同上 2.73 → 4.52
 *   バッジと文字を別値に分けず 25%暗の1値でそろえる（同じカードの中で
 *   バッジと名前が別の緑に見えるのを避けるため。25% ならどちらも基準以上）。
 * ミレバモットの #14314a は元から基準を満たしている（白文字 13.4 / 文字 12.0）ため変更しない。
 * ------------------------------------------------------------------ */
.ftc-services__item {
	display: flex;
	width: calc((100% - 40px) / 2);
	/* 既定は元のアクセント色そのまま。届いていない SHIGO十色だけ下で上書きする。 */
	--ftc-accent-d: var(--ftc-accent);
}
.ftc-services__item[style*="--ftc-accent:#3da0a8"] { --ftc-accent-d: #2e787e; }

.ftc-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 48px 40px 32px;
	color: #14314a;
	text-decoration: none;
	background: var(--ftc-bg);
	border-radius: 16px;
	transition: transform 0.2s ease;
}

.ftc-card:hover,
.ftc-card:focus-visible {
	transform: translateY(-4px);
}

/* 社内向け／社外向けのバッジ */
.ftc-card__axis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 14px;
	margin-bottom: 20px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	background: var(--ftc-accent-d);  /* 2026-09-15 コントラスト調整・上の注記参照 */
	border-radius: 20.5px;
}

.ftc-card__name {
	margin-bottom: 12px;
	color: var(--ftc-accent-d);  /* 2026-09-15 コントラスト調整・上の注記参照 */
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.ftc-card__lead {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

.ftc-card__body {
	margin-bottom: 24px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/* 対象領域のタグ。実績や数値ではなく領域名だけを並べる */
.ftc-card__areas {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.ftc-card__area {
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	background: #ffffff;
	border-radius: 14px;
}

.ftc-card__more {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	margin-top: auto;
	color: var(--ftc-accent-d);  /* 2026-09-15 コントラスト調整・上の注記参照 */
}

.ftc-card__more-label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

.ftc-card__more-icon {
	font-size: 20px;
	line-height: 1;
}

/* ============================================================
 * 問い合わせ
 * ============================================================ */

.ftc-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 80px 24px;
	text-align: center;
	background: #f7f5f2;
}

.ftc-contact__title {
	margin: 0 0 20px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

.ftc-contact__body {
	margin: 0 0 40px;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/* CTAボタンはトップページ（front.css の .fr-cta__btn）と同じ寸法に揃える */
.ftc-contact__btn {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	padding: 8px 30px;
	color: #ffffff;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 500;
	line-height: 2.25;
	letter-spacing: 0.08em;
	text-decoration: none;
	background: #14314a;
	border-radius: 36px;
	transition: opacity 0.2s ease;
}

.ftc-contact__btn:hover,
.ftc-contact__btn:focus-visible {
	opacity: 0.85;
}

.ftc-contact__btn-icon {
	flex: none;
	font-size: 24px;
	line-height: 1;
}

/* ============================================================
 * レスポンシブ
 * ============================================================ */

@media (max-width: 840px) {

	.ftc-hero {
		padding: 72px 24px 56px;
	}

	.ftc-hero__title {
		font-size: 28px;
	}

	.ftc-hero__body {
		font-size: 16px;
	}

	/* 2026-09-14: ヒーロー本文の強制改行を解除する。
	   本文の <br> は3文（各1行）を意図したものだが、3文目は 20px で 858px 必要（+左右padding 48）
	   ＝ 906px 以上の幅でしか1行に収まらない。840px 以下では強制改行と自然折返しが混ざり、
	   実測 @430 で2行目が「を向けることは、」(132px) だけの尻切れ、@375 で最終行が「す。」(33px)
	   になっていた。ここでは改行を殺して普通の段落として流す（@375 5行・最終行 149px、
	   @430 4行・最終行 297px）。文言は変えていない。 */
	.ftc-hero__body br {
		display: none;
	}

	/* 2枚が窮屈になるので縦積みにする */
	.ftc-services__list {
		flex-direction: column;
		gap: 24px;
	}

	.ftc-services__item {
		width: 100%;
	}

	.ftc-card {
		padding: 40px 24px 28px;
	}

	.ftc-card__name {
		font-size: 28px;
	}

	.ftc-contact__title {
		font-size: 22px;
	}
}

@media (max-width: 540px) {

	.ftc-hero__title {
		font-size: 22px;
		letter-spacing: 0.08em;
	}

	.ftc-hero__body {
		font-size: 15px;
		text-align: left;
	}

	.ftc-card__lead {
		font-size: 17px;
	}

	.ftc-contact__btn {
		width: 100%;
	}
}

/* 2026-09-14 追加。サイト標準の 320 ブレークポイント（ファイル冒頭の一覧参照）。
   320px 幅では本文枠が 272px しかなく、22px のままだと見出しの13文字行が 309px 必要で
   「誰かに目を向けること／が、／企業の価値を最大化させ／る。」の4行（「が、」「る。」が孤立）に
   なっていた。案内文も「…分かれま／す。」と1文字落ちていた。行が収まる最大サイズまで下げる。 */
@media (max-width: 320px) {

	/* 実測: 19px で「誰かに目を向けることが、」246px ／「企業の価値を最大化させる。」267px の2行。
	   20px だと2行目が 281px になり 272px の枠に入らない。 */
	.ftc-hero__title {
		font-size: 19px;
	}

	/* アイキャッチ（20px 固定）が h1 より大きくなって見出しの上下関係が逆転するのを防ぐ。
	   541px 以下の 22px : 20px と同じ比（1.1）を保って 17px にする。 */
	.ftc-hero__eyebrow {
		font-size: 17px;
	}

	/* 実測: 15px で 264px の1行（16px では 282px で枠に入らない）。 */
	.ftc-services__guide {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ftc-card,
	.ftc-contact__btn {
		transition: none;
	}

	.ftc-card:hover {
		transform: none;
	}
}