@charset "utf-8";

/* home.css
 * **************************************************
 * **************************************************
 */

/* mainvisual */
#mainvisual {
	height: 760px;
	position: relative;
	width: 100%;
}

#mainvisual .swiper-slide {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 690px;
}

#mainvisual .scroll {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* pickup */
.pickup {
	margin: 80px 0 0 0;
}

.pickup h2 {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-align: center;
}

.pickup ul.works {
	margin: 100px 0 0 0;
	padding: 0 0 200px;
	position: relative;
}

.pickup ul.works::before {
	background: #c6c6c6;
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
}

.pickup ul.works::after {
	clear: both;
	content: '.';
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

.pickup ul.works li {
	margin: 194px 0 0 0;
	opacity: 1;
	width: 50%;
}

.pickup ul.works li.is-hidden {
	display: none;
	opacity: 0;
}

.pickup ul.works li.is-show {
	animation: fadeIn 1s ease;
}

@keyframes fadeIn {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.pickup ul.works li:nth-child(-n+2) {
	margin-top: 0;
}

.pickup ul.works li:nth-child(odd) {
	clear: left;
	float: left;
	padding: 0 50px 0 0;
	text-align: right;
}

.pickup ul.works li:nth-child(even) {
	clear: right;
	float: right;
	padding: 0 0 0 50px;
}

.pickup ul.works li figcaption {
	font-size: 10px;
	margin: 12px 0 0 0;
}

.pickup ul.works li figcaption cite {
	font-size: 15px;
}

.pickup .more {
	border: 1px solid #c6c6c6;
	cursor: pointer;
	font-size: 15px;
	height: 60px;
	line-height: 58px;
	margin: 0 auto;
	text-align: center;
	transition: .2s;
	width: 200px;
}

.pickup .more:hover {
	background-color: #515151;
	color: #ffffff;
}

/* opening */
#opening {
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}

#opening div {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#opening div svg {
	fill: #a38a77;
	width: 300px;
}

#opening div svg {
	animation: fade 1.5s ease;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Media Queries
-------------------------------------------------- */

@media only screen and (max-width: 767px) {

	/* mainvisual */
	#mainvisual .swiper-slide {
		background-size: auto 100%;
	}

	#mainvisual .scroll {
		bottom: 5px;
	}

	/* pickup */
	.pickup ul.works {
		padding-bottom: 100px;
	}

	.pickup ul.works::before {
		content: none;
	}

	.pickup ul.works li {
		margin-top: 75px;
		width: 100%;
	}

	.pickup ul.works li:nth-child(2n) {
		margin-top: 75px;
	}

	.pickup ul.works li:nth-child(odd),
	.pickup ul.works li:nth-child(even) {
		float: none;
		padding: 0;
		text-align: left;
	}

	/* opening */
	#opening div svg {
		width: 200px;
	}

}