/* =========================================================
   Koumuin Exam Database — public CSS
   すべて .ked- / --ked- プレフィックス。SWELL既存CSSを無差別に上書きしない。
   出典: docs/ked-ui-mock.html（デザインの正本）。
   モックの style 要素から mock only ブロックを除いたものを下敷きにし、
   末尾に「SWELLとの噛み合わせ」を足している。

   姉妹サイトとの関係（設計書 §14.1）
   - 構造・余白・角丸・影・フォント指定は公務員転職DB（kcd.css）と同一
   - 差分はカラートークンだけ。本サイトはロゴに合わせた青・紺（2026-09-15変更）
   - ヒーローは色で塗らず、淡い地に濃い文字を置く（塗る面積で軽さを作る）
   ========================================================= */



:root {
	/*
	 * 色はロゴから採っている（2026-09-15にmiyaの指示で藤紫から変更）。
	 * ロゴの実測値: 紺 #07386C ／ 青 #0067BC ／ 明るい青 #1D8BE1 ／ 淡い青 #EBF6FD
	 * 文字色・罫線も、灰色ではなく紺に寄せた色にして全体を一続きに見せる。
	 *
	 * ただし面として広く塗る色に紺は使わない。ロゴの #07386C は重く浮き、
	 * ゆるめた紺（#215383）でもまだ違和感がある、というmiyaの判断で、
	 * 塗りは青〜水色寄りの #0B6FB5 にしている（2026-09-15）。
	 * ロゴそのものの紺は変えていない。
	 *
	 * この明るさが上限。これ以上明るくすると白文字が 4.5:1 を割る。
	 * 明るくした分、CTAの小さい文字とフッターの文字も白に寄せてある。
	 */
	--ked-ink: #17263C;
	--ked-ink-soft: #46586E;
	--ked-ink-mute: #5F7081;
	--ked-line: #DCE7F1;
	--ked-line-soft: #EDF3F9;
	--ked-paper: #FFFFFF;

	--ked-ground: #FAFCFE;
	--ked-sky: #EFF6FC;
	--ked-footer: #0B6FB5;

	--ked-brand: #0067BC;
	--ked-brand-dark: #00528F;
	--ked-brand-deep: #0B6FB5;
	/* 淡い面（tint）に乗せる小さい文字用。brand をそのまま使うと基準を割ることがある。 */
	--ked-brand-ontint: #005696;
	--ked-hero-top: #F6FAFE;
	--ked-hero-bottom: #E4F0FA;
	--ked-brand-tint: #EBF6FD;

	/*
	 * 合否は色だけでなく必ず文字でも示す。不合格に刺激的な赤は使わない。
	 * 不合格のスレートは、青のリンクやボタンと取り違えないよう彩度を落としてある。
	 */
	--ked-pass: #1F7A4D;
	--ked-pass-bg: #E8F5EE;
	--ked-fail: #55606E;
	--ked-fail-bg: #EFF1F4;
	--ked-pending: #8A6318;
	--ked-pending-bg: #FBF3DF;

	--ked-gain: #3AA131;
	--ked-star: #F5A623;
	--ked-star-empty: #DCE3EA;

	--ked-font-display: "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
	--ked-font-body: "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
	--ked-font-data: ui-monospace, "SFMono-Regular", "Roboto Mono", "Courier New", monospace;

	--ked-s1: 4px; --ked-s2: 8px; --ked-s3: 12px; --ked-s4: 16px;
	--ked-s5: 24px; --ked-s6: 32px; --ked-s7: 48px; --ked-s8: 64px;

	--ked-radius: 10px;
	--ked-radius-sm: 6px;
	--ked-radius-lg: 16px;
	--ked-shadow: 0 1px 2px rgba(7, 56, 108, .05), 0 4px 12px rgba(7, 56, 108, .06);
}

/* =========================================================
   ヒーロー
   ========================================================= */
.ked-hero {
	padding: clamp(40px, 6vw, 72px) 20px clamp(48px, 7vw, 80px);
	background: linear-gradient(180deg, var(--ked-hero-top) 0%, var(--ked-hero-bottom) 100%);
	border-bottom: 1px solid var(--ked-line);
	overflow: hidden;
}
@media (max-width: 480px) { .ked-hero { padding-left: 16px; padding-right: 16px; } }
.ked-hero > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.ked-hero .ked-eyebrow { color: var(--ked-brand-ontint); margin: 0 0 var(--ked-s2); }
.ked-hero__kicker { color: var(--ked-brand-ontint); font-weight: 700; font-size: 17px; line-height: 1.5; letter-spacing: .04em; margin: 0 0 var(--ked-s3); }
@media (min-width: 768px) { .ked-hero__kicker { font-size: 22px; } }
.ked-hero__mark { background: var(--ked-brand-deep); color: #fff; padding: .04em .22em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ked-hero__badge {
	position: relative; display: inline-block; background: var(--ked-brand-deep); color: #fff;
	font-size: 13px; font-weight: 700; line-height: 1.5; padding: 8px 16px; border-radius: 999px; margin: 0 0 var(--ked-s4);
}
.ked-hero__badge::after { content: ""; position: absolute; left: 28px; bottom: -6px; width: 12px; height: 12px; background: var(--ked-brand-deep); transform: rotate(45deg); border-radius: 2px; }
.ked-hero h1.ked-hero__title { color: var(--ked-ink); font-family: var(--ked-font-display); font-weight: 700; margin: 0 0 var(--ked-s5); font-size: 28px; line-height: 1.4; letter-spacing: .01em; }
@media (min-width: 768px) { .ked-hero h1.ked-hero__title { font-size: 42px; } }
.ked-hero .ked-hero__count { font-family: var(--ked-font-data); font-variant-numeric: tabular-nums; color: var(--ked-brand-ontint); margin: 0 2px; }
.ked-hero .ked-hero__lead { color: var(--ked-ink-soft); font-size: 15px; line-height: 1.85; margin: 0 0 var(--ked-s6); max-width: 40em; }
.ked-hero .ked-search { box-shadow: 0 2px 6px rgba(7, 56, 108, .07), 0 10px 28px rgba(7, 56, 108, .10); }
.ked-hero .ked-hero__lead + .ked-hero__lead { margin-top: calc(var(--ked-s6) * -1 + var(--ked-s3)); }
.ked-hero .ked-hero__lead strong { color: var(--ked-ink); font-weight: 700; }
.ked-hero .ked-hero__cta { margin: 0 0 var(--ked-s6); }
#ked-hero-search { scroll-margin-top: 80px; }
.ked-br-pc { display: none; }
.ked-phrase { display: inline-block; }
@media (min-width: 768px) { .ked-br-pc { display: inline; } }

/* =========================================================
   帯
   ========================================================= */
