@charset "utf-8";
/* default PC */

#contents .bnr-area {
  padding:0 0 20px;
}

/* welfare */
#contents .welfare-area h3 {
  clip-path:none;
  font-size:20px;
  margin:0 0 25px;
  text-align:center;
}

#contents .welfare-area .welfare-item {
  margin-bottom:30px;
}

#contents .welfare-area .welfare-item .txt-box {
  padding:20px;
}

#contents .welfare-item img {
  height:100px;
  width:100px;
}

#contents .welfare-area .welfare-item p {
  font-size:17px;
}

#contents .welfare-area .welfare-item:nth-child(n+9) {
  margin-bottom:0;
}

#contents .welfare-item {
  background-color:#F8F6F0;
  margin-bottom:25px;
  padding:30px 25px 25px;
}

#contents .welfare-item h3 {
  background-color:#FFF0;
  color:#EC6319;
  font-size:22px;
  margin-bottom:15px;
  padding:0;
  text-align:center;
}

#contents .welfare-item.txt-2box {
  margin-right:20px;
  width:calc(100% / 2 - 13px);
}

#contents .welfare-item.txt-2box.end {
  margin-right:0;
}

#contents .welfare-item.txt-2box.end .txt-box .txt-2box {
  background-color:#FFF;
  padding:15px;
}

#contents .welfare-item.txt-2box.end .txt-box .txt-2box p {
  margin-bottom:0;
}

/* welfare */

/* training */
#training #contents .img-2box-txt.txt-area h3 {
  background-color:#FFF0;
  color:#EC6319;
  font-size:140%;
  font-weight:bold;
  line-height:1.5em;
  margin-bottom:20px;
  padding:0;
}

#contents .education-area h3 {
  clip-path:none;
  font-size:20px;
  margin:0;
  text-align:center;
}

#contents .education-area .education-item .txt-box {
  padding:20px;
}

#contents .education-item.txt-4box.bg-white {
  background-color:#F8F6F0;
  padding:25px 30px;
}

#contents .education-item.txt-4box h4 {
  color:#3A2885;
  padding:0;
  text-align:center;
}

#contents .education-item.txt-4box h4::before {
  display:none;
}

.career-area .about-area {
  background-color:#FFF;
  margin-bottom:40px;
  padding:40px 50px;
}

#contents .career-area .about-area h3 {
  background-color:#FFF0;
  color:#EC6319;
  font-size:22px;
  margin-bottom:20px;
  padding:0;
}

.career-area .table-02 th {
  background-color:#DBDAED;
  border-color:#BFBFBF;
}

.career-area .table-02 tr:first-child th:last-child {
  border-color:#BFBFBF;
}

.career-area .table-02 tr:nth-child(2) th {
  background-color:#CAC9E3;
}

.career-area .table-02 tr:nth-child(3) th {
  background-color:#8B89BF;
  color:#FFF;
}

.career-area .table-02 tr:nth-child(4) th {
  background-color:#5652A6;
  color:#FFF;
}

#numbers .data-box.w-100 {
  width:100%;
}

/* training */


/* numbers */
#contents .aid-txt {
  color:#595959;
  font-size:15px;
  margin-bottom:0;
  margin-top:20px;
}

#numbers #contents .data-box .counter {
  color:#EC6319;
  font-size:30px;
  text-align:center;
}

#numbers .data-box {
  background-color:#F7F7F7;
  margin-bottom:30px;
  padding:30px 20px;
  width:calc(100% / 3 - 20px);
}

#numbers .data-box .data-area {
  align-items:center;
  padding:16px 0 30px;
}

#numbers #contents h2.bg-ttl {
  line-height:1.2;
}

#numbers #contents .data-box h4.ttl {
  background-color:#FFF0;
  color:#3A2885;
  font-weight:bold;
  margin-bottom:0;
  padding:0 0 30px;
  text-align:center;
}

