@charset "utf-8";

/* PC表示では三本線ボタンを隠す */
.hamburger-btn {
  display: none;
}

/* ==========================================
   スマホ表示の設定（画面幅768px以下）
   ========================================== */
@media screen and (max-width: 768px) {

  /* ----------------------------------
     1 & 2. 三本線ボタンを「画面最上部・右端」に固定
     ---------------------------------- */
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    
    /* 社名より上・右端に配置するための固定指定 */
    position: fixed;
    top: 15px;      /* 上からの位置（必要に応じて調整） */
    right: 15px;    /* 右端からの位置（左端にしたい場合は left: 15px; に変更） */
    z-index: 10001; /* 最前面に表示 */
  }

  /* 三本線の線 */
  .hamburger-btn span {
    width: 100%;
    height: 3px;
    background-color: #333; /* 線の色（暗めの背景には白 #fff に変更） */
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* ----------------------------------
     3. メニューを展開したときにコンテンツ上に重ねる
     ---------------------------------- */
  .nav-wrap.nav-menu01 {
    display: none; /* 通常時は非表示 */
    
    /* 画面全体（またはコンテンツ上）に被せる指定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 画面の高さいっぱいにする */
    background-color: rgba(255, 255, 255, 0.95); /* 白背景（少し透け感） */
    padding-top: 60px; /* 上部のボタンと重ならないための余白 */
    overflow-y: auto;  /* 項目が多い場合にスクロール可能にする */
    z-index: 10000;    /* コンテンツより前に表示 */
  }

  /* JavaScriptで is-active が付いたら表示 */
  .nav-wrap.nav-menu01.is-active {
    display: block !important;
  }

  /* メニュー内の見た目調整 */
  .nav-wrap.nav-menu01 ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav-wrap.nav-menu01 li {
    width: 100%;
    text-align: center;
  }

  .nav-wrap.nav-menu01 li a {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #eee;
  }

  /* ----------------------------------
     ボタンが「×」に変化するアニメーション
     ---------------------------------- */
  .hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }
  .hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }
}