/*
 * UI検討用のスタイル（プロトタイプ）。
 *
 * 採用を見送ったときに丸ごと消せるよう、本体の style.css には混ぜない。
 * 色・字送りは style.css の :root トークンをそのまま使う。
 * ここで新しい色を作らない（作ると本体と二重管理になる）。
 */

.kt-nav2 {
	position: relative;
	/*
	 * ヒーローや検索パネルより手前に出す。
	 * 下げるとメガメニューが本文に潜り、文字が透けて重なって見える。
	 */
	z-index: 200;
	background: var(--kt-paper);
	border-bottom: 1px solid var(--kt-border);
}

.kt-nav2__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* --- ロゴ --- */
.kt-nav2__brand {
	margin: 0;
	flex: 0 0 auto;
}

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

.kt-nav2__logo {
	max-height: 44px;
	width: auto;
}

/*
 * 屋号。ロゴ画像が無い状態が続くため、文字だけでも看板に見えるよう組む。
 * メニューの文字（16px）と差を付けないと、並んだ語のひとつに見える。
 */
.kt-nav2__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kt-nav2__name {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.12em;
	color: var(--kt-ink);
}

.kt-nav2__tagline {
	font-size: var(--kt-fs-xs);
	letter-spacing: 0.06em;
	color: var(--kt-text-sub);
}

/* 左の縦棒。東西線の水色から濃紺へ落として、サイトの色を頭に置く。 */
.kt-nav2__mark {
	width: 5px;
	align-self: stretch;
	min-height: 40px;
	margin-right: 12px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--kt-accent-bright), var(--kt-ink));
}

/* --- メニュー --- */
.kt-nav2__nav {
	flex: 1 1 auto;
}

.kt-nav2__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.kt-nav2__item {
	position: static; /* メガメニューは画面幅いっぱいに出すため、基準はヘッダー側に置く */
}

.kt-nav2__link {
	display: inline-block;
	/* 「買いたい」が2行に割れると項目に見えなくなるため、折り返さない。 */
	white-space: nowrap;
	padding: 18px 14px;
	color: var(--kt-ink);
	font-size: var(--kt-fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.kt-nav2__link:hover,
.kt-nav2__item--mega:hover > .kt-nav2__link,
.kt-nav2__item--mega:focus-within > .kt-nav2__link,
.kt-nav2__item--mega.is-open > .kt-nav2__link {
	color: var(--kt-accent);
	border-bottom-color: var(--kt-accent);
}

/* --- 電話・会員 --- */
.kt-nav2__side {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * 連絡先。電話番号を最大にして、営業時間と定休日を右に添える。
 * その下に会員・問い合わせの導線を横一列で置く。
 * 面で塗ったボタンを並べると、どれが主かが伝わらないため、
 * ここでは線のアイコンと文字だけにして、電話を主役のまま残す。
 */
.kt-nav2__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.kt-nav2__contact {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kt-nav2__tel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	text-decoration: none;
	color: var(--kt-ink);
}

.kt-nav2__tel-num {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.kt-nav2__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.kt-nav2__icon--tel {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--kt-accent);
}

.kt-nav2__hours {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: var(--kt-fs-xs);
	line-height: 1.35;
	color: var(--kt-text-sub);
	white-space: nowrap;
}

.kt-nav2__links {
	display: flex;
	align-items: center;
	gap: 18px;
}

.kt-nav2__link-icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kt-ink);
	text-decoration: none;
	white-space: nowrap;
}

.kt-nav2__link-icon:hover {
	color: var(--kt-accent);
	text-decoration: underline;
}

/* ==========================================================================
   メガメニュー
   ホバーと、キーボードのフォーカス（focus-within）の両方で開く。
   タッチ端末はホバーが無いため、狭い画面では通常の横スクロールに落とす。
   ========================================================================== */
.kt-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	background: var(--kt-ink);
	color: var(--kt-on-ink);
	box-shadow: 0 18px 40px rgba(10, 47, 58, 0.22);
	/* 閉じている状態。display:none にすると開閉が急に見えるため透明度で扱う */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.kt-nav2__item--mega:hover > .kt-mega,
.kt-nav2__item--mega:focus-within > .kt-mega,
.kt-nav2__item--mega.is-open > .kt-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kt-mega__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 16px 32px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 32px;
}

