﻿@charset "UTF-8";
body {
	background:#fff url(http://ragnarokonline.gungho.jp/template/images/background/bg_news.jpg) top center no-repeat;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, verdana, sans-serif;
	font-size:0.75em;/*12px*/
	line-height: 1.4;
	color:#666;
}
body#lineup {
	background-image: none;
}

hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #ccc;
	height: 1px;
}
h3, h4, h5, h6 { margin:30px 0 10px 0; }
#main3column h4 {
	background:url(/common-wr/images/bg_h4.gif) no-repeat;
	height:28px;
	line-height:28px;
	padding-left:10px;
}
h5 {
	padding-left:10px;
	height:23px;
	line-height:24px;
	border:#ccc 1px solid;
	border-bottom:#2ea8e5 2px solid;
}
.mb15{
	margin:0 0 15px 0;
}

/*linkColor
*******************************************/
a { color:#0c77c4; }
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
/*socialNetwork
****************************************/
#socialNetwork { margin-bottom:10px; }
#socialNetwork li {
	float:right;
	margin-left:10px;
}
.textLeft03 {
	float:left;
	width:300px;
}
.textRight03 {
	float:right;
	width:300px;
}
.textLeft02, .textCenter02 {
	float:left;
	width:190px;
	margin-right:20px;
}
.textRight02 {
	float:right;
	width:190px;
}
.notes{
	padding:0 0 0 1em;
	text-indent:-1em;
	color:#c00;
}
.notes2{
	padding:0 0 0 1em;
	text-indent:-1em;
	color:#c00;
	margin-top:-1em;
}

/*listStyle
****************************************/
.listStyle01 li {
	margin-bottom:6px;
	padding-left:15px;
	background:url(../../common/images/list/list-icon01.gif) left top no-repeat;
}
.listStyle01 li.end { margin-bottom:0; }
.listStyle02 li {
	margin-bottom:6px;
	padding-left:15px;
	background:url(../../common/images/list/list_icon08.gif) left 3px no-repeat;
}
.listStyle02 li.no { background:url(../../common/images/list/list_icon07.gif) left 3px no-repeat; }

.listStyle03 li {
	margin-bottom:6px;
	padding-left:15px;
	background:url(../../common/images/list/list-icon01.gif) left top no-repeat;
}
.listStyle03 li span{
	font-weight:bold;
	color:#0c77c4;
	clear:right;
}
.listStyle03 li.end { margin-bottom:0; }
/******************************************************************************
* header
*******************************************************************************/
#header {
	width:990px;
	height:90px;
	background:url(../../common/images/header/bg_header.png) center bottom no-repeat;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#header .wrap { position:relative; }
