@charset "utf-8";
/*-----ファーストビュー sp-----*/
.first_view{
	padding-top: 60px;
	
	h1{
		position: relative;
		width: min(88%,1620px);
		margin: 0 auto;
		font-size: var(--font-size46);
		letter-spacing: .06em;
		
		&::after{
			position: absolute;
			content: '';
			display: inline-block;
			width: 5%;
			bottom: 50%;
			left: -7%;
			border-bottom: solid 1px #000;
		}
	}
	
	.main_photo{
		width: min(90%,1280px);
		margin: var(--px20) auto 0;
		border-radius: var(--px40);
		position: relative;
		overflow: hidden;
		
		img{
			border-radius: var(--px40);
			width: 100%;
			height: 280px;
			object-fit: cover;
			object-position: 25% 50%;
		}
		
		.title{
			position: absolute;
			top: 0;
			left: 0;
			
			padding: var(--px70) var(--px50);
			
			h2{
				color: var(--main-color);
				font-size: var(--font-size42);
				font-weight: var(--Bold);
				line-height: 1.8;
				
				span{
					background-color: #fff;
					padding: 2px var(--px20);
				}
			}
			ul{
				padding-top: var(--px30);
				
				li{
					font-size: var(--font-size20);
					font-weight: (--Bold);
					padding: 4px 0;
					line-height: 1.4;
					span{
						background-color: #fff;
						padding: 2px var(--px20);
					}
				}
			}
			 
		}
	}
}
/*-----情報 sp-----*/
.information{
	padding-top: var(--px50);

	.photo{
		width: 100%;
		margin: var(--px20) auto 0;
		
		.img{
			width: min(85%,560px);
			margin-left: auto;
			
			img{				
				border-top-left-radius: var(--px40);
				border-bottom-left-radius: var(--px40);
			}
		}	
		.img2{
			width: 85%;
			margin: 0 auto;
			img{
				max-width: 420px;
			}
		}	
		
		.text{
			width: min(90%,1100px);
			margin: 0 auto;
			padding: var(--px40) 0 0;			
			
			h3{
				width: min(100%,615px);
				font-size: var(--font-size24);	
				font-weight: var(--Bold);
				padding-bottom: var(--px30);
				border-bottom: 1px solid #707070;
				margin-bottom: var(--px30);
			}
			h4{
				font-size: var(--font-size24);
				font-weight: var(--Bold);
			}
			p{
				font-size: var(--font-size18);
				padding-top: var(--px10);
				
				&.subtitle{
					color: var(--main-color);
					font-weight: var(--Bold);
				}
			}
		}
	}
	.screen{
		width: min(90%,770px);
		margin: 0 auto;
		padding-top: var(--px50);
	}
}
/*-----声 sp-----*/
.feedback{
	.voice{
		width: min(90%,1290px);
		margin: var(--px100) auto 0;
		
		.voice_tx{
			transition: .5s;
			
			h4{
				font-size: var(--font-size36);
				font-weight: var(--Bold);
			}
			p{
				font-size: var(--font-size18);
				padding-top: var(--px20);
				
				&.name{
					font-size: var(--font-size24);
					font-weight: var(--Bold);
					padding-top: var(--px30);
				}
			}
			
		}
		.voice_img{
			width: min(100%,532px);
			padding-top: var(--px20);
			transition: .5s;
		}
	}
	
	.voice2{
		width: min(90%,1290px);
		margin: var(--px100) auto 0;
		
		.voice_tx2{
			transition: .5s;
			
			h4{
				font-size: var(--font-size36);
				font-weight: var(--Bold);
			}
			p{
				font-size: var(--font-size18);
				padding-top: var(--px20);
				
				&.name{
					font-size: var(--font-size24);
					font-weight: var(--Bold);
					padding-top: var(--px30);
				}
			}
			
		}
		.voice_img2{
			width: min(100%,532px);
			padding-top: var(--px20);
			transition: .5s;
		}
	}

}
/*-----導入一覧ボタン sp-----*/
.list_btn{
	width: min(90%,1290px);
	margin: var(--px100) auto 0;
	
	.list{
			position: relative;	
			margin-left: auto;
			width: min(100%,480px);
	

			  a{
				  display: inline-block;
				  width: 100%;
				  padding: 8px 0 8px 15px;
				  border: 1px solid #707070;
				  border-radius: 50px;
				  transition: .5s;

					&:after{
						display: inline-block;
						content: "";
						position: absolute;
						background-image: url("../images/common/png_05.png");
						width: 20px;
						height: 20px;
						background-size: 20px;
						top: 50%;
						right: 12px;
						transform: translateY(-50%);
						background-repeat: no-repeat;
						background-position: left center;
						transition: .5s;
					}
				  &:hover{
					  background-color: #333;
					  color: #fff;
					  
					  &:after{
						background-image: url("../images/common/png_04.png");	  
					}
				  }
				  
			  }
		  }
}

