
.container{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: start;
}

.scrollify{
	height: 100vh;
}

/* ==================================================== */	
#sec5{
	background-image: url(../img/background/price.webp);
	background-position: center;
	background-size: cover;
	height: 100vh;
	display: flex;
	align-items: center;
	animation: fadein 2s ease forwards;
}

.sec5_inner{
	width: 100%;
    text-align: center;
	margin: 0 auto;
}

.sec5_inner h1{
	letter-spacing: 0;
	font-weight: 600;
    font-size: 32px;
	text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
	margin-bottom: 20px;
}

#price-1{
	width: 70%;
	padding-top: 85px;
}

#price-2, #price-3, #price-4{
	width: 70%;
	padding-top: 130px;
}

.item{
	width: 40%;
}

.text-area{
	width: 55%;
}

.plan_item{
	width: 50%;
}

.plan_text-area{
	width: 55%;
}

.text_price{
	padding-top: 10px;
	line-height: 1.7;
}

.price_h3{
	font-weight: 500;
	color: rgb(63, 39, 79);
    margin: 5px 0 10px 0;
	letter-spacing: -0.03em;
}

.price_h4{
	font-weight: 500;
	font-size: 18px;
	color: rgb(63, 39, 79);
	padding: 0 0 10px 0;
}

h5{
	font-weight: 500;
	font-size: 14px;
	color: rgb(63, 39, 79);
	padding: 10px 0 10px 0;
	
}

