@charset "utf-8";
* { margin: 0; padding: 0; }

html,
body,
#page-wrapper {
  height: 100%;
}
body > #page-wrapper {
  height: auto;
  min-height: 100%;
}
#page-inner {
  padding-bottom: 110px;
}
#foot-wrapper {
  position: relative;
  margin-top: -110px;
  width: 100%;
  height: 110px;
}
/* CSS Sticky Footer */
body {
  font-family: sans-serif,Arial, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック";
  font-size: 12px;
  line-height: 1.5em;
  color: #494949;
  background: #FFFFFF;
  text-align: center;
}

p { margin: 0; }
img { border: none; }
hr { border-top: 1px solid #999999; margin: 0; padding: 0; height: 1px; }
em {color: #FF0000;}
strong {font-weight:bold;}

/***********************************************
 * 共通
 ***********************************************/
.attention { color: #FF0000; }
.message { border: 2px dotted #99CC00; padding: 10px; margin: 0 0 10px; }
.float-right {float:right;}
.float-left {float:left;}
.align-left {text-align: left;}
.align-center {text-align: center;}
.align-right {text-align: right;}
.box {margin: 0 0 15px;}


a.button-opacity:hover img, .button-opacity a:hover img {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* IE 5-7 */
  filter: alpha(opacity=60);
  /* Netscape */
  -moz-opacity: 0.6;
  /* Safari 1.x */
  -khtml-opacity: 0.6;
  /* Good browsers */
  opacity: 0.6;
}


/* ------------------------------------------------------------------------------- */
/* パンくずリスト部分の設定 */
#pankuzu {
	margin: 0 0 20px;
	padding: 0 0 0 5px;
	list-style-type: none;
	font-size: 10px;
	line-height: 1.8em;
	background-color: #fff;
	text-align: left;
}
#pankuzu ul {
	width:100%;
	margin: 0;
	padding: 0 0 0.5em 0;
}
#pankuzu li {
	display: inline;
	padding: 0;
}


/***********************************************
 * レイアウト
 ***********************************************/
#page-wrapper {text-align: left;}
#head-wrapper {height: 75px;}
#head {width: 1024px;height: 75px;margin: 0 auto;position: relative;}

#body {width: 1044px;margin: 0 auto;}
#body-inner {width: 1004px;margin: 0 auto;padding: 10px 0; }
#sidebar {width: 330px;float: right;}
#main {width:100%; float: left;}
#region-page-bottom {padding: 20px 0 10px;}
#region-page-bottom-inner {width: 1024px;margin: 0 auto;}
#foot-wrapper {text-align: left;}
#foot {width: 1024px;height: 110px;margin: 0 auto;position:relative;}

#wrap {
/*	width: 1024px;         */
	margin: 0 auto;
	padding: 110px 0 0 0;
}
#main:after {/* firefox背景色表示用 */
	content: "";
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}


/* 1カラム設定 */
/* .one-col #centercol { width: 700px; padding: 0; margin:0 auto; } update20111126 amon */
.one-col #centercol { width: 1004px; padding: 0; margin:0 auto; }


/* 2カラム設定 */
.two-col #centercol { width: 667px; padding: 0; float: left; }
.two-col #leftcol { width: 250px; margin-left: 20px; margin-right: 40px; float: left; }
.two-col #rightcol { width: 330px; margin: 0; float: right; }

/* 3カラム設定 */
.three-col #leftcol { width: 155px; margin: 0; float: left; }
.three-col #centercol { float: left; width: 430px; padding: 0 0 0 20px; }
.three-col #rightcol { width: 155px; margin: 0; float: right; }


