* { box-sizing: border-box; }
html { touch-action: manipulation; }
body {
  margin: 0; min-height: 100vh; background: #f3eee3; color: #1f1b16;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image: radial-gradient(rgba(31, 27, 22, 0.05) 1px, transparent 1px); background-size: 14px 14px;
}
a { color: inherit; }
.hero, main, footer { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.hero { padding-top: 36px; padding-bottom: 20px; text-align: center; }
.kicker { margin: 0; font-size: 13px; letter-spacing: 0.2em; color: #7a6f60; }
.hero h1 {
  margin: 6px 0 0; font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "Yu Mincho", serif;
  font-size: 72px; font-weight: 900; line-height: 1.1; letter-spacing: 0.08em;
}
.hero h1::after { content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; background: #c8361d; }
.lead { margin: 16px 0 0; font-size: 16px; line-height: 1.7; }
.progress {
  display: inline-block; margin: 16px 0 0; padding: 6px 14px; border: 2px solid #c8361d; border-radius: 999px;
  color: #c8361d; font-size: 15px; font-weight: 700;
}
.progress[hidden] { display: none; }
.progress b { font-size: 20px; }

.works { display: grid; gap: 18px; padding: 8px 0 28px; }
.work { background: #fffdf8; border: 1px solid #ddd3c2; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 0 #ddd3c2; }
.work .shot img { display: block; width: 100%; height: auto; }
.work .body { padding: 12px 14px 16px; }
.work .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.work .no { font-size: 13px; font-weight: 700; color: #7a6f60; letter-spacing: 0.1em; }
.work h2 { margin: 4px 0 0; font-size: 26px; font-weight: 900; }
.work h2 a { text-decoration: none; }
.work .tag { margin: 4px 0 0; color: #5b5246; font-size: 15px; line-height: 1.6; }
.btns { display: flex; gap: 10px; margin-top: 14px; }
.btns a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px;
  border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 16px; text-align: center;
}
.btns .play { background: #1f1b16; color: #fffdf8; }
.btns .hint { border: 2px solid #1f1b16; font-size: 14px; }

.marks { display: inline-flex; gap: 6px; }
.mark { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.mark.new { background: #c8361d; color: #fff; }
.mark.done { border: 2px solid #c8361d; color: #c8361d; transform: rotate(-4deg); }
.mark.seen { background: #e7dfd0; color: #5b5246; }

.help, .older { padding: 20px 0; border-top: 1px dashed #c9bda8; }
.help h2, .older h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.help p { margin: 6px 0 0; font-size: 15px; line-height: 1.7; }
.older-list { display: grid; gap: 10px; }
.old { display: flex; gap: 12px; align-items: center; text-decoration: none; background: #fffdf8; border: 1px solid #ddd3c2; border-radius: 10px; overflow: hidden; }
.old img { width: 132px; height: auto; flex: none; display: block; }
.old .t { padding: 8px 10px 8px 0; min-width: 0; }
.old .name { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 16px; }
.old .tag { display: block; margin-top: 2px; font-size: 12px; color: #5b5246; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

footer { display: grid; gap: 10px; padding-top: 12px; padding-bottom: 48px; text-align: center; }
footer a { display: block; padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 800; }
.follow { background: #1f1b16; color: #fffdf8; }
.follow span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #cfc6b6; }
.note { border: 2px solid #1f1b16; }
.back { color: #7a6f60; font-weight: 600; text-decoration: underline; }