@charset "UTF-8";
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    file: common.css
    共通部分デザイン用
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*
	body
*/
body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 13px;
  color: #4D4D4D;
  line-height: 1.4; }

/*
	headline
	<h1></h1>-<h6></h6>
*/
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.03em;
  padding: 0.5em 0;
  font-weight: bold; }

h1 {
  color: #333333;
  font-size: 22px;
  margin-bottom: 10px;
  padding: 0; }

h1.common-title {
  color: #333;
  font-family: Arial, Meiryo,"メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 16px;
  font-weight: normal;
  zoom: 1;
  position: relative;
  padding: 0.5em 0.4em 0.5em 0.4em;
  border: 1px solid #e2e2e2;
  background: #ffffff;
  /* Old browsers */ }

h1.common-title span {
  /*background:url(../images/common/h4side.jpg) -12px 0 no-repeat;*/
  background: none;
  border-left: 6px solid #9A9A9A;
  margin-left: 8px;
  padding: 0.25em  0 0.25em 0.8em;
  font-weight: normal;
  display: block; }

h1.top-title {
  color: #333;
  font-size: 26px;
  font-weight: normal;
  padding: 0.2em 0 0; }

h2 {
  font-size: 12px; }

h2.cat-list-title {
  width: auto;
  color: #111;
  border-bottom: 1px solid #CCC;
  margin-bottom: 10px;
  padding: 0.4em 0;
  padding-right: 110px;
  font-size: 17px; }

h2.cat-list-title span {
  /*background:url(../images/common/h4side.jpg) -12px 0 no-repeat;*/
  background: none;
  border-left: 6px solid #9A9A9A;
  margin-left: 8px;
  padding: 0.25em  0.1em 0.15em 0.8em;
  font-weight: normal;
  display: block; }

h2.recommend-title {
  width: auto;
  color: #111;
  border-bottom: 1px solid #CCC;
  margin-bottom: 10px;
  padding: 0.4em 0;
  padding-right: 110px;
  font-size: 17px; }

h3 {
  color: #4F4F4F;
  background: #EEE;
  margin-bottom: 10px;
  padding: 0.2em 0.6em;
  font-size: 14px; }

h4 {
  color: #333;
  background: #EEE;
  margin-bottom: 5px;
  padding: 2px 4px 0;
  font-size: 14px; }

h5 {
  color: #555;
  background: url(../images/common/h5common.gif) 0 6px no-repeat;
  margin-bottom: 5px;
  padding: 4px 0 4px 18px;
  font-size: 13px;
  font-weight: normal; }

/*
	link style
*/
a {
  color: #808080;
  text-decoration: underline; }

a:hover, a.hover {
  color: #94C7FF;
  text-decoration: none; }

/* link more */
p.more {
  padding: 0.15em 0;
  text-align: right; }

.more a {
  background: url(../images/common/more.gif) 0 2px no-repeat;
  padding-left: 15px;
  font-weight: bold; }

/*
	p style
*/
p {
  padding-top: 0.5em;
  padding-bottom: 0.5em; }

