@charset "UTF-8";

/* ============================================================================================== */
/* CSSリセット
/* ============================================================================================== */
*{
 box-sizing: border-box;
 min-height: 0vw;
 min-height: 0;
}
html {
 font-size: 62.5%;
 background: rgba(235, 236, 237, 0.37);
 touch-action: manipulation;
 scroll-behavior: smooth;
 height: 100%;
}
body {
 position: relative;
 font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
 color: #353535;
 font-size: 1.6rem;
 overflow-wrap: break-word;
 min-height: 100svh;
 padding: 0;
 margin: 0;
}
h1, h2, h3, h4, h5, ul, li, p, dl, dt, dd, figure, picture, section{
 display: block;
 list-style: none;
 padding: 0;
 margin: 0;
}
img{
 display: block;
 width: 100%;
}
section{
  scroll-margin-top: 100px;
}
/* ============================================================================================== */
/* common
/* ============================================================================================== */
h2{
  color: #001A55;
  font-size: clamp(3rem, 2.518rem + 1.98vw, 4.1rem);
}
p{
  font-weight: bold;
}
.fs18{
  color: #001A55;
  font-size: clamp(1.3rem, 1.081rem + 0.9vw, 1.8rem);
  line-height: 1.8;
 }

.l-inner{
  max-width: 1088px;
  width: 90.667vw;
  margin: auto;
}
.l-column-fl{
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .l-inner{
   max-width: initial;
   width: 87.692vw;
  }
}
/*--link--*/
 a{
 color: #001A55;
 text-decoration: none;
 transition: all 1s;
}
@media (min-width: 769px) {
a:hover{
  opacity: 0.5;
 }
}
/*--リンク解除--*/
a[href*="ohashikogyo.co.jp"]{ /*株式会社大橋工業*/
  pointer-events: none;
 }
/*--fade--*/
.fade{
 transition: 1s;
}
.fade_on{
  opacity: 0;
}
.fade_in{
 transform: translate3d(0, 0, 0);
 opacity: 0;
}
.fade.act{
 transform: translate3d(0, 0, 0);
 opacity: 1;
}
.fade_up {
 transform: translate3d(0, -50px, 0);
 opacity: 0;
}
.fade_left {
 transform: translate3d(-50px, 0, 0);
 opacity: 0;
}
.fade_right {
 transform: translate3d(50px, 0, 0);
 opacity: 0;
}
/*--pc&sp--*/
 .sp{
 display: none !important;
}
@media (max-width: 768px) {
 .pc{
 display: none;
 }
 .sp{
 display: block !important;
 }
}
/* ============================================================================================== */
/* header
/* ============================================================================================== */
header {
  position: fixed;
  width: 100%;
  padding: 28px 0 20px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 99;
}
header .l-inner{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1180px;
  width: 92.188vw;
}
header .site-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}
header .site-logo .logo{
  max-width: 207px;
  width: 16.172vw;
}
header .site-logo .site-ttl{
  max-width: 226px;
  width: 17.656vw;
  padding-bottom: 10px;
  margin-left: 74px;
}
header .nav-sp-btn{
  display: none;
}
nav ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
nav ul li:first-child{
  max-width: 86px;
  width:  6.719vw;
}
nav ul li:nth-child(2){
  max-width: 98px;
  width: 7.656vw;
  margin: 0 63px ;
}
nav ul li:last-child{
  max-width: 140px;
  width:  10vw;
}
nav .btn-nav-close{
  display: none;
}

