@charset "utf-8";

.ffs-plat{
	font-feature-settings: "palt" 1;
}
.heading{
  font-size: 16px;
	text-align: center;
	display: flex;
	justify-content: center;
  margin-top: 30px;
}

.pointbox{
  background: #f2f7fd;
  border-radius: 4px;
  position: relative;
 padding: 50px 20px 30px;
}
.pointbox::after{
  position: absolute;
    left: 16px;
    top: 18px;
  content: "POINT";
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #152c81;
  letter-spacing: 0.06em;
}
.pointbox-1::after{
    content: "POINT. 1";
}
.pointbox-2::after{
    content: "POINT. 2";
}
.pointbox-3::after{
    content: "POINT. 3";
}
.pointbox-4::after{
    content: "POINT. 4";
}
.pointbox-5::after{
    content: "POINT. 5";
}
.pointTitle{
	color: #152c81;
	font-size: 16px;
	font-weight: 700;
	position: relative;
	padding-left: 20px;
	margin-bottom: 20px;
}
.pointTitle::after{
  position: absolute;
  content: url("../../../assets/images/check-sp.svg");
		left: 0px;
		top: -3px;
}
@media screen and (min-width: 768px){
	.pointTitle{
		padding-left: 30px;
	}
	.pointTitle::after{
    content: url("../../../assets/images/check.svg");
  }
}

.photo{
	display: flex;
	justify-content: center;
  column-gap: 10px;
	margin-top: 20px;
}
.photo img{
	max-width: 348px;
  width: 100%;
}
.pointbox{
  margin-top: 25px;
}
.pointbox .col-R{
  display: flex;
  justify-content: center;
}
.pointbox-3 .col-R img,
.pointbox-4 .col-R img{
  max-width: 350px;
  width: 100%;
}
.pointbox-5 .pointTitle{
  margin-bottom: 0;
}

@media screen and (max-width: 767px){
  .pointbox picture{
    margin-top: 0;
  }
  .pointbox-1 .col-R img{
    max-width: 305px;
  }
  .photo{
    flex-direction: column;
    align-items: center;
  }
  .photo picture{
  	margin-bottom: 10px;
  }
  .pointbox-3 .col-R picture,
  .pointbox-4 .col-R picture{
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px){
	.heading{
		font-size: 24px;
    margin-top: 50px;
	}
	.heading p{
		max-width: 26em;
	}
	.pointbox{
  	padding: 50px 50px 30px;
		margin-top: 50px;
  }
	.pointbox::after{
	  font-size: 29px;
	  left: 50px;
  	top: -23px;
	}
	.pointTitle{
		font-size: 24px;
	}
  .pointbox-flex{
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
  }
  .pointbox-3 .col-L,
  .pointbox-4 .col-L{
    width: max( calc( (100% - 20px) * 0.68 ), calc( 100% - 350px - 20px) );
  }
  .pointbox-3 .col-R,
  .pointbox-4 .col-R{
    width: min( 32%, 350px );
  }
}
@media screen and (max-width: 1279px){
  .pointbox-1 .pointbox-flex{
    flex-direction: column;
  }
}