@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}
}.Contents {
}

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	color: #999999;
	background-color: #000000;
	background-position: center;
	margin-top:0px;
	text-align:center;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0; 
	padding-right: 15px;
	padding-left: 15px; /* block 自体ではなく block 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した block をネストして使用することもできます。 */
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}
/* ~~ この固定幅コンテナが他のすべての block を囲みます。~~ */
.container {
	width: 1000px;
	margin: 0 auto; 
}



.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {
	width: 1000px;
	float: left;
}

.content ul, .content ol {
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}

ul.nav {
	list-style: none; /* リストのマーカーを削除します。 */
	margin-bottom: 2px; /* 下のコンテンツのナビゲーション間の間隔を作成します。 */
}
ul.nav li {
	font-size:10px;
	border-left: 1px solid #FFFFFF; /* ボタンの区切り線を作成します。 */
	float:right;
}
ul.nav a, ul.nav a:visited { /* これらのセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます。 */
	padding: 2px 2px 2px 2px;
	display: block; 
	width: 115px;  
	text-decoration: none;

	text-align:center;
	color:#FFFFFF;
	
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* マウスを使用する場合もキーボードを使用する場合も、背景色とテキストカラーを変更します。 */
	background-color: #999999;
	color: #222222;
}

/* ~~ フッター ~~ */
footer {
	padding: 10px 0;
	height:37px;
	background : #FF0000 url("./images/header/footer_back.jpg") ;
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
}
/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、footer が .container から削除されているか取り出されている場合に、<br />または空の block エレメントで、フローティングさせる最後の block に続く最後のエレメントとして (.container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*HTML5 サポート - 新しい HTML5 タグを display:block に設定します。これにより、ブラウザーでタグが適切にレンダリングされます。 */
header, section, footer, aside, article, figure {
	display: block;
}
header {
	height:75px;
	background : #000000 url("./images/header/header_back.jpg") no-repeat center top;
	display: block;
	text-align:right;
	padding:10px;
}
header .h_url{
	text-align:left;
	margin-left:50px;
	margin-top:40px;
}
header .h_left{
	height:75px;
	width:250px;
	display: block;
	text-align:left;
	float:left;
}



header .h_right{
	margin-right:0px;
	margin-top:0px;
	float:right;
}
header .h_nav{
	margin-top:16px;
}

.waku_top{
	width:1000px;
	height:10px;
	background : #000000 url("./images/page/waku_top.png");
	display: block;
}
.waku_bottom{
	width:1000px;	
	height:10px;
	
	background : #000000 url("./images/page/waku_bottom.png") ;
	display: block;
}
.waku_content{
	padding: 0px;
	width:1000px;	
	background : #000000 url("./images/page/waku.png") ;
}

.line_center{
	width:3px;
	background : url("./images/page/line.png") ;
}

.main_table{
	text-align:center;
	width:1000px;
}

.main_table td{
	text-align:center;	
	vertical-align:top;
}

article .cnt{
	marign-right: auto;
	marign-left: auto;
	text-align: center;
}



body,td,th {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}


.product {
	width:450px;
	height:300px;
	text-align:right;
	vertical-align:bottom;
	float:left;
	margin-left:30px;
	margin-top:15px;
	margin-bottom:15px;
	
}

.product .menu01 {
	margin-top:259px;
	margin-left:5px;	
	width:146px;
	height:33px;
	display:block;
	padding-top:0px;
	float:left;
	text-decoration: none;	
	background :  url(./images/product/bottan/btn01.jpg) ;
}
.product .menu02no {
	margin-top:259px;
	margin-left:2px;	
	width:146px;
	height:33px;
	display:block;
	padding-top:0px;
	float:left;
	text-decoration: none;	
	background :  url(./images/product/bottan/btn02.jpg) ;
	background-position:-0px -0px;
		
}




a.menu02 {
	margin-top:259px;
	margin-left:2px;	
	width:146px;
	height:33px;
	display:block;
	padding-top:0px;
	float:left;
	text-decoration: none;	
	background :  url(./images/product/bottan/btn02.jpg) ;
	background-position:-0px -33px;
		
}
 
a.menu02:hover{
		background-position:-0px -66px;
}





.product .menu03 {
	margin-top:259px;
	margin-left:2px;	
	width:146px;
	height:33px;
	display:block;
	padding-top:0px;
	float:left;
	text-decoration: none;	
	background :  url(./images/product/bottan/btn03.jpg) ;
}




#topicpath{
	margin-left:15px;
	text-align:left;
	font-size:12px;

}