/*==================================================
home
==================================================*/
/*hero */
#hero {
	height: 680px;
	background: url(../img/index/bg_hero.jpg) no-repeat 50% 0;
	background-size: cover;
}
#hero .inr {
	position: relative;
	padding: 65px 0 0;
}
#hero .inr .txtread {
	position: relative;
	padding: 0 0 0 570px;
	z-index: 100;
}
#hero .inr .release {
	position: absolute;
	top: 0;
	left: 500px;
	z-index: 200;
	margin-top: 560px;
}
#hero .inr .package {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 90px;
}
#hero .inr .movie .heart {
	position: absolute;
	top: 0;
	left: 478px;
	margin-top: 280px;
}
#hero .inr .movie .voice {
	position: absolute;
	display: block;
	top: 0;
	left: 590px;
	margin-top: 370px;
	cursor: pointer;
}
#hero .inr .movie .voice a {
	display: block;
	position: absolute;
	bottom: -150px;
	z-index: 999;
}



#hero .movie .audiojs {
    position: absolute;
    width: 302px;
    height: 209px;
    top: 0px;
    background: none;
}
#hero .audiojs .play-pause {
	display: block;
    width: 302px;
    height: 209px;
}



/*h_about */
.home_about {
	padding: 130px 0 210px;
	background: url(../img/index/bg_h_about.jpg) no-repeat 50% 133px;
}
.home_about .inr {
	position: relative;
}
.home_about h2 {
	position: relative;
	padding: 110px 0 30px;
	z-index: 100;
}
.home_about p {
	width: 440px;
	padding: 0 0 0 10px;
	color: #fff;
	font-size: 15px;
	line-height: 200%;
}
.home_about .seanImg .txt01 {
	position: absolute;
	top: 0;
	left: 595px;
	margin-top: 125px;
}
.home_about .seanImg .txt02 {
	position: absolute;
	top: 0;
	left: 895px;
	margin-top: 352px;
}
.home_about .seanImg .img01 {
	position: absolute;
	top: 0;
	left: 735px;
	margin-top: -90px;
	z-index: 100;
}
.home_about .seanImg .img02 {
	position: absolute;
	top: 0;
	left: 695px;
	margin-top: -122px;
}
.home_about .seanImg .img03 {
	position: absolute;
	top: 0;
	left: 530px;
	margin-top: -34px;
}
.home_about .seanImg .img04 {
	position: absolute;
	top: 0;
	left: 875px;
	margin-top: 203px;
}
.home_about .seanImg .img05 {
	position: absolute;
	top: 0;
	left: 470px;
	margin-top: 352px;
}

/*h_blog */
.home_blog {
	height: 365px;
	padding: 0 0 50px;
	background: url(../img/index/bg_h_blog.jpg) no-repeat 50% 13px;
	background-size: cover;
}
.home_blog h2 {
	text-align: center;
	z-index: 999;
}
.home_blog .slideWrap {
	overflow: hidden;
	margin-top: -30px;
	background-color: rgba(255,255,255,0.93); 
}
.home_blog .bx-wrapper {
	position: relative;
	width: 830px;
	padding: 50px 0 40px 0;
}
.home_blog .slide a {
	display: block;
}
.home_blog .slide dt {
	padding: 10px 0 0;
	font-size: 13px;
	color: #5d170f;
}
.home_blog .slide dd {
	font-size: 13px;
	color: #d93656;
	text-decoration: underline;
	line-height: 145%;
}
/* controls (next / prev) */
.home_blog .bx-controls-direction a {
	position: absolute;
	top: 7px;
	outline: 0;
	width: 54px;
	height: 280px;
	text-indent: -9999px;
	background: url(../img/icn_arrow.png) no-repeat;
	background-size: 110px 280px;
	z-index: 999;
}
.home_blog .bx-wrapper .bx-prev {
	left: -115px;
	background-position: 0 0;
}
.home_blog .bx-wrapper .bx-next {
	right: -120px;
	background-position: -60px 0;
}

/*home_product */
.home_product {
	padding: 80px 0;
}
.home_product h2 {
	padding: 0 0 40px;
	text-align: center;
}
.home_product table.left_colum {
	border: 1px solid #5d170f;
	border-right: none;
}
.home_product table.right_colum {
	border: 1px solid #5d170f;
	border-left: none;
}
.home_product table {
	width: 499px;
	float: left;
	color: #5d170f;
}
.home_product table tr {
	border-bottom: 1px solid #5d170f;
}
.home_product table tr:last-child {
	border: none;
}
.home_product table th {
	width: 130px;
	height: 55px;
	padding: 0 10px 0 20px;
	font-weight: bold;
	vertical-align: middle;
	background: #f7c4cf;
}
.home_product table td {
	height: 55px;
	padding: 0 10px 0 20px;
	vertical-align: middle;
	background: #fff;
}





