@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/* テラスコレクション */
.footerTerrace__text {
	font-weight: bold;
	font-family: 'Noto Serif JP', serif;
}

.footerTerrace__titleImg img {
	width: unset;
}

/* PC */
@media screen and (min-width: 681px) {
	/* テラスコレクション  */
	.footerTerrace {
		width: 100vw;
		background: #F2F2F2;
		margin: 35px calc((100% - 100vw) / 2) 0;
		padding: 90px 0;
		border-top: 3px solid #C49D63;
		border-bottom: 3px solid #C49D63;
		position: relative;
		line-height: 1;
	}

	.footerTerrace__logo {
		display: block;
		width: 150px;
		margin: 0 auto 50px;
	}

	.footerTerrace__logo img {
		width: 100%;
	}

	.footerTerrace__title {
		text-align: center;
		margin: 0 auto 65px;
	}

	.footerTerrace__titleImg {
		width: 100%;
	}

	.footerTerrace__list {
		max-width: 1680px;
		margin: auto;
	}
	.footerTerrace__list::before ,
	.footerTerrace__list::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		background: #F2F2F2;
		opacity: .6;
		width: 15%;
		z-index: 200;
	}
	.footerTerrace__list::before {
		left: 0;
	}
	.footerTerrace__list::after {
		right: 0;
	}

	.footerTerrace__item {
		width: 323px;
		padding: 0 15px;
	}

	a.footerTerrace__link {
		display: block;
		/* width: 323px; */
		color: #fff;
		position: relative;
	}

	.footerTerrace__img {
		width: 100%;
	}

	.footerTerrace__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 18px;
		text-shadow: 0 4px 6px rgba(0, 0, 0, .6);
	}

	.footerTerrace__textSub {
		display: block;
		font-size: 66%;
		margin: 0 0 .75em;
	}

	.footerTerrace__btn {
		display: none !important;
	}

	.footerTerrace__linkAll {
		display: block;
		position: absolute;
		top: 322px;
		left: 0;
		right: 0;
		bottom: 90px;
		/* width: 70%; */
		margin: auto;
		background: none;
		/* background: #999; */
		z-index: 200;
	}
	.footerTerrace__linkAll:hover {
		background: rgba(242, 242, 242, .6);
	}

}

@media screen and (max-width:980px){
	.footerTerrace__text {
		font-size: 1.5vw;
	}
}


/* SP */
@media screen and (max-width: 680px) {
	.footerTerrace {
		width: 100vw;
		background: #F2F2F2;
		margin: 35px 0 0;
		padding: 50px 0;
		border-top: 2px solid #C49D63;
		border-bottom: 2px solid #C49D63;
		line-height: 1;
	}

	.footerTerrace__logo {
		display: block;
		width: 125px;
		margin: 0 auto 35px;
	}

	.footerTerrace__title {
		text-align: center;
		margin: 0 auto 40px;
	}

	.footerTerrace__titleImg {
		width: 100%;
	}

	.footerTerrace__list .slick-list {
		height: 50.66vw !important;
	}

	.footerTerrace__list::before ,
	.footerTerrace__list::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		background: #F2F2F2;
		opacity: .6;
		width: 4px;
		z-index: 200;
	}
	.footerTerrace__list::before {
		left: 0;
	}
	.footerTerrace__list::after {
		right: 0;
	}

	.footerTerrace__item.slick-slide {
	  transition: all .3s ease;
	  transform: scale(.8) translate(10%, 0);
	  transform-origin: 75% 50%;
	}

	.footerTerrace__item.slick-current {
	  position: relative;
	  z-index: 2;
	  transform: scale(1);
	  transform-origin: 50% 50%;
	}

	.footerTerrace__item.slick-current + .slick-slide {
	  transform-origin: -75% 50%;
	}


	a.footerTerrace__link {
		display: block;
		color: #fff;
		position: relative;
	}
	.slick-center a.footerTerrace__link {
		/* transform: scale(1.08); */
	}

	.footerTerrace__img {
		width: 100%;
	}

	.footerTerrace__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 18px;
	}

	.footerTerrace__textSub {
		display: block;
		font-size: 66%;
		margin: 0 0 .75em;
	}

	.footerTerrace__btn {
		cursor: pointer;
		width: 38px;
		height: 67px;
		background: #fff;
		box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
		text-indent: -9999px;
		position: absolute;
		top: 50%;
		/* transform: translate(0, -50%); */
		z-index: 199;
	}
	.footerTerrace__btn:hover {
		opacity: .7;
	}
	.footerTerrace__btn::before {
		content: '';
		width: 10px;
		height: 22px;
		position: absolute;
		top: calc(50% - 11px);
		left: calc(50% - 5px);
		background: url(../img/terrace-collection/slick-arrow.svg) no-repeat center / contain;
	}
	.footerTerrace__btn.slick-next::before {
		transform: rotate(180deg);
	}
	.footerTerrace__btn.slick-prev {
		left: 5px;
		transform: translate(0, -50%);
	}
	.footerTerrace__btn.slick-next {
		right: 5px;
		transform: translate(0, -50%);
	}
}