@charset "UTF-8";
.wrapper {
  position: relative;
  z-index: 1;
  padding-bottom: 140px;
}
.sec_title_flex {
  display: flex;
  align-items: center;
  gap: 20px 36px;
  p {
    line-height: 2;
  }
}
.sec_title {
  color: #C170AA;
  font-size: 4.8rem;
  font-weight: 700;
}
/* study_4years */
.study_4years {
  .sec_title_flex {
    max-width: 1024px;
    margin: 56px auto 0;
  }
  .sec_title {
    color: #C170AA;
  }
  .s4_title_box {
    &::before {
      content: "";
      background: #C170AA;
    }
  }
  .btn_body {
    color: #C170AA;
  }
  .s_c_upper {
    background: #C170AA;
  }
  .s_c_lower {
    color: #C170AA;
  }
}
.s4_main_contents {
  margin-top: 50px;
  padding: 64px 0 0;
  position: relative;
  &::before {
    content: "";
    display: block;
    background: url(../img/intern_bg.png) no-repeat bottom/cover;
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.s4_title_box {
  width: 100%;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: calc(50% + 512px);
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
  }
}
.stb_inner { 
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 70px;
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.stb_left {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 346px;
  width: 100%;
}
.btn_body {
  max-width: 225px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn_sub {
  width: 100%;
  background: #fff;
  text-align: center;
  line-height: 1;
  min-height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
}
.btn_main {
  font-size: 2.8rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.25;
}
.stb_right {
  p {
    color: #FFF;
    font-weight: 700;
    line-height: 2;
  }
}
.stb_main {
  max-width: 1024px;
  margin: 64px auto 0;
  padding: 64px 87px 40px;
  background: #FFF;
}
.stb_curriculum {
  background: #FFF100;
  padding: 20px 24px 16px;
}
.s_c_upper {
  max-width: 170px;
  width: 100%;
  color: #FFF;
  padding-left: 20px;
  position: relative;
  left: -24px;
}
.s_c_lower {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 10px;
}
.s_c_ul {
  margin-top: 16px;
  p {
    font-weight: 700;
    line-height: 2;
  }
}
/* example */
.exa_inner {
  max-width: 1024px;
  margin-inline: auto;
}
.exa_title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 20px;
  span {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
  }
}
.exa_inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 64px;
}
.exa_flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 60px;
  max-width: 964px;
  margin-inline: auto;
}
.exa_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 241px;
  width: 100%;
  figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    figcaption {
      text-align: center;
      margin-top: 5px;
      min-height: 34px;
      min-height: 48px;
    }
  }
}
.exa_flex_02 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1024px;
  margin-inline: auto;
}
.exa_box_02 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 204px;
  width: 100%;
  min-height: 120px;
  figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    figcaption {
      text-align: center;
      margin-top: 5px;
      min-height: 34px;
    }
  }
}

@media screen and (max-width: 767px) {
  .wrapper {
    padding-bottom: 70px;
  }
  .sec_title {
    font-size: 3rem;
  }
  /* anc_btn_outer */
  .anc_btn_outer {
    padding: 0 5%;
    flex-direction: column;
    margin-top: 50px;
  }
  .anc_btn {
    &::after {
      right: 12px;
      width: 10px;
      height: 24px;
    }
  }
  /* study_4years */
  .study_4years {
    .sec_title_flex {
      padding: 0 5%;
      flex-direction: column;
       gap: 10px;
    }
  }
  .stb_inner {
    flex-wrap: wrap;
    gap: 20px;
    width: 90%;
  }
  .s4_title_box {
    padding: 15px 0;
    &::before {
      width: 95%;
    }
  }
  .s4_main_contents {
    padding: 32px 0;
    &::before {
      height: 400px;
    }
  }
  .btn_body {
    width: calc(100% - 125px);
    padding-right: 25px;
  }
  .btn_main {
    font-size: 1.6rem;
  }
  .stb_main {
    padding: 32px 5%;
  }
  .s_c_flex {
    .s_c_ul p {
        margin-bottom: 10px;
    }
  }
  .s_c_flex_left {
    margin-bottom: 10px;
  }
  .stb_curriculum {
    padding: 20px 5%;
  }
  /* example */
  .exa_inner {
    padding: 0 5%;
  }
  .exa_title {
    margin-bottom: 20px;
    span {
      display: block;
      width: 100%;
    }
  }
  .exa_flex {
    gap: 16px 4px;
  }
  .exa_box {
    max-width: calc(50% - 2px);
  }
  .exa_flex_02 {
    flex-wrap: wrap;
    gap: 16px 4px;
  }
  .exa_box_02 {
    max-width: calc(50% - 2px);
  }
}