/* ==========================================================
   施工事例：詳細（A ポイントで読む）・一覧（A 上質なカード）2026-11-12
   色・書体は物件ページ（inc/property.css）と同じブラウンと明朝
   ========================================================== */
.yl-works {
	--ylw-ink: #3f372f;
	--ylw-sub: #6f665d;
	--ylw-brand: #6b5b4b;
	--ylw-brand-dark: #514335;
	--ylw-soft: #efe9e2;
	--ylw-paper: #faf8f5;
	--ylw-line: #e3ddd4;
	--ylw-min: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
	color: var(--ylw-ink);
}
/* 詳細は全幅。一覧はサイドバーありなので SWELL の段組みのまま */
.yl-works--single {
	float: none;
	width: 100%;
}
.yl-works .ylw-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 0 72px;
}
.yl-works img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yl-works figure { margin: 0; }
.yl-works h1,
.yl-works h2 {
	font-family: var(--ylw-min);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ylw-ink);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-wrap: balance;
	word-break: auto-phrase; /* 「ストレス｜フリー」のような語の途中で折り返さない */
}
.yl-works h2::before,
.yl-works h2::after { content: none; }
.yl-works a:focus-visible,
.yl-works button:focus-visible,
.yl-works summary:focus-visible {
	outline: 3px solid #b17a20;
	outline-offset: 3px;
}
.ylw-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--ylw-brand);
}
.ylw-h2 {
	font-size: clamp(22px, 2.4vw, 27px) !important;
	text-align: center;
	margin-bottom: 26px !important;
}
.ylw-h2::after {
	content: "" !important;
	display: block;
	width: 32px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 2px;
	background: var(--ylw-brand);
}
.ylw-review {
	margin: 0 0 16px;
	padding: 10px 16px;
	background: #f6f2d9;
	color: #665a29;
	font-size: 13px;
	text-align: center;
	border-radius: 6px;
}

/* 写真の説明 */
.ylw-photo a { display: block; border-radius: 8px; overflow: hidden; }
.ylw-photo img { transition: transform .5s ease; }
.ylw-photo a:hover img { transform: scale(1.03); }
.ylw-photo figcaption {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ylw-sub);
}

/* ---------- 詳細：冒頭の写真 ---------- */
.ylw-hero {
	display: grid;
	gap: 8px;
	border-radius: 14px;
	overflow: hidden;
	height: clamp(320px, 46vw, 540px);
}
.ylw-hero--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ylw-hero--3 .ylw-hero__item:first-child { grid-row: span 2; }
.ylw-hero--2 { grid-template-columns: 1fr 1fr; }
.ylw-hero__item { display: block; min-height: 0; overflow: hidden; }

/* ---------- 詳細：タイトル・概要 ---------- */
.ylw-head {
	max-width: 800px;
	margin: 40px auto 0;
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
}
.ylw-title {
	font-size: clamp(24px, 2.8vw, 34px) !important;
	line-height: 1.6 !important;
}
.ylw-tags,
.ylw-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.ylw-head .ylw-tags { justify-content: center; }
.ylw-tags span,
.ylw-card__tags span {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ylw-brand);
	background: var(--ylw-soft);
	border-radius: 4px;
	padding: 1px 9px;
}
.ylw-lead {
	margin: 0;
	font-size: 16px;
	line-height: 2.05;
	text-align: left;
}
.ylw-spec {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 8px 0 0;
	border: 1px solid var(--ylw-line);
	border-radius: 10px;
	overflow: hidden;
}
.ylw-spec > div {
	flex: 1 1 140px;
	display: grid;
	gap: 2px;
	padding: 12px 10px;
	text-align: center;
	box-shadow: -1px 0 0 var(--ylw-line), 0 -1px 0 var(--ylw-line);
}
.ylw-spec dt { font-size: 11px; color: var(--ylw-sub); letter-spacing: .08em; }
.ylw-spec dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }

