@charset "UTF-8";

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	background: #f0f0ef;
}

h1 {
	padding: 150px 0 180px;
	text-align: center;
	color: #212121;
	font-size: 42px;
	font-family: 'Julius Sans One', sans-serif;
	letter-spacing: -3px;
}
h1 span {
	font-family: 'Julius Sans One', sans-serif;
	letter-spacing: 0;
}

.profArea {
	width: 100%;
	background: #fff;
	position: relative;
}
.profWrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
}
.profArea .icon {
	position: absolute;
	top: -40px;
	width: 180px;
	height: 180px;
	border-radius: 10px;
	overflow: hidden;
}
.profArea .icon img {
	width: 100%;
	height: auto;
}
.profArea .text {
	padding-left: 240px;
}
.profArea .text p {
	display: inline-block;
	padding: 55px 0 0;
}
.profArea .subText p {
	display: inline-block;
	padding: 15px 0 55px 240px;
	font-size: 12px;
	color: #aaa7a9;
}

.profArea .text p.name {
	color: #8a867c;
	font-size: 28px;
}
.profArea .text p.job {
	color: #bdb7aa;
	font-size: 14px;
	/*padding-left: 80px;*/
}
.profArea .text p.mail {
	color: #bdb7aa;
	font-size: 14px;
	/*padding-left: 160px;*/
}
.profArea .text p i {
	display: none;
}
.profArea .text p span {
	color: #ddd;
	padding:0 20px;
}


.worksArea {
	width: 100%;
}
.worksArea a {
	color: #555;
}
.worksArea a:hover {
	color: #aaa;
}

.worksArea .itemWrap {
	max-width: 1000px;
	margin: 150px auto;
	padding: 0 10px;
}
.worksArea h2 {
	font-size: 80px;
	font-weight: 100;
}
.worksArea .category {
	width: 160px;
	margin-bottom: 20px;
	padding:10px 10px 4px;
	border-bottom: 2px solid #000;
	font-size: 14px;
	font-weight: 100px;
}
.worksArea .discription {
	padding: 30px 0;
	color: #555;
	font-size: 14px;
	line-height: 1.6;
}
.worksArea .imgArea {
	width: 100%;
}
.worksArea .imgArea img {
	width: 100%;
}

.worksArea .url {
	color: #555;
	font-size: 12px;
	padding:10px 0;
}
.worksArea .date {
	color: #555;
	font-size: 12px;
}
.worksArea .url span,
.worksArea .date span {
	color: #a5a595;
	line-height: 1.6;
}



.worksAreaMini {
	width: 100%;
}
.worksAreaMini a {
	color: #555;
}
.worksAreaMini a:hover {
	color: #aaa;
}

.worksAreaMini .itemWrap {
	max-width: 1000px;
	margin: 25px auto;
	padding: 0 10px;
}
.worksAreaMini h2 {
	font-size: 24px;
	font-weight: 300;
}
.worksAreaMini .category {
	width: 160px;
	margin-bottom: 15px;
	padding:10px 10px 4px;
	border-bottom: 2px solid #000;
	font-size: 14px;
	font-weight: 100px;
}
.worksAreaMini .discription {
	padding: 15px 0 10px;
	color: #555;
	font-size: 12px;
	line-height: 1.6;
}
.worksAreaMini .url {
	color: #555;
	font-size: 12px;
	padding:10px 0;
}
.worksAreaMini .date {
	color: #555;
	font-size: 12px;
	padding:0 0 10px;
}
.worksAreaMini .url span,
.worksAreaMini .date span {
	color: #b0b0b0;
	line-height: 1.6;
}


footer {

}

footer .copyright {
	padding: 40px 0;
	text-align: center;
	color: #aaa;
	font-size: 12px;
}

/*=============================================
890px
=============================================*/

@media (max-width: 890px) {

	h1 {
		padding: 150px 0 180px;
		font-size: 42px;
	}


	.profArea .icon {
		position: relative;
		top: -40px;
		left: 50%;
		margin-left: -70px;
		width: 140px;
		height: 140px;
		border-radius: 10px;
		overflow: hidden;
	}

	.profArea .text {
		position: relative;
		padding-left: 0px;
		top: -20px;
	}
	.profArea .text p {
		display: block;
		padding: 10px 0;
		text-align: center;
	}
	.profArea .subText p {
		display: block;
		line-height: 1.6;
		padding: 0 10px 30px;
		text-align: center;
	}
	.profArea .text p.name {
		color: #8a867c;
		font-size: 20px;
	}
	.profArea .text p.job {
		color: #bdb7aa;
		font-size: 14px;
		/*padding-left: 80px;*/
	}
	.profArea .text p.mail {
		color: #bdb7aa;
		font-size: 14px;
		/*padding-left: 160px;*/
	}
	.profArea .text p i {
		display: none;
	}
	.profArea .text p span {
		color: #ddd;
		padding:0 20px;
		display: none;
	}



	.worksArea .itemWrap {
		max-width: 1000px;
		margin: 70px auto;
		padding: 0 10px;
	}
	.worksArea h2 {
		font-size: 64px;
		font-weight: 100;
	}


}

/*=============================================
420px
=============================================*/

@media (max-width: 420px) {

	h1 {
		padding: 100px 0 130px;
		font-size: 36px;
	}


	.profArea .icon {
		position: relative;
		top: -40px;
		left: 50%;
		margin-left: -60px;
		width: 120px;
		height: 120px;
		border-radius: 10px;
		overflow: hidden;
	}

	.profArea .text {
		position: relative;
		padding-left: 0px;
		top: -20px;
	}
	.profArea .text p {
		display: block;
		padding: 10px 0;
		text-align: center;
	}

	.profArea .text p.name {
		color: #8a867c;
		font-size: 20px;
	}
	.profArea .text p.job {
		color: #bdb7aa;
		font-size: 14px;
		/*padding-left: 80px;*/
	}
	.profArea .text p.mail {
		color: #bdb7aa;
		font-size: 14px;
		/*padding-left: 160px;*/
	}
	.profArea .text p i {
		display: none;
	}
	.profArea .text p span {
		color: #ddd;
		padding:0 20px;
		display: none;
	}



	.worksArea .itemWrap {
		max-width: 1000px;
		margin: 70px auto;
		padding: 0 10px;
	}
	.worksArea h2 {
		font-size: 40px;
		font-weight: 100;
	}


}