/* ---- ベース ---- */
:root{
  --bg: #ffffff;
  --ink: #111318;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #0ea5e9; /* 明るめ水色 */
  --brand-dark: #0284c7;
  --accent: #f59e0b; /* 暖色アクセント */
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --container: min(1100px, 90vw);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
}

img{ max-width:100%; display:block }
a{ color: var(--brand); text-decoration: none }
a:hover{ text-decoration: underline }
.container{ width: var(--container); margin-inline:auto }
.sr-only{ position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width:1px;height:1px; overflow:hidden; white-space:nowrap }

.skip-link{
  position:absolute; left:-999px; top:-999px; background:#000; color:#fff; padding:.5rem .75rem; z-index:1000;
}
.skip-link:focus{ left: 1rem; top: 1rem }

/* ---- ヘッダー ---- */
.site-header{
  position: sticky; top:0; z-index: 50; background:#fff; border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:.75rem 0;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none }
.brand-logo{ font-size: 1.6rem }
.brand-text{ font-weight:700; letter-spacing:.02em }
.brand-text small{ font-weight:500; color: var(--muted) }

.site-nav{ display:none }
.site-nav.open{ display:block }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem }
.site-nav a{ color:inherit; text-decoration:none; padding:.4rem .2rem }
.site-nav a:hover{ color: var(--brand) }

.header-cta{ display:none; gap:.5rem }
.nav-toggle{
  width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.nav-toggle-line{ width:18px; height:2px; background:var(--ink); display:block; position:relative }
.nav-toggle-line + .nav-toggle-line{ margin-top:3px }

/* >=768px で横並び */
@media (min-width: 768px){
  .site-nav{ display:block }
  .site-nav ul{ flex-direction:row; gap:1.2rem }
  .nav-toggle{ display:none }
  .header-cta{ display:flex }
}

@media (max-width: 767.98px){
  /* ヘッダーを基準にする */
  .header-inner{
    position: relative;
    grid-template-columns: auto 1fr auto; /* brand | 空き | toggle */
    align-items: center;
  }

  /* ハンバーガーは右端 */
  .nav-toggle{
    margin-left: auto;
    justify-self: end;
  }

  /* ▼ドロップダウン化（初期は閉） */
  .site-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    padding: .75rem 1rem;

    /* display:none を上書きしてブロック化 */
    display: block;

    /* アニメーション用に隠す */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height .25s ease, opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 100; /* コンテンツの上に出す */
  }

  /* 開いた状態 */
  .site-nav.open{
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* モバイル時の縦並び */
  .site-nav ul{
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
  }
}

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius: 999px; border:1px solid transparent;
  font-weight:600; text-decoration:none; white-space:nowrap; box-shadow: var(--shadow);
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background: var(--brand-dark) }
.btn-outline{ background:#fff; color:var(--brand); border-color: var(--brand) }
.btn-outline:hover{ background: #f0f9ff }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--ink) }
.btn-ghost:hover{ background: #f8fafc }

/* ---- ヒーロー ---- */
.hero{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(14,165,233,.1), transparent),
    radial-gradient(800px 400px at 90% 10%, rgba(245,158,11,.1), transparent),
    linear-gradient(#ffffff, #ffffff);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  padding: clamp(2.4rem, 5vw, 4rem) 0;
  display:grid; gap:2rem; align-items:center;
}
.hero-copy h1{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height:1.2; margin:.2rem 0 .6rem; letter-spacing:.02em;
}
.accent{ color: var(--accent) }
.hero-copy p{ color: var(--muted); margin: .4rem 0 1rem }
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap }
.hero-badges{ list-style:none; display:flex; gap:.6rem; margin:1rem 0 0; padding:0; flex-wrap:wrap }
.hero-badges li{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.3rem .6rem; font-size:.9rem }

.hero-figure img{ width:100%; height: 260px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow) }
.img-fallback{ background: linear-gradient(135deg, #e0f2fe, #fff3e0); width:100%; height:260px; display:block }

@media (min-width: 900px){
  .hero-inner{ grid-template-columns: 1.2fr 1fr }
  .hero-figure img, .img-fallback{ height: 340px }
}

.hero.hero-bg{
  background:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    url("../images/bg.jpg") center/cover no-repeat;
  position: relative;
}

.hero-bg .hero-inner {
  position: relative;
  z-index: 1; /* テキストや動画をオーバーレイの上に */
}

/* ---- セクション ---- */
.section{ padding: clamp(2.2rem, 5vw, 4rem) 0 }
.section-alt{ background:#f8fafc; border-block:1px solid var(--line) }
.section-accent{ background: #ecfeff }
.section-title{
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin:0 0 .5rem; letter-spacing:.02em
}
.section-lead{ color: var(--muted); margin: 0 0 1.2rem }

/* ---- カードグリッド（サービス） ---- */
.cards{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cards{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 980px){
  .cards{ grid-template-columns: repeat(3, 1fr) }
}
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.card:hover{ transform: translateY(-2px) }
.card-icn{ font-size:1.6rem }
.card-ttl{ margin:.4rem 0 .3rem; font-size:1.1rem }
.card-txt{ color: var(--muted); margin:0 }

/* ---- 施工事例 ---- */
.grid-works{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .grid-works{ grid-template-columns: repeat(3, 1fr) }
}
.work{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow) }
.work img{ width:100%; height:200px; object-fit:cover }
.work figcaption{ padding:.7rem .8rem; font-size:.95rem }

/* ---- 会社情報 ---- */
.about{
  display:grid; gap:1.6rem; grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .about{ grid-template-columns: 1.2fr 1fr }
}
.about-list{ margin:1rem 0 0 }
.about-list > div{ display:grid; grid-template-columns: 8em 1fr; gap:.6rem .8rem; padding:.5rem 0; border-bottom:1px dashed var(--line) }
.about-list dt{ color: var(--muted) }
.about-figure img{ border-radius: var(--radius); box-shadow: var(--shadow); height: 280px; object-fit: cover; width:100% }

/* ---- お問い合わせ ---- */
.contact{ }
.contact-cards{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .contact-cards{ grid-template-columns: 1fr 1fr 1fr }
}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow)
}
.contact-cards.two-cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .contact-cards.two-cols {
    grid-template-columns: 1fr;
  }
}
.contact-big{ font-size:1.4rem; font-weight:700 }
.contact-form{ display:grid; gap:.7rem; margin-top:.5rem }
.contact-form label{ display:grid; gap:.35rem; font-weight:600; font-size:.95rem }
.contact-form input, .contact-form textarea{
  width:100%; padding:.65rem .75rem; border:1px solid var(--line); border-radius:10px; font:inherit
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid #bfdbfe; border-color:#93c5fd }

/* ---- フッター ---- */
.site-footer{ background:#0b1220; color:#cbd5e1; margin-top:2rem }
.footer-inner{ padding: 1.4rem 0; display:grid; gap:1rem; align-items:center }
.footer-brand{ font-weight:700 }
.footer-nav{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; flex-wrap:wrap }
.footer-nav a{ color:#cbd5e1 }
.footer-nav a:hover{ color:#fff }
copyright{ opacity:.8 }

/* ---- ユーティリティ ---- */
.hide-sm{ display:none }
@media (min-width: 640px){ .hide-sm{ display:inline } }