/* fex-info-jp 共通スタイル */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:#0f1216; --card:#161a20; --text:#e7e9ee; --muted:#a8b0be; --accent:#5cc1ff;
  --ok:#34d399; --warn:#f59e0b; --danger:#ef4444;
}

html, body {
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Segoe UI Emoji";
  line-height:1.6;
}

/* アクセシビリティ */
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* レイアウト */
header { padding:48px 20px 20px; text-align:center; }
header h1 { margin:0; font-size:clamp(1.6rem, 2.6vw, 2.4rem); }
header p { margin:12px auto 0; max-width:900px; color:var(--muted); line-height:1.7; }

.wrap { max-width:1024px; margin:0 auto; padding:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }

.card { background:var(--card); border:1px solid #263041; border-radius:14px; padding:18px; }
.card h2 { margin:0 0 10px; font-size:1.1rem; }
.card p, .card li { color:var(--muted); line-height:1.8; }

/* responsibility-voices 用のラッパー */
article { background:var(--card); border:1px solid #263041; border-radius:14px; padding:22px; }
/* 引用スタイル（voices） */
.quote { border-left:3px solid #304256; padding-left:12px; margin:12px 0; color:#cfd6e2; }

/* 見出し（ガイド用の少し大きめ） */
h2 { font-size:1.2rem; margin:0 0 10px; }
h3 { font-size:1.05rem; margin:14px 0 6px; color:#eaf2ff; }

/* ユーティリティ */
ul { padding-left:18px; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.8rem; border:1px solid #304256; color:var(--muted); }
.box { background:#121720; border:1px solid #253042; border-radius:12px; padding:14px; margin:14px 0; }

/* カラークラス */
.accent { color:var(--accent); }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.danger { color:var(--danger); }

/* セクション（responsibility.html向け） */
.section { margin:28px 0; }
.section h3 { margin:0 0 8px; font-size:1.05rem; color:#eaf2ff; }
.checklist li { margin:8px 0; }

/* フッター */
.footer { margin:28px 0 60px; color:var(--muted); font-size:.9rem; text-align:center; }

/* ナビ（guide向け） */
nav { display:flex; gap:12px; justify-content:center; margin:8px 0 24px; flex-wrap:wrap; }
nav a { background:#122133; border:1px solid #2a3a52; padding:8px 12px; border-radius:10px; }
nav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* レスポンシブ微調整 */
@media (max-width:720px) {
  header { padding:36px 16px 16px; }
  .wrap { padding:16px; }
}

/* 低視覚効果環境の安全配慮 */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto; }
}