@charset "UTF-8";
/*スマホ*/
html {
  overflow-x: hidden;
}

.bg-wrap {
  background: linear-gradient(140deg, #E46FA5 30%, #32B5D2 100%);
}
@media (min-width: 768px) {
  .bg-wrap {
    background: linear-gradient(90deg, #E46FA5 30%, #32B5D2 90%);
  }
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/*　++++++++++++++++++++++++++++++
共通パーツ類
++++++++++++++++++++++++++++++　*/
/* フォント　Montserrat　*/
.font-montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.arrow-heading {
  position: relative;
  padding-left: 20px;
  display: inline-block;
  font-size: 12px;
  /*
  &.scrolled {
    &::after {
      width: 3000px;
    }
  }
    */
}
@media (min-width: 768px) {
  .arrow-heading {
    font-size: clamp(30px, 2.9166666667vw, 35px);
    padding-left: 45px;
  }
}
.arrow-heading::before {
  content: "";
  width: 9.46px;
  height: 17.06px;
  display: inline-block;
  background-image: url(../img/front-page/h2_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
@media (min-width: 768px) {
  .arrow-heading::before {
    width: clamp(25px, 2.5vw, 30px);
    height: clamp(44px, 4.5vw, 54px);
  }
}
.arrow-heading::after {
  content: "";
  width: 1000px;
  height: 1px;
  display: inline-block;
  background: #000;
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 1.5s;
}
@media (min-width: 768px) {
  .arrow-heading::after {
    left: 195px;
    width: 3000px;
  }
}

.arrow-heading_l {
  position: relative;
  padding-left: 35px;
  display: inline-block;
  height: 21.6px;
  width: auto;
  /*
  &.scrolled {
    &::after {
      width: 3000px;
    }
  }
  */
}
@media (min-width: 768px) {
  .arrow-heading_l {
    height: clamp(30px, 3.5833333333vw, 43px);
    padding-left: clamp(40px, 4.1666666667vw, 50px);
  }
}
.arrow-heading_l::before {
  content: "";
  width: 20.55px;
  height: 37.07px;
  display: inline-block;
  background-image: url(../img/front-page/h2_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
@media (min-width: 768px) {
  .arrow-heading_l::before {
    left: clamp(15px, 1.6666666667vw, 20px);
    width: clamp(20px, 2.5vw, 30px);
    height: clamp(38px, 4.5vw, 54px);
    left: 0;
  }
}
.arrow-heading_l::after {
  content: "";
  width: 33%;
  height: 1px;
  display: inline-block;
  background: #000;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 1.5s;
}
@media (min-width: 768px) {
  .arrow-heading_l::after {
    width: 3000px;
  }
}
.arrow-heading_l img {
  width: auto;
  height: 100%;
}

.paren-Box {
  padding: 10px;
  position: relative;
  max-width: 400px;
  width: 92.3076923077vw;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .paren-Box {
    max-width: 700px;
    width: 700px;
  }
}
.paren-Box::before {
  content: "";
  border: solid 1px;
  border-right: none;
  width: 9px;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .paren-Box::before {
    border: solid 2px;
    border-right: none;
  }
}
.paren-Box::after {
  content: "";
  border: solid 1px;
  border-left: none;
  width: 9px;
  height: 100%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
@media (min-width: 768px) {
  .paren-Box::after {
    border: solid 2px;
    border-left: none;
  }
}
.paren-Box p {
  font-size: 23px;
  text-align: center;
  line-height: 1.3;
  font-weight: bold;
}
@media (min-width: 768px) {
  .paren-Box p {
    font-size: clamp(40px, 3.75vw, 45px);
  }
}

/*　++++++++++++++++++++++++++++++
各ブロックのスタイル
++++++++++++++++++++++++++++++　*/
/*
.kv {
  position: relative;

  .kv-title {
    position: absolute;
    z-index: 9;
    top: 13%;
    left: 10%;
    filter: drop-shadow(2px 4px 6px black);
    height: 55vh;
    width: auto;
  }
  .svg-glow-in {
    opacity: 0;
    filter: blur(12px) brightness(2);
    transition: filter 0.5s ease;
  }
  .iframe-wrapper {
    height: 70vh;
    max-height: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .iframe-container {
      height: 800px;
      width: 100vw;
      position: relative;
        iframe {
          pointer-events: none;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          height: 100%;
          width: 1500px;
          pointer-events: auto;
        }
    }
  }

}
    */
#kv {
  width: 100%;
  max-height: 900px;
  overflow: hidden;
  position: relative;
}
#kv .kv-title {
  position: absolute;
  z-index: 9;
  top: 53%;
  left: 10%;
  filter: drop-shadow(2px 4px 6px black);
  height: 65vh;
  max-height: 450px;
  width: auto;
  transform: translate(0, -50%);
  display: flex;
  flex-direction: row-reverse;
}
@media (min-width: 768px) {
  #kv .kv-title {
    top: auto;
    bottom: 10%;
    left: 10%;
    height: auto;
    width: 42%;
    max-width: 850px;
    transform: translate(0, 0);
    display: block;
  }
}
#kv .kv-title .kv-anime_a {
  width: 370px;
  margin-bottom: 25px;
}
#kv .kv-title .kv-anime_sp_a {
  height: 180px;
  margin-left: 10px;
}
#kv .kv-title .kv-anime_sp_b {
  height: 360px;
  margin-top: auto;
}
#kv .svg-glow-in {
  opacity: 0;
  filter: blur(12px) brightness(2);
  transition: filter 0.5s ease;
  /* Optional: 強めの光に見せたいとき */
  /*mix-blend-mode: screen;*/
}
#kv .hoge-in {
  opacity: 0;
  filter: blur(1px) brightness(1);
  transition: filter 0.3s ease;
  /* Optional: 強めの光に見せたいとき */
  /*mix-blend-mode: screen;*/
}
#kv .kv-video_image {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  display: block;
  opacity: 1;
}
#kv .kv-video {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 550px;
}
@media (min-width: 768px) {
  #kv .kv-video {
    height: 0;
    padding-top: 45%;
  }
}
#kv .kv-video #yt_player {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 320%;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) {
  #kv .kv-video #yt_player {
    top: 50%;
    left: 0;
    width: 100vw;
    height: 200%;
    transform: translate(0, -50%);
  }
}
#kv .fixed-oc {
  max-width: clamp(300px, 29.1666666667vw, 350px);
  width: 100%;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
}
#kv .fixed-oc a {
  display: block;
  background: linear-gradient(-30deg, #32B5D2 20%, #E46FA5 55%);
  border-radius: 20px;
  padding: 5px 20px 20px;
  transition: all 0.3s;
}
#kv .fixed-oc a:hover {
  transform: scale(1.05);
}
#kv .fixed-oc a > p {
  position: relative;
  border-bottom: solid 2px #D8FF00;
  padding-bottom: 10px;
}
#kv .fixed-oc a > p::after {
  content: "";
  width: 150px;
  height: 180px;
  background-image: url(../img/front-page/openCampus_after.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: -10px;
}
#kv .fixed-oc a > p img {
  z-index: 2;
  position: relative;
}
#kv .fixed-oc a .flex-Box {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  align-items: center;
  border-bottom: solid 2px #D8FF00;
}
#kv .fixed-oc a .flex-Box .next {
  background: #d9ff03;
  font-size: 22px;
  font-weight: bold;
  padding: 5px 15px;
  line-height: 1;
}
#kv .fixed-oc a .flex-Box .day {
  font-size: 36px;
  font-weight: bold;
  color: #daff03;
  margin-left: 15px;
}
#kv .fixed-oc a .flex-Box .day span {
  font-size: 22px;
  margin-left: 10px;
}

