/*
style.css

(c) 2015 Makoto Kamimura (typgestalt.com)
Contact: info@typgestalt.com
*/


/* Webfont */
@font-face {
    font-family: 'fete';
    src: url('../fonts/fete.eot');
    src: url('../fonts/fete.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fete.woff') format('woff'),
         url('../fonts/fete.ttf') format('truetype'),
         url('../fonts/fete.svg#fete') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Autopoiesis 300';
    src: url('../fonts/autopoiesis-300.eot');
    src: url('../fonts/autopoiesis-300.eot?#iefix') format('embedded-opentype'),
         url('../fonts/autopoiesis-300.woff') format('woff'),
         url('../fonts/autopoiesis-300.ttf') format('truetype'),
         url('../fonts/autopoiesis-300.svg#autopoiesis300') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Base */
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	font-family: "Times New Roman", "Times Roman", "Hiragino Mincho ProN", serif;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-autospace: ideograph-parenthesis;
	-moz-text-autospace: ideograph-parenthesis;
	-ms-text-autospace: ideograph-parenthesis;
	-o-text-autospace: ideograph-parenthesis;
	text-autospace: ideograph-parenthesis;
	word-wrap: break-word;
	word-break: normal;
	hanging-punctuation: force-end;
}

body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.3rem;
	line-height: 2.2rem;
	letter-spacing: .08rem;
	color: #222;
	background: #e6e4dc;
}

section, nav, article, aside, header, footer, main, figure, figcaption, details, menu, img {
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: inherit;
	font-weight: normal;
}

p, div, ul, li, figure, img {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, canvas {
	height: auto;
	max-width: 100%;
}

/* Link */
a{
	color: #222;
	text-decoration: none;
	-webkit-transition: color .5s ease-out;
	-moz-transition: color .5s ease-out;
	-ms-transition: color .5s ease-out;
	-o-transition: color .5s ease-out;
	transition: color .5s ease-out;
}

a[href]:hover{
	color: #fff;
	-webkit-transition: color 0.2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: color 0.2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: color 0.2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: color 0.2s cubic-bezier(0,0.9,0.3,1);
	transition: color 0.2s cubic-bezier(0,0.9,0.3,1);
}
	
::-moz-selection{
	background: #d5d6d1;
	color: #666;
	text-shadow: none;
}

::selection {
	background: #d5d6d1;
	color: #b5b6b1;
	text-shadow: none;
}

.selected{
	color: #fff;
}

/* Typesetting */
h1 {
	font-family: "fete", sans-serif;
	font-size:2.3rem;
	line-height: 1.4rem;
	letter-spacing: 0rem;
	text-align: center;
	margin: 0;
}

h2 {
	font-family: "Times New Roman", "Times Roman", "Hiragino Mincho ProN", serif;
	font-size:1.35rem;
	line-height: 2rem;
	letter-spacing: .18rem;
	text-align: left;
	margin: 0;
}
h3 {
	font-size: 1.55rem;
	line-height: 4.2rem;
	letter-spacing: .06rem;
	font-family: "Autopoiesis-300", sans-serif;
	text-align: left;
}	

/* layout */
#wrap {
	width:92%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: -0.25rem auto;
}

header {
	position: absolute;
	margin-top: 0.8rem;
	padding: 1rem 0 0.2rem;;
	width:92%;
	z-index: 3;
}

