/*
 * hrm-style.css
 * youmore.co.jp/hr/media/ 専用スタイルシート(独立ブランド「中小企業の労務ノート」)
 *
 * 読み込みは hr-media-site.php プラグイン経由(/hr/media/ 配下のみ)。
 * クラス名はすべて hrm- プレフィックスで統一し、コーポレートサイト・/hr/ 側の
 * 既存クラス名と衝突しないようにしている。
 *
 * 配色は暫定(仮の値)。「メディアサイト要件」チャットの未確定事項
 * (メディアブランドのテキストロゴ・配色)が確定次第、変数の値を差し替えること。
 *
 * 2026-08-24追記: 導入文(hrm-lead)・FAQ(hrm-faq系)・まとめ(hrm-summary-list)・
 * 表(hrm-table/hrm-table-wrap)のスタイルを追加(記事執筆側の子チャットからの
 * 指摘を受けて対応)。3章末尾(3-10〜3-12)・3-0を参照。
 *
 * 2026-08-24追記2: 記事監査チャットの初回監査で判明した実装ばらつきを受け、
 * 4箇所にコメントで注意書きを追加(3-2見出しハイライトの適用範囲、3-7関連記事見出し
 * 文言の統一、3-8バイライン/免責文言の入れ子構造、3-9公開日位置、3-11 FAQクラス名)。
 * 詳細は記事フォーマット.md 14章参照。
 */

