@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =============================================================================
 * オウンドメディア（service.hitalent.me）の見た目
 *
 * 出どころ: 「記事ページ デザイン確定案」（2026-08-10 確定・AB中間 × ブランドカラー）
 *   https://claude.ai/code/artifact/fa021679-4fdc-4f78-90de-bb867246ae88
 *   → モックのCSSがそのまま子テーマの仕様と定めてある。値を勝手に変えない。
 *
 * JavaScript は使わない（追従はすべて position: sticky / fixed で実現する）。
 * 新しいJSを足すと、公開のたびに許可リストの安全装置で止まるため。
 * ========================================================================== */

:root {
	--ht-navy: #0D1240;        /* 見出し・H2の罫・CTAボタン・表ヘッダー */
	--ht-amber: #F5A623;       /* カテゴリラベル・CTAの左罫 */
	--ht-cta-face: #FFF8EF;    /* CTAブロックの背景 */
	--ht-pale: #F5F6FA;        /* 表ヘッダー・図版枠 */
	--ht-ink: #14171F;         /* 本文（ネイビー寄りの黒） */
	--ht-line: #DEE0E8;        /* 目次枠・表の横罫・FAQ枠 */
	--ht-cta-sub: #6B5E4A;     /* CTAの説明文 */
	--ht-radius: 4px;
	--ht-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

/* -----------------------------------------------------------------------------
 * 本文中の反復CTA（4〜5回・スマホではこれが主役）
 * 使い方: 記事本文に [ht_cta] ショートコード、またはSWELLのブログパーツで挿入する
 * -------------------------------------------------------------------------- */
.ht-cta {
	background: var(--ht-cta-face);
	border-left: 3px solid var(--ht-amber);
	border-radius: var(--ht-radius);
	padding: 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	align-items: flex-start;
	margin: 2rem 0;
}
.ht-cta__title {
	font-family: var(--ht-serif);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ht-navy);
	line-height: 1.6;
}
.ht-cta__desc {
	font-size: .82rem;
	color: var(--ht-cta-sub);
	line-height: 1.8;
}
.ht-cta__btn,
.ht-side-cta__btn,
.ht-spbar__btn {
	display: inline-block;
	background: var(--ht-navy);
	color: #FFFFFF;
	border: 0;
	border-radius: var(--ht-radius);
	font-weight: 700;
	text-decoration: none;
}
.ht-cta__btn {
	padding: .62rem 1.5rem;
	font-size: .88rem;
}
.ht-cta__btn:hover,
.ht-side-cta__btn:hover,
.ht-spbar__btn:hover {
	color: #FFFFFF;
	opacity: .88;
}

/* 塗りではない方（資料請求）＝線のボタン */
.ht-btn--outline {
	background: transparent;
	color: var(--ht-navy);
	border: 1px solid var(--ht-navy);
}
.ht-btn--outline:hover { color: var(--ht-navy); }

/* -----------------------------------------------------------------------------
 * PC＝追従サイドバーのCTAカード（画面幅900px以上でのみ意味を持つ）
 * SWELLのサイドバーウィジェットに [ht_side_cta] を置いて使う
 * -------------------------------------------------------------------------- */