.kt-mega__head {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--kt-accent-dim);
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--kt-accent-bright);
}

.kt-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

/* エリアのように短い語が並ぶ列は2段組みにして、縦に伸ばさない */
.kt-mega__list--grid {
	grid-template-columns: 1fr 1fr;
	gap: 2px 16px;
}

.kt-mega__list a {
	display: block;
	padding: 8px 10px;
	border-radius: 4px;
	color: var(--kt-on-ink);
	text-decoration: none;
}

.kt-mega__list a:hover {
	background: var(--kt-ink-3);
	color: var(--kt-paper);
}

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

.kt-mega__note {
	display: block;
	margin-top: 2px;
	font-size: var(--kt-fs-xs);
	color: var(--kt-on-ink-sub);
}

/*
 * 中間の幅。ロゴ・メニュー・連絡先の3つが1行に収まらなくなる手前で、
 * 余白と文字を詰めて耐える。ここで畳むとPCなのにメニューが消える。
 */
@media (max-width: 1280px) {
	.kt-nav2__inner {
		gap: 16px;
	}

	.kt-nav2__link {
		padding: 18px 9px;
		font-size: var(--kt-fs-sm);
	}

	.kt-nav2__tel-num {
		font-size: 1.5rem;
	}

	.kt-nav2__links {
		gap: 12px;
	}
}

/* --- 狭い画面 --- */
@media (max-width: 1000px) {
	.kt-nav2__inner {
		flex-wrap: wrap;
		gap: 10px 16px;
		padding: 10px 12px;
	}

	.kt-nav2__side {
		margin-left: auto;
	}

	/* 画面下の固定バーに電話と問い合わせがあるため、ここでは重ねない。 */
	.kt-nav2__contact,
	.kt-nav2__hours {
		display: none;
	}

	.kt-nav2__links {
		gap: 12px;
	}

	.kt-nav2__name {
		font-size: var(--kt-fs-lg);
	}

	.kt-nav2__tagline {
		display: none;
	}

	/*
	 * メガメニューはホバーで開けないので、親項目だけを横スクロールで出す。
	 * 中身は各ページの絞り込みで辿れる。
	 */
	.kt-nav2__nav {
		order: 3;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
	}

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

	.kt-nav2__menu {
		flex-wrap: nowrap;
	}

	.kt-nav2__link {
		padding: 10px 12px;
		white-space: nowrap;
		font-size: var(--kt-fs-sm);
	}

	/*
	 * 狭い画面ではパネルを画面幅いっぱいの下開きにする。
	 * 開くのは指で押したときだけ（JSが is-open を付ける）。
	 */
	.kt-mega {
		position: absolute;
		left: 0;
		right: 0;
		max-height: 70vh;
		overflow-y: auto;
	}

	.kt-mega__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px 12px 24px;
	}
}

/* ==========================================================================
   会員ページ（モック）
   ========================================================================== */
.kt-mock-note {
	margin: 0 0 20px;
	padding: 10px 14px;
	border-left: 4px solid var(--kt-accent);
	background: var(--kt-bg-soft);
	font-size: var(--kt-fs-sm);
	color: var(--kt-text-sub);
}

.kt-member {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 24px;
	align-items: start;
}

.kt-member__panel {
	border: 1px solid var(--kt-border);
	border-radius: 8px;
	padding: 24px;
	background: var(--kt-paper);
}

.kt-member__panel--mypage {
	background: var(--kt-bg-soft);
}

.kt-member__title {
	margin: 0 0 10px;
	font-size: var(--kt-fs-lg);
	color: var(--kt-ink);
}

.kt-member__lead {
	margin: 0 0 14px;
	font-size: var(--kt-fs-sm);
}

.kt-member__benefits {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: var(--kt-fs-sm);
}

.kt-member__benefits li::before {
	content: "✓";
	color: var(--kt-green);
	font-weight: 700;
	margin-right: 8px;
}

.kt-member__form {
	display: grid;
	gap: 12px;
}

.kt-member__field {
	display: grid;
	gap: 4px;
	font-size: var(--kt-fs-sm);
	font-weight: 700;
}

