@charset "UTF-8";

/* -------------------------------------------------------------
作成日: 2012.06.19
最終更新日: 2012.07.24
作成者: TS
最終編集者: TS

scratch/category.css
スクラッチページに関する指定

目次 
-xx行目 指定
-xx行目 指定
------------------------------------------------------------- */

#about,
#costume,
#howto,
#ticket {
	margin-bottom:40px;
}

#bannerArea {
	margin-bottom:20px;
}

#bannerArea .scratchBanner {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_bg.png) no-repeat center bottom;
}
.scratchBanner {zoom:1;}
.scratchBanner:after {
	content: "";
	display: block;
	clear: both;}

#bannerArea .scratchBanner a.link-ac {
	margin-top:2px;
	display:block;
	float:left;
}

#bannerArea .scratchBanner a.link-gold {
	margin-top:2px;
	display:block;
	float:left;
}

#bannerArea .scratchBanner a:hover img {
	visibility:hidden;
}

a.link-upper {
	background:url(../../image/btn/link_scratchtop.png) no-repeat center top;
	width: 200px;
	height: 24px;
	position:absolute;
	text-indent: -9999px;
	top:17px;
	left:478px;
}

a.link-upper:hover {
	background:url(../../image/btn/link_scratchtop.png) no-repeat center bottom;
}

body#catalog-scratch-fun h3,
body#catalog-scratch-ac h3,
body#catalog-scratch-gold h3 {
	height:50px;
}

#bannerArea,
body#catalog-scratch-fun h3,
body#catalog-scratch-ac h3,
body#catalog-scratch-gold h3,
body#catalog-scratch-costume h3 {
	clear:both;
}

ul#tab-navigation {
	margin:15px 0 20px;
}
ul#tab-navigation {zoom:1;}
ul#tab-navigation:after {
	content: "";
	display: block;
	clear: both;}

#tab-navigation li {
	width:320px;
	height:50px;
	background:url(../image/background/tab.png) no-repeat left top;
	text-align:center;
	font-weight:bold;
	display:block;
	float:left;
}

#tab-navigation li p {
	height:30px;
	margin:0;
	padding-top:20px;
}

#tab-navigation li a {
	width:320px;
	height:30px;
	padding-top:20px;
	background:url(../image/background/tab.png) no-repeat center top;
	color:#ffffff;
	display:block;
}

#tab-navigation li a:hover {
	background:url(../image/background/tab.png) no-repeat right top;
	color:#ffffff;
	text-decoration:none;
}

#backnumber-select {
	width:640px;
	height:40px;
	margin-top:20px;
	background:url(../image/background/backnumber.png) no-repeat center top;
}

#backnumber-select select {
	margin:10px 0 0 180px;
}

p.btnGold,
p.btnAc{
	margin-top:10px;
}

p.btnGold a,
p.btnAc a{
	width:350px;
	height:30px;
	display:block;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	line-height:30px;
	margin:0 0 0 290px;
}

p.btnGold a{
	background:url(../image/btn/gold_sub.png) no-repeat center top;
}

p.btnGold a:hover{
	background:url(../image/btn/gold_sub.png) no-repeat center bottom;
}

p.btnAc a{
	background:url(../image/btn/ac_sub.png) no-repeat center top;
}

p.btnAc a:hover{
	background:url(../image/btn/ac_sub.png) no-repeat center bottom;
}

ul.arrowList {
    margin: 10px 0 0px;
	padding-bottom:10px;
}

/* -------------------------------------------------------------
#lineup
------------------------------------------------------------- */

#lineup ul {
	width:620px;
	margin:20px auto;
}

#lineup ul li {
	height:90px;
	margin:0 auto 10px;
}
#lineup ul li#link-fun {
	background:url(../image/banner/link_banner_bg.png) no-repeat center top;
}
#lineup ul li#link-ac {
	background:url(../image/banner/link_banner_bg.png) no-repeat center center;
}
#lineup ul li#link-gold {
	background:url(../image/banner/link_banner_bg2.png) no-repeat center bottom;
}

#lineup ul li a {
	display:block;
}

#lineup ul li a:hover img {
	visibility:hidden;
}

/* -------------------------------------------------------------
#costume
------------------------------------------------------------- */

body#catalog-scratch #costume {
	height:244px;
	background:url(../image/background/costume.jpg) no-repeat center bottom;
	position:relative;
}
body#catalog-scratch-ac #costume,
body#catalog-scratch-gold #costume {
	height:70px;
	margin:20px 0 0;
	background:url(../image/background/costume_s.jpg) no-repeat center top;
	position:relative;
}

#costume p {
	width:0;
	height:0;
	margin:0;
	padding:0;
	text-indent:-9999px;
	line-height:0;
	font-size:0;
}