@media (min-width:768px){
/*-----ファーストビュー tab-----*/
.first_view{
	padding-top: clamp(140px,15vw,190px) ;
	
	.main_photo{	
		img{
			height: auto;
		}
		
		.title{
			
			ul{
				
				li{
					padding: 5px 0;
				}
			}
			 
		}
	}
}
/*-----情報 tab-----*/
.information{

	.photo{
		.img{
			width: min(70%,840px);
		}
	}
}
/*-----声 tab-----*/
.feedback{
	.voice{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.voice_tx{
			width: 60%;
			padding: 0 5%;
		}
		.voice_img{
			width: min(40%,532px);
			padding-top: 0;
		}
	}
	
	.voice2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.voice_tx2{
			width: 60%;
			padding: 0 5%;	
			order: 2;
		}
		.voice_img2{
			width: min(40%,532px);
			padding-top: 0;
		}
	}

}	
}
@media (min-width:1024px){
/*-----ファーストビュー pc-----*/
.first_view{
	
	h1{
		
		&::after{
			border-bottom: solid 2px #000;
		}
	}
	.main_photo{	
		
		.title{
			
			ul{
				
				li{
					padding: 6px 0;
				}
			}			 
		}
	}
}
/*-----声 pc-----*/
.feedback{
	.voice{
		
		.voice_tx{
			width: 55%;
			padding: 0 5%;
		}
		.voice_img{
			width: min(45%,532px);
			padding-top: 0;
		}
	}
	
	.voice2{
		
		.voice_tx2{
			width: 55%;
			padding: 0 5%;	
		}
		.voice_img2{
			width: min(45%,532px);
			padding-top: 0;
		}
	}

}

}

@media (min-width:1280px){
/*-----ファーストビュー 1280-----*/
.first_view{
	
	.main_photo{
		img{
			height: auto;
		}

		.title{
			
			ul{
				
				li{
					padding: 7px 0;
				}
			}			 
		}
	}
}
/*-----情報 1280-----*/
.information{
	
	.photo{
		width: min(95%,1510px);
		margin: 0 0 0 auto;
		display: flex;
		
		.img{
			width: min(56%,840px);
			order: 2;
			
			img{
				width: auto;
				height: 100%;
			}
		}
		.img2{
			width: 56%;
			order: 2;
		}
		
		.text{
			width: min(44%,670px);
			margin: 0;
			padding: 0 50px 0 0;
		}
	}
}	
/*-----声 1280-----*/
.feedback{
	.voice{
		.voice_tx{
			width: 55%;
			padding: 0 7% 0 9%;
		}
		.voice_img{
			width: min(45%,532px);
			text-align: right;
		}
	}
	
	.voice2{
		
		.voice_tx2{
			width: 55%;
			padding: 0 6% 0 9%;	
		}
		.voice_img2{
			width: min(45%,532px);
		}
	}
}	
	
}


@media (min-width:1440px){ 
/*-----声 1440-----*/
.feedback{
	.voice{
		.voice_tx{
			width: 624px;
			padding: 0 0 0 150px;
		}		
	}
	
	.voice2{
		
		.voice_tx2{
			width: 639px;
			padding: 0 165px 0 0;	
		}		
	}
}
	
}	
	
	

@media (min-width:1870px){ 
.first_view{
	
	h1{
		
		&::after{
			width: calc((100vw - 1620px - 1.5em) / 2);
			left: calc((1620px - 100vw) / 2);
		}
	}
}
  
}