.site-notice {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border, #d9d9d9);
    font-size: 14px;
    line-height: 1.45;
}

.site-notice--neutral {
    /*background: var(--color-surface-2, #f5f5f5);*/
    color: var(--color-text, #222222);
}

.site-notice--important {
    background: var(--color-warning-soft, #fff1cc);
    color: var(--color-text, #222222);
    border-bottom-color: var(--color-warning, #e1b200);
}

.site-notice__inner {
    position: relative;
    max-width: var(--site-width, 1320px);
    margin: 0 auto;
    padding: 12px 44px 12px 16px;
    box-sizing: border-box;
}

.site-notice__content {
    display: block;
}

.site-notice__content p:first-child {
    margin-top: 0;
}

.site-notice__content p:last-child {
    margin-bottom: 0;
}

.site-notice__content a {
    text-decoration: underline;
}

.site-notice__close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
}

.site-notice__close:hover,
.site-notice__close:focus {
    opacity: 1;
}

.site-notice.is-hidden {
    display: none;
}