#slpickup {
  padding: 40px 0 0;
  width: 95%;
  margin-left: auto;
  line-height: 1;
  overflow: hidden;
}
@media (min-width: 768px) {
  #slpickup {
    width: 90%;
    padding: 80px 0 0;
  }
}
#slpickup > .pickup_container {
  width: 100%;
  line-height: 1.5;
  height: auto;
  background: #fff;
  border-radius: 35px 0 0 35px;
  padding: 30px 0 30px 30px;
}
#slpickup > .pickup_container h2 {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  #slpickup > .pickup_container h2 {
    margin-bottom: 35px;
  }
}
#slpickup > .pickup_container .simplebar-scrollbar::before {
  background: #000;
  border-radius: 5px;
  height: 4px !important;
  margin-left: 1px;
  margin-top: 1px;
}
#slpickup > .pickup_container .simplebar-scrollbar .simplebar-visible::before {
  opacity: 1;
}
#slpickup > .pickup_container .simplebar-track {
  background: #cbd2e0;
  height: 10px !important;
  border-radius: 5px;
  width: 95%;
}
#slpickup > .pickup_container > .slide-Box {
  width: 100%;
  padding-bottom: 20px;
  margin-left: auto;
}
@media (min-width: 768px) {
  #slpickup > .pickup_container > .slide-Box {
    width: 97%;
  }
}
#slpickup > .pickup_container > .slide-Box .pickup-sl {
  display: flex;
  gap: 15px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
