@charset "UTF-8";

/*
 * fukurikosei配下ページで共有するパーツ
 * - CTAバナー(資料請求・お申し込み導線)
 * - 事例カード(case-card)
 * - アウトラインピルボタン(btn-pill-outline)
 * - パンくずリスト(共通パーツ .breadcrumb のベネサポ向け上書き)
 * fukurikosei_usecases.css の該当パーツと同じビジュアルになるよう値を揃えている。
 */

:root {
	--fk-color-text-dark: #333;
	--fk-color-text-body: #737373;
	--fk-color-link-indigo: rgb(58, 71, 155);
	--fk-color-cta-bg: rgb(237, 246, 224);
	--fk-color-cta-underline: #f0b93d;
	--fk-color-cta-green: #759231;
	--fk-color-cta-green-tag: rgb(95, 124, 0);
	--fk-color-cta-orange: #f57e29;
	--fk-color-cta-btn-text: #fff;
	--fk-color-cta-tag-bg: #fff;
	--case-color-label-olive: #5f7c00;

	/*
	 * 事例カードのホバー(写真の拡大・見出しの色)にかける時間。
	 * TOPの .oc-card(fukurikosei_register.css)と case配下の .case-card で同じ値を使うため、
	 * 両方が読み込むこのファイルに置く。
	 */
	--fk-card-hover-duration: 300ms;

	/*
	 * パンくずリストの直上に来るCTAセクションと、パンくずの間の余白。
	 * =「CTAセクションの下端(色の付いた帯の終わり) → パンくずの箱の上端」。
	 * PC 120px / SP 80px。
	 *
	 * **padding ではなく margin で持つ。** padding にすると帯の背景色が
	 * その分だけ下へ伸び、「CTAの帯が広がった」見え方になる。
	 * margin ならページ背景のままの空きになり、帯の高さは中身どおりに保たれる。
	 *
	 * 768〜1179pxの帯ではルートの font-size が vw 連動なので、rem で持つと
	 * 幅ごとに縮む(768pxで85px)。px で持って全幅で同じにする。
	 *
	 * 使う側はページ側CSS(共通側に書くと事例詳細の記事途中のCTAにも付く):
	 * - TOP    … fukurikosei_register.css の `.ct`
	 * - 事例一覧 … fukurikosei_usecases.css の `.cta-case-section`
	 */
	--fk-space-cta-to-breadcrumb: 80px;
}

@media screen and (min-width: 768px) {
	:root {
		--fk-space-cta-to-breadcrumb: 120px;
	}
}

/*
 * `.container` の左右padding(SP 16px)。
 *
 * `main.css` は375〜767pxで 1.5rem(15px)を与えるが、Figmaは16px。
 * 以前は `main.css` を直接 1.6rem に書き換えていたが、`main.css` は全ページ共通の既存ファイルなので
 * 上書きしない(.claude/rules/html.md「既存の共通パーツは上書きしない」)。
 * fukurikosei配下の4ページはすべてこのファイルを読み込むため、ここで上書きする。
 *
 * メディアクエリは `main.css` の該当ブロック(10127行 `@media print, screen and
 * (min-width: 375px) and (max-width: 767px)`)と同一にしてある。
 * `print` を含むのは main.css 側が print にもこの帯の値を適用しているため
 * (`@media print, screen and (max-width: 374px)` も print に一致するが、後に来るこの帯が勝つ)。
 * 374px以下は main.css のまま(1.5rem。ルートの font-size が 2.666667vw 連動なので幅に比例して縮む)。
 *
 * main.css の指定は `.main-wrap, .container` だが、この4ページに `.main-wrap` は無いので
 * `.container` だけを上書きする。`.main-wrap .container` を 0 にする指定(12391行)は
 * 詳細度が 0,2,0 でこちらより強いため、将来 `.main-wrap` を使っても打ち消さない。
 *
 * 物理プロパティ(`padding-right` / `padding-left`)を論理プロパティで上書きしている。
 * 横書きでは同じ物理辺に解決されるため、後に読み込むこちらが勝つ。
 */

@media print, screen and (min-width: 375px) and (max-width: 767px) {
	.container {
		padding-inline: 1.6rem;
	}
}

