@charset "utf-8";
/* :target{
  scroll-margin-top:calc(var(--page-nav-link-line-height) + var(--page-nav-link-padding-y) * 2 + var(--page-nav-padding-y) * 2 + var(--sticky-header-height)) !important;
} */

/*--- page nav ---*/
.page-nav{
  position: -webkit-sticky;
  position: sticky;
  top: var(--sticky-header-height);
  background-color: var(--color-bg-neutral-0);
  box-shadow: 0px 4px 8px 0px #00000012;
  width: 100%;
  padding: var(--page-nav-padding-y) var(--page-nav-padding-x);
  z-index: 40;
  scrollbar-color: #ccc #fff;
  scrollbar-width: thin;
  overflow-x: auto;
  width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.page-nav__list{
  white-space: nowrap;
  text-align: center;
}
.page-nav__list li{
  display: inline-block;
}
.page-nav__link{
  position: relative;
  display: block;
  padding: var(--page-nav-link-padding-y) var(--page-nav-link-padding-x);
  font-size: var(--page-nav-link-font-size);
  line-height: var(--page-nav-link-line-height);
  font-weight: 700;
  white-space: nowrap;
}
.page-nav__list li:first-child > .page-nav__link{
  padding-left: 0;
}
.page-nav__list li:last-child > .page-nav__link{
  /* padding-right: 0; */
}
/* .page-nav__list li:last-child > .page-nav__link{
  padding-right: 0;
} */
.page-nav__link:after {
  content: "";
  position: absolute;
  top: calc(50% + 1em);
  left: var(--page-nav-link-padding-x);
  width: calc(100% - var(--page-nav-link-padding-x)*2);
  height: 2px;
  background-color: var(--color-txt-primary);
  transition: var(--transition-underline);
  transform: scale(0);
  transform-origin: right;
}
.page-nav__list li:first-child > .page-nav__link:after{
  left: 0;
  width: calc(100% - var(--page-nav-link-padding-x));
}
.page-nav__list li:last-child > .page-nav__link:after{
  /* width: calc(100% - var(--page-nav-link-padding-x)); */
}
/* .page-nav__list li:last-child > .page-nav__link{
  width: calc(100% - var(--page-nav-link-padding-x));
} */
@media (hover: hover) and (pointer: fine) {
.page-nav__link:hover::after {
  transform: scale(1);
  transform-origin: left;
}
}
.page-nav__link.js-current:after{
  transform: scale(1);
  transform-origin: left;
}
@media (min-width: 768px) {
  :root {
    --page-nav-padding-y:calc(0.762vw + 7.029px);
    --page-nav-padding-x:0;
    --page-nav-link-font-size: calc(0.381vw + 1.251rem);
    --page-nav-link-line-height: calc(var(--page-nav-link-font-size) * 1.667);
    --page-nav-link-padding-y:calc(0.1905vw + 9.257px);
    --page-nav-link-padding-x:calc(0.952vw + 6.286px);
  }
  body.js-header-fix .header--fixed {
    box-shadow: none;
  }
}
@media (min-width: 1440px) {
  :root {
    --page-nav-padding-y: 18px;
    --page-nav-padding-x: 0;
    --page-nav-link-font-size: 18px;
    --page-nav-link-line-height: 30px;
    --page-nav-link-padding-y: 12px;
    --page-nav-link-padding-x: 20px;
  }
}
@media (max-width: 767px){
  :root {
    --page-nav-padding-y: 10px;
    --page-nav-padding-x:0;
    --page-nav-link-font-size: 1.4rem;
    --page-nav-link-line-height: 30px;
    --page-nav-link-padding-y: 0;
    --page-nav-link-padding-x: 10px;
  }
}