/**
 * FANZA Post Tools — フロント（生成記事）用スタイル。
 * 白基調＋マゼンタ赤アクセント。.fpt-article でスコープし、テーマと干渉しない。
 * 価格ボックスは .fpt-price 単体で成立（本文外に貼っても崩れない）。
 */

.fpt-article,
.fpt-price {
	--fpt-accent: #d83a4a;
	--fpt-accent-ink: #a3222e;
	--fpt-ink: #1a1a1a;
	--fpt-sub: #555555;
	--fpt-muted: #8a8a8a;
	--fpt-faint: #a0a0a0;
	--fpt-line: #ececec;
	--fpt-panel: #f6f6f7;
}

/* ---------- 記事ラッパー ---------- */
.fpt-article {
	color: var(--fpt-ink);
	line-height: 1.8;
	word-break: break-word;
}
.fpt-article > * {
	margin-top: 0;
}
.fpt-article > * + * {
	margin-top: 1.6em;
}

/* 見出し（スコープ内でテーマ装飾を強制上書きして統一・ラフ準拠のプレーン） */
.fpt-article h2,
.fpt-article h3 {
	margin: 1.6em 0 0.4em;
	color: var(--fpt-ink) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.fpt-article h2::before,
.fpt-article h2::after,
.fpt-article h3::before,
.fpt-article h3::after {
	content: none !important;
	display: none !important;
}
.fpt-article h2 {
	font-size: 1.4em !important;
}
.fpt-article h3 {
	font-size: 1.2em !important;
}

/* 広告表示 */
.fpt-article .fpt-ad-notice {
	font-size: 0.8em;
	color: var(--fpt-muted);
}

/* 導入文 */
.fpt-article .fpt-intro a {
	color: var(--fpt-accent);
	text-decoration: underline;
}

/* パッケージ画像 */
.fpt-article .fpt-package {
	text-align: center;
}
.fpt-article .fpt-package img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.1 );
}

/* 購入ボタン */
.fpt-article .fpt-buy-button {
	text-align: center;
	margin-bottom: 0.4em;
}
.fpt-article .fpt-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 20px;
	background: var(--fpt-accent);
	color: #ffffff;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	transition: filter 0.15s ease, transform 0.05s ease;
}
.fpt-article .fpt-btn:hover {
	color: #ffffff;
	filter: brightness( 0.92 );
}
.fpt-article .fpt-btn:active {
	transform: translateY( 1px );
}
.fpt-article .fpt-buy-micro {
	margin-top: 8px;
	font-size: 0.8em;
	color: var(--fpt-muted);
	text-align: center;
}

/* 作品プレビュー：サンプル（1カラム縦積み） */
.fpt-article .fpt-sample {
	margin: 0 0 14px;
	text-align: center;
}
.fpt-article .fpt-sample img {
	max-width: 100%;
	max-height: 90vh;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.07 );
}
/* 作品プレビュー：試し読み（ブックス） */
.fpt-article .fpt-tachiyomi a {
	color: var(--fpt-accent);
	font-weight: 600;
}

/* 作品情報 */
.fpt-article .fpt-product-info {
	margin: 0;
	padding: 0;
	list-style: none;
}
.fpt-article .fpt-product-info li {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 2px;
	border-bottom: 1px solid var(--fpt-line);
	font-size: 0.95em;
}
.fpt-article .fpt-product-info li strong {
	color: var(--fpt-sub);
	font-weight: 600;
	white-space: nowrap;
}
.fpt-article .fpt-product-info a {
	color: var(--fpt-accent);
	text-decoration: none;
}
.fpt-article .fpt-product-info a:hover {
	text-decoration: underline;
}

/* 手動枠：あらすじ・レビューは薄グレー背景（関連記事・画像は対象外） */
.fpt-article .fpt-manual-synopsis,
.fpt-article .fpt-manual-review {
	padding: 18px 20px;
	background: var(--fpt-panel);
	border: 1px solid var(--fpt-line);
	border-radius: 10px;
}
/* 枠内の段落余白を正規化（Enterで段落が増えても枠が崩れないように） */
.fpt-article .fpt-manual-synopsis > :first-child,
.fpt-article .fpt-manual-review > :first-child {
	margin-top: 0;
}
.fpt-article .fpt-manual-synopsis > :last-child,
.fpt-article .fpt-manual-review > :last-child {
	margin-bottom: 0;
}
.fpt-article .fpt-manual-synopsis > * + *,
.fpt-article .fpt-manual-review > * + * {
	margin-top: 1em;
}

