@charset "UTF-8";

/* Scss Document */
#contesntsWrapper{
	max-width: 100%;
	padding: 0;
	margin: 0;
}
.contents {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-size: 1.8rem;
}

.topBtn {
	position: fixed;
	bottom: 5%;
	right: 5%;
}

/*=============   MV   ==================*/
#mv {
	height: 19vw;
	margin-bottom: 5vw;
	background-image: url("../img/index_mv.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#mv h2 {
	height: 19vw;
	font-size:	clamp(1.75rem, 2vw + 1.8rem, 3.2rem);
	font-weight: 700;
	text-align: center;
	color: white;
}


@media screen and (min-width:1400px) {
	#mv {
		height: 250px;
	}
	#mv h2 {
		height: 250px;
	}
}
@media screen and (max-width:768px) {
	#mv {
		height: 35vw;
	}
	#mv h2 {
		height: 35vw;
	}
}
/*=============   h3   ==================*/
.year {
	display: flex;
	align-content: center;
	margin-top: 100px;
}
.year:after {
  border-top: 1px solid;
  content: "";
  width: 100%; 
  margin: 10px 0 0 20px;
}

/*=============   fieldset   ==================*/
.contentBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contentBox > li {
  width: calc(100% / 2 - 45px);
  margin-top: 30px;
  border: solid 1px #333;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.contentBox li h3 {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.01rem;
}
.contentBox img {
	width: 110px;
}
.contentBox li dl {
  display: flex;
}
.contentBox li dl dt {
  width: 26%;
  height: auto;
  margin-right: 15px;
  background-size: contain;
  background-position: center center;
  overflow: hidden;
}
.contentBox li dl dt a {
  display: block;
  width: 100%;
  height: 100%;
}
.contentBox li dl dt a:hover {
  transform: scale(1.1);
}
.contentBox li dl dd {
  width: 74%;
  height: 100px;
}
.contentBox li dl dd p {
  line-height: 1.3;
}
.link_property {
	padding: 1rem;
}
.arrow {
	display: block;
	position: absolute;
	padding: 3rem;
    right: 53%;
    bottom: 50%;
}
.arrow::before {
	content: "";
    position: absolute;
    background-color: #7b7a7a;
    width: 10px;
    height: 1px;
    display: block;
    right: -12em;
	bottom: calc(3px + 4px);
    transform: rotate(45deg);
	transition: .3s;
}
.arrow::after {
	content: "";
    position: absolute;
    width: 35px;
    height: 1px;
	right: -12em;
    bottom: 3px;
    background-color: #7b7a7a;
    display: block;
	transition: .3s;
}
a:hover .arrow::before {
	right: -13em;
}
a:hover .arrow::after {
	right: -13em;
}
.tagList {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;	
  margin-bottom: 10px;
}
.tagList li {
  width: auto;
  margin-right: 5px;
  font-size: 1.2rem;
  color: white;
  background-color: #333;
  border: 1px solid #333;
  padding: 5px;
  border-radius: 10px;
  margin-top: 10px;
}
#contesntsWrapper #sort {
	margin-top: -80px;
}
@media (max-width: 767px) {
		.w960 {
		width: 95%;
	}
		#contesntsWrapper #multifilter #propertyList ul{
		width: 100%;
    	margin: 0 auto;
	}
	.contentBox li dl {
		flex-wrap: wrap;
	}	
  .contentBox > li {
    width: 100%;
	padding-bottom: 2em;
  }
  .contentBox li dl dt {
    width: 40%;
	margin-right: 5px;  
  }
  .contentBox li dl dd{
    width: 55%;
  }
	.arrow::before {
    right: -9em;
	bottom: calc(-15px + 4px);
}
.arrow::after {
	right: -9em;
    bottom: -15px;
}
a:hover .arrow::before {
	right: -13em;
}
a:hover .arrow::after {
	right: -13em;
}
}

/*=============   multifilter   ==================*/

#multifilter {
	margin-top: 70px;
}
#gFooter {
	margin-top: 145px;
}