/* main visual -------------------*/

#main-visual{
	position: relative;
	z-index: 5;
	width: 100%;
	height: 100vh;
	background-color: #fafafa;
}
.slider{
	width: 100%;
	height: 100vh;
	min-height: 100vh;
}
.sdgs-logo{
	position: absolute;
	top: 136px;
	left: 20px;
	width: 180px;
	height: auto;
}
.main-copy{
	position: absolute;
	right: 100px;
	bottom: 15%;
	width: 560px;
	height: auto;
}
.scroll-down{
	position: absolute;
	right: 20px;
	bottom: 40%;
	width: 20px;
	height: auto;
}
@media screen and (max-width: 1080px){
	#main-visual{
		height: 480px;
	}
	.slider{
		height: 480px;
		min-height: 480px;
	}
	.sdgs-logo{
		top: 3%;
		left: 2%;
		width: 130px;
	}
	.main-copy{
		right: 5%;
		bottom: 12%;
		width: 50%;
	}
	.scroll-down{
		right: 10px;
		width: 16px;
	}
}
@media screen and (max-width: 650px){
	#main-visual{
		height: 400px;
	}
	.slider{
		height: 400px;
		min-height: 400px;
	}
	.sdgs-logo{
		width: 100px;
	}
	.main-copy{
		left: 0;
		right: 0;
		bottom: 180px;
		margin: 0 auto;
		width: 94%;
	}
	.scroll-down{
		display: none;
	}
}

/* top contents -------------------*/

.h2-title{
	width: 100%;
}
.h2-title p{
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: left;
}
.h2-title p:before{
	border-top: 1px solid;
	content: "";
	flex-grow: 0;
	width: 80px;
	margin-right: 14px;
}
.h2-title h2{
	padding: 30px 0 0 30px;
	font-size: 32px;
	font-size: 3.2rem;
	letter-spacing: 0.1em;
	text-align: left;
}
.outer .text-area .text{
	width: 100%;
	padding-top: 30px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}
.outer .text-area .text,
.outer .text-area .more-btn{
	padding-left: 30px;
}
.gallery{
	width: 60%;
	height: auto;
}
.gallery .gallery-slider{
	width: 100%;
	height: auto;
}
.gallery .gallery-slider li{
	display: none;
}
.gallery .gallery-slider li img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 1080px){
	.h2-title h2{
		padding-top: 24px;
		font-size: 56px;
		font-size: 2.5rem;
	}
	.outer .text-area .text{
		font-size: 13px;
		font-size: 1.3rem;
	}
	.gallery{
		width: 60%;
	}
}
@media screen and (max-width: 650px){
	.h2-title p{
		display: block;
		text-align: center;
	}
	.h2-title p:before{
		border-top: none;
		width: 100%;
		margin: 0 auto;
	}
	.h2-title h2{
		padding: 10px 0 0;
		font-size: 17px;
		font-size: 1.7rem;
		letter-spacing: 0.15em;
		text-align: center;
	}
	.outer .text-area .text{
		padding-top: 7%;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1.8;
		letter-spacing: 0.05em;
	}
	.outer .text-area .text,
	.outer .text-area .more-btn{
		padding-left: 0;
	}
	.gallery{
		width: 100%;
	}
}

/* news -------------------*/

