/* Brand color fallback */
:root { --blog-accent: #1D64C3; }

/* セクション全体の背景がグレーでも記事本体は白に */
.section_type01 .normal_inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* タイトル（ページ上部h2）は余白を調整して呼吸感を出す */
.section_type01 .page_head01 {
  margin: 0 0 14px;
}

/* 記事本文のベースタイポグラフィ */
.blog_detail_body {
  color: #111827;
  line-height: 1.9;
  font-size: 16px;
}
.blog_detail_body p { margin: 0 0 1em; }
.blog_detail_body a { color: var(--blog-accent); text-decoration: none; }
.blog_detail_body a:hover { text-decoration: underline; }

/* 見出し（本文内） */
.blog_detail_body h2,
.blog_detail_body h3 {
  position: relative;
  margin: 1.5em 0 .75em;
  line-height: 1.3;
  font-weight: 800;
}
.blog_detail_body h2 {
  font-size: 1.5rem;
  padding-bottom: .35rem;
}
.blog_detail_body h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 56px; height: 3px;
  background: var(--blog-accent);
  border-radius: 2px;
}
.blog_detail_body h3 {
  font-size: 1.25rem;
  padding-left: .6rem;
  border-left: 4px solid var(--blog-accent);
}

/* セクションボックスの区切りと余白 */
.blog_detail_body .box {
  padding: .5rem 0 1rem;
  border-bottom: 1px solid #eef2f6;
}
.blog_detail_body .box:last-child { border-bottom: 0; }

/* 画像の扱いをきれいに */
.blog_detail_body figure {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: .5rem 0 1rem;
  overflow: hidden;
  background: #fff;
  text-align: center; /* 念のための保険 */
}
.blog_detail_body figure img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;                       /* 100%指定を解除して中央寄せ */
  max-width: min(100%, var(--blog-img-max, 960px)) !important; /* PCは最大960px、SPは100% */
  height: auto;
}

/* 引用/リストなども整える */
.blog_detail_body blockquote {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: #f9fafb;
  border-left: 4px solid #e5e7eb;
  color: #374151;
  border-radius: 6px;
}
.blog_detail_body ul,
.blog_detail_body ol { margin: 0 0 1rem 1.25rem; }
.blog_detail_body li { margin: .25rem 0; }

/* スマホ最適化 */
@media (max-width: 767px) {
  .section_type01 .normal_inner { padding: 16px; border-radius: 10px; }
  .blog_detail_body { font-size: 15px; line-height: 1.85; }
  .blog_detail_body h2 { font-size: 1.35rem; }
  .blog_detail_body h3 { font-size: 1.15rem; }
}

/* ========== ブログ詳細：表示幅拡張＆背景統一 ========== */
/* メインラップのグレーを白で上書き */
#content.page_2col,
#main,
#main .section_type01 {
  background: #fff !important;
}

/* ========== ブログ詳細：タイトル強調 ========== */
.section_type01 .page_head01.mypage_head {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #111827;
  margin: 0 0 18px;
  padding-bottom: .4rem;
  position: relative;
}
.section_type01 .page_head01.mypage_head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 88px; height: 4px;
  background: linear-gradient(90deg, var(--blog-accent, #1D64C3), #42A5F5 70%);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .section_type01 .page_head01.mypage_head { font-size: 1.6rem; }
  .section_type01 .page_head01.mypage_head::after { height: 3px; width: 72px; }
}
