@charset "utf-8";

body {
	background:#000 url(../../img/bg00.jpg) center center /cover no-repeat fixed;
	/*min-width:1200px;*/
	height:100%;
	min-height:100%;
	font-size:19px;
	font-family: 'EB Garamond', serif;
}

#loadingWrapWrap {
	width: 100%;
	height: 100%;
	background: #fff url(../../common/img/logo_anime_200.gif) center center no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50000;
}

#header .inner {
	width:1080px;
	margin:0 auto;
}

#header #bg_left {
	height:80px;
}

#header #bg_left img {
	width:216px;
	margin:22px 12px 0 8px;
}

#header ul {
	float:left;
	width:600px !important;
	margin-left:40px;
}

#header ul li {
	margin:0 5px;
	padding:24px 0 0;
}

#lang_jp {
	float:right;
	display:block;
	position:relative;
	width:190px;
}
#lang_jp img {
	width:100%;
}

.spbreak {
	clear:none;
	float:left;
}

.wrapper {
	top:0;
	min-height:auto;
}
.wrapper > img {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	z-index:1;
}

.container {
	position:absolute;
	top:80px;
	left:0;
	height:auto;
	min-height:auto;
	padding:30px 0 0;
	z-index:10;
	background:none;
}


#titlelogo {
	clear:both;
	position:relative;
	display:block;
	width:90%;
	margin:30px 0 0 5%;
	z-index:1100;
	/*opacity:0;*/
}
#titlelogo img {
	width:100%;
	
}

#moviearea {
	display:block;
	float:left;
	position:relative;
	margin:9% 0 0 3%;
	width:40%;
	z-index:1100;
}
#youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /*display:none;*/
}
#youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#cast_img {
	float:right;
	position:relative;
	display:block;
	width:64%;
	margin:-30% 0 0;
	z-index:1000;
	/*opacity:0;*/
}

#billing {
	clear:both;
	position:relative;
	display:block;
	width:86%;
	margin:0 auto 1%;
	padding:3% 0 0;
}
#billing img {
	width:100%;
}


h2 img {
	width:100%;
}


/* intro */
#intro {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	margin:0 auto;
	padding:60px 0 0;
	background:#000;
	line-height:2em;
}

#intro > h2 {
	width:48%;
	margin:80px auto 20px;
}

#intro > img {
	display:block;
	width:100%;
}

#intro p {
	width:70%;
	margin:0 auto;
	padding:0 0 40px;
}


/* story */
#story {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	margin:0 auto;
	padding:30px 0 60px;
	background:url(../img/story_bg.jpg) left top;
	background-color:#f1e8d6;
	color:#000;
	line-height:2em;
}
#story h2 {
	width:96%;
	margin:80px auto 20px;
}
#story .boxL {
	float:left;
	position:relative;
	width:44%;
	margin:0 3%;
	padding:40px 0 0;
}
#story .boxR {
	float:right;
	width:44%;
	margin:0 3%;
	padding:0 0 40px;
}

#story .boxL .ph {
	display:block;
	position:relative;
	width:100%;
	padding:15% 0 0;
}
#story .boxL img {
	display:block;
	width:100%;
	margin:30px 0 0;
}


/* director */
#director {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	margin:0 auto;
	padding:100px 0 100px;
	background:#000;
	line-height:2em;
}

#director > h2 {
	width:36%;
	margin:-3.5% 0 20px 5%;
}

#director > img {
	width:100%;
}

#director p {
	width:90%;
	margin:0 auto;
}


/* cast */
#cast {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	margin:0 auto;
	padding:10px 0 30px;
	background:#000;
	line-height:2em;
}

#cast > h2 {
	width:48%;
	margin:80px auto 20px;
}

#cast .contentsBox {
	width:90%;
	margin:0 auto;
}

#cast .boxLtx {
	float:left;
	width:47%;
	margin:0 0 60px;
	line-height:1.8em;
}

#cast .boxRtx {
	float:right;
	width:47%;
	margin:0 0 60px;
	line-height:1.9em;
}

#cast .boxLtx img,
#cast .boxRtx img {
	display:block;
	margin:25px 0 5px;
}

#cast .ph {
	display:block;
	width:100%;
	margin:0;
}

#cast .phi {
	display:block;
	width:100%;
	margin:0 0 10px;
	padding-top:20px;
}

#cast .box3L {
	float:left;
	width:30%;
	margin:0 0 60px;
	line-height:1.8em;
}
#cast .box3C {
	float:left;
	width:30%;
	margin:0 0 60px 5%;
	line-height:1.8em;
}
#cast .box3R {
	float:right;
	width:30%;
	margin:0 0 60px;
	line-height:1.8em;
}

#cast .box3L img,
#cast .box3C img,
#cast .box3R img {
	display:block;
	margin:30px 0 5px;
}

/* staff */
#staff {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:1080px;
	max-width:2860px;
	margin:0 auto;
	padding:10px 0 30px;
	background:#000;
	line-height:2em;
}
#staff > h2 {
	width:48%;
	margin:80px auto 20px;
}

