#weather-widget {
  display: flex;
  flex-direction: row;       /* 横並び */
  align-items: center;       /* 縦方向中央揃え */
  gap: 10px;                 /* 要素間の隙間 */
}

/* 今日の天気を30% */
#weather-widget > .current-weather {
  flex: 0 0 28%;             /* 幅30%で固定 */
  align-items: center;
}

/* 数時間予報を残り70% */
#weather-widget > .hourly-forecast {
  flex: 0 0 60%;             /* 幅70%で固定 */
  display: flex;
  flex-direction: column;
}
#weather-widget img {
  width: 45px;   /* 元の幅の半分 */
  height: 45px;  /* 元の高さの半分 */
  object-fit: contain; /* 画像の比率を保持 */
}
#weather-widget h3 {
  font-size: 1rem;       /* 文字サイズ */
  color: #ffffff;           /* 白系 */
  margin: 0;                /* マージンをなくす */
  padding: 0;               /* 念のためパディングもリセット */
  font-weight: bold;        /* 必要なら太字 */
}
#weather-widget h4 {
  margin: 1px;                
  padding: 0; 
}
/* 背景全体 */
.weather-bg {
  align-items: center;           /* 縦方向中央 */
  background: linear-gradient(to right, #4a90e2, #e0f0ff);
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  flex-wrap: nowrap;             /* 1行に収める */
}
/* アイコン */
.current-weather lottie-player {
  width: 50px !important;
  height: 50px !important;
  display: block;
}

/* テキスト情報を縦並び */
.weather-info {
  gap: 2px;
  font-weight: bold;
  color: #000;
}
/* forecast-container の横並びアイコン */
.forecast-container {
  display: flex;
  flex-direction: row;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,0.3);  /* 背景を透過で天気背景と重ねる */
  overflow-x: auto;              /* 横スクロール対応 */
}

.forecast-item {
  flex: 0 0 auto;
  width: 45px;
  text-align: center;
}