@charset "utf-8";
/* ============================================================
   blog.css — .blog_content 以下のブロックエディタ要素スタイル
   ============================================================ */

/* ─────────────────────────────────────────
   ベース
───────────────────────────────────────── */
.blog_content {
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 2;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ─────────────────────────────────────────
   見出し
───────────────────────────────────────── */
.blog_content h1,
.blog_content h2,
.blog_content h3,
.blog_content h4,
.blog_content h5,
.blog_content h6 {
    font-family: "Zen Maru Gothic", 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 1.5;
    margin: 2em 0 0.8em;
    color: #222;
}

/* H2 — アンダーライン蛍光ハイライト */
.blog_content h2 {
    font-size: 1.6rem;
    padding: 0.3em 0.6em;
    background: linear-gradient(transparent 70%, #ffe400 0);
    display: block;
}

/* H3 — 左ボーダー二重線 */
.blog_content h3 {
    font-size: 1.35rem;
    padding: 0.2em 0.6em;
    border-left: 4px solid #195875;
    border-bottom: 1px solid #d0dde6;
}

/* H4 — ドット装飾 */
.blog_content h4 {
    font-size: 1.15rem;
    padding: 0.1em 0.4em 0.1em 1.1em;
    position: relative;
    border-bottom: 1px dashed #b0c4ce;
}

.blog_content h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #195875;
}

/* H5 */
.blog_content h5 {
    font-size: 1.05rem;
    color: #195875;
    padding-left: 1em;
    position: relative;
}

.blog_content h5::before {
    content: "▶";
    position: absolute;
    left: 0;
    font-size: 0.7em;
    top: 0.35em;
    color: #ffe400;
}

/* H6 */
.blog_content h6 {
    font-size: 1rem;
    color: #666;
    padding-left: 1em;
    border-left: 3px solid #ccc;
}

/* ─────────────────────────────────────────
   段落 / テキスト
───────────────────────────────────────── */
.blog_content p {
    margin: 0 0 1.4em;
    line-height: 2;
}

.blog_content strong,
.blog_content b {
    font-weight: 700;
    color: #222;
}

.blog_content em,
.blog_content i {
    font-style: italic;
}

.blog_content s,
.blog_content del {
    text-decoration: line-through;
    color: #999;
}

.blog_content mark {
    background: linear-gradient(transparent 60%, #ffe400 60%);
    color: inherit;
    padding: 0 2px;
}

.blog_content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.blog_content sub {
    font-size: 0.75em;
    vertical-align: sub;
}

.blog_content sup {
    font-size: 0.75em;
    vertical-align: super;
}