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

#bfHeader {
  width: 100%;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;

  /* ??????????????? */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------
   ??
------------------------------------- */

.bfLogo {
  text-align: center;
  padding: 22px 0 18px;
}

.bfLogo h1 {
  margin: 0;
  line-height: 1;
  letter-spacing: 0.08em;
}

.bfLogo img {
  height: 37px; /* 360?74 ? 1/2 */
  width: auto;
  display: inline-block;
}

/* ---------------------------------
   ????
--------------------------------- */
.bfPhoneBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  padding: 10px 0;
  background: #f7faf8;
  border-top: 1px solid #e3eee9;

  font-size: 15px;
}

.bfPhoneLabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #5a8f78;
}

.bfPhoneNumber {
  font-size: 18px;
  font-weight: 700;
  color: #005e3c;
}

/* ---------------------------------
   ????
--------------------------------- */
.bfOpenBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  padding: 6px 0;
  background: #ffffff;

  font-size: 13px;
  color: #666;
}

.bfOpenText {
  letter-spacing: 0.02em;
}


/* -------------------------------------
   ???????
------------------------------------- */

.bfGlobalNav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;

  margin: 0;
  padding: 12px 0;

  /* ??????????? */
  background: linear-gradient(
    to bottom,
    #006b45,
    #005e3c
  );
}

.bfGlobalNav li {
  margin: 0 18px;
}

.bfGlobalNav a {
  position: relative;
  display: inline-block;

  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: 0.05em;
}

/* hover ??????? */
.bfGlobalNav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.bfGlobalNav a:hover::after {
  transform: scaleX(1);
}

/* -------------------------------------
   UpdatePanel ??
------------------------------------- */

#bfHeader *,
#bfHeader a {
  box-sizing: border-box;
}