@charset "UTF-8";
/* CSS Document */
#header {
  width: calc(100% - 20%);
}
#header .jbLogo {
  display: none;
}
#header .headerWrap {
  width: 100%;
}
@media only screen and (max-width:749px) {
  #header {
    width: auto;
  }
  #header .headerWrap {
    width: auto;
    height: 55px;
  }
}
/* ---------- MV ---------- */
.mainVisual {
  padding: 0 3%;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.mainVisual::after {
  content: "";
  width: 100%;
  height: 24%;
  background: #d7d7d7;
  position: absolute;
  left: 0;
  bottom: 0;
}
.mainVisual .headSlider,
.mainVisual .headTxtSlider {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.mainVisual .headTxtSlider {
  position: absolute;
  height: 100%;
  z-index: 5;
  top: 0;
}
.mainVisual .headTxtSlider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
}
.mainVisual .headTxtSlider .txtWrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.mainVisual .mv {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow: hidden;
}
.mainVisual .swiper-slide-active .mv,
.mainVisual .swiper-slide-duplicate-active .mv,
.mainVisual .swiper-slide-prev .mv {
  animation: zoomUp 7s linear 0s normal both;
}
@keyframes zoomUp {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.mainVisual .swiper-slide img {
  height: auto;
  width: 100%;
}
.mainVisual .txt01 {
  position: absolute;
  z-index: 4;
  top: 15.3%;
  top: max(15.3%, 110px);
  right: 8.4%;
  width: 1.6%;
  width: max(1.7%, 15px);
  max-width: 30px;
}
.mainVisual .txt02 {
  position: absolute;
  width: 22.7%;
  left: 14.5%;
  margin-top: 15.8%;
}
.mainVisual .challenge {
  position: absolute;
  z-index: 4;
  width: 44.3%;
  left: 7.6%;
  margin-top: 8.6%;
}
@media only screen and (max-width:749px) {
  .mainVisual {
    padding: 0 6.5%;
  }
  .mainVisual::after {
    height: 14%;
  }
  .mainVisual .txt01 {
    top: 15%;
    right: 0;
    left: 15%;
    width: 3.7%;
    max-width: none;
  }
  .mainVisual .txt02 {
    width: 41.5%;
    left: 20.6%;
    bottom: 22.8%;
    margin-top: 0;
  }
  .mainVisual .challenge {
    width: 86.8%;
    left: 8.5%;
    bottom: 22.8%;
    margin-top: 0;
  }
}
/* ---------- NEWS ---------- */
.news {
  padding: 3% 6%;
  background: #d7d7d7;
}
.news dl {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.news dt {
  letter-spacing: 3px;
  font-size: 1.6rem;
  font-weight: bold;
}
.news dd {
  font-size: 1.5rem;
  display: flex;
  margin-left: 28px;
  padding: 4px 0 4px 38px;
  border-left: 1px solid #212121;
}
.news dd time {
  margin-right: 32px;
  font-weight: 500;
}
@media only screen and (max-width:749px) {
  .news {
    padding: 6% 3.5%;
    opacity: 0.5;
  }
  .news dt {
    letter-spacing: 1px;
    font-size: 3.06vw;
  }
  .news dd {
    font-size: 2.93vw;
    margin-left: 4vw;
    padding: 0.7vw 0 0.7vw 5vw;
  }
  .news dd time {
    margin-right: 4vw;
  }
}
/* ---------- Main Contents ---------- */
.mainContents h2 {
  max-width: 1600px;
  margin: 0 auto 34px;
  font-size: 2rem;
  font-size: clamp(1.8rem,1.04vw,2rem);
}
.mainContents h2 span {
  display: block;
  font-size: 8.5rem;
  font-size: clamp(6rem,4.42vw,8.5rem);
  line-height: 1;
  letter-spacing: 4px;
  margin-bottom: 10px;
}
@media only screen and (max-width:749px) {
  .mainContents h2 {
    max-width: none;
    text-align: center;
    margin: 0 auto 8.2%;
    font-size: 3.06vw;
  }
  .mainContents h2 span {
    font-size: 11.33vw;
    letter-spacing: 3px;
    margin-bottom: 2%;
  }
}
/* ---------- START HERE ---------- */
.startHere {
  padding: 8% 6% 3.6%;
  position: relative;
}
.startHere::after {
  content: "";
  width: 95.3%;
  height: 26.4%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
}
.startHere h2 span {
  color: #c5a377;
}
.startHere .details .swiper {
  overflow: visible;
}
.startHere .details .swiper-wrapper {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}
.startHere .details .box {
  text-align: center;
  margin-left: 5%;
  width: 40.6%;
}
.startHere .details .box:first-of-type {
  margin: 0;
}
.startHere .details .box a {
  display: block;
  position: relative;
}
.startHere .details .box h3 {
  font-size: 1.8rem;
  font-size: clamp(1.5rem,0.93vw,1.8rem);
  padding: 3.9% 0 4px;
  position: relative;
  display: inline-block;
}
.startHere .details .box h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #c5a377;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.startHere .details .box a:hover h3::after {
  transform: scale(1, 1);
}
.startHere .boxArrow::before {
  background: rgba(197, 163, 119, 0.75);
}
.startHere .square01 {
  width: 5.17vw;
  left: 4.1%;
  bottom: 22.2%;
}
.startHere .square02 {
  width: 3.8vw;
  right: 10%;
  bottom: -3.9%;
}
.startHere .square span {
  background: #c5a377;
}
@media only screen and (max-width:749px) {
  .startHere {
    padding: 18.5% 0 8%;
  }
  .startHere::after {
    width: 87.3%;
    height: 25%;
  }
  .startHereWrap {
    width: 100%;
    overflow: hidden;
  }
  .startHere .details {
    width: 67%;
    margin: 0 auto;
    position: relative;
  }
  .startHere .details .swiper-wrapper {
    justify-content: flex-start;
  }
  .startHere .details .box {
    margin-left: 0;
    width: 100%;
  }
  .startHere .details .box h3 {
    font-size: 3.73vw;
  }
  .startHere .boxArrow::before,
  .startHere .boxArrow::after {
    display: none;
  }
  .startHere .details .swiper-button-prev,
  .startHere .details .swiper-button-next {
    background: rgba(197, 163, 119, 0.75);
  }
  .startHere .square01 {
    width: 3.8vw;
    left: 6.2%;
    top: 26.7%;
    bottom: auto;
  }
  .startHere .square02 {
    width: 9.03vw;
    right: 20.1%;
    bottom: -3.2%;
  }
}
/* ---------- START HERE ---------- */
.aboutJbcc {
  padding: 7.2% 6% 3.8%;
  position: relative;
}
.aboutJbcc::after {
  content: "";
  width: 95.3%;
  height: 26.4%;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
}
.aboutJbcc h2 {
  text-align: right;
}
.aboutJbcc h2 span {
  color: #c5c577;
}
.aboutJbcc .details .swiper {
  overflow: visible;
}
.aboutJbcc .details .swiper-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.aboutJbcc .details .box {
  width: 32%;
  text-align: center;
}
.aboutJbcc .details .box:last-of-type {
  width: 26.3%;
  display: flex;
  flex-direction: column;
}
.aboutJbcc .details .box a {
  display: block;
  position: relative;
}
.aboutJbcc .details .box h3 {
  font-size: 1.8rem;
  font-size: clamp(1.5rem,0.93vw,1.8rem);
  padding: 3.9% 0 4px;
  position: relative;
  display: inline-block;
}
.aboutJbcc .details .box h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #c5c577;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.aboutJbcc .details .box a:hover h3::after {
  transform: scale(1, 1);
}
.aboutJbcc .boxArrow::before {
  background: rgba(197, 197, 119, 0.75);
}
.aboutJbcc .details .box .subBox:last-of-type {
  margin-top: 14%;
}
.aboutJbcc .details .box .subBox .boxArrow::before,
.aboutJbcc .details .box .subBox .boxArrow::after {
  bottom: 12.4%;
  right: -9%;
}
.aboutJbcc .square01 {
  width: 2.15vw;
  left: 12%;
  top: 22.9%;
}
.aboutJbcc .square02 {
  width: 4.15vw;
  right: 25.7%;
  bottom: -5%;
}
.aboutJbcc .square span {
  background: #c5c577;
}
@media only screen and (max-width:749px) {
  .aboutJbcc {
    padding: 19.2% 0 2%;
    position: relative;
  }
  .aboutJbcc::after {
    width: 94%;
    height: 25%;
  }
  .aboutJbccWrap {
    width: 100%;
    overflow: hidden;
  }
  .aboutJbcc h2 {
    text-align: center;
  }
  .aboutJbcc .details {
    width: 67%;
    margin: 0 auto;
    position: relative;
  }
  .aboutJbcc .details .swiper-wrapper {
    justify-content: flex-start;
  }
  .aboutJbcc .details .box {
    width: 100%;
  }
  .aboutJbcc .details .box:last-of-type {
    width: 100%;
  }
  .aboutJbcc .details .box .subBox:last-of-type {
    margin-top: 8%;
  }
  .aboutJbcc .details .box h3 {
    font-size: 3.73vw;
  }
  .aboutJbcc .boxArrow::before,
  .aboutJbcc .boxArrow::after {
    display: none;
  }
  .aboutJbcc .details .swiper-button-prev,
  .aboutJbcc .details .swiper-button-next {
    background: rgba(197, 197, 119, 0.75);
  }
  .aboutJbcc .square01 {
    width: 3.8vw;
    left: auto;
    right: 10.3%;
    top: 25.9%;
  }
  .aboutJbcc .square02 {
    width: 9.03vw;
    right: auto;
    left: 20.8%;
    bottom: -3%;
  }
}
/* ---------- JOB FIELD ---------- */
.jobField {
  padding: 7.2% 6% 6.9%;
  position: relative;
}
.jobField::after {
  content: "";
  width: 100%;
  height: 40.5%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
}
.jobField h2 {
  text-align: center;
  margin-bottom: 56px;
}
.jobField h2 span {
  color: #77c58b;
}
.jobField .details {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.jobField .details .box {
  width: 19%;
  background: #fff;
  position: relative;
}
.jobField .details .box .boxWrap {
  position: relative;
}
.jobField .details .box a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: max(15.9vw,160px);
  max-height: 304px;
  background: linear-gradient(45deg,  rgba(119,197,139,1) 33%,rgba(119,197,139,0.5) 100%);
}
.jobField .details .box a:hover {
  background: #fff;
}
.jobField .details .box::before,
.jobField .details .box::after {
  content: "";
  position: absolute;
  background: #77c58b;
  width: 0;
  height: 4px;
  transition: all 0.2s linear;
  z-index: 3;
}
.jobField .details .box::before {
  right: 0;
  bottom: 0;
}
.jobField .details .box::after {
  left: 0;
  top: 0;
}
.jobField .details .box .boxWrap::before,
.jobField .details .box .boxWrap::after {
  content:"";
  position: absolute;
  background: #77c58b;
  width: 4px;
  height: 0;
  transition: all 0.1s linear;
  z-index: 3
}
.jobField .details .box .boxWrap::before {
  left: 0;
  bottom: 0;
}
.jobField .details .box .boxWrap::after {
  right: 0;
  top: 0;
}
.jobField .details .box:hover::before,
.jobField .details .box:hover::after {
  width: 100%;
}
.jobField .details .box:hover::after {
  transition-delay: 0s;
}
.jobField .details .box:hover::before {
  transition-delay: 0.3s;
}
.jobField .details .box:hover .boxWrap::before,
.jobField .details .box:hover .boxWrap::after {
  height: 100%;
}
.jobField .details .box:hover .boxWrap::before {
  transition-delay: 0.5s;
}
.jobField .details .box:hover .boxWrap::after {
  transition-delay: 0.2s;
}
.jobField .details .box .cat {
  max-width: 90px;
  padding: 8px;
  width: 100%;
  line-height: 1;
  text-align: center;
  font-size: 1.4rem;
  font-size: clamp(1.2rem,0.72vw,1.4rem);
  background: rgba(255, 255, 255, 0.75);
  color: #77c58b;
  position: absolute;
  left: 0;
  top: 0;
  transition: all .25s ease-in;
}
.jobField .details .box a:hover .cat {
  background: rgba(119, 197, 139, 0.75);
  color: #fff;
}
.jobField .details .box h3 {
  text-align: center;
  font-size: 1.7rem;
  font-size: clamp(1.4rem,0.88vw,1.7rem);
  color: #fff;
  transition: all .25s ease-in;
}
.jobField .details .box a:hover h3 {
  color: #77c58b;
}
.jobField .details .box a::after {
  right: 0;
  bottom: 0;
  right: 6%;
  bottom: 5%;
}
.jobField .details .box a:hover::after {
  background: #77c58b;
}
.jobField .square01 {
  width: 1.73vw;
  right: 15.4%;
  top: 16.5%;
}
.jobField .square02 {
  width: 2.53vw;
  left: 22.5%;
  top: 27%;
}
.jobField .square03 {
  width: 2.53vw;
  right: 20.9%;
  bottom: 0;
}
.jobField .square04 {
  display: none;
}
.jobField .square span {
  background: #77c58b;
}
@media only screen and (max-width:749px) {
  .jobField {
    padding: 19.4% 6% 6.9%;
  }
  .jobField::after {
    height: 46.4%;
  }
  .jobField h2 {
    margin-bottom: 9.4%;
  }
  .jobField .details {
    flex-wrap: wrap;
  }
  .jobField .details .box {
    width: 46.5%;
    margin-bottom: 7%;
  }
  .jobField .details .box a {
    height: 40.8vw;
    max-height: none;
  }
  .jobField .details .box .cat {
    max-width: 16.66vw;
    padding: 1.5vw;
    font-size: 2.53vw;
  }
  .jobField .details .box h3 {
    font-size: 3.46vw;
  }
  .jobField .square01 {
    width: 6.48vw;
    right: 4.8%;
    top: 5.6%;
  }
  .jobField .square02 {
    width: 4.43vw;
    left: 8.5%;
    top: 18.4%;
  }
  .jobField .square03 {
    width: 4.43vw;
    right: 20.9%;
    bottom: 21%;
  }
  .jobField .square04 {
    display: block;
    width: 6.48vw;
    right: 34.9%;
    bottom: 12.8%;
  }
}
/* ---------- JBCC STYLE ---------- */
.jbccStyle {
  padding: 0.7% 6% 5.8%;
  position: relative;
  background: #fff;
}
.jbccStyle h2 {
  text-align: center;
  margin-bottom: 56px;
}
.jbccStyle h2 span {
  color: #7799c5;
}
.jbccStyle .details {
  display: flex;
  max-width: 1270px;
  margin: 0 auto;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.jbccStyle .details .imgBox {
  width: 48%;
}
.jbccStyle .details .imgBox a {
  display: block;
}
.jbccStyle .details .imgBox a:hover {
  opacity: 0.6;
}
.jbccStyle .details figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jbccStyle .details figcaption {
  font-size: 1.8rem;
  font-size: clamp(1.5rem,0.93vw,1.8rem);
  line-height: 1;
  position: absolute;
  z-index: 3;
  color: #fff;
}
.jbccStyle .details ul {
  width: 47.3%;
  border-top: 1px solid #212121;
  background: #fff;
}
.jbccStyle .details li {
  border-bottom: 1px solid #212121;
}
.jbccStyle .details li a {
  font-size: 1.8rem;
  font-size: clamp(1.5rem,0.93vw,1.8rem);
  display: block;
  padding: 4.9% 62px 4.9% 7.3%;
  position: relative;
  display: flex;
}
.jbccStyle .details li a span {
  font-size: 2.5rem;
  font-size: clamp(2.2rem,1.3vw,2.5rem);
  color: #7799c5;
  font-weight: 300;
  margin-right: 22px;
}
.jbccStyle .details li a p {
  padding: 4px 0;
  display: inline-block;
  position: relative;
}
.jbccStyle .details li a p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #7799c5;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.jbccStyle .details li a:hover p::after {
  transform: scale(1, 1);
}
.jbccStyle .details li .circleArrow::before {
  background: #7799c5;
  right: 5.5%;
}
.jbccStyle .details li .circleArrow::after {
  right: 5.5%;
}
.jbccStyle .square01 {
  width: 1.73vw;
  left: 24.7%;
  top: 0.4%;
}
.jbccStyle .square02 {
  width: 2.53vw;
  left: 8.8%;
  top: 18.5%;
}
.jbccStyle .square03 {
  width: 2.53vw;
  right: 9.3%;
  top: 33.7%;
}
.jbccStyle .square04 {
  width: 2.53vw;
  left: 36.4%;
  bottom: 20.5%;
}
.jbccStyle .square05 {
  width: 1.06vw;
  right: 6%;
  bottom: 15.3%;
}
.jbccStyle .square06 {
  width: 1.73vw;
  left: 16%;
  bottom: 9%;
}
.jbccStyle .square span {
  background: #7799c5;
}
@media only screen and (max-width:749px) {
  .jbccStyle {
    padding: 5.7% 0 16.5%;
  }
  .jbccStyle h2 {
    margin-bottom: 9%;
  }
  .jbccStyle .details {
    display: block;
    max-width: none;
  }
  .jbccStyle .details .imgBox {
    width: 100%;
  }
  .jbccStyle .details figcaption {
    font-size: 3.46vw;
  }
  .jbccStyle .details ul {
    width: 88%;
    margin: 5.8% auto 0;
  }
  .jbccStyle .details li a {
    font-size: 3.46vw;
    padding: 4vw 13vw 4vw 4.5vw;
  }
  .jbccStyle .details li a span {
    font-size: 4vw;
    margin-right: 4vw;
  }
  .jbccStyle .details li .circleArrow::before {
    right: 4.5%;
  }
  .jbccStyle .details li .circleArrow::after {
    right: 4.5%;
  }
  .jbccStyle .square01 {
    width: 11.6vw;
    left: auto;
    right: 9.4%;
    top: -7.5%;
  }
  .jbccStyle .square02 {
    width: 2.72vw;
    left: auto;
    top: auto;
    right: 41.8%;
    bottom: 3.8%;
  }
  .jbccStyle .square03,
  .jbccStyle .square04,
  .jbccStyle .square05,
  .jbccStyle .square06 {
    display: none;
  }
}
/* ---------- RECRUIT ---------- */
.recruit {
  padding: 4.8% 6% 5.5%;
  position: relative;
}
.recruit h2 {
  text-align: center;
  margin-bottom: 56px;
}
.recruit h2 span {
  color: #c577a5;
}
.recruit .details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  z-index: 3;
  max-width: 1042px;
  margin: 0 auto;
}
.recruit .details li {
  width: 49%;
  max-width: 506px;
  margin-bottom: 30px;
  position: relative;
}
.recruit .details li p {
  position: relative;
}
.recruit .details li a {
  display: block;
  font-size: 1.7rem;
  font-size: clamp(1.4rem,0.88vw,1.7rem);
  color: #fff;
  width: 100%;
  height: max(6.3vw,80px);
  max-height: 120px;
  background: linear-gradient(45deg,  rgba(159,119,165,1) 0%,rgba(197,119,165,1) 78%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 18px;
}
.recruit .details li a::after {
  right: 7%;
}
.recruit .details li a:hover {
  background: #fff;
  color: #c577a5;
  border: 4px solid #c577a5;
}
.recruit .details li a:hover::after {
  background: #c577a5;
}
.recruit .square01 {
  width: 2.96vw;
  right: 24.1%;
  top: 15.8%;
}
.recruit .square02 {
  width: 1.06vw;
  left: 9.7%;
  top: 51%;
}
.recruit .square03 {
  width: 1.78vw;
  right: 11.5%;
  bottom: 18.4%;
}
.recruit .square span {
  background: #c577a5;
}
@media only screen and (max-width:749px) {
  .recruit {
    padding: 13.8% 6% 14.5%;
  }
  .recruit h2 {
    margin-bottom: 10%;
  }
  .recruit .details {
    display: block;
    max-width: 88%;
  }
  .recruit .details li {
    width: 100%;
    max-width: none;
    margin-bottom: 7.3%;
  }
  .recruit .details li a {
    font-size: 3.46vw;
    padding: 7.4% 0;
    height: auto;
    max-height: none;
    border-radius: 10px;
  }
  .recruit .details li a::after {
    right: 5%;
    width: 6vw;
    height: 1.8vw;
  }
  .recruit .square01 {
    width: 7.6vw;
    right: auto;
    left: 13.7%;
    top: -2.2%;
  }
  .recruit .square02 {
    width: 2.72vw;
    left: auto;
    right: 21.5%;
    top: 22%;
  }
  .recruit .square03 {
    width: 4.57vw;
    right: auto;
    left: 34.2%;
    bottom: 6.8%;
  }
}