@charset "utf-8";
.topArea{
width: 100%;
height: 90vh;
}
@media screen and (max-width:767px){
.topArea{
height: 75vh;
}
}
.topArea .videoOuter{
width:100%;
height: 100%;
}
.topArea #movie{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
}
.topArea .bg{
top:0;
left:0;
width:100%;
height:100%;
opacity: 0.45;
}
.topArea .message{
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
width: 90%;
max-width: 584px;
}
.topArea .message .img{
opacity: 0;
transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.topArea .message .message1{
    transition-delay: 0.2s;
}
.topArea .message .message2{
    transition-delay: 0.4s;
}
.topArea.loaded .message .img{
opacity: 1;
transform: translateY(0);
}
.topArea .scroll {
position: absolute;
bottom: 60px;
right: 30px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: 0.6s;
}
@media screen and (max-width:767px){
.topArea .scroll {
bottom: 20px;
right: 20px;
}
}
.topArea.loaded .scroll{
opacity: 1;
transform: translateY(0);
}
.scroll-circle {
width: 30px;
height: 30px;
border: 1px solid #fff;
border-radius: 50%;
position: relative;
margin-inline: auto;
margin-bottom: 10px;
}
.scroll-circle img {
width: 10px;
top: 30%;
left: 50%;
transform: translate(-50%, 0);
animation: arrow-scroll 2s infinite;
}
@keyframes arrow-scroll {
0% {
opacity: 0;
top: 25%;
}
30% {
opacity: 1;
}
80% {
opacity: 0;
top: 55%;
}
100% {
opacity: 0;
top: 55%;
}
}
.capabilitiesArea{
max-width: 1200px;
padding-top: 40px;
margin-top: -40px;
}
@media screen and (max-width:767px){
.capabilitiesArea{
width: 100%;
margin-top: 0;
}
}
.capabilitiesArea li{
width: 32%;
margin-right: 2%;
}
@media screen and (max-width:980px){
.capabilitiesArea li{
width:49%;
margin-right: 2%;
}
.capabilitiesArea li.contentsSemiBlock{
margin-bottom: 25px;
}
}
.capabilitiesArea li:nth-child(3n){
margin-right: 0;
}
@media screen and (max-width:980px){
.capabilitiesArea li:nth-child(3n){
margin-right: 2%;
}
.capabilitiesArea li:nth-child(2n){
margin-right: 0;
}
}
.capabilitiesArea li .icon{
width: 50px;
margin-right: 15px;
}
@media screen and (max-width:767px){
.capabilitiesArea li .icon{
width: 30px;
margin-right:5px;
}
.capabilitiesArea li .txt{
font-size: 1.3rem;
}
}
.aboutArea .contentsBox{
max-width: 670px;
}
@media screen and (max-width:980px){
.aboutArea .btn.sp-tab{
margin-top: 40px;
}
}
@media screen and (max-width:767px){
.serviceArea {
display: block;
}
}
.serviceArea .txtBox{
width: 45%;
box-sizing: border-box;
}
@media screen and (max-width:1222px){
.serviceArea .txtBox{
padding-left:calc(61px - (50vw - 550px));
}
}
@media screen and (max-width:1100px){
.serviceArea .txtBox{
padding-left:5vw;
}
}
@media screen and (max-width:767px){
.serviceArea .txtBox{
padding:0 5vw;
width: 100%;
margin-bottom: 40px;
}
}
.serviceArea .img{
width: 50%;
height: 400px;
}
@media screen and (max-width:767px){
.serviceArea .img{
width: 100%;
height: 250px;
margin-bottom: 40px;
}
}
.serviceArea .img .bg{
background: url("../images/common/img-service01.jpg") center no-repeat;
background-size: cover;
}
@media screen and (max-width:767px){
.strengthArea {
display: block;
}
}
.strengthArea .txtBox{
width: 50%;
box-sizing: border-box;
}
@media screen and (max-width:1222px){
.strengthArea .txtBox{
padding-right:calc(61px - (50vw - 550px));
}
}
@media screen and (max-width:1100px){
.strengthArea .txtBox{
padding-right:5vw;
}
}
@media screen and (max-width:767px){
.strengthArea .txtBox{
padding:0 5vw;
width: 100%;
margin-bottom: 40px;
}
}
.strengthArea .txtBox .block{
width: 49%;
}
@media screen and (max-width:980px){
.strengthArea .txtBox .block{
width: 100%;
}
}
.strengthArea .img{
width: 45%;
height: 400px;
}
@media screen and (max-width:767px){
.strengthArea .img{
width: 100%;
height: 250px;
margin-bottom: 40px;
}
}
.strengthArea .img .bg{
background: url("../images/common/img-strength01.jpg") center no-repeat;
background-size: cover;
}