/* フォント
----------------------------------------------- */
h1{display:block;}
h2, h3, h4, h5 { font-size: 12px; margin: 0; padding: 0; }
em { font-style: normal; color: #ff0000; }
.f10 { font-size: 10px; }


/* リンク指定
----------------------------------------------- */
a { color: #004ec2; outline: none; }
a:link { color: #009ECB; text-decoration: none; }
a:visited { color: #000; text-decoration: none; }
a:hover { color:#FF3366; text-decoration: none; }
#centercol a:link { color: #009ECB; text-decoration: underline; }
#centercol a:visited { color: #000; text-decoration: underline; }
#centercol a:hover, #centercol a:active { color:#FF3366; text-decoration: none; }



/* フォーム
----------------------------------------------- */
form, fieldset { margin: 0; padding: 0; }
input, textarea, select { margin: 2px 0; line-height: 100%; font-size: 12px; }

/* フォームサイズ */
.box54 { width: 54px; }
.box60 { width: 60px; }
.box90 { width: 90px; }
.box120 { width: 120px; }
.box148 { width: 148px; }
.box300 { width: 300px; }
.box570 { width: 570px; }
.box250 { width: 260px; }
.box350 { width: 350px; }
.box380 { width: 380px; }
.box500 { width: 500px; }
.area300 { width: 300px; height: 120px; }
.area350 { width: 350px; height: 120px; }
.area750 { width: 750px; height: 150px; }


/* テキストフィールド */
input[type='text'] { padding: 2px; border: solid 1px #999999; }

/* ボタン */
input[type='image'] { border: none; }
input[type='image'].box190 { width: 190px; height: 30px; }
input[type='image'].box180 { width: 180px; height: 30px; }
input[type='image'].box150 { width: 150px; height: 30px; }
input[type='image'].box140 { width: 140px; height: 30px; }
input[type='image'].box130 { width: 130px; height: 30px; }
input[type='image'].box51 { width: 51px; height: 22px; }

 /***********************************************
 * フォーム追加分
 ***********************************************/
.w65 {width: 65px;}
.w120 {width: 120px;}


/**
 * Markup free clearing.
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
 */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}


/* テーブル共通指定
----------------------------------------------- */
table  {
	width: 100%;
	margin: 0 auto 15px auto;
	border-top: 1px solid #AAAAAA;
	border-left: 1px solid #AAAAAA;
	border-collapse: collapse;
	text-align: left;
	clear: both;
}
caption { text-align: left; padding: 0 0 3px 0; font-weight: bold; }
th, td {
	padding: 4px 10px;
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	font-weight: normal;
}
th { background: #E5E5E5; }
td ul { list-style: none; }

.list-s th { text-align: center; }

/* 2列縦 */
.list-d th { width: 27%; }
.list-d td { text-align: left; }
.list-d td.price { width: 100%; }

td.zip { line-height: 200%; }
.zip button {
	color: #FFFFFF;
	line-height: 120%;
	width: 90px;
	height: 20px;
	background: #999999;
	border: 1px solid #999999;
}

.quantity { text-align: center; width: 60px; }
.quantity li { display: inline; padding: 0; }
th.result { text-align: right; }
td.photo { width: 140px; text-align: center; }
td.fnc, th.fnc { width: 50px; text-align: center; }
th.num { width: 30px; text-align: center; }
td.price { width: 90px; text-align: right; }
td.price em { font-weight: bold; }
td.name { text-align: left; }

tr.al-c td, td.al-c { text-align: center; }


/* コンテンツ共通
----------------------------------------------- */
.clear { clear: both; margin: 0!important;margin: -10px 0 0 0; padding: 0; }
div.clear { height: 1px; }
.att { color: #e39909; }
.al-c { text-align: center; }
.al-r { text-align: right; }
.al-l { text-align: left; }
.fl { float: left; }
.fr { float: right; }
img.fl { margin: 0 10px 5px 0; }
img.fr { margin: 0 0 5px 10px; }
.arrow { padding: 0 0 0 17px; background: url(../img/tpl/arrow_green.gif) 0 3px no-repeat; }
.arrow a { text-decoration: underline; }
.arrow a:hover { text-decoration: none; }

/*----- ボタン -----*/
.btn { width: 100%; margin-top: 15px; margin-bottom: 15px; }
.btn input, .btn button { height: 25px; padding: 0 7px; margin: 0 10px 0 0; }
.btn input { padding-top: 1px; }

/* グレー */
.btn01 a {
	text-align: center;
	display: block;
	padding: 3px 0 0 0;
	width: 120px;
	height: 20px;
	background: #009844;
	margin: 0 auto;
}
#centercol .btn01 a { color: #ffffff; text-decoration: none; }
.btn01 a:hover { background: #54B27C; }


/* メッセージ */
.msg-box {
	width: 92%;
	margin: 0 auto 5px auto;
	padding: 15px 20px 0 20px;
	border: 2px dotted #009844;
	text-align: left;
}
.msg-box ul { margin: 0 0 10px 0; }
.msg-box li { list-style: none; }
.one-col .msg-box { width: 93%; }

/* ヘッダー
------------------------------------------------ */

/*----- 以下新規会社サイト用 -----*/

#head-wrapper { border: none!important; margin: 0; z-index: 9999; background: #fff;top: 0; left: 0; width: 100%; padding: 20px 0; position: absolute;}
h1 {position: absolute;top:21px;left:11px;}
#tagline {position: absolute;top:0;left:10px;font-size: 11px;}

/*-------- vi2016 --------*/
#head-vilink {
  position: absolute;
  top: 21px;
  left: 200px;
}

/*-------- ログイン --------*/
#head-login {
  position: absolute;
  top: 0px;
  bottom: 0;
  right: 11px;
  text-align: right;
}
#head-login h2 {margin: 0 0 10px;}
#head-login a {
  background: url(../img/icon/arrow_right_orange.gif) left center no-repeat;
  padding: 0 0 0 15px;
  text-decoration: none;
  color: #666666;
}
#head-login a:hover {color: #FF3366;}
#head-login label {color: #E50012;font-weight: bold;}
#head-login p {margin: 0 0 3px;}
#head-login input[type=image] {margin-bottom: -3px;}
#welcome-message {font-size: 1.2em;}

/* 旧ナビゲーション
#global-navi {
  background: #009844;
  padding: 2px 0 4px;
}
#global-navi ul {
  width: 1012px;
  margin: 0 auto;
}
#global-navi li {
  width: 196px;
  margin-left: 8px;

  width: 167px;    
  margin-left: 2px;
  height: 27px;
  float: left;
}
#global-navi li.first {margin-left: 0;}
#global-navi li.last {margin-left: 0;float:right;}
*/
/* ヘッダーボタン6つ の場合
#global-navi a {
  display: block;
  width: 167px;
  height: 27px;
  text-indent: -9999em;  
  background-image: url(../img/background/bg_global_navi.gif);
}
#navi-item-products a {background-position: 0px 0px;}
#navi-item-products a:hover {background-position: 0px -33px;}
#navi-item-diy a {background-position: -169px 0px;}
#navi-item-diy a:hover {background-position: -169px -33px;}
#navi-item-shopping a {background-position: -338px 0px;}
#navi-item-shopping a:hover {background-position: -338px -33px;}
#navi-item-support a {background-position: -507px 0px;}
#navi-item-support a:hover {background-position: -507px -33px;}
#navi-item-company a {background-position: -676px 0px;}
#navi-item-company a:hover {background-position: -676px -33px;}
#navi-item-registor a {background-position: -845px 0px;}
#navi-item-registor a:hover {background-position: -845px -33px;}
#navi-item-mypage a {background-position: -1014px 0px;}
#navi-item-mypage a:hover {background-position: -1014px -33px;}




#global-navi a {
  display: block;
  width: 196px;
  height: 27px;
  text-indent: -9999em; 
  background-image: url(../img/background/bg_global_navi02.gif);
}*/
#navi-item-products a {background-position: 0px 0px;}
#navi-item-products a:hover {background-position: 0px -33px;}
#navi-item-diy a {background-position: -202px 0px;}
#navi-item-diy a:hover {background-position: -202px -33px;}
#navi-item-support a {background-position: -404px 0px;}
#navi-item-support a:hover {background-position: -404px -33px;}
#navi-item-company a {background-position: -606px 0px;}
#navi-item-company a:hover {background-position: -606px -33px;}
#navi-item-registor a {background-position: -808px 0px;}
#navi-item-registor a:hover {background-position: -808px -33px;}
#navi-item-mypage a {background-position: -1010px 0px;}
#navi-item-mypage a:hover {background-position: -1010px -33px;}



/* フッター
----------------------------------------------- */
#foot-wrapper {
  background: url(../img/background/bg_page_foot.gif) bottom center repeat-x #FFFFFF;
}
#foot a {text-decoration: none;color: #666666;}
#foot a:link {color: #666;}
#foot a:visited {color: #000;}
#foot a:hover {color: #FF3366;}
#foot-menu-primary {
  border-bottom: 1px solid #009844;
  margin: 0 0 1em;
  padding: 0 0 1em;
  text-align: center;
}
#foot-menu-primary li {
  display: inline;
  padding: 0 1em;
}
#foot-message {
  position: absolute;
  bottom: 0;
  right: 0;
}
address {
  position: absolute;
  bottom: 5px;
  color: #FFFFFF;
}
#totop {
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 16px;
}


