@charset "utf-8";
/* ==========================================================
   施工事例：絞り込み（一覧）・戻る／近い事例（詳細）
   使うページ：/work/ ・ /work/スラッグ/ だけで読み込む（functions.php）。2026年10月に本番反映、ファイル名はテスト時のまま
   ※お気に入りボタン（ヘッダー・サイドバー）の見た目は fav-nav.css にも同じ指定がある。直す時は両方そろえる
   色：紺 #2f417f / オレンジ #d25e3b / 薄グレー #e5ebef
   ========================================================== */

.w2-filter button,
.w2-sheet-wrap button,
.w2-empty button {
	font-family: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.w2-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------- 絞り込みエリア ---------- */
.w2-filter {
	max-width: 1630px;
	margin: 30px auto 20px;
	padding: 0 var(--w2-side, 16px); /* 左右の余白は一覧（事例の並び）と同じ */
	position: relative;
	z-index: 30;
}
.w2-feat-tag,
.w2-rel-card,
.w2-back-link,
.w2-back-link:hover {
	text-decoration: none;
}

/* よく見られる条件 */
.w2-quick {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.w2-quick-k {
	display: none;
	font-size: 13px;
	font-weight: 600;
	color: #6b6b6b;
	white-space: nowrap;
}
.w2-quick-list {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding: 2px 0;
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px;
}
.w2-quick-list::-webkit-scrollbar {
	display: none;
}
.w2-chip {
	flex: none;
	border: 1px solid #2f417f;
	background: #fff;
	color: #2f417f;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 9px 14px;
	border-radius: 999px;
	line-height: 1;
	transition: background-color .2s, color .2s;
}
.w2-chip.is-on {
	background: #2f417f;
	color: #fff;
}
.w2-chip.is-on::before {
	content: "✓ ";
}

/* PC：プルダウン（スマホでは非表示） */
.w2-dd-row {
	display: none;
}

/* スマホ：絞り込むボタン＋並び替え */
.w2-sp-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.w2-open {
	flex: 1;
	border: 2px solid #2f417f;
	background: #fff;
	color: #2f417f;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 0;
	letter-spacing: 0.08em;
}
.w2-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
/* 幅の狭いスマホでも1行に収める：並び替えは幅を固定し、残りをボタンに */
.w2-sp-bar .w2-open {
	min-width: 0;
	white-space: nowrap;
	padding: 12px 8px;
	font-size: 14px;
	letter-spacing: 0.04em;
}
.w2-sp-bar .w2-sort {
	flex: none;
	width: 34%;
	max-width: 150px;
}
.w2-sp-bar .w2-sort-sel {
	width: 100%;
	padding-right: 24px;
	background-position: right 8px center;
}
/* 絞り込みアイコン（ボタンだとわかるように） */
.w2-ico {
	flex: none;
	width: 20px;
	height: 20px;
}
.w2-badge {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0 6px;
	margin-left: 6px;
	border-radius: 10px;
	background: #d25e3b;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
	vertical-align: 1px;
}
.w2-badge[hidden] {
	display: none;
}
.w2-sort {
	display: flex;
	align-items: center;
	position: relative;
}
.w2-sort-k {
	display: none;
}
.w2-sort-sel {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #cfd5dc;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232f417f'/%3E%3C/svg%3E") no-repeat right 10px center;
	font-family: inherit;
	font-size: 13px;
	color: #221815;
	height: 100%;
	min-height: 46px;
	padding: 0 28px 0 10px;
	border-radius: 0;
	letter-spacing: 0.03em;
}

/* 件数 */
.w2-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.w2-count {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
}
.w2-count em {
	font-style: normal;
	font-family: sofia-pro, sans-serif;
	color: #d25e3b;
	font-size: 28px;
	margin: 0 3px;
	vertical-align: -2px;
}
.w2-change {
	display: none;
	border: none;
	background: #2f417f;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 12px;
	white-space: nowrap;
}
.w2-change .w2-badge {
	background: #fff;
	color: #2f417f;
}
.w2-pc-sort {
	display: none;
}

/* スマホ：絞り込み前は件数を出さない／絞り込み中は「条件を変更」
   （絞り込み前でも、スクロールして画面下に固定した時は「全◯件／条件で絞り込む」を出す） */
.w2-filter:not(.is-active) .w2-result-wrap {
	border: none;
	padding: 0;
	margin: 0;
}
.w2-filter:not(.is-active) .w2-result:not(.is-fixed) {
	display: none;
}
.w2-filter.is-active .w2-change,
.w2-result.is-fixed .w2-change {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.w2-change .w2-ico {
	width: 18px;
	height: 18px;
}
.w2-change-t {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.w2-change .w2-badge[hidden] {
	display: none;
}
.w2-count-pc {
	display: none;
}
.w2-result.is-fixed {
	position: fixed;
	bottom: 0; /* JSで画面下のボタン群（.fix_nav）の高さに合わせる */
	left: 0;
	right: 0;
	z-index: 49; /* ボタン群（.fix_nav：50）より下 */
	background: #fff;
	padding: 10px 16px;
	box-shadow: 0 -3px 8px rgba(34, 24, 21, .1);
	animation: w2Up .25s ease;
	transition: bottom .5s ease; /* ボタン群の出し入れ（0.5秒）と同じ速さで動く */
}
/* スクロールで消える時：下へふわっと */
.w2-result.is-fixed.is-leaving {
	animation: w2Out .3s ease forwards;
	pointer-events: none;
}
@keyframes w2Out {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(100%); opacity: 0; }
}
@keyframes w2Up {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.w2-result-wrap {
	background: #fff;
	border-bottom: 1px solid #e5ebef;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* 選択中の条件 */
.w2-chosen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
}
.w2-chosen[hidden] {
	display: none;
}
.w2-chosen-k {
	display: none;
}
.w2-chosen-list {
	display: contents;
}
.w2-x {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: #221815;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 10px;
	letter-spacing: 0.05em;
}
.w2-x i {
	font-style: normal;
	opacity: .7;
}
.w2-clear-link {
	border: none;
	background: none;
	color: #2866a0;
	text-decoration: underline;
	font-size: 12px;
	padding: 6px 4px;
}

/* ---------- 一覧 ---------- */
.w2-list > .w2-hide,
.w2-list > .w2-over {
	display: none !important;
}

/* 一覧の並び：グリッドで列をそろえ、最後の行も左揃え
   ・列数：〜759px 1列／760〜999px 2列／1000〜1499px 3列／1500px〜 4列（最大4列）
   ・余白：事例どうし（縦横同じ）＜ 両サイド。em（画面幅で変わる文字サイズ）で、最小・最大を決める
   ・全体の最大幅 2200px（広い画面では写真が大きくなる。写真の縦横比はそのまま） */
.work {
	--w2-gap: clamp(12px, 2em, 24px);  /* 事例どうしの余白（縦横同じ） */
	--w2-side: clamp(20px, 4em, 64px); /* 両サイドの余白 */
}
.top_work_flex.w2-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--w2-gap);
	justify-content: stretch;
	max-width: 2200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--w2-side);
	padding-right: var(--w2-side);
	box-sizing: border-box;
}
.w2-list > .top_work_list {
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
}
/* 写真：横幅いっぱい、縦横比は固定（スマホ・2列は横長 380:320、3列以上は縦長 380:440 ＝今までと同じ比率） */
.w2-list .top_work_img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: 380 / 320;
	object-fit: cover;
}
@media only screen and (min-width: 760px) {
	.top_work_flex.w2-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media only screen and (min-width: 1000px) {
	.top_work_flex.w2-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.w2-list .top_work_img {
		aspect-ratio: 380 / 440;
	}
}
@media only screen and (min-width: 1500px) {
	.top_work_flex.w2-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 一覧カードの矢印ボタン（.circle_arrow）を小さく：20px・下から20px（この一覧だけ） */
.w2-list .circle_arrow {
	width: 20px;
	height: 20px;
	bottom: 20px;
}

/* 条件を変えた時のアニメーション（work02.js の animate と連動。時間は ANIM_MS と合わせる） */
.w2-list {
	position: relative;
}
/* 一度操作したら、base.js のフェードイン（.Trigger）は使わない */
.w2-list.w2-ready > .w2-item.Trigger {
	opacity: 1;
	animation: none;
}
.w2-list.w2-ready > .w2-item {
	transition: transform .4s ease, opacity .4s ease;
}
/* 新しく出る事例：下からふわっと */
.w2-list.w2-ready > .w2-item.w2-enter {
	opacity: 0;
	transform: translateY(24px);
}
/* 消える事例：元の位置に重ねたまま、下へふわっと消える */
.w2-list > .w2-item.w2-leaving {
	display: block !important;
	position: absolute;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}
.w2-list.w2-ready > .w2-item.w2-leave-go {
	opacity: 0;
	transform: translateY(24px);
}
.w2-empty {
	text-align: center;
	padding: 50px 16px;
}
.w2-empty[hidden] {
	display: none;
}
.w2-empty p {
	font-size: 15px;
	line-height: 1.8;
	padding-bottom: 20px;
}
.w2-empty button {
	border: 2px solid #2f417f;
	background: #fff;
	color: #2f417f;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 30px;
}

/* ---------- スマホ：下から開くパネル ---------- */
.w2-sheet-wrap {
	position: fixed;
	inset: 0;
	z-index: 10000;
}
.w2-sheet-wrap[hidden] {
	display: none;
}
.w2-dim {
	position: absolute;
	inset: 0;
	background: rgba(17, 26, 36, .5);
	opacity: 0;
	transition: opacity .25s;
}
.w2-sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 86vh;
	max-height: 86dvh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px 14px 0 0;
	transform: translateY(100%);
	transition: transform .25s ease;
}
.w2-sheet-wrap.is-open .w2-dim {
	opacity: 1;
}
.w2-sheet-wrap.is-open .w2-sheet {
	transform: translateY(0);
}
.w2-handle {
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #cfd5dc;
	margin: 8px auto 4px;
}
.w2-sheet-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 16px 10px;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid #e5ebef;
}
.w2-close {
	border: none;
	background: none;
	font-size: 18px;
	color: #6b6b6b;
	padding: 6px;
}
.w2-sheet-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 16px 16px;
}
.w2-sec-k {
	font-size: 14px;
	font-weight: 700;
	padding: 16px 0 10px;
}
.w2-sec-k small {
	font-weight: 400;
	font-size: 12px;
	color: #6b6b6b;
}
.w2-sheet-ft {
	display: flex;
	gap: 8px;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid #e5ebef;
	background: #fff;
}
.w2-clear-btn {
	width: 90px;
	border: 1px solid #cfd5dc;
	background: #fff;
	color: #6b6b6b;
	font-size: 14px;
	padding: 14px 0;
}
.w2-go {
	flex: 1;
	border: none;
	background: #2f417f;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 0;
	letter-spacing: 0.08em;
}
.w2-go:disabled {
	background: #b9c0cc;
}

