@charset "utf-8";
section:not(#pagetitle):not(#contact){
	width:min(95%,1200px);
	/*width:100%;*/
	padding:50px 0;
	margin:0 auto;
}

#subtitle{
	text-align: center;
}

#subtitle h2{
	display: inline-block;
	font-size:3rem;
	text-align: left;
	line-height: 1.2;
}

#subtitle h2 span{
	font-size:1.4rem;
}

/*--------------------

	レスポンシブ

--------------------*/

@media screen and (min-width: 0) and (max-width: 430px){
	#subtitle{
		padding:0;
	}
	#subtitle h2{
		margin:50px 0 0 0 ;
		font-size:2rem;
		text-align: center;
	}
}

/*--------------------


	写真


--------------------*/

section#move{
	width:min(95%,350px)!important;
	text-align: center;
	position: relative;
	padding:0 0 80px 0!important;
}

section#move video{
	width:100%;
	aspect-ratio:9/16;
	margin:0 auto;
	border-radius: 10px;
}

section#move .play-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	position: absolute;
	  top: calc(50% - 100px);
	  left: calc(50% - 50px);
	  /*transform: translateY(-50%) translateX(-50%);*/
	font-size:80px;
	color:rgba(255,255,255,0.77);
	line-height: 1;
	cursor: pointer;
}

section#move .play-btn.playActive{display:none;}

#beforeafter{
	display: flex;
}

#beforeafter .fadein{
	opacity: 0;
}
#beforeafter .fadein.act{
	animation: infade 0.5s ease-in-out 0.5s 1 normal forwards;
}


@keyframes infade{
	0% {
		opacity: 0;
	  }
	 100% {
		  opacity: 1;
	  }
}

#before,
#after{
	flex:2;
	border:1px solid #593F3F;
	border-radius: 5px;
	padding-top:10px;
}

#before h3,
#after h3{
	width:150px;
	padding:3px 30px 3px 10px;
	clip-path: polygon(100% 0%, calc(100% - 10px) 50%, 100% 100%, 0 100%, 0 0);
	color:#fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom:5px;
}

#after{
	background-color: rgba(255,255,255,0.50);
}

#before h3{
	background-color: #C2AF87;
}

#after h3{
	background-color:#408CC4;
}

#before ul,
#after ul{
	width:100%;
	display: flex;
	gap:5px;
	padding:5px;
}

#before li,
#after li{
	flex:1;
	line-height: 0;
}

#beforeafter li img{
	width:100%;
	height: auto;
	border-radius: 5px;
}

#arrow{
	flex:1;
	max-width:90px;
	text-align: center;
	margin:0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#arrow img{
	width:min(100%,30px);
	height: auto;
}

/*--------------------

	レスポンシブ

--------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#beforeafter{
		display: block;
	}
	
	#arrow{
		display: block;
		margin:0 auto;
		text-align: center;
	}
	#arrow img{
		transform: rotate(90deg);
		margin:0 auto;
	}
}
/*--------------------


	リフォーム内容


--------------------*/
section#deta{
	Width:min(95%,1200px);
}

section#deta h3{
	margin-bottom:50px;
}

section#deta h3 span,
section#deta h3::before,
section#deta h3::after{
opacity: 0
}
#deta .inner{
	width:min(100%, 1000px);
	display: flex;
	justify-content: center;
	align-items: center;
	gap:20px;
	margin:0 auto;
	padding:0;
}

#deta .inner .photo{
	flex:1;
	max-width: 300px;
}

#deta .inner .photo ul{
	widht:min(50%,200px);
	display: block;
}

#deta .inner .photo li{
	width:100%;
	line-height: 0;
	position: relative;
	border-top: none;
}

#deta  .inner .photo li:nth-last-child(-n+2){
	border-bottom:none;
}

#deta .inner .photo li img{
	border-radius: 10px;
}

#deta .inner .photo li .come{
	line-height: 1;
	color:rgba(255,255,255,0.90);
	font-weight: 700;
	position: absolute;
	left:5px;
	bottom:5px;
}

#deta .inner .deta ul{
	flex:1;
	margin:0 auto;
	display: block;
}

#deta .inner .deta li{
	width:100%;
	opacity: 1;
	border-bottom:none;
}

#deta .inner .deta li:last-child{
	border-bottom:1px solid #A58181;
}


#deta .inner .deta li .naiyou{
	padding:15px 20px 15px 10px;
}

#voice{
	width:100%;
	margin-top:30px;
	background-color: #FBFAF7;
	border-radius: 5px;
	padding:10px;
}


/*--------------------

	レスポンシブ

--------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#deta .inner{
		display: block;
	}
	
	#deta .inner .photo{
		flex:none;
		width:200px;
		margin:0 auto 20px auto;
	}
	
	#kouji{
		width: 200px;
	}
}