/*
 * お役立ち情報・固定ページ用のスタイル。
 *
 * assets/style.css（LP用）のあとに読み込まれ、:root のカラートークンを共有する。
 * LPと同じトーンを保ちつつ、長文を読ませるための可読性を優先している。
 *
 * 読み込みの出し分けは inc/setup.php の pitatto_needs_blog_assets() が判定する。
 */

:root {
	--text-body: #2c2545;
	--surface: #fff;
	--max-article: 840px;
	--max-column-content: 1200px;
}

/* ── 共通レイアウト ──────────────────────────────── */

/*
 * style.css の nav が position: fixed のため、その高さ分だけ本文を下げる。
 */
.column_page,
.static_page,
.error_page,
.thanks_page,
.shindan_page {
	padding-top: 64px;
}

.column_page {
	--column-gutter: 24px;
}

.column_page .section-inner,
.static_page .section-inner {
	padding: 0 24px 100px;
}

/*
 * section-inner の左右 padding を最大幅の内側に含めると、パンくずより本文が
 * 24pxずつ狭くなる。外枠に gutter 分を足し、実コンテンツ幅を1080pxで揃える。
 */
.column_page .section-inner {
	max-width: calc(
		var(--max-column-content) + var(--column-gutter) + var(--column-gutter)
	);
	padding-right: var(--column-gutter);
	padding-left: var(--column-gutter);
}

/*
 * ヘッダーは template-parts/site-header.php でLPと共通化しており、
 * スタイルも assets/style.css の nav / .nav-logo / .nav-column / .nav-cta を
 * そのまま使う。ここでの上書きは不要。
 */

/* ── パンくず ────────────────────────────────────── */

.breadcrumb {
	padding: 24px 24px 0;
}

.breadcrumb-inner {
	max-width: var(--max-column-content);
	margin: 0 auto;
}

.column_page .breadcrumb {
	padding-right: var(--column-gutter);
	padding-left: var(--column-gutter);
}

.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	font-size: 12px;
	color: var(--gray);
}

.breadcrumb-item:not(:last-child)::after {
	content: "›";
	margin-left: 6px;
	color: rgba(107, 114, 128, 0.6);
}

.breadcrumb-item a {
	color: var(--gray);
	text-decoration: none;
}

.breadcrumb-item a:hover {
	color: var(--purple);
	text-decoration: underline;
}

.breadcrumb-item span {
	color: var(--dark);
	font-weight: 500;
}

/* ── 一覧のヘッダー ──────────────────────────────── */

.column-hero {
	text-align: center;
	padding: 48px 0 40px;
}

.column-hero-title {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 900;
	letter-spacing: 0.02em;
	margin-top: 8px;
}

.column-hero-lead {
	max-width: 640px;
	margin: 20px auto 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--gray);
}

/* ── カテゴリナビ ────────────────────────────────── */

.category-nav {
	margin-bottom: 40px;
	overflow-x: auto;
}

.category-nav-list {
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	min-width: max-content;
	padding: 4px;
	margin: 0 auto;
}

.category-nav-link {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--border);
	/* border-radius: 100px; */
	background: var(--surface);
	color: var(--gray);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: 0.25s;
}

.category-nav-link:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.category-nav-link.is-current {
	background: linear-gradient(135deg, var(--purple), var(--pink));
	border-color: transparent;
	color: #fff;
}

/* ── 記事カード ──────────────────────────────────── */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.post-card {
	background: var(--surface);
	border: 1px solid var(--border);
	/* border-radius: var(--radius); */
	overflow: hidden;
	transition:
		transform 0.25s,
		box-shadow 0.25s;
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(108, 78, 246, 0.12);
}

.post-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.post-card-thumb {
	aspect-ratio: 16 / 9;
	background: var(--gray-light);
}

.post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card-body {
	padding: 20px 20px 24px;
}

.post-card-cat {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	background: var(--purple-light);
	color: var(--purple);
	font-size: 11px;
	font-weight: 700;
}

.post-card-title {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
}

.post-card-link:hover .post-card-title {
	color: var(--purple);
}

.post-card-excerpt {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--gray);
}

.post-card-date {
	display: block;
	margin-top: 14px;
	font-size: 12px;
	color: rgba(107, 114, 128, 0.8);
}

.no-posts {
	text-align: center;
	padding: 60px 0;
	color: var(--gray);
}

.no-posts-back {
	text-align: center;
}

/* ── ページネーション ────────────────────────────── */

.pagination {
	margin-top: 56px;
}

.pagination-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.pagination-list a,
.pagination-list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border);
	/* border-radius: 10px; */
	background: var(--surface);
	color: var(--gray);
	font-size: 14px;
	text-decoration: none;
	transition: 0.25s;
}

.pagination-list a:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.pagination-list .current {
	background: linear-gradient(135deg, var(--purple), var(--pink));
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}

