@charset "UTF-8";
/* =======================================

        mixin

======================================= */
/*************************
変数設定
*************************/
.mr-20 {
  margin-right: 20px;
}

.pink {
  position: relative;
  padding: 0 5px 2px 5px;
}
.pink:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: #FF7BAC;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-15deg);
  z-index: -1;
}

.black {
  position: relative;
  padding: 0 5px 2px 5px;
}
.black:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: #231815;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-15deg);
  z-index: -1;
}

.mainv {
  width: 100%;
  height: 1756px;
}
.mainv_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.mainv_wrap:before {
  content: "";
  width: 100%;
  height: 1719px;
  height: clamp(0px, 92.7604166667vw, 1781px);
  height: clamp(0px, 86.4583333333vw, 1660px);
  display: block;
  background: url(../img/top/mv.jpg) no-repeat top center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .mainv_wrap:before {
    height: clamp(0px, 206.9100391134vw, 767px);
    height: 1587px;
    background: url(../img/top/mv_sp.jpg) no-repeat center center/cover;
  }
}
@media screen and (max-width: 767px) {
  .mainv_wrap:before {
    height: clamp(0px, 183.3333333333vw, 715px);
    height: 578px;
  }
}
.mainv_btnWrap {
  position: absolute;
  top: 16.5%;
  right: 20.5%;
  z-index: 20;
}
@media screen and (max-width: 1708px) {
  .mainv_btnWrap {
    top: 13.5%;
  }
}
@media screen and (max-width: 1423px) {
  .mainv_btnWrap {
    top: 11.5%;
  }
}
@media screen and (max-width: 1280px) {
  .mainv_btnWrap {
    top: 9.5%;
  }
}
@media screen and (max-width: 1024px) {
  .mainv_btnWrap {
    top: 7.5%;
  }
}
@media screen and (max-width: 767px) {
  .mainv_btnWrap {
    top: 13%;
    right: 8%;
  }
}
/* .mainv_btnWrap:before {
  content: "";
  width: 348px;
  height: 248px;
  width: clamp(0px, 22.8125vw, 438px);
  height: clamp(0px, 16.25vw, 312px);
  display: block;
  background: url(../img/cmn/kirei_dai.png) no-repeat center center/cover;
  position: absolute;
  top: -43%;
  left: -12%;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .mainv_btnWrap:before {
    display: none;
  }
} */
.mainv_btn {
  width: 200px;
  height: 200px;
  width: clamp(0px, 10.4166666667vw, 200px);
  height: clamp(0px, 10.4166666667vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent linear-gradient(180deg, #0099ED 0%, #7159ED 100%) 0% 0% no-repeat padding-box;
  border-radius: 50%;
  position: relative;
  transition: 0.3s;
}
@media screen and (max-width: 1024px) {
  .mainv_btn {
    width: clamp(0px, 19.53125vw, 200px);
    height: clamp(0px, 19.53125vw, 200px);
  }
}
@media screen and (max-width: 1024px) {
  .mainv_btn {
    width: clamp(70px, 23.0769230769vw, 90px);
    height: clamp(70px, 23.0769230769vw, 90px);
  }
}
.mainv_btn:hover {
  transform: scale(1.05);
  opacity: 0.6;
  transition: 0.3s;
}
.mainv_btnText {
  color: #FFFFFF;
  font-size: clamp(10px, 1.25vw, 24px);
  font-weight: 700;
  text-align: center;
  line-height: 1.458;
}
@media screen and (max-width: 767px) {
  .mainv_btnText {
    font-size: clamp(10px, 3.5897435897vw, 14px);
  }
}

.quality {
  position: absolute;
  top: 59%;
  left: 47%;
  z-index: 30;
}
@media screen and (max-width: 1708px) {
  .quality {
    top: 53.2%;
  }
}
@media screen and (max-width: 1423px) {
  .quality {
    top: 45.2%;
  }
}
@media screen and (max-width: 1280px) {
  .quality {
    top: 40.2%;
  }
}
@media screen and (max-width: 1024px) {
  .quality {
    top: 30.2%;
  }
}
@media screen and (max-width: 767px) {
  .quality {
    top: 29.3%;
    left: 8%;
  }
}
.quality_wrap {
  width: 100%;
  max-width: 650px;
  color: #fff;
  text-align: right;
  position: relative;
}
@media screen and (max-width: 767px) {
  .quality_wrap {
    text-align: left;
  }
}
.quality_wrap:before {
  content: "";
  width: clamp(0px, 9.1145833333vw, 175px);
  height: clamp(0px, 37.5vw, 720px);
  display: block;
  background: url(../img/top/highquality.png) no-repeat center center/cover;
  position: absolute;
  top: -106%;
  right: -35%;
}
@media screen and (max-width: 1024px) {
  .quality_wrap:before {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .quality_wrap:before {
    width: clamp(0px, 24.1025641026vw, 94px);
    height: clamp(0px, 100vw, 390px);
    display: block;
    top: -32%;
    right: 3%;
  }
}
.quality_title {
  font-size: clamp(20px, 1.8229166667vw, 35px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.13em;
}
@media screen and (max-width: 767px) {
  .quality_title {
    font-size: clamp(18px, 6.4102564103vw, 25px);
    line-height: 1.6;
  }
}
.quality_text {
  font-size: clamp(10px, 0.9375vw, 18px);
  margin-top: 30px;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .quality_text {
    font-size: clamp(10px, 3.5897435897vw, 14px);
    margin-top: 25px;
    margin-right: 120px;
    margin-left: -5px;
    line-height: 2.26;
    letter-spacing: 0.1em;
  }
}

.interview {
  margin-top: -275px;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 1708px) {
  .interview {
    margin-top: -420px;
  }
}
@media screen and (max-width: 1423px) {
  .interview {
    margin-top: -590px;
  }
}
@media screen and (max-width: 1280px) {
  .interview {
    margin-top: -700px;
  }
}
@media screen and (max-width: 1024px) {
  .interview {
    margin-top: -930px;
  }
}
@media screen and (max-width: 767px) {
  .interview {
    margin-top: -760px;
  }
}
@media screen and (max-width: 767px) {
  .interview .cmn1380 {
    width: 100%;
  }
}
.interview_title {
  color: #fff;
  font-size: clamp(20px, 1.8229166667vw, 35px);
  font-style: italic;
  font-weight: 500;
  margin-left: 157px;
  line-height: 1.7;
  letter-spacing: 0.13em;
  position: relative;
}
@media screen and (max-width: 1708px) {
  .interview_title {
    margin-left: 205px;
  }
}
@media screen and (max-width: 1423px) {
  .interview_title {
    margin-left: 220px;
  }
}
@media screen and (max-width: 1280px) {
  .interview_title {
    margin-left: 150px;
  }
}
@media screen and (max-width: 767px) {
  .interview_title {
    font-size: clamp(20px, 6.4102564103vw, 25px);
    margin-left: 70px;
  }
}
.interview_title:before {
  content: "";
  width: clamp(0px, 3.6458333333vw, 70px);
  height: clamp(0px, 18.6458333333vw, 358px);
  display: block;
  background: url(../img/top/interview.png) no-repeat center center/contain;
  position: absolute;
  top: -52%;
  left: -11%;
  z-index: 10;
}
@media screen and (max-width: 1708px) {
  .interview_title:before {
    left: -11%;
  }
}
@media screen and (max-width: 1423px) {
  .interview_title:before {
    left: -10%;
  }
}
@media screen and (max-width: 1280px) {
  .interview_title:before {
    left: -10%;
  }
}
@media screen and (max-width: 767px) {
  .interview_title:before {
    width: clamp(0px, 9.7435897436vw, 38px);
    height: clamp(0px, 49.7435897436vw, 194px);
    top: -60%;
    left: -19%;
  }
}
.interview_list {
  margin: 75px auto 0;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .interview_list {
    display: none;
  }
}
/* .interview_itemWrap {
  position: relative;
  clip-path: polygon(0% 0, 100% 0, 67% 100%, 0 100%);
}
.interview_itemWrap:nth-of-type(1) {
  z-index: 40;
}
.interview_itemWrap:nth-of-type(1) .interview_imgName {
  bottom: 27%;
}
@media screen and (max-width: 767px) {
  .interview_itemWrap:nth-of-type(1) .interview_imgName {
    bottom: 8%;
  }
}
.interview_itemWrap:nth-of-type(2) {
  margin-top: 170px;
  margin-left: -257px;
  margin-top: 12.5%;
  margin-left: -19%;
  z-index: 30;
}
.interview_itemWrap:nth-of-type(2) .interview_imgName {
  bottom: 6%;
}
.interview_itemWrap:nth-of-type(3) {
  margin-top: -102px;
  margin-left: -150px;
  margin-top: -7%;
  margin-left: -11%;
  z-index: 20;
}
.interview_itemWrap:nth-of-type(3) .interview_imgName {
  bottom: 35%;
  right: 26%;
}
.interview_itemWrap:nth-of-type(4) {
  margin-top: 70px;
  margin-left: -249px;
  margin-top: 5.5%;
  margin-left: -18%;
  z-index: 10;
}
.interview_itemWrap:nth-of-type(4) .interview_imgName {
  bottom: 19%;
  right: 26%;
} */
/* .interview_imgName {
  width: 189px;
  width: clamp(0px, 9.84375vw, 189px);
  pointer-events: none;
  position: absolute;
  z-index: 50;
} */
.interview_item {
  display: block;
  /* clip-path: polygon(0% 0, 100% 0, 67% 100%, 0 100%); */
}
.interview_item:not(:last-of-type) {
  margin-right: 95px;
}
.interview_link {
  /* width: clamp(0px, 26.5625vw, 510px); */
  width: 197px;
  width: clamp(0px, 10.2604166667vw, 197px);
  display: block;
  position: relative;
  /* background: #333; */
  /* clip-path: polygon(33% 0, 100% 0, 67% 100%, 0 100%); */
}
.interview_img {
  opacity: 1;
  transition: opacity 0.3s;
}
.interview_img:hover {
  opacity: 0.6;
  transition: opacity 0.3s;
}
.interview .swiper .interview_itemWrap {
  clip-path: none;
}
.interview .swiper .interview_item {
  clip-path: none;
}
/* .interview .swiper .interview_imgName {
  width: clamp(0px, 38.7179487179vw, 151px);
} */
.interview .swiper .interview_link {
  /* width: clamp(0px, 86.9230769231vw, 339px); */
  width: clamp(0px, 51.2820512821vw, 200px);
  margin: 0 auto;
}
/* .interview .swiper .swiper-slide-next .interview_link {
  margin-right: 50px;
} */
.interview .swiper .swiper-slide-active .interview_link {
  margin-left: 110px;
  margin-left: 32%;
}
.interview_joblistWrap {
  margin-top: 189px;
  margin-left: -30px;
  position: relative;
}
@media screen and (max-width: 1708px) {
  .interview_joblistWrap {
    margin-top: 189px;
  }
}
@media screen and (max-width: 1423px) {
  .interview_joblistWrap {
    margin-top: 130px;
  }
}
@media screen and (max-width: 1280px) {
  .interview_joblistWrap {
    margin-top: 80px;
  }
}
@media screen and (max-width: 1024px) {
  .interview_joblistWrap {
    margin-top: 116px;
  }
}
.interview_joblistWrap:before {
  content: "";
  width: clamp(0px, 3.75vw, 72px);
  height: clamp(0px, 14.5833333333vw, 280px);
  display: block;
  background: url(../img/top/joblist.png) no-repeat center center/cover;
  position: absolute;
  top: -27%;
  right: 20%;
}
@media screen and (max-width: 1708px) {
  .interview_joblistWrap:before {
    right: 24%;
  }
}
@media screen and (max-width: 1423px) {
  .interview_joblistWrap:before {
    right: 27%;
  }
}
@media screen and (max-width: 1280px) {
  .interview_joblistWrap:before {
    right: 26%;
  }
}
@media screen and (max-width: 1024px) {
  .interview_joblistWrap:before {
    right: 26%;
  }
}
@media screen and (max-width: 767px) {
  .interview_joblistWrap:before {
    width: clamp(0px, 9.7435897436vw, 38px);
    height: clamp(0px, 37.9487179487vw, 148px);
    top: -18%;
    right: 4%;
    z-index: 10;
  }
}
/* .interview_joblistWrap:after {
  content: "";
  width: clamp(0px, 41.40625vw, 795px);
  height: clamp(0px, 29.4791666667vw, 566px);
  display: block;
  background: url(../img/cmn/kirei_dai.png) no-repeat center center/cover;
  position: absolute;
  top: 57%;
  right: -18%;
} */
/* @media screen and (max-width: 1708px) {
  .interview_joblistWrap:after {
    top: 87%;
    right: -8%;
  }
}
@media screen and (max-width: 1423px) {
  .interview_joblistWrap:after {
    top: 100%;
    right: -2%;
  }
}
@media screen and (max-width: 1280px) {
  .interview_joblistWrap:after {
    top: 110%;
    right: 4%;
  }
}
@media screen and (max-width: 767px) {
  .interview_joblistWrap:after {
    display: none;
  }
} */
/* .interview_joblistShadow {
  filter: drop-shadow(30px 40px 0px #006F9A);
} */
@media screen and (max-width: 767px) {
  .interview_joblistShadow {
    filter: drop-shadow(20px 27px 0px #006F9A);
  }
}
.interview_joblist {
  width: 100%;
  width: clamp(0px, 27.4479166667vw, 527px);
  margin: 0 auto;
  /* overflow: hidden; */
  /* clip-path: polygon(15% 0, 100% 0, 86% 100%, 0 100%); */
  position: relative;
}
@media screen and (max-width: 767px) {
  .interview_joblist {
    width: clamp(0px, 87.6923076923vw, 342px);
  }
}
.interview_joblist_link {
  width: 100%;
  display: block;
  position: relative;
  /* overflow: hidden; */
}
.interview_joblist_img {
  transition: transform 0.3s;
  position: relative;
}
.interview_joblist_img:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}
.interview_joblist_img:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: #006F9A;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.interview_joblist_text {
  font-size: clamp(20px, 1.6229166667vw, 35px);
  font-style: italic;
  font-weight: 500;
  color: #fff;
  line-height: 1.7;
  letter-spacing: 0.13em;
  position: absolute;
  top: 50%;
  left: 14%;
  transform: translateY(140%);
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .interview_joblist_text {
    font-size: clamp(20px, 6.4102564103vw, 25px);
    left: 14%;
  }
}

.swiper-container {
  display: none;
}
@media screen and (max-width: 767px) {
  .swiper-container {
    margin-top: 33px;
    display: block;
  }
}

.works {
  margin-top: 236px;
}
@media screen and (max-width: 1024px) {
  .works {
    margin-top: 200px;
  }
}
@media screen and (max-width: 767px) {
  .works {
    margin-top: 147px;
  }
}
.works_title {
  color: #fff;
  font-size: clamp(20px, 1.8229166667vw, 35px);
  font-style: italic;
  font-weight: 500;
  margin-left: 8px;
  line-height: 1.7;
  letter-spacing: 0.13em;
  position: relative;
}
@media screen and (max-width: 767px) {
  .works_title {
    font-size: clamp(20px, 6.4102564103vw, 25px);
    margin-left: 40px;
  }
}
.works_title:before {
  content: "";
  width: clamp(0px, 3.75vw, 72px);
  height: clamp(0px, 11.8229166667vw, 227px);
  display: block;
  background: url(../img/top/works.png) no-repeat center center/cover;
  position: absolute;
  top: -76%;
  left: -11%;
}
@media screen and (max-width: 1280px) {
  .works_title:before {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .works_title:before {
    display: block;
    width: clamp(0px, 9.7435897436vw, 38px);
    height: clamp(0px, 30.2564102564vw, 118px);
    top: -47%;
    left: -18%;
  }
}
.works_list {
  margin-top: 40px;
  display: flex;
}
.works_item {
  width: 100%;
  max-width: 330px;
  height: 244px;
  padding: 20px 10px 30px 10px;
  text-align: center;
  border: 1px solid #F3F3F3;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
@media screen and (max-width: 1280px) {
  .works_item {
    height: 200px;
  }
}
.works_item:not(:last-of-type) {
  margin-right: 45px;
}
.works_imgWrap {
  width: 60px;
  height: 90px;
  margin: 0 auto;
}
.works_item:nth-of-type(1) .works_imgWrap {
  width: 56px;
  height: 99px;
}
.works_item:nth-of-type(2) .works_imgWrap {
  width: 65px;
  height: 89px;
}
.works_item:nth-of-type(3) .works_imgWrap {
  width: 64px;
  height: 79px;
}
@media screen and (max-width: 767px) {
  .works_list {
    margin-top: 37px;
    flex-direction: column;
  }
  .works_item {
    max-width: 260px;
    height: 110px;
    margin: 0 auto 20px;
    padding: 25px 20px 25px 0px;
    flex-direction: row;
    align-items: center;
  }
  .works_item:not(:last-of-type) {
    margin-right: auto;
  }
  .works_item:nth-of-type(1) .works_imgWrap {
    width: 38px;
    height: 68px;
  }
  .works_item:nth-of-type(2) .works_imgWrap {
    width: 44px;
    height: 60px;
  }
  .works_item:nth-of-type(3) .works_imgWrap {
    width: 43px;
    height: 53px;
  }
}
.works_text {
  color: #fff;
  font-size: clamp(10px, 1.25vw, 24px);
  font-weight: 700;
  margin-top: 10px;
  /* margin-top: 26px;
  margin-left: 36px;
  line-height: 2.7; */
}
@media screen and (max-width: 767px) {
  .works_text {
    font-size: clamp(14px, 4.6153846154vw, 18px);
    margin-top: 0;
  }
}

.info {
  margin-top: 200px;
}
@media screen and (max-width: 1708px) {
  .info {
    margin-top: 200px;
  }
}
@media screen and (max-width: 1423px) {
  .info {
    margin-top: 200px;
  }
}
@media screen and (max-width: 1280px) {
  .info {
    margin-top: 160px;
  }
}
@media screen and (max-width: 1024px) {
  .info {
    margin-top: 160px;
  }
}
@media screen and (max-width: 767px) {
  .info {
    margin-top: 100px;
  }
}/*# sourceMappingURL=top.css.map */