@charset "utf-8";

/* -------------------------
  1. common
  2. top
  3. chara
  4. game
  5. story
  6. special
------------------------- */

/* -------------------------
  1. common
------------------------- */

html {
  background: #000000;
  min-width: 1130px;
}

body {
  background: url(../images/top/images.png) no-repeat 50% 0,url(../images/common/bg.jpg) repeat-x 0 0;
  font: 15px/1 "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body > header {
  width: 980px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

body > header > ul {
  height: 60px;
  margin: 0 auto;
  position: absolute;
  right: 10px;
}

body > header > ul:before,
body > header > ul:after {
  content: "";
  display: table;
}

body > header > ul:after {
  clear: both;
}

body > header > ul li {
  float: left;
  margin-right: 5px;
}

body > header > ul li:first-child {
  margin-right: 640px;
}

body > header > ul li:nth-child(4) {
  margin-left: 10px;
}

body > footer {
  margin: 30px auto;
  text-align: center;
  width: 1000px;
  position: relative;
}

body > footer p:nth-child(2){
  margin: 14px 20px 14px 0; 
  text-align:right;
}

body > p.toTop {
  bottom: 0;
  height: 40px;
  left: 50%;
  margin: 0 0 43px 510px;
  position: fixed;
  width: 40px;
  z-index: 100;
}

header .audioBtn {
  height: 40px;
  margin: auto !important;
  width: 129px;
  position: absolute;
  right: 180px;
  top: 7px;
  z-index: 9900;
}

header .audioBtn:hover {
  cursor: pointer;
}

/*a {
  background-color:#000;
  display: block;
}

a img{
  transition:all 0.5s ease;
}

a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
}*/

/* -------------------------
  2. top
------------------------- */

#top header{
  height: 725px;
}

#top header nav{
  background:url(../images/common/nav-bg.jpg) no-repeat #000;
  height: 70px;
  left: 0px;
  position: absolute;
  top: 640px;
  width: 1000px;
}

#top header nav ul{
  height: 70px;
  margin: 12px auto;
  width: 884px;
}

#top header nav li{
  background:url(../images/common/nav-line.jpg) no-repeat right 1px;
  display: block;
  float: left;
  height: 45px;
}

#top header nav li:first-child{
  background:url(../images/common/nav-line.jpg) no-repeat right 1px;
  padding-right: 1px;
}

#top header nav li:last-child{
  background:url(../images/common/nav-line.jpg) no-repeat left 1px;
  padding-left: 1px;
}

#top header nav ul:before,
#top header nav ul:after {
  content: "";
  display: table;
}

#top header nav ul:after {
  clear: both;
}

#top header h1 {
  margin: 73px auto 0 15px;
  text-align: center;
}

#top header p.txt{
  margin: 18px auto 16px 0;
  text-align: center;
}

#top header div.news {
  background: url(../images/top/news_bg.png) no-repeat 0 0;
  color: #fff;
  font-size: 15px;
  height: 103px;
  margin: 0 auto;
  padding-right: 48px;
  width: 512px;
  zoom: 1;
}

#top header div.news dl {
  height: 60px;
  padding: 25px 0 0 48px;
  overflow-x: hidden;
  line-height: 1.8;
  text-align: left;
  width: 512px;
}

#top header div.news dl:before,
#top header div.news dl:after {
  content: "";
  display: table;
}

#top header div.news dl:after {
  clear: both;
}

#top header div.news dt {
  color: #ff5623;
  clear : both;
  font-weight: bold;
  float: left;
  padding-right: 10px;
  width: 60px;
}

#top header div.news dd{
  margin-left: 80px;
  width: 370px;
}

#top header div.news dd a {
  color: #fff;
  text-decoration: none;
}

#top header div.news dd a:hover {
  text-decoration: underline;
}

#top #content {
  margin: 0 auto;
  height: 270px;
  position: relative;
  text-align: center;
  width:1000px;
}

#top #content h2{
  border-bottom: solid 1px #b8744f;
  color: #fff;
  font-size:16px;
  height: 25px;
  margin: 0 auto;
  padding-left: 8px;
  text-align: left;
  width: 520px;
}

