:root {
--header-height: 5rem;
}

html {
font-size: 5vw;
}

@media (min-width: 480px) {
html {
font-size: 24px;
}
}

body {
background-color: #fff;
}

h1,
h2,
h3 {
text-wrap: wrap;
}

header {
gap: 0;
position: sticky;
top: 0;
border-top: solid 0.25rem #093;
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
}

header > a#main-logo {
margin: 0.5rem 0.5rem 1.5rem 1.5rem;
}

header > a#main-logo img {
height: 3rem;
width: 3rem;
}

p#site-name {
margin: 0 auto 0.6rem;
max-width: calc(100vw - 9rem);
font-size: 0.9rem;
line-height: 1.125rem;
word-break: keep-all;
}

p#site-description {
position: absolute;
bottom: 0.4rem;
left: 1.5rem;
max-width: calc(100vw - 3rem);
font-size: 0.625rem;
margin: 0;
}

header nav ul {
position: absolute;
width: 100%;
top: 0;
left: 0;
margin-top: 4.75rem;
padding: 0 1.5rem 0;
background-color: #093;
opacity: 0;
transform: scale(1, 0);
transform-origin: top;
z-index: 4;
/*transition: 0.2s ease-in-out 0.1s;*/
will-change: auto;
}

header nav ul:has(+input#menu-toggle-button:checked) {
opacity: 0.9;
transform: scale(1, 1);
transform-origin: top;
transition: 0.2s;
will-change: transform;
}

header nav li {
opacity: 0;
transition: 0.2s;
}

header nav ul a {
display: block;
text-align: center;
margin: 0 auto;
padding: 1rem;
width: 100%;
font-size: 1.2rem;
letter-spacing: 0.5rem;
color: #fff;
opacity: 0;
transition: 0.2s;
}

header nav li:nth-child(n+2) a {
border-top: 1px solid rgb(255, 255, 255, 0.75);
}

header nav ul:has(+input#menu-toggle-button:checked) a,
header nav ul:has(+input#menu-toggle-button:checked) li {
opacity: 1;
transition: 0.2s ease-in-out 0.1s;
}

header nav > input#menu-toggle-button {
display: none;
}

header nav label {
position: absolute;
top: 1.5rem;
right: 1.5rem;
height: 1rem;
width: 1rem;
z-index: 2;
cursor: pointer;
}

header nav label img {
display: block;
position: absolute;
height: 1rem;
width: 1rem;
top: 0;
right: 0;
}

header nav label::before {
content: "";
position: fixed;
top: calc(var(--header-height-offset) - 0.25rem);
left: 0;
background-color: rgba(255, 255, 255, 0.5);
width: 100vw;
height: calc(100vh - calc(var(--header-height-offset) - 0.25rem));
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: scale(1, 0);
transform-origin: top;
transition: 0.1s;
}

header nav input#menu-toggle-button:checked ~ label::before {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
transform: scale(1, 1);
transform-origin: top;
transition: 0.1s;
}

header nav label img#menu-open,
header nav input#menu-toggle-button:checked ~ label img#menu-close {
opacity: 1;
transition: 0.3s ease-in-out 0.1s;
}

header nav label img#menu-close,
header nav input#menu-toggle-button:checked ~ label img#menu-open {
opacity: 0;
transition: 0.3s ease-in-out 0.1s;
}

body::before {
height: 2rem;
}

h1 {
font-size: 1rem;
}

.archive h1 {
font-size: 0.75rem;
line-height: 275%;
}

.eye-catch-image {
width: calc(100% + 3rem);
margin: -0.5rem -1.5rem 1.5rem;
max-height: 9rem;
}

main {
width: 100%;
padding: 0.5rem 1.5rem;
margin-top: 2rem;
}

main h2,
main h3 {
font-size: 1rem;
}

main > h2:first-of-type {
margin-top: 0.5rem;
}

main > section:first-of-type h2 {
margin-top: 0.5rem;
font-size: 1rem;
}

main p.eye-catch-caption {
top: calc(var(--header-height-offset) + 2.25rem);
font-size: 0.8rem;
}

main p.lead {
font-size: 1rem;
margin-bottom: 1rem;
border-bottom: solid 1px #eee;
padding-bottom: 1rem;
}

main figcaption {
padding: 0.1em;
font-size: 0.6rem;
}

main th, main td {
padding: 0.5rem;
}

main tbody {
width: 100%;
}


.concert-info .eye-catch-image,
.other-info .eye-catch-image,
.archive-entry .eye-catch-image,
.latest-concert-info figure {
width: 100%;
margin: 0.75rem auto;
max-height: none;
}

main .meta {
margin-top: 2rem;
}

main .meta+.meta {
margin-top: 0.5rem;
}

.member-list {
margin: 0.5rem 0;
padding: 0;
}

.member-list table {
width: 100%;
}

.member-list th,
.member-list td {
padding: 0.5rem;
}

.member-list th {
width: 75%;
}

.member-list td {
width: 25%;
}

.calendar main {
position: relative;
}

main .ics-calendar .ics-calendar-month-grid .day {
padding: 0.25rem 0.5rem;
background: #eee;
font-size: 0.75rem;
}

main .ics-calendar .ics-calendar-month-grid ul.events li {
border-bottom: 1px solid #eee;
margin: 0;
padding: 0.25rem 0.5rem 1rem;
}

main .ics-calendar .ics-calendar-month-grid td[data-dow='0'] .day span[data-date-format="D"] {
color: #f66;
}

main .ics-calendar .ics-calendar-month-grid td[data-dow='6'] .day span[data-date-format="D"] {
color: #66f;
}

main .ics-calendar .ics-calendar-month-grid .events span.time {
font-size: 0.75rem;
}

body:not(#tinymce) .ics-calendar:not(.nomobile) .phone_only.inline_block.ics-calendar-past-events-toggle:not(.hidden),
body:not(#tinymce) .ics-calendar:not(.nomobile) .ics-calendar-month-wrapper .phone_only.no_additional_events {
display: none!important;
}

main .ics-calendar.layout-month:not(.nomobile):not(.show-past-events) .past:not(.empty) {
display: initial;
}

main input[type="submit"] {
width: 100%;
}


footer address {
align-items: center;
height: auto;
margin: 1rem auto;
}

footer address ul {
height: auto;
gap: 0.5rem;
}

footer address ul li {
margin: 0;
}

footer address ul li img {
height: 2rem;
width: 2rem;
margin: 0.5rem 1rem;
}

footer p#copyright {
margin: 0.25rem 0.5rem 0.5rem;
font-size: 0.7rem;
text-align: center;
}