@charset "UTF-8";

body {
  --zindex-hero-img: 2;
  --zindex-hero-eyecatch: 3;

  background: #F0F0F0;
}

/**/
/*hero*/
/**/
#hero {
  width: 100%;
  max-height: 100vh;
  padding: 2.6vw;
  padding-bottom: .6vw;
}

#hero-inner {
  position: relative;
}

#hero-img {
  position: relative;
  z-index: var(--zindex-hero-img);

  width: 100%;
  height: calc(calc(100vh - 3.2vw) * 0.7);
  object-fit: cover;
}

#hero .page-title-wrap {
  position: absolute;
  left: 2vw;
  bottom: 2vw;
  z-index: var(--zindex-hero-eyecatch);

  color: #fff;
}

#hero .page-title {
  margin-bottom: 0.8rem;
  font-size: clamp(1.6rem, 3.3vw, 2rem);
}

#hero .page-title-ENG {
  font-size: clamp(4rem, 10vw, 7rem);
  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

/**/
/*main*/
/**/
.sec-title {
  margin-bottom: 6.4rem;

  font-size: clamp(2.2rem, 4vw, 3.7rem);
  font-weight: 600;
  text-align: center;
}

#bs-intro {
  display: grid;
  grid-template-columns: 1fr 25rem;
  column-gap: 12.8rem;
  width: min(112rem, 100%);
  margin-inline: auto;
}

#bs-intro .textContent {
  padding-top: 14.4rem;
  padding-bottom: 9.6rem;
}

#bs-intro .heading-wrap {
  margin-bottom: 8.8rem;
}

#bs-intro .preHeading {
  display: flex;
  align-items: center;
  padding-top: .2em;
  padding-left: 0.4rem;
  margin-bottom: 4.8rem;

  font-size: 3.6rem;
  font-weight: 700;
  font-family: poppins, sans-serif;
  font-style: normal;
  line-height: 1;

  border-left: solid 1px var(--cc);
}

#bs-intro .heading {
  font-size: 4.6rem;
  font-weight: 700;
}

#bs-intro .desc {
  margin-bottom: 6.4rem;
  line-height: 2;
}

#intro-swiper {
  height: 100%;

  overflow-y: hidden;
}

#intro-swiper .swiper-wrapper {
  flex-direction: column;
}

/**/
/*h2*/
/**/
#sec-sv {
  position: relative;

  --font-width: calc(1093px * var(--prism-rate));
  --font-height: calc(121px * var(--prism-rate));

  padding-top: 8rem;
  padding-bottom: 10.4rem;

  background: #fff;
}

#sec-sv .h2-wrap {
  margin-bottom: 12rem;
}

#sec-sv h2 .prism {
  background: url(../img/service_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}

#sec-sv .sec-sv-inner {
  width: min(112rem, 100%);
  margin-inline: auto;
}

#sec-sv .service-itemContainer>*+* {
  margin-block-start: 8.8rem;
}

#sec-sv .service-item .heading {
  margin-bottom: 1.6rem;

  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
}

#sec-sv .service-item .text {
  margin-bottom: 4.8rem;

  line-height: 1.6;
}

/**/
/*works*/
/**/
#sec-works {
  --font-width: calc(572.45px * var(--prism-rate));
  --font-height: calc(111px * var(--prism-rate));

  padding-top: 13.6rem;

  width: 100%;
  margin-bottom: 16rem;

  overflow-x: hidden;
}

#sec-works .h2-wrap {
  margin-bottom: 8rem;
}

#sec-works h2 .prism {
  background: url(../img/works_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}

/**/
/*FAQ*/
/**/
#sec-FAQ {
  position: relative;

  --font-width: calc(306px * var(--prism-rate));
  --font-height: calc(128px * var(--prism-rate));
  background: #333;

  padding: 4.8rem 0;
}

#sec-FAQ .h2-wrap {
  position: absolute;
  top: calc(var(--font-height) * -0.45);
}

#sec-FAQ h2 .prism {
  background: url(../img/FAQ_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}

#sec-FAQ .sec-title {
  color: #fff;
}