:root {
	/* 暫定カラー: 労務メディアとしての信頼感を意識した紺系。
	   コーポレートのブランドカラー(#82CDDC)とは意図的に分け、
	   「独立ブランド」であることを視覚的にも示している。要確定。 */
	--hrm-color-primary: #1f3a5f;
	--hrm-color-primary-dark: #14283f;
	--hrm-color-accent: #e8a33d;
	--hrm-color-text: #222222;
	--hrm-color-text-muted: #5c5c5c;
	--hrm-color-bg: #ffffff;
	--hrm-color-bg-subtle: #f5f7fa;
	--hrm-color-border: #dde3ea;
	--hrm-color-warning-bg: #fff4e5;
	--hrm-color-warning-border: #e8a33d;
	--hrm-color-ad-label: #9a9a9a;

	/* 2026-09-06追記: 和文フォントスタック。
	   テーマ(Astra)がh1〜h4に指定している"Plus Jakarta Sans"、本文に指定している
	   "Inter"はいずれもラテン文字専用フォントで日本語グリフを持たないため、実際の
	   日本語表示はブラウザ標準フォントへのフォールバック任せになっていた。これだと
	   本文中の数字(全角数字ではなくInter/Plus Jakarta Sansの半角数字)だけ周囲の
	   日本語と字形の系統が変わり、金額・日数等の数字が多いこのサイトでは違和感に
	   なりやすい。日本語と数字の字形を統一するため、和文フォントを明示指定する。 */
	--hrm-font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
		"Yu Gothic", "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   0. Astra標準ヘッダー/フッターの非表示(/hr/media/ 配下のみ)
   TODO: 実際のAstra出力markupを確認し、セレクタが正しいか検証すること。
   ============================================================ */
body.hrm-media-page .site-header,
body.hrm-media-page .ast-below-header-container,
body.hrm-media-page .site-footer,
body.hrm-media-page .ast-small-footer {
	display: none !important;
}

/* ============================================================
   0-2. タイポグラフィ(フォント・文字色・見出しサイズ)の共通スタイル
   (/hr/media/ 配下のみ)
   ------------------------------------------------------------
   2026-08-28: このファイルにh1〜h3のサイズ指定が一つもなかったため、テーマ
   (Astra)側の既定サイズがそのまま出てしまい、H2(約48px)がH1(約32px)より
   大きくなる逆転現象が発生していた(運営者情報ページで確認)。ここでh1〜h4の
   サイズを明示指定して解消。
   2026-09-06: プロのデザイナー視点での見直し依頼を受け、見出しサイズだけでなく
   タイポグラフィ全体を再設計(v2)。実機のcomputed styleを調査して分かった問題点:
   1. 本文の地の色が要素によってバラバラだった。Gutenbergの素の段落・リスト・
      目次リンク等はテーマ既定の薄い青灰色(rgb(103,118,142)、コントラスト比
      約4.6:1でWCAG AA基準をぎりぎり満たす程度)になる一方、`hrm-lead`等
      このCSSが明示的にスタイルを当てているクラスだけ`--hrm-color-text`
      (#222222、コントラスト比16:1超)が効いていた。同じページ内で文章ごとに
      文字の濃さが変わって見える状態だったため、`.hrm-media-page`配下の本文
      要素すべてに`--hrm-color-text`を明示し、濃さを統一した。
   2. 見出し(Plus Jakarta Sans)・本文(Inter)ともラテン文字専用フォントで、
      日本語部分はブラウザ標準フォールバックに丸投げになっていた。本文中の
      半角数字(金額・日数等)だけInter/Plus Jakarta Sansの字形になり、周囲の
      日本語と字形の系統がずれて見えていたため、和文フォントスタック
      (`--hrm-font-jp`)を明示し、数字を含めて字形を統一した。
   3. 行間(line-height)が本文で約1.65倍とやや詰まっており、和文の可読性の
      目安(本文で1.7〜1.9倍程度)よりやや窮屈だったため、本文・リード文とも
      広めに調整。
   4. 見出しはサイズだけで階層を表現していたが、H2・H3のサイズ差が本文との
      比較でやや弱かったため、H3にブランドカラー(--hrm-color-primary)を
      使い、サイズ+色の両方で階層を分かりやすくした。
   ============================================================ */
body.hrm-media-page {
	font-family: var(--hrm-font-jp) !important;
	color: var(--hrm-color-text) !important;
	line-height: 1.8 !important;
}

/* Gutenbergの素の段落・リスト・表・リンク等、コンポーネントクラスが付いて
   いない本文要素の地の色をテーマ既定色ではなくブランドの本文色に統一する。 */
body.hrm-media-page p,
body.hrm-media-page li,
body.hrm-media-page td,
body.hrm-media-page th,
body.hrm-media-page dt,
body.hrm-media-page dd {
	color: var(--hrm-color-text) !important;
}

body.hrm-media-page h1,
body.hrm-media-page h2,
body.hrm-media-page h3,
body.hrm-media-page h4 {
	font-family: var(--hrm-font-jp) !important;
}

body.hrm-media-page h1 {
	font-size: 1.8rem !important;
	line-height: 1.45 !important;
	font-weight: 700 !important;
	color: var(--hrm-color-text) !important;
}

body.hrm-media-page h2 {
	font-size: 1.45rem !important;
	line-height: 1.55 !important;
	font-weight: 700 !important;
	color: var(--hrm-color-text) !important;
	margin-top: 2em !important;
	margin-bottom: 0.6em !important;
}

body.hrm-media-page h3 {
	font-size: 1.2rem !important;
	line-height: 1.55 !important;
	font-weight: 700 !important;
	color: var(--hrm-color-primary) !important;
	margin-top: 1.6em !important;
	margin-bottom: 0.5em !important;
}

body.hrm-media-page h4 {
	font-size: 1.05rem !important;
	line-height: 1.55 !important;
	font-weight: 700 !important;
	color: var(--hrm-color-primary) !important;
	letter-spacing: 0.02em !important;
}

/* 2026-09-06追記: 固定ページ(運営者情報等)は投稿(記事)と違って本文中に
   hrm-lead/hrm-toc/hrm-dates等の小さめの要素がほとんど無く、「見出し+本文」の
   繰り返しだけになりやすい。投稿と同じH2サイズだと、固定ページ全体に占める
   大きい太字の割合が高くなり、相対的に「見出しが大きすぎる」印象になっていた
   (ユーザー指摘)。`.page`はWordPress本体が固定ページに必ず付与するbodyクラス
   (テーマに依存しないコア機能のため実機確認不要)で、これを使って固定ページ
   だけ見出しを一段控えめにする。 */
body.hrm-media-page.page h2 {
	font-size: 1.25rem !important;
}

body.hrm-media-page.page h3 {
	font-size: 1.1rem !important;
}

@media (max-width: 640px) {
	body.hrm-media-page h1 {
		font-size: 1.55rem !important;
	}
	body.hrm-media-page h2 {
		font-size: 1.3rem !important;
	}
	body.hrm-media-page h3 {
		font-size: 1.1rem !important;
	}
}

/* ============================================================
   0-3. 投稿・固定ページの本文幅を統一する(/hr/media/ 配下のみ)
   ------------------------------------------------------------
   2026-09-06追記: 投稿(記事)ページがPCで幅いっぱい使われず、固定ページより
   狭く表示されるとの指摘を受けて追加。Astraはページ種別ごとに「サイドバー
   あり/なし」のレイアウト設定を別々に持てる仕様で、投稿側にサイドバー
   (#secondary、検索・最近の投稿等のウィジェット欄)が残っていると、本文
   カラム(#primary)がその分狭くなる。/hr/media/ 配下は独自ヘッダー/フッターの
   みで標準ウィジェットは使わない方針のため、サイドバーを非表示にし、本文の
   最大幅を投稿・固定ページで共通の値(760px、読みやすさを優先した値)に揃える。
   注意: #primary/#secondaryはAstraの一般的な実装から推定したセレクタで、
   ヘッダー/フッターのフック名(実機確認済み)と異なりまだ実機未確認。反映後に
   投稿ページのサイドバーが消え、固定ページと幅が揃っているか目視確認が必要。
   ============================================================ */
body.hrm-media-page #secondary,
body.hrm-media-page .widget-area {
	display: none !important;
}

body.hrm-media-page #primary,
body.hrm-media-page .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* タイトル(entry-header)・本文(entry-content)・投稿者情報等(entry-footer)を
   すべて同じ幅・中央揃えにする。entry-contentだけを狭めるとタイトルだけ幅いっぱい
   に残り、タイトルと本文の左端がずれて見えるため、まとめて指定する。 */
body.hrm-media-page .entry-header,
body.hrm-media-page .entry-content,
body.hrm-media-page .entry-footer {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================================
   1. ヘッダー
   ============================================================ */
.hrm-header {
	background: var(--hrm-color-bg);
	border-bottom: 1px solid var(--hrm-color-border);
}

.hrm-header-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hrm-logo {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hrm-color-primary);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.hrm-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	font-size: 0.9rem;
}

.hrm-nav a {
	color: var(--hrm-color-text);
	text-decoration: none;
}

.hrm-nav a:hover {
	text-decoration: underline;
}

.hrm-nav-consult {
	color: var(--hrm-color-text-muted);
	font-size: 0.85rem;
	border-left: 1px solid var(--hrm-color-border);
	padding-left: 20px;
}

@media (max-width: 640px) {
	.hrm-header-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.hrm-nav {
		gap: 14px;
		font-size: 0.85rem;
	}
}

/* ============================================================
   2. フッター
   ============================================================ */
.hrm-footer {
	background: var(--hrm-color-bg-subtle);
	border-top: 1px solid var(--hrm-color-border);
	margin-top: 48px;
}

.hrm-footer-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 28px 20px;
	text-align: center;
}

