/* =========================================
  Gutenberg editor styles
  （frontend .blogDetails-content__body の再現）
============================================ */

.editor-styles-wrapper{
  font-family: 'Noto Sans JP', sans-serif;
  color:#27303A;
  line-height:1.9;
  font-size:16px;

  /* カラートークン（フロント準拠） */
  --c-blue: #2E63C8;
  --c-blue2:#2F6CD6;
  --c-gray:#5C6B7A;
  --c-bdr:#DDE6F3;
  --c-bg :#F6F8FC;
}

/* エディタ本文幅 */
.editor-styles-wrapper .wp-block{
  max-width: 650px;
}

/* ==============================
   アイキャッチ相当
============================== */
.editor-styles-wrapper .blogDetails-content__image{
  margin: 0 auto 60px;
  width: 50rem;
  height: 30rem;
}
.editor-styles-wrapper .blogDetails-content__image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

/* ==============================
   本文ベース余白
============================== */
.editor-styles-wrapper > *:first-child{ margin-top:0; }
.editor-styles-wrapper > *{ margin:0 0 22px; }

/* ==============================
   見出し
============================== */
/* H2：太字＋下線 */
.editor-styles-wrapper h2{
  font-size:24px;
  color:var(--c-blue);
  font-weight:700;
  line-height:1.45;
  margin:60px 0 14px;
  padding-bottom:12px;
  border-bottom:3px solid var(--c-blue);
}

/* H3：左ライン＋青文字 */
.editor-styles-wrapper h3{
  position:relative;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  color:var(--c-blue2);
  margin:60px 0 14px;
  padding-left:12px;
}
.editor-styles-wrapper h3::before{
  content:"";
  position:absolute; left:0; top:.25em;
  width:6px; height:1.2em;
  background:var(--c-blue2);
}

/* H4：青太字 */
.editor-styles-wrapper h4{
  font-size:18px;
  font-weight:700;
  color:var(--c-blue2);
  margin:60px 0 12px;
}

/* ==============================
   段落
============================== */
.editor-styles-wrapper p{
  margin:10px 0 0;
  color:#24303C;
  font-size:14px;
  line-height:3.4;
}

/* h2/h3/h4 の直後の p だけ大きく */
.editor-styles-wrapper h2 + p,
.editor-styles-wrapper h3 + p,
.editor-styles-wrapper h4 + p{
  margin-top:60px;
}

/* ==============================
   画像・図版
============================== */
.editor-styles-wrapper img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  display:block;
  margin-top:60px;
}
.editor-styles-wrapper figure{ margin:0 0 20px; }

/* ==============================
   箇条書き（青いドット）
============================== */
.editor-styles-wrapper ul{
  list-style:none;
  margin:60px 0 18px 0;
  padding-left:0;
}
.editor-styles-wrapper ul li{
  position:relative;
  padding-left:20px;
  margin:10px 0;
}
.editor-styles-wrapper ul li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--c-blue2);
}

/* ==============================
   引用（番号振り付き）
============================== */
.editor-styles-wrapper blockquote{
  position:relative;
  margin:60px 0;
  padding:0 60px;
  background:#fff;
  color:#333;
  font-size:16px;
  line-height:2;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
  counter-reset: quote-num;
}

/* 引用マーク（前） */
.editor-styles-wrapper blockquote::before{
  content:"“";
  position:absolute;
  left:-10px;
  top:-50px;
  font-family:"Times New Roman", serif;
  font-weight:900;
  font-size:150px;
  line-height:1;
  color:#B9B9B9;
  pointer-events:none;
}

/* 引用マーク（後） */
.editor-styles-wrapper blockquote::after{
  content:"”";
  position:absolute;
  right:30px;
  bottom:-90px;
  font-family:"Times New Roman", serif;
  font-weight:900;
  font-size:130px;
  line-height:1;
  color:#B9B9B9;
  pointer-events:none;
}

/* 引用内の段落に「1)」形式の番号を自動付与 */
.editor-styles-wrapper blockquote p{
  position:relative;
  margin-top:30px;
  padding-left:2em;
  text-indent:-2em;
  counter-increment: quote-num;
}
.editor-styles-wrapper blockquote p::before{
  content: counter(quote-num) ")　";
  font-weight:500;
  color:#333;
}

/* 引用内の番号付きリスト */
.editor-styles-wrapper blockquote ol{
  counter-reset:qnum;
  margin:0;
  padding-left:0;
  list-style:none;
}
.editor-styles-wrapper blockquote ol li{
  counter-increment:qnum;
  position:relative;
  padding-left:28px;
  margin:20px 0;
}
.editor-styles-wrapper blockquote ol li::before{
  content: counter(qnum) ")";
  position:absolute; left:0; top:0;
  color:#333;
  font-weight:600;
}

/* ==============================
   レスポンシブ（目安）
============================== */
@media (max-width:768px){
  .editor-styles-wrapper{ font-size:15px; }

  .editor-styles-wrapper h2{ font-size:22px; }
  .editor-styles-wrapper h3{ font-size:18px; }
  .editor-styles-wrapper h4{ font-size:17px; }

  /* SP時は本文の段落余白を前後広げる（フロント準拠） */
  .editor-styles-wrapper p{
    margin:30px 0 18px;
  }

  .editor-styles-wrapper blockquote{
    padding:15px 24px;
  }
  .editor-styles-wrapper blockquote::before{
    font-size:100px;
    top:-35px;
    left:-5px;
  }
  .editor-styles-wrapper blockquote::after{
    font-size:100px;
    bottom:-70px;
    right:-2px;
  }
}