/* =========================================
   Series Detail Page (Warm Theme)
========================================= */
.back-nav { max-width: 860px; margin: 1.5rem auto 0; padding: 0 1rem; }
.back-nav a { color: var(--muted); font-weight: 700; font-size: .9rem; }

.series-main {
  max-width: 860px; margin: 1rem auto 4rem;
  padding: 0 1rem;
}

/* カード化 */
.series-description {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}

/* 背景あしらい（右上に肉球） */
.series-description::before {
  content: "🐾"; position: absolute; top: -10px; right: -10px;
  font-size: 5rem; color: var(--accent); opacity: 0.1; transform: rotate(20deg); pointer-events: none;
}

.series-h1 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--brand); margin-bottom: 2rem;
  text-align: center; line-height: 1.5;
}

.series-description p {
  line-height: 1.9; margin-bottom: 1.5rem; color: var(--text);
}

/* Product Button */
.product-list-link { margin-top: 3rem; text-align: center; }
.product-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 700;
  border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, #f6d365, #fda085);
  color: #fff; box-shadow: 0 8px 20px rgba(253,160,133,0.4);
  transition: transform .2s;
}
.product-btn:hover { transform: translateY(-3px); }

/* Other Series */
.other-series { margin-top: 4rem; text-align: center; }
.other-series ul { justify-content: center; }
.other-series li a {
  background: #fff; color: var(--brand);
  border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.other-series li a:hover {
  background: var(--accent-light); border-color: var(--accent);
}

/* =========================================
   Series Hero Image (New)
========================================= */
.series-hero-image {
  margin-bottom: 2.5rem;
}
.series-hero-image img {
  width: 100%;
  height: auto;
  border-radius: 1.5rem; /* common.cssのテーマに合わせる */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* =========================================
   Other Series Navigation (Redesign)
========================================= */
.other-series {
  margin-top: 4rem;
  padding-top: 2rem;
  text-align: center;
}

.other-series h2 {
  font-size: 1.4rem;
  color: var(--brand);
  margin-bottom: 1.5rem;
}

/* カード型グリッド */
.other-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 横並び・スマホで縦積み */
  gap: 1.2rem;
  max-width: 600px; /* 広がりすぎないように制限 */
  margin: 0 auto;
}

/* カードスタイル */
.series-nav-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.series-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-color: var(--accent); /* ホバーでテーマカラーの枠線 */
  background: #fffbf0; /* ほんのり色づけ */
}

.nav-sub {
  font-size: 0.8rem;
  color: var(--text-subtle);
  margin-bottom: 0.3rem;
  letter-spacing: 1px;
}

.nav-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.nav-arrow {
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2rem;
}