@charset "utf-8";

/* ------- INDEX ---------------------------------------------- */

.flow-section-wrap{
  counter-reset: number 0;
}
.flow-section{
}
.flow-section:nth-child(odd){
  background-color: #F2F2F2;
}
.flow-section:nth-child(even){
  background-color: #FFF;
}
.flow-section .inner-middle{
  position: relative;
}
.flow-section .inner-middle:before{
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.flow-section:nth-child(odd) .inner-middle:before{
  background-image: url("../img/bg_flow_odd.svg");
}
.flow-section:nth-child(even) .inner-middle:before{
  background-image: url("../img/bg_flow_even.svg");
}
.flow-section:first-child .inner-middle:before{
  display: none;
}
.flow-section-heading{
  display: flex;
  position: relative;
}
.flow-section-heading:before{
  background-color: #000;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.flow-section-heading h2{
  border-bottom: 3px solid #0CB4ED;
  font-weight: 700;
  line-height: 1.66;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.flow-section-heading h2:before{
  counter-increment: number 1;
  content: counter(number,decimal-leading-zero);
  color: #0CB4ED;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  line-height: 1;
}
.flow-section-heading h2 > b{
  color: #0CB4ED;
  font-weight: 700;
}
.flow-section .catch{
  font-weight: 700;
}
.flow-colmn-item dl > dt{
  font-weight: 700;
}
@media print, screen and (min-width:781px) {
  .flow-section-wrap{
    margin-top: 80px;
  }
  .flow-section .inner-middle{
    padding: 125px 0 80px;
  }
  .flow-section .inner-middle:before{
    height: 100px;
  }
  .flow-section:first-child .inner-middle{
    padding-top: 75px;
  }
  .flow-section-heading h2{
    font-size: 5.0rem;
    padding-bottom: 20px;
  }
  .flow-section-heading h2:before{
    font-size: 10.0rem;
    margin-right: 40px;
  }
  .flow-section .catch{
    font-size: 3.0rem;
    margin-top: 40px;
  }
  .flow-section .catch + p{
    margin-top: 20px;
  }
  .flow-colmn{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
  }
  .flow-colmn-item{
    width: 44.92%;
  }
  .flow-colmn-item dl > dt{
    font-size: 2.4rem;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 780px) {
  .flow-section-wrap{
    margin-top: 60px;
  }
  .flow-section .inner-middle{
    padding: 60px 20px 40px;
  }
  .flow-section .inner-middle:before{
    height: 50px;
  }
  .flow-section:first-child .inner-middle{
    padding-top: 35px;
  }
  .flow-section-heading h2{
    font-size: 2.5rem;
    padding-bottom: 10px;
  }
  .flow-section-heading h2:before{
    font-size: 5.0rem;
    margin-right: 20px;
  }
  .flow-section .catch{
    font-size: 2.0rem;
    margin-top: 20px;
  }
  .flow-section .catch + p{
    margin-top: 20px;
  }
  .flow-colmn{
    margin-top: 30px;
  }
  .flow-colmn-item:nth-child(n + 2){
    margin-top: 30px;
  }
  .flow-colmn-item dl > dt{
    font-size: 1.8rem;
    margin-top: 15px;
    margin-bottom: 10px;
  }
}
@media (hover: hover) and (pointer: fine){
}



.flow-person-list{
  background-color: #0CB4ED;
}
.flow-person-list > dt{
  background-color: #158BB3;
  color: #FFF;
  font-weight: 700;
  line-height: 1.66;
  text-align: center;
}
.flow-person-list-item{
  background-color: #FFF;
  display: flex;
}
.flow-person-list-item a{
  display: flex;
  width: 100%;
}
.flow-person-list-item .image{
  background-color: #808080;
  overflow: hidden;
  position: relative;
}
.flow-person-list-item .image:before{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transition: .3s;
}
.flow-person-list-item .detail{
  background-image: url("../img/ic_arrow.svg");
  background-repeat: no-repeat;
  font-family: 'Barlow Condensed', sans-serif;
  color: #2C2C2C;
  font-weight: 500;
}

.flow-person-list-item.design-p_s-h .image:before{
  background-image: url("../img/design-p_s-h.jpg");
}
.flow-person-list-item.machining_h-t .image:before{
  background-image: url("../img/machining_h-t.jpg");
}
.flow-person-list-item.outside-w_y-t .image:before{
  background-image: url("../img/outside-w_y-t.jpg");
}
.flow-person-list-item.electrical-eq_k-y .image:before{
  background-image: url("../img/electrical-eq_k-y.jpg");
}
.flow-person-list-item.transport-m_h-n .image:before{
  background-image: url("../img/transport-m_h-n.jpg");
}
@media print, screen and (min-width:781px) {
  .flow-person-list{
    display: flex;
    margin-top: 75px;
  }
  .flow-person-list > dt{
    font-size: min(1.75vw,2.4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    width: 23.89%;
  }
  .flow-person-list > dd{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px;
    width: calc(100% - 23.89%);
  }
  .flow-person-list-item{
    width: 48.21%;
  }
  .flow-person-list-item .image{
    width: 37.03%;
  }
  .flow-person-list-item .detail{
    background-position: right 30px center;
    box-shadow: 0 3px 20px rgba(0,0,0,.16);
    align-self: center;
    font-size: min(2.54vw,3.0rem);
    padding: 30px 60px 30px 30px;
    width: calc(100% - 37.03%);
    transition: .3s;
  }
}
@media screen and (max-width: 780px) {
  .flow-person-list{
    margin-top: 35px;
  }
  .flow-person-list > dt{
    font-size: 1.6rem;
    padding: 15px;
  }
  .flow-person-list > dd{
    padding: 15px;
  }
  .flow-person-list-item:nth-child(n + 2){
    margin-top: 10px;
  }
  .flow-person-list-item .image{
    width: 37.03%;
  }
  .flow-person-list-item .detail{
    background-position: right 30px center;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    align-self: center;
    font-size: 2.0rem;
    padding: 30px 60px 30px 30px;
    width: calc(100% - 37.03%);
  }
}
@media (hover: hover) and (pointer: fine){
  .flow-person-list-item a:hover .detail{
    color: #0CB4ED;
  }
  .flow-person-list-item a:hover .image:before{
    transform: scale(1.05);
  }
}