.ked-band { padding: clamp(48px, 7vw, 100px) 20px; }
.ked-band > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.ked-band--white { background: var(--ked-paper); }
.ked-band--mist { background: var(--ked-ground); }
.ked-band--sky { background: var(--ked-sky); }
@media (max-width: 480px) { .ked-band { padding-left: 16px; padding-right: 16px; } }
.ked-band h2 {
	font-family: var(--ked-font-display); font-weight: 700;
	font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; letter-spacing: .01em;
	color: var(--ked-ink); margin: 0 0 var(--ked-s5);
}
.ked-band h2::before { content: ""; display: block; width: 28px; height: 1px; background: #A9CDEB; margin: 0 0 var(--ked-s4); }
.ked-band p { font-size: clamp(15px, 1.5vw, 16px); line-height: 1.9; color: var(--ked-ink-soft); }
.ked-band__foot { margin-top: var(--ked-s5); }

/* =========================================================
   共通
   ========================================================= */
.ked-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.ked-section { padding: var(--ked-s7) 0; }
.ked-section + .ked-section { padding-top: 0; }
@media (max-width: 767px) { .ked-wrap { padding: 0 16px; } }

.ked-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ked-brand); text-transform: uppercase; }
.ked-h2 { font-family: var(--ked-font-display); font-weight: 700; font-size: 20px; line-height: 1.5; margin: 0 0 var(--ked-s4); }
.ked-h2--rule { padding-bottom: var(--ked-s3); border-bottom: 1px solid var(--ked-line); }
.ked-lead { margin: 0 0 var(--ked-s5); color: var(--ked-ink-soft); font-size: 15px; }
.ked-num { font-family: var(--ked-font-data); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.ked-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 16px; font-weight: 600; line-height: 1; min-height: 48px; padding: 0 var(--ked-s5);
	border: 0; border-radius: var(--ked-radius-sm); background: var(--ked-brand); color: #fff;
	cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.ked-btn:hover { background: var(--ked-brand-dark); }
.ked-btn--block { width: 100%; }
.ked-btn--ghost { background: transparent; color: var(--ked-brand); border: 1px solid var(--ked-brand); min-height: 44px; font-size: 14px; }
.ked-btn--ghost:hover { background: var(--ked-brand-tint); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--ked-brand); outline-offset: 2px; }

/* =========================================================
   検索フォーム（3項目）
   ========================================================= */
.ked-search {
	background: var(--ked-paper); border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius-lg); padding: var(--ked-s5); box-shadow: var(--ked-shadow);
}
.ked-search__title {
	font-size: 18px; font-weight: 600; margin: 0 0 var(--ked-s5);
	padding-bottom: var(--ked-s3); border-bottom: 1px solid var(--ked-line-soft); color: var(--ked-ink);
}
.ked-search__grid { display: grid; gap: var(--ked-s3); }
.ked-field { display: block; }
.ked-field__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ked-ink-mute); margin-bottom: 6px; }
.ked-select {
	-webkit-appearance: none; appearance: none; width: 100%;
	font-family: var(--ked-font-body); font-size: 16px; color: var(--ked-ink);
	min-height: 48px; padding: 0 40px 0 var(--ked-s4);
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230067BC' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--ked-line); border-radius: var(--ked-radius-sm);
}
.ked-select:hover { border-color: var(--ked-brand); }
/* 受験先は 分類 → 地域 → 具体名 の段階表示。画面上の主項目は3つに保つ。 */
.ked-field__steps { display: grid; gap: var(--ked-s2); }
.ked-field__steps .ked-select { font-size: 15px; min-height: 44px; }
.ked-search__submit { margin-top: var(--ked-s4); }
.ked-search__hint { margin: var(--ked-s3) 0 0; font-size: 12px; color: var(--ked-ink-mute); text-align: center; }
@media (min-width: 768px) {
	.ked-search { padding: var(--ked-s6); }
	.ked-search__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--ked-s4); align-items: start; }
	.ked-search__submit { max-width: 360px; margin-left: auto; margin-right: auto; display: flex; }
}
@media (max-width: 767px) { .ked-search__submit { width: 100%; min-height: 50px; } }

/* =========================================================
   受験者の声（横に流れる帯）
   ========================================================= */
.ked-voices { padding: var(--ked-s5) 0 clamp(40px, 6vw, 64px); background: var(--ked-sky); border-bottom: 1px solid var(--ked-line); overflow: hidden; }
.ked-voices__label {
	position: relative; display: table; margin: 0 auto var(--ked-s5);
	background: var(--ked-brand-deep); color: #fff; font-size: 14px; font-weight: 700;
	line-height: 1.5; padding: 10px 20px; border-radius: var(--ked-radius);
}
.ked-voices__label::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--ked-brand-deep); transform: rotate(45deg); border-radius: 2px; }
.ked-voices__viewport { overflow: hidden; }
.ked-voices__track { display: flex; gap: var(--ked-s4); width: max-content; margin: 0; padding: 0; list-style: none; animation: ked-marquee 60s linear infinite; }
.ked-voices:hover .ked-voices__track, .ked-voices:focus-within .ked-voices__track { animation-play-state: paused; }
@keyframes ked-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ked-voices__item { flex: 0 0 auto; width: 310px; }
@media (max-width: 767px) { .ked-voices__item { width: 272px; } }
.ked-voice {
	display: block; height: 100%; padding: var(--ked-s4); background: var(--ked-paper);
	border-radius: var(--ked-radius); box-shadow: 0 2px 6px rgba(0,0,0,.12);
	text-decoration: none; color: var(--ked-ink); transition: transform .15s ease, box-shadow .15s ease;
}
.ked-voice:hover { transform: translateY(-2px); border-color: var(--ked-brand); }
.ked-voice__text { display: block; font-size: 13px; line-height: 1.75; color: var(--ked-ink-soft); margin-top: var(--ked-s2); }
.ked-voice__meta { display: block; margin-top: var(--ked-s2); font-size: 11px; color: var(--ked-ink-mute); }

/* =========================================================
   合否バッジ
   ========================================================= */
.ked-result { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ked-ink-soft); }
.ked-result__mark {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; line-height: 1; padding: 7px 10px; border-radius: 3px;
}
.ked-result--pass .ked-result__mark { background: var(--ked-pass-bg); color: var(--ked-pass); }
.ked-result--fail .ked-result__mark { background: var(--ked-fail-bg); color: var(--ked-fail); }
.ked-result--pending .ked-result__mark { background: var(--ked-pending-bg); color: var(--ked-pending); }

/* =========================================================
   3つの特徴
   ========================================================= */