/* クレジット */
.fpt-article .fpt-credit {
	text-align: center;
	opacity: 0.8;
}

/* ---------- 価格ボックス（本文外でも成立） ---------- */
.fpt-price {
	display: flex;
	flex-direction: column;
	max-width: 320px;
	margin: 1.6em 0;
	overflow: hidden;
	color: var(--fpt-ink);
	font-size: 13px;
	line-height: 1.45;
	border: 1px solid var(--fpt-line);
	border-radius: 12px;
}

/* キャンペーン帯（赤・全幅） */
.fpt-price .fpt-price-campaign {
	order: 1;
	padding: 8px 10px;
	background: var(--fpt-accent);
	color: #ffffff;
	font-size: 1.0em;
	font-weight: 700;
	text-align: center;
}
.fpt-price .fpt-price-campaign::after {
	content: " キャンペーン中！";
}

/* 期限（画像準拠：左寄せ・グレー） */
.fpt-price .fpt-price-until {
	order: 2;
	padding: 8px 15px 0;
	color: var(--fpt-sub);
	font-size: 0.9em;
	text-align: left;
}

/* 今の値段（ラベル左・値右） */
.fpt-price .fpt-price-now {
	order: 3;
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 15px 3px;
	color: var(--fpt-accent);
	font-size: 1.9em;
	font-weight: 700;
}
.fpt-price .fpt-price-now::before {
	content: "販売価格";
	color: var(--fpt-sub);
	font-size: 0.55em;
	font-weight: 400;
}
.fpt-price:has( .fpt-price-campaign ) .fpt-price-now::before {
	content: "キャンペーン価格";
}

/* 金額の「円」だけ小さく（画像準拠） */
.fpt-price .fpt-price-unit {
	margin-left: 2px;
	font-size: 0.5em;
	font-weight: 400;
}
.fpt-price .fpt-price-list .fpt-price-unit {
	font-size: 0.9em;
}

/* 通常価格（打消し） */
.fpt-price .fpt-price-list {
	order: 4;
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	padding: 0 15px 10px;
	color: var(--fpt-muted);
	font-size: 0.92em;
}
.fpt-price .fpt-price-list::before {
	content: "通常価格";
	color: var(--fpt-muted);
}
.fpt-price .fpt-price-list del {
	text-decoration: line-through;
}

/* 割引率バッジ */
.fpt-price .fpt-price-off {
	order: 5;
	align-self: flex-end;
	margin: 0 15px 8px;
	padding: 2px 8px;
	background: #fbe3e5;
	color: #a3222e;
	font-size: 0.8em;
	font-weight: 700;
	border-radius: 6px;
}

/* 但し書き */
.fpt-price .fpt-price-note {
	order: 6;
	padding: 5px 15px 12px;
	color: var(--fpt-faint);
	font-size: 0.72em;
	line-height: 1.5;
}

/* ---------- スマホ用 追従CTA（frontend.js が生成） ---------- */
.fpt-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	display: none;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	padding-bottom: calc( 10px + env( safe-area-inset-bottom, 0px ) );
	background: rgba( 255, 255, 255, 0.96 );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.12 );
}
.fpt-sticky-cta.is-visible {
	display: flex;
}
.fpt-sticky-cta .fpt-sticky-btn {
	flex: 1 1 auto;
	padding: 13px 16px;
	background: var(--fpt-accent, #d83a4a);
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
}
.fpt-sticky-cta .fpt-sticky-btn:hover {
	color: #ffffff;
}
.fpt-sticky-cta .fpt-sticky-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	color: #888888;
	font-size: 24px;
	line-height: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
}
@media ( min-width: 601px ) {
	.fpt-sticky-cta {
		display: none !important;
	}
}