#sec-FAQ .FAQ-list {
  width: min(112rem, 100%);
  margin-inline: auto;
}

#sec-FAQ .FAQ-list>*+* {
  margin-block-start: 2.4rem;
}

#sec-FAQ .FAQ-list-item {
  background: #fff;
  border: solid 2px var(--cc);
  border-radius: 8px;
}

#sec-FAQ .FAQ-list-item input[type="checkbox"] {
  display: none;
}

#sec-FAQ .FAQ-list-item label {
  position: relative;

  display: block;
  padding: 2.4rem 10%;

  font-size: 1.8rem;
  font-weight: 600;
}

#sec-FAQ .FAQ-list-item label::before {
  content: 'Q';
  position: absolute;
  left: 2.5%;
  top: 50%;
  transform: translateY(-50%);

  font-size: 2.8rem;
  font-weight: 600;
  color: var(--cc);
}

#sec-FAQ .FAQ-list-item label::after {
  content: url(../img/FAQ-arrow.svg);
  position: absolute;
  right: 2.5%;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s all linear;
}

#sec-FAQ .FAQ-list-item:has(input[type="checkbox"]:checked) label::after {
  transform: translateY(-50%)rotate(180deg);
  transition: 0.3s all linear;
}

#sec-FAQ .FAQ-list-item .content {
  position: relative;
  line-height: 1.6;

  overflow: hidden;
  height: 0;
  max-height: 0;

  transition: 0.8s all linear;
  border-top: solid 2px transparent;
}

#sec-FAQ .FAQ-list-item .content .text {
  padding: 2.4rem 10%;
}

#sec-FAQ .FAQ-list-item:has(input[type="checkbox"]:checked) .content {
  height: auto;
  max-height: 80rem;
  transition: 0.8s all linear;

  border-top: solid 2px var(--cc);
}

#sec-FAQ .FAQ-list-item:has(input[type="checkbox"]:checked) .content::before {
  content: 'A';
  position: absolute;
  left: 2.5%;
  top: 1em;

  font-size: 2.8rem;
  font-weight: 600;
  color: #707070;
}

/**/
/*flow*/
/**/
#sec-flow {
  --font-width: calc(425px * var(--prism-rate));
  --font-height: calc(111px * var(--prism-rate));
  --flow-height: 5.6rem;

  padding-top: 13.6rem;
  margin-bottom: 19.6rem;
}

#sec-flow .h2-wrap {
  margin-bottom: 4.8rem;
}

#sec-flow h2 .prism {
  background: url(../img/flow_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}

#sec-flow .sec-flow-inner {
  width: min(112rem, 100%);
  margin-inline: auto;
}

#sec-flow .flow-nav {
  display: flex;
  align-items: flex-start;
}

/*flow-list*/
#sec-flow .flow-list-itemContainer {
  position: sticky;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#sec-flow .flow-list-itemContainer>*+* {
  margin-block-start: var(--flow-height);
}

#sec-flow .flow-list-item {
  position: relative;
  z-index: 2;

  display: block;
  width: 15.2rem;
  height: 15.2rem;
  padding-top: 3.2rem;
  aspect-ratio: 1/1;

  font-size: 1.5rem;
  color: var(--cc);
  text-align: center;

  border: solid 1px var(--cc);
  border-radius: 50%;

  transition: 0.3s all linear;
}

#sec-flow .flow-list-itemContainer>*+*::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--flow-height)*-1);
  z-index: -1;

  display: block;
  width: 1px;
  height: var(--flow-height);

  background: #C6C6C6;
}

#sec-flow .flow-list-item .flow-num {
  margin-bottom: 1.6rem;

  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

#sec-flow .flow-list-item .flow-num span {
  margin-left: 0.2em;
  font-size: 2.3rem;
}

/*flow-content*/
#sec-flow .flow-content-itemContainer {
  width: 100%;
  margin-left: 12rem;
}

#sec-flow .flow-content-item {
  width: 100%;
  min-height: 24rem;
  padding: 2.4rem .8rem;
  margin-bottom: 2.4rem;

  font-weight: 600;
}

#sec-flow .flow-content-item .flow-num {
  margin-bottom: 0.8rem;

  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--cc);
}

