/*
Theme Name: Responsive
Theme URI: http://www.at-factory.com
Description: WordPressテーマ「Responsive」
Version: 2.0
Author: AT
Author URI: http://www.at-factory.com
*/

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}
pre{white-space:pre-wrap;word-wrap:break-word}
q{quotes:\201C \201D \2018 \2019}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=search]{-moz-box-sizing:content-box;-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
body,figure{margin:0}
legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}

/* ----------------------------------------------------*/
/* clearfix */
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display:table;line-height:0;content: "";}
.clearfix:after {clear:both;}

/* IE6,7 */
.ie6 body {background:url(null) fixed;filter:expression('');}
.ie7 body {filter:expression('');}

/* fixed */
.fixed_tl {position:fixed;top:0;left:0;}
.ie6 .fixed_tl {position:absolute;top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');left:expression(document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px');}
.fixed_tr {position:fixed;top:0;right:0;}
.ie6 .fixed_tr {position:absolute;top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');right:expression(this.style.filter = '', '0');}
.fixed_bl {position:fixed;bottom:0;left:0;}
.ie6 .fixed_bl {position:absolute;bottom:expression(this.style.filter = '', '0');left:expression(document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px');}
.fixed_br {position:fixed;bottom:0;right:0;}
.ie6 .fixed_br {position:absolute;bottom:expression(this.style.filter = '', '0');right:expression(this.style.filter = '', '0');}

/* ----------------------------------------------------*/
/* reset */
* { margin: 0; padding: 0; }
ol,ul {list-style:none;padding:0;margin:0;}
img {vertical-align:top;font-size:0;line-height:0;border:none;}
h1,h2,h3,h4,h5,p { margin:0; }
th {font-weight:normal;text-align:left;}
th,td {vertical-align:top;}

/* ----------------------------------------------------*/

body {
background: #fff repeat-x;
font-size: 62.5%;
font-family: 'Roboto',"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
color: #333;
word-break: break-all;
}

input,textarea,select {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
font-size: 100%;
}

.imgfit {
width: 100%;
height: 100%;
overflow:hidden;
position: relative;
text-align:center;
}

.imgfit img {
position: relative;
width: 100%;
height: auto;
}

.alignnone{
margin-bottom:10px;
}

.alignleft{
float:left;
margin-right:20px;
margin-bottom:10px;
}

.alignright{
float:right;
margin-left:20px;
margin-bottom:10px;
}

.notice{
color:#cc3300;
}

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

figure {
position: relative;
overflow: hidden;
margin:3px;
pading:0;
border:solid 1px #999;
}

figure h2 {
font-size:1.4em !important;
line-height:160%;
padding:0 2px;
}

figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 90%;
height: 100%;
background: rgba(0,0,0,0.8);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
color:#fff !important;
font-size:0.85em;
padding:10% 5%;
}

figcaption a{
color:#fff !important;
text-decoration:underline !important;
}

figure:hover figcaption {
opacity: 1;
}

.transform01 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

figure:hover .transform01 {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

/* ----------------------------------------------------*/
/* link Style */
a:link {
color: #990000;
text-decoration: none;
}

a:visited {
color: #990000;
text-decoration: none;
}

a:hover {
color: #ccc;
text-decoration: none;
}

a:active {
color: #990000;
text-decoration: none;
}

.backtotop {
position: fixed;
right: 0;
bottom: 100px;
z-index: 9000;
display: none;
}    
 
.backtotop a {
display: block;
color: #fff;
padding: 10px;
margin: 0;
background-color: #cc0000;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
 
.backtotop a:hover {
background: #999;
color: #fff;
}

/* Buttons */
.button-primary{
color: #990000;
background-color: #fff;
display: inline-block;
padding: 10px 60px 8px 60px;
color: #555;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: 100%;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-radius: 0;
border: 3px solid #990000;
cursor: pointer;
box-sizing: border-box;
margin:30px 0;
}

a.button-primary:visited{
color: #990000;
border:solid 3px #990000;
}


a.button-primary:hover{
color: #fff;
border:solid 3px #990000;
background:#990000;
}

/* ----------------------------------------------------*/
/* Layout */
html, body {
	width:100%;
	height:100%;
}

.nojs {
	visibility: visible;
}

.wrap {
	clear:both;
}

/* ----------------------------------------------------*/
/* Header */

#header {
height: 45px;
background: #990000;
position: fixed !important; 
z-index:9999;
width:100%;
}

* html div#header {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}

#header_body {
position:relative;
float: left;
padding: 10px 10px 0 10px;
}

.description{
color:#fff;
position:absolute;
top:16px;
left:175px;
width:170px;
}

#header_body h1 {
position:absolute;
top:0;
float: left;
padding-left: 20px;
}

.works a{
position:absolute;
top:12px;
right:350px;
font-size:1.6em;
color:#fff;
}

.about a{
position:absolute;
top:12px;
right:180px;
font-size:1.6em;
color:#fff;
}

.contact a{
position:absolute;
top:12px;
right:30px;
font-size:1.6em;
color:#fff;
}


/* ----------------------------------------------------*/
/* content */

h1,h2,h3,h4,h5 { 
line-height: 1em;
}

p {
line-height: 1.6em;
font-size:1.4em;
margin:3px;
}

.bold {
	font-weight: bold;
}

.condensed {
	font-family: 'Roboto Condensed', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	letter-spacing: 0.075em;
}

.page{
padding:30px;
}

.page h2{
font-size:190%;
line-height:140%;
margin-bottom:15px;
color:#333;
border-top:solid 1px #990000;
border-bottom:solid 1px #990000;
padding: 4px 0 2px 10px;
}

.page h3{
font-size:130%;
line-height:140%;
color:#556b2f;
margin-top:5px;
margin-bottom:5px;
}

.page h4{
font-size:120%;
line-height:140%;
color:#ff6600;
margin-top:5px;
margin-bottom:5px;
}

.notice{
color:#cc3300;
font-size:80%;
}


#content {
clear: both;
position: relative;
top:45px;
margin-bottom:30px;
overflow:hidden;
}