@media (max-width: 768px) {
  header{
    position: fixed;
    padding: 4.103vw 0 4.103vw 3.846vw;
  }
  header .l-inner{
    display: flex;
    max-width: initial;
    width: 100%;
  }
  header .site-logo .logo{
    max-width: initial;
    width: 33.846vw;
  }
  header .site-logo .site-ttl{
    max-width: initial;
    width: 30vw;
    padding-bottom: 1vw;
    margin-left: 5vw;
  }
  header .nav-sp-btn{
    position: absolute;
    top:0;
    right: 0;
    display: block;
    width: 14.872vw;
    height: 14.872vw;
    color: #fff;
    font-size: clamp(1rem, 0.794rem + 0.85vw, 1.2rem);
    text-align: center;
    padding: 1.282vw 1.795vw 3.077vw;;
    background: #001A55;
  }
  header .nav-sp-btn span{
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    margin-top: 4.103vw;
  }
  header .nav-sp-btn span::before{
    position: absolute;
    top: -10px;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
  }
  header .nav-sp-btn span::after{
    position: absolute;
    bottom: -10px;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
  }
  header nav{
    position: fixed;
    top: 14.872vw;
    left: 0;
    width: 100vw;
    height: 100svh;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(200vw);
    transition: all 0.6s;
    opacity: 0;
    z-index: 999;
  }
  nav ul{
    flex-direction: column;
    padding-top: 10vw;
  }
  nav ul li:first-child{
    max-width: initial;
    width: 29.5vw;
  }
  nav ul li:nth-child(2){
    max-width: initial;
    width: 35.391vw;
    margin: 10vw 0;
  }
  nav ul li:last-child{
    max-width: initial;
    width:  35.547vw;
  }
  nav.act{
   opacity: 1;
   transform: translateX(0);
  }
  nav .btn-nav-close{
    position: absolute;
    top:-14.872vw;
    right: 0;
    display: block;
    width: 14.872vw;
    height: 14.872vw;
    color: #fff;
    font-size: 1.0rem;
    text-align: center;
    padding: 5px 7px 12px;
    background: #5a5f6a;
  }
  header .btn-nav-close span{
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 16px;
  }
  header .btn-nav-close span::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    content: "";
    width: 80%;
    height: 1px;
    margin: 0 auto;
    background: #fff;
    transform: rotate(53deg);
  }
  header .btn-nav-close span::after{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    content: "";
    width: 80%;
    height: 1px;
    margin: 0 auto;
    background: #fff;
    transform: rotate(-53deg);
  }
}

/* ============================================================================================== */
/* kv
/* ============================================================================================== */
#kv .l-inner{
  position: relative;
}
/*--Animation--*/
@keyframes down {
  0% {
    background-position: bottom 10px center;
  }
  100% {
    background-position: bottom 0 center;
  }
 }
 @media (min-width: 769px) {
   #kv{
     background: url("../images/kv-img.jpg") top center no-repeat;
     background-size: cover;
   }
   #kv .l-inner{
     max-width: 1280px;
     width: 100vw;
     max-height: 718px;
     height: 56.094vw;
     padding: 220px 0 0 116px;
   }
   #kv h1{
     max-width: 625px;
     width: 48.828vw;
   }
   #kv .kv-scroll{
     position: absolute;
     left: 40px;
     bottom: 67px;
     max-width: 15px;
     width: 1.172vw;
     padding-bottom: 95px;
     background: url("../images/kv-scroll-arrow.svg") no-repeat;
     animation: down 0.5s ease-in-out infinite alternate;
   }
 }
 @media (max-width: 768px) {
   #kv{
     background: url("../images/kv-img-sp.jpg") top center no-repeat;
     background-size: cover;
   }
   #kv .l-inner{
     padding: 24.615vw 0 25.846vw;
   }
   #kv h1{
     width: 71.795vw;
   }
   #kv .kv-scroll{
    display: none;
   }
 }

