/* ==========================================================================
   塗装・防水（assets/css/paint/）— Component（c-: ボタン・アイコンの丸・選択肢・見出し・ページ見出し・カード・よくある質問・施工事例・手順）
   - このフォルダの CSS は 塗装・防水のページだけで読み込む（inc/setup.php）
   - Figma: 02 Components のセクション 190:225（PC）・236:2492 など（SP の版）。部品の呼び方は template-parts/paint/*.php の頭
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ---------- アイコン（truss_icon() の SVG。色は currentColor） ---------- */
.c-icon-svg {
	flex-shrink: 0;
}

/* ==========================================================================
   ボタン（c-button-paint 193:263）。SP も PC の部品のまま使う（Figma）
   ========================================================================== */
.c-button-paint {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: var(--space-paint-control) var(--space-lg) var(--space-paint-control) var(--space-paint-button); /* Figma: 18 / 24 / 18 / 30（SP でも同じ） */
	font: 700 var(--fs-paint-button)/1.4 var(--font-paint); /* Paint/PC/Label-L（SP の画面でも PC の部品のまま 17px） */
	color: var(--color-text-on-brand);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--color-action-cta);
	border: 0;
	border-radius: var(--radius-full);
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

@media (max-width: 767px) {
	.c-button-paint {
		padding-inline: var(--space-paint-button) 24px; /* 矢印の側は SP でも 24（--space-lg は SP で 20 になるので値で書く） */
	}
}

.c-button-paint--m {
	gap: var(--space-xs);
	min-height: 49px;
	padding: var(--space-paint-inner) 20px var(--space-paint-inner) 24px;
	font: var(--text-paint-label-m); /* Paint/PC/Label-M（SP も 15） */
}

@media (max-width: 767px) {
	.c-button-paint--m {
		padding-inline: 24px 20px;
	}
}

.c-button-paint__label {
	min-width: 0;
}

.c-button-paint__icon {
	width: 20px;
	height: 20px;
	transition: transform 0.2s;
}

.c-button-paint__lead {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.c-button-paint--m .c-button-paint__icon {
	width: 18px;
	height: 18px;
}

.c-button-paint--m .c-button-paint__lead {
	width: 20px;
	height: 20px;
}

.c-button-paint:hover .c-button-paint__icon {
	transform: translateX(3px);
}

.c-button-paint--cta:hover {
	background: var(--color-action-cta-hover);
}

.c-button-paint--blue {
	background: var(--color-bg-brand);
}

.c-button-paint--blue:hover {
	background: var(--color-action-primary-hover);
}

.c-button-paint--line {
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
	box-shadow: inset 0 0 0 2px var(--color-border-brand); /* 2px の線（高さを変えない） */
}

.c-button-paint--line:hover {
	background: var(--color-bg-muted);
}

.c-button-paint--white {
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
}

.c-button-paint--white:hover {
	background: var(--blue-100);
}

.c-button-paint--block {
	display: flex;
	width: 100%;
}

@media (max-width: 767px) {
	.c-button-paint--block-sp {
		display: flex;
		width: 100%;
	}
}

.c-button-paint.is-disabled,
.c-button-paint[aria-disabled="true"],
.c-button-paint:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.c-button-paint.is-disabled:hover .c-button-paint__icon,
.c-button-paint:disabled:hover .c-button-paint__icon {
	transform: none;
}

/* ==========================================================================
   アイコンの丸（c-icon-circle 193:318）。中のアイコンは直径の50%
   ========================================================================== */
.c-icon-circle {
	--icon-circle-size: 48px;

	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--icon-circle-size);
	height: var(--icon-circle-size);
	color: var(--color-text-brand);
	background: var(--blue-100);
	border-radius: 50%;
}

.c-icon-circle .c-icon-circle__icon {
	width: 50%;
	height: 50%;
}

.c-icon-circle--white {
	background: var(--color-bg-canvas);
}

