@charset "utf-8";
#human-capital {
 /* width: 90vw;*/
  margin: 0 auto 5em auto;
}
#human-capital *{
  font-family: "Noto Sans Japanese-r";
  font-size: calc(16px + 25 * ((100vw - 375px) / 768));
  box-sizing: border-box;
}
#human-capital .smp_view{display: block;}
#human-capital .pc_view{display: none;}
@media screen and (min-width:768px) {
  #human-capital *{
    font-size: 32px;
  }
  #human-capital .smp_view{display: none;}
  #human-capital .pc_view{display: block;}
}
#human-capital img{
  width: 100%;
  height: auto;
}

/*h1*/
.h1_image{
  position: relative;
  background-image: url(../images/h1_smp.jpg);
  background-size: 100% auto ;
  background-position: top center;
  background-repeat: no-repeat;
  color: #fff;
  aspect-ratio: 860/450;
}
#human-capital .h1_image h1{
  position: absolute;
  left: 1em;
  top:50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  text-shadow: 2px 0px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.05em;
  font-weight: bold;
} 
#human-capital .h1_image h1 span{
  display: block;
  font-size: 0.8em;
  font-weight: normal;
} 
@media screen and (min-width:768px) {
  .h1_image{
    background-image: url(../images/h1.jpg);
    aspect-ratio: 1920/450;
  }
}
#human-capital .atamabun{
  padding: 2em 0;
  width: 80%;
  margin: 0 auto;
  font-size: 0.8em;
  line-height: 2em;
}
@media screen and (min-width:768px) {
  #human-capital .atamabun{
    font-size: 1.2em;
  }
}

/*motto*/
#human-capital .motto{
  margin: 1em 5% 3em 5%;
  text-align: center;
}
@media screen and (min-width:768px) {
  #human-capital .motto{
    margin: 3em 5%;
  }
}
#human-capital .motto h2{
  font-size: 0.9em;
  padding-bottom: 1em;
}
#human-capital .motto h2 span{
  vertical-align: bottom;
  font-size: 0.8em;
}
#human-capital .motto p{
  font-family: "Noto Sans Japanese-b";
  letter-spacing: -0.05em;
  color: #51b1b4;
  text-align: center;
}

@media screen and (min-width:768px) {
  #human-capital .motto{
    margin: 0 auto 4em auto;
  }
}

/*hc_content2*/
.hc_content4{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.hc_content4 > div{
  background-color: #51b1b4;
  width: 100%;
  padding: 0.8em;
  margin-bottom: 1em;
}
#human-capital .hc_content4 > div > a > h3{
  color: #fff;
}
#human-capital .hc_content4 > div > a > p{
  color:#90d2d4;
  font-size: 0.8em;
}
#human-capital .hc_content4 h3:before{
  content: '';
  display: inline-block;
  width:3em;
  margin-right: 0.3em;
  aspect-ratio: 3 / 4;
  padding-left: 1.5em;
  background-position: left bottom;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
#human-capital .hc_content4 .hc_no1 h3:before{
  background-image: url(../images/no1.svg);
}
#human-capital .hc_content4 .hc_no2 h3:before{
  background-image: url(../images/no2.svg);
}
#human-capital .hc_content4 .hc_no3 h3:before{
  background-image: url(../images/no3.svg);
}
#human-capital .hc_content4 .hc_no4 h3:before{
  background-image: url(../images/no4.svg);
}

@media screen and (min-width:768px) {
  .hc_content4 > div{
    width: 48%;
  }
}


/*====================================================================
 modal_new
====================================================================*/
html.modalset {
  overflow: hidden;
}
html.modalset #header,
html.modalset #pagetop {
  opacity:0;
}
.samplemodal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999999999;


  .samplemodal a{
    cursor: pointer;
  }
  .topix_box{
    background-color: #fff;
    border-radius: 15px;
    padding: 1em;
    max-width: 500px;
    text-align: left;
    margin:0 auto;
  }
  .topix_box img{
    width: 100%;
    height: auto;
  }
  .modal_img{
    margin-bottom: 0;
  }
  
  .all_close {
    position: fixed;
    top:0;
    right:0;
    color: #fff;
    font-size: 3em;
    cursor: pointer;
    line-height: 1em;
  }
  .samplemodal-close {
    background: #fff;
    color: #000;
    padding: 0.8em 1.5em;
    display: inline-block;
    font-size: 1em;
    border-radius: 8px;
    margin-top: 1em;
  }
  .samplemodal-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    white-space: nowrap;
    padding: 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  .samplemodal-wrap::-webkit-scrollbar {
    display: none;
  }
  .samplemodal-wrap:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0px;
    height: 100%;
  }
  .samplemodal-bg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
  }
  .samplemodal-box {
    width: 100%;
    max-width: 900px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }
  .samplemodal-box .inner {
    white-space: normal;
  }

  .samplemodal-box .inner > :first-child {
    margin-top: 0;
  }	
}

