@charset "UTF-8";

/*
トップページと職種を知るページの共通css
*/

/* 職種を知る共通 */
.common_job_head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.common_job_head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background-color: #397FC5;
  background-image: url(../img/common/bg/noise.png);
  background-size: 160px 160px;
  background-repeat: repeat;
  border-radius: 14.93px;
  clip-path: inset(5% 10% 5% 0% round var(--r));
  overflow: hidden;
  --r: 16px;
  transition: clip-path 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.8s;
  will-change: clip-path, opacity;
  opacity: 0;
}
.is_visible.common_job_head::before {
  clip-path: inset(0 0 0 0 round var(--r));
  opacity: 1;
}
div.common_job_head > .common_job_head_body {
  position: relative;
  width: 35%;
  color: var(--white);
  padding: 40px;
}
.common_job_head_body_title {
  font-size: 27px;
  font-weight: 700;
  line-height: calc(32 / 27);
  letter-spacing: 0.07em;
}
.common_job_head_img {
 width: calc(65% - 10px);
}
.common_job_head_body_text {
  margin: 1.95em 0 1.6em;
  font-size: 14px;
  letter-spacing: 0.0664285em;
}
.common_job_columns {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px;
}
.common_job_card {
  width: calc(50% - 5px);
  display: flex;
  flex-direction: column;
}
.common_job_card > div {
  flex-grow: 1;
}
.common_job_card_body {
  /* margin-top: 11px; */
  padding: 40px;
  border-radius: 14.93px;
  background-image: url(../img/common/bg/noise.png);
  background-size: 160px 160px;
  background-repeat: repeat;
  color: var(--white);
}
.common_job_card:nth-child(1) .common_job_card_body {
  background-color: #D86A59;
}
.common_job_card:nth-child(2) .common_job_card_body {
  background-color: #C4B15B;
}
.common_job_card:nth-child(3) .common_job_card_body {
  background-color: #9F93CC;
}
.common_job_card:nth-child(4) .common_job_card_body {
  background-color: #5EB3AD;
}
.common_job_card_body_title {
  font-size: 22.39px;
  font-weight: 700;
  line-height: calc(27 / 22.39);
  letter-spacing: 0.0835194283em;
}
.common_job_card_body_text {
  margin: 10px 0 15px;
  font-size: 14px;
  letter-spacing: 0.0664285em;
}
.common_job_card_body_btn {
  display: inline-flex;
  column-gap: 32px;
  padding-left: 4px;
}
.common_job_card_body_btn:not(.recruit_about_item_link):not(.common_page_linkBox):not(.common_page_anchor_item_btn):not(.jobDetails_linkBox)::after {
  width: 44.70px;
  height: 33.59px;
  background-color: var(--white);
}
.common_job_card_body_btn span:first-child {
  position: relative;
  display: inline-block;
  font-size: 14.93px;
  font-weight: 500;
  line-height: calc(18 / 14.93);
  letter-spacing: 0;
}
.common_job_card_body_btn span:first-child::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}
.common_job_card_body_btn span:last-child {
  width: 44.70px;
  height: 33.59px;
}
.common_job_card_img{
  aspect-ratio: 1.6/1;
}
/* 職種を知る共通ここまで */

