@charset "utf-8";
@import "reset.css";
/* ----------------------------------------------------
  全体の設定
---------------------------------------------------- */
html{
height: 100%;
}
body {
height: 100%;			
font-size:83.333%;
line-height:130%;
font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif;
color: #fff;
background-color:#000;
text-align:center;
}
/* for IE6 */
* html body {
font-size: 75%;
}
/* for IE7 */
*:first-child+html body {
font-size: 75%;
}
/*画像下部の意図しない余白をなくす*/
img{ vertical-align : bottom; }
/*リンクの点線境界をなくす*/
a {outline: none;}
.bold{font-weight:bold;}
/* ----------------------------------------------------
  リンクカラー・文字
---------------------------------------------------- */
a:link {color:#ff0000; text-decoration:none;}
a:visited {color:#cc0000; text-decoration:none;}
a:active {color:#ff0000;text-decoration:underline;}
a:hover {color:#ff0000;text-decoration:underline;}
.cap{font-size:smaller;line-height:120%;}

/* ----------------------------------------------------
  共通
---------------------------------------------------- */
/*コンテンツ全体*/
#container{
width:1280px;
margin:0 auto;
text-align:left;
position:relative;
opacity:0;
}
#container_top{
width:100%;
min-width:1280px;
margin:0 auto;
text-align:left;
position:relative;
opacity:0;
}
/*ヘッダー*/
#header{
width:1180px;
height:85px;
margin:0 auto;
padding:0px 50px;
position:absolute;
top:0px;
left:0px;
z-index:100;
}
.header_top{
background-image:url(../images/header/bg_header.png);
background-position:top center;
background-repeat:no-repeat;
}
/*左・メニュー*/
#menu{
width:950px;	
float:left;
}
#menu ul {	
margin: 0;
padding: 0;
}
#menu ul li{
padding-right:24px;
list-style-type: none;
display:table-cell;
*display:inline;
*zoom:1;
}
.new{background-image:url(../images/header/new.png);background-position:top;background-repeat:no-repeat;}
.up{background-image:url(../images/header/up.png);background-position:top;background-repeat:no-repeat;}
/*右・vitaロゴかタイトルロゴ*/
#logo{
width:230px;
text-align:right;
float:right;
}

/*フッター*/
#footer{
width:100%;
height:130px;
background-color:#000;
position:relative;
z-index:99;
}
#footer_inner{
width:1180px;
height:115px;
margin:0 auto;
padding:15px 50px 0px;
background-color:#000;
position:relative;
z-index:100;
}
/*左・ロゴとかコピーライトとか*/
#foot_left{
width:450px;
float:left;
}
#sns{
width:450px;
height:40px;
}
#sns ul {
margin: 0;
padding: 0;
float:left;
}
#sns ul li{
padding:0px 15px 0px 0px;
list-style-type: none; 
display:table-cell; 
*display:inline; 
*zoom:1;
}
iframe.twitter-share-button {vertical-align:bottom!important;}
.fb_iframe_widget{vertical-align:bottom!important;}
#notice{width:450px;height:60px;}
/*右・リンクバナー群*/
#foot_right{width:730px;float:right;}
#foot_banner{width:730px;height:100px;text-align:right;}
.fban{margin:0;padding:0 0 0 3px;}
/*
@media screen and (max-width: 640px) {
#container_top{
min-width:640px;
}
#header{
width:630px;
left:0px !important;
padding:0px 5px;
}
#menu{
width:610px;
margin:0 5px;
height: 40px;
}
#menu ul li{
padding-right:4px;
}
#menu ul li img{
width:80%;
height:auto;
}
#logo{
text-align:left;
margin-right: 20px;
}
#footer{
height:225px;
}
#footer_inner{
width:630px;
height:225px;
padding:15px 5px 0px;
}
#foot_right{width:640px; margin:16px auto;}
#foot_banner{width:640px;height:100px;text-align:left;}
#foot_banner img.map22{
	width:90%;
	height:auto;
}
}
*/
/* ----------------------------------------------------
  トップページ
---------------------------------------------------- */
#title{
width:497px;
height:206px;
position:absolute;
top:60px;
right:15px;
z-index:100;
}
#release{
width:583px;
height:96px;
position:absolute;
bottom:795px;
left:45px;
z-index:100;
}
#catch{
height: calc(100% - 360px);
position:absolute;
top:75px;
right: 70px;
z-index:100;
}
#catch img {
	display: block;
    height: 100%;
    width: auto;
}
#title_sw{
width:500px;
position:absolute;
bottom:20px;
left:0;
z-index:100;
}
#title_sw a:hover {
filter: saturate(150%);
}
#movlink{
width:195px;
height:288px;
position:absolute;
top:515px;
left:30px;
z-index:100;
}
#tokulink{
width:326px;
height:331px;
position:absolute;
top:464px;
left:230px;
z-index:100;
}
#cdpop{
position:absolute;
top:515px;
right:50px;
z-index:100;
}
/*トピックス*/
#topics{
width:400px;
height:95px;	
position:absolute;
bottom:190px;
right:50px;
z-index:100;
background-image:url(../images/bg_topics.png);
background-repeat:no-repeat;
font-size:75%;
*font-size:small;
*font:x-small;
line-height:1.4;
overflow-x: hidden;
-webkit-auto-text-size-adjust : none; 	
}
#topics_inner{
width:380px;
height:60px;
margin:25px 0px 10px 10px;
}
#topics_inner dl dt{
font-size: 90%;
line-height: 1;
padding:5px 5px 2px 0px;
color:#c32d1b;
font-weight:bold;
}
#topics_inner dl dd{
padding:0px 5px 2px 0px;
}
#feed{
min-height:100px;
}

