@charset "UTF-8";
/* -------------------------------------------------- */
/* file   : admission.css                          */
/* update : 2020                                      */
/* -------------------------------------------------- */
/* -------------------------*/
/* 定義 */
/* -------------------------*/
.color_game {
  color: #e50166;
}

.color_it {
  color: #119ba3;
}

/*~~~~~ AO入学のポイント ~~~~~*/
.reason_tit {
  font-size: 20px;
}

.merit_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.merit_box {
  background: #ECEDEE;
  width: 48%;
  margin-bottom: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.merit_box .detail {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.merit_box .caption {
  text-align: center;
}

.merit_box .caption a {
  color: #333;
  position: relative;
}

.merit_box .caption a::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid #25a5ec;
  border-right: 2px solid #25a5ec;
  position: absolute;
  top: 1px;
  bottom: 0;
  right: -15px;
  margin: auto;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.num {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
}

/*~~~~~ 入試前教育 ~~~~~*/
.global_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.global_content .content_l {
  width: 35%;
}

.global_content .content_r {
  width: 55%;
}

.global_list01 li {
  font-size: 20px;
}

.support_title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: bold;
  margin: 15px 0 10px;
}

/*~~~~~ 入学前教育 ~~~~~*/
.tuition_dl {
  margin-top: 20px;
}

.tuition_dl dt.h3 {
  margin-top: 40px;
}

.tuition_dl dt.h3 span {
  border-color: #000;
}

.intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.intro figure {
  width: 47.5%;
  margin-bottom: 30px;
}

.intro .text {
  width: 47.5%;
}

.tit04 {
  margin-bottom: 15px;
  font-size: 28px;
  line-height: 1.3;
  font-weight: bold;
}

.mt01 {
  margin-top: 20px;
}

/*~~~~~ 参加者VOICE ~~~~~*/
#voice01 .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#voice01 .list .content {
  width: 30%;
  max-width: 352px;
  background: url(../img/voice_frame_side.jpg) repeat-y left top/100% auto;
  margin: 0 auto 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

#voice01 .list .text {
  position: relative;
  z-index: 10;
  max-width: 310px;
  width: 87.5706%;
  margin: auto;
  padding: 20px 0 40px;
}

#voice01 .list.last {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#voice01 .list.last .content {
  margin: 0 0 0 16px;
}

.it {
  color: #119ba3;
  font-size: 13px;
  margin-top: 10px;
}

.game {
  color: #e50166;
  font-size: 13px;
  margin-top: 10px;
}

/*~~~~~ 1番人気のある受験方法です。 ~~~~~*/
.attention dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.attention dl dt {
  background: #000000;
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  position: relative;
}

.attention dl dt::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #000000;
  position: absolute;
  top: 50%;
  right: -10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.attention dl dd {
  padding: 22.5px;
  background: #555555;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
  width: calc(100% - 60px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.attention dl dd p {
  font-size: 16px;
  font-weight: bold;
}

.yellow_tit {
  color: #ffff00;
  font-weight: bold;
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  line-height: 1.2;
}

.yellow {
  color: #ffff00;
}

.attention_link {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 20px;
}

.attention_link a {
  width: 30%;
  font-size: 18px;
}

.popular .attention_link a {
  font-size: 14px;
}

#merit02.merit_box:hover,
#merit03.merit_box:hover {
  opacity: 0.7;
}

/*---------------------------------*/
/* ハンバーガーメニューになるサイズのCSS */
/*---------------------------------*/
/*-------------------------------*/
/* SP用のCSS */
/*-------------------------------*/
@media screen and (max-width: 559px) {
  /* sp */
  /*~~~~~ AO入学のポイント ~~~~~*/
  .reason_tit {
    font-size: 16px;
  }
  .merit_box {
    width: 100%;
    padding: 15px;
  }
  .num {
    width: 27px;
  }
  /*~~~~~ 1番人気のある受験方法です。 ~~~~~*/
  .yellow_tit {
    font-size: 16px;
  }
  .attention dl dt {
    width: 35px;
  }
  .attention dl dd {
    width: calc(100% - 35px);
  }
  .attention dl dd p p {
    font-size: 15px;
  }
  .attention_link a {
    width: 100%;
    margin: 10px auto 0;
    font-size: 16px;
  }
  /*~~~~~ 入試前教育 ~~~~~*/
  .global_content {
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
  }
  .global_content .content_l {
    width: 100%;
  }
  .global_content .content_r {
    width: 100%;
    margin-bottom: 10px;
  }
  .global_list01 li {
    font-size: 16px;
  }
  .support_title {
    font-size: 20px;
  }
  .intro figure {
    width: 100%;
    margin-bottom: 15px;
  }
  .intro .text {
    width: 100%;
    margin-bottom: 10px;
  }
  .tit04 {
    margin-bottom: 6px;
    font-size: 18px;
  }
  /*~~~~~ 入学前教育 ~~~~~*/
  .tuition_dl dt.h3 {
    margin-top: 20px;
  }
  /*~~~~~ 参加者VOICE ~~~~~*/
  #voice01 .list .content {
    width: 100%;
    max-width: 335px;
  }
  #voice01 .list .text {
    padding: 10px 0 20px;
  }
  #voice01 .list.last .content {
    margin: 0 auto;
  }
  /*----------------sp end---------------*/
}
/*# sourceMappingURL=reason.css.map */