/* ================================================
   JiJi TALK Styles - スタイルシート
   ================================================ */

/* ================================================
   カテゴリカラー変数定義
   ================================================ */
:root {
  --jiji-talk-A-beginner: #22A699;
  --jiji-talk-B-basic: #476E73;
  --jiji-talk-C-intermediate: #E07000;
  --jiji-talk-D-advanced: #CC2500;
  --jiji-talk-E-applied: #8C3494;
  --jiji-talk-F-special: #0066CC;
}

/* ================================================
   記事間リンク（前回・次回記事リンク）
   ================================================ */

/* 記事間リンクの基本スタイル */
a.jiji-talk-article-link {
  text-decoration: underline;
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

/* カテゴリ別記事リンク色（見出しと同じセレクター優先度） */
body.jiji-talk-category-A-beginner a.jiji-talk-article-link {
  color: var(--jiji-talk-A-beginner) !important;
}

body.jiji-talk-category-B-basic a.jiji-talk-article-link {
  color: var(--jiji-talk-B-basic) !important;
}

body.jiji-talk-category-C-intermediate a.jiji-talk-article-link {
  color: var(--jiji-talk-C-intermediate) !important;
}

body.jiji-talk-category-D-advanced a.jiji-talk-article-link {
  color: var(--jiji-talk-D-advanced) !important;
}

body.jiji-talk-category-E-applied a.jiji-talk-article-link {
  color: var(--jiji-talk-E-applied) !important;
}

body.jiji-talk-category-F-extra a.jiji-talk-article-link {
  color: var(--jiji-talk-F-extra) !important;
}

/* ================================================
   カテゴリラベル
   ================================================ */

/* テーマラベル内のカテゴリ表示 */
.theme-label.category-label {
  font-size: var(--font-size-s) !important;
  font-weight: var(--font-weight-bold);
  color: var(--color-white) !important;
  padding: 2px 6px;
  border-radius: 0;
  margin-bottom: 1px;
  text-shadow: none;
  display: inline-block;
}

/* 数字部分をもう少し大きく */
.theme-number .theme-num {
  font-size: var(--font-size-l) !important;
  color: var(--color-gray) !important;
}

/* 旧形式：絶対配置のカテゴリラベル（使用されなくなるが念のため残す） */
.talk-category-label {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-white);
  font-size: var(--font-size-ss);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-6) var(--spacing-16);
  border-radius: var(--border-radius);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* カテゴリ別色分け（変数使用） */
.category-A-beginner { 
  background: var(--jiji-talk-A-beginner);
}

.category-B-basic { 
  background: var(--jiji-talk-B-basic);
}

.category-C-intermediate { 
  background: var(--jiji-talk-C-intermediate);
}

.category-D-advanced { 
  background: var(--jiji-talk-D-advanced);
}

.category-E-applied { 
  background: var(--jiji-talk-E-applied);
}

.category-F-extra { 
  background: var(--jiji-talk-F-extra);
}

/* ================================================
   ページ共通スタイル
   ================================================ */

/* JiJi TALKページ全体の背景色 */
body.jiji-talk-page,
body.jiji-talk-category-page {  
  background: var(--color-bg-section);
}

/* ================================================
   ヒーロー・ヘッダーセクション
   ================================================ */

/* ヒーローセクション */
.jiji-talk-hero {
  background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #673ab7 100%);
  color: var(--color-white);
  padding: var(--spacing-64) 0;
  text-align: center;
  position: relative;
}

.jiji-talk-brand {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--spacing-16);
}

.jiji-talk-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-32);
  letter-spacing: 2px;
  line-height: var(--line-height-layout);
  color: var(--color-white);
}

/* カテゴリ付きタイトルのスタイル */
.jiji-talk-title.with-category {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
}

/* 装飾的な斜線（前） */
.jiji-talk-title.with-category::before {
  content: '';
  position: absolute;
  left: -60px;
  top: 50%;
  width: 40px;
  height: 3px;
  background: var(--color-white);
  transform: translateY(-50%) rotate(45deg);
}

/* 装飾的な斜線（後） */
.jiji-talk-title.with-category::after {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  width: 40px;
  height: 3px;
  background: var(--color-white);
  transform: translateY(-50%) rotate(-45deg);
}

.jiji-talk-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-48);
}

