.cpAbstBG{ position: relative; overflow: hidden;}
.bgImgBox01,
.bgImgBox02{ width: 100%; height: 100%;position: absolute; right: 0; top: 0;   }

.bgImgBox01{background:url(/common/images/company/01.png) no-repeat right center; background-size: cover;
    right: -30%;animation: bib01 10s ease-in-out infinite; 
}
.bgImgBox02{background:url(/common/images/company/02.png) no-repeat center center; background-size: cover;
    right: -20%;animation: bib02 15s ease-in-out infinite; }


    @keyframes bib01 {
        0% , 100%{transform: rotate3d(0, 0, 0, -10deg);  opacity: 1; }
        50%{transform: scale(1.2) rotate3d(-1, -0.1, -0.1, 20deg);   opacity: 1;}
    }
    @keyframes bib02 {
        0% , 100%{transform: rotate3d(0, 0, 0, 0deg);  opacity: 1; }
        50%{transform:translate(20px, 0) scale(1) rotate3d(0, -1, 0, 20deg);   opacity: 1;}
    }



.cpAbstBG >.inner{width: auto; max-width: 1000px;margin: 0 auto; padding-top: 50px;}

.cpPhilo{position: relative;}
.cpPhilo .grayTxt{ position: absolute; top: 0; left: -70px;z-index: 1;
font-size: 70px; font-family: roboto; font-style: italic; font-weight: 800; color: #eee;letter-spacing: 0.1em;
line-height: 1em;}
.cpPhilo .mainTxts{ position: relative; z-index: 2;}
.cpPhilo h3{ font-family: roboto; font-weight: 100; font-style: italic; color: #b8045e; font-size: 45px;line-height: 1.2em; letter-spacing: 0.08em; position: relative; padding-top: 40px;}
.cpPhilo .philoTxt01{ font-size: 30px; color: #6f0038;padding-top: 30px; font-weight: bold;}
.cpPhilo .philoTxt02{margin-bottom: 70px;}



@media(max-width:750px){
    .cpPhilo .grayTxt{  left: -50px;}
    .bgImgBox01{
        right: -60%;
    }
    .bgImgBox02{
        right: -40%;}

    .cpAbstBG >.inner{width: auto; max-width: auto;margin: 0 50px; padding-top: 50px;}
    .cpPhilo .philoTxt02{ font-weight: bold;}
}







.valueCont{position: relative;width: 100%; height:600px; overflow: hidden; margin-bottom: 50px; }
.valueCont >.inner{ 
    width:auto;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}


@media(max-width:750px){


    .valueCont{ height:600px; }

}





.txtArea{position: absolute;}
.vc01 .txtArea{ top:100px; left: ;}
.vc02 .txtArea{ top:270px; left:450px;}
.vc03 .txtArea{ top:150px ; left: ;}
.vc04 .txtArea{ top:140px; left:400px ;}
.vc05 .txtArea{ top:170px ; left: ;}

.numberArea{ width: 180px; margin-bottom: 15px;}
.valueCont h3{ font-size: 30px; font-weight: 700; font-family: roboto; margin-bottom: 15px; line-height: 1.2em;}
.txth3jp{ font-size: 22px; font-weight: bold;}
.detailTxt{ font-size: 16px; font-weight: bold; line-height: 1.6em;}
.valueCont ul li{ font-size: 14px;}


@media(max-width:750px){


    .numberArea{ width: 240px; margin-bottom: 15px;}
    .valueCont h3{ font-size: 40px; font-weight: 700; font-family: roboto; margin-bottom: 15px; line-height: 1.2em;}
    .txth3jp{ font-size: 28px; font-weight: bold;}
    .detailTxt{ font-size:22px; font-weight: bold; line-height: 1.6em;}
    .valueCont ul li{ font-size: 20px; line-height: 1.4em;}


    .vc01 .txtArea{ top:80px; left:50px;}
    .vc02 .txtArea{ top:110px; left:250px;}
    .vc03 .txtArea{ top:100px ; left:50px;}
    .vc04 .txtArea{ top:80px; left:50px ;}
    .vc05 .txtArea{ top:100px ; left:50px;}

}

.valueCont img{}

.vc_A,
.vc_B,
.vc_C{ position: absolute; top: 0; width: 100%; height: 100%;}
.vc_A img,
.vc_B img,
.vc_B img{ max-height: 100%; width: 100%;}


.vc01 .vc_B{}

.vc01 .vc_A img{ width: 100%; height: 100px; bottom: 0;position: absolute;left: 50%;transform: translate(-50%, 0); opacity: 0; transition: all 0.9s ease-in-out;}
.vc01 .vc_B img{ width: 1000px; height: 100px; bottom: 0;position: absolute;left: 50%;transform: translate(-50%, 0); opacity: 0;transition: all 0.9s ease-in-out;}
.vc01 .vc_C img{width: 1000px; height: auto;bottom: 0;position: absolute;left: 50%;transform: translate(-50%, 0);transition: all 0.9s ease-in-out;}
.vc01 .vc_C {  opacity: 0; margin:0 auto; transition: all 0.9s ease-out;}

.vc01 .vc_A.go img{height: 600px;opacity: 1;}
.vc01 .vc_B.go img{height: 400px;opacity: 1;}
.vc01 .vc_C.go{ opacity: 1;}



@media(max-width:750px){

    .vc01 .vc_A.go img{height: 600px;opacity: 1;}
    .vc01 .vc_B.go img{height: 400px;opacity: 0.6;}
    .vc01 .vc_C.go{ opacity: 0.6;}
}


.vc02 .vc_A{animation: vc02anim01 10s ease-in-out infinite;top: 150px; }
@keyframes vc02anim01 {
    0% , 100%{transform: rotate3d(0, 0, 0, 0deg);  opacity: 1; }
    50%{transform:translate(-50px, 40px)  ;   opacity: 1;}
}

.vc02 .vc_B{animation: vc02anim02 15s ease-in-out infinite; }
@keyframes vc02anim02 {
    0% , 100%{transform: rotate3d(0, 0, 0, 0deg);  opacity: 1; }
    50%{transform:translate(-20px, 0) scale(1.3) rotate3d(0, -1, 0, 20deg);   opacity: 1;}
}

.vc02 .vc_A img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc02 .vc_B img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc02 .vc_A.go img{opacity: 1;}
.vc02 .vc_B.go img{opacity: 1;}

.vc03 .vc_A{animation: vc03anim01 15s ease-in-out infinite;}
@keyframes vc03anim01 {
    0% , 100%{transform: rotate3d(0, 1, 0, 0deg);  opacity: 1; }
    50%{transform:translate(80px, 0) scale(1.05) rotate3d(0, 1, 0, 30deg) ;   opacity: 1;}
}

.vc03 .vc_B{animation: vc03anim02 15s ease-in-out infinite; }
@keyframes vc03anim02 {
    0% , 100%{transform: rotate3d(0, 0, 0, 0deg);  opacity: 1; }
    50%{transform:translate(0, 0) scale(1.1) rotate3d(0, -1, 0, 20deg);   opacity: 1;}
}



@media(max-width:750px){
    
}




.vc03 .vc_A img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc03 .vc_B img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc03 .vc_A.go img{opacity: 1;}
.vc03 .vc_B.go img{opacity: 1;}





@media(max-width:750px){

    .vc03 .vc_A img{ height: 100%; max-height: none; width: auto;position: relative; left: -140px;}
    .vc03 .vc_B img{ height: 100%; max-height: none; width: auto; position: relative; left: -140px;}

}


.vc04 .vc_A img{ width: 100%; max-height: none; height: auto;position: relative; left: 0; }
.vc04 .vc_B img{ height: 80%; max-height: none; width: auto; position: absolute;  bottom: 0;}

.vc04 .vc_A img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc04 .vc_B img{opacity: 0;transition: all 0.9s ease-in-out;}
.vc04 .vc_A.go img{opacity: 0.7;}
.vc04 .vc_B.go img{opacity: 0.7;}


.vc05 .vc_A img{opacity: 0;transition: all 0.9s ease-in-out;transform:translate(0, 50px);}
.vc05 .vc_C img{opacity: 0;transition: all 0.9s ease-in-out;transform:translate(0, -30px);}
.vc05 .vc_B img{opacity: 0;transition: all 0.9s ease-in-out;transform:translate(0, -10px);}
.vc05 .vc_A.go img{opacity: 1;transform:translate(0, 0);}
.vc05 .vc_B.go img{opacity: 1;transform:translate(0, 0);}
.vc05 .vc_C.go img{opacity: 1;transform:translate(0, 0);}



@media(max-width:750px){
    
}


.vc01,
.vc03,
.vc04{
background-color:#f3f3f3;
}




@media(max-width:750px){

    .vc04 .vc_A img{ opacity: 0.6; width: 100%; height: auto;}
    .vc04 .vc_B img{ opacity: 0.6; width: 90%; height: auto;right: -250px;top: 100px; position: absolute;}

}





.vc05{background: url(/common/images/company/cp05/bg.png) repeat center center; background-size: 60px 60px;}
.vc05 .vc_A{ width: 600px; right: 10%; }
.vc05 .vc_B{ width: 600px; right: 10%;  transform: scale(1); opacity: 0.2; text-align: center;}
.vc05 .vc_C{ width: 600px; right: 10%; transform: scale(0.5);}

.vc05 .vc_A img{position: absolute; bottom: 10%;}
.vc05 .vc_B img{position: relative;  max-height: none; width: auto; height: 100%; }
.vc05 .vc_C img{position: absolute; bottom: 0;}


@media(max-width:750px){
    .vc05 .vc_A{ width: 600px; right: -10%; }
    .vc05 .vc_B{ width: 600px; right: -10%;  transform: scale(1); opacity: 0.2; text-align: center;}
    .vc05 .vc_C{ width: 600px; right: -10%; transform: scale(0.5);}


}





.svccl01{margin: 40px 0 100px;}
.svccl01 ul {position: relative; }
.svccl01 ul li{ position: absolute;top: 0; left: 0;}
.svccl01 ul li.base{position: relative !important;}

.svccl01 p{font-size: 20px; font-weight: bold; text-align: center;padding: 50px 0;}


.svccl01 ul li img{ opacity: 0;transition: all 0.7s ease;transform: scale(1.1);}
.svccl01 ul li img.line{ transform: scale(1.02);}
.svccl01 ul li img.kaiten{ transform: scale(1.05) rotate(-30deg);}
.svccl01 ul li img.plate{ transform: scale(0.95);}
.svccl01 ul li img.logo{ transform: scale(1.0);transition: all 1.3s ease;}
.svccl01 ul li img.go{ opacity: 1; transform: scale(1) rotate(0deg) !important;}





@media(max-width:750px){

    .svccl01 p{font-size: 24px; font-weight: bold; text-align: center;padding: 50px 0;}

}


.svccl02{}
.svccl02 >.inner{position: relative;}

.svccl02 header{}
.svccl02 header{}
.svccl02 header{}


.svccl02 ul{}

.svccl02 header{ position: relative; height: 110px;}
.svccl02 .txt01{ position: relative;top: 20px; left: 0;}
.svccl02 .txt02{ position: absolute; bottom: 0; left: 0;}

.svccl02 header img{ width: 70%;}

.svccl02 ul li{ width: 24%; float: left; position: relative;margin-right: 1%;}
.svccl02 ul li.step01{}
.svccl02 ul li.step02{}
.svccl02 ul li.step03{}
.svccl02 ul li.step04{}

.svccl02 .line{ clear: both; padding-top: 20px; margin: 0 auto;}
.svccl02 .line{ width: 800px; overflow: hidden; 
    width:0px; margin-right: 0;transition: all 1.0s ease;}
.svccl02 .line img{ width: 800px;}

.svccl02 .mainTxt{ text-align: center; font-size: 18px;padding: 20px; font-weight: 800;}
.svccl02 .mainTxt span{ color: #6f0038;}



.svccl02 img{ opacity: 0;transition: all 0.4s ease;transform: scale(1);}

.svccl02 .line img{ opacity: 1;}

.svccl02 .txt01 img{position: absolute;top: 58px;transform:translate(0, -40px); width: 60%;}
.svccl02 .txt01.go img{ opacity: 1;top: 48px;}
.svccl02 .txt01.go.go2 img{ opacity: 0.5;top: 38px;}

.svccl02 .txt02.go img{ opacity: 1;}
.svccl02 .txt02.go.go2 img{ opacity: 0.5; }

.svccl02 ul li img{opacity: 0; right:-30px; position: relative;}

.svccl02 ul li img{transition: all 0.4s ease;}
.svccl02 ul li.step01.go img{opacity: 1;right: 0;}
.svccl02 ul li.step02.go img{opacity: 1;right: 0;}
.svccl02 ul li.step03.go img{opacity: 1;right: 0;}
.svccl02 ul li.step04.go img{opacity: 1;right: 0;}

.svccl02 .line.go{width: 800px;margin: 0 auto; }



@media(max-width:750px){

    .svccl02 .line{ width: 0;}

    .svccl02 .mainTxt{ text-align: center; font-size: 22px;padding: 20px; font-weight: 800;}

    .svccl02 .line img{ width: 600px;}
    .svccl02 .line.go{width: 600px;}

}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}







@media(max-width:750px){



}