@charset "utf-8";
/* ****************************************************************************

	共通ヘッダー（2026 リニューアル）

	・マークアップ : common/inc/header.inc（静的 HTML へは同期スクリプトで展開）
	・動作         : common/js/header-renewal.js（jQuery・readDevice に依存しない）
	・デザイン     : 00_reference/top/psd-coding-package-2026top（1600px 幅）の header グループ
	                 ロゴ x50 y42 252x57 / 上段ボタン 100x36・110x36（y26）/
	                 主ナビ 16px（y84〜100・項目間 32px）/ 予約ボタン 200x80（x1350 y26）/
	                 背景 #F6F6F6 / 下層の現在位置 30x1px の黒線（文字の下 7px）
	・セレクターは #tHeader.tsHeader と tsHeader_ 接頭辞のクラスに限定し、
	  汎用の header / nav / a / ul / h1 / body のフォント指定は変更しない。
	  旧ヘッダー向けの共通ルール（base.css / tablet_smp.css / smp.css / tablet.css の
	  #tHeader 指定）は、#tHeader.tsHeader の詳細度で打ち消す。
	・PC ナビとコンパクト表示の切り替えは、画面幅ではなくヘッダー自身の幅
	  （コンテナクエリ）で判定する。body の最小幅 1200px が残る下層ページでも、
	  実際に描画されるヘッダー幅に合わせて切り替わる。
	    1140px 以上 : PC（1600px で資料どおりの寸法。1140〜1599px は余白・ロゴ幅・
	                  項目間隔・予約ボタン幅を比例して縮小）
	    1139px 以下 : ロゴ＋メニューボタン（メニューは全画面パネル）

******************************************************************************* */

/* ==
	基本（旧ヘッダー用ルールの打ち消しを含む）
=============================================================================== */
/* z-index : 下層の現在位置の線（y107〜108）はヘッダー下端（106px）より下に出るため、
   直後の本文より前面に置く。メニュー表示中は固定表示の CTA・モーダル等より前面にする。 */
#tHeader.tsHeader {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: #f6f6f6;
	color: #000;
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
	font-feature-settings: normal;
	word-break: normal;
	overflow-wrap: normal;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
#tHeader.tsHeader *,
#tHeader.tsHeader *::before,
#tHeader.tsHeader *::after {
	box-sizing: border-box;
}
#tHeader.tsHeader h1,
#tHeader.tsHeader p,
#tHeader.tsHeader ul,
#tHeader.tsHeader li,
#tHeader.tsHeader nav {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	font: inherit;
	color: inherit;
}
#tHeader.tsHeader a {
	color: inherit;
	text-decoration: none;
	/* 共通CSSの transition:all による visibility の遅延を避ける。 */
	transition: color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
#tHeader.tsHeader img {
	display: block;
	max-width: none;
	border: 0;
}
#tHeader.tsHeader button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
#tHeader.tsHeader a:focus-visible,
#tHeader.tsHeader button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* 幅判定用のコンテナ。横スクロールになる幅（body 最小幅 > 画面幅）でも
   表示領域内に収まるよう、画面幅（スクロールバーを除く）を上限にする。
   --tsh-sbw はスクロールバー幅（header-renewal.js が設定。未設定時は 0）。 */
#tHeader.tsHeader .tsHeader_in {
	container: tsh / inline-size;
	max-width: calc(100vw - var(--tsh-sbw, 0px));
}


/* ==
	PC（コンテナ幅 1140px 以上）
=============================================================================== */
#tHeader.tsHeader .tsHeader_bar {
	--tsh-pad: clamp(24px, 3.125cqw, 50px);
	--tsh-logo-w: clamp(180px, 15.75cqw, 252px);
	--tsh-cta-w: clamp(176px, 12.5cqw, 200px);
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	height: 106px;
	padding: 26px var(--tsh-pad) 0;
}
/* ロゴ : 1600px で x50 y42 252x57。縮小時もロゴの縦中心（y70.5）を保つ */
#tHeader.tsHeader .tsHeader_logo {
	flex: 0 0 auto;
	width: var(--tsh-logo-w);
	margin-top: calc(16px + (252px - var(--tsh-logo-w)) * 0.1131);
	line-height: 0;
}
#tHeader.tsHeader .tsHeader_logo a,
#tHeader.tsHeader .tsHeader_menuLogo a {
	display: block;
}
#tHeader.tsHeader .tsHeader_logo img,
#tHeader.tsHeader .tsHeader_menuLogo img {
	width: 100%;
	height: auto;
}

/* 右側 : 上段ボタン（1行目）／主ナビ（3行目）／予約ボタン（右列・全行） */
#tHeader.tsHeader .tsHeader_menu {
	display: grid;
	grid-template-columns: auto var(--tsh-cta-w);
	grid-template-rows: 36px 22px 16px;
	column-gap: clamp(20px, 2.1875cqw, 35px);
	align-items: start;
}
#tHeader.tsHeader .tsHeader_menuHead,
#tHeader.tsHeader .tsHeader_menuBtn,
#tHeader.tsHeader .tsHeader_barCta {
	display: none;
}