.read {
  color: #0DA6C6;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 0; }

/* ※印 補足強調用　赤字 */
.attention {
  color: #900;
  font-weight: bold;
  font-size: 11px; }

p.attention {
  /*padding:0.02em 0 0.2em 1em;*/
  text-indent: -1em;
  padding-left: 1em;
  overflow: hidden; }

/* 補足用　黒字 */
.small-attention {
  color: #5A5A5A;
  font-weight: bold;
  font-size: 11px; }

p.small-attention {
  padding-left: 1em;
  text-indent: -1em;
  overflow: hidden; }

p.memo {
  text-align: right;
  font-size: 11px;
  padding: 0; }

p.narrow {
  padding-top: 0.15em;
  padding-bottom: 0.15em; }

.conts_image img {
  padding: 10px 0.2em; }

/*
	table style
*/
table {
  background: none;
  border-collapse: collapse;
  margin: 0 0 10px; }

table th,
table td {
  border: 1px solid #CCC;
  padding: 0.6em 0.8em;
  vertical-align: top; }

table th {
  background: #D9EBF4;
  font-weight: bold;
  text-align: left; }

.exterior-content table th {
  background: #D9EBF4; }

.material-content table th {
  background: #F7E1EE; }

.garden-content table th {
  background: #EBE5DD; }

.living-content table th {
  background: #F4ECC6; }

.i-na-content table th {
  background: #D9EAE4; }

table.max {
  width: 100%; }

table.head-center th {
  text-align: center; }

/*
	dl style
*/
dl {
  width: 100%;
  margin: 0 auto; }

dt {
  padding: 10px 0 0; }

dd {
  padding: 4px 0 5px; }

/*
	ul style
*/
ul {
  margin: 6px 8px;
  list-style: none; }

li {
  list-style: none;
  padding: 2px 0 2px 12px; }

ul.horizontal {
  margin: 0;
  padding: 4px 0 6px; }

ul.horizontal li {
  background: none;
  margin: 0;
  padding: 0 0.5em 0 0;
  display: inline; }

/*
	ol style
*/
ol {
  margin: 2px 10px 2px 36px; }

ol li {
  background: none;
  line-height: 1.5;
  list-style: decimal;
  padding: 3px 0; }

ol li li {
  list-style: katakana-iroha; }

/* strong style */
em {
  font-weight: bold; }

strong {
  font-weight: bold; }

/* del style */
del {
  text-decoration: overline; }

/* code style */
/* blockquote style */
blockquote {
  width: 80%;
  margin: 0 auto;
  padding: 1em;
  border: 1px dashed #ccc;
  background: #f6f6f6;
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

cite {
  font-style: normal; }

cite:before {
  content: "“"; }

cite:after {
  content: "”"; }

/* sup-sub style */
sup {
  font-size: 9px;
  vertical-align: text-top; }

sub {
  font-size: 9px;
  vertical-align: text-bottom; }

/* form */
label {
  color: #005F91;
  font-weight: bold;
  margin: 0.2em 0.3em; }

input,
textarea,
select {
  background: #FFF;
  border: 1px solid #ADB6AB;
  margin: 0.2em 0.3em;
  padding: 0.15em 0.25em;
  vertical-align: middle; }

textarea {
  font-size: 12px; }

optgroup {
  margin: 0.5em; }

optgroup option {
  margin: 0.2em 1.5em; }

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

.btn-box input,
input.no-btn {
  background: none;
  border: none; }

label input {
  background: none;
  border: none;
  margin: 0em 0.3em 0.3em; }

/* text colot style */
.red {
  color: #cc0000; }

/* ==========================
 = ページトップボタン
 ============================ */
#page-top {
  position: fixed;
  bottom: 0px;
  right: 20px;
  font-size: 77%;
  opacity: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  z-index: -1; }
  #page-top.show {
    opacity: 1;
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
    z-index: 50; }
  #page-top a {
    background: #111 url(../images/common/pagetop.png) 50% 50% no-repeat;
    text-decoration: none;
    color: #fff;
    width: 50px;
    height: 50px;
    padding: 0;
    text-align: center;
    display: block;
    border-radius: 10px;
    -webkit-transition: all .5s;
    transition: all .5s;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
    #page-top a:hover {
      background-color: #888; }

/* Retina指定（背景画像） */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #page-top a {
    background-image: url("../images/common_l/pagetop.png");
    background-size: 19px 22px; } }

/* img float style */
.colmun-left {
  float: left;
  padding-top: 8px;
  padding-right: 10px;
  font-size: 11px;
  text-align: center; }

.colmun-right {
  float: right;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 11px;
  text-align: center; }

.colmun-center {
  padding-top: 8px;
  font-size: 11px;
  text-align: center; }

.colmun-left img,
.colmun-right img,
.colmun-center img {
  padding-bottom: 5px; }

.colmun-left p,
.colmun-right p {
  padding-top: 0;
  padding-bottom: 10px; }

/* Googlemap */
#map {
  margin: 15px auto 20px; }

#map2 {
  margin: 15px auto 20px; }

.map {
  clear: both;
  width: 534px;
  height: 400px;
  background: #DDD;
  margin: 0 auto; }

.mapError {
  color: #FF0000;
  background: none !important; }

/* スプライト画像 */
.sprite {
  background-image: url(../images/common/sprite.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    file: form.css
    フォームデザイン用
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
input,
textarea,
select,
option,
optgroup,
button,
legend,
fieldset {
  box-sizing: border-box;
  outline: none;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 13px;
  color: #4D4D4D;
  vertical-align: top;
  display: block;
  margin: 10px 0; }

label {
  display: block;
  margin: 10px 0; }

/* Input & Textarea ------------------ */
/* Fields with standard width */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
input[list],
input[type="file"],
select,
textarea {
  width: 100%;
  max-width: 400px;
  padding: 6px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #adb6ab; }

/* Fields with standard height */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"],
input[list] {
  height: 30px;
  -webkit-appearance: none; }

input.numeric {
  width: 60px;
  display: inline-block; }

span.numeric-label {
  padding: 10px;
  display: inline-block; }

/* Other */
textarea {
  -webkit-appearance: none;
  overflow: auto; }

input[type="checkbox"],
input[type="radio"] {
  border: none;
  background-color: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em; }

/* Select ------------------ */
select {
  height: 30px; }

select[multiple] {
  height: auto;
  min-height: 30px;
  padding: 0; }

select[multiple] option {
  margin: 0;
  padding: 6px; }

/* Fieldset ------------------ */
fieldset {
  padding: 10px 25px;
  border-radius: 3px;
  border: 1px solid #adb6ab; }

legend {
  padding: 0 5px;
  font-weight: 700; }

/* Buttons, Input Type Submit/Reset ------------------ */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"] {
  height: 40px;
  width: 100%;
  max-width: 200px;
  background-color: #FDF3F0;
  padding: 6px;
  cursor: pointer;
  color: #4D4D4D;
  font-weight: 700;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 3px;
  border: 1px solid #adb6ab; }

input[type="image"] {
  text-align: center;
  padding: 6px; }

/* States ------------------ */
input[disabled],
textarea[disabled],
select[disabled],
option[disabled],
button[disabled] {
  cursor: not-allowed; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
option:focus {
  background-color: #FDF3F0;
  border-color: #adb6ab; }

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: #adb6ab solid 2px; }

/* =================================
= CSSボタン装飾 ＆ アイコン
==================================== */
.css3btn, input.css3btn, button.css3btn, a.css3btn {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal; }
  .css3btn:hover, input.css3btn:hover, button.css3btn:hover, a.css3btn:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

.css3btn-arrow, input.css3btn-arrow, button.css3btn-arrow, a.css3btn-arrow {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal;
  background-image: url("../images/common/arrow_w.png");
  background-position: 12px 50%;
  background-repeat: no-repeat;
  padding-left: 24px; }
  .css3btn-arrow:hover, input.css3btn-arrow:hover, button.css3btn-arrow:hover, a.css3btn-arrow:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .css3btn-arrow, input.css3btn-arrow, button.css3btn-arrow, a.css3btn-arrow {
    background-image: url("../images/common_l/arrow_w.png");
    background-size: 5px 8px; } }

.css3btn-s, input.css3btn-s, button.css3btn-s, a.css3btn-s {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal;
  padding: 4px 12px 4px 24px;
  font-size: 12px; }
  .css3btn-s:hover, input.css3btn-s:hover, button.css3btn-s:hover, a.css3btn-s:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

.css3btn-block, input.css3btn-block, button.css3btn-block, a.css3btn-block {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal;
  display: block;
  text-align: center; }
  .css3btn-block:hover, input.css3btn-block:hover, button.css3btn-block:hover, a.css3btn-block:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

.css3btn-white, input.css3btn-white, button.css3btn-white, a.css3btn-white {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal;
  color: #4D4D4D;
  background-color: #ffffff;
  border: 1px solid #cccccc; }
  .css3btn-white:hover, input.css3btn-white:hover, button.css3btn-white:hover, a.css3btn-white:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

.css3btn-white-arrow, input.css3btn-white-arrow, button.css3btn-white-arrow, a.css3btn-white-arrow {
  color: #ffffff;
  margin: 5px 0;
  padding: 6px 12px;
  background-color: #359AC5;
  border: 1px solid #0B8CC0;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 60px;
  font-weight: normal;
  background-image: url("../images/common/arrow_w.png");
  background-position: 12px 50%;
  background-repeat: no-repeat;
  padding-left: 24px;
  color: #4D4D4D;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  background-image: url("../images/common/arrow_b.png"); }
  .css3btn-white-arrow:hover, input.css3btn-white-arrow:hover, button.css3btn-white-arrow:hover, a.css3btn-white-arrow:hover {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .css3btn-white-arrow, input.css3btn-white-arrow, button.css3btn-white-arrow, a.css3btn-white-arrow {
    background-image: url("../images/common_l/arrow_b.png");
    background-size: 5px 8px; } }

.css3btn-active, input.css3btn-active, button.css3btn-active, a.css3btn-active {
  background-color: #eee; }

span.i-search {
  background: url("../images/icon/i_search2.png") 50% 0 no-repeat;
  width: 18px;
  height: 16px;
  padding: 0 20px 0 0;
  margin-left: -10px;
  display: inline-block;
  vertical-align: middle; }

/* Retina指定（背景画像） */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  span.i-search {
    background-image: url("../images/icon_l/i_search2.png");
    background-size: 16px 16px; } }

/* = ALL */
/* = Head */
#Header {
  overflow: hidden; }
  #Header #HeadInner {
    width: 94%;
    max-width: 1120px;
    margin: 0 auto;
    padding-top: 5px;
    overflow: hidden; }
  #Header #Logo {
    float: left;
    width: 80%;
    padding-top: 5px;
    padding-bottom: 10px;
    overflow: hidden;
    font-size: 17px; }
    #Header #Logo a {
      float: left;
      color: #333;
      text-decoration: none;
      margin-right: 15px; }
    #Header #Logo span {
      padding-top: 14px;
      display: block; }
  #Header #MenuBtn {
    display: none; }

/* = Topic Path */
#TopicPath {
  clear: both;
  color: #FFF;
  background: #B5B5B5;
  margin-bottom: 20px;
  font-size: 13px;
  overflow: hidden; }
  #TopicPath #TopicInner {
    width: 94%;
    max-width: 1120px;
    margin: 0 auto;
    overflow: hidden; }
  #TopicPath ul {
    float: left;
    margin: 0;
    padding: 10px 0; }
  #TopicPath li {
    float: left;
    margin: 0;
    padding: 3px 0; }
    #TopicPath li:before {
      content: '>';
      padding: 10px; }
    #TopicPath li a {
      color: #FFF; }
    #TopicPath li span {
      padding: 0 0.5em;
      font-weight: bold; }
    #TopicPath li#Home {
      /* Retina指定（背景画像） */ }
      #TopicPath li#Home:before {
        content: '';
        padding: 0; }
      #TopicPath li#Home a {
        background-position: 0 0;
        background-repeat: no-repeat;
        display: block;
        white-space: nowrap;
        text-indent: 100%;
        overflow: hidden;
        background-image: url(../images/icon/i_home.png);
        width: 12px;
        height: 16px; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        #TopicPath li#Home a {
          background-image: url("../images/icon_l/i_home.png");
          background-size: 12px 16px; } }

/* = Contents */
#Contents {
  width: 94%;
  max-width: 1120px;
  margin: 0 auto 30px;
  overflow: hidden; }

#MainConts {
  float: right;
  width: 100%;
  margin-left: -280px;
  overflow: hidden; }

#MainInner {
  margin-left: 280px; }

#SubConts {
  float: left;
  width: 236px;
  overflow: hidden; }

.entrybody {
  clear: both;
  margin-bottom: 20px;
  overflow: hidden; }

/* = Footer */
#Footer {
  width: 94%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 20px;
  border-top: 1px solid #CCC;
  font-size: 11px;
  text-align: center;
  overflow: hidden; }

#Footer p {
  padding: 0.8em 0 0; }

/* = ログイン画面 */
#LoginForm {
  width: 760px;
  margin: 30px auto 10px; }

#LoginForm h1 {
  color: #333;
  background: none;
  border: none;
  padding: 6px 0;
  font-size: 28px;
  text-align: center; }

.login-box,
.select-box {
  background: #EEE;
  padding: 10px 0;
  overflow: hidden; }

.select-box {
  background: #EEE;
  padding: 0; }

.login-input {
  width: 364px;
  margin: 40px auto 20px;
  font-size: 14px;
  overflow: hidden; }

.login-input dl {
  padding: 0.5em 0; }

.login-input dl dt {
  clear: left;
  float: left;
  width: 110px;
  margin: 0;
  padding: 0.6em 0.4em; }

.login-input dl dd {
  margin: 0;
  padding: 0.5em 0; }

