@charset "utf-8";
/* CSS Document */
body{
font-family: "Noto Sans JP", sans-serif;
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


a {
  text-decoration: none;
  transition: 0.3s;
	cursor:pointer;
}



p {
  line-height: 1.4;
	margin: 0;
}

img{
	width: 100%;
}

.pc_only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: block;
  }
}



.logo {
	position: absolute;
	z-index: 2;
	width: 170px;
	left: 10px;
	top: 10px;
}

@media screen and (max-width: 767px) {
	.logo {
		width:117px;
	}
}


/*****************fv*******************/
.top-line{
	background-image: url("../img/top-line.png");
	background-repeat: repeat-x;
	background-size: contain;
	background-position: top;
	padding-bottom: 3em;
}


#fv{
	background-color: #76D2FF;
	position: relative;
}


.fv-wrap{
	background-image: url("../img/fv-bk.png");
	background-position: center top;
	background-size: cover;
	    padding-bottom: 8.7%;
}



.fv-inner{

	padding-top:2em;
	width: 90%;
	margin: 0 auto;
	position: relative;
}


.fv-copy{
	width: 60%;
	margin: 0 auto;
}

.fv-flex{
	display: flex;
	justify-content: center;
	width: 80%;
	margin: 0 auto;
	align-items: center;
	margin-top: 2em;
}
.fv-leftBox{
	width: 79%;
}

.izm-65th{
	width: 68%;
	margin: 0 auto;
}

.fv-ttl{
	width: 100%;
	margin: 0 auto;
}

.fv-day{
	width: 85%;
	margin: 0 auto;
}

.fv-under{
	position: absolute;
	bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
	width: 100%;
	line-height: 0;
}


.fv-con1,.fv-con2,.fv-con3,.fv-con4,.fv-con5{
	position: absolute;
}

.fv-con1{
    width: 13%;
    left: -2%;
    top: 27%;
}


.fv-con2{
    width: 8%;
    left: 2%;
    top: 40%;
}

.fv-con3{
    width: 11%;
    left: -1%;
    bottom: 9%;
}


.fv-con4{
	width: 9%;
    right: 0%;
    top: 15%;
}


.fv-con5{
    width: 7%;
    right: 4%;
    bottom: 6%;
}



/*******************nav*******************/
#nav{
	padding: 0 10px;
	margin-bottom: 17em;
}

.nav-box{
	background-color: #FFF8AC;
	padding: 3em 10px;
	    max-width: 70%;
    margin: 0 auto;
	border-radius: 100px;
}

.nav-list{
	display: flex;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
	gap: 10px;
	flex-wrap: wrap;	
}

.nav-link{
	width: calc((100% - 30px) / 4);
	text-align: center;
	font-size: 1.2em;
	color: #FFEB0F;
	font-weight: 900;
	background-color: #0083E8;
	border: solid 2px #803C27;
	padding: 3% 2%;
	border-radius: 10px;
	box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 1.0);
	position: relative;
}

.nav-img{
	position: absolute;
	width: 18%;
	top: -18%;
    left: -6%;
}



.list-pink{
	background-color: #E50065;
}




/***************con1****************/

.yellow-curve{
	width: 100%;
	margin: 0 auto;
	line-height: 0;
	position: relative;
}

.con1-ttl{
	width: 44%;
    position: absolute;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}





#con1-wrap{
	background-color: #FFF000;
	padding-top: 2em;
}

.hukidasi1{
	width: 43%;
	margin: 0 auto;
	
}


.con1-bk{
	padding: 0 10px;
	background-image: url("../img/star-bk.png");
	background-position: top center;
	background-size: contain;
	background-repeat: repeat-y;
	padding-bottom: 3em;
}

.con1-inner{
	padding:2em 1em;
	background-color: #E50065;
	border-radius: 40px;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 3em;
}


.con1-innerFlex{
	display: flex;
	justify-content: center;
	gap: 5px;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;	
}

.point3{
	width: calc((100% - 10px) / 3);
}

