:root {
  /*
  --white: #fff;
  --milk: #FFFEF6;
  --lightPink: #FFB0AC;
  --pink: #EE827C;
  --lightYellow: #FFDE62;
  --yellow: #FCC800;
  --gray: #999999;
  --darkGray: #666666;
  --black: #404040;
  */
  --pastelPink: #FFD0CE;
}

/* 記事に装飾が干渉しないようにリセット */
.page-defaults .article h1 {
  line-height: unset;
  border-bottom: unset;
}

/* .page-defaults .article h2::after {
  position: unset;
  border-radius: unset;
  transform: unset;
  opacity: unset;
} */

.page-defaults .my-post h4 {
  display: unset;
  padding: unset;
  background: none;
}

/*　幅をフロントエンドと同じにする　*/
.editor-styles-wrapper {
  padding: 0 25%;
}
.editor-styles-wrapper .wp-block {
  max-width: 100%;
}

/*
各ブロックの指定
------------------------------------------------*/
/* タイトル */
.article h1,
.editor-styles-wrapper h1 {
  font-family: 'ZenMaruGothic';
  font-weight: 500;
  font-size: 2.5em;
  color: var(--black);
}

/* 大見出し */
.my-post h2,
.editor-styles-wrapper .is-root-container h2 {
  position: relative;
  font-family: 'ZenMaruGothic';
  font-weight: 400;
  font-size: 2em;
  margin-top: 0.9em;
  margin-bottom: 0.9em;
  padding: 10px;
  color: var(--darkGray);
  /* 左、下線だけの吹き出し */
  /* background-color: #fff;
  border: var(--black) solid 1px;
  border-radius: 5px;
  filter: drop-shadow(5px 5px 0 var(--pastelPink)); */

  /*
  border: var(--black) 1px solid;
  border-radius: 50px 5px 5px 50px;
  box-shadow: 7px 7px 0 var(--pastelPink);
  */
  /*四角＋三角のやつ
  color: var(--black);
  border-radius: 3px;
  */
  /* 上下線 */
  color: var(--pink);
  letter-spacing: 0.1em;
  font-weight: 500;
  border-top: var(--lightPink) 2px dotted;
  border-bottom: var(--lightPink) 2px dotted;
}

.my-post h2::after,
.editor-styles-wrapper .is-root-container h2::after {
  /* 打消し */
  transform: unset;
  height: auto;
  width: auto;
  top: auto;
  border-radius: unset;
  background-color: unset;
}

/* 小見出し */
.my-post h3,
.editor-styles-wrapper .is-root-container h3 {
  font-family: 'ZenMaruGothic';
  font-weight: 400;
  font-size: 1.7em;
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--darkGray);
  position: relative;
  padding-left: 40px;
  display: block;
}
.my-post h3::before,
.editor-styles-wrapper .is-root-container h3::before {
  position: absolute;
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--pastelPink);
  opacity: 0.5;
  left: 0;
}
.my-post h3::after,
.editor-styles-wrapper .is-root-container h3::after {
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--pastelPink);
  opacity: 0.5;
  left: 15px;
  bottom: 3px;
}

/* h4 */
.my-post h4,
.editor-styles-wrapper .is-root-container h4 {
  font-family: 'ZenMaruGothic';
  font-weight: 400;
  font-size: 1.3em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  color: var(--black);
}

/* テキスト */
.my-post p,
.editor-styles-wrapper .is-root-container p {
  font-size: 1em;
  line-height: 2.7em;
  margin-top: 1em;
  margin-bottom: 1em;
  color: var(--black);
}

/* リスト */
.my-post ul,
.editor-styles-wrapper .is-root-container ul {
  list-style: none;
  font-family: 'ZenMaruGothic';
  font-weight: 400;
  font-size: 1.2em;
  color: var(--black);
}