/*================================================== 
#story
==================================================*/ 
.story .contWrap {
	background: url(../img/bg03.jpg) no-repeat 50% 0;
	background-size: cover;
}
.story .contents {
	padding: 100px 0 80px;
	background: url(../img/page/bg_conttop.png) repeat-x 50% 0 ,  url(../img/page/bg_contbottom.png) repeat-x 50% bottom;
}
.story .contInr_bg {
	background: url(../img/page/bg_story02.png) no-repeat 50% 0;
}
.story .txtWrap {
	padding: 185px 0 170px;
	text-align: center;
	font-size: 16px;
	color: #fff;
}
.story .inr {
	position: relative;
}
.story .txtWrap p {
	position: relative;
	padding:  0 0 28px;
	z-index: 100;
	text-shadow:
		0 0 25px #e52670,
		0 0 20px #e52670,
		0 0 0.40px #e52670;
}
.story .img img {
	position: absolute;
}
.story .img .chara01 {
	top: 0;
	left: 54px;
	margin-top: 31px;
}
.story .img .chara02 {
	top: 0;
	left: 783px;
	margin-top: 283px;
}
.story .img .chara03 {
	top: 0;
	left: 168px;
	margin-top: 657px;
}
.story .img .parts01 {
	top: 0;
	left: 32px;
	margin-top: 42px;
}
.story .img .parts02 {
	top: 0;
	left: 695px;
	margin-top: 358px;
}
.story .img .parts03 {
	top: 0;
	left: -37px;
	margin-top: 744px;
}




/*================================================== 
#chara
==================================================*/ 
.chara .contWrap {
	background: url(../img/bg03.jpg) no-repeat 50% 0;
	background-size: cover;
}
.chara .contents {
	padding: 50px 0 80px;
	background: url(../img/page/bg_conttop.png) repeat-x 50% 0 ,  url(../img/page/bg_contbottom.png) repeat-x 50% bottom;
}
.chara .contInr_bg {
	background: url(../img/chara/bg_chara01.png) no-repeat 50% 0,url(../img/chara/bg_chara03.png) no-repeat 50% 90px;
}
.chara .inr {
	position: relative;
	height: 1206px;
}
.chara .inr .chara_list li {
	position: absolute;
	z-index: 110;
}
.chara .inr li.chara01 {
	top: 0;
	left: 327px;
	margin-top: 476px;
}
.chara .inr li.chara02 {
	top: 0;
	left: 387px;
	margin-top: 50px;
}
.chara .inr li.chara03 {
	top: 0;
	left: 701px;
	margin-top: 224px;
}
.chara .inr li.chara04 {
	top: 0;
	left: 788px;
	margin-top: 513px;
}
.chara .inr li.chara05 {
	top: 0;
	left: 690px;
	margin-top: 765px;
}
.chara .inr li.chara06 {
	top: 0;
	left: 365px;
	margin-top: 906px;
}
.chara .inr li.chara07 {
	top: 0;
	left: 19px;
	margin-top: 506px;
}
.chara .inr li.chara08 {
	top: 0;
	left: 60px;
	margin-top: 117px;
}
.chara .inr .parts .txt01 {
	position: absolute;
	top: 0;
	left: 22px;
	margin-top: 218px;
	z-index: 100;
}
.chara .inr .parts .bg01 {
	position: absolute;
	top: 0;
	left: 57px;
	margin-top: 118px;
}
.chara .inr .parts .bg01{
    -webkit-animation: spin 10.5s linear infinite;
    -moz-animation: spin 10.5s linear infinite;
    -ms-animation: spin 10.5s linear infinite;
    -o-animation: spin 10.5s linear infinite;
    animation: spin 10.5s linear infinite;
}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
/*================================================== 
#ero
==================================================*/ 
.ero .cont_event {
	position: relative;
	padding: 50px 0 50px;
	background: url(../img/page/bg_ero_event.png) no-repeat 50% 0, url(../img/bg01.jpg) repeat 50% 0;
	background-size: cover , auto;
}
.ero .cont_event .inr {
	margin-top: 50px;
}
.ero h2 {
	position: absolute;
	top: -13px;
	left: 50%;
	margin-left: -107px;
	z-index: 999;
}
.ero .listWrap {
	padding: 45px 0;
	margin-top: -40px;
	background-color: rgba(255,255,255,0.93);
}
.ero ul {
	overflow: hidden;
	width: 930px;
	margin: 0 auto;
}
.ero li {
	position: relative;
	width: 255px;/*280px*/
	height: 160px;/*193px*/
	float: left;
	padding: 33px 0 0 25px;
	margin: 15px;
	background: url(../img/ero/bg_cg_01.png) no-repeat 0 0;
}
.ero .new {
	position: absolute;
	top: 23px;
	left: 30px;
	max-width: 69px;
}
.ero img.enlarge {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -29.5px;
	margin-left: -30.5px;
	max-width: 59px;
}