/* category */
.cat-list {
float:left;
width:25%;
}

.sectiontitle {
background:#fff;
padding:10px 25px;
margin:0;
font-family: 'Roboto Condensed', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
font-size: 2.0em;
letter-spacing:0.1em;
color:#990000;
border-top:solid 1px #ccc;
}

.itemtitle {
top: 30px;
left: 30%;
margin-top:5px;
font-size:1.4em;
line-height:160%;
}

.itemtitle a{
text-decoration: underline;
font-weight:100;
}

/* ----------------------------------------------------*/
/* COMPANY INFORMATION */

#info {
background:#f6f6f5;
color:#555;
padding:0;
margin:0;
}

ul.sample {
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

ul.sample li {
width: 29.3%;
padding:2%;
font-size:0.9em;
}


.qs{
float:left;
margin-bottom:20px;
width:100%;
border-bottom:solid 2px #ccc;
}

.sf-field-post-meta-work{
float:left;
overflow:hidden;
padding:10px !important;
}

.sf-field-post-meta-cliant{
float:left;
overflow:hidden;
padding:10px !important;
}

.search-filter-results{
margin:20px;
}


/* ----------------------------------------------------*/
/* FOOTER */

#footer {
clear: both;
background: #fff;
border-top:solid 1px #ccc;
}


#copyright {
font-size: 1.2em;
color: #333;
text-align:center;
padding:20px;
}

#copyright a{
font-size: 1.2em;
margin-bottom:20px;
}

/* ----------------------------------------------------*/
/* FORM STYLE */

input[type="text"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
}

textarea{
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
width:97%;
min-height:200px;
}

input[type="tel"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
}

input[type="email"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
}
	
input[type="submit"]{
border:none;
padding: 4px 25px;
color: #fff;
background:#333;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:1.8em;
}

select{
vertical-align:middle;
margin:0 5px;
font-size:1.2em;
}

.mwform-checkbox-field {
margin-top:10px;
display: block;
margin-left:0 !important;
}


/* ----------------------------------------------------*/
/* table */
table{
width: 100%;
border-collapse: collapse;
margin:15px 0;
font-size:1.4em;
}

table td,
table th{
padding: 15px;
border: 1px solid #ccc;
}

table th{
background:#f7f7f7;
width:30%;
}

table td{
background:#fff;
width:70%;
}

caption {
caption-side: top;
text-align: left;
font-size:100%;
margin-top:10px;
padding-bottom:10px;
}

.privacy{
font-size:0.85em;
}


/* ***********************************************************************
	For SmartPhone
*********************************************************************** */

@media only screen and (max-width: 768px) {
#header {
height: 45px;
position: static !important; 
}

select{
font-size:1.2em;
}

#header_body h1 {
position:absolute;
top:0;
float: left;
padding-left: 0;
}

#header .contact a{
display:none;
}

#header .about a{
display:none;
}

.description{
color:#fff;
position:absolute;
top:17px;
left:155px;
width:170px;
}

.slide-pc{
display:none;
}

#content {
clear: both;
position: relative;
top:0;
margin-bottom:0;
}


.body {
overflow-x: hidden;
}


.page{
padding:0;
margin:5px;
width:97%;
}

.page h2{
font-size:140%;
line-height:140%;
margin-bottom:15px;
color:#000;
}

.sectiontitle {
padding:10px 20px;
text-align:center;
}

.itemtitle {
top: 30px;
left: 30%;
margin-top:5px;
font-size:1.4em;
line-height:160%;
}

/* category */
.cat-list {
float:left;
width:100%;
}

/* info */
#info li {
float:left;
width: 98%;
padding:2%;
font-size:0.9em;
}

figure {
position: relative;
overflow: hidden;
margin:0;
pading:0;
}


figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 90%;
height: 100%;
background: rgba(0,0,0,0.8);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
color:#fff !important;
font-size:1.0em;
padding:5%;
}

figure:hover figcaption {
opacity: 1;
}


table { margin: 0 -10px; }
    table th,
    table td{
        width: 100%;
        display: block;
        border: none;
padding:10px;

    }
    table tr:first-child th   { border-top: 0 solid #ddd; }


/* ----------------------------------------------------*/
/* FORM STYLE */

input[type="text"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
width:280px;
}

textarea{
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
width:280px;
min-height:200px;
}

input[type="tel"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
}

input[type="email"] {
border:solid 1px #ccc;
padding: 5px;
color: #555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:5px;
width:280px;
}
	
input[type="submit"]{
border:none;
padding: 4px 25px;
color: #fff;
background:#333;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:1.8em;
margin:20px 0;
}

select{
vertical-align:middle;
margin:0 5px;
font-size:1.4em;
width:280px;
}


}