@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
.graph {
  width: 100%;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0;
}
.graph h3 {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.igFrameBar {
  max-width: 45%;
  height: 100px;
  position: relative;
  margin: 0 auto;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  justify-content: center;
  align-items: flex-end;
  /*margin: 13% auto 0px auto;
  transform: translate(0, -50%);*/
}
/*.igData__wrap {
  float: left;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 13% auto 0px auto;
  transform: translate(0, -50%);
}
.igData__wrap .igData {
  width: 15px;
  position: absolute;
  bottom: 1px;
  margin: 0px 0px 0px 0px;
  z-index: 99;
  float: left;
  border-radius: 5px 5px 0 0;
}*/
.igData {
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  justify-content: center;
  align-items: baseline;
  width: 30px;
  bottom: 1px;
  margin: 0px 10px;
  z-index: 5;
  border-radius: 5px 5px 0 0;
  background: #ed774f;
}

.igData1 {
  background: #ed774f;
  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: #ed774f;
  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: #ed774f;
  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: #ed774f;
  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: #ed774f;
  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: #ed774f;
  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 {
  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 {
  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 {
  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 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar10 8s 1s forwards;
  -moz-animation: showBar10 8s 1s forwards;
  animation: showBar10 8s 1s forwards;
}

.igData11 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar11 8s 1s forwards;
  -moz-animation: showBar11 8s 1s forwards;
  animation: showBar11 8s 1s forwards;
}

.igData12 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar12 8s 1s forwards;
  -moz-animation: showBar12 8s 1s forwards;
  animation: showBar12 8s 1s forwards;
}

.igData13 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar13 8s 1s forwards;
  -moz-animation: showBar13 8s 1s forwards;
  animation: showBar13 8s 1s forwards;
}

.igData14 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar14 8s 1s forwards;
  -moz-animation: showBar14 8s 1s forwards;
  animation: showBar14 8s 1s forwards;
}

.igData15 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar15 8s 1s forwards;
  -moz-animation: showBar15 8s 1s forwards;
  animation: showBar15 8s 1s forwards;
}

.igData16 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar16 8s 1s forwards;
  -moz-animation: showBar16 8s 1s forwards;
  animation: showBar16 8s 1s forwards;
}

.igData17 {
  height: 0px;
  left: 353.6363636364px;
  -webkit-animation: showBar17 8s 1s forwards;
  -moz-animation: showBar17 8s 1s forwards;
  animation: showBar17 8s 1s forwards;
}

.igData:before {
  position: absolute;
  background: #444;
  font-size: 14px;
  color: white;
  font-family: "roboto";
  font-weight: 300;
}

/*---------------
グラフ1
----------------*/
.igData1:before {
  content: "5.05%";
}

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

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

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

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

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

/*---------------
グラフ2
----------------*/
.igData7:before {
  content: "2.9%";
}

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

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

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

.igData11:before {
  content: "20.74%";
}

.igData12:before {
  content: "13.11%";
}

/*---------------
グラフ3
----------------*/
.igData13:before {
  content: "5.39%";
}

.igData14:before {
  content: "30.61%";
}

.igData15:before {
  content: "34.7%";
}

.igData16:before {
  content: "19.39%";
}

.igData17:before {
  content: "9.91%";
}

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

.igData1:after,
.igData7:after,
.igData13:after {
  content: "18~24歳";
}

.igData2:after,
.igData8:after,
.igData14:after {
  content: "25~34歳";
}

.igData3:after,
.igData9:after,
.igData15:after {
  content: "35~44歳";
}

.igData4:after,
.igData10:after,
.igData16:after {
  content: "45~54歳";
}

.igData5:after,
.igData11:after,
.igData17:after {
  content: "55~64歳";
}

.igData6:after,
.igData12:after {
  content: "65歳以上";
}

