@charset "utf-8";
/* CSS Document */
.sec-mv .txt-wrap .txt-scroll i {
  animation-name: floating;
  -webkit-animation-name: floating;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  position: relative;
}
@keyframes floating {
 0% {
transform: translate(0px, 0px)
}
 50% {
transform: translate(0px, 10px)
}
 100% {
transform: translate(0px, 0px)
}
}
 @-webkit-keyframes floating {
 0% {
-webkit-transform: translate(0px, 0px)
}
 50% {
 -webkit-transform: translate(0px, 10px)
}
 100% {
 -webkit-transform: translate(0px, 0px)
}
}
.chart-wrap .ring {
  background: rgba(129, 167, 221, 0.8);
  position: absolute;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 50%;
  height: 350px;
  width: 350px;
  top: 153px;
  left: 295px;
  z-index: 90;
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: pulsate 2s ease-out;
  -moz-animation-iteration-count: infinite;
}
@-webkit-keyframes pulsate {
 0% {
-webkit-transform: scale(0.4, 0.4);
}
 50% {
opacity: 0.6;
}
/* リングの大きさ */
100% {
-webkit-transform: scale(0.9, 0.9);
opacity: 0.0;
}
}
 @-moz-keyframes pulsate {
 0% {
-moz-transform: scale(0.4, 0.4);
}
 50% {
opacity: 1;
}
	/* リングの大きさ */
100% {
-moz-transform: scale(0.9, 0.9);
opacity: 0.0;
}
}
.chart-wrap figure {
  width: 818px;
}
.chart-wrap .chart-area {
  position: relative;
  height: 727px;
}
.chart-wrap .chart-area img {
  position: absolute;
  top: -30px;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.chart-wrap .chart-area img:first-child {
  z-index: 100;
}
.chart-wrap .chart-area img:nth-child(2),  .chart-wrap .chart-area img:nth-child(3),  .chart-wrap .chart-area img:nth-child(4) {
  transform: rotate(-5deg) scale(1.2, 1.2);
  transition: 0.3s;
}
.chart-wrap .chart-area canvas {
  position: absolute;
  top: -30px;
  left: 0;
}

/* tablet向けスタイル */
@media screen and (max-width: 1170px) {
  .chart-wrap .ring{
    left: 254px;
  }
}

/* tablet向けスタイル */
@media screen and (max-width: 1030px) {
  .chart-wrap figure {
    width: 580px;
  }
  .chart-wrap .ring{
    top: 100px;
    left: 172px;
    height: 248px;
    width: 248px;
  }
.chart-wrap .chart-area {
  height: 515px;
}
}

/* sp向けスタイル */
@media screen and (max-width: 767px) {
  .chart-wrap figure {
    width: 320px;
  }
.chart-wrap .chart-area {
  height: 390px;
}
  .chart-wrap .chart-area img{
    top:-10px;
  }
  .chart-wrap .ring{
    top: 58px;
    left: 50%;
    height: 134px;
    width: 134px;
    margin-left: -67px;
    transform-origin: center center;
  }
.chart-wrap .chart-area canvas {
  top: -10px;
}
}