@charset "utf-8";
/* =========================================================================
   blog-custom.css  ― ブログ一覧 / ブログ詳細
   ========================================================================= */

/* ==========================================================================
   1. レイアウト（本文 + 右サイドバー）
   ========================================================================== */
.shine-sec-blog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding-top: 56px;
  padding-bottom: 90px;
}
.shine-blog-main {
  flex: 1 1 520px;
}

.shine-sec-entry {
  padding-top: 34px;
  padding-bottom: 90px;
}
.shine-entry-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}
.shine-entry-main {
  flex: 1 1 520px;
}

/* ==========================================================================
   2. カテゴリナビ / ページャ
   ========================================================================== */
.shine-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.shine-page-link {
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  font-size: 1.4rem;
  color: #4F8792;
  transition: background 0.3s ease, color 0.3s ease;
}
.shine-page-link:hover {
  background: #7FB8C1;
  color: #fff;
  opacity: 1;
}

.shine-pagination {
  margin: 40px 0 0;
}
.shine-pagination .pagination__list {
  gap: 10px;
}
.shine-pagination .pagination__link {
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-family: "Josefin Sans", sans-serif;
  color: #4F8792;
}
.shine-pagination .pagination__link:hover {
  background: #7FB8C1;
  color: #fff;
}
.shine-pagination .pagination__link.is-current {
  background: #7FB8C1;
  color: #fff;
}

/* ==========================================================================
   3. 記事一覧カード
   ========================================================================== */
.shine-entry-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.shine-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 18px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 5px 16px rgba(127, 184, 193, 0.15);
  transition: transform 0.2s ease;
}
.shine-entry:hover {
  transform: translateY(-4px);
  opacity: 1;
}
.shine-entry__img {
  flex: 0 0 220px;
  width: 220px;
  height: 150px;
  border-radius: 18px;
  overflow: hidden;
}
.shine-entry__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shine-entry__body {
  flex: 1 1 240px;
}
.shine-entry__title {
  margin: 0 0 8px;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: #3E7F8B;
}
.shine-entry__excerpt {
  margin: 0;
  font-size: 1.45rem;
  color: #6E7C81;
}

/* ==========================================================================
   4. 記事詳細
   ========================================================================== */
.shine-breadcrumb {
  margin-bottom: 26px;
  padding: 0;
  font-size: 1.3rem;
  color: #9FBFC6;
}
.shine-breadcrumb .breadcrumb__link {
  color: #9FBFC6;
}
.shine-breadcrumb .breadcrumb__link:hover {
  color: #E79A2B;
}
.shine-breadcrumb .breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin: 0 0.8em;
  color: #C6D8DC;
}
.shine-breadcrumb .breadcrumb__current {
  color: #9FBFC6;
}

.shine-article {
  padding: 34px;
  background: #fff;
  border-radius: 28px;
}
.shine-meta--detail {
  margin-bottom: 14px;
  gap: 12px;
}
.shine-meta--detail .shine-meta-cat {
  padding: 4px 14px;
  font-size: 1.2rem;
}
.shine-article__title {
  margin: 0 0 24px;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.7;
  color: #3E7F8B;
}
.shine-article__img {
  height: 380px;
  border-radius: 22px;
  overflow: hidden;
}
.shine-article__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shine-article__body {
  margin-top: 28px;
  font-size: 1.55rem;
  color: #5F6C71;
}
.shine-article__body p {
  margin: 0;
}
.shine-article__body p + p {
  margin-top: 20px;
}
.shine-article__body img {
  border-radius: 18px;
  margin: 20px 0;
}

/* ==========================================================================
   5. サイドバー
   ========================================================================== */
.shine-side {
  flex: 1 1 260px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.shine-side__box {
  padding: 26px;
  background: #fff;
  border-radius: 24px;
}
.shine-side__ttl {
  margin: 0 0 16px;
  font-size: 1.7rem;
  font-weight: 400;
  color: #3E7F8B;
}
.shine-side__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shine-side__links a {
  font-size: 1.45rem;
  color: #5F6C71;
}
.shine-side__links a:hover {
  color: #E79A2B;
}
.shine-side__recent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shine-side__post {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shine-side__post img {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.shine-side__post span {
  font-size: 1.35rem;
  line-height: 1.6;
  color: #5F6C71;
}
.shine-side__post:hover span {
  color: #E79A2B;
}

/* ==========================================================================
   6. レスポンシブ
   ========================================================================== */
@media screen and (max-width: 896px) {
  .shine-side { max-width: none; flex: 1 1 100%; }
}
@media screen and (max-width: 639px) {
  .shine-sec-blog-list { gap: 30px; padding-top: 40px; padding-bottom: 50px; }
  .shine-sec-entry { padding-bottom: 50px; }
  .shine-entry-detail { gap: 30px; }
  .shine-entry__img { flex: 1 1 100%; width: 100%; height: 190px; }
  .shine-article { padding: 24px 20px; border-radius: 22px; }
  .shine-article__title { font-size: 2.2rem; }
  .shine-article__img { height: 240px; }
}