@charset "utf-8";
.recruit_main_container{
  background-color: var(--LightGray);
}


/* fv */

.recruit_fv_container{
  width:100%;
  height:100vh;
}

.recruit_fv_wrapper{
  position:relative;
  width:100%;
  height:100%;
}

.recruit_fv_wrapper::before{
  position:absolute;
  content:"";
  bottom:0;
  background-image:url(../img/recruit_fv_effect.svg);
  width:100%;
  height:100vh;
  background-repeat: no-repeat;
  background-size:100% auto;
  background-position: center bottom;
  z-index:2;
}

.recruit_fv_wrapper::after{
  position:absolute;
  content:"";
  background-image:url(../img/front_fv_bottom.png);
  width:100%;
  height:15rem;
  z-index:2;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position: bottom center;
}

.swiper{
  height:100vh;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.recruit_fv_title_container{
  position:absolute;
  /* ↓fvが100vhで可変する為、％指定してます。問題あれば変更してください。 */
  bottom:20%;
  left:17.8rem;
  z-index:2;
  overflow:hidden;
}

.recruit_fv_title{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}

.bg_wrap {
  position: relative;
  display: inline-block;
  width:fit-content;
  overflow:hidden;
}

.bg_wrap::before {
  background: var(--White);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}

.bg_wrap::after{
  animation:bg 1.5s ease-out forwards;
  background: var(--Orange);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center; 
  z-index:3
}

.recruit_fv_title_inn {
  color: var(--Swamp);
  display: inline-block;
  font-size: 4rem;
  font-weight: 500;
  padding: 0.5rem 1.6rem;
  position: relative;
  z-index: 2;
  line-height:calc(48em /40);
}
 
@keyframes bg {
  0% {
    transform:translateX(0%);
  }
  100% {
    transform:translateX(100%);
  }
}

/* content */

.recruit_content_container{
  overflow:hidden;
  position:relative;
  padding-bottom:11rem;
}


/* why_work_with_us */

.recruit_why_work_with_us_container{
  margin-top:16rem;
  position:relative;
}

.recruit_why_work_with_us_container::before{
  content:"";
  background:url(../img/recruit_back_circle.svg);
  background-repeat: no-repeat;
  background-size:contain;
  position:absolute;
  width:48.194rem;
  height:48.194rem;
  top:45.5rem;
  right:-7rem;;
}

.recruit_why_work_with_us_wrapper{
  width:112rem;
  margin:0 auto;
  display:flex;
  gap:7.8rem;
}

.recruit_why_work_with_us_text_content{
  width:48.2rem;
}
.recruit_content_title{
  font-family: var(--Robot);
  font-weight:500;
  font-size:1.6rem;
  color:var(--Orange);
}

.recruit_content_sub_title{
  font-family: var(--NotoSans);
  letter-spacing:calc(0.027em /32);
  font-weight:500;
  font-size:3.2rem;
  color:var(--Swamp);
  display:inline-block;
  line-height:calc(27em /32);
  margin-top:0.8rem;
}


.recruit_why_work_with_us_text_items{
  margin-top:4rem;
}

.recruit_why_work_with_us_text_items:first-child{
  margin-top:2.4rem;

}



.recruit_content_num{
  font-family: var(--Robot);
  font-weight:400;
  font-size:1.4rem;
  color:var(--Swamp);
  padding-left:1.3rem;
  position:relative;
}

.recruit_content_num::before{
  content:"";
  width:0.5rem;
  height:2rem;
  background:var(--Orange);
  border-radius:9.9rem;
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

.recruit_content_text{
  font-family: var(--NotoSans);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:calc(0.027em /16);
  color:var(--Swamp);
  margin-top:0.5rem;
  line-height:calc(27em/16);
}

.recruit_content_sub_text{
  font-family: var(--NotoSans);
  font-weight:400;
  font-size:1.6rem;
  color:var(--Swamp);
  margin-top:1rem;
  line-height:calc(27em / 16);
}



.recruit_why_work_with_us_img_content{
  flex:1;
  display:flex;
  flex-direction:column;
  margin-top:1.4rem;
}

.recruit_why_work_with_us_img_box{
  overflow:hidden;
}

.recruit_why_work_with_us_img_box:nth-child(1){
  width:32.202rem;
  height:39.7rem;
  align-self:flex-end;
}

.recruit_why_work_with_us_img_box:nth-child(2){
  width:42.1rem;
  height:20.2rem;
  margin-top:2.1rem;
}

/* Request */
.recruit_request_container{
  margin-top:8rem;
  position:relative;
}

.recruit_request_container::before{
  content:"";
  background:url(../img/recruit_back_circle_02.svg);
  background-repeat: no-repeat;
  background-size:contain;
  position:absolute;
  width:48.194rem;
  height:48.194rem;
  top:22rem;
  left:0;
}

.recruit_request_container_wrapper{
  width:112rem;
  margin:0 auto;
  position:relative;
  z-index:1;

}



.recruit_request_sub_text{
  margin-top:2.4rem;
}


/* aboutページから引っ張って改修 */

.about_page_vision {
  margin-top:4rem;
}

.about_vision_box {
  width: 99rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.diamond-clip {
  width: 30rem;
  height: 30rem;
  object-fit: cover;
}
/* 全体の枠組み（画像のサイズに合わせる） */
.about_vision_box_img {
  position: relative;
  width: 33rem; /* 必要に応じてサイズを変更してください */
  height: 33rem; /* 必要に応じてサイズを変更してください */
  overflow: hidden;
}
.vision_title_br {
  display: none;
}
/* 画像のスタイル */
.item_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストを囲む黒背景のマスク */
.item_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  color: #fff; /* 文字色（白） */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  flex-direction: column;

  /* 最初は非表示（透明）にしておく */
  opacity: 1;
  /* ふんわり変化させるアニメーション（0.3秒） */
  transition: opacity 0.3s ease;
  object-fit: cover; /* 画像の比率を保つ */

  /* 上(50% 0%)、右(100% 50%)、下(50% 100%)、左(0% 50%) の点を結ぶ */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 枠（.item）にホバーしたとき、テキスト（.item_text）を表示する */
/* .about_vision_box_img:hover .item_text {
  opacity: 1;
  cursor: pointer;
} */
.vision_number {
  font-family:var(--BarlowCondensed);
  font-size: 6.4rem;
  font-weight: 700;
  color: var(--Orange);
  margin-bottom: 0.53rem;
  text-align: center;
  line-height:calc(81em /64);
}
.vision_text {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--White);
  text-align: center;
  line-height:calc(27em /16);
}



/* 全体のコンテナ（位置調整用） */
.about_vision_box_img {
  position: relative;
  width: 39rem; /* 画像のサイズに合わせる */
  cursor: pointer;

    /* 上(50% 0%)、右(100% 50%)、下(50% 100%)、左(0% 50%) の点を結ぶ */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  
}

/* 画像の基本設定 */
.about_vision_box_img img {
  width: 100%;
  display: block;
}

/*----------------------------------------*/

/* 画像とテキストを包む親要素 */
.about_vision_box_img {
  position: relative;
  width: 33rem; /* 画像のサイズに合わせる */
  height: 33rem;
  overflow: hidden;
}

.about_vision_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストを配置するマスク層（画像の上に重ねる） */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.4
  ); /* 文字を見えやすくするための背景黒透過 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2つのテキストの共通設定（完全に重ねる） */
.text-default,
.text-hover {
  position: absolute;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
  padding: 1rem;
  transition: opacity 0.3s ease; /* 0.3秒かけてふわっと切り替える */
}

/* --- ここからが切り替えの肝 --- */

/* 初期状態：ホバー後テキストは消しておく */
.text-hover {
  opacity: 0;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  line-height:calc(20em / 13);
}

/* ホバー時：もともとのテキストを消す */
.about_vision_box_img:hover .text-default {
  opacity: 0;
}

/* ホバー時：新しいテキストを表示する */
.about_vision_box_img:hover .text-hover {
  opacity: 1;
}
.new_vision_text {
  font-family:var(--NotoSans);
  width: 33rem;
  height: 33rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* aboutからの引用ここまで */

/* WANTEDLY */

.recruit_wantedly_container{
  width:112rem;
  margin:0 auto;
  margin-top:16rem;
}

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

.recruit_content_sub_text_wantedly{
  margin-top:2.4rem;
}

.recruit_wantedly_content_box{
  display:flex;
}

.more_text_link_box{
  margin-top:2.8rem;
  justify-content:flex-end;
  display:flex;
}

.more_text_link{
  position:relative;
  color:var(--Swamp);
  width:15rem;
  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;
}

.more_text_link::after{
content:'';
position:absolute;
bottom:0.1rem;
right:0;
width:1rem;
height:0.1rem;
background:var(--Swamp);
transform:rotate(35deg) scale(1,1);
transform-origin:right top;
transition:transform .3s ease-in-out .1s;
}

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

.more_text_link:hover::after{
  animation:more-anim2 .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.6rem;
    right:-0.15rem;;
    transform-origin:left top;
    transform:rotate(35deg) scale(1,1);
  }
    50%{
    bottom:0.6rem;
    right:-0.15rem;
    transform-origin:left top;
    transform:rotate(35deg) scale(0,1);
  }
    51%{
    bottom:0.2rem;
    right:0;
    transform-origin:right top;
    transform:rotate(35deg) scale(0,1);
  }
    100%{
    transform:rotate(35deg) scale(1,1);
  }
}



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


  .recruit_fv_wrapper::before{
    background-image:url(../img/recruit_fv_effect_sp.svg);
  }

  .recruit_fv_title_container{
    left:2rem;
    /* ↓デザインに合わせると実機で見た時かなり下だった為、front-pageと同じ数値を設定しています。 */
    bottom:25%;
  }

  .recruit_fv_title{
    gap:0.6rem;
  }

  .recruit_fv_title_inn{
    font-size:2.4rem;
    line-height:calc(29em / 24);
  }

  .recruit_fv_title_inn_sp{
    padding-bottom:0.3rem;
  }


/* content */

.recruit_content_container{
  padding-bottom:13.5rem;
}

/* why_work_with_us */

.recruit_why_work_with_us_container{
  margin-top:6.5rem;
}
.recruit_why_work_with_us_container::before{
  top:89.2rem;
  width:34.35rem;
  height:34.34rem;
  left:15rem;
}


.recruit_why_work_with_us_wrapper{
  flex-direction:column;
  gap:2.4rem;
  width:33.5rem;
}

.recruit_why_work_with_us_img_content{
  margin-top:0;
}



.recruit_why_work_with_us_text_content{
  width:100%;
}

.recruit_content_title{
  font-size:1.4rem;
}

.recruit_content_sub_title{
  font-size:2.4rem;
  line-height:calc(36em / 24);
}

.recruit_why_work_with_us_text_items:first-child{
  margin-top:1.6rem;
}

.recruit_why_work_with_us_text_items{
  margin-top:3.2rem;
}

.recruit_content_num{
  line-height:calc(20em /16);
}

.recruit_why_work_with_us_img_box:nth-child(1){
  width:19.9rem;
  height:24.5rem;
}

.recruit_why_work_with_us_img_box:nth-child(2){
  width:28.7rem;
  height:13.8rem;
  margin-top:1.5rem;
}

/* Request */
.recruit_request_container{
  margin-top:10rem;
}

.recruit_request_container::before{
  width:39.888rem;
  height:39.888rem;
  top:94rem;
  left:-12rem;
}

.recruit_request_container_wrapper{
  width:33.5rem;
}

.about_vision_box{
  flex-direction:column;
  width:31rem;
}

.about_vision_box_img{
  width:31rem;
  height:31rem;
}


.vision_number{
  margin-bottom:0.498rem;
}

.recruit_request_sub_text{
  margin-top:1.6rem;
}
/* Wantedly */

.recruit_wantedly_container{
  margin-top:10rem;
  width:33.5rem;
}

.recruit_wantedly_title{
  font-size:2.4rem;
  line-height:calc(28em /24);
}

.recruit_content_sub_text_wantedly{
  margin-top:1.6rem;
}

.recruit_wantedly_content_box{
  flex-direction:column;
}


}