@charset "utf-8";
/* CSS Document */

.catch{
	max-width: 800px;
	background-color: #f2f7fd;
	color: #152c81;
  font-size: 15px;
  font-weight: 700;
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 4px;
margin: 50px auto 40px;
}
.catch::after{
  position: absolute;
  content: url("../../assets/images/icon-step-flow.svg");
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -37px;
}
.catch .text{
	order: 2;
	align-self: center;
	margin: 0 auto;
	padding: 0 20px;
}
.catch .text p{
	margin-top: 0;
}
.catch .img{
	order: 1;
}

.heading{
	color: #152c81;
  font-size: 16px;
	font-weight: 700;
	text-align: center;
	display: flex;
	justify-content: center;
	border: 1px solid #c7cad5;
	border-radius: 4px;
	padding: 20px 20px 30px;
}

.linemaker{
	z-index: 2;
  background-position: bottom;
  background: linear-gradient(transparent 75%, #e9ff9f 75%);
  position: relative;
}
.linemaker::before {
  display: inline-block;
  content: "";
  border-bottom: 5px #fff solid;
  border-right: 5px transparent solid;
  border-left: 5px #fff solid;
  border-top: 5px transparent solid;
  transform: rotate(90deg) translateX(7px);
}
.linemaker::after {
  display: inline-block;
  content: "";
  border-bottom: 5px #fff solid;
  border-right: 5px transparent solid;
  border-left: 5px #fff solid;
  border-top: 5px transparent solid;
  transform: rotate(-90deg) translateX(-7px);
}

.pointbox{
  background: #f2f7fd;
  border-radius: 4px;
  position: relative;
  padding: 50px 20px 20px;
}
.pointbox::after{
  content: "POINT";
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #152c81;
  letter-spacing: 0.06em;
  position: absolute;
  left: 16px;
  top: 18px;
}
.pointbox-1::after{
    content: "POINT. 1";
}
.pointbox-2::after{
    content: "POINT. 2";
}
.pointbox-3::after{
    content: "POINT. 3";
}
.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");
  }
}

.profile{
	background-color: #FFF;
	display: flex;
	column-gap: 20px;
	margin-top: 30px;
}
.profile .text{
	order: 2;
	align-self: center;
	margin: 0 auto;
	line-height: 1.46;
}
.profile .img{
	order: 1;
}
.profileTitle{
	font-size: 16px;
	font-weight: 700;
}

.jis{
	display: flex;
	column-gap: 20px;
}

.photo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
  column-gap: 20px;
	margin-top: 30px;
}
.photo picture{
	margin-bottom: 20px;
	max-width: 350px;
}

@media screen and (max-width: 599px){
	.heading br{
		display: inline;
	}
}
@media screen and (min-width: 600px){
	.heading br{
		display: none;
	}
}

@media screen and (min-width: 600px) and (max-width: 767px){
	.catch .text{
		text-align: center;
	}
	.catch .text p{
		max-width: 21em;
		margin: 0 auto;
	}
	.heading p{
		max-width: 26em;
	}
	.jis .img picture{
		max-width: 350px;
	}
	.photo > *{
		width: calc( (100% - 20px) / 2 ); 
	}
}

@media screen and (max-width: 767px){
	.catch .text{
		width: calc( 100% - 128px );
	}
	.catch .img{
		flex-basis: 128px;
	}
	.catch .img picture{
		max-width: 128px;
	}
	.pointbox{
		margin-top: 25px;
	}
	.pointbox-1{
	  margin-top: 50px;
  }
  .pointbox-2{
    margin-top: 10px;
  }
	.profile{
		flex-direction: column;
		padding: 20px;
	}
	.profile .img{
		margin-bottom: 20px;
	}
	.profile .img picture{
		max-width: 150px;
	}
	.jis{
		flex-direction: column;
		align-items: center;
	}
	.jis .img{
		margin-top: 30px;
	}
}

@media screen and (min-width: 768px){
	.catch{
		font-size: 20px;
		margin: 50px auto 40px;
	}
	.catch .text{
		text-align: center;
		width: calc( 100% - 200px );
	}
	.catch .text p{
		max-width: 21em;
		margin: 0 auto;
	}
	.catch .img{
		flex-basis: 200px;
	}
	.catch .img picture{
		max-width: 200px;
	}
	.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;
	}
	.profile{
		padding: 30px;
	}
	.profile .text{
		width: calc( 100% - 270px );
	}
	.profile .img{
		flex-basis: 250px;
	}
	.profile .img picture{
		max-width: 250px;
	}
	.profileTitle{
		font-size: 18px;
	}
	.jis .text{
		width: calc( 100% - 370px );
	}
	.jis .img{
		flex-basis: 350px;
	}
	.jis .img picture{
		max-width: 350px;
	}
	.photo > *{
		width: calc( (100% - 40px) / 3 ); 
	}
}

.banner{
  display: flex;
  justify-content: center;
  column-gap: 50px;  
}
.banner a{
  color: #152C81;
  font-size: 14px;
  font-weight: 700;
}
.p-single-product-freearea .banner picture{
  margin-top: 0;
}
.banner picture img{
  max-width: 380px;
  width: 100%;
}
.banner p img{
  display: inline-block;
  vertical-align: middle;
}
@media screen and (max-width: 767px){
  .banner{
    flex-direction: column;
    align-items: center;
    margin: 20px auto 0;
  }
  .banner .col{
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px){
  .banner{
    margin: 30px auto;
  }
  .banner a{
    font-size: 18px;
  }  
}