@charset "UTF-8";

/* main visual */
#works #mainvisual {
	background-image: url(/images/works/mv.jpg);
}
#works #mainvisual .sec-eyecatch, #works #mainvisual .sec-eyecatch-pc {
	display: none;
}

#works .sec-title:after {
	background-color: #595757;
	content: "";
	display: block;
	height: 1px;
	position: relative;
	top: 1rem;
	width: 2.5rem;
}

/* slide */
.slide-wrapper {
	position: relative;
}
.slide {
	background-color: #dcdddd;
	margin-bottom: 2rem;
	/*max-height: 540px;*/
}
.slide li {
	background-color: #eee;/*transparent;*/
}
/*.slide, .slide li, .slide a, .slide img {
	max-height: 540px;
}*/
.slide li a, .thumb li a {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.slide img, .thumb img {
	object-fit: contain;
}

/* slide:stack */
.slide-wrapper[data-slide-type="stack"] .slide li.is-next {
	animation: left-to-right 1s ease 0s 1 forwards;
	opacity: .5;
	transform: translate3d(-40%, 0, 0) scale3d(1, 1, 1);
}
@keyframes left-to-right {
	0% {
		opacity: .5;
		transform: translate3d(-40%, 0, 0) scale3d(1, 1, 1);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}
.slide-wrapper[data-slide-type="stack"] .slide li.is-prev {
	animation: right-to-left 1s ease 0s 1 forwards;
	opacity: .5;
	transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
}
@keyframes right-to-left {
	0% {
		opacity: .5;
		transform: translate3d(40%, 0, 0) scale3d(1, 1, 1);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

/* slide:thumbnail */
.thumb-wrapper {
	/*height: 100px;*/
	margin: -44px 0 2rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: 100%;
}
.thumb {
	display: flex;
	jutify-content: center;
	margin: 0 auto;
	position: static;/*relative;*/
	width: 100%;
}
.thumb li {
	/*flex-basis: 19%;*/
	flex-basis: auto;
	margin-right: .5rem;
	/*max-height: 64px;
	min-height: 64px;*/
	height: 64px;
	width: 64px;
}
.thumb li:last-child {
	margin-right: 0;
}
.thumb li a, .thumb li img {
	display: block;
	/*max-height: 64px;
	min-height: 64px;*/
	height: 64px;
	width: 64px;
}
.thumb a, .thumb img {
	height: 100%;
}
.thumb img {
	object-fit: cover;
}

.prev-slide, .next-slide {
	background-color: #595757;
	color: #fff;
	display: inline-block;
	font-size: 1.5rem;
	padding: .25rem 1rem;
	position: relative;
}
.next-slide {
	position: absolute;
}

.works-outlines {
	background-color: #eee;
	margin: 0 auto 2rem auto;
	padding: 1rem;
	width: 100%;
}
.works-outlines dl {
	margin-bottom: 1.5rem;
}
.works-outlines dt {
	font-weight: 400;
}

.tag-list {
	margin-bottom: 2rem;
}
.tag-list li {
	display: inline-block;
	margin-right: 1rem;
}
.tag-list li:last-child {
	margin-right: 0;
}
.tag-list li a {
	white-space: nowrap;
}
.tag-list li a:before {
	content: "#";
}

.share-buttons {
	text-align: center;
}
.share-buttons li {
	display: inline-block;
	margin-right: 1rem;
}
.share-buttons li:last-child {
	margin-right: 0;
}
.share-buttons img {
	height: 40px;
	width: 40px;
}

/* 同一カテゴリーの施工事例 */
/*
.latest-works {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.latest-works li {
	background-color: #fff;
	color: #595757;
	flex-basis: 31%;
	margin-bottom: 5%;
}
.latest-works li a {
	color: #595757;
}
.photo {
	line-height: 0;
	margin-bottom: .5rem;
	position: relative;
}
.label {
	background-color: #7698b4;
	color: #fff;
	font-family: Oswald, sans-serif;
	line-height: initial;
	padding: .25rem .5rem;
	position: absolute;
	top: 0;
	white-space: nowrap;
}
.category, .date {
	color: #595757;
	font-size: .875rem;
	margin-bottom: .25rem;
}
.name {
	font-weight: 400;
	margin-bottom: .25rem;
}
.completion-date:after {
	content: "完成";
}
.tags {
	display: block;
}
.tags li {
	color: #898787;
	display: inline-block;
	font-size: .75rem;
	margin-right: .75rem;
}
.tags li:last-child {
	margin-right: 0;
}
.tags li:before {
	content: "#";
}
*/
/* 同一カテゴリーの施工事例ここまで */

@media screen and (min-width: 480px) {
	/* 同一カテゴリーの施工事例 */
	/*.latest-works li a {
		display: flex;
		justify-content: space-between;
	}
	.latest-works li a .photo {
		display: flex;
		flex-basis: 32.5%;
	}
	.latest-works li a .outline {
		align-self: center;
		display: flex;
		flex-basis: 65%;
		flex-direction: column;
	}*/
	/* 同一カテゴリーの施工事例ここまで */
}

@media screen and (min-width: 980px) {
	/* slide:thumb */
	.thumb-wrapper {
		margin: -44px auto 2rem auto;
		width: 75%;
	}
	/*.thumb, */
	.floor-plans ul {
		width: 75%;
	}
	/*.thumb li {
		flex-basis: 15%;
	}*/
	
	.works-outlines {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 2rem;
		padding: 1rem 2rem;
		width: 75%;
	}
	.works-outlines dl {
		display: flex;
		flex-basis: 48%;
		margin-bottom: 1rem;
	}
	.works-outlines dt, .works-outlines dd {
		flex-basis: 48%;
	}
	
	.links {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.links ul {
		flex-basis: 48%;
	}
	.tag-list {
		margin-bottom: 0;
	}
	.share-buttons {
		text-align: right;
	}
	
	/* 同一カテゴリーの施工事例 */
	/*.latest-works {
		flex-direction: row;
	}
	.latest-works li {
		margin-bottom: 0;
	}
	.latest-works li a {
		display: block;
	}*/
}


@media screen and (min-width: 1280px) {
	#works #mainvisual .sec-eyecatch-sp {
		display: none;
	}
	#works #mainvisual .sec-eyecatch-pc {
		display: initial;
	}
	/* slide:thumb */
	/*.thumb li {
		flex-basis: 12.5%;
	}*/
}