/*
 * 掲載プラン紹介ページ（P06 page-subscribe）専用 CSS
 * 対象: plan-card のキャラ配置（plan-chara）と重なり順。カード基本装飾はテンプレートのインライン側。
 */

.plan-card .plan-chara { position: absolute; right: -14px; top: -54px; width: 172px; height: auto; opacity: 1; z-index: 3; pointer-events: none; }

.plan-card > *:not(.plan-chara):not(.plan-card__heart) { position: relative; z-index: 2; }

/*
 * ヒーロー帯（Figma「店舗オーナー様へ」28:9915 実値）
 * トップ流用の .top-owner-cta を使わず、本ページ専用スコープで定義。
 */
.subscribe-hero {
	background: linear-gradient(90deg, #fe9ec6 0%, #a66aaf 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 60px 16px;
}
.subscribe-hero__eyebrow {
	margin: 0;
	font-family: 'Futura', 'Century Gothic', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25em;
	text-shadow: 0 0 4px #8a2a9a;
}
.subscribe-hero__title {
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 40px;
	letter-spacing: -1.4px;
	text-shadow: 0 0 7px #9834a8;
}
.subscribe-hero__lead {
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 36px;
	letter-spacing: -0.98px;
	text-shadow: 0 0 5px #a32cb7;
}
@media (max-width: 640px) {
	.subscribe-hero__title { font-size: 28px; line-height: 1.25; }
	.subscribe-hero__lead  { font-size: 15px; line-height: 1.9; }
}

/*
 * PLAN見出し（画像タイトル＋左右の星ストリップ）
 * 星は TOP と共通の deco-strip-left/right.png を再利用（上書きなし＝TOP非破壊）。
 * style.css / top.css には手を入れず、本ページ専用スコープで定義。
 */
.subscribe-plan-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 64px;
	margin: 0 0 24px;
}
.subscribe-plan-head__en { display: block; width: auto; height: 22px; margin: 0 0 6px; position: relative; z-index: 1; }
.subscribe-plan-head__jp { margin: 0; line-height: 0; position: relative; z-index: 1; }
.subscribe-plan-head__jp img { display: block; width: auto; height: clamp(34px, 4.4vw, 45px); }
.subscribe-plan-head__strip { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(110px, 14vw, 200px); height: auto; z-index: 0; pointer-events: none; }
.subscribe-plan-head__strip--l { left: 0; }
.subscribe-plan-head__strip--r { right: 0; }
@media (max-width: 640px) {
	.subscribe-plan-head__strip { display: none; }
}

/* プラン説明ボックス（Figma 28:9847 実値） */
.subscribe-plan-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 23px;
	background: #fff;
	border: 2px solid #ff83bb;
	border-radius: 8px;
	box-shadow: 0 0 2.5px #a569af;
	padding: 20px 24px;
	margin-bottom: 24px;
	text-align: center;
}
.subscribe-plan-intro__lead {
	margin: 0;
	font-size: 16px;
	line-height: 27px;
	color: #b087b5;
	letter-spacing: -0.625px;
}
.subscribe-plan-intro__lead strong {
	font-size: 20px;
	font-weight: 700;
	color: #604b5e;
}
.subscribe-plan-intro__note {
	margin: 0;
	width: 100%;
	max-width: 1100px;
	background: #ffeef7;
	border-radius: 100px;
	padding: 10px 26px;
	font-size: 16px;
	line-height: 27px;
	color: #b087b5;
	letter-spacing: -0.8px;
}
.subscribe-plan-intro__note strong {
	font-weight: 700;
	color: #604b5e;
}
@media (max-width: 640px) {
	.subscribe-plan-intro__note { border-radius: 16px; }
}

