/* =============================
   special.css   
   ============================= */
 .section-featured { 
   position: relative;
 }
.page__layout--special .page__main > section + section { 
    margin-top: 7rem;
}

.section-finder .section-featured__link { 
   position: relative;
   display: block;
}
.section-finder .section-featured__title {
   position: absolute;
   left: 8%;
   right: 15%;
   bottom: 5rem;
   font-size: 2.2rem;
   font-weight: 500;
   color: var(--text-inverted);
   word-break: keep-all;
}

.section-fider--list .article-list { 
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

.section-featured__thumb {    
   aspect-ratio: 9 / 10;
   max-width: 380px;
}

.section-featured__thumb::before {    
   top: 50%;   
}

.section-finder .swiper:has(.swiper-pagination) { 
   padding-bottom: 3.6rem;
}

.section-series .series-list {
   display: grid;   
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px 36px;
}

.section-series .series-list .series-list__item { 
   min-width: 0;
}

.section-fider--list .article-list--horizontal { 
   gap: 3.6rem;
}

.section-fider--list .article-list--horizontal .article-list__thumb { 
   aspect-ratio: 9 / 10;
}

.section-series--list .series-list__title { 
   font-size: 1.8rem;
}

.section-series--list .series-list { 
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px 24px;
}

.section-title:has(.section-title__body) {    
   margin-bottom: 20px;
   padding-bottom: 0;   
}

.section-title__body { 
   display: flex;
   align-items: baseline;
   gap: 10px;
}

.section-title__body-sub { 
   font-size: 1.4rem;
   font-weight: 500;
   color: var(--text-secondary);
}

.issue-keyword__list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 8px; 
   text-align: center;
   font-size: 1.6rem;
   font-weight: 500;
   letter-spacing: -0.02em;
   border-radius: 50px;
}

.issue-keyword__link {       
   height: 46px;
   padding: 0 24px;   
   line-height: 46px;
   border-radius: 50px;
}

.issue-keyword__link:hover { 
   background-color: var(--background-black);
   opacity: 1;
   color: var(--text-inverted)       
}

.page__layout--special .article-view { 
   max-width: 520px;
}

/* finder view */
.finder-view { 
   margin-top: -38px;
}

.finder-header { 
   position: relative;
   background-color: var(--background-fider);
}

.finder-header__inner { 
   max-width: 768px;
   height: 228px;
   margin: 0 auto;
   padding: 0 20px;
}

.finder-header__thumb { 
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 456px;
   border-radius: 0;   
   z-index: 1;
}