/* ── 検索フォーム ────────────────────────────────── */

.search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 40px;
}

.search-field {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--border);
	/* border-radius: 10px; */
	background: var(--surface);
	font-family: inherit;
	font-size: 14px;
	color: var(--dark);
}

.search-field:focus {
	outline: 2px solid var(--purple);
	outline-offset: 1px;
}

.search-submit {
	padding: 12px 24px;
	border: 0;
	/* border-radius: 10px; */
	background: linear-gradient(135deg, var(--purple), var(--pink));
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.25s;
}

.search-submit:hover {
	opacity: 0.75;
}

/* ── 記事レイアウト ──────────────────────────────── */

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--max-article)) 360px;
	justify-content: center;
	gap: 56px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px 100px;
}

/*
 * 追従カラム。高さを画面内に収め、あふれるぶんは目次側だけを
 * スクロールさせる（.toc--side を参照）。コンテナごとスクロールさせると
 * 先頭のCTAが画面外へ流れていくため、ここでは overflow を持たせない。
 */
.article-side-sticky {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: calc(100vh - 108px);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--gray);
}

.article-cat {
	padding: 5px 14px;
	border-radius: 100px;
	background: var(--purple-light);
	color: var(--purple);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.article-cat:hover {
	opacity: 0.75;
}

.article-title {
	margin-top: 18px;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.article-thumb {
	margin-top: 28px;
	/* border-radius: var(--radius); */
	overflow: hidden;
}

.article-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── 目次 ────────────────────────────────────────── */

.toc {
	margin: 36px 0;
	padding: 22px 24px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius-sm); */
	background: var(--gray-light);
}

/*
 * 見出しが多い記事だと目次だけで画面高さを超える。
 * 追従カラムの余った高さに収め、あふれたぶんはここでスクロールさせる。
 * min-height: 0 が無いとflexアイテムが縮まず、下に置いた要素が押し出される。
 */
.toc--side {
	margin: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
}

/*
 * 本文内の目次は、サイドバー（.article-side）が消える 1024px 以下でだけ出す。
 * PCで出すとサイドの目次と二重になる。
 */
@media (min-width: 1025px) {
	.toc--inline {
		display: none;
	}
}

.toc-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
}

.toc-list {
	list-style: none;
	counter-reset: toc;
}

.toc-item {
	line-height: 1.6;
}

.toc-item--level2 {
	counter-increment: toc;
	margin-top: 10px;
}

.toc-item--level2 > .toc-link::before {
	content: counter(toc) ". ";
	color: var(--purple);
	font-weight: 700;
}

.toc-item--level3 {
	margin-top: 6px;
	padding-left: 18px;
	font-size: 13px;
}

.toc-link {
	color: var(--text-body);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.2s;
}

.toc-item--level3 .toc-link {
	font-size: 13px;
	color: var(--gray);
}

.toc-link:hover {
	color: var(--purple);
	text-decoration: underline;
}

.toc-link.is-current {
	color: var(--pink);
	font-weight: 700;
}

/* ── 記事本文 ────────────────────────────────────── */

.article-body {
	margin-top: 8px;
	font-size: 16px;
	line-height: 2;
	color: var(--text-body);
	text-align: justify;
}

.article-body > * + * {
	margin-top: 1.4em;
}

.article-body h2 {
	margin-top: 3em;
	margin-bottom: 1em;
	padding: 14px 0 14px 18px;
	border-left: 5px solid var(--purple);
	background: linear-gradient(90deg, var(--gray-light), transparent);
	font-size: clamp(20px, 2.6vw, 25px);
	font-weight: 800;
	line-height: 1.5;
	scroll-margin-top: 88px;
}

.article-body h3 {
	margin-top: 2.4em;
	margin-bottom: 0.8em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
	font-size: clamp(17px, 2.2vw, 20px);
	font-weight: 700;
	line-height: 1.6;
	scroll-margin-top: 88px;
}

.article-body h4 {
	margin-top: 2em;
	font-size: 17px;
	font-weight: 700;
}

.article-body a {
	color: var(--purple);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body a:hover {
	color: var(--pink);
}

.article-body strong {
	font-weight: 700;
	background: linear-gradient(transparent 62%, rgba(255, 59, 127, 0.18) 62%);
}

/* 本文の箇条書きは、マーカー分だけ本文の内側へ寄せる。出典一覧は個別指定を優先する。 */
.article-body > ul,
.article-body > ol {
	margin-left: 1.2em;
}

.article-body li + li {
	margin-top: 0.5em;
}

.article-body img {
	max-width: 100%;
	height: auto;
	/* border-radius: var(--radius-sm); */
}

.article-body blockquote {
	padding: 18px 22px;
	border-left: 4px solid var(--border);
	background: var(--gray-light);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--gray);
	font-size: 15px;
}

.article-body figure {
	margin: 2em 0;
}

