/* =============================================================================
   header
============================================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6.510416666666667vw;
  padding: 0 5.3125vw;
  z-index: 9999;
}

.site-header::before {
  content: "";
  position: absolute;
  top: -8.854166666666668vw;
  left: -5.15625vw;
  width: 31.25vw;
  height: 15.364583333333334vw;
  border-radius: 6.302083333333333vw;
  box-shadow: 0 3px 6px #00000029;
  background-color: var(--color-white);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-logo {
  position: static;
  width: 15.677083333333334vw;
  z-index: 999;
}

.site-logo img {
  width: 100%;
  display: block;
}

.header-buttons {
  display: flex;
  gap: 1.1979166666666667vw;
}

.header-buttons .btn {
  width: 10.727604166666667vw;
  padding: 0.8906250000000001vw 2.7864583333333335vw;
  border-radius: 80px;
  font-size: 1.25vw;
  box-shadow: 0.4166666666666667vw 0.5208333333333333vw 0.3125vw #00000029;
}

/* SP */
@media screen and (max-width: 768px) {
  .site-header {
    height: 60px;
    padding: 0 8px;
  }

  .site-header::before {
    top: -72px;
    left: -50px;
    width: 270px;
    height: 132px;
    border-radius: 186px;
  }

  .site-logo {
    width: 180px;
  }

  .header-buttons {
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 8px 8px;
  }

  .header-buttons .btn {
    width: calc(50% - 4px);
    font-size: 14px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    box-shadow: 2px 4px 3px #00000029;
  }
}