@charset "utf-8";
/* CSS Document */

#contents{
	line-height: 1.3em;
}

#contents a{
	color:#09c;
}

#contents h1{
	background-image:url(data/main.jpg);
	background-repeat:no-repeat;
	background-size:100% auto;
	margin:0;
}

#contents h1 .photo{
	width:100%;
	height:auto;
}

.view .photo{
	display:block;
	width:49%;
	height:auto;
}

.view4 .photo{
	display:block;
	width:24%;
	height:auto;
}

.view .img03,
.view .img04{
	margin-top:2%;
}

#contents h2{
	padding:10px; 
	font-size:24px; 
	border-left:15px solid #62c5da; 
	border-bottom:2px solid #62c5da;
	font-weight:normal;
}

#show-now p{
	margin:0;
}

#show-now #list{
	width:100%;
	float:left;
}
#show-now #list p a{
	display:inline-block;
	color:#333;
	border-bottom:#09C dotted 1px;
	text-decoration:none;
	margin:3px 0;
}
#show-now #list p a:hover{
	color:#09c;
}

#show-now #newest{
	border:#62c5da dashed 1px; 
	width:50%;
	float:right;
	box-sizing:border-box;
	border-radius:20px;
	padding:20px;
}

/* 破線の枠部分、画像があるときはwidthを50%、画像がないときはwidthを100%にする  */
#show-now #newest p{
	width:100%;
	float:right;
}
#show-now #newest .photo{
	display:block; 
	height:auto; 
	width:48%; 
	margin:auto; 
	float:left;
}

#contents hr{
	width:95%;
	margin:50px auto;
	border:0;
	border-bottom:#999 dashed 1px;
}

#bakery > p{
	width:68%;
	float:left;
}
#bakery > div{
	width:30%;
	float:right;
}
#bakery > div .photo{
	display:block;
	width:100%;
	height:auto;
}
#bakery > div .photo02{
	margin-top:20px;
}

#contents .mt{
	margin-top:50px;
}

@media screen and ( max-width:1024px) {
#show-now #list,
#show-now #newest{
	width:100%;
	float:none;
}
#show-now #newest{
	margin-top:20px;
}
#show-now #newest .photo{
	width:35%;
}
#show-now #newest p{
	width:63%;
}
#bakery > p,
#bakery > div{
	float:none;
	width:100%;
}

#bakery > div{
	text-align:center;
}

#bakery > div .photo{
	display:inline-block;
	width:auto;
	max-width:40%;
	height:auto;
}
#bakery > div .photo02{
	margin-top:0;
	margin-left:20px;
}



}

@media screen and (min-width:0px) and ( max-width:750px) {
#show-now #list p{
	margin-top:10px;
	line-height:1.5em;
}
#show-now #list p a{
	display:inline;
}

#show-now #newest .photo,
#show-now #newest p{
	width:auto;
	height:auto;
	float:none;
}
#show-now #newest .photo{
	margin-top:10px;
}

#bakery > div .photo{
	max-width:45%;
}
#bakery > div .photo02{
	margin-left:2%;
}

#contents .mt{
	margin-top:30px;
}
#contents hr{
	margin:30px auto;
}
}

.red {
	color: #F00;
}






