@charset "utf-8";

/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 114px;
  background-color: #F8F5F0;
}
.header__inner {
  height: 100%;
  padding: 0 clamp(1.000rem, -1.500rem + 3.906vw, 3.188rem) 0 clamp(0.750rem, -0.321rem + 1.674vw, 1.688rem);
}
.header__container {
  display: flex;
  align-items: center;
  height: 100%;
}
.header__left {
  flex-shrink: 0;
}
.header__left a {
  display: block;
}
.header__logo {
  width: auto;
  height: clamp(3.000rem, 1.429rem + 2.455vw, 4.375rem);
}
.header__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.500rem, -1.071rem + 4.018vw, 3.750rem);
  height: 100%;
  margin-left: auto;
}
.header__nav > a {
  display: flex;
  align-items: center;
  height: 100%;
}
.header__nav > a .header__item {
  position: relative;
  font-size: clamp(0.750rem, 0.321rem + 0.670vw, 1.125rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s;
}
.header__nav > a:hover .header__item {
  color: #ff880a;
}
.header__nav > a.is-current .header__item::after,
.header__item--toggle.is-current .header-toggle__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  border-bottom: 1px dotted currentColor;
}
.header__item--toggle {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.header__toggle {
  display: flex;
  align-items: center;
  gap: clamp(0.500rem, 0.071rem + 0.670vw, 0.875rem);
  cursor: pointer;
}
.header-toggle__text {
  position: relative;
  font-size: clamp(0.750rem, 0.321rem + 0.670vw, 1.125rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s;
}
.header__item--toggle:hover .header-toggle__text {
  color: #ff880a;
}
.header-toggle__icon {
  position: relative;
  flex-shrink: 0;
  width: clamp(1.125rem, 0.625rem + 0.781vw, 1.562rem);
  height: clamp(1.125rem, 0.625rem + 0.781vw, 1.562rem);
  background-color: #ff880a;
  border-radius: 50%;
}
.header-toggle__icon::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
  transition: transform 0.3s;
}
.header__item--toggle.is-open .header-toggle__icon::after {
  top: 54%;
  transform: translate(-50%, -60%) rotate(-135deg);
}
.header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  display: none;
  padding: clamp(0.750rem, 0.464rem + 0.446vw, 1.000rem) clamp(1.500rem, 0.214rem + 2.009vw, 2.625rem);
  background-color: #fff;
  border-radius: 40px;
  transform: translateX(-50%);
}
.header__dropdown a {
  display: block;
  white-space: nowrap;
}
.header__dropdown a + a {
  margin-top: clamp(1.250rem, 0.607rem + 1.004vw, 1.812rem);
}
.header-dropdown__item {
  display: flex;
  align-items: center;
  gap: clamp(1.000rem, 0.357rem + 1.004vw, 1.562rem);
  white-space: nowrap;
}
.header-dropdown__icon {
  position: relative;
  order: -1;
  flex-shrink: 0;
  width: clamp(1.625rem, 1.054rem + 0.893vw, 2.125rem);
  height: clamp(1.625rem, 1.054rem + 0.893vw, 2.125rem);
  background-color: #ff880a;
  border-radius: 50%;
  transition: background-color 0.3s;
}
.header__dropdown a:hover .header-dropdown__icon {
  background-color: #0f3666;
}
.header-dropdown__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: translate(-70%, -50%) rotate(45deg);
}
.header-dropdown__text {
  position: relative;
  font-size: clamp(0.875rem, 0.589rem + 0.446vw, 1.125rem);
  font-weight: 500;
  line-height: 1.333;
  white-space: nowrap;
}
.header__dropdown a.is-current .header-dropdown__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  border-bottom: 1px dotted currentColor;
}
.header__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0;
  height: clamp(3.250rem, 1.893rem + 2.121vw, 4.438rem);
  padding: 0 clamp(0.750rem, -0.464rem + 1.897vw, 1.812rem);
  background-color: #0f3666;
  border-radius: 42px;
}
.header-phone__text {
  font-size: clamp(0.688rem, 0.330rem + 0.558vw, 1.000rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
  white-space: nowrap;
}
.header-phone__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-phone__icon {
  width: clamp(1.000rem, 0.500rem + 0.781vw, 1.438rem);
  height: clamp(1.000rem, 0.500rem + 0.781vw, 1.438rem);
  object-fit: contain;
}
.header-phone__number {
  font-size: clamp(1.000rem, 0.286rem + 1.116vw, 1.625rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
  white-space: nowrap;
}
.header__right {
  flex-shrink: 0;
  margin-left: clamp(0.625rem, -0.804rem + 2.232vw, 1.875rem);
}
.header__right > a {
  display: flex;
}
.header__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(3.250rem, 1.893rem + 2.121vw, 4.438rem);
  padding: 0 clamp(1.000rem, -0.714rem + 2.679vw, 2.500rem);
  background-color: #ff880a;
  border: 1px solid #ff880a;
  border-radius: 42px;
  font-size: clamp(0.750rem, 0.179rem + 0.893vw, 1.250rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
.header__right > a:hover .header__contact {
  background-color: #fff;
  color: #FF880A;
}

/* hamBtn */
.hamBtn {
  display: none;
  position: fixed;
  top: 12px;
  right: 10px;
  z-index: 120;
  overflow: hidden;
  width: 50px;
  height: 50px;
  background-color: #FF880A;
  border-radius: 50%;
  cursor: pointer;
}
.hamBar {
  position: relative;
  width: 100%;
  height: 100%;
}
.hamBar div {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 24px;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
  transition: top 0.3s, transform 0.3s;
}
.hamBar div:nth-child(2) {
  top: 22px;
}
.hamBar p {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.hamBar.active div:nth-child(1) {
  top: 18px;
  transform: translateX(-50%) rotate(45deg);
}
.hamBar.active div:nth-child(2) {
  top: 18px;
  transform: translateX(-50%) rotate(-45deg);
}

/* sp__menu */
.sp__menu {
  display: none;
}

body {
  padding-top: 114px;
}

@media (max-width: 1023px) {
  body {
    padding-top: 62px;
  }
  .header {
    height: 62px;
  }
  .header__inner {
    display: flex;
    align-items: center;
    padding: 0 70px 0 10px;
  }
  .header__container {
    width: 100%;
  }
  .header__logo {
    height: 42px;
  }
  .header__nav,
  .header__right {
    display: none;
  }
  .hamBtn {
    display: block;
  }
  .sp__menu {
    display: block;
    position: fixed;
    top: 62px;
    left: 0;
    z-index: 110;
    width: 100%;
    height: calc(100% - 62px);
    height: calc(100dvh - 62px);
    background-color: #f8f5f0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .sp__menu.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .sp-menu__inner {
    min-height: 100%;
    padding: 32px 30px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .sp-menu__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 390px;
    margin: 0 auto;
  }
  .sp-menu__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 0.5px solid #707070;
  }
  .sp-menu__items > a {
    display: block;
    width: 100%;
    border-bottom: 0.5px solid #707070;
  }
  .sp-menu__item {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 clamp(0rem, -0.385rem + 1.58vw, 0.625rem);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: color 0.3s;
  }
  .sp-menu__items > a:hover .sp-menu__item,
  .sp-menu__items > a.is-current .sp-menu__item {
    color: #ff880a;
  }
  .sp-menu__container > a {
    display: block;
    width: 100%;
  }
  .sp-menu__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 310px;
    height: 63px;
    margin-top: 45px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ff880a;
    border-radius: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: background-color 0.3s;
  }
  .sp-menu-contact__text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: #000;
    white-space: nowrap;
    transition: color 0.3s;
  }
  .sp-menu-contact__icon {
    position: relative;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    background-color: #0f3666;
    border-radius: 50%;
    transition: background-color 0.3s;
  }
  .sp-menu-contact__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: translate(-70%, -50%) rotate(45deg);
  }
  .sp-menu__container > a:hover .sp-menu__contact {
    background-color: #0f3666;
  }
  .sp-menu__container > a:hover .sp-menu-contact__text {
    color: #fff;
  }
  .sp-menu__container > a:hover .sp-menu-contact__icon {
    background-color: #ff880a;
  }
  .sp-menu__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 310px;
    height: 63px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }
  .sp-menu-phone__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #0f3666;
    white-space: nowrap;
  }
  .sp-menu-phone__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sp-menu-phone__icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(14%) sepia(49%) saturate(1842%) hue-rotate(187deg) brightness(94%) contrast(101%);
  }
  .sp-menu-phone__number {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: #0f3666;
    white-space: nowrap;
  }
}

@media (max-width: 389px) {
  .sp-menu__inner {
    padding-inline: 16px;
  }
  .sp-menu__item {
    font-size: 12px;
  }
}