#slpickup > .pickup_container > .slide-Box .pickup-sl .pickup-sl-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}
#slpickup > .pickup_container > .slide-Box .pickup-sl .pickup-sl-item a {
  display: block;
  line-height: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #slpickup > .pickup_container > .slide-Box .pickup-sl .pickup-sl-item a:hover img {
    transform: scale(1.05);
  }
}
#slpickup > .pickup_container > .slide-Box .pickup-sl .pickup-sl-item a img {
  width: 300px;
  height: 195px;
  object-fit: cover;
}
@media (min-width: 768px) {
  #slpickup > .pickup_container > .slide-Box .pickup-sl .pickup-sl-item a img {
    width: clamp(460px, 43.75vw, 525px);
    height: clamp(300px, 28.3333333333vw, 340px);
    transition: all 0.5s ease;
  }
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-track .pickup-sl-item {
  height: auto !important;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-track .pickup-sl-item a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-track .slick-slide {
  padding-right: 15px; /* 左右10pxの余白 */
  box-sizing: border-box;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-arrow {
  z-index: 1;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  border: solid 2px #ccd2e0;
  overflow: hidden;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-arrow::before {
  content: "";
  display: inline-block;
  background-image: url(../img/front-page/sl_arrow.svg);
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-repeat: no-repeat;
  opacity: 1;
  background-position: center;
  background-size: 12px;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-arrow.slick-prev {
  left: -25px;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-arrow.slick-prev::before {
  transform: rotate(-180deg);
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-arrow.slick-next {
  right: 80px;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-dots li {
  height: 5px;
  width: 16%;
  background: #ccd2e0;
  margin: 0;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-dots li button {
  height: 100%;
  width: 100%;
  padding: 0;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-dots li button:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
}
#slpickup > .pickup_container > .slide-Box #pickupslider .slick-dots li.slick-active {
  background: #000;
}

/* #pickup */
#point {
  padding: 50px 0;
}
@media (min-width: 768px) {
  #point {
    padding: 100px 0;
  }
}
#point .container {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  #point .container {
    width: 90%;
    margin-left: auto;
    max-width: none;
  }
}
#point .container h2 {
  font-size: 28px;
  width: 95%;
  margin: 0 0 30px auto;
}
@media (min-width: 768px) {
  #point .container h2 {
    width: 100%;
    font-size: clamp(55px, 5vw, 60px);
    margin: 0 0 50px auto;
  }
}
#point .container h2 span {
  font-size: 22px;
  color: #fff;
  display: block;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  #point .container h2 span {
    font-size: clamp(40px, 3.75vw, 45px);
  }
}
#point .container .simplebar-scrollbar::before {
  background: #000;
  border-radius: 5px;
  height: 4px !important;
  margin-left: 1px;
  margin-top: 1px;
}
#point .container .simplebar-scrollbar .simplebar-visible::before {
  opacity: 1;
}
#point .container .simplebar-track {
  background: #fff;
  height: 10px !important;
  border-radius: 5px;
  width: 95%;
}
#point .container .slide-Box {
  width: 95%;
  padding-bottom: 20px;
  margin-left: auto;
  margin-bottom: 70px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /*
  #pointslider {
        .slick-track {
          //margin-left: 1193px;
          .point-sl-item {
            //width: clamp(460px, getVW(525px), 525px) !important;
            //max-width: clamp(700px, getVW(900px), 900px);
            //height: clamp(500px, getVW(600px), 600px);
            //height: clamp(300px, getVW(340px), 340px) !important;
            //width: 900px !important;
            //height: 600px !important;
            //max-width: 900px;
            a {
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
          .slick-slide {
            margin-right: 30px;
            box-sizing: border-box;
          }
        }
        .slick-arrow {
            z-index: 1;
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            border: solid 2px #ccd2e0;
            overflow: hidden;
            &::before {
              content: "";
              display: inline-block;
              background-image: url(../img/front-page/sl_arrow.svg);
              width: 100%;
              height: 100%;
              background-color: #fff;
              background-repeat: no-repeat;
              opacity: 1;
              background-position: center;
              background-size: 12px;
            }
            &.slick-prev {
            left: -25px;
            &::before {
              transform: rotate(-180deg);
            }
          }
          &.slick-next {
            right: 80px;
          }
        }
        .slick-dots {
          li {
            height: 5px;
            width: 16%;
            background: #ccd2e0;
            margin: 0;
            button {
              height: 100%;
              width: 100%;
              padding: 0;
              &:before {
                content: "";
                width: 100%;
                height: 100%;
                display: block;
              }
            }
            &.slick-active {
              background: #000;
            }
          }
        }
      }
      */
}
@media (min-width: 768px) {
  #point .container .slide-Box {
    width: 100%;
    margin-bottom: 140px;
    padding-bottom: 35px;
  }
}
#point .container .slide-Box ul {
  display: flex;
  gap: 15px;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul {
    gap: 30px;
  }
}
#point .container .slide-Box ul li {
  min-width: 291px;
  height: 417px;
  border-radius: 35px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  overflow: hidden;
  scroll-snap-align: start;
  transition: background-size 0.5s ease;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li {
    min-width: clamp(700px, 75vw, 900px);
    height: clamp(500px, 50vw, 600px);
    max-width: 1200px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:hover {
    background-size: 105%; /* 10%拡大 */
  }
}
#point .container .slide-Box ul li:nth-child(1) {
  background-image: url(../img/front-page/point_num-01_bg.jpg);
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:nth-child(1) {
    background-image: url(../img/front-page/point_num-01_bg_pc.jpg);
  }
}
#point .container .slide-Box ul li:nth-child(2) {
  background-image: url(../img/front-page/point_num-02_bg.jpg);
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:nth-child(2) {
    background-image: url(../img/front-page/point_num-02_bg_pc.jpg);
  }
}
#point .container .slide-Box ul li:nth-child(3) {
  background-image: url(../img/front-page/point_num-03_bg.jpg);
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:nth-child(3) {
    background-image: url(../img/front-page/point_num-03_bg_pc.jpg);
  }
}
#point .container .slide-Box ul li:nth-child(4) {
  background-image: url(../img/front-page/point_num-04_bg.jpg);
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:nth-child(4) {
    background-image: url(../img/front-page/point_num-04_bg_pc.jpg);
  }
}
#point .container .slide-Box ul li:nth-child(5) {
  background-image: url(../img/front-page/point_num-05_bg.jpg);
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li:nth-child(5) {
    background-image: url(../img/front-page/point_num-05_bg_pc.jpg);
  }
}
#point .container .slide-Box ul li a {
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li a:hover:after {
    right: 20px;
  }
}
#point .container .slide-Box ul li a:after {
  content: "";
  width: 16.67px;
  height: 19.46px;
  display: inline-block;
  background-image: url(../img/front-page/point_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 25px;
  right: 25px;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li a:after {
    width: 36.67px;
    height: 39.46px;
  }
}
#point .container .slide-Box ul li a .text-Box {
  width: 100%;
  padding: 60px 25px 25px;
  color: #fff;
  background: linear-gradient(0deg, #000000 0, transparent 100%);
}
#point .container .slide-Box ul li a .text-Box h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li a .text-Box h3 {
    font-size: clamp(30px, 2.9166666667vw, 35px);
  }
}
#point .container .slide-Box ul li a .text-Box h3 .num {
  position: absolute;
  top: 15px;
  right: 5px;
  height: 90.56px;
  width: auto;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li a .text-Box h3 .num {
    top: 20px;
    right: 20px;
    height: 150px;
  }
}
#point .container .slide-Box ul li a .text-Box h3 .num img {
  width: auto;
  height: 100%;
}
#point .container .slide-Box ul li a .text-Box p {
  min-height: 80px;
  width: 90%;
  font-size: 14px;
  line-height: 1.45;
}
@media (min-width: 768px) {
  #point .container .slide-Box ul li a .text-Box p {
    font-size: clamp(15px, 1.6666666667vw, 20px);
    letter-spacing: 1px;
  }
}

