@charset 'utf-8';

.l-header {
  position: sticky;
  top: 0;
  left: 0;
  border-bottom: 1px solid var(--color-border-01);
  background-color: var(--color-bg-01);
  z-index: 4;

  .l-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;

    .l-header-menu {
      display: flex;
      gap: 10px;
      align-items: center;

      .l-header-menu__help {
        cursor: pointer;
        display: inline-block;
        position: relative;

        .l-header-menu__help-button {
          display: inline-block;
          width: 30px;
          position: relative;

          .l-header-menu__help-button-image--hover {
            position: absolute;
            z-index: 1;
            width: 30px;
            height: 30px;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }

        .l-header-menu__help-container {
          display: none;
          position: absolute;
          padding-top: 7px;
          z-index: 1;
          top: 30px;
          left: 0;
        }

        .l-header-menu__help-link {
          display: flex;
          color: var(--color-text);
          font-size: 1.6rem;
          text-decoration: none;
          align-items: center;
          gap: 10px;
          background-color: #fff;
          padding: 20px;
          border-radius: 10px;
          width: 196px;
          box-sizing: border-box;

          &:hover {
            color: var(--color-primary-03);
          }
        }

        .l-header-menu__help-link.l-header-menu__help-link--link {
          &::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url('../../img/common/icon/link_gray.svg');
            background-size: cover;
          }

          &:hover {
            &::before {
              background-image: url('../../img/common/icon/link_green.svg');
            }
          }
        }

        &:hover {
          .l-header-menu__help-button {
            .l-header-menu__help-button-image--hover {
              opacity: 1;
            }
          }

          .l-header-menu__help-container {
            display: block;
          }
        }
      }

      .l-header-menu__button-wrap {
        cursor: pointer;
        position: relative;
      }

      .l-header-menu__button {
        display: flex;
        align-items: center;
        font-size: 1.6rem;
        gap: 10px;
        cursor: pointer;
        color: var(--color-text);

        .l-header-menu__button-icon {
          width: 5px;
        }
      }

      .l-header-menu__list {
        display: none;
        gap: 10px;
        background-color: #fff;
        padding: 20px 30px;
        border-radius: 10px;
        position: absolute;
        top: 32px;
        right: 0;
        width: 192px;

        .l-header-menu__list-item {
          display: block;

          .l-header-menu__link {
            color: var(--color-text);
            font-size: 1.6rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;

            &:hover {
              color: var(--color-primary-03);
            }
          }

          .l-header-menu__link.l-header-menu__link--logout {
            &::before {
              content: '';
              display: inline-block;
              width: 24px;
              height: 24px;
              background-image: url('../../img/common/icon/logout_black.svg');
              background-size: cover;
            }

            &:hover {
              &::before {
                background-image: url('../../img/common/icon/logout_green.svg');
              }
            }
          }
        }
      }

      .l-header-menu__list.is-active {
        display: grid;
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .l-header {
    .l-header-inner {
      .l-header-menu {
        .l-header-menu__help {
          &:hover {
            .l-header-menu__help-container {
              display: block;
            }
          }
        }
      }
    }
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .l-header {  
    .l-header-inner {
      padding: 10px 20px;

      .l-header-logo {
        max-width: 100px;
      }
  
      .l-header-menu {
        .l-header-menu__help {
          .l-header-menu__help-container {
            right: 0;
            left: auto;
            transform: translateX(50%);
          }
        }

        .l-header-menu__button {
          font-size: 1.4rem;
        }
  
        .l-header-menu__list {
          top: 26px;
        }
      }
    }
  }
}

/* SP */
@media screen and (max-width: 767px) {
  .l-header {  
    .l-header-inner {
      padding: 10px 20px;

      .l-header-logo {
        max-width: 100px;
      }
  
      .l-header-menu {
        .l-header-menu__button {
          font-size: 1.2rem;
          line-height: 150%;
        }
  
        .l-header-menu__list {
          top: 32px;
        }

        .l-header-menu__help {
          .l-header-menu__help-container.is-active {
            display: block;
          }
        }
      }
    }
  }
}