@charset "UTF-8";

/* --------------------------------
 * base
 * -------------------------------- */

html {
font-size: 62.5%;
}
body {
background: #151515 url('../picture/5886.jpg') no-repeat fixed left bottom;
background-size: cover;
color: #fff;
text-align: center;
font-size: 1.4rem;
font-family: Raleway, "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
}

*, *::before, *::after {
box-sizing: border-box;
}

/* --------------------------------
 * parts
 * -------------------------------- */

.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;
}


.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.5;
}

.button-showy {
background-color: #f1b400;
}

/* --------------------------------
 * 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: #fff;
vertical-align: middle;
}

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


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

.buttons .button {
margin: 10px;
}

/* --------------------------------
 * about
 * -------------------------------- */

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

.about-text {
margin: 30px 0;
line-height: 2.5;
}

/* --------------------------------
 * works
 * -------------------------------- */

.works {
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-image{
display: block;
width: 100%;
margin: 0 0 60%;
}

.work-description{
position: absolute;
top: 50%;
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;
}

.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/blue.png');
}



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

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

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


.work-box:nth-child(odd) .work-image{
margin: 60% 0 0;
}

.work-box:nth-child(odd) .work-description,
.work-box:nth-child(odd)::after{
top: 0;

}



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


/* --------------------------------
 * MY 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;
outline: none;
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]{
diosplay: block;
width: 200px;
margin: 40px auto 0;
padding: 15px;
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-color: rgba(255, 255, 255, 0.05);
}

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

}

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




/* --------------------------------
 * self corting
 * -------------------------------- */
.work-box{
over-flow: hidden;
}

.work-box img{
transition: -webkit-transform 0.5s ease-in-out;
transition: trabsform 0.5s ease-in-out;
}

.work-box:hover img{
-webkit-trajnsform: scale(1.1);
transform: scale(1.1);
}







.work-box:nth-of-type(odd) img{
-webkit-transform-origin: top center;
transform-origin: top center;
}







.work-box:nth-of-type(even) img{
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}