@charaset"UTF-8";

/*==================================================================*/
/* common css */
/*==================================================================*/
html{
	height:100%;
	}
body{
	margin:0;
	padding:0;
	color:#444;
	min-width:1400px;
	height:100%;
	line-height:1.6;
	background:#eee;
	font-family:Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:16px;
	letter-spacing:1px;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
	}
	
a{outline:none;text-decoration:none;}
a:hover{}

img{border:none;vertical-align:bottom;}
.sp{display:none;}


/* -------------------------------------------------------------- */
/* header */
/* -------------------------------------------------------------- */
header *{margin:0;padding:0;}
header{
	margin:0 auto;
	height:90px;
	border-bottom:1px solid #eee;
	background:#fff;
	position:fixed;
	top:0;left:0;right:0;
	z-index:3;
	}

header div{
	margin:0 auto;
	width:1400px;
	}
	/* clear hack */
	header div{zoom:1;}
	header div:after{content:".";clear:both;height:0;display:block;visibility:hidden;}

header p{float:left;}
header p img{margin:0 0 0 210px;}

header nav{float:right;}
header ul{
	margin:19px 210px 0 0;
	width:484px;
	}
	/* clear hack */
	header ul{zoom:1;}
	header ul:after{content:".";clear:both;height:0;display:block;visibility:hidden;}

header li{
	float:left;
	list-style:none;
	height:57px;
	text-align:right;
	}

header #nav-about{width:158px;}
header #nav-entry{width:157px;}
header #nav-circuit{width:169px;}

header li a{
	margin:0 0 0 auto;
	display:inline-block;
	height:57px;
	line-height:57px;
	text-align: center;
	text-decoration: none;
	outline: none;
	text-align:right;
	}
header li span{display:none;}
	
header #nav-about a{width:108px;background:url('../image/nav_about.png') no-repeat 100% 0}
header #nav-entry a{width:107px;background:url('../image/nav_entry.png') no-repeat 100% 0}
header #nav-circuit a{width:119px;background:url('../image/nav_circuit.png') no-repeat 100% 0}

header #nav-about a:hover{background:url('../image/nav_about_on.png') no-repeat 100% 0;}
header #nav-entry a:hover{background:url('../image/nav_entry_on.png') no-repeat 100% 0;}
header #nav-circuit a:hover{background:url('../image/nav_circuit_on.png') no-repeat 100% 0;}

header li a::before,
header li a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
header li a,
header li a::before,
header li a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	}

/* headeroom */
.headroom {position:fixed;top:0;left:0;right:0;transition: all .2s linear;}
.headroom--unpinned {top: -90px;}
.headroom--pinned {top: 0;}


/* -------------------------------------------------------------- */
/* container */
/* -------------------------------------------------------------- */
#container{
	margin:0 auto;
	width:1400px;
	background:#fff;
	position:relative;
	}

/* -------------------------------------------------------------- */
/* .pagetop */
/* -------------------------------------------------------------- */
.pagetop *{margin:0;padding:0;}
.pagetop{
    position: fixed;
    bottom:140px;
    right:20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
	}

/* -------------------------------------------------------------- */
/* footer */
/* -------------------------------------------------------------- */
footer *{margin:0;padding:0;}
footer{
	padding:20px 0 10px;
	min-width:1400px;
	background:url('../image/back.png') repeat 50% 50%;
	}
footer p{
	margin:0 auto 1em;
	width:1400px;
	color:#fff;
	text-align:center;
	font-size:12px;
	}
footer a{color:#fff;}
footer a:hover{color:#06e;}


/*==================================================================*/
/* error css */
/*==================================================================*/
#error{
	margin:0 auto;
	padding:120px 0 8em;
	background:url('../image/back.png') repeat-x 50% -120px;
	text-align:center;
	}
#error h1{
	margin:0 0 2em;
	padding:1em 0 2em;
	color:#f00;
	background:url('../image/check.png') no-repeat 50% 100%;
	}
#error p{
	margin:0 auto;
	padding:0;
	width:540px;
	color:#f00;
	font-size:18px;
	}
#error ul{
	margin:0 auto;
	padding:0;
	width:360px;
	color:#f00;
	font-size:18px;
	text-align:left;
	}
