@charset "UTF-8";
/*
    Template: swell
    Theme Name: 国立市中古マンション.com
    Description: SWELL子テーマ。国立市の中古マンション物件データベースを実装する。
    Version: 0.1.0
    Author: 株式会社ライフノード
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   物件DB用スタイル
   親テーマ(SWELL)のデザイントークンを尊重し、上書きは最小限にする。
   ========================================================================== */

/* --- 絞り込みフォーム --- */
.kt-search {
	padding: 16px;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	background: var(--kt-bg-soft);
	margin-bottom: 24px;
}

.kt-search__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 16px;
}

.kt-search__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kt-search__field label {
	font-size: var(--kt-fs-sm);
	font-weight: 600;
	color: #444;
}

.kt-search__field select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba(14, 14, 17, 0.22);
	border-radius: 4px;
	background: #fff;
	font-size: var(--kt-fs-base);
}

/*
 * スマホは2列に固定する。
 * auto-fitのままだと1列に落ち、選択欄7つだけで画面1.5枚分の高さになる。
 * 選択欄の文字は16px未満にしない。iOSが入力時に画面を勝手に拡大するため。
 */
@media (max-width: 600px) {
	.kt-search__grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.kt-search__field label {
		font-size: var(--kt-fs-xs);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.kt-search__field select {
		padding: 7px 8px;
	}
}

.kt-search__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.kt-search__submit {
	padding: 10px 28px;
	border: none;
	border-radius: 4px;
	background: var(--kt-ink);
	color: #fff;
	font-size: var(--kt-fs-base);
	font-weight: 700;
	cursor: pointer;
}

.kt-search__submit:hover {
	opacity: 0.85;
}

.kt-search__reset {
	font-size: var(--kt-fs-sm);
	color: #666;
}

/* --- 結果件数・並び替え --- */
.kt-result-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.kt-result-bar__count {
	margin: 0;
	font-size: var(--kt-fs-base);
}

.kt-result-bar__count strong {
	font-size: var(--kt-fs-lg);
	color: var(--kt-gold);
}

.kt-result-bar__sort {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.kt-sort {
	padding: 4px 12px;
	border: 1px solid var(--kt-border);
	border-radius: 999px;
	font-size: var(--kt-fs-sm);
	color: #444;
	text-decoration: none;
}

.kt-sort.is-active {
	background: var(--kt-ink);
	border-color: var(--kt-ink);
	color: #fff;
	font-weight: 600;
}

/* --- 物件カード（一覧） --- */
.kt-property-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.kt-property-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.kt-property-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f5f5f5;
}

.kt-property-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-property-card__body {
	padding: 12px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kt-property-card__title {
	font-size: var(--kt-fs-base);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.kt-property-card__price {
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	color: var(--kt-gold);
}

.kt-property-card__meta {
	font-size: var(--kt-fs-sm);
	color: #666;
	line-height: 1.6;
}

/*
 * スマホは写真を左、情報を右に置いた横長カードにする。
 * 縦積みのままだと写真だけで画面の半分以上を使い、
 * 1画面に1件しか入らないため、何件あるのか掴めない。
 */
@media (max-width: 600px) {
	.kt-property-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.kt-property-card {
		flex-direction: row;
		align-items: stretch;
	}

	.kt-property-card__thumb {
		flex: 0 0 132px;
		aspect-ratio: auto;
	}

	.kt-property-card__body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 10px 12px 12px;
		gap: 4px;
	}

	.kt-property-card__badges {
		margin: 0;
	}

	.kt-property-card__title {
		font-size: var(--kt-fs-sm);
	}

	.kt-property-card__price {
		font-size: var(--kt-fs-md);
	}

	.kt-property-card__meta {
		font-size: var(--kt-fs-xs);
		line-height: 1.5;
	}
}

/* 成約・商談中などのステータスバッジ */
.kt-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: var(--kt-fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.kt-badge--sold {
	background: #666;
	color: #fff;
}

.kt-badge--negotiating {
	background: var(--kt-gold-bright);
	color: #fff;
}

.kt-badge--new {
	background: var(--kt-gold);
	color: #fff;
}

/* --- 相談内容の案内（お問い合わせページ） --- */
.kt-contact-page__title {
	margin-bottom: 8px;
}

.kt-contact-page__back {
	margin: 0 0 24px;
	font-size: var(--kt-fs-sm);
}

.kt-contact-page__back a {
	color: var(--kt-text-sub);
}

.kt-guide {
	margin-bottom: 32px;
}

.kt-guide__lead {
	margin: 0 0 24px;
	font-size: var(--kt-fs-md);
	line-height: 1.9;
}

.kt-guide__block {
	margin-bottom: 24px;
	padding: 18px 20px;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	background: var(--kt-bg-soft);
}

.kt-guide__heading {
	margin: 0 0 12px;
	font-size: var(--kt-fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 親テーマがリストの記号を消しているため、ここで戻す */
.kt-guide__list {
	margin: 0;
	padding-left: 1.3em;
	line-height: 1.9;
	list-style: disc;
}

.kt-guide__list li {
	list-style: inherit;
}

.kt-guide__list li {
	margin-bottom: 4px;
}

/* 手順は番号を丸で示す。箇条書きだと順序があることが伝わらない */
.kt-guide__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.kt-guide__steps li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
	line-height: 1.8;
}

.kt-guide__steps li:last-child {
	margin-bottom: 0;
}

.kt-guide__step-num {
	flex: 0 0 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	margin-top: 2px;
}

.kt-guide__step-text {
	flex: 1 1 auto;
	min-width: 0;
}

.kt-guide__supplement {
	margin: 10px 0 0;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* 誤解を招きやすい点は、目立たせすぎず必ず読める位置に置く */
.kt-guide__note {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--kt-gold);
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

/*
 * 相談ページの本文。
 * 管理画面で書き替えられるよう、決まった構造を要求せず、
 * 見出し・箇条書き・番号付きリストをそのまま整った見た目にする。
 */
.kt-consultation-page .post_content h2 {
	margin: 32px 0 12px;
	/* 親テーマの帯や背景を打ち消し、サイトの配色（黒と金）に合わせる */
	background: none;
	color: var(--kt-text);
	padding: 0 0 8px;
	border: none;
	border-bottom: 1px solid var(--kt-border);
	border-radius: 0;
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	letter-spacing: 0.04em;
	position: relative;
}

.kt-consultation-page .post_content h2::before {
	content: none;
}

.kt-consultation-page .post_content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 40px;
	height: 2px;
	background: var(--kt-gold);
}

.kt-consultation-page .post_content ul {
	list-style: disc;
	padding-left: 1.3em;
	line-height: 1.9;
}

.kt-consultation-page .post_content ul li {
	list-style: inherit;
	margin-bottom: 4px;
}

/* 番号付きリストは手順として読ませたいので、番号を丸で示す */
.kt-consultation-page .post_content ol {
	list-style: none;
	counter-reset: kt-step;
	padding-left: 0;
}

.kt-consultation-page .post_content ol li {
	counter-increment: kt-step;
	position: relative;
	padding-left: 38px;
	margin-bottom: 12px;
	line-height: 1.8;
}

.kt-consultation-page .post_content ol li::before {
	content: counter(kt-step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
	font-size: var(--kt-fs-sm);
	font-weight: 700;
}

/* 読み終えた人を次のページへ渡す */
.kt-guide__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0;
}

.kt-guide__links a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--kt-border);
	border-radius: 999px;
	background: var(--kt-paper);
	color: var(--kt-text);
	text-decoration: none;
	font-size: var(--kt-fs-sm);
	font-weight: 700;
}

.kt-guide__links a:hover {
	border-color: var(--kt-gold);
	color: var(--kt-gold);
}

.kt-contact-tel__sub {
	margin: 6px 0 0;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
}

@media (max-width: 600px) {
	.kt-guide__lead {
		font-size: var(--kt-fs-base);
	}

	.kt-guide__block {
		padding: 14px 16px;
	}
}

/* --- 通学区域（物件・建物ページ） --- */
.kt-school-box {
	margin-bottom: 32px;
}

.kt-school-box__list {
	margin: 0;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	overflow: hidden;
}

.kt-school-box__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--kt-border);
}