.theme-number {
  width: 70px;
  height: 55px;
  background: var(--color-white);
  color: var(--color-black);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  line-height: var(--line-height-layout);
  position: relative;
}

/* 右側の三角（吹き出し効果） */
.theme-number::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent var(--color-white);
}

.theme-number .theme-label {
  font-size: var(--font-size-s);
  margin-bottom: 0px;
}

.theme-number .theme-num {
  font-size: var(--font-size-ll);
}

.theme-title {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-limited);
  color: var(--color-white);
}

/* カテゴリ名バッジ（タイトル内） */
.category-name-badge {
  display: inline-block;
  color: var(--color-white);
  font-size: var(--font-size-l);
  line-height: 1;
  padding: var(--spacing-12) var(--spacing-12);
  border-radius: 0.5rem;
  font-weight: var(--font-weight-bold);
  vertical-align: baseline;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  position: relative;
  top: 0px;
}

/* ================================================
   カテゴリ別グラデーション背景
   ================================================ */

/* 入門編 - グリーン系 */
.category-gradient-A-beginner {
  background: linear-gradient(135deg, var(--jiji-talk-A-beginner) 0%, #0f7a37 50%, #065828 100%);
}

/* 初級編 - ブルー系 */
.category-gradient-B-basic {
  background: linear-gradient(135deg, var(--jiji-talk-B-basic) 0%, #1d4ed8 50%, #1e40af 100%);
}

/* 中級編 - オレンジ系 */
.category-gradient-C-intermediate {
  background: linear-gradient(135deg, var(--jiji-talk-C-intermediate) 0%, #b45309 50%, #92400e 100%);
}

/* 上級編 - レッド系 */
.category-gradient-D-advanced {
  background: linear-gradient(135deg, var(--jiji-talk-D-advanced) 0%, #b91c1c 50%, #991b1b 100%);
}

/* 応用編 - パープル系 */
.category-gradient-E-applied {
  background: linear-gradient(135deg, var(--jiji-talk-E-applied) 0%, #6d28d9 50%, #5b21b6 100%);
}

/* 番外編 - グレー系 */
.category-gradient-F-extra {
  background: linear-gradient(135deg, var(--jiji-talk-F-extra) 0%, #374151 50%, #1f2937 100%);
}

/* ================================================
   ペルソナ表示エリア
   ================================================ */

/* JiJi TALKページの.hero-personas-bannerスタイルを上書き */
.jiji-talk-hero .hero-personas-banner {
  display: flex;
  justify-content: space-evenly !important;
  margin-bottom: var(--spacing-16) !important;
  gap: 0 !important;
  width: 800px !important;
  margin-left: auto;
  margin-right: auto;
}

.jiji-talk-hero .hero-personas-banner .hero-persona-item {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.jiji-talk-hero .hero-personas-banner .hero-persona-item img {
  width: 120px;
  height: 120px;
  border-radius: var(--border-radius-full);
  object-fit: cover;
  border: none;
}

/* ================================================
   メインコンテンツエリア
   ================================================ */

/* メインコンテンツ */
.jiji-talk-content {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--spacing-64) var(--spacing-16) 0;
}

/* セクションヘッダー */
.talk-section-header {
  margin: var(--spacing-64) 0 var(--spacing-48) 0;
  text-align: center;
  background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #673ab7 100%);
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--border-radius-sm);
  width: 100%;
}

.talk-section-header h3 {
  font-size: var(--font-size-ll);
  color: var(--color-white);
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-narrow);
}

/* ================================================
   カテゴリ別記事内スタイル
   ================================================ */

/* 入門編 - グリーン系 */
body.jiji-talk-category-A-beginner .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-A-beginner) 0%, #0f7a37 50%, #065828 100%);
}
body.jiji-talk-category-A-beginner .highlight {
  color: var(--jiji-talk-A-beginner);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* 初級編 - ブルー系 */
body.jiji-talk-category-B-basic .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-B-basic) 0%, #1d4ed8 50%, #1e40af 100%);
}
body.jiji-talk-category-B-basic .highlight {
  color: var(--jiji-talk-B-basic);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* 中級編 - オレンジ系 */
body.jiji-talk-category-C-intermediate .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-C-intermediate) 0%, #b45309 50%, #92400e 100%);
}
body.jiji-talk-category-C-intermediate .highlight {
  color: var(--jiji-talk-C-intermediate);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* 上級編 - レッド系 */
body.jiji-talk-category-D-advanced .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-D-advanced) 0%, #b91c1c 50%, #991b1b 100%);
}
body.jiji-talk-category-D-advanced .highlight {
  color: var(--jiji-talk-D-advanced);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* 応用編 - パープル系 */
body.jiji-talk-category-E-applied .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-E-applied) 0%, #6d28d9 50%, #5b21b6 100%);
}
body.jiji-talk-category-E-applied .highlight {
  color: var(--jiji-talk-E-applied);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* 番外編 - グレー系 */
body.jiji-talk-category-F-extra .talk-section-header {
  background: linear-gradient(135deg, var(--jiji-talk-F-extra) 0%, #374151 50%, #1f2937 100%);
}
body.jiji-talk-category-F-extra .highlight {
  color: var(--jiji-talk-F-extra);
  background-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* ================================================
   トークセクション・スピーカー
   ================================================ */

/* トークセクション */
.talk-section {
  margin-bottom: var(--spacing-16);
}

.speaker {
  display: flex;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-48);
  align-items: flex-start;
  max-width: 100%;
}

.speaker-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding-top: var(--spacing-4);
  width: 80px;
}

.speaker-avatar img,
.speaker-avatar .avatar-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--border-radius-full);
  object-fit: cover;
}

