@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/news/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/news/mv_sp.png');
    }
  }
  /* =====================
    NEWS 一覧
  ===================== */
  .news {
    position: relative;
    padding-block: 95px 41px;

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

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

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

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

        @media (width <= 768px) {
          padding-inline: calc((100 / 750) * 20 * 1vw);
          padding-block: calc(calc((100 / 750) * 90 * 1vw) + var(--leading-trim)) calc(calc((100 / 750) * 80 * 1vw) + var(--leading-trim));
        }
        /* ==== タイトル ==== */
        .news-title {
          position: relative;
          display: block flex;
          gap: 42px;
          align-items: baseline;

          @media (width <= 768px) {
            display: block flow;
          }

          .date {
            position: relative;
            font-family: var(--league);
            font-weight: 500;
            color: #61d7db;
          }
          .title {
            position: relative;
            font-weight: 500;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 8 * 1vw);
            }
          }
        }
        /* ==== アコーディオンで現れるエリア ==== */
        .news-box {
          display: none;
          padding-block-start: 20px;

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

          & > p {
            line-height: 1.9;
          }
        }
        /* ==== 右の十字 ==== */
      }
    }
  }

  /* ==== 右の十字 ==== */
  .news-title {
    &:before,
    &:after {
      content: '';
      position: absolute;
      margin: auto;
      box-sizing: border-box;
      vertical-align: middle;
    }
    &:before {
      border-top: 2px solid #61d7db;
      width: 24px;
      height: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    &:after {
      border-left: 2px solid #61d7db;
      width: 0;
      height: 24px;
      top: 0;
      bottom: 0;
      right: 11px;
      transition: 0.3s;
    }

    @media (width <= 768px) {
      &:before,
      &:after {
        display: none;
      }
      .date {
        &:before,
        &:after {
          content: '';
          position: absolute;
          margin: auto;
          box-sizing: border-box;
          vertical-align: middle;
        }
        &:before {
          border-top: calc((100 / 750) * 4 * 1vw) solid #61d7db;
          width: calc((100 / 750) * 30 * 1vw);
          height: 0;
          top: 0;
          bottom: 0;
          right: 0;
        }
        &:after {
          border-left: calc((100 / 750) * 4 * 1vw) solid #61d7db;
          border-radius: 50rem;
          height: calc((100 / 750) * 30 * 1vw);
          right: calc((100 / 750) * 12 * 1vw);
          top: 0;
          bottom: 0;
          transition: 0.3s;
        }
      }
    }
  }
  /*　closeというクラスがついたら形状変化　*/
  section.close .news-title:after {
    height: 0;
  }
  @media (width <= 768px) {
    section.close .news-title .date:after {
      height: 0;
    }
  }
}