﻿@charset "utf-8";
/* CSS Document */


/* import style
------------------------------------------------------------------- */
@import url('/css/mod_default.css');
@import url('/css/mod_layout.css');
@import url('/css/mod_headerfooter.css');
@import url('/css/mod_common.css');
@import url('/css/mod_others.css');

/* body
---------------------------------------------------------------------- */
body{
	color: #333;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

/* footer
---------------------------------------------------------------------- */

#footerArea {
	width: 830px;
	margin: 0 auto;
	background-image:none; background-color:#f6f6f6;
	-webkit-border-radius: 5px;  /* Safari,Google Chrome */
	-moz-border-radius: 5px;      /* Firefox12まで */
	border-radius: 5px;           /* Firefox13以降 */
}

ul.btnList {
	width: 830px;
	margin: 0 auto;
}

#eventWrapper{
	position: relative;
	background: url(../../../image/event/may2018/color/bg_all.png) repeat center top #fcf3b3;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 30px;
	padding-top:30px;
}

.contentArea{
	position: relative;
	background: #fff9ec;
	width: 840px;
	height: 100%;
	margin: 0 auto ;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border: solid 3px #e7e0af;
	box-shadow: 0 0 0 3px #afaba4;
}

.contentArea a{
	display:block;
	transition: opacity 0.6s;
}

.contentArea a:hover{
	opacity: 0.6;
}

.contentArea h2{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background: url(/image/event/may2018/color/bg_pc.png) no-repeat 24px top;
	width: 100%;
	height: 450px;
	margin-top: 20px;
}

.contentArea .get_color,.contentArea .got_color,.contentArea .not_color{
	position: absolute;
	display: inline-block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	top: 376px;
	left: 104px;
	width: 353px;
	height: 60px;
}

.contentArea .get_color a{
	background: url(/image/event/may2018/color/btn_get_pc.png) no-repeat top left;
	display: block;
	width: 100%;
	height: 100%;
}

.contentArea .got_color{
    background: url(/image/event/may2018/color/btn_got_pc.png) no-repeat top center;
}

.contentArea .not_color{
    background: url(/image/event/may2018/color/btn_not_pc.png) no-repeat top center;
}

.contentArea #notice{
	position: relative;
	background: #ece6c3;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	width: 620px;
	margin: 16px auto;
	padding: 16px 32px 16px 48px;
	color: #6d665a;
}

.contentArea #notice:before{
	content: "※";
	position: absolute;
	top: 16px;
	left: 32px;
}

.contentArea #notice a{
	text-align: right;
	text-decoration: underline;
}

.contentArea #notice a:before{
	content: ">>";
}

.contentArea #gacha{
	text-align: center;
	padding-top: 8px;
}

.contentArea #gacha img{
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border: solid 3px #fff;
	box-shadow: 0 0 0 3px #ece6c3;
}

.contentArea .go_color{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background: url(/image/event/may2018/color/btn_go_pc.png) no-repeat left center;
	width: 502px;
	height: 64px;
	margin: 16px auto 32px;
}
