@charset "UTF-8";

:root {
	--case-color-bg-mint: #fcfff5;
	--case-color-label-olive: #5f7c00;
	--case-color-text-dark: #333;
	--case-color-text-body: #737373;
	--case-color-dot-green: #afd266;
	--case-color-line-green: #bbd981;
}

/*
 * `main { margin-bottom: 12rem }` は、パンくずリストを入れる前に
 * 「最後のセクション→フッター」の余白として置いていたもの。
 * 現在は main の最後がパンくず(`.breadcrumb.-btm`)で、その下余白が
 * フッターとの間隔(SP 8px / PC 20px)を担うため、この120pxを残すと
 * このページだけフッターとの間隔が 128px / 140px になる。
 */

/*
 * CTAセクションとパンくずの間の余白(PC 120px / SP 80px)。
 *
 * **この指定を共通の fukurikosei_common.css に置いてはいけない。**
 * `.cta-case-section` は事例詳細(case01.css)でも記事の途中に出てきて、
 * その次は `.othercase-section` なので、共通側に書くと関係のない位置に余白が付く。
 * このファイルは事例一覧(case/index.html)だけが読み込むため、ここに置けば一覧に閉じる。
 * (`:has(+ .breadcrumb)` で位置を条件にする手もあるが、`:has()` 非対応環境で
 *  余白が消えるので、ファイルスコープで確実に分ける)
 *
 * padding ではなく margin にしているのは、帯の背景色(--fk-color-cta-bg)を
 * 下へ伸ばさずに空きだけを作るため。padding だと「CTAの帯が120px広がった」見え方になる。
 * margin ならセクションの高さは中身どおりで、間の120pxはページ背景になる。
 */

.cta-case-section {
	margin-bottom: var(--fk-space-cta-to-breadcrumb);
}

.case-list-head {
	padding-top: 4rem;
	background-color: var(--case-color-bg-mint);
}

.case-list-head-label {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--case-color-label-olive);
	letter-spacing: 0.08em;
}

.case-list-head-title {
	margin-top: 1.6rem;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--case-color-text-dark);
}

.case-list-head-lead {
	margin-top: 1.6rem;
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--case-color-text-dark);
}

.case-list-head-divider {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	margin-top: 4rem;
}

.case-list-head-divider-dot {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	background-color: var(--case-color-dot-green);
	border-radius: 50%;
}

.case-list-head-divider-line {
	flex: 1;
	height: 1px;
	background-color: var(--case-color-line-green);
}

.case-card-section {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

/*
 * 列数は `auto-fill` 任せ(SP 1列 / 768〜1399px 2列 / 1400px〜 3列)。
 * 縦に連なるところは横より広く取る: 行 4rem / 列 2rem。
 * `gap` 一括で 2rem にすると、SPの縦積みもPCの2行目以降も 20px になって詰まって見える。
 */

/*
 * 3カラム時のカード幅は (内容1180 − gap20×2) ÷ 3 = 380px = 38rem。
 * auto-fill のしきい値を38remちょうどにすると、`84.2857vw` の丸めで
 * container が 1400px のとき 1179.9998px になり、**デザイン幅で3カラムに入らず2カラムへ落ちる**。
 * 1px の逃げを取って 37.9rem にしてある(1fr が余りを分配するので、実際のカード幅は380pxのまま)。
 */

.case-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(37.9rem, 100%), 1fr));
	row-gap: 4rem;
	column-gap: 2rem;
}

.case-card {
	display: flex;
	flex-direction: column;
}

.case-card-thumb {
	width: 100%;
	height: auto;
}

.case-card-contents {
	display: flex;
	flex-direction: column;
}

.case-card-title {
	margin-top: 1.6rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--case-color-text-dark);
}

.case-card-body {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--case-color-text-body);
}

.case-card-footer {
	display: flex;
	gap: 1.2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 2.4rem;
}

.case-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--case-color-text-dark);
}

.case-card-meta-item.-company {
	font-weight: 700;
}

.case-card-link {
	display: flex;
	flex: none;
	gap: 0.4rem;
	align-items: center;
	margin-left: auto;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--case-color-label-olive);
}

.case-card-link-arrow {
	display: inline-block;
	transform: translateY(-1px);
}

/*
 * 左右の余白。LP(fukurikosei_register.css)・事例詳細(case01.css)と同じ式に揃えた。
 *
 * 以前は `padding-inline: clamp(0px, calc(40px - (100% - 1180px) / 2), 40px)` で
 * 「最低40px」を確保していたが、768〜1180pxが一律40pxになり、
 * 同じ帯で60.3〜92.7pxになるLP・詳細ページと見た目が揃わなかった。
 * デザイン幅1400px(内容1180 + 左右110)の比率を下の帯へ伸ばす式にする。
 * 1400pxで min() の2項が一致するので境界に段差は出ない。
 * 由来: .claude/rules/css.md「左右の余白は『デザイン幅での比率』を1本の min() で全帯域に効かせる」
 *
 * SP(767px以下)は下のブロックで `padding-inline: 1.6rem` を明示している。
 * `fukurikosei_common.css` が375〜767pxを16pxにしているが、374px以下は main.css の
 * 1.5rem のままなので、このページだけは全SP帯を16pxに揃えている
 * (幅の狭い端末でも事例カードの左端をFigmaどおりにするため)。
 */

@media screen and (min-width: 768px) {
	main .container {
		max-width: min(118rem, 84.2857vw);
	}
}

@media screen and (max-width: 767px) {
	.case-list-head-label {
		font-size: 1.2rem;
	}

	.case-list-head-title {
		font-size: 4rem;
	}

	.case-list-head-divider {
		margin-top: 3.2rem;
	}

	main .container {
		padding-inline: 1.6rem;
	}
}