/*== 無限に波紋が広がる */



/*hoverした際の背景色の設定*/


/*波形を2つ設定*/
.ripple2022::after,
.ripple2022::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left: -105%;
    top: -105%;
    /*波形の形状*/
    border: 1px solid #fff;
    width: 350%;
    height: 350%;
    border-radius: 100%;
    /*はじめは不透明*/
    opacity: 1;
    /*ループするアニメーションの設定*/
    animation:1s circleanime linear infinite;
	
	
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.ripple2022::before {
    animation-delay:.5s; 
	
}

/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.68);
	}
	
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}
/*中央矢印*/
.ripple2022 span::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 60%;
    left: 60%;
    /*矢印の形状*/
	width: 15px;
  height: 15px;

  background-color: #fff;
	border-radius: 50%;
    border-left-color: #fff;
}
/* CSSアニメーションの指定 */
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
	transform: rotate(360);
    transform: translateX(-256px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* CSSアニメーションの設定 */
@keyframes SlideIn2 {
  0% {
    opacity: 0;/*初期状態では透明に*/
	transform: rotate(360);
    transform: translateX(256px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* CSSアニメーションの設定 */
@keyframes SlideIn3 {
  0% {
    opacity: 0;/*初期状態では透明に*/
	transform: rotate(360);
    transform: translateX(256px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*ウィズラン丸ロゴのアニメーション*/
.anim-box.slidein.is-animated {
  
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
	transform: translateX(0);
    opacity: 1;
  }
}

.turn {
	animation: move 1s linear 3;
	display:inline-block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
 
@keyframes move {
	  0%   { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }

}
/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
  overflow: hidden;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 7);
  
}
.d-demo__item > img{
   width: 100%;

}
/*ループスライドショー
.loopslide {
    display: flex;
    width: 100vw;
    height: 300px;
    overflow: hidden;
 }
 .loopslide img {
        width: auto;
        height: 100%;
  }
.loopslide img:first-child {
            animation: slide1 30s -15s linear infinite;
}
 
.loopslide img:last-child {
            animation: slide2 30s linear infinite;
}
 
@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
*/


@keyframes rotate1 { 
  0% {
   transform: rotate(0deg);
  }
  100% {  
    transform: rotate(360deg);
  }
}