/* 全体の背景を黄色 */
body {
    background-color: #FFF000; /* 明るい黄色 */
}

/* カード風スタイル */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff; /* カードは白でコントラスト */
    padding: 15px;
    margin: 15px 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* タイトル部分のスタイル */
.title {
    background-color: #e3f2fd; /* 淡い青の背景 */
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #1976d2; /* アクセント用の左ボーダー */
}

/* タイトル内の日付（small）を少し小さく */
.title small {
    font-size: 12px;
    color: #555;
}

/* アイコン風スタイル（area3以外） */
.icon-area, .icon-area5, .icon-area6, .icon-area7, .icon-area8, .icon-area9 {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

/* 各エリアに異なる背景色 */
.icon-area {
    background-color: #e0f7fa;
}
.icon-area5 {
    background-color: #e8f5e9;
}
.icon-area6 {
    background-color: #fff3e0;
}
.icon-area7 {
    background-color: #f3e5f5;
}
.icon-area8 {
    background-color: #e1f5fe;
}
.icon-area9 {
    background-color: #f1f8e9;
}


.box-1 {
  margin-top: 10px;
 /* 上側に10px間隔をあける */
  margin-right: 10px;
 /* 右側に10px間隔をあける */
  margin-bottom: 5px;
 /* 下側に5px間隔をあける */
  margin-left: 5px;
 /* 左側に5px間隔をあける */;
}
.box-2 {
  margin-top: 10px;
 /* 上側に10px間隔をあける */
  margin-right: 10px;
 /* 右側に10px間隔をあける */
  margin-bottom: 5px;
 /* 下側に5px間隔をあける */
  margin-left: 10px;
 /* 左側に10px間隔をあける */;
}