.ked-features { display: grid; gap: var(--ked-s4); margin: 0 0 clamp(40px, 6vw, 72px); }
@media (min-width: 768px) { .ked-features { grid-template-columns: repeat(3, 1fr); gap: var(--ked-s5); } }
.ked-feature { display: flex; align-items: flex-start; gap: var(--ked-s3); }
.ked-feature__icon {
	flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	background: var(--ked-brand-tint); color: var(--ked-brand-ontint); border-radius: 8px;
	font-family: var(--ked-font-data); font-size: 14px; font-weight: 700; line-height: 1;
}
.ked-feature__title { display: block; font-size: clamp(15px, 1.4vw, 16px); font-weight: 700; line-height: 1.5; color: var(--ked-ink); margin-bottom: 4px; }
.ked-feature__text { display: block; font-size: clamp(13px, 1.3vw, 14px); line-height: 1.8; color: var(--ked-ink-soft); }

/* =========================================================
   統計
   ========================================================= */
.ked-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	border: 1px solid var(--ked-line); border-radius: var(--ked-radius);
	background: var(--ked-paper); overflow: hidden; box-shadow: var(--ked-shadow);
}
.ked-stats__item { padding: var(--ked-s5) var(--ked-s4); border-right: 1px solid var(--ked-line-soft); border-bottom: 1px solid var(--ked-line-soft); }
.ked-stats__item:last-child { border-right: 0; }
.ked-stats__label { display: block; font-size: 11px; letter-spacing: .06em; color: var(--ked-ink-mute); margin-bottom: var(--ked-s1); }
.ked-stats__value { font-family: var(--ked-font-data); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; line-height: 1.25; }
.ked-stats__unit { font-size: 12px; font-weight: 400; color: var(--ked-ink-soft); margin-left: 3px; }
.ked-stats__note { display: block; font-size: 11px; color: var(--ked-ink-mute); margin-top: 2px; }
/* n<5 で平均・割合を出せないときの表示 */
.ked-stats__value--muted { font-family: var(--ked-font-body); font-size: 13px; font-weight: 400; color: var(--ked-ink-mute); line-height: 1.6; }
.ked-datanote {
	margin: var(--ked-s3) 0 0; font-size: 12px; line-height: 1.8; color: var(--ked-ink-mute);
	padding: var(--ked-s3) var(--ked-s4); background: var(--ked-line-soft); border-radius: var(--ked-radius-sm);
}

/* =========================================================
   体験記カード
   ========================================================= */
.ked-cards { display: grid; gap: var(--ked-s4); }
@media (min-width: 768px) { .ked-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ked-cards { grid-template-columns: repeat(3, 1fr); } }

.ked-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--ked-paper); border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius); padding: var(--ked-s5); box-shadow: var(--ked-shadow);
	transition: border-color .15s ease, transform .15s ease;
}
.ked-card:hover { border-color: var(--ked-brand); transform: translateY(-2px); }
.ked-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ked-s2); padding-bottom: var(--ked-s3); border-bottom: 1px solid var(--ked-line-soft); margin-bottom: var(--ked-s3); }
.ked-card__year { font-family: var(--ked-font-data); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.ked-card__year small { font-size: 12px; font-weight: 400; color: var(--ked-ink-mute); margin-left: 2px; }
.ked-card__no { font-size: 11px; color: var(--ked-ink-mute); letter-spacing: .06em; background: var(--ked-line-soft); padding: 3px 7px; border-radius: 2px; }
@media (max-width: 767px) { .ked-card { padding: var(--ked-s4); } }

.ked-card__org { margin: var(--ked-s3) 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ked-brand); }
.ked-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--ked-ink-soft); }

.ked-meta { margin: var(--ked-s3) 0 0; padding-top: var(--ked-s3); border-top: 1px solid var(--ked-line-soft); display: grid; gap: 4px; }
.ked-meta__row { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: var(--ked-s2); }
.ked-meta dt { font-size: 12px; color: var(--ked-ink-mute); }
.ked-meta dd { margin: 0; font-size: 14px; font-weight: 600; }
.ked-meta dd .ked-num { font-weight: 600; }

.ked-card__excerpt { margin: var(--ked-s3) 0 0; font-size: 13px; line-height: 1.85; color: var(--ked-ink-soft); }

.ked-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ked-s3); }
.ked-tag { font-size: 11px; line-height: 1; padding: 6px 8px; border-radius: 2px; background: var(--ked-ground); color: var(--ked-ink-soft); }
.ked-tag--alt { background: var(--ked-brand-tint); color: var(--ked-brand); font-weight: 600; }

.ked-card__cta {
	margin-top: auto; padding-top: var(--ked-s3); border-top: 1px solid var(--ked-line-soft);
	font-size: 14px; font-weight: 600; color: var(--ked-brand); text-decoration: none;
	display: inline-flex; align-items: center; gap: 6px;
}
.ked-card__cta::after { content: "→"; }
.ked-card__cta:hover { text-decoration: underline; }
.ked-card__link { position: absolute; inset: 0; }
.ked-card .ked-tags + .ked-card__cta { margin-top: var(--ked-s4); }

/* =========================================================
   面接質問カード
   ========================================================= */
.ked-questions { display: grid; gap: var(--ked-s3); }
@media (min-width: 768px) { .ked-questions { grid-template-columns: repeat(2, 1fr); } }
.ked-question { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s4) var(--ked-s5); }
.ked-question__text { display: flex; gap: var(--ked-s3); margin: 0; font-size: 15px; font-weight: 600; line-height: 1.7; }
.ked-question__text::before {
	content: "Q"; flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
	background: var(--ked-brand); color: #fff; border-radius: 3px;
	font-family: var(--ked-font-data); font-size: 12px; font-weight: 700; line-height: 1; margin-top: 3px;
}
.ked-question__meta { margin: var(--ked-s3) 0 0; padding-left: calc(22px + var(--ked-s3)); font-size: 12px; color: var(--ked-ink-mute); }
.ked-question__meta a { color: var(--ked-brand); }

/* =========================================================
   ターム一覧
   ========================================================= */
.ked-termlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ked-s2); }
@media (min-width: 640px) { .ked-termlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ked-termlist { grid-template-columns: repeat(3, 1fr); } }
.ked-termlist a {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--ked-s3);
	min-height: 52px; padding: var(--ked-s3) var(--ked-s5) var(--ked-s3) var(--ked-s4);
	background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius-sm);
	text-decoration: none; color: var(--ked-ink); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ked-termlist a::after { content: "›"; position: absolute; right: var(--ked-s3); color: var(--ked-ink-mute); font-size: 16px; line-height: 1; }
.ked-termlist a:hover { border-color: var(--ked-brand); background: var(--ked-brand-tint); transform: translateY(-1px); }
.ked-termlist__name { font-weight: 600; font-size: 15px; }
.ked-termlist__count { font-size: 12px; color: var(--ked-ink-mute); font-variant-numeric: tabular-nums; }
.ked-termlist li.is-empty a { background: transparent; border-style: dashed; }
.ked-termlist li.is-empty .ked-termlist__name { font-weight: 400; color: var(--ked-ink-mute); }