.kt-member__field input {
	padding: 10px 12px;
	border: 1px solid var(--kt-border);
	border-radius: 4px;
	font-size: var(--kt-fs-base);
	font-weight: 400;
}

.kt-member__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--kt-fs-sm);
}

.kt-member__submit {
	padding: 12px 16px;
	border: 0;
	border-radius: 4px;
	background: var(--kt-accent);
	color: var(--kt-paper);
	font-size: var(--kt-fs-md);
	font-weight: 700;
	cursor: pointer;
}

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

.kt-member__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.kt-member__tab {
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--kt-paper);
	border: 1px solid var(--kt-border);
	font-size: var(--kt-fs-xs);
}

.kt-member__tab--current {
	background: var(--kt-accent);
	border-color: var(--kt-accent);
	color: var(--kt-paper);
	font-weight: 700;
}

.kt-member__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.kt-member__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"badge name price"
		"badge meta meta";
	gap: 2px 12px;
	padding: 14px;
	background: var(--kt-paper);
	border: 1px solid var(--kt-border);
	border-radius: 6px;
}

.kt-member__badge {
	grid-area: badge;
	align-self: center;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--kt-ink);
	color: var(--kt-paper);
	font-size: var(--kt-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}

.kt-member__badge--saved {
	background: var(--kt-green);
}

.kt-member__name {
	grid-area: name;
	font-weight: 700;
}

.kt-member__price {
	grid-area: price;
	font-weight: 700;
	color: var(--kt-accent);
	white-space: nowrap;
}

.kt-member__meta {
	grid-area: meta;
	font-size: var(--kt-fs-xs);
	color: var(--kt-text-sub);
}

