@charset "UTF-8";




body {
	font: 90%/2  "メイリオ","ＭＳ Ｐ明朝", Osaka,"ヒラギノ角ゴ Pro W3";	/*文字サイズは75%の部分になる。12pxとか自由に変更して下さい。*/
	color: #CCCCCC;	/*文字色をグレーに*/
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: #000000 url(../images/bg.jpg) no-repeat center top;	/*壁紙設定箇所。ページ上部の中央よせという意味。通常の設定にしたいなら「no-repeat center top」を外す。*/
    }


h1,h2,h3,p,ul,li,dl,dt,dd{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style-type: none;
}
h1,h2,h3,p,ul,li,dl,dt,dd img {
	border: none;
}
.color1 {
	color: #976a95;
}
.look {
	background: #222222;
}



/*リンク設定
---------------------------------------------------------------------------*/
a {
	color: #CCCCCC;	/*リンク部分を通常テキストと同じグレーにする*/
}
a:hover {
	color: #938293;	/*カーソルオーバー時に薄い紫色にする*/
}



/*h1タグ設定
---------------------------------------------------------------------------*/
h1 {
	font-size: 10px;	/*文字サイズを10pxに*/
	text-align: left;	/*左よせ。もし右よせがいいなら「left」を「right」、センタリングがいいなら「center」にする。*/
}



/*コンテナー設定
---------------------------------------------------------------------------*/
#container {
	background: url(../images/container_bg.gif) repeat-y;
	width: 912px;
	margin-top: 200px;	/*最上部の画像とサイト名の高さに合わせてここも変更する*/
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}



/*メインメニュー設定
---------------------------------------------------------------------------*/
ul#menu li {
	float: left;	/*ビルダー編集画面で崩れないようにフロート設定にしました*/
	width: 151px;
}



/*コンテンツ設定
---------------------------------------------------------------------------*/
#contents {
	clear: left;	/*上のメインメニューのフロート処理の解除*/
	width: 100%;
}



/*トップページのFLASH（メイン画像）設定
---------------------------------------------------------------------------*/
#fla {
		
	text-align: center;
}

.frame {
	display:block;
	position: relative;
	margin-left:5px;
	margin-right: 5px;
	 max-width: 98%;

    margin: auto; /*縦余白30pxは任意*/
   	 padding-bottom: 300px;
	
   
}


.frame:after {
	position: absolute;    
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #000;
    -webkit-box-shadow: inset 0px 0px 15px 15px #000;
    box-shadow: inset 0px 0px 15px 15px #000;
    content: " ";
 }

.frame img {

	border-radius: 20px;
	animation: show 21s infinite;
    -webkit-animation: show 21s infinite;
    position: absolute;
    opacity: 0;
    
}

@keyframes show {
    0% {opacity: 0}
    11% {opacity: 1}
    16% {filter:brightness(130%)}
   21% {filter:brightness(100%)}
   33% {opacity: 0;} 100%{opacity: 0}
 }

@-webkit-keyframes show {
     0% {opacity: 0}
    11% {opacity: 1}
    16% {filter:brightness(130%)}
   21% {filter:brightness(100%)}
   33% {opacity: 0;} 100%{opacity: 0}
 }

.frame img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.frame img:nth-of-type(2) {
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
}
.frame img:nth-of-type(3) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}
/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	display: inline;
	float: left;
	width: 550px;	/*メインコンテンツ(左ブロック)の幅*/
	margin-left: 20px;
	padding-top: 20px;
	padding-bottom: 100px;
}

/*メインコンテンツ内の見出し設定箇所*/
#main h2 {
	font-size: 90%;
	border-top: 1px solid #2A1C29;		/*上に入っている線。1pxの直線(solid)を#2A1C29の色で入れています*/
	border-bottom: 1px solid #2A1C29;	/*下に入っている線。1pxの直線(solid)を#2A1C29の色で入れています*/
	line-height: 50px;					/*見出しの高さ*/
	background: url(../images/h2_bg.jpg) no-repeat right center;	/*見出しに入っている梅の花画像設定*/
	padding-left: 10px;
	letter-spacing: 0.2em;
	color: #FFFFFF;		/*文字色を白に*/
}
#main h5{
    background: #130d13;		/*見出し背景色*/
	letter-spacing: 0.2em;
	text-align: center;			/*文字のセンタリング。左よせでいいならこの1行を丸ごと削除。*/
	font-size: 80%;
	border: 1px solid #2A1C29;	/*見出しの枠線。1pxの直線(solid)を#2A1C29の色で設定。*/
	color: #FFFFFF;
	}

