@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
.chart-wrap {
  position: relative;
}
main#content article .chart-wrap p {
  font-size: 12px;
  margin: 0;
}
.chart-wrap p span {
  line-height: 1;
}
.chart-wrap p span.male {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.chart-wrap p span.woman {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
@media only screen and (max-width: 767px){
  .chart-wrap { margin-top: 2em; }
  main#content article .chart-wrap p { font-size: 10px; }
}
.anime-chart {
  margin: 2em auto 0;
  padding: 0;
  list-style-type: none;
}

.anime-chart *,
.anime-chart::before {
  box-sizing: border-box;
}

.anime-chart {
  position: relative;
  width: 120px;
  height: 60px;
  overflow: hidden;
}

.anime-chart::before,
.anime-chart::after {
  position: absolute;
}

.anime-chart::before {
  content: '';
  width: inherit;
  height: inherit;
  border: 25px solid rgba(211, 211, 211, .3);
  border-bottom: none;
  border-top-left-radius: 175px;
  border-top-right-radius: 175px;
}

.anime-chart::after {
  content: '男女比';
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: bold;
}

.anime-chart li {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: inherit;
  border: 25px solid;
  border-top: none;
  border-bottom-left-radius: 175px;
  border-bottom-right-radius: 175px;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
  animation-duration: .4s;
  animation-timing-function: linear;
}

.anime-chart li:nth-child(1) {
  z-index: 4;
  border-color: #99a1f6;
  animation-name: rotate-one;
  animation-delay: .8s;
}

.anime-chart li:nth-child(2) {
  z-index: 3;
  border-color: #ef675b;
  animation-name: rotate-two;
  animation-delay: 1.2s;
}

.anime-chart li:nth-child(3) {
  z-index: 2;
  border-color: steelblue;
  animation-name: rotate-three;
  animation-delay: .8s;
}

.anime-chart li:nth-child(4) {
  z-index: 1;
  border-color: orange;
  animation-name: rotate-four;
  animation-delay: 1.2s;
}

.anime-chart span {
  position: absolute;
  font-size: .85rem;
  backface-visibility: hidden;
  animation: fade-in .4s linear forwards;
}

.anime-chart li:nth-child(1) span {
  top: 48px;
  left: 20px;
  transform: rotate(-158.468899521deg);
}

.anime-chart li:nth-child(2) span {
  top: 35px;
  left: 10px;
  transform: rotate(-180.0deg);
  animation-delay: .4s;
}

.anime-chart li:nth-child(3) span {
  top: 20px;
  left: 10px;
  transform: rotate(-156.6deg);
  animation-delay: .8s;
}

.anime-chart li:nth-child(4) span {
  top: 10px;
  left: 10px;
  transform: rotate(-180deg);
  animation-delay: 1.2s;
}


/* アニメーション
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@keyframes rotate-one {
  100% {
    transform: rotate(158.468899521deg);
    /**
     * 37% => 66.6deg
     */
  }
}

@keyframes rotate-two {
  0% {
    transform: rotate(158.468899521deg);
  }
  100% {
    transform: rotate(180.0deg);
    /**
     * 28% => 50.4deg 
     * 66.6 + 50.4 => 117.0deg
     */
  }
}

@keyframes rotate-three {
  0% {
    transform: rotate(117.0deg);
  }
  100% {
    transform: rotate(156.6deg);
    /**
     * 22% => 39.6deg 
     * 117+ 39.6 => 156.6deg
     */
  }
}

@keyframes rotate-four {
  0% {
    transform: rotate(156.6deg);
  }
  100% {
    transform: rotate(180deg);
    /**
     * 13% => 23.4deg  
     * 156.6 + 23.4 => 180deg
     */
  }
}

@keyframes fade-in {
  0%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}