.point2{
	width: calc((100% - 10px) / 2);
}


/************item**********/

.con-item_listBox{
	margin-top: 1em;
	margin-bottom: 3em;
}

.con-itemBox{
	display: flex;
	justify-content: center;
	grid-gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.columuBox3{
	width: calc((98% - 80px) / 3);
	background-color: #fff;

	padding: 10px;
		padding-bottom: 1.2em;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	    display: flex;
    flex-direction: column;
}


.item-img{
	background-color: #fff;
	margin-bottom: 5px;
}

.small-txt{
	font-size: 1em;
	font-weight: 400;
	color: #0C0C0C;
	line-height: 1.2em;
	margin-bottom: 3px;
}

.big-txt{
	font-size: 1.2em;
	font-weight: 700;
	color: #0C0C0C;
	line-height: 1.6em;
	margin-bottom: 3px;	
}


.item-border{
	border-bottom: solid 1px #707070;
	padding-bottom: 8px;
}

.item-price{
	text-align: end;
	font-size: 2.6em;
	font-weight: 700;
	color: #D91515;
	text-shadow: 2px 2px 0px rgba(255, 222, 0, 1.0);
}


.item-comment{
	font-size: 1em;
	font-weight: 600;
	color: #E4007F;
	line-height: 1.2em;
	margin-bottom: 10px;		
}

.s-font{
	font-size: 0.6em;
}

.item-taxprice{
	text-align: end;
	font-size: 1.3em;
	font-weight: 500;
	color: #D91515;	
}


.price-obi{
	background-color: #FFE744;
	border: solid 2px #D91515;
	padding: 5px 10px;
	margin-top: 10px;

}

.price-obi p{
	text-align: center;
	font-size: 1.1em;
	font-weight: 600;
	color: #D91515;
}


.item-logo{
	width: 32%;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 10px;
}

.item-logo img{
	padding-right: 5px;
}


.item-point-img{
	margin-top: 10px;
}


.red-obi{
	background-color: #D91515;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 1em;
	font-weight: 600;
}


.price-red{
	font-size: 0.4em;
	padding: 2px 5px;
	margin-right: 3px;
	background-color: #D91515;
	color: #fff;
	text-shadow:0 0 black;
	line-height: 0;
margin-bottom: 10px;
}


.brown-obi{
	background-color: #4D3420;
	padding: 5px;
	margin-bottom: 10px;

}


.brown-obi img{
    width: 28%;
    margin: 0 auto;
    display: block;
}


.corner-obi{
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	color: #fff;
	background-color: #3170B8;
	padding: 5px 10px;
	margin-bottom: 10px;
}




.couponprice {
    display: flex;
 margin-top: auto;
    border: 2px solid #009D88;
}
.couponprice .txt {
    display: flex
;
    justify-content: center;
    align-items: center;
    width: 60%;
    padding: 4px;
    background: #009D88;
    text-align: right;
}

.couponprice .txt p {
    color: #fff;
    font-size: 0.9em;
    line-height: 1.2;
}

.couponprice .price {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 40%;
    padding: 4px 0;
    background: #FFF000;
    text-align: center;
}

.couponprice .price p {
    color: #CD0000;
    font-weight: 700;
    font-size: 1.5em;
}
.tasaki_renewal p {
    line-height: 1.4;
}

.couponprice .price p span.small {
    font-size: 0.8em;
}

@media screen and (max-width: 768px){
	.couponprice p{
		font-size: 0.8em;
	}
	
	.couponprice{
		display: block;
	}
	
	.couponprice .txt{
		width: 100%;
	}
	
	.couponprice .txt p{
		font-size: 0.8em;
		text-align: center;
	}	
	
	.couponprice .price{
		width: 100%;
	}	
}



/***************con1 item********************/
#con1-wrap .con-itemBox li{
	border: solid #64392E 2px;
	border-radius: 0 0 0 30px;
}


/* 1番目、5番目、9番目… の要素 */
#con1-wrap .con-itemBox li:nth-child(4n + 1) {
  background-color: #FFE7F1;
}

