/* =========================================================
   HQ Background: Style
   key: dbar-header-scrollin
   name: welina D-Bar CASABLANCA
   group: set
   type: Style
   layer: header
   ========================================================= */

/* =========================================================
   Header Base
   ========================================================= */

#fixed_header {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

#fixed_header.is-footer-inview {
  animation: none;
  transform: translateY(-100%) !important;
}

/* hidden checkbox */
#fixed_header .l-header__spToggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   PC
   ========================================================= */

@media (min-width: 768px) {
  #fixed_header .l-header__menu.header_menu > li > a {
    color: rgba(255, 255, 255, 0.78);
    border-left: 1px dotted rgba(255, 255, 255, 0.25);

    font-weight: 300;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
  }

  #fixed_header .l-header__menu.header_menu > li > a:hover,
  #fixed_header .l-header__menu.header_menu > li.current-menu-item > a {
    color: #d4b24a;
    background: rgba(255, 255, 255, 0.05);
  }
}

/* =========================================================
   SP
   ========================================================= */

@media (max-width: 767px) {
  #fixed_header .l-header__inner.l-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #fixed_header .l-header__toggle,
  #fixed_header .l-header__phone {
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.85);
  }

  #fixed_header .l-header__toggleIcon {
    display: block;
    line-height: 1;
  }

  #fixed_header .l-header__toggleIcon--open::before {
    content: "☰";
    font-size: 30px;
    line-height: 1;
  }

  #fixed_header .l-header__toggleIcon--close {
    display: none;
  }

  #fixed_header .l-header__toggleIcon--close::before {
    content: "×";
    font-size: 42px;
    line-height: 1;
  }

  #fixed_header .l-header__spToggle:checked ~ .l-header__actions .l-header__toggleIcon--open {
    display: none;
  }

  #fixed_header .l-header__spToggle:checked ~ .l-header__actions .l-header__toggleIcon--close {
    display: block;
  }

  #fixed_header .l-header__nav {
    background: rgba(0, 0, 0, 0.95);
  }

  #fixed_header .l-header__menu.header_menu {
    background: rgba(0, 0, 0, 0.95);
  }

  #fixed_header .l-header__menu.header_menu > li > a {
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    text-align: center;
  }

  #fixed_header .l-header__menu.header_menu > li > a:hover,
  #fixed_header .l-header__menu.header_menu > li.current-menu-item > a {
    color: #bfa136;
    background: rgba(255, 255, 255, 0.06);
  }
}