html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

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

p {
  line-height: 1.7; }

img {
  vertical-align: bottom; }

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

a {
  color: #f1841e; }

.section {
  padding-top: 103px;
  margin-top: -103px; }
  .section h2 {
    height: 103px;
    margin-bottom: 40px;
    text-indent: -9999px; }
  .section .inner {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px; }
    .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; }

/*
----------------------------------------------------------*/
#header {
  background: #732422;
  position: absolute;
  width: 100%; }
  #header .inner {
    width: 960px;
    margin: 0 auto;
    padding-top: 15px; }
  #header h1 {
    float: left;
    margin-bottom: 10px; }
  #header #sns {
    line-height: 48px;
    text-align: right; }
    #header #sns li {
      display: inline-block; }
  #header #nav {
    clear: both;
    text-align: center;
    background: url(../img/nav_bg.gif) repeat-x #de9a00;
    padding-top: 2px;
    height: 54px; }
    #header #nav li {
      display: inline-block; }

#visual {
  text-indent: -9999px;
  background: url(../img/visual.jpg) no-repeat center 87px;
  height: 774px; }

#about h2 {
  background: url(../img/aboutEvent_h2.jpg) no-repeat center top; }
#about .inner {
  position: relative;
  margin-bottom: 40px; }
#about .txt {
  position: relative;
  z-index: 10; }
#about img + img {
  margin-top: 20px; }
#about #hillwind {
  position: absolute;
  top: -219px;
  left: -133px; }

#walk {
  height: 1630px; }
  #walk h2 {
    background: url(../img/walk_h2.jpg) no-repeat center top; }
  #walk .inner {
    position: relative; }
    #walk .inner ul li {
      position: absolute;
      text-indent: -9999px; }
    #walk .inner ul .step01 {
      background: url(../img/walk_step01.jpg) no-repeat;
      height: 347px;
      width: 480px; }
    #walk .inner ul .step02 {
      background: url(../img/walk_step02.jpg) no-repeat;
      height: 514px;
      width: 480px;
      right: 0;
      top: 141px; }
    #walk .inner ul .step03 {
      background: url(../img/walk_step03.jpg) no-repeat;
      height: 508px;
      width: 480px;
      top: 347px; }
    #walk .inner ul .step04 {
      background: url(../img/walk_step04.jpg) no-repeat;
      height: 464px;
      width: 547px;
      left: 0;
      top: 855px; }
    #walk .inner #onepoint {
      background: url(../img/walk_onepoint.jpg) no-repeat;
      width: 404px;
      height: 340px;
      position: absolute;
      right: 0;
      top: 615px;
      text-indent: -9999px; }
    #walk .inner #get {
      background: url(../img/walk_getimg.png) no-repeat;
      width: 481px;
      height: 240px;
      position: absolute;
      right: 0;
      top: 1000px;
      text-indent: -9999px; }

#start h2 {
  background: url(../img/start_h2.jpg) no-repeat center top; }
#start .inner {
  text-align: center; }
  #start .inner p {
    margin-bottom: 30px;
    font-size: 18px; }

#hormone h2 {
  background: url(../img/hormone_h2.jpg) no-repeat center top; }
#hormone h3 {
  margin-bottom: 30px; }
#hormone p {
  font-size: 18px; }
#hormone .useCase {
  margin-bottom: 70px; }
#hormone #case01 {
  background: url(../img/hormone_case01_img01.jpg) no-repeat right top;
  margin-bottom: 30px; }
  #hormone #case01 h3 {
    padding-top: 50px;
    margin-bottom: 50px; }
  #hormone #case01 .leadText {
    margin-bottom: 60px; }
  #hormone #case01 .more {
    margin-top: 20px;
    text-align: center;
    background: url(../img/hormone_more01_bg.gif) no-repeat center top;
    padding-top: 25px;
    padding-bottom: 50px; }
    #hormone #case01 .more h4 {
      margin-bottom: 20px; }
    #hormone #case01 .more #seiren {
      width: 918px;
      margin: 0 auto; }
      #hormone #case01 .more #seiren div {
        width: 296px;
        margin: 0 5px;
        float: left;
        margin-bottom: 20px; }
        #hormone #case01 .more #seiren div p {
          font-size: 12px; }
        #hormone #case01 .more #seiren div img {
          margin-bottom: 10px; }
    #hormone #case01 .more #schedule {
      margin-bottom: 15px; }
#hormone #case02 {
  background: url(../img/hormone_case02_img01.jpg) no-repeat right top; }
  #hormone #case02 h3 {
    padding-top: 50px;
    margin-bottom: 30px; }
  #hormone #case02 .more {
    background: url(../img/hormone_more02_bg.gif) no-repeat center top;
    width: 736px;
    margin: 0 auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: 100px; }
#hormone #case03 {
  background: url(../img/hormone_case03_img01.jpg) no-repeat right 80px;
  height: 330px;
  margin-bottom: 0; }