/*ツイートティッカー*/
#tw_ticker{
width:400px;
/*height:97px;*/
height:158px;
position:absolute;
bottom:30px;
right:50px;
z-index:100;
font-size:100% !important;
background-image:url(../images/bg_tweet.png);
background-repeat:no-repeat;
}
#tw_title{
width:347px;
height:11px;
padding:2px 0px 9px 53px;
text-align:left;
}
#tw_tweet{
width:380px;
/*height:56px;*/
height:120px;
margin:5px 10px 10px;
}
#tw_tweet iframe{
width:377px;
height: 120px !important;
min-height: 120px !important;
}
@media screen and (max-height: 830px) {
#release{
width:583px;
height:96px;
top:715px;
left:45px;
}
#movlink{
width:195px;
height:288px;
top:435px;
left:30px;
}
#tokulink{
width:326px;
height:331px;
top:384px;
left:230px;
}
}
@media screen and (max-height: 760px) {
#release{
width:583px;
height:96px;
top:645px;
left:45px;
}
#movlink{
width:195px;
height:288px;
top:385px;
left:30px;
}
#tokulink{
width:326px;
height:331px;
top:334px;
left:230px;
}
}
@media screen and (max-height: 700px) {
#release{
width:583px;
height:96px;
top:585px;
left:45px;
}
#movlink{
width:195px;
height:288px;
top:325px;
left:30px;
}
#tokulink{
width:326px;
height:331px;
top:274px;
left:35px;
}
}