#costume a {
	width:200px;
	height:50px;
	background:url(../image/btn/costumecatalog_bg.png) no-repeat center top;
	display:block;
	position:absolute;
}
body#catalog-scratch #costume a {
	left:220px;
	bottom:25px;
}
body#catalog-scratch-ac #costume a,
body#catalog-scratch-gold #costume a {
	left:420px;
	top:10px;
}

#costume a:hover img {
	visibility:hidden;
}

/* -------------------------------------------------------------
#howto
------------------------------------------------------------- */

#howto dl {
	background:#cbdded;
	margin-top:20px;
	padding:20px 20px 0px;
}

#howto dt {
	height:22px;
	margin:0 auto 20px;
	padding:0 0 0 12px;
	background:url(../../image/headline/h4.gif) no-repeat left center;
	border-bottom:solid 1px #5682bc;
	font-size:14px;
	font-weight:bold;
	color:#293e5a;
}

#howto dd {
	padding-bottom:60px;
	background:url(../../image/icon/flow.gif) no-repeat center 240px;
}

#howto dd.lastchild {
	padding-bottom:20px;
	background:none;
}

#howto dd {zoom:1;}
#howto dd:after {
	content: "";
	display: block;
	clear: both;}

#howto dd img {
	margin-right:20px;
	float:left;
}
#howto dd p.attentionMark {
	padding-left:412px;
}

/* -------------------------------------------------------------
#ticket
------------------------------------------------------------- */

#ticket {
	height:250px;
	background:url(../image/background/ticket.jpg) no-repeat right bottom;
}
#ticket p {
	width:280px;
}


/* -------------------------------------------------------------
#lobbyaction
------------------------------------------------------------- */
ul#lobbyactionList{
	width: 638px;
	margin: 15px 0 0;
	padding: 0 0 0 1px;
	background-color:#a1c7e5;
	clear:both;
	overflow:hidden;
	border-top:1px solid #a1c7e5;
}

ul#lobbyactionList li{
	width: 302px;/*318px*/
	margin:0 1px 0 0;
	padding:8px;
	float:left;
	background-color:#FFFFFF;
	border-bottom:1px solid #a1c7e5;
}

ul#lobbyactionList li img.new {
	margin: 0 5px 0 0;
	vertical-align:-0.2em;
}

ul#lobbyactionList li img.revival {
	margin: 0 5px 0 0;
	vertical-align:-0.2em;
}

/* -------------------------------------------------------------
#voice
------------------------------------------------------------- */

body#catalog-scratch-voice #voiceSelect {
	background:url(../image/background/voice_btn.png) no-repeat center top;
	height:40px;
	width: 640px;
	margin-top: 20px;
}

table.voice {
	width: 640px;
	margin: 15px 0 0;
	padding: 0;
}

table.voice th {
	font-weight: bold;
	text-align: center;
	color: #0e2c56;
	background-color: #ceebe3;
}

table.voice th,
table.voice td {
	border-color: #a1c7e5;
}

table.voice th {
	width: 50%;	
}

table.voice th.voiceBg {
	width: 230px;
}

table.voice tr td img.new {
	margin: 0 5px 0 0;
	vertical-align:-0.2em;
}

table.voice tr td span {
	color:#e70121;
	margin:0 0 0 5px;
}

div#voiceSelect ul#btnList {
	height: 30px;
	width: 630px;
	padding: 5px;
}

div#voiceSelect ul#btnList li {
	width: 153px;
	height: 30px;
	float: left;
	text-indent: -9999px;
}

div#voiceSelect ul#btnList li a {
	width: 153px;
	height: 30px;
	display: block;
}

div#voiceSelect ul#btnList li#womanBtn {
	background:url(../image/btn/voice_btn.png) no-repeat 0 0; 		
}

div#voiceSelect ul#btnList li#manBtn {
	background:url(../image/btn/voice_btn.png) no-repeat -153px 0;
	margin-left: 6px;	
}
	
div#voiceSelect ul#btnList li#cwomanBtn {
	background:url(../image/btn/voice_btn.png) no-repeat -306px 0;
	margin-left: 6px;	
}	

div#voiceSelect ul#btnList li#cmanBtn {
	background:url(../image/btn/voice_btn.png) no-repeat -459px 0;	
	margin-left: 6px;	
}

div#voiceSelect ul#btnList li#womanBtn a:hover,
div#voiceSelect ul#btnList li#womanBtn a.active {
	background:url(../image/btn/voice_btn.png) no-repeat 0 -30px; 		
}

div#voiceSelect ul#btnList li#manBtn a:hover,
div#voiceSelect ul#btnList li#manBtn a.active {
	background:url(../image/btn/voice_btn.png) no-repeat -153px -30px;
}
	
div#voiceSelect ul#btnList li#cwomanBtn a:hover,
div#voiceSelect ul#btnList li#cwomanBtn a.active {
	background:url(../image/btn/voice_btn.png) no-repeat -306px -30px;
}	

