@charset "UTF-8";
/* CSS Document */
body, h1, img, section, div, span{
	padding:0;
	margin:0;
}
h1, img, section, div, a{
	width:100%;
}
body{	
	background-color:#000;
}
#wrapper{
	margin:0 auto;
	display:flex;
}
h1{
	text-align:center;
	background-color:#FFF;
}
.row{	
	max-width:950px;
	max-height:600px;
}
.column{
	max-width:300px;
	max-height:756px;	
	flex-direction:column-reverse
}
.column img{
	display:block;
}
section{
	position:relative;
}
section div{
	font:30px/1.5 Verdana, Geneva, sans-serif;
	position:absolute;
	bottom:10%;
	height:20%;
}
a{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	text-decoration:none;
	height:100%;
}
a:hover{
	opacity:0.8;
}
span{
	text-align:center;
}
#five a{
	color:#000;
}
#ten a{	
	color:#FF0;
}
.code{
	width:70%;
	padding:2px 0;
	margin-bottom:5px;
}
#five .code{
	border:2px solid #fd008a;
	background-color:#ffffff78;
}
#ten .code{
	border:2px solid #feff6b;
	background-color:#0404046b;
}
.date{
	font-size: 0.6em;
}
.date:before{
	content:'有効期限：';
}
.date:after{
	content:'まで';
	font-size:0.9em;
	padding-right:5px;
}
	
@media (max-width: 649px){
.row section div{
	font-size:26px;
}
}
@media (max-width: 517px){
.row section div{
	font-size:20px;
}
}
@media (max-width: 439px){
.row section div{
	font-size:18px;
}
}
@media (max-width: 342px){
.row section div{
	font-size:14px;
}
}