@charset "utf-8";

/*背景画像*/
body {
    background-image: url(https://lp.apr-inc.net/wp-content/uploads/2024/03/tesukiwashi-pattern-08.jpg);
}

/*商品ロゴ*/
#top {
    position: relative;
}
#top .ueni-kasaneru-sp {
    position: absolute;
    display: block;
    top: 73vw;
    left: 50%;
    transform: translateX(-50%)
}
#top .ueni-kasaneru-tab {
    position: absolute;
    display: block;
    top: 28vw;
    left: 50%;
    transform: translateX(-50%)
}
#top .ueni-kasaneru-pc {
    position: absolute;
    display: block;
    top: 34vw;
    left: 50%;
    transform: translateX(-50%)
}

/*縦書き*/
.tategaki {
    writing-mode: vertical-rl;
    text-align: start;
}

/*ヘッダーメニュー*/
.p-global-nav  .c-navbar__item.sm-nav-menu-item-highlight.menu-item-5116 {
	background-color: #333;
}

/*コンセプト*/
#concept {
    position: relative;
}
.uenose-textbox {
    position: relative;
    z-index: 2;
}


/*-------------------------------------------
スパイス画像
---------------------------------------------*/
.spice-box {
height: 100%;
width: 100vw;
margin: auto;
overflow: hidden;
position: absolute;
display: block;
top: 0;
}
.circlesWrapper {
display: flex;
height: 100%;
width: 100%;
margin: auto;
position: relative;
}
.circle {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}

.circle1 {
    left: -3vw;
    top: 0%;
}
.circle2 {
    right: -3vw;
    top: 10%;
}
.circle3 {
    left: 15vw;
    top: 20%;
}
.circle4 {
    right: 15vw;
    top: 30%;
}
.circle5 {
    left: -3vw;
    top: 40%;
}
.circle6 {
    right: -3vw;
    top: 50%;
}
.circle7 {
    left: 15vw;
    top: 60%;
}
/*タブレット*/
@media screen and (min-width:640px) and (max-width:1024px) {
    /*　画面サイズが640pxから1024pxまではここを読み込む　*/
    .circle {
        width: 70%;
        height: 70%;
    }        
    .circle1 {
        left: -20vw;
        top: 0vh;
    }
    .circle2 {
        right: -20vw;
        top: 15vh;
    }
    .circle3 {
        left: -20vw;
        top: 30vh;
    }
    .circle4 {
        right: -20vw;
        top: 45vh;
    }
    .circle5 {
        left: -20vw;
        top: 60vh;
    }
    .circle6 {
        right: -20vw;
        top: 75vh;
    }
    .circle7 {
        left: -20vw;
        top: 90vh;
    }
    }
/*モバイル*/
@media screen and (max-width:639px) {
    /*画面サイズが639pxまではここを読み込む　*/
    .circle1 {
        left: -20vw;
        top: 3vh;
    }
    .circle2 {
        right: -20vw;
        top: 15vh;
    }
    .circle3 {
        left: -20vw;
        top: 30vh;
    }
    .circle4 {
        right: -20vw;
        top: 45vh;
    }
    .circle5 {
        left: -20vw;
        top: 60vh;
    }
    .circle6 {
        right: -20vw;
        top: 75vh;
    }
    .circle7 {
        left: -20vw;
        top: 90vh;
    }
}




/*ラインナップ*/
#lineup.has-background {
    max-width: 1200px;
}

                                                    
  

/*モバイル：フッター固定メニュー*/
.p-footer-sticky-nav .c-navbar {
    color: #fff;
    background-color: #333;
}

.p-footer-sticky-nav .c-navbar__item {
    flex: 1 1 0%;
    margin: 1.2vh;
    padding: 1.2vh;
    border-radius: var(--_global--border-radius);
    box-shadow: 0px 1px 3px #222
}

.p-footer-sticky-nav .menu-item-5180 {
	background-color: var(--wp--preset--color--sm-accent);
}

.p-footer-sticky-nav .menu-item-5181 {
	background-color: #111;
}