.fit {width:100%;height:100%;}
.fitW {width:100%;}
.fitH {height:100%;}

body {
	width:100%;
	height:100%;
	background:#FFF;
}
#wrapper {
	width: 740px;
	position: relative;
	height:auto !important; /*IE6蟇ｾ遲*/
	height: 100%; /*IE6蟇ｾ遲*/
	min-height: 100%;
	margin:0 auto;
	overflow:hidden;
}

/*------------------------------------------------------------------------------
								MENU
------------------------------------------------------------------------------*/
#menuBoxSp {
	width:100%;
	height:auto;
	background:#e4007f;
	min-width:740px;
	position:relative;
	z-index:1;
}
#menuBoxSp #menuIcon {
	background:#e50065;
	width:100%;
	height:80px;
	box-sizing:border-box;
	padding:20px;
	position:relative;
}
#menuBoxSp #menuIcon img {
	position:absolute;
	left:50%;
	margin-left:-20px;
}
#menuBoxSp #menuIcon #menuOff {
	display:block;
}
#menuBoxSp #menuIcon #menuOn {
	display:none;
}
#menuBoxSp #menuIcon a {
	position:absolute;
	text-indent:-999999px;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#menuAreaSp {
	box-sizing:border-box;
	height:auto;
	padding:0 0 0 0;
	width:100%;
	margin:0 auto 0;
	display:none;
}
#menuBoxSp #menuAreaSp li {
	height:80px;
	margin:0 0;
	padding:0;
	border-bottom:2px dotted #FFF;
	position:relative;
	background:#f23387;
	box-sizing:border-box;
	text-align:center;
}
#menuBoxSp #menuAreaSp #menuAbout {
	border-bottom:none;
	height:80px;
}
#menuBoxSp #menuAreaSp #menuAbout .aboutArrow {
	height:10px;
	width:20px;
	position:absolute;
	left:50%;
	margin-left:-10px;
	bottom:5px;
	z-index:10;
}#menuBoxSp #menuAreaSp #menuAbout .aboutArrow img {
	height:10px;
	width:20px;
}
#menuBoxSp #menuAreaSp #menuAbout img {
	height:80px;
}
#menuBoxSp #menuAreaSp li a {
	position:absolute;
	text-indent:-999999px;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#menuBoxSp #menuAreaSp #menuSubBoxSp {
	height:auto;
	width:100%;
	padding:0px;
	margin:0px;
	border-bottom:none;
}
#menuBoxSp #menuAreaSp #menuSubAreaSp {
	height:auto;
	width:100%;
	padding:0px;
	margin:0px;
}
#menuBoxSp #menuAreaSp #menuSubAreaSp li {
	background:#fcdeeb;
	height:75px;
	border-bottom:2px dotted #e50065;
}
#menuBoxSp #menuAreaSp #menuSubAreaSp li:last-child {
	border-bottom:none;
}

#contents {
	width:100%;
	margin:0;
	position:relative;
	padding-bottom:90px;
}
/*------------------------------------------------------------------------------
								MAIN AREA
------------------------------------------------------------------------------*/

/*---------------------- MAIN -------------------------------------------------*/

#mainArea {
	width:100%;
	height:890px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#mainBack1 {
	width:740px;
	height:890px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../../img/sp1203/bg1b.jpg) no-repeat center top;
}
#mainBack2 {
	width:740px;
	height:890px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../../img/sp1203/bg2b.jpg) no-repeat center top;
}
#mainImg {
	width:740px;
	height:890px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../../img/sp1203/main_b.png) no-repeat center top;
}
#copy1 {
	position:absolute;
	width:660px;
	height:60px;
	top:20px;
	left:50%;
	margin-left:-330px;
	background:url(../../img/sp1203/copy1.png) no-repeat center center;
	text-indent:-999999px;
}
#copy2 {
	position:absolute;
	width:740px;
	height:30px;
	top:854px;
	left:0px;
	background:url(../../img/sp1203/copy2.png) no-repeat center center;
	text-indent:-999999px;
}
#academy {
	position:absolute;
	width:280px;
	height:96px;
	top:100px;
	left:40px;
	background:url(../../img/top1203/academy.png) no-repeat center top;
	background-size:contain;
	text-indent:-999999px;
}
#sp_bnr_bd_dvd {
	position:absolute;
	width:210px;
	height:210px;
	top:440px;
	right:15px;
}
#subPhotoArea {
	width:740px;
	height:88px;
	overflow:hidden;
}
#subPhotoArea #subPhoto1,#subPhotoArea #subPhoto7 {
	width:130px;
}
#subPhotoArea #subPhoto2,#subPhotoArea #subPhoto3,#subPhotoArea #subPhoto4,#subPhotoArea #subPhoto5,#subPhotoArea #subPhoto6 {
	width:96px;
}
#subPhotoArea li {
	overflow:hidden;
	float:left;
}

