@charset "utf-8";

body{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

img{
    display: block;
    width: 100%;
    object-fit: cover;
}

li{
    list-style: none;
}


.page-wrapper{
    overflow: hidden; /* ここで制御する */
    width: 100%;
}

/*共通パーツ*/
.index-ctrl{
     position: relative;
     z-index: 2;
}
.content-pos{
    position: absolute;
    top: 0;
    left: 0;
}
.sp{
    display: none;
}

/*ヘッダー*/
header{
    position: relative;
    z-index: 2;
}
.kv{
    position: relative;
    z-index: 2;
}
.kv-obj01{
    width: 58.1%;
    position: absolute;
    top: 26%;
    left: 20.9%;
    z-index: 2;
    opacity: 0;
    transition: all ease .8s;
    transform: translateY(10px);
}
.kv-obj02{
    width: 58%;
    position: absolute;
    bottom: 6.2%;
    right: 9.1%;
    z-index: 3;
    opacity: 0;
    transition: all ease .8s .5s;
    transform: translateY(10px);
}
.kv-obj03{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: all ease .8s 1s;
    transform: translate(30px, -30px);
}
.kv-obj04{
    width: 100%;
    position: absolute;
    bottom: -6.5%;
    left: 0;
}

/*ナビゲーション*/
nav{
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}
.nav-link{
    display: flex;
    justify-content: space-between;
    width: 70.25%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}
.nav-link__img{
    width: 23%;
}
.nav-obj01{
    width: 100%;
    position: absolute;
    top: 7%;
    left: 0;
    opacity: 0;
    transition: all ease .8s 1s;
    transform: translate(30px, -30px);
}

/*スケジュール*/
#schedule{
    position: relative;
}
.schedule-contents{
    width: 75%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 30%;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
}
.schedule-contents__sp{
       display: none;
    }
.schedule-obj01{
    width: 38%;
    object-fit: contain;
    transition: all ease .8s;
}
.schedule-obj02{
    width: 36.5%;
    object-fit: contain;
    transition: all ease .8s .5s;
}
.schedule-obj03{
    width: 35%;
    object-fit: contain;
    transition: all ease .8s 1s;
}
/*装飾*/
.schedule-obj04{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.schedule-obj05{
    width: 100%;
    position: absolute;
    bottom: -0.2%;
    left: 0;
}

/*新店情報*/
#new{
    position: relative;
}
.new-obj__txt01{
    position: absolute;
    top: -10%;
    right: 15%;
    width: 20%;
    transition: all ease .8s;
}
.new-obj__txt02{
    position: absolute;
    top: -2%;
    right: 7%;
    width: 16%;
    transition: all ease .8s .5s;
}

.new-obj01{
    position: absolute;
    bottom: -0.1%;
    left: 0;
}
.splide__slide{
    cursor: pointer;
}

/*リニューアル*/
#rn{
    position: relative;
}

.rn-obj01{
    position: absolute;
    bottom: -0.5%;
    left: 0;
}
.rn-obj02{
    position: absolute;
    top: -15%;
    left: 0;
    z-index: 1;
}



/*イベント・セール*/
#event{
    position: relative;
}
.event-link{
    width: 73.5%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

}
.event-link__img{
    width: 48%;
    transition: all ease .8s;
}
.event-link__img:hover{
    transform: translateY(-10px);
}
.event-obj01{
    position: absolute;
    bottom: -0.5%;
    left: 0;
}
.event-obj02{
    position: absolute;
    top: -15%;
    left: 0;
    z-index: 1;
}



/*アプリリンク*/
.app{
    background-color: #d7edea;
    padding: 5% 0;
    position: relative;
}
.app-text{
    width: 48%;
    margin: 0 auto;
}
.app-link{
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin: 5% auto 0;
}
.app-link a{
    display: block;
    width: 47%;
    transition: all ease .8s;
}
.app-link a:hover{
    transform: translateY(-10px);
}
.top-btn{
    width: 11.5%;
    display: block;
    margin: 5% auto 0;
    cursor: pointer;
    transition: all ease .8s;
}
.top-btn:hover{
    transform: translateY(-10px);
}

/*ポップアップ*/

.renewal-popup{
    margin-top: 1.5%;
}

.renewal-popup__title{
    position: relative;
}
.popup-obj01{
    position: absolute;
    width: 21%;
    top: 18%;
    right: 12%;
    z-index: 3
}
.popup-item__list{
    width: 80%;
    margin: 3% auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    padding:3%;
}
.popup-trigger{
    width: 30%;  
    cursor: pointer;
    margin-bottom: 5%;
    transition: all ease .8s;
}
.popup-trigger:hover{
    transform: translateY(-1px);
}

/*モーダルオン*/
.overlay {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 70;
}

.overlay.is-active {
  display: flex; /* アクティブ時に表示 */
}

.popup-content {
  position: relative;
  max-width: 340px;
}

.popup-close{
    width: 10%;
    position: absolute;
    top: 1%;
    right: -3%;
    transform: translateX(-50%);
    cursor: pointer;
}




/*


/*アニメーション関係*/



.fade-up{
    transform: translateY(50px);
    opacity: 0;
    transition: all ease .8s;
}
.fade-up-active{
    transform: translateY(0);
    opacity: 1;
}
.fade-in{
    opacity: 0;
   
}
.fade-in-active{
    opacity: 1;
}
.fade-slide-active{
    opacity: 1;
    transform: translate(0 , 0);
}