.ht-side-cta {
	background: var(--ht-cta-face);
	border-left: 3px solid var(--ht-amber);
	border-radius: var(--ht-radius);
	padding: .95rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
/* 読者軸が決まらない場所（記事一覧トップ・検索）では2枚並ぶ（2026-08-31） */
.ht-side-cta + .ht-side-cta { margin-top: .8rem; }

.ht-side-cta__title {
	font-family: var(--ht-serif);
	font-size: .86rem;
	font-weight: 700;
	color: var(--ht-navy);
	line-height: 1.6;
}
.ht-side-cta__btn {
	text-align: center;
	font-size: .78rem;
	padding: .55rem .6rem;
	display: block;
}
.ht-side-cta__note {
	font-size: .68rem;
	line-height: 1.7;
	color: #55596B;
	border-top: 1px dashed var(--ht-line);
	padding-top: .6rem;
}

/* サイドバーをスクロールに追従させる（JSなし） */
@media (min-width: 900px) {
	.ht-side-cta,
	.widget_ht_side_cta {
		position: sticky;
		top: 1.4rem;
	}
}

/* -----------------------------------------------------------------------------
 * スマートフォン＝画面下部の追従バー
 * サイドバーが出せないため、ゴールリンクをここで常時表示する
 * -------------------------------------------------------------------------- */
.ht-spbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--ht-navy);
	padding: .55rem .8rem;
	display: flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	box-shadow: 0 -2px 12px rgba(13, 18, 64, .18);
	padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
}
/* モックのとおり、バー自体がネイビー・文字は白（白ボタンは置かない） */
.ht-spbar__btn {
	flex: 1 1 auto;
	max-width: 22rem;
	text-align: center;
	font-size: .88rem;
	padding: .6rem .8rem;
	background: transparent;
	color: #FFFFFF;
}
.ht-spbar__btn:hover { color: #FFFFFF; }
/* 2つ並ぶ場合だけ、区切りが分かるように細い枠を出す */
.ht-spbar__btn + .ht-spbar__btn { border: 1px solid rgba(255, 255, 255, .45); }

/* バーが本文の末尾を覆わないように下端を空ける */
body.ht-has-spbar { padding-bottom: 4.2rem; }

/* 900px以上ではサイドバーが出るので、下部バーは消す */
@media (min-width: 900px) {
	.ht-spbar { display: none; }
	body.ht-has-spbar { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ht-cta__btn, .ht-side-cta__btn, .ht-spbar__btn { transition: none; }
}

/* =============================================================================
 * 記事ページの見た目（2026-08-26 実装）
 *
 * 出どころ: 「記事ページ デザイン確定案」の **確定案（data-dir="final"）** ＝
 *   「AB中間 × ブランドカラー」のトークン一式。値はモックのまま写している。
 *   https://claude.ai/code/artifact/fa021679-4fdc-4f78-90de-bb867246ae88
 *
 * 当てる相手は SWELL 2.18.0 の実マークアップ（親テーマのテンプレートで確認済み）。
 *   記事タイトル … .p-articleHead.c-postTitle > h1.c-postTitle__ttl
 *   本文         … .post_content（single.php が出力するラッパ）
 *   目次         … .p-toc / .p-toc__ttl / .p-toc__list（SWELL標準。プラグインは使わない）
 *   FAQ          … .swell-block-faq / .faq_q / .faq_a（SWELLのFAQブロック）
 *   アイキャッチ … figure.p-articleThumb
 *
 * ■ セレクタに :is(.single, .page) を足している理由
 *   SWELL はカスタマイザーの設定値から動的CSSを <head> にインラインで吐く。
 *   そのセレクタは `.post_content h2:where(...)` 相当＝詳細度 (0,1,1) で、
 *   `:where()` は詳細度に加算されない。子テーマのCSSは外部ファイルなので
 *   読み込み順では負ける。**:is(.single, .page) を足して (0,2,1) にすることで順序に関係なく勝つ。**
 *   !important は使わない（あとから個別に上書きできなくなるため）。
 *
 * ■ H3 だけはモックに値が無い（確定案は H2 までしか作っていない）
 *   1本目の記事は H3 を20個使うので、無いままでは公開できない。
 *   H2（明朝＋ネイビー2px罫）との対比で **ゴシック太字・罫なし** に置いた。
 *   → 値を決めたのは Claude。**まひろの確認が必要な唯一の箇所**（他は全部モックの値）。
 * ========================================================================== */

:root {
	/* 確定案のトークン（モックの data-dir="final" をそのまま写した値） */
	--ht-lead: #3D4152;        /* リード文 */
	--ht-measure: 650px;       /* 本文の一行の幅 */
	--ht-lh: 1.88;             /* 本文の行送り */
	--ht-p-size: .94rem;       /* 本文 */
	--ht-lead-size: .96rem;    /* リード文 */
	--ht-title-size: 1.75rem;  /* 記事タイトル */
	--ht-h2-size: 1.25rem;
	--ht-gap: 1.6rem;          /* ブロック間 */
}

/* -----------------------------------------------------------------------------
 * 記事の一行の幅
 * SWELLのカスタマイザー（コンテンツエリアの幅）でも同じことができるが、
 * git で差分を追うためにここで指定している。サイドバーの幅には触らない。
 * -------------------------------------------------------------------------- */
:is(.single, .page) .l-mainContent__inner > .p-articleHead,
:is(.single, .page) .l-mainContent__inner > .p-articleMetas,
:is(.single, .page) .l-mainContent__inner > .p-articleThumb,
:is(.single, .page) .l-mainContent__inner > .post_content {
	max-width: var(--ht-measure);
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 記事タイトル（明朝・ネイビー）
 * -------------------------------------------------------------------------- */
:is(.single, .page) .p-articleHead .c-postTitle__ttl {
	font-family: var(--ht-serif);
	font-weight: 600;
	font-size: var(--ht-title-size);
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--ht-navy);
	text-wrap: balance;
}

/* カテゴリラベルはアンバーの文字（確定案のとおり。塗りのチップにはしない）
 *
 * ⚠️ 2026-08-26 修正: 当初 `.p-termList__link` `.c-postThumb__cat` を対象にしていたが
 *    どちらもSWELLに存在しないクラスで、指定が1つも当たっていなかった
 *    （実物では濃色の塗りチップのまま出ていた）。親テーマの
 *    `parts/single/item/term_list.php` を読んで実クラスを確認して直した。 */
:is(.single, .page) .p-articleMetas .c-categoryList__link {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--ht-amber);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
}
:is(.single, .page) .p-articleMetas .c-categoryList__link:hover {
	color: var(--ht-amber);
	opacity: .8;
}
/* タグは主役ではないので控えめに（カテゴリと同じ色にすると2つが競合する） */
:is(.single, .page) .p-articleMetas .c-tagList__link {
	background: transparent;
	border: 0;
	padding: 0;
	color: #55596B;
	font-size: .72rem;
	letter-spacing: .06em;
}

/* -----------------------------------------------------------------------------
 * ヘッダー — 白地・ロゴとメニューはネイビー（2026-08-26 まひろ判断）
 *
 * ■ コーポレートとの差の向き（**一度逆にして直した**）
 *   co.jp のヘッダーは **濃色地に白ロゴ**（`logo-corp.svg` が白／ハンバーガーも `#FFFFFF`／
 *   ホバーが `rgba(255,255,255,.2)`）。実物のCSSを読んで確認した。
 *   よってこちらを紺地＋白ロゴにすると**同じ見え方になってしまう**。
 *   **白地＋紺ロゴで反転させる**のが正しい差のつけ方（2026-08-26 まひろ指摘）。
 *
 * ■ 「帯を消すと殺風景」への答え（まひろ要望）
 *   キャッチフレーズの帯（`.l-header__bar`）はやめる。代わりに
 *   **メニュー（タレント向け／企業向け）＋色のあるロゴ＋下の細罫**で締める。
 *   面を塗らずに情報で埋める形にした。
 *
 * ロゴ画像は `広報/コンテンツ制作/オウンドメディア素材/hitalent-logo-navy.png`
 * （紺＋アンバー・透過）。**画像を入れる前でもサイト名のテキストが紺で出る**ようにしてある。
 * -------------------------------------------------------------------------- */
.l-header {
	background: #FFFFFF;
	color: var(--ht-navy);
	box-shadow: none;
	border-bottom: 1px solid var(--ht-line);
}
/* キャッチフレーズの帯は使わない。設定（カスタマイズ > ヘッダー）でも切れるが、
 * 設定が戻ったときに崩れないよう見た目もここで抑えておく */
.l-header__bar {
	display: none;
}
/* ロゴ（画像を入れる前のテキスト表示も紺にする） */
.l-header__logo,
.l-header__logo a {
	color: var(--ht-navy);
}
.l-header__logo a:hover {
	color: var(--ht-navy);
	opacity: .85;
}
/* グローバルメニュー */
.l-header__gnav a,
.l-header .c-gnav a,
.l-header .c-iconList__link {
	color: var(--ht-navy);
}
.l-header .c-gnav > li > a {
	font-size: .88rem;
	font-weight: 700;
}
.l-header .c-gnav > li > a:hover {
	color: var(--ht-navy);
	opacity: .85;
}
/* ホバー時の下線をアンバーにして、ヘッダーのアクセントを1点だけ置く */
.l-header .c-gnav > li > a::after {
	background: var(--ht-amber);
}
/* スマホのハンバーガー・検索アイコン */
.l-header .w-header,
.l-header .p-spMenu__btn,
.l-header .c-iconBtn,
.l-header .c-iconBtn__icon {
	color: var(--ht-navy);
}

/* -----------------------------------------------------------------------------
 * 本文のタイポグラフィ
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content {
	font-size: var(--ht-p-size);
	line-height: var(--ht-lh);
	color: var(--ht-ink);
}
:is(.single, .page) .post_content > p {
	margin-block: 0 var(--ht-gap);
}

/* リード文。記事本文の先頭の段落に ht-lead クラスを付けて使う */
:is(.single, .page) .post_content .ht-lead {
	font-size: var(--ht-lead-size);
	color: var(--ht-lead);
}

/* アイキャッチ・図版の下地（画像が透過でも枠が締まる） */
:is(.single, .page) .p-articleThumb,
:is(.single, .page) .post_content figure.wp-block-image {
	background: var(--ht-pale);
	border-radius: var(--ht-radius);
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * H2 — 明朝・下罫 2px ネイビー
 * SWELLの見出しスタイル（左罫・背景塗り・::before の装飾）を打ち消してから当てる。
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	font-family: var(--ht-serif);
	font-weight: 600;
	font-size: var(--ht-h2-size);
	line-height: 1.45;
	color: var(--ht-navy);
	background: transparent;
	border-left: 0;
	border-top: 0;
	border-bottom: 2px solid var(--ht-navy);
	border-radius: 0;
	margin: 2.6rem 0 var(--ht-gap);
	padding: 0 0 .5rem;
}
/* SWELLが見出しに付ける装飾（棒・三角・破線枠）を消す */
:is(.single, .page) .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
:is(.single, .page) .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
	content: none;
	display: none;
}
/* 「letter」タイプが1文字目だけ大きくする指定を打ち消す */
:is(.single, .page) .post_content > h2:not(.is-style-section_ttl):first-letter {
	font-size: inherit;
	padding: 0;
	border-bottom: 0;
	color: inherit;
}