#numbers #contents .data-box h4.ttl .min {
  font-size:16px;
}

#numbers #contents .data-box h4.ttl::before {
  display:none;
}

#numbers #contents .data-box .main-txt {
  font-size:18px;
  font-weight:bold;
  margin-bottom:0;
  margin-top:5px;
  text-align:center;
}


#numbers #contents .data-box .main-txt .year {
  font-size:16px;
  font-weight:500;
}

#numbers .data-content {
  margin:auto;
  max-width:1370px;
  width:95%;
}

#contents .data-list .num-p {
  color:#EC6319;
  font-size:160%;
  font-weight:500;
  text-align:center;
}

#contents .data-list .num-p .min {
  font-size:15px;
}

#numbers #contents .data-box .counter .number {
  font-family:"Roboto", sans-serif;
  font-size:260%;
  letter-spacing:.05em;
  padding:0 3px;
}

#contents .num-ttl {
  background-color:#DFDFDF;
  color:#FFF;
  margin:0 auto 30px auto;
  max-width:120px;
  padding:3px;
  text-align:center;
  width:100%;
}

#contents .num-ttl.pink {
  background-color:#ED6969;
}

#contents .num-ttl.blue {
  background-color:#3D81E2;
}


#contents .data-list.flex {
  align-items:stretch;
}

#contents .data-contents h3 {
  align-items:center;
  background-color:#FFF0;
  color:#3A2885;
  display:flex;
  flex-direction:row;
  font-size:150%;
  font-weight:600;
  padding:0;
}

#contents .data-contents h3 .data-txt {
  color:#3A288552;
  font-size:230%;
  font-weight:bold;
  line-height:.9em;
  margin-right:20px;
}

#numbers #contents .data-box .data-area .contrast {
  background-color:#5A8CEA;
  border-radius:5px;
  color:#FFF;
  margin:0 auto 35px;
  max-width:120px;
  text-align:center;
  width:100%;
}

#numbers #contents .data-box .txt-2box.end .data-area .contrast {
  background-color:#E45757;
}

/*円グラフ*/
.chart-area {
  height:auto;
  margin:auto;
  position:relative;
  width:100%;
}

.chart-area canvas {
  min-height:355px;
  pointer-events:none;
  width:100% !important;
}

#numbers .data-box .info {
  left:0;
  max-width:max-content;
  position:absolute;
  right:0;
  text-align:center;
  z-index:2;
}

#numbers #contents .data-box .info .ttl {
  color:#FFF;
  font-size:25px;
  font-weight:600;
}

#numbers #contents .data-box .info .num-p {
  color:#FFF;
  font-size:120%;
}

#numbers #contents .data-box .chart-area.studies .info.studies03 .ttl {
  bottom:0;
  color:#42B3C6;
  font-size:15px;
  height:10px;
  left:-60px;
  position:absolute;
  right:0;
  top:-30px;
  width:110px;
}

#numbers #contents .data-box .chart-area.studies .info.studies03 .num-p {
  color:#FFF;
  font-size:100%;
  left:0;
  margin-bottom:0;
  margin-top:10px;
  position:absolute;
  right:10%;
  top:14px;
}

#numbers #contents .data-box .info.studies03 .num-p {
  font-size:90%;
  margin-bottom:0;
  margin-top:10px;
}

.chartjs-render-monitor {
  animation:none !important;
}

/**/
#numbers .data-box .age-ratio .info.studies01 {
  color:#3D81E2;
  display:flex;
  left:48%;
  top:-30px;
}

#numbers #contents .data-box .age-ratio .info.studies01 .num-p {
  color:#3D81E2;
  font-size:12px;
}

#numbers #contents .data-box .age-ratio .info.studies01 .ttl {
  color:#3D81E2;
  font-size:18px;
}

#numbers .data-box .age-ratio .info.studies02 {
  left:60%;
  top:32%;
}

#numbers .data-box .age-ratio .info.studies03 {
  left:47%;
  right:0;
  top:70%;
}

