@charset "UTF-8";

/* ------ ハリオグラス株式会社　　ail.css ------ */

/* ------ http://www.hario.co.jp/         ------ */
/* ------ http://www.hario.com/           ------ */

/* ---------------------------------------- 初期設定 */

*{
  margin:0;
  padding:0;
  color:#333333;
  font-size:12px;
  font-weight:normal;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

/* ブラウザスタイルの初期化(IE6など一部ブラウザ向け) */

th,td,form,ul,li{
  margin:0;
  padding:0;
  color:#333333;
  font-size:1em;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

/* ---------------------------------------- 全体設定 */

strong{font-weight:bold;}

ul{
	list-style-type:none;
}

a{
  text-decoration:none;
  /*HideMacIE\*/
  overflow:hidden;
  /**/
}

a:hover{color:#666666;}


img{border:0;}

/* ---------------------------------------- body */

body{
  background:url(../img/main/backgrand.jpg);
}
#shadow #frame #contents #m1 .midasi01 {
	background-image: url(../hotitems/img/midasi01.gif);
	background-repeat: no-repeat;
}


/* ---------------------------------------- 全体枠組み */



#frame{
  width:780px;
  margin:0 auto;
  position:relative;
  background:#FFFFFF;
}

#header{
  height:105px;
  position:relative;
}

#contents{
  width:590px;
  float:left;
}

#right{
	width:190px;
	float:left;
}


/* ---------------------------------------- header */

#header h1{
	color:#333333;
	font-size:11px;
	font-weight:normal;
	position:absolute;
	top:10px;
	left:124px;
	width: 527px;
}

#header form p input#input{
  position:absolute;
  width:100px;
  top:35px;
  left:360px;
}

#header form p input#button{
  position:absolute;
  top:35px;
  left:480px;
}

#header ul#gm{
  position:absolute;
  top:35px;
  left:560px;
  width:220px;	
}

#header ul#gm li{
  float:left;
  margin:0 0 0 20px;
}

#header ul#gm li a{
  text-decoration:none;
  color:#333333;
}

#header ul#gm li a:hover{
  color:#999999;
}

#header img{
  position:absolute;
  top:20px;
  left:10px;
}


/* ---------------------------------------- headerMenu */

#header h2{
  font-size:2px;
  background:url(../img/main/line.gif) no-repeat 0 0;
  position:absolute;
  top:70px;
  left:0px;
  height:5px;
  width:780px;
  text-indent:-9999px;
}

#header ul#menu{
  clear:both;
  position:absolute;
  top:75px;
  left:0px;
  width:780px;
  background:url(../img/main/menu_backgrand.gif) repeat-x 0 0;
}

#header ul#menu li{
  float:left;
}

#header ul#menu li#home{width:86px;}
#header ul#menu li#coffee{width:84px;}
#header ul#menu li#tea{width:68px;}
#header ul#menu li#cook{width:54px;}
#header ul#menu li#elehario{width:54px;}
#header ul#menu li#sake{width:54px;}
#header ul#menu li#etc{width:70px;}
#header ul#menu li#mAroma{width:67px;}
#header ul#menu li#hirom{width:77px;}
#header ul#menu li#parts{width:69px;}
#header ul#menu li#hotitem{width:85px;}

#header ul#menu li a{height:30px;}

#header ul#menu li#home a,
#header ul#menu li#coffee a,
#header ul#menu li#tea a,
#header ul#menu li#cook a,
#header ul#menu li#elehario a,
#header ul#menu li#sake a,
#header ul#menu li#etc a,
#header ul#menu li#mAroma a,
#header ul#menu li#hirom a,
#header ul#menu li#parts a,
#header ul#menu li#hotitem a{text-indent:-9999px; display:block;}

#header ul#menu li#home{background:url(../img/main/menu_home1.gif) no-repeat center center; height:30px;}
#header ul#menu li#coffee{background:url(../img/main/menu_coffee1.gif) no-repeat center center; height:30px;}
#header ul#menu li#tea{background:url(../img/main/menu_tea1.gif) no-repeat center center; height:30px;}
#header ul#menu li#cook{background:url(../img/main/menu_cook1.gif) no-repeat center center; height:30px;}
#header ul#menu li#elehario{background:url(../img/main/menu_elehario1.gif) no-repeat center center; height:30px;}
#header ul#menu li#sake{background:url(../img/main/menu_sake1.gif) no-repeat center center; height:30px;}
#header ul#menu li#etc{background:url(../img/main/menu_etc1.gif) no-repeat center center; height:30px;}
#header ul#menu li#mAroma{background:url(../img/main/menu_aroma2.gif) no-repeat center center; height:30px;}
#header ul#menu li#hirom{background:url(../img/main/menu_hirom1.gif) no-repeat center center; height:30px;}
#header ul#menu li#parts{background:url(../img/main/menu_parts1.gif) no-repeat center center; height:30px;}
#header ul#menu li#hotitem{background:url(../img/main/menu_hotitem1.gif) no-repeat center center; height:30px;}