.kt-school-box__row:last-child {
	border-bottom: none;
}

.kt-school-box__row dt {
	flex: 0 0 84px;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

.kt-school-box__row dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-weight: 700;
}

.kt-school-box__row dd a {
	color: var(--kt-text);
	text-decoration: none;
	border-bottom: 1px solid var(--kt-gold);
	padding-bottom: 2px;
}

.kt-school-box__row dd a:hover {
	color: var(--kt-gold);
}

/* 学区は保証できる情報ではないため、注意書きを必ず添える */
.kt-school-box__note {
	margin: 12px 0 0;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

@media (max-width: 600px) {
	.kt-school-box__row {
		display: block;
		padding: 10px 14px;
	}

	.kt-school-box__row dt {
		margin-bottom: 2px;
		font-size: var(--kt-fs-xs);
	}
}

/* --- 周辺施設 --- */
.kt-nearby {
	margin-bottom: 32px;
}

.kt-nearby__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.kt-nearby__group {
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	overflow: hidden;
}

.kt-nearby__heading {
	margin: 0;
	padding: 8px 14px;
	background: var(--kt-bg-soft);
	border-bottom: 1px solid var(--kt-border);
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--kt-text-sub);
}

.kt-nearby__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kt-nearby__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--kt-border);
	font-size: var(--kt-fs-sm);
	line-height: 1.6;
}

.kt-nearby__item:last-child {
	border-bottom: none;
}

.kt-nearby__name {
	flex: 1 1 auto;
	min-width: 0;
}

/* 種別は施設名の補足なので、主張させない */
.kt-nearby__kind {
	display: inline-block;
	margin-left: 6px;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
}

.kt-nearby__distance {
	flex: 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kt-nearby__note {
	margin: 14px 0 0;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

/* --- 物件写真のギャラリー --- */
.kt-gallery {
	margin: 0 0 24px;
}

.kt-gallery__viewport {
	position: relative;
}

.kt-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-radius: 6px;
	background: var(--kt-bg-soft);
}

.kt-gallery__track::-webkit-scrollbar {
	display: none;
}

.kt-gallery__item {
	flex: 0 0 100%;
	scroll-snap-align: start;
	/*
	 * 写真の縦横比がばらついても、送るたびに高さが変わらないようにする。
	 * 物件写真は横長が基本なので、枠も横長に取る。
	 */
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 間取り図は切り抜くと寸法が消えるため、収まるように表示する */
.kt-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kt-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(14, 14, 17, 0.6);
	color: #fff;
	font-size: var(--kt-fs-lg);
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s;
}

.kt-gallery__nav:hover {
	background: var(--kt-ink);
}

.kt-gallery__nav[hidden] {
	display: none;
}

.kt-gallery__nav--prev {
	left: 10px;
}

.kt-gallery__nav--next {
	right: 10px;
}

/* 何枚目かは、点だけだと枚数が多いとき数えられない */
.kt-gallery__counter {
	position: absolute;
	right: 10px;
	bottom: 10px;
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(14, 14, 17, 0.6);
	color: #fff;
	font-size: var(--kt-fs-xs);
	font-variant-numeric: tabular-nums;
}

.kt-gallery__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.kt-gallery__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--kt-border);
	cursor: pointer;
}

.kt-gallery__dot.is-current {
	background: var(--kt-gold);
}

@media (max-width: 600px) {
	/* 画面が狭いぶん、写真は少し縦を取って大きく見せる */
	.kt-gallery__item {
		aspect-ratio: 4 / 3;
	}

	.kt-gallery__nav {
		width: 34px;
		height: 34px;
	}

	/* 点は指で押せる大きさにする。見た目の丸だけ小さく保つ */
	.kt-gallery__dots {
		gap: 4px;
		margin-top: 6px;
	}

	.kt-gallery__dot {
		width: 22px;
		height: 22px;
		background: none;
		position: relative;
	}

	.kt-gallery__dot::after {
		content: "";
		position: absolute;
		inset: 7px;
		border-radius: 50%;
		background: var(--kt-border);
	}

	.kt-gallery__dot.is-current::after {
		background: var(--kt-gold);
	}
}

/* --- 建物（マンション）一覧 --- */
.kt-building-archive__lead,
.kt-building-archive__empty {
	margin-bottom: 24px;
	color: var(--kt-text-sub);
	line-height: 1.9;
}

.kt-building-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.kt-building-card {
	display: flex;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s;
}

.kt-building-card:hover {
	border-color: var(--kt-gold);
}

.kt-building-card__thumb {
	position: relative;
	flex: 0 0 120px;
	background: #f5f5f5;
}

.kt-building-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-building-card__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kt-building-card__title {
	margin: 0;
	font-size: var(--kt-fs-base);
	font-weight: 700;
	line-height: 1.4;
}

.kt-building-card__title a {
	color: var(--kt-text);
	text-decoration: none;
}

.kt-building-card__title a:hover {
	color: var(--kt-gold);
}

.kt-building-card__meta {
	margin: 0;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	line-height: 1.6;
}

.kt-building-card__status {
	margin: 0;
	font-size: var(--kt-fs-sm);
}

.kt-building-card__status strong {
	color: var(--kt-gold-dark, var(--kt-text));
	font-weight: 700;
}

/* 売り物が無い建物も資産として並べる。ただし主張はさせない */
.kt-building-card__none {
	color: var(--kt-text-sub);
}

@media (max-width: 600px) {
	.kt-building-list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.kt-building-card__thumb {
		flex-basis: 100px;
	}

	.kt-building-card__body {
		padding: 10px 12px;
	}

	.kt-building-card__meta {
		font-size: var(--kt-fs-xs);
	}
}

/* --- 物件詳細：概要テーブル（法定表示項目） --- */
.kt-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kt-fs-base);
}

