@charset "utf-8";

/*--------------------------------------------------*/
/*		https://www.nssol.nipponsteel.com/hokkaido/
/*		/css/common.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index......目次
/*			$reset......リセットcss
/*			$font.......ウェブフォントcss
/*			$layout.....全体のレイアウト
/*			$parts......共通パーツレイアウト
/*			$header.....ヘッダレイアウト
/*			$footer.....フッタレイアウト
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$reset
/*--------------------------------------------------*/
*{box-sizing: border-box; margin:0; padding:0; text-align:left;}
hr{display:none; margin:0; padding:0; border:none; font-size:0; line-height:0;}
a{color:inherit; text-decoration:none;/* -webkit-transition: all 0.4s ease; transition: all 0.4s ease;*/}
/*a.none:hover{cursor: default;}*/
ul,ol{list-style:none;}
address{font-style:normal;}
p{line-height:1.6;}
i{font-style: normal;}
img{max-width:100%; border:none;}
.fleft{float:left;}
.fright{float:right;}
.clear:after,.clear:before{content:""; display:block; overflow:hidden; height:0;}
.clear:after{clear:both;}
.clear{zoom:1;}



/*--------------------------------------------------*/
/*			$font
/*--------------------------------------------------*/
@font-face{
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: url(/hokkaido/fonts/notosans/NotoSansJP-Regular.woff2) format('woff2'),url(/hokkaido/fonts/notosans/NotoSansJP-Regular.woff) format('woff'),url(/hokkaido/fonts/notosans/NotoSansJP-Regular.otf) format('opentype');
font-display: swap;
}
@font-face{
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: url(/hokkaido/fonts/notosans/NotoSansJP-Bold.woff2) format('woff2'),url(/hokkaido/fonts/notosans/NotoSansJP-Bold.woff) format('woff'),url(/hokkaido/fonts/notosans/NotoSansJP-Bold.otf) format('opentype');
font-display: swap;
}



