section {
  padding: 0 10px;
}

.sns-wr {
  margin: 4em auto;
}

/*-------------------------------

    ニュース

-------------------------------*/

/*---------- section ----------*/

.news {
  padding: 0 20px;
}

/*---------- ul ----------*/

.news ul {
  display: grid;
  grid-template-columns: 3fr;
  gap: 1em;
  margin: 2em 0;
}

.news ul li {
  max-width: 400px;
  margin: 0 auto;
}

.news ul li a {
  display: flex;
  flex-flow: row nowrap;
  text-decoration: none;
  gap: 16px;
  font-weight: 600;
}

.news ul li a {
    color: #000;
}
.news ul li a:hover{
    color: var(--main-color);
}

.news ul li img {
  width: 45%;
  object-fit: cover;
  aspect-ratio: 15 / 13;
  background-color: var(--sub-color-darkblue);
  padding: 10px;  
}

.news ul li img.white-logo {
  background: var(--sub-color-darkblue);
  padding: 40px;
  object-fit: contain;
}

.news ul li .news-date {
  margin: 8px 0;
  color: var(--main-color);
}

.news ul li .news-cont {
  line-height: 1.8;
}

.news-link {
  width: 280px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 30px;
  border: 1px solid var(--sub-color-ocher);
  color: var(--sub-color-ocher);
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}

.news-link::after {
  content: '';
  background-image: url(left-arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 30px;
  height: 15px;

}
@media (min-width:650px) {
  .news ul {
    grid-template-columns: 1fr 1fr;
  }
  .news-link {
    margin: 32px auto;
  }
}

@media (min-width:1000px) {
  .news ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .news ul li a {
    flex-flow: column nowrap;
    gap: 16px;
  }
  .news ul li img {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
}


/*-------------------------------

    Youtube

-------------------------------*/

.youtube {
  width: 100%;
  max-width: 530px;
  padding: 0 20px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}