/* サブメニューの文字を中央に寄せる */
.header-navigation .sub-menu li a {
    text-align: center;
    justify-content: center;
}
/* 1. カード全体の高さを強制的に揃える */
.wpcp-carousel-section .wpcp-single-item {
    height: 380px !important; /* ←ここで全体の高さを固定します */
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
/* 2. 画像の高さを揃える */
.wpcp-carousel-section .wpcp-single-item .wpcp-slide-image img {
    height: 180px !important; /* ←画像の高さを固定 */
    width: 100% !important;
    object-fit: cover !important; /* 比率を保って切り抜き */
}
/* 3. 文字の色を黒にし、余白を整える */
.wpcp-carousel-section .wpcp-single-item .wpcp-post-title a,
.wpcp-carousel-section .wpcp-single-item .wpcp-post-date {
    color: #333333 !important;
    padding: 10px !important;
    display: block !important;
}
/* 1. フッター全体の影と境界線を完全に排除 */
.site-footer, 
.site-footer-inner-wrap,
#colophon {
    box-shadow: none !important;
    border-top: none !important;
    border: none !important;
}
/* 2. ページ内コンテンツの「器」の境界線を排除 */
#inner-wrap, 
.site-content {
    border-bottom: none !important;
    box-shadow: none !important;
}
/* 3. 【重要】フッターを0.5ピクセルだけ上にずらして隙間ごと線を隠す */
/* これでベージュと白が完全に密着します */
.site-footer {
    margin-top: -1px !important;
    position: relative;
    z-index: 10;
}
/* --- タブレット・スマホ共通（1024px以下） --- */
@media screen and (max-width: 1024px) {
    .sprout-program-text {
        word-break: keep-all !important; /* 単語の途中で改行させない */
        overflow-wrap: anywhere !important; /* 画面端ではみ出さないよう調整 */
        line-height: 1.6 !important; /* 行間を少し広げて読みやすく */
    }
}

/* --- スマホ専用（767px以下） --- */
@media screen and (max-width: 767px) {
    .sprout-program-text {
        /* 文字サイズを画面幅に合わせて自動で少しだけ小さくする */
        font-size: clamp(13px, 3.8vw, 15px) !important;
        
        /* 左右のマージンを削って、文字が使える幅を最大化する */
        margin-left: -5px !important;
        margin-right: -5px !important;
        
        /* 文字間をわずかに詰めて1行に入る文字数を増やす */
        letter-spacing: -0.3px !important;
    }
    
    /* アイコンとの隙間を詰めて文章の幅を確保 */
    .sprout-program-text .kt-svg-icon-list-item-wrap {
        gap: 8px !important;
    }
}
/* --- タブレット・スマホ共通（1024px以下） --- */
@media screen and (max-width: 1024px) {
    /* ロゴ画像が入っている枠を縮小 */
    .site-branding .custom-logo-link {
        max-width: 160px !important; /* PCより少し小さめ */
        display: block;
    }
}

/* --- スマホ専用（767px以下） --- */
@media screen and (max-width: 767px) {
    /* ロゴ画像が入っている枠をさらに縮小 */
    .site-branding .custom-logo-link {
        max-width: 120px !important; /* 画像 のデカさを解消するサイズ */
    }

    /* ロゴ画像の上下にある余白（マージン）を削ってヘッダーをスリムにする */
    .site-branding {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .site-branding img {
        height: auto !important;
        width: 100% !important;
    }
}/* スマホ・タブレットでロゴのサイズを強制固定 */
@media screen and (max-width: 1024px) {
    /* 1. サイトロゴを包む一番外側の枠を狙い撃ち */
    .site-branding, 
    .site-logo-container, 
    .custom-logo-link {
        max-width: 170px !important; /* ここでサイズを決定 */
        width: 170px !important;
        display: block !important;
    }

    /* 2. 中に入っている画像自体のサイズも強制 */
    .site-branding img, 
    .site-logo-container img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* 3. ロゴの上下の無駄な余白を消してスッキリさせる */
    .main-header-item {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}
/* --- 1. スマホ・タブレット（1024px以下）専用の設定 --- */
@media screen and (max-width: 1024px) {
    footer[class*="site-footer"] [class*="widget"] img,
    footer[class*="site-footer"] .site-logo-container img {
        max-width: 200px !important; /* スマホでお気に入りの200pxに固定 */
        width: 200px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
/* --- 2. スマホ版 (767px以下) 専用設定 --- */
@media (max-width: 767px) {
    /* 外枠の余白リセット（左右・上を維持） */
    #primary, .site-content, .content-container, .entry-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 【ボトムの壁を破壊】動画ブロックの高さを強制的にゼロにする */
    .entry-content > .wp-block-kadence-rowlayout {
        min-height: 0 !important;   /* これがボトム余白の元凶 */
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 動画の下にある「見えない隙間」を消去 */
    .wp-block-kadence-rowlayout video {
        display: block !important;
        margin-bottom: 0 !important;
    }
}

/* --- 3. コンテンツの上下位置調整 --- */

/* トップの余白（決定版の -178px を維持） */
.entry-content {
    margin-top: -20px !important; 
}

/* 【重要】下の余白を詰める数値 */
/* まずは -500px で試してください。これでまだ隙間があるなら -1000px まで上げてください */
.entry-content > *:nth-child(2) {
    margin-top: 0px !important; 
}

/* イベントリストの左右余白 */
@media screen and (max-width: 480px) {
    .tribe-common {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}