@charset "UTF-8";
.news-page-top {
  background-color: #fff;
  display: flex;
  gap: 7vw;
  flex-direction: column-reverse;
}
.news-page-top .news-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.news-page-top .news-left .news-box {
  padding: 24px 0;
  border-bottom: solid 1px #D5D5D5;
  transition: 0.3s;
  display: flex;
  width: 100%;
  align-items: center;
  -moz-column-gap: 4vw;
       column-gap: 4vw;
}
.news-page-top .news-left .news-box img {
  width: 160px;
  aspect-ratio: 1/1;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}
.news-page-top .news-left .news-box .news-content-box {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  row-gap: 16px;
  display: flex;
}
.news-page-top .news-left .news-box .news-content-box .news-content {
  margin-right: 30px;
  display: flex;
  align-items: center;
}
.news-page-top .news-left .news-box .news-content-box .news-content .news-date {
  font-size: 13px;
  color: #00A99D;
  margin-right: 25px;
}
.news-page-top .news-left .news-box .news-content-box .news-content .news-category {
  background-color: #00A99D;
  border-radius: 50px;
  padding: 4px 15px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
.news-page-top .news-left .news-box .news-content-box .news-title {
  font-size: 17px;
  color: #1E1E1E;
  overflow: hidden; /* はみ出した部分を非表示 */
  text-overflow: ellipsis; /* 「…」を表示 */
  letter-spacing: 1px;
  font-weight: 600;
  transition: 0.3s;
}
.news-page-top .news-left .news-box:hover {
  transition: 0.3s;
}
.news-page-top .news-left .news-box:hover .news-title {
  color: #00A99D;
  transition: 0.3s;
}

.news-page-category {
  width: 170px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}
.news-page-category .heading {
  color: #1E1E1E;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 16px */
  letter-spacing: 0.64px;
  padding: 13px 0;
  border-bottom: solid 1px #D5D5D5;
}
.news-page-category .category-container li {
  gap: 16px;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.news-page-category .category-container li .category-btn {
  padding: 8px 0;
  color: #5A5A5A;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.56px;
  transition: 0.3s;
}
.news-page-category .category-container li .category-btn:hover {
  color: #00A99D;
  transition: 0.3s;
}
.news-page-category .category-container li .category-btn.taiko:hover {
  color: #00B761;
}
.news-page-category .category-container li .category-btn.sugar:hover {
  color: #2ECC71;
}
.news-page-category .category-container li .category-btn.suzu:hover {
  color: #66D19E;
}

.pagination {
  text-align: center;
  margin-top: 80px;
}
.pagination ul {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0;
}
.pagination li .page-numbers {
  background-color: #5A5A5A;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 14px;
  font-weight: 600;
  height: 50px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination li .page-numbers:hover {
  background-color: #00A99D;
  transition: 0.3s;
}
.pagination li .page-numbers.current {
  background-color: #00A99D;
  color: #fff;
  pointer-events: none;
}

.news-single-top {
  margin-top: 130px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 45px 10px;
}
.news-single-top .heading-box {
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}
.news-single-top .heading-box .s-title {
  color: #1E1E1E;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.96px;
  margin-bottom: 21px;
  font-family: "roboto", sans-serif;
}
.news-single-top .heading-box .title {
  color: #1E1E1E;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1.6px;
}

.news-single {
  background-color: #fff;
  display: flex;
  gap: 33px;
  flex-direction: column-reverse;
}
.news-single .news-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.news-single .news-content .view-btn-parent {
  justify-content: center;
  margin-top: 150px;
}
.news-single .news-content .news-content-top {
  border-bottom: solid 1px #D5D5D5;
  padding: 13px 0;
  gap: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 65px;
}
.news-single .news-content .news-content-top .top {
  display: flex;
  align-items: center;
  gap: 26px;
}
.news-single .news-content .news-content-top .top .date {
  color: #5A5A5A;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.56px;
}
.news-single .news-content .news-content-top .top .category {
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.52px;
  background-color: #00A99D;
  padding: 2px 16px;
  border-radius: 30px;
  white-space: nowrap;
}
.news-single .news-content .news-content-top .bottom {
  color: #1E1E1E;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 1.6px;
}
.news-single .news-content strong {
  margin-top: 20px;
  display: block;
}/*# sourceMappingURL=news-sp.css.map */