/* 博多ぶらり 共通スタイル(駐車場/観光地/飲食店で共有)
 * Cocoon Childのfunctions.phpからenqueueして読み込む
 */

.hb-article {
	max-width: 720px;
	margin: 0 auto;
}

/* Cocoon標準の.entry-title(駐車場等の旧post型記事で使用、font-size:26px)とサイズを揃える。
 * CPT移行済み記事(spot/restaurant型、single-spot.php等)はこのhb-titleを使うため、
 * 揃えないと記事によってタイトルの大きさがバラつく(2026-07-23、ユーザー指摘で判明)。
 */
.hb-title {
	font-size: 26px;
	line-height: 1.3;
	margin-top: 1.2em;
	margin-bottom: 0.6em;
}

.hb-eyecatch img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.hb-body {
	margin: 2em 0;
	line-height: 1.9;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}

.hb-section {
	margin: 3em 0;
	padding: 0 0 2.2em;
	background: transparent;
	border: none;
	border-bottom: 1px solid #ececec;
	box-shadow: none;
}

.hb-section:last-of-type {
	border-bottom: none;
}

/* Cocoon標準の.article h2ボックス(padding/背景色/角丸)と同じ見た目を、
 * <h2>ではないタグ(ACF情報ブロックの見出し。role="heading"のdiv)でも再現するための指定。
 * Cocoon本体の.article h2および.is-count-on #content-in .article h2は詳細度が
 * .hb-section-title単体より高く(font-size/padding-left等が上書きされる)、
 * また見出しを明朝体にするテーマ設定(is-main-serif)がfont-familyを本文と不揃いにするため、
 * !importantとfont-family明示で確実に上書きする。
 * (2026-07-30、縦線と見出しの間隔が詰まる・フォントが不統一とのご指摘により修正)
 */
.hb-section-title {
	position: relative !important;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	padding: 0 0 0 24px !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	margin: 0 0 1.2em !important;
	letter-spacing: 0.02em !important;
}

/* 本文側の<h2>を、ACFセクション見出し(.hb-section-title)と同じ見た目に統一する。
 * 旧post型記事もfunctions.phpのthe_contentフィルターで本文全体が.hb-bodyに
 * 統一ラップされる(2026-07-30)ため、.hb-body h2のみで新CPT・旧post型・まとめ記事の
 * 3パターンすべてをカバーできる。
 * Cocoon本体のh2スタイルが優先されて見た目が揃わなかったため、!importantで明示的に上書きする。
 * (2026-07-23、CPT移行記事でセクション見出しと本文見出しの体裁が違うとのご指摘により追加)
 */
.hb-body h2 {
	position: relative !important;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	padding: 0 0 0 24px !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	margin: 2.6em 0 1.2em !important;
	letter-spacing: 0.02em !important;
}

/* h2左のアクセント線を、border-leftではなく::beforeの絶対配置バーに変更し、
 * 文字の上下にわずかにはみ出させる(2026-07-30、「線を上下に少し長く」というご要望により)。
 * .hb-section-title(ACF情報ブロック見出し)と本文<h2>3パターンすべてに共通。
 * top/bottomは見出しボックスの中心に対して上下対称(0.35em/0.35em)にし、線の中心が
 * 見出しテキストの中心と揃うようにしている(2026-07-30、上下非対称[0.18em/0.52em]だと
 * 線がテキストよりわずかに下にずれて見えるとのご指摘により修正)。
 * em単位はこの::before自身のfont-sizeを基準に計算されるため、Cocoon本体が
 * h2.wp-block-heading::beforeにfont-size:36pxを裏で当てているパターン(まとめ記事)
 * だけ0.35em=12.6pxとなり意図(7px)よりズレて見えていた。px固定値にして解消する
 * (2026-07-30、まとめ記事のみ見出しがズレるとのご指摘で判明)。
 */
.hb-section-title::before,
.hb-body h2::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: -7px !important;
	bottom: -7px !important;
	width: 4px !important;
	background: #2c6e91 !important;
	border-radius: 2px !important;
}

