@charset "UTF-8";

/* =============================================================================

Entry CSS

・エントリー用CSS「.entry-×××」

上記はここに記述する

============================================================================= */

/* セクション
----------------------------------------------------------------------------- */
.entry-sections {
  display:grid;
  position:relative;
  gap:2.0rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:1.0rem;
  }

  .s {
    position:relative;
    @media (width > 767px) {
      padding:10.0rem;
    }
    @media (width <= 767px) {
      gap:1.0rem;
      padding-block:6.0rem 4.8rem;
    }
    &::before {
      content:"";
      margin-inline:auto;
      border-radius:var(--radius-A);
      background-image:linear-gradient(
        135deg,
        #7BFCE4 -45%,
        #6892EE 100%
      );
      position:absolute;
      inset-block:0;
      inset-inline:0;
      pointer-events: none;
      mix-blend-mode: multiply;
      opacity:.2;
      z-index: -1;
    }
  }
  .s_heading {
    font-size:3.4rem;
    font-weight: 700;
    line-height:1.3;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:2.2rem;
    }
  }
  .s_desc {
    margin-top:2.8rem;
    @media (width <= 767px) {
      margin-top:2.0rem;
    }
  }
  .s_nb {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top:4.8rem;
    &:has(.s_nb_button:first-child:last-child) {
      grid-template-columns:1fr;
    }
    @media (width > 767px) {
      gap:4.0rem;
    }
    @media (width <= 767px) {
      gap:1.0rem;
      margin-top:2.4rem;
    }
  }
  .s_nb_button {
    display:flex;
    justify-content: center;
    align-items: center;
    height:18.0rem;
    background-color:#fff;
    position:relative;
    @media (width <= 767px) {
      flex-direction: column;
      height:10.0rem;
    }

    &:first-child:last-child {
      height:10.0rem;
      @media (width <= 767px) {
        height:10.0rem;
        img {
          margin-top:.2rem;
        }
        .m-arrow-A {
          margin-top:.4rem;
        }
      }
    }

    img {
      @media (width <= 767px) {
        margin-top:.8rem;
      }
    }
    .m-arrow-A {
      @media (width > 767px) {
        position:absolute;
        right:2.0rem;
      }
      @media (width <= 767px) {
        margin-top:1.2rem;
      }
    }
  }
  .s_career_button {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top:5.2rem;
    width:100%;
    font-size:2.4rem;
    line-height:1.5;
    letter-spacing: .05em;
    font-weight: 700;
    background-color:#fff;
    height:10.0rem;
    position:relative;
    @media (width <= 767px) {
      flex-direction: column;
      height:10.0rem;
      font-size:1.6rem;
      margin-top:3.2rem;
    }

    > span {
      @media (width <= 767px) {
        margin-top:.4rem;
      }
    }
    .m-arrow-A {
      @media (width > 767px) {
        position:absolute;
        right:2.0rem;
      }
      @media (width <= 767px) {
        margin-top:.8rem;
      }
    }
  }
  .treat {
    margin:auto;
    background-color:#fff;
    width:38.0rem;
    height:fit-content;
    position:absolute;
    inset:0;
    opacity:.5;
    z-index: -2;
    @media (width > 767px) {
      top:13.2rem;
    }
    @media (width <= 767px) {
      width:17.0rem;
      top:6.4rem;
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.entry-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}