/**
 * SWELL のページタイトル帯（`.l-topTitleArea`）の高さ圧縮。
 *
 * パンくず・英字ラベル・見出しが乗る帯は **SWELL がテーマ側で描画**している。
 * テーマ（swell_child を含む）は触らず、このファイルを読み込んだページでだけ縦幅を詰める。
 *
 * 🔴 **クラス名は実機の DevTools で確認した実物**（2026-08-19・崇さん）。
 *    SWELL はこのリポジトリに無いため、**推定でクラス名を書かないこと**。
 *    ⚠️ 0.7.144〜0.7.145 は `.p-pageHeader` / `.p-pageHeader__inner` という**存在しないクラス**を
 *    指していて全セレクタが空振りしていた（旧 `wizard.css` の圧縮も同様に効いていなかった）。
 *
 *   帯の外枠   … `.l-topTitleArea`
 *   内側       … `.l-topTitleArea__body`（`.l-container` と併用）
 *   見出し     … `h1.c-pageTitle`
 *                （`.l-topTitleArea .l-topTitleArea__body .c-pageTitle` で
 *                  font-size:40px / line-height:1.45 / font-weight:900 / margin:0 0 16px。
 *                  出所 style.css?ver=7.0.4:1399）
 *   パンくず   … `#breadcrumb.p-breadcrumb`
 *   英字ラベル … `.l-topTitleArea__body` 内の **インラインstyle の div**
 *                （display:inline-flex; padding:7px 15px; margin-bottom:18px; border-radius:9999px）
 *
 * 🔴 **セレクタは `.l-topTitleArea` 配下に限定する。** `html` / `body` / `*` / `footer` や
 *    裸の `h1` は書かない（提案書ページ `[pnm_magic_report]` でも読み込むため、
 *    テーマのフッター等へ漏らさない）。
 *
 * ⚠️ **詳細度**：見出しはテーマが3クラスの子孫セレクタで当てているため、こちらも
 *    同じ3クラス＋`!important` で書く。⚠️ 英字ラベルは**インラインstyle**なので
 *    `!important` が必須。⚠️ `@media (min-width:600px)` で SWELL のカスタム inline-css が
 *    `.c-pageTitle` の font-size を上書きするため、同じブレークポイントで当て返す。
 *
 * ⚠️ **装飾の絶対配置 div（円）は触らない**＝`position:absolute` で帯の高さに寄与しないため。
 *    英字ラベルの指定が装飾に当たらないよう、`[style*="inline-flex"]` で絞る。
 *
 * ⚠️ 横方向のパディング（`.l-container` の左右）は触らない＝縦だけ詰める。
 *
 * モバイルファースト：基準は SP、600px 以上で PC 値へ。
 *
 * 🔴 ⚠️ **この 600px は `assets/css/pnm-mypage.css` と結合している**（0.7.210 で発生）。
 *    マイページのヒーローは「この帯と同じ高さ」に寄せてあり、同じ 600px で SP/PC 値を切り替える。
 *    **ここの 600px・padding・`.c-pageTitle` の font-size を変えたら、必ず `pnm-mypage.css` 側も
 *    追随させること**（片方だけ変えると、境目で帯とヒーローの高さがずれる）。
 *    ⚠️ **`pnm_mypage` をこの CSS の対象タグ一覧に足して合わせてはいけない**＝帯が二重になる
 *    （`pn-mitsukuru.php` の `pnm_page_header_style_on_shortcode()`・2026-08-30 の射程確定）。
 *
 * @package PN_Mitsukuru
 */

/* 帯の外枠。アイキャッチ型の min-height を打ち消し、縦パディングを詰める。 */
.l-topTitleArea {
	min-height: 0 !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* 内側（.l-topTitleArea__body.l-container）。縦だけ 0 にする（左右は触らない）。 */
.l-topTitleArea .l-topTitleArea__body {
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 見出し（h1.c-pageTitle）。帯の高さの主因。⚠️ 18px を下回らせない（可読性の下限）。 */
.l-topTitleArea .l-topTitleArea__body .c-pageTitle {
	font-size: 20px !important;
	line-height: 1.3 !important;
	margin: 0 0 8px !important;
}

/* パンくず（#breadcrumb.p-breadcrumb）。行は残し、余白と行高だけ詰める。 */
.l-topTitleArea #breadcrumb.p-breadcrumb {
	font-size: 11px !important;
	line-height: 1.4 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* 英字ラベル（インラインstyle の pill）。⚠️ インラインに勝つため !important 必須。
   ⚠️ 装飾の絶対配置 div に当たらないよう inline-flex を持つものだけに絞る。 */
.l-topTitleArea .l-topTitleArea__body div[style*="inline-flex"] {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	margin-bottom: 8px !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
}

@media screen and ( min-width: 600px ) {
	.l-topTitleArea {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* ⚠️ SWELL のカスタム inline-css が同じブレークポイントで font-size を上書きするため、
	   ここで当て返す（同一詳細度なら後勝ち＝このファイルは footer 出力で後に来る）。 */
	.l-topTitleArea .l-topTitleArea__body .c-pageTitle {
		font-size: 24px !important;
	}

	.l-topTitleArea #breadcrumb.p-breadcrumb,
	.l-topTitleArea .l-topTitleArea__body div[style*="inline-flex"] {
		font-size: 12px !important;
	}
}