@charset "UTF-8";

/*
 * TinyMCEリッチエディタ用のスタイル
 *   エディタ側・表示側どっちもこれを参照する
 *   エディタがiframe内で body#tinymce から始まるので、それを基準にスタイルを当てる
 */

/* --- */

/*
 * BreakPoints （@mediaではroot変数使えないのでメモ）
 *   Desktop: 960px
 *   FHD: 1920px
 */

:root {
  --tmce-font-color: rgba(0, 0, 0, 0.9);
  --tmce-font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;

  --tmce-link-color: #1041a7;
}

/* --- */

/*
 * Font
 */
#tinymce {
  color: var(--tmce-font-color);
  font-family: var(--tmc-font-family);
  line-height: 1.5;
  font-size: 15px;
}

@media screen and (min-width: 960px) {
  #tinymce {
    font-size: 18px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce {
    font-size: 22px;
  }
}

/* --- */

/*
 * Blocks
 */
#tinymce p {
  display: block;
  margin-block-start: 16px;
  margin-block-end: 16px;
}

#tinymce h1,
#tinymce h2,
#tinymce h3,
#tinymce h4,
#tinymce h5,
#tinymce h6 {
  display: block;
  margin-block-start: 20px;
  margin-block-end: 20px;
  font-weight: bold;
}

#tinymce pre {
  display: block;
  margin-block-start: 13px;
  margin-block-end: 13px;
}

#tinymce h1 {
  font-size: 24px;
}

@media screen and (min-width: 960px) {
  #tinymce h1 {
    font-size: 32px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h1 {
    font-size: 36px;
  }
}

#tinymce h2 {
  font-size: 21px;
}

@media screen and (min-width: 960px) {
  #tinymce h2 {
    font-size: 24px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h2 {
    font-size: 28px;
  }
}

#tinymce h3 {
  font-size: 19px;
}

@media screen and (min-width: 960px) {
  #tinymce h3 {
    font-size: 19px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h3 {
    font-size: 23px;
  }
}

#tinymce h4 {
  font-size: 16px;
}

@media screen and (min-width: 960px) {
  #tinymce h4 {
    font-size: 16px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h4 {
    font-size: 19px;
  }
}

#tinymce h5 {
  font-size: 13px;
}

@media screen and (min-width: 960px) {
  #tinymce h5 {
    font-size: 13px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h5 {
    font-size: 16px;
  }
}

#tinymce h6 {
  font-size: 11px;
}

@media screen and (min-width: 960px) {
  #tinymce h6 {
    font-size: 11px;
  }
}

@media screen and (min-width: 1920px) {
  #tinymce h6 {
    font-size: 13px;
  }
}

/* --- */

/*
 * Widget
 */

/* Image */
#tinymce img {
  /* width: 100%; */
}

/* Anchor */
#tinymce a {
  color: var(--tmce-link-color);
  text-decoration: underline;
}

/* List */
#tinymce ul,
#tinymce ol {
  display: block;
  margin-block-start: 18px;
  margin-block-end: 18px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

#tinymce ul {
  list-style-type: disc;
}

#tinymce ul li {
}

#tinymce ol {
  list-style-type: decimal;
}

#tinymce ol li {
}

/* --- */

/*
 * TinyMCE Custom Size Classes
 */
#tinymce .size_SS {
  font-size: 0.75em;
}

#tinymce .size_S {
  font-size: 0.875em;
}

#tinymce .size_M {
  font-size: 1em;
}

#tinymce .size_L {
  font-size: 1.25em;
}

#tinymce .size_LL {
  font-size: 1.5em;
}