/* 2番目、6番目、10番目… の要素 */
#con1-wrap .con-itemBox li:nth-child(4n + 2) {
  background-color: #CDFAFF;
}

/* 3番目、7番目、11番目… の要素 */
#con1-wrap .con-itemBox li:nth-child(4n + 3) {
  background-color: #CFFFCA;
}

/* 4番目、8番目、12番目… の要素（4の倍数） */
#con1-wrap .con-itemBox li:nth-child(4n) {
  background-color: #FDFFCA;
}


#con1-wrap .item-img{
	position: relative;
}

.item-point_icon{
	position: absolute;
	width: 23%;
	top: 0%;
	left: 0%;
}



/************ゆめ時************/

#youmetoki{
	padding: 3em 10px;
}

.youmetoki-banner{
	max-width: 1000px;
	margin: 0 auto;
}


.link_btn{
    background-color: #E50065;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    display: table;
    width: 350px;
    padding: 1em 2em;
    font-size: 1.2em;
	border: solid #FFF697 4px;
	border-radius: 50px;
	font-weight: bold;
	margin-top: 1em;
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.24);
	position: relative;
}

.link_btn:hover{
	transition: 0.3s;
	box-shadow:unset;
}


.link_btn::after{
	position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 17px solid #fff;
    top: 33%;
    right: 3%;
}




/******************con2*******************/

#con2-wrap{
	background-color: #7BDEFF;
/*	margin-top: 5em;*/
	margin-bottom: 10em;
	overflow-x: hidden;
}

.con2-bk{
padding-top: 5em;
	background-image: url("../img/dotto-bk.png");
	background-position: top center;
	background-size: inherit;
	background-repeat: repeat;
	padding-bottom: 3em;

}


.rarara-obi{
	background-color: #E50065;
	padding: 1em;
	position: relative;
}

.apponly-ttl{
	width: 18%;
	margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateY(-60%) translateX(-50%);
}

.rarara-ttl{
	width: 60%;
	margin: 0 auto;
	margin-top: 1em;
}


.rarara-all_wrap{
	padding: 0 10px;
/*	overflow-x: hidden;*/
}

.rarara-cp_wrap{
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 3em;
	position: relative;
}

.cp-balloon01,.cp-balloon02{
	position: absolute;
}

.cp-balloon01{
	width: 11%;
    left: -14%;
    top: 21%;
}

.cp-balloon02{
	width: 14%;
    right: -16%;
    top: 7%;
}

.rarara-cp{
	border: solid 8px #fff;
	border-radius: 0 30px 30px 30px;
	overflow-x: hidden;
}

.cp-number{
	background-color: #fff;
	display: inline-block;
	padding: 5px 30px;
}


.cp-number p{
	text-align: center;
	color: #E50065;
	font-size: 1.6em;
	font-weight: bold;
}

.cp-notice{
	text-align: center;
	font-size: 1em;
	font-weight: 500;
	color: #0C0C0C;
	margin-top: 3em;
	margin-bottom: 3em;
	padding: 0 10px;
}




/*******************CAMPAIGN 01*******************/
.target-txt{
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #292929;
	margin-bottom: 10px;
	
}




/***************con3******************/

#con3-wrap{
	background-color: #72D16B;

}

.con3-bk{
padding-top: 5em;
	background-image: url("../img/line-bk.png");
	background-position: top center;
	background-size: contain;
	background-repeat:repeat-x;
	

}


.con3-ttl{
	width: 56%;
    position: absolute;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}





.column1-flex{
	display: flex;
	justify-content: space-between;
}

.columnbox1 .item-img{
	width: 50%;
	padding-right: 3%;
}

.info-txtBox{
	width: 50%;
}


.wave-line{
	width: 100%;
	line-height: 0;
	margin-top: 10em;
	position: relative;
	bottom: -1px;
}





/******************con4*******************/

#con4-wrap{
	margin-top: 6em;
