@charset "utf-8";

/*
** Description: 柏木クリニック｜医療法人社団ぶなの森
** Navigation - CSS
** ================================================== */

/* Navigation
======================================== */
nav ul {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  padding: 0;
}

nav ul li {
  padding: 0;
}

/* Header Nav
------------------------------ */
.headerNav ul li {
  border-top: 2px solid var(--color_green);
}

.headerNav ul li:nth-child(even) {
  border-left: 1px solid rgb(0 0 0 / 0.1);
}

.headerNav ul li a {
  display: grid;
  line-height: 1.4;
  padding: var(--size-s) 0;
  color: var(--color_green);
  border-top: var(--size-ss) solid transparent;
}

.headerNav ul li a:hover,
.headerNav ul li.current-menu-item a {
  background-color: var(--color_offwhite);
  color: var(--color_orange);
  border-top: var(--size-ss) solid var(--color_green);
}

.headerNav ul li a::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--size-l);
}

.headerNav ul li.outpatient a::before {
  content: "\f0f1";
}

.headerNav ul li.vaccine a::before {
  content: "\f48e";
}

.headerNav ul li.hemodialysis a::before {
  content: "\f487";
}

.headerNav ul li.clinic a::before {
  content: "\f0f8";
}

/* Footer Nav
------------------------------ */
.footerNav {
  padding: var(--size-m) 0;
}

.footerNav ul {
  grid-template-columns: repeat(4, 1fr);
}
.footerNav ul li a:hover {
  color: var(--color_orange);
}



/* MediaQuery
======================================== */
@media (width >=600px) {
  .headerNav ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .headerNav ul li:not(:first-child) {
    border-left: 1px solid rgb(0 0 0 / 0.1);
  }
}