@charset "utf-8";

	/*{
		margin:0;
		padding: 0;
	}*/
	
	body{
		background-color: #BCF5A9;/*黄緑色*/
		font-family: 'arial','Tahoma', sans-serif;
		position:relative;
	}
	
		/*レスポンシブ対応*/
	.inner{
		max-width: 940px;
		margin: 0 auto;
		overflow: hidden;
	}
	
		/*innerの最後にフロート解除*/
	.inner:after{
		content:"";
		display: block;
		clear: both;
	}
	
	img{            
		max-width: 100%;
		height: auto;
	}

	header{
		max-width: 100%;
		height: auto;
	}

/*ヘッダーサークルの配置*/

	header .circle100{   /*左端*/
		width:100px;  /*10.63829%*/
		height:100px;
		background-color:#f0f8ff;/*薄い水色aliceblue*/
		border-radius:50%;
		box-shadow: 0 0 15px #F3F781 inset;	/*レモンイエロー*/	
		margin-left: 2.12765%;
		margin-top: 12.76595%;/*120px*/
		float:left;
	}

	header .circle180{   /*左から二番目*/
		width:180px;   /*19.14893*/
		height:180px;
		background-color:#f0f8ff;/*薄い水色aliceblue*/
		border-radius:50%;
		box-shadow: 0 0 15px #F3F781 inset;	/*レモンイエロー*/	
		margin-top: 4.255319%; /*40px*/
		margin-left: 2.12765%; /*20px*/
		float:left;		
	}
	
	header .circle260{   /*中央*/
		width:260px;
		height: 260px;
		border-radius:50%;
		background: url(image/logo520.png)  ;
		background-size: cover;
		margin-top: 2.12765%; /*20px*/
		margin-left: 2.12765%;
		float:left;
	}

	header .circle180b{  /*右から二番目*/
		width:180px;
		height:180px;
		border-radius:50%;
		background: url(image/watage360.jpg)  ;
		background-size: cover;	
		box-shadow: 0 0 15px #F3F781 inset;	/*レモンイエロー*/	
		margin-top:4.255319%; /*40px*/
		margin-left: 2.12765%; /*20px*/
		float:left;
		}

	header .circle100b{    /*右端*/
		width:100px;
		height:100px;
		border-radius:50%;
		background: url(image/watage200.jpg)  ;
		background-size: cover;	
		box-shadow: 0 0 15px #F3F781 inset;	/*レモンイエロー*/	
		margin-top: 4.255319%; /*40px*/
		margin-left: 2.12765%;
		float:left;
	}

/*ヘッダーサークル内の文字の配置*/

	header p{
       	text-align: center;
	}

	header .circle100 p{ /*文字の高さの調節*/
		line-height: 1.25;
	}

	header .circle180 p{      
		margin-top:50px;
	}


/*ヘッダーサークル内の太文字*/

	span{
		font-size: 1.25em;
		font-weight: bold;
		color: #a52a2a;/*ブラウン*/
	}

	header .circle180b span{
		background: rgba(243,247,129,0.3);/*文字に薄い黄色の背景*/
		
	}

	header .circle100b span{
		font-size: 1.00em;  /*文字をサークル内におさめる*/
		background: rgba(243,247,129,0.3);
	}


/*ヘッダーサークル内のリンク display:block*/

	header a{
		text-decoration:none;
	}

	header .circle260 a{
		display:block;
		width:100%;
		height:260px;
		text-indent:100%;    /*タイトルロゴ文字消去*/
		white-space:nowrap;
		overflow: hidden;
	}

	header .circle180b a{
		display:block;
		width:100%;
		line-height:180px;
		text-align:center;
	}

	header .circle100b a{
		display:block;
		width:100%;
		line-height:100px;
		text-align:center;
	}

/*ヘッダーサークルにマウスが乗った時*/

	header .circle100:hover  { 
		background-image: url(image/huurin200.jpg);
		background-size: cover;
		border-radius:50%;
		opacity: 0.7;
	}

	header .circle180b a:hover{
		background: url(image/store360.jpg)  ;
		background-size: cover;
		border-radius:50%;
		opacity: 0.7; 
	}

	header .circle180:hover{
		background: url(image/inside360.jpg) ;
		background-size: cover;
		opacity: 0.7; 
	}

	header .circle100b a:hover{
		background: url(image/angel200.jpg)  ;
		background-size: cover;
		border-radius:50%;
		opacity: 0.7;
	}

	/*ヘッダーのレスポンシブ対応*/

