@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Gantari:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
/*==================================================
** recruit
==================================================*/
body {
  background: #fad7cf;
}

#header {
  background-color: transparent;
}

#recruitSec {
  position: relative;
}
#recruitSec::before {
  content: "";
  display: block;
  width: 100%;
  height: min(86.2096774194vw, 1069px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #f9eae6 0%, #f9eae6 5%, #fa8678 25%, #ea0a2a 50%, #ea0a2a 75%, #fa8678 83%, #f9eae6 92%, #f9eae6 100%) no-repeat center top/auto;
}
@media screen and (max-width: 767px) {
  #recruitSec::before {
    height: 353.3333333333vw;
    background: linear-gradient(180deg, #f9eae6 0%, #f9eae6 5%, #fa8678 25%, #ea0a2a 50%, #fa8678 75%, #f9eae6 95%, #f9eae6 100%);
  }
}

@keyframes slideRevealDiagonal {
  0% {
    /* 傾けた状態で、画像をすっぽり覆う位置からスタート */
    transform: skewX(20deg) translateX(0);
  }
  100% {
    /* 傾けた状態のまま、右へ完全に移動して見えなくなる */
    transform: skewX(20deg) translateX(100%);
  }
}
#mvl {
  padding-block: min(8.064516129vw, 100px) 150px;
}
@media screen and (max-width: 767px) {
  #mvl {
    padding-block: min(20vw, 75px) 26.6666666667vw;
  }
}
#mvl .mvl-wrap {
  padding-inline: 4.8% 4.1%;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-wrap {
    padding-inline: 0;
  }
}
#mvl .mvl-slider.swiper-mvl {
  width: 45.1%;
  position: relative;
  -webkit-mask-image: url("../img/recruit/mask-shape.svg");
  mask-image: url("../img/recruit/mask-shape.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  aspect-ratio: 500/400;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
#mvl .mvl-slider.swiper-mvl::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 150%;
  height: 100%;
  background-color: #ea0a2a;
  z-index: 10;
  animation: slideRevealDiagonal 0.8s ease-in-out forwards;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-slider.swiper-mvl {
    width: 100%;
    aspect-ratio: inherit;
  }
}
#mvl .mvl-txt {
  width: 45.7%;
  margin-top: min(8.064516129vw, 100px);
}
@media screen and (max-width: 767px) {
  #mvl .mvl-txt {
    width: 100%;
    margin-top: 25px;
  }
}
#mvl .mvl-txt .catch {
  width: 97.6%;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-txt .catch {
    width: 100%;
    padding-inline: 4.1%;
  }
}
#mvl .mvl-txt .txtbox {
  margin-top: min(4.8387096774vw, 60px);
}
@media screen and (max-width: 767px) {
  #mvl .mvl-txt .txtbox {
    margin-top: 40px;
    padding-inline: 4.1% 2.5%;
  }
}
#mvl .mvl-txt .txtbox p {
  font-size: min(1.4516129032vw, 1.8rem);
  font-weight: 500;
  line-height: 1.8;
  color: #f6f5f2;
}
@media screen and (max-width: 767px) {
  #mvl .mvl-txt .txtbox p {
    font-size: min(3.7333333333vw, 1.4rem);
  }
}
#mvl .mvl-txt .txtbox p + p {
  margin-top: 1em;
}
#mvl .swiper-slide {
  height: 100%;
}
#mvl .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#recruitCompany {
  padding-block: 120px 220px;
}
@media screen and (max-width: 767px) {
  #recruitCompany {
    padding-block: 80px 100px;
  }
}
#recruitCompany .arc-wrap {
  color: #fad7cf;
}
@media screen and (max-width: 767px) {
  #recruitCompany .arc-wrap {
    display: block;
    overflow: hidden;
  }
  #recruitCompany .arc-wrap::before {
    content: "";
    display: block;
    background: currentColor;
    border-radius: 100%;
    aspect-ratio: 1;
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  #recruitCompany .arc-top, #recruitCompany .arc-mid, #recruitCompany .arc-btm {
    display: none;
  }
}
#recruitCompany .company-heading {
  max-width: 395px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #recruitCompany .company-heading {
    max-width: min(77.3333333333vw, 290px);
  }
}
#recruitCompany .company-nav {
  width: 92.5%;
  margin: 120px auto 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8.5%;
}
@media screen and (max-width: 767px) {
  #recruitCompany .company-nav {
    width: 100%;
    margin: 44px auto 0;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
#recruitCompany .company-nav-a {
  display: block;
}
#recruitCompany .company-nav-a img {
  transition: all 0.4s ease-out;
  transform: scale(1);
}
#recruitCompany .company-nav-a :hover img {
  transform: scale(1.05);
}