.login-input dl dt label {
  color: #006641; }

.login-input dl dd input {
  width: 200px;
  margin: 0; }

.login-btn {
  margin-bottom: 30px;
  text-align: center;
  overflow: hidden; }

.login-btn input {
  border: none;
  background: none; }

.login-text {
  margin: 20px 0 10px;
  padding-top: 10px;
  overflow: hidden; }

.login-text dt {
  clear: left;
  float: left;
  width: 110px;
  color: #006641;
  font-size: 15px;
  font-weight: bold;
  padding: 0.5em 0; }

.login-text dd {
  padding: 0.6em 0 0.6em 120px; }

/* = カタログ選択画面 */
.cover-box {
  padding: 20px 0 0 20px;
  overflow: hidden; }

.cover-box div {
  padding: 0 0 20px; }

.cover-box div a:hover {
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6; }

/* = SideArea */
#SubConts {
  /* Retina指定（背景画像） */
  /* Retina指定（背景画像） */ }
  #SubConts #SideMenu {
    width: 234px;
    margin-bottom: 20px;
    overflow: hidden; }
  #SubConts h3, #SubConts h4 {
    clear: both;
    background: none;
    border: none;
    margin: 0 0 15px;
    padding: 0; }
  #SubConts h3#title-search {
    color: #FFF;
    background: #B5B5B5;
    text-align: center;
    padding: 10px 0;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.5em; }
  #SubConts h4 {
    border: 1px solid #DDD;
    font-size: 15px; }
    #SubConts h4 span, #SubConts h4 a {
      color: #333;
      border-left: 4px solid #888888;
      margin: 7px 10px;
      padding: 0.15em 0.3em 0.06em 0.6em;
      font-weight: normal;
      text-decoration: none;
      display: block; }
  #SubConts h5 {
    clear: both;
    margin: 0 7px 10px;
    font-size: 14px;
    padding: 6px 0; }
  #SubConts .accordion-head {
    font-size: 14px;
    background-color: #EEE;
    background-image: url(../images/common/h5_open.png);
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding: 6px 0 6px 28px;
    margin: 0 7px 10px;
    cursor: pointer; }
    #SubConts .accordion-head.hover {
      color: #94C7FF; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #SubConts .accordion-head {
      background-image: url("../images/common_l/h5_open.png");
      background-size: 10px 10px; } }
  #SubConts .box-open {
    background-image: url("../images/common/h5_close.png"); }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #SubConts .box-open {
      background-image: url("../images/common_l/h5_close.png");
      background-size: 10px 2px; } }
  #SubConts .side-box {
    margin-bottom: 20px;
    font-size: 12px;
    overflow: hidden; }

/* SideArea　検索ボックス */
#Search .keyword-box {
  margin: 15px 0 15px 7px;
  overflow: hidden;
  /* Retina指定（背景画像） */ }
  #Search .keyword-box input {
    float: left;
    width: 80%;
    width: 98%;
    height: 28px;
    border-radius: 3px 0 0 3px;
    border-radius: 3px;
    margin: 0;
    padding: 0 0.25em; }
    #Search .keyword-box input:placeholder-shown {
      color: #ccc; }
    #Search .keyword-box input::-webkit-input-placeholder {
      color: #ccc; }
    #Search .keyword-box input:-moz-placeholder {
      color: #ccc;
      opacity: 1; }
    #Search .keyword-box input::-moz-placeholder {
      color: #ccc;
      opacity: 1; }
    #Search .keyword-box input:-ms-input-placeholder {
      color: #ccc; }
  #Search .keyword-box button.icon-search {
    width: 32px;
    height: 28px;
    background: #333 url(../images/icon/i_search2.png) 50% 50% no-repeat;
    border: none;
    border-radius: 0 3px 3px 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #Search .keyword-box button.icon-search {
      background-image: url("../images/icon_l/i_search2.png");
      background-size: 16px 16px; } }

#Search .search-box {
  margin: 0; }

#Search dl {
  width: auto;
  margin: 0 7px;
  padding: 0;
  font-size: 13px; }

#Search dt {
  color: #000;
  margin: 0;
  padding: 0.4em 0 0.3em;
  font-weight: bold; }

#Search dd {
  margin: 0 0 5px;
  padding: 0; }

#Search dl label {
  color: #555;
  margin: 0;
  padding: 0.2em 0;
  font-weight: normal;
  display: block; }

#Search dl input {
  margin: 0.2em 0 0.3em;
  padding: 0.1em 0.25em; }

#Search dl input.check {
  width: auto;
  margin: 0 0.3em 0 0;
  padding: 0 0.25em; }

#Search dl.page-search {
  margin: 0 0 0 7px; }

#Search dl.page-search label {
  display: inline;
  padding-right: 8px; }

#Search .side-btn-box {
  text-align: center;
  margin: 0 6px; }
  #Search .side-btn-box button {
    width: 100%;
    max-width: 600px;
    font-size: 14px;
    margin: 5px auto;
    padding: 8px 12px; }

/* SideArea　サイドメニュー */
#SubConts #Menu ul {
  margin: 8px 0 20px 14px;
  font-size: 13px; }
  #SubConts #Menu ul li {
    background: none;
    border: none;
    margin: 0;
    padding: 4px 0; }
    #SubConts #Menu ul li a {
      display: block; }

#SubConts ul.side-list li {
  padding: 2px 0 2px 6px; }

/* SideArea　バナー */
.banner {
  margin-bottom: 10px;
  text-align: center; }

/* ==========================
 = SideArea　開閉スタイル
 ============================ */
/* サイドオープン時にメインコンテンツを覆う部分 */
.overlay {
  content: '';
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 3; }
  .overlay::after {
    visibility: hidden;
    position: fixed;
    top: 40%;
    right: 0;
    display: block;
    width: 100%;
    height: 50px;
    color: rgba(255, 255, 255, 0);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    -webkit-transition: all .5s ease;
    transition: all .5s ease; }

/* サイドオープン時スタイル */
body.side-open .overlay {
  visibility: visible;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.7); }
  body.side-open .overlay::after {
    visibility: visible;
    color: rgba(255, 255, 255, 0.8); }

body.side-open #show {
  position: fixed; }

body.side-open #SubConts {
  -webkit-transform: translate3d(600px, 0, 0);
  transform: translate3d(600px, 0, 0);
  z-index: 60; }
  body.side-open #SubConts #SideMenu {
    overflow: scroll;
    width: 100%;
    height: 100%; }
  body.side-open #SubConts h3#title-search {
    background-color: #3a3a3a;
    padding: 20px 0; }
  body.side-open #SubConts .side-box {
    margin: 0 20px 20px; }
    body.side-open #SubConts .side-box ul.side-list li {
      width: 48%;
      display: inline-block; }
  body.side-open #SubConts #Menu .side-cat-tree {
    float: left;
    width: 50%; }
  body.side-open #SubConts #Menu ul {
    margin: 8px 6px 0 18px; }

/* 開閉用ボタン ※ボタンの細かいスタイルは省略 */
.side-close-btn {
  position: absolute;
  top: 14px;
  right: 28px;
  width: 28px;
  height: 30px;
  padding: 5px;
  z-index: 4; }
  .side-close-btn .ellipsis-v {
    position: relative;
    width: 28px;
    height: 28px;
    cursor: pointer; }
  .side-close-btn .line-top, .side-close-btn .line-bottom {
    position: absolute;
    top: 0;
    background: #fff none repeat scroll 0 0;
    height: 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    width: 36px; }
  .side-close-btn .line-bottom {
    top: 25px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom 0;
    transform-origin: left bottom 0; }

/* -------------------------------
　= トップページ
　= 使い方ガイド
　= カラーシミュレーション
　= イメージ画像一覧
　= 最近チェックした商品
　= 販売店舗
 ------------------------------- */
/* =================================
= トップページ
==================================== */
.howto-guide {
  position: absolute;
  top: 2px;
  right: 0;
  overflow: hidden; }

.category-box {
  float: left;
  width: 100%;
  margin-top: 12px;
  margin-right: 2%; }
  .category-box div {
    overflow: hidden; }

.category-catalog {
  float: left;
  margin-right: 15px;
  margin-top: 10px; }

.category-list {
  width: 100%;
  overflow: hidden;
  position: relative; }
  .category-list ul, .category-list ol {
    width: 45%;
    float: left;
    margin-top: 5px; }
  .category-list ol {
    margin: 5px 0 0 0;
    padding-left: 32px; }
  .category-list ul li, .category-list ol li {
    padding: 6px 0 6px 10px; }
  .category-list ol li {
    list-style-type: decimal-leading-zero;
    padding-left: 5px;
    color: #a3a3a3; }

/* =================================
= 使い方ガイド
==================================== */
body.guide-body #Show {
  position: relative;
  max-width: 340px;
  width: 100%;
  margin: 0 auto; }