.article-body figcaption {
	margin-top: 8px;
	font-size: 12px;
	color: var(--gray);
	text-align: center;
}

/* テーブルは幅が足りないときだけ横スクロールさせ、ページ全体は横に伸ばさない。 */
.article-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.article-body th,
.article-body td {
	padding: 12px 16px;
	border: 1px solid var(--border);
	text-align: left;
}

.article-body th {
	background: var(--gray-light);
	font-weight: 700;
}

.article-body hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 3em 0;
}

/* ── 本文内の部品 ────────────────────────────────── */

.article-point {
	padding: 22px 26px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius-sm); */
	background: var(--pink-pale);
}

.article-point-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--pink);
	margin-bottom: 10px;
}

.article-point-list {
	list-style: none;
	font-size: 15px;
}

.article-point-list li {
	position: relative;
	padding-left: 22px;
	line-height: 1.9;
}

.article-point-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--pink);
	font-weight: 700;
}

/*
 * 記事内・診断ページの実績動画。
 *
 * 動画とキャプションを1枚のカードとして囲む。キャプションが素の本文と同じ
 * 見た目のままだと、動画の説明なのか本文の続きなのかが視覚的に切れず、
 * 縦型動画の下に文章がぶら下がっているだけに見えてしまうため。
 */
.article-video {
	margin: 2.4em auto;
	max-width: 350px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: 0 8px 24px rgba(44, 37, 69, 0.08);
}

.article-video .var-thumb {
	background: #1a0a2e;
}

.article-video-caption {
	position: relative;
	padding: 16px 16px 18px;
	border-top: 1px solid var(--border);
	color: var(--gray);
	font-size: 12px;
	line-height: 1.9;
	letter-spacing: 0.01em;
	text-align: left;
}

/* カードの内側に引いたブランド色のヘアライン。境界を1本の線で終わらせず、
   動画側とキャプション側をブランド色でつなぐ。 */
.article-video-caption::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 16px;
	width: 36px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--purple), var(--pink));
}

/*
 * 末尾の「CTR◯％を記録。」だけを数値として立たせる。
 * この一文がキャプションの結論であり、実績としての説得力そのものなので、
 * 地の文と同じ濃度で流してしまわない。
 */
