.spacer10 {
  clear: both;
  width: auto;
  height: 10px;
}

.spacer20 {
  clear: both;
  width: auto;
  height: 20px;
}

.spacer30 {
  clear: both;
  width: auto;
  height: 30px;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


@media (min-width: 1200px) {
  .container {
    max-width: 1200px !important;
  }
}

/* テーブルのレスポンシブ 求人情報 */
.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
}

.col-head-type1 th,
.col-head-type1 td {
  border: 1px solid #dbe1e8;
  padding: 8px;
}

.col-head-type1 th {
  background: #f9fafc;
  text-align: left;
  width: 150px;
}

@media only screen and (max-width: 800px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }

  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;
  }

  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }
}


/* テーブルのレスポンシブ 会社概要 */
.col-head-type2 {
  border-collapse: collapse;
  width: 100%;
}

.col-head-type2 th,
.col-head-type2 td {
  border: 1px solid #dbe1e8;
  padding: 8px;
}

.col-head-type2 th {
  background: #f9fafc;
  text-align: left;
  width: 300px;
}

@media only screen and (max-width: 800px) {
  .col-head-type2 tr,
  .col-head-type2 th,
  .col-head-type2 td {
    display: block;
    width: auto;
  }

  .col-head-type2 tr:first-child {
    border-top: 1px solid #dbe1e8;
  }

  .col-head-type2 th,
  .col-head-type2 td {
    border-top: none;
  }
}

/*
 * フロー　登録までの流れ
 */
 .flowchart{
   margin-left: .5em;
   border-left: 2px dashed;
 }
 .flowchart h4{
   position: relative;
   margin-left: 2em;
   margin-bottom: 0;
 }
 .flowchart p{
   margin-top: .3em;
   margin-left: 3em;
 }
 .flowchart h4:before{
   position: absolute;
   left: -2.5em;
   top: .2em;
   width: 1em;
   height: 1em;
   border-radius: .5em;
   background: #fff;
 }
 .flowchart h4:after{
   content: "";
   border-bottom: 1px solid;
   width: 1em;
   background: #000;
   position: absolute;
   top: .8em;
   left: -1.5em;
 }

 /*
  * フロー　登録までの流れ
  */
  .flowchart{
    margin-left: .5em;
    border-left: 2px dashed;
  }
  .flowchart h2{
    position: relative;
    margin-left: 2em;
    margin-bottom: 0;
  }
  .flowchart p{
    margin-top: .3em;
    margin-left: 3em;
  }
  .flowchart h2:before{
    position: absolute;
    left: -2.5em;
    top: .2em;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    background: #fff;
  }
  .flowchart h2:after{
    content: "";
    border-bottom: 1px solid;
    width: 1em;
    background: #000;
    position: absolute;
    top: .8em;
    left: -1.5em;
  }

 body:before{
 content:"";
 display:block;
 position:fixed;
 top:0;
 left:0;
 z-index:-1;
 width:100%;
 height:100vh;
 background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2)),url(https://www.olp.co.jp/lp/2019area-job/fukuoka-call/assets/img/collage_photocat.jpg) center no-repeat;
 background-size:cover;
 }