:root{
  --bg:#0b0c10; --fg:#f4f6fb; --muted:#aab1c2; --brand:#79ffe1; --card:#12141a; --line:#1c2030;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0c10 0%,#0e1117 100%); color:var(--fg); line-height:1.65;
  -webkit-font-smoothing:antialiased
}
.container{width:min(1120px,92%);margin:0 auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== Topbar（Sticky） ===== */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,12,16,.7); border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.nav{display:flex;align-items:center;gap:1rem}
.btn-contact{padding:.55rem .9rem;border:1px solid var(--brand);border-radius:999px}

/* モバイルメニュー */
.menu-toggle{display:none; background:transparent; border:0; width:40px; height:32px; position:relative}
.menu-toggle span{display:block; position:absolute; left:8px; right:8px; height:2px; background:var(--fg); transition:.25s}
.menu-toggle span:nth-child(1){top:9px}
.menu-toggle span:nth-child(2){top:15px}
.menu-toggle span:nth-child(3){top:21px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width: 960px){
  .menu-toggle{display:block}
  .nav{position:absolute; inset:60px 0 auto 0; background:rgba(11,12,16,.98); border-bottom:1px solid var(--line);
    display:none; flex-direction:column; padding:1rem; gap:.8rem}
  .nav.open{display:flex}
}

/* ===== AdBar（非Sticky） ===== */
.adbar{border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0f1219 0%,#0d1016 100%)}
.adbar .container{padding:.6rem 0}
/* AdSense未充填時の黒枠感軽減（枠線をサイトのトーンに） */
.adbar ins.adsbygoogle{border:none;}

/* ===== Hero / Sections ===== */
.hero{padding:5rem 0 3.5rem; border-bottom:1px solid var(--line)}
.hero-inner{display:grid;gap:1.2rem}
.hero h1{font-size:clamp(28px,4.2vw,48px);line-height:1.2;margin:0}
.hero h1 span{color:var(--brand)}
.lead{color:var(--muted);margin:.2rem 0 1rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--fg);color:#0c0d12;padding:.7rem 1rem;border-radius:12px;font-weight:600}
.btn.ghost{background:transparent;border:1px solid var(--fg);color:var(--fg)}
.hero-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.hero-tags span{padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.9rem}

.section{padding:3.2rem 0}
.section.alt{background:linear-gradient(180deg,#0f1219 0%,#0d1016 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-title{font-size:1.6rem;margin:0 0 1.4rem}

.grid{display:grid;gap:1rem}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1rem;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted);margin:.2rem 0 .6rem}
.card ul{padding-left:1.2rem;margin:.3rem 0;color:var(--muted)}

.works{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.work{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;display:block}
.work:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.work-thumb{aspect-ratio:16/9;background:#0b0c12;overflow:hidden;display:grid;place-items:center}
.work-thumb.fallback{background:linear-gradient(135deg,#121621,#1d2233)}
.work-meta{padding:1rem}
.work-meta h3{margin:.2rem 0 .3rem;font-size:1.1rem}
.work-meta p{color:var(--muted);margin:0}

.contact-actions{display:flex;gap:.8rem;flex-wrap:wrap}

.site-footer{border-top:1px solid var(--line);padding:1.2rem 0;margin-top:1.5rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-nav a{color:var(--muted);margin-left:1rem}

.badge{display:inline-block;font-size:.8rem;padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--muted)}


/* 既存: AdBar（非Sticky） */
.adbar{border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0f1219 0%,#0d1016 100%)}
.adbar .container{padding:.6rem 0}
.adbar ins.adsbygoogle{border:none;}

/* 追加: AdSense が未充填のときはバーを潰す */
.adbar.is-empty{
  height:0;
  padding:0;
  border:0;
  overflow:hidden;
}
.adbar.is-empty .container{
  padding:0;
}