#guide-close {
  position: absolute;
  top: 12px;
  right: 12px; }
  #guide-close .sprite {
    width: 86px;
    height: 19px;
    background-position: -920px -200px; }
  #guide-close a:hover {
    background-position: -920px -219px; }

div.guide-body {
  width: 100%;
  background: #EEEEEE;
  padding: 0 0 10px;
  display: none; }
  div.guide-body .entrybody {
    max-width: 680px;
    width: 98%;
    margin: 10px auto; }

.guide-block {
  margin: 10px 0 0 0;
  overflow: hidden; }
  .guide-block .guide-box {
    float: left;
    width: 42%;
    padding: 0 4% 0; }
    .guide-block .guide-box h2 {
      border-bottom: 1px solid #aaa;
      margin: 0 0 4px;
      padding: 2px 0 5px;
      font-size: 16px;
      font-weight: normal; }
  .guide-block .first-box {
    border-right: 1px solid #888;
    margin-right: -1px; }
  .guide-block .last-box {
    border-left: 1px solid #888;
    margin-right: -1px; }

p.read-guide {
  background: #d8d8d8;
  font-size: 17px;
  padding: 8px 10px;
  text-align: center; }

.guide-img {
  background: #fff;
  margin: 8px 0;
  padding: 8px; }
  .guide-img img {
    max-width: 100%; }

.guide-close {
  background: #000;
  font-size: 18px;
  padding: 8px 0;
  text-align: center;
  cursor: pointer; }
  .guide-close:hover {
    background: #111; }
  .guide-close a {
    color: #ccc;
    text-decoration: none;
    display: block; }
    .guide-close a:hover {
      color: #999; }

/* 開閉用ボタン */
.guide-close-btn {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 42px;
  height: 36px;
  padding: 5px;
  margin: 0 auto;
  z-index: 4; }
  .guide-close-btn .ellipsis-v {
    position: relative;
    width: 36px;
    height: 36px;
    cursor: pointer; }
  .guide-close-btn .line-top, .guide-close-btn .line-bottom {
    position: absolute;
    top: 0;
    background: #fff none repeat scroll 0 0;
    height: 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    width: 36px; }
  .guide-close-btn .line-bottom {
    top: 24px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom 0;
    transform-origin: left bottom 0; }

#TB_window {
  border: 3px solid #999; }
  #TB_window iframe {
    margin: 0;
    padding: 0; }

#TB_overlay {
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  opacity: 0.3; }

#TB_title {
  /*display:none;*/ }

#TB_title_custom {
  color: #333;
  width: 100%;
  background: url(../images/common/h4side.jpg) -6px 4px no-repeat;
  border: none;
  border-bottom: 1px solid #DDD;
  margin-bottom: 10px;
  padding: 3px 0 0;
  font-size: 15px;
  font-weight: normal;
  font-family: Meiryo,"メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  overflow: hidden; }
  #TB_title_custom #TB_ajaxWindowTitle {
    padding: 8px 0 8px 28px; }
  #TB_title_custom #TB_closeAjaxWindow {
    padding: 10px 10px 5px 0; }
  #TB_title_custom a#TB_closeWindowButton {
    background-image: url(../images/common/sprite.png);
    background-position: -920px -200px;
    background-repeat: no-repeat;
    display: block;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    width: 86px;
    height: 19px; }
  #TB_title_custom a#TB_closeWindowButton:hover {
    background-position: -920px -219px; }

/* =================================
= カラーシミュレーション
==================================== */
.loading {
  position: absolute;
  top: 50%;
  left: 396px;
  display: none; }

.loading2 {
  margin: 150px 0 0 106px;
  display: none; }

#Simulation {
  position: relative;
  width: 1000px;
  height: 500px;
  margin: 0 auto; }
  #Simulation .comment {
    position: absolute;
    bottom: 0px;
    left: 13px; }
  #Simulation h1.common-title {
    width: 100%;
    border: none;
    border-bottom: 1px solid #DDD;
    padding-top: 3px; }
  #Simulation h1.common-title span {
    background-position: -6px 0;
    padding-left: 1.8em; }
  #Simulation h2 {
    clear: left; }

#guide-close {
  position: absolute;
  top: 12px;
  right: 12px; }

#guide-close .sprite {
  width: 86px;
  height: 19px;
  background-position: -920px -200px; }

#guide-close a:hover {
  background-position: -920px -219px; }

#main-simulation {
  position: relative;
  float: left;
  width: 600px;
  height: 420px;
  margin: 10px 0px 10px 10px; }
  #main-simulation .img-liquid {
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0; }

#nav-simulation {
  float: right;
  width: 365px;
  margin-right: 10px;
  overflow: hidden; }
  #nav-simulation ul {
    clear: left;
    width: 370px;
    margin: 0 0 20px;
    overflow: hidden; }
  #nav-simulation ul li {
    float: left;
    width: 70px;
    height: 76px;
    margin: 0;
    padding: 0 3px 0 0; }
  #nav-simulation ul li p {
    line-height: 1.2;
    font-size: 10px; }
  #nav-simulation ul li a {
    display: block;
    overflow: hidden;
    height: 40px;
    width: 70px;
    margin: 0 0 3px 0; }
  #nav-simulation ul li a:hover {
    -ms-filter: "alpha(opacity=80)";
    opacity: .8; }

/* =================================
= イメージ画像一覧
==================================== */
.search-img ul {
  width: 660px;
  margin: 0;
  overflow: hidden; }

.search-img ul li {
  float: left;
  width: 214px;
  height: 214px;
  background: #F3F3F3;
  margin: 0 6px 6px 0;
  padding: 0; }

/* =================================
= 最近チェックした商品
==================================== */
.recommend-box {
  margin-top: 20px; }

/* =================================
= 販売店舗
==================================== */
h1.link-title {
  color: #333;
  padding: 25px 12px 25px 36px;
  font-family: Arial, Meiryo,"メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 26px;
  font-weight: normal;
  zoom: 1;
  position: relative;
  border: 1px solid #e2e2e2;
  background: #ffffff;
  /* Old browsers */ }

h1.link-title::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 8px;
  height: calc(100% - 1em);
  background-color: #9A9A9A; }

.link-box {
  padding-top: 10px;
  padding-bottom: 30px;
  overflow: hidden;
  /* Retina指定（背景画像） */ }
  .link-box ul {
    width: 101%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow: hidden; }
  .link-box li {
    float: left;
    width: 32.33%;
    margin-right: 1%;
    margin-bottom: 1%;
    padding: 0; }
  .link-box li a {
    color: #333;
    background: url("../images/icon/i_link.png") 95% 50% no-repeat;
    border: 1px solid #CCC;
    box-sizing: border-box;
    padding: 30px 20px;
    zoom: 1;
    display: block;
    cursor: pointer; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .link-box li a {
      background-image: url("../images/icon_l/i_link.png");
      background-size: 16px 16px; } }
  .link-box li a.hover {
    border-color: #DDD;
    zoom: 1;
    cursor: pointer;
    display: block; }

/* -------------------------------
　= 商品一覧（ソート・表示形式）
　= 商品一覧（検索結果）
　= ページネーション
　= キーワードからさがす
	キーワードからさがす（リスト表示）
	キーワードからさがす（写真表示）
	キーワードからさがす（各パーツ装飾）
　= カテゴリからさがす
　= コレクション
 ------------------------------- */
/* =================================
= 商品一覧（ソート・表示形式）
==================================== */
.index-nav {
  width: 100%;
  border-bottom: 1px solid #CCC;
  overflow: hidden; }

.sort-spec {
  float: left;
  width: 300px;
  padding-top: 10px; }

.sort-spec a {
  text-decoration: none; }

ul#SortTab {
  float: left;
  margin: 0;
  padding: 8px 0 0;
  overflow: hidden; }
  ul#SortTab li {
    float: left;
    background: none;
    margin: 0 3px 0 0;
    padding: 0; }
  ul#SortTab a.sprite {
    width: 101px;
    height: 26px; }
  ul#SortTab li#SortList a.sprite {
    background-position: -246px -50px; }
  ul#SortTab li#SortMore a.sprite {
    background-position: -347px -50px; }
  ul#SortTab li#SortList a.current {
    background-position: -246px -77px; }
  ul#SortTab li#SortMore a.current {
    background-position: -347px -77px; }
  ul#SortTab li#SortList a.sprite:hover {
    background-position: -246px -77px; }
  ul#SortTab li#SortMore a.sprite:hover {
    background-position: -347px -77px; }