#header #mainMenu li, #header #subMenu li, #header #utility li { float:left; }
/*Logo
****************************************/
#header #logo {
	position:absolute;
	top:10px;
	left:10px;
}
#header #logo a {
	display:block;
	width:109px;
	height:69px;
	background:url(../../common/images/header/logo_ro.png) no-repeat;
	text-indent:-9999px;
}
/*tagline
****************************************/
#header #tagline {
	position:absolute;
	top:10px;
	left:134px;
	font-size:0.833em;
	color:#036cff;
}
/*mainMenu
****************************************/
#header #mainMenu {
	position:absolute;
	top:32px;
	left:134px;
	width:572px;
	height:50px;
}
#header #mainMenu li a {
	display:block;
	height:50px;
	background:url(../../common/images/header/mainMenu.png);
	text-indent:-9999px;
}
#aboutRo #header #mainMenu li#menu01 a { background-position:0 -50px; }
#gameGuide #header #mainMenu li#menu02 a { background-position:-115px -50px }
#campaign #header #mainMenu li#menu03 a { background-position:-229px -50px; }
#roFan #header #mainMenu li#menu04 a { background-position:-343px -50px; }
#supportNavi #header #mainMenu li#menu05 a { background-position:-457px -50px; }
#header #mainMenu li#menu01 a { width:115px; }
#header #mainMenu li#menu01 a:hover { background-position:0 -50px; }
#header #mainMenu li#menu02 a {
	width:114px;
	background-position:-115px 0;
}
#header #mainMenu li#menu02 a:hover { background-position:-115px -50px }
#header #mainMenu li#menu03 a {
	width:114px;
	background-position:-229px 0
}
#header #mainMenu li#menu03 a:hover { background-position:-229px -50px; }
#header #mainMenu li#menu04 a {
	width:114px;
	background-position:-343px 0;
}
#header #mainMenu li#menu04 a:hover { background-position:-343px -50px; }
#header #mainMenu li#menu05 a {
	width:115px;
	background-position:-457px 0;
}
#header #mainMenu li#menu05 a:hover { background-position:-457px -50px; }
/*subMenu
****************************************/
#header #subMenu {
	position:absolute;
	right:5px;
	top:43px;
	width:240px;
	height:40px;
}
#header #subMenu li a {
	display:block;
	width:120px;
	height:39px;
	background:url(../../common/images/header/subMenu.png);
	text-indent:-9999px;
}
#header #subMenu li#menu06 a:hover { background-position:0 -39px; }
#header #subMenu li#menu07 a { background-position:-120px 0; }
#header #subMenu li#menu07 a:hover { background-position:-120px -39px; }
/*utility
****************************************/
#header #utility {
	position:absolute;
	top:10px;
	left:476px;
}
#header #utility li#beginners {
	padding-left:17px;
	background:url(../../common/images/header/icn_beginner.gif) left center no-repeat;
}
#header #utility li#manual {
	margin-left:30px;
	padding-left:17px;
	background:url(../../common/images/header/icn_play_manual.gif) left center no-repeat;
}
/*SearchBox
****************************************/
#header #srch {
	position:absolute;
	top:10px;
	right:6px;
	width:240px;
	height:22px;
	background:url(../../common/images/header/bg_searchbox.gif) no-repeat;
}
#header #srchForm { padding-left:24px; }
#header #srchInput {
	float:left;
	width:166px;
	height:22px;
	line-height:22px;
}
#header #srchBtn {
	float:right;
	width:50px;
	height:22px;
	cursor:pointer;
	background:url(../../common/images/header/btn_search.gif) no-repeat;
}
#header #srchBtn:hover { background:url(../../common/images/header/btn_search_on.gif) no-repeat; }
/******************************************************************************
* contents
*******************************************************************************/
#contents {
	background:url(../../common/images/contents/background/bg_main_top.png) center top no-repeat;
	padding-top:10px;
	margin-top:70px;
}
#contents .wrap {
	padding-bottom:10px;
	background:url(../../common/images/contents/background/bg_main_bottom.gif) center bottom no-repeat;

}
.wrap {
	margin:0 auto;
	width:970px;
}
#contents .wrap #inner {
	padding:0 10px;
	background:url(../../common/images/contents/background/bg_main_body.gif) center repeat-y;
}

#container{
	width:785px;
	float:left;
	
	text-align:left;
}

/*localNavi
****************************************/

#localNavi {
	float:left;
	width:160px;
	padding:0 0 4px 0;
	background:url(../../common/images/contents/background/bg_lnavi_bottom.gif) bottom no-repeat;
}
#localNavi .inner {
	padding-top:3px;
	background:url(../../common/images/contents/background/bg_lnavi_top.gif) center top no-repeat;
}
#localNavi ul {
	padding:0 4px;
	background:url(../../common/images/contents/background/bg_lnavi_body.gif) center repeat-y;
}


ul#side-nav li ul{
	display: none;
}
ul#side-nav li ul.active{
	display: block;
	padding:0;
}
ul#ash-vacuum li ul{
	display: none;
}
ul#ash-vacuum li ul.active{
	display: block;
	padding:0;
}
ul#side-nav ul li{
	padding:4px 4px 4px 19px;
	background:url(../../common/images/list/list-icon03.gif) 10px 5px no-repeat;
	border-bottom:#ccc 1px dashed;
}
ul#side-nav ul li:hover{
	background-color:#e5f4ff;
}
ul#side-nav ul li.lv3rd{
	background:url(../../common/images/list/list-icon07.gif) 10px 5px no-repeat !important;
	padding:4px 4px 4px 25px;
	border-bottom:#ccc 1px dashed;
	font-size:0.833em;
}
ul#side-nav ul li.lv3rd:hover{
	background-color:#e5f4ff;
}
ul#side-nav ul li.end{
    border:0;	
}
/*
main
----------------------------------------*/

