@charset "UTF-8";

#home{
	background:#000000;
	color:#d2d2d2;
}

/* -------- wrapper --------  */
#wrapper{
	display:block;
	width:100%;
	min-width:100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin:0;
	padding:0;
	text-align: center;
	position:relative;
}

/* -------- navigation --------  */
.gNav{
	display: block;
	width: 100%;
	height: 60px;
	top: 0;
	left:0;
	margin: 0;
	padding: 10px 160px 0 160px;
	background:url("../img/common/bg_nav.png") right top repeat-x;
	position: absolute;
	z-index: 10;
	text-align: center;
}

.gNav ul.topNav{
	display: block;
	width: 100%;
	min-width: 1120px;
	height: 50px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.topNav li{
	display: inline-block;
	width: auto;
	height: 50px;
	margin: 0;
	padding: 0 5px;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
}

.gNav .nav_twBtn{
	display: block;
	width: 160px;
	height: 160px;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 10;
	position: absolute;
}

#twBtn{
	cursor:pointer;
}

/* -------- #mainVisual --------  */
#mainWrapper{
	display:block;
	width:100%;
	min-width:1200px;
	height:auto;
	margin: 0 auto 20px auto;
	padding: 50px 0 0 0;
	position:relative;
}

/* -------- main_overBox （logo,オンエア表記） --------  */
.main_overBox{
	display: block;
	width: 100%;
	height: 630px;
	top: 50px;
	margin: 0;
	padding: 10px 0 0 0;
	background:url("../img/home/bg_dotline.png") center bottom repeat-x;
	position:absolute;
	z-index: 2;
}

.main_overBox div.main_overBox_inner{
	display: block;
	width: 1200px;
	height: 600px;
	margin: 0 auto;
	padding: 0;
	text-align :center;
	position:relative;
}

.main_overBox_inner h1{
	width:933px;
	height: 243px;
	margin:216px auto 0 auto;
	padding-left: 48px;
}

/* -------- homeTxtBox （PV、NEWS枠,ビリング他） --------  */
.homeTxtBox{　
	display:block;
	width:1200px;
	height:auto;
	min-height: 162px;
	margin:20px auto 30px auto;
	padding:0;
	position:relative;
}

/* -------- pv--------  */
.pvBox{
	display: block;
	width: 270px;
	height: 160px;
	left:0;
	top:0;
	margin: 0;
	padding: 0;
	text-align :left;
	background:url("../img/home/bg_pv.png") center top no-repeat;
	position:absolute;
}

.pvBox h1{
	width: 250px;
	height: 21px;
	margin: -10px auto 6px auto;
	padding: 0;
}

.pvBox p{
	width: 250px;
	height: 130px;
	margin: 0 auto;
	padding: 0;
}

/* -------- news--------  */
.homeNewsBox {
  	display: block;
	width: 440px;
	height: 160px;
	left:278px;
	top:0;
	margin: 0;
	padding: 0;
	text-align :left;
	background: url("../img/home/bg_news.png") right top no-repeat;
	position:absolute;
}

.homeNewsBox h1{
	width: 418px;
	height: 21px;
	margin: -10px auto 6px auto;
	padding: 0;
}

.newsArea{
	display:block;
	width:418px;
	height:130px;
	margin:0 auto;
	padding: 6px;
	background: #000;
}

#headline{
	display:block;
	width:400px;
	height:110px;
	margin:5px auto;
	padding: 0 1px 5px 10px;
	font-size:90%;
	text-align: left;
	overflow-y:auto;
}

#headline .topics {
	width:390px;
	height:auto;
	padding-bottom:2px;
	margin-bottom:2px;
	line-height:15px;
	font-weight:600;
}

#headline .date{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:68px;
	font-size:88%;
	text-align: left;
	vertical-align:top;
	font-feature-settings : "palt";
	color: #ff7a29;
}

#headline a {
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:316px;
	font-size:96%;
	text-align: left;
	padding-bottom:6px;
	padding-left:5px;
	font-feature-settings : "palt";
	vertical-align:top;
}

#headline a:link, #headline a:visited {
	color: #ffffff;
	text-decoration:none;
}

#headline a:active, #headline a:hover {
	text-decoration:underline;
}

.homeNewsBox__link{
	display:none;
}

