/**
 * /shop-renewal/ の «目的から探す»（ヒーロー直下の3カード）。
 *
 * ■ ヒーローとは別ファイルにする
 *   ヒーローは «帯»、ここは «カードの面» で、直す理由も直す頻度も違う。
 *   読み込む条件は同じ（[ssr_hero] のある固定ページ）なので、増えるのはリクエスト1本だけ。
 *
 * ■ 色は1色に絞る
 *   カードごとに色を変えると «3つの別のもの» に見えて、同じ一覧への3つの入口だと伝わらない。
 *   アクセントはブランドのオレンジ1色に統一し、違いは «図の形» で出す
 *   （成績＝目盛り / 取引対象＝銘柄の板 / 戦略＝枝分かれ）。
 *   値は v1・ヒーローの流儀どおり直書き（トークンは参照しない）。
 *
 * ■ 閉じているのが既定。押すと開く
 *   閉じているあいだは «探し方の名前» だけを見せる（3枚を開いたまま置くと、その下の
 *   一覧が折り返しの外へ出る。実測でセクションだけで 543px あった）。
 *   開閉は <details> がやるので JS が落ちても開ける。
 *   押す場所で役割を分ける ― 見出し部＝開く / 中身のチップと CTA＝絞り込みへ進む。
 *
 * ■ 数字は «条件» だけを出す
 *   PF 2.0+ はこのカードが送る条件そのもの。件数や成績の実測値は出さない
 *   （出すなら押した先と一致していなければならず、絞り込み中の画面では一致させられない）。
 */

.ssr-purpose {
	/* ヒーローの下端色から白へ戻す。線を引かずにヒーロー → カード → 一覧とつなぐ。 */
	background: linear-gradient(180deg, #fdf3e9 0%, #fffdfb 62%, #ffffff 100%);
}

.ssr-purpose *,
.ssr-purpose *::before,
.ssr-purpose *::after {
	box-sizing: border-box;
}

/* 器はヒーローと同じ 1400px / 左右 20px。v1 の .ea-listing-container に合わせる。
   見出しを置かないので、上の余白はヒーローとの間隔そのものになる。 */
.ssr-purpose__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 20px 28px;
}

/* 開いたカードだけが伸びるように start で置く。
   stretch のままだと1枚開いた瞬間に «閉じている2枚» まで同じ高さに引き伸ばされ、
   何も入っていない余白が2枚ぶん増える。 */
.ssr-purpose__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

/* ===== カード ===== */

.ssr-purpose__card {
	--ssr-accent: #f97316;
	--ssr-accent-dark: #ea6a0c;
	--ssr-accent-soft: #fff3e8;
	/* アイコンの円。単色の丸は «塗り忘れ» のように平らに見えるので、近い2色で面をつくる。 */
	--ssr-icon-a: #fb923c;
	--ssr-icon-b: #f97316;
	position: relative;
	display: block;
	min-width: 0;
	margin: 0;
	border: 1px solid #ece6e0;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.05);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

/* 3枚は «同じ一覧への3つの入口» だが、探し方そのものは別物。
   一目で見分けられるよう、アイコンの円とアクセントだけカードごとに色を変える
   （枠線・背景・文字は3枚とも同じにして、賑やかにしない）。 */
.ssr-purpose__card--pair {
	--ssr-accent: #15a04a;
	--ssr-accent-dark: #11833c;
	--ssr-accent-soft: #e9fbf1;
	--ssr-icon-a: #34c46e;
	--ssr-icon-b: #15a04a;
}

.ssr-purpose__card--strategy {
	--ssr-accent: #2563eb;
	--ssr-accent-dark: #1d4fd7;
	--ssr-accent-soft: #eef4ff;
	--ssr-icon-a: #60a5fa;
	--ssr-icon-b: #2563eb;
}

.ssr-purpose__card:hover {
	border-color: var(--ssr-accent);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 14px 30px rgba(15, 23, 42, 0.10);
	transform: translateY(-3px);
}

/* いまこの条件で見ているカードは面を薄く塗る（塗るのは状態を示すときだけ）。 */
.ssr-purpose__card.is-on {
	border-color: var(--ssr-accent);
	background: linear-gradient(180deg, #ffffff 0%, var(--ssr-accent-soft) 100%);
}

/* 動きを減らす設定の人には浮かせない（情報は色と影だけで伝わる）。 */
@media (prefers-reduced-motion: reduce) {
	.ssr-purpose__card,
	.ssr-purpose__arrow,
	.ssr-purpose__opt {
		transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
	}

	.ssr-purpose__card:hover {
		transform: none;
	}
}

/* ===== 見出し部（押すと開く） ===== */

.ssr-purpose__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	cursor: pointer;
	/* 既定の三角マーカーを消す。開閉の向きは右のシェブロンが持つ。 */
	list-style: none;
}

/* アイコンの円。色で塗って白い線を置く（薄い面に色の線だと、隣の文字に負けて目印にならない）。 */
.ssr-purpose__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	/* 円。カードの角丸と同じ形にすると «四角の中の四角» になって輪郭が読みにくい。 */
	border-radius: 50%;
	background: linear-gradient(140deg, var(--ssr-icon-a) 0%, var(--ssr-icon-b) 100%);
	color: #ffffff;
	transition: transform 0.16s ease;
}

