@charset "UTF-8";
/*--------------------------------------------
JOBS
---------------------------------------------*/
#jobs{
  @media screen and ( width <= 750px ){
    padding-bottom : calc( 30 * var(--remBase ) );
  }
  @media print,screen and ( width > 750px ){
    padding-bottom : calc( 120 * var(--remBase ) );
  }
}
#results{
  font-family: "Zen Kaku Gothic New", sans-serif;
  h1{
    font-weight: 700;
  }
  .tools{
    output{
      display: grid;
      align-items: baseline;
      justify-content: start;
      grid-auto-flow: column;
      > span{
        font-weight: 700;
        font-size : calc( 16 * var(--remBase ) );
        line-height : calc( 22 / 16 );
        span{
          color:var(--blue);
          font-size : calc( 30 * var(--remBase ) );
          line-height : calc( 41 / 30 );
          margin-inline : calc( 4 * var(--remBase ) );
        }
      }
    }
    .selectBox{
      position: relative;
      &:before{
        content:"";
        display: block;
        font-size: 0;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        background : url( "../images/parts/select/down01.svg" ) center / contain no-repeat;
        aspect-ratio: 9 / 7;
      }
      select{
        width: 100%;
        height: 100%;
        background-color: white;
        outline: solid 1px #ECEFF0;
        outline-offset: -1px;
        font-weight: 700;
        font-size : calc( 16 * var(--remBase ) );
        line-height : calc( 22 / 16 );
        border-radius : calc( 3 * var(--remBase ) );
      }
    }
  }
  #zero{
    font-weight: 500;
    background-color: white;
    font-size : calc( 16 * var(--remBase ) );
    line-height: 1.6;
  }
  @media screen and ( width <= 750px ){
    margin-top : calc( -20 * var(--remBase ) );
    h1{
      font-size : calc( 24 * var(--remBase ) );
      line-height : calc( 41 / 24 );
    }
    .tools{
      margin-top : calc( 22 * var(--remBase ) );
      output{
        column-gap : calc( 20 * var(--contentBase ) );
      }
      .selectBox{
        margin-top : calc( 30 * var(--remBase ) );
        width: 100%;
        height : calc( 50 * var(--remBase ) );
        &:before{
          height : calc( 7.82 * var(--remBase ) );
          right : calc( 15 * var(--contentBase ) );
        }
        select{
          padding-left : calc( 15 * var(--contentBase ) );
        }
      }
    }
    .list-jobs{
      margin-top : calc( 40 * var(--remBase ) );
    }
    #zero{
      margin-top : calc( 40 * var(--remBase ) );
      border-radius : calc( 15 * var(--remBase ) );
      padding-inline : calc( 20 * var(--contentBase ) );
      padding-block : calc( 30 * var(--remBase ) );
    }
  }
  @media print,screen and ( width > 750px ){
    h1{
      font-size : calc( 30 * var(--remBase ) );
      line-height : calc( 41 / 30 );
    }
    .tools{
      margin-top : calc( 22 * var(--remBase ) );
      display: grid;
      align-items: start;
      justify-content: start;
      grid-template-columns: auto 1fr auto calc( 20 * var(--contentBase) ) auto;
      output{
        grid-column: 1;
        grid-row: 1;
        column-gap : calc( 20 * var(--remBase ) );
      }
      .selectBox{
        grid-column: 3;
        grid-row: 1;
        height : calc( 35 * var(--remBase ) );
        width : calc( 128 * var(--remBase ) );
        margin-top : calc( 3 * var(--remBase ) );
        &:before{
          height : calc( 6.58 * var(--remBase ) );
          right : calc( 14 * 100% / 128 );
        }
        select{
          padding-left : calc( 16 * 100% / 128 );
        }
      }
      #pagination{
        grid-column: 5;
        grid-row: 1;
        margin-top : calc( 3 * var(--remBase ) );
      }
    }
    .list-jobs{
      margin-top : calc( 50 * var(--remBase ) );
    }
    #zero{
      margin-top : calc( 50 * var(--remBase ) );
      border-radius : calc( 20 * var(--remBase ) );
      padding-inline : calc( 30 * var(--contentBase ) );
      padding-block : calc( 40 * var(--remBase ) );
    }
  }
}
#pagination{
  ul{
    width: fit-content;
    display: grid;
    grid-auto-flow: column;
    height: 100%;
    position: relative;
  }
  li{
    height: 100%;
    aspect-ratio: 1;
    width: auto;
  }
  :where( a , span ){
    height: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-weight: 700;
  }
  a , span{
    border-radius : calc( 3 * var(--remBase ) );
  }
  .numbers > a{
    background-color: var(--blue);
    color:white;
    outline: solid 1px var(--blue);
    outline-offset: -1px;
  }
  .current{
    background-color:white;
    color:var(--blue);
    outline: solid 1px var(--blue);
    outline-offset: -1px;
  }
  :where( .prev , .next ){
    position: absolute;
    top: 0;
    img{
      height : calc( 10.62 * var(--remBase ) );
    }
  }
  .prev{
    left: 0;
  }
  .next{
    right: 0;
  }
  .dots{
    img{
      height : calc( 5 * var(--remBase ) );
    }
  }
  @media screen and ( width <= 750px ){
    margin-top : calc( 20 * var(--remBase ) );
    height : calc( 40 * var(--remBase ) );
    ul{
      column-gap : calc( 10 * var(--remBase ) );
      padding-inline: calc( 50 * var(--remBase) );
      justify-content: center;
      margin-inline : auto;
    }
    .numbers > a , .current > span{
      font-size : calc( 24 * var(--remBase ) );
    }
  }
  @media print,screen and ( width > 750px ){
    height : calc( 35 * var(--remBase ) );
    ul{
      column-gap : calc( 8 * var(--remBase ) );
      padding-inline: calc( 43 * var(--remBase) );
      justify-content: end;
    }
    .numbers > a , .current > span{
      font-size : calc( 18 * var(--remBase ) );
    }
  }
}
@media ( hover : hover ){
  #pagination{
    .numbers a:hover{
      background-color: white;
      color:var(--blue);
    }
    .prev:hover{
      img{
        translate: -100% 0;
      }
    }
    .next:hover{
      img{
        translate: 100% 0;
      }
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #pagination{
    .numbers a{
      transition: background-color .3s linear , color .3s linear;
    }
    :where( .next , .prev ) img{
      transition: translate .3s linear;
    }
  }
}