.article-video-metric {
	display: block;
	width: fit-content;
	margin-top: 8px;
	padding: 2px 10px;
	border-radius: 100px;
	background: var(--purple-light);
	color: var(--purple);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/*
 * 本文中の関連記事リンク（[pitatto_related_link]）。
 *
 * 地の文のテキストリンクは読み飛ばされるため、本文の流れを一度止めて
 * カードとして見せる。ラベルをタブとして枠の上辺に食い込ませているのは、
 * 「ここから先は本文ではない」ことを読み始める前に分からせるため。
 */
.article-related-link {
	margin: 2.4em 0;
}

/* 症状ごとに1枚ずつ並べる使い方（記事01）では、間を本文より詰めて一群に見せる。 */
.article-related-link + .article-related-link {
	margin-top: 1.2em;
}

.article-related-link-label {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px 4px 0 0;
	background: var(--dark);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.article-related-link-body {
	display: grid;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 0 4px 4px 4px;
	background: var(--gray-light);
	transition: opacity 0.2s ease;
}

.article-related-link-body:hover {
	opacity: 0.8;
}

/* .article-body a の色と下線を打ち消すため、本文スコープで指定する。 */
.article-body .article-related-link-card,
.article-related-link-card {
	display: grid;
	grid-template-columns: 11vw 1fr;
	gap: 20px;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.article-related-link-thumb {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.article-related-link-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.article-related-link-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.article-related-link-card:hover .article-related-link-title {
	color: var(--purple);
}

.article-related-link-excerpt {
	display: block;
	margin-top: 8px;
	color: var(--gray);
	font-size: 13px;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 表示する行数 */
	overflow: hidden;
}

/*
 * 出典一覧。
 *
 * 信頼性の担保として必要だが、読者が読む本文ではないため、
 * 見出し扱いをやめて文字を落とし、記事の末尾に控えめに置く。
 * 見出しを p にしているのは目次（inc/toc.php は h2/h3 を拾う）に
 * 「参考にした出典」が並ばないようにするため。
 */
.article-refs {
	margin-top: 3.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--border);
	color: var(--gray);
	font-size: 12px;
	line-height: 1.8;
}

.article-refs-title {
	margin-bottom: 0.8em;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.article-body .article-refs ul {
	padding-left: 1.2em;
	list-style: none;
}

.article-body .article-refs li {
	position: relative;
	margin-top: 0.4em;
}

.article-body .article-refs li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: -1em;
	width: 4px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.article-body .article-refs strong {
	font-weight: 700;
	color: inherit;
}

/* ── 記事内CTA ───────────────────────────────────── */

/*
 * 濃い藍色の背景に、左右から回り込む紫〜マゼンタのブロブを敷いたバナー。
 * 本文（白地）から地色が反転するので、記事を読み進める流れの中で
 * ブロック自体が「別の面」として目に入る。
 *
 * 地色は黒に寄せず藍〜紫に振り、上方向に光を差し込ませている。
 * 「伸びない」という後ろ向きの問いを扱うブロックなので、
 * 暗く沈んだ夜ではなく、これから明るくなる夜明けの側の色で組む。
 *
 * 中央行だけをピンク→紫のグラデーションで一段大きく見せ、
 * 「なぜ伸びないか」に視線が最初に止まるようにしている。
 */
.article-cta {
	position: relative;
	margin: 3em 0;
	padding: 40px 32px 34px;
	/* border-radius: var(--radius); */
	overflow: hidden;
	background:
		radial-gradient(
			120% 85% at 50% 8%,
			rgba(150, 90, 255, 0.42) 0%,
			rgba(96, 52, 210, 0.16) 45%,
			transparent 72%
		),
		linear-gradient(165deg, #2a1968 0%, #1d1350 45%, #221355 100%);
	text-align: center;
}

.article-cta--end {
	margin-top: 4em;
}

/*
 * バナー画像版。文言もボタンも画像に焼き込まれているため、
 * 背景・余白を打ち消して画像そのものをリンク面にする。
 */
.article-cta--image {
	padding: 0;
	background: none;
	line-height: 0;
}

.article-cta-image-link {
	display: block;
	transition: opacity 0.2s ease;
}

.article-cta-image-link:hover,
.article-cta-image-link:focus-visible {
	opacity: 0.88;
}

.article-cta--image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── 背景装飾 ── */

.article-cta-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * ブロブはCSS側でぼかす。SVGフィルタはid参照になり、
 * 1ページに複数のCTAが出たときに衝突するため使わない。
 */
.article-cta-blobs {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	filter: blur(34px);
	opacity: 0.72;
}

/*
 * 下端から立ちのぼる光。背景の下半分が沈んで見えるのを防ぎ、
 * 視線が最後に着くボタンのまわりを明るく保つ。
 */
.article-cta-glow {
	position: absolute;
	right: 0;
	bottom: -30%;
	left: 0;
	height: 75%;
	background: radial-gradient(
		75% 100% at 50% 100%,
		rgba(255, 108, 176, 0.3) 0%,
		rgba(140, 82, 255, 0.16) 45%,
		transparent 75%
	);
}

/*
 * 左上と右下のハーフトーン。マスクで角に向かって濃くし、
 * 本文が乗る中央では消えるようにする。
 */
.article-cta-deco::before,
.article-cta-deco::after {
	content: "";
	position: absolute;
	width: 220px;
	height: 230px;
	background-image: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.2) 1.5px,
		transparent 1.6px
	);
	background-size: 13px 13px;
}

.article-cta-deco::before {
	top: 0;
	left: 0;
	-webkit-mask-image: linear-gradient(135deg, #000 5%, transparent 65%);
	mask-image: linear-gradient(135deg, #000 5%, transparent 65%);
}

.article-cta-deco::after {
	right: 0;
	bottom: 0;
	-webkit-mask-image: linear-gradient(315deg, #000 5%, transparent 65%);
	mask-image: linear-gradient(315deg, #000 5%, transparent 65%);
}

.article-cta-inner {
	position: relative;
}

/* ── 見出し周り ── */

.article-cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 22px 8px 17px;
	border-radius: 100px;
	background: linear-gradient(90deg, #6d3fe8 0%, #a33390 55%, #d92c55 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.article-cta-eyebrow-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.article-cta-title {
	margin-top: 18px;
	font-size: clamp(23px, 4.4vw, 34px);
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 1.32;
	color: #fff;
}

/*
 * グラデーション文字。background-clip: text は行の高さぶんの箱に
 * 対して塗られるため、inline-block にして行ごとに色が飛ばないようにする。
 */
.article-cta-accent {
	display: inline-block;
	font-size: 1.42em;
	line-height: 1.2;
	background-image: linear-gradient(
		90deg,
		#ff3268 0%,
		#e8409e 46%,
		#8b5cf6 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.article-cta-text {
	margin-top: 14px;
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.88);
}

/* ── ボタン ── */

.article-cta-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: min(100%, 620px);
	margin: 26px auto 0;
	padding: 20px 26px;
	border-radius: 100px;
	background: linear-gradient(90deg, #7b45f0 0%, #b5309a 52%, #f0295f 100%);
	box-shadow: 0 14px 34px rgba(226, 60, 150, 0.45);
	color: #fff;
	text-decoration: none;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.article-cta-btn:hover,
.article-cta-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 18px 42px rgba(226, 60, 150, 0.6);
}

.article-cta-btn-label {
	font-size: clamp(16px, 2.2vw, 21px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.article-cta-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: #1f1740;
}

.article-cta-btn-icon svg {
	width: 17px;
	height: 17px;
}

.article-cta-note {
	margin-top: 18px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.7);
}

/* ── サイドバーCTA ───────────────────────────────── */

/*
 * 文言・ボタンごと画像に焼き込んだバナー。
 * サイドバーの幅いっぱいに敷き、角丸だけカードに合わせる。
 */
.side-cta {
	/* 追従カラムはflexなので、指定が無いと画像が縦に潰される。 */
	flex-shrink: 0;
	overflow: hidden;
	line-height: 0;
}

.side-cta-link {
	display: block;
	transition: opacity 0.2s ease;
}

.side-cta-link:hover,
.side-cta-link:focus-visible {
	opacity: 0.88;
}

.side-cta img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── 監修者 ──────────────────────────────────────── */

.author-box {
	margin-top: 3em;
	padding: 24px 26px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius-sm); */
	background: var(--gray-light);
}

.author-box-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--gray);
}

.author-box-name {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 700;
}

.author-box-title {
	margin-left: 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--gray);
}

.author-box-desc {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--gray);
}

/* ── 関連記事 ────────────────────────────────────── */

.related {
	margin-top: 4em;
}

.related-title {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 24px;
}

.post-grid--related {
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.post-grid--related .post-card-title {
	font-size: 15px;
}

.post-grid--related .post-card-excerpt {
	display: none;
}

/* ── SP追従CTA ───────────────────────────────────── */

.sp-fixed-cta {
	display: none;
}

/* ── 固定ページ ──────────────────────────────────── */

.static-article {
	max-width: var(--max-article);
	margin: 0 auto;
	padding-top: 40px;
}

/* ── 404 ─────────────────────────────────────────── */

.notfound-recent {
	margin-top: 72px;
	text-align: left;
}

.notfound-recent-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

/* ── 無料クリエイティブ診断ページ ────────────────── */

/*
 * 2カラム。左に説明、右にフォームを追従表示する。
 *
 * 最大幅はパンくず（--max-column-content = 1200px）と実コンテンツ幅を揃えるため、
 * 左右の padding 24px ずつを足した値にしている。
 */
.shindan-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 48px;
	align-items: start;
	max-width: calc(var(--max-column-content) + 48px);
	margin: 0 auto;
	padding: 32px 24px 100px;
}

.shindan-main .shindan-hero {
	padding: 8px 0 0;
}

.shindan-badge {
	display: inline-block;
	padding: 7px 18px;
	border-radius: 100px;
	background: var(--pink-pale);
	color: var(--pink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.shindan-title {
	margin-top: 20px;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 900;
	line-height: 1.5;
}

.shindan-lead {
	margin-top: 24px;
	font-size: 15px;
	line-height: 2;
	color: var(--gray);
}

/* 表示するのは1カラムに折り返したときだけ（下部のメディアクエリで復帰させる）。 */
.shindan-hero-btn {
	display: none;
	margin-top: 32px;
	padding: 18px 48px;
	border-radius: 100px;
	background: linear-gradient(135deg, var(--purple), var(--pink));
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.25s;
}

.shindan-hero-btn:hover {
	transform: scale(1.04);
}

.shindan-section-title {
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 800;
	line-height: 1.6;
}

.shindan-proof-lead {
	margin-top: 12px;
	font-size: 14px;
	color: var(--gray);
}

/* ── 診断ページ：診断結果サンプル ────────────────── */
.shindan-main section {
	padding: 60px 0;
}

.shindan-sample-lead {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--gray);
}

.shindan-sample-figure {
	margin: 22px 0 0;
}

/*
 * 納品スライドのモックアップ（docs/shindan-slides/ のテンプレートを撮ったもの）。
 * 画像自体が影と余白を持っているため、カードで囲わず素のまま置く。
 */
.shindan-sample-image {
	display: block;
	width: 100%;
	height: auto;
}

.shindan-sample-note {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--gray);
}

/* ── 診断ページ：よくある質問 ────────────────────── */

/*
 * .faq-list 以下は assets/style.css（LPと共用）を使う。開閉も
 * assets/script.js が .faq-q を全ページで拾うため、ここでは
 * カラム幅に合わせた上書きだけを持つ。
 */
.shindan-faq .faq-list {
	max-width: none;
	gap: 12px;
	margin-top: 22px;
}

.shindan-faq .faq-q {
	padding: 18px 20px;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}

.shindan-faq .faq-a {
	padding: 0 20px 18px;
}

.shindan-proof-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.shindan-proof-grid .article-video {
	margin: 0 auto;
}

.shindan-main .article-video {
	max-width: unset;
}

/* ── 診断ページ：右カラムのフォーム ──────────────── */

/*
 * フォームは8項目あり、ほぼ確実にビューポートより高くなる。
 * top だけで固定すると送信ボタンが画面外に出たまま追従してしまうため、
 * 記事詳細の .article-side-sticky と同じく高さを制限して内部スクロールさせる。
 */
.shindan-aside {
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.shindan-form-card {
	padding: 26px 24px 28px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius); */
	background: var(--surface);
	box-shadow: 0 10px 30px rgba(44, 37, 69, 0.07);
}

.shindan-form-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.6;
}

.shindan-form-note {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--gray);
}

