@charset "UTF-8";
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin: 0 auto 60px;
  padding: 0;
  *zoom: 1;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}

/*
----------------------------------------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 30px;
  background-color: #f1faff;
  border-top: #9ec3d7 1px solid;
  border-left: #9ec3d7 1px solid;
}
table th, table td {
  border-right: #aecbda 1px solid;
  border-bottom: #aecbda 1px solid;
  padding: 5px 0px;
  font-size: 14px;
}
table th {
  font-weight: bold;
}
table thead th {
  text-align: left;
  background-color: #9ec3d7;
}
table tbody th {
  background-color: #d1ecfa;
}
table tbody td {
  padding: 10px 15px;
}
table .thumb {
  background-color: #fff;
  width: 130px;
  text-align: center;
}

/*テンプレようスタイル
----------------------------------------------------------*/
#about div.box {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
  background: #b0d6d7;
  height: 300px;
}
#about div.box:last-child {
  margin-right: 0;
}

#walk div.boxA {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
  background: #b0d6d7;
  height: 300px;
}
#walk div.boxA:last-child {
  margin-right: 0;
}
#walk div.boxB {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 65.88078%;
  background: #b0d6d7;
  height: 300px;
}
#walk div.boxB:last-child {
  margin-right: 0;
}

/*
----------------------------------------------------------*/
* {
  -webkit-font-smoothing: antialiased;
}

p {
  line-height: 1.8;
  font-size: 14px;
}

img {
  vertical-align: bottom;
}

html {
  background: #fff;
  color: #000;
  min-width: 960px;
}

a {
  color: #4230c8;
  font-size: 14px;
}
a:hover {
  text-decoration: none;
}

.section h2 {
  text-indent: -9999px;
}
.section .inner {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.section .inner::after {
  clear: both;
  content: "";
  display: table;
}

#gungho {
  width: 100%;
  height: 31px;
  background: #fff;
  border-bottom: 4px solid #ccc;
}
#gungho .inner {
  width: 960px;
  height: 31px;
  margin: 0 auto;
  position: relative;
}
#gungho #ragnarok {
  float: left;
}
#gungho #roInfo {
  text-align: right;
}
#gungho #roInfo li {
  display: inline-block;
  line-height: 31px;
  margin-left: 1.5em;
}
#gungho #roInfo li a {
  font-size: 12px;
  font-weight: bold;
}

/*
----------------------------------------------------------*/
body {
  background: url(../img/header_bg.jpg) center 32px no-repeat;
}

#compliance {
  position: fixed;
  z-index: 1000;
  background: url(../img/compliance_bg.png);
  width: 278px;
  height: 262px;
  top: 50%;
  right: 0;
  transition: all 0.5s ease;
}
#compliance ul {
  position: absolute;
  left: 14px;
  top: 70px;
}
#compliance ul li {
  margin-bottom: 10px;
}

@media (max-width: 1400px) {
  #compliance {
    right: -278px;
  }
}
/*header
----------------------------------------------------------*/
#header {
  width: 960px;
  margin: 0 auto;
  height: 640px;
  position: relative;
  padding-top: 250px;
  text-align: center;
}
#header p {
  margin-bottom: 50px;
}
#header ul#sns {
  position: absolute;
  top: 10px;
  right: 0;
}
#header ul#sns li {
  display: inline-block;
}
#header #slideWrap {
  background: url(../img/slidebg.png) no-repeat center top;
  width: 906px;
  margin: 0 auto;
  height: 261px;
}
#header #slideWrap img {
  vertical-align: bottom;
  line-height: 1;
}
#header #slideWrap .bx-wrapper {
  margin: 0 auto;
  line-height: 1;
  padding-top: 20px;
}
#header #slideWrap .bx-wrapper .bx-next {
  background: url(../img/arrow_l.png) no-repeat;
  width: 28px;
  height: 76px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  top: 95px;
  right: -17px;
}
#header #slideWrap .bx-wrapper .bx-prev {
  background: url(../img/arrow_r.png) no-repeat;
  width: 28px;
  height: 76px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  top: 95px;
  left: -17px;
}

/*content
----------------------------------------------------------*/
#content .inner {
  width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
#content #section01 {
  position: relative;
  padding-top: 100px;
  background: url(../img/robg.png) repeat-x center bottom;
}
#content #section01 .typo {
  position: absolute;
  bottom: 10px;
  right: 0;
}
#content #section01 h2 {
  position: absolute;
  top: -100px;
}
#content #section01 .content01 {
  background: url(../img/01_txt_01.png) 15px top no-repeat;
  height: 400px;
  text-indent: -9999px;
  margin-bottom: 10px;
}
#content #section01 .content02 {
  background: url(../img/01_txt_02.png) 15px top no-repeat;
  height: 263px;
  text-indent: -9999px;
  padding-bottom: 30px;
  margin-bottom: 86px;
}

#footer {
  background: #000;
  padding: 30px 0;
  color: #6c6c6c;
}
#footer .credit {
  font-size: 12px;
  width: 960px;
  margin: 0 auto;
}

