@charset "utf-8";

/* ----------------------------------------------------------------
Reset
----------------------------------------------------------------- */

body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,p,a { margin: 0; padding: 0; }
img { border: 0; }
li,dt,dd { list-style: none; }

/* ----------------------------------------------------------------
Common
----------------------------------------------------------------- */

html {
font-size: 62.5%;
}

body {
text-align: center;
color: #333;
background: #f1f1f1;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-size: 1.4rem;
line-height: 2.8rem;
margin: 0 auto;
}

h2 {
font-size: 2.8rem;
font-weight: 600;
font-family: Montserrat,"Helvetica Neue",sans-serif;
text-transform: uppercase;
letter-spacing: 0.4rem;
margin-bottom: 2rem;
}

h3 {
font-size: 1.4rem;
line-height: 1.4rem;
font-weight: 400;
letter-spacing: 0.2rem;
margin-bottom: 5rem;
}

/* ----------------------------------------------------------------
Hero
----------------------------------------------------------------- */

#hero {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url(../image/hero.jpg) no-repeat 0 0;
background-size: cover;
z-index: 1;
}

#hero h1 {
margin-top: -3%;
}

#hero h1 img {
width: 370px;
}

#scroll {
position: absolute;
bottom: 60px;
z-index: 2;
}

#scroll:hover {
opacity: 0.6;
}

/* ----------------------------------------------------------------
About
----------------------------------------------------------------- */

#about {
width: 100%;
padding: 120px 0;
}

#about p {
font-size: 1.4rem;
line-height: 3.6rem;
margin-bottom: 5rem;
}

#about .content ul {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}

#about li {
width: 200px;
line-height: 2.6rem;
font-weight: 600;
}

#about li img {
width: 80px;
margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
Works
----------------------------------------------------------------- */

#works {
width: 100%;
background: #e5e5e5;
padding: 120px 0;
}

#works .content ul {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}

#works li {
margin: 0 40px;
}

#works li a:hover {
opacity: 0.8;
transition: .2s;
}

#works li img {
width: 350px;
}

/* ----------------------------------------------------------------
Company
----------------------------------------------------------------- */

#company {
width: 100%;
padding: 120px 0;
}

#company .content {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}

#company dl {
text-align: left;
width: 460px;
margin: 0 40px;
border-bottom: 1px solid #cdcdcd;
}

#company dt {
font-weight: 600;
padding: 20px 0 0 0;
border-top: 1px solid #cdcdcd;
}

#company dd {
line-height: 3.5rem;
padding: 0 0 20px 0;
}

/* ----------------------------------------------------------------
Contact
----------------------------------------------------------------- */

#contact {
width: 100%;
height: 250px;
color: #fff;
background: url(../image/contact.jpg) no-repeat 50% 50%;
background-size: cover;
padding: 60px 0 0 0;
}

#contact p {
letter-spacing: 0.2rem;
margin-bottom: 3rem;
}

.btn {
display: inline-block;
}

.btn a:link, .btn a:visited {
display: inline-block;
color: #333;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.2rem;
padding: 2.2rem 4rem;
text-decoration: none;
border-bottom: none;
background: #fff;
}

.btn a:hover {
transition: .2s;
opacity: 0.8;
pointer: cursor;
}

/* ----------------------------------------------------------------
Copyright
----------------------------------------------------------------- */

#copyright {
width: 100%;
color: #555;
font-size: 1.2rem;
font-weight: 400;
font-family: Montserrat,"Helvetica Neue",sans-serif;
letter-spacing: 0.1rem;
padding: 50px 0 50px 0;
}

/* ----------------------------------------------------------------
Animation
----------------------------------------------------------------- */

.fadein {
opacity: 0;
transform: translate(0, 30px);
transition: all 400ms;
}

.fadein.start {
opacity: 1;
transform: translate(0, 0);
}

.fadein:nth-of-type(2) {
transition-delay: 200ms;
}

.fadein:nth-of-type(3) {
transition-delay: 400ms;
}