body {
	margin:0px;
	padding: 0px;
	text-align:left;
	font-family:"Meiryo", "���C���I", sans-serif;
	line-height:28px;
	font-size: 14px;
	color:#fff;
	background-color:#1C1A20;
	-webkit-text-size-adjust: 100%;
}

/*effect*/
body { display:none;}

.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
 } 
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


/*default*/
form input, form select{margin:0px;padding:5px;	font-size: 16px;}
p, dl, dt, dd, ul, li, ol, address, em, h1, h2, h3, h4, h5, h6{margin:0px;padding:0px;list-style:none; font-weight:normal;} 
img { vertical-align:middle; border: none;padding:0px;}
br {letter-spacing: normal;margin:0px;padding:0px;}
address, em{font-style:normal;margin:0px;}



/*link*/
a:link {color: #fff;text-decoration: none;}
a:visited {color: #fff;text-decoration: none;}
a:hover {color: #ccc;text-decoration: none;}


/*kakikae-sys*/
.fsize-mini{font-size:11px;}
.fsize-large{font-size:25px;}
.fsize-big{font-size:30px;}
.bold{font-weight: bold;margin:10px 0px 10px 0px;}
.delete{text-decoration: line-through;}
.red{color: #F33;}
.blue{color: #06F;}
.green{color: #090;}
.navy{color: #036;}
.pink{color: #F9F;}
.gray{color: #999;}
.orange{color: #F90;}
.purple{color: #C6C;}
.lightblue{color: #6FB7FF;}
.lightgreen{color: #69F574;}
.lightpink{color: #FCF;}



/*font*/
.fm{ font-size:16px;}
.sp{padding-top:1em;}
.center{text-align:center;}

/*form*/
form input, form select, form textarea {
	margin:0px;
	padding:10px;
	font-size:14px;
	width:90%;
	vertical-align:middle;
}

input[type="text"]:focus, textarea:focus,select:focus {
    border: solid 1px #ccc;
    background-color: #EFD;
}

input[type="button"],input[type="submit"] {/*iPhone button clear*/
    -webkit-appearance: none;
}

.ws {width: 40%;}




/*--------------btn--------------*/

/*pagetop*/
#page-top {
	position: fixed;
	right: 3%;
	z-index:100;
}

/*back*/
.back{
	padding-right:10px;
	display:block;
	width:60px;
	margin:100px auto;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:5px;
	font-size:20px;
	background:url(../img/arrow.png) right 5px no-repeat;
}
.more{
	padding-right:10px;
	display:block;
	width:60px;
	margin:100px auto;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:5px;
	font-size:20px;
}



/*fbtn*/
.fbtn{
	display:block;
	width:200px;
	height:50px;
	margin:20px auto;
	text-align:center;
	background:#fff;
	border:solid 1px #aaa;	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.btn{
	display:block;
	width:200px;
	height:50px;
	margin:20px auto;
	text-align:center;
	background:#fff;
	border:solid 1px #aaa;	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


/*--------------btn--------------*/




/*-------------nav----------------------------------------*/
#toggle{display: none; } 

nav{
	float:left;
	width:200px;
	height:100%;
	position:fixed;
	z-index:100;
	background:url(../img/gray.png);
}
.menulogo{
	padding:50px 0px 10px 0px;
	padding-left:50px;
}


nav li{
	width:5em;
	margin:0px auto;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:2px;
	font-size:17px;
}

nav span{
	margin-top:-10px;
	display:block;
	font-size:12px;
	letter-spacing:-1px;
	color:#BABCBE;
}


.info{
	margin:10px;
	width:170px;
	padding:15px;
	background:url(../img/black.png);
	font-size:12px;
	line-height:20px;
	color:#ccc;
}
.info h1{
	font-size:14px;
	color:#fff;
	font-weight:bold;
}




/* head */
.head{
  height:700px;
  background:center top no-repeat;
}

.head .title {
	height:700px;
	background:url(../img/gra.png) center bottom no-repeat;
}

.head .title h1{
	padding-top:300px;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:2px;
	font-size:35px;
	text-align:center;
}
.head .title h2{
	padding-top:10px;
	font-size:20px;
	text-align:center;
	font-weight:bold;
	text-shadow: 0 0 10px #fff,0 0 15px #00F;

}




/* footer */
footer{
	padding:10px 0px 50px;
	min-height:500px;
	background:url(../img/foot-bg.jpg) center bottom no-repeat;
}
footer div{
	margin:0px auto;
	padding:50px 20px;
	max-width:700px;
}

.bnavi{
	width:65%;
	float:right;
}

.binfo{
	width:30%;
	line-height:25px;
}
.binfo h1{
	padding:10px 0px;
	font-size:14px;
}
.binfo i{
	margin:5px;
	font-size:25px;
}


.bnavi ul{
	width:33%;
	float:left;
}
.bnavi li{
	width:5em;
	margin:0px auto;
	padding:8px 0px;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:2px;
	font-size:18px;
}

.bnavi li span{
	margin-top:-5px;
	font-family: 'Noto Sans JP', sans-serif;
	display:block;
	letter-spacing:-1px;
	font-size:12px;
	color:#BABCBE;
}
.copy{
	font-size:12px;
}

/* box */
.box{
	margin:50px auto;
	padding:0px 20px;
	max-width:800px;
}
.box:first-child{
	margin-top:-200px;
}

.box .title{
	display:block;
	margin:20px auto;
}
.box div{
	margin:10px auto 50px auto;
}
.box a img{
	background-color:#CCC;
	padding:3px;
}
	
.box h1{
	background:url(../img/mark.png) left center no-repeat;
	padding:10px 0px 10px 40px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:18px;
	font-weight:bold;
	border-bottom:solid 1px #aaa;
	margin:20px auto;
}
.box h1 img{
	vertical-align:middle;
	padding-right:10px;
}



/* clear */
.box:after,
.bnavi:after{
	content:"";
	display:block;
	clear:both;
}



@media only screen and (max-width: 1400px) {
article{
	margin-left:200px;
}
}


@media only screen and (max-height: 710px) {
.info{
	display:none;
}
}



@media only screen and (max-width: 768px) {

nav{
	width:100%;
	height:50px;
	position:fixed;
	text-align:center;
	background-image:none;
}

nav li{
	background:url(../img/black.png);
}

.menulogo{ display: none;}
#menu{ display: none;}
#menu li{ width: 100%;}
#toggle{
	display: block;
    position: relative;
    width: 100%;
}
#toggle a{
	display: block;
    position: relative;
    padding: 10px 0px 10px 0px;
    text-align: center;
    text-decoration: none;
	font-family: 'Staatliches', sans-serif;
	letter-spacing:2px;
	background:url(../img/black.png);
	font-size:18px;
}


.info{
	display:none;
}

.bnavi{
	margin-bottom:50px;
	width:100%;
	float:none;
}

.binfo{
	width:100%;
	text-align:center;
}



}