@charset 'UTF-8';
.loading {width: 100vw;height: 100vh;transition: all 1.2s;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9999;opacity: 1;visibility: visible;overflow: hidden;}
.loading.is-active {opacity: 0;visibility: hidden;}
.loading-animation {width: 100vw;height: 100vh;transition: all .9s;background-color: #fff;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;padding: 0 0 100px;position: relative;overflow: hidden;}
.loading-animation img {
width: 170px;
margin: 0 0 30px;
animation: logo-in 1.5s;
animation-fill-mode: forwards;
}
@keyframes logo-in {
0% {opacity: 0;}
20% {opacity: 0;}
100% {opacity: 1;}
}

.loading-animation::after {
position: absolute;
width: 0%;
height: 200%;
right: 30%;
top: -50%;
content: '';
background: #fff;
transform: rotate(19deg);
transform-origin:center center;
animation: cover-on 4.5s;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
@keyframes cover-on {
0% {width: 0;}
100% {width: 50%;}
}
.loading-animation.is-active {opacity: 1;visibility: visible;}
@media (max-width: 900px) { 
.loading-animation::after {
animation: cover-on 3.8s;
animation-fill-mode: forwards;
animation-delay: 1.5s;
}
@keyframes cover-on {
0% {width: 0;}
100% {width: 80%;}
}
}



/*+++++++++++++==========================parts==========================+++++++++++++*/

.page-main-wrap{
position: relative;
width: 95%;
max-width: 1600px;
margin: 0 auto;
}
.page-main{
position: relative;
overflow: hidden;
}
@media only screen and (min-width : 900px) {
.page-main-cover{
position: absolute;
width: 130%;
height: 300%;
left: -20%;
top: -100%;
content: '';
background: rgba(255,255,255,0.90);
transform: rotate(19deg);
}
.interview .page-main-cover{
width: 150%;
}
.loaded .page-main-cover.ose{
width: 52.5%;
transition:width 1s .2s;
}
.loaded .interview .page-main-cover.ose{
width: 56.2%;
transition:width 1s .2s;
}
.loaded .jobtitle-type02 .page-main-cover.ose,
.loaded .jobtitle-type02 .page-main-cover.ose{
width: 67.6%;
transition:width 1s .2s;
}
}
.page-main-ttl-box{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 0 0 4.8% 7.2%;
}
.pm-ttl-box{
color: #001F6B;
opacity:0;
}
.jobtitle-type01 .pm-ttl-box,
.jobtitle-type02 .pm-ttl-box{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.loaded .pm-ttl-box.ose{
opacity:1;
transition:opacity 0.8s 0.8s;
}
.pm-ttl-en{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 20px;
line-height: 1.5;
margin: 0 0 8px;
}
.pm-ttl-box h1{
font-size: 40px;
font-weight: 700;
line-height: 1.5;
}
.page-main-ttl-box p{
width: 43%;
}
.page-main-job-cat{
font-size: 24px;
font-weight: 700;
line-height: 1.5;
}
.page-main-anchor-box{
position: absolute;
width: 370px;
right: 1.97%;
bottom: 5%;
background: #fff;
padding: 20px 32px 24px;
border-radius: 8px;
opacity: 0;
}
.loaded .page-main-anchor-box.ose{
opacity:1;
transition:opacity 0.8s 1.2s;
}

.page-main-anchor-box a{
display: block;
width: 100%;
color: #001F6B;
position: relative;
}
.page-main-anchor-box a:hover{
color: #E40046;
transition: background-color 0.4s, color 0.4s;
}

.page-main-anchor-box a .arrow {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 22px;
  margin: auto 0;
  line-height: 1;
}
.page-main-anchor-box a .arrow:before,
.page-main-anchor-box a .arrow:after {
  content: "↓";
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 16px;
  line-height: 22px;
font-weight: 500;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
}
.page-main-anchor-box a .arrow:after {
  transform: translateY(-100%);
}
.page-main-anchor-box a:hover .arrow{
  opacity: 1!important;
}
.page-main-anchor-box a:hover .arrow:before {
  animation-name: transformdown02;
  animation-delay: 0s;
  opacity: 1!important;
}
.page-main-anchor-box a:hover .arrow:after {
  animation-name: transformdown01;
  animation-delay: 0.2s;
  opacity: 1!important;
}
@keyframes transformdown01 {
  0% {
transform: translateY(-100%);
  }
  100% {
transform: translateY(0);
  }
}
@keyframes transformdown02 {
  0% {
transform: translateY(0);
  }
  100% {
transform: translateY(100%);
  }
}



.page-main-anchor-box dl{
width: 100%;
display: flex;
padding: 10px 0 4px;
border-bottom: 1px solid #001F6B;
}

.page-main-anchor-box dt{
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
width: 24px;
flex-shrink: 0;
line-height: 1.5;
position: relative;
top: 1px;
}
.page-main-anchor-box dd{
position: relative;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}



.interview .pm-ttl-box h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    padding: 6% 0 0;
}
.interview .page-main-ttl-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0 4.8% 3.28%;
}
.page-main-ttl-cat {
background: #001F6B;
font-size: 18px;
font-weight: 700;
color: #fff;
display: inline-block;
line-height: 1.5;
padding: 8px 14px;
}


.jobtitle-type01 .page-main-ttl-box,
.jobtitle-type02 .page-main-ttl-box{
    display: flex;
    align-items: center;
    padding: 2.6% 0 3.2% 4.4%;
}
.jobtitle-type01  .pm-ttl-box h1,
.jobtitle-type02  .pm-ttl-box h1{
    padding: 0 0 0 104px;
    position: relative;
    line-height: 88px;
}
.jobtitle-type02  .pm-ttl-box h1.for-tech04{
    padding: 0 0 0 104px;
    position: relative;
    line-height: 1.5;
}
.jobtitle-type01  .pm-ttl-box h1 img,
.jobtitle-type02  .pm-ttl-box h1 img{
position: absolute;
top: 0;
left: 0;
width: 88px;
}
.jobtitle-type02  .pm-ttl-box h1.for-tech04 img{
    top: 50%;
    transform: translateY(-50%);
}
.jobtitle-type01 .page-main-anchor-box,
.jobtitle-type02 .page-main-anchor-box{
width: 390px;
}

.jobtitle-type01 .page-main-wrap, .jobtitle-type02 .page-main-wrap {
    margin: 0 auto min(7%, 100px);
}











.contants-wrap{
width: 100%;
margin: 0 auto;
}
.wrap-box{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}



.back-to-box{
text-align: center;
}
.back-to-box a{
display: inline-block;
border: 1px solid #001f6a;
font-size: 16px;
font-weight: 500;
color: #001f6a;
border-radius: 4px;
padding: 0 6px 0 26px;
position: relative;
line-height: 1.8;
}
.back-to-box a:hover{
background: #001f6a;
color: #fff;
transition: background-color 0.4s, color 0.4s;
}
.back-to-box a .arrow {
  overflow: hidden;
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 6px;
  width: 18px;
  margin: auto 0;
}
.back-to-box a .arrow:before,
.back-to-box a .arrow:after {
  content: "←";
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 16px;
  line-height: 22px;
font-weight: 500;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
}
.back-to-box a .arrow:after {
  transform: translateY(-100%);
}
.back-to-box a:hover .arrow{
  opacity: 1!important;
}
.back-to-box a:hover .arrow:before {
  animation-name: transformtoleft02; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0s;
  opacity: 1!important;
}
.back-to-box a:hover .arrow:after {
  animation-name: transformtoleft01; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0.2s;
  opacity: 1!important;
}
@keyframes transformtoleft01 {
  0% {
transform: translateX(100%);
  }
  100% {
transform: translateX(0);
  }
}
@keyframes transformtoleft02 {
  0% {
transform: translateX(0);
  }
  100% {
transform: translateX(-100%);
  }
}





.next-contents{
width: 95%;
max-width: 1280px;
margin: 0 auto 6.5%;
padding: min(10%, 128px) 2.5% 0;
}
.page .ending-recruit-info {
width: 95%;
max-width: 1280px;
    margin: 0 auto;
}

/*
.ending-info-ttl-en {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 24px;
text-align: center;
color: #001F6B;
line-height: 1;
margin: 0 0 1.5%;
}


.ending-info-ttl {
font-weight: 700;
font-size: 40px;
text-align: center;
color: #001F6B;
line-height: 1.1;
margin: 0 0 3.8%;
}
*/

.block-ttl-en,
.ending-info-ttl-en {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 24px;
text-align: center;
color: #001F6B;
line-height: 1;
margin: 0 0 1.5%;
}

.block-ttl-jp,
.ending-info-ttl {
font-weight: 700;
font-size: 40px;
text-align: center;
color: #001F6B;
line-height: 1.1;
margin: 0 0 3.8%;
}

.next-contents-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.next-contents-once{
width: 48.6%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.next-contents-once a{
position: relative;
border-radius: 4px;
overflow: hidden;
display: block;
}

.next-contents-once a .t2-box {
position: absolute;
width: auto;
height: auto;
top: -1px;
left: -1px;
font-size: 18px;
font-weight: 700;
color: #001F6B;
padding: 0 20px;
border-radius: 4px 0 4px 0;
background: #fff;
line-height: 46px;
}



.ending-recruit-info.lower{
padding: 0 2.5% 0;
}









/*+++++++++++++==========================parts==========================+++++++++++++*/







.f-up1{
opacity:0;
transform: translateY(40px);
}
.f-up1.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
.f-up2{
opacity:0;
transform: translateY(40px);
}
.f-up2.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0.4s,transform 0.9s 0.4s;
}
.f1{
opacity:0;
}
.f1.scrolled{
opacity:1;
transition:opacity 1s 0.3s;
}
.f2{
opacity:0;
}
.f2.scrolled{
opacity:1;
transition:opacity 1s 0.8s;
}
.mu{
opacity:0;
transform: translateY(40px);
}
.mu.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}






