/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 750px) {
}

@media (min-width: 751px) {
}

/* ---------------------------------------- points */

.points li {
	border: 1px #009644 solid;
	border-radius: 10px;
}
.points li .datail { padding: 1em; }
.points li h4 { 
	text-align: center; 
	line-height: 1.4;
	padding: 1em;
	margin: 0;
	border-radius: 10px 10px 0 0;
}
.points li figure { margin: 0 0 .75em; }
.points li p { line-height: 1.6; }

@media (max-width: 750px) {
	.points li:not(:last-child){ margin: 0 0 2em; }
}

@media (min-width: 751px) {
	.points {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.points li {
		width: 49%;
		margin: 0 0 2%;
	}
	.points li:nth-child( n+3 ){ margin: 0; }
	main .points li .greenbox { font-size: clamp(1.6rem, -0.076rem + 2.29vw, 2.4rem); }
}

/* ---------------------------------------- result */

table.result { table-layout: auto; }
table.result .column-1 { width: 20%; }

/* ---------------------------------------- flow */

ul.flow > li:not(:last-child){
	margin: 0 0 7em;
	position: relative;
}
ul.flow > li:not(:last-child)::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 3em solid transparent;
	border-left: 3em solid transparent;
	border-top: 2.25em solid #009644;
	border-bottom: 0;
	position: absolute;
	top: calc( 100% + 2em );
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
ul.flow > li > .greenbox {
	color: #009644;
	border: 1px #009644 solid;
	background: #fff;
}