/*
 * KANJIN 2026-10-19 ブログの一覧・関連記事・カテゴリーの見た目の調整
 * style.css は scss から書き出したものなので、上書きはこのファイルにまとめる（functions.php の kanjin_blog_enqueue で style の後に読む）
 */

/* 一覧のカード：高さをそろえ、日付とカテゴリーをカードの下端にそろえる */
.lower-template-content-main-list-item {
  display: flex;
}
.lower-template-content-main-list-item-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
}
.lower-template-content-main-list-item-link-thumbnail {
  aspect-ratio: 16 / 9;
}
.lower-template-content-main-list-item-link-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 16px;
}
.lower-template-content-main-list-item-link-txt-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.lower-template-content-main-list-item-link-txt-excerpt {
  -webkit-box-orient: vertical;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #6b6b6b;
  margin-bottom: 14px;
}
.lower-template-content-main-list-item-link-txt-bottom {
  margin-top: auto;
  gap: 10px;
}

/* カードのカテゴリー名 */
.kanjin-blog-card-cat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #fbf1e1;
  color: #9a6115;
  font-size: 1.2rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* 横の欄のカテゴリー：今見ているカテゴリーを色で示す */
.lower-template-content-side-category-list-item-link.is-current {
  color: #e3a039;
  font-weight: 700;
}

/* スマホのカテゴリー一覧（PC は横の欄があるので出さない） */
.kanjin-blog-chipnav {
  display: none;
}
@media screen and (max-width: 834px) {
  .kanjin-blog-chipnav {
    display: block;
    margin-bottom: 24px;
  }
  .kanjin-blog-chipnav-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .kanjin-blog-chipnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .kanjin-blog-chipnav-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ead9bf;
    border-radius: 999px;
    background-color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .kanjin-blog-chipnav-link.is-current {
    background-color: #e3a039;
    border-color: #e3a039;
    color: #fff;
  }
}

/* 関連記事（記事ページの下・診療ページの下）：画像を 16:9 に、カードの高さをそろえる */
.lower-template-content-main-bottom-relevance .single-relevance-swiper .swiper-slide {
  height: auto;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link-thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  margin: 0; /* 診療ページの本文の画像の余白（下 40px）が付くので消す */
  object-fit: cover;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link-content-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link-content-excerpt {
  -webkit-box-orient: vertical;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #6b6b6b;
}
.lower-template-content-main-bottom-relevance .single-relevance-swiper-link-content-bottom {
  margin-top: auto;
}

/* （KANJIN 2026-10-19）下層ではヘッダーの医院名を p で出す。トップの h1 と同じ見た目にする */
.header-inner p.kanjin-header-catch {
  font-size: 1.3rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.69;
  letter-spacing: 0.065rem;
  margin: 0;
}

/* （KANJIN 2026-10-19）記事の本文の長いURL・横に広い表で、スマホの画面が横に揺れないようにする（記事の中身は変えない） */
.lower-template-content-main-body {
  overflow-wrap: anywhere;
}
.lower-template-content-main-body img {
  max-width: 100%;
  height: auto;
}
.lower-template-content-main-body iframe {
  max-width: 100%;
}
@media screen and (max-width: 834px) {
  .lower-template-content-main-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* （KANJIN 2026-10-19）関連記事が1本も無いときは「関連記事」の欄ごと出さない（「関連記事はありません」の箇条書きが残っていた） */
.lower-template-content-main-bottom-relevance:not(:has(.swiper-slide)) {
  display: none;
}
/* 横の欄で、記事のあるカテゴリーが1つも無いときは「カテゴリ」の見出しも出さない */
/* :has の入れ子はブラウザが受け付けないので、親（横の欄）で「li が無い」を見て、カテゴリ一覧の直前の見出しを隠す */
.lower-template-content-side:not(:has(.lower-template-content-side-category-list li)) > .lower-template-content-side-title:has(+ .lower-template-content-side-category-list),
.lower-template-content-side-category-list:not(:has(li)) {
  display: none;
}