@charset "UTF-8";

/*
** Description: のぞみデンタルクリニック
** Navigation - CSS
** ================================================== */

nav ul {
  list-style: none;
  max-width: 1000px;
  text-align: center;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-s);
}


/* Header - Navigation
---------------------------------------- */
.headerNav {
  position: relative;
  z-index: 1000;
  margin-top: -60px;
}
.headerNav ul li a {
  display: grid;
  padding: var(--size-s) 0;
  border-radius: var(--size-s) var(--size-s) 0 0;
  border-bottom: 4px solid transparent;
}
.headerNav ul li.current-menu-item a,
.headerNav ul li a:hover {
  background-color: rgb(255 255 255 / 0.8);
  color: var(--color_orangeMain);
  border-bottom: 3px solid var(--color_orangeMain);
  translate: 0 -4px;
}
.headerNav ul li a::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
  font-size: var(--size-l);
}

.headerNav ul li.home a::before {
  content: "\f015";
}

.headerNav ul li.treatment a::before {
  content: "\f0f1";
  font-weight: 900;
}

.headerNav ul li.clinic a::before {
  content: "\f0f0";
  font-weight: 900;
}

.headerNav ul li.faq a::before {
  content: "\f4ad";
}


/* Footer - Navigation
---------------------------------------- */
.footerNav ul li a {
  color: var(--color_white);
}