/**
 * /shop-renewal/ ヒーロー。
 *
 * ■ 器の幅は自分で持つ
 *   このページは Astra のページビルダーテンプレートで、.ast-container も .site-content も
 *   max-width を持たない。持たない親の中では帯が 1920px までそのまま伸びる。
 *   v1 の .ea-listing-container と同じ 1400px / 左右 20px に合わせて «同じ器» に見せる。
 *
 * ■ 色は v1 の流儀（直書き）に合わせる
 *   v1 は var(--ds-*) を1つも参照していない。ここだけトークンを使うと、
 *   トークンが読まれない文脈で «ヒーローだけ色が違う» ことが起きる。
 *   実測した v1 の配色: #f97316 / #e2e8f0 / #1f2937 / #6b7280 / #f8fafc / #fff7ed
 */

/* ヒーローと目的別カードは «1つの面» に見せる。
   境界線で切ると、入口（探す）が2つの帯に割れて «下は別のもの» に見える。
   下端をカード帯の始まりと同じ色にして、線を引かずに続きだと分かるようにする。 */
.ssr-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #fff7ed 62%, #fdf3e9 100%);
}

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

/* 上下の余白は «一覧がファーストビューに入るか» で決まる。
   ここを 44/36 で組んでいたときは商品の1枚目が折り返しの下に落ちていた（1440x900 実測）。 */
.ssr-hero__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 26px 20px 22px;
	display: grid;
	/* 左の列幅は «チップ6個が1行に収まる» ことで決まる（実測 737px / 1440px で列は 779px）。
	   図版は縮んでも意味を失わないので、余りは図版側から出す。 */
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	gap: 40px;
	align-items: center;
}

.ssr-hero__text {
	min-width: 0;
}

/* ===== ラベル ===== */

/* «何のページか» を1行で。見出しより先に読ませたいので、色は本文より濃い橙にする。
   枠で囲まないのは、下に検索・チップ・CTA と «囲まれた部品» が続くため
   （ここまで囲むと、上から下まで箱が4段積みになって見出しが沈む）。 */
.ssr-hero .ssr-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: clamp(12px, 0.95vw, 13.5px);
	font-weight: 700;
	line-height: 1.5;
	color: #ea6a0c;
	letter-spacing: 0.02em;
}

/* ラベルの前に短い横線を置く。文字だけだと «見出しの1行目» に見える。 */
.ssr-hero__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: #f97316;
}

/* ===== 見出し ===== */

/* 2行で読ませる見出し（«…無料EAを、» / «公開成績から選ぶ。»）。
   旧見出し（9文字）より長いので上限を 44 → 40px に下げる。ここを下げないと
   1440px 幅で1行目が列幅（779px）を越えて «、» の前で折れる（実測）。 */
.ssr-hero .ssr-hero__title {
	margin: 0 0 10px;
	font-size: clamp(25px, 2.9vw, 40px);
	line-height: 1.3;
	font-weight: 800;
	color: #16202e;
	letter-spacing: 0.005em;
	overflow-wrap: break-word;
}

/* 強調は «公開成績» の1語だけ。斜体にはしない（日本語で読みにくくなる）。 */
.ssr-hero__title em {
	font-style: normal;
	color: #f97316;
}

/* Astra は «.entry-content p { margin-bottom: 1.6em }»（詳細度 0,1,1）で下を空ける。
   .ssr-hero__lead（0,1,0）では負けて 57px 空き、リードと検索欄が別の塊に見える（実測 1440px）。
   チップの下線と同じ手で、要素を1つ挟んで 0,2,0 にする（!important は使わない）。 */
.ssr-hero .ssr-hero__lead {
	margin: 0 0 14px;
	/* 行長は «40〜45文字» に収める。列幅いっぱい（779px）だと1行 52文字で目が戻れない。 */
	max-width: 40em;
	font-size: clamp(14px, 1.1vw, 15.5px);
	line-height: 1.7;
	color: #5b6472;
	overflow-wrap: break-word;
}

/* ===== 検索 ===== */

.ssr-hero__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 720px;
	padding: 6px 6px 6px 44px;
	background: #ffffff;
	border: 1px solid #e6e0d9;
	border-radius: 12px;
	/* 2枚重ねる。近い影で輪郭を、遠い影で «面から浮いている» ことを出す。
	   1枚だけだと、濃くすると汚れて見え、薄くすると平らに見える。 */
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.06);
}

