@charset "utf-8";
/* CSS Document */

/* core	================================================	*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img { -ms-interpolation-mode: bicubic; }

ol, ul {
	list-style: none;
}

br{
	letter-spacing:0;
}

.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.listhead {
	margin:0px !important;
}

body {
	font-family: verdana,"ＭＳ Ｐゴシック",sans-serif,"ヒラギノ角ゴ Pro W6" ;
	background:#000;
	
	font-size:12px;
	line-height:1.5em;
	
	padding-bottom:30px;
	color:#666666;
}

a {
	color:#0033cc;
}

#whiteWrapper {
	background:#FFF;
}

#grayWrapper {
	background:#f0f0f0;
}

#header {
	background:url(../image/common/header/bg_headerLoop.gif);
	background-repeat:repeat-x;
	padding-top:10px;
	padding-bottom:1px;
	border-bottom:solid #8d9097 1px;
}

#headerWrapper {
	min-width:860px;
	background:url(../sao/image/common/header/bg_header.gif);
	background-position:top center;
	background-repeat:no-repeat;
}

#headerContents {
	width:840px;
	margin:0px auto;
	position:relative;
	padding-top:91px;
	padding-left:20px;
}

#headerContents h1 {
	position:absolute;
	left:10px;
	top:22px;
}

#btnHowtoPlay {
	position:absolute;
	left:505px;
	top:36px;
}

#btnMyPage_head {
	position:absolute;
	left:625px;
	top:37px;
}

#mainArea {
	background:url(../sao/image/common/body/bg_underContents.gif);
	background-repeat:repeat-x;
	
	padding-top:22px;
	padding-bottom:22px;
}

.mainContentsArea {
	width:860px;
	margin:0px auto;
	background:url(../sao/image/common/body/areaFoot.png);
	background-position:bottom left;
	background-repeat:no-repeat;
	padding-bottom:8px;
}

.mainContentsHead {
	position:relative;
}

.captionBtn {
	position:absolute;
	right:15px;
	top:12px;
	
	cursor:pointer;
}

.mainContentsBody {
	width:840px;
	background:#FFF !important;
	padding:0px 10px;
}


#footer {
	padding-top:20px;
	color:#fff;
	text-align:center;
}

/*==========================	modules	========================================*/
/* unLoginNavigation */
#unLoginNavigation {
	margin-left:-20px;
	padding:10px 0px;
	*margin-bottom:10px;
}

#unLoginNavigation p {
	float:left;
	margin-left:10px;
}

/* logOut */
#btnLogout {
	position:absolute;
	left:755px;
	top:37px;
}

/* loginForm */
#loginForm {
	width:330px;
	height:41px;
	
	position:absolute;
	left:518px;
	top:15px;
}

#loginForm #captionNickName {
	position:absolute;
	left:1px;
	top:0px;
}

#loginForm #captionPassWord {
	width:156px;
	height:20px;
	
	position:absolute;
	left:173px;
	top:0px ;
}

#loginForm #btnLogin {
	width:156px;
	height:20px;
	
	position:absolute;
	left:171px;
	top:47px;
}

#loginForm input {

}

#loginForm #formUserName {
	position:absolute;
	left:0px;
	top:18px;
	border:1px solid #7f7f7f;
}

#loginForm #formUserPass {
	position:absolute;
	left:172px;
	top:18px;
	border:1px solid #7f7f7f;
}

/* ListUtils */
.listItem {
	width:840px;
	height:44px;
	line-height:44px;
	border-bottom:1px dotted #adadad;
}

.listItem dd {
	float:left;
}

.listItem dt {
	float:left;
}

.listItem p {
	float:left;
}

.arrowed {
	width:800px;
	padding-right:40px;
	background:url(../sao/image/common/bullet/arrowRight.gif);
	background-position:825px center;
	background-repeat:no-repeat;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* mod QuestList */
.questListCaption {
	width:100%;
	color:#999 !important;
	font-size:10px;
	padding-top:10px;
}

.questListCaption p {
	float:left;
}

.questListCaptionName {
	color:#999 !important;
	width:225px !important;
	padding:0px !important;
	font-weight:normal !important;
}

.questListCaptionPoint {
	width:80px;
	text-align:center;
}

.questListCaptionDetail {
	margin-left:10px;
	width:525px;
}


.questListName {
	padding-left:25px;
	color:#0066cc;
	font-weight:bold;
	width:200px;
	
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.questListName span {
	color:#ff3434;
	font-size:10px;
	font-weight:normal;
	margin-left:10px;
}

.questListPoint {
	width:80px;
	text-align:center;
}

.questListDetail {
	margin-left:10px;
	width:480px;
	
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.gradeA {
	background:url(../sao/image/common/bullet/bullet_gradeA.gif);
	background-repeat:no-repeat;
	background-position:0px 12px;
}

.gradeB {
	background:url(../sao/image/common/bullet/bullet_gradeB.gif);
	background-repeat:no-repeat;
	background-position:0px 12px;
}

.gradeC {
	background:url(../sao/image/common/bullet/bullet_gradeC.gif);
	background-repeat:no-repeat;
	background-position:0px 12px;
}

/* mod QuestDetail */
#questDetail {
	padding-top:25px;
	padding-bottom:25px;
}

#questDetailName {
	color:#0066cc;
	font-size:16px;
	font-weight:bold;
}

#questDetailPoint {
	font-size:10px;
}

