@charset "utf-8";

.detail_active_scroll_none {
  overflow: hidden;
}

.projects_wrapper {
  font-family: var(--NotoSans);
  width: 112rem;
  margin: 6.9rem auto 0;
  padding-bottom: 11rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

.projects_content_title{
  font-family:var(--Roboto);
  font-weight:500;
  font-size:1.6rem;
  color:var(--Orange);
}

.projects_content_text{
  font-family: var(--NotoSans);
  font-size:1.6rem;
  font-weight:400;
  color:var(--Black);
}

.project_post_content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* ================================
PROJECT-RECORD-SECTION
================================ */
.projects_numbers_section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.projects_section_title {
  color: var(--Orange);
  font-size: 3.2rem;
  font-family: var(--Roboto);
  font-weight: 500;
}

.projects_record_container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.projects_record_box{
  width: 18.2rem;
  padding: 1.1rem 0;
  background-color: var(--White);
}
.projects_record_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.projects_record_title {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(19 / 16);
}
.projects_record_img_box {
  width: fit-content;
  height: 8rem;
}

.record_img{
  object-fit: contain;
}

.projects_record_num_box {
  display: flex;
}
.projects_record_num {
  font-size: 4rem;
  font-weight: 900;
  color: var(--Orange);
  line-height: calc(48 / 40);
}
.projects_record_unit {
  color: var(--Swamp);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(32 / 16);
  align-self: flex-end;
}

/* ===== PARTNERS-LOGO ===== */
.partners_logo_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 2rem;
}
.partners_logo_image {
  width: 21.6rem;
  height: 8rem;
}
.partners_logo_image img {
  object-fit:  contain;
}
.partners_item_text {
  color: var(--Swamp);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}

