@charset "utf-8";

.pageWrap{
	background-image: url(../images/unfinished/bg01.jpg);
	background-attachment: fixed;
	background-size: cover;
	padding-bottom: 100px;
}

.title{
	margin-bottom: 80px;
}
.titleWrap{
	width: 1320px;
	margin: 0 auto;
	padding-top: 100px;
	margin-bottom: 80px;
	position: relative;
}
.titleWrap>h3{
	width: 50%;
}
.titleWrap>p{
	aspect-ratio: 500/350;
	width: 500px;
	position: absolute;
	right: -5%;
	bottom: -35%;
	background-image: url(../images/unfinished/bg03.jpg);
	background-size: cover;
	background-position: center center;
}
@media (max-width:1500px){
	.titleWrap{
		width: 88%;
	}
	.titleWrap>p{
		width: 37.87%;
		right: 5%;
	}
}
@media (max-width:1024px){
	.titleWrap{
		padding-top: 80px;
		margin-bottom: 50px;
	}
	.titleWrap>h3{
		width: 70%;
	}
	.titleWrap>p{
		aspect-ratio: 500/1100;
		width: 20%;
	}
}
@media (max-width:500px){
	.titleWrap>h3{
		width: 100%;
	}
	.titleWrap>p{
		aspect-ratio: 500/500;
		width: 50%;
		bottom:-98%;
		right: -1%;
	}
}
@media (max-width:375px){
	.titleWrap>p{
		bottom:-90%;
	}
}

.imgBox01{
	width: 1320px;
	margin: 0 auto;
	margin-bottom: 80px;
	aspect-ratio: 1320/400;
	background-image: url(../images/unfinished/bg02.jpg);
	background-size: cover;
	background-position: center center;
}
@media (max-width:1500px){
	.imgBox01{
		width: 88%;
	}
}
@media (max-width:1024px){
	.imgBox01{                        
		aspect-ratio: 1320/800;
	}
}
@media (max-width:500px){
	.imgBox01{
		width:100%;                      
		aspect-ratio: 1320/1320;
	}
}

