@charset "UTF-8";

@media screen and (min-width: 768px) {
  .contentsInner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 160px 0 0 0;
  }
/* Main Visual    -------------*/
  .mainVis {
    margin-left: 160px;
  }
  .mv01 .slide-media {
    /* height: 66.6666vh; */
    height: 600px;
  }
  /* fadeIn text */
  .fadeinText .text_u {
    font-size: 560px;
    top: 165px;
    left: -37px;
  }
  .fadeinText .text_dot {
    width: 30px;
    height: 30px;
    top: 528px;
    left: 277px;
  }
  .fadeinText .text_is,
  .fadeinText .text_you {
    font-size: 72px;
    top: 502px;
  }
  .fadeinText .text_is {
    left: 355px;
  }
  .fadeinText .text_you {
    left: 452px;
  }
  .mainVis .copyTxt {
    font-size: 28px;
    top: 632px;
    left: 0;
    width: calc(100vw - 160px);
  }
  .mv01 {
    margin-bottom: 106px;
  }
  .mv01 .swiper-slide .img01 img {
    object-position: center bottom;
  }
  .mv01 .swiper-slide .img02 img {
    height: 161.43%;
    object-position: top -242px left -176px;
  }
  .mv01 .swiper-slide .img03 img {
    object-position: center;
  }
  .lineWrap {
    padding-top: 0;
  }
