/* Shared look for the text pages (あそびかた / このサイトについて / プライバシー
   ポリシー / お問い合わせ / 更新履歴). Same palette as the hub page so they read
   as part of the same site, but these pages are meant to be READ (and crawled),
   so text is selectable and the page scrolls normally. */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: linear-gradient(180deg, #bfe9ff 0%, #eaf9ff 60%, #eaf9ff 100%);
  background-attachment: fixed;
  font-family: "Yu Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  color: #4a4a2b;
  line-height: 1.8;
}
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 14px 16px; max-width: 900px; margin: 0 auto;
}
.site-header .brand {
  font-size: 18px; font-weight: bold; color: #4a4a2b; text-decoration: none;
  text-shadow: 2px 2px 0 #fff;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.site-nav a {
  font-size: 13px; font-weight: bold; color: #6b5b3a; text-decoration: none;
  background: #fffef2; border: 2px solid #f0c975; border-radius: 20px; padding: 4px 12px;
}
.site-nav a[aria-current="page"] { background: #f0c975; color: #4a3a1a; }

main {
  max-width: 760px; margin: 8px auto 32px; padding: 28px 24px;
  background: #fffef2; border: 4px solid #f0c975; border-radius: 24px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
  main { margin: 8px 12px 24px; padding: 20px 16px; border-radius: 18px; }
}
h1 { font-size: 26px; margin: 0 0 6px; color: #5a4522; }
h2 { font-size: 19px; margin: 28px 0 8px; padding-bottom: 4px; border-bottom: 2px dashed #f0c975; color: #5a4522; }
h3 { font-size: 16px; margin: 18px 0 4px; color: #5a4522; }
p, li { font-size: 15px; }
ul, ol { padding-left: 1.4em; }
li { margin: 4px 0; }
.lead { color: #6b5b3a; margin-top: 0; }
.updated { font-size: 12px; color: #7a8a99; margin-top: 0; }
a { color: #c85f10; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; font-size: 14px; }
th, td { border: 1px solid #e6ddc6; padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: #fff5d6; white-space: nowrap; }
.keycap {
  display: inline-block; min-width: 26px; padding: 1px 6px; margin: 0 2px;
  border: 2px solid #c9b37a; border-bottom-width: 4px; border-radius: 6px;
  background: #fff; font-weight: bold; text-align: center; font-size: 13px;
}
.note {
  background: #fff5d6; border-left: 4px solid #f0c975; padding: 8px 12px; border-radius: 6px;
  font-size: 14px; margin: 12px 0;
}
.cta {
  display: inline-block; margin-top: 8px; font-size: 16px; font-weight: bold; color: #fff;
  background: linear-gradient(180deg, #ffb75e, #ff8c3a); border-radius: 30px;
  padding: 10px 26px; text-decoration: none; box-shadow: 0 4px 0 #c85f10;
}
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #c85f10; }
.site-footer {
  max-width: 900px; margin: 0 auto; padding: 8px 16px 32px; text-align: center;
  font-size: 12px; color: #7a8a99;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 6px; }
.site-footer a { color: #7a8a99; }