@charset "utf-8";
/* ==========================================================================
   top
   ========================================================================== */
/*-----------------
top
navigation
-----------------*/
#top .top_navigation {
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}
#top .top_navigation a {
  display: block;
}
/*--- nav ---*/
#top .top_navigation .nav_wrap {
  display: flex;
  justify-content: space-between;
}
#top .top_navigation .nav_box.last {
  margin-right: 0;
}
#top .top_navigation .nav {
  position: relative;
  width: clac(100/4);
  filter: grayscale(100%);
  transition : all 1s;
}
#top .top_navigation .nav_box {
  margin-right: 6px;
}
#top .top_navigation .nav::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: calc(27/360*100%);
  aspect-ratio: 27 / 9;
  background: url("../img/nav_arrow.png") no-repeat;
  background-size: contain;
  margin: 0 auto;
  bottom: 6%;
  left: 0;
  right: 0;
  z-index: 2;
}
#top .top_navigation .nav p {
  position: absolute;
  left: 5%;
  bottom: 18%;
  color: #fff;
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.1341))), 18px);
  min-height: 0vw;
  line-height: 1.4;
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
}
#top .top_navigation .nav.active {
  filter: grayscale(0);
}
@media screen and (max-width: 768px) {
  #top .top_navigation .nav_wrap {
    display: block;
  }
  #top .top_navigation .nav_box {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-top: calc(8/710*100%);
  }
  #top .top_navigation .nav:first-of-type {
    margin-top: 0;
  }
  #top .top_navigation .nav::after {
    width: calc(45/710*100%);
    aspect-ratio: 27 / 9;
    bottom: 8%;
  }
  #top .top_navigation .nav p {
    top: 50%;
    bottom: auto;
    left: 5%;
    transform: translateY(-50%);
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.8718))), 30px);
  }
}
/*--- menu ---*/
#top .top_navigation .menu {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  top: 200px;
  padding: calc(60/1460*100%) calc(180/1500*100%) 0;
  background: #000;
  z-index: 2;
}
#top .top_navigation .menu > p,
#top .top_navigation .menu a {
  color: #fff;
}
#top .top_navigation .menu > a p {
  transition : all .5s;
}
#top .top_navigation .menu > a p:hover {
  opacity: .7;
}
#top .top_navigation .menu p {
  position: relative;
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.5344))), 24px);
  min-height: 0vw;
  padding-right: 1.5em;
  border-bottom: 1px solid #fff;
  margin-bottom: 2%;
  padding-bottom: 2%;
  display: inline-block;
}
#top .top_navigation .menu p::after {
  content: '';
  width: .6em;
  height: .6em;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  position: absolute;
  top: 15%;
  right: 0;
  transform: rotate(45deg);
}
#top .top_navigation .menu ul {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: calc(50/1460*100%);
}
#top .top_navigation .menu ul li {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.0281))), 16px);
  min-height: 0vw;
  margin-right: calc(15/1460*100%);
  padding-bottom: calc(20/1460*100%);
}
#top .top_navigation .menu ul li a {
  position: relative;
  border: 1px solid #fff;
  padding: .7em 2.5em .9em 1.2em;
  transition : all .5s;
}
#top .top_navigation .menu ul li a::after {
  content: '';
  width: .5em;
  height: .5em;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  position: absolute;
  top: 40%;
  right: 1.3em;
  transform: rotate(45deg);
  transition : all .5s;
}
#top .top_navigation .menu ul li a.arrow_none {
  padding: .7em 1.2em .9em 1.2em;
}
#top .top_navigation .menu ul li a.arrow_none::after {
  content: none;
  border: none;
}

