@charset "utf-8";




/*--------------------------------------------
　■［トップ］
--------------------------------------------*/

/* h3（見出し）の見た目は assets/css/base.css に一本化（2026-09-30 見出し刷新。旧: 水色の箱＋紺の文字） */

/* h4「テナント情報」＝小見出し。base.css の「小見出し」と同じ指定（このページは body に id が無く base.css から狙えないためここに置く。値を変えるときは両方）
 * 2026-09-30（旧: 水色の枠＋紺の文字） */
div#main h4 {
	display: block;
	width: 100%;
	margin: 2.5em 0 1em;
	padding: 0;
	border: 0;
	color: var(--color-ink, #20262a);
	font-size: var(--font-size-heading-3, 22px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .04em;
	text-align: center;
}

div#main h4::before,
div#main h4::after {
	content: "";
	display: inline-block;
	width: 17px;
	height: 22px;
	vertical-align: -3px;
}

div#main h4::before {
	margin-right: 12px;
	background:
		linear-gradient(var(--color-brand-light, #68bde8), var(--color-brand-light, #68bde8)) 0 0 / 3px 100% no-repeat,
		linear-gradient(var(--color-brand, #0a6cb8), var(--color-brand, #0a6cb8)) 7px 0 / 3px 100% no-repeat,
		linear-gradient(var(--color-accent-gold, #f0c528), var(--color-accent-gold, #f0c528)) 14px 0 / 3px 100% no-repeat;
	transform: skewX(-20deg);
}

div#main h4::after {
	margin-left: 12px;
}

/* テーブルはコンテンツ幅に収める（はみ出し防止。列幅は固定配分で長文は折り返す） */
div#main table {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 1.5em;
}

div#main table th,
div#main table td {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

div#main table td {
	min-width: 60px;
}

/* 列幅の配分: 利用内容は長め（「営業所・トラック駐車場」が1行で収まる幅）、
   買・借は狭く、資料も控えめに、備考は広めに */
table#buy th:nth-child(1) { width: 22%; }  /* 利用内容 */
table#buy th:nth-child(2) { width: 8%; }   /* 買・借 */
table#buy th:nth-child(5) { width: 10%; }  /* 資料 */
table#buy th:nth-child(6) { width: 25%; }  /* 備考 */
table#sale th:nth-child(4), table#rent th:nth-child(4) { width: 10%; }  /* 資料 */
table#sale th:nth-child(5), table#rent th:nth-child(5) { width: 30%; }  /* 備考 */

div#main table tbody tr td .btn {
	padding: 0.5em 1em;
}

/* 注記（※交渉中の案件を含む）の右寄せ
   静的時代は common/css/styles.css の .a-right に依存していた */
div#main .a-right {
	text-align: right;
	margin-bottom: 2em;
}

/* 登録が0件のときのメッセージ */
div#main .sale-empty {
	color: #666;
	padding: 1em 0.5em 2em;
}

@media screen and (max-width: 768px) {
	div#main table td {
		min-width: 0;
	}
}

/* スマホ: 表は無理に縮めず横スワイプでスクロール */
@media screen and (max-width: 736px) {
	.sale-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* 表とスクロールバーの間の余白 */
		padding-bottom: 12px;
	}

	/* スクロールできることのヒント（スマホのみ表示）。
	   sticky で、表を横スワイプしても画面中央に固定されたままにする */
	.sale-table-wrap::before {
		content: "← 横にスクロールできます →";
		display: block;
		position: sticky;
		left: 0;
		font-size: 12px;
		color: #888;
		text-align: center;
		margin-bottom: 6px;
	}

	/* div#main を付けてPC用ルール（table-layout: fixed / width: 100%）より
	   優先度を上げる。幅は内容に合わせて自然に広げ、横スクロールで見る */
	div#main .sale-table-wrap table {
		table-layout: auto;
		width: auto;
		min-width: 100%;
		margin-bottom: 0.5em;
	}

	/* 列幅%指定（PC用）もスマホでは解除して内容幅に任せる */
	div#main .sale-table-wrap th {
		width: auto;
	}

	/* 自動折り返しはせず自然な幅に広げる（横スクロールで見る）。
	   管理画面で入力した改行（<br>）だけが効く */
	div#main .sale-table-wrap th,
	div#main .sale-table-wrap td {
		white-space: nowrap;
	}

}

/* 大見出しに番号（01・02…）を出す（見た目は assets/css/base.css。2026-09-30） */
div#main {
	--kyodo-sec-number: counter(kyodo-sec, decimal-leading-zero);
}