.hrm-footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 0.85rem;
	margin-bottom: 12px;
}

.hrm-footer-nav a {
	color: var(--hrm-color-text-muted);
	text-decoration: none;
}

.hrm-footer-nav a:hover {
	text-decoration: underline;
}

.hrm-copyright {
	font-size: 0.75rem;
	color: var(--hrm-color-text-muted);
	margin: 0;
}

/* ============================================================
   2-2. 記事一覧ページ(/hr/media/ トップ、v1.6.0、2026-09-06追加)
   ------------------------------------------------------------
   投稿・固定ページ本文と同じ760px幅・和文フォントスタックに揃え、一覧の
   カード自体は見出し(0-2セクション)の値をそのまま使わず独自にサイズ指定する
   (h1タグは記事一覧の大見出し「記事一覧」1つのみで、記事タイトルはリンクの
   テキストとして別クラスで表示するため)。
   ============================================================ */
.hrm-archive-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 48px;
}

.hrm-archive-title {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--hrm-color-text);
	margin: 0 0 20px;
}

.hrm-archive-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	overflow-x: auto;
}

.hrm-archive-tab {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--hrm-color-border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-family: var(--hrm-font-jp);
	color: var(--hrm-color-text);
	text-decoration: none;
	white-space: nowrap;
}