#staff .contentsBox {
	width:90%;
	margin:0 auto;
}
#staff .ph {
	display:block;
	width:94%;
	margin:0 auto;
}
#staff .box3L {
	float:left;
	width:30%;
	margin:0 0 60px;
	line-height:1.8em;
}
#staff .box3C {
	float:left;
	width:30%;
	margin:0 0 60px 5%;
	line-height:1.8em;
}
#staff .box3R {
	float:right;
	width:30%;
	margin:0 0 60px;
	line-height:1.8em;
}

#staff .box3L img,
#staff .box3C img,
#staff .box3R img {
	display:block;
	margin:30px 0 5px;
}
#staff .box3L img.ph,
#staff .box3C img.ph,
#staff .box3R img.ph {
	display:block;
	width:90%;
	margin:30px auto 5px;
}


#trailer {
	display:none;
}

/* yokokuhen */
#yokokuhen {
	background-color:#f1e8d6;
}

/* links */
#links {
	background-color:#f1e8d6;
}

#footer {
	display:block;
	position:relative;
	width:100%;
	min-width:1080px;
	height:40px;
	background:#000;
	z-index:7000;
	/*opacity:0;*/
}

#copyright {
	float:none;
	margin:5px auto 0;
}

@media all and (max-width: 640px) {

body {
	background:#000;
	min-width:100%;
	height:100%;
	min-height:100%;
}

#header {
	display:block !important;
	width:100%;
	min-width:100%;
	height:160px;
	background:#000 url(../../common/img/hd_bg.png) no-repeat;
	background-position: 0 0;
}
#header .inner {
	position:relative;
	width:100%;
	min-width:100%;
	height:160px;
}

#header #bg_left {
	width:100%;
}

#header #bg_left img {
	width:45%;
	max-width:216px;
	margin:22px 12px 0 8px;
}

#header ul {
	clear:both;
	float:none;
	/*width:300px !important;*/
	width:300px !important;
	height:80px;
	margin:0 auto;
}
#header ul li {
	margin:0 5px;
	padding:6px 0 0;
}

#lang_jp {
	float:none;
	position:absolute;
	top:0;
	right:10px;
	width:45%;
	max-width:190px;
}

.spbreak {
	clear:both;
	float:left;
}

.wrapper {
	padding-top:160px;
}

.wrapper > img {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
}

#contents {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:auto;
	margin:0 auto;
	padding:0 0 2%;
	overflow:hidden;
}

#moviearea {
	display:none;
}

#cast_img {
	display:none;
}

#titlelogo {
	display:none;
}

#billing {
	display:none;
}



#intro {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:40px 0 0;
	background:#000;
	line-height:2em;
}

#intro > h2 {
	width:90%;
	margin:80px auto 20px;
}

#intro > img {
	display:block;
	width:100%;
}

#intro p {
	width:90%;
	margin:0 auto;
	padding:0 0 40px;
}

#story {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:30px 0 60px;
	background:url(../img/story_bg.jpg) left top;
	color:#000;
	line-height:2em;
}
#story h2 {
	width:100%;
	margin:10px auto 20px;
}
#story .boxL {
	float:none;
	position:relative;
	width:90%;
	margin:0 auto;
	padding:40px 0 0;
}
#story .boxR {
	float:none;
	position:relative;
	width:90%;
	margin:0 auto;
	padding:0 0 40px;
}

#story .boxL .ph {
	display:none;
}
#story .boxL img {
	display:block;
	width:100%;
	margin:30px 0 0;
}

#story .boxR img {
	display:block;
	width:100%;
	margin:30px 0 0;
}
#story .boxR img.center {
	display:block;
	width:100%;
	margin:0 0 30px;
}

#director {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:30px 0 50px;
	background:#000;
	line-height:2em;
}

#director > h2 {
	width:94%;
	margin:1% 0 20px 3%;
}

#director p {
	width:90%;
	margin:0 auto;
}

#cast {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:10px 0 30px;
	background:#000;
	line-height:2em;
}
#cast > h2 {
	width:90%;
	margin:40px auto 20px;
}

#cast .boxLtx {
	float:none;
	width:100%;
	margin:0 0 60px;
	line-height:1.8em;
}

#cast .boxRtx {
	float:none;
	width:100%;
	margin:0 0 60px;
	line-height:1.8em;
}

#cast .box3L {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}
#cast .box3C {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}
#cast .box3R {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}

#staff {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:10px 0 30px;
	background:#000;
	line-height:2em;
}
#staff > h2 {
	width:90%;
	margin:40px auto 20px;
}

#staff .box3L {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}
#staff .box3C {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}
#staff .box3R {
	float:none;
	width:100%;
	margin:0 0 50px;
	line-height:1.8em;
}

#trailer {
	display:block;
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-width:100%;
	max-width:100%;
	margin:0 auto;
	padding:10px 0 50px;
	background:#000;
	line-height:2em;
}
#trailer > h2 {
	width:90%;
	margin:80px auto 10px;
}

#trailer #moviebox {
	width:90%;
	margin:0 auto;
	
}
#trailer #youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /*display:none;*/
}
#trailer #youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


#footer {
	display:block;
	position:relative;
	width:100%;
	min-width:100%;
	height:40px;
	background:#000;
	z-index:7000;
	/*opacity:0;*/
}
}


@media all and (max-width: 390px) {

#lang_jp img {
	margin-top:5px;
}

.sp2only {
	/*display:none;*/
}

}

@media all and (max-width: 360px) {


}