/*メインビジュアル部分（ヘッダー背景のグラデーションはここの画像に含める）*/
#top{
width:1280px;
min-height:920px;
height: calc(100vh - 130px);
background-position:top center;
background-repeat:no-repeat;
}
@media screen and (max-width: 1280px) {
	#top{
		height: 920px;
	}
}
/*
@media screen and (max-width: 960px) {
#top{
width:960px;
height:920px;
background-image:url(../images/mainpic.jpg);
background-position:top center;
background-repeat:no-repeat;
}

}
*/
/*
@media screen and (max-width: 640px) {
#top{
width:640px;
height:1570px;
background-image:url(../images/mainpic.jpg);
background-position: -440px 0px;
background-repeat:no-repeat;
}
#title{
top: 605px;
left: 135px;
}
#release{
top:800px;
}
#movlink{
top:940px;
left:30px;
}
#tokulink{
top:900px;
left:230px;
}
#topics{
width:96% !important;
height:145px !important;	
top:1230px !important;
left:15px !important;
background-size:100%;
font-size:100% !important;
*font-size:small;
*font:x-small;
}
#topics_inner{
width:96% !important;
height:90px !important;
margin:35px 0px 10px 10px !important;
}
#tw_ticker{
width:96% !important;
height:175px !important;
top:1385px !important;
left:15px !important;
background-size:100%;
}
#tw_title{
width:200px !important;
height:20px !important;
padding:9px 0px 9px 70px !important;
text-align:left;
}
#tw_tweet{
width:96% !important;
height:120px;
margin:5px 10px 10px;
}
#tw_tweet iframe{
width:590px !important;
}
#cdpop{
left:400px !important;
}
#movpop {
	top:920px !important;
}
}
*/

/*ポップアップ*/
#popup{
	width:100%;
	height:100%;
	text-align:center;
	padding:150px 0 0 0;
	position:absolute;
	top:0;
	left:0;
	background:url(../images/opa_back.png) top left repeat;
	z-index:10000;
	display:none;
}
h2{
padding:0px 0px 0px 65px;
}
#fueeinfo {
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -32px;
	margin-top: -32px;
	z-index: 999999;
/*	background: url(../css/images/load.gif);*/
}

/*トップにムービー入れる間のみ適用*/
#dotpattern{
	width:100%;
	height:100%;
	background-image:url(../images/dot.gif);
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#movpop {
    width: 220px;
    position: absolute;
	top:480px;
    left: 25px;
	z-index:110;
    background: #000;
	color:#FFF;
    padding: 5px;
    border: 1px solid #AAA;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align:center;
}
#movpop p{
    color: #FFF;
    background: #222;
    padding: 5px 10px;
}
/*ムービーのリンク関係*/
iframe{margin:0;padding:0;overflow:hidden;}
.topmov_menu{
width:960px;
height:90px;
margin:0px auto;
background-color:#660000;
}
.tm_left{
width:480px;
height:24px;
padding-top:6px;
float:left;
}
.tm_right{
width:480px;
height:24px;
padding-top:6px;
float:right;
}
.tm_on{
background-color:#330000;
}
#cboxLoadedContent{overflow:hidden!important;}

/* ----------------------------------------------------
 目の差分ページ
---------------------------------------------------- */
#mov_eye{width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;z-index:50;display:none;}
#mov_eye #mov_eye01{margin:0;padding:0;position:absolute;top:45px;left:80px;z-index:51;display:none;}
#mov_eye #mov_eye02{margin:0;padding:0;position:absolute;top:247px;left:995px;z-index:52;display:none;}
#mov_eye #mov_eye03{margin:0;padding:0;position:absolute;top:556px;left:178px;z-index:53;display:none;}
#mov_eye #mov_eye04{margin:0;padding:0;position:absolute;top:612px;left:702px;z-index:54;display:none;}
#mov_eye #mov_eye05{margin:0;padding:0;position:absolute;top:490px;left:1019px;z-index:55;display:none;}
#push{width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;z-index:60;display:none;}
#push .pushon{width:49.5%;height:50%;margin:0;padding:0;float:left;zoom:1;background-color: #FFF;filter: alpha(opacity=0);opacity: 0;}