#main3column{
	width: 610px;
	float:right;
}
#breadcrumbs {
	padding:10px 0;
	font-size:0.833em;
}
h1.sptitle{
	display:none;
}
h1.pctitle{
	display:block;
}

h2.pageName{
	margin:0 0 10px 0;
	padding:0 0 4px 6px;
	font-size:1.75em;
	border-left:solid 4px #999;
	border-bottom:1px solid #999;
}
h3.hl02 {
background: url(../../common-wr/images/title_bg02_bottom.gif) left bottom no-repeat;
margin:15px 0 15px!important;
font-size: 116%!important;
padding-bottom: 5px;
font-weight: 600!important;
}

h3.hl02 span {
display: block;
color: #fff;
background: url(../../common-wr/images/title_bg02_top.gif) left top no-repeat;
padding: 7px 10px 1px 30px;
font-weight: 600!important;
line-height: 1.3!important;
}
h3.hl03 {
background: url(../images/common/title_bg01_bottom.gif) left bottom no-repeat;
margin:15px 0 10px!important;
font-size: 116%!important;
padding-bottom: 5px;
font-weight: 600!important;
}

h3.hl03 span {
display: block;
color: #fff;
background: url(../images/common/title_bg01_top.gif) left top no-repeat;
padding: 7px 10px 1px 10px;
font-weight: 600!important;
line-height: 1.3!important;
}

#breadcrumbs li { float:left; }

dd.anchor img{
	width:156px;
}
/*table
****************************************/
table {
	margin-bottom:1em;
	width:100%;
	border-left:#ccc 1px solid;
	border-top:#ccc 1px solid;
}
table.short {
	width:530px;
	margin: 10px 0 10px 80px;
}
table tr th {
	font-weight:bold;
	background:#d8f2ff;
	white-space:nowrap;
}
table tr th, table tr td {
	padding:4px 6px;
	border-bottom:#ccc 1px solid;
	border-right:#ccc 1px solid;
}

#rightMenu{
	width:150px;
	float:right;
	text-align:left;
}


/********************************
新ストア用
********************************/
.goodsbox {
	padding: 10px 10px 7px;
	border: #CCC 5px double;
	margin: 20px 0;
}

.goodsbox .iconbox img { margin-right: 5px;}
.goodsbox .goodsbox_l { float: left; padding: 0; }
.goodsbox .goodsbox_r { float: right; margin-top: 10px; padding: 0;}
.goodsbox .goodsbox_l .goods-name{float:left;}
.goodsbox .goodsbox_l .goods-name img{
	width:230px;
}
.goodsbox .goodsbox_r .goods-price{float:left;margin-right: 5px;}
.goodsbox .goodsbox_r .goods-price img{
	width:160px;
}
.goodsbox .goodsbox_r .btn-buy{
	float:right;
}
.goodsbox .goodsbox_r .btn-buy img{
	width:156px;
}
.pickup-item {margin:0 5px;}
.pickup-item li img{width:200px;}
.pickup-item li{
	float:left;
	
}
.store_attention { color: #cc0000; }

/*four_item
****************************************/
.pickup-item{
	overflow: hidden;
}
.pickup-item.four_item img{width:300px;}
.pickup-item+p{
	margin-top: 15px;
}

/*lineup
****************************************/
/* --- リストエリア --- */
ul.lineup {
width: 100%; /* リストエリアの幅 */
margin: 0;
padding: 0 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.lineup li {
width: 30%; /* 項目の幅 */
float: left;
margin:0 0 10px 15px;
border: 1px #B7B6B6 solid;
}

/* --- 項目内容 --- */
ul.lineup dl {
width: 142px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */
font-size: 100%;
}

/* --- 写真エリア --- */
ul.lineup dt {
margin-bottom: 5px;
}
ul.lineup dt img {
	margin: 5px 0 0 30px;
}
ul.lineup dd {
	text-align:center;
	font-weight:bold;
}
/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/*buyArea
****************************************/
.buyArea{
	margin-bottom:10px;
	border:#ccc 1px solid;
	padding:12px;
	background-color:#fafafa;
}
.buyArea .detail, .buyArea .image{
	float:left;
	margin-bottom:10px;
}
.buyArea img.image{
	width:180px;
}
.buyArea .detail{
	margin-left:15px;
	width:380px;
}
.buyArea .detail dt,.buyArea .detail dd{
	padding:5px 0;
	border-bottom:#ccc 1px solid;
}
.buyArea .detail dt.itemName{
	font-size:1.333em;
	font-weight:bold;
}
.buyArea .detail dd.itemPrice{
	font-size:1.167em;
	font-weight:bold;
}
.buyArea .detail dd.type img{
	float:left;
}
.buyArea .detail dd.type span{
	padding-left:15px;
	float:right;
	background:url(../images/list/list-icon01.gif) left top no-repeat;
}
.buyArea dd.btnBuy{
	padding-top:10px;
	border-bottom:none;
}
.buyArea dd.btnBuy img{
	width:156px;
}
.buyArea table{
	margin-bottom:0;
}
/*table.item
****************************************/
table.table01{

}

table.table01 caption {
	padding:3px 6px;
	border:#ccc 1px solid;
	border-bottom:none;
	font-weight:bold;
}
table.table01 tr .cell01 { width:88px; }
table.table01 tr .cell02 { width:58px; }
table.table01 tr td.image {
	text-align:center;
	vertical-align:middle;
	width:121px;
}
th.th01 { background:none; }

/*categoryNavi
****************************************/
#categoryNavi {
	padding-top:10px;
	border-top:#ccc 1px solid;
}
#categoryNavi dt {
	padding-left:18px;
	padding-right:10px;
	width:15%;
	background:url(../images/contents/icon/icon_categorytop.gif) left no-repeat;
}
#categoryNavi dt, #categoryNavi dd { float:left; }
#categoryNavi dd {
	padding-left:10px;
	width:75%;
	border-left:#ccc 1px dashed;
}
#categoryNavi dd ul li {
	float:left;
	margin-right:20px;
	white-space:nowrap;
}

