@charset "utf-8";

.header {
  width: 100%;
  height: 79px;
  padding-inline: 15px;
}

@media screen and (min-width: 768px) {
  .header {
    padding-inline: 25px;
  }
}

.header__inner {
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 79px;
  padding-block: 12px 6px;
  border-bottom: 1px solid #c0c0c0;
}

.header__logo {
  display: block;
  width: 106px;
  height: auto;
  aspect-ratio: 106/55;
  position: relative;
  z-index: 110;
}

.header__logo .h1759819788846 {
  width: 1px;
  height: 1px;
  opacity: 0;
}

.header__wrapper {
  display: none;
  justify-content: flex-end;
  gap: clamp(20px, 4.25vw, 58px);
}

@media screen and (min-width: 1000px) {
  .header__wrapper {
    display: flex;
  }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.2vw, 30px);
}

.header__item p {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: calc(80 / 1000 * 1em);
  transition: all 0.5s ease;
}

.header__item:hover p {
  opacity: 0.7;
  color: inherit;
}

.header__button-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__tel-button {
  background: #ff9300;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  padding-inline: 12px;
  height: 57px;
  color: var(--color-white);
}

.header__numbar {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-white);
}

.header__numbar::before {
  content: "";
  flex-shrink: 0;
  aspect-ratio: 20/20;
  width: clamp(16px, 1.47vw, 20px);
  height: auto;
  background: url(../images/tel-icon.svg) no-repeat center center/contain;
}

.header__tel-time {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  color: var(--color-white);
}

.header__line {
  height: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #01a401;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--color-white);
  padding-inline: 12px;
}

.header__line img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  display: block;
}

.header__line-text {
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: calc(80 / 1000 * 1em);
}

.header__contact {
  height: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #015fb7;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--color-white);
  padding-inline: 12px;
}

.header__contact img {
  aspect-ratio: 15/12;
  width: 15px;
  height: auto;
  object-fit: contain;
  display: block;
}

.header__contact-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: calc(80 / 1000 * 1em);
  color: var(--color-white);
}

.header__numbar,
.header__contact-text,
.header__line-text {
  transition: all 0.5s ease;
}

.header__tel-button:hover .header__numbar,
.header__contact:hover .header__contact-text,
.header__line:hover .header__line-text {
  transform: scale(1.1);
}

.header__open-button {
  position: absolute;
  z-index: 101;
  top: 22px;
  right: 20px;
  z-index: 200;
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

@media screen and (min-width: 1000px) {
  .header__open-button {
    display: none;
  }
}

.header__open-button.is-open .header__open-bar:nth-of-type(1) {
  transform: rotate(45deg) translate(5px, 10px);
}

.header__open-button.is-open .header__open-bar:nth-of-type(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__open-button.is-open .header__open-bar:nth-of-type(3) {
  transform: rotate(-45deg) translate(6px, -12px);
}

.header__open-bar {
  width: 30px;
  height: 2px;
  background-color: var(--color-base);
  transition: all 0.3s ease;
  transform-origin: center;
  border-radius: 3px;
  position: relative;
}

.header__drawer {
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  padding: 132px 20px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #fafafa 0%,
    #f0f9fb 14.28%,
    #f9f8f6 28.56%,
    #f1eff0 42.84%,
    #ecfafd 57.12%,
    #fcfcf9 71.4%,
    #f1eff0 85.68%,
    #f1eff0 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  transform: translateX(100vw); 
  opacity: 0;
  transition: all 0.8s ease;
  overflow-y: scroll;
}

.header__drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.8s ease;
}

.header__drawer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.header__drawer-item p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: calc(60 / 1000 * 1em);
  line-height: 1.2;
  color: var(--color-base);
}

.header__drawer-list .header__tel-button,
.header__drawer-list .header__line,
.header__drawer-list .header__contact {
  width: 204px;
}