@charset "UTF-8";

.needsText-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 4px solid #099f69;
  background: #fff;
}

@media screen and (min-width:768px) {
  .needsText-list {
    height: 162px;
  }
}

@media screen and (max-width:767px) {
  .needsText-list {
    border-width: 2px;
  }
}

.needsText-list>li {
  position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media screen and (min-width:768px) {
  .needsText-list>li {
    width: 25%;
  }

  .needsText-list>li:not(:last-child):before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 2px;
    height: calc(100% - 20px);
    margin-top: auto;
    margin-bottom: auto;
    background: #099f69;
    content: '';
  }
}

@media screen and (max-width:767px) {
  .needsText-list>li {
    width: 33.333%;
		padding: 5px;
  }

	.needsText-list .needsTextWide {
    flex-direction: row;
		padding: 10px;
  }

  .needsText-list>li:first-child {
    width: 100%;
  }

  .needsText-list>li:first-child:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 96%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #099f69;
    content: '';
  }

  .needsText-list>li:nth-child(2),
  .needsText-list>li:nth-child(4) {
    width: 30%;
  }

  .needsText-list>li:nth-child(3) {
    width: 40%;
  }

  .needsText-list>li:nth-child(2):before,
  .needsText-list>li:nth-child(3):before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 1px;
    height: 84%;
    margin-top: auto;
    margin-bottom: auto;
    background: #099f69;
    content: '';
  }
}

.needsTextGreen {
	color: #099F69;
	font-weight: bold;
}

.needsTextGreenLage {
	font-size: 1.5em;
}

.needsTextOrange {
	color: #FF2A00;
	font-weight: bold;
	line-height: 1.3;
}

.needsTextOrangeSmall {
	font-size: 1.3em;
}

.needsTextOrangeMiddle {
	font-size: 1.75em;
}

.needsTextOrangeLage {
	font-size: 2em;
}

.needsTextSup {
	margin: 0;
}

.needsTextLine {
	line-height: 1.3;
}

@media screen and (max-width:767px) {
	.needsTextWide .needsTextGreen {
		line-height: 1.2;
	}
	.needsTextGreenLage {
		font-size: 1.3em;
	}
	.needsTextOrange {
		line-height: 1.1;
	}
	.needsTextOrangeSmall {
		font-size: 1.1em;
	}
	.needsTextOrangeLage {
		font-size: 1.8em;
	}

}