@charset "uft-8";

/******************************
	main Query
*******************************/

#contents {
	/*	min-width: 1000px;*/
}
#contents,
#contents-top,
#contents-reason {
	display: block;
	overflow: hidden;
	position: relative;
}
#contents #contents-top,
#contents #contents-anser,
#contents #contents-flow {
	background-color: white;
	background-size: 16px 16px;
}
#contents #contents-top{
	background-image: radial-gradient(#a0bebe 10%, transparent 0%);
}
#contents #contents-anser,
#contents #contents-flow {
	background-image: radial-gradient(#dee 10%, transparent 0%);
}

#contents-top #top-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
#top-wrap .top-message {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 55%;
	background: url('/template/img/question.svg') center center no-repeat;
}
#top-wrap .top-message img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32rem;
	max-width: 80%;
}

#contents-top .top-topics {
	position: absolute;
	top: 5%;
	right: -16em;
	width: 16em;
	color: #64b45a;
	background-color: #EBF0F0;
}
#contents-top .top-topics:before {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: 6rem;
	right: 0;
	border-top: 2px solid #395635;
}
.top-topics .topics-title {
	margin: -.7em 0 .3em;
}
.top-topics .topics-title img {
	height: 1rem;
	padding-left: 1em;
}
.top-topics .topics-msg {
	font-size: .9rem;
	line-height: 1.3;
	padding: 0 .5em .8em 1.1em;
	color: rgb(57, 86, 53);
	box-sizing: border-box;
}
.top-topics .topics-msg span.category {
	display: inline-block;
}
.top-topics .topics-msg p.text {
	margin-top: .2em;
}
#contents #reason-wrap h2 img,
#contents #contents-solution h2 img,
#contents #contents-new h2 img {
	height: 4.2rem;
	padding-left: 2rem;
}
#contents #reason-wrap {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 2em;
	padding: 5rem 0 0;
}
p.note {
	font-size: .9rem;
	text-align: right;
	padding-right: 6%;
}
.svg p.note{margin-top: 1em;}
p.note small {
	font-size: .8em;
	display: block;
}
.lead {
	position: relative;
	box-sizing: border-box;
}
.lead:before,
.lead:after {
	content: "";
	display: block;
	position: absolute;
}
.lead:before {
	background-color: white;
	height: 2.5rem;
	top: -1.2em;
	z-index: 0;
}
.lead:after {
	border-top: 2px solid #395635;
	top: 1.2em;
}
.lead p {
	font-size: 1.4rem;
	position: relative;
	z-index: 1;
	margin-bottom: 1em;
	line-height: 1.6;
}

.orange{
	color: #ff8c46;
}

/* reason1 */

#chart1 {
	padding: 1rem 2rem 0;
}
#reason1 .lead {
	padding-left: 2rem;
}
#reason1 .lead:before {
	left: -100%;
	right: calc(100% - 22rem);
}
#reason1 .lead:after {
	left: -100%;
	right: calc(100% - 1rem);
}

/* reason2 */

#chart2 {
	padding: 1rem 2rem 0;
	width: calc(100% - 25rem);
}
#reason2 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	align-items: center;
	padding-top: 3rem;
}
#reason2 .lead {
	padding-right: 2rem;
	width: 22rem;
}
#reason2 .lead:before {
	right: calc(-100% - 22rem);
	left: calc(100% - 22rem);
}
#reason2 .lead:after {
	right: calc(-100% - 21rem);
	left: calc(100% - 1rem);
}
#reason2 .lead p {
	float: right;
}

/* reason3 */

#chart3 {
	padding: 1rem 0 0 9%;
	width: calc(100% - 25rem);
	box-sizing: border-box;
}
#reason3 {
	display: flex;
	justify-content: flex-end;
	flex-direction: row-reverse;
	padding-top: 7rem;
}
#reason3 .lead {
	padding-left: 2rem;
	width: 22rem;
}
#reason3 .lead:before {
	left: calc(-100% - 22rem);
	right: calc(100% - 22rem);
}
#reason3 .lead:after {
	left: calc(-100% - 21rem);
	right: calc(100% - 1rem);
}

/* reason4 */

#chart4 {
	padding: 1rem 3% 0 0;
	width: calc(100% - 25rem);
	box-sizing: border-box;
}
#reason4 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	padding-top: 5rem;
}
#reason4 .lead {
	padding-right: 2rem;
	width: 22rem;
}
#reason4 .lead:before {
	right: calc(-100% - 22rem);
	left: calc(100% - 22rem);
}
#reason4 .lead:after {
	right: calc(-100% - 21rem);
	left: calc(100% - 1rem);
}
#reason4 .lead p {
	float: right;
}

/* question1 */