/*common
----------------------------------------------------------*/
h2 {
  position: relative;
  left: -20px;
  margin-bottom: 20px;
}

.colTwo {
  overflow: hidden;
  margin-bottom: 50px;
}
.colTwo .leftCol {
  float: left;
  padding-left: 15px;
}
.colTwo .rightCol {
  float: right;
  padding-right: 15px;
}

.h3bg01 {
  background: url(../img/h3_bg01.png) no-repeat;
  height: 52px;
  margin-left: -20px;
  box-sizing: border-box;
  padding: 6px 0 0 15px;
  position: relative;
  z-index: 100;
}

.h3bg02 {
  background: url(../img/h3_bg02.png) no-repeat;
  height: 81px;
  margin-left: -20px;
  box-sizing: border-box;
  padding: 28px 0 0 15px;
  position: relative;
  z-index: 100;
}

.h3bg03 {
  background: url(../img/h3_bg03.png) no-repeat;
  height: 71px;
  margin-left: -20px;
  box-sizing: border-box;
  padding: 10px 0 0 15px;
  position: relative;
  z-index: 100;
}

/*#story
----------------------------------------------------------*/
#story {
  background: url(../img/story_bg.jpg) center top no-repeat;
  height: 830px;
}
#story .inner {
  background: url(../img/story_txt.png) no-repeat;
  width: 1000px;
  height: 719px;
}
#story .inner h2, #story .inner p {
  text-indent: -9999px;
}

/*howto
----------------------------------------------------------*/
#howto {
  margin-bottom: 80px;
}
#howto #forbeginner {
  background: url(../img/howto/forbeginner.jpg) no-repeat center top;
  height: 342px;
  text-indent: -9999px;
  margin-bottom: 60px;
}
#howto .leftCol {
  width: 550px;
}
#howto h3 {
  margin-left: -20px;
  margin-bottom: 20px;
}
#howto .box02 .leftCol {
  width: 440px;
}
#howto .box03 .leftCol {
  width: 490px;
}

/*map
----------------------------------------------------------*/
#map {
  margin-bottom: 80px;
  background: url(../img/map/map_bg.jpg) no-repeat center bottom;
  height: 940px;
}
#map .inner {
  position: relative;
}
#map .inner h3 {
  display: none;
}
#map .inner p {
  font-size: 12px;
}
#map #chara01 {
  background: url(../img/map/img01.png) no-repeat;
  width: 311px;
  height: 190px;
  position: absolute;
  top: 510px;
  left: 330px;
  padding: 70px 30px 0px;
  box-sizing: border-box;
}
#map #chara02 {
  background: url(../img/map/img02.png) no-repeat;
  width: 301px;
  height: 187px;
  position: absolute;
  top: 350px;
  right: 20px;
  padding: 70px 30px 0px;
  box-sizing: border-box;
}
#map #chara03 {
  background: url(../img/map/img03.png) no-repeat;
  width: 301px;
  height: 182px;
  position: absolute;
  top: 380px;
  left: -20px;
  padding: 80px 40px 0px;
  box-sizing: border-box;
}
#map #chara04 {
  background: url(../img/map/img04.png) no-repeat;
  width: 301px;
  height: 146px;
  position: absolute;
  top: 790px;
  left: -20px;
  padding: 70px 30px 0px;
  box-sizing: border-box;
}
#map #chara05 {
  background: url(../img/map/img05.png) no-repeat;
  width: 301px;
  height: 178px;
  position: absolute;
  top: 680px;
  right: -20px;
  padding: 70px 30px 0px;
  box-sizing: border-box;
}

/*dungeon
----------------------------------------------------------*/
#dungeon {
  margin-bottom: 80px;
}
#dungeon table, #dungeon th, #dungeon td {
  background: #fff;
}
#dungeon h2 {
  margin-bottom: 20px;
}
#dungeon .intro {
  margin-bottom: 60px;
  overflow: hidden;
}
#dungeon .intro li {
  float: left;
}
#dungeon h3 {
  clear: both;
  margin-bottom: 30px;
}
#dungeon #steps {
  margin-bottom: 50px;
}
#dungeon #steps p {
  text-indent: -9999px;
}
#dungeon #steps #step01 {
  background: url(../img/dungeon/step01.jpg) no-repeat;
  height: 156px;
  position: relative;
}
#dungeon #steps #step01 a {
  position: absolute;
  right: 30px;
  top: 30px;
}
#dungeon #steps #step02 {
  background: url(../img/dungeon/step02.jpg) no-repeat;
  height: 414px;
}
#dungeon #steps #step03 {
  background: url(../img/dungeon/step03.jpg) no-repeat;
  height: 341px;
}
#dungeon #steps #step04 {
  background: url(../img/dungeon/step04.jpg) no-repeat;
  height: 335px;
}
#dungeon #steps #step05 {
  background: url(../img/dungeon/step05.jpg) no-repeat;
  height: 361px;
}
#dungeon #steps #step06 {
  background: url(../img/dungeon/step06.jpg) no-repeat;
  height: 157px;
}
#dungeon #point {
  background: url(../img/dungeon/img04.jpg) no-repeat;
  height: 301px;
  text-indent: -9999px;
  margin-bottom: 40px;
}
#dungeon .reward {
  overflow: visible;
  height: 320px;
}
#dungeon .reward .leftCol {
  width: 400px;
}
#dungeon .reward .leftCol p {
  margin-bottom: 0.5em;
}
#dungeon .reward .leftCol .note {
  font-size: 12px;
  color: #b65d59;
}
#dungeon .reward .rightCol {
  margin-top: -50px;
}
#dungeon .btn {
  display: block;
  width: 637px;
  margin: 0 auto 50px;
}
#dungeon ul.note {
  color: #888;
}
#dungeon ul.note li {
  font-size: 12px;
}
#dungeon .tableH3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  font-family: serif;
}
#dungeon table {
  border: none;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-collapse: separate;
  padding: 1px 0;
}
#dungeon table th {
  text-align: left;
  padding: 10px 10px;
  border-color: #ccc;
}
#dungeon table td {
  padding: 10px 10px;
  border-color: #ccc;
  border-right: none;
}
#dungeon table .cellTop th, #dungeon table .cellTop td {
  border-top: 1px solid #000;
}
#dungeon table .cellBottom th, #dungeon table .cellBottom td {
  border-bottom: 1px solid #000;
}

