@charset "utf-8";

/* =====================
  reset
===================== */
.aside {
  margin-block: 40px 0;

  @media (width <= 768px) {
    margin-block: calc((100 / 390) * 40 * 1vw) 0;
  }
}

/* =====================
  news
===================== */
& article {
  position: relative;
  z-index: 2;
  max-inline-size: 1281px;
  padding-block: 68px 119px;
  padding-inline: 120px;
  margin-block-start: 110px;
  margin-inline: auto;
  background: rgb(255 255 255 / 80%);
  border-radius: 20px;

  @media not all and (width >=768px) {
    max-inline-size: 90vw;
    padding-block: 16vw;
    padding-block: calc((100 / 390) * 48 * 1vw) 16vw;
    padding-inline: calc((100 / 390) * 20 * 1vw);
    margin-block-start: calc((100 / 390) * 40 * 1vw);
    border-radius: calc((100 / 390) * 20 * 1vw);
  }

  .u-inner {
    @media (width <= 768px) {
      padding-inline: 0;
    }
  }
}

/* =====================
  news-list
===================== */
.news-list {
  display: grid;
  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: #747474;

        @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: 39px;
      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: 29px;

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

.u-link {
  display: block flex;
  gap: 10px;
  align-items: center;
  margin-block-start: 39px;
  margin-inline: auto;
  font-size: 16px;
  font-weight: bold;

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

  &::after {
    display: block flow;
    inline-size: 25px;
    aspect-ratio: 1 / 1;
    content: '';
    background-image: url('../img/_common/more.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

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

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