/*
 * kaori-header.css
 * ヘッダー（header-kaori_rn.php）のスタイル
 */

.site-header .header_wrap .header_top {
  background-color: #F6F5EF;
  padding: 12px;
}
.site-header .header_wrap .header_top .header_top_wrap {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.site-header .header_wrap .header_top .header_top_wrap a {
  display: inline-block;
}
.site-header .header_wrap .header_bottom {
  height: 96px;
  background: #fff;
  border-bottom: 1px solid #e6e9e3;
}
.site-header .header_wrap .header_top .header_top_wrap .header_right {
  margin-left: auto;
  display: flex;
  gap: 2vw;
}
.site-header .header_wrap .header_top .header_top_wrap .header_right a {
  font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
  line-height: 1;
  padding-left: 24px;
  position: relative;
}
.site-header .header_wrap .header_top .header_top_wrap .header_right a::before {
  content: '';
  width: 18px;
  height: 18px;
  background: #9D8E73;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.site-header .header_wrap .header_top .header_top_wrap .header_right a::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
}
.site-header .header_wrap .header_bottom .header_bottom_wrap {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  width: clamp(11.25rem, 9.659rem + 7.95vw, 15.625rem);
  margin-right: auto;
}
.site-header nav {
  display: flex;
  gap: 1.25vw;
  margin-left: auto;
  font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
  font-weight: 600;
  white-space: nowrap;
}
.site-header nav a {
  padding: 38px 0 36px;
  border-bottom: 2px solid transparent;
}
.site-header nav a:hover {
  color: var(--green);
  border-color: var(--green);
  opacity: 1;
}
.header-actions {
  display: flex;
  margin-left: 1.6vw;
  font-size: clamp(0.625rem, 0.557rem + 0.34vw, 0.813rem);
  font-weight: 600;
}
.header-actions a {
  color: #fff;
  padding: 16px clamp(0.625rem, 0.125rem + 2.5vw, 2rem) 16px clamp(0.5rem, 0.318rem + 0.91vw, 1rem);
  border: 1px solid var(--green);
  border-radius: 5px;
  background: var(--green);
  position: relative;
}
.header-actions a::before,
.header-actions a::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 8px;
  width: 9px;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - 1px) 50%;
}
.header-actions a::before {
  transform: rotate(45deg);
}
.header-actions a::after {
  transform: rotate(-45deg);
}
.mobile-nav {
  font-size: 14px;
  display: none;
}

@media (max-width: 1000px) {
  .site-header nav {
    display: none;
  }
  .header-actions {
    margin-left: auto;
  }
  .site-header .header_wrap .header_bottom {
    height: auto;
    padding: 12px 0;
  }
  .mobile-nav {
    display: flex;
    overflow: auto;
    background: #f5f6f2;
    padding: 10px 0;
    gap: 20px;
    font-size: 11px;
    white-space: nowrap;
  }
  .mobile-nav_wrap {
    width: 85%;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .header-actions a:first-child {
    display: none;
  }
  .header-actions a {
    padding: 12px;
  }
}