/* #point */
#course {
  background: #F7F7F7;
  padding: 50px 0;
  overflow: hidden;
}
#course h2 {
  font-size: 30px;
  width: 95%;
  margin-left: auto;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  #course h2 {
    width: auto;
    display: inline-block;
    font-size: clamp(55px, 5.4166666667vw, 65px);
    margin-bottom: 25px;
  }
}
#course h2 span {
  margin-bottom: 20px;
  padding-left: 0;
}
@media (min-width: 768px) {
  #course h2 span {
    margin-bottom: 70px;
    padding-left: 45px;
  }
}
#course h2 span:before {
  left: -20px;
}
@media (min-width: 768px) {
  #course h2 span:before {
    left: 0;
  }
}
#course h2 span:after {
  width: 71.2820512821vw;
}
@media (min-width: 768px) {
  #course h2 span:after {
    width: 3000px;
  }
}
#course .container {
  padding: 0;
}
#course .container > P {
  font-size: 16px;
  line-height: 24px;
  width: 95%;
  margin-left: auto;
}
@media (min-width: 768px) {
  #course .container > P {
    font-size: clamp(15px, 1.6666666667vw, 20px);
    width: 100%;
    margin: 0;
  }
}
#course .container .course-list {
  margin-top: 25px;
  margin-bottom: 45px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px 0;
  /* li */
}
#course .container .course-list > li {
  width: 48.5%;
  border-radius: 20px 20px 20px 0;
  overflow: hidden;
  box-shadow: 2px 2px 5px #cbcbcb;
}
@media (min-width: 768px) {
  #course .container .course-list > li {
    width: 32%;
    margin-bottom: 2%;
  }
}
#course .container .course-list > li > a {
  display: block;
  height: 100%;
  transition: all 0.5s;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a:hover {
    transform: scale(1.05);
  }
}
#course .container .course-list > li > a .top-item {
  height: 215px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .top-item {
    height: 273px;
  }
}
#course .container .course-list > li > a .top-item:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg, #000000 0, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
  transition: all 0.1s ease-out;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .top-item:before {
    height: 45%;
  }
}
#course .container .course-list > li > a .top-item:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, #000000 0, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  transition: all 0.3s ease-out;
}
#course .container .course-list > li > a .top-item p {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 12px;
  font-weight: 500;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .top-item p {
    font-size: 18px;
    top: 20px;
    left: 20px;
  }
}
#course .container .course-list > li > a .top-item h3 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  padding: 15px 10px;
  z-index: 2;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .top-item h3 {
    font-size: 20px;
  }
}
#course .container .course-list > li > a .bottom-item {
  background: red;
  padding: 15px 10px;
  height: 100%;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .bottom-item {
    display: flex;
    align-items: flex-start;
    height: 100%;
    flex-direction: column;
  }
}
@media (min-width: 800px) {
  #course .container .course-list > li > a .bottom-item {
    flex-direction: row;
  }
}
#course .container .course-list > li > a .bottom-item .type {
  display: inline-block;
  background: #fff;
  font-size: 14px;
  padding: 5px 8px;
  line-height: 1;
  border-radius: 5px;
  font-weight: bold;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .bottom-item .type {
    font-size: 16px;
  }
}
#course .container .course-list > li > a .bottom-item .job-list {
  margin-top: 10px;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .bottom-item .job-list {
    margin-top: 0;
    padding: 5px 8px;
  }
}
@media (min-width: 800px) {
  #course .container .course-list > li > a .bottom-item .job-list {
    margin-left: 10px;
  }
}
#course .container .course-list > li > a .bottom-item .job-list li {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .bottom-item .job-list li {
    font-size: 16px;
  }
}
#course .container .course-list > li > a .bottom-item .job-list li + li {
  margin-top: 4px;
}
#course .container .course-list > li > a .bottom-item .comment {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.3;
}
@media (min-width: 768px) {
  #course .container .course-list > li > a .bottom-item .comment {
    font-size: 16px;
    margin-top: 0;
    margin-left: 10px;
    padding: 5px 8px;
  }
}
#course .container .course-list .course-musicArtist a .top-item {
  background-image: url(../img/front-page/course-musicArtist_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-musicArtist a .top-item {
    background-image: url(../img/front-page/course-musicArtist_bg_pc.jpg);
  }
}
#course .container .course-list .course-musicArtist a .top-item::before {
  background: linear-gradient(180deg, #FF2B23 0, transparent 70%);
}
#course .container .course-list .course-musicArtist a .bottom-item {
  background: linear-gradient(0deg, #EE8593, #FF2B23);
}
#course .container .course-list .course-dance a .top-item {
  background-image: url(../img/front-page/course-dance_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-dance a .top-item {
    background-image: url(../img/front-page/course-dance_bg_pc.jpg);
  }
}
#course .container .course-list .course-dance a .top-item::before {
  background: linear-gradient(180deg, #FFA105 0, transparent 70%);
}
#course .container .course-list .course-dance a .bottom-item {
  background: linear-gradient(0deg, #C3D700, #F39700);
}
#course .container .course-list .course-kpopEntertainment a .top-item {
  background-image: url(../img/front-page/course-kpopEntertainment_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-kpopEntertainment a .top-item {
    background-image: url(../img/front-page/course-kpopEntertainment_bg_pc.jpg);
  }
}
#course .container .course-list .course-kpopEntertainment a .top-item::before {
  background: linear-gradient(180deg, #E0006C 0, transparent 70%);
}
#course .container .course-list .course-kpopEntertainment a .bottom-item {
  background: linear-gradient(0deg, #CEA4C9, #E30071);
}
#course .container .course-list .course-liveStaff a .top-item {
  background-image: url(../img/front-page/course-liveStaff_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-liveStaff a .top-item {
    background-image: url(../img/front-page/course-liveStaff_bg_pc.jpg);
  }
}
#course .container .course-list .course-liveStaff a .top-item::before {
  background: linear-gradient(180deg, #6DBA2D 0, transparent 70%);
}
#course .container .course-list .course-liveStaff a .bottom-item {
  background: linear-gradient(0deg, #A0D7DE, #6BBA2F);
}
#course .container .course-list .course-soundLighting a .top-item {
  background-image: url(../img/front-page/course-soundLighting_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-soundLighting a .top-item {
    background-image: url(../img/front-page/course-soundLighting_bg_pc.jpg);
  }
}
#course .container .course-list .course-soundLighting a .top-item::before {
  background: linear-gradient(180deg, #9171AF 0, transparent 70%);
}
#course .container .course-list .course-soundLighting a .bottom-item {
  background: linear-gradient(0deg, #FCD5BC, #9070AF);
}
#course .container .course-list .course-soundCreator a .top-item {
  background-image: url(../img/front-page/course-soundCreator_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-soundCreator a .top-item {
    background-image: url(../img/front-page/course-soundCreator_bg_pc.jpg);
  }
}
#course .container .course-list .course-soundCreator a .top-item::before {
  background: linear-gradient(180deg, #EA580E 0, transparent 70%);
}
#course .container .course-list .course-soundCreator a .bottom-item {
  background: linear-gradient(0deg, #FFDC5E, #EA560C);
}
#course .container .course-list .course-totaleEntertainment a .top-item {
  background-image: url(../img/front-page/course-totaleEntertainment_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-totaleEntertainment a .top-item {
    background-image: url(../img/front-page/course-totaleEntertainment_bg_pc.jpg);
  }
}
#course .container .course-list .course-totaleEntertainment a .top-item::before {
  background: linear-gradient(180deg, #8DD5DC 0, transparent 70%);
}
#course .container .course-list .course-totaleEntertainment a .bottom-item {
  background: linear-gradient(0deg, #89C45A, #009FB3);
}
#course .container .course-list .course-university a .top-item {
  background-image: url(../img/front-page/course-university_bg.jpg);
}
@media (min-width: 768px) {
  #course .container .course-list .course-university a .top-item {
    background-image: url(../img/front-page/course-university_bg_pc.jpg);
  }
}
#course .container .course-list .course-university a .top-item::before {
  background: linear-gradient(180deg, #6F5BA6 0, transparent 70%);
}
#course .container .course-list .course-university a .bottom-item {
  background: linear-gradient(0deg, #6FC8DB, #6D59A4);
}
#course .container .course-list .course-line {
  display: none;
  padding: 25px;
}
@media (min-width: 768px) {
  #course .container .course-list .course-line {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
#course .container .course-list .course-line .paren-Box {
  width: 100%;
}
#course .container .course-list .course-line .paren-Box > p {
  font-size: 23px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  #course .container .course-list .course-line .paren-Box > p {
    font-size: clamp(17px, 1.9166666667vw, 23px);
  }
}
#course .container .lineBtn {
  margin: 35px auto 0;
  max-width: 400px;
  width: 100%;
}
#course .container .lineBtn a {
  display: block;
  width: 100%;
  background: #13C65C;
  border-radius: 19px;
  font-size: 19px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  line-height: 1;
  padding: 15px 20px;
  position: relative;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  #course .container .lineBtn a {
    font-size: clamp(14px, 1.5833333333vw, 19px);
  }
}
@media (min-width: 768px) {
  #course .container .lineBtn a:hover {
    background: #000;
  }
}
#course .container .lineBtn a:after {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  background-image: url(../img/front-page/lineBtn_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
}
#course .container .openCampus {
  margin: 90px auto 0;
  max-width: 380px;
}
@media (min-width: 768px) {
  #course .container .openCampus {
    width: 100%;
    max-width: none;
  }
}
#course .container .openCampus a {
  display: block;
  background: linear-gradient(-30deg, #32B5D2 20%, #E46FA5 55%);
  border-radius: 20px;
  padding: 5px 20px 20px;
}
@media (min-width: 768px) {
  #course .container .openCampus a {
    background: linear-gradient(-50deg, #32B5D2 15%, #E46FA5 55%);
    display: flex;
    justify-content: space-between;
    border-radius: 64px;
    padding: 25px 50px;
    transition: all 0.3s;
  }
  #course .container .openCampus a:hover {
    transform: scale(1.03);
  }
}
#course .container .openCampus a > p {
  position: relative;
  border-bottom: solid 2px #D8FF00;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  #course .container .openCampus a > p {
    width: 75%;
    border: none;
    padding-bottom: 0;
  }
}
#course .container .openCampus a > p::after {
  content: "";
  width: 170px;
  height: 200px;
  background-image: url(../img/front-page/openCampus_after.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: -10px;
}
@media (min-width: 768px) {
  #course .container .openCampus a > p::after {
    width: clamp(151px, 15.9166666667vw, 191px);
    height: clamp(180px, 18.3333333333vw, 220px);
    right: 0;
    bottom: -25px;
  }
}
#course .container .openCampus a > p img {
  z-index: 2;
  position: relative;
}
@media (min-width: 768px) {
  #course .container .openCampus a > p img {
    width: 75%;
  }
}
#course .container .openCampus a .flex-Box {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  align-items: center;
  border-bottom: solid 2px #D8FF00;
}
@media (min-width: 768px) {
  #course .container .openCampus a .flex-Box {
    width: 20%;
    min-width: 177px;
    max-width: 220px;
    align-items: flex-start;
    border-top: solid 2px #D8FF00;
    flex-direction: column;
  }
}
#course .container .openCampus a .flex-Box .next {
  background: #d9ff03;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 20px;
  line-height: 1;
}
@media (min-width: 768px) {
  #course .container .openCampus a .flex-Box .next {
    font-size: clamp(20px, 2.0833333333vw, 25px);
    padding: 5px 15px;
    margin-bottom: 10px;
  }
}
#course .container .openCampus a .flex-Box .day {
  font-size: 36px;
  font-weight: bold;
  color: #daff03;
  margin-left: 15px;
}
@media (min-width: 768px) {
  #course .container .openCampus a .flex-Box .day {
    margin-left: 0;
    font-size: clamp(45px, 4.1666666667vw, 50px);
  }
}
#course .container .openCampus a .flex-Box .day span {
  font-size: 22px;
  margin-left: 10px;
}
@media (min-width: 768px) {
  #course .container .openCampus a .flex-Box .day span {
    font-size: clamp(25px, 2.5vw, 30px);
  }
}