#numbers .data-box .age-ratio .info.studies04 {
  left:28%;
  top:58%;
}

#numbers .data-box .age-ratio .info.studies05 {
  left:25%;
  top:25%;
}

#numbers .data-box .age-ratio .info.studies06 {
  left:37%;
  top:5%;
}

#numbers #contents .data-box .age-ratio .info.studies06 .num-p {
  font-size:14px;
  margin-left:20px;
}

#numbers #contents .data-box .age-ratio .info.studies06 .ttl {
  font-size:15px;
  margin-bottom:5px;
}

#numbers #contents .data-box .age-ratio .info.studies05 .ttl {
  font-size:20px;
  margin-bottom:8px;
}

#numbers #contents .data-box .age-ratio .info.studies05 .num-p {
  font-size:90%;
}



.chart-area.overtime {
  margin-top:80px;
}

#numbers .data-box .overtime .info.studies01 {
  left:55%;
  top:50%;
}

#numbers .data-box .overtime .info.studies02 {
  left:21%;
  top:30%;
}

#numbers #contents .data-box .overtime .info.studies02 .ttl {
  font-size:16px;
  line-height:1.3;
}

#numbers #contents .data-box .overtime .info.studies02 .num-p {
  font-size:100%;
}

#numbers #contents .data-box .overtime .info.studies03 .ttl,
#numbers #contents .data-box .overtime .info.studies04 .ttl {
  color:#42B3C6;
  font-size:18px;
  margin-bottom:0;
  padding-right:6px;
}

#numbers #contents .data-box .overtime .info.studies03 .num-p,
#numbers #contents .data-box .overtime .info.studies04 .num-p {
  color:#42B3C6;
  font-size:12px;
  margin-bottom:0;
}

#numbers #contents .data-box .overtime .info.studies03,
#numbers #contents .data-box .overtime .info.studies04 {
  display:flex;
  justify-content:center;
}

#numbers #contents .data-box .overtime .info.studies04 {
  left:47%;
  top:-10%;
}

#numbers #contents .data-box .overtime .info.studies03 {
  align-items:center;
  left:16%;
  top:-12%;
}

#numbers #contents .data-box .age-ratio .info.studies04 .ttl {
  font-size:20px;
  margin-bottom:8px;
}

#numbers #contents .data-box .age-ratio .info.studies04 .num-p {
  font-size:90%;
  margin-bottom:0;
}

#numbers #contents .data-box .age-ratio .info.studies02 .ttl {
  font-size:22px;
  margin-bottom:10px;
}

#numbers #contents .data-box .age-ratio .info.studies02 .num-p {
  font-size:100%;
}

#numbers #contents .data-box:nth-child(5) .main-txt {
  margin-bottom:20px;
}

/**/
.animation {
  opacity:0;
  position:relative;
  top:50px;
  transition:.6s;
}

.animation.active {
  opacity:1;
  top:0;
  transition:.6s;
}

/**/

#numbers .about-area {
  background-color:#F8F6F0;
  margin:0 auto 50px;
  max-width:800px;
  padding:30px 15px 20px;
  position:relative;
  width:100%;
}

#numbers .about-area:before {
  background:url(../image/contents/bg_pattern.png) repeat;
  content:"";
  display:block;
  height:100%;
  left:15px;
  position:absolute;
  top:15px;
  width:100%;
  z-index:-1;
}

#numbers .data-box .hobby-content ul {
  align-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  list-style:none;
  padding:0;
}

#numbers .data-box .hobby-content ul li {
  background-color:#F8F6F0;
  color:#FF7E00;
  font-size:24px;
  font-weight:600;
  list-style:none;
  margin-bottom:10px;
  margin-right:10px;
  padding:15px 34px;
}

#numbers .data-box .hobby-content ul li:last-child {
  background:no-repeat;
  color:#333;
  display:contents;
  font-size:100%;
}

