:root{
      --bg:#0f1115; --ink:#e9edf1; --muted:#aab4bf; --brand:#e8a21f; --card:#161922;
      --accent:#2a2f3a; --max:1200px;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.7}
    a{color:var(--ink);text-decoration:none}
    header{position:sticky;top:0;background:rgba(15,17,21,.8);backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid #232734;z-index:40}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
    .bar{display:flex;align-items:center;justify-content:space-between;height:62px}
    .logo{font-weight:700;letter-spacing:.04em}
    .tel{font-variant-numeric:tabular-nums}
    nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
    nav a{color:var(--muted);font-size:14px}
    nav a:hover{color:var(--ink)}
    .hero{position:relative;min-height:62vh;display:grid;place-items:center;border-bottom:1px solid #232734}
    .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(1.1) brightness(.78)}
    .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
    .hero .copy{position:relative;z-index:2;max-width:var(--max);padding:60px 20px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
    .tag{display:inline-block;background:rgba(232,162,31,.16);border:1px solid rgba(232,162,31,.35);color:#ffd88a;padding:6px 10px;border-radius:100px;font-size:12px;letter-spacing:.08em}
    h1{font-size: clamp(26px,4.2vw,44px);margin:.6rem 0 0}
    .lead{color:#d7dde6;margin:.6rem 0 1.2rem;font-size: clamp(14px,2.2vw,18px)}
    .cta{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #2e3442;background:#1a1f2b}
    .btn.primary{background:linear-gradient(180deg,#f2b544,#d89214);border-color:#c8840f;color:#15171d;font-weight:700}
    section{padding:64px 0;border-bottom:1px solid #232734}
    h2{font-size: clamp(20px,3vw,28px);margin:0 0 18px}
    .kicker{color:var(--muted);font-size:13px;letter-spacing:.08em}
    .grid{display:grid;gap:18px}
    .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
    .card{background:var(--card);border:1px solid var(--accent);border-radius:16px;padding:18px}
    .card h3{margin:.2rem 0 .4rem;font-size:18px}
    .muted{color:var(--muted)}
    .list{display:grid;gap:8px}
    .list li{background:#12151d;border:1px solid var(--accent);padding:10px 12px;border-radius:10px}
    .gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .thumb{aspect-ratio:4/3;background:#0c0e13;border:1px solid var(--accent);border-radius:12px;display:grid;place-items:center;color:#6c7686}
    .ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
    .two{grid-template-columns:1.2fr 1fr}
    .map{width:100%;aspect-ratio:16/10;border:1px solid var(--accent);border-radius:12px;overflow:hidden}
    footer{padding:28px 0;color:#97a3b3}
    .footgrid{display:grid;gap:12px;grid-template-columns:1fr auto}
    .fine{font-size:12px;color:#8f9aa9}
    @media (max-width:820px){ .two{grid-template-columns:1fr} }

    /* ==== モバイル専用：ヘッダー／フッター可読性改善 ==== */
@media (max-width: 768px) {

  /* ヘッダー全体：折返し許可＋高さ自動 */
  header .bar{
    display:flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    height:auto;
    padding:10px 0;
  }

  /* ロゴ：行高詰め・サイズ控えめ・横幅を確保 */
  .logo{
    font-size:16px;
    line-height:1.2;
    flex: 1 1 auto;        /* 幅を確保して極端な縦割れを防ぐ */
    min-width: 140px;
    word-break: keep-all;  /* 逐字改行を抑止 */
  }

  /* ナビ：2段までの折返しを許可 */
  nav ul{
    flex-wrap: wrap;
    gap:10px;
    width:100%;
    order: 2;              /* ロゴの次に表示 */
    margin-top: 2px;
  }
  nav a{ font-size:13px; }

  /* TEL は1行で右寄せ（ナビの下に配置） */
  .tel{
    order: 3;
    width:100%;
    text-align:right;
    font-size:14px;
    line-height:1.2;
  }

  /* ページ上部の余白（ヘッダーが高くなる分の見栄え調整） */
  main{ margin-top: 4px; }

  /* フッター：1カラム化して中央寄せ */
  .footgrid{
    grid-template-columns: 1fr;
    gap:8px;
    text-align:center;
  }
  footer .fine{
    font-size:13px;
    line-height:1.6;
  }
}
/* ==== モバイル専用：ヘッダー／フッター可読性改善（works/index 共通） ==== */
@media (max-width: 768px) {

  /* ヘッダー行：折返し許可＋高さ自動（最優先で上書き） */
  header .wrap.bar{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* ロゴ：逐字改行を抑止し、横幅を確保 */
  header .wrap.bar .logo,
  header .wrap.bar .logo a{
    font-size: 16px !important;
    line-height: 1.2 !important;
    flex: 1 1 auto !important;
    min-width: 160px !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* ナビ：2段までの折返し可、横幅いっぱいに配置 */
  header nav ul{
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    order: 2 !important;
    margin: 2px 0 0 !important;
  }
  header nav a{ font-size: 13px !important; }

  /* TELを1行で右寄せ（ナビの下に） */
  header .tel{
    order: 3 !important;
    width: 100% !important;
    text-align: right !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* ヘッダーが高くなった分の余白調整（必要に応じて） */
  main{ margin-top: 6px !important; }

  /* フッター：1カラム中央寄せ＋逐字改行の抑止 */
  .footgrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: center !important;
  }
  footer .fine{
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;   /* CJKの逐字改行を弱める */
    white-space: normal !important;
  }
  /* フッター内の手動改行 <br> があれば非表示にして横一列に */
  footer .fine br{ display: none !important; }
}

/* ==== works.php 専用：モバイルのヘッダ／フッタ補正（PC非適用） ==== */
@media (max-width: 768px) {

  /* ヘッダー行：折返し可＋高さ自動（確実に上書き） */
  header .wrap.bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* ロゴは1行で切らさない／横幅を確保 */
  header .wrap.bar .logo,
  header .wrap.bar .logo a {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 160px !important;
  }

  /* ナビは文字リンク（ボタン化せず）、2段まで折返し */
  header nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    order: 2 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }
  header nav li { list-style: none !important; }
  header nav a {
    display: inline-block !important;
    padding: 6px 8px !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: var(--muted) !important;
  }

  /* TEL は1行・右寄せでナビの下 */
  header .tel {
    order: 3 !important;
    width: 100% !important;
    text-align: right !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* フッターは縦1カラムに強制（列幅の偏りで“1文字縦割れ”になるのを防ぐ） */
  .footgrid {
    display: block !important;                /* ← 最も確実 */
    text-align: center !important;
    margin-top: 6px !important;
  }
  .footgrid .fine {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
    white-space: normal !important;
    margin: 4px 0 !important;
  }
  .footgrid .fine br { display: none !important; } /* 手動改行があれば無効化 */
}