/* =========================
   Works single — CLEAN FIX
   ========================= */

/* 変数：好みで調整 */
:root{
  --works-main-width: 1200px;         /* メイン画像の最大幅 */
  --works-content-width: 900px;       /* 受賞/スペックなど本文幅（画像より少し狭く） */
  --bg-right-size: 420px;             /* 右の飾り画像の幅 */
  --bg-left-size:  460px;             /* 左の飾り画像の幅 */
  --works-accent-green: #3a6b3e;      /* 見出しの緑 */
}

/* ---------- パンくず ---------- */
.works-breadcrumb{
  margin:6px 0 14px;
  font-size:.9rem;
  opacity:.85;
}

/* ---------- ヒーロー見出し（2カラム＋筆記体 Works） ---------- */
.works-header{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
  margin: 0 0 10px;                   /* ← 安全な下マージンのみ */
}
.works-hero__inner{ padding: 0; }     /* ← 余白は作らない（崩し対策） */

.works-head-left{ position:relative; }
.works-head-left .title{
  margin:0;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
  font-size:clamp(20px,2.2vw,44px);
  line-height:1.35;
  letter-spacing:.06em;
}
.works-head-left::before{
  content:"Works";
  position:absolute;
  left:-6px;
  top:-36px;
  transform:rotate(-10deg);
  font-family:"Allura",cursive;
  font-size:44px;
  line-height:1;
  color:#3a6b3e;
  opacity:.95;
  letter-spacing:.02em;
}

/* 右カラム（カテゴリ＋キーワード） */
.works-head-right{ display:flex; justify-content:flex-end; }

