@charset "utf-8";

/*===================================*/
 /* index page */
/*===================================*/

/*================================ curtain ================================*/
#topCurtainL01 {
  width: 540px;
  height: 130px;
  background-image: url(../images/tmp/curtain_left.png);
  background-position: left top;
  background-repeat: no-repeat;
  position: absolute;
  top: 105px;
  left: 0px;
  z-index: 30;
}
#topCurtainL02 {
  width: 200px;
  height: 752px;
  background-image: url(../images/tmp/curtain_left.png);
  background-position: left -130px;
  background-repeat: no-repeat;
  position: absolute;
  top: 235px;
  left: 0px;
  z-index: 31;
}

#topCurtainR01 {
  width: 180px;
  height: 130px;
  background-image: url(../images/tmp/curtain_right.png);
  background-position: right top;
  background-repeat: no-repeat;
  position: absolute;
  top: 105px;
  right: 0px;
  z-index: 32;
}
#topCurtainR02 {
  width: 200px;
  height: 752px;
  background-image: url(../images/tmp/curtain_right.png);
  background-position: right -130px;
  background-repeat: no-repeat;
  position: absolute;
  top: 235px;
  right: 0px;
  z-index: 33;
}

/*============================= top image area ============================*/
#topImgAreaWrap {
  width: 100%;
  position: absolute;
  z-index: 1;
  background-color: #FFFFFF;
  height: 833px;
  background-image: url(../images/top/top_main_bg.jpg);
  background-position: center 0px;
  top: 0px;
}

#topImgArea {
  width: 1000px;
  height: 728px;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  padding-top: 105px;
  position: relative;
}

#topChara01 {
  position: absolute;
  top: 85px;
  left: 30px;
}
#topChara02 {
  position: absolute;
  top: 100px;
  left: 65px;
}
#topChara03 {
  position: absolute;
  top: 299px;
  left: 0px;
}
#topChara04 {
  position: absolute;
  top: 259px;
  right: -20px;
}
#topCtv {
  position: absolute;
  top: 200px;
  right: -0px;
}
#topCopy01 {
	position: absolute;
	top: 335px;
	right: 6px;
	width: 980px;
	height: 494px;
	background-image: url(../images/top/top_main_05.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	overflow: hidden;
}
#topPop01 a:hover{
  opacity:0.5;
  filter:alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";
}
  #topPop01 {
  position: absolute;
  background: url(../images/top/top_pop.png);
  background-repeat: no-repeat;
  width: 364px;
  height: 214px;
  top:110px;
  left:700px;
  font-size:12px;
  line-height: 1.3;
}
#topPop01 a{
  text-decoration: none;
}
#topPop01 ul {
  margin:50px -17px;
  width: 300px;
  list-style:none;
  text-decoration:none;
}
#topPop01 li {
  padding: 3px 0;
  margin: 3px;
  border-bottom: 1px dotted #3E5492; 
  /*border-left:5px solid #3E5492; */
}
#topPop01 a:hover{
  opacity:0.5;
  filter:alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";
}

/*================================= news ==================================*/
#topNewsAreaWrap {
  background-image: url(../images/tmp/line_all.png);
  background-repeat: repeat-x;
  background-position: center -1px;
  padding-top: 10px;
}

#topNewsArea {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

#topNewsAreaFooter {
  background-image: url(../images/tmp/line_all.png);
  background-repeat: repeat-x;
  background-position: bottom 0px;
  height: 8px;
  margin-top: 3px;
}

/*------------------------------- news list -------------------------------*/
#topNewsArea dl {
  width: 850px;
  padding: 0px;
  background-image: url(../images/top/top_history_line.png);
  background-repeat: repeat-y;
  background-position: 6em top;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  overflow: hidden;
}
#topNewsArea dl dt {
  float: left;
  width: 5.1em;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 5px;
  margin-top: 0px;
  _margin-right: -5.1em; /*for IE6*/
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 0px;
}
#topNewsArea dl dd {
  margin: 0px;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 7.1em;
  _padding-left: 6.1em; /*for IE6*/
  _zoom: 1; /*for IE6*/
}

/*---------------------- news list open/close button ----------------------*/
#topNewsOCBtn {
  position: absolute;
  right: 0px;
  top: 2px;
  width: 116px;
  height: 29px;
  z-index: 40;
}
.topNewsOpenBtn,
.topNewsCloseBtn {
  background-position: 0px 0px;
  background-repeat: no-repeat;
  width: 116px;
  height: 29px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
.topNewsOpenBtn {
  background-image: url(../images/top/btn_news_open.png);
}
.topNewsCloseBtn {
  background-image: url(../images/top/btn_news_close.png);
}

/*=============================== contents ================================*/
#topContentsWrap {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-bottom: 140px;
  margin-top: 20px;
  margin-bottom:80px;
}