.fade01,
.fade-in{
opacity:0;
}
.fade01.scrolled,
.fade-in.scrolled{
opacity:1;
transition:opacity 1s .3s;
}
.fade02{
opacity:0;
}
.fade02.scrolled{
opacity:1;
transition:opacity 1s .7s;
}
.fade03{
opacity:0;
}
.fade03.scrolled{
opacity:1;
transition:opacity 1s 1.1s;
}
.fade04{
opacity:0;
}
.fade04.scrolled{
opacity:1;
transition:opacity 1s 1.5s;
}
.fade05{
opacity:0;
}
.fade05.scrolled{
opacity:1;
transition:opacity 1s 1.9s;
}


.clip-kv{
clip-path: inset(0 100% 0 0);
}
.loaded .clip-kv.ose{
clip-path: inset(0);
transition:clip-path 1.3s .4s;
}
.fade-et{
opacity:0;
}
.loaded .fade-et.ose{
opacity:1;
transition:opacity 1.8s 1.2s;
}
.fade-oj01{
opacity:0;
}
.loaded .fade-oj01.ose{
opacity:1;
transition:opacity 1s 2.2s;
}
.fade-oj02{
opacity:0;
}
.loaded .fade-oj02.ose{
opacity:1;
transition:opacity 1s 2.8s;
}