/* 選択肢（パネル内） */
.w2-opts[data-style="seg"] {
	display: flex;
	border: 1px solid #cfd5dc;
}
.w2-opts[data-style="seg"] .w2-opt {
	flex: 1;
	flex-direction: column;
	gap: 4px;
	border: none;
	border-right: 1px solid #cfd5dc;
	padding: 11px 4px;
	justify-content: center;
}
.w2-opts[data-style="seg"] .w2-opt:last-child {
	border-right: none;
}
.w2-opts[data-style="tag"] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.w2-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #cfd5dc;
	background: #fff;
	color: #221815;
	font-size: 14px;
	padding: 10px 12px;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: left;
}
.w2-opt .w2-n {
	font-size: 11px;
	color: #8a8a8a;
	letter-spacing: 0;
}
.w2-opt.is-on {
	border-color: #2f417f;
	background: #eef3fb;
	color: #2f417f;
	font-weight: 700;
}
.w2-opts[data-style="seg"] .w2-opt.is-on {
	background: #2f417f;
	color: #fff;
}
.w2-opts[data-style="seg"] .w2-opt.is-on .w2-n {
	color: #dfe5f2;
}
.w2-opt.is-off {
	color: #c2c8cf;
	background: #f5f6f7;
	border-color: #eceef0;
	cursor: default;
}
.w2-opt.is-off .w2-n {
	color: #c2c8cf;
}

/* ---------- 詳細：戻るバー ---------- */
/* 横幅は本文（.work_d の内側：左右2rem・最大1400px）にそろえる */
.w2-back {
	background: #fff;
	border-bottom: 1px solid #e5ebef;
}
.w2-back-in {
	width: calc(100% - 4rem);
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 10px;
}
.w2-back-link {
	color: #2f417f;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.w2-back-tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.w2-back-tags b {
	background: #2f417f;
	color: #fff;
	font-size: 11px;
	padding: 4px 7px;
	font-weight: 600;
}
.w2-back-n {
	font-size: 12px;
	color: #221815;
	margin-left: 2px;
}
.w2-back .w2-pn {
	display: none;
}

/* 詳細：この家の特徴（見出しは枠線の上に重ねる） */
.w2-feat {
	position: relative;
	max-width: 1400px;
	margin: 10px auto 30px;
	border: 1px dashed #2f417f;
	background: #fff;
	padding: 22px 12px 16px;
	text-align: center;
}
.w2-feat-k {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	color: #2f417f;
	font-size: 14px;
	font-weight: 700;
	padding: 0 12px;
	line-height: 1.4;
	white-space: nowrap;
}
.w2-feat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.w2-feat-tag {
	display: inline-block;
	border: 1px solid #2f417f;
	color: #2f417f;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 999px;
	letter-spacing: 0.05em;
}
.w2-feat-tag::before {
	content: "#";
	margin-right: 2px;
	opacity: .6;
}
.w2-feat-hint {
	display: none;
}