/*メインコンテンツ内の段落設定箇所*/
#main p {
	padding: 0.5em 10px 1em;
}
#main img {
	padding: 6px;				/*写真とフチ線の間にある余白*/
	border: 0px ;	/*写真のフチ設定。solidは直線という意味。*/
	margin: 6px;
}
#main .setubi{
	width: 550px;	/*テーブルの幅*/
	font-size: 90%;
	border-collapse: collapse;
	margin-right: auto;
	margin-left: auto;
}
#main .setubi tr{
	border-bottom: 1px dashed #130d13;	/*テーブルの下に#0D3F69の色で点線(dashed)を入れる設定。直線がいいならsolidにする。*/
	margin-bottom: 10px;
}

#main .setubi td {
	width:275px;
	margin:auto;
}



/*商品リストページのボックス設定
---------------------------------------------------------------------------------------------------------*/
#result {
	display: inline;
	
	float: left;
	width: 550px;	/*メインコンテンツ(左ブロック)の幅*/
	margin-left: 20px;
	padding-top: 20px;
	padding-bottom: 100px;}

#result h6{
    background: #130d13;		/*見出し背景色*/
	letter-spacing: 0.1em;
	text-align: center;			/*文字のセンタリング。左よせでいいならこの1行を丸ごと削除。*/
	width:523px;	
	font-size: 80%;
	border: 1px solid #2A1C29;	/*見出しの枠線。1pxの直線(solid)を#2A1C29の色で設定。*/
	color: #FFFFFF;
	margin:1.2em 0em 0.2em 0em;
	}

		
#result .box {
	width: 500px;	/*テーブルの幅*/
	font-size: 90%;
	margin-right: auto;
	margin-left: auto;
	border-bottom: 1px dashed #130d13;	/*テーブルの下に#0D3F69の色で点線(dashed)を入れる設定。直線がいいならsolidにする。*/
	margin-bottom: 10px;
}


	
#result .box td{
	padding-bottom: 10px;
	vertical-align: top;
}

#result .box td p {
	padding: 0 0 0 0;
	}

/*商品名設定*/
#result .box h4 {
    background: #130d13;		/*見出し背景色*/
	border: 1px solid #2A1C29;		/*商品名の左に4px幅の#0D3F69色の直線を入れる*/
	color: #FFFFFF;				/*文字色を白に*/
    margin-top:0.1em;
	margin-bottom:0.1em;
	padding-top: 1px;
	padding-left: 5px;
	font-size: 100%;
	position: relative;

}

/*商品分類*/
#result .box h4 span {
	position: absolute;
	right: 5px;
	color: #f0f0f0;	/*価格の文字色*/
}



/*ボックス内にある画像の設定*/
#result .box img {
	padding: 4px;				/*写真とフチ線の間にある余白*/
	border: 1px solid #cccccc;	/*写真のフチ設定。solidは直線という意味。*/
	margin: 2px;
}

#result .box a:hover img {
	border: 1px solid #333333;	/*画像にカーソルがのった時のライン色変更設定。*/
}




/*サイドコンテンツ
---------------------------------------------------------------------------*/
#side {
	display: inline;

	float: right;
	width: 300px;	/*サイドコンテンツ(右ブロック)の幅*/
	margin-right: 20px;
	padding-top: 20px;
	
	padding-bottom: 100px;
}

