@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

/* Gradation bg part 
**********************/
.bgGradation {
	position: relative; /*z-indexさせるためにpositionをstatic以外に設定する必要がある*/
    padding: 3% 20% 5%;
    z-index: 3;
    text-shadow: 1px 1px 1px gray;
}
.addPadding {
    padding: 3% 0 8% 8%;
}
.bgGradation::before {
    height: 100%;
    width: 100%;
    animation: gradientAnimation 20s ease infinite, transformation .8s ease-in-out .5s 1 alternate forwards;
    content: '';
    display: block;
    position: absolute; 
	top: 0;
	left: 0;
    z-index: 1;
    -webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased
}
@keyframes transformation {
    0% {transform:skew(0deg, 0deg)}
    100% {transform:skew(0deg, -5deg); box-shadow: 2px 2px 4px gray;
    }
}
@keyframes gradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%;}
}
.bgVision::before {
    background: linear-gradient(270deg, #40BAC9, #5ee06d);
    background-size: 400% 400%;
}
.bgCulture::before {
    background: linear-gradient(270deg, #40BAC9, #5ee06d);
    background-size: 400% 400%;
}
.bgService::before {
    background: linear-gradient(270deg, #40BAC9, #5ee06d);
    background-size: 400% 400%;
}
.bgWorkflow::before {
    background: linear-gradient(270deg, #40BAC9, #5ee06d);
    background-size: 400% 400%;
}
.bgRecruit::before {
    background: linear-gradient(270deg, #f7c244, #F18A73);
    background-size: 400% 400%;
}
.bgGradationContent {
    position: relative;
    z-index: 2;
    font-weight: 500;
}
h2 {
    font-family: 'Roboto Condensed', sans-serif;
    color: #fff; 
    letter-spacing: 8px;
}
.bgGradation p,
.bgGradation a {
    color: #fff; 
    line-height: 1.5em;
}
.fadeIn {
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out 1s forwards;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/* Background white part 
****************************/
.bgWhite {
    /* padding: 20%; */
    background-color: #fff;
    padding: 5rem 20% 10rem; 
    position:relative;
    top: -1rem;
    z-index: 2;
}
.bgWhite h3 {
    font-size: 3rem;
    color: black;
    letter-spacing: 8px;
    /* font-family: "arial narrow"; */
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 6rem;
    
}
.bgWhite h4 {
    font-size: 2.3rem;
    color: #6D6D6D;
    margin-bottom: 3rem;
}
.bgWhite p strong {
    display: block;
    margin: 2rem 0;
    font-size: 1.8rem;
}
.bgWhite p,
.bgWhite dt,
.bgWhite dd {
    color: #6D6D6D;
    z-index: 3;
    position: relative;
    line-height: 2.5rem;
}
.signature,
.bgWhite dt {
    margin-top: 2.5rem;
}
.bgWhite a {
    color: #333;
}

/* fadeIn - fadeOut 
*********************/
.fadeScroll {
    opacity: 0;
    transition-duration: .4s;
	transition-timing-function:ease-in-out ;
	-moz-transition-timing-function:ease-in-out ;
	-webkit-transition-timing-function:ease-in-out ;
}