#question1 {
	font-size: 1.5rem;
	padding: 2em 0;
	margin: 5em 0 4em;
	text-align: center;
	background: url('/template/img/question-white.svg') center center no-repeat;
	position: relative;
}
#question1:before,
#question1:after,
#question1 .border {
	content: "";
	display: block;
	border-top: 3px solid;
	position: absolute;
	top: 50%;
}
#question1:after,
#question1 .border {
	left: 50%;
	transform: translateX(-50%);
}
#question1:before {
	left: -100%;
	right: -100%;
	z-index: -3;
}
#question1:after {
	border-top-color: #FF8C46;
	width: calc(14em + 60px);
	z-index: -2;
}
#question1 .border {
	border-top-color: #EBF0F0;
	width: 200%;
	z-index: -1;
}
#anser-wrap {
	margin: 0 auto;
	padding-top: 55px;
	padding-bottom: 70px;
	text-align: center;
}
#anser-wrap > p {
	font-size: 25px;
}
#anser-wrap > .circle3 {
	height: 140px;
	width: 140px;
	border: 3px rgb(255, 140, 70) dashed;
	border-radius: 50%;
	font-size: 18pt;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin: 35px auto 30px;
}
#contents-solution {
	position: relative;
}
#solution-wrap {
	max-width: 1000px;
	margin: 7em auto 0;
	/*overflow: hidden; del OK */
	display: block;
	padding-bottom: 2em;
	position: relative;
}
#solution-wrap h2 {
	position: absolute;
	top: 0;
	left: 0;
}
#solution-wrap .solution-top {
	float: left;
	width: initial;
	margin-left: 105px;
}
#solution-wrap .solution1 {
	float: right;
	text-align: left;
	font-size: 1.355rem;
	margin-top: 1em;
	width: 25em;
}
#solution-wrap .solution3 {
	text-align: left;
	font-size: 1.355rem;
	margin: 1rem auto;
	max-width: 1000px;
	padding-left: 2rem;
}
#solution-wrap .solution3:after {
	content: "";
	display: block;
	clear: both;
}
#solution-wrap .solution4 {
	text-align: left;
	font-size: 1.355rem;
	margin: 1rem auto 5rem;
	max-width: 1000px;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0 1rem;
}
.solution3 > img {
	float: right;
	margin-top: -5rem;
}
.solution3-text,
.solution4-text{
	font-size: 1rem;
}
.solution3-text {
	margin-top: 7rem;
}
.solution4-text {
	margin-top: 8rem;
	float: left;
	margin-left: 2rem;
}
.solution4 > img {
	float: left;
}
.solution3-text .text-title,
.solution4-text .text-title {
	font-size: 1.2rem;
}
.solution3-text p:first-child,
.solution4-text p:first-child {
	font-feature-settings: "palt";
}
.solution3-text p:last-child,
.solution4-text p:last-child {
	color: black;
}
.solution1-title-right {
	font-size: 1.35rem;
	/*padding-left: 7rem; del OK */
	position: relative;
}
#solution2 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
	padding: 1em 0 5em;
}
#solution2-area {
	margin: 0 4% 2em;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: center;
	align-items: center;
}
#solution2-area:last-child {}
#solution2-area img {
	margin-right: 1rem;
}
#solution2-detail {}
.solution2-number {
	font-size: 4rem;
	font-weight: bold;
	line-height: 1;
}
.solution2-number-small {
	font-size: 1.5rem;
	display: inline-block;
}
#reason2 .circle-block,
#reason4 .circle-block {
	float: left;
	display: block;
	overflow: hidden;
}
#reason2 .circle-block .circle1,
#reason4 .circle-block .circle1 {
	width: 220px;
	height: 220px;
	border: 3px solid orange;
	border-radius: 50%;
	text-align: center;
	color: orange;
	display: table-cell;
	vertical-align: middle;
}
#reason2 .circle-block .circle2,
#reason4 .circle-block .circle2 {
	width: 110px;
	height: 110px;
	border: 3px solid green;
	border-radius: 50%;
	text-align: center;
	color: green;
	display: table-cell;
	vertical-align: middle;
}
#reason2 .circle-block .circle1 p,
#reason4 .circle-block .circle1 p {
	font-size: 36pt;
}
#reason2 .circle-block .circle1 p span,
#reason4 .circle-block .circle1 p span {
	font-size: 16px;
}
#flow-wrap {
	/*	width: 1200px;*/
	margin: 0 auto;
	padding-top: 55px;
	padding-bottom: 70px;
	text-align: center;
	font-weight: normal;
}
#flow-wrap h2 {
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 1.8;
	margin-bottom: 1em;
}
#flow-wrap h2 strong {
	color: rgb(255, 140, 70);
	font-weight: inherit;
}
#flow-wrap .flow.svg {
	position: relative;
}
.flow .novalue {
	border: 3px rgb(255, 140, 70) dashed;
	border-radius: 50%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin: 35px auto 15px;
}
.flow .novalue {
	height: 160px;
	width: 160px;
	font-size: 14pt;
	color: rgb(255, 140, 70);
}
.flow .value-circle {
	height: 220px;
	width: 220px;
	background-color: rgb(2255, 140, 70);
	font-size: 14pt;
	border-radius: 50%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	margin: 4.5rem auto 30px;
	position: relative;
}
#ml-arrow {
	position: absolute;
	width: 100px;
	height: 142px;
	background: url("/template/img/flow-arrow.svg") center top no-repeat;
	top: 180px;
	left: 50%;
	margin-left: -50px;
	transition: .5s ease;
}
.value-circle p {
	font-size: 14pt;
	color: white;
}
.flow .value-circle a {
	background-color: white;
	font-size: .75em;
	border-radius: 2em;
	color: rgb(255, 140, 70);
	display: inline-block;
	margin: .7em auto 0;
	padding: .25em .7em .2em;
	line-height: 1.1;
}
.flow .value-circle p > a:hover {
	opacity: .6;
}

