.astra-news {
  padding-top: 240px;
  position: relative;
  z-index: 1;

  @media screen and (max-width: 768px) {
    padding-top: 70px;
  }

  .section-container {

    .astra-news-inner {
      display: flex;
      /*
       * flex-start だと、見出し側の装飾線(box)+margin分だけ「News」が
       * 記事の日付/タイトルより下にズレる。box を absolute で流れから外し、
       * baseline で「News」と「2026.08.08」のテキストの高さそのものを揃える。
       */
      align-items: baseline;
      margin-bottom: 200px;

      @media screen and (max-width: 768px) {
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 90px;
      }

      .left {
        width: 260px;

        .astra-section-title {
          position: relative;
        }

        .astra-section-title__box {
          /* 流れから外し、baseline 計算が「News」のテキストを見るようにする。
             見た目の位置は元のまま(box 8px + margin-bottom 14px 分、上に置く)。 */
          position: absolute;
          top: -22px;
          left: 0;
        }

        .left__more-button {
          margin-top: 68px;

          @media screen and (max-width: 768px) {
            display: none;
          }

          .more-button {
            width: 214px;
            height: 56px;
            border: 2px solid #4EC3E1;
            border-radius: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            color: #4EC3E1;
            text-decoration: none;
            background-color: transparent;
            font-family: var(--astra-source-code-pro), monospace;
            font-size: 24px;
            font-weight: var(--astra-font-weight-regular);
            cursor: pointer;

            @media screen and (max-width: 768px) {
              width: 75px;
              height: 36px;
              font-size: 14px;
              font-weight: var(--astra-font-weight-light);
            }

            /*
             * 日本語は「もっと見る」で、英語の「More」より横に長い。幅を固定した
             * ままだと文字が折り返し、高さの決まった枠から縦にはみ出す。日本語の
             * ときだけ、元の幅を下限にして中身にあわせて伸ばす（英語表示には
             * lang-ja が付かないので、英語の見た目は変わらない）。
             */
            body.lang-ja & {
              width: fit-content;
              min-width: 214px;
              padding-inline: 24px;
              white-space: nowrap;
            }

            .more-button__arrow {
              width: 48px;
              display: block;

              svg {
                width: 100%;
                display: block;
              }
            }
          }
        }
      }

      .right {
        flex: 1;
        max-width: 560px;

        @media screen and (max-width: 768px) {
          max-width: none;
        }

        .news-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 48px;

          .news-list__item {
            display: flex;
            align-items: center;
            gap: 80px;

            @media screen and (max-width: 768px) {
              flex-wrap: wrap;
              gap: 0;
            }

            .news-list__item--date {
              width: 90px;
              color: var(--astra-gray);
              font-size: 16px;
              font-family: var(--astra-source-code-pro), monospace;

              @media screen and (max-width: 768px) {
                width: 100%;
                text-align: left;
              }
            }

            .news-list__item--title {
              flex: 1;
              font-size: 18px;
              font-family: var(--astra-notosansjp), sans-serif;
              color: white;
              margin: 0;
              text-align: left;
            }
          }
        }
      }
    }

    .sp-more-button {
      display: none;

      @media screen and (max-width: 768px) {
        display: block;
      }

      .more-button {
        width: 214px;
        height: 56px;
        margin-inline: auto;
        margin-bottom: 90px;
        border: 2px solid #4EC3E1;
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        color: #4EC3E1;
        text-decoration: none;
        background-color: transparent;
        font-family: var(--astra-source-code-pro), monospace;
        font-size: 24px;
        font-weight: var(--astra-font-weight-regular);
        cursor: pointer;

        /*
         * SP で出るのはこちらのボタン（PC 側の .left__more-button は隠れる）。
         * ここは SP でも PC と同じ 24px のままなので、縮める指定は持たない。
         *
         * 日本語は「もっと見る」で、英語の「More」より横に長い。幅を固定した
         * ままだと文字が折り返し、高さの決まった枠から縦にはみ出す。日本語の
         * ときだけ、元の幅を下限にして中身にあわせて伸ばす（英語表示には
         * lang-ja が付かないので、英語の見た目は変わらない）。
         */
        body.lang-ja & {
          width: fit-content;
          min-width: 214px;
          padding-inline: 24px;
          white-space: nowrap;
        }
      }

    }
  }
}