@charset "utf-8";
/* CSS Document */

/* ------------------------------------------  
COMMON
------------------------------------------ */
*{
	margin:0;
	padding:0;
}

html {
	overflow-y: scroll;
}

body {
	height: 100%;
	margin: 0 auto;
	-webkit-text-size-adjust: 100%;
	color:#f2ecc7;
	background:#000000;
	text-align:center;
	font-size:medium;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}

a			{outline: none; color: #f2ecc7; text-decoration:underline;}
a:visited	{color: #f2ecc7;}
a:hover		{color: #f2ecc7;}
a:active	{color: #f2ecc7;}

img {
	border:none;
	max-width: 100%;
	width: auto\9;
	height: auto;
	vertical-align:bottom;
}

a img:hover	{
	opacity: 0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
}

#wrapper {
	/*width: 100%;*/
	min-width:1024px;
	overflow:hidden;
}



/* ------------------------------------------  
HEADER
------------------------------------------ */
header{
	width:100%;
	text-align:center;
}

	h1{
		padding:30px 0;
	}

		h1 a{
			color:#999999;
			font-size:150%;
			text-decoration:none;
		}

		h1 a:visited{
			color:#999999;
		}

		h1 a:hover{
			opacity:0.6;
			filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60);
		}



			
/* ------------------------------------------  
CONTENTS BASE
------------------------------------------ */
#contents {
	max-width:1024px;
	width:98%;
	margin:0 auto;
	position:relative;
	z-index:101;
	padding-bottom:40px;
	text-align:center;
}

p.font_l{
	font-size:120%;
}

	
/* footer */
footer{
	width: 100%;
	color:#f2ecc7;
	font-size:90%;
	background:#333;
}

	#copy{
		width: 1000px;
		margin: 20px auto;
		padding:30px 20px 0;
		text-align:center;
	}

		#copy p{
			color:#999999;
			display:block;
		}
		
		#copy a{
			color:#999999;
			text-decoration:none;
		}
	
		#copy a:hover{
			border-bottom:1px dotted #999999;
		}



/* ------------------------------------------  
BOX
------------------------------------------ */
.box{
	margin:0 1% 40px;
	padding:70px 80px 30px;
	width:98%;
	clear:both;
	background:#333;
	box-sizing:border-box;
}

.box p{
	text-align:left;
	margin-bottom:30px;
}

.box p.center{
	text-align:center;
}



/* ------------------------------------------  
TITLE
------------------------------------------ */
h2{
	clear:both;
	line-height:1.3em;
	margin:0 1% 40px;
	font-size: 180%;
	font-weight:bold;
	color:#999999;
}



/* ------------------------------------------  
BUTTON
------------------------------------------ */
div.button{
	width:100%;
	text-align: center;
	margin: 20px auto 50px;
	clear:both;
	font-size:100%;
}

	.button a,
	.button a:visited{
		min-width:150px;
		position: relative; 
		overflow: visible; 
		display: inline-block;
		padding: 15px 3em 13px 3em; 
		margin: 10px auto;
		color: #ffffff;
		font-weight:bold;
		text-decoration: none;
		cursor: pointer; 
		background:#415e9b;
		border-radius: 4px;
		zoom: 1; 
		*display: inline;
	}
	
	.button a:hover,
	.button a:active{
		text-decoration:none;
		opacity: 0.7;
		filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70);
	}

	.half .button{
		margin: 0 auto 10px;
	}


	
/* ------------------------------------------  
for - 768px
------------------------------------------ */
@media screen and (max-width:768px) {
	
/* base 768 */
#contents {
	width:100%;
	margin:20px auto 0;
}


}


/* ------------------------------------------  
for - 640px
------------------------------------------ */
@media screen and (max-width:640px) {
	

}


/* ------------------------------------------  
CLEARFIX-HACK
------------------------------------------ */
#header-container_pc:after,
.header-right:after,
.header-left:after,
#contents:after,
#main:after,
footer:after,
#footer-inner:after,
.copy:after,
.grid1:after,
.grid2:after,
.grid3:after,
.half:after,
.box:after,
.bn_area:after,
#pagemove:after,
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;}

#header-container_pc,
.header-right,
.header-left,
#contents,
#main,
footer,
#footer-inner,
.copy,
.grid1,
.grid2,
.grid3,
.half,
.box,
.bn_area,
#pagemove,
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html #header-container_pc,
* html .header-right,
* html .header-left,
* html #contents,
* html #main,
* html footer,
* html #footer-inner,
* html .copy,
* html .grid1,
* html .grid2,
* html .grid3,
* html .half,
* html .box,
* html #pagemove,
* html .bn_area,
* html .clearfix{height: 1%;}

#header-container_pc,
.header-right,
.header-left,
#contents,
#main,
footer,
#footer-inner,
.copy,
.grid1,
.grid2,
.grid3,
.half,
.box,
#pagemove,
.bn_area,
.clearfix{display: block;}
/* End hide from IE-mac */