@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');

body {
font-family: 'Noto Sans Japanese', sans-serif;
line-height:1;
font-size:14px;
}

.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w700 {font-weight: 700;}
.w900 {font-weight: 900;}

h1 {
font-size: 24px;
}

h2 {
font-size: 36px;
}

h3 {
font-size: 24px;
}

#works_area p.desc,
#about_area p.desc {
font-size: 10px;
}


/* color */


body {
background: #f7f7f7;
color: #4A4A4A;
}

#header p,
#works_area p.desc,
#copyright {
color: #969696;
}
#header a {
text-decoration:none;
color: #4A4A4A;
}

a:hover {
text-decoration: underline;
}


/* layout */


#header div{
position:absolute;
top:40px;
left:40px;
}

#header div h1 {
padding-bottom:10px;
}

#header ul{
position:absolute;
top:40px;
right:40px;
display: flex;
padding-top:8px;
}

#header ul li {
padding-left: 16px;
}

#works_area p.desc,
#about_area p.desc {
margin-top:16px;
margin-bottom:48px;
}


#works_area,
#about_area {
max-width:640px;
margin:0 auto;
padding-top: 160px;
padding-bottom: 80px;
text-align: center;
}

#works {
display: flex;
flex-wrap: wrap;
}

#works div.middle {
max-height: 198px;
max-width:320px;
}
#works div.middle img{
 width: 100%;
}

#works div.large{
max-height: 396px;
max-width:640px;
}
#works div img{
width: 100%;
}

#copyright {
text-align:center;
padding-bottom:80px;
}


/* works detail */


#works_area p.date {
font-family: 'EB Garamond', serif;
font-style: italic;
text-decoration: underline;
font-size: 18px;
color: #4A4A4A;
margin-bottom: 40px;
}
#works_area p.lead {
margin-top: 24px;
margin-bottom: 64px;
text-align: left;
line-height:1.6;
}

#works div.pic {
padding-bottom:64px;
}



/* about page */

#about_area div {
margin-top: 40px;
}
#about_area div h3 {
margin-bottom: 24px;
}
#about_area div p {
line-height:1.6;
margin-bottom: 16px;
text-align:left;
}

#about_area div ul {
list-style:disc;
text-align:left;
}

#about_area div li {
margin-bottom: 16px;
}


/* media query */

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

#header div{
left:20px;
}

#header ul{
right:20px;
}

#about_area div ul {
margin-left: 20px;
}




#works div.middle {
max-height: 396px;
}

#works div.large,
#works div.middle,
#works div.pic,
#works_area p.lead,
#about_area div {
max-width:640px;
padding:0 20px 20px 20px;
}


}