#header ul#menu li#home a:hover{background:url(../img/main/menu_home2.gif) no-repeat center center; height:30px;}
#header ul#menu li#coffee a:hover{background:url(../img/main/menu_coffee2.gif) no-repeat center center; height:30px;}
#header ul#menu li#tea a:hover{background:url(../img/main/menu_tea2.gif) no-repeat center center; height:30px;}
#header ul#menu li#cook a:hover{background:url(../img/main/menu_cook2.gif) no-repeat center center; height:30px;}
#header ul#menu li#elehario a:hover{background:url(../img/main/menu_elehario2.gif) no-repeat center center; height:30px;}
#header ul#menu li#sake a:hover{background:url(../img/main/menu_sake2.gif) no-repeat center center; height:30px;}
#header ul#menu li#etc a:hover{background:url(../img/main/menu_etc2.gif) no-repeat center center; height:30px;}
#header ul#menu li#mAroma a:hover{background:url(../img/main/menu_aroma1.gif) no-repeat center center; height:30px;}
#header ul#menu li#hirom a:hover{background:url(../img/main/menu_hirom2.gif) no-repeat center center; height:30px;}
#header ul#menu li#parts a:hover{background:url(../img/main/menu_parts2.gif) no-repeat center center; height:30px;}
#header ul#menu li#hotitem a:hover{background:url(../img/main/menu_hotitem2.gif) no-repeat center center; height:30px;}

/* right
---------------------------------------- */


#right #mailParts{
	margin:0 20px 0 20px;
}

#right #mailParts li{
	margin:20px 0 0 0;
	display: block;
}

#right #mailParts li a{
  display:block;
}

/* サポートスタッフ募集 */

#staff{background:url(../img/index/button_staff1.gif) no-repeat 0 0;}

#staff a{
  height:67px;
	text-indent:-9999px;
}

#staff a:hover{background:url(../img/index/button_staff2.gif) 0 0 no-repeat;}


#right #mailParts li#r_mail a{background:url(../img/main/mail1.gif) no-repeat 0 0;padding:80px 0 5px 0;}
#right #mailParts li#r_ecobag a{background:url(../img/main/eco1.gif) no-repeat 0 0;padding:100px 0 5px 0;}
#right #mailParts li#r_gaspardetlisa a{background:url(../img/main/gaspardetlisa1.gif) no-repeat 0 0;padding:90px 0 5px 0;}
#right #mailParts li#r_parts a{background:url(../img/main/parts1.gif) no-repeat 0 0;padding:84px 0 5px 0;}
#right #mailParts li#r_violin a{background:url(../img/main/violin1.gif) no-repeat 0 0;padding:100px 0 5px 0;}
#right #mailParts li#r_link a{background:url(../img/main/link1.gif) no-repeat 0 0;padding:30px 0 5px 0;}
li#r_coffeebean a{background:url(../img/main/coffeebean1.gif) no-repeat 0 0;padding:110px 0 5px 0;text-align:left;}
#right #mailParts li#r_rakuten a{background:url(../img/main/rakuten1.gif) 0 0 no-repeat;height:25px;text-indent:-9999px;}
#right #mailParts li#r_yahoo a{background:url(../img/main/yahoo1.gif) 0 0 no-repeat;height:25px;text-indent:-9999px;margin:0 0 20px 0;}
#right #mailParts li#r_eco a{background:url(../img/tea/eco_lif.gif) 0 0 no-repeat;height:106px;text-indent:-9999px;}
#right #mailParts li#r_water a{background:url(../img/tea/tae_pot.jpg) 0 0 no-repeat;height:147px;text-indent:-9999px;}

