@charset "utf-8";

/* ========================================================
	index.css => index用CSS
======================================================== */

/* header
============================================================================================================ */
@media (min-width: 769px), print {
	#header {
		top: 840px;
		border-bottom-color: #fff;
	}
	#container {
		padding-top: 1100px;
	}
}
@media screen and (max-width: 768px) {
	#header {
		top: 0 !important;
	}
	#container {
		padding-top: 50px !important;
	}
}


/* main
============================================================================================================ */
br.hide {
  display: none;
}
#main .slick-dots {
	position: absolute;
	height: auto;
	bottom: -34px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}
#main .slick-dots li {
	display: inline-block;
}
#main .slick-dots li button {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 18px;
	height: 0;
	padding: 18px 0 0;
	border: none;
	background: none;
	font-size: 0;
	line-height: 1;
}
#main .slick-dots li button:after {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	border-radius: 100%;
	background-color: #cccccc;
	-webkit-transition: background 0.15s;
	-o-transition: background 0.15s;
	transition: background 0.15s;
}
#main .slick-dots li.slick-active button:after {
	background-color: #895934;
}

@media (min-width: 769px), print {
  br.hide {
    display: none;
  }
	#main {
		position: absolute;
		/*overflow: hidden;*/
		top: 0;
		right: 0;
		left: 0;
		max-height: 780px;
		min-height: 450px;
		height: 70%;
	}
	#main img {
		display: inline;
	}
	#main div {
		height: 100%;
	}
	#main .main {
		position: relative;
		background-position: 50%;
		-webkit-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	#main .main p {
		position: relative;
		z-index: 3;
	}
	#main .main .bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#main .main .bg > div {
		height: 100%;
		background-position: 50%;
		-webkit-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	#main .main01 {
		background-image: url(../images/main01_bg.jpg);
	}
	#main .main01 p {
		position: absolute;
		top: 50%;
		left: 36.4%;
		/*right: 0;*/
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#main .main02 p {
		width: 78%;
		position: absolute;
		bottom: 5%;
		left: 9.95%;
		right: 0;
	}
	#main .main02 p img {
		width: 100%;
		height: auto;
	}
	#main .main02 .bg > div {
		float: left;
		/* width: 20%; */
		width: 25%;
	}
	#main .main02 .bg1 {
		background-image: url(../images/main02_bg01.jpg?date=20210902);
	}
	#main .main02 .bg2 {
		background-image: url(../images/main02_bg02.jpg?date=20210902);
	}
	#main .main02 .bg3 {
		background-image: url(../images/main02_bg03.jpg?date=20210902);
	}
	#main .main02 .bg4 {
		background-image: url(../images/main02_bg04.jpg?date=20210902);
	}
	#main .main02 .bg5 {
		background-image: url(../images/main02_bg05.jpg);
	}
	#main .main03 {
		background-image: url(../images/main03_bg.jpg);
	}
	#main .main03 p {
		width: 46.1%;
		position: absolute;
		top: 18%;
		left: 7.1%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#main .main03 p img {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 768px) {
	#main {
		margin-bottom: 50px;
	}
	#main .main > div * {
		display: none;
	}
	#main .main > div {
		padding-top: 104%;
		background-position: 50%;
		-webkit-background-size: cover;
		background-size: cover;
		text-align: center;
	}
	#main .main01 > div {
		background-image: url(../images/main01_sp.jpg);
	}
	#main .main02 > div {
		background-image: url(../images/main02_sp.jpg?date=20210902);
	}
	#main .main03 > div {
		background-image: url(../images/main03_sp.jpg);
	}
}

@media (min-width: 769px), print {
	#main .slick-dots li button:hover:after {
		background-color: #895934;
	}
}
@media screen and (max-width: 768px) {
	#main .slick-dots {
		bottom: -24px;
	}
}


/* information
============================================================================================================ */
#information {
}
#information ul {
	margin-bottom: 50px;
}
#information li a {
	display: block;
	padding: 5px 0;
	text-decoration: none;
}
#information li a:after {
	content: ""; display: table; clear: both;
}
#information li a > span {
	display: block;
}
#information li a .date {
	float: left;
	width: 7em;
	color: #222222;
}
#information li a .cat {
	float: left;
	width: 7em;
	padding-top: 2px;
}
#information li a .cat span {
	font-size: 1.3rem;
	display: block;
	padding: 0 5px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#information li a .title {
	margin-left: 15em;
	color: #b91818;
}

@media (min-width: 769px), print {
	#information li a:hover .title {
		text-decoration: underline;
	}
}
@media screen and (max-width: 768px) {
	#information ul {
		margin-bottom: 30px;
	}
	#information li a .cat span {
		font-size: 1rem;
	}
	#information li a .title {
		clear: both;
		margin-top: 5px;
		margin-left: 0;
	}
}