/* 詳細：この家に近い事例 */
.w2-rel-list {
	display: flex;
	/* em は html の文字サイズ（〜1599px：1.333vw、1600px〜：16px）が基準。画面幅に合わせて12〜30pxで変わる */
	gap: clamp(12px, 2em, 30px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding: 0 16px 6px;
}
.w2-rel-list::-webkit-scrollbar {
	display: none;
}
.w2-rel-card {
	flex: 0 0 74%;
	scroll-snap-align: start;
	scroll-margin-left: 16px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	color: #221815;
	transition: transform .3s, box-shadow .3s;
}
.w2-rel-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e5ebef;
}
.w2-rel-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.w2-rel-body {
	display: block;
	padding: clamp(13px, 2em, 20px); /* 画面幅に合わせて13〜20pxで変わる */
}
.w2-rel-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 8px;
}
.w2-rel-meta {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
}
.w2-rel-place {
	margin-right: 4px;
}
.w2-rel-common {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	color: #2f417f;
}
.w2-rel-common span {
	background: #eef3fb;
	padding: 3px 6px;
}
.w2-rel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 12px 0 4px;
}
.w2-rel-dots i {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: #cfd5dc;
	transition: width .2s, background-color .2s;
}
.w2-rel-dots i.on {
	width: 16px;
	background: #2f417f;
}
.w2-pn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}
/* リンクの矢印：サイト共通の小さい▶（#arrow_svg）。左向きは回転 */
.w2-arr {
	flex: none;
	width: 7px;
	height: 7px;
	fill: currentColor;
	vertical-align: middle;
}
.w2-arr-l {
	transform: rotate(180deg);
}
/* マウスを乗せると、矢印だけが矢印の向きに少し動く（矢印の入ったリンク・ボタンすべて） */
.w2-arr,
.w2-fbx-arr {
	transition: transform .25s ease;
}
@media (hover: hover) {
	a:hover .w2-arr {
		transform: translateX(3px);
	}
	a:hover .w2-arr.w2-arr-l {
		transform: translateX(-3px) rotate(180deg);
	}
	.w2-fbx .fancybox__nav .f-button:hover svg.w2-fbx-arr {
		transform: translateX(3px);
	}
	.w2-fbx .fancybox__nav .f-button:hover svg.w2-fbx-arr.w2-arr-l {
		transform: translateX(-3px) rotate(180deg);
	}
}
.w2-pn a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #2f417f;
	font-weight: 600;
	text-decoration: underline;
}
.w2-pn a[hidden],
.w2-pn-note[hidden] {
	display: none;
}
.w2-pn-note {
	font-size: 11px;
	color: #8a8a8a;
	text-align: center;
}

/* ---------- 詳細：下部ナビ（一覧へ戻る／この条件の中で前へ・次へ） ----------
   スマホ：［条件タグ・この条件の◯件の中で移動］→［◀ 前の事例］［次の事例 ▶］→［◀ 絞り込み結果に戻る］の縦積み */
.w2-fnav {
	margin-top: 40px;
	border-top: 1px solid #e5ebef;
	border-bottom: 1px solid #e5ebef;
	background: #fff;
}
.w2-fnav-in {
	width: calc(100% - 32px);
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
}
.w2-fnav-back {
	order: 2;
	justify-content: center;
	font-size: 14px;
	padding-top: 14px;
	border-top: 1px dashed #c2cbd8;
}
.w2-fnav-mid {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.w2-fnav-cond {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 8px;
	text-align: center;
}
.w2-fnav-cond[hidden] {
	display: none;
}
.w2-fnav-cond .w2-back-tags {
	justify-content: center;
}
.w2-fnav .w2-pn-note {
	font-size: 12px;
	color: #6b7280;
}
/* スマホ：前へ／次へは押しやすい大きさのボタンを2つ並べる（片方がない時も位置は左右固定） */
.w2-fnav-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}
.w2-fnav-pn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	border: 1px solid #2f417f;
	border-radius: 0;
	color: #2f417f;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
}
.w2-fnav-pn a[hidden] {
	display: none;
}
.w2-fnav-pn .w2-pn-prev { grid-column: 1; }
.w2-fnav-pn .w2-pn-next { grid-column: 2; }
/* 前後の事例：サムネイル＋▶だけ（枠なし）。サムネイルの間に薄い仕切り線 */
.w2-pn-thumb {
	display: none;
}
.w2-fnav-pn a.has-thumb {
	border: none;
	gap: 10px;
	padding: 4px 0;
	position: relative;
	transition: opacity .2s;
}
.w2-fnav-pn a.has-thumb .w2-pn-thumb {
	display: block;
	width: 120px;
	max-width: calc(100% - 24px);
	aspect-ratio: 16 / 9;
}
/* サムネイル：枠（.w2-pn-thumb / .w2-dbar-thumb）の中で cover。マウスを乗せると枠の中で拡大 */
.w2-pn-thumb,
.w2-dbar-thumb {
	overflow: hidden;
}
.w2-pn-thumb img,
.w2-dbar-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform .4s ease;
}
@media (hover: hover) {
	a:hover .w2-pn-thumb img,
	a:hover .w2-dbar-thumb img {
		transform: scale(1.18);
	}
}
.w2-fnav-pn a.has-thumb .w2-pn-t {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.w2-fnav-pn a.has-thumb .w2-arr {
	width: 9px;
	height: 9px;
}
.w2-fnav-pn .w2-pn-prev.has-thumb:not([hidden]) + .w2-pn-next.has-thumb::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 15%;
	bottom: 15%;
	border-left: 1px solid #d5dce3;
}

/* ---------- 詳細：スマホの固定バー（コンバージョンボタン群の上） ---------- */
.w2-dbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0; /* JSで .fix_nav の高さに合わせる */
	z-index: 49; /* ボタン群（.fix_nav：50）より下 */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fff;
	box-shadow: 0 -3px 8px rgba(34, 24, 21, .1);
	animation: w2Up .25s ease;
	transition: bottom .5s ease;
}
.w2-dbar[hidden] {
	display: none;
}
.w2-dbar.is-leaving {
	animation: w2Out .3s ease forwards;
	pointer-events: none;
}
.w2-dbar-back {
	flex: 0 1 auto; /* リンクの範囲は文字・タグの分だけ（余白まで広げない） */
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #2f417f;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.w2-dbar-txt {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.w2-dbar-txt b {
	font-size: 13px;
	line-height: 18px; /* サイト全体の line-height:1 を打ち消す */
	font-weight: 700;
}
.w2-dbar-txt {
	flex: 1;
}
/* 条件が多くて収まらない時は、横スクロールできるようにして右端を白く薄く消す
   （右端まで送ったらグラデーションは外す：work02.js で .is-more を付け外し） */
.w2-dbar-sub {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-right: 2px;
}
.w2-dbar-sub::-webkit-scrollbar {
	display: none;
}
.w2-dbar-sub.is-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* 条件タグ：上の戻るバー・下部ナビと同じ紺背景に白文字 */
.w2-dbar-tag {
	flex: none;
	background: #2f417f;
	color: #fff;
	font-style: normal;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	padding: 2px 6px;
}
.w2-dbar-pos {
	flex: none;
	font-size: 11px;
	line-height: 15px;
	color: #6b7280;
	margin-left: 2px;
}
.w2-dbar-back + .w2-dbar-btn {
	margin-left: auto; /* 前後ボタンは右端へ */
}
.w2-dbar-btn {
	flex: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #2f417f;
	border-radius: 0;
	color: #2f417f;
	background: #fff;
	-webkit-tap-highlight-color: transparent;
}
.w2-dbar-btn .w2-arr {
	width: 9px;
	height: 9px;
}
/* 前後の事例のサムネイル（＋「前の事例／次の事例」）：スマホでは出さない（矢印だけ） */
.w2-dbar-thumb,
.w2-dbar-tw {
	display: none;
}
.w2-dbar-btn.is-off {
	border-color: #e5ebef;
	color: #c2c8cf;
}