/*サイドコンテンツ内の見出し設定箇所*/
#side h3 {
	background: #130d13;		/*見出し背景色*/
	letter-spacing: 0.2em;
	text-align: center;			/*文字のセンタリング。左よせでいいならこの1行を丸ごと削除。*/
	font-size: 80%;
	border: 1px solid #2A1C29;	/*見出しの枠線。1pxの直線(solid)を#2A1C29の色で設定。*/
	color: #FFFFFF;				/*文字色を白に*/
}

/*サイドコンテンツ内の段落設定箇所*/
#side p {
	padding-top: 0.5em;
	padding-bottom: 1em;
}



/*サイドコンテンツ内の「おしらせ」部分
---------------------------------------------------------------------------*/
#side dl {
	margin-top: 0.5em;
	margin-bottom: 1em;
}
#side dt {
	font-weight: bold;	/*日付を太字に。通常の太さがいいなら、この1行を丸ごと削除。*/
	color: #976a95;		/*日付の文字色を紫色（#976a95）に*/
}
#side dt a {
	font-weight: bold;	/*日付を太字に。通常の太さがいいなら、この1行を丸ごと削除。*/
	color: #976a95;		/*日付の文字色を紫色（#976a95）に*/
}

#side dd {
	border-bottom: 1px dotted #2A1C29;	/*コメントの下に1pxの点線(dotted)を#2A1C29の色で入れる。*/
	padding-left: 1em;	/*コメントの左側に少しだけ空白を設ける。上の日付と同じくしたいなら、この1行を丸ごと削除。*/
}

/*AjaxサイドコンテンツAjax
---------------------------------------------------------------------------*/
#sideresult {
	display: inline;
	float: right;
	width: 300px;	/*サイドコンテンツ(右ブロック)の幅*/
	margin-right: 20px;
	padding-top: 20px;
	padding-bottom: 100px;
}

/*Ajaxサイドコンテンツ内の見出し設定箇所*/
#sideresult h3 {
	background: #130d13;		/*見出し背景色*/
	letter-spacing: 0.2em;
	text-align: center;			/*文字のセンタリング。左よせでいいならこの1行を丸ごと削除。*/
	font-size: 80%;
	border: 1px solid #2A1C29;	/*見出しの枠線。1pxの直線(solid)を#2A1C29の色で設定。*/
	color: #FFFFFF;				/*文字色を白に*/
}

/*Ajaxサイドコンテンツ内の段落設定箇所*/
#sideresult p {
	padding-top: 0.5em;
	padding-bottom: 1em;
}



/*Ajaxサイドコンテンツ内の「おしらせ」部分
---------------------------------------------------------------------------*/
#sideresult dl {
	margin-top: 0.5em;
	margin-bottom: 1em;
}
#sideresult dt {
	font-weight: bold;	/*日付を太字に。通常の太さがいいなら、この1行を丸ごと削除。*/
	color: #976a95;		/*日付の文字色を紫色（#976a95）に*/
}
#sideresult dt a {
	font-weight: bold;	/*日付を太字に。通常の太さがいいなら、この1行を丸ごと削除。*/
	color: #976a95;		/*日付の文字色を紫色（#976a95）に*/
}
#sideresult dd {
	
	border-bottom: 1px dotted #2A1C29;	/*コメントの下に1pxの点線(dotted)を#2A1C29の色で入れる。*/
	padding-left: 1em;	/*コメントの左側に少しだけ空白を設ける。上の日付と同じくしたいなら、この1行を丸ごと削除。*/
	
}
#sideresult dd span{
	position:absolute;
	left:200px;
	
	text-align:right;
}


/*フッター（copyright部分）
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	width: 909px;
	text-align: center;
	background: url(../images/footer_bg.gif) no-repeat center bottom;
	line-height: 1.4;
	height: 70px;
	padding-top: 30px;
}

#totop {
   position:fixed;
   bottom:5px;
   left:auto;
   margin:0 0 0 904px;   /* マージン：上 右 下 左 */
   width:40px;
   height:123px;
   background: url(../images/page_top.png) no-repeat center bottom;

}
/* IE6以下用 */
* html #ttop { position:relative; }

#totop:hover {
background-position:0 2px;   /* 画像の高さによって適当に調整 */
}
a.page_top {
display:block;
width:41px;
height:123px;
}