.c_article-template {
  max-width: 860px;
  margin-inline: auto;

  .article-template__hero-adapt.media {
    padding-bottom: 0 !important;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-height: 596px;
      max-width: 740px;
      object-fit: contain;
      position: relative;
    }
  }

  .article-template__title {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    color: #333;
    margin-bottom: 8px;
    @media (max-width: 699px) {
      font-size: 24px;
      font-weight: 700;
      line-height: 160%;
    }
  }

  .circle-divider {
    display: flex;
    height: fit-content;
    time {
      font-size: 16px;
      font-weight: 400;
      line-height: 180%; /* 28.8px */
      letter-spacing: 0.32px;
      color: var(--c_color-main);
    }
  }

  .page-width {
    margin-bottom: 60px;
    margin-top: 0 !important;
  }

  .page-width--narrow {
    @media (max-width: 999px) {
      padding-inline: 20px;
    }
  }

  .article-template__hero-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 60px;
    @media (max-width: 999px) {
      padding-inline: 20px;
    }
  }
  /* 投稿部分 */
  .article-template__content {
    margin-top: 0;
    margin-bottom: 0;
    & > * {
      margin-top: 16px;
    }
    & > *:first-child {
      margin-top: 0;
    }

    h2 + * {
      margin-top: 49px;
      @media (max-width: 699px) {
        margin-top: 16px;
      }
    }

    p:has(span[style*="color:"]:not([style*="background-color:"])) {
      margin-top: 8px;
    }
    strong {
      font-size: 28px;
      font-weight: 600;
      line-height: 42px;
      @media (max-width: 699px) {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
      }
    }
    & > p {
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 180%; /* 28.8px */
      letter-spacing: 0.32px;
      @media (max-width: 699px) {
        letter-spacing: 0;
      }

      span[style*="background-color:"] {
        background-color: transparent !important;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%;
        display: inline;
        --marker-color: rgb(255, 229, 86, 0.3);
        background:
          linear-gradient(to right, var(--marker-color), var(--marker-color)) no-repeat,
          transparent;
        background-size: 100% 30%;
        background-position: 0 100%;

        @media (max-width: 699px) {
          font-size: 18px;
        }
      }

      span[style*="color:"]:not([style*="background-color:"]) {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%;
        @media (max-width: 699px) {
          font-size: 18px;
        }
      }
    }

    img {
      width: 100%;
      margin: 0;
    }

    h2 {
      margin-top: 60px;
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: 160%;
      padding-left: 16px;
      border-left: 3px solid var(--c_color-main);
      @media (max-width: 699px) {
        font-size: 24px;
      }
    }

    h3 {
      font-size: 28px;
      font-style: normal;
      font-weight: 600;
      line-height: 42px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--c_color-main);
      @media (max-width: 699px) {
        font-size: 20px;
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-left: 0;
      li {
        display: flex;
        gap: 4px;
        &::before {
          content: "";
          background: url(./icon_check-circle.svg) no-repeat center;
          background-size: cover;
          display: inline-block;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          translate: 0 2px;
        }
      }
    }

    li {
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 160%;
    }

    .c_blog-detail__two-column {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      @media (max-width: 699px) {
        margin-top: 32px;
        flex-direction: column;
        gap: 0;
      }

      img {
        flex: 1 1 0;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
        min-width: 0;
        max-width: 400px;
        @media (max-width: 699px) {
          max-width: 100%;
        }
      }
    }

    .c_blog-detail__two-column-body {
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
      max-width: 400px;
      & > * {
        margin-top: 16px;
      }
      & > *:first-child {
        margin-top: 0;
      }
      @media (max-width: 699px) {
        max-width: 100%;
      }
    }

    table {
      margin-top: 32px;
      max-width: 100%;
      font-size: 16px;
      font-weight: 400;
      line-height: 180%; /* 28.8px */
      letter-spacing: 0.32px;

      tr > td:nth-of-type(1) {
        min-width: 120px;
      }
    }
  }

  .article-template__back {
    display: none;
  }
}