/* ==========================================================================
   塗装・防水（assets/css/paint/）— Layout（l-: ヘッダー・全画面メニュー・フッター・固定バー・お問い合わせの帯）
   - このフォルダの CSS は 塗装・防水のページだけで読み込む（inc/setup.php）
   - Figma: l-header-paint 48:79・l-header-paint-sp 157:129・l-menu-sp Site=Paint 158:182・l-footer-paint 96:99・
     l-footer-paint-sp 162:224・l-fixbar-sp Site=Paint 157:161・l-cta-paint 196:301・l-cta-paint-sp 237:5861
   - SP は同じファイルの中で @media (max-width: 767px) に書く。ナビが入らない幅（1199px 以下）は「メニュー」を出す
   ========================================================================== */

:root {
	--header-height: 112px; /* ページ内リンクの止まる位置（foundation.css の scroll-padding-top） */
	--paint-gutter: clamp(20px, 8.334vw, 120px); /* セクションの左右（PC 120 → SP 20） */
}

body {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
}

/* 青い面の上のフォーカスは白 */
.l-menu-sp--paint,
.l-cta-paint__panel {
	--focus-color: var(--color-text-on-brand);
}

/* ==========================================================================
   ヘッダー（l-header-paint。淡い地に白い丸い枠。上に固定）
   ========================================================================== */
.l-header-paint {
	position: sticky;
	top: var(--admin-bar-offset, 0px); /* ログイン中は管理バーの下（common/foundation.css） */
	z-index: 100;
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg-muted);
}

.l-header-paint__inner {
	display: flex;
	gap: var(--space-md); /* 最小の間。余りは space-between で分ける（1440px で Figma の約18px） */
	align-items: center;
	justify-content: space-between;
	max-width: 1392px;
	height: 80px;
	margin-inline: auto;
	padding: 0 var(--space-sm) 0 var(--space-paint-card);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full); /* 高さ 80 の丸い帯（Figma の 40 と同じ見た目） */
	box-shadow: var(--shadow-paint-float);
}

.l-header-paint__brand {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-sm);
	align-items: center;
	min-height: 44px; /* 押せる高さ（SP のロゴは 28px） */
	color: inherit;
	text-decoration: none;
}

.l-header-paint__logo {
	width: 112px;
	height: 32px;
	object-fit: contain;
}

.l-header-paint__label,
.l-footer-paint__label,
.l-menu-sp__label {
	padding: 6px var(--space-paint-inner);
	font: var(--text-paint-body-bold);
	color: var(--color-text-brand);
	white-space: nowrap;
	background: var(--blue-100);
	border-radius: var(--radius-full);
}

/* ナビは 554px（Figma の項目の間 28px）を上限に、狭い幅では項目の間を 12px まで詰める */
.l-header-paint__nav {
	flex: 0 1 554px;
}

.l-header-paint__nav-list {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
}

