@charset "UTF-8";
/* ------------------------------------------------------------------
   nav-fix.css
   スマホのドロワーメニューを body 直下へ移動したことに伴う再定義。
   元の指定は .header .hd_block .hd_nav_wrap でヘッダー内前提のため、
   同じ内容を body > .hd_nav_wrap で当て直している。
   ※ position と z-index のみ意図的に変更（下部の上書きブロック参照）
   ------------------------------------------------------------------ */

body > .hd_nav_wrap {
  display:flex;
  align-items:center;
  gap:clamp(32px,40 / 1500 * 100vmax,48px);
}
body > .hd_nav_wrap .hd_nav ul {
  display:flex;
  align-items:center;
  gap:clamp(24px,30 / 1500 * 100vmax,36px);
}
body > .hd_nav_wrap .hd_nav ul>li a {
  display:block;
  padding:clamp(4px,5 / 1500 * 100vmax,6px);
}
body > .hd_nav_wrap .hd_nav ul>li a .nav_en {
  display:none;
}
body > .hd_nav_wrap .hd_nav ul>li a .nav_ja {
  display:block;
  margin-right:-.1em;
  letter-spacing:.1em;
  transition:all .3s ease-in-out;
}
body > .hd_nav_wrap .hd_contact {
  width:fit-content;
  gap:clamp(22.4px,28 / 1500 * 100vmax,33.6px);
  padding:clamp(12px,15 / 1500 * 100vmax,18px) clamp(36px,45 / 1500 * 100vmax,54px) clamp(12px,15 / 1500 * 100vmax,18px);
  padding-left:clamp(32px,40 / 1500 * 100vmax,48px);
  border-radius:clamp(24px,30 / 1500 * 100vmax,36px);
}
body > .hd_nav_wrap .hd_contact:after {
  display:none;
}
body > .hd_nav_wrap .hd_contact>p {
  font-size:clamp(14px,16 / 1500 * 100vmax,16 * 1.1px);
  font-weight:700;
  letter-spacing:.1em;
  margin-right:-.1em;
  line-height:1.4375;
  font-family:Noto Sans JP,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,sans-serif;
}
body > .hd_nav_wrap .nav_graphic {
  display:none;
}

@media (max-width: 768px){
  body > .hd_nav_wrap {
    width:100%;
    height:100vh;
    flex-direction:column;
    gap:45px;
    padding:73.61px 8% 30px;
    background:#ffffffb3;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    transform:translate(100%);
    overflow-y:scroll;
  }
  body > .hd_nav_wrap .hd_nav {
    width:100%;
    padding:5vh 4% 0;
  }
  body > .hd_nav_wrap .hd_nav ul {
    flex-direction:column;
    gap:30px;
  }
  body > .hd_nav_wrap .hd_nav ul>li {
    width:100%;
  }
  body > .hd_nav_wrap .hd_nav ul>li a {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
  }
  body > .hd_nav_wrap .hd_nav ul>li a .nav_en {
    display:block;
    font-size:clamp(50 * .7px,50 / 1500 * 100vmax,50 * 1.1px);
    font-weight:700;
    letter-spacing:0em;
    margin-right:-0em;
    line-height:1;
    font-family:Open Sans,sans-serif;
  }
  body > .hd_nav_wrap .hd_contact {
    padding-top:1.5vmax;
    padding-bottom:1.5vmax;
  }
  body > .hd_nav_wrap .hd_contact {
    width:100%;
    justify-content:space-around;
    padding-top:18px;
    padding-bottom:18px;
    border-radius:30px;
  }
  body > .hd_nav_wrap .hd_contact>p {
    font-size:16px;
  }
  body > .hd_nav_wrap .nav_graphic {
    display:block;
    position:absolute;
    bottom:0;
    left:-30px;
    z-index:-1;
  }
}

@media (min-width: 769px){
  body > .hd_nav_wrap .hd_nav ul>li a:hover .nav_ja {
    color:#1c773b;
  }
}

/* ------------------------------------------------------------------
   ここからが今回の不具合修正の本体
   ------------------------------------------------------------------ */
@media (max-width: 768px){
  body > .hd_nav_wrap {
    /* 元は position:absolute（基準がヘッダー）だった。
       body直下へ移したので画面基準の fixed にする */
    position: fixed;
    /* 元は z-index:-1（ヘッダーの重なり文脈の中で背面）。
       .header が z-index:10 なので、その下の 9 を指定して
       ハンバーガーボタンが常に最前面に残るようにする */
    z-index: 9;
  }
}