/* --------------------------------------------------
Blog
-------------------------------------------------- */
body #wrapper #content h3 { margin: 0 0 28px; }
body #wrapper #content .blog-list { min-width: 285px; width: 76%; margin: 0 auto 45px; }
body #wrapper #content .blog-list .blog-single { border: solid 2px #040000; padding: 7px; display: flex; justify-content: space-between; margin: 0 0 12px; position: relative; }
body #wrapper #content .blog-list .blog-single .imagearea { width: 60.1%; display: flex; justify-content: space-between; }
body #wrapper #content .blog-list .blog-single .imagearea .user-image, body #wrapper #content .blog-list .blog-single .imagearea .post-image { width: 47.7%; }
body #wrapper #content .blog-list .blog-single .imagearea .user-image .inner, body #wrapper #content .blog-list .blog-single .imagearea .post-image .inner { position: relative; padding: 100% 0 0; }
body #wrapper #content .blog-list .blog-single .textarea { width: 29.5%; }
body #wrapper #content .blog-list .blog-single .textarea h4, body #wrapper #content .blog-list .blog-single .textarea time, body #wrapper #content .blog-list .blog-single .textarea .staff-name { font-size: 2.2rem; letter-spacing: .05em; line-height: 1.2; }
body #wrapper #content .blog-list .blog-single .textarea time { display: block; padding: 0 0 5px; border-bottom: solid 1px #040000; margin: 0 0 10px; }
body #wrapper #content .blog-list .blog-single a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; }
body #wrapper #content .pagination ul { display: flex; justify-content: center; flex-wrap: wrap; }
body #wrapper #content .pagination ul li { font-size: 2.4rem; margin: 0 .5em; }
body #wrapper #content .pagination ul li.current { text-decoration: underline; }

@media screen and (min-width: 768px) { body #wrapper #content h3 { margin: 0 0 63px; }
  body #wrapper #content .blog-list { max-width: 95%; width: 1014px; margin: 0 auto 110px; display: flex; justify-content: space-between; flex-wrap: wrap; }
  body #wrapper #content .blog-list .blog-single { border-width: 3px; padding: 14px; margin: 0 0 20px; width: 48.7%; box-sizing: border-box; }
  body #wrapper #content .blog-list .blog-single .imagearea { width: calc(100% - 162px); }
  body #wrapper #content .blog-list .blog-single .textarea { width: 145px; }
  body #wrapper #content .blog-list .blog-single .textarea h4, body #wrapper #content .blog-list .blog-single .textarea .staff-name { font-size: 1.9rem; }
  body #wrapper #content .blog-list .blog-single .textarea time { font-size: 1.5rem; margin: 5px 0 20px; padding: 0 0 10px; }
  body #wrapper #content .blog-list .blog-single::after { display: block; content: ""; background: #fff; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity .7s ease 0s; }
  body #wrapper #content .blog-list .blog-single:hover::after { opacity: 0 !important; pointer-events: none; }
  body #wrapper #content .blog-list.hover .blog-single::after { opacity: .7; pointer-events: auto; }
  body #wrapper #content .pagination ul li { font-size: 2.3rem; }
  body #wrapper #content .pagination ul li a { transition: opacity .4s ease 0s; }
  body #wrapper #content .pagination ul li a:hover { opacity: .6; } }