.l-header-paint__nav-list a {
	display: block;
	padding-block: 10px; /* 押せる高さ 44 */
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.l-header-paint__nav-list a:hover,
.l-header-paint__nav-list a[aria-current="page"] {
	color: var(--color-text-brand);
}

.l-header-paint__nav-list a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.l-header-paint__actions {
	display: flex;
	flex-shrink: 0;
	gap: 20px;
	align-items: center;
}

.l-header-paint__tel {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.l-header-paint__tel-text {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
}

.l-header-paint__tel-number {
	font: var(--text-paint-tel); /* Paint/PC/Tel */
	color: var(--color-text-brand);
}

.l-header-paint__tel-hours {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.l-header-paint__tel:hover .l-header-paint__tel-number {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.l-header-paint__menu {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 44px;
	padding: 0;
	font: 700 var(--fs-paint-menu-label)/1.4 var(--font-paint); /* Paint/SP/Label-S 14。768〜1199px でも 14（--text-paint-label-s は PC で 13） */
	color: var(--color-text-primary);
	background: none;
	border: 0;
	border-radius: var(--radius-md);
}

.l-header-paint__menu-icon {
	width: 24px;
	height: 24px;
}

/* 電話番号の文字が入らない幅は、電話の丸だけ（1400px 未満。スクロールバーのある環境でも枠に収まる幅） */
@media (max-width: 1399px) {
	.l-header-paint__tel-text {
		display: none;
	}

	.l-header-paint__tel {
		padding: 2px;
	}
}

/* ナビが入らない幅は「メニュー」で全画面メニューを開く */
@media (max-width: 1199px) {
	.l-header-paint__nav {
		display: none;
	}

	.l-header-paint__menu {
		display: flex;
	}

	.l-header-paint__actions {
		gap: var(--space-sm);
	}
}

@media (max-width: 767px) {
	:root {
		--header-height: 64px;
		--paint-gutter: 20px;
	}

	.l-header-paint {
		padding: 6px var(--space-xs);
	}

	.l-header-paint__inner {
		height: 52px;
		padding: 0 6px 0 18px;
		border-radius: var(--radius-full);
	}

	.l-header-paint__brand {
		gap: var(--space-xs);
	}

	.l-header-paint__logo {
		width: 84px;
		height: 24px;
	}

	.l-header-paint__label {
		padding: var(--space-2xs) 10px;
		font: var(--text-paint-label-s); /* Paint/SP/Label-S 14 */
	}

	.l-header-paint__actions {
		gap: 2px;
	}

	.l-header-paint .l-header-paint__cta {
		display: none; /* component.css（c-button-paint）より後に効かせる */
	}
}

/* 幅 320px 前後：「メニュー」ボタンがはみ出さないように、左の余白と札を詰める */
@media (max-width: 359px) {
	.l-header-paint__inner {
		padding-left: var(--space-sm);
	}

	.l-header-paint__brand {
		gap: 6px;
	}

	.l-header-paint__label {
		padding: var(--space-2xs) var(--space-xs);
	}
}

/* ==========================================================================
   全画面メニュー（l-menu-sp Site=Paint。青の全画面の色面）
   ========================================================================== */
.l-menu-sp--paint {
	position: fixed;
	inset: 0;
	z-index: 1000;
	padding-bottom: 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
}

.l-menu-sp--paint .l-menu-sp__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 14px 0 26px;
}

.l-menu-sp--paint .l-menu-sp__brand {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px; /* 押せる高さ */
	color: inherit;
	text-decoration: none;
}

.l-menu-sp--paint .l-menu-sp__logo {
	width: 84px;
	height: 24px;
	object-fit: contain;
}

.l-menu-sp--paint .l-menu-sp__label {
	padding: var(--space-2xs) 10px;
	font: var(--text-paint-label-s); /* Paint/SP/Label-S 14 */
}

.l-menu-sp--paint .l-menu-sp__actions {
	display: flex;
	gap: 2px;
	align-items: center;
}

.l-menu-sp--paint .l-menu-sp__tel-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
}

.l-menu-sp--paint .l-menu-sp__close {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 44px;
	padding: 0;
	font: 700 var(--fs-paint-menu-label)/1.4 var(--font-paint);
	color: var(--color-text-on-brand);
	background: none;
	border: 0;
	border-radius: var(--radius-md);
}

.l-menu-sp--paint .l-menu-sp__close-icon {
	width: 24px;
	height: 24px;
}

.l-menu-sp--paint .l-menu-sp__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-card);
	padding: var(--space-xs) 20px 0;
}

.l-menu-sp--paint .l-menu-sp__nav > li {
	border-bottom: 1px solid var(--color-border-on-brand);
}