.speaker-avatar .avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-section);
  font-size: var(--font-size-l);
  color: var(--color-gray);
}

.speaker-content {
  flex: 1;
  min-width: 0;
}

.speaker-name {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-s);
  text-align: center;
  margin: 0;
}

.speaker-text {
  background: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-24);
  color: var(--text-primary);
  line-height: var(--line-height-base);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-l);
  position: relative;
}

/* 吹き出しの三角（ボーダー用） - デスクトップのみ */
.speaker-text::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--color-border) transparent transparent;
}

/* 吹き出しの三角（背景用） - デスクトップのみ */
.speaker-text::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--color-white) transparent transparent;
}

.speaker-text p {
  margin: 0 0 var(--spacing-8) 0;
}

.speaker-text p:last-child {
  margin-bottom: 0;
}

.speaker-text strong {
  font-weight: var(--font-weight-bold);
}

.speaker-text .highlight {
  color: var(--color-pink);
  font-weight: var(--font-weight-bold);
}

/* ================================================
   まとめセクション
   ================================================ */

/* まとめセクション */
.talk-summary {
  max-width: 100%;
  width: 100%;
}

.talk-admin-recommendation {
  max-width: 100%;
  width: 100%;
  margin-bottom: var(--spacing-160);
}

.summary-points {
  margin: var(--spacing-16) 0;
}

.summary-point {
  background: var(--color-bg-section);
  padding: var(--spacing-16);
  margin-bottom: var(--spacing-8);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
}

.summary-point:last-child {
  margin-bottom: 0;
}

.summary-point strong {
  color: var(--color-pink);
  display: block;
  margin-bottom: var(--spacing-4);
  font-weight: var(--font-weight-bold);
}

/* ================================================
   カテゴリ管理人紹介セクション
   ================================================ */

/* 管理人による概要説明セクション */
.category-intro-section {
  display: flex;
  justify-content: center;
  padding-right: 3.5rem;
}

.category-intro-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  max-width: 600px;
}

.category-intro-avatar {
  flex-shrink: 0;
}

.category-intro-avatar .avatar-image {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--border-radius-full);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.category-intro-bubble {
  background: var(--color-white);
  color: var(--text-primary);
  border-radius: var(--border-radius);
  padding: var(--spacing-16);
  border: 1px solid var(--color-border);
  position: relative;
  flex: 1;
}

/* 吹き出しの三角（左側） */
.category-intro-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--color-border) transparent transparent;
}

.category-intro-bubble::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--color-white) transparent transparent;
}

.bubble-content p {
  margin: 0;
  font-size: var(--font-size-s);
  line-height: var(--line-height-base);
}

/* ================================================
   カテゴリ記事一覧・カード表示
   ================================================ */

/* カテゴリ記事一覧セクション */
.jiji-talk-category-content {
  padding: var(--spacing-64) 0;
}

.jiji-talk-category-content .container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--spacing-16);
}