/* 事例カード(case-card) */

/*
 * カード全体をリンクにする(stretched link)。
 *
 * `a` でカードを丸ごと包むと、見出し・段落・meta が `a` の中に入り、
 * リンクのアクセシブル名がカード内の全テキストの連結になって読み上げが冗長になる。
 * 既存の「詳細を見る」の `a` に `::after` を敷いて**当たり判定だけ**を広げ、
 * マークアップと読み上げ内容は変えない。
 *
 * カード内にリンクはこの1つだけなので、覆っても他のリンクを潰さない
 * (2つ目のリンクを足すときは、そのリンクに `position: relative` + `z-index` が必要になる)。
 *
 * 制約: `::after` が本文の上に乗るため、**カード内の文字をドラッグで選択できなくなる**。
 *
 * このファイルは case/index.html(+ fukurikosei_usecases.css)と
 * case/sekisho.html / case/komatsuzaki-bousui.html(+ case01.css)が読み込むので、
 * ここに置けば事例一覧と事例詳細の両方に効く。
 * TOPページの事例カードは別クラス(.oc-card)で、fukurikosei_register.css に同じ実装がある。
 */

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

.case-card-link::after {
	position: absolute;
	inset: 0;
	content: "";
}

/*
 * フォーカスリングはリンク自身に出るが、当たり判定はカード全面なので
 * どこが押されるのかが伝わらない。カード側にも枠を出す(達成基準2.4.7)。
 * `:has()` 未対応のブラウザではリンク自身の既定リングだけが残る。
 */

.case-card:has(.case-card-link:focus-visible) {
	outline: 2px solid var(--fk-color-cta-green);
	outline-offset: 2px;
}

/*
 * サムネイルの枠。ホバーで写真を1.1倍にする分をここで切り取る。
 * `overflow` を写真自身には持たせられない(自分の transform は自分では切れない)ので、
 * 包む要素を1つ足している。枠は写真と同じ高さのブロックなのでレイアウトは変わらない。
 *
 * 角丸は**枠側**に置く。写真側に残すと、拡大した角丸を四角い枠が切り取る形になり、
 * 角の隙間から背景が覗く。
 */

.case-card-thumb-frame {
	overflow: hidden;
	border-radius: 0.4rem 0.4rem 0 0;
}

.case-card-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 336 / 224;
	object-fit: cover;

	/* 動かすのは transform だけに留める(css.md) */
	transition: transform var(--fk-card-hover-duration) ease-out;
}

/*
 * 動きを減らす設定では拡大をやめる。色の変化は動きではないので残し、
 * 「ホバーが効いていない」と誤解されないようにする。
 */

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

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

	/* color はペイントのみでレイアウトを誘発しない(css.mdが禁じるのはレイアウトを起こすプロパティ) */
	transition: color var(--fk-card-hover-duration) ease-out;
}

/*
 * ホバーは「写真を1.1倍」+「見出しを緑」の2つ。カード全体を起点にする。
 * リンク側に書かないのは `::after` がリンクの一部だから
 * (カードのどこを指しても両方が発火し、効果が二重にかかる)。
 *
 * `.case-card-thumb` / `.case-card-title` より**後**に置く。
 * 前に置くと詳細度が降順になり Biome の noDescendingSpecificity が出る。
 *
 * 見出しの色は、後から読み込む fukurikosei_usecases.css も
 * `.case-card-title`(0,1,0)で上書きしているが、こちらは 0,2,0 なので
 * 読み込み順に関わらず勝つ。
 */

.case-card:hover .case-card-thumb {
	transform: scale(1.1);
}

.case-card:hover .case-card-title {
	color: var(--fk-color-cta-green-tag);
}

/*
 * 動きを減らす設定では拡大をやめる。色の変化は動きではないので残し、
 * 「ホバーが効いていない」と誤解されないようにする。
 *
 * 上のホバー指定と**同じ詳細度**なので、必ずその**後**に置く。
 * 前に置くと後勝ちで scale(1.1) に上書きされ、打ち消しが効かない。
 */

@media (prefers-reduced-motion: reduce) {
	.case-card-thumb {
		transition: none;
	}

	.case-card:hover .case-card-thumb {
		transform: none;
	}
}

