@charset "utf-8";

/* ===================================================================
　リセット及びbody初期設定
=================================================================== */
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	text-align: left;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,th {
  text-align: left;
}
q:before,q:after {
  content: '';
}
object,embed {
  vertical-align: top;
}
hr,legend {
  display: none;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
img,abbr,acronym,fieldset {
  border: 0;
}
ul,ol {
  list-style-type: none;
}


/* --------------------------------------------------------
  default.css上書き、リンク
-------------------------------------------------------- */
body {
  color: #383E40;
  font-size: 14px;
  line-height: 1.6;
  font-family: "Avenir Next", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
}

a:link {
  color: #435357;
}

a:visited {
  color: #736A5F;
}

a:hover {
  text-decoration: none;
}

a:active {
}


/* --------------------------------------------------------
  share style
-------------------------------------------------------- */
.imgR {
  float: right;
  margin: 0 0 10px 10px;
}

.imgL {
  float: left;
  margin: 0 10px 10px 0;
}

.btn,
.center {
  text-align: center;
}

a:hover img {
  opacity: 0.8;
}

.clear {
  clear: both;
}

/* clearfix */
#hoge:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

.note {
  font-size: 90%;
}


/* --------------------------------------------------------
  #container
-------------------------------------------------------- */
#container {
  width: 980px;
  margin: 0 auto;
  text-align: left;
}


/* --------------------------------------------------------
  #contents
-------------------------------------------------------- */
#contents {
  width: 980px;
}
#contents:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#contents table,#contents ol,#contents ul,#contents dl,#contents blockquote,#contents pre,#contents p {
	margin-bottom: 10px;
}

/*  ページトップへ  */
#contents .toTop {
  clear: both;
  text-align: right;
  font-size: 10px;
}
#contents .toTop a {
  padding-left: 10px;
  background: url(images/bg_totop.gif) no-repeat 0 0;
  text-decoration: none;
}
#contents .toTop a:hover,
#contents .toTop a:active {
  text-decoration: underline;
}




/* ==================================================================
 共通（ヘッダー、フッター）
================================================================== */

/* --------------------------------------------------------
  #header
-------------------------------------------------------- */
#header {
  margin-top: 10px;
}
#header a {
  color: #666;
  text-decoration: none;
}
#header a:hover,
#header a:active {
  text-decoration: underline;
}

#header #title {
  float: left;
  margin-top: 20px;
  font-size: 110%;
}

#header h1 {
  font-weight: normal;
}


/* #utilityNav
-------------------------------------------------------- */
#header #utilityNav {
  float: right;
  color: #999;
  text-align: right;
}
#header #utilityNav a {
  color: #999;
}

#header #utilityNav p {
  margin: 0;
}
#header #utilityNav p.logo_storio {
  margin: 30px 0 0;
}


/* #gNav
-------------------------------------------------------- */
#header #gNav {
  clear: both;
  overflow: hidden;
  padding: 42px 0 10px;
  line-height: 1.0;
  font-size: 140%;
}

* html #header #gNav {
  height: 1%;
}

#header #gNav li {
  display: inline;
  margin: 0 10px 0 0;
}

#header #gNav a {
  padding: 20px;
}
#header #gNav li.selected a,
#header #gNav a:hover,
#header #gNav a:active {
  color: #435357;
}
#header #gNav a:visited {
  color: #736A5F;
}

/* .topicpath（パンくずナビ）
-------------------------------------------------------- */
#header .topicpath {
  padding: 0 20px;
  font-size: 85%;
  color: #999;
}
#header .topicpath a {
  color: #999;
}


/* --------------------------------------------------------
  #footer
-------------------------------------------------------- */
#footer {
  padding: 0 0 1em;
  border-top: 1px solid #736A5F;
  background: #BFBDB8;
}
#footer a {
  color: #333;
  text-decoration: none;
}
#footer a:hover,
#footer a:active {
  text-decoration: underline;
}


