@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;
    position: absolute;
    top: 30%;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
}
.schedule-contents__sp{
       display: none;
    }
.schedule-obj01{
    width: 34%;
    object-fit: contain;
    transition: all ease .8s;
}
.schedule-obj02{
    width: 36.5%;
    object-fit: contain;
    transition: all ease .8s .5s;
}
.schedule-obj03{
    width: 30%;
    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;
}

/*マップ*/
#map{
    position: relative;
}

.map{
    position: relative;
    margin-top: 4%;
}

.map-tab__area{
    width: 83.3%;
    display: flex;            /* 横並びにする */
    justify-content: center;   /* 中央寄せ（左寄せなら flex-start） */
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -46%;
    z-index: 3;
}
.map-obj{
    position: absolute;
    width: 20.6%;
    top: -4%;
    right: 13%;
}
.map-tab{
    cursor: pointer;          /* マウスを乗せた時に指マークにする */
    width: 23.6%;               /* 少し幅を広めに調整 */
    min-width: 60px;          /* スマホで小さくなりすぎないように */
    padding: 2% 1%;        /* 上下の余白を固定値にすると安定します */
    background-color: #fac23d;
    border-radius: 50px;
    border: 1px solid #e83820;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    transition: all 0.3s ease; /* 変化を滑らかに */
    box-shadow: 4px 4px 0px #ee7836;
    font-size: 30px;
}
.map-tab__active{
    background-color: #ee7836;
}
.map-tab .size{
    font-size: 20px
}

.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{
    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;
}

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

/*アプリリンク*/
.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: 74.8%;
    margin: 3% auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
.popup-trigger{
    width: 18%;  
    cursor: pointer;
    margin-bottom: 1%;
    transition: all ease .8s;
}
.popup-trigger:hover{
    transform: translateY(-10px);
}

/*モーダルオン*/
.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: 15%;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}


/*インスタリンク*/
.insta-link{
    width: 86.75%;
/*    width: 65.75vw;*/
    max-width: 1042px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: none;
}

/*


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

/*背景紙吹雪*/
.confetti canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.kv-active{
    opacity: 1;
    animation: swing 2s ease 1 .5s; 
}
@keyframes swing{
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(5deg);
    }
    50%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0);
    }
}

.kv-active02
{
    transform: translate(0 ,0);
    opacity: 1;
}

.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);
}




@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: 49%;
        object-fit: contain;
        position: absolute;
        top: 17%;
        left: 5%;
        transition: all ease .8s;
        z-index: 2;
    }
    .schedule-obj02__sp{
        width: 37.5%;
        object-fit: contain;
        position: absolute;
        top: 18%;
        right: 10%;
        z-index: 2;
        transition: all ease .8s .5s;
    }
    .schedule-obj03__sp{
        width: 42%;
        object-fit: contain;
        position: absolute;
        bottom: 26%;
        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: 40%; 
        left: 50%;
        translate: -50% 0;
        z-index: 2;
    }
    .new-obj__txt02{
        width: 31.4%;
        top: -5.2%;
        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: 71.2%;
        gap: 5%;
    }
    .popup-trigger{
        width: 30%;  
        margin-bottom: 5%;
    }
   

    /*モーダルオン*/
    .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: 15%;
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
    }

    
    
    
}