/* Notion Design System */

:root {
  --notion-bg-default: #ffffff;
  --notion-text-default: #37352f;
  --notion-text-secondary: #6b6b6b;
  --font-sans: 'Inter', system-ui, 'Noto Sans JP', sans-serif;
}

body { font-family: var(--font-sans); color: var(--notion-text-default); line-height: 1.6; }
.container { display: flex; max-width: 1000px; margin: 0 auto; gap: 20px; }
.main { flex: 1; }
.sidebar { width: 300px; }
.blog-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; }
@media (max-width: 768px) { .container { flex-direction: column; } }


/* --- blog index list grid (auto-added, batch5) --- */
.blog-list-page .bloglist-header { max-width: 1200px; margin: 0 auto; padding: 32px 24px 8px; }
.blog-list-page .bloglist-header h1 { margin: 0 0 6px; }
.blog-list-page .bloglist-intro { color: #6b6b6b; margin: 0; }
.blog-list-page .bloglist-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
@media (max-width: 640px) { .blog-list-page .bloglist-grid { grid-template-columns: 1fr; } }

.bloglist-grid .blog-card { border: 1px solid #e6e6e6; border-radius: 10px; overflow: hidden; padding: 0; margin: 0; background: #fff; transition: box-shadow .2s, transform .2s; }
.bloglist-grid .blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.bloglist-grid .blog-card a { text-decoration: none; color: inherit; display: block; }
.bloglist-grid .card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #f1f1ef; }
.bloglist-grid .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloglist-grid .card-thumb.no-image { display: flex; align-items: center; justify-content: center; }
.bloglist-grid .card-thumb.no-image::before { content: "No Image"; color: #b0b0b0; font-size: .85rem; }
.bloglist-grid .card-body { padding: 16px 18px 20px; }
.bloglist-grid .card-body time { font-size: .8rem; color: #8a8a8a; }
.bloglist-grid .card-body h2, .bloglist-grid .card-body h3 { font-size: 1.05rem; line-height: 1.5; margin: 6px 0 0; color: #37352f; }

/* ==========================================================================
   Blog index 2-column layout (blog/index.html 専用 / 2026-07 改修)
   本体 styles.css の Warm Companion テーマ変数を再利用。
   記事ページ用セレクタ（.container/.main/.sidebar 等）には影響しない。
   ========================================================================== */
.blog-index-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  font-family: var(--font-family, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif);
  color: var(--text-dark, #1c1917);
}
.blog-index-layout .bi-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--primary-color, #ea580c);
}
.blog-index-layout .bi-header h1 {
  margin: 0 0 10px;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--text-dark, #1c1917);
}
.blog-index-layout .bi-intro {
  margin: 0;
  color: var(--text-medium, #44403c);
  font-size: 1.05rem;
}
.blog-index-layout .bi-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}
.blog-index-layout .bi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.blog-index-layout .bi-card {
  border: 1px solid var(--border-color, #fed7aa);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-white, #ffffff);
  box-shadow: var(--shadow-soft, 0 4px 20px -5px rgba(234, 88, 12, 0.15));
  transition: var(--transition, all 0.3s ease);
}
.blog-index-layout .bi-card:hover {
  box-shadow: var(--shadow-hover, 0 10px 25px -5px rgba(234, 88, 12, 0.25));
  transform: translateY(-4px);
}
.blog-index-layout .bi-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.blog-index-layout .bi-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-warm, #fff7ed);
}
.blog-index-layout .bi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-index-layout .bi-body {
  padding: 16px 18px 20px;
}
.blog-index-layout .bi-body time {
  display: block;
  font-size: 0.82rem;
  color: var(--primary-color, #ea580c);
  font-weight: 600;
}
.blog-index-layout .bi-body h2 {
  margin: 8px 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-dark, #1c1917);
}
.blog-index-layout .bi-excerpt {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-medium, #44403c);
}
/* サイドバー */
.blog-index-layout .bi-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-index-layout .bi-ad {
  text-align: center;
}
.blog-index-layout .bi-ad img {
  max-width: 100%;
  height: auto;
}
.blog-index-layout .amazon-banner a {
  display: block;
  padding: 18px 16px;
  border: 1px solid var(--border-color, #fed7aa);
  border-radius: 10px;
  background: var(--bg-warm, #fff7ed);
  color: var(--primary-color, #ea580c);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition, all 0.3s ease);
}
.blog-index-layout .amazon-banner a:hover {
  background: var(--bg-white, #ffffff);
  box-shadow: var(--shadow-soft, 0 4px 20px -5px rgba(234, 88, 12, 0.15));
}
.blog-index-layout .bi-widget {
  border: 1px solid var(--border-color, #fed7aa);
  border-radius: 12px;
  background: var(--bg-white, #ffffff);
  padding: 18px 20px;
}
.blog-index-layout .bi-widget-title {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--text-dark, #1c1917);
  border-bottom: 2px solid var(--primary-color, #ea580c);
  padding-bottom: 8px;
}
.blog-index-layout .bi-widget-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-index-layout .bi-widget-links li {
  margin: 0 0 8px;
}
.blog-index-layout .bi-widget-links li:last-child {
  margin-bottom: 0;
}
.blog-index-layout .bi-widget-links a {
  color: var(--text-medium, #44403c);
  text-decoration: none;
  font-size: 0.92rem;
}
.blog-index-layout .bi-widget-links a:hover {
  color: var(--primary-color, #ea580c);
  text-decoration: underline;
}
.blog-index-layout .bi-widget-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-medium, #44403c);
}
/* レスポンシブ */
@media (max-width: 1200px) {
  .blog-index-layout .bi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991px) {
  .blog-index-layout .bi-columns {
    grid-template-columns: 1fr;
  }
  .blog-index-layout .bi-sidebar {
    max-width: 480px;
    margin: 8px auto 0;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .blog-index-layout {
    padding: 28px 16px 56px;
  }
  .blog-index-layout .bi-grid {
    grid-template-columns: 1fr;
  }
  .blog-index-layout .bi-header h1 {
    font-size: 1.6rem;
  }
}

/* Mobile news-commentary readability baseline (shared site-local rule). */
@media (max-width: 768px) {
  .blog-main, .blog-container, .two-col-layout { min-width: 0; }
  .article-detail, .blog-article, .article-body { min-width: 0; }
  .article-detail .article-body, .blog-article { padding-inline: 16px; }
  .article-content {
    font-size: 1rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
  }
  .article-content h2 { font-size: clamp(1.25rem, 6vw, 1.45rem); line-height: 1.4; }
  .article-content h3 { font-size: clamp(1.12rem, 5vw, 1.25rem); line-height: 1.45; }
  .article-content :is(img, iframe, video) { max-width: 100%; height: auto; }
  .article-content table { display: block; max-width: 100%; overflow-x: auto; }
  .sidebar, .blog-sidebar { position: static; order: 2; }
}

/* Blog index card grid fallback: scoped to index-only markup. */
.blog-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.blog-index-main { min-width: 0; }

.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.blog-index-grid .blog-card { display: flex; flex-direction: column; }

.blog-index-grid .blog-card > a {
  color: inherit;
  text-decoration: none;
}

.blog-index-grid .card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-index-grid .card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-index-grid .card-body { padding: 24px; }

@media (max-width: 1200px) {
  .blog-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .blog-index-layout { grid-template-columns: 1fr; }
  .blog-index-grid { grid-template-columns: 1fr; }
}

/* Mobile article width: styles.css has a legacy broad selector that adds
   padding to every container, main, article and section. Keep one outer
   gutter only so the article text does not become unnecessarily narrow. */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .container > .main,
  .container > .main > article,
  .container > .main > article > .article-header,
  .container > .main > article > .article-body {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Mobile article reading width: keep outer page gutters, remove duplicated inner gutters. */
@media (max-width: 768px) {
  .article-content,
  .article-detail .article-body,
  .blog-article,
  .main-content > article.main-content {
    padding-left: 0;
    padding-right: 0;
  }
  /* Cap article-panel padding without removing deliberate card framing. */
  .article-panel,
  .article-main,
  .post-content,
  .article-detail {
    padding-left: min(16px, 4vw);
    padding-right: min(16px, 4vw);
  }
  .article-body { padding-left: 0; padding-right: 0; }
}