@charset "UTF-8";

/*ローカル確認用　キャンペーン用補正 1056⇒1100pxへ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}



@media (min-width: 768px), print {
    .mod-wrap {
        width: 1056px;
        min-width: 1056px;
        margin: 0 auto;
        text-align: center;
    }
    
    
    .mod-wrap,.campaign .mod-wrap {
        width: 1100px;
        min-width: 1100px;
        margin: 0 auto;
    }
    
  
 
    
}


@media (max-width: 767px) {
    .mod-wrap-sp {
        padding-right: 0px;
        padding-left: 0px;
    }
    
 
    .area-contents img {
        max-width: 100%;
  
    }


    
    
}




/*ローカル確認用 ここまで*/

.area-contents .mod-wrap{
	font-family:'Noto Sans JP', sans-serif;
	
}


#menu1.curation{
	position: relative;
	padding:3rem 0 10rem;
}

.curation{

	position: relative;
	padding:11rem 0 10rem;
	min-height: 800px;
}



#headerArea{
	background:#FEF0D6 url(../img/header_bg.png) center top no-repeat;
	position: relative;
}

#headerArea *{
		position: relative;
	z-index: 10;
}

#headerArea:after{
	content:'';
	display: block;
	width: 100%;
	height: 100px;
	position: absolute;
	background: url(../img/header_btm.png) center top/100% 100%  no-repeat;
	bottom:-5px;
	z-index: 0;
}

#menuArea{
	position: relative;
}
ul li{
	display: inline-block;
	position: relative;
	
}

#menuArea img#finger{
	position: absolute;
	top:15px;
	left:-30px;
}

img#menu1img,
img#menu2img,
img#menu3img,
img#menu4img{
	filter: drop-shadow(5px 5px 0px #703728);
	position: relative;
	top: 0;
	transition: 0.1s all;
}
img#menu1img:hover,
img#menu2img:hover,
img#menu3img:hover,
img#menu4img:hover{
	filter: drop-shadow(0px 0px 0px #703728);
	position: relative;
	top: 5px;
}
#menu1{
	background: #F1E7DF;
}
#menu1:after,
#menu2:after,
#menu3:after,
#menu4:after{
	content:'';
	display: block;
	width: 100%;
	height: 50px;
	position: absolute;
	bottom:0;
	z-index: 0;
}

#menu1:after{
	background: url(../img/menu1_btm.png) center top/1200px 100% repeat-x;
	
	}
	
	
#menu2{
	background:#EDD0B3;
	
	}
	
#menu2:after{
	background: url(../img/menu2_btm.png) center top/1200px 100% repeat-x;
	}

#menu2 img.title{
	position: absolute;
	top:-8.5rem;
	left: 50%;
	transform: translate(-50%, -50%);
}

#menu3{
	background:#FFF1D6
	}

#menu3:after{
	background: url(../img/menu3_btm.png) center top/1200px 100% repeat-x;
	}
	
#menu3 img.title{
	position: absolute;
	top:-8.5rem;
	left: 50%;
	transform: translate(-50%, -50%);
}


#menu4{
	background:#FFD8C8;
}

#menu4:after{
	background: url(../img/menu4_btm.png) center top/1200px 100% repeat-x;
	}

#menu4 img.title{
	position: absolute;
	top:-8.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
}




#campaignInfo{
	background:#F1E7DF;
	padding-bottom:10rem;
}
	
	
#campaignInfo a{
	display: inline-block;
	margin:0 1rem;
	position: relative;
}

#campaignInfo a img#X{
	filter: drop-shadow(0px 10px 0px #6D852B);
	position: relative;
	top: 0;
	transition: 0.1s all;

}

#campaignInfo a img#insta{
	filter: drop-shadow(0px 10px 0px #C79100);
	position: relative;
	top: 0;
	transition: 0.1s all;

}

#campaignInfo a:hover img#insta,
#campaignInfo a:hover img#X{
	filter: drop-shadow(0px 0px 0px #703728);
	position: relative;
	top: 5px;
}




/** sns insert **/

