@charset "utf-8";
/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
	margin:0;
	padding:0;
}

body {
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	margin:0;
	padding:0;
	-webkit-text-size-adjust: 100%;
}

input, textarea {
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

/* for IE6 */
* html body {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
* html input, * html textarea {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

/* リンク
----------------------------------------------------*/
a {
text-decoration: none;

}

a:link {
	color:#C71827;
}

a:visited {
	color:#C71827;
}

a:hover {
	color:#FFCC66;
	text-decoration: underline;

}

a:active {
	color:#C71827;
}


/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;
}

/* 汎用
----------------------------------------------------*/
/* clerfix */
#contents:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}


/*----------------------------------------------------
	#page（ページ全体）
----------------------------------------------------*/
body#lovely{
	background:#6cb388;
	padding:0;
	margin:0;
	/*height:647px;*/

}

img {
  	vertical-align:bottom;
	margin:0;
	padding:0;
	border:none;
	margin-bottom: 10px;

}

ul{
	margin:0;
	padding:0;
	list-style:none;
}

ul li{
	margin:0;
	padding:0;
}

h1,h2,h3,strong,p{ margin:0; padding:0;}

p{ font-size:17px; color:#fff;}

strong{	 }




/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.header{
	margin:0;
	padding:0;
	margin:0 auto;

}


.hgroup{
	background:url(../images/top_img.jpg) no-repeat center top;
	height:576px;
	margin:0 auto;

}


.hgroup_in{
	width:1024px;
	margin:0 auto;
	height:576px;
	position:relative;

}

h1{
	width:677px;
	margin:0 auto;
	


}

.top_copy01{
	position:absolute;
	left:50%;
	top:15px;
	width:818px;
	margin-left:-409px;
}

.top_copy02{
	position:absolute;
	left:50%;
	top: 55px;
	width: 417px;
	margin-left: -480px;
}

.top_release{
	position:absolute;
	left: 100px;
	bottom: 85px;
	
}

.cast_name01{
	position:absolute;
	right: 60px;
	bottom: 20px;
	
}

.cast_name02{
	position:absolute;
	right: 320px;
	bottom: 20px;
	
}

/*--いいねなど --*/
.social_btn {
	display:block;
	width:460px;
	clear:both;
	overflow:hidden;
	/*margin:0 auto;*/
	/*margin:10px 10px 5px 390px;*/
	height:43px;
	position:absolute;
	bottom: 45px;
	left: 50px;
}

.social_btn .btn_official {
	width:98px;
	float:left;
}

.social_btn .btn_twitter {
	width:80px;
	float:left;
	margin-top: 10px;
    margin-left: 10px;
}

.social_btn .btn_face {
	width:160px;
	float:left;
	margin-top: 10px;
}

.social_btn .btn_line {
	width:82px;
	float:left;
	margin-top: 10px;
}


/*----------------------------------------------------
	#main（メイン）
----------------------------------------------------*/
#contents {
	/*width:1024px;*/
	margin:0 auto;
	width:1005;
}


.header_bg{
	background:url(../images/bg_trailer.png) no-repeat top center;
	width:100%;
	height:746px;
	margin-top: -50px;
	padding-top: 25px;
	
}



/*	メニュー
----------------------------------------------------*/
#menu{
}

#menu ul{
	width:1024px;
	margin:0 auto;
	overflow:hidden;
	height: 80px;
position:relative;

}

#menu ul li{
	/*float:left;*/
}


#menu ul li a{
	display:block;
	margin-right:35px;
	position:absolute;

}

#menu ul li.m_trailer a{
	top:0;
	left:0;
}

#menu ul li.m_product a{
	top: 10px;
	left: 147px;
}

#menu ul li.m_intro a{
	top: 15px;
	left: 297px;
}

#menu ul li.m_story a{
	top: 11px;
	left: 535px;
}

#menu ul li.m_sokan a{
	top: 11px;
	left: 695px;
}

#menu ul li.m_cast a{
	top: 2px;
	left: 810px;
}



/*#menu ul li.m_trailer a:hover{background:url(../images/menu.png) no-repeat 0 -25px;}
#menu ul li.m_intro a:hover{background:url(../images/menu.png) no-repeat -105px -25px;}
#menu ul li.m_story a:hover{background:url(../images/menu.png) no-repeat -335px -25px;}
#menu ul li.m_sokan a:hover{background:url(../images/menu.png) no-repeat -482px -25px;}
#menu ul li.m_cast a:hover{background:url(../images/menu.png) no-repeat -590px -25px;}
#menu ul li.m_product a:hover{background:url(../images/menu.png) no-repeat -828px -25px;}*/