/* ---------- 90%OFFクーポンバナー（FANZAブックス初回購入限定） ---------- */
.fpt-article .fpt-coupon {
	text-align: center;
	margin-bottom: 0.4em;
}
.fpt-article .fpt-coupon-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 6px, 2.4vw, 18px );
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	overflow: hidden;
	background: linear-gradient( 180deg, #8ec63f 0%, #63ac27 100% );
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba( 76, 138, 30, 0.35 );
	color: #ffffff;
	text-decoration: none;
	line-height: 1.1;
	transition: filter 0.15s ease, transform 0.05s ease;
}
/* 背景の本アイコン模様（薄く敷く） */
.fpt-article .fpt-coupon-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M24 15c-4-2.4-8-2.4-12 0v18c4-2.4 8-2.4 12 0z'/%3E%3Cpath d='M24 15c4-2.4 8-2.4 12 0v18c-4-2.4-8-2.4-12 0z'/%3E%3C/g%3E%3C/svg%3E" );
	background-size: 44px 44px;
	opacity: 0.16;
	pointer-events: none;
}
.fpt-article .fpt-coupon-banner > * {
	position: relative;
	z-index: 1;
}
.fpt-article .fpt-coupon-banner:hover {
	color: #ffffff;
	filter: brightness( 1.05 );
}
.fpt-article .fpt-coupon-banner:active {
	transform: translateY( 1px );
}

/* 初回購入限定（左右を斜線で挟む） */
.fpt-article .fpt-coupon-lead {
	font-size: clamp( 11px, 2.6vw, 16px );
	font-weight: 700;
	white-space: nowrap;
	text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.12 );
}
.fpt-article .fpt-coupon-lead::before {
	content: "//";
	display: inline-block;
	transform: scaleX( -1 );
	margin-right: 5px;
	font-style: italic;
	opacity: 0.92;
}
.fpt-article .fpt-coupon-lead::after {
	content: "//";
	margin-left: 5px;
	font-style: italic;
	opacity: 0.92;
}

/* FANZAブックス 白ピル */
.fpt-article .fpt-coupon-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px 9px;
	background: #ffffff;
	border-radius: 7px;
	line-height: 1.05;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
}
.fpt-article .fpt-coupon-brand b {
	color: #e5006d;
	font-size: clamp( 11px, 2.4vw, 15px );
	font-weight: 800;
	letter-spacing: 0.02em;
}
.fpt-article .fpt-coupon-brand i {
	color: #333333;
	font-size: clamp( 8px, 1.7vw, 10px );
	font-style: normal;
	font-weight: 700;
}

/* 90%OFF クーポン 本体 */
.fpt-article .fpt-coupon-body {
	display: inline-flex;
	align-items: center;
	gap: clamp( 3px, 1.2vw, 8px );
}
.fpt-article .fpt-coupon-off {
	display: inline-flex;
	align-items: baseline;
	color: #fff100;
	font-style: italic;
	font-weight: 900;
	font-size: clamp( 15px, 4.6vw, 24px );
	line-height: 0.9;
	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.18 );
}
.fpt-article .fpt-coupon-off b {
	font-size: clamp( 28px, 8.6vw, 48px );
	font-weight: 900;
}
.fpt-article .fpt-coupon-off i {
	font-size: clamp( 16px, 5vw, 26px );
	font-style: italic;
	font-weight: 900;
}
.fpt-article .fpt-coupon-word {
	color: #ffffff;
	font-weight: 900;
	font-size: clamp( 14px, 3.8vw, 22px );
	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.18 );
}

/* 値引き上限 2,000円 */
.fpt-article .fpt-coupon-cap {
	align-self: flex-end;
	padding-bottom: 3px;
	color: #ffffff;
	font-weight: 700;
	font-size: clamp( 9px, 1.8vw, 11px );
	white-space: nowrap;
}

/* スマホ：1行だと5要素が詰まって崩れるので段組みに。
   1段目=初回購入限定＋FANZAブックス、2段目=90%OFFクーポン（主役）、3段目=上限。 */
@media ( max-width: 600px ) {
	.fpt-article .fpt-coupon-banner {
		flex-wrap: wrap;
		gap: 4px 8px;
		padding: 12px 10px;
	}
	.fpt-article .fpt-coupon-body {
		flex: 1 0 100%;
		justify-content: center;
		gap: 6px;
	}
	.fpt-article .fpt-coupon-off b {
		font-size: 40px;
	}
	.fpt-article .fpt-coupon-cap {
		flex: 1 0 100%;
		align-self: center;
		padding-bottom: 0;
		text-align: center;
	}
}