/* 白3段（散乱）512×128 / .hero.is-white
   上40 千葉市 + 発表 HH:MM + 更新 HH:MM + 発表中
   中48 チップ（レベルあり256 / なし128。特別=黒 / 危険=紫 / 警報=赤 / 注意報=黄）
   下40 凡例 特別警報 | 危険警報 | 警報 | 注意報
   3段とも 56px/秒 シームレス横スクロール。数字を変えるな。 */

#sceneWarn .hero.is-white,
.hero.is-white {
  width: 512px;
  height: 128px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background: #fff9f0;
  --white-gap: 8px;
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

#sceneWarn .hero.is-white .band,
.hero.is-white .band {
  position: relative;
  width: 512px;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
}

#sceneWarn .hero.is-white .band-top,
.hero.is-white .band-top {
  height: 40px;
  max-height: 40px;
  flex: 0 0 40px;
}
#sceneWarn .hero.is-white .band-mid,
.hero.is-white .band-mid {
  height: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  background: #d5d1c9;
}
#sceneWarn .hero.is-white .band-bot,
.hero.is-white .band-bot {
  height: 40px;
  max-height: 40px;
  flex: 0 0 40px;
}

#sceneWarn .hero.is-white .band-mid::before,
.hero.is-white .band-mid::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: #d5d1c9;
  animation: none;
}

#sceneWarn .hero.is-white .track,
.hero.is-white .track {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  width: max-content;
}

.white-top-seg {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding: 0 16px 0 8px;
  gap: var(--white-gap, 8px);
  flex: 0 0 auto;
  width: auto;
  box-sizing: border-box;
  white-space: nowrap;
}

.white-area {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 900;
  color: #0854a8;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.white-what {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  color: #0854a8;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.hero.is-white .badge {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #0854a8;
  padding: 3px 8px;
  border-radius: 2px;
  line-height: 1;
}

.hero.is-white .badge span {
  display: block;
  color: #1a1a1a;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mid-set {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 48px;
  gap: 0;
  padding: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}
#sceneWarn .mid-unit,
.hero.is-white .mid-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  flex: 0 0 128px;
  height: 48px;
  box-sizing: border-box;
  padding: 2px 8px;
}
#sceneWarn .mid-unit.is-wide,
.hero.is-white .mid-unit.is-wide {
  width: 256px;
  min-width: 256px;
  max-width: 256px;
  flex: 0 0 256px;
}

#sceneWarn .hero.is-white .mid-chip,
.hero.is-white .mid-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0 6px;
  min-height: 0;
  border: 2px solid #cdb800;
  border-radius: 3px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  color: #1a1a1a;
  transform: none;
  -webkit-text-stroke: 0 !important;
  paint-order: normal;
  text-shadow: none;
  box-sizing: border-box;
}
#sceneWarn .hero.is-white .mid-chip-lv,
.hero.is-white .mid-chip-lv {
  display: block;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}
#sceneWarn .hero.is-white .mid-chip-name,
.hero.is-white .mid-chip-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  box-sizing: border-box;
}
#sceneWarn .mid-unit.is-wide .mid-chip-name,
.hero.is-white .mid-unit.is-wide .mid-chip-name {
  font-size: 32px;
}

#sceneWarn .hero.is-white .mid-chip.chip-special,
.hero.is-white .mid-chip.chip-special {
  background: #000000;
  color: #fff;
  border-color: #333333;
}
#sceneWarn .hero.is-white .mid-chip.chip-danger,
.hero.is-white .mid-chip.chip-danger {
  background: #ab00aa;
  color: #fff;
  border-color: #7a0078;
}
#sceneWarn .hero.is-white .mid-chip.chip-warning,
.hero.is-white .mid-chip.chip-warning {
  background: #fa2900;
  color: #fff;
  border-color: #c82400;
}
#sceneWarn .hero.is-white .mid-chip.chip-advisory,
.hero.is-white .mid-chip.chip-advisory {
  background: #f2e700;
  color: #1a1a1a;
  border-color: #cdb800;
}

.white-foot-seg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 40px;
  padding: 0;
  gap: 0;
  flex: 0 0 512px;
  width: 512px;
  min-width: 512px;
  box-sizing: border-box;
}
.white-foot-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  flex: 0 0 128px;
  height: 40px;
  padding: 0 8px;
  box-sizing: border-box;
}

.white-foot-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  height: 30px;
  padding: 0;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

.white-foot-chip.chip-special {
  background: #000000;
  color: #fff;
}
.white-foot-chip.chip-danger {
  background: #ab00aa;
  color: #fff;
}
.white-foot-chip.chip-warning {
  background: #fa2900;
  color: #fff;
}
.white-foot-chip.chip-advisory {
  background: #f2e700;
  color: #1a1a1a;
}