@charset "UTF-8";

@media all and (max-width: 680px) {
  .job-info main {
    padding: 10vw 0 10vw;
  }
  .job-info main p {
    font-size: 3.8vw;
    text-align: justify;
  }
  .job-info main .intro-note {
    background: url(img/job-info-01.webp) center bottom 16vw no-repeat;
    background-size: 70vw;
    padding: 0 0 90vw;
  }
  .job-info main article div h2 {
    font-size: 5vw;
    border-bottom: rgb(245,175,145) solid 1px;
    margin: 0 0 2em;
    padding: 0 0 .5em;
  }
  .job-info main article h3 {
    font-size: 4.2vw;
    font-weight: normal;
  }
  .job-info main article .intro div {
    background: url(img/job-info-02.webp) center bottom 16vw no-repeat;
    background-size: 70vw;
    padding: 0 0 90vw;
  }
  .job-info main article .note dl {
    padding: 0 0 40vw;
  }
  .job-info main article .note dl:nth-of-type(1) {
    background: url(img/job-info-03.webp) center bottom 8vw no-repeat;
    background-size: 70vw;
  }
  .job-info main article .note dl:nth-of-type(2) {
    background: url(img/job-info-04.webp) center bottom 8vw no-repeat;
    background-size: 70vw;
  }
  .job-info main article .note dl:nth-of-type(3) {
    background: url(img/job-info-05.webp) center bottom 8vw no-repeat;
    background-size: 70vw;
  }
  .job-info main article .note .link {
    background: url(img/job-info-06.webp) center bottom 16vw no-repeat;
    background-size: 70vw;
    padding: 10vw 0 60vw;
  }
  .job-info main article .note dl dt h4 {
    color: rgb(230, 110, 0);
    font-size: 4vw;
    font-weight: normal;
  }
  .job-info main article .note dl dd {
    margin: 0;
    padding: 0;
  }
  .job-info main article .aday {
    padding: 10vw 0 0;
  }
  .job-info main article .aday div {
    background: url(img/job-info-07.webp) center bottom 20vw no-repeat;
    background-size: 70vw;
    padding: 0 0 60vw;
  }
  .job-info main article .future div {
    background: url(img/job-info-08.webp) center bottom 8vw no-repeat;
    background-size: 70vw;
    padding: 0 0 60vw;
  }
}
@media all and (min-width: 680px) {
  .job-info main {
    padding: 40px 0 60px;
  }
  .job-info main p {
    text-align: justify;
  }
  .job-info main .intro-note {
    background: url(img/job-info-01.webp) top right no-repeat;
    background-size: 400px;
    padding: 0 460px 70px 0;
  }
  .job-info main article div h2 {
    font-size: 24px;
    border-bottom: rgb(245,175,145) solid 1px;
    margin: 0 0 25px;
    padding: 0 0 5px;
  }
  .job-info main article h3 {
    font-size: 24px;
    font-weight: normal;
  }
  .job-info main article .intro div {
    background: url(img/job-info-02.webp) top right no-repeat;
    background-size: 400px;
    padding: 0 460px 70px 0;
  }
  .job-info main article .note dl {
    padding: 0 460px 50px 0;
  }
  .job-info main article .note dl:nth-of-type(1) {
    background: url(img/job-info-03.webp) top right no-repeat;
    background-size: 400px;
  }
  .job-info main article .note dl:nth-of-type(2) {
    background: url(img/job-info-04.webp) top right no-repeat;
    background-size: 400px;
  }
  .job-info main article .note dl:nth-of-type(3) {
    background: url(img/job-info-05.webp) top right no-repeat;
    background-size: 400px;
  }
  .job-info main article .note .link {
    background: url(img/job-info-06.webp) top right no-repeat;
    background-size: 400px;
    margin-top: -40px;
    padding: 50px 460px 80px 0;
  }
  .job-info main article .note dl dt h4 {
    color: rgb(230, 110, 0);
    font-size: 18px;
    font-weight: normal;
  }
  .job-info main article .note dl dd {
    margin: 0;
    padding: 0;
  }
  .job-info main article .aday div {
    background: url(img/job-info-07.webp) top right no-repeat;
    background-size: 400px;
    padding: 0 460px 50px 0;
    min-height: 200px;
  }
  .job-info main article .future div {
    background: url(img/job-info-08.webp) top right no-repeat;
    background-size: 400px;
    padding: 0 460px 50px 0;
    min-height: 300px;
  }
}