@charset "utf-8";
/* =========================================================
   issue.css — 課題ページ（/issue/◯◯/）
   構成は docs/content/issue/*-v2.md：
   S1キャッチ＋リード → S2あるある → S3定義と考え方 → S4原因3つ → S4.5確認 → S5進め方 → S6進め方の2択 → S8関連コラム → S9 FAQ → S10 CTA
   ========================================================= */

/* ---- S1 キャッチ＋リード ----------------------------------------------- */
.p-issHead {
	padding-block-start: var(--sp-xs);

	& .p-issHead-cat { margin-block-start: var(--sp-s); color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; line-height: var(--lh-ui); }
	& .p-issHead-title { margin-block-start: 0.8rem; font-size: var(--fs-ml); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.01em; }

	/* キャッチはページで一番大きい要素にする */
	& .p-issHead-catch {
		margin-block-start: var(--sp-s);
		max-width: var(--w-text);
		font-size: var(--fs-2xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.025em;
	}

	& .p-issHead-lead {
		margin-block-start: var(--sp-s);
		/* 次のセクション（背景グレー）と詰まって見えるので、下にも余白を取る */
		margin-block-end: var(--sp-m);
		max-width: var(--w-text);
		font-size: var(--fs-lead);
		font-weight: var(--fw-med);
		line-height: var(--lh-body);
		letter-spacing: -0.01em;
	}
}

/* ---- S2 あるある ---------------------------------------------------------
   共通パーツ c-featureList _num（components.css）に置き換えた */

/* ---- S3 考え方 ---------------------------------------------------------- */
.p-issThink {
	margin-block-start: var(--sp-m);
	max-width: var(--w-text);

	/* SEO 向けの長文なので本文と手順は --lh-read（§9）。引用風の一文（p-issThink-pull）は tight のまま */
	& :is(.c-txt, li) { line-height: var(--lh-read); }
	& p + p { margin-block-start: 1em; }
}

/* SEO増強版（/issue/brand/）の中見出しと手順 */
.p-issThink-title {
	margin-block-start: var(--sp-m);
	margin-block-end: 0.6em;
	font-size: var(--fs-l);
	font-weight: var(--fw-head);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
}

.p-issSteps {
	display: grid;
	gap: 0.6em;
	margin-block-start: 1em;
	padding-inline-start: 1.4em;
	list-style: decimal;
	line-height: var(--lh-body);
}

.p-issThink-pull {
	margin-block-start: var(--sp-m);
	padding-inline-start: var(--sp-s);
	border-inline-start: 0.4rem solid var(--cl-line-strong);
	font-size: var(--fs-l);
	font-weight: var(--fw-head);
	line-height: var(--lh-tight);
}

/* ---- S4 進め方の2択 ------------------------------------------------------ */
.p-issWay {
	display: grid;
	gap: var(--sp-s);
	margin-block-start: var(--sp-m);
}

/* 出口が1つのページ（/issue/first/）は全幅 */
.p-issWay-box:only-child { grid-column: 1 / -1; }

.p-issWay-box {
	display: grid;
	gap: var(--sp-xs);
	align-content: start;
	padding: var(--card-pad);
	background-color: var(--cl-bg);
	border-radius: var(--radius);

	& .p-issWay-label { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
	& .p-issWay-title { font-size: var(--fs-ml); font-weight: var(--fw-head); line-height: var(--lh-tight); letter-spacing: -0.015em; }
	& .p-issWay-txt { color: var(--cl-text-sub); line-height: var(--lh-body); }
	& .p-issWay-price { font-weight: var(--fw-bold); }
	& .p-issWay-links { display: grid; gap: 0.5em; margin-block-start: var(--sp-xs); }
}

/* カード全体がリンクのとき（リンクが1つのカード）。浮かせる指定は components.css のホバーの一覧 */
@media (any-hover: hover) {
	a.p-issWay-box:hover { opacity: 1; }
	a.p-issWay-box:hover .c-linkArrow { color: var(--cl-accent); }
	a.p-issWay-box:hover .c-linkArrow::after { translate: 0.4rem 0; }
}

@media print, screen and (min-width: 640px) {
	.p-issWay { grid-template-columns: 1fr 1fr; }
}

/* ---- S8 関連コラム（下の FAQ との間）------------------------------------ */
.p-issColumns { margin-block-end: var(--sp-l); }

/* 他の課題への横リンクは c-localNav（components.css）に共通化した */

/* ---- S6 CTA は共通パーツ（c-ctaList / c-ctaBox）を使う ----------------------- */