@charset "UTF-8";
/*------------------------------
  募集要項（一覧 /requirements/ ・詳細 /requirements/{slug}/）
------------------------------*/

/*==============================
  一覧ページ
==============================*/
.page-requirements.-archive{
  .list{
    padding-bottom: 16rem;
    background-color: var(--white-through);
    @media screen and (max-width: 768px) {
      padding-bottom: 5rem;
    }
  }
  .list-grid{
    a{
      position: relative;
      display: block;
      padding: 4rem 4rem 3rem;
      background-color: var(--white);
      box-shadow: var(--shadow);
      @media screen and (max-width: 768px) {
        padding: 2.5rem 2rem 2rem;
      }
      @media (any-hover: hover) {
        &:hover{
          background-color: #f5f5f5;
        }
      }
      &+ a{
        margin-top: 4rem;
      }
      .category{
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 0.8rem 2rem;
        background-color: #0056a9;
        color: var(--white);
        font-weight: 500;
        font-size: max(1.4rem,10px);
      }
      h2{
        font-size: max(1.8rem,14px);
        font-weight: 700;
        color: var(--main);
        padding-left: 1rem;
        border-left: 0.2rem solid #0056a9;
      }
      .readText{
        margin-top: max(3rem,20px);
        line-height: 1.6;
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
      }
      .detail{
        border-top: max(0.1rem,1px) solid var(--border);
        margin-top: max(1.5rem,10px);
        padding-top: 2rem;
        position: relative;
        display: grid;
        grid-template-columns: 32rem 1fr;
        gap: 4rem;
        @media screen and (max-width: 768px) {
          display: block;
        }
        .arrow-forward{
          width: 0.8rem;
          position: absolute;
          right: 0;
          top: 2.8rem;
          @media screen and (max-width: 768px) {
            top: calc(50% + 0.4rem);
          }
        }
        .item{
          display: flex;
          @media screen and (max-width: 768px) {
            padding-right: 3rem;
            &+ .item{
              margin-top: 1.5rem;
            }
          }
          &:nth-child(2){
            padding-right: 5rem;
            @media screen and (max-width: 768px) {
              padding-right: 3rem;
            }
          }
          p{
            font-size: max(1.4rem,10px);
            line-height: 1.75;
            font-weight: 600;
            color: var(--white);
            background-color: var(--main);
            margin-right: 1.5rem;
            flex-shrink: 0;
            padding-inline: 1rem;
            height: fit-content;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
              width: 7.5rem;
              height: fit-content;
              text-align: center;
            }
          }
          span{
            font-size: max(1.4rem,10px);
            line-height: 1.75;
            font-weight: 500;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}

/*==============================
  詳細ページ
==============================*/
.page-requirements.-single{
  .table{
    padding-bottom: 16rem;
    background-color: var(--white-through);
    @media screen and (max-width: 768px) {
      padding-bottom: 5rem;
    }
  }
  dl{
    .row{
      display: grid;
      grid-template-columns: 18rem 1fr;
      padding-block: 2.5rem 2rem;
      border-top: max(0.1rem,1px) solid var(--border);
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        padding-block: 2rem;
        &:first-child{
          padding-top: 0;
        }
        &:last-child{
          padding-bottom: 0;
        }
      }
      &:first-child{
        border-top: none;
      }
    }
    dt{
      font-size: max(1.6rem,14px);
      font-weight: 600;
      color: var(--main);
      line-height: 1.75;
      padding-right: 3rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
    }
    dd{
      font-size: max(1.6rem,14px);
      line-height: 1.75;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        margin-top: 0.5rem;
      }
    }
  }

  .btn-wrap{
    display: flex;
    justify-content: center;
    gap: 8rem;
    margin-top: 15rem;
    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
      margin-top: 6rem;
      gap: 2rem;
    }
    .ui-btn{
      width: 44rem;
      height: 8rem;
      @media screen and (max-width: 768px) {
        width: 100%;
        height: 6rem;
        margin-inline: auto;
      }
      span{
        font-size: 2.1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
      }
      &.to-list{
        --main: #0056a9;
      }
    }
  } 
}

/*==============================
  募集がない場合
==============================*/
.page-requirements.-archive {
  .list-empty {
    text-align: center;
    padding-block: 6rem 10rem;
    @media screen and (max-width: 768px) {
      padding-block: 3rem 5rem;
    }
  }
}