/* カテゴリバッジ + 数字ボックス */
.talk-category-number {
  display: flex;
  align-items: center;
  gap: 0;
}

.category-badge {
  color: var(--color-white);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  padding: 4px 8px;
  border-radius: 0;
  border: none;
  height: 32px;
  display: flex;
  align-items: center;
}

/* カテゴリ別バッジ色 */
.category-badge.A-beginner {
  background-color: var(--jiji-talk-A-beginner);
}

.category-badge.B-basic {
  background-color: var(--jiji-talk-B-basic);
}

.category-badge.C-intermediate {
  background-color: var(--jiji-talk-C-intermediate);
}

.category-badge.D-advanced {
  background-color: var(--jiji-talk-D-advanced);
}

.category-badge.E-applied {
  background-color: var(--jiji-talk-E-applied);
}

.category-badge.F-extra {
  background-color: var(--jiji-talk-F-extra);
}

.number-box {
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  padding: 4px 8px;
  border-radius: 0;
  height: 32px;
  display: flex;
  align-items: center;
  min-width: 40px;
  justify-content: center;
}

/* 記事情報とヘッダー */
.talk-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.talk-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-direction: row;
}

.talk-title {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-black);
  line-height: var(--line-height-narrow);
}

.talk-description {
  font-size: var(--font-size-s);
  color: var(--color-gray);
  line-height: var(--line-height-narrow);
  margin: 0;
}

/* ================================================
   フッター・ナビゲーション
   ================================================ */

/* JiJi TALK Category Navigation Inline - コンテンツ内用 */
.jiji-talk-category-nav-inline {
  background: var(--color-bg-section);
  padding: var(--spacing-64) 0;
  border-top: 1px solid var(--color-border);
}

.jiji-talk-category-nav-inline .jiji-talk-footer-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--spacing-16);
}

.jiji-talk-category-nav-inline .jiji-talk-footer-header {
  margin-bottom: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-32);
}

.jiji-talk-category-nav-inline .jiji-talk-footer-intro {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-direction: row-reverse;
}

.jiji-talk-category-nav-inline .jiji-talk-footer-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.jiji-talk-category-nav-inline .footer-avatar-image {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-border);
}

.jiji-talk-category-nav-inline .jiji-talk-footer-text {
  background: var(--color-white);
  color: var(--text-primary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-narrow);
  border-radius: var(--border-radius);
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  position: relative;
  display: flex;
  align-items: center;
}

/* 吹き出しの三角（ボーダー用） - 右側 */
.jiji-talk-category-nav-inline .jiji-talk-footer-text::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--color-border);
}

/* 吹き出しの三角（背景用） - 右側 */
.jiji-talk-category-nav-inline .jiji-talk-footer-text::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--color-white);
}

.jiji-talk-category-nav-inline .jiji-talk-footer-text p {
  margin: 0;
}

/* JiJi TALKページ内のタイトル（黒文字） */
.jiji-talk-footer-title.text-black {
  color: var(--color-black);
}

/* カテゴリナビゲーショングリッド（コンテンツ内用） */
.jiji-talk-category-nav-inline .category-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 80rem;
  margin: 0 auto;
}

.jiji-talk-category-nav-inline .category-nav-item {
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--spacing-24);
  text-decoration: none;
  color: var(--color-black);
  transition: all 0.3s ease;
  display: block;
}

.jiji-talk-category-nav-inline .category-nav-item:hover {
  border-color: var(--color-gray);
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  color: var(--color-black);
  text-decoration: none;
}

/* ================================================
   フッターメインセクション
   ================================================ */

.jiji-talk-footer {
  background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #673ab7 100%);
  padding: var(--spacing-64) 0;
}

.jiji-talk-footer-container {
  max-width: 80rem;
  margin: 0 auto;
}

/* ヘッダー部分 */
.jiji-talk-footer-header {
  margin-bottom: var(--spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-32);
}

.jiji-talk-footer-title {
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-align: left;
  flex-shrink: 0;
}

.jiji-talk-footer-intro {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-direction: row-reverse;
}