.case-card-body {
	margin-top: 0.8rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--fk-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(--fk-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);
}

/* CTAバナー(cta-case) */

.cta-case-section {
	width: 100%;
	padding-top: 6rem;
	background-color: var(--fk-color-cta-bg);
}

.cta-case-inner {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	align-items: flex-start;
	justify-content: space-between;
}

.cta-case-illustration {
	flex: none;
	width: 20rem;
	height: auto;
	margin-top: auto;
}

.cta-case-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 64px;
	text-align: center;
}

.cta-case-eyebrow {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	justify-content: center;
}

.cta-case-eyebrow-text {
	font-size: 2rem;
	font-weight: 400;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.08em;
}

.cta-case-deco {
	flex: none;
	width: 2rem;
	height: 2rem;
}

.cta-case-lead {
	margin-top: 1.6rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--fk-color-text-dark);
}

/*
 * 下線は `text-decoration` ではなく background の帯で描く。
 *
 * 経緯: 元は `text-decoration: underline 0.6rem solid var(--fk-color-cta-underline)` の
 * ショートハンドで、WebKit はショートハンドに太さが入ると**宣言ごと落とす**ため
 * Safari で下線が消えていた(Chromeは受け付けるので出ていた)。
 * ロングハンドへ分解すると Safari 18.5 では出るようになったが、
 * 実機(iPad 9世代 / iPhone 13 以降)では依然として出ないため、
 * `text-decoration` 系のプロパティに依存しない描き方へ切り替えた。
 * background なら対応状況がバージョンで割れないので、iOS 15 まで確実に描画される。
 *
 * 位置は元の `text-underline-offset: 4px` の見え方を実測で再現している。
 * 帯の上端 = ベースライン(0.884em) + 4px。
 * 0.884em は Noto Sans JP のベースライン位置で、3幅の画素走査から逆算した
 * (375px/fs24 → 25.5px、768px/fs17.07 → 19.0px、1180px/fs32 → 32.0px。誤差0.3px以内)。
 *
 * `padding-bottom` は帯を出すために background box を下へ広げるためのもの。
 * inline 要素の background box の高さは font-size そのもので line-height ではないため、
 * 広げないと帯が箱の外に落ちて**何も描画されない**(css.md「inline要素に background で
 * 下線・マーカーを敷くときは padding-bottom で箱を広げる」)。
 * inline の padding-block は行の高さに影響しないので、レイアウトは動かない。
 */

.cta-case-lead-highlight {
	padding-bottom: 1.6rem;
	color: var(--fk-color-cta-green-tag);
	background-image: linear-gradient(var(--fk-color-cta-underline), var(--fk-color-cta-underline));
	background-repeat: no-repeat;
	background-position: 0 calc(0.884em + 4px);
	background-size: 100% 0.6rem;
}

.cta-case-actions {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	align-items: center;
	justify-content: center;
	margin-top: 3.2rem;
}

.cta-case-action {
	position: relative;
}

.cta-case-tag {
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 2.8rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fk-color-cta-green-tag);
	white-space: nowrap;
	pointer-events: none;
	background-color: var(--fk-color-cta-tag-bg);
	border-radius: 999px;
	box-shadow: 0 0 4px rgba(51, 51, 51, 0.08);
	transform: translate(-50%, -60%);
}

/*
 * くちばし。重なりを rem で持つと(元は -0.5rem = 0.1rem 重ね)、ルートの font-size が
 * 小さくなる帯で 1px を割り、丸めで継ぎ目に隙間が空く(768px で 0.1rem = 0.71px になり分離した)。
 * 三角の高さ(0.6rem)ぶん下げてから 1px 戻し、どの幅でもちょうど 1px 重なるようにする。
 * 375px では従来と同じ位置(本体下端 + 5px)になる。
 * 由来: 2026-08-13 くちばし分離の調査(_figma-export/m_tail_all.html)
 */

