﻿/**{
	margin:0px;
	padding:0px;
}


img {
border:0;
}*/


/*------------------------------------------------------
　　　　　　　　　　　　基本設定
------------------------------------------------------*/
/*body{
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS PGothic", sans-serif;
	line-height: 1.5em;
	color: 200;
	font-size: 80%;
	margin: 0px;
	-webkit-text-size-adjust: 100%;
}*/

/* スマホだけに適用するCSS *//* ボディ *//* 文字サイズ */
/*@media screen and ( max-width:479px )
{
	
	body
	{
		font-size: 13px ;	
	}
}

a:hover{color: #ff0000;}*/
/*------------------------------------------------------
　スマホ画面のとき　ヘッダー・フッター・レフトナビ非表示
------------------------------------------------------*/
@media screen and ( max-width: 479px ){
	.medianone {
		display:none;
	}
} 

/*------------------------------------------------------
　スマホ画面のとき　スマホ専用ヘッダー・フッターを表示
------------------------------------------------------*/
.new-post
{
	display: none ;		/* 非表示にする */
}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
	.new-post
	{
		display: block ;		/* 表示にする */
	}
}

/*------------------------------------------------------
　スマホ画面のヘッダーのハコ（カルーセル用）
------------------------------------------------------*/
@media screen and ( max-width:479px )
{
.carousel-post{
	width:100%;
	height:auto;
	padding-top:32%;
	display:block;
}
}


/*------------------------------------------------------
　同じリンク・画像がCPとSPで違う場合
------------------------------------------------------
 パソコンで見たときは"pc"のclassがついた画像が表示される
.pc { display: block !important; }
.sp { display: none !important; }

 スマートフォンで見たときは"sp"のclassがついた画像が表示される
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
*/

/*------------------------------------------------------
　　　　　　　　　　全体の幅
------------------------------------------------------*/
/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 750px ;
	margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;		/* 上下左右の余白を0にしておく */
}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
	.wrapper
	{
		width: auto ;
		padding: 0 0px ;		/* 左右の余白 */
	}
}

/*------------------------------------------------------
　　　　　　フレームの幅、背景画像設定
------------------------------------------------------*/
#frame{
	width:100%;/*1054px*/
	margin:auto;
	/*background:url(../frame/back.gif);*/
	background-repeat:repeat-y;
	}
	
@media screen and ( max-width:479px )
{
	#frame
	{
		width:auto;
		height:auto;
		background-color:#FFF;
		display:block;
		/*↓コレは今回だけ追加*/
		background-image:none;
	}
}

/*------------------------------------------------------
　　　　　　コンテナ幅、マージン、背景画像
------------------------------------------------------*/
#container{
	width:100%;/*950px*/
	margin:auto;
}

@media screen and ( max-width:479px )
{
	#container
	{
		width:auto;
	}
}

/*------------------------------------------------------
　　　　　　バナーサイズ
------------------------------------------------------*/

/*@media screen and ( max-width:479px )
{
	img
	{
		max-width: 100%;
	}
}*/

/*--
/*------------------------------------------------------
　　　　　　リストのテキストを欄外へ
------------------------------------------------------*/
/*li{
	list-style-type:none;
	float: left;
}*/

/* クラス「Notfloat」にはフロート効かせない */
#n-feature li:not(.Notfloat){
	float: left;
    list-style: none;
}

.Notfloat li{
	/*float: none;*/ 
    margin: 0 9px 0 0;
	list-style-type:none;
}

/* ヘッダは単色で塗りつぶす */
/*------------------------------------------------------
　　　　　　ヘッダーフッターのバー設定
------------------------------------------------------*/
.header-footer{
	background-color:#F9C;
	height:20px;
	min-width:1054px;
}


/*------------------------------------------------------
　　　　　　　コンテンツのサイズ設定
------------------------------------------------------*/
#content{
	/*width:950px;*/
	margin:auto;
}

@media screen and ( max-width:479px )
{
	#content
	{
		width:auto;
	}
}
/*------------------------------------------------------
　　　　　　　テキストリンクの下線設定
------------------------------------------------------*/
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
		 -o-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
}



