@charset "UTF-8";

@import url(common.css);
@import url(layout.css);
@import url(responsive.css);
@import url(content.css);
@import url(board.css);
@import url(form.css);
@import url(hover.css);

/* Critical renewal menu trigger: keep the legacy sprite out of first paint. */
#mobile_header a.open_m_menu {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 91px;
  height: 46px;
  color: #2B2926;
  font-family: "S-Core Dream", Arial, sans-serif;
  transition: opacity .22s ease;
}
#mobile_header a.open_m_menu img { display: none; }
#mobile_header a.open_m_menu::before {
  content: "MENU";
  position: absolute;
  top: 50%;
  left: 0;
  width: 58px;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-align: right;
}
#mobile_header a.open_m_menu::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -11px 0 currentColor, 0 11px 0 currentColor;
  transition: box-shadow .22s ease;
}
#mobile_header a.open_m_menu:hover,
#mobile_header a.open_m_menu:focus-visible { opacity: .88; }
#mobile_header a.open_m_menu:hover::after,
#mobile_header a.open_m_menu:focus-visible::after {
  box-shadow: 0 -12px 0 currentColor, 0 12px 0 currentColor;
}

@media screen and (max-width: 768px) {
  #mobile_header a.open_m_menu {
    top: 15px;
    right: 15px;
    width: 65px;
    height: 44px;
  }
  #mobile_header a.open_m_menu::before {
    width: 40px;
    font-size: 14px;
    letter-spacing: .02em;
    text-align: left;
  }
  #mobile_header a.open_m_menu::after {
    right: 9px;
    width: 5px;
    height: 5px;
    box-shadow: 0 -10px 0 currentColor, 0 10px 0 currentColor;
  }
  #mobile_header a.open_m_menu:hover::after,
  #mobile_header a.open_m_menu:focus-visible::after {
    box-shadow: 0 -11px 0 currentColor, 0 11px 0 currentColor;
  }
}