@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 22;
    display: block grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    block-size: var(--header-height);
    padding-block: 16px;
    padding-inline: 40px 132px;
    margin-inline: auto;
    border-block-end: 1px solid var(--gray_border);
    transition: all 250ms ease 0s;

    @media (width <=768px) {
      padding-block: 4.5vw;
      padding-inline: var(--nudge-2);
    }

    .logo {
      display: block flex;
      gap: 32px;
      align-items: center;

      @media (width <=768px) {
        gap: 1em;
      }

      img {
        @media (width <=768px) {
          inline-size: calc((100 / 390) * 129 * 1vw);
        }
      }

      [lang='en'] {
        display: block flex;
        gap: 10px;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: var(--main, #001636);
        translate: 0 5px;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 12 * 1vw);
        }

        &::before,
        &::after {
          display: block flow;
          inline-size: 20px;
          block-size: 1px;
          content: '';
          background: currentcolor;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 12 * 1vw);
          }
        }
      }
    }

    .entry-btn {
      --_transition: 250ms ease 0s;
      display: inline-block;
      padding: 6px 24px;
      font-family: var(--title);
      color: var(--main);
      border: 1px solid var(--main);
      transition:
        color var(--_transition),
        background var(--_transition);

      @media (any-hover: hover) {
        &:hover {
          color: var(--white);
          background-color: var(--main);
        }
      }

      @media only screen and (width <=768px) {
        display: none;
      }
    }
  }

  .header-color {
    .header {
      background-color: rgb(255 255 255 / 90%);
    }
  }

  /* =====================
    特定ページの色変更
  ===================== */
  .header-w {
    .entry-btn {
      color: #fff;
      border: 1px solid #fff;

      @media (any-hover: hover) {
        &:hover {
          background-color: rgb(255 255 255 / 20%);
        }
      }
    }

    .sp-menu {
      filter: grayscale(100%) brightness(30);
    }

    /* ==== スクロール後は戻す ==== */
    &.header-color {
      .entry-btn {
        color: var(--main);
        border: 1px solid var(--main);

        @media (any-hover: hover) {
          &:hover {
            background-color: var(--main);
          }
        }
      }

      .sp-menu {
        filter: unset;
      }
    }
  }
}