/*--------------------------------------
@ [template] blog/css/page_common.css.min.php Ver4.01 20170301
--------------------------------------*/
/*== totoppage ==*/
.toppage{float:none;text-align:right;margin-top:20px}
/*== pager ==*/
.pager_all_basic{text-align:right;margin-bottom:10px;clear:both}.pager_basic{text-align:center;padding:5px 15px;word-wrap:break-word;overflow-wrap:break-word;}.pager_basic a{background:#F7F7F7;text-decoration:none}.pager_basic .current{background:rgba(12,88,65,.6)}.pager_basic .current,.pager_basic a{color:#4A4A4A;border:1px solid #969696;padding:5px 10px;margin:5px;text-align:center;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;behavior:url(/pie/PIE.htc);position:relative;display:inline-block}.pager_basic .next,.pager_basic .prev{width:40px}.pager_basic .prev{text-align:left}.pager_basic .next{text-align:right}
/*== アイコン ==*/
.head_icon{color:#6c6c6c;font-size:1em;margin:0;padding:2px 4px 2px 0;vertical-align:baseline}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0);}.fa-calendar:before {content:"\f073";}
.glyphicon-pencil{margin-top:-4px}
/*== backbtn ==*/
.backtolist_btn{display:table;margin-bottom:5px}.backtolist_btn i{color:rgba(12,88,65,.8);border:1px solid rgba(12,88,65,.8);border-radius:8px 0 0 8px;line-height:1em;cursor:pointer;display:table-cell;vertical-align:middle;position:relative;padding:0 15px;text-decoration:none;font-size:15px}
.backtolist_btn i::before,.backtolist_btn i::after{content:"";position:absolute;left:2px;transform:translateY(-50%);border:8px solid transparent;border-right:8px solid rgba(12,88,65,.8); webkit-transition:0.5s ease-in-out;-moz-transition:0.5s ease-in-out;-o-transition:0.5s ease-in-out;transition:0.5s ease-in-out;}.backtolist_btn a{display:table-cell;background:rgba(12,88,65,.7);-webkit-border-radius:0 8px 8px 0;-moz-border-radius:0 8px 8px 0;border-radius:0 8px 8px 0;
text-decoration:none;color:#fff;box-shadow:none;border:none;cursor:pointer;font-size:16px;letter-spacing:2px;margin-left:auto;padding:10px 30px;}.fade{webkit-transition:0.5s ease-in-out;-moz-transition:0.5s ease-in-out;-o-transition:0.5s ease-in-out;transition:0.5s ease-in-out;}.backtolist_btn:hover i::before, .backtolist_btn:hover i::after{left:10px;border-right:8px solid rgba(255, 255, 255, 0.85)}
.backtolist_btn:hover i{border:0;padding:0;/*color:rgba(12,88,65,.85);border:1px solid rgba(12,88,65,.85);*/
}.backtolist_btn:hover a{background:rgba(12,88,65,.85);opacity:1;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;padding-left:40px;
}
.not_responsiveImg,.not_responsiveImg img{box-shadow:unset !important;-webkit-box-shadow:unset !important}

@media screen and (max-width:768px){
/*== pager ==*/
.pager_basic{margin:2vw auto;padding:0;line-height:3vw;font-size:3.6vw}.pager_all_basic{font-size:3vw;margin:0 10px 10px 0;}.pager_basic a, .pager_basic .current{padding:2vw;margin:1vw;zoom:1}.pager_basic .prev, .pager_basic .next{width:20px;}
/*#blog .pager_all_basic{font-size:90%;float:right;margin:0 5px 10px 0;clear:both;text-align:right;}#blog .pager_all a{text-decoration:none;color:gray;}
/*== rss ==*/
#blog .rss{margin-right:10px !important;}#blog .rss:after{clear:both !important;}*/
/*== backbtn ==*/
.backtolist_btn{margin:15px 4% 0}
}@charset "utf-8";
/*--------------------------------------
@ [template] blog/css/blog_list_3.css.php Ver4.01 20170301
* MIXブログリストページ兼用
--------------------------------------*/
#blog_list{

}

#blog_list .kijibox {
    height: 280px; /* この値変更でblog_list_rのwidth値変更 */
    margin: 0 5px 15px;
    padding: 0;
    /*border: 1px solid rgba(12,88,65,.3);*/
    border: 1px solid #c0c0c0;/*#d4d4d4*/
    /*background: #eaeaea;*/
    background: #fff;
    position: relative;
    overflow: hidden;
    z-index: 0;
    clear: both;
    /*box-shadow: 0px 0px .8px 0px rgba(12,88,65,.5) inset;
    -moz-box-shadow: 0px 0px .8px 0px rgba(12,88,65,.5) inset;
    -webkit-box-shadow: 0px 0px .8px 0px rgba(12,88,65,.5) inset;*/
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
}

#blog_list .blog_list_pic {
    float: right;
    height: 100%;
    width: auto;
    margin: 0 0 -10px 0;
    vertical-align: bottom;
    position: relative;
    z-index: -99;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;

    /*-webkit-filter: contrast(80%);
    -moz-filter: contrast(80%);
    -o-filter: contrast(80%);
    -ms-filter: contrast(80%);
    filter: contrast(80%);*/
}