.ssr-hero__search:focus-within {
	border-color: #f97316;
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16), 0 6px 18px rgba(249, 115, 22, 0.10);
}

.ssr-hero__search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: #94a3b8;
	pointer-events: none;
}

.ssr-hero__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: #1f2937;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ssr-hero__search-input::placeholder {
	color: #94a3b8;
}

.ssr-hero__search-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: #f97316;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ssr-hero__search-btn:hover,
.ssr-hero__search-btn:focus-visible {
	background: #ea6a0c;
}

.ssr-hero__search-btn svg {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

/* ===== クイックチップ ===== */

.ssr-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

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

.ssr-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #e6e0d9;
	border-radius: 999px;
	background: #ffffff;
	color: #374151;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease,
	            box-shadow 0.15s ease;
}

/* Astra は «.ast-single-post .entry-content a { text-decoration: underline }»（詳細度 0,2,1）で
   下線を引く。.entry-content .ssr-hero__chip（0,2,0）では負けるので、要素を1つ挟んで 0,3,0 にする。
   （実測 2026-07-28。!important は使わない ― 次に足すリンクで同じ罠を踏むだけになる） */
.entry-content .ssr-hero .ssr-hero__chip,
.entry-content .ssr-hero .ssr-hero__chip:hover,
.entry-content .ssr-hero .ssr-hero__chip:focus,
.entry-content .ssr-hero .ssr-hero__cta,
.entry-content .ssr-hero .ssr-hero__cta:hover,
.entry-content .ssr-hero .ssr-hero__cta:focus {
	text-decoration: none;
}

.ssr-hero__chip:hover,
.ssr-hero__chip:focus-visible {
	border-color: #f97316;
	color: #ea6a0c;
	background: #fff7ed;
	box-shadow: 0 2px 8px rgba(249, 115, 22, 0.14);
}

.ssr-hero__chip.is-on {
	border-color: #f97316;
	background: linear-gradient(180deg, #fb8c3c 0%, #f97316 100%);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(249, 115, 22, 0.28);
}

.ssr-hero__chip-icon {
	display: flex;
	flex: 0 0 auto;
	color: #f97316;
}

.ssr-hero__chip.is-on .ssr-hero__chip-icon {
	color: #ffffff;
}

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

.ssr-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 16px 0 0;
}

.ssr-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 50px;
	padding: 0 22px;
	border-radius: 12px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
	            box-shadow 0.15s ease, transform 0.15s ease;
}

/* 主 CTA。検索ボタンと同じ橙で «同じ行き先の系統» に見せる。 */
.ssr-hero__cta--main {
	border: 1px solid #f97316;
	background: linear-gradient(180deg, #fb8c3c 0%, #f97316 100%);
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(249, 115, 22, 0.28);
}

.ssr-hero__cta--main:hover,
.ssr-hero__cta--main:focus-visible {
	background: linear-gradient(180deg, #f97316 0%, #ea6a0c 100%);
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.34);
	transform: translateY(-1px);
}

/* 副 CTA。ページの外へ出るので «塗らない»。押す先の重さの違いを面の重さで示す。 */
.ssr-hero__cta--sub {
	border: 1px solid #e6e0d9;
	background: #ffffff;
	color: #374151;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ssr-hero__cta--sub:hover,
.ssr-hero__cta--sub:focus-visible {
	border-color: #f97316;
	color: #ea6a0c;
	background: #fff7ed;
}

.ssr-hero__cta-arrow {
	display: flex;
	flex: 0 0 auto;
}

.ssr-hero__cta-arrow svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.2;
}

/* ===== 補足 ===== */

.ssr-hero__notes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ssr-hero__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #5b6472;
}

.ssr-hero__note-icon {
	display: flex;
	flex: 0 0 auto;
	color: #16a34a;
}

.ssr-hero__note-icon svg {
	width: 15px;
	height: 15px;
	stroke-width: 2.6;
}

/* 主 CTA（#ssr-purpose）とカードから開く v1 のパネルは «アンカーで飛ぶ先»。
   このサイトのヘッダーは固定で、高さは実測 81px（PC）/ 71px（600px 以下）。
   逃がさないと飛んだ先の上端がヘッダーの裏に入り、«押しても何も起きていない» ように見える
   （実測: CTA を押すと #ssr-purpose の top が 0 になり、見出しがヘッダーに隠れた）。 */
