.recruitment {
    margin: 100px;
}

.recruit-midashi01 {
    padding-left: 40px;
    font-size: 60px;
}

.recruit-midashi02 {
    padding-left: 50px;
    font-size: 20px ;
}

/* 画像の下マージンをゼロ、z-indexで画像が上になるように */
.recruit-image01 {
    display: block;
    width: 100%;
    max-width: 1000px; /* お好みで */
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* 画像下をボックスに重ねるため */
    box-shadow: 0px 5px 20px 0px rgba(228,213,196,0.7505841121495327);
}

/* 下のテキストエリアを画像に被せる */
.recruit-txt01 {
    background-color: lab(92.01% 4.43 19) !important;
    width: 100vw;
    margin: -60px calc(50% - 50vw) 0; /* ←ここをマイナスマージンに */
    padding: 100px 8vw 48px 8vw;
    position: relative;
    z-index: 1;
    box-shadow: 0px 5px 20px 0px rgba(228,213,196,0.7505841121495327);
}

.recruit-list {
    margin: 50px 300px;
}

/* recruitment.css の .new-graduates-txt ブロックを差し替え  */
.new-graduates-txt{
  /* ↓ ❶左右マージンを消して中央寄せ */
  margin: 10px 0;

  /* ↓ ❷アイコンと文字を “横並び1行” にする */
  display: inline-flex;
  gap: .45em;             /* ← 好みで 0.3〜0.6em 程度 */
}

/* 擬似要素の絶対配置をオフにする ↓ */
.new-graduates-txt::before{
  position: static;       /* ← left/top 指定は不要になる */
  transform: none;
  margin: 0;              /* ❸ 余白は gap に任せる */
}

.new-graduates {
  display:flex;
  flex-wrap:wrap;
  gap:40px;                 /* 行列どちらも 40px 間隔 */
}

.new-graduates-midashi {
    font-size: 30px;
    padding: 40px 0 10px 0;
    font-weight: bold;
    border-bottom: 2px solid #B3CEAA;
}

.new-graduates-txt {
    font-size: 17px;
    margin: 10px 30px;
}

.new-graduates-list {
  margin:20px 0;                 /* ←100px をリセット */
  max-width:454px;          /* 画像幅と揃えておくと安定 */
}

/* アイコンを配置したい要素に「position: relative;」を記述 */
.new-graduates-txt {
  position: relative;
}

.new-graduates-txt::before {
  /* 基本的に変更しないプロパティ */  
  content: '';
  position: absolute;
  top: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* アイコンとテキストの間隔を調整するプロパティ */
  left: -32px;

  /* アイコンの上下位置を調整するプロパティ */
  transform: translateY(-50%);

  /* アイコンのサイズを調整するプロパティ */
  width: 1.3em;
  height: 1.3em;

  /* 表示させるアイコンのパスを指定 */
  background-image: url(https://orangeholdings.co.jp/images/icon-orange.png);
}

.recruit-link:hover{
    opacity: .6;
}

@media (max-width:1400px){

    .recruitment {
        margin: 100px;
    }

    .recruit-list {
        margin: 80px;
    }
}

@media (max-width:450px){

    .recruitment {
        margin: 10px;
    }

    .recruit-list {
        margin: 10px;
    }

    .new-graduates {
    display: block;
    }

    .new-graduates-img {
        max-width: 150%;
        height: auto;
    }

    .recruit-midashi01 {
        font-size: 40px;
        padding: 10px;
    }

    .recruit-midashi02 {
        padding: 30px 20px 20px 20px;
    }

    .recruit-midashi {
        display: flex;
    }

    .new-graduates-txt {
    font-size: 15px;
    margin: 10px 30px 20px 30px;
    }

    .new-graduates-midashi {
        font-size: 25px;
    }
}

/* recruitment.css 末尾に追記 ─── */
@media (max-width: 600px){
  .new-graduates-list{
    flex: 1 1 100%;   /* 固定 454px → ビューポート幅いっぱい */
    max-width: 100%;  /* 念のため */
  }
  .new-graduates-img{
    width: 100%;      /* 画像をカード幅に合わせる */
    height: auto;     /* 縦横比を維持 */
    object-fit: cover;/* 端が切れても引き伸ばさない */
  }
}