#blog_list .alt .blog_list_pic {
    float: left;
}

#blog_list .blog_list_r {
    width: calc( 100% - 295px ); /* li(#blog_list .kijibox)の高さにより設定 */
    position: relative;
    padding: 10px;
    background: #f9f9f9;
    position: absolute;
    left: 0;
    right: auto;
    height: 95%; /* 再考 */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#blog_list .alt .blog_list_r {
    right: 0;
    left: auto;
    margin-left: 300px; /* 再考 */
}

#blog_list .blog_list_r:before {
    content: "";
    background: #f9f9f9;
    border-right: 1px solid #dedede;
    width: 100%;
    z-index: -1;
    position: absolute;
    /* left: -15px; */
    top: 0;
    bottom: 0;
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
}

/* .alt 左右に振る場合 */
#blog_list .alt .blog_list_r:before {
    left: -15px;
    border-left: 1px solid #dedede;
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
}

#blog_list .blog_list_r .fa-calendar{
    color:#979797;
}

#blog_list .blog_list_r .kijiHeader {
    color: #033828;
    font-size: 1.05em;
    line-height: 1.4em;
    margin: 2px 5px 5px 0;
    border:none;
    white-space:pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

#blog_list .blog_list_r p {
    font-size: .88em;
    color: #3b3b3b;
    line-height: 1.3em;
    max-height: 50px;
    margin: 15px 5px 0 0;
    /*width: 95%;*/
    overflow: hidden;
    /*word-wrap: break-word;*/
    word-break: break-all;
}

#blog_list .notag .blog_list_r p {
    margin:25px 5px 0 0;
}

#blog_list .blog_list_r time {
    color:#565656;
    font-size: .82em;
}

.blog_list_r > ul{
    /*display:inline;
    padding-left: 20px;*/
    font-size: .85em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}

.blog_list_r ul li {
    display: inline-block;
    margin: 0 .3em 0 0;
    padding: 2px 0;
    vertical-align: middle;
}

.blog_list_r ul li a {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 1px .5em;
    color:#fff;
    /*background-color: rgba(12,88,65,.6);#fafafa*/
    background-color: rgb(179, 179, 179);
    /*border: 1px solid #aaa;*/
    border-radius: 5px;
    white-space: nowrap;
    font-size: .75em;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
    position:relative;
    z-index:2;
}

.blog_list_r ul li a:hover {
    background-color: #033828;
    text-decoration: none;
    color: #fff;
}

#blog_list .kijibox > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}

#blog_list .kijibox:hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all .3s ease;
    box-shadow: 0px 0px 10px rgba(12,88,65,.6);/* inset 中にshadow*/
    -moz-box-shadow: 0px 0px 10px rgba(12,88,65,.6);/* inset 中にshadow*/
    -webkit-box-shadow: 0px 0px 10px rgba(12,88,65,.6);/* inset 中にshadow*/
    /*box-shadow: none;*/
    /*-webkit-box-shadow: none;*/
}

/* '>'直下を透過 */
/*#blog_list .kijibox:hover > div > .kijiHeader, #blog_list .kijibox:hover > div > span, #blog_list .kijibox:hover > div > time, #blog_list .kijibox:hover > div > ul, #blog_list .kijibox:hover > div > p {
    opacity: .8;
}*/

/* '>'imgを透過0に */
#blog_list .kijibox:hover > img {
    -webkit-transform: rotate(5deg) scale(1.3);
    transform: rotate(5deg) scale(1.3);
    opacity: 1;

    -webkit-filter: contrast(110%);
    -moz-filter: contrast(110%);
    -o-filter: contrast(110%);
    -ms-filter: contrast(110%);
    filter: contrast(110%);
}

#blog_list .kijibox.alt:hover > img {
    transform: rotate(-5deg) scale(1.3);
}

/* サイトカラム幅により、Mediaクエリでサイトごとに設定 */
@media screen and (min-width: 1160px) {
    #blog_list .blog_list_pic {
        /*height: auto;
        width: 22%;*/
    }
}

.fa-tag {
    float: none;
}

#blog_list .blog_list_r p.readmore {
    float: right;
    color: rgba(12,88,65,.8);
    font-weight: bold;
    margin-top: 10px;
    padding: 0 0 10px 5px;
    display: inline-block;
    position: relative;
    width: auto;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#blog_list .blog_list_r p.readmore:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 2px;
    width: 100%;
    background-color: rgba(12,88,65,.8);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#blog_list .blog_list_r p.readmore:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 2px;
    width: 0;
    background-color: #033828;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#blog_list .blog_list_r p.readmore span {
    color: rgba(12,88,65,.8);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



/*-- hover action --*/
#blog_list .kijibox:hover p.readmore,
#blog_list .kijibox:hover p.readmore span {
    color: #033828;
}

#blog_list .kijibox:hover .blog_list_r p.readmore:after {
    width: 100%;
}