@charset "utf-8";
/*
Theme Name: 漢方薬ピュア
Theme URI: https://www.pure-kanpou.com/
Description: 漢方薬ピュアのテーマです
*/



/* 見出し */
.section-title {
    font-size: clamp(18px, 2.5vw, 30px);
    margin-bottom: 2rem;
}

/* 共通リスト */
.list {
    display: grid;
    gap: 2rem;
}

/* 人気記事6列 */
.popular_list_wrapper {
	margin-bottom:9rem;
}

.popular_list_wrapper h2 {
	text-align:center;
	margin-bottom:6rem;
}

.popular_list {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1200px) {
    .popular_list {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 900px) {
    .popular_list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .popular_list {
        grid-template-columns: 1fr;
    }
}

/* 記事一覧3列 */
.article_list {
    grid-template-columns: repeat(3, 1fr);
	margin-bottom:9rem;
}
@media (max-width: 900px) {
    .article_list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .article_list {
        grid-template-columns: 1fr;
    }
}

/* 各アイテム */
.list_item {
    display: flex;
    flex-direction: column;
}

/* 画像 */
.list_item figure {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 1.5rem; /* 画像下余白増加 */
}
.list_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カテゴリータグ */
.category_tag {
    display: inline-block;
    font-size: 15px; /* 少し大きめ */
    color: #fff;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.8rem; /* タイトルとの間隔 */
    line-height: 1.4;
}

/* タイトル */
.list_item h3 {
    font-size: clamp(16px, 2vw, 18px);
    margin: 0.8rem 0 1.2rem 0; /* 上下余白広め */
    line-height: 1.5;
}

/* 日付 */
.list_item time {
    font-size: 14px; /* 少し大きめに変更 */
    color: #666;
    line-height: 1.4;
	display:block;
	text-align:right;
}

/* リンク下線なし */
.list_item a {
    text-decoration: none;
}

/* デフォルト 3列 */
.article_list .list_item:nth-child(n+4) {
  margin-top: 3rem;
}

/* 2列（幅900px以下）の場合 3番目以降に余白 */
@media (max-width: 900px) {
  .article_list .list_item:nth-child(n+3) {
    margin-top: 3rem;
  }
}

/* 1列（幅600px以下）の場合 2番目以降に余白 */
@media (max-width: 600px) {
  .article_list .list_item:nth-child(n+2) {
    margin-top: 3rem;
  }
}







/* knowledge_item セクション全体 */
.knowledge_item {
    margin-bottom: 2.5rem; /* セクション間の余白 */
    padding-bottom: 1.5rem; /* セクション内の下余白 */
}

/* 各カテゴリー見出し */
.knowledge_item h2,
.tax-knowledge_cat .blog-main h2 {
    font-size: clamp(18px, 2.5vw, 24px); /* 調整可能な文字サイズ */
    margin-bottom: 3rem; /* 下余白 */
	padding:1.5rem;
	background:#f9f4ee;
	border:none;
}

/* 各記事タイトル */
.knowledge_item h3 {
    font-size: clamp(16px, 2vw, 20px);
    margin: 1.5rem 0 2rem 0;
}

/* 記事本文（90文字程度） */
.knowledge_item p {
    font-size: clamp(15px, 2vw, 16px);
    line-height: 1.6;
    margin-bottom: 3rem;
	padding-bottom:3rem;
	border-bottom:dashed 1px #DDD;
}

.knowledge_item p:last-child {
	border:none;
    margin-bottom: 0;
}

.knowledge_item span {
	display:inline-block;
	margin-left:1rem;
	position:relative;
	top:0.5rem;
}

.knowledge_item span a {
	display:block;
	line-height:1;
    font-size: clamp(14px, 2vw, 14px);
	padding:0.65rem 0.75rem 0.75rem 1rem;
	background:#6d3e10;
	color:#FFF;
	border-radius:0.5rem;
	transition: background 0.3s ease; /* 背景色の変化を滑らかに */
}

.knowledge_item span a:hover {
	background: #f07a8b;
}

/* h3 内のリンク装飾 */
.knowledge_item h3 a {
    text-decoration: none;
	color:#6d3e10;
	transition: color 0.3s ease; /* 背景色の変化を滑らかに */
}

.knowledge_item h3 a:hover {
    text-decoration: underline;
    color:#f07a8b; /* ホバー時のリンクカラー */
}