@charset "utf-8";

.title3{
	width: calc(100% - 30px);
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #8CC63F;
	padding: 6px 0 4px 30px;
	margin-top: 10px;
	letter-spacing: 1px;
}

.group_wrap{
	display: flex;
	justify-content: space-between;
	width: 93.404255%;
	max-width: 878px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 15px;
}
.main_div + .group_wrap{
	margin-top: 30px;
}
	.group_wrap .label{
		width: 12.984054%;
		max-width: 114px;
		background: #00A0E9;
		color: #fff;
		border-radius: 10px;
		letter-spacing: 10px;
		text-indent: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.group_wrap .chart *,
	.group_wrap .chart *:after,
	.group_wrap .chart *:before {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.group_wrap .chart {
		/*overflow: hidden;*/
		width: 85.876993%;
		max-width: 754px;
		margin-left: 1em;
		padding: 0;
		list-style: none;
	}
	.group_wrap .chart li {
		display: inline-block;
		padding: 0;
		width: 32%;
		margin-top: 3px;
		float: left;
		margin-right: 6px;
	}
	.group_wrap .chart li:nth-child(1),
	.group_wrap .chart li:nth-child(2),
	.group_wrap .chart li:nth-child(3) {
		margin-top: 0;
	}
	.group_wrap .chart a {
		position: relative;
		/*display: block;*/
		display: flex;
		text-align: center;
		flex-direction: row;
		align-content: center;
		justify-content: center;
		align-items: center;
		margin: 0;
		text-decoration: none;
		color: #ffffff;
		background-color: #8CC63F;
		height: 70px;
		width: 109%;
		clip-path: polygon(92% 0, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
	}
	.group_wrap .chart li:first-child a,
	.group_wrap .chart li:nth-of-type(3n+1) a{
		clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
	}
	.group_wrap .chart a::after,
	.group_wrap .chart a::before {
		position: absolute;
		top: 50%;
		right: -0.945em;
		margin-top: -2em;
		/*content: '';*/
		content: unset;
		border-top: 2em solid transparent;
		border-bottom: 2em solid transparent;
		border-left: 1em solid;
		}
	.group_wrap .chart a::after {
		z-index: 2;
		border-left-color: #8CC63F;
	}
	.group_wrap .chart a::before {
		z-index: 1;
		right: -1.25em;
		border-left-color: #ffffff;
	}
	.group_wrap .chart a span{
		/*position: absolute;*/
		margin: auto;
		/*top: 0;*/
		/*bottom: 0;*/
		/*left: 0;*/
		/*right: 0;*/
		/*display: inline-table;*/
	}

.sub_div{
	width: calc(100% - 50px);
	max-width: calc(894px - 50px);
	font-size: 18px;
	font-weight: bold;
	background: #00A0E9;
	color: #fff;
	padding: 10px 0 8px 50px;
	border-radius: 10px;
	letter-spacing: 10px;
	margin-top: 35px;
}

.dl_block{
	position: relative;
	margin-top: 45px;
}
.dl_block.flow_not_triangle{
    margin-top: 8px;
}

.sub_div + .dl_block{
	margin-top: 25px;
}

.dl_block::after{
	content: "";
	background-image: url(../images/arrow.png);
	position: absolute;
	left: calc((100% - 122px) / 2);
	bottom: -35px;
	width: 122px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
}
.dl_block.flow_not_triangle::after{
	content:none
}
.dl_block:has(+ .sub_div)::after,
.dl_block:last-child::after{
	display: none;
}

.dl_block .left{
	background: #8CC63F;
}
.dl_block .center{
	background: #D7F2AD;
}
	.dl_block .center a{
		background: #E8F0C5;
		border: 2px solid #009944;
		color: #009944;
	}
.dl_block .right{
	background: #D7F2AD;
}
	.dl_block .right .title{
		background: #00A148;
	}

footer{
	margin-top: 160px;
}

@media (max-width : 900px){
	.sub_div {
		width: calc(98% - 50px);
	}
	.group_wrap{
		font-size: 16px;
	}
	.group_wrap .chart a{
		/*padding-top: 1.5em;*/
	}
}

@media (max-width : 767px){
	.group_wrap{
		font-size: 14px;
	}
	.group_wrap .chart a{
		/*padding-top: 1.8em;*/
	}
	.group_wrap .chart a::after,
	.group_wrap .chart a::before{
		margin-top: -2.5em;
		border-top: 2.5em solid transparent;
		border-bottom: 2.5em solid transparent;
	}
}

@media (max-width : 680px){
	.group_wrap{
		display: block;
	}
	.group_wrap .label{
		width: calc(100% - 10px);
		max-width: unset;
		margin-bottom: 10px;
		justify-content: unset;
		padding: 5px 0 5px 10px;
	}
	.group_wrap .chart{
		overflow: hidden;
		width: 98%;
		max-width: unset;
		margin-left: auto;
		margin-right: auto;
		font-size: 12px;
	}
	.sub_div{
		font-size: 16px;
		width: calc(98% - 40px);
		padding-left: 40px;
	}
	.group_wrap .chart li{
		margin-right: 0px;
	}
	.group_wrap .chart a{
		width: 105%;
	}
}

@media (max-width: 480px){
	.group_wrap .chart li:nth-of-type(3n+1) a{
		clip-path: unset;
	}
	.group_wrap .chart li:nth-of-type(even) a{
		clip-path: polygon(92% 0, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
	}
	.group_wrap .chart li:nth-of-type(odd) a{
		clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%);
	}
	.group_wrap .chart li{
		width: 47%;
	}
	.group_wrap .chart li:nth-child(3) {
		margin-top: 3px;
	}
	.group_wrap .chart li a{
		font-size: 12px !important;
		min-height: unset;
		padding-top: 0.7em;
	}
	.group_wrap .chart a::after,
	.group_wrap .chart a::before {
		margin-top: -3em;
		border-top: 3em solid transparent;
		border-bottom: 3em solid transparent;
	}
	.group_wrap .chart a::before {
		right: -1.5em;
	}
	.dl_block{
		background: #D7F2AD;
	}
	.sub_div{
		width: calc(98% - 30px);
		padding: 5px 0 4px 30px;
	}
}