#numbers .data-box .hobby-content ul p {
  height:30px;
  margin-bottom:10px;
  margin-top:auto;
}

#numbers #contents .data-box .hobby-content .rank-ttl {
  color:#333;
  font-size:150%;
  font-weight:600;
  margin-bottom:15px;
}

#numbers #contents .data-box .hobby-content .rank-ttl .hobby-name {
  color:#FF7E00;
  font-weight:bold;
  padding-left:15px;
  position:absolute;
}

#numbers #contents .data-box .hobby-content .rank-ttl:last-child {
  margin-bottom:0;
}

#numbers #contents .data-box .hobby-content .rank-ttl:first-child {
  margin-bottom:25px;
}

#numbers #contents .data-box .hobby-content .rank-ttl:first-child .hobby-name {
  font-size:33px;
}

#numbers .data-box:nth-child(5) .data-area .certification-area {
  align-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

#contents .certification-name {
  align-items:center;
  background-color:#FFF;
  color:#333;
  display:flex;
  flex-wrap:nowrap;
  font-size:18px;
  font-weight:500;
  justify-content:space-between;
  margin-bottom:15px;
  padding:16px 20px;
  position:relative;
  width:calc(100% / 2 - 10px);
}

#contents .certification-name .num-p {
  font-size:120%;
  margin-top:10px;
  position:absolute;
  right:21px;
}

#numbers #contents .data-box .certification-name .counter {
  font-size:120%;
  margin-top:10px;
  right:21px;
}

#contents .certification-name .item {
  bottom:-15px;
  position:absolute;
  right:15px;
}

#contents .good-content .good-place {
  background-color:#F8F6F0;
  font-size:20px;
  font-weight:600;
  margin-bottom:30px;
  margin-right:10px;
  padding:20px 10px;
  position:relative;
  text-align:center;
  width:calc(100% / 4 - 20px);
}

#contents .good-content .good-place:nth-child(3) .important {
  font-size:20px;
}

#contents .good-content .good-place:nth-child(7) {
  font-size:16px;
}

#contents .good-content .good-place:before {
  border:25px solid transparent;
  border-left:25px solid #F8F6F0;
  bottom:-38px;
  box-sizing:border-box;
  content:"";
  height:30px;
  left:0;
  margin:auto;
  position:absolute;
  right:0;
  transform:rotate(90deg);
  width:30px;
}

#contents .good-content .good-place .important {
  color:#FF7E00;
  font-size:24px;
}

#contents .good-content.flex {
  justify-content:space-evenly;
  margin-top:20px;
}

#numbers #contents .data-box .age-ratio .info.studies03 .ttl {
  font-size:20px;
  margin-bottom:0px;
}

/*線グラフ*/
.chart-area .figure {
  align-content:flex-end;
  align-items:flex-end;
  display:flex;
  flex-wrap:wrap;
  font-size:1.25rem;
  height:calc(250px + .5em);
  margin:0 15px;
  position:relative;
  text-align:center;
  width:100px;
}

.chart-area .figure.sell {
  height:calc(135px + .5em);
}

.chart-area .figure.sell:nth-child(2) {
  height:calc(57px + 1.5em);
}

.chart-area .figure.sell:first-child {
  height:calc(280px + 1.5em);
}

#contents .chart-area .figure p {
  font-weight:500;
  height:1.8em;
  line-height:1;
  margin:0 auto;
  margin-bottom:0;
  text-align:center;
}

#contents .chart-area .figure p .min {
  font-size:20px;
}

.chart-area .figure:first-child::after {
  background-color:#22B8DD;
}

.chart-area.continuous {
  align-items:flex-end;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding-bottom:40px;
}

.chart-area .figure figcaption {
  bottom:0;
  bottom:-10px;
  font-weight:700;
  left:calc(35% - 1.7em);
  position:absolute;
  width:100%;
  z-index:2;
}