/* 地方別アコーディオン */
.ked-area { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); overflow: hidden; }
.ked-area + .ked-area { margin-top: var(--ked-s2); }
/*
 * 地方名の文字数がまちまち（「関東」2字〜「北海道・東北」6字）なので、
 * justify-content: space-between だと件数の位置が行ごとにばらつく。
 * ラベル側を flex:1 で伸ばし、件数を固定幅・右揃えにして列としてそろえる（2026-09-20）。
 */
.ked-area summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 52px; padding: var(--ked-s3) var(--ked-s4); font-weight: 700; font-size: 15px; }
.ked-area summary::-webkit-details-marker { display: none; }
.ked-area summary .ked-area__label { flex: 1 1 auto; }
.ked-area summary .ked-termlist__count { flex: 0 0 auto; min-width: 44px; text-align: right; }
.ked-area summary::after { content: "＋"; flex: 0 0 auto; width: 16px; margin-left: var(--ked-s3); text-align: center; color: var(--ked-ink-mute); font-weight: 400; }
.ked-area[open] summary::after { content: "−"; }
.ked-area__body { padding: 0 var(--ked-s4) var(--ked-s4); display: flex; flex-wrap: wrap; gap: 6px; }
.ked-area__body a { font-size: 13px; padding: 8px 12px; border: 1px solid var(--ked-line); border-radius: 999px; text-decoration: none; color: var(--ked-ink); min-height: 36px; display: inline-flex; align-items: center; }
.ked-area__body a:hover { border-color: var(--ked-brand); background: var(--ked-brand-tint); color: var(--ked-brand); }

/* =========================================================
   検索結果ヘッダ／絞り込み
   ========================================================= */
.ked-archive__title { font-size: clamp(21px, 4.4vw, 26px); margin: var(--ked-s2) 0 var(--ked-s5); font-weight: 700; }
.ked-result-head { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s5) var(--ked-s4); margin-bottom: var(--ked-s5); box-shadow: var(--ked-shadow); }
.ked-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--ked-s3); }
.ked-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 10px; border: 1px solid var(--ked-line); border-radius: 99px; background: #fff; }
.ked-chip__remove { border: 0; background: transparent; color: var(--ked-ink-mute); font-size: 14px; cursor: pointer; padding: 0; line-height: 1; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.ked-result-head__count { font-size: 18px; margin: 0 0 var(--ked-s3); }
.ked-result-head__count strong { font-family: var(--ked-font-data); font-size: 24px; color: var(--ked-brand); }
.ked-result-head__actions { display: flex; flex-wrap: wrap; gap: var(--ked-s2); }
.ked-detail-search { border-top: 1px solid var(--ked-line-soft); margin-top: var(--ked-s4); }
.ked-detail-search summary { list-style: none; cursor: pointer; padding: var(--ked-s3) 0 0; font-size: 14px; font-weight: 600; color: var(--ked-brand); display: flex; align-items: center; gap: 6px; }
.ked-detail-search summary::-webkit-details-marker { display: none; }
.ked-detail-search summary::after { content: "＋"; font-family: var(--ked-font-data); }
.ked-detail-search[open] summary::after { content: "−"; }
.ked-detail-search__group { padding-top: var(--ked-s4); }
.ked-detail-search__legend { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ked-ink-mute); padding-bottom: var(--ked-s2); border-bottom: 1px solid var(--ked-line-soft); margin: 0 0 var(--ked-s3); }
.ked-detail-search__body { display: grid; gap: var(--ked-s3); }
@media (min-width: 768px) { .ked-detail-search__body { grid-template-columns: repeat(3, 1fr); } }

.ked-empty { background: var(--ked-paper); border: 1px dashed var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s6) var(--ked-s4); text-align: center; }
.ked-empty p { margin: 0 0 var(--ked-s4); }

/* =========================================================
   体験記詳細
   ========================================================= */
.ked-single { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s5) var(--ked-s4); box-shadow: var(--ked-shadow); }
.ked-single__inner { max-width: 800px; }
.ked-single__title { font-size: 23px; font-weight: 700; line-height: 1.6; margin: var(--ked-s2) 0 var(--ked-s5); }
@media (min-width: 768px) { .ked-single { padding: var(--ked-s6); } .ked-single__title { font-size: 30px; } }

.ked-summary { margin: 0 0 var(--ked-s6); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); overflow: hidden; }
.ked-summary__row { display: grid; grid-template-columns: 36% 1fr; border-bottom: 1px solid var(--ked-line-soft); }
.ked-summary__row:last-child { border-bottom: 0; }
.ked-summary dt { padding: var(--ked-s3); font-size: 12px; color: var(--ked-ink-soft); background: #F3F8FC; display: flex; align-items: center; }
.ked-summary dd { margin: 0; padding: var(--ked-s3); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 768px) { .ked-summary { display: grid; grid-template-columns: 1fr 1fr; } }

/* 併願表：スマホでは表をやめてカードに組み替える（内容は切り捨てない） */
.ked-apps { display: grid; gap: var(--ked-s3); margin: 0 0 var(--ked-s6); }
.ked-app { border: 1px solid var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s4); background: var(--ked-paper); }
.ked-app__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ked-s2); padding-bottom: var(--ked-s3); border-bottom: 1px solid var(--ked-line-soft); }
.ked-app__org { margin: 0; font-size: 16px; font-weight: 700; }
.ked-app__org small { display: block; font-size: 12px; font-weight: 400; color: var(--ked-ink-mute); margin-top: 2px; }
.ked-app__stages { list-style: none; margin: var(--ked-s3) 0 0; padding: 0; display: grid; gap: 2px; }
.ked-app__stages li { display: grid; grid-template-columns: 1fr auto; gap: var(--ked-s3); padding: 7px 0; border-bottom: 1px dotted var(--ked-line); font-size: 14px; }
.ked-app__stages li:last-child { border-bottom: 0; }
.ked-app__stages b { font-weight: 600; }
.ked-app__stages .is-pass { color: var(--ked-pass); font-weight: 700; }
.ked-app__stages .is-fail { color: var(--ked-fail); font-weight: 700; }
.ked-app__note { margin: var(--ked-s3) 0 0; font-size: 13px; color: var(--ked-ink-soft); }

.ked-single h2 { font-size: 19px; font-weight: 700; margin: var(--ked-s7) 0 var(--ked-s3); padding-left: var(--ked-s3); border-left: 4px solid var(--ked-brand); line-height: 1.5; }
.ked-single h3 { font-size: 16px; font-weight: 700; margin: var(--ked-s5) 0 var(--ked-s2); }
.ked-single p { margin: 0 0 var(--ked-s4); font-size: 16px; line-height: 1.9; color: var(--ked-ink-soft); }

