@charset "UTF-8";

/* =====================
MV
===================== */
.mv {
  background-image: url('../../img/news/mv_2x.png');
}
/* =====================
  NEWS 一覧
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 94 * 1vw);
  padding-bottom: calc((100 / 750) * 120 * 1vw);
}

/* =====================
NEWS アコーディオン
===================== */
.news-list {
  margin-top: calc((100 / 750) * 80 * 1vw);
  li {
    /* ==== 右の十字 ==== */
    section {
      position: relative;
      cursor: pointer;
      padding-inline: calc((100 / 750) * 20 * 1vw);
      padding-block: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 40 * 1vw);
      border-top: 1px solid #e1e1e1;
      &:last-child {
        border-bottom: solid 1px #e1e1e1;
      }
      .news-title {
        position: relative;
        display: flex;
        gap: calc((100 / 750) * 2 * 1vw);
        align-items: baseline;
        flex-direction: column;
        /* ==== 右の十字 ==== */
        &:before,
        &:after {
          content: '';
          position: absolute;
          margin: auto;
          box-sizing: border-box;
          vertical-align: middle;
        }
        &:before {
          border-top: calc((100 / 750) * 4 * 1vw) solid #00699f;
          width: calc((100 / 750) * 32 * 1vw);
          height: 0;
          top: 0;
          bottom: 0;
          right: 0;
        }
        &:after {
          border-left: calc((100 / 750) * 4 * 1vw) solid #00699f;
          border-radius: 50rem;
          width: 0;
          height: calc((100 / 750) * 32 * 1vw);
          top: 0;
          bottom: 0;
          right: calc((100 / 750) * 13 * 1vw);
          transition: 0.3s;
        }
        .date {
          font-family: var(--title);
          font-size: calc((100 / 750) * 30 * 1vw);
          font-weight: 600;
          color: #00699f;
        }
        h3 {
          position: relative;
          font-weight: 500;
        }
      }
      /*アコーディオンで現れるエリア*/
      .news-box {
        display: none;
        /*はじめは非表示*/
        padding-top: calc((100 / 750) * 20 * 1vw);
        line-height: 1.9;
        padding-bottom: calc((100 / 750) * 14 * 1vw);
      }
      /*　closeというクラスがついたら形状変化　*/
      &.close .news-title:after {
        height: 0;
      }
    }
  }
}