/* =====================================================================
 * えらぶピラティス｜資格・スクール比較（承認済み7画面デザインの再現）
 * 既存テーマの :root トークン（--bg / --ink / --accent など）を使い、
 * すべて .qc 配下に限定して既存ページへ影響しないようにしている。
 * ===================================================================== */
.qc {
	/* ボタン・選択状態の色は本番サイト（.fv-cta / .btn-primary / .filter-tag）に合わせる */
	--qc-brown: var(--accent-deep, #8A6A42);
	--qc-brown-deep: #6F5434;
	--qc-chip: var(--accent-deep, #8A6A42);
	--qc-radius: 10px;
	--qc-shadow: 0 2px 10px rgba(80, 60, 40, .06);
	color: var(--ink, #2B2620);
	background: var(--bg, #FAF7F1);
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.75;
	padding-bottom: 64px;
}
.qc *, .qc *::before, .qc *::after { box-sizing: border-box; }
.qc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* 本番 .wrap と同じ */

/* ---- 小見出し（本番 .eyebrow「— 小見出し」と同じ見た目） ---- */
.qc-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--accent-deep, #8A6A42); letter-spacing: .04em; margin: 0 0 14px; }
.qc-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; flex: none; }
.qc h1, .qc h2, .qc h3 { font-family: 'Shippori Mincho', serif; color: var(--ink, #2B2620); font-weight: 600; letter-spacing: .02em; }
.qc a:not(.qc-btn) { color: inherit; }
.qc a.qc-btn { text-decoration: none; }
.qc a.qc-btn--primary, .qc a.qc-btn--coral { color: #fff; }
.qc a.qc-btn--outline { color: var(--ink, #2B2620); }
.qc [tabindex="-1"]:focus { outline: none; } /* 画面切替時の見出しへのフォーカス移動（読み上げ用）では枠を出さない */
.qc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- breadcrumb ---- */
.qc-crumb { font-size: 12px; color: var(--ink-muted, #7A7062); padding: 18px 0 0; }
.qc-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.qc-crumb span { margin: 0 6px; }

/* ---- buttons ---- */
/* 本番 .fv-cta / .btn-primary と同じ: 角丸 4px・文字のあとに「→」 */
.qc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 26px;
	border-radius: 4px; font-size: 15px; font-weight: 500; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease; font-family: inherit; }
.qc-btn::after { content: '→'; font-size: 15px; line-height: 1; }
.qc-btn--plain::after, .qc-btn--back::after { content: none; }
.qc-btn--primary, .qc-btn--coral { background: var(--qc-brown); color: #fff; } /* 珊瑚色は廃止し本番の茶色に統一 */
.qc-btn--primary:hover, .qc-btn--coral:hover { background: var(--qc-brown-deep); }
.qc-btn--outline { background: rgba(255, 255, 255, .86); color: var(--ink); border-color: var(--accent, #A9865B); }
.qc-btn--outline:hover { border-color: var(--qc-brown); }
.qc-btn--small { min-height: 38px; padding: 0 16px; font-size: 13px; gap: 8px; }
.qc-btn--back { background: none; border: none; color: var(--ink-soft, #584F42); padding: 0 6px; }
.qc-btn--back::before { content: '←'; font-size: 15px; }
.qc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- chips / tags ---- */
.qc-tag { display: inline-block; font-size: 11px; line-height: 1; padding: 5px 8px; border: 1px solid var(--tag-line, #E2D5C0);
	background: var(--surface, #FFFDFA); color: var(--tag-ink, #6E5B44); border-radius: 3px; margin: 0 4px 4px 0; white-space: nowrap; }
.qc-tag--org { border-color: #cdbca3; }
.qc-badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 3px; line-height: 1.3; }
.qc-badge--warn { background: #FCEBE7; color: #9C3D33; }
.qc-badge--muted { background: var(--tag-bg, #F6EFE3); color: var(--ink-muted, #7A7062); }
.qc-badge--ok { background: #E9F0EA; color: #3D6B57; }
.qc-badge--pr { background: #EFE7DB; color: var(--qc-brown); font-weight: 700; }
.qc-unk { display: inline-block; color: var(--ink-muted, #7A7062); font-size: 11px; line-height: 1.4; padding: 1px 6px; border: 1px dashed #c9b9a1; border-radius: 3px; font-weight: 400; }

/* ---- 承認済みイラスト（原寸から切り出し。縦横比を保ち、引き伸ばし・切り抜きをしない） ---- */
.qc-illust { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px;
	background: rgb(252, 251, 244); /* 元画像の背景色と同じ面にして、画像の縁を目立たせない */ }

/* ---- placeholders (承認済み素材が届くまで。独自のイラストは作らない) ---- */
.qc-ph { display: flex; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed #cdbca3;
	background: repeating-linear-gradient(45deg, #F7F1E7, #F7F1E7 10px, #F3EBDF 10px, #F3EBDF 20px);
	color: var(--ink-muted, #7A7062); font-size: 12px; line-height: 1.6; border-radius: 8px; padding: 10px; }
.qc-ph--photo { aspect-ratio: 4 / 3; }
.qc-ph--figure { aspect-ratio: 3 / 4; border-radius: 50% 50% 12px 12px / 30% 30% 12px 12px; }
.qc-ph--wide { aspect-ratio: auto; height: clamp(140px, 22vw, 240px); border-radius: 0; }
/* スクールカードの画像（掲載許諾済み写真／統一イラスト）。どちらも同じ 16:9 の枠に合わせて切り抜く */
.qc-media { aspect-ratio: 16 / 9; align-self: start; overflow: hidden; border-radius: 8px; background: #F7F1E7; }
.qc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- hero (② 画像なしのシンプルなヒーロー＋線画) ---- */
.qc-hero { background: linear-gradient(180deg, var(--bg-hero-top, #FBF6EE), var(--bg-hero, #F7F0E4)); border-bottom: 1px solid var(--line-soft, #EBE2D4); }
.qc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 40px 0 64px; }
.qc-hero h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.5; letter-spacing: .04em; margin: 0 0 18px; }
.qc-nb { display: inline-block; }
.qc-card__provider { font-size: 11px; color: var(--ink-muted, #7A7062); margin: -4px 0 8px; line-height: 1.5; }
.qc-hero p { color: var(--ink-soft, #584F42); margin: 0 0 28px; font-size: 15px; line-height: 2; }
.qc-hero p.qc-eyebrow { margin: 0 0 18px; font-size: 13px; line-height: 1.4; color: var(--accent-deep, #8A6A42); }
.qc-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* 比較と診断の2導線 */
.qc-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 16px; }
.qc-path { display: flex; flex-direction: column; gap: 8px; }
.qc-path__label { font-size: 12px; color: var(--ink-muted, #7A7062); letter-spacing: .04em; }
.qc-path__desc { font-size: 12px; color: var(--ink-soft, #584F42); line-height: 1.6; }
.qc-path .qc-btn { width: 100%; }
/* 承認済みの線画（本を読む女性）を置く領域 */
.qc-hero__figure { width: 100%; max-width: 460px; justify-self: end; }

/* ---- filters ---- */
.qc-filters { padding: 26px 0 8px; }
.qc-filter { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.qc-filter__label { font-weight: 700; font-size: 13px; padding-top: 6px; }
.qc-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 本番 .filter-tag と同じピル型 */
.qc-chip { font: inherit; font-size: 13px; line-height: 1.4; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--tag-line, #E2D5C0);
	background: var(--white, #fff); color: var(--ink-soft, #584F42); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.qc-chip[aria-pressed="true"] { background: var(--qc-chip); border-color: var(--qc-chip); color: #fff; }
.qc-chip small { opacity: .75; margin-left: 4px; }
.qc-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0 12px; flex-wrap: wrap; }
.qc-resultbar__count { font-size: 14px; }
.qc-select { font: inherit; font-size: 13px; padding: 8px 32px 8px 12px; border: 1px solid var(--line, #DED2BF); border-radius: 4px; background: var(--surface, #FFFDFA); color: var(--ink); }
/* 並び替えセレクトは最長の選択肢の幅になるため、狭い画面では親の幅で止める（320px でのページ横スクロール対策） */
.qc-resultbar > label { min-width: 0; max-width: 100%; }
.qc-select { max-width: 100%; text-overflow: ellipsis; }
.qc-note { font-size: 12px; color: var(--ink-muted, #7A7062); margin: 4px 0 0; }

/* ---- school cards (② / ⑦) ---- */
.qc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.qc-card { display: grid; grid-template-columns: 170px 1fr; gap: 16px; background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft, #EBE2D4);
	border-radius: var(--qc-radius); padding: 14px; box-shadow: var(--qc-shadow); }
.qc-card__title { font-family: 'Shippori Mincho', serif; font-size: 18px; font-weight: 600; margin: 2px 0 8px; line-height: 1.5; }
.qc-card__desc { font-size: 13px; color: var(--ink-soft, #584F42); margin: 6px 0 10px; }
.qc-card__meta { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1.4fr 1.2fr; gap: 8px 12px; align-items: start;
	border-top: 1px solid var(--line-soft, #EBE2D4); padding-top: 10px; font-size: 12px; margin: 0; }
.qc-card__meta .qc-btn { grid-column: 1 / -1; justify-self: end; }
.qc-card__meta small { color: var(--ink-muted, #7A7062); font-weight: 400; }
.qc-card__meta dt { color: var(--ink-muted, #7A7062); font-size: 11px; }
.qc-card__meta dd { margin: 0; font-weight: 500; }
.qc-empty { padding: 40px; text-align: center; background: var(--surface, #FFFDFA); border: 1px dashed var(--line, #DED2BF); border-radius: var(--qc-radius); }

/* ---- list page (⑦) ---- */
.qc-pagehead { padding: 22px 0 10px; }
.qc-pagehead h1 { font-size: clamp(24px, 3vw, 30px); margin: 10px 0 6px; }
.qc-pagehead p { color: var(--ink-soft); font-size: 14px; margin: 0; }
.qc-dropdowns { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0; }
.qc-rows { display: grid; gap: 12px; }
.qc-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; background: var(--surface, #FFFDFA);
	border: 1px solid var(--line-soft, #EBE2D4); border-radius: var(--qc-radius); padding: 12px; }
.qc-row h2 { font-size: 17px; margin: 0 0 6px; }
.qc-row p { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.qc-section { padding: 56px 0 0; }
.qc-section > h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 8px; }
.qc-section__lead { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.qc-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft, #EBE2D4); border-radius: var(--qc-radius); background: var(--surface, #FFFDFA); }
.qc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.qc-table th, .qc-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft, #EBE2D4); text-align: left; vertical-align: top; }
.qc-table thead th { background: var(--bg-tint, #F7F1E7); font-weight: 700; font-size: 12px; white-space: nowrap; position: sticky; top: 0; }
.qc-table td.qc-num { white-space: nowrap; }

/* ---- school detail (⑥) ---- */
.qc-detailhero { margin-top: 12px; }
.qc-detailhead { padding: 18px 0 6px; }
.qc-detailhead h1 { font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 8px; }
.qc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #DED2BF); margin: 18px 0 0; overflow-x: auto; position: sticky; top: 0;
	background: var(--bg, #FAF7F1); z-index: 2; }
.qc-tabs a { padding: 12px 14px; font-size: 13px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--ink-soft); }
.qc-tabs a:hover, .qc-tabs a.is-active { border-bottom-color: var(--qc-brown); color: var(--ink); font-weight: 700; }
.qc-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qc-feature { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); padding: 16px 10px; text-align: center; font-size: 13px; }
.qc-feature__icon { display: block; width: 34px; height: 34px; margin: 0 auto 8px; color: var(--accent-deep, #8A6A42); }
.qc-feature strong { display: block; font-size: 14px; }
.qc-dl { display: grid; grid-template-columns: 160px 1fr; border: 1px solid var(--line-soft); border-radius: var(--qc-radius); background: var(--surface, #FFFDFA); overflow: hidden; }
.qc-dl dt, .qc-dl dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.qc-dl dt { background: var(--bg-tint, #F7F1E7); font-weight: 700; }
.qc-course { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); padding: 18px; margin: 0 0 14px; }
.qc-course h3 { font-size: 18px; margin: 4px 0 10px; }
/* 詳細上部の重要情報 */
.qc-keyinfo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin: 18px 0 0;
	background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft, #EBE2D4); border-radius: var(--qc-radius); padding: 18px 20px; }
.qc-keyinfo dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.qc-keyinfo dt { font-size: 11px; color: var(--ink-muted, #7A7062); }
.qc-keyinfo dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.6; }
.qc-keyinfo dd small { font-weight: 400; color: var(--ink-muted, #7A7062); font-size: 11px; }
.qc-keyinfo__cta { display: grid; gap: 8px; min-width: 200px; }
/* 講座ごとの開閉 */
.qc-course--fold { padding: 0; }
.qc-course--fold > summary { list-style: none; cursor: pointer; padding: 16px 48px 14px 18px; position: relative; }
.qc-course--fold > summary::-webkit-details-marker { display: none; }
.qc-course--fold > summary::after { content: '+'; position: absolute; right: 18px; top: 18px; font-size: 22px; line-height: 1; color: var(--accent-deep, #8A6A42); }
.qc-course--fold[open] > summary::after { content: '−'; }
.qc-course--fold > summary h3 { margin: 6px 0 4px; }
.qc-course__price { font-size: 13px; color: var(--ink-soft, #584F42); }
.qc-course--fold > :not(summary) { margin-left: 18px; margin-right: 18px; }
.qc-course--fold > .qc-cta-row { margin-bottom: 18px; }
.qc-conflict { background: #FCF1EE; border: 1px solid #F0C9C1; border-radius: 6px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.qc-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.qc-route__step { background: var(--tag-bg, #F6EFE3); border: 1px solid var(--tag-line, #E2D5C0); border-radius: 999px; padding: 4px 12px; }
.qc-route__arrow { color: var(--accent, #A9865B); }
.qc-details summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.qc-details p { font-size: 12px; color: var(--ink-soft); white-space: pre-wrap; }
.qc-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---- diagnosis start (③) ---- */
.qc-dstart { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: 40px; padding: 40px 0 56px; align-items: start; }
.qc-flow li strong { display: block; font-size: 14px; }
.qc-flow li span { display: block; font-size: 12px; color: var(--ink-soft, #584F42); line-height: 1.6; }
.qc-dstart h1 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.5; margin: 0 0 12px; }
.qc-dstart__lead { color: var(--ink-soft); font-size: 14px; }
.qc-points { display: flex; gap: 14px; margin: 22px 0; flex-wrap: wrap; }
.qc-point { width: 118px; height: 118px; border-radius: 50%; background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 500; padding: 10px; }
.qc-point svg { width: 26px; height: 26px; color: var(--accent-deep); margin-bottom: 6px; }
.qc-dstart__cta { width: 100%; max-width: 520px; }
.qc-flow { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); padding: 16px 18px; }
.qc-flow h2 { font-size: 15px; margin: 0 0 10px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
.qc-flow ol { list-style: none; margin: 0; padding: 0; counter-reset: qcflow; }
.qc-flow li { counter-increment: qcflow; display: grid; grid-template-columns: 28px 1fr; gap: 8px; font-size: 13px; padding: 6px 0; }
.qc-flow li::before { content: counter(qcflow); width: 24px; height: 24px; border-radius: 50%; background: var(--qc-brown); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 12px; }
.qc-dstart__figure { max-width: 320px; margin: 0 auto 18px; } /* 女性インストラクター線画の領域 */

/* ---- diagnosis question (④) ---- */
.qc-q { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; padding: 40px 0 56px; align-items: start; }
.qc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.qc-progress__bar { flex: 1; height: 8px; background: var(--line-soft, #EBE2D4); border-radius: 999px; overflow: hidden; }
.qc-progress__bar span { display: block; height: 100%; background: var(--qc-brown); border-radius: 999px; transition: width .2s; }
.qc-progress__count { font-size: 13px; color: var(--ink-muted); min-width: 42px; text-align: right; }
.qc-q__no { font-family: 'Shippori Mincho', serif; font-size: 22px; color: var(--accent-deep); }
.qc-q h2 { font-size: clamp(20px, 2.6vw, 26px); margin: 2px 0 6px; line-height: 1.5; }
.qc-q__hint { font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; }
.qc-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
.qc-option { position: relative; font: inherit; font-size: 16px; line-height: 1.5; min-height: 64px; padding: 12px 40px; border-radius: 4px;
	border: 1px solid var(--tag-line, #E2D5C0); background: var(--white, #fff); color: var(--ink); cursor: pointer; text-align: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease; }
.qc-option:hover { border-color: var(--accent, #A9865B); }
.qc-option[aria-pressed="true"] { background: var(--qc-brown); border-color: var(--qc-brown); color: #fff; }
.qc-option[aria-pressed="true"]::before { content: '✓'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; }
.qc-options--small .qc-option { font-size: 13px; min-height: 48px; padding: 8px 32px; }
.qc-options--small .qc-option[aria-pressed="true"]::before { left: 12px; }
.qc-q__sub { margin-top: 14px; border: 1px solid var(--line-soft, #EBE2D4); border-radius: 8px; background: var(--surface, #FFFDFA); padding: 10px 14px; }
.qc-q__sub summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.qc-q__sub[open] summary { margin-bottom: 8px; }
.qc-q__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.qc-q__nav .qc-btn--coral { min-width: 200px; }

/* ---- diagnosis result (⑤) ---- */
.qc-result { display: grid; grid-template-columns: 260px 1fr 300px; gap: 22px; padding: 28px 0 10px; align-items: start; }
.qc-result__label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.qc-result h1 { font-size: clamp(22px, 2.8vw, 28px); margin: 6px 0 10px; }
.qc-result__lead { font-size: 14px; color: var(--ink-soft); }
.qc-panel { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); padding: 16px; }
.qc-panel h2 { font-size: 14px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; margin: 0 0 8px; }
.qc-checks { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.qc-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; padding: 4px 0; }
.qc-checks li::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #A9865B); color: #fff; font-size: 11px;
	display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.qc-match { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qc-mcard { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.qc-mcard__org { font-family: 'Shippori Mincho', serif; font-size: 17px; font-weight: 600; }
.qc-mcard__name { font-size: 13px; color: var(--ink-soft); }
.qc-mcard ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft); }
.qc-mcard .qc-cta-row { margin-top: auto; }
.qc-difflist { display: grid; gap: 8px; }
.qc-diff { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.qc-diff strong { font-weight: 700; }
/* The entire alternate-course card is one accessible link. */
.qc-diff--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.qc-diff--link:hover { border-color: var(--qc-brown, #8A6A42); background: #FAF5ED; }
.qc-diff--link:focus-visible { outline: 3px solid var(--qc-brown, #8A6A42); outline-offset: 3px; }
.qc-diff__action { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 12px; border: 1px solid var(--qc-brown, #8A6A42); border-radius: 4px; color: var(--qc-brown, #8A6A42); font-weight: 700; }
.qc-diff--link:hover .qc-diff__action { background: var(--qc-brown, #8A6A42); color: #fff; }
@media (prefers-reduced-motion: reduce) { .qc-diff--link { transition: none; } }
/* 申し込み導線（lead-ctas.json）。メイン＝オレンジ・白文字・太字、サブ＝白地・オレンジの太枠。ホバーで濃いオレンジ */
.qc-diff__leads { margin-top: 6px; }
.qc a.qc-lead { text-decoration: none; }
.qc-lead { font-weight: 700; border: 2px solid #E56B16; border-radius: 6px; min-height: 44px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.qc a.qc-lead--main, .qc-lead--main { background: #E56B16; color: #fff; }
.qc a.qc-lead--main:hover, .qc-lead--main:hover { background: #C9580C; border-color: #C9580C; color: #fff; }
.qc a.qc-lead--sub, .qc-lead--sub { background: #fff; color: #C9580C; }
.qc a.qc-lead--sub:hover, .qc-lead--sub:hover { background: #FFF3EA; border-color: #C9580C; color: #A94A0A; }
.qc-lead:focus-visible { outline: 3px solid #E56B16; outline-offset: 3px; }
.qc-lead--large { min-height: 56px; font-size: 16px; padding: 0 24px; }
.qc-leadband { margin: 16px 0 8px; padding: 0; }
.qc-leadband__btns { display: grid; grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); gap: 12px; }
.qc-leadband__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-muted, #7A7062); text-align: center; }
@media (prefers-reduced-motion: reduce) { .qc-lead { transition: none; } }
@media (max-width: 560px) {
	.qc-leadband__btns { grid-template-columns: 1fr; }
	.qc-cta-row .qc-lead { flex: 1 1 100%; min-height: 48px; }
}

.qc-result h1 small { font-size: 13px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; color: var(--ink-muted, #7A7062); margin-left: 6px; }
/* タイプ名・説明の表示領域（12タイプ判定の接続待ち。架空のタイプは出さない） */
.qc-typeslot { display: flex; flex-direction: column; gap: 4px; border: 1.5px dashed #cdbca3; border-radius: 8px; padding: 14px 16px; margin: 8px 0 16px;
	background: rgba(255, 255, 255, .5); }
.qc-typeslot__name { font-family: 'Shippori Mincho', serif; font-size: 20px; color: var(--ink-muted, #7A7062); }
.qc-typeslot__note { font-size: 12px; color: var(--ink-muted, #7A7062); }
/* 資格取得ロードマップ */
.qc-roadmap { display: grid; gap: 10px; }
.qc-roadmap__row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; background: var(--surface, #FFFDFA);
	border: 1px solid var(--line-soft, #EBE2D4); border-radius: 8px; padding: 12px 16px; }
.qc-roadmap__org { font-family: 'Shippori Mincho', serif; font-weight: 600; }
.qc-roadmap__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.qc-roadmap__steps li { display: flex; align-items: center; gap: 6px; }
.qc-roadmap__steps li + li::before { content: '→'; color: var(--accent, #A9865B); }
.qc-roadmap__steps span { background: var(--tag-bg, #F6EFE3); border: 1px solid var(--tag-line, #E2D5C0); border-radius: 999px; padding: 4px 12px; }
.qc-roadmap__steps li.is-goal span { background: var(--qc-brown); border-color: var(--qc-brown); color: #fff; }
/* 講座カード（左）＋アドバイス（右） */
.qc-result__main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.qc-result__main .qc-match { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-result__advice { position: sticky; top: 16px; margin-top: 56px; }
.qc-result__advice-actions { display: grid; gap: 8px; margin-top: 12px; }
.qc-result__advice-actions .qc-btn { width: 100%; }
.qc-mcard__cost { font-size: 13px; }
.qc-mcard__conf { font-size: 12px; }
.qc-mcard__conf summary { cursor: pointer; color: var(--ink-soft, #584F42); margin-top: 4px; }
/* 12タイプ判定（v4.1）の結果表示（結果文案 v2）。既存のトークン・角丸・罫線を使う */
.qc-result--hero { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; padding: 36px 0 8px; align-items: center; }
.qc-typehero__lead { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--ink-soft, #584F42); }
.qc-result .qc-typehero__name { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.4; margin: 0 0 8px; }
.qc-typehero__catch { font-family: 'Shippori Mincho', serif; font-size: clamp(17px, 2vw, 20px); color: var(--accent-deep, #8A6A42); margin: 0 0 18px; line-height: 1.7; }
.qc-typehero__msg { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.qc-typehero__body { font-size: 14px; line-height: 1.9; color: var(--ink-soft, #584F42); margin: 0 0 12px; max-width: 640px; }
.qc-typeguide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin: 20px 0 8px; }
.qc-typeguide .qc-panel { padding: 18px 20px; }
.qc-typeguide .qc-panel h2 { font-size: 15px; }
.qc-typeguide .qc-checks { font-size: 14px; }
.qc-typeguide__first p { font-size: 14px; line-height: 1.8; margin: 0; }
.qc-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qc-chips li { font-size: 12px; background: var(--tag-bg, #F6EFE3); border: 1px solid var(--tag-line, #E2D5C0); border-radius: 999px; padding: 4px 12px; }
.qc-more summary { cursor: pointer; font-size: 12px; color: var(--ink-soft, #584F42); }
.qc-more[open] summary { margin-bottom: 6px; }
.qc-more .qc-roadmap__steps { font-size: 12px; }
.qc-relaxnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; margin: 0 0 12px; padding: 10px 14px;
	border: 1px solid var(--line-soft, #EBE2D4); border-radius: 8px; background: var(--surface, #FFFDFA); }
/* 講座カードの比較項目（PC・スマホとも同じ順番） */
.qc-mcard__school { font-size: 12px; color: var(--ink-muted, #7A7062); }
.qc-mcard h3.qc-mcard__name { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.6; }
.qc-cardfacts { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 6px 10px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; }
.qc-cardfacts dt { color: var(--ink-muted, #7A7062); }
.qc-cardfacts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.qc-cardfacts small { font-size: 11.5px; color: var(--ink-soft, #584F42); }
.qc-cardfacts--detail { margin-bottom: 8px; }
.qc-tagchip { display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 8px; margin: 0 4px 3px 0; border: 1px solid var(--tag-line, #E2D5C0);
	background: var(--tag-bg, #F6EFE3); border-radius: 999px; color: var(--ink); }
.qc-mcard__check { font-size: 12px; color: var(--ink-soft, #584F42); margin: 0; }
.qc-mcard__warn { font-size: 12px; margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent-deep, #8A6A42); background: var(--tag-bg, #F6EFE3); }
.qc-dfilter__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; margin: 10px 0 0; }
.qc-dfilter__chosen > span { color: var(--ink-muted, #7A7062); }
.qc-cardroute { font-size: 12px; margin: 6px 0; }
.qc-count { font-size: 13px; color: var(--ink-soft, #584F42); margin: -4px 0 12px; }
/* 絞り込み */
.qc-dfilter { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft, #EBE2D4); border-radius: var(--qc-radius); padding: 18px 20px; margin: 24px 0 4px; }
.qc-dfilter h2 { font-size: 16px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; margin: 0 0 2px; }
.qc-dfilter__row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; margin-top: 12px; }
.qc-dfilter__row label, .qc-dfilter__group { display: grid; gap: 4px; font-size: 13px; }
.qc-dfilter__row label > span, .qc-dfilter__group > span { color: var(--ink-muted, #7A7062); font-size: 12px; }
.qc-dfilter__group { margin-top: 12px; }
.qc-dfilter__group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-dfilter__more { margin-top: 12px; border-top: 1px solid var(--line-soft, #EBE2D4); padding-top: 10px; }
.qc-dfilter__more summary { cursor: pointer; font-size: 13px; }
.qc-dfilter__actions { margin-top: 12px; }
.qc-pill { font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--tag-line, #E2D5C0); background: var(--white, #fff); color: var(--ink); cursor: pointer; }
.qc-pill[aria-pressed="true"] { background: var(--qc-brown); border-color: var(--qc-brown); color: #fff; }
.qc-zero__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.qc-zero__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.qc-costs { font-size: 12px; color: var(--ink-soft, #584F42); display: grid; gap: 6px; }
.qc-costs strong { color: var(--ink); font-size: 13px; }
.qc-costs__total { font-size: 13px; color: var(--ink); }
.qc-costs details summary { cursor: pointer; }
.qc-costs dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 6px 0; }
.qc-costs dt { color: var(--ink-muted, #7A7062); }
.qc-costs dd { margin: 0; }
.qc-costs__step { border-top: 1px solid var(--line-soft, #EBE2D4); padding-top: 6px; margin-top: 6px; }
.qc-costs__after { border-top: 1px dashed var(--line, #DED2BF); padding-top: 6px; }
.qc-zero { background: var(--surface, #FFFDFA); border: 1px dashed var(--line, #DED2BF); border-radius: var(--qc-radius); padding: 18px 20px; font-size: 14px; }
.qc-zero h3 { font-size: 14px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; margin: 14px 0 6px; }
.qc-zero ul { margin: 0; padding-left: 20px; }
.qc-diff__conf { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-muted, #7A7062); }
@media (max-width: 860px) {
	.qc-result--hero { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; }
	.qc-result--hero .qc-result__figure { max-width: 260px; margin: 0 auto; }
	.qc-typeguide { grid-template-columns: 1fr; }
}

/* ---- responsive ---- */
@media (max-width: 1000px) {
	.qc-result { grid-template-columns: 1fr; }
	.qc-result__main { grid-template-columns: 1fr; }
	.qc-result__advice { position: static; margin-top: 40px; }
	.qc-roadmap__row { grid-template-columns: 1fr; gap: 6px; }
	.qc-result__figure { max-width: 180px; }
	.qc-match { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.qc-cards { grid-template-columns: 1fr; }
	.qc-hero__inner, .qc-dstart, .qc-q { grid-template-columns: 1fr; }
	.qc-hero__inner { padding: 24px 0 40px; gap: 20px; }
	.qc-hero__figure { justify-self: center; max-width: 420px; order: -1; }
	.qc-dstart__figure { max-width: 300px; }
	.qc-q__figure { order: -1; width: 100%; max-width: 200px; margin: 0 auto -8px; }
	.qc-features { grid-template-columns: repeat(2, 1fr); }
	.qc-keyinfo { grid-template-columns: 1fr; }
	.qc-keyinfo dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.qc-wrap { padding: 0 16px; }
	.qc-filter { grid-template-columns: 1fr; gap: 4px; }
	.qc-filter__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.qc-chip { white-space: nowrap; }
	.qc-card { grid-template-columns: 1fr; }
	.qc-card .qc-ph--photo { aspect-ratio: 16 / 7; }
	.qc-card__meta { grid-template-columns: 1fr 1fr; }
	.qc-card__meta .qc-btn { grid-column: 1 / -1; }
	.qc-row { grid-template-columns: 1fr; }
	.qc-row .qc-ph--photo { aspect-ratio: 16 / 6; }
	.qc-row .qc-btn { justify-self: end; }
	.qc-dropdowns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.qc-dropdowns label, .qc-dropdowns select { display: block; width: 100%; }
	.qc-hero__ctas .qc-btn, .qc-dstart__cta { width: 100%; }
	.qc-options { grid-template-columns: 1fr; gap: 10px; }
	.qc-option { min-height: 58px; font-size: 16px; }
	.qc-options--small { grid-template-columns: 1fr 1fr; }
	.qc-q__nav { position: sticky; bottom: 0; background: var(--bg, #FAF7F1); padding: 12px 0; margin-top: 8px; border-top: 1px solid var(--line-soft, #EBE2D4); }
	.qc-q__nav .qc-btn--coral { flex: 1; min-width: 0; }
	.qc-paths { grid-template-columns: 1fr; }
	.qc-match, .qc-result__main .qc-match { grid-template-columns: 1fr; }
	.qc-result__figure { max-width: 300px; margin: 0 auto; }
	.qc-table td .qc-unk, .qc-cell .qc-unk { width: max-content; }
	.qc-dl { grid-template-columns: 1fr; }
	.qc-dl dt { border-bottom: none; padding-bottom: 2px; }
	.qc-point { width: 96px; height: 96px; font-size: 11px; }
	/* 比較表はカード表示に切り替え */
	.qc-tablewrap { border: none; background: none; overflow: visible; }
	.qc-table { min-width: 0; }
	.qc-table thead { display: none; }
	.qc-table, .qc-table tbody, .qc-table tr, .qc-table td { display: block; width: 100%; }
	.qc-table tr { background: var(--surface, #FFFDFA); border: 1px solid var(--line-soft); border-radius: var(--qc-radius); margin-bottom: 10px; padding: 6px 0; }
	.qc-table td { border: none; padding: 4px 12px; display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
	.qc-table td::before { content: attr(data-label); font-size: 11px; color: var(--ink-muted); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .qc * { transition: none !important; } }
/* 講座カードの要約表示（course-display.json）: 結論を短く、補足は小さく */
.qc-short { font-weight: 700; }
.qc-subnote { display: inline-block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--ink-muted, #7A7062); }
/* 申し込み導線: オレンジのボタンは1つ（primary）、2件目は控えめなテキストリンク（secondary） */
.qc-lead-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.qc-lead-group--large { align-items: center; grid-column: 1 / -1; }
.qc-lead-group--large .qc-lead--main { width: min( 100%, 480px ); }
.qc a.qc-lead-link { color: #C9580C; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qc a.qc-lead-link::after { content: " →"; }
.qc a.qc-lead-link:hover { color: #A94A0A; }
.qc-lead-scope { font-size: 11px; color: var(--ink-muted, #7A7062); }
/* 受講条件（条件がある講座だけ）。前提講座へのリンクはテキストリンクで、申し込みボタンより目立たせない */
.qc-req { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #F1C9AB; border-radius: 8px; background: #FFF7F1; font-size: 13px; }
.qc-req p { margin: 0; }
.qc-req__head { font-weight: 700; color: #C9580C; }
.qc-req__text { margin-top: 4px !important; line-height: 1.7; }
.qc-req__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #F1C9AB; }
.qc-req__links span { flex: 1 1 100%; font-size: 12px; color: var(--ink-soft, #584F42); }
.qc a.qc-req__link { color: #C9580C; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qc a.qc-req__link::after { content: " →"; }
.qc-req--check { margin: 12px 0 0; font-size: 12px; color: var(--ink-muted, #7A7062); }
.qc a.qc-official-link { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
	.qc-cta-row .qc-lead-group { flex: 1 1 100%; align-items: stretch; text-align: center; }
	.qc-cta-row .qc-lead-group .qc-lead { width: 100%; }
}
/* 前提講座リンク・#course-xxx で移動したとき、固定のページ内メニューに隠れないようにする */
.qc-course--fold { scroll-margin-top: 72px; }
/* stg8: 公式内の食い違いは該当欄に短く。共通窓口への案内は控えめなテキストリンク */
.qc-conflict-note { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #A23B2C; }
.qc a.qc-lead-jump { align-self: center; font-size: 13px; color: var(--ink-soft, #584F42); text-decoration: underline; text-underline-offset: 3px; }
.qc a.qc-lead-jump::after { content: " ↑"; }
.qc-leadband { scroll-margin-top: 72px; }