.curation .ownly_ugc_paging {
	position: relative;
    margin: 40px auto 0;
    width: 166px;
    border: none;
    padding: 0;
    padding-bottom: 5px;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: calc(50em / 1000);
    line-height: 44px;
    background-color: #F25500;
    border-radius: 13px;
    box-shadow: 0 7px 0 #723928;
    transition: all .05s ease-out;
    top:0;
}

.curation .ownly_sns_post_date_link{
	text-decoration: none;
	color: #000;
	display: inline-block;
	width: 100%;
	padding-bottom:2rem;
}	

.curation .ownly_ugc_paging:hover{
	top: 7px;
	box-shadow: 0 0px 0 #723928;
}

.curation .ownly_ugc_widget_block{
	width: 88%; 
	margin:2% 6%;
}





.center{
	text-align: center;
}

.mg20{
margin:20px;	
}

.mg30{
	margin:30px;
}

.pd20{
	padding: 20px;
}
.pd10{
	padding: 10px;
}
.pd1rem{
	padding:1rem;
}



hr{
	margin:0;
	border: none;
	box-sizing: content-box;
	
}



.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

hr.clearfix{
	height: 1px;
}



.area-contents .pc { display:inline;}
.area-contents .sp { display: none !important;}


@media (max-width: 767px) {



    #campTitle{
	position: relative;
	height: auto;
	}

	section{
	width: auto;

	}
	
	.curation{

	
	}

	
	#headerArea{
		overflow: hidden;
	}
	#headerArea:after{
		content:'';
		display: block;
	
		width: 100%;
		height: 44vw;
		position: absolute;
		background: url(../img/header_btm.png) center top/200% 100%  no-repeat;
		bottom:-5px;
		z-index: 0;
	
	}
	
	#menuArea{
		text-align: center;
	}
	#menuArea li a img{
		width: auto;
		height: 12vw;
	}
	#menuArea li:first-of-type{
		width: 100%;
		text-align: center;
	
	}
	#menuArea li:first-of-type a img{
		height: 12.4vw; width: auto;
	}
	
	#menuArea li{
		width: 30%;
		font-size: 0;
		margin:0% 0.1% 2%;
	}
	
	#menuArea li:last-of-type{
		width: 36%;
	}
	
	#menuArea img#finger{
	position: absolute;
	top:2vw;
	left:18vw;
	width: 10vw;
	}


	#menu1.curation{
		position: relative;
		padding:10vw 0 25vw;
	}
	
	.curation{
	position: relative;
	padding:30vw 0 33vw;
	}

	#menu2 img.title,
	#menu3 img.title,
	#menu4 img.title{
		
		top:-25vw;

	}

	#menu1:after{
	background: url(../img/menu1_btm.png) center top/150% 100% repeat-x;
	}
	#menu2:after{
	background: url(../img/menu2_btm.png) center top/150% 100% repeat-x;
	}
	#menu3:after{
	background: url(../img/menu3_btm.png) center top/150% 100% repeat-x;
	}
	#menu4:after{
	background: url(../img/menu4_btm.png) center top/150% 100% repeat-x;
	}
	
	#campaignInfo {
		text-align: center;
		padding:6vw 0 25vw;
	}
	#campaignInfo a img.sp {
		width: 75%;
	}
	#campaignInfo a {
		display: inline-block;
		margin-bottom:5vw;
	}
	
	
	.curation .ownly_ugc_paging {
	position: relative;
    margin: 30px auto 0px;
    width: 166px;
    border: none;
    padding: 0;
    padding-bottom: 5px;
    font-size: 20px;
    border-radius: 20px;
    }
	
	.area-contents .pc { display: none !important;}
	.area-contents .sp { display: inline !important;}

}




/*アニメーション用 ***/

.zoom-in{
transform:scale(0);
opacity: 0;
}

.slide-up{
	position: relative;
	transform: translateY(100px); 
	opacity: 0;
}

.fade-in{
	transform:scale(1);
	opacity: 0;
}
.prizea, .prizeb ,.prizec{
	transform: translateY(130px); 
	opacity: 0;
}