/* タブレット以上（768px〜）ではハンバーガーを非表示にしてPCナビを使う */
@media print, screen and (min-width: 768px) and (max-width: 999px) {
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0 1.5vw;
    position: static;
    background: transparent;
    height: auto !important;
    width: auto;
    z-index: auto;
  }
  .menu > li {
    overflow: visible;
    margin: 0;
    width: auto;
  }
  .menu > li p {
    border-bottom: none !important;
    padding: 0 !important;
  }
  /* Fix①-a: TB ナビリンクのタップ領域を確保 */
  .menu > li a {
    padding: 8px 0;
  }
  .menu a {
    color: #042443;
  }
  /* Fix①-b: TB お問い合わせボタンに枠線・角丸・パディングを付与（PC版と同等の見た目） */
  .menu > li p.-head_menu-contact {
    border: 1px solid #1343E4 !important;
    border-radius: 30px;
  }
  .-head_menu-contact a {
    padding: 10px 15px !important;
  }
  .menu-button-container {
    display: none;
  }
}

/* SP（〜767px）: ハンバーガーメニュー */
@media print, screen and (max-width: 767px) {
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

@media print, screen and (max-width: 767px) {
  .menu > li {
    margin: 0 1rem;
    overflow: hidden;
  }
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle, #menu-toggle02 {
  display: none;
}

.menu-button {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 48px;
}

@media (max-width: 767px) {
  .-drop {
    position: relative;
  }
  .menu-button-container {
    display: flex;
  }
  .menu-button-container02 {
    width: 100%;
    height: 45px;
    position: absolute;
    top: 0;
  }
  .menu {
    background: #1343e4;
    position: absolute;
    top: 0;
    /* #7修正: ヘッダー実高さ（ロゴ53px + padding 20px×2 = 93px）に合わせる */
    margin-top: 93px;
    left: 0;
    flex-direction: column;
    width: 100%;
    align-items: center;
    z-index: 500;
  }
  .menu a {
    color: #fff;
  }
  #menu-toggle ~ .menu, #menu-toggle02 ~ .menu02 {
    height: 0;
  }
  #menu-toggle ~ .menu li {
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu {
    height: 100vh;
  }
  #menu-toggle02:checked ~ .menu02 {
    height: 100%;
  }
  #menu-toggle:checked ~ .menu p {
    border-bottom: 1px solid #042443;
    padding: 1em;
  }
  .menu > li {
    width: 100%;
  }
  .menu > p {
    margin: 0;
    padding: 0.5em 0;
    color: white;
  }

  /* SP: ボタン縦中央配置（ロゴと高さを揃える） */
  .menu-button {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 48px;
  }
}