/* 本日の診療案内の直下に自然につながるお知らせデザイン。変更時だけ注意色を使う。 */
.hours-page .hours-change-note {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  margin: 10px 0 0;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid #d8e9ef;
  border-bottom: 1px solid #d8e9ef;
  border-radius: 0;
  background: #f8fbfc;
  color: #607b89;
  font-size: .8rem;
  line-height: 1.65;
}

.hours-page .hours-change-note strong {
  color: #315e73;
  font-size: .83rem;
}

.hours-page .hours-change-note span { flex: 1; }

.hours-page .hours-change-note a {
  color: #087eaa;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.hours-page .hours-change-note.has-change {
  border: 1px solid #ecdcc5;
  border-radius: 10px;
  background: #fffaf4;
  color: #745c42;
}

.hours-page .hours-change-note.has-change strong { color: #a55b24; }
.hours-page .hours-change-note.has-change a { color: #92531f; }

@media (max-width: 767px) {
  .hours-page .hours-change-note { display: block; padding: 12px 14px; }
  .hours-page .hours-change-note > * { display: block; }
  .hours-page .hours-change-note span { margin: 4px 0; }
  .hours-page .hours-change-note a { margin-top: 6px; white-space: normal; }
}