@charset "utf-8";
/* ==========================================================================
   リード文の PR 広告カード（.almond-lead-pr）SEOP-169
   Shortcoder の HTML（例 [sc name="menseminal-ooita-pr"]）に付ける。スマホ向けのデザイン：幅 100%・最大 390px、PC は中央に置く。
   バナー画像（img の src）・公式リンク（a の href）が空のときは、その部分ごと出さない。
   計測は js/almond-lead-pr.js（カードの data-pr-name、部品の data-lead-pr を見る）。
   GUIDE の .acg-main a・table の指定に勝つよう、リンクと表は要素名付き（a.〜・table.〜）で書く（後から読むので同じ詳細度なら勝つ）。
   ========================================================================== */

.almond-lead-pr {
	--almond-lead-pr-green: #18543c;
	--almond-lead-pr-green-dark: #10402d;
	--almond-lead-pr-ink: #18382e;
	--almond-lead-pr-muted: #56635b;
	--almond-lead-pr-tint: #eef4ef;
	--almond-lead-pr-line: #d1dcd5;
	--almond-lead-pr-pad: 20px;

	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 390px;
	margin: 30px auto;
	padding: var(--almond-lead-pr-pad);
	border: 1px solid var(--almond-lead-pr-line);
	border-top: 3px solid var(--almond-lead-pr-green);
	background: #fff;
	color: var(--almond-lead-pr-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
}

.almond-lead-pr *,
.almond-lead-pr *::before,
.almond-lead-pr *::after {
	box-sizing: border-box;
}

.almond-lead-pr p {
	margin: 0;
}

@media (max-width: 360px) {
	.almond-lead-pr {
		--almond-lead-pr-pad: 16px;
	}
}

/* URL・画像が入っていない部品は出さない */
.almond-lead-pr a:is([href=""], :not([href])),
.almond-lead-pr__banner:has(img:is([src=""], :not([src]))) {
	display: none;
}

/* ---------- PR 表示・院名・最寄駅 ---------- */
.almond-lead-pr__label {
	color: var(--almond-lead-pr-muted);
	font-size: 11px;
	line-height: 20px;
}

.almond-lead-pr .almond-lead-pr__name {
	margin-top: 9px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.almond-lead-pr .almond-lead-pr__clinic {
	margin-top: 9px;
	padding-left: 6px;
	color: var(--almond-lead-pr-muted);
	font-size: 12px;
	line-height: 1.5;
}

.almond-lead-pr__sep {
	display: inline-block;
	width: 1px;
	height: 1em;
	margin: 0 6px;
	background: var(--almond-lead-pr-line);
	vertical-align: -.15em;
}

/* ---------- バナー：324×88（デザインの枠）の比率で高さ 72〜100px。画像は切らずに枠に収める ----------
   高さはカードの内側の幅（100cqi）から出す。aspect-ratio＋min-height だと、狭い画面で min-height が幅の最小値に変わって枠からはみ出す */
a.almond-lead-pr__banner {
	display: block;
	height: 88px;
	height: clamp(72px, 100cqi * 88 / 324, 100px);
	margin-top: 17px;
}

.almond-lead-pr__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- 主プランの料金（折りたたまない） ---------- */
.almond-lead-pr__price {
	margin-top: 14px;
	padding: 17px 14px 16px;
	background: var(--almond-lead-pr-tint);
}

.almond-lead-pr__plan {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.almond-lead-pr .almond-lead-pr__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 5px;
	margin-top: 7px;
	line-height: 1.2;
}

.almond-lead-pr__amount-label,
.almond-lead-pr__amount-tax {
	font-size: 12px;
}

.almond-lead-pr__amount-value {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -.03em;
}

.almond-lead-pr__amount-unit {
	font-size: 18px;
	font-weight: 700;
}

.almond-lead-pr__price-note {
	color: var(--almond-lead-pr-muted);
	font-size: 12px;
	line-height: 1.8;
}

.almond-lead-pr .almond-lead-pr__amount + .almond-lead-pr__price-note {
	margin-top: 9px;
}

/* ---------- 公式サイトへのボタン ---------- */
a.almond-lead-pr__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin-top: 16px;
	padding: 8px 16px;
	background: var(--almond-lead-pr-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s;
}

a.almond-lead-pr__cta:hover {
	background: var(--almond-lead-pr-green-dark);
	color: #fff;
}

.almond-lead-pr .almond-lead-pr__cta-note {
	margin-top: 8px;
	color: var(--almond-lead-pr-muted);
	font-size: 11px;
	text-align: center;
}

/* ---------- 開閉（プラン別料金・場所とアクセス）：初期は閉じる・同時に開ける ---------- */
.almond-lead-pr__more {
	margin-top: 14px;
	border-bottom: 1px solid var(--almond-lead-pr-line);
}

.almond-lead-pr__acc {
	border-top: 1px solid var(--almond-lead-pr-line);
}

.almond-lead-pr__acc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 55px;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
}

.almond-lead-pr__acc-head::-webkit-details-marker {
	display: none;
}

/* ＋／− は線で描く（書体で太さが変わらないように） */
.almond-lead-pr__acc-icon {
	position: relative;
	flex: none;
	width: 16px;
	height: 13px;
}

.almond-lead-pr__acc-icon::before,
.almond-lead-pr__acc-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
}

