@charset "UTF-8";

:root{
  font:400 10px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  line-height:1.5;
  letter-spacing:.1em;
}
#new_header{
  font:400 14px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  line-height:1.6;
  letter-spacing:.1em;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 170px;
}
/*----------共通-------------------------------------------*/
.section_result{
  margin:0 auto;
  width:100%;
  max-width:730px;
  min-width:320px;
  background: #fff;
  box-sizing: border-box;
  margin-bottom:100px;
  font-size: 1.4rem;
  color:#333;
}
.note{
  font-size: 1.2rem;
  color:#8c8c8c;
}
.blue{
  color:#4E67C8;
}
.br_sp{
  display: none;
}
.bold{
  font-weight: bold;
}
.mb10{
 margin-bottom:10px;
}
.mb20{
  margin-bottom:20px;
 }
.mb50{
  margin-bottom:50px;
}
.r-link{
  display:inline-block;
  color: #404040;
  text-decoration:underline;
  font-weight:bold;
  padding:0 0.2em;
}
.r-link::after{
  content:"";
  display: inline-block;
  width:15px;
  height:15px;
  margin-left:5px;
  background: url(../img/middle/training_top/icon_sec4-position-link.svg) no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
  background-position:bottom;
}
.r-link:hover{
  opacity: .7;
}
.c-icon__movie{
    vertical-align: middle;
    margin-right: 5px;
}
/*----------ナビ-----------------------------------------*/
 .nav{
  text-align: center;
  box-shadow:0px 5px 15px #EAEAEA;
  padding:10px 0;
 }
 .nav_ttl{
  font-weight: bold;
  color:#666666;
 }
 .nav_sub{
  display:flex;
  justify-content: center;
  padding: 5px;
 }
 .nav_sub li{
  padding:0 15px;
  border-right: solid 1px #d8d8d8;
 }
 .nav_sub li a{
  color:#666666;
  transition: all .1s ease-in-out;
 }
 .nav_sub li a:hover{
  opacity:.7;
 }
 .nav_sub li:last-child{
  border-right: none;
 }
  /*----------大見出し、紹介文-----------------------------*/
 .c_ttl{
  font-size: 2.4rem;
  color:#666666;
  text-align: center;
  margin-bottom: 30px;
}
.c_ttl::before {
  content: url(https://www.insource-da.co.jp/common/img/middle/assessment/title_before.svg);
  display: inline-block;
  width: 29px;
  height: 29px;
  margin-right: 30px;
  vertical-align: middle;
}
.c_ttl::after {
  content: url(https://www.insource-da.co.jp/common/img/middle/assessment/title_after.svg);
  display: inline-block;
  width: 29px;
  height: 29px;
  margin-left: 30px;
  vertical-align: middle;
}
.c_txt{
  font-size: 1.4rem;
}
/*------結果別フィードバック・おすすめ研修----------------*/
.div_result{
  margin-bottom:50px;
}
.div_result h3{
  font-size: 2rem;
  padding-left:10px;
  border-left:6px solid #F14124;
  border-bottom:1px solid #F14124;
  color:#666666;
}
.table_result{
  text-align: left;
  border-collapse:collapse;
  table-layout:auto;
  margin: 0 auto;
  width:100%;
}
.table_result tr td, th{
  border: 1px solid #d8d8d8;
}
.table_result th{
  background:#ebebeb;
  text-align: center;
  padding:5px 0;
  color:#666666;
}
.th1{
  width:25%;
}
.th2{
  width:75%;
}
.td_theme{
  padding:8px;
}
.table_result tr td a{
  display: block;
  color:#3C3C3C;
  padding:8px;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.table_result tr td:not(.td_theme, .yet):hover{
  background-color:#FFEEEF;
}
.yet{
  padding:5px;
}
.recommended{
  margin-left:10px;
  font-size: 1rem;
  font-weight: bold;
  color: #F14124;
  padding:1px 10px;
  border-radius: 20px;
  border:solid 1px #F14124;
}
/*----------ボタン-----------------------------------------*/
.btn_box{
  text-align: center;
  font-size:1.4rem;
 }


/*************************************
レスポンシブ_TB
*************************************/
@media screen and (max-width: 768px){
 /*----------共通------------------------------------------*/
  .section_result{
    width:95%;
  }
  .mb50{
    margin-bottom:30px;
  }
  .br_pc{
    display: none;
  }
  /*----------ナビ-----------------------------------------*/
  .nav{
    box-shadow:none;
    border-bottom:solid 1px #666666;
   }
  .nav_sub li:last-child{
    border-right: none;
  }
    /*----------大見出し、紹介文-----------------------------*/
  .c_ttl{
    font-size: 2.2rem;
  }
  .c_ttl::before {
    width: 25px;
    height: 25px;
  }
  .c_ttl::after {
    width: 25px;
    height: 25px;
  }
  /*------結果別フィードバック・おすすめ研修----------------*/
  .div_result h3{
    font-size: 1.8rem;
  }
  .table_result tr:nth-child(2n+1){
    background-color: rgb(216, 216, 216, .2);
  }
  .td_theme{
    background-color:#fff;
  }
}
/*************************************
レスポンシブ_SP
*************************************/
@media screen and (max-width: 430px){
/*----------共通-------------------------------------------*/
  .section_result{
    margin-bottom:50px;
  }
  .mb10{
  margin-bottom:5px;
  }
  .mb20{
    margin-bottom:10px;
  }
  .mb50{
    margin-bottom:25px;
  }
  .br_sp{
    display: block;
  }
  /*----------ナビ-----------------------------------------*/
  .nav{
    padding:10px 0;
  }
  .nav_sub li{
    padding:0 10px;
  }
  /*----------大見出し、紹介文-----------------------------*/
  .c_ttl{
    font-size: 2rem;
    margin-bottom: 15px;
  }
  .c_ttl::before {
    width: 22px;
    height: 22px;
    margin-right: 15px;
  }
  .c_ttl::after {
    width: 22px;
    height: 22px;
    margin-left: 15px;
  }
  /*------結果別フィードバック・おすすめ研修----------------*/
  .div_result{
    margin-bottom:25px;
  }
  .div_result h3{
    font-size: 1.8rem;
    padding-left:10px;
  }
}