/*================================================== 
#system
==================================================*/ 
.screen .contWrap{
	background: url(../img/system/bg_syst01.jpg) no-repeat 50% 120px;
	background-size: cover;
	height: 620px;
}
.screen ul.inr {
	position: relative;
	margin: 0 auto;
}
.screen .inr li.img01 {
	padding-left: 20px;
}
.screen .inr li.img02 {
	position: absolute;
	top: 420px;
	left: 0;
}
.screen .inr li.img03 {
	position: absolute;
	top: 560px;
	right: 45px;
}
.screen p span {
	display: block;
	width: 500px;
	padding: 100px 0 0 8px;
	color: #5d170f;
	font-size: 15px;
}
.root {
	background: url(../img/system/bg_syst02.png) no-repeat 50% 120px;
	background-size: cover;
	height: 675px;
	margin-bottom: 70px;
}
.root .inr {
	position: relative;
}
.root h2 {
	width: 100%;
	text-align: center;
	padding-top: 130px;
}
.root .beast {
	position: absolute;
	float: left;
	top: 0;
	left: 0;
}
.root .beast .txt {
	position: absolute;
	background: url(../img/system/bg_frame01.png) no-repeat;
	padding: 48px 37px;
	top: 470px;
	left: 0;
}
.root .mom {
	position: absolute;
	float: right;
	top: 0;
	right: 0;
}
.root .mom .txt {
	position: absolute;
	background: url(../img/system/bg_frame02.png) no-repeat;
	padding: 48px 37px;
	top: 470px;
	right: 0;
}
.root .beast .icn,
.root .mom .icn {
	padding-top: 70px;
}






/*==================================================
#special
==================================================*/ 
/* localnav */
.special .lnav {
	overflow: hidden;
	width: 627px;
	margin: 0 auto;
}
.special .lnavTop {
	padding: 0 0 50px;
}
.special .lnav li {
	float: left;
	padding: 20px 5px;
}
.special .lnav a {
	display: block;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	text-indent: 100%;
	opacity: 1 !important;
}
.special .lnav .lnav01 a {
	width: 199px;
	height: 80px;
	background: url(../img/page/tab_special01_off.png) no-repeat 0 0;
}
.special .lnav .lnav02 a {
	width: 199px;
	height: 80px;
	background: url(../img/page/tab_special02_off.png) no-repeat 0 0;
}
.special .lnav .lnav03 a {
	width: 199px;
	height: 80px;
	background: url(../img/page/tab_special03_off.png) no-repeat 0 0;
}
.special .lnavBottom .lnav01 a,
.special .lnavBottom .lnav02 a,
.special .lnavBottom .lnav03 a {
	background-position: 0 bottom;
}
.special .lnavTop .lnav01 a.current,
.special .lnavTop .lnav01 a:hover {
	background: url(../img/page/tab_special01top_on.png) no-repeat 0 0;
}
.special .lnavBottom .lnav01 a.current,
.special .lnavBottom .lnav01 a:hover {
	background: url(../img/page/tab_special01bottom_on.png) no-repeat 0 0;
}
.special .lnavTop .lnav02 a.current,
.special .lnavTop .lnav02 a:hover {
	background: url(../img/page/tab_special02top_on.png) no-repeat 0 0;
}
.special .lnavBottom .lnav02 a.current,
.special .lnavBottom .lnav02 a:hover {
	background: url(../img/page/tab_special02bottom_on.png) no-repeat 0 0;
}
.special .lnavTop .lnav03 a.current,
.special .lnavTop .lnav03 a:hover {
	background: url(../img/page/tab_special03top_on.png) no-repeat 0 0;
}
.special .lnavBottom .lnav03 a.current,
.special .lnavBottom .lnav03 a:hover {
	background: url(../img/page/tab_special03bottom_on.png) no-repeat 0 0;
}
.special .cont {
	margin: 0 auto 80px;
}
.special .cont h2 {
	padding: 0 0 30px;
	text-align: center;
}

/*index(trial) */
.special .cont_trial {
	width: 640px;
}
.special .cont_trial .bnr {
	width: 596px;
	margin: 0 auto;
}
.special .cont_trial .bnr a {
	display: block;
}

/* movie */
.cont_movie .movie_area {
	width: 640px;
	margin: 0 auto;
}

