@charset "UTF-8";
/* エフェクト用 */

.effect {
  position: relative;
  overflow: hidden;
  transition: 0.5s ease-in-out;}
.effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 97%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.5s ease-in-out;}
.effect:hover::before {
  left: 0;}

.effect2 {
  position: relative;
  overflow: hidden;
  transition: 0.8s ease-in-out;}
.effect2::before {
  z-index: 10;
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(left, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  background: -webkit-linear-gradient(left, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  background: linear-gradient(to right, rgba(4, 87, 124, 0.05)20%, rgba(4, 87, 124, 0.2) 85%, rgba(4, 87, 124, 0.3));
  transition: 0.8s ease-in-out;}
.effect2:hover::before {
  left: 0;}


.effect3 {
  /*position: relative;*/
  overflow: hidden;
  transition: 0.8s ease-in-out;}
.effect3::before {
  z-index: 10;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  background: -webkit-linear-gradient(top, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  background: linear-gradient(to bottom, rgba(4, 87, 124, 0.0)50%, rgba(4, 87, 124, 0.05) 60%, rgba(4, 87, 124, 0.15));
  transition: 0.8s ease-in-out;}
.effect3:hover::before {
  top: -100%;}
.btn-arrow-scale,
.effect3 span {
    z-index: 10;}


/* ふわっと表示（フェードイン） */
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}