#questDetailText {
	margin-top:20px;
	
	background:url(../sao/image/common/body/questDetail/captionDetail.gif);
	background-repeat:no-repeat;
	padding-top:15px;
}

#questDetailLimit {
	margin-top:18px;
	
	background:url(../sao/image/common/body/questDetail/bg_codeDayLimit.gif);
	background-repeat:no-repeat;
	width:600px;
	height:29px;
	line-height:29px;
	padding-left:170px;
	
	color:#990000;
	font-weight:bold;
}

#questDetailCleard {
	margin-top:18px;
	height:29px;
	line-height:29px;
	
	color:#990000;
	font-weight:bold;
}

#questDetailPrize {
	margin-top:18px;
	
	background:url(../sao/image/common/body/questDetail/bg_questPrize.gif);
	width:770px;
	height:94px;
	position:relative;
}

#questDetailPrize:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

#questDetailSwordIcon {
	position:absolute;
	left:15px;
	top:15px;
}

#questDetailSwordName {
	position:absolute;
	left:98px;
	top:30px;
	padding-top:20px;
	
	color:#000;
	font-weight:bold;
	
	background:url(../sao/image/common/body/questDetail/captionPrize.gif);
	background-repeat:no-repeat;
}

#questDetailclearCode {
	margin-top:20px;
	cursor:pointer;
}

#questDetailQuestEnd {
	width:305px;
	margin:0px auto;
	margin-top:20px;
}

.codeEnd {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}


.gradeAL {
	background:url(../sao/image/common/bullet/bullet_gradeAL.gif);
	background-repeat:no-repeat;
	background-position:3px 20px;
	padding-left:60px;
}

.gradeAL {
	background:url(../sao/image/common/bullet/bullet_gradeBL.gif);
	background-repeat:no-repeat;
	background-position:3px 20px;
	padding-left:60px;
}

.gradeAL {
	background:url(../sao/image/common/bullet/bullet_gradeCL.gif);
	background-repeat:no-repeat;
	background-position:3px 20px;
	padding-left:60px;
}

/* mod RankList */
.rankListCaption {
	width:100%;
	color:#999 !important;
	font-size:10px;
	padding-top:10px;
}

.rankListCaption p {
	float:left;
}

.rankListRank {
	width:40px;
	padding-left:10px;
}

.rankListName {
	width:100px;
}

.rankListPoint {
	width:80px;
	text-align:center;
}

.rankListJob {
	width:130px;
	text-align:center;
}

.rankListSwordName {
}

.rankName {
	font-weight:bold;
	color:#0066cc;
	width:140px;
}

.rankName span {
	display:inline-block;
	width:40px;
	text-align:center;
	color:#000;
}

.rankPoint {
	width:80px;
	text-align:center;
}

.rankJob {
	width:130px;
	text-align:center;
}

.rankSword {
	position:relative;
	padding-left:30px;
	margin-left:10px;
}

.rankSword img {
	position:absolute;
	top:12px;
	left:0px;
}

/* mod utilList */
.utilListDate {
	width:100px;
}

.utilListDetail {
}

.utilListDetail span {
	font-weight:bold;
	color:#0066cc;
}

/* mod UserMenu */
#userPanel {
	margin-left:-20px;
	margin-bottom:20px;
	padding:20px 0px;
	position:relative;
	color:#000;
}

.fullPanel {
	height:298px;
}

.miniPanel {
	height:160px;
}

.boy {
	background:url(../sao/image/common/mypage/silhouetteBoy.gif);
	background-repeat:no-repeat;
	background-position:525px 20px;
}

.girl {
	background:url(../sao/image/common/mypage/silhouetteGirl.gif);
	background-repeat:no-repeat;
	background-position:525px 20px;
}