#error li{
	margin:0 0 1em;
	}

#error p.return{
	margin:7em 0 0;
	padding:0 0 8em;
	width:auto;
	background:url('../image/check.png') no-repeat 50% 100%;
	font-size:16px;
	}

#error a{
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:3px solid #06e;
	display:inline-block;
	width:300px;
	height:80px;
	line-height:80px;
	color:#06e;
	background:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	outline:none;
	}

#error a::before,
#error a::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	}
#error a,
#error a::before,
#error a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	}
#error a:hover{
    cursor:pointer;
	color:#fff;
	background:#06e;
	}

/* wait */
#wait #error{padding:120px 0 4em;}
#wait  #error h1{color:#000;background:none;}

/*==================================================================*/
/* smart css */
/*==================================================================*/
@media screen and (max-width:567px){
*{-webkit-appearance:none;}
html{height:100%;}
body{
	min-width:100%;
	height:100%;
	line-height:1.6;
	font-size:1em;
	background:#fff;
	}

img{width:auto;max-width:100%;height:auto;}
.sp{display:none;}
.sp1{display:block;}

/* header */
header{padding:0;height:3em;}
header div{
	margin:0 auto;
	padding:0.4em 0 0;
	width:90%;
	text-align:center;
	}
header p{margin:0 auto;width:auto;float:none;}
header p img{margin:0 auto;width:36%;}
header nav{display:none;}

/* headeroom */
.headroom--unpinned {top: -3em;}

/* iphone5*/
@media screen and (max-width:320px){
header{height:2.5em;}
.headroom--unpinned {top: -2.5em;}
}

/* container */
#container{width:auto;}

#error{padding:60px 0 4em;}
#error h1{
	margin:0 0 2em;
	padding:1em 0;
	color:#f00;
	background:url('../image/check.png') no-repeat 50% 100%;
	}
#error p{width:80%;}
#error ul{width:80%;}
#error p.return{margin:7em 0 0;padding:0 0 4em;}
#wait  #error h1 img{width:90%;}

.pagetop{bottom:3.5em;right:0.5em;display:none;}

footer{padding:1em 0;min-width:100%;}
footer p{width:auto;font-size:0.5em;}
}

/*==================================================================*/
/* tablet css */
/*==================================================================*/
@media screen and (min-width:568px) and (max-width:1280px){
*{-webkit-appearance:none;}
html{height:100%;}
body{
	min-width:100%;
	height:100%;
	line-height:1.6;
	font-size:1em;
	background:#fff;
	}

img{width:auto;max-width:100%;height:auto;}
.sp{display:none;}
.sp1{display:block;}

/* header */
header{padding:0;height:3em;}
header div{margin:0 auto;padding:0;width:90%;}
header p{margin:0 auto;padding:0.5em 0 0;width:auto;width:25%}
header p img{margin:0 auto;width:75%;vertical-align:middle;}
header nav{width:35%;}
header ul{margin:0;width:100%;}
header li{list-style:none;height:auto;text-align:center;}
header li span{display:block;}

header #nav-about,
header #nav-entry,
header #nav-circuit{width:33%;}

header li a{
	margin:-18% 20% 0;
	width:auto;
	height:auto;
	line-height:auto;
	text-align:center;
	}
header li img{width:50%;}

header #nav-about a,
header #nav-entry a,
header #nav-circuit a{width:100%;background:none;}

header #nav-about a:hover,
header #nav-entry a:hover,
header #nav-circuit a:hover{background:none;}

/* headeroom */
.headroom--unpinned {top: -3em;}

/* tablet yoko*/
@media screen and (min-width:769px) and (max-width:1023px){
	header{height:4em;}
	.headroom--unpinned {top: -4em;}
	}
@media screen and (min-width:1024px) and (max-width:1280px){
	header li a{margin:0 20%;}
	header{height:4em;}
	.headroom--unpinned {top: -4em;}
	}

/* container */
#container{width:auto;}

#error p{width:60%;}
#error ul{width:60%;}

.pagetop{bottom:3.5em;right:0.5em;display:none;}

footer{padding:1em 0;min-width:100%;}
footer p{width:auto;font-size:0.5em;}
}
/* -------------------------------------------------------------- */