nav{
	font-family: "Autopoiesis 300", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

main {
	overflow: hidden;
	padding-bottom: 10rem;
}

.pcMenu{
	display: block;
	position: absolute;
	width: 18rem;
	right: 2rem;
	top: 12.4rem;
	white-space: nowrap;
	text-align: center;
	line-height: 2.8rem;
}
.pcMenu li:nth-child(3){
	margin-bottom: 3rem;
}

.pcMenu li:nth-child(6){
	margin-bottom: 4rem;
}
.pcMenu li:nth-child(7),
.pcMenu li:nth-child(8),
.pcMenu li:nth-child(9),
.pcMenu li:nth-child(10),
.pcMenu li:nth-child(11){
	font-size: 1.2rem;
	line-height: 3rem;
}
.spMenu{
	display: none;
}


.title{
	overflow: hidden;
	position: absolute;
	top: 13rem;
	left: 50%;
}

.currentInfo h3{
	margin: 0 0 4rem 0;
}

.currentInfo ul{
	margin: 4rem 0 0 0;
}

.archives,
.products{
	overflow: hidden;
}
.archives article,
.colophon{
	padding-top: 24rem;
	clear: both;
}
.archives figure,
.colophon h3{
	width: 45%;
	margin-right: 5%;
	float: left;
}
.archives figure img,
.products figure img{
	margin-bottom: 1rem;
}
.archives section,
.colophon article{
	width: 30%;
	margin-right: 20%;
	float: left;
	overflow: hidden;
}

.artist{
	padding-left: 50%;
}
.artistImage{
	width: 40%;
	margin-right: 5%;
	float: left;
	padding-top: 13.4rem;
	margin-bottom: 2.8rem;
}
.artistList{
  font-family: 'Autopoiesis 300', sans-serif;
	position: absolute;
	top: 24rem;
}
.artistList li{
	padding: 0 0 2rem;
}
.profile{
	font-size:1.2rem;
	width: 45%;
	margin-right: 5%;
	float: left;
	padding-top: 11.8rem;
}
.profile h3{
	margin-bottom: 8.8rem;
}
.profile figure{
	margin-bottom: 2.8rem;
	width: 70%;
}
.profile p{

}

.current{
	position: absolute;
	left: 0;
	width: 77%;
	overflow: hidden;
	padding-top: 13rem;	
}

.current figcaption{
	font-size: 1rem;
	font-style: italic;
	color: #333;
	text-align: right;
	margin: 0.4rem 0 1.8rem;
}

.products ul,
.products figure{
	width: 45%;
	overflow: hidden;
	padding-top: 13rem;
}
.products ul li{
	width: 45%;
	margin: 0 1rem 1rem 0;
	float: left;
}

.products figcaption{
	font-size: 1rem;
	font-style: italic;
	color: #333;
	text-align: right;
	margin: 0.4rem 0 1.8rem;
}

.productList{
  font-family: 'Autopoiesis 300', sans-serif;
	font-size: 1.3rem;
	position: absolute;
}
.productList li{
	padding: 0 0 2rem;
}

.productsInfo,
.currentInfo{
	font-size:1.2rem;
	width: 30%;
	left: 50%;
	position: absolute;
	top: 24rem;
}

.productsInfo .second{
	margin-top: 4rem;
}

.colophon figure{
	padding-bottom: 2rem;
	width: 80%;
}

.contact{
	font-size:1.2rem;
	width: 30%;
	padding-left: 50%;
	padding-top: 24rem;
}


@media only screen and (max-width: 768px) {
	header {
		position: static;
		width:100%;
	}

	main{
		padding-bottom: 10rem;
	}
	
	.pcMenu{
		display: none;
	}
	.spMenu {
		display: block;
		margin: 4rem 0 0;
		text-align: center;
		line-height: 2.8rem;
	}
	.spMenu li{
		display: inline;
		margin: 0 1rem 0 0;
	}

	.title{
		position: static;
		padding-top: 10rem;
	}

	.archives article,
	.colophon{
		padding-top: 7rem;
	}
	.archives figure,
	.colophon h3{
		width: 100%;
		margin-bottom: 2.4rem;
		margin-right: 0;
		float: none;
	}
	.archives figure img,
	.products figure img{
		margin-bottom: 1rem;
	}
	.archives section,
	.colophon article{
		width: 100%;
		margin-bottom: 4rem;
		margin-right: 0;
		float: none;
	}

	.artist{
		padding-left: 0;
		padding-top: 7rem;
	}
	.artistList{
		font-family: 'Autopoiesis 300', sans-serif;
		position: static;
	}
	.artistList li{
		padding: 0 0 2rem;
	}
	.artistImage{
		float: none;
		width: 100%;
		padding-top: 7rem;
		padding-bottom: 2rem;
	}
	.profile{
		width: 100%;
		padding-top: 7rem;
		margin-right: 0;
		float: none;
	}
	.profile h3{
		margin-bottom: 3.8rem;
	}
	.profile figure{
		float: none;
		width: 100%;
		padding-bottom: 2rem;
	}
	.profile p{
		float: none;
		width: 100%;
		padding-bottom: 10rem;
	}

	.products ul,
	.products figure,
	.current{
		width: 100%;
		overflow: hidden;
		padding-top: 7rem;
	}
	.products ul li{
		width: 100%;
		margin: 0 1rem 1rem 0;
		float: none;
	}
	.productsInfo,
	.currentInfo{
		width: 100%;
		left: 0;
		position: static;
		padding-top: 4rem;
	}

	.colophon figure{
		padding-bottom: 2rem;
		width: 100%;
	}

	.contact{
		width: 100%;
		padding-left: 0;
		padding-top: 7rem;
	}

}