@charset "UTF-8";

  /* -------------------- */
  /* editor-content（WordPress本文用の汎用コンポーネント）
  /* -------------------- */
  .c-editor-content,
  .editor-styles-wrapper {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #2F3B4B;

    :where(p, h2, h3, h4, h5, h6, ul, ol, table, figure, blockquote, hr, pre, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .wp-block-buttons)
    + :where(p, h2, h3, h4, h5, h6, ul, ol, table, figure, blockquote, hr, pre, .wp-block-table, .wp-block-image, .wp-block-group, .wp-block-columns, .wp-block-buttons) {
      margin-top: 10px;
    }
    :where(*) + :where(h2) {
      margin-top: 10px;
    }
    :where(*) + :where(h3, h4) {
      margin-top: 10px;
    }

    p {
      margin: 0;
    }
    img {
      max-width: 100%;
      height: auto;
    }

    .wp-block-image img {
      max-width: 100%;
      height: auto;
    }
    

    h2 {
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 1.4;
      padding-left: 20px;
      padding-top: 5px;
    }
    h3 {
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.4;
    }
    h4 {
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1.5;
    }
    h5,
    h6 {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.5;
    }

    ul,
    ol {
      padding-left: 1.5em;
    }
    ul {
      list-style: disc;
    }
    ol {
      list-style: decimal;
    }
    li + li {
      margin-top: .5em;
    }

    a {
      color: #1682DA;
      text-decoration: underline;
      &:hover {
        opacity: .7;
      }
    }
    strong,
    b {
      font-weight: bold;
    }

    blockquote {
      position: relative;
      padding: 24px;
      background: #D4DAE6;
      p {
        margin: 0;
      }
    }

    .wp-block-table {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      th,
      td {
        padding: 12px 16px;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #D4DAE6;
        white-space: normal;
        word-break: break-word;
      }
      th {
        font-weight: bold;
        background: #D4DAE6;
      }
    }
    .wp-block-table thead {
      border-bottom: none;
    }

    figure {
      margin-inline: 0;
    }
    figcaption,
    .wp-element-caption {
      margin-top: .8em;
      font-size: 1.3rem;
      color: #2F3B4B;
      text-align: center;
    }

    /* 区切り線 */ 
    hr {
      border: none;
      border-top: 1px solid #2F3B4B;
    }

    /* コード */ 
    pre {
      padding: 16px 20px;
      font-size: 1.4rem;
      line-height: 1.6;
      background: #2F3B4B;
      overflow-x: auto;
    }
  }

  @media screen and (max-width: 850px) {
    .c-editor-content,
    .editor-styles-wrapper {
      font-size: 1.5rem;
      h2 {
        font-size: 2rem;
        padding-left: 12px;
      }
      h3 {
        font-size: 1.8rem;
      }
      h4 {
        font-size: 1.6rem;
      }
      /* スマホでは列が潰れないよう最小幅を持たせて横スクロール */
      table {
        min-width: 600px;
      }
    }
  }

  @media screen and (max-width: 500px) {
    .c-editor-content,
    .editor-styles-wrapper {
      font-size: 1.4rem;
    }
  }