@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");

:root {
  --content-width: 1156px;
  --content-width-wide: 1264px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
}

.section-header {
  font-weight: 600;
  letter-spacing: 0.8rem;
  text-align: center;

  .title-en {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.3rem;
  }

  .title-ja {
    font-size: 48px;
  }
}

.pc-none {
  display: none;
}

.sp-none {
  display: block;
}

@media screen and (max-width: 900px) {
  .section-header {
    .title-en {
      font-size: 12px;
    }

    .title-ja {
      font-size: 32px;
    }
  }

  .pc-none {
    display: block;
  }

  .sp-none {
    display: none;
  }
}

.header {
  font-family: "Noto Sans JP", sans-serif;
  position: fixed;
  width: 100%;
  z-index: 999;
  color: #fff;
  /* background-color: rgba(255, 255, 255, 0.75); */
  transition: background-color 0.3s, color 0.3s ease-in-out;

  .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 24px;
    max-width: var(--content-width);
    margin: 0 auto;

    .logo {
      height: 28px;
    }

    .nav {
      ul {
        display: flex;
        gap: 24px;
        align-items: center;
        /* color: #003333; */

        a.contact {
          background-color: #164ca0;
          padding: 12px 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 8px;
          color: #fff;
        }

        a.contact:hover {
          background-color: #235bb4;
        }
      }
    }

    .btn-sp-menu {
      display: none;
      background-color: #164ca0;
      padding: 10px;

      width: 44px;
      height: 44px;
    }
  }
}

@media screen and (max-width: 900px) {
  .header {
    transition: none;

    .header-wrapper {
      height: 64px;
      .logo {
        margin-top: 4px;
        height: 24px;
      }

      .nav {
        position: absolute;
        width: 100%;
        top: 62px;
        left: 0;
        height: 0;
        overflow-y: hidden;
        background-color: transparent;
        /* color: #003333; */

        ul {
          margin-top: 60px;
          margin-bottom: 60px;
          flex-direction: column;

          a.contact {
            color: #fff;
          }
        }
      }

      .btn-sp-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
  }

  .header.open {
    background-color: rgba(255, 255, 255, 1) !important;
    color: #000 !important;
    transition: none;

    .nav {
      background-color: #fff;
      height: calc(100svh - 62px);
      overflow-y: auto;
    }
  }
}

.footer {
  background-color: #323232;
  color: #fff;

  .footer-wrapper {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 12px 24px;

    a:hover {
      text-decoration: underline;
    }
  }
}

@media screen and (max-width: 768px) {
  .footer {
    .footer-wrapper {
      flex-direction: column-reverse;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }
  }
}