:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif; color: #263e3a; background: #f5f3ec; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 24px max(20px, calc((100% - 1120px) / 2)); background: white; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
header > a { font-size: 24px; font-weight: 700; }
a { color: #22675e; text-decoration: none; }
nav { display: flex; gap: 20px; align-items: center; }
main { max-width: 1160px; margin: 0 auto; padding: 50px 20px; }
h1, h2 { overflow-wrap: anywhere; }
.eyebrow { letter-spacing: .16em; font-size: 12px; }
.sharing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 20px; margin: 30px 0; }
.sharing-card { display: flex; flex-direction: column; gap: 12px; background: white; padding: 16px; border: 1px solid #dce3df; border-radius: 3px; text-align: left; overflow-wrap: anywhere; }
.sharing-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
button { font: inherit; color: inherit; cursor: pointer; padding: 12px 20px; border: 1px solid #a7b8b1; border-radius: 3px; background: white; }
button:focus-visible, a:focus-visible { outline: 3px solid #358f7a; outline-offset: 4px; }
dialog { max-width: min(94vw, 1000px); width: 100%; max-height: 94dvh; border: 0; border-radius: 3px; padding: 20px; }
dialog::backdrop { background: #102821cc; }
#sharing-media img, #sharing-media video { display: block; max-width: 100%; max-height: 70dvh; margin: auto; }
[hidden] { display: none !important; }