@charset "utf-8";
/* CSS Document */

#toppage {
	display: none;
}

#top_welfare {
    background-image: url(../../img/bg03.jpg);
    background-position: center center;
    background-size: cover;
    color: #FFFFFF;
    padding-top: 26%;
    padding-bottom: 18%;
    background-repeat: no-repeat;
    margin-top: -13%;
    text-align: center;
    z-index: 20;
    position: relative;
}
#top_welfare .inner {
    position: relative;
    z-index: 10;
}
#top_welfare .inner h4 {
    font-size: 30px;
    line-height: 1.6em;
    padding-bottom: 50px;
}
#top_welfare .inner .come {
    padding-bottom: 50px;
    font-size: 16px;
    line-height: 2em;
}
#top_welfare .inner .arrow {
    padding-top: 4%;
    padding-bottom: 0px;
}
#top_welfare .tri {
    position: absolute;
    bottom: -1px;
    right: 0px;
    width: 100%;
    z-index: 0;
}
#top_welfare .tri img {
    width: 100%;
    height: auto;
}

#top_training {
    background-image: url(../../img/bg02.png);
    background-position: center center;
    background-size: cover;
    color: #FFFFFF;
    padding-top: 28%;
    padding-bottom: 10%;
    background-repeat: no-repeat;
    text-align: center;
    z-index: 21;
    position: relative;
}
#top_training .inner {
    position: relative;
    z-index: 10;
    padding-bottom: 9%;
}

#top_training .tri {
    position: absolute;
    top: -1px;
    left: 0px;
    width: 100%;
    z-index: 0;
}
#top_training .tri img {
    width: 100%;
    height: auto;
}


#top_training .inner h4 {
    font-size: 30px;
    line-height: 1.6em;
    padding-bottom: 50px;
}
#top_training .inner .come {
    padding-bottom: 50px;
    font-size: 16px;
    line-height: 2em;
}
#top_training .inner .arrow {
    padding-top: 4%;
}
#top_work {
    background-image: url(../../img/bg04.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    background-color: #295BC7;
    padding-top: 696px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 2em;
    z-index: 20;
    position: relative;
}
#top_work h4 {
    position: absolute;
    top: 267px;
    left: 50%;
    transform: translateX(-50%);
}

#top_work .photo {
    padding-bottom: 510px;
}
#top_work .photo p {
    width: 50%;
    float: left;
}

#top_work .photo p img {
    width: 100%;
    height: auto;
    padding-bottom: 0px;
}
.work_img {
    text-align: left;
    position: absolute!important;
    left: -20px!important;
    top: 110%!important;
    width: 74%;
}
.work_img img {
    width: 100%;
    height: auto;
}
#top_work .come {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8%;
    font-weight: bold;
}
#top_voice {
    background-color: #6496DE;
    text-align: center;
    padding-top: 700px;
    margin-top: -14%;
    z-index: 20;
    position: relative;
    width: 100%;
    overflow: hidden;
}
#voiceslide {
    transform: rotate(-6.6deg);
    width: 120%;
    margin-left: -10%;
    padding-bottom: 346px;
}

#top_voice h4 {
    padding-bottom: 8%;
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translateX(-50%);
}
#top_voice .arrow {
    padding-top: 6%;
}


.voice_img {
    text-align: right;
    margin-left: auto;
    position: absolute;
    top: 110%!important;
    right: -10px!important;
    width: 80%;
}
.voice_img img {
    width: 100%;
    height: auto;
}
#top_number {
    background-color: #F2F7FF;
    padding-top: 15%;
    padding-bottom: 6%;
    -webkit-transform: skew(0,-7deg);
    -moz-transform: skew(0,-7deg);
    z-index: 25;
    position: relative;
}
#top_number .inner{
-webkit-transform: skew(0,7deg);
-moz-transform: skew(0,7deg);
    
}
.num_img  {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%)
        translateY(-50%);
    z-index: 0;
}
.num_img img  {
    opacity : 0;
    transform : scale(0);
    -webkit-transition: all 0.5s 0.0s;
    -moz-transition: all 0.5s 0.0s;
    -o-transition: all 0.5s 0.0s;
    -ms-transition: all 0.5s 0.0s;
    transition : all 0.5s 0.0s;
}


.num_img.effect-scroll img {
	opacity : 1;
	transform : scale(1);
}

#top_number .box {
    width: 245px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 20px;
    line-height: 2em;
    color: #6F6F6F;
    font-weight: bold;
    position: relative;
    z-index: 10;
}
#top_number .photo {
    padding-top: 34px;
    padding-bottom: 40px;
}
#top_number .but {
    padding-top: 30px;
    padding-bottom: 80px;
}
#top_company {
    background-image: url(../../img/bg01.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding-bottom: 4%;
    text-align: center;
    -webkit-transform: skew(0,-7deg);
    -moz-transform: skew(0,-7deg);
    position: relative;
    z-index: 20;
}
#top_company h4 {
    top: 290px;
    position: absolute;
    left: 50%;
    transform: translate(-50% , 0);
}
.comp_img {
    margin-left: -10px;
    text-align: left;
    padding-bottom: 5%;
    z-index: 0;
    position: absolute;
    top: 33%;
}
#top_company .inner .come {
    font-size: 24px;
    color: #FFFFFF;
    line-height: 2em;
    padding-bottom: 3%;
    z-index: 20;
    position: relative;
    font-weight: bold;
}
#top_company .inner .but {
    padding-bottom: 9%;
}
#top_company .inner{
    -webkit-transform: skew(0,7deg);
    -moz-transform: skew(0,7deg);
    padding-top: 1168px;
}