#top #content h2 strong{
  color: #b8744f;
}

#top #content .movie{
  float: left;
  margin: 0 15px 30px 20px;
  text-align: center;
  width: 413px;
}

#top #content .movie img:hover{
  cursor: pointer;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

#top #content #e-shop{
  float: left;
  width: 530px;
}

#top #content #e-shop p{
  float:left;
  margin: 13px 38px 0 2px;
}

#top #content #e-shop ol{
  position: relative;
  line-height: 160%;
  margin-top: 13px;
  text-align: left;
  color: #fff;
}

#top #content #e-shop ol li{
  list-style: none;
  list-style-position:outside;
  padding-left: 20px;
}

#top #content #e-shop ol li span{
  color: #b8744f;
  position: absolute;
  left: 160px;
}

#top #content #e-shop ol li img.qr{
  margin-bottom:5px;
}

#top #content #e-shop p{
  color: #fff;
  font-size: 12px;
}

#top #content #e-shop p span{
  color: #b8744f;
  font-weight: bold;
}

#top #content div:before,
#top #content div:after {
  content: "";
  display: table;
}

#top #content div:after {
  clear: both;
}

/* -------------------------
  lower
------------------------- */

#lower header{
  height: 450px;
}

#lower header h1{
  left: 253px;
  position: absolute;
  top: 93px;
}

#lower header p{
  position: absolute;
  right: 813px;
}

#lower header nav{
  background:url(../images/common/nav-bg.jpg) no-repeat #000;
  height: 70px;
  left: 0px;
  position: absolute;
  top: 400px;
  width: 1000px;
}

#lower header nav ul{
  height: 70px;
  margin: 12px auto;
  width: 884px;
}

#lower header nav li{
  background:url(../images/common/nav-line.jpg) no-repeat right 1px;
  display: block;
  float: left;
  height: 45px;
}

#lower header nav li:first-child{
  background:url(../images/common/nav-line.jpg) no-repeat right 1px;
  padding-right: 1px;
}

#lower header nav li:last-child{
  background:url(../images/common/nav-line.jpg) no-repeat left 1px;
  padding-left: 1px;
}

#lower header nav ul:before,
#lower header nav ul:after {
  content: "";
  display: table;
}

#lower header nav ul:after {
  clear: both;
}

#lower a{
  color: #fff;
}

#lower a:hover{
  color: #b8744f;
  text-decoration: none;
}

#lower #content {
  background: #000;
  min-height: 300px;
  margin: 0 auto;
  padding-top: 25px;
  width: 1000px; 
}

#lower #content h2{
  background:url(../images/common/ttl-bg.jpg) no-repeat center;
  height: 50px;
  margin: 0 auto 20px;
  text-align: center;
  width: 949px;
}

#lower #content h2 img{
  margin-top: 5px;
}

#lower #content p{
  margin-left: 25px;
}

#lower footer p:first-child{
  text-align: right;
}

#lower footer p{
  text-align: center;
  margin: 0 auto;
}

/* -------------------------
  3. chara
------------------------- */

#lower .chara #nanase{
  background:url(../images/chara/nanase_bg.jpg) bottom center no-repeat;
  clear: #fff;
  height: 510px;
  margin: 65px auto 30px;
  position: relative;
  width: 950px;
 }
 
#lower .chara #nanase dd.chara{
  left: 17px;
  position: absolute;
  top: -30px;
}

#lower .chara #nanase ul{
  left: 311px;
  position: absolute; 
  top: 117px;
}

#lower .chara #nanase li{
  float: left;
  margin-left: 10px;
}
 
#lower .chara #nanase dd.other{
  left: 333px;
  line-height: 140%;
  position: absolute; 
  top: 315px;
}

#lower .chara #nanase dd.other table{
  color: #fff;
  position: absolute;
  top: 110px;
  z-index: 9999;
}

#lower .chara #nanase dd.other table th:first-child{
  color: #b8744f;
  font-weight: bold;
  padding-bottom: 5px;
  text-align: left;
  width: 65px;
}

