@charset "utf-8";
/* ===================================================================

 file name :premium.css
 style info :プレミアムトップページ
 

=================================================================== */

/* =============================

	overwrite

=============================== */
#wrapper{
	padding-top: 0;
}
#header{
	background: none;
}



/* =================================== */
#main{
	padding: 60px 0 70px;
}

#main .works-list{
	max-width: 640px;
	margin: 0 auto;
}
#main .works-list li{
	margin: 0 0 60px;
}
#main .works-list li a{
	display: block;
	position: relative;
	color: #c4a27d;
}
#main .works-list li a::before{
	content: "";
	display: block;
	width: 37px;
	height: 37px;
	background: url("/kodate/designoffice/joshinetsu/img/premium/works/index/btn_arrow.png") no-repeat 50% 50% / 100% auto;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 10;
}
#main .works-list li a figure figcaption{
	font-size: 1.4rem;
	position: absolute;
	bottom: -2em;
}

#main .btn-primary{
	max-width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#main{
		padding: 100px 0 126px;
	}

	#main .works-list{
		margin: 0 0 50px;
		max-width: none;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#main .works-list::after{
		content: "";
		display: block;
		width: 378px;
	}
	#main .works-list li{
		width: 378px;
		margin: 0 0 90px;
	}
	#main .works-list li a{
		display: block;
		position: relative;
	}
	#main .works-list li a::before{
		width: 46px;
		height: 46px;
		right: 6px;
		bottom: 6px;
	}

	#main .works-list li a figure{
		background: #000;
		overflow: hidden;
	}
	#main .works-list li a figure img{
		transition: all ease 0.4s;
	}
	#main .works-list li a:hover figure img{
		transform: scale(1.2);
		opacity: 0.7;
	}
	#main .works-list li a figure figcaption{
		font-size: 1.6rem;
	}
	
	#main .btn-primary{
		width: 667px;
		margin: 0 auto;
	}
	
	
}