@charset "UTF-8";

body {

}

#wrapper {
	width: 100%;
	max-width: 2000px;
	height: auto;
	margin: 0 auto;
}

img {
  width: ;
  height: auto;
  border: 0;
}

header {
	margin-bottom: 4%;
}

.inner_header {
	/*margin-top: -82%;*/
	    position: relative;
	    z-index: 99;
	    padding: 1% 0 1% 0%;
	width: 100%;
}

h1 {
	font-family: 'Quicksand', sans-serif;
	letter-spacing: 0.1em;
	float: none;
	margin: 0 auto;
	font-size: 1.5em;
	text-align: center;
}

nav {
	font-family: "Lato", "Hiragino Maru Gothic Pro", Meiryo, sans-serif;
	width: 80%;
	    float: none;
	    margin: 0 auto;
			display: none;
}

nav ul {
	font-size: 1.8em;
	    font-weight: bold;
}

nav ul li {
	width: 25%;
	    float: left;
}

nav ul li a{
	width: auto;
	    float: left;
	    margin-right: 20px;
}

.nav_sp {
	position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
}

.nav_sp ul {
background: #DCDCDC;
}

.nav_sp li {
	font-size: 1em;
	    float: left;
	    border: 1px solid #000;
	    width: 25%;
	    text-align: center;
	    padding: 2%;
}

.nav_sp li a {

}

.nav_sp #nav_works img {
	width: 30%;
}

.nav_sp #nav_about img {
	width: 30%;
}

.nav_sp #nav_contact img {
	width: 30%;
}
.nav_sp #nav_instagram img {
	width: 30%;
}

.bx-controls-direction {
	display: none;
}


#contents {
/*margin: 54% 0 0 0;*/
}

.section_wrap {
	padding: 0 2% 0 2%;
}

#works {

}

h2 {
	font-size: 1.3em;
	font-weight: 800;
	font-family: 'Fira Sans', sans-serif;
	font-family: 'Montserrat', sans-serif;
	    text-align: center;
	    font-weight: normal;
	    letter-spacing: 0.1em;
	margin-bottom: 2%;
}


.cate_wrap {
margin: 0 0 30px 0px;
}

h3 {
font-size: 1.8em;
}





.cate_wrap .thumbnail {
display: table;
width: 100%;
}



.cate_wrap .thumbnail li {
	display: table;
	    width: 31%;
	    height: auto;
	    text-align: center;
	    float: left;
	    margin-right: 3%;
			margin-bottom: 3%;
}


.cate_wrap .thumbnail li:nth-child(3n) {
	margin-right: 0;
}


.cate_wrap .thumbnail li p {
	display: table-cell;
vertical-align: middle;
}

/*about*/
#about {

}

#about .photo {
	width: 20%;
	margin: 0 auto;
}

#about .text {
	width: 90%;
	font-size: 1.4em;
	margin: 0 auto;
	text-align: center;
}

/*contact*/
#contact {

}

.mail {
	text-align: center;
}

.mail a {
	background: url(../images/icon_mail.jpg) left 3px no-repeat;
    background-size: 10%;
    padding: 0px 0px 30px 8%;
    font-size: 2em;
    font-weight: bold;
		font-family: "Lato", "Hiragino Maru Gothic Pro", Meiryo, sans-serif;
    letter-spacing: 0.04em;
}

footer {
	padding: 3% 0 3% 0;
	    font-size: 1.2em;

			margin-bottom: 13%;
}

footer p {
	text-align: center;
	position: relative;
	z-index: 99;
}

.page-top {
	position: fixed;
	    bottom: 10%;
	    right: 2%;
	    background: url(../images/icon_top.png) left top no-repeat;
	    width: 45px;
	    height: 45px;
	    overflow: hidden;
	    text-indent: 100%;
	    white-space: nowrap;
}


/*--------------- 768px〜--------------- */
@media (min-width: 768px){


header {

}

#header_img {

}

#header_img li {

}

.inner_header {
	/*margin-top: -73%;*/
	    position: fixed;
			top: 0;
	    z-index: 99;
	    padding: 1% 0 1% 3%;
	width: 100%;
	display: none;
	background: #fff;
}

.inner_header a:hover {
	border-bottom: 3px solid #000;
}

h1 {
	width: 200px;
	float: left;
	font-size: 2.3em;
}

nav {
	width: 380px;
	    float: right;
	    margin: 2% 4% 0 0;
	    position: relative;
	    z-index: 99;
	display: block;
}

nav ul {
	font-size: 1.8em;
	    font-weight: bold;
	letter-spacing: 0.1em;
}

nav ul li {

}

nav ul li a{
	width: auto;
	    float: left;
	    margin-right: 20px;
}

.nav_sp {
	display: none;
}

.bx-controls-direction {
	display: block;
}


#contents {
/*margin: 55% 0 0 0;*/
}

.section_wrap {
	padding: 0 20px 0 20px;
}

#works {
	margin-top: -100px;
    padding-top: 100px;
}

h2 {
font-size: 1.2em;
text-align: left;
}


.cate_wrap {
margin: 0 0 30px 30px;
}

h3 {
font-size: 1.8em;
}



.cate_wrap .thumbnail {
display: table;
width: 100%;
}



.cate_wrap .thumbnail li {
	display: table;
	    width: 11.5%;
	    text-align: center;
	    float: left;
			margin-right: 1%;
			margin-bottom: 1%;
}
.cate_wrap .thumbnail li:nth-child(3n) {
	margin-right: 1%;
}


.cate_wrap .thumbnail li:nth-child(8n) {
	margin-right: 0;
}




.cate_wrap .thumbnail li p {
	display: table-cell;
vertical-align: middle;
}



/*about*/
#about {

}

#about .photo {
	width: 15%;
	float: left;
	margin-right: 2%;
}

#about .text {
	width: 80%;
	float: left;
	font-size: 1.4em;
	text-align: left;
}

/*contact*/
#contact {

}

#contact a:hover {
	border-bottom: 3px solid #000;
}

.mail {
	text-align: left;
}

.mail a {
	background: url(../images/icon_mail.jpg) left top no-repeat;
	    padding: 0px 0px 5px 57px;
	    font-size: 3em;
	    font-weight: bold;
}

footer {
	padding: 3% 0 3% 0;
	    font-size: 1.2em;

			margin-bottom: 0;
}

footer p {
	text-align: center;
	position: relative;
	z-index: 99;
}

.page-top {
	position: fixed;
	    bottom: 2%;
	    right: 2%;
	    background: url(../images/icon_top.png) left top no-repeat;
	    width: 45px;
	    height: 45px;
	    overflow: hidden;
	    text-indent: 100%;
	    white-space: nowrap;
}

}