/* twitter */
.cont_twitter ul {
	width: 960px;
	margin: 0 auto;
}
.cont_twitter li {
	width: 200px;
	float: left;
	padding: 0 20px 50px;
	text-align: center;
	font-size: 16px;
	color: #5d170f;
	line-height: 120%;
}
.cont_twitter li img {
	padding: 0 0 10px;
}
.cont_twitter .headericn li {
	float: none;
}
.cont_twitter dl {
	clear: both;
	width: 860px;
	padding: 30px;
	margin: 40px auto 80px;
	font-size: 16px;
	color: #5d170f;
	border: 1px dashed #5d170f;
	background: #fff;
}
.cont_twitter dt {
	padding: 0 0 2px;
	font-weight: bold;
}

/*banner---------- */
.cont_banner {
	width: 750px;
	margin: 0 auto;
}
.cont_banner h2 {
	padding: 0 0 30px;
	text-align: center;
}
.bnrimg li {
	margin: 0 auto 20px;
	text-align: center;
}
.banner01 {
	padding: 0 0 100px;
}
.banner01 .bnrimg {
	overflow: hidden;
	width: 510px;
	margin: 0 auto 30px;
}
.banner02 {
	padding: 0 0 100px;
}
.banner02 .bnrimg {
	overflow: hidden;
	width: 750px;
	margin: 0 auto 30px;
}
.banner01 .bnrimg li,
.banner02 .bnrimg li {
	float: left;
}
.banner01 .bnrimg li {
	width: 120px;
	margin: 0 25px;
}
.banner02 .bnrimg li {
	width: 200px;
	margin: 0 25px;
}
.banner03 {
	padding: 0 0 80px;
}
.banner03 .bnrimg {
	padding: 0 0 10px;
}
.banner03 .bnrimg li img {
	padding: 0;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}

/* banner */
.cont_banner dl {
	clear:both;
	display: block;
	width: 678px;/* -border2px in*/
	padding: 20px 25px;
	margin: 10px auto 0;
	text-align: left;
	font-size: 14px;
	color: #5d170f;
	border: 1px dashed #5d170f;
	background: #fff;
}
.cont_banner dt {
	font-weight: bold;
	padding: 0 0 2px;
}
.cont_banner dd li {
	margin: 1px 0 8px;
	line-height: 35px;
}
.cont_banner dl input {
	width: 625px;
	float: right;
	padding: 2px 5px;
	color: #000;
}











#main,
#hero,
#hero .txtread,
#hero .release,
#hero .package,
#hero .movie .heart,
#hero .movie a img,
.home_about h2,
.home_about p.txt00,
.home_about .img01,
.home_about .img02,
.home_about .img03,
.home_about .img04,
.home_about .img05,
.home_about .txt01,
.home_about .txt02,
.home_blog,
.home_blog h2,
.home_blog .slideWrap,
.home_product h2,
.home_product table,
.story .pagettl img,
.story .parts01,
.story .parts02,
.story .parts03,
.story .chara01,
.story .chara02,
.story .chara03,
.story .txt01,
.story .txt02,
.story .txt03,
.story .txt04,
.story .txt05,
.story .txt06,
.story .txt07,
.story .txt08,
.story .txt09,
.story .txt10,
.story .txt11,
.chara .pagettl img,
.chara .chara01,
.chara .chara02,
.chara .chara03,
.chara .chara04,
.chara .chara05,
.chara .chara06,
.chara .chara07,
.chara .chara08,
.chara .txt01,
.chara .bg01,
.ero .pagettl img,
.ero h2 img,
.ero .listWrap,
.ero .img01,
.ero .img01,
.ero .img02,
.ero .img03,
.ero .img04,
.ero .img05,
.ero .img06,
.ero .img07,
.ero .img08,
.ero .img09,
.ero .img10,
.ero .img11,
.ero .img12,
.ero .img13,
.special .pagettl img,
.special h2,
.system .pagettl img,
.screen .img01 img,
.screen .img02 img,
.screen .img03 img,
.screen p.inr,
.root h2 img,
.root .beast img,
.root .mom img {
	opacity: 0;
}
#hero .release,
#hero .txtread,
#hero .release,
.home_about p.txt00,
.home_product h2,
.home_product table,
.story .pagettl img,
.story .txt01,
.story .txt02,
.story .txt03,
.story .txt04,
.story .txt05,
.story .txt06,
.story .txt07,
.story .txt08,
.story .txt09,
.story .txt10,
.story .txt11,
.chara .pagettl img,
.ero .pagettl img,
.ero h2 img,
.ero .listWrap,
.special .pagettl img,
.special h2,
.system .pagettl img,
.screen .img01 img,
.screen .img02 img,
.screen .img03 img,
.screen p.inr,
.root h2 img,
.root .beast img,
.root .mom img {
	position: relative;
}
