/* =====================================
Media & News
===================================== */

.media-news {

  width: min(1200px, 92%);
  margin: 140px auto;

  padding: 90px 80px;

  background: #F8F6F1;

  border-radius: 34px;

}

/* タイトル */

.media-news .section-heading {

  text-align: center;

  margin-bottom: 55px;

}

.media-news .line {

  width: 70px;

  height: 2px;

  background: #666;

  margin: 0 auto 28px;

  display: block;

}

.media-news h2 {

  font-size: clamp(34px, 3vw, 48px);

  font-weight: 500;

  color: #5b5552;

}

.media-news h2 span {

  font-size: .65em;

  font-weight: 400;

  color: #8f8f8f;

}

/* 説明 */

.media-description {

  max-width: 700px;

  margin: 0 auto 70px;

  text-align: center;

  line-height: 2;

  color: #666;

}

/* 一覧 */

.media-list {

  border-top: 1px solid #ddd;

}

/* 記事 */

.media-item {

  display: flex;

  align-items: center;

  gap: 28px;

  padding: 30px 0;

  border-bottom: 1px solid #e5e5e5;

  text-decoration: none;

  color: #333;

  transition: .35s;

}

.media-item:hover {

  transform: translateX(8px);

}

/* サムネイル */

.media-thumb {

  width: 170px;

  height: 120px;

  border-radius: 14px;

  overflow: hidden;

  flex-shrink: 0;

}

.media-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .5s;

}

.media-item:hover img {

  transform: scale(1.08);

}

/* 右 */

.media-content {

  flex: 1;

}

.media-date {

  font-size: 14px;

  color: #888;

  margin-bottom: 10px;

}

.media-title {

  font-size: 22px;

  line-height: 1.6;

  font-weight: 500;

}

/* ボタン */

.media-button {

  text-align: center;

  margin-top: 65px;

}

.media-button a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 240px;

  height: 58px;

  border-radius: 999px;

  border: 1px solid #9BA28D;

  text-decoration: none;

  color: #4d5947;

  transition: .35s;

}

.media-button a:hover {

  background: #4d5947;

  color: #fff;

}

/* Loading */

.media-loading {

  text-align: center;

  padding: 40px;

  color: #999;

}

/* スマホ */

@media(max-width:768px) {

  .media-news {

    padding: 60px 25px;

    margin: 90px auto;

  }

  .media-item {

    display: block;

  }

  .media-thumb {

    width: 100%;

    height: 220px;

    margin-bottom: 18px;

  }

  .media-title {

    font-size: 18px;

  }

  .media-description {

    margin-bottom: 40px;

  }

}