@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
.igFrameBar {
  float: left;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 13% auto 0px auto;
  transform: translate(0, -50%);
}

.igData {
  width: 50px;
  position: absolute;
  bottom: 1px;
  margin: 0px 0px 0px 0px;
  z-index: 99;
  float: left;
  border-radius: 5px 5px 0 0;
}

.igData1 {
  background: #81B71C;
  height: 0px;
  left: 30px;
  /*-webkit-animation: showBar1 8s 0.1s forwards;
  -moz-animation: showBar1 8s 0.1s forwards;*/
  animation: showBar1 8s 0.1s forwards;
}

.igData2 {
  background: #81B71C;
  height: 0px;
  left: 100px;
  -webkit-animation: showBar2 8s 0.2s forwards;
  -moz-animation: showBar2 8s 0.2s forwards;
  animation: showBar2 8s 0.2s forwards;
}

.igData3 {
  background: #81B71C;
  height: 0px;
  left: 170px;
  -webkit-animation: showBar3 8s 0.3s forwards;
  -moz-animation: showBar3 8s 0.3s forwards;
  animation: showBar3 8s 0.3s forwards;
}

.igData4 {
  background: #006458;
  height: 0px;
  left: 240px;
  -webkit-animation: showBar4 8s 0.4s forwards;
  -moz-animation: showBar4 8s 0.4s forwards;
  animation: showBar4 8s 0.4s forwards;
}

.igData5 {
  background: #006458;
  height: 0px;
  left: 310px;
  -webkit-animation: showBar5 8s 0.5s forwards;
  -moz-animation: showBar5 8s 0.5s forwards;
  animation: showBar5 8s 0.5s forwards;
}

.igData6 {
  background: #6aafe6;
  height: 0px;
  left: 208.1818181818px;
  -webkit-animation: showBar6 8s 0.6s forwards;
  -moz-animation: showBar6 8s 0.6s forwards;
  animation: showBar6 8s 0.6s forwards;
}

.igData7 {
  background: #d6ecfa;
  height: 0px;
  left: 244.5454545455px;
  -webkit-animation: showBar7 8s 0.7s forwards;
  -moz-animation: showBar7 8s 0.7s forwards;
  animation: showBar7 8s 0.7s forwards;
}

.igData8 {
  background: #a5dff9;
  height: 0px;
  left: 280.9090909091px;
  -webkit-animation: showBar8 8s 0.8s forwards;
  -moz-animation: showBar8 8s 0.8s forwards;
  animation: showBar8 8s 0.8s forwards;
}

.igData9 {
  background: #dae9f4;
  height: 0px;
  left: 317.2727272727px;
  -webkit-animation: showBar9 8s 0.9s forwards;
  -moz-animation: showBar9 8s 0.9s forwards;
  animation: showBar9 8s 0.9s forwards;
}

.igData10 {
  background: #d3e0f7;
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar10 8s 1s forwards;
  -moz-animation: showBar10 8s 1s forwards;
  animation: showBar10 8s 1s forwards;
}

.igData:before {
  position: absolute;
  top: -24px;
  left: 4px;
  font-size: 18px;
  color: #333;
  font-family: "roboto";
  font-weight: 300;
}

.igData1:before {
  content: "16.0%";
}

.igData2:before {
  content: "20.0%";
}

.igData3:before {
  content: "19.9%";
}

.igData4:before {
  content: "19.2%";
}

.igData5:before {
  content: "24.8%";
}

.igData6:before {
  content: "40%";
}

.igData7:before {
  content: "85%";
}

.igData8:before {
  content: "36%";
}

.igData9:before {
  content: "88%";
}

.igData10:before {
  content: "62%";
}

.igData:after {
  position: absolute;
  bottom: -30px;
  left: -10px;
  font-size: 12px;
  text-align: center;
  font-family: "roboto";
  font-weight: 300;
  width: 70px;
}

.igData1:after {
  content: "17歳以下";
}

.igData2:after {
  content: "18歳~24歳";
}

.igData3:after {
  content: "25歳~34歳";
}

.igData4:after {
  content: "35歳~44歳";
}

.igData5:after {
  content: "45歳以上";
}

.igData6:after {
  content: "Oliver";
}

.igData7:after {
  content: "Barry";
}

.igData8:after {
  content: "Felicity";
}

.igData9:after {
  content: "Malcom";
}

.igData10:after {
  content: "Ted";
}

@-webkit-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@-webkit-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@-webkit-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-webkit-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@-webkit-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@-webkit-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@-webkit-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@-webkit-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@-webkit-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-webkit-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}
@-moz-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@-moz-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@-moz-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-moz-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@-moz-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@-moz-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@-moz-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@-moz-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@-moz-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-moz-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}
@keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}

