/*
Description:a website of a tiny design lab in tokyo | 東京の小さなデザインラボのページ
Author: CHIC
Author URI: http://www.sunshinepool.co.uk
License: CHIC
License URI: http://www.sunshinepool.co.uk
*/





 　{ color:green; }

P {
color : #666666; 
text-align: justify; 
text-justify: inter-ideograph;
text-overflow: ellipsis;
 }

p.ssp01 { font-family: "Hiragino Mincho Pro","ＭＳ 明朝", serif; }


p.ssp04 { 
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif;
letter-spacing: 0.1em;
text-align: center;
 }


.right { text-align: right;  padding: 0px; margin: 0px;}
.left { text-align: left;  padding: 0px; margin: 0px;}
.center { text-align: center;  padding: 0px; margin: 0px;}

.clear {clear: both;}

a:link { color: #666666; }
a:visited { color: #666666; }
a:hover { color: #888888; }
a:active { color: #666666; }
a { text-decoration: none; }


hr {
border: none;
border-top:  solid 1px #999999;
height: 1px;
margin: 0;
}

/* --- スラッシュ --- */
.sspsl {
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.7em;
letter-spacing: 0.1em;
line-height: 0.5em;
vertical-align: 0.12em;
}



/* --- 全体の背景・テキスト --- */
body {
margin-left: 0;
margin-top:0;
margin-right:0;
padding: 0;
background-color: #ffffff; /* ページの背景色 */
color: #666666; /* 全体の文字色 */
font-size: 0.88em; /* 全体の文字サイズ */
-webkit-text-size-adjust:100%
}

/* --- コンテナ --- */
.container {
width: 800px; /* ページの幅 */
margin: 0 100px; /* センタリング */
background-color: #ffffff; /* メインカラムの背景色 */
border-left: 1px #ffffff solid; /* 左の境界線 */
border-right: 1px #ffffff solid; /* 右の境界線 */
}


.containerimg {
width: 100%; 
padding: 0;
}

/* --- ヘッダ --- */
.header {
background-color: #ffffff; /* ヘッダの背景色 */
}

/* --- ヘッダ img--- */
.headerimg01 {
width: 41.25%;
padding: 0px;
text-align: center;
margin-left: 12.5%;
margin-top: 2%;
margin-bottom: 1.8%;
clear: both;
}

.headerimg02 {
width:100%;
padding: 0;
margin-bottom: 3.6%;
margin-top: 3.6%;
}

a img {
border: none;
}

/*---ヘッダー本文---*/
p.ssp08 {
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
line-height: 1.3em;
letter-spacing: 0.1em;
text-align: left;
width: 18%;
float: left;
}

/* --- twitter bar --- */
.nav {
background: #ffffff;
float: right;
width: 32%; /* サイドバーの幅 */
padding: 0px;
margin: 3.6% 0 0 8%;
overflow: hidden;
}

/*---twitter img---*/
.navimg01 {
width: 100%;
padding: 0px;
clear: both;
}


/*---メインコンテンツ---*/
.maincontents {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #ffffff;
width: 60%;
padding: 0px;
margin: 3.6% 0 0 0 ;
vertical-align: middle;
overflow: hidden;
}


/*---メインカラムimg配置---*/
.mainimgcell {
	display: inline-block;
	position: relative;
	width: 40%;
	padding : 0px;
	margin: 7% 0 7% 0;
	vertical-align: middle;
}

/*---メインカラム本文配置---*/
.mainwordscell {
	display: inline-block;
	position: relative;
	width: 51%;
	padding : 0px;
	margin: 7% 0 7% 8%;
	vertical-align: top;
	text-align: left;
}



/*---メインカラム見出し---*/
.ssp05 {
display: inline-block;
vertical-align: middle;
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
margin-top: 0px;
margin-left: 0px;
text-align: justify;
letter-spacing: 0.1em;
}


/*---メインカラム本文---*/
.ssp06 {
width: 100%;
float: left;
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
margin-bottom: 0px;
letter-spacing: 0.1em;
line-height: 1.2em;
overflow: hidden;
}

/*---メインカラム 日本語行間揃える---*/
.sspmJJ {
font-size : 0.88em;
line-height: 1.4em;
letter-spacing: 0.2ex;
}

/*---メインimg---*/
.mainimg {
float: left;
width: 100%;
height: auto;
padding: 0px;
margin: 0;
}


/*---...more---*/
.readmore {
color:c8c8c8;
}



/* --- フッタ --- */
.footer {
clear:both;
background-color: #ffffff; /* フッタの背景色 */
}

/* --- フッタ本文 --- */
p.ssp0f {
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.56em;
text-align: center;
letter-spacing: 0.1em;
}



/*---worksコンテンツ---*/
.workstable {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #ffffff;
padding: 0px;
margin: 3.6% 0 0 0;
vertical-align: bottom;
}


/*---works 本文---*/
p.ssp12 {
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.82em;
width: 55%;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: left;
margin: 0 0% 13.6% 5%;
}

/*---works 日本語行間揃える---*/
.sspJJ {
font-size : 0.95em;
line-height: 1.5em;
letter-spacing: 0.2ex;
}

/*---works title---*/
.workstitle {
background: #ffffff;
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif;
letter-spacing: 0.1em;
text-align: center;
padding: 0;
margin: 8% 0 8% 0;
}


/*---works subtitle---*/
.workssubtitle {
background: #ffffff;
font-family: Georgia, "Crimson Text", "ＭＳ 明朝", serif;
font-size : 1.1em;
letter-spacing: 0.1em;
text-align: left;
padding: 0;
margin: 5% 0 5% 2%;
}


/*---works 余白の調整---*/
.worksspacing {
background: #ffffff;
margin: 14% 0 14% 0;
}


/*---works explanation---*/
.rightcell {
	display: inline-block;
	position: relative;
	width: 31%;
	padding : 0;
	margin: 0 0 3.8% 8%;
	vertical-align: bottom;
}

/*---works imgsplacement---*/
.leftcell {
	display: inline-block;
	position: relative;
	width: 60%;
	padding : 0px;
	margin: 0 0 3% 0;
	vertical-align: bottom;
	text-align: left;
}


/*---worksimg---*/
.worksimg {
width: 100%;
padding: 0px;
margin:0% 0% 8% 0%;
}

/*---worksimg02---*/
.worksimg02 {
width:100%;
padding: 0px;
margin:3.6% 0% 5% 0%;
}

/*---worksimg03---*/
.worksimg03 {
padding: 0px;
margin:3.6% 3% 5% 0%;
}

/*---worksimg04---*/
.worksimg04 {
width:28%;
padding: 0px;
margin:3% 3% 0px 0px;
}

/*---worksimgcontainer---*/
.workscontainer {
width:100%; 
max-width:100%; 
height:100%; 
max-height:500px: 
background: #ffffff; 
margin:auto;
}

/*---workslist---*/
ul.thumbnail {
list-style-type: none;
}
ul.thumbnail li {
float: left;
 margin: 0 5px 5px 0;
}
ul.thumbnail li img {
 border: none
 width: 90px;
 height: 90px;
}
ul.thumbnail li a { display: block; }

.clearfix:after {
content: ".";
display: block;
height: 0;
line-height:0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* MacIE begin \*/
*+html div.clearfix{height: 1%;}

* html div.clearfix{height: 1%;}

.clearfix {display: block;}
/* Mac IE end */



/*---worksimg hover---*/
a img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}

a:hover img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	filter: none;
	-webkit-filter: grayscale(0%);
}


/*---about 本文---*/
p.ssp13 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.8em;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: left;
width: 78%;
margin:0% 0% 7% 3%;
}

/*---about contact---*/
p.ssp14 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.68em;
letter-spacing: 0.1em;
text-align: left;
margin: 0 0 3% 0;
}

/*---about credit---*/
p.ssp17 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.65em;
letter-spacing: 0.1em;
line-height: 1.5em;
text-align: left;
width: 75%;
margin:0% 0% 7% 3%;
}

