@charset "utf-8";

/* スマホ（〜767px） */
@media (max-width: 767px) {
  /* スマホ専用スタイル */
}

/* タブレット（768px〜1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  /* タブレット専用スタイル */
}

/* PC（1025px〜） */
@media (min-width: 1025px) {
  /* PC専用スタイル */
}

.assessment_intro { display: inline; padding-bottom: 4px; margin-bottom: 40px; background: linear-gradient(transparent 50%, #FDFD8A 0%); }

.assessment_list { display: flex; flex-direction: column; gap: 40px; margin-top: 130px; }
.assessment_list li { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: #FFF;  }
.assessment_title { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.assessment_title::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; width: 60px; height: 1px; margin: 0 auto; background: #004680; }
.assessment_title .assessment_icon { width: 40px; }
.assessment_title h3 { display: inline; vertical-align: middle; }
.assessment_text p { margin-bottom: 20px; }

.assessment_recommend_wrap { position: absolute; top: -90px; left: 0; right: 0; margin: 0 auto; background: #004680; border-radius: 10px; z-index: 1; }
.assessment_recommend { position: relative; padding: 20px; }
.assessment_recommend::after { content: ''; position: absolute; bottom: -12px; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: 16px solid #004680; border-left: 10px solid transparent; border-right: 10px solid transparent; }
.assessment_recommend_illust { position: absolute; bottom: 0; left: 12px; width: 100px; }
.assessment_recommend_text { margin-left: 100px; font-size: 18px; font-weight: bold; color: #FFF; }

@media (min-width: 768px) {
  .assessment_intro { display: block; width: fit-content; padding-left: 16px; margin: 0 auto; }
  .assessment_list { flex-direction: row; margin-top: 120px; }
  .assessment_list li { flex: 1; padding: 40px; }

  .assessment_recommend_wrap { top: -70px; }
  .assessment_recommend { padding: 24px; }
  .assessment_recommend_illust { left: 24px; width: 120px; }
  .assessment_recommend_text { margin-left: 130px; font-size: 20px; }
}