.jiji-talk-footer-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.footer-avatar-image {
  width: var(--spacing-48);
  height: var(--spacing-48);
  border-radius: var(--border-radius-full);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.jiji-talk-footer-text {
  background: var(--color-white);
  color: var(--text-primary);
  font-size: var(--font-size-s);
  line-height: var(--line-height-narrow);
  border-radius: var(--border-radius);
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  position: relative;
  display: flex;
  align-items: center;
}

/* 吹き出しの三角（ボーダー用） - 右側 */
.jiji-talk-footer-text::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--color-border);
}

/* 吹き出しの三角（背景用） - 右側 */
.jiji-talk-footer-text::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--color-white);
}

.jiji-talk-footer-text p {
  margin: 0;
}

/* グリッドレイアウト */
.jiji-talk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* カードスタイル */
.jiji-talk-card {
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--spacing-24);
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--color-black);
  display: block;
}

.jiji-talk-card:hover {
  border-color: var(--color-gray);
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  color: var(--color-black);
  text-decoration: none;
}

.jiji-talk-card-active {
  background: var(--color-bg-section);
  border-color: var(--color-gray);
  position: relative;
}

.jiji-talk-card-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-white);
  border-radius: var(--spacing-12) var(--spacing-12) 0 0;
}

.talk-volume {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--border-radius);
  font-size: var(--font-size-ss);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
  flex-shrink: 0;
}

.jiji-talk-card-active .talk-volume {
  background: var(--color-pink);
}

.jiji-talk-card:hover .talk-volume {
  background: var(--color-pink);
}

/* 非活性カード（未制作記事）スタイル */
.jiji-talk-card.disabled {
  cursor: not-allowed;
}

.jiji-talk-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.jiji-talk-card.disabled .talk-title {
  color: var(--color-gray);
}

.jiji-talk-card.disabled .talk-description {
  color: var(--color-gray);
}

.jiji-talk-card.disabled .category-badge {
  opacity: 0.6;
}

.jiji-talk-card.disabled .number-box {
  opacity: 0.6;
}

.jiji-talk-card.disabled .coming-soon-badge {
  opacity: 0.7;
}

/* 準備中バッジ */
.coming-soon-badge {
  display: inline-block;
  background: transparent;
  color: var(--color-black);
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--font-size-ss);
  font-weight: var(--font-weight-regular);
  margin-left: var(--spacing-8);
  vertical-align: middle;
}

/* ================================================
   カテゴリナビゲーション
   ================================================ */

.jiji-talk-category-nav {
  margin-top: var(--spacing-48);
  text-align: center;
}

.category-nav-title {
  color: var(--color-white);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-24);
}

.category-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 80rem;
  margin: 0 auto;
}

.category-nav-item {
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--spacing-24);
  text-decoration: none;
  color: var(--color-black);
  transition: all 0.3s ease;
  display: block;
}

.category-nav-item:hover {
  border-color: var(--color-gray);
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  color: var(--color-black);
  text-decoration: none;
}

.category-nav-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.category-nav-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  flex-direction: column;
}

/* カテゴリバッジグループ */
.category-nav-badge-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.category-nav-badge {
  color: var(--color-white);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  padding: 4px 8px;
  border-radius: 0;
  border: none;
  height: 32px;
  display: flex;
  align-items: center;
}

/* カテゴリナビバッジ色 */
.category-nav-badge.A-beginner {
  background-color: var(--jiji-talk-A-beginner);
}

.category-nav-badge.B-basic {
  background-color: var(--jiji-talk-B-basic);
}

.category-nav-badge.C-intermediate {
  background-color: var(--jiji-talk-C-intermediate);
}

.category-nav-badge.D-advanced {
  background-color: var(--jiji-talk-D-advanced);
}

.category-nav-badge.E-applied {
  background-color: var(--jiji-talk-E-applied);
}

.category-nav-badge.F-extra {
  background-color: var(--jiji-talk-F-extra);
}

.category-nav-badge-group .category-nav-title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-black);
  line-height: var(--line-height-narrow);
}

.category-nav-description {
  font-size: var(--font-size-s);
  color: var(--color-gray);
  line-height: var(--line-height-narrow);
  margin: 0;
  text-align: left;
}

/* ================================================
   他のトークも読むセクション
   ================================================ */

.other-talks-section {
  background-color: var(--color-light-gray);
  padding: var(--spacing-48) 0;
  margin: var(--spacing-48) 0;
}

.other-talks-title {
  text-align: center;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-gray);
  margin-bottom: var(--spacing-32);
}

