/*///// 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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

/*///// styles /////*/
html, body {
	height:100%;
}
ol, ul {
    list-style: none;
}
ul li {
  list-style-type:none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family:'mplus-1p-light';
    color: #666;
    line-height: 2em;
}

a {
	color: inherit;
	text-decoration:none;
	border-bottom:1px dotted #000;
}
a:hover {
	color: inherit;
	text-decoration:none;
	border-bottom:none;
}

h1 {
		position:fixed;
		bottom:40px;
		left:40px;
		z-index:100;
	}
	h1 img { width: 200px;}
h2 {
	font-family:'League Spartan' !important;
    font-size: 30px;
    color: #444;
    margin: 50px 0 30px;
    line-height: 1em;
	font-weight:normal;
}

p {
    font-size: 16px;
}
.small { font-size: 75%; }
	.btn-menu { text-align: right; }
	.btn-menu a {
		color:#FFF;
		font-size:12px;
		font-family:'League Spartan';
		
		background-color:#000;
		background-image: url(/img/menugo.svg);
		background-repeat: no-repeat;
		background-position: 5px center;
		background-size: 14px 14px;
		padding:10px 10px 5px 25px;
		margin-bottom:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px; 
		border-radius:5px;
	}
/*///// layout /////*/
.wrapper {
    width: 100%;
	height:100%;
	position:relative;
}
.block {
    width: 80%;
	height:100%;
	position:relative;
	overflow:auto;
	padding-left:20%;
}
	.block p {
	background-color:#FFF;
	display:inline;
	box-decoration-break: clone;
	padding:2px;
	color:#222;
	}
	
#block-top {		
	background:url(/img/bg1.jpg) no-repeat;
	background-attachment:fixed;
	background-size:cover;
	background-position:center center;
}
#block-news {
	height:auto;
	margin-top: 50px;
	margin-bottom: 100px;
}
	#block-news dt,#block-news dd { float: left; }
	#block-news dt { width: 10%; }
	#block-news dd { width: 90%; }
#block-work {
	width:100%;
	height:auto;
	padding-left:0;
	padding-bottom:200px;
	overflow:hidden;
	position:relative;
}
	#block-work > a { width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; border-bottom:none; }
	#block-work > a:hover { 
		background-color:#FFF;
		filter:alpha(opacity=10);
		-moz-opacity: 0.1;
		opacity: 0.1;
	}
	#block-work ul {
		position: relative;
		width: 100%;
		display:block;
	}
	#block-work li { 
		width:20%; 
		float:left;
		display:block; 
		
		background-size:cover;
		text-indent:-9999px;
	}
	#btn-towork { text-align:right; }
	#btn-towork a {
		padding:3px;
		background-color:#000;
		color:#FFF;
		font-size:18px;
	}
#block-about {
	background-color:#FFF;
	
	height:auto;
	margin-bottom:100px;
	
	color:#000;
}
	#block-about h2 { color:#000; }
	.half-left { width:40%; margin-right:10%; float:left; }
	.half-right { width:40%; margin-right:10%; float:right; }

	#block-about h3, #block-about h4, #block-about li {
		margin-bottom: 1em;
		padding-left: 0.5em;
	}
	#block-about h3 { font-family:'mplus-1p-regular'; border-left: 0.5em solid #F30; margin-top: 2em; }
	#block-about h4 { font-family:'mplus-1p-regular'; border-left: 0.5em solid #999; margin-top: 0.5em; }

	#block-about li { border-left: 0.5em solid #DDD; }
	#block-about li.etc, #block-about p { border-left:none; padding-left: 1em; }

#block-access {
	height: 50%;
}
	#gmap { height:50%; }
	
	
#block-foot {
	background-color:#FFF;
	height:20%;
	position:relative;
}
	#block-foot div{ position:absolute; bottom:20px; right:20px; font-size:10px; }
	#bnr { position: absolute; bottom:50px; right: 20px;}
	#bnr li { float: left; margin-left: 60px; }
	#bnr a {
		filter:alpha(opacity=30);
		-moz-opacity: 0.3;
		opacity: 0.3;
		border-bottom: none;
	}
	#bnr a:hover {
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
		border-bottom: none;
	}
	#bnr img { height: 40px; }

#block-member,#block-contact {
	height: 80%;
	width: 40%;
	padding-left:20%; }
#btn-back {position: absolute; top:40px; left: 240px;}
#btn-back { text-decoration: none; border-bottom: none; }
#btn-back img { width:40px; height:40px; }

/*///// menu /////*/
.menu-button {
    display: block;
    width: 40px;
    height: 40px;
	float:right;
	border-bottom:none;
}
.menu-button img { width:40px; height:40px; }

#sidr {
	position: fixed;
	left: 0px;
	top: 0px;
	margin-top:40px;
	width:280px;
	z-index:9999;
	}
	#sidr ul { width:200px; margin:50px 0 0 10px; }
	#sidr li {
		color:#FFF;
		font-size:12px;
		
		background-color:#000;
		padding:5px;
		margin-bottom:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px; 
		border-radius:5px;
	}
	#sidr li a {
		font-family:'League Spartan' !important;
		color:inherit;
		font-size:inherit;
		margin-left:3px;
		}

