@charset "utf-8";
/* 錆ニックじゃばら */


.ffs-plat{
	font-feature-settings: "palt" 1;
}

.heading{
	color: #152c81;
	font-size: 16px;
  font-weight: 700;
	text-align: center;
	display: flex;
	justify-content: center;
  margin-top: 50px;
}
.heading p{
  margin-top: 0;
}

.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";
}
.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 .col-R{
  display: flex;
  justify-content: center;
}
.pointbox-2 .col-R img{
  max-width: 188px;
  width: 100%;
}
.pointbox-3 .col-R img{
  max-width: 350px;
  width: 100%;
}

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

@media screen and (min-width: 768px){
	.heading{
		font-size: 24px;
	}
	.heading p{
		max-width: 26em;
	}
	.pointbox{
  	padding: 40px 50px 30px;
	}
	.pointbox:not(.pointbox-2){
		margin-top: 70px;
  }
  .pointbox.pointbox-2{
    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-2 .col-L{
    width: max( calc( (100% - 20px) * 0.75 ), calc( 100% - 188px - 20px) );
  }
  .pointbox-2 .col-R{
    width: min( 25%, 188px );
  }
  .pointbox-3 .col-L{
    width: max( calc( (100% - 20px) * 0.68 ), calc( 100% - 350px - 20px) );
  }
  .pointbox-3 .col-R{
    width: min( 32%, 350px );
  }
}
@media screen and (max-width: 1279px){
  .pointbox-1 .pointbox-flex{
    flex-direction: column;
  }
}

/* 包み方追加 */

.freeWrap	h2{ 
  background-color: #152c81; 
  color: #fff; 
  font-size: 22px;
  font-weight: 700;
	line-height: 1.15;
  padding: 12px 20px; 
  margin: 50px auto 40px; 
}

ul.scene{
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  margin-top: 30px;
}
.scene li{
  margin-bottom: 30px;
}
.scene img{
  margin-bottom: 10px;
  display: inline-block;
}
@media screen and (max-width: 599px) {
	.scene{
    flex-direction: column;
	}
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	.scene li{
		width: calc( (100% - 10px) / 2 );
	}
}
@media screen and (min-width: 768px) {
	.scene li{
		width: calc( (100% - 20px) / 3 );
	}
}