@charset "UTF-8";


/* ==========================================================================
   Archive
========================================================================== */
.box3 .bg {
   right: calc(((100vw - 100%)/2)*-1);
}
.box3 .imgBox {
   padding-top: 58%;
}
.box3 .imgBox .cover-img:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.3);
  background: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 100%);
}
.box3 .ttlBox .headline {
   color: #FFF;
   left: 45px;
   transform: translateY(0);
	top: -1em;
}
.box3 .cvBox p {
   margin-top: 0;
}

.box3.linkBox .btn {
   margin-top: 1.5em;
}

@media only screen and (max-width: 767px) {
   .box3 .ttlBox .headline {
      top: -9em;
   }
   .box3 .ttlBox .ttl {
      font-size: 1.692em;
   }
}

@media only screen and (min-width: 576px) {
   .box3 .imgBox {
      padding-top: 42%;
   }
}
@media only screen and (min-width: 768px) {
   .box3 .imgBox {
      padding-top: 280px;
   }
   .box3 .ttlBox .headline {
      position: relative;
      left: 50px;
   }
  .box3.linkBox .btn {
    background: #FFF;
    color: #222;
  }
  .box3.linkBox .btn:before {
    background-image: url(../_assets/common/img/icon-arrow-b.svg);
  }
}

@media only screen and (min-width: 992px) {
   .box3 .imgBox {
      padding-top: 350px;
   }
   .box3 .ttlBox .headline {
      position: relative;
      left: 0;
   }
   .box3.linkBox .cvBox {
      padding: .75em 0 0;
      max-width: 480px;
   }
   .box3.linkBox .cvBox .container {
      padding: 0;
   }

}