@media screen and (max-width:799px){
	header .circle180b{
		margin-left: 30%;
		margin-top: 0;
	}
		header .circle100{
		margin-left: 10%;
	}
}
	

@media screen and (max-width:629px){
	header .circle260{
		margin-left: 18%;
	}
	header .circle180b{
		margin-left: 20%;
		margin-bottom: 5%; 
	}
}


@media screen and (max-width:359px){
	header .circle260{
		margin-left: 8%;
	}
	header .circle100b{
		margin-left: 60%; 
		margin-top: 0;
		}
	header .circle180b{
		margin-bottom: 0; 
	}
}


	/*トップページに戻る画像表示（インデックス以外に設定）*/
	
	#goodsinfo header .circle260 a:hover,
	#seasonable header .circle260 a:hover,
	#storeinfo header .circle260 a:hover
	 {
		background-image: url(image/logo_back.png)  ;
		background-size: cover;
		border-radius:50%;
	}


/*フッダ－*/
	footer {
		height:50px;
		width: 100%;
		margin: 2.12765%;/*20px;*/
	}

	footer p {
		text-align: center;
	}

.pagetop{
	width: 14.0625%;
	min-width: 45px;
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 100;
}


/*コンテンツ（スライド）はjquery/css/style2css*/


/*インデックスニュース*/
	#news	{
		width: 280px;
		height: 450px;
		border-radius:30px;	
		margin-top: 5.31914%;
		margin-right: 1.06382%;
		margin-bottom: 2.12765%;
		margin-left:2.12765%;
		/*margin: 50px 10px 20px 10px;*/
		padding: 1.06382%; /*10px;*/
		background-color:#f0f8ff;/*薄い水色aliceblue*/
		float: left;
	}

	#news h2{
		color: #a52a2a; /*ブラウン*/
		text-align:center;
		padding: 2.12765%; /*20px;*/
	}
	#news dt{
		color: #a52a2a;/*ブラウン*/
		margin-top: 2.12765%; /*20px;*/
		margin-left: 1.59574%;/*15px*/
	}	
	#news dd{
		margin-right: 1.59574%; /*15px*/
		margin-left: 5.31914%; /*50px*/
		/*margin: 0 15px 0 50px;*/
		border-bottom: 1px dotted;
	}	

 /*レスポンシブでニュースのサイズ変更*/

@media screen and (max-width:679px){
	#news{ 
		float:none;
		max-width: 350px;
		width: 100%;
		height: auto;
		margin: auto;
	}
}

/*インデックスリンクの配置（aside）*/	
	.menu{
		display: flex;  /*flexbox*/
		flex-wrap: wrap;
		max-width: 630px;
		height: auto;
		margin-top: 5.31914%; /*50/940*/
		margin-left: 1.59574%; /*15px*/
	}

/*レスポンシブ対応（画像が一画面になった時）*/
@media screen and (max-width:368px){
	.menu{
		margin-left: 20%;;
	}
}


	
/*共通サークル（商品画像サークル）*/

	ul li.circle180c{
		width:180px;
		height:250px;
		list-style: none;
		margin-top: 1.06382%;
		margin-bottom: 0.53191%;
		margin-left: 0.53191%;
		/*margin: 10px 0px 5px 5px;*/
	}

	 ul li.circle180c a{
		display:block;
		width:100%;
		line-height:180px;
		border: solid 1px #F3F781;/*レモンイエロー*/
		border-radius:50%;
		text-indent:100%;    /*リンク文字消去*/
		white-space:nowrap;
		overflow: hidden;
	}

	/*テキスト非表示*/
	 ul  li.circle180c p{
		display:none;
	}

	/*店舗画像top,store*/
	.store{
		background: url(image/store360.jpg)  ;
		background-size: cover;
	}


/*インデックスと商品リンク・マウスが乗った時にテキスト表示*/
	ul  li.circle180c:hover{
		background-color:#F3F781;/*レモンイエロー*/
	}
	
	 ul  li.circle180c:hover p{
		display:block;
		text-align: center;
		color: #a52a2a;/*ブラウン*/
		font-weight:  bold;
	}

/*パンくずリスト*/

	#pankuzu ol{
		margin-right:2.12765%;
		margin-bottom:2.12765%;
		margin-left:5.31914%;
		/*margin: 0 20px 20px 50px;*/
	}

	#pankuzu ol li{
		display: inline;
		margin-top: 0;
	}

	#pankuzu ol li a{
		text-decoration: none;
		color:#a52a2a;/*ブラウン*/
		font-weight: bold;
	}