/* ---------- 詳細：ポイント ---------- */
.ylw-point {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: 44px;
	align-items: center;
	margin-top: 80px;
}
.ylw-point.is-rev .ylw-point__text { order: 2; }
.ylw-point.is-text { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.ylw-point__text { display: grid; gap: 12px; min-width: 0; }
.ylw-point__text h2 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.6; }
.ylw-point__text p:last-child { margin: 0; font-size: 15px; line-height: 2; }
.ylw-point__photos { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.ylw-point__photos.n1 { grid-template-columns: 1fr; }
.ylw-point__photos .ylw-photo a { aspect-ratio: 3 / 4; }
.ylw-point__photos.n1 .ylw-photo a { aspect-ratio: 4 / 3; }
.ylw-point__photos.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ylw-point__photos.n4 .ylw-photo a { aspect-ratio: 1 / 1; }

/* ---------- 詳細：そのほかの写真 ---------- */
.ylw-gallery { margin-top: 88px; }
.ylw-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
.ylw-gallery__grid .ylw-photo a { aspect-ratio: 3 / 4; }

/* ---------- 詳細：動画 ---------- */
.ylw-videos { margin-top: 88px; }
.ylw-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; max-width: 860px; margin: 0 auto; }
.ylw-videos__grid.n1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.ylw-videos__grid.n2 { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
.ylw-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #1d1a17; }
.ylw-video figcaption { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ylw-sub); }
@media (max-width: 599px) {
	.ylw-videos { margin-top: 64px; }
	.ylw-videos__grid { grid-template-columns: 1fr 1fr; }
	.ylw-videos__grid.n1 { grid-template-columns: minmax(0, 260px); }
	.ylw-videos__grid.n2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 詳細：担当者・お客様の声 ---------- */
.ylw-staff {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	max-width: 860px;
	margin: 72px auto 0;
	padding: 24px 26px;
	background: var(--ylw-paper);
	border: 1px solid var(--ylw-line);
	border-radius: 12px;
}
.ylw-staff__face {
	flex: 0 0 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--ylw-soft);
	color: var(--ylw-brand);
	font-size: 13px;
	font-weight: 700;
}
.ylw-staff__body { min-width: 0; font-size: 15px; line-height: 1.95; }
.ylw-staff__body p { margin: 0; }
.ylw-staff__label { font-family: var(--ylw-min); font-weight: 700; color: var(--ylw-brand); margin-bottom: 4px !important; }
.ylw-staff__name { margin-top: 8px !important; font-size: 12px; color: var(--ylw-sub); }

.ylw-voice { max-width: 860px; margin: 80px auto 0; }
.ylw-voice__note { margin: -10px 0 18px; text-align: center; font-size: 13px; color: var(--ylw-sub); }
.ylw-voice__list { display: grid; gap: 16px; }
.ylw-voice__qa { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--ylw-line); }
.ylw-voice__qa p,
.ylw-voice__aside { margin: 0; line-height: 1.9; }
.ylw-voice__q,
.ylw-voice__a { padding-left: 2.2em; text-indent: -2.2em; }
.ylw-voice__q { font-weight: 700; color: var(--ylw-brand); }
.ylw-voice__q::before,
.ylw-voice__a::before { display: inline-block; width: 2.2em; text-indent: 0; font-family: var(--ylw-min); font-weight: 700; }
.ylw-voice__q::before { content: "Q."; }
.ylw-voice__a::before { content: "A."; color: var(--ylw-sub); }
.ylw-voice__aside { font-size: 13px; color: var(--ylw-sub); padding-left: 2.2em; margin-top: -6px; }
.ylw-voice__more { margin-top: 16px; }
.ylw-voice__more summary {
	display: block;
	width: fit-content;
	margin: 0 auto 16px;
	padding: 10px 26px;
	border: 1px solid var(--ylw-brand);
	border-radius: 999px;
	color: var(--ylw-brand);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.ylw-voice__more summary::-webkit-details-marker { display: none; }
.ylw-voice__more[open] summary { display: none; }

/* ---------- 見学会・相談 ---------- */
.yl-works .ylw-cta {
	display: grid;
	gap: 14px;
	justify-items: center;
	margin-top: 80px;
	padding: 48px 32px;
	border-radius: 14px;
	background: var(--ylw-brand);
	color: #fff;
	text-align: center;
}
.yl-works .ylw-cta h2 { color: #fff; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.65; }
.yl-works .ylw-cta p { margin: 0; }
.ylw-cta__eyebrow { font-size: 12px; letter-spacing: .22em; opacity: .85; }
.ylw-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.yl-works .ylw-cta__btns a {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	background: #fff;
	color: var(--ylw-brand);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid #fff;
}
.yl-works .ylw-cta__btns a + a { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.yl-works .ylw-cta__btns a:hover { opacity: .88; }
.ylw-cta__tel { font-size: 13px; opacity: .92; }
.yl-works .ylw-cta__tel a { color: #fff; }

/* ---------- 詳細：ほかの施工事例 ---------- */
.ylw-related { margin-top: 80px; }
.yl-works .ylw-related__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ylw-related__grid a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.ylw-related__img { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.ylw-related__area { font-size: 12px; color: var(--ylw-sub); }
.ylw-related__title { font-family: var(--ylw-min); font-weight: 700; line-height: 1.6; }
.ylw-related__all { margin: 24px 0 0; text-align: center; }
.ylw-related__all a { color: var(--ylw-brand); font-weight: 700; }

/* ---------- 一覧 ---------- */
/* 見出しは下層ページ共通の .yl-ptitle（style.css）。下に絞り込みのボタンがあるので下の余白だけ詰める */
.yl-works .yl-ptitle { margin-bottom: 0; }
.ylw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 36px; }
.ylw-chips button {
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ylw-brand);
	background: #fff;
	border: 1px solid var(--ylw-line);
	border-radius: 999px;
	padding: 6px 18px;
	cursor: pointer;
}
.ylw-chips button[aria-pressed="true"] { background: var(--ylw-brand); border-color: var(--ylw-brand); color: #fff; }
.yl-works .ylw-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}
.ylw-grid > li { margin: 0; }
.ylw-grid > li[hidden] { display: none; }
.ylw-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--ylw-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(60, 45, 30, .06);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ylw-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(60, 45, 30, .12); }
/* 写真の高さはすべて同じ（4:3 に切りそろえる） */
.ylw-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ylw-soft); }
.ylw-card__img img { position: absolute; inset: 0; }
.ylw-card__area {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--ylw-brand);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}
.ylw-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.yl-works .ylw-card__title { font-size: 18px; line-height: 1.6; }
.ylw-card__lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ylw-sub);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ylw-card__more {
	margin: auto 0 0;
	padding-top: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--ylw-brand);
}
.ylw-card__more i { position: relative; width: 28px; height: 28px; border: 1px solid var(--ylw-brand); border-radius: 50%; }
.ylw-card__more i::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--ylw-brand);
	border-right: 1.5px solid var(--ylw-brand);
	transform: rotate(45deg);
}
.ylw-archive-parts { margin-top: 56px; }
.ylw-empty { text-align: center; }

