/* ==========================================================================
   Header
========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  height: var(--header-h);
}

.header .inner {
  max-width: 1080px;
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header__logo {
  display: block;
  line-height: 0;
  min-width: 0;
}

.header__logo-img {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;

  @media screen and (max-width: 767px) {
    width: 190px;
  }
}

.header__tel {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.header__tel:hover {
  transform: translateY(-1px);
}

.header__tel .c-btn__img {
  width: 300px;
  max-width: 100%;
  height: auto;

  @media screen and (max-width: 767px) {
    width: 170px;
  }
}

.header__tel .c-btn__img--hover {
  width: 300px;
  max-width: 100%;
  height: auto;

  @media screen and (max-width: 767px) {
    width: 170px;
  }
}

.header__tel:hover .c-btn__img--base,
.header__tel:focus-visible .c-btn__img--base {
  opacity: 0;
}

.header__tel:hover .c-btn__img--hover,
.header__tel:focus-visible .c-btn__img--hover {
  opacity: 1;
}