@charset "UTF-8";
/* CSS Document */

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


a{
	text-decoration: none;
}


.bp_wrapper{
	background-color: #fffaf6;
}


/*アニメーション設定、詳細は最下部*/
.move{
	animation: shake;
  	animation-duration: 1s;
	animation-iteration-count: infinite;
	}


/*　購入ボタン　*/

.buy_btm{
	margin: 50px 0;
}

.buy_item{
	background-color: #fffaf6;
    border: #5a4e49 1px solid;
}


.buy2{
	width: 300px;
    margin: 0 auto 15px;
    height: 80px;
    border-radius: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 80px;
    color: #fffaf6;
    font-size: 22px;
}











/* 画面サイズが899までに適用 */
@media screen and (max-width:899px){


.spNone{
	display: none;
}


}




/* 画面サイズが900以上に適用 */
@media screen and (min-width:900px){

.bp_block{
	width: 100%;
	display: flex;
	margin: 0 auto;
}

.center{
	width: 50%;
}


.side{
	top:0;
	position: sticky;
	height: 100vh;
	width: 25%;
	background-color: #fffaf6;
}
	
	
.buy2{
	width: 400px;
    margin: 0 auto 15px;
    height: 100px;
    border-radius: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 100px;
    color: #fffaf6;
    font-size: 30px;
}
	
	
.bp_logo{
	width: 120px;
	margin: 0 auto;
	}
	
.bp_logo_block{
		margin-top: 250px;
	}
	
.youpi{
	width: 150px;
	margin: 0 auto;
	}

/*position: fixed;が適用された要素は、基準位置が画面*/
.youpi_block{
	position: fixed;
	bottom: 30px;/*画面下から●px*/
	right: 50px;/*画面右から●px*/
	}	
	
	

	
	
	
	
}


/*メディアクエリ内に書いてはいけない*/

@keyframes shake {
    0% {
        rotate: -1deg
    }

    50% {
        rotate: 1deg
    }

    to {
        rotate: -1deg
    }