/* construction
============================================================================================================ */
#construction {
	margin: 140px 0;
}
#construction .slide {
	position: relative;
	margin: 40px 0 50px;
}
#construction li a {
	display: block;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
	width: 430px;
	height: 330px;
}
#construction .slide .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
}
#construction .slide .arrow:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -22px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;

}
#construction .slide .arrow.l {
	left: 0;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=1 );
}
#construction .slide .arrow.l:after {
	right: 70px;
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
#construction .slide .arrow.r {
	right: 0;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.6) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=1 );
}
#construction .slide .arrow.r:after {
	left: 70px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media (min-width: 769px), print {
	#construction .slide .arrow.l:hover:after {
		right: 74px;
	}
	#construction .slide .arrow.r:hover:after {
		left: 74px;
	}
}
@media screen and (max-width: 768px) {
	#construction {
		margin: 70px 0;
	}
	#construction .slide {
		margin: 30px 0 40px;
	}
	#construction li a {
		width: 215px;
		height: 165px;
	}
	#construction .slide .arrow {
		width: 20%;
	}
	#construction .slide .arrow:after {
		width: 20px;
		height: 20px;
		margin-top: -12px;
		border-top-width: 2px;
		border-right-width: 2px;
	}
	#construction .slide .arrow.l:after {
		right: 20px;
	}
	#construction .slide .arrow.r:after {
		left: 20px;
	}
}



/* index_contents
============================================================================================================ */
.index_contents section {
	background-repeat: no-repeat;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
	font-size: 1.8rem;
}
.index_contents section > .w {
	display: table;
	height: 520px;
}
.index_contents section > .w > * {
	display: table-cell;
	vertical-align: middle;
}
.index_contents section > .w:after {
	content: none;
}
.index_contents .r .w {
	padding-left: 640px;
}
.index_contents section h1 {
	font-size: 4rem;
	line-height: 1.3;
	font-weight: normal;
	margin-bottom: 30px;
}
.index_contents section .btn {
	margin-top: 30px;
}

.index_contents .concept {
	background-image: url(../images/concept_bg.jpg);
}
.index_contents .housing {
	background-image: url(../images/housing_bg.jpg?date=20210908);
}
.index_contents .construction {
  background-image: url(../images/construction_bg.jpg);
}
.index_contents .blog {
	background-image: url(../images/blog_bg.jpg);
}
.index_contents .blog .w {
	padding-left: 600px;
}
.index_contents .company {
	margin-bottom: 120px;
	background-image: url(../images/company_bg.jpg);
}

.index_contents .housing .w {
	/* padding-left: 720px; */
}
.index_contents .housing h1 {
	position: relative;
	display: inline-block;
}
.index_contents .housing h1 span {
	position: absolute;
	bottom: -10px;
	right: -140px;
}
.index_contents .housing .btn {
	margin-bottom: 50px;
}
.index_contents .housing .banner {
	margin-top: 15px;
}
@media screen and (max-width: 768px) {
  br.hide {
    display: none;
  }
	.index_contents section {
		font-size: 1.2rem;
	}
	.index_contents section > .w {
		margin: 0;
		height: 260px;
	}
	.index_contents .sp_r .w {
		margin-left: 36%;
	}
	.index_contents .r .w {
		margin-left: 36%;
	}
	.index_contents section h1 {
		font-size: 2.5rem;
		margin-bottom: 15px;
    letter-spacing:-0.12em;
	}
  .index_contents section .sp {
    line-height: 1.5;
  }
	.index_contents section .btn {
		margin-top: 15px;
	}

	.index_contents .concept {
		background-image: url(../images/concept_bg_sp.jpg);
	}
	.index_contents .housing {
		background-image: url(../images/housing_bg_sp.jpg?date=20210908);
	}
	.index_contents .housing .w {
		padding-top: 20px;
	}
  .index_contents .construction {
    background-image: url(../images/construction_bg_sp.jpg);
  }
  .index_contents .construction h1 {
    line-height: 1.3 !important;
  }
	.index_contents .blog {
		background-image: url(../images/blog_bg_sp.jpg);
	}
  .index_contents .blog .w {
    padding-right: 0 !important;
  }
  .index_contents .blog h1 {
    line-height: 1.3 !important;
  }
	.index_contents .company {
		margin-bottom: 7.3%;
		background-image: url(../images/company_bg_sp.jpg);
	}
  .index_contents .company h1 {
    width: 56%;
  }
  .index_contents .company h1 img {
    width: 100%;
    height: auto;
  }
	.index_contents .housing h1 span {
		position: absolute;
		width: 67px;
		bottom: 24px;
		right: -40px;
	}
	.index_contents .company .granville {
		margin-top: 20px;
	}
	.index_contents .company .granville span {
		display: table-cell;
	}
	.index_contents .company .granville span img {
		width: 34px;
		max-width: none;
	}
	.index_contents .housing .w {
		padding-top: 0;
	}
	.index_contents .housing .btn {
		margin-bottom: 10px;
	}
  .index_contents .housing .banner {
    margin-top: 10px;
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  br.hide {
    display: block;
  }
  .index_contents .blog .w {
    margin-left: 28% !important;
  }
}

@media screen and (min-width: 768px) {
  .index_contents .housing .banner {
	padding-right: 428px;
	}
}