@charset "UTF-8";
/* **************************************************
  footer
  slider
************************************************** */
.banner-slider{
  width:100%;
  height:auto;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  border-top:1px solid #E5E5E5;
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
}
.banner-group-wrap a,
.banner-group-wrap a:hover{
  text-decoration: none;
  padding:5px;
}

.banner-group{
  display:flex;
  flex-flow:row nowrap;
  align-items: center;
  justify-content: space-between;
}

.banner-group-figure{
  flex:0 1 auto;
}
.banner-group > div{
  flex:0 1 60%;
}
.banner-group-figure img{
  width:70px;
  border:1px solid #ddd;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}

.banner-group h2.h2{
  margin:0;
  padding:0 0 3px;
  font-size: 14px;
  font-weight: bold;
  line-height:1.2;
  color:#ff0000;
  text-align: left;
}

.banner-group p{
  line-height:1.2;
  text-align: left;
  font-size:1.3rem;
}

.rated-label{
  display: inline-block;
  background-color: #fff;
  color:#c9353f;
  align-self: flex-end;
  padding:2px 5px;
  border:1px solid #c9353f;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  font-size: 12px;
  font-weight: normal;
}

/* slider */
.slider-wrap {
  width:100%;
  height:80px;
  overflow:hidden;
  position:relative;
}
.slider-mask {
  height:80px;
  overflow:hidden;
}
.slider-wrap ul {
  margin:0;
  padding:0;
  width: 100%;
  position: relative;
}
.slider-wrap li {
  width:100%;
  height:80px;
  z-index: 40;
  position: absolute;
  top: -80px;
  background: #fff;
}


.slider-wrap ul li:nth-child(1){
  animation:loop-a 30s linear infinite; 
  -webkit-animation:loop-a 30s linear infinite;  
}

.slider-wrap ul li:nth-child(2) {
  animation:loop-b 30s linear infinite;
  -webkit-animation:loop-b 30s linear infinite;   
}

.slider-wrap ul li:nth-child(3) {
   animation:loop-c 30s linear infinite;
  -webkit-animation:loop-c 30s linear infinite;  
}
.slider-wrap ul li:nth-child(4) {
  animation:loop-d 30s linear infinite;
  -webkit-animation:loop-d 30s linear infinite;  
}
.slider-wrap ul li:nth-child(5) {
  animation:loop-e 30s linear infinite;
  -webkit-animation:loop-e 30s linear infinite;    
}

.slider-wrap ul:hover li{
  animation-play-state:paused;
  -webkit-animation-play-state:paused;
}

/* animation */
@keyframes loop-a {
  0%  { top:0px; }
  4%  { top:0px; } 
  16% { top:0px; opacity:1; z-index:0; } 
  20% { top:80px; opacity:0; z-index:0; } 
  21% { top:-80px; opacity:0; z-index:-1; }
  92% { top:-80px; opacity:0; z-index:0; }
  96% { top:-80px; opacity:0; }
  100%{ top:0px; opacity:1; }
}
@keyframes loop-b {
  0%  { top:-80px; opacity:0; }
  16% { top:-80px; opacity:0; }
  20% { top:0px; opacity:1; }
  24% { top:0px; opacity:1; } 
  36% { top:0px; opacity:1; z-index:0; } 
  40% { top:80px; opacity:0; z-index:0; }
  41% { top:-80px; opacity:0; z-index:-1; } 
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@keyframes loop-c {
  0%  { top:-80px; opacity:0; }
  36% { top:-80px; opacity:0; }
  40% { top:0px; opacity:1; }
  44% { top:0px; opacity:1; } 
  56% { top:0px; opacity:1; } 
  60% { top:80px; opacity:0; z-index:0; }
  61% { top:-80px; opacity:0; z-index:-1; } 
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@keyframes loop-d {
  0%  { top:-80px; opacity:0; }
  56% { top:-80px; opacity:0; }
  60% { top:0px; opacity:1; }
  64% { top:0px; opacity:1; }
  76% { top:0px; opacity:1; z-index:0; }
  80% { top:80px; opacity:0; z-index:0; }
  81% { top:-80px; opacity:0; z-index:-1; }
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@keyframes loop-e {
  0%  { top:-80px; opacity:0; }
  76% { top:-80px; opacity:0; }
  80% { top:0px; opacity:1; }
  84% { top:0px; opacity:1; }
  96% { top:0px; opacity:1; z-index:0; }
  100%{ top:80px; opacity:0; z-index:0; }
}

@-webkit-keyframes loop-a {
  0%  { top:0px; }
  4%  { top:0px; }
  16% { top:0px; opacity:1; z-index:0; } 
  20% { top:80px; opacity:0; z-index:0; }
  21% { top:-80px; opacity:0; z-index:-1; }
  50% { top:-80px; opacity:0; z-index:-1; }
  92% { top:-80px; opacity:0; z-index:0; }
  96% { top:-80px; opacity:0; }
  100%{ top:0px; opacity:1; }
  
}
@-webkit-keyframes loop-b {
  0%  { top:-80px; opacity:0; }
  16% { top:-80px; opacity:0; }
  20% { top:0px; opacity:1; }
  24% { top:0px; opacity:1; } 
  36% { top:0px; opacity:1; z-index:0; } 
  40% { top:80px; opacity:0; z-index:0; }
  41% { top:-80px; opacity:0; z-index:-1; }  
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@-webkit-keyframes loop-c {
  0%  { top:-80px; opacity:0; }
  36% { top:-80px; opacity:0; }
  40% { top:0px; opacity:1; }
  44% { top:0px; opacity:1; } 
  56% { top:0px; opacity:1; z-index:0; } 
  60% { top:80px; opacity:0; z-index:0; } 
  61% { top:-80px; opacity:0; z-index:-1; }
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@-webkit-keyframes loop-d {
  0%  { top:-80px; opacity:0; }
  56% { top:-80px; opacity:0; }
  60% { top:0px; opacity:1; }
  64% { top:0px; opacity:1; }
  76% { top:0px; opacity:1; z-index:0; }
  80% { top:80px; opacity:0; z-index:0; }
  81% { top:-80px; opacity:0; z-index:-1; }
  100%{ top:-80px; opacity:0; z-index:-1; }
}
@-webkit-keyframes loop-e {
  0%  { top:-80px; opacity:0; }
  76% { top:-80px; opacity:0; }
  80% { top:0px; opacity:1; }
  84% { top:0px; opacity:1; }
  96% { top:0px; opacity:1; z-index:0; }
  100%{ top:80px; opacity:0; z-index:0; }
}



/*テスト*/

.slide ul{
  list-style:none;
}
.slide ul li{
width:100%;
height:87px;
position:relative;
overflow:hidden;
}

/*ベンダープレフィックスは省略しています。*/


.anime.loop .mask li {
position:absolute;
top:-100%;
left:0; /*フレーム「イン」させたいので、left:100%で右側の外に待機*/
animation:slide 15s 0s infinite;  /*まず、各スライドに同じ@keyframesで動く様に指示*/
animation-play-state:running;   /*webkitの動作が怪しいので追加。*/
}
.anime.loop .mask li:nth-of-type(1) {
animation-delay:0s;
}
.anime.loop .mask li:nth-of-type(2) {
animation-delay:3s;
}
.anime.loop .mask li:nth-of-type(3) {
animation-delay:6s;
}
.anime.loop .mask li:nth-of-type(4) {
animation-delay:9s;
}
.anime.loop .mask li:nth-of-type(5) {
animation-delay:12s;
}


@keyframes slide {
0%    {top:0%; opacity:0.5; z-index:10;}  /*フレームイン開始*/
5%   {top:0%; opacity:1;}        /*(a)全体の1/10秒でフレームイン終了*/
10% {top:0%; opacity:1; z-index:0; }  /*(b)ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
20% {top:100%; opacity:0.5;}  /*(c)フレームアウト終了（c = a） */
21% { top:-87px; opacity:0; z-index:-1; }
50%   {top:100%; }        /* 分かりやすい様に、見えないエリアで迂回させています */
70%   {top:-100%; }
80%   {top:-100%; }
100%{ top:0%; opacity:1; }
}


@keyframes slide-a {
  0%  { left:0px; }
  4%  { left:0px;} 
  16% { left:0px; opacity:1; z-index:0; } 
  20% { left:100%; opacity:0; z-index:0; }
  21% { left:-100%; opacity:0; z-index:-1; }
  92% { left:-100%; opacity:0; z-index:0; }
  96% { left:-100%; opacity:0; z-index:-1; }
  100%{ left:0px; opacity:1; }
}
@keyframes looper {
  0%  { top:0px; }
  4%  { top:0px;} 
  16% { top:0px; opacity:1; z-index:0; } 
  20% { top:87px; opacity:0; z-index:0; }
  21% { top:-87px; opacity:0; z-index:-1; }
  92% { top:-87px; opacity:0; z-index:0; }
  96% { top:-87px; opacity:0; z-index:-1; }
  100%{ top:0px; opacity:1; }
}