@charset "utf-8";
/* Navigation CSS Document */

.navigation .navbar .navbar-nav {
  display: flex;
  gap: 25px;
}

/* ハンバーガーボタン本体 */
.navbar-expand-lg .navbar-toggler,
.navigation .navbar .navbar-toggler {
  display: block;
  position: relative;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  margin-left:auto;
}

.navigation .navbar .navbar-toggler:focus,
.navigation .navbar .navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

/* ハンバーガーの3本線 */
.navigation .navbar .navbar-toggler .toggler-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 30px;
  height: 2px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border-radius: 999px;
  transform-origin: center center;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    background-color 0.25s ease;
}

/* 通常時：上の線 */
.navigation .navbar .navbar-toggler .toggler-icon:nth-of-type(1) {
  transform: translate(-50%, -10px);
}

/* 通常時：中央の線 */
.navigation .navbar .navbar-toggler .toggler-icon:nth-of-type(2) {
  transform: translate(-50%, -50%);
}

/* 通常時：下の線 */
.navigation .navbar .navbar-toggler .toggler-icon:nth-of-type(3) {
  transform: translate(-50%, 8px);
}

/* 開いた時：Xの1本目 */
.navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 開いた時：中央線は非表示 */
.navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

/* 開いた時：Xの2本目 */
.navigation .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.region.region-header-nav {
  margin-left: auto;
}

.navigation .navbar .navbar-nav .nav-item a:hover {
  color: var(--link-hover-color);
}

.navigation .navbar .navbar-nav .nav-item {
  position: relative;
  /* margin: 0 28px; */
}

nav.menu--main li.nav-item a {
  display: block;
}

nav.menu--main li.nav-item a:hover {
  color: #fff !important;
}

.navigation .navbar .navbar-collapse {
  display: none !important;
}

.navigation .navbar .navbar-collapse.show {
  display: block !important;
}

.navigation .navbar .navbar-nav {
  gap: 0px;
}

.navigation .navbar .navbar-nav .nav-item:last-child a {
  border-bottom: 0px;
}

.navigation .navbar .navbar-nav .nav-item {
  margin: 0px;
}

.navigation .navbar .navbar-collapse.show {
  position: absolute;
  top: 44px;
  width: 100vw;
  background: rgba(0, 0, 0, 0.9);
  padding: 20px 20px 60px 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 999;
  max-width: 500px;
  overflow: hidden;
}

.navigation .navbar .navbar-collapse.show .navbar-nav.m-auto {
  margin-top: 0px;
  display: flex;
  gap: 50px;
  flex-direction: column;
}

nav.menu--main li.nav-item {
  height: 55px;
}

nav.menu--main li.nav-item a {
  width: 100%;
  font-size: 32px;
  font-family: "Inria Serif", serif;
  font-weight: 400;
  color: #fff;
  text-align: left;
}

.navigation button.navbar-toggler {
  order: 3;
}

.navigation .region.region-header-login {
  order: 2;
  margin-left: auto;
  margin-right: 20px;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(1):after {
  content: "トップページ";
  font-size: 14px;
  display: block;
  color: #fff;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(2):after {
  content: "お店を探す";
  font-size: 14px;
  display: block;
  color: #fff;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(3):after {
  content: "お店ランキング";
  font-size: 14px;
  display: block;
  color: #fff;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(4):after {
  content: "ショート";
  font-size: 14px;
  display: block;
  color: #fff;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(5):after {
  content: "グラビア";
  font-size: 14px;
  display: block;
  color: #fff;
}

.navigation .navbar .navbar-nav .nav-item:nth-child(6):after {
  content: "キャスト求人を探す";
  font-size: 14px;
  display: block;
  color: #fff;
}

#block-onerise-front-shop-header-main-navigation {
  margin-bottom: 50px;
}

ul.menu a.is-active {
  color: #fff;
}