/* コラム（記事一覧 /articles/）— ヘッダー/フッターはLP共通のものをそのまま使用 */
.article-index-page a:focus-visible { outline: 3px solid var(--primary-blue-dark); outline-offset: 4px; }
.guide-skip { position: fixed; top: -80px; left: 20px; z-index: 1100; padding: 12px 20px; background: white; }
.guide-skip:focus { top: 12px; }

/* コンテンツ幅（/usecase/ .bt-container と同値：max 1060px / 左右28px） */
.article-index-page main .container { max-width: 1060px; padding: 0 28px; }

/* ヒーロー（/usecase/ ファーストビュー準拠：白地・左寄せ・パンくず・英字ラベル） */
.ag-hero { padding: 118px 0 56px; background: #FFFFFF; } /* 上パディングはfixedヘッダー(約78px)分を含む */
.ag-breadcrumb { font-size: 0.75rem; letter-spacing: 0.04em; color: #8C7C74; margin-bottom: 48px; }
.ag-breadcrumb a { color: #8C7C74; text-decoration: none; }
.ag-breadcrumb a:hover { color: #352E2B; }
.ag-breadcrumb .sep { margin: 0 8px; color: #E9DFD8; }
.ag-eyebrow { display: block; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.28em; text-transform: uppercase; color: #A8865B; margin-bottom: 18px; }
.ag-hero-title { font-weight: 700; font-size: 2.5rem; line-height: 1.5; letter-spacing: 0.02em; margin: 0 0 20px; color: #352E2B; }
.ag-hero-title .em { color: #F5A623; }
.ag-lead { margin: 0; font-size: 0.9875rem; line-height: 2.1; color: #8C7C74; font-weight: 500; }

/* 記事一覧（白地に白カード＋ソフトシャドウ） */
.ag-list { padding: 0 0 80px; background: #FFFFFF; }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.md-item { min-width: 0; display: flex; }
.md-item-link {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border-radius: var(--border-radius-md, 12px); overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.md-item-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.md-item-thumb { aspect-ratio: 16 / 9; overflow: hidden; margin: 0; }
.md-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-item-link > div { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 18px 20px; }
.md-item-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.md-item-meta .cat {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--border-radius-pill, 50px);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 1;
  background: #F0EFEC; color: #6C6862;
}
.md-item h2 { margin: 10px 0 7px; font-size: 16px; line-height: 1.65; color: var(--text-dark); }
.md-item-link:hover h2 { color: var(--primary-orange); }
.md-item p { font-size: 13.5px; line-height: 1.85; color: var(--text-gray); font-weight: 500; }
/* カードタイトルは文節（<wbr>）でのみ改行し、1文字だけの行を作らない */
.md-item h2 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.md-item p { text-wrap: pretty; }
.md-item .nw, .ag-lead .nw { white-space: nowrap; } /* 説明文の最後の語句を固定（行末1〜2文字の泣き別れ防止） */

/* 無料作成CTA（/usecase/ .bt-closing と同値：ダーク帯・英字ラベル・クリームボタン） */
.ag-cta { padding: 112px 0; background: #352E2B; color: #F6F0EC; text-align: center; }
.ag-cta-title { font-weight: 700; font-size: 2rem; letter-spacing: 0.04em; line-height: 1.8; margin: 0 0 20px; color: #F6F0EC; }
.ag-cta p { font-size: 0.9375rem; line-height: 2.1; color: #C9BAB2; max-width: 36em; margin: 0 auto 44px; word-break: keep-all; overflow-wrap: anywhere; }
.ag-cta-btn {
  display: inline-block; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em;
  color: #352E2B; background: #F6F0EC; padding: 16px 40px; border-radius: 3px;
  text-decoration: none; transition: background 0.25s ease;
}
.ag-cta-btn:hover { background: #fff; }

@media (max-width: 1024px) {
  .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ag-hero { padding: 90px 0 44px; }
  .ag-breadcrumb { margin-bottom: 32px; }
  .ag-hero-title { font-size: 1.75rem; } /* スマホは is_sp で「診断コンテンツの／コラム」の2行に分ける */
  .ag-lead { font-size: 0.875rem; }
  .ag-list { padding: 0 0 56px; }
  .md-grid { gap: 18px 14px; }
  .md-item h2 { font-size: 15.5px; }
  .md-item p { font-size: 13px; }
  .ag-cta { text-align: left; }
  .ag-cta-title { font-size: min(1.5rem, calc((100vw - 60px) / 12.6)); } /* 「アイデアを診断のかたちに」12文字が改行しない上限 */
  .ag-cta p { margin-left: 0; margin-right: 0; }
  .ag-cta-btn { display: block; width: fit-content; margin: 0 auto; }
}
@media (max-width: 600px) {
  .md-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .md-item-link { transition: none; }
}