.docomo-header-notice[hidden] {
  display: none !important;
}

.docomo-header-notice {
  top: 0;
}

.admin-bar .docomo-header-notice {
  top: 32px;
}

/* .admin-bar #docomo-headtopbar {
  margin-top: 32px;
} */

@media screen and (max-width: 782px) {
  .admin-bar .docomo-header-notice {
    top: 46px;
  }

  .admin-bar #docomo-headtopbar {
    margin-top: 46px;
  }
}

.docomo-header-notice__panel[hidden] {
  display: none !important;
}

.docomo-header-notice__icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.docomo-header-notice__icon-state {
  display: inline-flex;
}

.docomo-header-notice__icon-state--expanded {
  display: none;
}

.docomo-header-notice.is-expanded .docomo-header-notice__icon-state--collapsed {
  display: none;
}

.docomo-header-notice.is-expanded .docomo-header-notice__icon-state--expanded {
  display: inline-flex;
}

.docomo-header-notice__svg {
  display: block;
}

.docomo-header-notice__svg--alert {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.docomo-header-notice__svg--expand {
  width: 16px;
  height: 16px;
}

.docomo-header-notice.is-expanded
  .docomo-header-notice__icon-state--expanded
  .docomo-header-notice__svg--expand {
  opacity: 1;
}

.docomo-header-notice__svg--close {
  width: 18px;
  height: 18px;
}

.docomo-header-notice__close {
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.docomo-header-notice__close:hover {
  opacity: 1;
}

.docomo-header-notice__toggle,
.docomo-header-notice__close {
  -webkit-tap-highlight-color: transparent;
}