@charset "UTF-8";
/* specific css for 式部庵 */


/*//全体//////////////////////////////////////////////////////////////////////////////////*/

.left2{
	float:left;
	width:300px;
	height:250px;
	padding:10px 25px;
	display:flex;
	align-items:center;
}

.right2{
	float:right;
	width:330px;
	height:250px;
	padding:10px;
	display:flex;
	align-items:center;
}

#discription .right2 p{
	text-align:left;
}

	/*/// media Query ////*/@media screen and (max-width:860px){ 
								.left2{
									float:none;
									width:100%;
									height:auto;
									margin-bottom:10px;
									padding:0;
									display:block;
									text-align:center;
								}
										
								.right2{
									float:none;
									width:80%;
									height:auto;
									margin:0 auto 50px;
									padding:0;
									display:block;
									text-align:center;
								}
								
								#discription .right2 p{
									text-align:center;
								}
							}

/*//全体//////////////////////////////////////////////////////////////////////////////////*/


/*// info.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/

.big{
	width:800px;
	margin:50px auto 40px;
	padding:10px;
	border-bottom:2px #000000 solid;
}

.big h3{
	font-size:1.3em;
}

.small{
	width:600px;
	margin:0 auto 40px;
	padding:10px;
	border-bottom:2px #000000 solid;
}

.small h3{
	font-size:1.2em;
}

.big a,
.small a{
	font-weight:bold;
	-webkit-transition:text-shadow 0.5s;
	transition:text-shadow 0.5s;
}

.big a:hover,
.small a:hover{
	text-shadow:0 0 5px #ffd700;
}

	/*/// media Query ////*/@media screen and (max-width:860px){
								.big{
									width:95%;
									height:auto;
								}
								
								.small{
									width:71%;
									height:auto;
								}
							}

/*// info.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/


/*// season.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/

#menu_month{
	width:720px;
	margin:50px 60px;
}

#menu_month li{
	float:left;
}

#menu_month a{
	display:block;
	width:58px;
	height:100px;
	background:url(pic/bt_month.png) no-repeat;
	text-indent:-9999px;
	color:#ffffff;
}

#menu_month .jan a,
#menu_month .dec a{
	width:60px;
}

#menu_month .jan a{background-position:0 -100px;}
#menu_month .feb a{background-position:-60px -100px;}
#menu_month .mar a{background-position:-118px -100px;}
#menu_month .apr a{background-position:-176px -100px;}
#menu_month .may a{background-position:-234px -100px;}
#menu_month .jun a{background-position:-292px -100px;}
#menu_month .jul a{background-position:-350px -100px;}
#menu_month .aug a{background-position:-408px -100px;}
#menu_month .sep a{background-position:-466px -100px;}
#menu_month .oct a{background-position:-524px -100px;}
#menu_month .nov a{background-position:-582px -100px;}
#menu_month .dec a{background-position:-642px -100px;}

#menu_month .jan a:hover{background-position:0 0;}
#menu_month .feb a:hover{background-position:-60px 0;}
#menu_month .mar a:hover{background-position:-118px 0;}
#menu_month .apr a:hover{background-position:-176px 0;}
#menu_month .may a:hover{background-position:-234px 0;}
#menu_month .jun a:hover{background-position:-292px 0;}
#menu_month .jul a:hover{background-position:-350px 0;}
#menu_month .aug a:hover{background-position:-408px 0;}
#menu_month .sep a:hover{background-position:-466px 0;}
#menu_month .oct a:hover{background-position:-524px 0;}
#menu_month .nov a:hover{background-position:-582px 0;}
#menu_month .dec a:hover{background-position:-642px 0;}


	/*/// media Query ////*/@media screen and (max-width:860px){
								#menu_month{
									width:360px;
									height:auto;
									margin:50px auto;
									padding:0 20px;
								}
							}
							
							@media screen and (max-width:480px){
								#menu_month{
									width:80%;
									height:auto;
								}
								
								#menu_month li{
									float:none;
								}
								
								#menu_month a{
									width:100%;
									height:auto;
									padding:10px 0;
									text-indent:0;
									text-align:center;
									color:#808080;
									border-radius:5px;
								}
								
								#menu_month .jan a,
								#menu_month .dec a{
									width:100%;
									}
								
								#menu_month .jan a{ background:#c9c3de; }
								#menu_month .feb a{ background:#c3dcb6; }
								#menu_month .mar a{ background:#d8e5e7; }
								#menu_month .apr a{ background:#ffd8d6; }
								#menu_month .may a{ background:#d7efa8; }
								#menu_month .jun a{ background:#cdd7ed; }
								#menu_month .jul a{ background:#ffc9dd; }
								#menu_month .aug a{ background:#cef1ff; }
								#menu_month .sep a{ background:#ffd49c; }
								#menu_month .oct a{ background:#f3efbd; }
								#menu_month .nov a{ background:#adc6ef; }
								#menu_month .dec a{ background:#ededed; }
								
								#menu_month .jan a:hover{ background:#a59aca; color:#373b3b;}
								#menu_month .feb a:hover{ background:#93ca76; color:#373b3b;}
								#menu_month .mar a:hover{ background:#c1e4e9; color:#373b3b;}
								#menu_month .apr a:hover{ background:#f6bfbc; color:#373b3b;}
								#menu_month .may a:hover{ background:#b9d08b; color:#373b3b;}
								#menu_month .jun a:hover{ background:#bbc8e6; color:#373b3b;}
								#menu_month .jul a:hover{ background:#e198b4; color:#373b3b;}
								#menu_month .aug a:hover{ background:#a0d8ef; color:#373b3b;}
								#menu_month .sep a:hover{ background:#f8b862; color:#373b3b;}
								#menu_month .oct a:hover{ background:#e4dc8a; color:#373b3b;}
								#menu_month .nov a:hover{ background:#84a2d4; color:#373b3b;}
								#menu_month .dec a:hover{ background:#dcdddd; color:#373b3b;}
							}
	
	

