/* Header */
header {
  position: sticky;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease; }
  @media screen and (max-width: 768px) {
    header {
      margin: 0 auto; } }
  header #h-box {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #FFF; }
    header #h-box h1 {
      padding: 7px 0 7px 3%;
      font-size: 2.6rem;
      font-weight: 700; }
      @media screen and (max-width: 768px) {
        header #h-box h1 {
          padding: 12px 0 12px 3%;
          font-size: 2.2rem; } }
    header #h-box .hd-tel {
      margin-left: 20px; }
      @media screen and (max-width: 1200px) {
        header #h-box .hd-tel {
          text-align: center;
          margin: 50px 0; } }
      header #h-box .hd-tel a {
        border-bottom-left-radius: 10px;
        padding: 20px 1.5em;
        background-color: #000;
        color: #FFF; }
        @media screen and (max-width: 1200px) {
          header #h-box .hd-tel a {
            border-bottom-left-radius: 0; } }

header.is-after-main {
  background-color: #fff; }
  header.is-after-main #h-box {
    color: #222; }
  header.is-after-main .global-nav-item > a {
    color: #222; }
  header.is-after-main h1 a {
    color: #222; }
  header.is-after-main .hd-tel a {
    background-color: #222;
    color: #fff; }

header.is-after-main .global-nav-button-icon,
header.is-after-main .global-nav-button-icon::before,
header.is-after-main .global-nav-button-icon::after {
  background: #222; }