#right #mailParts li#r_mail a:hover{background:url(../img/main/mail2.gif) no-repeat 0 0;}
#right #mailParts li#r_ecobag a:hover{background:url(../img/main/eco2.gif) no-repeat 0 0;}
#right #mailParts li#r_gaspardetlisa a:hover{background:url(../img/main/gaspardetlisa2.gif) no-repeat 0 0;}
#right #mailParts li#r_parts a:hover{background:url(../img/main/parts2.gif) no-repeat 0 0;}
#right #mailParts li#r_violin a:hover{background:url(../img/main/violin2.gif) no-repeat 0 0;}
#right #mailParts li#r_link a:hover{background:url(../img/main/link2.gif) no-repeat 0 0;}
li#r_coffeebean a:hover{background:url(../img/main/coffeebean2.gif) no-repeat 0 0;}
#right #mailParts li#r_rakuten a:hover{background:url(../img/main/rakuten2.gif) 0 0 no-repeat;}
#right #mailParts li#r_yahoo a:hover{background:url(../img/main/yahoo2.gif) 0 0 no-repeat;}
#right #mailParts li#r_water a:hover{background:url(../img/tea/tae_pot2.jpg) 0 0 no-repeat;}

/* navigation
---------------------------------------- */

#navi{
  margin:10px 0 10px 20px;
  line-height:12px;
}

#contents h2{padding:0 0 0 20px;}

#contents h2 a{
  width:570px;
  height:250px;
  display:block;
  text-indent:-9999px;
}

/* footer
---------------------------------------- */

#footer{
	background:url(../img/main/footer_line.gif) no-repeat 0 0;
	position:absolute;
	width:780px;
	height:110px;
	left: 1px;
	bottom: -10px;
}

#footer p#f,
#footer h3,
#footer p#copyright{
  font-size:11px;
  color:#333333;
  line-height:16px;
  margin:0 0 0 20px;
}

#footer h3 a span{
  color:#333333;
}

#footer h3 a:hover span{
  color:#FF0000;
}

#footer h3 a#dirLink{
  color:#af8788;
  font-weight:bold;
}

#footer h3 a:hover#dirLink{
  color:#f6bfc3;
}

#footer p#f a,
#footer h3 span,
#footer h3 a{
  font-size:11px;
  color:#333333;
}

#footer p#f{margin-top:20px;}

#footer p#f a:hover{color:#999999;}

#footer p#copyright span{
  font-size:11px;
	color:#990000;
	margin:0 0 0 50px;
}

/* plugin
---------------------------------------- */

#footer div#plugin{
  margin:0 0 5px 20px;
  padding:5px 0 0 0;
}

#footer div#plugin,
#footer div#plugin a,
#footer div#plugin span{
  font-size:10px;
  color:#333333;
}

#footer div#plugin a:hover span,
#footer div#plugin a:hover{
  color:#999999;
}

#footer div#plugin img{
  vertical-align:middle;
}

#footer div#plugin span{
  margin:0 30px 0 10px;
}

#footer h3#aromaCategory{
  color:#FF6699;
}


/* コーヒー関連メニュー
------------------------------------------------------------ */

#coffeeMenu{
  margin:30px 20px 20px 20px;
  text-align:center;
}

#coffeeMenu h2{
  height:16px;
}

#coffeeMenu a{
  display:block;
}

#coffeeMenu ul li{margin:20px 0 0 0;}

#coffeeMenu ul #v_60 a{
background:url(../img/coffee/v60.gif) no-repeat center top;padding:45px 0 0 0;}

#coffeeMenu ul #syphon a{
background:url(../img/coffee/syphon.gif) no-repeat center top;padding:85px 0 0 0;}

#coffeeMenu ul #nel_drip a{
background:url(../img/coffee/nel.gif) no-repeat center top;padding:93px 0 0 0;}

#coffeeMenu ul #mizudashi a{
background:url(../img/coffee/mizudashi.gif) no-repeat center top;padding:95px 0 0 0;}

#coffeeMenu ul #v_60 a:hover{background:url(../img/coffee/v602.gif) no-repeat center top;}

#coffeeMenu ul #syphon a:hover{background:url(../img/coffee/syphon2.gif) no-repeat center top;}

#coffeeMenu ul #nel_drip a:hover{background:url(../img/coffee/nel2.gif) no-repeat center top;}

#coffeeMenu ul #mizudashi a:hover{background:url(../img/coffee/mizudashi2.gif) no-repeat center top;}
#shadow #frame #contents #m1 #coffee p {
	margin-right: auto;
	margin-left: auto;
}
#shadow {
	height: 1500px;
}