.shindan-form-card .contact_content {
	margin-top: 20px;
}

/*
 * 以下は assets/style.css のフォーム部品（LPの問い合わせと共用）を
 * サイドバー幅に収まる密度へ落とす上書き。クラス名は共用のまま変えないこと。
 */
.shindan-form-card .form_content {
	gap: 14px;
	max-width: none;
}

.shindan-form-card .form_item label {
	margin: 0 0 6px 2px;
	font-size: 13px;
	font-weight: 700;
}

.shindan-form-card
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.shindan-form-card textarea,
.shindan-form-card select {
	padding: 12px 14px;
	font-size: 14px;
}

.shindan-form-card textarea {
	min-height: 96px;
}

.shindan-form-card select {
	background-position: right 14px center;
}

.shindan-form-card .form_note {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--gray);
}

.shindan-form-card .form_item .wpcf7-list-item {
	margin: 0 0 8px;
}

.shindan-form-card .send {
	margin-top: 22px;
	text-align: left;
}

.shindan-form-card .policy {
	font-size: 13px;
	line-height: 1.7;
}

.shindan-form-card .send_btn {
	width: 100%;
	margin: 16px 0 0;
}

.shindan-form-card .send_btn input[type="submit"] {
	width: 100%;
	padding: 16px 20px;
	font-size: 16px;
}

