﻿@charset"UTF-8";
/* **************************************************************** *
 * @desc@ スタイル
 * @edit@ 2016/09/26
 * **************************************************************** */
body{
	background:#fffbfb;
	color:#333;
}
/* ================================================================ *
 * @desc@ レイアウト
 * ================================================================ */
#wrap{
	position:relative;
	margin:0 auto 1px;
	border-width:0 2px;
	border-style:solid;
	border-color:#fff;
	padding:800px 0 0;
	width:940px;
	background:#fff url(../img/background.jpg) top center no-repeat;
	box-shadow:0 10px 30px rgba(254,149,194,0.1);
}
#wrap:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
/* タイトル */
#wrap>h1{
	outline:none;
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	font-size:1px;
	line-height:0;
	text-indent:-9999px;
	opacity:0;
}
/* SNSボタン */
#wrap>.snsBoxCBT{
	display:table;
	margin:0 auto 20px;
}
/* 著作表記 */
#wrap>.copy{
	margin:0 auto;
	padding:30px 0 20px;
	width:600px;
	color:#666;
	font-size:1.1rem;
	line-height:1.4em;
	text-align:center;
}
#wrap>.copy span{
	display:inline-block;
	margin:0 0.5em;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#wrap{
		padding:330px 0 0;
		width:390px;
		background-size:contain;
	}
	/* タイトル */
	#wrap>h1{
		left:6px;
		top:280px;
		width:271px;
	}
	/* 著作表記 */
	#wrap>.copy{
		padding:30px 10px 20px;
		width:auto;
	}
}
/* ================================================================ *
 * @desc@ ナビ
 * ================================================================ */
#navi{
	position:absolute;
	top:705px;
	width:100%;
}
#navi ul{
	display:table;
	table-layout:fixed;
	margin:0 auto;
	padding:0;
}
#navi li{
	display:table-cell;
	margin:0;
	padding:0 5px;
	vertical-align:middle;
	text-align:center;
}
#navi li a{
	display: block;
	border-radius: 20px;
	padding: 15px 35px;
	background: rgb(220, 0, 0);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1.1em;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 1px 1px 5px rgba(245, 133, 143, 0.9);
	box-shadow: -2px -2px 6px rgb(241, 145, 175) inset;
	transition: all 0.3s;
}
#navi li a:hover {
	background: #ff0033;
	text-shadow: 1px 1px 5px #f5dddd;
	box-shadow: -2px -2px 6px rgb(250, 120, 120) inset;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#navi{
		position:fixed;
		right:-240px;
		top:60px;
		width:240px;
		transition:all 0.3s;
	}
	#navi.show{
		right:0;
	}
	#navi ul{
		display:block;
		border-top:1px solid rgba(255,148,205,0.9);
	}
	#navi li{
		display:block;
		border-bottom:1px solid rgb(207, 233, 252);;
		padding:0;
		text-align:left;
	}
	#navi li a{
		border-radius:0;
		padding:10px 30px 9px 15px;
		box-shadow:none;
	}
	#navi li a:hover{
		box-shadow:none;
	}
	/* 開閉ボタン */
	#navi>.btShow{
		position:absolute;
		left:-44px;
		top:10px;
		z-index:20000;
		margin:0;
		border-radius:6px 0 0 6px;
		padding:0;
		width:44px;
		height:40px;
		background:rgb(220, 0, 0) url(/traca/lot/resource/img/bt_sp.png) center no-repeat;
		cursor:pointer;
	}
}
/* ================================================================ *
 * @desc@ メインリード文
 * ================================================================ */
.read{
	padding:0 20px;
	color:#e90000;
	font-size:1.6rem;
	line-height:1.6em;
	font-weight:bold;
	text-shadow:1px 1px 5px rgba(11,58,122,0.2);
	text-align:center;
}
.read p{
	padding:0 0 10px;
}

.read p span{
	display:inline-block;
}

/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	.read{
		font-size:1.5rem;
		text-align:left;
	}
	.read br{
		display:none;
	}
}
/* ================================================================ *
 * @desc@ ラインナップ
 * ================================================================ */
#wrap>.lineup{
	margin:50px auto 0;
	width:800px;
}
.lineup>section{
	margin:0 0 50px;
}
/* 賞品名 */
.lineup>section>h1{
	margin:0 0 30px;
	border-radius:2em;
	padding:0.5em 1.2em 0.3em;
	background: #ff6699;
	color:#fff;
	font-size:2.2rem;
	line-height:1.3em;
	letter-spacing:0.1em;
	text-shadow: 1px 1px 5px rgba(245, 133, 143, 0.9);
	box-shadow: -2px -2px 6px rgb(241, 145, 175) inset;
}
/* 賞品画像 */
.lineup .pic{
	text-align:center;
}

.lineup .pic span {
    display: block;
    color: #F00;
    font-weight: bold;
}

.lineup .pic div{
	display:inline;

}

/* 賞品詳細 */
.lineup table{
	margin:20px auto 0;
	border:1px solid #ff3366;
	font-size:1.2rem;
	line-height:1.6em;
}
.lineup table th{
	border: 1px solid #ff3366;
	padding: 5px 15px;
	width: 4em;
	background: rgba(255, 102, 153, 0.75);
	color: #FFF;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
}
.lineup table td{
	border: 1px solid #ff3366;
	padding:5px 15px;
	color:#666;
	font-weight:normal;
}
/* 賞品詳細下、強調テキスト */
.lineup .appeal{
	margin:15px auto 0;
	font-size:1.4rem;
	line-height:1.4em;
	text-align:center;
}
.lineup .appeal p{
	display:inline-block;
	border-radius:3em;
	padding:5px 30px;
	background: rgba(255, 102, 153, 0.75);
	color:#fff;
}

span.appeal_l{
	display:block;
	font-size: 1.2em;
	font-weight: bold;
	margin:0.5em;
	text-align:center;
}
/* 賞品詳細下、注釈 */
.lineup .note{
	display:table;
	margin:0 auto;
	color:#666;
}

/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#wrap>.lineup{
		padding:0 5px;
		width:auto;
	}
	.lineup>section>h1{
		margin:0 0 30px;
		border-radius:0.4em;
		padding:0.5em 1.0em 0.4em;
		font-size:1.8rem;
		line-height:1.3em;
	}
	.lineup .pic{
		padding:0 10px;
	}
	.lineup table{
		width:100%;
	}
}
/* ================================================================ *
 * @desc@ トレカアイテムくじ詳細
 * ================================================================ */
.container_m{
	margin:80px auto 0;
	width:600px;
}
.container_m dl{
	display:table;
	table-layout:fixed;
	margin:0 0 10px;
	border-top:#ff8cb2 dotted 2px;
	width:100%;
	font-size:1.3rem;
	line-height:1.4em;
}
/* 項目名 */
.container_m dt{
	display:table-cell;
	border-left:solid 10px #ff8cb2;
	padding:5px 10px 5px 5px;
	width:12em;
	font-weight:bold;
}
/* 内容 */
.container_m dd{
	padding:5px 0 5px;
	margin:0 0 10px 0;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ表示
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	.container_m{
		margin:60px auto 0;
		padding:0 5px;
		width:auto;
	}
	/* 項目名 */
	.container_m dt{
		border-left-width:8px;
		padding:5px 15px 5px 5px;
		width:7em;
	}
	/* 内容 */
	.container_m dd{
		padding:5px 8px 5px 0;
	}
}
