/* townofdoodles.app の ページ ぜんぶで つかう 見た目（アプリの 紙と インクの いろに そろえる）。
   外の フォント・スクリプトは よまない（_headers の Content-Security-Policy が 自分の サイトの ものだけ ゆるす） */
:root {
  --paper: #FFFBF1;
  --card: #FFFFFF;
  --ink: #3A3530;
  --ink-soft: #6E6357;
  --line: #E8DFCC;
  --red: #D9573F;
  --sky: #3478CF;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #22201D; --card: #2C2926; --ink: #F3EDE2; --ink-soft: #C4B8A6; --line: #45403A; --red: #F07A62; --sky: #7FB2F0; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.85; overflow-wrap: anywhere;
}
a { color: var(--sky); }
main { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }
header.site { max-width: 760px; margin: 0 auto; padding: 16px 16px 0; display: flex; align-items: center; gap: 10px; }
header.site a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; }
header.site img { width: 36px; height: 36px; border-radius: 9px; }
h1 { font-size: 1.6rem; line-height: 1.4; margin: .6em 0 .4em; }
h2 { font-size: 1.2rem; line-height: 1.5; margin: 2em 0 .5em; padding-top: .6em; border-top: 2px dashed var(--line); }
h3 { font-size: 1.02rem; margin: 1.4em 0 .3em; }
p, li { font-size: 1rem; }
.lead { font-size: 1.1rem; }
.muted { color: var(--ink-soft); font-size: .92rem; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 18px 0; }
.hero { text-align: center; padding-top: 12px; }
.hero img { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
.hero h1 { margin-top: .4em; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }
.store {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 170px; min-height: 52px;
  padding: 6px 16px; border-radius: 12px; background: #111; color: #fff; text-decoration: none; line-height: 1.25;
}
.store small { font-size: .7rem; opacity: .85; }
.store b { font-size: 1.05rem; }
.store.is-off { background: transparent; color: var(--ink-soft); border: 2px dashed var(--line); pointer-events: none; }
.btn {
  display: inline-block; min-height: 48px; padding: 11px 24px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--red); color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 3px 0 var(--ink);
}
.btn[hidden] { display: none; }
dl.law { display: grid; grid-template-columns: minmax(8em, 30%) 1fr; margin: 0; border-top: 1px solid var(--line); }
dl.law dt, dl.law dd { margin: 0; padding: 12px 8px; border-bottom: 1px solid var(--line); }
dl.law dt { font-weight: 800; }
@media (max-width: 520px) {
  dl.law { grid-template-columns: 1fr; }
  dl.law dt { border-bottom: 0; padding-bottom: 0; }
}
.lang { margin-top: 3em; }
nav.links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 24px 0 0; }
footer { max-width: 760px; margin: 0 auto; padding: 20px 16px 36px; color: var(--ink-soft); font-size: .85rem; text-align: center; border-top: 1px solid var(--line); }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 8px; }