#userPanel #userMenu {
	position:absolute;
	left:0px;
	top:30px;
	
	background:url(../sao/image/common/mypage/bg_menuarea.gif);
	width:182px;
	height:142px;
	padding-top:7px;
	padding-left:13px;
	
	line-height:0px;
}

#userPanel #userMenu li {
	width:167px;
	*height:27px;
	border-bottom:1px solid #cacaca;
	cursor:pointer;
}

#userPanel #userInfo {
	position:absolute;
	left:215px;
	top:40px;
	width:298px;
	font-weight:bold;
}

#userPanel #textUserName {
	background:url(../sao/image/common/mypage/captionName.gif);
	background-repeat:no-repeat;
	padding-top:12px;
	
	font-size:30px;
	height:40px;
	line-height:40px;
	
	border-bottom:1px solid #000;
}

#userPanel #userPoints {
	height:32px;
	
	background:url(../sao/image/common/mypage/captionPoint.gif);
	background-repeat:no-repeat;
	background-position:0px 8px;
	padding-left:128px;
	padding-top:0px;
	
	border-bottom:1px solid #000;
}

#userPanel #userPoints p {
	float:left;
}


#userPanel #textUserPoint {
	height:32px;
	line-height:32px;
	width:65px;
	text-align:right;
	font-size:14px;
}

#userPanel #btnUserPrize {
	margin-left:5px;
	margin-top:4px;
}

#userPanel #userJob {
	background:url(../sao/image/common/mypage/captionJob.gif);
	background-repeat:no-repeat;
	background-position:0px 5px;
	padding-top:17px;
	height:30px;
	line-height:30px;
	font-size:16px;
}

#userPanel #userStatus {
	position:absolute;
	left:0px;
	top:204px;
}

#userPanel #userStatusList li {
	height:16px;
	line-height:16px;
	padding-left:75px;
	margin-top:5px;	
}

#userPanel #userStatusList li div {
	float:left;
}

#userPanel #userStatusList li .statusPoint {
	width:50px;
	text-align:right;
}

#userPanel #userStatusList li .gageBase {
	margin-top:3px;
	margin-left:5px;
	
	width:178px;
	height:10px;
	border:1px solid #CCC;
}

#userPanel #userStatusList li .gage {
	background:url(../sao/image/common/mypage/bgGage.gif);
	height:10px;
}

#userPanel #userStatusList li.STR {
	background:url(../sao/image/common/mypage/captionStr.gif);
	background-repeat:no-repeat;
}

#userPanel #userStatusList li.AGI {
	background:url(../sao/image/common/mypage/captionAgi.gif);
	background-repeat:no-repeat;
}

#userPanel #userStatusList li.VIT {
	background:url(../sao/image/common/mypage/captionVit.gif);
	background-repeat:no-repeat;
}

#userPanel #userStatusList li.INT {
	background:url(../sao/image/common/mypage/captionMag.gif);
	background-repeat:no-repeat;
}

#userPanel #userStatusList li.LUC {
	background:url(../sao/image/common/mypage/captionRuck.gif);
	background-repeat:no-repeat;
}

#userPanel #userSwords {
	position:absolute;
	left:340px;
	top:220px;
}

#userPanel #swordName {
	position:absolute;
	left:85px;
	top:15px;
	
	background:url(../sao/image/common/mypage/captionExip.gif);
	background-repeat:no-repeat;
	
	width:200px;
	font-size:16px;
	font-weight:bold;
	
	padding-top:20px;
}

#userPanel #userRank {
	position:absolute;
	left:655px;
	top:100px;
}

#userPanel #userRankMini {
	position:absolute;
	left:655px;
	top:60px;
}

#userPanel #userRankNo {
	background:url(../sao/image/common/mypage/captionRank.gif);
	background-repeat:no-repeat;
	padding-top:22px;
	width:175px;
}

#userRankNo li {
	float:left;
	margin-left:4px;
}

#userPanel #btnRankList {
	position:absolute;
	left:0px;
	top:115px;
}

/* mod SwordList */
#swordListNavigation {
	margin-left:20px;
	padding-top:12px;
}

#swordListNavigation li {
	float:left;
	margin-left:20px;
	height:30px;
	overflow:hidden;
	cursor:pointer;
}

#swordListNavigation li:hover img {
	margin-top:-30px;
}

#swordListNavigation li.active img {
	cursor:default;
	margin-top:-30px;
}


.swordList {
	padding-left:5px !important;
	padding-bottom:10px;
}

.swordListItem {
	width:200px;
	height:57px;
	
	margin-left:10px;
	margin-top:10px !important;
	
	background:url(../sao/image/common/body/swordList/bgSwordListItem.gif);
	background-repeat:no-repeat;
	
	float:left;
}

