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

html {
	font-size:62.5%;
}
*,*::before,*::after {
	box-sizing:border-box;
}

/*body{
	background:#151515 url('../images/bg.png') no-repeat  center center;
    width: 100%;
    padding-top: 62.81%;
	background-size:cover;
	color:#fff;
	text-align:center;
	font-size:1.4rem;
	font-family:Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}*/

body{
	color:#000;
	text-align:center;
	font-size:1.4rem;
    font-family:Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

.bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
	background:url('../images/bg.png') no-repeat  center center;
    width: 100%;
	background-size:cover;
    opacity: .5;
    z-index: -1;
}

/* header */


.header {
	padding:170px 30px 80px;
}

.site-title-sub {
	margin:0 0 30px;
	letter-spacing:1px;
	font-size:2.2rem;
}
.site-title-sub::before,
.site-title-sub::after {
	content:'';
	display:inline-block;
	width:140px;
	height:2px;
	margin:0 30px;
	background-color:#000;
	vertical-align:middle;
}

.site-title {
	margin:50px 0 40px;
	font-size:6.7rem;
}

.site-description {
	margin-bottom:50px;
	color:#888;
	font-size:1.6rem;
}

.button {
	display:inline-block;
	width:200px;
	padding:20px;
	border-radius:4px;
	background-color:#afa58d;
	color:#fff;
	text-decoration:none;
	letter-spacing:1px;
	font-size:1.2rem;
}
.button:hover {
	opacity:0.9;
}
.button-showy {
	background-color:#f1b400;
}

.buttons .button {
	margin:10px;
}


/* about */
.about {
	padding:80px 30px;
	background-color:#fff;
	color:#333;
}

.heading {
	position:relative;
	display:inline-block;
	margin:30px 0 15px;
	padding-bottom:15px;
	letter-spacing:2px;
	font-size:4rem;
}
.heading::before,
.heading::after {
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	border-bottom:1px solid #999;
}
.heading::before{
	bottom:5px;
}
.about-text {
	margin:30px 0;
	line-height:2.5;
}
/* works */

.works {color: #fff;
	background-color:#383634;
	padding:80px 0;
}
.works-wrapper{
	display:table;
	width:100%;
	margin-top:60px;
	table-layout:fixed;
}
.work-box{
	position:relative;
	display:table-cell;
}
.work-box::after{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:50%;
	background: no-repeat;
	background-size:100% 100%;
	opacity:0.2;
	transform:scaleY(-1);
}

.work-box .tree::after {
	background-image:url('../images/tree.jpg');
}
.work-box .building::after {
	background-image:url('../images/tree.jpg');
}
.work-box .lake::after {
	background-image:url('../images/tree.jpg');
}
.work-box .sky::after {
	background-image:url('../images/tree.jpg');
}

.work-image{
	display:block;
	width:100%;
	margin:0 0 60px;
}

.work-description{
	position:absolute;
	top:50px;
	left:0;
    z-index: 1;
	width:100%;
	height:50%;
    overflow-y:auto;
}


.work-description-inner{
	display:table;
	width:100%;
	height:100%;
	padding:20px;
}
.work-text{
	display:table-cell;
	vertical-align:middle;
	font-size:1.2rem;
	line-height:2;
}
.work-text .button {
	width:60%;
	margin-top:20px;
	padding:3px;
}

.button-ghost {
	border:1px solid #fff;
	background-color:rgba(255,255,255,0.15);
}


/* skills */

.skills{
	padding:80px 0;
	background-color:#fff;
	color:#333;
}

.skills-wrapper{
	display:table;
	width:80%;
	margin:50px auto 0;
	table-layout:fixed;
}

.skill-box{display:table-cell;
}

.skill-icon{
	width:150px;
	height:150px;
	margin-bottom:30px;
	border:4px solid;
	border-radius:50%;
	color:#f1b400;
	font-size:8rem;
	line-height:142px;
}

.skill-title{
	margin:0 20px 20px;
	font-size:2rem;
}
.skill-text{
	margin:0 20px;
	line-height:2;
}






/* contact */
.contact {
	padding:80px 0 150px;
}

.contact-form {
	width:50%;
	margin:50px auto 0;
}

.contact-form input[type=text],
.contact-form textarea {
	display:block;
	width:100%;
	margin-bottom:10px;
	padding:15px;
	border:1px solid rgba(255,255,255,0.4);
	border-radius:0;
	background-color:rgba(255,255,255,0.05);
	color:#fff;
}

.contact-form textarea {
	height:150px;
}
.contact-form input[type=submit]{
	display:block;
	width:200px;
	margin:40px auto 0;
	padding:15px;
	outline:none;
	border:1px solid rgba(255,255,255,0.4);
	border-radius:5px;
	background-color:transparent;
	color:rgba(255,255,255,0.6);
	cursor:pointer;
}

.contact-form input[type=submit]:hover{
	background-colo:rgba(255,255,255,0.05);
}

.contact-form input[type=submit]:focus,
.contact-form textarea:focus{
	box-shadow:0 0 8px rgba(255,255,255,0.5) inset;
}


/* footer */

.footer {
	padding:12px 0;
	font-size:1.3rem;
}

@media(max-width:768px){
	.site-title-sub::before,
	.site-title-sub::after{
		display:block;
		width:80%;
		margin:10px auto;
	}
	.site-title-sub{
		font-size:1.7rem;
	}
	.site-title{
		margin-top:35px;
		font-size:4rem;
	}
	.header{
		padding-top:60px;
	}
	.buttom:hover{
		opacity:1;
	}
	
	
	.heading{
		font-size:2.5rem;
	}
	body{
		font-size:1.3rem;
	}
	.about-text{
		line-height:1.8;
	}
	.works-wrapper,
	.work-box{
		display:block;
	}
	.work-image{
		display:none;
	}
	.work-description{
		position:relative;
	}
	.work-box::after{
		top:0;
		height:100%;
		background-size:cover;
		transform:none;
	}


    .skills-wrapper,
	.skill-box{
		display:block;
	}
	.skill-icon{
		width:100px;
		height:100px;
		font-size:5rem;
		line-height:96px;
	}
	.skill-box{
		margin:40px auto;
	}
	.skill-text{
		margin:0;
	}
	.contact-form{
		width:80%;
	}
	.contact{
		padding-bottom:80px;
	}
}