/* =======================================================
   カード背景専用：周囲（全方向）シームレスフェード（直線バグ完全修正版）
   対象クラス：has-card-surround-fade
======================================================= */
/* 1. 直線の原因となる「内側の箱の背景」「枠線」「影」をすべて根こそぎ無効化 */
html body .has-card-surround-fade,
html body .has-card-surround-fade.has-background,
html body .has-card-surround-fade > .wp-block-group__inner-container,
html body .has-card-surround-fade > div {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. 中身（文字や画像）を背景より上に浮かせて保護する */
html body .has-card-surround-fade > * {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. 背景専用レイヤーを置き、四角いフチが出る前に「完全に」透明化する */
html body .has-card-surround-fade::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    background-color: #ffffff !important;
    
    /* ★ closest-side を指定し、最も近い端に触れる瞬間に確実に100%透明になるよう計算式を修正 */
    -webkit-mask-image: radial-gradient(
        ellipse closest-side at center,
        #000 0%,
        #000 50%,        /* 中央から50%の範囲は白をしっかりキープ */
        transparent 100% /* 端に到達した時点で完全に透明（直線消滅） */
    ) !important;
    mask-image: radial-gradient(
        ellipse closest-side at center,
        #000 0%,
        #000 50%,
        transparent 100%
    ) !important;
    
    z-index: 1 !important; 
    pointer-events: none !important;
}



/* =======================================================
   大きなセクション用：すりガラスパネル効果（真の透過・完全版）
   対象クラス：has-each-card-fade
======================================================= */
/* 1. パネル本体の設定（透明度を極限まで高め、ぼかしを強くする） */
html body .has-each-card-fade {
    position: relative !important;
    z-index: 10 !important;
    
    /* ★修正：白の濃度を 0.65 → 0.25 に劇的に下げ、極めて透明なガラスにする */
    background: rgba(255, 255, 255, 0.25) !important;
    
    /* ★修正：透明度を上げた分、ぼかし（blur）を 16px に強め、文字の可読性を担保する */
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    
    /* 角丸とガラスのフチ（ハイライト） */
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: clamp(30px, 5vw, 60px) !important;
    overflow: hidden !important; 
}

/* 2. ★最強リセット：内部のあらゆる要素の「隠れ背景色」を根こそぎ透明化する */
html body .has-each-card-fade.has-background,
html body .has-each-card-fade .wp-block-group,
html body .has-each-card-fade .wp-block-group__inner-container,
html body .has-each-card-fade [class*="has-background"],
html body .has-each-card-fade [style*="background"],
html body .has-each-card-fade div,
html body .has-each-card-fade ul,
html body .has-each-card-fade li,
html body .has-each-card-fade dl,
html body .has-each-card-fade dt,
html body .has-each-card-fade dd {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. 中身のテキストを保護 */
html body .has-each-card-fade > * {
    position: relative !important;
    z-index: 2 !important;
}












/* ---------------------------------------------------
   18. TOPページ共通：ボタンブロック（職人の面取り：3px）
   --------------------------------------------------- */
.home .wp-block-button__link,
.home .smb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 260px !important;

    /* ★追加：親要素による「幅の固定」を強制解除し、必ず外枠ごと伸びるようにする */
    width: max-content !important;
    max-width: 100% !important;

    padding: 16px 40px !important;
    background-color: transparent !important;
    color: #333 !important;
    border: 1px solid #333 !important;
    border-radius: 3px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.home .wp-block-button__link:hover,
.home .smb-btn:hover {
    background-color: transparent !important;
    border-color: #c1a15f !important;
    color: #c1a15f !important;
    letter-spacing: 0.25em !important;
    padding-left: 45px !important;
    padding-right: 45px !important;
    transform: none !important;
    box-shadow: none !important;
    min-width: 290px !important;
}

.home .wp-block-buttons,
.home .smb-buttons {
    margin-top: 40px !important;
    justify-content: center !important;
}

/* ---------------------------------------------------
   スマホ環境：ボタンの背景幅を290pxで完全固定
--------------------------------------------------- */
@media screen and (max-width: 768px) {
    .home .wp-block-button__link,
    .home .smb-btn {
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important; /* 横幅を290pxで完全に固定する防弾指定 */
        padding-left: 0 !important; /* 内側の余白で文字が押し出されるのを防ぐ */
        padding-right: 0 !important;
    }
}


/* ---------------------------------------------------
   19. アニメーション用ユーティリティ（FOUC防止）
   --------------------------------------------------- */
.js-cinematic-text {
    opacity: 0;
    visibility: hidden;
}

/* ---------------------------------------------------
   20. 【防弾強化】共通テキストリンクのホバー演出（鈍色ゴールド）
   --------------------------------------------------- */
.home .c-entry__content a:not([class*="btn"]):not([class*="button"]),
.home .smb-section a:not([class*="btn"]):not([class*="button"]) {
    color: #111 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(17, 17, 17, 0.2) !important;
    text-underline-offset: 4px !important;
    transition: all 0.4s ease !important;
}

.home .c-entry__content a:not([class*="btn"]):not([class*="button"]):hover,
.home .smb-section a:not([class*="btn"]):not([class*="button"]):hover {
    color: #c1a15f !important;
    text-decoration-color: #c1a15f !important;
}

/* ---------------------------------------------------
   21. シネマティック・マスク画像リビール（掛け軸リビール）
   --------------------------------------------------- */
.home .js-image-reveal-mask,
.js-image-reveal-mask {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0% 0% 100% 0%);
    will-change: clip-path, opacity, visibility;
    overflow: hidden !important;
}

.home .js-image-reveal-mask img,
.js-image-reveal-mask img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    will-change: transform;
}

