/* アクア都市レポート ブログ固有スタイル（深海水槽・気泡・コースティック光） */
/* ヘッダー/フッター/ナビ/記事レイアウトの基本は ../styles.css を利用 */

.index-stack {
  padding-top: 44px;
  padding-bottom: 80px;
}

.index-stack > section:first-child { margin-bottom: 44px; }

.index-stack > section > h2 {
  font-size: 1.5rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.index-stack > section > h2::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(20, 184, 196, 0.16);
  flex: none;
}

.index-stack .section-lead {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

.blog-cards .card-thumb { position: relative; overflow: hidden; }
.blog-cards .card-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: radial-gradient(circle at 8px 3px, var(--accent) 0 2.5px, transparent 3px) 0 0 / 28px 6px repeat-x,
              radial-gradient(circle at 20px 3px, rgba(138, 245, 234, 0.7) 0 1.8px, transparent 2.2px) 0 0 / 28px 6px repeat-x;
}
.blog-cards .card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}
.blog-cards .blog-card > a { display: block; color: inherit; text-decoration: none; height: 100%; }
.blog-cards .blog-card > a:hover h3 { color: var(--accent-deep); }

.article > h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.55;
  margin: 0 0 22px;
  text-wrap: wrap;
}
.blog-cards .blog-card h3 { text-wrap: wrap; }

.article > .source-note { margin: 0 0 24px; }

.article-content h2 { scroll-margin-top: calc(62px + 18px); }
.article-content p { margin: 0 0 1.35em; }
.article-content li { margin: 0 0 0.35em; }

.article > .share-box {
  margin: 40px 0 30px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent-2);
}

.content-layout .sidebar { position: static; }

@media (max-width: 800px) {
  .index-stack { padding-top: 34px; padding-bottom: 60px; }
}

/* デプロイQAゲート必須: article-content の左右パディング（短縮形不可） */
@media (max-width:768px){ .article-content { padding-left:16px; padding-right:16px; } }

/* HEADING-WRAP:START 見出し最終行孤立文字対策 */
h1,h2,h3,h4,.hero-title,.page-title,.card-title{ text-wrap:balance; word-break:auto-phrase; line-break:strict; overflow-wrap:break-word; }
/* HEADING-WRAP:END */