/* -----------------------------------------------------------
©PFU Limited
----------------------------------------------------------- */
:root {
  --font-color-white: #ffffff;
  --font-color-black: #000000;
  --font-color-red: #b11d1d;

  --background-color-black: #000000;
  --background-color-white: #ffffff;
  --background-color-red: #b11d1d;

  --button-color-red: #b11d1d;

  --accent-color-black: #000000;
  --accent-color-gray: #343434;
  --accent-color-white: #ffffff;
}

/* -----------------------------------------------------------
anchorLinkNav
----------------------------------------------------------- */

.anchorLinkNav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
  width: 100%;
  height: 58px;
  background: var(--background-color-red);

  &.-fixed {
    position: fixed;
    top: 54px;
    left: 0;
    transition: top 0.3s;
  }

  &.-external {
  }
}

.dummyAnchorLinkNav {
  height: 58px;

  &.-none {
    height: 0;
  }
}

.dropdownNav {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;

  @media screen and (min-width: 561px) {
    display: none;
  }
}

.dropdownNav_select {
  width: 100%;
  height: 100%;
  padding: 0 69px 0 18px;
  overflow: hidden;
  background-color: var(--background-color-red);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}

.dropdownNav_option {
  color: #fff;
  font-size: 1.5rem;

  &.-placeholder {
    display: none;
  }
}

.dropdownNav_arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 59px;
  height: 58px;
  border-left: 1px solid var(--accent-color-white);
  pointer-events: none;

  img {
    width: auto;
  }
}

.scrollableNav {
  display: none;

  @media screen and (min-width: 561px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.scrollableNav_arrow {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  cursor: pointer;

  .scrollableNav_icoImg path {
    stroke: rgba(255, 255, 255, 1);
  }

  @media (hover: hover) {
    &:hover {
      .scrollableNav_icoImg path {
        stroke: rgba(255, 255, 255, 0.8);
      }
    }
  }
  @media (hover: none) {
    &:active {
      .scrollableNav_icoImg path {
        stroke: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.-left {
    box-shadow: 8px 0 4px -4px rgba(0, 0, 0, 0.2);

    .scrollableNav_icoImg {
      transform: rotate(90deg);
    }
  }

  &.-right {
    box-shadow: -8px 0 4px -4px rgba(0, 0, 0, 0.2);

    .scrollableNav_icoImg {
      transform: rotate(-90deg);
    }
  }

  &.-disable {
    box-shadow: 0 4px rgba(255, 255, 255, 0);
    cursor: auto;

    &:hover {
      .scrollableNav_icoImg path {
        stroke: rgba(255, 255, 255, 0.4);
      }
    }

    .scrollableNav_icoImg path {
      stroke: rgba(255, 255, 255, 0.4);
    }
  }
}

.scrollableNav_icoImg {
  width: auto;
}

.scrollableNav_list {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.scrollableNav_item {
  &.-current {
  }
}

.anchorLink {
  display: flex;
  align-items: center;
  color: #e6e6e6;
  font-size: 1.5rem;

  @media (hover: hover) {
    &:hover {
      color: #fff;
      text-decoration: underline;

      .anchorLink_Ico {
        path {
          fill: #fff;
        }
      }
    }
  }
  @media (hover: none) {
    &:hover {
      text-decoration: none;
    }

    &:active {
      color: #fff;

      .anchorLink_Ico {
        path {
          fill: #fff;
        }
      }
    }
  }

  .scrollableNav_item.-current & {
    color: #fff;
    font-weight: bold;
    pointer-events: none;
  }
}

.scrollableNav_anchorLink {
  padding: 0 15px;
}

/* .anchorLink_Ico {
  width: 14px;
  height: 14px;
  transform: translateY(1px);

  .anchorLinkNav.-external & {
    rotate: -90deg;
    transform: translateX(-1px);
  }

  .scrollableNav_item.-current & {
    path {
      fill: #fff;
    }
  }
} */

.anchorLink_txt {
  /* margin-left: 8px; */
  color: inherit;
}