/*storeinfoのメインのページ*/

	#info{
		overflow:hidden;
		width: 98.93617% ;/*930px;*/
		margin: 1.0638%  2.12765%;/*10px 20px;*/
	}


	#address img{
		margin-right: 2.12765%;
		margin-bottom: 2.12765%;
		/*margin: 0 20px 20px 0;*/
		background-repeat: no-repeat ;
		background-size: cover;
		border-radius:30px;
		max-width: 620px;
		width: 100%;
		height: auto;
		float: left;
	}

	#outside img{   /*外観画像*/
		margin-right: 2.12765%;
		margin-bottom: 2.12765%;
		/*margin:0 20px 20px 0;*/
		border-radius:30px;
		max-width: 260px;
		width: 100%;
		height:auto;
		border: 2px solid #3B0B17; /*こげ茶*/
		opacity: 0.6;
		float: right;
	}

	#outside img.onmouse:hover{   
		opacity: 1.0;
	}



	/*レスポンシブの時にアドレスと外観横並び*/

@media screen and (max-width:945px){
	#address img{
	max-width: 550px;
	width: 100%;
	}

	#outside img{ 
	max-width: 230px;
	width: 100%;
	}
}

@media screen and (max-width:827px){
	#address img{
		max-width: 450px;
		width: 100%;
	}
}

	/*レスポンシブ(スマホ)の時に外観余白調整*/

@media screen and (max-width:753px){
	#address img{
		float: none;
		margin: auto;
		max-width: 620px;
		width: 100%;
		height: auto;
	}
	#outside img{ 
		float: none;
		max-width: 260px;
		width: 100%;
		height:auto;
		margin-left: 10% 
	}
}

	
/*responsive対応グーグルマップcssコピペ*/

	#map{     
		clear: both;
		margin: 20px auto;
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}

	#map iframe,
	#map object,
	#map embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}


/*店内画像*/

	#inside img{   
		width: 99%;
		height: 345px;
		margin: auto;
		border: 2px solid #3B0B17; /*こげ茶*/
		border-radius:30px;
		background-size: cover;
		opacity: 0.6;
	}
	#inside img.onmouse:hover{   
		opacity: 1.0;
	}


/*goodsinfoのメインのページ*/
	
	#goods{
		background-color: #f0f8ff;/*薄い水色aliceblue*/
		border-radius:50px;	
		height: auto;
		margin: 0;
		padding:0;	
	}


	/*ページ内リンク*/

	#p_link {    
		overflow: hidden;
		padding: 2.12765%;/*20px;*/
		margin-bottom: 2.12765%;/*20px;*/
	}

	#p_link ul li{
		list-style: none;
		width: 150px; /*150px;*/
		height: 50px;
		float: left;
		margin: 0.53191%; /*5px;*/
	}

	#p_link ul li a{
		display:block;
		width: 100%;
		line-height: 50px;
		border-radius:20px;	
		color:#a52a2a; /*ブラウン*/
		text-align: center;
		background-color: #F3F781;/*レモンイエロー*/
		text-decoration: none;	
	}
	

	/*レスポンシブ対応（リストが二行になった時）*/

	@media screen and (max-width:831px){
	#p_link {
		padding-left: 10%;
		}
	#p_link ul li{
		padding-bottom: 2%; 
		}
	}

	@media screen and (max-width:350px){
	#p_link {
		padding-left: 1%;
		}
	}

	/*見出し 商品画像*/

	 #goods h2{          
		width: 300px;
		line-height: 50px;
		border-radius:20px;	
		color:#a52a2a;  /*ブラウン*/
		text-align: center;
		background-color: #BCF5A9;/*黄緑色*/
		margin: 0px auto 20px;
	}

	#goods ul{
		width: 99.46808%; /*935px;*/
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	#goods .circle180c{   /*サークルにフロート化*/
		height:300px;  /*テキスト表示をトップより長くする*/
		width:180px; 
		float: left;
	}

	#goods #season .circle180c{
		height:350px;  /*テキスト表示を定番商品より長くする*/
		width:180px; 
		float: left;
	}

	#goods  ul small{   /*商品説明文*/
		text-decoration: underline dotted;
		font-size: 0.5em;
	}



