@charset "UTF-8";
/* Editor.js(編集画面)とプレビュー画面の本文スタイル */

/* -------------------------------------------------------------------------
   ラッパー
   ------------------------------------------------------------------------- */
.editorjs-article {
    box-sizing: border-box;
    font-size: 16px;
    line-height: normal;
    font-family: "Noto Sans Japanese", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #000;
}

.editorjs-article *,
.editorjs-article *::before,
.editorjs-article *::after {
    box-sizing: inherit;
}

.editorjs-article .codex-editor {
    color: inherit;
}

/* em の土台・折り返し（プレビューは div 二重で詳細度アップ） */
div.editorjs-article div.editorjs-output,
.editorjs-article .editor-wrapper .codex-editor {
    font-size: 16px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   本文（出力HTML と Codex を同一ブロックで指定）
   ------------------------------------------------------------------------- */
.editorjs-article .editorjs-output .editorjs__content,
.editorjs-article .codex-editor .editorjs__content {
    margin: 0;
}

.editorjs-article .editorjs-output span.ej-inline-fs,
.editorjs-article .codex-editor span.ej-inline-fs {
    line-height: inherit;
}

.editorjs-article .editorjs-output p,
.editorjs-article .codex-editor .ce-paragraph p {
    margin: 1rem 0;
    line-height: 1.6em;
}

.editorjs-article .codex-editor .ce-paragraph {
    outline: none;
}

.editorjs-article .editorjs-output h1,
.editorjs-article .editorjs-output h2,
.editorjs-article .editorjs-output h3,
.editorjs-article .editorjs-output h4,
.editorjs-article .editorjs-output h5,
.editorjs-article .editorjs-output h6,
.editorjs-article .codex-editor h1.ce-header,
.editorjs-article .codex-editor h2.ce-header,
.editorjs-article .codex-editor h3.ce-header,
.editorjs-article .codex-editor h4.ce-header,
.editorjs-article .codex-editor h5.ce-header,
.editorjs-article .codex-editor h6.ce-header {
    margin: 1rem 0;
    padding: 0;
    line-height: 1.25em;
    font-weight: normal;
    outline: none;
}

.editorjs-article .editorjs-output h1,
.editorjs-article .codex-editor h1.ce-header {
    font-size: 2em;
}

.editorjs-article .editorjs-output h2,
.editorjs-article .codex-editor h2.ce-header {
    font-size: 1.75em;
}

.editorjs-article .editorjs-output h3,
.editorjs-article .codex-editor h3.ce-header {
    font-size: 1.5em;
}

.editorjs-article .editorjs-output h4,
.editorjs-article .codex-editor h4.ce-header {
    font-size: 1.3em;
}

.editorjs-article .editorjs-output h5,
.editorjs-article .codex-editor h5.ce-header {
    font-size: 1.2em;
}

.editorjs-article .editorjs-output h6,
.editorjs-article .codex-editor h6.ce-header {
    font-size: 1em;
}

.editorjs-article .ce-header p,
.editorjs-article .ce-header div {
    padding: 0 !important;
    margin: 0 !important;
}

.editorjs-article .editorjs-output .editorjs-h2-banner,
.editorjs-article .codex-editor .editorjs-h2-banner {
    background-color: #000;
    color: #fff;
    padding: 0.5em 1em;
    margin: 0;
    box-sizing: border-box;
}

.editorjs-article .editorjs-output .editorjs-h2-banner .editorjs__content,
.editorjs-article .codex-editor .editorjs-h2-banner .editorjs__content {
    color: inherit;
}

.editorjs-article .editorjs-output .editorjs-h2-banner h1,
.editorjs-article .editorjs-output .editorjs-h2-banner h2,
.editorjs-article .editorjs-output .editorjs-h2-banner h3,
.editorjs-article .editorjs-output .editorjs-h2-banner h4,
.editorjs-article .editorjs-output .editorjs-h2-banner h5,
.editorjs-article .editorjs-output .editorjs-h2-banner h6,
.editorjs-article .codex-editor .editorjs-h2-banner h1,
.editorjs-article .codex-editor .editorjs-h2-banner h2,
.editorjs-article .codex-editor .editorjs-h2-banner h3,
.editorjs-article .codex-editor .editorjs-h2-banner h4,
.editorjs-article .codex-editor .editorjs-h2-banner h5,
.editorjs-article .codex-editor .editorjs-h2-banner h6 {
    color: inherit;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.editorjs-article .editorjs-output .editorjs-h2-banner a,
.editorjs-article .codex-editor .editorjs-h2-banner a {
    color: #93c5fd;
}

.editorjs-article .editorjs-output ul,
.editorjs-article .codex-editor ul,
.editorjs-article .editorjs-output ol,
.editorjs-article .codex-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5em;
}

.editorjs-article .editorjs-output ul,
.editorjs-article .codex-editor ul {
    list-style-type: disc;
}

.editorjs-article .editorjs-output ol,
.editorjs-article .codex-editor ol {
    list-style-type: decimal;
}

.editorjs-article .editorjs-output ul li,
.editorjs-article .codex-editor ul li {
    list-style-type: disc;
}

.editorjs-article .editorjs-output ol li,
.editorjs-article .codex-editor ol li {
    list-style-type: decimal;
}

.editorjs-article .editorjs-output ul ul,
.editorjs-article .editorjs-output ol ol,
.editorjs-article .editorjs-output ul ol,
.editorjs-article .editorjs-output ol ul,
.editorjs-article .codex-editor ul ul,
.editorjs-article .codex-editor ol ol,
.editorjs-article .codex-editor ul ol,
.editorjs-article .codex-editor ol ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.editorjs-article .editorjs-output li,
.editorjs-article .codex-editor li {
    line-height: 1.6em;
}

.editorjs-article .editorjs-output blockquote,
.editorjs-article .codex-editor blockquote {
    margin: 1rem 0;
    padding: 0 0 0 1em;
    border-left: 4px solid #ccc;
    color: #666;
}

.editorjs-article .editorjs-output blockquote cite,
.editorjs-article .codex-editor blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-size: 0.9em;
    font-style: normal;
    color: #999;
}