/* ============================================================================================== */
/* mission
/* ============================================================================================== */
#mission{
 position: relative;
 padding-bottom: 250px;
 background: url("../images/mission-bg.svg") top center no-repeat;
 background-size: 100% auto;
}
#mission .l-column-fl{
  position: relative;
  padding: 0 128px 0 36px;
  margin: 0 auto;
}
#mission .l-column-fl::before{
  position: absolute;
  bottom: -70px;
  right: 115px;
  content: "";
  max-width: 53px;
  width: 4.141vw;
  max-height: 53px;
  height: 4.141vw;
  background:#0CA195;
}
#mission .l-column-fl::after{
  position: absolute;
  bottom: -40px;
  right: 145px;
  content: "";
  max-width: 40px;
  width: 3.125vw;
  max-height: 40px;
  height: 3.125vw;
  background:#0576B3;
}
#mission .l-column__01 h2{
  font-size: clamp(3.1rem, 0.909rem + 8.99vw, 8.1rem);
  color: #686868;
  margin-bottom: 85px;
}
#mission .l-column__01 p{
  color: #353535;
  margin-left: 80px;
}
#mission .l-column__01  p.mt{
  margin-top: 40px;
  margin-bottom: 40px;
}
#mission .l-column__02 p{
  position: relative;
  color: #252525;
  font-size: clamp(1.9rem, 1.418rem + 1.98vw, 3rem);
  writing-mode: vertical-rl;
  padding-top: 55px;
  margin-top: 31px;
}
#mission .l-column__02 p::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 2px;
  height: 36px;
  margin: 0 auto;
  background: #606060;
}
@media (max-width: 768px) {
  #mission{
   padding-bottom: 22.564vw;
   background-size: cover;
   background-position: right -148vw top -45vw;
  }
  #mission .l-column-fl{
    position: relative;
    justify-content: flex-start;
    padding: 16.154vw 0 0;
  }
  #mission .l-column-fl::before{
    bottom: 2vw;
    right: 0;
    max-width: initial;
    width: 6.154vw;
    max-height: initial;
    height:6.154vw;
  }
  #mission .l-column-fl::after{
    bottom: 7vw;
    right: 6vw;
    max-width: initial;
    width: 4.615vw;
    max-height: initial;
    height: 4.615vw;
  }
  #mission .l-column__01{
    padding-right: 5vw;
  }
  #mission .l-column__01 h2{
    margin-bottom: 3.59vw;
  }
  #mission .l-column__01 p{
    margin-left: 0;
  }
  #mission .l-column__01  p.mt{
    margin-top: 6.41vw;
    margin-bottom: 6.41vw;
  }
  #mission .l-column__02 p{
    font-size: 2.1rem;
    padding-top: 14.103vw;
    margin-top: 7.949vw;
  }
  #mission .l-column__02 p::before{
    height: 6.154vw;
  }
}
/* ============================================================================================== */
/* job
/* ============================================================================================== */
#job{
  padding-bottom: 330px;
  background: url("../images/job-bg.svg") top 52px center no-repeat;
  background-size: 100% auto;
 }
