#content-wrapper > * {
  margin-inline: 0.5rem;
}

#content-wrapper,
.editor-styles-wrapper {
  * {
    font-family: YakuHanJP, Lato, Noto Sans JP, sans-serif;
  }

  p {
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.75;
  }

  *:not(.has-text-color) {
    color: #111827; /**gray-900**/
  }

  a {
    text-decoration: underline;
    text-decoration-color: #34A394;
    text-underline-offset: 0.25rem;
  }

  a:hover {
    color: #34A394;
  }

  h2:not(.has-text-color),
  h3:not(.has-text-color),
  h4:not(.has-text-color),
  h5:not(.has-text-color) {
    color: oklch(27.8% 0.033 256.848);
  }

  .has-background {
    padding: 0.75rem 1.25rem;
    border-radius: 0.125rem;
    margin-bottom: 1rem;
  }

  .has-background .wp-block-group__inner-container > *:first-child {
    margin-top: 0rem;
  }

  .has-background .wp-block-group__inner-container > *:last-child {
    margin-bottom: 0rem;
  }

  h2 {
    font-size: 1.25rem;
    margin-inline: auto;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    padding-left: 0.5rem;
    border-left: 0.375rem solid #34A394;
  }

  h2:not(.has-background) {
    background-color: #F3F4F6;
  }

  h3 {
    font-size: 1.125rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 0.25rem;
  }

  h3::before {
    content: '';
    position: absolute;
    background: #34A394;
    background: linear-gradient(90deg, rgba(52, 163, 148, 1) 0%, rgba(52, 163, 148, 1) 15%, rgba(194, 227, 223, 1) 15%, rgba(194, 227, 223, 1) 100%);
    height: 0.125rem;
    inset-inline: 0;
    bottom: 0;
  }

  h3::after {
    content: '';
    position: absolute;
    background-color: #34A394;
    height: 0.125rem;
    width: 12%;
    bottom: 0;
    left: 0;
  }

  h4 {
    font-size: 1.125rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 0.75rem;
  }

  h4::before {
    content: '';
    width: 0.25rem;
    background-color: #34A394;
    position: absolute;
    left: 0;
    inset-block: 0;
    border-radius: calc(infinity * 1px);
  }

  h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    border-bottom: dotted 2px #34a394;
    position: relative;
    padding-left: 1.325rem;
  }

  h5::before {
    background-color: #34a394;
    height: 1.125rem;
    width: 1.125rem;
    content: '';
    border-radius: calc(infinity * 1px);
    position: absolute;
    left: 0;
    top: 0.35rem;
  }

  h5::after {
    background-color: #fff;
    height: 0.6rem;
    width: 0.4rem;
    content: '';
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    left: 0.45rem;
    top: 0.625rem;
  }

  .related-article {
    padding: 1rem;
    background-color: oklch(98.5% 0.002 247.839);
    border: oklch(96.7% 0.003 264.542) 1px solid;
    border-radius: 0.25rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .related-article .related-article__title {
    color: oklch(27.8% 0.033 256.848);
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    margin: 0;
    margin-bottom: 0.125rem;
  }

  .related-article .related-article__title h6 {
    margin: 0;
    flex-shrink: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .related-article .related-article__title figure {
    width: 2rem;
  }

  .related-article .related-article__icon svg {
    width: 1.5rem;
    fill: white;
  }

  .related-article .related-article__list {
    padding-inline-start: 0.25rem;
    margin: 0;
    padding: 0;
  }

  .related-article .related-article__list li {
    position: relative;
    list-style: none;
    margin: 0.5rem 0;
    padding: 0 0 0 1.25rem;
  }

  .related-article .related-article__list li:last-of-type {
    margin-bottom: 0;
  }

  .related-article .related-article__list li::before {
    background-color: #34A394;
    height: 0.6rem;
    width: 0.4rem;
    content: '';
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
  }

  .comment {
    align-items: start;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    column-gap: 1rem;
  }

  .comment figure {
    width: 5rem;
    flex-shrink: 0;
  }

  @media (width >= 40rem /* 640px */) {
      .comment figure {
        width: 7.5rem;
        flex-shrink: 0;
    }    
  }  

  .comment p {
    border: oklch(70.7% 0.022 261.325) 1px solid;
    border-radius: 2px;
    width: 100%;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    margin-block: 0.5rem;
    position: relative;
  }

  @media (width >= 40rem /* 640px */) {
      .comment p {
        min-height: 6rem;
        margin-block: 1rem;
    }    
  } 

  .comment p::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 0;
    border-style: solid;
    border-width: 10px 12px 10px 0;
    border-color: transparent oklch(70.7% 0.022 261.325) transparent transparent;
    translate: -100% -50%;
  }

  .comment p::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 0;
    border-style: solid;
    border-width: 8.7px 10.4px 8.7px 0;
    border-color: transparent white transparent transparent;
    translate: -100% -50%;
  }

    @media (width >= 40rem /* 640px */) {
      .comment p::before,
      .comment p::after{
        top: 2rem;
      }
    }

  .comment-staff {
    flex-direction: row-reverse;
  }

  .comment-staff p {
    border: #34A394 1px solid;
  }

  .comment-staff p::before {
    right: 0;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent #34A394;
    translate: calc(100% - 0.5px) -50%;
  }

  .comment-staff p::after {
    right: 0;
    border-width: 8.7px 0 8.7px 10.4px;
    border-color: transparent transparent transparent white;
    translate: calc(100% - 0.5px) -50%;
  }

  .point-box {
    padding: 0;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .point-box .point-box__title{
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 1rem;
    margin: 0;
    color: white;
    background-color: #34A394;
    width: fit-content;
    margin-block: 0;
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .point-box .point-box__text{
    padding: 0.75rem 1rem;
    background-color: #EBF6F4;
    border: #34A394 2px solid;
    border-radius: 0 0.25rem 0.25rem 0.25rem;
    margin-block: 0;
  }

  .point-box .point-box__text .wp-block-group__inner-container > *:last-child {
    margin-bottom: 0.5rem;
  }

  mark.has-inline-color {
    background: linear-gradient(#fff 60%, transparent 60%);
    padding: 0 0.125rem;
    font-weight: 600;
  }

  /* ステップリンクボタン */
  /* グループブロック全体をリンク範囲にする */
.tips-navigation-btn {
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    width: 100%;
    height: 80px;
    max-width: 660px;
    padding: 1rem;
    background-color: #34A394;
    border-radius: 0.3rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.tips-navigation-btn p{
  margin-top:0 ;
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

.tips-navigation-btn img{
  width: 60%;
}

.tips-navigation-btn figure:last-of-type{
  position: absolute;
  right: 1rem;
}

.tips-navigation-btn p a{
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

/* 中にあるリンクタグの範囲を擬似要素で広げる */
.tips-navigation-btn p a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
}

/* ホバー時の演出（お好みで調整してください） */
.tips-navigation-btn:hover {
    transform: translateX(8px);
}

/*  戻るボタン */
.tips-navigation-btn-prev{
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    width: 100%;
    height: 60px;
    max-width: 660px;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0.3rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border:solid 2px #34A394;
    margin-top: 30px;
}

.tips-navigation-btn-prev p{
  margin-top:0 ;
  margin-bottom: 0;
  font-weight: 600;
  color: #34a394;
}

.tips-navigation-btn-prev p a{
  text-decoration: none;
  color: #34A394;
  font-weight: 600;
}

.tips-navigation-btn-prev a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    text-decoration: none;
}

.tips-navigation-btn-prev:hover {
    opacity: 0.8;
}

}