.hrm-archive-tab:hover {
	border-color: var(--hrm-color-primary);
	color: var(--hrm-color-primary);
}

.hrm-archive-tab.is-active {
	background: var(--hrm-color-primary);
	border-color: var(--hrm-color-primary);
	color: #fff;
}

.hrm-archive-search {
	display: flex;
	gap: 8px;
	margin-bottom: 32px;
}

.hrm-archive-search input[type="search"] {
	flex: 1 1 auto;
	padding: 10px 14px;
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	font-size: 0.95rem;
	font-family: var(--hrm-font-jp);
}

.hrm-archive-search button {
	padding: 10px 20px;
	background: var(--hrm-color-primary);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 0.95rem;
	font-family: var(--hrm-font-jp);
	cursor: pointer;
}

.hrm-archive-search button:hover {
	background: var(--hrm-color-primary-dark);
}

.hrm-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrm-archive-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--hrm-color-border);
}

.hrm-archive-item-title {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hrm-color-text);
	text-decoration: none;
	margin-bottom: 6px;
}

.hrm-archive-item-title:hover {
	color: var(--hrm-color-primary);
	text-decoration: underline;
}

.hrm-archive-item-excerpt {
	font-size: 0.95rem;
	color: var(--hrm-color-text-muted);
	line-height: 1.7;
	margin: 0 0 6px;
}

.hrm-archive-item-date {
	font-size: 0.8rem;
	color: var(--hrm-color-text-muted);
	margin: 0;
}

.hrm-archive-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
	font-size: 0.9rem;
}

.hrm-archive-pagination a,
.hrm-archive-pagination span {
	padding: 6px 12px;
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	color: var(--hrm-color-text);
	text-decoration: none;
}

.hrm-archive-pagination .current {
	background: var(--hrm-color-primary);
	border-color: var(--hrm-color-primary);
	color: #fff;
}

.hrm-archive-empty {
	color: var(--hrm-color-text-muted);
	padding: 40px 0;
	text-align: center;
}

/* ============================================================
   3. 記事本文の共通要素
   ------------------------------------------------------------
   TODO: 以下は2026-08-23にレビューされた「レイアウトサンプル」の実物が
   手元にないため、記事フォーマット.md(3章・5章・7章・10章)の文章記述から
   暫定的に再構成したものです。当時のサンプルHTML/CSSが別途見つかった場合は
   そちらのクラス名・デザインに差し替えてください。
   ============================================================ */

/* 3-0. 導入文(3章2番: 150〜250字。読者の悩みへの共感→この記事で分かることを提示)
   2026-09-06: 本文(18px)との差が0.9pxしかなく「リード文」として目立って
   いなかったため、1.15remへ拡大し、視覚的な導入としての役割を持たせた。 */
.hrm-lead {
	font-size: 1.15rem;
	line-height: 1.9;
	color: var(--hrm-color-text);
	margin: 0 0 20px;
}

/* 3-1. 結論ボックス(3章3番: 導入文の直後、広告より前) */
.hrm-conclusion-box {
	background: var(--hrm-color-bg-subtle);
	border: 1px solid var(--hrm-color-border);
	border-left: 4px solid var(--hrm-color-primary);
	border-radius: 4px;
	padding: 16px 20px;
	margin: 20px 0;
}