.other-talks-links {
  margin-top: var(--spacing-24);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.talk-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-12) 0 var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-black);
  transition: all 0.2s ease;
}

.other-talks-links .talk-link:hover:not(.talk-link-active) .talk-title strong {
  color: var(--color-pink) !important;
}

/* アクティブ表示（現在のページ） */
.talk-link-active {
  cursor: default !important;
}

.talk-link-active .talk-volume {
  background-color: var(--color-pink) !important;
  color: white !important;
}

.talk-link-active .talk-title strong {
  color: var(--color-gray) !important;
}

.talk-link-active .talk-description {
  color: var(--color-gray) !important;
}

/* ================================================
   レスポンシブデザイン - モバイル
   ================================================ */

@media (max-width: 768px) {
  /* カテゴリラベルのレスポンシブ調整 */
  .talk-category-label {
    top: 8px;
    right: 8px;
    font-size: var(--font-size-sss);
    padding: var(--spacing-2) var(--spacing-8);
  }
  
  /* ヒーローセクション */
  .jiji-talk-hero {
    padding: var(--spacing-32) 0;
  }
  
  .jiji-talk-brand {
    padding: 0 var(--spacing-12);
  }
  
  .jiji-talk-title {
    font-size: var(--font-size-ll);
    margin-bottom: var(--spacing-24);
  }
  
  .jiji-talk-theme {
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-24);
  }
  
  .theme-title {
    font-size: var(--font-size-l);
  }
  
  .theme-number {
    width: 50px;
    height: 50px;
  }
  
  .theme-number .theme-label {
    font-size: 10px;
    margin-bottom: 1px;
  }
  
  .theme-number .theme-num {
    font-size: var(--font-size-m);
  }
  
  /* ペルソナバナー */
  .jiji-talk-hero .hero-personas-banner {
    gap: 8px;
    justify-content: space-evenly;
    margin-bottom: var(--spacing-12) !important;
    width: 100% !important;
    max-width: 350px !important;
  }
  
  .jiji-talk-hero .hero-personas-banner .hero-persona-item {
    width: 50px;
    height: 50px;
  }
  
  .jiji-talk-hero .hero-personas-banner .hero-persona-item img {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    border: none;
  }
  
  /* コンテンツエリア */
  .jiji-talk-content {
    padding: var(--spacing-48) var(--spacing-12);
  }
  
  .talk-section-header {
    margin: var(--spacing-48) 0 var(--spacing-32) 0;
  }
  
  .talk-section-header h3 {
    font-size: var(--font-size-l);
  }
  
  /* スピーカー */
  .speaker {
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-32);
    align-items: stretch;
  }
  
  .speaker-avatar {
    display: none; /* モバイルでは外側のアバターを非表示 */
  }
  
  .speaker-content {
    width: 100%;
  }
  
  .speaker-text {
    position: relative;
    padding-top: var(--spacing-64) !important;
    padding: var(--spacing-16);
    font-size: var(--font-size-m);
  }
  
  /* アバター画像（上部左に配置） */
  .speaker-text::before {
    content: "";
    position: absolute;
    top: var(--spacing-16);
    left: var(--spacing-16);
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
  }
  
  /* 名前表示用（アバターの右隣に配置） */
  .speaker-text::after {
    position: absolute;
    top: calc(var(--spacing-16) + 4px);
    left: calc(var(--spacing-16) + 32px + var(--spacing-8));
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray);
    line-height: 1;
    white-space: nowrap;
    max-width: 200px;
  }
  
  /* 各ペルソナのアバター画像と名前 */
  .jiji-admin .speaker-text::before {
    background-image: url('../../images/personas/kanrinin.png');
  }
  .jiji-admin .speaker-text::after {
    content: "管理人";
  }
  
  .yamada .speaker-text::before {
    background-image: url('../../images/personas/yamada.png');
  }
  .yamada .speaker-text::after {
    content: "山田雄一";
  }
  
  .hoshino .speaker-text::before {
    background-image: url('../../images/personas/hoshino.png');
  }
  .hoshino .speaker-text::after {
    content: "星野ひかり";
  }
  
  .sato .speaker-text::before {
    background-image: url('../../images/personas/sato.png');
  }
  .sato .speaker-text::after {
    content: "佐藤健太";
  }
  
  .tanaka .speaker-text::before {
    background-image: url('../../images/personas/tanaka.png');
  }
  .tanaka .speaker-text::after {
    content: "田中美咲";
  }
  
  .suzuki .speaker-text::before {
    background-image: url('../../images/personas/suzuki.png');
  }
  .suzuki .speaker-text::after {
    content: "鈴木恵子";
  }
  
  /* まとめセクション */
  .summary-point {
    padding: var(--spacing-12);
  }
  
  /* カテゴリイントロ */
  .category-intro-section {
    padding: 0 1rem;
  }
  
  .category-intro-content {
    flex-direction: row;
    text-align: left;
    gap: var(--spacing-16);
  }
  
  .jiji-talk-category-content {
    padding: var(--spacing-48) 0;
  }
  
  .category-name-badge {
    font-size: var(--font-size-s);
  }
  
  /* スマホで斜めラインの間隔を狭く */
  .jiji-talk-title.with-category::before {
    left: -40px;
    width: 30px;
  }
  
  .jiji-talk-title.with-category::after {
    right: -40px;
    width: 30px;
  }
  
  /* フッター */
  .jiji-talk-footer {
    padding: var(--spacing-48) 0;
  }
  
  .jiji-talk-footer-container {
    padding: 0 var(--spacing-16);
  }
  
  .jiji-talk-footer-header {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
  }
  
  .jiji-talk-footer-title {
    font-size: var(--font-size-title);
  }
  
  .jiji-talk-footer-intro {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--spacing-16);
  }
  
  /* カテゴリナビゲーション */
  .jiji-talk-category-nav-inline {
    padding: var(--spacing-48) 0;
  }
  
  .jiji-talk-category-nav-inline .jiji-talk-footer-header {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
  }
  
  .jiji-talk-category-nav-inline .jiji-talk-footer-intro {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--spacing-16);
  }
  
  /* グリッド - 1カラム */
  .jiji-talk-grid,
  .jiji-talk-category-nav-inline .category-nav-grid,
  .category-nav-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .jiji-talk-card,
  .jiji-talk-category-nav-inline .category-nav-item,
  .category-nav-item {
    padding: var(--spacing-16);
    border-right: none;
  }
  
  /* 最後のカードの下罫線を削除 */
  .jiji-talk-card:last-child,
  .jiji-talk-category-nav-inline .category-nav-item:last-child,
  .category-nav-item:last-child {
    border-bottom: none;
  }
  
  .jiji-talk-footer-text br,
  .jiji-talk-category-nav-inline .jiji-talk-footer-text br {
    display: none;
  }
  
  /* その他のモバイル調整 */
  .other-talks-section {
    padding: var(--spacing-32) 0;
  }
  
  .other-talks-title {
    font-size: var(--font-size-xl);
  }
  
  .other-talks-links {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .talk-link {
    gap: 10px;
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-8);
  }
  
  .talk-link:last-child {
    border-bottom: none;
  }
  
  .talk-volume {
    font-size: 11px;
    padding: 3px 6px;
    min-width: 42px;
  }
  
  .talk-title {
    font-size: 13px;
  }
  
  .talk-description {
    font-size: 11px;
  }
  
  .category-nav-item {
    padding: var(--spacing-20);
  }
  
  .category-nav-badge-group .category-nav-title {
    font-size: var(--font-size-m);
  }
  
  .category-nav-badge {
    font-size: var(--font-size-ss);
  }
  
  .category-nav-info {
    gap: 4px;
  }
  
  .category-nav-item:nth-child(n+4) {
    border-bottom: 1px solid var(--color-border) !important;
  }
  
  .category-nav-item:last-child {
    border-bottom: none !important;
  }
  
  .jiji-talk-category-nav {
    margin-top: var(--spacing-24);
  }
  
  .jiji-talk-card .number-box {
    padding: var(--spacing-4) var(--spacing-4);
  }
}