/* -----------------------------------------------------------------------------
 * H3 — ゴシック太字＋左にネイビー3pxの縦罫
 *
 * ⚠ 確定案（モック）はH2までしか作っていない。H3はここで決めた値。
 *   2026-08-26 に3案（A=罫なし／B=左に縦罫／C=H2と同じ明朝）を実物の記事本文で
 *   描き出して比較し、**Bを採用**（まひろ確認済み）。
 *
 * なぜ縦罫を足したか: 1本目はH3が20個あり、読者は目的の見出しを探しながらスクロールする。
 *   罫なし（A）と明朝（C）は**H3の左端が本文とぴったり同じ**ため本文に埋もれて探せない。
 *   縦罫のぶんだけ左に飛び出させると目が引っかかる。
 *   H2は「下の横罫」・H3は「左の縦罫」で**形が違う**ので階層も混ざらない
 *   （Cは書体がH2と同じでサイズも近く＝1.25rem対1.12rem、大きい見出しが2つあるように見えた）。
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	font-family: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ht-navy);
	background: transparent;
	border: 0;
	border-left: 3px solid var(--ht-navy);
	border-radius: 0;
	margin: 2rem 0 .8rem;
	padding: 0 0 0 .7rem;
}
:is(.single, .page) .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
:is(.single, .page) .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
	content: none;
	display: none;
}

/* -----------------------------------------------------------------------------
 * 目次（SWELL標準の p-toc。Table of Contents Plus は入れない）
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content .p-toc,
:is(.single, .page) .p-toc {
	background: #FFFFFF;
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius);
	padding: 1rem 1.15rem;
}
:is(.single, .page) .p-toc .p-toc__ttl {
	font-family: inherit;
	font-size: .82rem;
	font-weight: 700;
	color: var(--ht-navy);
	letter-spacing: .04em;
	border-bottom: 1px solid var(--ht-line);
	padding-bottom: .4rem;
	margin-bottom: .6rem;
	display: block;
	width: 100%;
	text-align: left;
}
:is(.single, .page) .p-toc .p-toc__ttl::before { content: none; }
:is(.single, .page) .p-toc .p-toc__list {
	font-size: .88rem;
	color: #55596B;
}
:is(.single, .page) .p-toc .p-toc__list > li::marker,
:is(.single, .page) .p-toc .p-toc__list > li::before {
	color: var(--ht-amber);
}

/* スマートフォンでは目次の子項目（H3）を隠す（2026-08-26 まひろ判断）
 *
 * カスタマイザーの「目次の省略表示」は**全デバイスに効く**ため使えない
 * （PCでは小見出しまで見せたい）。ここで画面幅だけを条件に落とす。
 *
 * 1本目の目次は 22項目。スマホの1画面に入るのは十数行で、
 * **目次だけで1画面を超えて本文に着くまでスクロールが必要**になっていた。
 * 子項目を落とすと 22 → 9項目（章タイトルだけ）になり、
 * 「何が書いてあるか」は保ったまま壁が消える。
 *
 * 開閉式にはしない（SWELLの目次は開閉する作りではなく、足すならJSが必要。
 * 子テーマは追従もCSSだけで実現する方針＝JSを増やさない）。 */
