@charset "UTF-8";

/* =========================================================
   works.css
   建築実例×暮らしのストーリー
   replan / yourstory まとめページ
========================================================= */


/* =========================================================
   right-layout 調整
   worksページだけ右側本文を全面で使う
========================================================= */

.works-page-body .right-layout-content,
.works-page-body .page-standard__content,
.works-page-body .right-layout-main,
.works-page-body .right-layout-inner,
.works-page-body .page-standard__inner{
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* right-layout側のページタイトルを消す */
.works-page-body .right-layout-title,
.works-page-body .right-layout-page-title,
.works-page-body .page-standard__page-title-wrap,
.works-page-body .page-standard__page-title,
.works-page-body .entry-title{
  display: none !important;
}


/* =========================================================
   全体
========================================================= */

.works-content{
  width: 100%;
  margin: 0 auto;
  color: #333;
  background: #fff;
}


/* =========================================================
   HERO
========================================================= */

.works-hero{
  width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 100px;
  box-sizing: border-box;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.45)
    ),
    url("/wp-content/uploads/2026/06/44912-01-10.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #efefef;
}

.works-hero__label,
.works-hero__title,
.works-hero__lead{
  color: #fff !important;
}

.works-hero__inner{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.works-hero__label{
  margin: 0 0 44px;
  color: #c59b1b;
  font-family: "Times New Roman", serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.58em;
  text-align: center;
}

.works-hero__title{
  margin: 0 0 38px !important;
  padding: 0 !important;
  color: #222 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 54px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.works-hero__title::before,
.works-hero__title::after{
  display: none !important;
  content: none !important;
}

.works-hero__lead{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  color: #666;
  font-size: 15px;
  line-height: 2.45;
  letter-spacing: 0.08em;
  text-align: center;
}

.works-hero__br-sp{
  display: none;
}


/* =========================================================
   FILTER
========================================================= */

.works-filter{
  position: relative !important;
  z-index: 80 !important;
  width: 100%;
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  box-sizing: border-box;
}

.works-filter.is-fixed{
  position: fixed !important;
  top: 76px !important;
  left: 250px !important;
  width: calc(100vw - 250px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
}

body:not(.admin-bar) .works-filter.is-fixed{
  top: 44px !important;
  margin-left: 0 !important;
}

.works-filter-placeholder{
  display: none;
  height: 56px;
}

.works-filter-placeholder.is-active{
  display: block;
}

.works-filter__inner{
  display: flex;
  align-items: center;
  gap: 32px;
  width: calc(100% - 96px);
  max-width: 1180px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.works-filter__label{
  color: #999;
  font-family: "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.works-filter__link,
.works-filter__link:visited{
  color: #999;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s ease;
}

.works-filter__link:hover,
.works-filter__link.is-active{
  color: #c59b1b;
}


/* =========================================================
   セクション
========================================================= */

.works-section{
  width: 100%;
  margin: 0 auto;
  padding: 96px 40px 120px;
  box-sizing: border-box;
	background: #fffdf9;
}

.works-section:last-child{
  margin-bottom: 0;
}

.works-section-head{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 42px;
  padding-top: 0;
  border-top: 1px solid #e8e2d8;
  box-sizing: border-box;
}

.works-section-en{
  display: inline-block;
  margin: -6px 0 0 !important;
  padding: 0 16px 0 0 !important;
  background: #faf9f5 !important;
  color: #c59b1b !important;
  font-family: "Times New Roman", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.34em !important;
  text-align: left !important;
}


/* =========================================================
   グリッド
========================================================= */

.works-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 64px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 64px;
  align-items: stretch;
}

.works-card{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.works-card-link,
.works-card-link:visited{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eee8dd;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.works-card-link:hover{
  color: inherit;
  text-decoration: none;
  border-color: #ded2bb;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* =========================================================
   カード画像
========================================================= */

.works-card-image{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden !important;
  background: #f3efe7 !important;
  box-sizing: border-box !important;
}

.works-card-image::before,
.works-card-image::after{
  display: none !important;
  content: none !important;
}

.works-card-image img{
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 0.55s ease !important;
}

.works-card-link:hover .works-card-image img{
  transform: scale(1.08) !important;
  opacity: 1 !important;
}

.works-card-dummy-image{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  background: #f3efe7 !important;
  color: #9b9387 !important;
  box-sizing: border-box !important;
}

.works-card-dummy-image span{
  display: block !important;
  color: #9b9387 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}


/* =========================================================
   カード本文
========================================================= */

.works-card-caption{
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 250px !important;
  padding: 28px 30px 30px !important;
  background: #fff !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* #カテゴリー */
.works-card-category{
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #c59b1b !important;
  font-size: 10px !important;
  line-height: 1.8 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
}

/* タイトル */
.works-card-title{
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #222 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.works-card-title::before,
.works-card-title::after{
  display: none !important;
  content: none !important;
}

/* Architecture Story */
.works-card-excerpt{
  margin: 0 0 30px !important;
  padding: 0 !important;
  color: #777 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

/* VIEW DETAILS */
.works-card-more{
  margin: auto 0 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-family: "Times New Roman", serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-align: left !important;
}

.works-card-more span{
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

.works-card-link:hover .works-card-more span{
  transform: translateX(4px);
}

/* =========================================================
   ページャー
   通常：黒 / ホバー：金
========================================================= */

.works-pager{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.works-pager .wp-pagenavi{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* 1 / 5 表示 */
.works-pager .wp-pagenavi .pages{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #111;
  color: #111 !important;
  background: #fff !important;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

/* ページ番号・次へ */
.works-pager .wp-pagenavi a,
.works-pager .wp-pagenavi .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #111 !important;
  color: #111 !important;
  background: #fff !important;
  font-size: 13px;
  line-height: 1;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 現在ページ */
.works-pager .wp-pagenavi .current{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #111 !important;
  color: #fff !important;
  background: #111 !important;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

/* マウスが乗った時：金 */
.works-pager .wp-pagenavi a:hover,
.works-pager .wp-pagenavi .page-numbers:hover{
  border-color: #c59b1b !important;
  color: #fff !important;
  background: #c59b1b !important;
}


/* =========================================================
   Cocoon / 共通指定に勝たせる
========================================================= */

.right-layout-content .works-hero__title{
  margin: 0 0 38px !important;
  padding: 0 !important;
  font-size: 54px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
}

.right-layout-content .works-section-title{
  margin: 0 !important;
  padding: 0 0 16px !important;
  font-size: 24px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
}

.right-layout-content .works-card-title{
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
  text-align: left !important;
  border: none !important;
  background: none !important;
}


/* =========================================================
   works 位置補正
   左ナビを除いた右側エリアの中央に合わせる
========================================================= */

.works-page-body .works-content{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc((100vw - 100%) / -2) !important;
  margin-right: 0 !important;
}

/* 左ナビ幅を 250px として右側エリアを作る */
.works-page-body .works-hero,
.works-page-body .works-filter,
.works-page-body .works-section{
  width: calc(100vw - 250px) !important;
  margin-left: 250px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 上部メイン */
.works-page-body .works-hero__inner{
  width: calc(100% - 96px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* フィルター・一覧・ページャー */
.works-page-body .works-filter__inner,
.works-page-body .works-grid,
.works-page-body .works-pager{
  width: calc(100% - 96px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   Responsive
========================================================= */

@media screen and (max-width: 1024px){

  .works-hero{
    min-height: 560px;
    padding: 90px 32px 84px;
  }

  .works-hero__title{
    font-size: 42px !important;
  }

  .right-layout-content .works-hero__title{
    font-size: 42px !important;
  }

  .works-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
  }

  .works-filter__inner{
    overflow-x: auto;
    justify-content: flex-start;
  }

}

@media screen and (max-width: 767px){

  .works-page-body .works-content{
    width: 100% !important;
    margin-left: 0 !important;
  }

  .works-page-body .works-hero,
  .works-page-body .works-filter,
  .works-page-body .works-section{
    width: 100% !important;
    margin-left: 0 !important;
  }

  .works-filter.is-fixed{
    left: 0 !important;
    width: 100vw !important;
  }

  .works-hero{
    min-height: 520px;
    padding: 82px 22px 72px;
  }

  .works-hero__label{
    margin-bottom: 34px;
    font-size: 10px;
    letter-spacing: 0.42em;
  }

  .works-hero__title{
    font-size: 30px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.08em !important;
  }

  .right-layout-content .works-hero__title{
    font-size: 30px !important;
    line-height: 1.55 !important;
  }

  .works-hero__lead{
    font-size: 13px;
    line-height: 2.2;
    text-align: left;
  }

  .works-hero__lead br{
    display: none;
  }

  .works-hero__br-sp{
    display: block;
  }

  .works-filter__inner{
    width: calc(100% - 36px) !important;
    gap: 22px;
    min-height: 54px;
    padding: 0;
  }

  .works-section{
    margin-bottom: 82px;
    padding: 72px 22px 0;
  }

  .works-section-title{
    font-size: 20px !important;
  }

  .right-layout-content .works-section-title{
    font-size: 20px !important;
  }

  .works-grid{
    grid-template-columns: 1fr;
    max-width: 420px;
    row-gap: 48px;
    margin-bottom: 48px;
  }

  .works-card-caption{
    padding: 0 18px 28px !important;
  }

  .works-card-title{
    font-size: 14px !important;
  }

  .right-layout-content .works-card-title{
    font-size: 14px !important;
  }

}


/* =========================================================
   FILTER fixed時のズレ補正
   通常時の margin-left:250px を固定時だけ解除する
========================================================= */

.works-page-body .works-filter.is-fixed{
  position: fixed !important;
  top: 70px !important;
  left: 250px !important;
  width: calc(100vw - 250px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  z-index: 9999 !important;
}

body:not(.admin-bar).works-page-body .works-filter.is-fixed{
  top: 44px !important;
  margin-left: 0 !important;
}


.works-section-en{
  margin: 0 !important;
  padding: 0 !important;
  color: #c59b1b !important;
  font-family: "Times New Roman", serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.42em !important;
  text-align: left !important;
}


/* =========================================================
   works 最下部 CTA
========================================================= */

.works-bottom-cta{
  width: 100%;
  margin: 0 auto;
  padding: 150px 40px 145px;
  background: #171310;
  box-sizing: border-box;
  text-align: center;
}

.works-bottom-cta__inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.works-bottom-cta__title{
  margin: 0 0 46px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.works-bottom-cta__title::before,
.works-bottom-cta__title::after{
  display: none !important;
  content: none !important;
}

.works-bottom-cta__lead{
  max-width: 1280px;
  margin: 0 auto 64px !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 14px !important;
  line-height: 2.35 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

.works-bottom-cta__buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.works-bottom-cta__button,
.works-bottom-cta__button:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 64px;
  padding: 0 36px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.works-bottom-cta__button--gold{
  background: #d4af37;
  border: 1px solid #d4af37;
  color: #fff !important;
}

.works-bottom-cta__button--gold:hover{
  background: #fff;
  border-color: #fff;
  color: #171310 !important;
}

.works-bottom-cta__button--outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff !important;
}

.works-bottom-cta__button--outline:hover{
  background: #fff;
  border-color: #fff;
  color: #171310 !important;
}


/* worksページ右側エリアいっぱいに合わせる */
.works-page-body .works-bottom-cta{
  width: calc(100vw - 250px) !important;
  margin-left: 250px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


@media screen and (max-width: 767px){

  .works-page-body .works-bottom-cta{
    width: 100% !important;
    margin-left: 0 !important;
  }

  .works-bottom-cta{
    padding: 86px 22px 92px;
  }

  .works-bottom-cta__title{
    margin-bottom: 30px !important;
    font-size: 24px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.08em !important;
  }

  .works-bottom-cta__lead{
    margin-bottom: 42px !important;
    font-size: 13px !important;
    line-height: 2.1 !important;
    text-align: left !important;
  }

  .works-bottom-cta__lead br{
    display: none;
  }

  .works-bottom-cta__buttons{
    display: grid;
    gap: 14px;
  }

  .works-bottom-cta__button,
  .works-bottom-cta__button:visited{
    width: 100%;
    min-width: 0;
    min-height: 56px;
  }

}


/* =========================================================
   works おすすめ導線
========================================================= */

.works-recommend-nav{
  width: 100%;
  margin: 0 auto;
  padding: 96px 40px 92px;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
}

.works-recommend-nav{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 110px 40px 106px;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.48),
      rgba(0, 0, 0, 0.48)
    ),
    url("/wp-content/uploads/2026/06/49218-01-12.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  text-align: center;
}

.works-recommend-nav__inner{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.works-recommend-nav__title{
  margin: 0 0 48px !important;
  padding: 0 !important;
  color: #222 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.works-recommend-nav__title::before,
.works-recommend-nav__title::after{
  display: none !important;
  content: none !important;
}

.works-recommend-nav__buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.works-recommend-nav__button,
.works-recommend-nav__button:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 58px;
  padding: 0 28px;
  background: #fff;
  border: 1px solid #dedbd4;
  color: #111 !important;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.works-recommend-nav__button:hover{
  background: #171310;
  border-color: #171310;
  color: #fff !important;
}


/* worksページ右側エリアいっぱいに合わせる */
.works-page-body .works-recommend-nav{
  width: calc(100vw - 250px) !important;
  margin-left: 250px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


@media screen and (max-width: 767px){

  .works-page-body .works-recommend-nav{
    width: 100% !important;
    margin-left: 0 !important;
  }

  .works-recommend-nav{
    padding: 72px 22px 70px;
  }

  .works-recommend-nav__title{
    margin-bottom: 34px !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
  }

  .works-recommend-nav__buttons{
    display: grid;
    gap: 12px;
  }

  .works-recommend-nav__button,
  .works-recommend-nav__button:visited{
    width: 100%;
    min-width: 0;
    min-height: 54px;
  }

}


/* =========================================================
   works HERO 背景画像＋文字を見やすく
========================================================= */

.works-page-body .works-hero{
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.35)
    ),
    url("/wp-content/uploads/2026/06/44912-01-10.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 文字を白に固定 */
.works-page-body .works-hero__label,
.works-page-body .works-hero__title,
.works-page-body .works-hero__lead,
.right-layout-content .works-hero__title{
  color: #fff !important;
}

/* タイトルを読みやすく */
.works-page-body .works-hero__title{
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55) !important;
}

/* 説明文も少し読みやすく */
.works-page-body .works-hero__lead{
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}


/* HERO内の文字位置を中央に揃える */
.works-page-body .works-hero__inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.works-page-body .works-hero__label,
.works-page-body .works-hero__title,
.works-page-body .works-hero__lead{
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 説明文の幅を少し絞って、真ん中に見せる */
.works-page-body .works-hero__lead{
  max-width: 820px !important;
}


.works-page-body .works-hero__lead{
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  color: #fff !important;
}


/* =========================================================
   works おすすめ導線 背景画像
========================================================= */

.works-page-body .works-recommend-nav{
  position: relative !important;
  padding: 120px 40px 116px !important;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.62),
      rgba(0, 0, 0, 0.62)
    ),
    url("/wp-content/uploads/2026/06/49218-01-12.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
	margin-bottom:50px;
}

/* 中身を前面に */
.works-page-body .works-recommend-nav__inner{
  position: relative !important;
  z-index: 2 !important;
}

/* タイトルを白に */
.works-page-body .works-recommend-nav__title{
  color: #fff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65) !important;
}

/* ボタンを見やすく */
.works-page-body .works-recommend-nav__button,
.works-page-body .works-recommend-nav__button:visited{
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #111 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24) !important;
}

.works-page-body .works-recommend-nav__button:hover{
  background: #171310 !important;
  border-color: #171310 !important;
  color: #fff !important;
}


/* =========================================
   WORKSページ：共通CONTACT位置だけ調整
========================================= */

.works-page-body .front-contact {
  width: calc(100vw - 250px) !important;
  margin-left: 250px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
  .works-page-body .front-contact {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* works 固定FILTER 位置調整 */
body.works-page-body .works-filter.is-fixed{
  top: 39px !important;
}

body.works-page-body:not(.admin-bar) .works-filter.is-fixed{
  top: 39px !important;
}