/* -----------------------------
    CONTENTS
-------------------------------*/
/* service     -------------*/
 .service.contentsInner h2 {
    margin-bottom: 72px;
 }
  .service {
    padding-top: 80px;
  }
  .serviceList {
    width: 848px;
    margin: 0 auto;
    padding: 0 24px;
    max-width: 100%;
  }
  .serviceList li {
    position: relative;
    margin-bottom: 96px;
  }
  .serviceList li:nth-child(even) {
    text-align: right;
  }
  .serviceList li:nth-child(even) .basicTxt{
    float: right;
    text-align: left;
  }
  .serviceList li:nth-child(2) {
    padding-bottom: 150px;
  }
  .serviceList li::before {
    font-size: var(--fontsize-heading-min-pc);
  }
  .serviceList li h3 {
    font-size: var(--fontsize-service-heading-pc);
    margin-bottom: 40px;
  }
  .serviceList li .imgWarp {
    position: absolute;
  }
  .serviceList li:nth-child(odd) .imgWarp {
    top: 48px;
    right: 0;
  }
  .serviceList li:nth-child(even) .imgWarp {
    top: 120px;
    left: 0;
  }
  .serviceList li .imgWarp img {
    width: 280px;
    max-width: 280px;
    height: auto;
  }
  .serviceList li .basicTxt {
    width: 60%;
    font-size: var(--fontsize-notes-pc);
  }
  /* people     -------------*/
  .peopleMain .btnWrap {
    top: 246px;
    left: 730px;
    width: 260px;
    height: 60px;
  }
  .peopleMain img {
    width: 1100px;
    height: auto;
    margin: 84px auto 0 auto;
  }
  /* company     -------------*/
  .companyMain {
    position: relative;
    padding-bottom: 76px;
  }
  .companyMain .pcImgWrap {
    display: flex;
    justify-content: center;
  }
  .companyMain .imgWrap {
    width: 440px;
    height: 404px;
    margin: 16px 0 0 -20px;
  }
  .company .imgWrap .imgFit {
    width: 440px;
    height: 404px;
    margin: 0;
  }
  .company .imgWrap .txt5 {
    top: 99px;
    left: -24px;
    right: auto;
  }
  .company .imgWrap .txtU {
    top: 188px;
    left: -128px;
    right: auto;
  }
  .company .imgWrap .txt241 {
    font-size: 180px;
    top: -41px;
    left: 165px;
    right: auto;
  }

  .companyMain .imgWrap.spHide {
    width: 300px;
    height: 300px;
    margin: -30px 0 0 140px;
  }
  .company .imgWrap .txt10 {
    font-size: 60px;
    top: -30px;
    right: 14px;
    opacity: 0.2;
  }
  .company .imgWrap .txt65 {
    font-size: 160px;
    bottom: -27px;
    left: -18px;
    right: auto;
    color: var(--color-base);
    opacity: 0.3;
  }
  .company .imgWrap.spHide .imgFit {
    width: 300px;
    height: 300px;
    margin: 0;
  }
  .company .imgWrap.spHide .imgFit img.img02 {
    width: 100%;
    height: auto;
  }
  .company .btnWrap {
    position: absolute;
    top: 416px;
    left: 605px;
  }

  /* work environment    -------------*/
  .contentsInner.workEnv {
    max-width: none;
  }
  .workEnv p {
    margin-bottom: 32px;
  }
  .workEnv .innerSlide.swiper {
    margin-bottom: 40px;
    height: 240px;
    margin-left: 0;
  }
  .workEnv .innerSlide.swiper .slideWrap div {
    width: 240px;
    height: 240px;
  }
  .workEnv .basicTxt.alighLeft {
    text-align: center;
    font-size: var(----fontsize-notes-pc);
  }
  
  .workEnv .pcBtnWrap {
    display: flex;
    justify-content: center;
  }
  .workEnv .pcBtnWrap .btnWrap {
    margin: 0 12px;
  }

  /* recruitment     -------------*/
  .contentsInner.recruitment {
    max-width: none;
    margin-top: 160px;
    padding-top: 68px;
  }
  .recruitment {
    background: linear-gradient(to bottom, transparent 80%, var(--color-theme-darken) 80%);
  }
  .circleBg {
    width: 109vw;
    height: 109vw;
  }
  .recruitment .basicTxt {
    margin-bottom: 40px;
  }
  .recruitment .pcImgWrap {
    display: flex;
    justify-content: center;
  }
  .recruitment .imgWarp {
    width: 460px;
    height: 306px;
    max-width: none;
    max-height: none;
    margin: 0 8px 32px 8px;
  }
  .recruitment .imgWarp img {
    width: 678px;
    height: auto;
    object-position: -119px -91px;
  }
  .recruitment .imgWarp.spHide img {
    object-fit: unset;
    width: 100%;
    height: auto;
    object-position: 0 0;
  }
  .recruitment .btnWrap + .basicTxt {
    margin-bottom: 16px;
  }
  .recruitment .pcImgWrap + .btnWrap {
    margin-bottom: 48px;
  }
  .recruitment .guidelineInner {
    background-size: 667px auto;
    padding-bottom: 156px;
    margin: 0;
  }
  .entryBlock {
    bottom: 148px
  }
  .entryBlock .ereaTxt {
    font-size: 22px;
    line-height: 2;
  }
  .contentsInnerWrap {
    padding-bottom: 352px;
}
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  /* people     -------------*/
  .peopleMain {
    max-width: 1100px;
    width: 100%;
  }
  .peopleMain .btnWrap {
    left: auto;
    right: calc(30vw - 200px);
    top: calc(20vw + 20px);
  }
  .peopleMain img {
    width: 100%;
  }
  .company .btnWrap {
    left: calc(43vw + 140px);
  }
}

@media screen and (min-width: 1100px) {
  .serviceList li .basicTxt {
    width: 480px;
  }
}

@media screen and (min-width: 1440px) {
  .mv01 .swiper-slide .img01 img {
    object-position: center -36vw;
    width: 103%;
    height: auto;
  }
}

@media screen and (min-width: 1441px) {
  .mv01 .swiper-slide .img02 img,
  .mv01 .swiper-slide .img03 img {
    object-position: center;
    height: 100%;
  }
}
@media screen and (min-width: 1920px) {
  .mv01 .swiper-slide .img03 img {
    object-position: center -20vw;
  }
}