div#voiceSelect ul#btnList li#cmanBtn a:hover,
div#voiceSelect ul#btnList li#cmanBtn a.active {
	background:url(../image/btn/voice_btn.png) no-repeat -459px -30px;	
}

div#voiceCategory ul#btnCategoryList {
	height: 50px;
	width: 640px;
	padding: 5px 0;
}

div#voiceCategory ul#btnCategoryList li {
	width: 208px;
	height: 50px;
	float: left;
	text-indent: -9999px;
}

div#voiceCategory ul#btnCategoryList li a {
	width: 208px;
	height: 50px;
	display: block;
}

div#voiceCategory ul#btnCategoryList li#indexBtn {
	background:url(../image/btn/voice_category.png) no-repeat 0 0;
}

div#voiceCategory ul#btnCategoryList li#addBtn {
	background:url(../image/btn/voice_category.png) no-repeat -208px 0;
	margin-left: 8px;}
	
div#voiceCategory ul#btnCategoryList li#otherBtn {
	background:url(../image/btn/voice_category.png) no-repeat -416px 0;
	margin-left: 8px;}	

div#voiceCategory ul#btnCategoryList li#indexBtn a:hover,
div#voiceCategory ul#btnCategoryList li#indexBtn a.active {
	background:url(../image/btn/voice_category.png) no-repeat 0 -50px; 		
}

div#voiceCategory ul#btnCategoryList li#addBtn a:hover,
div#voiceCategory ul#btnCategoryList li#addBtn a.active {
	background:url(../image/btn/voice_category.png) no-repeat -208px -50px;
}
	
div#voiceCategory ul#btnCategoryList li#otherBtn a:hover,
div#voiceCategory ul#btnCategoryList li#otherBtn a.active {
	background:url(../image/btn/voice_category.png) no-repeat -416px -50px;
}	



/* 1st anniversary scratch */
#bannerArea .scratchBanner1stAnniv {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_1stanniv_bg.png) no-repeat center bottom;
}
.scratchBanner1stAnniv {zoom:1;}
.scratchBanner1stAnniv:after {
	content: "";
	display: block;
	clear: both;}
#bannerArea .scratchBanner1stAnniv a.link-ac-accessory,
#bannerArea .scratchBanner1stAnniv a.link-ac-support {
	margin-top:2px;
	display:block;
	float:left;
}
#bannerArea .scratchBanner1stAnniv a:hover img {
	visibility:hidden;
}

/* 20140101 scratch */
#bannerArea .scratchBanner20140101 {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_20140101_bg.png) no-repeat center bottom;
}
.scratchBanner20140101 {zoom:1;}
.scratchBanner20140101:after {
	content: "";
	display: block;
	clear: both;}
#bannerArea .scratchBanner20140101 a.link-ac-20140101,
#bannerArea .scratchBanner20140101 a.link-gold-20140101 {
	margin-top:2px;
	display:block;
	float:left;
}
#bannerArea .scratchBanner20140101 a:hover img {
	visibility:hidden;
}

/* 3rd ma scratch */
#bannerArea .scratchBanner3rdMA {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_3rdma_bg.png) no-repeat center bottom;
}
.scratchBanner3rdMA {zoom:1;}
.scratchBanner3rdMA:after {
	content: "";
	display: block;
	clear: both;}
#bannerArea .scratchBanner3rdMA a.link-ac-accessory,
#bannerArea .scratchBanner3rdMA a.link-ac-support {
	margin-top:2px;
	display:block;
	float:left;
}
#bannerArea .scratchBanner3rdMA a:hover img {
	visibility:hidden;
}

/* 20160101 scratch */
#bannerArea .scratchBanner20160101 {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_20160101_bg.png) no-repeat center bottom;
}
.scratchBanner20160101 {zoom:1;}
.scratchBanner20160101:after {
	content: "";
	display: block;
	clear: both;}
#bannerArea .scratchBanner20160101 a.link-ac-20160101,
#bannerArea .scratchBanner20160101 a.link-gold-20160101 {
	margin-top:2px;
	display:block;
	float:left;
}
#bannerArea .scratchBanner20160101 a:hover img {
	visibility:hidden;
}

/* 3rd ma scratch */
#bannerArea .scratchBannerFesta2016 {
	width:640px;
	margin-bottom:10px;
	background:url(../image/btn/btn_festa2016_bg.png) no-repeat center bottom;
}
.scratchBannerFesta2016 {zoom:1;}
.scratchBannerFesta2016:after {
	content: "";
	display: block;
	clear: both;}
#bannerArea .scratchBannerFesta2016 a{
	margin-top:2px;
	display:block;
	float:left;
}
#bannerArea .scratchBannerFesta2016 a:hover img {
	visibility:hidden;
}