/* --------------------------------------------------
News
-------------------------------------------------- */
body #wrapper #content h3 { margin: 0 0 30px; }
body #wrapper #content .news-list { display: flex; flex-wrap: wrap; justify-content: space-between; min-width: 285px; width: 76%; margin: 0 auto 5px; }
body #wrapper #content .news-list .news-single { width: 48%; margin: 0 0 25px; }
body #wrapper #content .news-list .news-single .imagearea { background: #040000; padding: 121.5% 0 0; margin: 0 0 10px; position: relative; }
body #wrapper #content .news-list .news-single .imagearea img { position: absolute; top: 50%; left: 50%; max-width: 74.2%; max-height: 78.7%; width: auto; height: auto; transform: translate(-50%, -50%); }
body #wrapper #content .news-list .news-single h4, body #wrapper #content .news-list .news-single time { display: block; font-size: 2.4rem; letter-spacing: .05em; line-height: 1.2; text-align: center; }
body #wrapper #content .news-list .news-single h4 { margin: 0 0 3px; }

@media screen and (min-width: 768px) { body #wrapper #content h3 { margin: 0 0 40px; }
  body #wrapper #content .news-list { width: 1000px; max-width: 95%; margin: 0 auto 70px; justify-content: flex-start; }
  body #wrapper #content .news-list .news-single { width: 23.5%; margin: 0 2% 35px 0; }
  body #wrapper #content .news-list .news-single .imagearea { margin: 0 0 25px; }
  body #wrapper #content .news-list .news-single .imagearea img { max-width: 61.5%; max-height: 67.8%; }
  body #wrapper #content .news-list .news-single .imagearea::after { display: block; content: ""; background: #000; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity .7s ease 0s; }
  body #wrapper #content .news-list .news-single h4 { font-size: 1.8rem; letter-spacing: .1em; margin: 0 0 5px; }
  body #wrapper #content .news-list .news-single time { font-size: 1.5rem; letter-spacing: .1em; }
  body #wrapper #content .news-list .news-single:hover .imagearea::after { opacity: 0 !important; pointer-events: none; }
  body #wrapper #content .news-list .news-single:nth-child(4n) { margin: 0 0 35px; }
  body #wrapper #content .news-list.hover .news-single .imagearea::after { opacity: .7; pointer-events: auto; } }