/*------------------------------------------------------
　　　　　　ロールオーバーのスピード設定
------------------------------------------------------*/

.bo a{
	-webkit-transition: 0.5s ease-in-out;
	   -moz-transition: 0.5s ease-in-out;
		 -o-transition: 0.5s ease-in-out;
			transition: 0.5s ease-in-out;}
.bo a:hover{opacity:0.7; filter: alpha(opacity=70);}



#ifram-tdl{
	width:697px;
	height:275px;
	background:url(../../toppicture/top-m-tdl.jpg) no-repeat;}


/*------------------------------------------------------
　　　　　　ライトナビゲーションの設定
------------------------------------------------------*/

/*---位置設定---*/
.right-navi{
	position:fixed;
	bottom:0px;
	right:0px;
	z-index:100;
}

/*---ランキング設定---*/
#right-ranking a{
	width:120px;
	height:150px;
	display:block;
	position:fixed;
	bottom:80%;
	right:0px;
	z-index:100;
	background:url(../../../common/right-picture/ritghtbanner02.png) no-repeat;
}

/*---らくらくセットへ設定---*/
#right-rakuraku a{
	width:53px;
	height:211px;
	display:block;
	background:url(../../../common/right-picture/right-rakuraku.png) no-repeat;}
/*オンマウス入替設定*/
#right-rakuraku a:hover{background:url(../../../common/right-picture/right-rakuraku2.png) no-repeat;}

/*---カテゴリで選ぶ設定---*/
#right-category a{
	width:53px;
	height:182px;
	display:block;
	background:url(../../../common/right-picture/right-category.png) no-repeat;}
/*オンマウス入替設定*/
#right-category a:hover{background:url(../../../common/right-picture/right-category2.png) no-repeat;}


/*---予算で選ぶ設定---*/
#right-budget a{
	width:53px;
	height:141px;
	display:block;
	background:url(../../../common/right-picture/right-budget.png) no-repeat;}
/*オンマウス入替設定*/
#right-budget a:hover{background:url(../../../common/right-picture/right-budget2.png) no-repeat;}

/*---送料・お支払い設定---*/
#right-postage a{
	width:67px;
	height:47px;
	display:block;
	margin:20px 0px;
	background:url(../../../common/right-picture/right-postage.jpg) no-repeat;
}

/*---買い物カゴ設定---*/
#right-cart a{
	width:64px;
	height:49px;
	display:block;
	margin:20px 0px;
	background:url(../../../common/right-picture/right-cart.jpg) no-repeat;
}


@media screen and ( max-width:479px ){
	
.menu_bottan{
	width: 100%;
	padding: 2%;

	font-size: 0;
	box-sizing: border-box;
}
	
.menu_bottan li{
	box-sizing: border-box;
	width: 32%;
	padding: 3% 4.5%;
	background-color: #FF9933;
	display: inline-block;
	font-size: 12px;
	color: #663300;
	border-radius: 2px;
	box-shadow: 10px 5px;
	text-align: center;
	box-shadow: 0.8px 0.8px 0.8px #999;
	text-align: center;
}

	.menu_bottan li a img {
		width:15%;
		padding: 3% 0 0 0;
		float: left;
	}
	.menu_bottan li a{
		color: #663300;
		display: block;
	}
	.menu_bottan li:nth-child(2n){
		margin: 0 2%;
	}
	
	.menu_bottan li:last-child{
		padding: 3% 2%;
	}
		
	.menu_bottan li span{
		font-weight: bold;
	}
	
}




/*---チャットボット設定---*/
.chat-window-toggled{right: 70px !important;}
.chat-window-toggled-mobile {bottom:70px !important;}
.chat-header:before{content: "\30C1\30E3\30C3\30C8\3067\304A\554F\3044\5408\308F\305B" !important;}
.chat-window>.chat-header:before{content: " " !important;}
.chat-window-toggled-mobile div:before{content: "\30C1\30E3\30C3\30C8\3067\304A\554F\3044\5408\308F\305B" !important;}