.kt-spec-table th,
.kt-spec-table td {
	border: 1px solid var(--kt-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.kt-spec-table th {
	width: 30%;
	background: var(--kt-bg-soft);
	font-weight: 600;
	white-space: nowrap;
}

/*
 * スマホでは1項目=2行の縦積みをやめ、カードを2列に並べる。
 * 「価格」「間取り」のような短い値まで1行ずつ使うと、
 * 概要を見るだけで何画面もスクロールすることになる。
 * 住所や交通など長い値の行だけ .is-long を付けて幅いっぱいに使う。
 */
@media (max-width: 600px) {
	.kt-spec-table,
	.kt-spec-table tbody {
		display: block;
	}

	.kt-spec-table tbody {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	/*
	 * 宅建業者票は法定表示。免許番号も所在地も途中で折り返すと読み違えるため、
	 * 同じ表の見た目を使っていても2列にはしない。
	 */
	.kt-license tbody {
		grid-template-columns: 1fr;
	}

	.kt-spec-table tr {
		display: block;
		border: 1px solid var(--kt-border);
		border-radius: 4px;
		overflow: hidden;
	}

	.kt-spec-table tr.is-long {
		grid-column: 1 / -1;
	}

	.kt-spec-table th,
	.kt-spec-table td {
		display: block;
		width: auto;
		border: none;
		white-space: normal;
	}

	.kt-spec-table th {
		padding: 5px 10px;
		font-size: var(--kt-fs-xs);
		font-weight: 600;
		color: var(--kt-text-sub);
		letter-spacing: 0.04em;
	}

	.kt-spec-table td {
		padding: 2px 10px 9px;
		font-weight: 700;
		line-height: 1.4;
	}
}

/* --- 情報更新日の表示（不動産公正競争規約対応） --- */
.kt-update-info {
	font-size: var(--kt-fs-sm);
	color: #666;
	margin-top: 8px;
}

/* --- 広告主の表示（不動産広告に必要な法定表示） --- */
.kt-advertiser {
	margin-top: 8px;
	padding: 10px 14px;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
	background: var(--kt-bg-soft);
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

.kt-advertiser a {
	color: inherit;
}

.kt-advertiser__more {
	margin-left: 8px;
	white-space: nowrap;
}

/* --- 掲載終了物件の告知 --- */
.kt-closed-notice {
	padding: 16px;
	border: 1px solid #e0b4b4;
	background: #fff6f6;
	border-radius: 4px;
	margin-bottom: 24px;
}

/* --- 問い合わせフォーム --- */
.kt-contact {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	background: var(--kt-bg-soft);
}

.kt-contact__title {
	margin: 0 0 16px;
	font-size: var(--kt-fs-lg);
	font-weight: 700;
}

.kt-contact__notice {
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: var(--kt-fs-base);
}

.kt-contact__notice--success {
	background: #eaf6ec;
	border: 1px solid #9fcea8;
	color: #1e5b2a;
}

.kt-contact__notice--error {
	background: #fff6f6;
	border: 1px solid #e0b4b4;
	color: #9b2c2c;
}

.kt-contact__target {
	padding: 8px 12px;
	background: #fff;
	border-left: 3px solid var(--kt-ink);
	font-size: var(--kt-fs-base);
}

.kt-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.kt-contact__field label {
	font-size: var(--kt-fs-base);
	font-weight: 600;
}

.kt-contact__field input,
.kt-contact__field select,
.kt-contact__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(14, 14, 17, 0.22);
	border-radius: 4px;
	background: #fff;
	font-size: var(--kt-fs-base);
}

.kt-contact__field [aria-invalid="true"] {
	border-color: var(--kt-gold);
	background: #fffafa;
}

/*
 * iOSは文字が16px未満の入力欄に触れると画面を勝手に拡大し、
 * 拡大したまま戻らない。入力欄だけは実寸16pxを下回らせない。
 */
@media (max-width: 600px) {
	.kt-contact__field input,
	.kt-contact__field select,
	.kt-contact__field textarea,
	.kt-search__field select,
	.kt-loan .kt-loan__input-row input,
	.kt-loan .kt-loan__field select {
		font-size: 16px;
	}
}

.kt-required,
.kt-optional {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: var(--kt-fs-xs);
	font-weight: 700;
	vertical-align: middle;
}

.kt-required {
	background: var(--kt-gold);
	color: #fff;
}

.kt-optional {
	background: #999;
	color: #fff;
}

.kt-contact__fixed-type {
	margin: 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
	font-weight: 600;
}

.kt-contact__error {
	font-size: var(--kt-fs-sm);
	color: var(--kt-gold);
}

.kt-contact__privacy {
	font-size: var(--kt-fs-sm);
	color: #666;
}

.kt-contact__submit {
	width: 100%;
	max-width: 320px;
	padding: 14px 32px;
	border: none;
	border-radius: 4px;
	background: var(--kt-gold);
	color: #fff;
	font-size: var(--kt-fs-md);
	font-weight: 700;
	cursor: pointer;
}

.kt-contact__submit:hover {
	opacity: 0.88;
}

/* ハニーポットは視覚的にも支援技術にも露出させない */
.kt-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   デザイントークン
   黒＝格・落ち着き、金＝価値の強調。金は「細く・少なく」使う。
   面で塗ると安く見えるため、罫線・文字・小さな面にのみ用いる。
   ========================================================================== */
:root {
	/* 黒（ヘッダー・フッター・ヒーローの地） */
	--kt-ink: #0e0e11;
	--kt-ink-2: #17171c;
	--kt-ink-3: #22222a;

	/* 金 */
	--kt-gold: #c8a45c;
	--kt-gold-bright: #e2c98d;
	--kt-gold-dim: rgba(200, 164, 92, 0.35);

	/* 明るい面（本文領域） */
	--kt-paper: #ffffff;
	--kt-bg-soft: #f7f6f3;
	--kt-border: rgba(14, 14, 17, 0.12);

	/* 文字 */
	--kt-text: #1a1a1e;
	--kt-text-sub: #6d6a63;
	--kt-on-ink: #f3f1ec;
	--kt-on-ink-sub: #a8a49b;

	/* 旧名との互換（既存の指定を壊さない） */
	--kt-navy: #0e0e11;
	--kt-navy-dark: #17171c;
	--kt-accent: #c8a45c;
}

/* 見出しの上に置く英字ラベル。金の細字で格を出す。 */
.kt-eyebrow {
	display: block;
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold);
	margin-bottom: 6px;
}

/* --- ヘッダー上部の連絡バー --- */
.kt-topbar {
	background: var(--kt-navy);
	color: #fff;
}

.kt-topbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.kt-topbar__brand {
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.kt-topbar__site {
	font-size: var(--kt-fs-base);
	font-weight: 700;
}

.kt-topbar__operator {
	font-size: var(--kt-fs-xs);
	opacity: 0.85;
}

.kt-topbar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kt-topbar__tel {
	color: #fff;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}

.kt-topbar__tel-label {
	font-size: var(--kt-fs-xs);
	opacity: 0.85;
}

.kt-topbar__tel-num {
	font-size: var(--kt-fs-md);
	font-weight: 700;
}

.kt-topbar__cta {
	padding: 8px 20px;
	border-radius: 4px;
	background: var(--kt-accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--kt-fs-base);
	text-decoration: none;
	white-space: nowrap;
}

.kt-topbar__cta:hover {
	opacity: 0.88;
}

@media (max-width: 600px) {
	.kt-topbar__tel {
		display: none;
	}

	.kt-topbar__inner {
		padding: 6px 12px;
	}

	.kt-topbar__site {
		font-size: var(--kt-fs-sm);
	}
}

/* --- スマホ固定CTAバー --- */
.kt-mobilebar {
	display: none;
}

@media (max-width: 900px) {
	.kt-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--kt-border);
	}

	/*
	 * 下端の余白はiPhoneのホームバーの分を足す。
	 * 足さないと、文字がホームバーに重なって押しにくい。
	 */
	.kt-mobilebar a {
		padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
		text-align: center;
		font-weight: 700;
		font-size: var(--kt-fs-base);
		text-decoration: none;
		color: #fff;
	}

	.kt-mobilebar__tel {
		background: var(--kt-navy);
	}

	.kt-mobilebar__cta {
		background: var(--kt-accent);
	}

	body {
		padding-bottom: calc(52px + env(safe-area-inset-bottom));
	}
}

/* --- トップページ --- */
.kt-hero {
	background: linear-gradient(180deg, var(--kt-navy) 0%, var(--kt-navy-dark) 100%);
	padding: 40px 16px 32px;
	color: #fff;
}

.kt-hero__inner {
	max-width: 1000px;
	margin: 0 auto;
}

.kt-hero__title {
	margin: 0 0 8px;
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	color: #fff;
}

.kt-hero__lead {
	margin: 0 0 20px;
	font-size: var(--kt-fs-base);
	line-height: 1.8;
	opacity: 0.92;
}

.kt-hero .kt-search {
	background: #fff;
	border: none;
	margin-bottom: 0;
}

.kt-section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 16px;
}

.kt-section__title {
	margin: 0 0 20px;
	padding-left: 12px;
	border-left: 4px solid var(--kt-navy);
	font-size: var(--kt-fs-xl);
	font-weight: 700;
}

.kt-section__more {
	margin-top: 20px;
	text-align: center;
}

.kt-section__more a {
	display: inline-block;
	padding: 10px 32px;
	border: 1px solid var(--kt-navy);
	border-radius: 4px;
	color: var(--kt-navy);
	font-weight: 700;
	text-decoration: none;
}

.kt-section__more a:hover {
	background: var(--kt-navy);
	color: #fff;
}

/* エリア・駅・間取りの回遊 */
.kt-termlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.kt-termlist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.kt-termlist a:hover {
	border-color: var(--kt-navy);
	background: var(--kt-bg-soft);
}

.kt-termlist__name {
	font-weight: 600;
}

.kt-termlist__count {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* 相談メニュー */
.kt-consult {
	background: var(--kt-bg-soft);
	max-width: none;
}

.kt-consult > * {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.kt-consult__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.kt-consult__item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 18px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--kt-border);
	text-decoration: none;
	color: inherit;
}

.kt-consult__item a:hover {
	border-color: var(--kt-navy);
}

.kt-consult__label {
	font-weight: 700;
	font-size: var(--kt-fs-base);
	color: var(--kt-navy);
}

.kt-consult__desc {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	line-height: 1.7;
}

/* コラム一覧 */
.kt-columnlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kt-columnlist__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--kt-border);
	text-decoration: none;
	color: inherit;
}

