/* works archive - card layout */
.p-worksList{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 980px){
  .p-worksList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .p-worksList{ grid-template-columns: 1fr; }
}

.p-worksCard{
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.p-worksCard__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.p-worksCard__thumb{
  position: relative;
}
.p-worksCard__thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.p-worksCard__badge{
  position: absolute;
  left: 12px;
  top: 12px;
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.p-worksCard__body{
  padding: 14px 16px 16px;
}

.p-worksCard__title{
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
}

.p-worksCard__meta{
  margin: 0 0 10px;
}
.p-worksCard__metaRow{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: baseline;
  margin: 6px 0;
}
.p-worksCard__metaRow dt{
  font-weight: 700;
  color: #555;
}
.p-worksCard__metaRow dd{
  margin: 0;
}

.p-plan-info__priceUnit{
  margin-left: 4px;
  font-weight: 700;
}

.p-worksCard__text{
  margin: 10px 0 14px;
  color: #333;
  line-height: 1.7;
}

.p-worksCard__btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
/* works category nav */
.p-worksCatNav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.p-worksCatNav__item{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.p-worksCatNav__item:hover{
  border-color: #111;
}

.p-worksCatNav__item.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* カテゴリ色（デフォルト） */
.p-worksCatNav__item,
.p-worksCard__badge{
  --cat-color: #111;     /* 未指定時 */
  --cat-text:  #fff;     /* 未指定時 */
}

/* タブ：active の色をカテゴリ色に */
.p-worksCatNav__item.is-active{
  background: var(--cat-color);
  border-color: var(--cat-color);
  color: var(--cat-text);
}

/* タブ：通常時は枠だけカテゴリ色に（主張しすぎない） */
.p-worksCatNav__item{
  border-color: color-mix(in srgb, var(--cat-color) 35%, #ddd);
}
.p-worksCatNav__item:hover{
  border-color: var(--cat-color);
}

/* バッジ：背景をカテゴリ色に */
.p-worksCard__badge{
  background: var(--cat-color);
  color: var(--cat-text);
}
/* すべて（黒） */
.is-cat-all{ --cat-color:#111; --cat-text:#fff; }

/* 赤 */
.is-cat-work_ldk{ --cat-color:#E53935; --cat-text:#fff; }

/* オレンジ */
.is-cat-work_bath{ --cat-color:#FB8C00; --cat-text:#fff; }

/* 黄 */
.is-cat-work_gas{ --cat-color:#FDD835; --cat-text:#111; }

/* 緑 */
.is-cat-work_kitchen{ --cat-color:#43A047; --cat-text:#fff; }

/* 青 */
.is-cat-work_toilet{ --cat-color:#1E88E5; --cat-text:#fff; }

/* 水色 */
.is-cat-work_wall{ --cat-color:#26C6DA; --cat-text:#fff; }

/* 紫 */
.is-cat-work_exterior{ --cat-color:#8E24AA; --cat-text:#fff; }

/* ピンク（最後） */
.is-cat-work_washroom{ --cat-color:#EC407A; --cat-text:#fff; }

/* その他（グレー） */
.is-cat-work_other{ --cat-color:#546E7A; --cat-text:#fff; }
/* =========================
   施工事例：カテゴリタブ（デフォルト色ベタ→アクティブ白）
   ========================= */
.p-worksCatNav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}

.p-worksCatNav__item{
  /* カテゴリ色（slugクラス側で --cat-color / --cat-text を割り当て） */
  background: var(--cat-color, #111);
  color: var(--cat-text, #fff);
  border: 1px solid var(--cat-color, #111);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:999px;

  font-weight:700;
  font-size:14px;
  line-height:1;
  text-decoration:none;

  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/* hover：ちょい浮かせる（おしゃれ寄せ） */
.p-worksCatNav__item:hover{
  transform: translateY(-1px);
}

/* 今いるカテゴリだけ “白” に反転（＝クリックしたら白） */
.p-worksCatNav__item.is-active{
  background:#fff;
  color: var(--cat-color, #111);
  border-color: var(--cat-color, #111);
}

/* アクティブhover時：戻らないように固定（任意） */
.p-worksCatNav__item.is-active:hover{
  transform: none;
}/* =========================
   Works Detail (single-works) – Modern styling
   ========================= */
body.single-works .l-container{
  /* テーマ側のcontainer幅が広すぎる場合の保険 */
  max-width: 1100px;
}

/* 全体の段落の読みやすさ */
body.single-works .p-works,
body.single-works .p-worksDetail{
  color:#111;
  line-height:1.85;
}

/* ------- タイトル周り（中身側の余白） ------- */
body.single-works .p-works__header,
body.single-works .p-worksDetail__header{
  margin: 18px 0 18px;
}

body.single-works .p-works__title,
body.single-works .p-worksDetail__title{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 12px;
}

/* ------- メタ情報：カード化（費用感/期間/メーカー） ------- */
body.single-works .p-works__meta,
body.single-works .p-worksDetail__meta{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px 16px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px 14px;
}

@media (max-width: 820px){
  body.single-works .p-works__meta,
  body.single-works .p-worksDetail__meta{
    grid-template-columns: 1fr;
  }
}

body.single-works .p-works__metaLabel,
body.single-works .p-worksDetail__metaLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
  letter-spacing: .08em;
  margin-bottom: 4px;
}

body.single-works .p-works__metaValue,
body.single-works .p-worksDetail__metaValue{
  font-size: 16px;
  font-weight: 800;
}

/* 費用感：数字を目立たせる（Antonは既存 .p-plan-info__priceNum を活かす） */
body.single-works .p-plan-info__priceNum{
  font-size: clamp(42px, 4.6vw, 64px);
  letter-spacing: .01em;
  display:inline-block;
  margin-right: 6px;
}

body.single-works .p-plan-info__priceUnit{
  font-size: 16px;
  font-weight: 900;
  vertical-align: baseline;
  opacity: .9;
}

/* ------- リード文 ------- */
body.single-works .p-works__lead,
body.single-works .p-worksDetail__lead{
  margin: 14px 0 20px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(17,77,160,.06), rgba(17,77,160,0));
  border-left: 4px solid rgba(17,77,160,.35);
  border-radius: 10px;
  font-weight: 700;
}

/* ------- セクション見出し：プラン寄り（飾り＋余白） ------- */
body.single-works .p-works__secTitle,
body.single-works .p-worksDetail__secTitle{
  font-size: 18px;
  font-weight: 900;
  margin: 26px 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
}

body.single-works .p-works__secTitle::before,
body.single-works .p-worksDetail__secTitle::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* ------- Before / After：2カラム（スマホは縦） ------- */
body.single-works .p-works__ba,
body.single-works .p-worksDetail__ba{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 820px){
  body.single-works .p-works__ba,
  body.single-works .p-worksDetail__ba{
    grid-template-columns: 1fr;
  }
}

body.single-works .p-works__baItem,
body.single-works .p-worksDetail__baItem{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

body.single-works .p-works__baLabel,
body.single-works .p-worksDetail__baLabel{
  padding: 10px 12px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .06em;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

body.single-works .p-works__baItem img,
body.single-works .p-worksDetail__baItem img{
  width:100%;
  height:auto;
  display:block;
}

/* ------- 工事中ギャラリー：今っぽいグリッド＋ホバー ------- */
body.single-works .p-works__gallery,
body.single-works .p-worksDetail__gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 900px){
  body.single-works .p-works__gallery,
  body.single-works .p-worksDetail__gallery{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  body.single-works .p-works__gallery,
  body.single-works .p-worksDetail__gallery{
    grid-template-columns: 1fr;
  }
}

body.single-works .p-works__gallery img,
body.single-works .p-worksDetail__gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  body.single-works .p-works__gallery img:hover,
  body.single-works .p-worksDetail__gallery img:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
  }
}

/* ------- 本文エリア：読みやすい行幅 ------- */
body.single-works .p-works__content,
body.single-works .p-worksDetail__content{
  margin-top: 18px;
  max-width: 78ch;
}
/* 詳細ページ：パンくず〜カテゴリタブの余白調整 */
body.single-works .p-worksCatNav{
  margin-top: 14px;   /* 上に余白 */
  margin-bottom: 18px;/* 下に余白 */
}

/* タブが上にくっつく場合、親側にも余白（効く方だけでOK） */
body.single-works .l-fv-page + .l-container .p-worksCatNav,
body.single-works .c-breadcrumb + .p-worksCatNav{
  margin-top: 14px;
}

/* 詳細：アイキャッチ */
body .p-worksHero{
  margin: 14px 0 18px;
}

body.p-worksHero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
  object-fit: cover;
}
/* 詳細ページ：パンくず〜カテゴリタブの余白調整 */
.p-worksCatNav{
  margin-top: 14px;   /* 上に余白 */
  margin-bottom: 18px;/* 下に余白 */
}

/* タブが上にくっつく場合、親側にも余白（効く方だけでOK） */
.l-fv-page + .l-container .p-worksCatNav,
.c-breadcrumb + .p-worksCatNav{
  margin-top: 14px;
}
/* =========================
   Before/After Drag Compare
   ========================= */
.p-worksCompare{
  --pos: 50%; /* 0%〜100%：Afterの見える割合 */
  margin: 12px 0 6px;
}

.p-worksCompare__stage{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f6f7f9;
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
  aspect-ratio: 16 / 10;
}

/* 画像はぴったりフィット */
.p-worksCompare__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Afterはクリップで左側だけ見える */
.p-worksCompare__img--after{
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* つまみ（縦ライン） */
.p-worksCompare__handle{
  position:absolute;
  top:0;
  bottom:0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 10px 24px rgba(0,0,0,.18);
}

/* つまみ（丸） */
.p-worksCompare__handle::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  border: 2px solid rgba(0,0,0,.08);
}

/* 丸の中の“虹”アクセント */
.p-worksCompare__handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#8e24aa);
}

/* Before/After ラベル */
.p-worksCompare__label{
  position:absolute;
  top: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  background: rgba(17,17,17,.55);
  color:#fff;
  backdrop-filter: blur(6px);
}
.p-worksCompare__label--before{ left: 12px; }
.p-worksCompare__label--after{ right: 12px; }

/* スライダーコントロール */
.p-worksCompare__ctrl{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.p-worksCompare__ctrlLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  letter-spacing: .08em;
}
.p-worksCompare__range{
  width: min(520px, 100%);
}

/* タッチ操作しやすく */
@media (max-width: 680px){
  .p-worksCompare__stage{ aspect-ratio: 4 / 3; }
}

/* 丸の中身：虹グラデ → mayu.svg */
.p-worksCompare__handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%,-50%);
  background: url("/wp-content/themes/bestday/assets/img/common/icon/mayu.svg") center / contain no-repeat;
}

/* 費用感：単位と税込み */
.p-worksPrice{
  display:flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 6px;
}
.p-worksPrice__tax{
  display:block;
  width:100%;
  margin-top: -2px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  letter-spacing: .08em;
}
.p-worksPrice__text{
  font-size: 18px;
  font-weight: 900;
}
/* 下部カテゴリ：見た目を今っぽく */
.p-worksCatNav{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* SPは横スクロール（今っぽい） */
@media (max-width: 680px){
  .p-worksCatNav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .p-worksCatNav::-webkit-scrollbar{ display:none; }
}

.p-worksCatNav__item{
  white-space: nowrap;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* 「デフォルト色ベタ」→「アクティブ白」 反転（前に作った仕様） */
.p-worksCatNav__item{
  background: var(--cat-color, #111);
  color: var(--cat-text, #fff);
  border: 1px solid var(--cat-color, #111);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.p-worksCatNav__item:hover{ transform: translateY(-1px); }
.p-worksCatNav__item.is-active{
  background:#fff;
  color: var(--cat-color, #111);
  border-color: var(--cat-color, #111);
}
/* ======================================
   Works Single – Modern (plan-like)
   ====================================== */

/* アイキャッチ：写真主役 + 角丸 + 影 */
body.single-works .p-worksHero{
  margin: 6px 0 14px;
}
body.single-works .p-worksHero img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

/* タイトル */
body.single-works .p-works__title{
  margin: 14px 0 10px;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 900;
  letter-spacing: .02em;
}

/* メタカード（費用感/期間/メーカー） */
body.single-works .p-works__meta{
  margin-top: 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px 14px;
}
@media (max-width: 820px){
  body.single-works .p-works__meta{ grid-template-columns: 1fr; }
}

body.single-works .p-works__metaLabel{
  font-size: 13px;           /* 少し大きく */
  font-weight: 900;
  color: rgba(0,0,0,.55);
  letter-spacing: .08em;
  margin-bottom: 6px;
}

body.single-works .p-works__metaValue{
  font-size: 18px;           /* 施工期間/メーカーを大きく */
  font-weight: 900;
}

/* ===== 費用感：添付画像風（大きい数字 + 右側に万円〜 + 下に税込み） ===== */
:root{
  --works-price: #F29B00; /* 添付のオレンジ寄せ（必要なら微調整） */
}

body.single-works .p-worksPrice{
  display:flex;
  align-items: center;
  gap: 12px;
}

body.single-works .p-worksPrice__num{
  font-family: "Anton", sans-serif; /* プランの雰囲気に寄せる */
  font-weight: 400;
  line-height: 1;
  font-size: clamp(54px, 5.2vw, 78px);
  color: var(--works-price);
  letter-spacing: .01em;
}

body.single-works .p-worksPrice__side{
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transform: translateY(2px);
}

body.single-works .p-worksPrice__unit{
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--works-price);
}

body.single-works .p-worksPrice__tax{
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--works-price);
  opacity: .95;
}

/* 要見積もりなど */
body.single-works .p-worksPrice__text{
  font-size: 18px;
  font-weight: 900;
}

/* 比較スライダー：ハンドル中身を mayu.svg に */
body.single-works .p-worksCompare__handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%,-50%);
  background: url("/wp-content/themes/bestday/assets/img/common/icon/mayu.svg") center / contain no-repeat;
}

/* SP：比較スライダー下のレンジを触りやすく */
@media (max-width: 680px){
  body.single-works .p-worksCompare__ctrl{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  body.single-works .p-worksCompare__range{
    width: 100%;
  }
}
/* 下部カテゴリ：今っぽいチップ + SP横スクロール */
.p-worksCatNav{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* SPは横スクロール */
@media (max-width: 680px){
  .p-worksCatNav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .p-worksCatNav::-webkit-scrollbar{ display:none; }
}

.p-worksCatNav__item{
  white-space: nowrap;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);

  /* “デフォルト色ベタ → アクティブ白” */
  background: var(--cat-color, #111);
  color: var(--cat-text, #fff);
  border: 1px solid var(--cat-color, #111);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.p-worksCatNav__item:hover{ transform: translateY(-1px); }
.p-worksCatNav__item.is-active{
  background:#fff;
  color: var(--cat-color, #111);
  border-color: var(--cat-color, #111);
}
/* ======================================
   Works Single – Hero like sample
   ====================================== */
body.single-works .p-worksHero--single{
  position: relative;
  margin: 10px 0 18px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.08);
  height: clamp(220px, 32vw, 360px);
}

/* 画像は全面に */
body.single-works .p-worksHero--single .p-worksHero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* 暗幕オーバーレイ（白文字が映える） */
body.single-works .p-worksHero--single::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.20));
  z-index: 1;
}

/* キャプション */
body.single-works .p-worksHero__cap{
  position:absolute;
  inset:0;
  z-index:2;
  padding: clamp(18px, 3vw, 46px);
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 左上の赤い WORKS + 線 */
body.single-works .p-worksHero__kicker{
  position:absolute;
  top: clamp(14px, 2.2vw, 34px);
  left: clamp(18px, 3vw, 46px);
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 12px;
  color: #e53935;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-transform: uppercase;
}
body.single-works .p-worksHero__kicker::after{
  content:"";
  width: 44px;
  height: 1px;
  background: #e53935;
  opacity: .9;
}

/* 背景透かし WORKS（線だけ） */
body.single-works .p-worksHero__water{
  position:absolute;
  left: clamp(18px, 3vw, 46px);
  top: 50%;
  transform: translateY(-55%);
  font-size: clamp(72px, 10vw, 160px);
  font-weight: 900;
  letter-spacing: .08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  text-stroke: 1px rgba(255,255,255,.18);
  opacity: 1;
  pointer-events:none;
  user-select:none;
}

/* タイトル（白太字） */
body.single-works .p-worksHero__title{
  margin: 0;
  color:#fff;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: .03em;
  text-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* ======================================
   Meta: make days/maker bigger & modern
   ====================================== */
body.single-works .p-works__metaLabel{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 6px;
  color: rgba(0,0,0,.55);
}

body.single-works .p-works__metaValue{
  font-size: 20px;       /* ←施工期間/メーカーを大きく */
  font-weight: 900;
  line-height: 1.25;
}

/* 費用感ブロックは“添付のレイアウト”を強調 */
body.single-works .p-worksPrice__num{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(56px, 5.4vw, 82px);
  color: #F29B00;
}
body.single-works .p-worksPrice__unit{
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #F29B00;
}
body.single-works .p-worksPrice__tax{
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: #F29B00;
}

/* ======================================
   Bottom category nav: modern chips + SP scroll
   ====================================== */
body.single-works .p-worksCatNav{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 680px){
  body.single-works .p-worksCatNav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  body.single-works .p-worksCatNav::-webkit-scrollbar{ display:none; }
}

body.single-works .p-worksCatNav__item{
  white-space: nowrap;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;

  /* ガラスっぽい今風 */
  background: color-mix(in srgb, var(--cat-color, #111) 88%, #fff 12%);
  color: var(--cat-text, #fff);
  border: 1px solid color-mix(in srgb, var(--cat-color, #111) 72%, #000 28%);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

body.single-works .p-worksCatNav__item:hover{
  transform: translateY(-1px);
}

/* アクティブは“白”に反転 */
body.single-works .p-worksCatNav__item.is-active{
  background: #fff;
  color: var(--cat-color, #111);
  border-color: var(--cat-color, #111);
}

/* すべてタブに色を付けたい場合 */
body.single-works .is-cat-all{
  --cat-color: #111;
  --cat-text: #fff;
}

/* ======================================
   Compare handle: mayu.svg
   ====================================== */
body.single-works .p-worksCompare__handle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%,-50%);
  background: url("/wp-content/themes/bestday/assets/img/common/icon/mayu.svg") center / contain no-repeat;
}
/* ======================================
   Works Single FV (blue hero with pale image)
   ====================================== */
body.single-works .l-fv-page--worksSingle{
  --fv-blue: #0B6FB4;
  position: relative;
  overflow: hidden;
  border-radius: 0; /* 青帯なので基本は角丸なし */
  background: var(--fv-blue);
  color: #fff;
  min-height: clamp(160px, 20vw, 220px);
  display: flex;
  align-items: flex-end;
}

/* 画像を“白っぽく”見せる（暗くしない） */
body.single-works .l-fv-page--worksSingle::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--works-hero) center / cover no-repeat;
  opacity: .32;                 /* ←濃さ：0.25〜0.45で調整 */
  filter: grayscale(1) contrast(.95) brightness(1.75);
  mix-blend-mode: screen;       /* ←白っぽく見える鍵 */
  z-index: 1;
}

/* ほんのり白いベール（文字の見やすさUP、でも暗くしない） */
body.single-works .l-fv-page--worksSingle::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  z-index: 2;
}

body.single-works .l-fv-page--worksSingle .l-fv-page__inner{
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 26px 24px;
}

@media (min-width: 900px){
  body.single-works .l-fv-page--worksSingle .l-fv-page__inner{
    padding: 38px 54px;
  }
}

/* 小さな WORKS ラベル（青×白の世界観なので赤→白/水色寄せ） */
body.single-works .l-fv-page--worksSingle .l-fv-page__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
}
body.single-works .l-fv-page--worksSingle .l-fv-page__kicker::after{
  content:"";
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.85);
}

/* 透かし WORKS */
body.single-works .l-fv-page--worksSingle .l-fv-page__water{
  position:absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-55%);
  font-size: clamp(60px, 10vw, 150px);
  font-weight: 900;
  letter-spacing: .08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  opacity: 1;
  pointer-events:none;
  user-select:none;
}
@media (min-width: 900px){
  body.single-works .l-fv-page--worksSingle .l-fv-page__water{
    left: 54px;
  }
}

/* タイトル（白） */
body.single-works .l-fv-page--worksSingle .l-fv-page__title{
  margin: 10px 0 0;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing: .03em;
  text-shadow: 0 12px 28px rgba(0,0,0,.12);
}
/* ======================================
   FV: Blue band as Eyecatch (pale image)
   ====================================== */
body.single-works .l-fv-page--worksSingle{
  --fv-blue: #0B6FB4;
  position: relative;
  overflow: hidden;
  background: var(--fv-blue);
  color:#fff;
  min-height: clamp(160px, 20vw, 220px);
  display:flex;
  align-items:flex-end;
}

/* 背景画像：黒くしない、白っぽくする */
body.single-works .l-fv-page--worksSingle::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--works-hero);
  background-size: cover;
  background-position: center;
  opacity: .35; /* 0.25〜0.45で調整 */
  filter: grayscale(1) contrast(.95) brightness(1.75);
  mix-blend-mode: screen; /* 白っぽく見せるキー */
  z-index: 1;
}

/* 文字が読めるように薄いブルーの膜（暗くしない） */
body.single-works .l-fv-page--worksSingle::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(11,111,180,.65), rgba(11,111,180,.35));
  z-index: 2;
}

body.single-works .l-fv-page--worksSingle .l-fv-page__inner{
  position: relative;
  z-index: 3;
  width:100%;
  padding: 26px 24px;
}
@media (min-width: 900px){
  body.single-works .l-fv-page--worksSingle .l-fv-page__inner{ padding: 38px 54px; }
}

/* WORKSラベル（白＋ブルーの世界観） */
body.single-works .l-fv-page__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.22em;
  font-size:12px;
  color: rgba(255,255,255,.95);
}
body.single-works .l-fv-page__kicker::after{
  content:"";
  width:44px;
  height:1px;
  background: rgba(255,255,255,.9);
}

/* 透かしWORKS */
body.single-works .l-fv-page__water{
  position:absolute;
  left:24px;
  top:50%;
  transform: translateY(-55%);
  font-size: clamp(60px, 10vw, 150px);
  font-weight:900;
  letter-spacing:.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  pointer-events:none;
  user-select:none;
}
@media (min-width:900px){
  body.single-works .l-fv-page__water{ left:54px; }
}

body.single-works .l-fv-page__title{
  margin: 10px 0 0;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing: .03em;
}
Copy
✅ 反映後の確認（30秒）
詳細ページを開いて スーパーリロード（Cmd+Shift+R / Ctrl+F5）
青帯にアイキャッチが薄く表示される
記事側に 画像ヒーローがもう出ていない（二重が消える）Source
すぐ確認したいこと（1つだけ）
いまのページで「記事側（青帯の下）」に 大きい画像ヒーローがまだ残っていますか？
残っているなら、<article>内の p-worksHero p-worksHero--single がまだ入っています。

「残ってる/消えた」だけ教えてください。消えたら次に、希望どおり 施工期間・メーカーの文字サイズUP＋下カテゴリの今っぽい最終仕上げをCSSで一括で出します。

多分出たっぽいです！
ありがとうございます！
横幅が広いので全体的にPCの時の横幅を小さくしたいです❢
PCで横幅が広く感じるのは、基本的に .l-container（中身のコンテナ幅）が大きいのが原因です。いまの施工事例詳細もコンテンツが横に広めに見えています。 Source

結論：works系ページだけなら works.css に追記するのが安全で最短です（他ページの崩れリスクが低い）。

まずは安全案：施工事例（works）だけ PC幅を狭くする（おすすめ）
/wp-content/themes/bestday/assets/css/works.css の末尾に追記してください。

Copy/* ======================================
   PC時の横幅を少し狭く（worksページだけ）
   ====================================== */
@media (min-width: 1024px){

  /* 詳細 /works/works-xx/ */
  body.single-works .l-container,

  /* 一覧 /works/ */
  body.post-type-archive-works .l-container,

  /* カテゴリ /works_category/xxx/ */
  body.tax-works_category .l-container{
    max-width: 1040px;  /* ←好みで 960 / 1000 / 1100 に調整OK */
    width: min(1040px, calc(100% - 64px));
    margin-left: auto;
    margin-right: auto;
  }
}

/* SP/タブレットの左右余白の基本 */
body.single-works .l-container,
body.post-type-archive-works .l-container,
body.tax-works_category .l-container{
  padding-left: 16px;
  padding-right: 16px;
}
/* 一覧カード：メタ値（3日目 / TOTO）を太く＆大きく */
.p-worksCard__metaValue,
.p-worksCard__metaValue *{
  font-weight: 900 !important;
}

@media (max-width: 680px){
  .p-worksCard__metaValue{
    font-size: 15px;
    line-height: 1.35;
  }
}
@media (min-width: 681px){
  .p-worksCard__metaValue{
    font-size: 16px;
    line-height: 1.35;
  }
}
:root{
  --mayu-yellow: #F2A100; /* 好みで微調整OK */
}

/* 価格が入ってそうなところをまとめて黄色化（どれかが当たればOK） */
.p-worksCard__price,
.p-worksCard__price .p-plan-info__priceNum,
.p-worksCard__price .p-worksPrice__num,
.p-worksCard__priceNum,
.p-worksPrice__num,
.p-plan-info__priceNum{
  color: var(--mayu-yellow) !important;
}
:root{
  --mayu-blue: #0B6FB4;
}

/* ボタン候補を一括でブルー化 */
.p-worksCard__btn,
.p-worksCard__button,
.p-worksCard__more,
.p-worksCard__cta,
.p-worksCard .c-btn,
.p-worksCard a.c-btn{
  background: var(--mayu-blue) !important;
  color: #fff !important;
  border: 1px solid var(--mayu-blue) !important;
  border-radius: 10px;
  font-weight: 900;
}

/* hover */
@media (hover:hover){
  .p-worksCard__btn:hover,
  .p-worksCard__button:hover,
  .p-worksCard__more:hover,
  .p-worksCard__cta:hover,
  .p-worksCard .c-btn:hover,
  .p-worksCard a.c-btn:hover{
    filter: brightness(.95);
  }
}
/* 一覧カード：dt/ddの見た目を整える */
.p-worksCard__metaRow{
  display: grid;
  grid-template-columns: 6.5em 1fr; /* 左ラベル幅 */
  gap: 6px;
  align-items: baseline;
}

/* 左のラベル（施工期間/採用メーカー） */
.p-worksCard__metaRow dt{
  font-weight: 800;
  color: rgba(0,0,0,.55);
  letter-spacing: .06em;
  font-size: 12px;
}

/* 右の値（3日 / TOTO）←ここを太く */
.p-worksCard__metaRow dd{
  margin: 0;
  font-weight: 900;     /* 太くする */
  font-size: 16px;      /* 少し大きくする */
  line-height: 1.3;
  color: #111;
}

/* SPだけ少し調整 */
@media (max-width: 680px){
  .p-worksCard__metaRow dd{ font-size: 15px; }
}
:root{ --mayu-yellow: #F2A100; } /* 好みで微調整OK */

.p-worksCard .p-plan-info__priceNum,
.p-worksCard .p-plan-info__priceUnit{
  color: var(--mayu-yellow);
}

/* 価格をより“強く”見せたい場合 */
.p-worksCard .p-plan-info__priceNum{
  font-weight: 400;
}
.p-worksCard .p-plan-info__priceUnit{
  font-weight: 900;
}
:root{ --mayu-blue: #0B6FB4; }

.p-worksCard__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mayu-blue);
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;

}

/* hover（PC） */
@media (hover:hover){
  .p-worksCard__link:hover .p-worksCard__btn{
    filter: brightness(.95);
    transform: translateY(-1px);
    transition: .18s ease;
  }
}
/* 一覧カード：画像上のカテゴリバッジを青に */
:root{ --mayu-blue:#0B6FB4; }

.p-worksCard__thumb .p-worksCard__badge{
  background: var(--mayu-blue) !important;
  color:#fff !important;
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 12px;
}
/* ======================================
   /works/ 一覧：PCは3カラムに固定
   ====================================== */

/* 親コンテナが狭く固定されている可能性があるので解除 */
.post-type-archive-works .p-works-archive,
.tax-works_category .p-works-archive{
  max-width: none !important;
  width: 100% !important;
}

/* カード一覧をグリッド化 */
.post-type-archive-works .p-worksList,
.tax-works_category .p-worksList{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  align-items: stretch;
}

/* カード自体が幅固定/float等で崩れるのを防ぐ */
.post-type-archive-works .p-worksCard,
.tax-works_category .p-worksCard{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* 画像の比率を揃える（見た目が今っぽくなる） */
.post-type-archive-works .p-worksCard__thumb,
.tax-works_category .p-worksCard__thumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.post-type-archive-works .p-worksCard__thumb img,
.tax-works_category .p-worksCard__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* 1024px以下は2列に（自然） */
@media (max-width: 1023px){
  .post-type-archive-works .p-worksList,
  .tax-works_category .p-worksList{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* SPは1列（必要なら2列にもできます） */
@media (max-width: 680px){
  .post-type-archive-works .p-worksList,
  .tax-works_category .p-worksList{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* =========================
   Pagination Base
========================= */
.navigation.pagination,
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px;

}

/* 各ページリンク */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #1f4fa3;
  border-radius: 999px;
  background: #fff;
  color: #1f4fa3;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* hover */
.page-numbers:hover {
  background: #1f4fa3;
  color: #fff;
  border-color: #1f4fa3;
  box-shadow: 0 6px 16px rgba(31, 79, 163, 0.18);
  transform: translateY(-1px);
}

/* focus: キーボード操作用 */
.page-numbers:focus-visible {
  outline: 3px solid rgba(31, 79, 163, 0.25);
  outline-offset: 2px;
}

/* 現在ページ */
.page-numbers.current {
  background: #1f4fa3;
  color: #fff;
  border-color: #1f4fa3;
  box-shadow: 0 8px 18px rgba(31, 79, 163, 0.22);
  pointer-events: none;
}

/* 前へ・次へ */
.page-numbers.prev,
.page-numbers.next {
  min-width: 64px;
  padding: 0 18px;
}

/* dots がある場合 */
.page-numbers.dots {
  min-width: auto;
  height: auto;
  padding: 0 2px;
  border: none;
  background: transparent;
  color: #7d8795;
  box-shadow: none;
  pointer-events: none;
}

/* =========================
   Tablet
========================= */
@media (max-width: 767px) {
  .navigation.pagination,
  .pagination,
  .nav-links {
    gap: 8px;
    margin-top: 32px;
    padding-top: 20px;
  }

  .page-numbers {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .page-numbers.prev,
  .page-numbers.next {
    min-width: 56px;
    padding: 0 14px;
  }
}

/* =========================
   Small Mobile
========================= */
@media (max-width: 480px) {
  .navigation.pagination,
  .pagination,
  .nav-links {
    gap: 6px;
    justify-content: center;
  }

  .page-numbers {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 999px;
  }

  .page-numbers.prev,
  .page-numbers.next {
    min-width: 52px;
    padding: 0 12px;
  }
}

/* =========================
   Very Narrow Screens
========================= */
@media (max-width: 360px) {
  .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 9px;
    font-size: 12px;
  }

  .page-numbers.prev,
  .page-numbers.next {
    min-width: 48px;
    padding: 0 10px;
  }
}