@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: #259D9A;
  font-size: 4.8rem;
  font-weight: 700;
}
/* anc_btn_outer */
.anc_btn_outer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 1024px;
  margin: 20px auto 0;
}
.anc_btn {
  min-height: 60px;
  max-width: 328px;
  width: 100%;
  background: #FFF100;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  position: relative;
  &::after {
    content: "";
    display: block;
    background: url(../img/anc_btn_arrow.svg) no-repeat center/contain;
    width: 17px;
    height: 29px;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    transition: .5s;
  }
  &:hover::after {
    right: 13px;
  }
}
/* policy */
.policy {
  max-width: 1024px;
  margin: 64px auto 0;
}
.pol_content {
  max-width: 920px;
  margin: 54px auto 0;
  display: flex;
  flex-direction: column;
  gap: 74px;
}

.pc_box {
  display: flex;
  align-items: center;
  gap: 90px;
  .pc_left {
    max-width: 318px;
    width: 100%;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2;
    position: relative;
    &::after {
      content: "";
      height: 1px;
      width: var(--length);
      background: linear-gradient(270deg, #E7425F 0%, #E84E5F 0.71%, #EC6F60 2.79%, #F08961 5.05%, #F29E62 7.5%, #F4AC62 10.26%, #F5B562 13.58%, #F6B863 18.91%, #F3B468 19.99%, #E29E89 26.76%, #D68FA1 33.24%, #CF86B0 39.26%, #CD83B5 44.35%, #917BB5 52.63%, #4C72B5 63.01%, #216DB5 70.53%, #116BB5 74.35%, #1E85B3 86.31%, #30A9B1 100%);
      position: absolute;
      top: 50%;
      right: -70px;
      transform: translateY(-50%);
    }
  }
  &:nth-of-type(1) .pc_left::after {
    --length: 248px;
  }
  &:nth-of-type(2) .pc_left::after {
    --length: 200px;
  }
  &:nth-of-type(3) .pc_left::after {
    --length: 50px;
  }
  &:nth-of-type(4) .pc_left::after {
    --length: 248px;
  }
}
.pc_right {
  max-width: 516px;
  width: 100%;
  font-weight: 400;
  line-height: 2;
}
/* portrait */
.portrait {
  margin: 130px auto 0;
  .sec_title {
    max-width: 1024px;
    margin: 0 auto;
  }
}
.port_box {
  display: flex;
  margin-top: 120px;
}
.port_left {
  background: #FFF100;
  max-width: calc(50% - 10px);
  width: 100%;
  padding: 75px 88px 75px 5%;
  position: relative;
  border-radius: 8px;
  p {
    max-width: 416px;
    margin-left: auto;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2;
  }
}
.port_right {
  position: absolute;
  top: 50%;
  right: -546px;
  transform: translateY(-50%);
  z-index: -1;
}
/* features */
.features {
  max-width: 1024px;
  margin: 185px auto 0;
}
.fea_upper {
  display: flex;
  gap: 20px;
  margin-top: 44px;
}
.fu_left {
  max-width: 676px;
  width: 100%;
  display: flex;
  gap: 10px;
}
.fu_left p {
  background: #2BB7B3;
  color: #FFF;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
}
.ful_left {
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 130px;
    &:nth-of-type(1) {
      border-radius: 80px 0px 0px 0px;
    }
    &:nth-of-type(2) {
      border-radius: 0px 0px 0px 80px;
    }
  }
}
.ful_right{
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    min-height: 260px;
    padding: 40px 44px;
    border-radius: 0px 80px 80px 0px;
    .yellow {
      color: #FFF100;
    }
  }
}
.fur_upper_text {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
  min-height: 188px;
  display: flex;
  align-items: center;
  position: relative;
  &::before {
    content: "";
    background: url(../img/fea_border01.svg) no-repeat center/cover;
    width: 254px;
    height: 72px;
    position: absolute;
    top: 0;
    left: 0;
  }
  &::after {
    content: "";
    background: url(../img/fea_border02.svg) no-repeat center/cover;
    width: 252px;
    height: 71px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.fur_lower_text {
  color: #2BB7B3;
  font-weight: 700;
  line-height: 2;
  margin-top: 14px;
}
.fea_lower {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}
.fl_box {
  max-width: 937px;
  width: 100%;
  margin-left: auto;
}
.fl_title {
  color: #259D9A;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
}
.fl_text {
  margin-top: 10px;
  font-weight: 400;
  line-height: 2;
}
/* learning */
.learning {
  max-width: 1024px;
  margin: 128px auto 0;
}
.lea_text_box {
  max-width: 905px;
  width: 100%;
  margin: 32px 0 0 auto;
}
.lea_text_box li {
  font-weight: 700;
  line-height: 2;
  position: relative;
  &::before{
    content: "⚫︎";
    color: #2BB7B3;
    font-size: 1.6rem;
    position: absolute;
    top: 0;
    left: -2rem;
   }
  .red {
    color: #E60012;
  }
}
/* study_4years */
.study_4years {
  margin-top: 130px;
  .sec_title_flex {
    max-width: 1024px;
    margin: 0 auto;
  }
  .sec_title {
    color: #0B76AB;
  }
  .s4_title_box {
    &::before {
      content: "";
      background: #0B76AB;
    }
  }
  .btn_body {
    color: #0B76AB;
  }
  .s_c_upper {
    background: #0B76AB;
  }
  .s_c_lower {
    color: #0B76AB;
  }
}
.s4_main_contents {
  margin-top: 50px;
  padding: 64px 0 0;
  position: relative;
  &::before {
    content: "";
    display: block;
    background: url(../img/study_4years_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;
  li {
    font-weight: 700;
    line-height: 2;
  }
}
.stb_img_box {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  p {
    &:nth-of-type(2) {
      margin-top: 40px;
    }
  }
}
/* course */
.course {
  margin-top: 130px;
  .sec_title_flex {
    max-width: 1024px;
    margin: 0 auto;
  }
  .sec_title {
    color: #EB6A81;
  }
  .s4_title_box {
    &::before {
      content: "";
      background: #EB6A81;
    }
  }
  .btn_body {
    color: #EB6A81;
  }
  .s_c_upper {
    background: #EB6A81;
  }
  .s_c_lower {
    color: #EB6A81;
  }
}
.s_c_flex {
  display: flex;
  align-items: center;
  .s_c_flex_left {
    max-width: 304px;
  }
  .s_c_ul li {
    margin-bottom: 20px;
  }
  .s_c_last {
    font-weight: 700;
    line-height: 2;
  }
}
.cou_mid_inner {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  gap: 62px;
}
.cmi_left {
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 2;
  white-space: nowrap;
}
.cmi_right {
  width: 100%;
  display: flex;
  gap: 44px;
}
.cr_box {
  max-width: 300px;
  width: 100%;
  position: relative;
  &::after {
    display: block;
    content: "";
    background: url(../img/img03_03.png) no-repeat center/contain;
    width: 281px;
    height: 374px;
    position: absolute;
    bottom: -50px;
    left: -10px;
  }
}
.cr_box_inner {
  display: flex;
  flex-direction: column;
  writing-mode: vertical-rl;
  margin: 0 auto;
}
.cmi_title {
  font-weight: 700;
  line-height: 1;
  margin-left: 10px;
  span {
    background: #FFF100;
    padding: 10px 2px;
    font-weight: 700;
  }
}
.cmi_ul {
  li {
    font-weight: 700;
    line-height: 1.5;
    .yellow {
      color: #FFF100;
    }
  }
  .to_u {
    text-orientation: upright;
  }
}
/* image */
.image {
  margin-top: 100px;
}
.ima_inner {
  max-width: 850px;
  margin-inline: auto;
  margin-bottom: 300px;
  position: relative;
  &::before {
    content: "";
    display: block;
    background: url(../img/image_bg.png) no-repeat center/contain;
    width: 851px;
    height: 485px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.ima_inner_ex {
  padding: 32px 88px 0;
  h3 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2;
  }
}
.ima_flex{
  display: flex;
  align-items: center;
  gap: 52px;
  margin-top: 8px;
}
.ima_left {
  max-width: 398px;
  width: 100%;
  padding: 6px 28px;
  border: 1px solid #000;
  border-right: none;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    width: 60px;
    height: .5px;
    border-radius: 9999px;
    background-color: #000000;
    transform-origin: 100% 50%;
  }
  &::before {
    transform: rotate(65deg);
  }
  &::after {
    transform: rotate(-65deg);
  }
  p {
    font-weight: 500;
    line-height: 2;
  }
}
.ima_right {
  p {
    font-weight: 700;
    line-height: 2;
  }
}
/* requirements */
.requirements {
  max-width: 1024px;
  margin: 400px auto 0;
}
.req_inner {
  max-width: 850px;
  margin-inline: auto;
  padding: 22px 0 0;
}
.req_box {
  margin-top: 25px;
  p {
    line-height: 2;
  }
}
.req_green {
  color: #259D9A;
}
.req_table_outer {
  margin-top: 32px;
}
.req_table {
  width: 100%;
  border: 1px solid #DDD;
  th {
    text-align: center;
    padding: 15px 5px;
    background: rgba(43, 183, 179, 0.25);
    border-right: 1px solid #DDD;
  }
  td {
    text-align: center;
    padding: 15px 5px;
    border-right: 1px solid #DDD;
  }
}
@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;
    }
  }
  /* policy */
  .policy {
    padding: 0 5%;
    margin-top: 100px;
  }
  .pol_content {
    gap: 50px;
  }
  .pc_box {
    flex-direction: column;
    gap: 120px;
    .pc_left {
      text-align: center;
      &::after {
        width: 1px;
        height: 100px;
        top: 110%;
        right: 50%;
        transform: translateX(50%);
        background: linear-gradient(360deg, #E7425F 0%, #E84E5F 0.71%, #EC6F60 2.79%, #F08961 5.05%, #F29E62 7.5%, #F4AC62 10.26%, #F5B562 13.58%, #F6B863 18.91%, #F3B468 19.99%, #E29E89 26.76%, #D68FA1 33.24%, #CF86B0 39.26%, #CD83B5 44.35%, #917BB5 52.63%, #4C72B5 63.01%, #216DB5 70.53%, #116BB5 74.35%, #1E85B3 86.31%, #30A9B1 100%);
      }
    }
  }
  /* portrait */
  .portrait {
    padding: 0 5%;
  }
  .port_box {
    margin-top: 200px;
  }
  .port_left {
    margin: 0 auto;
    max-width: 100%;
    width: 90%;
    padding: 30px 5%;
    p {
      font-size: 1.8rem;
      line-height: 1.5;
  }
  }
  .port_right {
    right: 0;
    top: -80px;
  }
  /* features */
  .features {
    margin-top: 100px;
    padding: 0 5%;
  }
  .fea_upper {
    flex-direction: column;
    gap: 100px;
  }
  .fu_left {
    flex-direction: column;
  }
  .ful_left {
    max-width: 100%;
     flex-direction: row;
     gap: 10px;
     p {
      padding: 20px 5%;
      font-size: 1.8rem;
      width: 100%;
      &:nth-of-type(1) {
        border-radius: 40px 0px 0px 0px;
      }
      &:nth-of-type(2) {
          border-radius: 0px 40px 0px 0px;
      }
    }
  }
  .ful_right {
    max-width: 100%;
    p {
      border-radius: 0px 0 40px 40px;
      padding: 20px 5%;
      font-size: 1.8rem;
      min-height: 0;
    }
  }
  .fur_upper_text {
    justify-content: center;
    min-height: 0;
    &::before {
      transform: rotate(-110deg) scale(.4);
      top: -80px;
      left: 25%;
    }
    &::after {
      transform: rotate(110deg) scale(.4);
      bottom: auto;
      top: -80px;
      left: 0%;
    }
  }
  .fur_lower_text {
    text-align: center;
  }
  .fea_lower {
    margin-top: 30px;
  }
  .fl_title {
    font-size: 2rem;
    line-height: 1.75;
  }
  .fl_text {
    line-height: 1.75;
  }
  /* learning */
  .learning {
    padding: 0 5%;
    margin-top: 100px;
  }
  .lea_text_box {
    margin-top: 20px;
  }
  .lea_text_box li {
    margin-left: 20px;
  }
  /* 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 li {
        margin-bottom: 10px;
    }
  }
  .s_c_flex_left {
    margin-bottom: 10px;
  }
  .stb_curriculum {
    padding: 20px 5%;
  }
  .stb_img_box {
    flex-direction: column;
    gap: 0;
  }
  /* course */
  .course {
    margin-top: 30px;
    .sec_title_flex {
      padding: 0 5%;
      flex-direction: column;
       gap: 10px;
    }
  }
  .s_c_flex {
    flex-direction: column;
  }
  .cou_mid {
    padding: 0 5%;
  }
  .cou_mid_inner {
    flex-direction: column;
  }
  .cmi_left {
    font-size: 2.4rem;
    line-height: 1.75;
    text-align: center;
  }
  .cmi_right {
    flex-direction: column;
    align-items: center;
    gap: 200px;
  }
  .cr_box {
    &::after {
      content: "";
      width: 100%;
      height: 300px;
      left: 50%;
      transform: translateX(-50%);
      bottom: -150px;
    }
  }
  /* image */
  .image {
    margin-top: 150px;
  }
  .ima_inner {
    &::before {
      width: 100%;
      height: 700px;
      bottom: -200%;
      left: 50%;
      transform: translateX(-50%);
      background: url(../img/image_bg_sp.png) no-repeat center/cover;
    }
  }
  .ima_inner_ex {
    padding: 20px 5% 0;
    width: 100%;
  }
  .ima_flex {
    flex-direction: column;
    gap: 80px;
  }
  .ima_left {
    max-width: 100%;
    width: 100%;
    border: 1px solid #000;
    border-bottom: none;
    &::before {
      transform: rotate(380deg);
      right: auto;
      left: 0;
      top: auto;
      bottom: 0;
      width: 53.5%;
      transform-origin: 0%;
    }
    &::after {
      transform: rotate(160deg);
      right: auto;
      left: 100%;
      top: auto;
      bottom: 0;
      width: 53.5%;
      transform-origin: 0%;
    }
  }
  /* requirements */
  .requirements {
    padding: 0 5%;
  }
  .req_inner {
    padding: 0;
  }
  .req_table_outer {
    overflow-x: scroll;
    margin-top: 16px;
  }
  .req_table {
    width: 800px;
  }
}


@media screen and (orientation: portrait) {
  .ful_right {
    p {
      padding: 40px 30px;
    }
  }
  .ima_inner_ex {
    padding: 32px 60px 0;
}
.ima_left {
  max-width: 410px;
  padding: 2px 28px;
}
}