@charset "utf-8";

/*メインコンテンツ*/

#main{
	overflow:hidden;
}
.contents{
	width:630px;
	padding:10px;
	float:left;
}

.contents img{
	margin:5px;
}

.slider{
	width:100%;
}


/*あいさつ文*/
.hello{
	background-image:url(../images/index/hello_back.jpg);
	background-repeat:no-repeat;
	padding:10px;
	border-radius:10px;
	width:610px;
}
.hello h2{
	font-size:150%;
	text-align:justify;
}

.hello p{
	padding-top:10px;
}


/*お知らせ*/
.info{
	width:610px;
	height:200px;
	margin-top:10px;
	padding:10px;
	background:#FBF7F3;
}

.info_msg{
	width:610px;
	height:185px;
	white-space:nowrap;
	overflow:auto;
}

.info dt{
	width:7em;
	float:left;
	clear:left;
}

.info dd{
	width:500px;
}

/*店舗情報*/

.aside{
	width:300px;
	float:right;
	margin-right:10px;
	margin-top:10px;
	background:#FBF7F3;

}

.aside_info{
	margin-top:10px;
	margin-left:30px;
}

.aside img{
	margin-top:10px;
}

.aside dt{
	width:5em;
	float:left;
	clear:left;
}

/*バナー（ケーキの上手な切り方リンク）*/

.banner img{
	margin-top:10px;
	margin-bottom:5px;
	width:300px;
}

/*ウィンドウ幅が780px以下の場合に適用*/
@media screen and (max-width: 780px) {

	/*全要素*/

	body{
		letter-spacing:0.12em;
	}

	/*メインコンテンツ*/

	.contents{
		width:97.24%;
		margin:0 1.33% 0 0.2%;
		padding:0 1.33%;
	}

	.contents img{
		width:100%;
		margin:10px 0 0 0;
		padding:0;
	}

	/*あいさつ文*/

	.hello{
		width:96%;
		margin:5px 0 0 0;
		padding:2%;
		text-align:justify;
	}

	.hello h2{
	font-size:125%;
	}

	/*お知らせ*/

	.info{
		width:96%;
		margin:10px 0 10px 0;
		padding:2%;
	}

	.info_msg{
		width:98%;
	}

	.info dd{
		width:100%;
	}

	/*店舗情報*/

	.aside{
		float:none;
		width:97.34%;
		margin:0 1.33%;
		padding:0;
		overflow:hidden;
		text-align:center;
	}

	.aside_info{
		width:100%;
		margin:0 auto;
	}

	.aside_info dl{
		width:240px;
		text-align:left;
		margin:0 auto;
	}

	/*バナー（ケーキの上手な切り方リンク）*/

	.banner{
		width:97.34%;
		float:none;
		text-align:center;
		margin:0 1.33%;

	}
	.banner img{
		width:100%;
	}
}

/*ウィンドウ幅が480px以下の場合に適用*/
@media screen and (max-width: 480px) {

	/*全要素*/

	body{
		letter-spacing:0.08em;
	}

	/*メインコンテンツ*/

	#main{
		font-size:85%;
	}
	#main h2{
		font-size:95%;
	}

	.contents img{
		margin-top:5px;
	}

	.hello{
		margin-top:5px;
	}

	.info{
		margin-top:5px;
		margin-bottom:5px;
	}

	.banner img{
		margin-top:5px;
		margin-bottom:0;
	}
}