/* ================================
PROJECT-RECRUIT-SECTION
================================ */
.projects_recruit_section {
  display: flex;
  justify-content: space-between;
}
.projects_recruit_content {
  display: flex;
  width: 54.4rem;
  padding: 6rem 6rem 4.869rem;
  justify-content: space-between;
  flex-direction: column;
  background: linear-gradient(120deg, #E8B768, #EA5414);
}
.projects_recruit {
  font-family: var(--Roboto);
  font-size: 1.6rem;
  font-weight: 500;
  color: #20273D;
}
.projects_recruit_title {
  color: var(--Swamp);
  font-size: 3.2rem;
  font-weight: 500;
  line-height: calc(48 / 32);
  margin-bottom: 0.8rem;
}
.projects_recruit_text {
  color: var(--Swamp);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: calc(27 / 16);
}
/* .projects_recruit_link {
  font-family: var(--Roboto);
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--Swamp);
  padding-right: 12.1rem;
  padding-bottom: 0.2rem;
  align-self: flex-end;

  border-bottom: 0.1rem solid var(--Swamp);
  position: relative;
}
.projects_recruit_link::after {
  content: "";
  position: absolute;
  top: calc(50% - -1rem);
  transform-origin: calc(100% - 0.3rem) 50%;
  right: 0;
  transform: rotate(45deg);
  width: 1.5rem;
  height: 0.1rem;
  background-color: var(--Swamp);
} */


/* ↓ホバー時アニメーションです。 */

.more_text_link_box{
  margin-top:0.3rem;
}

.more_text_link{
  position:relative;
  color:var(--Swamp);
  width:21.8rem;
  display:block;
  text-align:left;
  font-size:1.5rem;
  font-weight: 400;
  font-family:var(--Roboto);
  overflow:hidden;
  cursor:pointer;
  padding-bottom:0.6rem;
  line-height:calc(18em/15);
}

.more_text_link::before{
content:'';
position:absolute;
bottom:0.1rem;
left:0;
width:100%;
height:0.1rem;
background:var(--Swamp);
transform-origin:right top;
max-height:1px;
}

.front_hover_link_line{
  display:inline-block;
  width:1.3rem;
  height:1.3rem;
  position:absolute;
  right:0;
  bottom:0;
  overflow:hidden;
}

.front_hover_link_line::before{
content:'';
position:absolute;
bottom:0.1rem;
right:0;
width:1.6rem;
height:0.1rem;
background:var(--Swamp);
transform:rotate(45deg) ;
transform-origin:right bottom;
transition:transform .3s ease-in-out .1s;
max-height:1px;
}

.front_hover_link_line::after{
content:'';
position:absolute;
bottom:0.1rem;
right:0;
width:1.6rem;
height:0.1rem;
background:var(--Swamp);
transform:rotate(45deg) ;
transform-origin:right bottom;
transition:transform .3s ease-in-out .1s;
max-height:1px;
}

.more_text_link:hover::before{
  animation:more-anim .6s ease-in-out;
}

.more_text_link:hover .front_hover_link_line::before{
  animation:more-anim2 .6s ease-in-out;
}

.more_text_link:hover .front_hover_link_line::after{
  animation:more-anim3 .6s ease-in-out;
}


@keyframes more-anim{
  0%{
    transform:translateX(0);
  }
    50%{
    transform:translateX(100%);
  }
    51%{
    transform:translateX(-100%);
  }
    100%{
    transform:translateX(0);
  }
}

@keyframes more-anim2{
    0%{
    bottom:0.1rem;
    right:-0rem; 
    transform: rotate(45deg) translateX(0%); 
  }
    50%{
    bottom:0.1rem;
    right:-0rem;
    transform: rotate(45deg) translateX(-115%); 
  }
    51%{
  }
    100%{
    bottom:0.1rem;
    right:-0rem;
    transform: rotate(45deg) translateX(-115%); 
  }
}

@keyframes more-anim3{
    0%{
    bottom:0.1rem;
    right:-0rem;
    
  transform: rotate(45deg) translateX(115%); 
  }
    50%{
    bottom:0.1rem;
    right:-0rem;
    transform: rotate(45deg) translateX(115%); 
  }
    51%{
    bottom:0.1rem;
    right:0;
    transform: rotate(45deg) translateX(115%); 
  }
    100%{
    bottom:0.1rem;
    right:-0rem;
    transform: rotate(45deg) translateX(0%); 
  }
}

/* ↑ここまで */


.projects_recruit_image {
  width: 28.1rem;
  height: 50rem;
}
.projects_recruit_image:nth-child(1 of .projects_recruit_image) img {
  object-position: 43%;
}
.projects_recruit_image:nth-child(2 of .projects_recruit_image) img {
  object-position: 20%;
}


@media screen and (max-width: 699.98px) {
  .projects_wrapper {
    width: 33.5rem;
    gap: 10rem;
    padding-bottom: 13.5rem;
    margin-top: 5rem;
  }

  /* ================================
  PROJECT-RECORD-SECTION
  ================================ */
  .projects_numbers_section {
    gap: 1.6rem;
  }

  .projects_section_title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 0.8rem;
  }

  .projects_record_box {
    width: 16.5rem;
    padding-bottom: 0.948rem;
  }

  .projects_record_container {
    row-gap: 1.2rem;
  }
  .projects_record_content {
    gap: 0.952rem;
  }

  .projects_record_img_box {
    height: 7.749rem;
  }

  .partners_logo_list {
    gap: 0.5rem;
  }
  .partners_logo_image {
    width: 16.5rem;
    height: 6rem;
  }

  .projects_record_num_box {
    margin-top: 0.002rem;
  }

  /* ================================
  PROJECT-RECRUIT-SECTION
  ================================ */
  .projects_recruit_section {
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .projects_recruit_content {
    width: 33.5rem;
    height: 34.6rem;
    padding: 2rem;
  }

  .projects_recruit_title {
    font-size: 2.4rem;
    line-height: calc(36 / 24);
    margin-bottom: 1.6rem;
  }

  .projects_recruit_image {
    width: 16.2rem;
    height: 29rem;
  }
/* 
  .projects_recruit_link {
    font-family: var(--Roboto);
    padding-right: 5.8rem;
    font-weight: 400;
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
  }

  .projects_recruit_link::after {
    width: 1.2rem;
    top: calc(50% - -1.2rem);
    transform-origin: calc(100% - 0.1rem) 50%;
  } */

  .more_text_link{
    font-family: var(--Roboto);
    font-weight: 400;
    font-size: 1.5rem;
    width:15rem;
  }
}