ul.disp-select {
  float: right;
  margin: 0;
  padding: 0 0 6px; }
  ul.disp-select li {
    float: left;
    background: none;
    margin: 0;
    padding: 0; }
    ul.disp-select li a {
      border: 1px solid #ccc;
      margin-left: -1px;
      padding: 6px 20px;
      text-decoration: none;
      display: block; }
    ul.disp-select li a.select {
      color: #fff;
      background-color: #333;
      border-color: #333; }
  ul.disp-select li#dispList a.sprite {
    width: 82px;
    height: 28px;
    background-position: 0 -50px; }
  ul.disp-select li#dispPhoto a.sprite {
    width: 84px;
    height: 28px;
    background-position: -82px -50px; }
  ul.disp-select li#dispList a.current {
    background-position: 0 -78px; }
  ul.disp-select li#dispPhoto a.current {
    background-position: -82px -78px; }
  ul.disp-select li#dispList a.sprite:hover {
    background-position: 0 -78px; }
  ul.disp-select li#dispPhoto a.sprite:hover {
    background-position: -82px -78px; }

/* =================================
= 商品一覧（検索結果）
==================================== */
.search-nav {
  border-bottom: 1px solid #CCC;
  padding: 0 5px;
  overflow: hidden; }
  .search-nav dt {
    float: left;
    padding: 10px 20px 10px 0; }
  .search-nav dd {
    float: left;
    padding: 10px 10px 10px 0; }

/* =================================
= ページネーション
==================================== */
.yui-pg-container {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: right; }
  .yui-pg-container a {
    text-decoration: none; }

.yui-pg-first,
.yui-pg-previous {
  padding-right: 0.4em; }

.yui-pg-next,
.yui-pg-last {
  padding-left: 0.4em; }

.yui-pg-pages {
  padding: 0 0.6em; }

.yui-pg-page {
  margin: 0 0.2em;
  padding: 0.2em 0.4em; }

span.yui-pg-page {
  color: #FFF;
  background: #747474;
  border: 1px solid #747474; }

a.yui-pg-page {
  border: 1px solid #808080; }

/* =================================
= キーワードからさがす
==================================== */
.item-box a {
  text-decoration: none; }

/* キーワードからさがす（リスト表示） */
.search-list .item-box {
  position: relative;
  width: 100%;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #CCC;
  padding: 10px 0;
  overflow: hidden;
  display: table; }

.search-list .hover {
  border-bottom-color: #DDD;
  zoom: 1;
  cursor: pointer; }
  .search-list .hover .item-img,
  .search-list .hover .item-text {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75; }

.search-list .item-img {
  width: 90px;
  height: 90px;
  display: table-cell;
  position: relative;
  vertical-align: middle; }
  .search-list .item-img img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle; }

.search-list .item-text {
  padding-left: 10px;
  font-size: 13px;
  height: 90px;
  display: table-cell;
  vertical-align: middle; }

/* コレクション装飾 */
.search-list-collection .item-box {
  background: #EFEFEF; }

.search-list-collection .item-text {
  color: #333; }

.icon-box {
  position: absolute;
  top: 10px;
  left: 116px; }

span.i-new-list,
span.i-pick-list {
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background-image: url(../images/icon/i_new.png);
  width: 34px;
  height: 34px;
  margin-bottom: 6px; }

span.i-pick-list {
  background-image: url(../images/icon/i_pick.png); }

/* Retina指定（背景画像） */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  span.i-new-list {
    background-image: url("../images/icon_l/i_new.png");
    background-size: 34px 34px; }
  span.i-pick-list {
    background-image: url("../images/icon_l/i_pick.png");
    background-size: 34px 34px; } }

/* キーワードからさがす（写真表示） */
.search-photo {
  width: 100%;
  padding-top: 10px;
  overflow: hidden; }
  .search-photo .items {
    letter-spacing: -.40em;
    /* 文字間を詰めて隙間を削除する */
    margin-left: auto;
    margin-right: auto; }
  .search-photo .item-box {
    letter-spacing: normal;
    /* 文字間を通常に戻す */
    position: relative;
    /*float:left;*/
    width: 204px;
    /* 4列 */
    /*width:162px;*/
    /* 5列 */
    border: 0 solid #CCC;
    /*margin-top:1%;
		margin-right:1%;*/
    margin: 3px;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top; }
    .search-photo .item-box a {
      zoom: 1;
      display: block;
      cursor: pointer; }
  .search-photo .hover {
    border-color: #DDD;
    zoom: 1;
    cursor: pointer; }
    .search-photo .hover .item-img,
    .search-photo .hover .item-text {
      opacity: 0.75;
      filter: alpha(opacity=75);
      -moz-opacity: 0.75; }
  .search-photo .item-img {
    width: 150px;
    height: 150px;
    background: #FFF;
    border-top: 10px solid #FFF;
    margin: 0 auto 10px;
    text-align: center;
    position: relative; }
    .search-photo .item-img img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; }
  .search-photo .item-text {
    padding-bottom: 10px; }

/* コレクション */
.search-photo-collection .item-box {
  background: #EFEFEF; }

.search-photo-collection .item-img {
  border-color: #747474; }

.search-photo-collection .item-text {
  color: #333; }

.search-photo .icon-box {
  position: absolute;
  top: 20px;
  left: 10px; }

/* キーワードからさがす（各パーツ装飾） */
.item-text h2 {
  color: #4E4E4E;
  background: none;
  margin: 5px 0 0;
  padding: 0; }

.item-text .item-code {
  padding: 0em 0.6em; }
  .item-text .item-code span {
    color: #808080;
    font-size: 12px;
    padding: 0em 0.2em; }
  .item-text .item-code span.order {
    color: #359AC5; }
  .item-text .item-code span.green {
    color: #489F2F; }

.search-list .item-text h2 {
  font-size: 13px; }

.search-list .item-text .item-code {
  padding: 0;
  margin-left: -0.15em; }

/* コレクション装飾 */
.search-list-collection .item-text h2 {
  color: #FFF;
  background: #747474;
  padding: 0.2em 0.8em; }

.search-photo .item-text h2 {
  margin: 0;
  padding: 0.3em 0.8em;
  font-size: 13px; }

/* コレクション装飾 */
.search-photo-collection .item-text h2 {
  color: #FFF;
  background: #747474; }

.search-photo .item-text p {
  padding: 0.2em 0.8em; }

#Contents .item-text p.price {
  color: #000;
  padding: 0.3em 0.8em 0.1em; }

#Contents .search-list .item-text p.price {
  color: #000;
  padding: 0.5em 0em 0.1em; }

.item-text p.price span {
  font-weight: bold; }

/* =================================
= カテゴリからさがす
==================================== */
h1.cat-title {
  color: #333;
  /*background: url(../images/common/h_cat.jpg) 0 0 no-repeat;*/
  padding: 25px 12px 25px 36px;
  font-family: Arial, Meiryo,"メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 26px;
  font-weight: normal;
  zoom: 1;
  position: relative;
  border: 1px solid #e2e2e2;
  background: #ffffff;
  /* Old browsers */ }

h1.cat-title::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 8px;
  height: calc(100% - 1em);
  background-color: #9A9A9A; }

div.cat-title {
  margin-bottom: 15px; }

a.btn-catalog {
  width: 80px;
  height: 24px;
  background-position: -480px 0; }
  a.btn-catalog:hover {
    background-position: -480px -24px; }

div.cat-title h2 {
  color: #555;
  background: none;
  border-bottom: 1px solid #cccccc;
  margin: 0 0 5px;
  padding: 0 5px 5px;
  font-family: Arial, Meiryo,"メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 22px; }

div.cat-title span {
  color: #888;
  padding-left: 0.1em;
  font-weight: normal;
  display: block; }

/* カテゴリからさがす（レイアウト） */
.cat-box {
  padding-top: 10px;
  padding-bottom: 30px;
  overflow: hidden; }

.cat-img {
  /* 2013/02/19 Editer by Ikeda */
  margin-bottom: 10px;
  overflow: hidden; }

.cat-box .items {
  width: 101%;
  overflow: hidden; }

.cat-box .item-box {
  position: relative;
  float: left;
  width: 49%;
  border: 1px solid #CCC;
  box-sizing: border-box;
  margin-right: 1%;
  margin-bottom: 1%;
  padding: 8px;
  overflow: hidden; }

.cat-box div.hover {
  border-color: #DDD;
  zoom: 1;
  cursor: pointer;
  display: block; }

.cat-box div.hover .item-img,
.cat-box div.hover .item-text {
  opacity: 0.75;
  filter: alpha(opacity=75);
  -moz-opacity: 0.75; }

.cat-box .item-box a {
  zoom: 1;
  display: block;
  cursor: pointer; }

.cat-box .item-img {
  float: left;
  /*width:120px;*/
  width: 40%;
  margin-right: 2%; }

.cat-box .item-img img {
  max-width: 100%;
  width: 150px; }

.cat-box .item-text {
  float: right;
  /*width:170px;*/
  width: 58%;
  color: #4D4D4D;
  font-size: 13px;
  padding: 10px 0 30px; }

.cat-box .item-text h3 {
  color: #333;
  background: none;
  font-size: 15px;
  margin-bottom: 5px;
  padding: 0; }

.cat-box .icon-box {
  position: absolute;
  top: 12px;
  left: 12px; }

#Contents .cat-box p.simulation-link {
  /* シミュレーションリンクの追加 */
  clear: both;
  float: right;
  margin: -30px 5px 5px;
  padding: 0;
  opacity: 1.00;
  filter: alpha(opacity=100);
  -moz-opacity: 1.00; }

#Contents .cat-box div.hover p.simulation-link a.sprite {
  opacity: 1.00;
  filter: alpha(opacity=100);
  -moz-opacity: 1.00; }

#Contents .cat-box p.simulation-link a.sprite {
  width: 152px;
  height: 24px;
  background-position: -560px 0; }

#Contents .cat-box p.simulation-link a.sprite:hover {
  background-position: -560px -24px; }

/* （中）カテゴリ一覧 */
div.cat-title {
  position: relative;
  width: 100%;
  min-height: 34px;
  margin: -3px 0 0;
  overflow: hidden; }
  div.cat-title p {
    padding-bottom: 0 !important; }
  div.cat-title h3 {
    margin: 6px 0 0;
    padding-right: 120px; }
  div.cat-title a.more-cat {
    position: absolute;
    top: 2px;
    right: 0;
    margin: 0; }

.cat-list {
  position: relative;
  width: 100%;
  padding-top: 0;
  padding-bottom: 20px;
  padding-left: 28px;
  overflow: hidden; }
  .cat-list .item-box {
    position: relative;
    width: 150px;
    margin-top: 6px;
    margin-right: 6px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    /*width: 25%;
		border: none;
		margin-right: 0;*/ }
  .cat-list .hover {
    border-color: #DDD;
    zoom: 1;
    cursor: pointer; }
    .cat-list .hover .item-img,
    .cat-list .hover .item-text {
      opacity: 0.75;
      filter: alpha(opacity=75);
      -moz-opacity: 0.75; }
  .cat-list .item-box a {
    zoom: 1;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%; }
  .cat-list .item-img {
    background: #FFF;
    text-align: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative; }
    .cat-list .item-img img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; }
  .cat-list .item-text {
    padding: 6px 0 0;
    font-size: 12px;
    word-break: break-all; }
    .cat-list .item-text .item-code {
      padding: 0; }
      .cat-list .item-text .item-code span {
        padding: 0 1px;
        display: inline-block; }
    .cat-list .item-text h4 {
      color: #4E4E4E;
      background: none;
      margin: 2px 2px 0;
      padding: 0;
      line-height: 1.3;
      font-size: 12px; }
    .cat-list .item-text span {
      color: #999; }
    .cat-list .item-text p.price {
      color: #000;
      padding: 0.5em 2px 0.1em !important; }
    .cat-list .item-text p.price span {
      color: #000;
      font-weight: bold; }
  .cat-list .icon-box {
    position: absolute;
    top: 10px;
    left: 10px; }

/* （小）カテゴリ（商品）一覧 */
.cat-item-photo {
  width: 700px;
  padding-top: 10px;
  overflow: hidden; }
  .cat-item-photo .item-box {
    position: relative;
    float: left;
    width: 214px;
    border: 1px solid #CCC;
    margin-top: 4px;
    margin-right: 4px;
    overflow: hidden; }
  .cat-item-photo .hover {
    border-color: #DDD;
    zoom: 1;
    cursor: pointer; }
    .cat-item-photo .hover .item-img,
    .cat-item-photo .hover .item-text {
      opacity: 0.75;
      filter: alpha(opacity=75);
      -moz-opacity: 0.75; }
  .cat-item-photo .item-box a {
    zoom: 1;
    display: block;
    cursor: pointer; }
  .cat-item-photo .item-img {
    background: #FFF;
    border-top: 10px solid #FFF;
    text-align: center; }
  .cat-item-photo .item-text {
    padding-bottom: 10px; }
  .cat-item-photo .icon-box {
    position: absolute;
    top: 20px;
    left: 10px; }

/* （小）カテゴリ（商品）一覧（各パーツ装飾） */
.item-text h2 {
  color: #222;
  background: none;
  margin: 2px 0 0;
  padding: 0;
  font-weight: normal; }

.cat-item-photo h2.title-arrow {
  margin: 8px 0; }

.cat-item-photo .item-text h2 {
  color: #111;
  margin: 0;
  padding: 0.4em 0.8em;
  font-size: 12px;
  font-weight: normal; }

.cat-item-photo .item-text p {
  padding: 0.2em 0.8em; }

.cat-item-photo .item-text p.price span {
  font-weight: bold; }

.cat-item-photo span.item-code {
  color: #999;
  padding: 0.2em 1.1em 0;
  font-size: 11px; }

#Contents .cat-item-photo .item-text p.price {
  color: #000;
  padding: 0.2em 0.8em 0.1em; }

#Contents .cat-item-photo p.item-cat {
  color: #333;
  border-bottom: 1px solid #CCC;
  margin: 0.1em 0.8em 0.2em;
  padding: 0 0 0.2em;
  font-size: 14px;
  font-weight: bold; }