.ssr-purpose__icon svg {
	width: 27px;
	height: 27px;
}

.ssr-purpose__card:hover .ssr-purpose__icon {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.ssr-purpose__card:hover .ssr-purpose__icon {
		transform: none;
	}
}

.ssr-purpose__summary:focus-visible {
	outline: 2px solid var(--ssr-accent);
	outline-offset: -2px;
	border-radius: 16px;
}

/* テーマ（Astra）が summary::after にシェブロンを描く（実測: content:"" / width:10px）。
   こちらのシェブロンと並んで2つになるので、テーマ側の分を消す。::marker だけでは消えない。 */
.ssr-purpose .ssr-purpose__summary::after,
.ssr-purpose .ssr-purpose__summary::before {
	content: none;
	display: none;
}

/* summary は display:list-item が既定で、そのままだと «自前のシェブロン» と
   «ブラウザの三角» が2つ並ぶ。marker 側も明示的に空にする。 */
.ssr-purpose__summary::-webkit-details-marker {
	display: none;
}

.ssr-purpose__summary::marker {
	content: '';
	font-size: 0;
}

.ssr-purpose__sum {
	flex: 1 1 auto;
	min-width: 0;
}

/* 開閉のしるし。開いたら上を向く（«ここが開いている» を形でも示す）。
   面や枠は付けない ― 押す場所は summary 全体で、ここは «向き» を示すだけ。 */
.ssr-purpose__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #b3a89d;
	transition: transform 0.18s ease, color 0.16s ease;
}

.ssr-purpose__toggle svg {
	width: 20px;
	height: 20px;
}

.ssr-purpose__card:hover .ssr-purpose__toggle {
	color: var(--ssr-accent-dark);
}

.ssr-purpose__card[open] .ssr-purpose__toggle {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.ssr-purpose__toggle {
		transition: background-color 0.16s ease, color 0.16s ease;
	}
}

/* ===== 中身（開くと出る） ===== */

.ssr-purpose__body {
	padding: 0 22px 18px;
}

/* Astra の «.entry-content a { text-decoration: underline }»（0,2,1）に勝たせる。
   要素を1つ挟んで 0,3,0 にする（!important は使わない ― 次に足すリンクで同じ罠を踏む）。 */
.entry-content .ssr-purpose .ssr-purpose__cta,
.entry-content .ssr-purpose .ssr-purpose__cta:hover,
.entry-content .ssr-purpose .ssr-purpose__opt,
.entry-content .ssr-purpose .ssr-purpose__opt:hover,
.entry-content .ssr-purpose .ssr-purpose__opt:focus,
.entry-content .ssr-purpose .ssr-purpose__empty a {
	text-decoration: none;
}

/* ===== カードの文字 ===== */

.ssr-purpose .ssr-purpose__head {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.35;
	color: #16202e;
	letter-spacing: 0.005em;
	overflow-wrap: break-word;
}

/* 説明は3枚とも «2行ぶん» の高さを確保する。
   閉じているカードは自分の高さで並ぶので、1行と2行が混ざると3枚の下端が段違いになる。 */
.ssr-purpose .ssr-purpose__lead {
	display: block;
	margin: 5px 0 0;
	/* 2行ぶん（line-height 1.6 × 2）。1行ぶんにすると «2行になったカードだけ高い»
	   という段差が出る（説明の長さは3枚で違い、幅によって折り返す枚数が変わる）。 */
	min-height: 3.2em;
	font-size: 13px;
	line-height: 1.6;
	color: #6b7280;
	overflow-wrap: break-word;
}

/* ===== カード固有の図 =====
 * 開いたときだけ出る。カードの高さは中身なりに決まるので、ここで余白を作らない。 */
.ssr-purpose__visual {
	min-width: 0;
}

/* ----- 01 安定性重視: PF の目盛り ----- */

.ssr-purpose__pf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
}

.ssr-purpose__pf-num {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	color: #16202e;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ssr-purpose__pf-plus {
	margin-left: 2px;
	color: var(--ssr-accent);
}