.c-icon-circle--brand {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

.c-icon-circle--28 { --icon-circle-size: 28px; }
.c-icon-circle--40 { --icon-circle-size: 40px; }
.c-icon-circle--48 { --icon-circle-size: 48px; }
.c-icon-circle--56 { --icon-circle-size: 56px; }
.c-icon-circle--64 { --icon-circle-size: 64px; }
.c-icon-circle--72 { --icon-circle-size: 72px; }

@media (max-width: 767px) {
	.c-icon-circle--sp-28 { --icon-circle-size: 28px; }
	.c-icon-circle--sp-40 { --icon-circle-size: 40px; }
	.c-icon-circle--sp-48 { --icon-circle-size: 48px; }
	.c-icon-circle--sp-56 { --icon-circle-size: 56px; }
	.c-icon-circle--sp-64 { --icon-circle-size: 64px; }
	.c-icon-circle--sp-72 { --icon-circle-size: 72px; }
}

/* ==========================================================================
   選択肢（c-chip-paint 193:327。高さ48・文字16。高齢の方にも押しやすく）
   - ボタン: <button class="c-chip-paint" aria-pressed="true|false">（選んだら is-selected も可）
   - フォーム: truss_form_field( …, array( 'chip_class' => 'c-chip-paint' ) ) → <label class="c-chip-paint is-checked"><input class="c-chip-paint__input"><span class="c-chip-paint__label">
   ========================================================================== */
.c-chip-paint {
	position: relative;
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px; /* 枠線 2px の内側で Figma の 24 */
	font: var(--text-paint-body-bold); /* Paint/PC/Body-Bold（SP も 16） */
	color: var(--color-text-primary);
	text-align: center;
	text-wrap: balance; /* 2行になる幅で「お見積りの／依頼」と2字だけ落ちないように（「無料診断・／お見積りの依頼」。2026-10-05） */
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-chip-paint:hover {
	border-color: var(--color-border-brand);
}

.c-chip-paint__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

.c-chip-paint:has(.c-chip-paint__input:focus-visible) {
	outline: 3px solid var(--focus-color, var(--color-border-brand));
	outline-offset: 3px;
}

.c-chip-paint.is-selected,
.c-chip-paint.is-checked,
.c-chip-paint[aria-pressed="true"],
.c-chip-paint:has(.c-chip-paint__input:checked) {
	padding-left: 14px; /* Figma の 16（枠線ぶん引く） */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-color: var(--color-border-brand);
}

/* 選んだ印（色だけで区別しない） */
.c-chip-paint.is-selected::before,
.c-chip-paint.is-checked::before,
.c-chip-paint[aria-pressed="true"]::before,
.c-chip-paint:has(.c-chip-paint__input:checked)::before {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.29297C19.6835 4.90245 20.3165 4.90245 20.707 5.29297C21.0975 5.68349 21.0975 6.31651 20.707 6.70703L9.70702 17.707C9.31649 18.0976 8.68348 18.0976 8.29295 17.707L3.29295 12.707C2.90243 12.3165 2.90243 11.6835 3.29295 11.293C3.68348 10.9024 4.31649 10.9024 4.70702 11.293L8.99999 15.5859L19.293 5.29297Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-chip-paint:has(.c-chip-paint__input:disabled),
.c-chip-paint:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ==========================================================================
   見出し＋リード（c-heading-paint 194:251 ／ SP 236:2505）
   ========================================================================== */
.c-heading-paint {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	text-align: center;
}

.c-heading-paint--left {
	align-items: flex-start;
	text-align: left;
}

.c-heading-paint__title {
	font: var(--text-paint-h2);
	color: var(--color-text-primary);
}

.c-heading-paint__lead {
	max-width: 720px;
	font: var(--text-paint-lead);
	color: var(--color-text-secondary);
}

.c-heading-paint--inverse .c-heading-paint__title,
.c-heading-paint--inverse .c-heading-paint__lead {
	color: var(--color-text-on-brand);
}

@media (max-width: 767px) {
	.c-heading-paint {
		gap: var(--space-sm);
	}

	.c-heading-paint__lead {
		max-width: none;
	}
}

/* ==========================================================================
   下層のページ見出し（c-page-header-paint 196:376 ／ SP 236:2532）。淡い地（ヘッダーとつながる）
   ========================================================================== */
.c-page-header-paint {
	padding: var(--space-lg) var(--paint-gutter, 120px) var(--space-5xl);
	background: var(--color-bg-muted);
}

.c-page-header-paint--s {
	padding-bottom: var(--space-4xl);
}

.c-page-header-paint__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	max-width: 1200px;
	margin-inline: auto;
}

.c-page-header-paint__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--space-xs);
	align-items: center;
	font: var(--text-paint-caption);
}

.c-page-header-paint__crumb {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
}

.c-page-header-paint__crumb-link {
	/* 押せる高さを 44px に（見た目と行の高さは変えない） */
	padding: 11px var(--space-2xs);
	margin: -11px -4px;
	color: var(--color-text-brand);
	text-decoration: none;
}