.flow ol {
	position: relative;
	z-index: 1;
	height: 730px;
}


.flow ol li {
	opacity: 0;
	text-align: left;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	transition: .3s ease;
	position: absolute;
}
.flow ol li.appear {
	opacity: 1;
}

#flow1,
#flow3,
#flow5{
	flex-direction: row-reverse;
	padding-right: 5rem;
	margin: 0 auto 0 0;
	right: 50%;
}
#flow2,
#flow4{
	padding-left: 5rem;
	margin: 0 0 0 auto;
	left: 50%;
}
#flow1{
	bottom: 80%;
}
#flow2{
	bottom: 60%;
}
#flow3{
	bottom: 40%;
}
#flow4{
	bottom: 22%;
}
#flow5{
	bottom: 7%;
}

.flow ol li img{
	height: auto;
	margin: 0 auto 0 0;
}

#flow1 > div,
#flow2 > div,
#flow3 > div,
#flow4 > div,
#flow5 > div {
	position: relative;
	flex-shrink: 1;
}
#flow1 > div,
#flow3 > div,
#flow5 > div {
	margin-left: 1rem;
}
#flow2 > div,
#flow4 > div{
	margin-right: .5rem;
}

.flow ol li > div > p {
	color: rgb(255, 140, 70);
	font-size: 1.2rem;
	padding-bottom: .2em;
	line-height: 1.4;
}
.flow ol li > div > p span{
	display: inline-block;
}


.flow ol li .link {
	font-size: 1rem;
	position: relative;
}
#flow1 > div .link:before,
#flow2 > div .link:before,
#flow3 > div .link:before,
#flow4 > div .link:before,
#flow5 > div .link:before {
	position: absolute;
	content: "";
	display: block;
	height: 1rem;
	width: 1rem;
	border-radius: 50%;
	background-color: rgb(100, 180, 90);
	opacity: 0;
	transition: .5s .3s ease;
}
#flow1.appear > div .link:before,
#flow2.appear > div .link:before,
#flow3.appear > div .link:before,
#flow4.appear > div .link:before,
#flow5.appear > div .link:before {
	opacity: 1;
}

#flow1 > div .link:after,
#flow2 > div .link:after,
#flow3 > div .link:after,
#flow4 > div .link:after,
#flow5 > div .link:after {
	position: absolute;
	content: "";
	display: block;
	border-bottom: 2px solid rgb(100, 180, 90);
	height: 15px;
	transition: .3s .3s ease;
}

#flow1 > div .link:before,
#flow3 > div .link:before,
#flow5 > div .link:before{
	right: -5.5rem;
	bottom: calc(.6rem + 1px);
}
#flow2 > div .link:before,
#flow4 > div .link:before{
	bottom: calc(.6rem + 1px);
	left: -5.5rem;
}

#flow1 > div .link:after {
	left: 14em;
}

#flow3 > div .link:after {
	left: 95%;
}

#flow5 > div .link:after {
	left: 6em;
}


#flow1 > div .link:after,
#flow3 > div .link:after,
#flow5 > div .link:after{
	right: 0;
	bottom: 1.1rem;
}
#flow2 > div .link:after,
#flow4 > div .link:after{
	bottom: 1rem;
	right: 100%;
	left: 0;
}

#flow1.appear > div .link:after,
#flow3.appear > div .link:after,
#flow5.appear > div .link:after{
	right: -5rem;
}
#flow2.appear > div .link:after,
#flow4.appear > div .link:after{
	left: -5.5rem;
}


.flow ol li .link a {
	line-height: 1.2;
	background: rgb(100, 180, 90);
	border-radius: 1em;
	color: white;
	padding: .4em .7em .3em;
	margin: 0 .5rem .3em 0;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}


#ml-line {
	background: url('/template/img/flow-dash.svg') center top no-repeat;
	background-size: 4px 710px;
	position: absolute;
	top: 180px;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 0;
}


@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	#contents #contents-top{
		background-image: radial-gradient(#a0bebe 7%, transparent 0%);
	}
	#contents #contents-flow {
		background-image: radial-gradient(#dee 7%, transparent 0%);
	}
	.flow ol {
		background-size: 5px;
	}
}