/* 主ナビ 7 項目 : ZenKakuGothicNew-Bold 16px / 項目間 32px（1320px 以上）→ 20px（1200px）→ 14px（1140px） */
#tHeader.tsHeader .tsHeader_gNav {
	grid-column: 1;
	grid-row: 3;
	justify-self: end;
}
#tHeader.tsHeader .tsHeader_gNavList {
	display: flex;
	gap: clamp(14px, calc(10cqw - 100px), 32px);
}
#tHeader.tsHeader .tsHeader_gNavItem a,
#tHeader.tsHeader .tsHeader_gNavItem > .tsHeader_disabled {
	position: relative;
	display: block;
	margin: -10px 0;
	padding: 10px 0;
	font-size: 16px;
	line-height: 16px;
	white-space: nowrap;
}
/* 非公開項目はリンクを持たないテキストで表示し、PC/SPとも操作対象から外す。 */
#tHeader.tsHeader .tsHeader_gNavItem > .tsHeader_disabled {
	color: #aaa;
	cursor: default;
}
/* 現在位置 : 30x1px の黒線（文字の下端から 7px）。現在ページ（is-current）と
   詳細ページの所属カテゴリ（is-parent）は同じ見た目で、aria-current は現在ページのみ */
#tHeader.tsHeader .tsHeader_gNavItem.is-current > a::after,
#tHeader.tsHeader .tsHeader_gNavItem.is-parent > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 30px;
	height: 1px;
	margin-left: -15px;
	background: #000;
}

/* 上段ボタン : 物件概要 100x36 / 現地案内図 110x36 / 間隔 14px / 白地・1px 黒枠・角丸 */
#tHeader.tsHeader .tsHeader_sNav {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	display: flex;
	gap: 14px;
}
#tHeader.tsHeader .tsHeader_sNavItem a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	height: 36px;
	padding: 0 19px;
	border: 1px solid #000;
	border-radius: 18px;
	background: #fff;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

/* 資料請求・来場予約 : 200x80 / 黒 / 白文字 15px / 1行中央 */
#tHeader.tsHeader .tsHeader_cta {
	grid-column: 2;
	grid-row: 1 / 4;
}
#tHeader.tsHeader .tsHeader_cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	padding: 0 12px;
	border-radius: 40px;
	background: #000;
	color: #fff;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}


