/* ===== TOP 新着カード（グリッド） ===== */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}
.article-card{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .2s;min-height:380px}
.article-card:hover{transform:translateY(-3px)}
.article-card .card-img{width:100%;height:200px;object-fit:cover;display:block;border-radius:4px}
.card-img--ph{width:100%;height:200px;background:#eee;display:flex;align-items:center;justify-content:center;color:#777;font-size:.9rem}
.article-card .card-body{flex:1;padding:1rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden}
.card-title{font-size:1.1rem;font-weight:700;margin:0;line-height:1.4}
.card-title--lg{font-size:1.2rem}
.title-mark{background:var(--title-mark-bg)}
.meta-date{font-size:.8rem;color:#777}

/* カテゴリ・タグ（TOPカード用） */
.cat-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.cat-chip{display:inline-block;background:var(--cat-bg);color:var(--cat-fg);padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600;line-height:1.2;text-decoration:none}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.tag-chip{font-size:.85rem;color:#555;text-decoration:none}
.tag-chip:hover{color:var(--primary-blue);text-decoration:underline}

/* サマリ2行省略 */
.card-excerpt--lg{font-size:.95rem;color:#444;line-height:1.6;margin-top:.5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}

/* ===== 記事一覧（リスト型） ===== */
.article-list{display:flex;flex-direction:column;gap:2rem}
.article-list-card{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:8px;background:#fff;padding:16px;margin-bottom:16px;box-shadow:0 2px 6px rgba(0,0,0,.05);gap:1rem}
.article-list-card .article-thumb{width:100%;height:auto;order:-1}
.article-list-card .article-thumb img{width:100%;height:auto;border-radius:6px;object-fit:cover}
.article-list-card .article-body{flex:1;display:flex;flex-direction:column;gap:.6rem}
.article-list-card .article-title{font-size:1.4rem;font-weight:700;margin:0;line-height:1.4}
.article-list-card .article-title a{color:var(--main-text);text-decoration:none}
.article-list-card .article-title a:hover{text-decoration:underline;color:var(--primary-blue)}
.article-list-card .article-summary{font-size:.95rem;color:#555;margin:0 0 12px;line-height:1.6}
.article-list-card .article-meta{font-size:.85rem;color:#777;margin-bottom:10px}
.article-list-card .article-categories{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:.4rem}
.article-list-card .article-categories .category{background:var(--cat-bg);color:var(--cat-fg);font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:999px}
.article-list-card .article-tags{display:flex;flex-wrap:wrap;gap:6px}
.article-list-card .article-tags .tag{font-size:.8rem;color:#555;background:#f3f4f6;border-radius:999px;padding:3px 8px}

/* PCでは横並び */
@media (min-width:768px){
  .article-list-card{flex-direction:row;gap:1.5rem;padding:1.5rem 0;border:none;border-bottom:1px solid var(--border-color);box-shadow:none;border-radius:0;background:transparent}
  .article-list-card .article-thumb{flex-shrink:0;width:240px;height:150px;margin-bottom:0}
  .article-list-card .article-thumb img{width:100%;height:100%}
  .article-list-card .article-body{padding:0}
}

/* ===== 記事詳細（表・引用・戻る） ===== */
.article-detail__body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}
.article-detail__body table th,.article-detail__body table td{border:1px solid var(--border-color);padding:.6rem .8rem;text-align:left}
.article-detail__body table th{background:var(--light-gray-bg);font-weight:700}
.article-detail__body blockquote{border-left:4px solid var(--primary-blue);background:#f9f9f9;padding:1rem 1.25rem;margin:1.5rem 0;color:#555;font-style:italic}
.article-detail__back{text-align:center;margin:2rem 0 4rem}
@media (max-width:767px){.article-detail__back{margin-bottom:5rem}}

/* ===== 下部セクション：新着/おすすめ ===== */
.article-bottom-sections{margin-top:3rem}
.bottom-block{padding:1.5rem;border-radius:8px;margin-bottom:2.5rem}
.bottom-block--accentA{background:#FFFBE6;border:1px solid #FFE58F}
.bottom-block--accentB{background:#E6F7FF;border:1px solid #91D5FF}
.bottom-block__head{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.sec-subtitle{font-size:1.3rem;font-weight:700;margin:0}

/* === 記事本文内　=== */
.article-detail__body.md-body h2 {
  border-bottom: 2px solid #4285F4; /* 線の太さと色 */
  padding-bottom: 0.4em; /* 線と文字の間の余白 */
  margin-top: 2em; /* 見出しの上の余白 */
  margin-bottom: 1em; /* 見出しの下の余白 */
}

.article-detail__body.md-body img {
  /* インラインスタイルに打ち勝つため !important を追記 */
  max-width: 100% !important;
  width: 100% !important;     /* width もインラインスタイルを上書き */
  height: auto !important;      /* ★これでインラインの height を上書きし、縦横比が保たれます */
  
  /* 念のため、他のインラインスタイルもリセット */
  margin: 1.5em auto !important;
  transform: none !important;
  display: block !important;
}
/* static/css/article.css に追記 */

.article-detail__body.md-body {
  font-size: 0.95rem;
  line-height: 1.5;
}


/* ==============================
   HTMLデザインテスト用スタイル
   ============================== */

/* 見出し */
.gdocs-content .section-title {
  border-left: 4px solid #0ea5e9;
  padding-left: 0.6em;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 2em 0 1em;
}

/* カードボックス */
.gdocs-content .card-box {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}
.gdocs-content .card-box h3 {
  margin-top: 0;
  color: #0ea5e9;
}

/* ボタン（プライマリ） */
.gdocs-content .btn-primary {
  display: inline-block;
  padding: 0.7em 1.5em;
  background: #0ea5e9;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background 0.25s;
}
.gdocs-content .btn-primary:hover {
  background: #0284c7;
}

/* ボタン（セカンダリ） */
.gdocs-content .btn-secondary {
  display: inline-block;
  padding: 0.6em 1.3em;
  background: #e5e7eb;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.25s, color 0.25s;
}
.gdocs-content .btn-secondary:hover {
  background: #d1d5db;
  color: #000;
}

/* チェックリスト */
.gdocs-content ul.checklist {
  list-style: none;
  padding-left: 1.2em;
}
.gdocs-content ul.checklist li {
  position: relative;
  padding-left: 1.5em;
  margin: 0.4em 0;
}
.gdocs-content ul.checklist li::before {
  content: "✔";
  color: #16a34a;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* 引用 */
.gdocs-content .quote-info {
  border-left: 4px solid #0ea5e9;
  background: #f0f9ff;
  padding: 1em;
  margin: 1.5em 0;
  color: #0369a1;
  font-style: italic;
}