/* ===== l-gnav =====
 * SP で「メニューが半分しか出ない」バグ対策ポイント:
 * 1) height: 100% は親要素 (=body) 依存で iOS Safari のアドレスバー表示状態で
 *    高さが変動 → 100vh + 100dvh を併記して常にビューポート全面に固定。
 * 2) inset: 0 で top/right/bottom/left を一括ゼロにし、ブラウザ既定の
 *    auto 値が残って中途半端なサイズになるのを防止。
 * 3) .lGnavInner は SP で必ず 100vw を厳格適用 (デスクトップの 540px 残りを上書き)。
 * 4) GPU 合成を予告する will-change で transform アニメ中のサブピクセル欠けを抑制。
 */
.lGnav {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* フォールバックの段階指定:
     1) 100vh: 全ブラウザ対応
     2) calc(var(--tecnes-vh) * 100): header.js が実測した値 (dvh 未対応用)
     3) 100dvh: 最新ブラウザの動的ビューポート高
     後ろほど優先度が高く、対応ブラウザでは 3) が使われる。 */
  height: 100vh;
  height: calc(var(--tecnes-vh, 1vh) * 100);
  height: 100dvh;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
              visibility 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lGnav.isOpen {
  opacity: 1;
  visibility: visible;
}

.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 44, 67, 0.5);
  cursor: pointer;
}

.lGnavInner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(540px, 100vw);
  max-width: 100vw;
  height: 100%;
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  padding: 100px 50px 60px;
  will-change: transform;
}

.lGnav.isOpen .lGnavInner {
  transform: translateX(0);
}

.box {
  display: flex;
  gap: 0 40px;
  height: 100%;
}

.rightBox {
  flex: 1;
  min-width: 0;
}

.leftBox {
  width: 160px;
  flex-shrink: 0;
}

/* ===== 見出し ===== */
.ttl01 {
  margin-bottom: 24px;
}

.ttl01 span {
  font-size: 2.4rem;
  font-weight: 700;
  font-family: var(--font-poppins), Poppins, sans-serif;
  letter-spacing: 0.05em;
  color: rgb(28, 44, 67);
  line-height: 1;
}

/* ===== リスト ===== */
.list01 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.list01 li {
  border-bottom: 1px solid rgba(28, 44, 67, 0.1);
}

.list01 .menuTtl {
  display: block;
  padding: 16px 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(28, 44, 67);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.list01 .menuTtl:hover {
  color: rgb(43, 185, 176);
}

.subMenu {
  padding-bottom: 12px;
}

.subMenu li a {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 1.3rem;
  color: rgba(28, 44, 67, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.subMenu li a:hover {
  color: rgb(43, 185, 176);
}

/* ===== 募集要項ボタン ===== */
.btn01 {
  margin-top: 24px;
}

.btn01 a {
  display: inline-flex;
  align-items: center;
  gap: 0 8px;
  padding: 14px 24px;
  border: 1px solid rgb(28, 44, 67);
  font-size: 1.4rem;
  font-weight: 500;
  color: rgb(28, 44, 67);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.btn01 a:hover {
  background-color: rgb(28, 44, 67);
  color: rgb(255, 255, 255);
}

/* ===== ENTRY ===== */
.list02 {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
  margin-top: 16px;
}

.list02 li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background-color: rgb(28, 44, 67);
  color: rgb(255, 255, 255);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s;
}

.list02 li a:hover {
  background-color: rgb(43, 185, 176);
}

/* ===== タブレット（〜1024px）===== */
@media screen and (max-width: 1024px) {
  .box {
    flex-direction: column;
    gap: 32px 0;
  }

  .leftBox {
    width: 100%;
  }

  .lGnavInner {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 100px 40px 60px;
  }
}

/* ===== モバイル（〜767px）===== */
@media screen and (max-width: 767px) {
  /* iOS Safari のアドレスバー表示変動に確実追従させるため
     ラッパー側にも 100dvh を再宣言（CSS の cascade 上、最後の宣言が勝つ）。 */
  .lGnav {
    height: 100vh;
    height: calc(var(--tecnes-vh, 1vh) * 100);
    height: 100dvh;
  }

  .lGnavInner {
    padding: 25.3333vw 10.6667vw 16vw;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    height: calc(var(--tecnes-vh, 1vh) * 100);
    height: 100dvh;
  }

  .box {
    flex-direction: column;
    gap: 8.53333vw 0;
  }

  .leftBox {
    width: 100%;
  }

  .ttl01 span {
    font-size: 6.4vw;
  }

  .list01 .menuTtl {
    font-size: 4.26667vw;
  }

  .subMenu li a {
    font-size: 3.73333vw;
  }

  .list02 li a {
    font-size: 4.26667vw;
    padding: 4vw;
  }
}