:root{
  --bg:#fafafa;
  --text:#222;
  --muted:#666;
  --border:#e5e5e5;
  --accent:#0070f3; /* 青系アクセント */
  --container: 880px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --text:#e7e7e7;
    --muted:#a0a0a0;
    --border:#24262b;
    --accent:#4ea1ff;
  }
}

*{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;
  background:var(--bg); color:var(--text); line-height:1.8;
}

.container{max-width:var(--container); padding:0 16px; margin:0 auto}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* アクセント用（ヒーローの名前など） */
.accent{color:var(--accent)}

.site-header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; backdrop-filter: blur(8px);
  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
  z-index:10;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.brand{font-weight:700; color:var(--text)}
.nav a{margin-left:16px; color:var(--text)}
.nav a:hover{color:var(--accent)}

.hero{padding:48px 16px}
.hero h1{font-size:clamp(24px, 4vw, 36px); margin:0 0 8px}
.lead{font-size:18px; margin:0 0 8px}
.social a{margin-right:12px}

.section{padding:32px 0; border-top:1px solid var(--border)}
.section h2{margin:0 0 16px; font-size:22px}

.list{list-style:none; padding:0; margin:0}
.list-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border:1px solid var(--border); border-radius:10px;
  background:#fff1; /* 薄い背景（ライト/ダーク両対応） */
}
.list li + li{margin-top:12px}
.title{font-weight:600}
.meta{color:var(--muted); font-size:14px}

.embed{margin:12px 0}
/* SpeakerDeck/YouTube などの埋め込みは比率固定でレスポンシブ */
.embed iframe{
  width:100%;
  aspect-ratio: 16 / 9;   /* 縦横比を維持 */
  height:auto;
  border:0;
  border-radius:10px;
  background:#000;
}
/* aspect-ratio 未対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 1 / 1) {
  .embed{ position:relative; padding-top:56.25%; } /* 16:9 */
  .embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
}

.contact-form{display:grid; gap:12px; max-width:520px}
.contact-form label{display:grid; gap:6px; font-size:14px}
.contact-form input,
.contact-form textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text);
}

/* placeholder の色を統一 */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--muted);
  opacity:.9;
}

/* Autofill（Safari/Chrome）の文字色を統一 */
.contact-form input:-webkit-autofill,
.contact-form textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition: background-color 9999s; /* 黄背景のチラつき回避 */
}

.contact-form button{
  padding:10px 16px; border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-weight:600; cursor:pointer;
}
.contact-form button:hover{opacity:.9}

/* ダークモード時の入力欄の地色を調整（任意だけど見やすい） */
@media (prefers-color-scheme: dark){
  .contact-form input,
  .contact-form textarea{
    background:#121418;
  }
}

.muted{color:var(--muted); font-size:12px}

.site-footer{
  margin-top:32px; border-top:1px solid var(--border);
  padding:20px 0; text-align:center; color:var(--muted);
}

/* モバイル最適化（デフォで1カラム、余白大きめ） */

/* hero の naco を白にする*/
.accent--white { color:#fff; }

/* 薄い影を足す */
.hero .accent--white { text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Blogのリスト間のすき間を増やす */
#blog .list {
  display: grid;
  gap: 18px; 
}

/* ===== 黒テーマを常時固定 ===== */
:root{
  --bg:#000;           /* 背景を黒で固定 */
  --text:#e7e7e7;      /* 文字は明るいグレー */
  --muted:#a0a0a0;     /* 補助文字色 */
  --border:#24262b;    /* 罫線 */
  --accent:#4ea1ff;    /* アクセント（お好みで） */
}

/* 入力欄も黒系に（上書き） */
.contact-form input,
.contact-form textarea{
  background:#121418;
  color:var(--text);
}