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

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1; font-family: "Noto Sans Japanese", 'Noto Sans', sans-serif; color: #242424;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
nav ul {
list-style:none;
}
ul {
list-style: none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

*{box-sizing: border-box;}

/* =================================================================
共通
=================================================================*/
/*  基本のlink color
-------------------------------------------------------------*/
a:link{color: #242424; text-decoration: none;}
a:visited{color: #242424; text-decoration: none;}
a:hover,a:active{color: #242424; text-decoration: underline;}


/* =================================================================
ヘッダー
=================================================================*/
header:after{clear: both; display: block; content: "";}
header {background: #212121; padding: 10px 10px;}
header h1{text-indent: -9999px; background: url(../images/header_logo.png) no-repeat; height: 34px; width: 284px; float: left;}

header ul{float: right; padding-top: 6px;}
header li{display: inline-block; font-size: 12px; margin-left: 10px; font-weight: 100; letter-spacing: 7px;}
header li a:link{color: #ffffff;}
header li a:visited{color: #ffffff;}
header li a:hover,header li a:active{color: #ffffff; text-decoration: underline;}

/* =================================================================
トップ
=================================================================*/
#top #mainVisual{background:url(../images/main_bg.jpg) no-repeat center center; background-size: cover; display: block; position: relative; overflow: hidden; width: 100%;}
#top #mainVisual .title{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0px; line-height: 10%;}
#top #mainVisual .title span{font-weight: normal; font-size: 20px; color: #ffffff; letter-spacing: 13px; margin: 0 auto;}

#top h2{font-size: 30px; margin: 0px auto 40px; text-align: center; letter-spacing: 5px;}
#top #works{background: #EBEBEB; padding: 70px 0;}
#top #works ul{width: 640px; margin: 0 auto;}
#top #works ul:after{clear: both; display: block; content: "";}
#top #works li{float: left; margin: 10px;}
#top #works li img{display: block; -webkit-transition: all .2s ease; transition: all .2s ease;}
#top #works li img:hover {box-shadow: 3px 3px 12px -2px #d1d4da; transform: scale(1.004,1.004);}

#top #about{width: 980px; margin: 0 auto; padding: 70px 0;}
#top #about:after{clear: both; display: block; content: "";}
#top #about img{float: left; margin-left: 120px; margin-top: 30px;}
#top #about p{float: right; width: 480px; font-size: 13px; line-height: 150%;}


/* =================================================================
フッター
=================================================================*/
footer{padding: 70px 0 40px;}
footer ul{width: 105px; margin: 10px auto;}
footer ul:after{clear: both; display: block; content: "";}
footer li{float: left; margin: 0 10px; font-size: 12px;}
footer p{font-size: 12px; text-align: center;}


@media(max-width:980px) and (min-width: 641px){
header h1{float: none; margin: 0 auto; background-size: contain; width: 184px;}
header ul{float: none; margin: 10px auto 10px; width: 320px; display: flex; justify-content: center;}

#top #mainVisual .title{line-height: 40%; width: 70%;}
#top #mainVisual .title img{width: 100%;}
#top #mainVisual .title span{font-size: 10px; margin-left: 10px;}

#top h2{font-size: 20px;}

#top #works ul{width: 640px; margin: 0 auto; }
#top #works ul li{float: left;}

#top #about{width: 100%;}
#top #about img{float: none; margin: 30px auto 10px; display: block;}
#top #about p{float: none; width: 100%; font-size: 13px; line-height: 150%; padding: 0 30px;}

}

@media screen and (max-width: 640px) {
header h1{float: none; margin: 0 auto; background-size: contain; width: 184px;}
header ul{float: none; margin: 10px auto 10px; width: 320px; display: flex; justify-content: center;}

#top h2{font-size: 20px;}

#top #mainVisual .title{line-height: 40%; width: 70%;}
#top #mainVisual .title img{width: 100%;}
#top #mainVisual .title span{font-size: 10px; margin-left: 10px;}

#top #works ul{width: 320px; margin: 0 auto; }
#top #works ul li{float: left;}

#top #about{width: 100%;}
#top #about img{float: none; margin: 30px auto 10px; display: block;}
#top #about p{float: none; width: 100%; font-size: 13px; line-height: 150%; padding: 0 30px;}

}