@charset "UTF-8";
/*
	Author: nag-design
	Last Update: 2024-07-12
*/
/* ================================

	ドロワーナビ

================================ */
#Drawer {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 240px;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateX(240px);
  transition: ease .5s;
  z-index: 1000; }
  @media screen and (min-width: 1024px) {
    #Drawer {
      display: none; } }
  #Drawer #Hamburger {
    position: absolute;
    display: block;
    top: 0;
    right: 240px;
    background: none;
    width: 50px;
    height: 50px;
    transition: ease .5s;
    z-index: 200;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0; }
    @media screen and (min-width: 768px) {
      #Drawer #Hamburger {
        display: none; } }
    #Drawer #Hamburger span {
      position: absolute;
      height: 2px;
      width: 22px;
      background-color: #eee;
      transition: ease .5s; }
      #Drawer #Hamburger span:nth-child(1) {
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%); }
      #Drawer #Hamburger span:nth-child(2) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
      #Drawer #Hamburger span:nth-child(3) {
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%); }
  #Drawer #DrawerMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 199; }

#Drawer.action {
  width: 240px;
  transform: translateX(0);
  overflow-y: scroll; }
  #Drawer.action #Hamburger {
    transform: translateX(50px);
    pointer-events: auto; }
    #Drawer.action #Hamburger span {
      top: 50%; }
      #Drawer.action #Hamburger span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(225deg); }
      #Drawer.action #Hamburger span:nth-child(2) {
        transform: translate(-50%, -50%);
        opacity: 0; }
      #Drawer.action #Hamburger span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-225deg); }
  #Drawer.action #DrawerMenu {
    pointer-events: auto; }

.drawermenu {
  margin: 50px 0 0 0; }
  .drawermenu__list {
    margin: 0;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    overflow: hidden; }
    .drawermenu__list--item {
      list-style-type: none;
      padding: 0;
      width: 100%;
      font-size: 1rem;
      text-align: left;
      color: #eee;
      border-bottom: 1px solid rgba(128, 128, 128, 0.2); }
      .drawermenu__list--item a {
        display: block;
        padding: 1em 0 1em 1rem;
        width: 100%;
        text-align: left;
        color: #eee; }
      .drawermenu__list--item .sns-links {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        column-gap: 12px;
        padding: 1em 0 1em 1rem; }
        .drawermenu__list--item .sns-links .sns-icon {
          padding: 0; }
          .drawermenu__list--item .sns-links .sns-icon a {
            padding: 0;
            font-size: 24px; }

main {
  transition: ease .5s;
  z-index: 1; }

footer {
  transition: ease .5s;
  z-index: 1; }

.blur {
  opacity: .5;
  filter: blur(3px) contrast(50%); }

/*# sourceMappingURL=drawer.css.map */