.invisible-label,
.invisible-checkbox {position: fixed; opacity: 0; left: 0;top: 0;pointer-events: none}

/*
menu
*/
:root{
  --topbar-h: 96px;
}
@media screen and (min-width:768px) {
  :root{
    --topbar-h: 85px;
  }
}
.site-header  {
  --menu-bg-color: #fff;
  --menu-color: var(--text);
  --menu-color-active: var(--primary);
  --menu-font: var(--font-base);
  --menu-weight: 400;
  --menu-width: 120px;
  --submenu-bg: var(--color-grey100);
  --submenu-bgcolor-active: var(--primary);
  --submenu-color-active: #fff;
  padding-block:1rem;padding-inline: var(--s-pad-inline);
  display: flex;align-items: center;justify-content: space-between;
  background-color: var(--menu-bg-color);
}

@media screen and (max-width:767px) {
  .header-fixed-mobile .site-header {position: fixed;top: 0;left: 0;right: 0 ;z-index: 10;}
  .logo-wrap .brand-image{width: auto; height: 60px;display: block }
}
@media screen and (min-width:768px) {
  .site-header {padding-block: 0}
}


.invisible-checkbox {position: fixed; opacity: 0; left: 0;top: 0;}
.show-mobile,
.show-desktop {display: none;}
@media screen and (max-width:767px) {
  .show-mobile {display: block;}
}
@media screen and (min-width:768px) {
  .show-desktop {display: block;}
}