/* 背景グラデ（Figma 28:9816）。.legal-bg は共有のため subscribe だけにスコープ上書き */
body.page-template-page-subscribe .legal-bg {
	background: linear-gradient(180deg, #FFE0EE 0%, #E9DCFF 50%, #FFCEE4 100%);
}

/* プランカード左上のハート装飾（Plan A） */
.plan-card__heart { position: absolute; top: -36px; left: -50px; width: 80px; height: auto; z-index: 4; pointer-events: none; }
.plan-card__heart--pink { width: 108px; left: -50px; top: -50px; }

/* ===== プランカード本体（Figma 28:9827 準拠） ===== */
.plan-card {
	background: #fff;
	border: 2px solid #ff83bb;
	border-radius: 10px;
	box-shadow: 0 0 2.5px #a569af;
	padding: 32px 26px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: visible;
}
.plan-card__pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	margin: 0 0 15px;
	background: #ffeef7;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 700;
	color: #e0558d;
	letter-spacing: -0.3px;
	white-space: nowrap;
}
.plan-card__title { margin: 0 0 14px; font-size: 27px; font-weight: 700; color: #483747; line-height: 1.3; }
.plan-card__price { margin: 0; font-size: 20px; font-weight: 700; color: #a569af; }
.plan-card__price-sub { margin: 4px 0 16px; font-size: 15px; font-weight: 700; color: #d9b6cf; }
.plan-card__desc { margin: 0 0 18px; font-size: 15px; font-weight: 700; color: #a569af; line-height: 1.6; }
.plan-card__feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.plan-card__feats li { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; color: #604b5e; line-height: 1.5; }
.plan-card__feats li::before { content: "\2713"; color: #ff7ab5; font-weight: 900; flex: 0 0 auto; }
.plan-card__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 45px;
	padding: 10px 20px;
	background: linear-gradient(90deg, #fbe8f8 0%, #eac9ff 100%);
	box-shadow: 0 0 2px #a569af;
	border-radius: 8px;
	color: #a569af;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.plan-card__cta::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #a569af; border-bottom: 2px solid #a569af; transform: rotate(-45deg); }

@media (max-width: 600px) {
	.plan-card .plan-chara { width: 128px; top: -40px; right: -8px; }
	.plan-card__heart { width: 104px; top: -36px; left: -30px; }
}

/* ===== A+B 合算バナー（Figma 28:9818 準拠） ===== */
.subscribe-ab {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 44px;
	background: #fff;
	border: 2px solid #ff83bb;
	border-radius: 8px;
	box-shadow: 0 0 2px rgba(0,0,0,0.25);
	padding: 12px 32px;
	padding-right: 250px;
	position: relative;
	overflow: visible;
}
.subscribe-ab__body { flex: 1 1 auto; min-width: 0; }
.subscribe-ab__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #604b5e; letter-spacing: -0.5px; }
.subscribe-ab__note { margin: 0; font-size: 14px; color: #b087b5; line-height: 25px; }
.subscribe-ab__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 300px;
	max-width: 100%;
	min-height: 45px;
	padding: 10px 20px;
	background: linear-gradient(90deg, #fbe8f8 0%, #eac9ff 100%);
	box-shadow: 0 0 2px #a569af;
	border-radius: 8px;
	color: #a569af;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.subscribe-ab__cta::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #a569af; border-bottom: 2px solid #a569af; transform: rotate(-45deg); }
.subscribe-ab__chara { position: absolute; right: 18px; bottom: 0px; width: 200px; height: auto; }
@media (max-width: 760px) {
	.subscribe-ab { flex-wrap: wrap; gap: 16px; padding-right: 24px; }
	.subscribe-ab__cta { width: 100%; order: 3; }
	.subscribe-ab__chara { display: none; }
}

/* ===== お支払い方法（Figma 28:9856 準拠） ===== */
.subscribe-pay { max-width: 1000px; margin: 0 auto 48px; }
.subscribe-pay-head {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 8px; min-height: 84px; margin: 0 0 28px;
}
.subscribe-pay-head__en { display: block; width: auto; height: 20px; margin: 0; position: relative; z-index: 1; }
.subscribe-pay-head__title { margin: 0; line-height: 0; position: relative; z-index: 1; }
.subscribe-pay-head__title img { display: block; width: auto; height: clamp(34px, 4.6vw, 45px); }
.subscribe-pay-head__sub { display: block; width: auto; height: clamp(20px, 2.6vw, 26px); margin: 0; position: relative; z-index: 1; }
.subscribe-pay-head__strip { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(120px, 18vw, 280px); height: auto; z-index: 0; pointer-events: none; }
.subscribe-pay-head__strip--l { left: 0; }
.subscribe-pay-head__strip--r { right: 0; }

.subscribe-pay__grid { display: grid; grid-template-columns: 1.4fr 1.4fr; gap: 46px; }
.pay-card { border-radius: 10px; box-shadow: 0 0 2px #b087b5; padding: 37px 36px; display: flex; flex-direction: column; gap: 12px; }
.pay-card--card { background: linear-gradient(111.85deg, #fee0ff 1.54%, #ebcafe 98.46%); }
.pay-card--bank { background: linear-gradient(113.55deg, #f9dbe8 1.54%, #fec2d8 98.46%); }
.pay-card__title { margin: 0; font-size: 23px; font-weight: 700; color: #333; }
.pay-card__lead { margin: 0; font-size: 15px; color: #b087b5; line-height: 25px; }
.pay-card__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-card__feats li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #60425e; line-height: 1.5; }
.pay-card__feats li::before { content: "\2713"; color: #e0558d; flex: 0 0 auto; text-shadow: none; }
.pay-card__note { margin: 4px 0 0; background: #fbe8f8; border-radius: 10px; padding: 10px 16px; font-size: 15px; color: #b087b5; line-height: 1.5; }
.pay-card__action { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fbe8f8; border-radius: 13px; padding: 12px 20px; font-size: 15px; color: #604b5e; text-decoration: none; }
.pay-card__action::after { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid #604b5e; border-bottom: 2px solid #604b5e; transform: rotate(45deg); margin-top: -4px; }
@media (max-width: 760px) {
	.subscribe-pay__grid { grid-template-columns: 1fr; gap: 24px; }
	.subscribe-pay-head__strip { display: none; }
}

/* ===== お申し込みの流れ（Figma 28:9867 / 28:9877） ===== */
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.flow-card { display: flex; flex-direction: column; gap: 8px; border-radius: 10px; box-shadow: 0 0 2.5px #604b5e; padding: 29px 10px; }
.flow-card--credit { background: linear-gradient(90deg, #fbddff, #e9c7fe); }
.flow-card--bank { background: linear-gradient(90deg, #f9d9e7, #fec6da); }
.flow-card__title { margin: 0; font-size: 20px; font-weight: 700; color: #333; }
.flow-card__steps { display: flex; flex-direction: column; gap: 3px; }
.flow-step { display: flex; align-items: stretch; }
.flow-step__num { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 42px; padding: 10px; font-family: 'Futura','Century Gothic',sans-serif; font-style: italic; font-weight: 500; font-size: 24px; color: #fff; }
.flow-step__body { flex: 1 1 0; min-width: 0; background: #fff; padding: 5px 10px; display: flex; flex-direction: column; }
.flow-step__t { margin: 0; font-size: 15px; font-weight: 700; color: #604b5e; }
.flow-step__d { margin: 0; font-size: 13px; color: #b087b5; letter-spacing: -0.5px; line-height: 1.45; }
.flow-card__note { margin: 0; font-size: 13px; color: #b087b5; letter-spacing: -0.46px; line-height: 1.45; }
.flow-card--credit .flow-step:nth-child(1) .flow-step__num { background: #f6d2ff; }
.flow-card--credit .flow-step:nth-child(2) .flow-step__num { background: #f6d2ff; }
.flow-card--credit .flow-step:nth-child(3) .flow-step__num { background: #eab7eb; }
.flow-card--credit .flow-step:nth-child(4) .flow-step__num { background: #e5a9e2; }
.flow-card--credit .flow-step:nth-child(5) .flow-step__num { background: #df9cd8; }
.flow-card--credit .flow-step:nth-child(6) .flow-step__num { background: #d98ece; }
.flow-card--bank .flow-step:nth-child(1) .flow-step__num { background: #ffc2d8; }
.flow-card--bank .flow-step:nth-child(2) .flow-step__num { background: #ffb7d3; }
.flow-card--bank .flow-step:nth-child(3) .flow-step__num { background: #ffadce; }
.flow-card--bank .flow-step:nth-child(4) .flow-step__num { background: #ffa3ca; }
.flow-card--bank .flow-step:nth-child(5) .flow-step__num { background: #ff98c5; }
.flow-card--bank .flow-step:nth-child(6) .flow-step__num { background: #ff8ec0; }
.flow-card--bank .flow-step:nth-child(7) .flow-step__num { background: #ff83bb; }
@media (max-width: 760px) { .flow-grid { grid-template-columns: 1fr; gap: 20px; } }


/* ===== 解約について（Figma 28:9889 見出し / 28:9890 本文） ===== */
.subscribe-cancel { max-width: 1000px; margin: 0 auto 48px; }
.cancel-box {
	max-width: 900px; margin: 0 auto;
	background: #fff; border: 2px solid #ff83bb; border-radius: 8px;
	box-shadow: 0 0 2.5px #a569af;
	padding: 24px 40px;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
	text-align: center;
}
.cancel-box__text { display: flex; flex-direction: column; gap: 4px; }
.cancel-box__text p { margin: 0; font-size: 15px; color: #b087b5; line-height: 1.85; letter-spacing: 0.02em; }
.cancel-box__text strong { font-size: 16px; font-weight: 700; color: #60425e; }
.cancel-box__actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.cancel-box__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-width: 300px; height: 45px; padding: 0 20px; box-sizing: border-box;
	background: #e0558d; color: #fff; font-size: 16px; font-weight: 700;
	text-decoration: none; border-radius: 8px;
}
.cancel-box__btn::after {
	content: ""; width: 8px; height: 8px; flex: 0 0 auto;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
.cancel-box__note { font-size: 15px; color: #ff83bb; text-decoration: none; line-height: 1.5; }
.cancel-box__note:hover { text-decoration: underline; }
@media (max-width: 760px) {
	.cancel-box { padding: 20px 18px; }
	.cancel-box__actions { flex-direction: column; gap: 14px; }
	.cancel-box__btn { min-width: 0; width: 100%; }
}


/* ===== まずはご相談から CTA帯（Figma 28:9895） ===== */
.subscribe-cta {
	background: linear-gradient(90deg, #ffc2d8 0%, #e9c7ff 100%);
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 20px; padding: 60px 16px;
}
.subscribe-cta__title { margin: 0; font-size: 30px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #b087b5; letter-spacing: -0.015em; line-height: 1.3; }
.subscribe-cta__lead { margin: 0; font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #b087b5; letter-spacing: -0.015em; line-height: 1.6; }
.subscribe-cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 43px; padding: 0 20px; box-sizing: border-box;
	background: #fff; border-radius: 8px; box-shadow: 0 0 2px #a569af;
	color: #ff83bb; font-size: 16px; font-weight: 700; text-decoration: none;
}
.subscribe-cta__btn::after {
	content: ""; width: 8px; height: 8px; flex: 0 0 auto;
	border-right: 2px solid #ff83bb; border-bottom: 2px solid #ff83bb;
	transform: rotate(-45deg);
}
@media (max-width: 760px) {
	.subscribe-cta__title { font-size: 24px; }
}