.kt-columnlist__item a:hover .kt-columnlist__title {
	color: var(--kt-navy);
	text-decoration: underline;
}

.kt-columnlist__title {
	font-weight: 600;
}

.kt-columnlist__date {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	white-space: nowrap;
}

/* --- 電話CTA（問い合わせページ） --- */
.kt-contact-tel {
	margin: 24px 0;
	padding: 20px;
	border: 2px solid var(--kt-navy);
	border-radius: 6px;
	text-align: center;
}

.kt-contact-tel__label {
	margin: 0;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

.kt-contact-tel__num {
	margin: 4px 0 0;
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	line-height: 1.2;
}

.kt-contact-tel__num a {
	color: var(--kt-navy);
	text-decoration: none;
}

/* --- フッター --- */
.kt-sitefooter {
	padding: 32px 16px 24px;
	background: var(--kt-navy-dark);
	color: #fff;
	font-size: var(--kt-fs-sm);
	line-height: 1.9;
}

.kt-sitefooter__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 32px;
}

.kt-sitefooter__brand {
	margin: 0;
}

.kt-sitefooter__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--kt-fs-md);
	letter-spacing: 0.06em;
}

/* ブランドと運営会社は別物なので、大きさと色で分ける */
.kt-sitefooter__operator {
	margin: 0;
	font-size: var(--kt-fs-sm);
	opacity: 0.75;
}

.kt-sitefooter__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
}

.kt-sitefooter__links a {
	color: #fff;
	text-decoration: none;
	/* 指で押せる高さを確保する */
	display: inline-block;
	padding: 6px 0;
}

.kt-sitefooter__copyright {
	max-width: 1000px;
	margin: 24px auto 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--kt-fs-xs);
	opacity: 0.6;
}

@media (max-width: 600px) {
	.kt-sitefooter {
		padding: 24px 16px 20px;
	}

	.kt-sitefooter__inner {
		display: block;
	}

	/* 狭い画面では横並びにすると1行1リンクになって隙間が目立つ */
	.kt-sitefooter__links {
		margin-top: 14px;
		gap: 0 24px;
	}

	.kt-sitefooter__copyright {
		margin-top: 18px;
		text-align: center;
	}
}

/* --- 会社概要（会社概要ページ） --- */
.kt-company-table {
	margin-bottom: 8px;
}

/* 会社名に併記する外部サイト。既定の青ではなく画面の配色に合わせる */
.kt-company-table a {
	color: var(--kt-text);
	text-decoration: none;
	border-bottom: 1px solid var(--kt-gold);
	padding-bottom: 1px;
	word-break: break-all;
}

.kt-company-table a:hover {
	color: var(--kt-gold);
}

/* --- 免許番号表（会社概要） --- */
.kt-license__heading {
	margin-top: 32px;
	font-size: var(--kt-fs-lg);
}

.kt-note {
	margin-top: 16px;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* 既存パーツの色をトークンに揃える */
.kt-search__submit,
.kt-sort.is-active {
	background: var(--kt-navy);
}

.kt-sort.is-active {
	border-color: var(--kt-navy);
}

.kt-property-card__price,
.kt-result-bar__count strong,
.kt-contact__submit,
.kt-required {
	background-color: initial;
}

.kt-contact__submit,
.kt-required {
	background: var(--kt-accent);
}

/* --- 写真未登録のカード --- */
.kt-property-card__noimage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e8e8e8 10px, #e8e8e8 20px);
	color: #999;
	font-size: var(--kt-fs-sm);
}

.kt-property-card__badges {
	display: flex;
	gap: 6px;
	margin: 0;
}

/* --- 絞り込み：チップ形式の複数選択 --- */
.kt-search__group {
	margin-top: 16px;
	padding: 0;
	border: none;
}

.kt-search__group legend {
	padding: 0;
	font-size: var(--kt-fs-sm);
	font-weight: 600;
	color: #444;
	margin-bottom: 8px;
}

.kt-search__hint {
	margin-left: 8px;
	font-weight: 400;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
}

.kt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kt-chip {
	position: relative;
	display: inline-flex;
}

.kt-chip input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.kt-chip span {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--kt-border);
	border-radius: 999px;
	background: #fff;
	font-size: var(--kt-fs-sm);
	line-height: 1.4;
	transition: background 0.12s, border-color 0.12s;
}

.kt-chip input:checked + span {
	background: var(--kt-navy);
	border-color: var(--kt-navy);
	color: #fff;
	font-weight: 600;
}

/* キーボード操作でも選択位置が分かるようにする */
.kt-chip input:focus-visible + span {
	outline: 2px solid var(--kt-accent);
	outline-offset: 2px;
}

/* --- 適用中の条件バッジ --- */
.kt-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.kt-active-filters__label {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

.kt-active-filters__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--kt-bg-soft);
	border: 1px solid var(--kt-border);
	font-size: var(--kt-fs-sm);
	color: inherit;
	text-decoration: none;
}

.kt-active-filters__item:hover {
	border-color: var(--kt-accent);
	color: var(--kt-accent);
}

.kt-active-filters__clear {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* --- 0件のときの案内 --- */
.kt-empty {
	padding: 24px;
	border: 1px solid var(--kt-border);
	border-radius: 8px;
	background: var(--kt-bg-soft);
}

.kt-empty__lead {
	margin: 0 0 20px;
	font-size: var(--kt-fs-md);
	font-weight: 600;
}

.kt-empty__block + .kt-empty__block {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--kt-border);
}

.kt-empty__block h3 {
	margin: 0 0 10px;
	font-size: var(--kt-fs-base);
	font-weight: 700;
}

.kt-empty__block p {
	margin: 0;
	font-size: var(--kt-fs-base);
	color: var(--kt-text-sub);
	line-height: 1.8;
}

.kt-empty__suggest {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kt-empty__suggest a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	font-size: var(--kt-fs-base);
}

.kt-empty__suggest a:hover {
	border-color: var(--kt-navy);
}

.kt-empty__suggest strong {
	color: var(--kt-accent);
	white-space: nowrap;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   黒金の仕上げ
   金は罫線と文字に使い、面で塗るのはボタンなど「押す場所」だけに限る。
   ========================================================================== */

/* --- ヘッダー連絡バー --- */
.kt-topbar {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	border-bottom: 1px solid var(--kt-gold-dim);
}

/* 連絡バーの左側は屋号ではなく、扱う範囲を一言で示す */
.kt-topbar__lead {
	margin: 0;
	font-size: var(--kt-fs-sm);
	letter-spacing: 0.06em;
	color: var(--kt-on-ink-sub);
}

@media (max-width: 600px) {
	.kt-topbar__lead {
		font-size: var(--kt-fs-xs);
	}
}

.kt-topbar__tel-num {
	color: var(--kt-gold-bright);
	letter-spacing: 0.02em;
}

.kt-topbar__tel-label {
	color: var(--kt-on-ink-sub);
}

/* 金のボタンは黒文字。金地に白文字は読みづらく、安っぽく見える。 */
.kt-topbar__cta {
	background: var(--kt-gold);
	color: var(--kt-ink);
	letter-spacing: 0.04em;
}

.kt-topbar__cta:hover {
	background: var(--kt-gold-bright);
	opacity: 1;
}

/* --- ヒーロー --- */
.kt-hero {
	background: linear-gradient(180deg, var(--kt-ink) 0%, var(--kt-ink-2) 100%);
	border-bottom: 1px solid var(--kt-gold-dim);
}

.kt-hero__title {
	letter-spacing: 0.04em;
	font-weight: 600;
}

.kt-hero__lead {
	color: var(--kt-on-ink-sub);
}

/* --- セクション見出し：太い縦棒をやめ、金の細線に --- */
.kt-section__title {
	padding-left: 0;
	border-left: none;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kt-border);
	position: relative;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.kt-section__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 48px;
	height: 2px;
	background: var(--kt-gold);
}

/* --- 検索フォーム --- */
.kt-search {
	background: var(--kt-paper);
	border-color: var(--kt-border);
}

.kt-search__submit {
	background: var(--kt-gold);
	color: var(--kt-ink);
	letter-spacing: 0.08em;
}

