
/* ���C���摜
--------------------------*/
body{
	background:url(../img/pastry/bg.png) repeat center top;
}

#main{
	background:url(../img/pastry/main_bg.jpg) no-repeat center top;
}

@media screen and (max-width:767px) {		/*�^�u���b�g�pCSS*/
#main{
	background:url(../img/pastry/main_bg_sp.jpg) no-repeat center top;
	background-size:100%;
	padding:calc((26.07% - 100px) / 2) 0;
}
}


/* �p�e�B�V�G�Љ�
--------------------------*/
#pastry{
	box-shadow: 0 0 15px 5px rgba(100,100,100,0.2);
}

#pastry div{
	width:100%;
	background:url(../img/pastry/pastry_img_sweets.png),url(../img/pastry/pastry_img_sweets02.png);
	background-color:#f4f4f4;
	background-repeat:no-repeat;
	background-position:right 335px top,right bottom;
	position:relative;
	padding:50px;
	box-sizing:border-box;
}

#pastry div #wish{
    -webkit-filter:drop-shadow(0px 1px 2px rgba(255, 255, 255, 1));
    -moz-filter:drop-shadow(0px 1px 2px rgba(255, 255, 255, 1));
    -ms-filter:drop-shadow(0px 1px 2px rgba(255, 255, 255, 1));
    filter:drop-shadow(0px 1px 2px rgba(255, 255, 255, 1));
}

#pastry div #name{
	margin:30px 0 40px;
}

#pastry .txt{
	width:calc(100% - 335px);
	font-size:16px;
}

#pastry .txt2{
	float:right;
	width:calc(100% - 335px);
	padding-top:30px;
	box-sizing:border-box;
	font-size:16px;
}


#pastry .txt3{
	float:right;
	width:calc(100% - 335px);
	height:175px;
	box-sizing:border-box;
	font-size:16px;
}

#pastry div #koji_y{
	position:absolute;
	right:0;
	top:0;
}

#pastry div #koji_y02{
	position:absolute;
	left:0;
	bottom:0;
}



@media screen and (max-width:1400px) {		/*�^�u���b�g�pCSS*/
#pastry div{
	background-size:auto,50%;
}
}

@media screen and (max-width:1200px) {		/*�^�u���b�g�pCSS*/
#pastry div{
	padding:30px;
	background-position:right 270px top,right bottom;
	background-size:290px,50%;
}

#pastry div #wish{
	width:calc(100% - 460px);
	max-width:530px;
}

#pastry .txt{
	width:100% ;
	font-size:14px;
}

#pastry .txt2,#pastry .txt3{
	width:calc(100% - 270px);
	font-size:14px;
}

#pastry .txt3{
	height:125px;
}

#pastry div #koji_y,#pastry div #koji_y02{
	width:270px;
}
}

@media screen and (max-width:1000px) {		/*�^�u���b�g�pCSS*/
#pastry div{
	background:url(../img/pastry/pastry_img_sweets.png) no-repeat right 400px #f4f4f4;
	background-size:30%;
}

#pastry div #wish{
	width:calc(100% - (30% + 30px));
}

#pastry .txt{
	width:calc(100% - (30% + 30px));
	margin-bottom:5%;
}

#pastry .txt2,#pastry .txt3{
	width:calc(100% - (30% + 30px));
	height:auto;

	padding-left:30px;
	box-sizing:border-box;
}

#pastry div #koji_y,#pastry div #koji_y02{
	width:30%;
	max-width:335px;

}
}

@media screen and (max-width:767px) {		/*�^�u���b�g�pCSS*/
#pastry div{
	background:url(../img/pastry/pastry_img_sweets_sp.png) no-repeat right bottom #f4f4f4;
}

#pastry div #wish{
	width:100%;
	max-width:530px;
}

#pastry div #name{
	width:50%;
	max-width:249px;
	margin:20px 0 20px;
}

#pastry div #koji_y,#pastry div #koji_y02{
	position:static;
	width:50%;
}

#pastry .txt,#pastry .txt2,#pastry .txt3{
	position:static;
	width:100%;
	margin:0;
	padding:20px 0 0;
}
}