.l-menu-sp--paint .l-menu-sp__nav a {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) 0;
	font: 700 var(--fs-paint-menu-item)/1.4 var(--font-paint); /* Paint/SP/Label-L */
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.l-menu-sp--paint .l-menu-sp__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.l-menu-sp--paint .l-menu-sp__chevron {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.l-menu-sp--paint .l-menu-sp__nav .sub-menu {
	padding: 0 0 var(--space-sm) var(--space-md);
}

.l-menu-sp--paint .l-menu-sp__nav .sub-menu a {
	padding: var(--space-sm) 0;
	font: var(--text-paint-label-m); /* Paint/SP/Label-M（PC も 15） */
}

.l-menu-sp--paint .l-menu-sp__nav .sub-menu .l-menu-sp__chevron {
	width: 16px;
	height: 16px;
	color: var(--color-text-on-brand-muted);
}

.l-menu-sp--paint .l-menu-sp__tel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.l-menu-sp--paint .l-menu-sp__tel-label,
.l-menu-sp--paint .l-menu-sp__tel-hours {
	font: var(--text-paint-caption);
}

.l-menu-sp--paint .l-menu-sp__tel-number {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	font: 800 var(--fs-paint-menu-tel)/1.3 var(--font-paint); /* Paint/SP/Number-M */
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.l-menu-sp--paint .l-menu-sp__tel-icon {
	width: 24px;
	height: 24px;
}

.l-menu-sp--paint .l-menu-sp__operator {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font: var(--text-paint-label-m); /* PC も SP も 15 */
	color: var(--color-text-on-brand);
	text-decoration: none;
}

.l-menu-sp--paint .l-menu-sp__operator:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.l-menu-sp--paint .l-menu-sp__operator-icon {
	width: 18px;
	height: 18px;
}

/* SP より広い幅（ナビが入らない PC）で開いたとき：ロゴの位置をヘッダーとそろえ、中身は中央に */
@media (min-width: 768px) {
	.l-menu-sp--paint .l-menu-sp__head {
		height: 112px;
		padding: 0 36px 0 52px;
	}

	.l-menu-sp--paint .l-menu-sp__logo {
		width: 112px;
		height: 32px;
	}

	.l-menu-sp--paint .l-menu-sp__label {
		padding: 6px var(--space-paint-inner);
		font: var(--text-paint-body-bold);
	}

	.l-menu-sp--paint .l-menu-sp__body {
		max-width: 680px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   フッター（l-footer-paint。淡い地・上の角48）
   ========================================================================== */
.l-footer-paint {
	padding: var(--space-5xl) var(--paint-gutter) var(--space-2xl);
	background: var(--color-bg-muted);
	border-radius: var(--radius-paint-surface) var(--radius-paint-surface) 0 0;
}

/* 直前も同じ淡い地のページ（お問い合わせの入力・確認・完了）は、角のすき間にページの白い地が出ないよう角を丸めない（見た目は淡い地がそのまま続く。2026-10-03） */
.l-main-paint:has(.p-contact) + .l-footer-paint {
	border-radius: 0;
}

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

.l-footer-paint__top {
	display: flex;
	gap: var(--space-paint-wide);
	align-items: flex-start;
}

.l-footer-paint__company {
	display: flex;
	flex: 0 0 380px;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}

.l-footer-paint__brand {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	/* 押せる高さを 44px 以上に（ロゴの札 約28px＋上下 9。まわりの余白は変えない） */
	padding-block: 9px;
	margin-block: -9px;
	color: inherit;
	text-decoration: none;
}

.l-footer-paint__logo {
	width: 112px;
	height: 32px;
	object-fit: contain;
}

.l-footer-paint__address {
	font: var(--text-paint-footer-body); /* Paint/PC/Footer-Body */
	color: var(--color-text-primary);
}

.l-footer-paint__tel {
	position: relative;
	color: inherit;
	text-decoration: none;
}

/* 押せる所を 44px に（文の行の高さは変えずに、当たりだけを上下に広げる） */
.l-footer-paint__tel::after {
	position: absolute;
	inset: -14px -4px; /* 文字の高さ 約17px＋上下 14 */
	content: "";
}

.l-footer-paint__tel:hover {
	text-decoration: underline;
}

.l-footer-paint__license {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.l-footer-paint__navs {
	flex: 1;
	min-width: 0;
}

.l-footer-paint__nav-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-paint-wide);
}

.l-footer-paint__nav-list > li {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
}

/* 列の見出し（メニューでは1段目の項目） */
.l-footer-paint__nav-list > li > a,
.l-footer-paint__nav-list > li > .menu-heading {
	font: var(--text-paint-body-bold);
	color: var(--color-text-brand);
	text-decoration: none;
}

.l-footer-paint__nav-list .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
	padding: 0;
	list-style: none;
}

.l-footer-paint__nav-list .sub-menu a {
	display: block; /* li の行の高さ（本文 17/1.85）に引っぱられないように。行の間は Figma の約38px */
	width: fit-content;
	font: var(--text-paint-footer-link); /* Paint/PC/Footer-Link */
	color: var(--color-text-primary);
	text-decoration: none;
}

.l-footer-paint__nav-list a:hover,
.l-footer-paint__link:hover {
	color: var(--color-text-brand);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.l-footer-paint__area {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg) var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-xl);
}

.l-footer-paint__area-title {
	font: var(--text-paint-label-m);
	color: var(--color-text-brand);
}

.l-footer-paint__area-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

/* まとまり（中部・南部・北部・宮古・八重山・そのほかの離島）ごとの行。見出しが左、市町村は右で折り返す。
   見出しの列の幅は、いちばん長い見出し（そのほかの離島）にそろえる（subgrid で全部の行の市町村の頭をそろえる） */
.l-footer-paint__area-groups {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--space-2xs) var(--space-md);
}

