/*
 * くらしリンク自動化 生成記事LP用 共通部品CSS（1.4.23）
 *
 * 【スコープ】
 * すべてのルールは .kla-generated-article 配下にスコープしています。
 * 生成記事以外（トップページ・運営者情報・プライバシーポリシー・
 * 記事一覧）には一切影響しません。
 *
 * 【詳細度をあえて上げている理由】
 * 本番テーマの「追加CSS」は wp_head の後半で出力されるため、同じ詳細度で
 * 衝突すると常にあちらが勝ちます。1.4.21以前は見出し・CTAボタン・料金表・
 * 結論ボックス・FAQが追加CSS側に握られており、このファイルを直しても画面が
 * 変わりませんでした。そこでクラスを2回書いて（.kla-generated-article
 * .kla-generated-article）詳細度を1段上げ、読み込み順に関係なくこちらが
 * 基準デザインになるようにしています。
 *
 * 【1.4.23で追加した「書き方の揺れ」への耐性】
 * 生成AIは同じ部品を2通りの書き方で出します。FAQだけはプロンプトで
 * <details class="faq-item"> と厳密に指定されているため毎回同じですが、
 * 注意点・メリット・キャンペーン・チェックリストは中の書き方が指定されて
 * いません。実際に
 *   <div class="campaign-box"><ul><li>…</li></ul></div>
 *   <ul class="campaign-box"><li>…</li></ul>      ← リスト自身にクラス
 * の両方が出ます。1.4.22は前者しか想定しておらず、後者では箇条書きの点と
 * チェックが二重に出ていました。以下はどちらの書き方でも同じ表示になります。
 *
 * 【設計の土台】
 * 角丸・影・余白・文字サイズ・色を下の変数に集約し、部品ごとの独自値を
 * 持たせません。アイコンはSVGを埋め込んでいるため、アイコンフォントも
 * 外部画像も不要です。
 *
 * 部品は商品・案件専用ではなく、通信・保険・サブスク・暮らしのサービスで
 * 横断利用できる汎用部品だけです。
 */

/* ==========================================================================
   0. デザイントークン
   ========================================================================== */

.kla-generated-article {
	/* 色 */
	--kla-brand: #0b7cba;
	--kla-brand-deep: #075c8c;
	--kla-brand-tint: #eaf4fb;
	--kla-brand-tint-2: #f5fafd;

	--kla-ink: #1b2a36;
	--kla-ink-2: #4d6373;
	--kla-ink-3: #6f8290;

	--kla-line: #dfe7ed;
	--kla-line-soft: #edf2f6;
	--kla-surface: #ffffff;
	--kla-surface-2: #f7fafc;

	--kla-warn: #b4622c;
	--kla-warn-tint: #fdf6f0;
	--kla-warn-line: #f0d9c6;

	--kla-ok: #2c7f5b;
	--kla-ok-tint: #f1f8f4;
	--kla-ok-line: #cfe6da;

	/* 角丸：3段階だけ */
	--kla-r-s: 10px;
	--kla-r-m: 14px;
	--kla-r-pill: 999px;

	/* 影：面の2段階＋用途が違う2種類 */
	--kla-sh-1: 0 1px 2px rgba(21, 44, 62, 0.05);
	--kla-sh-2: 0 8px 24px rgba(21, 44, 62, 0.08);
	--kla-sh-ring: 0 0 0 4px #eaf4fb;
	--kla-sh-col: 1px 0 0 #dfe7ed;

	/* 余白の階段 */
	--kla-sp-1: 4px;
	--kla-sp-2: 8px;
	--kla-sp-3: 12px;
	--kla-sp-4: 16px;
	--kla-sp-5: 24px;
	--kla-sp-6: 32px;
	--kla-sp-7: 48px;

	/* 文字サイズの階段 */
	--kla-fs-xs: 13px;
	--kla-fs-s: 15px;
	--kla-fs-base: 16px;
	--kla-fs-m: 17px;
	--kla-fs-l: 19px;
	--kla-fs-xl: 22px;
	--kla-fs-2xl: 26px;

	color: var(--kla-ink);
	counter-reset: kla-section;
}

/* ==========================================================================
   1. 見出し（生成記事の中だけ。他ページの見出しは変更しない）
   ========================================================================== */

.kla-generated-article.kla-generated-article > h2 {
	counter-increment: kla-section;
	position: relative;
	margin: var(--kla-sp-7) 0 var(--kla-sp-5);
	padding: 2px 0 var(--kla-sp-3) 62px;
	border: none;
	border-bottom: 2px solid var(--kla-brand-tint);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--kla-ink);
	font-size: var(--kla-fs-2xl);
	font-weight: 700;
	line-height: 1.45;
}

/* 通し番号。見出しが増減しても自動で振り直される。 */
.kla-generated-article.kla-generated-article > h2::before {
	content: counter(kla-section, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 46px;
	padding: 3px 0;
	border: none;
	border-radius: var(--kla-r-s);
	background: var(--kla-brand);
	color: #fff;
	font-size: var(--kla-fs-s);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-align: center;
}

.kla-generated-article.kla-generated-article > h2::after {
	content: none;
}

.kla-generated-article.kla-generated-article > h3 {
	position: relative;
	margin: var(--kla-sp-6) 0 var(--kla-sp-4);
	padding: 0 0 0 var(--kla-sp-4);
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--kla-ink);
	font-size: var(--kla-fs-xl);
	font-weight: 700;
	line-height: 1.5;
}

