@charset "utf-8";
.news__inner {
}

@media screen and (min-width: 768px) {
  .news__inner {
    max-width: calc(1150px + 40px * 2);
  }
}

.news__category-wrapper .webgene-blog {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .news__category-wrapper .webgene-blog {
    justify-content: flex-start;
  }
}

.news__category-link {
  display: block;
  color: var(--white-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  padding: 12px 21px;
  background: var(--purple-color);
  border-radius: 27px;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .news__category-link {
    padding: 17px 56px;
  }
}

.news__category-link:hover {
  background: #d0d0e6;
  color: var(--sub-color);
}

.news__container {
  margin-top: 60px;
  background: var(--white-color);
  border-radius: 40px;
  padding: 80px 20px;
}

@media screen and (min-width: 768px) {
  .news__container {
     padding: 80px 40px;
  }
}

@media screen and (min-width: 900px) {
  .news__container {
    padding: 120px 125px;
  }
}

.news__link {
  display: block;
  padding-block: 30px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.news__link:first-of-type {
  border-top: 1px solid #e8e8e8;
}

.news__link::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: url(../images/arrow.svg) no-repeat center center/contain;
  width: 11px;
  height: 12px;
  transition: all 0.3s ease;
}

.news__link:hover::after {
  right: -5px;
}

.news__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news__date {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.6;
}

.news__label {
  color: var(--white-color);
  background: var(--title-color);
  border-radius: 11px;
  padding: 3px 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.6;
}

.news__title {
  width: 90%;
  margin-top: 17px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--sub-color);
  display: -webkit-box; /* Safariや古いChrome用 */
  -webkit-box-orient: vertical; /* 縦方向に配置 */
  overflow: hidden; /* はみ出した部分を隠す */
  -webkit-line-clamp: 2; /* 行数を2に制限 (Safari用) */
  line-clamp: 2;
}


/* ---------------------
detail
----------------------- */
.news__container--detail.news__container {
  border-radius: 20px;
  padding: 80px 20px;
}

@media screen and (min-width: 900px) {
  .news__container--detail.news__container {
    padding: 140px 102px;
  }
}

.news__detail-tag-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news__detail-heading {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 32px;
  color: var(--sub-color);
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 21px;
  display: flex;
  align-items: center;
  gap: 21px;
}

@media screen and (min-width: 900px) {
  .news__detail-heading {
    margin-top: 60px;
    font-size: 22px;
  }
}

.news__detail-heading::before {
  content: "";
  width: 8px;
  height: 34px;
  background: var(--title-color);
}

.news__detail-body {
}

.news__detail-body p {
  margin-top: 30px;
  letter-spacing: 0.08em;
  line-height: 2.2;
}

@media screen and (min-width: 900px) {
  .news__detail-body p {
    margin-top: 46px;
  }
}

.news__detail-body p + p {
  margin-top: 25px;
}

@media screen and (min-width: 900px) {
  .news__detail-body p + p {
    margin-top: 40px;
  }
}

.news__detail-body h3 {
  margin-top: 34px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 29px;
  color: var(--sub-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

@media screen and (min-width: 900px) {
  .news__detail-body h3 {
    margin-top: 84px;
    font-size: 20px;
  }
}

.news__detail-body h3::before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--title-color);
  border-radius: 50%;
}

.news__detail-body img {
  margin-inline: auto;
  aspect-ratio: 591/281;
  object-fit: cover;
  width: 100%;
  max-width: 591px !important;
  border-radius: 10px;
  margin-top: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 900px) {
  .news__detail-body img {
    margin-top: 81px;
  }
}

.news__detail-btn {
  margin-top: 60px;
  text-align: center;
}

@media screen and (min-width: 900px) {
  .news__detail-btn {
    margin-top: 80px;
  }
}

.news__detail-btn-link {
  display: inline-block;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 20px;
  color: #512f8f;
  background: #e4e4f0;
  border-radius: 30px;
  padding: 13px 69px;
}