@media screen and (max-width: 1518px) {
  #top .top_navigation .menu {
  top: calc(190/1460*100vw);
  }
}
@media screen and (max-width: 1200px) {
  #top .top_navigation .menu {
  top: calc(185/1460*100vw);
  }
}
@media screen and (min-width: 769px) {  
  #top .top_navigation .menu ul li a:hover {
    background: #fff;
    color: #000;
  }
  #top .top_navigation .menu ul li a:hover::after {
    border-top: solid 1px #000;
    border-right: solid 1px #000;
  }
  #top .top_navigation .menu ul li a .exit::after {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
  }
  #top .top_navigation .menu ul li a:hover .exit::after {
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
}
@media screen and (max-width: 970px) {
  #top .top_navigation .menu {
    top: calc(183/1460*100vw);
  }
}
@media screen and (max-width: 768px) {  
  #top .top_navigation .menu {
    position: relative;
    top : auto;
    padding: calc(40/710*100%) calc(30/710*100%);
    border-top: solid 1px #ececec;
  }
  #top .top_navigation .menu p {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.6048))), 28px);
    line-height: 1.3;
    padding: 0 5% 4% 0;
    margin-bottom: 5%;
  }
  #top .top_navigation .menu ul {
    padding-bottom: 0;
  }
  #top .top_navigation .menu ul li {
    width: 100%;
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.0708))), 24px);
    padding-bottom: calc(20/710*100%);
    text-align: center;
  }
  #top .top_navigation .menu ul li:last-of-type {
    padding-bottom: 0;
  }
  #top .top_navigation .menu ul li a {
    background: #ddd;
    color: #000;
    border: none;
  }
  #top .top_navigation .menu ul li a::after {
    border-top: solid 1px #000;
    border-right: solid 1px #000;
  }
}
/*-----------------
top
report-release
-----------------*/
#top #report-release .inner {
  max-width: calc(1200/1460*100%);
  margin: 0 auto;
}
#top #report-release h2 {
  color: #000;
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 2.2015))), 34px);
  font-weight: 500;
  min-height: 0vw;
  margin-bottom: 1em;
  text-align: center;
}
#top #report-release > .inner h2 + div > p {
  width: 60%;
  margin: 0 auto 4%;
}
#top #report-release .flex {
  display: flex;
  justify-content: space-between;
}
#top #report-release .flex .report_wrap {
  width: 46.5%;
  margin-top: 3%;
}
#top #report-release .report .img {
  width: 32.408%;
  margin-top: .5em;
}
#top #report-release .report p.report_ttl {
  width: 62%;
  padding-bottom: 1.2em;
}
#top #report-release .report p.txt {
  width: 62%;
}
@media screen and (max-width: 768px) {
  #top #report-release .inner {
    max-width: calc(600/710*100%);
    margin: 0 auto;
  }
  #top #report-release h2 {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 6.008))), 46px);
  }
  #top #report-release > .inner h2 + div > p {
    width: 90%;
    margin: 0 auto 10%;
  }
  #top #report-release .flex {
    display: block;
  }
  #top #report-release .flex .report_wrap {
    width: 100%;
  }
  #top #report-release .report_wrap + .report_wrap {
    margin-top: 15%;
  }
  #top #report-release .report_wrap:first-of-type {
    margin-top: 0;
  }
  #top #report-release .report .img {
    width: 100%;
    max-width: calc(344/710*100%);
    margin: 0 auto 1em;
  }
  #top #report-release .report p.report_ttl {
    width: 100%;
    padding-bottom: 1em;
  }
  #top #report-release .report p.txt {
    float: none;
    width: 100%;
  }
}
/* ==========================================================================
   hr_development 人材育成の考え方
   ========================================================================== */
/*-----------------
hr_development
container
-----------------*/
/*--- other ---*/
#hr_development #section03 h2 {
  margin-bottom: .7em;
}
@media screen and (max-width: 768px) {
  #hr_development #section03 h2 {
    margin-bottom: 2%;
  }
}
/*--- img ---*/
#hr_development .img01 {
  max-width: calc(800/1000*100%);
  margin: 0 auto;
}
#hr_development .img02,
#hr_development .img04 {
  max-width: calc(800/1460*100%);
  margin: 0 auto;
}
#hr_development .img05 {
  max-width: calc(1000/1460*100%);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #hr_development .img01 {
    max-width: 100%;
  }
  #hr_development .img02 {
    max-width: calc(600/710*100%);
    margin: 0 auto;
  }
  #hr_development .img04 {
    max-width: calc(560/710*100%);
    margin: 0 auto;
  }
  #hr_development .img05 {
    max-width: calc(560/710*100%);
    height: calc(300/1334*100vh);
  }
  #hr_development .img05 img {
    height: inherit;
    object-fit: cover;
  }
}
/*--- h3.serif ---*/
#hr_development .container h3.serif {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.6678))), 26px);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  letter-spacing: 0;
}
#hr_development .container h3.serif span {
  font-size: 73%;
}
@media screen and (max-width: 768px) {
  #hr_development .container h3.serif {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.8718))), 30px);
  }
}
/*--- blue_box ---*/
#hr_development .blue_box_wrap {
  display: flex;
  justify-content: space-between;
  max-width: calc(800/1000*100%);
  margin: 2.5em auto 0;
}
#hr_development .blue_box {
  background: #e8edf2;
  width: calc(98% / 2);
  padding: 5% 0;
}
#hr_development .blue_box h3 {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.5764))), 24px);
  letter-spacing: 0;
}
@media screen and (max-width: 768px) {
  #hr_development .blue_box_wrap {
    display: block;
    max-width: 100%;
    margin: 7% auto 0;
  }
  #hr_development .blue_box {
    background: #e8edf2;
    width: 100%;
    padding: 5% 0 7%;
  }
  #hr_development .blue_box h3 {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.8082))), 28px);
  }
  #hr_development .blue_box + .blue_box {
    margin-top: 3%;
  }
  #hr_development .blue_box .more_btn {
    margin-top: 4%;
  }
}

