@charset "utf-8";
/* CSS Document */

/* ==========================================================================//
//
//　PC
//
// ========================================================================== */



/* area-header
---------------------------------------------------------- */
#page-index .area-header{
  animation-name: fadeIn1s;
  animation-delay: 2.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  transform: translateY(-50px);
  opacity: 0;
}
@keyframes fadeIn1s {
  0% {
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}



/* slider 
---------------------------------------------------------- 
.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.slider__item {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
.slider__item img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
border: 1px solid #f00;
transform: scale(1.1);
}
.slider__item.pre {
z-index: 2;
}
.slider__item.pre img {
  border: solid 1px #000;
  transform: scale(1);
}
.slider__item.now {
z-index: 3;
}
.slider__item.now img {
border: 1px solid #0000FF;
transform: scale(1);
transition: 3s;
}

@supports (-webkit-mask-size: 100% 100%) {
  .slider__item img {
    -webkit-mask-image: url(/img/mask.jpg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: left center;
  }
  .slider__item.now img {
    animation: slide 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards;
  }
}
@supports (mask-size: 100% 100%) {
  .slider__item img {
    mask-image: url(mask.jpg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: left center;
  }
  .slider__item.now img {
    animation: slide 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards;
  }
}
@keyframes slide {
  0% {
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
*/


/* swiper 
---------------------------------------------------------- */

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
  100% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
}
swiper-container{
  position: relative;
}
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img { /* ８秒かけて拡大させる */
    -webkit-animation: zoomUp 8s linear 0s;
    animation: zoomUp 8s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.swiper-img {
    background-size: cover; 
    background-position: center center; 
    height: 100vh; 
}
@media screen and (max-device-height: 700px) {
  .swiper-img {
    height: 700px !important; 
  }
}


/* slider scroll
---------------------------------------------------------- */
.area-mainimg .scroll {
  width: 11px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5vh; 
  z-index: 10;
}
.area-mainimg .scroll p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;
  font-size: 18px;
  letter-spacing: 0.1em;
  vertical-align: top;
  color: #fff;
}
.area-mainimg .scroll .line {
  width: 1px;
  height: 63px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: #fff;
}
.area-mainimg .scroll .circle-wrap {
  width: 6px;
  height: 6px;
  border-radius: 30px;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: white;
  transform: translate(-50%, -50%);
  animation: pulsate 1.8s ease-out infinite;
}

@keyframes pulsate {
0% {
  opacity: 0;
  top: 0%; }
20% {
  opacity: 1.0; }
80% {
  opacity: 1.0; }
100% {
  opacity: 0;
  top: 100%; }
}


/* slider text
---------------------------------------------------------- */
.area-mainimg .text {
  max-width: 1520px;
  width: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 28px;
}
.area-mainimg .text .catch {
  margin-bottom: 10%;
}
@media screen and (max-height: 700px) {
  .area-mainimg .text .catch {
    margin-bottom: 5%;
  }
}
.area-mainimg .text .catch img {
  max-width: 501px;
  width: 50%;
  vertical-align: top;
}
.area-mainimg .text .title img {
  width: 100%;
  height: auto;
  vertical-align: top;
  margin-bottom: 35px;
}

.fadeIn2s {
  animation-name: fadeIn2s;
  animation-delay: 2s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn2s {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

.fadeIn1_1s {
  animation-name: fadeIn1_1s;
  animation-delay: 1s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn1_1s {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}


/* INFORMATION　全体
---------------------------------------------------------- */
.area-info {
}
.area-info .inner {
}
.area-info .box-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-info .box-info .box-info-ttl {
  width: 270px;
  margin: 0 50px 0 0;
}
.area-info .box-info .box-ttl {
  margin: 0 0 110px;
}




/* BUSINESS CONTENT
---------------------------------------------------------- */
.area-business {
  background-color: #93CE35;
}
.area-business .box-info-ttl {
  margin: -170px 0 90px;
}
.area-business .box-info-ttl .box-ttl {
  color: #fff;
}
.area-business .box-business-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.area-business .box_btn {
  width: 100%;
}
.area-business .box_btn .btn_bor_wht_01 {
  width: 270px;
  margin: 95px auto 0;
}


/* RECRUIT
---------------------------------------------------------- */
.area-recruit {
  background-color: #73B735;
}
.area-recruit .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-recruit .inner .area-icon {
  width: 100%;
}
.area-recruit .box-info-ttl {
  width: 37%;
  color: #fff;
}
.area-recruit .box-info-ttl .box-ttl {
  margin: 0 0 50px;
}
.area-recruit .box-info-ttl .btn_bor_wht_01 {
  width: 270px;
}
.area-recruit .box-info-ttl .txt_01 {
  font-size: 17px;
  line-height: 2;
  margin: 0 0 100px;
}
.area-recruit .box-img {
  width: 60%;
}