.c-page-header-paint__crumb-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.c-page-header-paint__crumb-current {
	color: var(--color-text-secondary);
}

.c-page-header-paint__chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-text-secondary);
}

.c-page-header-paint__row {
	display: flex;
	gap: var(--space-2xl);
	align-items: center;
}

.c-page-header-paint__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.c-page-header-paint__title {
	font: var(--text-paint-h1);
	color: var(--color-text-primary);
}

.c-page-header-paint__lead {
	max-width: 600px;
	font: var(--text-paint-lead);
	color: var(--color-text-secondary);
}

.c-page-header-paint--s .c-page-header-paint__lead {
	max-width: 720px;
}

.c-page-header-paint__photo {
	flex-shrink: 0;
	width: min(540px, 45%);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius-paint-surface);
}

.c-page-header-paint__photo picture,
.c-page-header-paint__img {
	display: block;
	width: 100%;
	height: 100%;
}

.c-page-header-paint__img {
	object-fit: cover;
}

/* PC と SP の間の幅は、h1 を少しずつ小さく（写真の横で見出しが細かく折り返さないように） */
@media (min-width: 768px) and (max-width: 1199px) {
	.c-page-header-paint__title {
		font-size: clamp(32px, 4.2vw, 50px);
	}
}

@media (max-width: 767px) {
	.c-page-header-paint,
	.c-page-header-paint--s {
		padding: var(--space-sm) var(--space-lg) var(--space-3xl); /* 12 / 20 / 40 */
	}

	.c-page-header-paint__inner {
		gap: var(--space-lg);
	}

	.c-page-header-paint__breadcrumb-list,
	.c-page-header-paint__crumb {
		gap: 2px 6px;
	}

	.c-page-header-paint__chevron {
		width: 14px;
		height: 14px;
	}

	.c-page-header-paint__row {
		flex-direction: column;
		gap: var(--space-lg);
		align-items: stretch;
	}

	.c-page-header-paint__body {
		gap: var(--space-sm);
	}

	.c-page-header-paint__lead,
	.c-page-header-paint--s .c-page-header-paint__lead {
		max-width: none;
	}

	.c-page-header-paint__photo {
		width: 100%;
		aspect-ratio: 335 / 220;
		border-radius: var(--radius-paint-card);
	}
}

/* 幅 360px 未満（320px など）：「カラーシミュレーション」（11文字）が1行に入る大きさに */
@media (max-width: 359px) {
	.c-page-header-paint__title {
		font-size: var(--fs-paint-h1-narrow); /* Paint/SP/H1 30px を縮める */
	}
}

/* ==========================================================================
   カード（c-card-paint 194:280 ／ SP 238:809）。部品のテンプレートは無いので、この形で書く:
   <div class="c-card-paint [c-card-paint--muted] [c-card-paint--horizontal]">
     （template-parts/paint/icon-circle）<div class="c-card-paint__body"><h3 class="c-card-paint__title">…</h3><p class="c-card-paint__text">…</p></div>
   </div>
   - 地は白（淡い地のセクションの上）／--muted（白い地のセクションの上）。左に色の縦線は付けない。横に並べるときは高さをそろえる（親を grid か flex の stretch に）
   ========================================================================== */
.c-card-paint {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
	padding: var(--space-paint-card);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-paint-card);
}

.c-card-paint--muted {
	background: var(--color-bg-muted);
}

.c-card-paint--horizontal {
	flex-direction: row;
	gap: 20px;
}

.c-card-paint .c-icon-circle {
	--icon-circle-size: 56px;
}

.c-card-paint--horizontal .c-icon-circle {
	--icon-circle-size: 64px;
}

/* 淡いカードの上のアイコンの丸は白（Figma: Muted のカード → Tone=White） */
.c-card-paint--muted .c-icon-circle--blue {
	background: var(--color-bg-canvas);
}

.c-card-paint__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
	min-width: 0;
}