/* ----------------------------------------------------
  作品概要ページ
---------------------------------------------------- */
/*メイン部分*/
#about{
width:1280px;
height:835px;
padding:85px 0px 0px;
background-image:url(../images/about/bg_about.jpg);
}
#ab_menu{
width:1150px;	
height:100px;
/*padding:135px 65px 0px;*/
padding:27px 65px 0px;
}
#ab_menu ul {	
height:35px;
margin: 0;
padding: 0;
}
#ab_menu ul li{
height:35px;
padding-right:20px;	
list-style-type: none; 
display:table-cell; 
*display:inline; 
*zoom:1;
vertical-align:bottom!important;
}
#ab_contents{
}
#about01{
padding:70px 0 0;
}
#about02{
width:1280px;
height:575px;
margin-top:70px;
background-image:url(../images/about/bg_common1.png);
}
#ab_inner{
width:1280px;
height:575px;	
padding:50px 0 0;
background-image:url(../images/about/bg_common2.png);
background-position:right top;
background-repeat:no-repeat;
}
#system01{
width:1280px;
height:210px;
padding:20px 0 0; 
background-image:url(../images/about/system01.png);
background-position:left top;
background-repeat:no-repeat;
}
#system03{
width:1280px;
height:330px;
padding:20px 0 0; 
background-image:url(../images/about/system03.png);
background-position:left top;
background-repeat:no-repeat;
}
.ab02slider li{
width:100%!important;
height:350px!important;
}
#s_sample_outer{
width:345px;
height:100px;
padding-left:135px;
}
.s_sample_l,.s_sample_r{
widrh:155px;
height:100px;
padding-top:14px;
background-image:url(../images/about/bg_s_sample.png);
}
.s_sample_l{padding-right:35px;float:left;}
.s_sample_r{float:right;}
.s_sample_l a,.s_sample_r a{
	cursor:pointer;
}