#contents-news {
	width: 95%;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 7rem;
	padding-bottom: 8rem;
	text-align: center;
}
#contents-news > h2 {
	text-align: left;
	font-size: .9rem;
	font-weight: normal;
	margin-bottom: 2rem;
}
#contents-news > h2 img {
	margin-right: 3rem;
}
#news-loop {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#news-loop li {
	width: 49%;
	display: block;
	border: 1px solid rgb(57, 86, 53);
	padding: 10px;
	margin-bottom: 1rem;
	box-sizing: border-box;
}
#news-loop li a {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
#news-loop li img {
	width: 27%;
}
#news-loop .contents {
	width: 70%;
	color: rgb(57, 86, 53);
	text-align: left;
}
#news-loop .data {
	font-size: .85rem;
}
#news-loop .category {
	float: right;
	color: rgb(57, 86, 53);
	opacity: .5;
}
#news-loop .text {
	font-size: .9rem;
	line-height: 1.5;
}
#links {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 3rem;
}
#links li {
	width: 30%;
	display: box;
}
#links li a {
	transition: .3s ease;
}
#links li a:hover {
	opacity: .5;
}
#links li a span{
	display: inline-block;
}
#links .mark,
#links .univ,
#links .job {
	font-size: 1.2rem;
	line-height: 1.2;
	background: white;
	border-radius: 5em;
	padding: .6em;
	box-sizing: border-box;
	position: relative;
}
#links .univ a {
	color: rgb(235, 110, 50);
}
#links .mark a {
	color: rgb(57, 86, 53);
}
#links .job a {
	color: rgb(240, 180, 0);
}
#links .univ a,
#links .job a {
	position: absolute;
	top: 50%;
	left: .6em;
	right: .6em;
	width: calc(100% - 1.2em);
	transform: translateY(-50%);
}

/******************************
	from inline
*******************************/

#contents #contents-top,
#contents #contents-anser,
#contents #contents-flow {
	background-position: left top;
}

/* solution3 */

.solution3 .lead {
	width: 35rem;
}
.solution3 .lead:before {
	left: calc(-100% - 25rem);
	right: calc(100% - 25rem);
}
.solution3 .lead:after {
	left: calc(-100% - 21rem);
	right: calc(100% + 1rem);
	top: 0.9rem;
}

/* solution1 */

.solution1 .lead {
	padding-right: 2rem;
	float: right;
	width: 22rem;
}
.solution1 .lead:before {
	right: calc(-100% - 25rem);
	left: calc(100% - 30rem);
}
.solution1 .lead:after {
	right: calc(-100% - 25rem);
	left: calc(100% - 4rem);
	top: 0.9rem;
}
.solution1 .lead p {
	float: right;
	width: 27rem;
}

/* --------------------------------
	animation topics circle  style
-------------------------------- */

.top-topics {
	animation: topics-move 0.3s linear 1s 1 forwards;
}
@keyframes topics-move {
	100% {
		right: 0;
	}
}

/* --------------------------------
	animation top circle  style
-------------------------------- */

.bk-circle {
	transform: scale(0);
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #a0bebe;
	transition: opacity ease 1s;
	animation-name: bk-circle;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 4s;
}
.ani1 {
	top: calc(16px * 5);
	left: calc(16px * 4);
	animation-delay: 0s;
}
.ani2 {
	top: calc(16px * 9);
	left: calc(16px * 80);
	animation-delay: 4s;
}
.ani3 {
	top: calc(16px * 28);
	left: calc(16px * 40);
	animation-delay: 8s;
}
.ani4 {
	top: calc(16px * 20);
	left: calc(16px * 70);
	animation-delay: 12s;
}
.ani5 {
	top: calc(16px * 40);
	left: calc(16px * 10);
	animation-delay: 0s;
}
.ani6 {
	top: calc(16px * 35);
	left: calc(16px * 80);
	animation-delay: 4s;
}
.ani7 {
	top: calc(16px * 36);
	left: calc(16px * 65);
	animation-delay: 8s;
}
.ani8 {
	top: calc(16px * 22);
	left: calc(16px * 50);
	animation-delay: 12s;
}

@keyframes bk-circle {
	100% {
		transform: scale(.6);
		background-color: #ff8c46;
	}
}
#svg-chart1 {
	margin-bottom: -7%;
	width: 100%;
	display: none;
}
.chart1-text-1 {
	font-size: 75px;
}
.chart1-text-1,
.chart1-text-10,
.chart1-text-5 {
	fill: #64b45a;
}
.chart1-text-1,
.chart1-text-10,
.chart1-text-11,
.chart1-text-2 {
	letter-spacing: -0.05em;
}
.chart1-text-2 {
	font-size: 60px;
}
.chart1-text-11,
.chart1-text-2,
.chart1-text-6 {
	fill: #ff8c46;
}
.chart1-text-10,
.chart1-text-11,
.chart1-text-5,
.chart1-text-6 {
	font-size: 30px;
}
.chart1-text-5,
.chart1-text-6 {
	letter-spacing: -0.03em;
}
.chart1-0 {
	fill: #64B45A;
}
.chart1-1 {
	fill: #FF8C46;
}
.chart1-2 {
	fill: none;
	stroke: #A0A0A0;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-miterlimit: 10;
}
.chart1-3 {
	fill: #A0A0A0;
}
.chart1-4 {
	fill: none;
	stroke: #64B45A;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke-dasharray: 1, 2;
}
.chart1-5 {
	fill: none;
	stroke: #FF8C46;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke-dasharray: 1, 2;
}
.chart1-6 {
	fill: #C8C8C8;
}
.chart1-7 {
	fill: none;
	stroke: #64B45A;
	stroke-miterlimit: 10;
}
.chart1-8 {
	fill: none;
	stroke: #FF8C46;
	stroke-miterlimit: 10;
}
.chart1-2 {
	fill: red;
}
.line-1 {
	stroke-dashoffset: -200;
	stroke-dasharray: 200;
	animation: chart1 .5s linear .8s 1 forwards;
}
.line-1-all ellipse {
	animation: chart1 .5s linear .3s 1 forwards;
	opacity: 0;
}