.c-card-paint__title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.c-card-paint__text {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

@media (max-width: 767px) {
	.c-card-paint {
		gap: var(--space-sm);
		padding: var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.c-card-paint--horizontal {
		gap: var(--space-md);
	}

	.c-card-paint .c-icon-circle,
	.c-card-paint--horizontal .c-icon-circle {
		--icon-circle-size: 48px;
	}

	.c-card-paint__body {
		gap: 6px;
	}
}

/* ==========================================================================
   よくある質問の1問（c-faq-item-paint 194:329 ／ SP 237:8538）。開閉は common.js
   ========================================================================== */
.c-faq-item-paint {
	background: var(--color-bg-muted);
	border-radius: var(--radius-xl);
}

.c-faq-item-paint--white {
	background: var(--color-bg-canvas);
}

.c-faq-item-paint__heading {
	margin: 0;
	font: inherit;
}

.c-faq-item-paint__q {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	width: 100%;
	padding: var(--space-paint-row) var(--space-lg); /* SP は下の @media で上書き */
	color: var(--color-text-primary);
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var(--radius-xl);
}

.c-faq-item-paint.is-open .c-faq-item-paint__q {
	padding-bottom: var(--space-md);
}

.c-faq-item-paint__mark {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	height: 40px;
	font: var(--text-paint-faq-mark); /* Paint/PC/FAQ-Mark */
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border-radius: 50%;
}

.c-faq-item-paint__mark--a {
	color: var(--color-text-brand);
	background: var(--blue-100);
}

.c-faq-item-paint__question {
	flex: 1;
	min-width: 0;
	font: var(--text-paint-h4);
}

.c-faq-item-paint__q:hover .c-faq-item-paint__question {
	color: var(--color-text-brand);
}

.c-faq-item-paint__toggle {
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	height: 36px;
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
	border-radius: 50%;
}

.c-faq-item-paint--white .c-faq-item-paint__toggle {
	background: var(--color-bg-muted);
}

.c-faq-item-paint__toggle-icon {
	width: 20px;
	height: 20px;
}

.c-faq-item-paint__toggle-icon--minus,
.c-faq-item-paint__q[aria-expanded="true"] .c-faq-item-paint__toggle-icon--plus {
	display: none;
}

.c-faq-item-paint__q[aria-expanded="true"] .c-faq-item-paint__toggle-icon--minus {
	display: block;
}

.c-faq-item-paint__a {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	padding: 0 var(--space-lg) var(--space-paint-row); /* SP は下の @media で上書き */
}

.c-faq-item-paint__answer {
	flex: 1;
	min-width: 0;
	max-width: 720px;
	padding-top: 3px; /* A の丸（40）と1行目の高さをそろえる */
	font: var(--text-paint-body);
	color: var(--color-text-primary);
}

.c-faq-item-paint__answer > * + * {
	margin-top: 0.8em;
}

.c-faq-item-paint__answer a {
	color: var(--color-text-brand);
}

@media (max-width: 767px) {
	.c-faq-item-paint,
	.c-faq-item-paint__q {
		border-radius: var(--radius-paint-box);
	}

	.c-faq-item-paint__q {
		gap: var(--space-sm);
		padding: var(--space-md);
	}

	.c-faq-item-paint.is-open .c-faq-item-paint__q {
		padding-bottom: var(--space-sm);
	}

	.c-faq-item-paint__mark {
		flex-basis: 32px;
		height: 32px;
		font: var(--text-paint-label-l); /* Paint/SP/Label-L */
	}

	.c-faq-item-paint__question {
		font: var(--text-paint-body-bold); /* Paint/SP/Body-Bold 16 */
	}

	.c-faq-item-paint__toggle {
		flex-basis: 32px;
		height: 32px;
	}

	.c-faq-item-paint__toggle-icon {
		width: 18px;
		height: 18px;
	}

	.c-faq-item-paint__a {
		gap: var(--space-sm);
		padding: 0 var(--space-md) var(--space-md);
	}

	.c-faq-item-paint__answer {
		max-width: none;
		padding-top: 1px;
	}
}

/* ==========================================================================
   施工事例のカード（c-works-card-paint 194:346 ／ SP 237:8539）。カード全体が詳細へのリンク
   ========================================================================== */
.c-works-card-paint {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-card);
}

.c-works-card-paint--white {
	background: var(--color-bg-canvas);
}

.c-works-card-paint__photos {
	display: flex;
	flex-shrink: 0;
	height: 240px;
}

.c-works-card-paint__before,
.c-works-card-paint__after,
.c-works-card-paint__noimage {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--blue-100);
}

.c-works-card-paint__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.c-works-card-paint:hover .c-works-card-paint__img {
	transform: scale(1.04);
}

.c-works-card-paint__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-paint-badge); /* Paint/PC/Badge */
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
}

.c-works-card-paint__badge--after {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

.c-works-card-paint__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-paint-inner);
	padding: var(--space-lg) var(--space-paint-card) var(--space-paint-card);
}