.kt-search__submit:hover {
	background: var(--kt-gold-bright);
	opacity: 1;
}

.kt-chip input:checked + span {
	background: var(--kt-ink);
	border-color: var(--kt-ink);
	color: var(--kt-gold-bright);
}

/* --- 価格・件数：金で価値を示す --- */
.kt-property-card__price {
	color: var(--kt-text);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kt-result-bar__count strong {
	color: var(--kt-text);
}

.kt-sort.is-active {
	background: var(--kt-ink);
	border-color: var(--kt-ink);
	color: var(--kt-gold-bright);
}

/* --- 物件カード：金の細線で縁取る --- */
.kt-property-card {
	border-color: var(--kt-border);
	transition: border-color 0.15s, transform 0.15s;
}

/*
 * 物件名・建物リンクは親テーマの青を継がせない。
 * 黒と金で組んだ画面に既定の青いリンクが混ざると、そこだけ安く見える。
 */
.kt-property-card__title a,
.kt-spec__building-link a {
	color: var(--kt-text);
	text-decoration: none;
}

.kt-property-card__title a:hover,
.kt-spec__building-link a:hover {
	color: var(--kt-gold);
}

.kt-spec__building-link a {
	border-bottom: 1px solid var(--kt-gold);
	padding-bottom: 2px;
}

.kt-property-card:hover {
	border-color: var(--kt-gold);
	transform: translateY(-2px);
}

.kt-badge--new {
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
}

.kt-badge--negotiating {
	background: var(--kt-ink-3);
	color: var(--kt-on-ink);
}

/* --- 問い合わせ --- */
.kt-contact {
	background: var(--kt-bg-soft);
	border-color: var(--kt-border);
}

.kt-contact__title {
	letter-spacing: 0.04em;
}

.kt-contact__submit {
	background: var(--kt-gold);
	color: var(--kt-ink);
	letter-spacing: 0.08em;
}

.kt-contact__submit:hover {
	background: var(--kt-gold-bright);
	opacity: 1;
}

.kt-required {
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
}

.kt-contact__target {
	border-left-color: var(--kt-gold);
}

/* --- 概要テーブル --- */
.kt-spec-table th {
	background: var(--kt-bg-soft);
	font-weight: 600;
}

/* --- 相談メニュー --- */
.kt-consult {
	background: var(--kt-ink);
}

.kt-consult .kt-section__title {
	color: var(--kt-on-ink);
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

.kt-consult__item a {
	background: var(--kt-ink-2);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--kt-on-ink);
}

.kt-consult__item a:hover {
	border-color: var(--kt-gold);
}

.kt-consult__label {
	color: var(--kt-gold-bright);
}

.kt-consult__desc {
	color: var(--kt-on-ink-sub);
}

/* --- エリア・駅の回遊 --- */
.kt-termlist a:hover {
	border-color: var(--kt-gold);
	background: var(--kt-paper);
}

.kt-section__more a {
	border-color: var(--kt-ink);
	color: var(--kt-text);
	letter-spacing: 0.06em;
}

.kt-section__more a:hover {
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
}

/* --- フッター --- */

/*
 * 親テーマのコピーライトは隠す。
 * 自前フッターにも同じ表記があり、白地に1行だけ浮いて二重になる。
 */
.kt-own-footer .copyright {
	display: none;
}

.kt-sitefooter {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	border-top: 1px solid var(--kt-gold-dim);
}

.kt-sitefooter__name {
	color: var(--kt-gold-bright);
}

.kt-sitefooter__operator {
	color: var(--kt-on-ink-sub);
	opacity: 1;
}

.kt-sitefooter__links a {
	color: var(--kt-on-ink);
	border-bottom: 1px solid transparent;
}

.kt-sitefooter__links a:hover {
	color: var(--kt-gold-bright);
	border-bottom-color: var(--kt-gold);
}

.kt-sitefooter__copyright {
	color: var(--kt-on-ink-sub);
	border-top-color: rgba(255, 255, 255, 0.12);
	opacity: 1;
}

/* --- スマホ固定バー --- */
@media (max-width: 900px) {
	.kt-mobilebar__tel {
		background: var(--kt-ink);
		color: var(--kt-gold-bright);
	}

	.kt-mobilebar__cta {
		background: var(--kt-gold);
		color: var(--kt-ink);
	}
}

/* 黒地のヒーロー内に置いても文字色を継承しないようにする */
.kt-search,
.kt-search label,
.kt-search legend {
	color: var(--kt-text);
}

.kt-chip span {
	color: var(--kt-text);
}

.kt-chip input:checked + span {
	color: var(--kt-gold-bright);
}

.kt-search__hint {
	color: var(--kt-text-sub);
}

/* ==========================================================================
   ヘッダー（自前）
   親テーマのヘッダーは隠し、ロゴ・メニュー・電話・CTAをこの1本にまとめる。
   ========================================================================== */

/* 親テーマのヘッダーを隠す。スマホの開閉メニューは残す。 */
.kt-own-header #header {
	display: none;
}

.kt-header {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	border-bottom: 1px solid var(--kt-gold-dim);
	position: relative;
	z-index: 10;
}

.kt-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.kt-header__brand {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
}

