* { box-sizing: border-box; }
body { margin: 0; color: #17324b; background: #EBF6F5; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.site-header { position: sticky; top: 0; z-index: 100; margin: 0; padding: 24px max(24px, calc((100% - 1092px) / 2)) 20px; background: #fff; }
.site-logo { display: block; width: min(100%, 540px); height: auto; }
main { max-width: 1140px; margin: 0 auto; padding: 0 24px 64px; }
h1 { margin: 0 0 32px; font-size: clamp(1.25rem, 3.5vw, 1.875rem); line-height: 1.65; text-align: center; overflow-wrap: anywhere; }
.notice { margin: 0; padding: 32px 0; }
.notice p { margin: 0 0 16px; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.links-title { margin: 0 0 16px; padding-left: 12px; border-left: 4px solid #1366b2; font-size: clamp(1.125rem, 3vw, 1.375rem); line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.systemList { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.systemList li { min-width: 0; }
.systemList a { display: flex; height: 100%; align-items: center; border: 1px solid #d9e1e8; background: #fff; text-decoration: none; }
.systemList a:hover { opacity: .8; }
.systemList a:focus-visible { outline: 3px solid #1366b2; outline-offset: 4px; }
.systemList img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .site-header { padding: 20px 16px 12px; } main { padding: 0 16px 40px; } h1 { margin-bottom: 24px; } .systemList { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.updates { margin: 0; }
.info-section { padding: 28px 0; }
.info-section h2 { margin: 0 0 16px; padding-left: 12px; border-left: 4px solid #1366b2; font-size: clamp(1.125rem, 3vw, 1.375rem); line-height: 1.6; }
.info-list { margin: 0; padding-left: 1.5em; }
.info-list li { margin: 10px 0; line-height: 1.9; overflow-wrap: anywhere; }
.info-list a { color: #075ba2; text-decoration: underline; text-underline-offset: .2em; }
.info-list a:hover { color: #17324b; }
.info-list a:focus-visible { outline: 3px solid #1366b2; outline-offset: 3px; }

.notice p:last-child { margin-bottom: 0; }
.related-section { padding: 28px 0; }
/* 白背景は画面全幅、本文は共通の幅に揃える */
.info-section[aria-labelledby="events-title"], .related-section {
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
@media (max-width: 600px) {
  .notice, .info-section, .related-section { padding-top: 24px; padding-bottom: 24px; }
}

.site-footer { background: #EBF6F5; }
.footer-inner { max-width: 1140px; margin: 0 auto; padding: 36px 24px 48px; }
.footer-contact { max-width: 420px; }
.footer-logo { display: block; width: 100%; height: auto; }
.footer-name { margin: 12px 0 16px; font-size: 1rem; font-weight: 700; line-height: 1.8; }
.footer-address { font-style: normal; font-size: 1rem; line-height: 2; overflow-wrap: anywhere; }
.footer-address p { margin: 0 0 8px; }
.footer-address p:last-child { margin-bottom: 0; }
.footer-address a { color: inherit; text-decoration: none; }
.footer-address a:focus-visible { outline: 3px solid #1366b2; outline-offset: 3px; }
@media (max-width: 600px) { .footer-inner { padding: 28px 16px 36px; } }