/* ---------- PC：画面下に固定する絞り込みバー（768px〜。スマホでは出さない） ---------- */
.w2-pbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0; /* JSで .fix_nav の高さに合わせる（1000px〜は0） */
	z-index: 49;
	display: flex;
	justify-content: center;
	padding: 0 80px 14px; /* 右端の縦ボタン（資料請求・来場予約）に重ならないよう左右を空ける */
	pointer-events: none; /* バーの外側は下のページを操作できるように */
	animation: w2Up .25s ease;
	transition: bottom .5s ease;
}
.w2-pbar[hidden] {
	display: none;
}
.w2-pbar.is-leaving {
	animation: w2Out .3s ease forwards;
}
.w2-pbar-in {
	pointer-events: auto;
	width: 100%;
	max-width: 1600px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	padding: 10px 12px 10px 20px;
	box-shadow: 0 4px 22px rgba(34, 24, 21, .18);
}
.w2-pbar.is-leaving .w2-pbar-in {
	pointer-events: none;
}
.w2-pbar-count {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: 0.05em;
}
.w2-pbar-count em {
	font-style: normal;
	font-family: sofia-pro, sans-serif;
	color: #d25e3b;
	font-size: 26px;
	margin: 0 3px;
	vertical-align: -2px;
}
.w2-pbar-cond {
	flex: 0 1 auto; /* 条件の分だけの幅（長い時は縮めて横スクロール） */
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f5f7f9;
	padding: 6px 10px;
}
.w2-pbar-cond[hidden] {
	display: none;
}
.w2-pbar-k {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: #6b6b6b;
	white-space: nowrap;
}
/* 選択中の条件：多い時は横スクロール（続きがある間は右端を白く薄く消す） */
.w2-pbar-tags {
	min-width: 0;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.w2-pbar-tags::-webkit-scrollbar {
	display: none;
}
.w2-pbar-tags.is-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.w2-pbar-tags .w2-x {
	flex: none;
	white-space: nowrap;
}
.w2-pbar-cond .w2-clear-link {
	flex: none;
	white-space: nowrap;
}
.w2-pbar-open {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: #2f417f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 18px;
	white-space: nowrap;
	transition: opacity .2s;
}
.w2-pbar-open .w2-ico {
	width: 18px;
	height: 18px;
}
.w2-pbar-open-t {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.w2-pbar-open .w2-badge {
	background: #fff;
	color: #2f417f;
}
.w2-pbar-open .w2-badge[hidden] {
	display: none;
}
@media (hover: hover) {
	.w2-pbar-open:hover {
		opacity: .85;
	}
}
@media only screen and (max-width: 767px) {
	.w2-pbar {
		display: none !important;
	}
}
/* 768〜999px：幅が狭いので「選択中の条件」の見出しは省く */
@media only screen and (max-width: 999px) {
	.w2-pbar-k {
		display: none;
	}
	.w2-pbar-in {
		gap: 10px;
		padding-left: 14px;
	}
}

/* ==========================================================
   PC（768px〜）
   ========================================================== */
@media only screen and (min-width: 768px) {
	.w2-filter {
		margin: 50px auto 30px;
	}
	.w2-quick-k {
		display: block;
	}
	.w2-quick-list {
		margin: 0;
		padding: 2px 0;
		flex-wrap: wrap;
		overflow: visible;
	}
	.w2-chip {
		font-size: 14px;
		padding: 10px 18px;
	}
	.w2-chip:hover {
		background: #eef3fb;
	}
	.w2-chip.is-on:hover {
		background: #2f417f;
	}
	.w2-sp-bar {
		display: none;
	}

	/* プルダウン */
	.w2-dd-row {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 14px;
	}
	.w2-dd {
		flex: 1 1 0;
		min-width: 0;
		position: relative;
	}
	.w2-dd-btn {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		gap: 8px;
		border: 1px solid #cfd5dc;
		background: #fff;
		color: #8a8a8a;
		font-size: 14px;
		padding: 0 14px;
		text-align: left;
		letter-spacing: 0.05em;
	}
	.w2-dd-k {
		flex: none;
		font-size: 12px;
		color: #8a8a8a;
	}
	.w2-dd-v {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.w2-dd-ar {
		flex: none;
		font-size: 11px;
		color: #2f417f; /* ▼は常に紺：押せることがわかるように */
		transition: transform .2s;
	}
	.w2-dd-btn:hover {
		border-color: #2f417f;
	}
	.w2-dd.is-set .w2-dd-btn {
		border: 2px solid #2f417f;
		background: #eef3fb;
		color: #221815;
		padding: 0 13px;
	}
	.w2-dd.is-set .w2-dd-k,
	.w2-dd.is-set .w2-dd-ar {
		color: #2f417f;
	}
	.w2-dd.is-set .w2-dd-v {
		font-weight: 700;
	}
	.w2-dd.is-open .w2-dd-btn {
		border-color: #2f417f;
	}
	.w2-dd.is-open .w2-dd-ar {
		transform: rotate(180deg);
	}
	.w2-dd-panel {
		position: absolute;
		top: calc(100% - 1px);
		left: 0;
		right: 0;
		min-width: 220px;
		background: #fff;
		border: 2px solid #2f417f;
		box-shadow: 0 10px 20px rgba(34, 24, 21, .15);
		padding: 8px 0;
		z-index: 20;
	}
	.w2-dd-panel[hidden] {
		display: none;
	}
	.w2-opts[data-style="list"] .w2-opt {
		display: flex;
		width: 100%;
		border: none;
		background: none;
		padding: 10px 14px;
		font-size: 14px;
		gap: 10px;
	}
	.w2-opts[data-style="list"] .w2-opt:hover {
		background: #f3f6fa;
	}
	.w2-opts[data-style="list"] .w2-opt-l {
		flex: 1;
	}
	.w2-opts[data-style="list"] .w2-opt.is-on {
		background: none;
		color: #2f417f;
	}
	.w2-opts[data-style="list"] .w2-opt.is-off {
		background: none;
	}
	.w2-box {
		flex: none;
		width: 16px;
		height: 16px;
		border: 1.5px solid #aeb6bf;
		border-radius: 50%;
		position: relative;
	}
	.w2-opts[data-dim="feature"] .w2-box {
		border-radius: 3px;
	}
	.w2-opt.is-on .w2-box {
		border-color: #2f417f;
		background: #2f417f;
		box-shadow: inset 0 0 0 3px #fff;
	}
	.w2-opts[data-dim="feature"] .w2-opt.is-on .w2-box {
		box-shadow: none;
	}
	.w2-opts[data-dim="feature"] .w2-opt.is-on .w2-box::after {
		content: "";
		position: absolute;
		left: 4px;
		top: 1px;
		width: 4px;
		height: 8px;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}
	.w2-opt.is-off .w2-box {
		border-color: #dde1e5;
	}
	.w2-dd-done {
		display: block;
		width: calc(100% - 24px);
		margin: 8px 12px 4px;
		border: none;
		background: #2f417f;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		padding: 10px 0;
	}

	/* 件数（PCは常に表示） */
	.w2-filter:not(.is-active) .w2-result:not(.is-fixed) {
		display: flex;
	}
	.w2-filter.is-active .w2-change,
	.w2-result.is-fixed .w2-change {
		display: none;
	}
	.w2-count-pc {
		display: inline;
	}
	.w2-count-sp {
		display: none;
	}
	.w2-count {
		font-size: 16px;
	}
	.w2-count em {
		font-size: 34px;
	}
	.w2-pc-sort {
		display: block;
	}
	.w2-sort-k {
		display: block;
		font-size: 13px;
		color: #6b6b6b;
		margin-right: 8px;
		white-space: nowrap;
	}
	.w2-sort-sel {
		min-height: 40px;
	}
	.w2-result-wrap {
		order: 2;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.w2-ph {
		display: none;
	}

	/* 選択中の条件 */
	.w2-chosen {
		background: #f5f7f9;
		padding: 10px 14px;
		margin-bottom: 16px;
	}
	.w2-chosen-k {
		display: inline;
		font-size: 13px;
		font-weight: 700;
		color: #6b6b6b;
		margin-right: 4px;
	}
	.w2-x {
		font-size: 13px;
	}
	.w2-x:hover {
		background: #2f417f;
	}
	.w2-filter {
		display: flex;
		flex-direction: column;
	}
	.w2-quick { order: 0; }
	.w2-dd-row { order: 1; }
	.w2-chosen { order: 1; }


	/* 詳細：戻るバー（PCは前へ／次へも表示） */
	.w2-back-in {
		padding: 12px 0;
		font-size: 14px;
		gap: 8px 10px;
	}
	.w2-back-tags b {
		font-size: 12px;
	}
	.w2-back .w2-pn {
		display: flex;
		margin-left: auto;
		gap: 14px;
	}
	.w2-back .w2-pn a + a {
		border-left: 1px solid #c2cbd8;
		padding-left: 14px;
	}
	.w2-back .w2-pn-note {
		order: 3;
	}
	.w2-back-link:hover {
		opacity: .7;
	}

	.w2-feat {
		padding: 26px 24px 22px;
		margin-bottom: 40px;
	}
	.w2-feat-k {
		font-size: 15px;
	}
	.w2-feat-tag {
		font-size: 15px;
		padding: 10px 18px;
	}
	.w2-feat-tag:hover {
		background: #2f417f;
		color: #fff;
	}

	/* この家に近い事例：.plan_return と同じ幅（画面幅の85%）で、広い画面ではそのまま広がる */
	.w2-rel.clm_d_nav_t_box {
		width: 85%;
		max-width: none;
	}
	.w2-rel-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.w2-rel-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 18px rgba(34, 24, 21, .12);
	}
	.w2-rel-name {
		font-size: 15px;
	}
	.w2-rel-dots {
		display: none;
	}

	/* 下部ナビ：左に「戻る」、中央に条件と「◀ 前の事例 ｜ 次の事例 ▶」。幅は近い事例・.plan_return と同じ85% */
	.w2-fnav {
		margin-top: 60px;
	}
	.w2-fnav-in {
		width: 85%;
		padding: 26px 0;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 20px;
		font-size: 15px;
	}
	.w2-fnav-back {
		order: 0;
		grid-column: 1;
		justify-self: start;
		padding-top: 0;
		border-top: 0;
		font-size: 15px;
		transition: opacity .2s;
	}
	.w2-fnav-mid {
		grid-column: 2;
		gap: 10px;
	}
	.w2-fnav-cond .w2-back-tags b {
		font-size: 12px;
	}
	.w2-fnav .w2-pn-note {
		font-size: 13px;
	}
	.w2-fnav-pn {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
		width: auto;
	}
	.w2-fnav-pn a {
		min-height: 0;
		border: 0;
		border-radius: 0;
		padding: 2px 22px;
		background: none;
		font-size: 16px;
		transition: opacity .2s;
	}
	.w2-fnav-pn a:not([hidden]) + a:not([hidden]) {
		border-left: 1px solid #c2cbd8;
	}
	/* サムネイル付き：仕切りは細い線（::before）。サムネイルは少し大きく */
	.w2-fnav-pn a.has-thumb {
		padding: 4px 22px;
	}
	.w2-fnav-pn a.has-thumb + a.has-thumb {
		border-left: none;
	}
	.w2-fnav-pn .w2-pn-prev.has-thumb:not([hidden]) + .w2-pn-next.has-thumb::before {
		left: 0;
	}
	.w2-fnav-pn a.has-thumb .w2-pn-thumb {
		width: 140px;
	}
	.w2-fnav-pn a:not(.has-thumb):hover,
	.w2-fnav-back:hover {
		opacity: .7;
	}
}

/* 768〜1199px：プルダウン5つを1行に並べると窮屈なので、3つ＋2つの2段にする */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.w2-dd {
		flex: 1 1 calc((100% - 24px) / 3);
	}
}
/* 1200px〜：1行に並べる。デザインテイスト・価格帯は文字が長いので少し広く */
@media only screen and (min-width: 1200px) {
	.w2-dd[data-dim="taste"] {
		flex-grow: 1.5;
	}
	.w2-dd[data-dim="price"] {
		flex-grow: 1.35;
	}
}

/* PC：絞り込みパネルは画面下の中央に、固定バーと同じ幅（最大1600px）で開く */
@media only screen and (min-width: 768px) {
	.w2-sheet {
		left: 80px;
		right: 80px;
		max-width: 1600px;
		margin: 0 auto;
		max-height: 80vh;
	}
	/* 左右の余白：2em（パネルの文字サイズ基準。見出しは文字が大きいので同じ値の 2rem で指定） */
	.w2-sheet-hd {
		padding: 6px 2rem 12px;
	}
	/* 中身（選択肢）：画面が広い時は左右の余白を大きくして、横に間延びしないように（中身は最大1100px） */
	.w2-sheet-body {
		padding: 4px clamp(2em, 7em, 140px) 20px;
	}
	.w2-sheet-body > .w2-sec {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}
	/* 下のボタン：中央に寄せ、幅はサイトの文字サイズ（em）に合わせて最小・最大の範囲で変える
	   ※ボタン自体の文字サイズは px 固定なので、サイト基準の em（＝ rem）で指定 */
	.w2-sheet-ft {
		justify-content: center;
		gap: clamp(8px, 0.8rem, 14px);
		padding: 12px 2em 16px;
	}
	.w2-clear-btn {
		flex: none;
		width: clamp(100px, 7rem, 150px);
	}
	.w2-go {
		flex: 0 1 clamp(240px, 18rem, 380px);
	}
}

@media only screen and (min-width: 1000px) {
	.w2-rel-card {
		flex: none;
	}
}

/* 詳細の固定バー（768px〜）：一覧の固定バーと同じデザイン。
   画面下の中央に浮かせた白い箱（最大1600px・影付き）。右端の縦ボタンに重ならないよう左右80pxあける。
   768〜999px はコンバージョンボタン群の上、1000px〜は画面の一番下（位置はJSで bottom を指定、箱は14px浮かせる） */
@media only screen and (min-width: 768px) {
	.w2-dbar {
		left: 80px;
		right: 80px;
		max-width: 1600px;
		margin: 0 auto 14px;
		padding: 10px 12px 10px 20px;
		gap: 10px;
		box-shadow: 0 4px 22px rgba(34, 24, 21, .18);
	}
	.w2-dbar-txt b {
		font-size: 15px;
		line-height: 22px;
	}
	.w2-dbar-tag {
		font-size: 12px;
		line-height: 16px;
		padding: 2px 8px;
	}
	.w2-dbar-pos {
		font-size: 13px;
	}
	.w2-dbar-btn {
		width: 46px;
		height: 46px;
		transition: background .2s, color .2s;
	}
	a.w2-dbar-btn:hover {
		background: #2f417f;
		color: #fff;
	}
	/* 前後の事例：◀［サムネイル］｜［サムネイル］▶ */
	.w2-dbar-btn.has-thumb {
		width: auto;
		gap: 10px;
		padding: 4px 6px;
		border: none; /* サムネイル付きは枠なし */
	}
	a.w2-dbar-btn.has-thumb:hover {
		background: none;
		color: #2f417f;
	}
	/* サムネイルどうしの間に薄い仕切り線（ボタンの間の余白10pxの真ん中） */
	.w2-dbar-btn.has-thumb + .w2-dbar-btn.has-thumb {
		position: relative;
	}
	.w2-dbar-btn.has-thumb + .w2-dbar-btn.has-thumb::before {
		content: "";
		position: absolute;
		left: -6px;
		top: 15%;
		bottom: 15%;
		border-left: 1px solid #d5dce3;
	}
	.w2-dbar-thumb {
		display: block;
		width: 64px;
		height: 36px;
	}
	/* サムネイルの下に小さく「前の事例／次の事例」（文字の色は▶と同じ紺） */
	.w2-dbar-tw {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
	}
	.w2-dbar-cap {
		font-size: 10px;
		line-height: 12px;
		font-weight: 600;
		letter-spacing: 0.05em;
		white-space: nowrap;
		color: inherit;
	}
	.w2-dbar-back {
		transition: opacity .2s;
	}
	.w2-dbar-back:hover {
		opacity: .7;
	}
}

/* 近い事例：base.css の .clm_d_nav_t_box の線（上の線／1600px〜は四角い枠）は付けない */
.w2-rel.clm_d_nav_t_box {
	border: none;
}

/* ---------- 角丸（3px）：プルダウン・ボタン・並び替え・パネル内の選択肢 ---------- */
.w2-open,
.w2-sort-sel,
.w2-change,
.w2-x,
.w2-go,
.w2-clear-btn,
.w2-opt,
.w2-opts[data-style="seg"],
.w2-dd-btn,
.w2-dd-panel,
.w2-dd-done,
.w2-empty button {
	border-radius: 3px;
}
/* 区切りボタン（階数）は外枠だけ角丸にし、中のボタンは角を付けない */
.w2-opts[data-style="seg"] {
	overflow: hidden;
}
.w2-opts[data-style="seg"] .w2-opt {
	border-radius: 0;
}
/* プルダウンを開いている時は、ボタンとパネルがつながって見えるように */
.w2-dd.is-open .w2-dd-btn {
	border-radius: 3px 3px 0 0;
}
.w2-dd-panel {
	border-radius: 0 0 3px 3px;
}
/* PCのプルダウン内の選択肢は、行全体なので角丸なし */
.w2-opts[data-style="list"] .w2-opt {
	border-radius: 0;
}

/* ---------- 詳細：タイトル ----------
   1行に収まる時は中央、2行以上になる時は左揃え。
   （タイトルの幅を文字の長さに合わせ、その箱を中央に置く。折り返す時は箱が全幅になり、中の文字は左揃え） */
h1.work_d_ttl {
	/* base.css の 3em（スマホ）／30px（768px〜）をやめて、画面幅に合わせて 20〜50px で変わる */
	font-size: clamp(20px, 3em, 40px);
	font-weight: 500;
	width: fit-content;
	max-width: 1400px; /* 本文の幅（最大1400px）にそろえる。狭い画面では画面幅に収まる */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* ==========================================================
   詳細：本文ギャラリー（正方形の写真）→ クリックで拡大（Fancybox）
   ========================================================== */
.ev_cnt .w2-zoom {
	display: block;
	position: relative;
	overflow: hidden; /* 拡大した写真を、写真の枠の中でしっかり切り取る */
	cursor: zoom-in;
	margin-bottom: 2em; /* 写真の下の余白（base.css の .ev_cnt img の10px の代わり）。ギャラリーの余白で調整 */
}
.ev_cnt .w2-zoom img {
	display: block;
	margin-bottom: 0; /* 枠の中に余白があると、拡大時に写真が下にはみ出して見えるため */
	transition: transform .6s ease;
}
/* 右下の虫めがねアイコン（白・背景なし。写真が明るくても見えるよう影を付ける） */
.ev_cnt .w2-zoom::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 18px;
	width: 26px;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .3s;
}
@media (hover: hover) {
	.ev_cnt .w2-zoom:hover img {
		transform: scale(1.05);
	}
	.ev_cnt .w2-zoom:hover::after {
		transform: scale(1.15);
	}
}

/* 拡大表示（Fancybox）：サイトの紺・白に合わせる
   ボタンの色は Fancybox 側がツールバー・矢印ごとに上書きするので、そこにも同じ指定をする */
.fancybox__container.w2-fbx,
.w2-fbx .fancybox__toolbar,
.w2-fbx .fancybox__nav {
	--fancybox-bg: rgba(22, 29, 52, .97);
	--fancybox-color: #fff;
	--fancybox-hover-color: #fff;
	--f-button-width: 46px;
	--f-button-height: 46px;
	--f-button-border-radius: 0; /* 四角（角丸なし） */
	/* 閉じる・前へ・次へ：背景なし、白い線で囲んで、中の×・▶も白 */
	--f-button-color: #fff;
	--f-button-hover-color: #fff;
	--f-button-bg: transparent;
	--f-button-hover-bg: rgba(255, 255, 255, .15);
	--f-button-active-bg: rgba(255, 255, 255, .25);
	--f-button-svg-width: 18px;
	--f-button-svg-height: 18px;
	--f-button-svg-stroke-width: 2.2;
	--f-button-svg-filter: none;
	--f-button-shadow: none;
	--f-thumb-border-radius: 0;
	--f-thumb-outline: 2px;
	--f-thumb-outline-color: #fff;
	--f-thumb-opacity: .45;
	--f-thumb-hover-opacity: .8;
	--f-thumb-selected-opacity: 1;
}
/* ボタンの白い線 */
.w2-fbx .fancybox__toolbar .f-button,
.w2-fbx .fancybox__nav .f-button {
	border: 1px solid #fff;
	box-shadow: none;
}
/* 写真送りの矢印：サイト共通の小さい▶（塗りの三角。Fancybox 標準の線のアイコンの指定を打ち消す） */
.w2-fbx .fancybox__nav .f-button svg.w2-fbx-arr {
	width: 8px;
	height: 8px;
	fill: currentColor;
	stroke: none;
}
.w2-fbx .fancybox__nav .f-button svg.w2-arr-l {
	transform: rotate(180deg);
}
.w2-fbx .fancybox__toolbar {
	padding: 12px 12px 0;
	text-shadow: none;
}
.w2-fbx .fancybox__infobar {
	font-family: sofia-pro, sans-serif;
	font-size: 15px;
	letter-spacing: .15em;
	color: #fff;
	opacity: .9;
}
.w2-fbx .fancybox__nav .f-button.is-arrow {
	--f-button-width: 50px;
	--f-button-height: 50px;
}
.w2-fbx .fancybox__slide {
	padding-left: 70px;
	padding-right: 70px;
}
.w2-fbx .fancybox__thumbs {
	padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
	.fancybox__container.w2-fbx {
		--f-button-width: 40px;
		--f-button-height: 40px;
	}
	.w2-fbx .fancybox__slide {
		padding-left: 8px;
		padding-right: 8px;
	}
	/* スマホは左右スワイプで切り替えるので、矢印は出さない */
	.w2-fbx .fancybox__nav {
		display: none;
	}
}

/* ---------- 詳細：こだわりポイントの見出し（2行以上になった時の行間） ---------- */
.work_pt_ttl03 {
	line-height: 1.7;
}

/* ---------- 詳細：こだわりポイントの写真 ----------
   縦長の写真でも1画面に収まるように、高さの上限を画面の高さに合わせる。
   横長の写真は今までどおり横幅いっぱい（最大1200px）、縦長の写真は高さに合わせて幅が細くなり中央に置かれる */
.work_pt_img {
	width: auto;
	height: auto;
	max-width: min(100%, 1200px);
	max-height: 100vh;
	max-height: 100svh; /* スマホのアドレスバーを除いた高さ（対応ブラウザのみ） */
}

/* ---------- 詳細：ギャラリーの余白 ----------
   3列（横並び）の時：写真どうしの余白は縦横とも 2em
   1列（スマホ：ブロックエディタのカラムが縦に並ぶ 781px 以下）の時：写真の下の余白 0.5em */
.ev_cnt .wp-block-columns.w2-gal-cols {
	column-gap: 2em;
	row-gap: 0;
}
/* ギャラリーの写真は、すべて正方形に切り抜いて同じ大きさにそろえる
   （管理画面で「正方形・cover」を付け忘れた写真も、他の写真と同じ見た目に） */
.ev_cnt .w2-gal-cols .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}
@media only screen and (max-width: 781px) {
	.ev_cnt .w2-zoom {
		margin-bottom: 0.5em;
	}
}

/* ==========================================================
   詳細：上部（メイン画像・パンくずなし）とタイトルまわり
   ========================================================== */
/* 戻るバー：固定ヘッダーのすぐ下に置く（ヘッダーの高さ分だけ上を空ける）
   （ヘッダーの箱の上の余白10px ＋ 箱の高さ：〜1199px 50px／1200px〜 約66px） */
.w2-back.w2-back-top {
	padding-top: 60px;
}
@media only screen and (min-width: 1200px) {
	.w2-back.w2-back-top {
		padding-top: 76px;
	}
}
/* タイトルまわりの余白：戻るバー → タイトル → 地域・お名前 → 延床面積・建物価格 */
.w2-back-top + .work_d,
.w2-back-top ~ .work_d {
	padding-top: 0;
}
h1.work_d_ttl {
	line-height: 1.7;
	word-break: auto-phrase; /* 2行になる時、言葉の切れ目で折り返す（例：本気で／建てた家）。未対応のブラウザは今まで通り */
	padding-top: clamp(18px, 2.4rem, 40px);
	padding-bottom: clamp(5px, 1.3rem, 10px);
}
.work_d_ttl02 {
	line-height: 1.5;
}

/* ==========================================================
   お気に入り（♡）
   色：ゴールド #e5af5b（サイトの .btn_gold と同じ）／文字のゴールドは読みやすいよう少し濃く #c98a24
   ========================================================== */
.w2-fav,
.w2-favnav,
.w2-favbar button {
	font-family: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- 一覧のカード：写真の右上の♡（白い線。お気に入りにするとゴールドで塗る） ---------- */
.w2-fav {
	position: absolute;
	z-index: 6;
	top: 4px;
	right: 4px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.w2-fav svg {
	display: block;
	width: 26px;
	height: 26px;
	fill: transparent;
	stroke: currentColor;
	stroke-width: 3.4;
	stroke-linejoin: round;
	overflow: visible;
	transition: transform .2s ease, fill .2s ease, stroke .2s ease;
}
/* お気に入り済み：中をゴールドで塗り、線は白のまま */
.w2-fav.is-on svg {
	fill: #e5af5b;
	stroke: #fff;
}
@media (hover: hover) {
	.w2-fav:hover svg {
		transform: scale(1.12);
	}
}
/* 押した時：ぽんと弾む */
.w2-fav.is-pop svg,
.w2-fav-ico.is-pop svg,
.w2-favnav.is-bump .w2-favnav-ico svg {
	animation: w2FavPop .45s ease;
}
@keyframes w2FavPop {
	0% { transform: scale(1); }
	30% { transform: scale(.75); }
	60% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* ---------- 詳細：タイトルの右の♡ ---------- */
.w2-ttl-row {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding-right: 44px; /* スマホ：タイトルが♡の下にもぐらないように */
}
.w2-fav.w2-fav-d {
	top: clamp(18px, 2.4rem, 40px); /* タイトルの上の余白（h1.work_d_ttl の padding-top）にそろえる */
	right: -6px;
	width: 46px;
	height: auto;
	min-height: 46px;
	flex-direction: column;
	gap: 4px;
	color: #221815;
}
.w2-fav-d svg {
	stroke-width: 2.6;
}
.w2-fav-d.is-on svg {
	fill: #e5af5b;
	stroke: #e5af5b;
}
.w2-fav-ico {
	display: block;
}
.w2-fav-t {
	display: none;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}
@media only screen and (min-width: 768px) {
	/* PC：タイトルは中央のまま、♡は本文の幅（最大1400px）の右端に「お気に入り追加」と一緒に */
	.w2-ttl-row {
		width: calc(100% - 4rem);
		padding: 0 100px;
	}
	.w2-fav.w2-fav-d {
		right: 0;
		width: auto;
		min-width: 80px;
		padding: 2px 4px;
	}
	.w2-fav-d svg {
		width: 30px;
		height: 30px;
	}
	.w2-fav-t {
		display: block;
	}
	.w2-fav-d.is-on .w2-fav-t {
		color: #c98a24;
	}
}

/* ---------- ヘッダー（〜999px）・サイドバー（1000px〜）のお気に入りボタン ---------- */
.w2-favnav {
	text-decoration: none;
	color: #2f417f;
}
.w2-favnav[hidden],
.w2-favnav-s {
	display: none !important;
}
.w2-favnav-ico {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	color: #e5af5b;
}
.w2-favnav-ico svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}
/* 件数：右上の小さな丸 */
.w2-favnav-n {
	position: absolute;
	top: -7px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 1.5px solid #2f417f;
	border-radius: 9px;
	background: #fff;
	color: #2f417f;
	font-family: sofia-pro, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 0;
	text-align: center;
}
.w2-favnav-n:empty {
	display: none;
}
.w2-favnav-t {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	white-space: nowrap;
}
/* ヘッダー：メニューボタン（≡）の左 */
.w2-favnav-h {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 54px;
	padding-top: 4px;
	background: #fff;
}
@media only screen and (min-width: 1000px) {
	.w2-favnav-h {
		display: none !important;
	}
	/* サイドバー：資料請求・来場予約の縦ボタン（.side_btn_box：画面の高さの25%の位置から下）のすぐ上 */
	.w2-favnav-s:not([hidden]) {
		display: flex !important;
	}
	.w2-favnav-s {
		position: fixed;
		z-index: 100;
		right: 10px;
		top: 25vh;
		transform: translateY(-100%);
		width: 50px;
		flex-direction: column;
		align-items: center;
		gap: 7px;
		padding: 14px 0 9px;
		background: #fff;
			transition: background-color .2s;
	}
	.w2-favnav-s:hover {
		background: #fdf5e8;
	}
}
@media only screen and (min-width: 1200px) {
	.w2-favnav-s {
		width: 68px;
		padding: 16px 0 11px;
	}
	.w2-favnav-s .w2-favnav-ico {
		width: 26px;
		height: 26px;
	}
	.w2-favnav-s .w2-favnav-t {
		font-size: 10px;
	}
}

/* ---------- ♡を押した時に、ヘッダー／サイドバーまで飛んでいくハート ---------- */
.w2-fly {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100000;
	pointer-events: none;
	color: #e5af5b;
	will-change: transform, opacity;
}
.w2-fly svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
	transition: none;
}

/* ---------- 一覧：「お気に入りだけ見る（3）」 ---------- */
.w2-chip.w2-chip-fav {
	border-color: #e5af5b;
	color: #c98a24;
}
.w2-chip.w2-chip-fav[hidden] {
	display: none;
}
/* スマホは横スクロールでも見えるよう先頭、PC（768px〜）は最後に並べる */
@media only screen and (min-width: 768px) {
	.w2-chip.w2-chip-fav {
		order: 1;
	}
}
.w2-chip.w2-chip-fav.is-on,
.w2-chip.w2-chip-fav.is-on:hover {
	background: #fdf0d9;
	color: #b47a1c;
}
@media (hover: hover) {
	.w2-chip.w2-chip-fav:hover {
		background: #fdf5e8;
	}
}

/* ---------- 一覧：お気に入り（共有された事例）を見ている時の帯 ---------- */
.w2-favbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: #fdf5e8;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.w2-favbar[hidden] {
	display: none;
}
.w2-favbar-h {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.w2-favbar-ico {
	flex: none;
	width: 22px;
	height: 22px;
	color: #e5af5b;
}
.w2-favbar-ico svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.w2-favbar-n {
	font-size: 17px;
	font-weight: 700;
	color: #c98a24;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.w2-favbar-sub {
	font-size: 12px;
	color: #6b6b6b;
	letter-spacing: 0.05em;
}
.w2-favbar-btns {
	display: flex;
	gap: 8px;
	width: 100%;
}
.w2-share {
	flex: 1;
	border: 1px solid #2f417f;
	border-radius: 3px;
	background: #fff;
	color: #2f417f;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 12px 18px;
	transition: background-color .2s, color .2s;
}
/* 「共有」：アイコン＋文字を中央にそろえる */
.w2-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.w2-share-ico {
	flex: none;
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: none;
}
.w2-share.w2-take {
	background: #2f417f;
	color: #fff;
}
.w2-favbar-done {
	font-size: 13px;
	font-weight: 600;
	color: #6b6b6b;
}
@media only screen and (min-width: 768px) {
	.w2-favbar {
		order: 1;
		padding: 16px 20px 16px 24px;
	}
	.w2-favbar-btns {
		width: auto;
		margin-left: auto;
	}
	.w2-share {
		flex: none;
		min-width: 156px;
	}
	.w2-share:hover {
		background: #2f417f;
		color: #fff;
	}
	.w2-share.w2-take:hover {
		opacity: .85;
	}
}

/* ---------- 小さなお知らせ（URLをコピーしました など） ---------- */
.w2-toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	z-index: 100001;
	max-width: calc(100% - 32px);
	padding: 12px 18px;
	border-radius: 3px;
	background: rgba(34, 24, 21, .92);
	color: #fff;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
}
.w2-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ==========================================================
   共有：メニュー（イベントの「共有」と同じ形）
   PC：左に メールで送る／リンクをコピー、右に QRコード
   ========================================================== */
.w2-share.is-open {
	background: #2f417f;
	color: #fff;
}
.w2-sh {
	position: fixed;
	z-index: 100030;
	top: 0;
	left: 0;
	box-sizing: border-box;
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 8px 30px rgba(20, 30, 60, .22);
	color: #221815;
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
.w2-sh * {
	line-height: inherit;
}
.w2-sh.is-show {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.w2-sh[data-dir="up"] {
	transform: translateY(-4px);
}
.w2-sh.is-show[data-dir="up"] {
	transform: none;
}
/* ボタンを指す三角 */
.w2-sh[data-dir="down"],
.w2-sh[data-dir="up"] {
	overflow: visible;
}
.w2-sh[data-dir="down"]::before,
.w2-sh[data-dir="up"]::before {
	content: "";
	position: absolute;
	left: var(--w2-sh-arrow, 50%);
	margin-left: -7px;
	border: 7px solid transparent;
}
.w2-sh[data-dir="down"]::before {
	top: -7px;
	border-top: none;
	border-bottom-color: #fff;
}
.w2-sh[data-dir="up"]::before {
	bottom: -7px;
	border-bottom: none;
	border-top-color: #fff;
}
.w2-sh-hd {
	position: relative;
	padding: 12px 40px 9px 14px;
	border-bottom: 1px solid #e7eaf0;
	color: #6b7280;
	font-size: 12px;
}
.w2-sh-x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	color: #6b7280;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.w2-sh-bd {
	display: flex;
}
.w2-sh-list {
	flex: 1;
	min-width: 0;
}
.w2-sh-a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid #f1f2f5;
	background: #fff;
	color: #221815;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	letter-spacing: .03em;
	cursor: pointer;
	transition: background-color .15s;
}
.w2-sh-list .w2-sh-a:last-child {
	border-bottom: none;
}
.w2-sh-a:hover,
.w2-sh-a:focus-visible {
	background: #f4f6fb;
	outline: none;
}
.w2-sh-a i {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0;
}
.w2-sh-a i svg {
	width: 15px;
	height: 15px;
}
.w2-sh-a .is-line {
	background: #06c755;
}
.w2-sh-a .is-mail {
	background: #7a8597;
}
.w2-sh-a .is-copy {
	background: #2f417f;
}
/* PC：左の2行を QRコードの高さに合わせて均等に */
.w2-sh.is-pc .w2-sh-list {
	display: flex;
	flex-direction: column;
}
.w2-sh.is-pc .w2-sh-a {
	flex: 1;
	padding-left: 16px;
}
.w2-sh-qr {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 128px;
	padding: 10px 8px;
	box-sizing: border-box;
	border-left: 1px solid #eef0f4;
	background: #f7f8fa;
	text-align: center;
}
.w2-sh-qr[hidden] {
	display: none;
}
.w2-sh-qrbox {
	flex: none;
	width: 80px;
	height: 80px;
	padding: 4px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e2e5ec;
}
.w2-sh-qrbox svg {
	display: block;
	width: 100%;
	height: 100%;
}
.w2-sh-qr small {
	color: #6b7280;
	font-size: 10.5px;
	line-height: 1.55;
	letter-spacing: 0;
}

/* 共有されたページ：「すべて追加済み」の横に「共有」 */
.w2-favbar-done {
	flex: none;
	align-self: center;
	margin-right: 4px;
}
@media only screen and (max-width: 767px) {
	/* 「まとめてお気に入りに追加」がある時は、2段に（上：追加／下：共有） */
	.w2-favbar.is-shared .w2-favbar-btns {
		flex-wrap: wrap;
	}
	.w2-favbar.is-shared .w2-take {
		flex: 1 1 100%;
	}
}