﻿@charset "utf-8";
/* ===================================================================
CSS information
 file name  :module.css
 author     :
 style info :各ページ共通モジュールの設定
【ヘッダー】
#header（ヘッダー）
　#gNav（グローバルナビゲーション）
　#dealsInfo（お得な情報）

【左右サブコンテンツ】
#pickupItem（ピックアップアイテム）
#catalog（カタログ）
#news（ニュース）
#sideBanner（バナー）
=================================================================== */

/* -----------------------------------------------------------
	#header ヘッダー：ロゴ～お得な情報まで
----------------------------------------------------------- */
#upt-header {}


/*-----------------------------------------------------------
 #GFNAV　グローバルナビ
----------------------------------------------------------- */
.GFNAV {
	position:relative;
	width: 985px;				/* 全体の横幅 */
	height: 38px;				/* TOPボタンの縦幅 */
	font-size: 12px;			/* 文字の大きさ */
	background: #66CCFF;			/* TOPボタンの背景色 */
	margin-bottom:2px;			/* TOPボタンの下の空き */
	z-index:100;				/* レイヤー順序 */

}

.GFNAV li {
	width: 138px;				/* TOPボタンの横幅 */
	height: 38px;				/* TOPボタンの縦幅 */
	list-style: none;			/* 文字の頭の飾り記号の種類 */
	float: left;				/* TOPボタンの並び方　左揃え */
	border-right: 2px solid #fff;		/* TOPボタンの右の空き */
	a:hover {background: #666666;}		/* マウスが重なった時の背景色 */

}
.GFNAV li:last-child {
	border-right: none;
}
.GFNAV li a {
	text-decoration: none;
	color: #fff;
	display: block;
}
.GFNAV li a:hover {
	background: #055d89;
}
/* su.GFNAVigation */
.GFNAV li ul {
	display: none;
	position: absolute; 
	width: 138px;
	height: 38px;
	font-size: 12px;
}
.GFNAV li ul li {
	float: none;
	width: 138px;
	height: 38px;
	border-bottom: 1px solid #653e22;		/* TOPボタンの背景色 */
	border-right: none;
}
.GFNAV li ul li:last-child {
	border-bottom:none;
}
.GFNAV li ul li a {
	width: 140px;
	height: 38px;
	background: #444;		/* 展開ボタンの背景色 */
	display: block;
	padding: 8px 0px 0px 0px;
}
.GFNAV li ul li:last-child a {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;

}

.fixed {
	position: fixed;
	top: 0;
	center: 0;
	width: 985px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
	background-color: rgba(0,0,0,0.6);
}

/*-----------------------------------------------------------
 #dealsInfo お得な情報（横並びの3つのボタン送料無料、最安見積もりなど）
----------------------------------------------------------- */
#dealsInfo {width:985px;}
#dealsInfo p { 
	color:white; 
	text-align:center; 
	margin-bottom:2px; 
	padding:3px; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); 
	background:url(../images/share/bg_hnav.gif) center center;}
#dealsInfo ul { margin-bottom:2px;}
#dealsInfo li { display:inline; float:left;}


/* ==========================================================

 サイドコンテンツ
 
========================================================== */
#subArea-L {float:left; width: 180px; height:100%;}