/* ---------- 写真の拡大表示 ---------- */
.ylw-lb {
	width: min(1100px, 100vw);
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: visible;
}
.ylw-lb::backdrop { background: rgba(20, 16, 12, .9); }
.ylw-lb__fig { margin: 0; display: grid; gap: 10px; justify-items: center; }
.ylw-lb__fig img { width: auto; max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 6px; }
.ylw-lb__fig figcaption { font-size: 14px; min-height: 1.6em; }
.ylw-lb button {
	position: fixed;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.ylw-lb__close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.ylw-lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ylw-lb__next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
	.ylw-card, .ylw-photo img { transition: none; }
	.ylw-card:hover { transform: none; }
}

/* 一覧：サイドバーと並ぶ幅の狭いPCは2列 */
@media (min-width: 960px) and (max-width: 1239px) {
	.yl-works--archive .ylw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- タブレット ---------- */
@media (max-width: 959px) {
	.yl-works .ylw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ylw-point { gap: 28px; }
	.ylw-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- スマホ ---------- */
@media (max-width: 599px) {
	.yl-works .ylw-wrap { padding: 4px 0 56px; }
	.ylw-hero { height: auto; border-radius: 10px; }
	.ylw-hero--3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
	.ylw-hero--3 .ylw-hero__item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
	.ylw-hero--3 .ylw-hero__item:not(:first-child) { aspect-ratio: 1 / 1; }
	.ylw-hero--1 .ylw-hero__item, .ylw-hero--2 .ylw-hero__item { aspect-ratio: 4 / 3; }
	.ylw-head { margin-top: 28px; gap: 14px; }
	.ylw-lead { font-size: 15px; }
	.ylw-spec > div { flex-basis: 40%; }
	.ylw-point,
	.ylw-point.is-rev { grid-template-columns: 1fr; gap: 18px; margin-top: 56px; }
	.ylw-point.is-rev .ylw-point__text { order: 0; }
	.ylw-gallery { margin-top: 64px; }
	.ylw-gallery__grid { grid-template-columns: 1fr 1fr; }
	.ylw-staff { flex-direction: column; padding: 20px; margin-top: 56px; }
	.ylw-voice { margin-top: 64px; }
	.yl-works .ylw-cta { margin-top: 64px; padding: 36px 18px; }
	.yl-works .ylw-cta h2 br { display: none; }
	.ylw-cta__btns { width: 100%; }
	.yl-works .ylw-cta__btns a { width: 100%; }
	.yl-works .ylw-related__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.ylw-related__grid li:nth-child(3) { display: none; }
	.yl-works .ylw-grid { grid-template-columns: 1fr; gap: 20px; }
	.ylw-chips { margin: 18px 0 26px; }
	.ylw-lb__prev, .ylw-lb__next { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
}