background: #F0F6FB;
background: linear-gradient(180deg,rgba(240, 246, 251, 0) 0%, rgba(240, 246, 251, 1) 35%, rgba(240, 246, 251, 1) 100%);
}


.con4ttl-bk{
	background-image: url("../img/con4ttl-bk.png");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;	
}

.con4-ttl{
	width: 55%;
	margin: 0 auto;
	position: relative;
}

.con4-ttl_copy{
    position: absolute;
    width: 43%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    top: 3%;
	
}

.con4-inner{
	background-color: #F0F6FB;
	padding: 0 10px;
	position: relative;
	padding-top: 4em;
}

.con4-left-item,.con4-right-item{
	position: absolute;
}

.con4-left-item{
	width: 10%;
	left: 4%;
	top: 15%;
}

.con4-right-item{
	width: 10%;
	right: 4%;
	bottom: 15%;
}


#con4-wrap .con-item_listBox{
	margin-top: 0;
	position: relative;
}

.columnbox1{
	width: calc((90% - 80px) / 1);
	margin-bottom: 10px;
	background-color: #fff;

	padding: 10px;
		padding-bottom: 1.2em;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.column1-flex{
	display: flex;
	justify-content: space-between;
}

.columnbox1 .item-img{
	width: 50%;
}



/***************con5******************/

.shokuhin-wrap{
	margin-top: 18em;
}


#con5-wrap{
	background-color:#E50065;

}

.con5-bk{
padding-top: 5em;
	background-image: url("../img/circle-bk.png");
	background-position: top center;
	background-size: contain;
	background-repeat: repeat-x;
	
    padding-bottom: 5em;
}


.con5-ttl{
	width: 30%;
    position: absolute;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}



/****************page-notice**************/
.page-notice{
	max-width: 1100px;
	margin: 0 auto;	
	padding: 0 10px;
	margin-top: 2em;
margin-bottom: 4em;
	
}

.page-notice p{
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	color: #0C0C0C;
}

/*******************SP*****************************/
@media screen and (max-width: 1440px){
	.fv-leftBox {
		width: 100%;
	}
	
	.nav-list{
		max-width: 650px;
	}
	
	.con5-ttl{
		width: 45%;
	}
	
	.con5-bk{
		    padding-top: 11%;
	}
}

@media screen and (max-width: 1200px){
	.fv-rightBox{
		width: 98%;
	}
	
	.fv-wrap{
		    padding-bottom: 8.7%;
	}
	
	.cp-balloon02,.cp-balloon01{
		display: none;
	}
	
	.nav-box{
		    max-width: 97%;
	}
	
	.con1-ttl{
		    width: 60%;
		    transform: translateY(-59%) translateX(-50%);
	}
	
	
	.con4-ttl{
		    width: 80%;
	}
}



@media screen and (max-width: 1000px){
	.con3-ttl{
		    width: 80%;
	}
}




@media screen and (max-width: 880px){
	.rarara-ttl{
		    width: 87%;
	}
	
	.apponly-ttl{
		width: 29%;
	}
}





@media screen and (max-width: 768px){
	
	    .fv-wrap {
        padding-bottom: 11%;
    }
	
	.fv-flex{
		display: block;
		    width: 95%;
		    margin-top: 1em;
	}
	
	.fv-leftBox {
		width: 100%;
	}
	.izm-65th{
		    width: 67%;
	}
	.fv-copy{
		    width: 78%;
	}
	.fv-con1,.fv-con3,.fv-con5{
		display: none;
	}
	
	.fv-con4 {
		width: 13%;
		right: 3%;
		top: 13%;
	}
	
    .fv-con2 {
        width: 12%;
        left: 6%;
        top: 14%;
    }
	
	
	#nav{
		    margin-bottom: 44%;

	}
	
	.nav-list{
		width: 100%;
	}
	
	.nav-link{
		    width: calc((100% - 30px) / 2);
		font-size: 1em;
		padding: 4% 2%;
	}
	
	.nav-img{
		    width: 14%;
		    top: -11%;
		    left: -3%;
	}
	
	.nav-box{
		
    border-radius: 20px;
	}
	
	
	.columuBox3{
		width: calc((100% - 20px) / 2);
		padding: 5px;
	}
	
	    .con1-ttl {
        width: 81%;
        transform: translateY(-66%) translateX(-50%);
    }
	
	.con-itemBox{
		    grid-gap: 10px;
	}
	
	
