/* punomo.dev 入口サイト。ゲームと同じ世界観（クリーム地、平らな色面、直角、影・グラデーションなし） */
:root {
  --bg: #faefdf;
  --paper: #fffaf0;
  --ink: #1b1b1b;
  --ink-soft: #5b5547;
  --red: #dc4535;
  --red-dark: #a31f14;
  --blue: #5a9cc2;
  --green: #4a7a43;
  --yellow: #f2b934;
  --navy: #1b3567;
  --font-display: 'Bebas Neue', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --font: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink);
  background-color: var(--bg);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
.shell { max-width: 1100px; margin: 0 auto; padding: 0 24px; min-height: 100vh; display: flex; flex-direction: column; }
.header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 12px 0; border-bottom: 2px solid var(--ink); }
.brand-link { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-logo { width: 28px; height: 28px; flex-shrink: 0; display: block; }
.brand { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: 0.06em; padding-top: 3px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; font-size: 14px; font-weight: 500; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-dark); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav [aria-current] { font-weight: 700; }
main { flex: 1; }
.article { max-width: 40em; margin: 0 auto; padding: 36px 0 56px; line-height: 1.95; overflow-wrap: anywhere; }
h1, h2 { font-family: var(--font-display); font-weight: 700; margin: 0; }
.article h1 { font-size: 44px; line-height: 1.2; letter-spacing: 0.08em; margin: 0 0 14px; }
.article .lead { margin: 0 0 8px; color: var(--ink-soft); font-weight: 500; }
.article h2 { margin: 44px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font-size: 24px; line-height: 1.4; letter-spacing: 0.06em; }
.article h2::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 10px; background: var(--red); vertical-align: 1px; }
.article p { margin: 0 0 1em; }
.article ul { margin: 0 0 1em; padding-left: 1.3em; }
.article li { margin-bottom: 0.4em; }
.article .note { color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.article dl { margin: 0 0 1em; background: var(--paper); border-top: 4px solid var(--ink); padding: 8px 16px; }
.article dt { font-weight: 700; margin-top: 8px; }
.article dd { margin: 0 0 8px; }
.table-wrap { margin: 16px 0 24px; background: var(--paper); border-bottom: 4px solid var(--ink); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.data-table th { color: var(--paper); background: var(--ink); text-align: left; font-weight: 700; padding: 7px 12px; }
.data-table td { padding: 7px 12px; border-bottom: 2px solid var(--bg); vertical-align: top; }
.bars { display: flex; height: 12px; margin: 20px 0 0; }
.bars i { flex: 1; }
.bars i:nth-child(1) { background: var(--red); }
.bars i:nth-child(2) { background: var(--blue); }
.bars i:nth-child(3) { background: var(--yellow); }
.bars i:nth-child(4) { background: var(--green); }
.bars i:nth-child(5) { background: var(--navy); }
.foot { border-top: 2px solid var(--ink); padding: 16px 0 32px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.foot .foot-name { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.1em; margin-right: auto; }
@media (max-width: 520px) {
  .shell { padding: 0 16px; }
  .article h1 { font-size: 36px; }
  .article h2 { font-size: 21px; }
  .nav { margin-left: 0; }
}