.c-works-card-paint__title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.c-works-card-paint__link {
	color: inherit;
	text-decoration: none;
}

/* カード全体を押せるように */
.c-works-card-paint__link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
	border-radius: inherit;
}

.c-works-card-paint__link:focus-visible {
	outline: none;
}

.c-works-card-paint:has(.c-works-card-paint__link:focus-visible) {
	outline: 3px solid var(--focus-color, var(--color-border-brand));
	outline-offset: 3px;
}

.c-works-card-paint:hover .c-works-card-paint__title {
	color: var(--color-text-brand);
}

.c-works-card-paint__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: auto;
}

.c-works-card-paint__tag {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	padding: var(--space-2xs) var(--space-sm);
	font: var(--text-paint-tag); /* Paint/PC/Tag */
	color: var(--color-text-brand);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
}

.c-works-card-paint--white .c-works-card-paint__tag {
	background: var(--color-bg-muted);
}

.c-works-card-paint__tag--area {
	padding-left: var(--space-xs);
	color: var(--color-text-secondary);
}

.c-works-card-paint__tag-icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 767px) {
	.c-works-card-paint {
		border-radius: var(--radius-xl);
	}

	.c-works-card-paint__photos {
		height: 200px;
	}

	.c-works-card-paint__badge {
		top: 12px;
		left: 12px;
		font: var(--text-paint-caption); /* Paint/SP/Caption 14 */
	}

	.c-works-card-paint__body {
		gap: var(--space-sm);
		padding: var(--space-lg) var(--space-lg) var(--space-xl); /* 20 / 20 / 24 */
	}

	.c-works-card-paint__tag {
		font: var(--text-paint-caption);
	}
}

/* ==========================================================================
   手順の表示（c-steps-paint 230:12200 ／ SP 237:8569）
   PC：丸い札（いま＝青・まだ＝白・済み＝check）を線（32×2）でつなぐ。SP：丸（36）の下に文字、幅を等分
   ========================================================================== */
.c-steps-paint {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.c-steps-paint__item {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

/* 札の間の線（済んだ手順のあとは青） */
.c-steps-paint__item + .c-steps-paint__item::before {
	flex-shrink: 0;
	width: 32px;
	height: 2px;
	content: "";
	background: var(--color-border-default);
}

.c-steps-paint__item.is-done + .c-steps-paint__item::before {
	background: var(--color-border-brand);
}

.c-steps-paint__pill {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: 6px 22px 6px 6px; /* 枠線 2px の内側で Figma の 8 / 24 / 8 / 8 */
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.c-steps-paint__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font: var(--text-paint-label-l); /* Paint/PC/Label-L（SP は下で上書き） */
	color: var(--color-text-brand);
	background: var(--blue-100);
	border-radius: 50%;
}

.c-steps-paint__label {
	font: var(--text-paint-label-l); /* Paint/PC/Label-L（SP は下で上書き） */
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.c-steps-paint__check {
	width: 20px;
	height: 20px;
}

.c-steps-paint__item.is-current .c-steps-paint__pill {
	background: var(--color-bg-brand);
	border-color: var(--color-bg-brand);
}

.c-steps-paint__item.is-current .c-steps-paint__num {
	background: var(--color-bg-canvas);
}

.c-steps-paint__item.is-current .c-steps-paint__label {
	color: var(--color-text-on-brand);
}

.c-steps-paint__item.is-done .c-steps-paint__num {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

@media (max-width: 767px) {
	.c-steps-paint {
		flex-wrap: nowrap;
		gap: var(--space-xs);
		align-items: flex-start;
	}

	.c-steps-paint__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.c-steps-paint__item + .c-steps-paint__item::before {
		display: none;
	}

	.c-steps-paint__pill {
		flex: 1;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	.c-steps-paint__item.is-current .c-steps-paint__pill {
		background: none;
	}

	.c-steps-paint__num {
		width: 36px;
		height: 36px;
		font: var(--text-paint-label-l); /* Paint/SP/Label-L */
	}

	.c-steps-paint__item.is-current .c-steps-paint__num {
		color: var(--color-text-on-brand);
		background: var(--color-bg-brand);
	}

	.c-steps-paint__label {
		font: var(--text-paint-label-s); /* Paint/SP/Label-S 14 */
		text-align: center;
		white-space: normal;
	}

	.c-steps-paint__item.is-current .c-steps-paint__label {
		color: var(--color-text-brand);
	}
}