/*
 * 資格詳細ページ（[qlm_qualification_detail]）専用の見た目。すべて .qlm-qd 配下にscopeしている。
 *
 * Phase 8D-3B：ページ構成を「資格概要／資格取得の負担／求人での資格ニーズ／収入面の参考データ／
 * 取得後の働き方／試験について詳しく／関連資格」の意味単位のブロックへ再編したことに伴い、
 * 旧来の .qlm-qi-*（Phase 7B）／.qlm-qm-*（Phase 7C）への依存を解消し、このファイル単体で
 * 完結する新しいクラス（.qlm-qd-block 他）へ統一した。単体ショートコード
 * （qualification-info.css / qualification-market.css）には一切影響しない。
 */

.qlm-qd {
	max-width: 720px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.65;
	box-sizing: border-box;
}

.qlm-qd * {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---------------------------------------------------------------------
 * 意味単位のブロック（資格取得の負担／求人ニーズ＋収入／取得後の働き方／試験詳細／関連資格）を
 * 記事として読み進めやすいよう、それぞれ薄いカードとして区切る。
 * ------------------------------------------------------------------- */

.qlm-qd-block {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.25em 1.25em 1.5em;
	margin: 0 0 1.5em;
}

@media ( max-width: 480px ) {
	.qlm-qd-block {
		padding: 1em 1em 1.25em;
		border-radius: 10px;
	}
}

.qlm-qd-block-heading {
	font-size: 1.15rem;
	margin: 0 0 0.85em;
}

.qlm-qd-block-heading:not( :first-child ) {
	margin-top: 1.75em;
}

.qlm-qd-overview {
	margin: 0 0 1.5em;
}

.qlm-qd-admin-empty-notice {
	margin: 0 0 1.5em;
}

/* ---------------------------------------------------------------------
 * quick facts（dl/dt/dd）：資格取得の負担／求人ニーズ／収入面で共通利用。
 * ------------------------------------------------------------------- */

.qlm-qd-facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 0.6em;
	margin: 0 0 0.75em;
}

.qlm-qd-fact {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	background: #f6f9fc;
	border: 1px solid #e6edf3;
	border-radius: 10px;
	padding: 0.75em 0.9em;
}

.qlm-qd-fact dt,
.qlm-qd-fact dd {
	min-width: 0; /* flex itemの既定min-width:autoによる意図しない幅超過（テキスト折り返し阻害）を防ぐ */
	margin: 0;
}

.qlm-qd-fact dt {
	font-size: 0.8em;
	font-weight: 600;
	color: #556370;
}

.qlm-qd-fact dd {
	font-size: 1.1rem;
	font-weight: 700;
	text-align: left;
}

.qlm-qd-supplement {
	display: block;
	margin-top: 0.25em;
	font-size: 0.72em;
	font-weight: 400;
	color: #667079;
}

.qlm-qd-editorial-note {
	font-size: 0.85em;
	color: #667079;
	margin: 0;
}

/* 給与系（収入面）：資格必須等の求人件数系より長い文字列を扱うため、より広いminmaxを与える。
 * 「3,000,000円〜5,000,000円（年収）」のような長い金額文字列が数字の途中で不自然に
 * 折り返されないよう、通常より自然な改行位置のみで折り返す。 */
.qlm-qd-facts--salary {
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.qlm-qd-facts--salary .qlm-qd-fact {
	background: #fafbfc;
	border-color: #f0f1f2;
}

.qlm-qd-facts--salary dd {
	font-size: 1.02rem;
	overflow-wrap: normal;
	word-break: keep-all;
}

@media ( max-width: 300px ) {
	.qlm-qd-facts--salary dd {
		overflow-wrap: anywhere;
		word-break: normal;
	}
}

.qlm-qd-salary-line {
	display: block;
}

.qlm-qd-salary-line:first-child {
	font-size: 1.05em;
}

.qlm-qd-market-notice {
	font-size: 0.82em;
	color: #667079;
	margin: 0 0 0.5em;
}

/* ---------------------------------------------------------------------
 * 求人ニーズ／収入面：調査条件（共通1回表示）と<details>による調査詳細。
 * ------------------------------------------------------------------- */

.qlm-qd-market-disclaimer {
	background: #f8f8f6;
	border-left: 3px solid #ddd;
	padding: 0.6em 0.9em;
	border-radius: 0 6px 6px 0;
	margin: 0.5em 0 1.1em;
	font-size: 0.85em;
	color: #5b6670;
}

.qlm-qd-market-conditions {
	font-weight: 600;
	color: #445263;
	margin: 0 0 0.3em;
}

.qlm-qd-market-survey-label {
	font-size: 0.85em;
	color: #667079;
	margin: 0 0 0.9em;
}

.qlm-qd-market-details,
.qlm-qd-exam-details-body {
	margin-top: 1.25em;
	padding-top: 1.1em;
	border-top: 1px dashed #dbe2e8;
	font-size: 0.92em;
	color: #5b6670;
}

.qlm-qd-market-details summary,
.qlm-qd-exam-details-body summary {
	cursor: pointer;
	font-weight: 600;
	color: #445263;
}

.qlm-qd-detail-row {
	margin-top: 1em;
}

.qlm-qd-detail-row h3 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.3em;
}

