@charset "utf-8";


/************************************
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
************************************/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
nav ul {
    list-style:none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べたときに余白が出てしまわないように*/
img {
　　　vertical-align: top;
　　　font-size:0;
　　　line-height: 0;
}

/************************************
End: html5doctor.com Reset Stylesheet
*************************************/

* {
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  letter-spacing: 1px;
  line-height: 1.8em;
  color: #333;
}
body{
  background-color:#fff;
  background:url(../img/common/bodyBg.jpg) top center repeat;
  -webkit-text-size-adjust: 100%;/*文字サイズの自動調整をオフ*/
}

.alt {
  text-indent: -9999px;
  font-size: 0px;
  line-height: 0;
}
.clear {
  clear: both;
}
.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.shadow {
	-webkit-box-shadow:0px 0px 10px 0px #ccc; /* Safari, Chrome逕ｨ */
	-moz-box-shadow:0px 0px 10px 0px #ccc; /* Firefox逕ｨ */
	box-shadow:0px 0px 10px 0px #ccc; /* CSS3 */
}

.blackshadow {
  -webkit-box-shadow:0px 0px 10px 0px #333; /* Safari, Chrome逕ｨ */
  -moz-box-shadow:0px 0px 10px 0px #333; /* Firefox逕ｨ */
  box-shadow:0px 0px 10px 0px #333; /* CSS3 */
}

.smallround {
	-webkit-border-top-right-radius: 4px;
      -moz-border-radius-topright: 4px;
      border-top-right-radius: 4px;
	  -webkit-border-top-left-radius: 4px;
      -moz-border-radius-topleft: 4px;
      border-top-left-radius: 4px;
	  
	  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      border-bottom-right-radius: 4px;
	  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
      border-bottom-left-radius: 4px;
}


div.wrapper{
  width:100%;
  position: relative;
  top:0px;
}

div.container{
  position:relative;
  width:100%;
  height:2980px;
  max-width:970px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background:#FFFFFF;
  overflow:hidden;
  margin-bottom: 60px;
 /* background: url(../img/common/dammyImage.jpg)top center no-repeat;*/
}

div#header{
  width:970px;
  text-align: center;
  height:215px;
  position: relative;

}
h1#Mattroi_logo{
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top:80px;
}


div#mainimageArea{
  background-color: #E8E6E0;
  width:970px;
  height:615px;
  opacity: 0;
}

div.nivo-directionNav{display: none;}

/*MENUAREA*/

div.menuArea{
  width:100%;
  text-align: center;
  position: relative;
  height:30px;
}

ul.menu{
  display: block;
  list-style: none;
  width:700px;
  border-top: #80645D solid 5px;
  padding:0!important;margin:0;
  position: absolute;
  top:0px;
  left:135px;
  z-index: 2000;
}
ul.menu li{
  display: inline-block;
  height:40px;
  margin:0px 50px!important;
  position: relative;
  top:-10px;
}

ul.menu li>a{display: block;margin:0;}
ul.menu li>a:hover{opacity: 0.7;}

/*ABOUT AREA*/

div.abourArea{
  width:100%;
  height:660px;
  position: relative;
}

div.abourArea div.left{
  position: absolute;
  width:350px;
  top:60px;
  left:115px;
}
div.abourArea div.left h2{
  margin-bottom:30px;
}
p.des{
  color:#80645D;
  font-size: 88%;
  letter-spacing: 1px;
  line-height: 1.7;
  margin-bottom:20px;
  text-align: left;
}

div.abourArea div.right{
  position: absolute;
  width:350px;
  top:95px;
  left:530px;
 
}
div#topicsArea{
  width:100%;
  min-height:60px;
  position: relative;
  top:30px;
}
div#topicsArea h3{
  margin-bottom:25px;
}
div.topic{
text-align: left;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:#ccc dotted 1px;
}

p.topic_title{
  font-size: 80%;
  font-weight: bold;
  color:#80645D;
}
p.topic_title span.date{
  color:#6482BD;
  margin-right:10px;
  font-weight:normal;
}
p.topic_des{
  font-size: 75%;
  color:#80645D;
  line-height: 1.7;
}
p.topic_des a{
  color:#6482BD;
  text-decoration: none;
}