.sidr input[type="text"],
.sidr input[type="password"],
.sidr input[type="date"],
.sidr input[type="datetime"],
.sidr input[type="email"],
.sidr input[type="number"],
.sidr input[type="search"],
.sidr input[type="tel"],
.sidr input[type="time"],
.sidr input[type="url"],
.sidr textarea,
.sidr select {
  width: 100%;
  font-size: 13px;
  padding: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 0 10px;
  border-radius: 2px;
  border: 0;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: block;
  clear: both;
}


/*/////////WORK/////////*/
#block-works, #block-detail {
	width: 80%;
	min-height:80%;
	position:relative;
	padding-left:20%;
}

	#block-works h2, #block-detail h2 { position:fixed; }

	.work-left { width:10%; margin-right:10%; margin-top:8em; float:left; position:fixed; }
	.work-right { width:70%; margin-right:10%; margin-top:8em; float:right; }
	
		.work-left a { border-bottom:none; }
		.work-left a:hover { border-bottom:none; background-image:url(/img/menugo.svg); }
		.work-right a { border-bottom:none; }
		.work-right a:hover { border-bottom:1px dotted #000; }
	
	#work-cat a  { font-family:'League Spartan'; border-bottom:none; }
	#work-cat2 { margin-top:2em; }
	
	#work-cat li, #work-cat2 li { }
	#work-cat a, #work-cat2 a {
		background-position:0 1px;
		background-repeat:no-repeat;
		background-size: 14px 14px;
		padding-left:16px; 
		margin-left:-16px;
	}
	#work-cat2 a {
		background-position:0 5px;
	}
	
	.work-right h3 { font-family:'mplus-1p-light'; font-weight: normal; font-size: 120%; }
	.work-right h4 { font-family:'mplus-1p-regular'; }
	
#block-detail { height:80%; position: relative;}

	#work-tag { width:100%; height: 30px; margin-top: 5px; }
	#work-tag li {
		width:auto;
		float:left;
		color:#FFF;
		line-height: 1em;
		
		background-color:#CCC;
		padding:3px;
		margin-bottom:1px;
		margin-right: 5px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px; 
		border-radius:3px;
	}
	#work-data { width: 570px; margin-top: 2em; }
		#work-text { width:350px; float: right; }
		#work-data img { width:200px; float: left; margin-top: 0.5em; }

/*/////////CONTACT/////////*/
#block-contact dt, #block-contact dd { float: left; min-height: 40px; }
#block-contact dl { width: 100%; }
#block-contact dt { width: 25%; font-family:'League Spartan'; }
#block-contact dd { width: 75%; }

#block-contact input[type="text"],
#block-contact input[type="email"],
#block-contact textarea,
button {
	border:1px solid #e8e8e8;
	background-color: #e8e8e8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	width: 20em;
	min-height: 18px;
	padding-left: 4px; 
	font-size: 12px;
}
#block-contact textarea {
	min-height: 10em;
	margin-top: 8px;
	padding-top: 4px;
}
button { background-color:#F30; color: #FFF; border-color: #F30; width:10em; margin-top: 15px; }

#message { font-size: 90%; margin-bottom: 10px; }
.aleart { color:#F30; }


@media all and (max-width: 768px) {
	#block-top {
		background-attachment:scroll;
		background-size:auto 100%;
		width: 100%;
		padding-left: 0;
	}
		h1 { position: fixed; left: 5%; bottom: 5%; }
		h1 img { width: 100px;}
	
	h2 { margin: 70px 0 30px; }
	
	.block { width: 90%; padding-left: 5%;}
	.half-left, .half-right, .work-left, .work-right { width:100%; margin-right:0%; float:none; }
		.work-left { margin-top: 40px; margin-bottom: 40px; position: relative; height: 8em; }
	
	#block-news dt, #block-news dd { float: none; }
	#block-access { height: auto;}
		#gmap { height:40%; }
	#block-foot { height:10%;}
	
	#sidr { margin-top: 15px;}
	.menu-button { float: none; position: absolute; right:5px; }
	
	#block-foot div{ position:absolute; bottom:10px; left:5%; font-size:10px; }
		#bnr { visibility: hidden; display: none; width: 0; height: 0; overflow: hidden; }
	
	#block-member, #block-contact, #block-works, #block-detail { width: 90%; min-height: 70%; padding-bottom: 10%; height: auto; padding-left: 5%; position: }
		#block-works h2, #block-detail h2 { position: relative; }
		#work-cat, #work-cat2 { width: 50%; float: left; margin-top: 0; }
		#work-data { width: 100%; }
		#work-data img, #work-text { float: none; }
	#btn-back { top: 12px; left: 12px;}
	
	
	
}