@charset "utf-8";

/* =========================================
　hero section
========================================= */
.hero-section{
    display: grid;
    place-items: center;    
    /* 古いブラウザ用のフォールバック */
    height: calc(65vh - 70px);
    /* モダンブラウザ用の動的ビューポート（アドレスバーの影響を受けない） */
    height: calc(65dvh - 70px);
    min-height: calc(65dvh - 70px);
}
.title-wrap{
    display: grid;
    width: 75vw;
    justify-items: left;
}
.hero-title{
    font-size: clamp(30px, 5vw, 48px);
    font-weight: bold;
    line-height: 1.5;
    text-align: start;
}

.content-wrapper {
  background-color: #fff; 
  /* 画像の上に食い込ませる（ネガティブマージン） */
  margin-top: -96px; 
  position: relative; /* 重なり順を安定させるため */
  z-index: 1;
}
.sub-title{
    font-size: 11px;
    font-weight: bold;
}
 @media (min-width: 1024px) {
    .hero-section{
        height: calc(50dvh - 70px);
        min-height: 400px;
        width: 88%;
        max-width: 800px;
        margin: 10% auto 0;
    }
    .title-wrap {
        display: grid;
        width: fit-content;
        justify-items: left;
    }
    .hero-title {
        font-size: clamp(30px, 5vw, 48px);
        font-weight: bold;
        line-height: 1.5;
        text-align: start;
        margin-left: 0!important;
    }

}
.hero-wrapper {
  position: relative; /* 擬似要素の基準にする */
  line-height: 0;      /* 画像の下にできる謎の隙間を消す */
}

.hero-wrapper img {
  width: 100%;
  height: auto;
}

.hero-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* グラデーションの高さ */
/* 修正後（例：白100%の位置を100%から50%へ移動） */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 62%);
  pointer-events: none; /* 下の画像へのクリックを邪魔しない（念のため） */
}


  .pc-subtitle{
    display: none;
  }
  .sp-subtitle{
    display: block;
    width: 95%;
    margin: 50px auto;
    line-height: 2;
    color: #333;
  }

 @media (min-width: 768px) {
  .sp-subtitle{
    display: none;
  }
  .pc-subtitle{
        display: block;
        color: #fff;
        width: 68%;
        line-height: 2;
        background: rgba(0, 0, 0, 0.4);
        padding: 30px 40px;
  }
}


/* =========================================
challenge section
========================================= */

.challenge {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center; /* 上下中央 */
  justify-items: center; /* 左右中央 */
  width: 100%;
  overflow: hidden;
  margin-top: 70px;
}

.challenge-bg {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 100%;
  height: auto;
  display: block; /* 下の謎の隙間を消す */
  z-index: 1;
}

.challenge-content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 2; /* 画像より上に */
  text-align: left;
  padding: 20px;
  /* 画像の顔に被らないように、marginやpaddingで位置を微調整 */
  align-self: end;
  padding-right: 0;
}

.challenge-title {
  /* background-color: #f9d41a;  */
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 20px;
  justify-self: self-end;
}
.challenge-title::before {
    content: 'Recruit';
    display: block;
    font-size: clamp(17px, 1vw, 20px);
    text-align: start;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: bold;
}

/* .challenge-title span:first-child::before {
    content: 'Recruit';
    display: block;
    font-size: 12px;
    text-align: start;
    color: #fff;
    line-height: 1.2; 
    margin-bottom: 4px; 
} */
.challenge-text {
    color: #fff;
    background-color: #75757570;
    text-align: left;
    line-height: 2.2;
}
.challenge-title span {
  background-color: #f9d41a;
  color: #333;
  padding: 4px 8px; 
  line-height: 2.3;     
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
    font-weight: 500;
    font-size: clamp(22px, 3vw, 50px);
  
  /* インライン要素にする（背景を文字幅に合わせるため） */
  display: inline;
}

/* PC版: 2カラム */
@media (min-width: 768px) {
  
  .challenge {
    position: relative;
  }
  /* .challenge-content {
    margin-top: 0;
  } */
  .challenge-content {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 2; /* 画像より上に */
    text-align: left;
    padding: 20px;
    margin-left: 15em;
    align-self: center;
    padding-right: 0;
  }
  .challenge-title span {
    line-height: 2.1;   
  }
}

/* ------------------------
求人原稿API section
--------------------------- */
.recruit-container{
    background: #d0fff0;
    border-radius: 25px 25px 0 0;
    padding-top: 30px;
}
.job-title{
  display: flex;
  gap: 0.5em;
}
.job-title::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background-color: #ffd700;
    border-radius: 50%;
    flex-shrink: 0;
}
#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: 1.5em;
  line-height: 1.3;
}
.link-wrap{
  align-self: baseline;
}
.job-meta,.job-title{
    font-size: 14px;
    background: none;
    width: 100%;
    height: auto;
    line-height: 1.5;
}
.job-title{
    font-size: 18px;
}

.joblink-wrap{
    text-align: right;
    margin-top: 30px;
}
.joblink-wrap a{
    color: #333333;
    padding: 0.8em 2.5em;
    border-radius: 20px;
    font-size: 12px;
    background: #fff;
    border: 1px solid #222222;
}
.joblink-wrap a:hover {
    background-color: #444444e0; /* 背景を濃い色に */
    color: #fff; /* 文字を白に */
}
.recruit-inner{
    margin: 15px 15px 0 15px;
}

/* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 1024px) {
      .recruit-container{
        background: #fff;
        border-radius: 0;
        padding-top: 0;
    }
    .recruit-inner{
        margin: 0;
    }
    #job-list-container{
        display: grid;
        width: 75%;
        max-width: 1200px;
        padding: 8%;
        justify-content: center;
        margin: auto;
        background: #d0fff0;
    }
    .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: 20px; /* 各要素の余白 */
}

/* 順番を自由に指定 (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;
   }
  }