@charset "UTF-8";
/* ===============================
   ナビ共通
================================ */
.navbar {
  background: transparent;       /* 初期は透明 */
  transition: background .4s, box-shadow .4s;
}

/* スクロール後 */
.navbar.navbar-scrolled {
  background: #eaf6fb !important;  /* 色付き */
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* ナビリンク共通 */
.navbar .nav-link {
  color: #fff;  /* 初期は白文字（透明背景向け） */
  transition: color .4s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 英語 */
.nav-link .en {
  display: block;
  transition: transform .35s ease, opacity .35s ease;
}

/* 日本語 */
.nav-link .jp {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  white-space: nowrap;
}

/* hover時 EN→JP */
.nav-link:hover .en {
  transform: translateY(-120%);
  opacity: 0;
}

.nav-link:hover .jp {
  transform: translate(-50%, -120%);
  opacity: 1;
}

/* スクロール後リンク色 */
.navbar.navbar-scrolled .nav-link {
  color: #333 !important;
}

/* ブランドロゴ文字色 */
.navbar .navbar-brand {
  color: #fff;
}

.navbar.navbar-scrolled .navbar-brand {
  color: #333 !important;
}

/* ===============================
   ハンバーガー色
================================ */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* ===============================
   ハンバーガー時（スマホ）
================================ */
@media (max-width: 992px) {

  /* container 幅解除 */
  .navbar > .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 全画面メニュー */
  .navbar-collapse {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: #ffffff;

    display: flex;
    flex-direction: column;
    justify-content: center;  /* 縦中央 */
    align-items: center;      /* 横中央 */
    text-align: center;

    z-index: 9999;
  }

  .navbar-nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 0 !important;  /* 右寄せ解除 */
  }

  .navbar-nav .nav-link {
    font-size: 20px;
    margin: 15px 0;
    justify-content: center;
  }

  .nav-link {
    justify-content: center;
  }

  /* スマホでは日本語だけ表示 */
  .nav-link .en {
    display: none !important;
  }
  .nav-link .jp {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===============================
   PC ナビ（右寄せ）
================================ */
@media (min-width: 992px) {
  .navbar-nav {
    margin-left: auto;
  }
}