@charset "UTF-8";
/*==================================================

** pagename
==================================================*/
#personnelEvaluationStep h3 {
  font-size: 2.2rem; }
#personnelEvaluationStep .step-list li {
  width: 241px; }
  #personnelEvaluationStep .step-list li + li {
    position: relative; }
    #personnelEvaluationStep .step-list li + li:before {
      content: "";
      display: block;
      width: 20px;
      height: 40px;
      background: url("../img/common/ico_angle_bl_round_rt.svg") no-repeat center center/contain;
      position: absolute;
      top: 60px;
      left: -36px; }
#personnelEvaluationStep .step-list .phtbox {
  width: 160px;
  margin: auto; }
#personnelEvaluationStep .step-list .txtbox {
  margin-top: 16px; }
  #personnelEvaluationStep .step-list .txtbox dt {
    font-size: 1.8rem;
    font-weight: 500;
    color: #0071bd;
    text-align: center; }
    #personnelEvaluationStep .step-list .txtbox dt:before {
      content: "Step " counter(number);
      display: block;
      font: normal normal 700 1.6rem/1.6 "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", "M+ 1p", sans-serif;
      color: #828f98;
      margin-bottom: 4px; }
  #personnelEvaluationStep .step-list .txtbox dd {
    margin-top: 16px; }

#personnelEvaluationMerit .lrbox .txtbox {
  width: 608px; }
#personnelEvaluationMerit .lrbox .phtbox {
  width: 424px; }
#personnelEvaluationMerit .merit-box {
  counter-increment: number 1;
  padding-left: 64px;
  position: relative; }
  #personnelEvaluationMerit .merit-box dt {
    font-size: 2.6rem; }
    #personnelEvaluationMerit .merit-box dt:before {
      content: counter(number);
      font: normal normal 700 2rem/1.6 "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", "M+ 1p", sans-serif;
      color: #fff;
      text-align: center;
      background: #0071bd;
      display: block;
      width: 48px;
      line-height: 48px;
      border-radius: 1000%;
      position: absolute;
      top: 0;
      left: 0; }
  #personnelEvaluationMerit .merit-box dd {
    margin-top: 16px; }
  #personnelEvaluationMerit .merit-box + .merit-box {
    margin-top: 32px; }

#personnelEvaluationCost h3 {
  font-size: 2.2rem; }
#personnelEvaluationCost .cost-list > dt {
  background: linear-gradient(90deg, #7accf3 0, #0071bd 100%);
  border-radius: 16px 0 0;
  text-align: center;
  color: #fff;
  padding: 40px; }
  #personnelEvaluationCost .cost-list > dt .mincho {
    font-size: 2.2rem; }
  #personnelEvaluationCost .cost-list > dt .en {
    display: block;
    color: #d0d5d8;
    font-size: 1.2rem; }
#personnelEvaluationCost .cost-list > dd {
  text-align: center;
  border: 1px solid #d0d5d8;
  border-top: none;
  padding: 32px; }
#personnelEvaluationCost .cost-row-list {
  margin-top: 32px; }
  #personnelEvaluationCost .cost-row-list dt {
    background: #f5f7f7;
    margin-inline: -32px;
    padding: 11px;
    font: normal normal 600 1em/1.6 "Noto Serif JP", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS PMincho", "MS 明朝", serif; }
  #personnelEvaluationCost .cost-row-list dd {
    margin-top: 20px; }
  #personnelEvaluationCost .cost-row-list .fs-l {
    font-size: 1.8rem; }

@media screen and (max-width: 600px) {
  #personnelEvaluationStep h3 {
    font-size: 2.0rem; }
  #personnelEvaluationStep .step-list li {
    width: 100%; }
    #personnelEvaluationStep .step-list li + li {
      margin-top: 68px; }
      #personnelEvaluationStep .step-list li + li:before {
        background-image: url("../img/common/ico_angle_bl_round_btm.svg");
        width: 40px;
        height: 20px;
        left: 50%;
        transform: translateX(-50%);
        top: -44px; }

  #personnelEvaluationMerit .lrbox .txtbox, #personnelEvaluationMerit .lrbox .phtbox {
    width: 100%; }
  #personnelEvaluationMerit .phtbox {
    margin-top: 64px; }
  #personnelEvaluationMerit .merit-box {
    padding-left: 0; }
    #personnelEvaluationMerit .merit-box dt {
      font-size: 2.4rem;
      padding-left: 64px; }
      #personnelEvaluationMerit .merit-box dt:before {
        top: -4px; }

  #personnelEvaluationCost h3 {
    font-size: 2.0rem; }
  #personnelEvaluationCost .cost-list > dd {
    padding: 32px 5%; }
  #personnelEvaluationCost .cost-row-list {
    margin-top: 20px; }
    #personnelEvaluationCost .cost-row-list dt {
      margin-inline: -5.6%; } }