#lower .chara #nanase dd.other table th:nth-child(3){
  color: #b8744f;
  font-weight: bold;
  text-align: left;
  padding: 0 0 5px 40px;
  width: 92px;
}

#lower .chara #nanase dd.other table td,
#lower .chara #nanase dd.other table td:nth-child(3){
  padding-bottom: 5px;
}

#lower .chara #amekura dl{
  background:url(../images/chara/amekura_bg.jpg) bottom center no-repeat;
  clear: #fff;
  height: 510px;
  margin: 35px auto 0;
  position: relative;
  width: 950px;
 }
 
#lower .chara #amekura dd.chara{
  right: 17px;
  position: absolute; 
  top: -30px;
}

#lower .chara #amekura ul{
  left: 9px;
  position: absolute; 
  top: 117px;
}

#lower .chara #amekura li{
  float: left;
  margin-left: 11px;
}

#lower .chara #amekura dd.other{
  left: 32px;
  line-height: 140%;
  position: absolute; 
  top: 315px;
}

#lower .chara #amekura dd.other table{
  color: #fff;
  position: absolute;
  top: 85px;
  z-index: 9999;
}

#lower .chara #amekura dd.other table th:first-child{
  color: #b8744f;
  font-weight: bold;
  padding-bottom: 5px;
  text-align: left;
  width: 65px;
}

#lower .chara #amekura dd.other table th:nth-child(3){
  color: #b8744f;
  font-weight: bold;
  text-align: left;
  padding: 0 0 5px 40px;
  width: 92px;
}

#lower .chara #amekura dd.other table td,
#lower .chara #amekura dd.other table td:nth-child(3){
  padding-bottom: 5px;
}
 
#lower .chara #suemura dl{
  background:url(../images/chara/suemura_bg.jpg) bottom center no-repeat;
  height: 320px;
  margin: 30px auto 30px;
  width: 950px;
  position: relative;
 }
 
#lower .chara #suemura dd.chara{
  left: 32px;
  position: absolute; 
  top: 10px;
}

#lower .chara #suemura .pict{
  right: 30px;
  position: absolute; 
  top: 96px;
}

#lower .chara #suemura dd.other{
  left: 305px;
  line-height: 140%;
  position: absolute; 
  top: 96px;
}

#lower .chara #nanase dt, 
#lower .chara #amekura dt,
#lower .chara #suemura dt{
  color: #fff;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#lower .chara dl dd{
  color: #fff;
  line-height: 140%;
}

#lower .chara ul:before,
#lower .chara ul:after {
  content: "";
  display: table;
}

#lower .chara ul:after {
  clear: both;
}

/* -------------------------
  4. game
------------------------- */

#lower .game dl{
  background:url(../images/game/bg.jpg) right bottom no-repeat;
  height: 217px;
  margin: 0 0 27px 25px;
  width: 950px;
 }

#lower .game dt{
  margin: 17px 0 20px;
}

#lower .game dd{
  color: #fff;
  font-size: 15px;
  line-height: 140%;
}

#lower .game h3{
  background:url(../images/game/cont-ttl_line.png) no-repeat bottom;
  margin: 0 auto 20px;
  padding: 15px 0 2px;
  text-align: center;
}

#lower .game #talk{
  background:url(../images/game/talk/bg.jpg) no-repeat top;
  height: 450px;
  margin: 0 auto 50px;
  width: 950px;
}

#lower .game #investigation{
  background:url(../images/game/investigation/bg.jpg) no-repeat top;
  height: 430px;
  margin: 0 auto 50px;
  width: 950px;
}

#lower .game #survey{
  background:url(../images/game/survey/bg.jpg) no-repeat top;
  height: 450px;
  margin: 0 auto;
  width: 950px;
}

#lower .game #talk p,
#lower .game #investigation p,
#lower .game #survey p{
  color: #fff;
  font-size: 15px;
  line-height: 140%;
  margin: 0 auto 0 70px;
}

#lower .game #talk ul,
#lower .game #investigation ul,
#lower .game #survey ul{
  color: #fff;
  float: left;
}

