/* CSS Document */


body{

}

img{
    display: block;
    width: 100%;
}

.pc { 
    display: block!important; 
/*
    max-width: 1100px;
    margin: 0 auto;
*/
}
.sp { 
    display: none !important; 
}

.wrapper{
    max-width: 1100px;
    margin: 0 auto;
}

footer{
    position: relative;
}

/*TOPへ戻るボタン*/
.top-btn{
    display: block;
    position: fixed;
    bottom: 3vw;
    right: 2vw;
    z-index: 98;
    max-width: 110px;
    max-height: 110px;
    width: 30%;
}

.top-btn img{
/*
    max-width: 300px;
    width: 135px;
*/
    width: 100%;
    height: 100%;
}

.obj-pos{
    position: relative;
}

/*トップページ*/
.key-vj{
    background-color: #e8343d;
}
/*トップページナビゲーション*/
.top-nav{
    background-color: #fef0d6;
}
.nav-pos{
    position: relative;
}
.nav-pos ul{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px 0;
    width: 100%;
    height: 70%;
     padding: 0;
}
.nav-pos ul li{
    list-style: none;
    width: 22%;
    height: 100%;
    border-right: 1px solid #E8383D;
}
.nav-pos ul li:last-child{
    border: none;
}
.nav-pos ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100%;
   
}
.nav-pos ul li img{
/*    margin: 10% auto;*/
}
.nav-icon{
    width: 27%;
    transition: all ease .8s;
}
.nav-icon__under01{
    width: 32%;
}
.nav-icon__under02{
    width: 38%;
}
.nav-icon__under03{
    width: 23%;
}
.nav-icon__under04{
    width: 50%;
}

/*トップページコンテンツ*/
.top-contets{
    background-color: #fef0d6;
}
footer{
    position: relative;
}

/*トップページフッター*/
.footer-belt{
    position: absolute;
    top: -10%;
    height: 36%;
    width: 100%;
    background-image: url("../images/pc/belt-top.png");
    background-size: cover;
}

/*イベントページ*/
.event-vj{
    background-color: #E8383D;
    position: relative
}
.event-contents{
    background-color: #E8383D;
    position: relative;
    z-index: 2;
}
.event-bg_obj{
    position: absolute;
    bottom: 0;
    z-index: -1;
    height: 53%;
}
.event-footer{
    z-index: 2;
}
.footer-belt__event{
    position: absolute;
    top: -20%;
    height: 36%;
    width: 100%;
    background-image: url("../images/pc/belt-event.png");
    background-size: cover;
    z-index: 3
}

/*マーケットページ*/
.market-vj{
    background-color: #FEF0D8;
}
.market-contents{
    background-color: #FEF0D8;
}
.market-obj{
    position: absolute;
    width: 42%;
    max-width: 524px;
    top: 28%;
    left: -3%;
}
.market-obj02{
    position: absolute;
    width: 47%;
    max-width: 504px;
    top: 70%;
    right: -14%;
}
.footer-belt__market{
    position: absolute;
    top: -20%;
    height: 68%;
    width: 100%;
    background-image: url("../images/pc/belt-market.png");
    background-size: cover;
}
.footer-belt__market img{
    width: 61%;
    margin: 0 auto;
    height: auto;
    max-width: 670px;
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
}

/*ギフトページ*/
.gift-vj{
    background-color: #E8383D;
}
.gift-contents{
    background-color: #E8383D;
}
.gift-obj{
    position: absolute;
    top: 17%;
    left: -9%;
    max-width: 1061px;
}
.footer-belt__gift{
    position: absolute;
    top: -20%;
    height: 56%;
    width: 100%;
    background-image: url("../images/pc/belt-gift.png");
    background-size: cover;
}
.footer-belt__gift img{
    width: 61%;
    margin: 0 auto;
    height: auto;
    max-width: 670px;
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
}

/*グルメページ*/
.gourmet-vj{
    background-color: #D3AC64;
}
.gourmet-contents{
    background-color: #D3AC64;
}
.gourmet-obj{
    position: absolute;
    top: 17%;
    left: -64%;
}
.footer-belt__gourmet{
    position: absolute;
    top: -86%;
    height: 89%;
    width: 100%;
    background-image: url("../images/pc/belt-gourmet02.png");
    background-size: cover;
}
.footer-belt__gourmet img{
    width: 61%;
    margin: 0 auto;
    height: auto;
    max-width: 670px;
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
}




/*スマホレイアウト*/
@media only screen and (max-width: 750px) {
    .pc { 
        display: none !important; 
    }
    .sp { 
        display: block !important; 
    }
    
/*    トップページ*/
    .sp-kv{
        background-color: #e8343d;
    }
    .sp-bg__top{
        background-color: #fef0d6;
    }
     .top-btn{
        bottom: 8vw;
        right: 4vw;
        max-width: 100px;
        max-height: 100px;
        width: 17%;
    }
    .top-btn img{
        width: 17vw;
    }
    
/*    イベントページ*/
    .sp-bg__event{
        background-color: #e8343d;
    }
    
/*    マーケットページ*/
    .sp-bg__market{
        background-color: #fef0d6;
    }
    
/*    ギフトページ*/
    .sp-bg__gift{
        background-color: #e8343d;
    }
    
/*    グルメページ*/
    .sp-bg__gourmet{
        background-color: #d3ad64;
    }
        
    
}




/*アニメーション管理*/


/*フェード*/
.fade-up{
    opacity: 0;
    transform: translateY(30px);
    transition: all ease 0.8s;
}
.fade-in{
    opacity: 0;
    transition: all ease 0.6s;
}
.fade-active{
    opacity: 1;
    transform: translateY(0);
}

/*PCトップページナビゲーションホバー*/
.icon-sway{
    animation: swayPc 1.3s ease .2s infinite running; 
}
@keyframes swayPc{
    
    25%{
        transform: rotate(16deg);
    }
    75%{
        transform: rotate(-14deg);
    }
   
}


/*下層ページタイトルアイコンアニメーション*/
.sp-title{
    position: relative;
}

.icon-anime{
    opacity: 0;
    width: 8%;
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translateX(-50%);
    transition: all ease 0.6s .8s;
}
/*PC*/
.icon-pos{
    position: relative;
}
.event__icon{
    width: 5%;
    max-width: 56px;
    top: 35%;
    left: 50%;
}
.market__icon{
    width: 4.5%;
    max-width: 56px;
    top: 17%;
    left: 50%;
}
.gift__icon{
    width: 5%;
    max-width: 56px;
    top: 27%;
    left: 50%;
}
.gourmet__icon{
    width: 5%;
    max-width: 56px;
    top: 27%;
    left: 50%;
}
/*スマホ*/
.sp-market__icon{
     width: 9%;
     top: 14%;
}
.sp-event__icon{
     width: 9%;
     top: 29%;
}
.icon-active{
    opacity: 1;
    animation: swaySp 1.5s ease 1.5s; 
}
@keyframes swaySp{
    
    25%{
        transform: translateX(-50%) rotate(16deg);
    }
    75%{
        transform: translateX(-50%) rotate(-14deg);
    }
   
}