.l-footer-paint__area-group {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

.l-footer-paint__area-group > dd {
	min-width: 0;
}

.l-footer-paint__area-region {
	font: var(--text-paint-footer-area-bold); /* Paint/PC/Footer-Area-Bold */
	color: var(--color-text-primary);
}

.l-footer-paint__area-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	font: var(--text-paint-footer-area); /* Paint/PC/Footer-Area */
	color: var(--color-text-secondary);
}

.l-footer-paint__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-lg);
	align-items: center;
	justify-content: space-between;
	font: var(--text-paint-caption);
}

.l-footer-paint__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-paint-card);
}

.l-footer-paint__link {
	color: var(--color-text-primary);
	text-decoration: none;
}

.l-footer-paint__copyright {
	color: var(--color-text-secondary);
}

.l-footer-paint__copyright small {
	font-size: inherit;
}

/* 1200〜1279px：列の幅が足りず「カラーシミュレーション」が折り返すので、間を詰める */
@media (min-width: 1200px) and (max-width: 1279px) {
	.l-footer-paint__top {
		gap: var(--space-2xl);
	}

	.l-footer-paint__nav-list {
		gap: var(--space-xl);
	}
}

/* 会社の情報とナビが横に入らない幅は、会社の情報を上に */
@media (max-width: 1199px) {
	.l-footer-paint__top {
		flex-direction: column;
		gap: var(--space-2xl);
	}

	.l-footer-paint__company {
		flex-basis: auto;
	}

	.l-footer-paint__navs {
		width: 100%;
	}

	.l-footer-paint__nav-list {
		gap: var(--space-xl);
	}
}

@media (max-width: 767px) {
	.l-footer-paint {
		padding: var(--space-4xl) var(--space-lg) var(--space-paint-card); /* 48 / 20 / 28 */
		border-radius: var(--radius-paint-panel) var(--radius-paint-panel) 0 0;
	}

	.l-footer-paint__inner,
	.l-footer-paint__top {
		gap: var(--space-2xl); /* 32 */
	}

	.l-footer-paint__company {
		gap: var(--space-sm);
	}

	.l-footer-paint__brand {
		gap: var(--space-xs);
	}

	.l-footer-paint__logo {
		width: 84px;
		height: 24px;
	}

	.l-footer-paint__label {
		padding: var(--space-2xs) 10px;
		font: var(--text-paint-label-s); /* Paint/SP/Label-S 14 */
	}

	.l-footer-paint__address {
		font: var(--text-paint-body-s); /* Paint/SP/Body-S 15/180% */
	}

	.l-footer-paint__nav-list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xl); /* 24 */
	}

	.l-footer-paint__nav-list > li {
		gap: var(--space-2xs);
	}

	.l-footer-paint__nav-list > li > a,
	.l-footer-paint__nav-list > li > .menu-heading {
		font: var(--text-paint-label-m); /* Paint/SP/Label-M 15 */
	}

	/* リンクは2列。1行の高さ 44（押せる高さ） */
	.l-footer-paint__nav-list .sub-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 13px;
	}

	.l-footer-paint__nav-list .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		font: var(--text-paint-caption);
		word-break: keep-all; /* 折り返すのは <wbr> の所だけ（320px で「カラーシミュレーシ／ョン」と切れないように。footer-paint.php） */
	}

	.l-footer-paint__nav-list .sub-menu .is-wide {
		grid-column: 1 / -1;
	}

	.l-footer-paint__area {
		padding: var(--space-lg);
	}

	.l-footer-paint__area-list {
		font: var(--text-paint-caption);
	}

	/* SP は見出しを上・市町村を下に（見出しの列が「そのほかの離島」の幅になると、市町村の列が狭くなるため） */
	.l-footer-paint__area-groups {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
	}

	.l-footer-paint__area-region {
		font: var(--text-paint-caption-bold); /* Paint/SP/Caption-Bold */
	}

	.l-footer-paint__bottom {
		flex-direction: column;
		gap: var(--space-2xs);
		align-items: flex-start;
	}

	.l-footer-paint__links {
		gap: 0 var(--space-xl); /* 24 */
	}

	.l-footer-paint__link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ==========================================================================
   画面下の固定の問い合わせバー（l-fixbar-sp Site=Paint。SP だけ）
   ========================================================================== */