#sec-flow .flow-content-item .flow-num span {
  font-size: 2.5rem;
}

#sec-flow .flow-content-item .title {
  margin-bottom: 1.6rem;

  font-size: 2.5rem;
  font-weight: 600;
}

#sec-flow:has(#fci01.active) #fci-n-01,
#sec-flow:has(#fci02.active) #fci-n-02,
#sec-flow:has(#fci03.active) #fci-n-03,
#sec-flow:has(#fci04.active) #fci-n-04,
#sec-flow:has(#fci05.active) #fci-n-05,
#sec-flow:has(#fci06.active) #fci-n-06,
#sec-flow:has(#fci07.active) #fci-n-07,
#sec-flow:has(#fci08.active) #fci-n-08 {
  transform: scale(1.05);

  color: #fff;
  background: var(--cc);

  transition: 0.3s all linear;
}

/**/
/*gallery*/
/**/
.gallery {
  width: 100%;
  overflow-x: hidden;
  margin-bottom: 14.4rem;
}

/**/
/*recruit*/
/**/
#recruit-bar {
  --recruit-bar-height: 144px;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 79vw;
  height: var(--recruit-bar-height);
  padding: 2.4rem 0;
  padding-left: 21vw;
  padding-right: calc(var(--recruit-bar-height)*0.5);
  margin-bottom: 16rem;

  font-size: 2.2rem;

  background: var(--cc);
  border-radius: 0 calc(var(--recruit-bar-height)*0.5) calc(var(--recruit-bar-height)*0.5) 0;
}

#recruit-bar>p {
  font-weight: 600;
  color: #fff;
}

#recruit-bar .nmLink {
  font-size: 2.2rem;
  color: #fff;
}

#recruit-bar .nmLink .icon-arrow::before {
  border: solid 2px #fff;
}

.recruit-bar-img {
  position: absolute;
  left: 4.3%;
  top: -4.4rem;

  height: 8.8rem;
}

/**/
/*contact*/
/**/
#sec-contact {
  position: relative;

  --font-width: calc(986px * var(--prism-rate));
  --font-height: calc(111px * var(--prism-rate));

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16rem 0;
  margin-top: calc(var(--font-height) * 0.5);

  background: #333;
}

#sec-contact .h2-wrap {
  position: absolute;
  top: calc(var(--font-height) * -0.6);
}

#sec-contact .h2-wrap img {
  width: var(--font-width) !important;
  height: var(--font-height) !important;
}

#sec-contact h2 .prism {
  background: url(../img/contact_mask.svg) no-repeat left top/var(--font-width) var(--font-height);
}

#sec-contact .nmLink {
  font-size: 2.2rem;
  color: #fff;
}

#sec-contact .nmLink .icon-arrow::before {
  border: solid 2px #fff;
}

@media (hover) {

  #recruit-bar .nmLink:hover,
  #sec-contact .nmLink:hover {
    color: #ffffff97;
  }

  #recruit-bar a.nmLink:hover .icon-arrow {
    background: #66666633;
  }

  #sec-contact a.nmLink:hover .icon-arrow {
    background: #666;
  }
}

@media (max-width : 1200px) {
  #hero {
    padding: 1.2rem;
  }

  #hero-img {
    height: calc(calc(100vh - 4.8rem) * 0.38);
  }

  main {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  #bs-intro,
  #sec-sv,
  #sec-works,
  #sec-voice,
  #sec-FAQ,
  #sec-flow {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  #bs-intro {
    column-gap: 2.4rem;
  }

  #sec-sv .h2-wrap {
    margin-bottom: 6.4rem;
  }

  #sec-works {
    padding-top: 6.4rem;
  }

  #sec-contact {
    padding: 6.4rem 0;
  }

  /*flow-content*/
  #sec-flow .flow-content-itemContainer {
    margin-left: 2.4rem;
  }
  /**/
  /*recruit*/
  /**/
  #recruit-bar {
    width: 100%;
    height: auto;
    padding: 4rem 10vw;

    font-size: 2.2rem;
    border-radius: 0;
  }
}

@media (max-width : 599px) {}