div#menu {
	font: 
	height: 2em;
	padding: 0.5em 0px 0px;
	background: #245386;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;

	
}
div#menu ul{
	margin: 0px;
	padding: 0px;

}
div#menu li{
	float: left;
	padding: 0px;
	margin-left: 10px;
	color:#FFFFFF;
	list-style: none;
	background:gray;
}
div#menu a{
	color: #FFFFFF;
	text-decoration: none;
	
}

#timeUnit {
    font-size: 18px; /* 文字サイズを18pxに設定 */
}
#timeUnit option {
    font-size: 18px; /* オプションの文字サイズも18pxに設定 */
}



ul {
  padding: 0;
}

ul li, ol li {
  color: #404040;
  border-left: solid 6px #1fa67a;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
}

.example{
    font-size: 110%;
    padding: 8px 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    
}
.boxsize {
    width: 80px; /* ボックスの横幅 */
    height: 22px; /* ボックスの高さ */
    font-size: 16px; /* 文字サイズ */
//    padding: 5px; /* 内側の余白 */
    text-align: center; /* テキストを中央揃え */
}


.button-container {
    display: flex; /* フレックスボックスでボタンを配置 */
    gap: 20px; /* ボタン間の間隔を設定 */
}

.hidden {
   display: none;
}


#healthAverageChart {
    display: block;
    width: 100%; /* 親要素の幅いっぱいに */
    height: 200px; /* 親要素の高さに固定 */
    max-height: 400px; /* 最大高さを制限 */    
}

#mealTimeInput {
    font-size: 20px;      /* 文字を大きく */
    padding: 10px;        /* 内側の余白を増やす */
    height: 48px;         /* 全体の高さを大きく */
    width: 260px;         /* 横幅を広げる */
    border-radius: 8px;   /* 角を丸く */
}