@charset "utf-8";

/* =========================
   NEW Course Cards CSS
   Bootstrap3 friendly
   ========================= */

.cc-title-wrap{ margin: 20px 0 14px; }
.cc-title{
  display:inline-block;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0;
  padding-bottom: 10px;
  position: relative;
  font-size: 28px;
}
.cc-title:after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140px;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  opacity: .75;
}
.cc-title--blue{ color:#3e45a8; }
.cc-title--pink{ color:#ff3366; }
.cc-title--olive{ color:#9cb34b; }

.cc-card{
  border:1px solid #e9e9e9;
  border-radius: 14px;
  background:#fff;
  padding: 18px;
  margin-bottom: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cc-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.cc-link{
  display:block;
  color: inherit;
  text-decoration:none;
}
.cc-link:hover,
.cc-link:focus{
  text-decoration:none;
  color: inherit;
}

.cc-row{ display:block; }

.cc-imgbox{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border:1px solid #eee;
  background:#fafafa;
}
.cc-imgbox img{ display:block; width:100%; height:auto; }


.cc-body{
  padding-top: 4px;
}

.cc-head{
  display:inline-block;
  background:#3e45a8;
  color:#fff;
  font-weight:900;
  font-size: 28px;
  line-height: 1.1;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.cc-card--blue .cc-head{ background:#3e45a8; }
.cc-card--pink .cc-head{ background:#ff3366; }
.cc-card--green .cc-head{ background:#2fa24a; }
.cc-head--dark{ background:#1f2a73; } /* for "通学＆オンライン" line */

.cc-lead{
  font-weight: 800;
  margin: 4px 0 8px;
  color:#303030;
}

.cc-text{
  margin: 0 0 14px;
  line-height: 1.9;
  color:#333;
}

/* Pink course top text / pill */
.cc-pink-top{
  color:#ff3366;
  font-weight: 900;
  font-size: 18px;
  margin: 6px 0 8px;
}
.cc-pill{
  display:inline-block;
  color:#ff3366;
  font-weight:900;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ff3366;
  margin: 0 0 10px;
}

/* Olive titles */
.cc-olive-title{
  color:#9cb34b;
  font-weight: 900;
  font-size: 22px;
  margin: 6px 0 6px;
}

.cc-cta{
  text-align:center;
  margin-top: 8px;
}
.cc-btn{
  display:inline-block;
  min-width: 260px;
  padding: 12px 18px;
  border-radius: 10px;
  color:#fff;
  font-weight: 900;
  font-size: 18px;
  letter-spacing:.04em;
}
.cc-card--blue .cc-btn{ background:#6a70df; }
.cc-card--pink .cc-btn{ background:#ff3366; }
.cc-card--green .cc-btn{ background:#2fa24a; }

/* =========================
   RWD
   ========================= */
@media (max-width: 767px){
  .cc-title{ font-size: 24px; }
  .cc-card{ padding: 14px; border-radius: 12px; }
  .cc-body{ margin-top: 12px; }
  .cc-head{ font-size: 24px; padding: 9px 12px; border-radius: 9px; }
  .cc-btn{ width: 100%; min-width: 0; }
}