#footer div.navi {
  float: left;
  width: 196px;
  margin: 20px 0 0 20px;
}

#footer h3 {
  border-bottom: 1px solid #736A5F;
  font-weight: normal;
}
#footer ul {
  list-style-type: square;
  margin: 10px 0 0 20px;
  font-size: 90%;
}

#footer ul li {
  margin-bottom: 0.5em;
}

#footer div.other {
  float: left;
  width: 296px;
  margin: 20px 0 0 16px;
}
#footer div.other div#facebook {
  margin-bottom: 20px;
  padding: 0 0 5px;
  border: 1px solid #C9C3B5;
  background: #fff;
}
#footer div.other div#facebook h4 {
  margin: 8px 8px 0;
}
#footer div.other ul {
  list-style-type: none;
  margin: 0;
  text-align: right;
}
#footer div.other li {
  display: inline;
  margin-right: 4px;
}
#footer div.other li.last {
  margin-right: 0;
}


#footer .copyright {
  clear: both;
  margin-left: 20px;
  padding-top: 20px;
  font-size: 85%;
}


/* ==================================================================
 コンテンツ部分
================================================================== */

/* トップページ
-------------------------------------------------------- */
body#home #contents #slide {
  position: relative;
  margin: 12px 0 16px;
}
body#home #contents #slide h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: block;
  width: 920px;
  padding: 20px 30px;
  font-size: 28px;
  line-height: 1.8;
  color: #fff;
  font-weight: normal;
}
body#home #contents #slide a:link,
body#home #contents #slide a:visited,
body#home #contents #slide a:hover {
  color: #fff;
  text-decoration: none;
}
body#home #contents #slide a:hover img {
  opacity: 1.0;
}



#contents  #blockNav {
  width: 996px;
  margin-right: -16px;
}
#contents  #blockNav:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
#contents  #blockNav div {
  float: left;
  width: 316px;
  margin: 0 16px 16px 0;
}
#contents  #blockNav div span {
  position: absolute;
}
#contents  #blockNav div span img {
  padding: 8px;
}
#contents  #blockNav div h3 {
  font-size: 150%;
}
#contents  #blockNav div h3 a {
  display: block;
  width: 300px;
  padding: 6px 8px;
  color: #333;
  text-decoration: none;
}

#contents  #news {
  clear: both;
  margin: 40px 0;
}
#contents  #news:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

body#home #contents #news h2 {
  float: left;
  width: 316px;
  margin: 0;
  text-align: right;
  font-size: 150%;
  margin: 0;
  border-bottom: 1px solid #435357;
  font-weight: normal;
}

#contents  #news iframe {
  margin: 0 0 0 16px;
}

#contents  #news ul {
  float: right;
  width: 648px;
  margin: 0;
}
#contents  #news li {
  margin: 0.3em 0;
}
#contents  #news span.date {
  margin-right: 1em;
}


/* サブページ（下層ページ）共通
-------------------------------------------------------- */
body.sub #contents h1 {
  margin: 30px 0 5px;
  border-bottom: 1px solid #BFBDB8;
  font-size: 170%;
}
body.sub #contents h1 span {
  margin-left: 1em;
  font-weight: normal;
  font-size: 90%;
}

body.sub #contents h2 {
  margin: 0 0 1em;
  font-size: 140%;
  text-decoration: underline;
  text-decoration-color: #435357;
}

body.sub #contents h3 {
  font-size: 120%;
  margin: 1em 0 0.5em;
}

body.sub #contents div.block p.lead {
  margin-bottom: 2em;
}

body.sub #contents div.block {
  clear: both;
  margin: 0 0 40px ;
}
body.sub #contents div.block:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

body.sub #contents div.block h3 {
  margin: 2em 15px 0.5em;
}

body.sub #contents div.block dl,
body.sub #contents div.block p {
  margin: 0 60px 1em;
}

