@charset "UTF-8";

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

For Teachers and Parents CSS

・教職員・保護者の皆様へ用CSS「.pt-×××」

上記はここに記述する

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

/* メッセージ
----------------------------------------------------------------------------- */
.pt-message {
  @media (width > 767px) {
    display:grid;
    grid-template-columns: 1fr 64.0rem;
    grid-auto-flow: column;
    padding-left:5.0rem;
  }
  @media (width <= 767px) {
  }
  .img {
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-image:url(/recruit/assets/img/parent-teachers/message-img-mask.svg);
    mask-image:url(/recruit/assets/img/parent-teachers/message-img-mask.svg);
    @media (width > 767px) {
      grid-column:2/3;
    }
    @media (width <= 767px) {
      margin-bottom:2.4rem;
    }
  }

  .t {

  }
  .t_heading {
    margin-bottom:5.6rem;
    font-size:3.4rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-bottom:2.4rem;
      font-size:2.4rem;
    }
  }
  .t_desc {
    line-height:2;
    letter-spacing: 0;
    & + .t_desc {
      margin-top:1lh;
      @media (width <= 767px) {
        margin-top:1em;
      }
    }
  }
  .t_name {
    width:fit-content;
    margin-top:7.2rem;
    margin-left:auto;
    text-align: right;
    @media (width > 767px) {
      margin-right:4.8rem;
    }
    @media (width <= 767px) {
      margin-top:2.8rem;
    }
  }
}

.pt-sections {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }

  .n {
  }
  .n_ul {
    display:flex;
    gap:2.0rem;
    @media (width <= 767px) {
      gap:.8rem;
    }
  }
  .n_ul_i {
    flex:1;
  }
  .n_ul_i_l {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height:8.0rem;
    font-weight: 700;
    line-height:1.4;
    @media (width <= 767px) {
      height:7.2rem;
      letter-spacing: 0;
    }

    &::after {
      margin-bottom:1.0rem;
    }
    > span {
      margin-block:auto;
      padding-top:.5em;
    }
  }
  .c {
    display:grid;
    gap:10.0rem;
    margin-top:6.0rem;
    @media (width > 767px) {
      padding:10.0rem;
    }
    @media (width <= 767px) {
      margin-top:3.0rem;
      gap:6.0rem;
      padding-block:4.0rem;
    }
  }
  .c_s_catch {
    margin-bottom:2.4rem;
    font-size:3.0rem;
    line-height:1.5;
    font-weight: 700;
    letter-spacing: .05em;
    @media (width <= 767px) {
      margin-bottom:2.0rem;
      font-size:2.2rem;
    }
  }
  .c_s_desc {
    line-height:2;
    letter-spacing: 0;
    & + .c_s_desc {
      margin-top:1lh;
      @media (width <= 767px) {
        margin-top:1em;
      }
    }
  }
  .c_s_link {
    margin-top:4.8rem;
    @media (width <= 767px) {
      margin-top:3.6rem;
    }
    .l-button-A {
      @media (width <= 767px) {
        min-width:28.0rem;
      }
    }
  }
}

/* Bottom
----------------------------------------------------------------------------- */
.pt-bottom {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:10.0rem;
  line-height:2.4;
  position:relative;
  @media (width > 767px) {
    font-size:1.8rem;
    min-height:40.0rem;
  }
  @media (width <= 767px) {
    margin-top:6.0rem;
    font-size:1.3rem;
  }
  &::before {
    content:"";
    background-color:#fff;
    width:31.0rem;
    position:absolute;
    opacity:.5;
    z-index: -1;
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      width:14.0rem;
    }
  }

}


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