* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #14354d; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
/* 項目間は、大見出し1行の高さ約2.5個分（標準文字サイズで120px）空けます。 */
main { min-height: 100vh; min-height: 100svh; margin: auto; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 7.5rem; }
.section, .page-header { max-width: 732px; }
.page-header { width: 100%; display: grid; justify-items: center; gap: 20px; text-align: center; }
.logo { display: block; width: min(320px, 100%); height: auto; }
.section { width: 100%; }
.section, .page-header, .slideshow { scroll-margin-top: 80px; }
h1, h2 { margin: 0; font-size: 2.25rem; text-align: center; }
h2 { margin-bottom: 20px; }
h3, p { margin: 0; }
.card-list { display: grid; gap: 14px; }
.social-link, .card { display: grid; gap: 8px; padding: 20px 24px; border: 1px solid #cbdbe7; border-radius: 12px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.social-link:hover, .sidebar-links a:hover { background: #f0f6fa; border-color: #07558e; }
a:focus-visible, button:focus-visible { outline: 3px solid #07558e; outline-offset: 4px; }
.platform { color: #07558e; font-size: 1.15rem; font-weight: 700; }
.account { font-size: .9rem; line-height: 1.7; }
.link-label { color: #064e83; font-weight: 600; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.multiline { white-space: pre-line; line-height: 1.8; overflow-wrap: anywhere; }
.project-image { display: block; width: 100%; height: auto; }
dl { margin: 8px 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; line-height: 1.7; }
dt { font-weight: 600; }
dd { margin: 0; white-space: pre-line; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 480px) { main { padding: 32px 20px; } .logo { width: min(240px, 100%); } .social-link, .card { padding: 18px; } dl { grid-template-columns: 1fr; gap: 4px; } dd { margin-bottom: 8px; } }

/* サイドバー：PC・スマートフォンとも左上のボタンで開閉 */
main.has-sidebar { padding-top: 96px; }
button { font: inherit; cursor: pointer; }
.menu-toggle { position: fixed; top: 16px; left: 16px; z-index: 10; min-height: 44px; padding: 10px 16px; border: 1px solid #cbdbe7; border-radius: 10px; background: #fff; color: #064e83; box-shadow: 0 2px 12px #14354d12; }
.sidebar { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, 88vw); max-width: none; height: 100%; height: 100dvh; max-height: none; padding: 24px 20px; border: 0; background: #fff; color: #14354d; overflow-y: auto; overscroll-behavior: contain; box-shadow: 8px 0 32px #0002; }
.sidebar::backdrop { background: #102c4566; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.sidebar-header h2 { font-size: 1.25rem; margin: 0; }
.menu-close { min-height: 44px; padding: 8px 12px; color: #064e83; background: #f0f6fa; border: 1px solid #cbdbe7; border-radius: 8px; }
.sidebar-links { display: grid; gap: 12px; }
.sidebar-links a { display: block; padding: 14px 16px; border: 1px solid #cbdbe7; border-radius: 10px; color: #064e83; text-decoration: none; overflow-wrap: anywhere; }
body.sidebar-open { overflow: hidden; }

.event-details { width: 100%; padding: 20px; background: #f0f6fa; border-radius: 12px; text-align: left; overflow-wrap: anywhere; }
.access-map { margin: 0; }
.map-image { display: block; width: 100%; height: auto; border: 1px solid #cbdbe7; border-radius: 8px; }
.map-credit { margin-top: 10px; font-size: .875rem; color: #456176; text-align: right; }
.platform { display: flex; align-items: center; gap: 12px; }
.social-icon { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }

/* マップ全体を中央に置き、SNSは画面幅によらず3列で表示 */
.access-map { width: 100%; margin-inline: auto; }
.access-map > a { display: block; width: 100%; margin-inline: auto; }
.map-image { max-width: 100%; margin-inline: auto; object-fit: contain; }
.social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.social-grid .social-link { min-width: 0; align-content: start; padding: 16px; }
.social-grid .platform { flex-wrap: wrap; gap: 8px; }
.subheading { margin: 18px 0 4px; font-size: 1rem; }
@media (max-width: 480px) {
  .social-grid { gap: 8px; }
  .social-grid .social-link { padding: 10px 8px; }
  .social-grid .platform { font-size: .85rem; }
  .social-grid .account, .social-grid .link-label { font-size: .75rem; }
}

.news-date { color: #456176; font-size: .875rem; }
.news-list { border: 1px solid #cbdbe7; border-radius: 12px; overflow: hidden; }
.news-disclosure + .news-disclosure { border-top: 1px solid #cbdbe7; }
.news-disclosure summary { padding: 20px 24px; cursor: pointer; background: #f5f9fc; overflow-wrap: anywhere; }
.news-disclosure summary h3 { display: inline; font-size: 1.1rem; }
.news-disclosure summary:focus-visible { outline: 3px solid #07558e; outline-offset: -3px; }
.news-disclosure .project-body { padding: 20px 24px; }
@media (max-width: 480px) { .news-disclosure summary, .news-disclosure .project-body { padding: 18px; } }
.project-disclosure { border: 1px solid #cbdbe7; border-radius: 12px; overflow: hidden; }
.project-disclosure summary { padding: 20px 24px; cursor: pointer; color: #14354d; background: #f5f9fc; }
.project-disclosure summary h3 { display: inline; font-size: 1.1rem; }
.project-disclosure summary:focus-visible { outline: 3px solid #07558e; outline-offset: -3px; }
.project-disclosure[open] summary { border-bottom: 1px solid #cbdbe7; }
.project-body { display: grid; gap: 12px; min-width: 0; }
.project-disclosure .project-body { padding: 20px 24px; }
@media (max-width: 480px) { .project-disclosure summary, .project-disclosure .project-body { padding: 18px; } }

.event-details { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.event-details dt:not(:first-child) { margin-top: 12px; }
.event-details dd { width: 100%; margin: 0; }
.news-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.news-controls select { font: inherit; min-height: 44px; padding: 8px; background: white; color: #14354d; border: 1px solid #cbdbe7; border-radius: 8px; max-width: 100%; }
.news-controls select:focus-visible { outline: 3px solid #07558e; outline-offset: 3px; }
.exhibit-list { display: grid; gap: 12px; }

/* 写真全体が見える中央配置。縦横比が違う画像でもページが跳ねません。 */
.slideshow { width: calc(100% + 48px); display: grid; justify-items: center; gap: 10px; }
@media (max-width: 480px) { .slideshow { width: calc(100% + 40px); } }
.slideshow-stage { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #f0f6fa; }
.slideshow-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--slide-transition, 1000ms) linear; }
.slideshow-image.is-active { opacity: 1; }
.slideshow-toggle, .slideshow-arrow { position: absolute; z-index: 2; width: calc(44px * 2 / 3); height: calc(44px * 2 / 3); display: grid; place-items: center; padding: 0; border: 1px solid #cbdbe7; border-radius: 50%; background: #fffffff2; color: #064e83; box-shadow: 0 2px 8px #14354d26; }
.slideshow-toggle { top: 10px; right: 10px; }
.slideshow-arrow { top: 50%; transform: translateY(-50%); font-size: 12px; }
.slideshow-previous { left: 10px; }
.slideshow-next { right: 10px; }
.slideshow-toggle::before { content: ""; width: calc(5px * 2 / 3); height: 12px; border-left: calc(5px * 2 / 3) solid currentColor; border-right: calc(5px * 2 / 3) solid currentColor; }
.slideshow-toggle[data-paused="true"]::before { width: 0; height: 0; margin-left: calc(4px * 2 / 3); border-top: calc(10px * 2 / 3) solid transparent; border-bottom: calc(10px * 2 / 3) solid transparent; border-left: calc(16px * 2 / 3) solid currentColor; border-right: 0; }
.slideshow-toggle:hover, .slideshow-arrow:hover { background: #fff; }
.slideshow-toggle:focus-visible, .slideshow-arrow:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .slideshow-image { transition: none; } }