/* ── 送信完了ページ ──────────────────────────────── */

/*
 * .thanks / .thanks h1 / .back_btn は assets/style.css 側にある（LPと共用）。
 * ここにあるのは、フォームごとに出し分ける「この後の流れ」まわりの追加分。
 * .thanks .section-inner が flex 中央寄せなので、各ブロックは幅だけ制限する。
 */
.thanks-head,
.thanks-steps,
.thanks-reserve {
	width: 100%;
	max-width: 840px;
}

.thanks-lead {
	margin-top: 20px;
	font-size: 15px;
	line-height: 2;
	color: var(--gray);
}

.thanks-steps-title {
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 800;
}

.thanks-step-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
	text-align: left;
}

.thanks-step {
	padding: 22px 22px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.thanks-step-num {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.2;
	background: linear-gradient(135deg, var(--purple), var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.thanks-step-title {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.thanks-step-text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--gray);
}

.thanks-note {
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--gray);
}

.thanks-reserve-lead {
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--gray);
}

.thanks-back-link {
	color: var(--purple);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.thanks-back-link::after {
	content: "→";
	margin-left: 6px;
}

.thanks-back-link:hover {
	opacity: 0.7;
}

/* ── 一覧ページのセクション見出し ────────────────── */

.section-heading {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.section-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

.section-heading-en {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	background: linear-gradient(135deg, var(--purple), var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	order: -1;
}

/*
 * 見出しと「すべての記事」切り替えを同じ行に並べる。
 * .section-heading の ::after（区切り線）が余白を埋めるため、
 * リンクは自然と右端に寄る。
 */
.list-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
}

.list-head .section-heading {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

.list-switch {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--purple);
	text-decoration: none;
	white-space: nowrap;
	transition: 0.25s;
}

.list-switch::after {
	content: "→";
	margin-left: 6px;
}

/* 戻る導線は進む方向と区別できるよう矢印を左に置く。 */
.list-switch--back::after {
	content: none;
}

.list-switch--back::before {
	content: "←";
	margin-right: 6px;
}

.list-switch:hover {
	opacity: 0.7;
}

/* ── 注目記事スライダー ──────────────────────────── */

.featured {
	padding: 0;
	margin-bottom: 64px;
}

/*
 * お役立ち情報一覧はページヘッダーを置いていないため、
 * パンくずのすぐ下に本体が来る。その分の余白をここで確保する。
 */
.column_page .section-inner > .featured:first-child,
.column_page .section-inner > .column-layout:first-child {
	padding-top: 40px;
}

.featured-slider {
	position: relative;
}

/*
 * ライブラリを使わない横スクロールのスライダー。
 * scroll-snap で1枚ずつ止まり、JSが無効でもスクロールで全件読める。
 */
.featured-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.featured-track::-webkit-scrollbar {
	display: none;
}

.featured-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.featured-slide-link {
	display: grid;
	grid-template-columns: 48% minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius); */
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition:
		border-color 0.25s,
		box-shadow 0.25s;
}

.featured-slide-link:hover {
	border-color: var(--purple);
	box-shadow: 0 12px 28px rgba(108, 78, 246, 0.12);
}

.featured-slide-thumb {
	aspect-ratio: 16 / 9;
	/* border-radius: 10px; */
	overflow: hidden;
	background: var(--gray-light);
}

.featured-slide-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.featured-slide-body {
	padding-right: 8px;
}

.featured-slide-title {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.5;
}

.featured-slide-link:hover .featured-slide-title {
	color: var(--purple);
}

.featured-slide-body .post-card-cat {
	margin-top: 12px;
}

.featured-slide-excerpt {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--gray);
}

