@charset "UTF-8";

/*----- まとめ ------*/
/**
#cdcdcd 灰色
#ff0000　赤
#000　黒
**/

.blog_article_list{display: flex;flex-wrap: wrap;}
.blog_article_list .box{-webkit-box-sizing: border-box;box-sizing: border-box;}
.blog_article_list .box a{display: flex;text-decoration: none;color: #333;width: 100%;}
.blog_article_list .box a span{display: block;width: 100%;}
.blog_article_list .box a span.inner{position: relative;}

.blog_article_list .box a span.img{width: 100%;
    background-size: contain;background-repeat: no-repeat;background-position: center;margin-bottom: 10px;
    background-image: url(../../../images/logo.png);background-size: 60%;border: 1px solid #e5e5e5;position: relative;
}
.blog_article_list .box a span.img span{text-indent:100%;white-space:nowrap;overflow:hidden;width: 100%;height: 0;padding-top: 100%;
background-size: cover;background-repeat: no-repeat;background-position: center;
}


.blog_article_list .box a span.category{/*background: #333;font-weight: normal;text-align: center;max-width: 100px;
position: absolute;right: 0;color: #fff;font-size: 13px;top: 0;*/display: none;
}

/*--------ブログ内容設定-------------*/
.blog_article .come_title{line-height: 1.5;}
.blog_article .lower_link{display: flex;}
.sns_btn{display: flex;justify-content: flex-end;height: 20px;border-bottom: 1px dotted #cdcdcd;padding-bottom: 14px;}

.blog_article .box{margin-bottom:20px;}
.blog_article .title{font-size:16px;border-bottom: 1px solid #cdcdcd;}
.blog_article .lower_link{margin-bottom:10px;}
.blog_article .lower_link .category{margin-left: 10px;}
.blog_article .lower_link .category a{background: #333;font-weight: normal;text-align: center;max-width: 100px;color: #fff;font-size: 13px;
/*position: absolute;right: 0;top: 0;*/display: inline-block;text-decoration: none;width: 100px;line-height: 20px;
}

.blog_article .cont{line-height:1.7;}
.blog_article .cont img{max-width:100%;}

.blog_article .under_link{border-top: 1px dotted #cdcdcd;margin-top: 10px;padding-top: 10px;display: flex;
    justify-content: flex-end;font-size: 14px;display: none;
}
.blog_article .under_link li{margin-left:10px;}
.blog_article .under_link li a{color: #333;text-decoration: none;font-size: 14px;}



/*-----------コメント一覧レイアウト---------------*/
.blog_comment #comment{background:#e4f6ea;padding:5px;font-size:14px;}
.blog_comment .list {padding:0 10px 5px 10px;border-bottom:1px dotted #cdcdcd;}
.blog_comment .text {padding:5px 0 0 10px;}
.blog_comment .date {padding:5px 0 0 10px;text-align:right;}
.blog_comment .date span{color:#ff0000;}

/*-------コメント入力欄レイアウト----------*/
.blog_form dl{width:100%;text-align:left;}
.blog_form dd {padding: 2px 0;}
.blog_form textarea{max-width: 500px;width: 100%;}

.blog_comment,.blog_form{display: none;}

.come_btn{display: block;}

@media screen and (min-width:768px) {
    .blog_article_list{margin: 0 -10px;padding-top: 40px;}
    .blog_article_list .box{width: 25%;padding: 20px 10px;}

    .blog_article_list .box a:hover span.img::before{opacity: 0.2;}
    .blog_article_list .box a span.come_title{font-size: 18px;}

    .contents_blog .pager{margin: 40px 0;}

    .blog_article{padding-top: 60px;}
    .blog_article,.blog_comment,.blog_form{max-width: 1080px;margin: 0 auto;}
    .sns_btn{margin: 0 0 20px;}
    .blog_article .com_btn a{line-height: 50px;max-width: 300px;margin: 0 auto;}
}

@media screen and (max-width:1200px){
    .contents_blog .wrapper{padding-right: 40px;padding-left: 40px;}
}

@media screen and (max-width:767px) {
    .contents_blog .wrapper{padding-right: 20px;padding-left: 20px;padding-bottom: 50px;}
    .blog_article{padding-top: 30px;}
    .blog_article_list{margin: 0 -10px;padding-top: 30px;}
    .blog_article_list .box{width: 50%;padding: 10px;}
    .blog_article_list .box a time{font-size: 14px;}
    .blog_article_list .box a span.come_title{font-size: 16px;line-height: 1.3;}

    .blog_article .lower_link{font-size: 14px;line-height: 1;}
    .blog_article .come_title{font-size: 22px;}
    .sns_btn{margin: 10px 0 20px;}

    .contents_blog .pager{margin: 10px 0 0;}
    .blog_article .com_btn a{line-height: 34px;font-size: 14px;}
}

@media screen and (min-width:500px) and (max-width:980px) {
    .blog_article_list{margin: 0 -10px;}
    .blog_article_list .box{width: 33.33333%;width: -webkit-(100% / 3);width: -moz-(100% / 3);width: (100% / 3);padding: 20px 10px;}
    .blog_article .come_title{word-break: keep-all;}
}