.start {
	animation: chart1 .5s linear 1s 1 forwards;
	opacity: 0;
}
.year1 {
	animation: chart1 .5s linear 1s 1 forwards;
	opacity: 0;
}

.line-green {
	animation: chart1 .5s linear 1.2s 1 forwards;
	opacity: 0;
}
.num-35 {
	animation: chart1 .5s linear 1.5s 1 forwards;
	opacity: 0;
}

.poly {
	animation: chart1-ar .3s linear 2.5s 1 forwards;
	opacity: 0;
	transform: translateY(-15px);
}

.finish {
	animation: chart1 .5s linear 2.8s 1 forwards;
	opacity: 0;
}
.year2 {
	animation: chart1 .5s linear 2.8s 1 forwards;
	opacity: 0;
}
.line-orange {
	animation: chart1 .5s linear 3s 1 forwards;
	opacity: 0;
	width: 0;
}
.num-26 {
	animation: chart1 .5s linear 3.2s 1 forwards;
	opacity: 0;
}

#svg1-down{
	transform: translate(150px, 70px);
}
#svg1-down polyline{
	opacity: 0;
	fill:none;
	stroke:#ff60a0;
	stroke-width:4px;
	animation: chart1 .3s linear 3.2s 1 forwards;
}
#svg1-down line{
	opacity: 0;
	fill:none;
	stroke:#ff60a0;
	stroke-width:3px;
	stroke-dashoffset: 500;
	stroke-dasharray: 500;
	animation: chart1 .5s linear 3s 1 forwards;
}
.line-1-all{
	animation: chart1-disa .3s linear 3s 1 forwards;
}

