.notice-container {
width: 90%;
max-width: 970px;
margin: 30px auto;
font-family: Arial, sans-serif;
}

.notice-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}

/* 上下の罫線 */
.notice-list-wrapper {
border-top: 2px solid #999;
border-bottom: 2px solid #999;
max-height: 300px;       /* 8行程度の高さ */
overflow-y: auto;
padding: 1px 0;
}

/* お知らせ 1行 */
#notice-list li {
display: flex;
align-items: center;
gap: 30px;
padding: 10px 22px 10px 0px;
border-bottom: 1px solid #eee;
}

/* アイコン */
.notice-icon {
width: 4%;
padding: 3px 4px;
border-radius: 4px;
font-size: 10px;
color: #fff;
text-align: center;
}

.icon-important { background: #d9534f; }
.icon-new { background: #5bc0de; }
.icon-other { background: #5cb85c; }

.notice-date {
color: #555;
width: 95px;
font-size: 13px;
}

.notice-text {
flex: 1;
font-size: 14px;
}

/******************* スマホ対応（800px以下）*******************/
@media (max-width: 800px) {
    
.notice-list-wrapper {
margin-top: -5%;
padding: 1px 0;
}    
    
#notice-list li {
flex-direction: column;
align-items: flex-start;
border-bottom: 2px solid #bbb;
}
    
.notice-date {
width: auto;
}
    
.notice-text {
font-size: 18px;
}
    
.notice-icon {
width: 15%;
padding: 3px 4px;
border-radius: 4px;
font-size: 12px;
color: #fff;
text-align: center;
}    
}