.main-area.top{margin-top: 0px;  background-image: linear-gradient(to top, #eff5f9 0%, #F9F9F9 100%); }
.blog-wp  { display: flex; gap: 2.5vw; margin-top: 52px;}
@media (max-width:840px) {
.blog-wp  {flex-direction: column}  
}
.blog-wp .blo-content { flex: 10;}
.blog-list { width: 100%;  display: flex; flex-wrap: wrap; gap: 3%; margin: auto; padding: 0px}
.blog-list li { display: flex; flex-wrap: wrap; align-items: center;  flex-direction: column; flex: 0 1 48%; border-bottom: 1px solid #ddd;position: relative; margin: 1.5rem 0;  box-shadow: none;}
.blog-list li .col.images { padding: 0; background-color: #000;}
.blog-list li .col.images img {  opacity: 0.6;}
.blog-list li .col.images  figure{ width: 100%; padding-bottom: 48%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;   }
.blog-list li .col.images  figure img { max-width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s;   }
.blog-list li .col.date { position: absolute; top: 40px; left: 38px; padding: 0; color: #fff; line-height: 1.2; font-weight: 900; z-index: 1;  }
.blog-list li .col.date::before { content: ""; position: absolute; left: -38px; width: 24px; height: 20px;  background-color: #fff;}
.blog-list li .col.copy { position: absolute; bottom: 0; padding: 3vw; z-index: 9;}
.blog-list li .col.copy a { color: #fff;}
.blog-list li .col.copy a:hover { text-decoration: none; color:#c3112d;}
.blog-list li .col.copy h3 { display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  margin-bottom: 12px; padding-bottom: 12px;  max-height:58px; overflow: hidden;  border-bottom: 1px solid #fff; font-size:1.375rem; font-weight: bold;  line-height: 1.2;}
.blog-list li .col.copy .text { font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  max-height: 0; overflow: hidden; line-height: 1.5; transition: 0.5s; opacity: 0;}
.blog-list li:hover .col.copy .text { opacity: 1; max-height: 48px; transition: 1s;}
@media (max-width:1024px) {
.blog-wp .blo-content { flex: 9;}
}
@media (max-width:767.98px) {
.blog-list li { flex: 0 1 100%;   margin: 0.5rem 0; }
.blog-list li .col.date { top: 20px;  font-size: 1rem;  font-weight:700;  }
.blog-list li .col.date::before {  width: 12px; height: 10px;  background-color: #fff;}   
.blog-list li .col.copy { padding:2vw;}
.blog-list li .col.copy h3 {  font-size:1.125rem; max-height:48px;  }
.blog-list li .col.copy .text { font-size: 0.75rem;}
}
@media (max-width:320px) {  
.blog-list li {  flex: 0 1 100%; }
}

.blog-wp .category{flex: 2; margin-bottom: 44px; border-left:none;}
.blog-wp .category-title { padding:0px 0px  22px 0px;}
.blog-wp .category-title h3{ color:#000; font-weight:700; font-size: 30px;}
.blog-wp .category-menu { padding: 10px 0px;}
.blog-wp .category-menu .category-list { width: 100%; margin: 0px; padding: 0px; }
.blog-wp .category-menu .category-list li { width: 100%; line-height: 1.5rem; list-style: none;position: relative;  margin: 0px 0px 20px 0px; background-color: transparent;  border:none }
.blog-wp .category-menu .category-list li a{color: #555;  font-weight: 400; font-size: min(max(3.5vw, 0.9rem), 1rem); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height:78px; overflow: hidden;  }
.blog-wp .category-menu .category-list li::after {  content: ""; width: 100%; height: 1px; display: block; background-color: #d0d0d0;margin-right: 0px; margin-top: 10px;}
.blog-wp .category-menu .category-list li:hover a{ color:#c3112d; }
.blog-wp .category-menu .category-list  p{  font-weight: 500; font-size: 0.875rem; font-size: min(max(3.5vw, .9rem), 0.875rem); color: #1d1d1f;}
@media (max-width:1024px) {
.blog-wp .category{flex: 3;  }   
}