.qlm-qd-detail-row p {
	margin: 0;
}

.qlm-qd-market-source,
.qlm-qd-exam-source {
	margin-top: 1em;
	font-size: 0.92em;
}

/* ---------------------------------------------------------------------
 * 取得後の働き方：仕事ジャンル・資格取得後にできること・向いている人・extension fields。
 * ------------------------------------------------------------------- */

.qlm-qd-genres {
	margin: 0 0 1em;
}

.qlm-qd-workstyle .qlm-qd-details {
	margin-bottom: 1em;
}

.qlm-qd-workstyle .qlm-qd-detail-row {
	background: #fafbfc;
	border: 1px solid #f0f1f2;
	border-radius: 10px;
	padding: 0.9em 1.1em;
	margin-top: 0;
	margin-bottom: 0.9em;
}

.qlm-qd-workstyle .qlm-qd-detail-row:last-child {
	margin-bottom: 0;
}

.qlm-qd-section {
	margin-top: 1.5em;
}

.qlm-qd-section-heading {
	font-size: 1.05rem;
	margin: 0 0 0.75em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #dde6ee;
}

.qlm-qd-section-body {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 0.75em;
}

.qlm-qd-field {
	background: #f6f9fc;
	border: 1px solid #e6edf3;
	border-radius: 10px;
	padding: 0.85em 1em;
}

.qlm-qd-field-label {
	font-size: 0.95rem;
	margin: 0 0 0.35em;
	font-weight: 600;
}

.qlm-qd-field-value {
	margin: 0;
}

.qlm-qd-field-list {
	margin: 0;
	padding-left: 1.3em;
}

.qlm-qd-field-source {
	font-size: 0.82em;
	color: #667079;
	margin: 0.5em 0 0;
	padding-top: 0.4em;
	border-top: 1px solid #e6edf3;
}

.qlm-qd-checked-at,
.qlm-qd-newtab,
.qlm-qd-source-note {
	display: inline-block;
	margin-left: 0.3em;
}

/* ---------------------------------------------------------------------
 * 資格詳細ページCTA・収益化導線：学習／求人スロット。控えめなカードとし、
 * 資格情報が主役であることを崩さない（画像・タイトル・説明・リンクのみのシンプルな構成）。
 * ------------------------------------------------------------------- */

.qlm-qd-cta {
	background: #fdfdfb;
	border: 1px solid #ece7da;
	border-radius: 10px;
	padding: 1em 1.1em;
	margin: 0 0 1.5em;
}

.qlm-qd-cta-pr {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	color: #8a6d1a;
	background: #fdf3d8;
	border-radius: 4px;
	padding: 0.15em 0.5em;
	margin-bottom: 0.5em;
}

.qlm-qd-cta-image {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 0.6em;
	display: block;
}

.qlm-qd-cta-title {
	font-size: 1rem;
	margin: 0 0 0.4em;
}

.qlm-qd-cta-description {
	font-size: 0.92em;
	color: #556370;
	margin: 0 0 0.75em;
}

.qlm-qd-cta-link {
	display: inline-block;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * スマホ幅（320〜430px程度）での安全性。auto-fit gridは基本的に自動で1〜2列に縮むが、
 * 極小幅では明示的に1列へ固定し、横スクロール・数値カードの潰れを防ぐ。
 * ------------------------------------------------------------------- */

@media ( max-width: 380px ) {
	.qlm-qd-facts,
	.qlm-qd-facts--salary,
	.qlm-qd-section-body {
		grid-template-columns: 1fr;
	}
}