@charset "UTF-8";

main .contents {
  padding-block: 98px 104px;
  background: white;

  @media (width <= 768px) {
    padding-block: calc((100 / 750) * 89 * 1vw) calc((100 / 750) * 103 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  /* =====================
    News List
  ===================== */
  .news-list {
    --_border-color: #999;

    display: grid;
    margin-block-start: 88px;
    margin-inline: auto;
    background: white;
    border-block-start: 1px solid var(--_border-color);

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

    /* ==== details ==== */
    & details {
      position: relative;
      display: grid;
      border-block-end: 1px solid var(--_border-color);

      &[hidden] {
        display: none;
      }

      /* ==== summary ==== */
      & summary {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-auto-flow: column;
        gap: 2px 41px;
        align-items: center;
        justify-content: flex-start;
        padding-block: 39px;
        padding-inline: 40px 36px;
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;

        @media not all and (width >= 768px) {
          grid-template: auto auto / 1fr auto;
          grid-template-areas:
            'time after'
            'h2 after';
          gap: 1.9vw 0;
          padding-block: calc((100 / 750) * 36 * 1vw) calc((100 / 750) * 26 * 1vw);
          padding-inline: calc((100 / 750) * 21 * 1vw) calc((100 / 750) * 28 * 1vw);
          font-size: calc((100 / 750) * 28 * 1vw);

          & h2 {
            grid-area: h2;
            line-height: 1.8;
            word-break: break-all;

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

          & time {
            grid-area: time;
          }

          &::after {
            grid-area: after;
          }
        }

        & time {
          font-size: 16px;
          color: #747474;

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

        &::after {
          inline-size: 24px;
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--secondary);
          clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          transition: clip-path 150ms ease 0s;
          will-change: clip-path;
        }

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

      .container {
        display: grid;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        padding-block-end: 20px;
        padding-inline: 40px 100px;
        overflow: hidden;
        transition: grid-template-rows 250ms ease 0ms;
        animation: none;
        will-change: grid-template-rows;

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

        .wrap {
          display: grid;
          grid-template-rows: 0fr;
          grid-auto-flow: row;
          overflow: hidden;
        }
      }
    }

    /* open */
    & details[open] {
      .container {
        grid-template-rows: 1fr;
      }

      & summary {
        padding-block-end: 40px;

        &::after {
          clip-path: polygon(45% 45%, 55% 45%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 55%, 55% 100%, 55% 55%, 0% 55%, 0% 45%, 45% 45%);
        }

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

  .u-link {
    gap: 10px;
    margin-block-start: 59px;
    margin-inline: auto;
    font-size: 16px;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 20 * 1vw);
      margin-block-start: calc((100 / 750) * 59 * 1vw);
      font-size: calc((100 / 750) * 30 * 1vw);
    }

    &::after {
      inline-size: 24px;
      rotate: 0 0 1 90deg;
    }

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

  .more.on {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }
}