#news{
	position: relative;
	z-index: 5;
	width: 100%;
	padding: 80px 0;
	background: url(../img/top/bg-news.png) right center no-repeat;
	background-size: auto 80%;
	background-color: #fafafa;
}
#news .inner{
	width: 1080px;
	margin: 0 auto;
	text-align: left;
}
#news .h2-title{
	float: left;
	width: 340px;
}
#news .news-list{
	float: right;
	width: 740px;
	margin: 0 auto;
}
#news .news-list ul{
	position: relative;
	width: 100%;
	padding-top: 44px;
}
#news .news-list li{
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: left;
}
#news .news-list li span{
	float: left;
	width: 130px;
}
#news .news-list li p{
	float: left;
	width: 610px;
	font-weight: bold;
	padding-bottom: 24px;
}
#news .news-list li a:hover{
	color: #9a9a9a;
}
#news .more-btn{
	margin-left: 80px;
	padding-bottom: 10%;
}
@media screen and (max-width: 1080px){
	#news{
		padding: 50px 0;
	}
	#news .inner{
		width: 90%;
	}
	#news .h2-title,
	#news .news-list{
		float: none;
		width: 100%;
	}
	#news .news-list ul{
		padding: 34px 0 0 30px;
	}
	#news .news-list li{
		font-size: 13px;
		font-size: 1.3rem;
	}
	#news .news-list li span{
		width: 120px;
	}
	#news .news-list li p{
		width: calc(100% - 120px);
		padding-bottom: 20px;
	}
	#news .more-btn,
	#news .more-btn a{
		margin: 0 auto;
	}
}
@media screen and (max-width: 650px){
	#news{
		padding: 40px 0;
		background-size: auto 60%;
		background-position: right 30%;
	}
	#news .news-list ul{
		padding: 30px 0 0;
	}
	#news .news-list li{
		font-size: 12px;
		font-size: 1.2rem;
		letter-spacing: 0.08em;
	}
	#news .news-list li span{
		width: 86px;
		padding-bottom: 0;
		font-size: 11px;
		font-size: 1.1rem;
	}
	#news .news-list li p{
		width: calc(100% - 86px);
		padding-bottom: 5%;
	}
	#news .more-btn{
		padding-top: 2%;
	}
}

/* instagram -------------------*/

.ig-area{
	width: 100%;
	max-width: 860px;
	height: auto;
	margin: 0 auto;
}
.ig-area a img{
	border-radius: 10px;
}


/* parallax -------------------*/

.parallax-body{
	z-index: 0;
}
.parallax-body .bg1,
.parallax-body .bg2,
.parallax-body .bg3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: right top repeat-y;
}
.parallax-body .bg1{
	background-image: url(../img/top/parallax-bg_1.png);
}
.parallax-body .bg2{
	z-index: -1;
	background-image: url(../img/top/parallax-bg_2.png);
}
.parallax-body .bg3{
	z-index: -2;
	background-image: url(../img/top/parallax-bg_3.png);
}
@media screen and (max-width: 1080px){
	.parallax-body .bg1,
	.parallax-body .bg2,
	.parallax-body .bg3{
		background-size: 40% auto;
	}
}

/* concept -------------------*/

#concept{
	position: relative;
	width: 100%;
	padding: 200px 0;
}
#concept .inner{
	position: relative;
	width: 900px;
	margin: 0 auto;
}
#concept .concept-text{
	width: 100%;
	height: auto;
}
#concept .pc-text{
	display: block;
}
#concept .sp-text{
	display: none;
}
@media screen and (max-width: 1080px){
	#concept{
		padding: 150px 0;
	}
	#concept .inner{
		width: 90%;
	}
}
@media screen and (max-width: 650px){
	#concept .pc-text{
		display: none;
	}
	#concept .sp-text{
		display: block;
	}
	#concept{
		padding: 100px 0;
	}
	#concept .inner{
		width: 90%;
	}
	.concept-text{
		width: 100%;
		text-align: left;
	}
	.concept-text .concept-text__title{
		width: 65%;
	}
	.concept-text .concept-text__text{
		width: 75%;
	}
	.concept-text .concept-text__title,
	.concept-text .concept-text__text{
		padding-bottom: 10%;
	}
	.concept-text .text-4{
		padding-bottom: 0;
	}
}

/* build works -------------------*/

#build{
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 200px;
}
#build .inner{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
}
#build .text-area{
	position: relative;
	float: left;
	z-index: 2;
	width: 45%;
	height: auto;
	padding: 50px 0 60px;
	background-color: rgba(250,250,250,0.9);
}
#build .text-area .inner{
	float: right;
	width: calc(100% - 10%);
	padding-right: 10%;
}
#build .gallery{
	position: relative;	/* IE11 */
	float: right;
	z-index: 1;
	margin-top: -300px;
}
#build .gallery .bx-wrapper .bx-prev{
	right: 0;
	margin-right: 46px;
}
#build .gallery .bx-wrapper .bx-next{
	right: 0;
}
@media screen and (max-width: 1080px){
	#build .text-area{
		padding: 40px 0;
	}
	#build .text-area .inner{
		width: calc(100% - 6%);
		padding-right: 8%;
	}
	#build .gallery .bx-wrapper .bx-prev{
		margin-right: 34px;
	}
}
@media screen and (max-width: 650px){
	#build{
		padding-bottom: 100px;
	}
	#build .text-area{
		float: none;
		width: 96%;
		margin: 0 auto;
		padding: 30px 0;
	}
	#build .text-area .inner{
		float: none;
		width: 86%;
		margin: 0 auto;
		padding: 0;
	}
	#build .gallery{
		float: none;
		width: 96%;
		margin: 0 auto;
	}
}

