@charset "UTF-8";

/*
 * 本文（リッチテキスト）の見た目。
 *
 * 管理画面の編集領域と公開画面の本文は、どちらも .sun-editor-editable を持つ。
 * このファイルを両方で読むことで、編集中に見えたとおりに公開される。
 * 片方だけへ書くと見え方がずれるため、本文の装飾はここへ集める。
 *
 * 読み込みは suneditor-contents.min.css の「後」。同じ詳細度で上書きするため、
 * 順番が入れ替わると効かなくなる。
 */

.sun-editor-editable {
    /* 既定は Helvetica Neue 単独・16px・1.5em。既存サイトの本文へ揃える */
    --se-content-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --se-edit-font-size: 14px;
    --se-edit-line-height: 1.42857143;
    /* 見出しの色。公開画面の --accent と同じ値。管理画面には --accent が無いため独自に持つ */
    --body-accent: #425ba8;
    /* リンクは既定が #0056b3 / #0093ff。既存サイトの配色へ揃える */
    --se-edit-anchor: #337ab7;
    --se-edit-anchor-on-font: #23527c;
}

/*
 * 見出し。
 * suneditorの既定はem指定で、h5が11.6px・h6が9.4pxと本文より小さくなる。
 * 実データはh5を35箇所使っているため、px指定で本文と同じか少し大きい範囲に収める。
 */

.sun-editor-editable h2 {
    margin: 32px 0 12px;
    padding: 4px 0 4px 12px;
    border-left: 5px solid var(--body-accent);
    font-size: 20px;
}

.sun-editor-editable h3 {
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #d8dde2;
    font-size: 17px;
}

.sun-editor-editable h4 {
    margin: 24px 0 8px;
    color: var(--body-accent);
    font-size: 15px;
}

.sun-editor-editable h5 {
    margin: 20px 0 8px;
    font-size: 14px;
}

.sun-editor-editable h6 {
    margin: 20px 0 8px;
    color: #555;
    font-size: 14px;
}

/* 見出しの直後は余白を詰める */
.sun-editor-editable h2 + *,
.sun-editor-editable h3 + *,
.sun-editor-editable h4 + *,
.sun-editor-editable h5 + *,
.sun-editor-editable h6 + * {
    margin-top: 0;
}

/* 引用は既定の灰色の縦線をアクセント色にし、本文と同じ文字色にする */
.sun-editor-editable blockquote {
    border-left-color: var(--body-accent);
    color: inherit;
}

/* 表は既定だと必ず幅100%になる。中身なりの幅にして、狭い画面でははみ出させない */
.sun-editor-editable table {
    width: auto;
    max-width: 100%;
}

.sun-editor-editable a {
    /* 既定は白空白を折り返さない指定が入っており、長いURLがはみ出す */
    white-space: normal;
    word-break: break-all;
}