@charset "UTF-8";

/*------------------------------------
  bar graph
------------------------------------*/
#bar-graph {width: 100%;margin: 0;padding: 0;position: relative;display: flex;flex-flow: row wrap;justify-content: space-around;border-bottom: solid 4px #e4f7cf;}
#bar-graph .bar-graph-wrap {width: 18%;height: 240px;margin: 0;position: relative;overflow: hidden;}
#bar-graph .bar-graph-wrap .graph {width: 40%;border-radius: 6px 6px 0 0;position: absolute;bottom: 0;right: 0;left: 0;margin: 0 auto;padding: 0;background: #99ed8d;opacity: 0;}
#bar-graph .bar-graph-wrap:nth-child(1) .graph {height: 40%;transition-delay: 0.2s;}
#bar-graph .bar-graph-wrap:nth-child(2) .graph {height: 34.4%;transition-delay: 0.4s;}
#bar-graph .bar-graph-wrap:nth-child(3) .graph {height: 28%;transition-delay: 0.6s;}
#bar-graph .bar-graph-wrap:nth-child(4) .graph {height: 26.4%;transition-delay: 0.8s;}
#bar-graph .bar-graph-wrap:nth-child(5) .graph {height: 24%;transition-delay: 1.0s;}


#bar-graph .bar-graph-wrap .graph .point {font-size: 13px;line-height: 1.4;margin: 0;padding: 0;color: #00bd09;font-family: 'HondaGlobalFontJP-Regular', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0em;position: absolute;top: -134px;left: 50%;transform: translateX(-50%);width: 120px;font-weight: bold;}
#bar-graph .bar-graph-wrap .graph .point img {width: 80px;display: block;margin: 0 auto 2px auto;}
#bar-graph .bar-graph-wrap .graph .point strong {font-size: 26px;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-weight: normal;margin-right: 3px;}

/* クラスが付与された時の状態 */
#bar-graph .bar-graph-wrap .is-active {animation: graphAnim 2s forwards;}

@keyframes graphAnim {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@media screen and (max-width: 768px) {

#bar-graph .bar-graph-wrap {height: 55vw;}
#bar-graph .bar-graph-wrap .graph {width: 50%;}
#bar-graph .bar-graph-wrap:nth-child(1) .graph {height: 40%;}
#bar-graph .bar-graph-wrap:nth-child(2) .graph {height: 34.4%;}
#bar-graph .bar-graph-wrap:nth-child(3) .graph {height: 28%;}
#bar-graph .bar-graph-wrap:nth-child(4) .graph {height: 26.4%;}
#bar-graph .bar-graph-wrap:nth-child(5) .graph {height: 24%;}

#bar-graph .bar-graph-wrap .graph .point {font-size: 3.2vw;line-height: 1.3;top: -31vw;width: 16vw;}
#bar-graph .bar-graph-wrap .graph .point img {width: 100%;margin-bottom: 4px;}
#bar-graph .bar-graph-wrap .graph .point strong {font-size: 4.2vw;margin-right: 0;display: block;}

}