/* single-works.php 専用の追加スタイル（既存クラス名と衝突しない命名にしている） */
.work-detail-hero{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#d8d2c6;
  margin-bottom:clamp(28px,4vw,54px);
}
.work-detail-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:100%;
}
/* イベント情報詳細のメイン画像：写真は枠いっぱいにトリミング表示（cover）、
   日時・文字入りのチラシ画像は全体を収めて表示（contain）に切り替えられるようにする。
   ↓ 2026-07-21: 詳細ページでは cover/contain の別に関わらず画像を一切クロップしない方針に変更したため、
   下の body.single-works / body.single-topics スコープの上書きルールが cover/contain 両方で優先される。
   このブロック自体は heiwa-site-core の「メイン画像の表示方法」設定・管理画面を削除しないために残している。 */
.topics-single__hero.topics-single__hero--contain{background:#1c1a17}
.topics-single__hero.topics-single__hero--contain img{object-fit:contain}

/* 施工事例・イベント情報の詳細ページのみ：メイン画像をクロップせず元の縦横比のまま表示する。
   .work-detail-hero / .work-detail-content は 読み物（single.php）や固定ページ（page.php）でも
   共有されているため、body-classでスコープしてそれらの表示には影響させない。 */
body.single-works .work-detail-hero,
body.single-topics .work-detail-hero{
  aspect-ratio:unset;
  overflow:visible;
  background:none;
}
body.single-works .work-detail-hero img,
body.single-topics .work-detail-hero img{
  width:100%;
  height:auto;
  object-fit:unset;
  display:block;
}

.work-detail-heading{
  max-width:820px;
  font-size:clamp(20px,2.4vw,26px);
  font-weight:400;
  letter-spacing:.05em;
  line-height:1.6;
  margin:0 0 20px;
}
.work-detail-txt{
  max-width:820px;
  font-size:14px;
  line-height:1.9;
  color:var(--text);
  margin:0 0 clamp(28px,3vw,40px);
}
.work-detail-txt p{margin:0 0 1.4em}
.work-detail-txt p:last-child{margin-bottom:0}

.work-detail-specs{margin:0 0 clamp(28px,3vw,40px);max-width:820px}
.work-detail-specs__title{font-size:clamp(20px,2.2vw,24px);font-weight:400;letter-spacing:.05em;margin:0 0 20px}
.work-detail-specs__table{width:100%;border-collapse:collapse;font-size:14px}
.work-detail-specs__table tr{border-bottom:1px solid var(--line)}
.work-detail-specs__table th,
.work-detail-specs__table td{text-align:left;padding:14px 12px;vertical-align:top;font-weight:400}
.work-detail-specs__table th{width:220px;color:var(--sub);font-family:var(--sans);font-size:12px;letter-spacing:.06em}
.work-detail-specs__table td{color:var(--text)}
@media (max-width:1023px){
  .work-detail-specs__table th{width:160px}
}
@media (max-width:767px){
  .work-detail-specs__table,
  .work-detail-specs__table tbody,
  .work-detail-specs__table tr,
  .work-detail-specs__table th,
  .work-detail-specs__table td{display:block;width:auto}
  .work-detail-specs__table tr{padding:10px 0}
  .work-detail-specs__table th{padding:0 0 4px}
  .work-detail-specs__table td{padding:0 0 4px}
}

.work-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 clamp(28px,3vw,40px);
}
.work-detail-meta span{
  border:1px solid var(--line);
  padding:6px 14px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--sub);
}
.event-status-inline{
  border:none !important;
  color:#fff !important;
  background:var(--brown);
}
/* 「キーワード」（自由記述タグ、住宅性能・施工情報テーブルとは別データ） */
.work-detail-keywords{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,3vw,40px)}
.work-detail-keywords__tag{background:var(--paper);padding:6px 14px;font:11px var(--sans);letter-spacing:.08em;color:var(--text)}
.event-status-inline.is-open{background:var(--green)}
.event-status-inline.is-closed{background:var(--sub)}
.event-status-inline.is-preparing{background:var(--brown)}

.work-detail-content{
  max-width:820px;
  font-size:14px;
  line-height:2.1;
}
.work-detail-content p{margin:0 0 1.6em}
.work-detail-content img{max-width:100%;height:auto;margin:1.6em 0}

.work-gallery{margin-top:clamp(48px,6vw,88px)}
.work-gallery__title,.work-faq__title{font-size:clamp(22px,2.4vw,28px);font-weight:400;letter-spacing:.05em;margin:0 0 28px}
.work-gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.work-gallery__item{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
/* サブ画像は固定比率クロップをせず、元画像の縦横比のまま幅いっぱいに表示する */
.work-gallery__item img{width:100%;height:auto;display:block}
.work-gallery__caption{display:block;margin-top:6px;font:12px var(--sans);color:var(--sub)}
@media (max-width:1023px){
  .work-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .work-gallery__grid{grid-template-columns:1fr}
}

.work-faq{margin-top:clamp(48px,6vw,88px);max-width:820px}

.gallery-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(20,18,15,.92);display:flex;align-items:center;justify-content:center;padding:32px}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox__figure{max-width:min(1100px,92vw);max-height:88vh;margin:0;display:flex;flex-direction:column;gap:12px}
.gallery-lightbox__figure img{max-width:100%;max-height:78vh;object-fit:contain;display:block;margin:0 auto}
.gallery-lightbox__figure figcaption{color:#fff;font:13px var(--sans);text-align:center}
.gallery-lightbox__close{position:absolute;top:24px;right:24px;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;padding:8px 16px;cursor:pointer;font:12px var(--sans)}

.work-detail-back{
  margin-top:clamp(40px,5vw,72px);
}
@media (max-width:767px){
  .work-detail-content{font-size:13px}
}