@charset "utf-8";

/* =====================
  index
===================== */
.news[data-type='index'] {
  /* ==== Reset ==== */
  .main {
    .background {
      top: 100px;

      @media not all and (width >=768px) {
        top: 0;
      }
    }

    .u-bg {
      padding-block-end: 130px;

      @media not all and (width >=768px) {
        padding-block-end: calc((100 / 750) * 160 * 1vw);
      }

      .u-head {
        position: relative;
        z-index: 2;
        padding-block: 200px 60px;

        @media not all and (width >= 768px) {
          padding-block: 28vw calc((100 / 750) * 60 * 1vw);
        }
      }

      .contents {
        position: relative;
        z-index: 2;
        padding-block-end: 100px;
        text-align: center;

        @media not all and (width >=768px) {
          padding-block-end: calc((100 / 750) * 100 * 1vw);
          padding-inline: calc((100 / 750) * 40 * 1vw);
        }
      }
    }
  }

  .u-bg {
    .news-wrap {
      inline-size: 1060px;

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }
}

/* =====================
  detail
===================== */
.news[data-unique='detail'] {
  .main {
    padding-block: calc(130px + var(--header-height));

    @media not all and (width >=768px) {
      padding-block: calc(((100 / 750) * 100 * 1vw) + var(--header-height));
      overflow: clip;
    }

    :where(.head, .body, .anchor) {
      position: relative;
      z-index: 2;
    }

    .u-inner {
      max-inline-size: 1060px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }

    .u-news li::after {
      display: none;
    }

    .body {
      padding-block: 60px 120px;

      @media not all and (width >=768px) {
        padding-block: calc((100 / 750) * 80 * 1vw) calc((100 / 750) * 130 * 1vw);
      }
    }

    .anchor {
      inline-size: fit-content;
      margin-inline: auto;
    }
  }
}