@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: url("../images/kami.webp") no-repeat center fixed;
    background-size: cover;
}

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

/*=========== 3. 移動を担当する外枠 (aタグ) ===========*/
.float-item {
    position: absolute;
    width: 80px; height: 80px;
    display: block;
    pointer-events: auto;
    z-index: 10;
}

/* ホバーした瞬間に移動を停止 */
.float-item:hover {
    animation-play-state: paused;
    z-index: 999;
}

/*=========== 4. 巨大化を担当する中身 (spanタグ) ===========*/
.float-item span {
    display: block;
    width: 100%; height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-out;
    will-change: transform;
    /* opacity: 0; を削除（中身のイチゴを見せるため） */
}

/* ホバー時にspanだけが巨大化 */
.float-item:hover span {
    transform: scale(4.0);
}

/* 画像の設定 */
.float-item img {
    width: 100%; height: 100%; object-fit: contain;
    display: block;
    transition: opacity 0.4s ease-in-out; 
    opacity: 1;
}

/* ホバーした時：画像を消して2枚目画像を見せる */
.float-item:hover img {
    opacity: 0;
    transition-delay: 0.1s; /* 0.1秒だけ消えるのを待たせる */
}
/* 2枚目も最初からそこに配置しておく（ただし透明） */
.img-hover {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* ホバーした時：1枚目をパッと消さず、2枚目をふわっと出す */
.float-item:hover .img-base {
    opacity: 0;
    transition: opacity 0.1s; /* わずかに時間をずらす */
}

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


/*=========== 5. アニメーション定義 ===========*/
/* これがないと .p1 などの animation: moveRandom が機能しません */
@keyframes moveRandom {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(15vw, 15vh); }
    50%  { transform: translate(-10vw, 30vh); }
    75%  { transform: translate(-20vw, -10vh); }
    100% { transform: translate(0, 0); }
}

/*=========== 6. 個別配置 & アニメーション & ホバー画像 ===========*/

/* p1〜p15まで、アニメーションを維持しつつホバー画像を個別設定 */

.p1  { top: 10%; left: 10%; animation: moveRandom 15s infinite ease-in-out; }
.p1:hover span { background-image: url("../images/nmb_01.jpg"); }

.p2  { top: 20%; left: 80%; animation: moveRandom 22s infinite ease-in-out reverse; }
.p2:hover span { background-image: url("../images/akb_01.JPG"); }

.p3  { top: 70%; left: 15%; animation: moveRandom 18s infinite ease-in-out; }
.p3:hover span { background-image: url("../images/daina.png"); }

.p4  { top: 40%; left: 50%; animation: moveRandom 25s infinite ease-in-out reverse; }
.p4:hover span { background-image: url("../images/x_ai.png"); }

.p5  { top: 80%; left: 70%; animation: moveRandom 20s infinite ease-in-out; }
.p5:hover span { background-image: url("../images/nogi_2015.JPG"); }

.p6  { top: 15%; left: 40%; animation: moveRandom 14s infinite ease-in-out reverse; }
.p6:hover span { background-image: url("../images/instagram_ai.png"); }

.p7  { top: 60%; left: 30%; animation: moveRandom 28s infinite ease-in-out; }
.p7:hover span { background-image: url("../images/nmb_02.jpg"); }

.p8  { top: 85%; left: 40%; animation: moveRandom 19s infinite ease-in-out reverse; }
.p8:hover span { background-image: url("../images/nmb_03.jpg"); }

.p9  { top: 10%; left: 90%; animation: moveRandom 24s infinite ease-in-out; }
.p9:hover span { background-image: url("../images/nmb_04_01.png"); }

.p10 { top: 50%; left: 85%; animation: moveRandom 21s infinite ease-in-out reverse; }
.p10:hover span { background-image: url("../images/facebook_ai.png"); }

.p11 { top: 5%;  left: 20%; animation: moveRandom 16s infinite ease-in-out; }
.p11:hover span { background-image: url("../images/kinnikuman.JPG"); }

.p12 { top: 65%; left: 60%; animation: moveRandom 23s infinite ease-in-out reverse; }
.p12:hover span { background-image: url("../images/tamaki_01.JPG"); }

