@charset "utf-8";

/* mainVisual */
#mainVisual{
  width:100%;
  margin:0 auto;
  height:auto;
  background: #000;
  position: relative;
  overflow: hidden;
  /*padding-bottom:52px;*/
  box-sizing: border-box;
}

/*#mainVisual .vflogoBlock{
  background: #000;
  width:100%;
  height:52px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom:0;
  left:0;
  z-index:4;
}*/

#mainVisual .vflogoBlock{
  background: #000;
  width:100%;
  height:52px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  z-index:4;
}

#mainVisual .vflogoBlock img{
  width:300px;
  height:auto;
  margin-left:1%;
}

#mainVisual .slideBox{
  width:100%;
  height:calc(100% - 52px);
  position: absolute;
  /*top:0;left:0;*/
  top:0;left:50%;transform: translateX(-50%);
  overflow: hidden;
  background-color: #000;
}

#mainVisual .slideBox .backImg{
  width:100%;
  height:auto;
}

#mainVisual .dummyImg{
  opacity: 0;
  width:100%;
}


/***** sl1 *****/
#sl1{
  background: url("../img/top/main/slide1.jpg") center bottom no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 2.5s;
}

#sl1 .item1{
  position: absolute;
  /*top:55%;*/
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.5s;
  width:67.3%;
  max-width: 862px;
}

#sl1 .item2,
#sl1 .item3{
  width:43.1%;
  max-width: 897px;
  position: absolute;
  /*transition: opacity .8s,top .8s;*/
  transition: opacity .8s,transform .8s;
}

#sl1 .item1 img,
#sl1 .item2 img,
#sl1 .item3 img{
  max-width:100%;
}

#sl1 .item2{
  top:1%;
  right:51%;
  /*transform: translateX(10%);*/
  opacity: 0;
}

#sl1 .item3{
  bottom:1%;
  left:51%;
  /*transform: translateX(-10%);*/
  opacity: 0;
}

#sl1 .imgCap{
  color:#FFF;
  position: absolute;
  bottom:2px;
  font-size:14px;
  text-shadow:1px 1px 3px #000,-1px -1px 3px #000;
  opacity: 0;
  transition: opacity .5s;
}

#sl1 .imgCap#hcap{
  right:calc(50% + 5px);
}

#sl1 .imgCap#acap{
  right:5px;
}

#sl1.start,
#sl1.start .imgCap{
  opacity: 1;
}

#sl1 .item1.start{
  top:50%;
  opacity: 1;
  transition: opacity .8s;
}

#sl1 .item1.start.fo{
  opacity: 0;
}

#sl1 .item2.start,
#sl1 .item3.start{
  opacity: 1;
  transform: translateX(0);
}
/***** //sl1 *****/

/***** sl2 *****/
#sl2{
  background: url("../img/top/main/slide2.jpg") center bottom no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 2.5s;
}

#sl2 .item1{
  position: absolute;
  /*top:55%;*/
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  opacity: 0;
  /*transition: opacity .8s,top .8s;*/
  transition: opacity 2.5s;
  width:90.3%;
  max-width: 1156px;
}

#sl2 .item1 img{
  max-width:100%;
}

#sl2.start{
  opacity: 1;
}

#sl2 .item1.start{
  top:50%;
  opacity: 1;
}
/***** //sl2 *****/

/***** sl3 *****/
#sl3{
  background: url("../img/top/main/slide3.jpg") center bottom no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 2.5s;
}

#sl3 .item1{
  position: absolute;
  /*top:55%;*/
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  opacity: 0;
  /*transition: opacity .8s,top .8s;*/
  transition: opacity 2.5s;
  width:86.8%;
  max-width: 1111px;
}

#sl3 .item1 img{
  max-width:100%;
}

#sl3.start{
  opacity: 1;
}

#sl3 .item1.start{
  top:50%;
  opacity: 1;
}
/***** //sl3 *****/

/***** sl4 *****/
#sl4{
  /*background: url("../img/top/main/slide4.jpg") right bottom no-repeat;*/
  height:100% !important;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s;
  left:auto;
  right:0;
}

#sl4 .backImg{
  width:auto  !important;
  height:100% !important;
  transform-origin: right center;
  transform: scale(2);
  transition: transform 1s ease-in;
  position: absolute;
  right:0;
  top:0;
}

#sl4 .item1{
  position: absolute;
  top:50%;
  left:10%;
  transform:translateY(-50%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s,top 1.5s;
  /*width:75.9%;*/
  width:64.9%;
  max-width: 1125px;
}

#sl4 .item1 img{
  max-width:100%;
}

#sl4.start{
  opacity: 1;
}

#sl4.start .backImg{
  transform: scale(1);
}

#sl4 .item1.start{
  left:2%;
  opacity: 1;
}
/***** //sl4 *****/

/* //mainVisual */

/* message */
#message{
  width:100%;
  background: #333;
  padding:80px 0;
}

#message .inner{
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

#message h2 img{
  display:block;
  margin:0 auto;
}

#message .msgWrap{
  margin-top:50px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}

#message .photo{
  width:350px;
}

#message .photo img{
  width:100%;
  height: auto;
}

#message .txt{
  width:calc(100% - 380px);
}

#message .txt p{
  color:#FFF;
  text-align: justify;
  line-height: 1.7;
}

#message .txt p.messagecaption{
  margin-top:1em;
  font-size:12px;
}

#message .signature{
  width:fit-content;
  margin:50px 0 0 auto;
}

#message .signature p{
  font-size:14px;
}