.fade-a{
opacity:0;
}
.loaded .fade-a.ose{
opacity:1;
transition:opacity 1.2s 3.2s;
}
.fade-b{
opacity:0;
}
.loaded .fade-b.ose{
opacity:1;
transition:opacity 1.2s 3.7s;
}
.fade-c{
opacity:0;
}
.loaded .fade-c.ose{
opacity:1;
transition:opacity 1.2s 4.2s;
}
.fade-d{
opacity:0;
}
.loaded .fade-d.ose{
opacity:1;
transition:opacity 1.2s 4.7s;
}
.clip-h1{
clip-path: inset(0 100% 0 0);
}
.clip-h1.scrolled{
clip-path: inset(0);
transition:clip-path 1.4s;
}
.clip-y{
clip-path: inset(0 0 100% 0);
}
.clip-y.scrolled{
clip-path: inset(0);
transition:clip-path 1.8s 0s;
}

.fade-in{
opacity:0;
}
.fade-in.scrolled{
opacity:1;
transition:opacity 1s;
}
.move-up{
opacity:0;
transform: translateY(40px);
}
.move-up.scrolled{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
.to-left{
opacity:0;
transform: translateX(60px);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-left.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-right{
opacity:0;
transform: translateX(-60px);
transition:opacity 1s 0s,transform 1s 0s;
}
.to-right.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.clip-y{
clip-path: inset(0 0 100% 0);
}
.clip-y.scrolled{
clip-path: inset(0);
transition:clip-path 1s 0s;
}







@media (max-width: 1000px) {  
.page-main-ttl-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 0 4.8% 4%;
}



}




@media (max-width: 900px) {  

    .page-main-wrap,
    .jobtitle-type01 .page-main-wrap, .jobtitle-type02 .page-main-wrap{
        width: 88%;
        margin: 0 auto 20%;
    }

    .page-main-cover {
        position: absolute;
        width: calc(100% + 2px);
        bottom: -1px;
        left: -1px;
        height: 50%;
        content: '';
        background: url(../images/itv-main-cover_sp.svg) no-repeat bottom left;
        background-size: 100% auto; 
    }
    
    
.jobtitle-type01 .page-main-ttl-box, .jobtitle-type02 .page-main-ttl-box {
    display: block;
    padding: 0;
    margin: 0 0 7%;
}
.page-main-job-cat {
    font-size: 24px;
    margin: 0 0 10%;
}
.jobtitle-type01 .pm-ttl-box h1, .jobtitle-type02 .pm-ttl-box h1 {
    padding: 0 0 0 104px;
    margin: 0 0 10%;
}


.page-main-anchor-box,
.jobtitle-type01 .page-main-anchor-box, .jobtitle-type02 .page-main-anchor-box{
    position: relative;
    width: 100%;
    right: auto;
    bottom: auto;
    padding: 6.9% 4%;
    border-radius: 8px;
    opacity: 0;
}
.page-main-anchor-box dl {
    width: 100%;
    display: flex;
    padding: 6px 0 2px;
    border-bottom: 1px solid #001F6B;
}
.page-main-anchor-box dd {
    line-height: 2;
}
.page-main-anchor-box dt {
    line-height: 2;
    top: 1px;
}



.back-to-box {
text-align: center;
margin: 0 0 25%;
}

.next-contents-box {
    display: block;
}
.next-contents {
width: 100%;
    margin: 0 auto 20%;
    padding: 0 6% 0;
}
.ending-info-ttl-en {
    font-size: 24px;
    margin: 0 0 6%;
}

.ending-info-ttl {
    font-size: 32px;
    margin: 0 0 11%;
}
.next-contents-once {
    width: 100%;
    display: block;
    margin: 0 0 10%;
}
.page .ending-recruit-info {
    width: 100%;
    margin: 0 auto;
    padding: 0 6%;
}

.ending-recruit-info.lower {
    padding: 0 6% 0;
}
    .ending-recruit-info-ttl-en {
        font-size: 24px;
        line-height: 1;
         margin: 0 0 5%;
    }
    .ending-recruit-info-ttl {
        font-size: 28px;
        line-height: 1.1;
        margin: 0 0 9%;
    }

    .ending-recruit-info-ttl {
        font-size: 32px;
        line-height: 1.5;
        margin: 0 0 9%;
    }



.f-up2.scrolled{
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
  
}



@media only screen and (max-width : 389px) {

    .page-main-anchor-box, .jobtitle-type01 .page-main-anchor-box, .jobtitle-type02 .page-main-anchor-box {
        padding: 6.9% 0;
    }
    .ending-info-ttl {
        font-size: min(8.2vw, 32px);
    }

}