@charset "utf-8";






/*===========================================================*/
/* 機能編 8-1-7　スクロール途中からリンクボタンの形状が変化 */
/*===========================================================*/

/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	right: 20px;
	bottom: 65px;
	margin-bottom: 90px;
	z-index: 99;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	/*改行禁止*/
	white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:40px;}
      50%{bottom:45px;}
     100%{bottom:40px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
    position: relative;
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size:0.8rem;
    letter-spacing: 0.05em;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll.scroll-top a{
    color: #aaa;
}

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#aaa;
}


.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #aaa;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}


/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}

/*===========================================================*/
/* 機能編 6-1-4 動きを組み合わせて全画面で見せる*/
/*===========================================================*/

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}






/*===========================================================*/
/*    印象編　8-1　テキストがバラバラに出現 */
/*===========================================================*/

.TextRandomAnime span{
	opacity: 0;
}
.TextRandomAnime.appearRandomtext span{ 
	animation:text_randomanime_on .5s ease-out forwards;
}

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

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
	animation-delay: 0.7s;/* spanのついた2の倍数の文字列の変化を0.7秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
	animation-delay: 0.35s;/* spanのついた3の倍数＋1の文字列の変化を0.35秒遅らせる*/
}




    /* Loading背景画面設定　*/


    /* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:rgb(49, 17, 132);
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
#splash{
	background:linear-gradient(45deg, #61bce6,#bf5be4,#71e694);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 40s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}





    /* sns-icon　での表示設定　*/
#sns-icon{
/*はじめは非表示*/
opacity: 0;
	transform: translateY(-100px);
}


  #sns-icon.UpMove{
        animation: UpAnime 0.5s forwards;
    }
    #sns-icon.DownMove{
        animation: DownAnime 0.5s forwards;
    }  

    /* sns-icon　での表示設定　*/
    #sidemenucotainer{
      /*はじめは非表示*/
      opacity: 0;
        transform: translateY(-100px);
      }
      
      
        #sidemenucotainer.UpMove{
              animation: UpAnime 0.5s forwards;
          }
          #sidemenucotainer.DownMove{
              animation: DownAnime 0.5s forwards;
          }  

    @keyframes UpAnime{
      from {
        opacity: 0;
        transform: translateY(-200px);
      }
      to {
        opacity: 1;
        transform: translateY(-100px);
      }
    }
    
    /*　下に下がる動き　*/
    
 
    @keyframes DownAnime{
      from {
          opacity: 1;
        transform: translateY(0px);
      }
      to {
          opacity: 1;
        transform: translateY(-100px);
      }
    }


    
    @media screen and (max-width:768px) {
        
#sns-icon{
/*はじめは非表示*/
opacity: 0;
	transform: translateY(100px);
}


        #sns-icon{
/*はじめは非表示*/
opacity: 0;
	transform: translateY(0px);
}


  #sns-icon.UpMove{
        animation: UpAnime 0.5s forwards;
    }
    #sns-icon.DownMove{
        animation: DownAnime 0.5s forwards;
    }  

    #sns-icon{
      /*はじめは非表示*/
      opacity: 0;
        transform: translateY(100px);
      }
      
      
              #sidemenucotainer{
      /*はじめは非表示*/
      opacity: 0;
        transform: translateY(0px);
      }
      
      
        #sidemenucotainer.UpMove{
              animation: UpAnime 0.5s forwards;
          }
          #sidemenucotainer.DownMove{
              animation: DownAnime 0.5s forwards;
          }  

    @keyframes UpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
      to {
        opacity: 1;
        transform: translateY(0px);
      }
    }
    
    /*　下に下がる動き　*/
    
 
    @keyframes DownAnime{
      from {
          opacity: 1;
        transform: translateY(0px);
      }
      to {
          opacity: 1;
        transform: translateY(100px);
      }
    }




   
    }
    
    
    





















    
    /* snsleft　での表示設定　*/
#snsleft{
  /*はじめは非表示*/
  opacity: 0;
    transform: translateY(-100px);
  }
  
  
    #snsleft.UpMove{
          animation: UpAnime 0.5s forwards;
      }
      #snsleft.DownMove{
          animation: DownAnime 0.5s forwards;
      }  
  
      /* snsleft　での表示設定　*/
      #sidemenucotainer{
        /*はじめは非表示*/
        opacity: 0;
          transform: translateY(-100px);
        }
        
        
          #sidemenucotainer.UpMove{
                animation: UpAnime 0.5s forwards;
            }
            #sidemenucotainer.DownMove{
                animation: DownAnime 0.5s forwards;
            }  
  
      @keyframes UpAnime{
        from {
          opacity: 0;
          transform: translateY(-200px);
        }
        to {
          opacity: 1;
          transform: translateY(-100px);
        }
      }
      
      /*　下に下がる動き　*/
      
   
      @keyframes DownAnime{
        from {
            opacity: 1;
          transform: translateY(0px);
        }
        to {
            opacity: 1;
          transform: translateY(-100px);
        }
      }
  
  
      
      @media screen and (max-width:768px) {
          
  #snsleft{
  /*はじめは非表示*/
  opacity: 0;
    transform: translateY(100px);
  }
  
  
          #snsleft{
  /*はじめは非表示*/
  opacity: 0;
    transform: translateY(0px);
  }
  
  
    #snsleft.UpMove{
          animation: UpAnime 0.5s forwards;
      }
      #snsleft.DownMove{
          animation: DownAnime 0.5s forwards;
      }  
  
      #snsleft{
        /*はじめは非表示*/
        opacity: 0;
          transform: translateY(100px);
        }
        
        
                #sidemenucotainer{
        /*はじめは非表示*/
        opacity: 0;
          transform: translateY(0px);
        }
        
        
          #sidemenucotainer.UpMove{
                animation: UpAnime 0.5s forwards;
            }
            #sidemenucotainer.DownMove{
                animation: DownAnime 0.5s forwards;
            }  
  
      @keyframes UpAnime{
        from {
          opacity: 0;
          transform: translateY(100px);
        }
        to {
          opacity: 1;
          transform: translateY(0px);
        }
      }
      
      /*　下に下がる動き　*/
      
   
      @keyframes DownAnime{
        from {
            opacity: 1;
          transform: translateY(0px);
        }
        to {
            opacity: 1;
          transform: translateY(100px);
        }
      }
  
  
  
  
     
      }