/*----------------------------- ctv -----------------------------*/
#btn_ctv{
	cursor: pointer;
	width: 190px;
	height: 190px;
  position: absolute;
  top: 210px;
  left: 970px;
	z-index: 50;

}
#close_ctv{
  background: #eeeeee;
  color: #717171;
  text-align: center;
  font-size: 15px;
  padding:5px;
  cursor: pointer;
  margin: 370px 0 0 -39px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 70px;  /*横幅*/
  height: 30px;  /*縦幅*/
  border-radius: 3px;        /* CSS3草案 */  
  -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 3px;   /* Firefox用 */
}
#overlay_ctv {
  display: none;
  width: 100%;
  height:100%;
  text-align: center;
  position: fixed;
  top: 0;
  right:0px;
  z-index: 2000;
  background: url(../images/tmp/overlay_bg.jpg);
  opacity:0.9;
  filter:alpha(opacity=90);
  -ms-filter: "alpha( opacity=90 )"; 
}
#overlay_ctv img {
  display: block;
  margin: -263px 0 0 -350px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 700px;  /*横幅*/
  height: 525px;  /*縦幅*/
}
#overlay_ctv audio {
  display: block;
  margin: 270px 0 0 -250px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 500px;  /*横幅*/
  height: 65px;
}

/*----------------------------- gacha -----------------------------*/
#btn{
  display: block;
  float: left;
  margin: 5px;
  position:absolute;
  left:-30px;
  cursor: pointer;
  z-index: 3;
}
#overlay{
  display: none;
  width: 100%;
  height:100%;
  text-align: center;
  position: fixed;
  top: 0;
  right:0px;
  z-index: 1002;
  background: url(../images/tmp/overlay_bg.jpg);
  opacity:0.9;
  filter:alpha(opacity=90);
  -ms-filter: "alpha( opacity=90 )";
}
#topGachatext {
  margin: -380px 0 0 -300px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 600px;
  height: 30px;
  line-height: 1;
} 
#overlay embed{
  margin: -250px 0 0 -160px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 320px;  /*横幅*/
  height: 500px;  /*縦幅*/
}
#overlay_wrap{
  background: url(../images/top/top_gacha_bg.png) no-repeat center;
  margin: -299px 0 0 -202px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 405px;
  height: 598px;
}
#text{
  font-size: 40px;
  color: #eee;
  padding-top: 400px;
  vertical-align: middle;
  font-weight: bold;
} 
#close{
  background: #eeeeee;
  color: #717171;
  text-align: center;
  font-size: 15px;
  padding:5px;
  cursor: pointer;
  margin: 310px 0 0 -39px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 70px;  /*横幅*/
  height: 30px;  /*縦幅*/
  border-radius: 3px;        /* CSS3草案 */  
  -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 3px;   /* Firefox用 */
}

/*----------------------------- twitter area -----------------------------*/
#topTwitterBox {
  width: 456px;
  float: left;
  height: 300px;
  background-image: url(../images/top/top_twitter_bg.png);
  background-position: 0px bottom;
  background-repeat: no-repeat;
  position: relative;
  left:170px;
}
#topTwitterBox h2 {
  background-image: url(../images/top/top_ttl_twitter.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: 42px;
  width: 456px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  text-indent: -9999px;
  overflow: hidden;
}
#topTwitterFollowBtn {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 17px;
  right: 90px;
  text-align: right;
}
#topTwitterArea {
  width: 320px;
  height: 240px;
  position: absolute;
  top: 75px;
  left: 32px;
}

/*------------------------------ movie area ------------------------------*/
#topMovieBox {
  width: 400px;
  float: left;
  margin-left: 120px;
}
#topMovieBox h2 {
  background-image: url(../images/top/top_ttl_op.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: 42px;
  width: 460px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  text-indent: -9999px;
  overflow: hidden;
}
#topMovieBox iframe {
  position: relative;
  z-index: 4;
}

/*----------------------------- banner area -----------------------------*/
ul#topBannerArea {
  margin-top: 40px;
  margin-right: -10px;
  margin-bottom: 0px;
  margin-left: -10px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  list-style-type: none;
  position: relative;

}
ul#topBannerArea li {
  display: inline-block;
  margin-right: 9px;
  margin-left: 9px;
}

ul#topBannerArea li a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* ie lt 8 */
  -ms-filter: "alpha(opacity=70)"; /* ie 8 */
  -moz-opacity: 0.7; /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.7; /* Safari 1.x */
  zoom: 1;
}