/* JS関連 */
figure.common_job_js_reveal,
div.common_job_js_reveal {
  border-radius: 16px;
  overflow: hidden;
  gap: 10px;
}
div.common_job_js_reveal{
  margin-top: 10px;
}
figure.common_job_js_reveal > img,
div.common_job_js_reveal > div {
  width: 100%;
  height: 100%;
  display: block;
  clip-path: inset(5% 5% 5% 5%);
  --r: 16px;
  /* transition: clip-path 1.8s cubic-bezier(.2,.7,.2,1), opacity transform 1.8s;
  will-change: clip-path, opacity; */
  /* transition: clip-path 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.8s, transform 1.8s cubic-bezier(.2,.7,.2,1);
  will-change: clip-path, opacity, transform; */
  transition: clip-path 1.2s cubic-bezier(.2,.7,.2,1), opacity 1.2s, transform 1.2s cubic-bezier(.2,.7,.2,1);
  will-change: clip-path, opacity, transform;
  opacity: 0;
  transform: scale(0.9);  /* 追加：初期サイズを90%に */
  transform-origin: center;
}
/* 右：左を多めに切る → 右側の90%が見える */
/* figure.common_job_js_reveal.from_right img,
div.common_job_js_reveal.from_right > div {
  clip-path: inset(5% 0% 5% 10% round var(--r));
} */
/* 左：右を多めに切る → 左側の90%が見える */
/* figure.common_job_js_reveal.from_left img,
div.common_job_js_reveal.from_left > div {
  clip-path: inset(5% 10% 5% 0% round var(--r));
} */
/* 右上：左＋下を多めに切る → 右上寄りの90% */
/* figure.common_job_js_reveal.from_rightup img,
div.common_job_js_reveal.from_rightup > div {
  clip-path: inset(0% 0% 10% 10% round var(--r));
} */
/* 右下：左＋上を多めに切る → 右下寄りの90% */
/* figure.common_job_js_reveal.from_rightdown img,
div.common_job_js_reveal.from_rightdown > div {
  clip-path: inset(10% 0% 0% 10% round var(--r));
} */
/* 左上：右＋下を多めに切る → 左上寄りの90% */
/* figure.common_job_js_reveal.from_leftup img,
div.common_job_js_reveal.from_leftup > div {
  clip-path: inset(0% 10% 10% 0% round var(--r));
} */
/* 左下：右＋上を多めに切る → 左下寄りの90% */
/* figure.common_job_js_reveal.from_leftdown img,
div.common_job_js_reveal.from_leftdown > div {
  clip-path: inset(10% 10% 0% 0% round var(--r));
} */
figure.common_job_js_reveal.is_visible img,
div.common_job_js_reveal.is_visible > div {
  clip-path: inset(0 0 0 0 round var(--r));
  opacity: 1;
  transform: scale(1);  /* 追加：サイズを100%に戻す */
}
/* JS関連 */

@media(max-width: 1439px){
/* 職種を知る共通 */
.common_job_head::before {
  background-size: calc(160/var(--view-size)*100vw) calc(160/var(--view-size)*100vw);
  border-radius: calc(14.93/var(--view-size)*100vw);
  --r: calc(16/var(--view-size)*100vw);
}
div.common_job_head > .common_job_head_body {
  padding: calc(40/var(--view-size)*100vw);
}
.common_job_head_body_title {
  font-size: calc(27/var(--view-size)*100vw);
}
.common_job_head_body_text {
  font-size: calc(14/var(--view-size)*100vw);
}
.common_job_head_img {
  width: calc(65% - (10/var(--view-size)*100vw));
}
.common_job_columns {
  margin-top: calc(10/var(--view-size)*100vw);
  column-gap: calc(10/var(--view-size)*100vw);
  row-gap: calc(10/var(--view-size)*100vw);
}
.common_job_card {
  width: calc(50% - (5/var(--view-size)*100vw));
}
.common_job_card_body {
  /* margin-top: calc(11/var(--view-size)*100vw); */
  padding: calc(40/var(--view-size)*100vw);
  border-radius: calc(14.93/var(--view-size)*100vw);
  background-size: calc(160/var(--view-size)*100vw) calc(160/var(--view-size)*100vw);
}
.common_job_card_body_title {
  font-size: calc(22.39/var(--view-size)*100vw);
}
.common_job_card_body_text {
  margin: calc(10/var(--view-size)*100vw) 0 calc(15/var(--view-size)*100vw);
  font-size: calc(14/var(--view-size)*100vw);
}
.common_job_card_body_btn {
  column-gap: calc(32/var(--view-size)*100vw);
  padding-left: calc(4/var(--view-size)*100vw);
}
.common_job_card_body_btn:not(.recruit_about_item_link):not(.common_page_linkBox):not(.common_page_anchor_item_btn):not(.jobDetails_linkBox)::after {
  width: calc(44.70/var(--view-size)*100vw);
  height: calc(33.59/var(--view-size)*100vw);
  border-radius: calc(16/var(--view-size)*100vw);
}
.common_job_card_body_btn span:first-child {
  font-size: calc(14.93/var(--view-size)*100vw);
}
.common_job_card_body_btn span:first-child::after {
  bottom: calc(-12/var(--view-size)*100vw);
}
.common_job_card_body_btn span:last-child {
  width: calc(44.70/var(--view-size)*100vw);
  height: calc(33.59/var(--view-size)*100vw);
}
figure.common_job_js_reveal,
div.common_job_js_reveal {
  --r: calc(16/var(--view-size)*100vw);
  gap: calc(10/var(--view-size)*100vw);
}
div.common_job_js_reveal{
  margin-top: calc(10/var(--view-size)*100vw);
}
figure.common_job_js_reveal > img,
div.common_job_js_reveal > div {
  --r: calc(16/var(--view-size)*100vw);
}
/* 職種を知る共通ここまで */
}