.price_img-1{
	background-image: url(../img/price/外観.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-2{
	background-image: url(../img/price/内観.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-3{
	background-image: url(../img/price/中規模.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-4{
	background-image: url(../img/price/複数棟.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-5{
	background-image: url(../img/price/大規模.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-6{
	background-image: url(../img/price/plan_A.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}

.price_img-7{
	background-image: url(../img/price/plan_B.webp);
	background-position: center;
	background-size: cover;
	max-width: 100%;
	height: 37vh;
	border-radius: 15px;
	margin-bottom: 100px;

}
.header-container {
	display: flex;
	justify-content: center;
  }

.Plex_price{
	font-family: "Urbanist", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal; 
	color: rgb(68, 31, 94); 
	display: flex;
	align-items: center; 
	padding-bottom: 10px;
  }

.Plex_p{
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal; 
  color: rgb(68, 31, 94); 
  display: flex;
  align-items: center; 
  /* padding-bottom: 10px; */
}

.li_container {
	display: flex;
	flex-direction: column;
  }

.li_container-2 {
	display: flex;
	flex-direction: column;
  }

.reference {
  font-size: 16px;
  padding-left: 15px;
}

.delivery {
  padding: 10px 0 0 15px;
}

.building{
  padding: 0 0 10px 15px;
}

.video {
  width: 40%;
  height: 35vh;
  aspect-ratio: 16 / 9;
}
.video iframe {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.cut_plan, .cut_level{
	padding-left: 15px;
}

/* ==================================================== */

/* 3840px (150%表示) */
/* 2560px x 1440px (100%表示) */

@media screen and (min-width: 2560px) and (max-width: 3839px){
		
	.reference{
		padding-left: 18px ;
	}

	.delivery{
		padding: 10px 0 0 18px ;
	}

	.building{
		padding: 0 0 10px 18px ;
	}

	.cut_plan, .cut_level{
		padding-left: 18px ;
	}
	
	.reference li{
		font-size: 18px ;
	}

	h5{
		font-size: 18px ;
	}
  }

@media screen and (max-width: 1921px){
	#price-1, #price-2, #price-3, #price-4{
		width: 85%;
	}
	
	.reference, .delivery{
		padding: 0 0 0 20px !important;
	}

	h5{
		font-size: 16px;
		padding: 0;
	}

	.item{
		margin-bottom: 40px;
	}

	.text_price{
		padding-top: 5px;
	}

	.building{
		padding: 10px 15px 0 20px ;
	}

	.cut_plan, .cut_level{
		padding: 0 15px 0 20px;
	}
	}

@media screen and (max-width: 1537px){
    #price-1{
		width: 95%;
		padding-top: 90px;
		
	}
	#price-2, #price-3, #price-4{
		width: 95%;	
	}
    
	.sec5_inner{
		width: 61%;
	}

	.Plex_p{
		padding: 0 0 10px 10px;
	}

	.item{
		width: 40%;
		height: 38vh;
		margin-bottom: 30px;
	}
	
	.text-area{
		width: 55%;
	}
    
	.text_price{
		line-height: 1.5;
	}
    
	.price_h3{
		margin-bottom: 5px;
	}

	.price_h4{
		padding-bottom: 0;
	}
    
	.li_container {
		flex-direction: row; /* 画面幅が広いときは横並び */
		justify-content: center; /* 左右中央に配置 */
	  }
	.reference {
		width: 40%;
		font-size: 16px;
		padding: 10px 0 0 20px;
	}
   
	.delivery {
	padding: 10px 0 0 20px;
	}
    
	.li_container-2 {
		flex-direction: row; /* 画面幅が広いときは横並び */
		justify-content: center; /* 左右中央に配置 */
	  }
	.cut_plan {
		width: 55%;
		font-size: 16px;
		padding: 10px 0 0 20px;
	}
   
	.cut_level {
	padding: 10px 0 0 20px;
	margin-right: 100px;
	}

	.building{
		width: 40%;
		padding: 10px 15px 0 15px;
	  }
    
	.video{
		width: 40%;
		height: 37vh;
	}
	
	#price_plan{
		width: 90%;
	}
	
}

@media screen and (max-width: 1367px){
	.scrollify{
		height: auto;
	}

	.item{
		height: 45vh;
		margin-bottom: 60px;
	}
    .plan_item{
		height: 40vh;
	}
	
	#price-1{
		padding-top: 30px;
	}
	#price-2, #price-3{
		padding-top: 0;
	}
    #price-4{
		padding-top: 30px;
		margin-bottom: 50px;
	}
	.Plex_p{
		letter-spacing: -0.3px;
	}

	.video{
		height: 45vh;
		margin-bottom: 30px;
	}
}

@media (max-width: 1367px) and (hover: none){
	.item{
		height: 33vh;
		margin-bottom: 60px;
	}
    .plan_item{
		height: 30vh;
	}
	.video{
		height: 33vh;
	}
}

@media screen and (orientation: landscape) and (max-width: 1281px){
	.item{
		height: 45vh;
		margin-bottom: 60px;
	}
    
	.plan_item{
		height: 36vh;
	}
	.Plex_p{
		padding: 0 0 10px 0 !important;
		
	}
	 h2{
		font-size: 19px !important;
	}

	.video{
		height: 320px;
	}

}

@media screen and (orientation: landscape) and (max-width: 1081px){
	.item{
		height: 47vh;
		margin-bottom: 60px;
	}
    
	.Plex_price{
		margin-bottom: 20px;
	}
	h2{
		font-size: 18px !important;
	}
    
	.reference{
		width: 55%;
	}

	.building{
		width: 90%;
	}
	.video{
		height: 47vh;
	}	

}

@media (orientation: portrait) and (max-width: 1024px){
	#price-1, #price-2, #price-3{
		width: 80%;
	}

	#price-4{
		width: 80%;
		padding-top: 0;
	}

	.price_h3{
		margin-bottom: 25px;
	}

    .price_h4{
		padding-bottom: 10px;
	}
	.item{
		width: 100%;
		height: 38vh;
		margin-bottom: 30px;
	}
	
	.text-area{
		width: 100%;
		margin-bottom: 30px;
	}
    
	.plan_item{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.plan_text-area{
		width: 100%;
		margin-bottom: 30px;
	}

	.Plex_p{
		margin-bottom: 10px;
		padding: 0;
	}

	.video {
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	  }
}

@media screen and (orientation: landscape) and (max-width: 933px){
	#price-1, #price-2, #price-3, #price-4{
		width: 95%;
	}
	.item{
		width: 40%;
		height: 80vh;
		border-radius: 10px;
	}
	.text-area, .plan_text-area{
		width: 55%;
		text-align: left;
	}
    
	.Plex_p{
		padding: 0 !important;
	}

	.price_h4{
		display: none;
	}
    
	h5{
		padding: 0 0 5px 0 !important;
	}
	.li_container {
		display: flex;
		flex-direction: column;
	}

	.li_container-2 {
		display: flex;
		flex-direction: column;
	}
    
	.reference li{
		font-size: 14px;
		line-height: 1.5;
	}

	.delivery li{
		font-size: 14px;
		line-height: 1.5;
	}

	.building li{
		font-size: 14px;
		line-height: 1.5;
	}
	.cut_plan li{
		font-size: 14px;
		line-height: 1.5;
	}

	.cut_level li{
		font-size: 14px;
		line-height: 1.5;
	}

	.reference{
		width: 100%;
		padding: 0 0 0 20px;
	}

	.building {
		padding: 0 0 0 20px;
	}

	.cut_plan{
		width: 100%;
	}

	.cut_level{
		width: 100%;
		margin: 0;
	}

	.video{
		height: 93vh;
	}
	

}

@media screen and (orientation: landscape) and (max-width: 761px){
	.item{
		height: 90vh;
	}

}

@media screen and (orientation: landscape) and (max-width: 569px){
	.item{
		display: none;
	}
	
	.video{
		display: none;
	}
	
	.text-area{
		width: 100%;
	}
    
	.text_price{
		padding: 10px 0 50px 0;
	}

}

@media screen and (max-width: 480px){
    #price-1, #price-2, #price-3, #price-4{
		width: 90%;
	}
	.item{
		width: 100% !important;
		height: 25vh;
		border-radius: 10px;
	}
	
	.li_container {
		display: flex;
		flex-direction: column;
	}

	.li_container-2 {
		display: flex;
		flex-direction: column;
	}

	.reference{
		width: 100%;
	}
    
	.building{
		width: 100%;
		padding: 10px 15px 0 20px;
	}
	.delivery{
		width: 100%;
	}

	.cut_plan{
		width: 100%;
	}

	.cut_level{
		width: 100%;
	}
	
	.video{
		height: 250px;
		border-radius: 10px;
	}
	
    
	.Plex_p{
		/* width: fit-content; */
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	.price_h3{
		margin-bottom: 10px;
	}

}

@media screen and (max-width: 321px){
	.item{
		height: 30vh;
	}
    
	.reference{
		width: 100%;
	}
    
	.building{
		width: 100%;
		padding: 10px 15px 0 20px;
	}
	.delivery{
		width: 100%;
	}

	.cut_plan{
		width: 100%;
	}

	.cut_level{
		width: 100%;
	}
	.video{
		height: 180px;
	}

}