/* «右肩上がり» を示すだけの装飾。目盛りも数値も持たせない（成績の図にしない）。 */
.ssr-purpose__pf-spark {
	flex: 0 1 auto;
	width: 78px;
	max-width: 45%;
	height: 30px;
	color: #f9b071;
}

.ssr-purpose__pf-spark svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* 目盛り。塗ってあるのは «2.0 から上» ＝ このカードが送る範囲。 */
.ssr-purpose__meter {
	position: relative;
	height: 10px;
	margin-top: 20px;
	border-radius: 999px;
	background: #f4eee8;
	overflow: hidden;
}

.ssr-purpose__meter-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	background: var(--ssr-accent);
}

.ssr-purpose .ssr-purpose__scale {
	display: flex;
	justify-content: space-between;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	font-weight: 600;
	color: #a49a90;
	font-variant-numeric: tabular-nums;
}

.ssr-purpose .ssr-purpose__scale li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-purpose .ssr-purpose__scale li.is-mark {
	color: var(--ssr-accent-dark);
	font-weight: 800;
}

/* 押した先で並び順まで変わることの注記。目盛りの «読み方» ではないので少し離す。 */
.ssr-purpose .ssr-purpose__pf-note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px dashed #f2e7dc;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8a8178;
}

/* ----- 02 取引対象: 銘柄の板 ----- */

.ssr-purpose .ssr-purpose__board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----- 03 戦略: 枝分かれ ----- */

.ssr-purpose__tree {
	position: relative;
	padding-left: 18px;
}

/* 幹。左端は枝の付け根（丸）の中心に合わせる（ずれると «線と丸が別物» に見える）。
   下端は最後の軸の丸の手前で止める（軸の数が変わっても線が余って垂れない）。 */
.ssr-purpose__tree::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 10px;
	bottom: 34px;
	width: 2px;
	border-radius: 2px;
	background: #e3b785;
}

.ssr-purpose__branch {
	position: relative;
}

.ssr-purpose__branch + .ssr-purpose__branch {
	margin-top: 12px;
}

/* 幹から軸へ伸びる枝。 */
.ssr-purpose__branch::before {
	content: '';
	position: absolute;
	left: -11px;
	top: 9px;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: #e3b785;
}

/* 枝の付け根。丸を置くと «分かれている» ことが線だけより速く読める。 */
.ssr-purpose__branch::after {
	content: '';
	position: absolute;
	left: -18px;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #f9b071;
}

.ssr-purpose .ssr-purpose__axis {
	margin: 0 0 7px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #8a8178;
	letter-spacing: 0.04em;
}

.ssr-purpose .ssr-purpose__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-purpose .ssr-purpose__opt-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ===== 選択肢のチップ =====
 * カード面のリンクより前面に置く（そうしないとチップを押しても面のリンクが取る）。
 * 押すと v1 のクエリが付いた URL へ遷移する＝ URL だけで状態が再現できる。 */