/* menu icon */
.menu-icon-wrap {display: block;width: 64px;height: 64px;border-radius: 50%;padding: 26px 16px;background: var(--primary);}
.menu-icon { display: block; background: #fff; width: 32px; height: 2px; border-radius: 4px; box-shadow: 0 10px 0px #fff;  }

.toggle-nav a {display: block; color: var(--menu-color); font-family: var(--menu-font); font-size: 1rem; font-weight: var(--menu-weight);  }

@media screen and (max-width:767px) {
  .toggle-nav {background-color: var(--menu-bg-color); position: fixed; top: var(--topbar-h);left: 0; padding: 0; margin: 0; width: 100%;height:100%; transition: transform .5s 0s,visibility 0s 0s; transform: translateY(-100%);  z-index: 20; visibility: hidden;}
  .toggle-nav a {padding: 1rem; }
  .toggle-nav .current_page_ancestor>a,
  .toggle-nav .current-menu-item>a,
  .toggle-nav a:hover {color:var(--primary); }

  .menu-item-has-children >a>.svg-icon{display: block;stroke: none;width: 3.75rem;height: 3.25rem;padding-inline: 1rem;margin:-1rem }
  .menu-item-parentlink>a>.svg-icon,
  .menu-item-no-children >a>.submenu-arrow{display: none;}
  .parent-menu-link:hover>.svg-icon,
  .menu-item>a:hover>.svg-icon {fill: currentColor;stroke: none}
  .toggle-nav .menu-item-has-children>a{display: flex; justify-content: space-between; align-items: center;}
  .toggle-nav a.parent-menu-link {align-items: center; display: flex; gap: 1rem;}

  .bg-close-menu {position: fixed;}
  #navcheck:checked ~ .toggle-nav {transform: translateY(0); visibility: visible;transition: transform .5s 0s,visibility 0s 0s;}
  #navcheck:checked ~ .bg-close-menu {background: rgba(0,0,0,.5); left: 0; right: 0; top: var(--topbar-h); height: 100vh; }
  .menu-icon-close {position: relative;width: 50px;height: 50px;display: block;transform: rotateZ(45deg ); overflow: hidden; left: -4px; top: -5px;}
  .menu-icon-close::after,
  .menu-icon-close::before {content:'';position: absolute;background: var(--primary); transform-origin: 0 2px;display: block;}
  .menu-icon-close::before {left: 0;top: calc(50% - 1px);width: 100%;height: 3px; }
  .menu-icon-close::after{left: calc(50% - 2px); top: 1px; width: 3px; height: 100%;}

  .mobile-header .close-menu {display: none;}
  #navcheck:checked ~ .mobile-header .close-menu {display: block;background-color: #fff;padding-block: 12px;}
  #navcheck:checked ~ .mobile-header .open-menu {display: none;}

  .no-js .site-header .sub-menu {padding-left: 1rem;}
  .js .site-header .sub-menu {
    margin-left: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    bottom: 0;
    transition: all .2s ease-in-out;
    background-color: var(--grey);
  }
  .js .active-submenu>.sub-menu{visibility: visible;left: 0;}

  .main-navigation .menu-item {border-top: solid 1px rgba(0 0 0 / .15)}
  .main-navigation .menu-item:last-child {border-bottom: solid 1px rgba(0 0 0 / .15)}
}
/* menu desktop */
@media screen and (min-width:768px) {
  .site-header  {
    --menu-bg-color: var(--grey);
  }
  .toggle-nav {display: flex;justify-content: space-between;align-items: center;margin-left: auto;}
  .main-navigation {position: relative;}
  .main-navigation .menu {display: flex;}
  .main-navigation>.menu>.menu-item>a {color: var(--menu-color);padding: 2rem 0 ;border-bottom: solid 2px transparent;width: var(--menu-width);text-align: center  }

  /* menu active */
  .main-navigation>.menu>.current-menu-ancestor>a,
  .main-navigation>.menu>.current-menu-item>a,
  .main-navigation>.menu>.menu-item>a:hover{color: var(--menu-color-active)}

  .no-js .main-navigation>.menu>.current-menu-ancestor>a,
  .no-js .main-navigation>.menu>.current-menu-item>a,
  .no-js .main-navigation>.menu>.menu-item>a:hover{border-color: var(--menu-color-active);}

  .menu-item-parentlink,
  .menu-item-backlink{display: none;}

  .menu-item-has-children:hover,
  .menu-item-has-children:hover>a{position: relative;z-index: 2;}

  .main-navigation>.menu>.menu-item-has-children::before {content: '';position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: #000;opacity: 0 ;pointer-events: none; z-index: 1;transition: .3s}
  .main-navigation>.menu>.menu-item-has-children:hover::before {opacity: .5 }
  .menu-item>a>.submenu-arrow{display: none;}

  /* menu line
     https://tympanus.net/Development/LineMenuStyles/#Alonso
  */
  .main-navigation .menu {position: relative;}
  .menu__line {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: var(--menu-width);
    height: 2px;
    pointer-events: none;
    /*border: 1px solid var(--menu-bg-color);
    border-width: 0 45px;*/
    border: 0;
    background: var(--primary);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
  }
  .js .menu__line {width: var(--w,60px);border-width: 0 var(--bw,45px) ; }
  .js .main-navigation>.menu>.menu-item>a {width: auto;padding-inline: 1rem}
  .js .main-navigation .menu {}
  .no-js .menu-item:nth-child(1).menu__item--current ~ .menu__line {transform: translate3d(0, 0, 0); }
  .no-js .menu-item:nth-child(2).menu__item--current ~ .menu__line {transform: translate3d(100%, 0, 0); }
  .no-js .menu-item:nth-child(3).menu__item--current ~ .menu__line {transform: translate3d(200%, 0, 0); }
  .no-js .menu-item:nth-child(4).menu__item--current ~ .menu__line {transform: translate3d(300%, 0, 0); }
  .no-js .menu-item:nth-child(5).menu__item--current ~ .menu__line {transform: translate3d(400%, 0, 0); }
}

/* sub menu mobile */
@media screen and (max-width:767px) {
  .main-navigation .sub-menu .image-yes>a>img{vertical-align: middle;margin-right: 1rem ;height: 32px;width: auto;}
}
/* sub menu desktop */
@media screen and (min-width:768px) {
  .toggle-nav a {padding:1rem;}
  .main-navigation .sub-menu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);opacity: 0; visibility: hidden; height: 0; overflow: hidden; transition:opacity .3s ;z-index: 99;background-color: var(--submenu-bg);border-radius: var(--radius)}

  .sub-menu:hover,
  .menu-item-has-children>a:is(:hover,:focus)+.sub-menu {opacity: 1; visibility: visible; height: auto;
    padding: 0 ;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    min-width: 250px;}
    .main-navigation .sub-menu a {text-align: left;padding: 1rem;border: 0}
    .main-navigation .sub-menu .current-menu-item>a,
    .main-navigation .sub-menu a:hover{background-color:var(--submenu-bgcolor-active);
      color:var(--submenu-color-active);
      border-radius: var(--radius-btn)

    }

    .main-navigation .sub-menu .image-yes>a {text-align: center;}
    .main-navigation .sub-menu .image-yes>a>img{display: block;margin: 0 auto 1rem;height: 60px;width: auto  }
  }