/*==================================================
** recruitWork
==================================================*/
@keyframes progressGrow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#recruitWork {
  position: relative;
  padding-block: 120px;
}
@media screen and (max-width: 767px) {
  #recruitWork {
    padding-block: 64px 82px;
  }
}
#recruitWork::before {
  content: "";
  width: 100%;
  height: 1700px;
  background-image: linear-gradient(to top, #f5564f 0%, #faac9e 100%);
  position: absolute;
  left: 0px;
  top: -111px;
}
@media screen and (max-width: 767px) {
  #recruitWork::before {
    height: 384.8vw;
    top: -20.8vw;
  }
}
#recruitWork .work-list-li-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#recruitWork .work-list-li-slider .work-circle-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
#recruitWork .work-list-li-slider .work-circle-wrap .swiper-work {
  width: 100%;
  height: 100%;
}
#recruitWork .work-list-li-slider .work-circle-wrap .swiper-work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#recruitWork .work-list-li-slider .work-overlay-txt {
  position: relative;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: YakuHanJP, "Gantari", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 9.5vw, 66px);
  letter-spacing: 0.02em;
  line-height: 1;
  z-index: 10;
  margin-top: -12%;
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list-li-slider .work-overlay-txt {
    margin-top: -11%;
  }
}
#recruitWork .work-list-li-slider .swiper-pagination-work {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list-li-slider .swiper-pagination-work {
    margin-top: 20px;
  }
}
#recruitWork .work-list-li-slider .swiper-pagination-work .swiper-pagination-bullet {
  width: 44px;
  height: 4px;
  margin: 0 5px !important;
  border-radius: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list-li-slider .swiper-pagination-work .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    margin: 0 3px !important;
  }
}
#recruitWork .work-list-li-slider .swiper-pagination-work .swiper-pagination-bullet .work-progress-inner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
  z-index: 2;
}
#recruitWork .work-list-li-slider .swiper-pagination-work .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.3) !important;
}
#recruitWork .work-list-li-slider .swiper-pagination-work .swiper-pagination-bullet-active .work-progress-inner {
  animation: progressGrow 4s linear forwards;
}
#recruitWork .work-heading {
  max-width: 245px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-heading {
    max-width: min(48vw, 180px);
  }
}
#recruitWork .work-list {
  margin: 50px auto 0;
  max-width: 940px;
  gap: 32px 10.8%;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list {
    margin-top: 38px;
    max-width: 100%;
    gap: 50px 0;
  }
}
#recruitWork .work-list-li {
  width: 44.6%;
}
#recruitWork .work-list-li.work-list-li-slider {
  width: 67.6%;
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list-li.work-list-li-slider {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #recruitWork .work-list-li {
    width: 100%;
  }
}
#recruitWork .work-list-a {
  display: block;
}
#recruitWork .work-list-a img {
  transition: all 0.4s ease-out;
  transform: scale(1);
}
#recruitWork .work-list-a :hover img {
  transform: scale(1.05);
}