/* ---------------------------------------------------
   22. 中間サイズ・スマホ専用：ハンバーガーメニューの最前面固定 ＆ ノイズレス化
   --------------------------------------------------- */
@media screen and (max-width: 1150px) {

    .c-hamburger-btn,
    .l-header__hamburger {
        position: relative !important;
        z-index: 999999 !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .c-hamburger-btn__bar {
        background-color: #111 !important;
        height: 1px !important;
    }

    .c-hamburger-btn__label {
        color: #111 !important;
        font-family: inherit !important;
        letter-spacing: 0.1em !important;
        font-weight: 500 !important;
    }
}

/* ---------------------------------------------------
   23. スマホ専用：視認性を担保した美しい文節改行の最適化
   --------------------------------------------------- */
@media screen and (max-width: 768px) {
    .p-mobile-perfect-lines {
        display: block !important;
        font-size: 0.95rem !important;
        line-height: 2.2 !important;
        letter-spacing: 0.08em !important;
        text-align: center !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
}

/* ---------------------------------------------------
   24. クエリループ専用：新着お知らせリスト（職人の面取り：タグ3px仕様）
   --------------------------------------------------- */
.p-query-news-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 900px !important;
}

.p-query-news-list .wp-block-post {
    border-bottom: 1px solid #e8e4de !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.p-query-news-list .wp-block-post:first-child {
    border-top: 1px solid #e8e4de !important;
}

.p-query-news-list .wp-block-group {
    display: flex !important;
    align-items: center !important;
    padding: 25px 50px 25px 0 !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    transition: background-color 0.4s ease !important;
    margin: 0 !important;
    position: relative !important;
}

.p-query-news-list .wp-block-group:hover {
    background-color: #fafafa !important;
}

.p-query-news-list .wp-block-group::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 30px !important;
    height: 1px !important;
    background-color: #ccc !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.p-query-news-list .wp-block-group::before {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: calc(50% - 4px) !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
    transform: rotate(45deg) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.p-query-news-list .wp-block-group:hover::after {
    width: 30px !important;
    background-color: #c1a15f !important;
}

.p-query-news-list .wp-block-group:hover::before {
    border-color: #c1a15f !important;
}

.p-query-news-list .wp-block-post-date {
    width: 115px !important;
    font-family: 'Frank Ruhl Libre', serif, "Noto Sans JP", sans-serif !important;
    font-size: 0.95rem !important;
    color: #999 !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.p-query-news-list .taxonomy-category,
.p-query-news-list .wp-block-post-terms {
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
}

html body.home .c-entry__content .p-query-news-list .taxonomy-category a,
html body.home .c-entry__content .p-query-news-list .wp-block-post-terms a,
html body .p-query-news-list .taxonomy-category a,
html body .p-query-news-list .wp-block-post-terms a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #B92D33 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 0.7rem !important;
    padding: 4px 12px !important;
    border-radius: 3px !important;
    /* 面取りへ統一 */
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.4s ease !important;
}

html body.home .c-entry__content .p-query-news-list .taxonomy-category a:hover,
html body.home .c-entry__content .p-query-news-list .wp-block-post-terms a:hover,
html body .p-query-news-list .taxonomy-category a:hover,
html body .p-query-news-list .wp-block-post-terms a:hover {
    color: #c1a15f !important;
    -webkit-text-fill-color: #c1a15f !important;
}

.p-query-news-list .wp-block-post-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: 1.0rem !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    color: #333 !important;
    font-feature-settings: "palt" 1 !important;
}

