@charset "utf-8";

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl {
  background: url(../image/license_support/img_kv_pc.jpg) no-repeat center center;
  background-size: cover;
}
.page-ttl h1 {
  max-width: 380px;
}

.txt-lead {
  margin-bottom: 30px;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #7fbe26;
  font-weight: 800;
  text-align: center;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* license
-----------------------------------------------------------------*/
.license {
  padding: 85px 0 0;
}
.licenseWrap {
  padding: 60px 0;
}
/* color */
.licenseWrap.bio {
  background: url(../image/license_support/bg_bio_pc.png) bottom left no-repeat, #e5eef8;
  background-size: 18% auto;
}
.licenseWrap.m_coding {
  background: url(../image/license_support/bg_m_coding_pc.png) bottom right no-repeat, #fffae5;
}
.licenseWrap.psychology {
  background: url(../image/license_support/bg_psychology_pc.png) bottom left no-repeat, #f5e2e9;
}
.licenseWrap .lead {
  max-width: 350px;
  height: 60px;
  margin: 0 auto 30px;
  padding-top: 6px;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 24px;
  text-align: center;
  position: relative;
}
.licenseWrap .lead::before,
.licenseWrap .lead::after {
  position: absolute;
  top: 0;
  content: "";
  display: block;
  width: 18px;
  height: 60px;
  background-size: 100% auto;
}
/* color */
.licenseWrap.bio .lead {
  background: #20ace3;
}
.licenseWrap.m_coding .lead {
  background: #f3aa3c;
}
.licenseWrap.psychology .lead {
  background: #ea7a98;
}
.licenseWrap.bio .lead::after {
  right: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_right01.svg);
}
.licenseWrap.bio .lead::before {
  left: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_left01.svg);
}
.licenseWrap.m_coding .lead::after {
  right: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_right02.svg);
}
.licenseWrap.m_coding .lead::before {
  left: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_left02.svg);
}
.licenseWrap.psychology .lead::after {
  right: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_right03.svg);
}
.licenseWrap.psychology .lead::before {
  left: -18px;
  background-image: url(../image/license_support/sec_cont_ttl_left03.svg);
}

.licenseWrap .inner-wrap {
  display: flex;
  width: 90%;
  max-width: 1280px;
  margin: 30px auto 0;
  justify-content: space-between;
  flex-wrap: wrap;
}
.licenseWrap .inner-wrap.reserve {
  flex-flow: row-reverse;
}
.licenseWrap .inner-wrap .txtWrap {
  width: 50%;
  padding-left: 10%;
}
.licenseWrap .inner-wrap.reserve .txtWrap {
  width: 50%;
  padding-left: 0;
  padding-right: 10%;
}
.licenseWrap .inner-wrap .license-result {
  width: 47%;
}
.licenseWrap .inner-wrap .txtWrap .ttl {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 700;
}
/* color */
.licenseWrap.bio .inner-wrap .txtWrap .ttl {
  color: #20ace3;
}
.licenseWrap.m_coding .inner-wrap .txtWrap .ttl {
  color: #f3aa3c;
}
.licenseWrap.psychology .inner-wrap .txtWrap .ttl {
  color: #ea7a98;
}

