@charset "utf-8";

.main {
  /* ==== illust ==== */
  &::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: block flow;
    inline-size: 544px;
    aspect-ratio: 544 / 490;
    pointer-events: none;
    content: '';
    background-image: url('../img/_common/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  @media (width <= 768px) {
    &::before {
      inline-size: calc((100 / 390) * 144 * 1vw);
    }
  }

  /* =====================
    news
  ===================== */
  & article {
    padding-block: 109px 180px;

    @media not all and (width >=768px) {
      padding-block: 16vw;
    }
  }

  /* =====================
      news-list
    ===================== */
  .news-list {
    display: grid;
    max-inline-size: 1040px;
    margin-block-start: 51px;
    margin-inline: auto;
    background: white;
    border-block-start: 1px solid #d2d2d2;

    @media not all and (width >= 768px) {
      margin-block-start: 0;
    }

    /* =====================
        details
      ===================== */
    & details {
      position: relative;
      display: grid;
      border-block-end: 1px solid #d2d2d2;

      &[hidden] {
        display: none;
      }

      /* =====================
          summary
        ===================== */
      & summary {
        position: relative;
        display: grid;
        gap: 10px 36px;
        align-items: center;
        justify-content: flex-start;
        padding-block: 40px;
        padding-inline: 40px;
        cursor: pointer;

        @media not all and (width >= 768px) {
          grid-template: auto auto / 1fr auto;
          grid-template-areas:
            'time after'
            'h2 after';
          gap: 0;
          padding-block: 3.7vw;
          padding-inline: calc((100 / 390) * 8 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);

          & h2 {
            grid-area: h2;
            line-height: 1.8;

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

          & time {
            grid-area: time;
          }

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

        & time {
          color: var(--primary);

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

      /* ==== icon ==== */
      &::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 42px;
        grid-column: -1 / -1;
        inline-size: 36px;
        aspect-ratio: 1 / 1;
        content: '';
        background-color: #535353;
        clip-path: inset(0 0 0 0);
        mask-image: var(--icon-plus);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        translate: 0 -50%;
        transition: clip-path 600ms ease 0s;
      }

      @media not all and (width >= 768px) {
        &::after {
          inset-inline-end: 0;
          inline-size: calc((100 / 390) * 36 * 1vw);
        }
      }

      .container {
        display: grid;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        padding-block-end: 48px;
        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: 4vw;
          padding-inline: calc((100 / 390) * 8 * 1vw) 12vw;
          font-size: calc((100 / 390) * 14 * 1vw);
        }

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

    /* open */
    & details[open] {
      &::after {
        background: var(--primary);
        clip-path: inset(48% 0 48% 0);
      }

      .container {
        grid-template-rows: 1fr;
      }

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

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

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

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

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

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

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