.p-query-news-list .wp-block-post-title a {
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.4s ease !important;
}

.p-query-news-list .wp-block-group:hover .wp-block-post-title a {
    color: #c1a15f !important;
}

@media screen and (max-width: 768px) {
    .p-query-news-list .wp-block-group {
        flex-wrap: wrap !important;
        padding: 20px 40px 20px 10px !important;
        gap: 12px !important;
    }

    .p-query-news-list .wp-block-post-title {
        width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}





/* =======================================================
   イベント・お知らせセクション用：すりガラス完全最適化レイアウト
   対象クラス：has-event-glass-panel
======================================================= */
/* 1. パネル本体（すりガラス）の設定 */
html body .has-event-glass-panel {
    position: relative !important;
    z-index: 10 !important;
    
    /* FAQと同じ透過度とぼかし（デザインの統一） */
    background: rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    
    /* 角丸とフチのハイライト */
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    
    /* 内側の余白をたっぷりとる（スマホ〜PCで美しく可変） */
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px) !important;
    overflow: hidden !important; 
    
    /* パネル自体の最大幅を制限し、画面中央に美しく配置 */
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 2. 背景・枠線の強制リセット（エディタ側の見えない白背景を無効化） */
html body .has-event-glass-panel.has-background,
html body .has-event-glass-panel .wp-block-group,
html body .has-event-glass-panel .wp-block-group__inner-container,
html body .has-event-glass-panel [class*="has-background"],
html body .has-event-glass-panel [style*="background"] {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 3. タイトル（H3等）の中央配置 */
html body .has-event-glass-panel .wp-block-heading,
html body .has-event-glass-panel h2,
html body .has-event-glass-panel h3 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(30px, 5vw, 50px) !important;
    
    /* WordPress特有の alignfull（全幅）によるレイアウト破壊を強制リセット */
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

/* ★最強防弾：スマホ/PC用タイトルの出し分けを絶対死守 */
@media screen and (min-width: 769px) {
    html body .has-event-glass-panel h3.sme-hidden-lg-up,
    html body .has-event-glass-panel .wp-block-heading.sme-hidden-lg-up {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    html body .has-event-glass-panel h3.sme-hidden-sm,
    html body .has-event-glass-panel .wp-block-heading.sme-hidden-sm {
        display: none !important;
    }
}

/* 4. リスト本体のすりガラス最適化 */
html body .has-event-glass-panel .p-query-news-list {
    max-width: 800px !important; /* パネルより少し幅を絞り、上品な余白を生む */
    margin: 0 auto !important;
}

/* ★超修正：リスト内の記事タイトル（H2）の中央寄せバグを【完全リセット】 */
html body .has-event-glass-panel .p-query-news-list .wp-block-post-title,
html body .has-event-glass-panel .p-query-news-list h2 {
    text-align: left !important; /* 左寄せに戻す */
    margin: 0 !important; /* ★ここで margin-left: auto などの悪影響をすべて消去 */
    width: auto !important; 
    flex-grow: 1 !important; /* Flexbox内で残りの空間を自然に埋める */
}

/* 各項目の区切り線（ベタ塗りをやめて、ガラスに馴染む半透明に変更） */
html body .has-event-glass-panel .p-query-news-list .wp-block-post {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html body .has-event-glass-panel .p-query-news-list .wp-block-post:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ★ホバー時の背景色を「透過ホワイト」にして、すりガラスの質感を殺さない */
html body .has-event-glass-panel .p-query-news-list .wp-block-group:hover {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important; /* 角丸をつけてホバー領域を柔らかく */
}

/* 5. ボタンブロックの配置と余白最適化 */
html body .has-event-glass-panel .smb-buttons,
html body .has-event-glass-panel .wp-block-buttons {
    margin-top: clamp(40px, 6vw, 60px) !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}



/* =======================================================
   4カラム・スモールカード専用：ミニ・すりガラス効果
   対象クラス：has-mini-glass-card
======================================================= */
/* 1. カラムの枠組み（c-row__col）の余白計算を守るため、大枠の背景は透明化 */
html body .c-row__col.has-mini-glass-card {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* ★重要：左右のpaddingはグリッドの隙間（ガター）を形成するため絶対にリセットしない */
}

/* 2. カード本体（バナー要素）をすりガラス化 */
html body .has-mini-glass-card .smb-items__banner {
    position: relative !important;
    z-index: 10 !important;
    
    /* FAQ等と完全に質感を合わせた透過ガラス（統一感の担保） */
    background: rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    
    /* 小さなカードサイズに合わせて、角丸を少し引き締める（16px → 12px） */
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. 内側のダミー背景色（デフォルトのグレーなど）を強制透明化 */
html body .has-mini-glass-card .smb-items__banner__figure,
html body .has-mini-glass-card .smb-items__banner__figure__dummy {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* 4. テキスト領域の保護と視認性確保 */
html body .has-mini-glass-card .smb-items__banner__body {
    position: absolute !important;
    z-index: 2 !important;
    background: transparent !important;
}

html body .has-mini-glass-card .smb-items__banner__title {
    color: #111 !important; 
    font-family: "Noto Serif JP", serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    /* ★魔法：和紙背景に文字が溶けないよう、背後に白の微細な光彩（影）を追加 */
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8) !important; 
}

/* 5. ホバー時の微細な浮遊感（ガラス感を損なわない上品な演出） */
html body .has-mini-glass-card:hover .smb-items__banner {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    /* ホバー時は少しだけ明るく光らせて、押せることを直感的に伝える */
    background: rgba(255, 255, 255, 0.35) !important; 
}




/* =======================================================
   FV動画専用：白セクションへ繋ぐシームレスグラデーション（新設計完全版）
   対象クラス：custom-fv-to-white
======================================================= */
/* 1. FVセクション本体（余白削除と背景色固定） */
html body .custom-fv-to-white {
    position: relative !important;
    overflow: visible !important; 
    z-index: 10 !important;
    background-color: #ffffff !important;
}

/* 2. 動画のはみ出し防止と下部余白の完全削除 */
html body .custom-fv-to-white .smb-section-with-bgimage__bgimage {
    overflow: hidden !important;
}
html body .custom-fv-to-white .smb-section-with-bgimage__bgimage video,
html body .custom-fv-to-white .smb-section-with-bgimage__bgimage img {
    display: block !important;
    width: 100% !important;
}

/* 3. 最表面の白グラデーションレイヤー（境界線ゼロの魔法） */
html body .custom-fv-to-white::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* ★1pxの隙間バグを防ぐため、少し下へ食い込ませる */
    height: calc(100% + 5px) !important;

    /* ★上部は透明（動画が見える）、下へ向かって真っ白になる */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 60%,    /* 60%までは動画をくっきり見せる */
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0.6) 85%,
        rgba(255, 255, 255, 1) 95%,    /* 100%の前に完全に白にしてブレを無くす */
        #ffffff 100%
    ) !important;

    z-index: 5 !important;
    pointer-events: none !important;
}

/* 4. FVの中にあるコンテンツ（文字など）はグラデーションより手前に出す */
html body .custom-fv-to-white > .smb-section__inner {
    position: relative !important;
    z-index: 10 !important;
}









/* =======================================================
   📷 公式Instagramセクション（専用クラス限定・器設計完全版）
======================================================= */

/* 1. 専用クラスで他への干渉を完全遮断した大枠の器 */
html body .p-instagram-section {
    position: relative !important;
    /* このエリア限定で、和モダン特有のゆったりとした余白（間）をミリ単位でロック */
    padding: clamp(12px, 10vw, 12px) clamp(20px, 4vw, 40px) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* 中央コンテナの最大幅と配置（インスタプラグインが最も綺麗に並ぶ幅へ拡張） */
html body .p-instagram-section > .smb-container__body {
    max-width: 1000px !important; /* エディタの800px指定を安全に上書き */
    margin: 0 auto !important;
    width: 100% !important;
}

/* 2. 見出し（公式Instagram） */
html body .p-instagram-section h2.wp-block-heading {
    font-family: "Noto Serif JP", serif !important;
    color: #111111 !important;
    font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
    letter-spacing: 0.15em !important;
    text-align: center !important;
    line-height: 1.4 !important;
    
    /* サブテキストとの間隔を美しく詰める */
    margin-top: 0 !important;
    margin-bottom: 16px !important; 
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 3. サブテキスト（最新情報や...） */
html body .p-instagram-section p {
    color: #555555 !important;
    font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    
    /* インスタギャラリー（プラグインエリア）との間に、期待感を高める広い余白を取る */
    margin-top: 0 !important;
    margin-bottom: clamp(48px, 7vw, 72px) !important; 
}

/* 4. プラグインが入るエリアのプレースホルダー設計
   ※後日ショートコードブロックに差し替えても、上下の余白バランスが絶対に崩れない強固な土台 */
html body .p-instagram-section .smb-items,
html body .p-instagram-section .wp-block-shortcode,
html body .p-instagram-section .sbi_custom_html {
    width: 100% !important;
    /* ボタンとの間に確実な間隔（間）を空ける */
    margin-bottom: clamp(56px, 8vw, 80px) !important; 
}

/* 現在のダミーバナーの見た目を少しだけ整える（プラグイン移行までの繋ぎ） */
html body .p-instagram-section .smb-items__banner__figure {
    background-color: rgba(0, 0, 0, 0.08) !important; 
    border-radius: 4px !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

html body .p-instagram-section .smb-items__banner:hover .smb-items__banner__figure {
    transform: translateY(-6px) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* 5. ボタンの配置制御（デザインは既存の p-glass-btn クラスに一任） */
html body .p-instagram-section .p-glass-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* =======================================================
   📱 スマホ・タブレット時の余白の最適化
======================================================= */
@media screen and (max-width: 768px) {
    html body .p-instagram-section {
        padding: clamp(56px, 8vw, 80px) clamp(16px, 4vw, 24px) !important;
    }
    
    html body .p-instagram-section p {
        margin-bottom: 40px !important;
    }
    
    html body .p-instagram-section .smb-items,
    html body .p-instagram-section .wp-block-shortcode {
        margin-bottom: 48px !important; 
    }
}

/* =======================================================
   📸 Instagram専用：生成りベースのソフトグロー背景 ＆ 【追加】上下シームレスフェード
======================================================= */
/* 1. ベースの構造定義（背景色を直接塗らず、透明にする） */
html body .bg-insta-glow {
    position: relative !important;
    background-color: transparent !important; /* 本体は透明にして、フェード処理は背景レイヤーに任せる */
}

/* 2. 背景レイヤーに「生成り色＋光彩＋上下の透明化マスク」をすべて合体させる */
html body .bg-insta-glow::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    
    /* 4つの光を重ねてインスタのグラデーションを表現 ＋ 最後に生成り色(#FCFAF6)を敷く */
    background: 
        radial-gradient(circle at 85% 15%, rgba(131, 58, 180, 0.05), transparent 45%),
        radial-gradient(circle at 65% 55%, rgba(253, 29, 29, 0.04), transparent 50%),
        radial-gradient(circle at 20% 85%, rgba(252, 176, 69, 0.08), transparent 45%),
        radial-gradient(circle at 15% 20%, rgba(255, 220, 180, 0.15), transparent 40%),
        #FCFAF6 !important;
        
    /* ⭐️ 上下の境目を美しくぼかす（シームレスフェード） */
    -webkit-mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        #000 clamp(40px, 8vw, 100px), 
        #000 calc(100% - clamp(40px, 8vw, 100px)), 
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        #000 clamp(40px, 8vw, 100px), 
        #000 calc(100% - clamp(40px, 8vw, 100px)), 
        transparent 100%
    ) !important;
    
    pointer-events: none !important;
    z-index: 0 !important;
}

/* 3. 中のコンテンツ（文字や画像）を背景レイヤーより手前に出す */
html body .bg-insta-glow > * {
    position: relative !important;
    z-index: 1 !important;
}


/* =======================================================
   ✨ Instagramプラグイン（Smash Balloon）専用デザイン補正
======================================================= */
/* フィード全体の外枠（余白と配置の最適化） */
html body #sbi_images {
    padding: 0 !important;
    margin: 0 !important;
    gap: clamp(12px, 2vw, 24px) !important; 
}

/* 各画像アイテムの装飾（ダミー枠と同じ質感に） */
html body .sbi_item {
    padding: 0 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

/* ホバー時の浮遊感（ダミーで実装していた動きを引き継ぐ） */
html body .sbi_item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(193, 161, 95, 0.3) !important; 
}

/* 画像自体の設定 */
html body .sbi_photo {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* プラグイン標準の不要なボタン（Load MoreやFollow）を非表示にする */
html body #sbi_load {
    display: none !important;
}

/* 🔘 自作フォローボタンの余白調整 */
html body .p-instagram-section .p-instagram-btn-wrap {
    margin-top: clamp(40px, 6vw, 60px) !important;
    margin-bottom: 0 !important;
}