@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: 9%;
}



.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: 13em;
}

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

.con-itemBox li{
	width: calc((100% - 80px) / 3);
	background-color: #fff;

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


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


/***************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;
}

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




/*******************SP*****************************/
@media screen and (max-width: 1440px){
	.fv-leftBox {
		width: 100%;
	}
}

@media screen and (max-width: 1200px){
	.fv-rightBox{
		width: 98%;
	}
	
	.fv-wrap{
		    padding-bottom: 8.7%;
	}
	
	.cp-balloon02,.cp-balloon01{
		display: none;
	}
}


@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%;
    }
	
.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;
	}
}