/*--------------------------------------------------*/
/*			$layout
/*--------------------------------------------------*/
html,body{width:100%; height:auto;}
html{font-size:62.5%; font-family:"Noto Sans JP","游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", sans-serif;}
body{position:relative;	background: #fff; color:#333; font-size: 1.0em; font-weight: 400; line-height:1.8;}
.liquid-inner{position:relative; width:93.65%; max-width:1180px; min-width: 750px; margin:0 auto;}
.wide-inner{position: relative; width: 100%; max-width: 1260px; min-width: 750px; margin: 0 auto;}
.solid-inner{position:relative; width: 100%; max-width:960px; min-width: 750px; margin:0 auto;}
.flex{display:-webkit-flex; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#forlayout{position: relative; padding-top: 77px;}
#forlayout.pt-none{padding-top: 0;}
.foranchors{margin-top: -77px; padding-top: 77px;}
.serif{font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: 400; font-style: normal;}
.webfont{font-family:'icomoon'; line-height:1;}
@media screen and (min-width: 768px) {
.tit-aco-body{display: block !important;}
}
@media screen and (max-width: 767px) {
html{font-family:"Noto Sans JP","游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", sans-serif;}
.liquid-inner{width:93.75%; max-width:93.75%; min-width:93.75%;}
.wide-inner{width:93.75%; max-width:93.75%; min-width:93.75%;}
.solid-inner{width:93.75%; max-width: 93.75%; min-width: 93.75%;}
#forlayout{padding-top: 0;}
.foranchors{margin-top: 0; padding-top: 0;}
}

/*keyframe*/
@keyframes btn--arrow {
  0% {
    transform: translateX(0px);
  }
  24% {
    transform: translateX(3em);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  26% {
    transform: translateX(-3em);
    opacity: 1;
  }
  50% {
    transform: translateX(0px);
  }
}


/*--------------------------------------------------*/
/*			$parts
/*--------------------------------------------------*/
#snavi{position: absolute; left: 0; top: 0; width: 100%; height: 77px;}
#snavi.fixed{position: fixed; left: 0; top: 0; z-index: 9999;}
#snavi .snavi01{padding: .8rem 0; background-color: #c0c0c0;}
#snavi .snavi01 ul{list-style: none;}
#snavi .snavi01 li{font-size: 1.3rem;}
#snavi .snavi01 li a{transition: color .4s ease,font-weight .4s ease;}
#snavi .snavi01 li a:hover{color: #00a0c6; font-weight: bold;}
#snavi .snavi01 li:not(:last-child):after{content: "／"; margin: 0 1rem; color: #333;}
.philosophy #snavi .snavi01 li.philosophy{color: #00a0c6; font-weight: bold;}
.company #snavi .snavi01 li.company{color: #00a0c6; font-weight: bold;}
.solution #snavi .snavi01 li.solution{color: #00a0c6; font-weight: bold;}
.solution-bpfio #snavi .snavi01 li.solution{color: #00a0c6; font-weight: bold;}
.partnership #snavi .snavi01 li.partnership{color: #00a0c6; font-weight: bold;}
.sustainability-home #snavi .snavi01 li.sustainability{color: #00a0c6; font-weight: bold;}
.sustainability-social #snavi .snavi01 li.social{color: #00a0c6; font-weight: bold;}
.sustainability-club #snavi .snavi01 li.club{color: #00a0c6; font-weight: bold;}
.recruit-index #snavi .snavi01 li.recruit-index{color: #00a0c6; font-weight: bold;}
.recruit.staff #snavi .snavi01 li.recruit-staff{color: #00a0c6; font-weight: bold;}
.recruit.staff-detail #snavi .snavi01 li.recruit-staff{color: #00a0c6; font-weight: bold;}
#snavi .snavi02{padding: .8rem 0; background-color: #d2d2d2;}
#snavi .snavi02 ul{list-style: none;}
#snavi .snavi02 li{margin-right: 1.5em; font-size: 1.2rem;}
#snavi .snavi02 li a:hover{border-bottom: 2px #00a0c6 solid;}
#snavi .snavi02 li a svg{margin-left: .5em;}
#breadcrumb{padding: .8rem 0; background-color: #eaeaea;}
#breadcrumb li{font-size: 1.1rem;}
#breadcrumb li:not(:last-child):after{content: ">"; margin: 0 .5rem;}
#breadcrumb li a{text-decoration: underline;}
#breadcrumb li a:hover{text-decoration: none;}
#common-visual{margin-bottom: 40px; background: url(/hokkaido/images/common/bg02.png);}
#common-visual .page-title{padding: 1.5em 0; color: #fff; font-size: 3rem; font-weight: 400; line-height: 1; text-align: center;}
#common-visual .page-title.line2{padding: 1.5em 0 .5em;}
#common-visual .page-title span{font-size: 1.5rem; font-weight: 300;}
#common-visual .page-title span:before{content: "-"; margin-right: 1em;}
#common-visual .page-title span:after{content: "-"; margin-left: 1em;}
.border-box{padding: 3rem; border: 3px #eaeaea solid;}
.tit01{width:93.65%; max-width:1180px; min-width: 750px; margin:0 auto 40px; padding: 1.5rem 0; background: url(/hokkaido/images/common/bg03.png); font-size: 3rem; font-weight: 400; line-height: 1; text-align: center;}
.tit02{padding-bottom: 3rem; font-size: 3.2rem; font-weight: 700; line-height: 1.6;}
.tit02 strong{background: linear-gradient(transparent 70%, #d2ef99 70%);}
.tit03{color: #224c93;}
.tit04{padding-bottom: 3em; font-size: 1.8rem; font-weight: 300; line-height: 1.6;}
.tit04 strong{background: linear-gradient(transparent 70%, #d2ef99 70%); font-weight: 300;}
.icon-tit{padding-left: 1.2em; text-indent: -1.2em;}
.icon-tit:before{content: "■"; margin-right: .2em; color: #224c93;}
.btn01{width: 15rem;}
.btn01 a{display: block; padding: 1rem 0; border-width: 1px; border-style: solid; font-size: 1.1rem; font-weight: 700; line-height: 1; text-align: center; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.btn02 {
  overflow: hidden;
}
.btn02 a {
  width: 250px;
  padding: 15px 0;
  color: #254F9C;
  font-size: 1.6rem;
  border: solid 1px #254F9C;
  border-radius: 30px;
  text-align: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.btn02 a.hover.ov .btn02__arrow {
  animation: btn--arrow 2s ease 0s infinite;
}
.btn02 .btn02__ico {
  width: 3em;
  margin-left: 1em;
  overflow: hidden;
}
.btn02 .btn02__arrow {
  text-align: center;
  display: block;
}
.ltor-layout,.rtol-layout{padding-bottom: 80px;}
.ltor-layout figure,.rtol-layout figure{width: 38%;}
.ltor-layout div,.rtol-layout div{width: 60%;}
.ltor-layout figure{float: left;}
.rtol-layout figure{float: right;}
.ltor-layout div{float: right;}
.rtol-layout div{float: left;}
@media screen and (max-width: 767px) {
#snavi{position: static; left: 0; top: 0; width: 100%; height: auto;}
#snavi .snavi01{padding: .8rem 0; background-color: #c0c0c0;}
#snavi .snavi01 li{font-size: 1.3rem;}
#snavi .snavi01 li a{transition: color .4s ease,font-weight .4s ease;}
#snavi .snavi01 li a:hover{color: #00a0c6; font-weight: bold;}
#snavi .snavi01 li:not(:last-child):after{content: "／"; margin: 0 1rem; color: #333;}
#breadcrumb{display: none;}
#common-visual{margin-bottom: 4.6875%;}
#common-visual .page-title{padding: 1em 0; font-size: 1.5rem; line-height: 1.2;}
#common-visual .page-title.line2{padding: 1em 0 .5em;}
#common-visual .page-title span{font-size: 1.2rem;}
.border-box{padding: 1.5rem; border: 2px #eaeaea solid;}
.tit01{width:100%; max-width:100%; min-width: 100%; margin:0 auto 4.6875%; padding: 1em .8em; font-size: 1.5rem; text-align: left;}
.tit02{font-size: 1.8rem;}
.tit04{padding-bottom: 3em; font-size: 1.5rem;}
.tit-aco{position: relative;}
.btn01{width: 10rem;}
.btn01 a{padding: 1rem 0; font-size: .9rem;}
.btn02 a {
  width: 66.66666666666667%;
  padding: 4% 0;
}
.ltor-layout,.rtol-layout{display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; -webkit-flex-direction: column-reverse; flex-direction: column-reverse;}
.ltor-layout figure,.rtol-layout figure{width: 56.25%; margin: 0 auto;}
.ltor-layout figure{float: none; margin: 0 auto;}
.rtol-layout figure{float: none; margin: 0 auto;}
.ltor-layout div{float: none; width: 100%;}
.rtol-layout div{float: none; width: 100%;}
/***** 共通見出しスマートフォン版アコーディオン設定 *****/
/*.tit-aco:after{content: "\f078"; position: absolute; right: 1em; top: 50%; margin-top: -.5em; font-family: 'Font Awesome 5 Pro';}
.tit-aco.on:after{content: "\f077";}
.tit-aco-body{display: none;}
.tit-aco-body.on{display: block;}*/
}



/*--------------------------------------------------*/
/*			$header
/*--------------------------------------------------*/
#header{position: relative; z-index: 9999; width: 100%; height: 123px; /*border-bottom: 1px rgba(51,51,51,.5) solid; */background-color: #fff;/* box-shadow: 0 0 4px 1px rgba(51,51,51,.8);*/}
#header a{display: -webkit-inline-flex; display: inline-flex; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#header .heder-inner{width:100%; max-width:1180px; min-width: 750px; margin:0 auto;}
#header #htop{-webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 10px 0 8px;}
#header #htop .logo{width: 450px; font-size: 0; line-height: 0;}
#header #htop .logo a{-webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center;}
#header #htop .logo .symbol{box-sizing: content-box; width: 60px; padding: 0 10px;}
#header #htop .logo .japanese{box-sizing: content-box; width: 350px;}
#header #htop .group-logo{width: 210px; font-size: 0; line-height: 0;}
#header #btn-menu{display: none;}
#header #gnavi .parents{-webkit-justify-content: space-around; justify-content: space-around;}
#header #gnavi .parents>li{position: relative; width: 12.5%; padding-bottom: 10px;}
#header #gnavi .parents>li>a{display: block; position: relative; width: 100%; padding: .3em 0; border-right: 1px #eaeaea solid; font-size: 1.26rem; line-height: 1; text-align: center;}
#header #gnavi .parents>li:first-child>a{border-left: 1px #eaeaea solid;}
#header #gnavi .parents>li>a:before{content: ""; display: block; position: absolute; top: 2em; left: 50%; width: 38%; height: 2px; margin-left: -19%; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#header #gnavi .parents>li:hover>a:before{background-color: #00a0c6; transform: scaleX(1);}
#header #gnavi .parents>li.privacy,#header #gnavi .parents>li.use{display: none;}
.home #header #gnavi .parents>li.home>a:before,
.philosophy #header #gnavi .parents>li.philosophy>a:before,
.company #header #gnavi .parents>li.company>a:before,
.strength #header #gnavi .parents>li.strength>a:before,
.solution #header #gnavi .parents>li.solution>a:before,
.solution-kogatapos #header #gnavi .parents>li.solution>a:before,
.solution-pdterm #header #gnavi .parents>li.solution>a:before,
.recruit #header #gnavi .parents>li.recruit>a:before,
.partnership #header #gnavi .parents>li.partnership>a:before,
.sustainability #header #gnavi .parents>li.sustainability>a:before,
.contact #header #gnavi .parents>li.contact>a:before{background-color: #00a0c6; transform: scaleX(1);}
/*#header #gnavi .parents>li.campany>a:after,
#header #gnavi .parents>li.solution>a:after,
#header #gnavi .parents>li.recruit>a:after{content: "\f078"; margin-left: 1em; font-size: 1rem; font-family: 'Font Awesome 5 Pro';}
#header #gnavi .parents>li.partnership>a:after{content: "\f078"; margin-left: 1em; font-size: 1rem; font-family: 'Font Awesome 5 Pro';}*/
#header #gnavi .parents>li>ul{display: none; position: absolute; left: 0; top: 100%; width: 100%; padding: 0 10px; background-color: rgba(87,140,187,1);}
#header #gnavi .parents>li>ul>li:not(:last-child){border-bottom: 1px rgba(255,255,255,.3) solid; }
#header #gnavi .parents>li>ul>li>a{display: block; position: relative; padding: .5em 0; color: #fff; font-size: 1.44rem; text-align: center; font-family: 'Font Awesome 5 Pro';}
#header #gnavi .parents>li>ul>li>a:hover{text-decoration: underline;}
/*#header #gnavi .parents>li>ul>li>a[href^="javascript:void(0)"]:after{content: "\f0fe"; position: absolute; right: .5em; font-size: 1.32rem; line-height: 1.7;}
#header #gnavi .parents>li>ul>li>a.on:after{content: "\f146";}*/
#header #gnavi .parents>li>ul>li>a[href^="javascript:void(0)"]:hover{text-decoration: none;}
#header #gnavi .parents>li>ul>li>a.outside:after{content: "\f35d"; position: absolute; right: .5em; font-size: 1.32rem; line-height: 1.7;}
#header #gnavi .parents>li>ul>li ul{display: none; padding-bottom: 10px;}
#header #gnavi .parents>li>ul>li li:not(:last-child){padding-bottom: 1px;}
#header #gnavi .parents>li>ul>li li a{display: block; padding: .5em 0; background-color: #fff; font-size: 1.32rem; line-height: 1; text-align: center;}
#header #gnavi .parents>li>ul>li li a:hover{background-color: #d5e9fb;}
@media screen and (min-width: 768px){
#header #gnavi{display: block !important;}
}
@media screen and (max-width: 767px) {
#header{position: relative; height: 0; padding-top: 27.2%;}
#header.mini{padding-top: 23.2%;}
#header .heder-inner{position: absolute; left: 0; top: 0; width:100%; max-width:100%; min-width: 100%; height: 100%;}
#header #htop{display: block; padding: 3.125% 0;}
#header #htop .logo{width: 75%; margin-left: 4.6875%; padding-top: 5.46875%}
#header #htop .logo a{-webkit-justify-content: flex-start; justify-content: flex-start;}
#header #htop .logo .symbol{box-sizing: border-box; width: 18%; height: auto; margin-right: 5%; padding: 0;}
#header #htop .logo .japanese{box-sizing: border-box; width: 75%; height: auto;}
#header #htop .group-logo{position: absolute; top: 0; left: 50%; width: 38.125%; min-height: 0; margin: 3.125% 0 0 -19%;}
#header.mini #htop .logo{padding-top: 0;}
#header.mini #htop .group-logo{display: none;}
#header #hbottom{position: fixed; width: 15.625%; right: 0; top: 5%; padding-right: 3.125%;}
#header #btn-menu{display: block; position: relative; width: 100%; margin-right: 1rem;  padding: .6em 0; border: 1px #f90 solid; background-color: #f90; color: #fff; font-size: 1.9rem; line-height: 1; text-align: center;}
#header.mini #btn-menu{top: 25%;}
#header #btn-menu:after{content: "\f0c9"; font-size: 1.9rem; font-family: 'Font Awesome 5 Pro'; font-weight: 900;}
#header #btn-menu.on:after{content: "\f00d";}
#header #gnavi{display: none; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: absolute; top: 100%; right: 0; z-index: 900; width: 60vw; max-height: 80vh; margin-left: 0; background-color: transparent;}
#header #gnavi .parents{display: block; width: 100%;}
#header #gnavi .parents>li{width: 100%; padding-bottom: 0;}
#header #gnavi .parents>li.privacy,#header #gnavi .parents>li.use{display: block;}
#header #gnavi .parents>li>a{padding: 1em 0; border-right: none; border-bottom: 1px #eaeaea solid; background-color: #578cbb; color: #fff; font-size: 1.5rem; font-weight: 700;}
#header #gnavi .parents>li:first-child>a{border-left: none;}
#header #gnavi .parents>li>a:before{content: none;}
#header #gnavi .parents>li:hover>a{background-color: #224c93;}
.home #header #gnavi .parents>li.home>a,
.company #header #gnavi .parents>li.campany>a,
.philosophy #header #gnavi .parents>li.campany>a,
.strength #header #gnavi .parents>li.strength>a,
.solution-kogatapos #header #gnavi .parents>li.solution>a,
.solution-pdterm #header #gnavi .parents>li.solution>a,
.solution #header #gnavi .parents>li.solution>a,
.partnership #header #gnavi .parents>li.partnership>a,
.recruit #header #gnavi .parents>li.recruit>a,
.contact #header #gnavi .parents>li.contact>a{background-color: #224c93;}
#header #gnavi .parents>li.campany>a:after,
#header #gnavi .parents>li.solution>a:after,
#header #gnavi .parents>li.recruit>a:after,
#header #gnavi .parents>li.partnership>a:after{position: absolute; right: .5em; margin-left: 0; font-size: 1.5rem; font-family: 'Font Awesome 5 Pro';}
#header #gnavi .parents>li.campany>a.on:after,
#header #gnavi .parents>li.solution>a.on:after,
#header #gnavi .parents>li.recruit>a.on:after,
#header #gnavi .parents>li.partnership>a.on:after{content: "\f077";}
/*newheader setting*/
#header #gnavi .parents>li.campany>a:after{content: "\f078"; position: absolute; right: .5em; margin-left: 0; font-size: 1.5rem; font-family: 'Font Awesome 5 Pro';}
#header #gnavi .parents>li.campany>a.on:after{content: "\f077";}
#header #gnavi .parents>li>ul{display: none; position: relative; padding: 0; background-color: #fff;}
#header #gnavi .parents>li>ul>li:not(:last-child){border-bottom: 1px #eaeaea solid;}
#header #gnavi .parents>li>ul>li>a{display: block; position: relative; padding: 1em 0; color: #333; font-size: 1.2rem; font-family: 'Font Awesome 5 Pro';}
#header #gnavi .parents>li>ul>li>a[href^="javascript:void(0)"]:after{color: #224c93; font-size: 1.5rem;}
#header #gnavi .parents>li>ul>li>a.outside:after{font-size: 1.5rem;}
#header #gnavi .parents>li>ul>li ul{display: none;}
#header #gnavi .parents>li>ul>li li:not(:last-child){padding: 0 3.125% 1rem;}
#header #gnavi .parents>li>ul>li li:last-child{padding: 0 3.125%;}
#header #gnavi .parents>li>ul>li li a{background-color: #d5e9fb; font-size: 1.2rem;}
#header #gnavi .parents>li>ul>li li a:hover{background-color: #d5e9fb;}
}



/*--------------------------------------------------*/
/*			$footer
/*--------------------------------------------------*/
#footer{padding: 20px 0 10px; border-top: 1px #eaeaea solid; background-color: #fff;}
#footer #fnavi ul{font-size: 1.1rem; line-height: 1;}
#footer #fnavi li:not(:last-child){margin-right: 1em; padding-right: 1em; border-right: 1px #333 solid;}
#footer #fnavi li a:hover{text-decoration: underline;}
#footer .copyright{position: absolute; right: 0; top: 0; font-size: 1.1rem; line-height: 1;}
#footer .copyright br{display: none;}
#footer #btn-gotop{display: none; position: fixed; right: 10px; bottom: 30px; width: 50px; height: 50px; z-index: 9999;}
#footer #btn-gotop a{display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 100%; height: 100%; background-color: #333; color: #fff; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#footer #btn-gotop a:hover{opacity: .7;}
@media screen and (max-width: 767px) {
#footer{padding: 6.25% 0 7.8125%;}
#footer #fnavi ul{-webkit-justify-content: center; justify-content: center; padding-bottom: 9.375%; font-size: 1.2rem;}
#footer .copyright{position: static; font-size: .8rem; line-height: 1.6;}
#footer .copyright br{display: block;}
#footer #btn-gotop{bottom: 10px; width: 45px; height: 45px;}
}

/*--------------------------------------------------*/
/*			$recruit-visual
/*--------------------------------------------------*/
.recruit-visual {
  margin: 0 0 44px;
}
.recruit-visual div {
  position: relative;
}
.recruit-visual h1 {
  position: absolute;
  font-size: 4.6rem;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
  color: #fff;
  font-weight: normal;
  z-index: 5;
}
.recruit-visual figure {
  font-size: 0;
  line-height: 0;
}
.recruit-visual figure:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.recruit-visual figure img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .recruit-visual {
    margin: 0 0 5%;
  }
  .recruit-visual h1 {
    font-size: 3.2rem;
    line-height: 1.25;
  }
}
/*--------------------------------------------------*/
/*			$recruit-footer
/*--------------------------------------------------*/
#recruit-footer {
  padding: 55px 0 75px;
  background-color: #F6F6F6;
}
#recruit-footer ul.pcnav {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  width: 825px;
  margin: 0 auto;
  justify-content: center;
}
#recruit-footer ul.pcnav li {
  margin: 0 31px 20px 0;
}
#recruit-footer ul.pcnav li:last-child {
  margin: 0;
}
#recruit-footer ul.pcnav li a {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
#recruit-footer ul.spnav {
  display: none;
}
@media screen and (max-width: 767px) {
  #recruit-footer {
    padding: 0;
    background-color: #F6F6F6;
  }
  #recruit-footer ul.pcnav {
    display: none;
  }
  #recruit-footer ul.spnav {
    display: block;
  }
  #recruit-footer ul.spnav li {
    margin: 0;
    padding: 3% 0 3% 3%;
    border-bottom: 1px solid #707070;
  }
  #recruit-footer ul.spnav li a {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
  #recruit-footer ul.spnav li ul li {
    border-bottom: none;
    padding: 3% 0;
  }
  #recruit-footer ul.spnav li ul li a {
    font-weight: normal;
  }
  #recruit-footer ul.spnav li dt {
    position: relative;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0 0 1%;
  }
  #recruit-footer ul.spnav li dt svg:not(:root).svg-inline--fa {
    position: absolute;
    top: 0;
    right: 3%;
    bottom: 0;
    margin: auto;
    color: #254F9C;
  }
  #recruit-footer ul.spnav li dt.aco.on svg:not(:root).svg-inline--fa {
    transform: rotate(180deg);
  }
  #recruit-footer ul.spnav li dd {
    display: none;
  }
}