/* ----------------------------------------------------
  製品情報ページ
---------------------------------------------------- */
#product{
width:1280px;
height:835px;
padding:85px 0px 0px;
background-image:url(../images/product/bg_product.jpg);
}
#pr_contents{
width:1280px;
height:600px;
/*margin-top:200px;*/
margin-top:70px;
background-image:url(../images/about/bg_common1.png);
position:static;
}
#pr_back2{
position:relative;
top:0;
left:0;
background-image:url(../images/product/tokuten03-00.png);
background-repeat:no-repeat;
height:1135px;
padding:100px 0 0 0;
}
.tenpotokuten{
width:1169px;
height:568px;
}
.tenpotokuten ul li{
width:200px;
padding-right:80px;
list-style-type: none; 
display:table-cell; 
*display:inline; 
*zoom:1;
}
.tenpotokuten ul.tenpbtn{
padding:56px 0px 0px 46px;
margin:0;
background-image:url(../images/product/tokuten03.png);
background-repeat:no-repeat;
background-position:-75px -100px;
width:1200px;
height:340px!important;	
}
.tenpotokuten ul.tenpbtn2{
padding:56px 0px 0px 46px;
margin:0;
background-image:url(../images/product/tokuten04.png);
background-repeat:no-repeat;
background-position:-75px -100px;
width:1200px !important;
}
.tenpotokuten ul.tenpbtn3{
padding:56px 0px 0px 46px;
margin:0;
background-image:url(../images/product/tokuten05.png);
background-repeat:no-repeat;
background-position:-75px -100px;
width:1200px;
height:196px!important;	
}
.tenpotokuten ul.tenpbtn li,.tenpotokuten ul.tenpbtn2 li,.tenpotokuten ul.tenpbtn3 li{
	vertical-align:top;
}
.tenpotokuten ul.tenpbtn2 li:nth-child(1){
padding-right:48px;
width:200px !important;
}
.tenpotokuten ul.tenpbtn2 li:nth-child(2){
padding-right:48px;
width:290px !important;
}
.tenpotokuten ul.tenpbtn2 li:nth-child(3){
padding-right:48px;
width:200px !important;
}
.tenpotokuten ul.tenpbtn2 li:nth-child(4){
padding-right:20px;
width:240px !important;
}
#tenpbox{
width:1145px;
height:835px!important;
padding:0 0 0 75px;
}
#pr_contents .bx-wrapper,#pr_contents .bx-viewport{
height:420px !important;
}
#pr_contents .bx-wrapper .bx-controls-direction a {
top:400px;
position: absolute;
}
#pr_contents .bx-wrapper .bx-prev,#pr_contents .bx-wrapper .bx-next {
left:650px;
}
#cap{
	width:428px;
	height:57px;
	margin:0 0 0 40px;
}
#pr_btn{
position: absolute;
top: 595px;
left: 350px;
}
#pr_btn a{
	cursor:pointer;
}
/* ----------------------------------------------------
  キャラクターページ
---------------------------------------------------- */
#chara{
width:1280px;
height:835px;
padding:85px 0px 0px;
background-image:url(../images/chara/bg_chara.jpg);
}
#chara_menu{
width:1150px;	
height:65px;
padding:27px 65px 0px;
}
#chara_menu ul {	
height:35px;
margin: 0;
padding: 0;
}
#chara_menu ul li{
height:35px;
padding-right:20px;	
list-style-type: none; 
display:table-cell; 
*display:inline; 
*zoom:1;
vertical-align:bottom!important;
}
/*新キャラ・メインキャラ*/
#c_submenu01{
width:1160px;	
height:35px;
padding:0px 0px 5px 120px;
background-image:url(../images/chara/bg_submenu.png);
background-position:top center;
background-repeat:no-repeat;
}
#c_submenu01 ul {	
height:35px;
margin: 0;
padding: 0;
}
#c_submenu01 ul li{
height:35px;
padding-right:20px;	
list-style-type: none; 
display:table-cell; 
*display:inline; 
*zoom:1;
vertical-align:bottom!important;
}
#c_contents01{
width:1280px;
height:665px;
}
.n01{background-image:url(../images/chara/chara_new01.png);}
.n02{background-image:url(../images/chara/chara_new02.png);}
.n03{background-image:url(../images/chara/chara_new03.png);}
.m01{background-image:url(../images/chara/chara_main01.png);}
.m02{background-image:url(../images/chara/chara_main02.png);}
.m03{background-image:url(../images/chara/chara_main03.png);}
.m04{background-image:url(../images/chara/chara_main04.png);}
.m05{background-image:url(../images/chara/chara_main05.png);}
.m06{background-image:url(../images/chara/chara_main06.png);}
.m07{background-image:url(../images/chara/chara_main07.png);}
#c_submenu02{
width:800px;	
height:67px;
padding:0px 360px 0px 120px;
background-image:url(../images/chara/bg_submenu2.png);
background-position:top center;
background-repeat:no-repeat;
clear:both;
}
#c_submenu02 ul {
width:800px;	
height:35px;
margin: 0;
padding: 0;
}
#c_submenu02 ul li{
height:35px;
list-style-type: none; 
float:left;
display:table-cell; 
*display:inline; 
*zoom:1;
vertical-align:bottom!important;
}
#c_contents01{
width:1280px;
height:638px;
}
/* ----------------------------------------------------
  スペシャルページ
---------------------------------------------------- */
#special{
width:1280px;
height:835px;
padding:85px 0px 0px;
background-image:url(../images/special/bg_special.jpg);
}
#sp_contents{
width:1220px;
height:600px;
padding:0 0 0 60px;
margin-top:70px;
background-image:url(../images/about/bg_common1.png);
}
/*百物語*/
#epbox{
width:1145px;
height:280px!important;
padding:0 0 0 75px;
}
.epbtn{
width:100%!important;	
height:220px!important;	
}
.epbtn img{
padding:0 5px 10px 0;	
float:left;
}
/*百物語各話ページ*/
#ep_header{
width:100%;
height:100px;
background-image:url(../images/special/bg_ephead.jpg);
background-repeat:repeat-x;
	}
