/* ==============================
 * dems Local Navigation
 * PC: fixed below header, scroll-spy active state
 * SP: horizontal scroll, auto-scroll to active
 * ============================== */

.p-demsSec_localNavi {
  z-index: 9998;
  background-color: #ebebeb;
  margin-bottom: 2.5vw;
}

/* Fixed mode: managed by JS */
.p-demsSec_localNavi.is-fixed {
  position: fixed;
  top: 6.5vw;
  left: 0;
  right: 0;
}

.p-demsSec_localNavi ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 81.25vw; /* pcContWidth: 1300/1600*100 */
}

.p-demsSec_localNavi li {
  flex: 1;
  text-align: center;
}

.p-demsSec_localNavi li a {
  display: block;
  padding: 1.125vw 0;
  font-size: 1vw;
  font-weight: 500;
  letter-spacing: 0.1rem;
  color: #222020;
  text-decoration: none;
  position: relative;
}

@media screen and (min-width: 961px) {
  .p-demsSec_localNavi li a {
    transition: opacity 0.3s;
  }
  .p-demsSec_localNavi li a:hover {
    opacity: 0.6;
  }
}

/* Active state */
.p-demsSec_localNavi li.is-active a {
  font-weight: 700;
}
.p-demsSec_localNavi li.is-active a span {
  padding-bottom: 0.3em;
  border-bottom: 3px solid #222020;
}

/* ---- SP ---- */
@media screen and (max-width: 960px) {
  .p-demsSec_localNavi {
    margin-bottom: 5.3333vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .p-demsSec_localNavi::-webkit-scrollbar {
    display: none;
  }

  .p-demsSec_localNavi.is-fixed {
    top: 13.3333333333vw;
  }

  .p-demsSec_localNavi ul {
    max-width: none;
    width: max-content;
    padding: 0 5.3333vw;
    flex-wrap: nowrap;
  }

  .p-demsSec_localNavi li {
    flex: none;
    white-space: nowrap;
  }

  .p-demsSec_localNavi li a {
    padding: 3.2vw 4vw;
    font-size: 3.7333vw;
  }

  .p-demsSec_localNavi li.is-active a span {
    border-bottom-width: 2px;
  }
}