/* Swiperのコンテナを画面全体に固定 */
.sslp-container {
    position: fixed !important; /* テーマの枠から脱出 */
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important; /* フォールバック（古いiOS対応） */
    height: 100dvh !important; /* Swiperの計算を無視して画面いっぱいに */
    z-index: 99999; /* 最前面へ */
    background: #000;
}

/* スライド自体の高さも強制 */
.swiper-slide {
    height: 100vh !important; /* フォールバック（古いiOS対応） */
    height: 100dvh !important;
    width: 100% !important;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;

    /* 背景画像の設定 */
    background-repeat: no-repeat;
    background-size: 100% auto; /* 横サイズを基準に、画像が全て表示されるように */
    background-position: center center; /* 上下が均等にスペースが空くように中央配置 */
}

/* テキストのスタイル */
.slide-content h2 {
    font-size: 2.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    margin-bottom: 20px;
    font-weight: bold;
}

/* --- CTAボタンのスタイル --- */
.slide-content {
    position: relative; /* ★CTAをabsolute配置するための基準 */
}

.sslp-btn-wrapper {
    position: absolute;  /* ★top: xx% を効かせる */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;       /* 既存の余白は無効化 */
    z-index: 3;          /* テキスト等より前面（必要なら2でもOK） */
}

.sslp-cta-button {
    display: inline-block;
    padding: 15px 50px;
    background: #ff4757; /* ボタンの色 */
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border: 2px solid #ff4757;

    white-space: nowrap; /* デフォルトは改行を防止（19文字未満） */
    /* max-widthはJavaScriptで親要素（コンテナ）の幅に合わせて動的に設定される */
    padding-inline: clamp(16px, 4vw, 50px); /* paddingを調整 */
    line-height: 1.15;
    text-align: center;
    /* 19文字以上の場合、JavaScriptで white-space: normal が適用される */
    /* フォントサイズに応じて、JavaScriptで min-width と max-width が動的に設定される */
}

.sslp-cta-button:hover {
    background: #fff;
    color: #ff4757 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.sslp-cta-button:active {
    transform: translateY(1px);
}

/* Swiperのドット */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}

/* 動画/YouTube用スライド */
.sslp-slide-media {
    position: relative;
    overflow: hidden;
}

.sslp-slide-media .sslp-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* video をトリミングして全面に */
.sslp-slide-media video.sslp-media {
    object-fit: cover;
}

/* テキスト・CTAを前面に */
.sslp-slide-media .slide-content {
    position: relative;
    z-index: 2;
}

/* =========================
   動画/YouTubeでもスワイプ可能にする
   ========================= */

/* デフォルトは “スワイプ優先”：メディアがイベントを奪わない */
.sslp-slide-media .sslp-media{
    pointer-events: none;
}

/* 操作モード時だけメディア操作を許可 */
.sslp-slide-media.is-interactive .sslp-media{
    pointer-events: auto;
}

/* スワイプ受付用の透明オーバーレイ */
.sslp-slide-media .sslp-swipe-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;          /* media(0) と slide-content(2) の間に入れる */
    pointer-events: auto; /* ここでタッチ/ドラッグを受ける */
}

/* 操作モード時はオーバーレイを無効化（操作を通す） */
.sslp-slide-media.is-interactive .sslp-swipe-overlay{
    pointer-events: none;
}

/* ヒント表示 */
.sslp-slide-media .sslp-swipe-hint{
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3; /* CTAより上でもOK（邪魔なら2に） */
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
}

/* 音声トグルボタン（動画用） */
.sslp-slide-media .sslp-audio-toggle{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4; /* overlayより前面 */
    padding: 6px 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.sslp-slide-media .sslp-audio-toggle.is-unmuted{
    background: rgba(34,113,177,.9);
}

/* 「スワイプに戻る」ボタン */
.sslp-slide-media .sslp-interactive-exit{
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    padding: 8px 10px;
    border-radius: 10px;
    border: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: none; /* 操作モードのときだけ表示 */
}

.sslp-slide-media.is-interactive .sslp-interactive-exit{
    display: inline-block;
}

/* =========================
   CTA位置(top%)を「画面基準」にする（フロント用）
   ========================= */

/* スライドを absolute 配置の基準にする */
.swiper-slide {
    position: relative;
}

/* slide-content をスライド全面に広げる（top:% の基準を 100dvh にする） */
.slide-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* 見出しは中央に（今まで通りの見た目） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    z-index: 2;
    text-align: center;
}

/* CTA wrapper を absolute 化（top は PHP が style="top:60%" を出す前提） */
.sslp-btn-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;   /* 既存の margin-top:30px を打ち消す */
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* マイクロコピーのスタイル */
.sslp-microcopy {
    text-align: center;
    margin-bottom: 5px;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
}

/* =========================
   PC表示：9:16 を画面中央に固定
   ========================= */
@media (min-width: 1024px) {
    /* PC表示時もスマホと同じように画面全体に表示 */
    .sslp-container,
    .sslp-container .swiper-wrapper {
        height: 100vh !important; /* フォールバック（古いiOS対応） */
        height: 100dvh !important; /* 画面全体の高さ */
    }

    /* PC表示時もスライドの高さを100dvhにする（スマホと同じ） */
    .sslp-container .swiper-slide {
        height: 100vh !important; /* フォールバック（古いiOS対応） */
        height: 100dvh !important; /* スマホと同じく画面全体の高さ */
        width: 100% !important;
    }

    .sslp-container {
        /* 画面中央に配置 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        /* 固定幅（520px）、高さは100dvh（スマホと同じ） */
        width: 520px !important;
        height: 100vh !important; /* フォールバック（古いiOS対応） */
        height: 100dvh !important; /* スマホと同じく画面全体の高さ */

        /* 見た目（任意） */
        border-radius: 24px;
        overflow: hidden; /* スクロールは不要（スマホと同じ） */
        box-shadow: 0 20px 60px rgba(0,0,0,0.45);

        /* fixedのままでOK（あなたの既存が fixed） */
    }

    /* ページ全体の背景を黒で埋める（外側） */
    body {
        background: #000 !important;
    }

    /* Swiperのページネーションが枠外に出る場合の調整（必要なら） */
    .swiper-pagination {
        right: 10px;
    }
}