@charset "utf-8";
/*
Theme Name: ISSUE child
Theme URI:https://tcd-theme.com/tcd106
Description:WordPressテーマ「ISSUE」の子テーマ
Template:issue_tcd106
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');

/* 背景文字を表示させたい要素の親要素に適用 */
.cb_free_space {
    position: relative;
    overflow: hidden;
}

/* =========================================== */
/* 💥 叩きつけるようなバーストアニメーションの定義 */
/* 上から急降下し、バン！と止まる効果 */
/* =========================================== */
@keyframes smash-burst {
  0% {
    /* 1. 開始時: 上方に移動し、見えないように透明 */
    transform: translate(-50%, -100px) rotate(-5deg); /* Y軸を上へ移動 */
    opacity: 0; 
  }
  80% {
    /* 2. 衝突直前: ほぼ本来の位置まで急降下 */
    transform: translate(-50%, 0) rotate(-5deg);
    opacity: 1; /* 見えるようになる */
  }
  90% {
    /* 3. 跳ね返り: 衝突の勢いで少し押し戻される */
    transform: translate(-50%, -10px) rotate(-5deg); /* わずかに上に跳ね返る */
    opacity: 1;
  }
  100% {
    /* 4. 停止: 最終的な位置で固定 */
    transform: translate(-50%, 0) rotate(-5deg);
    opacity: 1;
  }
}

/* ------------------------------------------- */
/* ↓↓↓ PC (画面幅 768px以上) でのみ適用 ↓↓↓ */
/* ------------------------------------------- */
@media screen and (min-width: 768px) {
    
    /* 擬似要素（::before）を使って背景文字を表示 */
    #cb_content_1::before {
        content: "MPAで「高収入のプロ」を目指せ!!";
        
        /* 1. 位置と配置 */
        position: absolute;
        top: 5%; 
        left: 50%; 
        /* transformの初期値はanimationで制御されるため、ここでは省略可能ですが、念のため記述 */
        transform: translate(-50%, 0) rotate(-5deg); 
        z-index: 0;
        
        /* 2. デザインと色 */
        color: #0066cc;
        opacity: 0.85; /* アニメーション終了時の固定値 */
        
        /* 3. フォントとサイズ */
        font-family: 'Noto Sans JP', cursive;
        font-size: 6vw;
        font-weight: bold;
        
        /* 4. その他の装飾 */
        white-space: nowrap;
        pointer-events: none;
        
        /* 5. 💥 アニメーションの追加 */
        animation: 
            smash-burst 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
            /* 実行時間: 1秒 | タイミング関数: バネのような動き | 終了後の状態維持 */
    }
}
/* ------------------------------------------- */
/* ↑↑↑ PC (画面幅 768px以上) でのみ適用 ↑↑↑ */
/* ------------------------------------------- */


/* =========================================== */
/* engageポップアップバナーの設定 */
/* =========================================== */
.popup-banner {
    position: fixed; /* 画面に固定 */
    
    /* ↓↓↓ ユーザー指定の配置 ↓↓↓ */
    /* .is-visibleクラスが適用された後の最終位置 */
    bottom: 150px;    /* 画面下から150pxの位置 */
    right: 100px;     /* 画面右から100pxの位置 */
    left: auto;       /* 左からの位置指定は削除 (右からの指定を優先) */
    transform: none;  /* 中央配置のためのtransformは不要なのでリセット */
    /* ↑↑↑ ユーザー指定の配置 ↑↑↑ */
    
    width: 300px;     /* バナーの幅 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 影をつけて目立たせる */
    background-color: white; /* 背景色 */
    border-radius: 8px; /* 角を丸くする */
    z-index: 30;    /* 他の要素より手前に表示 */
    overflow: hidden; /* 画像がはみ出さないように */
    
    /* 初期表示ではこのopacity: 1 は適用されません（下記 .initial-hidden が優先）*/
    opacity: 1; 

    /* ★★★ 変更点: opacityとbottomをtransitionに追加し、アニメーション時間を設定 ★★★ */
    transition: transform 0.3s ease, box-shadow 0.3s ease, 
                opacity 0.6s ease-out, bottom 0.6s ease-out; /* ゆっくり表示させるための設定 */
}

/* ★★★ 新規追加: 初期状態（画面下に隠す） ★★★ */
.popup-banner.initial-hidden {
    opacity: 0; /* 最初は完全に透明 */
    bottom: 0px; /* 画面の下端（0px）からさらに下へ隠す */
    pointer-events: none; /* 非表示中はクリックを無効化 */
}

/* ★★★ 新規追加: 表示状態（最終位置） - JSでこのクラスを付与 ★★★ */
.popup-banner.is-visible {
    opacity: 1; /* 透明から不透明へフェードイン */
    bottom: 150px; /* 0pxから指定位置へスライドアップ */
    pointer-events: auto; /* クリックを有効化 */
}


/* ホバー時のスタイル（浮かび上がるアニメーション） */
.popup-banner:hover {
    /* 上に5px浮かび上がらせる */
    transform: translateY(-5px); 
    
    /* 影を濃くして、浮き上がっている感を強調 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* 閉じるボタンの設定 */
.close-button {
    position: absolute; /* バナーの右上に配置するために絶対位置指定 */
    top: 5px;       /* 上端から5px */
    right: 5px;     /* 右端から5px */
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    color: white;   /* 文字色 */
    border: none;
    border-radius: 50%; /* 円形にする */
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    padding: 0;
    font-family: sans-serif; /* ×が見やすいフォント */
    z-index: 1001; /* バナー画像より前面に */
}

.close-button:hover {
    background: rgba(0, 0, 0, 0.7); /* ホバー時に濃くする */
}

/* バナー内の画像設定 */
.popup-banner img {
    display: block;
    width: 100%; /* バナーの幅いっぱいに表示 */
    height: auto;
}

/* 非表示にするためのクラス (ユーザーが閉じた時などに使用) */
.popup-banner.hidden {
    opacity: 0;
    /* bottom: 0px; なども追加すると、閉じるときもスライドアウトします */
    pointer-events: none; /* 非表示時にクリックできないように */
}

/* ↓↓↓ スクロール後の新しい位置を定義するクラス (既存機能の維持) ↓↓↓ */
.popup-banner.scrolled {
    bottom: 10px; /* スクロール後の位置 */
}
/* ↑↑↑ スクロール後の新しい位置を定義するクラス ↑↑↑ */


/* =========================================== */
/* 代表画像の設定 */
/* =========================================== */
/* 親要素（<picture>）の設定 */
.un_topMessage_img {
  position: relative;
  display: block;
  z-index: 1; 
}

/* 画像（<img>）の設定 */
.un_topMessage_img img {
  /* 画像を親要素より上に配置 */
  position: relative;
  z-index: 2;
}

/* 擬似要素（影/枠線）の作成 */
.un_topMessage_img::after {
  content: ""; /* 擬似要素には content: "" が必須 */
  
  /* 絶対配置で画像と同じ位置に配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 影となる要素を画像の下に配置 */
  z-index: 1; 
  
  /* 1. 枠線を指定 */
  border: 4px solid #0066cc; /* 添付画像にある青い枠線の色 */
  
  /* 2. 枠線を右下または左下にずらす */
  transform: translate(10px, 10px); /* 右に15px、下に15pxずらす */

}