@keyframes chart1 {
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
@keyframes chart1-ar {
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes chart1-disa {
	100% {
		opacity: .3;
	}
}

#svg-chart2 {
	width: 100%;
	display: none;
	overflow: visible;
}
.ch2-1,
.ch2-12,
.ch2-20 {
	font-size: 18px;
}
.ch2-1 {
	fill: #505050;
}

/*.ch2-1,.ch2-12,.ch2-20,.ch2-8{font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;}*/

.ch2-1,
.ch2-20 {
	letter-spacing: -0.05em;
}
.ch2-2 {
	letter-spacing: -0.15em;
}
.ch2-3 {
	letter-spacing: -0.16em;
}
.ch2-4 {
	letter-spacing: -0.09em;
}
.ch2-5 {
	letter-spacing: -0.13em;
}
.ch2-6 {
	letter-spacing: -0.23em;
}
.ch2-7 {
	letter-spacing: -0.13em;
}
.ch2-8 {
	font-size: 16px;
}
.ch2-11,
.ch2-12,
.ch2-8 {
	fill: #ff8c46;
}
.ch2-9 {
	letter-spacing: 0.25em;
}
.ch2-10,
.ch2-17,
.ch2-18,
.ch2-22,
.ch2-23 {
	fill: none;
	stroke-miterlimit: 10;
}
.ch2-10 {
	stroke: #ff8c46;
	transition: ease .8s;
}
.ch2-10,
.ch2-17,
.ch2-18 {
	stroke-width: 4px;
}
.ch2-11 {
	font-size: 36px;
}

/*.ch2-11,.ch2-19{font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;font-weight:400;}*/

.ch2-11,
.ch2-12 {
	letter-spacing: -0.05em;
}
.ch2-13 {
	letter-spacing: -0.07em;
}
.ch2-14 {
	letter-spacing: -0.11em;
}
.ch2-15 {
	letter-spacing: -0.09em;
}
.ch2-16 {
	letter-spacing: -0.05em;
}
.ch2-17,
.ch2-18 {
	stroke: #64b45a;
}
.ch2-18 {
	stroke-dasharray: 2.98 2.98;
}
.ch2-19 {
	font-size: 24px;
	letter-spacing: -0.05em;
}
.ch2-19,
.ch2-20 {
	fill: #64b45a;
}
.ch2-21 {
	letter-spacing: -0.14em;
}
.ch2-22,
.ch2-23 {
	stroke: #a0a0a0;
	stroke-width: 2px;
}
.ch2-23 {
	stroke-dasharray: 3.03 3.03;
}
.ch2-10 {
	/*左サークル*/
	transform-origin: 50%;
	transform: scale(.2);
	stroke-width: 6px;
	opacity: 0;
	animation: chart2-c .8s linear .3s 1 forwards;
}
.ch2-8,
.ch2-11,
.ch2-12 {
	/*左文字*/
	opacity: 0;
	animation: chart2 .5s linear 1s 1 forwards;
}
.ch2-17,
.ch2-18 {
	/* 右サークル */
	transform: scale(2);
	opacity: 0;
	stroke-width: 2px;
	animation: chart2-c .8s linear .3s 1 forwards;
}
.ch2-17{
	transform-origin: 50% 100%;
}
.ch2-18{
	transform-origin: 50% 0%;
}

.ch2-19,
.ch2-20 {
	/* 右文字*/
	opacity: 0;
	animation: chart2 .5s linear 1s 1 forwards;
}
.ch2-22,
.ch2-23{
	/* センターライン群*/
	opacity: 0;
	animation: chart2 .8s linear 1s 1 forwards;
}
.ch2-1{
	/* センター文字 */
	opacity: 0;
	animation: chart2 .5s linear 1.5s 1 forwards;
}
@keyframes chart2 {
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
@keyframes chart2-c {
	100% {
		opacity: 1;
		stroke-width: 4px;
		transform: scale(1);
	}
}

/* svg-chart3 */
#svg-chart3 {
	width: 100%;
	display: none;
}
.ch3-text-1,
.ch3-text-3,
.ch3-text-4,
.ch3-text-5 {
	writing-mode: tb;
	text-orientation: upright;
	glyph-orientation-vertical: 0deg;
	font-size: 16px;
}
.ch3-text-1,
.ch3-text-3,
.ch3-text-5,
.ch3-text-7 {
	fill: #505050;
}

/*	.ch3-text-1,
	.ch3-text-17,
	.ch3-text-20,
	.ch3-text-3,
	.ch3-text-4,
	.ch3-text-5,
	.ch3-text-7{font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;}*/

.ch3-text-1 {
	letter-spacing: -0.08em;
}
.ch3-text-3,
.ch3-text-4 {
	letter-spacing: -0.05em;
}
.ch3-text-17,
.ch3-text-4 {
	fill: #ff8c46;
}
.ch3-text-5 {
	letter-spacing: -0.06em;
}
.ch3-text-6 {
	letter-spacing: -0.05em;
}
.ch3-text-7 {
	font-size: .9rem;
	letter-spacing: -0.05em;
}
.ch3-text-7 tspan{
	font-size: .8em;
}
.ch3-text-17 {
	font-size: 25px;
}
.ch3-text-17 tspan{
	font-size: 16px;
}
.ch3-line-18,
.ch3-line-19 {
	fill: none;
	stroke-miterlimit: 10;
	stroke-width: 8px;
}
.ch3-line-18 {
	stroke: #c8c8c8;
}
.ch3-line-19 {
	stroke: #ff8c46;
}
.ch3-line-18,
.ch3-line-19 {
	opacity: 0;
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	animation: chart3-1 2s linear 1s 1 forwards;
}
.ch3-text-1,
.ch3-text-3,
.ch3-text-4,
.ch3-text-5 {
	opacity: 0;
	animation: chart3-2 1s linear .5s 1 forwards;
}
.ch3-text-17 {
	opacity: 0;
	animation: chart3-2 1s linear 2.5s 1 forwards;
}
@keyframes chart3-1 {
	0% {
		opacity: 0;
		stroke-dashoffset: 400;
	}
	30% {
		opacity: 1;
		stroke-dashoffset: 400;
	}
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
@keyframes chart3-2 {
	100% {
		opacity: 1;
	}
}

/* svg-chart4 */
#svg-chart4 {
	display: none;
	width: 100%;
}
.ch4-1,
.ch4-2,
.ch4-3 {
	writing-mode: tb;
	text-orientation: upright;
	glyph-orientation-vertical: 0deg;
	font-size: 16px;
}
.ch4-1,
.ch4-3 {
	fill: #505050;
}
/*
.ch4-1,.ch4-2,
.ch4-26,.ch4-27,
.ch4-3{
	font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;
}
*/
.ch4-1,
.ch4-2,
.ch4-9 {
	letter-spacing: -0.05em;
}
.ch4-2,
.ch4-27 {
	fill: #a0a0a0;
}
.ch4-3 {
	letter-spacing: -0.16em;
}
.ch4-4 {
	letter-spacing: -0.15em;
}
.ch4-5 {
	letter-spacing: -0.1em;
}
.ch4-6 {
	letter-spacing: -0.09em;
}
.ch4-7 {
	letter-spacing: -0.1em;
}
.ch4-8 {
	letter-spacing: -0.06em;
}
.ch4-10 {
	letter-spacing: -0.17em;
}
.ch4-11 {
	letter-spacing: -0.18em;
}
.ch4-12 {
	letter-spacing: -0.08em;
}
.ch4-13 {
	letter-spacing: -0.15em;
}
.ch4-14 {
	letter-spacing: -0.06em;
}
.ch4-15 {
	letter-spacing: -0.06em;
}
.ch4-16,
.ch4-17,
.ch4-18,
.ch4-20,
.ch4-21,
.ch4-23,
.ch4-24,
.ch4-25 {
	fill: none;
	stroke-miterlimit: 10;
}
.ch4-16,
.ch4-17 {
	stroke: #a0a0a0;
}
.ch4-17 {
	stroke-dasharray: 3.12 3.12;
}
.ch4-18,
.ch4-20,
.ch4-24 {
	stroke: #c8c8c8;
}
.ch4-18,
.ch4-20,
.ch4-21,
.ch4-23,
.ch4-24,
.ch4-25 {
	stroke-linecap: round;
	stroke-width: 2px;
}
.ch4-19 {
	fill: #c8c8c8;
}
.ch4-20 {
	stroke-dasharray: 2.77 2.77;
}
.ch4-21,
.ch4-23,
.ch4-25 {
	stroke: #ff8c46;
}
.ch4-22,
.ch4-26 {
	fill: #ff8c46;
}
.ch4-23 {
	stroke-dasharray: 2.92 2.92;
}
.ch4-24 {
	stroke-dasharray: 2.85 2.85;
}
.ch4-25 {
	stroke-dasharray: 3.2 3.2;
}
.ch4-26,
.ch4-27 {
	font-size: 18px;
}
.ch4-text,
.ch4-circle {
	opacity: 0;
	animation: chart4-1 .3s linear 0s 1 forwards;
}
.ch4-line {
	animation: chart4-1 1s linear .3s 1 forwards;
	stroke-dasharray: 200;
	stroke-dashoffset: -200;
}
@keyframes chart4-1 {
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}

#svg-so1p {
	width: 56%;
	float: right;
	margin-top: -5rem;
	padding-right: 5%;
	position: relative;
}
#svg-so1 {
	width: 100%;
	display: none;
	position: relative;
}
.rnd1,
.rnd2,
.rnd3,
.rnd4,
.rnd5,
.rnd6,
.rnd7,
.rnd8,
.rnd9 {
	display: block;
	position: absolute;
	font-size: .8rem;
	z-index: 999;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
}
.so1-1,
.so1-3 {
	fill: none;
	stroke: #a0a0a0;
	stroke-miterlimit: 10;
}
.so1-2 {
	fill: #c8c8c8;
}
.so1-3 {
	stroke-width: 0.75px;
}
.so1-4 {
	fill: #ff8c46;
}
.so1-5 {
	fill: #64b45a;
}
.so1-6 {
	font-size: 26px;
	letter-spacing: -0.05em;
}
.so1-6,
.so1-7 {
	fill: #fff;
	/*font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;font-weight:400;*/
}
.so1-7 {
	font-size: 18px;
	letter-spacing: -0.05em;
}
.so1-8,
.so1-9 {
	font-size: 14px;
	fill: #505050;
	/*font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;*/
}
.so1-8 {
	letter-spacing: -0.05em;
}
.so1-9 {
	letter-spacing: -0.16em;
}
.so1-10 {
	letter-spacing: -0.15em;
}
.so1-11 {
	letter-spacing: -0.16em;
}
.so1-12 {
	letter-spacing: -0.18em;
}
.so1-13 {
	letter-spacing: -0.12em;
}
.so1-14 {
	letter-spacing: -0.07em;
}
.so1-center-line1 {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: solution1-1 2s linear 3.0s 1 forwards;
}
.so1-center-line2 {
	stroke-dasharray: 200;
	stroke-dashoffset: -200;
	animation: solution1-1 2s linear 3.0s 1 forwards;
}
.so1-outer-line1 {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: solution1-1 2s linear 1.5s 1 forwards;
}
.so1-outer-line2 {
	stroke-dasharray: 200;
	stroke-dashoffset: -200;
	animation: solution1-1 2s linear 1.5s 1 forwards;
}
.so1-center-circle {}
.so1-circle {
	opacity: 0;
	animation: solution1-1 2s linear 1.0s 1 forwards;
}
.so1-outer-circle {
	opacity: 0;
	animation: solution1-1 2s linear 1.5s 1 forwards;
}
.so1-circle-text {
	opacity: 0;
	animation: solution1-1 2s linear 0.5s 1 forwards;
}
.so1-rnd-text {
	opacity: 0;
	animation: solution1-1 2s linear 1.5s 1 forwards;
}
@keyframes solution1-1 {
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
#svg-so2 {
	float: left;
	display: none;
	width: 64%;
	/*		width: 645px;
		height: 360px;*/
}
.so2-1,
.so2-10,
.so2-11,
.so2-12,
.so2-6,
.so2-7,
.so2-8 {
	fill: none;
	stroke-miterlimit: 10;
}
.so2-1 {
	stroke: #c8c8c8;
}
.so2-2,
.so2-3 {
	font-size: 20px;
	/*font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;font-weight:400;*/
}
.so2-2,
.so2-4 {
	fill: #ff8c46;
}
.so2-13,
.so2-14,
.so2-2,
.so2-3 {
	letter-spacing: -0.05em;
}
.so2-13,
.so2-3,
.so2-5 {
	fill: #64b45a;
}
.so2-10,
.so2-6 {
	stroke: #64b45a;
}
.so2-6 {
	stroke-width: 2.85px;
}
.so2-7 {
	stroke: #ff8c46;
}
.so2-10,
.so2-7 {
	stroke-width: 2px;
}
.so2-11,
.so2-12,
.so2-8 {
	stroke: #a0a0a0;
}
.so2-8 {
	stroke-dasharray: 4;
}
.so2-9 {
	font-size: 14px;
	fill: #fff;
	letter-spacing: -0.05em;
}

