@charset "UTF-8";
/* WORKS CSS
------------------------------------ */
/* 絞り込み ----------- */
.area-filter  {
	width: fit-content;
	margin-left: auto;
	margin-right: -40px;
}
.area-filter .listpage-archive {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 15px;
	width: auto;
	margin: 0;
	padding: 0;
}
.area-filter .listpage-archive::before {
	display: none;
}
.area-filter .listpage-archive .r-archive {
	position: static;
	width: 200px;
}
.area-filter .cs-select {
	z-index: auto;
	background-color: transparent;
}
.cs-skin-slide .cs-options {
	z-index: 1;
}
.area-filter .cs-select.cs-active .cs-options ul {
	background-color: #000;
	padding: 20px 10px;
	box-sizing: content-box;
	max-height: 400px;
	min-width: 200px;
	margin-left: 50%;
	transform: translateX(-50%);
	overflow-y: auto;
	overflow-X: hidden;
}
.area-filter .cs-select.cs-active .cs-options ul::before {
	-webkit-transform: scale3d(1.1,1.05,1);
	transform: scale3d(1.1,1.05,1);
	display: none;
}
.cs-skin-slide .cs-options li span {
	box-sizing: border-box;
	letter-spacing: 0;
	font-size: 1.4rem;
	padding-right: 3em;
}
@media (max-width: 1350px) {
	.area-filter  {
		margin-right: 12px;
	}
}
@media (max-width: 768px) {
	.area-filter  {
		padding-right: 0;
		margin-right: -3px;
	}
	.area-filter .box-text {
		width: 100%;
		order: 1;
	}
	.area-filter .box-filter {
		flex: 0 1 auto;
	}
}
@media (max-width: 480px) {
	.area-filter  {
		margin-right: 0;
	}
	.area-filter .cs-select.cs-active .cs-options ul {
		max-height: 200px;
	}
}


/* ul-works */
.section-works .ul-works {
	position: relative;
}
.section-works .ul-works .txt {
  line-height: 1.444444444444444;
  letter-spacing: 0.05em;
}
.section-works .ul-works .txt1 {
  line-height: 1.85714;
}
.section-works .ul-works a {
  display: block;
}
.section-works .ul-works .thumbnail {
  display: block;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.section-works .ul-works .cm-btn .btn-wrap {
  padding: 11px 14px 12px;
}
.section-works .ul-works .cm-btn .btn-wrap:before {
  right: -15%;
}


@media (min-width: 768px) {
}

@media (max-width: 1350px) {
  .order-area {
    padding: 0 12px;
		margin: 0 0 10px;
  }
	.section-works .ul-works .text {
		right: 12px;
	}
}
@media (max-width: 1199px) {
	.section-works .ul-works > li {
		padding: 0 10px 87px;
	}
}
@media (min-width: 769px) and (max-width: 1199px) {
	.section-works .container.list-container .ul-itembox > li .stxtbox .text {
		bottom: -22px;
	}
	.section-works .container.list-container .ul-itembox > li .cm-btn {
		left: auto;
		position: relative;
		bottom: auto;
		width: 100%;
	}
}
@media (max-width: 768px) {
  .section-works .ul-works {
    margin: 0 -10px;
  }
  .section-works .ul-works > li {
    padding: 0 10px 60px;
  }
  .order-area {
    padding: 0;
  }

}
@media (max-width: 480px) {
  .section-works {
    padding-bottom: 50px;
  }
	.order-area .button-area {
		justify-content: center;
		margin-bottom: 20px;
	}
}