/**
 * BtoB services page
 * Figma: 1136:39226 (PC) / 1136:39603 (SP)
 */

:root {
	--color-rpo: #4a63f1;
	--color-rpo-soft: #f4f6ff;
	--color-hr-soft: #fff2f1;
}

/* -------------------------------------------------------------------------- */
/* Page heading
/* -------------------------------------------------------------------------- */

.page-template-page-btob-services .c-page-heading {
	min-height: 320px;
	padding: 80px 24px;
	background: #faf5f6;
}

.page-template-page-btob-services .c-page-heading__title {
	font-family: var(--tokumori-font-mobo);
	font-size: clamp(10px, calc(48 * 100vw / 410), 48px);
	font-weight: 700;
	letter-spacing: 4px;
	line-height: 1.3;
	text-shadow: none;
}

.page-template-page-btob-services .c-page-heading__en {
	font-size: clamp(10px, calc(28 * 100vw / 410), 28px);
	font-weight: 500;
	letter-spacing: 4px;
	line-height: 1.3;
	color: var(--color-primary, #af322c);
	text-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* Concept
/* -------------------------------------------------------------------------- */

.c-btob-concept {
	box-sizing: border-box;
	width: 100%;
	padding: 120px 80px;
	background: #fff;
}

.c-btob-concept__inner {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.c-btob-concept__head {
	width: 100%;
	max-width: 1280px;
}

.c-btob-concept__title {
	margin: 0;
	display: flex;
	flex-direction: column;
    align-items: center;
	font-family: var(--tokumori-font-mobo);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
}

.c-btob-concept__line {
	display: block;
	font-size: clamp(10px, calc(36 * 100vw / 410), 36px);
}

.c-btob-concept__line--accent {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	font-size: clamp(10px, calc(48 * 100vw / 410), 48px);
	margin-top: -4px;
}

.c-btob-concept__accent {
	color: var(--color-primary, #af322c);
}

.c-btob-concept__tail {
	color: var(--color-main-dark, #333);
}

.c-btob-concept__diagram {
	margin: 0;
	width: 100%;
	max-width: 1226px;
}

.c-btob-concept__diagram img {
	display: block;
	width: 100%;
	height: auto;
}

.c-btob-concept__diagram--sp {
	display: none;
}

.c-btob-br-pc {
	display: inline;
}

.c-btob-br-sp {
	display: none;
}

.c-btob-card__body-sp {
	display: none;
}

/* -------------------------------------------------------------------------- */
/* Offerings wrap
/* -------------------------------------------------------------------------- */

.c-btob-offerings {
	box-sizing: border-box;
	width: 100%;
	padding: 80px 100px;
	background: #f7f6f6;
}

.c-btob-offerings__inner {
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.c-btob-offerings__title {
	margin: 0;
	font-family: var(--tokumori-font-mobo);
	font-size: clamp(10px, calc(36 * 100vw / 410), 36px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Service card
/* -------------------------------------------------------------------------- */

.c-btob-card {
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	min-width: 0;
	padding: 64px;
	border-radius: 8px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.c-btob-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
	width: 100%;
}

.c-btob-card__label {
	box-sizing: border-box;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-width: 200px;
	min-height: 40px;
	padding: 4px 0;
	border-radius: 50px;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(18 * 100vw / 410), 18px);
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.8;
	white-space: nowrap;
}

.c-btob-card--rpo .c-btob-card__label {
	background: var(--color-rpo-soft);
	color: var(--color-rpo);
}

.c-btob-card--hr .c-btob-card__label {
	background: var(--color-hr-soft);
	color: var(--color-primary, #af322c);
}

.c-btob-card__brand {
	display: block;
	height: 40px;
	width: auto;
	max-width: min(100%, 328px);
	object-fit: contain;
}

.c-btob-card__brand--hr {
	max-width: min(100%, 508px);
}

.c-btob-card__brands-sp {
	display: none;
}

.c-btob-card__hero {
	display: grid;
	grid-template-columns: minmax(0, 605px) minmax(0, 427px);
	gap: 80px;
	align-items: start;
	justify-content: space-between;
}

.c-btob-card__copy {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	container-type: inline-size;
}

.c-btob-card__catch {
	margin: 0;
	font-family: var(--tokumori-font-mobo);
	font-size: clamp(10px, calc(36 * 100vw / 410), 36px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
}

.c-btob-card__catch--sp {
	display: none;
}

.c-btob-card__catch--pc {
	white-space: nowrap;
	/* Copy column is 605px at Figma; 36px there, down to 30px as the column shrinks. */
	font-size: clamp(30px, calc(36 / 605 * 100cqi), 36px);
}

.c-btob-card__mark {
	display: inline;
	box-shadow: inset 0 -0.35em 0 #fffd8c;
}

.c-btob-card__body {
	margin: 0;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(16 * 100vw / 410), 16px);
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: 1.8;
	color: var(--color-main-dark, #333);
}

.c-btob-card__media {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 427px;
	aspect-ratio: 427 / 313;
	justify-self: end;
	overflow: visible;
	container-type: inline-size;
}

.c-btob-card__media::before {
	content: "";
	position: absolute;
	z-index: 0;
	/*
	 * Figma reports the rotated visual bounds. Compensate the 4° AABB so
	 * the painted layer lands at the same offset after rotation.
	 */
	top: 4.361%; /* 13.65 / 313 */
	left: 4.682%; /* 19.99 / 427 */
	width: 95.316%; /* 407 / 427 */
	aspect-ratio: 407 / 287.95;
	border-radius: 3.747cqw; /* 16 / 427 */
	transform: rotate(4deg);
	transform-origin: center center;
}

.c-btob-card--rpo .c-btob-card__media::before {
	background: var(--color-rpo);
}

.c-btob-card--hr .c-btob-card__media::before {
	background: var(--color-primary, #af322c);
}

.c-btob-card__media img {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0.106%; /* 0.45 / 427 */
	display: block;
	width: 95.316%;
	aspect-ratio: 407 / 287.95;
	height: auto;
	border-radius: 3.747cqw;
}

/* -------------------------------------------------------------------------- */
/* Features (RPO)
/* -------------------------------------------------------------------------- */

.c-btob-features {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	max-width: 100%;
}

.c-btob-features__title {
	margin: 0;
	max-width: 100%;
	font-family: var(--tokumori-font-mobo);
	font-size: clamp(10px, calc(24 * 100vw / 410), 24px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
	text-align: left;
	overflow-wrap: anywhere;
}

.c-btob-features__title-pc {
	white-space: nowrap;
}

.c-btob-features__title-sp {
	display: none;
}

.c-btob-features__em {
	color: var(--color-rpo);
}

.c-btob-features__track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.c-btob-feature {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 16px;
	border-radius: 8px;
	background: #f7f8fb;
	text-align: center;
}

.c-btob-feature__icon {
	display: block;
	width: 100px;
	height: 50px;
	object-fit: contain;
}

.c-btob-feature__title {
	margin: 0;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(16 * 100vw / 410), 16px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
}

.c-btob-feature__body {
	margin: 0;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-main-dark, #333);
}

.c-btob-feature__body--sp {
	display: none;
}

.c-btob-feature__note {
	margin: -8px 0 0;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-gray, #838586);
}

.c-btob-features__nav {
	display: none;
}

/* Numbered feature cards — Figma 1399:40000 / 1577:48461 (261×291, 4-col at full width).
   auto-fill + justify-content:center: the column set is centered in the parent;
   leftover cards on a wrapped row stay left-aligned in those columns. */
.c-btob-features--numbered .c-btob-features__track {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.c-btob-features--numbered .c-btob-feature--numbered {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	height: auto;
	min-height: 230px;
	padding: 24px 16px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	text-align: left;
	overflow: hidden;
}

.c-btob-features--numbered .c-btob-feature__num {
	display: block;
	margin: 0;
	font-family: var(--tokumori-font-en);
	font-size: clamp(10px, calc(32 * 100vw / 410), 32px);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.1;
	color: #333;
}

.c-btob-features--numbered .c-btob-feature__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.c-btob-features--numbered .c-btob-feature__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	min-width: 0;
}

.c-btob-features--numbered .c-btob-feature__title {
	margin: 0;
	min-height: 32px;
	font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.6;
	color: #333;
	text-align: left;
}

.c-btob-features--numbered .c-btob-feature__title span {
	display: inline;
	background-image: linear-gradient(#fffd8c, #fffd8c);
	background-repeat: no-repeat;
	background-size: 100% 8px;
	background-position: 0 88%;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.c-btob-features--numbered .c-btob-feature__body {
	margin: 0;
	font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: 1.8;
	color: #333;
	text-align: left;
	overflow-wrap: anywhere;
	word-break: normal;
}

.c-btob-features--numbered .c-btob-feature--tight-body .c-btob-feature__body {
	letter-spacing: 0.6px;
}

/* -------------------------------------------------------------------------- */
/* Achievement
/* Figma 1438:45734 / 1438:45832 — 1112 x 270 (banner 240, stats 288 x3, gap 4)
/* -------------------------------------------------------------------------- */

.c-btob-achieve {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: 100%;
	container-type: inline-size;
	container-name: btob-achieve;
	--achieve-w: 1112;
	--achieve-h: 270;
	--achieve-banner-w: 240;
	--achieve-stat-pad: 24;
	--achieve-stat-gap: 16;
	--achieve-label: 17;
	--achieve-num: 90;
	--achieve-unit: 32;
	--achieve-unit-sm: 20;
	--achieve-icon: 30;
}

.c-btob-achieve__row {
	display: grid;
	grid-template-columns: calc(var(--achieve-banner-w) / var(--achieve-w) * 100%) minmax(0, 1fr);
	gap: 0;
	width: 100%;
	align-items: stretch;
	aspect-ratio: var(--achieve-w) / var(--achieve-h);
	min-height: 0;
}

.c-btob-achieve__banner {
	margin: 0;
	min-width: 0;
	min-height: 0;
	height: 100%;
	border-radius: 8px 0 0 8px;
	overflow: hidden;
	background: #1a1a1a;
	isolation: isolate;
	box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
}

.c-btob-achieve__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: inherit;
}

.c-btob-achieve__banner-pc {
	display: block;
}

.c-btob-achieve__banner-sp {
	display: none;
}

.c-btob-achieve__stats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

.c-btob-stat {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: calc(var(--achieve-stat-gap) / var(--achieve-w) * 100cqi);
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: calc(var(--achieve-stat-pad) / var(--achieve-w) * 100cqi);
	background: #f7f8fb;
	border-radius: 0 8px 8px 0;
	overflow: hidden;
}

.c-btob-achieve__stats .c-btob-stat:not(:last-child) {
	border-radius: 0;
}

.c-btob-card--hr .c-btob-stat,
.c-btob-achieve--hr .c-btob-stat {
	background: #faf5f6;
}

.c-btob-stat__label {
	box-sizing: border-box;
	margin: 0;
	display: flex;
	align-items: center;
	min-height: calc(2em * 1.8);
	font-family: var(--tokumori-font-display);
	font-size: calc(var(--achieve-label) * 1px);
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.8;
	color: var(--color-main-dark, #333);
	flex: 0 0 auto;
}

.c-btob-stat__label-text {
	display: block;
	white-space: pre-line;
}

.c-btob-stat__ref {
	display: inline-block;
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	vertical-align: super;
}

.c-btob-stat__value {
	margin: 0;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: calc(4 / var(--achieve-w) * 100cqi);
	color: var(--color-main-dark, #333);
	min-width: 0;
	flex: 0 0 auto;
}

.c-btob-stat__num {
	font-family: var(--tokumori-font-en);
	font-size: calc(var(--achieve-num) / var(--achieve-w) * 100cqi);
	font-weight: 300;
	letter-spacing: calc(-2.8 / var(--achieve-w) * 100cqi);
	line-height: 0.9;
	white-space: nowrap;
}

.c-btob-stat__unit,
.c-btob-stat__prefix {
	font-family: var(--tokumori-font-en), var(--tokumori-font-display);
	font-size: calc(var(--achieve-unit) * 1px);
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: 0.9;
	padding-bottom: 0.12em;
	white-space: nowrap;
	flex-shrink: 0;
}

.c-btob-stat__unit--sm {
	font-size: calc(var(--achieve-unit-sm) * 1px);
}

.c-btob-stat__value--approx {
	align-items: flex-end;
	flex-wrap: nowrap;
}

.c-btob-stat__unit-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding-bottom: 0.12em;
	font-family: var(--tokumori-font-en), var(--tokumori-font-display);
	font-weight: 400;
	letter-spacing: 1.2px;
	line-height: 0.9;
	color: var(--color-main-dark, #333);
	flex-shrink: 0;
}

.c-btob-stat__unit-stack span:first-child {
	font-size: calc(var(--achieve-unit) * 1px);
}

.c-btob-stat__unit-stack span:last-child {
	font-size: calc(var(--achieve-unit-sm) * 1px);
}

.c-btob-stat__unit-stack--row {
	flex-direction: row;
	align-items: flex-end;
	gap: 0;
}

.c-btob-stat__icon {
	position: absolute;
	right: calc(20 / var(--achieve-w) * 100cqi);
	bottom: calc(20 / var(--achieve-w) * 100cqi);
	display: block;
	width: calc(var(--achieve-icon) / var(--achieve-w) * 100cqi);
	height: auto;
	pointer-events: none;
}

.c-btob-achieve__note {
	margin: 0;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--color-gray, #838586);
	text-align: right;
}

/* -------------------------------------------------------------------------- */
/* Link cards
/* -------------------------------------------------------------------------- */

.c-btob-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.c-btob-link {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	min-height: 180px;
	padding: 24px 64px 24px 24px;
	border-radius: 8px;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-btob-link:hover {
	opacity: 0.92;
	transform: translateY(-2px);
	text-decoration: none;
}

.c-btob-link--fill.c-btob-link--rpo {
	background: var(--color-rpo);
	border: 1px solid var(--color-rpo);
	color: #fff;
}

.c-btob-link--fill.c-btob-link--hr {
	background: var(--color-primary, #af322c);
	border: 1px solid var(--color-primary, #af322c);
	color: #fff;
}

.c-btob-link--ghost {
	background: #fff;
	border: 1px solid #333;
	color: var(--color-main-dark, #333);
}

.c-btob-link__badge {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 35px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid #d9d9d9;
	background: #fff;
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--color-main-dark, #333);
}

.c-btob-link__title {
	font-family: var(--tokumori-font-mobo);
	font-size: clamp(10px, calc(24 * 100vw / 410), 24px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.c-btob-link--fill .c-btob-link__title {
	color: #fff;
}

.c-btob-link__title-sp {
	display: none;
}

.c-btob-link__desc {
	font-family: var(--tokumori-font-display);
	font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
}

.c-btob-link--fill .c-btob-link__desc {
	color: #fff;
}

.c-btob-link__desc-sp {
	display: none;
}

.c-btob-link__desc--ghost,
.c-btob-link--ghost .c-btob-link__desc {
	display: none;
}

.c-btob-link__arrow {
	position: absolute;
	top: 50%;
	right: 24px;
	width: 24px;
	height: 24px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transform: translateY(-50%);
}

.c-btob-link__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translate(-60%, -50%) rotate(45deg);
}

.c-btob-link--fill .c-btob-link__arrow {
	border-color: #fff;
	color: #fff;
}

.c-btob-link--ghost .c-btob-link__arrow {
	border-color: #333;
	color: #333;
}

/* -------------------------------------------------------------------------- */
/* Responsive
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.page-template-page-btob-services .c-page-heading {
		min-height: 160px;
		padding: 48px 16px;
		align-items: center;
		justify-content: center;
	}

	.page-template-page-btob-services .c-page-heading__inner {
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.page-template-page-btob-services .c-page-heading__title {
		font-size: clamp(10px, calc(24 * 100vw / 410), 24px);
		letter-spacing: 1.2px;
		line-height: 1.6;
	}

	.page-template-page-btob-services .c-page-heading__en {
		font-size: clamp(10px, calc(24 * 100vw / 410), 24px);
		letter-spacing: 4px;
	}

	.c-btob-concept {
		padding: 56px 16px;
	}

	.c-btob-concept__inner {
		gap: 40px;
		align-items: stretch;
	}

	.c-btob-concept__title {
		align-items: center;
		text-align: center;
	}

	.c-btob-concept__line {
		font-size: clamp(10px, calc(18 * 100vw / 410), 18px);
		white-space: nowrap;
	}

	.c-btob-concept__line--accent {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		/* Figma SP: 24px at ~378px content; keep one line down to 375vw */
		font-size: min(22px, calc((100vw - 32px) / 15.75));
		margin-top: 0;
	}

	.c-btob-concept__accent,
	.c-btob-concept__tail {
		white-space: nowrap;
	}

	.c-btob-concept__diagram--pc {
		display: none;
	}

	.c-btob-concept__diagram--sp {
		display: block;
		/* Figma 1136:39620 — 406px in 410 artboard (≈2px side inset) */
		box-sizing: border-box;
		width: min(406px, calc(100vw - 4px));
		max-width: none;
		margin-left: calc(50% - min(203px, (100vw - 4px) / 2));
	}

	.c-btob-br-pc {
		display: none;
	}

	.c-btob-br-sp {
		display: inline;
	}

	.c-btob-card__body-pc {
		display: none;
	}

	.c-btob-card__body-sp {
		display: inline;
	}

	.c-btob-offerings {
		padding: 56px 16px;
	}

	.c-btob-offerings__inner {
		gap: 32px;
	}

	.c-btob-offerings__title {
		font-size: clamp(10px, calc(24 * 100vw / 410), 24px);
	}

	.c-btob-card {
		/* Figma Section 1186:70702 — pad 32/16 on ~410 artboard */
		padding: 32px 16px;
		gap: 32px;
		overflow: visible;
	}

	.c-btob-offerings,
	.c-btob-offerings__inner {
		overflow: visible;
	}

	/* Let feature peeks paint into the gray margins beside the white card */
	.page-template-page-btob-services {
		overflow-x: clip;
	}

	.c-btob-card__head {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		/* Figma 1186:70703 — 56px between head and copy (card gap 32 + 24) */
		margin-bottom: 24px;
		text-align: center;
	}

	.c-btob-card__label {
		font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
		min-height: 33px;
		width: 160px;
		min-width: 160px;
		padding: 4px 0;
	}

	.c-btob-card__brand {
		height: 30px;
		max-width: 100%;
	}

	.c-btob-card__brand--hr-pc {
		display: none;
	}

	.c-btob-card__brands-sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.c-btob-card__brands-sp img {
		display: block;
		height: 30px;
		width: auto;
	}

	.c-btob-card__hero {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.c-btob-card__copy {
		gap: 16px;
	}

	.c-btob-card__media {
		display: none;
	}

	.c-btob-card__catch {
		font-family: var(--tokumori-font-mobo);
		font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
		font-weight: 700;
		letter-spacing: 0;
		line-height: 1.6;
	}

	.c-btob-card__catch--pc {
		display: none;
	}

	.c-btob-card__catch--sp {
		display: block;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		text-align: center;
		white-space: nowrap;
		font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
	}

	/*
	 * Yellow bar 8px under the catch (Figma 320×8).
	 * box-decoration-break:clone keeps a clean bar per line if it ever wraps.
	 */
	.c-btob-card__hl {
		display: inline;
		padding-bottom: 0;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		background-image: linear-gradient(
			to top,
			#fffd8c 0,
			#fffd8c 8px,
			transparent 8px
		);
	}

	.c-btob-card__body {
		font-family: var(--tokumori-font-display);
		font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
		font-weight: 400;
		letter-spacing: 1.2px;
		line-height: 1.8;
	}

	.c-btob-features {
		overflow: visible;
		align-items: stretch;
		gap: 28px;
		width: 100%;
		min-width: 0;
	}

	.c-btob-features--numbered {
		width: 100%;
		max-width: 378px;
		margin-left: auto;
		margin-right: auto;
	}

	.c-btob-features__title {
		font-family: var(--tokumori-font-display);
		font-size: clamp(10px, calc(18 * 100vw / 410), 18px);
		letter-spacing: 1.2px;
		text-align: center;
		width: 100%;
	}

	.c-btob-features__title-pc {
		display: none;
	}

	.c-btob-features__title-sp {
		display: inline;
	}

	.c-btob-features__track {
		--btob-feature-w: 280px;
		display: flex;
		gap: 16px;
		box-sizing: border-box;
		/* Break out to viewport; min-width:0 so flex doesn't expand to all cards */
		width: 100vw;
		max-width: 100vw;
		min-width: 0;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: max(0px, calc((100vw - var(--btob-feature-w)) / 2));
		padding-right: max(0px, calc((100vw - var(--btob-feature-w)) / 2));
		padding-bottom: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: max(0px, calc((100vw - var(--btob-feature-w)) / 2));
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.c-btob-features__track::-webkit-scrollbar {
		display: none;
	}

	.c-btob-feature {
		flex: 0 0 var(--btob-feature-w);
		width: var(--btob-feature-w);
		max-width: none;
		min-width: var(--btob-feature-w);
		scroll-snap-align: center;
		scroll-snap-stop: always;
		align-items: center;
		text-align: left;
	}

	.c-btob-feature__title {
		width: 100%;
		text-align: center;
	}

	.c-btob-feature__body {
		width: 100%;
		text-align: left;
	}

	.c-btob-feature__body--pc {
		display: none;
	}

	.c-btob-feature__body--sp {
		display: block;
	}

	.c-btob-features__nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-self: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 239px;
		height: 24px;
		gap: 15.5px;
	}

	.c-btob-features__btn {
		box-sizing: border-box;
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid #333;
		background: transparent;
		position: relative;
		cursor: pointer;
	}

	.c-btob-features__btn:disabled {
		opacity: 0.5;
		cursor: default;
	}

	.c-btob-features__btn--next {
		background: #333;
		border-color: #333;
	}

	.c-btob-features__btn::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		border-right: 1.5px solid #333;
		border-top: 1.5px solid #333;
		transform: translate(-60%, -50%) rotate(45deg);
	}

	.c-btob-features__btn--prev::before {
		transform: translate(-40%, -50%) rotate(-135deg);
	}

	.c-btob-features__btn--next::before {
		border-color: #fff;
	}

	.c-btob-features__bar {
		position: relative;
		flex: 1 1 auto;
		width: 160px;
		max-width: 160px;
		height: 1px;
		background: #838586;
		border-radius: 0;
		overflow: visible;
	}

	.c-btob-features__progress {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		height: 3px;
		width: 37.5%;
		min-width: 60px;
		max-width: 100%;
		background: #333;
		border-radius: 10px;
		transform: translateY(-50%);
		transition: width 0.2s ease;
	}

	/* Numbered cards — SP stacks vertically (same as TOP), not a slider */
	.c-btob-features--numbered .c-btob-features__track {
		--btob-feature-w: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 16px;
		grid-template-columns: none;
		grid-auto-flow: unset;
		width: 100%;
		max-width: 378px;
		min-width: 0;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		overflow: visible;
		overflow-x: visible;
		overflow-y: visible;
		scroll-snap-type: none;
	}

	.c-btob-features--numbered .c-btob-feature.c-btob-feature--numbered {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		height: auto;
		min-height: 0;
		gap: 16px;
		padding: 24px 16px;
		align-items: flex-start;
		text-align: left;
		scroll-snap-align: unset;
		scroll-snap-stop: normal;
	}

	.c-btob-features--numbered .c-btob-feature__title {
		min-height: 0;
		font-size: clamp(10px, calc(16 * 100vw / 410), 16px);
		font-weight: 700;
		letter-spacing: 1.2px;
		line-height: 1.8;
		text-align: left;
	}

	.c-btob-features--numbered .c-btob-feature__body {
		font-size: clamp(10px, calc(12 * 100vw / 410), 12px);
		letter-spacing: 0;
		line-height: 1.6;
		text-align: left;
	}

	.c-btob-features--numbered .c-btob-features__nav {
		display: none;
	}

	.c-btob-achieve {
		width: 100%;
		max-width: 346px;
		margin-inline: auto;
		align-items: stretch;
	}

	.c-btob-achieve__row {
		grid-template-columns: 1fr;
		gap: 4px;
		aspect-ratio: auto;
		min-height: 0;
		height: auto;
		width: 100%;
	}

	.c-btob-achieve__banner {
		min-height: 0;
		height: auto;
		width: 100%;
		max-width: none;
		border-radius: 8px;
		box-shadow: none;
	}

	.c-btob-achieve__banner-pc {
		display: none;
	}

	.c-btob-achieve__banner .c-btob-achieve__banner-sp {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.c-btob-achieve__stats {
		grid-template-columns: 1fr;
		gap: 4px;
		height: auto;
	}

	.c-btob-stat,
	.c-btob-achieve__stats .c-btob-stat:not(:last-child) {
		min-height: 0;
		height: auto;
		padding: 16px 24px;
		border-radius: 8px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		overflow: visible;
	}

	.c-btob-stat__label {
		min-height: 0;
		font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
		font-weight: 700;
		letter-spacing: 1.2px;
		line-height: 1.8;
		flex: 1 1 auto;
	}

	.c-btob-stat__ref {
		font-size: 10px;
	}

	.c-btob-stat__num {
		font-size: clamp(10px, calc(70 * 100vw / 410), 70px);
		font-weight: 300;
		letter-spacing: -1px;
	}

	.c-btob-stat__unit,
	.c-btob-stat__prefix {
		font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
		letter-spacing: 1.2px;
		padding-bottom: 0;
	}

	.c-btob-stat__unit--sm {
		font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
	}

	.c-btob-stat__unit-stack span:first-child {
		font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
	}

	.c-btob-stat__unit-stack span:last-child {
		font-size: clamp(10px, calc(14 * 100vw / 410), 14px);
	}

	.c-btob-stat__unit-stack--row {
		gap: 0;
		padding-bottom: 0;
	}

	.c-btob-stat__value {
		flex-shrink: 0;
	}

	.c-btob-stat__icon {
		display: none;
	}

	.c-btob-achieve__note {
		width: 100%;
		margin-top: 4px;
	}

	.c-btob-links {
		grid-template-columns: 1fr;
		gap: 32px;
		width: 100%;
		max-width: 346px;
		margin-inline: auto;
	}

	.c-btob-link {
		min-height: 0;
		gap: 12px;
		padding: 16px 56px 16px 24px;
	}

	.c-btob-link__title {
		font-size: clamp(10px, calc(20 * 100vw / 410), 20px);
		line-height: 1.6;
	}

	.c-btob-link__title-pc {
		display: none;
	}

	.c-btob-link__title-sp {
		display: inline;
	}

	.c-btob-link__desc,
	.c-btob-link__desc-pc,
	.c-btob-link__desc-sp,
	.c-btob-link--ghost .c-btob-link__desc,
	.c-btob-link__desc--ghost {
		display: none;
	}
}