@charset "utf-8";

/* -------------------------------
common
------------------------------- */
.l-content img {
  vertical-align: bottom;
}

/* section */
.l-content .section {
  margin-bottom: 30px;
  position: relative;
}
.l-content .m-lh_01{
  line-height: 1.0;
}

/* -------------------------------
contents
------------------------------- */
/* mainVisual */
.l-content .mainVisual {
  width: 950px;
  height: 313px;
  margin-bottom: 30px;
  background: url("/maker/misumi/fs/pr/newproduct/economy/img/mv_20240930.png") no-repeat 0 0;
}
.l-content .mainVisual h1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.l-content .mainVisual .anc_btnLink {
  width: 200px;
  height: 40px;
  display: block;
  box-sizing: border-box;
  padding: 9px 2px 8px;
  border-radius: 2px;
  background-color: #ffcc00 !important;
  text-align: center;
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  text-decoration: none !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMi1jMDAwIDc5LjFiNjVhNzliNCwgMjAyMi8wNi8xMy0yMjowMTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmYTk4YWQ0ZS0zOWNkLWI2NGYtYmVlOS0xZjU1ZTFiZTBmNjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkI5NUE5MTAyOUUwMTFFRDhBMzlCRTgwQkI3RTBCNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkI5NUE5MEYyOUUwMTFFRDhBMzlCRTgwQkI3RTBCNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZmE5OGFkNGUtMzljZC1iNjRmLWJlZTktMWY1NWUxYmUwZjY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmZhOThhZDRlLTM5Y2QtYjY0Zi1iZWU5LTFmNTVlMWJlMGY2OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po/JFBQAAABhSURBVHjaYmBgYAgDYkYGwsAYRBwG4n4CGkyA+D2IsQ2I/wPxBBwaYAr/gjiSQHwDqmEimgaYwj9AnAgTBGm4jqYBpPADukJsGpYjKUzA5REJJA14FSJruAzE8egSAAEGAL/LGuEVlFBiAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 11px center;
}
.l-content .mainVisual .anc_btnLink a {
  opacity: 0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha(opacity=75)";
  text-decoration: none;
  color: #333;
}

/* h2Ttl_01 */
.l-content .h2Ttl_01 {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
}
.l-content .h2Ttl_01 span {
  color: #ffcc00;
  padding-right: 5px;
  font-size: 20px;
  vertical-align: bottom;
}
.l-content .h2Ttl_01 span.icon_mv {
  background: #ffefac;
  color: #333;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 5px 4px 6px;
  border: 1px solid #ffcd00;
  vertical-align: middle;
}
.l-content .h2Ttl_01 span.txt_mv {
  font-size: 14px;
  font-weight: normal;
  color: #333;
}

