/* キャラクターmicroCMS化にあたり追加したCSS */
.p-characterLists__item > a img {
  background: #fff;
}

/* 台詞
全角：（）＝〜
半角：?!･|
*/
.p-characterEyeCatch__line.is-text {
  width: calc(86 / 375 * 100vw);

  i {
    text-orientation: mixed;
    font-style: normal;
  }
}

@media (min-width: 769px) {
  .p-characterEyeCatch__line.is-text {
    width: min(calc(82 / 769 * 100vw), 140px);
    left: 148px;
  }
}
@media (min-width: 1250px) {
  .p-characterEyeCatch__line.is-text {
    width: 140px;
  }
}
@scope (.p-characterEyeCatch__line) {
  p {
    color: #fff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: calc(17 / 375 * 100vw);
    font-weight: normal;
    background: var(--themeColor_a);
    padding: 0.6em 0.27em;
    letter-spacing: 0.02em;
    display: inline-block;
    white-space: nowrap;
  }

  p:first-child {
    position: absolute;
    top: 0;
    right: 0;
  }

  p:nth-child(2) {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  @media (min-width: 769px) {
    p {
      /* 画面サイズ 769pxのときに18pxになるようvwを使用、最大30px min */
      font-size: min(calc(17 / 769 * 100vw), 30px);
    }
  }

  @media (min-width: 1250px) {
    p:first-child {
      top: 10%;
    }

    p:nth-child(2) {
      bottom: 10%;
    }
  }
}