.kt-header__brand a {
	color: var(--kt-on-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.kt-header__name {
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.kt-header__logo {
	max-height: 48px;
	width: auto;
}

.kt-header__tagline {
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.08em;
	color: var(--kt-gold);
}

/* --- メニュー --- */
.kt-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.kt-header__menu a {
	color: var(--kt-on-ink);
	text-decoration: none;
	font-size: var(--kt-fs-sm);
	letter-spacing: 0.04em;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	display: inline-block;
}

.kt-header__menu a:hover,
.kt-header__menu .current-menu-item > a {
	color: var(--kt-gold-bright);
	border-bottom-color: var(--kt-gold);
}

/* --- 連絡先・CTA --- */
.kt-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kt-header__tel {
	color: var(--kt-on-ink);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}

.kt-header__tel-label {
	font-size: var(--kt-fs-xs);
	color: var(--kt-on-ink-sub);
}

.kt-header__tel-num {
	font-size: var(--kt-fs-md);
	font-weight: 700;
	color: var(--kt-gold-bright);
	letter-spacing: 0.02em;
}

.kt-header__cta {
	padding: 10px 22px;
	border-radius: 4px;
	background: var(--kt-gold);
	color: var(--kt-ink);
	font-weight: 700;
	font-size: var(--kt-fs-base);
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}

.kt-header__cta:hover {
	background: var(--kt-gold-bright);
}

/* --- 狭い画面 --- */
@media (max-width: 900px) {
	.kt-header__inner {
		padding: 10px 12px;
		gap: 10px;
	}

	.kt-header__name {
		font-size: var(--kt-fs-base);
	}

	/*
	 * メニューは横スクロール。
	 * 右端をぼかして、まだ続きがあることを示す。
	 * ぼかしが無いと「お問い合わせ」が切れているだけに見え、
	 * スクロールできることに気づけない。
	 */
	.kt-header__nav {
		order: 3;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
	}

	.kt-header__nav::-webkit-scrollbar {
		display: none;
	}

	.kt-header__menu {
		flex-wrap: nowrap;
		gap: 16px;
		/* 最後の項目がぼかしに隠れたまま終わらないようにする */
		padding-right: 32px;
	}

	.kt-header__menu a {
		white-space: nowrap;
		font-size: var(--kt-fs-sm);
		/* 指で押せる高さを確保する */
		padding: 9px 0;
	}

	/* 画面下の固定バーがあるため、ヘッダーの電話とCTAは省く */
	.kt-header__actions {
		display: none;
	}
}

/* ==========================================================================
   物件概要
   1枚の長い表をやめ、関心の高い順に段を分ける。
   ========================================================================== */

/*
 * 物件名。親テーマの見出しは本文と同じ大きさで、
 * 一覧から来た人がどの物件を開いたのか分かりにくい。
 */
.kt-property-title {
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
}

/* サマリーを続けて見せるため、説明文の前後の余白を詰める */
.single-property .post_content,
.single-building .post_content {
	margin-top: 24px;
}

.kt-spec__title {
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 32px 0 12px;
}

.kt-spec {
	margin-bottom: 32px;
}

@media (max-width: 600px) {
	.kt-property-title {
		font-size: var(--kt-fs-xl);
		margin-bottom: 12px;
	}

	.single-property .post_content,
	.single-building .post_content {
		margin-top: 20px;
	}

	.kt-spec__title {
		font-size: var(--kt-fs-md);
		margin-top: 28px;
	}
}

/* --- サマリー：ここだけで検討可否を判断できるように --- */
.kt-summary {
	border: 1px solid var(--kt-border);
	border-top: 3px solid var(--kt-gold);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 28px;
}

.kt-summary__price {
	padding: 16px 20px;
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.kt-summary__price-label {
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.1em;
	color: var(--kt-on-ink-sub);
}

.kt-summary__price strong {
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--kt-gold-bright);
	letter-spacing: 0.02em;
}

.kt-summary__monthly {
	font-size: var(--kt-fs-sm);
	color: var(--kt-on-ink-sub);
}

.kt-summary__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	margin: 0;
	background: var(--kt-border);
	gap: 1px;
}

.kt-summary__fact {
	background: var(--kt-paper);
	padding: 12px 14px;
}

/*
 * スマホは2列に固定し、項目数が奇数のときは最後の1つを1行分に伸ばす。
 * そのままだと余った枠に下地の罫線色が残り、灰色の空欄が出る。
 */
@media (max-width: 600px) {
	.kt-summary__facts {
		grid-template-columns: 1fr 1fr;
	}

	.kt-summary__fact:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.kt-summary__fact dt {
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}

.kt-summary__fact dd {
	margin: 0;
	font-size: var(--kt-fs-base);
	font-weight: 700;
	line-height: 1.4;
}

/* --- 段の見出し --- */
.kt-spec__heading {
	font-size: var(--kt-fs-base);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 28px 0 10px;
	padding-left: 10px;
	border-left: 3px solid var(--kt-gold);
	line-height: 1.4;
}

.kt-spec .kt-spec-table {
	margin-bottom: 0;
}

/* --- 設備・条件のバッジ --- */
.kt-spec__features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.kt-spec__feature {
	padding: 4px 12px;
	border: 1px solid var(--kt-gold-dim);
	border-radius: 999px;
	background: var(--kt-bg-soft);
	font-size: var(--kt-fs-sm);
}

.kt-spec__building-link {
	margin-top: 12px;
	font-size: var(--kt-fs-base);
}

/* --- 関心の低い情報は畳んでおく --- */
.kt-spec__more {
	margin-top: 28px;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
}

.kt-spec__more > summary {
	padding: 12px 16px;
	cursor: pointer;
	font-size: var(--kt-fs-sm);
	font-weight: 600;
	background: var(--kt-bg-soft);
	list-style: none;
}

.kt-spec__more > summary::-webkit-details-marker {
	display: none;
}

.kt-spec__more > summary::after {
	content: "＋";
	float: right;
	color: var(--kt-text-sub);
}

.kt-spec__more[open] > summary::after {
	content: "－";
}

.kt-spec__more[open] > summary {
	border-bottom: 1px solid var(--kt-border);
}

.kt-spec__more .kt-spec-table {
	border: none;
}

@media (max-width: 600px) {
	.kt-summary__price strong {
		font-size: var(--kt-fs-xl);
	}

	.kt-summary__facts {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- 学区 --- */
.kt-school__lead {
	margin-bottom: 24px;
}

.kt-school__section {
	margin-bottom: 32px;
}

.kt-school__address {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	margin-bottom: 12px;
}

.kt-school__empty {
	padding: 16px;
	background: var(--kt-bg-soft);
	border: 1px solid var(--kt-border);
	border-radius: 4px;
	font-size: var(--kt-fs-base);
}

/* 学区は保証情報ではないため、常に出典と注意を添える */
.kt-school__caution {
	margin-top: 24px;
	padding: 12px 16px;
	border-left: 3px solid var(--kt-gold);
	background: var(--kt-bg-soft);
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	line-height: 1.8;
}

/* ==========================================================================
   学区マップ
   ========================================================================== */
.kt-map-wrap {
	margin-bottom: 32px;
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--kt-paper);
}

.kt-map-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding: 12px 16px;
	background: var(--kt-ink);
	color: var(--kt-on-ink);
}

.kt-map-controls__label {
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.1em;
	color: var(--kt-gold);
}

.kt-map-controls label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--kt-fs-base);
	cursor: pointer;
}

.kt-map {
	width: 100%;
	height: 520px;
	z-index: 0;
	position: relative;
}

/* 1本指で地図をなぞったときだけ出す案内（2本指で動かせることを知らせる） */
.kt-map-hint {
	position: absolute;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 14, 17, 0.55);
	color: #fff;
	font-size: var(--kt-fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}

.kt-map-hint.is-visible {
	opacity: 1;
}

/* 物件のピン。地図の下地より前に出るよう、縁を濃くして影を付ける */
.kt-map-pin__dot {
	display: block;
	width: 18px;
	height: 18px;
	margin: 4px;
	border-radius: 50%;
	background: var(--kt-gold);
	border: 3px solid var(--kt-ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 学区の切替はブラウザ既定の青丸ではなく、画面の色に合わせる */
.kt-map-controls input[type="radio"] {
	accent-color: var(--kt-gold);
	width: 18px;
	height: 18px;
}

@media (max-width: 600px) {
	.kt-map {
		height: 380px;
	}

	.kt-map-controls {
		gap: 6px 14px;
		padding: 10px 12px;
	}

	.kt-map-controls label {
		font-size: var(--kt-fs-sm);
	}
}

.kt-map-status {
	margin: 0;
	padding: 10px 16px;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	border-top: 1px solid var(--kt-border);
}

.kt-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 0 16px 12px;
}

.kt-map-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--kt-fs-sm);
}

.kt-map-legend__swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	display: inline-block;
}