.graph-cont{
  position: relative;
}
.bar{
  height: 10px;
  width: 80%;
  max-width: 370px;
  line-height: 10px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 80%;
  position: absolute;
  left: 0;
  height: 1px;
  top: 5px;
  z-index: -2;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #c84088;
  height: 10px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 10s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
}
.bar1 { margin-bottom: 10px; }
.bar1::after{
  max-width: 43%;
  background: #81B71C;
}
.bar2::after{
  max-width: 23%;
  background: #006458;
}
.bar3::after{
  max-width: 14%;
  background: #81B71C;
}
.bar4::after{
  max-width: 3%;
  background: #006458;
}
.bar5::after{
  max-width: 12%;
  background: #81B71C;
}
.bar6::after{
  max-width: 3%;
  background: #006458;
}
.bar7::after{
  max-width: 14%;
  background: #81B71C;
}
.bar8::after{
  max-width: 4%;
  background: #006458;
}
.bar9::after{
  max-width: 20%;
  background: #81B71C;
}
.bar10::after{
  max-width: 6%;
  background: #006458;
}
.consumption .bar,
.consumption .bar::before { width: 100%; }
.consumption .bar1::after { max-width: 11%; background: #81B71C; }
.consumption .bar2::after { max-width: 6%; background: #006458; }
.consumption .bar3::after { max-width: 76%; background: #81B71C; }
.consumption .bar4::after { max-width: 59%; background: #006458; }
.consumption .bar5::after { max-width: 17%;  background: #81B71C;}
.consumption .bar6::after { max-width: 9%; background: #006458; }
.consumption .bar7::after { max-width: 40%; background: #81B71C; }
.consumption .bar8::after { max-width: 16%; background: #006458; }
.consumption .bar9::after { max-width: 9%; background: #81B71C; }
.consumption .bar10::after { max-width: 7%; background: #006458; }
.consumption .bar11::after { max-width: 17%; background: #81B71C;}
.consumption .bar12::after { max-width: 9%; background: #006458; }
.consumption .bar13::after { max-width: 19%; background: #81B71C;}
.consumption .bar14::after { max-width: 10%; background: #006458; }
.consumption .bar15::after { max-width: 19%; background: #81B71C; }
.consumption .bar16::after { max-width: 17%; background: #006458; }
.consumption .bar17::after { max-width: 10%; background: #81B71C;}
.consumption .bar18::after { max-width: 9%; background: #006458; }
.consumption .bar19::after { max-width: 10%; background: #81B71C; }
.consumption .bar20::after { max-width: 5%; background: #006458; }
.consumption .bar21::after { max-width: 14%; background: #81B71C; }
.consumption .bar22::after { max-width: 11%; background: #006458; }
.consumption .bar23::after { max-width: 19%; background: #81B71C; }
.consumption .bar24::after { max-width: 12%; background: #006458; }
.consumption .bar25::after { max-width: 18%; background: #81B71C; }
.consumption .bar26::after { max-width: 11%; background: #006458; }
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.how-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
code {
  padding: 5px;
  background: #ecf0f1;
  display: block;
}
pre{
  padding: 0;
  margin: 0;
}
.advocacy,
.trend,
.early,
.influencer,
.recommender { margin-bottom: 5px; }
.bar_box { margin-bottom: 8px; }
main#content .block_2 .bar_wrap,
main#content .block_2 .money_wrap .bar_wrap { width: 100%; }
main#content .block_2 .bar_wrap p:first-child {
  font-size: 16px;
  margin-right: 10px;
}
main#content .block_2 .graph-cont .bar_number {
  font-size: 24px;
  position: absolute;
  right: 0;
  color: #102a4b;
  margin: 0;
}
main#content .block_2 .bar_txt { font-size: 14px; }

@media only screen and (max-width: 767px){
  .igData1 { left: 0px; }
  .igData2 { left: 62px; }
  .igData3 { left: 124px; }
  .igData4 { left: 186px; }
  .igData5 { left: 248px; }
  .igData:before { font-size: 16px; }
  .igData:after { font-size: 10px; }
  .igFrameBar { width: 300px; }
  main#content .block_2 .igFrameBar {
    float: none;
    margin: 40% auto 0;
  }
  main#content .block_2 .bar_wrap { width: 80%; }
  main#content .block_2 .bar_txt { font-size: 10px; }
  main#content .block_2 .graph-cont .bar_number {
    font-size: 18px;
    bottom: 15px;
  }
}

.chart-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 3rem;
}
.chart {
  display: inline-block;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  text-align: center;
  position: relative;
}
.chart h4 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100%;
  font-size: 18px!important;
  font-weight: bold;!important;
  color: #000!important;
  text-align: center;
  line-height: 1.2;
  animation: fwt 2s ease-out .5s 1 forwards;
}
.chart .male,
.chart .woman {
  position: absolute;
  top: 131px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
}
.chart .male { left: 30px; }
.chart .woman { right:  30px; }

.chart1 .chart-txt5 {
  position: absolute;
  top: 90px;
  right: 30px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0!important;
}
.chart1 .chart-txt4 {
  position: absolute;
  top: 95px;
  left: 25px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0!important;
}
.chart1 .chart-txt3 {
  position: absolute;
  bottom: 30px;
  font-size: 18px!important;
  color: black!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100%;
}


.circle {
  display: inline-block;
  transform: rotate(-90deg);
}
.circle .type {
  fill: transparent;
  stroke-width: 100;
}
svg {
  overflow: hidden;
  vertical-align: middle;
}
.circle .type1 { stroke: #c84088; }
.circle .type2 { stroke: #102a4b; }
.circle .type3 { stroke: #81B71C; }
.circle .type4 { stroke: #ccc; }
.circle .type5 { stroke: #006458; }

.typeA1{animation:circleA1 6s forwards;}
@keyframes circleA1 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:320 630;}
}

.typeA2{animation:circleA2 6s forwards;}
@keyframes circleA2 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}

.typeA3{animation:circleA3 6s forwards;}
@keyframes circleA3 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:180 630;}
}

.typeA4{animation:circleA4 6s forwards;}
@keyframes circleA4 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:410 630;}
}

.typeA5{animation:circleA5 6s forwards;}
@keyframes circleA5 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}

@keyframes circle{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}