@media (max-width: 900px) {
	.kt-member {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   フッター
   上段にサイトマップ、下段に会社情報・電話・問い合わせ。
   ========================================================================== */

.kt-foot {
	background: var(--kt-ink);
	color: var(--kt-on-ink);
}

.kt-foot__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 16px 32px;
}

/* --- サイトマップ --- */
.kt-foot__sitemap {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.kt-foot__head {
	margin: 0 0 12px;
	font-size: var(--kt-fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--kt-accent-bright);
}

.kt-foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.kt-foot__list--grid {
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px;
}

.kt-foot__list a {
	color: var(--kt-on-ink);
	text-decoration: none;
	font-size: var(--kt-fs-sm);
}

.kt-foot__list a:hover {
	color: var(--kt-paper);
	text-decoration: underline;
}

/* --- 会社情報・電話・CTA --- */
.kt-foot__company {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto;
	align-items: center;
	gap: 32px;
	padding: 28px 0;
}

.kt-foot__name {
	margin: 0 0 4px;
	font-size: var(--kt-fs-md);
	font-weight: 700;
	color: var(--kt-paper);
	letter-spacing: 0.06em;
}

.kt-foot__operator,
.kt-foot__address {
	margin: 0 0 4px;
	font-size: var(--kt-fs-xs);
	color: var(--kt-on-ink-sub);
	line-height: 1.8;
}

.kt-foot__operator a {
	color: var(--kt-on-ink);
}

.kt-foot__tel {
	display: inline-block;
	color: var(--kt-paper);
	text-decoration: none;
}

.kt-foot__tel-num {
	font-size: var(--kt-fs-2xl);
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.kt-foot__hours {
	margin: 2px 0 0;
	font-size: var(--kt-fs-xs);
	color: var(--kt-on-ink-sub);
}

.kt-foot__cta {
	display: inline-block;
	padding: 16px 40px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	color: var(--kt-paper);
	font-size: var(--kt-fs-md);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
}

.kt-foot__cta:hover {
	background: var(--kt-paper);
	color: var(--kt-ink);
}

/* --- 最下段 --- */
.kt-foot__copyright {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	justify-content: space-between;
	font-size: var(--kt-fs-xs);
	color: var(--kt-on-ink-sub);
}

/* --- 狭い画面 --- */
@media (max-width: 1000px) {
	.kt-foot__sitemap {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.kt-foot__company {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: left;
	}

	.kt-foot__cta {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.kt-foot__inner {
		/* 画面下の固定CTAバーに隠れないよう、下に余白を足す */
		padding: 32px 12px 96px;
	}

	.kt-foot__sitemap {
		grid-template-columns: 1fr;
	}

	.kt-foot__list--grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   トップのメインビジュアル
   親テーマは高さを固定して画像を切り抜く（object-fit: cover）。
   横長のバナー画像は文字ごと上下が切れてしまうため、画像の縦横比のまま出す。
   極端に縦長の画像を入れたときだけ、上限の高さで切る。
   ========================================================================== */
:root {
	/*
	 * バナー画像の縦横比。差し替えるときはこの2つだけ直す。
	 * 比を表す数値（--kt-mv-ratio-num）は calc で使うため別に持つ。
	 */
	--kt-mv-ratio: 1735 / 906;
	--kt-mv-ratio-num: 1.915;

	/* 画像の実寸。これ以上引き伸ばすと粗くなる。 */
	--kt-mv-max: 1735px;

	/* 画像の下に残す高さ。次に内容が続くことが分かる程度に空ける。 */
	--kt-mv-reserve: 160px;
}

#main_visual.-height-set,
.p-mainVisual.-type-single .p-mainVisual__inner,
.p-mainVisual.-type-single .p-mainVisual__slide {
	/*
	 * 画像の縦横比で高さを決める。
	 * 親テーマの重ね順（画像の上に載るテクスチャ）はそのままにする。
	 * 画像そのものを通常フローに戻すと、テクスチャが画像の上に来て隠れてしまう。
	 */
	height: auto;
	aspect-ratio: var(--kt-mv-ratio);
	max-height: none;
}

/*
 * 高さでは止めない。幅で止める。
 *
 * 高さの上限で止めると、縦横比が保てなくなった分だけ object-fit: cover が
 * 左右を切り落とす。文字ごと作り込んだバナーなので、切れると意味が壊れる。
 * 実測では横1710pxの画面で左右15%、1920pxで24%が切れていた。
 *
 * 幅で止めれば画像は縮むだけで、切れない。
 * 画面の高さから逆算した幅と、画像の実寸の小さい方を採る。
 * 横長で背の低い画面では左右に余白が出るが、
 * 「切れている」より「小さい」方が、伝えたいことは残る。
 */
.p-mainVisual.-type-single .p-mainVisual__inner {
	max-width: min(
		var(--kt-mv-max),
		calc( ( 100svh - var(--kt-mv-reserve) ) * var(--kt-mv-ratio-num) )
	);
	margin-inline: auto;
}

/*
 * 幅を止めるのは中の枠だけにして、外側は画面いっぱいのまま残す。
 * バナーの左右にできる余白が「途切れた白」ではなく「地」に見える。
 * 参考にしている不動産サイトも、背景は全幅・バナーは中央、の作りになっている。
 */
.p-mainVisual.-type-single {
	background: var(--kt-bg-soft);
}

/*
 * 親テーマはメインビジュアルにドット模様と黒20%の膜を重ねる。
 * 文字を画像の上に載せるときは読みやすくなるが、
 * 当サイトは文字ごと作り込んだバナー画像を置くため、膜があると色が濁る。
 * 画像そのものの見え方を優先して外す。
 */
.p-mainVisual .c-filterLayer::before,
.p-mainVisual .c-filterLayer::after {
	display: none;
}

/*
 * ヘッダーとヒーローの間を詰める。
 *
 * 親テーマは本文の上に 4em の余白を置く。
 * ヒーローが写真の全幅ブロックになったため、その余白が
 * ヘッダーと写真の間の白い帯として残っていた（実測24px）。
 * 写真はヘッダーの直下から始める。
 *
 * ヒーローの中の余白（見出しまでの間）は
 * style.css の padding-block が持つので、ここでは触らない。
 *
 * body のクラス（top）は親テーマのJSが書き換えるため当てにしない。
 * トップの本文（.kt-front）が中にあるかどうかで判定する。
 */
#content:has(.kt-front) {
	padding-top: 0;
}

/*
 * 記事スライダーに1件も入っていないときは、空の帯だけが残る。
 * コラムを公開するまでの間、メインビジュアルと物件検索の間に
 * 意味の無い余白ができるため出さない。
 * 記事が入れば自動で表示に戻る。
 */
.p-postSlider:not(:has(li)) {
	display: none;
}

/* --- 狭い画面のメニュー開閉 -------------------------------------------- */
/*
 * 項目が多く、横に並べると画面からはみ出す。
 * 広い画面ではこれまで通り並べ、狭い画面だけ畳む。
 */
/*
 * 開閉のための入れ物。
 *
 * 広い画面では無いものとして扱う。
 * 中のメニューと連絡先が、これまで通りヘッダーの直接の子として横に並ぶ。
 * block のままにすると2つが縦に積まれ、ヘッダーが2段になる。
 */
.kt-nav2__panel {
	display: contents;
}

.kt-nav2__toggle {
	display: none;
	align-items: center;
	gap: 4px;
	flex-direction: column;
	margin-left: auto;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--kt-ink);
	cursor: pointer;
	font: inherit;
}

.kt-nav2__bars,
.kt-nav2__bars::before,
.kt-nav2__bars::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform .2s, opacity .2s;
}

.kt-nav2__bars {
	position: relative;
	/*
	 * 上下の線は position:absolute で外側に出しているため、
	 * この要素の高さ（2px）には含まれない。
	 * 余白で3本ぶんの場所を確保しないと、下の文字と重なる。
	 */
	margin: 8px 0;
}

.kt-nav2__bars::before,
.kt-nav2__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.kt-nav2__bars::before { top: -8px; }
.kt-nav2__bars::after  { top: 8px; }

/* 開いている間はバツにする。同じボタンで閉じられることが見て分かる。 */
.is-menu-open .kt-nav2__bars {
	background: transparent;
}

.is-menu-open .kt-nav2__bars::before {
	transform: translateY(8px) rotate(45deg);
}

.is-menu-open .kt-nav2__bars::after {
	transform: translateY(-8px) rotate(-45deg);
}

.kt-nav2__toggle-label {
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 1;
}

/*
 * 畳み始める幅。
 * 1280pxではメニューと連絡先が並んで収まるが、1100pxでは右に溢れる。
 * 実測した境目より手前で畳む。
 */
@media (max-width: 1200px) {
	.kt-nav2__toggle {
		display: flex;
	}

	.kt-nav2__inner {
		flex-wrap: nowrap;
		align-items: center;
	}

	/*
	 * 閉じているときは高さ0。display:none にしないのは、
	 * 開閉に動きを付けるためと、読み上げの順序を保つため。
	 */
	.kt-nav2__panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: grid;
		gap: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--kt-paper);
		box-shadow: 0 12px 24px rgba(10, 47, 58, 0.14);
		transition: max-height .25s ease;
		z-index: 60;
	}

	/*
	 * 開いたときの高さ。
	 * calc(100svh - 100%) は 100% の基準が定まらず解決できない。
	 * 画面の高さに対する割合で指定し、項目が増えても中で送れるようにする。
	 */
	.is-menu-open .kt-nav2__panel {
		max-height: 80svh;
		overflow-y: auto;
	}

	.kt-nav2 {
		position: relative;
	}

	/*
	 * 畳んだ中では、横スクロール前提の指定を打ち消す。
	 * 並び順も戻す。畳んだ中で電話が先に来ると、
	 * メニューを開いた人が探しているものが下に隠れる。
	 */
	.kt-nav2__panel .kt-nav2__nav {
		order: 0;
		width: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.kt-nav2__panel .kt-nav2__side {
		order: 1;
	}

	.kt-nav2__menu {
		display: block;
	}

	.kt-nav2__item {
		border-top: 1px solid var(--kt-border);
	}

	.kt-nav2__link {
		display: block;
		padding: 15px 18px;
		font-size: var(--kt-fs-base);
	}

	.kt-nav2__side {
		margin: 0;
		padding: 14px 18px 18px;
		border-top: 1px solid var(--kt-border);
		background: var(--kt-bg-soft);
	}

	/* 畳んだ中では電話と営業時間も出す。画面上部に置く場所がないため。 */
	.kt-nav2__contact,
	.kt-nav2__hours {
		display: block;
	}

	.kt-nav2__links {
		gap: 18px;
		margin-top: 12px;
	}
}