/* ダイヤモンドクラブ（page-diamondclub）専用スタイル。当ホテル固有のページなので子テーマに置く。
   共通の見た目（タイトル帯・問い合わせカード等）は親テーマ hilton が持つ。 */

/* オンライン入会 CTA（diamondclub-cta-online パターン）。
   背景は持たず、見出し→ボタン→補足の縦リズムだけで成立させる。 */
.dc-cta-online {
	margin: clamp(40px, 5vw, 56px) auto;
	padding: 0;
	text-align: center;
}
.dc-cta-online .dc-cta-online__title {
	margin: 0 0 20px;
	padding-top: 0;
	font-family: var(--wp--custom--brand-heading);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-primary, var(--aureate, #b89766));
	border-top: 0;
}
.dc-cta-online .dc-cta-online__title::before {
	content: none;
}
.dc-cta-online .dc-cta-online__actions { margin: 0; }
.dc-cta-online .wp-block-button { margin: 0; }

/* ダイヤモンドクラブ系ページのボタンは、オンライン入会（.dc-cta-online）の主導線だけ塗り、
   その他（詳しくはこちら／ホームページはこちら 等）はアウトライン（線＋透明地）に統一する。 */
body.page-template-page-diamondclub .lp-main .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--brand-primary, #002f61);
	border: 1px solid var(--wp--preset--color--brand-primary, #002f61);
	transition: background-color 0.2s ease, color 0.2s ease;
}
body.page-template-page-diamondclub .lp-main .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-primary, #002f61);
	color: #fff;
}
/* オンライン入会の主導線だけ塗り（サイズ・配色をまとめて指定。アウトライン既定より高い詳細度）。 */
body.page-template-page-diamondclub .lp-main .dc-cta-online .wp-block-button__link {
	min-width: 240px;
	padding: 14px 32px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	background: var(--wp--preset--color--brand-primary, #002f61);
	color: #fff;
	border-color: var(--wp--preset--color--brand-primary, #002f61);
}

/* オンライン入会 CTA 内の補足文（お電話でも承ります）。ボタンの下に薄く。 */
.dc-cta-online .dc-cta-online__phone-note {
	margin: 16px 0 0;
	font-family: var(--wp--custom--brand-body);
	font-size: 13px;
	color: var(--warm-grey, #6e6e6e);
}
/* オンライン入会 CTA の下に事務局カードのバンドを基準余白（56px）離して置く
   （blockGap 由来の 10px を上書き）。 */
.entry-content > .dc-cta-online + .contact-card { margin-top: 56px; }
/* 事務局カードのバンドがページ末尾のときは main／post-content 双方の下余白を詰め、
   地色のバンドをパンくず直前まで伸ばして白い隙間を作らない。 */
.single-main:has(> .wp-block-post-content > .contact-card:last-child),
.single-main > .wp-block-post-content:has(> .contact-card:last-child) { padding-bottom: 0; }

/* タイトル帯の h1（投稿タイトル）。lp.css は LP ヒーロー用に h1 を中央寄せにするが、
   diamondclub はタイトル帯（h1 ＋ ナビの flex space-between）レイアウトなので、
   他の詳細ページと同じく左端（full 幅の左ガター＝ヘッダーのロゴ位置）に揃える。 */
body.page-template-page-diamondclub .single-main .title-band h1.wp-block-post-title {
	text-align: left;
}

/* diamondclub のLP本文はタイトル帯の下に続くため、先頭エリアの区切り見出し(h2.alignfull)にも
   上罫線＋上下余白を出す（lp.css は先頭エリアの罫線を抑制するが、本ページ群はタイトル帯と本文を
   視覚的に区切りたい）。body のテンプレートクラスで詳細度を上げ lp.css の打ち消しに勝つ。 */
body.page-template-page-diamondclub .single-main .lp-area > h2.wp-block-heading.alignfull,
body.page-template-page-diamondclub .single-main .lp-area > .acf-innerblocks-container > h2.wp-block-heading.alignfull {
	position: relative;
	margin-top: var(--wp--preset--spacing--section, 56px);
	padding-top: var(--wp--preset--spacing--section, 56px);
}
body.page-template-page-diamondclub .single-main .lp-area > h2.wp-block-heading.alignfull::before,
body.page-template-page-diamondclub .single-main .lp-area > .acf-innerblocks-container > h2.wp-block-heading.alignfull::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	border-top: 1px solid var(--wp--preset--color--line, #ececec);
}
/* ただしページ内ナビ（lp-nav）直後の先頭エリア見出しは、ナビ帯自体が区切りを兼ねるため
   罫線・上余白を出さない（ナビとの間で区切りが二重になるのを防ぐ）。節間隔は padding-top が担う。 */
body.page-template-page-diamondclub .single-main .lp-nav + .lp-area > h2.wp-block-heading.alignfull,
body.page-template-page-diamondclub .single-main .lp-nav + .lp-area > .acf-innerblocks-container > h2.wp-block-heading.alignfull {
	margin-top: 0;
}
body.page-template-page-diamondclub .single-main .lp-nav + .lp-area > h2.wp-block-heading.alignfull::before,
body.page-template-page-diamondclub .single-main .lp-nav + .lp-area > .acf-innerblocks-container > h2.wp-block-heading.alignfull::before {
	content: none;
}

/* ===== クーポン（画像なしのカードデザイン） =====
   移行コンテンツは .present（アナウンス）・h4「Coupons」・<ul>(li>span.num＋枚数<b>) を保持。
   吹き出し/背景画像は使わず、白カード＋金色ナンバーバッジで体裁を整える。 */
body.page-template-page-diamondclub .present {
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-primary, #001e3a);
	margin: 0 0 4px;
}
/* 「Coupons」だけ大きな飾り見出しにする（直後がクーポンリスト＝span.num を含む ul の h4 のみ）。 */
body.page-template-page-diamondclub .lp-area h4.wp-block-heading:has(+ ul li span.num) {
	font-family: var(--wp--custom--brand-heading, "Times New Roman", serif);
	font-size: clamp(26px, 3.4vw, 38px);
	letter-spacing: 0.04em;
	color: var(--aureate, #c9a86a);
	text-align: center;
	margin: 0 auto 18px; /* 帯の最初の要素。上余白は帯の padding に任せる（吹き出しは重なってよい）。 */
}
/* その他の h4（参加ホテルの特典の「レストラン特典」「宿泊特典」「水月スパ＆フィットネス特典」、
   グループホテルの地方名など）は本文中の小見出し。控えめな太字・紺で出す。 */
body.page-template-page-diamondclub .lp-area h4.wp-block-heading:not(:has(+ ul li span.num)) {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--brand-primary, #001e3a);
	margin-top: 28px;   /* 上は広め（前の項目と離す） */
	margin-bottom: 4px; /* 下は詰める（直後の本文に近づける） */
}
/* ただし h3 直後の h4 は現状維持（くっつけたまま）。 */
body.page-template-page-diamondclub .lp-area h3.wp-block-heading + h4.wp-block-heading {
	margin-top: 16px;
}
body.page-template-page-diamondclub ul:has(> li > span.num) {
	list-style: none;
	margin: 0 auto 12px;
	padding: 0;
	max-width: 760px;
	/* flex＋wrap＋中央寄せ：2枚で1行、1枚だけのときは中央に来る（grid だと左寄せのままになる）。 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
}
body.page-template-page-diamondclub ul:has(> li > span.num) > li {
	flex: 1 1 300px;
	max-width: 364px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	background: #fff;
	border-radius: 6px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.12);
	padding: 8px 14px;
	font-size: 15px;
	line-height: 1.5;
}
body.page-template-page-diamondclub ul:has(> li > span.num) > li > span.num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-primary, #001e3a);
	color: var(--wp--preset--color--base, #fff);
	font-family: var(--wp--custom--brand-heading, "Times New Roman", serif);
	font-size: 16px;
	margin: 0;
}
body.page-template-page-diamondclub ul:has(> li > span.num) > li > b {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}
@media (max-width: 600px) {
	body.page-template-page-diamondclub ul:has(> li > span.num) { grid-template-columns: 1fr; }
}

/* ===== クーポン枠を左右いっぱいの背景帯にする ===== */
/* .coupons は alignfull（CSS で 1256 にキャップ）だが、帯はビューポート全幅にしたいので
   キャップを外して 100vw のフルブリードにし、地色を敷く。内側は読み幅で中央寄せ。 */
body.page-template-page-diamondclub .lp-area .coupons.alignfull {
	position: relative; /* 吹き出し(present)を absolute で重ねる基準 */
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* present 吹き出しを帯上端に半分重ねる。上半分が前セクションに被らない margin-top を確保。
	   帯の上下パディングは等しくし、Coupons は自身の margin-top で吹き出しの下に逃がす。 */
	margin-top: clamp(56px, 7vw, 72px);
	background: var(--wp--preset--color--surface, #f0e9e6);
	padding-block: clamp(44px, 5vw, 56px);
	padding-inline: 16px;
}
body.page-template-page-diamondclub .coupons > * {
	max-width: 760px;
	margin-inline: auto;
}
/* ボックス（クーポン帯・ホテルグループ）の最初の要素は mt なし・最後の要素は mb なし。
   余白はボックスの padding に一元化する（present 吹き出しは absolute なので対象外）。 */
body.page-template-page-diamondclub .coupons > :first-child:not(.present),
body.page-template-page-diamondclub .dc-hotel-group > :first-child { margin-top: 0; }
body.page-template-page-diamondclub .coupons > :last-child,
body.page-template-page-diamondclub .dc-hotel-group > :last-child { margin-bottom: 0; }

/* present（吹き出し）：タイトルではなく Coupons への吹き出し。左寄せに置き、
   三角は中央側（右寄り）に出して中央の Coupons へ向ける。紺地・白字。 */
body.page-template-page-diamondclub .coupons .present {
	/* 帯の上端に半分重ねて中央配置（上半分＝白地／下半分＝ベージュ帯）。三角は下の Coupons へ。 */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: fit-content;
	max-width: min(90%, 520px);
	padding: 12px 28px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand-primary, #002f61);
	color: var(--wp--preset--color--base, #fff);
	text-align: center;
	font-size: 13px;       /* 他の吹き出し(dc-sub)と同じ控えめなフォント */
	font-weight: 700;
	line-height: 1.7;
}
body.page-template-page-diamondclub .coupons .present b { font-size: inherit; } /* 強調しすぎない */
body.page-template-page-diamondclub .coupons .present::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%); /* Coupons の真上から下向きに */
	border: 13px solid transparent;
	border-top-color: var(--wp--preset--color--brand-primary, #002f61);
}

/* 詳細セクション（画像＋本文）は alignwide(1080) だが、本文は他の本文と同じ
   通常幅で読ませたいので、コンテンツ幅(760)に揃えて中央寄せにする。 */
body.page-template-page-diamondclub .lp-area .lp-section--media.alignwide {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

/* 本文(lp-section__body)の縦リズム。blockGap でマージンが潰れて見出しが詰まるのを防ぐ。
   各サブ特典の始まり（アイブロウ dc-sub もしくは単独の見出し h3）は大きめに離し、
   サブ特典内のアイブロウ→見出し・見出し→説明は詰める。段落・リストは標準間隔。 */
body.page-template-page-diamondclub .lp-section__body > * { margin-top: 14px; }
body.page-template-page-diamondclub .lp-section__body > .dc-sub,
body.page-template-page-diamondclub .lp-section__body > h3.wp-block-heading { margin-top: 36px; }
body.page-template-page-diamondclub .lp-section__body > .dc-sub + h3.wp-block-heading,
body.page-template-page-diamondclub .lp-section__body > h3.wp-block-heading + .dc-sub { margin-top: 4px; }
body.page-template-page-diamondclub .lp-section__body > :first-child { margin-top: 0; }

/* 見出し(h3)の体裁：プラン詳細ページの h3 と同じ「中央寄せ＋下に短い罫線(32px/1px・
   見出し色の60%)」に統一する。詳細セクション内・参加ホテルの特典など lp-area 内の h3 すべてに適用。 */
body.page-template-page-diamondclub .lp-area h3.wp-block-heading {
	position: relative;
	text-align: center;
	letter-spacing: 0.08em;
	padding-bottom: 16px;
}
body.page-template-page-diamondclub .lp-area h3.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 32px;
	height: 1px;
	background: currentColor; /* 罫線は h3 と同じ色 */
}

/* クーポン帯の直後の区切り見出し(h2)は、帯自体が区切りを担うので罫線と上マージンは消す。
   上パディング(pt)は本来の見出し内の余白なので残す。 */
body.page-template-page-diamondclub .single-main .lp-area > .coupons.alignfull + h2.wp-block-heading.alignfull {
	margin-top: 0;
}
body.page-template-page-diamondclub .single-main .lp-area > .coupons.alignfull + h2.wp-block-heading.alignfull::before {
	content: none;
}

/* ページ全体の行間：本文（段落・リスト）をゆったりにして可読性を上げる。 */
body.page-template-page-diamondclub .single-main .lp-area p,
body.page-template-page-diamondclub .single-main .lp-area .lp-section__body p,
body.page-template-page-diamondclub .single-main .lp-area li {
	line-height: 1.9;
}

/* dc-sub：見出しに添える説明文／アイブロウ。本文と混ざらないよう、中央寄せの
   小さな吹き出し（淡いベージュ地＋下向きの小さな三角）で装飾する。
   塗り紺の present 吹き出しとは別の、軽い吹き出しで差別化する。 */
body.page-template-page-diamondclub .dc-sub {
	position: relative;
	display: table;
	margin-inline: auto;   /* h3 の真上に中央配置 */
	margin-bottom: 16px;   /* 下向き三角ぶんの余白 */
	padding: 8px 20px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--wp--preset--color--brand-primary, #002f61);
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-primary, #002f61);
	border-radius: 10px;
}
/* 吹き出しのしっぽ：下端中央の真下向きアウトライン三角（外側=枠線色／内側=白を重ねて縁取り）。 */
body.page-template-page-diamondclub .dc-sub::before,
body.page-template-page-diamondclub .dc-sub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
}
body.page-template-page-diamondclub .dc-sub::before {
	margin-left: -9px;
	border-width: 9px 9px 0 9px;
	border-color: var(--wp--preset--color--brand-primary, #002f61) transparent transparent transparent;
}
body.page-template-page-diamondclub .dc-sub::after {
	margin-left: -8px;
	border-width: 8px 8px 0 8px;
	border-color: #fff transparent transparent transparent;
}

/* 参加ホテルの特典：ホテル写真＋名称の一覧を最大4列（SPは2列）の中央寄せに。 */
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(> li > h4):has(li img) {
	list-style: none;
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 16px;
}
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(> li > h4):has(li img) > li {
	margin: 0;
	flex: 0 1 calc(50% - 8px); /* 角丸ボックス内で2枚ずつ並べる */
	max-width: calc(50% - 8px);
	text-align: center;
}
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(> li > h4):has(li img) > li img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(> li > h4):has(li img) > li h4 {
	margin: 6px 0 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--brand-primary, #002f61);
}
@media (max-width: 600px) {
	body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(> li > h4):has(li img) > li { flex-basis: 45%; }
}

/* ◆ラベル（特典対象外メニュー等）は装飾しないプレーンな小見出し（左寄せ・太字）。 */
body.page-template-page-diamondclub .lp-area .dc-label {
	margin: 0 0 4px;
	font-weight: 700;
	color: var(--wp--preset--color--brand-primary, #002f61);
	text-align: left;
}

/* その他の特典：旧ボックス（li 内 img＋info）を最大3列の中央寄せカードに。
   タイトルは中央寄せ（罫線なし）、説明は左寄せ。 */
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(li .info) {
	list-style: none;
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 24px;
}
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(li .info) > li {
	margin: 0;
	flex: 0 1 216px;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
/* info を flex 縦並びにして、h3 前の空白テキストノードによる余分な行間を消す。
   説明は左右＋下に余白を取る（画像は左右いっぱい・上に密着）。 */
body.page-template-page-diamondclub .lp-area .info {
	width: 100%;
	padding: 4px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
body.page-template-page-diamondclub .lp-area .info h3 {
	margin: 0;
	padding: 0;
	text-align: center;
	letter-spacing: 0.04em;
	font-size: 16px;
	color: var(--wp--preset--color--brand-primary, #002f61);
}
body.page-template-page-diamondclub .lp-area .info h3::after { content: none; } /* その他の特典は罫線なし */
body.page-template-page-diamondclub .lp-area .info h3 a { color: inherit; text-decoration: none; }
body.page-template-page-diamondclub .lp-area .info p { margin: 0; text-align: left; font-size: 14px; }
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(li .info) .img { width: 100%; margin: 0; line-height: 0; font-size: 0; aspect-ratio: auto; overflow: visible; background: none; }
body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(li .info) .img img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
@media (max-width: 600px) {
	body.page-template-page-diamondclub .lp-area ul.wp-block-list:has(li .info) > li { flex-basis: 45%; }
}

/* 参加ホテルの特典：各ホテルグループを角丸ボーダーのボックスで囲む。 */
body.page-template-page-diamondclub .lp-area .dc-hotel-group {
	max-width: var(--wp--style--global--content-size, 760px);
	margin: 24px auto 0;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--wp--preset--color--line, #e2dad6);
	border-radius: 12px;
}
/* ボックス内の先頭 h3 は上の余白を詰める（ボックスの padding が余白を担う）。 */
body.page-template-page-diamondclub .lp-area .dc-hotel-group > h3.wp-block-heading:first-child { margin-top: 0; }
/* アイブロウ吹き出し（会員カードご提示で 等）は直後の特典見出し（レストラン特典 等）と
   一組に見せる：前のホテル名から大きく離し、見出しの真上に近づける（しっぽぶんの余白は残す）。
   見出しが左寄せなので吹き出しも左寄せにし、しっぽも左側に出す。 */
body.page-template-page-diamondclub .lp-area .dc-hotel-group .dc-sub { margin-top: 40px; margin-bottom: 12px; margin-left: 0; margin-right: auto; }
body.page-template-page-diamondclub .lp-area .dc-hotel-group .dc-sub + h4.wp-block-heading { margin-top: 0; }
body.page-template-page-diamondclub .lp-area .dc-hotel-group .dc-sub::before,
body.page-template-page-diamondclub .lp-area .dc-hotel-group .dc-sub::after { left: 32px; }

/* 料金表（特典利用例）の合計・小見出し行は、既定の serif 見出し体裁ではなくブランド sans にする。 */
body.page-template-page-diamondclub .wp-block-table table:has(tr > td:only-child) tr:has(> td:only-child) td {
	font-family: var(--wp--custom--brand-body);
}