article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
a{background:transparent;}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:0.67em 0}
h2{font-size:2em;margin:2em 0 1em 3em; color:#9a9a9a;}
@media (min-width: 320px){h2{margin:2em 0 1em 1.2em}}
@media (min-width: 480px){h2{margin:2em 0 1em 1.6em}}
@media (min-width: 620px){h2{margin:2em 0 1em 2em}}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
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:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-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}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*{box-sizing:border-box;-moz-box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;height:100%}
body{margin:0;background-color: #f0f0f0;font-family:"AktivGroteskW01-Regular","Helvetica Neue","Helvetica",Arial, Helvetica,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:13px;color:#686868;line-height:1.7em;height:100%}
a{color:#686868}
.wrap{ background-color: #fefefe;}
.wrap2{min-height:100%; border-top:1px solid #e6e6e6; clear:both;}
.wrap2 .projects { clear:both;}
h1{font-size:1em;font-weight:normal}
p{margin-top:0;margin-bottom:1.7em}
.container{width:100%;max-width:1200px;max-width:1500px;margin:0 auto 0px auto;overflow:auto;padding:6em 20px 2em 20px}
@media (min-width: 320px){.container{width:100%; padding:1em 2em;}}
@media (min-width: 480px){.container{width:100%;}}
@media (min-width: 620px){.container{width: 94%;padding: 2em 1em 0;}}
@media (min-width: 910px){.container{width: 94%;padding: 2em 1em 0;}}
@media (min-width: 1200px){.container{width:94%; padding:6em 3em 2em}}
@media (min-width: 1300px){.container{width:92%}}
img{max-width:100%}
.error{max-width:400px;margin:10% auto 0 auto;text-align:center}
.error h1{font-weight:normal;font-family:"Aktiv Grotesk W01 Light","Helvetica Neue";font-size:40px;margin:0 0 20px 0}
a{ color:#00A3CC;text-decoration:none;}
a:hover{color:#E68A2E;}
.navigation{width:100%;float:left;padding:0 0 100px 0}
.navigation .older-newer{width:100%;float:right;padding:0 20px}
@media (min-width: 620px){.navigation .older-newer{width:50%}}
@media (min-width: 910px){.navigation .older-newer{width:33.33333%}}
@media (min-width: 1200px){.navigation .older-newer{width:25%}}
.navigation .older-newer .separator{margin:0 10px;display:inline-block}
header{margin:0 0 3em 0;padding:0 20px;width:100%;float:left}
@media (min-width: 320px){header{padding:0;}}
header a{text-decoration:none;color:#686868;padding:0 0 4px 0;border-bottom:1px solid #fafafa}
header a:hover{text-decoration:none;border-bottom:1px solid;padding-bottom:4px}
header .active{border-bottom:1px solid #ccc}
header ul{margin:0;padding:0}
header li{list-style:none;display:inline;margin-right:20px}
.main{border-top:1px solid #e6e6e6;width:100%;position:relative;clear:both;height:103px;margin-top:-103px}
@media (min-width: 320px){.main{margin-top:0}}
@media (min-width: 480px){.main{margin-top:0}}
@media (min-width: 620px){.main{margin-top:0}}
@media (min-width: 1080px){.main{margin-top:0}}
@media (min-width: 1200px){.main{margin-top:-103px}}
.main .center-footer{width:100%;max-width:1500px;margin:0 auto;padding:40px 20px}
@media (min-width: 620px){.main .center-footer{width:100%}}
@media (min-width: 910px){.main .center-footer{width:100%}}
@media (min-width: 910px){.main .center-footer .text p{text-align:right;}}
@media (min-width: 1200px){.main .center-footer{width:100%}}
@media (min-width: 1300px){.main .center-footer{width:92%}}

.main .text-top{width:50%;color:#c3c3c3;padding:0 20px;float:left}
@media (min-width: 620px){.main .text-top{width:50%}}
@media (min-width: 320px){.main .center-footer .text-top{padding:0 0 0 1em; text-align:left;}}
@media (min-width: 480px){.main .center-footer .text-top{padding:0 0 0 2em; text-align:left;}}
@media (min-width: 620px){.main .center-footer .text-top{padding:0 0 0 4em; text-align:left;}}
@media (min-width: 910px){.main .text-top{width:33.33333%; padding:0 0 0 4em;}}
@media (min-width: 1200px){.main .text-top{width:25%;float:left}}
@media (min-width: 1300px){.main .text-top{width:25%}}

.main .text{width:50%;color:#c3c3c3;padding:0 20px;float:right}
@media (min-width: 620px){.main .text{width:50%}}
@media (min-width: 320px){.main .center-footer .text{padding:0; text-align:right;}}
@media (min-width: 480px){.main .center-footer .text{padding:0; text-align:right;}}
@media (min-width: 620px){.main .center-footer .text{padding:0; text-align:right;}}
@media (min-width: 910px){.main .text{width:33.33333%; padding:0;}}
@media (min-width: 1200px){.main .text{width:25%;float:right}}
@media (min-width: 1300px){.main .text{width:25%}}
.projects{ width:80%; margin:0 auto 0; padding:2em 0;}
@media (min-width: 910px){.projects{width:90%}
@media (min-width: 1080px){.projects{width:90%}}
@media (min-width: 1200px){.projects{width:80%}}
@media (min-width: 1800px){.projects{width:80%}}
.projects .project{float:left;padding:0 20px;position:relative}

.projects .project .image-wrap{width:100%;height:100%;position:relative}
.projects .project .image-wrap .details{position:absolute;width:100%;height:100%;padding:20px;display:block;background:#1f1f1f;opacity:0;transition:opacity 0.3s ease;color:#fff;text-decoration:none}
.projects .project .image-wrap .details:hover{opacity:1}
.projects .project img{max-width:100%;display:block}
.projects .pro{width:50%;margin-bottom:40px}

@media (min-width: 32px){.projects .pro{width:100%}}
@media (min-width: 480px){.projects .pro{width:100%}}
@media (min-width: 620px){.projects .pro{width:100%}}
@media (min-width: 910px){.projects .pro{width:66.66667%}}
@media (min-width: 1200px){.projects .pro{width:50%}}

.main-3pro{width:100%; margin:0 0 1em 0;float:left; text-align: center;}
.projects .project{float:left;padding:0 20px 0 4em;position:relative}
.projects .project .image-wrap{width:100%;height:100%;position:relative}
.projects .project .image-wrap .details{position:absolute;width:100%;height:100%;padding:20px;display:block;background:#1f1f1f;opacity:0;transition:opacity 0.3s ease;color:#fff;text-decoration:none}
.projects .project .image-wrap .details:hover{opacity:0.7}
.projects .project img{max-width:100%;display:block; border: 1px solid #c6c6c6;}

@media (min-width: 910px){.projects .pro{width:100%; padding:0 0;}}
@media (min-width: 1080px){.projects .pro{width:80%; padding:0; margin:0 auto 2em; float:none; text-align:left;}}
@media (min-width: 1200px){.projects .pro{width:50%; margin-bottom:40px; padding: 0 20px 0 4em; float:left; text-align:left;}}
@media (min-width: 1800px){.projects .pro{width:50%; margin-bottom:40px; padding: 0 20px 0 4em; float:left; text-align:left;}}

.projects .kyou{width:100%;margin-bottom:40px}
@media (min-width: 620px){.projects .kyou{width:50%}}
@media (min-width: 910px){.projects .kyou{width:33.33333%}}
@media (min-width: 1200px){.projects .kyou{width:25%;padding-top:25%}}
.projects .re-porter{width:100%;margin-bottom:40px}
@media (min-width: 620px){.projects .re-porter{width:50%}}
@media (min-width: 910px){.projects .re-porter{width:33.33333%}}
@media (min-width: 1200px){.projects .re-porter{width:25%;padding-top:25%}}
.projects .ame{width:50%;padding-top:40px;float:right}
.projects .personal-stationery{width:100%;float:right}
@media (min-width: 910px){.projects .personal-stationery{width:66.66667%}}
@media (min-width: 1200px){.projects .personal-stationery{width:50%}}
.project-intro{font-size:26px;font-family:"Aktiv Grotesk W01 Light";line-height:1.4em;float:left;padding:0 20px;margin-bottom:60px;width:100%}
@media (min-width: 910px){.project-intro{width:66.66667%}}
@media (min-width: 1200px){.project-intro{width:60%}}
.project-images{width:100%;padding:0 20px}
.project-images img{max-width:100%;height:auto;margin:0 0 40px 0;display:block;background:#ebebeb}
.project-meta{width:100%;float:right}
@media (min-width: 910px){.project-meta{width:66.66667%}}
@media (min-width: 1200px){.project-meta{width:60%}}
.project-description{float:left;padding:0 20px;width:100%;margin-bottom:40px}
@media (min-width: 620px){.project-description{width:50%}}
.share{float:right;width:100%;padding:0 20px;margin-bottom:40px}
@media (min-width: 620px){.share{width:50%}}
.row{width:100%;clear:both;float:left;margin:0 0 40px 0}
.profile-image{width:100%;padding:0 20px;float:right;margin:0 0 40px 0}
.intro{font-size:28px;font-family:"Aktiv Grotesk W01 Light";line-height:1.4em;float:left;width:100%;padding:0 20px}
@media (min-width: 320px){.intro{ font-size:1.2em;}}
@media (min-width: 620px){.intro{ font-size:1.4em;}}
@media (min-width: 910px){.intro{width:66.66667%; font-size:1.5em;}}
@media (min-width: 1200px){.intro{width:70%; font-size:2em;}}
.text{width:100%}
@media (min-width: 620px){.text{width:66.66667%;float:right;}}
@media (min-width: 910px){.text{width:100%}}
@media (min-width: 1080px){.text{text-align: center; margin:0 auto; width:100%;}}
@media (min-width: 1200px){.text{width:50%; text-align:left;}}
.text .text-block{width:100%;float:left;margin:0 0 40px 0}
.text .what{width:100%;padding:0 20px;float:left;margin-bottom:40px}
@media (min-width: 620px){.text .what{width:50%}}
@media (min-width: 910px){.text .what{width:50%; float:left; padding:0 20px;}}
/**@media (min-width: 1080px){.text .what{width:100%; float:none; padding:0;}}**/
@media (min-width: 1200px){.text .what{width:50%; float:left; padding: 0 20px;}}
@media (min-width: 620px){.text .what p{text-align:left;}}
@media (min-width: 620px){.text .details p{text-align:left;}}
.text .details{width:100%;padding:0 20px;float:right}
@media (min-width: 620px){.text .details{width:50%}}
@media (min-width: 910px){.text .details{width:50%; float:right; padding:0 20px;}}
/**@media (min-width: 1080px){.text .details{width:100%; float:none; padding: 0 0px;}}**/
@media (min-width: 1200px){.text .details{width:50%; float:right; padding: 0 20px;;}}
.entry{width:100%;float:left;margin:0 0 100px 0;padding:0 0 0 0}
.image{float:left;margin:0 0 40px 0;padding:0 20px}
.image .image-wrap{width:100%;height:100%;position:relative}
.text-wrap{width:100%;height:100%;position:relative}
.image .image-wrap .details{position:absolute;width:100%;height:100%;padding:20px;display:block;background:gray;opacity:0;transition:opacity 0.3s ease;color:#fff;text-decoration:none;z-index:99999999}
.image .image-wrap .details:hover{opacity:1}
.image img{display:block;width:100%}
@media (min-width: 910px){.image{width:66.66667%}}
@media (min-width: 1200px){.image{width:50%}}
@media (min-width: 1300px){.image{width:50%}}
.meta{width:100%;margin:0 0 40px 0;padding:0 20px}
@media (min-width: 620px){.meta{float:left;width:50%;margin:0}}
@media (min-width: 910px){.meta{margin-left:40px;margin:0 0 50px 0;width:33.33333%}}
@media (min-width: 1200px){.meta{width:25%}}
@media (min-width: 1300px){.meta{width:25%;margin:0}}
.copy{width:100%;padding:0 20px}
@media (min-width: 620px){.copy{float:left;width:50%}}
@media (min-width: 910px){.copy{margin:0;width:33.33333%;padding:0 20px}}
@media (min-width: 1200px){.copy{width:25%}}
@media (min-width: 1300px){.copy{width:25%;margin:0;padding:0 20px}}
.comments{color:#b4b4b4}
.comments a{color:#b4b4b4}
.block{width:100%;float:left;margin:0 0 60px 0;padding:0 0 0 0}
.column{width:100%;margin:0 0 40px 0;padding:0 20px}
@media (min-width: 620px){.column{float:left;width:50%;margin:0}}
@media (min-width: 910px){.column{margin-left:40px;margin:0 0 50px 0;width:33.33333%}}
@media (min-width: 1200px){.column{width:25%}}
@media (min-width: 1300px){.column{width:25%;margin:0}}
.comments-heading{padding-left:20px}
.client-details,.invoices-estimates,.tickets{width:100%;margin:0 0 40px 0;padding:0 20px}
@media (min-width: 620px){.client-details,.invoices-estimates,.tickets{float:left;width:50%;margin:0}}
@media (min-width: 910px){.client-details,.invoices-estimates,.tickets{margin-left:40px;margin:0 0 50px 0;width:33.33333%}}
@media (min-width: 1200px){.client-details,.invoices-estimates,.tickets{width:25%}}
@media (min-width: 1300px){.client-details,.invoices-estimates,.tickets{width:25%;margin:0}}
.hello,.ticket-subject{padding:0 20px;margin:0 0 40px 0;font-size:26px;float:left;line-height:1.4em;width:100%;font-family:"Aktiv Grotesk W01 Light"}
@media (min-width: 910px){.hello,.ticket-subject{width:66.66667%}}
@media (min-width: 1200px){.hello,.ticket-subject{width:50%}}
.ticket-subject{float:right}
.a-task{font-family:"AktivGroteskW01-Italic"}
.each{margin-bottom:1.7em}
.the-invoice{background:#fff;width:100%;float:left;padding:40px 0}
.the-invoice .paper{width:100%;float:right}
@media (min-width: 1200px){.the-invoice .paper{width:75%}}
.the-invoice .paper .paper-row{float:left;width:100%}
.the-invoice .paper .invoice-number{width:100%;padding:0 20px}
.the-invoice .paper .invoice-heading{color:#b3b3b3}
.the-invoice .paper .invoice-details{padding:0 20px;width:100%;float:left;margin-bottom:60px}
.the-invoice .paper .the-client{padding:0 20px;float:left;width:100%;margin-bottom:60px}
@media (min-width: 620px){.the-invoice .paper .the-client{width:50%}}
@media (min-width: 910px){.the-invoice .paper .the-client{width:33.33333%}}
.the-invoice .paper .me{padding:0 20px;float:left;width:100%;margin-bottom:60px}
@media (min-width: 620px){.the-invoice .paper .me{width:50%}}
@media (min-width: 910px){.the-invoice .paper .me{width:33.33333%}}
.the-invoice .paper .invoice-description{padding:0 20px;float:left;width:100%;margin-bottom:60px}
@media (min-width: 910px){.the-invoice .paper .invoice-description{width:33.33333%}}
.the-invoice .paper .line-items{background:#fff;padding:0 0px;margin-top:0px}
.the-invoice .paper .line-items .hr-wrap{width:100%;float:left;padding:0 20px}
.the-invoice .paper .line-items hr{height:1px;background:#ccc;border:none;margin:0 0 40px 0}
.the-invoice .paper .line-items .line-item{width:100%;float:left;margin:0 0 40px 0}
.the-invoice .paper .line-items .line-item .name-description{float:left;padding:0 20px;width:100%}
@media (min-width: 620px){.the-invoice .paper .line-items .line-item .name-description{width:50%}}
@media (min-width: 910px){.the-invoice .paper .line-items .line-item .name-description{width:66.66667%}}
.the-invoice .paper .line-items .line-item .name-description .name{font-family:"Aktiv Grotesk W01 Bold"}
.the-invoice .paper .line-items .line-item .value{width:100%;float:left;padding:0 20px}
@media (min-width: 620px){.the-invoice .paper .line-items .line-item .value{width:50%}}
@media (min-width: 910px){.the-invoice .paper .line-items .line-item .value{width:33.33333%}}
.the-invoice .paper .line-items .all-totals{padding:0 20px;float:right;width:100%}
.the-invoice .paper .line-items .all-totals .a-total{font-family:"Aktiv Grotesk W01 Bold";margin:0 0 1.7em 0}
.the-invoice .paper .line-items .all-totals .due{font-size:2.4em;font-family:"AktivGroteskW01-Medium";margin-bottom:22.1px}
.the-invoice .paper .line-items .all-totals .all-done{color:#95d17b}
@media (min-width: 620px){.the-invoice .paper .line-items .all-totals{width:50%}}
@media (min-width: 910px){.the-invoice .paper .line-items .all-totals{width:33.33333%}}
.end-of-invoice{padding:0 20px;margin:40px 0 0 0;float:right;width:100%}
@media (min-width: 620px){.end-of-invoice{width:50%}}
@media (min-width: 910px){.end-of-invoice{width:33.33333%}}
@media (min-width: 1200px){.end-of-invoice{width:25%}}
.comment-block{width:100%;float:left;padding:0 20px}
@media (min-width: 910px){.comment-block{width:66.66667%}}
@media (min-width: 1200px){.comment-block{width:50%}}
.comment-block .comment-row{width:100%;float:left;margin-bottom:3.4em}
.comment-block .comment-row .comment-meta{width:50%;float:left;padding:0 20px}
.comment-block .comment-row .comment-text{width:100%;float:left;padding:0 20px}
.comment-block .comment-date{font-family:"AktivGroteskW01-Italic"}
.comment-block #comment{background:none;border:none;width:100%;outline:none}
.comment-block .comment-buttons a{font-family:"AktivGroteskW01-Italic";font-size:0.9em}
.show-papa{display:none}
@media (min-width: 1200px){.show-papa{display:block}}

@media screen and (max-width: 320px){
h2 { margin: 2em 1em 1em;}
.projects .project{padding: 0;}
}
.disp { font-size:2em; color:#ccc; font-weight:bold; clear:both; margin-bottom:0.5em;}
section.wrap { width:100%;}
section.main-3pro{ margin: 0 auto 1em; display: table-cell; vertical-align: middle;}