.hrm-conclusion-box__title {
	font-weight: 700;
	color: var(--hrm-color-primary);
	margin: 0 0 8px;
}

/* 3-2. 見出し直下の結論文の強調(3章5番: 通常の太字より一段強い処理)
   2026-08-24明確化(記事監査で発覚): 見出し(H2)タグ自体には付けない。見出し直下の
   本文、最初の一文(結論文)だけを <span class="hrm-lead-highlight"> で囲む。
   例: <h2>...</h2><p><span class="hrm-lead-highlight">結論の一文。</span>続き...</p>
   記事フォーマット.md 14-3参照。 */
.hrm-lead-highlight {
	background: linear-gradient(transparent 60%, #fdeec2 60%);
	font-weight: 700;
}

/* 3-3. 注意コールアウト(3章5番: 例外・法的な注意点) */
.hrm-callout-warning {
	background: var(--hrm-color-warning-bg);
	border: 1px solid var(--hrm-color-warning-border);
	border-radius: 4px;
	padding: 14px 18px;
	margin: 20px 0;
}

.hrm-callout-warning__label {
	font-weight: 700;
	color: var(--hrm-color-warning-border);
	margin: 0 0 6px;
}

/* 3-4. 手動目次(12章: Rank Math自動目次を使わず手動リンク目次で対応) */
.hrm-toc {
	background: var(--hrm-color-bg-subtle);
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	padding: 16px 20px;
	margin: 20px 0;
}

.hrm-toc__title {
	font-weight: 700;
	margin: 0 0 8px;
}

.hrm-toc ol {
	margin: 0;
	padding-left: 1.2em;
}

/* 3-5. 広告ラベル(5章: 「広告」ラベルを明確にし本文と視覚的に区別) */
.hrm-ad-slot {
	margin: 28px 0;
	text-align: center;
}

.hrm-ad-slot__label {
	display: block;
	font-size: 0.7rem;
	color: var(--hrm-color-ad-label);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

/* 3-6. ステップタイムライン(10章: 手続き・申請等の順序を示すCSSのみの表現) */
.hrm-step-timeline {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
	list-style: none;
	padding: 0;
}

.hrm-step-timeline li {
	flex: 1 1 140px;
	background: var(--hrm-color-bg-subtle);
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	padding: 12px 14px;
	position: relative;
}

.hrm-step-timeline li::before {
	content: attr(data-step);
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	background: var(--hrm-color-primary);
	color: #fff;
	font-size: 0.75rem;
	margin-bottom: 8px;
}

/* 3-7. 関連記事CTAカード(6章: 関連記事2〜3本へのリンク)
   2026-08-24明確化(記事監査で発覚): hrm-related-articles__title の文言は必ず
   「関連記事」に統一する(「あわせて読みたい」等は使わない)。記事フォーマット.md 14-5参照。 */
.hrm-related-articles {
	margin: 32px 0;
	padding: 20px;
	background: var(--hrm-color-bg-subtle);
	border-radius: 4px;
}

.hrm-related-articles__title {
	font-weight: 700;
	margin: 0 0 12px;
}

.hrm-related-articles ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.hrm-related-articles a {
	display: block;
	padding: 10px 14px;
	background: var(--hrm-color-bg);
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	color: var(--hrm-color-primary);
	text-decoration: none;
}

.hrm-related-articles a:hover {
	border-color: var(--hrm-color-primary);
}

/* 3-8. バイライン・免責文言(2章・3章9番)
   2026-08-24明確化(記事監査で発覚): hrm-disclaimer は hrm-byline の内側に入れ子で置く
   (兄弟要素にしない)。構造によって余白の出方が変わってしまうため。
   例: <div class="hrm-byline"><p>執筆:...</p><p class="hrm-disclaimer">本記事の内容は...</p></div>
   記事フォーマット.md 14-2参照。 */
.hrm-byline {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--hrm-color-border);
	font-size: 0.85rem;
	color: var(--hrm-color-text-muted);
}

.hrm-disclaimer {
	/* 2026-09-06: 免責文言は内容的な重要度が高いテキストのため、他の
	   メタ情報(コピーライト等)より一段大きい0.85remとし可読性を確保。 */
	font-size: 0.85rem;
	color: var(--hrm-color-text-muted);
	margin-top: 8px;
}

/* 3-9. 公開日・最終更新日(3章: 情報の鮮度を示す信頼シグナル)
   2026-08-24明確化(記事監査で発覚): 生成HTMLの最初の要素として固定する(導入文
   hrm-lead の直前)。末尾(バイラインの後)には置かない。記事フォーマット.md 14-1参照。 */
.hrm-dates {
	/* 2026-09-06: 免責文言と同様、公開日・更新日は情報として重要なため0.85remに。 */
	font-size: 0.85rem;
	color: var(--hrm-color-text-muted);
	margin-bottom: 16px;
}

/* 3-10. まとめ(3章7番: 3行程度の箇条書き) */
.hrm-summary-list {
	list-style: none;
	margin: 24px 0;
	padding: 18px 22px;
	background: var(--hrm-color-bg-subtle);
	border-radius: 4px;
}

.hrm-summary-list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 8px;
	line-height: 1.7;
}

