.speech-highlight.natural .playing.mask {
  color: transparent;
}

.mark-circle {
  display: inline-block;
  position: relative;
  background-color: #21bdbd;
  color: #fff;
  width: 2.8rem;
  height: 2.8rem;
  line-height: calc(2.8rem + 0.15em);
  /* 0.15emは調整分 */
  border-radius: 50%;
  text-align: center;
  font-size: 2rem;
}

body.ve1 .mark-circle {
  display: inline-block;
  position: relative;
  background-color: #f58220;
  color: #fff;
  width: 2.8rem;
  height: 2.8rem;
  line-height: calc(2.8rem + 0.15em);
  border-radius: 50%;
  text-align: center;
  font-size: 2rem;
}

.mark-box {
  background-color: #f58220;
  color: white;
  padding: 4px 12px 2px 12px;
  border-radius: 30px;
}

.mark-diamond {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  transform: rotate(45deg);
  background-color: #21bdbd;
  padding: 0;
  border-radius: 0;
}

.small-title {
  font-size: 0.9em;
}

.mark-cBrown {
  color: #f58220;
}

.mark-bigBrown {
  color: #f58220;
  font-size: 1.5em;
  line-height: 1.2em;
}

span.mask-en:not(.mask) .mask-underline {
  border-bottom: 2px solid #6f6f6f;
}

.underline {
  border-bottom: 2px solid #6f6f6f;
}

/*underline without mask*/
span.mask-en:not(.mask) .underline-char {
  border-bottom: 2px solid #000;
}

.sound:not(.playing) .mask-en:not(.mask) .red:not(.mask),
.red-punctuation:not(.mask) {
  color: #ff4b00;
  /*再生時に文字の一部が取り残される事象の対処*/
  text-shadow: 0 0 1em rgba(0, 0, 0, 0);
}

.sound:not(.playing) .mask-en:not(.mask) .blue:not(.mask),
.sound:not(.playing) .blue:not(.mask),
.blue-note {
  color: #09c;
}

.blue-green-theme span.title,
.blue-green-theme span.filled-circle {
  color: #00adb5;
}

.green-num {
  color: #1eb88e;
}

.blue-num {
  color: #1fb0e6;
}

.purple-num {
  color: #8781bd;
}

.pink-num {
  color: #f499c2;
}

span.filled-circle {
  font-size: 1.5em;
  line-height: 1.1;
}

div.grid {
  display: grid;
  grid-template-columns: 3.5rem calc(100% - 3.5rem);
}

div.grid.indent div:nth-child(odd) {
  width: 3rem;
  text-align: center;
}

div[id^="title"] {
  display: flex;
}

div[id^="title"] div {
  display: inline-block;
}

span.mark-circle {
  margin-right: 10px;
}

.normal-font,
.vista-normal-font {
  font-weight: normal;
}

#expression .jp {
  font-size: 0.9em;
}

#expression .mask-jp {
  font-size: inherit;
  padding-top: 0.1em;
}

.sub {
  font-size: 0.7em;
}

#expression .sub-title {
  display: block;
  margin-bottom: 0.8em;
}

.daily-conversation .exp-num {
  color: #7f79b9;
}

.activity-lesson .exp-dot.green {
  color: #25bcad;
}

.activity-lesson .exp-dot.red {
  color: #f27b89;
}

.activity-lesson .exp-dot.blue {
  color: #6c8cc7;
}

.activity-lesson .sub-title .title-sq,
.activity-lesson .sub-title .title-ci {
  color: #fff;
}

.activity-lesson .sub-title .title-sq {
  padding: 0 0.3em;
  margin-bottom: 0.2em;
  display: block;
}

.activity-lesson .sub-title .title-ci {
  padding: 0 0.6em;
  border-radius: 1em;
  display: inline-block;
}

.activity-lesson .sub-title.green .title-sq,
.activity-lesson .sub-title.green .title-ci {
  background-color: #25bcad;
}

.activity-lesson .sub-title.red .title-sq,
.activity-lesson .sub-title.red .title-ci {
  background-color: #f27b89;
}

.activity-lesson .sub-title.blue .title-sq,
.activity-lesson .sub-title.blue .title-ci {
  background-color: #6c8cc7;
}

.activity-lesson .sub-title.yellow .title-sq,
.activity-lesson .sub-title.yellow .title-ci {
  background-color: #fba61c;
}

.ce1-brushup-num {
  position: relative;
  font-size: 0.9em;
  margin-right: 0.8em;
}

.ce1-brushup-num::after {
  content: "";
  display: block;
  width: 3em;
  height: 3em;
  position: absolute;
  top: -0.4em;
  left: -0.2em;
  background-image: url(../images/ce1-brushup-num.png);
  background-repeat: no-repeat;
  background-size: 1.5em;
  z-index: -1;
}

.ce1-column-num {
  position: absolute;
  color: #eb6ea5;
  background-color: #fff;
  height: calc(100% + 0.3em);
  width: 1.4em;
  display: inline-block;
  padding-top: 0.4em;
  padding-left: 0.4em;
  text-indent: 0;
  left: 1em;
  top: -0.2em;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.3);
}

.ce1-column-num::before {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 1.4em;
  height: 0.3em;
  left: 0em;
  bottom: -0.2em;
}

.ce1-column-num::after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 1.4em;
  height: 0.3em;
  left: 0em;
  top: -0.3em;
}

.ce1-column-num.dig-2 {
  padding-left: 0.1em;
}

.ce1-column-triangle {
  position: relative;
  margin-right: 1.6em;
}

.ce1-column-triangle::after {
  content: "";
  display: block;
  position: absolute;
  top: -0.05em;
  left: 0;
  border: 0.5em solid transparent;
  border-left: 1.2em solid #9fa0a0;
}

.ce1-column-circle-num {
  display: block;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  box-shadow: 0.05em 0.05em 0.2em rgba(0, 0, 0, 0.3),
    -0.05em -0.05em 0.2em rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.1em;
  box-sizing: border-box;
}

.ce1-column-circle-num.gray {
  background-color: #eeefef;
}

.indent-1 {
  display: inline-block;
  text-indent: -1em;
  margin-left: 1em;
}

.indent-16 {
  display: inline-block;
  text-indent: -1.6em;
  margin-left: 1.6em;
}

.ml-16 {
  display: inline-block;
  margin-left: 1.6em;
}

.ce1-appx-brushup-num {
  position: relative;
  display: inline-block;
  font-size: 0.7em;
  margin-left: 7.2em;
  margin-right: 2.8em;
  margin-bottom: 1em;
  color: #595757;
}

.ce1-appx-brushup-num::after {
  content: "";
  display: block;
  width: 11em;
  height: 3em;
  position: absolute;
  top: -0.6em;
  left: -7.6em;
  background-image: url(../images/ce1-appx-brushup-num.png);
  background-repeat: no-repeat;
  background-size: 10em;
  z-index: -1;
}

.ce1-appx-tag {
  position: relative;
  font-size: 0.7em;
  width: 11em;
  display: inline-block;
  text-align: center;
  color: #595757;
}

.ce1-appx-tag::after {
  content: "";
  display: block;
  width: 11em;
  height: 3em;
  position: absolute;
  top: -0.4em;
  left: 0.2em;
  background-image: url(../images/ce1-appx-tag.png);
  background-repeat: no-repeat;
  background-size: 10em;
  z-index: -1;
}