/* ================================================================
   RELATED ARTICLES — speaking/draft/related-articles.css
   縦並び横長カードレイアウト（6件表示）
   ================================================================ */

/* ---- スクロールインジケーター非表示 ---- */
.scroll-arrow-indicator { display: none !important; }

/* ---- 見出し ---- */
.a-ext--related h2.text-center,
main.main-content-new > h2.text-center {
  font-size: 1.2rem;
  font-weight: 800;
  color: #043F6D;
  margin: 0 0 1.2rem;
  letter-spacing: -.01em;
  padding: 0 1.5rem;
}

/* ---- ラッパー ---- */
.a-ext--related .article-list-wrapper {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- リストを縦積みに変更 ---- */
.a-ext--related .article-list-wrapper .article-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  overflow: visible;
  padding-bottom: 0;
  scrollbar-width: none;
}
.a-ext--related .article-list-wrapper .article-list::-webkit-scrollbar { display: none; }

/* ---- 6件のみ表示 ---- */
.a-ext--related .article-card-new:nth-child(n+7) { display: none; }

/* ================================================================
   横長カードスタイル
   ================================================================ */
/* カード全体がリンク（<a>タグ） */
.a-ext--related .article-card-new {
  display: flex;
  flex-direction: row;
  min-width: unset;
  max-width: unset;
  width: 100%;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(4,63,109,.07);
  transition: transform .2s ease, box-shadow .2s ease;
  opacity: 0;
  transform: translateY(10px);
  text-decoration: none;
  color: inherit;
}
.a-ext--related .article-card-new.animate-in {
  animation: fadeInUp .45s ease forwards;
}
.a-ext--related .article-card-new:hover {
  transform: scale(1.01);
  box-shadow: 0 5px 18px rgba(4,63,109,.13);
  text-decoration: none;
  color: inherit;
}
.a-ext--related .article-card-new:hover .article-card-image {
  transform: scale(1.06);
}

/* 画像エリア */
.a-ext--related .article-card-image-wrapper {
  width: 160px;
  height: 110px;
  flex-shrink: 0;
}
.a-ext--related .article-card-overlay { display: none; }

/* カード本文エリア */
.a-ext--related .article-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .7rem 1.2rem;
  flex: 1;
  min-width: 0;
}

/* メタ行（カテゴリ＋日付） */
.a-ext--related .article-card-meta {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  flex-wrap: nowrap;
}
.a-ext--related .article-category-badge {
  font-size: .62rem;
  padding: .18rem .55rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.a-ext--related .article-date-text {
  font-size: .6rem;
  color: rgba(93,96,98,.5);
  white-space: nowrap;
}

/* タイトル（2行でクリップ） */
.a-ext--related .article-card-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #043F6D !important;
  margin: 0 0 .2rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 抜粋（1行でクリップ） */
.a-ext--related .article-card-excerpt {
  font-size: .68rem !important;
  color: #5D6062 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 「記事を読む →」は span（カード全体がリンクのため） */
.a-ext--related .article-card-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .3rem 0 0;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  color: #46A2DA !important;
  font-size: .7rem;
  font-weight: 600;
  box-shadow: none !important;
  transition: color .15s ease;
}
.a-ext--related .article-card-new:hover .article-card-link {
  background: none !important;
  color: #043F6D !important;
  box-shadow: none !important;
}
.a-ext--related .article-card-link i {
  font-size: .65rem;
  transition: transform .2s ease;
}
.a-ext--related .article-card-new:hover .article-card-link i { transform: translateX(3px); }

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 640px) {
  .a-ext--related .article-list-wrapper { padding: 0 1rem; }
  .a-ext--related .article-card-new { height: auto; min-height: 90px; }
  .a-ext--related .article-card-image-wrapper { width: 120px; height: auto; }
  .a-ext--related .article-card-body { padding: .6rem .9rem; }
  .a-ext--related .article-card-title { font-size: .84rem !important; }
  .a-ext--related .article-card-excerpt { display: none !important; }
}