/* ================================================
   レスポンシブデザイン - タブレット
   ================================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  /* 2カラムグリッド */
  .jiji-talk-grid,
  .jiji-talk-category-nav-inline .category-nav-grid,
  .category-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  
  /* 2カラム時：右端（2,4,6番目）の右罫線を削除 */
  .jiji-talk-card:nth-child(2n),
  .jiji-talk-category-nav-inline .category-nav-item:nth-child(2n),
  .category-nav-item:nth-child(2n) {
    border-right: none;
  }
  
  /* 3カラム用のルールをリセット */
  .jiji-talk-card:nth-child(3n),
  .jiji-talk-category-nav-inline .category-nav-item:nth-child(3n),
  .category-nav-item:nth-child(3n) {
    border-right: 1px solid var(--color-border);
  }
  
  /* 2カラム時：下部の下罫線を削除 */
  .jiji-talk-card:nth-child(n+9) {
    border-bottom: none;
  }
  
  .jiji-talk-category-nav-inline .category-nav-item:nth-child(n+3),
  .category-nav-item:nth-child(n+3) {
    border-bottom: none;
  }
}

/* ================================================
   デスクトップ専用スタイル
   ================================================ */

@media (min-width: 1025px) {
  /* 3カラムグリッドの右端（3,6番目）の右罫線を削除 */
  .jiji-talk-card:nth-child(3n),
  .jiji-talk-category-nav-inline .category-nav-item:nth-child(3n),
  .category-nav-item:nth-child(3n) {
    border-right: none;
  }

  /* 最下段の下罫線を削除 */
  .jiji-talk-card:nth-child(n+10) {
    border-bottom: none;
  }
  
  .jiji-talk-category-nav-inline .category-nav-item:nth-child(n+4),
  .category-nav-item:nth-child(n+4) {
    border-bottom: none;
  }
}

