@charset "UTF-8";
/*
 *
 * $reset
 *
 *
*/
body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, 
brockquote, pre, table, caption, th, td, address, 
form, fieldset, legend, object, input{margin:0;padding:0;}
h5, h6, pre, table, code, kbd, samp, acronym, input, textarea, select{font-size:100%;}
a, ins{text-decoration:none;}
address, em, cite, dfn, var{font-style:normal;}
input, textarea{/*font-family:sans-serif;*/font-weight:normal;}
img{vertical-align:baseline;}
a img{border:none;margin:0;}
* html body{ /* for IE6 */font-size:small;}
*:first-child+html body{ /* for IE7 */font-size:small;}
ul{list-style-position:outside;list-style-type:none;}
ol{list-style-position:outside;margin-left:20px;}
table{border-collapse:collapse;/*word-break: break-word;*/}
legend{	color: #333;}
div, pre{word-wrap: break-word}
pre{white-space: pre-wrap;}
iframe{border:0;padding:0;}
a.colorbox{outline:none;}
img{
	vertical-align:bottom;
}
/*------------------------------------------

	#Common

------------------------------------------*/
html{margin:0;padding:0;height: 100%;}
body{
	height: 100%;
	background:url(../img/com_bg_005.jpg) repeat center top;
}
#wrap{
	position:relative;
	min-width: 320px;
	max-width: 720px;
	margin:0 auto;
	background:url(../img/com_bg_001.png) repeat-y center top;
	background-size:cover;
	box-shadow:0px 0px 17px 0px #30001a;
}

	#wrap #wrapInner{
		height: 100%;
		background:url(../img/com_bg_002.png) repeat-y center top;
		background-size:121px auto;
	}
	
	/* #SNS */
	#wrap #sns{
		margin:0% 0% 3% 23%;
		overflow:hidden;
		zoom:1;
	}
	#wrap #sns li{
		width: 23%;
		float:left;
	}
	
	/* #footer */
	#wrap #footer{
		box-shadow:0px -20px 17px -17px #30001a;
		background:url(../img/com_bg_003.png) repeat center top;
		
	}
		#footer ul{
			padding:10px 10px 0;
		}
		#footer li{
			line-height:100%;
			font-size:0;
			margin:0 0 5px;
		}
		#footer li a{
			display:block;
		}
	
		.ftBanner{
			margin:10px 0px;
		}
		#footer p{
			padding:10px 10px 15px 10px;
		}
		#footer small{
			width:100%;
			display:block;
			padding:0px 0px 5px 0px;
			background:url(../img/com_bg_004.png) repeat-x left top;
			background-size:auto 25px;
			text-align:center;
		}
		#footer small img{
			height:10px;
			width:auto;
		}
		#footer #banner{
			margin:0px 0px 10px 0px;
		}
		#footer #banner li{
			margin:0px 0px 10px 0px;
		}
	/* contents */
	#wrap section{
		margin:0px 10px 20px 10px;
		padding:10px 10px 0px 10px;
		background:url(../img/com_bg_006.jpg) repeat center top;
		box-shadow:0px 0px 20px 1px #190321;
		overflow:hidden;
	}
	#wrap section article{
		margin:0px 0px 10px 0px;
		background:#efeadb;
		box-shadow:0px 0px 6px -1px #332106 inset;
	}
	#wrap section article .inner{
		padding:10px;
	}
	#wrap section h2{
		margin:0px 0px 10px 0px;
	}
	#wrap section h2 img{
		vertical-align:middle;
	}
#navBtn{
	position:fixed;
	right:10px;
	top:10px;
	width:46px;
	height:46px;
	text-indent:-9999px;
	background:url(../img/com_nv_001.png) no-repeat left top;
	background-size:46px auto;
}
#navBtn.close{
	background-position:0px -46px;
}
nav{
	position:fixed;
	top:0;
	left:100%;
	width:100%;
	height:100%;
	background:url(../img/com_bg_007.jpg) repeat center center;
}
nav div{
	min-width: 320px;
	max-width: 720px;
	margin:0 auto;
}
nav div ul{
	margin:65px 0px 0px 0px;
}
nav div ul li{
	margin:0px 20px 10px 20px;
}
nav div ul li a,
nav div ul li span{
	border-radius:10px;
	padding:10px 0px;
	text-align:center;
	display:block;
	background:#68003d url(../img/com_bg_008.jpg) repeat center center;
	color:#ffffff;
	font-size:18px;
}
nav div ul li span{
	background:#555555;
}
/*------------------------------------------

	#innerTop

------------------------------------------*/
#innerTop{
	position:relative;
	height: 0;
	padding:0% 0% 144.21875% 0%;
	background:url(../img/top_mi_001.png) no-repeat center top;
	background-size:100% auto;
}
	#innerTop h1{
		text-indent:-9999px;
	}
	/*story*/
	#innerTop p#story{
		position:absolute;
		left:3%;
		bottom:20%;
		width:136px;
		height:136px;
	}
	#innerTop p#story a{
		display:block;
		height:136px;
		background:url(../img/top_bt_001.png) no-repeat left top;
		background-size:136px auto;
		text-indent:-9999px;
	}
	/*notice*/
	#innerTop p#notice{
		position:absolute;
		right:8%;
		bottom:26%;
		width:113px;
		height:116px;
	}
	#innerTop p#notice a{
		display:block;
		width:138px;
		height:116px;
		background:url(../img/sto_bt_002.png) no-repeat left top;
		background-size:138px auto;
		text-indent:-9999px;
	}
	img.cboxPhoto{
		text-align:center;
		width:50%;
		height:auto;
	}
	button#cboxClose{
		right:-15px;
	}
/*--------------------------------------------------------------------------
 *
 * Story
 *
 *
--------------------------------------------------------------------------*/
#storyBody{
	display:none;
	overflow:hidden;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../img/sto_bg_001.png) repeat center center;
	background-size:64px auto;
}
#storyBody div{
	position:relative;
	width:300px;
	margin:15px auto 0px auto;
}
#storyBody div p.close{
	position:absolute;
	right:10px;
	top:5px;
}
#storyBody div article{
	width:277px;
	margin:10px auto 0 auto;
	height:380px;
	overflow:scroll;
}
#storyBody div article .banner{
	margin:20px 0px 0px 0px;
}

/*--------------------------------------------------------------------------
 *
 * Mission
 *
 *
--------------------------------------------------------------------------*/
img{
	vertical-align:bottom;
}
#sec1 h4{
	margin:10px 0px 0px 0px;
}

#sec5 h4{
	margin:10px 0px;
}







/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box;box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-right:33px;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{ }
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../img/cbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious,
        #cboxNext{display:none;}
        #cboxClose{position:absolute; top:0px; right:0px; display:block; background:url(../img/cbox/close.png) no-repeat top center; width:42px; height:42px; text-indent:-9999px;}