#ssr-purpose,
#ea-currency-tags,
#ea-category-tags {
	scroll-margin-top: 97px;
}

@media (max-width: 600px) {
	#ssr-purpose,
	#ea-currency-tags,
	#ea-category-tags {
		scroll-margin-top: 83px;
	}
}

/* ===== 図版 ===== */

.ssr-hero__art {
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

/* 図版の高さが «ヒーローの高さ» を決めている（テキスト側は 230px 前後・実測）。
   ここを大きくすると本文は1行も増えないのに一覧だけが折り返しの下へ押し出されるので、
   幅は «テキストの塊より高くならない» ところで止める。 */
.ssr-hero__svg {
	width: 100%;
	max-width: 470px;
	height: auto;
	display: block;
}

/* ===== 目的別3カードのスタイルは assets/ssr-purpose.css =====
 * ヒーロー（この帯）とは «別の面» なので、ファイルも分けている。
 * どちらも [ssr_hero] からしか出ないので、読み込みは同じ条件で行う。
 */

/* ===== 一覧の下の4つの特徴 =====
 *
 * ■ 箱にしない
 *   すぐ上に商品カードが並んでいるので、同じ重さの箱を4つ足すと «まだ商品が続く» ように見える。
 *   背景・枠・影を持たせず、上に細い線を1本引いて «別のもの» だと示すだけにする。
 *
 * ■ 4つの «アイコン / 見出し / 説明» を同じ位置で揃える
 *   説明は1行のものと2行のものが混ざるので、上端で揃える（下端で揃えると見出しの行がずれる）。
 *   アイコンの箱は 38px 固定 ＝ 4つとも見出しの1行目と中心が合う。
 */
.ssr-trust {
	max-width: 1400px;
	/* 一覧の «最後の行» と地続きに見えないよう、線の前に余白を置く。 */
	margin: 36px auto 0;
	padding: 0 20px 40px;
}

.ssr-trust__list {
	display: grid;
	/* PC は «均等な4列»。auto ではなく 1fr 固定にして、文字数の違いで列幅が変わらないようにする。 */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 24px;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid #ecdfd2;
	list-style: none;
}

.ssr-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-trust__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #fff3e8;
	color: #f97316;
}

.ssr-trust__icon svg {
	width: 21px;
	height: 21px;
}

.ssr-trust__text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

/* 見出しと説明の差は «太さ» だけでなく «大きさと色» でも付ける
   （太さだけだと、日本語では2行になった説明のほうが面積で勝ってしまう）。 */
.ssr-trust__head {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #1f2937;
}

.ssr-trust__desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.6;
	color: #6b7280;
	overflow-wrap: break-word;
}

/* 4列のままだと1列あたり 300px を切って説明が3行になる。2列に落とす。 */
@media (max-width: 1024px) {
	.ssr-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 20px;
	}
}

/* スマホは «2列にできる» のではなく «1列のほうが読める»。
   390px で2列にすると1列 171px しか無く、実測で見出しが2行・説明が3行に割れた
   （「同じ基準で成績を掲載」が3行に落ちる）。詰めて2列を守るより、1列で1行ずつ読ませる。
   600px は図版を消す幅と同じ ― ここから下は «縦に読む画面» として扱いを揃える。 */
@media (max-width: 600px) {
	.ssr-trust {
		margin-top: 28px;
		padding: 0 16px 32px;
	}

	.ssr-trust__list {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 18px;
		gap: 14px;
	}

	.ssr-trust__icon {
		width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	.ssr-trust__icon svg {
		width: 19px;
		height: 19px;
	}

	.ssr-trust__head {
		font-size: 14px;
	}

	.ssr-trust__desc {
		font-size: 12px;
	}
}

/* ===== v1 の見出し（一覧セクションの見出し） =====
 *
 * 以前はここで h1.ea-shop-title を display:none にしていた。h1 が2つ並ぶのを
 * 消すためだったが、隠しても DOM には h1 が2つ残る（＝検索エンジンからは2つに見える）。
 * v1 側で «[ssr_hero] のあるページなら h2» に降ろしたので、隠す必要がなくなった。
 *
 * h2 として «ここから一覧» を示す見出しになるので、ヒーローの h1 とは重さを変える
 * （h1 = 40px / この h2 = 24px。同じ大きさで2つ並ぶと、どちらが主題か分からなくなる）。
 * 古いキャッシュ（15分 TTL）から h1 が返ってくる間だけは、こちらも同じ見た目にしておく。
 */
.ssr-hero ~ h1.ea-shop-title,
.ssr-hero ~ h2.ea-shop-title {
	max-width: 1400px;
	margin: 28px auto 0;
	padding: 0 20px;
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.4;
	font-weight: 700;
	color: #1f2937;
}

@media (max-width: 600px) {
	.ssr-hero ~ h1.ea-shop-title,
	.ssr-hero ~ h2.ea-shop-title {
		margin-top: 22px;
		padding: 0 16px;
	}
}

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

/* 図版が «添え物» になる幅。テキストの行長を保つほうを優先する。 */
@media (max-width: 1024px) {
	.ssr-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 26px 20px 20px;
	}

	.ssr-hero__art {
		justify-content: center;
	}

	.ssr-hero__svg {
		max-width: 400px;
	}
}

