.wrapper {
	margin: 0 auto;
	background-color: rgb(184, 184, 213);
}

.problem {
	background-color: #e5ffffbc;
	padding: 100px 0;
}


.problem h1 {
	text-shadow:1px 1px 0 #e5f2ff, -1px -1px 0 #e5f2ff,
	-1px 1px 0 #e5f2ff, 1px -1px 0 #e5f2ff,
	0px 1px 0 #e5f2ff,  0-1px 0 #e5f2ff,
	-1px 0 0 #e5f2ff, 1px 0 0 #e5f2ff;
	text-align: center;
	font-size: 35px;
	margin-bottom: 20px;
	letter-spacing: .05em;
}

.problem_list {
	display: flex;
	justify-content: center;
}


.problem_box {
	margin: 20px 30px 30px;
	text-align: center;
	width: 17%;

}

.problem_box img {
	height: 140px;
	margin: 0 auto;
}

.problem_box h2 {
	font-size: clamp(5px, 3vw, 20px);
}

/* ▼ */
.triangle {
	position: relative
}

.triangle::before,
.triangle::after {
	position: absolute;
	content: "";
	width: 50%;
	height: 90px;
	background-color: #2891d7;
	top: 1px;
	-webkit-transform: translateY(-99%);
	transform: translateY(-99%)
}

.triangle::before {
	-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
	left: 0
}

.triangle::after {
	-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
	left: 50%
}


  /*==================================================
  ふわっ
  ===================================*/
  
  .fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}


/* 画面が小さい時用 */

	@media (max-width: 768px) {
	
		.problem_box {
			margin: 20px 2% 30px;
			text-align: center;
			width: 20%;
		
		}

		.problem br{
			display: none;
		}
		
		.problem_box img {
			height: 45px;
		}
		
		/* .problem_box h2 {
			font-size: ;
		} */
		
		.problem h1 {
			text-shadow:1px 1px 0 #e5f2ff, -1px -1px 0 #e5f2ff,
			-1px 1px 0 #e5f2ff, 1px -1px 0 #e5f2ff,
			0px 1px 0 #e5f2ff,  0-1px 0 #e5f2ff,
			-1px 0 0 #e5f2ff, 1px 0 0 #e5f2ff;
			text-align: center;
			font-size: 22px;
			margin-bottom: 20px;
			letter-spacing: .05em;
		}

		.triangle::before,
		.triangle::after {
			position: absolute;
			content: "";
			width: 50%;
			height: 50px;
			background-color: #2891d7;
			top: 1px;
			-webkit-transform: translateY(-99%);
			transform: translateY(-99%)
		}
	
	}