/* ==========================================================================
   hr_valuechain HRバリューチェーン
   ========================================================================== */
/*-----------------
hr_valuechain
container
-----------------*/
/*--- contents ---*/
#hr_valuechain .contents {
  padding: calc(70/1460*100%) 0 calc(90/1460*100%);
}
#hr_valuechain .contents.only_entry {
  padding: calc(70/1460*100%) 0;
}

@media screen and (max-width: 768px) {
  #hr_valuechain .contents {
    padding: calc(80/750*100%) 0 calc(100/750*100%);
  }
  #hr_valuechain .contents.only_entry {
    padding: calc(70/750*100%) 0;
  }
}
/*--- h2.serif ---*/
#hr_valuechain .container h2.serif {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 2.9029))), 30px);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  letter-spacing: 0;
}
#hr_valuechain .container h2.serif span {
  font-size: 73%;
}
@media screen and (max-width: 768px) {
  #hr_valuechain .container h2.serif {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 4.9365))), 36px);
  }
}
/*--- h2.tree ---*/
#hr_valuechain .container h2.tree {
  font-size:  min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.0158))), 45px);
  text-align: left;
  position: relative;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 0;
}
#hr_valuechain .container h2.tree:before {
  content: "";
  display: block;
  position: absolute;
  top: 1.4em;
  bottom: 0;
  left: .3em;
  width: 0;
  border-left: 1px solid #0053a8;
}
#hr_valuechain .container h2.tree span {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.3em;
  font-size: 45%;
  font-weight: 400;
  letter-spacing: 0;
}
#hr_valuechain .container h2.tree span:before {
  content: "";
  display: block;
  position: absolute;
  top: .8em;
  left: .65em;
  width: 1em;
  height: 1.5em;
  border-top: 1px solid #0053a8;
  bottom: 0;
  background-color: #fff;
}
#hr_valuechain .container h2.tree + .gray_box {
  margin-top: 2.5%;
}
@media screen and (max-width: 768px) {
  #hr_valuechain .container h2.tree {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 7.6164))), 55px);
  }
}

/* ==========================================================================
   system 制度一覧
   ========================================================================== */
/*-----------------
system 
container
-----------------*/
/*--- catch ---*/
#system p.catch {
  max-width: calc(800/1460*100%);
  text-align: left;
  padding-bottom: 2%;
}
@media screen and (max-width: 768px) {
  #system p.catch {
    max-width: calc(600/710*100%);
    text-align: left;
    padding-bottom: 2%;
  }
}
/*--- h2 ---*/
#system .gray_box h2 {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 2.5025))), 26px);
  font-weight: 500;
  letter-spacing: 0;
  border-bottom: 4px solid #000;
  padding-bottom: 4%;
  margin-bottom: 5%;
}
#system .gray_box h2 span {
  font-size: 70%;
  color: #fff;
  background: #000;
  display: inline-block;
  margin-bottom: 1.8%;
  padding: .1em .7em .3em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #system .gray_box h2 {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 4.0903))), 30px);
    margin-bottom: 8%;
    padding-bottom: 7%;
    border-bottom: 3px solid #000;
  }
}
/*--- child ---*/
#system .child .icon {
  float: left;
  width: 13.75%;
}
#system .child h3 {
  float: right;
  text-align: left;
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 2.1021))), 22px);
  font-family: 'Noto Serif JP', serif;
  font-weight: 200;
  letter-spacing: 0;
  width: 81.25%;
  margin-bottom: .3em;
}
#system .gray_box .child h3:before  {
  background: none;
  content: none;
}
#system .child p {
  float: right;
  width: 81.25%;
  padding-top: 0;
}
#system .child + .child {
  margin-top: 4%;
}
#system .child + h2 {
  margin-top: 7%;
}
@media screen and (max-width: 768px) {
  #system .child .icon {
    float: left;
    width: 21.56%;
  }
  #system .child h3 {
    float: right;
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 3.8082))), 28px);
    width: 73%;
    margin-top: 6%;
    margin-bottom: .3em;
  }
  #system .child p {
    float: none;
    width: 100%;
    padding-top: 5%;
  }
  #system .child + .child {
    margin-top: 8%;
  }
  #system .child + h2 {
    margin-top: 12%;
  }
}