.cta-case-tag::after {
	position: absolute;
	bottom: calc(-0.6rem + 1px);
	left: 50%;
	width: 0;
	height: 0;
	content: "";
	border-top: 0.6rem solid var(--fk-color-cta-tag-bg);
	border-right: 0.5rem solid transparent;
	border-left: 0.5rem solid transparent;
	transform: translateX(-50%);
}

.cta-case-button-text {
	display: inline-block;
	width: 100%;
}

/*
 * 余白を px から rem へ。
 *
 * 768〜1179pxは main.css がルートの font-size を vw 連動にしている帯なので、
 * 文字は幅に比例して縮むのに px の padding だけ縮まない。
 * 「資料請求・お問い合わせ」(11文字)は文字幅 11 × font-size に対して使える幅が
 * `ボタン幅 − 80px` で、**870px以下で1〜数px足りず2行に折り返していた**
 * (871pxで文字177.4px / 使える幅177.4px のちょうど境界)。
 * LPのCTAボタン(`.ct-btn` = padding-inline 2rem 4rem)と同じくremで持てば、
 * 余白も文字と同じ係数で縮むので比率が変わらず折り返さない。
 * 1180px以上では 1rem = 10px なので、これまでと同じ見た目(464 / 29 / 32 / 48px)。
 */

.btn-common {
	max-width: 46.4rem;
	padding-block: 2.9rem;
	padding-inline: 3.2rem 4.8rem;
	border: none;
	border-radius: 9999px;
}

.btn-common.-case-green,
.btn-common.-case-orange {
	box-shadow: 0 4px 4px rgba(51, 51, 51, 0.12);
}

.btn-common.-case-green {
	font-size: 2rem;
	color: var(--fk-color-cta-btn-text);
	background: var(--fk-color-cta-green);
}

.btn-common.-case-green:hover {
	opacity: 0.6;
}

.btn-common.-case-orange {
	font-size: 2rem;
	color: var(--fk-color-cta-btn-text);
	background: var(--fk-color-cta-orange);
}

.btn-common.-case-orange:hover {
	opacity: 0.6;
}

.btn-common.-case-green::after,
.btn-common.-case-orange::after {
	width: 1.6rem;
	height: 1.6rem;
	background-color: var(--fk-color-cta-btn-text);
	border: none;
	-webkit-mask-image: url("/img/enterpri/fukurikosei/common/open_in_new.svg");
	mask-image: url("/img/enterpri/fukurikosei/common/open_in_new.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transform: none;
}

.btn-common.-case-green:hover::after,
.btn-common.-case-orange:hover::after {
	right: 1.2rem;
}

/* アウトラインピルボタン(サイドバーCTA・一覧リンクなどで使用) */

.btn-pill-outline {
	box-sizing: border-box;
	display: inline-flex;
	gap: 1.6rem;
	align-items: center;
	justify-content: center;
	height: 5.6rem;
	padding: 1rem 1.6rem 1rem 3.2rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fk-color-cta-green-tag);
	text-align: center;
	background-color: #fff;
	border: 2px solid var(--fk-color-cta-green);
	border-radius: 9999px;
}

.btn-pill-outline:hover {
	opacity: 0.7;
}

.btn-pill-outline-icon {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
}

/*
 * 下限を 375px にしない。
 * ここは「copy を親幅いっぱいに伸ばす(flex: 1 1 0)」指定が本体で、幅への依存がない。
 * 375px 下限があると 374px 以下でだけ copy が内容幅に縮み、
 * 親 .cta-case-inner の align-items: flex-start で左へ寄る(374pxで右に54.9pxの空き)。
 * 横並びにする flex-direction: row は、768px 以下では .cta-case-illustration が
 * display: none で子が copy 1つだけになるため、縦積みと同じ結果になる。
 * print を対象に含めない点だけ元のまま維持する。
 * 由来: 2026-08-13 374px以下でCTAバナーが中央揃えでなくなる不具合
 */
