@charset "utf-8";

/*==================
ベースのCSSの設定
====================*/

/*ベースの要素の設定をリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
p,article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/*HTML5の新要素をdisplay:blocにする*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

/*画像の枠線をクリアして位置の初期値の設定*/
img{
border:0;
vertical-align: top;
}

/*サイト全体の基本情報の設定*/
body{
font-size: 100%;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
line-height:1.4;
color:#333;
background:#fff;
}


/*リンク時の枠の点線をなしにする*/
a{
outline: none;
}

/*リンクの装飾の設定*/
a:link,
a:visited,
a:active{
color:#3f98c4;
text-decoration:underline;
}

a:hover{
color:#3f98c4;
text-decoration:none;
}

/*リスト要素の初期値をリセット*/
ul,ol{
list-style: none;
}

/*clearfixの設定*/
.clearfix:after{  
visibility:hidden;
height:0;
display: block;
font-size: 0;  
content: " ";  
clear: both;  
}  
* html .clearfix             { zoom: 1; } 
*:first-child+html .clearfix { zoom: 1; } 



/*=====================
ヘッダーエリアの設定
=======================*/
/*幅100%にヘッダーの帯を表示させる装飾*/
#header{
background:#fff;
width:100%;
border-bottom:1px solid #f3f2f2;
font-size:1.1em;
}

/*ヘッダーのコンテンツ領域を940pxにしてセンター寄せに*/
#header_top{
width:940px;
margin:0 auto;
position:relative;
}

/*ロゴの上の余白を設定*/
h1{
padding-top:25px;
}

/*リード文の装飾*/
#header_top h2{
margin:0 0 20px 33px;
color:#999;
font-size:1.0em;
font-weight:normal;
}

/*rss・sitemapの設定を右に設定*/
ul#subnav{
text-align:right;
position:absolute;
top:30px;
right:10px;
}

/*サブナビゲーションを横並びに設定*/
ul#subnav li{
float:left;
padding:0 30px 0 0;
}

/*サイトマップのアイコンの設定*/
ul#subnav a.sitemap{
display:block;
background:url(images/sitemap.gif) no-repeat 0 0px;
padding:0 0 0 20px;
min-height:15px;
}

/*RSSフィードのアイコンの設定*/
ul#subnav a.rss{
display:block;
background:url(images/rss.gif) no-repeat 0 0px;
padding:0 0 0 18px;
min-height:12px;
}





/*=====================
グローバルナビゲーション・グラフィックの設定
=======================*/

/*ナビゲーションの背景を100%にして背景画像を設定*/
#globalnav{
width:100%;
min-height:47px;
background:url(images/nv_bg.gif) repeat-x;
}

/*ナビゲーションのコンテンツを幅940pxにしてセンター寄せに設定*/
#globalnav ul{
width:940px;
margin:0 auto;
overflow:hidden;
}

/*ナビゲーションを横並びにして背景画像を設定*/
#globalnav li{
float:left;
background:url(images/line.gif) no-repeat left center;
height:47px;
}

/*ナビゲーションのリンクボタンの装飾の設定*/
#globalnav li a{
color:#fff;
display:block;
width:146px;
height:47px;
line-height:47px;
padding:0 5px;
text-align:center;
font-size:1.4em;
text-decoration:none;
/*アニメーションの設定*/
-moz-transition:0.25s linear;
-webkit-transition:0.25s linear;
-o-transition:0.25s linear;
transition:0.25s linear;
behavior: url(PIE.htc);
}

#globalnav li a:hover{
background:#3399FF;
}

/*メイングラフィックの設定*/
#header p img{
display:block;
width:940px;
margin:0 auto;
}




/*=================
コンテンツエリア設定
===================*/
/*コンテンツ領域を100%にして背景画像を設定*/
#contents{
width:100%;
background:url(images/bg_main.gif) repeat-x left top;
padding-bottom:80px;
}

/*コンテンツ内のエリアを940pxにしてセンター寄せに設定*/
#contents_inner{
width:940px;
margin:0 auto;
font-size:1.2em;
}

/*メインコンテンツの幅を690pxにして左側に設定*/
#contents_left{
width:690px;
float:left;
margin-right:30px;
}

/*サイドエリアの幅を220pxにして右側に設定*/
#sidebar{
width:220px;
float:right;
}

/*コンテンツ内のp要素の文字のサイズを設定*/
#contents p{
font-size:1.0em;
}






/*=================
コンテンツ領域の枠の設定
===================*/
/*コンテンツ領域内の枠の設定（CSS3のボックスシャドウをPIEファイル使用）*/
#welcome,
#recommend,
#info,
#access{
position:relative;
margin-top:30px;
background:#fff;
/*ボックスシャドウ*/
-webkit-box-shadow: #ccc 0px 2px 3px;
-moz-box-shadow: #ccc 0px 2px 3px;
-o-box-shadow: #ccc 0px 2px 3px;
-ms-box-shadow: #ccc 0px 2px 3px;
box-shadow: #ccc 0px 2px 3px;
background: #FFFFFF;
behavior: url(PIE.htc);
border:1px solid #eaeaea;

}