/*---about img---*/
.aboutimg {
width: 100%;
padding: 0px;
margin-right: 0px;
margin-top:5%;
margin-bottom:5%;
}

/*---about hr---*/
.abouthr {
	display: inline-block;
	position: relative;
	width: 32%;
	padding : 0px;
	margin: 0 0 0 8%;
	vertical-align: top;
}


/* --- contact img--- */
.contactimg {
width: 10%;
padding: 0px;
margin: 3.6% 0 0 0;
}


/* --- contact form--- */

p.ssp15 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
letter-spacing: 0.1em;
text-align: left;
margin-bottom: 1%;
}

p.ssp16 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.56em;
text-align: left;
letter-spacing: 0.1em;
}

form.base {
margin: 0px;
position: relative;
padding: 0px;
text-align: left;
}

#ctform {
	border: none;
	background: #ffffff;
	width: 100%;
}

input{
	margin: 0 0 2% 0;
	border: none;
	background: #edf3fb;
	min-width: 50%;
}

	
.btn {
	cursor: pointer;
	color: #0fafff;
	font-size: 0.56em;
	font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
	letter-spacing: 0.1em;
	text-align: right;
	padding: 1% 1%;
	border: none;
	background: #ffffff;
}

textarea.form{
	line-height: 120%;
	border: 1px solid #666666;
	min-width: 50%;
    	min-height: 10%;
    	max-width:  50%;
    	max-height: 25%;
}


/*---links 本文---*/
.ssp17 {
font-family: "Georgia", "Crimson Text", "ＭＳ 明朝", serif; 
font-size : 0.8em;
letter-spacing: 0.1em;
line-height: 1.8em;
text-align: left;
width: 80%;
margin:0% 0% 7% 3%;
}