@media(max-width: 768px){
.common_job_head::before {
  top: calc(243/var(--view-size)*100vw);
  width: 100%;
  height: calc(100% - (243/var(--view-size)*100vw));
  border-radius: calc(10/var(--view-size)*100vw);
}
.common_job_head {
  flex-direction: column;
}
div.common_job_head > .common_job_head_body {
  width: 100%;
  padding: calc(31/var(--view-size)*100vw) calc(20/var(--view-size)*100vw) calc(18/var(--view-size)*100vw) ;
  margin-top: calc(8/var(--view-size)*100vw);
  order: 1;
}
.common_job_head_body_title {
  font-size: calc(18/var(--view-size)*100vw);
  letter-spacing: 0.11111111111em;
}
.common_job_head_body_text {
  margin: 1em 0;
  letter-spacing: 0;
}
.common_job_head_img {
  order: 0;
  width: 100%;
}
.common_job_head_body_btn_wrapper {
  text-align: right;
}
.common_job_card_body_btn {
  column-gap: calc(15/var(--view-size)*100vw);
  padding-left: 0;
}
.common_job_columns {
  display: block;
  margin-top: 0;
}
.common_job_card_body {
  /* margin-top: calc(8/var(--view-size)*100vw); */
  padding: calc(29/var(--view-size)*100vw) calc(20/var(--view-size)*100vw) calc(18/var(--view-size)*100vw);
  border-radius: calc(10/var(--view-size)*100vw);
}
.common_job_card {
  width: 100%;
}
.common_job_card_img {
  margin-top: calc(20/var(--view-size)*100vw);
  height: calc(234/var(--view-size)*100vw);
}
figure.common_job_js_reveal > img, div.common_job_js_reveal > div {
  --r: calc(10 / var(--view-size) * 100vw);
}
.common_job_card_body_title {
  font-size: calc(18/var(--view-size)*100vw);
}
.common_job_card_body_text {
  margin: 1em 0;
  letter-spacing: 0;
}
.common_job_card_body_btn_wrapper {
  text-align: right;
}
.common_job_card_body_btn {
  column-gap: calc(19/var(--view-size)*100vw);
  padding-left: 0;
}
.common_job_card_body_btn span:first-child {
  font-size: calc(14/var(--view-size)*100vw);
}
.common_job_card_body_btn span:last-child {
  width: calc(48 / var(--view-size) * 100vw);
  height: calc(36 / var(--view-size) * 100vw);
}
.common_job_card_body_btn:not(.recruit_about_item_link):not(.common_page_linkBox):not(.common_page_anchor_item_btn):not(.jobDetails_linkBox)::after {
  display: block;
  width: calc(48 / var(--view-size) * 100vw);
  height: calc(36 / var(--view-size) * 100vw);
}
}