@charset "utf-8";
/* sidxalcm.css */
/* strage index all common */
/* オフィス収納シリーズall index 共通用 */

/* ページ全体の設定 */
/* 基本設定 */
/* リセット記述（chrome ie edge ブラウザ特有のCSSを解除）*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "メイリオ", "Meiryo" !important;
  vertical-align:top;
  box-sizing: border-box;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}

body {
  max-width: 1000px;
  margin: auto;
}

img {
  max-width: 100%;
}

header {
  margin: auto;
  width: 100%;
}

/* ヘッダー部 */
#category-introduction {
  display: flex;
  flex-wrap: wrap;
  border: 5px double #090;
  color: #333;
  align-items: center;
  margin-top: .2em;
  padding: .2em;
  width: 100%;
}
.page-title {
  font-size: 140%;
  font-weight: bold;
  padding-left: .5em;
  width: 65%;
  width: 78%;
}
.shop-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  text-align: right;
  width: 30%;
  width: 20%;
}
.shop-name {
  font-size: 93%;
  width: 100%;
}
.shop-tel {
  font-size: 81%;
  width: 100%;
}

/* ページイメージ画像部 */
.image-box {
  display: flex;
  flex-wrap: wrap;
  margin: .5em auto .8em;
  align-items: flex-end;
  width: 95%;
}
.office-img {
  margin: 0 auto;
  text-align: center;
  width: 45%;
  width: 34%;
}
.office-img.wide {
  width: 50%;
  width: 42%;
}
.office-img.slide {
  width: 24%;
}
.office-img img {
  width: 85%;
}

/* カテゴリータイプ共通 */
#category-area {
  display: flex;
  flex-wrap: wrap;
}
.category-infomation {
  color: #333;
  margin: .3em auto;
  width: 98%;
}
.cate-group {
  display: flex;
  flex-wrap: wrap;
  margin: .5em 0;
  width: 100%;
}
.cate-caption {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 5px double #99ab4e;
  padding: 0 .5em;
  color: #300;
  font-size: 120%;
  width: 100%;
}
.type-box {
  display: flex;
  flex-wrap: wrap;
}
.type-group {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #2f5d50;
  margin: .5em auto;
  width: 48%;
}
.type-group a {
  text-decoration: none;
}
.type-group:hover {
  opacity: 0.6;
}
.type-caption {
  background: #00665e;
  color: #ffffff;
  text-align: center;
  padding: .2em 0;
}
.image-info {
  text-align: right;
  color: #9a493f;
  font-size: 83%;
  width: 100%;
}

/* 木製壁収納部 */
.caption-heading {
  font-size: 100%;
  width: 25%;
}
.caption-dsc {
  font-size: 87%;
  width: 45%;
}
.caption-color {
  margin-left: 1.5em;
  font-size: 87%;
  position: relative;
  width: 25%;
}
.caption-color img {
  margin-left: 1em;
  padding-bottom: .1em;
  width: 47%;
}
.color-popup {
  display: none;
  position: absolute;
  background: #fff;
  top: -50px;
  left: 50px;
  transform: scale(2);
}
.caption-color:hover .color-popup {
  display: block;
}
.type-OR {
  border: 1px solid #2f5d50;
  margin: .5em .2em;
  text-align: center;
  width: 18%;
}
.type-OR img {
  height: 150px;
  max-width: 90%;
}

/* オーダーラックジャンプ表 */
.jump-menu {
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #ccc;
  width: 100%;
}
.jump-title {
  display: flex;
  width: 15%;
}
.jump-title li {
  text-align: center;
}
.jump-title img {
  width: 60%;
}
.jump-table {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 85%;
}
.jump-box {
  position: relative;
  width:039.0px;
  width:4.7%;
}
.type-picS {
  width: 100%;
}
.jump-box:hover .img-pop {
  display: block;
}
.img-pop {
  display: none;
  position :absolute;
  left: -100px;
  bottom: 30px;
  background-color: #ffffff;
  width: 100px;
  z-index: 9999;
}
.type-picL {
  width: 100px;
}

/* フロア収納部 */
.t-info {
  display: flex;
  flex-wrap: wrap;
}
.type-image {
  margin: .2em;
  width: 30%;
}
.type-image img {
  height: 100px;
}
.type-pr {
  color: #222;
  font-size: 90%;
  padding: .3em;
  width: 68%;
}

/* 防災用品収納部 */
.type-group.b-strage {
  margin: .5em;
  text-align: center;
  width: 30%;
  width: 25%;
}
.type-image-b img {
  text-align: center;
  width: 80%;
}
.layout-image {
  display: flex;
  flex-wrap: wrap;
  margin: .5em 0;
  width: 73%;
}
.sub-group {
  margin: .3em 0;
  position: relative;
}
.sub-parts img {
  max-width: 100%;
  height: 120px;
  height: 130px;
  height: 90px;
}
.sub-popup {
  display: none;
  position: absolute;
  transform: translate(280px,-240px) scale(2);
  border: 1px solid #999;
}
.sub-parts:hover .sub-popup {
  display: block;
}
.goods-link {
  margin: .5em 0;
  width: 100%;
}
.goods-caption {
  background: #e6e6fa;
  padding: 0 .5em;
  font-size: 93%;
  color: #300;
  width: 98%;
}
.goods-link-list {
  display: flex;
  flex-wrap: wrap;
  margin: .2em;
  text-align: center;
  font-size: 75%;
  width: 98%;
}
.goods-link-list li {
  border: 1px solid #69f;
  border-radius: 3px;
  margin: .1em;
  width: 11%;
}
.goods-link-list img {
  height: 70px;
  height: 50px;
  max-width: 100%;
}
.goods-link-list a {
  color: #633;
  text-decoration: none;
}
.goods-link-list a:hover {
  text-decoration: underline;
  opacity: 0.5;
}

/* フッター部 */
address {
  border-top: 1px solid #999;
  margin-top: 1em;
  padding-top: .5em;
  font-style: normal;
  text-align: center;
  font-size: 87%;
  width: 100%;
}

