@charset "utf-8";

.nav {
  display: flex;
  position: relative;
  margin-left: auto;
  padding: var(--spacing-sm) 0;
}

@media (max-width: 767px) {
  .nav {
    margin: auto;
    position: relative;
  }
}

/* # プライマリ */
.nav__primary {
  display: flex; /*or Block?*/
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-md);
}

.nav__primary--hide {
  display: none;
}

.nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none; /*リストの先頭の点を消す*/
  margin: 0;
  padding-left: 0;
  gap: 0;
}

@media (max-width: 767px) {
  .nav__primary {
    gap: var(--spacing-sm);
  }

  .nav__primary .nav__menu {
    flex-direction: column;
    width: 100%;
  }
}

.nav__link {
  color: var(--color-black);
  border-bottom-color: #00000000; /*リセット*/
  border-bottom: var(--border-thin);
  border-bottom-color: var(--color-black);

  margin: 0 0.3rem;
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  transition: all 0.2s ease;
  text-decoration-line: none;
}
.nav__link:hover {
  border-bottom-color: #00000000; /*リセット*/
  color: var(--color-black); /*リセット*/
  transform: scale(1.1);
}

/* ## アンダーラインのアニメーション */
.nav__link {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.nav__link:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: var(--color-dark-blue);
  height: 4px;
  transition: right 0.3s ease-out;
}
.nav__link:hover:before,
.nav__link:focus:before,
.nav__link:active:before {
  right: 0;
}

/* # モバイル */
.nav__mobile {
  position: relative;
  top: 0;
  right: 0;
  height: 10vw;
  width: 9.5vw;
}

.nav__mobile--hide {
  display: none;
}

/* ## トグルボタン */
.nav__toggle-btn {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  height: 10vw;
  width: 9.5vw;
  max-height: 60px;
  max-width: 55px;

  margin: 0;
  padding: 0;
  align-items: center;
  /* background-color: var(--color-beige-light); */
  background-color: rgba(0, 0, 0, 0); /*透明な背景色*/
  border: 1px solid var(--color-black);
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--color-black);
}

.nav__toggle-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--color-black);
}

.nav__toggle-btn:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--color-black);
}

/* ### ボタンのアイコン */
.nav__toggle-btn-icon {
  display: inline-flex;
  position: relative;
  align-self: center;
  width: 100%;
  height: 100%;
  padding: 30% 15%;
}

/* #### アニメーションするバーガーアイコン */

/* ##### パラメータ */
.hamburger-icon {
  --line-weight: calc(0.15rem);
  --line-color: var(--color-black);
}

/* ##### .hamburger-icon */
.hamburger-icon {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.hamburger-icon span {
  position: absolute; /* 自身のスペースを作らない。絶対位置指定。 */
  left: 0;
  width: 100%; /* 親要素いっぱいの幅 */
  height: var(--line-weight); /* 線の太さ */
  background-color: var(--line-color); /* 線の色 */
  border-radius: 4px; /* 角丸 */
}
.hamburger-icon, .hamburger-icon span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}
.hamburger-icon span:nth-of-type(1) { top: 0; }      /* 上の線 */
.hamburger-icon span:nth-of-type(2) { top: calc(50% - (var(--line-weight) / 2)); }   /* 真ん中の線 */
.hamburger-icon span:nth-of-type(3) { top: calc(100% - var(--line-weight)); }   /* 下の線 */

/* ##### クロスさせる */
.hamburger-icon.active span:nth-of-type(1) {
  top: calc(50% - (var(--line-weight) / 2)); /* 親要素の中央に配置 */
  transform: rotate(-45deg); /* 反時計回りに45度回転 */
}
.hamburger-icon.active span:nth-of-type(2) {
  opacity: 0; /* 透明にして非表示 */
}
.hamburger-icon.active span:nth-of-type(3) {
  top: calc(50% - (var(--line-weight) / 2)); /* 親要素の中央に配置 */
  transform: rotate(45deg); /* 時計回りに45度回転 */
}

/* ### ボタンのアニメーション */
.nav__toggle-btn{
  --anm-duration: 0.4s;
}
.nav__toggle-btn--anm-out {
  /* スティッキー解除でアニメーション実行 */
  animation: stickyUp var(--anm-duration) ease-out forwards;
}
.nav__toggle-btn--anm-in {
  /* スティッキー状態でアニメーション実行 */
  animation: stickyDown var(--anm-duration) ease-out forwards;
}
/* #### 上からスライド */
@keyframes stickyDown {
  0% {
    transform: translateY(-30px);
    opacity: 1; /* 不透明にする */
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* #### 下からスライド */
@keyframes stickyUp {
  0% {
    transform: translateY(20px);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ## モバイル メニュー */
.nav__mobile-menu {
  display: flex;
  flex-direction: column; /*縦並び*/
  justify-content: flex-end; /* 内容物はすべて下に詰める */
  position: fixed;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  z-index: var(--z-navmenu);
  padding: 0;
  background-color: var(--color-white);
}

.nav__mobile-menu--close {
  display: none;
}

.nav__mobile-menu--open {
  display: flex;
}

.nav__mobile-menu .nav__menu {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  flex-direction: column; /*縦並び*/
  justify-content: flex-start; /* 縦方向（上詰め）にする */
  align-items: flex-start; /* 横方向（左詰め）にする */
  width: auto;
  white-space: nowrap;/* テキストの折り返しを防止 */
}
.nav__mobile-menu .nav__link {
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-top: var(--spacing-sm);
  font-size: 1.2rem;
}

.nav__mobile-menu footer {
  margin: 0;
}

/* ### モバイル メニュー のアニメーション */
.nav__mobile-menu {
  --anm-duration: 0.4s;
}

.nav__mobile-menu--anm-out {
  animation: stickyUp var(--anm-duration) ease-out forwards;
}

.nav__mobile-menu--anm-in {
  animation: stickyDown var(--anm-duration) ease-out forwards;
}

.nav__mobile-menu--anm-open {
  animation: slideLeft var(--anm-duration) ease-out;
}