.hrm-summary-list li:last-child {
	margin-bottom: 0;
}

.hrm-summary-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--hrm-color-primary);
	font-weight: 700;
}

/* 3-11. よくある質問(3章6番: FAQ、3〜5問目安。<details>/<summary>でJS不要のアコーディオンにする)
   2026-08-24注意(記事監査で発覚): クラス名は必ず "hrm-faq-item"(ハイフン区切り)。
   "hrm-faq__item"・"hrm-faq__question"・"hrm-faq__answer" のような名前は存在しない
   誤ったクラス名で、CSSが一切適用されない。17記事中13記事でこの間違いが発生した。
   使い方の正しい例:
   <div class="hrm-faq">
     <p class="hrm-faq__title">よくある質問</p>
     <details class="hrm-faq-item">
       <summary class="hrm-faq-item__q">Q. 質問文</summary>
       <div class="hrm-faq-item__a">A. 回答文</div>
     </details>
   </div>
*/
.hrm-faq {
	margin: 32px 0;
}

.hrm-faq__title {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 12px;
}

.hrm-faq-item {
	border: 1px solid var(--hrm-color-border);
	border-radius: 4px;
	margin-bottom: 10px;
	overflow: hidden;
}

.hrm-faq-item__q {
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 700;
	background: var(--hrm-color-bg-subtle);
	list-style: none;
}

.hrm-faq-item__q::-webkit-details-marker {
	display: none;
}

.hrm-faq-item__q::after {
	content: "+";
	float: right;
	color: var(--hrm-color-primary);
}

.hrm-faq-item[open] .hrm-faq-item__q::after {
	content: "−";
}

.hrm-faq-item__a {
	padding: 14px 16px;
	line-height: 1.8;
}

/* 3-12. 表(3章5番: 表・箇条書きを積極活用、スマホでの可読性重視)
   使い方の例: <div class="hrm-table-wrap"><table class="hrm-table">...</table></div>
   横幅がはみ出す表でも hrm-table-wrap が横スクロールを吸収する。 */
.hrm-table-wrap {
	overflow-x: auto;
	margin: 24px 0;
	-webkit-overflow-scrolling: touch;
}

.hrm-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.hrm-table th,
.hrm-table td {
	border: 1px solid var(--hrm-color-border);
	padding: 8px 12px;
	text-align: left;
}

.hrm-table th {
	background: var(--hrm-color-bg-subtle);
	font-weight: 700;
	white-space: nowrap;
}

.hrm-table tbody tr:nth-child(even) {
	background: #fafbfc;
}