@charset "UTF-8";

.l-header {top: -80px;}
.l-fixedNav {top: -80px;}
.is-loaded .l-header {top: 0px; transition: top .6s cubic-bezier(0, 0.55, 0.45, 1) 4.7s;}
.is-loaded .l-fixedNav {top: 0px; transition: top .6s cubic-bezier(0, 0.55, 0.45, 1) 4.7s;}

.is-already .l-header {top: 0px;}
.is-already .l-fixedNav {top: 0px;}

.p-opening {width: 100%; height: 100%; position: absolute; top: 0; z-index: 5; overflow: hidden;}
.p-opening__in {width: 100%; height: 100%; position: relative; background-color: #fff;}
.p-opening__logo {width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; top: 0; left: 0; z-index: 2;}
.p-opening__logo img {display: inline-block;}
.p-opening__water {z-index: 1; width: 200vw; height: 200vw; position: absolute; top: 110%; left: 0; margin-left: -50vw; animation: waterUp 4.6s forwards .5s;}
@keyframes waterUp {
	0% {top: 110%;}
	50% {top: 35%;}
	65% {top: 30%;}
	100% {top: -30%;}
}
.p-opening__waterObj {width: 100%; height: 100%; background: #5793d9; transform: translateZ(0); border-radius: 40%; animation: waterSpin 8s infinite linear;}
@keyframes waterSpin {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

.p-opening__in:after {content: ""; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; background: #000; z-index: 3; transition: .4s cubic-bezier(0.76, 0, 0.24, 1) 4.5s;}
.p-opening__txt {width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; top: 0; left: 0; z-index: 4; opacity: 0; /*transition: 0s 2.5s;*/ transition: 0s 4.5s;}

.p-opening__txt ul li {margin-bottom: 30px;}
.p-opening__txt ul li .is-view__wrap.active > .is-view__master {animation-duration: .3s;}
.p-opening__txt ul li .is-view__wrap.active > .is-view__cover {animation-duration: .3s;}
.p-opening__txt ul li:last-of-type {margin-bottom: 0;}

.is-loaded .p-opening__in:after {left: 0;}
.is-loaded .p-opening__txt {opacity: 1;}

.is-loaded .p-opening.is-finished .p-opening__in:after {/*transform-origin: right center; transform: scaleX(0); transition: transform .4s cubic-bezier(0.76, 0, 0.24, 1);*/ opacity: 0; transition: 1s;}
.is-loaded .p-opening.is-finished .p-opening__in {background-color: transparent;}
.is-loaded .p-opening.is-finished .p-opening__logo {display: none;}
.is-loaded .p-opening.is-finished .p-opening__water {display: none;}

.is-already .p-opening__logo {display: none;}
.is-already .p-opening__water {display: none;}
.is-already .p-opening__txt {opacity: 1; transition: 0s 0s;}
.is-already .p-opening__in {background: none;}
.is-already .p-opening__txt ul li .is-view__wrap > .is-view__master {opacity: 1;}
.is-already .p-opening__txt ul li .is-view__wrap > .is-view__cover {display: none;}


@media screen and (max-width:960px){
     .p-opening__txt {height: calc(100vw + 120px);}
}
@media screen and (max-width:600px){
    .p-opening__logo img {width: 220px; height: 112px;}
    .p-opening__water {height: 300vw;}
    @keyframes waterUp {
        0% {top: 110%;}
        50% {top: 35%;}
        65% {top: 30%;}
        100% {top: -40%;}
    }
   
    .p-opening__txt ul li {margin-bottom: 17px;}
    .p-opening__txt li:nth-of-type(1) img {width: 198px; height: 32px;}
    .p-opening__txt li:nth-of-type(2) img {width: 226px; height: 32px;}
    .p-opening__txt li:nth-of-type(3) img {width: 171px; height: 32px;}
    .p-opening__txt li:nth-of-type(4) img {width: 266px; height: 33px;}
    
}



/* ----------------------------------------

- .p-mv

---------------------------------------- */
.p-mv {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
.p-mv__video {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: fixed;
    top: 0;
}
.p-mv__videoIn {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.p-mv__videoIn video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.p-mv__txt01 {
    position: absolute;
    right: -10px;
    bottom: 0;
    z-index: 2;
}
.p-mv__txt02 {
    position: absolute;
    left: 32px;
    top: calc(50% + 40px - 53px);
    z-index: 2;
}
@media screen and (max-width:960px){
    .p-mv {
        height: calc(100vw + 60px);
    }
    .p-mv__video {
       height: calc(100vw + 60px); 
    }
    .p-mv__videoIn video {
        width: calc((101vw + 60px) * 1.77)!important;
        height: 101%!important;
    }
    .p-mv__txt01 {
        display: none;
    }
    .p-mv__txt02 {
        left: 12px;
        top: calc(50% + 30px - 41px);
    }
    .p-mv__txt02 img {
        width: 11px;
        height: 83px;
    }
}
@media screen and (min-width:961px){
    #video02 {display: none;}
}
@media screen and (max-width:960px){
    #video01 {display: none;}
}

/* ----------------------------------------

- .p-about

---------------------------------------- */
.p-about {
    width: 100%;
    position: relative;
    padding-top: 330px;
    /*padding-bottom: 200px;*/
    z-index: 1;
    margin-bottom: -320px;
}
.p-about__pic01 {
    /*width: 43%;*/
    width: calc(100% - ((100% - 1200px) * .5 + 700px));
    position: absolute;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}
.is-loaded .p-about__pic01.is-active,
.is-already .p-about__pic01.is-active{
    opacity: 1;
}
.p-about__in {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}
.p-about__txt{
    width: 620px;
}
.p-about__txt h2 {
    margin-bottom: 40px;
}
.p-about__p01 {
    margin-bottom: 35px;
}
.p-about__p01 p {
    font-family: ryo-gothic-plusn, sans-serif;
    font-size: 3.2rem;
    letter-spacing: .15em;
    line-height: 1.75;
    white-space: nowrap;
}
.p-about__p01 .is-view__wrap.is-active > .is-view__master {animation-delay: .3s;}
.p-about__p01 .is-view__wrap.is-active > .is-view__cover {animation-delay: .3s;}

.p-about__p01--sp {
    display: none;
}
.p-about__p02 {
    margin-bottom: 45px;
}
.p-about__btn {
    margin-bottom: 125px;
}
.p-about__pic02 {
    width: 560px;
    margin: 0 0 0 -160px;
    opacity: 0;
    transition: opacity 1s .8s;
}
.p-about__pic02.is-active {
    opacity: 1;
}
.p-about:after {
    content: "";
    display: block;
    width: 137%;
    padding-top: 67.9%;
    background: url("/recruit/graduate/wordpress/wp-content/themes/metawater/assets/images/index/about_bg.png") no-repeat 0 0 / cover;
    position: absolute;
    z-index: 0;
    left: -28.4%;
    top: 45%;
    transform: translate(110%, -100%);
    transition: .5s cubic-bezier(0.45, 0, 0.55, 1) .2s;
}
.p-about.is-bgMove:after {
    transform: translate(0, 0);
}

@media screen and (max-width:960px){
    .p-about {
        padding-top: 50px;
        margin-bottom: -105px;
    }
    .p-about__pic01 {
        width: 80%;
        position: relative;
    }
    .p-about__in {
        display: block;
    }
    .p-about__txt{
        width: auto;
    }
    .p-about__txt h2 {
        margin-bottom: 40px;
        padding-top: calc((69.3vw * 0.693 / 2) + 40px);
    }
    .p-about__p01 {
        margin-bottom: 30px;
    }
    .p-about__p01 p {
        font-size: 3.2rem;
        letter-spacing: .1em;
    }
    .p-about__p02 {
        margin-bottom: 35px;
        transition-delay: 0s;
    }
    .p-about__btn {
        margin-bottom: 0;
    }
    .p-about__pic02 {
        width: 69.3%;
        margin: 0;
        position: absolute;
        right: -20px;
        top: calc(-69.3vw * 0.693 / 2);
    }
    .p-about:after {
        top: calc(100vw * .52);
        width: 200%;
        padding-top: 99.28%;
        left: -50%;
    }
}

@media screen and (max-width:600px){
    .p-about__p01--sp {
        display: block;
    }
    .p-about__p01--pc {
        display: none;
    }
}
@media screen and (max-width:374px){
    .p-about__p01 p {
        font-size: 2.8rem;
        letter-spacing: .07em;
    }
}

/* ----------------------------------------

- .p-jobs

---------------------------------------- */
.p-jobs {
    width: 100%;
    background: #fff;
    padding-top: 88%;
    position: relative;
    z-index: 0;
}
.p-jobs__bg {
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    left: 0;
    /*top: 0;*/
    top: 30%;
    /*background: url("/recruit/graduate/wordpress/wp-content/themes/metawater/assets/images/index/jobs_bg.jpg") no-repeat center top / cover;*/
}
.p-jobs__txt {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 45%;
    z-index: 1;
}
.p-jobs__txtBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    transform: translateY(50vw);
    transition: .8s cubic-bezier(0.45, 0, 0.55, 1) .2s;
}
.p-jobs__txt.is-active .p-jobs__txtBg {
    transform: translateY(0);
}
.p-jobs__txtIn {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    text-align: center;
    padding-top: 90px;
    opacity: 0;
    transition: .8s .4s;
}
.p-jobs__txt.is-active .p-jobs__txtIn {
    opacity: 1;
}
.p-jobs__txtIn h2 {
    margin-bottom: 20px;
}
.p-jobs__txtIn p {
    margin-bottom: 30px;
}
@media screen and (max-width:960px){
    .p-jobs__bg {
        top: 0;
    }
    .p-jobs__txt {
        padding-top: 80%;
}
    .p-jobs__txtBg {
        overflow: hidden;
    }
    .p-jobs__txtBg img {
        max-width: inherit;
        display: block;
        width: 190%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
}
@media screen and (max-width:600px){
    .p-jobs {
        padding-top: 86.4%;
    }
    .p-jobs__bg img {
        max-width: inherit;
        display: block;
        position: absolute;
        width: 200%;
        height: auto;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0)!important;
    }
    .p-jobs__txt {
        position: relative;
        bottom: auto;
        left: auto;
        padding-top: 149.1%;
    }
    .p-jobs__txtBg {
        height: auto;
    }
    .p-jobs__txtBg img {
        max-width: 100%;
        width: auto;
        position: static;
        left: 0;
        transform: translate(0, 0);
    }
    .p-jobs__txtIn {
        padding: 18% 20px 0;
    }
}

/* ----------------------------------------

- .p-employee

---------------------------------------- */
.p-employee {
    position: relative;
    z-index: 1;
    background: #fff;
    padding-top: 125px;
}
.p-employee__header {
    display: flex;
    justify-content: space-between;
	align-items: center;
    margin-bottom: 40px;
}
.p-employee__header h2 div {
    display: flex;
    align-items: center;
}
.p-employee__header h2 div .c-ttl01__en {
    margin-bottom: 0;
    margin-right: 20px;
}
.p-employee__slider {
    width: 100%;
}
.p-employee__sliderNav {
    max-width: 1300px;
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.p-employee__slickBtn {
    display: block;
    position: absolute;
    top: -200px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
}
.p-employee__slickBtn--prev {
    left: 20px;
}
.p-employee__slickBtn--next {
    right: 20px;
}
.p-employee__slickBtn img {
    position: absolute;
    display: inline-block;
    top: calc(50% - 9px);
}
.p-employee__slickBtn--prev img {
    left: calc(50% - 6px);
}
.p-employee__slickBtn--next img {
    left: calc(50% - 4px);
}
.is-pc .p-employee__slickBtn--next:hover img {
    animation: animeEmployeeArrowNext .4s cubic-bezier(.215, .61, .355, 1);
}
@keyframes animeEmployeeArrowNext {
	0%{left: calc(50% - 4px); opacity: 1;}
    50%{left: 60px; opacity: 0;}
	51%{left: -10px; opacity: 0;}
	100%{left: calc(50% - 4px); opacity: 1;}
}
.is-pc .p-employee__slickBtn--prev:hover img {
    animation: animeEmployeeArrowPrev .4s cubic-bezier(.215, .61, .355, 1);
}
@keyframes animeEmployeeArrowPrev {
	0%{left: calc(50% - 6px); opacity: 1;}
    50%{left: -10px; opacity: 0;}
	51%{left: 60px; opacity: 0;}
	100%{left: calc(50% - 6px); opacity: 1;}
}

.p-employee__sliderList {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
.p-employee__item {
    float: left;
    width: 25%;
    padding: 0 15px;
}

@media screen and (max-width:960px){
    .p-employee__header {
        display: block;
        margin-bottom: 35px;
        text-align: center;
        padding: 0 20px;
    }
    .p-employee__header h2 {
        margin-bottom: 20px;
    }
    .p-employee__header h2 div {
        display: block;
    }
    .p-employee__header h2 div .c-ttl01__en {
        margin-bottom: 5px;
        margin-right: 0;
    }
    .p-employee__slickBtn {
        top: 50px;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(87, 147, 217, .25);
    }
    .p-employee__btn {
        margin-top: 40px;
    }
}
@media screen and (max-width:600px){
    .p-employee {
        padding-top: 80px;
    }
}

/* ----------------------------------------

- .p-special

---------------------------------------- */
.p-special {
    width: 100%;
    position: relative;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #fff;
    pointer-events: none;
}
.p-special__item01 {
    /*width: 57.3%;*/
    width: calc(100% - ((100% - 1200px) * .5 + 495px));
    position: absolute;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s .7s;
    pointer-events: auto;
}
.p-special__item01.is-active {
    opacity: 1;
}
.p-special__item01Pic {
    position: relative;
    z-index: 0;
}
.p-special__item01Btn {
    position: absolute;
    z-index: 1;
    bottom: -28px;
    left: 0;
}
.p-special__in {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.p-special__txt{
    width: 450px;
}
.p-special__txt h2 {
    margin-bottom: 20px;
}
.p-special__txt h2 br {
    display: none;
}
.p-special__p01 {
    margin-bottom: 30px;
}
.p-special__btn {
    pointer-events: auto;
}
.p-special__item02 {
    margin-top: 40px;
    margin-left: -150px;
    position: relative;
    opacity: 0;
    transition: opacity 1s .7s;
}
.p-special__item02.is-active {
    opacity: 1;
}
.p-special__item02Pic {
    position: relative;
    z-index: 0;
}
.p-special__item02Btn {
    position: absolute;
    z-index: 1;
    bottom: -28px;
    left: -134px;
    pointer-events: auto;
}
.p-special:after {
    content: "";
    display: block;
    width: 137%;
    padding-top: 67.9%;
    background: url("/recruit/graduate/wordpress/wp-content/themes/metawater/assets/images/index/special_bg.png") no-repeat 0 0 / cover;
    position: absolute;
    z-index: 0;
    left: -28.4%;
    top: -35%;
    transform: translate(-110%, -100%);
    transition: .5s cubic-bezier(0.45, 0, 0.55, 1) .2s;
}
.p-special.is-bgMove:after {
    transform: translate(0, 0);
}

@media screen and (max-width:1500px){
    .p-special:after {
        top: -25%;
    }
}


@media screen and (max-width:960px){
    .p-special {
        padding-top: 80px;
        padding-bottom: 110px;
    }
    .p-special__in {
        pointer-events: auto;
    }
    .p-special__txt{
        width: 100%;
    }
    .p-special__txt h2 {
        margin-bottom: 15px;
    }
    .p-special__btn {
        display: none;
    }
    .p-special__item01 {
        width: calc(100% + 20px);
        position: relative;
        margin-left: -20px;
    }
    .p-special__item01Pic {
        width: 84.5%;
    }
    .p-special__item01Btn {
        left: auto;
        right: 0;
    }
    .p-special__item02 {
        margin-top: 65px;
        margin-left: 0;
        margin-right: -20px;
        width: calc(100% + 20px);
    }
    .p-special__item02Pic {
        width: 84.5%;
        margin-left: 15.5%;
    }
    .p-special__item02Btn {
        left: 0;
    }
    
    .p-special:after {
        width: 200%;
        padding-top: 99.28%;
        background: url("/recruit/graduate/wordpress/wp-content/themes/metawater/assets/images/index/about_bg.png") no-repeat 0 0 / cover;
        left: -50%;
        top: auto;
        bottom: calc(100vw * .37);
        transform: translate(110%, -100%);
    }
}











@media screen and (max-width:600px){
    .p-special__txt h2 br {
        display: inline-block;
    }
}


/* ----------------------------------------

- .p-banner01

---------------------------------------- */
.p-banner01 {
    z-index: 1;
}