/*	動画
----------------------------------------------------*/
#trailer {
	height:502px;
	position:relative;
}

#trailer h2 {
	position:absolute;
	top:10px;
	left:50%;
	margin-left: -330px;

}


.doga_area{
	width:600px;
	margin: 0px auto 0px -120px;
	position: absolute;
	top: 95px;
	left: 50%;
	z-index:1000;

}

#trailer .both {
	position:absolute;s
	top:20px;
	left:50%;
	margin-left: -530px;

}

#trailer .plane {
	position:absolute;
	top: 0px;
	left: 50%;
	margin-left: 330px;

}


/*	商品情報
----------------------------------------------------*/

#product {
	background:url(../images/bg_product.jpg) no-repeat top center;
	position:relative;
	min-height: 850px;
	/*margin-bottom:40px;*/
	margin-top: -78px;
	background-position: 50% 30px;
}


#product h2{
	position:absolute;
	/*margin-top: -30px;
	top:-30px;*/
	left:50%;
	margin-left:-460px;
}


#product .clock {
	position:absolute;
	top: -80px;
	left: 50%;
	margin-left: -260px;
}



#product .product_in{
	position:absolute;
	top: 50px;
	left:50%;
	margin-left: -512px;
width: 1024px;
}


#product .sell{
	margin:40px auto 0;
	overflow:hidden;

}

#product .sell h3{
	margin-left: 20px;
	

}


#product .sell .sellArea{
	width:471px;/*467*/
	overflow:hidden;
	float:left;
	margin-left:20px;
	margin-bottom:10px;
	margin-top:20px;
}

#product .sell .sellArea .sellImg{
	float:left;
}

#product .sell .sellArea .sellTxt{
	float:right;
}

#product .sell .detail{
	margin-left:20px;
}


#product h4{
	color:#2e231d;
	font-size:20px;
	margin:0 0 10px 0;
	line-height:1.2em;

}

#product .sell p{
	color:#2f030c;
	font-size:16px;
	text-align:left;

}

#product .buyBtn{
	margin:10px 0 0 0;

}

#product .sell p.detail01{
	font-size:12px;
	clear:both;
	text-align:center;


}

#product .rental{
	margin:20px auto 0;
	overflow:hidden;
	padding: 0 20px;

}

#product .rental .rentalArea{
	width: 520px;
	overflow:hidden;

}

#product .rental .rentalImg{
	width:155px;
	float:left;
	clear:both;
	margin-top:20px;

}

#product .rental .rentalTxt{
	width:345px;
	float:right;
	margin-top:20px;

}

#product .rental .rentalTxt p{
	font-size:16px;
	color:#2f030c;

}

#product .rental .rentalTxt p span{
	display:inline-block;
	font-weight:bold;
	margin-top:5px;

}


#product .rental .detail{
  margin-top:10px;
}

img.tokuten{
	display:block;
	
}

#product .star{
 position:absolute;
 left:50%;
 margin-left: 160px;
 top: 400px;
}

#product .three{
 position:absolute;
 left:50%;
 margin-left: 25px;
top: 470px;
}





/*	イントロ
----------------------------------------------------*/

#intro {
	background:url(../images/bg_intro.png) no-repeat top center;
	height:1708px;
	top: -140px;
position: relative;


}



#intro h2{
	position:absolute;
	top: 65px;
	left: 50%;
	margin-left: -465px;
}

#intro .intro_in {
	width:1024px;
	margin:0 auto;
	position:relative;

}




#intro p{
	line-height:1.5em;
	color:#412405;
}

#intro h4{
	margin:0px;
}

#intro .intro01_01{
	position:absolute;
	left: 50%;
top: 150px;
width: 721px;
margin-left: -360px;
}

#intro .intro01_01 h3{
	margin-left: 15px;
	margin-top: -5px;
	
}

#intro .intro01_01 p{
	padding-left:20px;
}

#intro .intro01_02{
	position:absolute;
	left: 50%;
top: 740px;
width: 940px;
margin-left: -470px;
}

#intro .intro01_02 .introImg{
	float:left;
	
}

#intro .intro01_02 .introTxt{
	width:500px;
	float:right;
	padding-top: 55px;
	
}

#intro .intro01_02 p{
	max-height: 100%;
	width:500px;
	
}

#intro .intro01_03{
	position:absolute;
	left: 50%;
	top: 1020px;
	width: 940px;
	margin-left: -470px;
}

#intro .intro01_03 .introImg{
	float:right;
	
}

#intro .intro01_03 .introTxt{
	width:500px;
	float:left;
	padding-top: 55px;
	
}

#intro .intro01_03 p{
	max-height: 100%;
	width:500px;
	
}

