/*
 * お知らせ・ブログ（Sanity連携）用の追加スタイル。
 * 既存の style.css には手を入れず、トップの .news / .blog の見た目をそのまま流用する。
 */

/* ---------- トップ・一覧共通 ---------- */
.news-list li a.news-item-title {
  color: #000000;
  text-decoration: none;
}

.news-list li a.news-item-title:hover {
  color: var(--color-pink-deep);
  text-decoration: underline;
}

.cms-news-cat {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 2px;
  background: var(--color-pink-pale);
  color: var(--color-pink-deep);
  font-size: 13px;
  white-space: nowrap;
}

.cms-news-cat--important {
  background: var(--color-pink-deep);
  color: #ffffff;
}

.cms-blog-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cms-blog-link .blog-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cms-blog-link:hover .blog-photo img {
  transform: scale(1.04);
}

.cms-blog-link:hover .blog-card-title {
  color: var(--color-pink-deep);
}

.cms-empty,
.cms-empty-item {
  margin: 24px 0;
  color: var(--color-text-light);
  font-size: 15px;
  text-align: center;
}

.cms-empty-item {
  display: block !important;
  border-bottom: none !important;
}

/* お知らせの行は、トップ（.news-body が中央揃え）でも一覧でも左揃え */
.news-list li {
  text-align: left;
}

/* ブログのカテゴリは写真に重ねず、日付の横に置く */
.cms-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.cms-blog-cat {
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 2px;
  background: var(--color-pink-tag);
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* トップの「一覧はこちら」（.news-more は style.css 既存のボタン） */
.blog .news-more {
  margin-top: 40px;
}

/* ---------- サブページ（/news/・/blog/・記事） ---------- */
.is-subpage .cms-page {
  padding: 180px 32px 96px;
  min-height: 60vh;
}

.cms-page-inner {
  max-width: 900px;
  margin: 0 auto;
}

.cms-page--blog .cms-page-inner {
  max-width: 1080px;
}

.cms-page-head {
  margin: 0 0 48px;
}

.cms-page-head .section-label {
  margin: 0;
  font-size: 56px;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
  line-height: 1.1;
}

.cms-page-head h1 {
  margin: 8px 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: #000000;
}

.cms-breadcrumb {
  margin: 0 0 32px;
  font-size: 13px;
  color: var(--color-text-light);
}

.cms-breadcrumb a {
  color: inherit;
}

.cms-breadcrumb span + span::before,
.cms-breadcrumb a + span::before,
.cms-breadcrumb span + a::before,
.cms-breadcrumb a + a::before {
  content: '›';
  margin: 0 8px;
}

.cms-page .blog-cards {
  row-gap: 48px;
}

.cms-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 56px 0 0;
}

.cms-pager a,
.cms-pager span {
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid #e9d4da;
  font-size: 15px;
  text-align: center;
  color: var(--color-brown-dark);
  text-decoration: none;
}

.cms-pager .is-current {
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
  color: #ffffff;
}

.cms-pager a:hover {
  background: var(--color-pink-pale);
}

.cms-back {
  margin: 64px 0 0;
}

/* ---------- 記事本文 ---------- */
.cms-article-head {
  padding: 0 0 24px;
  margin: 0 0 32px;
  border-bottom: 1px solid #e9d4da;
}

.cms-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--color-text-light);
}

.cms-article-cat {
  padding: 2px 12px;
  border-radius: 2px;
  background: var(--color-pink-tag);
  color: #ffffff;
  font-size: 13px;
}

.cms-article-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  color: #000000;
}

.cms-article-hero {
  margin: 0 0 40px;
}

.cms-article-hero img {
  width: 100%;
  border-radius: 2px;
}

.cms-article-body {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}

.cms-article-body p {
  margin: 0 0 1.4em;
}

.cms-article-body h2 {
  margin: 2.4em 0 1em;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--color-pink-mid);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: #000000;
}

.cms-article-body h3 {
  margin: 2em 0 0.8em;
  padding: 0 0 0 12px;
  border-left: 3px solid var(--color-pink-tag);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.cms-article-body ul,
.cms-article-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.6em;
}

.cms-article-body blockquote {
  margin: 0 0 1.4em;
  padding: 16px 20px;
  background: #faf6f2;
  border-left: 3px solid var(--color-beige);
}

.cms-article-body figure {
  margin: 0 0 1.6em;
}

.cms-article-body figure img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.cms-article-body figcaption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-text-light);
  text-align: center;
}

/* 表（Studioの「表」ブロック）。スマホでは横にスクロール */
.cms-table-wrap {
  margin: 0 0 1.6em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cms-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}

.cms-table caption {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-light);
  text-align: left;
}

.cms-table th,
.cms-table td {
  padding: 10px 14px;
  border: 1px solid #e3d3c8;
  text-align: left;
  vertical-align: top;
}

.cms-table th {
  background: #f7f1ec;
  font-weight: 500;
  color: #000000;
}

.cms-article-body a {
  color: var(--color-pink-deep);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .is-subpage .cms-page {
    padding: 120px 20px 72px;
  }

  .cms-page-head .section-label {
    font-size: 40px;
  }

  .cms-page-head h1 {
    font-size: 17px;
  }

  .cms-article-title {
    font-size: 21px;
  }

  .cms-article-body {
    font-size: 15px;
  }

  .news-list li {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .news-list li a.news-item-title {
    flex-basis: 100%;
  }

  /* SPのブログカードは3列（1枚約105px）なので、最長のカテゴリ名（7文字）も1行に収まる大きさに */
  .cms-blog-meta {
    gap: 4px 6px;
  }

  .cms-blog-cat {
    padding: 1px 6px;
    font-size: 10px;
    letter-spacing: 0;
  }
}

/* 本文の「HTML（直接入力）」ブロック。はみ出し防止だけ入れ、見た目は書いたHTMLに任せる */
.cms-embed-html { margin: 0 0 1.6em; }
.cms-embed-html img,
.cms-embed-html iframe,
.cms-embed-html video { max-width: 100%; }
.cms-embed-html img { height: auto; }