@charset "utf-8";

.news {
  main::before {
    position: absolute;
    top: 153px;
    left: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: '';
    background-image: url('../img/common/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  @media not all and (width >=768px) {
    main::before {
      top: -42vw;
      background-image: url('../img/common/bg_sp.webp');
      background-size: contain;
    }
  }

  & section {
    padding-block: 70px 180px;

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

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

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

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

        &[hidden] {
          display: none;
        }

        & summary {
          position: relative;
          display: grid;
          grid-template: auto 1fr;
          grid-template-columns: auto;
          grid-auto-flow: column;
          gap: 2px 36px;
          align-items: center;
          justify-content: flex-start;
          padding-block: 28px;
          padding-inline: 29px;
          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: calc((100 / 750) * 46 * 1vw) calc((100 / 750) * 26 * 1vw);
            padding-inline: calc((100 / 750) * 0 * 1vw);
            font-size: calc((100 / 750) * 28 * 1vw);

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

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

            & time {
              grid-area: time;
            }

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

          & time {
            color: #747474;

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

        &::after {
          position: absolute;
          top: 50%;
          right: 36px;
          grid-column: -1 / -1;
          inline-size: 40px;
          aspect-ratio: 1 / 1;
          content: '';
          background-color: #535353;
          mask-image: var(--icon-plus);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          translate: 0 -50%;
          transition: rotate 600ms var(--easeInOutBack) 0s;
        }

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

        .container {
          display: grid;
          grid-template-rows: 0fr;
          grid-template-columns: 1fr;
          padding-block-end: 28px;
          padding-inline: 30px 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: 0 15vw;
            font-size: calc((100 / 750) * 26 * 1vw);
          }

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

      /* open */
      & details[open] {
        &::after {
          background: var(--blue);
          rotate: 0 0 1 45deg;
        }

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

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

          @media not all and (width >= 768px) {
            padding-block: calc((100 / 750) * 42 * 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 / 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;
    }
  }
}