.licenseWrap .inner-wrap .txtWrap .ttl span {
  font-size: 55%;
  vertical-align: top;
}
.licenseWrap .inner-wrap .txtWrap .txt {
  margin-top: 15px;
}
.licenseWrap .inner-wrap .txtWrap .txt span {
  display: block;
  font-size: 75%;
}
.licenseWrap .inner-wrap .txtWrap .profile {
  margin-top: 30px;
  font-size: 2.4rem;
}
.licenseWrap .inner-wrap .txtWrap .profile span {
  font-size: 70%;
}
.licenseWrap .inner-wrap .txtWrap .profile span + span {
  margin-left: 7px;
}
.licenseWrap .inner-wrap .txtWrap .profile .sub {
  display: block;
  font-size: 1.3rem;
}
.licenseWrap .inner-wrap .license-result .license-list {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
.licenseWrap .inner-wrap .license-result .license-list .ttl {
  padding: 2px 0;
  color: #ffffff;
  font-size: 1.6rem;
  text-align: center;
}
/* color */
.licenseWrap.bio .inner-wrap .license-result .license-list .ttl {
  background: #20ace3;
}
.licenseWrap.m_coding .inner-wrap .license-result .license-list .ttl {
  background: #f3aa3c;
}
.licenseWrap.psychology .inner-wrap .license-result .license-list .ttl {
  background: #ea7a98;
}

.licenseWrap .inner-wrap .license-result .inner-license-list {
  display: flex;
  padding: 15px 25px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.licenseWrap .inner-wrap .license-result .inner-license-list li {
  width: 49%;
  padding-left: 1em;
  text-indent: -1em;
}
.licenseWrap .inner-wrap .license-result .inner-license-list li span {
  margin-right: 5px;
  font-size: 70%;
}
/* color */
.licenseWrap.bio .inner-wrap .license-result .inner-license-list li span {
  color: #20ace3;
}
.licenseWrap.m_coding .inner-wrap .license-result .inner-license-list li span {
  color: #f3aa3c;
}
.licenseWrap.psychology .inner-wrap .license-result .inner-license-list li span {
  color: #ea7a98;
}

.licenseWrap .btn-detail {
  margin-top: 40px;
}
.licenseWrap .btn-detail a {
  max-width: 320px;
  height: 55px;
  font-size: 1.8rem;
  line-height: 55px;
  background-size: 18px auto;
}
/* color */
.licenseWrap.bio .btn-detail a {
  background-color: #20ace3;
}
.licenseWrap.m_coding .btn-detail a {
  background-color: #f3aa3c;
}
.licenseWrap.psychology .btn-detail a {
  background-color: #ea7a98;
}

/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-ttl {
    background: url(../image/license_support/img_kv_sp.jpg) no-repeat center center;
    background-size: cover;
  }
  .page-ttl h1 {
    max-width: 300px;
  }
  .txt-lead {
    margin-bottom: 15px;
    font-size: 1.8rem;
    line-height: 1.5;
  }

  /* license
-----------------------------------------------------------------*/
  .license {
    padding: 35px 0 0;
  }
  .license .inner {
    padding: 0;
  }
  .licenseWrap {
    padding: 30px 0;
  }
  /* color */
  .licenseWrap.bio {
    background: #e5eef8;
  }
  .licenseWrap.m_coding {
    background: #f2ecd2;
  }
  .licenseWrap.psychology {
    background: #f5e2e9;
  }
  .licenseWrap .lead {
    height: 60px;
    margin: 0 auto 30px;
    padding-top: 6px;
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 24px;
  }
  .licenseWrap .lead::before,
  .licenseWrap .lead::after {
    position: absolute;
    top: 0;
    content: "";
    display: block;
    width: 18px;
    height: 60px;
    background-size: 100% auto;
  }

  .licenseWrap .inner-wrap {
    margin: 5% auto 0;
  }
  .licenseWrap .inner-wrap.reserve {
    flex-flow: wrap;
  }
  .licenseWrap .inner-wrap .txtWrap {
    width: 100%;
    padding-left: 0;
  }
  /**/
  .licenseWrap.bio .inner-wrap .catch {
    width: 90%;
    margin: 0 auto 20px;
  }
  .licenseWrap.bio .inner-wrap .txtWrap {
    background: url(../image/license_support/bg_bio_sp.png) bottom left no-repeat;
    background-size: 180px auto;
    border-bottom: 4px solid #20ade4;
  }
  .licenseWrap.bio .inner-wrap .txtWrap .profile {
    margin-top: 110px;
    text-align: right;
  }
  .licenseWrap.m_coding .inner-wrap .catch {
    width: 90%;
    margin: 0 auto 20px;
  }
  .licenseWrap.m_coding .inner-wrap .txtWrap {
    background: url(../image/license_support/bg_m_coding_sp.png) bottom right no-repeat;
    background-size: 180px auto;
    border-bottom: 4px solid #f4ab3c;
  }
  .licenseWrap.m_coding .inner-wrap .txtWrap .profile {
    margin-top: 120px;
    text-align: left;
  }
  .licenseWrap.psychology .inner-wrap .catch {
    width: 90%;
    margin: 0 auto 20px;
  }
  .licenseWrap.psychology .inner-wrap .txtWrap {
    background: url(../image/license_support/bg_psychology_sp.png) bottom right no-repeat;
    background-size: 180px auto;
    border-bottom: 4px solid #ea7a98;
  }
  .licenseWrap.psychology .inner-wrap .txtWrap .profile {
    margin-top: 90px;
    text-align: left;
  }

  .licenseWrap .inner-wrap.reserve .txtWrap {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .licenseWrap .inner-wrap .license-result {
    width: 100%;
  }
  .licenseWrap .inner-wrap .txtWrap .ttl {
    font-size: 1.8rem;
    text-align: center;
  }

  .licenseWrap .inner-wrap .txtWrap .ttl span {
    font-size: 55%;
    vertical-align: top;
  }
  .licenseWrap .inner-wrap .txtWrap .txt {
    margin-top: 3%;
  }
  .licenseWrap .inner-wrap .txtWrap .txt span {
    font-size: 75%;
  }
  .licenseWrap .inner-wrap .txtWrap .profile {
    margin-top: 30px;
    font-size: 2.2rem;
  }
  .licenseWrap .inner-wrap .txtWrap .profile span {
    font-size: 70%;
  }
  .licenseWrap .inner-wrap .txtWrap .profile .sub {
    display: block;
    font-size: 1.3rem;
  }
  .licenseWrap .inner-wrap .license-result .license-list {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
  }
  .licenseWrap .inner-wrap .license-result .license-list .ttl {
    padding: 2px 0;
    color: #ffffff;
    font-size: 1.6rem;
    text-align: center;
  }
  /* color */
  .licenseWrap.bio .inner-wrap .license-result .license-list .ttl {
    background: #20ace3;
  }
  .licenseWrap.m_coding .inner-wrap .license-result .license-list .ttl {
    background: #f3aa3c;
  }
  .licenseWrap.psychology .inner-wrap .license-result .license-list .ttl {
    background: #ea7a98;
  }

  .licenseWrap .inner-wrap .license-result .inner-license-list {
    display: flex;
    padding: 15px 25px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .licenseWrap .inner-wrap .license-result .inner-license-list li {
    width: 100%;
  }
  .licenseWrap .inner-wrap .license-result .inner-license-list li span {
    margin-right: 5px;
    font-size: 70%;
  }
  /* color */
  .licenseWrap.bio .inner-wrap .license-result .inner-license-list li span {
    color: #20ace3;
  }
  .licenseWrap.m_coding .inner-wrap .license-result .inner-license-list li span {
    color: #f3aa3c;
  }
  .licenseWrap.psychology .inner-wrap .license-result .inner-license-list li span {
    color: #ea7a98;
  }

  .licenseWrap .btn-detail {
    margin-top: 7%;
  }
  .licenseWrap .btn-detail a {
    max-width: 320px;
    height: 55px;
    font-size: 1.8rem;
    line-height: 55px;
    background-size: 18px auto;
  }
  /* color */
  .licenseWrap.bio .btn-detail a {
    background-color: #20ace3;
  }
  .licenseWrap.m_coding .btn-detail a {
    background-color: #f3aa3c;
  }
  .licenseWrap.psychology .btn-detail a {
    background-color: #ea7a98;
  }
}

@media screen and (max-width: 500px) {
  .licenseWrap.bio .inner-wrap .txtWrap {
    background-size: 50% auto;
  }
  .licenseWrap.m_coding .inner-wrap .txtWrap {
    background-size: 40% auto;
  }
  .licenseWrap.psychology .inner-wrap .txtWrap {
    background-size: 40% auto;
  }
}