@charset "utf-8";

/* マッチング診断
--------------------------------------------------------- */
.assessment {
  margin-top: 20px;
}

.ttl-page {
  margin: 0 auto 15px;
}

.ttl-page img {
  width: 100%;
  height: auto;
}

.assessment-question {
  font-size: 15px;
  margin: 30px 0;
}

/* 結果ページ
--------------------------------------------------------- */
.ttl-page-result {
  background-color: #5e63cc;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 10px;
}

.ttl-result {
  background-color: #eeefff;
  border-radius: 8px;
  color: #5e63cc;
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 0 auto 50px;
  padding: 10px;
  text-align: center;
}

.result-sentence {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  background-color: #eeefff;
  border-radius: 10px;
  margin: 0 auto 20px;
  padding: 25px;
  position: relative;
}

.result-sentence-intro h3 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}

.result-sentence-intro + img {
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 100px;
  height: auto;
}

.result-sentence-main {
  width: 84%;
}

.result-recommend {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px;
  text-align: center;
}

.result-recommend h4 {
  font-size: 18px;
}

.result-recommend p {
  color: #343bd3;
}

.result-recommend-note {
  color: #333;
  font-size: 11px;
  padding: 0 0 6px 0;
}

.result-detail-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 50px;
}

/* レーダーチャート
--------------------------------------------------------- */
.area-canvas {
  overflow: hidden;
  padding: 0 20px 0 0;
}

/* 象限説明
--------------------------------------------------------- */
table.assessment-table {
  font-size: 13px;
  line-height: 160%;
}

table.assessment-table th {
  background-color: #eee;
  color: #666;
  text-align: center;
}

table.assessment-table th,
table.assessment-table td {
  border: 1px solid #ccc;
  padding: 10px;
}

table.assessment-table td small {
  color: #666;
  display: block;
  line-height: 140%;
  padding: 5px 0 0;
}

table.assessment-table tr td:nth-of-type(1) {
  text-align: center;
  white-space: nowrap;
}

/* ボタン
--------------------------------------------------------- */
.js_button_start {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0ca795;
  border: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0 auto;
  outline: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  width: 70%;
}

.js_button_answer {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0ca795;
  border: none;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 auto 25px;
  outline: none;
  padding: 16px 20px;
  text-align: left;
  text-decoration: none;
  width: 70%;
}

.js_button_back {
  background: none;
  border: none;
  color: #178de2;
  cursor: pointer;
  display: block;
  margin: 35px auto 0;
  outline: none;
  text-decoration: underline;
}

.js_button_start:hover,
.js_button_answer:hover,
.js_button_back:hover {
  opacity: 0.9;
}

/* 前回の結果リンク
--------------------------------------------------------- */
.assessment-before-link {
  color: #178de2;
  margin: 30px 0 0;
  text-align: center;
}

/* プログレスバー
--------------------------------------------------------- */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 20px;
  background-color: #eaeaea; /* -moz- 用 */
  width: 100%;
}

::-webkit-progress-bar {
  background-color: #eaeaea;
  border-radius: 20px;
}

/* バーの進捗率の表示を変える */
::-moz-progress-bar {
  background-color: #5e63cc;
  border-radius: 20px;
}

::-webkit-progress-value {
  background-color: #5e63cc;
  border-radius: 20px;
}