.signature p.signature_box{
  display: flex;
  align-items:center;
  padding: .5em 0;
}
/*#message .signature p strong{
  font-size:25px;
  margin-left:1em;
}*/
#message .signature p span.post{
  display: block;
}

#message .signature p span.signature_image{
  margin-left:1em;
  display: block;
  width: 15em;
  height: 3em;
  background:top center url(/recruit/img/top/hvf_president_signature.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

#message .signature p .signature_image span{
  display: none;
}
/* message */

/* linkNav */
#linkNav{
  width:100%;
}

#linkNav section{
  display:flex;
  justify-content: space-between;
  background: #ebebeb;
}

#linkNav section .imgBox{
  width:47%;
  position: relative;
  line-height: 0;
}

#linkNav section .imgBox img{
  width:100%;
}

#linkNav section .txtBox{
  width:53%;
  display:flex;
  justify-content: center;
  align-items: center;
}

#linkNav section .txtBox p{
  font-size:34px;
  font-weight: bold;
  color:#555;
  text-align: center;
  letter-spacing: 0.1em;
}

#linkNav section .txtBox p span{
  display:inline-block;
}

#linkNav section .txtBox p::after{
  content: '';
  display:block;
  width:140px;
  height:1px;
  background: #b6b6b6;
  margin:15px auto 0;
}

#linkNav section .txtBox a{
  display:block;
  width:320px;
  height:56px;
  box-sizing: border-box;
  color:#555;
  font-size:18px;
  line-height: 54px;
  border: 1px solid #b6b6b6;
  margin:40px auto 0;
  text-align: center;
  position: relative;
}

#linkNav section .txtBox a:after{
  content: '';
  display: block;
  width:5px;
  height:5px;
  border: 1px solid #555;
  border-width: 0 1px 1px 0;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  top:50%;
  right:5%;
}

#linkNav section .txtBox a:hover{
  color:#FFF;
  background:#555;
}

#linkNav section .txtBox a:hover:after{
  border-color:#FFF;
}

#linkNav section:nth-child(even){
  flex-flow: row-reverse;
  background: #FFF;
}

#qVideo iframe{
  position: absolute;
  top:0;
  left:0;
  z-index:1;
}

#qVideo img{
  position: relative;
  z-index:0;
  opacity: 1;
}
/* //linkNav */


/* 1280px以下のモニター用 */
@media only screen and (min-width:801px) and (max-width: 1340px) {
  #message .inner{
    padding:0 30px;
    box-sizing: border-box;
  }
}


@media only screen and (max-width:800px){
  
  /* mainVisual */
  #mainVisual{
    width:100%;
    min-width:inherit;
    height:auto;
    min-height:auto;
    padding-bottom:40px;
  }
  
  #mainVisual .slideBox{
    height:calc(100% - 40px);
  }
  
  #mainVisual .vflogoBlock{
    height:40px;
  }

  #mainVisual .vflogoBlock img{
    width:30%;
  }
  
  /***** sl1 *****/
  #sl1{
    background: url("../img/top/main/slide1_sp.jpg") center bottom no-repeat;
    background-size: cover;
  }

  #sl1 .item1{
    width:85%;
    max-width: 862px;
  }
  
  #sl1 .item1 img{
    max-width:100%;
  }

  #sl1 .item2,
  #sl1 .item3{
    width:50%;
    transition: opacity .8s,transform .8s;
  }

  #sl1 .item2{
    top:5%;
  }

  #sl1 .item3{
    bottom:5%;
  }
  /***** //sl1 *****/
  
  /***** sl2 *****/
  #sl2{
    background: url("../img/top/main/slide2_sp.jpg") center bottom no-repeat;
    background-size: cover;
  }

  #sl2 .item1{
    width:96%;
    max-width: 1156px;
  }
  
  #sl2 .item1 img{
    max-width: 100%;
  }
  /***** //sl2 *****/
  
  /***** sl3 *****/
  #sl3{
    background: url("../img/top/main/slide3_sp.jpg") center bottom no-repeat;
    background-size: cover;
  }

  #sl3 .item1{
    width:60.8%;
    max-width: 486px;
  }
  
  #sl3 .item1 img{
    max-width: 100%;
    margin:0 auto;
  }
  /***** //sl3 *****/
  
  /***** sl4 *****/
  #sl4{
    background: url("../img/top/main/slide4_sp.jpg") right bottom no-repeat;
    background-size: cover;
    height:100% !important;
  }

  #sl4 .item1{
    width:57.3%;
    max-width: 430px;
  }
  
  #sl4 .item1 img{
    max-width: 100%;
  }
  /***** //sl4 *****/
  /* //mainVisual */
  
  /* message */
  #message{
    min-width: inherit;
  }
  
  #message .inner{
    width:90%;
    margin:0 auto;
  }

  #message .msgWrap{
    margin-top:40px;
    display:block;
  }

  #message .photo{
    width:80%;
    max-width:350px;
    margin:0 auto;
  }

  #message .txt{
    width:100%;
    margin-top:40px;
  }
  /* message */
  
  /* linkNav */
  #linkNav{
    min-width: inherit;
  }

  #linkNav section{
    display:block;
  }

  #linkNav section .imgBox{
    width:100%;
  }

  #linkNav section .txtBox{
    width:90%;
    margin:0 auto;
    display:block;
    padding:10vh 0 15vh;
  }
  
  #linkNav section .txtBox p{
    font-size:6vw;
  }
  
  #linkNav section .txtBox a{
    font-size:4.5vw;
  }
  /* //linkNav */
}

.pageCaption .inner a.pdf_link{
  display: block;
  width: 100%;
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
}

.pageCaption .inner a.pdf_link:hover{
  opacity: .5;]
  transition: 1s;
}