@-webkit-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.05%;
  }
}
@-webkit-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.13%;
  }
}
@-webkit-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 69.63%;
  }
}
@-webkit-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 98.9%;
  }
}
@-webkit-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 99.76%;
  }
}
@-webkit-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.19%;
  }
}
@-webkit-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 12.9%;
  }
}
@-webkit-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.27%;
  }
}
@-webkit-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.78%;
  }
}
@-webkit-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 96.2%;
  }
}
@-webkit-keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.74%;
  }
}
@-webkit-keyframes showBar12 {
  0% {
    height: 0px;
  }
  100% {
    height: 23.11%;
  }
}
@-webkit-keyframes showBar13 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.39%;
  }
}
@-webkit-keyframes showBar14 {
  0% {
    height: 0px;
  }
  100% {
    height: 90.61%;
  }
}
@-webkit-keyframes showBar15 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.7%;
  }
}
@-webkit-keyframes showBar16 {
  0% {
    height: 0px;
  }
  100% {
    height: 59.39%;
  }
}
@-webkit-keyframes showBar17 {
  0% {
    height: 0px;
  }
  100% {
    height: 19.91%;
  }
}
@-moz-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.05%;
  }
}
@-moz-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.13%;
  }
}
@-moz-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 69.63%;
  }
}
@-moz-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 98.9%;
  }
}
@-moz-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 99.76%;
  }
}
@-moz-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.19%;
  }
}
@-moz-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 12.9%;
  }
}
@-moz-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.27%;
  }
}
@-moz-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.78%;
  }
}
@-moz-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 96.2%;
  }
}
@-moz-keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.74%;
  }
}
@-moz-keyframes showBar12 {
  0% {
    height: 0px;
  }
  100% {
    height: 23.11%;
  }
}
@-moz-keyframes showBar13 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.39%;
  }
}
@-moz-keyframes showBar14 {
  0% {
    height: 0px;
  }
  100% {
    height: 90.61%;
  }
}
@-moz-keyframes showBar15 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.7%;
  }
}
@-moz-keyframes showBar16 {
  0% {
    height: 0px;
  }
  100% {
    height: 59.39%;
  }
}
@-moz-keyframes showBar17 {
  0% {
    height: 0px;
  }
  100% {
    height: 19.91%;
  }
}
@keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.05%;
  }
}
@keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.13%;
  }
}
@keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 69.63%;
  }
}
@keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 98.9%;
  }
}
@keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 99.76%;
  }
}
@keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.19%;
  }
}
@keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 12.9%;
  }
}
@keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 32.27%;
  }
}
@keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.78%;
  }
}
@keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 96.2%;
  }
}
@keyframes showBar11 {
  0% {
    height: 0px;
  }
  100% {
    height: 66.74%;
  }
}
@keyframes showBar12 {
  0% {
    height: 0px;
  }
  100% {
    height: 23.11%;
  }
}
@keyframes showBar13 {
  0% {
    height: 0px;
  }
  100% {
    height: 15.39%;
  }
}
@keyframes showBar14 {
  0% {
    height: 0px;
  }
  100% {
    height: 90.61%;
  }
}
@keyframes showBar15 {
  0% {
    height: 0px;
  }
  100% {
    height: 94.7%;
  }
}
@keyframes showBar16 {
  0% {
    height: 0px;
  }
  100% {
    height: 59.39%;
  }
}
@keyframes showBar17 {
  0% {
    height: 0px;
  }
  100% {
    height: 19.91%;
  }
}



.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: 14px; }
  .igFrameBar {
    width: 100%;
    max-width: 100%;
    margin: 40px auto 50px;
  }
  .graph h3 { text-align: left; }
  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 {
  display: inline-block;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  height: 250px;
  text-align: center;
  position: relative;
}
.chart h4 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  top: 46%;
  width: 100%;
  font-size: 18px!important;
  font-weight: bold;!important;
  color: #000!important;
  text-align: center;
  line-height: 1.2;
  position: absolute;
  z-index: 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: 75px;
  bottom: 30px;
}
.chart .woman {
  right: 80px;
  top: 40px;
}
.graph2 .chart .woman {
  right: 90px;
  top: 40px;
}
.graph3 .chart .woman {
  right: 97px;
  top: 30px;
}

.circle {
  display: inline-block;
  transform: rotate(-90deg);
}
.circle .type {
  fill: transparent;
  stroke-width: 100;
}
svg {
  overflow: hidden;
  vertical-align: middle;
}
.circle .type1,
.circle .type3,
.circle .type5 { stroke: #ef675b; }
.circle .type2,
.circle .type4,
.circle .type6 { stroke: #99a1f6; }

.sp { display: none; }

@media only screen and (max-width: 767px){
  .sp {
    display: block;
    margin: 0 auto;
  }
  .pc { display: none; }
}

.typeA1{animation:circleA1 6s forwards;}
@keyframes circleA1{
  0%{stroke-dasharray:0 240;}
  100%{stroke-dasharray:20 240;}
}
.typeA2{animation:circleA2 6s forwards;}
@keyframes circleA2{
  0%{stroke-dasharray:0 240;}
  100%{stroke-dasharray:240 240;}
}
.typeA3{animation:circleA3 6s forwards;}
@keyframes circleA3{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:80 630;}
}
.typeA4{animation:circleA4 6s forwards;}
@keyframes circleA4{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}
.typeA5{animation:circleA5 6s forwards;}
@keyframes circleA5{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:60 630;}
}
.typeA6{animation:circleA6 6s forwards;}
@keyframes circleA6{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}

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