.kla-generated-article.kla-generated-article > h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 8px;
	height: 8px;
	border: none;
	border-radius: 2px;
	background: var(--kla-brand);
}

.kla-generated-article.kla-generated-article > h3::after {
	content: none;
}

/* 箱の中の見出しは、箱のデザインが主役なので装飾を外す。 */
.kla-generated-article.kla-generated-article .top-article-cta h2,
.kla-generated-article.kla-generated-article .top-article-cta h3,
.kla-generated-article.kla-generated-article .mid-article-cta h2,
.kla-generated-article.kla-generated-article .mid-article-cta h3,
.kla-generated-article.kla-generated-article .final-article-cta h2,
.kla-generated-article.kla-generated-article .final-article-cta h3,
.kla-generated-article.kla-generated-article .article-lead-box h2,
.kla-generated-article.kla-generated-article .article-lead-box h3,
.kla-generated-article.kla-generated-article .article-summary-box h3 {
	margin: 0 0 var(--kla-sp-3);
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	font-size: var(--kla-fs-xl);
	line-height: 1.5;
}

.kla-generated-article.kla-generated-article .top-article-cta h2::before,
.kla-generated-article.kla-generated-article .top-article-cta h2::after,
.kla-generated-article.kla-generated-article .top-article-cta h3::before,
.kla-generated-article.kla-generated-article .top-article-cta h3::after,
.kla-generated-article.kla-generated-article .mid-article-cta h2::before,
.kla-generated-article.kla-generated-article .mid-article-cta h2::after,
.kla-generated-article.kla-generated-article .mid-article-cta h3::before,
.kla-generated-article.kla-generated-article .mid-article-cta h3::after,
.kla-generated-article.kla-generated-article .final-article-cta h2::before,
.kla-generated-article.kla-generated-article .final-article-cta h2::after,
.kla-generated-article.kla-generated-article .final-article-cta h3::before,
.kla-generated-article.kla-generated-article .final-article-cta h3::after,
.kla-generated-article.kla-generated-article .article-lead-box h3::before,
.kla-generated-article.kla-generated-article .article-lead-box h3::after {
	content: none;
}

