/* =========================================================
   brandx LP design 1.0.0（2026-08-15）
   固定ページのLPだけに当たるCSS。商品ページには一切影響しない。

   設計の3原則:
   1) セレクタは必ず bxlp- 始まりのクラスから書く。祖先に .bxlp を要求しない
      → 表側（.bxlp の中）でも、編集画面（ブロックが並列に置かれる）でも同じ見た目になる
   2) 本文まわり（p / h2 / ul）は「>」で直下だけを狙う
      → グループブロックの中に入れた部品が、本文の指定に上書きされない
   3) 部品の中身は「.bxlp-xxx > div > p」のように構造で書いて、
      テーマ側の .post_content p より強くしておく
   ========================================================= */

.bxlp,
.editor-styles-wrapper {
	--bxlp-ink: #31494a;
	--bxlp-label: #6b6353;
	--bxlp-muted: #6f6757;
	--bxlp-surface: #efe9dd;
	--bxlp-page: #f7f4ee;
	--bxlp-card: #fff;
	--bxlp-hair: #e6dfd2;
	--bxlp-shadow: 0 1px 4px rgba(90, 75, 50, .08);
	--bxlp-lift: 0 10px 30px rgba(90, 75, 50, .14);
}

/* ---------- セクションの器 ---------- */
.bxlp-sec { padding: 84px 0; }
.bxlp-sec.is-white { background: var(--bxlp-card); }
.bxlp-sec.is-page { background: var(--bxlp-page); }
.bxlp-sec.is-surface { background: var(--bxlp-surface); }
.bxlp-sec.is-band { background: var(--bxlp-band, #31494a); }
.bxlp-inner { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ショートコードの行が段落に包まれる関係で、器の中に空の段落が残ることがある。
   余白だけが増えるので消す（2026-08-15 実機のHTMLで確認） */
.bxlp-inner > p:empty { display: none; }

/* グループブロックは、表側では中にもう1枚 div が入る。
   その1枚を透明あつかいにして、中身をそのまま並べられるようにする。
   編集画面ではこの1枚が無いこともあるため、あってもなくても成り立つ書き方にしている */
.bxlp-fvgrid > .wp-block-group__inner-container,
.bxlp-flow > .wp-block-group__inner-container,
.bxlp-steps > .wp-block-group__inner-container,
.bxlp-faq > .wp-block-group__inner-container,
.bxlp-howto > .wp-block-group__inner-container,
.bxlp-author > .wp-block-group__inner-container { display: contents; }

/* ---------- 見出しと本文（直下だけ） ---------- */
.bxlp-kicker,
.bxlp-sec .bxlp-inner > p.bxlp-kicker {
	display: block; font-size: 12px; font-weight: bold; letter-spacing: .14em;
	color: var(--bxlp-tone-d); margin: 0 0 10px; line-height: 1.7;
}
.bxlp-sec.is-band .bxlp-kicker { color: var(--bxlp-band-sub, #9dc3b6); }

.bxlp-sec .bxlp-inner > h2 {
	font-size: 31px; line-height: 1.45; font-weight: bold; color: var(--bxlp-ink);
	margin: 0 0 18px; padding: 0; border: none; background: none; letter-spacing: .005em;
}
.bxlp-sec.is-band .bxlp-inner > h2 { color: var(--bxlp-band-ink, #fff); }
.bxlp-sec .bxlp-inner > h3 { font-size: 18px; line-height: 1.6; margin: 30px 0 8px; color: var(--bxlp-ink); }
.bxlp-sec .bxlp-inner > p { font-size: 16px; line-height: 1.95; margin: 0 0 18px; color: #4a5152; }
.bxlp-sec .bxlp-inner > p:last-child { margin-bottom: 0; }
.bxlp-sec.is-band .bxlp-inner > p { color: var(--bxlp-band-sub, #cdd8d6); }

/* 見出しの中で強調したい語に付ける下線マーカー */
.bxlp-u { background: linear-gradient(transparent 64%, var(--bxlp-tone-soft) 64%); }

/* ---------- 箇条書き（直下だけ） ---------- */
.bxlp-sec .bxlp-inner > ul { margin: 0; padding: 0; list-style: none; }
.bxlp-sec .bxlp-inner > ul > li {
	position: relative; padding: 0 0 0 34px; margin: 0 0 15px;
	font-size: 15.5px; line-height: 1.9; color: #4a5152; list-style: none;
}
.bxlp-sec .bxlp-inner > ul > li:last-child { margin-bottom: 0; }
.bxlp-sec .bxlp-inner > ul > li::before {
	content: ""; position: absolute; left: 4px; top: .58em; width: 16px; height: 9px;
	border-left: 2.5px solid var(--bxlp-tone); border-bottom: 2.5px solid var(--bxlp-tone);
	transform: rotate(-45deg); background: none; border-radius: 0;
}
.bxlp-sec.is-band .bxlp-inner > ul > li { color: var(--bxlp-band-sub, #cdd8d6); }

/* ---------- ファーストビュー ---------- */
.bxlp-fv {
	background: var(--bxlp-card); padding: 80px 0 72px;
	border-bottom: 1px solid var(--bxlp-hair); position: relative; overflow: hidden;
}
.bxlp-fv::before {
	content: ""; position: absolute; top: -150px; right: -130px; width: 480px; height: 480px;
	border-radius: 50%; background: var(--bxlp-tone-soft);
}
.bxlp-fv .bxlp-inner { position: relative; }
.bxlp-fv h1,
.bxlp-fv .bxlp-inner h1 {
	font-size: 43px; line-height: 1.45; font-weight: bold; color: var(--bxlp-ink);
	margin: 0 0 20px; padding: 0; border: none; background: none;
}
.bxlp-fv .bxlp-fvcol p { font-size: 17px; line-height: 1.95; color: #4a5152; margin: 0 0 8px; }
.bxlp-fv .bxlp-inner > p { font-size: 17px; line-height: 1.95; color: #4a5152; margin: 0 0 8px; max-width: 36em; }

.bxlp-eyebrow,
.bxlp-fv .bxlp-fvcol p.bxlp-eyebrow,
.bxlp-inner > p.bxlp-eyebrow,
.bxlp .bxlp-inner .bxlp-eyebrow {
	display: inline-block; font-size: 12px; font-weight: bold; letter-spacing: .1em;
	color: var(--bxlp-tone-d); border: 1px solid var(--bxlp-tone); border-radius: 999px;
	padding: 5px 15px; margin: 0 0 20px; line-height: 1.7;
}
.bxlp-rule,
.bxlp .bxlp-inner .bxlp-rule { width: 60px; height: 3px; background: var(--bxlp-tone); border-radius: 2px; margin: 22px 0; border: none; }

/* ファーストビューの2段組（左＝文章 / 右＝画面の図） */
.bxlp-fvgrid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
.bxlp-fvgrid > * { min-width: 0; }

/* B案（濃色のファーストビュー）。A案との違いはここだけに絞っている */
.bxlp-plan-b .bxlp-fv { background: #2f5a4c; border-bottom: none; }
.bxlp-plan-b .bxlp-fv::before { background: rgba(255, 255, 255, .06); }
.bxlp-plan-b .bxlp-fv h1 { color: #fff; }
.bxlp-plan-b .bxlp-fv p { color: #d5e2de; }
.bxlp-plan-b .bxlp-fv .bxlp-eyebrow { background: #fff; border-color: #fff; color: #2f5a4c; }
.bxlp-plan-b .bxlp-fv .bxlp-rule { background: #fff; opacity: .7; }
.bxlp-plan-b .bxlp-fv .wp-block-button__link { background: #fff; color: #2f5a4c; border-color: #fff; }
.bxlp-plan-b .bxlp-fv .bxlp-note { color: #b8c9c4; }

/* ---------- ボタン ---------- */
.bxlp-fv .wp-block-buttons { margin: 4px 0 0; }
.bxlp-sec .wp-block-buttons { margin: 30px 0 0; }
.bxlp-fv .wp-block-button__link,
.bxlp-sec .wp-block-button__link {
	background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; border-radius: 999px;
	font-weight: bold; font-size: 16px; padding: 17px 38px; text-decoration: none;
	box-shadow: 0 4px 16px var(--bxlp-tone-soft); border: 1px solid var(--bxlp-tone);
}
.bxlp-fv .wp-block-button.is-style-outline .wp-block-button__link,
.bxlp-sec .wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff; color: var(--bxlp-tone-d); border: 1px solid var(--bxlp-tone);
	font-size: 14.5px; padding: 13px 26px; box-shadow: none;
}
.bxlp-note,
.bxlp-fv .bxlp-fvcol p.bxlp-note,
.bxlp-inner > p.bxlp-note,
.bxlp .bxlp-inner .bxlp-note {
	font-size: 12.5px; color: var(--bxlp-muted); margin: 12px 0 0; line-height: 1.85;
}
/* 文中リンクの行 */
.bxlp-tlink,
.bxlp-inner > p.bxlp-tlink { margin: 22px 0 0; font-size: 15px; }
.bxlp-tlink a,
.bxlp .bxlp-inner .bxlp-tlink a { color: var(--bxlp-tone-d); font-weight: bold; text-decoration: none; border-bottom: 1px solid var(--bxlp-tone-soft); }
.bxlp-tlink a::after { content: " →"; }

/* ---------- 商品ページの図（ファーストビュー右） ---------- */
.bxlp-mock { background: var(--bxlp-page); border: 1px solid var(--bxlp-hair); border-radius: 14px; box-shadow: var(--bxlp-lift); padding: 16px; }
.bxlp-mock-bar,
.bxlp .bxlp-inner .bxlp-mock-bar { display: flex; gap: 6px; margin: 0 0 12px; }
.bxlp-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dfd8cb; display: block; }
.bxlp-mock-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: var(--bxlp-shadow); }
.bxlp-mock-card > .t,
.bxlp .bxlp-inner .bxlp-mock-card > .t { font-size: 12.5px; font-weight: bold; margin: 0 0 10px; color: var(--bxlp-ink); }
.bxlp-mock-card > .p,
.bxlp .bxlp-inner .bxlp-mock-card > .p { font-size: 11px; color: var(--bxlp-label); margin: 0; line-height: 1.6; }
.bxlp-mock-card > .p > b,
.bxlp .bxlp-inner .bxlp-mock-card > .p > b { font-size: 23px; color: var(--bxlp-ink); display: block; line-height: 1.3; }
.bxlp-mock-chart,
.bxlp .bxlp-inner .bxlp-mock-chart { height: 56px; margin: 12px 0 0; position: relative; }
.bxlp-mock-chart > svg { display: block; width: 100%; height: 100%; }
.bxlp-mock-ad,
.bxlp .bxlp-inner .bxlp-mock-ad { margin: 14px 0 0; border: 2px solid var(--bxlp-tone); border-radius: 10px; background: #fff; padding: 10px; position: relative; box-shadow: 0 0 0 6px var(--bxlp-tone-soft); }
.bxlp-mock-ad > .pr,
.bxlp .bxlp-inner .bxlp-mock-ad > .pr { position: absolute; top: -9px; left: 10px; background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; font-size: 9.5px; font-weight: bold; border-radius: 4px; padding: 1px 7px; line-height: 1.7; }
.bxlp-mock-ad > .slot,
.bxlp .bxlp-inner .bxlp-mock-ad > .slot { height: 66px; border-radius: 6px; background: var(--bxlp-surface); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--bxlp-label); margin: 0; }
.bxlp-mock-cap,
.bxlp .bxlp-inner .bxlp-mock-cap { font-size: 11.5px; color: var(--bxlp-muted); margin: 12px 2px 0; text-align: center; line-height: 1.7; }

/* ---------- 数字 ---------- */
.bxlp-nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0 0; background: var(--bxlp-card); border-radius: 14px; box-shadow: var(--bxlp-shadow); overflow: hidden; }
.bxlp-nums > div { padding: 26px 20px; text-align: center; border-right: 1px solid var(--bxlp-hair); }
.bxlp-nums > div:last-child { border-right: none; }
.bxlp-nums .v,
.bxlp .bxlp-inner .bxlp-nums .v { display: block; font-size: 35px; font-weight: bold; line-height: 1.15; color: var(--bxlp-tone-d); }
.bxlp-nums .k,
.bxlp .bxlp-inner .bxlp-nums .k { display: block; font-size: 12.5px; color: var(--bxlp-label); margin-top: 8px; }
.bxlp-nums .t,
.bxlp .bxlp-inner .bxlp-nums .t { display: block; font-size: 10.5px; color: var(--bxlp-muted); margin-top: 3px; }

/* ---------- 3つの流れ ---------- */
.bxlp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0 0; }
.bxlp-flow .wp-block-group,
.bxlp-flow > div:not(.wp-block-group__inner-container) {
	background: var(--bxlp-card); border-radius: 14px; padding: 26px 24px;
	box-shadow: var(--bxlp-shadow); position: relative;
}
.bxlp-flow .n,
.bxlp .bxlp-inner .bxlp-flow .n { width: 30px; height: 30px; border-radius: 50%; background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; font-size: 13.5px; font-weight: bold; display: flex; align-items: center; justify-content: center; margin: 0 0 14px; }
.bxlp-flow h3,
.bxlp-flow .h,
.bxlp .bxlp-inner .bxlp-flow h3,
.bxlp .bxlp-inner .bxlp-flow .h { font-size: 16px; font-weight: bold; margin: 0 0 8px; color: var(--bxlp-ink); line-height: 1.55; }
.bxlp-flow .d,
.bxlp .bxlp-inner .bxlp-flow .d { font-size: 13.5px; line-height: 1.85; color: var(--bxlp-label); margin: 0; }
.bxlp-flow .wp-block-group::after,
.bxlp-flow > div:not(.wp-block-group__inner-container)::after {
	content: ""; position: absolute; right: -13px; top: 50%; width: 9px; height: 9px;
	border-right: 2px solid var(--bxlp-hair); border-bottom: 2px solid var(--bxlp-hair);
	transform: translateY(-50%) rotate(-45deg);
}
.bxlp-flow .wp-block-group:last-child::after,
.bxlp-flow > div:last-child::after { display: none; }

/* ---------- 手順 ---------- */
.bxlp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.bxlp-steps .wp-block-group,
.bxlp-steps > div:not(.wp-block-group__inner-container) {
	background: var(--bxlp-card); border-radius: 12px; padding: 20px;
	box-shadow: var(--bxlp-shadow); display: flex; gap: 12px; align-items: flex-start;
}
/* カードの中にもう1枚 div が入る表側の形（.bxlp-steps 自身は除外される） */
.bxlp-steps .wp-block-group > .wp-block-group__inner-container {
	display: flex; gap: 12px; align-items: flex-start; width: 100%;
}
.bxlp-steps .n,
.bxlp .bxlp-inner .bxlp-steps .n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; font-size: 12.5px; font-weight: bold; display: flex; align-items: center; justify-content: center; margin: 0; }
.bxlp-steps .s,
.bxlp .bxlp-inner .bxlp-steps .s { font-size: 13.5px; line-height: 1.8; color: var(--bxlp-ink); margin: 0; }

/* ---------- 締めの1行 ---------- */
.bxlp-closing,
.bxlp-inner > p.bxlp-closing {
	margin: 30px 0 0; padding: 20px 24px; background: var(--bxlp-card);
	border-left: 4px solid var(--bxlp-tone); border-radius: 0 10px 10px 0;
	font-size: 15.5px; line-height: 1.85; box-shadow: var(--bxlp-shadow); color: var(--bxlp-ink);
}
.bxlp-closing b,
.bxlp-closing strong,
.bxlp .bxlp-inner .bxlp-closing b,
.bxlp .bxlp-inner .bxlp-closing strong { color: var(--bxlp-tone-d); font-size: 21px; }

/* ---------- 図・画像 ---------- */
.bxlp-figure { margin: 32px 0 0; background: var(--bxlp-card); border-radius: 14px; box-shadow: var(--bxlp-shadow); overflow: hidden; }
.bxlp-figure img,
.bxlp-figure svg { display: block; width: 100%; height: auto; }
.bxlp-figure figcaption,
.bxlp .bxlp-inner .bxlp-figure figcaption { padding: 14px 20px; font-size: 12.5px; color: var(--bxlp-label); border-top: 1px solid var(--bxlp-hair); text-align: left; margin: 0; line-height: 1.8; }
.bxlp-fig,
.bxlp .bxlp-inner .bxlp-fig { margin: 32px 0 0; }

/* 監修者（書影＋文章の2段組） */
.bxlp-author { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center; background: var(--bxlp-card); border-radius: 14px; padding: 26px 30px; box-shadow: var(--bxlp-shadow); margin: 30px 0 0; }
.bxlp-author figure,
.bxlp .bxlp-inner .bxlp-author figure { margin: 0; }
.bxlp-author figure img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(90, 75, 50, .18); }
.bxlp-author .wp-block-group p,
.bxlp .bxlp-inner .bxlp-author .wp-block-group p { font-size: 15px; line-height: 1.95; color: #4a5152; margin: 0 0 12px; }
.bxlp-author .wp-block-group p:last-child,
.bxlp .bxlp-inner .bxlp-author .wp-block-group p:last-child { margin-bottom: 0; }
.bxlp-author p.bxlp-tlink,
.bxlp .bxlp-inner .bxlp-author p.bxlp-tlink { margin: 18px 0 0; font-size: 15px; }

/* ファーストビュー右の図の受け皿。段落に包まれないよう1行のdivで置いている */
.bxlp-mockwrap { min-width: 0; }

/* ---------- よくあるご質問 ---------- */
.bxlp-faq { margin: 26px 0 0; border-top: 1px solid var(--bxlp-hair); }
.bxlp-faq details,
.bxlp .bxlp-inner .bxlp-faq details { border-bottom: 1px solid var(--bxlp-hair); padding: 0; margin: 0; background: none; border-radius: 0; }
.bxlp-faq summary,
.bxlp .bxlp-inner .bxlp-faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 15.5px; font-weight: bold; position: relative; color: var(--bxlp-ink); line-height: 1.6; }
.bxlp-faq summary::-webkit-details-marker { display: none; }
.bxlp-faq summary::after { content: ""; position: absolute; right: 8px; top: 27px; width: 9px; height: 9px; border-right: 2px solid var(--bxlp-muted); border-bottom: 2px solid var(--bxlp-muted); transform: rotate(45deg); transition: transform .2s; }
.bxlp-faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.bxlp-faq details > p,
.bxlp .bxlp-inner .bxlp-faq details > p { padding: 0 0 22px; font-size: 14.5px; line-height: 1.95; color: var(--bxlp-label); margin: 0; }

/* ---------- 締めの帯 ---------- */
.bxlp-sec.is-band { text-align: center; }
.bxlp-sec.is-band .wp-block-buttons { justify-content: center; }
.bxlp-sec.is-band .wp-block-button__link {
	background: var(--bxlp-band-btn, #fff); color: var(--bxlp-band-btn-ink, #31494a);
	border-color: var(--bxlp-band-btn, #fff);
}
.bxlp-sec.is-band .bxlp-note,
.bxlp-sec.is-band .bxlp-inner > p.bxlp-note { color: var(--bxlp-band-sub, #9fb0ad); }

/* ---------- 幅の切り替え ---------- */
@media (max-width: 900px) {
	.bxlp-sec { padding: 56px 0; }
	.bxlp-fv { padding: 52px 0 46px; }
	.bxlp-fvgrid { grid-template-columns: 1fr; gap: 32px; }
	.bxlp-fv h1,
.bxlp-fv .bxlp-inner h1 { font-size: 30px; }
	.bxlp-sec .bxlp-inner > h2 { font-size: 24px; }
	.bxlp-nums { grid-template-columns: repeat(2, 1fr); }
	.bxlp-nums > div { border-bottom: 1px solid var(--bxlp-hair); }
	.bxlp-nums > div:nth-child(2n) { border-right: none; }
	.bxlp-flow,
.bxlp-steps { grid-template-columns: 1fr; }
	.bxlp-flow > div::after { right: 50%; top: auto; bottom: -14px; transform: translateX(50%) rotate(45deg); }
	.bxlp-author { grid-template-columns: 1fr; }
	.bxlp-author > figure,
.bxlp .bxlp-inner .bxlp-author > figure { max-width: 170px; margin: 0 auto; }
}

/* ---------- 編集画面での見え方 ---------- */
/* 編集領域は幅が狭いので、上下の余白を詰めて全体を見渡しやすくする */
.editor-styles-wrapper .bxlp-sec,
.editor-styles-wrapper .bxlp-fv { padding: 36px 0; }
.editor-styles-wrapper .bxlp-inner { padding: 0 20px; }

/* =========================================================
   ここから下は、説明ページ・広告のご案内・書籍LPで使う部品。
   これらのページには、機構がからむショートコード（ログイン状態での出し分け、
   Amazonの表示義務など）が残っているため、その出力にも新デザインを当てている。
   ========================================================= */

/* ---------- 説明ページの手順（番号はCSSが振る） ---------- */
.bxlp-howto { counter-reset: bxho; margin: 26px 0 0; display: grid; gap: 12px; }
.bxlp-howto .wp-block-group,
.bxlp-howto > li,
.bxlp .bxlp-inner .bxlp-howto .wp-block-group,
.bxlp .bxlp-inner .bxlp-howto > li {
	counter-increment: bxho; position: relative; list-style: none;
	background: var(--bxlp-card); border-radius: 12px; padding: 20px 22px 20px 62px;
	box-shadow: var(--bxlp-shadow); margin: 0;
}
.bxlp-howto .wp-block-group::before,
.bxlp-howto > li::before,
.bxlp .bxlp-inner .bxlp-howto .wp-block-group::before,
.bxlp .bxlp-inner .bxlp-howto > li::before {
	content: counter(bxho); position: absolute; left: 20px; top: 20px;
	width: 26px; height: 26px; border-radius: 50%; background: var(--bxlp-fill, var(--bxlp-tone));
	color: #fff; font-size: 12.5px; font-weight: bold;
	display: flex; align-items: center; justify-content: center;
}
.bxlp-howto .t,
.bxlp .bxlp-inner .bxlp-howto .t { display: block; font-size: 15.5px; font-weight: bold; color: var(--bxlp-ink); margin: 0 0 5px; line-height: 1.6; }
.bxlp-howto .d,
.bxlp .bxlp-inner .bxlp-howto .d { display: block; font-size: 14px; line-height: 1.9; color: var(--bxlp-label); margin: 0; }

/* ---------- 昔からのショートコードが出すボタン ---------- */
.bxlp-cta { margin: 30px 0 0; }
.bxlp-cta.is-center { text-align: center; }
.bxlp-btnrow,
.bxlp .bxlp-inner .bxlp-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 30px 0 0; }
.bxlp-btnrow .bxlp-cta,
.bxlp .bxlp-inner .bxlp-btnrow .bxlp-cta { margin: 0; }
.bxlp-cta a.bxlp-btn,
.bxlp-buy a.bxlp-btn,
.bxlp .bxlp-inner .bxlp-cta a.bxlp-btn,
.bxlp .bxlp-inner .bxlp-buy a.bxlp-btn {
	display: inline-block; background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; border-radius: 999px;
	font-weight: bold; font-size: 16px; padding: 17px 38px; text-decoration: none;
	border: 1px solid var(--bxlp-tone); box-shadow: 0 4px 16px var(--bxlp-tone-soft);
}
.bxlp-cta a.bxlp-btn:hover,
.bxlp-buy a.bxlp-btn:hover,
.bxlp .bxlp-inner .bxlp-cta a.bxlp-btn:hover,
.bxlp .bxlp-inner .bxlp-buy a.bxlp-btn:hover { background: var(--bxlp-tone-d); color: #fff; }
.bxlp-cta a.bxlp-btn2,
.bxlp-linkrow a.bxlp-btn2,
.bxlp .bxlp-inner .bxlp-cta a.bxlp-btn2,
.bxlp .bxlp-inner .bxlp-linkrow a.bxlp-btn2 {
	display: inline-block; background: #fff; color: var(--bxlp-tone-d); border-radius: 999px;
	font-weight: bold; font-size: 14.5px; padding: 13px 26px; text-decoration: none;
	border: 1px solid var(--bxlp-tone);
}
.bxlp-cta a.bxlp-btn2:hover,
.bxlp-linkrow a.bxlp-btn2:hover,
.bxlp .bxlp-inner .bxlp-cta a.bxlp-btn2:hover,
.bxlp .bxlp-inner .bxlp-linkrow a.bxlp-btn2:hover { background: var(--bxlp-fill, var(--bxlp-tone)); color: #fff; }
.bxlp-cta .sub,
.bxlp .bxlp-inner .bxlp-cta .sub { font-size: 12.5px; color: var(--bxlp-muted); margin: 12px 0 0; line-height: 1.85; }
.bxlp-linkrow,
.bxlp .bxlp-inner .bxlp-linkrow { margin: 22px 0 0; }
.bxlp-linkrow a.bxlp-tlink,
.bxlp .bxlp-inner .bxlp-linkrow a.bxlp-tlink {
	color: var(--bxlp-tone-d); font-weight: bold; font-size: 15px; text-decoration: none;
	border-bottom: 1px solid var(--bxlp-tone-soft);
}
.bxlp-linkrow a.bxlp-tlink::after { content: " →"; }

/* ---------- 素材待ちの枠（画像に置き換えていないページ用） ---------- */
.bxlp-ph {
	margin: 30px 0 0; background: var(--bxlp-card); border: 1px dashed var(--bxlp-hair);
	border-radius: 14px; padding: 34px 26px; text-align: center;
}
.bxlp-ph .ttl,
.bxlp .bxlp-inner .bxlp-ph .ttl { font-size: 15px; font-weight: bold; color: var(--bxlp-ink); margin: 0 0 8px; }
.bxlp-ph .dsc,
.bxlp .bxlp-inner .bxlp-ph .dsc { font-size: 13.5px; line-height: 1.9; color: var(--bxlp-label); margin: 0; }
.bxlp-ph .tag,
.bxlp .bxlp-inner .bxlp-ph .tag { display: inline-block; margin: 14px 0 0; font-size: 11.5px; color: var(--bxlp-muted); background: var(--bxlp-surface); border-radius: 999px; padding: 4px 14px; }

/* ---------- 広告のご案内（形態A） ---------- */
.bxlp-adfv { padding-top: 68px; padding-bottom: 68px; }
.bxlp-adfv .bxlp-inner > h1,
.bxlp .bxlp-inner .bxlp-adfv .bxlp-inner > h1 { font-size: 34px; line-height: 1.45; color: var(--bxlp-ink); margin: 0 0 16px; padding: 0; border: none; }
.bxlp-adfv .bxlp-inner > h2,
.bxlp .bxlp-inner .bxlp-adfv .bxlp-inner > h2 { font-size: 27px; }

/* ---------- 書籍LP ---------- */
.bxlp-prbar { padding: 12px 0 0; text-align: right; max-width: 1080px; margin: 0 auto; padding-right: 28px; }
.bxlp-book-fv { padding: 60px 0 56px; }
.bxlp-book-fv-in { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center; }
.bxlp-book-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 36px rgba(90, 75, 50, .26); }
.bxlp-book-cover-none,
.bxlp .bxlp-inner .bxlp-book-cover-none {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4;
	background: var(--bxlp-surface); border-radius: 6px; font-size: 12.5px; color: var(--bxlp-muted);
	box-shadow: 0 14px 36px rgba(90, 75, 50, .18);
}
.bxlp-book-fv .bxlp-book-lead h1 { font-size: 34px; line-height: 1.5; color: var(--bxlp-ink); margin: 0 0 16px; padding: 0; border: none; background: none; }
.bxlp-book-fv .bxlp-book-lead p { font-size: 16px; line-height: 1.95; color: #4a5152; margin: 0 0 14px; }

.bxlp-buy,
.bxlp .bxlp-inner .bxlp-buy { margin: 30px 0 0; }
.bxlp-buy a.bxlp-btn-amzn,
.bxlp .bxlp-inner .bxlp-buy a.bxlp-btn-amzn { background: var(--bxlp-fill, var(--bxlp-tone)); border-color: var(--bxlp-fill, var(--bxlp-tone)); }
.bxlp-buy-ku,
.bxlp .bxlp-inner .bxlp-buy-ku { font-size: 13px; color: var(--bxlp-tone-d); font-weight: bold; margin: 12px 0 0; }
.bxlp-buy-price,
.bxlp .bxlp-inner .bxlp-buy-price { font-size: 13px; color: var(--bxlp-label); margin: 4px 0 0; }
.bxlp-buy-note,
.bxlp-buy-assoc,
.bxlp .bxlp-inner .bxlp-buy-note,
.bxlp .bxlp-inner .bxlp-buy-assoc { font-size: 11.5px; color: var(--bxlp-muted); margin: 6px 0 0; line-height: 1.8; }

.bxlp-toc,
.bxlp .bxlp-inner .bxlp-toc { margin: 26px 0 0; background: var(--bxlp-card); border-radius: 12px; box-shadow: var(--bxlp-shadow); }
.bxlp-toc > summary,
.bxlp .bxlp-inner .bxlp-toc > summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 22px; font-size: 15px; font-weight: bold; color: var(--bxlp-ink); position: relative; }
.bxlp-toc > summary::-webkit-details-marker { display: none; }
.bxlp-toc > summary::after { content: ""; position: absolute; right: 22px; top: 24px; width: 9px; height: 9px; border-right: 2px solid var(--bxlp-muted); border-bottom: 2px solid var(--bxlp-muted); transform: rotate(45deg); }
.bxlp-toc[open] > summary::after { transform: rotate(-135deg); top: 28px; }
.bxlp-toc-body { padding: 0 22px 20px; }
.bxlp-ch,
.bxlp .bxlp-inner .bxlp-ch { margin: 0 0 18px; }
.bxlp-ch:last-child,
.bxlp .bxlp-inner .bxlp-ch:last-child { margin-bottom: 0; }
.bxlp-ch-t,
.bxlp .bxlp-inner .bxlp-ch-t { font-size: 14px; font-weight: bold; color: var(--bxlp-tone-d); margin: 0 0 6px; }
.bxlp-ch-list,
.bxlp .bxlp-inner .bxlp-ch-list { margin: 0; padding: 0; list-style: none; }
.bxlp-ch-list li,
.bxlp .bxlp-inner .bxlp-ch-list li { font-size: 13.5px; line-height: 1.9; color: var(--bxlp-label); padding: 0 0 0 16px; position: relative; }
.bxlp-ch-list li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--bxlp-hair); }

.bxlp-quote,
.bxlp .bxlp-inner .bxlp-quote { margin: 30px 0 0; background: var(--bxlp-card); border-left: 4px solid var(--bxlp-tone); border-radius: 0 12px 12px 0; padding: 24px 26px; box-shadow: var(--bxlp-shadow); }
.bxlp-quote-t,
.bxlp .bxlp-inner .bxlp-quote-t { font-size: 13px; font-weight: bold; color: var(--bxlp-tone-d); margin: 0 0 10px; }
.bxlp-quote blockquote,
.bxlp .bxlp-inner .bxlp-quote blockquote { margin: 0; padding: 0; border: none; background: none; }
.bxlp-quote blockquote p,
.bxlp .bxlp-inner .bxlp-quote blockquote p { font-size: 15px; line-height: 1.95; color: #4a5152; margin: 0 0 10px; }
.bxlp-quote blockquote p:last-child,
.bxlp .bxlp-inner .bxlp-quote blockquote p:last-child { margin-bottom: 0; }
.bxlp-quote figcaption,
.bxlp .bxlp-inner .bxlp-quote figcaption { font-size: 12px; color: var(--bxlp-muted); margin: 12px 0 0; }

@media (max-width: 900px) {
	.bxlp-book-fv-in { grid-template-columns: 1fr; gap: 28px; }
	.bxlp-book-cover,
.bxlp .bxlp-inner .bxlp-book-cover { max-width: 210px; margin: 0 auto; }
	.bxlp-book-fv .bxlp-book-lead h1 { font-size: 25px; }
	.bxlp-adfv .bxlp-inner > h1,
.bxlp .bxlp-inner .bxlp-adfv .bxlp-inner > h1 { font-size: 26px; }
	.bxlp-howto .wp-block-group,
.bxlp-howto > li { padding: 18px 18px 18px 56px; }
	.bxlp-cta a.bxlp-btn,
.bxlp-buy a.bxlp-btn,
.bxlp .bxlp-inner .bxlp-cta a.bxlp-btn,
.bxlp .bxlp-inner .bxlp-buy a.bxlp-btn { padding: 15px 28px; font-size: 15px; }
}

/* ---------- 本文中のリンク ---------- */
/* テーマ既定のリンク色は淡いベージュで、白地でもコントラストが足りない。
   LPの中だけ、そのページの色で塗り直す（2026-08-16 実測して追加） */
.bxlp-inner p:not(.bxlp-tlink) a,
.bxlp-inner li a,
.bxlp .bxlp-inner p:not(.bxlp-tlink) a,
.bxlp .bxlp-inner li a {
	color: var(--bxlp-tone-d); font-weight: bold; text-decoration: underline; text-underline-offset: 3px;
}
.bxlp-sec.is-band .bxlp-inner p a,
.bxlp .bxlp-sec.is-band .bxlp-inner p a { color: var(--bxlp-band-ink, #fff); }

/* ---------- 子テーマが !important で薄い灰色を指定している箇所 ---------- */
/* Amazonの表示義務の2行とPRの印。白地でコントラスト比3.15しかなく読みづらいため、
   こちらも !important で読める濃さにする（2026-08-16 実測して修正） */
.bxlp-buy-note,
.bxlp-buy-assoc,
.bxlp .bxlp-inner .bxlp-buy-note,
.bxlp .bxlp-inner .bxlp-buy-assoc { color: var(--bxlp-muted) !important; }
.bxlp-prbar .brandx-books-pr { color: var(--bxlp-label); }

/* =========================================================
   説明ページ（bx_guide の器）の骨格
   2026-08-16: 「上の方に変な空間があって、デザイン性がほぼない」というBAN指摘への対処。
   原因は、1行しか入っていないセクションに上下84pxずつの余白が付いていたこと。
   ========================================================= */

/* 最初のセクションはリード。余白を詰めて、本編との差をつける */
.bxlp-guide .bxlp-sec:first-of-type { padding: 40px 0 52px; }

/* リードの1文。本文より少し大きく、字間をゆったり */
.bxlp-lead,
.bxlp-sec .bxlp-inner > p.bxlp-lead,
.bxlp .bxlp-inner .bxlp-lead {
	font-size: 18px; line-height: 1.95; color: var(--bxlp-ink); margin: 0 0 4px;
}

/* 見出しの左に細い印を置く。文章だけのページに、目で追える手がかりを足す */
.bxlp-guide .bxlp-sec .bxlp-inner > h2 {
	position: relative; padding-left: 18px;
}
.bxlp-guide .bxlp-sec .bxlp-inner > h2::before {
	content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
	width: 4px; border-radius: 2px; background: var(--bxlp-tone);
}
.bxlp-guide .bxlp-sec.is-band .bxlp-inner > h2 { padding-left: 0; }
.bxlp-guide .bxlp-sec.is-band .bxlp-inner > h2::before { display: none; }
/* 小見出しも、印の分だけ左にそろえる */
.bxlp-guide .bxlp-sec .bxlp-inner > p.bxlp-kicker { padding-left: 18px; }
.bxlp-guide .bxlp-sec.is-band .bxlp-inner > p.bxlp-kicker { padding-left: 0; }

/* ---------- 目次 ---------- */
.bxlp-toclist {
	margin: 30px 0 0; background: var(--bxlp-card); border-radius: 14px;
	padding: 24px 28px 26px; box-shadow: var(--bxlp-shadow);
}
.bxlp-toclist > .ttl {
	font-size: 12px; font-weight: bold; letter-spacing: .12em;
	color: var(--bxlp-tone-d); margin: 0 0 14px;
}
.bxlp-toclist > ol {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px;
}
.bxlp-toclist > ol > li { margin: 0; padding: 0; list-style: none; }
.bxlp-toclist > ol > li > a {
	display: flex; gap: 12px; align-items: baseline; padding: 9px 0;
	font-size: 14.5px; line-height: 1.7; color: var(--bxlp-ink);
	text-decoration: none; border-bottom: 1px solid var(--bxlp-hair);
}
.bxlp-toclist > ol > li > a:hover { color: var(--bxlp-tone-d); }
.bxlp-toclist > ol > li > a > .no {
	flex: 0 0 auto; font-size: 11.5px; font-weight: bold; color: var(--bxlp-tone);
	letter-spacing: .04em;
}

/* 見出しに飛んだとき、固定ヘッダーの下に隠れないようにする */
.bxlp-sec[id] { scroll-margin-top: 90px; }

@media (max-width: 900px) {
	.bxlp-guide .bxlp-sec:first-of-type { padding: 28px 0 36px; }
	.bxlp-lead, .bxlp-sec .bxlp-inner > p.bxlp-lead { font-size: 16.5px; }
	.bxlp-toclist { padding: 20px 20px 22px; }
	.bxlp-toclist > ol { grid-template-columns: 1fr; gap: 0; }
	.bxlp-guide .bxlp-sec .bxlp-inner > h2 { padding-left: 14px; }
	.bxlp-guide .bxlp-sec .bxlp-inner > p.bxlp-kicker { padding-left: 14px; }
}

/* =========================================================
   セクションを画面いっぱいに広げる（2026-08-16）

   テーマの本文欄は左右に余白のある1080pxの列で、その中にセクションを置くと
   「白い箱が浮いている」見え方になり、LPらしさが出ない。
   負の余白で列の外へ広げ、中身だけを1080pxで中央に置く。
   overflow-x: clip は、vw とスクロールバーの差で横スクロールが出るのを防ぐため。
   ========================================================= */
.bxlp { overflow-x: clip; }
.bxlp-sec,
.bxlp-fv {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}