.ssr-purpose__opt {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid #ece6e0;
	border-radius: 999px;
	background: #ffffff;
	color: #3d3833;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.ssr-purpose__opt:hover,
.ssr-purpose__opt:focus-visible {
	border-color: var(--ssr-accent);
	background: var(--ssr-accent-soft);
	color: var(--ssr-accent-dark);
}

.ssr-purpose__opt:focus-visible {
	outline: 2px solid var(--ssr-accent);
	outline-offset: 2px;
}

.ssr-purpose__opt.is-on {
	border-color: var(--ssr-accent);
	background: var(--ssr-accent-soft);
	color: #26221e;
}

/* 板の銘柄は «欄» に見せる。角を落として格子に整列させ、戦略の pill と質感を分ける。 */
.ssr-purpose__board .ssr-purpose__opt-item {
	min-width: 0;
}

.ssr-purpose__board .ssr-purpose__opt {
	width: 100%;
	min-height: 42px;
	padding: 0 8px;
	border-radius: 10px;
	background: #fdfbf9;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

/* GOLD だけ色を変える（説明の «通貨ペアやGOLDなど» と画面を一致させる）。 */
.ssr-purpose__opt--gold {
	border-color: #f0dfbe;
	background: #fffaf0;
	color: #96601a;
}

.ssr-purpose__opt--gold:hover,
.ssr-purpose__opt--gold:focus-visible {
	border-color: #d8a13a;
	background: #fff5e0;
	color: #7d4f12;
}

/* ===== CTA ===== */

/* CTA は «進む» リンク。開閉する見出し部と役割が違うので、線で区切って別の面にする。 */
.ssr-purpose .ssr-purpose__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid #f4efe9;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ssr-accent-dark);
	text-decoration: none;
}

.ssr-purpose .ssr-purpose__cta:hover .ssr-purpose__arrow,
.ssr-purpose .ssr-purpose__cta:focus-visible .ssr-purpose__arrow {
	transform: translateX(3px);
	background: var(--ssr-accent);
	color: #ffffff;
}

.ssr-purpose .ssr-purpose__cta:focus-visible {
	outline: 2px solid var(--ssr-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.ssr-purpose__cta-label {
	min-width: 0;
	overflow-wrap: break-word;
}

.ssr-purpose__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ssr-accent-soft);
	color: var(--ssr-accent-dark);
	transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.ssr-purpose__arrow svg {
	width: 18px;
	height: 18px;
}

.ssr-purpose__card:hover .ssr-purpose__arrow {
	transform: translateX(3px);
	background: var(--ssr-accent);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.ssr-purpose__card:hover .ssr-purpose__arrow {
		transform: none;
	}
}

/* ===== 該当0件の案内（既定は hidden・JS が出す） ===== */

.ssr-purpose .ssr-purpose__empty {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: #6f665e;
}

.ssr-purpose .ssr-purpose__empty a {
	color: var(--ssr-accent-dark);
	font-weight: 700;
}

/* =========================================================
 *  幅
 * ========================================================= */

/* 3列のまま入るが余裕が無くなる幅。文字と余白だけ詰めて列は保つ
   （ここで1列に落とすと «3つの探し方» が一度に見えなくなる）。 */
@media (max-width: 1180px) {
	.ssr-purpose__grid {
		gap: 14px;
	}

	.ssr-purpose__summary {
		gap: 12px;
		padding: 16px 16px 15px;
	}

	.ssr-purpose__body {
		padding: 0 16px 16px;
	}

	.ssr-purpose__icon {
		width: 54px;
		height: 54px;
	}

	.ssr-purpose__icon svg {
		width: 24px;
		height: 24px;
	}

	.ssr-purpose .ssr-purpose__head {
		font-size: 18px;
	}

	.ssr-purpose__pf-num {
		font-size: 38px;
	}

	.ssr-purpose__pf-spark {
		width: 62px;
	}

	.ssr-purpose__board .ssr-purpose__opt {
		font-size: 12px;
	}
}

/* 3列だと銘柄の板（3列×2段）が潰れる幅。2列にして «戦略» だけ行いっぱいに広げる。
   広がった戦略カードでは幹と枝を消し、3軸を横に並べる（横並び自体が分岐に見える）。 */
@media (min-width: 641px) and (max-width: 900px) {
	.ssr-purpose__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ssr-purpose__card--strategy {
		grid-column: 1 / -1;
	}

	.ssr-purpose__card--strategy .ssr-purpose__lead {
		min-height: 0;
	}

	.ssr-purpose__card--strategy .ssr-purpose__tree {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 20px;
		padding-left: 0;
	}

	.ssr-purpose__card--strategy .ssr-purpose__tree::before,
	.ssr-purpose__card--strategy .ssr-purpose__branch::before,
	.ssr-purpose__card--strategy .ssr-purpose__branch::after {
		display: none;
	}

	.ssr-purpose__card--strategy .ssr-purpose__branch + .ssr-purpose__branch {
		margin-top: 0;
	}

	.ssr-purpose__card--strategy .ssr-purpose__axis {
		padding-top: 8px;
		border-top: 2px solid #f4e4d3;
	}
}

/* 1列。図は消さない（図が消えると3枚とも «文字だけのリンク» に戻る）。 */
@media (max-width: 640px) {
	.ssr-purpose__inner {
		padding: 12px 16px 22px;
	}

	.ssr-purpose__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.ssr-purpose__summary {
		gap: 13px;
		padding: 14px 14px 13px;
	}

	.ssr-purpose__body {
		padding: 0 16px 14px;
	}

	.ssr-purpose__icon {
		width: 50px;
		height: 50px;
	}

	.ssr-purpose__icon svg {
		width: 23px;
		height: 23px;
	}

	/* 1列に積むので、3枚の下端を揃えるための高さ予約は要らない。 */
	.ssr-purpose .ssr-purpose__lead {
		min-height: 0;
	}

	.ssr-purpose__pf-num {
		font-size: 36px;
	}

	/* 指で押す前提の高さにする。詰めると隣の選択肢を誤って押す。 */
	.ssr-purpose__opt {
		min-height: 44px;
		padding: 0 14px;
		font-size: 13.5px;
	}

	.ssr-purpose__board .ssr-purpose__opt {
		min-height: 46px;
		font-size: 13.5px;
	}

	.ssr-purpose .ssr-purpose__cta {
		margin-top: 16px;
	}
}

/* 銘柄の板が3列だと1つあたり 90px を切る幅。2列に落として文字を切らせない。 */
@media (max-width: 380px) {
	.ssr-purpose .ssr-purpose__board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}