/*---------------------- LOGO -------------------------------------------------*/
#logoObi {
	width:100%;
	height:260px;
	position:absolute;
	top:600px;
	left:0px;
	background:url(../../img/sp1203/logo_obi.png) no-repeat center center;
}
#logoBox h1 {
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-999999px;
}
#logoBox {
	width:740px;
	height:200px;
	position:absolute;
	top:655px;
	left:0px;
}
#logoArea {
	width:740px;
	height:200px;
	position:absolute;
	top:0px;
	left:0px;
}
#logoArea li {
	position:absolute;
}
#logoArea #logo1 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo2 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo3 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo4 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo5 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo6 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo7 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo8 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logo9 {
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
#logoArea #logoHart {
	width:130px;
	height:120px;
	top:12px;
	left:306px;
}
#day {
	width:160px;
	height:130px;
	position:absolute;
	top:72px;
	right:20px;
	text-indent:-999999px;
	background:url(../../img/top1203/day2.png) no-repeat center center;
	background-size:contain;
}
#spBnr1 {
	width:160px;
	height:160px;
	position:absolute;
	bottom:258px;
	right:180px;
}
#spBnr2 {
	width:160px;
	height:160px;
	position:absolute;
	bottom:280px;
	right:20px;
}

/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#trailerArea {
	position:relative;
	z-index:90;
}
#trailer {
	background:#e7325c;
	margin:0;
	padding:30px 0 30px;
	margin-top:0;
	position:relative;
	z-index:90;
}
#trailerArea #trailerTit {
	width:100%;
	text-align:center;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight:500;
	font-size:50px;
	margin-bottom:10px;
	line-height:1em;
	color:#FFF;
}
.prArea {
	margin: 0 auto 0 auto;
	padding:0 30px 0px 30px;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	max-width:800px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:0;
}
.video-container iframe {
	position: absolute;
	top: 2px;
	left: 0;
	width: 100%;
	height: 100%;
}
.trailerName {
	width:100%;
	height:16px;
	font-size:16px;
	line-height:16px;
	margin:0 0 0 0;
	text-align:center;
}
#trailerArea ul {
	max-width:100%;
	margin: 20px auto 0 auto;
	overflow:hidden;
	position:relative;
}
#trailerArea ul .trailerBtn {
	width:32%;
	float:left;
	height:40px;
	margin:0 0.5% 10px;
	background:#e4007f;
	padding:0 0 0;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	position: relative;
	line-height:40px;
}
#trailerArea ul .trailerBtn2 {
	width:32%;
	float:left;
	height:50px;
	margin:0 0.5% 10px;
	background:#e4007f;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	position: relative;
	line-height:1.5em;
	padding:4px 0;
}
#trailerArea ul .trailerBtn3 {
	width:98%;
	float:left;
	height:40px;
	margin:0 0.5% 10px;
	background:#e4007f;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	position: relative;
	line-height:40px;
	padding:0 0;
}
#trailerArea ul .half {
	width:48.5%;
	margin:0 0.5% 10px;
}
#trailerArea ul li a {
	width:100%;
	height:100%;
	position:absolute;
	font-size:20px;
	text-align:center;
	color:#FFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#trailerArea ul li a i {
	font-size:18px;
	font-style:normal;
}
#trailerArea ul li a:hover {
text-decoration:none;
color:#FFF;
}

#trailerArea ul li a:active {
text-decoration:none;
}

/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
								3
------------------------------------------------------------------------------*/
.spBnrArea {
	width:200px;
	margin:0 auto 20px;
	position:relative;
	zoom:1;
	overflow:hidden;
}
.spBnrArea li {
	float:left;
	width:100%;
	margin:0.5%;
}
/*------------------------------------------------------------------------------
								4
------------------------------------------------------------------------------*/
/*.spBnrArea {
	width:740px;
	margin:0 auto 20px;
	position:relative;
	zoom:1;
	overflow:hidden;
}
.spBnrArea li {
	float:left;
	width:24.8%;
	margin:0.1%;
}*/
#middle {
	padding:20px 0 0;
}
#billingArea {
	width:660px;
	margin:0 auto;
	height:150px;
	background:url(../../img/sp1203/billing.gif) no-repeat left top;
}
#cast,#billing ,#billing2 {
	text-indent:-999999px;
}
/*------------------------------------------------------------------------------
								SNS
------------------------------------------------------------------------------*/
#snsArea {
	margin:40px auto 0px;
	width:660px;
	padding-left:90px;
}
#snsArea {
	position:relative;
	overflow:hidden;
	zoom:1;
}
#snsArea li {
	float:left;
	position:relative;
	overflow:hidden;
	zoom:1;
}
#snsArea li a {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	text-indent:-999999px;
}
#tw_btn {
	width:275px;
	height:55px;
	padding:0;
	margin-right:10px;
 }
