@charset "utf-8";

/*
 * テーマ独自スタイル
 *
 * assets/ 配下はコーディングデータの原本とバイト単位で突き合わせて検証するため、
 * 追記も修正もしないこと。デザインに該当する指定が無い要素だけをここに書く。
 *
 * 書く前に、コーディングデータ側の汎用ユーティリティで組めないか必ず確認すること。
 * （common/css/style.css に .com-mgt10〜 などが用意されている）
 *
 * -------------------------------------------------------------------------
 * 【最重要】このサイトの rem は「1rem ≒ 1px」
 *
 *   html { font-size: calc((1 / 375) * 100vw); }   ← スマホ
 *   html { font-size: calc((1 / 1366) * 100vw); }  ← タブレット〜PC(〜1366px)
 *   body { font-size: 16rem; }
 *
 * つまり **16px 相当は「16rem」** と書く。`1.6rem` と書くと1.6px相当になり、
 * 文字が読めないほど小さくなる（実際に404で踏んだ）。
 *
 * 書き分けの決まり:
 *   PC（メディアクエリの外）  … px で書く
 *   SP（max-width: 1023px）   … rem で書く（数値はPCと同じ感覚の「px値」）
 * -------------------------------------------------------------------------
 */

/* -------------------------------------------------------------------------
 * 404
 *
 * コーディングデータに404のデザインが無いため、ここで最小限だけ組んでいる。
 * 見出しとボタンはサイト共通のもの（com-page-title1 typ2 / com-btn1）を使い、
 * 足りない「本文の中央寄せ」と「ボタンの並べ方」だけを足す。
 * 先方から専用デザインが届いたら、この節ごと差し替えられる。
 * ---------------------------------------------------------------------- */

.com-notfound1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}

.com-notfound2 {
	line-height: 2;
	margin-top: 24px;
	text-align: center;
}

.com-notfound-btns1 {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-top: 48px;
}

@media screen and (max-width: 1023px) {
	.com-notfound1 {
		font-size: 18rem;
	}

	.com-notfound2 {
		margin-top: 20rem;
		text-align: left;
	}

	.com-notfound-btns1 {
		flex-direction: column;
		gap: 16rem;
		margin-top: 40rem;
	}

	/* スマホでは横幅いっぱいに並べる */
	.com-notfound-btns1 .com-btn1 {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 一覧で該当が無かったとき
 *
 * 施工実績の絞り込みとお知らせで使う。原本に該当する指定が無い。
 * ---------------------------------------------------------------------- */

.com-noresult1 {
	line-height: 2;
	padding: 40px 0;
	text-align: center;
}

@media screen and (max-width: 1023px) {
	.com-noresult1 {
		padding: 40rem 0;
	}
}

/* -------------------------------------------------------------------------
 * 施設用途のバッジが複数あるとき（.cats1）
 *
 * 複合ビル（分譲マンション＋事務所など）は施設用途が2つ付く。
 * 原本は1つ前提の指定なので、2つ以上のときだけ .cats1 で包んで並べる。
 * 1つのときは包まないので、原本の見た目はそのまま。
 *
 * ここで .cat1 の見た目（色・角丸・文字サイズ）は指定しない。
 * 原本の .com-item1 .cat1 / .detail-title1 .cat1 を効かせたまま、
 * **並べ方だけ**を足している。
 * ---------------------------------------------------------------------- */

/* 一覧カード: 原本は .cat1 を absolute で置いている。包んだ側を同じ位置に置く */
.com-item1 .cats1 {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	left: 12px;
	position: absolute;
	right: 12px;
	top: 14px;
}

.com-item1 .cats1 .cat1 {
	left: auto;
	position: static;
	right: auto;
	top: auto;
}

/* 詳細ページの見出し: .detail-title1 が flex なので、包んだ側が1つの項目になる */
.detail-title1 .cats1 {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

@media screen and (max-width: 1023px) {
	.com-item1 .cats1 {
		gap: 4rem;
		left: 7rem;
		right: 7rem;
		top: 7rem;
	}

	.detail-title1 .cats1 {
		gap: 8rem;
	}
}

/* -------------------------------------------------------------------------
 * 重要なお知らせ（トップ sec6 の .notice1）
 *
 * 原本は静的な1行でリンクが無いため、a への色指定が用意されていない。
 * こちらは詳細ページへのリンクにしているので、共通CSSの a { color:#333 } に
 * 負けて枠の赤（#F24242）が出なくなる。枠の色を継がせる。
 * ---------------------------------------------------------------------- */

.home-sec.sec6 .notice1 a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * 重要なお知らせのスクロール指定は 2026-08-31 に削除した
 *
 * 原本が「1件ごとに <p> が増える」形に変わり、原本側の
 * .home-sec.sec6 .notice1 p { margin: 0 0 10px } が件間の余白を持つようになった。
 * こちらで高さを2件ぶんに固定してスクロールさせる必要が無くなったため、
 * .notice-scroll1 まわりの指定を丸ごと外している。
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 施工実績カードのサムネイル（.com-item1 .thumb1）を全景表示にする
 *
 * 2026-08-28 のご依頼。
 * 「正方形の枠内で、建物が隠れないよう全景が見えるように」
 *
 * 原本は object-fit: cover で、枠いっぱいに埋めるかわりに
 * **上下または左右が切れる**。建物の全景が見えないことがある。
 * contain に変えると、縦長の写真は左右に、横長の写真は上下に余白が出る。
 *
 * 【余白の色は原本が既に持っている】
 * .com-item1 .thumb1 に background: #BCCDE7（薄い水色）が指定されている。
 * cover で埋まっていたため見えていなかっただけで、
 * **contain にすると設計どおりの色が出る。** ここで色を足す必要は無い。
 *
 * ホバーで 1.05 倍に拡大する動きは原本のまま残す。
 * contain でも中央基準で拡大するので、余白の中で自然に動く。
 * ---------------------------------------------------------------------- */

.com-item1 .thumb1 img {
	object-fit: contain;
}