@media (max-width: 767px) {
	:is(.single, .page) .p-toc .p-toc__childList {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 表 — ヘッダーは淡いグレー地・ネイビー文字・下罫 2px ネイビー
 * 1本目の記事は表を7つ使う。数字列は等幅で桁を揃える。
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content table {
	border-collapse: collapse;
	width: 100%;
	font-size: .84rem;
	line-height: 1.7;
}
:is(.single, .page) .post_content th,
:is(.single, .page) .post_content td {
	padding: .62rem .8rem;
	border: 0;
	border-bottom: 1px solid var(--ht-line);
	text-align: left;
	vertical-align: top;
}
:is(.single, .page) .post_content thead th {
	background: var(--ht-pale);
	color: var(--ht-navy);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--ht-navy);
}
/* 2列目以降が数値の表が多いので、既定で桁を揃える */
:is(.single, .page) .post_content td:not(:first-child) {
	font-variant-numeric: tabular-nums;
}
/* 幅の狭い画面では表だけ横に流す（本文は折り返したまま） */
:is(.single, .page) .post_content .swell-block-tableFixed,
:is(.single, .page) .post_content figure.wp-block-table {
	overflow-x: auto;
}
:is(.single, .page) .post_content figure.wp-block-table table {
	min-width: 22rem;
}

/* -----------------------------------------------------------------------------
 * 列が多い表（⚠ 確定案に指定が無い箇所。2026-08-26 に実物を見て決めた）
 *
 * 確定案は「表2個」想定だったが、1本目の実物は**表7個・最大6列**だった
 * （3列×1／2列×4／5列×1／6列×1）。
 *
 * 方針: **記事の中の幅は本文の 650px だけ。表も左右へはみ出させない**（2026-09-02 まひろ指摘）。
 *   5列以上の表は字と余白を詰めて 650px に収め、それでも入らない画面幅のときだけ
 *   潰さずに横スクロールさせる（figure 側の overflow-x:auto）。
 *
 * ★ 2026-09-02 に2点を直した（テーマ記事1本目を公開して実物を見たら壊れていた）
 *   1. **左右へのはみ出し（margin-inline:-70px）をやめた。** 記事の中に 650px と 790px の
 *      2種類の幅が混在していた。2026-09-01 に「全部の表 → 5列以上だけ」へ限定したが、
 *      **5列以上の表を持つ記事＝テーマ記事1本目が当時まだ下書きで、実物を見ていなかった**。
 *   2. **`white-space: nowrap` を外した。** 「数値だけの列は折り返さない」つもりの指定だったが、
 *      `td:not(:first-child)` は**長文の列にも当たる**。5列の表（経路／中身／案件量／…）で
 *      37文字のセルが1行に伸び、**1列目が1文字ずつ縦に潰れ、5列目が枠の外へ切れていた**。
 *      表の中の数値は「23.9%」の形しかなく（「16〜30%」は本文側の表記で表には無い）、
 *      ASCII の数字は元々途中で折り返さないので nowrap は要らない。
 *
 * `:has()` に対応していないブラウザでは密度の指定だけが効かない（＝崩れない）。
 * -------------------------------------------------------------------------- */
/* 5列以上＝データを詰めた表。字と余白を落として本文幅に収める */
:is(.single, .page) .post_content figure.wp-block-table:has(th:nth-child(5)) table {
	font-size: .78rem;
}
:is(.single, .page) .post_content figure.wp-block-table:has(th:nth-child(5)) :is(th, td) {
	padding: .5rem .55rem;
}
/* 数字の途中で折らせない。SWELL 側が表のセルを `break-all` で折るため、
   列が狭くなると「稼働率60%以下」が「稼働率6／0%以下」のように**数値の途中**で割れる
   （2026-09-02 に実物で発生）。`normal` に戻すと、日本語は従来どおりどこでも折れて、
   「60%」のような英数字のかたまりだけが割れなくなる。 */
:is(.single, .page) .post_content figure.wp-block-table:has(th:nth-child(5)) :is(th, td) {
	word-break: normal;
	word-break: auto-phrase;  /* 対応ブラウザでは文節で折る。非対応では上の normal が残る */
	overflow-wrap: break-word;
}
/* 1列目（項目名の列）に下限を与える。これが無いと、他の列が伸びたときに
   1列目が1文字ずつの縦書きのように潰れる（2026-09-02 に実際に起きた） */
:is(.single, .page) .post_content figure.wp-block-table:has(th:nth-child(5)) :is(th, td):first-child {
	min-width: 7em;
}

/* -----------------------------------------------------------------------------
 * FAQ（SWELLのFAQブロック）— 1問ごとに白いカード＋細枠
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content .swell-block-faq__item {
	background: #FFFFFF;
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius);
	padding: .9rem 1.05rem;
	margin-top: .5rem;
}
:is(.single, .page) .post_content .swell-block-faq__item .faq_q {
	font-size: .92rem;
	font-weight: 700;
	color: var(--ht-navy);
	padding: 0 0 .4rem 2.2em;
}
:is(.single, .page) .post_content .swell-block-faq__item .faq_a {
	font-size: .86rem;
	color: #55596B;
	padding: 0 0 0 2.2em;
}
:is(.single, .page) .post_content .swell-block-faq__item .faq_q::before,
:is(.single, .page) .post_content .swell-block-faq__item .faq_a::before {
	top: 0;
	line-height: 1.6;
	width: 1.7em;
}
:is(.single, .page) .post_content .swell-block-faq__item .faq_q::before { color: var(--ht-navy); }

/* -----------------------------------------------------------------------------
 * サイドバーの小見出し（「新着記事」など）
 *
 * 確定案のサイドバーは「小見出し＋関連記事＋ゴールリンク」の構成で、小見出しは
 * 小さめ・太字・ネイビー・下に細罫。SWELLのウィジェット見出し（`.c-widget__title`）
 * にその値を当てて、CTAカードと同じトーンに揃える。
 * `.ht-side-h` は同じ見た目を手書きで使いたいとき用（現状は未使用）。
 * -------------------------------------------------------------------------- */
.ht-side-h,
.l-sidebar .c-widget__title,
.p-spMenu .c-widget__title {
	font-size: .76rem;
	font-weight: 700;
	color: var(--ht-navy);
	letter-spacing: .06em;
	border-bottom: 1px solid var(--ht-line);
	padding-bottom: .4rem;
	margin-bottom: .7rem;
}
/* SWELLが見出しに付ける装飾（左罫・背景・擬似要素）を打ち消す */
.l-sidebar .c-widget__title::before,
.l-sidebar .c-widget__title::after {
	content: none;
	display: none;
}
.l-sidebar .c-widget__title {
	background: transparent;
	border-left: 0;
	border-top: 0;
	border-radius: 0;
	text-align: left;
}

/* ------------------------------------------------------------------
   記事下の「この記事を書いた人」を出さない（2026-08-27 まひろ判断）

   このメディアの記事は会社としての発信で、筆者個人への興味で読まれるものではない
   （インタビュー記事の語り手＝インタビュイーであって投稿者ではない）。
   著者アーカイブは functions.php で 404 にしてあるため、著者名から辿れる先も無い。

   ⚠ 2026-09-02: **マークアップごと出さないのが本筋**だったので、functions.php の「4.」で
   SWELL の `show_author` 設定を false に倒した。CSSだけだとHTMLには残り、
   著者ボックスの中の Cloud Run 直URL（ユーザーのWebサイト欄）と、404 になる著者ページへの
   リンクが公開記事36本すべてに埋まっていた。
   このCSSは**設定が戻されたときの二重の歯止め**として残している。
   ------------------------------------------------------------------ */
:is(.single, .page) .l-articleBottom__section.-author {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 要点ボックス（記事冒頭の「この事例の要点」）
 *
 * md 側で表の直前に {.ht-summary} と書くと className が付く（md_to_wp_blocks.py）。
 * 通常の表と見た目を分ける理由は、これがデータの表ではなく
 * 「ラベル：値」の4行で、読者が最初に走り読みする箇所だから。
 *
 * ⚠ 2026-08-27 に実物で直した点:
 *   ・ラベル列に幅が無く「活用方法」が「活用方／法」に折り返していた
 *   ・見出し行が空のまま thead が出ていて、余計な罫線と余白ができていた
 *     （変換側で thead を出さないように修正済み）
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content .ht-summary {
	margin: 1.2em 0 2.2em;
	overflow-x: visible; /* ラベル：値の表なので横スクロールは不要 */
}
:is(.single, .page) .post_content .ht-summary table {
	min-width: 0;
	border-top: 2px solid var(--ht-navy);
	border-bottom: 1px solid var(--ht-line);
}
:is(.single, .page) .post_content .ht-summary td {
	padding: .85em 1em;
	border: 0;
	border-bottom: 1px solid var(--ht-line);
	vertical-align: top;
	line-height: 1.75;
}
:is(.single, .page) .post_content .ht-summary tr:last-child td {
	border-bottom: 0;
}
/* 1列目＝ラベル。折り返させない */
:is(.single, .page) .post_content .ht-summary td:first-child {
	width: 6.5em;
	white-space: nowrap;
	background: var(--ht-tint, #f7f8fa);
	font-size: .92em;
	letter-spacing: .04em;
	color: var(--ht-navy);
}
:is(.single, .page) .post_content .ht-summary td:first-child strong {
	font-weight: 700;
}
@media (max-width: 600px) {
	/* 幅が足りない画面では上下に積む（横に潰すより読める） */
	:is(.single, .page) .post_content .ht-summary td,
	:is(.single, .page) .post_content .ht-summary td:first-child {
		display: block;
		width: auto;
		white-space: normal;
	}
	:is(.single, .page) .post_content .ht-summary td:first-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* -----------------------------------------------------------------------------
 * インライン図（支援テーマ例・サービスサマリ）
 *
 * 図は wp:html ブロックで本文に直接入っている（WordPressはSVG/画像アップロードの
 * 制約があるうえ、インラインHTMLなら文字が実テキストのまま残りクローラーにも読まれる）。
 *
 * ★SVGをやめてHTMLにした（2026-08-31）。SVGは横幅に合わせて丸ごと縮むため、
 *   スマホ（実測358px）では本文が5〜6pxになって読めなかった。HTMLなら折り返せる。
 *   図の中身は営業資料『【HiTalent】サービス紹介資料』から取る（勝手に作らない）。
 * -------------------------------------------------------------------------- */
:is(.single, .page) .post_content .ht-fig {
	margin: 2.6em 0 1.6em;
	padding: 20px 20px 16px;
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius);
	background: #fff;
	font-size: 14px;
	line-height: 1.7;
}
.ht-fig__ttl {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ht-navy);
	line-height: 1.5;
}
.ht-fig .ht-fig__note,
.ht-fig .ht-fig__notes {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: #6C7183;
}
.ht-fig .ht-fig__notes {
	padding-left: 1.2em;
	list-style: disc;
}
.ht-fig .ht-fig__notes li { margin: 0; }
/* --- 支援テーマ例 --- */
/* 2026-08-31: チップ（枠付きの札）をやめて素のテキストにした。
   まひろ指摘「ちょっと長すぎ」。中身を減らさずに PC 844→470px / スマホ 1142→736px。
   記事の頭に置いたままにするため（頭のほうが必ず目に入る）。 */
.ht-themes__row {
	display: grid;
	grid-template-columns: 172px 1fr;
	gap: 4px 16px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--ht-line);
}
.ht-themes__row:last-of-type { border-bottom: 0; }
.ht-fig .ht-themes__dept {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ht-navy);
	line-height: 1.6;
}
.ht-fig .ht-themes__t {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #3A3F5C;
}

