/* ===========================
   ページ飾り（page-title）
=========================== */
.parts01{
  padding:0;
  width: clamp(268px, 35vw, 670px);
  display:block;
  height:auto;
  aspect-ratio: auto;
  object-fit: contain;
  position:absolute;
  top:clamp(64px, 8.3vw, 160px);
  left:0;
  z-index: -1;
  mix-blend-mode: overlay;
}

.parts03{
  padding:0;
  width: clamp(220px, 28vw, 550px);
  display:block;
  height:auto;
  aspect-ratio: auto; 
  object-fit: contain;
  position:absolute;
  top:clamp(-64px, -8.3vw, -160px);
  right:0;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* ===========================
   カード（全体ラッパ）
   ※既存の .card があれば優先度負けないように軽めに
=========================== */
.card{
  position: relative;

}

/* ===========================
   ブログ：タイトルブロック
=========================== */
.blogtitle{
  display: grid;
  max-width:900px;
  justify-content: space-around;
}

/* 投稿日・タイトル・タグの塊 */
.blogmeta{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* 投稿日 */
.blogmeta .posted .date{
  color:#667085;
}

/* タイトル（h4はHTML側の流用） */
.blogmeta h4{
  font-weight: 700;
  line-height: 1.4;
  color:#0D223F;
}

/* タグ */
.blogmeta .tag{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blogmeta .tag .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #F2F7FF;
  color: #0D223F;
  line-height: 1;
}
.blogmeta .tag .badge img{
  width: 14px;
  height: 14px;
  display: block;
}

/* ===========================
   本文（Gutenbergの基本整形）
=========================== */
.blog_body{
  width: min(900px, 90%);
  color: #333;
  line-height: 1.9;
  display: block; /* 念のため */
}
.blog_body p{
  font-size: clamp(16px, 1.2vw, 20px);
  margin: 0 0 1.6em;
}
.blog_body h2{
  font-size: clamp(22px, 2.2vw, 32px);
  color:#001E56;
  margin: clamp(16px, 1.2vw, 20px) 0 .8em;
  line-height: 1.35;
}
.blog_body h3{
  font-size: clamp(20px, 1.9vw, 28px);
  margin: clamp(16px, 1.2vw, 20px) 0 .8em;
}
.blog_body h4{
  font-size: clamp(18px, 1.6vw, 24px);
  margin: clamp(16px, 1.2vw, 20px) 0 .6em;
}
.blog_body h5{
  font-size: clamp(16px, 1.4vw, 20px);
  margin: clamp(16px, 1.2vw, 20px) 0 .6em;
}
.blog_body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: clamp(16px, 2.4vw, 28px) auto;
  border-radius: 8px;
}
.blog_body figure{ margin: 0 0 1.6em; }
.blog_body figcaption{
  font-size: .9em;
  color:#6b7280;
  text-align: center;
  margin-top: .5em;
}

/* 引用・注意などのボックス（必要なら適用） */
.blog_body blockquote{
  margin: clamp(16px, 1.2vw, 20px) 0;
  padding: clamp(16px, 2vw, 24px);
  border-left: 4px solid #0E3E87;
  background: #F7FAFF;
  color:#2B3A55;
}
.blog_body ul,
.blog_body ol{
  margin: 0 0 1.6em 1.2em;
}
.blog_body li{ margin: .3em 0; }

/* ===========================
   戻る導線
=========================== */
.backlink{
  width: min(900px, 90%);
  margin: clamp(24px, 3.5vw, 48px) auto 0;
  display: flex;
  justify-content: space-around;
}
.backbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 999px;
  background: #0E3E87;
  color: #fff;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.backbtn:hover{ transform: translateY(-1px); opacity:.92; }

/* ===========================
   レスポンシブ微調整
=========================== */
@media (max-width: 430px){
  /* カードの左右余白を削除 */
  .card {
    padding-inline: 0 !important;
  }

  /* blogtitle 自体は中央寄せ＋100%に近づける */
  .blogtitle {
    width: 94%;
    max-width: 330px;
    margin-inline: auto;
    display: block; /* gridやめるとより確実 */
  }
  .blog_body{ width: 100%; }
  .backlink{ width: 94%; }
}

/* ブログのタイトル＆本文をカードの中で中央寄せ */
.blogtitle,
.blog_body {
  width: min(900px, 90%);
  margin-left: auto;
  margin-right: auto;
}

/* ついでに本文の下にちょっと余白つける */
.blog_body {
  margin-bottom: clamp(80px, 9vw, 200px);
}

/* スマホのときは読みやすい幅に調整 */
@media (max-width: 430px) {
  .blogtitle,
  .blog_body {
    width: 94%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ブログ本文内の左ズレをリセット */
.blog_body,
.blog_body * {
  margin-left: 0;
  padding-left: 0;
}

/* リストだけは少しだけ余白残す（読みやすさ用） */
.blog_body ul,
.blog_body ol {
  padding-left: 1.2em;
  margin-left: 1.2em;
}