/* house works -------------------*/

#house{
	position: relative;
	width: 100%;
	height: auto;
	padding-bottom: 200px;
}
#house .inner{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
}
#house .text-area{
	position: relative;
	float: right;
	z-index: 2;
	width: 45%;
	height: auto;
	padding: 50px 0 60px;
	background-color: rgba(250,250,250,0.9);
}
#house .text-area .inner{
	float: left;
	width: calc(100% - 10%);
	padding-left: 10%;
}
#house .gallery{
	position: relative;	/* IE11 */
	float: left;
	z-index: 1;
	margin-top: -300px;
}
#house .gallery .bx-wrapper .bx-prev{
	left: 0;
}
#house .gallery .bx-wrapper .bx-next{
	left: 0;
	margin-left: 46px;
}
@media screen and (max-width: 1080px){
	#house .text-area{
		padding: 40px 0;
	}
	#house .text-area .inner{
		width: calc(100% - 6%);
		padding-left: 8%;
	}
	#house .gallery .bx-wrapper .bx-next{
		margin-left: 34px;
	}
}
@media screen and (max-width: 650px){
	#house{
		padding-bottom: 100px;
	}
	#house .text-area{
		float: none;
		width: 96%;
		margin: 0 auto;
		padding: 30px 0;
	}
	#house .text-area .inner{
		float: none;
		width: 86%;
		margin: 0 auto;
		padding: 0;
	}
	#house .gallery{
		float: none;
		width: 96%;
		margin: 0 auto;
	}
	#house .gallery .bx-wrapper .bx-prev{
		left: auto;
		right: 0;
		margin-right: 34px;
	}
	#house .gallery .bx-wrapper .bx-next{
		left: auto;
		right: 0;
		margin-left: 0;
	}
}

/* owner -------------------*/

#owner{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-bottom: 200px;
	margin-bottom: 150px;
}
#owner .inner{
	position: relative;
	width: 1080px;
	margin: 0 auto;
	z-index: 1;
}
#owner .text-area{
	width: 40%;
}
#owner .text-area .inner{
	width: 100%;
}
#owner .pic{
	width: 100%;
	height: auto;
	padding-bottom: 15%;
	z-index: 0;
}
#owner .pic .img-block{
	position: absolute;
	left: 38%;
	top: 18%;
	width: 55%;
	height: auto;
}
#owner .pic .pic-thum_1{
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: auto;
}
#owner .pic .pic-thum_2{
	position: absolute;
	right: 55%;
	top: 65%;
	width: 20%;
	height: auto;
}
#owner .pic img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 1080px){
	#owner{
		padding-bottom: 200px;
		margin-bottom: 0;
	}
	#owner .inner{
		width: 100%;
	}
	#owner .text-area{
		width: 40%;
		padding-left: 3%;
	}
	#owner .pic{
		width: 100%;
		height: auto;
		padding-bottom: 15%;
		z-index: 0;
	}
	#owner .pic .img-block{
		left: 45%;
		width: 45%;
	}
	#owner .pic .pic-thum_2{
		right: 40%;
		top: 55%;
	}
}
@media screen and (max-width: 650px){
	#owner{
		padding-bottom: 100px;
	}
	#owner .inner{
		width: 96%;
	}
	#owner .text-area{
		width: 100%;
		padding: 0;
		background-color: rgba(250,250,250,0.9);
	}
	#owner .text-area .inner{
		width: 86%;
		margin: 0 auto;
		padding: 30px 0;
	}
	#owner .pic{
		position: relative;
		width: 96%;
		margin: 0 auto;
		padding: 0;
	}
	#owner .pic .img-block,
	#owner .pic .pic-thum_2{
		display: none;
	}
	#owner .pic .pic-thum_1{
		position: relative;
		width: 100%;
		height: auto;
	}
}