/*relatedContents
****************************************/

#relatedContents {
	margin-bottom:5px;
	padding-bottom:3px;
	background:url(../../common/images/contents/background/bg_right01_bottom.gif) center bottom no-repeat;
}
#relatedContents .inner {
	padding:10px 10px 0;
	background:url(../../common/images/contents/background/bg_right01_body.gif) center repeat-y;
}
#rssMelmaga img { margin-bottom:5px; }

/*goTop
****************************************/

#goTop { text-align:right; }
/******************************************************************************
* right
*******************************************************************************/
#rightMenu {
	float:right;
	width:150px;
	margin:0 0 0 0;
}
/*register
****************************************/

#rightMenu #register {
	margin-bottom:5px;
	padding-top:6px;
	background:url(../../common/images/contents/background/bg_right01_top.gif) center top no-repeat;
}
#rightMenu #register_bottom {
	padding-bottom:4px;
	background:url(../../common/images/contents/background/bg_right01_bottom.gif) center bottom no-repeat;
}
#rightMenu #register .inner {
	padding:0 5px;
	background:url(../../common/images/contents/background/bg_right01_body.gif) center repeat-y;
}
#rightMenu #register .inner p {
	margin-top:3px;
	padding-left:15px;
	background:url(../../common/images/list/list-icon01.gif) left top no-repeat;
}
#bannerArea img { margin-bottom:5px; }

div.attention{
	background:#fff2f2;
	padding:1em 1em 0;
	margin:1em 0 0;
	border:1px solid #ff6666;
}
div.attention p{
	color:#ff6666;
}
div.attention p.normal{
	color:#666;
}
div.attention ul li{
	color:#ff6666;
	text-indent:-1em;
	padding-left:1em;
	margin-bottom:0.5em;
}