.p13 { top: 30%; left: 75%; animation: moveRandom 27s infinite ease-in-out; }
.p13:hover span { background-image: url("../images/zyutugo.webp"); }

.p14 { top: 90%; left: 10%; animation: moveRandom 17s infinite ease-in-out reverse; }
.p14:hover span { background-image: url("../images/ekisupo.JPG"); }

.p15 { top: 40%; left: 20%; animation: moveRandom 26s infinite ease-in-out; }
.p15:hover span { background-image: url("../images/cobra_01.JPG"); }

.p16 { top: 50%; left: 10%; animation: moveRandom 20s infinite ease-in-out; }
.p16:hover span { background-image: url("../images/tigers_01.jpg"); background-size: cover; /* 画像全体を表示 */}

.p17 { top: 20%; left: 45%; animation: moveRandom 25s infinite ease-in-out; }
.p17:hover span { background-image: url("../images/hero6.jpg"); }

.p18 { top: 25%; left: 75%; animation: moveRandom 17s infinite ease-in-out; }
.p18:hover span { background-image: url("../images/hero5.jpg"); }

/*=========== 7. NMBマーク (nmb.png) ===========*/
.random-ghost {
    position: fixed; top: 50%; left: 50%; width: 40px; z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 100, 100, 0.8));
}
.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; }

@keyframes fire-move {
    0%   { transform: translate(-40vw, -40vh); opacity: 0.8; }
    50%  { transform: translate(30vw, 30vh); opacity: 0.6; }
    100% { transform: translate(-40vw, -40vh); opacity: 0.8; }
}
/* 動画表示用の画面（最初は隠しておく） */
#videoContainer1 {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* 背景を黒くする */
    z-index: 10000; /* 一番手前に */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#videoContainer2 {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* 背景を黒くする */
    z-index: 10000; /* 一番手前に */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#myVideo {
    max-width: 90%;
    max-height: 80%;
    border: 3px solid #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

/*=========== 8. フッター設定 ===========*/
.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;
}
/*=========== 9. ヘッダー設定 ===========*/
.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;
}

/*=========== 11. 中央の戻るリンク設定 ===========*/
.center-link-bar {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%); /* ぴったり真ん中に合わせる */
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.5); /* ヘッダー等と同じ半透明の黒 */
    text-align: center;
    z-index: 1; /* 画像(z-index:10)より後ろに配置して干渉を防ぐ */
}

.center-link-bar a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #fff; /* 枠線をつけてボタン風に */
    transition: background 0.3s;
}

.center-link-bar a:hover {
    background: rgba(255, 255, 255, 0.2); /* ホバー時に少し明るく */
}
@media screen and (max-width: 768px) {
    .float-item {
        width: 60px;
        height: 60px;
    }

    .float-item.is-tapped {
        z-index: 5000;
        animation-play-state: paused;
    }
    
    /* 二重になっていた部分を統合 */
    .float-item.is-tapped span {
        transform: scale(3.5); /* スマホでの拡大率（ここはお好みで） */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        border: none;
    }
    
    .float-item.is-tapped img {
        opacity: 0;
    }

    .center-link-bar {
        z-index: 2000;
    }
    .random-ghost {
        width: 20px;
    }
}

/* PCでのホバー時チカチカ防止：画像を裏側で先に読み込む */
/* すべてのホバー用画像を事前に読み込む */
body::after {
    content: 
        url("../images/nmb_01.jpg") 
        url("../images/akb_01.JPG") 
        url("../images/daina.png") 
        url("../images/x_ai.png")
        url("../images/nogi_2015.JPG")
        url("../images/instagram_ai.png")
        url("../images/nmb_02.jpg")
        url("../images/nmb_03.jpg")
        url("../images/nmb_04_01.png")
        url("../images/facebook_ai.png")
        url("../images/kinnikuman.JPG")
        url("../images/tamaki_01.JPG")
        url("../images/zyutugo.jpg")
        url("../images/ekisupo.JPG")
        url("../images/cobra_01.JPG")
        url("../images/tigers_01.jpg")
        url("../images/hero6.jpg")
        url("../images/hero5.jpg");
    display: none;
}