/*// season.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/


/*// tunen.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/

#menu_wagashi{
	width:360px;
	margin:80px auto;
}

#menu_wagashi li{
	float:left;
}

#menu_wagashi a{
	display:block;
	width:60px;
	height:100px;
	margin:0 30px;
	background:url(pic/bt_wagashi.png) no-repeat;
	text-indent:-9999px;
	color:#ffffff;
}

#menu_wagashi .higashi a{background-position:0 -100px;}
#menu_wagashi .yokan a{background-position:-60px -100px;}
#menu_wagashi .dora a{background-position:-120px -100px;}

#menu_wagashi .higashi a:hover{background-position:0 0;}
#menu_wagashi .yokan a:hover{background-position:-60px 0;}
#menu_wagashi .dora a:hover{background-position:-120px 0;}


	
	
	/*/// media Query ////*/@media screen and (max-width:480px){
								#menu_wagashi{
									width:80%;
									height:auto;
									margin:50px auto;
								}
								
								#menu_wagashi li{
									float:none;
								}
								
								#menu_wagashi a{
									width:100%;
									height:auto;
									margin:0;
									padding:10px 0;
									text-indent:0;
									text-align:center;
									color:#808080;
									border-radius:5px;
								}
										
								#menu_wagashi .higashi a{ background:#d7efa8; }
								#menu_wagashi .yokan a{ background:#c9c3de; }
								#menu_wagashi .dora a{ background:#ffd8d6; }

								#menu_wagashi .higashi a:hover{ background:#b9d08b; color:#373b3b;}
								#menu_wagashi .yokan a:hover{ background:#a59aca; color:#373b3b;}
								#menu_wagashi .dora a:hover{ background:#f6bfbc; color:#373b3b;}
							}


/*// tunen.html にのみ適用//////////////////////////////////////////////////////////////////////////////////*/


/*//商品詳細ページに適用//////////////////////////////////////////////////////////////////////////////////*/

.index-tunen{
	width:150px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url(pic/index_tunen.png) no-repeat;
	box-shadow:3px 3px 10px gray;
}

.index-higashi{background-position:0 0; background-color:#b9d08b;}
.index-yokan{background-position:-150px 0; background-color:#a59aca;}
.index-dora{background-position:-300px 0; background-color:#f6bfbc;}

.index-season{
	width:150px;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url(pic/index_month.png) no-repeat;
	box-shadow:3px 3px 10px gray;
}

.index-feb{background-position:-150px 0; background-color:#93ca76;}

#discription{
	float:right;
	width:700px;
	height:100%;
}

#discription h1{
	margin-left:10px;
	margin-bottom:10px;
	padding:10px 20px;
	font-size:1.3em;
}


	/*/// media Query ////*/@media screen and (max-width:860px){
								.index-tunen{
									display:none;
								}
								
								.index-season{
									display:none;
								}
								
								#discription{
									float:none;
									width:100%;
								}
								
								#discription h1{
									box-shadow:3px 3px 10px gray;
								}
								
								#discription h1.higashi{
									width:100%;
									padding:10px 0;
									margin-left:0;
									background-color:#b9d08b;
								}
								
								#discription h1.yokan{ background-color:#a59aca; }
								#discription h1.dora{ background-color:#f6bfbc; }
								#discription h1.feb{ background-color:#93ca76; }
							}

/*//商品詳細ページに適用//////////////////////////////////////////////////////////////////////////////////*/