/*newItems
----------------------------------------------------------*/
#newItems {
  margin-bottom: 80px;
}
#newItems h2 {
  margin-bottom: 50px;
}
#newItems h3 {
  margin-bottom: 25px;
}
#newItems .section01 .leftCol {
  width: 550px;
  padding-left: 0;
}
#newItems .section01 .leftCol p {
  margin-bottom: 1em;
}
#newItems .section02 .leftCol {
  width: 270px;
}
#newItems .section02 .leftCol p {
  margin-bottom: 1em;
}
#newItems .section03 .leftCol {
  width: 570px;
}
#newItems .section03 .leftCol p {
  margin-bottom: 1em;
}
#newItems .section04 {
  overflow: visible;
  height: 180px;
}
#newItems .section04 .leftCol {
  width: 390px;
}
#newItems .section04 .leftCol p {
  margin-bottom: 1em;
}
#newItems .section04 .rightCol {
  margin-top: -30px;
}
#newItems .section05 {
  overflow: visible;
  height: 200px;
}
#newItems .section05 .leftCol {
  width: 270px;
  padding-left: 0;
}
#newItems .section05 .leftCol p {
  margin-bottom: 1em;
}
#newItems .section05 .rightCol {
  margin-top: -18px;
}
#newItems .section06 .leftCol {
  width: 450px;
}
#newItems #enchantList {
  margin-top: 50px;
}
#newItems #enchantList h4 {
  color: #000;
  padding-top: 5px;
  border-top: 1px solid #000;
  margin-bottom: 10px;
  font-size: 16px;
}
#newItems #enchantList .leftCol, #newItems #enchantList .rightCol {
  width: 430px;
}
#newItems #enchantList h3 {
  border-bottom: 2px solid #000;
  margin-bottom: 1px;
  font-family: serif;
  font-size: 18px;
  padding-left: 3px;
}
#newItems #enchantList ul li {
  font-size: 14px;
}
#newItems h4 {
  color: #4A5A7E;
  margin-bottom: 15px;
  font-size: 20px;
}
#newItems table {
  margin-bottom: 80px;
  text-align: left;
}
#newItems table th {
  padding-left: 10px;
}
#newItems .note {
  font-size: 12px;
}

/*itemData
----------------------------------------------------------*/
#itemData {
  margin-bottom: 80px;
}
#itemData .card th {
  width: 70px;
}
#itemData .item th {
  width: 90px;
}
#itemData h3 {
  margin-bottom: 30px;
}
#itemData h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #4A5A7E;
}
#itemData .note {
  font-size: 12px;
  margin-top: -20px;
}

/*aobutLova
----------------------------------------------------------*/
#aobutLova {
  background: url(../img/aobutLova_bg.jpg) center top no-repeat;
  padding-top: 60px;
  margin-bottom: 80px;
}
#aobutLova .inner {
  width: 715px;
}
#aobutLova h2 {
  text-align: center;
  margin-bottom: 2em;
}
#aobutLova h3 {
  font-size: 18px;
  font-family: serif;
  margin-bottom: 5px;
}
#aobutLova p {
  font-size: 14px;
  margin-bottom: 2em;
}
#aobutLova ul {
  margin-top: 50px;
  float: right;
}
#aobutLova ul li {
  display: inline-block;
  margin-left: 10px;
}

/*collaboLova
----------------------------------------------------------*/
#collaboLova {
  padding-bottom: 20px;
  margin-bottom: 60px;
  position: relative;
}
#collaboLova p {
  text-align: center;
  margin-bottom: 40px;
}
#collaboLova a {
  margin: 0 auto;
  display: block;
  text-align: center;
}