/* 記事本文と「関連記事」系セクションの間に区切り線を入れる */
.hb-related {
	border-top: 1px solid #cccccc;
	padding-top: 2em;
}

.hb-info-table {
	width: 100%;
	border-collapse: collapse;
}

/* Cocoon標準の table tr:nth-of-type(2n+1) による縞模様(奇数行への背景色)を打ち消し、白のみに統一する。
 * (詳細度 .hb-info-table tr:nth-of-type(2n+1) の方がCocoon側の table tr:nth-of-type(2n+1) より高いため上書きできる)
 */
.hb-info-table tr:nth-of-type(2n+1) {
	background-color: #fff;
}

.hb-info-table th,
.hb-info-table td {
	padding: 0.9em 1em;
	border-bottom: 1px solid var(--hb-border, #eceff1);
	text-align: left;
	vertical-align: top;
	font-size: 1.05rem;
	line-height: 1.7;
}

.hb-info-table th {
	width: 7.5em;
	background: transparent;
	color: #374151;
	font-weight: 700;
	white-space: nowrap;
}

/* 「料金(平日・土日祝共通)」等、括弧書きが長い見出しはth幅を圧迫しtdの内容が狭くなるため、
 * PHP側(functions.php/single-parking.php)で括弧部分を<span class="hb-th-note">に分けて改行し、
 * スマホでは括弧部分をさらに小さくして幅の圧迫を抑える(2026-07-30)。
 */
.hb-th-note {
	font-weight: 400;
}

.hb-info-table td {
	font-weight: 400;
	color: #1f2937;
}

.hb-note {
	margin-top: 1em;
	padding: 1em 1.2em;
	background: #f7f9fb;
	border-radius: 10px;
	border-left: 3px solid #d4a017;
	font-size: 1.05rem;
	line-height: 1.9;
}

/* 「割引情報」等の見出しは2026-07-23より<h3 class="hb-note-title">として出力し、
 * 目次にも含める(h2と同じ方針転換。functions.phpのhakataburari_render_legacy_parking_info_block参照)。
 * CPT記事の本文(.hb-body h3)・.hb-note内<h3>とも見た目を統一するため、
 * 色文字+記号(▸)スタイルをまとめて指定する(h2の箱型スタイルとは差をつけ、階層が分かるようにしている)。
 * 旧post型記事の本文も.hb-bodyに統一ラップされる(2026-07-30)ため、.hb-body h3のみでカバーできる。
 */
.hb-body h3,
.hb-note-title,
.hb-note h3 {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #2c6e91 !important;
	line-height: 1.4 !important;
	margin: 2.2em 0 1em !important;
	letter-spacing: 0.01em !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
}
.hb-body h3::before,
.hb-note-title::before,
.hb-note h3::before {
	content: "▸ ";
}

/* 2026-07-30、h3見出し左の水色マーク(Cocoon標準の.article h3::beforeによる装飾)を
 * 視認性のため除去し、文字色も黒に統一する(上記▸マークの色文字スタイルから方針変更)。
 * .article h3::beforeはCocoon側の汎用ルールでbackground-colorのみ指定されているため、
 * こちらでcontent/backgroundごと打ち消す。
 * Cocoon標準の箱デザイン(border-left 7px・font-size 22px)による、H2より大きく見える
 * 逆転現象を解消する(2026-07-30)。あわせてH2(20px)との差が小さすぎたため19px→18pxに調整し、
 * 上余白も親見出しとの近さが出るよう2.2em→1.8emに詰める。
 */
.hb-body h3,
.hb-note-title,
.hb-note h3 {
	color: #1a1a1a !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	margin: 1.8em 0 0.8em !important;
	letter-spacing: 0.02em !important;
}
.article h3::before,
.hb-body h3::before,
.hb-note-title::before,
.hb-note h3::before {
	content: none !important;
	background: none !important;
	display: none !important;
}

.hb-map-embed {
	margin-bottom: 1em;
}

.hb-map-embed iframe {
	width: 100%;
	height: 460px;
	border: 0;
	border-radius: 14px;
}

.hb-video-embed {
	margin-bottom: 1em;
}

.hb-video-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

.hb-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}