/* ==========================================================================
   technology 制度一覧
   ========================================================================== */
/*-----------------
technology 
container
-----------------*/
/*--- h3 ---*/
#technology h3 .small90 {
  letter-spacing: 0;
  color: #333;
}
/*--- catch ---*/
#technology .catch {
  max-width: calc(800/1460*100%);
  text-align: center;
  padding-bottom: 4%;
}
@media screen and (max-width: 768px) {
  #technology .catch {
    max-width: calc(600/710*100%);
    text-align: left;
    padding-bottom: 2%;
  }
}
/*--- img ---*/
#technology .img01 {
  max-width: calc(583/1460*100%);
  margin: 0 auto;
}
#technology .img04 {
  margin-top: 5%;
}
@media screen and (max-width: 768px) {
  #technology .img01 {
    max-width: calc(583/710*100%);
    margin: 5% auto 0;
  }
  #technology .img04 {
    margin-top: 10%;
  }
}


/* ==========================================================================
   information 募集要項
   ========================================================================== */
#information .small80 {
  display: inline-block;
  line-height: 1.5;
  padding-top: .5em;
}
#information .info_more {
  margin: 5% 0 10%;
  padding: 5% 10%;
  text-align: center;
}
#information .info_more p {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.9019))), 20px);
  font-weight: 500;
}
#information .info_more p:nth-of-type(2) {
  font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 1.5015))), 16px);
  padding-top: 0;
  font-weight: 300;
}
#information .info_more p.notes {
  font-size: 100%;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  #information .info_more p {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 4.1051))), 26px);
    font-weight: 500;
  }
  #information .info_more p:nth-of-type(2) {
    font-size: min(max(12px, calc(0.75rem + ((1vw - 3.2px) * 0.5128))), 14px);
    padding-top: 0;
    font-weight: 300;
    line-height: 1.3;
  }
  #information .info_more p.notes {
    font-size: min(max(1px, calc(0.0625rem + ((1vw - 0.01px) * 2.4631))), 16px);
  }
}

/* ==========================================================================
   recruiting 当社の採用活動
   ========================================================================== */
/*--- img ---*/
#recruiting .more_btn + h3 {
  margin-top: 3em;
}
#recruiting .img01 {
  margin-top: 6%;
}
#recruiting .img02,
#recruiting .gray_box .img_flex.point04,
#recruiting ul.inline_list {
  margin-top: 4%;
}
#recruiting .img01 + .more_btn,
#recruiting .img02 + .more_btn,
#recruiting .gray_box .img_flex.point04 + .more_btn {
  margin-top: 5.5%;
}
#recruiting .gray_box + p.h2_sub {
  margin-top: 7%;
}
#recruiting .img05 {
  position: relative;
  max-width: 100%;
  margin: 2em auto 2%;
}
#recruiting .img05 a {
  position: absolute;
  max-width: calc(102/800*100%);
}
#recruiting .img05 a.links_2016 {
  top: 36.4%;
  left: 55.5%;
}
#recruiting .img05 a.links_2018 {
  top: 62.4%;
  left: 70.5%;
}
#recruiting .img05 a.links_2020 {
  top: 75.25%;
  left: 53.5%;
}
#recruiting .img06 {
  max-width: calc(800/1000*100%);
  margin: 0 auto;
}
#recruiting .img06 + .h2_sub02 {
  margin-top: 5%;
}
#recruiting div.flex_center {
  width: 90%;
  margin: 0 auto;
}
#recruiting ul.inline_list li {
  text-indent: -1.2em;
  padding-left: 1.2em;
}


@media screen and (max-width: 768px) {
  #recruiting .img05,
  #recruiting .img06 {
    max-width: 100%;
  }
  #recruiting .img05 a {
    max-width: calc(80/620*100%);
  }  
  #recruiting .gray_box + p.h2_sub {
    margin-top: 10%;
  }
  #recruiting .img01 + .more_btn,
  #recruiting .img02 + .more_btn,
  #recruiting .gray_box .img_flex.point04 + .more_btn {
    margin-top: 7%;
  }
  #recruiting .img02,
  #recruiting .gray_box .img_flex.point04,
  #recruiting .img06 + .h2_sub02,
  #recruiting ul.inline_list {
    margin-top: 6%;
  }

}