#contents .chart-area .figure .num-txt {
  font-size:130%;
  padding:0;
}

#contents .chart-area .figure .year {
  font-size:17px;
  font-weight:bold;
  position:absolute;
  width:100px;
}

#numbers .data-box.show {
  opacity:1;
  position:relative;
  transform:translateY(0);
  transition:.5s ease;
}

.chart-area .figure:after {
  animation:company07 1.5s ease forwards;
  background-color:#9CDBDB;
  content:"";
  display:block;
  margin:0 auto;
  width:90px;
}

#numbers .data-contents.third .data-list .data-box:nth-child(4) img {
  width:300px;
}

#numbers #contents .data-box .img-box p.txt-center {
  margin-bottom:0;
}

#numbers #contents .data-contents.third .data-list .data-box {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#training .table-over.pc-none .table-02 {
  min-width:820px;
}

.table-over.sp-none .table-02 {
  min-width:1200px;
}

p.open-910,
p.open-1330 {
  display:none;
}




@keyframes company07 {
  0% {
    height:0;
  }

  100% {
    height:calc(100% - 40%);
  }
}



@media screen and (max-width: 1330px) {
  p.open-1330 {
    display:block;
  }
}

/* view-1140 notePC,Tablet */
@media screen and (max-width: 1140px) {
  /* 数字で見る */
  #numbers .data-box {
    margin-bottom:20px;
    width:calc(100% / 2 - 10px);
  }

  /* 研修制度 */
  #training #contents .img-2box-txt.txt-area h3 {
    font-size:120%;
  }

  #training #contents .education-item.txt-4box h4 {
    font-size:20px;
  }

  #training .img-2box-txt.txt-area p br {
    display:none;
  }

  #contents .education-item.txt-4box.bg-white {
    padding:25px 15px;
  }

  /* 福利厚生 */
  #welfare #contents .welfare-item.txt-4box {
    margin-bottom:15px;
    margin-right:15px;
    width:calc(100% / 3 - 10px);
  }

  #welfare .flex {
    justify-content:start;
  }

  #welfare #contents .welfare-item.txt-4box:nth-child(3n) {
    margin-right:0;
  }

  #welfare #contents .welfare-item p br {
    display:none;
  }

  #welfare #contents .welfare-item.txt-2box.end .txt-box .txt-2box p br {
    display:block;
  }
}

/* view-959 Mobile,Tablet */
@media screen and (max-width: 959px) {
  /* 数字で見る */
  #numbers .data-box .txt-2box {
    width:calc(100% / 2 - 10px);
  }

  #numbers #contents .data-box .counter .number {
    font-size:230%;
  }

  #contents .data-contents h3 {
    font-size:130%;
  }

  /* 研修制度 */
  #training #contents .img-2box-txt.txt-area h3 br {
    display:none;
  }

  #training #contents .img-2box-txt.txt-area h3 {
    margin-top:20px;
  }

  #contents .education-item.txt-4box.bg-white {
    margin-bottom:15px;
  }

  .career-area .table-02 tr:first-child th:nth-child(2) {
    background-color:#CAC9E3;
  }

  .career-area .table-02 tr:nth-child(2) th {
    background-color:#DBDAED;
  }

  .career-area .table-02 tr:first-child th:nth-child(3) {
    background-color:#8B89BF;
    color:#FFF;
  }

  .career-area .table-02 tr:nth-child(3) th {
    background-color:#DBDAED;
    color:#333;
  }

  .career-area .table-02 tr:first-child th:nth-child(4) {
    background-color:#5652A6;
    color:#FFF;
  }

  .career-area .table-02 tr:nth-child(4) th {
    background-color:#DBDAED;
    color:#333;
  }

  #training .career-area .table-02 th:first-child {
    white-space:normal;
    width:15%;
  }

  #training .career-area .table-02 th:first-child {
    border-collapse:separate;
    left:0;
    padding:5px;
    position:sticky;
    vertical-align:middle;
    z-index:1;
  }

  #training .career-area .about-area {
    padding:30px 25px 25px;
  }

  /*  */
  p.open-1330 {
    display:none;
  }

  /* 福利厚生 */
  #contents .welfare-item h3 {
    font-size:20px;
  }

  #contents .welfare-item.txt-2box.end .txt-box .txt-2box {
    margin-bottom:15px;
  }

  #contents .welfare-item.txt-2box.end .txt-box .txt-2box.end {
    margin-bottom:0;
  }

  #contents .welfare-item.txt-2box {
    margin-bottom:15px;
    margin-right:15px;
    width:calc(100% / 2 - 10px);
  }
}