#recruitPeople {
  padding-block: 125px 225px;
  /* ホバーした時の動作 */
  /* オプション: 下の画像を少し薄くしたり隠したい場合（完全なクロスフェード） */
  /* ※上の画像が透過なしなら不要ですが、より自然に見せたい場合は以下も追加 */
}
@media screen and (max-width: 767px) {
  #recruitPeople {
    padding-block: 90px;
  }
}
#recruitPeople .arc-wrap {
  color: #fdc3b8;
}
@media screen and (max-width: 767px) {
  #recruitPeople .arc-wrap {
    display: block;
    overflow: hidden;
  }
  #recruitPeople .arc-wrap::before {
    content: "";
    display: block;
    background: currentColor;
    border-radius: 100%;
    aspect-ratio: 1;
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  #recruitPeople .arc-top, #recruitPeople .arc-mid, #recruitPeople .arc-btm {
    display: none;
  }
}
#recruitPeople .people-heading1 {
  max-width: 296px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #recruitPeople .people-heading1 {
    max-width: min(58.1333333333vw, 218px);
  }
}
#recruitPeople .people-heading2 {
  max-width: 238px;
  margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
  #recruitPeople .people-heading2 {
    max-width: min(49.6vw, 186px);
    margin-top: 30px;
  }
}
#recruitPeople .people-list {
  margin: 38px auto 0;
  max-width: 886px;
  display: grid;
  grid-template-columns: repeat(2, 44.3%);
  justify-content: space-between;
  gap: 100px 0;
  /* ホバー時の画像（絶対配置で上に重ねる） */
}
@media screen and (max-width: 767px) {
  #recruitPeople .people-list {
    margin-top: 40px;
    max-width: 74.9%;
    grid-template-columns: 1fr;
    gap: 50px 0;
  }
}
#recruitPeople .people-list-li.is-visible .people-list-a::after {
  animation: slideRevealDiagonal 0.6s ease-in-out forwards;
}
#recruitPeople .people-list-a {
  display: block;
  position: relative;
  opacity: 1 !important;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="786px" height="1009px"><path fill-rule="evenodd"  fill="black" d="M392.800,0.400 C176.084,0.400 0.400,176.084 0.400,392.800 L0.400,914.693 C0.400,966.445 42.354,1008.399 94.107,1008.399 L691.493,1008.399 C743.246,1008.399 785.200,966.445 785.200,914.693 L785.200,392.800 C785.200,176.084 609.517,0.400 392.800,0.400 Z"/></svg>') no-repeat center bottom/100% auto;
  overflow: hidden;
}
#recruitPeople .people-list-a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 150%;
  height: 100%;
  background-color: #ec9589;
  z-index: 10;
  transform: skewX(20deg) translateX(0);
}
#recruitPeople .people-list-pht {
  position: relative;
  overflow: hidden;
}
#recruitPeople .people-list-img {
  width: 100%;
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.8s ease; /* クロスフェードの時間と動き */
}
#recruitPeople .people-list-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比が違う場合でも枠に合わせる */
  opacity: 0; /* 最初は透明にして隠す */
  transition: opacity 0.4s ease; /* クロスフェードの時間と動き */
}
#recruitPeople .people-list-txt {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: rgba(245, 86, 79, 0.8);
  font-size: min(1.9438444924vw, 1.8rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 29px 16px 25px;
}
@media screen and (max-width: 767px) {
  #recruitPeople .people-list-txt {
    font-size: min(3.4666666667vw, 1.3rem);
    padding: 16px 8px 14px;
  }
}
#recruitPeople .people-list-a:hover .people-list-img-hover {
  opacity: 1; /* ホバー用画像を表示 */
}
#recruitPeople .people-list-a:hover .people-list-img {
  opacity: 0;
}

#recruitOther {
  padding-block: 115px 125px;
}
@media screen and (max-width: 767px) {
  #recruitOther {
    padding-block: 76px 84px;
  }
}
#recruitOther .other-nav {
  max-width: 920px;
  margin-inline: auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.3%;
}
@media screen and (max-width: 767px) {
  #recruitOther .other-nav {
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
#recruitOther .other-nav-img {
  width: 100%;
}
#recruitOther .other-nav-a {
  display: block;
}
#recruitOther .other-nav-a img {
  transition: all 0.4s ease-out;
  transform: scale(1);
}
#recruitOther .other-nav-a :hover img {
  transform: scale(1.05);
}