.topMessage{ position: relative; height:600px;}
.topMessage >.inner{ width: 1000px; margin: 0 auto; position: relative; ;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@media(max-width:750px){

    .topMessage{ position: relative; height:auto;padding: 50px;}
    .topMessage >.inner{ width: auto; margin: 0 auto; position: relative; ;
        position: relative;
        top: 0;
        left: 0;
        transform:none;
    }
}



.topMessage .txtArea{z-index: 2;position:relative;}
.topMessage .txtArea h2{font-family: "Roboto" , sans-serif; font-size: 35px; font-weight: 800; letter-spacing: 0.05em;margin-bottom: 30px;
    position: relative;transition: all 1.0s ease;}
.topMessage .txtArea .intro{ font-size: 38px; font-weight: bold; line-height: 1.4em;letter-spacing: 0.05em;margin-bottom: 40px;
    position: relative;transition: all 1.0s ease;}
.topMessage .txtArea .intro img{ width:160px;}
.topMessage .txtArea .detail{font-size: 16px; font-weight: bold;position: 
    relative;transition: all 1.0s ease;}

    
@media(max-width:750px){

    .topMessage .txtArea .detail{font-size: 24px; }
}



.topMessage ul{ position: absolute;left: 450px; top: 0;z-index: 1;}
.topMessage ul li{ width: 230px; position: absolute;}
.topMessage ul li img{ position: absolute;transition: all .8s ease; left: 0; top: 0;}
.topMessage ul li.p01{left: 0;}
.topMessage ul li.p02{left:152px}
.topMessage ul li.p03{left: 304px;}

.topMessage h2.ready{top: 20px; opacity: 0;}
.topMessage .intro.ready{top: 20px; opacity: 0;}
.topMessage .detail.ready{top: 20px; opacity: 0;}

.topMessage ul li.p01.ready img{top: -30px; opacity: 0;}
.topMessage ul li.p02.ready img{opacity: 0;}
.topMessage ul li.p03.ready img{top:30px; opacity: 0;}



@media(max-width:750px){

    .topMessage ul{ position: absolute;left: 250px; top: 0;}
    .topMessage ul li{ width: 130px; position: absolute;}

    .topMessage ul li.p01{left: 124px;}
.topMessage ul li.p02{left:214px}
.topMessage ul li.p03{left: 304px;}

}







.topCompany{
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    position: relative; width: 100%;
    overflow: hidden;
}

.topCompany >.inner{background: url(/common/images/company/01.png) no-repeat 400px center;background-size: 1600px auto;}

.topCompany .inner2{ width: 1000px; height: 600px; margin: 0 auto; position: relative;}

.topCompany .whiteBar{
    width: 300px; height: 100%; position: absolute; top: 0; left: 0;  
    transform: skewX(30deg) scale(9.0);
    background: #fff;
}

.topCompany .sicLogo{ width: 150px; position: absolute; top: 220px; left: 60px;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}

@media(max-width:750px){
    .topCompany .inner2{ width: auto; height: 500px; margin: 0 auto; position: relative;}
    .topCompany .sicLogo{ width: 130px; position: absolute; top: 180px; left: 80px;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
    .topCompany .whiteBar{
        width: 200px; left: 50px;  
    }
}






.topCompany .txtArea{ 
    width: 60%; 
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
}

.topCompany .txtArea header{ position: relative;}
.topCompany .txtArea header .backTxt{ opacity: 0.2; width: 60%;margin: 0 auto;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topCompany .txtArea header h2{text-align: center; color: #fff; font-weight: 800; font-size: 24px; letter-spacing: 0.2em;margin-top: -20px;z-index: 2; position: relative;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topCompany .txtArea p{ text-align: center; color: #fff; font-size: 26px;padding-top: 30px; font-weight: 800;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}

.whiteBar.go{ scale: 1.2; animation: kurukuru 1.2s cubic-bezier(0.13, 0.729, 0.183, 1); animation-fill-mode: forwards;}

@keyframes kurukuru {
    0%{transform: skewX(-60deg) scale(7.0); }
    100%{transform: skewX(-20deg) scale(1.2);}
}


.topCompany .sicLogo.start{opacity: 0;transform: scale(0.8);}
.topCompany .txtArea header .backTxt.start{ opacity: 0; top:20px;}
.topCompany .txtArea header h2.start{opacity: 0; top:20px;}
.topCompany .txtArea p.start{ opacity: 0; top:20px;}










.btn_white{}
.btn_white a{
    transition: all 0.5s ease-in-out;
    border: 1px solid #fff;
    display: inline-block;
    color: #fff;text-align: center;
    font-size: 16px;
    padding: 15px 0;
    line-height: 1em;
    position: relative;
    min-width: 240px;
    overflow: hidden;
}

.btn_white span{
    transition: all 0.5s ease-in-out;
    display: inline-block;height: 100%;width:0;
    position: absolute;left:0;top: 0;z-index: -1;
    background:#fff;
    transform: skewX(-20deg);
    left: -10px;
}

.btn_white a:hover span{
    width: 280px;
    color: #b8045e;
    
 }
 .btn_white a:hover{color: #b8045e;}

 .btn_white a:after{
     content: "";
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 20px;
     width: 10px; 
     height: 10px; 
     border-top: 1px solid #fff; 
     border-right: 1px solid #fff;
     transform: rotate(45deg);
     transition: all 0.3s ease-in-out;
 }

 .btn_white a:hover:after{
     border-top: 1px solid #b8045e; 
     border-right: 1px solid #b8045e;
 }

@media(max-width:750px){
    .btn_white a{
 
        font-size: 24px;
        padding: 15px 0;
        min-width: 240px;
    }
}




.topCareer{ position: relative; height: 100vh;min-height: 700px;}
.topCareer >.inner{ width: 900px;margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

.topCareer header{}
.topCareer header h2{display: inline-block; font-size: 38px; font-weight: 800;line-height: 1.4em; font-family: Roboto,sans-serif;letter-spacing: 0.1em;}
.topCareer header p{display: inline-block; font-weight: bold;}

.topCareer .secTxt{ font-size: 38px; font-weight: 800;}

@media(max-width:750px){
    .topCareer{ position: relative; height: auto;min-height: none;padding: 50px 0;}
    .topCareer >.inner{ width: auto;margin: 0 50px;
        position: relative;
        top: 0;
        left: 0;
        transform: none;}
}




.topCareer ul{    
    width: auto;
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}

.topCareer ul li{ position: relative;}

.topCareer ul li img.imgMain{position: relative;z-index: 2;}
.topCareer ul li img.imgSub{position: absolute; width: 100%; top: 6px; left: 6px;}
.topCareer .crTxt{font-size: 20px; font-weight: 800;position: relative;padding: 20px 0;}
.topCareer .crTxt p{
  text-align: center;}
.topCareer .crTxt span{ border-bottom: 2px solid #b8045e; display: inline-block;}

@media(max-width:750px){

.topCareer ul{    
    width: auto;
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}
.topCareer .crTxt{font-size: 24px;}
}






.topCareer header h2{transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);position: relative;top: 0;}
.topCareer header p{transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);position: relative;top: 0;}
.topCareer .secTxt{transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);position: relative;top: 0;}
.topCareer ul li img.imgMain{transition: all 0.5s cubic-bezier(0.13, 0.729, 0.183, 1);position: relative;top: 0;}
.topCareer ul li img.imgSub{transition: all 1.0s ease;position: absolute;top: 5px; left: 5px;}
.topCareer .crTxt{transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topCareer .btn{transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);position: relative;top: 0;}

@media(max-width:750px){

}


.topCareer header h2.ready{ opacity: 0; top: -10px;}
.topCareer header p.ready{ opacity: 0; top: -10px;}
.topCareer .secTxt.ready{ opacity: 0; top: -10px;}

.topCareer ul li img.imgMain.ready{ opacity: 0; top: -30px; left: -30px;}
.topCareer ul li img.imgSub.ready{ opacity: 0; top: 10px; left: 10px;}

.topCareer .crTxt.ready{ opacity: 0; top: -10px;}
.topCareer .btn.ready{ opacity: 0; top: -10px;}

@media(max-width:750px){

}














.backTxtBtn{ margin: 0 auto;   width: 300px;  text-align: center;padding: 0;}
.backTxtBtn a{display: block;text-align: center;color: #fff;border-radius: 7px;border: 3px solid #b8045e;padding: 0;
    position: relative;width: 100%;height: 100%;overflow: hidden; transition: all 0.2s ease-in-out;
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
}
.backTxtBtn a span.en{color:rgba(0,0,0,0.1);  width: 100%; font-size: 50px;font-family: roboto; font-style: italic; 
    font-weight: 800;line-height: 1em; vertical-align: bottom; display: inline-block;letter-spacing: -0.08em; transition: all 0.5s ease-out;
transform: scale(1.5);}


.backTxtBtn a span.ja{
    position: absolute; transition: all 0.3s ease-in-out;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1em;
    width: 100%;
    font-weight: bold;
}


.backTxtBtn a:hover{opacity: 1;

    background-image: -moz-linear-gradient( -30deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( -30deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( -30deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);}
.backTxtBtn a:hover .ja{opacity: 1;}
.backTxtBtn a:hover .en{color:rgba(217, 88, 137, 0.5);
    filter: blur(2px); letter-spacing: 0.01em; transform: scale(1.5);}

@media(min-width:751px){

}



/*action*/




.topPeople{ height: 500px; position: relative;overflow: hidden;}

.topPeople .background{background:url(/common/images/top/people.png)no-repeat left center;background-size: auto 100%; width: 100%; height: 500px;
position: absolute; top: 0; left: 0;}

.topPeople >.inner{ width: 1000px; height:100%;margin: 0 auto;position: relative;}

.topPeople >.inner >.inner2{
    width: 50%; 
    margin-left: 55%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}


@media(max-width:750px){
    .topPeople >.inner{ width: auto; height:400px;margin: 0 auto;position: relative;}
    .topPeople .background{background:url(/common/images/top/people.png)no-repeat -70px center;background-size: auto 100%; 
        width: 100%; height: 360px;
    position: absolute; top: 0; left: 0;}

}




.topPeople header{margin-bottom: 15px;}
.topPeople header p{ font-size: 25px;font-weight: bold; margin-bottom: -5px;padding-bottom: 0; display: inline-block;}
.topPeople header h2{font-size: 60px; font-weight: 800;line-height: 1.4em; font-family: Roboto,sans-serif; letter-spacing: 0.08em;display: inline-block;}

.topPeople .secTxt{ font-size: 18px; font-weight: bold; margin-bottom: 30px;}

.topPeople .backTxtBtn{text-align: left;}
.topPeople .backTxtBtn {margin: 0 auto 0 0;}

@media(max-width:750px){

}




.topPeople .background{ left: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topPeople header p{position: relative; top: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topPeople header h2{position: relative; top: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topPeople .secTxt{position: relative; top: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topPeople .backTxtBtn{position: relative; top: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}

.topPeople .background.ready{ left: -30px; opacity: 0;}
.topPeople header p.ready{top: -10px; opacity: 0;}
.topPeople header h2.ready{top: -10px; opacity: 0;}
.topPeople .secTxt.ready{top: -10px; opacity: 0;}
.topPeople .backTxtBtn.ready{top: -10px; opacity: 0;}


@media(max-width:750px){

}





.topWorkStyle{
    padding: 50px;
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
}

.topWorkStyle >.inner{ width: auto;max-width: 1000px; margin: 0 auto;}

.topWorkStyle ul{    width: auto;
    margin: 0 auto ;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: 0;
}

.topWorkStyle ul li{ position: relative; overflow: hidden;}
.topWorkStyle ul li .mainImg{position: relative;}
.topWorkStyle ul li .subImg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topWorkStyle ul li .whiteCover{position: absolute; top: 0; right: 0; width: 0; height: 100%; background: #fff; opacity: 1;}


.wstl02 .inner{ position: relative; top: 0; height: 100%;}
.wstl02 .inner2{ position: relative; top: 0; height: 100%;}
.wstl02 .inner3{ width: 70%; margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

.wstl02 header{ max-width: 200px; margin: 0 auto;}
.wstl02 p{ max-width: 200px; margin: 0 auto; color: #fff;font-weight: bold;padding: 20px 0;font-size: 18px;margin-bottom: 0;}

.wstl02 p.btn_white a{ max-width: 100%; min-width:0; display: block; margin-bottom: 0;}

.topWorkStyle ul li .inner{left:0;position: relative;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topWorkStyle ul li .inner.ready{ left: -100%; top: 0;}

.topWorkStyle ul li .whiteCover{position: absolute;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}
.topWorkStyle ul li .whiteCover.ready{ width: 100%; opacity: 1; }

.topWorkStyle ul li .subImg.on{height: 0;transition: all 1.0s cubic-bezier(0.13, 0.729, 0.183, 1);}

@media(max-width:750px){

    .topWorkStyle{
        padding: 50px 0;}
    .wstl02 p.btn_white a{ max-width: 100%; min-width:0; display: block; top: -10px;}


    .wstl02 p{ max-width: 200px; margin: 0 auto; color: #fff;font-weight: bold;padding: 20px 0 0;font-size: 18px;margin-bottom: 0;}
}










.topEntry{ padding: 200px 0; position: relative; overflow: hidden;}
.topEntry >.inner{ width: 1000px; margin: 0 auto;}

.topEntry .background01{
    position: absolute; 
    width: 100%; height: 100%; 
    top: 0; 
    transform:skewX(10deg) scale(1.4); 
    background: url(/common/images/top/entry_bg.jpg) no-repeat center center; 
    background-size: cover;z-index: -1;
    transition: all 3.0s ease-out;}

.topEntry .te_en{ width: 800px; margin: 0 auto; margin-bottom: 50px;transition: all 1.0s ease-out;opacity: 0;}
.topEntry .te_ja{ margin-bottom: 50px;transition: all 1.0s ease-out;opacity: 0;}
.topEntry .backTxtBtn{opacity: 0;}

.topEntry .background01.on{transform:skewX(0deg) scale(1.05);}

.topEntry .te_en.on{opacity: 1;}
.topEntry .te_ja.on{opacity: 1;}
.topEntry .backTxtBtn.on{opacity: 1;}



@media(max-width:750px){
    .topEntry >.inner{ width: auto; margin: 0 50px;}
    .topEntry .te_en{ width: 80%;}

}









.ceoMessage{ border-top: 1px solid #ccc;padding-top: 100px; margin-bottom: 100px;}

.ceoMessage header{}
.ceoMessage header h2{
    text-align: center;
    font-size: 40px;
    background-image: -moz-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    background-image: -ms-linear-gradient( 0deg, rgba(128,0,63,0.99608) 0%, rgb(192,4,99) 71%, rgb(202,0,100) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0px;
    font-weight: 900;
    font-family: "Hind Madurai", sans-serif;
    letter-spacing: 0.1em;
    line-height: 1.4em;
}

.ceoMessage header p{font-size: 50px; font-weight: 300; text-align: center;margin-bottom: 100px;}

@media(max-width:750px){
    .ceoMessage header h2{text-align: left;margin: 0 50px 0;}
    .ceoMessage header p{font-size: 36px; font-weight: 300; text-align: left; text-indent:-0.5em ; margin:0 50px 100px;}
}




.ceoImgArea{ position:absolute; width:900px; right: 0;
    pointer-events: none;
    left: 0;
    margin: 0 auto; z-index: 2;}

.ceoImgArea >.inner{ width: 200px;margin: 0 0 0 auto; position: relative;right: 0;}


@media(max-width:750px){
    .ceoImgArea{ position:absolute; width:auto; }
    .ceoImgArea >.inner{ width: 190px;margin: 0 0 0 auto; position: relative;right: 20px;}
}






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




@media(max-width:750px){



}





@media(max-width:750px){


}












@media(max-width:750px){

}



@media(max-width:750px){


        
}


















.entryBG2{ position:absolute; width: 100%; scale: 1.2;
    transform-origin: 80% 30%;animation: yurayura5 20s ease-in-out infinite; top: 50px;
}


@media(max-width:750px){
    .entryBG,.entryBG2{
        top: 0px;
    }    
}

@keyframes yurayura4 {
    0% , 100%{transform: rotate3d(0, 0, 0, 0deg); height: auto; opacity: 1;}
    50%{transform: rotate3d(-01, -0.4, -0.2, 40deg); height: auto;  opacity: 0.7;}
}

@keyframes yurayura5 {
    0% , 100%{transform: rotate3d(-0.5, 0, 0, 0deg);  height: auto;   opacity: 0.4;}
    50%{transform: rotate3d(0.5, 1, -0.4, 30deg); height: auto; opacity: 1;}
}



@media(max-width:750px){


}