.editorjs-article .editorjs-output figure,
.editorjs-article .codex-editor figure {
    margin: 1rem 0;
}

.editorjs-article .editorjs-output figcaption,
.editorjs-article .codex-editor figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
}

.editorjs-article .editorjs-output img,
.editorjs-article .codex-editor img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 1rem 0;
}

.editorjs-article .editorjs-output figure img,
.editorjs-article .codex-editor figure img {
    margin: 0;
}

.editorjs-article .editorjs-output iframe,
.editorjs-article .codex-editor iframe {
    max-width: 100%;
}

.editorjs-article .editorjs-output pre,
.editorjs-article .codex-editor pre {
    margin: 0;
    padding: 1em;
    background: #f5f5f5;
    border-radius: 4px;
    overflow-x: auto;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    line-height: 1.55;
}

.editorjs-article .editorjs-output pre code,
.editorjs-article .codex-editor pre code {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    padding: 0;
}

.editorjs-article .editorjs-output :not(pre) > code,
.editorjs-article .codex-editor :not(pre) > code {
    background: rgba(251, 241, 242, 0.95);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}

.editorjs-article .editorjs-output a,
.editorjs-article .codex-editor a {
    color: #388ae5;
    text-decoration: underline;
    word-break: break-all;
    overflow-wrap: break-word;
}

.editorjs-article .editorjs-output a:hover,
.editorjs-article .codex-editor a:hover {
    color: #2b6cb0;
}

.editorjs-article .editorjs-output hr,
.editorjs-article .codex-editor hr {
    margin: 0;
    border: none;
    border-top: 1px solid #e8e8eb;
}

.editorjs-article .editorjs-output .ce-inline-fontsize-small,
.editorjs-article .codex-editor .ce-inline-fontsize-small {
    font-size: 0.8em;
}

.editorjs-article .editorjs-output .ce-inline-fontsize-normal,
.editorjs-article .codex-editor .ce-inline-fontsize-normal {
    font-size: 1em;
}

.editorjs-article .editorjs-output .ce-inline-fontsize-large,
.editorjs-article .codex-editor .ce-inline-fontsize-large {
    font-size: 1.2em;
}

.editorjs-article .link-tool {
    margin: 1rem 0;
    border: 1px solid #e8e8eb;
    border-radius: 6px;
    overflow: hidden;
}

.editorjs-article .link-tool__content {
    text-decoration: none;
    color: inherit;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
}

.editorjs-article .link-tool__content:hover {
    text-decoration: none;
    color: inherit;
}

.editorjs-article .link-tool__image {
    width: 320px;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-column: 2;
    grid-row: 1 / 4;
}

.editorjs-article .link-tool__title {
    padding: 12px 16px 0;
    font-weight: 600;
    font-size: 1em;
    grid-column: 1;
    grid-row: 1;
}

.editorjs-article .link-tool__description {
    padding: 8px 16px 0;
    margin: 0;
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
    grid-column: 1;
    grid-row: 2;
}

.editorjs-article .link-tool__anchor {
    display: block;
    padding: 8px 16px 12px;
    font-size: 0.8em;
    color: #999;
    grid-column: 1;
    grid-row: 3;
}

@media screen and (max-width: 768px) {
    .editorjs-article .link-tool__content {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .editorjs-article .link-tool__image {
        width: 100%;
        padding-bottom: 50%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        grid-column: auto;
        grid-row: auto;
    }

    .editorjs-article .link-tool__title {
        grid-column: auto;
        grid-row: auto;
    }

    .editorjs-article .link-tool__description {
        grid-column: auto;
        grid-row: auto;
    }

    .editorjs-article .link-tool__anchor {
        grid-column: auto;
        grid-row: auto;
    }
}