.swordListItem:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

.swordListItem dt {
	float:left;
	position:relative;
}

.swordListItem dt img {
	position:absolute;
	left:11px;
	top:8px;
}

.swordListItem dd {
	float: left;
	
	width:130px;
	padding-left:60px;
	
	height:57px;
	line-height:57px;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	
	color:#000;
	font-size:10px;
	font-weight:bold;
}

/* mod Prize List */
.captionPrizeList p {
	float:left;
	font-size:10px;
	margin-top:10px;
	color:#999999;
}

.captionPrizeListPoint {
	width:100px;
}

.iconPrize {
	margin-top:5px;
	margin-left:5px;
	float:right;
}

/* mod PopPanel-S */
#popWindow {
	z-index:5;
	width:100%;
	
	position:absolute;
	left:0px;
	top:0px;
}

#popBG {
	width:100%;
	height:100%;
	
	background:#000;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

#popPanel {
	position:fixed;
	left:0px;
	top:0px;
	width:480px;
}

#panelHead_s {
	background:url(../sao/image/common/panel/panelHead_s.gif);
	width:480px;
	height:22px;
}

#panelFoot_s {
	background:url(../sao/image/common/panel/panelFoot_s.gif);
	width:480px;
	height:22px;
}

#panelBody_s {
	text-align:center;
	background:url(../sao/image/common/panel/panelBody_s.gif);
}

#panelHead_m {
	background:url(../sao/image/common/panel/panelHead_m.gif);
	width:560px;
	height:22px;
}

#panelFoot_m {
	background:url(../sao/image/common/panel/panelFoot_m.gif);
	width:560px;
	height:22px;
}

#panelBody_m {
	width:560px;
	text-align:center;
	background:url(../sao/image/common/panel/panelBody_m.gif);
}

#btnPanelClose {
	margin-top:20px;
	cursor:pointer;
}

/* swordInfo */
#popSwordName {
	width:295px;
	margin:0px auto;
	margin-top:20px;
	text-align:left;
}

#popSwordName dt {
	float:left;
}

#popSwordName dd {
	display:inline-block;
	/display: inline;
	/zoom: 1;
	width:220px;
	margin-left:10px !important;
	font-size:14px;
	font-weight:bold;
	color:#000;
	margin-top:5px;
}


#popSwordDetail {
	margin-top:10px;
	padding:0px 30px;
}

/* jobInfo */
#popJobName {
	margin-top:20px;
}

#popJobName dt {
	color:#000;
	font-size:14px;
	font-weight:bold;
}

#popJobName dd {
	margin-top:5px;
	padding:0px 30px;
}

/* equip */
#btnEquip {
	cursor:pointer;
	margin-top:20px;
}

#txtEquipInfo {
	color:#F00;
	font-weight:bold;
	margin-top:10px;
}

#btnEquipArea {
	margin-top:20px;
}

#btnEquipOK {
	cursor:pointer;
}

#btnEquipCancel {
	margin-left:20px;
	cursor:pointer;
}

#equipNewJob {
	font-size:14px;
}

#equipNewJobArea {
	width:461px;
	margin:0px auto;
	margin-top:20px;
}

#equipNewJobHead {
	background:url(../sao/image/common/panel/newJobHead.gif);
	width:461px;
	height:6px;
}

#equipNewJobBody {
	color:#000;
	width:461px;
	background:url(../sao/image/common/panel/newJobBody.gif);
}

#equipNewJobBody dt {
	font-size:14px;
	font-weight:bold;
}

#equipNewJobBody dd {
	margin-top:5px;
	padding:0px 10px;
}

#equipNewJobFoot {
	background:url(../sao/image/common/panel/newJobFoot.gif);
	width:461px;
	height:6px;
}

#btnMyPage {
	margin-top:20px;
}

.equipRed {
	color:#F00;
}

.equipBlue {
	color:#09F;
}

/* clearCode */
#popClearQuest {
	display:inline-block;
	/display: inline;
	/zoom:1;
	margin:0px auto;
	margin-top:20px;
	min-height:45px;
	text-align:left;
	padding-top:5px;
}

#popClearQuestName {
	color:#0066cc;
	font-size:16px;
	font-weight:bold;
}

#popClearQuest dt {
	display:inline;
}

#popClearQuest dd {
	display:inline;
	text-align:left;
}

#textClearCodeCaption {
	color:#F00;
	font-weight:bold;
}

#fieldClearCode {
	margin-top:10px;
}

#btnCheckClearCode {
	margin-top:20px;
}

