@charset "UTF-8";
/* ===============================
   カテゴリページ・アーカイブページ投稿カード
================================ */
.category .entry-card,
.archive .entry-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;   /* アイキャッチとタイトルの間 */
  padding: 6px 0 !important;
  border-bottom: 1px solid #eee !important;
}

.category .entry-card-thumb img,
.archive .entry-card-thumb img {
  width: 160px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 !important;
}

.category .entry-card-content,
.archive .entry-card-content {
  flex: 1 1 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

.category .entry-card-title,
.archive .entry-card-title {
  font-size: 20px !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  margin: 0 0 4px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.category .entry-card-snippet,
.archive .entry-card-snippet {
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  color: #555 !important;
  margin: 0 !important;
}

.cat-label {
  font-size: 12px !important;
  font-weight: normal !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}
/* ===============================
   特化ページ featured_pages
================================ */
.featured-pages-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.featured-page-card {
  width: 200px; /* お好みで調整 */
  text-align: center;
}
.featured-thumb {
  width: 100%;
  height: 120px; /* 高さ調整 */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}
.featured-title {
  font-size: 16px;   /* 大きすぎない文字 */
  font-weight: bold;
  white-space: nowrap; /* 1行表示 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===============================
   新着記事 latest_posts
================================ */
.latest-posts-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.latest-post-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.latest-post-thumb img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}
.latest-post-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: normal;
}
.featured-title {
  font-size: 14px !important;      /* 小さめに調整 */
  font-weight: bold !important;
  white-space: nowrap !important;  /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 4px 0 0 0 !important;
  text-align: center !important;
}
.category .entry-card,
.archive .entry-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 2px !important;         /* さらに空白を最小化 */
  padding: 0 !important;       /* 上下余白を削除 */
  border-bottom: 1px solid #eee !important;
}

.category .entry-card-thumb,
.archive .entry-card-thumb {
  margin: 0 !important;        /* アイキャッチの余白を削除 */
}

.category .entry-card-content,
.archive .entry-card-content {
  padding: 0 !important;
  margin: 0 !important;
}
.featured-thumb {
  width: 100% !important;
  height: 140px !important;  /* 今の120px → 140pxに */
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}
.category .entry-card-thumb img,
.archive .entry-card-thumb img {
  width: 180px !important;   /* 160px → 180pxに拡大 */
  height: 120px !important;  /* 100px → 120pxに拡大 */
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 !important;
}
/* 特化ページ アイキャッチ画像を長方形に */
.featured-thumb {
  width: 180px;   /* 横幅を広く */
  height: 100px;  /* 高さを少し抑える */
  object-fit: cover; /* 画像を切らずに表示 */
  border-radius: 4px;
  margin-bottom: 6px;
}
/* 特化ページ アイキャッチ画像を長方形に */
.featured-pages-grid .featured-page-card .featured-thumb {
  width: 180px !important;   /* 横幅 */
  height: 100px !important;  /* 高さ */
  object-fit: cover !important; /* 画像を切らずに表示 */
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}
.featured-thumb {
  width: 220px;   /* 横幅を広げる */
  height: 140px;  /* 高さを広げる */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}
.featured-page-card {
  width: 220px !important; /* カードの横幅 */
  text-align: center !important;
}

.featured-thumb {
  width: 220px !important;   /* アイキャッチ横幅 */
  height: 140px !important;  /* アイキャッチ縦幅 */
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}

.featured-title {
  font-weight: bold !important;
  white-space: nowrap !important; /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 18px !important;     /* 初期文字サイズ */
}
.featured-page-card {
  width: 220px !important;
  text-align: center !important;
}

.featured-thumb {
  width: 220px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
}

.featured-title {
  font-weight: bold !important;
  white-space: nowrap !important; /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 18px !important;     /* 初期文字サイズ */
}
document.addEventListener("DOMContentLoaded", function() {
    const titles = document.querySelectorAll(".featured-title");

    titles.forEach(title => {
        let parentWidth = title.parentElement.offsetWidth - 8; // マージン分
        let computedFont = parseInt(window.getComputedStyle(title).fontSize);
        let fontSize = computedFont || 22; // 初期サイズ22pxなど

        while (title.scrollWidth > parentWidth && fontSize > 6) {
            fontSize--;
            title.style.fontSize = fontSize + "px";
        }
    });
});
.featured-title {
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin: 8px 0 0 0 !important;
  text-align: center !important;
  white-space: nowrap !important; /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: initial !important; /* JS に任せる */
}
.featured-title {
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin: 8px 0 0 0 !important;
  text-align: center !important;
  white-space: nowrap !important; /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: unset !important; /* ここを変更 */
}
.featured-title {
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin: 8px 0 0 0 !important;
  text-align: center !important;
  white-space: nowrap !important; /* 1行表示 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: unset !important; /* ここを変更 */
}
/* ===============================
   特化ページ featured_pages（トップページ）
================================ */
.featured-pages-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.featured-page-card {
  width: 200px; /* カード幅 */
  text-align: center;
}

