@charset "utf-8";

.noticeSpot {
  color: hsl(0deg 0% 44%);
  background-color: #ff9701;
}

.noticeSpot .head {
  color: #ff9701;
  background-color: #fff;
}

.noticeSpot .body {
  color: #fff;
}

.noticeSpot .label::after {
  content: "重要なお知らせ";
}

.noticeSpot .date::after {
  content: "YYYY/MM/DD HH:MM 更新";
}

.noticeSpot .summary::after {
  white-space: pre-wrap;
  content: "下記日時にてシステムメンテナンスを実施するため、サービス利用不可となります。ご迷惑をおかけしますことをお詫び申し上げます。";
}

.noticeSpot .text::before {
  white-space: pre-wrap;
  content: "実施日時：YYYY年MM月DD日(aaa)HH:mm～HH:mm";

  @media screen and (width <= 900px) {
    content: "■実施日時\AYYYY年MM月DD日(aaa)HH:mm～HH:mm";
  }
}

.noticeSpot .text::after {
  white-space: pre-wrap;
  content: "※作業状況により時間が多少前後する場合がございます。";
}