@charset "UTF-8";

.arrow_box,.arrow_box2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0 0;
    position: relative;
}

.prev-arrow,
.next-arrow,
.prev-arrow2,
.next-arrow2{
    display: block;
    width: 40px;
    height: 40px;
    background: #00adf1;/*メインカラー*/
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow,
.prev-arrow2{
    transform: rotate(180deg);
    margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before,
.prev-arrow2::before,
.next-arrow2::before{
    position:absolute;
    content: "";
    width:8px;
    height:8px;
    border-right: 3px solid #FFF;
    border-top: 3px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}

/*=============================================================
動き
=============================================================*/
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: #00adf1;/*メインカラー*/
  text-align:center;
  color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 99999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*==================================================
ふわっ
===================================*/

/* 下からふわっと現れる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0;                     /*非表示*/
}