@charset "utf-8";

/*--------------------------------------------
エージェント別
--------------------------------------------*/
/********* pc *********/
.u-pc {
  display: block !important;
}

.u-pc__flex {
  display: flex !important;
}

.u-pc__inline {
  display: inline !important;
}

.u-sp,
.u-sp__flex,
.u-sp__inline {
  display: none !important;
}

/********* sp *********/
@media only screen and (max-width: 750px) {
  .u-pc,
  .u-pc__flex,
  .u-pc__inline {
    display: none !important;
  }

  .u-sp {
    display: block !important;
  }

  .u-sp__flex {
    display: flex !important;
  }

  .u-sp__inline {
    display: inline !important;
  }
}


/*--------------------------------------------
hoverで半透明
--------------------------------------------*/ 
.u-hover:hover {
  opacity: 0.7;
  transition-duration: 0.2s;
}


/*--------------------------------------------
hoverで画像拡大
--------------------------------------------*/ 
.u-hover_img {
  display: block;
  overflow: hidden;
}

.u-hover_img img {
  display: block;
  transition: transform 0.2s ease;
}

a:hover .u-hover_img img,
.u-hover_img:hover img {
  transform: scale(1.1);
}


/*--------------------------------------------
スクロールアイコン
--------------------------------------------*/
.u-ic_scroll {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  position: absolute;
  top: 45%;
  left: 45%;
  margin-left: -40px;
  z-index: +1;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/********* sp *********/
@media only screen and (max-width:750px) {
  .u-ic_scroll {
    width: 20vw;
    height: 20vw;
    border-radius: 2.67vw;
    top: 50%;
    left: 50%;
    margin-left: -10vw;
  }
}

.u-ic_scroll img {
  width: 35%;
  position: absolute;
  top: 15px;
  right: -20%;
  animation: flow-left 2s ease-out infinite;
  opacity: 1;
}
/********* sp *********/
@media only screen and (max-width:750px) {
  .u-ic_scroll img {
    top: 3.33vw;
  }
}

@keyframes flow-left {
  0% {
    right: -10%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    right: 110%;
    opacity: 0;
  }
}

.u-ic_scroll span {
  display: block;
  font-size: 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 0;
  font-weight: 500;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 10px;
}
/********* sp *********/
@media only screen and (max-width:750px) {
  .u-ic_scroll span {
    font-size: 4vw;
    bottom: 2.67vw;
  }
}


/*--------------------------------------------
アニメーション
--------------------------------------------*/
/* フェードイン */
.u-ani_fade,
.u-first_fade {
  filter: blur(10px);
  opacity: 0;
  transform: translate(0, 10px);
  transition:
  filter  0.5s ease,
  opacity 0.5s ease, 
  transform  0.5s ease;
}

/* アニメーション スライドイン */
.u-ani_slide {
  display: block;
  width: fit-content;
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform 0.5s ease-in-out;
}

.u-ani_slide.-w100 {
  width: 100%;
}

.u-ani_slide .u-ani_slide_inner {
  display: block;
  transform: translate(100%, 0);
  transition: transform 0.5s ease-in-out;
}

.u-ani_slide_in,
.u-ani_slide_in .u-ani_slide_inner {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}