/* 見出し右の点線 */
.works-meta{
  position:relative;
  padding-left:48px;
  background:
    repeating-linear-gradient(to bottom, #6b8f6f 0 1px, transparent 1px 5px)
    no-repeat;
  background-position:18px 0;
  background-size:1px 100%;
}

/* カテゴリボタン */
.chips{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;
}
.chip{
  display:inline-block; padding:.45em .9em;
  background:#667d5b; border:1px solid #667d5b; color:#fff;
  border-radius:4px; font-size:.9rem;
}
.chip--area{ background:#748d6d; border-color:#748d6d; }

/* キーワード */
.works-tags{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  margin:0; padding:0; list-style:none; font-size:.8rem; line-height:1.4;
}
.works-tags a{ color:#405943; text-decoration:none; opacity:.9; }
.works-tags a:hover{ opacity:1; }

/* ---------- 背景（上800pxまで緑）＋飾り画像 ---------- */
body.single-works{
  background-image:
    url("https://noel-chiba-kisarazu.jp/wp-content/uploads/2025/11/flower-back-right2.png"),
    url("https://noel-chiba-kisarazu.jp/wp-content/uploads/2025/11/flower-back-left2.png"),
    linear-gradient(#e8f1ea 0 800px, #ffffff 800px);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:
    right 0 top 750px,
    left 0  top 1200px,
    left 0  top 0;
  background-size:
    var(--bg-right-size) auto,
    var(--bg-left-size)  auto,
    auto;
}

/* ---------- ギャラリー（Slick） ---------- */
.works-gallery{
  max-width:var(--works-main-width);
  margin:12px auto 12px;              /* 見出し直下を詰める */
  position:relative;
  z-index:2;
}
.works-slider-for .works-slide img{
  width:100%; height:auto; display:block; border-radius:4px;
}
.works-slider-nav{
  max-width:var(--works-main-width);
  margin:10px auto 0;
}
.works-slider-nav .works-thumb{ padding:2px; }
.works-slider-nav .works-thumb img{
  width:100%; height:80px; object-fit:cover; border-radius:4px;
  opacity:.8; transition:opacity .2s;
}
.works-slider-nav .slick-current .works-thumb img,
.works-slider-nav .works-thumb:hover img{ opacity:1; }
.slick-prev,.slick-next{ display:none !important; }

/* ---------- 受賞（画像下） ---------- */
.works-award{
  width:100%; max-width:var(--works-content-width);
  margin:28px auto 32px;
}
.works-award .award-inner{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px; border:1px solid #6b8f6f; border-radius:4px;
  background:#fff; text-align:center;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
}
.works-award .badge{
  border:none; padding:0; color:#2e7d32;
  font-weight:700; font-size:24px; letter-spacing:.15em; line-height:1;
}
.works-award .award-text{
  font-size:18px; font-weight:700; line-height:1.6;
}

/* ---------- スペック表（3行） ---------- */
.works-spec{
  width:100%; max-width:var(--works-content-width);
  margin:22px auto 12px;
}
.works-spec dl{
  display:grid; grid-template-columns:220px 1fr;
  border:none; background:transparent; border-radius:0; margin:0;
}
.works-spec dl>div{ display:contents; }
.works-spec dl>dt, .works-spec dl>dd{
  margin:0; padding:18px 24px; border-top:1px solid #dfe7db;
}
.works-spec dt{
  grid-column:1; color:#2f4e3a; font-weight:600;
  letter-spacing:.12em; white-space:nowrap;
}
.works-spec dd{
  grid-column:2; white-space:nowrap; word-break:keep-all;
}

/* ---------- 本文以下 同じ幅に ---------- */
.works-single .lead,
.works-single .content,
.post-nav,
.works-related{
  width:100%; max-width:var(--works-content-width);
  margin-left:auto; margin-right:auto;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){
  .works-gallery, .works-slider-nav{ max-width:100%; }
}
@media (max-width:767px){
  .works-header{ grid-template-columns:1fr; }
  .works-meta{ background-position:14px 0; padding-left:32px; }
  .works-slider-nav .works-thumb img{ height:56px; }
  .works-award .award-inner{ flex-wrap:wrap; row-gap:8px; }
  .works-spec dl{ grid-template-columns:1fr; }
  .works-spec dt{ padding:14px 16px 2px; }
  .works-spec dd{ grid-column:1; padding:0 16px 14px; white-space:normal; }
}

/* -------------------------------
   single-works：余白と飾り画像の当たり対策（軽微）
-------------------------------- */
:root{ --bg-right-size: 400px; --bg-left-size: 400px; }
@media (max-width:1280px){ :root{ --bg-right-size:300px; --bg-left-size:300px; } }
@media (max-width:1024px){ :root{ --bg-right-size:300px; --bg-left-size:300px; } }
@media (max-width:880px){  :root{ --bg-right-size:300px; --bg-left-size:300px; } }
@media (max-width:767px){  :root{ --bg-right-size: 50px; --bg-left-size: 50px; } }

@media (max-width:1024px){
  body.single-works{
    background-position:
      right -80px top 820px,
      left  -80px top 1280px,
      left 0 top 0;
  }
}
@media (max-width:767px){
  body.single-works{
    background-position:
      right -200px top 880px,
      left  -200px top 1380px,
      left 0 top 0;
  }
}

/* 1200px以下は左右飾りを消してグラデのみ */
@media (max-width:1200px){
  body.single-works{
    background-image: linear-gradient(#e8f1ea 0 800px, #ffffff 800px) !important;
    background-repeat:no-repeat !important;
    background-position:left 0 top 0 !important;
    background-size:auto !important;
  }
}

/* ===== Works：前後ナビ（テキストのみ） ===== */
.post-nav.post-nav--minimal{
  max-width: var(--works-content-width);
  margin: clamp(44px, 6vw, 88px) auto clamp(28px, 4vw, 56px);
  padding-top: 0; border-top: none;
  display: flex; justify-content: center; align-items: center;
  gap: 36px; flex-wrap: wrap;
}
.post-nav.post-nav--minimal a{
  all: unset; display:inline-block; cursor:pointer;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:16px; line-height:1.8; color:#2b3b33; letter-spacing:.06em;
  transition:color .2s ease;
}
.post-nav.post-nav--minimal a:hover{ color:var(--works-accent-green); }
.post-nav.post-nav--minimal .next a::before{ content:"＜"; margin-right:.45em; }
.post-nav.post-nav--minimal .prev a::after{ content:"＞"; margin-left:.45em; }
@media (max-width:767px){
  .post-nav.post-nav--minimal{ gap:22px; }
  .post-nav.post-nav--minimal a{ font-size:15px; }
}

/* ---------------------------------------------------
   ほかの施工事例（related）— 2列×3段・拡大・全面オーバーレイ
   ※ 重複・競合ルールは排除
--------------------------------------------------- */

/* セクション幅を広げてサムネを1.4倍相当に */
body.single-works .works-related{
  max-width: 1200px !important;
  margin: 72px auto 56px !important;
  padding: 0 !important;
}

/* 見出し */
body.single-works .works-related > h2{
  margin:0 0 22px;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif !important;
  font-weight:700 !important;
  text-align:center !important;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.12em; color:#22302a;
}
body.single-works .works-related > h2::after{
  content:""; display:block; width:44px; height:2px; margin:12px auto 0;
  background:#dfe4dc; border-radius:2px;
}

/* グリッド：PC/タブレット2列、スマホ1列 */
body.single-works .works-related .cards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:28px !important;
}
@media (max-width:640px){
  body.single-works .works-related .cards{ grid-template-columns:1fr !important; gap:18px !important; }
}

/* カード体裁 */
body.single-works .works-related .card{
  position:relative; overflow:hidden !important;
  border-radius:0 !important; box-shadow:none !important;
}
body.single-works .works-related .card .thumb{ margin:0; line-height:0; position:relative; }

/* サムネ：全面を暗く、サイズもしっかり確保 */
body.single-works .works-related .card .thumb img{
  width:100% !important;
  height: clamp(320px, 34vw, 440px) !important;
  object-fit:cover !important; display:block !important;
  filter:brightness(78%) !important;
  transition: filter .35s ease, transform .6s ease !important;
}
body.single-works .works-related .card:hover .thumb img{
  filter:brightness(86%) !important; transform:scale(1.015) !important;
}

/* タイトル：白文字だけを画像下辺に重ねる */
body.single-works .works-related .card .card-title{
  position:absolute !important; left:16px !important; right:16px !important; bottom:16px !important;
  margin:0 !important; padding:0 !important; background:none !important; border-radius:0 !important;
  color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif !important;
  font-weight:700 !important; font-size:clamp(15px,1.7vw,19px) !important; line-height:1.6 !important;
}

/* “くわしく見る”等の小パーツは非表示 */
body.single-works .works-related .card .more{ display:none !important; }

/* 「一覧はこちら」ボタン（白ピル＋淡い枠＋影） */
body.single-works .works-related .more-archive{
  text-align:center !important; margin-top:32px !important;
}
body.single-works .works-related .more-archive a,
body.single-works .works-related .more-archive .btn,
body.single-works .works-related .more-archive .elementor-button,
body.single-works .works-related .more-archive .wp-block-button__link{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:.5em !important; padding:14px 30px !important;
  border:1px solid #e3e8e2 !important; border-radius:999px !important; background:#fff !important;
  color:#22302a !important; font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif !important;
  font-weight:600 !important; letter-spacing:.04em !important; text-decoration:none !important;
  box-shadow:0 4px 14px rgba(0,0,0,.06) !important;
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
body.single-works .works-related .more-archive a::after,
body.single-works .works-related .more-archive .btn::after,
body.single-works .works-related .more-archive .elementor-button::after,
body.single-works .works-related .more-archive .wp-block-button__link::after{
  content:"＞"; margin-left:.5em; font-size:.9em; line-height:1; opacity:.9;
}
body.single-works .works-related .more-archive a:hover,
body.single-works .works-related .more-archive .btn:hover,
body.single-works .works-related .more-archive .elementor-button:hover,
body.single-works .works-related .more-archive .wp-block-button__link:hover{
  border-color:#6b8f6f !important; color:#2f4e3a !important; background:#f7faf8 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}

/* ===== メイン画像：高さを全画像で完全に揃える ===== */
body.single-works{ --works-hero-h: 520px; } /* 固定で安定 */
body.single-works .works-gallery .works-slider-for,
body.single-works .works-gallery .works-slider-for .slick-list,
body.single-works .works-gallery .works-slider-for .slick-track{
  height: var(--works-hero-h) !important;
}
body.single-works .works-gallery .works-slider-for .works-slide{
  height: var(--works-hero-h) !important;
  display: flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
}
body.single-works .works-gallery .works-slider-for .works-slide img{
  max-height:100% !important; max-width:100% !important;
  height:auto !important; width:auto !important; object-fit:contain !important; display:block !important;
}

/* ===== single-works 復旧：見出し・ヘッダー周りのマイナス余白とゼロ化を解除 ===== */

/* 見出しブロック：マイナス余白は使わず“適量”に戻す */
html body.single-works .works-hero__inner{
  padding-top: 20px !important;
  padding-bottom: 8px !important;
  margin-top: 0 !important;
}
html body.single-works .works-header{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* メイン画像との距離を安定化 */
html body.single-works .works-gallery{
  margin-top: 12px !important;
}

/* 以前入っていた “先頭セクションをゼロ化 / 先頭を強制的に引き上げ” を無効化 */
html body.single-works .site-content,
html body.single-works .site-main,
html body.single-works .entry-content,
html body.single-works .elementor,
html body.single-works .elementor-section-wrap,
html body.single-works .elementor > .elementor-top-section:first-child,
html body.single-works .elementor > .elementor-section-wrap > .elementor-section:first-child,
html body.single-works .elementor-location-single > .elementor > .elementor-top-section:first-child{
  margin-top: auto !important;
  padding-top: auto !important;
  min-height: auto !important;
}

/* 念のため：強い上書きが残っていても “上に引っ張らない” を最優先にする */
html body.single-works .works-hero__inner,
html body.single-works .works-header{
  margin-top: 0 !important;
  padding-top: initial !important;
}

/* ヘッダーは薄めのパディングで固定（崩さず少しだけ詰める） */
html body.single-works header.elementor-location-header .elementor-section.elementor-top-section{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* stickyスペーサーは自動高さ（=ヘッダー分の空間を確保） */
html body.single-works .elementor-location-header + .elementor-sticky__spacer{
  height: auto !important;
  min-height: auto !important;
}


/* =======================================================
   single-works：ページ開始位置を下げる（デスクトップ/スマホ別つまみ）
   ======================================================= */

/* つまみ（お好みで調整） */
:root{
  --works-top-offset-pc: 100px;   /* デスクトップで下げる量（例：48px） */
  --works-top-offset-sp: 110px;   /* スマホで下げる量（例：28px） */
}

/* 共通：最初のブロック（Elementorでも通常でも）を下げる */
html body.single-works .entry-content > *:first-child,
html body.single-works .elementor-location-single > .elementor > .elementor-top-section:first-child,
html body.single-works .elementor > .elementor-top-section:first-child,
html body.single-works .works-hero__inner,
html body.single-works .works-header{
  margin-top: var(--works-top-offset-pc) !important;
}

/* スマホの下げ量 */
@media (max-width: 767px){
  html body.single-works .entry-content > *:first-child,
  html body.single-works .elementor-location-single > .elementor > .elementor-top-section:first-child,
  html body.single-works .elementor > .elementor-top-section:first-child,
  html body.single-works .works-hero__inner,
  html body.single-works .works-header{
    margin-top: var(--works-top-offset-sp) !important;
  }
}

/* 先に強制ゼロ化している指定が残っていても必ず“下げる”ように最優先 */
html body.single-works .site-content,
html body.single-works .site-main,
html body.single-works .entry-content{
  padding-top: 0 !important;   /* 余白をパディングで持たせない（ズレ防止） */
}

/* ================================
   SP（≤750px）: メイン画像を“同じ高さ”で揃える
   functions.php も JS も不要／Slick そのまま
=================================== */
@media (max-width: 750px){
  /* つまみ（好みで変更可） */
  :root{
    --sp-hero-w: min(700px, 94vw);      /* スライダーの表示幅 */
    --sp-hero-h: clamp(260px, 62vw, 360px); /* 画像の表示高さ（固定） */
  }

  /* スライダー枠の横幅だけ制御（“高さ”は下で統一） */
  html body.single-works .works-gallery{
    max-width: var(--sp-hero-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Slickの器：高さは固定。横幅は触らない（←ここが大事） */
  html body.single-works .works-gallery .works-slider-for,
  html body.single-works .works-gallery .works-slider-for .slick-list{
    height: var(--sp-hero-h) !important;
  }
  /* トラックは flex 化して中央寄せ。幅は触らない＝スライドはすべて表示される */
  html body.single-works .works-gallery .works-slider-for .slick-track{
    height: var(--sp-hero-h) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 各スライド：高さ固定＋中央寄せ＋はみ出しカット */
  html body.single-works .works-gallery .works-slider-for .works-slide{
    height: var(--sp-hero-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* 画像は全面フィット（縦長は上下が、横長は左右がトリミングされる） */
  html body.single-works .works-gallery .works-slider-for .works-slide img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}