/* -------- billing--------  */
.home__txtBox{　
  	display: table-cell;
	width: 470px;
	height: 160px;
	right:0;
	top:0;
	margin: 0;
	padding: 0 2px 0 0;
	text-align :right;
	position:absolute;
}

ul.shareBox{
	display:block;
	width:200px;
	height:28px;
	margin:0 -15px 30px auto;
	padding: 0;
	text-align: center;
	position:relative;
}

.shareBox li{
	display:inline-block;
	width:80px;
	height:26px;
	margin:0 4px;
	padding: 0;
}

/* -------- ページ下バナー--------  */
.homeBnrBox ul{
	display:block;
	width:1200px;
	height:auto;
	margin: 0 auto 60px auto;
	padding: 20px 0 0 0;
	text-align: center;	
	position:relative;
}

.homeBnrBox li{
	display:inline-block;
	width:310px;
	height:60px;
	margin: 0 1px 10px 1px;
	padding: 0;
	position:relative;
}

.homeBnrBox img{width:100%;}

/* -------- main_baseInner（メインビジュアル） --------  */
.main_baseInner{
	display: table;
	table-layout:fixed;
	width: 100%;
	max-width: 1976px;
	height: 610px;
	margin:-7px auto;
	padding: 0;
	text-align :center;
	position:relative;
	z-index: 1;
}

.main_baseInner div.mainCharaBox{
	display: table-cell;
	width: 25%;
	max-width: 494px;
	height: 610px;
	margin:0 auto;
	padding: 0;
	text-align :center;
	position:relative;
}

.bg_xon{
	background:url("../img/home/main_xon.png") center top no-repeat;
}

.bg_iguy{
	background:url("../img/home/main_iguy.png") center top no-repeat;
}

.bg_eleanor{
	background:url("../img/home/main_eleanor.png") center top no-repeat;
}

.bg_lisa{
	background:url("../img/home/main_lisa.png") right top no-repeat;
}



/* スクロールバー要素
----------------------------------------------------------- */

.jspContainer {
  overflow: hidden;
  position: relative;
}

.jspPane {
  position: absolute;
}

.jspVerticalBar {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 5px;     /* 縦スクロールバーの幅を指定 */
  height: 100%;
  background: #333333;
}

.jspHorizontalBar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 5px;     /* 横スクロールバーの幅を指定 */
  background: #333333;
}

.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

.jspTrack {
  background: #7d0000;     /* スクロールバーの背景色を指定 */
  position: relative;
}

.jspDrag {
  background: #ff0000;     /* スクロールバーの色を指定 */
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}

.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
}

.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow {
  height: 16px;
}

.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus {
  outline: none;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}

/* IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0px -3px 0px 0px;
}



.home__txtBox .bnr{
	position: absolute;
	top:-22px;
	left:0;
	cursor:pointer;
}

.magazineCover{
	display: none;
	content:"";
	/*--min-height: 2000px;--*/
	min-height: 100%;
	background-color: rgba(50,50,50,0.96); /* fadeの背景色 */
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	right:0;
	z-index: 90;
}
.magazineCover.is_magazine{
	display: block;
}

/*--
.magazineWrap{
	display: none;
	width: 1000px;
	height: 705px;
	position: fixed;
	z-index: 100;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	padding: 20px;
	box-sizing:content-box;
}
--*/

/*--- ↓スクロール可能に（拡大時対策） ---*/
.magazineWrap{
	display: none;
	width: 1000px;
	height: 705px;
	position: absolute;
	z-index: 100;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: 20px auto auto auto ;
	padding: 10px;
	box-sizing:content-box;
}


.magazineWrap .close{
	position: absolute;
	z-index: 100;
	top:-20px;
	right:-20px;
	margin: auto;
	color:#fff;
	font-weight: bold;
	font-size: 40px;
	line-height: 40px;
	cursor:pointer;
}
#magazine{
	width: 1000px;
	height: 705px;
	z-index: 3;
}
#magazine>div{
	background-size: 100%;
	width: 1000px;
	height: 705px;
}
.magazineTxt{
	position: absolute;
	top:290px;
	left:20px;
	z-index: 2;
	margin: auto;
	color:#fff;
	font-size: 16px;
	line-height: 1.6;
	width: 500px;
	text-align: left;
}

.magazineTxt li{
	font-size: 13px;
	line-height: 1.6;
}