@charset "utf-8";

/* トップページ
   ========================================================================== */
.home-hd-conts {
	width: 100%;
  height: 50px;
  background-color: #152b55;
}
.home-hd-conts.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
	width: 100%;
}
@media (min-width:768px) {
	header {
		display: flex;
		flex-direction: column-reverse;
	}
	.home-hd-conts {
    height: 56px;
	}
	.home-hd-conts img {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		transition: .2s;
	}
	.home-hd-conts img:hover {
		opacity: 0.7;
	}
}



/* ムービー
   ========================================================================== */
.movie {
	font-size: 0;
}

.swiper {
	width: 100%;
	height: 200px;
}
/*.swiper-container {
	width: 100%;
	height: 200px;
}*/
.swiper-slide {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
.slide-01 {
	background-image: url("../img/main_img_01.jpg");
}
.slide-02 {
	background-image: url("../img/main_img_02.jpg");
}
.slide-02 video {
	display: none;
}

@media (min-width:768px) {
	.swiper {
		height: 90vh;
	}
	/*.swiper-container {
		height: 90vh;
	}*/
	.slide-02 {
		background-image: none;
		background-color: #fff;
	}
	.slide-02 video {
		display: block !important;
		/*width: 100%;*/
		min-width: 100%;
		min-height: 100vh;
	}
}




/* サブリンク
   ========================================================================== */
.sub-link {
	padding: 20px 0;
	border-bottom: 1px solid #dadada;
}
.sub-link a {
	margin-top: 1em;
}
.sub-link a:first-of-type {
	margin-top: 0;
}
@media (min-width:768px) {
	.sub-link {
		padding: 0;
		margin-top: 30px;
		border-bottom: none;
	}
	.sub-link a {
  	width: -moz-fit-content; /* Firefox */
  	width: fit-content; /* other browsers */
		display: block;
		margin-left: auto;
	}
}



/* ピックアップ
   ========================================================================== */
.pickup {
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 0;
}
.pickup a {
	display: block;
	flex: 1;
	background-color: #152b55;
	text-align: center;
	text-decoration: none;
	padding: 10px 0;
	border-right: 1px solid #1d396d;
}
.pickup a:last-of-type {
	border-right: none;
}
.pickup img {
	height: 50px;
}
.pickup span {
	display: block;
	font-size: 1.2rem;
	color: #fff;
}
@media (min-width:768px) {
	.pickup {
		width: 1100px;
		margin: 30px auto 0 auto !important;
		/*margin: 40px auto 0 auto !important;*/
	}
	.pickup a {
		width: calc((100% - 30px - 30px) / 3);
		padding: 0;
		margin-right: 30px;
		border-right: none;
		overflow: hidden;
	}
	.pickup a:last-of-type {
		margin-right: 0;
	}
	.pickup a > div {
		position: relative;
		height: 320px;
		background-repeat: no-repeat;
		/*background-size: cover;*/
		background-size: 100% auto;
	}
	.pickup a > div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(21,43,85,.3);
    transition: .5s;
	}
	.pickup a > div:hover:after {
		opacity: 1;
	}	
	.pickup a > div div {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 50px;
		background-color: #152b55;
	}
	.pickup span {
		position: absolute;
		bottom: 10px;
		font-size: 1.6rem;
	}
	.pickup img {
		position: absolute;
		bottom: 10px;
		left: 10px;
		height: auto;
	}
	.pu-1 {
		background-image: url("../img/pu-img-01.jpg")
	}
	.pu-1 span {
		left: 138px;
	}
	.pu-2 {
		background-image: url("../img/pu-img-02.jpg")
	}
	.pu-2 span {
		left: 97px;
	}
	.pu-3 {
		background-image: url("../img/pu-img-03.jpg")
	}
	.pu-3 span {
		left: 109px;
	}

}




/* 共通
   ====================================== */
.top-ttl-bg {
	background: url("../common/img/bg-def.png");
}
.top-ttl {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.0;
	padding: 1em 0;
}
.top-ttl span {
	display: inline-block;
	font-size: 1.4rem;
	color: #9db3c9;
	font-weight: normal;
	margin-left: 1em;
}
@media (min-width:768px) {
	.top-ttl {
		font-size: 2.2rem;
		padding: 1.5em 0;
	}
	.top-ttl span {
		font-size: 1.8rem;
	}
}


/* 新着情報
   ====================================== */
.top-news {
	margin-top: 0;
}
.top-news li {
	margin-top: 20px;
}
.top-news li a {
	text-decoration: none;
}
@media (min-width:768px) {
	.top-news {
		margin-top: 40px;
	}
	.top-news ul {
		display: flex;
		margin-top: 30px;
	}
	.top-news li {
		width: calc((100% - 30px - 30px) /3);
		margin: 0 30px 0 0;
	}
	.top-news li:last-child {
		margin-right: 0;
	}
	.top-news a {
		display: block;
		transition: .3s;
	}
	.top-news a:hover {
		opacity: 0.5;
	}
}



/* 物件情報一覧
   ========================================================================== */
.property-list {
	display: flex;
	flex-wrap: wrap;
}
.property-list li {
	width: calc((100% - 20px) / 2);
	margin: 20px 20px 0 0;
}
.property-list li:nth-child(2n) {
	margin-right: 0;
}
.property-list a {
	display: block;
	text-decoration: none;
}
.thumb-trim {
  position: relative;
  width: 100%;
  padding-top: 60%;
  margin: 0 auto;
  overflow: hidden;
}
.thumb-trim img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.thumb-trim div {
	display: flex;
	position: absolute;
	z-index: 2;
	bottom: 0;
	height: 24px;
}
.thumb-trim span {
	display: block;
	font-size: 1.2rem;
	color: #fff;
	line-height: 1.0;
	padding: 6px;
}
.thumb-trim .new {
	background-color: #4166ad;
}
.thumb-trim .sale {
	background-color: #263758;
}
.property-info {
	margin-top: 10px;
}
.property-name {
	font-weight: bold;
}
.property-txt {
	font-size: 1.2rem;
}
.property-address {
	font-size: 1.2rem;
}
@media (min-width:768px) {
	.property-list li {
		width: calc((100% - 30px - 30px) / 3);
		margin: 30px 30px 0 0;
	}
	.property-list li:nth-child(2n) {
		margin-right: 30px;
	}
	.property-list li:nth-child(3n) {
		margin-right: 0;
	}
	.thumb-trim div {
		height: 34px;
	}
	.thumb-trim span {
		font-size: 1.4rem;
		padding: 10px;
	}
	.property-info {
		margin-top: 10px;
	}
	.property-name {
		font-size: 1.8rem;
	}
	.property-txt {
		font-size: 1.4rem;
	}
	.property-address {
		font-size: 1.4rem;
	}
	.property-list a {
		transition: .3s;
	}
	.property-list a:hover {
		opacity: 0.5;
	}
}