@charset "UTF-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
    height:auto !important;
    width: 100%;
	background-color: #FFF;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,sans-serif;
    line-height: 1.5em;
    color:#FFF;
}
a {
text-decoration: none;
color: #191919;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
a:hover {
opacity: 0.7;
}
.fade:hover {
opacity: 0.7;
}
p {
margin: 0;
padding: 0;
}
span {
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 50px auto;
padding: 0;
}
#top_logo {
width: 100%;
text-align: center;
}
#header {
width: 100%;
height: 50px;
}
#container {
width: 1000px;
margin: 10px auto;
}
#top_logo a img {
width: 10%;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
position: absolute;
transition: .4s;
}
#top_logo img {
filter: none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);}
#top_logo img:hover{
-webkit-filter: grayscale(20%);
-moz-filter: grayscale(20%);
-ms-filter: grayscale(20%);
-o-filter: grayscale(20%);
}
#top_logo {
  display: box;
  display: -webkit-box;
}
.animated_logo {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* navigation
*************************************/
#main_navigation {
width: 100%;
vertical-align: bottom;
height: 50px;
}
#main_navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#main_navigation ul li {
float: left;
font-family:Arial, sans-serif;
font-weight: 700;
font-size: 11px;
margin: 5px 7px 0px 0px;
padding-right: 7px;
color: #3c3c3c;
padding-top:14px;
height: 16px;
cursor: pointer;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
#main_navigation ul li a {
vertical-align: bottom;
display: inline-block;
color: #3c3c3c;
}
#main_navigation ul li a:hover {
color: #aaaaaa;
opacity: 1;
}
#main_navigation ul li a.selected {
color: #e5007f;
}
#main_navigation a img {
width: 300px;
height: auto;
margin-right: 20px;
float: left;
vertical-align: bottom;
}

#main_navigation ul li:hover {
color: #aaaaaa;
}

/* contents
*************************************/
#contents_box {
height:auto;
width: 1000px;
margin-top: 20px;
}
#contents_box h1 {
font-family: Arial, sans-serif;
font-weight: 700;
color: #3c3c3c;
font-size: 15px;
margin: 0;
padding: 0 0 10px 0;
}
h3#contents_title {
font-family: 'Anton', sans-serif;
font-weight: 400;
font-size: 52px;
color: #191919;
margin: 0;
padding: 0;
}
/* home
*************************************/
#work_list {
width: 1000px;
height: auto;
margin: 0 auto;
}
#main_image {
width:1000px;
height: 720px;
margin: 0 auto;
text-align: center;
}
#main_image h3 {
font-family: Arial;
font-size: 11px;
font-weight: 700;
color: #3c3c3c;
margin: 0;
padding: 0;
text-align: left;
}
#work_list ul {
width: 1020px;
height: auto;
overflow: hidden;
}
#work_list ul li {
width: 235px;
height: 200px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
}
#work_list ul li a img {
width: 100%;
height: auto;
}
#work_list ul li h3 {
font-family: Arial;
font-size: 11px;
font-weight: 700;
color: #3c3c3c;
margin: 0;
padding: 0;
line-height: 1.2em;
padding-top: 4px;
}
#work_list ul li.first {
width: 1000px;
height: 667px;
margin-right: 0px;
float: none;
margin-bottom: 50px;
}
/* editorial etc
*************************************/
#image_container {
width: 100%;
height: auto;
margin: 0 auto;
}
/* biography_container
*************************************/
#biography_container,
#contact_container {
width: 100%;
height: auto;
margin: 130px auto;
text-align: center;
}
#biography_container h2,
#contact_container h2 {
font-family: 'Arial';
text-align: center;
color: #191919;
font-size: 25px;
margin: 50px auto 30px auto;
padding: 0;
}
#biography_container .inner,
#contact_container .inner {
margin: 30px auto;
}
#biography_container .inner p,
#contact_container .inner p {
color: #191919;
font-size: 12px;
line-height: 2.5em;
}
/*
sp sidemenu
*************************************/
.drawer-hamburger {
width: 14px!important;
}
.drawer-hamburger-icon {

}
.drawer-hamburger-icon:after {
    top: 6px!important;
}
.drawer-hamburger-icon:before {
    top: -6px!important;
}
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
    top: 0px!important;
}
nav.drawer-nav {
    z-index: 99999;
}
.drawer-overlay {
background-color: transparent!important;
}
.drawer-hamburger {
position: relative!important;
padding: 1.2% 0px 0px 2%!important;
float: left;
}
.drawer-nav {
width: 170px!important;
}
.drawer--left.drawer-open .drawer-hamburger {
right: 0%!important;
margin-left: 12%;
}
ul.drawer-menu {
margin-top: 20px;
}
ul.drawer-menu li a {
font-size: 12px;
font-weight: bold;
padding: 10px 10px 10px 15px;
}
/* -768px
*************************************/
@media screen and (max-width: 768px) {
#wrapper {
margin: 20px auto;
}
#main_navigation {
width: 60%;
height: auto;
margin: 0 auto;
}
#main_navigation ul {
display: none;
}
#navi_logo h1 a img {
width: 100%;
}
#container {
width: 94%;
height: auto;
padding: 0 3%;
}
#contents_box,
#work_list {
width: 100%;
}
#contents_box {
margin-top: 5px;
}
#work_list ul {
width: 100%;
}
#work_list ul li.first {
width: 97%;
height: auto;
margin: 0 1.5% 30px 1.5%;
}
#work_list ul li.first a img {
width: 100%;
height: auto;
}
#work_list ul li {
width: 47%;
height: auto;
margin: 0 1.5% 20px 1.5%;
}
.flexslider {
width: 100%;
border: none!important;
}
.flex-control-nav {
width: 100%!important;
}
.flex-direction-nav {
display: none;
}
.flex-control-thumbs li {
width: 13.8%!important;
}
#work_list ul li h3 {
height: 20px;
}
#biography_container,
#contact_container {
margin: 0px auto 100px auto;
}
#biography_container h2,
#contact_container h2 {
font-size: 20px;
margin: 30px auto;
}
}
/* 769px-
*************************************/
@media screen and (min-width: 769px) {
#header button {
display: none;
}
}
/* iPhone5
*************************************/
@media screen and (max-width: 320px) {
#biography_container .inner p span {
display: block;
}
}