#notices {
    position: absolute; /* お知らせリストの親に設定 */
    z-index: 501;       /* 地図より手前に表示 */
}

.notices-list {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;          /* 親のすぐ下に配置 */
    left: 0;
}

#notice
{
    position: absolute;
    width: 100%;
}

.notice-head
{
    position: relative;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #0D6EFD;
    align-content: center;
    padding-left: 5px;
    border-left: 4px solid #0D6EFD; 
    background-color: #D9E1F2;
}

.notice-head:hover
{
    cursor: pointer;
    background-color: #cad1e2;
}

.notice-body
{
    font-size: 16px;
    width: 100%;
    background-color: #b6d3ff;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 5px;
}

.notice-head-importance
{
    position: relative;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #DC3545;
    align-content: center;
    padding-left: 5px;
    border-left: 4px solid #DC3545; 
    background-color: #FFC0BC;
}
.notice-head-importance:hover
{
    cursor: pointer;
    background-color: #e5aca8;
}
.notice-body-importance
{
    font-size: 16px;
    width: 100%;
    background-color: #ffa3ac;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 5px;
}

/* アイコンのサイズを指定 */
.notice-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* お知らせ右端ボタン風表示 */
.notice-arrow-button {
    position: absolute; /* headから切り離し自由に配置 */
    top: 50%; /* headの上から中央 */
    right: 5px; /* headの右端から5px */
    transform: translateY(-50%); /* 縦方向の中央 */
    color: black;
    width: 20px;
    height: 20px;
    display: flex; /* 矢印中央配置 */
    justify-content: center; /* 横方向中央 */
    align-items: center; /* 縦方向中央 */
    font-weight: bold;
    font-size: 14px;
    
    /* 矢印ボタンはクリックを受け付けずに notice-head の onclick のみを効くように設定 */
    pointer-events: none; 
}

/* 矢印のスタイル */
.notice-arrow-button .notice-arrow {
    font-size: 14px;
    line-height: 1; /* 行の高さを1にして縦ブレ対策 */
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    transform: scaleY(0.6) translateY(0px);
    
    /* どのフォントに設定されても∧∨が表示されるように設定 */
    font-family: Arial, sans-serif; 
}