/* h4-h6正規化後の小見出し（目次に拾わせない） */
.kla-generated-article.kla-generated-article .kla-subtitle {
	margin: var(--kla-sp-5) 0 var(--kla-sp-2);
	color: var(--kla-ink);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   2. 本文・強調
   ========================================================================== */

.kla-generated-article.kla-generated-article p {
	/* 本番の追加CSSにある .single-post p { position: relative;
	   display: inline-block } は、WordPressが単一記事ページの body へ
	   single-post クラスを付けるため、記事本文のすべての段落に効いている
	   （本来は記事一覧カード用）。段落が inline-block だと margin:auto に
	   よる中央寄せが効かず、position:relative だと注意アイコンなどの
	   絶対配置の基準が段落自身へずれるため、初期値へ戻す。 */
	display: block;
	position: static;
	font-size: var(--kla-fs-base);
	line-height: 1.9;
}

/* 用途: 淡い黄色のマーカー風強調 */
.kla-generated-article.kla-generated-article .kla-marker {
	background: linear-gradient(transparent 58%, #ffeaa8 58%);
	border-radius: 2px;
	font-weight: 700;
	padding: 0 2px;
}

/* 用途: 重要語句の濃紺太字（リンクと誤解されない色・下線なし） */
.kla-generated-article.kla-generated-article .kla-emphasis {
	color: var(--kla-brand-deep);
	font-weight: 700;
	text-decoration: none;
}

/* 用途: 注意点の控えめなオレンジ太字（赤字は使わない） */
.kla-generated-article.kla-generated-article .kla-caution-text {
	color: var(--kla-warn);
	font-weight: 700;
}

/* 出典番号。本文の読みを邪魔しない大きさに抑える。 */
.kla-generated-article.kla-generated-article .kla-citation-ref {
	margin-left: 0.15em;
	font-size: 0.68em;
	vertical-align: super;
}

.kla-generated-article.kla-generated-article .kla-citation-link,
.kla-generated-article.kla-generated-article .kla-source-link {
	color: var(--kla-brand-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

.kla-generated-article.kla-generated-article .kla-citation-link:hover,
.kla-generated-article.kla-generated-article .kla-source-link:hover {
	color: var(--kla-brand);
}

/* ==========================================================================
   3. PR表記・冒頭の結論ボックス
   ========================================================================== */

.kla-generated-article.kla-generated-article .pr-notice {
	display: flex;
	align-items: baseline;
	gap: var(--kla-sp-2);
	margin: 0 0 var(--kla-sp-5);
	padding: var(--kla-sp-2) var(--kla-sp-3);
	border: 1px solid var(--kla-line-soft);
	border-radius: var(--kla-r-s);
	background: var(--kla-surface-2);
	color: var(--kla-ink-3);
	font-size: var(--kla-fs-xs);
}

.kla-generated-article.kla-generated-article .pr-notice p {
	margin: 0;
	font-size: var(--kla-fs-xs);
	line-height: 1.6;
}

.kla-generated-article.kla-generated-article .pr-notice p:first-child {
	flex: none;
	padding: 2px 8px;
	border-radius: var(--kla-r-pill);
	background: var(--kla-ink-3);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.kla-generated-article.kla-generated-article .pr-notice p + p {
	margin-left: 0;
}

.kla-generated-article.kla-generated-article .article-lead-box {
	position: relative;
	margin: 0 0 var(--kla-sp-7);
	padding: var(--kla-sp-5) var(--kla-sp-6);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	background: var(--kla-surface);
	box-shadow: var(--kla-sh-2);
	box-sizing: border-box;
	max-width: none;
}

/* テーマ追加CSS側が擬似要素で「まず確認」を出しているため、生成記事では
   バッジ要素と重複しないよう打ち消す。 */
.kla-generated-article.kla-generated-article .article-lead-box::before {
	content: none;
}

.kla-generated-article.kla-generated-article .article-lead-box p.article-lead-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--kla-sp-4);
	padding: 5px 14px;
	border: none;
	border-radius: var(--kla-r-pill);
	background: var(--kla-brand);
	color: #fff;
	font-size: var(--kla-fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.kla-generated-article.kla-generated-article .article-lead-box p.article-lead-badge::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kla-generated-article.kla-generated-article .article-lead-box p.lead-box-title {
	margin: 0 0 var(--kla-sp-3);
	color: var(--kla-ink);
	font-size: var(--kla-fs-xl);
	font-weight: 700;
	line-height: 1.5;
}

.kla-generated-article.kla-generated-article .article-lead-box p {
	margin: 0 0 var(--kla-sp-3);
	font-size: var(--kla-fs-m);
	line-height: 1.9;
}

.kla-generated-article.kla-generated-article .article-lead-box p:last-child {
	margin-bottom: 0;
}

.kla-generated-article.kla-generated-article .article-lead-points {
	display: grid;
	gap: var(--kla-sp-2);
	margin: var(--kla-sp-4) 0 0;
	padding: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .article-lead-points li {
	position: relative;
	margin: 0;
	padding: var(--kla-sp-3) var(--kla-sp-4) var(--kla-sp-3) 42px;
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-s);
	background: var(--kla-surface);
	font-size: var(--kla-fs-base);
	line-height: 1.7;
	list-style: none;
}

.kla-generated-article.kla-generated-article .article-lead-points li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 1.15em;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7cba' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   4. CTA（上部・中間・最終）
   ========================================================================== */

.kla-generated-article.kla-generated-article .top-article-cta,
.kla-generated-article.kla-generated-article .mid-article-cta,
.kla-generated-article.kla-generated-article .final-article-cta {
	box-sizing: border-box;
	clear: both;
	display: block;
	width: 100%;
	margin: var(--kla-sp-6) 0 var(--kla-sp-7);
	padding: var(--kla-sp-5) var(--kla-sp-5) var(--kla-sp-4);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	background: var(--kla-brand-tint-2);
	box-shadow: none;
	text-align: center;
}

/* 最終CTAだけは記事の着地点なので、面で強く見せる。 */
.kla-generated-article.kla-generated-article .final-article-cta {
	border-color: transparent;
	background: var(--kla-brand-tint);
	box-shadow: var(--kla-sh-2);
}

.kla-generated-article.kla-generated-article .top-article-cta > p.top-cta-title,
.kla-generated-article.kla-generated-article .mid-article-cta > p.mid-cta-title,
.kla-generated-article.kla-generated-article .final-article-cta > p.final-cta-title {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--kla-sp-2);
	color: var(--kla-ink);
	font-size: var(--kla-fs-l);
	font-weight: 700;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.kla-generated-article.kla-generated-article .final-article-cta > p.final-cta-title {
	font-size: var(--kla-fs-xl);
}

.kla-generated-article.kla-generated-article .article-cta-heading,
.kla-generated-article.kla-generated-article .article-cta-description,
.kla-generated-article.kla-generated-article .article-cta-note {
	box-sizing: border-box;
	display: block;
	width: 100%;
}

/* CTAの誘導文はボタンとそろえて中央に置く。 */
.kla-generated-article.kla-generated-article .top-article-cta > p:not(.top-cta-title):not(.cta-note):not(.cta-microcopy),
.kla-generated-article.kla-generated-article .mid-article-cta > p:not(.mid-cta-title):not(.cta-note):not(.cta-microcopy),
.kla-generated-article.kla-generated-article .final-article-cta > p:not(.final-cta-title):not(.cta-note):not(.cta-microcopy) {
	max-width: 46em;
	margin: 0 auto var(--kla-sp-4);
	color: var(--kla-ink-2);
	font-size: var(--kla-fs-s);
	line-height: 1.8;
	text-align: center;
}

.kla-generated-article.kla-generated-article .top-article-cta .wp-block-buttons,
.kla-generated-article.kla-generated-article .mid-article-cta .wp-block-buttons,
.kla-generated-article.kla-generated-article .final-article-cta .wp-block-buttons {
	display: flex !important;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	margin: 0 0 var(--kla-sp-3);
	width: 100%;
}

.kla-generated-article.kla-generated-article .article-cta-button,
.kla-generated-article.kla-generated-article .mid-article-cta .article-cta-button,
.kla-generated-article.kla-generated-article .final-article-cta .article-cta-button {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
}

.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: 100%;
	min-width: min(420px, 100%);
	padding: 15px 30px;
	border: none !important;
	border-radius: var(--kla-r-s);
	background: var(--kla-brand) !important;
	background-image: none !important;
	box-shadow: 0 2px 0 var(--kla-brand-deep);
	color: #fff !important;
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.18s ease;
}

.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link:hover,
.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link:focus {
	background: var(--kla-brand-deep) !important;
	transform: translateY(1px);
}

.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* ボタン下の小さな注意書き。誇張しないぶん、ここで条件を必ず見せる。 */
.kla-generated-article.kla-generated-article .cta-note,
.kla-generated-article.kla-generated-article .article-cta-note,
.kla-generated-article.kla-generated-article .cta-microcopy,
.kla-generated-article.kla-generated-article .final-article-cta > p:last-child.cta-note,
.kla-generated-article.kla-generated-article .final-article-cta > p:last-child.article-cta-note {
	display: block;
	max-width: 46em;
	margin: 0 auto;
	color: var(--kla-ink-3);
	font-size: var(--kla-fs-xs);
	line-height: 1.75;
	text-align: center;
}

/* ==========================================================================
   5. 表
   ========================================================================== */

.kla-generated-article.kla-generated-article .pricing-comparison-table {
	margin: var(--kla-sp-5) 0 var(--kla-sp-3);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	box-shadow: none;
	overflow-x: auto;
}

.kla-generated-article.kla-generated-article .pricing-comparison-table table,
.kla-generated-article.kla-generated-article table.pricing-comparison-table {
	width: 100%;
	margin: 0;
	border: none;
	border-collapse: collapse;
	background: var(--kla-surface);
	font-size: var(--kla-fs-s);
}

.kla-generated-article.kla-generated-article .pricing-comparison-table thead th,
.kla-generated-article.kla-generated-article table.pricing-comparison-table thead th {
	padding: var(--kla-sp-3) var(--kla-sp-4);
	border: none;
	border-bottom: 1px solid var(--kla-line);
	background: var(--kla-brand-tint) !important;
	background-image: none !important;
	color: var(--kla-ink);
	font-size: var(--kla-fs-s);
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	white-space: nowrap;
}

.kla-generated-article.kla-generated-article .pricing-comparison-table tbody td,
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody td {
	padding: var(--kla-sp-3) var(--kla-sp-4);
	border: none;
	border-bottom: 1px solid var(--kla-line-soft);
	background: transparent;
	color: var(--kla-ink);
	font-size: var(--kla-fs-s);
	line-height: 1.75;
	vertical-align: top;
}

/* しま模様と行のハイライト。どの行を見ているかを見失わせない。 */
.kla-generated-article.kla-generated-article .pricing-comparison-table tbody tr:nth-child(even) td,
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody tr:nth-child(even) td {
	background: var(--kla-brand-tint-2);
}

.kla-generated-article.kla-generated-article .pricing-comparison-table tbody tr:hover td,
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody tr:hover td {
	background: var(--kla-brand-tint);
	transition: background-color 0.15s ease;
}

.kla-generated-article.kla-generated-article .pricing-comparison-table tbody tr:last-child td,
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

/* 左端の項目名列。横スクロールしても残るので、行の意味を見失わない。 */
.kla-generated-article.kla-generated-article .pricing-comparison-table tbody td:first-child,
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	width: auto;
	background: var(--kla-surface-2);
	box-shadow: var(--kla-sh-col);
	color: var(--kla-ink);
	font-weight: 700;
	white-space: nowrap;
}

.kla-generated-article.kla-generated-article .pricing-comparison-table thead th:first-child,
.kla-generated-article.kla-generated-article table.pricing-comparison-table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: var(--kla-sh-col);
}

/* 表の中では強調装飾を使わない（1.2.1からの方針を維持）。 */
.kla-generated-article.kla-generated-article .pricing-comparison-table .kla-marker,
.kla-generated-article.kla-generated-article .pricing-comparison-table .kla-emphasis,
.kla-generated-article.kla-generated-article .pricing-comparison-table .kla-caution-text,
.kla-generated-article.kla-generated-article table.pricing-comparison-table .kla-marker,
.kla-generated-article.kla-generated-article table.pricing-comparison-table .kla-emphasis,
.kla-generated-article.kla-generated-article table.pricing-comparison-table .kla-caution-text {
	background: transparent !important;
	color: var(--kla-ink) !important;
	font-weight: 700;
	padding: 0;
	text-decoration: none;
}

/* 1行目だけを強調するテーマ追加CSSの打ち消し。どの行が重要かは案件ごとに
   違うので、行の位置による強調は行わない。 */
.kla-generated-article.kla-generated-article .pricing-comparison-table tbody tr:first-child td:not(:first-child),
.kla-generated-article.kla-generated-article table.pricing-comparison-table tbody tr:first-child td:not(:first-child) {
	color: var(--kla-ink);
	font-size: var(--kla-fs-s);
	font-weight: 400;
}

.kla-generated-article.kla-generated-article .pricing-note-box {
	margin: 0 0 var(--kla-sp-7);
	padding: var(--kla-sp-3) var(--kla-sp-4);
	border: none;
	border-left: 3px solid var(--kla-line);
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
}

.kla-generated-article.kla-generated-article .pricing-note-box p {
	margin: 0;
	color: var(--kla-ink-3);
	font-size: var(--kla-fs-xs);
	line-height: 1.8;
}

/* ==========================================================================
   6. カード（特徴・サービス概要）
   ========================================================================== */

.kla-generated-article.kla-generated-article .point-card-grid,
.kla-generated-article.kla-generated-article .service-summary-grid {
	display: grid;
	gap: var(--kla-sp-4);
	margin: var(--kla-sp-5) 0 var(--kla-sp-7);
	padding-left: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .point-card-grid--1 {
	grid-template-columns: 1fr;
}

.kla-generated-article.kla-generated-article .point-card-grid--2,
.kla-generated-article.kla-generated-article .point-card-grid--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kla-generated-article.kla-generated-article .point-card-grid--3,
.kla-generated-article.kla-generated-article .point-card-grid--many {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kla-generated-article.kla-generated-article .service-summary-grid:not(.point-card-grid) {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.kla-generated-article.kla-generated-article .point-card,
.kla-generated-article.kla-generated-article .service-summary-grid > .wp-block-column {
	position: relative;
	margin: 0;
	padding: var(--kla-sp-5) var(--kla-sp-4) var(--kla-sp-4);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	background: var(--kla-surface);
	box-shadow: var(--kla-sh-1);
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
}

.kla-generated-article.kla-generated-article .point-card::before,
.kla-generated-article.kla-generated-article .service-summary-grid > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--kla-brand);
}

.kla-generated-article.kla-generated-article .point-card p.point-card-title,
.kla-generated-article.kla-generated-article .service-summary-grid > .wp-block-column > p:first-child {
	margin: 0 0 var(--kla-sp-2);
	color: var(--kla-brand-deep);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.kla-generated-article.kla-generated-article .point-card p,
.kla-generated-article.kla-generated-article .service-summary-grid > .wp-block-column > p:not(:first-child) {
	margin: 0;
	font-size: var(--kla-fs-s);
	line-height: 1.8;
}

/* ==========================================================================
   7. メリット・注意点・手順

   生成AIは <div class="benefit-list"><div>…</div></div> とも
   <ul class="benefit-list"><li>…</li></ul> とも書くため、どちらの
   子要素も同じ箱として扱う。
   ========================================================================== */

.kla-generated-article.kla-generated-article .benefit-list,
.kla-generated-article.kla-generated-article .caution-list {
	display: grid;
	gap: var(--kla-sp-3);
	margin: var(--kla-sp-5) 0 var(--kla-sp-7);
	padding-left: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .benefit-list > div,
.kla-generated-article.kla-generated-article .benefit-list > li {
	position: relative;
	margin: 0;
	padding: var(--kla-sp-4) var(--kla-sp-4) var(--kla-sp-4) 48px;
	border: 1px solid var(--kla-ok-line);
	border-radius: var(--kla-r-s);
	background: var(--kla-ok-tint);
	box-sizing: border-box;
	list-style: none;
}

.kla-generated-article.kla-generated-article .benefit-list > div::before,
.kla-generated-article.kla-generated-article .benefit-list > li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 15px;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7f5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kla-generated-article.kla-generated-article .benefit-list p.benefit-title,
.kla-generated-article.kla-generated-article .benefit-list > li > strong:first-child,
.kla-generated-article.kla-generated-article .benefit-list > div > strong:first-child {
	display: block;
	margin: 0 0 var(--kla-sp-1);
	color: var(--kla-ok);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.kla-generated-article.kla-generated-article .caution-list > div,
.kla-generated-article.kla-generated-article .caution-list > li {
	position: relative;
	margin: 0;
	padding: var(--kla-sp-4) var(--kla-sp-4) var(--kla-sp-4) 48px;
	border: 1px solid var(--kla-warn-line);
	border-radius: var(--kla-r-s);
	background: var(--kla-warn-tint);
	box-sizing: border-box;
	list-style: none;
}

.kla-generated-article.kla-generated-article .caution-list > div::before,
.kla-generated-article.kla-generated-article .caution-list > li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 15px;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4622c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kla-generated-article.kla-generated-article .caution-list p.caution-title,
.kla-generated-article.kla-generated-article .caution-list > li > strong:first-child,
.kla-generated-article.kla-generated-article .caution-list > div > strong:first-child {
	display: block;
	margin: 0 0 var(--kla-sp-1);
	color: var(--kla-warn);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* 1.4.22までは丸囲みの「!」を見出し側に描いていたが、箱側のアイコンと
   二重になるため出さない。 */
.kla-generated-article.kla-generated-article .caution-list p.caution-title::before {
	content: none;
}

.kla-generated-article.kla-generated-article .benefit-list p,
.kla-generated-article.kla-generated-article .caution-list p {
	margin: 0;
	font-size: var(--kla-fs-s);
	line-height: 1.85;
}

.kla-generated-article.kla-generated-article .step-list {
	counter-reset: kla-step;
	display: grid;
	gap: 0;
	margin: var(--kla-sp-5) 0 var(--kla-sp-7);
	padding-left: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .step-item,
.kla-generated-article.kla-generated-article .step-list > li,
.kla-generated-article.kla-generated-article .step-list > div {
	position: relative;
	margin: 0;
	padding: 0 0 var(--kla-sp-5) 60px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
	list-style: none;
}

.kla-generated-article.kla-generated-article .step-item:last-child,
.kla-generated-article.kla-generated-article .step-list > li:last-child,
.kla-generated-article.kla-generated-article .step-list > div:last-child {
	padding-bottom: 0;
}

.kla-generated-article.kla-generated-article .step-item::before,
.kla-generated-article.kla-generated-article .step-list > li::before,
.kla-generated-article.kla-generated-article .step-list > div::before {
	counter-increment: kla-step;
	content: counter(kla-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--kla-brand);
	box-shadow: var(--kla-sh-ring);
	color: #fff;
	font-size: var(--kla-fs-s);
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}

/* 手順をつなぐ縦線。最後の手順には引かない。 */
.kla-generated-article.kla-generated-article .step-item::after,
.kla-generated-article.kla-generated-article .step-list > li::after,
.kla-generated-article.kla-generated-article .step-list > div::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 44px;
	bottom: 4px;
	width: 2px;
	background: var(--kla-brand-tint);
}

.kla-generated-article.kla-generated-article .step-item:last-child::after,
.kla-generated-article.kla-generated-article .step-list > li:last-child::after,
.kla-generated-article.kla-generated-article .step-list > div:last-child::after {
	content: none;
}

.kla-generated-article.kla-generated-article .step-item p {
	margin: 0;
	font-size: var(--kla-fs-s);
	line-height: 1.85;
}

.kla-generated-article.kla-generated-article .step-list p.step-title,
.kla-generated-article.kla-generated-article .step-list > li > strong:first-child,
.kla-generated-article.kla-generated-article .step-list > div > strong:first-child {
	display: block;
	margin: 0 0 var(--kla-sp-1) !important;
	padding-top: 5px;
	color: var(--kla-ink);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   8. 補助ボックス（チェックリスト・警告・キャンペーン・まとめ）

   クラスが <div> ではなく <ul> 自身に付く場合があるため、箱そのものと
   中のリストの両方から点を消す。
   ========================================================================== */

.kla-generated-article.kla-generated-article .checklist-box,
.kla-generated-article.kla-generated-article .warning-box,
.kla-generated-article.kla-generated-article .campaign-box,
.kla-generated-article.kla-generated-article .article-summary-box {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: var(--kla-sp-5) 0;
	padding: var(--kla-sp-4) var(--kla-sp-5);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	background: var(--kla-surface-2);
	list-style: none;
}

.kla-generated-article.kla-generated-article .checklist-box {
	border-color: var(--kla-line);
	background: var(--kla-brand-tint-2);
}

.kla-generated-article.kla-generated-article .warning-box {
	border-color: var(--kla-warn-line);
	background: var(--kla-warn-tint);
}

.kla-generated-article.kla-generated-article .campaign-box {
	border-color: var(--kla-ok-line);
	background: var(--kla-ok-tint);
}

.kla-generated-article.kla-generated-article .article-summary-box {
	position: relative;
	margin: var(--kla-sp-6) 0;
	padding-top: var(--kla-sp-5);
	border-color: var(--kla-ok-line);
	border-left: 4px solid var(--kla-ok);
	background: var(--kla-ok-tint);
}

.kla-generated-article.kla-generated-article .article-summary-box::before {
	content: "まとめ";
	position: absolute;
	left: var(--kla-sp-5);
	top: -11px;
	padding: 2px 12px;
	border-radius: var(--kla-r-pill);
	background: var(--kla-ok);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.7;
}

.kla-generated-article.kla-generated-article .checklist-box > p,
.kla-generated-article.kla-generated-article .warning-box > p,
.kla-generated-article.kla-generated-article .campaign-box > p,
.kla-generated-article.kla-generated-article .article-summary-box > p {
	margin: 0 0 var(--kla-sp-3);
	font-size: var(--kla-fs-s);
	line-height: 1.85;
}

.kla-generated-article.kla-generated-article .checklist-box > p:last-child,
.kla-generated-article.kla-generated-article .warning-box > p:last-child,
.kla-generated-article.kla-generated-article .campaign-box > p:last-child,
.kla-generated-article.kla-generated-article .article-summary-box > p:last-child,
.kla-generated-article.kla-generated-article .checklist-box > ul:last-child,
.kla-generated-article.kla-generated-article .campaign-box > ul:last-child,
.kla-generated-article.kla-generated-article .article-summary-box > ul:last-child {
	margin-bottom: 0;
}

.kla-generated-article.kla-generated-article .checklist-box ul,
.kla-generated-article.kla-generated-article .warning-box ul,
.kla-generated-article.kla-generated-article .campaign-box ul,
.kla-generated-article.kla-generated-article .article-summary-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .checklist-box li,
.kla-generated-article.kla-generated-article .warning-box li,
.kla-generated-article.kla-generated-article .campaign-box li,
.kla-generated-article.kla-generated-article .article-summary-box li {
	position: relative;
	margin: 0 0 var(--kla-sp-2);
	padding-left: 28px;
	font-size: var(--kla-fs-s);
	line-height: 1.8;
	list-style: none;
}

.kla-generated-article.kla-generated-article .checklist-box li:last-child,
.kla-generated-article.kla-generated-article .warning-box li:last-child,
.kla-generated-article.kla-generated-article .campaign-box li:last-child,
.kla-generated-article.kla-generated-article .article-summary-box li:last-child {
	margin-bottom: 0;
}

.kla-generated-article.kla-generated-article .checklist-box li::before,
.kla-generated-article.kla-generated-article .campaign-box li::before,
.kla-generated-article.kla-generated-article .article-summary-box li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7f5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kla-generated-article.kla-generated-article .checklist-box li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7cba' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.kla-generated-article.kla-generated-article .warning-box li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kla-warn);
}

.kla-generated-article.kla-generated-article .article-summary-box p.article-summary-title,
.kla-generated-article.kla-generated-article .warning-box p.caution-title,
.kla-generated-article.kla-generated-article .campaign-box p.caution-title,
.kla-generated-article.kla-generated-article .checklist-box p.caution-title {
	margin: 0 0 var(--kla-sp-2) !important;
	color: var(--kla-ink);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.55;
}

.kla-generated-article.kla-generated-article .warning-box p.caution-title {
	color: var(--kla-warn);
}

.kla-generated-article.kla-generated-article .article-summary-box p.article-summary-title {
	color: var(--kla-ok);
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

.kla-generated-article.kla-generated-article .faq-list {
	display: grid;
	gap: var(--kla-sp-2);
	margin: var(--kla-sp-5) 0 var(--kla-sp-7);
	padding-left: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .faq-list details {
	margin: 0;
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-s);
	background: var(--kla-surface);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kla-generated-article.kla-generated-article .faq-list details[open] {
	border-color: var(--kla-brand);
	box-shadow: var(--kla-sh-1);
}

.kla-generated-article.kla-generated-article .faq-list summary {
	position: relative;
	display: block;
	padding: var(--kla-sp-4) 52px var(--kla-sp-4) 46px;
	border: none;
	background: transparent;
	color: var(--kla-ink);
	cursor: pointer;
	font-size: var(--kla-fs-m);
	font-weight: 700;
	line-height: 1.6;
	list-style: none;
}

.kla-generated-article.kla-generated-article .faq-list summary::-webkit-details-marker {
	display: none;
}

.kla-generated-article.kla-generated-article .faq-list summary::before {
	content: "Q";
	position: absolute;
	left: var(--kla-sp-4);
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kla-brand);
	color: #fff;
	font-size: var(--kla-fs-xs);
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* 開閉マーク */
.kla-generated-article.kla-generated-article .faq-list summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--kla-brand);
	border-bottom: 2px solid var(--kla-brand);
	background: transparent;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.kla-generated-article.kla-generated-article .faq-list details[open] summary::after {
	margin-top: -2px;
	transform: rotate(225deg);
}

.kla-generated-article.kla-generated-article .faq-list details[open] summary {
	border-bottom: 1px solid var(--kla-line-soft);
	background: var(--kla-brand-tint-2);
}

.kla-generated-article.kla-generated-article .faq-list .faq-answer {
	position: relative;
	padding: var(--kla-sp-4) var(--kla-sp-5) var(--kla-sp-4) 46px;
}

.kla-generated-article.kla-generated-article .faq-list .faq-answer::before {
	content: "A";
	position: absolute;
	left: var(--kla-sp-4);
	top: var(--kla-sp-4);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kla-ink-3);
	color: #fff;
	font-size: var(--kla-fs-xs);
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.kla-generated-article.kla-generated-article .faq-list .faq-answer p,
.kla-generated-article.kla-generated-article .faq-list details > p {
	margin: 0;
	padding: 0;
	font-size: var(--kla-fs-s);
	line-height: 1.85;
}

/* ==========================================================================
   10. 目次（テーマが出力する目次を、記事の中で拾えた場合だけ整える）
   ========================================================================== */

.kla-generated-article.kla-generated-article .toc {
	margin: var(--kla-sp-6) 0;
	padding: var(--kla-sp-5);
	border: 1px solid var(--kla-line);
	border-radius: var(--kla-r-m);
	background: var(--kla-surface-2);
}

.kla-generated-article.kla-generated-article .toc .toc-title {
	margin: 0 0 var(--kla-sp-3);
	color: var(--kla-ink);
	font-size: var(--kla-fs-m);
	font-weight: 700;
	text-align: left;
}

.kla-generated-article.kla-generated-article .toc ol {
	counter-reset: kla-toc;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kla-generated-article.kla-generated-article .toc ol > li {
	counter-increment: kla-toc;
	position: relative;
	margin: 0;
	padding: var(--kla-sp-2) 0 var(--kla-sp-2) 38px;
	border-bottom: 1px dashed var(--kla-line);
	font-size: var(--kla-fs-s);
	line-height: 1.7;
	list-style: none;
}

.kla-generated-article.kla-generated-article .toc ol > li:last-child {
	border-bottom: none;
}

.kla-generated-article.kla-generated-article .toc ol > li::before {
	content: counter(kla-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--kla-sp-2);
	width: 26px;
	color: var(--kla-brand);
	font-size: var(--kla-fs-xs);
	font-weight: 700;
	text-align: center;
}

/* ==========================================================================
   11. 出典
   ========================================================================== */

.kla-generated-article.kla-generated-article .kla-source-list {
	margin: var(--kla-sp-7) 0 0;
	padding: var(--kla-sp-4) var(--kla-sp-5);
	border: 1px solid var(--kla-line);
	border-left: 4px solid var(--kla-line);
	border-radius: var(--kla-r-s);
	background: var(--kla-surface-2);
}

.kla-generated-article.kla-generated-article .kla-source-list p.kla-source-list-title {
	margin: 0 0 var(--kla-sp-2) !important;
	color: var(--kla-ink-2);
	font-size: var(--kla-fs-s);
	font-weight: 700;
}

.kla-generated-article.kla-generated-article .kla-source-list ol {
	margin: 0 0 0 1.3em;
	padding: 0;
}

.kla-generated-article.kla-generated-article .kla-source-list li {
	font-size: var(--kla-fs-xs);
	line-height: 1.8;
}

.kla-generated-article.kla-generated-article .kla-source-list li + li {
	margin-top: var(--kla-sp-1);
}

.kla-generated-article.kla-generated-article .source-note-box {
	display: block;
	margin: var(--kla-sp-3) 0 0;
	color: var(--kla-ink-3);
	font-size: var(--kla-fs-xs);
	line-height: 1.8;
}

/* ==========================================================================
   12. スマートフォン
   ========================================================================== */

@media screen and (max-width: 768px) {
	.kla-generated-article {
		--kla-fs-2xl: 22px;
		--kla-fs-xl: 19px;
		--kla-fs-l: 17px;
		--kla-sp-6: 24px;
		--kla-sp-7: 36px;
	}

	.kla-generated-article.kla-generated-article > h2 {
		padding-left: 48px;
	}

	.kla-generated-article.kla-generated-article > h2::before {
		width: 38px;
		font-size: var(--kla-fs-xs);
	}

	.kla-generated-article.kla-generated-article .article-lead-box {
		padding: var(--kla-sp-4);
	}

	.kla-generated-article.kla-generated-article .top-article-cta,
	.kla-generated-article.kla-generated-article .mid-article-cta,
	.kla-generated-article.kla-generated-article .final-article-cta {
		padding: var(--kla-sp-4) var(--kla-sp-3) var(--kla-sp-3);
	}

	.kla-generated-article.kla-generated-article .article-cta-button .wp-block-button__link {
		width: 100%;
		min-width: 0;
		padding: 14px 16px;
		font-size: var(--kla-fs-base);
	}

	/* カードは縦積みにして、1枚あたりの情報量を確保する。 */
	.kla-generated-article.kla-generated-article .point-card-grid--2,
	.kla-generated-article.kla-generated-article .point-card-grid--3,
	.kla-generated-article.kla-generated-article .point-card-grid--4,
	.kla-generated-article.kla-generated-article .point-card-grid--many,
	.kla-generated-article.kla-generated-article .service-summary-grid:not(.point-card-grid) {
		grid-template-columns: 1fr;
	}

	/* 表は横スクロールで読ませる。1列目は残るので行の意味を見失わない。 */
	.kla-generated-article.kla-generated-article .pricing-comparison-table::before {
		content: "← 横にスクロールできます →";
		display: block;
		padding: var(--kla-sp-2) var(--kla-sp-3) 0;
		color: var(--kla-ink-3);
		font-size: var(--kla-fs-xs);
		text-align: center;
	}

	.kla-generated-article.kla-generated-article .pricing-comparison-table table {
		min-width: 560px;
	}

	.kla-generated-article.kla-generated-article .pricing-comparison-table tbody td:first-child,
	.kla-generated-article.kla-generated-article .pricing-comparison-table thead th:first-child {
		background: var(--kla-surface);
	}

	.kla-generated-article.kla-generated-article .faq-list summary {
		padding: var(--kla-sp-3) 44px var(--kla-sp-3) 42px;
		font-size: var(--kla-fs-base);
	}

	.kla-generated-article.kla-generated-article .faq-list .faq-answer {
		padding: var(--kla-sp-3) var(--kla-sp-4) var(--kla-sp-4) 42px;
	}
}