body.sub #contents div.block ul {
  list-style-type: square;
  margin: 0 60px 1em 80px;
}
body.sub #contents div.block ol {
  list-style-type: decimal;
  margin: 0 60px 1em 80px;
}
body.sub #contents div.block ol li {
  margin-bottom: 1em;
}

body.sub #contents #main {
  width: 840px;
  margin: 30px auto;
}

#contents dl {
  margin: 5px 0;
}
#contents dt {
  float: left;
  padding: 0.4em 0;
  width: 7em;
  border-top: 1px solid #BFBDB8;
}
#contents  dd {
  margin-left: 8em;
  padding: 0.4em 0;
  border-top: 1px solid #BFBDB8;
}
#contents dt.first,
#contents dd.first {
  border-top: none;
}

body.sub #contents .block dd ul {
  list-style-type: none;
  margin: 0;
}
body.sub #contents .block dd dl {
  margin: 0;
}
body.sub #contents .block dd dt {
  float: none;
  width: auto;
  padding: 0;
  border-top: none;
  font-weight: bold;
}
body.sub #contents .block dd dd {
  margin: 0 0 1em;
  padding: 0;
  border-top: none;
}
body.sub #contents .block dd dd.last {
  margin: 0;
}


/* 製品紹介
-------------------------------------------------------- */
body#product #contents  #blockNav {
  width: 942px;
  margin: 50px -61px 50px -41px;
}
body#product #contents  #blockNav div {
  float: left;
  width: 280px;
  margin: 0 20px 20px 0;
  padding: 6px 6px 0;
  border: 1px solid #BFBDB8;
  text-align: center;
}
body#product #contents  #blockNav div h3 {
  margin: 6px 0;
  padding: 6px 0 0 ;
  border-top: 1px solid #eeeeee;
}
body#product #contents  #blockNav div h3 a {
  width: 278px;
  padding: 6px 0;
}

#contents .feature:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#contents .feature img {
  float: left;
}
#contents .feature_text {
  float: right;
  width: 390px;
}

#contents .feature.second {
  margin: 20px 0;
}
#contents .feature.second img {
  float: right;
}
#contents .feature.second .feature_text {
  float: left;
  width: 390px;
}

#contents  #main .feature h2 {
  margin: 1em 0 0.5em;
  padding: 0;
  background: #fff;
  color: #3F1000;
  font-weight: normal;
  font-size: 190%;
  line-height: 1.3;
  text-decoration: none;
}

div.sns_button {
  position: relative;
}
/* Twitterボタン */
div.twitter_button {
  position: absolute;
  top: 0;
  left: 0;
}
/* いいね！ボタン */
div.facebook_button {
  position: absolute;
  top: 0;
  left: 120px;
}

#contents .showcase {
  clear: both;
  margin: 55px -86px 55px -70px;
  text-align: center;
}
#contents .showcase img {
  margin-right: 16px;
}

#contents .product_info {
  float: left;
  margin: 55px 0;
  width: 420px;
}
body.sub #contents .product_info h3 {
  margin: 0;
  padding: 8px 12px;
  background: #BFBDB8;
  line-height: 1.0;
}
#contents .product_info dl {
  margin: 5px 12px 20px;
}
#contents .product_info dt {
  width: 6em;
}
#contents .product_info dd {
  margin-left: 7em;
}
#contents .product_info dd ul {
  margin-bottom: 0;
}

#contents ul.order_buttons  {
  margin: 40px -70px 0 12px;
}
#contents ul.order_buttons li {
  display: inline;
  margin: 0 46px 0 0;
}

#contents ul.order_button {
  margin: 10px 12px 0;
}
#contents ul.order_button li {
  margin-right: 15px;
  margin-bottom: 10px;
}