.kt-map-note {
	margin: 0;
	padding: 0 16px 14px;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* 地図上の吹き出し */
.kt-map-pop__price {
	font-weight: 700;
	color: var(--kt-text);
}

.kt-map-pop__sub {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

/* ==========================================================================
   仕上げ：書体・意味の色・白基調への転換
   ここが最終的な指定になる。以前の記述より後ろに置いて上書きする。
   ========================================================================== */
:root {
	/* --- 文字の大きさ（7段階） ---
	   その場で決めた値を並べると階層が伝わらないため、段階を固定する。 */
	--kt-fs-xs: 0.75rem;    /* 12px 補足・キャプション */
	--kt-fs-sm: 0.875rem;   /* 14px 副次情報 */
	--kt-fs-base: 1rem;     /* 16px 本文 */
	--kt-fs-md: 1.125rem;   /* 18px 強めの本文・ボタン */
	--kt-fs-lg: 1.25rem;    /* 20px 小見出し */
	--kt-fs-xl: 1.5rem;     /* 24px 見出し */
	--kt-fs-2xl: 2rem;      /* 32px 大見出し・価格 */

	/* --- 書体 ---
	   欧文・数字を先に置くことで、数字はHelvetica系、和文は游ゴシック系になる。
	   和文書体のままの数字は字面が緩く、価格や面積が締まらない。 */
	--kt-font-sans:
		"Helvetica Neue", Arial,
		"Hiragino Kaku Gothic ProN", "Hiragino Sans",
		"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
		"Noto Sans JP", Meiryo, sans-serif;

	/* 見出し用。字間を空けて使う前提。 */
	--kt-font-display: var(--kt-font-sans);

	/* --- 意味の色 ---
	   金は「価値」を表す色として使う。
	   同じ色で警告やエラーも表すと意味が壊れるため、別に持つ。 */
	--kt-danger: #b3341f;
	--kt-danger-bg: #fdf3f1;
	--kt-danger-line: #e6c3bb;
	--kt-success: #15694a;
	--kt-success-bg: #eef7f2;
	--kt-success-line: #bcdccc;
}

body {
	font-family: var(--kt-font-sans);
}

/*
 * 数字が縦に並ぶ箇所は字幅を揃える。
 * 価格や面積がカードで並んだとき、桁がガタつくのを防ぐ。
 */
.kt-property-card__price,
.kt-property-card__meta,
.kt-summary__price strong,
.kt-summary__fact dd,
.kt-result-bar__count strong,
.kt-spec-table td,
.kt-header__tel-num,
.kt-termlist__count {
	font-variant-numeric: tabular-nums;
}

/* --- 見出し --- */
.kt-section__title,
.kt-hero__title,
.kt-contact__title,
.kt-header__name {
	font-family: var(--kt-font-display);
	letter-spacing: 0.06em;
	text-wrap: balance;
}

/* 見出しの上に置く英字ラベル。金の細字で格を出す。 */
.kt-eyebrow {
	display: block;
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-sub);
	margin-bottom: 4px;
}

/* ==========================================================================
   金の使い方を限定する
   白地に金の文字は薄くて読めない（コントラスト比が基準を満たさない）。
   金は「黒地の文字」か「罫線・下線」にのみ使う。
   ========================================================================== */
.kt-property-card__price,
.kt-result-bar__count strong {
	color: var(--kt-text);
}

/* --- エラー・必須は金ではなく警告色にする --- */
.kt-contact__error {
	color: var(--kt-danger);
	font-weight: 600;
}

.kt-required {
	background: var(--kt-danger);
	color: #fff;
}

.kt-contact__field [aria-invalid="true"] {
	border-color: var(--kt-danger);
	background: var(--kt-danger-bg);
}

.kt-contact__notice--error {
	background: var(--kt-danger-bg);
	border-color: var(--kt-danger-line);
	color: var(--kt-danger);
}

.kt-contact__notice--success {
	background: var(--kt-success-bg);
	border-color: var(--kt-success-line);
	color: var(--kt-success);
}

.kt-closed-notice {
	background: var(--kt-danger-bg);
	border-color: var(--kt-danger-line);
}

/* 送信ボタンは行動の色。金の面で塗ると押せる感じが弱いため黒にする。 */
.kt-contact__submit,
.kt-search__submit {
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
	letter-spacing: 0.12em;
}

.kt-contact__submit:hover,
.kt-search__submit:hover {
	background: var(--kt-ink-2);
	opacity: 1;
}

.kt-badge--new {
	background: var(--kt-ink);
	color: var(--kt-gold-bright);
}

/* ==========================================================================
   白基調へ転換
   黒い面が並ぶと、どの面も印象に残らない。
   黒はヘッダーとフッター（額縁）に限り、中身は白地＋金の細線で仕切る。
   ========================================================================== */

/* --- ヒーロー：黒ベタをやめ、白地に金の罫線 --- */
.kt-hero {
	background: var(--kt-paper);
	border-bottom: 1px solid var(--kt-border);
	padding-top: 48px;
	padding-bottom: 40px;
}

.kt-hero__title {
	color: var(--kt-text);
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.kt-hero__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 2px;
	background: var(--kt-gold);
}

.kt-hero__lead {
	color: var(--kt-text-sub);
}

.kt-hero .kt-search {
	background: var(--kt-bg-soft);
	border: 1px solid var(--kt-border);
}

/*
 * スマホは冒頭の余白を詰める。
 * 画面が狭いぶん、見出しと説明文だけで最初の1画面が終わってしまい、
 * 物件を探せるサイトだと伝わらないため、検索欄を早く見せる。
 */
@media (max-width: 600px) {
	/*
	 * スマホでサイドバーは本文の下に積まれる。
	 * 物件を見終わった位置に検索窓と最近の投稿が並んでも次の行動につながらないため、
	 * 物件まわりのページでは出さない。問い合わせ導線を最後に置く。
	 */
	.single-property .l-sidebar,
	.single-building .l-sidebar,
	.post-type-archive-property .l-sidebar,
	.tax-kt_area .l-sidebar,
	.tax-kt_station .l-sidebar,
	.tax-kt_madori .l-sidebar,
	.tax-kt_school_e .l-sidebar,
	.tax-kt_school_j .l-sidebar,
	.page .l-sidebar,
	.home .l-sidebar {
		display: none;
	}

	/* パンくずは10pxまで小さくなる。読めないうえ指で押せない */
	.p-breadcrumb {
		font-size: var(--kt-fs-sm);
	}

	.p-breadcrumb a {
		display: inline-block;
		padding: 4px 0;
	}

	/* 親テーマは本文の上に56pxの余白を取る。狭い画面では空白が目立つだけなので詰める */
	.home .l-content,
	.single-property .l-content,
	.single-building .l-content {
		padding-top: 16px;
	}

	.kt-hero {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.kt-hero__title {
		font-size: var(--kt-fs-xl);
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.kt-hero__lead {
		font-size: var(--kt-fs-sm);
		line-height: 1.7;
		margin-bottom: 16px;
	}
}

/* --- 相談メニュー：黒ベタをやめる --- */
.kt-consult {
	background: var(--kt-bg-soft);
}

.kt-consult .kt-section__title {
	color: var(--kt-text);
	border-bottom-color: var(--kt-border);
}

.kt-consult__item a {
	background: var(--kt-paper);
	border-color: var(--kt-border);
	color: var(--kt-text);
}

.kt-consult__item a:hover {
	border-color: var(--kt-gold);
}

.kt-consult__label {
	color: var(--kt-text);
}

.kt-consult__desc {
	color: var(--kt-text-sub);
}

/* --- 物件概要のサマリー：黒帯をやめ、金の罫線で価格を立てる --- */
.kt-summary__price {
	background: var(--kt-paper);
	color: var(--kt-text);
	border-bottom: 1px solid var(--kt-border);
	align-items: baseline;
}

.kt-summary__price-label {
	color: var(--kt-text-sub);
}

.kt-summary__price strong {
	color: var(--kt-text);
}

.kt-summary__monthly {
	color: var(--kt-text-sub);
}

/* --- 地図の操作バー：黒ベタをやめる --- */
.kt-map-controls {
	background: var(--kt-bg-soft);
	color: var(--kt-text);
	border-bottom: 1px solid var(--kt-border);
}

.kt-map-controls__label {
	color: var(--kt-text-sub);
}

/* --- 罫線を金の細線に。面ではなく線で高級感を出す --- */
.kt-summary {
	border-top-color: var(--kt-gold);
}

.kt-search,
.kt-property-card,
.kt-contact,
.kt-map-wrap {
	border-color: var(--kt-border);
}

.kt-property-card:hover {
	border-color: var(--kt-gold);
}

/* --- 本文の読みやすさ --- */
.kt-hero__lead,
.kt-section__lead,
.kt-empty__block p,
.kt-school__lead {
	line-height: 1.9;
	max-width: 42em;
}

/* ==========================================================================
   住宅ローンの返済シミュレーション
   ========================================================================== */
.kt-loan {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid var(--kt-border);
	border-top: 3px solid var(--kt-gold);
	border-radius: 4px;
	background: var(--kt-paper);
}

.kt-loan__title {
	margin: 0 0 8px;
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.kt-loan__lead {
	margin: 0 0 20px;
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

.kt-loan__inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.kt-loan__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kt-loan__field label {
	font-size: var(--kt-fs-sm);
	font-weight: 600;
}

.kt-loan__input-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kt-loan__input-row input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(14, 14, 17, 0.22);
	border-radius: 4px;
	background: #fff;
	font-size: var(--kt-fs-base);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.kt-loan__unit {
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
	white-space: nowrap;
}

.kt-loan__hint {
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.6;
}

.kt-loan__borrow {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--kt-bg-soft);
	border-radius: 4px;
	font-size: var(--kt-fs-sm);
}

.kt-loan__borrow strong {
	font-size: var(--kt-fs-md);
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
}

/* --- 比較表 --- */
.kt-loan__table-wrap {
	overflow-x: auto;
}

.kt-loan__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kt-fs-sm);
	font-variant-numeric: tabular-nums;
}

.kt-loan__table th,
.kt-loan__table td {
	border: 1px solid var(--kt-border);
	padding: 10px 12px;
	text-align: right;
	white-space: nowrap;
}

.kt-loan__table thead th {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.04em;
}

.kt-loan__table tbody th {
	background: var(--kt-bg-soft);
	text-align: center;
	font-weight: 700;
}

/* 毎月の返済額が判断の中心になるため、そこだけ強める */
.kt-loan__monthly {
	font-size: var(--kt-fs-md);
	font-weight: 700;
	color: var(--kt-text);
}

/*
 * スマホは4列が収まらず、右端の「うち利息」が画面外に切れる。
 * 見出し行を隠して1期間=1枚のカードにし、
 * 期間と毎月の返済額を上段、総返済額と利息を下段に置く。
 */
@media (max-width: 600px) {
	.kt-loan__table thead {
		display: none;
	}

	.kt-loan__table,
	.kt-loan__table tbody {
		display: block;
	}

	.kt-loan__table tbody tr {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		gap: 2px 10px;
		border: 1px solid var(--kt-border);
		border-radius: 4px;
		padding: 8px 12px;
		margin-bottom: 8px;
	}

	.kt-loan__table tbody th,
	.kt-loan__table tbody td {
		border: none;
		padding: 0;
		white-space: nowrap;
	}

	.kt-loan__table tbody th {
		background: none;
		font-size: var(--kt-fs-md);
	}

	.kt-loan__table tbody .kt-loan__monthly {
		text-align: right;
		font-size: var(--kt-fs-lg);
	}

	/* 総返済額と利息は補足なので、ラベルを添えて小さく下段に並べる */
	.kt-loan__table tbody td[data-label] {
		grid-column: span 1;
		text-align: left;
		font-size: var(--kt-fs-xs);
		color: var(--kt-text-sub);
	}

	.kt-loan__table tbody td[data-label]::before {
		content: attr(data-label) "　";
	}

	.kt-loan__table tbody td[data-label]:last-child {
		text-align: right;
	}
}

.kt-loan__note,
.kt-loan__caution {
	margin: 14px 0 0;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

.kt-loan__caution {
	padding: 10px 14px;
	border-left: 3px solid var(--kt-gold);
	background: var(--kt-bg-soft);
}

.kt-loan__next {
	margin-top: 32px;
}

.kt-loan__next h2 {
	font-size: var(--kt-fs-lg);
	margin-bottom: 12px;
}

.kt-loan__next p {
	line-height: 1.9;
	max-width: 42em;
	margin-bottom: 12px;
}

/* --- 相談メニューのCTA --- */
.kt-consult__cta {
	margin-top: 10px;
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	color: var(--kt-text);
}

.kt-consult__cta::after {
	content: " →";
	color: var(--kt-gold);
}


/* ==========================================================================
   相場のグラフ
   図を主役にするため、中央寄せの落ち着いた構成にする。
   ========================================================================== */
.kt-market {
	margin-bottom: 48px;
	text-align: center;
}

.kt-market__eyebrow {
	margin: 0 0 6px;
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.28em;
	color: var(--kt-gold);
}

.kt-market__title {
	margin: 0 0 16px;
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.kt-market__lead {
	margin: 0 auto 28px;
	max-width: 44em;
	line-height: 1.9;
	color: var(--kt-text-sub);
}

/* --- 築年数の切り替え --- */
.kt-market__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}

.kt-market__tab {
	padding: 8px 18px;
	border: 1px solid var(--kt-border);
	border-radius: 999px;
	background: var(--kt-paper);
	color: var(--kt-text-sub);
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.kt-market__tab:hover {
	border-color: var(--kt-gold);
	color: var(--kt-text);
}

.kt-market__tab.is-active {
	background: var(--kt-ink);
	border-color: var(--kt-ink);
	color: var(--kt-gold-bright);
}

/*
 * 図はすべて描いておき、選ばれたものだけ出す。
 * 切り替えのたびに描き直さないので、押した瞬間に切り替わる。
 */
.kt-market__panel {
	display: none;
}

.kt-market__panel.is-active {
	display: block;
}

.kt-market__empty {
	padding: 24px 16px;
	background: var(--kt-bg-soft);
	border: 1px solid var(--kt-border);
	border-radius: 6px;
	color: var(--kt-text-sub);
	font-size: var(--kt-fs-sm);
}

@media (max-width: 600px) {
	.kt-market__tabs {
		gap: 6px;
	}

	.kt-market__tab {
		padding: 7px 13px;
		font-size: var(--kt-fs-xs);
	}
}

.kt-market__figure {
	margin: 0 0 24px;
}

.kt-market__chart-wrap {
	overflow-x: auto;
}

.kt-market__chart {
	/* 固定の描画領域なので原寸を超えて拡大しない。文字だけ巨大になるのを防ぐ。 */
	width: 100%;
	max-width: 960px;
	min-width: 640px;
	height: auto;
	color: var(--kt-text);
	font-variant-numeric: tabular-nums;
}

/*
 * スマホは図を640pxのまま横スクロールで見せる。
 * ただしその幅に縮むと図中の文字は実寸9px前後になり読めないので、
 * 描画単位の文字サイズを上げて実寸で12〜13pxに戻す。
 */
@media (max-width: 600px) {
	.kt-market__chart text {
		font-size: 20px;
	}

	.kt-market__chart text[font-weight="700"] {
		font-size: 24px;
	}
}

.kt-market__caption {
	margin-top: 12px;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
}

/* --- 内訳は既定で畳む。図で伝わる情報を表で繰り返さない。 --- */
.kt-market__detail {
	max-width: 720px;
	margin: 0 auto 20px;
	text-align: left;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
}

.kt-market__detail > summary {
	padding: 12px 16px;
	cursor: pointer;
	font-size: var(--kt-fs-sm);
	font-weight: 600;
	background: var(--kt-bg-soft);
	list-style: none;
}

.kt-market__detail > summary::-webkit-details-marker {
	display: none;
}

.kt-market__detail > summary::after {
	content: "＋";
	float: right;
	color: var(--kt-text-sub);
}

.kt-market__detail[open] > summary::after {
	content: "－";
}

.kt-market__detail > *:not(summary) {
	margin-left: 16px;
	margin-right: 16px;
}

.kt-market__subtitle {
	font-size: var(--kt-fs-base);
	font-weight: 700;
	margin: 20px 0 10px;
	padding-left: 10px;
	border-left: 3px solid var(--kt-gold);
}

.kt-market__table-wrap {
	overflow-x: auto;
	margin-bottom: 16px;
}

.kt-market__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kt-fs-sm);
	font-variant-numeric: tabular-nums;
}

.kt-market__table th,
.kt-market__table td {
	border: 1px solid var(--kt-border);
	padding: 10px 12px;
	text-align: right;
	white-space: nowrap;
}

.kt-market__table thead th {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	text-align: center;
	font-weight: 600;
}

.kt-market__table tbody th {
	background: var(--kt-bg-soft);
	text-align: center;
}

.kt-market__note {
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	margin-bottom: 16px;
}

.kt-market__source {
	max-width: 46em;
	margin: 0 auto;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
	line-height: 1.9;
	text-align: left;
	padding: 12px 14px;
	border-left: 3px solid var(--kt-gold);
	background: var(--kt-bg-soft);
}

.kt-market__next {
	margin-top: 32px;
}

.kt-market__next h2 {
	font-size: var(--kt-fs-lg);
	margin-bottom: 12px;
}

.kt-market__next p {
	line-height: 1.9;
	max-width: 42em;
}

/* 相場ページの見出し。図と一体で見せるため中央寄せ。 */
.kt-market__head {
	text-align: center;
	margin-bottom: 8px;
}

.kt-market__head .kt-market__title {
	margin: 0;
}

/* --- 査定フォームの前に置く相場 --- */
.kt-market-lead {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid var(--kt-border);
	border-top: 3px solid var(--kt-gold);
	border-radius: 4px;
	background: var(--kt-paper);
}

.kt-market-lead__title {
	margin: 0 0 12px;
	font-size: var(--kt-fs-lg);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}

.kt-market-lead__fact {
	margin: 0 auto 20px;
	max-width: 44em;
	text-align: center;
	line-height: 1.9;
	color: var(--kt-text-sub);
}

.kt-market-lead__fact strong {
	color: var(--kt-text);
	font-variant-numeric: tabular-nums;
}

/* 入れ子になるため、内側の余白は詰める */
.kt-market-lead .kt-market {
	margin-bottom: 0;
}

.kt-market-lead .kt-market__lead {
	display: none;
}