@media screen and (max-width: 910px) {
  p.open-910 {
    display:block;
  }
}

@media screen and (max-width: 834px) {
  #contents .certification-name {
    width:100%;
  }
}

@media screen and (max-width: 767px) {
  #numbers .data-box .txt-2box {
    width:calc(100% / 2 - 5px);
  }

  #numbers #contents .data-box h4.ttl {
    padding-bottom:15px;
  }

  #numbers #contents .data-box .counter .number {
    font-size:200%;
  }

  /* 福利厚生 */
  #contents .welfare-item img {
    height:80px;
    width:80px;
  }

  #welfare #contents .welfare-item.txt-4box {
    width:calc(100% / 2 - 10px);
  }

  #welfare #contents .welfare-item.txt-4box:nth-child(2n) {
    margin-right:0;
  }

  #welfare #contents .welfare-item.txt-4box:nth-child(3) {
    margin-right:15px;
  }

  #contents .welfare-item:nth-child(10) h3 {
    font-size:18px;
  }

  #contents .welfare-item {
    padding:25px 15px 15px;
  }
}

@media screen and (max-width: 640px) {
  /* 数字で見る */
  #numbers .data-box {
    padding:30px 15px;
    width:100%;
  }

  #numbers .about-area p {
    text-align:left;
  }

  #numbers .about-area {
    padding:20px 15px 10px;
  }

  /* 研修制度 */

  #training #contents .img-2box-txt.txt-area h3 br {
    display:block;
  }

  /* 福利厚生 */
  #welfare #contents .welfare-item.txt-4box,
  #welfare #contents .welfare-item.txt-2box {
    margin-right:0;
    width:100%;
  }

  #welfare #contents .welfare-item.txt-4box:nth-child(3) {
    margin-right:0;
  }
}

/* view-559 Mobile */
@media screen and (max-width: 559px) {
  /* 福利厚生 */
  #contents .welfare-item {
    width:100%;
  }

  #contents .welfare-item.txt-2box {
    margin-right:0;
    width:100%;
  }

  #contents .welfare-item.txt-2box.end .txt-box .txt-2box {
    margin-bottom:10px;
  }

  #contents .welfare-item.txt-2box.end .txt-box .txt-2box.end {
    margin-bottom:0;
  }

  /* 数字で見る */
  #contents .data-contents h3 {
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    line-height:1.7em;
  }

  #contents .data-contents h3 .data-txt {
    font-size:200%;
    margin-bottom:5px;
  }

  #numbers #contents .data-box .counter .number {
    font-size:180%;
  }

  /* 研修制度 */
  #training .career-area .about-area {
    padding:25px 15px 15px;
  }

  #contents .career-area .about-area h3 {
    font-size:18px;
    margin-bottom:10px;
  }

  #contents .career-area p.txt-center.mb-40 {
    text-align:left;
  }

  #contents .career-area p.txt-center.mb-40 br {
    display:none;
  }
}



@media screen and (max-width: 430px) {
  #numbers .about-area p br {
    display:none;
  }
}

@media screen and (max-width: 414px) {
  #welfare #contents .sub-txt {
    text-align:left;
  }

  #welfare #contents .sub-txt br {
    display:none;
  }
}
