/* .container {
    background: linear-gradient(109.6deg, rgba(156, 252, 248, 1) 11.2%, rgba(110, 123, 251, 1) 91.1%);
} */
body {
  height: 100vh;
}
.card {
  margin-bottom: 15px;
}

.overflow-area {
  height: 1000px;
  overflow: scroll;
}



/* トップページCSS */
.evaluation-chart {
  width: 50%;
  height: 50%;
 
}
.evaluation-chart-area {
  width: 100%;
  height: 100%;
}
/* カリキュラム画面CSS */
.step-list {
  border-radius: 15px;
  width: 47%;
  height: 500px;
}
.comment-area {
  border-radius: 15px;
  width: 90%;
  height: 200px;
  white-space: pre-wrap;
} 
.step-name {
  width: 90%;
  margin: 0 auto;
}
.step-status {
  width: 90%;
  margin: 0 auto;
}
.goal-btn {
  height: 100px;
  /* margin: 0 auto; */
}
.warn {
  color: red;
  /* margin: 0 auto; */
}

@media (max-width: 990px) {
  .comment-area {
    height: 220px;
  }
}
@media (max-width: 768px) {
  .step-list {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .card {
     font-size: 6px;
  }
  .step-list {
    font-size: 6px;
  }
  .step-name {
    font-size: 6px;
  }
  .step-name {
    font-size: 6px;
  }
}

/* 日報ページCSS */
.comment {
  height: 200px;
}
.daily-reports input[type="checkbox"] {
  transform: scale(2);
}

.time {
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 20px;
}
/* カリキュラム詳細画面 */
.test-caution {
  color: red;
}

/* テスト実施画面 */
/* 大きく */
input[type="radio"]{
  transform: scale(2);
}

#limit-time-area {
    position: sticky;
    top: 10px;
    z-index: 1000;
}
#end-btn {
    position: sticky;
    top: 4px;
    z-index: 1000;
}
.question-num {
   font-size: 1.5rem;
   font-weight: 600;
}

.question-comment {
  white-space: pre-wrap;
}

.incorrect-color {
  color: #c23934;
}
.incorrect-bg {
  background-color: #f4656517;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff4136' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff4136' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.correct-bg {
  background-color: #29e81a17;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.balloon{
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 20px;
  box-shadow: 6px 6px 0px 0px #318c30;         /* 吹き出し本体の影 */
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 27px;
  bottom: -18px;
  border-top: 15px solid #318c30;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
/* 三角アイコンの影 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #bdffad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

#interviewDate {
  font-weight: bold;
}

.radioArea input[type="radio"] {
  width         : 10pt;        /* 大きさ：横 */
  height        : 10pt;        /* 大きさ：縦 */
  vertical-align: top;         /* 並び位置   */
}
 /* --- チェックボックス直後のlabel --- */
.radioArea input[type="radio"] + label {
  padding       : 0 4px;                      /* labelの余白 */
  font-size     : 10pt;                       /* labelの文字サイズ */                      /* 文字太さ   */
  border-radius : 5px;                        /* labelの角丸 */
  cursor        : pointer;                    /* カーソル設定 */
  transition    : .2s;                        /* なめらか変化 */
}
 /* --- 選択されたチェックボックス直後のlabel --- */
.radioArea input[type="radio"]:checked + label {
}
 /* --- 選択されていないチェックボックス直後のlabelにマウスが乗った --- */
.radioArea input[type="radio"]:not(:checked) + label:hover {
}

.lastInterviewInfo{
  background-color: #BBBBBB;
}