@charset "UTF-8";

.main {
  /* =====================
    NEWS 一覧
  ===================== */
  .news {
    position: relative;
    padding-block-start: 148px;
    padding-block-end: 160px;

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

  /* =====================
    NEWS アコーディオン
  ===================== */
  .news-list {
    position: relative;
    margin-block-start: 72px;
    padding-inline: 40px;

    @media (width <= 768px) {
      padding-inline: 0;
    }
    & > li {
      border-block-end: solid 1px #b7b7b7;

      &:first-child {
        border-block-start: solid 1px #b7b7b7;
      }

      section {
        position: relative;
        padding-block: 40px;
        padding-inline: 40px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw);
        }
        /* ==== タイトル ==== */
        .news-title {
          position: relative;
          display: block grid;
          row-gap: 10px;

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

          .date {
            position: relative;
            color: #747474;
          }
          .title {
            position: relative;
          }
        }
        /* ==== アコーディオンで現れるエリア ==== */
        .news-box {
          display: none;
          padding-block-start: 30px;

          @media (width <= 768px) {
            padding-block-start: calc((100 / 390) * 24 * 1vw);
            padding-inline-start: 0;
          }

          & p + p {
            margin-block-start: 1.8em;

            @media only screen and (width <= 768px) {
              margin-block-start: 1em;
            }
          }
        }
      }
    }
  }

  /* ==== 右の十字 ==== */
  .section:has(.news-box) {
    &:before,
    &:after {
      content: '';
      position: absolute;
      margin: auto;
      box-sizing: border-box;
      vertical-align: middle;
    }
    &:before {
      border-top: 1px solid var(--primary);
      width: 35px;
      height: 0;
      top: 0;
      bottom: 0;
      right: 42.5px;
    }
    &:after {
      border-left: 1px solid var(--primary);
      width: 0;
      height: 35px;
      top: 0;
      bottom: 0;
      right: 59px;
      transition: 0.3s;
    }

    @media (width <= 768px) {
      &:before {
        border-top: calc((100 / 390) * 2 * 1vw) solid var(--primary);
        width: calc((100 / 390) * 24 * 1vw);
        right: calc((100 / 390) * 8 * 1vw);
      }
      &:after {
        border-left: calc((100 / 390) * 2 * 1vw) solid var(--primary);
        height: calc((100 / 390) * 24 * 1vw);
        right: calc((100 / 390) * 18 * 1vw);
      }
    }
  }
  /*　closeというクラスがついたら形状変化　*/
  .section:has(.news-box).close:after {
    height: 0;
  }
}