/* 図版を出すと «検索より下に» スクロールが要る幅では出さない（装飾なので消してよい）。 */
@media (max-width: 600px) {
	.ssr-hero__art {
		display: none;
	}

	.ssr-hero__inner {
		padding: 22px 16px 18px;
	}

	.ssr-hero__search {
		padding-left: 40px;
	}

	.ssr-hero__search-icon {
		left: 13px;
	}

	.ssr-hero__chips {
		gap: 8px;
	}

	.ssr-hero__chip {
		height: 36px;
		padding: 0 12px;
		font-size: 12.5px;
	}

	/* CTA は «2つ並べる» より «縦に積む» ほうが押しやすい。
	   横に並べると副 CTA が 1行に収まらず、主 CTA だけ幅が伸びて主従が逆に見える。 */
	.ssr-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 14px;
	}

	.ssr-hero__cta {
		width: 100%;
		height: 48px;
		font-size: 15px;
	}

	.ssr-hero__notes {
		gap: 6px 14px;
		margin-top: 12px;
	}

	.ssr-hero__note {
		font-size: 12.5px;
	}
}

/* 見出しの1行目（«FX自動売買の無料EAを、» = 12文字）が1行に収まる下限。
   360px 幅では 25px × 12文字 = 300px < 328px（= 360 - 左右 16px）で収まるが、
   320px 幅では溢れて3行になるので、ここだけ字を落として2行を保つ。 */
@media (max-width: 359px) {
	.ssr-hero .ssr-hero__title {
		font-size: 22px;
	}
}

/* ===== 帯を全幅にする（2026-08-01） =====
 * このファイル冒頭のコメントは «親は max-width を持たない» 前提で書かれているが、
 * 本番 /shop/ は Elementor テンプレ（elementor-100849）に載っていて、
 * その .elementor-container が max-width:1600px を持つ。
 * そのため 1600px を超える画面では .ssr-hero / #ssr-purpose の «帯» がそこで切れ、
 * 左右に地色が残って «箱» に見える（実測 2560px で帯 1600px・左右 480px ずつ余る。
 * 1600px 以下の画面では全幅に見えるので、狭い画面だけ見ていると気付けない）。
 *
 * 中身の幅は各セクションが自前で持っている（.ssr-hero__inner / .ea-shop-title /
 * .ea-listing-container / .ssr-trust がいずれも max-width:1400px）ので、ここを外すと
 * «帯だけ» が全幅になり、中身は 1400px 中央のまま 1px も動かない（実測で確認）。
 * ★100vw ＋ 負マージンで広げる手は使わない。縦スクロールバーの幅だけ横に溢れる。
 *
 * ★勝たせるのに詳細度がいる。Elementor はセクション設定«コンテンツ幅 1600px»から
 *   `.elementor-100849 .elementor-element.elementor-element-a5bf7e3 > .elementor-container`
 *   ＝(0,4,0) を生成する（CDP の getMatchedStylesForNode で実測）。
 *   `.elementor-100849 .elementor-container`(0,2,0) では負けて何も変わらない。
 *   読み込み順は保証できないので !important で確実に外す。
 *   ★要素 ID(a5bf7e3) はセクションを作り直すと変わるので、
 *     :has() 版を併記して片方が外れてももう片方で効くようにする。
 */
.elementor-100849 .elementor-element-a5bf7e3 > .elementor-container,
.elementor-100849 .elementor-container:has(.ssr-hero) {
	max-width: none !important;
}