/*=================
Welcome To HTML5 CAFE
===================*/
/*見出しの設定*/
#welcome h2{
margin-top:20px;
border-bottom:1px solid #CCC;
padding-bottom:6px;
}

/*領域の余白の設定*/
#welcome{
padding:0 16px 15px;
}

/*画像を右寄せに設定*/
#welcome p img{
display:block;
float:right;
margin-left:8px;
}

/*文章の余白の設定*/
#welcome p{
margin-top:15px;
}





/*=================
RecommendMenuとInformationの共通設定
===================*/
/*枠の内側の余白の設定*/
#recommend,
#info{
padding:0 16px 30px;
}

/*見出しの余白とボーダーの設定*/
#recommend h2,
#info h2{
border-bottom:2px solid #dedede;
margin-top:20px;
padding-bottom:6px;
}



/*=================
RecommendMenuの設定
===================*/
/*メニュー名の見出しの設定*/
#recommend .box h3{
background:url(images/icon_01.gif) no-repeat 0 2px;
padding:0 0 0 20px;
margin:20px 0 8px 0;
font-size:1.2em;
}

/*メニューの枠のサイズと横に並べる設定*/
#recommend .box{
width:317px;
float:left;
}

/*商品画像の設定*/
#recommend .box img{
display:block;
float:left;
margin-right:8px;
border:1px solid #eee;
padding:2px;
}




/*=================
「詳細を見る」ボタンの設定
===================*/
.box p.more a{
position:relative;
width:76px;
text-align:center;
font-size: 1.0em;
color: #fff;
padding: 4px 12px;
border: 1px solid #66c3a1;
text-decoration:none;
/*CSS3グラデーションの設定*/
background:#4bcc9d;
background: -webkit-gradient(linear, left top, left bottom, from(#4bcc9d), to(#66d6ad));
background: -moz-linear-gradient(top,#4bcc9d,#66d6ad);
background: -webkit-linear-gradient(#4bcc9d, #66d6ad);
background: -ms-linear-gradient(#4bcc9d,#66d6ad);
background: -o-linear-gradient(#4bcc9d,#66d6ad);
background: linear-gradient(#4bcc9d,#66d6ad);
-pie-background: linear-gradient(#4bcc9d,#66d6ad);
/*CSS3角丸の設定*/
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
-ms-border-radius: 1px;
/*CSS3ボックスシャドウの設定*/
-moz-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 1px 1px 1px rgba(177,232,212,0.7);
-webkit-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 1px 1px 1px rgba(177,232,212,0.7);
box-shadow:0px 1px 1px #ccc,inset 1px 1px 1px #b1e8d4;
/*CSS3テキストシャドウの設定*/
text-shadow:0px 1px 2px rgba(000,000,000,0.2);
/*PIEファイルの設定*/
behavior: url(PIE.htc);
}

.box p.more a:hover{
position:relative;
border:1px solid #71d8b2;
/*CSS3グラデーションの設定*/
background:#74e3ba;
background: -webkit-gradient(linear, left top, left bottom, from(#74e3ba), to(#8af3cc));
background: -moz-linear-gradient(top,#74e3ba,#8af3cc);
background: -webkit-linear-gradient(#74e3ba, #8af3cc);
background: -ms-linear-gradient(#74e3ba,#8af3cc);
background: -o-linear-gradient(#74e3ba,#8af3cc);
background: linear-gradient(#74e3ba,#8af3cc);
-pie-background: linear-gradient(#74e3ba,#8af3cc);
/*CSS3ボックスシャドウの設定*/
-moz-box-shadow:0px 1px 1px rgba(000,000,000,0.2),inset 1px 1px 1px rgba(177,232,212,0.7);
-webkit-box-shadow:0px 1px 1px rgba(000,000,000,0.2),inset 1px 1px 1px rgba(177,232,212,0.7);
box-shadow:0px 1px 1px #ccc,inset 1px 1px 1px #b1e8d4;
/*CSS3テキストシャドウの設定*/
text-shadow:0px 1px 2px rgba(000,000,000,0.2);
/*PIEファイルの設定*/
behavior: url(PIE.htc);
}

/*ボタンを右に設定*/
.box p.more{
text-align:right;
}



/*=================
個別のマージン設定
===================*/

.mRight20{
margin-right:20px !important;
}

.mTop20{
margin-top:20px !important;
}




/*=================
Informationの設定
===================*/
/*更新情報見出しの設定*/
#info h3{
background:url(images/icon_02.gif) no-repeat 0 3px;
padding-left:14px;
margin-top:13px;
font-size:1.2em;
}

/*更新日の設定*/
#info .date{
display:block;
font-size:80%;
margin:2px 0 0 14px;
font-weight:normal;
color:#999;
}

/*更新情報本文の設定*/
#info p{
margin-top:5px;
border-bottom:1px dotted #ccc;
padding:0 0 16px 14px;
}




/*=============
サイドエリアの設定
===============*/
/*アクセス領域の余白の設定*/
#access{
margin-bottom:35px;
font-size:1.1em;
}

/*アクセスの見出しの設定*/
#access h2{
background:#35ba8a;
padding:12px 0 8px 8px;
}

/*アクセス情報項目の設定*/
#access ul{
padding:20px 7px 5px 13px;
font-size:0.9em;
}

#access li{
margin-bottom:8px;
}

#access p{
text-align:center;
margin-bottom:8px;
}

/*icon設定*/
.address{
background:url(images/icon_03.gif) no-repeat 0 2px;
padding-left:20px;

}

.tel{
background:url(images/icon_04.gif) no-repeat 0 1px;
padding-left:20px;
}

.time{
background:url(images/icon_05.gif) no-repeat 0 2px;
padding-left:20px;
}

/*おすすめ情報見出しの設定*/
#bnr h2{
margin:40px 0 10px 5px;
}

/*バナーの間隔の設定*/
#bnr li{
margin-bottom:20px;
}



/*=============
ページの先頭へ戻る
===============*/
/*ページ先頭へ戻るの位置の設定*/
p#top{
position:absolute;
top:-140px;
right:0;
}

/*=============
フッターエリア
===============*/
/*フッターエリアの設定*/
#footer{
width:100%;
background:url(images/bg_footer.gif) repeat top left;
min-height:130px;
font-size:1.1em;
position:relative;
}

/*コピーライトの設定*/
#footer p small{
display:block;
width:940px;
text-align:center;
margin:0 auto;
color:#fff;
padding-top:15px;
text-decoration:none;
}


















/*▼▼▼▼ここからが下層ページ用▼▼▼▼*/


/*=============
パンくずリスト
===============*/
/*パンくずリストの余白設定*/
#frame{
text-align:right;
padding:15px 6px 0 0;
}
/*パンくずリストを横並びにする*/
#frame li{
display:inline;
font-size:1.0em;
}

/*パンくずリストの背景の設定*/
#frame li a{
background:url(images/img_pankuzu.png) no-repeat right 5px;
padding-right:10px;
}