#clearGetPoint {
	margin-top:10px;
	font-weight:bold;
	color:#000;
}

#btnSetClearPoint {
	margin-top:20px;
}

#ownPoint {
	color:#F00;
}

/* setParam */
#txtStatusInfoArea {
	margin-top:10px;
}

#setPointGageArea #userStatusList {
	width:410px;
	margin:0px auto;
	margin-top:20px;
}

#setPointGageArea #userStatusList li {
	height:20px;
	line-height:20px;
	padding-left:75px;
	margin-top:15px;	
}

#setPointGageArea #userStatusList li div {
	float:left;
}

#setPointGageArea #userStatusList li.STR {
	background:url(../sao/image/common/mypage/captionStr.gif);
	background-repeat:no-repeat;
}

#setPointGageArea #userStatusList li.AGI {
	background:url(../sao/image/common/mypage/captionAgi.gif);
	background-repeat:no-repeat;
}

#setPointGageArea #userStatusList li.VIT {
	background:url(../sao/image/common/mypage/captionVit.gif);
	background-repeat:no-repeat;
}

#setPointGageArea #userStatusList li.INT {
	background:url(../sao/image/common/mypage/captionMag.gif);
	background-repeat:no-repeat;
}

#setPointGageArea #userStatusList li.LUC {
	background:url(../sao/image/common/mypage/captionRuck.gif);
	background-repeat:no-repeat;
}

#setPointGageArea #userStatusList li .statusPoint {
	width:50px;
	text-align:right;
	height:20px;
	line-height:20px;
}

#setPointGageArea #userStatusList li .gageBase {
	margin-top:5px;
	margin-left:5px;
	
	width:180px;
	height:10px;
	border:1px solid #CCC;
}

#setPointGageArea #userStatusList li .gage {
	background:url(../sao/image/common/mypage/bgGage.gif);
	height:10px;
	float:left;
}

#setPointGageArea #userStatusList li .glowgage {
	background:url(../sao/image/common/mypage/bgGlowGage.gif);
	height:10px;
	float:left;
}

#setPointGageArea #userStatusList li .growUpPointPanel {
	float:left;
}

#setPointGageArea #userStatusList li .setPointPanel {
	width:40px;
	height:20px;
	line-height:20px;
	border:1px solid #CCC;
	margin-left:5px;
}

.statusSetArrow {
	/display:inline;
	/zoom:1;
	
	width:35px;
	height:22px;
	margin-left:5px;
}

.statusSetArrow p {
	margin-bottom:6px;
}

#btnCheckParam {
	margin-top:20px;
}

#btnSetResetParam {
	margin:0px auto;
	margin-top:20px;
	width:410px;
	display:none;
}

#btnSetResetParam p {
	float:left;
}

#btnSendStatus {
	margin-left:10px;
}

.growUpPointPanel {
	width:40px;
	color:#333399;
	font-weight:bold;
	float:left;
}

#captionGrowUp {
	margin-top:20px;
}

#paramNewJob {
	margin-top:10px;
	font-weight:bold;
	font-size:14px;
	color:#F00;
}

#paramChooseJob {
	list-style-type:disc;
	list-style-position:inside;
	text-align:left;
	
	width:200px;
	margin:0px auto;
	margin-top:10px;
}

#paramChooseJob li {
	color:#000;
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
	margin-top:10px;
}

#paramChooseJob li:hover {
	color:#F00;
}

.paramNotice {
	clear:both;
	color:#F00;
	font-weight:bold;
	margin-top:20px;
	display:none;
}

/* howto */
#howtoPlay {
	margin-top:20px;
	padding-bottom:30px;
	color:#000;
}

#howtoPlay h3 {
	margin-top:30px;
}

#howtoPlay p {
	margin-top:10px;
	margin-left:25px;
}

.attention {
	color:#F30;
}

.attention span {
	font-weight:bold;
}

.btnHowtoClose {
	width:60px;
	margin:0px auto;
}

div.formUnit{
	margin:30px 0 0 20px;
}

div.formUnit .red{
	color:#ff0000;
}

div.formUnit td{
	vertical-align:top;
}

div.formUnit td.left{
	padding:0 30px 20px 0;
}
div.formUnit td.right{
	padding:0 0 20px 0;
}

div.formUnit p.submitBtn{
	margin-left:180px !important;
}

div.formUnit input.submit,div.formUnit input.clear{
	width:80px;
}

.que{
	color:#0066cc;
}

/* utils */
.alphaBtn {
	cursor:pointer;
}

.alphaBtn:hover {
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

/* margin */
.noborder {
	border:none !important;
}
.mt20 { margin-top:20px; }