@charset "utf-8";
@media screen and (max-width: 767px) {
/*HEADER*/
.keyvisual {
	background-image:url(../images/works/keyvisual.jpg);
	/*background-position-y:bottom;*/
	
}


/*CONTENTS*/

section {
	padding:4rem 0;
}

section .title-box {
	text-align:center;
	padding-bottom:30px;
	border-bottom: solid 1px #999;
}
section .title-box h1 {
	font-weight:normal;
	padding:0 1rem;
}
.content-box {
	display:grid;
	grid-template-columns:1fr 1fr;
	place-items: stretch stretch;
	gap:0 0;
	width:100%;
}
.content-box li:nth-child(even) {
	background-color:rgba(240,240,240,1);
}
.content-box li a.photo {
	display:block;
}
.content-box li a img {
	width:100%;
}
.content-box li h2 {
	font-size:12px;
	padding:10px 10px 0;
}
.content-box li p {
	font-size:10px;
	padding:0 10px 10px;
}
.content-box li p.data {
	font-size:12px;
	padding-bottom:0;
}

.photo-data {
	display:none;
}
}

@media screen and (min-width: 768px) {
/*HEADER*/
.keyvisual {
	background-image:url(../images/works/keyvisual.jpg);
	/*background-position-y:bottom;*/
	
}


/*CONTENTS*/

section {
	padding:60px 0;
}

section .title-box {
	text-align:center;
	padding-bottom:30px;
	border-bottom: solid 1px #999;
}
section .title-box h1 {
	font-weight:normal;
}
.content-box {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	place-items: stretch stretch;
	gap:0 0;
	width:100%;
}
.content-box li:nth-child(even) {
	background-color:rgba(240,240,240,1);
}
.content-box li a.photo {
	display:block;
	position:relative;
}
.content-box li a.photo::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-image:url(../images/filter_bk080.png);
	background-color:rgba(0,0,0,.8);
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	transition:opacity ease .4s;
}
.content-box li a.photo::after {
	content:"VIEW MORE";
	display:block;
	width:100%;
	max-width:160px;
	color:#333;
	text-align:center;
	background-color:rgba(255,255,255,1);
	padding:.5rem 2rem .5rem 1rem;
	border:solid 1px #3333;
	background-image:url(../images/icon_next-bk.svg);
	background-repeat:no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	position:absolute;
	top: 50%;
    left: 50%;
	z-index:1;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	opacity:0;
	transition:opacity ease .4s;
}
.content-box li a.photo:hover::before,
.content-box li a.photo:hover::after {
	opacity:1;
}
.content-box li a img {
	width:100%;
}
.content-box li h2 {
	font-size:14px;
	padding:10px 10px 0;
}
.content-box li p {
	font-size:12px;
	padding:0 10px 10px;
}
.content-box li p.data {
	font-size:14px;
	padding-bottom:0;
}

.photo-data {
	display:none;
}
}