@charset "utf-8";
/* CSS Document */
*{margin: 0; padding:0;}
body{background: #1a2d51; color: #fff;}
li{list-style: none;}
img{vertical-align: bottom;}
.sp-dsp-block{display:none;}
/* bg movie */
.bgmovie {position: fixed;width: 100%;height: 100vh;z-index: -1; animation: fade 2s ease 0s 1 forwards;}
@keyframes fade {
  0% {
    opacity : 0;
  }
  100% {
   opacity :1;
  }
}
.bgmovie video{width: auto;position: absolute;bottom:0;height: 100%;top: 50%;left: 50%;transform: translate(-50%,-50%);}

/* header */
header,footer p{max-width:950px; margin:0 auto; display: block; color:#fff;}
header{padding:35px 0;}

/* main */
main{z-index: 1;text-align: center;}
.mainCatch{   display: flex;
    justify-content: center;  align-items: center; padding-top:12px; padding-bottom:27px; opacity: 0;}
@media only screen and (max-height: 699px) {
    .mainCatch{  animation: mainCatch-s 2s ease 1s 1 forwards;}
}
@keyframes mainCatch-s {
  0% {
    opacity : 0;
  }
  100% {
   opacity :1;
  }
}
@media only screen and (min-height: 670px) {
    .mainCatch{  animation: mainCatch 2s ease 1s 1 forwards;}
}
@keyframes mainCatch {
  0% {
    opacity : 0;
    height: calc(100vh - 90px);
  }
  50% {
   opacity :1;
   height: calc(100vh - 90px);
  }
  100% {
   opacity :1;
   height: calc(70vh - 90px);
  }
}
.mainCatch h1{-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;    display: flex;
    align-items: center;}
.subCatch{margin:46px 0;  opacity: 0;animation: subCatch 0.5s ease 3s 1 forwards;}
.text{line-height: 2; font-size: 16px;max-width:950px; margin:0 auto;}
.text p{margin-bottom: 2em;}
.text p:first-child{ opacity: 0; animation: text-ani1 0.5s ease 3.2s 1 forwards;}
.text p:nth-child(2){ opacity: 0; animation: text-ani2 0.5s ease 3.4s 1 forwards;}
.text p:nth-child(3){ opacity: 0; animation: text-ani3 0.5s ease 3.6s 1 forwards;}
.text p:nth-child(4){ opacity: 0; animation: text-ani3 0.5s ease 3.6s 1 forwards;}
@keyframes subCatch {
  0% {    opacity : 0;    transform : translate(0, 25px);  }
  100% {   opacity :1;   transform : translate(0, 0);  }
}
@keyframes text-ani1 {
  0% {    opacity : 0;    transform : translate(0, 25px);  }
  100% {   opacity :1;   transform : translate(0, 0);  }
}
@keyframes text-ani2 {
  0% {    opacity : 0;    transform : translate(0, 25px);  }
  100% {   opacity :1;   transform : translate(0, 0);  }
}
@keyframes text-ani3 {
  0% {    opacity : 0;    transform : translate(0, 25px);  }
  100% {   opacity :1;   transform : translate(0, 0);  }
}

@keyframes text-ani4 {
  0% {    opacity : 0;    transform : translate(0, 25px);  }
  100% {   opacity :1;   transform : translate(0, 0);  }
}
/* webinar */
.webinar{position: relative;margin:80px 0; padding:60px 0; line-height: 1.5; background: rgba(255,255,255,0.6); color: #104169;}
.webinar h2{font-size: 18px;}
.webinar ul{padding-top:20px;display: flex; justify-content: space-between; flex-wrap: wrap;max-width:950px; margin:0 auto;}
.webinar li{margin-bottom: 2em; background: #fff; padding:10px;width:calc(48.5% - 20px); }
.webinar li:first-child{width:100%;}
.webinar li h3 span{font-size: 16px;}
.webinar li:first-child{padding:20px;}
.webinar li:first-child h3{font-size: 24px;line-height: 1.1; margin-bottom: 18px;color: #104169;}
.webinar li:not(:first-child) p{color:#000;}
.webinar li:first-child p{font-weight: bold; font-size: 18px;}
.webinar li:first-child span.label{background:  #104169; color:#fff; padding:2px 5px; display: inline-block; margin-right: 10px; font-size: 14px;}
.webinar li:first-child span.s{font-size: 16px;}
.webinar .button{ width:10em; margin:0 auto; position: relative;margin-top:20px;background: none;border: none;background: #104169;color: #fff;font-size:16px;font-weight: bold;font-family: 'Noto Sans Japanese';padding: 15px 100px 15px 50px;transition: all 300ms 0s ease;}
.webinar a{color:#fff; text-decoration: none;}
.webinar .button:hover{cursor: pointer;}
.webinar .button:before{
    position: absolute;
    content: '';
    width: 9px;
    height: 9px;
    border: 0px;
    border-top: solid 1px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: calc(50% - 5px);
    right: 44px;
    transition: all 300ms 0s ease;
    }
.webinar .button:after{
    position: absolute;
    content: '';
    width: 46px;
    height: 1px;
    border: 0px;
    border-top: solid 1px #fff;
    top: 50%;
    right: 41px;
    transition: all 300ms 0s ease;
    }
.webinar .button:hover{background:#e53935;}
.webinar .button:hover:before{right: 24px;}
.webinar .button:hover:after{right: 21px;}
/* solution */
.solution{position: relative;max-width:950px; margin:0 auto;}
.solution h2{font-size: 18px; margin-bottom:17px;}
.solution ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.solution li{width:48.5%; margin-top:23px;}
.solution li img{width:100%;}
.solution li a{transition : all 300ms;}
.solution li a:hover{opacity: .6;}

/* recruit */
.recruit {position: relative;max-width:950px; margin:80px auto; border-top:solid 1px #fff; padding-top:80px;}
.recruit p{margin-bottom: 30px; font-size: 18px; font-weight: bold;}
.recruit img{max-width: 100%;}
.recruit a{transition : all 300ms;}
.recruit a:hover{opacity: .6;}

/* footer */
footer{background:#333; font-size:12px;padding:16px; margin-top:128px;text-align: center;}

@media only screen and (max-width: 900px) {
    header, .text, .solution, .webinar{padding-left: 20px;padding-right: 20px;}
    .recruit{margin-left:20px; margin-right: 20px;}
    .bgmovie video {
    width:auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    .subCatch img{max-width:100%;}
}
@media only screen and (max-width: 550px) {
    .mainCatch h1{ writing-mode: initial;     -ms-writing-mode: initial;  flex-direction: row-reverse;}
    header {    padding-top: 15px;}
    header img{width:40%;}
    .sp-dsp-block{display: block;}
    .solution li{width: 100%;}
    footer{margin-top:46px;}
    .webinar ul{display: block;}
    .webinar li:first-child{width:calc(100% - 46px);}
    .webinar li{width:calc(100% - 20px);}
}