/* course */
#shownews .container {
  max-width: 1000px;
}
#shownews .container h2 {
  width: 85%;
  max-width: 350px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  #shownews .container h2 {
    max-width: 450px;
  }
}
#shownews .container .newsbox .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  width: 95%;
  max-width: 600px;
  margin: 30px auto;
}
#shownews .container .newsbox .tabs .tab {
  width: 48%;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 12px 0;
  background: #000;
  border-radius: 18px;
  line-height: 1;
  color: #fff;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tabs .tab:hover {
    opacity: 0.8 !important;
  }
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tabs .tab {
    font-size: clamp(18px, 1.6666666667vw, 20px);
    padding: 15px 0;
    border-radius: 26px;
  }
}
#shownews .container .newsbox .tabs .all {
  background: linear-gradient(#5FC706, #8ED3AE);
}
#shownews .container .newsbox .tabs .open-campus {
  background: linear-gradient(#E677AF, #F441E5);
}
#shownews .container .newsbox .tabs .info {
  background: linear-gradient(#2FBFD9, #77F5FA);
}
#shownews .container .newsbox .tabs .campus-life {
  background: linear-gradient(#9677E6, #6131F1);
}
#shownews .container .newsbox .tab-content {
  display: none;
}
#shownews .container .newsbox .tab-content.active {
  display: block;
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tab-content .content .flex-Box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 35px 0;
  }
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tab-content .content .flex-Box li {
    width: 48%;
  }
}
#shownews .container .newsbox .tab-content .content .flex-Box li a {
  display: block;
  position: relative;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tab-content .content .flex-Box li a:hover figure img {
    transform: scale(1.05);
  }
}
#shownews .container .newsbox .tab-content .content .flex-Box li a::after {
  content: "";
  width: 33px;
  height: 33px;
  background-image: url(../img/front-page/shownews_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a figure {
  overflow: hidden;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a figure img {
  aspect-ratio: 326/212;
  object-fit: cover;
  transition: all 0.5s ease;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other {
  margin-top: 10px;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .catego {
  font-size: 14px;
  line-height: 1;
  background: #000000;
  padding: 8px 15px;
  border-radius: 18px;
  min-width: 100px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin-right: 10px;
  margin-bottom: 5px;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .open-campus {
  background: linear-gradient(#E677AF, #F441E5);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .campus-life {
  background: linear-gradient(#9677E6, #6131F1);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .internship {
  background: linear-gradient(#77D0E6, #4E80FF);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .lesson {
  background: linear-gradient(#77E6A7, #01B826);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .current-student {
  background: linear-gradient(#C8E677, #D6B006);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .graduate {
  background: linear-gradient(#E67777, #BD3900);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .info {
  background: linear-gradient(#2FBFD9, #77F5FA);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .offer {
  background: linear-gradient(#9677E6, #6131F1);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .today {
  background: linear-gradient(#77D0E6, #4E80FF);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .other {
  background: linear-gradient(#77E6A7, #01B826);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .kpop {
  background: linear-gradient(#E677AF, #F441E5);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .vocal {
  background: linear-gradient(#E67777, #BD3900);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .sound {
  background: linear-gradient(#77D0E6, #4E80FF);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .soundc {
  background: linear-gradient(#9677E6, #6131F1);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .dance {
  background: linear-gradient(#C8E677, #D6B006);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .musician {
  background: linear-gradient(#77E6A7, #01B826);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .video {
  background: linear-gradient(#C8E677, #D6B006);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .business {
  background: linear-gradient(#E67777, #BD3900);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .lighting {
  background: linear-gradient(#E677AF, #F441E5);
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .other .day {
  display: block;
  margin: 7px 0;
}
#shownews .container .newsbox .tab-content .content .flex-Box li a .text {
  line-height: 1.5;
  font-weight: 500;
  width: 89%;
}
#shownews .container .newsbox .tab-content .content .flex-Box li + li {
  margin-top: 30px;
}
@media (min-width: 768px) {
  #shownews .container .newsbox .tab-content .content .flex-Box li + li {
    margin-top: 0;
  }
}
#shownews .container .shownews_more {
  margin: 35px auto 0;
  max-width: 400px;
}
#shownews .container .shownews_more a {
  display: block;
  background: #fff;
  border: solid 1px #000;
  border-radius: 19px;
  font-size: 19px;
  text-align: center;
  color: #000;
  font-weight: bold;
  line-height: 1;
  padding: 15px 20px;
  position: relative;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  #shownews .container .shownews_more a:hover {
    transform: scale(1.05);
  }
}
#shownews .container .shownews_more a:after {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  background-image: url(../img/front-page/lineBtn_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
}

/* shownews */
#campuslife {
  padding: 50px 0;
  background: linear-gradient(0deg, #FF89D6 0%, #F5FF00 56%, #fdffd6 100%);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  #campuslife {
    padding: 75px 0;
  }
}
@media (min-width: 768px) {
  #campuslife h2 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
}
#campuslife h2::after {
  width: 1000px;
  left: 255px;
}
@media (min-width: 768px) {
  #campuslife h2::after {
    width: 3000px;
    left: 51%;
  }
}
@media (min-width: 1200px) {
  #campuslife h2::after {
    left: 480px;
  }
}
#campuslife .container {
  width: 90%;
  margin: 0 auto;
  padding: 0;
}
#campuslife .container .campuslife-Box {
  margin-top: 35px;
}
@media (min-width: 768px) {
  #campuslife .container .campuslife-Box {
    margin-top: 100px;
    min-height: 370px;
  }
}
#campuslife .container .campuslife-Box > img {
  border-radius: 30px;
}
@media (min-width: 768px) {
  #campuslife .container .campuslife-Box > img {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    max-width: 900px;
    min-height: 530px;
    object-fit: cover;
    height: auto;
    border-radius: 0 0 0 30px;
  }
}
#campuslife .container .campuslife-Box .campus-life-list {
  border-top: solid 1px;
  margin-top: 25px;
}
@media (min-width: 768px) {
  #campuslife .container .campuslife-Box .campus-life-list {
    width: 45%;
    margin-top: 0;
  }
}
#campuslife .container .campuslife-Box .campus-life-list li {
  border-bottom: solid 1px;
}
#campuslife .container .campuslife-Box .campus-life-list li a {
  display: block;
  font-size: 14px;
  line-height: 1;
  padding: 20px 0;
  position: relative;
}
@media (min-width: 768px) {
  #campuslife .container .campuslife-Box .campus-life-list li a {
    font-size: clamp(15px, 1.6666666667vw, 20px);
  }
  #campuslife .container .campuslife-Box .campus-life-list li a:hover::after {
    width: 30px;
    height: 30px;
  }
}
#campuslife .container .campuslife-Box .campus-life-list li a:after {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  background-image: url(../img/front-page/btn_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  transition: all 0.3s;
}
#campuslife .container .tiktok-Box {
  margin: 45px auto;
}
@media (min-width: 768px) {
  #campuslife .container .tiktok-Box .flex-Box {
    gap: 50px;
    display: flex;
    justify-content: center;
  }
}
#campuslife .container .tiktok-Box .flex-Box .tiktok-item {
  border-radius: 12px;
  overflow: hidden;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  background-color: #ffffff;
  padding: 12px 0;
  max-width: 350px;
  width: 89.7435897436vw;
  margin: 20px auto;
}
@media (min-width: 768px) {
  #campuslife .container .tiktok-Box .flex-Box .tiktok-item {
    margin: 0;
    width: 350px;
  }
}
#campuslife .container .tiktok-Box .flex-Box .tiktok-item blockquote {
  margin: 0;
}
#campuslife .container .tiktok-Box .flex-Box .tiktok-item + .tiktok-item {
  margin-top: 20px;
}
@media (min-width: 768px) {
  #campuslife .container .tiktok-Box .flex-Box .tiktok-item + .tiktok-item {
    margin-top: 0;
  }
}
#campuslife .container .tiktok-Box > a {
  display: block;
  max-width: 400px;
  margin: 50px auto 0;
}
@media (min-width: 768px) {
  #campuslife .container .tiktok-Box > a {
    transition: all 0.3s;
  }
  #campuslife .container .tiktok-Box > a:hover {
    transform: scale(1.05) !important;
  }
}
#campuslife .container .sns-Box {
  background: #fff;
  border-radius: 17px;
  padding: 15px;
  margin: 20px auto 0;
  max-width: 400px;
}
#campuslife .container .sns-Box > p {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
#campuslife .container .sns-Box ul {
  display: flex;
  justify-content: center;
  gap: 5%;
}
#campuslife .container .sns-Box ul li {
  width: 18%;
}
#campuslife .container .sns-Box ul li a {
  display: block;
  transition: all 0.3s;
}
#campuslife .container .sns-Box ul li a:hover {
  transform: scale(1.1);
}

