/*バナーフッター部分*/
/*
幅が変わる時はここのwidthも変える。bannerBackだけはpaddingが入るので左右の値を引いた数。
bannerBackのbackground-imageのURLを変えれば、差し替えれる（他は影響ないです。）
*/
div#header{	clear:both;	width:720px; height:40px; margin:0px auto;	padding:0px;	background-color:#000;}
div#footer{background-image:	url(../images/footer_3ds.jpg); background-color:#000000; clear:both; width:720px; height:54px; margin:0px auto; background-repeat: no-repeat;}
div#copylight{
	clear:both; width:800px;height:70px; margin:0px 50px 0px 50px; font-size:9pt; font-weight:normal; color:#FFF;
	text-shadow:0px -1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000, -1px 0px 0px #000, -1px -1px 0px #000, 2px 2px 3px #000;
	text-align:center; line-height:14px; letter-spacing:2px;
}
.youtube01{
	width:800px;height:390px;
}

/*下部バナー部分のスタイル。無いとデフォルトスタイルを自動で設定しますが、必要な場合は「バナー終わり」までと600ｐｘ以下の設定を必ず入れてください。*/
#bannerTitle{
	width:900px;
	height:40px;
	text-align:center;
}
#bannerBack{
width:900px; margin:0px 0px 0px 0px; text-align:center;
background-image:url('../images/banner_3ds_bg.gif'); 
padding:0;
}
#banner_img{
	width:780px; height:40px; border:0;
}
/*バナー終わり*/

/*バナーフッター部分終わり*/


body
{
	margin:0px auto 0px auto;
	background: #ffffff fixed 50% top;
	background-image:url(../images/all_bg.png); 
	font-size:	15pt;
	font-weight:	normal;
	color:	#000;
	text-align:	left;
	padding:0px;
}

.main{clear:both; width:900px; margin :0 auto; text-align:left; border 1px solid #ff0000; }

div#main_content{
	background-image:	url(../images/top.png);	background-attachment:	scroll;	background-position:	top;	background-repeat:	no-repeat;	clear:both;
	width:720px;	height:450px;	margin:0px auto 0px auto ;	padding:0px;	background-color:#FFF;}
div#main_content2{	background-image:	url(../images/a_top_dx2.png);	background-attachment:	scroll;	background-position:	top;	background-repeat:	no-repeat;
		clear:both;	width:720px;	height:250px;	margin:0px auto 0px auto ;	padding:0px;	background-color:#FFF;}
div#MainMenu{	margin:auto auto 0px auto;	position:relative;	width:720px;}
div#SubMenu{	margin:auto auto 0px auto;	position:relative;	width:720px;	background-color:#FFF;}
.MainMenu{width: 900px; height: 88px; margin:0px 0px 0px 0px; padding:12px 0px 0px 0px; text-align:center;background-image:url('../images/menu_back.png');}
.contents{	width:900px;	text-align:center;	background-color:#FFFFFF;}
.contents2{	width:900px;	text-align:center;}

.contents_main{
	padding:0px 0px 0 0px;
	margin:0px 0px 0px 0px;
	background-color:#FFFFFF;
}
.top_movie{
	position:absolute;
	left: 20px; top: 280px;
	float:none;
}
.headcopy{
	width:900px;
	height:447px;
	position:relative;
}


/* 画像コンテンツ */
.btn1{
	padding:0px 0px 0px 0px;
	width:332px;
}
.widthMax{
	margin:0px auto 0 auto;
	padding:0px;
	width:814px; 
	vertical-align:bottom;
}
.widthContent{
	padding:0px;
	margin:0px auto 0 0;
	width:720px; 
}
.harfContent{
	margin:0px auto 0 auto;
	width:380px; 
}

.btn1{
	padding:0px 0px 0px 0px;
	width:166px;
}

/* 画像コンテンツ ここまで */



/* CSS3 ModalWindow SET
-------------------------- */
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
    width:900px;
}
div#main_content{background: #FFF url('../images/top.png') no-repeat 50% top; 
clear:both; width:900px; height:450px; margin:0px auto 0px auto; padding:0px;
}
div.main_content_02{background: #FFF url('../images/a_top.png') no-repeat 50% top; 
clear:both; width:900px;	height:200px; margin:0px auto 0px auto; padding:0px;
}
div.sub_content{font-family:Arial, Helvetica, sans-serif; clear:both; width:900px; height:auto; margin:0px auto 0px auto ; padding:0px;}
.menu_content{font-family:Arial, Helvetica, sans-serif; clear:both; width:900px; height:auto; margin:0px auto 0px auto; padding:0px; background-image:url('../images/menu_back.png');
}
div#MovieMenu{
	margin:auto auto 0px auto;
	position:relative;
}
div#movie{
	clear:both;
	position:relative;
	left: -320px;
	top: -100px;
}
#youtube{
	width:640px;
	height:390px;
}

