/* 標準可変メディア */
img, object, embed, video { max-width: 100%; height: auto; }
/* IE対応 */
.ie6 img { width:100%; }
img { -ms-interpolation-mode: bicubic; }
.clear { clear:both; }

/* ===============================
デスクトップ
================================= */
.gridContainer { width: 80.1%; max-width: 960px; margin: auto; }
/* ヘッダー */
#header { background: #ddd url(../img/bg_header.png); margin:0; padding:0; }
#obi { background:#f0ecd9; margin:0; padding:7px 0; border-top: solid 2px #333; border-bottom: solid 1px #bbb; }/* h1背景色 */
#obi h1 { width: 960px; margin:0 auto; padding:0; font-size: 0.7em; font-weight:normal; color:#9b9b8c; }/* h1文字色 */
#logo { clear: both; float: left; margin-top: 2%; margin-bottom: 2%; margin-right:3.125%; margin-left:0.9%; width: 22.875%; display: block; }
#menubox { clear: none; float: left; margin-left: 0; width: 73.1%; }
#menu { width: 100%; max-width: 701px; margin: 0 ; padding: 0; border-right:solid 1px #bbb; }
#menu li { display: block; float: left; width: 25%; margin: 0; padding: 0; }
#menu li a { display: block; height:31px; background: #fff; text-align: center; text-decoration: none; border-left:solid 1px #bbb; border-bottom: 1px solid #bbb; }
#menu li a:hover { background: #fefde2; }
#toggle { display: none; }
#headercredit { clear:both; padding:2% 0; }
#creditcard { float:left; width:46%; padding-top:1.2%; margin-top:2%; }
#shoppincart { float:right; width:50%; margin-top:2%; }
#shoppincart a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5;	opacity: 0.5; }
#shoppincart ul { width:100%; padding:0; margin:0; list-style:none; }
#shoppincart li { display: block; float: left; width:50%; text-align:center; }
#searchbox { clear: both; width:51.5%; float:left; }
dl.gsearch { position: relative; }
dl.gsearch dt { width:60%; padding:0; margin:0; background-color:#fff; border:1px solid #aaa; float:left; }
dl.gsearch dt input { width:100%; padding:0; margin:0; height:30px; line-height:30px; background:none; border:none; }
dl.gsearch dd { width:20%; padding:0; margin:0; border:1px solid #bbb; float:left; }
dl.gsearch dd button {width: 100%; padding:0; margin:0; height:30px; line-height:30px; color:#fff; text-align:center; background:#cecebf; border:none; display:block; }
dl.gsearch dd button:hover { background: #a5a589; }
#headerinfo { width:48%; float:right; padding:15px 0; }
#cnav { clear: both; width:100%; background:url(../img/bg_cnav.png);}/* ガイダンス背景 */
#cnav ul { width:100%; padding:0; margin:0; list-style:none; }
#cnav li { display: block; float: left; width:20%; padding:2% 0; text-align:center; }
#cnav a:hover img { position: relative; top: 3px; left: 2px; }

#cnav2 { clear: both; width:100%; background:url(../img/bg_cnav.png);}/* ガイダンス背景 */
#cnav2 ul { width:100%; padding:0; margin:0; list-style:none; }
#cnav2 li { display: block; float: left; width:19%; margin:0 0.5%; text-align:center; }
#cnav2 a:hover{ display:block; background:url(../img/cnav_back.png) no-repeat; background-position:0 0; background-repeat:no-repeat;}
#cnav2 li.active{ display:block; background:url(../img/cnav_back-a.png) no-repeat; background-position:0 0; background-repeat:no-repeat;}

#cnav3 { clear: both; width:100%; background:url(../img/bg_cnav.png);}/* ガイダンス背景 */
#cnav3 ul { width:100%; padding:0; margin:0; list-style:none; }
#cnav3 li { display: block; float: left; width:15.6%; margin:0 0.5%; text-align:center; }
#cnav3 a:hover{ display:block; background:url(../img/cnav_back.png) no-repeat; background-position:0 0; background-repeat:no-repeat;}
#cnav3 li.active{ display:block; background:url(../img/cnav_back-a.png) no-repeat; background-position:0 0; background-repeat:no-repeat;}

/* トップのみバナー */
.picbox{  margin-left: auto; margin-right: auto; padding-top: 20px; width: 100%; background:#FDFCF2; }
#picitem{ clear: both; width:100%; max-width: 988px; margin: auto; }
#picitem ul { margin:0 0 0 2.5% ; padding:0; list-style:none; }
#picitem li { display: block; float: left; width:33.333%; margin-bottom: 20px; }
#picitem a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }
/* サイドメニュー */
#aside { clear: none; float: left; margin-left: 0; margin-right: 3.125%; width: 23.958%; display: block; }
#aside h4 { font-size:0.9em; font-weight:normal; padding:2% 4% ; margin:15px 0 0 0; background:#6a5748; color:#fff; }/* サイドh4背景 */
.sidenav { width:100%; display: block; }
ul.sidenav > li > p { border: solid 3px #f0ecd9; margin:3% 0 0 0;}
ul.sidenav > li > ul > li { border-bottom: dotted 2px #eee; }
ul.sidenav a {display:block; background-position:95% center; background-repeat:no-repeat;}
ul.sidenav span {display:block; background-position:95% center; background-repeat:no-repeat;}
ul.sidenav > li > p span { background-image:url(//www.styledart-store.com/img/icon_a1.png); }
ul.sidenav > li > p span.open { background-image:url(//www.styledart-store.com/img/icon_a1.png);  }
ul.sidenav > li > a { background-image:url(//www.styledart-store.com/img/icon_a1.png); }
ul.sidenav > li > ul > li > p span.open { background-image:url(//www.styledart-store.com/img/icon_close1.png);}
ul.sidenav > li > ul > li > a { background-image:url(//www.styledart-store.com/img/icon_a2.png); font-size:85%; }
ul.sidenav ul li a:hover { background-color:#fefde2; text-decoration : none; background-image:url(//www.styledart-store.com/img/icon_a2.png); }
ul.sidenav li ul { padding-bottom:2.8%; }
ul.sidenav li ul li img { margin-right:2.8%; }
.sidebnr { width:100%; margin-top:10%; overflow: hidden; }
.sidebnr a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }
.sidebnr ul { margin:0; padding:0; list-style:none; }
.sidebnr ul li { width:100%; margin-left:0; margin-bottom:5%; }
#sidecompany { margin:8% 0; border:solid 1px #b6b6b6; }
#sidecompany ul { zoom: 1; overflow: hidden; margin:0; padding:0; list-style:none; }
#sidecompany a { text-decoration:none; }
#sidecompany li { line-height:32px; }
#sidecompany li a { display:block; margin-top:-1px; padding:1% 0 1% 3%; line-height:32px; border-top:solid 1px #b6b6b6; background:url(//www.styledart-store.com/img/back_clist.png) no-repeat right center; }
#sidecompany li a:hover { background:url(//www.styledart-store.com/img/back_clist_on.png) no-repeat right center; }
/* メイン */
#container { clear: both; float: right; margin-left: 0; margin-right: 0; width: 72.917%; display: block; }
.pankuzu { margin:0; padding:2% 1%; }
.pankuzu li { display:inline; line-height:110%; list-style-type:none; }
.pankuzu li a { padding-right:20px; background:url(//www.styledart-store.com/img/icon_pankuzu.png) no-repeat right center; }
.listbox { width:98.2%; padding-right:1.8%; }
.products { float: left; width: 31%; margin-left:2.33%; margin-bottom:2.33%; }
/* 商品カテゴリアイコン４マス */
.cateicon { border-top: solid 5px #f3f1ef; border-right: solid 4px #f3f1ef; border-bottom: solid 4px #f3f1ef; border-left: solid 5px #f3f1ef; overflow: hidden; }
.cateicon ul { padding:0; margin:0 auto; list-style:none; }
.cateicon li { float: left; width: 24.782%; border-right: solid 1px #f3f1ef; border-bottom: solid 1px #f3f1ef;}
/* 商品カテゴリアイコン６マス */
.cateicon2 { border-top: solid 5px #f3f1ef; border-right: solid 4px #f3f1ef; border-bottom: solid 4px #f3f1ef; border-left: solid 5px #f3f1ef; overflow: hidden; }
.cateicon2 ul { padding:0; margin:0 auto; list-style:none; }
.cateicon2 li { float: left; width: 16.5%; border-right: solid 1px #f3f1ef; border-bottom: solid 1px #f3f1ef;}

/* ショッピングカート */
/* itemswap */
div.itemswap, div.itemswap2, div.itemswap3, div.itemswap4, div.itemswap5, div.itemswap6, div.itemswap7, div.itemswap8, div.itemswap9, div.itemswap10, div.itemswap11 { overflow: hidden; width: 100%; }
div.itemswap p, div.itemswap2 p, div.itemswap3 p, div.itemswap4 p, div.itemswap5 p, div.itemswap6 p, div.itemswap7 p, div.itemswap8 p, div.itemswap9 p, div.itemswap10 p, div.itemswap11 p { padding: 0; margin: 0 0 2.238% 0; border: solid 3px #ddd; display: block; }
div.itemswap ul, div.itemswap2 ul, div.itemswap3 ul, div.itemswap4 ul, div.itemswap5 ul, div.itemswap6 ul, div.itemswap7 ul, div.itemswap8 ul, div.itemswap9 ul, div.itemswap10 ul, div.itemswap11 ul { display: inline; margin: 0; padding: 0; list-style: none; }
div.itemswap li a, div.itemswap2 li a, div.itemswap3 li a, div.itemswap4 li a, div.itemswap5 li a, div.itemswap6 li a, div.itemswap7 li a, div.itemswap8 li a, div.itemswap9 li a, div.itemswap10 li a, div.itemswap11 li a { display: block; border: solid 3px #ddd; }
div.itemswap li a.selected,div.itemswap2 li a.selected,div.itemswap3 li a.selected,div.itemswap4 li a.selected,div.itemswap5 li a.selected,div.itemswap6 li a.selected,div.itemswap7 li a.selected,div.itemswap8 li a.selected,div.itemswap9 li a.selected,div.itemswap10 li a.selected,div.itemswap11 li a.selected { border: solid 3px #bd3415; }
div.itemswap li, div.itemswap2 li, div.itemswap3 li, div.itemswap4 li, div.itemswap5 li, div.itemswap6 li, div.itemswap7 li, div.itemswap8 li, div.itemswap9 li, div.itemswap10 li, div.itemswap11 li { width:28%; float: left; margin-right: 3.33%; margin-bottom:3.33%; background:#fff; text-align:center; }
.cartbox { width:96.4%; padding:1.8%; }
.cartbox .img { width:44.44%; float:left; margin-right:4.44%; }
.cartbox .txt { width:51%; float:right; }
.cartbox .txt p.tit { padding:2%; background:#000; color:#fff; font-weight:bold; }
.cartbox .txt ul { margin:0; padding:0; list-style:none; overflow: hidden; }
.cartbox .txt ul li { width:23.832%; float:left; padding:2%; margin-bottom:3.79%; margin-left:3.79%; margin-right:0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: solid 1px #ccc; text-align:center; font-size:85%; }
.cartbox .txt li img { margin-bottom:4% ; }
.cartbox .txt ul li.ul100 { width:90.672%; padding:2.332%; margin-bottom:3.79%; margin-left:2.332%; margin-right:2.332%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: solid 1px #ccc; text-align:left; font-size:100%; }
.pricebox{ background:#fff7f7; padding:3% 6% 6% 6%; margin-top:10%; }
.pricebox input.mprice { width:40%; border:none; background:#fff7f7; color:#dc143c; font-size:123.1%; margin-left:3%; }

.cartbox select {/* Firefox */
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}
.cartbox select::-ms-expand {/* ie */
  display: none;
}
.day01 { background:#C00; padding:3%; margin-bottom:0; color:#fff; }
.day99 { background:#0072A8; padding:3%; margin-bottom:0; color:#fff; }
.day00 { background:#666; padding:3%; margin-bottom:0; color:#fff; }
.mailb { background:#ffcaca; padding:2% 3%; margin:0; color:#000; font-size:0.9em;}

/* review */
div.review_f { border-right: solid 1px #b6b6b6; border-bottom: solid 1px #b6b6b6; border-left: solid 1px #b6b6b6; width: 99.714%; height: 240px; overflow-y: scroll; overflow-x: hidden; }
dl.review { padding: 2.86% 4.29%; margin: 0; }
dl.review dd { clear: both; display: block; padding: 0; margin: 0 0 2.86% 0; }
dl.review img { margin-bottom: 5px; }
dl.review p.name { float: left; text-align: left; margin: 0; padding: 0; font-size: 85%; }
dl.review p.day { float: right; text-align: right; margin: 0; padding: 0; font-size: 85%; }
dl.review p.comm { border: solid 1px #CCC; text-align: left; margin: 0; padding: 3%; font-size: 94%; color: #666; }
dl.review p.rcomm { border: solid 1px #CCC; background: #F6F6F6; text-align: left; margin: 0 0 20px 0; padding: 3%; font-size: 94%; color: #666; }
dl.review dt.rtit { font-size: 94%; }

/* 注意文 */
.attention { background:#fff; padding:1.5%; text-align:center; }
.attention ul { margin:0; padding-top:0; padding-bottom:0; padding-right:3%; }
.attention li { margin-bottom:2%; text-align:left; }
/* フッター */
#infomation { clear: both; width:95%; margin:5% 0; padding:2.5%; border:solid 1px #ccc; background:#fff; overflow: hidden; }
#infomation a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5;	opacity: 0.5; }
#infomation h2 { font-size:108%; font-weight:normal; padding:1% 2% ; background:#6a5748; color:#f0ecd9; }/* インフォh2背景色 */
#infomation h3 { font-size:93%; font-weight:normal; padding:0.8% 7px ; background:#f0ecd9; color:#6a5748; }/* インフォh3背景色 */
#delivery { width:53.179%; float:left; }
#customer { width:43.311%; float:right; margin-left:3.28%; }
.pageTop { display: none; position: relative; width: 90%; max-width: 900px; height: 0; margin: 0 auto; }
.pageTop a { position: fixed; bottom: 0px; left: auto; display: block; width: 66px; heght: 66px; margin-left: 940px; padding: 1em 0 1em 2px; background: #f0ecd9; text-align: center; outline: none; text-decoration: none; z-index: 9999; border-radius: 3px 3px 0 0; }
.pageTop a:before, .pageTop a:after { position: absolute; left: 50%; content: ""; width: 0px; height: 0px; margin-left: -10px; border: 10px solid transparent; }
.pageTop a:before { top: 50%; margin-top: -13px; border-bottom: 10px solid #f0ecd9; }
.pageTop a:after { top: 50%; margin-top: -15px; z-index: -1; border-bottom: 10px solid #6a5748; }/* 矢印の色 */
#footer { clear: both; margin-left: 0;	width: 100%; display: block; }/* フッター背景色 */
#footer a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5;	opacity: 0.5; }
#sitenav { width: 100%; margin:10px auto 0 auto; padding:1.5% 0; background:#6a5748; }
#sitenav ul { margin:0; padding:0; list-style:none; }
#sitenav li { float: left; width:24.685%; margin:0 0.2% 10px 0; background:#fff; }
#footercontent { clear: both; padding:1.5% 0; background:#f0ecd9; color:#6a5748; }/* フッターショップ情報背景・文字色 */
#corporate { width:28.125%; float:left; }
#corporate p { margin:1% 0; font-size:85%; }
#corporate img { margin:1% 0 3% 0;}
#mediabox { width:68%; float:right; display: block; }
#mediabox h4 { margin:1% 0 2% 0; padding-bottom:1%; border-bottom: solid 1px #6a5748; font-size:93%;}/* フッターh4背景 */
#media { width:58%; float:left; font-size:93%; }
#media ul { margin:0; padding:0; list-style:none; }
#mediabnr { width:100%; margin-top:1%; display: block; }
#mediabnr img { margin-right:2%;}
#agrandprize { width:41%; float:right; margin-bottom:2%; text-align:center; background:#fff; }
#grouplink { clear: both; font-size:85%; padding-top:1%; border-top: solid 1px #6a5748; }
#copyright { width:100%; margin:0; padding:0.3%; font-size: 85%; font-weight:normal; text-align:center; color:#9b9b8c; background:#cecebf; display: block; }

/* ===============================
画面サイズが770px以上の場合に適用
================================= */
@media screen and (min-width: 770px) {
.sp_none { display: none; }
}

/* ===============================
画面サイズが768px以下の場合に適用
================================= */
@media screen and (max-width: 768px) {
.gridContainer { margin-left: auto;	margin-right: auto;	width: 100%; }
.pc_none { display: none; }
/* ヘッダー */
#obi h1 { clear: both; width: 100%; margin:0 auto; padding:0; font-size: 0.7em; font-weight:normal; color:#9b9b8c; text-align:center; }
#logo { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align:center; }
#menubox { clear: none; float: left; margin-left: 0; width: 100%; display: block; border-top:1px solid #aaa; }
#menu li{ width: 50%; }
#searchbox{ width: 96.75%; padding-left: 1.1625%; padding-right: 1.1625%; margin:0 auto; }
#headerinfo{ width: 100%; text-align:center; }
dl.gsearch dt { width:70%; padding:0; margin:0; background-color:#fff; border:1px solid #aaa; float:left; }
/* トップのみバナー */
#picitem ul { margin:0 ; padding:0; list-style:none; }
/* サイドメニュー */
#aside { clear: both; width: 96.75%; padding-left: 1.1625%; padding-right: 1.1625%; margin:0 auto;  }
#sidecompany { margin:8% 0; border:solid 1px #b6b6b6; }
ul.sidenav ul {display:none;}
ul.sidenav li { width:46%; float:left; margin-left:2%; }
ul.sidenav ul li { width:100%; margin:0; padding:0; }
.sidebnr ul { width:97.34%; padding:0 2.66% 0 0; }
.sidebnr ul li { width:47.67%; float:left; margin-left:2.33%; margin-bottom:1.6%; }
#sidecompany { margin:8% 0; font-size:93%; border:solid 1px #b6b6b6; }
/* メイン */
.listbox { width:98.2%; padding-right:1.8%; }
.cateicon li { float: left; width: 24.782%; border-right: solid 1px #f3f1ef; border-bottom: solid 2px #f3f1ef;}
.cateicon2 li { float: left; width: 28.782%; border-right: solid 1px #f3f1ef; border-bottom: solid 2px #f3f1ef;}
#container { clear: both; width: 96.75%; padding-left: 1.1625%; padding-right: 1.1625%; margin:0 auto;  }
.cartbox .txt ul li.ul100 { width:90.672%; padding:2.332%; margin-bottom:3.79%; margin-left:2.332%; margin-right:2.332%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: solid 1px #ccc; text-align:left; font-size:100%; }
/* フッター */
#delivery { width:46.179%; float:left; }
#customer { width:50.311%; float:right; margin-left:3.28%; }
.pageTop { width: 100%; }
.pageTop a { left: -68px; margin-left: 100%; }
#footer { clear: both; float: left;	margin-left: 0;	width: 100%; display: block; }
#footercontent { clear: both; background:#f0ecd9; padding:2%; color:#6a5748; }/* フッターショップ情報背景色 */
#media { width:100%; float:left; font-size:85%; }
#media ul { margin:0; padding:0; list-style:none; }
#mediabnr { display: none; }
#agrandprize { width: 100%; margin-top:3%; text-align:center; background:#fff; }
#grouplink { display: none; }
}


/* ===============================
画面サイズが480px以下の場合に適用
================================= */
@media screen and (max-width: 481px) {
.gridContainer { margin-left: auto;	margin-right: auto;	width: 100%; overflow: hidden; }
.pc_none { display: none; }
/* ヘッダー */
#obi { display: none; }
#logo {	clear: both; margin-left: 0; width: 100%; display: block; text-align:center; }
#creditcard { display: none; }
#shoppincart { width:80%; }
#menu{ display: none;}
#menu li{ width: 100%; }
#toggle{ display: block; position: relative; float:left; width: 12%; background: #fff; }
#toggle a{ display: block; position: relative; padding: 12px 0 10px; color: #fff; text-align: center; text-decoration: none;  }
#toggle:before{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 20px; margin-top: -10px; background: #666; }
#toggle a:before, #toggle a:after{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 4px; background: #fff; }
#toggle a:before{ margin-top: -6px; }
#toggle a:after{ margin-top: 2px; }
#searchbox { clear: both; float: left; margin-bottom:2%; margin-left: 0; width: 100%;	display:}
dl.gsearch dt { width:70%; padding:0; margin:0; background-color:#fff; border:1px solid #aaa; float:left; }
#headerinfo { display: none; }
/* トップのみバナー */
#picitem ul { margin:0 ; padding:0; list-style:none; }
#picitem li { float: left; width:50%; margin-bottom: 3.33%}
/* メイン */
#container { clear: both; float: left; margin-left: 0;	width: 98.5%; padding-right: 1.5%; display: block; }
.listbox { width:100%; padding:0; margin-left: auto; margin-right: auto; }
.cateicon li { float: left; width: 24.662%; border-bottom: solid 2px #f3f1ef;}
.cateicon2 li { float: left; width: 32.662%; border-bottom: solid 2px #f3f1ef;}
.products { width: 96%; margin-bottom:4%; margin-right:2%; margin-left:2%; }
.cartbox .img { width:100%; margin:0; padding:0; }
.cartbox .txt { width:100%; margin:0; padding:0; }
.cartbox .txt ul li.ul100 { width:90.672%; padding:2.332%; margin-bottom:3.79%; margin-left:2.332%; margin-right:2.332%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: solid 1px #ccc; text-align:left; font-size:100%; }
/* サイドメニュー */
#aside { clear: both; float: left; margin-left: 0; width: 100%;	display: block; }
.sidenav { width:96%; margin-right:auto; margin-left:auto; }
ul.sidenav ul {display:none;}
ul.sidenav li { width:96%; margin-right:2%; margin-left:2%; }
ul.sidenav ul li { width:100%; margin:0; padding:0; }
ul.sidenav > li > p span { background-image:url(//www.styledart-store.com/img/icon_a1.png); }
ul.sidenav > li > p span.open { background-image:url(//www.styledart-store.com/img/icon_close1.png);  }
ul.sidenav > li > a { background-image:url(//www.styledart-store.com/img/icon_a1.png); }
.sidebnr ul { width:97.34%; padding:0 2.66% 0 0; }
.sidebnr ul li { width:48.67%; float:left; margin-left:1.33%; margin-bottom:1.6%; }
#sidecompany { margin:8% 2%; border:solid 1px #b6b6b6; }
/* フッター */
#footer { clear: both; float: left;	margin-left: 0;	width: 100%; display: block; background:#fff; }
#sitenav li { width:50%; margin:0; border-bottom:solid 2px #a88f7d;}
.pageTop { width: 100%; margin-top:33px; }
.pageTop a { left: -68px; margin-left: 100%; }
#infomation { clear: both; width:90%; margin:5% auto; padding:2.5%; border:solid 1px #ccc; display: block; }
#delivery { width:100%; }
#customer { width:100%; margin-left:0; }
#footercontent { clear: both; background:#f0ecd9; padding:2%; color:#6a5748; }/* フッターショップ情報背景色 */
#corporate { width:100%; margin:4%; }
#mediabox { width:100%; background:#fff; }
#mediabox h4 { margin:4% 3% 1% 3% ; padding-bottom:1%; border-bottom: solid 1px #6a5748; font-size:93%;}
#media { width:100%; float:left; font-size:85%; }
#media ul { margin:0 4%; padding:0; list-style:none; }
#mediabnr { display: none; }
#agrandprize { width:100%; float:right; margin-bottom:2%; text-align:center; background:#fff; }
#grouplink { display: none; }
}