@charset "utf-8";
/* =============================================================================
 * 施工事例サイト 共通UI（.ss-*）
 *   /sekou/css/sekou_site.css
 *   施工事例TOP・都道府県・市区町村・商材・マンションの一覧で共通。詳細ページ（detail_new.css）と同じ配色・角丸。
 *   影は使わない。左に太い線を引かない。1つだけ塗る札を作らない。
 *   2026-10-14 新設。
 * ========================================================================== */

.ss { --ss-ink: #22303a; --ss-sub: #5a6b78; --ss-acc: #209512; --ss-blue: #1a6fc4; --ss-red: #d7000f;
	--ss-line: #dfe6ec; --ss-soft: #f5f8fa; color: var(--ss-ink); font-size: 14px; line-height: 1.85; }
.ss section { margin: 0 0 30px; }
/* ページ内リンクの飛び先が上の固定メニュー（PC 136px・スマホ 62px）に隠れないように（2026-10-14「見出しが見えない」） */
.ss [id] { scroll-margin-top: 150px; }
.ss p { margin: 0 0 10px; }
.ss .ss-lead { margin: 10px 0 14px; font-size: 14px; line-height: 1.9; }
.ss .ss-note { margin: 8px 0 0; font-size: 12px; color: var(--ss-sub); line-height: 1.7; }
.ss .ss-h3 { margin: 18px 0 10px; padding: 0 0 6px; font-size: 15px; font-weight: bold; border-bottom: 1px solid var(--ss-line); }

/* ---- 実績の数字（商材TOPのサマリ帯と同じ見た目） ---- */
.ss .ss-kpi {
	display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 4px 0 16px; padding: 0; list-style: none;
	background: linear-gradient(180deg, #f6fbfe 0%, #eaf5fc 100%); border: 1px solid #cfe6f5; border-radius: 12px; overflow: hidden;
}
.ss .ss-kpi > li { margin: 0; padding: 12px 14px; border-left: 1px solid #d9ebf7; }
.ss .ss-kpi > li:first-child { border-left: 0; }
.ss .ss-kpi > li::before { content: none; }
.ss .ss-kpi small { display: block; font-size: 11.5px; font-weight: bold; color: #4f6b80; }
.ss .ss-kpi b { font-size: 24px; color: #0b3a5c; letter-spacing: -.01em; }
.ss .ss-kpi em { font-style: normal; font-size: 12px; font-weight: bold; color: #0b3a5c; margin-left: 2px; }

/* ---- 3つの探し方 ---- */
.ss .ss-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.ss .ss-ways > li { margin: 0; padding: 0; }
.ss .ss-ways > li::before { content: none; }
.ss .ss-ways a {
	display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; height: 100%; box-sizing: border-box;
	padding: 12px 14px; border: 1px solid var(--ss-line); border-radius: 12px; background: #fff; color: var(--ss-ink); text-decoration: none;
}
.ss .ss-ways a:hover { border-color: var(--ss-acc); }
.ss .ss-ways__i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--ss-acc) 11%, #fff); color: var(--ss-acc); }
.ss .ss-ways__i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss .ss-ways b { display: block; font-size: 15px; line-height: 1.4; }
.ss .ss-ways small { display: block; font-size: 11.5px; color: var(--ss-sub); line-height: 1.5; }

/* ---- 絞り込みフォーム ---- */
.ss .ss-form { margin: 0 0 18px; padding: 16px; border: 1px solid var(--ss-line); border-radius: 14px; background: var(--ss-soft); }
.ss .ss-form__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.ss .ss-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: bold; color: var(--ss-sub); }
.ss .ss-form select, .ss .ss-form input[type="text"] {
	width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 10px; border: 1px solid #c9d3dc; border-radius: 8px;
	background: #fff; font-size: 14px; color: var(--ss-ink); white-space: nowrap;
}
.ss .ss-form select:focus-visible, .ss .ss-form input:focus-visible { outline: 3px solid var(--ss-blue); outline-offset: 1px; }
.ss .ss-form__b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.ss .ss-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 8px 26px;
	border: 0; border-radius: 999px; background: var(--ss-acc); color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; text-decoration: none;
}
.ss .ss-btn:hover { opacity: .9; }
.ss .ss-clear { font-size: 13px; font-weight: bold; color: var(--ss-blue); }
/* いまの条件 */
.ss .ss-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ss .ss-cond > li { margin: 0; padding: 0; }
.ss .ss-cond > li::before { content: none; }
.ss .ss-cond a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--ss-line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: bold; color: var(--ss-ink); text-decoration: none; }
.ss .ss-cond a::after { content: "×"; color: var(--ss-sub); }
.ss .ss-count { margin: 0 0 12px; font-size: 14px; }
.ss .ss-count b { font-size: 22px; color: var(--ss-red); margin: 0 2px; }

/* ---- 施工カード ---- */
.ss .ss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.ss .ss-card { margin: 0; padding: 0; }
.ss .ss-card::before { content: none; }
.ss .ss-card > a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ss-line); border-radius: 12px; overflow: hidden; background: #fff; color: var(--ss-ink); text-decoration: none; }
.ss .ss-card > a:hover { border-color: var(--ss-acc); }
.ss .ss-card > a:focus-visible { outline: 3px solid var(--ss-blue); outline-offset: 2px; }
.ss .ss-card__ph { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--ss-line); }
.ss .ss-card__ph > span { position: relative; display: block; aspect-ratio: 1 / 1; background: #eef2f5; overflow: hidden; }
.ss .ss-card__ph img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.ss .ss-card__ph i { position: absolute; left: 4px; top: 4px; padding: 0 6px; border-radius: 999px; background: rgba(60, 70, 80, .85); color: #fff; font-style: normal; font-size: 10.5px; font-weight: bold; line-height: 1.6; }
.ss .ss-card__ph i.is-a { background: var(--ss-acc); }
.ss .ss-card__b { display: flex; flex-direction: column; flex: 1; padding: 8px 10px 10px; }
.ss .ss-card__k { font-size: 11.5px; font-weight: bold; color: var(--ss-acc); }
.ss .ss-card__t { display: flex; flex-direction: column; font-size: 13.5px; font-weight: bold; line-height: 1.45; overflow-wrap: break-word; word-break: normal; }
.ss .ss-card__t > span { display: block; }
.ss .ss-card__t i { font-style: normal; margin: 0 4px 0 0; color: var(--ss-acc); }
.ss .ss-card__s { margin-top: 2px; font-size: 11.5px; color: var(--ss-sub); line-height: 1.5; }
.ss .ss-card__p { margin-top: auto; padding-top: 6px; font-size: 11.5px; color: var(--ss-sub); }
.ss .ss-card__p b { margin: 0 2px 0 6px; font-size: 16px; color: var(--ss-red); }
.ss .ss-empty { padding: 18px; border: 1px dashed #c9d3dc; border-radius: 12px; background: #fff; text-align: center; }

/* ---- ページ送り ---- */
.ss .ss-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 22px; }
.ss .ss-pager a, .ss .ss-pager span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; padding: 0 12px;
	border: 1px solid var(--ss-line); border-radius: 10px; background: #fff; font-size: 14px; font-weight: bold; color: var(--ss-ink); text-decoration: none;
}
.ss .ss-pager a:hover { border-color: var(--ss-acc); color: var(--ss-acc); }
.ss .ss-pager .ss-pager__c { background: var(--ss-acc); border-color: var(--ss-acc); color: #fff; }
.ss .ss-pager .ss-pager__gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ---- 件数つきの導線（商材・都道府県・市区町村） ---- */
.ss .ss-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.ss .ss-chips > li { margin: 0; padding: 0; }
.ss .ss-chips > li::before { content: none; }
.ss .ss-chips a {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 6px 14px;
	border: 1px solid var(--ss-line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: bold; color: var(--ss-ink); text-decoration: none;
}
.ss .ss-chips a:hover { border-color: var(--ss-acc); color: var(--ss-acc); }
.ss .ss-chips small { font-size: 11.5px; font-weight: normal; color: var(--ss-sub); }
.ss .ss-areas { margin: 0; }
.ss .ss-areas__r { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--ss-line); }
.ss .ss-areas__r:first-child { border-top: 0; }
.ss .ss-areas__h { font-size: 13px; font-weight: bold; color: var(--ss-sub); padding-top: 9px; }

/* ---- お見積り ---- */
.ss .ss-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 20px; }
.ss .ss-cta a { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 64px; box-sizing: border-box; padding: 8px 12px; border-radius: 6px; font-size: 18px; font-weight: bold; text-decoration: none; line-height: 1.35; text-align: center; }
.ss .ss-cta a small { font-size: 12px; font-weight: normal; }
/* 商品詳細の共通ボタン（/css/detail_common.css の .pd-cta2）と同じ色・同じホバー */
.ss .ss-cta__p { background: #34aa34; border: 2px solid #208d14; color: #fff; transition: background .15s; }
.ss .ss-cta__p:hover, .ss .ss-cta__p:focus-visible { background: #207720; color: #fff; text-decoration: none; }
.ss .ss-cta__t { background: #fff; border: 2px solid #208d14; color: #208d14; transition: background .15s; }
.ss .ss-cta__t:hover, .ss .ss-cta__t:focus-visible { background: #f2fbf2; color: #208d14; text-decoration: none; }

/* ---- 新着リボン（工事完了から7日間）。カードの右上に斜めの赤い帯 ---- */
.ss .ss-card > a { position: relative; }
.ss .ss-new { position: absolute; top: 6px; right: -47px; z-index: 3; width: 128px; padding: 4px 0; transform: rotate(45deg); background: #e60012; color: #fff; font-size: 10px; font-weight: bold; letter-spacing: .12em; line-height: 1.3; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); pointer-events: none; }

/* ---- スマホ（@media はCSSの最後） ---- */
@media screen and (max-width: 767px) {
	.ss [id] { scroll-margin-top: 76px; }
	.ss .ss-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss .ss-kpi > li:nth-child(odd) { border-left: 0; }
	.ss .ss-kpi > li:nth-child(n+3) { border-top: 1px solid #d9ebf7; }
	.ss .ss-kpi b { font-size: 21px; }
	.ss .ss-ways { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.ss .ss-form__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 8px; }
	.ss .ss-form select, .ss .ss-form input[type="text"] { font-size: 13px; padding: 8px 6px; }
	.ss .ss-card__p small { display: block; }
	.ss .ss-card__p b { font-size: 15px; margin-left: 4px; }
	.ss .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.ss .ss-card__t { font-size: 12.5px; }
	.ss .ss-areas__r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ss .ss-areas__h { padding-top: 0; }
	.ss .ss-cta { grid-template-columns: minmax(0, 1fr); }
}