#contents div.attention {
  margin: 35px 0;
  padding: 15px;
  background: #BFBDB8;
}
#contents .attention h4 {
  margin: 0 0 0.5em;
  color: #AA4B3E;
}
#contents .attention ul {
  list-style-type: square;
  margin: 0 0 0 15px;
  font-size: 90%;
}

#contents .info_box {
  float: right;
  margin: 55px 0;
}

#contents p.attention {
  color: #AA4B3E;
  text-align: center;
}

#contents div.note {
}
#contents div.note ul {
  list-style-type: square;
  padding: 0 0 0 30px;
}
#contents div.note li {
  margin: 0 0 0.5em;
}

/* メディア掲載情報 
-------------------------------------------------------- */
#contents table.media_list {
  border-top: 1px dashed #BFBDB8;
}
#contents table.media_list th {
  padding: 1em;
  border-bottom: 1px dashed #BFBDB8;
  vertical-align: top;
  text-align: center;
}
#contents table.media_list td {
  padding: 1em;
  border-bottom: 1px dashed #BFBDB8;
  vertical-align: top;
}
#contents table.media_list dt {
  float: none;
  padding: 0.4em 0;
  width: auto;
  border-top: none;
  font-weight: bold;
  font-size: 110%;
}
#contents table.media_list dt a,
#contents table.media_list dt a:link {
  text-decoration: none;
}
#contents table.media_list dd {
  margin: 0 0 0.5em;
  padding: 0;
  border-top: none;
}


/* 取り扱い店舗
-------------------------------------------------------- */
#contents table.shoplist {
  width: 840px;
  margin: 0 0 40px ;
  border: 1px solid #736A5F;
}
#contents table.shoplist th,
#contents table.shoplist td {
  padding: 10px;
  border-bottom: 1px solid #736A5F;
  border-left: 1px dotted #736A5F;
  vertical-align: top;
  font-weight: normal;
}
#contents table.shoplist th {
  width: 19em;
}
#contents table.shoplist td.product {
  width: 10em;
}

#contents table.shoplist .header th,
#contents table.shoplist .header td {
  background: #BFBDB8;
  border-bottom: 1px solid #736A5F;
  text-align: center;
}

#contents table.shoplist.online td.product {
  width: auto;
}


/* お問い合わせ
-------------------------------------------------------- */
#contents .contact_box {
  float: right;
  width: 280px;
  margin: 0 0 10px 20px;
  padding: 10px;
  text-align:center;
  background: #BFBDB8;
}
body.sub #contents .contact_box h2,
body.sub #contents .contact_box h3 {
  background: #fff;
  color: #333;
  font-size: 130%;
  text-decoration: none;
}

#contents form dt {
  width: 12em;
  padding-bottom: 0;
}
#contents  form dd {
  margin-left: 13em;
}

#contents form .formbtn {
  text-align: center;
}
#contents form .formbtn input {
  font-size: 150%;
}

#contents p.company_name {
  margin: 2em 0 5em;
  text-align: right;
}


/* フォーム画面
-------------------------------------------------------- */
body#form #contents ul {
  list-style-type: square;
  margin: 10px 0 2em 20px;
}

body#form #contents p.credit {
  margin: 5em 0 0;
  text-align: right;
  font-size: 85%;
}
body#form #contents p.credit a {
  color: #999;
}

/* ノイリング ページ内ナビ
-------------------------------------------------------- */
#contents .local_navi {
  margin: 20px 0;
}
#contents .local_navi a {
  display: block;
  width: 259px;
  padding: 10px;
  color: #fff;
  background: #999;
  border-right: 1px solid #eeeeee;
  text-align: center;
}
#contents .local_navi a.last {
  width: 260px;
  border-right: none;
}
#contents .local_navi a:link {
  text-decoration: none;
}
#contents .local_navi a:hover {
  background: #666;
}

#contents .local_navi ul {
  margin-bottom: 0;
}
#contents .local_navi ul:after {
  content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#contents .local_navi li {
  float: left;
}