#tw_btn a {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	text-indent:-999999px;
}
#snsIcon {
	width:55px;
	height:55px;
	padding:0px;
	box-sizing:border-box;
	margin-left:10px;
	background:none;
}
.menuSns {
	width:55px;
	height:55px;
	padding:0px;
	box-sizing:border-box;
	margin-left:10px;
}

/*------------------------------------------------------------------------------
								BNR
------------------------------------------------------------------------------*/
.bnrArea {
	width:660px;
	padding-left:10px;
	margin:40px auto 0;
	position:relative;
	overflow:hidden;
}
.bnrArea li {
	float:left;
	width:320px;
	margin:0 10px 10px 0;
}

#udBnrArea {
	width:660px;
	padding-left:10px;
	position:relative;
	overflow:hidden;
	margin:20px auto 0px;
}
#udBnrArea li {
	width:320px;
	margin:0 10px 10px 0;
	float:left;
}
#udBnrArea li:last-child {
	margin-right:0px;
}
/*------------------------------------------------------------------------------
								FOOT
------------------------------------------------------------------------------*/
#footerArea {
	width:100%;
	min-width:740px;
	height:80px;
	position:absolute;
	bottom:0px;
}
#copyright {
	width:540px;
	height: 80px;
	text-indent:-999999px;
	background:url(../../img/top1203/copyrights.png) no-repeat center center;
	background-size:contain;
	margin:0 auto;
}
/*------------------------------------------------------------------------------
								ANIME
------------------------------------------------------------------------------*/

.scaleDownBgOut {
	transform: scale(1.2,1.2);
	opacity: 1.0;
}
.scaleDownBgIn {
	-webkit-transition: all 2.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 2.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleDownMainOut {
	transform: scale(1.5,1.5);
	opacity: 1.0;
}
.scaleDownMainIn {
	-webkit-transition: all 2.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 2.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
@keyframes scale-easeOutBounce {	
	0% {transform: scale(0);}
	12% {transform: scale(0.11);}
	24% {transform: scale(0.44);}
	36% {transform: scale(0.98);}
	54% {transform: scale(0.75);}
	74% {transform: scale(0.98);}
	82% {transform: scale(0.94);}
	92% {transform: scale(0.99);}
	96% {transform: scale(0.98);}
	100% {transform: scale(1);}
}
.topEaseOutBounceOut {
	transform: scale(0.0,0.0);
}
.topEaseOutBounceIn {
	transform: scale(1.0,1.0);
	animation-name: scale-easeOutBounce;
	animation-duration: 1.5s;
}
@keyframes scale-easeOutElastic {
	0% {transform: scale(0);}
	16% {transform: scale(1.1);}
	28% {transform: scale(0.95);}
	44% {transform: scale(1.03);}
	59% {transform: scale(0.99);}
	73% {transform: scale(1.01);}
	88% {transform: scale(1);}
	100% {transform: scale(1);}
}
.topEaseOutElasticOut {
	transform: scale(0.0,0.0);
}
.topEaseOutElasticIn {
	transform: scale(1.0,1.0);
	animation-name: scale-easeOutElastic;
	animation-duration: 1.5s;
}

.fromBottomOut {
	transform: translate(0,40px);
	opacity: 0.0;
}
.fromBottomIn {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: translate(0,0);
	opacity: 1.0;
}
.fromBottomOut2 {
	transform: translate(0,80px);
	opacity: 0.0;
}
.fromBottomIn2 {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: translate(0,0);
	opacity: 1.0;
}
.scaleUpOut {
	transform: scale(0.5,0.5);
	opacity: 0.0;
}
.scaleUpIn {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleUpBtnOut {
	transform: scale(0.5,0.5);
	opacity: 0.0;
}
.scaleUpBtnIn {
	-webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition:         all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleDownOut {
	transform: scale(1.5,1.5);
	opacity: 1.0;
}
.scaleDownIn {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleDownOut2 {
	transform: scale(1.5,1.5);
	opacity: 0.0;
}
.scaleDownIn2 {
	-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition:         all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.scaleDownOut3 {
	transform: scale(1.25,1.25);
	opacity: 0.0;
}
.scaleDownIn3 {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.alphaOut {
	opacity: 0.0;
}
.alphaIn {
	-webkit-transition: all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
	opacity: 1.0;
}
.alphaOut2 {
	opacity: 0.0;
}
.alphaIn2 {
	-webkit-transition: all 1.0s cubic-bezier(0.47, 0, 0.745, 0.715);
	transition:         all 1.0s cubic-bezier(0.47, 0, 0.745, 0.715);
	opacity: 1.0;
}