.item div {
    font-size: 20px;
    padding-bottom: 1em;
}

.notice {
    & ul {
        color: #333;
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
        padding-left: 1em;
    }

    & li {
        color: #000;
        padding-top: 3px;
    }
}

summary {
    cursor: pointer;
    font-weight: bold;
    padding-bottom: 1em;

    & div {
        border-bottom: 1px dotted #338;
        display: inline-block;
    }
}

details {
    text-align: center;
    padding-bottom: 1em;
    padding-top: 1.5em;

    &>div {
        background-color: #eeeef5;
        border: 1px solid #338;
        padding-left: 10px;
        padding-right: 10px;
    }

    &::details-content {
        transition:
            height 0.4s,
            opacity 0.4s,
            content-visibility 0.4s allow-discrete;
        height: 0;
        opacity: 0;
        overflow: clip;
    }

    &[open]::details-content {
        opacity: 1;
    }

    &[open] .icon {
        transform: rotate(180deg);
    }
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    details[open]::details-content {
        height: auto;
    }
}

@supports not (interpolate-size: allow-keywords) {
    details[open]::details-content {
        height: auto;
        overflow-y: scroll;
    }
}