.ked-subjects { width: 100%; border-collapse: collapse; font-size: 14px; }
.ked-subjects th, .ked-subjects td { padding: 10px var(--ked-s3); border-bottom: 1px solid var(--ked-line-soft); text-align: left; }
.ked-subjects th { font-size: 12px; color: var(--ked-ink-mute); font-weight: 600; white-space: nowrap; }

/* =========================================================
   CTA・投稿導線
   ========================================================= */
.ked-cta { background: var(--ked-brand-deep); color: #fff; border-radius: var(--ked-radius); padding: var(--ked-s5) var(--ked-s4); margin: var(--ked-s6) 0; }
.ked-cta__label { font-family: var(--ked-font-data); font-size: 11px; letter-spacing: .14em; color: #E4F1FB; }
.ked-cta__title { font-size: 20px; font-weight: 700; line-height: 1.55; margin: var(--ked-s2) 0; }
.ked-cta__text { margin: 0 0 var(--ked-s4); font-size: 14px; color: #EAF4FD; }
.ked-cta .ked-btn { background: #fff; color: var(--ked-brand-ontint); }
.ked-cta .ked-btn:hover { background: #E8F2FB; }
.ked-cta--quiet { background: var(--ked-brand-tint); color: var(--ked-ink); border: 1px solid #CBE2F4; }
.ked-cta--quiet .ked-cta__label { color: var(--ked-brand-ontint); }
.ked-cta--quiet .ked-cta__text { color: var(--ked-ink-soft); }
.ked-cta--quiet .ked-btn { background: var(--ked-brand); color: #fff; }
@media (min-width: 768px) { .ked-cta { padding: var(--ked-s6); } }
/* 体験記本文の `.ked-single p` がCTA内の文字色・サイズまで本文色に倒すため、ここで戻す。 */
.ked-single .ked-cta p.ked-cta__title { color: #fff; font-size: 20px; line-height: 1.55; margin: var(--ked-s2) 0; }
.ked-single .ked-cta p.ked-cta__text { color: #EAF4FD; font-size: 14px; margin: 0 0 var(--ked-s4); }
.ked-single .ked-cta--quiet p.ked-cta__title { color: var(--ked-ink); }
.ked-single .ked-cta--quiet p.ked-cta__text { color: var(--ked-ink-soft); }

/* =========================================================
   FAQ
   ========================================================= */
.ked-faq { display: grid; gap: var(--ked-s3); }
.ked-faq__item { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); overflow: hidden; }
.ked-faq__item[open] { border-color: var(--ked-brand); }
.ked-faq__q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--ked-s3); min-height: 56px; padding: var(--ked-s4) var(--ked-s5); font-size: clamp(15px, 1.5vw, 16px); font-weight: 700; line-height: 1.65; color: var(--ked-ink); }
.ked-faq__q::-webkit-details-marker { display: none; }
.ked-faq__q::before { content: "Q"; flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--ked-brand); color: #fff; border-radius: 3px; font-family: var(--ked-font-data); font-size: 12px; font-weight: 700; line-height: 1; margin-top: 2px; }
.ked-faq__q::after { content: "＋"; margin-left: auto; color: var(--ked-ink-mute); font-weight: 400; }
.ked-faq__item[open] .ked-faq__q::after { content: "−"; }
.ked-faq__a { padding: 0 var(--ked-s5) var(--ked-s5) calc(var(--ked-s5) + 22px + var(--ked-s3)); font-size: clamp(14px, 1.4vw, 15px); line-height: 1.95; color: var(--ked-ink-soft); margin: 0; }
@media (max-width: 480px) { .ked-faq__q { padding: var(--ked-s4); } .ked-faq__a { padding: 0 var(--ked-s4) var(--ked-s4); } }

/* 運営・監修 */
.ked-org-info { display: grid; gap: var(--ked-s4); }
@media (min-width: 768px) { .ked-org-info { grid-template-columns: repeat(2, 1fr); gap: var(--ked-s5); } }
.ked-org-info__box { background: var(--ked-paper); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); padding: var(--ked-s5); }
.ked-org-info__label { font-family: var(--ked-font-data); font-size: 11px; letter-spacing: .12em; color: var(--ked-brand); }
.ked-org-info__name { font-size: 17px; font-weight: 700; margin: var(--ked-s2) 0; }
.ked-org-info__text { font-size: 13px; line-height: 1.9; color: var(--ked-ink-soft); margin: 0; }

/* ページネーション */
.ked-pager { display: flex; gap: 6px; justify-content: center; margin-top: var(--ked-s6); flex-wrap: wrap; }
.ked-pager a, .ked-pager span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--ked-font-data); font-size: 14px; text-decoration: none; color: var(--ked-ink); border: 1px solid var(--ked-line); border-radius: var(--ked-radius); background: #fff; }
.ked-pager .current { background: var(--ked-brand); color: #fff; border-color: var(--ked-brand); }
.ked-pager a[rel="prev"], .ked-pager a[rel="next"] { padding: 0 12px; }
.ked-pager .ked-pager__gap { border: none; background: none; min-width: 24px; }

/* フッター */
.ked-footer { background: var(--ked-footer); color: rgba(255,255,255,.92); padding: var(--ked-s7) 20px; }
.ked-footer > * { max-width: 1160px; margin: 0 auto; }
.ked-identity { max-width: 560px; }
.ked-identity__name { font-size: 18px; font-weight: 700; margin: 0; color: #fff; }
.ked-identity__text { margin: var(--ked-s3) 0 0; font-size: 13px; line-height: 1.9; }
.ked-footer__links { margin-top: var(--ked-s5); display: flex; flex-wrap: wrap; gap: var(--ked-s4); font-size: 13px; }
.ked-footer__links a { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
	.ked-card, .ked-btn, .ked-select, .ked-voice { transition: none !important; }
	.ked-card:hover, .ked-voice:hover { transform: none; }
	.ked-voices__track { animation: none; }
	.ked-voices__viewport { overflow-x: auto; }
}

/* =========================================================
   SWELLとの噛み合わせ
   .-ked-page は KED_Template_Loader::filter_body_class() が付与する。
   親テーマは編集しない。打ち消しはすべて .-ked-page 配下に限定し、
   !important は使わない。
   ========================================================= */
.-ked-page .l-sidebar { display: none; }
.-ked-page .l-mainContent { width: 100%; max-width: 100%; }

/* 淡い地の上に白い面を置く構成。テーマの白背景を透過させる。 */
.-ked-page { background: var(--ked-ground); }
.-ked-page .l-mainContent,
.-ked-page .l-mainContent__inner,
.-ked-page .l-content,
.-ked-page .post_content { background: transparent; }

/* ヒーロー帯をヘッダー直下から始める。SWELLは .top #content にインラインCSSを出すためIDで上回る。 */
.-ked-page.ked-has-hero #content,
.-ked-page.ked-has-hero .l-content { padding-top: 0; }

/*
 * 本文（固定ページ）の見出しから、テーマ既定の装飾を外す。
 * margin に 0 が入るため、帯やヒーローの中身は必ず <div> を1枚挟むこと
 * （直接子要素に置くと中央寄せが潰れる。姉妹サイトで踏んだ）。
 */
.-ked-page .post_content h1,
.-ked-page .post_content h2 {
	font-family: var(--ked-font-display);
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--ked-ink);
	background: none;
	border: 0;
	border-bottom: 0;
	border-radius: 0;
	padding: 0;
	margin: clamp(40px, 5vw, 64px) 0 var(--ked-s5);
}
.-ked-page .post_content h1::before,
.-ked-page .post_content h1::after,
.-ked-page .post_content h2::before,
.-ked-page .post_content h2::after { content: none; }

.-ked-page .post_content p {
	font-size: clamp(15px, 1.5vw, 16px);
	line-height: 1.9;
	color: var(--ked-ink-soft);
}

.-ked-page .post_content > .ked-stats,
.-ked-page .post_content > .ked-cards,
.-ked-page .post_content > .ked-termlist { margin-bottom: var(--ked-s6); }

/* 帯を全幅に広げる（本文カラムを突き抜ける）。 */
.-ked-page .post_content > .ked-band {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	padding-top: clamp(48px, 7vw, 100px);
	padding-bottom: clamp(48px, 7vw, 100px);
	padding-left: 20px;
	padding-right: 20px;
}
.-ked-page .post_content > .ked-band > * {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}
.-ked-page .post_content > .ked-band > :first-child { margin-top: 0; }

/* テーマ側は h2::before を absolute で置くので、通常フローに戻してから組む。 */
.-ked-page .post_content .ked-band h2::before {
	content: "";
	position: static;
	display: block;
	width: 28px;
	height: 1px;
	background: #A9CDEB;
	border: 0;
	border-radius: 0;
	margin: 0 0 var(--ked-s4);
	transform: none;
}

@media (max-width: 480px) {
	.-ked-page .post_content > .ked-band { padding-left: 16px; padding-right: 16px; }
}

/* ヒーロー。色で塗らず、淡いラベンダーの地に濃い文字を置く。 */
.-ked-page .post_content > .ked-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: calc(0px - var(--ked-s7));
	margin-bottom: var(--ked-s7);
	padding: clamp(40px, 6vw, 72px) 20px clamp(48px, 7vw, 80px);
}
@media (max-width: 480px) {
	.-ked-page .post_content > .ked-hero { padding-left: 16px; padding-right: 16px; }
}
.-ked-page .post_content > .ked-hero > * {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}
.-ked-page .post_content .ked-hero .ked-hero__lead { color: var(--ked-ink-soft); }
.-ked-page .post_content .ked-hero .ked-search p { color: var(--ked-ink); }
.-ked-page .post_content .ked-hero .ked-search__hint { color: var(--ked-ink-mute); }

/* 見出しの一般ルールより詳細度を上げないとサイズと色が打ち消される。 */
.-ked-page .post_content .ked-hero h1.ked-hero__title,
.-ked-page .post_content .ked-hero h2.ked-hero__title {
	color: var(--ked-ink);
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 var(--ked-s5);
	font-size: 28px;
	line-height: 1.4;
	letter-spacing: .01em;
}
@media (min-width: 768px) {
	.-ked-page .post_content .ked-hero h1.ked-hero__title,
	.-ked-page .post_content .ked-hero h2.ked-hero__title { font-size: 42px; line-height: 1.4; }
}

.-ked-page .post_content > .ked-eyebrow { margin: 0 0 var(--ked-s2); }

/* 声の帯も全幅。 */
.-ked-page .post_content > .ked-voices {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
}

/* 塗りCTAの中は白文字。本文の色ルールより詳細度を上げる。 */
.-ked-page .post_content .ked-cta p { color: #EAF4FD; }
.-ked-page .post_content .ked-cta .ked-cta__title { color: #fff; }
.-ked-page .post_content .ked-cta--quiet p { color: var(--ked-ink-soft); }
.-ked-page .post_content .ked-cta--quiet .ked-cta__title { color: var(--ked-ink); }

/* FAQ・カードの中の p は本文ルールの余白を引き継がない。 */
.-ked-page .post_content .ked-faq__a,
.-ked-page .post_content .ked-card p,
.-ked-page .post_content .ked-question p,
.-ked-page .post_content .ked-voice span { margin-bottom: 0; }

/* フッター。 */
.-ked-page .l-footer,
.-ked-page .l-footer__foot {
	background: var(--ked-footer);
	color: #fff;
}
.-ked-page .l-footer a,
.-ked-page .l-footer__foot a { color: #FFFFFF; }
.-ked-page .l-footer a:hover { color: #fff; }

/* 本文中に置いたリストの既定装飾を外す（受験先一覧など）。 */
.-ked-page .post_content ul.ked-termlist,
.-ked-page .post_content ul.ked-voices__track { padding-left: 0; }
.-ked-page .post_content ul.ked-termlist li::before,
.-ked-page .post_content ul.ked-voices__track li::before { content: none; }

/* =========================================================
   投稿フォーム・問い合わせフォーム
   ========================================================= */
.ked-form { display: grid; gap: var(--ked-s5); }
.ked-form__step {
	background: var(--ked-paper); border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius); padding: var(--ked-s5); box-shadow: var(--ked-shadow);
}
.ked-form__step > legend,
.ked-form__step-title {
	font-size: 17px; font-weight: 700; color: var(--ked-ink);
	padding: 0 0 var(--ked-s3); margin: 0 0 var(--ked-s4);
	border-bottom: 1px solid var(--ked-line-soft); width: 100%;
}
.ked-form__grid { display: grid; gap: var(--ked-s4); }
@media (min-width: 768px) { .ked-form__grid { grid-template-columns: repeat(2, 1fr); } }
.ked-form__grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .ked-form__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.ked-form__full { grid-column: 1 / -1; }
.ked-input, .ked-textarea {
	width: 100%; font-family: var(--ked-font-body); font-size: 16px; color: var(--ked-ink);
	min-height: 48px; padding: 10px var(--ked-s4);
	border: 1px solid var(--ked-line); border-radius: var(--ked-radius-sm); background: #fff;
}
.ked-textarea { min-height: 120px; line-height: 1.8; }
.ked-input:focus, .ked-textarea:focus, .ked-select:focus { outline: 3px solid var(--ked-brand); outline-offset: 1px; }
.ked-help { display: block; margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--ked-ink-mute); }
.ked-required { color: var(--ked-brand-ontint); font-size: 11px; font-weight: 700; margin-left: 6px; }
.ked-checks { display: flex; flex-wrap: wrap; gap: var(--ked-s2); }
.ked-check {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	padding: 8px 14px; border: 1px solid var(--ked-line); border-radius: 999px;
	background: #fff; font-size: 14px; cursor: pointer;
}
.ked-check input { accent-color: var(--ked-brand); width: 18px; height: 18px; }
.ked-check:hover { border-color: var(--ked-brand); background: var(--ked-brand-tint); }
.ked-notice {
	padding: var(--ked-s4); border-radius: var(--ked-radius-sm);
	font-size: 14px; line-height: 1.8; margin: 0 0 var(--ked-s4);
}
.ked-notice--error { background: #FBEFEF; border: 1px solid #E6C9C9; color: #8A3B3B; }
.ked-notice--ok { background: var(--ked-pass-bg); border: 1px solid #BFE0CE; color: var(--ked-pass); }
.ked-notice ul { margin: var(--ked-s2) 0 0; padding-left: 1.2em; }
.ked-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ked-repeat { display: grid; gap: var(--ked-s3); }
.ked-repeat__row {
	border: 1px solid var(--ked-line); border-radius: var(--ked-radius-sm);
	padding: var(--ked-s4); background: var(--ked-ground);
}
.ked-repeat__row + .ked-repeat__row { margin-top: 0; }

/* パンくず（テーマのものと別に、ハブ用を自前で出す） */
.ked-breadcrumb { margin: 0 0 var(--ked-s4); font-size: 12px; color: var(--ked-ink-mute); }
.ked-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ked-breadcrumb li::after { content: "›"; margin-left: 6px; color: var(--ked-line); }
.ked-breadcrumb li:last-child::after { content: none; }
.ked-breadcrumb a { color: var(--ked-brand-ontint); text-decoration: none; }
.ked-breadcrumb a:hover { text-decoration: underline; }

/*
 * SWELLの `.post_content p`（0,1,1）は .ked-◯◯ の単一クラス（0,1,0）より強い。
 * ヒーロー内の文字は p 要素なので、そのままだと配色がすべて本文色に倒される。
 * 特にバッジは紫地に濃いグレー文字になり、コントラストが基準を割る。
 * ここだけは要素セレクタを含めて詳細度を上回らせる（!important は使わない）。
 */
.-ked-page .post_content .ked-hero p.ked-eyebrow { color: var(--ked-brand-ontint); }
.-ked-page .post_content .ked-hero p.ked-hero__kicker { color: var(--ked-brand-ontint); }
.-ked-page .post_content .ked-hero p.ked-hero__badge { color: #fff; }
.-ked-page .post_content .ked-hero p.ked-hero__lead { color: var(--ked-ink-soft); }
.-ked-page .post_content .ked-hero a.ked-btn { color: #fff; text-decoration: none; }
.-ked-page .post_content .ked-hero .ked-search p.ked-search__title { color: var(--ked-ink); }
.-ked-page .post_content .ked-hero .ked-search p.ked-search__hint { color: var(--ked-ink-mute); }

/*
 * 青地の吹き出しラベル。ここも p 要素なので本文色に倒され、
 * 青地に濃いグレー文字（1.37:1）になっていた。
 */
.-ked-page .post_content .ked-voices p.ked-voices__label { color: #fff; }

/* 同じ理由で、帯の中の小さな注記も本文色に倒されないようにする。 */
.-ked-page .post_content p.ked-datanote { color: var(--ked-ink-mute); }
.-ked-page .post_content p.ked-question__meta { color: var(--ked-ink-mute); }
.-ked-page .post_content p.ked-card__sub { color: var(--ked-ink-soft); }
.-ked-page .post_content p.ked-card__org { color: var(--ked-brand-ontint); }
.-ked-page .post_content p.ked-result { color: var(--ked-ink-soft); }
.-ked-page .post_content .ked-cta p.ked-cta__text { color: #EAF4FD; }
.-ked-page .post_content .ked-cta--quiet p.ked-cta__text { color: var(--ked-ink-soft); }

/* =========================================================
   面接で聞かれたこと（箇条書き）
   受験先ごとに見出しを分けず、1人の記録として通しで読ませる。
   ========================================================= */
.ked-qlist { list-style: none; margin: 0 0 var(--ked-s5); padding: 0; display: grid; gap: var(--ked-s2); }
.ked-qlist li {
	position: relative;
	padding: var(--ked-s3) var(--ked-s4) var(--ked-s3) calc(var(--ked-s4) + 26px);
	background: var(--ked-paper);
	border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius-sm);
}
.ked-qlist li::before {
	content: "Q";
	position: absolute;
	left: var(--ked-s4);
	top: calc(var(--ked-s3) + 2px);
	width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ked-brand); color: #fff; border-radius: 3px;
	font-family: var(--ked-font-data); font-size: 11px; font-weight: 700; line-height: 1;
}
.ked-qlist__text { display: block; font-size: 15px; font-weight: 600; line-height: 1.7; color: var(--ked-ink); }
.ked-qlist__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--ked-ink-mute); }
.ked-qlist__flag {
	display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 2px;
	background: var(--ked-pending-bg); color: var(--ked-pending); font-size: 11px;
}
/* どの面接で聞かれたか（特別区の人事委員会面接／区面接を見分けるため） */
.ked-qlist__stage {
	display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 2px;
	border: 1px solid var(--ked-line); background: var(--ked-ground); color: var(--ked-ink-soft);
	font-size: 11px; font-weight: 700;
}
.-ked-page .post_content ul.ked-qlist { padding-left: 0; }
.-ked-page .post_content ul.ked-qlist li::marker { content: none; }

/* 選考の流れ（サマリー表の中の1行） */
.ked-flow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; }
.ked-flow b { font-weight: 700; }
.ked-flow b.is-pass { color: var(--ked-pass); }
.ked-flow b.is-fail { color: var(--ked-fail); }
.ked-flow__arrow { color: var(--ked-ink-mute); margin: 0 2px; }

/* =========================================================
   イチオシの教材
   書名を並べるのではなく、1つ推して理由を書く形にする。
   ========================================================= */
.ked-pick {
	border: 1px solid var(--ked-line);
	border-left: 4px solid var(--ked-brand);
	border-radius: var(--ked-radius-sm);
	background: var(--ked-brand-tint);
	padding: var(--ked-s4) var(--ked-s5);
	margin: 0 0 var(--ked-s3);
}
.ked-pick__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ked-ink);
}
.ked-pick__reason {
	margin: var(--ked-s2) 0 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ked-ink-soft);
}
.-ked-page .post_content .ked-pick p.ked-pick__name { color: var(--ked-ink); margin-bottom: 0; }
.-ked-page .post_content .ked-pick p.ked-pick__reason { color: var(--ked-ink-soft); margin-bottom: 0; }

/* 教材リンクと広告表記 */
.ked-pick__name a { color: var(--ked-brand-ontint); text-decoration: underline; text-underline-offset: 3px; }
.ked-pick__name a:hover { color: var(--ked-brand-dark); }
.-ked-page .post_content .ked-pick p.ked-pick__name a { color: var(--ked-brand-ontint); }
.ked-adnote { margin-top: var(--ked-s2); font-size: 11px; color: var(--ked-ink-mute); }
.-ked-page .post_content p.ked-adnote { font-size: 11px; color: var(--ked-ink-mute); }

/*
 * 広告表記。短いラベルなので、文章ではなく小さな囲みで出す。
 * 本文に埋もれると表示として不十分になるため、独立させて見えるようにしている。
 */
.ked-adnote { margin: var(--ked-s2) 0 0; }
.ked-adnote span {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid var(--ked-line);
	border-radius: 2px;
	background: var(--ked-ground);
	font-size: 11px;
	line-height: 1.5;
	color: var(--ked-ink-mute);
	letter-spacing: .02em;
}
.-ked-page .post_content p.ked-adnote { margin: var(--ked-s2) 0 0; font-size: 11px; }

/* =========================================================
   運営会社・監修者情報 /about/
   ---------------------------------------------------------
   誰がこのサイトを作っているのかを示すページ。
   体験記カードと同じ「白い面を淡い地の上に置く」構成に揃える。
   構造は姉妹サイト（kcd.css）と同じ。色だけ本サイトのトークンを使う。
   ========================================================= */
.ked-profile {
	display: grid;
	gap: var(--ked-s4);
	background: var(--ked-paper);
	border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius);
	padding: var(--ked-s5) var(--ked-s4);
	box-shadow: var(--ked-shadow);
}
@media (min-width: 768px) {
	.ked-profile {
		grid-template-columns: 180px 1fr;
		gap: var(--ked-s5);
		padding: var(--ked-s6);
		align-items: start;
	}
}

.ked-profile__photo {
	margin: 0;
	/* 顔が中央に来るよう、縦長の原寸を正方形に切り出す。 */
	width: 140px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ked-radius);
	background: var(--ked-line-soft);
}
@media (min-width: 768px) {
	.ked-profile__photo { width: 180px; }
}
.ked-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.-ked-page .post_content .ked-profile__name {
	font-family: var(--ked-font-display);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ked-ink);
	margin: 0 0 var(--ked-s2);
	padding: 0;
	border: 0;
	background: none;
}
.-ked-page .post_content .ked-profile__name::before,
.-ked-page .post_content .ked-profile__name::after { content: none; }

/* 肩書。経歴の要約が入るので、本文より少し強く見せる。 */
.-ked-page .post_content .ked-profile__role {
	display: inline-block;
	font-size: clamp(12px, 1.3vw, 13px);
	font-weight: 600;
	line-height: 1.6;
	color: var(--ked-brand-ontint);
	background: var(--ked-brand-tint);
	border-radius: var(--ked-radius-sm);
	padding: 6px 10px;
	margin: 0 0 var(--ked-s3);
}
.-ked-page .post_content .ked-profile__text {
	font-size: clamp(14px, 1.4vw, 15px);
	line-height: 1.95;
	color: var(--ked-ink-soft);
	margin: 0 0 var(--ked-s3);
}
.-ked-page .post_content .ked-profile__text:last-child { margin-bottom: 0; }

/* 監修者を並べるとき。写真を小さくして2列にする。 */
.ked-profiles {
	display: grid;
	gap: var(--ked-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.ked-profiles { grid-template-columns: repeat(2, 1fr); gap: var(--ked-s5); }
}
.ked-profiles .ked-profile {
	grid-template-columns: 96px 1fr;
	gap: var(--ked-s4);
	padding: var(--ked-s4);
}
.ked-profiles .ked-profile__photo { width: 96px; }
.-ked-page .post_content .ked-profiles .ked-profile__name { font-size: clamp(16px, 1.7vw, 17px); }
.-ked-page .post_content .ked-profiles .ked-profile__text { font-size: 13px; line-height: 1.9; }
.-ked-page .post_content ul.ked-profiles { padding-left: 0; }
.-ked-page .post_content ul.ked-profiles li::before { content: none; }

/* 運営会社。写真がないので、罫線で区切った面として見せる。 */
.ked-company {
	background: var(--ked-paper);
	border: 1px solid var(--ked-line);
	border-radius: var(--ked-radius);
	padding: var(--ked-s5) var(--ked-s4);
	box-shadow: var(--ked-shadow);
}
@media (min-width: 768px) { .ked-company { padding: var(--ked-s6); } }
.-ked-page .post_content .ked-company__name {
	font-family: var(--ked-font-display);
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ked-ink);
	margin: 0 0 var(--ked-s2);
	padding: 0;
	border: 0;
	background: none;
}
.-ked-page .post_content .ked-company__name::before,
.-ked-page .post_content .ked-company__name::after { content: none; }
.-ked-page .post_content .ked-company__tagline {
	font-size: clamp(13px, 1.4vw, 14px);
	font-weight: 600;
	color: var(--ked-brand-ontint);
	margin: 0 0 var(--ked-s3);
}
.-ked-page .post_content .ked-company__text {
	font-size: clamp(14px, 1.4vw, 15px);
	line-height: 1.95;
	color: var(--ked-ink-soft);
	margin: 0;
}

/* トップの「運営・監修」から、運営会社・監修者情報のページへ。 */
.ked-org-info__more { margin: var(--ked-s4) 0 0; font-size: 14px; }
.-ked-page .post_content p.ked-org-info__more { margin: var(--ked-s4) 0 0; }
.ked-org-info__more a { color: var(--ked-brand-ontint); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ked-line); padding-bottom: 2px; }
.ked-org-info__more a::after { content: "→"; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ked-ink-mute); }
.ked-org-info__more a:hover { color: var(--ked-brand-dark); }

/* 受験先ページ：運営元の対策メディアへの導線 */
.ked-media__list { list-style: none; margin: var(--ked-s3) 0 0; padding: 0; display: grid; gap: var(--ked-s2); }
.ked-media__list a { display: block; padding: 12px 16px; border: 1px solid var(--ked-line); border-radius: var(--ked-radius); background: #fff; color: var(--ked-ink); text-decoration: none; font-weight: 600; line-height: 1.6; min-height: 44px; }
.ked-media__list a:hover { border-color: var(--ked-brand); color: var(--ked-brand); }