/* 商品リストを4カラム表示 */
.products .product {
    display: inline-block !important;
    width: 23% !important; /* 4カラム表示のために幅を設定（ギャップを考慮して） */
    margin: 0 1% 20px !important; /* 商品間のマージン */
    text-align: center !important;
    box-sizing: border-box !important;
    background-color: #fff !important; /* 商品カードの背景色 */
    border-radius: 5px !important; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* 少し立体感を持たせるシャドウ */
    overflow: hidden !important; /* 角丸でカードの内容がはみ出さないように */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* ホバー時のトランジション */
}

/* ホバー時のエフェクト */
.products .product:hover {
    transform: translateY(-10px) !important; /* 上にスライドするエフェクト */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important; /* より強いシャドウで浮いて見える効果 */
}

/* 商品画像の調整 */
.products .product img {
    max-width: 100% !important; /* 商品画像がカードに収まるように */
    height: auto !important;
    display: block !important;
    margin-bottom: 7px !important; /* 商品画像とタイトルとの間隔 */
    border-bottom: 2px solid #f5f5f5 !important; /* 画像とタイトルを分けるライン */
}

/* 商品タイトルのスタイル */
.products .product h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
}

/* 商品タイトルにホバー効果 */
.products .product:hover h3 {
    color: #0073e6 !important; /* ホバー時にタイトルを青く */
}

/* 商品価格のスタイル */
.products .product .price {
    font-size: 12px !important;
    color: #333 !important;
    margin-top: 3px !important;
    transition: color 0.3s ease !important;
}

/* 商品価格にホバー効果 */
.products .product:hover .price {
    color: #0073e6 !important; /* ホバー時に価格を青く */
}

/* スマートフォン（最大768px）で2カラム表示 */
@media (max-width: 768px) {
    .products .product {
        width: 48% !important; /* 2カラム表示に調整 */
        margin: 0 1% 20px !important;
    }

    /* スマートフォン用に商品タイトルを小さくする */
    .products .product h3 {
        font-size: 14px !important; /* スマホでタイトルを小さく */
    }

    .products .product .price {
        font-size: 14px !important; /* スマホで価格を小さく */
    }
}

/* タブレット（最大1024px）で3カラム表示 */
@media (max-width: 1024px) {
    .products .product {
        width: 48% !important; /* 3カラム表示に調整 */
    }
}

/* 商品リスト全体の調整 */
.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important; /* 商品を左詰めにする */
    margin: 0 -1% !important; /* カラムの間隔調整 */
}

/* 商品リストが空の場合のメッセージ */
.products:empty {
    text-align: center !important;
    font-size: 18px !important;
    color: #777 !important;
}


h2 {
 font-weight: bold !important;
font-size: 17px; !important;
    background-color: #eee; !important;
    padding: 12px; !important;
}


.blog-post .entry-content h1, .blog-post .entry-content h2, .blog-post .entry-content h3, .blog-post .entry-content h4, .blog-post .entry-content h5, .blog-post .entry-content h6, .page .entry-content h1, .page .entry-content h2, .page .entry-content h3, .page .entry-content h4, .page .entry-content h5, .page .entry-content h6, .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
  margin-top: 10px; !important;
}



/* リストマーカー（●）を非表示にする */
ul, ol {
    list-style-type: none; /* マーカーを削除 */
    padding-left: 0; /* インデントをリセット */
}










/* 基本のスタイル：画像とテキストを横並びに */
#su_posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCで4カラム */
    gap: 20px;
    padding: 20px;
}

/* モバイル端末用のレスポンシブ対応：スマホで2カラム */
@media screen and (max-width: 768px) {
    #su_posts {
        grid-template-columns: repeat(2, 1fr); /* スマホで2カラム */
    }
}

/* 各記事のサムネイル画像サイズ調整 */
#su_posts .post {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#su_posts .post img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 記事のタイトルやテキストのスタイル */
#su_posts .post .entry-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}

#su_posts .post .entry-summary {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}