#ep_hlogo{
width:510px;
margin:0 auto;
padding-top:10px;
text-align:right;
}
#ep_main{
width:520px;
margin:0 auto;
padding-bottom:60px;
text-align:left;
line-height:160%;
}
#ep_main h2{
margin:0;
padding:0 0 20px;
font-size:larger;
font-weight:bold;
}
#ep_main pre{
font-size:83.333%;
line-height:130%;
font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",sans-serif;
color: #fff;
}
.epcap{
width:520px;
margin:0 auto;
font-size:smaller;
line-height:120%;
text-align:left;
}
#ep_footer{
width:520px;
margin:0 auto;
padding:60px 0 10px;
position:relative;
z-index:100;
}
/*twitter素材*/
#twmaterial{
width:1140px;
height:490px;
padding:110px 0 0 80px;
background-image:url(../images/special/bg_twmate.png);
background-position:top left;
background-repeat:no-repeat;
}
.twcap{
padding-bottom:25px;
}
#twhead,#twicon{
width:675px;	
}
#twhead img{
width:270px;
height:124px;
padding:0 5px 20px 0;
float:left;
}
#twicon img{
width:70px;
height:70px;
padding:0 5px 5px 0;
float:left;
}
/*twitter素材*/
#special .bx-wrapper .bx-prev {
	left:580px !important;
}
#special .bx-wrapper .bx-next {
	left:610px !important;
}
/*playreport素材*/
#playreport{
width:1140px;
height:490px;
padding:110px 0 0 80px;
background-image:url(../images/special/bg_playreport.png);
background-position:top left;
background-repeat:no-repeat;
}
#playreport ul{
margin:16px 0 16px 5px; 
}
#playreport ul li{
width: 420px;
margin:6px 0;
height:26px;
padding:10px 0px 5px 15px;
display: inline-table;
background-image:url(../images/special/bg_sp3link.png);
background-position:top left;
background-repeat:no-repeat;
}
#playreport ul li a:link {color:#FFFFFF; text-decoration:none;}
#playreport ul li a:visited {color:#FFFFFF; text-decoration:none;}
#playreport ul li a:active {color:#ff0000;text-decoration:underline;}
#playreport ul li a:hover {color:#ff0000;text-decoration:underline;}
/* ----------------------------------------------------
  カウントダウンページ
---------------------------------------------------- */
#countdown{
width:1280px;
height:835px;
padding:85px 0px 0px;
background-image:url(../images/countdown/bg_countdown.jpg);
}
#cd_contents{
width:1220px;
height:600px;
padding:0 0 0 60px;
margin-top:70px;
background-image:url(../images/about/bg_common1.png);
}
#cdmaterial{
width:1140px;
height:490px;
padding:110px 0 0 80px;
background-image:url(../images/special/bg_countdown.png);
background-position:top left;
background-repeat:no-repeat;
}
#cd_main{
width:620px;
height:380px;
margin:0 auto;
padding:10px 60px 0 0px;
text-align:left;
line-height:160%;
/*background-image:url(../images/countdown/cd_main.jpg);
background-position:top left;
background-repeat:no-repeat;*/
}
#cd_main h2{
margin:0;
padding:0 0 20px;
font-size:larger;
font-weight:bold;
width:200px;
float:left;
}
#cd_main #cd_btn{
float:left;
width:320px;
}
#cd_main #cd_btn a{
cursor:pointer;
}

#cd_main #cd_con4{
	position:absolute;
	bottom:6px;
	right:25px;
}
.cdcap{
padding-bottom:25px;
}
.cdcap ul{
	width:760px;
	height:80px;
	margin:10px 0;
	text-align:left;
	list-style-type:none;
}
.cdcap ul li{
	width:58px;
	height:24px;
	margin:4px 16px 4px 0;
	display:inline-table;
}



#movie{
	width:1280px;
	padding-top: 190px;
	padding-bottom: 100px;
	background-image:url(../images/bg_movie.jpg);
	background-repeat: no-repeat;
}
#movie iframe {
	width: 480px;
	height: 270px;
	display: block;
}
#movie ul {
    width: 1040px;
    margin: 0 auto;
}
#movie ul:after {
	content: " ";
	display: block;
	clear: both;
}
#movie ul li {
	float: left;
	display: block;
	width: 480px;
	margin: 20px;
}
#movie ul li div {
	background: #000;
	color: #ff3917;
	text-align: center;
	line-height: 1.4;
	padding: 0.5em;
	margin-bottom: 8px;
	font-weight: 600;
}