/*キッチン goods_k*/
	.kitchen01{
		background: url(image/kitchen01.jpg) ;
		background-size: cover;
	}

	.kitchen02{
		background: url(image/kitchen02.jpg) ;
		background-size: cover;
	}

	.kitchen03{
		background: url(image/kitchen03.jpg) ;
		background-size: cover;
	}

	.kitchen03 p{
		font-size: 70%; /*サイズを小さくしたい*/
	}
	
	.kitchen04{
		background: url(image/kitchen04.jpg) ;
		background-size: cover;
	}

	.kitchen05{
		background: url(image/kitchen05.jpg) ;
		background-size: cover;
	}

/*食器 goods_t*/
	.tableware01{
		background: url(image/tableware01.jpg)  ;
		background-size: cover;
	}

	.tableware02{
		background: url(image/tableware02.jpg)  ;
		background-size: cover;
	}

	.tableware03{
		background: url(image/tableware03.jpg)  ;
		background-size: cover;
	}

	.tableware04{
		background: url(image/tableware04.jpg)  ;
		background-size: cover;
	}

	.tableware05{
		background: url(image/tableware05.jpg)  ;
		background-size: cover;
	}

	.tableware06{
		background: url(image/tableware06.jpg)  ;
		background-size: cover;
	}

/**文房具 goods_s*/

	.stationary01{
		background: url(image/stationary01.jpg)  ;
		background-size: cover;
	}
	.stationary02{
		background: url(image/stationary02.jpg)  ;
		background-size: cover;
	}
	.stationary03{
		background: url(image/stationary03.jpg)  ;
		background-size: cover;
	}
	.stationary04{
		background: url(image/stationary04.jpg)  ;
		background-size: cover;
	}
	.stationary05{
		background: url(image/stationary05.jpg)  ;
		background-size: cover;
	}
	.stationary06{
		background: url(image/stationary06.jpg)  ;
		background-size: cover;
	}
	.stationary07{
		background: url(image/stationary07.jpg)  ;
		background-size: cover;
	}

/*生活雑貨 goods_l*/
	
	
	.livingware01{
		background: url(image/livingware01.jpg)  ;
		background-size: cover;
	}

	.livingware02{
		background: url(image/livingware02.jpg)  ;
		background-size: cover;
	}

	.livingware03{
		background: url(image/livingware03.jpg)  ;
		background-size: cover;
	}

	.livingware04{
		background: url(image/livingware04.jpg)  ;
		background-size: cover;
	}

	.livingware05{
		background: url(image/livingware05.jpg)  ;
		background-size: cover;
	}

	.livingware06{
		background: url(image/livingware06.jpg)  ;
		background-size: cover;
	}

	.livingware07{
		background: url(image/livingware07.jpg)  ;
		background-size: cover;
	}

	.livingware08{
		background: url(image/livingware08.jpg)  ;
		background-size: cover;
	}

/*シーズン商品（梅雨）*/

	/*シーズン商品へのリンク背景*/
	#p_link ul li a.link_season{
		background-color: #CEECF5;/*空色*/
	}

	/*シーズン商品タイトル背景*/

	#season h2{
		background-color: #CEECF5;/*空色*/
		margin: 5.31914%; /*50px;*/
		width: auto;
	}

	#season h2 img{
		margin: 0 ;
		padding: 0 1.06382%;
		/*padding: 0 10px;*/
		width: 50px;
		height: auto;
	}

	.season01{
		background: url(image/season01.jpg)  ;
		background-size: cover;
	}

	.season02{
		background: url(image/season02.jpg)  ;
		background-size: cover;
	}

	.season03{
		background: url(image/season03.jpg)  ;
		background-size: cover;
	}

	.season04{
		background: url(image/season04.jpg)  ;
		background-size: cover;
	}

	.season05{
		background: url(image/season05.jpg)  ;
		background-size: cover;
	}

	.season06{
		background: url(image/season06.jpg)  ;
		background-size: cover;
	}

	.season07{
		background: url(image/season07.jpg)  ;
		background-size: cover;
	}

	.season08{
		background: url(image/season08.jpg)  ;
		background-size: cover;
	}

	.season09{
		background: url(image/season09.jpg)  ;
		background-size: cover;
	}

	.season10{
		background: url(image/season10.jpg)  ;
		background-size: cover;
	}

	.season11{
		background: url(image/season11.jpg)  ;
		background-size: cover;
	}

	.season12{
		background: url(image/season12.jpg)  ;
		background-size: cover;
	}

	/*レスポンシブ対応（画像が一画面になった時）*/

	@media screen and (max-width:368px){
		#goods .circle180c{
			margin-left: 20%;
		}
	}