@charset "utf-8";

/*============================
MV
============================*/
.mv {
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    max-width: 23.30rem;
    background-image: url(../img/top/mv_slide_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    @media screen and (max-width: 640px) {
      background-size: cover;
      height: 3.00rem;
    }
  }
  .slides {
    position: relative;
    z-index: 1;
    .slide {
      width: 5.00rem;
      margin: 0 -0.50rem;
      @media screen and (max-width: 640px) {
        width: 3.00rem;
        margin: 0 -0.30rem;
      }
      &.-type01 {
        margin-top: 0.90rem;
        @media screen and (max-width: 640px) {
          margin-top: 0.60rem;
        }
      }
      &.-type02 {
        @media screen and (max-width: 640px) {
          margin-left: -0.50rem;
          margin-right: -0.20rem;
          margin-top: 0.10rem;
        }
      }
      &.-type03 {
        margin-top: 0.60rem;
        margin-left: -0.40rem;
        @media screen and (max-width: 640px) {
          margin-top: 0.30rem;
        }
      }
      &.-type04 {
        margin-top: 0.50rem;
        margin-right: -0.20rem;
        @media screen and (max-width: 640px) {
          margin-right: -0.10rem;
          margin-left: -0.35rem;
        }
      }
    }
  }
  .catch {
    width: 100%;
    max-width: 5.20rem;
    position: absolute;
    bottom: 0.70rem;
    right: 0.60rem;
    z-index: 2;
    @media screen and (max-width: 640px) {
      width: calc(100% - 0.30rem);
      bottom: 0.25rem;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

/*============================
ABOUT
============================*/
.about {
  @media screen and (max-width: 640px) {
    margin-top: -0.40rem;
  }
  .deco01 {
    width: 5.80rem;
    position: absolute;
    top: 0;
    left: -1.20rem;
    z-index: 0;
  }
  .deco02 {
    width: 5.80rem;
    position: absolute;
    bottom: -0.60rem;
    right: -1.40rem;
    z-index: 0;
  }
  .txt_box {
    text-align: center;
    padding-bottom: 2.50rem;
    position: relative;
    z-index: 1;
    @media screen and (max-width: 640px) {
      padding-bottom: 1.50rem;
    }
    .catch {
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: 0.24rem;
      font-weight: 500;
      line-height: 2.5;
      @media screen and (max-width: 640px) {
        font-size: 0.18rem;
        letter-spacing: 0;
        line-height: 2.2;
      }
    }
    .txt {
      font-size: 0.16rem;
      letter-spacing: 0.10em;
      line-height: 2.625;
      padding-top: 0.30rem;
      @media screen and (max-width: 640px) {
        padding-top: 0.20rem;
        font-size: 0.14rem;
        line-height: 2;
        text-align: center;
      }
    }
  }
}

/*============================
どんな相談ができるの？
============================*/
.soudan {
  position: relative;
  padding: 0.70rem 0;
  z-index: 0;
  background-color: #F5F4E9;
  .in {
    max-width: 10.80rem;
  }
  .titie_wrap {
    padding-bottom: 0;
    &::before {
      content: "";
      width: 0.59rem;
      height: 1.25rem;
      background-image: url(../img/top/soudan_ttl_deco01.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: calc(50% - 3.50rem);
      top: 0;
      z-index: 0;
      @media screen and (max-width: 640px) {
        content: none;
      }
    }
    &::after {
      content: "";
      width: 0.91rem;
      height: 1.14rem;
      background-image: url(../img/top/soudan_ttl_deco02.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      right: calc(50% - 3.50rem);
      top: 0;
      z-index: 0;
      @media screen and (max-width: 640px) {
        content: none;
      }
    }
  }
  .jp_title {
    top: -0.40rem;
    &::after {
      content: none;
    } 
  }
  .case_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.30rem 0;
    position: relative;
    z-index: 1;
    @media screen and (max-width: 640px) {
      gap: 0.20rem 0;
    }
    .case {
      background-color: #FFF;
      border-radius: 0.20rem;
      box-shadow: 0 0.02rem 0.10rem rgba(0,0,0,0.2);
      text-align: center;
      padding: 0.20rem 0;
      @media screen and (max-width: 640px) {
        border-radius: 0.15rem;
      }
      .ttl {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 0.23rem;
        font-weight: 700;
        color: #81d8d0;
        letter-spacing: 0.06em;
        padding-bottom: 0.10rem;
        @media screen and (max-width: 640px) {
          font-size: 0.18rem;
        }
      }
      .txt {
        font-size: 0.15rem;
        line-height: 2;
        @media screen and (max-width: 640px) {
          font-size: 0.135rem;
          line-height: 1.875;
        }
      }
      &.-type01 {
        width: 41.1%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
      &.-type02 {
        width: 55.7%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
      &.-type03 {
        width: 100%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
      &.-type04 {
        width: 31.9%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
      &.-type05 {
        width: 25.4%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
      &.-type06 {
        width: 36.5%;
        @media screen and (max-width: 640px) {
          width: 100%;
        }
      }
    }
  }
}

/*============================
講師派遣事業について
============================*/
.service {
  background-image: url(../img/top/service_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0.80rem 0;
  position: relative;
  margin-top: 0.40rem;
  @media screen and (max-width: 640px) {
    padding: 0.40rem 0;
  }
  &::before {
    content: "";
    width: 2.3rem;
    height: 2.0rem;
    background-image: url(../img/top/soudan_deco.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -2.50rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    @media screen and (max-width: 640px) {
      width: 1.80rem;
      height: 1.40rem;
      top: -1.70rem;
    }
  }
  .txt_box {
    max-width: 10.00rem;
    margin: auto;
    background-color: #FFF;
    border-radius: 0.20rem;
    padding: 0.70rem 0 0.60rem;
    box-shadow: 0 0.03rem 0.16rem rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    @media screen and (max-width: 640px) {
      padding: 1.10rem 0.20rem 0.30rem;
    }
    .deco01 {
      width: 1.90rem;
      height: 1.90rem;
      background-image: url(../img/top/service_deco01.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0.20rem;
      left: 0.30rem;
      @media screen and (max-width: 640px) {
        display: none;
      }
    }
    .deco02 {
      width: 1.90rem;
      height: 1.90rem;
      background-image: url(../img/top/service_deco02.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      top: 0.20rem;
      right: 0.30rem;
      @media screen and (max-width: 640px) {
        width: 0.90rem;
        height: 0.90rem;
        top: 0.15rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .titie_wrap {
      padding-top: 0;
    }
    .txt {
      font-size: 0.16rem;
      letter-spacing: 0.075em;
      line-height: 2.4;
      text-align: center;
      @media screen and (max-width: 640px) {
        font-size: 0.14rem;
        letter-spacing: 0.05em;
        text-align: justify;
        line-height: 2;
      }
    }
    .btn {
      padding-top: 0.40rem;
      @media screen and (max-width: 640px) {
        padding-top: 0.20rem;
      }
      a {
        margin: auto;
      }
    }
  }
}

/*============================
プレコンの基礎知識
============================*/
.knowledge {
  position: relative;
  &::before {
    content: "";
    width: 100%;
    /* height: calc(100% - 4.00rem); */
    height: 100%;
    /* background-color: #FCF2F1; */
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    @media screen and (max-width: 640px) {
      height: calc(100% - 50vw);
    }
  }
  .mov_wrap {
    width: 100%;
    height: 38.6vw;
    max-width: 10.00rem;
    margin: auto;
    @media screen and (max-width: 640px) {
      height: 50vw;
    }
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  .bnr_wrap {
    width: 100%;
    max-width: 7.50rem;
    padding-bottom: 0.70rem;
    margin: auto;
    text-align: center;
    @media screen and (max-width: 640px) {
      padding: 0.30rem 0 0.50rem;
    }
    .bnr {
      padding-bottom: 0.50rem;
      &:last-child {
        padding-bottom: 0;
      }
      @media screen and (max-width: 640px) {
        padding-bottom: 0.30rem;
      }
    }
    a {
      display: block;
      img {
        display: block;
        margin: auto;
      }
      .txt {
        padding-top: 0.15rem;
        font-size: 0.16rem;
        font-weight: 500;
        color: #222;
        text-decoration: underline;
        @media screen and (max-width: 640px) {
          font-size: 0.13rem;
          padding-top: 0.10rem;
        }
      }
      &:hover {
        opacity: 0.7;
      }
    }
  }
}