/* 横線（＋は幅 13px、開いたときの − は幅 9px で右寄り） */
.almond-lead-pr__acc-icon::before {
	top: 5.9px;
	left: .5px;
	width: 13px;
	height: 1.2px;
}

/* 縦線 */
.almond-lead-pr__acc-icon::after {
	top: 0;
	left: 6.4px;
	width: 1.2px;
	height: 13px;
}

.almond-lead-pr__acc[open] .almond-lead-pr__acc-icon::before {
	left: 6.5px;
	width: 9px;
}

.almond-lead-pr__acc[open] .almond-lead-pr__acc-icon::after {
	display: none;
}

.almond-lead-pr__acc-body {
	padding-bottom: 29.5px;
}

/* 公式リンクが空（出さない）ときは、リンクの分の余白も詰める。場所・アクセスは表の最後の線を開閉の線と兼ねる */
.almond-lead-pr__acc-body:has(> a.almond-lead-pr__link:is([href=""], :not([href]))) {
	padding-bottom: 18px;
}

.almond-lead-pr__acc-body:has(> .almond-lead-pr__info + a.almond-lead-pr__link:is([href=""], :not([href]))) {
	padding-bottom: 0;
}

.almond-lead-pr__info:has(+ a.almond-lead-pr__link:is([href=""], :not([href]))) > div:last-child {
	border-bottom: 0;
}

/* プラン別料金の表 */
table.almond-lead-pr__table {
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 12px;
	line-height: 1.6;
}

.almond-lead-pr__table :is(th, td) {
	padding: 9px 6px;
	border: 0;
	border-bottom: 1px solid var(--almond-lead-pr-line);
	background: none;
	color: var(--almond-lead-pr-ink);
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

/* 料金の行はデザインどおり黒 */
.almond-lead-pr__table tbody :is(th, td) {
	color: #000;
}

.almond-lead-pr__table thead th {
	padding: 9.5px 6px;
	border-bottom: 0;
	background: var(--almond-lead-pr-tint);
	color: var(--almond-lead-pr-muted);
	font-size: 11px;
	font-weight: 700;
}

.almond-lead-pr__table :is(th, td):nth-child(2) {
	width: 52px;
}

.almond-lead-pr__table :is(th, td):nth-child(3) {
	width: 76px;
	text-align: right;
}

.almond-lead-pr .almond-lead-pr__note {
	margin-top: 9px;
	color: var(--almond-lead-pr-muted);
	font-size: 11px;
	line-height: 1.9;
}

/* 場所・アクセスの表 */
.almond-lead-pr__info {
	margin: 0;
	font-size: 12px;
	line-height: 1.85;
}

.almond-lead-pr__info > div {
	display: grid;
	grid-template-columns: 62px 1fr;
	padding: 9.5px 0;
	border-bottom: 1px solid var(--almond-lead-pr-line);
}

.almond-lead-pr__info > div:first-child {
	padding-top: 9px;
}

.almond-lead-pr__info dt {
	color: var(--almond-lead-pr-muted);
	font-weight: 400;
}

.almond-lead-pr__info dd {
	margin: 0;
}

/* 公式サイトへのテキストリンク（URL が空なら出さない） */
a.almond-lead-pr__link {
	display: table;
	margin-top: 11px;
	color: var(--almond-lead-pr-green);
	font-size: 12px;
	line-height: 1.6;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a.almond-lead-pr__link:hover {
	color: var(--almond-lead-pr-green-dark);
	text-decoration: none;
}

.almond-lead-pr__info + a.almond-lead-pr__link {
	margin-top: 12px;
}

/* ---------- 料金確認日・注意事項 ---------- */
.almond-lead-pr__notes {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--almond-lead-pr-line);
	color: var(--almond-lead-pr-muted);
	font-size: 11px;
	line-height: 1.85;
}

.almond-lead-pr .almond-lead-pr__notes p + p {
	margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
	a.almond-lead-pr__cta {
		transition: none;
	}
}