@charset "UTF-8";

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

Office CSS

・福利厚生・研修制度用CSS「.welfare-×××」

上記はここに記述する

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


/* 福利厚生
----------------------------------------------------------------------------- */
.welfare-benefits {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  > .l-heading-C {
    @media (width > 767px) {
      margin-bottom:8.0rem;
    }
  }
  .l-heading-D {
    @media (width > 767px) {
      margin-bottom:6.0rem;
    }
  }

  .s {

  }
  .s_ul {
    display:grid;
    line-height:2;
    letter-spacing: 0;
    @media (width > 767px) {
      grid-template-columns: repeat(2,1fr);
      gap:8.0rem;
    }
    @media (width <= 767px) {
      gap:4.0rem;
    }
  }
  .s_ul_i_heading {
    margin-block:3.6rem 2.4rem;
    font-size:2.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    @media (width <= 767px) {
      margin-block:1.8rem 1.0rem;
      font-size:1.5rem;
    }
  }
  .s_ul_i_desc {
  }
  .s_ul_i_note {
    margin-top:1.2rem;
    font-size:1.4rem;
    @media (width <= 767px) {
      margin-top:.8rem;
      font-size:1.1rem;
    }
  }

  .o {

  }
  .o_ul {
    display:flex;
    flex-wrap: wrap;
    gap:2.0rem 1.0rem;
    font-size:1.5rem;
    letter-spacing: .05em;
    line-height:1.5;
    @media (width <= 767px) {
      gap:.6rem .4rem;
      font-size:1.1rem;
      letter-spacing: 0;
    }
  }
  .o_ul_i {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:100px;
    padding-inline:3.2rem;
    min-height:4.8rem;
    color:#fff;
    background-color:var(--cc-green-C);
    @media (width <= 767px) {
      padding-inline:1.2rem;
      min-height:3.2rem;
    }
  }

  .a {

  }
  .a_ul {
    display:grid;
    line-height:2;
    letter-spacing: 0;
    @media (width > 767px) {
      grid-template-columns: repeat(2,1fr);
      gap:7.2rem 6.0rem;
      text-align: center;
    }
    @media (width <= 767px) {
      gap:1.6rem;
      margin-right:-2.5rem;
    }
  }
  .a_ul_i {
    padding-bottom:4.0rem;
    @media (width <= 767px) {
      display:grid;
      grid-template-rows:auto 1fr;
      grid-template-columns:auto 1fr;
      grid-template-areas:
        "img heading"
        "img desc"
      ;
      column-gap:1.6rem;
      padding-block:2.0rem;
      padding-right:2.5rem;
    }
  }
  .a_ul_i_img {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-inline:auto;
    border-radius: 50%;
    border:1px solid #fff;
    height:auto;
    aspect-ratio: 1/1;
    background-color:var(--cc-green-C);
    @media (width > 767px) {
      margin-block:-2.8rem 2.0rem;
      width:7.0rem;
    }
    @media (width <= 767px) {
      grid-area:img;
      margin-block:auto;
      margin-left:-1.5rem;
      width:6.0rem;
    }
  }
  .a_ul_i_heading {
    font-size:2.0rem;
    font-weight: 700;
    line-height:1.4;
    margin-bottom:1.6rem;
    @media (width <= 767px) {
      grid-area:heading;
      margin-bottom:.6rem;
      font-size:1.4rem;
    }
  }
  .a_ul_i_desc {

    @media (width <= 767px) {
      grid-area:desc;
      line-height:1.8;
    }
    > small {
      font-size:1.4rem;
      @media (width <= 767px) {
        font-size:1.2rem;
      }
    }
  }
}


/* 研修制度
----------------------------------------------------------------------------- */
.welfare-training {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  .desc {
    @media (width <= 767px) {
      line-height:2;
    }
  }
  .c {
    margin-top:4.8rem;
    @media (width > 767px) {
      padding:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:3.6rem;
      padding-block:4.0rem;
    }
  }
  .c_heading {
    display:grid;
    justify-content: center;
    gap:3.2rem;
    margin-bottom:4.8rem;
    line-height:1;
    @media (width <= 767px) {
      gap:1.2rem;
      margin-bottom:2.4rem;
    }
    .ja {
      font-size:3.6rem;
      font-weight:700;
      letter-spacing: .05em;
      text-align: center;
      @media (width <= 767px) {
        font-size:1.6rem;
      }
    }
    .en {
      display:flex;
      justify-content:center;
      align-items: baseline;
      gap:2.0rem;
      border-bottom:.4rem solid var(--cc-green-C);
      padding-bottom:.8rem;
      @media (width <= 767px) {
        gap:.8rem;
        border-bottom-width:2px;
        padding-bottom:.4rem;
      }
    }
    .en_num {
      font-size:8.0rem;
      letter-spacing: .1em;
      @media (width <= 767px) {
        font-size:4.0rem;
      }
    }
    .en_course {
      font-size:3.0rem;
      letter-spacing: .1em;
      @media (width <= 767px) {
        font-size:1.6rem;
      }
    }
  }
  .c > .l-table-A {
    --tc:18.0rem;
    @media (width <= 767px) {
      --tc:8.0rem;
    }

    > div {
      @media (width > 767px) {
        padding-block:3.2rem;
      }
    }
    dt {
      @media (width > 767px) {
        font-size:1.8rem;
        line-height:1.6;
      }
    }
    dd {
      letter-spacing: 0;
    }
  }

  .o {
    display:grid;
    margin-top:10.0rem;
    grid-template-rows: auto 1fr;
    @media (width > 767px) {
      grid-template-columns: 1fr 40.0rem;
      grid-template-areas:
        "heading img"
        "desc img"
      ;
      column-gap: 7.0rem;
    }
    & + .o {
      @media (width <= 767px) {
        margin-top:6.0rem;
      }
    }
  }
  .o_img {
    @media (width > 767px) {
      grid-area:img;
    }
  }
  .o_heading {
    font-size:2.4rem;
    font-weight: 700;
    line-height:1.4;
    @media (width > 767px) {
      grid-area:heading;
      margin-bottom:3.6rem;
    }
    @media (width <= 767px) {
      margin-block:2.4rem 1.6rem;
      font-size:1.8rem;
    }
  }
  .o_desc {
    line-height:2;
    letter-spacing: 0;
    @media (width > 767px) {
      grid-area:desc;
    }
  }
}


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