/*=============
下層ページ共通設定
===============*/
/*コンテンツ領域内の枠の設定（CSS3のボックスシャドウをPIEファイル使用）*/
#menu_all,
#news,
#page{
margin-top:30px;
background:#fff;
/*ボックスシャドウ*/
-webkit-box-shadow: #ccc 0px 2px 3px;
-moz-box-shadow: #ccc 0px 2px 3px;
-o-box-shadow: #ccc 0px 2px 3px;
-ms-box-shadow: #ccc 0px 2px 3px;
box-shadow: #ccc 0px 2px 3px;
background: #FFFFFF;
behavior: url(PIE.htc);
border:1px solid #eaeaea;

}

/*領域の余白設定*/
#menu_all,
#news,
#page{
padding:0 16px 30px;
}

/*見出しの設定*/
#menu_all h2,
#news h2,
#page h2{
background:url(images/bg_line.png) repeat-x left bottom;
margin-top:20px;
padding-bottom:15px;
}


/*=============
下層更新情報ページ設定
===============*/
/*下層更新情報の見出し設定*/
#news h3{
background:url(images/icon_02.gif) no-repeat 0 0px;
padding-left:14px;
margin-top:13px;
}
/*更新日の設定*/
#news .date{
display:block;
font-size:80%;
margin:2px 0 0 14px;
font-weight:normal;
color:#999;
}
/*更新情報本文の設定*/
#news p{
margin-top:5px;
border-bottom:1px dotted #ccc;
padding:0 0 16px 14px;
font-size:1.1em;
}






/*======================
下層menu一覧ページ設定
========================*/

/*メニュー領域の余白設定*/
#menu_all .menu_list{
padding-left:8px;
margin-top:20px;
}

/*メニュー名の見出しの設定*/
#menu_all .box h3{
background:url(images/icon_06.png) no-repeat 0 3px;
padding:0 0 0 15px;
margin-top:10px;
font-size:1.1em;
font-weight:normal;
}

/*価格部分の設定*/
#menu_all .box p.txt{
margin:3px 0 50px 16px;
font-size:1.0em;
}

/*メニューの枠のサイズと横に並べる設定*/
#menu_all .box{
width:195px;
float:left;
margin-right:27px;
}

/*商品画像の枠装飾の設定*/
#menu_all .box img{
display:block;
border:1px solid #eee;
padding:2px;
}

/*一番右端の画像のみ右余白をとらない*/
.none{
margin-right:0px !important;
}



/*=============
下層menu個別ページ設定
===============*/
/*メニュー画像の設定*/
#page .box_b p img{
display:block;
float:left;
margin:0 20px 40px 0;
}
/*メニュー名の見出しの設定*/
#page .box_b h3{
font-size:1.2em;
margin-top:20px;
}

/*詳細説明の余白設定*/
#page .box_b p.txt{
margin:0 0 20px 4px;
}

/*詳細説明のフォントサイズの設定*/
#page .box_b p{
font-size:1.1em;
}