@charset "utf-8";

/* ------------------------
共通CSS　navi footer その他
--------------------------- */
.link-wrap{
    text-align: center;
    margin-bottom: 10%;
}
/* ------------------------
求人原稿API section
--------------------------- */

#job-list-container:has(.job-listing:nth-child(1):last-child) {
  justify-content: flex-start; /* カードが1個だけなら左寄せ */
}
.job-wrapper{
    width: 100%;

}

.job-listing img{
    width: 100%;
    height: 100%;
    max-height: 240px;
    min-height: 260px;
    object-fit: contain;
}
.job-content{
    display: grid;
    gap: 3%;
    height: auto;
    width: 100%;
    padding-top: 8%;
    padding-bottom: 14%;


}
.job-message{
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  background: none;
  height: auto;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.link-wrap{
  align-self: baseline;
}
.job-meta,.job-title{
    font-size: 14px;
    background: none;
    width: 100%;
    height: auto;
}
.job-title{
    font-size: 18px;
}

.joblink-wrap{
    text-align: right;
}
.joblink-wrap a{
    color: #333333;
    padding: 0.4em 3em;
    border-radius: 20px;
    font-size: 12px;
}
.recruit-inner{
    margin: 15px;
}
/* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 1024px) {
    #job-list-container{
        display: grid;
        width: 75%;
        max-width: 1200px;
        padding: 8%;
        justify-content: center;
        margin: auto;
        background: #f5f5f5;
    }
    .job-content {
        display: grid;
        grid-template-columns: 45% 45%;
        gap: 10%;
        height: auto;
        width: 100%;
        padding-top: 10%;
        padding-bottom: 0;
    }
    .job-listing{
        width: 100%;
        /* margin: auto; */
        display: grid;
        justify-items: center;
    }
    .text-wrap{
        display: grid;
        align-items: center;
    }
} 

@media screen and (max-width: 767px) {
  .job-listing {
    grid-template-columns: 100%;
    width: 95%;
    margin: 0 auto;
  }
  .job-message{
    font-size: 16px;
    height: auto;
    margin-bottom: 1em;
  }
  .job-meta{
    font-size: 14px;
    width: 100%;
    height: auto;
    /* margin-top: 1em; */
  }
  .job-title{
    font-size: 19px;
    font-weight: bold;
    width: 100%;
    height: auto;
  }
}

/* =========================================
   SP (スマホ) レイアウト
   ========================================= */
.job-content {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 各要素の余白 */
}

/* 順番を自由に指定 (Flexboxの order プロパティ) */

/* 1番目: タイトル */
.job-title {
  order: 1;
}

/* 2番目: 画像 */
.image-wrap {
  order: 2;
}

/* 3番目: 説明文テキスト */
.text-wrap {
  order: 3;
}


/* =========================================
   PC (パソコン) レイアウト
   ========================================= */
@media screen and (min-width: 768px) {
  .job-content {
    display: grid;
    /* 左(画像エリア) と 右(テキストエリア) の比率定義 */
    /* 例: 画像300px、残りは自動 */
    grid-template-columns: 380px 1fr; 
    
    /* 縦方向の並び（行）の定義 */
    /* 1行目: タイトル分の高さ (auto) */
    /* 2行目: 残りのテキスト (1fr) */
    grid-template-rows: auto 1fr; 
    
    gap: 0 40px; /* 横の余白 40px */
  }

  /* --- 配置の指定 --- */

  /* 画像: 左の列(1列目)に配置し、縦は1行目～3行目の線までブチ抜き */
  .image-wrap {
    grid-column: 1 / 2;
    grid-row: 1 / 3; 
    /* width: 100%; height: 100%; object-fit: cover; などが必要かも */
  }

  /* タイトル: 右の列(2列目)の、1行目に配置 */
  .job-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-bottom: 20px; /* 画像とのバランス調整 */
    font-weight: bold;
  }

  /* テキスト群: 右の列(2列目)の、2行目に配置 */
  .text-wrap {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}


.sub-hero-text{
  margin-bottom: 5em;
}



/* =========================================
   SEO　求人一覧タイトル入れ　PC版レイアウト (1024px以上)
   ========================================= */

   .title-wrap{
    width: 90%;
    margin: 0 auto 2.5em;
   }

   .recruit-list-title{
    font-size: 16px;
    margin-bottom: 2em;
    text-align: center;
   }
   .recruit-list-text{
      font-size: 14px;
   }
   @media screen and (min-width: 768px) {
    .title-wrap{
      width: 60%;
      max-width: 600px;
      margin: 0 auto 2.5em;
    }
    .recruit-list-title{
      font-size: 16px;
      margin-bottom: 2.5em;
      text-align: center;
    }
    .recruit-list-text{
      font-size: 14px;
   }
  }