/* h2Ttl_02 */
.l-content .h2Ttl_02 {
  position: relative;
  border-top: 1px solid #ffcc00;
  border-bottom: 1px solid #ffcc00 !important;
  background: #000;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 10px;
}
.l-content .h2Ttl_02 span {
  border-left: 5px solid #ffcc00;
  display: block;
  color: #fff;
  padding: 0 0 0 10px;
  line-height: 1.2;
}
.l-content .h2Ttl_02 .m-btn--up {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* title decoration */
.l-content .txt_solution {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  margin: 10px auto;
}
.l-content .txt_solution::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 36px;
  background-image: url(/maker/misumi/fs/pr/newproduct/economy/img/ttl_icon_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
  padding-right: 10px;
}
.l-content .txt_solution::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 36px;
  background-image: url(/maker/misumi/fs/pr/newproduct/economy/img/ttl_icon_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
  margin-left: 10px;
}

/* topicsArea */
.l-content .topicsArea {
  width: 950px;
  margin-bottom: 30px;
  background: #fff8da;
  box-sizing: border-box;
  padding: 20px 15px 15px;
}
.l-content .topicsArea .topicsAreaTtl {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.l-content .topicsArea .topicsInner {
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.l-content .topicsArea .topicsInner .topicsBox {
  width: 455px;
  height: 130px;
  border: 1px solid #bfbfbf;
  box-sizing: border-box;
  background: #fff;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
}
.l-content .topicsArea .topicsInner .topicsBox ul {
  display: flex;
  justify-content:flex-start;
  align-items: center;
}
.l-content .topicsArea .topicsInner .topicsBox .no_ttl {
  width: 55px;
  height: 55px;
  margin-right: 10px;
}
.l-content .topicsArea .topicsInner .topicsBox .no_ttl img{
  width: 100%;
  height: 100%;
}
.l-content .topicsArea .topicsInner .topicsBox .topicsBoxTxt{
  width: 328px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* ancNav */
.l-content .ancNav {
  width: 950px;
}
.l-content .ancNavBox {
  height: 187px;
  box-sizing: border-box;
  padding: 30px 45px;
  border: 2px solid #ffcc00;
  margin-bottom: 30px;
}
.l-content .ancNav ul {
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}
.l-content .ancNav li{
  text-align: center;
}
.l-content .ancNavBox span {
  display: inline-block;
  position: relative;
  padding-left: 15px;
  margin-top: 20px;
}
.l-content .ancNavBox span:before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAABLsQqMrBsAAAABdFJOUwBA5thmAAAAFElEQVQI12NgAIImBhcGDQYBBgYAB3QA/zGyjSsAAAAASUVORK5CYII=) 0 0 no-repeat;
}

/* サンプルに関して */
.l-content .section .c-text--border {
  width: 330px;
  padding: 11px 0 10px;
  border: 2px solid #c00;
  font-size: 19px;
}

/* 類似品との価格比較に関して */
.l-content .section .c-graph {
  width: 580px;
  margin-left: 15px;
  padding: 15px 0 20px;
  border: 1px solid #ccc;
}
.l-content .section .c-graph .c-graph__text {
  margin-top: 8px;
  padding-right: 80px;
}


/* -------------------------------
itemList
------------------------------- */
.l-content .wrap_itemList {
  width: 950px;
  height: auto;
  background: url("/maker/misumi/fs/pr/newproduct/economy/img/bg_black.png") 0 0;
  background-position: top;
  background-repeat: repeat-y;
  box-sizing: border-box;
  padding: 20px 17px 25px;
}
.l-content .itemList {
  letter-spacing: -0.4em;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}
.l-content .itemList li{
  margin: 0 12px 15px 0px;
  position: relative;
}
.l-content .itemList li:nth-of-type(4n){
  margin: 0 0 15px 0px;
}
.l-content .itemList .item {
  letter-spacing: normal;
  border: 1px solid #bfbfbf;
  width: 220px;
  height: 350px;
  padding: 10px 10px 15px;
  box-sizing: border-box;
  background: #fff;
  position: relative;
}
.l-content .itemList .item .name {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  height: 57px;
}
.l-content .itemList .item .pic {
  position: relative;
  margin-bottom: 25px;
}
.l-content .itemList .item .pic img {
  width: 140px;
  display: block;
  margin: auto;
}
.l-content .itemList .item .pic span {
  display: block;
  text-align: center;
  font-size: 11px;
}
.l-content .itemList .item .price {
  text-align: center;
  margin: 0 auto 10px;
  vertical-align: bottom;
  width: 188px;
  line-height: 20px;
}
.l-content .itemList .item .price strong {
  font-size: 23px;
  margin: 0 2px 0 4px;
}
.l-content .itemList .item .quantity {
  text-align: center;
  margin-bottom: 8px;
}
.l-content .itemList .item .btn {
  text-align: center;
  font-weight: bold;
}

.l-content .itemList .item .btn a {
  text-decoration: none;
}

.l-content .itemList .item .pic.box_hover img {
  cursor: pointer;
  opacity: 0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha(opacity=75)";
}

/* icon */
.l-content .itemList .item .icon_cls {
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-color: #FFF;
  color: #333;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 25px;
  padding: 2px 8px 2.5px;
  line-height: 1.5;
  text-align: center;
  text-indent: 0;
  font-size: .8rem;
  font-weight: bold;
}
.l-content .itemList .item .icon_cls_none {
  display: block;
  height: 16.5px;
  margin-bottom: 25px;
}

/* coming soon */
/* 追加準備中　商品情報なしの場合 itemにcoming_soon_blankクラスをつけた空タグ設置*/
.l-content .itemList .item.coming_soon_blank{
  background-image:url("/maker/misumi/fs/pr/newproduct/economy/img/txt_coming_soon.png"),
  repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(204, 227, 227, 0.4) 3px, rgba(204, 227, 227, 0.4) 4px);
  background-size:174px 62px,220px 100%;
  background-repeat: no-repeat,no-repeat;
  background-position:20px 100px,0 0;
  background-color: rgba(204, 204, 204, 1);
  height: 350px;
}
.l-content .itemList .item.coming_soon_blank::after {
  content: "追加準備中";
  position: absolute;
  top: 250px;
  left: 0;
  width: 220px;
  color: #666;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  z-index: 1;
  opacity: 1;
}

/* table */
.l-content .table_center{
  text-align: center;
}
.l-content .table_name{
  margin-bottom: 10px;
  margin-left: 15px;
}
.l-content .table_area{
  position: relative;
  width: 935px;
  margin-left: 15px;
  margin-bottom: 30px;
}
.l-content .off_arrow {
  position: absolute;
  top: 55px;
  left: 205px;
}
.l-content .off_arrow_02 {
  position: absolute;
  top: 75px;
  left: 205px;
}
.l-content .table_notice{
  background: #dee7f6;
  box-sizing: border-box;
  padding: 10px;
}

/* notes */
.l-content .notes {
  margin-bottom: 30px;
  line-height: 21px;
}
.l-content .notes span{
  padding-left: 1em;
}
.l-content .notes_txt{
  margin-left: 15px;
  font-size: 14px;
  font-weight: bold;
}