/*
** .header
*/

.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: var(--z-index--max);
  width: 100%;
}

.header__horizontal {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: calc(55 * 100vw / var(--standard-width));
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #fff;
  background-image: url(../../image/common/bg_header.svg);
  background-size: cover;
  background-position: center left calc(205 * 100vw / var(--standard-width));
  background-repeat: no-repeat;
}

.header__site-name {
  width: 100%;
  height: 100%;
  padding-left: calc(20 * 100vw / var(--standard-width));
  padding-right: calc(33 * 100vw / var(--standard-width));
}

.header__site-name a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}


/*
** .header__main-menu
*/

.header__main-menu {
  display: none;
}


/*
** #menu-toggle
*/

#menu-toggle {
  position: relative;
  width: calc(55 * 100vw / var(--standard-width));
  height: calc(55 * 100vw / var(--standard-width));
  font-size: calc(27 / var(--standard-font-size) * 1em);
  color: #fff;
  background-color: var(--dark);
}

@media (hover: hover) and (pointer: fine) {
  #menu-toggle {
    cursor: pointer;
  }
}

#menu-toggle::before,
#menu-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transition: var(--transition);
}

#menu-toggle::before {
  content: '\f0c9';
}

#menu-toggle::after {
  content: '\f00d';
}

.header[data-drawer="open"] #menu-toggle::before,
.header:not([data-drawer="open"]) #menu-toggle::after {
  opacity: 0;
}


/*
** .header__drawer-menu
*/

.header__drawer-menu {
  position: absolute;
  top: calc(55 * 100vw / var(--standard-width));;
  right: -100%;
  z-index: var(--z-index--mid);
  display: none;
  width: min(100%, calc(480 * 100vw / var(--standard-width)));
  height: calc(100vh - (55 * 100vw / var(--standard-width)));
  background-color: var(--dark);
  transition: var(--transition);
}

.header[data-drawer="open"] .header__drawer-menu {
  display: block;
  animation: drawerOpen 0.3s ease-out forwards;
}

.header:not([data-drawer="open"]) .header__drawer-menu {
  animation: drawerClose 0.3s ease-out forwards;
}

@keyframes drawerOpen {
  0% {
    right: -100%;
  }
  100% {
    right: 0;
  }
}

@keyframes drawerClose {
  0% {
    display: block;
    right: 0;
  }
  99% {
    right: -100%;
  }
  100% {
    display: none;
  }
}

.header__drawer-menu-nav {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: calc(72 * 100vw / var(--standard-width)) calc(36 * 100vw / var(--standard-width)) max(calc(72 * 100vw / var(--standard-width)), calc(100vh - 100svh));
}

.header__drawer-menu-list {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
}

.header__drawer-menu-list .menu-item a {
  position: relative;
  width: 100%;
  font-size: calc(18 / var(--standard-font-size) * 1em);
  font-weight: bold;
  color: #fff;
  padding-top: calc(12 * 100vw / var(--standard-width));
  padding-bottom: calc(12 * 100vw / var(--standard-width));
}

.header__drawer-menu-list .menu-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .header__drawer-menu-list .menu-item a:hover::after {
    width: 100%;
  }
}