@charset "utf-8";

@keyframes circle{
	0%{stroke-dasharray:301.593; stroke-dashoffset:302; visibility: hidden; opacity: 0;}
	50%{stroke-dasharray:301.593; stroke-dashoffset:302; visibility: visible; opacity: 1;}
	100%{stroke-dasharray:301.593; stroke-dashoffset:0; visibility: visible; opacity: 1;}
}
@keyframes opacity{
    0%{opacity: 0;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

.s01 .chart_circle .progress{stroke-dasharray:301.593; stroke-dashoffset:0; visibility: visible; opacity: 1;}
.s02 .chart_circle .progress{stroke-dasharray:301.593; stroke-dashoffset:0; visibility: visible; opacity: 1;}
.s03 .chart_circle .progress{stroke-dasharray:301.593; stroke-dashoffset:0; visibility: visible; opacity: 1;}
.active .chart_donut li.s01:before{opacity: 1;}
.active .chart_donut li.s02:before{opacity: 1;}
.active .chart_donut li.s03:before{opacity: 1;}

.active .s01 .chart_circle .progress{animation-name:circle;-webkit-animation-name:circle; animation-duration:3s; -webkit-animation-duration:3s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}
.active .s02 .chart_circle .progress{animation-name:circle;-webkit-animation-name:circle; animation-duration:3.25s; -webkit-animation-duration:3.25s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}
.active .s03 .chart_circle .progress{animation-name:circle;-webkit-animation-name:circle; animation-duration:3.5s; -webkit-animation-duration:3.5s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}
.active .chart_donut li.s01:before{animation-name:opacity;-webkit-animation-name:opacity; animation-duration:2s; -webkit-animation-duration:2s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}
.active .chart_donut li.s02:before{animation-name:opacity;-webkit-animation-name:opacity; animation-duration:2s; -webkit-animation-duration:2s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}
.active .chart_donut li.s03:before{animation-name:opacity;-webkit-animation-name:opacity; animation-duration:2s; -webkit-animation-duration:2s;animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-direction: alternate; -webkit-animation-direction: alternate; animation-timing-function: ease-in-out;-webkit-animation-timing-function: ease-in-out;}


/* s_visual */
#sub_top_Wrap{}

.visual-area {margin-top:0px; position:relative;width:100%; min-width: 1903px; height:600px; line-height:1.4; box-sizing:border-box;overflow:hidden; text-align:center; background:no-repeat; margin: 0 auto; top: 104px; background-size: cover;}
.visual-area .sub_tit h4{margin-bottom: 20px;}