@charset "UTF-8";
/* ==================================================================
 *  施工事例（archive-works.php / single-works.php）専用CSS
 * ================================================================== */
#works { padding: 110px 48px; background: #fff; }
.works { max-width: 1120px; margin: 0 auto; }
/* text-wrap:balance で行長を均等化、word-break:auto-phrase で文節単位に折り返し（SPの段落ち防止） */
.works_text { text-align: center; font-size: 15px; line-height: 2.0; color: #2b2b30; max-width: 720px; margin: 0 auto 60px; text-wrap: balance; word-break: auto-phrase; }
.works_contents ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.works_contents li { cursor: pointer; }
.works_contents .thumb { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(145deg,#26262b,#15151a); border-radius: 4px; overflow: hidden; }
.works_contents .thumb::after { content: 'PHOTO'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--en); letter-spacing: .4em; font-size: 11px; color: #55555a; z-index: 0; }
.works_contents .thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.works_contents .search { position: absolute; inset: 0; background: rgba(16,16,18,.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s; z-index: 2; }
.works_contents .search i { color: var(--paper); font-size: 24px; }
.works_contents li:hover .search { opacity: 1; }
.works_contents .outline { padding: 16px 4px; }
.works_contents .cat { font-family: var(--en); font-size: 10px; letter-spacing: .3em; color: var(--gray); text-transform: uppercase; }
.works_contents .ttl { font-size: 14px; color: var(--ink); margin-top: 6px; letter-spacing: .06em; }

/* ページネーション */
.navigation { margin-top: 60px; }
.navigation .nav-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.navigation .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line-d); font-family: var(--en); font-size: 13px; color: var(--ink); transition: .3s; }
.navigation .page-numbers.current, .navigation .page-numbers:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 施工事例 詳細 */
#works-single { padding: 90px 48px 110px; background: #fff; }
.works-single-inner { max-width: 860px; margin: 0 auto; }
.ws-head { text-align: center; margin-bottom: 46px; }
.ws-head .cat { font-family: var(--en); font-size: 11px; letter-spacing: .3em; color: var(--gray); text-transform: uppercase; }
.ws-title { font-family: var(--serif); font-size: clamp(22px,2.8vw,32px); font-weight: 700; color: var(--ink); letter-spacing: .08em; margin: 14px 0 10px; line-height: 1.6; }
.ws-date { font-family: var(--en); font-size: 12px; letter-spacing: .14em; color: #aaa; }
.ws-thumb { margin-bottom: 44px; border-radius: 4px; overflow: hidden; }
.ws-body { font-size: 15px; line-height: 2.0; color: #2b2b30; }
.ws-body p { margin-bottom: 1.6em; }
.ws-body img { border-radius: 4px; margin: 1em 0; }
.ws-back { text-align: center; margin-top: 70px; }
.ws-back a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--en); font-size: 13px; letter-spacing: .14em; color: var(--ink); border: 1px solid var(--ink); padding: 14px 40px; transition: .3s; }
.ws-back a:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 1024px) { #works { padding-left: 32px; padding-right: 32px; } .works_contents ul { grid-template-columns: repeat(2,1fr); } #works-single { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 768px) {
  #works { padding: 76px 22px; }
  .works_contents ul { grid-template-columns: 1fr; }
  #works-single { padding: 70px 22px 90px; }
  .works_text { font-size: 14px; letter-spacing: .01em; }
}