.featured-slide-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.featured-slide-more {
	font-size: 12px;
	font-weight: 700;
	color: var(--purple);
}

.featured-slide-more::after {
	content: "→";
	margin-left: 4px;
}

/* ── スライダーの操作 ────────────────────────────── */

.featured-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 14px rgba(44, 37, 69, 0.1);
	cursor: pointer;
	transition: 0.2s;
}

.featured-nav[hidden] {
	display: none;
}

.featured-nav:hover {
	border-color: var(--purple);
}

.featured-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.featured-nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--purple);
	border-right: 2px solid var(--purple);
}

.featured-nav--prev {
	left: -18px;
}

.featured-nav--prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.featured-nav--next {
	right: -18px;
}

.featured-nav--next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.featured-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.featured-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--border);
	cursor: pointer;
	transition: 0.2s;
}

.featured-dot:hover {
	background: rgba(108, 78, 246, 0.4);
}

.featured-dot.is-current {
	width: 22px;
	border-radius: 100px;
	background: linear-gradient(135deg, var(--purple), var(--pink));
}

/* ── 一覧の2カラム ───────────────────────────────── */

.column-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

.column-side-sticky {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.side-block {
	padding: 22px 20px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius); */
	background: var(--surface);
}

.side-block-title {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.side-block .search-form {
	max-width: none;
	margin: 0;
	flex-direction: column;
	gap: 10px;
}

.side-cat-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.side-cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	/* border-radius: 10px; */
	color: var(--gray);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: 0.2s;
}

.side-cat-link:hover {
	background: var(--purple-light);
	color: var(--purple);
}

.side-cat-link.is-current {
	background: var(--purple-light);
	color: var(--purple);
	font-weight: 700;
}

.side-cat-count {
	flex-shrink: 0;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 100px;
	background: var(--gray-light);
	font-size: 11px;
	text-align: center;
}

/* ── 記事リスト（一覧本体） ──────────────────────── */

.post-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
}

.post-list-item {
	border-bottom: 1px solid var(--border);
}

.post-list-link {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 8px;
	color: inherit;
	text-decoration: none;
	/* border-radius: var(--radius); */
	transition: background 0.2s;
}

.post-list-link:hover {
	background: rgba(108, 78, 246, 0.04);
}

.post-list-thumb {
	aspect-ratio: 16 / 9;
	/* border-radius: 10px; */
	overflow: hidden;
	background: var(--gray-light);
}

.post-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.post-date {
	font-size: 12px;
	color: rgba(107, 114, 128, 0.9);
}

.post-list-title {
	margin-top: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
}

.post-list-link:hover .post-list-title {
	color: var(--purple);
}

.post-list-excerpt {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--gray);
}

/* ── カテゴリから探す ────────────────────────────── */

.cat-cards {
	padding: 0;
	margin-top: 72px;
}

.cat-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cat-card {
	display: block;
	padding: 24px 24px 26px;
	border: 1px solid var(--border);
	/* border-radius: var(--radius); */
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: 0.25s;
}

.cat-card:hover {
	border-color: var(--purple);
	box-shadow: 0 10px 24px rgba(108, 78, 246, 0.1);
}

.cat-card-name {
	font-size: 17px;
	font-weight: 800;
}

.cat-card-count {
	margin-left: 10px;
	font-size: 12px;
	color: var(--gray);
}

.cat-card-desc {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--gray);
}

/* 一覧の末尾CTAは記事末と同じブロックを使うが、上の余白だけ広げる。 */
.column-layout + .cat-cards + .article-cta--end,
.cat-cards + .article-cta--end {
	margin-top: 72px;
}

/* ── レスポンシブ ────────────────────────────────── */

@media (max-width: 1024px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--max-article);
		gap: 0;
	}

	.article-side {
		display: none;
	}

	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * 一覧のサイドバーは記事詳細と違い非表示にしない。
	 * 検索とカテゴリは回遊の導線として残す価値があるため、本文の下へ回す。
	 */
	.column-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.column-side-sticky {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* 矢印を外に出す余白が無いため、カードの内側に重ねる。 */
	.featured-nav--prev {
		left: 6px;
	}

	.featured-nav--next {
		right: 6px;
	}

	.featured-slide-title {
		font-size: 19px;
	}

	/*
	 * 診断ページは1カラムへ。フォームは追従をやめて本文の下に置き、
	 * 代わりにヒーローのボタンを出して最短でフォームへ飛べるようにする。
	 */
	.shindan-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
		max-width: 720px;
	}

	.shindan-aside {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.shindan-hero-btn {
		display: inline-block;
	}
}

