:root { color-scheme: light; --orange: #f39200; --green: #58ae31; --ink: #173421; --paper: #f8faf6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
main { width: min(680px, calc(100% - 32px)); margin: 48px auto; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 48px rgb(24 61 32 / 12%); }
header { padding: 34px 34px 26px; background: linear-gradient(135deg, #fffaf1, #fff); color: var(--ink); border-bottom: 6px solid var(--orange); }
header img { display: block; width: min(210px, 68vw); height: auto; margin-bottom: 26px; }
h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.1; }
header p { margin: 12px 0 0; font-size: 1.08rem; color: #31503a; }
section { padding: 30px 34px; }
h2 { margin: 0 0 14px; font-size: 1.25rem; }
ul { padding: 0; margin: 20px 0; list-style: none; display: grid; gap: 12px; }
li { padding: 14px 16px; border-radius: 12px; background: #f4f8ef; border-left: 5px solid var(--orange); }
.notice { margin: 0; padding: 16px; border-radius: 12px; background: #fff5e4; color: #704000; }
footer { padding: 24px 34px 30px; border-top: 1px solid #e7ece4; font-size: .92rem; }
a { color: #297b1d; font-weight: 700; }
.links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
@media (max-width: 560px) { main { width: calc(100% - 24px); margin: 24px auto; } header, section, footer { padding-left: 22px; padding-right: 22px; } }