@charset "utf-8";

@media (max-width: 768px) {
  .body-bg1.color05 {
    background-image: url(/recruit/assets/img/common/body-bg1-color05_sp.png);
    height: 101%;
  }
}

@media (max-width: 890px) {
  .menu_common {
    display: none;
  }
}

header .h_logo-group {
  .h_logo_link {
    .h_name {
      @media (max-width: 890px) {
        color: #15479E;
      }
    }
  }
}


/* ↓↓↓ main_wrap ↓↓↓ */
.main_wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: calc(100vw - 230px);
  padding-block: 96px 120px;
  margin-left: auto;
  padding-right: 40px;
  padding-left: 20px;

  @media (max-width: 1024px) {
    padding-right: 30px;
    padding-left: 10px;
  }

  @media (max-width: 890px) {
    width: 100%;
    padding-inline: 16px;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 80px 16px 96px
  }

  .container {
    position: relative;
    width: calc(869px + 48px * 2);
    max-width: 100%;
    background-color: #FFEEDE;
    border-radius: 12px;
    box-shadow: var(--shadow02);
    transform: translateZ(0px);
    overflow: clip;
    padding: 56px 48px 136px;

    @media (max-width: 1024px) {
      width: 100%;
    }

    @media (max-width: 890px) {
      width: 100%;
      max-width: 730px;
      border-radius: 12px;
      padding: 56px 16px 77px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      width: 100%;
      border-radius: 12px;
      padding: 32px 16px 77px;
      margin: 0 auto;
    }

    .en_deco {
      position: absolute;
      width: 100%;
      left: 0;
      @media (max-width: 768px) {
        gap: 8px;
      }
      
      &.top {
        top: max(-0.75rem, (var(--vw) * -12));
        @media (max-width: 768px) {
          top: -8px;
        }
      }
      
      &.bottom {
        bottom: max(-0.625rem, (var(--vw) * -10));
        @media (max-width: 768px) {
          bottom: -8px;
        }
      }
      
      .splide__list {
        display: flex;
        will-change: transform;
        transition-timing-function: linear;
        transform: translateZ(0);
      }

      .en {
        /* width: fit-content; */
        font-size: 80px;
        font-family: var(--lato);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        color: rgba(255, 255, 255,.56);
        @media (max-width: 768px) {
          font-size: 48px;
        }
      }
    }

    .container_ttl {
      position: relative;
      margin: 0 auto;
      z-index: 1;

      .sub {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.05em;
        text-align: center;

        @media (max-width: 768px) {
          font-size: 14px;
        }

        .num {
          font-family: var(--lato);
          letter-spacing: 0;
          margin-right: min(0.5rem, (var(--vw) * 8));

          @media (max-width: 768px) {
            margin-right: 8px;
          }
        }
      }

      .ttl {
        /* font-size: min(2.5rem, (var(--vw) * 40)); */
        font-size: 40px;
        font-family: var(--shingoB);
        line-height: 1.2857142857142858;
        letter-spacing: 0;
        text-align: center;

        @media (max-width: 768px) {
          font-size: 28px;
          margin-top: 6px;
        }
      }
    }
  }
}
/* ↑↑↑ main_wrap ↑↑↑ */
/* ↓↓↓  ↓↓↓ */
.group_list {
  display: flex;
  gap: 16px min(2rem, (var(--vw) * 32));
  flex-wrap: wrap;
  margin: 40px auto 0;
  @media (max-width: 768px) {
    flex-direction: column;
    margin-top: 40px;
  }

  .item {
    width: calc((100% - min(2rem, (var(--vw) * 32)))/2);
    flex-shrink: 0;
    @media (max-width: 768px) {
      width: 100%;
    }

    .link {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        border: 4px solid transparent;
        border-radius: 12px;
        transition: border 300ms 0s ease;
        opacity: 0;
      }

      @media (min-width: 769px) {
        &:hover {
          .img img {
            scale: 1.1;
          }
          .group {
            background-color: #FFF5ED;
          }
        }
      }
      &:active {
        .group {
          background-color: #FDDDBB;
          .txt {
            color: #5F5F5F;
          }
        }
      }

      &:focus-visible {
        outline: none;
        &::before {
          border: 4px solid #E0C1A1;
          opacity: 1;
        }
        .img img {
          scale: 1.1;
        }
        .group {
          background-color: #FFF5ED;
        }
      }
    }

    .img {
      width: 100%;
      display: block;
      border-radius: 8px 8px 0 0;
      overflow: clip;
      @media (max-width: 768px) {
        border-radius: 8px 8px 0 0;
      }

      img {
        transition: scale ease .3s;
      }
    }
    
    .group {
      flex: 1;
      display: flex;
      /* align-items: center; */
      background-color: #FDDDBB;
      border-radius: 0 0 8px 8px;
      padding: min(1rem, (var(--vw) * 16)) min(1.5rem, (var(--vw) * 24));
      transition: background-color 300ms ease;
      @media (max-width: 768px) {
        border-radius: 0 0 8px 8px;
        padding: 16px 10px 16px 16px;
      }
      
      .group_inner {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: min(0.625rem, (var(--vw) * 10));
        @media (max-width: 768px) {
          gap: 24px;
          align-items: center;
        }
      }

      .txt {
        flex: 1;
        font-size: 16px;
        font-family: var(--shingoB);
        line-height: 1.625;
        letter-spacing: 0.03em;
        padding-top: 3px;
        transition: color 300ms ease;
        @media (max-width: 768px) {
          flex: 1;
          font-size: 16px;
          padding-top: unset;
        }
      }

      .icon {
        position: relative;
        width: 32px;
        height: fit-content;
        aspect-ratio: 1/1;
        border-radius: 50%;
        @media (max-width: 768px) {
          width: 32px;
        }

        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-image: url(/recruit/assets/img/guidelines/group/icon_arrow.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          top: 0;
          left: 0;
        }
      }
    }
  }
}
/* ↑↑↑  ↑↑↑ */