/*.so2-13,.so2-14,.so2-9{font-family:YuGo-Medium, YuGo Medium-83pv-RKSJ-H;}*/

.so2-12 {
	stroke-dasharray: 3.93 3.93;
}
.so2-13,
.so2-14 {
	font-size: 15px;
}
.so2-14 {
	fill: #505050;
}
.so2-human,
.so2-school,
.so2-baseline,
.so2-circle {
	opacity: 1;
}
.so2-line1,
.so2-line3,
.so2-line5,
.so2-line6 {
	stroke-dasharray: 170;
	stroke-dashoffset: 170;
}
.so2-line2,
.so2-line4 {
	stroke-dasharray: 170;
	stroke-dashoffset: -170;
}
.so2-arrow1,
.so2-arrow2,
.so2-arrow3,
.so2-arrow4 {
	stroke-dasharray: 170;
	stroke-dashoffset: 170;
}
.so2-dash1,
.so2-dash2,
.so2-dash3,
.so2-dash4 {
	opacity: 0;
	stroke-dasharray: 170;
	stroke-dashoffset: 170;
}

.so2-line1 {
	animation: solution2 1s linear 0.0s 1 forwards;
}
.so2-arrow1 {
	animation: solution2 1s linear 1s 1 forwards;
}
.so2-dash1 {
	animation: solution2 1s linear 1s 1 forwards;
}

