@charset "UTF-8";

/* =====================
  MV
===================== */
.mv {
  background-image: url("../../img/news/mv.png");
}

/* =====================
  NEWS
===================== */
.article[data-id='1'] {
  padding-top: calc((100 / 750) * 99 * 1vw);
  padding-bottom: calc((100 / 750) * 104 * 1vw);
}

.article[data-id='1'] .news-list {
  margin-top: calc((100 / 750) * 64 * 1vw);
}

.article[data-id='1'] .news-list ul li {
  background-color: #fff;
  border-top: 1px solid #c9c9c9;
}

.article[data-id='1'] .news-list ul li:last-child {
  border-bottom: 1px solid #c9c9c9;
}


.article[data-id='1'] .news-list ul li .news-title {
  position: relative;
  cursor: pointer;
  padding-inline: calc((100 / 750) * 20 * 1vw);
  padding-block: calc((100 / 750) * 40 * 1vw);
}

/*アイコンの＋と×*/

.news-title::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../../img/common/btn_arrow_2x.png");
  width: calc((100 / 750) * 80 * 1vw);
  height: calc((100 / 750) * 80 * 1vw);
  position: absolute;
  top: 50%;
  right: 0;
  transition: all .5s ease;
  transform: translateY(-50%) rotate(180deg);
}

/*　closeというクラスがついたら形状変化　*/

.news-title.close::after {
  transform: translateY(-50%);
}

.article[data-id='1'] .news-list ul li .news-title .date {
  font-weight: bold;
  color: #0d3c68;
}


/*アコーディオンで現れるエリア*/
.box {
  display: none;
  /*はじめは非表示*/
  padding-inline: calc((100 / 750) * 20 * 1vw);
  padding-bottom: calc((100 / 750) * 48 * 1vw);
}

.article[data-id='1'] .news-list ul li h3 {
  font-weight: bold;
  margin-top: calc((100 / 750) * 16 * 1vw);
}