@charset "UTF-8";

/* =====================
  sp-menu
===================== */
@layer style {
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }

  @media (width <=768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 16 * 1vw);
      right: calc((100 / 390) * 16 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/_common/menu.svg');
      filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(338deg) brightness(103%) contrast(102%);
      inline-size: calc((100 / 390) * 52 * 1vw);
      block-size: calc((100 / 390) * 38 * 1vw);
      z-index: 220;
    }

    /* ==== 閉じる ==== */
    .menu-on {
      .sp-menu {
        position: fixed;
        background-image: url('../img/_common/close.png');
        filter: unset;
      }
    }

    .sp-nav {
      --_header-height: calc((100 / 390) * 70 * 1vw);
      position: fixed;
      inset: 0;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: all 350ms var(--easeOutExpo) 0s;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/_common/sp_menu_bg.png');

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          block-size: var(--_header-height);
          top: 0;
          left: 0;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          display: block grid;
          align-content: center;

          .logo {
            & img {
              width: calc((100 / 390) * 179 * 1vw);
            }
          }
        }

        .body {
          position: relative;
          padding-block: calc((100 / 390) * 13 * 1vw) calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 32 * 1vw);
          block-size: calc(100vh - var(--_header-height));
          overflow-y: auto;

          .main-nav {
            display: block grid;

            & ul {
              & li {
                .u-hover {
                  display: block flow;
                  font-size: calc((100 / 390) * 15 * 1vw);
                  font-weight: 500;
                  line-height: 1.4;
                  color: var(--primary);
                  padding-block: calc((100 / 390) * 20 * 1vw);
                  padding-inline: calc((100 / 390) * 16 * 1vw);
                  text-align: center;

                  &::before {
                    content: attr(data-text);
                    display: block flow;
                    font-family: var(--title);
                    font-size: calc((100 / 390) * 13 * 1vw);
                    line-height: 1.1;
                    background: var(--gradation);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    margin-block-end: calc((100 / 390) * 9 * 1vw);
                  }
                }
              }
            }
          }

          .sub-nav {
            margin-block-start: calc((100 / 390) * 46 * 1vw);

            .sdgs-bnr {
              inline-size: fit-content;
              margin-inline: auto;
              .u-hover {
                display: block grid;
                place-content: center;
                inline-size: 100%;
                block-size: 100%;
                background-color: #fff;
                padding-inline: calc((100 / 390) * 8 * 1vw);
                padding-block: calc((100 / 390) * 8 * 1vw);

                & img {
                  inline-size: calc((100 / 390) * 148 * 1vw);
                }
              }
            }

            & ul {
              display: block flex;
              justify-content: center;
              gap: calc((100 / 390) * 48 * 1vw);
              margin-block-start: calc((100 / 390) * 12 * 1vw);

              & li {
                .u-hover {
                  font-size: calc((100 / 390) * 11 * 1vw);
                  color: #797979;
                }
              }
            }
          }
        }
      }
    }
  }

  /* Menu on */
  .menu-on {
    .sp-nav {
      pointer-events: auto;
      opacity: 1;
      transition: all 350ms var(--easeOutExpo) 0s;
    }
  }
  .is-header-color {
    .sp-menu {
      filter: unset;
    }
  }
}

/* =====================
  sp-menu *recruit*
===================== */
@layer style {
  @media (width > 768px) {
    .sp-recruit-menu,
    .sp-recruit-nav {
      display: none;
    }
  }

  @media (width <=768px) {
    /* ==== ボタン ==== */
    .sp-recruit-menu {
      position: fixed;
      top: calc((100 / 390) * 16 * 1vw);
      right: calc((100 / 390) * 16 * 1vw);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/recruit/_common/menu.svg');
      inline-size: calc((100 / 390) * 52 * 1vw);
      block-size: calc((100 / 390) * 38 * 1vw);
      z-index: 220;
    }

    /* ==== 閉じる ==== */
    .menu-on {
      .sp-recruit-menu {
        position: fixed;
        background-image: url('../img/recruit/_common/close.svg');
      }
    }

    .sp-recruit-nav {
      --_header-height: calc((100 / 390) * 70 * 1vw);
      position: fixed;
      inset: 0;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: all 350ms var(--easeOutExpo) 0s;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      background-color: rgba(255, 255, 255, 0.94);

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/recruit/_common/menu_bg.svg');
          inline-size: calc((100 / 390) * 210 * 1vw);
          block-size: calc((100 / 390) * 128 * 1vw);
          left: 0;
          bottom: 0;
        }

        .sp-menu-head {
          position: relative;
          inline-size: 100%;
          block-size: var(--_header-height);
          top: 0;
          left: 0;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          display: block grid;
          align-content: center;

          .logo {
            & img {
              width: calc((100 / 390) * 179 * 1vw);
            }
          }
        }

        .body {
          position: relative;
          padding-block: calc((100 / 390) * 36 * 1vw) calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 32 * 1vw);
          block-size: calc(100vh - var(--_header-height));
          overflow-y: auto;

          .main-nav {
            display: block grid;

            & ul {
              & li {
                .u-hover {
                  display: block flow;
                  font-size: calc((100 / 390) * 15 * 1vw);
                  font-weight: 500;
                  line-height: 1.4;
                  color: var(--primary);
                  padding-block: calc((100 / 390) * 20 * 1vw);
                  padding-inline: calc((100 / 390) * 16 * 1vw);
                  text-align: center;
                }
              }
            }
          }

          .sub-nav {
            margin-block-start: calc((100 / 390) * 32 * 1vw);

            & ul {
              display: block flex;
              justify-content: center;
              gap: calc((100 / 390) * 40 * 1vw);
              margin-block-start: calc((100 / 390) * 12 * 1vw);

              & li {
                .u-hover {
                  font-size: calc((100 / 390) * 11 * 1vw);
                  color: #b7b7b7;

                  &::after {
                    content: '';
                    display: inline-block;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    background-image: url('../img/recruit/_common/link_icon.svg');
                    inline-size: calc((100 / 390) * 9 * 1vw);
                    aspect-ratio: 1/1;
                    margin-inline-start: calc((100 / 390) * 8 * 1vw);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* Menu on */
  .menu-on {
    .sp-recruit-nav {
      pointer-events: auto;
      opacity: 1;
      transition: all 350ms var(--easeOutExpo) 0s;
    }
  }
}