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

/*
* MV
******************************************************/
.recruit-mv {
    width: 100%;
    height: 100%;
    position: relative;
}
.recruit-mv-heading {
    width: 100%;
    background: var(--color-hover-rgba);
    position: absolute;
    z-index: 3;
}
.recruit-mv-heading h2 {
    text-align: center;
}
@media print, screen and (min-width: 1080px) {
    .recruit-mv {
        width: 100%;
        height: calc(100svh - 120px);
        position: relative;
    }
}
/*
* MV SWIPER
******************************************************/
.mv {
    width: 100%;
}
.mv .swiper-fade .swiper-slide {
     transition-property: opacity, -webkit-transform !important;
     transition-property: opacity, transform !important;
     transition-property: opacity, transform, -webkit-transform !important;
     pointer-events: none;
 }
 .mv .swiper-fade .swiper-slide-active {
     pointer-events: auto;
 }
.swiper-wrapper {
     height: calc(100vh - 120px)!important;
 }
 .mv .slide-media {
    height: 100svh;
}
.mv .slide-media img {
    -webkit-transition: 7s 1s linear;
    transition: 7s 1s linear;
    object-fit: cover;
    height: 100%;
    max-width: fit-content;
    -webkit-transform: translateX(-1.5%) scale(1.1);
            transform: translateX(-1.5%) scale(1.1);
 }
 .mv .swiper-slide[class*=-active] .slide-media img {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
-webkit-transform: translateX(1.5%) scale(1.05);
    transform: translateX(1.5%) scale(1.05);
 }
 @media print, screen and (min-width: 1080px) {
    .mv {
        padding:0;
    }
    .mv .slide-media img {
       object-fit: cover;
       max-width: 100%;
   }
 }

 /*
* RIGHT PANEL
******************************************************/
.recruit-right-panels {
    padding: 120px 0 0 0;
    max-width: var(--content-size);
    margin: auto;
    position: relative;
}
.recuruit-right-panel-bg {
    background: var(--color-layer-blue);
    max-width: var(--content-size);
    margin: auto;
    height: 380px;
}
.recruit-right-panel {
    position: absolute;
    top: 70px;
    right: 0;
}
.recruit-right-panel-inner {
    position: relative;
    max-width: 320px;
    margin: 0 0 0 20px;
}
.recruit-right-panel-heading {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    color: var(--color-default);
}
.recruit-right-panel-heading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 0;
    border-top: solid 2px var(--color-default);
    border-right: solid 2px var(--color-default);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: -48px;
    bottom: 0;
    margin: auto;
}
.recruit-right-panel-img a {
    display: block;
}
@media print, screen and (min-width: 1080px) {
    .recruit-right-panel-heading {
        top: 20px;
        left: 40px;
        font-size: 3.2rem;
    }
    .recruit-right-panel-inner {
        max-width: var(--content-size);
        margin: 0 0 0 80px;
    }
    .recuruit-right-panel-bg {
        height: 1080px;
    }
    .recruit-right-panel-heading::after {
        width: 18px;
        height: 18px;
    }
}

.panel-animation01.delighter.started {
    animation: fadeSlide 1.2s forwards ease-in-out
}
.panel-animation02.delighter.started {
    animation: fadeSlide 1.4s forwards ease-in-out
}

 /*
* PANEL
******************************************************/
.recruit-bottom-panels {
    padding:0;
    max-width: var(--content-size);
    margin: 60px auto;
    position: relative;
}
.recuruit-bottom-panel-bg {
    background: var(--color-layer-blue);
    max-width: var(--content-size-small);
    margin: auto;
    height: 390px;
}
.recruit-bottom-panel {
    position: absolute;
    top: 50px;
}
.recruit-bottom-panel-inner {
    position: relative;
    max-width: 360px;
    margin: auto;
}
.recruit-bottom-panel-heading {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    color: var(--color-default);
}
.recruit-bottom-panel-heading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 0;
    border-top: solid 2px var(--color-default);
    border-right: solid 2px var(--color-default);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: -48px;
    bottom: 0;
    margin: auto;
}
.recruit-bottom-panel-img a {
    display: block;
}
@media print, screen and (min-width: 1080px) {
    .recruit-bottom-panels {
        padding: 120px 0;
        margin: 90px auto;
    }
    .recruit-bottom-panel {
        top: 170px;
    }
    .recruit-bottom-panel-inner {
        margin: 0;
        max-width: var(--content-size);
    }
    .recuruit-bottom-panel-bg {
        height: 910px;
    }
    .recruit-bottom-panel-heading {
        top: 150px;
        left: 90px;
        font-size: 3.2rem;
    }
    .recruit-bottom-panel-heading::after {
        width: 18px;
        height: 18px;
    }
}

/*
* SERVICE
******************************************************/
.recruit-service {
    padding: 0 0 50px 0;
}
.recruit-service-heading-wrapper {
    margin: 40px auto;
}
.recruit-service-heading {
    font-size: 3rem;
    text-align: center;
    color: var(--color-theme-primary);
}
.recruit-service-link01 {
    background: url(/public/assets/img/recruit/bg-panel01.webp) no-repeat center center/cover;
}
.recruit-service-link02 {
    background: url(/public/assets/img/recruit/bg-panel02.webp) no-repeat center center/cover;
}
.recruit-service-link03 {
    background: url(/public/assets/img/recruit/bg-panel03.webp) no-repeat center center/cover;
}
.recruit-service-link {
    width: 100%;
    height: 200px;
    position: relative;
}
.hover-panel {
    transition: var(--transition-slow);
    height: 100%;
}
.hover-panel:hover {
    background:  rgba(0,0,0,.3);
    height: 100%;
}
@media print, screen and (min-width: 1080px) {
    .recruit-service {
        height: 520px;
    }
    .recruit-service-heading {
        font-size: 3.6rem;
    }
    .recruit-service .ge-content-bg-inner {
        top:50px;
        width: 100%;
    }
    .recruit-service .ge-content-bg-layer {
        height: 560px;
	}
    .recruit-service-content {
        max-width: var(--max-size);
        margin: auto;
    }
}