#lower .game #talk li:first-child,
#lower .game #investigation li:first-child{
  margin: 20px -60px 10px 70px;
}

#lower .game #talk li:last-child,
#lower .game #investigation li:last-child{
  line-height: 140%;
  margin: 0 -60px 0 70px;
}

#lower .game #survey li:first-child{
  margin: 20px -140px 10px 150px;
}

#lower .game #survey li:last-child{
  line-height: 140%;
  margin: 0 -140px 0 150px;
}

#lower .game #talk ul:before,
#lower .game #talk ul:after,
#lower .game #investigation ul:before,
#lower .game #investigation ul:after {
  content: "";
  display: table;
}

#lower .game #talk ul:after,
#lower .game #investigation ul:after {
  clear: both;
}

/* -------------------------
  5. story
------------------------- */

#lower #navi{
  float: left;
  margin-right: 25px;
  width: 195px;
}

#lower dl#sub{
  float: left;
  margin-left: 25px;
  width: 195px;
}

#lower dl#sub dt{
  background: #111;
  border-right: solid 5px #b8744f;
  color: #b8744f;
  font-size: 15px;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 195px;
}

#lower dl#sub dd{
  color: #fff;
  font-size: 15px;
  margin: 20px 0;
  text-align: center;
  width: 195px;
}

#lower dl#story{
  color: #fff;
  float: left;
  margin-left: 30px;
  width: 724px;
}

#lower dl#story dt{
  border-bottom: solid 1px #b8744f;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
  margin-bottom: 14px;
  padding-left: 5px;
  text-align: left;
}

#lower dl#story dd{
  border-bottom: dashed #333 1px;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 40px;
  padding: 0 0 30px 5px;
}

#lower dl#story dd p{
  margin: 0 auto;
  text-align: center;
}

#lower dl:before,
#lower dl:after {
  content: "";
  display: table;
}

#lower dl:after {
  clear: both;
}

/* -------------------------
  6. special
------------------------- */

#lower ul#tab {
  height: 50px;
  margin: 0 auto 20px;
  text-align: center;
  width: 640px;
}

#lower ul#tab li{
  cursor: pointer;
  background: #000;
  float:left;
  height: 50px;
}

#lower ul#tab li a:link img{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

#lower ul#tab li a:hover img{
  opacity: 1;
  filter: alpha(opacity=100);
}

#lower ul#tab li.select {
  cursor: default;
}

#lower ul#tab li.select a:link img{
  opacity: 1;
  filter: alpha(opacity=100);
}

#lower ul#tab li:first-child{
  margin-right: 20px;
}

#lower div.content_wrap{
  color: #fff;
  font-size: 15px;
  line-height: 160%;
  min-height: 50px;
  margin: 0 auto;
  padding: 20px 0;
  width: 950px;
}

#lower div.content_wrap h3{
  border: solid 1px #b8744f;
  color: #b8744f;
  font-size: 20px;
  line-height: 160%;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 25px;
}

#lower div.content_wrap h4{
  border-bottom: dashed 1px #b8744f;
  color: #fff;
  font-size: 18px;
  line-height: 160%;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

#lower div.content_wrap h4 span{
  color: #b8744f;
}

#lower #special div.content_wrap p{
  margin: 0 0 50px 0;
  padding: 0;
  text-align: left;
}

#lower #special div.content_wrap p.pict{
  margin: 0 auto;
  text-align: center;
  width: 600px;
}

#lower div.disnon {
  display: none;
}

#lower ul#sp_movie{
  height: 560px;
  margin: 0 auto;
  width: 930px;
}

#lower ul#sp_movie li{
  float: left;
  height: 276px;
  margin-bottom: 15px;
  width: 460px;
}
	
#lower ul#sp_movie li:first-child,
#lower ul#sp_movie li:nth-child(3){
  margin-right: 10px;
}

#lower ul#tab li:before,
#lower ul#tab li:after,
#lower ul#sp_movie li:before,
#lower ul#sp_movie li:after {
  content: "";
  display: table;
}

#lower ul#tab li:after,
#lower ul#sp_movie li:after  {
  clear: both;
}