/* トップページ
------------------------------------------------ */
#top-img {
	padding: 0;
	margin: 0 0 10px 0;
	width: 430px;
	height: 200px;
}
#top-img h2 {
	width: 430px;
	height: 200px;
	text-indent: -9999px;
	margin: 0 0 0 0;
/*	background: url(../img/tpl/th2_top.jpg) 0 0 no-repeat;    */
}
#top-img p {display: none; }

.top-img2 {
	padding: 0;
	margin: 2px 0 10px 0;
	width: 430px;
}

/***********************************************
 * ページ
 ***********************************************/
#body-wrapper {
  border-bottom: 1px solid #B3B3B3;
  background: url(../img/background/bg_page_body.gif) 0 0 repeat-x #FFFFFF;
}
#body {
  background: url(../img/background/bg_body_inner.png) top center repeat-y transparent;
}


/*-------- フロントページ --------*/
#main-inner-column-first, #main-inner-column-second {width: 330px;}





#slide-area { background: #111; padding: 0; margin: 0 auto; width: 1024px;}
#carousel-area { padding: 20px 0; background: #222; margin: 0 auto; width: 1024px;}
#carousel { height: 88px; width: 980px; margin: 0 auto;}
#carousel-area .slides li  { border: 5px solid #333; margin-right: 10px;}
#carousel-area .slides li:hover { border: 5px solid #ccc; }
#carousel-area .slides li.flex-active-slide { border: 5px solid #ffcd39;}


#print-only
{
  display:none;
}