/* 写真が1枚だけの場合は2カラムのまま半分の幅で余白ができてしまうため、
 * 横並び(2カラム)にせず1枚を全幅で表示する(料金・支払い/出入口 共通)。2枚以上は従来通り。
 */
.hb-photo-grid > .hb-photo-item:only-child {
	grid-column: 1 / -1;
}

.hb-photo-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 0.4em;
}

.hb-photo-desc {
	font-size: 0.9em;
	margin: 0;
	text-align: center;
}

.hb-last-updated {
	color: var(--hb-text-light, #888);
	font-size: 0.9em;
	text-align: right;
}

@media (max-width: 600px) {
	.hb-photo-grid {
		grid-template-columns: 1fr;
	}

	.hb-info-table th {
		width: 6.5em;
	}

	.hb-th-note {
		font-size: 0.8em;
	}

	.hb-title {
		font-size: 1.4em;
	}
}

/* 一覧・アーカイブページ(archive-*.php / taxonomy-*.php) */

.hb-archive-header {
	margin-bottom: 1.5em;
}

.hb-archive-title {
	font-size: 1.4em;
}

.hb-archive-desc {
	color: var(--hb-text-light, #666);
}

.hb-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5em;
	margin-bottom: 2em;
}

.hb-card {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hb-surface, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hb-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hb-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hb-card-thumb {
	position: relative;
}

.hb-card-thumb img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.hb-card-noimage {
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #aaa;
	font-size: 0.9em;
}

.hb-card-body {
	padding: 0.8em 1em;
}

.hb-card-tag {
	position: absolute;
	top: 0.6em;
	left: 0.6em;
	padding: 0.25em 0.7em;
	background: var(--hb-accent, #2b8cb6);
	color: #fff;
	font-size: 0.75em;
	border-radius: 999px;
}

.hb-card-title {
	margin: 0 0 0.4em;
	font-size: 1em;
	line-height: 1.4;
}

.hb-card-address {
	margin: 0 0 0.3em;
	font-size: 0.85em;
	color: var(--hb-text-light, #666);
}

.hb-card-meta {
	margin: 0;
	font-size: 0.9em;
	font-weight: bold;
}

.hb-pagination {
	text-align: center;
}

/* サイドバー:エリア/ジャンル一覧ウィジェット */

[id^="hakataburari_taxonomy_list"],
[id^="hakataburari_taxonomy_list"] * {
	background: none !important;
	background-color: transparent !important;
}

.hb-taxonomy-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-taxonomy-list li {
	border-bottom: 1px solid var(--hb-border, #e0e0e0);
}

.hb-taxonomy-list li:last-child {
	border-bottom: none;
}

.hb-taxonomy-list a {
	display: flex;
	justify-content: space-between;
	padding: 0.05em 0.2em;
	line-height: 1.2;
	text-decoration: none;
}

.hb-taxonomy-count {
	color: var(--hb-text-light, #999);
	font-size: 0.85em;
}

/*
 * 目次・本文見出し(h2)の連番表示を無効化(サイト全体、2026-07-11)
 * - 目次側: Cocoon標準の目次はol要素にブラウザ標準の連番が振られる仕様(tnt-numberクラス)
 * - 本文h2側: スキン(skins/one/style.css)がbodyクラスis-count-on時にCSSカウンターで
 *   「1.」等を::beforeに表示する実装になっている(本体・子テーマのCSSには現れないため見落としやすい)
 */
#toc .toc-list, #toc .toc-list ol { list-style: none !important; padding-left: 0.6em !important; }
#toc .toc-list li::marker { content: none !important; }
.is-count-on #content-in .article h2::before { content: "" !important; display: none !important; }
.is-count-on #content-in .article h2 { padding-left: 0 !important; }

/* 上記の連番無効化ルール(#content-in を含みID分の詳細度を持つ)が、.hb-section-title等の
 * 見出し統一ルール(2026-07-23)より詳細度が高く、padding-leftを常に0に上書きしてしまっていた
 * (2026-07-30発覚。天神地下街北駐車場の記事で縦線と見出しの間隔が空かない不具合として判明。
 * サイト全体のh2見出しに影響していたため、ここで詳細度を揃えて上書きし直す)。
 */
.is-count-on #content-in .article h2.hb-section-title,
.is-count-on #content-in .article .hb-body h2 {
	padding-left: 24px !important;
}

/* 上記と同じ理由(#content-in を含む詳細度)で、H2左のアクセント線(::before、2026-07-30追加分)も
 * display:noneで消されていた(ユーザー指摘によりまとめ記事で発覚。実際は全記事のh2に影響)。
 * ここでも詳細度を揃えて上書きし直す。
 */
.is-count-on #content-in .article .hb-section-title::before,
.is-count-on #content-in .article .hb-body h2::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	top: -7px !important;
	bottom: -7px !important;
	width: 4px !important;
	background: #2c6e91 !important;
	border-radius: 2px !important;
}

/*
 * スマート化リニューアル(2026-07-23、福岡タワー駐車場記事でユーザー確認・承認済み)
 * - 記事タイトルをアイキャッチ画像の下に表示する(Cocoon標準のentry-header内をflexboxで並び替え。
 *   DOM順序自体は変更せず見た目だけ入れ替えている)
 */
.entry-header.article-header {
	display: flex;
	flex-direction: column;
}
.entry-header.article-header .eye-catch-wrap {
	order: 1;
	margin-bottom: 0.8em;
}
.entry-header.article-header .entry-title {
	order: 2;
}

/*
 * 「周辺の代替駐車場」「エリアの他の駐車場」セクション(.hb-related)内のカードのみ横長レイアウトに変更。
 * .hb-card-gridは一覧・アーカイブページ(archive-parking.php/taxonomy-area.php)でも共用しているため、
 * .hb-relatedの中に限定して上書きし、一覧ページの縦型グリッドには影響させない。
 */
.hb-related .hb-card-grid {
	grid-template-columns: 1fr;
	gap: 0.3em;
}
.hb-related .hb-card-link {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	height: 118px;
	overflow: hidden;
}
.hb-related .hb-card-thumb {
	flex: 0 0 30%;
	max-width: 199px;
	align-self: flex-start;
	height: 100%;
}
.hb-related .hb-card-thumb img,
.hb-related .hb-card-thumb picture {
	height: 100%;
	min-height: 0;
	display: block;
}
.hb-related .hb-card-thumb img {
	object-fit: cover;
}
.hb-related .hb-card-body {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	padding: 0 1.2em;
}
/* フォントサイズは本文中の内部リンクカード(.hb-body .internal-blogcard-title/-snippet、
 * 0.92em/0.85em)と実際の見た目の大きさを揃えるため、rem指定にしている。
 * .internal-blogcardは.hb-body(font-size:1.05rem)配下にあり、.hb-relatedはその外側で
 * 基準フォントサイズが異なるため、同じem値のままだと計算結果が一致しない(2026-07-30)。
 */
.hb-related .hb-card-title {
	font-size: 0.966rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.3em;
}
.hb-related .hb-card-address {
	font-size: 0.8925rem;
	line-height: 1.3;
	margin: 0 0 0.2em;
}
.hb-related .hb-card-meta {
	font-size: 0.8925rem;
	line-height: 1.3;
	color: #2c6e91;
	font-weight: 700;
	margin: 0;
}

/* 写真に被さるエリアタグは、本文中の内部リンクカードにはない要素で写真を隠してしまうため非表示にする(2026-07-30)。 */
.hb-related .hb-card-tag {
	display: none;
}

/* 料金(.hb-card-meta)がbodyの既定line-height(約1.9)を引き継いで縦に間延びし、
 * カード高さ118pxの枠内で2行目が見切れていたため、上記でline-height:1.3を明示して解消(2026-07-30)。
 * 住所(.hb-card-address)もp要素の既定marginが上下に残っていたため、marginを明示的に0起点に統一した。
 */

/* スマホでは行間・余白をさらに詰め、タイトルの文字も少し小さくしてスッキリ見せる(2026-07-30)。 */
@media (max-width: 600px) {
	.hb-related .hb-card-title {
		font-size: 0.85rem;
		line-height: 1.2;
		margin-bottom: 0.2em;
	}
	.hb-related .hb-card-address {
		line-height: 1.2;
		margin-bottom: 0.15em;
	}
	.hb-related .hb-card-meta {
		line-height: 1.2;
	}
}

/*
 * 本文中に挿入される内部リンクカード(Cocoon標準の.internal-blogcard)を、
 * 「駐車場情報」セクションの.hb-cardと似た横長デザインに寄せる(2026-07-26)。
 * .hb-body配下に限定し、他ページのblogcard表示には影響させない。
 */
.hb-body .internal-blogcard-wrap {
	width: 100%;
	background: none;
	margin: 1.5em 0;
}
.hb-body .internal-blogcard {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 118px;
	overflow: hidden;
	padding: 0;
	border-radius: 12px;
	background: var(--hb-surface, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hb-body .internal-blogcard:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.hb-body .internal-blogcard-label {
	display: none;
}
.hb-body .internal-blogcard-thumbnail {
	float: none;
	flex: 0 0 30%;
	max-width: 199px;
	width: auto;
	height: 100%;
	margin: 0;
}
.hb-body .internal-blogcard-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hb-body .internal-blogcard-content {
	flex: 1;
	height: 100%;
	margin: 0;
	max-height: none;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 0 1.2em;
}
.hb-body .internal-blogcard-title {
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.5em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-body .internal-blogcard-snippet {
	font-size: 0.85em;
	color: var(--hb-text-light, #666);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-body .internal-blogcard-footer {
	display: none;
}


/* 特Pアフィリエイトリンク CTA (2026-07-30、v2: カード全体クリック可能・大型化) */
.hb-tokup-cta{display:flex;align-items:center;gap:1.1em;background:linear-gradient(135deg,#1b2838,#2b3a4a);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.15);padding:1.6em 1.6em;margin:1.8em 0;text-decoration:none;color:#fff;transition:box-shadow .2s ease,transform .2s ease;}
.hb-tokup-cta:hover{box-shadow:0 10px 24px rgba(0,0,0,.25);transform:translateY(-2px);color:#fff;}
.hb-tokup-cta-icon{font-size:2.4em;flex-shrink:0;line-height:1;}
.hb-tokup-cta-body{flex:1;min-width:0;}
.hb-tokup-cta-title{display:block;font-weight:bold;font-size:1.25em;margin:0 0 .3em;color:#fff;}
.hb-tokup-cta-text{display:block;font-size:.92em;color:#c8d2db;line-height:1.5;}
.hb-tokup-cta-arrow{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.5em;color:#fff;}
@media(max-width:480px){.hb-tokup-cta{padding:1.2em;gap:.8em;} .hb-tokup-cta-title{font-size:1.08em;} .hb-tokup-cta-icon{font-size:1.8em;} .hb-tokup-cta-arrow{width:36px;height:36px;font-size:1.2em;}}

/* 割引情報ボックス内、見出しの上の隙間を下の隙間と揃える(2026-07-30)
 * 旧post型記事は<h3 class="hb-note-title">ではなくクラス無しの素の<h3>で出力されるため、
 * クラスセレクタでは一致せず無効化していた。h3要素セレクタに修正。
 */
.hb-note > h3:first-child {
	margin-top: 0 !important;
}

/* .hb-note内の最後の要素(通常は<p>)のmargin-bottomを打ち消し、
 * ボックスのpadding-bottomだけの隙間にして上の隙間と揃える(2026-07-30)。
 */
.hb-note > :last-child {
	margin-bottom: 0 !important;
}