@charset "UTF-8";

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	padding: 0;
	margin: 0;
	border:0;
	text-decoration:none;
	font-weight:normal;
	font-style: normal;
}
html {
	width: 100%;
	overflow-y: scroll;
	font-size: 62.5%;
}
/* body */
body {
	width: 100%;
	font-size: 120%;
  background-color:#1c1c1c;
	color: #fff;
	text-align:center;
	-webkit-text-size-adjust: 100%;
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

*:focus {
	outline: none;
}
/* ul | ol */
ul, ol {
	list-style: none;
	line-height: 0;
}
/* dl */
dl {
	line-height: 0;
}
/* font */
h1,h2,h3,h4,h5,h6,
p, li, dt, dd, th, td {
	font-size: 100%;
	line-height:1.85;
}
/* table */
table {
	border-collapse: separate;
	border-spacing: 0;
	empty-cells: show;
}
caption, th {
	text-align: left;
}
/* strong | em */
strong, em {
	font-style: normal;
	font-weight: bold;
}
/* img */
img {
	vertical-align: bottom;
	border: 0;
	max-width:100%;
	height:auto;
	-moz-user-select: none;
	-webkit-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
/* sup | sub */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
/* a */
a {
	text-decoration:none;
	background: transparent;
	cursor: pointer;
	outline:none;
}
a:link,
a:visited,
a:focus {color: #fff;}
a:hover {
	color: #fff;
	text-decoration:none;
}
/* code | kbd | pre | samp */
code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}
pre {
	white-space: pre-wrap;
}
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
iframe{
	vertical-align:bottom;
	border:0;
	background:transparent;
}
address{
	font-style:normal;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}
/* audio | canvas | video */
audio,
canvas,
video {
	display: inline-block;
}
[hidden],
template {
	display: none;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
/* dfn */
dfn {
	font-style: italic;
}
/* mark */
mark {
	background: #ff0;
	color: #000;
}
/* svg */
svg:not(:root) {
	overflow: hidden;
}
/* fieldset */
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
/* legend */
legend {
	border: 0;
}
/* form */
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}
/* small */
small{
	font-size:12px;
}

/* clearfix
------------------------------------------------*/
div.clear {
	clear: both;
	height: 0px;
	width: 0px;
	font-size: 0px;
	line-height: 0px;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* ----------- wrapper ----------- */
body{
	position:relative;
	height:100%;
	overflow:hidden;
}
#wrapper {
	margin: 0 auto;
	background-color:#000;
	overflow: hidden;
	padding-top:50px;
}
#wrapper:before{
	content:"";
	position:fixed;
	top:50%;
	left:50%;
	background:url(../../img/common/loading.gif) no-repeat 0 0;
	background-size:100% auto;
	width:32px;
	height:32px;
	-webkit-transform:translate(-50%,-50%);
	    -ms-transform:translate(-50%,-50%);
	        transform:translate(-50%,-50%);
}
#wrapper > *{
	opacity:0;
	-webkit-transition: opacity .4s ease-out;
	transition:opacity .4s ease-out;
}
.loaded{
	position:static;
	height:auto;
	overflow:visible;
}
.loaded #wrapper:before{
	display:none;
}
.loaded #wrapper > *{
	opacity:1;
}

/* ----------- heder ----------- */
#header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:50px;
	z-index:100;
	background-color:#1a1a1a;
}
#header:after{
	content:"";
	clear:both;
	display:block;
}
#header .logo{
	position:absolute;
	top:5px;
	left:50%;
	-webkit-transform:translate(-50%,0);
	    -ms-transform:translate(-50%,0);
	        transform:translate(-50%,0);
}
#gNavMenu{
	position:absolute;
	top:14px;
	right:20px;
	width:30px;
	height:30px;
}
#gNavMenu span{
	display:block;
	position:relative;
	width:30px;
	height:2px;
	background-color:#fff;
}
#gNavMenu span:before{
	content:"";
	position:absolute;
	top:9px;
	left:0;
	width:100%;
	height:2px;
	background-color:#fff;
}
#gNavMenu span:after{
	content:"";
	position:absolute;
	top:18px;
	left:0;
	width:100%;
	height:2px;
	background-color:#fff;
}
#gNav{
	display:none;
	margin-top:50px;
}
#gNav ul{
	padding-bottom:30px;
}
#gNav li{
	color:#636363;
	line-height:42px;
	min-height:42px;
	font-size:18px;
}
#gNav a{
	display:block;
	padding:0 5px;
}

#header.gnavon{
	height:100%;
	overflow-y:auto;
	background:url(../img/common/bg_gnav.png) no-repeat 0 0 #1a1a1a;
	background-size:320px auto;
}
#header.gnavon ~ *{
	opacity:0;
}
#header.gnavon .headerInner{
	position:relative;
}
#header.gnavon #gNav,
#header.gnavon .blockR{
	display:block;
}
#header.gnavon #gNavMenu{
	right:30px;
	top:20px;
	-webkit-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	        transform:rotate(45deg);
}
#header.gnavon #gNavMenu:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:30px;
	height:2px;
	background-color:#fff;
	-webkit-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
	        transform:rotate(90deg);
}
#header.gnavon #gNavMenu span:before,
#header.gnavon #gNavMenu span:after{
	opacity:0;
}

/* ----------- footer ----------- */
#footer {
	margin: 0 auto;
	color: #fff;
	font-size: 12px;
	background: #1c1c1c;
	position: relative;
}
#footer #footerInner {
	margin: 0 auto;
	padding: 8% 0;
	position: relative;
}
#footer #copyright {
	margin: 0 auto;
}
#footer #copyright {
	text-align: center;
}
#shareArea {
	margin: 0 auto 8%;
}
#shareArea li {
	margin: 0 2%;
	display: inline-block;
}

#pagetop{
	display:none;
	position:fixed;
	right:10%;
	bottom:50px;
	font-size:0;
	z-index:100;
}
.scroll #pagetop{
	display:block;
}
#pagetop a{
	display:block;
	background:url(../../img/common/pagetop.png) no-repeat 0 0;
	background-size:100% auto;
	width:43px;
	height:43px;
	text-indent:-999px;
	overflow:hidden;
	text-align:left;
}

/*
    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; -webkit-transform: translate3d(0,0,0);}
#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{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-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.8; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{padding-top:22px; overflow:visible; background:#000;}
        .cboxIframe{}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{
					background:url(../../img/common/loading.gif) no-repeat center center;
					background-size:32px auto;
				}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* 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; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

#cboxContent {
	margin: 0;
	background: none;
}
#cboxLoadedContent {
	background: none;
}
#cboxLoadingOverlay {
	background: none;
}
#cboxClose {
	width: 18px;
	height: 18px;
	background:url(../../img/common/btn_close.png) no-repeat 0 0;
	background-size: contain;
	top: 0;
	right: 0;
}
#cboxClose:hover {
	background-position: 0;
	opacity: 0.7;
}

#cboxPrevious {
	width: 50%;
	height: 100%;
	background-size: 40px;
	top: 0;
	left: 0;
}
#cboxPrevious:hover {
	background-position: left 20px top 50%;
	opacity: 0.7;
}
#cboxNext {
	width: 50%;
	height: 100%;
	background-size: 40px;
	top: 0;
	right: 0;
}
#cboxNext:hover {
	background-position: right 20px top 50%;
	opacity: 0.7;
}