@charset "UTF-8";

.main {
  .news {
    padding-block: 130px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 98 * 1vw) calc((100 / 750) * 120 * 1vw);
    }

    .inner {
      width: 1300px;
      margin-inline: auto;
      padding-inline: 150px;

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

      /* =====================
        NEWS アコーディオン
      ===================== */
      .news-list {
        margin-block-start: 58px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 54 * 1vw);
        }
        & > li {
          border-top: 1px solid #d2d2d2;
          &:last-child {
            border-bottom: solid 1px #d2d2d2;
          }

          section {
            position: relative;
            cursor: pointer;
            padding-inline: 30px;
            padding-block: calc(39px + var(--leading-trim));

            @media (width <= 768px) {
              padding-inline: 0 calc((100 / 750) * 110 * 1vw);
              padding-block: calc(calc((100 / 750) * 50 * 1vw) + var(--leading-trim));
            }

            /* ==== 右の十字 ==== */
            &:before,
            &:after {
              content: '';
              position: absolute;
              margin: auto;
              box-sizing: border-box;
              vertical-align: middle;
              top: 50%;
              transform: translateY(-50%);
            }
            &:before {
              border-top: 2px solid #999;
              width: 40px;
              height: 0;
              right: 30px;
            }
            &:after {
              border-left: 2px solid #999;
              border-radius: 50rem;
              width: 0;
              height: 40px;
              right: 50px;
              transition: 0.3s;
            }

            @media (width <= 768px) {
              &:before {
                border-top: calc((100 / 750) * 4 * 1vw) solid #999;
                width: calc((100 / 750) * 60 * 1vw);
                right: 0;
              }
              &:after {
                border-left: calc((100 / 750) * 4 * 1vw) solid #999;
                border-radius: 50rem;
                height: calc((100 / 750) * 60 * 1vw);
                right: calc((100 / 750) * 28 * 1vw);
              }
            }
            /*　closeというクラスがついたら形状変化　*/
            &.close {
              &::before,
              &::after {
                transform: translateY(-50%) rotate(45deg);
              }
            }
          }
          /* ==== タイトル ==== */
          .news-title {
            position: relative;
            font-weight: 500;

            .date {
              color: #747474;
            }
            .title {
              @media (width <= 768px) {
                line-height: 1.77;
              }
            }
          }
          /* ==== アコーディオンで現れるエリア ==== */
          .news-box {
            display: none;
            & > p {
              @media (width <= 768px) {
                line-height: 1.77;
              }
            }
          }
        }
      }
    }
  }
}