#job .l-inner{
  position: relative;
  padding-top: 37px;
}
#job h2{
  display: inline-block;
  margin-left: 659px;
  text-align: center;
  margin-bottom: 48px;
}
#job .job-cont{
  max-width: 793px;
  width: 61.953vw;
  padding: 154px 89px 52px 183px;
  margin: 0 0 0 auto;
  background: #0D2A6B;
}
#job .job-cont p{
  color: #fff;
}
#job .job-cont .lead{
  position: absolute;
  top: 164px;
  left: 386px;
  display: inline-block;
  color: #001A55;
  font-size: clamp(2.2rem, 1.762rem + 1.8vw, 3.2rem);
  line-height: 1.4;
  padding: 10px 48px;
  background: #fff;
  z-index: 1;
}
#job .job-cont__img01{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 426px;
  width: 33.281vw;
}
#job .job-cont__img02{
  position: absolute;
  bottom: -113px;
  left: 130px;
  max-width: 312px;
  width: 24.375vw;
}
@media (max-width: 768px) {
  #job{
    background-position:  top 15vw center;
    padding-bottom: 22.564vw;
   }
   #job .l-inner{
    width: 100vw;
    text-align: center;
    padding-top: 0;
   }
   #job h2{
     margin-left: 0;
     margin-bottom: 12.821vw;
   }
   #job .job-cont{
     max-width: initial;
     width: 100%;
     padding: 2.564vw 6.795vw 6.667vw;
     margin: 0 auto;
   }
   #job .job-cont p{
    text-align: left;
   }
   #job .job-cont .lead{
     position: static;
     padding: 2.051vw 9.487vw;
     margin-bottom: 9.231vw;
   }

   #job .job-cont__img01, #job .job-cont__img02{
    display: none;
   }

}
/* ============================================================================================== */
/* work
/* ============================================================================================== */
#work{
  padding-bottom: 149px;
  background: url("../images/work-bg.svg") top 20px center no-repeat;
  background-size: 100% auto;
}
#work h2{
  text-align: center;
  margin-bottom: 41px;
}
#work p.fs18{
  text-align: center;
  margin-bottom: 87px;
}
@media (max-width: 768px) {
  #work{
    padding-bottom: 18.718vw;
    background-position: top 14vw center;
  }
  #work .l-inner{
    width: 100vw;
  }
  #work h2{
    margin-bottom: 14.103vw;
  }
  #work p.fs18{
    margin-bottom: 15.564vw;
  }
}
/*--tab--*/
#work .work-tab-cont ul{
  display: flex;
  justify-content: center;
}
#work .work-tab-cont ul li{
  position: relative;
  display: inline-block;
  font-size: clamp(1.3rem, 0.949rem + 1.44vw, 2.1rem);
  padding:21px 50px 24px 88px;
  background: #E6E6E6;
  border-radius: 28px;
  cursor: pointer;
  transition: all 1s;
}
#work .work-tab-cont ul li.act{
  background: #fff;
}
#work .work-tab-cont ul li::before{
  position: absolute;
  top:0;
  bottom: 0;
  left: 57px;
  display: block;
  content: "";
  width: 19px;
  height: 3px;
  margin: auto 0;
  transform: skew(45deg);
  border-bottom: 2px solid #001A55;
  border-right: 3px solid #001A55;
}
@media (min-width: 769px) {
 #work .work-tab-cont ul li:hover{
  opacity: 0.5;
 }
}
@media (max-width: 768px) {
  #work .work-tab-cont ul li{
    width: 50%;
    padding:4.103vw 8.821vw 4.103vw 14.667vw;
    border-radius: 0;
  }
  #work .work-tab-cont ul li::before{
    left: 5vw;
  }
}

