@charset "UTF-8";
/* ============================================================
// casestudy.scss
============================================================ */
/* ------------------------------------------------------------
// Fluid Design Function
// 最小値〜最大値の間で数値を可変させる共通関数
------------------------------------------------------------ */
/* ------------------------------------------------------------
// 実務に直結するハンズオン研修を動画で見る
------------------------------------------------------------ */
.video-grid {
  display: flex;
  gap: clamp(20px, 4.8484848485vw + 1.8181818182px, 60px);
  width: 100%;
  max-width: 944px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .video-grid {
    flex-direction: column;
  }
}

.video-card {
  flex: 1;
}
.video-card__thumbnail {
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card__thumbnail:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  cursor: default;
}
.video-card__info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-inline: 10px;
}
.video-card__tag {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  padding-inline: 10px;
  border-radius: 6px;
}
.video-card__tag.is-aws {
  background-color: #d64316;
}
.video-card__tag.is-azure {
  background-color: #2b61af;
}
.video-card__tag.is-cisco {
  background-color: #5935a8;
}
.video-card__label {
  font-size: 16px;
  font-weight: 700;
  color: #2d8bea;
}
.video-card__text {
  font-size: 15px;
  color: #000;
  padding-inline: 10px;
}

/* ------------------------------------------------------------
// AWS・Azure・Ciscoを、実際に触って学ぶ。
------------------------------------------------------------ */
.training-grid {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .training-grid {
    flex-direction: column;
  }
}

.training-card {
  flex: 1;
  background-color: #fff;
  border: 1px solid #2d8bea;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.training-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(45, 139, 234, 0.15);
  cursor: default;
}
.training-card__head {
  padding: 40px 20px;
  text-align: center;
  color: #fff;
}
.training-card__head.is-aws {
  background-color: #d64316;
}
.training-card__head.is-azure {
  background-color: #2b61af;
}
.training-card__head.is-cisco {
  background-color: #5935a8;
}
.training-card__title {
  font-size: 18px;
  font-weight: 700;
}
.training-card__body {
  padding: 20px;
}
.training-card__list {
  margin-bottom: 25px;
}
.training-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.training-card__list li img {
  display: block;
  width: 14px;
  padding-top: 6px;
}
.training-card__target {
  margin-bottom: 20px;
}
.training-card__target-label {
  display: inline-block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 0 6px 1px;
  background-color: #2d8bea;
  border-radius: 6px;
}
.training-card__target-text {
  font-size: 18px;
  font-weight: 700;
  color: #2b61af;
}
.training-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.training-card__tags span {
  background-color: #f2f2f2;
  color: #999;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px 1px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
// 学んだ内容を、次の案件につなげる。
------------------------------------------------------------ */
.career-section {
  width: 100%;
  max-width: 944px;
  margin-inline: auto;
}

.career-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .career-flow {
    flex-direction: column;
    gap: 20px;
  }
}
.career-flow__arrow {
  flex-shrink: 0;
}
.career-flow__arrow img {
  display: block;
  width: 100%;
  height: auto;
}
.career-flow__arrow .is-pc {
  display: block;
  width: clamp(20px, 1.8181818182vw + 13.1818181818px, 35px);
}
@media screen and (max-width: 767px) {
  .career-flow__arrow .is-pc {
    display: none;
  }
}
.career-flow__arrow .is-sp {
  display: none;
  width: 25px;
}
@media screen and (max-width: 767px) {
  .career-flow__arrow .is-sp {
    display: block;
  }
}

.career-step-card {
  flex: 1;
  background-color: #fff;
  border: 1px solid rgba(45, 139, 234, 0.4);
  border-radius: 12px;
  padding: 10px 20px 20px;
  min-height: 180px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media screen and (max-width: 767px) {
  .career-step-card {
    width: 100%;
    min-height: auto;
    padding: 20px;
  }
}
.career-step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(45, 139, 234, 0.15);
  cursor: default;
}
.career-step-card__head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .career-step-card__head {
    margin-bottom: 10px;
  }
}
.career-step-card__num {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}
.career-step-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #2d8bea;
}
.career-step-card__text {
  font-weight: 700;
}
.career-step-card__list li {
  font-weight: 700;
}

.project-tags {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2121212121vw + 5.4545454545px, 20px);
  width: 100%;
  max-width: 944px;
  margin-inline: auto;
}
@media screen and (max-width: 991px) {
  .project-tags {
    justify-content: center;
  }
}

.project-tag {
  display: inline-block;
  font-weight: 700;
  color: #2d8bea;
  line-height: 1.2;
  padding: clamp(6px, 0.4848484848vw + 4.1818181818px, 10px) clamp(20px, 1.2121212121vw + 15.4545454545px, 30px);
  background-color: #fff;
  border: 1px solid #2d8bea;
  border-radius: 6px;
}