/* campuslife */
#pickup {
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  #pickup {
    padding: 75px 0;
  }
}
#pickup h2::after {
  width: 1000px;
  left: 270px;
}
@media (min-width: 768px) {
  #pickup h2::after {
    left: 105%;
    width: 3000px;
  }
}
@media (min-width: 1200px) {
  #pickup h2::after {
    left: 510px;
  }
}
#pickup .container {
  width: 90%;
  margin: 0 auto;
  padding: 0;
}
#pickup .container .pickup-Box {
  margin-top: 35px;
}
@media (min-width: 768px) {
  #pickup .container .pickup-Box {
    margin-top: 100px;
    min-height: 370px;
  }
}
#pickup .container .pickup-Box > img {
  border-radius: 30px;
}
@media (min-width: 768px) {
  #pickup .container .pickup-Box > img {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    max-width: 900px;
    min-height: 530px;
    object-fit: cover;
    height: auto;
    border-radius: 0 0 0 30px;
  }
}
#pickup .container .pickup-Box .pickup-list {
  border-top: solid 1px;
  margin-top: 25px;
}
@media (min-width: 768px) {
  #pickup .container .pickup-Box .pickup-list {
    width: 45%;
    margin-top: 0;
  }
}
#pickup .container .pickup-Box .pickup-list li {
  border-bottom: solid 1px;
}
#pickup .container .pickup-Box .pickup-list li a {
  display: block;
  font-size: 14px;
  line-height: 1;
  padding: 20px 0;
  position: relative;
}
@media (min-width: 768px) {
  #pickup .container .pickup-Box .pickup-list li a {
    font-size: clamp(15px, 1.6666666667vw, 20px);
  }
  #pickup .container .pickup-Box .pickup-list li a:hover::after {
    width: 30px;
    height: 30px;
  }
}
#pickup .container .pickup-Box .pickup-list li a:after {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  background-image: url(../img/front-page/btn_arrow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  transition: all 0.3s;
}