/*--work-tab-cont__pattern--*/
#work .work-tab-cont .work-tab-cont__pattern{
  padding: 47px;
  background: #fff;
  border-radius: 65px;
}
#work .work-tab-cont .work-tab-cont__pattern .pattern{
  display: none;
}
#work .work-tab-cont .work-tab-cont__pattern .pattern.active{
  display: block;
}
@media (max-width: 768px) {
  #work .work-tab-cont .work-tab-cont__pattern{
    padding: 11.538vw  6.154vw;
    border-radius: 0;
  }
}
/*--pattern common--*/
@media (max-width: 768px) {
  .work-tab-cont__pattern dl{
    width: 87.692vw;
    margin-bottom: 11.282vw;
  }
  .work-tab-cont__pattern dl dt{
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 2.4rem;
    padding: 2.564vw 5.385vw 2.564vw 7.692vw;
  }
  .work-tab-cont__pattern dl dd{
    padding: 3.846vw 5.641vw;
  }
  .work-tab-cont__pattern dl dd img{
    width: 66.667vw;
    margin: 4.103vw auto 0;
  }
}
/*--daytime--*/
.daytime img.daytime-pc{
  max-width: 718px;
  width: 56.094vw;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .daytime dl{
    border: #FF872B 1px solid;
  }
  .daytime dl dt{
    background: #FF872B;
  }
  .daytime dl dd{
    color: #FF872B;
  }
}
/*--night--*/
.night img.night-pc{
  max-width: 719px;
  width: 56.172vw;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .night dl{
    border: #3C78D2 1px solid;
  }
  .night dl dt{
    background: #3C78D2;
  }
  .night dl dd{
    color: #3C78D2;
  }
}
/* ============================================================================================== */
/* recruit
/* ============================================================================================== */
#recruit{
  padding-bottom: 53px;
  background: url("../images/recruit-bg.svg") top 39px center no-repeat;
  background-size: 100% auto;
}
#recruit h2{
  text-align: center;
  margin-bottom: 63px;
}
#recruit p.fs18{
  text-align: center;
  margin-bottom: 69px;
}
#recruit .recruit-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#recruit .recruit-list__company{
  text-align: center;
  background: #fff;
  border-radius: 35px;
}
#recruit .recruit-list__company a{
  display: block;
  padding-bottom: 35px;
}
#recruit .recruit-list__company p{
  position: relative;
  display: inline-block;
  font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem);
  padding-left: 36px;
  margin-top: 28px;
}
#recruit .recruit-list__company p::before{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 19px;
  height: 3px;
  margin: auto 0;
  transform: skew(45deg);
  border-bottom: 2px solid #001A55;
  border-right: 3px solid #001A55;
}
#recruit .recruit-list__company:nth-child(3){
  position: relative;
}
#recruit .recruit-list__company sup{
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  display: block;
  font-size: clamp(1rem, 0.912rem + 0.36vw, 1.2rem);
  font-weight: bold;
  margin: 0 auto;
}
@media (min-width: 769px) {
  #recruit .recruit-list__company:nth-child(-n+3){
    margin-bottom: 48px;
  }
  #recruit .recruit-list__company:nth-child(2){
    margin-right: 30px;
    margin-left: 30px;
  }
  #recruit .recruit-list__company:nth-child(4){
    margin-right: 30px;
  }
}
@media (max-width: 768px) {
  #recruit{
    padding-bottom: 22.564vw;
    background-position: top 15vw center;
  }
  #recruit h2{
    margin-bottom: 12.051vw;
  }
  #recruit p.fs18{
    margin-bottom: 22.564vw;
  }
  #recruit .recruit-list__company{
    margin-bottom: 8.205vw;
  }
  #recruit .recruit-list__company:last-child{
    margin-bottom: 0;
  }
  #recruit .recruit-list__company a{
    padding-bottom: 8.718vw;
  }
  #recruit .recruit-list__company p{
    padding-left: 9.231vw;
    margin-top: 7.179vw;
  }
  #recruit .recruit-list__company sup{
    bottom: 4vw;
  }
}
/* ============================================================================================== */
/* work-area
/* ============================================================================================== */
#work-area{
  padding-bottom: 95px;
  background: url("../images/work-area-bg.svg") top 414px center no-repeat;
  background-size: 100% auto;
}
#work-area h3{
  font-size: clamp(2rem, 1.869rem + 0.54vw, 2.3rem);
  text-align: center;
  margin-bottom: 26px;
}
@media (max-width: 768px) {
  #work-area{
    padding-bottom: 22.564vw;
  }
}
/*--map--*/
#work-area .work-area-wrapper{
  position: relative;
  margin: 0 auto 60px;
}
#work-area .work-area-map{
  position: relative;
  padding: 24px;
  background: #fff;
  border-radius: 65px;
  margin-bottom: 80px;
}
#work-area .work-area-map img.work-area-map__map{
  width: 550px;
  margin: 0 auto;
}
#work-area .work-area-map img.work-area-map__img01{
  position: absolute;
  top: 73px;
  left: 53px;
  max-width: 258px;
  width: 20.156vw;
}
#work-area .work-area-map img.work-area-map__img02{
  position: absolute;
  bottom: 48px;
  right: 52px;
  max-width: 230px;
  width: 17.969vw;
}
@media (max-width: 768px) {
  #work-area .work-area-wrapper{
    margin: 0 auto 22.564vw;
  }
  #work-area .work-area-map{
    padding: 3.333vw 0 4.359vw;
    background: #fff;
    border-radius: 0;
    margin: 0 auto 6.667vw;
  }
  #work-area .work-area-map img.work-area-map__map{
    max-width: initial;
    width: 95%;
  }
  #work-area .work-area-map img.work-area-map__img01, #work-area .work-area-map img.work-area-map__img02{
    display: none;
  }
}
/*--mask--*/
#work-area .work-area-map .work-area-map__mask{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 550px;
  height: 577px;
  margin: auto;
}
#work-area .work-area-map .work-area-map__mask li{
  position: absolute;
  width: 80px;
  height: 34px;
  cursor: pointer;
  transition: all 1s;
}
#work-area .work-area-map .work-area-map__mask li span{
  display: none;
}
/*--mask--*/
@media (min-width: 769px) {
  #work-area .work-area-map .work-area-map__mask li:hover{
  background: rgba(255, 255, 255, 0.4);
 }
  #work-area .work-area-map .work-area-map__mask li[data-map="hokkaido"]{
    top: 87px;
    right: 73px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="tohoku"]{
    top: 252px;
    right: 117px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="kantou"]{
    bottom: 96px;
    right: 123px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="tokai"]{
    bottom: 35px;
    right: 209px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="hokuriku"]{
    bottom: 142px;
    left: 155px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="kinki"]{
    bottom: 4px;
    left: 112px;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="chugoku"]{
    bottom: 87px;
    left: 0;
  }
}
@media (max-width: 768px) {
  #work-area .work-area-map .work-area-map__mask{
    width: 95%;
    height: 93%;
  }
  #work-area .work-area-map .work-area-map__mask li{
    width: 23vw;
    height: 10vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="hokkaido"]{
    top: 5.4vw;
    left: 40.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="tohoku"]{
    top: 35.7vw;
    left: 42.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="kantou"]{
    top: 66.7vw;
    left: 56.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="tokai"]{
    top: 82.7vw;
    left: 38.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="hokuriku"]{
    top: 49.7vw;
    left: 13.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="kinki"]{
    top: 88.7vw;
    left: 6.5vw;
  }
  #work-area .work-area-map .work-area-map__mask li[data-map="chugoku"]{
    top: 61.7vw;
    left: 0;
  }
}
/*--modal--*/
@media (min-width: 769px) {
  #work-area .work-area-map .work-area-modal-cover{
    position: absolute;
    top:0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(226, 226, 226, 0.8);
    display: none;
    border-radius: 65px;
    z-index: 5;
  }
  #work-area .modal .work-area-modal{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    width: 337px;
    max-height: min-content;
    height:auto;
    margin: auto;
    background: #fff;
    border-radius: 35px;
    z-index: 10;
  }
}
@media (max-width: 768px) {
  #work-area .modal{
    position: relative;
    min-height: 76.923vw;

    display: none;
  }
  #work-area .modal .work-area-modal{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
