@charset "utf-8";

body
{
font-size:20;
  font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  margin:0;
  padding:0;
  background-color:#000000;
}

#header_area
{
  background-image:url(img/header_bg.png);
  width:950px;
  height:220px;
  margin:0 auto;
  padding:0;
}

nav ul
{
  list-style: none;
  margin:0;
  padding:0;
  overflow:hidden;
}

nav li
{
  float:left;
  padding:0;
  margin:15px 27px 20px 0;
  height:94px;
}

nav li:last-child
{
  float:left;
  padding:0;
  margin:15px 0 20px 0;
  height:94px;
}






#wrapper
{
  width:950px;
  overflow:hidden;
  margin:40px auto;
  padding:0;
  font-size:16px;
}

#wrapper pre
{
  font-size:16px;
}



#wrapper_top
{
  width:950px;
  overflow:hidden;
  margin:40px auto;
  padding:0;
}

#hall_area
{
  float:right;
  width:950px;
  overflow:hidden;
  padding:0;
  margin:0;
}

#story_nav
{
  width:100%;
  overflow:hidden;
  text-align: center;
  padding:0;
  margin:0 auto;
}


#story_nav section
{
  float:left;
  margin:0 20px 0 20px;
}


#story_close
{
  display:none;
}

aside ol
{
  margin:0 auto;
  padding:0;
  overflow:hidden;
  list-style:none;
  text-align: center;
}

aside ol li
{
  text-align:center;
  padding:0;
  overflow:hidden;
  text-align:center;
  margin:0;
}

aside ol li a
{
  display:block;
  padding:15px;
  width:240px;
text-align:center;
  background-color:#5d1410;
  font-size:20px;
  color:#fff;
}


aside ol li #story_nav_current
{
  background-color:#faf56e;
  color:black;
}


aside ol li a:hover
{
  display:block;
  padding:15px;
text-align:center;
  font-size:20px;
  color:#fff;
}

#story_link_area
{
  width:250px;
  border:5px solid #e7cbae;
  padding:10px;
  background-color:#5b0c11;
overflow-x:hidden;
  overflow-y:scroll;
  color:#fff;
  text-align:left;
  margin:0;
  }

#story_link_area a
{
  font-size:16px;
  text-align:left;
  display:block;
  padding:5px;
  text-decoration:none;
}




#pulldown_link
{
  list-style:none;
  overflow:hidden;
}

#pulldown_link ol
{
  overflow:hidden;
  padding:0;
  margin:0;
  list-style:none;
  }



#pulldown_link ol li
{
  width:100%;
  color:#fff;
  margin:0;
  }

#pulldown_link ol li a
{
  padding:5;
    font-size:18px;
  background-color:darkkhaki;
    text-align:left;
  color:#000;
text-decoration:none;
    }






#pulldown_link input
{
  display:block;
}


#story_replay img
{
  width:100%;
  max-width:620px;
  height:auto;
}


#story_replay
{
   font-size:medium;
    background-color:antiquewhite;
}


#story_replay td,#story_replay tr
{
   font-size:medium;
}

#pulldown_link li a:hover
{
background-color:#B34E26;
color:#ffffff;
}



#pulldown_link input
{
display:none;
}

label
{
display:block;
background-color:#B51803;
padding:15px;
color:#ffffff;
font-size:20px;
}






#to_top
{
width:90px;
padding:20px;
background-color:#ffffff;
position:fixed;top:500px;right:30px;
}

dd
{
margin:0 0 15px 0;
}


main
{
width:920px;
margin:40px auto 0 auto;
padding:15px;
background-color:#f1d392;
height:auto;
overflow:hidden;
display:block;
}

.magic_item_coment
{
margin:0 auto 40px auto;
padding:0;
max-width:410px;
width:95%;
}

.magic_item_dl
{
width:410px;
height:auto;
margin:0 auto;
padding:0;
float:none;
}

.magic_item_dl dt
{
width:300px;
margin:10px 0 30px 10px;
padding:0;
float:left;
border-bottom:1px solid #000000;
}

.magic_item_dl dd
{
width:100px;
margin:10px 0 30px 0;
padding:0;
float:left;
border-bottom:1px solid #000000;
}


@media screen and (max-width:767px)
{

main
{
width:100%;
padding:15px;
box-sizing:border-box;
}


.magic_item_dl
{
width:340px;
height:auto;
margin:0 auto;
padding:0;
}

.magic_item_dl dt
{
width:320px;
margin:40px 10px 10px 10px;
padding:0;
float:none;
border-bottom:0px solid #000000;
}

.magic_item_dl dd
{
width:320px;
margin:0px;
padding:0 0 0 20px;
float:none;
border-bottom:0px solid #000000;
}


  
  img
  {
    max-width:100%;
  }

#story_replay img
{
  width:100%;
  height:auto;
}
  
  table{
    max-width:100%;
  }

  #header_area
  {
    width:100%;
    text-align:center;
    box-sizing: border-box;
    height:auto;
    margin:0 auto;
    text-align:center;
background-image:none;
  }

  
  
  nav
  {
    margin:0 auto;
    width:313px;
    overflow:hidden;
      }
  
  nav ol
  {
    margin:0 auto;
  }
  
    nav ul li
  {
    margin:0 0 10px 10px;
    padding:0;
  }
  
      nav ul li:last-child
  {
    margin:0 0 10px 10px;
    padding:0;
  }
  
    #wrapper_top
  {
display:none;
  }
  
  #wrapper
  {
    margin:0 auto;
width:100%;
  }
  

  
  #hall_area
  {
    width:100%;
    height:980px;
  }
  

#pulldown_link li
{
padding:0;
margin:10px;
overflow:hidden;
}




section #pulldown_link ol
{
padding:0;
margin:0;
overflow:hidden;
}

section #pulldown_link ol li
{
width:100%;
padding:0;
margin:0;
overflow:hidden;
}




#pulldown_link li a
{
padding:15px;
margin:1px;
width:100%;
}

#pulldown_link li a:hover
{
background-color:#B34E26;
}

#story_nav section
{
  float:none;
}

#pulldown_link input
{
display:none;
}


#pulldown_link ol
{
display:none;
}




label
{
display:block;
background-color:#B51803;
padding:15px;
color:#ffffff;
font-size:20px;
}


input:checked ~ #list
{
display:block;
}



}/* media screen閉じる */