@charset "UTF-8";

.commonTitle {
  font-size: calc(1.525rem + 2.475vw)
}

.civil {
  margin: 0 0 120px
}

.civilImg {
  margin: 0 auto 35px;
  max-width: 500px
}

.civilSubTitle {
  color: #467aef;
  font-size: calc(1.425rem + 1.575vw);
  font-weight: 400;
  margin: 0 0 30px
}

.civilText {
  font-size: calc(1.275rem + .225vw);
  font-weight: 400;
  margin: 0 0 30px
}

.civilWork {
  background: #ffe44b;
  padding: 30px 35px 30px
}

.civilWorkTitle {
  padding: 0 0 20px;
  border-bottom: solid 1px #707070;
  margin: 0 0 45px;
  font-size: calc(1.375rem + 1.125vw);
  text-align: center
}

.civilWorkItem {
  position: relative;
  padding: 0 0 0 15px;
  font-size: calc(1.275rem + .225vw);
  font-weight: 400
}

.civilWorkItem:not(:last-of-type) {
  margin: 0 0 15px
}

.civilWorkItem::before {
  content: "■";
  position: absolute;
  color: #1058cb;
  left: 0
}

.civilQualification {
  margin: 0 0 30px
}

.civilQualification {
  background: #eaeaea;
  padding: 30px 35px 30px
}

.civilcivilQualificationTitle {
  padding: 0 0 20px;
  border-bottom: solid 1px #707070;
  margin: 0 0 45px;
  font-size: calc(1.375rem + 1.125vw);
  text-align: center
}

.civilcivilQualificationText {
  margin: 0 0 35px
}

.civilQualificationList {
  margin: 0 0 45px
}

.civilQualificationItem {
  position: relative;
  padding: 0 0 0 15px;
  font-size: calc(1.275rem + .225vw);
  font-weight: 400
}

.civilQualificationItem:not(:last-of-type) {
  margin: 0 0 15px
}

.civilQualificationItem::before {
  content: "■";
  position: absolute;
  color: #ffe44b;
  left: 0
}

.civilcivilQualificationEnd {
  text-align: center;
  font-size: calc(1.275rem + .225vw)
}

.civilLink {
  color: #fff;
  background: #1058cb;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
  font-size: calc(1.305rem + .495vw);
  max-width: 360px;
  padding: 15px;
  border-radius: 35px;
  margin: 0 auto;
  text-decoration: none
}

.civilLink:hover {
  opacity: .8
}

.transport {
  margin: 0 0 120px
}

.transportImg {
  margin: 0 auto 35px;
  max-width: 500px
}

.transportSubTitle {
  color: #467aef;
  font-size: calc(1.425rem + 1.575vw);
  font-weight: 400;
  margin: 0 0 30px
}

.transportText {
  margin: 0 0 60px
}

.transportLink {
  color: #fff;
  background: #1058cb;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
  font-size: calc(1.305rem + .495vw);
  max-width: 360px;
  padding: 15px;
  border-radius: 35px;
  margin: 0 auto;
  text-decoration: none
}

.transportLink:hover {
  opacity: .8
}

.otherImg {
  margin: 0 auto 35px;
  max-width: 500px
}

.otherTabel {
  width: 100%
}

.otherTableData,
.otherTableHead {
  width: 100%;
  display: block
}

.otherTableHead {
  padding: 10px 0;
  font-size: calc(1.375rem + 1.125vw)
}

.otherTableData {
  padding: 10px 0
}

.otherTableData p {
  position: relative;
  padding: 0 0 0 20px
}

.otherTableData p::before {
  content: "■";
  position: absolute;
  left: 0;
  color: #ffe44b
}

@media (min-width:768px) {
  .civil {
    margin: 0 0 160px
  }

  .civilWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
  }

  .civilImg {
    max-width: 100%;
    display: flex
  }

  .civilSubTitle {
    margin: 0 0 45px
  }

  .civilText {
    margin: 0 0 50px
  }

  .civilWork {
    padding: 60px 65px 30px
  }

  .civilWorkList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .civilWorkItem {
    width: calc(50% - 15px);
    margin: 0 15px 15px 0 !important
  }

  .civilQualification {
    padding: 60px 65px 30px
  }

  .civilQualificationList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .civilQualificationItem {
    width: calc(50% - 15px);
    margin: 0 15px 15px 0 !important
  }

  .transport {
    margin: 0 0 160px
  }

  .transportImg {
    max-width: 100%;
    display: flex
  }

  .transportSubTitle {
    margin: 0 0 45px
  }

  .otherImg {
    max-width: 100%;
    display: flex
  }

  .otherTableData,
  .otherTableHead {
    display: table-cell;
    width: auto
  }

  .otherTableHead {
    width: 250px;
    padding: 0;
    text-align: left;
    vertical-align: top
  }

  .otherTableData {
    padding: 0 0 50px
  }
}

@media (min-width:1000px) {
  .commonTitle {
    font-size: 4rem
  }

  .civilSubTitle {
    font-size: 3rem
  }

  .civilText {
    font-size: 1.5rem
  }

  .civilWorkTitle {
    font-size: 2.5rem
  }

  .civilWorkItem {
    font-size: 1.5rem
  }

  .civilcivilQualificationTitle {
    font-size: 2.5rem
  }

  .civilQualificationItem {
    font-size: 1.5rem
  }

  .civilcivilQualificationEnd {
    font-size: 1.5rem
  }

  .civilLink {
    font-size: 1.8rem
  }

  .transportSubTitle {
    font-size: 3rem
  }

  .transportLink {
    font-size: 1.8rem
  }

  .otherTableHead {
    font-size: 2.5rem
  }
}