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

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

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

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

	overwrite

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



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

#main .snav{
	margin: 0 0 35px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-right: solid 1px #c4a27d;
	border-bottom: solid 1px #c4a27d;
}
#main .snav li{
	width: 50%;
	border-top: solid 1px #c4a27d;
	border-left: solid 1px #c4a27d;
}
#main .snav li:last-child{
	width: 100%;
}
#main .snav li a{
	display: block;
	height: 50px;
	padding: 17px 0 0;
	text-align: center;
	font-size: 1.3rem;
	line-height: 1.3;
	color: #c4a27d;
}
#main .snav li:nth-child(2) a{
	padding: 10px 0 0;
}
#main .ttl-works{
	margin: 0 0 10px;
	font-size: 1.8rem;
}
#main .sec{
	padding: 70px 0 0;
}

#main .ttl-works::before{
	content: "■";
	margin: 0 2px 0 0;
	font-size: 1rem;
	vertical-align: 1px;
}

#main .works-list{
	max-width: 640px;
	margin: 0 auto;
}
#main .works-list li{
	margin: 0 0 30px;
}
#main .works-list li a{
	display: block;
	color: #c4a27d;
}
#main .works-list li a figure > span{
	display: block;
	position: relative;
}
#main .works-list li a figure > span::before{
	content: "";
	display: block;
	width: 37px;
	height: 37px;
	background: url("/kodate/designoffice/kansai2/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 span span{
	position: absolute;
	left: 5px;
	top: 5px;
	color: #fff;
	text-shadow:
		0 0 3px #000,
		0 0 6px #000;
}
#main .works-list li a figure span span::before{
	content: "";
	display: inline-block;
	background: url("/kodate/designoffice/kansai2/img/premium/works/index/ico_movie.png") no-repeat 50% 50% / 100% auto;
	width: 22px;
	height: 22px;
	vertical-align: -5px;
}
#main .works-list li a figure figcaption{
	margin: 5px 0 0;
	font-size: 1.4rem;
}
#main .btn-primary{
	max-width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#main{
		padding: 100px 0 126px;
	}
	#main .snav{
		margin: 0 0 50px;
	}
	#main .snav li{
		width: calc(100% / 5) !important;
	}
	#main .snav li a{
		height: 70px;
		padding: 24px 0 0;
		font-size: 1.7rem;
	}
	#main .snav li:nth-child(2) a{
		padding: 15px 0 0;
	}
	#main .snav li a:hover{
		background: #c4a27d;
		color: #000;
	}
	#main .sec{
		padding: 80px 0 0;
	}
	#main .ttl-works{
		padding: 0;
		font-size: 2.4rem;
	}
	#main .ttl-works::before{
		margin: 0 5px 0 0;
		font-size: 1.2rem;
		vertical-align: 3px;
	}
	#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 > span{
		background: #000;
		overflow: hidden;
	}
	#main .works-list li a figure > span img{
		transition: all ease 0.4s;
	}
	#main .works-list li a:hover figure > span img{
		transform: scale(1.2);
		opacity: 0.7;
	}
	#main .works-list li a figure span span::before{
		width: 28px;
		height: 28px;
		vertical-align: -8px;
	}
	#main .works-list li a figure figcaption{
		font-size: 1.6rem;
	}
	#main .works-list li a figure figcaption span{
		width: 25px;
		height: 25px;
	}
	#main .btn-primary{
		width: 667px;
		margin: 0 auto;
	}
	
	
}