/*---- ブログ記事一覧 ----*/ .main .blog-bg { background-color: #ffffff; background-image: none; border-bottom: 1px solid #B0B0B0; } .main .blog-bg h2.font { color: #333333; } .container .row .blog-posts .pages { margin-left: 14px; } .container .row .blog-posts .pages span { border: 2px solid #6E6E6E; padding: 5px 10px; margin-right: 5px; margin-bottom: 15px; display: inline-block; float: left; } .container .row .blog-posts .pages a { border: 2px solid #6E6E6E; padding: 5px 10px; margin-right: 5px; margin-bottom: 15px; display: inline-block; float: left; } .blog-masonry { overflow: hidden; } .blog-box { width: 32%; float: left; margin: 0 0 30px 1%; border: 1px solid #e0e0e0; padding: 2%; height: 390px; } .blog-box p.img { text-align: center; height: 200px; } .blog-box p.img img { max-width: 100%; width: auto; max-height: 200px; } .blog-box .text-box { text-align: center; } .blog-box .text-box p.hx { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; } .blog-box .text-box p.name { } .blog-box p.time { text-align: center; padding: 3% 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .blog-box p.time .fa { padding-right: 5px; } /*---- ブログ記事・ニュース記事単体 ----*/ .container .row .blog-list { margin: 0 auto; float: none; } #atstbx a .tweet_iframe_widget { width: 77px !important; } .container .row p.bloglist { text-align: right; margin: 0 auto 50px; } .container .row p.bloglist a { border: 2px solid #6E6E6E; padding: 9px; } .blog-list .post-content p img { max-width: 400px; width: 100%; height: auto; } /*=============================================== ■tablet 画面の横幅が992pxまで ===============================================*/ @media screen and (max-width: 992px) { .blog-box { width: 47%; margin: 0 0 15px 2%; height: 380px; } .blog-box p.img { height: 195px; } } /*=============================================== ■smart 画面の横幅が480pxまで ===============================================*/ @media screen and (max-width: 480px) { .blog-box { width: 96%; } }