/* =============================
   section.css
   ============================= */

/* section basic top */
.section-feature {
   display: flex;
   gap: 2.8rem;
   align-items: flex-start;
   position: relative;
   padding-bottom: 6.8rem;
}

.article-list--feature { 
   flex: 1 0 464px;
}

.article-list--feature .article-list__link {
   display: block;   
}

.article-list--feature .article-list__thumb::before { 
   content: "";
   position: absolute;
   inset: 0;
   top: 40%;
   background: var(--gradient-dimm-bottom);
   pointer-events: none;
   z-index: 1;
}   

.article-list--feature .article-list__title { 
   position: absolute;
   right: 2.4rem;      
   bottom: 2rem;
   left: 2.4rem;
   font-size: 2.4rem;
   font-weight: 600;
   line-height: 1.3;
   color: var(--text-inverted);
   -webkit-line-clamp: 2;
   z-index: 9;
}

.section-feature .article-list--small {
   padding-top: 8px;   
}

.section-feature .article-list--small .article-list__title {
   font-size: 1.8rem;
}
.news-list:has(.ad-728-90) { padding-top: 2.8rem; border-top: 2px solid var(--stroke-primary); }
.news-list:has(.ad-728-90) .section-title { padding-top: 3.6rem; border-top: none; }

@media (max-width: 1280px) { 
   .article-list--feature {
      flex-basis: 340px;
   }
   .article-list--feature .article-list__title { 
      font-size: 2.2rem;
   }   
   .section-feature .article-list--small .article-list__thumb { 
      display: none;
   }
}

@media (max-width: 1024px) { 
   .article-list--feature {
      flex-basis: 390px;
   }
   .section-feature .article-list--small .article-list__thumb { 
      display: block;
   }
}

@media (max-width: 768px) {    
   .section-feature { 
      display: block;
      padding-bottom: 3.6rem;
   }         
   .article-list--feature .article-list__title {       
      right: 2rem;      
      bottom: 2rem;
      left: 2rem;                
   }
   .section-feature .article-list--small { 
      padding-top: 0;
   }
   .section-feature .article-list--small .article-list__item:first-child {
      margin-top: 1.4rem;
      padding-top: 1.4rem; 
      border-top: 1px solid var(--stroke-separator);
   }
   .section-feature .article-list--small .article-list__title { 
      font-size: 1.7rem;
   }      
   
}