/*================================================
 * graduate index 2025.4.16
 ================================================*/

.graduate_top .gd_list,
.graduate_all .gd_list {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-top: 6.4rem;
  margin-bottom: 4rem;
}

.graduate_top .gd_list li {
  /* max-width: 46rem; */
  width:46rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid #E5E5E5;
}

.graduate_top .gd_list li a {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-wrap: wrap;
  gap: 2.4rem;
}

.graduate_top .gd_list .gd_img {
  position: relative;
  background: #EFEFEF;
  width: 22rem;
  height: auto;
  aspect-ratio: 300/200;
}

.graduate_top .gd_list .gd_img img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.graduate_top .gd_list li .gd_img span,
.graduate_all .gd_list .gd_img span {
  width: 8.3rem;
  display: block;
  padding: 0.5rem 0 0.5rem 1.2rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-white);
  font-family: var(--raleway);
  clip-path: polygon(0 0, 100% 0%, 78% 100%, 0% 100%);
  position: absolute;
  top: 0;
  left: 0;
}

.graduate_top .re_list .re_txt span {
  width: 8.3rem;
  display: block;
  padding: 0.5rem 0 0.5rem 1.2rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-white);
  font-family: var(--raleway);
  clip-path: polygon(0 0, 100% 0%, 78% 100%, 0% 100%);
}

.graduate_top .gd_list li.tag10 .gd_img span,
.graduate_all .gd_list li.tag10 .gd_img span {
  background-color:#27916e;
}
.graduate_top .gd_list li.tag20 .gd_img span,
.graduate_all .gd_list li.tag20 .gd_img span {
  background-color:#2c8e9f;
}


.graduate_top .re_list li.tag10 .re_txt span{
  background-color:#27916e;  
}

.graduate_top .re_list li.tag20 .re_txt span{
  background-color:#2c8e9f;  
}

.graduate_top .gd_list .gd_txt {
  width: calc(100% - 24.4rem);
}
.gd_list .employed {
  font-size:1.2rem;
}
.re_list .re_txt p{
  color:#323232;
}


@media screen and (max-width:1024px) {
  .graduate_top {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .graduate_top .gd_list {
    gap: 3rem 2rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
    justify-content: space-between;
  }


}
@media screen and (max-width:1365px) {

  .graduate_top .gd_list li { /* naisdbioレイアウトの2カラム 保持 */
    gap:4rem 0.5rem;
  }
 .graduate_top .gd_list li { /* naisdbioレイアウトの2カラム 保持 */
    width:48%;
    min-height:200px;
  }
}

@media screen and (max-width:767px) {

 .graduate_top .gd_list {
    gap: 3rem;
  }

  .graduate_top .gd_list li {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
  }
  .re_list .re_img  {
        width: 26rem;
        margin-top: 3rem;
    }

}

@media screen and (max-width:520px) {
.graduate_top .gd_list li a {
  display:block;
}

  .graduate_top .gd_list .gd_img {
 margin-left:auto;
 margin-right:auto;
 margin-bottom:1rem;
}

.graduate_top .gd_list .gd_txt {
  width:100%;
}
.re_list .re_img {
  width:22rem;
  margin-left:auto;
  margin-right:auto;
}
}


/*================================================
 * graduate all 2025.4.16
 ================================================*/
.graduate_all .gd_list li {
  max-width: 22rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid #E5E5E5;
  min-height:30rem;
}

.graduate_all .gd_list .gd_img {
  width: 100%;
  aspect-ratio: 300/200;
  position: relative;
}

.graduate_all .gd_list .gd_img img {
  object-fit: cover;
}

.graduate_all .gd_list .gd_img span.event {
  background: #0D6E53;
}
.graduate_all .gd_txt .name {
  font-weight:500;
}

@media screen and (max-width:1024px) {
  .graduate_all {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .graduate_all .narrow {
    flex-wrap: wrap;
    justify-content: start;
    gap: 0;
  }

}

@media screen and (max-width:767px) {

  .graduate_all .gd_list li {
    width: 30%;
  }
}


/*================================================
 * graduate all 絞り込み　2025.4.16
 ================================================*/
#refine {
  margin: 5rem 0;
  padding: 3rem 3rem;
  background: #E9F5EF;
}

#refine ul li {
  display: inline-block;
}

#refine ul li a {
  padding: 0.8rem 1.6rem;
  border-radius: 1000px;
  border: 1px solid #D6E4DC;
  background: var(--color-white);
  line-height: 1;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
#refine ul li a:hover,
#refine ul li.active a {
  background-color: #e9ecef;
}