.finder-header__thumb::before { 
   content: '';
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;   
   background: linear-gradient(to right,rgba(42, 46, 51, 0) 0%,#2A2E33 100%);   
}

.finder-header__thumb img { 
   object-position: center;
}

.finder-header__content { 
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;   
   height: 100%;
   z-index: 2;
}

.finder-header__title { 
   display: block;
   display: -webkit-box;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   word-break: break-all;
   font-size: 3.2rem;
   color: var(--text-inverted);   
}

.finder-header__desc { 
   color: var(--text-inverted);
}

.finder-header__date { 
   margin-top: 2.6rem;
   color: var(--text-inverted);
   opacity: .6;
}

.finder-body { 
   max-width: 768px;
   margin: 28px auto 0;
   padding: 0 20px;
}

.finder-body__view + .finder-body__view { 
   margin-top: 8px;
}

.finder-body__view-toggle { 
   width: 124px;
   padding: 0;
}

.finder-body__view-toggle.is-active { 
   font-weight: 600;
   background-color: var(--background-dark);
}

.finder-body__view-toggle.is-active .ico-arrow-sm-b::after { 
   transform: rotate(180deg);
}

.finder-body__control { 
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   margin-bottom: 1.4rem;
}

.finder-body__content + .finder-body__content { 
   margin-top: 70px;
}

.finder-body__tools { 
   font-size: 0;   
}

.finder-body__view-article { 
   display: none;
   overflow: hidden;
   max-width: 580px;
   margin: 2.8rem auto 4rem;
}

.finder-body__view-article.is-active { 
   display: block;
}

.finder-body__view-accordion.active + .finder-body__view-article { display: block; }
.finder-body__view-accordion {
   position: relative; 
   width: 100%;
   height: 52px;
   padding: 0;
   background-color: var(--background-darklight);
   border-radius: 5px;
}

.finder-body__view-accordion::after { 
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   border: 1px solid #000;
   border-radius: inherit;
   opacity: .05;
   z-index: 10;
}

.finder-body__view-accordion[aria-expanded="true"] {    
   background-color: var(--background-impactlight);
   color: var(--text-impact);
}

.finder-body__view-accordion .ico-arrow-sm-b { 
   display: block;      
}

.finder-body__view-accordion .ico-arrow-sm-b::after { 
   top: 6px;
   right: 20px;
}

.finder-body__view-accordion[aria-expanded="true"] .ico-arrow-sm-b::after {
   transform: rotate(180deg);
}

.finder-body__view-article figure { margin-top: 0; }
.finder-body__related-articles { 
   margin-top: 4rem;
}

.finder-body__related-articles .article-list--small { 
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 2rem;
}

.finder-body__related-articles .article-list--small .article-list__item:nth-child(n+3) { 
   margin-top: 1.4rem;
   padding-top: 1.4rem;
   border-top: 1px solid var(--stroke-separator);
}

.finder-body__related-articles .article-list__body { 
   order: 1;
   flex-grow: 1;
}

.finder-footer { 
   margin-top: 7rem;
   background-color: var(--background-darklight);
}

.finder-footer__inner { 
   max-width: 1200px;
   margin: 0 auto;
   padding: 7rem 0;
}

@media (max-width: 1280px) {  
   .finder-footer__inner { 
      max-width: 1024px;
      padding-left: 40px;
      padding-right: 40px;
   }
}

@media (max-width: 1024px) { 
   .section-series .series-list { 
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 24px;
   }
   .hotissue-list { 
      gap: 28px 24px;
   }
   .hotissue-list__title { 
      font-size: 2rem;
   }
   .section-fider--list .article-list { 
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px 24px;
   }
   .finder-footer__inner { 
      max-width: 768px;
      padding: 3.6rem 2rem;
   }   
}

@media (max-width: 768px) { 
   .page__layout--special .page__main > section + section { 
      margin-top: 3.6rem;
   }
   .page__layout--special .article-list__thumb--sauare { 
      width: 70px;
      height: 70px;
   }
   .section-featured__thumb { 
      max-width: unset;
   }
   .swiper-button-next,
   .swiper-button-prev {
      display: none !important;
   }
   .section-finder .section-featured__title { 
      left: 20px;
      right: 20px;
      bottom: 20px;
      line-height: 1.34;
   }
   .section-finder .swiper:has(.swiper-pagination) { 
      padding-bottom: 2.8rem;
   }
   .section-series .series-list { 
      grid-template-columns: minmax(0, 1fr);
      row-gap: 16px;
   }   
   .hotissue-list { 
      gap: 8px 24px;
      grid-template-columns: 1fr;
   }   
   .hotissue-list .article-list__thumb { 
      aspect-ratio: 16 / 9;
   }
   .issue-keyword__link { 
      height: 42px;
      padding: 0 16px;
   }
   .issue-keyword__list { 
      font-size: 1.5rem;
   }
   .finder-header__inner { 
      height: 300px;
   }
   .finder-header__content { 
      justify-content: flex-end;
      padding-bottom: 2.4rem;
   }
   .finder-header__thumb { 
      width: 100%;
   }
   .finder-header__thumb img { 
      object-position: top;
   }
   .finder-header__title { 
      font-size: 2.4rem;
   }
   .finder-header__date { 
      margin-top: 1rem;
   }
   .finder-header__thumb::before { 
      background: linear-gradient(to bottom, rgb(42 46 51 / 0) 0%, #2A2E33 100%);
   }
   .section-fider--list .article-list { 
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 10px;
   }
   .section-fider--list .article-list__title { 
      font-size: 1.6rem;
      line-height: 1.34;
   }   
   .finder-body__content + .finder-body__content { 
		margin-top: 3.6rem;
	}
   .finder-body__control { 
      justify-content: space-between;
   }
   .finder-body__view-accordion { 
      text-align: left;
      font-size: 1.6rem;
   }
   .finder-body__view-accordion .ico-arrow-sm-b { 
      padding: 0 34px 0 16px;
   }
   .finder-body__view-accordion .ico-arrow-sm-b::after { 
      right: 15px;
   }
   .finder-footer { 
      margin-top: 3.6rem;
   }
   .section-featured .series-list__title { 
      font-size: 2rem;
   }
   .section-title__body { 
      flex-direction: column;
      row-gap: 2px;
   }
   .section-title:has(.section-title__body) { 
      align-items: flex-start;
   }
   .section-tools { 
      margin-top: -6px;
   }
   .section-series--list .series-list__title { 
      font-size: 1.7rem;
   }
   
   
}