.my-post ul li,
.editor-styles-wrapper .is-root-container ul li {
  position: relative;
  line-height: 2em;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* 番号無し */
.my-post ul li::before,
.editor-styles-wrapper .is-root-container ul li::before {
  position: absolute;
  /* content: ''; */
  /* width: 10px;
  height: 10px;
  background-color: var(--pastelPink);
  border: var(--pastelPink) 1px solid;
  border-radius: 50%;
  left: -23px;
  top: calc(0.7em + 2px); */

  /* font: var(--fa-font-solid); */
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  font-weight: 900;
  font-size: 1em;
  color: var(--pastelPink);
  background-color: #fff;
  left: -35px;
}

/* 番号アリ */
.my-post ol,
.editor-styles-wrapper .is-root-container ol {
  list-style: none;
  font-family: 'ZenMaruGothic';
  font-weight: 400;
  font-size: 1.2em;
  color: var(--black);
  padding-left: 50px;

  counter-reset: list-counter;
}
.my-post ol li,
.editor-styles-wrapper .is-root-container ol li {
  position: relative;
  line-height: 1.7em;
  margin-top: 25px;
}
.my-post ol li:first-of-type,
.editor-styles-wrapper .is-root-container ol li:first-of-type {
  margin-top: 0;
}

.my-post ol li::before,
.editor-styles-wrapper .is-root-container ol li::before {
  position: absolute;
  display: block;
  content: counter(list-counter);
  counter-increment: list-counter;
  color: #fff;
  background-color: var(--pastelPink);
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  text-align: center;
  font-size: 1.2em;
  left: -50px;

}

/* 段落下げる処理 */
.my-post ul li > ul,
.my-post ol li > ul,
.editor-styles-wrapper .is-root-container ul li > ul,
.editor-styles-wrapper .is-root-container ol li > ul {
  line-height: 2em;
  font-size: 0.9em;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-post ul li > ul li::before,
.my-post ol li > ul li::before,
.editor-styles-wrapper .is-root-container ul li > ul li::before,
.editor-styles-wrapper .is-root-container ol li > ul li::before {
  position: absolute;
  /* font: var(--fa-font-solid); */
  font-family: "Font Awesome 5 Free";
  content: '\f04b';
  font-weight: 900;
  font-size: 0.9em;
  color: var(--pastelPink);
  background-color: #fff;
  left: -30px;
  counter-increment: none;
}

.my-post ul li > ul,
.editor-styles-wrapper .is-root-container ul li > ul {
  padding-left: 30px;
}
.my-post ul li > ul li::before,
.editor-styles-wrapper .is-root-container ul li > ul li::before {
  left: -25px;
}

.my-post ol li > ul, 
.editor-styles-wrapper .is-root-container ol li > ul {
  padding-left: 30px;
}
.my-post ol li > ul li::before,
.editor-styles-wrapper .is-root-container ol li > ul li::before {
  left: -30px;
}


/*
文字のマーカー
ーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.pink-highlight {
  background: linear-gradient(to top, #FFB0AC 20%, transparent 30%);
  font-weight: 500;
}
.yellow-highlight {
  background: linear-gradient(to top, #FFE066 20%, transparent 30%);
  font-weight: 500;
}
.green-highlight {
  background: linear-gradient(to top, #ACDDB2 20%, transparent 30%);
  font-weight: 500;
}
.blue-highlight {
  background: linear-gradient(to top, #BDF2FF 20%, transparent 30%);
  font-weight: 500;
}
.purple-highlight {
  background: linear-gradient(to top, #D4B7FF 20%, transparent 30%);
  font-weight: 500;
}


/**
レスポンシブ1200px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー**/
@media (max-width:1200px) {

  /*　編集画面の幅を広げる　*/
  .editor-styles-wrapper {
    padding: 0 10%;
  }

}

/**
レスポンシブ800px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー**/
@media (max-width:800px) {

  /*　編集画面の幅を広げる　*/
  .editor-styles-wrapper {
    padding: 0 5%;
  }

  /*
  各ブロックの指定
  -----------------------------------------*/
  /* タイトル */
  .article h1,
  .editor-styles-wrapper h1 {
    font-size: 1.8em;
    display: block;
  }

  /* 大見出し */
  .my-post h2,
  .editor-styles-wrapper .is-root-container h2 {
    font-size: 1.6em;
    /* 上下線 */
    letter-spacing: normal;
  }

  /* 小見出し */
  .my-post h3,
  .editor-styles-wrapper .is-root-container h3 {
    font-size: 1.5em;
  }
  .my-post h3::before,
  .editor-styles-wrapper .is-root-container h3::before {
    width: 28px;
    height: 28px;
  }
  .my-post h3::after,
  .editor-styles-wrapper .is-root-container h3::after {
    width: 16px;
    height: 16px;
    left: 14px;
    bottom: 1px;
  }

  /* h4 */
  .my-post h4,
  .editor-styles-wrapper .is-root-container h4 {
    font-size: 1.2em;
  }

  /* 番号無しリスト */
  .my-post ul,
  .editor-styles-wrapper .is-root-container ul {
    font-size: 1.1em;
  }

  .my-post ul li::before,
  .editor-styles-wrapper .is-root-container ul li::before {
    font-size: 1.1em;
    top: 1px;
  }


  /* 番号ありリスト */
  .my-post ol,
  .editor-styles-wrapper .is-root-container ol {
    font-size: 1.1em;
  }
  .my-post ol li,
.editor-styles-wrapper .is-root-container ol li {
  margin-top: 30px;
}
}