/* =================================
= セレクション（コレクション）
==================================== */
.collection-img {
  border: 1px solid #CCC;
  margin-bottom: 20px;
  overflow: hidden; }

.collection-text {
  margin-bottom: 20px; }
  .collection-text h1 {
    color: #333;
    border: 1px solid #DDD;
    border-left: none;
    border-right: none;
    margin: 0 0 10px;
    padding: 18px 16px;
    font-size: 26px;
    font-weight: normal; }

.collection-more {
  float: right;
  padding: 0 10px 10px; }
  .collection-more a.sprite {
    width: 131px;
    height: 18px;
    background-position: -380px -200px; }

/* -------------------------------
　= 商品詳細
	ページタイトルボックス
	検索一覧に戻る
	バリエーション一覧
	メイン画像
	基本情報
	ギャラリー
	その他の候補
 ------------------------------- */
/* =================================
= 商品詳細
==================================== */
/* ページナビ＆タイトルボックス */
.detail-nav {
  float: right;
  padding: 2px 0;
  text-align: right; }
  .detail-nav .css3btn, .detail-nav .css3btn-white {
    border: none; }

.title-box {
  border-bottom: 1px solid #CCC;
  margin-bottom: 20px;
  padding-bottom: 5px; }
  .title-box h1 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: normal; }
  .title-box p {
    padding: 2px 0 5px; }

/* メイン画像（切り替え画像 bxslider） */
.main-img {
  position: relative;
  float: left;
  width: 50%;
  margin: 0 auto;
  padding-bottom: 10px; }
  .main-img .bx-wrapper {
    margin: 0 auto 15px; }
    .main-img .bx-wrapper .bx-viewport {
      left: 0;
      border: none;
      box-shadow: none; }
    .main-img .bx-wrapper .bx-controls-direction a {
      top: auto;
      width: auto;
      height: auto;
      margin-top: -16px;
      text-indent: 0; }
    .main-img .bx-wrapper .bx-prev {
      left: 0; }
    .main-img .bx-wrapper .bx-next {
      right: 0; }
  .main-img .bx-loading {
    background: #fff url("../images/loading.gif") 50% 40% no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* メイン画像（表示エリア bxslider） */
ul#main-gallery {
  margin: 0; }
  ul#main-gallery li {
    padding: 0;
    height: 420px; }
  ul#main-gallery img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%; }