#treasurehunt {
  text-align: center;
  font-size: 18px; }
  #treasurehunt p {
    margin-bottom: 60px; }
  #treasurehunt h2 {
    background: url(../img/treasurehunt_h2.jpg) no-repeat center top; }
  #treasurehunt ul {
    position: relative;
    height: 855px;
    width: 906px;
    margin: 0px auto; }
    #treasurehunt ul li {
      text-indent: -9999px; }
  #treasurehunt .step01 {
    background: url(../img/treasurehunt_img01.jpg) no-repeat;
    width: 444px;
    height: 182px;
    position: absolute; }
  #treasurehunt .step02 {
    background: url(../img/treasurehunt_img02.jpg) no-repeat;
    width: 382px;
    height: 227px;
    position: absolute;
    right: 0;
    top: 80px; }
  #treasurehunt .step03 {
    background: url(../img/treasurehunt_img03.jpg) no-repeat;
    width: 401px;
    height: 337px;
    position: absolute;
    top: 262px; }
  #treasurehunt .step04 {
    background: url(../img/treasurehunt_img04.jpg) no-repeat;
    width: 443px;
    height: 242px;
    position: absolute;
    right: 0px;
    top: 356px; }
  #treasurehunt .step05 {
    background: url(../img/treasurehunt_img05.jpg) no-repeat;
    width: 906px;
    height: 202px;
    position: absolute;
    bottom: 0; }
  #treasurehunt #arrow01 {
    text-indent: 0px;
    position: absolute;
    top: 140px;
    left: 470px; }
  #treasurehunt #arrow02 {
    text-indent: 0px;
    position: absolute;
    bottom: 200px;
    left: 405px; }

#info {
  background: url(../img/info_img01.jpg) no-repeat center 250px; }
  #info h2 {
    background: url(../img/info_h2.jpg) no-repeat center top; }
  #info .inner {
    text-align: center;
    padding-top: 785px;
    padding-bottom: 35px; }
    #info .inner p {
      text-indent: -9999px; }
    #info .inner a {
      text-align: center; }

#guide {
  background: url(../img/guide_img01.jpg) no-repeat center 250px; }
  #guide h2 {
    background: url(../img/guide_h2.jpg) no-repeat center top; }
  #guide .inner {
    height: 640px; }
  #guide ul li {
    text-indent: -9999px; }

#newitem h2 {
  background: url(../img/newitem_h2.jpg) no-repeat center top; }

#story {
  background: url(../img/story_text01.jpg) center 205px no-repeat; }
  #story h2 {
    background: url(../img/story_h2.jpg) no-repeat center top; }
  #story .inner {
    height: 690px;
    margin-bottom: 0; }
    #story .inner p {
      text-indent: -9999px; }

#wallpaper h2 {
  background: url(../img/wallpaper_h2.jpg) no-repeat center top; }
#wallpaper .inner {
  width: 900px;
  height: 560px;
  padding: 35px 0 0 35px;
  background: url(../img/wallpaper_bg.jpg) center top no-repeat; }
  #wallpaper .inner #wallpaperImg {
    float: left;
    margin-right: 20px;
    margin-bottom: 30px; }
  #wallpaper .inner ul li {
    margin-bottom: 6px; }
  #wallpaper .inner p {
    clear: both;
    margin-bottom: 5px; }

#notice h2 {
  background: url(../img/notice_h2.jpg) no-repeat center top; }
#notice ul li {
  line-height: 1.5;
  font-size: 14px;
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 5px; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 30px;
  background-color: #6f5b47;
  border-top: #28160b 1px solid;
  border-left: #28160b 1px solid; }
  table th, table td {
    border-right: #28160b 1px solid;
    border-bottom: #28160b 1px solid;
    padding: 15px 10px; }
  table th {
    font-weight: bold; }
  table thead th {
    text-align: left;
    background-color: #44321d; }
  table tbody th {
    background-color: #584631; }
  table .thumb {
    background-color: #fff;
    width: 130px;
    text-align: center; }

/*
----------------------------------------------------------*/
#footer {
  background: url(../img/footer_bg.jpg) repeat-x #3f2310;
  padding-top: 70px; }
  #footer .inner {
    width: 960px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    background: url(../img/footer_flame.png) no-repeat 0 18px; }
    #footer .inner h2 {
      margin-bottom: 30px; }
    #footer .inner ul li {
      width: 302px;
      display: inline-block;
      vertical-align: top; }
      #footer .inner ul li p {
        text-align: left;
        line-height: 1.2;
        font-size: 14px; }
  #footer .startRO {
    margin: 30px 0; }
  #footer .credit {
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    padding-bottom: 30px;
    color: #7c5033; }

/*
----------------------------------------------------------*/
#header.fixed {
  width: 100%;
  position: fixed;
  z-index: 100; }