/* ==
	コンパクト表示（コンテナ幅 1139px 以下）: ロゴ＋メニューボタン
	JS 無効時はメニュー項目をバーの下にそのまま並べ、JS 有効時は全画面パネルにする。
=============================================================================== */
@container tsh (max-width: 1139.98px) {
	#tHeader.tsHeader .tsHeader_bar {
		--tsh-logo-w: clamp(148px, 46cqw, 200px);
		align-items: center;
		flex-wrap: wrap;
		gap: 0 12px;
		height: auto;
		min-height: 64px;
		padding: 8px 12px 8px 20px;
	}
	#tHeader.tsHeader .tsHeader_logo {
		margin: 0 auto 0 0;
	}

	/* メニュー／閉じるボタン（52x48 のタップ領域） */
	#tHeader.tsHeader .tsHeader_menuBtn,
	#tHeader.tsHeader .tsHeader_closeBtn {
		display: inline-flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 52px;
		height: 48px;
		border-radius: 4px;
	}
	#tHeader.tsHeader .tsHeader_btnTxt {
		display: block;
		font-size: 10px;
		line-height: 1;
		white-space: nowrap;
	}
	#tHeader.tsHeader .tsHeader_menuIcon,
	#tHeader.tsHeader .tsHeader_closeIcon {
		position: relative;
		display: block;
		width: 24px;
		height: 16px;
	}
	#tHeader.tsHeader .tsHeader_menuIcon {
		background: linear-gradient(#000, #000) 0 7px / 24px 2px no-repeat;
	}
	#tHeader.tsHeader .tsHeader_menuIcon::before,
	#tHeader.tsHeader .tsHeader_menuIcon::after,
	#tHeader.tsHeader .tsHeader_closeIcon::before,
	#tHeader.tsHeader .tsHeader_closeIcon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 24px;
		height: 2px;
		background: #000;
	}
	#tHeader.tsHeader .tsHeader_menuIcon::before { top: 0; }
	#tHeader.tsHeader .tsHeader_menuIcon::after { bottom: 0; }
	#tHeader.tsHeader .tsHeader_closeIcon::before,
	#tHeader.tsHeader .tsHeader_closeIcon::after { top: 7px; }
	#tHeader.tsHeader .tsHeader_closeIcon::before { transform: rotate(45deg); }
	#tHeader.tsHeader .tsHeader_closeIcon::after { transform: rotate(-45deg); }

	/* メニュー本体 */
	#tHeader.tsHeader .tsHeader_menu {
		display: block;
		flex: 1 0 100%;
		padding: 8px 0 16px;
	}
	#tHeader.tsHeader .tsHeader_gNav,
	#tHeader.tsHeader .tsHeader_sNav,
	#tHeader.tsHeader .tsHeader_cta {
		grid-column: auto;
		grid-row: auto;
		justify-self: stretch;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	#tHeader.tsHeader .tsHeader_gNavList {
		display: block;
		border-top: 1px solid #d4d4d4;
	}
	#tHeader.tsHeader .tsHeader_gNavItem a,
	#tHeader.tsHeader .tsHeader_gNavItem > .tsHeader_disabled {
		display: flex;
		align-items: center;
		min-height: 56px;
		margin: 0;
		padding: 12px 36px 12px 4px;
		border-bottom: 1px solid #d4d4d4;
		font-size: 16px;
		line-height: 1.4;
		white-space: normal;
	}
	#tHeader.tsHeader .tsHeader_gNavItem a::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-top: 2px solid #000;
		border-right: 2px solid #000;
		transform: rotate(45deg);
	}
	#tHeader.tsHeader .tsHeader_gNavItem.is-current > a::after,
	#tHeader.tsHeader .tsHeader_gNavItem.is-parent > a::after {
		left: 4px;
		bottom: 10px;
		margin-left: 0;
	}
	#tHeader.tsHeader .tsHeader_sNav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-top: 24px;
	}
	#tHeader.tsHeader .tsHeader_sNavItem a {
		min-width: 0;
		height: 48px;
		padding: 0 8px;
		border-radius: 24px;
		font-size: 15px;
	}
	#tHeader.tsHeader .tsHeader_cta {
		margin-top: 16px;
	}
	#tHeader.tsHeader .tsHeader_cta a {
		height: 64px;
		padding: 0 16px;
		border-radius: 32px;
		font-size: 16px;
	}

	/* JS 有効時 : 全画面パネル（閉じた時点で JS が inert を付けて操作対象から外す）
	   幅・高さは画面（vw / dvh）基準にする。本文が画面より広いページ（外部 SP 用 CSS が
	   読み込めず body 最小幅 1200px が残る場合など）でレイアウトビューポートが広がっても、
	   パネルと閉じるボタンが表示範囲に収まるようにするため。 */
	html.tsh-js #tHeader.tsHeader .tsHeader_menu {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(100vw - var(--tsh-sbw, 0px));
		height: 100vh;
		height: 100dvh;
		z-index: 10000;
		padding: 0 20px calc(40px + env(safe-area-inset-bottom, 0px));
		background: #f6f6f6;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		opacity: 0;
		/* PCナビからの切り替え時も即座に隠す。フェードは開く操作時だけにする。 */
		transition: none;
	}
	html.tsh-js #tHeader.tsHeader.is-open .tsHeader_menu {
		visibility: visible;
		opacity: 1;
		transition: opacity .2s ease, visibility 0s linear 0s;
	}
	html.tsh-js #tHeader.tsHeader .tsHeader_menuHead {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 64px;
		margin: 0 -20px;
		padding: 8px 12px 8px 20px;
		background: #f6f6f6;
	}
	html.tsh-js #tHeader.tsHeader .tsHeader_menuLogo {
		flex: 0 0 auto;
		width: var(--tsh-logo-w);
		line-height: 0;
	}
	html.tsh-js #tHeader.tsHeader .tsHeader_menu .tsHeader_gNav {
		margin-top: 8px;
	}
	/* JS 無効時はメニューボタンを出さない（項目はバーの下に表示済み） */
	html:not(.tsh-js) #tHeader.tsHeader .tsHeader_menuBtn {
		display: none;
	}
}

/* 横幅に余裕のあるコンパクト表示（640px 以上）: 予約ボタンもバーに表示 */
@container tsh (min-width: 640px) and (max-width: 1139.98px) {
	#tHeader.tsHeader .tsHeader_bar {
		min-height: 80px;
		padding: 12px 24px 12px 32px;
	}
	#tHeader.tsHeader .tsHeader_barCta {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 24px;
		border-radius: 24px;
		background: #000;
		color: #fff;
		font-size: 14px;
		line-height: 1;
		white-space: nowrap;
	}
	html.tsh-js #tHeader.tsHeader .tsHeader_menuHead {
		min-height: 80px;
		padding: 12px 24px 12px 32px;
	}
}

/* メニュー表示中はヘッダー（全画面パネルを含む）を最前面へ */
html.tsh-js #tHeader.tsHeader.is-open {
	z-index: 10050;
}

/* メニュー表示中の背景スクロール抑止（header-renewal.js が html に付与） */
html.tsh-lock,
html.tsh-lock body {
	overflow: hidden !important;
}
html.tsh-lock {
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	html.tsh-js #tHeader.tsHeader .tsHeader_menu,
	html.tsh-js #tHeader.tsHeader.is-open .tsHeader_menu,
	#tHeader.tsHeader a {
		transition: none;
	}
}