.featured-thumb {
  width: 100%;
  height: 140px; /* 長方形で大きく */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* 特化ページタイトル：1行に収める、自動縮小 */
.featured-title {
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;      /* 1行表示 */
  overflow: hidden;         /* はみ出た部分を隠す */
  text-overflow: ellipsis;  /* はみ出た部分は「...」に */
  font-size: clamp(12px, 3.5vw, 16px); /* 画面幅に応じて自動縮小 */
}

/* ===============================
   カテゴリページ・アーカイブページ投稿カード
================================ */
.category .entry-card,
.archive .entry-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;   /* アイキャッチとタイトルの間 */
  padding: 6px 0 !important;
  border-bottom: 1px solid #eee !important;
}

.category .entry-card-thumb img,
.archive .entry-card-thumb img {
  width: 160px !important;
  height: 100px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 !important;
}

.category .entry-card-content,
.archive .entry-card-content {
  flex: 1 1 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

.category .entry-card-title,
.archive .entry-card-title {
  font-size: 20px !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  margin: 0 0 4px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.category .entry-card-snippet,
.archive .entry-card-snippet {
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  color: #555 !important;
  margin: 0 !important;
}

.cat-label {
  font-size: 12px !important;
  font-weight: normal !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

/* ===============================
   新着記事 latest_posts
================================ */
.latest-posts-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.latest-post-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.latest-post-thumb img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}

.latest-post-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: normal;
}
/* 特化ページタイトル（ellipsis 無効化） */
.featured-title {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}
/* 特化ページタイトル - 必ず1行で省略なし */
.featured-title {
  font-size: 22px;   /* 初期サイズ */
  font-weight: bold;
  line-height: 1.4;
  margin: 6px 0 0 0;
  text-align: center;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}
/* 通常タイトル */
.featured-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  margin: 6px 0 0 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 特定タイトルだけ小さめ */
.featured-title.small-title {
  font-size: 13px !important;
}
.featured-title {
  font-size: 16px !important;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.small-title {
  font-size: 12px !important; /* 小さめにして1行に収める */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 特化ページタイトルを切れずに全部表示 */
.featured-title {
  font-size: 16px !important;
  font-weight: bold;
  white-space: normal !important; /* 折り返しOK */
  overflow: visible !important;   /* はみ出しOK */
  text-overflow: unset !important; /* ...を無効化 */
  text-align: center;
  line-height: 1.4;
}

.small-title {
  font-size: 13px !important; /* 小さめにして収める */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
/* カテゴリーページの余計な説明文と日付を非表示 */
.category .entry-card-snippet,
.category .entry-card-meta,
.category .entry-card-date,
.category .entry-card-info {
  display: none !important;
}
/* カテゴリーページの余計な説明文と不要なメタ情報を非表示 */
.category .entry-card-snippet,
.category .entry-card-meta,
.category .entry-card-info {
  display: none !important;
}

/* 日付は残す（見やすく調整） */
.category .entry-card-date {
  display: block !important;
  font-size: 12px !important;
  color: #666 !important;
  margin-top: 4px !important;
}
/* ===============================
   カテゴリーページの投稿カード調整
================================ */
/* 抜粋（description/snippet）は消す */
.category .entry-card-snippet {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* その他の余計なメタ情報も消す */
.category .entry-card-meta,
.category .entry-card-info {
  display: none !important;
}

/* 日付は残して見やすく */
.category .entry-card-date {
  display: block !important;
  font-size: 12px !important;
  color: #666 !important;
  margin-top: 4px !important;
}
/* 自動水やり機完全ガイド の「ガイド」を改行 */
.cat-item a[href*="自動水やり機完全ガイド"] {
  display: inline-block;
  white-space: pre-line;
}
.cat-item a[href*="自動水やり機完全ガイド"]::after {
  content: "\Aガイド"; /* 改行して「ガイド」を表示 */
  white-space: pre;
}
.cat-item a[href*="自動水やり機完全ガイド"] {
  content: "自動水やり機完全";
}

/* 家庭菜園の便利グッズ の「グッズ」を改行 */
.cat-item a[href*="家庭菜園の便利グッズ"] {
  display: inline-block;
  white-space: pre-line;
}
.cat-item a[href*="家庭菜園の便利グッズ"]::after {
  content: "\Aグッズ"; /* 改行して「グッズ」を表示 */
  white-space: pre;
}
.cat-item a[href*="家庭菜園の便利グッズ"] {
  content: "家庭菜園の便利";
}
/* --- 自動水やり機完全ガイド --- */
a[title="自動水やり機完全ガイド"] {
  display: inline-block;
  white-space: pre-line;
}
a[title="自動水やり機完全ガイド"]::before {
  content: "自動水やり機完全";
  display: block;
}
a[title="自動水やり機完全　　ガイド"]::after {
  content: "ガイド";
  display: block;
}
a[title="自動水やり機完全ガイド"] {
  font-size: 0; /* 元の文字を消す */
}

/* --- 家庭菜園の便利グッズ --- */
a[title="家庭菜園の便利　　グッズ"] {
  display: inline-block;
  white-space: pre-line;
}
a[title="家庭菜園の便利グッズ"]::before {
  content: "家庭菜園の便利";
  display: block;
}
a[title="家庭菜園の便利グッズ"]::after {
  content: "グッズ";
  display: block;
}
a[title="家庭菜園の便利グッズ"] {
  font-size: 0; /* 元の文字を消す */
}
/* カード内の日付をカテゴリラベルの下に配置 */
.entry-card-meta {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* カテゴリラベルと日付をまとめて見せる */
.entry-card .cat-label {
  display: block;
  margin-bottom: 0;
}
.entry-card .entry-card-meta {
  margin-left: 0;
	// =============================
// 新着記事ショートコード（10件・小さい文字）
// =============================
if ( ! function_exists( 'render_latest_posts_shortcode' ) ) {
    function render_latest_posts_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'count' => 10, // 表示件数を10件に固定
        ), $atts, 'latest_posts' );

        $args = array(
            'post_type'      => 'post',
            'posts_per_page' => intval( $atts['count'] ),
            'orderby'        => 'date',
            'order'          => 'DESC',
        );

        $query = new WP_Query( $args );
        if ( ! $query->have_posts() ) {
            return '<p>新着記事はありません</p>';
        }

        ob_start();
        ?>
        <h2 class="latest-posts-title">新着記事</h2>
        <div class="latest-posts-wrap">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <?php
                $thumb = has_post_thumbnail()
                    ? get_the_post_thumbnail_url( get_the_ID(), 'medium' )
                    : get_stylesheet_directory_uri() . '/assets/default-thumb.jpg';
                ?>
                <div class="latest-post-card">
                    <a href="<?php the_permalink(); ?>">
                        <div class="latest-post-thumb">
                            <img src="<?php echo esc_url( $thumb ); ?>" alt="<?php the_title_attribute(); ?>">
                        </div>
                        <div class="latest-post-title" style="font-size:13px; line-height:1.4; font-weight:normal;">
                            <?php the_title(); ?>
                        </div>
                    </a>
                </div>
            <?php endwhile; wp_reset_postdata(); ?>
        </div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'latest_posts', 'render_latest_posts_shortcode' );
}
// 新着記事ショートコード
function render_latest_posts_shortcode($atts){
    $atts = shortcode_atts(array(
        'count' => 15, // ← ここで件数変更（現在15件）
    ), $atts, 'latest_posts');

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => intval($atts['count']),
        'orderby' => 'date',
        'order' => 'DESC'
    );

    $query = new WP_Query($args);
    if(!$query->have_posts()) return '<p>新着記事はありません</p>';

    ob_start();
    ?>
    <h2 class="latest-posts-title">新着記事</h2>
    <div class="latest-posts-wrap">
        <?php while($query->have_posts()): $query->the_post(); 
            $thumb = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(),'medium') : get_stylesheet_directory_uri().'/assets/default-thumb.jpg';
        ?>
        <div class="latest-post-card">
            <a href="<?php the_permalink(); ?>">
                <div class="latest-post-thumb">
                    <img src="<?php echo esc_url($thumb); ?>" alt="<?php the_title_attribute(); ?>">
                </div>
                <div class="latest-post-title"><?php the_title(); ?></div>
            </a>
        </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('latest_posts','render_latest_posts_shortcode');
/* 新着記事リスト全体をコンパクトに */
.latest-posts {
  padding: 5px 0; /* 上下の余白を小さく */
  font-size: 13px; /* 全体的に小さめ */
}

/* 見出し */
.latest-posts-title {
  font-size: 16px; /* 少し小さく */
  font-weight: normal; /* 太字解除 */
  margin-bottom: 8px; /* 下の余白も少し減らす */
}

/* 個別記事タイトル */
.latest-post-title {
  font-size: 13px !important; /* 小さめ文字 */
  font-weight: normal !important; /* 太字解除 */
  line-height: 1.3; /* 行間を少し詰める */
  color: #333;
  margin-bottom: 4px; /* 記事間の余白を小さく */
}

/* サムネイル */
.latest-post-thumb img {
  width: 100px; /* さらに小さく */
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 8px; /* タイトルとの隙間 */
}

/* テーマ名 */
.latest-post-category {
  font-size: 12px; /* 小さめ */
  font-weight: normal; /* 太字解除 */
  color: #666; /* 少し薄めに */
  margin-bottom: 2px;
  display: block;
}
/* 新着記事全体をコンパクトに */
.latest-posts, 
.latest-posts li, 
.latest-posts .post {
    font-size: 13px !important;  /* 全体的に小さめ */
    line-height: 1.3 !important; /* 行間を詰める */
    margin: 0 0 5px 0 !important; /* 記事間の余白を小さく */
    padding: 0 !important;
}

/* 記事タイトル */
.latest-post-title, 
.latest-posts a {
    font-size: 13px !important;
    font-weight: normal !important; /* 太字解除 */
    color: #333 !important;
}

/* テーマ名（カテゴリ名など） */
.latest-post-category, 
.latest-posts .category, 
.latest-posts .post-category {
    font-size: 12px !important; /* 小さく */
    font-weight: normal !important; /* 太字解除 */
    color: #666 !important;
    display: block;
    margin-bottom: 2px !important;
}

/* サムネイル */
.latest-post-thumb img, 
.latest-posts img {
    width: 100px !important;  /* 小さく */
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
}
/* 新着記事全体をコンパクトに */
div[class*="latest"] li,
div[class*="latest"] .post,
div[class*="latest"] .lp-post,
div[class*="latest"] {
    font-size: 13px !important;       /* 全体を小さく */
    line-height: 1.3 !important;      /* 行間を詰める */
    margin: 0 0 5px 0 !important;     /* 記事間の余白を小さく */
    padding: 0 !important;
}

/* 記事タイトル */
a[class*="title"],
div[class*="latest"] a {
    font-size: 13px !important;
    font-weight: normal !important;   /* 太字解除 */
    color: #333 !important;
    display: block;
    margin-bottom: 2px !important;
}

/* テーマ名・カテゴリ名 */
span[class*="category"],
div[class*="latest"] .post-category {
    font-size: 12px !important;       /* 小さく */
    font-weight: normal !important;   /* 太字解除 */
    color: #666 !important;
    display: block;
    margin-bottom: 2px !important;
}

/* サムネイル */
img[class*="thumb"],
div[class*="latest"] img {
    width: 100px !important;          /* 小さめ */
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    vertical-align: middle;
}
/* 新着記事リスト全体を小さくして幅を縮める */
div[class*="latest"] {
    max-width: 400px !important;   /* 横幅を縮小 */
    font-size: 13px !important;    /* 全体を小さめに */
    line-height: 1.3 !important;   /* 行間を詰める */
    margin: 0 auto !important;     /* 中央寄せ */
    padding: 0 !important;
}

/* 記事タイトル */
div[class*="latest"] a {
    font-size: 13px !important;
    font-weight: normal !important;
    display: block;
    margin-bottom: 4px !important;
}

/* テーマ名 / カテゴリ名 */
div[class*="latest"] span[class*="category"] {
    font-size: 12px !important;
    font-weight: normal !important;
    color: #666 !important;
    display: block;
    margin-bottom: 2px !important;
}

/* サムネイル */
div[class*="latest"] img {
    width: 80px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-right: 6px !important;
    vertical-align: middle;
}

/* 記事1件ごとの余白を詰める */
div[class*="latest"] li,
div[class*="latest"] .post {
    margin-bottom: 5px !important;
    padding: 0 !important;
}
/* 記事ブロックを横並びで整列・コンパクト化 */
.rpwe-block {
    max-width: 400px;        /* 記事1件の横幅 */
    margin-bottom: 6px;      /* 記事間の余白 */
    padding: 4px;            /* 内側の余白 */
    display: flex;           /* アイキャッチとタイトルを横並び */
    align-items: center;     /* 高さ中央揃え */
}

/* アイキャッチ */
.rpwe-thumb img {
    width: 80px;             /* 小さめサムネイル横幅 */
    height: 50px;            /* 小さめサムネイル高さ */
    object-fit: cover;
    border-radius: 4px;
    margin-right: 8px;       /* テキストとの間隔 */
}

/* タイトル */
.rpwe-title {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
}

/* カテゴリ（テーマ名） */
.rpwe-category {
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin-bottom: 2px;
}