/* ================================================
   記事詳細ヒーローエリア拡張
   ================================================ */

/* 記事詳細用カテゴリバッジの微調整（既存スタイルを維持） */
.category-name-badge.jiji-talk-category-badge {
  /* 既存の.category-name-badgeスタイルをそのまま使用 */
}

/* カテゴリ別バッジ色（記事詳細用） */
body.jiji-talk-category-A-beginner .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-A-beginner);
}

body.jiji-talk-category-B-basic .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-B-basic);
}

body.jiji-talk-category-C-intermediate .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-C-intermediate);
}

body.jiji-talk-category-D-advanced .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-D-advanced);
}

body.jiji-talk-category-E-applied .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-E-applied);
}

body.jiji-talk-category-F-extra .category-name-badge.jiji-talk-category-badge {
  background-color: var(--jiji-talk-F-extra);
}

/* vol.ラベル */
.vol-label {
  background-color: var(--color-gray-600);
  color: white;
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-ss);
  font-weight: var(--font-weight-bold);
}

/* カテゴリ別vol.ラベル色 */
body.jiji-talk-category-A-beginner .vol-label {
  background-color: var(--jiji-talk-A-beginner);
}

body.jiji-talk-category-B-basic .vol-label {
  background-color: var(--jiji-talk-B-basic);
}

body.jiji-talk-category-C-intermediate .vol-label {
  background-color: var(--jiji-talk-C-intermediate);
}

body.jiji-talk-category-D-advanced .vol-label {
  background-color: var(--jiji-talk-D-advanced);
}

body.jiji-talk-category-E-applied .vol-label {
  background-color: var(--jiji-talk-E-applied);
}

body.jiji-talk-category-F-extra .vol-label {
  background-color: var(--jiji-talk-F-extra);
}

/* ================================================
   QAエリア
   ================================================ */

/* QAボックス */
.qa-box {
  margin-bottom: var(--spacing-24);
  padding: 0 var(--spacing-24) var(--spacing-16) var(--spacing-24);
  border-bottom: 1px solid var(--color-border);
}

/* 最初のQAボックス */
.qa-box:first-of-type {
  margin-top: var(--spacing-32);
}

/* スマホ用QAエリア調整 */
@media (max-width: 768px) {
  .qa-box h4 {
    font-size: var(--font-size-l);
  }
  
  .qa-box {
    padding-left: 0;
    padding-right: 0;
  }
  
  .talk-info {
    gap: var(--spacing-4);
  }
  
  .talk-title {
    font-size: var(--font-size-m);
  }
  
  .talk-description {
    font-size: var(--font-size-ss);
  }
}

/* トップページスマホ用調整 */
@media (max-width: 640px) {
  body.home .feature-article-card .feature-article-link {
    padding: 0 0 var(--spacing-20) 0;
  }
}