@charset "utf-8";

/*=========== 1. 全体設定（背景画像） ===========*/
* { box-sizing: border-box; }
html { height: 100%; }
body {
    font-family: "メイリオ", Meiryo, sans-serif;
    margin: 0; padding: 0;
    min-height: 100vh;
    background-image: url("../images/bakuhatumae.webp"); 
    transition: background-image 0.5s ease-in-out; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/*=========== 2. コンテナ設定 ===========*/
.random-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 1;
    pointer-events: none;
}

/*=========== 3. 画像共通 & ホバー設定（完全版） ===========*/
.float-item {
    position: absolute; /* 親（container）に対しての配置 */
    width: 100px; 
    height: 100px;
    display: block;
    /* --- ここが重要：子要素（img）の基準点になる --- */
    position: absolute; 
    /* ------------------------------------------- */
    pointer-events: auto;
    animation: entryUp 1.5s ease-out forwards, yurayura 3s ease-in-out 1.5s infinite;
    transition: transform 0.5s ease-out;
}

/* p5のヒーロー画像（HERO.png）だけを80%の大きさに縮小 */
.p5 .img-hover {
    transform: scale(0.8);
    transform-origin: center bottom; /* 足元を基準にすると浮いて見えません */
}

/* ホバーした時も、その縮小比率を維持したまま巨大化させる設定 */
.p5:hover .img-hover {
    transform: scale(0.8); 
}


.float-item img {
    /* aタグの中で2枚をぴったり重ねる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
}

/* ホバー用画像を隠す */
.img-hover {
    opacity: 0;
}

/* ホバー時の挙動 */
.float-item:hover {
    animation-play-state: paused;
    transform: scale(3.0);
    z-index: 999;
}

.float-item:hover .img-base {
    opacity: 0;
}
.float-item:hover .img-hover {
    opacity: 1;
}

.float-item:hover {
    animation: none; /* 揺れを止める */
    transform: scale(3.0);
    z-index: 1000; /* 怪人より手前に */
    cursor: pointer;
}


/*=========== 5. ザコ怪人（火の玉風ランダム移動） ===========*/
.random-ghost {
    position: fixed;
    top: 50%; left: 50%;
    /* ここを大きくします */
    width: 150px;  /* ザコの大きさに変更 */
    z-index: -100;
    pointer-events: none;
    filter: drop-shadow(0 0 15px rgba(114, 96, 195, 0.9)); /* 影も少し強く */
}
.random-ghost img {
    width: 100%;
    animation: fire-move 15s ease-in-out infinite;
}
.g1 img { animation-duration: 12s; animation-delay: -2s; }
.g2 img { animation-duration: 18s; animation-delay: -5s; }
.g3 img { animation-duration: 15s; animation-delay: -8s; }
.g4 img { animation-duration: 20s; animation-delay: -12s; }
.g5 img { animation-duration: 14s; animation-delay: -15s; }

/*=========== 6. アニメーション定義 ===========*/
@keyframes entryUp {
    0% { transform: translateY(100vh); }
    100% { transform: translateY(0); }
}
@keyframes yurayura {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-5px, -10px) rotate(2deg); }
    66% { transform: translate(5px, 5px) rotate(-2deg); }
}
@keyframes purun_huge {
    0%   { transform: scale(1.0); }
    100% { transform: scale(3.0); }
}
@keyframes fire-move {
    0%   { transform: translate(-40vw, -40vh) scale(1.0); opacity: 0.8; }
    25%  { transform: translate(30vw, -30vh) scale(1.2); opacity: 1.0; }
    50%  { transform: translate(-20vw, 35vh) scale(0.8); opacity: 0.6; }
    75%  { transform: translate(40vw, 0vh) scale(1.1); opacity: 0.9; }
    100% { transform: translate(-40vw, -40vh) scale(1.0); opacity: 0.8; }
}

/*=========== 7. 光の配置（横幅いっぱいに均等配置） ===========*/
.p1 { top: 30%; left: 10%; animation-delay: 0.1s, 1.6s; }
.p2 { top: 30%; left: 30%; animation-delay: 0.2s, 1.7s; }
.p3 { top: 30%; left: 50%; animation-delay: 0.3s, 1.8s; margin-left: -40px; } /* 真ん中 */
.p4 { top: 30%; left: 70%; animation-delay: 0.4s, 1.9s; margin-left: -80px; }
.p5 { top: 30%; left: 90%; animation-delay: 0.5s, 2.0s; margin-left: -80px; }

/* 
  左に寄るのを防ぐため、後半のキャラの margin-left を調整して
  「画像の左端」ではなく「画像全体」が指定の位置に来るようにしています。
*/
@keyframes shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, -10px); }
  30% { transform: translate(10px, 10px); }
  50% { transform: translate(-10px, 10px); }
  70% { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}
.shaking { animation: shake 0.3s linear; }


/*=========== 8. ヘッダー設定 ===========*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    background: rgba(0, 0, 0, 0.5); /* フッターとお揃いの半透明 */
    color: #fff;
    text-align: center;
    z-index: 1000; /* 最前面に固定 */
    line-height: 2;
}

.site-header h1 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
}

/*=========== 9. フッター設定 ===========*/
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    color: #fff;
    text-align: center;
    font-size: 12px;
    z-index: 1000; /* 〇デザインより手前、動画より奥 */
    pointer-events: auto; /* フッター部分はクリック可能に */
}

.site-footer p {
    margin: 0;
    letter-spacing: 1px;
}

/*=========== 10. スマホ向け設定 (画面幅768px以下) ===========*/
@media screen and (max-width: 768px) {
    .random-container {
        position: absolute;
        display: grid;
        /* 2列に並べる（1列にしたい場合は 1fr 1つにする） */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;           /* キャラ同士の間隔を少し詰める */
        
        /* ↓ここが重要：ヘッダーとフッターを避ける余白 */
        padding-top: 130px;    /* ヘッダー(site-header)と被らないよう多めに空ける */
        padding-bottom: 80px; /* フッターと被らないよう空ける */
        
        width: 100%;
        height: auto;
        min-height: 100vh;
        pointer-events: none;
    }

    .p1, .p2, .p3, .p4, .p5 {
        position: relative;
        top: auto;
        left: auto;
        margin: 0 auto; /* 中央寄せ */
        
        /* キャラを少し小さくして画面内に収める */
        width: 130px; 
        height: 130px;
        pointer-events: auto;
    }

    /* 5番目(P5)が奇数で端に寄る場合は、中央に寄せる設定 */
    .p5 {
        grid-column: span 2; /* 2列分使って真ん中に配置 */
    }

    /* スマホでの拡大倍率（画面からはみ出さない程度に） */
    .float-item:hover {
        transform: scale(1.6); 
        z-index: 500;
    }
}