@charset "utf-8";
/* day  night */

#gravure-list {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: left;
}
#gravure-list .page-index-list > li {
	width: 31%;
}
#gravure-list .page-index-list > li figure img {
	height: 480px;
}
#gravure-list .btn {
	 width: 48%;
}
@media only screen and (max-width:1280px) {
	#gravure-list {
		width: 97.5%;
	}
	#gravure-list .page-index-list > li {
		width: 31.5%;
	}
	#gravure-list .page-index-list > li figure img {
		height: 380px;
	}
}
@media only screen and (max-width:768px) {
	#gravure-list {
		width: 95%;
	}
	#gravure-list .page-index-list > li {
		width: 47.5%;
		margin: 0 0 5%;
	}
	#gravure-list .page-index-list > li figure img {
		height: 350px;
		object-fit: cover;
		object-position: 50% 25%;
		font-family: 'object-fit: cover; object-position: 50% 25%;'
	}
}
@media only screen and (max-width:480px) {
	#gravure-list {
		width: 92.5%;
	}
	#gravure-list .page-index-list > li {
		width: 100%;
		margin: 0 0 10%;
	}
	#gravure-list .page-index-list > li figure img {
		height: 300px;
		object-fit: cover;
		object-position: 50% 25%;
		font-family: 'object-fit: cover; object-position: 50% 25%;'
	}
}

#gravureContents {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	text-align: left;
}
@media only screen and (max-width:1280px) {
	#gravureContents {
		width: 97.5%;
	}
}
@media only screen and (max-width:768px) {
	#gravureContents {
		width: 95%;
	}
}
@media only screen and (max-width:480px) {
	#gravureContents {
		width: 92.5%;
	}
}

.profile-list {
	display: block;
	margin: 3% auto 0;
	width: auto;
	text-align: center;
	overflow: hidden;
}
.profile-list .btn {
	display: inline-block;
	width: 40%;
	max-width: 300px;
	margin: 0 1.5%;
	padding: 0;
	text-align: center;
}
.profile-list .btn a {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
}
@media only screen and (max-width:1280px) {
	.profile-list {
		margin: 2.5% auto 0;
	}
	.profile-list .btn {
		width: 46.5%;
	}
}
@media only screen and (max-width:768px) {
}
@media only screen and (max-width:480px) {
	.profile-list .btn {
		width: 45%;
	}
	.profile-list .btn a {
		/*padding: 5px 35px;*/
	}
}

.grid {
	width: 100%;
}
.grid .grid-sizer {
	width: 20%;
}
.grid .grid-item {
	width: 20%;
}
.grid .grid-item--width2 {
	width: 40%;
}
.grid .grid-item.hgt3 {
	height: 900px;
}
.grid .grid-item.hgt2 {
	height : 450px;
}
.grid .grid-item.hgt1 {
	height : 225px;
}
.grid .grid-item .photo span {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	z-index: 5;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.grid .grid-item img {
	box-sizing:border-box;
	border: 4px solid #fff;
	display: block;
	width: 100%;
	height:100%;
}
@media only screen and (max-width:1280px) {
	.grid .grid-sizer {
		width: 20%;
	}
	.grid .grid-item {
		width: 20%;
	}
	.grid .grid-item--width2 {
		width: 40%;
	}
	.grid .grid-item.hgt3 {
		height: 600px;
	}
	.grid .grid-item.hgt2 {
		height : 400px;
	}
	.grid .grid-item.hgt1 {
		height : 200px;
	}
}
@media only screen and (max-width:768px) {
	.grid .grid-sizer {
		width: 33.3333%;
	}
	.grid .grid-item {
		width: 33.3333%;
	}
	.grid .grid-item--width2 {
		width: 33.3333%;
	}
	.grid .grid-item.hgt3 {
		height: 540px;
	}
	.grid .grid-item.hgt2 {
		height : 360px;
	}
	.grid .grid-item.hgt1 {
		height : 180px;
	}
}
@media only screen and (max-width:480px) {
	.grid .grid-sizer {
		width: 50%;
	}
	.grid .grid-item {
		width: 50%;
	}
	.grid .grid-item--width2 {
		width: 50%;
	}
	.grid .grid-item.hgt3 {
		height: 480px;
	}
	.grid .grid-item.hgt2 {
		height : 320px;
	}
	.grid .grid-item.hgt1 {
		height : 160px;
	}
}