/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/

.mono .detail-content .border01{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

/*線の基点位置*/
.mono .detail-content .border01::before,
.mono .detail-content .border01::after{
    content:"";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    background:#fff;
    /*線の形状*/
    width: 0;
    height:2px;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

.mono .detail-content .border01::before{
  right: 0;
  bottom: 0;
}

.mono .detail-content .border01::after{
  left: 0;
  top: 0;
}

/*線の基点位置2 spanタグ*/

.mono .detail-content .border01 .border-tate{
    display: block;
}

.mono .detail-content .border01 .border-tate::before,
.mono .detail-content .border01 .border-tate::after{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #fff;
    /*線の形状*/
  width:2px;
  height:0;
/*アニメーションの指定*/
  transition: all 0.1s linear;
}

.mono .detail-content .border01 .border-tate::before{
  left: 0;
  bottom: 0;
}

.mono .detail-content .border01 .border-tate::after{
  right: 0;
  top: 0;
}

/*現在地とhoverした際の線の変化*/
.mono .detail-content .border01.current::before,
.mono .detail-content .border01.current::after,
.mono .detail-content .border01.on::before,
.mono .detail-content .border01.on::after{
  width: 100%;
}

.mono .detail-content .border01.on::after{
  transition-delay: 0s;/*すぐ線を出現させる*/
}

.mono .detail-content .border01.on::before{
  transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
}

.mono .detail-content .border01.current span::before,
.mono .detail-content .border01.current span::after,
.mono .detail-content .border01.on span::before,
.mono .detail-content .border01.on span::after{
  height: 100%;
}

.mono .detail-content .border01.on span::before{
  transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
}

.mono .detail-content .border01.on span::after{
  transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
}



/*==================================================
画像が　シャッ　と出る
===================================*/

/*背景色が伸びて出現 共通*/
.bgextend.on{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.on .bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*--------- 左から --------*/
.bgLRextend.on::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(131,85,222,1);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}


/*==================================================
画像が　シャッ　と出る
===================================*/
.naname li{
  opacity: 0;
}
.naname li.on img{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
.naname li.on{
  animation-name:naname-slide-right;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;  
}
.naname li:nth-child(2).on{
  animation-duration:1.3s;
}
.naname li:nth-child(3).on{
  animation-duration:1.6s;
}
.naname.left li.on{
  animation-name:naname-slide-left;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;  
}

@keyframes naname-slide-right{
  from {
    opacity:0;
    transform: translate(500px, -300px);
  }
  to {
    opacity:1;  
    transform: translate(0, 0);
  }
}
@keyframes naname-slide-left{
  from {
    opacity:0;
    transform: translate(500px, 300px);
  }
  to {
    opacity:1;  
    transform: translate(0, 0);
  }
}


/*==================================================
ふわっ
===================================*/
.fadeUp{
  opacity: 0;
}
.fadeUp.on {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}
.delay-time04{
animation-delay: 0.4s;
}
.delay-time06{
animation-delay: 0.6s;
}
.delay-time08{
animation-delay: 0.8s;
}