@charset "utf-8";
    /*
    Theme Name: grateful
    Description:ミニマルデザイン
    Theme URI: 
    Author: dot
    Author URI: grateful-dot.com
    Version: 1.0
    License: 
    License URI: 
    */



/*! 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');}
/*下記　削除（2015.03）*/
/*.fixed_tr {position:fixed;top:0;right:0;}*/

/*ナビを左側に配置　（2015.03）*/
.fixed_tr {position:fixed;top:0;left: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');}
/*下記　削除　（2015.03）*/
/*.fixed_br {position:fixed;bottom:0;right:0;}*/

/*ナビを左側に配置　（2015.03）*/
.fixed_br {position:fixed;bottom:0;left:0;}
.ie6 .fixed_br {position:absolute;bottom:expression(this.style.filter = '', '0');right:expression(this.style.filter = '', '0');}

/*RESET*/
html,body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p{
    margin:0;
    padding :0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
body{
    line-height: 1.0;
}
img{
    height: auto;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    border: 0;
}
ol,ul{
    outline-style: none;
    list-style: none;
}

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

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

/* for IE */
.ie6 body {
    font-size: 75%;
}
.ie6 table {
    font-size: 100%;
    line-height: 1.5;
}
.ie6 input,.ie6 textarea,.ie6 select {
    font-family: "ＭＳ Ｐゴシック","MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0;
}
.ie7 body {
    font-size: 70%;
}

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

p {
    line-height: 1.8em;
}


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

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.imgfit {
    width: 100%;
    height: auto;  /*変更*/
    text-align:center;
    overflow:hidden;
    position: relative;
}

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

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

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

a:hover {
    color: #000;
    text-decoration: underline;
}

a:active {
    text-decoration: none;
}

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

.nojs {
    visibility: visible;
}

.wrap {
    clear:both;
    /*下記　削除　（2015.03）*/
    /*border-bottom: 1px solid #cccccc;*/
}

.body {
    padding: 50px 40px;
}

/*.smartphone_only {
    display: none;
}

#top {
    overflow-x: hidden;
    position: relative; 
}*/

/* ----------------------------------------------------*/
/* Header */
#header {
    /*幅指定　（2015.03）*/
    width: 219px;
    /*min-height: 100%;*/
    height:66px;
    background: #fff;
}

#header_body {
}


#header_body h1 {
    padding-top: 120px;
    padding-bottom: 50px;
    text-align: center;
}

#menubtn {
    position: relative;
    float: right;
    display: none;
    padding:2px;
    width: 42px;
    height: 42px;
    cursor: pointer;
}


#btn_open {
    position: absolute;
}

#btn_close {
    position: absolute;
    display: none;
}

#gnavi {
}

#gnavi li {
}

#gnavi li a {
    display: block;
    padding: 13px 20px 14px;
    text-align: center;
}

#gnavi li a:hover {
    background: #333333;
    color: #ffffff;
    text-decoration: none;
}

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

#content {
    /*clear: both;*/
    /*margin-right: 219px; 
    border-right: 1px solid #cccccc;*/

    /*ナビを左側に配置　（2015.03）*/
    margin-left: 219px;
    border-left: 1px solid #cccccc;
}

/* ----------------------------------------------------*/
/* Main */

#mainvisual {
}

#slidearea {
    position: relative;
    width: 100%;
}

.naviarea {
     width: 200px;      /**/

    /*スライドボタンの横余白調整（2015.03）*/
    width: 150px;
    margin: 0 auto;
}

.navibtn {
    float: left;
    /* padding: 30px 15px; */
    
    /*スライドボタンの横余白調整（2015.03）*/
    padding: 30px 10px;
}

.imagearea {
    position:relative;
    width:100%;
    height:100%;
    background-color: #e5e5e5;
    overflow: hidden;
}

.imagearea ul {
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
}

.imagearea li {
    width: 100%;
    height:100%;
    line-height: 0;
    font-size: 0;
    zoom: 1;
    float: left;
}

.morearea {
    position:relative;
    width:100%;
    height:105px;
    overflow: hidden;
}

.morearea ul {
    width: 100%;
    height:100%;
     position: absolute;
    top: 0;
    left: 0; 
}

.morearea li {
    width: 100%;
    height:105px;
    text-align: center;
}

.slidetitle {
    padding-top: 8px;
    /*font-size: 32px;*/
    /*修正　（2015.03）*/
    font-size: 28px;
    font-family:Georgia, "Times New Roman", Times, serif;
    letter-spacing:0.04em;
}

.slidetag {
    font-size: 12px;
    color: #818181;
}

/* ----------------------------------------------------*/
/* normal sections */

section{
    border-top:1px solid silver;
}

/*ビジュアルの上部グレー線を消す*/
body > section{
    border-top:0;
}

section #mainvisual{
    border-top:0;
}
/*ここまで追加_2015/09*/

