/* ==================================================
   スマートフォンメニュー
================================================== */

:root {
  /* JavaScriptで実際のヘッダー高に更新 */
  --sp-header-height: 64px;

  /* メニュー左側に残す余白 */
  --sp-menu-gap: 24px;

  /* スクロールバーが消える分の補正 */
  --sp-scrollbar-compensation: 0px;

  /* メニュー背景色 */
  --sp-menu-background: #fff;
}

/* 画面上では非表示、読み上げでは有効 */
.visually_hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* PCではスマホ用ボタンとメニューを非表示 */
.menu_toggle,
.sp_menu {
  display: none;
}


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 767px) {

  /* PC用ナビゲーションを非表示 */
  #header-menu {
    display: none;
  }

  /*
   * メニュー表示中はページを固定
   * topの値はJavaScriptで設定
   */
  body.is_menu_locked {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  /*
   * メニューを開いている間も、
   * 元のヘッダーを画面上部に残す
   */
  body.is_menu_locked header {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: var(--sp-scrollbar-compensation);
    width: auto;
    background-color: #fff;
    box-sizing: border-box;
  }

  #header-area {
    position: relative;
  }


  /* ==================================================
     ハンバーガーボタン
  ================================================== */

  .menu_toggle {
    position: relative;
    z-index: 10001;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    padding: 0;

    background: transparent;
    border: 0;

    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
  }

  .menu_toggle_icon {
    position: relative;
    display: block;
    width: 28px;
    height: 20px;
  }

  .menu_toggle_icon span {
    position: absolute;
    left: 0;

    display: block;
    width: 100%;
    height: 2px;

    background-color: #333;

    transition:
      top 0.3s ease,
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .menu_toggle_icon span:nth-child(1) {
    top: 0;
  }

  .menu_toggle_icon span:nth-child(2) {
    top: 9px;
  }

  .menu_toggle_icon span:nth-child(3) {
    top: 18px;
  }

  /* メニュー表示中は×印にする */
  html.is_menu_open .menu_toggle_icon span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
  }

  html.is_menu_open .menu_toggle_icon span:nth-child(2) {
    opacity: 0;
  }

  html.is_menu_open .menu_toggle_icon span:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
  }


  /* ==================================================
     スマホメニュー本体
  ================================================== */

  .sp_menu {
    position: fixed;
    z-index: 9999;

    /* 元のヘッダーの下から表示 */
    top: var(--sp-header-height);

    /*
     * スクロールバーが消えた場合も、
     * 開く前と同じ右端位置を維持
     */
    right: var(--sp-scrollbar-compensation);
    bottom: 0;
    left: auto;

    display: flex;
    flex-direction: column;

    /*
     * 左側だけ24px空ける
     *
     * 100vwにはスクロールバー幅が含まれるため、
     * 補正分も差し引く
     */
    width: calc(
      100vw
      - var(--sp-scrollbar-compensation)
      - var(--sp-menu-gap)
    );

    height: calc(
      100vh - var(--sp-header-height)
    );

    height: calc(
      100dvh - var(--sp-header-height)
    );

    background-color: var(--sp-menu-background);
    box-sizing: border-box;

    /*
     * 閉じている状態
     * 少し右へずらし、透明にしておく
     */
    visibility: hidden;
    opacity: 0;
    transform: translate3d(48px, 0, 0);
    pointer-events: none;

    transition:
      opacity 0.4s ease,
      transform 0.4s ease,
      visibility 0s linear 0.4s;
  }

  /* 開いている状態 */
  html.is_menu_open .sp_menu {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;

    transition:
      opacity 0.4s ease,
      transform 0.4s ease,
      visibility 0s;
  }

  /*
   * 閉じている間は、
   * 内部のリンクやボタンも確実に操作不能にする
   */
  html:not(.is_menu_open) .sp_menu,
  html:not(.is_menu_open) .sp_menu * {
    pointer-events: none !important;
  }


  /* ==================================================
     メニューパネル
  ================================================== */

  .sp_menu_panels {
    position: relative;

    flex: 1 1 auto;
    min-height: 0;

    overflow: hidden;

    background-color: var(--sp-menu-background);
    box-sizing: border-box;
  }

  .sp_menu_panel {
    position: absolute;
    inset: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background-color: var(--sp-menu-background);
    box-sizing: border-box;

    visibility: hidden;
    transform: translateX(100%);
    pointer-events: none;

    transition:
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }

  /*
   * メニューが開いているときだけ、
   * 現在のパネルを表示・操作可能にする
   */
  html.is_menu_open .sp_menu_panel.is-current {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  /*
   * 子メニューを開いたときの親パネル
   */
  html.is_menu_open .sp_menu_panel.is-before {
    visibility: visible;
    transform: translateX(-25%);
    pointer-events: none;
    transition-delay: 0s;
  }


  /* ==================================================
     メニューリスト
  ================================================== */

  .sp_menu_list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sp_menu_list li {
    margin: 0;
    padding: 0;

    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
  }

  .sp_menu_list a,
  .sp_menu_next {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 64px;

    padding: 16px 52px 16px 24px;

    color: #222;
    background-color: var(--sp-menu-background);
    border: 0;

    font: inherit;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
    text-decoration: none;

    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
  }

  /*
   * 子メニューがあるボタンの右矢印
   */
  .sp_menu_next::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 25px;

    width: 10px;
    height: 10px;

    border-top: 2px solid #2a7f7b;
    border-right: 2px solid #2a7f7b;

    transform: translateY(-50%) rotate(45deg);
  }


  /* ==================================================
     子メニュー
  ================================================== */

  .sp_submenu_header {
    position: sticky;
    z-index: 2;
    top: 0;

    padding: 12px 20px 18px;

    background-color: var(--sp-menu-background);
    border-bottom: 1px solid #ddd;

    box-sizing: border-box;
  }

  .sp_menu_back {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 40px;
    padding: 4px 10px 4px 24px;

    color: #2a7f7b;
    background: transparent;
    border: 0;

    font: inherit;
    font-size: 1.4rem;

    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
  }

  .sp_menu_back::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 5px;

    width: 9px;
    height: 9px;

    border-bottom: 2px solid #2a7f7b;
    border-left: 2px solid #2a7f7b;

    transform: translateY(-50%) rotate(45deg);
  }

  .sp_submenu_title {
    margin: 8px 0 0;

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
  }

  /*
   * 子メニュー内の親ページへのリンク
   */
  .sp_menu_parent_link a {
    color: #2a7f7b;
    font-weight: 700;
    background-color: #f1f8f7;
  }


  /* ==================================================
     キーボード操作
  ================================================== */

  .menu_toggle:focus-visible,
  .sp_menu button:focus-visible,
  .sp_menu a:focus-visible {
    outline: 3px solid #2a7f7b;
    outline-offset: -3px;
  }
}