/* model house -------------------*/

#modelhouse{
	position: relative;
	overflow: hidden;
	width: 1080px;
	margin: 0 auto;
	padding-bottom: 200px;
}
#modelhouse .inner{
	width: 100%;
}
#modelhouse .list-area{
	width: 1120px;
	padding-top: 50px;
}
#modelhouse .list-area li{
	float: left;
	width: 520px;
	margin-right: 40px;
}
#modelhouse .list-area li img{
	width: 100%;
	height: auto;
}
#modelhouse .list-area .meta{
	width: 100%;
	padding: 30px 0 0;
}
#modelhouse .list-area .meta h3{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	font-size: 20px;
	font-size: 2.0rem;
	letter-spacing: 0.2em;
}
#modelhouse .list-area .meta h3 span{
	padding-left: 10px;
	font-size: 15px;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}
#modelhouse .list-area .meta h3:before{
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -20px;
	width: 10px;
	height: 1px;
	background-color: #3a3a3a;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#modelhouse .list-area .meta p{
	padding-top: 20px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
}
#modelhouse .list-area .more-btn a{
	margin: 0 auto;
}
@media screen and (max-width: 1080px){
	#modelhouse{
		width: 90%;
	}
	#modelhouse .list-area{
		width: 105%;
		padding-top: 30px;
	}
	#modelhouse .list-area li{
		width: 45%;
		margin-right: 5%;
	}
	#modelhouse .list-area .meta h3{
		font-size: 17px;
		font-size: 1.7rem;
	}
	#modelhouse .list-area .meta h3 span{
		font-size: 14px;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 650px){
	#modelhouse{
		width: 70%;
		padding-bottom: 100px;
	}
	#modelhouse .list-area{
		width: 100%;
	}
	#modelhouse .list-area li{
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	#modelhouse .list-area li:first-child{
		padding-bottom: 40px;
	}
	#modelhouse .list-area .meta{
		padding: 20px 0 0;
	}
	#modelhouse .list-area .meta h3{
		margin-bottom: 16px;
		font-size: 15px;
		font-size: 1.5rem;
	}
	#modelhouse .list-area .meta h3:before{
		bottom: -16px;
	}
	#modelhouse .list-area .meta h3 span{
		font-size: 11px;
		font-size: 1.1rem;
	}
	#modelhouse .list-area .meta p{
		padding-top: 5%;
		font-size: 12px;
		font-size: 1.2rem;
	}
	#modelhouse .list-area .more-btn{
		padding-top: 5%;
	}
}

/* r-plus-house -------------------*/

#r-plus-house{
	position: relative;
	width: 1080px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 200px;
}
#r-plus-house .inner{
	width: 100%;
	background: url(../img/top/r-plus-house-bg.jpg) center center no-repeat;
	background-size: cover;
}
#r-plus-house .text-area{
	width: 60%;
	color: #3a3a3a;
	padding: 50px 0 60px;
	margin-left: 60px;
}
#r-plus-house .logo{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 250px;
	height: 52px;
}
#r-plus-house .external-link{
	position: absolute;
	top: 280px;
	right: 40px;
}
@media screen and (max-width: 1080px){
	#r-plus-house{
		width: 90%;
	}
	#r-plus-house .text-area{
		padding: 5% 0;
		margin-left: 3%;
	}
	#r-plus-house .external-link{
		top: 50%;
		right: 3%;
	}
}
@media screen and (max-width: 650px){
	#r-plus-house{
		width: 96%;
		padding-bottom: 100px;
	}
	#r-plus-house .inner{
		width: 100%;
		padding: 40px 8%;
		background: url(../img/top/r-plus-house-bg.jpg) center center no-repeat;
		background-size: cover;
	}
	#r-plus-house .text-area{
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#r-plus-house .logo{
		position: absolute;
		top: 3%;
		right: 3%;
		width: 90px;
		height: auto;
	}
	#r-plus-house .text-area br{
		display: none;
	}
	#r-plus-house .external-link{
		position: relative;
		right: 0;
		top: 0;
	}
}