/********item con sp********/
	.small-txt{
		font-size: 0.8em;
	}
	
	.big-txt{
		font-size: 1em;
		line-height: 1.2em;
	}
	
	.item-logo{
		    width: 50%;
	}
	
	.item-price{
		font-size: 1.8em;
	}
	
	.item-taxprice{
		font-size: 1em;
	}
	
	.item-comment{
		font-size: 0.8em;
	}
	
	.price-obi p{
		    font-size: 0.8em;
	}
	
	.red-obi{
		font-size: 0.8em;
	}
	
	
	.price-red{
		    font-size: 0.35em;
    padding: 2px 2px;
	}
	
	/********item con sp end********/
	
.point3 {
    width: calc((100% - 10px) / 1);
}
	
	.point2 {
    width: calc((100% - 10px) / 1);
}
	
	.hukidasi1{
		    width: 81%;
	}
	
	.link_btn{
		    width: 83%;
	}
	
	.rarara-ttl{
		    width: 97%;
	}
	
	.apponly-ttl{
		width: 50%;
	}
	
	.rarara-cp{
	    border: solid 4px #fff;
    border-radius: 0 10px 10px 10px;	
	}
	
	.cp-number p{
		    font-size: 1em;
	}
	
	.con1-inner{
		    border-radius: 15px;
		    padding: 2em 10px;
	}
	
	
	.con3-ttl {
        width: 90%;
    }
	
	.con3-bk{
		padding-top: 3em;
	}
	
	.columnbox1{
		width: calc((95% - 10px) / 1);
		padding: 5px;
	}
	
	
	#con2-wrap{
		    margin-bottom: 25%;
	}
	
	.wave-line {
		margin-top: 4em;
	}
	
	    .con4-ttl {
        width: 100%;
    }
	
	.con4-ttl_copy{
		    width: 60%;
	}
	
	.corner-obi{
		font-size: 0.8em;
		    padding: 3px 10px;
	}
	
	.con4-left-item,.con4-right-item{
		display: none;
	}
	
	    #con4-wrap .columnbox1 {
        width: calc((100% - 10px) / 1);
    }
	
	
	#con4-wrap .columnbox1{
		position: relative;
		
	}
	
	.sp-flower{
		position: absolute;
		width: 11%;
		left: 0%;
		bottom: 0%;
	}
	
	    .con5-ttl {
        width: 69%;
    }
	
	.con5-bk {
        padding-top: 18%;
		padding-bottom: 1em;
		        padding-left: 10px;
        padding-right: 10px;
    }

}

@media screen and (max-width: 600px){
    .shokuhin-wrap {
        margin-top: 34%;
    }
}

@media screen and (max-width: 500px){
	.sp-flower{
		        width: 12%;
	}
}





/*****************animation********************/
/* 最初は非表示 */
.poyon-img {
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
}

/* アニメーション発火 */
.poyon-img.is-show {
    animation: poyon 0.7s ease-out forwards;
}

@keyframes poyon {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    60% {
        opacity: 1;
        transform: scale(1.15);
    }
    80% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}








/* 風船のふわふわアニメーション */
.balloon-img {
    animation: balloonFloat 3s ease-in-out infinite;
}

@keyframes balloonFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}


@media screen and (max-width: 768px) {
    .balloon-img {
        animation-name: balloonFloatSp;
    }

    @keyframes balloonFloatSp {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-8px);
        }
        100% {
            transform: translateY(0);
        }
    }
}




/*スクロールアップ*/
.scroll_up.on {
 transform: translateY(0);
    opacity: 1.0;
}

.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}