#intro .intro01_04{
	position:absolute;
	left: 50%;
	top: 1300px;
	width: 940px;
	margin-left: -470px;
}

#intro .intro01_04 .introImg{
	float:left;
	
}

#intro .intro01_04 .introTxt{
	width:500px;
	float:right;
	padding-top: 55px;
	
}

#intro .intro01_04 p{
	max-height: 100%;
	width:500px;
	
}

#intro .mop{
	position:absolute;
	left: 50%;
	top: 40px;
	margin-left: 220px;
	
}

#intro .school{
	position:absolute;
	left: 50%;
	top: 340px;
	margin-left: -525px;
	
}

#intro .book{
	position:absolute;
	left: 50%;
	top: 705px;
	margin-left: -135px;
}

#intro .light{
	position:absolute;
	left: 50%;
	top: 970px;
margin-left: -30px;
}

#intro .heart{
	position:absolute;
	left: 50%;
top: 1270px;
margin-left: -90px;
}



/*	ストーリー
----------------------------------------------------*/

#story{
	background:url(../images/bg_story.png) no-repeat top center;
	height:665px;
	position:relative;
	margin-top: -260px;

}

#story h2{
	position:absolute;
	top: 40px;
left: 50%;
margin-left: -330px;
}

#story .story_in{
	position:absolute;
	top: 130px;
	left:50%;
	margin-left:-490px;
	width:980px;
}

#story .story_in p{
	line-height:1.5em;
	margin-top:10px;
	float:left;
	width:520px;
	color:#000;
	max-height: 100%;
}

#story .story_in img{
	float:right;
}

#story .people{
	position:absolute;
	bottom: 60px;
left: 50%;
margin-left: -340px;
}

#story .daughter{
	position:absolute;
	bottom: 34px;
left: 50%;
margin-left: 273px;
}




/*	相関図
----------------------------------------------------*/

.footer_bg{
	background:url(../images/bg_footer.jpg);
	width:100%;
	overflow:hidden;
	margin-top: -200px;
	margin-bottom: -20px;
	
}

#sokan{
	height: 650px;
	position:relative;

}



#sokan h2{
	position:absolute;
	top: 130px;
	left: 50%;
	margin-left: -399px;
}


#sokan .coming{
	position:absolute;
	top:220px;
	left:50%;
	margin-left: -455px;

}

#sokan .heart_left{
	position:absolute;
	top: 250px;
	left: 50%;
	margin-left: -540px;

}

#sokan .heart_right{
	position:absolute;
	top: 250px;
	left: 50%;
	margin-left: 470px;

}

/*	キャストスタッフ
----------------------------------------------------*/

#cast{
	height: 615px;
	position:relative;

}

#cast h2{
	position:absolute;
	top:10px;
	left:50%;
	margin-left: -531px;

}

#cast p{
	line-height:1.5em;
	color:#412405;
}


#cast .castList{
	width: 450px;
position: absolute;
top: 120px;
left: 50%;
margin-left: -0px;
}

#cast .castList h3{
	/*width:99px;
	margin:0 auto 5px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-49px;*/
}


#cast .staffList{
	width: 450px;
position: absolute;
top: 360px;
left: 50%;
margin-left: -0px;

}

#cast .staffList h3{
	/*width:121px;
	margin:0 auto 5px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:-49px;*/
}

#cast .cast01{
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -580px;
}

#cast .cast02{
	position: absolute;
	top: 300px;
	left: 50%;
	margin-left: -440px;
}

#cast .arrow{
	position: absolute;
	top: 170px;
	left: 50%;
	margin-left: -180px;
}

#cast .ruler{
	position: absolute;
	top: 360px;
	left: 50%;
	margin-left: -580px;
}

#cast .cast_both{
	position: absolute;
	top: 420px;
	left: 50%;
	margin-left: -580px;
}

#cast .copyright{
	position: absolute;
	top: 570px;
	left: 50%;
	margin-left: -258px;
}



/*	フッター----------------------------------------------------*/

.footer_img{
	background:url(../images/footer_img.jpg) repeat-x center;
	height:165px;
}


p.copyright{
	text-align:center;
	margin:10px auto;
	font-size:12px;
	color:#2f030c;

}

/*-- バナーエリア --*/

.bannerArea {
	width:1024px;
	margin:0 auto;
	overflow:hidden;

}

.bannerArea ul li{
	float:left;
	margin-left:7px;

}


/* Text link style */
#scrollUp {
	bottom: 20px;
	right: 20px;
	width:60px;
	height:59px;
	background:url(../images/pagetop.png);
	text-indent:-9999px;
}