/******************************************************************************
* footer
*******************************************************************************/
#footer a { color:#fff; }
#footer a:link { text-decoration:none; }
#footer a:visited { text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer {
	padding-bottom:170px;
	color:#fff;
	font-size:0.833em;
	background:url(../../common/images/footer/bg_footer_visual.jpg) center bottom no-repeat;
}
#footerSitemap {
	padding:10px 0;
	background:#1488da url(../../common/images/footer/bg_footer_bottom.gif) center bottom no-repeat;
}
#footerSitemap .inner {
	padding:0 10px;
	background:url(../../common/images/footer/bg_footer_body.gif) center repeat-y;
}
#footerSitemap dl {
	float:left;
	width:190px;
}
#footerSitemap dl dt {
	margin-top:1em;
	padding-left:12px;
	font-weight:bold;
	font-size:1.2em;
	background:url(../../common/images/list/list-icon05.gif) left no-repeat;
}
#footerSitemap dl dt.top {
	margin:0;
	padding:0 0 0 12px;
}
#footerSitemap dl dd {
	margin-left:12px;
	padding-left:7px;
	background:url(../../common/images/list/list-icon06.gif) left center no-repeat;
}
#footerSitemap dl#quickLink {
	margin-left:10px;
	width:160px;
}
#footerSitemap #description {
	float:right;
	width:190px;
}
#footerSitemap #description p { margin-bottom:1em; }
#footerSitemap #description a {
	display:block;
	width:190px;
	height:70px;
	text-indent:-9999px;
	background:url(../../common/images/footer/btn_register.gif) no-repeat;
}
#footerSitemap #description a:hover { background-position:0 -70px; }
#policy {
	border-top:#57b9fd 1px solid;
	border-bottom:#57b9fd 1px solid;
	border-left:#1488da 1px solid;
	border-right:#1488da 1px solid;
	padding:10px;
	margin:10px 1px;
}
#policy ul {
	margin:0 auto;
	width:730px;
}
#policy ul li {
	float:left;
	margin-left:20px;
	padding-left:7px;
	background:url(../../common/images/list/list-icon06.gif) left center no-repeat;
}
#copyright { padding:0 10px; }
#copyright #copy { float:left; }
#copyright #copy p { margin:0; }
#copyright #footerLogo a {
	float:right;
	margin-left:10px;
}
#copyright #footerLogo a#footerLogoRO {
	display:block;
	width:47px;
	height:40px;
	text-indent:-9999px;
	background:url(../../common/images/footer/logo_ragnarol.gif) no-repeat;
}
#copyright #footerLogo a#footerLogoGungho {
	display:block;
	width:40px;
	height:40px;
	text-indent:-9999px;
	background:url(../../common/images/footer/logo_gunho.gif) no-repeat;
}
#footerBreadcrumbs {
	margin-top:30px;
	padding-top:3px;
	font-size:0.833em;
	background:url(../../common/images/contents/background/bg_breadcrumbs_top.gif) center top no-repeat;
}
#footerBreadcrumbs ul {
	padding:7px 10px;
	background:url(../../common/images/contents/background/bg_breadcrumbs_body.gif) center repeat-y;
}
#footerBreadcrumbs ul li { float:left; }

.switch-device{
	display:none;
}

ul.kome li,p.kome{
	background:url(/common/images/contents/icon/kome.gif) top left no-repeat !important;
	padding:0 0 0.5em 1em;
}
.newItem{
	color: #00B2E7;
}

.lineupList{
	margin-bottom: 10px;
}

.lineupList dl dt,
.lineupList dl dd{
    padding: 4px 6px;
    border-bottom: #ccc 1px solid;
    border-right: #ccc 1px solid;
    border-left: #ccc 1px solid;
}

.lineupList dl dt:first-child{
    border-top: #ccc 1px solid;
}

.lineupList dl dt{
    font-weight: bold;
    background: #d8f2ff;
    line-height: 1.5em;
    padding: 4px 6px;
}

.lineupList dl dd div p{
    margin-bottom: 6px;
    line-height: 1.5em;
    display: inline;
}
.lineupList dl dd div p:first-child{
    padding-left: 15px;
    background: url(/common/images/list/list-icon01.gif) left top no-repeat;
}

.lineupList dl dd div p:last-child{
/*   font-size: 0.8em;*/
}

/*textbutton
****************************************/
.textBtn {
	margin-left:10px;
	display:inline-block;
	padding-left:21px;
	height:35px;
	font-size:1.167em;
	line-height:35px;
	background:url(/common-wr/images/btnText01.gif) left no-repeat;
	color:#fff;
	font-weight:bold;
}
.textBtn span {
	padding-right:21px;
	display:block;
	background:url(/common-wr/images/btnText02.gif) right no-repeat;
}
