/* CSS Document */
@media only screen and (max-width: 750px) {
   
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    
/*
    .pc * {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
*/

    .wrapper{
        max-width: 750px;
    }

    /*ナビゲーション*/


    /*キービジュアル*/
    .kv-img{
        position: absolute;
        top: 6%;
        left: 0;
        z-index: 2;
    }

    .kv-bg{
        width: 100%;
    }

    .kv-obj01{
        width: 48%;
        right: -3%;
    }
    .kv-obj02{
        width: 25.3%;
        top: 23%;
        left: 25%;
    }
    
   .sp-nav {
        display: block !important; /* PC版のdisplay制御を上書き */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh !important; /* style.cssのheight:0を上書き */
        z-index: 99999 !important;
        background-color: rgba(24, 127, 196, 0.98); /* 背景を少し濃く */

        /* 初期状態：画面の下に隠す */
        transform: translateY(100%); 
        transition: transform 0.4s ease;
        overflow-y: auto; /* メニューが長い場合にスクロール可能に */
        pointer-events: none; /* 閉じている時はクリックを無効化 */
    }

    /* メニューが開いた状態 */
    .sp-nav.is-open {
        transform: translateY(0);
        pointer-events: auto; /* 開いたらクリックを有効化 */
    }

    /* メニュー内の画像を全画面にフィットさせる（必要に応じて） */
    .sp-nav img {
        width: 100%;
        height: auto;
    }

    /* ハンバーガーボタン自体を最前面に */
    .hamburuger-btn {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99;
        width: 15%; /* サイズ調整 */
    }
   
    

    /*背景白玉アニメーション*/
    .bg-ball01{
        width: 10%
    }

    .floating-sphere {
      position: fixed;
      top: 0;
      left: 0;
      width: 12vw;
      max-width: 250px;
      z-index: 1;
      pointer-events: none;
      opacity: 0.5;
      transition-property: top, left, transform;
      /* サイン波のような、よりオーガニックな動きの設定 */
      transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
      filter: blur(2px);
      will-change: top, left, transform;
    }


    .pala-sphere{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .pala-sphere__pos{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .bg-ball01,
    .bg-ball02,
    .bg-ball03,
    .bg-ball04{
        position: absolute;
        filter: blur(1px);
    }
    .bg-ball01{
        width: 17%;
        top: 0%;
        left: 1%;
    }
    .bg-ball02{
        width: 32%;
        top: 67%;
        right: -10%;
    }
    .bg-ball03{
        width: 25%;
        top: -10%;
        right: -4%;
    }
    .bg-ball04{
        width: 16%;
        top: 68%;
        left: 11%;
    }

    /*全面白玉配置*/
    .para-fixed{
        width: 100%;
        height: 5000px;
        position: fixed;
        top: 40%;
        left: 0;
        background-image: url("../images/parabg.webp");
        background-repeat: repeat;
        background-size: contain;
          will-change: transform; /* ブラウザの描画を最適化 */
          pointer-events: none;
    }

    /*地球儀アニメーション*/
    .rolling{
        animation: rolling 60s linear infinite;
    }

    @keyframes rolling{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }



    /*メインロゴ*/
    #main-logo{
        margin-top: 10%;
    }
    .logo-pos01{
        width: 24.4%;
        top: 29.4%;
    }
    .logo-pos02{
        top: -1%;
        width: 100%;
    }


    .topics-01{
        background-image: url("../images/sp/topics1-bg-sp@2x.webp");
    }
    /*ハート赤*/
    .topics-obj01{
        width: 61.4%;
        top: 1%;
    }

    .topics-02{
        position: relative;
        z-index: 2;
    }
    /*ハート緑*/
    .topics-obj02{
        width: 61.4%;
        top: 7%;
    }
    /*スライダー*/
    .splide{
        width: 79.5%;
    }


    .topics-03{
        background-image: url("../images/sp/topics3-bg-sp@2x.webp");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 2;
    }
    /*ハートオレンジ*/
    .topics-obj03{
        width: 61.4%;
        top: 4%;
    }
    .topics-nav{
        top: 22%;
        width: 80%;
    }

        /*各種オブジェクト配置*/
    .obj-pos{
        position: absolute;
    }

    .obj01{
        width: 38.2%;
        right: -2%;
    }
    .obj02{
        width: 31%;
        bottom: -3%;
        left: 1%;
    }
    .obj03{
        width: 40%;
        top: 7%;
        right: -5%;
    }
    .obj04{
        width: 34.5%;
        top: 19.7%;
        right: 4%;
    }
    .obj05{
        width: 25.6%;
        top: 0;
        right: 10%;
    }
    .obj06{
        width: 43.7%;
        bottom: -8%;
        left: -1%;
    }
    .obj07{
        width: 28.4%;
        top: 10.5%;
        right: 2%;
    }
    .obj08{
        width: 26.5%;
        top: 29%;
        left: -1%;
    }
    .obj09{
        width: 22%;
        top: 69.5%;
        right: 3%;
        z-index: 3;
    }
    .obj10{
        width: 60%;
        bottom: -2%;
        left: -4%;
    }
    .obj11{
        width: 38.4%;
        top: 40%;
        right: -1%;
    }
       /*ここから下層ページ*/
    .obj12{
        width: 29%;
        top: 34%;
    }
    .obj13{
        width: 31.6%;
        top: 3%;
        right: 1%;
    }
    .obj14{
        width: 36%;
        top: 0;
        left: -10%;
    }
    .obj15{
        width: 19.75%;
        top: -2.5%;
        right: 9%;
    } 
    .obj16{
        width: 37.7%;
        top: -6.5%;
        right: -5%;
    }  



    footer{
        background-color: #fff;
        position: relative;
        z-index: 2;
    }

    /*トップに戻るボタン*/
    .top-btn {
   
    max-width: 60px;
    
    
    right: 3%;
    
}


    /*アニメーション*/

    /*ふわふわ*/
    .float{
        animation: floatAnime 1.5s ease-in-out infinite  alternate;
    }
    .float-rev{
        animation: floatAnimeReverse 1.5s ease-in-out infinite  alternate;
    }


    @keyframes floatAnime{
        0%{
            transform: translateY(-10px);
        }
        100%{
            transform: translateY(10px);
        }
    }

    @keyframes floatAnimeReverse{
        0%{
        transform: translateY(10px);
        }
        100%{
            transform: translateY(-10px);
        }
    }


    /*ボワっと*/
    .scale-active{
        transform: translate(-50% , 0) scale(1);
        opacity: 1;
    }
    .scale-active02{
        transform: scale(1);
        opacity: 1;
    }

    /*ふわっと*/
    .fade-active{
        opacity: 1;
    }



    /*ボヨン*/
    .bound-active01 {
        animation: bound 0.7s ease-out forwards; /* forwardsで終了状態を維持 */
    }
    @keyframes bound {
        0%   { transform: scale(1); }
        20%  { transform: scale(1.15, 0.85); } /* 横に広がる */
        35%  { transform: scale(0.9, 1.1); }    /* 縦に伸びる */
        50%  { transform: scale(1.05, 0.95); }
        65%  { transform: scale(0.97, 1.03); }
        100% { transform: scale(1); }
    }




    .fade-up{
        transform: translateY(50px);
        opacity: 0;
        transition: all ease .8s;
        position: relative;
        z-index: 3;
    }

    .fade-up-active{
        transform: translateY(0);
        opacity: 1;
    }


    .fade-in{
        transition: all ease .8s;
        opacity: 0;
    }

    .fade-in-active{
        opacity: 1;
    }





}