/* ===== Reset & base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:#111; background:#fff; line-height:1.75; }
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }

:root{
  --blue:#2f8fff; --ink:#0d1321; --muted:#6b7689; --line:#e7ecf3; --bg:#fbfcff;
  --wrap:1120px; --radius:14px; --shadow:0 6px 24px rgba(20,33,61,.08);
  --gutter:clamp(16px,5vw,32px);
}

/* ===== Layout ===== */
.container{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(40px,6vw,72px) 0; }

.h1{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:.02em}
.h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:.02em}
.h3{font-size:clamp(18px,2.2vw,22px);font-weight:700}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:24px 0}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border:1px solid var(--line);border-radius:999px}
.btn.primary{background:#1a5be6;color:#fff;border-color:#1a5be6}
.tag{display:inline-flex;gap:.5em;align-items:center;padding:.25em .7em;border-radius:999px;background:#eaf3ff;color:#1a5be6;font-weight:700}
.stack > *{display:block;margin:12px 0}

/* ===== Header ===== */
.header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:saturate(1.1) blur(6px); }
.header .bar{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.08em; }
.logo-mark{ width:28px; height:28px; border-radius:6px; background:linear-gradient(135deg,#9ed8ff,#d4e9ff); box-shadow:inset 0 0 0 5px #fff,0 1px 2px rgba(0,0,0,.06); }

/* PC Global nav */
.gnav{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.gnav > li{ position:relative; }
.gnav a{ padding:.6em .9em; border-radius:10px; }
.gnav a:hover{ background:#f6f9ff; }

/* Dropdown (PC) */
.dropdown{ position:relative; }
.dropdown-panel{ position:absolute; inset:calc(100% + 8px) auto auto 0; min-width:560px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px; display:none; z-index:1200; }
.dropdown.open > .dropdown-panel{ display:block; }
.dropdown-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.dropdown h4{ margin:0 0 8px 0; color:#1a5be6; }
.dropdown a.item{ display:block; padding:8px; border-radius:10px; }
.dropdown a.item:hover{ background:#f6f9ff; }

/* Hamburger (hidden on PC) */
.hamburger{ display:none; border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }

/* ===== Footer ===== */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding:40px 0; }
.footer .grid{ display:grid; grid-template-columns:180px 1fr; gap:24px; align-items:center; }
.footer small{ color:var(--muted); }

/* ===== Helpers ===== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.card{ border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff; }
.link-card{ display:block; color:inherit; text-decoration:none; }

/* ===== Responsive (PC->SP) ===== */
@media (max-width:960px){
  .dropdown-panel{ min-width:min(92vw,680px); }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .hamburger{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; padding:0; margin-left:auto; -webkit-tap-highlight-color:transparent; position:relative; z-index:1001; }
  .gnav{ display:none; }
}

/* ===== CREATIVE: Works grid ===== */
.creative-section{ padding:clamp(28px,5vw,44px) 0; border-top:1px solid var(--line); }
.c-sec-ttl{ font-size:clamp(20px,2.4vw,24px); font-weight:900; letter-spacing:.04em; margin:0 0 10px; }
.c-sec-lead{ color:#5b6b7c; margin:0 0 16px; }
.work-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.news-card{ display:block; color:inherit; text-decoration:none; }
.news-thumb{ aspect-ratio:4/3; background:#f6f8fc; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:0 0 8px; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.news-cap-title{ font-size:14px; font-weight:800; color:#24313c; line-height:1.5; }
.card-dummy{ display:block; padding:14px; border:1px dashed #cfe0ff; border-radius:12px; background:#f8fbff; text-align:center; color:#6a7a8a; font-weight:700; }
.card-dummy .news-thumb{ border-style:dashed; background:#fbfdff; }
.card-dummy small{ display:block; font-weight:600; color:#8aa0bc; }
@media (max-width:960px){ .work-grid{ grid-template-columns:1fr; gap:14px; } }

/* =========================================================
   Mobile Menu (single source of truth)
   - #mobileMenu はヘッダー直後に1つだけ
   - JS(main.js) が .open / body.menu-open を付け外し
   ========================================================= */

/* ヘッダーは常に最前面（ハンバーガーを押せる） */
.header{ z-index:1000; }

@media (max-width:960px){
  /* フルオーバーレイ（ヘッダーの下から出す） */
  #mobileMenu{
    position:fixed;
    top:68px; left:0; right:0; bottom:0;           /* 画面全体からヘッダー分だけ下げる */
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 12px 28px rgba(20,33,60,.12);
    z-index:999;                                    /* ヘッダー(<1000)より低くしない */

    padding:16px 16px 40px;
    overflow-y:auto;

    /* 初期は隠す（transform/opacityで制御） */
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:transform .28s ease, opacity .28s ease;
  }
  /* 開いた状態 */
  #mobileMenu.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* メニュー内の見た目 */
  #mobileMenu > a,
  #mobileMenu .item,
  #mobileMenu .dropdown > a{
    display:block;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    color:#1e2a39; font-weight:700; text-decoration:none;
  }
  #mobileMenu .dropdown{ position:static; }
  #mobileMenu .dropdown-panel{ display:block; border:none; padding:0; background:transparent; box-shadow:none; }

  /* 背面スクロール停止 */
  body.menu-open{ overflow:hidden; touch-action:none; }
}

/* PC幅ではメニュー自体を見せない（残留対策） */
@media (min-width:961px){
  #mobileMenu{ display:none !important; }
}