#work-area .modal .work-area-modal h4{
  color: #fff;
  font-size: clamp(2.0rem, 2.375vw, 3.8rem);
  text-shadow: 0px 3px 6px #00000029;
  text-align: center;
  padding: 10px 10px;
  margin-bottom: 21px;
  border-radius: 35px 35px 0 0;
}
#work-area .modal .work-area-modal ul{
  padding: 0 20px 0 50px;
}
#work-area .modal .work-area-modal ul li{
  margin-bottom: 20px;
}
#work-area .modal .work-area-modal ul li a{
  position: relative;
  display: inline-block;
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);/*768調整*/
  padding-left: 48px;
}
#work-area .modal .work-area-modal li a::before {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 24px;
  height: 4px;
  margin: auto 0;
  transform: skew(45deg);
}
@media (max-width: 768px) {
}
/*--area--*/
#work-area .work-area-cont{
  max-width: 1000px;
  width: 78.125vw;
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  align-items: flex-start;
  margin: 0 auto;
}
#work-area .work-area-cont__area{
  margin-bottom: 35px;
}
#work-area .work-area-cont__area h4{
  color: #fff;
  font-size: clamp(1.8rem, 1.712rem + 0.36vw, 2rem);
  text-shadow: 0px 3px 6px #00000029;
  padding: 7px 10px 7px 24px;
  margin-bottom: 36px;
}
#work-area .work-area-cont__area ul{
  display: flex;
  justify-content: space-between;
  margin-left: 54px;
}
#work-area .work-area-cont__area ul li{
  display: inline-block;
}
#work-area .work-area-cont__area ul li a{
  position: relative;
  display: block;
  font-size: clamp(1.4rem, 1.312rem + 0.36vw, 1.6rem);
  padding-left: 35px;
}
#work-area .work-area-cont__area ul li a::before {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 19px;
  height: 3px;
  margin: auto 0;
  transform: skew(45deg);
}
#work-area .work-area-cont__area.hokkaido, #work-area .work-area-cont__area.tokai, #work-area .work-area-cont__area.kinki, #work-area .work-area-cont__area.chugoku{
  max-width: 320px;
  width: 25vw;
}
#work-area .work-area-cont__area.tohoku, #work-area .work-area-cont__area.hokuriku{
  max-width: 614px;
  width: 47.969vw;
}
@media (max-width: 768px) {
  #work-area .work-area-cont{
    max-width: initial;
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
  }
  #work-area .work-area-cont__area{
    margin-bottom: 15.897vw;
  }
  #work-area .work-area-cont__area h4{
    padding: 2.564vw 5.128vw 1.846vw 3.846vw;
    margin-bottom: 6.41vw;
  }
  #work-area .work-area-cont__area ul{
    flex-flow: column;
    margin-left: 7.436vw;
  }
  #work-area .work-area-cont__area ul li{
    margin-bottom: 5vw;
  }
  #work-area .work-area-cont__area ul li:last-child{
    margin-bottom: 0;
  }
  #work-area .work-area-cont__area ul li a{
    padding-left: 10.256vw;
  }
  #work-area .work-area-cont__area.hokkaido, #work-area .work-area-cont__area.tokai, #work-area .work-area-cont__area.kinki, #work-area .work-area-cont__area.chugoku{
    max-width: initial;
    width: 100%;
  }
  #work-area .work-area-cont__area.tohoku, #work-area .work-area-cont__area.hokuriku{
    max-width: initial;
    width: 100%;
  }
}
/*hokkaido*/
#work-area .work-area-cont__area.hokkaido{
  margin-right: 65px;
}
#work-area .hokkaido h4{
  background: transparent linear-gradient(90deg, #697FF8 0%, #C4CDFF 100%) 0% 0% no-repeat;
}
#work-area .hokkaido a::before{
  border-bottom: 2px solid #697FF8;
  border-right: 3px solid #697FF8;
}
/*--tohoku--*/
#work-area .work-area-cont__area.tohoku ul{
  margin-right: 105px;
}
#work-area .tohoku h4{
  background: transparent linear-gradient(91deg, #36C2DD 0%, #C0F5FF 100%) 0% 0% no-repeat;
}
#work-area .tohoku a::before{
  border-bottom: 2px solid #36C2DD;
  border-right: 3px solid #36C2DD;
}
/*--kantou--*/
#work-area .work-area-cont__area.kantou{
  width: 100%;
}
#work-area .work-area-cont__area.kantou ul{
  margin-right: 54px;
}
#work-area .kantou h4{
  background: transparent linear-gradient(90deg, #EF2E54 0%, #ECBDC7 100%) 0% 0% no-repeat;
}
#work-area .kantou a::before{
  border-bottom: 2px solid #EF2E54;
  border-right: 3px solid #EF2E54;
}
/*--tokai--*/
#work-area .work-area-cont__area.tokai{
  margin-right: 65px;
}
#work-area .tokai h4{
  background: transparent linear-gradient(90deg, #FFC508 0%, #FFF7DF 100%) 0% 0% no-repeat;
}
#work-area .tokai a::before{
  border-bottom: 2px solid #FFC508;
  border-right: 3px solid #FFC508;
}
/*--hokuriku--*/
#work-area .work-area-cont__area.hokuriku ul{
  margin-right: 70px;
}
#work-area .hokuriku h4{
  background: transparent linear-gradient(91deg, #61A04F 0%, #99AF92 100%) 0% 0% no-repeat;
}
#work-area .hokuriku a::before{
  border-bottom: 2px solid #61A04F;
  border-right: 3px solid #61A04F;
}
/*--kinki--*/
#work-area .work-area-cont__area.kinki{
  margin-right: 65px;
  margin-bottom: 0;
}
#work-area .kinki h4{
  background: transparent linear-gradient(90deg, #C23E94 0%, #C5A5BA 100%) 0% 0% no-repeat;
}
#work-area .kinki a::before{
  border-bottom: 2px solid #C23E94;
  border-right: 3px solid #C23E94;
}
@media (max-width: 768px) {
  #work-area .work-area-cont__area.kinki{
    margin-bottom: 15.897vw;
  }
}
/*--chugoku--*/
#work-area .chugoku h4{
  background: transparent linear-gradient(90deg, #EB9D2D 0%, #EAD8BD 100%) 0% 0% no-repeat;
}
#work-area .chugoku a::before{
  border-bottom: 2px solid #EB9D2D;
  border-right: 3px solid #EB9D2D;
}
@media (max-width: 768px) {
  #work-area .work-area-cont__area.chugoku{
    margin-bottom: 0;
  }
}
/*--work-area-sp--*/
#work-area .work-area-sp, #work-area .work-area-sp__cont{
  display: none;
}
@media (max-width: 768px) {
  #work-area .work-area-sp{
    display: block;
    margin-bottom: 23.846vw;
  }
  #work-area .work-area-sp .work-area-sp_select{
    position: relative;
  }
  #work-area .work-area-sp .work-area-sp_select select{
    appearance: none;
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    padding: 2.564vw 0;
    margin-bottom: 3.333vw;
    background: #fff;
    border:#707070 1px solid;
    cursor: pointer;
  }
  #work-area .work-area-sp .work-area-sp_select::after {
    position: absolute;
    top: 3vw;
    right: 3vw;
    width: 16px;
    height: 14px;
    content: "";
    display: block;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
}
  #work-area .work-area-sp__cont{
    display: block;
  }
  #work-area .work-area-sp__cont ul{
    display: none;
    background: #fff;
    border: #707070 1px solid;
  }
  #work-area .work-area-sp__cont ul.act{
    display: block;
  }
  #work-area .work-area-sp__cont ul li{
    border-bottom: #707070 1px solid;
  }
  #work-area .work-area-sp__cont ul li:last-child{
    border-bottom:none;
  }
  #work-area .work-area-sp__cont ul li a{
    position: relative;
    display: block;
    font-size: 1.6rem;
    padding: 19px 10px 22px;
  }
  #work-area .work-area-sp__cont ul li a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3vw;
    display: block;
    content: "";
    width: 19px;
    height: 3px;
    margin: auto 0;
    transform: skew(45deg);
    border-bottom: 2px solid #001A55;
    border-right: 3px solid #001A55;
  }
}
/* ============================================================================================== */
/* jfe-recruit
/* ============================================================================================== */
.jfe-recruit{
  text-align: center;
  padding-bottom: 41px;
}
.jfe-recruit a{
  position: relative;
  display: inline-block;
  font-size: clamp(1.4rem, 1.356rem + 0.18vw, 1.5rem);
  padding: 11px 53px 9px 48px;
  background: #FFFFFF;
  border: 1px solid #707070;
}
.jfe-recruit a:hover{
  color: #fff;
  background: #334777;
  opacity: 1;
}
.jfe-recruit a::before{
  position: absolute;
  top:0;
  bottom: 0;
	right: 13px;
  display: block;
  content: "";
	width: 5px;
	height: 5px;
  margin: auto 0;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
  transition: all 1s;
}
.jfe-recruit a:hover:before{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
@media (max-width: 768px) {
  .jfe-recruit{
    padding-bottom: 16.667vw;
  }
  .jfe-recruit a{
    padding: 2.821vw 13vw 3.077vw 14.513vw;
    margin: 0 6.154vw;
  }
}
/* ============================================================================================== */
/* footer
/* ============================================================================================== */
footer{
 width: 100%;
 padding: 15px 0 13px;
 background: #334777;
 border-top:#707070 1px solid;
 border-bottom:#707070 1px solid;
}
footer .l-inner p{
  color: #fff;
  font-size: clamp(1.0rem, 0.781rem + 0.9vw, 1.5rem);
  text-align: center;
}
@media (max-width: 768px) {
  footer{
    padding: 3.846vw 0 3.333vw;
  }
}