html,
body {
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}
div.container_ div.contents_, div.container_ div.mainframe_, div.container_ div.mainframe_ .event_ .goods_ {

    width: 1008px;
    margin: 0 auto;

}
.container_{
	height: 100%;
    background-color:#F6F6F6;	
}
.container {
	max-width:100%;
	margin:auto;
	text-align: center;


}


.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
@media screen and (min-width: 768px){
	.container > div {
		width:316px;
		float:left;
		margin:15px 15px;
		box-sizing: border-box;
		position: relative;
	}
	.container > div:nth-of-type(1),
	.container > div:nth-of-type(3n + 1)
	{
		margin-left:0;
	}
	.container > div:nth-of-type(3n)
	{
		margin-right:0;
	}
}

@media screen and (max-width: 768px){
div.container_ div.contents_ {

    width: 80%;

}
	.container > div {
		width:98%;
		float:left;
		margin:1.5% 1%;
		box-sizing: border-box;
		position: relative;
	}
}

.container > div img {
	width:100%;
	height:auto;
}
.container > div:nth-of-type(1) img.fade-in,
.container > div:nth-of-type(2) img.fade-in,
.container > div:nth-of-type(3) img.fade-in,
.container > div:nth-of-type(4) img.fade-in,
.container > div:nth-of-type(5) img.fade-in,
.container > div:nth-of-type(6) img.fade-in
{
    animation-name: fadein;
    animation-duration: 2s;
}
.container > div:nth-of-type(n + 7) img.fade-in {
    opacity: 1;
    transition: opacity 1.5s;
}
.container > div:nth-of-type(n + 7) img.lazyestload.fade-in{
	opacity: 0;
}
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.container > div span {
	position: absolute;
	top:5px;
	left:10px;
	font-family: 'Great Vibes', cursive;
	color: chocolate;
	font-size:180%;
	text-decoration: none;
}