.close_overlay {top: 0; left: 0; width: 100%; height: 150%; display: block; text-indent: -9999px; position: fixed; background: #000; opacity: 0.5; z-index: 5;}
#open01,#open02 {top: 0; left: 0; width: 100%; height: 100%; display: none; position: absolute;}
.modal_window {top: 50%; left: 50%; margin: -0px 0 0 -0px; width: 10px; height: 10px; text-align: center; display: block; background: #fff; position: fixed; z-index: 10;}
.modal_window p {padding: 0 15px 15px 15px; font-size: 12px; line-height: 160%; text-align: left;}
.youtube01 iframe {width: 640px; height: 480px;}
.pagetop_btn{background-image:url('../images/pagetop_btn.png'); width:300px; height:60px; background-size:contain; background-repeat: no-repeat; margin-left:270px;}
/* CSS3 ModalWindow SET- */


/*サイズ変更　600px以下の場合　今回はとりあえず封印*/
@media screen and (max-width: 10px){

.main{clear:both; width:320px; margin :0 auto; text-align:left; 
}
/*バナーフッター部分*/
/*
幅が変わる時はここのwidthも変える。bannerBackだけはpaddingが入るので左右の値を引いた数。
bannerBackのbackground-imageのURLを変えれば、差し替えれる（他は影響ないです。）
*/
div#header{width:320px; background-size:contain; overflow:hidden;}
div#footer{width:320px;height:54px; background-size:contain; overflow:hidden;}
div#copylight{clear:both; width:300px;height:100px; margin:0px 0px 0px 0px; padding:0px 10px 0px 10px; font-size:9pt; font-weight:normal; color:#FFF;overflow:hidden;
	text-shadow:	0px -1px 0px #000, 1px -1px 0px #000, 1px 0px 0px #000, 1px 1px 0px #000, 0px 1px 0px #000, -1px 1px 0px #000, -1px 0px 0px #000, -1px -1px 0px #000, 2px 2px 3px #000;
	text-align:left; line-height:14px; letter-spacing:2px;}

/*下部バナー部分のスタイル。無いとデフォルトスタイルを自動で設定しますが、必要な場合は下二つを必ず入れてください。*/
#bannerTitle{
	margin:0px auto 0px 0px;
	width:320px;
	height:40px;
	text-align:center;
}

#bannerBack{
width:320px; margin:0px 0px 0px 0px; text-align:center;
background-image:url('../images/banner_3ds_bg.gif'); 
padding:0;background-color:#FFFFFF;
}	
#banner_img{
	width:320px; height:40px; border:0;
}





/*バナーフッター部分終わり*/


.contents{
	width:320px;

	padding:0px 0px 0px 0px;
	margin:0px;
	background-color:#FFFFFF;
}
.contents2{
	width:320px;
	padding:0px 0px 0 0;
}

	.MainMenu{width: 320px; height: 250px; margin:0px 0px 0px 0px; padding:20px 0px 0px 0px; text-align:center;background-image:url('../images/menu_phone-back.png');}
.contents_main{
	padding:0px 0px 0 0px;
	background-color:#FFFFFF;
}
.top_movie{
	position:absolute;
	left: 50px; top: 160px;
	float:none;
}

.headcopy{
	width:320px;
	height:320px;
	position:relative;
}

	.btn1{
		padding:0px 0px 0px 0px;
		width:150px;
	}
	.widthMax{
	
		margin:0px auto 0 auto;
		width:320px;
		vertical-align:bottom;
	}
	.widthContent{
		margin:0px auto 0 auto;
		width:305px; 
	}
	.harfContent{
		margin:0px auto 0 auto;
		width:305px; 
	}
	#youtube{
		width:320px;
		height:180px;
	}
	div#movie{
		clear:both;
		position:relative;
		left: -170px;
		top: -250px;
	}

}