@charset "utf-8";

/**
 * 抽選商品一覧
 *
 * CSS versions	3
 *
 * @category   Web Application
 * @package    Argus
 * @copyright  Polaris, Inc.
 *
 */
.BLK100500
{
	position:relative;
	width:100%;
}

/* 会員バーコード */
.BLK100500 .frame.barcode
{
	position:fixed;
	margin-top:4.3rem;
	padding:0.8rem 2rem;
	width:100%;
	z-index:9;

	/* 背景（下影付き） */
	box-shadow: 2px 2px 4px #999;
	-webkit-box-shadow:2px 2px 4px #999;
	-webkit-appearance: none;

}
.BLK100500 .frame div.mybarcode
{
	margin:0 auto;
	padding:0.2rem 0;
	color:#000;
	background-color:#fff;
	text-align:center;
	box-sizing: border-box;

	/*	角丸 */
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;

}
.BLK100500 .frame div.mybarcode.alert
{
	animation: blinkBorder 1s ease infinite alternate;
}
@keyframes blinkBorder
{
	0%
	{
		border:6px solid #ff0000;
	}
	100%
	{
		border:6px solid #efefef;
	}
}
.BLK100500 .frame div.mybarcode .reload
{
	margin:0 1rem;
}
.BLK100500 .frame div.mybarcode .reload img
{
	width:1.3rem;
	vertical-align:-0.2rem;
}
.BLK100500 .frame div.mybarcode #mybarcode
{
	margin:0 auto;	
	width:50%;
}
.BLK100500 .frame div.timer
{
	display:inline-block;
	margin-top:-0.2rem;
}
.BLK100500 .frame div.jst-hours
{
	display:none;
}
.BLK100500 .frame div.jst-minutes,
.BLK100500 .frame div.jst-seconds
{
	display:inline-block;
	letter-spacing:0.2rem;
}

/* ページ制御フレーム */
div.pager_panel
{
	padding:1rem 1.5rem;
	background-color:#fff;
	box-shadow: 2px 2px 4px #ccc;
	-webkit-box-shadow:2px 2px 4px #ccc;
	-webkit-appearance: none;
}

/* 抽選商品 */
.BLK100500 .frame.lottery
{
	margin-bottom:6rem;
}
.BLK100500 div.frame.lottery h1
{
	position:fixed;
	margin:0;
	z-index:10;
}
.BLK100500 .section.content
{
	margin:4rem auto 0;
	padding:2rem 2rem 1rem 2rem;
}
.BLK100500 .frame.lottery.with_barcode .section.content
{
	margin:17rem auto 0;
}
@media screen and (min-width: 517px) and (max-width: 960px)
{
	.BLK100500 .frame.lottery.with_barcode .section.content
	{
		margin:18rem auto 0;
	}
}
@media screen and (min-width: 0px) and (max-width: 516px)
{
	.BLK100500 .frame.lottery.with_barcode .section.content
	{
		margin:13.5rem auto 0;
	}
}
.BLK100500 .note
{
	margin-top:3rem;
	padding:2rem 1rem;
	background-color:#fff;
	border-radius:10px;
	box-shadow: 2px 2px 4px #ccc;
	-webkit-box-shadow:2px 2px 4px #ccc;
	-webkit-appearance: none;
	appearance: none;
}
.BLK100500 div.bar
{
	padding:0.5rem;
	font-size:1.5rem;
	color:#fff;
	text-align:center;
}
.BLK100500 div.bar.win
{
	background-color:#fc5c69;
}
.BLK100500 div.bar.used
{
	background-color:#999;
}
.BLK100500 div.bar.lose
{
	background-color:#999;
}
.BLK100500 div.element
{
	margin-bottom:2rem;
	background-color:#fff;
	border-top:solid 1px #999;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
}
.BLK100500 div.element.end
{
	background-color:#ddd;
	opacity:0.8;
}
.BLK100500 div.element div.product_name
{
	position:relative;
	padding:1rem;
	color:#000;
	font-weight:bold;
	word-break:break-all;
	background:url("/assets/theme/30/img/back.png") repeat;
	border-bottom:solid 1px #aaa;
}
.BLK100500 div.element div.product_name::before
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:#e60014;
	opacity:0.15;
}
.BLK100500 div.element.win
{
	border:solid 5px #fc5c69;
}
.BLK100500 div.element.used
{
	border:solid 5px #999;
}
.BLK100500 div.element.lose
{
	border:solid 5px #999;
}
.BLK100500 div.element.used div.product_name::before
{
	background-color:#999;
}
.BLK100500 div.element.lose div.product_name::before
{
	background-color:#999;
}
.BLK100500 div.element div.product_name p:first-of-type
{
	margin-bottom:0.5rem;
	line-height:2rem;
	font-size:1.6rem;
}
.BLK100500 div.element div.product
{
	display:table;
	table-layout:fixed;
	border-bottom:solid 1px #999;
	width:100%;
}
.BLK100500 div.element div.detail
{
	display:table-cell;
	vertical-align:top;
	padding:0.5rem 0.7rem 0.8rem 1.5rem;
	width:70%;
	border-right:dotted 2px #999;
}
.BLK100500 div.element div.detail li
{
	margin-top:0.5rem;
}
.BLK100500 div.element div.detail li:first-of-type
{
	font-size:1.5rem;
	font-weight:bold;
}
.BLK100500 div.element div.detail li p:first-of-type
{
	padding:0rem 0 0.1rem;
	width:8rem;
	font-size:0.9rem;
	text-align:center;
	color:#fff;
	background-color:#333;

	/* 背景（角丸） */
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	
}
.BLK100500 div.element div.detail li.entry
{
	font-size:1.2rem;
	color:#e60014;
}
.BLK100500 div.element div.detail li.cancel
{
	font-size:1.2rem;
	color:#555;
}
.BLK100500 div.element div.detail li.entried
{
	font-size:1.3rem;
	color:#f00;
}
.BLK100500 div.element div.image
{
	display:table-cell;
	padding:1.2rem;
	width:30%;
}
.BLK100500 div.element div.image img
{
	width:100%;
	max-width:150px;
}
.BLK100500 div.element div.image div.noimage
{
	position:relative;
	width:100%;
	height:auto;
	aspect-ratio: 4 / 3;
	background-color:#eee;
}
.BLK100500 div.element div.image div.noimage span
{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align:center;
}
.BLK100500 div.element div.entry_span
{
	border-top:solid 1px #999;
	border-bottom:solid 1px #999;
}
.BLK100500 div.element div.entry_span p
{
	padding:0.2rem;
	text-align:center;
}
.BLK100500 div.element div.barcode
{
	clear:both;
	margin:0.8rem auto;
	width:280px;
}
.BLK100500 div.element div.barcode p
{
	margin-bottom:0.5rem;
	text-align:center;
}
.BLK100500 div.element div.barcode div[id^="lotterybarcode"]
{
	margin-top:0.5rem;
	text-align:center;
}
.BLK100500 div.wait
{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#fff;
	z-index:9;
}
.BLK100500 div.wait div.message
{
	position:fixed;
	padding:1.5rem 2rem;
	width:80%;
	max-width:40rem;
	top:30%;
	left:50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	font-size:1.1rem;
	background-color:#fff;
	border:solid 5px #f86a6a;

	/* 背景（下影付き） */
	box-shadow:5px 5px 3px -2px #aaa;
	-webkit-box-shadow:5px 5px 3px -2px #aaa;
	-moz-box-shadow:5px 5px 3px -2px #aaa;

}
.BLK100500 div.wait div.message div
{
	margin:1.5rem auto 0;
	width:100px;
}