#top_color {
    width: 100%;
    height: 100vh;
    background-color: #72ACFF;
    opacity: 0.4;
    position: fixed;
    top: 64px;
    padding-bottom: 64px;
    z-index: -1;
    mix-blend-mode: multiply;
}
#top_bg {
    width: 100%;
    height: calc(100vh - 64px);
    position: fixed;
    top: 64px;
    z-index: -2;
    background-image: url(../../img/photo_main.jpg);
    background-position: center bottom;
    background-size: cover;
    overflow: hidden;
}
#top_movie {
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    z-index: 1000;
}
#top_bg video {
  min-width: 116vw;
  min-height: 130vh;
  position: absolute;
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  #top_bg video {
    width: 100%;
    top: 50%;
      left: 50%;
    transform: translate(-50% ,-50%);
	  min-width: 110vw;
  min-height: 130vh;
  position: absolute;
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  #top_bg video {
    height: 100%;
      top:50%;
    left: 50%;
    transform: translate(-50% ,-50%);
  }
}
#top_movie video {
  min-width: 116vw;
  min-height: 130vh;
  position: absolute;
}

/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  #top_movie video {
    width: 100%;
    top: 50%;
      left: 50%;
    transform: translate(-50% ,-50%);
	  min-width: 110vw;
  min-height: 130vh;
  position: absolute;
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  #top_movie video {
    height: 100%;
      top:50%;
    left: 50%;
    transform: translate(-50% ,-50%);
  }
}
#top_message {
    position: relative;
    z-index: 20;
    padding-top: 48%;
    text-align: center;
    font-size: 18px;
    line-height: 2em;
    color: rgba(255,255,255,1.00);
}


#top_message h4 {
    padding-bottom: 7%;
    position: absolute;
    top: 20%!important;
    left: 50%!important;
    transform: translate(-50% ,-50%)!important;
}
#top_message h5 {
    font-size: 30px;
    line-height: 2em;
    font-weight: bold;
    padding-bottom: 8%;
}
#top_message .come {
    position: relative;
    margin-bottom: 4%;
}
#top_message .come p {
    padding-bottom: 4%;
}
.messeimgwrap {
    width: 1100px;
    position: absolute;
    margin-top: -6%;
    top: 0px;
    transform: translateX(-50%);
    left: 50%;
}
.masse_img {
    padding-bottom: 6%;
    opacity : 0;
	transform : scale(0);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.masse_img.effect-scroll {
	opacity : 1;
	transform : scale(1);
}
.messeimg01 {
    position: absolute;
    left: 60px;
    top: 20px;
	opacity : 0;
	transform : translate(-40px, -40px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg01.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

.messeimg03 {
    position: absolute;
    top: 180px;
    left: 0px;
    opacity : 0;
	transform : translate(-40px, 0px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg03.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
.messeimg05 {
    position: absolute;
    top: 330px;
    left: 11px;
    opacity : 0;
	transform : translate(-40px, 40px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg05.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
.messeimg02 {
    position: absolute;
    right: 52px;
    top: 0px;
    opacity : 0;
	transform : translate(40px, -40px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg02.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
.messeimg04 {
    position: absolute;
    right: 0px;
    top: 140px;
    opacity : 0;
	transform : translate(40px, 0px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg04.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
.messeimg06 {
    position: absolute;
    right: 56px;
    top: 324px;
    opacity : 0;
	transform : translate(40px, 40px);
	-webkit-transition: all 0.5s 0.02s;
    -moz-transition: all 0.5s 0.02s;
    -o-transition: all 0.5s 0.02s;
    -ms-transition: all 0.5s 0.02s;
	transition : all 0.5s 0.02s;
}


.messeimg06.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

#top_message .arrow  {
    padding-bottom: 10%;
}
#top_main {
    width: 100%;
    height: 100vh!important;
    position: relative;
    z-index: 20;
    text-align: center;
}
#top_catch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)
        translateY(-50%);
    width: 50%;
}
#top_catch img {
    width: 100%;
    height: auto;
}
#top_img {
    width: 73%;
    position: absolute;
    bottom: 0px;
    left: 50%!important;
    transform: translateX(-50%)
        translateY(-50%)!important;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#top_img p {
    padding-bottom: 0px;
}

#top_img img {
    width: 100%;
    height: auto;
    bottom: auto;
}
#top_main .arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
#top_dot {
    position: fixed;
    z-index: 40;
    right: 40px;
    top: 50%;
    text-align: right;
    font-size: 12px;
    line-height: 1.6em;
}
#top_dot a {
    color: #EBEDED;
    text-decoration: none;
}
#top_dot a:hover {
    color: #72ACFF;
}

#top_dot li {
    padding-top: 2px;
    padding-bottom: 2px;
}

#top_dot a .dothide {
    padding-right: 10px;
    transition: 0.2s;
    opacity: 0;
}
#top_dot a:hover .dothide {
    color: #D4D4D4;
    opacity: 1;
}
.slide li,.slide02 li  {
    width: 260px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 10px;
}
.slide li img,.slide02 li img {
    width: 100%;
    height: auto;
}
#movie_skip {
    border: 1px solid #535252;
    position: absolute;
    right: 40px;
    bottom: 40px;
    padding: 0px;
}
#movie_skip a {
    color: #535252;
    text-decoration: none;
    padding-top: 4px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 4px;
}