/*追加分*/
    .popup-newopen{
            background-color:#f4b4d0;
            max-width:1200px;
    }
    .popup-renewopen{
            background-color:#facd89;
            max-width:1200px;
    }
    #eventinfo{
            background-color:#65aadd;
            max-width:1200px;
            padding:5% 15%;
    }
    .mb10{
        margin-bottom:5%;
    }

@media screen and (max-width: 750px){
   
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    
   /*ヘッダー*/
    .kv-obj01{
        width: 75.3%;
        top: 19%;
        left: 50%;
        translate: -50% 0;
    }
    .kv-obj02{
        width: 81%;
        bottom: 10.3%;
        right: 4.9%;
    }
    .kv-obj04{
       bottom: 0;
    }

    /*ナビゲーション*/
    .nav-link{
        flex-wrap: wrap;
        justify-content: center;
        width: 70%;
        bottom: 2%;
        gap: 5%;
    }
    .nav-link__img{
        width: 43%;
        margin-bottom: 3%;
    }
    .nav-obj01{
        top: -7.5%;
        z-index: -1;
    }

    /*スケジュール*/
    #schedule{
        position: relative;
    }
    .schedule-contents{
       display: none;
    }
    .schedule-contents__sp{
        display: block;
    }
    .schedule-obj01__sp{
        width: 51%;
        object-fit: contain;
        position: absolute;
        top: 17%;
        left: 5%;
        transition: all ease .8s;
        z-index: 2;
    }
    .schedule-obj02__sp{
        width: 37%;
        object-fit: contain;
        position: absolute;
        top: 18%;
        right: 8%;
        z-index: 2;
        transition: all ease .8s .5s;
    }
    .schedule-obj03__sp{
        width: 44%;
        object-fit: contain;
        position: absolute;
        bottom: 25%;
        left: 25%;
        z-index: 2;
        transition: all ease .8s 1s;
    }
    /*装飾*/
    .schedule-obj04{
        top: 12%;
    }
    .schedule-obj05{
        bottom: -2.9%;
    } 

    
    /*新店情報*/
    #new{
        position: relative;
    }
    .new-obj__txt01{
       width: 47%; 
        left: 50%;
        top: -9.5%;
        translate: -50% 0;
        z-index: 2;
    }
    .new-obj__txt02{
        width: 31.4%;
        top: -3.5%;
        right: 14%;
        z-index: 2;
    }

    .new-obj01{
        position: absolute;
        bottom: -0.1%;
        left: 0;
    }
    
    .splide{
        margin-bottom: 5%;
    }
    
    /*リニューアル*/
    .rn-obj02{
        top: -8%; 
    }
    
    /*マップ*/

    .map{
        margin-top: 16%;
    }

    .map-tab__area{
        width: 62.8%;
        gap: 0;
        justify-content: space-between;
        translate: -50% -80%;
    }
    .map-obj{
        position: absolute;
        width: 20.6%;
        top: -4%;
        right: 13%;
    }
    .map-tab{
        cursor: pointer;
        /* 正円を作るための設定 */
        width: 60px;           /* 幅と高さを同じにする */
        height: 55px;
        border-radius: 50%;    /* 50%で正円になる */

        /* 文字を真ん中に配置 */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fac23d;
        border: 1px solid #e83820;
        color: #ffffff;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        /* 文字の折り返しを防ぐ */
        white-space: nowrap;
    }
    .map-tab__active{
        background-color: #ee7836;
    }
    .map-tab .size{
        font-size: 26px
    }

    .map-area{
        width: 83.3%;
        margin: 0 auto;
        position: relative;
    }
    .map-img{
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .map-active{
        display: block;
    }
    .bg-obj{
        position: absolute;
        bottom: -28%;
        z-index: -1;
    }
    .map-obj01{
        position: absolute;
        bottom: -0.5%;
        left: 0;
    }

    
    /*イベント・セール*/
    .event-link{
        flex-direction: column;
        width: 56%;
        margin: 3% auto;
    }
    .event-link__img{
        width: 100%;
        margin-bottom: 1%;
    }

    .event-obj01{
        position: absolute;
        bottom: -0.5%;
        left: 0;
    }
    .event-obj02{
        top: 10%;
    }

    /*和イオン紹介*/
    .contents{
        position: relative;
    }

    /*アプリリンク*/
    .app{
        background-color: #d7edea;
        padding: 5% 0 8%;
    }
    .app-text{
        width: 61%;
        margin: 0 auto;
    }
    .app-link{
        width: 58%;
        flex-direction: column;
    }
    .app-link a{
        display: block;
        width: 100%;
        margin-bottom: 2%;
    }
    .top-btn{
        width: 18.5%;
    }
    
    
    /*ポップアップ*/
    .popup-item__list{
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        gap: 3%;
        justify-content: center; 
    }
    .popup-trigger{
        width: 40%;
        margin-bottom: 5%;
        padding: 3%;
    }
   


    /*モーダルオン*/
    .overlay {
        display: none; /* 初期は非表示 */
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        justify-content: center;
        align-items: center;
        z-index: 70;
    }

    .overlay.is-active {
      display: flex; /* アクティブ時に表示 */
    }

    .popup-content {
      position: relative;
      max-width: 340px;
    }

    .popup-close{
        width: 10%;
        position: absolute;
        top: 1%;
        right: -3%;
        transform: translateX(-50%);
        cursor: pointer;
    }

     #eventinfo{
            background-color:#65aadd;

            padding:5%;
    }   
    
    
}


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

.floating-sphere {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  max-width: 200px;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  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%;
}


@media screen and (max-width: 750px){
.bg-ball01{
    width: 10%
}

.floating-sphere {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  max-width: 23vw;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  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%;
}



}