.sectiontitle {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:normal;
    padding-bottom: 16px;
    margin-bottom: 50px;
    /*background: url("../img/ttl_bg.png") no-repeat bottom center;*/
    text-align: center;
    font-size: 22px;
    letter-spacing:0.08em;
}

.body li {
    display: block;  /*リストスタイルの解除＝list-style:none;*/
    float: left;  /*works、backyardのバッチをエリアの中に収める。*/
}

.itemthumb {
    margin-bottom: 10px;
}

h2.itemtitle {
    font-size: 14px;
    padding-bottom: 3px;
}

.itemmeta {
    font-size: 10px;
    color: #808080;
    font-style: italic;
    letter-spacing: 0.1em;
    line-height: 1.6em;
}

.itembody {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.6em;
    min-height:6em; /*追加*/
}

.itemname {
    letter-spacing: 0.1em;
    line-height: 1.2em;
    text-align:center;  /*追加_2015/09*/
}

/*追加_2015/09*/
.itemname a{
    display:block;
}

.btntext {  /*今回は非表示*/
    display: block;
    width: 160px;
    height: 36px;
    margin: 0 auto;
    background: url("<?php echo get_template_directory_uri(); ?>/img/btn_more_bg.png") no-repeat;
    font-size: 12px;
    line-height: 1em;
    letter-spacing: 0.15em;
    text-align: center;
    padding-top: 11px;
    font-weight: bold;
}

.btn_arrow {  /*今回は非表示*/
    background: url("<?php echo get_template_directory_uri(); ?>/img/btn_more_arrow.png") no-repeat center right;
    padding: 0 15px;
}

/* ----------------------------------------------------*/
/* news = FEATURES */

 #news ul {
    margin-right: -20px;  /*３つ並んでいる記事最後のパディング分伸ばしておく。*/
    padding-bottom: 60px;
}

#news li {
    width: 33.33333%;  /*3ラム*/
    padding-bottom:20px;    /*追加_2015/09*/
}

#news li article {
    padding-right: 20px;
}

/* ----------------------------------------------------*/
/* casestudy = WORKS */

#casestudy {
    background: #f1f1f1;
}

#casestudy ul {
    margin-right: -30px;  /*4つ並んでいる記事最後のパディング分伸ばしておく。*/
    padding-bottom: 60px;
}

#casestudy li {
    width: 25%;  /*4コラム*/
}



#casestudy li:first-child a{
    position:relative;
    /*z-index:1;*/
}

#casestudy li:first-child a img.over{
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}

/*マウスオーバー時薄く_2015/09*/
#casestudy li:first-child a:hover img.over{
    opacity:0;
    -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
}

/*マウスオーバー(CSSスプライト)_2015/09*/
/*#casestudy li a{
    width:160px;
    height:160px;
    overflow:hidden;
    display:block;
}

#casestudy li a img{
    margin-top:0;
}

#casestudy li a:hover img{
    margin-top:-160px;
}*/

#casestudy li article {
    padding-right: 30px;
}

#casestudy .itemthumb {
    /*border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;*/
    margin-bottom: 18px;
}

#casestudy .itemname {
    text-align: center;
}


/* ----------------------------------------------------*/
/* works = BACKYAD */

#works ul {
    margin-right: -20px;  /*4つ並んでいる記事最後のパディング分伸ばしておく。*/
}

/*変更_2015/09*/
#works li {
    width: 25%;  /*4コラム*/
}

#works li article {
    padding-right: 20px;
    padding-bottom: 40px;
}


#worksmore {
    text-align: center;
}

/* 削除　（2015.03） */
/*#loading {
    display: none;
    padding:20px;
    text-align: center;
}*/

/*追加修正　（2015.03）*/
#infscr-loading {
    padding:20px;
    text-align: center;
}

/* ----------------------------------------------------*/
/* footer */

#totop {
    text-align: center;
    padding: 14px 0 18px;
}

#footer {
    clear: both;
    background: #333333;
}

#footer li {
    /* float: left; */
    /*フッタ、コピーライトを右側へ配置　（2014.03）*/
    float: right;
    display: block;
}

/*#footer_right {
    float: right;
}

#footer_right a {
    display: block;
    padding: 16px 15px 11px;
    border-left: 1px solid #656565;
    text-align: center;
    background: #333333;
}

#footer_right a:hover {
    background: #656565;
}*/

#footer_left {
    float: left;}

#footer_left a {
    display: block;

    /*修正　#footer_rightと高さ合わせる　（2015.03）*/
    padding: 15px 15px 11px;

    /*修正　仕切線を右側に設定し直す　（2015.03）*/
    border-right: 1px solid #656565;
    text-align: center;
    background: #333333;
}

#footer_left a:hover {
    background: #656565;
}

/*#footer_left li{
    padding: 10px 0 10px 30px;
}*/

#footer_right li{
    padding: 10px 30px 10px 0px;
}

#copyright {
    font-size: 10px;
    line-height: 1em;
    color: #999999;
    padding-top: 10px;
}