/* =====================================================
   SWIT / HEADER & MOBILE NAVIGATION
===================================================== */


/* -----------------------------------------------------
   MOBILE MENU
----------------------------------------------------- */

@media (max-width: 959px) {

  /*
   * SWELL標準のドロワー構造を活かしながら、
   * パネル幅・余白・階層だけをSWIT向けに整える。
   */
  .p-spMenu__inner {
    width: min(88vw, 420px);
    max-width: none;

    --color_menu_bg: var(--site-white);
    --color_menu_text: var(--site-heading);

    box-shadow:
      18px 0 48px rgba(17, 24, 39, .12);
  }


  .p-spMenu__inner::before {
    background: var(--site-white);

    opacity: 1;
  }


  .p-spMenu__overlay {
    background-color: rgba(17, 24, 39, .42);

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }


  .p-spMenu__body {
    height: 100%;

    padding: 84px 28px 40px;

    color: var(--site-heading);
  }


  /* -----------------------------------------------------
     MOBILE MENU / CLOSE
  ----------------------------------------------------- */

  .p-spMenu__closeBtn {
    top: 18px;
  }


  .p-spMenu__closeBtn
  .c-iconBtn {
    width: 42px;
    height: 42px;

    border: 1px solid var(--site-border);
    border-radius: 50%;

    background-color: var(--site-white);

    color: var(--site-heading);
  }


  /* -----------------------------------------------------
     MOBILE MENU / TITLE
  ----------------------------------------------------- */

  .c-widget__title.-spmenu {
    margin: 0 0 18px;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--site-primary);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: .16em;
  }


  /* -----------------------------------------------------
     MOBILE MENU / NAV
  ----------------------------------------------------- */

  .p-spMenu__nav {
    margin: 0;
    padding: 0;

    border-top: 1px solid var(--site-border);
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav) {
    counter-reset: swit-menu;

    margin: 0;
    padding: 0;
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li {
    counter-increment: swit-menu;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid var(--site-border);
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li
  > a {
    position: relative;

    display: grid;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      20px;

    align-items: center;

    min-height: 64px;

    padding: 14px 10px 14px 0;

    border: 0;

    background: transparent;

    color: var(--site-heading);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: .02em;

    transition:
      color .2s ease,
      background-color .2s ease;
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li
  > a::before {
    content: "0" counter(swit-menu);

    position: static;

    display: block;

    width: auto;
    height: auto;

    margin: 0;

    background: transparent;

    color: var(--site-primary);

    font-size: 10px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: .08em;

    transform: none;
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li
  > a::after {
    content: "→";

    position: static;

    display: block;

    width: auto;
    height: auto;

    margin: 0;

    background: transparent;

    color: var(--site-primary);

    font-size: 16px;
    font-weight: 500;

    line-height: 1;

    text-align: right;

    transform: none;
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li.current-menu-item
  > a,
  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li.current_page_item
  > a {
    color: var(--site-primary);
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li
  > a:hover {
    padding-right: 10px;
    padding-left: 0;

    background-color: var(--site-primary-light);

    color: var(--site-primary);

    opacity: 1;
  }


  /* -----------------------------------------------------
     MOBILE MENU / SUB MENU
  ----------------------------------------------------- */

  .p-spMenu__nav
  .sub-menu {
    margin: 0;
    padding: 0 0 14px 34px;

    background: transparent;
  }


  .p-spMenu__nav
  .sub-menu
  a {
    padding: 10px 0;

    border: 0;

    background: transparent;

    color: var(--site-body);

    font-size: 13px;
    font-weight: 500;

    line-height: 1.6;
  }


  .p-spMenu__nav
  .sub-menu
  a::before,
  .p-spMenu__nav
  .sub-menu
  a::after {
    display: none;

    content: none;
  }

}


/* =====================================================
   RESPONSIVE / <= 767px
===================================================== */

@media (max-width: 767px) {

  .p-spMenu__inner {
    width: min(90vw, 390px);
  }


  .p-spMenu__body {
    padding:
      80px
      22px
      calc(32px + env(safe-area-inset-bottom));
  }


  .p-spMenu__nav
  :is(.c-spnav, .c-gnav)
  > li
  > a {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      18px;

    min-height: 62px;

    font-size: 15px;
  }

}