@media (max-width: 767px) {
	.column_page {
		--column-gutter: 18px;
	}

	.toc {
		padding: 16px;
	}

	.article-point {
		padding: 16px;
	}

	/* サムネイルを横に置くと本文が2〜3語で折り返すため、SPでは縦積みにする。 */
	.article-related-link-body {
		padding: 12px;
	}

	.article-related-link-card {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 12px;
	}

	.article-related-link-title {
		font-size: 15px;
	}

	.shindan-main section {
		padding: 40px 0px;
	}

	.column_page .section-inner,
	.static_page .section-inner {
		padding: 0 18px 80px;
	}

	.related {
		margin-top: 0;
		padding: 0;
	}

	.article-layout,
	.shindan-layout {
		padding: 24px 18px;
	}

	/* 縦型動画は3列に割ると潰れるため1列に戻す。 */
	.shindan-proof-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.thanks-step-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.shindan-form-card {
		padding: 22px 18px 24px;
	}

	.post-grid,
	.post-grid--related {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.category-nav-list {
		justify-content: flex-start;
	}

	.cat-card-grid,
	.column-side-sticky {
		grid-template-columns: 1fr;
	}

	/* スライドは画像を上、テキストを下に。横並びだと文字幅が足りない。 */
	.featured-slide-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 12px;
	}

	.featured-slide-title {
		font-size: 17px;
	}

	.featured-slide-body {
		padding: 0 4px 4px;
	}

	/* 指で送れるため矢印は出さない。 */
	.featured-nav {
		display: none;
	}

	/* サムネを上に、テキストを下に。横並びだと文字幅が足りない。 */
	.post-list-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding: 18px 0;
	}

	.post-list-title {
		font-size: 16px;
	}

	.section-heading {
		font-size: 18px;
	}

	/* 見出しとリンクを1行に収めると窮屈なので、狭い画面では縦に積む。 */
	.list-head {
		display: block;
	}

	.list-head .section-heading {
		margin-bottom: 10px;
	}

	.list-switch {
		font-size: 12px;
	}

	.cat-cards {
		margin-top: 56px;
	}

	.article-body {
		font-size: 15px;
		line-height: 1.95;
	}

	/*
	 * 画面が狭いと横長のままでは1行が持たないので、3:2に近い縦長へ寄せる。
	 * 装飾も本文にかからないよう小さくする。
	 */
	.article-cta {
		padding: 30px 18px 26px;
	}

	.article-cta--image {
		padding: 0;
	}

	/* 幅が縮むぶんブロブが中央まで来てしまうので、ぼかしを弱めて端に留める。 */
	.article-cta-blobs {
		filter: blur(22px);
	}

	.article-cta-deco::before,
	.article-cta-deco::after {
		width: 130px;
		height: 140px;
	}

	.article-cta-eyebrow {
		font-size: 13px;
		padding: 6px 16px 6px 13px;
	}

	.article-cta-eyebrow-icon {
		width: 17px;
		height: 17px;
	}

	.article-cta-title {
		line-height: 1.38;
	}

	.article-cta-text {
		font-size: 13px;
		line-height: 1.8;
	}

	.article-cta-btn {
		gap: 10px;
		padding: 17px 18px;
	}

	/*
	 * 375px級の端末でもボタン文言を1行に収める。
	 * 折り返すとボタンの重心がずれて押しにくくなる。
	 */
	.article-cta-btn-label {
		font-size: clamp(14px, 3.6vw, 18px);
	}

	.article-cta-btn-icon {
		width: 28px;
		height: 28px;
	}

	.article-cta-btn-icon svg {
		width: 14px;
		height: 14px;
	}

	.article-cta-note {
		font-size: 11px;
	}

	/*
	 * 追従CTA。本文を読み始めてから出す（表示制御は assets/blog.js）。
	 * hidden 属性が付いている間は出さない。
	 */
	.sp-fixed-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--border);
		transform: translateY(110%);
		transition: transform 0.3s ease;
	}

	.sp-fixed-cta.is-visible {
		transform: translateY(0);
	}

	.sp-fixed-cta[hidden] {
		display: none;
	}

	.sp-fixed-cta-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 12px;
		border-radius: 100px;
		background: linear-gradient(135deg, var(--purple), var(--pink));
		color: #fff;
		text-decoration: none;
	}

	.sp-fixed-cta-label {
		font-size: 10px;
		opacity: 0.85;
	}

	.sp-fixed-cta-text {
		font-size: 14px;
		font-weight: 700;
	}

	/* 追従CTAが本文の末尾に重ならないようにする。 */
	.column_page {
		padding-bottom: 72px;
	}
}