/*achievements*/
.achievements{
  padding-top: 4em;
}
.achievements h3{
  font-family: "Noto Sans Japanese-b";
  font-weight: bold;
  padding-bottom: 0.5em;
  text-align: center;

}

/*table_wrap*/
.table_wrap{
  padding-bottom: 1em;
  overflow-x: scroll;
  width: 90%;
  margin: 0 auto;
}
.table_wrap table{
  max-width: 1280px;
  width: 500px;
  margin: 0 auto;
  border-collapse:separate;
  border-spacing: 0;
  font-size: 0.8em;
 }


.table_wrap tr:nth-child(odd) td,
.table_wrap tr:nth-child(odd) th,
section .table_wrap tr td.toku_c1,
section .table_wrap tr th.toku_c1{
   background: #fff;
   border-bottom: #ecfbf8 1px solid;
  }
.table_wrap tr:nth-child(odd) td,
section .table_wrap tr td.toku_c1{
    border-left: #ecfbf8 1px solid;
  }
.table_wrap tr:nth-child(even) td,
.table_wrap tr:nth-child(even) th,
section .table_wrap tr td.toku_c2,
section .table_wrap tr th.toku_c2{
   background: #ecfbf8;
   border-bottom: #fff 1px solid;
  }
.table_wrap tr:nth-child(even) td,
section .table_wrap tr td.toku_c2{
   border-left: #fff 1px solid;
  }
.table_wrap tr:nth-child(1) td{
  background-color: #d3eef9;
  }

 .table_wrap tr:nth-child(1) th.fsttd{
  background-color: #d3eef9;
  }


#human-capital .table_wrap table td,
#human-capital .table_wrap table th{
    text-align: center;
    padding: 0.3em;
    font-size: 0.8em;
    border-right: #fff 1px solid;
    vertical-align: middle;
}
  
.table_wrap table th{
    left: 0;
    position: sticky;
    z-index: 1;
    font-family: "Noto Sans Japanese-sb";
}

.table_wrap table th:before{
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 100%;
      height: 100%;
}
.table_wrap table.jisseki  th{
  width: 8em;
}
.table_wrap table.saiyou_jisseki th{
  width: 4em;
}
.table_wrap table.intern th{
  width: 5em;
}
#human-capital table.jisseki {
  width: 40em;
}
#human-capital table.saiyou_jisseki {
  width: 24em;
}
#human-capital  table.intern{
  width: 24em;
}
.intern_wrap table{
  margin-bottom: 1em;
}
@media screen and (min-width:768px) {
  #human-capital table.jisseki {
    min-width: 1080px;
    width: 100%;
  }
  #human-capital table.saiyou_jisseki {
    min-width: 1080px;
    width: 100%;
  }
  #human-capital  table.intern{
    width: 800px;
  }
  #human-capital .table_wrap table td,
  #human-capital .table_wrap table th,
  #human-capital .flex_list li{
  font-size: 0.5em;
  }
}
.flex_list{
  width: 90%;
  margin: 0 5%;
}
.flex_list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex_list li{
  width: 100%;
  text-align: center;
  padding: 0.5em 0;
  border: #ecfbf8 1px solid;
  background-color: #fff;
}
#human-capital .flex_list li.ls5{
  font-size: 0.9em;
}
.flex_list li:nth-child(odd){
  background: #ecfbf8;
}
@media screen and (min-width:768px) {
  .flex_list li{
    width: 33.3%;
  }
  #human-capital .flex_list li.ls5{
    font-size: 0.5em;
  }
  li.saith{
    background: #fff;
  }
  .flex_list li:nth-child(odd){
    width: 33.3%;
    background: #ecfbf8;
  }
  .flex_list li:last-child{
    margin-right: auto;
  }
  .intern_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }
  .intern_wrap h3{
    width: 100%;
  }
  .intern_wrap .table_wrap{
    width: 48%;
  }
  #human-capital .intern_wrap .table_wrap table.intern{
    width:100%;
  }
}
#human-capital p.attention{
  font-size: 0.4em;
  text-align: right;
  padding-top: 1em;
}
#human-capital span.attention_top{
  font-size: 0.8em;
  vertical-align: top;
}