.so2-line2 {
	animation: solution2 1s linear 2.25s 1 forwards;
}
.so2-arrow2 {
	animation: solution2 1s linear 3.25s 1 forwards;
}
.so2-dash2 {
	animation: solution2 1s linear 1.0s 1 forwards;
}

.so2-line3 {
	animation: solution2 1s linear 2.5s 1 forwards;
}
.so2-arrow3 {
	animation: solution2 1s linear 2.0s 1 forwards;
}
.so2-dash3 {
	animation: solution2 1s linear 1.5s 1 forwards;
}


.so2-line4 {
	animation: solution2 1s linear 4.5s 1 forwards;
}
.so2-arrow4 {
	animation: solution2 1s linear 2.5s 1 forwards;
}
.so2-dash4 {
	animation: solution2 1s linear 2.0s 1 forwards;
}

.so2-line5 {
	animation: solution2 1s linear 5.0s 1 forwards;
}
.so2-line6 {
	animation: solution2 1s linear 5.5s 1 forwards;
}

@keyframes solution2 {
	100% {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}

body:not(.ie) #svg-chart1,
body:not(.ie) #svg-chart2,
body:not(.ie) #svg-chart3,
body:not(.ie) #svg-chart4,
body:not(.ie) #svg-so1,
body:not(.ie) #svg-so2{
	height: 100% !important;
}

/******************************
	Media Query
*******************************/

@media screen and (max-width: 999px) and (min-width: 600px) {
	#top-wrap .top-topics{
	}
	.top-topics .topics-msg{
	}
	#chart3{
		padding-left: 3%;
		width: calc(100% - 24rem);
	}
	#chart4{
		padding-right: 1%;
		width: calc(100% - 20rem);
	}
	#reason4 .lead{
		width: 19rem;
		padding-right: 0;
	}
	#reason4 .lead:before{
		left: calc(100% - 20rem);
	}
	#solution-wrap h2 {
		position: relative;
	}
	#svg-so1p{
		margin-top: 0;
	}
	.solution3-text,
	.solution4-text{
		font-size: .8rem;
	}
	.solution3-text .text-title, .solution4-text .text-title{
		font-size: 1rem;
	}
	#svg-so2{
		width: calc(100% - 19rem);
		box-sizing: border-box;
	}
	#flow-wrap{
		width: 90%;
	}
	#flow1, #flow3, #flow5{
		padding-right: 2rem;
	}
	#flow2, #flow4{
		padding-left: 2rem;
	}
	#flow1 > div .link:before, #flow3 > div .link:before, #flow5 > div .link:before{
		right: -2.5rem;
	}
	#flow2 > div .link:before, #flow4 > div .link:before{
		left: -2.5rem;
	}
	#flow1.appear > div .link:after, #flow3.appear > div .link:after, #flow5.appear > div .link:after{
		right: -2rem;
	}
	#flow2.appear > div .link:after, #flow4.appear > div .link:after{
		left: -2rem;
	}
}
@media screen and (max-width: 899px) and (min-width: 600px) {
	#flow3 > div .link:after{
		left: 8em;
	}
}
@media screen and (max-width: 799px) and (min-width: 600px) {
	#flow1 > div .link:after{
		left: 7em;
	}
}