@media screen {
	.cta-case-inner {
		flex-direction: row;
		gap: 4rem;
	}

	.cta-case-lead {
		font-size: 3.2rem;
	}

	.cta-case-copy {
		flex: 1 1 0;
		min-width: 0;
	}

	.cta-case-actions {
		flex-direction: row;
		gap: 3.2rem;
		width: 100%;
	}

	.cta-case-action {
		flex: 1 1 0;
		min-width: 0;
		max-width: 46.4rem;
	}

	.btn-common.-case-green,
	.btn-common.-case-orange {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.cta-case-illustration {
		display: none;
	}

	.cta-case-eyebrow-text {
		font-size: 1.4rem;
	}

	.cta-case-lead {
		margin-top: 0;
		font-size: 2.4rem;
		line-height: 1.6;
	}

	.cta-case-actions {
		flex-direction: column;
	}

	.cta-case-action {
		width: 100%;
		max-width: none;
	}

	.cta-case-tag {
		top: 12px;
	}

	.cta-case-button-text {
		font-size: 1.6rem;
		text-align: center;
	}

	.btn-common {
		max-width: none;
		padding-block: 2.4rem;
	}
}

/*
 * パンくずリスト(CTAとフッターの間)
 *
 * マークアップは共通パーツの `.breadcrumb`(main.css)をそのまま使い、
 * ベネサポの配色・字送りだけをここで上書きする。main.css は共有ファイルなので触らない。
 * 値は _figma-export/{pc,sp}/パンくず_{pc,sp}.svg の実測。
 *
 * | | Figma | main.css |
 * |---|---|---|
 * | 文字 | PC16px / SP12px | PC14px / SP12px |
 * | 字送り | PC0.08em / SP0.04em | 指定なし(0) |
 * | 行送り | 1.6(PCブロック高126px = 上余白80 + 行26 + 下余白20 と一致) | 2 |
 * | リンク | #759231(緑) | #014694(青) |
 * | くの字 | 9x9 + 2px / #858585 | PC 9x9 / SP 7x7、#666 |
 */

/*
 * `.breadcrumb` 側の `width: calc(100% - 30px)` を打ち消し、幅の制御を `.container` に委ねる。
 * 併用したままだと「30px引いた幅」の内側にさらに container の padding(SP16px)が入り、
 * SPで文字が31pxの位置から始まってページ内の他のセクション(16px)と揃わない。
 */

.breadcrumb.container {
	width: auto;
}

.breadcrumb-item {
	font-size: 1.2rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

.breadcrumb-item.-link {
	color: var(--fk-color-cta-green);
}

/* main.css は border ショートハンドで #666 を敷いているので、色だけ長プロパティで上書きする */

.breadcrumb-arrow::before {
	width: 9px;
	height: 9px;
	border-top-color: #858585;
	border-right-color: #858585;
}

/*
 * 長いパンくずの省略(事例詳細は現在地が記事タイトルなので長くなる)。
 *
 * | | 望む挙動 | 使うもの |
 * |---|---|---|
 * | SP(基底) | リスト全体が3行を超えたら3行目末尾で丸める | `-webkit-line-clamp: 3` |
 * | PC(768px以上) | 2行までは折り返し、超えたら2行目末尾で丸める | `-webkit-line-clamp: 2` |
 *
 * 行数を決めているのはコンテナ側の折り返しなので、flex をやめてインラインフローに戻し、
 * **コンテナ**にクランプをかける(`text-overflow` は「1つの箱の1行」しか扱えず、
 * 複数行には効かないため、PCも同じ仕組みに寄せている)。
 * 中間のリンクは `white-space: nowrap` で行末で割らせず、折り返すのは最後の現在地だけにする。
 *
 * 省略は見た目だけで、テキストはDOMに残るので読み上げは全文される。
 * `title` 属性は付けない(タッチで出ない・読み上げが二重になる)。
 */

.breadcrumb {
	display: -webkit-box;
	-webkit-box-orient: vertical;

	/*
	 * main.css は autoprefixer の出力で `-webkit-box-align: center` を持っている。
	 * flex では縦方向の中央そろえだが、**縦積みの `-webkit-box` では交差軸=横方向**の指定になり、
	 * 1行に収まる幅ではリストごと中央に寄る(1400pxで左端が253px内側へ入る)。
	 * `align-items` を書いても別プロパティなので効かない。`-webkit-box-align` で打ち消す。
	 */
	-webkit-box-align: start;
	overflow: hidden;
	-webkit-line-clamp: 3;
}

/*
 * くの字(`.breadcrumb-arrow::before`)は行ボックスから上下に約2.6pxはみ出すため、
 * クランプの `overflow: hidden` で先頭行の上・最終行の下が切れる。
 * 逃げは padding で作る(9pxのくの字が基準なので px で持つ)。
 * `overflow` が切るのは padding box なので、margin では逃げにならない。
 *
 * 上余白(main.css の `.-btm` は SP 6rem / PC 8rem)は 0 にする。
 * 直前のCTAセクションが自前で下余白を持っているため、そこに 60〜80px を足すと開きすぎる。
 *
 * 下余白(パンくずの箱→フッター)は **どの幅でも SP 8px / PC 20px** に固定するため
 * px で書く。rem で書くと 768〜1179px の帯(ルートの font-size が vw 連動)で
 * 2rem が 14.2px まで縮み、フッターとの間隔が幅ごとに変わってしまう。
 * 実際の間隔は `padding-bottom` + `margin-bottom` の合計になる(上も `padding-top` を含む)。
 */

.breadcrumb.-btm {
	padding-block: 3px;
	margin-top: 0;
	margin-bottom: 5px;
}

.breadcrumb-item {
	display: inline;
}

.breadcrumb-item.-link {
	white-space: nowrap;
}

/*
 * くの字は高さ0のspanに `::before` を上下中央で絶対配置したもの(main.css)。
 * flex だった間は `align-items: center` が span を行の中央へ置いてくれたが、
 * クランプのためインラインフローに戻したことで span が**ベースライン**に乗り、
 * くの字が文字の中心より 5px 下がる(375pxで実測)。
 * ベースラインから文字の中心までは em box の 0.417em(= 5/12px = 6.67/16px)なので、
 * その分だけ持ち上げて文字の中心に合わせる。em で書いてあるので、
 * PC(16px)でも同じ指定が中心に乗る。
 *
 * PCを2行クランプにしてインラインフローへ移したことで、flex の `align-items: center` で
 * 行の中央に置かれていたPCのくの字も、この指定で位置が決まるようになった。
 * 4倍スクリーンショットの画素走査(文字と `#858585` の行帯の中心)で
 * **768px +0.50px / 1024px +0.50px / 1400px +1.00px** 下がる。
 * ずれ量が font-size に比例しない(サブピクセルの丸め)ので em の一律補正では消せず、
 * SPで許容している +0.84px と同水準なのでそのままにしている。
 */

.breadcrumb-arrow {
	display: inline-block;
	vertical-align: 0.417em;
}

@media screen and (min-width: 768px) {
	.breadcrumb-item {
		font-size: 1.6rem;
		letter-spacing: 0.08em;
	}

	/*
	 * 基底(SP)のインラインフロー + クランプをそのまま使い、行数だけ2行に緩める。
	 * 最後の現在地だけが折り返る(中間のリンクは基底の `white-space: nowrap` のまま)。
	 */

	.breadcrumb {
		-webkit-line-clamp: 2;
	}

	/*
	 * クランプの `overflow: hidden` が切るのは padding box なので、
	 * くの字とフォーカスリングの逃げは padding でしか作れない(基底と同じ 3px)。
	 * 上は同量の負のマージンで打ち消し、直前のCTAとの間隔を変えない。
	 *
	 * 下だけは逃げを作らない。パンくず〜フッターの間隔は共通フッター側の
	 * `.list-wrap { margin-top: 2rem }` がマージン合成で抜けてくるため
	 * `max(自分の margin-bottom, 2rem)` になり、768〜1179px では 2rem が 14.2〜21.83px と動く。
	 * ここで margin を 17px へ下げると 918px 以上で 2rem が勝ち、
	 * padding 3px と合わせて下余白が最大 24.8px まで開く(20px固定の設計が崩れる)。
	 * くの字は最終行の下に 3.6px 以上の余裕があるので、逃げが無くても切れない
	 * (768〜1600px の実測で Chrome 3.64〜32.84px / WebKit 4.47〜31.67px)。
	 */

	.breadcrumb.-btm {
		padding-top: 3px;
		padding-bottom: 0;
		margin-top: -3px;
		margin-bottom: 20px;
	}
}