p.topic_des a:hover{
  text-decoration: underline;
}

p.topic_des span{
	color:#80645D;
	font-weight:bold;
}

div.productArea{
  width:970px;
  height:644px;
  background-color: #F9F9FA;
}
div.trio{
  width:33.3333%;
  height:644px;
  overflow: hidden;
  text-align: center;
  float: left;
  position: relative;
}
div.desArea{text-align: center;width:100%;padding-top:30px;overflow: hidden;height:323px;}

p.featureEng{position: relative;margin-left: auto;margin-right: auto;
margin-bottom:15px;}
p.feature{
  position: relative;
  color:#80645D;
  margin-bottom:15px;
}
p.feature_des{
  font-size: 75%;
  color:#80645D;
}

img.product02{
  position: absolute;
  top:323px;
  left:0px;
}

div.newItemArea{
  text-align: left;
  width:100%;
  height:390px;
  overflow: hidden;
  position: relative;
}

div.newItemDesArea{
  text-align: center;
  width:485px;
  height:290px;
  position: absolute;
  top:80px;left:485px;
}

div.contactArea{
  width:970px;
  position: relative;
}
div.contact{
  width:100%;
  position: relative;
  top:40px;
  left:60px;
}
p.cocovi{
  position: relative;
  margin-bottom:20px;
}
div.contact p.des{

}
p.cocovi_des{
  position: absolute;
  left:220px;
  top:0px;
  font-size: 85%;
  text-align: left;
}

img.email{
  display: inline-block;
  position: relative;
  top:6px;
  left:5px;
}
p.cocovi_des span{
  font-size: 85%;
  opacity: 0.7;
  font-style: italic;
}

img.coffee{
  position: absolute;
  top:-100px;
  right:90px;
  border:#fff solid 5px;
}

@media screen and (max-width: 479px) {

}
@media screen and (min-width: 480px) and (max-width: 767px) {

}
@media screen and (min-width: 768px) {
	
}

.sprite-sprite-about,.sprite-sprite-cocovi,.sprite-sprite-mattroi,.sprite-sprite-menu_about,.sprite-sprite-menu_contact,.sprite-sprite-menu_product,.sprite-sprite-newitems,.sprite-sprite-printable,.sprite-sprite-topics,.sprite-sprite-washable,.sprite-sprite-wightlight{background-image:url(../img/common/sprite.png);background-repeat:no-repeat}.sprite-sprite-mattroi{background-position:0 0;width:204px;height:50px}.sprite-sprite-cocovi{background-position:0 -50px;width:150px;height:64px}.sprite-sprite-wightlight{background-position:0 -114px;width:140px;height:60px}.sprite-sprite-washable{background-position:-204px 0;width:140px;height:60px}.sprite-sprite-printable{background-position:-204px -60px;width:140px;height:60px}.sprite-sprite-newitems{background-position:0 -174px;width:140px;height:60px}.sprite-sprite-menu_product{background-position:-204px -120px;width:120px;height:40px}.sprite-sprite-menu_contact{background-position:-140px -174px;width:120px;height:40px}.sprite-sprite-menu_about{background-position:0 -234px;width:120px;height:40px}.sprite-sprite-about{background-position:-120px -234px;width:105px;height:38px}.sprite-sprite-topics{background-position:-260px -174px;width:73px;height:24px}@media screen and (-webkit-min-device-pixel-ratio:1.0),screen and (min--moz-device-pixel-ratio:1.0),screen and (-o-min-device-pixel-ratio:100/100),screen and (min-device-pixel-ratio:1.0),screen and (min-resolution:1.0dppx){.sprite-sprite-about,.sprite-sprite-cocovi,.sprite-sprite-mattroi,.sprite-sprite-menu_about,.sprite-sprite-menu_contact,.sprite-sprite-menu_product,.sprite-sprite-newitems,.sprite-sprite-printable,.sprite-sprite-topics,.sprite-sprite-washable,.sprite-sprite-wightlight{background-image:url(../img/common/sprite.png);-webkit-background-size:344px 274px;-moz-background-size:344px 274px;background-size:344px 274px}}