/* -----------------------------------------------------------
 左上段フリーメニュー：ピックアップ
----------------------------------------------------------- */
#pickupItem {
	zoom:1; text-align:center; margin-bottom:8px;
	background:url(https://www.hakui-uni.com/images/share/pickupitem_bottom.gif) 0 bottom no-repeat #6588ba;　}
#pickupItem h3 {
	color:white; font-size:12px; font-weight:bold;
	margin-bottom:10px; padding:6px 0;
	background:url(https://www.hakui-uni.com/images/share/pickupitem_top.gif) 0 0 no-repeat;
	border-bottom:#B7CDDD 1px dotted;}
#pickupItem p { font-size:11px; padding:8px; }
#pickupItem a { color:white; }

/* -----------------------------------------------------------
 左上段フリーメニュー：カタログを見てご注文
----------------------------------------------------------- */
#catalog { zoom:1; padding-bottom:8px; background:#e4e4e4; }
#catalog h3 {
	color:white; font-size:12px; font-weight:bold;
	padding:6px;
	background:#999999; }
#catalog p {
	font-size:11px;
	margin-bottom:6px; padding:6px;
	border-bottom:#999999 1px dotted; }
#catalog ul { margin-bottom:6px; padding-left:12px; }
#catalog ul li { line-height:1.5; }
#catalog img { text-align:center; }
#catalog a:hover img {opacity: 0.7; filter: alpha(opacity=70);}


/* -----------------------------------------------------------
 右:更新情報 #news
----------------------------------------------------------- */
#news { width:180px; height:165px; overflow-y:scroll; }
#news ul { padding:6px; }
#news li { margin-bottom:6px; padding-bottom:4px; border-bottom:#999999 1px dotted; }


/* -----------------------------------------------------------
 右:いろいろなサービス #sideBanner
----------------------------------------------------------- */
ul#sideBanner    { margin-bottom:16px; }
ul#sideBanner li { margin-bottom:4px;  }

/* ==========================================================

 ページ下部 共通項目
 
========================================================== */
.btmAtt {
	color:#ffffff; text-align:center; font-weight:bold;
	margin-bottom:16px; padding:3px; background:#FF3333;}

/* -----------------------------------------------------------
	マーキング加工について #btmMarking
----------------------------------------------------------- */
#btmMarking {width:605px; text-align:left; margin-bottom:40px;
/*background:url(https://esthe-uni.com/images/share/btm_marking_bg.gif) right 113px no-repeat;*/}
#btmMarking ul.mkgColumn {
	zoom:1;
	padding-bottom:20px;
	border-bottom:#999999 dotted 1px;}
#btmMarking h5 {margin-bottom:8px;}
#btmMarking ul.mkgColumn li {}
#btmMarking li.mkgMail {float:left; margin-right:20px;}
#btmMarking li.mkgMail .makingMail-btn {width:221px; height:80px;}
#btmMarking li.mkgMail .makingMail-btn a {
	display:block; width:221px; height:80px;
	background:url(https://esthe-uni.com/images/share/btm_marking_mail.gif);}
#btmMarking li.mkgMail .makingMail-btn a:hover {
	background:url(https://esthe-uni.com/images/share/btm_marking_mail_on.gif);}
#btmMarking li.mkgTel {}
#btmMarking {}
#btmMarking {}
#btmMarking {}
/* -----------------------------------------------------------
	3つのお得なサービス #spService
----------------------------------------------------------- */
#spService {width:605px; text-align:left; margin-bottom:40px; }

#spService h3 {margin-bottom:20px;}

#spService .spsBox01,
#spService .spsBox02,
#spService .spsBox03 {zoom:1; margin-bottom:20px;}

#spService .spsBox01 {padding-left:145px; background:url(../images/share/btm_service01point.gif) left top no-repeat;}
#spService .spsBox02 {padding-right:145px; background:url(../images/share/btm_service02point.gif) right top no-repeat;}
#spService .spsBox03 {padding-left:145px; background:url(../images/share/btm_service03point.gif) left top no-repeat;}

#spService h4 {margin-bottom:8px;}
#spService h5 {font-weight:bold;font-size:12px;}

#spService .spsText { padding:10px; background:url(../images/share/bg_dot_gray.gif);}
#spService .spsText p {}

/* ---- 送料 ---- */
#spService table {border-style:none;border-collapse:collapse;border-spacing:0px;}

#spService table {
	width:100%;
	background:url(../images/share/btm_service_bg01.gif) right bottom no-repeat;
	border:#999999 solid 1px;}

#spService table th,
#spService table td {border:#999999 solid 1px;}
#spService table th {
	font-weight:bold;
	padding:10px 20px;
	vertical-align: middle;
	background:url(../images/share/bg_dot_gray.gif);}
#spService table td {padding:10px;}
#spService table tr.price td {color:#FF6666; font-weight:bold; text-align:center;}

#spService table ul{}
#spService table li{}
/* -----------------------------------------------------------
	ご利用ガイド #bottomGuide
----------------------------------------------------------- */

#bottomGuide {width:605px; text-align:left; margin-bottom:20px; border-bottom:#999999 dotted 1px;}
#bottomGuide h3 {margin-bottom:20px;}
#bottomGuide  p {margin-bottom:1em;}

/* ---- 購入方法 ---- */
.btmGuide-buy {margin-bottom:20px; border-bottom:#999999 dotted 1px;}
.btmGuide-buy ul {zoon:1; margin-left:15px;}
.btmGuide-buy li {width:180px; float:left; margin-right:15px;}
.btmGuide-buy li h5 {font-weight:bold;}
.btmGuide-buy li p {font-size:11px; margin-bottom:1em;}

/* ---- 支払い方法 ---- */
.btmGuide-payment {margin-bottom:20px; padding-bottom:20px; border-bottom:#999999 dotted 1px;}
.btmGuide-payment ul {zoon:1; margin-left:15px;}
.btmGuide-payment li {float:left; margin-right:15px;}
.btmGuide-payment li.pay01 {width:180px;}
.btmGuide-payment li.pay02 {width:360px;}
.btmGuide-payment li h5 {font-weight:bold;}
.btmGuide-payment li p {font-size:11px; margin-bottom:1em;}
/* ---- 代引き手数料 ---- */
.btmGuide-payment table {border-style:none;border-collapse:collapse;border-spacing:0px;}
.btmGuide-payment table {width:100%; font-size:11px;border:#999999 solid 1px;}
.btmGuide-payment table th,
.btmGuide-payment table td {border:#999999 solid 1px; padding:6px;}
.btmGuide-payment table th {
	text-align:center; font-weight:bold;
	background:url(../images/share/bg_dot_gray.gif);}
.btmGuide-payment table td {}
.btmGuide-payment table .price {color:#FF6666; font-weight:bold; text-align:center;}


/* ---- サイズの測り方 ---- */
.btmGuide-size {}

/* -----------------------------------------------------------
	#footer　フッター
----------------------------------------------------------- */
#footer {
zoom:1;
text-align:left;
width:100%;
background:#dbdbdb url(../images/share/footer_tit.gif) 0 0 no-repeat;
margin:4px 0 24px 0;
padding-top:53px;
overflow:hidden;
}
#footer-1{ float:left; text-align:left; width:242px;margin-left:10px; line-height: 1.5;}
#footer-2 { float:left; text-align:left; width:242px;　line-height: 1.5;}
#footer-3 { float:left; text-align:left; width:242px;　line-height: 1.5;}
#footer-4 { float:right; text-align:left; width:240px;　line-height: 1.5;}
#footer-A { float:both; width:100%; text-align:center; line-height: 1.5;}
#footer .prdBox { clear:both; margin-bottom:1em;}
#footer .center { text-align:center; }

#footer a:link    {color:#666666; text-decoration:none;}
#footer a:visited {color:#666666; text-decoration:none;}
#footer a:hover   {color:#000000; text-decoration:underline;}




a:hover img {  
opacity: 0.8;  
filter: alpha(opacity=80);  
-ms-filter: "alpha( opacity=80 )";  
-moz-opacity: 0.8;  
-khtml-opacity: 0.8;  
}  


/*----------------------------------------------------
 #uptGroup その他
----------------------------------------------------*/
.highlight a:hover *{
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}




#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

/*----------------------------------------------------
 #ショッピングガイド　
----------------------------------------------------*/
#shoppingguide { zoom:1; text-align:left; width:794px; background-color:white; }
#shoppingguide-M { float:left; width:262px; margin-right:4px; }
#shoppingguide-E { float:right; width:262px; }

h2.gTitle {
	background:url(https://www.cleanstuff-uni.com/images/home/sguide_maintit.gif) no-repeat;
	width:794px; height:31px;
	color:black; font-size:12px; font-weight:bold;
	margin-bottom:0px;
	padding:28px 0 0 6px;
}





.wrap {
  width: 258px;
  height: 100px;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: thin;
  padding:1px 1px 1px 1px;
  margin-bottom:5px;

}

.wrap a {
  width: 258px;
  height: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  text-decoration: none;
  color: #000;
  background: #fff;
  display: table;
}

.wrap a:hover {
  background: #e5e5e5;
}

.wrap div {
  display: table-cell;
  width: 100px;
  padding: 0 10px 0 0;
}

.wrap p {
  display: table-cell;
  vertical-align: top;
  line-height: 1.2;
}