/* メイン画像（切り替えサムネイル bxslider） */
#slide-gallery {
  position: relative;
  margin: 0 0 10px;
  padding: 0 30px;
  /* Retina指定（背景画像） */
  /* Retina指定（背景画像） */ }
  #slide-gallery #NextIcon a {
    position: absolute;
    top: 0;
    display: block;
    width: 20px;
    height: 100%;
    background-color: #fff;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px;
    right: 0; }
    #slide-gallery #NextIcon a.off {
      background-color: #ddd;
      cursor: default;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5; }
    #slide-gallery #NextIcon a.disabled {
      background-color: #ddd;
      cursor: default;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #slide-gallery #NextIcon a {
      background-image: url("../images/common_l/arrow_b.png");
      background-size: 5px 8px; } }
  #slide-gallery #PrevIcon a {
    position: absolute;
    top: 0;
    display: block;
    width: 20px;
    height: 100%;
    background-color: #fff;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-image: url("../images/common/arrow_b_r.png");
    left: 0; }
    #slide-gallery #PrevIcon a.off {
      background-color: #ddd;
      cursor: default;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5; }
    #slide-gallery #PrevIcon a.disabled {
      background-color: #ddd;
      cursor: default;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #slide-gallery #PrevIcon a {
      background-image: url("../images/common_l/arrow_b_r.png");
      background-size: 5px 8px; } }
  #slide-gallery a {
    text-decoration: none; }

ul#nav-gallery {
  margin: 0;
  padding: 0; }
  ul#nav-gallery li {
    float: left;
    margin: 0 10px 10px 0;
    padding: 0; }
    ul#nav-gallery li a {
      border: 1px solid #CCC;
      width: 78px;
      height: 78px;
      display: block; }
      ul#nav-gallery li a.active {
        border: 1px solid #359ac5; }
    ul#nav-gallery li img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      max-width: 95%;
      max-height: 95%;
      display: inline-block; }

ul#nav-gallery2 {
  display: none; }

/* 図面画像 */
/* 資料ダウンロードボタン */
.item-btn {
  clear: left;
  padding-bottom: 10px; }

/* 基本情報 */
.main-info {
  float: right;
  width: 46%; }
  .main-info dl.price-item {
    margin: 0 2px; }
    .main-info dl.price-item dt {
      color: #666;
      padding: 0;
      font-size: 13px; }
    .main-info dl.price-item dd {
      color: #111;
      padding: 2px 0 8px;
      font-size: 18px; }
    .main-info dl.price-item dd span {
      font-size: 10px;
      padding-left: 0.3em; }

.basic {
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  margin: 0 0 15px;
  padding: 8px 0; }
  .basic table {
    margin: 0; }
    .basic table th, .basic table td {
      background: none;
      border: none;
      padding: 0.1em 0.5em; }
    .basic table th {
      width: 86px;
      color: #333333;
      font-weight: bold; }
    .basic table td {
      font-size: 14px; }
  .basic span.order {
    color: #359AC5; }
  .basic span.green {
    color: #489F2F; }

/* バリエーション（カラー・サイズ）選択 */
.variation-box {
  clear: both;
  margin-bottom: 10px;
  overflow: hidden; }
  .variation-box h2 {
    color: #111;
    background: none;
    margin: 0 0 8px;
    padding: 3px 0;
    font-size: 11px;
    font-weight: normal;
    /* Retina指定（背景画像） */ }
    .variation-box h2 span {
      background: #CCC url(../images/icon/i_check.png) 8px 4px no-repeat;
      padding: 3px 10px 3px 26px; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .variation-box h2 span {
        background-image: url("../images/icon_l/i_check.png");
        background-size: 12px 12px; } }
  .variation-box ul {
    margin: 0;
    overflow: hidden; }
    .variation-box ul li {
      float: left;
      width: 60px;
      margin: 0;
      padding: 0 0 8px; }
      .variation-box ul li img {
        width: 50px;
        border: 1px solid #CCC;
        margin: 1px 0; }
      .variation-box ul li a:hover {
        opacity: 0.65;
        filter: alpha(opacity=65);
        -moz-opacity: 0.65; }
    .variation-box ul li.selected img {
      border: 2px solid #359AC5;
      margin: 0; }

/* 製品ムービー */
.movie {
  margin-bottom: 15px; }
  .movie h2 {
    margin-bottom: 5px; }
  .movie .obj-box {
    margin: 0 0 10px; }

/* カタログボタン・キャッチコピー */
.detail-read {
  clear: both;
  margin: 0 0 20px; }
  .detail-read h3 {
    color: #000;
    background: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: bold; }
  .detail-read p {
    font-size: 14px; }

/* 仕様 */
.specifications {
  clear: both;
  background: #EEE;
  padding: 8px 16px; }
  .specifications h3 {
    color: #000;
    background: none;
    border-bottom: 1px solid #CCC;
    padding: 0.2em 0.4em;
    font-size: 15px;
    font-weight: normal; }
  .specifications ul li {
    padding: 2px 0; }
  .specifications ul li span {
    color: #333;
    font-weight: bold;
    padding-right: 0.8em; }

/* ピクトアイコン */
.pic-icon {
  clear: both;
  margin: 20px 0 0; }
  .pic-icon h3 {
    color: #000;
    background: none;
    border-bottom: 1px solid #CCC;
    padding: 0.2em 0.4em;
    font-size: 15px;
    font-weight: normal; }
  .pic-icon ul {
    margin: 6px 0; }
    .pic-icon ul li {
      padding: 2px 0;
      display: inline-block; }
    .pic-icon ul img {
      height: 38px; }

.item-memo {
  margin: 10px 0; }

.item-memo p {
  color: #3499C5;
  font-size: 11px;
  padding: 0.15em 0; }

ul.item-banner {
  width: 680px;
  margin: 6px 0 0;
  overflow: hidden; }
  ul.item-banner li {
    float: left;
    margin: 0 10px 10px 0;
    padding: 0; }

/* ギャラリー */
.gallery {
  clear: both;
  border: 1px solid #CCC;
  margin-bottom: 20px;
  position: relative;
  width: 654px; }
  .gallery h3 {
    margin: 14px 20px 0; }

.scrollable {
  position: relative;
  overflow: hidden;
  width: 620px;
  height: 118px;
  margin: 10px 0 0 20px; }
  .scrollable .items {
    width: 20000em;
    position: absolute; }
    .scrollable .items div {
      float: left; }
    .scrollable .items div span {
      float: left;
      border: 1px solid #CCC;
      margin-right: 16px;
      padding: 4px;
      display: block; }
  .scrollable div a:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65; }

.gallery p.click-icon {
  padding: 1px 20px 8px;
  text-align: right;
  font-size: 11px; }

.gallery p.click-icon span {
  background: url(../images/icon/i_zoom.gif) 0 0 no-repeat;
  padding-left: 18px; }

.prev,
.next {
  position: absolute;
  top: 16px;
  right: 58px;
  width: 28px;
  height: 18px;
  background-position: -900px -50px;
  cursor: pointer; }

.next {
  right: 20px;
  background-position: -928px -50px; }

.disabled {
  cursor: default;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5; }

.manual {
  margin-bottom: 10px; }
  .manual a {
    color: #4F4F4F;
    background: url(../images/icon/pdf.gif) 0 0 no-repeat;
    padding: 40px 62px 10px;
    text-decoration: none;
    display: block; }

/* その他の候補 */
.other {
  width: 680px;
  overflow: hidden;
  overflow: visible; }
  .other dl {
    float: left;
    width: 114px;
    margin: 0 21px 11px 0;
    padding: 0; }
  .other dt {
    border: 1px solid #CCC;
    margin: 0;
    padding: 0; }
  .other dd {
    margin: 0.2em 0;
    padding: 0.2em 0;
    font-size: 11px; }
  .other dd.collection {
    color: #FFF;
    background: #747474;
    padding: 0.2em 0.5em; }
  .other dd span {
    color: #000;
    padding-top: 0.5em;
    font-weight: bold;
    display: block; }
  .other dt a:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -moz-opacity: 0.65; }

/* 見出し */
h2.title-arrow,
h3.title-arrow {
  color: #111;
  background: url(../images/common/title_close2.gif) 0 2px no-repeat;
  border: none;
  font-size: 16px;
  padding: 0 0 0 20px;
  font-weight: normal; }

.search-photo h2.title-arrow {
  margin: 8px 0; }

.cat-list h3.title-arrow {
  padding-right: 110px; }

div.cat-title .title-arrow span,
div.cat-item-photo .title-arrow span {
  color: #289CC6;
  border-left: 1px solid #AAA;
  margin-left: 0.8em;
  padding-left: 0.7em;
  font-size: 10px;
  display: inline; }

