/* SPARK News 記事ページ（フェーズ1：STUDIO版の見た目をそのまま再現） */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Noto Sans JP"; font-size: 16px; color: #000; background: #fff; }

.page { display: flex; flex-direction: column; padding: 10px 50px; background: #fff; color: #333; font-family: sans-serif; line-height: 1; }

/* メディア名 */
.media-brand { display: flex; flex-direction: column; padding-bottom: 20px; }
.media-brand__row { display: flex; height: 22px; }
.media-brand p { margin: 0; font-family: "Shippori Mincho B1"; line-height: 1.4; }
.media-brand__row p { display: flex; align-items: center; font-size: 16px; }
.media-brand__accent { color: #d6bf37; }
.media-brand__name { font-size: 36px; font-weight: 800; color: transparent; background: linear-gradient(0deg, #bebebe 0%, #eeeca6 100%); -webkit-background-clip: text; background-clip: text; align-self: flex-start; }

/* アイキャッチ（STUDIO同様に背景画像で表示） */
.eyecatch { width: 100%; max-width: 60%; height: 390px; margin: 0 auto; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; }

/* 記事タイトル */
.post-title { margin: 20px; font-family: "Open Sans"; font-size: 24px; line-height: 1.5; font-weight: 900; color: #333; }

/* 本文 */
.post-body { padding: 0 10px; font-family: "Shippori Mincho B1"; font-size: 16px; line-height: 1.4; color: #333; text-align: left; word-break: break-word; }
.post-body > p { margin: 10px 0; font-family: "Open Sans"; line-height: 2; }
.post-body strong { font-weight: 900; }
.post-body a { color: #007cff; text-decoration: underline; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { color: #333; line-height: 1.4; }
.post-body h1 { margin: 20px 0; font-size: 24px; font-weight: 700; }
.post-body h2 { margin: 10px 0; font-size: 20px; font-weight: 700; }
.post-body h3 { margin: 40px 0 10px; padding-left: 10px; border-left: 6px solid #d6bf37; font-size: 18px; font-weight: 700; }
.post-body h4 { margin: 20px 0 10px; padding-left: 10px; border-left: 4px solid #929292; font-size: 16px; font-weight: 600; }
.post-body hr { box-sizing: content-box; height: 1px; margin: 10px 0; border: 0; border-top: 1px solid #ccc; }
.post-body ul { margin: 0 0 0 20px; padding: 0; }
.post-body li { margin: 10px 0; line-height: 2; list-style: disc; }
.post-body li p { margin: 0; }
.post-body figure { margin: 0; }
.post-body img { max-width: 100%; height: auto; vertical-align: bottom; }
.post-body .table-wrap { overflow-x: auto; }
.post-body table { margin: 10px 0; border: 1px solid #f2f2f2; border-collapse: collapse; font-family: sans-serif; font-size: 14px; line-height: 1.4; color: #1a1a1a; }
.post-body td { min-width: 100px; padding: 12px; border: 1px solid #f2f2f2; }
.post-body td p { margin: 0; white-space: pre-line; }

/* 目次 */
.post-body .toc { padding: 20px 10px; border-radius: 24px; background: #f5f5f5; color: #616161; font-family: sans-serif; font-size: 16px; line-height: 1; text-decoration: underline; }
.post-body .toc ul { margin: 0; padding: 0; }
.post-body .toc li { margin: 0 0 16px; line-height: 2; list-style: none; }
.post-body .toc li.toc-h2 { padding-left: 32px; }
.post-body .toc li.toc-h3 { padding-left: 64px; }
.post-body .toc a { color: #616161; text-decoration: none; }

/* タブレット（〜768px） */
@media (max-width: 768px) {
  .page { padding: 10px 15px; }
  .media-brand__name { font-size: 20px; }
  .post-body { font-size: 14px; }
  .post-body h4 { font-size: 14px; }
}

/* モバイル（〜540px） */
@media (max-width: 540px) {
  .media-brand__row p { font-size: 12px; }
  .media-brand__name { font-size: 24px; }
  .eyecatch { max-width: 100%; height: 334px; }
  .post-title { width: 90%; margin: 20px auto; font-size: 18px; }
  .post-body { width: 90%; margin: 0 auto; }
  .post-body .toc { font-size: 13px; }
  .post-body h1 { font-size: 20px; }
  .post-body h2 { font-size: 18px; }
  .post-body h3 { font-size: 16px; }
  .post-body h4 { font-size: 15px; }
}