@media (max-width: 599px) {
	.ht-themes__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* --- サービスサマリ --- */
.ht-sumfig__flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.ht-sumfig__col {
	display: flex;
	flex-direction: column;
	padding: 14px;
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius);
	background: var(--ht-pale);
}
.ht-sumfig__col--center {
	background: var(--ht-navy);
	border-color: var(--ht-navy);
	color: #fff;
}
.ht-fig .ht-sumfig__head {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ht-line);
	font-size: 14px;
	font-weight: 700;
	color: var(--ht-navy);
	line-height: 1.5;
}
.ht-sumfig__col--center .ht-sumfig__head {
	color: #fff;
	border-bottom-color: #3A3F6B;
}
.ht-fig .ht-sumfig__list {
	flex: 1;
	margin: 0;
	padding-left: 1.1em;
	list-style: disc;
	font-size: 13px;
	line-height: 1.75;
}
.ht-fig .ht-sumfig__list li { margin: 0 0 4px; }
.ht-sumfig__col--center .ht-sumfig__list { color: #D6D9E6; }
.ht-fig .ht-sumfig__tag {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px dashed var(--ht-line);
	font-size: 12.5px;
	font-weight: 700;
	color: #8A6A12;
	line-height: 1.5;
}
.ht-sumfig__col--center .ht-sumfig__tag {
	border-top-color: #3A3F6B;
	color: var(--ht-amber);
}

@media (max-width: 599px) {
	.ht-sumfig__flow { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * サイドバーの新着記事
 *
 * ウィジェットは SWELL の「カード型」で、サムネイルが縦に大きい。
 * 追尾サイドバー（fix_sidebar）は中身が画面より高いとスクロール枠になるため、
 * カード5件だとサイドバーの中にスクロールバーが出て見た目が壊れる。
 * ウィジェット設定を「リスト型」に変えるのが本筋だが、CSS側でも丈を詰めておく
 * （設定を戻されても崩れない）。
 * -------------------------------------------------------------------------- */
/* SWELLのカード一覧は、格子の溝を打ち消すために ul へ負のマージンが入っている
   （margin: 0 -7px -21px）。サイドバーでは横1列に組み直すので、これが残ると
   サムネイルが枠から 7px はみ出す（2026-08-31 実測）。 */
.l-sidebar .p-postList.-type-card,
.p-spMenu .p-postList.-type-card {
	margin: 0;
}
.l-sidebar .p-postList.-type-card > .p-postList__item,
.p-spMenu .p-postList.-type-card > .p-postList__item {
	display: flex;
	gap: .7em;
	align-items: flex-start;
	padding: .7em 0;
	border-bottom: 1px solid var(--ht-line);
}
.l-sidebar .p-postList.-type-card > .p-postList__item:last-child {
	border-bottom: 0;
}
.l-sidebar .p-postList.-type-card .p-postList__link {
	display: flex;
	gap: .7em;
	align-items: flex-start;
	width: 100%;
}
.l-sidebar .p-postList.-type-card .p-postList__thumb {
	flex: 0 0 84px;
	width: 84px;
	margin: 0;
	border-radius: 3px;
	overflow: hidden;
}
.l-sidebar .p-postList.-type-card .p-postList__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}
.l-sidebar .p-postList.-type-card .p-postList__title {
	font-size: .82rem;
	line-height: 1.5;
	/* 3行で切る。サイドバーは一覧なので全文は要らない */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 抜粋・カテゴリラベルはサイドバーでは出さない（丈が伸びるだけ） */
.l-sidebar .p-postList.-type-card .p-postList__excerpt,
.l-sidebar .p-postList.-type-card .p-postList__meta .c-postTerm {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 追尾サイドバーのスクロールバーを消す（2026-08-27・実物を見てまひろ指摘）
 *
 * SWELLの `.w-fixSide` は `max-height: calc(100vh - …)` ＋ `overflow-y: auto`。
 * 中身が画面より高いとサイドバーの中がスクロール枠になる。
 * ⚠ `overflow-y` に auto を指定すると `overflow-x` も auto に計算されるため、
 *   横に1pxでもはみ出すと**横スクロールバーまで出る**（これが「きもい」の主因だった）。
 * 対策は2つ: 横は明示的に切る／縦は中身を詰めて画面に収める。
 * -------------------------------------------------------------------------- */
.w-fixSide {
	overflow-x: hidden;
}
/* 新着記事をさらに詰める（丈が画面に収まればスクロール枠にならない） */
.l-sidebar .p-postList.-type-card .p-postList__thumb {
	flex: 0 0 72px;
	width: 72px;
}
.l-sidebar .p-postList.-type-card .p-postList__title {
	-webkit-line-clamp: 2;
	font-size: .8rem;
}
.l-sidebar .p-postList.-type-card > .p-postList__item {
	padding: .55em 0;
}
/* 日付はサイドバーでは出さない（一覧の用途に対して情報が余る） */
.l-sidebar .p-postList.-type-card .p-postList__meta {
	display: none;
}

/* PCではサイドバーの中をスクロールさせない（2026-08-27）
 *
 * SWELLは追尾サイドバーに `max-height: calc(100vh - …)` を掛けるので、
 * 中身が画面より高いと枠の中がスクロールする。ウィジェットは3つ（検索・新着記事・CTA）で
 * 画面に収まる想定なので、枠のスクロールは要らない。position: sticky はSWELL側の指定を活かす。
 * ⚠ ウィジェットを増やすと画面からはみ出して見えなくなる。サイドバーは3つが上限（確定案）。 */
@media (min-width: 900px) {
	.w-fixSide {
		max-height: none;
		overflow: visible;
	}
}

/* 新着記事ウィジェットのスクロール枠を外す（2026-08-27・原因を特定して修正）
 *
 * SWELL は追尾サイドバーにウィジェットが複数あるとき（`.-multiple`）、
 * 新着記事ウィジェット自身に `min-height:160px; overflow-y:auto!important` を掛ける。
 * スクロールしていたのは追尾サイドバーの枠ではなく**このウィジェット**だった。
 * `overflow-y` が auto だと `overflow-x` も auto に計算されるので、横スクロールバーも出る。
 *
 * ⚠ 子テーマで `!important` を使う2箇所のうちの1つ（もう1つは検索ボタンの border）。SWELL側が `!important` で
 *   指定しているため、詳細度だけでは勝てない。ここ以外では使わない方針を維持する。
 * ⚠ 前提: サイドバーのウィジェットは3つまで（確定案）。増やすと画面からはみ出す。 */
@media (min-width: 900px) {
	.w-fixSide.-multiple .widget_swell_new_posts,
	.w-fixSide.-multiple .widget_swell_popular_posts {
		min-height: 0;
		overflow-y: visible !important;
		overflow-x: visible;
	}
}

/* 検索フォーム（2026-09-03・まひろ指摘「検索ボタンが少しださい・影が気持ち悪い」）
 *
 * 影の出どころは **SWELL の blocks.css**:
 *     .wp-block-search .wp-block-search__button {
 *       background:#f7f7f7; border:none!important; border-radius:2px;
 *       box-shadow:0 0 1px #aaa, inset 0 -1px 0 #ccc; color:#333; font-size:14px }
 * 上下の内側に線が入る古い立体ボタンの作りで、影を使わない他の部分から浮いていた。
 *
 * ⚠ **セレクタは `.wp-block-search` から書く**（詳細度 0,2,0）。`.wp-block-search__button`
 *   だけ（0,1,0）だと SWELL に負けて**何も起きない**。2026-09-03 に一度これで空振りした。
 *   子テーマは blocks.css より後に読まれるので、同じ詳細度なら勝てる。
 * ⚠ `border` だけは **SWELL が `!important`** を当てているので、こちらも `!important` で
 *   上書きするしかない（子テーマで `!important` を使う2箇所目。理由は同じ）。
 *
 * 方針: **検索は導線ではなく道具**。すぐ下の会員登録CTA（濃紺の面）と主張が競合しないよう
 * 待機時は静かにし、入力欄とボタンで**高さ・枠線・角丸を揃える**。ホバーで初めて濃紺になる。 */
.wp-block-search .wp-block-search__inside-wrapper {
	gap: .4rem;
}
.wp-block-search .wp-block-search__input {
	height: 40px;
	padding: 0 .7rem;
	border: 1px solid var(--ht-line);
	border-radius: var(--ht-radius);
	background: #FFFFFF;
	color: var(--ht-ink);
	font-size: .85rem;
	box-shadow: none;
}
.wp-block-search .wp-block-search__input:focus {
	border-color: var(--ht-navy);
	outline: none;
}
.wp-block-search .wp-block-search__button {
	height: 40px;
	margin: 0;
	padding: 0 .9rem;
	border: 1px solid var(--ht-line) !important;
	border-radius: var(--ht-radius);
	background: var(--ht-pale);
	color: var(--ht-navy);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	text-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus {
	background: var(--ht-navy);
	border-color: var(--ht-navy) !important;
	color: #FFFFFF;
}

/* 日本語の改行位置を文節で切る（2026-08-31・まひろ指摘）
 *
 * 日本語はどこでも改行できるので、ブラウザは単語の途中で平気で折る。
 * 「ファーム時代よりワークライフバラ／ンスも収入も改善した ー 和田伶美／さんに聞く…」のように
 * 「ワークライフバランス」が割れ、「和田伶美」と「さん」が離れていた。
 * タイトルが長い記事ほど起きるので、記事によって出たり出なかったりする。
 *
 * `word-break: auto-phrase` はブラウザに文節を判定させて、その境目でだけ折らせる指定。
 * ⚠ 対応していないブラウザ（Firefox 等）では**単に無視される**＝いまと同じ挙動に戻るだけなので、
 *   フォールバックは不要。Chrome / Edge / Safari は対応済み。
 * ⚠ 文節で折る分、行数が1行増えることがある（関連記事のカードで実測）。
 *   **サイドバーの新着記事には掛けない**＝ウィジェットが縦に伸びて画面からはみ出すため
 *   （「サイドバーのウィジェットは3つまで」の前提が崩れる）。 */
.c-postTitle__ttl,
.p-articleThumb__caption,
.post_content h2,
.post_content h3,
.post_content h4,
.l-articleBottom .p-postList__title,
.p-postSlider .p-postList__title,
.page .post_content .p-postList__title {
	word-break: auto-phrase;
}

/* 一覧の抜粋は「PC だけ表示」を CSS で再現する（2026-08-31）
 *
 * 以前は SWELL が User-Agent を見て、スマホには抜粋を出していなかった。
 * その出し分けが `Vary: User-Agent` を必要にして CDN キャッシュを壊していたので、
 * HTML は常に抜粋を含める形に変え、**見え方だけ**ここで元どおりにする。
 * ⚠ この1行を消すと、スマホの一覧に抜粋が出るようになる（壊れはしないが見た目が変わる）。 */
@media (max-width: 959px) {
	.p-postList__excerpt {
		display: none;
	}
}