@charset "UTF-8";


/* =====================================================
 * メイン画像
 * ===================================================== */
.top-image-wrap {
  width: 100%;
  background-color: #E0FFFF;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 50px;
}


.top-image-wrap img {
  max-width: 1024px;
  margin: 0 auto;
}


@media screen AND (min-width:1125px) {
  .top-image-wrap {
    padding: 0;
  }
}


/* spとPCでトップ画像を変える */
@media screen AND (max-width:767px) {
  .img-pc {
    display: none;
  }
}


@media screen AND (min-width:768px) {
  .img-pc {
    display: block;
    margin: 0 auto;
  }

  .img-sp {
    display: none;
  }
}


/* -------------------------
 * 業務内容
/* ------------------------- */
.works-wrap {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap; /* 折り返す */
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: space-between; /* 両端まで伸ばしながら要素を均等割りにする */
}


ul.works-wrap a {
  display: block;
  height: 150px;
  border: 1px solid #dc143c;
  padding: 5px;
  text-decoration: none;
}


@media screen AND (min-width:768px) {
  ul.works-wrap a {
    height: 200px;
  }
}


ul.works-wrap a:hover {
  background-color: #fff0f5;
}


ul.works-wrap li {
  position: relative;
  flex-basis: 32%;
  margin-bottom: 1em;
}


/* 枠内右下の▲マーク */
.triangle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent #dc143c #dc143c transparent;
}


/* 枠内の業務タイトル */
.details {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit- transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  font-weight: bold;
  color: #dc143c;
  text-align: center;
}


.details-img {
  margin: 10px 0 0;
  width: 70px;
  height: 70px;
}


@media screen AND (min-width:768px) {
  .details-img {
    width: 100px;
    height: 100px;
  }
}


.explainBox {
  position: relative;
  padding: 20px;
  background: #efefef;
  width: 100%;
  margin: 20px 0;
}


/* リストデザイン */
.list {
  position: relative;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  font-weight: bold;
}


.list li {
  margin: 0;
  padding-left: 20px;
}


.list li:before {
  position: absolute;
  left: 0;
  content: "☆";
  margin: 0;
}