/* ==========================================================
   静的化対応用の追加スタイル（元テーマのCSSには手を加えず、ここで上書き）
   ========================================================== */
:root { --band-h: 30px; --sp-header-h: 79px; }
@media (max-width: 767px) { :root { --band-h: 38px; } }

/* メンテナンス表記（上部固定の細い帯） */
.c-maintenance-band {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--band-h);
  z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 0 10px; font-size: 1.2rem; line-height: 1.3; letter-spacing: .05em;
  text-align: center; color: #fff; background-color: #510a11;
}
.c-maintenance-band br { display: none; }
@media (max-width: 767px) {
  .c-maintenance-band { font-size: 1.1rem; }
  .c-maintenance-band br { display: inline; }
}
body { padding-top: var(--band-h); }

/* ページ内アンカー */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--band-h) + 10px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* リンク先を持たないカード・見出しはクリック不可 */
a:not([href]) { pointer-events: none; cursor: default; }

/* 電話ボタンのアイコン（元はメールアイコン） */
header .inquiry-group svg.icon-tel-s { width: auto; height: 30px; margin: 0 auto 10px; }
.co-btm-btn .contact a .text-box .icon svg.icon-tel-b { width: auto; height: 44px; }

/* トップのスライダー（slick を CSS アニメーションで代替：3秒表示・2秒クロスフェード） */
#home .kv .slider-container .slider { display: grid; }
#home .kv .slider-container .slider li { grid-area: 1 / 1; opacity: 0; animation: kvfade 15s linear infinite; overflow: hidden; }
#home .kv .slider-container .slider li:nth-child(1) { animation-delay: -2s; }
#home .kv .slider-container .slider li:nth-child(2) { animation-delay: 1s; }
#home .kv .slider-container .slider li:nth-child(3) { animation-delay: 4s; }
#home .kv .slider-container .slider li:nth-child(4) { animation-delay: 7s; }
#home .kv .slider-container .slider li:nth-child(5) { animation-delay: 10s; }
@keyframes kvfade {
  0% { opacity: 0; } 13.34% { opacity: 1; } 20% { opacity: 1; } 33.34% { opacity: 0; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #home .kv .slider-container .slider li { animation: none; }
  #home .kv .slider-container .slider li:nth-child(1) { opacity: 1; }
}

/* スマホ：固定帯に合わせてハンバーガー／メニューの位置を調整 */
@media (max-width: 767px) {
  /* ヘッダー全体を上部に追従（メンテ帯の直下） */
  header.wrap { position: sticky; top: var(--band-h); z-index: 99990; }
  [id] { scroll-margin-top: calc(var(--band-h) + var(--sp-header-h) + 10px); }
  header button.hmbgr { top: calc(var(--band-h) + 32px); }
  header .nav-wrapper { top: var(--band-h); height: calc(100vh - var(--band-h)); height: calc(100dvh - var(--band-h)); }
  header .nav-wrapper .inquiry-group .contact .td svg.icon-tel-s { width: auto; height: 26px; margin: 0; }
}
@media (max-width: 767px) {
  .co-btm-btn .contact a .text-box .icon svg.icon-tel-b { width: auto; height: 30px; }
  .co-btm-btn .contact a .text-box .icon span { font-size: 5.4vw; margin-left: 12px; white-space: nowrap; }
}

/* ==========================================================
   レスポンシブ（元はJSでPC幅1410px固定表示にしていた部分を、CSSで流動化）
   ≥1410px : 元のPCレイアウト / 768〜1409px : 左右余白つきの流動レイアウト / ≤767px : 元のSPレイアウト
   ========================================================== */
@media (min-width: 768px) and (max-width: 1409px) {
  .wrap, header.wrap { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  header .tel-group { right: 20px; }
  header .gnav li + li { margin-left: 18px; }
  header .gnav .jp, header .gnav .en { white-space: nowrap; }
  #home .kv .lead-text { left: 0; }
  #home .kv .recent-work { left: 20px; }
  footer .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  h2 { font-size: 3.8rem; }
  header .nav-wrapper .inquiry-group { display: none !important; }
  header .nav-wrapper .td + .td { padding-left: 30px; }
  header .gnav .jp { font-size: 1.7rem; }
  header .gnav .en { font-size: 1.4rem; }
  #flow .flow-step ul li .img-box { width: 40%; }
  #flow .flow-step ul li .text-box { width: calc(60% - 30px); }
  #flow .flow-step ul li .text-box .step-num, #flow .flow-step ul li .text-box h4 { font-size: 3.2rem; }
}
/* 装飾イラストが画面端からはみ出して横スクロールになるのを防ぐ（clipはstickyを壊さない） */
html, body { overflow-x: clip; }

/* 施工事例グリッド：固定px(660/315)を流動化 */
@media (min-width: 768px) and (max-width: 1409px) {
  #home .works ul.clr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; padding: 0; }
  #home .works li { width: auto; margin: 0; float: none; box-sizing: border-box; }
  #home .works li.first { grid-column: 1 / -1; height: auto; }
  #home .works li.first .img-box { max-width: none; height: auto; }
  #home .works li.first .img-box img { width: 100%; height: 100%; object-fit: cover; }
  #home .works li:not(.first) { height: auto; padding-bottom: 70px; }
  #home .works li:not(.first) .img-box { max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1409px) {
  #home .works ul.clr { grid-template-columns: 2fr 1fr 1fr; }
  #home .works li.first { grid-column: 1; grid-row: 1 / span 2; height: auto; align-self: stretch; }
  #home .works li.first .img-box { position: absolute; inset: 0; height: auto; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  footer .wrap.flex { flex-wrap: wrap; gap: 30px; }
  #home .works li:not(.first) .text-box .room { right: auto; left: 20px; bottom: 40px; }
  #home .works li:not(.first) { padding-bottom: 85px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .co-btm-btn .contact a .text-box .icon span { font-size: 2.4rem; margin-left: 12px; white-space: nowrap; }
  .co-btm-btn .contact a .text-box .icon svg.icon-tel-b { height: 32px; }
}

/* ===== PC header fine-tuning ===== */
@media (min-width: 768px) {
  /* 黒い台形をメンテナンス帯に密着 */
  header .tel-group { top: -4px; height: 59px; padding-top: 4px; box-sizing: border-box; }
  /* follow us! をFB/IGアイコン2つの中央に */
  header .sns-nav p.text { width: 100px; margin: 0 auto; display: flex; justify-content: center; }
  header .sns-nav p.text svg { flex: 0 0 105px; width: 105px; }
  /* TELボタンをキービジュアル右端に */
  header .nav-wrapper .inquiry-group { text-align: right; }
  header .nav-wrapper .inquiry-group a { margin-left: auto; }
}
@media (min-width: 1024px) {
  header .nav-wrapper .inquiry-group > .flex { justify-content: flex-end; }
}

/* メンテナンス見出し: #home h2 の margin(詳細度が高い)に負けないよう .hl-slash で上書き */
.hl-slash { margin: 0 0 80px !important; }
@media (max-width: 767px) { .hl-slash { margin: 0 0 44px !important; } }