/* 製品特長（画像） */
.point-img {
  border: 1px solid #CCC; }
  .point-img h3 {
    margin-bottom: 15px;
    padding: 0.5em 15px;
    font-size: 18px;
    font-weight: normal; }
  .point-img img {
    float: left;
    max-width: 100%;
    padding-right: 15px;
    margin-bottom: 10px; }
  .point-img .point-sec {
    clear: both;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    overflow: hidden; }
    .point-img .point-sec h4 {
      background: none;
      border-left: 6px solid #E3004C;
      border-bottom: 1px solid #999;
      margin-bottom: 10px;
      margin-right: 15px;
      padding: 6px 0 6px 10px;
      font-size: 16px;
      font-weight: bold; }
    .point-img .point-sec .text-box {
      padding-right: 15px;
      margin-bottom: 10px;
      min-width: 240px;
      overflow: hidden; }
      .point-img .point-sec .text-box strong {
        font-size: 16px;
        padding-top: 0.4em;
        display: block; }
      .point-img .point-sec .text-box p {
        font-size: 14px; }

/* 詳細ページ内ボタン(カテログ、ご購入はこちら) */
.detail-btn-box {
  margin: 30px 0;
  text-align: center; }

.detail-catalog-btn {
  color: #ffffff;
  border-radius: 5px;
  background-color: #359AC5;
  border-color: 1px solid #0B8CC0;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 200px;
  font-weight: normal;
  margin-bottom: 15px;
  margin-right: 10px;
  font-size: 15px; }
  .detail-catalog-btn:hover {
    color: #ffffff;
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

span.i-catalog {
  background: url("../images/icon/i_catalog.png") 0 0 no-repeat;
  width: 30px;
  height: 24px;
  padding: 0 5px;
  display: inline-block;
  vertical-align: middle; }

span.i-link2 {
  background: url("../images/icon/i_link2.png") 0 0 no-repeat;
  width: 30px;
  height: 24px;
  padding: 0 5px;
  display: inline-block;
  vertical-align: middle; }

/* Retina指定（背景画像） */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  span.i-catalog {
    background-image: url("../images/icon_l/i_catalog.png");
    background-size: 30px 24px; }
  span.i-link2 {
    background-image: url("../images/icon_l/i_link2.png");
    background-size: 30px 24px; } }

.detail-shop-btn {
  color: #ffffff;
  border-radius: 5px;
  background-color: #FF8617;
  border-color: 1px solid #F07200;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 200px;
  font-weight: normal;
  margin: 10px auto;
  font-size: 18px;
  max-width: 600px;
  display: block; }
  .detail-shop-btn:hover {
    color: #ffffff;
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    -ms-opacity: 0.75;
    -o-opacity: 0.75;
    opacity: 0.75; }

span.i-cart {
  background: url("../images/icon/i_cart.png") 50% 0 no-repeat;
  width: 30px;
  height: 32px;
  padding: 0 10px;
  display: inline-block;
  vertical-align: middle; }

/* Retina指定（背景画像） */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  span.i-cart {
    background-image: url("../images/icon_l/i_cart.png");
    background-size: 30px 32px; } }

/* CSS Document */
/* variation */
.variation {
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  /* Retina指定（背景画像） */
  /* Retina指定（背景画像） */ }
  .variation .btn-more {
    position: absolute;
    top: -58px;
    right: 0; }
  .variation .btnL {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: none;
    width: 20px;
    height: 100%;
    background-color: #fff;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-image: url("../images/common/arrow_b_r.png"); }
  .variation .btnLOff {
    z-index: 1;
    display: block;
    width: 20px;
    height: 100%;
    background-color: #ddd;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-image: url("../images/common/arrow_b_r.png"); }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .variation .btnL, .variation .btnLOff {
      background-image: url("../images/common_l/arrow_b_r.png");
      background-size: 5px 8px; } }
  .variation .btnR {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: none;
    width: 20px;
    height: 100%;
    background-color: #fff;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px; }
  .variation .btnROff {
    z-index: 1;
    display: block;
    width: 20px;
    height: 100%;
    background-color: #ddd;
    background-image: url("../images/common/arrow_b.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 3px; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .variation .btnR, .variation .btnROff {
      background-image: url("../images/common_l/arrow_b.png");
      background-size: 5px 8px; } }
  .variation .cat-list {
    position: relative;
    margin: 0 30px;
    padding-left: 0;
    padding-bottom: 0;
    width: auto;
    height: 246px;
    overflow: hidden; }
    .variation .cat-list .list-main {
      position: absolute;
      height: 100%; }
      .variation .cat-list .list-main div.item-box {
        float: left;
        position: relative;
        width: 150px;
        height: 100%;
        margin-top: 0;
        margin-right: 6px;
        border: none; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    file: mediaquery.css
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*　画面サイズが768pxまではここを読み込む　*/
@media screen and (max-width: 991px) {
  /* = Head */
  #Header #Logo {
    padding-bottom: 5px; }
    #Header #Logo span {
      padding-top: 15px;
      font-size: 13px; }
  #Header #MenuBtn {
    float: right;
    display: inline-block;
    position: relative;
    width: 42px;
    height: 42px;
    margin: 10px 0 0 10px;
    border-radius: 6px;
    background: #6A6A6A;
    cursor: pointer; }
    #Header #MenuBtn span {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 3px;
      margin: -2px 0 0 -9px;
      background: #ffffff;
      -webkit-transition: .2s;
      transition: .2s;
      overflow: visible; }
      #Header #MenuBtn span:before, #Header #MenuBtn span:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 3px;
        background: #ffffff;
        -webkit-transition: .3s;
        transition: .3s; }
      #Header #MenuBtn span:before {
        margin-top: -10px; }
      #Header #MenuBtn span:after {
        margin-top: 6px; }
  /* = Contents */
  #MainConts {
    margin-left: 0; }
  #MainInner {
    margin-left: 0; }
  #SubConts {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 600px;
    width: 100%;
    height: 100%;
    text-align: left;
    font-size: 13px;
    background: #ffffff;
    margin: 0 0 0 -600px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 1; }
  /* カテゴリからさがす（レイアウト） */
  .cat-box .items {
    width: 100%; }
  .cat-box .item-box {
    width: 100%;
    margin-right: 0; }
  .cat-box .item-img {
    width: 20%; }
  .cat-box .item-text {
    width: 78%; }
  /* （中）カテゴリ一覧 */
  .cat-list .item-box {
    /*width: 50%;*/ } }

/*　画面サイズが767pxまではここを読み込む　*/
@media screen and (max-width: 767px) {
  /* = トップページ */
  .howto-guide {
    position: static; }
    .howto-guide .css3btn-white-arrow, .howto-guide input.css3btn-white-arrow, .howto-guide button.css3btn-white-arrow, .howto-guide a.css3btn-white-arrow {
      width: 100%;
      box-sizing: border-box;
      margin-top: 0;
      padding-top: 10px;
      padding-bottom: 10px; }
  /*.category-list{
		width:100%;
		overflow:hidden;
		position: relative;
	}
	.category-box{
		float:left;
		width:100%;
		margin-top:12px;
		margin-right:2%;
	}
	.category-box div{
		overflow:hidden;
	}
	.category-catalog{
		float:left;
		margin-right:15px;
		margin-top: 10px;
	}*/
  .category-catalog {
    /*margin: 10px;*/ }
  .category-link {
    padding-top: 11px;
    /*padding-bottom: 10px;*/ }
  .category-list ul,
  .category-list ol {
    width: 100%;
    float: none;
    margin: -10px 0 0;
    /*background: #eee;
		border: 2px solid #eee;*/ }
  .category-list ul li,
  .category-list ol li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd; }
  .category-list ol {
    /*background: #ccc;*/ }
  .category-list ol li {
    /*color: #888;*/ }
  .category-list ul li a,
  .category-list ol li a {
    padding: 0.7em 0.8em;
    display: block;
    text-decoration: none;
    background: #fff; }
  /* = 商品詳細 */
  .main-img {
    float: none;
    width: 100%;
    overflow: hidden; }
  .main-info {
    float: none;
    width: 100%; }
  #slide-gallery {
    display: none; }
  ul#nav-gallery {
    display: none; }
  ul#nav-gallery2 {
    text-align: center;
    margin: 0 0 20px;
    display: block; }
    ul#nav-gallery2 li {
      width: 10px;
      float: none;
      display: inline;
      margin: 0 10px 10px 0;
      padding: 0; }
    ul#nav-gallery2 li a {
      width: 10px;
      height: 10px;
      background: #cccccc;
      border-radius: 10px;
      display: inline-block; }
    ul#nav-gallery2 li a.active {
      background: #359ac5; }
  .link-box ul {
    width: 100%; }
  .link-box li {
    width: 100%;
    margin-right: 0%; }
  /* = 使い方ガイド */
  .guide-block .guide-box {
    float: none;
    width: 92%; }
  .guide-block .first-box {
    border: none;
    margin-right: 0;
    margin-bottom: 20px; }
  .guide-block .last-box {
    border: none;
    margin-right: 0; } }

/*　画面サイズが991pxまではここを読み込む　*/