/*------------ PC --------------*/

#recruit {
  padding: 30px 0 30px 0;
  margin: 1px 0 1px 0;
  border-top: solid 3px #9a826d;
  border-bottom: solid 2px #755f4b;
}

#recruit #content {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

#recruit #content .innr {
  width: 94%;
  padding: 30px 3% 50px 3%;
  background-color: #ffffff;
  box-shadow: 2px 2px 10px 0 #5a5357;
}

#recruit #content .innr h2 {
  width: 100%;
  padding: 13px 0 4px 0;
  margin: 0 0 30px 0;
  text-align: center;
  background: -moz-linear-gradient(left top,
    #cf8788, #cf8788 25%, #c46c6e 25%, #c46c6e 50%, #cf8788 50%, #cf8788 75%, #c46c6e 75%, #c46c6e);
  background: -webkit-gradient(linear, left top, right top,
    from(#cf8788), color-stop(25%, #cf8788), color-stop(25%, #c46c6e), color-stop(50%, #c46c6e),
    color-stop(50%, #cf8788), color-stop(75%, #cf8788),
    color-stop(75%, #c46c6e), to(#c46c6e));
  -moz-background-size: 4px 1px, 4px 1px;
  -webkit-background-size: 4px 1px, 4px 1px;
  background-size: 4px 1px, 4px 1px;
  box-shadow: 2px 2px 2px 0 #d9d9d7;
}

#recruit #content h2 {
  background:#cf8788;
}

#recruit #content .innr h2 img {
  max-width: 105px;
  width: 100%;
}

#recruit #content .innr .text {
  width: 100%;
  margin: 0 0 30px 0;
  text-align: center;
  line-height: 1.6;
}

#recruit #content .innr .box01 h3 {
  width: 77%;
  margin: 1px auto 30px auto;
  padding: 0 0 7px 0;
  border-bottom: 1px dotted #863d41;
}

#recruit #content .innr .box01 h3 img {
  width: 96px;
  margin: 0 0 0 10px;
}

#recruit #content .innr .box01 .details {
  margin: 0 0 40px 0;
}

#recruit #content .innr .box01 .details dl {
  width: 77%;
  margin: 1px auto 0 auto;
  background-color: #fce4e5;
  border-bottom: 1px solid #ffffff;
  overflow: hidden;
}

#recruit #content .innr .box01 .details dl dt {
  width: 15.5%;
  padding: 20px 2% 20px 2%;
  font-size: 16px;
  color: #551b1b;
  text-align: center;
  float: left;
}

#recruit #content .innr .box01 .details dl dd {
  width: 75.5%;
  padding: 20px 3% 14px 2%;
  background-color: #fdf4f4;
  font-size: 14px;
  text-align: left;
  float: left;
}

#recruit #content .innr .box01 .details dl dd ul {
  /*overflow: hidden;*/
}

#recruit #content .innr .box01 .details dl dd ul li {
  padding: 5px 0 5px 15px;
  /*float: left;*/
}

#recruit #content .innr .btn .btn-entry {
  width: 100%;
  text-align: center;
}

#recruit #content .innr .btn .btn-entry img {
  width: 265px;
}

/*------------- tablet --------------*/

@media screen and (max-width: 768px) {
  #recruit #content .innr .box01 h3 {
    width: 95%;
  }
  #recruit #content .innr .box01 .details dl {
    width: 95%;
    margin: 0 auto;
    border-style: none;
  }
  #recruit #content .innr .box01 .details dl dt {
    width: 100%;
    padding: 10px 0 10px 20px;
    float: none;
    text-align: left;
    background-image: linear-gradient(
      -45deg, #fbd6d7 25%, #fce4e5 25%, #fce4e5 50%, #fbd6d7 50%, #fbd6d7 75%, #fce4e5 75%, #fce4e5);
    background-size: 4px 4px;
  }
  #recruit #content .innr .box01 .details dl dd {
    width: 100%;
    padding: 20px 0 20px 0;
    text-align: left;
    float: none;
  }
  #recruit #content .innr .box01 .details dl dd ul {
    margin: 0 2% 0 2%;
  }
  #recruit #content .innr .box01 .details dl dd ul li {
    padding: 0 0 6px 15px;
  }
}

/*------------- SP --------------*/

@media screen and (max-width: 420px) {
  #recruit {
    padding: 0 0 0 0;
  }
  #recruit #content .innr {
    width: 94%;
    padding: 20px 3% 50px 3%;
    margin: 0;
    box-shadow: none;
  }
  #recruit #content .innr h2 {
    width: 100%;
    margin: 0 0 25px 0;
  }
  #recruit #content .innr .text {
    font-size: 14px;
  }
}