/* campuslife */
#contact {
  background-image: url(../img/front-page/contact_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  #contact {
    background-image: url(../img/front-page/contact_bg_pc.jpg);
  }
}
#contact .container {
  padding: 70px 0 110px;
}
@media (min-width: 768px) {
  #contact .container {
    padding: 100px 0 110px;
  }
}
#contact .container h2 {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) {
  #contact .container h2 {
    font-size: clamp(45px, 4.1666666667vw, 50px);
  }
}
#contact .container .contact-list {
  margin: 45px auto 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  #contact .container .contact-list {
    margin: 100px auto 0;
    justify-content: space-between;
    flex-direction: row;
  }
}
#contact .container .contact-list li {
  max-width: 400px;
  width: 100%;
}
@media (min-width: 768px) {
  #contact .container .contact-list li {
    width: 32%;
  }
}
#contact .container .contact-list li a {
  display: block;
  border: solid 1px #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
  border-radius: 18px;
  color: #fff;
  position: relative;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  #contact .container .contact-list li a:hover {
    background: #4540a8;
  }
}
@media (min-width: 768px) {
  #contact .container .contact-list li a {
    font-size: clamp(16px, 2.0833333333vw, 25px);
    padding: 30px 0;
  }
}
#contact .container .contact-list li a:after {
  content: "";
  display: inline;
  width: 20px;
  height: 20px;
  background-image: url(../img/front-page/btn_arrow.svg);
  filter: invert(100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
}
#contact .container .contact-list li + li {
  margin-top: 30px;
}
@media (min-width: 768px) {
  #contact .container .contact-list li + li {
    margin-top: 0;
  }
}

/* #contact */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
}/*# sourceMappingURL=front-page.css.map */