.l-fixbar-sp--paint {
	display: none;
}

@media (max-width: 767px) {
	.l-fixbar-sp--paint {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: flex;
		gap: var(--space-xs);
		align-items: center;
		padding: var(--space-sm) var(--space-sm) calc(14px + env(safe-area-inset-bottom, 0px));
		background: var(--color-bg-canvas);
		box-shadow: var(--shadow-paint-up); /* 上向きの影 */
	}

	.l-fixbar-sp--paint .c-button-paint {
		min-height: 50px;
	}

	.l-fixbar-sp--paint .l-fixbar-sp__tel {
		flex-shrink: 0;
	}

	.l-fixbar-sp--paint .l-fixbar-sp__cta {
		flex: 1;
		min-width: 0;
	}

	/*
	 * 固定バーの高さぶん、フッターの下をあける。body ではなくフッターの中であけて、余白もフッターと同じ淡い色にする（Figma の l-fixbar-sp__spacer）
	 * （has-fixbar が無くても・バーが無ければ詰める）
	 */
	body.has-fixbar {
		padding-bottom: 0;
	}

	body:has(> .l-fixbar-sp--paint) .l-footer-paint {
		padding-bottom: calc(var(--space-paint-card) + 76px + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
   お問い合わせの帯（l-cta-paint。白の地に青い面と4つのタイル）
   ========================================================================== */
.l-cta-paint {
	padding: var(--space-paint-section) var(--paint-gutter);
	background: var(--color-bg-canvas);
}

/* 直前の最後のセクションも白い地のページ（サービス・料金・工事の流れ・コラム・対応エリア）は、帯の上の余白を重ねない
   （セクションの下の余白だけにして、トップ・ツールと同じ間隔 112px・SP 56px にそろえる。2026-10-02 ユーザー決定） */
:is(.p-paint-service, .p-paint-price, .p-paint-flow, .p-column-archive, .p-column-single, .p-area) + .l-cta-paint {
	padding-top: 0;
}

.l-cta-paint__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(24px, 4.5vw, 64px);
	background: var(--color-bg-brand);
	border-radius: var(--radius-paint-surface);
}

.l-cta-paint__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.l-cta-paint__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--space-paint-card) var(--space-xl) var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-paint-card);
}

.l-cta-paint__item-head {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
}

.l-cta-paint__item-title {
	display: flex;
	gap: var(--space-paint-inner);
	align-items: center;
	font: var(--text-paint-tile-title); /* Paint/PC/Tile-Title */
	color: var(--color-text-primary);
}

.l-cta-paint__item-text {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.l-cta-paint__item-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.l-cta-paint__tel {
	font: var(--text-paint-number-m);
	color: var(--color-text-brand);
	text-decoration: none;
	white-space: nowrap;
}

.l-cta-paint__tel:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.l-cta-paint__hours {
	font: var(--text-paint-hours); /* Paint/PC/Hours */
	color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
	.l-cta-paint__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.l-cta-paint {
		padding: var(--space-paint-section) var(--space-lg); /* 56 / 20 */
	}

	:is(.p-paint-service, .p-paint-price, .p-paint-flow, .p-column-archive, .p-column-single, .p-area) + .l-cta-paint {
		padding-top: 0;
	}

	.l-cta-paint__panel {
		gap: var(--space-paint-card);
		padding: var(--space-3xl) var(--space-md) var(--space-md); /* 40 / 16 */
		border-radius: var(--radius-paint-panel);
	}

	.l-cta-paint__list {
		gap: var(--space-sm);
	}

	.l-cta-paint__item {
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-lg); /* 24 / 20 */
		border-radius: var(--radius-xl);
	}

	.l-cta-paint__item-title {
		gap: var(--space-sm);
		font: var(--text-paint-h4); /* Paint/SP/H4 18 */
	}

	.l-cta-paint__item-text {
		font: var(--text-paint-body-s); /* Paint/SP/Body-S 15 */
	}

	.l-cta-paint__item-group {
		gap: 0;
	}

	.l-cta-paint__tel {
		display: flex;
		align-items: center;
		min-height: 44px;
		font: var(--text-paint-number-m); /* Paint/SP/Number-M 28 */
	}

	.l-cta-paint__hours {
		font: var(--text-paint-caption);
	}
}