#events {
    font-family: "Kristina", "KikaiChokoku", "Zen Maru Gothic", sans-serif;
}

dialog#thisEvent {
    font-family: "KikKikaiChokoku", "Zen Maru Gothic", sans-serif;
}

dialog#thisEvent button.close {
    position: fixed;
    bottom: 0;
    right: 0;
}

#events fieldset,
dialog#thisEvent #thisLink {
    display: flex;
}

#events fieldset {
    column-span: all;
    flex-wrap: wrap;
}

#events {
    columns: 500px auto;
}

#events section {
    break-inside: avoid;
}

#events fieldset {
    gap: 0.25rem;
}

dialog#thisEvent #thisLink {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 750px;
}

dialog#thisEvent #thisInfo {
    margin: auto;
    max-width: 750px;
}

#events section button {
    font-family: inherit;
}

dialog#thisEvent button.close {
    font-family: Arial, Helvetica, sans-serif;
}

dialog#thisEvent button.close,
#events section h3 {
    font-size: 150%;
}

#events input[type="radio"]:checked+label {
    font-size: 123%;
}

#events legend,
#events label,
#events section ruby rt {
    font-size: 111%;
}

#events section button {
    font-size: 90%;
}

#events section button {
    font-weight: bolder;
}

#events section ruby rt,
dialog#thisEvent #thisInfo ruby rt {
    text-align: left;
}

dialog#thisEvent button.close {
    background: transparent;
}

#events input[type="radio"]:checked+label,
dialog#thisEvent,
dialog#thisEvent #thisLink a {
    background: #fff;
}

#events input[type="radio"]:checked+label,
dialog#thisEvent #thisLink::before {
    color: lightskyblue;
}

#events legend,
#events section button {
    background: lightskyblue;
    color: lemonchiffon;
}

dialog#thisEvent #thisLink a {
    box-shadow: 0.1rem 0.1rem #111, 0.2rem 0.2rem #111;
    color: #111;
}

#events section,
dialog#thisEvent,
dialog#thisEvent #thisLink a {
    border-radius: 0.5rem;
}

#events legend,
#events label,
dialog#thisEvent #thisLink a {
    text-decoration: none;
}

dialog#thisEvent #thisLink {
    padding: 1rem 0;
}

#events,
dialog#thisEvent button.close {
    padding: 0.5rem;
}

#events legend,
#events label,
dialog#thisEvent #thisInfo,
dialog#thisEvent #thisLink::before,
dialog#thisEvent #thisLink a {
    padding: 0.25rem 0.5rem;
}

#events legend {
    padding: 0.25rem;
}

dialog#thisEvent #thisLink {
    padding-bottom: 0.5rem;
}

#events section ruby rt {
    padding: 0.5rem 0;
}

#events section {
    padding: 0.5rem 0.5rem 0.25rem;
}

#events fieldset {
    padding: 0 0 1rem;
}

#events legend,
#events section {
    margin-bottom: 1rem;
}

#events section button {
    float: right;
}

dialog#thisEvent button.close {
    appearance: none;
}

#events fieldset,
#events section button,
dialog#thisEvent,
dialog#thisEvent button.close {
    border: none;
}

#events legend,
#events input[type="radio"]+label {
    border-radius: 0.25rem;
}

dialog#thisEvent button.close {
    outline: none;
}

dialog#thisEvent #thisLink[hidden],
#events input[type="radio"] {
    display: none;
}

#events section button {
    border-radius: 50%;
    display: block;
    float: right;
    width: 4rem;
    height: 4rem;
    transform: rotate(15deg);
}

dialog#thisEvent::backdrop {
    background: #fff9;
    backdrop-filter: blur(0.25rem);
}

dialog#thisEvent #thisLink::before {
    content: "関連ページ";
    text-decoration: underline wavy;
    width: 100%;
}

html:has(dialog[open]) {
    overflow: hidden;
}