:root { color-scheme: light; color: #1E1C19; background: #F3EFE6; font-family: 'Zen Kaku Gothic New', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 480px; margin: 0 auto; padding: 48px 32px; line-height: 1.9; }
h1, h2 { font-family: 'Shippori Mincho', serif; font-weight: 600; }
h1 { margin: 24px 0 16px; font-size: 26px; }
h2 { margin: 32px 0 12px; font-size: 18px; }
p, ol, ul { font-size: 14px; }
ol, ul { padding-left: 1.5em; }
li { margin: 12px 0; }
a { color: #6B655C; text-underline-offset: 4px; }
nav { font-size: 13px; }
/* アプリへ進むボタン。形と大きさは「送る」と揃え、塗りで主役にする（横幅いっぱいだと本文を区切る帯に見える） */
.start { display: block; width: fit-content; margin: 32px auto 0; padding: 10px 32px; border: 1px solid #1E1C19; border-radius: 24px; background: #1E1C19; color: #F3EFE6; text-align: center; text-decoration: none; font-family: 'Shippori Mincho', serif; font-size: 15px; }
/* 「円をえがく」の下に「これまで」。アプリの行き先（今日・これまで）を一か所にまとめる */
.back { margin: 12px 0 0; font-size: 13px; text-align: center; }
.back a { display: inline-block; padding: 8px; }
.owner { margin-top: 48px; font-size: 12px; color: #8A8378; text-align: center; }
/* 問い合わせ。送信結果は contact-relay が #contact-sent / #contact-error を付けて戻すので :target で出す */
.contact { margin-top: 56px; }
.contact label { display: block; margin: 16px 0 6px; font-size: 13px; color: #6B655C; }
.contact textarea, .contact input { display: block; width: 100%; padding: 10px 12px; border: 1px solid #CFC8BB; border-radius: 6px; background: #FBF9F4; color: inherit; font: inherit; font-size: 16px; }
.contact textarea { min-height: 8em; resize: vertical; }
.contact textarea:focus-visible, .contact input:focus-visible { outline: 2px solid #A8321F; outline-offset: 1px; }
.contact .note { margin: 8px 0 0; font-size: 12px; color: #8A8378; }
.contact button { display: block; margin: 20px auto 0; padding: 10px 32px; border: 1px solid #1E1C19; border-radius: 24px; background: transparent; color: inherit; font-family: 'Shippori Mincho', serif; font-size: 15px; cursor: pointer; }
.contact button:focus-visible { outline: 2px solid #A8321F; outline-offset: 3px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { display: none; margin: 16px 0 0; padding: 12px 16px; border-radius: 6px; background: #FBF9F4; font-size: 14px; }
.result:target { display: block; }
#contact-error { color: #A8321F; }
a:focus-visible { outline: 2px solid #A8321F; outline-offset: 4px; }
nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
/* アプリの2つの画面（下部タブと同じ名前）。左に並べる */
.app-links { display: flex; gap: 20px; white-space: nowrap; }
.app-links a { padding: 8px 0; }
.languages { white-space: nowrap; }
.languages a { padding: 8px 4px; text-decoration: none; }
/* アプリ内の切替と同じく、いまの言語だけ墨色・下線で示す */
.languages a[aria-current="page"] { color: #1E1C19; text-decoration: underline; }