@charset "UTF-8";

.sp-block{ display: block;}
.pc-block{ display: none;}
.sp-none{ display: block;}
.pc-only{ display: none;}
.sp-only{ display: none;}


@media screen and (max-width: 480px) {
  .sp-none{ display: none;}
  .sp-only{ display: block;}
}/* SP480 */


/* BACKNUMBER */
.backnumber-info{
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  display: block;
  background: #dbf4ff;
  text-align: center;
  border-radius: 1em;
  letter-spacing: 0.1em;
}

.backnumber-info h2{
  width: 16rem;
  margin: 1em auto 0.5em auto;
}

.backnumber-info .backnumber-title{
  position: relative;
  top: -2.4em;
  left: 0;
  right: 0;
  margin: 4em auto -1.5em;
  padding: 0.8em 0.5em 0.4em 1.5em;
  width: 90%;
  max-width: 20em;
  display: block;
  border-radius: 1em 1em 0 0;
  background: #dbf4ff;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

.backnumber-info .backnumber-title:after{
  position: absolute;
  top: -1em;
  left: -0.5em;
  margin: 0;
  width: 10.8rem;
  height: 7.2rem;
  display: block;
  background: url(/funding/common/img/angel.svg) center center no-repeat;
  background-size: contain;
  transform: scale(-1, 1)  rotate(30deg);
  animation: angel 2s ease-in-out infinite;
  content: "";
}

@keyframes angel {
  0% { background-position: top center;}
  50% { background-position: bottom center;}
  100% { background-position: top center;}
}

.backnumber-info .txt{
  padding: 0 0 2em 0;
  width: 100%;
  font-size: var(--font-size-l);
  text-align: center;
  line-height: 1.6;
}


.backnumber-info .backnumber-comment .comment{
  background-repeat:   no-repeat ;
  background-position:2rem 1.5rem ;
  background-size: 20% ;
  overflow: hidden;
}

.backnumber-info .backnumber-comment .month01{ background-color: #fff7ed;}
.backnumber-info .backnumber-comment .month02{ background-color: #ebf2ff;}
.backnumber-info .backnumber-comment .month03{ background-color: #fffceb;}
.backnumber-info .backnumber-comment .month04{ background-color: #fff0f0;}
.backnumber-info .backnumber-comment .month05{ background-color: #fbffc8;}
.backnumber-info .backnumber-comment .month06{ background-color: #cfffed ;}
.backnumber-info .backnumber-comment .month07{ background-color: #FFFCDB;}
.backnumber-info .backnumber-comment .month08{ background-color: #E5FFDB;}
.backnumber-info .backnumber-comment .month09{ background-color: #ffecdb;}
.backnumber-info .backnumber-comment .month10{ background-color: #fff9eb;}
.backnumber-info .backnumber-comment .month11{ background-color: #faedff;}
.backnumber-info .backnumber-comment .month12{ background-color: #fff2cc;}

.backnumber-info .backnumber-comment .comment-last{border-radius: 0 0 1em 1em;}

.backnumber-info .backnumber-comment ul{
  margin: 0 auto 2em auto;
    width: 97%;
  overflow: hidden;
}

.backnumber-info .backnumber-comment ul li{
    width: 25%;
  padding: 0 0.5em 1em 0.5em;
    float: left;
}

@media screen and (max-width: 768px) {
  .backnumber-info .backnumber-comment ul li{
      width: 33.33333%;
  }

  .backnumber-info h2{
    width: 25%;
  }


}

@media screen and (max-width: 480px) {
  .backnumber-info h2{
    width: 45%;
  }

  .backnumber-info .backnumber-title{
    margin: 4em auto -1em;
    padding: 0.8em 1.5em 0.4em 1.5em;
    line-height: 1.4;
  }

  .backnumber-info .backnumber-title:after{
    top: -1.2em;
    left: -0.8em;
  }

  .backnumber-info .backnumber-comment .comment{
    background-repeat:   no-repeat ;
    background-position:center 1em;
    background-size: 40% ;
  }

  .backnumber-info .backnumber-comment ul{
    margin: 0 auto 1.5em auto;
      width: 98%;
  }

  .backnumber-info .backnumber-comment ul li{
      width: 50%;
  }

  .backnumber-info .txt{
    padding: 0 1em 1em 1em;
    text-align: left;
  }

}

.backnumber-comment ul li img {
 	animation: comment1 2.0s ease 0s 1 normal;
}
 
@keyframes comment1 { 
    0% {opacity: 0; transform: scale(0.8);} 
    100% {opacity: 1; transform: scale(1);} 
}

.backnumber-comment ul li:nth-child(2) img {
 	animation: comment2 2.0s ease 0s 1 normal;
}

@keyframes comment2 { 
    0% {opacity: 0; transform: scale(0.6);} 
    100% {opacity: 1; transform: scale(1);} 
}

.y30 li:nth-last-child(11){display: none;} 
.y29 li:nth-last-child(10){display: none;} 
.y28 li:nth-last-child(9) {display: none;} 
.y26 li:nth-last-child(8) {display: none;} 
.y25 li:nth-last-child(7) {display: none;} 
.y24 li:nth-last-child(6) {display: none;} 
.y23 li:nth-last-child(5) {display: none;} 
.y22 li:nth-last-child(4) {display: none;} 
.y21 li:nth-last-child(3) {display: none;} 
.y20 li:nth-last-child(2) {display: none;}