@charset "utf-8";
/* =============================================================================
 * 全ページ共通の新しいフッター  /css/f2.css　2026-10-16
 *   中身は /include/top2/footer2.php（/include/footer.php から読む）。旧フッター（footer#footer 3つ）は隠す。
 *   総合TOP（/css/top2.css）と同じ指定。直すときは両方そろえる。
 * ========================================================================== */
/* ===== 新しいフッター（確認版だけ・/include/top2/footer2.php）2026-10-16 =====
 *  本番の footer.php は読み込むが、その <footer> 3つ（PC・タブレット・スマホ）はこのページでは隠す。
 *  上から：街並み（青）→ 相談・見積りの帯（青）→ 会社と一覧（濃紺）→ 規約とコピーライト（さらに濃い紺） */
footer#footer { display: none !important; }
.f2 { --f2-blue: #0065cc; --f2-navy: #0b2d4f; --f2-deep: #071f37; margin-top: 60px; color: #fff; font-size: 14px; line-height: 1.7; text-align: left; }
.f2 *, .f2 *::before, .f2 *::after { box-sizing: border-box; }
.f2 ul { margin: 0; padding: 0; list-style: none; }
.f2 li { margin: 0; padding: 0; }
.f2 li::before { content: none; }
.f2 p { margin: 0; padding: 0; }
.f2 a { text-decoration: none; }
.f2-in { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.f2-city { height: 80px; background: url("/images/top_footer_haikei.webp") left bottom / auto 80px repeat-x; }
/* 相談・見積りの帯 */
.f2-cta { background: var(--f2-blue); }
.f2-cta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; padding-top: 30px; padding-bottom: 40px; }
.f2-cta__en { font-size: 13px; font-weight: bold; letter-spacing: .25em; color: #9fd6ff; }
.f2-cta__h { margin-top: 4px !important; font-size: 26px; font-weight: 900; line-height: 1.4; }
.f2-cta__d { margin-top: 8px !important; font-size: 14.5px; color: rgba(255, 255, 255, .9); }
.f2-cta__b { display: flex; gap: 12px; }
.f2-btn { display: flex; flex-direction: column; justify-content: center; min-width: 250px; height: 72px; padding: 0 24px; border-radius: 14px; font-weight: 900; line-height: 1.3; }
.f2-btn span { font-size: 12px; font-weight: bold; }
.f2-btn--m { background: #ff6a00; color: #fff !important; font-size: 19px; }
.f2-btn--m:hover { background: #f25f00; }
.f2-btn--t { background: #fff; color: var(--f2-navy) !important; font-size: 26px; letter-spacing: .02em; }
.f2-btn--t span { color: var(--f2-blue); }
.f2-btn--t:hover { background: #eaf5ff; }
/* 会社と一覧 */
.f2-main { background: var(--f2-navy); }
.f2-grid { display: grid; grid-template-columns: 200px 300px repeat(3, minmax(0, 1fr)); gap: 26px; padding-top: 48px; padding-bottom: 48px; }
.f2-co__35 { display: block; width: 110px; height: auto; }
.f2-co__n { margin-top: 12px !important; font-size: 18px; font-weight: 900; }
.f2-co__a { margin-top: 8px !important; font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
.f2-co__m { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; font-weight: bold; line-height: 1.8; color: #ffd400; }
.f2-h { position: relative; margin-bottom: 14px !important; padding-bottom: 10px !important; font-size: 15px; font-weight: bold; }
.f2-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: #ffd400; }
.f2-l { display: flex; flex-direction: column; gap: 2px; }
.f2-col--cats .f2-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.f2-l a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; white-space: nowrap; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.5; }
.f2-l a::before { content: ""; flex: none; width: 5px; height: 5px; border-top: 1.5px solid rgba(255, 255, 255, .6); border-right: 1.5px solid rgba(255, 255, 255, .6); transform: rotate(45deg); }
.f2-l a:hover { color: #fff; text-decoration: underline; }
/* 規約とコピーライト */
.f2-bot { background: var(--f2-deep); }
.f2-bot__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.f2-bot ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.f2-bot a { color: rgba(255, 255, 255, .75); font-size: 12.5px; }
.f2-bot a:hover { color: #fff; text-decoration: underline; }
.f2-bot small { color: rgba(255, 255, 255, .6); font-size: 12px; }
@media screen and (max-width: 1180px) {
	.f2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.f2-co, .f2-col--cats { grid-column: span 3; }
	.f2-col--cats .f2-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.f2-cta__in { grid-template-columns: minmax(0, 1fr); }
}
/* 画面下の帯（.spn-bt・72px）がある幅では、ページ下の余白（body の padding-bottom 88px）をやめてフッターの濃紺の中に取る（白い隙間が出ていた） */
@media screen and (max-width: 959px) {
	body:has(.f2) { padding-bottom: 0 !important; }
	.f2-bot { padding-bottom: 72px; }
}
@media screen and (max-width: 767px) {
	.f2 { margin-top: 40px; }
	.f2-city { height: 56px; background-size: auto 56px; }
	.f2-cta__in { gap: 18px; padding-top: 22px; padding-bottom: 28px; }
	.f2-cta__h { font-size: 20px; }
	.f2-cta__d { font-size: 13.5px; }
	.f2-cta__b { flex-direction: column; }
	.f2-btn { min-width: 0; width: 100%; height: 64px; }
	.f2-btn--t { font-size: 24px; }
	.f2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; padding-top: 34px; padding-bottom: 34px; }
	.f2-co, .f2-col--cats { grid-column: span 2; }
	.f2-col--cats .f2-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.f2-l a { white-space: normal; }
	.f2-bot__in { flex-direction: column; align-items: flex-start; gap: 10px; }
}