.btnRow ul{
	width: 1320px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.btnRow ul li{
	width: 23%;
	position: relative;             
}
.btnRow ul li:before,
.btnRow ul li:after{
	position: absolute;
	content: '';
	width: 100%;
	height: 3px;                
	background-size: cover;
	background-position: center center;
}
.btnRow ul li:before{
	top: 0;
	left: 0;
	background-image: url(../images/top/deco03.svg);
}
.btnRow ul li:after{
	bottom: 0;
	left: 0;
	background-image: url(../images/top/deco02.svg);
}
.btnRow ul li a{
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: column;
	background-color: #fff;
	transition: 0.5s all;                
}
.btnRow ul li a span{
	text-align: center;
	transition: 0.5s all;
}
.btnRow ul li a span:nth-child(1){
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 10px;
}
.btnRow ul li a span:nth-child(2){
	font-size: 1.15em;
}
.btnRow ul li:nth-child(1) a:hover,
.btnRow ul li:nth-child(1) a:hover{
	background-color: #94a3c3;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(1) a:hover span,
.btnRow ul li:nth-child(1) a:hover span{
	color: #fff;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(2) a:hover,
.btnRow ul li:nth-child(2) a:hover{
	background-color: #c79f62;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(2) a:hover span,
.btnRow ul li:nth-child(2) a:hover span{
	color: #fff;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(3) a:hover,
.btnRow ul li:nth-child(3) a:hover{
	background-color: #ec7c81;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(3) a:hover span,
.btnRow ul li:nth-child(3) a:hover span{
	color: #fff;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(4) a:hover,
.btnRow ul li:nth-child(4) a:hover{
	background-color: #78b0a9;
	transition: 0.5s all;
}
.btnRow ul li:nth-child(4) a:hover span,
.btnRow ul li:nth-child(4) a:hover span{
	color: #fff;
	transition: 0.5s all;
}
@media (max-width:1500px){
	.btnRow ul{
		width: 88%;
	}
}
@media (max-width:1400px){
	.btnRow ul li{
		width: 48%;
		margin-bottom: 20px;          
	}
	.btnRow ul li:nth-child(3),
	.btnRow ul li:nth-child(4){
		margin-bottom: 0px;          
	}
}
@media (max-width:1200px){
	.btnRow ul li a{
		padding: 30px 10px;              
	}
}
@media (max-width:1024px){
	.btnRow ul li{
		width: 48%;
		margin-bottom: 20px;          
	}
	.btnRow ul li:nth-child(3),
	.btnRow ul li:nth-child(4){
		margin-bottom: 0px;          
	}
	.btnRow ul li a span:nth-child(1){
		font-size: 1.75em;
	}
	.btnRow ul li a span:nth-child(2){
		font-size: 1.25em;
	}
}
@media (max-width:768px){
	.btnRow ul li{
		width: 100%;
		margin-bottom: 20px;          
	}
	.btnRow ul li:nth-child(3){
		margin-bottom: 20px;          
	}
	.btnRow ul li a{
		padding: 15px 8px;              
	}
}

.pointBox.point01{
	aspect-ratio: 1920/1080;
	width: 100%;
	position: relative;
}
.pointBox.point01>.imgBox{
	width: 100%;
	height: 100%;
	background-image: url(../images/unfinished/bg04.jpg);
	background-position: center center;
	background-size: cover;
}
.pointBox>.txtBox{
	width: 500px;
	background-color: #fff;
	padding: 50px;
	box-sizing: border-box;
	position: absolute;                
	text-align: center;
}
.pointBox.point01>.txtBox{
	top: 50%;
	left: 10%;
	transform: translate(-10%,-50%);
}
.pointBox>.txtBox>h3{
	font-size: 1.5em;
	letter-spacing: 0.1em;
	padding-bottom: 10px;
	margin-bottom: 10px;
	position: relative;
}
.pointBox>.txtBox>h3:before{
	content: '';
	width: 100%;
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/top/deco02.svg);
}
.pointBox>.txtBox>p{
	font-size: 0.9em;
	line-height: 1.6;
}
.pointBox>.txtBox>p.main{
	font-size: 1.25em;
	margin-bottom: 30px;
}
.pointWrap{
	margin-bottom: 100px;
}
.pointWrap:last-of-type{
	margin-bottom: 0;
}
.f_case{
	text-align: center;
	color: #fff;
	padding: 50px 0;
	height: auto;
	position: relative;
}
.f_case:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.7;
}
.f_case.point01:before{
	background-color: #94a3c3;
}
.f_case.point02:before{
	background-color: #c79f62;
}
.f_case.point03:before{
	background-color: #ec7c81;
}
.f_case.point04:before{
	background-color: #78b0a9;
}
.f_case>h4{
	font-size: 1.25em;
	font-weight: 400;
	letter-spacing: 0.1em;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	margin-bottom: 10px;
	display: inline-block;
	position: relative;
}
.f_case>p{
	font-size: 1.25em;
	position: relative;
}
.sp{
	display: none;
}
@media (max-width:1500px){
	.pointBox>.txtBox{
		padding: 30px;
	}
	.f_case{
		padding: 30px 0;
	}
}
@media (max-width:1024px){
	.pointBox>.txtBox{
		width: 50%;
	}
	.pointBox.point01>.txtBox{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.pointBox>.txtBox>h3{
		font-size: 1.75em;
	}
	.pointBox>.txtBox>p.main{
		font-size: 1.45em;
	}
	.f_case{
		padding: 30px 0;
	}
}
@media (max-width:768px){
	.pointBox.point01{
		aspect-ratio: 768/1080;
	}
	.pointBox>.txtBox{
		width: 90%;
	}
	.sp{
		display: block;
	}
}
@media (max-width:1024px){
	.pointBox>.txtBox{
		padding: 15px;
	}
	.pointBox>.txtBox>p.main{
		margin-bottom: 20px;
	}
	.f_case{
		padding: 15px 0;
	}
}
@media (max-width:400px){
	.pointBox.point01{
		aspect-ratio: 768/1500;
	}
}

.pointBox.point02{
	position: relative;
}
.pointBox.point02>.imgBox>.imgRow{
	display: flex;
	justify-content: space-between;
	aspect-ratio: 1920/1080;
	width: 100%;
}
.pointBox.point02>.imgBox>.imgRow>p{
	background-size: cover;
	background-position: center center;                
}
.pointBox.point02>.imgBox>.imgRow>p:nth-child(1){
	width: 33.85%;
	height: 100%;
	background-image: url(../images/unfinished/bg08.jpg);              
}
.pointBox.point02>.imgBox>.imgRow>p:nth-child(2){
	width: 62.5%;
	height: 100%;
	background-image: url(../images/unfinished/bg09.jpg);                   
}
.pointBox.point02>.txtBox{
	top: 50%;
	right: 15%;
	transform: translate(15%,-50%);
}
@media (max-width:1024px){
	.pointBox.point02>.txtBox{
		top: 50%;
		right: 50%;
		transform: translate(50%,-50%);
	}
}
@media (max-width:768px){
	.pointBox.point02>.imgBox>.imgRow{
		aspect-ratio: 768/1080;
		flex-direction: column;
	}
	.pointBox.point02>.imgBox>.imgRow>p:nth-child(1){
		width: 90%;
		height: 48%;          
	}
	.pointBox.point02>.imgBox>.imgRow>p:nth-child(2){
		width: 100%;
		height: 48%;                   
	}
}
@media (max-width:400px){
	.pointBox.point02>.imgBox>.imgRow{
		aspect-ratio: 768/1500;
	}
}

.pointBox.point03{
	position: relative;
}
.pointBox.point03>.imgBox>.imgRow{
	display: flex;
	justify-content: space-between;
	aspect-ratio: 1920/1080;
	width: 100%;
}
.pointBox.point03>.imgBox>.imgRow>p{
	background-size: cover;
	background-position: center center;                
}
.pointBox.point03>.imgBox>.imgRow>p:nth-child(1){
	width: 44.27%;
	height: 100%;
	background-image: url(../images/unfinished/bg10.jpg);              
}
.pointBox.point03>.imgBox>.imgRow>p:nth-child(2){
	width: 52.08%;
	height: 100%;
	background-image: url(../images/unfinished/bg11.jpg);                   
}
.pointBox.point03>.txtBox{
	top: 50%;
	left: 15%;
	transform: translate(-15%,-50%);
}
@media (max-width:1024px){
	.pointBox.point03>.txtBox{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}
@media (max-width:768px){
	.pointBox.point03>.imgBox>.imgRow{
		aspect-ratio: 768/1080;
		width: 100%;
		flex-direction: column;
	}
	.pointBox.point03>.imgBox>.imgRow>p:nth-child(1){
		width: 100%;
		height: 48%;          
	}
	.pointBox.point03>.imgBox>.imgRow>p:nth-child(2){
		width: 100%;
		height: 48%;                 
	}
}
@media (max-width:400px){
	.pointBox.point03>.imgBox>.imgRow{
		aspect-ratio: 768/1500;
	}
}

.pointBox.point04{
	position: relative;
}
.pointBox.point04>.imgBox>.imgRow{
	display: flex;
	justify-content: space-between;
	aspect-ratio: 1920/1080;
	width: 100%;
}
.pointBox.point04>.imgBox>.imgRow>p{
	background-size: cover;
	background-position: center center;                
}
.pointBox.point04>.imgBox>.imgRow>.leftBox{
	width: 48%;
	height: 100%;
	background-image: url(../images/unfinished/bg12.jpg);
	background-size: cover;
	background-position: center center;              
}
.pointBox.point04>.imgBox>.imgRow>.rightBox{
	width: 48%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;           
}
.pointBox.point04>.imgBox>.imgRow>.rightBox>p:nth-child(1){
	width: 100%;
	height: 48%;
	background-image: url(../images/unfinished/bg13.jpg);                
	background-size: cover;
	background-position: center center;              
}
.pointBox.point04>.imgBox>.imgRow>.rightBox>p:nth-child(2){
	width: 100%;
	height: 48%;
	background-image: url(../images/unfinished/bg14.jpg);                
	background-size: cover;
	background-position: center center;              
}
.pointBox.point04>.txtBox{
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.under400{
	display: none;
}
@media (max-width:1024px){
	.pointBox.point04>.txtBox{
		top: 50%;
		right: 50%;
		transform: translate(-50%,-50%);
	}
}
@media (max-width:768px){
	.pointBox.point04>.imgBox>.imgRow{
		aspect-ratio: 768/1080;
		width: 100%;
		flex-direction: column;
	}
	.pointBox.point04>.imgBox>.imgRow>.leftBox{
		width: 100%;
		height: 48%;         
	}
	.pointBox.point04>.imgBox>.imgRow>.rightBox{
		width: 100%;
		height: 48%;       
	}
	.pointBox.point04>.imgBox>.imgRow>.rightBox{
		flex-direction: row;          
	}
	.pointBox.point04>.imgBox>.imgRow>.rightBox>p:nth-child(1){
		width: 48%;
		height: 100%;             
	}
	.pointBox.point04>.imgBox>.imgRow>.rightBox>p:nth-child(2){
		width: 48%;
		height: 100%;       
	}
}
@media (max-width:400px){                
	.pointBox.point04>.imgBox>.imgRow{
		aspect-ratio: 768/1500;
	}
	.under400{
		display: block;
	}
}